/* --------------------------------------------------------------------------- Gemeinsames Stilblatt. Eine Datei fuer alle Seiten — statt in jeder Seite dieselben Farben noch einmal zu schreiben. Ausgeliefert wird sie normal ueber /css/stil.css und braucht deshalb keinen Nonce; nur eingebettete Stilbloecke brauchen einen. ------------------------------------------------------------------------ */ :root{ --petrol:#0E6E78; --petrol-d:#0A4E56; --petrol-l:#14899A; --amber:#F2A33C; --amber-d:#C9821F; --bg:#F7F9FA; --surface:#FFFFFF; --line:#DDE4E7; --text:#12211F; --muted:#5C6F73; /* Zustandsfarben: alle mindestens 3:1 gegen den Untergrund — sie tragen Bedeutung, und dafuer verlangt WCAG 1.4.11 denselben Kontrast wie fuer Bedienelemente. Die alten Werte lagen bei 2.2 bzw. 2.5. */ --on:#1F8A4A; --away:#B87A0B; --off:#6E7C80; --warn:#C6413B; /* Der Rand eines Eingabefeldes ist das, was es als Feld erkennbar macht. `--line` mit 1.29:1 reicht dafuer nicht; `--rand-feld` hat 3.47:1. Fuer rein schmueckende Trennlinien bleibt `--line` richtig. */ --rand-feld:#7F8C90; --r:10px; --rb:14px; } /* Dunkel: entweder nach Systemeinstellung oder von Hand gewählt. `html.hell` schlägt die Systemeinstellung bewusst nieder — wer ausdrücklich hell gewählt hat, will nicht abends überrascht werden. */ @media (prefers-color-scheme: dark){ :root:not(.hell){ --bg:#111A1C; --surface:#182427; --line:#26353A; --text:#E8EEF0; --muted:#93A5AA; --rand-feld:#63787E; } } :root.dunkel{ --bg:#111A1C; --surface:#182427; --line:#26353A; --text:#E8EEF0; --muted:#93A5AA; --rand-feld:#63787E; } :root.dunkel .chip{background:rgba(20,137,154,.2); color:#7FD3DE} :root.dunkel .cbtn:hover{background:rgba(255,255,255,.08)} *{box-sizing:border-box} html,body{margin:0; padding:0} body{ font:15px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; background:var(--bg); color:var(--text); min-height:100vh; } /* --------------------------------------------------------------------------- Barrierefreiheit — Grundlagen, die auf jeder Seite gelten. ------------------------------------------------------------------------ */ /* Nur fuer die Sprachausgabe. Nicht `display:none` und nicht `visibility:hidden` — beides nimmt den Text auch der Sprachausgabe weg. Der Ausschnitt auf ein Pixel ist der Weg, der ueberall funktioniert. */ .nurlesen{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; } /* „Zum Inhalt springen“ — sichtbar erst, wenn er den Tastaturfokus hat. Ohne ihn muss man auf jeder Seite die ganze Kopfleiste durchtabben. */ .spring{ position:absolute; left:8px; top:-60px; z-index:100; background:var(--surface); color:var(--text); border:2px solid var(--petrol); border-radius:var(--r); padding:10px 16px; font-weight:600; text-decoration:none; transition:top .12s; } .spring:focus{top:8px} /* Das Sprungziel braucht `tabindex="-1"`, sonst wandert nur die Bildlaufleiste und der Tastaturfokus bleibt oben stehen — der Sprunglink haette dann optisch funktioniert und in der Sache nichts bewirkt. Einen Fokusrahmen bekommt der Inhaltsbereich dabei nicht: Er ist kein Bedienelement, er ist nur das Ziel. */ main#inhalt:focus{outline:none} /* Sichtbarer Fokus fuer alles, was man mit der Tastatur erreichen kann. Der Standardrahmen des Browsers verschwindet auf farbigen Flaechen fast — deshalb doppelt: eigener Rahmen plus heller Ring darum, damit er sowohl auf Petrol als auch auf Papierweiss steht. */ :where(a,button,summary,[tabindex],input,select,textarea):focus-visible{ outline:3px solid var(--petrol-l); outline-offset:2px; box-shadow:0 0 0 5px rgba(255,255,255,.85); border-radius:6px; } :root.dunkel :where(a,button,summary,[tabindex],input,select,textarea):focus-visible{ box-shadow:0 0 0 5px rgba(0,0,0,.7); } /* Innerhalb der Kopfleiste sitzt der Ring auf Petrol — dort ist Weiss der bessere Kontrastgeber, umgekehrt zum Rest der Seite. */ .kopf :where(a,button):focus-visible{ outline:3px solid #fff; outline-offset:2px; box-shadow:none; } /* Wer im Betriebssystem weniger Bewegung eingestellt hat, bekommt keine. */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } } /* ---------------- Kopfleiste ---------------- */ .kopf{ background:var(--petrol); color:#fff; padding:0 18px; display:flex; gap:6px; align-items:center; min-height:52px; flex-wrap:wrap; } .kopf .wortmarke{ font-size:17px; font-weight:800; margin-right:14px; display:flex; align-items:center; gap:8px; color:#fff; text-decoration:none; letter-spacing:-.3px; } .kopf .wortmarke:hover{background:transparent} .kopf .wortmarke svg{display:block; flex:none} .kopf .ico{ width:34px; height:34px; border:0; background:transparent; color:#fff; border-radius:8px; cursor:pointer; font-size:15px; display:grid; place-items:center; font-family:inherit; padding:0; } .kopf .ico:hover{background:rgba(255,255,255,.16)} .kopf a{ color:#fff; text-decoration:none; padding:8px 12px; border-radius:8px; font-size:14px; white-space:nowrap; } .kopf a:hover{background:rgba(255,255,255,.14)} .kopf a.aktiv{background:rgba(255,255,255,.22); font-weight:600} /* Die Seitenverweise sitzen seit der Barrierefreiheits-Durchsicht in einem