/* StudNet Bonn — colours derived from the Cygnus logo navy #254083 and the
   light blue #5EA5FC, but light-first: this site is long instructional text. */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/fonts/JetBrainsMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/fonts/JetBrainsMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/fonts/JetBrainsMono-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

/* ---------- Tokens: light (default) ---------- */
:root {
  --bg:          #ffffff;
  --bg-raise:    #f4f6fb;
  --bg-sunken:   #eaeefa;
  --panel:       #e2e8f7;
  --line:        #d3dbec;
  --line-strong: #b6c2de;

  --navy:        #254083;
  --accent:      #1f56c4;   /* 5.6:1 on white */
  --accent-soft: #14409b;
  --accent-bg:   #e8effd;
  --on-accent:   #ffffff;

  --text:        #131a2b;
  --muted:       #4d5772;   /* 7.3:1 on white */

  --ok:          #0f7a4d;
  --ok-bg:       #e6f5ee;
  --warn:        #8a5a00;
  --warn-bg:     #fdf3e0;
  --danger:      #b3261e;
  --danger-bg:   #fdeceb;

  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --sans: "Inter", system-ui, -apple-system, sans-serif;
  --w: 1120px;
  --measure: 68ch;
  --r: 10px;
  --r-btn: 7px;
}

/* ---------- Tokens: dark ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          #0a1020;
    --bg-raise:    #0e1730;
    --bg-sunken:   #070c19;
    --panel:       #121d3c;
    --line:        #26355e;
    --line-strong: #3a4c7d;

    --navy:        #254083;
    --accent:      #5ea5fc;
    --accent-soft: #8dbffd;
    --accent-bg:   #14224a;
    --on-accent:   #081022;

    --text:        #dde5f4;
    --muted:       #a3b0cd;

    --ok:          #5fce9a;
    --ok-bg:       #102b22;
    --warn:        #f0c777;
    --warn-bg:     #2e2413;
    --danger:      #f2a09b;
    --danger-bg:   #2f1717;
  }
}
:root[data-theme="dark"] {
  --bg:          #0a1020;
  --bg-raise:    #0e1730;
  --bg-sunken:   #070c19;
  --panel:       #121d3c;
  --line:        #26355e;
  --line-strong: #3a4c7d;

  --navy:        #254083;
  --accent:      #5ea5fc;
  --accent-soft: #8dbffd;
  --accent-bg:   #14224a;
  --on-accent:   #081022;

  --text:        #dde5f4;
  --muted:       #a3b0cd;

  --ok:          #5fce9a;
  --ok-bg:       #102b22;
  --warn:        #f0c777;
  --warn-bg:     #2e2413;
  --danger:      #f2a09b;
  --danger-bg:   #2f1717;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}

/* Ueberschriften standen frueher in JetBrains Mono. Als Displayschrift war das
   die falsche Wahl: Monospace liest sich in grossen Graden schlechter, laesst
   Support-Anleitungen nach Entwicklerdokumentation aussehen und trifft damit
   genau die Zielgruppe nicht, die hier gerade frustriert am Handy sitzt.
   Die Displayrolle traegt jetzt Inter mit hoeherem Gewicht und enger Laufweite;
   Mono bleibt Utility-Schrift fuer Code, Badges, Kennwerte und Eyebrow-Labels
   und behaelt damit den technischen Charakter der Marke. */
h1, h2, h3, h4 {
  font-family: var(--sans);
  letter-spacing: -0.021em;
  line-height: 1.2;
  text-wrap: balance;
}
h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800; margin: 0 0 0.6rem; }
h2 { font-size: 1.45rem; font-weight: 750; margin: 2.6rem 0 0.8rem; }
h3 { font-size: 1.14rem; font-weight: 700; letter-spacing: -0.012em; margin: 1.9rem 0 0.6rem; }

a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: var(--accent-soft); }

/* markdown-it-anchor wraps the whole heading in a link. It must look like a
   heading, not like body copy that happens to be clickable. */
.header-anchor { color: inherit; text-decoration: none; }
.header-anchor:hover { color: var(--accent); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

img { max-width: 100%; height: auto; }

code, kbd, samp { font-family: var(--mono); font-size: 0.9em; }
:not(pre) > code {
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.1em 0.35em;
}
pre {
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1rem 1.1rem;
  overflow-x: auto;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: var(--on-accent);
  padding: 0.7rem 1.2rem; border-radius: 0 0 var(--r-btn) 0;
}
.skip-link:focus { left: 0; }

/* ---------- Header ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.topbar-inner {
  max-width: var(--w); margin: 0 auto; padding: 0.7rem 1.5rem;
  display: flex; align-items: center; gap: 1.25rem;
}
.brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--text); }
.brand-name { font-family: var(--mono); font-weight: 700; font-size: 1.1rem; }
.brand-city {
  font-size: 0.72em; font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.16em; color: var(--accent); margin-left: 0.4em;
}
.mainnav { display: flex; align-items: center; gap: 1.25rem; flex: 1; min-width: 0; }
.mainnav > ul {
  display: flex; gap: 1.1rem; list-style: none; margin: 0; padding: 0;
}
.mainnav > ul a { white-space: nowrap; }
.mainnav a {
  font-size: 0.94rem; font-weight: 500; color: var(--muted); text-decoration: none;
  padding: 0.3rem 0; border-bottom: 2px solid transparent;
}
.mainnav a:hover { color: var(--text); }
.mainnav a[aria-current] { color: var(--text); border-bottom-color: var(--accent); }

.searchbox { position: relative; margin-left: auto; min-width: 0; }
.searchbox input {
  font: inherit; font-size: 0.92rem;
  background: var(--bg-raise); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r-btn);
  padding: 0.42rem 0.75rem; width: 16rem; max-width: 100%;
}
/* Position and box are applied in search.js (fixed, on document.body) so a
   stale stylesheet cannot drop the list into the header flex and stretch it. */
.search-results a {
  display: block;
  padding: 0.55rem 0.7rem;
  border-radius: var(--r-btn);
  text-decoration: none;
  color: var(--text);
}
.search-results a:hover,
.search-results a[data-active] {
  background: var(--accent-bg);
}
.search-result-title { font-weight: 650; display: block; }
.search-result-excerpt {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.4;
}
.search-result-excerpt mark {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: inherit;
  padding: 0 0.08em;
}
.search-empty {
  margin: 0;
  padding: 0.65rem 0.75rem;
  color: var(--muted);
  font-size: 0.92rem;
}
.header-tools { display: flex; align-items: center; gap: 0.8rem; flex: 0 0 auto; }
.theme-toggle {
  width: 2rem; height: 2rem; padding: 0; cursor: pointer;
  background: var(--bg-raise); border: 1px solid var(--line); border-radius: var(--r-btn);
  color: var(--text);
}
.theme-toggle::before { content: "◐"; font-size: 1rem; }
html[data-theme="light"] .theme-toggle::before { content: "☀"; }
html[data-theme="dark"] .theme-toggle::before { content: "☾"; }

.nav-toggle { display: none; }

/* ---------- Layout ---------- */
.page {
  max-width: var(--w); margin: 0 auto; padding: 2.5rem 1.5rem 4rem;
}
.page-with-aside {
  display: grid; grid-template-columns: minmax(0, 1fr) 15rem; gap: 3rem; align-items: start;
}
.prose { max-width: var(--measure); }
.page-head { margin-bottom: 2rem; }
.lead { font-size: 1.1rem; color: var(--muted); margin: 0; }

.section-nav {
  position: sticky; top: 5rem;
  border-left: 1px solid var(--line); padding-left: 1.2rem;
}
.section-nav-title {
  font-family: var(--mono); font-size: 0.75rem; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--muted); margin: 0 0 0.7rem;
}
.section-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.section-nav a { font-size: 0.92rem; text-decoration: none; color: var(--muted); }
.section-nav a:hover { color: var(--text); }
.section-nav a[aria-current] { color: var(--accent); font-weight: 600; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-size: 0.95rem; font-weight: 600; line-height: 1.25; text-align: center;
  padding: 0.6rem 1.25rem 0.55rem; border-radius: var(--r-btn); text-decoration: none;
  border: 1px solid transparent; vertical-align: middle;
}
.btn + .btn { margin-left: 0.5rem; }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-soft); color: var(--on-accent); }
.btn-ghost { border-color: var(--line-strong); color: var(--text); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-label { display: block; }
.btn br { display: none; }
.btn-url {
  display: block;
  margin-top: 0.28em;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.3;
  white-space: nowrap;
}
.btn-primary .btn-url { color: color-mix(in srgb, var(--on-accent) 78%, transparent); }
.btn-ghost .btn-url { color: var(--muted); }
.btn-ghost:hover .btn-url { color: inherit; }

/* ---------- Callouts ---------- */
.callout {
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  background: var(--accent-bg); border-radius: var(--r);
  padding: 1rem 1.2rem; margin: 1.6rem 0;
}
.callout > :first-child { margin-top: 0; }
.callout > :last-child { margin-bottom: 0; }
.callout-title { font-weight: 700; font-size: 1rem; letter-spacing: -0.01em; }
.callout-warn    { border-left-color: var(--warn);   background: var(--warn-bg); }
.callout-danger  { border-left-color: var(--danger); background: var(--danger-bg); }
.callout-success { border-left-color: var(--ok);     background: var(--ok-bg); }

.still-stuck {
  margin-top: 3rem;
  padding: 1.2rem 1.4rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r);
  background: var(--accent-bg);
}
.still-stuck p { margin: 0 0 0.85rem; }
.still-stuck p:last-child { margin: 0; }

/* ---------- Steps ---------- */
.steps { counter-reset: step; list-style: none; margin: 2rem 0; padding: 0; }
.steps > li {
  counter-increment: step; position: relative;
  padding: 0 0 1.6rem 3rem; border-left: 1px solid var(--line); margin-left: 1rem;
}
.steps > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.steps > li::before {
  content: counter(step);
  position: absolute; left: -1rem; top: 0;
  width: 2rem; height: 2rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: var(--on-accent);
  font-family: var(--mono); font-size: 0.9rem; font-weight: 700;
}
.steps > li > :first-child { margin-top: 0; }

/* ---------- Screenshots ---------- */
.screenshot { margin: 1.4rem 0; }
.screenshot img {
  border: 1px solid var(--line); border-radius: var(--r); display: block;
  max-width: min(100%, 36rem);
}
.screenshot-inline img { max-width: 320px; }
.screenshot figcaption {
  font-size: 0.85rem; color: var(--muted); margin-top: 0.5rem;
}

/* ---------- Details / accordion ---------- */
.details { border: 1px solid var(--line); border-radius: var(--r); margin: 1.4rem 0; }
.details > summary {
  cursor: pointer; padding: 0.85rem 1.1rem;
  font-size: 0.98rem; font-weight: 600;
}
.details[open] > summary { border-bottom: 1px solid var(--line); }
.details-body { padding: 0.2rem 1.1rem 1rem; }
.details-body > :first-child { margin-top: 0.8rem; }

/* ---------- Tables ---------- */
.prose table { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
.prose th, .prose td { border-bottom: 1px solid var(--line); padding: 0.55rem 0.7rem; text-align: left; }
.prose th { font-family: var(--mono); font-size: 0.85rem; }
.table-scroll { overflow-x: auto; }

/* ---------- Home ---------- */
.home { max-width: var(--w); margin: 0 auto; padding: 2.5rem 1.5rem 4rem; }

/* Die Startseite begann bisher mit einem Fliesstext-Absatz und einer nur fuer
   Screenreader vorhandenen H1 — wer sie aufrief, sah eine Reihe grauer
   Kaesten ohne Einstieg. Der Hero benennt jetzt sichtbar, wo man ist. */
.home-hero { margin: 0 0 2.5rem; }
.home-hero h1 {
  font-size: clamp(2rem, 5.5vw, 3.1rem);
  max-width: 20ch;
}
.home-hero .lead { max-width: 46ch; }
.eyebrow {
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent);
  margin: 0 0 0.7rem;
}
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; margin: 2rem 0; }
.tile {
  display: block; text-decoration: none; color: inherit;
  background: var(--bg-raise); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.5rem 1.6rem;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.tile:hover { border-color: var(--accent); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
  .tile { transition: none; }
  .tile:hover { transform: none; }
}
.tile h2 { font-size: 1.15rem; margin: 0 0 0.4rem; }
.tile p { margin: 0; color: var(--muted); font-size: 0.95rem; }
/* Die Zahl der Kacheln haengt davon ab, aus welchem Netz der Besucher kommt
   (site.js ergaenzt sie aus /api/nav). Ein festes 4-Spalten-Raster liesse
   sonst eine leere Spalte stehen; auto-fit klappt die leere Spur weg und
   verteilt die vorhandenen Kacheln auf die volle Breite.
   Hier steht bewusst nicht, um welches Angebot es geht: diese Datei wird an
   jeden Besucher ausgeliefert. */
.tiles-small { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.tiles-small .tile { padding: 1.1rem 1.2rem; }
.tiles-small h2 { font-size: 1rem; }

.quicklinks {
  display: flex; flex-wrap: wrap; gap: 0.8rem;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 1.2rem 0; margin: 2.5rem 0;
}
.quicklinks .btn + .btn { margin-left: 0; }

/* ---------- Footer ---------- */
.footer { background: var(--bg-raise); border-top: 1px solid var(--line); margin-top: 4rem; }
.footer-inner { max-width: var(--w); margin: 0 auto; padding: 2rem 1.5rem; font-size: 0.9rem; }
.footer-nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 1.2rem; margin: 0 0 1rem; padding: 0; align-items: center; }
.footer-nav a { color: var(--muted); text-decoration: none; }
.footer-nav a:hover { color: var(--text); }
.footer-nav .btn-ghost { color: var(--text); }
.footer-nav .btn-ghost:hover { color: var(--accent); }
.footer-nav .btn-url { color: var(--muted); }
.footer-meta { color: var(--muted); margin: 0; }
/* Kein zusaetzliches opacity: das drueckt --muted auf dem Footer-Grund von
   6.65:1 auf 3.70:1 und reisst bei dieser Schriftgroesse die 4.5:1 aus AA. */
.footer-build { font-family: var(--mono); font-size: 0.8em; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .page-with-aside { grid-template-columns: 1fr; }
  .section-nav {
    order: -1; position: static;
    border-left: 0; padding-left: 0;
    border-top: 0; border-bottom: 1px solid var(--line);
    padding: 0 0 1.2rem; margin-bottom: 0.4rem;
  }
  .section-nav ul { display: flex; flex-wrap: wrap; gap: 0.4rem 0.5rem; }
  .section-nav a {
    display: inline-block;
    padding: 0.32rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--bg-raise);
    font-size: 0.88rem;
  }
  .section-nav a[aria-current] {
    background: var(--accent); color: var(--on-accent); border-color: var(--accent);
  }
}
@media (max-width: 1080px) {
  .topbar-inner { flex-wrap: wrap; }
  .nav-toggle {
    display: inline-flex; align-items: center; gap: 0.5rem; margin-left: auto;
    font: inherit; font-size: 0.92rem; font-weight: 500;
    background: var(--bg-raise); color: var(--text);
    border: 1px solid var(--line); border-radius: var(--r-btn);
    padding: 0.45rem 0.8rem; cursor: pointer;
  }
  .nav-toggle-bars { width: 1rem; height: 2px; background: currentColor; box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor; }
  .mainnav { display: none; width: 100%; flex-direction: column; align-items: stretch; gap: 1rem; padding: 1rem 0 0.5rem; }
  .mainnav[data-open] { display: flex; flex: 1 1 100%; }
  .mainnav > ul { flex-direction: column; gap: 0; }
  .mainnav > ul a { display: block; padding: 0.7rem 0; border-bottom: 1px solid var(--line); }
  .mainnav a[aria-current] { border-bottom-color: var(--line); color: var(--accent); }
  .searchbox { margin-left: 0; }
  .searchbox input { width: 100%; }
  .tiles, .tiles-small { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  body { font-size: 16px; }
  .page, .home, .topbar-inner, .footer-inner { padding-left: 1rem; padding-right: 1rem; }
  .steps > li { padding-left: 2.6rem; }
}

@media print {
  .topbar, .footer, .section-nav, .still-stuck { display: none; }
  .details { border: 0; }
  .details-body { display: block !important; }
}

/* ---------- Router model switcher ---------- */
.router-switcher {
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--bg-raise); padding: 1.1rem 1.2rem; margin: 2rem 0;
}
.router-switcher .callout-title { margin: 0 0 0.8rem; }
.router-switcher-list {
  display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0;
}
.router-switcher button {
  font: inherit; font-size: 0.9rem; font-weight: 500; cursor: pointer;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--line-strong); border-radius: var(--r-btn);
  padding: 0.5rem 0.9rem;
}
.router-switcher button:hover { border-color: var(--accent); color: var(--accent); }
.router-switcher button[aria-pressed="true"] {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent);
}
.router-switcher-hint { font-size: 0.88rem; color: var(--muted); margin: 0.8rem 0 0; }

/* Variant blocks: visible by default (no JS, no choice made), so the page
   stays complete without scripting. */
[data-router-variants] > [data-router] {
  border-top: 1px solid var(--line); padding-top: 1.2rem; margin-top: 1.2rem;
}
[data-router-variants][data-router-active=""] > [data-router]:first-child,
[data-router-variants]:not([data-router-active]) > [data-router]:first-child {
  border-top: 0; padding-top: 0;
}
[data-router-variants][data-router-active]:not([data-router-active=""]) > [data-router] {
  border-top: 0; padding-top: 0; margin-top: 0;
}

/* ---------- Pagefind ---------- */
#pagefind-search {
  --pagefind-ui-primary: var(--accent);
  --pagefind-ui-text: var(--text);
  --pagefind-ui-background: var(--bg);
  --pagefind-ui-border: var(--line);
  --pagefind-ui-tag: var(--bg-raise);
  --pagefind-ui-border-radius: var(--r-btn);
  --pagefind-ui-font: var(--sans);
}
#pagefind-search .pagefind-ui__search-input {
  background: var(--bg-raise);
  color: var(--text);
  border-color: var(--line);
}
#pagefind-search .pagefind-ui__result-title a { color: var(--accent); }
#pagefind-search .pagefind-ui__result-excerpt { color: var(--muted); }

/* Short tabular values (standards, speeds, prices) must not wrap — a broken
   "Wi-Fi 6" or "1 GBit/s" is harder to scan than a slightly wider column. */
.prose td:not(:first-child):not(:last-child),
.prose th:not(:first-child):not(:last-child) { white-space: nowrap; }
.prose td:has(.badge) { white-space: nowrap; }

/* ---------- Badges ---------- */
/* Die Router-Tabelle war als reine Textwüste kaum zu überfliegen: dass ein
   Gerät auf 100 MBit/s bremst, ist die wichtigste Aussage darin und ging
   zwischen gleich aussehenden Zellen unter. Farbe trägt hier die Bedeutung —
   aber nie allein: das Label steht immer dabei, damit es auch ohne
   Farbwahrnehmung und im Ausdruck lesbar bleibt. */
.badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.76rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.02em;
  padding: 0.15em 0.55em;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.badge-good {
  background: var(--ok-bg);
  border-color: color-mix(in srgb, var(--ok) 40%, transparent);
  color: var(--ok);
}
.badge-warn {
  background: var(--warn-bg);
  border-color: color-mix(in srgb, var(--warn) 40%, transparent);
  color: var(--warn);
}
.badge-bad {
  background: var(--danger-bg);
  border-color: color-mix(in srgb, var(--danger) 40%, transparent);
  color: var(--danger);
}
.badge-neutral {
  background: var(--bg-sunken);
  border-color: var(--line-strong);
  color: var(--muted);
}

/* Modellname und Statusbadge stehen untereinander in einer Zelle. */
.prose td:first-child { line-height: 1.4; }
.prose td:first-child .badge { margin-top: 0.35em; }

/* Zeilen abgeratener Modelle zurücknehmen, damit die Empfehlungen tragen. */
.prose tbody tr:has(.badge-bad) td { opacity: 0.72; }

/* ---------- Sprachumschalter ---------- */
/* Kein Fließtext-Label mehr ("In English") — ein Globus plus die beiden
   Sprachcodes. Bewusst KEINE Flaggen: Englisch gehört keinem Land, und
   Studierende hier kommen aus aller Welt. Beide Sprachen stehen immer
   sichtbar da statt eines Umschalters, damit man sieht, was es überhaupt
   gibt, und der Zielzustand nicht erraten werden muss. */
.langswitch {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.15rem 0.15rem 0.15rem 0.45rem;
  background: var(--bg-raise);
}
.langswitch-icon {
  width: 1rem;
  height: 1rem;
  color: var(--muted);
  margin-right: 0.15rem;
  flex: 0 0 auto;
}
.langswitch a {
  font-family: var(--mono);
  font-size: 0.76rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--muted);
  padding: 0.32rem 0.45rem;
  border-radius: 999px;
}
.langswitch a:hover { color: var(--text); background: var(--bg-sunken); }
.langswitch a[aria-current] {
  background: var(--accent);
  color: var(--on-accent);
}
/* abbr bringt von Haus aus eine gepunktete Unterstreichung mit. */
.langswitch abbr { text-decoration: none; border: 0; cursor: inherit; }

/* ---------- Impressum: Anschrift und Pflichtangaben ---------- */
/* Anschrift und Telefonnummern standen als gewoehnlicher Absatz im Markdown.
   Einfache Zeilenumbrueche fasst markdown-it zu einer Zeile zusammen, also
   lief die komplette Adresse als Fliesstext durch — "StudNet Bonn des
   Studierendenwerks Bonn AoeR Nassestrasse 11 53113 Bonn". Anschrift ist
   jetzt ein <address>, die Pflichtangaben eine Definitionsliste. */
.vcard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.2rem 2.5rem;
  margin: 0 0 2rem;
  padding: 1.2rem 1.4rem;
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
/* <address> ist von Haus aus kursiv — als Anschrift gelesen wirkt das wie
   eine Hervorhebung, die keine ist. */
address { font-style: normal; line-height: 1.6; }
.vcard address strong { display: block; font-weight: 700; }
.vcard dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 1rem; }
.vcard dt { color: var(--muted); font-size: 0.92rem; }
.vcard dd { margin: 0; }
.vcard dd a { text-decoration: none; }
.vcard dd a:hover { text-decoration: underline; }

/* ---------- Router-Umschalter: gewaehlter Zustand ---------- */
/* Nach der Modellwahl blieb die komplette Liste aller zehn Modelle stehen.
   Wer aus der Empfehlungstabelle kommt, hat seine Wahl da schon getroffen und
   bekam sie hier sofort wieder vorgelegt. Ist ein Modell aktiv, schrumpft der
   Umschalter auf eine Zeile mit dem Namen und einem "aendern"-Knopf; ohne JS
   und ohne Wahl bleibt die volle Liste sichtbar. */
.router-switcher-current { display: none; align-items: baseline; flex-wrap: wrap; gap: 0.3rem 0.75rem; }
.router-switcher[data-router-chosen] .router-switcher-current { display: flex; }
.router-switcher[data-router-chosen] .router-switcher-list,
.router-switcher[data-router-chosen] .router-switcher-hint,
.router-switcher[data-router-chosen] > .callout-title { display: none; }
.router-switcher-current-label { color: var(--muted); font-size: 0.94rem; }
.router-switcher-current-name { font-weight: 700; }
.router-switcher-change {
  font: inherit; font-size: 0.9rem; font-weight: 500; cursor: pointer;
  margin-left: auto;
  background: transparent; color: var(--accent);
  border: 1px solid var(--line-strong); border-radius: var(--r-btn);
  padding: 0.3rem 0.8rem;
}
.router-switcher-change:hover { border-color: var(--accent); }

/* Die Modellliste bekam vorher ihre Abstaende nur ueber .router-switcher
   button; als eigenes Flex-Element ist sie jetzt auch ohne <ul> korrekt. */
.router-switcher-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* Zwischenueberschriften listen die Modelle auf, fuer die der Abschnitt gilt
   ("TP-Link, blaue Oberflaeche (AX12, AX10, AX53, AX73)"). Ohne getroffene
   Wahl steht alles untereinander und diese Liste ist die Orientierung. Ist
   ein Modell gewaehlt, steht ohnehin nur noch der passende Abschnitt da —
   dann ist die Aufzaehlung genau die Modellliste, die der Leser gerade
   loswerden wollte. */
.models-hint { font-weight: 400; color: var(--muted); }
[data-router-variants][data-router-active]:not([data-router-active=""]) .models-hint {
  display: none;
}

/* Auf schmalen Schirmen bricht der "anderes Modell"-Knopf in eine eigene
   Zeile; margin-left:auto schiebt ihn dann allein an den rechten Rand. */
@media (max-width: 520px) {
  .router-switcher-change { margin-left: 0; }
}

/* ---------- Sprungmarken innerhalb einer Seite ---------- */
/* Die Technikseite ist eine Sammlung unabhaengiger Nachschlage-Abschnitte,
   keine Lektuere von oben nach unten. Ohne Einstieg musste man scrollen,
   um zu sehen, was ueberhaupt drinsteht — die Ueberschriften waren nirgends
   verlinkt und die Seite selbst nur ueber die Fusszeile erreichbar. */
.page-toc {
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--bg-raise);
  padding: 1rem 1.2rem; margin: 1.8rem 0;
}
.page-toc-title {
  font-family: var(--mono); font-size: 0.72rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted);
  margin: 0 0 0.6rem;
}
.page-toc ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem;
}
.page-toc a { text-decoration: none; font-weight: 500; }
.page-toc a:hover { text-decoration: underline; }