:root{
    --bg:#14171c; --panel:#1c1f24; --border:#343a43;
    --text:#f5f5f5; --sub:#b4bac2; --faint:#8b929c; --accent:#6bb5ff;
    --mono:"SF Mono",ui-monospace,Menlo,Consolas,monospace;
    --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  }
  /* Helles Design — dieselben Werte wie auf der Startseite;
     die Wahl kommt aus localStorage und wird von theme.js gesetzt. */
  :root[data-theme="light"]{
    --bg:#efeeec; --panel:#f5f4f2; --border:#dddbd7;
    --text:#1b1a18; --sub:#4f4c47; --faint:#6b6761; --accent:#0b5ca2;
  }
  :root[data-theme="light"] .status.live{color:#085742;border-color:#08574255}
  :root[data-theme="light"] .status.pending{color:#803d0a;border-color:#803d0a55}
  *{margin:0;padding:0;box-sizing:border-box}
  body{background:var(--bg);color:var(--text);font-family:var(--sans);line-height:1.7}
  a{color:var(--accent);text-decoration:none}
  .wrap{max-width:760px;margin:0 auto;padding:0 24px}
  nav{display:flex;justify-content:space-between;align-items:center;padding:20px 0;
      border-bottom:1px solid var(--border)}
  .logo{font-family:var(--mono);font-size:15px;font-weight:600;letter-spacing:.04em}
  .logo b{color:var(--accent)}
  h1{font-size:32px;margin:48px 0 8px}
  .updated{font-family:var(--mono);font-size:12px;color:var(--faint);margin-bottom:36px}
  h2{font-size:20px;margin:32px 0 10px}
  p,li{color:var(--sub);font-size:15px}
  ul{padding-left:22px;margin:10px 0}
  .card{background:var(--panel);border:1px solid var(--border);border-radius:12px;
        padding:20px;margin:24px 0}
  .card p{color:var(--text);font-weight:600}
  footer{border-top:1px solid var(--border);margin-top:56px;padding:26px 0;
         display:flex;justify-content:space-between;font-size:13px;color:var(--faint)}
  footer a{color:var(--faint)}
  .rel{border-left:3px solid var(--accent);padding-left:16px;margin:26px 0}
  .rel.internal{border-left-color:var(--border)}
  .rel-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:2px}
  .rel-head h2{margin:0}
  .rel-date{font-family:var(--mono);font-size:12px;color:var(--faint)}
  .status{display:inline-block;font-family:var(--mono);font-size:12px;
          padding:2px 9px;border-radius:999px;border:1px solid var(--border);
          color:var(--sub)}
  .status.live{color:#8fd58a;border-color:#8fd58a55}
  .status.pending{color:#e0a03a;border-color:#e0a03a55}
  .status.internal{color:var(--faint)}
  /* Barrierefreiheit — Sprunglink zum Hauptinhalt (SC 2.4.1). */
  main{display:block}
  .skip{position:absolute;left:-9999px;top:0;z-index:10;background:var(--panel);
        color:var(--text);border:1px solid var(--border);border-radius:0 0 8px 0;
        padding:10px 18px;font-size:14px}
  .skip:focus{left:0}
  /* Tippziele mindestens 24px hoch (WCAG 2.2, SC 2.5.8) — über padding gelöst,
     nicht über height; die Navigationshöhe bleibt unverändert (10+10 statt 20). */
  nav{padding:10px 0}
  nav a{display:inline-block;padding:10px 4px}
  .updated a,footer a{display:inline-block;padding:6px 3px}
  footer{flex-wrap:wrap;gap:10px}
  /* Ohne ausdrückliche Wahl entscheidet die Systemeinstellung — den Umschalter
     gibt es nur auf der Startseite. Eine Wahl über theme.js gewinnt weiterhin,
     darum :not([data-theme="dark"]). Werte 1:1 aus [data-theme="light"]. */
  @media (prefers-color-scheme: light){
    :root:not([data-theme="dark"]){
      --bg:#efeeec; --panel:#f5f4f2; --border:#dddbd7;
      --text:#1b1a18; --sub:#4f4c47; --faint:#6b6761; --accent:#0b5ca2;
    }
    :root:not([data-theme="dark"]) .status.live{color:#085742;border-color:#08574255}
    :root:not([data-theme="dark"]) .status.pending{color:#803d0a;border-color:#803d0a55}
  }

/* Lange Adressen in <code> sprengten auf schmalen Geraeten die Zeile:
   gemessen am 08.09.2026 lief de/guide-claude-limits.html bei 375 px
   quer, Ursache war eine 370 px breite URL. Umbrechen statt ueberlaufen. */
code{overflow-wrap:anywhere;word-break:break-word}

/* Lange Woerter in Ueberschriften duerfen brechen. «Datenschutzerklärung»
   war bei 320 px 333 px breit und liess de/privacy.html quer laufen
   (gemessen 08.09.2026). Betrifft vor allem die deutsche Fassung. */
h1,h2,h3{overflow-wrap:break-word}
/* Tabellen scrollen in ihrer Huelle, statt die Seite zu verbreitern. */
.tabellenhuelle{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}

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