
/* Hell ist die Vorgabe; ohne eigene Wahl entscheidet das System. Wer auf
   aicockpit.info umschaltet, bekommt seine Wahl auch hier (theme.js).
   --t3 nachgedunkelt/aufgehellt: der alte Wert kam auf der Karte nur auf
   3.84:1 (hell) bzw. 4.19:1 (dunkel) und liegt bei 14px unter 4.5:1. */
:root{--bg:#F6EEDF;--karte:#ECE1CA;--rand:#CDBD9D;--t1:#29211A;--t2:#4D4033;--t3:#6B6051;--akzent:#0D4C9E}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#1C1F24;--karte:#252A31;--rand:#343A43;--t1:#F5F5F5;--t2:#B4BAC2;--t3:#939BA6;--akzent:#6BB5FF}}
:root[data-theme="dark"]{--bg:#1C1F24;--karte:#252A31;--rand:#343A43;--t1:#F5F5F5;--t2:#B4BAC2;--t3:#939BA6;--akzent:#6BB5FF}
*{box-sizing:border-box}
body{margin:0;padding:40px 20px 80px;background:var(--bg);color:var(--t1);
     font:16px/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif}
main{max-width:760px;margin:0 auto}
h1{font-size:30px;font-weight:600;margin:0 0 6px}
.unter{color:var(--t3);font-size:14px;margin:0 0 36px}
h2{font-size:20px;font-weight:600;margin:36px 0 12px;padding-bottom:6px;border-bottom:1px solid var(--rand)}
p,li{color:var(--t2)}
p{margin:0 0 14px}
ul{margin:0 0 14px;padding-left:22px}
li{margin:0 0 6px}
table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:14px}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--rand);color:var(--t2);vertical-align:top}
th{color:var(--t1);font-weight:600}
code{font:13px ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--karte);padding:1px 6px;border-radius:4px}
.kasten{background:var(--karte);border:1px solid var(--rand);border-radius:10px;padding:14px 16px;margin:0 0 18px;border-left:3px solid var(--akzent)}
a{color:var(--akzent)}
.sprache{font-size:14px;margin:0 0 28px}
/* Barrierefreiheit — Sprunglink zum Hauptinhalt; Tippziele der Sprach- und
   Querverweise auf mindestens 24px Höhe gebracht (WCAG 2.2, SC 2.5.8). */
.skip{position:absolute;left:-9999px;top:0;z-index:10;background:var(--karte);
      color:var(--t1);border:1px solid var(--rand);border-radius:0 0 8px 0;
      padding:10px 18px;font-size:14px}
.skip:focus{left:0}
.sprache a{display:inline-block;padding:6px 3px}


/* Aus style="..."-Attributen ausgelagert (CSP: style-src ohne 'unsafe-inline').
   Doppelte Klasse haelt den Vorrang, den das Attribut vorher hatte. */
.x1.x1{margin:0}

/* 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}
