/* ===================================================================== Gestaltungsgrundlage — Agentic Website Team ===================================================================== Diese Datei ist die einzige Quelle für Typografie, Farbe, Abstand und Grundlayout. Agenten dürfen sie NICHT ändern (siehe protectedPaths in config/pipeline.json). Sie sollen die hier definierten Bausteine benutzen. Der Grund ist nicht Geschmack, sondern Vergleichbarkeit: Wenn jeder Lauf seine eigene Gestaltung erfindet, sieht jede Karte anders aus, und man weiß vor einer Vorführung nie, was herauskommt. Mit einer Grundlage entscheidet der Agent nur noch Inhalt und Struktur — und genau das soll er entscheiden. Keine externen Ressourcen: keine Web-Schrift, kein CDN, kein Bild von fremden Servern. Die Seite muss offline und ohne Netzzugriff korrekt aussehen, sonst ist die Prüfung nicht reproduzierbar. ===================================================================== */ /* --- Gestaltungsvariablen ------------------------------------------- */ :root { /* Farben, heller Modus */ --grund: #fcfcfa; --flaeche: #ffffff; --rand: #e2e0da; --text: #1c1b19; --text-leise: #57544e; --akzent: #0b5d51; --akzent-hell: #e6f0ee; --fokus: #b4531a; /* Abstandsskala — Vielfache von 0,25rem, bewusst grob */ --raum-1: 0.25rem; --raum-2: 0.5rem; --raum-3: 1rem; --raum-4: 1.5rem; --raum-5: 2.5rem; --raum-6: 4rem; --raum-7: 6rem; /* Typografie — fluid, ohne Media Queries */ --schrift: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --schrift-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --gross-1: clamp(2rem, 1.4rem + 3vw, 3.25rem); --gross-2: clamp(1.4rem, 1.15rem + 1.2vw, 1.9rem); --gross-3: clamp(1.1rem, 1rem + 0.5vw, 1.3rem); --gross-0: clamp(1rem, 0.97rem + 0.15vw, 1.075rem); --klein: 0.875rem; --rundung: 10px; --breite: 44rem; /* Lesebreite für Fließtext */ --breite-weit: 62rem; /* für Raster und breite Abschnitte */ } @media (prefers-color-scheme: dark) { :root { --grund: #16181a; --flaeche: #1e2124; --rand: #333a3e; --text: #eceae5; --text-leise: #a8a49c; --akzent: #6fd3bf; --akzent-hell: #1d2f2c; --fokus: #f0a06a; } } /* --- Themen: die einzige erlaubte Farbwahl --------------------------- Ein Agent setzt `data-thema` am -Element. Mehr Farbfreiheit gibt es nicht, und das ist kein Geiz: Ein frei gewählter Hex-Wert am würde auch im Dunkelmodus gelten, und ein dunkles Braun auf dunklem Grund fällt bei der Kontrastprüfung durch. Modusabhängige Werte gehören deshalb in einen geprüften Katalog, nicht in die Hand des Aufrufers. Alle fünf Themen sind gegen Grund- und Kastenfarbe geprüft und erfüllen WCAG AA (mindestens 4,5:1) in beiden Modi. Gemessene Werte am 2026-08-16: zwischen 5,88 und 9,96. */ [data-thema="warm"] { --akzent: #9a3d12; --akzent-hell: #fbeade; } [data-thema="tief"] { --akzent: #1e4f8f; --akzent-hell: #e6eef8; } [data-thema="beere"] { --akzent: #8d2c56; --akzent-hell: #fae7ee; } [data-thema="graphit"] { --akzent: #3f4a52; --akzent-hell: #eceef0; } @media (prefers-color-scheme: dark) { [data-thema="warm"] { --akzent: #f0a878; --akzent-hell: #33231a; } [data-thema="tief"] { --akzent: #8bbcf0; --akzent-hell: #1a2634; } [data-thema="beere"] { --akzent: #f096b8; --akzent-hell: #331a24; } [data-thema="graphit"] { --akzent: #adbcc6; --akzent-hell: #242a2e; } } /* --- Grundlagen ------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; padding: var(--raum-5) var(--raum-3) var(--raum-7); background: var(--grund); color: var(--text); font-family: var(--schrift); font-size: var(--gross-0); line-height: 1.65; overflow-wrap: break-word; /* nie waagerecht scrollen */ } /* Der zentrale Container. Jede Seite wickelt ihren Inhalt hierin ein. */ .huelle { max-width: var(--breite); margin-inline: auto; } .huelle--weit { max-width: var(--breite-weit); } /* --- Typografie ------------------------------------------------------ */ h1, h2, h3 { line-height: 1.2; letter-spacing: -0.015em; margin: 0 0 var(--raum-3); text-wrap: balance; } h1 { font-size: var(--gross-1); } h2 { font-size: var(--gross-2); margin-top: var(--raum-6); } h3 { font-size: var(--gross-3); margin-top: var(--raum-4); } p { margin: 0 0 var(--raum-3); } .vorspann { font-size: var(--gross-3); color: var(--text-leise); margin-bottom: var(--raum-5); } .leise { color: var(--text-leise); } .klein { font-size: var(--klein); } a { color: var(--akzent); text-decoration-thickness: 1px; text-underline-offset: 0.18em; overflow-wrap: anywhere; } a:hover { text-decoration-thickness: 2px; } :focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; border-radius: 3px; } code, kbd, samp { font-family: var(--schrift-mono); font-size: 0.9em; background: var(--akzent-hell); padding: 0.1em 0.35em; border-radius: 4px; } /* --- Bausteine ------------------------------------------------------- */ /* Kopfbereich einer Seite */ .kopf { margin-bottom: var(--raum-5); } /* Abschnitt mit Trennlinie darueber */ .abschnitt { margin-top: var(--raum-6); padding-top: var(--raum-4); border-top: 1px solid var(--rand); } /* Hervorgehobener Kasten, z. B. für Status oder Hinweise */ .kasten { background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--rundung); padding: var(--raum-4); margin: var(--raum-4) 0; } .kasten--akzent { background: var(--akzent-hell); border-color: transparent; } /* Raster für Karten, bricht ohne Media Query um */ .raster { display: grid; gap: var(--raum-3); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin: var(--raum-4) 0; padding: 0; list-style: none; } .raster > li, .raster > .kasten { margin: 0; } /* Aufzählung mit Luft */ .liste { padding-left: 1.15em; } .liste > li { margin-bottom: var(--raum-2); } /* Merkmalsliste ohne Punkte, für Fakten. Zwei Spalten, wo Platz ist; darunter gestapelt. Ohne die Umschaltung wird die Wertspalte auf schmalen Schirmen zu einem Schlauch von drei Wörtern Breite. */ .fakten { list-style: none; padding: 0; margin: var(--raum-3) 0; } .fakten > li { display: grid; grid-template-columns: minmax(8rem, 11rem) 1fr; gap: var(--raum-3); padding: var(--raum-2) 0; border-bottom: 1px solid var(--rand); } .fakten dt, .fakten .bezeichnung { color: var(--text-leise); } @media (max-width: 34rem) { .fakten > li { grid-template-columns: 1fr; gap: var(--raum-1); } } /* Handlungsaufforderung */ .knopf { display: inline-block; background: var(--akzent); color: var(--grund); padding: var(--raum-2) var(--raum-4); border-radius: var(--rundung); text-decoration: none; font-weight: 600; } .knopf:hover { filter: brightness(1.12); text-decoration: none; } /* Statusmarke, klein und ruhig */ .marke { display: inline-block; font-family: var(--schrift-mono); font-size: var(--klein); background: var(--akzent-hell); color: var(--akzent); padding: 0.15em 0.6em; border-radius: 999px; } /* Fußbereich */ .fuss { margin-top: var(--raum-7); padding-top: var(--raum-4); border-top: 1px solid var(--rand); color: var(--text-leise); font-size: var(--klein); } /* Tabelle, die auf schmalen Schirmen nicht sprengt */ .tabelle { width: 100%; border-collapse: collapse; margin: var(--raum-4) 0; } .tabelle th, .tabelle td { text-align: left; padding: var(--raum-2) var(--raum-3) var(--raum-2) 0; border-bottom: 1px solid var(--rand); vertical-align: top; } .tabelle th { color: var(--text-leise); font-weight: 600; font-size: var(--klein); } img, svg, video { max-width: 100%; height: auto; } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }