/* Farben */
:root{
  --steps-accent: #F18520;
  --steps-text:   #1E3245;
  --tile-bg:      #F5EEE9;
}

/* Wrapper */
.un-grid{
  --cols: 6;
  --cols-tab: 4;
  --cols-mob: 2;
  --gap: 20px;
  --radius: 18px;
}

/* Tabs */
.un-tabs{
  display:flex; flex-wrap:wrap; gap:10px;
  margin: 0 0 16px 0;
}
.un-tab{
  padding: 8px 14px;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  font-weight: 600;
  line-height:1;
}
.un-tab.is-active{
  background: #B01632;
  color: #fff;
}

/* Grid */
.un-gridlist{
  display:grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: var(--gap);
}
@media (max-width: 1024px){
  .un-gridlist{ grid-template-columns: repeat(var(--cols-tab), minmax(0,1fr)); }
}
@media (max-width: 640px){
  .un-gridlist{ grid-template-columns: repeat(var(--cols-mob), minmax(0,1fr)); }
}

/* Karte */
.un-card{
  background: var(--tile-bg);
  border-radius: var(--radius);
  padding: 16px;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  text-align:center;
}
.un-logo{
  width:100%; aspect-ratio: 1 / 1;
  display:grid; place-items:center;
  border-radius: calc(var(--radius) - 8px);
  overflow:hidden;
}
.un-logo img{
  width: 80%; height: 80%; object-fit: contain; display:block;
}
.un-name{
  color: var(--steps-text);
  font-size: 14px; line-height: 1.3;
  font-weight: 500;
  text-align: center;
  margin-top: 10px;
}

/* Verstecken */
.un-hidden{ display:none !important; }

/* Button */
.un-more{
  margin-top: 18px;
  display:inline-flex; align-items:center; justify-content:center;
  padding: 12px 18px;
  border-radius: 14px;
  background: var(--steps-accent);
  color:#fff; font-weight:700; border:0; cursor:pointer;
}
.un-more[hidden]{ display:none !important; }