/* =========================================
   Technologie-Stack Seite – Styles
   ========================================= */

/* Brand-Mark (Logo + Text) im Header & Footer */
.brand-mark{ color:#0f172a; }
.brand-mark:hover{ color:#0f172a; text-decoration:none; }
.brand-logo{ width:18px; height:18px; margin-right:.4rem; color:#F27849; } /* currentColor */
.brand-text{ font-weight:700; }

/* Auszug-Badge neben H1 */
.stack-badge{
  display:inline-block; padding:.2rem .5rem;
  border:1px solid var(--border); border-radius:999px;
  background:#fff; color:#334155; font-weight:600; font-size:.8rem;
}

/* Hinweiszeile unter dem Auszug */
.stack-note{ font-size:.95rem; color:#64748b; }

/* Suche & Mini-Navigation (mobil) */
.stack-searchbar { display:flex; gap:.5rem; align-items:center; margin:.75rem 0 1rem; }
.stack-searchbar .form-control { max-width: 420px; }
.stack-mini-nav { display:flex; flex-wrap:wrap; gap:.35rem .5rem; margin-bottom: .75rem; }

/* Grauer, normal abgerundeter Soft-Button */
.btn-soft{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.45rem .85rem;
  background:#f3f6f9; color:#475569;
  border:1px solid var(--border);
  border-radius:.5rem;
  font-weight:600; text-decoration:none; cursor:pointer;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.btn-soft:hover{ background:#eef2f6; border-color:#d8dee6; color:#334155; text-decoration:none; }
.btn-soft:active{ background:#e8edf3; border-color:#cfd6df; color:#334155; }
.btn-soft:focus-visible{ outline:0; box-shadow:0 0 0 .2rem rgba(15,23,42,.08); }

/* Sidebar: sticky unter der fixed-top Navbar */
.sidebar{
  position: sticky;
  top: 80px; /* entspricht ungefähr deiner Headerhöhe; ggf. anpassen */
  /* Grid-Aufbau: Suche (auto) | scrollbare Liste (1fr) | Footer (auto) */
  display: grid;
  grid-template-rows: auto 1fr auto;
  /* Höhe auf den sichtbaren Bereich begrenzen */
  max-height: calc(100vh - 100px); /* 100px = Sicherheitsabstand; bei Bedarf feinjustieren */
  padding-right: .25rem;
  background: #fff; /* damit die fixierte Suche nicht „durchscheint“ */
}

/* Suchbereich fix innerhalb der Sidebar; leichte Linie unten */
.side-search{
  position: sticky; /* sticky innerhalb des Grid-Containers */
  top: 0;
  background: #fff;
  z-index: 2;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--border);
}

/* Liste scrollt unabhängig vom Suchbereich */
.side-scroll{
  overflow: auto;
  min-height: 0; /* wichtig für korrektes Overflow-Verhalten in Grid */
}

/* Sidebar-Links (du hast bereits Stile, hier nur zur Vollständigkeit) */
.side-nav .nav-link{
  display:block;
  padding:.35rem .5rem;
  border-radius:.5rem;
  color:#0f172a;
  text-decoration:none;
}
.side-nav .nav-link:hover{ background:#f3f6f9; }
.side-nav .nav-link.active{
  background:#fff;
  border:1px solid var(--brand);
  color:#0f172a;
  position: relative;
}
.side-nav .nav-link.active::before{
  content:"";
  position:absolute; left:-6px; top:50%; transform:translateY(-50%);
  width:3px; height:18px; border-radius:2px; background:var(--brand);
}

/* Kategorien-Box */
.stack-box { border:1px solid var(--border); border-radius:.75rem; background:#fff; padding:1rem; }
.stack-box + .stack-box { margin-top: .75rem; }
.stack-box h4 { display:flex; align-items:center; gap:.45rem; margin:0 0 .5rem; font-weight:700; }
.stack-box h4 i { color: var(--brand); }

/* Ergebnis-Zeile der Suche */
.stack-result { font-size:.9rem; color:var(--muted); margin-bottom:.25rem; }

/* Listen zweispaltig ab LG */
@media (min-width: 992px){
  .stack-col-2 { columns: 2; column-gap: 1.75rem; }
  .stack-col-2 li { break-inside: avoid; }
}

/* Zurück-Links */
.back-link{ color:#0f172a; text-decoration:none; font-weight:600; }
.back-link:hover{ text-decoration:underline; text-underline-offset:2px; }