/* Container-Wissen — gemeinsame Gestaltung aller Seiten unter /ratgeber/.
 *
 * WARUM EINE DATEI: Vorher trug jede der zehn Seiten ihre eigene Kopie dieser Regeln.
 * Sie mussten auseinanderlaufen, und sie taten es: eigener Grundton (#070a0f statt
 * #0E1116), eigener Akzent (#2f9bff statt #2E8FFF), ein Türkis, das es im Produkt gar
 * nicht mehr gibt, Inter statt Archivo, Schriftgewicht 800 und Radien 10/14. Nah genug,
 * um für dieselbe Marke gehalten zu werden — daneben genug, um fremd zu wirken.
 *
 * Die Werte hier sind die des Rechners und der Startseite. Wer sie ändert, ändert sie
 * für alle Seiten auf einmal. Genau dafür ist die Datei da.
 *
 * Es gilt dasselbe Regelwerk wie im Rechner (siehe CLAUDE.md):
 *   Radien 8 klein · 12 Karte · 16 Dialog · 999 Pille
 *   Gewichte bis 700, nicht darüber
 *   Monospace nur an Zahlen und Marken-Kleintext
 *   KEINE Farbverläufe — ein Markenton
 */

:root{
  --bg:#0E1116;
  --card:#161D27;
  --deep:#121821;
  --line:#1C2531;
  --line-2:#232C38;
  --line-3:#2E3A49;
  --text:#E9F0F7;
  --dim:#9DB0C2;
  --faint:#7689A0;
  --accent:#2E8FFF;
  --on-accent:#04121A;
  --good:#2FD8A0;
  --warn:#F5A524;
  --sans:'Archivo',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',monospace;
  --r-s:8px; --r-m:12px; --r-l:16px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--sans);font-size:15px;line-height:1.65;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.mono{font-family:var(--mono)}
.wrap{max-width:820px;margin:0 auto;padding:0 20px}

/* ── Kopfzeile ─────────────────────────────────────────── */
header.nav{
  position:sticky;top:0;z-index:20;
  background:rgba(14,17,22,.82);border-bottom:1px solid var(--line);
  backdrop-filter:blur(14px);
}
.nav-in{max-width:1080px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:12px}
/* Das Markenzeichen ist dasselbe wie auf der Startseite: isometrischer Wuerfel auf
   Akzentgrund, daneben der Schriftzug mit "Load" im Markenton. Der Abstand gehoert
   zwischen Zeichen und Schriftzug — deshalb ist der Schriftzug EIN Element. Stuenden
   "Container" und der Load-Span einzeln in diesem Flex-Kasten, zoege das gap sie
   auseinander, und aus ContainerLoad wuerde sichtbar "Container Load". */
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--text)}
.brand:hover{text-decoration:none}
.brand-name{font-weight:700;font-size:16px;letter-spacing:-.01em}
.brand-load{color:var(--accent)}
.mark{
  width:32px;height:32px;border-radius:var(--r-s);background:var(--accent);
  display:flex;align-items:center;justify-content:center;flex:none;
}

/* ── Sprachwahl ────────────────────────────────────────── */
/* Der Umschalter zeigt auf die ÜBERSETZUNG DIESER SEITE, nicht auf die Startseite:
   wer die Frage auf Deutsch liest, will sie auf Englisch lesen und nicht von vorn
   anfangen. Aktiv wird über die Fläche markiert, nicht über einen Rahmen — dieselbe
   Regel wie beim Umschalter im Rechner. */
.lang{display:inline-flex;gap:2px;margin-left:auto;background:var(--deep);border-radius:var(--r-s);padding:3px}
.lang a{
  font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.04em;
  padding:5px 9px;border-radius:var(--r-s);color:var(--faint);line-height:1;
}
.lang a:hover{color:var(--text);text-decoration:none}
.lang a.on{background:var(--card);color:var(--text)}

/* ── Schaltflächen ─────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  font-weight:700;font-size:14px;border-radius:var(--r-s);
  padding:.7rem 1.1rem;white-space:nowrap;cursor:pointer;transition:.18s;
}
.btn-primary{background:var(--accent);color:var(--on-accent);border:1px solid var(--accent)}
.btn-primary:hover{filter:brightness(1.08);text-decoration:none}
.btn-ghost{background:transparent;border:1px solid var(--line-2);color:var(--text)}
.btn-ghost:hover{border-color:var(--line-3);text-decoration:none}

/* Mit der Sprachwahl steht in der Kopfzeile eine Gruppe mehr, und auf 390 px passt die
   Schaltfläche daneben nicht mehr: gemessen 431 px Inhalt bei 390 px Fenster — die Seite
   ließ sich seitlich schieben (test/mobil.test.mjs kennt genau dieses Problem).
   Deshalb bricht die Kopfzeile dort um: Marke und Sprache in die erste Zeile, die
   Schaltfläche über die volle Breite in die zweite. Nebeneffekt: sie ist mit dem Daumen
   deutlich besser zu treffen. */
@media(max-width:560px){
  .nav-in{gap:8px;padding:12px 16px;flex-wrap:wrap}
  .nav-in>.btn{flex:1 1 100%;justify-content:center;padding:.6rem 1rem;font-size:13px}
  .brand-name{font-size:15px}
  .lang a{padding:5px 8px}
}

/* ── Fließtext ─────────────────────────────────────────── */
main{position:relative;z-index:1;padding:46px 0 40px}
.eyebrow{
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:12px;
}
h1{
  font-size:clamp(27px,4.4vw,38px);font-weight:700;
  letter-spacing:-.02em;line-height:1.14;margin:0 0 18px;text-wrap:balance;
}
h2{font-size:20px;font-weight:700;margin:36px 0 10px;letter-spacing:-.008em}
p{color:var(--dim);margin:0 0 14px;max-width:68ch}
p:last-child{margin-bottom:0}
b{color:var(--text);font-weight:700}
.lead{font-size:17.5px;color:var(--text);line-height:1.6}

/* Die Antwort steht oben und ist der Grund, warum jemand die Seite geöffnet hat.
   Ein Rahmen bedeutet im Regelwerk „Ergebnis" — hier ist er genau das. */
.answer{
  background:var(--card);border:1px solid var(--line-2);border-left:2px solid var(--accent);
  border-radius:var(--r-m);padding:18px 20px;margin:20px 0;
}
.answer .lead{margin:0}

.formula{
  font-family:var(--mono);font-size:13.5px;color:var(--text);
  background:var(--deep);border:1px solid var(--line-2);border-radius:var(--r-s);
  padding:14px 16px;margin:14px 0;overflow-x:auto;
}

.cta{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 8px}

/* ── Tabellen: Zahlen stehen untereinander ─────────────── */
/* Die Zahlenspalten stehen mit white-space:nowrap — richtig so, eine Zahl darf nicht
   umbrechen. Auf einem 390 px schmalen Telefon wurde die Tabelle dadurch aber 395 px
   breit und schob die GANZE SEITE seitlich hinaus. Sie scrollt jetzt in ihrem eigenen
   Kasten; der Text daneben bleibt, wo er ist. */
.tabelle{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:10px 0 6px}
table{width:100%;border-collapse:collapse;margin:0;font-size:14px}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line)}
th{
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint);
}
tbody tr:last-child td{border-bottom:0}
td.num{
  font-family:var(--mono);font-size:12.5px;text-align:right;
  font-variant-numeric:tabular-nums;color:var(--dim);white-space:nowrap;
}

.note{
  font-size:12.5px;color:var(--faint);line-height:1.6;
  border-top:1px solid var(--line);margin-top:32px;padding-top:16px;
}

/* ── Verwandte Fragen ──────────────────────────────────── */
.related{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 0}
.related a{
  font-size:13px;background:var(--card);border:1px solid var(--line-2);
  border-radius:var(--r-s);padding:8px 12px;color:#bcd9ff;
}
.related a:hover{border-color:var(--line-3);text-decoration:none}
.related b{color:var(--text)}

footer{border-top:1px solid var(--line);margin-top:40px;padding:26px 0;color:var(--faint);font-size:13px}
footer .wrap{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;justify-content:space-between}
footer a{color:var(--dim)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}