/* Gesetzes-Zeitmaschine — erzeugt, nicht von Hand bearbeiten. Quelle: frontend/app.html (Grundgestaltung) + frontend/static/statisch.css (Ergänzungen) */ /* Selbst ausgelieferte Schriften — SIL Open Font License. Bewusst NICHT von fonts.googleapis.com geladen: das würde die IP-Adresse jedes Besuchers ohne Einwilligung an Google in den USA übermitteln (vgl. LG München I, Urteil v. 20.01.2022, 3 O 17493/20). Lizenztexte liegen neben den Schriftdateien. */ @font-face { font-family: 'Plex Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('../schriften/ibmplexserif-regular.woff') format('woff'); } @font-face { font-family: 'Plex Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url('../schriften/ibmplexserif-italic.woff') format('woff'); } @font-face { font-family: 'Plex Serif'; font-style: normal; font-weight: 700; font-display: swap; src: url('../schriften/ibmplexserif-bold.woff') format('woff'); } @font-face { font-family: 'Work Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../schriften/worksans-regular.woff') format('woff'); } @font-face { font-family: 'Work Sans'; font-style: italic; font-weight: 400; font-display: swap; src: url('../schriften/worksans-italic.woff') format('woff'); } @font-face { font-family: 'Work Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('../schriften/worksans-bold.woff') format('woff'); } @font-face { font-family: 'Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../schriften/ibmplexmono-regular.woff') format('woff'); } @font-face { font-family: 'Plex Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('../schriften/ibmplexmono-bold.woff') format('woff'); } /* =========================================================================== Gesetzes-Zeitmaschine — Gestaltung --------------------------------------------------------------------------- Aufgebaut nach dem Grundsatz "mobile first": die Grundregeln gelten für das schmale Fenster, größere Schirme bekommen über min-width-Abfragen zusätzliche Spalten. Umgekehrt herum entstehen sonst Regeln, die man auf dem Handy wieder zurücknehmen muss. =========================================================================== */ /* --------------------------- Farben und Schrift --------------------------- */ :root { --paper:#f1f2f4; --surface:#ffffff; --surface-2:#e9ebee; --surface-3:#dde0e5; /* --ink-3 trägt die Kleinlabels und die untere Navigation. Der Wert ist so gewählt, dass er auch auf den grauen Flächen (Tabellenköpfe, Gliederungszeilen) über dem Mindestkontrast 4,5:1 bleibt. */ --ink:#171a1f; --ink-2:#545b66; --ink-3:#616974; --line:#d7dade; --line-2:#bcc2c9; --accent:#8b2f38; --accent-2:#a94450; --accent-bg:#f4e8e9; /* Textfarbe auf dem Akzent. Im dunklen Modus ist der Akzent hell, dort wäre Weiß mit 2,7:1 unlesbar — deshalb ein eigenes Token. */ --auf-akzent:#ffffff; --add-fg:#1f5a3f; --add-bg:#d5ecdd; --add-line:#6cae8d; --del-fg:#8b2f22; --del-bg:#f7dfda; --del-line:#cd9086; --schatten:0 1px 2px rgba(20,24,30,.06), 0 8px 24px rgba(20,24,30,.06); /* Selbst ausgelieferte Schriften — kein Abruf bei Google, damit keine Besucher-IP an Dritte geht. Fallbacks bleiben Systemschriften. */ --f-display:"Plex Serif","Iowan Old Style",Georgia,"Times New Roman",serif; --f-body:"Work Sans","Segoe UI",system-ui,-apple-system,sans-serif; --f-mono:"Plex Mono",ui-monospace,"SF Mono",Menlo,monospace; --r:4px; --tap:44px; /* --tap: kleinstes Tippziel */ color-scheme: light dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper:#111317; --surface:#191c21; --surface-2:#22262c; --surface-3:#2c313a; --ink:#e8eaee; --ink-2:#9ca4af; --ink-3:#868e99; --line:#2a2f36; --line-2:#3a4049; --accent:#d9878f; --accent-2:#e6a5ab; --accent-bg:#2d1e21; --auf-akzent:#111317; --add-fg:#7dc9a4; --add-bg:#162c22; --add-line:#2e6a4e; --del-fg:#e59a91; --del-bg:#331d1a; --del-line:#7d3d34; --schatten:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3); } } :root[data-theme="dark"] { --paper:#111317; --surface:#191c21; --surface-2:#22262c; --surface-3:#2c313a; --ink:#e8eaee; --ink-2:#9ca4af; --ink-3:#868e99; --line:#2a2f36; --line-2:#3a4049; --accent:#d9878f; --accent-2:#e6a5ab; --accent-bg:#2d1e21; --auf-akzent:#111317; --add-fg:#7dc9a4; --add-bg:#162c22; --add-line:#2e6a4e; --del-fg:#e59a91; --del-bg:#331d1a; --del-line:#7d3d34; --schatten:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3); } *,*::before,*::after { box-sizing:border-box; } body { background:var(--paper); color:var(--ink); font-family:var(--f-body); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-wrap:break-word; } h1,h2,h3 { font-family:var(--f-display); margin:0; line-height:1.22; text-wrap:balance; } h1 { font-size:1.6rem; font-weight:700; letter-spacing:-.012em; } h2 { font-size:1.25rem; font-weight:600; } h3 { font-size:1.05rem; font-weight:600; } p { margin:0; } /* Grundabstände für den Lesefluss. Absätze und Überschriften haben oben absichtlich keinen eigenen Abstand, weil viele Stellen ihren eigenen Rhythmus setzen. Wo das nicht geschieht, klebte bisher alles aneinander. Die drei Regeln geben deshalb einen Grundabstand: Luft nach einer Überschrift, mehr Luft vor einer, und Luft zwischen aufeinanderfolgenden Absätzen. Sie stehen bewusst NACH "p { margin:0 }": bei gleicher Gewichtung gewinnt in CSS die spätere Regel. Ihre Gewichtung ist die geringstmögliche, jede Klassenregel sticht sie also weiterhin aus — bestehende Abstände bleiben, wie sie waren. */ :is(h1,h2,h3) + * { margin-block-start:.9rem; } * + :is(h2,h3) { margin-block-start:2.1rem; } p + p { margin-block-start:.8rem; } /* Abstand zwischen den großen Blöcken einer Seite. Eine Überschrift, die als erstes Kind in einem Abschnitt steht, hat keinen Vorgänger — die Regel eine Zeile darüber greift dort also nicht, und die Abschnitte klebten aneinander. Diese Regel trennt stattdessen die Blöcke selbst. */ main > * + * { margin-block-start:2.6rem; } /* Die Regeln oben gelten für einfache Elemente. Listen, Raster und Zahlenreihen setzen ihren Abstand aber selbst auf null — eine Klassenregel sticht eine Elementregel immer aus, egal in welcher Reihenfolge sie steht. Für genau diese Paarungen steht der Abstand deshalb hier noch einmal, mit einer Klasse im Selektor und damit stark genug. */ :is(h1,h2,h3) + ul.liste, :is(h1,h2,h3) + .raster, :is(h1,h2,h3) + dl.zahlenreihe, :is(h1,h2,h3) + ul.small, p + ul.liste, p + .raster, p + dl.zahlenreihe { margin-block-start:1.1rem; } /* Karten in der Seitenspalte standen Kante an Kante. */ .side > * + * { margin-block-start:.9rem; } ul.liste + * { margin-block-start:1.1rem; } /* Blättern zur vorherigen und nächsten Vorschrift. Links und rechts außen, damit die Richtung ohne Lesen erkennbar ist; auf schmalen Geräten untereinander, weil zwei Knöpfe nebeneinander dort zu eng würden. */ /* Ein Satz, der die Kernfrage der Seite beantwortet. Steht bewusst weit oben und ohne Kasten: Er soll gelesen und zitiert werden, nicht als Hinweisbox überblättert. */ .kurzantwort { margin-block-start:.9rem; max-width:62ch; color:var(--ink); border-inline-start:2px solid var(--accent); padding-inline-start:.8rem; font-size:.96rem; } /* Häufige Fragen auf der Startseite. */ .fragen { display:grid; gap:1.3rem; margin-block-start:1.1rem; max-width:62ch; } .frage h3 { margin:0 0 .35rem; } .frage p { margin:0; } /* Nur auf Papier sichtbar — auf dem Bildschirm ausgeblendet. */ .nur-druck { display: none; } /* Querverweise im Normtext. Zurückhaltend gestaltet: In manchen Vorschriften stehen fünf Verweise in einem Satz: kräftige Links machten den Text unlesbar. Erkennbar bleiben sie durch Farbe UND gepunktete Unterstreichung — Farbe allein reicht nicht. */ a.verweis { color:var(--accent); text-decoration:underline dotted; text-underline-offset:3px; text-decoration-thickness:1px; } a.verweis:hover, a.verweis:focus-visible { text-decoration-style:solid; } /* Zitierformen in der Seitenspalte. Zugeklappt, weil die meisten nur die Kurzform brauchen — wer belegen muss, klappt auf und findet Fußnote, BibTeX und RIS. */ .zitierformen { margin-block-start:.7rem; } .zitierformen > summary { cursor:pointer; font-size:.85rem; color:var(--accent); list-style:none; padding-block:.3rem; } .zitierformen > summary::-webkit-details-marker { display:none; } .zitierformen > summary::before { content:"▸ "; font-size:.75rem; } .zitierformen[open] > summary::before { content:"▾ "; } .zitierformen > summary:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:3px; } .zitierfeld { margin-block-start:.9rem; } .zitierfeld h3 { font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); font-family:var(--f-mono); font-weight:500; margin-block-end:.35rem; } .zitierfeld p, .zitierfeld pre { background:var(--surface-2); border-radius:var(--r); padding:.55rem .65rem; margin:0; font-size:.76rem; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; } .knopf.klein { font-size:.78rem; padding:.3rem .6rem; margin-block-start:.4rem; } /* Frühere Fassungen im Wortlaut. Zugeklappt, damit die Seite ruhig bleibt — im Quelltext stehen sie trotzdem vollständig, damit Suchmaschinen und Antwortmaschinen sie lesen können. */ .verlauf { margin-block-start:2.6rem; } .altfassung { border:1px solid var(--line); border-radius:var(--r); background:var(--surface); margin-block-start:.6rem; overflow:hidden; } .altfassung > summary { cursor:pointer; padding:.75rem .9rem; font-size:.93rem; display:flex; flex-wrap:wrap; gap:.5rem; align-items:baseline; list-style:none; } .altfassung > summary::-webkit-details-marker { display:none; } .altfassung > summary::before { content:"▸"; color:var(--accent); font-size:.8rem; flex:0 0 auto; } .altfassung[open] > summary::before { content:"▾"; } .altfassung > summary:hover { background:var(--surface-2); } .altfassung > summary:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; } .altfassung > .norm, .altfassung > p { padding-inline:.9rem; } .altfassung > .norm { padding-block-start:.4rem; } .altfassung > p:last-child { padding-block-end:.9rem; margin-block-start:.6rem; } .blaettern { display:flex; justify-content:space-between; gap:.6rem; flex-wrap:wrap; margin-block-start:2.6rem; } .blaettern a { flex:1 1 auto; } @media (min-width:640px){ .blaettern a { flex:0 0 auto; } } a { color:var(--accent); text-underline-offset:3px; } :focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:3px; } button { font:inherit; } @media (min-width:700px){ h1 { font-size:2.1rem; } h2 { font-size:1.5rem; } } .wrap { width:100%; padding-inline:1rem; margin-inline:auto; max-width:1140px; } @media (min-width:700px){ .wrap { padding-inline:1.5rem; } } .lesbar { max-width:70ch; } .label { font-family:var(--f-mono); font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); } .muted { color:var(--ink-2); } .small { font-size:.85rem; } .mono { font-family:var(--f-mono); font-variant-numeric:tabular-nums; } .stack { display:grid; gap:1rem; } .reihe { display:flex; flex-wrap:wrap; gap:.5rem; } /* ------------------------------ Kopfleiste ------------------------------ */ .topbar { position:sticky; top:0; z-index:60; background:var(--surface); border-block-end:1px solid var(--line); } .topbar-in { display:flex; align-items:center; gap:.7rem; min-height:56px; } .brand { display:flex; align-items:center; gap:.55rem; text-decoration:none; color:var(--ink); flex:1 1 auto; min-width:0; } .brand .mark { width:30px; height:30px; flex:0 0 auto; border-radius:var(--r); background:var(--accent); color:var(--auf-akzent); display:grid; place-items:center; font-family:var(--f-display); font-weight:700; font-size:1.05rem; } .brand b { font-family:var(--f-display); font-size:1rem; font-weight:600; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .brand i { font-style:normal; font-size:.68rem; color:var(--ink-3); display:block; line-height:1.1; } .ikon { width:var(--tap); height:var(--tap); flex:0 0 auto; display:grid; place-items:center; background:none; border:none; color:var(--ink-2); cursor:pointer; border-radius:var(--r); font-size:1.15rem; } .ikon:hover { background:var(--surface-2); color:var(--accent); } /* Der Suchknopf ist auf schmalen Geräten der einzige Hinweis auf die Suche. Deshalb bekommt er einen Rahmen und eine deutlich größere Lupe. */ .ikon.suche-auf { color:var(--ink); border:1px solid var(--line-2); background:var(--surface); } .ikon.suche-auf::before { width:1.45rem; height:1.45rem; } .topnav { display:none; } /* Grundzustand für schmale Geräte. Diese Zeile muss VOR der Abfrage unten stehen: bei gleicher Gewichtung gewinnt in CSS die spätere Regel, und stand sie danach, blieb das Suchfeld auch auf breiten Bildschirmen verborgen — dort gab es dann gar keine sichtbare Suche mehr. */ .kopfsuche { display:none; } @media (min-width:900px){ .topnav { display:flex; gap:1.3rem; flex:0 0 auto; } .topnav a { font-size:.88rem; color:var(--ink-2); text-decoration:none; white-space:nowrap; } .topnav a:hover { color:var(--accent); } /* Wo bin ich gerade? Der aktive Punkt bekommt Farbe, Fettung und einen Balken darunter — Farbe allein reicht nicht: Sie ist für einen Teil der Menschen nicht unterscheidbar und geht im Ausdruck verloren. Die ausgelieferte Website markiert den Punkt mit aria-current, die Einzeldatei-Fassung mit der Klasse "on" — beide werden hier bedient. */ .topnav a.on, .topnav a[aria-current="page"] { color:var(--accent); font-weight:600; position:relative; } .topnav a.on::after, .topnav a[aria-current="page"]::after { content:""; position:absolute; inset-inline:0; bottom:-.55rem; height:2px; background:var(--accent); border-radius:2px; } .brand { flex:0 0 auto; } .topbar-in { gap:1.4rem; } .ikon.suche-auf { display:none; } /* Reihenfolge im Kopf: Name links, Navigation daneben, Suche ganz rechts. "order" ordnet nur die Darstellung um — im Quelltext bleibt die Suche vor der Navigation, was für Vorleseprogramme und die Tabulatortaste die sinnvollere Reihenfolge ist. "margin-inline-start:auto" schiebt alles ab der Navigation an den rechten Rand. */ .topnav { order:2; margin-inline-start:auto; } .kopfsuche { display:block; order:3; position:relative; flex:0 1 300px; max-width:300px; } } .kopfsuche input { width:100%; font:inherit; font-size:.92rem; height:40px; padding:0 .9rem 0 2.7rem; background:var(--paper); color:var(--ink); border:1px solid var(--line-2); border-radius:var(--r); } /* Die Lupe ist eine echte Zeichnung im Text, kein Schriftzeichen und keine Maske: Schriftzeichen wie ⌕ fallen je nach Schrift hauchdünn aus, und Masken werden nicht von jedem Browser gleich unterstützt. Ein im Inhalt zeigt jeder Browser, und über currentColor nimmt es die Textfarbe an — also auch im dunklen Erscheinungsbild die richtige. */ .lupe { width:1.15rem; height:1.15rem; flex:0 0 auto; display:block; } .kopfsuche .lupe { position:absolute; left:.85rem; top:50%; transform:translateY(-50%); color:var(--ink-2); pointer-events:none; } .ikon.suche-auf .lupe { width:1.45rem; height:1.45rem; } /* --------------------- Suche als Vollbild auf dem Handy --------------------- */ .suchflaeche { position:fixed; inset:0; z-index:100; background:var(--paper); display:none; flex-direction:column; } .suchflaeche.auf { display:flex; } .suchkopf { display:flex; gap:.5rem; align-items:center; padding:.6rem 1rem; background:var(--surface); border-block-end:1px solid var(--line); } .suchkopf input { flex:1 1 auto; font:inherit; font-size:1rem; height:var(--tap); padding:0 .9rem; background:var(--paper); color:var(--ink); border:1px solid var(--line-2); border-radius:var(--r); } .suchtreffer { flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch; } .treffer { display:block; padding:.8rem 1rem; text-decoration:none; color:var(--ink); border-block-end:1px solid var(--line); background:var(--surface); } .treffer:active,.treffer:hover { background:var(--surface-2); } .treffer .k { font-family:var(--f-mono); font-size:.78rem; color:var(--accent); } .treffer .t { font-size:.94rem; } .treffer .x { font-size:.78rem; color:var(--ink-3); } .trefferkopf { padding:.5rem 1rem; background:var(--surface-2); position:sticky; top:0; } /* ---------------------- Untere Navigation (nur Handy) ---------------------- */ .untennav { position:fixed; inset-inline:0; bottom:0; z-index:70; display:flex; background:var(--surface); border-block-start:1px solid var(--line); padding-block-end:env(safe-area-inset-bottom); } .untennav a { flex:1 1 0; display:grid; place-items:center; gap:.1rem; padding:.45rem .2rem .5rem; text-decoration:none; color:var(--ink-3); font-size:.66rem; min-height:var(--tap); } .untennav a .sym { font-size:1.15rem; line-height:1; } .untennav a.on, .untennav a[aria-current="page"] { color:var(--accent); font-weight:600; } /* Zusätzlich zur Farbe eine Markierung an der Oberkante, aus demselben Grund wie oben. */ .untennav a.on::before, .untennav a[aria-current="page"]::before { content:""; position:absolute; inset-block-start:0; inset-inline:22%; height:2px; background:var(--accent); border-radius:0 0 2px 2px; } .untennav a { position:relative; } @media (min-width:900px){ .untennav { display:none; } } body { padding-block-end:64px; } @media (min-width:900px){ body { padding-block-end:0; } } /* ------------------------------- Bausteine ------------------------------- */ .karte { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:1rem; } @media (min-width:700px){ .karte { padding:1.2rem 1.3rem; } } .raster { display:grid; gap:.9rem; } @media (min-width:640px){ .r2 { grid-template-columns:1fr 1fr; } } @media (min-width:640px){ .r3 { grid-template-columns:repeat(3,1fr); } } @media (min-width:900px){ .r4 { grid-template-columns:repeat(4,1fr); } } .r4 { grid-template-columns:1fr 1fr; } .knopf { display:inline-flex; align-items:center; justify-content:center; gap:.4rem; min-height:var(--tap); padding:.5rem 1rem; border-radius:var(--r); border:1px solid var(--line-2); background:var(--surface); color:var(--ink); cursor:pointer; text-decoration:none; font-size:.9rem; } .knopf:hover { border-color:var(--accent-2); color:var(--accent); } .knopf.voll { background:var(--accent); border-color:var(--accent); color:var(--auf-akzent); } .knopf.voll:hover { color:var(--auf-akzent); opacity:.92; } .knopf[disabled] { opacity:.4; cursor:not-allowed; } .knopf.breit { width:100%; } .marke { display:inline-block; font-family:var(--f-mono); font-size:.68rem; letter-spacing:.05em; padding:.2rem .5rem; border-radius:3px; background:var(--surface-2); color:var(--ink-2); white-space:nowrap; } .marke.acc { background:var(--accent-bg); color:var(--accent); } .marke.neu { background:var(--add-bg); color:var(--add-fg); } .marke.weg { background:var(--del-bg); color:var(--del-fg); } .hinweis { border-inline-start:3px solid var(--accent); background:var(--accent-bg); padding:.8rem .95rem; border-radius:0 var(--r) var(--r) 0; font-size:.9rem; } .krumen { font-size:.8rem; color:var(--ink-3); display:flex; flex-wrap:wrap; gap:.3rem; align-items:center; } .krumen a { color:var(--ink-2); text-decoration:none; } /* Segmentierte Umschaltung — auf dem Handy volle Breite, gleich große Felder */ .segment { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; padding:2px; background:var(--surface-2); border-radius:var(--r); border:1px solid var(--line); } .segment { max-width:460px; } /* auf breiten Schirmen nicht auseinanderziehen */ .segment button { min-height:40px; border:none; border-radius:3px; background:none; color:var(--ink-2); font-size:clamp(.76rem,3vw,.85rem); cursor:pointer; padding:.3rem .2rem; line-height:1.2; } .segment button[aria-pressed="true"] { background:var(--surface); color:var(--accent); font-weight:600; box-shadow:var(--schatten); } .segment button[disabled] { opacity:.35; cursor:not-allowed; } /* -------------------------------- Zeitregler -------------------------------- */ /* Der Regler ist die Hauptbedienung der Seite. Deshalb: groß, mit dickem Griff, Pfeiltasten links und rechts und dem Datum in Großschrift. */ .zeit { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:.9rem 1rem 1.1rem; } .zeitkopf { display:flex; align-items:center; justify-content:space-between; gap:.6rem; } .zeitdatum { font-family:var(--f-display); font-size:1.5rem; font-weight:700; line-height:1.1; font-variant-numeric:tabular-nums; } .zeitkontext { font-size:.8rem; color:var(--ink-2); margin-block-start:.15rem; } .zeitleiste { display:flex; align-items:center; gap:.5rem; margin-block-start:.9rem; } .zeitleiste .ikon { border:1px solid var(--line-2); background:var(--surface); } .zeitleiste .ikon[disabled] { opacity:.3; cursor:not-allowed; } input[type=range].regler { flex:1 1 auto; min-width:0; height:var(--tap); -webkit-appearance:none; appearance:none; background:none; cursor:grab; margin:0; } input[type=range].regler:active { cursor:grabbing; } input[type=range].regler::-webkit-slider-runnable-track { height:6px; border-radius:3px; background:var(--surface-3); } input[type=range].regler::-webkit-slider-thumb { -webkit-appearance:none; width:26px; height:26px; margin-top:-10px; border-radius:50%; background:var(--accent); border:3px solid var(--surface); box-shadow:var(--schatten); } input[type=range].regler::-moz-range-track { height:6px; border-radius:3px; background:var(--surface-3); } input[type=range].regler::-moz-range-thumb { width:26px; height:26px; border-radius:50%; border:3px solid var(--surface); background:var(--accent); box-shadow:var(--schatten); } /* Markierungen unter dem Regler: wo hat sich diese Vorschrift geändert? */ .marken { position:relative; height:16px; margin:.1rem 3rem 0; } .marken i { position:absolute; top:0; width:2px; height:7px; background:var(--line-2); transform:translateX(-1px); } .marken i.tref { background:var(--accent); height:11px; } .zeitenden { display:flex; justify-content:space-between; margin:0 3rem; font-family:var(--f-mono); font-size:.68rem; color:var(--ink-3); } /* --------------------------------- Normtext --------------------------------- */ .norm { font-family:var(--f-display); font-size:1.05rem; line-height:1.72; } @media (min-width:700px){ .norm { font-size:1.09rem; } } .norm .abs + .abs { margin-block-start:.85rem; } .norm .abs { display:grid; grid-template-columns:2.2rem 1fr; gap:.4rem; } .norm .abs.ohne { grid-template-columns:1fr; } .norm .abs .n { font-family:var(--f-mono); font-size:.78rem; color:var(--ink-3); padding-block-start:.4rem; } ins.d { background:var(--add-bg); color:var(--add-fg); text-decoration:underline; text-decoration-thickness:1px; padding:.04em .12em; border-radius:2px; } del.d { background:var(--del-bg); color:var(--del-fg); padding:.04em .12em; border-radius:2px; } /* Gegenüberstellung: auf dem Handy untereinander, ab 760px nebeneinander */ .gegen { display:grid; gap:0; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--surface); } .gegen > div { padding:.9rem 1rem; } .gegen > div + div { border-block-start:1px solid var(--line); } .gegen .gk { font-family:var(--f-mono); font-size:.68rem; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); margin-block-end:.5rem; padding-block-end:.35rem; border-block-end:1px solid var(--line); } @media (min-width:760px){ .gegen { grid-template-columns:1fr 1fr; } .gegen > div + div { border-block-start:none; border-inline-start:1px solid var(--line); } } /* --------------------------------- Listen --------------------------------- */ .liste { display:grid; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); overflow:hidden; } .liste > a { display:grid; grid-template-columns:auto 1fr auto; gap:.3rem .7rem; align-items:center; padding:.7rem .9rem; min-height:var(--tap); text-decoration:none; color:var(--ink); border-block-end:1px solid var(--line); } .liste > a:last-child { border-block-end:none; } .liste > a:hover,.liste > a:active { background:var(--surface-2); } .liste .k { font-family:var(--f-mono); font-size:.8rem; color:var(--accent); white-space:nowrap; } .liste .t { font-size:.92rem; min-width:0; } .liste .z { grid-column:2/-1; font-size:.78rem; color:var(--ink-3); } .liste .glied { padding:.45rem .9rem; background:var(--surface-2); font-size:.72rem; color:var(--ink-3); font-family:var(--f-mono); border-block-end:1px solid var(--line); } /* Tabellen rollen notfalls seitwärts, die Seite selbst nie */ .tab { overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); -webkit-overflow-scrolling:touch; } table { border-collapse:collapse; width:100%; font-size:.87rem; } th,td { text-align:left; padding:.6rem .8rem; border-block-end:1px solid var(--line); vertical-align:top; } thead th { font-family:var(--f-mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); font-weight:500; background:var(--surface-2); } tbody tr:last-child td { border-block-end:none; } /* --------------------------------- Seiten --------------------------------- */ main { padding-block:1.2rem 2.5rem; } @media (min-width:700px){ main { padding-block:1.6rem 4rem; } } .spalten { display:grid; gap:1.5rem; } @media (min-width:960px){ .spalten { grid-template-columns:1fr 300px; gap:2.2rem; align-items:start; } } .kopfbereich { background:var(--surface); border-block-end:1px solid var(--line); padding-block:1.8rem 2rem; margin-block-start:-1.2rem; } @media (min-width:700px){ .kopfbereich { padding-block:3rem 3.2rem; margin-block-start:-1.6rem; } } .zahl { display:grid; gap:.1rem; } .zahl b { font-family:var(--f-display); font-size:1.45rem; font-weight:700; line-height:1; font-variant-numeric:tabular-nums; } .zahl span { font-size:.74rem; color:var(--ink-3); line-height:1.25; } .schritte { counter-reset:s; display:grid; gap:.8rem; } /* Die Ziffer wird über die Innenabstände gesetzt, nicht über Rasterspalten: ein Rasterfeld nimmt jeden losen Textabschnitt als eigenes Element auf, und der landete dann in der schmalen Ziffernspalte — Zeilen mit einem Buchstaben. So kann das nicht mehr passieren, unabhängig vom Aufbau des Inhalts. */ .schritte li { counter-increment:s; position:relative; padding-inline-start:2.3rem; min-height:1.6rem; font-size:.92rem; list-style:none; } .schritte li::before { content:counter(s); position:absolute; inset-inline-start:0; inset-block-start:0; font-family:var(--f-mono); font-size:.8rem; color:var(--accent); background:var(--accent-bg); width:1.6rem; height:1.6rem; display:grid; place-items:center; border-radius:50%; } .schritte { padding:0; margin:0; } .leer { text-align:center; padding:2.5rem 1rem; color:var(--ink-3); } footer.fuss { border-block-start:1px solid var(--line); background:var(--surface); padding-block:1.6rem 2rem; font-size:.8rem; color:var(--ink-3); } footer.fuss a { color:var(--ink-2); } @media (prefers-reduced-motion:reduce){ *,*::before,*::after { transition-duration:.01ms !important; } } /* Amtliche Fußnoten — kein Gesetzeswortlaut, aber oft entscheidend dafür, wie er zu lesen ist. Deutlich abgesetzt, damit man sie nicht für Gesetz hält, und deutlich genug, dass man sie nicht übersieht. */ .fussnoten { margin-block-start: 1.4rem; padding: .85rem 1rem; background: var(--surface-2); border-inline-start: 3px solid var(--accent-2); border-radius: var(--r); font-size: .88rem; } .fussnoten .fn-kopf { margin: 0 0 .5rem; font-family: var(--f-mono); font-size: .68rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); } .fussnoten ul { margin: 0; padding-inline-start: 1.1rem; display: grid; gap: .45rem; } .fussnoten li { line-height: 1.6; } .fussnoten .fn-fuss { margin: .7rem 0 0; padding-block-start: .6rem; border-block-start: 1px solid var(--line); font-size: .8rem; color: var(--ink-2); } .abs.fn-abs { align-items: start; } .fn-marke { font-family: var(--f-mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r); padding: .15rem .4rem; white-space: nowrap; align-self: start; } .fussnav { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; margin-block-start: .8rem; padding-block-start: .8rem; border-block-start: 1px solid var(--line); } .fussnav a { color: var(--ink-2); text-decoration: none; } .fussnav a:hover { color: var(--accent); text-decoration: underline; } /* Rechtsseiten (Impressum, Datenschutz, Kontakt, Lizenzen). Sie kommen als fertiges HTML aus derselben Quelle wie die Website; hier fehlen nur die wenigen Regeln, die es in der Einzeldatei sonst nirgends braucht. */ .lesbar article, article.lesbar { max-width: 62ch; } article.lesbar h1 { margin-block: .2rem .8rem; } article.lesbar h2 { font-size: 1.05rem; margin-block: 2rem .75rem; padding-block-end: .35rem; border-block-end: 1px solid var(--line); } article.lesbar p { margin-block: .75rem; } article.lesbar ul { padding-inline-start: 1.15rem; display: grid; gap: .35rem; } dl.paare { display: grid; grid-template-columns: auto 1fr; gap: .3rem .9rem; margin: .6rem 0 0; font-size: .9rem; align-items: baseline; } dl.paare dt { color: var(--ink-2); } dl.paare dd { margin: 0; } @media (max-width: 460px) { dl.paare { grid-template-columns: 1fr; gap: 0 0; } dl.paare dd { margin-block-end: .55rem; } } .karte.betont { border-color: var(--accent-2); } .karte.betont h2 { border-block-end: none; margin-block-start: 0; } /* Kontaktformular. Dieselben Regeln wie in der ausgelieferten Website — hier nötig, weil die Einzeldatei statisch.css nicht mitlädt. */ #kontaktformular { display: grid; gap: 1.1rem; margin-block-start: 1.2rem; } .feld { display: grid; gap: .35rem; } .feld > label { font-size: .92rem; font-weight: 500; } .feld input[type=text], .feld input[type=email], .feld textarea { font: inherit; padding: .6rem .8rem; background: var(--surface); color: var(--ink); border: 1px solid var(--line-2); border-radius: var(--r); width: 100%; } .feld input[type=text], .feld input[type=email] { min-height: var(--tap); } .feld textarea { resize: vertical; min-height: 8rem; line-height: 1.6; } .feld p { margin: 0; } .pflicht { color: var(--accent); } .einwilligung > label { display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: start; font-weight: 400; font-size: .86rem; color: var(--ink-2); line-height: 1.55; background: var(--surface-2); padding: .8rem .9rem; border-radius: var(--r); border: 1px solid var(--line); cursor: pointer; } .einwilligung input[type=checkbox] { width: 20px; height: 20px; margin-block-start: .15rem; accent-color: var(--accent); } .einwilligung strong { color: var(--ink); } /* Honigtopf: für Menschen unsichtbar, für Programme sichtbar */ .honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } #k-meldung:not(:empty) { margin-block-start: 1rem; padding: .9rem 1.1rem; border-radius: var(--r); border-inline-start: 3px solid var(--accent); background: var(--accent-bg); font-size: .92rem; } #k-meldung.erfolg { border-inline-start-color: var(--add-line); background: var(--add-bg); color: var(--add-fg); } /* Der Druckblock steht bewusst GANZ am Ende des Stylesheets. @media print erhöht die Spezifität nicht — stünde er weiter oben, überschriebe ihn jede gleich spezifische Regel darunter, und die Schrift bliebe im Ausdruck so groß wie am Bildschirm. */ /* ------------------------------------------------------------------ * * Druckansicht * * Wozu: Wer eine Fassung als Anlage an eine Haus- oder Seminararbeit * hängt, braucht ein Blatt mit dem Wortlaut, dem Stichtag und einer * Quellenangabe — und ohne Navigation, Regler und Knöpfe, die auf Papier * nur Platz kosten und verwirren. * * Gedruckt wird deshalb genau das, was gerade auf dem Bildschirm steht: * die Überschrift, die gewählte Fassung, die Fußnoten, der Änderungshinweis * und die Quellenzeile. Sonst nichts. * ------------------------------------------------------------------ */ @media print { /* Eng gesetzt: Ein Ausdruck soll als Anlage in eine Arbeit passen, nicht als Plakat. Rand und Schriftgrad entsprechen etwa dem, in dem auch gedruckte Gesetzessammlungen gesetzt werden. */ @page { margin: 1.4cm 1.3cm 1.2cm; } /* DER entscheidende Hebel: Fast alle Größen im Stylesheet stehen in rem, und rem hängt am Wurzelelement — nicht am body. Wird hier die Wurzel kleiner gesetzt, schrumpfen Schrift, Abstände und Kästen gemeinsam und im richtigen Verhältnis. Einzelne Regeln nachzuziehen wäre aussichtslos: man übersähe immer eine. */ html { font-size: 7.8pt; } body { font-size: 1rem; line-height: 1.3; background:#fff; color:#000; /* Keine einzelne Zeile allein am Seitenanfang oder -ende. */ orphans: 2; widows: 2; padding-block-end: 0; } /* Schwarz auf Weiß: Tinte sparen und auf jedem Drucker lesbar. */ :root { --paper:#fff; --surface:#fff; --surface-2:#fff; --ink:#000; --ink-2:#222; --ink-3:#444; --line:#bbb; --line-2:#999; --accent:#000; --accent-2:#666; --accent-bg:#fff; } /* Alles, was nur der Bedienung dient */ .topbar, .untennav, .suchflaeche, .krumen, .fussnav, .sprungmarke, #zeitregler, #ansichtswahl, .blaettern, .verlauf, .side, .zitierformen, #merken, #drucken, #kopieren, .knopf, .segment, footer, /* Die Kurzantwort verweist auf Abschnitte, die auf Papier fehlen, und nennt den heutigen Stand statt des gedruckten — sie würde in die Irre führen. Die Änderungsliste und der allgemeine Hinweis entfallen, weil die Quellenzeile am Ende beides abdeckt. */ .kurzantwort, .aenderungsliste, .disclaimer-zeile { display:none !important; } .nur-druck { display:block; } /* Der Inhalt bekommt die ganze Seite */ .spalten { display:block; } .wrap { max-width:none; padding:0; } main { padding:0; margin:0; } article { max-width:none; } /* Kopf so knapp wie möglich — er ist nicht die Hauptsache. */ h1 { font-size: 1.5rem; line-height: 1.15; margin: 0 0 .1rem; } .label { line-height: 1.3; margin: 0 0 .2rem; } h1 + p.small { margin: 0 0 .6rem; } /* Der Normtext ist die Hauptsache. Die Absatznummer rückt dicht heran, damit die Textspalte breit bleibt. */ .norm { line-height: 1.34; } .norm .abs { grid-template-columns: 1.5rem 1fr; gap: .3rem; } .norm .abs + .abs { margin-block-start: .38rem; } /* Lange Absätze dürfen umbrechen — sonst blieben halbe Seiten leer. */ .norm .abs { break-inside: auto; } a, a.verweis { color:#000; text-decoration:none; } .fussnoten { border:1px solid #ccc; border-inline-start:2pt solid #666; break-inside: avoid; } /* Quellenangabe ans Ende, abgesetzt */ .druck-quelle { margin-block-start:.9rem; padding-block-start:.4rem; border-block-start:1px solid #999; font-size:.85rem; line-height:1.4; color:#333; break-inside:avoid; } /* Hinweise und Änderungsangabe bleiben, aber ruhig */ #par-notiz, #par-fuss, .hinweis { color:#333; background:#fff; border:0; border-inline-start:1.5pt solid #999; padding:.1rem .6rem; break-inside:avoid; } } /* =========================================================================== statisch.css — Ergänzungen für die ausgelieferte Website --------------------------------------------------------------------------- Die Grundgestaltung wird aus frontend/app.html übernommen, damit beide Fassungen nicht auseinanderlaufen. Hier stehen nur die Regeln für das, was es in der Einzeldatei-Fassung nicht gibt: echte Listen statt erzeugter Verweise, Sprungmarke, Vorlese-Hilfen. =========================================================================== */ /* Nur für Vorleseprogramme — sichtbar für niemanden, hörbar für alle, die darauf angewiesen sind. */ .nur-vorlesen { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* Sprungmarke: erste erreichbare Stelle mit der Tabulatortaste */ .sprungmarke { position: absolute; left: .5rem; top: -4rem; z-index: 200; background: var(--accent); color: var(--auf-akzent); padding: .7rem 1.1rem; border-radius: var(--r); text-decoration: none; font-size: .9rem; transition: top .15s; } .sprungmarke:focus { top: .5rem; } body.gesperrt { overflow: hidden; } /* ---------------------------- Brotkrumen ---------------------------- */ .krumen ol { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem; margin: 0; padding: 0; } .krumen li + li::before { content: "›"; margin-inline-end: .3rem; color: var(--ink-3); } .krumen li { display: inline; } .krumen + .spalten .label, .krumen + .spalten article > .label:first-child { margin-block-start: .8rem; } article > h1 { margin-block: .35rem .2rem; } .krumen { margin-block-end: .2rem; } /* ---------------------------- Listen ---------------------------- */ /* In der ausgelieferten Fassung sind das echte