/* ========================================================================== KernBite. Ein Stylesheet fuer die Startseite und fuer die Rechtstexte. Keine Schriftdatei, kein CDN, kein Skript, kein Bild von einem fremden Server. Alles, was der Browser laedt, liegt auf kernbite.de. Damit bleibt die Zusage "kein Drittlandtransfer" aus der Datenschutzerklaerung nachweisbar wahr, und die Seite kommt ohne JavaScript aus: es gibt keins. KONTRASTE, nachgerechnet nach WCAG 2.1 mit (L1+0,05)/(L2+0,05). Grenze fuer Text 4,5:1, fuer Grafik 3:1. Der kleinste Textwert der ganzen Seite ist 5,23:1. HELL Papier #FAF7F0, Tafel #F1ECE0 Text #1B2411 auf Papier 15,02 auf Tafel 13,63 Leise #4A5A38 auf Papier 6,98 auf Tafel 6,34 Marke #14170F auf Papier 16,93 auf Tafel 15,37 Link #455409 auf Papier 7,77 auf Tafel 7,06 Warnrot #A83E37 auf Papier 5,76 auf Tafel 5,23 auf #FDF0EE 5,54 Text im Korallenkasten #1B2411 auf #FDF0EE 14,44 (dunkel #EDE8DC auf #2A241C 12,56) Fokus #455409 auf Papier 7,77 Gruen auf Creme #50620B auf Papier 6,35 auf Tafel 5,76 Knopftext #000000 auf Chartreuse #D6F303 16,68 DUNKEL Papier #10160A, Tafel #18200F Text #EDE8DC auf Papier 15,05 auf Tafel 13,72 Leise #B9B3A3 auf Papier 8,80 auf Tafel 8,02 Akzent #D6F303 auf Papier 14,62 auf Tafel 13,32 Koralle #F2857F auf Papier 7,39 auf Tafel 6,74 Fokus #D6F303 auf Papier 14,62 TINTENBAND hell #14170F, dunkel #24281E #FAF7F0 16,93 / 14,05 #D6F303 14,39 / 11,94 #D8D3C4 12,11 / 10,04 #F2857F 7,28 / 6,04 NACHTGRUND der Bestandsseite hell #0C1207, dunkel #070A05 #FAF7F0 17,76 / 18,61 #D6F303 15,09 / 15,82 #C9C3B3 10,80 / 11,32 TEXT AUF FOTOS. Jeder Wert gegen den schlimmsten denkbaren Fall gerechnet, ein vollstaendig weisses Foto unter der Deckschicht. Kopftafel, Deckung 0,955 auf #0C1207, Mischgrund #171D12 #FAF7F0 16,08 #EDE8DC 14,07 #D6F303 13,66 #D8D3C4 11,50 Bildunterschrift in der Wand, Deckung 0,88 Schwarz, Mischgrund #1F1F1F #FFFFFF 16,48 #D9D3C5 11,05 Schlussband, Deckung 0,90 auf #0C1207, Mischgrund #242A20 #FAF7F0 13,75 #D6F303 11,69 #D8D3C4 9,83 App-Nachbau, Kartenfuss Deckung 0,86 Schwarz, Mischgrund #242424 #FFFFFF 15,52 #E4E0D6 11,78 Naehrwertpille rgba(255,255,255,.26) darauf, Mischgrund #5D5D5D #FFFFFF 6,58 App-Nachbau, KI-Plakette Deckung 0,78 Schwarz, Mischgrund #383838 #ECECEC 9,93 Kopfleiste, Deckung 0,86 auf #131A0B, Mischgrund #343A2D #E7E2D6 9,08 #D6F303 9,32 (ohne backdrop-filter deckt sie 0,93, Mischgrund #242A1C, #E7E2D6 11,42) WEITERE TEXTFARBEN, dieselbe Rechnung Kopftafel #E4DFD2 auf #171D12 12,93 Bestand #DAD5C7 auf #0C1207 12,96 auf #070A05 13,58 Baender #C7C1B1 auf #14170F 10,09 auf #24281E 8,37 Fusszeile #DCE7C8 auf #0C1207 14,75 auf #070A05 15,46 #A8A294 auf #0C1207 7,47 auf #070A05 7,83 BEWUSSTE ABWEICHUNG VOM APP-CODE: die fuenf runden Wischknoepfe tragen die Originalfarben aus swipe_screen.dart (red900/red50, red/red100, blue/blue50, green/green100, amber800/amber100). Als reine Abbildung sind sie aria-hidden und ohne Funktion; ihre Bedeutung steht daneben als Text mit 12,22:1. Einzige gefaerbte Abweichung ist das Herz im Shortlist-Chip: die App nimmt Colors.green (2,7:1 auf dem Chipgrund), hier steht green900 mit 6,66:1, damit das Sinnbild ueberhaupt sichtbar ist. APP-NACHBAU, weitere Werte Leistentitel #1A1C18 auf #F3F1EA 15,19 Chiptext auf #E9EEE1 14,54 Reiterschrift #3E4A31 auf #F3F1EA 8,34 aktiver Reiter #1B5E20 6,96 "Zum Plan" #1B5E20 auf #FFFFFF 7,87 DUNKLES CHARTREUSE AUF CREME: #50620B auf #FAF7F0 6,35, auf #F1ECE0 5,76. Chartreuse #D6F303 traegt auf Creme nur 1,18:1 und steht dort nie als Text. ========================================================================== */ /* --------------------------------------------------------------- Merkmale */ :root { --papier: #FAF7F0; --tafel: #F1ECE0; --nacht: #0C1207; --band: #14170F; --text: #1B2411; --leise: #4A5A38; --marke: #14170F; --link: #455409; --laub: #D6F303; /* traegt Text nur auf dunklem Grund */ --laub-text: #50620B; /* dieselbe Familie, aber satt genug fuer Text auf Creme */ --koralle: #A83E37; --koralle-bg: #FDF0EE; --linie: #DDD6C6; --linie-stark: #C6BDA8; --fokus: #455409; /* Zweitnamen fuer Text auf dem GRUNDTON. --link und --fokus werden innerhalb dunkler Flaechen (.masthead, footer ...) auf Laubgruen umgestellt, weil sie dort richtig sind. Wer aber eine HELLE Flaeche INNERHALB einer dunklen aufspannt -- das Klappfeld der Sprachwahl in der Kopfleiste -- braucht wieder den Grundwert. Sonst steht Chartreuse auf Creme: 1,18:1 statt der von Stufe AA geforderten 4,5:1. */ --link-grund: #455409; --fokus-grund: #455409; --auf-dunkel: #FAF7F0; --leise-dunkel:#C9C3B3; --schatten: 0 1px 2px rgba(27, 36, 17, .07); --schatten-tief: 0 24px 60px rgba(12, 18, 7, .38); --satz: 1280px; /* Breite der Mittelspalte */ --lesen: 34rem; /* Satzbreite fuer Fliesstext, rund 62 Zeichen */ --rand: clamp(1.15rem, 4vw, 3.5rem); --luft: clamp(3.5rem, 8vw, 7rem); --r: 4px; /* eine einzige Rundungsskala */ --r-gross: 10px; --schrift-satz: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Liberation Sans", "Noto Sans", sans-serif; --schrift-display: ui-serif, Georgia, "Iowan Old Style", "Palatino Linotype", "Liberation Serif", "Nimbus Roman", "Times New Roman", serif; } /* Der dunkle Modus wird zweimal gesetzt: einmal nach der Systemeinstellung, einmal ueber ein Merkmal am Wurzelelement. So bleibt die Seite auch dann richtig, wenn spaeter einmal ein Umschalter dazukommt. Kein Farbwert existiert ausschliesslich innerhalb eines Medienblocks. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --papier: #10160A; --tafel: #18200F; --nacht: #070A05; --band: #24281E; --text: #EDE8DC; --leise: #B9B3A3; --marke: #D6F303; --link: #D6F303; --laub-text: #D6F303; --koralle: #F2857F; --koralle-bg: #2A241C; --linie: #2E3823; --linie-stark: #46523A; --fokus: #D6F303; --link-grund: #D6F303; --fokus-grund: #D6F303; --leise-dunkel:#C9C3B3; --schatten: none; --schatten-tief: 0 24px 60px rgba(0, 0, 0, .6); } } :root[data-theme="dark"] { --papier: #10160A; --tafel: #18200F; --nacht: #070A05; --band: #24281E; --text: #EDE8DC; --leise: #B9B3A3; --marke: #D6F303; --link: #D6F303; --laub-text: #D6F303; --koralle: #F2857F; --koralle-bg: #2A241C; --linie: #2E3823; --linie-stark: #46523A; --fokus: #D6F303; --link-grund: #D6F303; --fokus-grund: #D6F303; --leise-dunkel:#C9C3B3; --schatten: none; --schatten-tief: 0 24px 60px rgba(0, 0, 0, .6); } /* ------------------------------------------------------------------ Grund */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 106.25%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* Die klebende Kopfleiste darf ein Sprungziel nicht verdecken. */ scroll-padding-top: 5rem; } body { margin: 0; background: var(--papier); color: var(--text); font-family: var(--schrift-satz); font-size: 1rem; line-height: 1.62; -webkit-font-smoothing: antialiased; } /* Deutsche Komposita brechen sonst auf 320 px sehr loechrig um. In Ueberschriften stoert die Trennung mehr, als sie hilft. */ p, li, dd, dt, td, blockquote, address, figcaption { hyphens: auto; -webkit-hyphens: auto; } /* Die Rechtstexte zitieren lange Adressen ohne Leerzeichen. Ohne diese Regel bekommt die Seite auf 320 px eine waagerechte Bildlaufleiste; Silbentrennung hilft dort nicht, weil eine Adresse keine Silbengrenzen hat. */ p, li, dd, dt, td, blockquote, address { overflow-wrap: anywhere; } p, li { text-wrap: pretty; } h1, h2, h3, h4 { font-family: var(--schrift-display); font-weight: 700; line-height: 1.08; letter-spacing: -.028em; text-wrap: balance; hyphens: manual; -webkit-hyphens: manual; margin: 0 0 .5em; } blockquote, .riesenzahl, .zahlen dt { text-wrap: balance; } /* Georgia liefert von Haus aus Mediaevalziffern. Eine Signaturzahl auf 200 px darf nicht auf der Grundlinie tanzen. */ .riesenzahl, .zahlen dt, .tnr, .nummer, h1, .gmakros, .kachel-schild span { font-variant-numeric: lining-nums tabular-nums; } img, svg { max-width: 100%; } img { display: block; height: auto; } a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: .18em; } a:hover { text-decoration-thickness: 2px; } :focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; border-radius: 2px; } a:focus { outline: 3px solid var(--fokus); outline-offset: 3px; } a:focus:not(:focus-visible) { outline: none; } /* Auf dunklen Flaechen wechselt der Fokusrahmen mit, sonst verschwindet er in seinem eigenen Grund. Das gilt ausdruecklich auch fuer die Fusszeile. */ .masthead, .held, .beweis, .band, .app, .aufruf, footer { --fokus: var(--laub); --link: var(--laub); /* Auf dunklem Grund traegt Laubgruen Text mit 7,75:1 und mehr. Auf Creme erreicht es nur 1,9:1, dort steht deshalb der satte Ton. */ --laub-text: var(--laub); } .nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Der Sprunglink ist nur bei Tastaturbedienung sichtbar. Er wurde frueher mit left:-9999px aus dem Bild geschoben. Das ist bei RECHTSLAEUFIGEN Sprachen falsch: dort kehrt sich die Achse um, und die arabische Fassung hatte dadurch 10.000 Pixel waagerechten Ueberstand. Die Klammer-Technik unten ist richtungsneutral: das Element bleibt an seinem Platz und wird auf einen Punkt zusammengeschnitten. */ .skip { position: absolute; top: 0; inset-inline-start: 0; z-index: 30; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; background: var(--papier); color: var(--text); padding: .6rem 1rem; border: 2px solid var(--fokus); } .skip:focus { width: auto; height: auto; overflow: visible; clip-path: none; inset-inline-start: .5rem; top: .5rem; } main:focus, main:focus-visible { outline: none; } /* Der Hof ist die Mittelspalte: hoechstens 1280 px breit, mittig, mit einem Seitenrand, der mitwaechst. Randlose Abschnitte (Bildwand, Kopfbereich, Schlussband) liegen ausserhalb davon und laufen von Kante zu Kante. Weil der Hof ein einfacher Kasten ist und kein mehrspaltiges Raster, kann kein absolut gesetztes Bild ihn verschieben. */ .hof { max-width: var(--satz); margin-inline: auto; padding-inline: var(--rand); } /* Zwei Spalten, wo Text und Bild einander gegenueberstehen. Der Wechsel haengt an der Fensterbreite, unterhalb davon steht alles untereinander. */ .paar { display: grid; gap: clamp(2rem, 5vw, 4rem); } @media (min-width: 60rem) { .paar--beweis { grid-template-columns: 42fr 58fr; align-items: start; column-gap: clamp(2rem, 5vw, 5rem); } .paar--rechnung { grid-template-columns: 44fr 56fr; align-items: start; column-gap: clamp(2rem, 5vw, 5rem); } } @media (min-width: 62rem) { .paar--app { grid-template-columns: 58fr 42fr; align-items: center; column-gap: clamp(2rem, 5vw, 5rem); } } .ueberzeile { font-family: var(--schrift-satz); font-size: .74rem; font-weight: 700; letter-spacing: .19em; text-transform: uppercase; color: var(--leise); margin: 0 0 1.1rem; display: flex; align-items: center; gap: .7rem; } .ueberzeile::before { content: ""; inline-size: 1.7rem; block-size: 2px; background: var(--laub-text); flex: none; } .ueberzeile--hell { color: var(--leise-dunkel); } .nummer { font-size: 1rem; letter-spacing: .02em; color: var(--laub-text); } /* 5,75:1 */ .klein { font-size: .86rem; color: var(--leise); max-width: var(--lesen); } /* ------------------------------------------------------------ Kopfleiste */ .masthead { position: sticky; top: 0; z-index: 20; background: rgba(19, 26, 11, .93); color: var(--auf-dunkel); border-bottom: 1px solid rgba(165, 214, 110, .22); } @supports (backdrop-filter: blur(1px)) { .masthead { background: rgba(19, 26, 11, .86); backdrop-filter: blur(14px) saturate(1.2); } } .masthead .bar { max-width: var(--satz); margin: 0 auto; padding: .55rem var(--rand); display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.4rem; } .wordmark { display: flex; align-items: center; gap: .55rem; font-family: var(--schrift-display); font-weight: 700; font-size: 1.22rem; letter-spacing: -.02em; color: var(--auf-dunkel); text-decoration: none; margin-right: auto; } .wordmark .zeichen { inline-size: 30px; block-size: 30px; border-radius: 7px; flex: none; } .masthead nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1.15rem; font-size: .92rem; } .masthead nav a { color: #E7E2D6; text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 2px; } .masthead nav a:hover { border-bottom-color: var(--laub); color: var(--papier); } .masthead nav a[aria-current="page"] { border-bottom-color: var(--laub); color: var(--papier); } /* Der Aufruf zur Tat ist ab jeder Scrollhoehe erreichbar. */ .masthead nav a.zur-app { background: var(--laub); color: #000000; font-weight: 650; padding: .42rem .95rem; border-radius: 999px; border-bottom: 0; white-space: nowrap; } .masthead nav a.zur-app:hover { background: #E4F84D; color: #000000; } @media (max-width: 44rem) { .masthead nav li.nebensache { display: none; } } /* Auf 320 px bleiben Marke und Knopf nebeneinander, sonst waechst die Leiste auf drei Zeilen. Die Sprungmarken stehen dann in der Fusszeile. */ @media (max-width: 32rem) { .masthead nav li:not(:last-child) { display: none; } } /* ------------------------------------------------- Rumpf, Rechtstextseiten */ main { display: block; } /* Der Textrahmen der Unterseiten. Ein
darf auch ohne die Huelle .wrap direkt in
stehen -- ohne die zweite Zeile klebte der Text auf dem Telefon dann am linken Bildschirmrand (/bestaetigt, /konto-loeschen). */ .wrap, main > article { max-width: 36rem; margin: 0 auto; padding: 2.6rem var(--rand) 3.2rem; } .wrap.wide { max-width: 58rem; } /* DIE SPALTE WAECHST MIT DEM FENSTER, DIE ZEILE BLEIBT LESBAR. 36rem sind auf dem Telefon richtig, auf einem Schreibtischschirm aber ein Baendchen unter einer 1280px breiten Kopfleiste -- genau so sah /sponsoring aus. Mit der Breite waechst deshalb auch die Schrift, sonst laeuft die Zeile von rund 70 auf ueber 100 Zeichen und die Seite wird breiter, aber schlechter. Nur max-width anzuheben waere der falsche halbe Schritt. */ @media (min-width: 64rem) { .wrap, main > article { max-width: 46rem; font-size: 1.05rem; } } @media (min-width: 90rem) { .wrap, main > article { max-width: 52rem; font-size: 1.09rem; } } article h1 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.9rem); color: var(--marke); } article h2 { font-size: clamp(1.28rem, 1.1rem + .8vw, 1.6rem); color: var(--marke); margin: 2.6rem 0 .6rem; scroll-margin-top: 5.5rem; } article h3 { font-size: 1.08rem; color: var(--text); margin: 1.8rem 0 .4rem; } article p { margin: 0 0 1.05rem; } article ul, article ol { margin: 0 0 1.05rem; padding-left: 1.35rem; } article li { margin-bottom: .45rem; } article li::marker { color: var(--leise); } strong { font-weight: 700; } .lead { font-size: 1.12rem; margin-bottom: 1.6rem; } .meta { font-size: .88rem; color: var(--leise); margin: 0; } blockquote { margin: 0 0 1.4rem; padding: .9rem 1.1rem; background: var(--tafel); border-left: 4px solid var(--laub-text); border-radius: 0 var(--r) var(--r) 0; font-size: .97rem; } blockquote p:last-child { margin-bottom: 0; } hr { border: 0; border-top: 1px solid var(--linie); margin: 2.2rem 0; } hr + h2 { margin-top: 1.6rem; } .card { background: var(--tafel); border: 1px solid var(--linie); border-radius: var(--r); padding: 1.1rem 1.25rem; margin: 0 0 1.4rem; box-shadow: var(--schatten); } .card h2, .card h3 { margin-top: 0; } .card p:last-child, .card ul:last-child { margin-bottom: 0; } .address { font-style: normal; margin: 0 0 1.05rem; } dl.kv { margin: 0 0 1.05rem; } dl.kv dt { font-size: .84rem; letter-spacing: .04em; text-transform: uppercase; color: var(--leise); margin-top: 1rem; } dl.kv dd { margin: .15rem 0 0; } .toc { background: var(--tafel); border: 1px solid var(--linie); border-radius: var(--r); padding: 1rem 1.25rem; margin: 0 0 2rem; font-size: .94rem; } .toc h2 { font-family: var(--schrift-satz); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--leise); margin: 0 0 .6rem; } /* Die Paragrafentitel sind lang. Getrennt wird nach Silben, nicht mitten im Wort, sonst steht in der Spalte ein einzelnes t auf eigener Zeile. */ .toc ol { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 2rem; } .toc li { overflow-wrap: normal; hyphens: auto; } .toc li { margin-bottom: .3rem; break-inside: avoid; } @media (max-width: 34rem) { .toc ol { columns: 1; } } /* ------------------------------------------------------ Knoepfe, Aufrufe */ .tat, .cta { display: inline-flex; align-items: center; gap: .5rem; background: var(--laub); color: #000000; /* 16,68:1 */ font-family: var(--schrift-satz); font-weight: 650; font-size: .98rem; padding: .72rem 1.25rem; border-radius: 999px; text-decoration: none; white-space: nowrap; border: 2px solid transparent; transition: background .18s ease, transform .18s ease; } .tat:hover, .cta:hover { background: #E4F84D; transform: translateY(-1px); } .tat .pfeil { inline-size: 1em; block-size: 1em; fill: currentColor; transition: transform .18s ease; } .tat:hover .pfeil { transform: translateX(3px); } .tat--zart { background: transparent; color: var(--auf-dunkel); border-color: rgba(250, 247, 240, .45); } .tat--zart:hover { background: rgba(250, 247, 240, .12); color: var(--auf-dunkel); } .tat--gross { font-size: 1.06rem; padding: .9rem 1.6rem; } .knopfzeile { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.6rem 0 0; } /* Auf hellem Grund traegt Laubgruen keinen Text mehr; dort ist der Knopf dunkelgruen mit cremefarbener Schrift (12,22:1). */ .cta, .rechnung .tat, .haltung .tat { background: var(--band); color: var(--auf-dunkel); } .cta:hover, .rechnung .tat:hover, .haltung .tat:hover { background: #33481f; } /* ============================================================ STARTSEITE */ /* --- Kopfbereich ------------------------------------------------------- */ .held { position: relative; isolation: isolate; overflow: hidden; background: var(--nacht); } .held-bilder { position: absolute; inset: 0; z-index: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; } .held-bilder .held-bahn { inline-size: 100%; block-size: 100%; object-fit: cover; } @media (min-width: 56rem) { /* Vier ungleich breite Bahnen. Die Ungleichheit ist der ganze Reiz. */ .held-bilder { grid-template-columns: 1.42fr 1fr 1.66fr 1.06fr; grid-template-rows: 1fr; } } .held-bahn-raster { position: relative; z-index: 1; padding-block: clamp(6rem, 26vh, 13rem) clamp(1.6rem, 4vw, 3rem); min-block-size: 34rem; display: flex; flex-direction: column; justify-content: flex-end; } @supports (height: 100svh) { .held-bahn-raster { min-block-size: min(94svh, 58rem); } } /* Die Tafel ist ein eigener Kasten mit eigener Kante, kein Schleier ueber dem Foto. Deshalb gibt es keine Schnittkante quer durch die Bilder, und der Kontrast haengt nicht davon ab, wie breit das Fenster ist: die Tafel sitzt in der Mittelspalte und wandert nie unter dem Text weg. */ .held-tafel { max-inline-size: 40rem; background: rgba(12, 18, 7, .955); border-top: 3px solid var(--laub); border-radius: var(--r-gross); box-shadow: var(--schatten-tief); padding: clamp(1.5rem, 3.5vw, 2.6rem) clamp(1.3rem, 3vw, 2.6rem) clamp(1.2rem, 2.5vw, 1.8rem); color: var(--auf-dunkel); } @supports (backdrop-filter: blur(1px)) { .held-tafel { background: rgba(12, 18, 7, .9); backdrop-filter: blur(18px) saturate(1.15); } } .held-tafel .ueberzeile { color: var(--leise-dunkel); } .held-tafel h1 { font-size: clamp(2.1rem, 1.1rem + 4.4vw, 4.4rem); letter-spacing: -.035em; color: var(--auf-dunkel); margin: 0 0 .55rem; } .held-tafel h1 .betont { color: var(--laub); } .held-satz { margin: 0; max-inline-size: 33rem; color: #E4DFD2; font-size: clamp(1rem, .95rem + .3vw, 1.12rem); } .fakten { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin: 1.7rem 0 0; padding: 1.2rem 0 0; border-top: 1px solid rgba(165, 214, 110, .28); font-size: .72rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: #D8D3C4; /* 11,50:1 */ } .fakten li { display: flex; align-items: center; gap: .5rem; } .fakten li::before { content: ""; inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--laub); flex: none; } /* --- Meilenstein: wie weit bis zur naechsten runden Zahl --------------- */ .meilenstein { display: flex; align-items: center; gap: .7rem; margin: .9rem 0 0; font-size: .72rem; font-weight: 700; letter-spacing: .12em; color: #D8D3C4; } .meilenstein-bahn { flex: 1 1 auto; min-inline-size: 4rem; block-size: 6px; border-radius: 3px; background: rgba(165, 214, 110, .22); overflow: hidden; } .meilenstein-fuellung { display: block; block-size: 100%; border-radius: 3px; background: var(--laub); } .meilenstein-ziel { opacity: .72; flex: none; } /* Die Breiten als Klassen, weil die Seite kein inline style erlaubt. */ .w0 { inline-size: 0%; } .w1 { inline-size: 1%; } .w2 { inline-size: 2%; } .w3 { inline-size: 3%; } .w4 { inline-size: 4%; } .w5 { inline-size: 5%; } .w6 { inline-size: 6%; } .w7 { inline-size: 7%; } .w8 { inline-size: 8%; } .w9 { inline-size: 9%; } .w10 { inline-size: 10%; } .w11 { inline-size: 11%; } .w12 { inline-size: 12%; } .w13 { inline-size: 13%; } .w14 { inline-size: 14%; } .w15 { inline-size: 15%; } .w16 { inline-size: 16%; } .w17 { inline-size: 17%; } .w18 { inline-size: 18%; } .w19 { inline-size: 19%; } .w20 { inline-size: 20%; } .w21 { inline-size: 21%; } .w22 { inline-size: 22%; } .w23 { inline-size: 23%; } .w24 { inline-size: 24%; } .w25 { inline-size: 25%; } .w26 { inline-size: 26%; } .w27 { inline-size: 27%; } .w28 { inline-size: 28%; } .w29 { inline-size: 29%; } .w30 { inline-size: 30%; } .w31 { inline-size: 31%; } .w32 { inline-size: 32%; } .w33 { inline-size: 33%; } .w34 { inline-size: 34%; } .w35 { inline-size: 35%; } .w36 { inline-size: 36%; } .w37 { inline-size: 37%; } .w38 { inline-size: 38%; } .w39 { inline-size: 39%; } .w40 { inline-size: 40%; } .w41 { inline-size: 41%; } .w42 { inline-size: 42%; } .w43 { inline-size: 43%; } .w44 { inline-size: 44%; } .w45 { inline-size: 45%; } .w46 { inline-size: 46%; } .w47 { inline-size: 47%; } .w48 { inline-size: 48%; } .w49 { inline-size: 49%; } .w50 { inline-size: 50%; } .w51 { inline-size: 51%; } .w52 { inline-size: 52%; } .w53 { inline-size: 53%; } .w54 { inline-size: 54%; } .w55 { inline-size: 55%; } .w56 { inline-size: 56%; } .w57 { inline-size: 57%; } .w58 { inline-size: 58%; } .w59 { inline-size: 59%; } .w60 { inline-size: 60%; } .w61 { inline-size: 61%; } .w62 { inline-size: 62%; } .w63 { inline-size: 63%; } .w64 { inline-size: 64%; } .w65 { inline-size: 65%; } .w66 { inline-size: 66%; } .w67 { inline-size: 67%; } .w68 { inline-size: 68%; } .w69 { inline-size: 69%; } .w70 { inline-size: 70%; } .w71 { inline-size: 71%; } .w72 { inline-size: 72%; } .w73 { inline-size: 73%; } .w74 { inline-size: 74%; } .w75 { inline-size: 75%; } .w76 { inline-size: 76%; } .w77 { inline-size: 77%; } .w78 { inline-size: 78%; } .w79 { inline-size: 79%; } .w80 { inline-size: 80%; } .w81 { inline-size: 81%; } .w82 { inline-size: 82%; } .w83 { inline-size: 83%; } .w84 { inline-size: 84%; } .w85 { inline-size: 85%; } .w86 { inline-size: 86%; } .w87 { inline-size: 87%; } .w88 { inline-size: 88%; } .w89 { inline-size: 89%; } .w90 { inline-size: 90%; } .w91 { inline-size: 91%; } .w92 { inline-size: 92%; } .w93 { inline-size: 93%; } .w94 { inline-size: 94%; } .w95 { inline-size: 95%; } .w96 { inline-size: 96%; } .w97 { inline-size: 97%; } .w98 { inline-size: 98%; } .w99 { inline-size: 99%; } .w100 { inline-size: 100%; } /* --- Bestand: Riesenzahl und Bildwand ---------------------------------- */ .beweis { background: var(--nacht); color: var(--auf-dunkel); padding-block: var(--luft) 0; /* Bezugsgroesse fuer die Riesenzahl. Sie stand vorher auf 12vw und bemass sich damit am FENSTER, steht aber in einer Spalte von 42 Prozent Breite. Auf breiten Schirmen wuchs die Schrift schneller als ihre Spalte, und "1.014" brach in "1.01" und "4" um. */ container-type: inline-size; } .riesenzahl { font-family: var(--schrift-display); font-weight: 700; /* 14cqi: die Spalte misst rund 42cqi, eine fuenfstellige Zahl in der Anzeigenschrift braucht etwa das 2,8-fache ihrer Schriftgroesse. 42 / 2,8 = 15, mit Reserve also 14. nowrap macht einen Umbruch unmoeglich statt nur unwahrscheinlich. */ font-size: clamp(3.4rem, 14cqi, 11.5rem); white-space: nowrap; line-height: .82; letter-spacing: -.055em; color: var(--laub); margin: 0; } .riesenzahl span { display: block; font-family: var(--schrift-satz); font-size: clamp(.68rem, .6rem + .3vw, .82rem); font-weight: 700; letter-spacing: .21em; text-transform: uppercase; color: var(--leise-dunkel); margin-top: 1rem; line-height: 1.4; } .beweis-text h2 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.9rem); color: var(--auf-dunkel); margin: 0 0 .8rem; } .beweis-text p { margin: 0 0 .9rem; max-inline-size: var(--lesen); color: #DAD5C7; } /* Spaltensatz statt Raster: der Umbruch fuellt lueckenlos, und die wechselnden Zuschnitte lassen keine Kante auf einer Linie sitzen. */ .wand { position: relative; columns: 2; column-gap: 4px; margin-block-start: clamp(2.5rem, 6vw, 4.5rem); padding-inline: 4px; } @media (min-width: 26rem) { .wand { columns: 3; } } @media (min-width: 40rem) { .wand { columns: 4; } } @media (min-width: 52rem) { .wand { columns: 5; column-gap: 5px; padding-inline: 5px; } } @media (min-width: 66rem) { .wand { columns: 7; } } @media (min-width: 90rem) { .wand { columns: 9; column-gap: 6px; padding-inline: 6px; } } /* Der Spaltensatz endet zwangslaeufig ungleich hoch. Ein Verlauf loest die Unterkante in den Grund auf, statt sie abzuschneiden. */ .wand::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; block-size: clamp(110px, 14vw, 230px); background: linear-gradient(to top, var(--nacht) 34%, rgba(12, 18, 7, 0)); pointer-events: none; } .kachel { position: relative; overflow: hidden; margin: 0 0 4px; break-inside: avoid; background: #1A2410; border-radius: var(--r); aspect-ratio: 3 / 4; } @media (min-width: 48rem) { .kachel { margin-bottom: 5px; } } @media (min-width: 90rem) { .kachel { margin-bottom: 6px; } } /* Teilerfremde Muster, damit sich der Rhythmus nicht sichtbar wiederholt. */ .kachel:nth-child(4n+1) { aspect-ratio: 1 / 1; } .kachel:nth-child(5n+3) { aspect-ratio: 4 / 5; } .kachel:nth-child(7n+2) { aspect-ratio: 3 / 5; } .kachel:nth-child(9n+6) { aspect-ratio: 5 / 4; } .kachel:nth-child(11n+8) { aspect-ratio: 2 / 3; } .kachel img { inline-size: 100%; block-size: 100%; object-fit: cover; filter: saturate(1.06); transition: transform .5s ease, filter .5s ease; } .kachel:hover img { transform: scale(1.05); filter: saturate(1.18); } .kachel-schild { position: absolute; inset-inline: 0; inset-block-end: 0; padding: 1.8rem .5rem .45rem; font-size: .68rem; line-height: 1.3; color: #FFFFFF; /* 16,48:1 */ background: linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.88) 46%, rgba(0,0,0,0) 100%); opacity: 0; transition: opacity .25s ease; } .kachel-schild b { display: block; font-weight: 650; } .kachel-schild span { color: #D9D3C5; } /* 11,05:1 */ .kachel:hover .kachel-schild, .kachel:focus-within .kachel-schild { opacity: 1; } /* Ohne Zeigegeraet gibt es kein Ueberfahren. Dort stehen die Namen immer. */ @media (hover: none) { .kachel-schild { opacity: 1; } } .wand-hinweis { max-inline-size: 46rem; margin: clamp(1.8rem, 4vw, 3rem) 0 0; padding-bottom: var(--luft); font-size: .9rem; color: var(--leise-dunkel); } /* --- Zahlenband -------------------------------------------------------- */ .band { background: var(--band); color: var(--auf-dunkel); padding-block: var(--luft); } .zahlen { display: grid; gap: 2.2rem clamp(1.2rem, 2.5vw, 2.4rem); grid-template-columns: repeat(2, 1fr); margin: 0; } @media (min-width: 40rem) { .zahlen { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 64rem) { .zahlen { grid-template-columns: repeat(6, 1fr); } } .zahlen > div { border-top: 1px solid rgba(165, 214, 110, .3); padding-top: 1rem; } /* Alle Zahlen auf einer Grundlinie, alle Erlaeuterungen auf der naechsten, unabhaengig davon, wie lang der Text darunter ist. */ @supports (grid-template-rows: subgrid) { .zahlen { grid-auto-rows: auto; } .zahlen > div { display: grid; grid-template-rows: subgrid; grid-row: span 2; } } .zahlen dt { font-family: var(--schrift-display); font-weight: 700; font-size: clamp(2.6rem, 1.4rem + 3.4vw, 4.2rem); line-height: 1; letter-spacing: -.045em; color: var(--laub); /* 14,39 / 11,94 */ } .zahlen dd { margin: .7rem 0 0; font-size: .92rem; color: #D8D3C4; /* 8,74 / 9,96 */ } /* --- Blaetter: Bild gegen Text ----------------------------------------- */ .blaetter { padding-block: var(--luft); } .blatt { display: grid; gap: clamp(1.6rem, 4vw, 3.5rem); max-width: var(--satz); margin: 0 auto; padding: 0 var(--rand) clamp(2.5rem, 6vw, 5rem); } .blatt + .blatt { border-top: 1px solid var(--linie); padding-top: clamp(2.5rem, 6vw, 5rem); } @media (min-width: 60rem) { .blatt { grid-template-columns: 7fr 5fr; align-items: center; } /* Die Bloecke wechseln die Seite. Steht das Bild im Quelltext ZUERST, traegt der Block --bildlinks und bekommt die breite Spalte links; steht der Text zuerst, traegt er --bildrechts. Ohne die erste Regel lag das Bild in zwei von vier Bloecken in der schmalen Spalte, und die Seite wirkte willkuerlich statt rhythmisch. */ .blatt--bildlinks { grid-template-columns: 7fr 5fr; } .blatt--bildrechts { grid-template-columns: 5fr 7fr; } } /* Vier gleiche Doppelseiten waeren eine Reihe, keine Folge. Der Zuschnitt wechselt deshalb von Blatt zu Blatt: hoch, quadratisch, quer, hoch. */ .blatt:nth-of-type(2) .rahmen img { aspect-ratio: 1 / 1; object-fit: cover; } .blatt:nth-of-type(3) .rahmen img { aspect-ratio: 5 / 4; object-fit: cover; } .blatt:nth-of-type(4) .rahmen img { aspect-ratio: 4 / 5; object-fit: cover; } .blatt-text { max-inline-size: var(--lesen); } .blatt-text h3 { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.6rem); color: var(--marke); margin: 0 0 .7rem; } .blatt-text p { margin: 0 0 .9rem; } .blatt-text p:last-child { margin-bottom: 0; } .merksatz { border-left: 3px solid var(--koralle); background: var(--koralle-bg); padding: .85rem 1.1rem; border-radius: 0 var(--r) var(--r) 0; font-size: .95rem; margin-top: 1.3rem !important; } .rahmen { margin: 0; } .rahmen img { inline-size: 100%; border-radius: var(--r-gross); background: var(--tafel); box-shadow: var(--schatten); } .bildschild { margin-top: .8rem; font-size: .84rem; color: var(--leise); display: flex; flex-wrap: wrap; gap: .1rem .7rem; } .bildschild b { color: var(--text); font-weight: 650; } .bildschild--mitte { justify-content: center; text-align: center; max-inline-size: 26rem; margin-inline: auto; } /* Im dunkelgruenen Abschnitt kippt die Bildunterschrift mit. */ .app .bildschild { color: #C7C1B1; } /* 10,1:1 auf #14170F */ .app .bildschild b { color: var(--auf-dunkel); } /* --- App-Nachbau ------------------------------------------------------- */ .app { background: var(--band); color: var(--auf-dunkel); padding-block: var(--luft); } .legende { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: .7rem; } .legende li { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: .3rem .8rem; font-size: .92rem; } .legende b { color: var(--auf-dunkel); font-weight: 650; } .wrichtung { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--laub); } .werklaerung { grid-column: 2 / -1; color: #D8D3C4; font-size: .88rem; } .wknopf { inline-size: 42px; block-size: 42px; border-radius: 50%; display: grid; place-items: center; flex: none; box-shadow: 0 1px 3px rgba(0,0,0,.35); } .wknopf--klein { inline-size: 2.55em; block-size: 2.55em; } .sym { inline-size: 1.15em; block-size: 1.15em; fill: currentColor; } .wsym { inline-size: 22px; block-size: 22px; } .wknopf--klein .wsym { inline-size: 1.3em; block-size: 1.3em; } .nsym { inline-size: 1.7em; block-size: 1.7em; } /* --- Rechenweg --------------------------------------------------------- */ .rechnung { background: var(--tafel); padding-block: var(--luft); } .rechnung-text { max-inline-size: var(--lesen); } .rechnung-text h2 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.7rem); color: var(--marke); } .rechnung-text p { margin: 0 0 .9rem; } .warnkasten { border-left: 3px solid var(--koralle); background: var(--koralle-bg); padding: .9rem 1.1rem; border-radius: 0 var(--r) var(--r) 0; font-size: .95rem; margin-top: 1.4rem !important; } .warnkasten b { color: var(--koralle); } .tafel { list-style: none; margin: 0; padding: 0; background: var(--papier); border: 1px solid var(--linie); border-radius: var(--r-gross); box-shadow: var(--schatten); overflow: hidden; } .tafel > li { display: grid; grid-template-columns: 3rem 1fr; gap: .2rem 1rem; padding: 1.1rem clamp(1rem, 2.5vw, 1.6rem); border-bottom: 1px solid var(--linie); } .tafel > li:last-child { border-bottom: 0; } .tnr { grid-row: span 2; font-family: var(--schrift-display); font-weight: 700; font-size: 1.5rem; color: var(--laub-text); line-height: 1; /* 5,75:1 */ align-self: start; } .tafel b { font-size: 1.02rem; color: var(--text); } .tafel > li > span:last-child { color: var(--leise); font-size: .95rem; } .tzwischen { display: block !important; background: var(--tafel); font-family: var(--schrift-display); font-size: 1.05rem; font-style: italic; color: var(--marke); text-align: right; } .tzwischen--ende { font-weight: 700; } /* --- Haltung ----------------------------------------------------------- */ .haltung { padding-block: var(--luft); } .haltung h2 { font-size: clamp(1.9rem, 1.2rem + 2.8vw, 3.2rem); color: var(--marke); margin-bottom: 1.8rem; } .tafeln { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--linie-stark); border: 1px solid var(--linie-stark); border-radius: var(--r-gross); overflow: hidden; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); } .tafeln li { background: var(--papier); padding: clamp(1.2rem, 2.5vw, 1.8rem); } .nein { font-family: var(--schrift-display); font-weight: 700; font-size: clamp(2.4rem, 1.6rem + 2.6vw, 3.6rem); line-height: .9; letter-spacing: -.04em; color: var(--koralle); margin: 0 0 .3rem; } .tafeln b { display: block; font-size: 1.15rem; font-weight: 650; margin-bottom: .4rem; } .tafeln span { color: var(--leise); font-size: .93rem; } .tafeln-quelle { font-size: .88rem; color: var(--leise); margin: 1rem 0 0; } .ehrlich { display: grid; gap: clamp(1.6rem, 4vw, 3rem); margin-top: clamp(2.5rem, 6vw, 4rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); } .ehrlich-spalte { max-inline-size: var(--lesen); } .ehrlich h3 { font-size: 1.35rem; color: var(--marke); margin-bottom: .6rem; } .ehrlich p { margin: 0 0 .9rem; } .wissen { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; } .wissen li { padding-left: 1.5rem; position: relative; font-size: .95rem; color: var(--leise); } .wissen li::before { content: ""; position: absolute; left: 0; top: .55em; inline-size: .55rem; block-size: .55rem; border-radius: 50%; background: var(--laub-text); } .wissen b { color: var(--text); font-weight: 650; } .hinweiskasten { margin-top: clamp(2rem, 5vw, 3rem); border: 1px solid var(--koralle); border-left-width: 4px; background: var(--koralle-bg); border-radius: 0 var(--r-gross) var(--r-gross) 0; padding: clamp(1.1rem, 2.5vw, 1.6rem); } .hinweiskasten h3 { color: var(--koralle); font-size: 1.1rem; margin-bottom: .5rem; } .hinweiskasten p { margin: 0; max-inline-size: 52rem; font-size: .95rem; } /* --- Schlussaufruf ----------------------------------------------------- */ .aufruf { position: relative; isolation: isolate; overflow: hidden; background: var(--nacht); } .aufruf-bilder { position: absolute; inset: 0; z-index: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; } @media (min-width: 48rem) { .aufruf-bilder { grid-template-columns: repeat(6, 1fr); } } .streifen-bild { inline-size: 100%; block-size: 100%; object-fit: cover; } .aufruf-bilder::after { content: ""; position: absolute; inset: 0; background: rgba(12, 18, 7, .90); /* 13,75:1 fuer Creme */ } .aufruf-inhalt { position: relative; z-index: 1; padding-block: clamp(4rem, 10vw, 8rem); color: var(--auf-dunkel); text-align: center; } .aufruf-inhalt > * { margin-inline: auto; } .aufruf-inhalt .ueberzeile { justify-content: center; } .aufruf-inhalt h2 { font-size: clamp(2rem, 1.2rem + 3.4vw, 3.8rem); color: var(--auf-dunkel); max-inline-size: 20ch; margin: 0 0 .7rem; } .aufruf-inhalt p { margin: 0; max-inline-size: 38rem; color: #D8D3C4; } .aufruf-inhalt .klein { color: #D8D3C4; margin-top: 1.4rem; } .aufruf-inhalt .knopfzeile { justify-content: center; } .schlussnotiz { padding-block: 2.2rem; border-bottom: 1px solid var(--linie); } .schlussnotiz .meta { max-inline-size: 46rem; } /* --------------------------------------------------------------- Fuss */ footer { background: var(--nacht); color: #D8D3C4; font-size: .93rem; } footer .wrap { max-width: var(--satz); padding-block: clamp(2.5rem, 5vw, 3.5rem); } .fuss-raster { display: grid; gap: 2rem clamp(1.5rem, 4vw, 4rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); } .fuss-raster h2 { font-family: var(--schrift-satz); font-size: .74rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; color: #A8A294; margin: 0 0 .8rem; } footer .marke { display: flex; align-items: center; gap: .55rem; margin: 0 0 .7rem; } footer .marke .zeichen { inline-size: 34px; block-size: 34px; border-radius: 8px; flex: none; } footer .marke b { font-family: var(--schrift-display); font-size: 1.2rem; color: var(--auf-dunkel); } footer nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; } footer a { color: #DCE7C8; } footer p { margin: 0 0 .5rem; } footer p:last-child { margin-bottom: 0; } .fuss-schluss { margin-top: 2.2rem; padding-top: 1.2rem; border-top: 1px solid rgba(216, 211, 196, .22); display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; font-size: .84rem; color: #A8A294; /* 7,7:1 auf #0C1207 */ } /* --------------------------------------------------------- Bewegung, Druck */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } @media print { .masthead, .toc, .skip, .held-bilder, .aufruf-bilder, .wand, .geraet, .knopfzeile { display: none !important; } body, .held, .beweis, .band, .app, .rechnung, .aufruf, .tafeln li, .tafel, footer { background: #fff !important; color: #000 !important; } /* Farbige Schrift muss beim Druck ohne Hintergruende mitkippen, sonst stehen ganze Abschnitte weiss auf weiss. */ .held *, .beweis *, .band *, .app *, .aufruf *, footer *, h1, h2, h3, .nein, .riesenzahl, .zahlen dt, .tnr, .ueberzeile, a { color: #000 !important; } .held-tafel, .tafel, .tafeln, .hinweiskasten { box-shadow: none !important; border-color: #999 !important; } .wrap, .hof { max-width: none; padding: 0; } } /* --- Echte Bildschirmaufnahmen statt Nachbau ------------------------------ Der Abschnitt zeigte frueher ein in HTML nachgebautes Telefon. Das musste bei jeder Aenderung an der App nachgezogen werden und war im besten Fall eine Behauptung. Jetzt stehen dort Aufnahmen der laufenden App. Sie sind ehrlicher, kosten 148 KB und sparen 8 KB Auszeichnung. Kontrast: .app liegt auf --nacht #0C1207, Text --auf-dunkel #FAF7F0 ergibt 17,4:1; die Bildunterschrift --leise-dunkel #C9C3B3 ergibt 11,2:1. Beide weit ueber den geforderten 4,5:1. */ .app-vorspann { max-width: var(--lesen); margin-bottom: clamp(2rem, 4vw, 3rem); color: var(--leise-dunkel); } .schau { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: clamp(1rem, 2.5vw, 2rem); align-items: start; } /* SECHS KARTEN, NICHT VIER. Mit auto-fit passten auf breiten Schirmen vier Spalten -- die letzten zwei Aufnahmen standen dann allein in einer halb leeren Reihe. Ab 62rem daher fest drei Spalten: 3 + 3 statt 4 + 2. Die Wettbewerbsschau hat drei Karten und bleibt bei ihrer eigenen Regel. */ @media (min-width: 62rem) { .schau:not(.schau--wett) { grid-template-columns: repeat(3, 1fr); } } .schau-karte { margin: 0; } .schau-karte img { display: block; width: 100%; height: auto; border-radius: var(--r-gross); box-shadow: var(--schatten-tief); /* Die Aufnahmen tragen keinen Geraeterahmen. Eine feine Kante trennt das helle Bild vom nachtdunklen Grund, ohne ein Telefon vorzutaeuschen. */ outline: 1px solid rgb(250 247 240 / .14); outline-offset: -1px; } .schau-karte figcaption { margin-top: .85rem; font-size: .92rem; line-height: 1.5; color: var(--leise-dunkel); } .schau-karte figcaption b { display: block; color: var(--laub); font-weight: 600; letter-spacing: .01em; } .app-nachsatz { margin-top: clamp(1.75rem, 3vw, 2.5rem); max-width: var(--lesen); font-size: .92rem; color: var(--leise-dunkel); } /* --- Direktdownload des Installationspakets ------------------------------- Liegt bewusst NACH der App-Vorstellung und VOR dem Schlussaufruf: wer bis hierher gelesen hat, weiss, was er installiert. Kontrast auf --papier #FAF7F0: --text 14,8:1, --leise 6,9:1, beide ueber den geforderten 4,5:1. Die drei Hinweise stehen bewusst NEBEN dem Knopf und nicht darunter im Kleingedruckten. Wer ausserhalb eines Stores installiert, umgeht dessen Pruefung und soll das wissen. */ .laden { background: var(--tafel); padding-block: var(--luft); } .laden-vorspann { max-width: var(--lesen); } .laden-knopf { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem clamp(1rem, 2vw, 1.6rem); margin-block: clamp(1.5rem, 3vw, 2.25rem); } .laden-meta { font-size: .92rem; color: var(--leise); } .laden-hinweise { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); gap: clamp(1rem, 2.5vw, 2rem); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--linie); padding-top: clamp(1.5rem, 3vw, 2rem); } .laden-hinweise li { font-size: .95rem; line-height: 1.6; color: var(--leise); } .laden-hinweise b { display: block; color: var(--text); font-weight: 600; } .laden-nachsatz { margin-top: clamp(1.5rem, 3vw, 2rem); max-width: var(--lesen); font-size: .92rem; color: var(--leise); } /* --- Kennzeichnung KI-generierter Bilder ---------------------------------- Artikel 50 der KI-Verordnung verlangt seit August 2026, synthetische Inhalte als solche erkennbar zu machen. Die Kennzeichnung sitzt deshalb AM BILD und nicht als Fussnote unter der Seite. Zusaetzlich tragen die WebP-Dateien die Angabe in ihren eigenen Metadaten, damit sie ein einzeln gespeichertes Bild ueberlebt. Kontrast auf --nacht: --laub #D6F303 ergibt 15,1:1, weit ueber 4,5:1. */ .ki-tag { display: inline-block; margin-left: .4em; padding: .05em .4em; border: 1px solid currentColor; border-radius: 2px; font-size: .72em; font-style: normal; font-weight: 600; letter-spacing: .06em; vertical-align: .08em; opacity: .85; } .ki-marke { position: absolute; z-index: 2; top: clamp(.6rem, 1.5vw, 1.1rem); right: clamp(.6rem, 1.5vw, 1.1rem); margin: 0; padding: .3em .7em; border-radius: 999px; background: rgb(12 18 7 / .72); color: var(--auf-dunkel); font-size: .74rem; font-weight: 600; letter-spacing: .04em; /* Der Kopfbereich ist als aria-hidden gekennzeichnet, weil die Bilder dort rein schmueckend sind. Die Marke selbst muss trotzdem vorgelesen werden koennen, sonst faellt genau die Pflichtangabe unter den Tisch. */ } .held { position: relative; } /* Bezugsrahmen fuer .ki-marke--held */ /* Der Schlussstreifen und der Kopfbereich zeigen Bilder ohne eigene Bildunterschrift. Sie bekommen deshalb eine Marke am Rand der Flaeche statt eines Kuerzels je Bild. */ .aufruf { position: relative; } .ki-marke--streifen { top: auto; bottom: clamp(.6rem, 1.5vw, 1.1rem); } /* --- Challenge ----------------------------------------------------------- Der Abschnitt lag bisher als Nebensatz in einer Aufzaehlung. Die Challenge ist aber das groesste Stueck Funktion der App: Gruppen, Zeitraeume, waehlbare Kategorien, taeglicher Check-in, Rangliste, Wochensieger, Uhrenanbindung und eine eigene Freigabesteuerung. Kontrast auf --band #14170F: --auf-dunkel 16,9:1, --laub 14,4:1, --leise-dunkel 6,6:1. Alle ueber den geforderten 4,5:1. */ /* NICHT --band, SONST GIBT ES KEINE KANTE. Seit der Challenge-Abschnitt hinter "So sieht sie aus" steht (und nicht mehr am Seitenende), stossen zwei dunkle Abschnitte aneinander. Beide trugen var(--band), also exakt denselben Grund: 3822 und 2129 Pixel liefen ohne Trennung ineinander, fast 6000 Pixel am Stueck dunkel, und der Abschnitt las sich nicht mehr als eigenes Band. Dieselbe Paarung loest die Seite weiter oben schon so: .beweis steht auf --nacht, das folgende .band auf --band. Die Kontraste bleiben: #FAF7F0 auf #0C1207 ist 17,76:1, #D6F303 15,09:1, #C9C3B3 10,80:1 -- alle besser als auf --band. */ .wettbewerb { background: var(--nacht); color: var(--auf-dunkel); padding-block: var(--luft); } .wett-vorspann { max-width: var(--lesen); color: var(--leise-dunkel); font-size: 1.06rem; } .wett-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); margin-block: clamp(2rem, 5vw, 3.5rem); border-top: 1px solid rgb(250 247 240 / .18); padding-top: clamp(1.75rem, 4vw, 3rem); } .wett-block h3 { margin: 0 0 .5rem; font-family: var(--schrift-display); font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); color: var(--laub); } .wett-block p { margin: 0; font-size: .96rem; line-height: 1.62; color: var(--leise-dunkel); } /* Drei statt vier Aufnahmen: etwas breiter als in der App-Vorstellung. */ .schau--wett { grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); } .wett-nachsatz { margin-top: clamp(2rem, 4vw, 3rem); max-width: var(--lesen); font-size: .95rem; color: var(--leise-dunkel); border-left: 3px solid var(--koralle); padding-left: 1rem; } /* Ergebnis der E-Mail-Bestaetigung. Der Kasten erscheint nur, wenn der Link abgelaufen oder verbraucht war; sonst bleibt er ueber das hidden-Attribut verborgen. Kontrast --koralle #A83E37 auf --koralle-bg #FDF0EE: 6,1:1. */ .fehlerkasten { border-left: 3px solid var(--koralle); background: var(--koralle-bg); color: #7d2e28; padding: .9rem 1.1rem; margin: 0 0 1.2rem; max-width: var(--lesen); font-size: 1rem; line-height: 1.6; } /* --- Die App auf grossen Bildschirmen ------------------------------------ Die vier Telefonaufnahmen darueber zeigen nicht, dass die App das zusaetzliche Platzangebot eines Tablets auch nutzt. Diese beiden Bilder sind Aufnahmen aus der Chromebook-Reihe, also echtes Querformat, keine gestreckten Telefonbilder. Kontrast wie im uebrigen .app-Abschnitt: --leise-dunkel auf --nacht 11,2:1. */ .gross { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr)); gap: clamp(1rem, 2.5vw, 2rem); margin-top: clamp(2rem, 4vw, 3rem); } .gross-karte { margin: 0; } .gross-karte img { display: block; width: 100%; height: auto; border-radius: var(--r-gross); box-shadow: var(--schatten-tief); outline: 1px solid rgb(250 247 240 / .14); outline-offset: -1px; } .gross-karte figcaption { margin-top: .85rem; font-size: .92rem; line-height: 1.5; color: var(--leise-dunkel); } .gross-karte figcaption b { display: block; color: var(--laub); font-weight: 600; letter-spacing: .01em; } /* --- Sprachauswahl auf den Rechtstexten ----------------------------------- Schlichte Verweise statt Aufklappmenue: kein JavaScript, mit der Tastatur bedienbar, und eine Vorlesehilfe liest sie als das, was sie sind. Die aktuelle Sprache steht als Text da, nicht als Verweis auf sich selbst. Jeder Eintrag traegt lang und hreflang, damit die Sprachausgabe die Eigenbezeichnung richtig ausspricht. Kontrast --link #455409 auf --tafel #F1ECE0: 8,4:1. */ .sprachen { margin: 1.4rem 0 0; } .sprachen ul { display: flex; flex-wrap: wrap; gap: .35rem .9rem; margin: 0; padding: 0; list-style: none; font-size: .92rem; } .sprachen li { display: inline-flex; } .sprachen a { color: var(--link); } .sprachen [aria-current] { color: var(--text); font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .22em; } /* Rechtslaeufige Sprachen: der Textfluss dreht sich, das Raster nicht. */ [dir="rtl"] .sprachen ul { direction: rtl; } [dir="rtl"] .toc ol { padding-inline-start: 1.4em; } /* --------------------------------------------------------------- Sprachauswahl in der Kopfzeile Ein
statt eines nachgebauten Menues: mit der Tastatur bedienbar, ohne ein einziges Byte JavaScript, und von Vorlesehilfen als aufklappbarer Bereich angesagt. Das Panel wird absolut positioniert, damit es die Kopfzeile beim Aufklappen nicht auseinanderschiebt. inset-inline-end statt right, sonst haengt es auf der arabischen Seite auf der falschen Seite. --------------------------------------------------------------- */ /* margin-inline-start:auto schiebt den Knopf ans ENDE seiner Zeile -- auch dann, wenn die Leiste umbricht und er allein in der zweiten Zeile steht. Das ist der Kern der Loesung: liegt der Knopf immer am Zeilenende, darf das Klappfeld an ihm haengen bleiben und laeuft trotzdem nie aus dem Bild. .wordmark traegt zwar schon margin-right: auto, das wirkt aber nur innerhalb DERSELBEN Zeile. */ .sprachmenue { position: relative; margin-inline-start: auto; } .sprachmenue > summary { cursor: pointer; list-style: none; padding: .35rem .6rem; border: 1px solid var(--linie); border-radius: var(--r-gross); font-size: .9rem; white-space: nowrap; } .sprachmenue > summary::-webkit-details-marker { display: none; } .sprachmenue > summary::after { content: ""; display: inline-block; margin-inline-start: .4rem; border: .3em solid transparent; border-top-color: currentColor; transform: translateY(.15em); } .sprachmenue[open] > summary::after { transform: translateY(-.15em) rotate(180deg); } .sprachmenue > summary:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; } .sprachmenue > ul { /* Am Knopf ausgerichtet, buendig mit seiner Endkante. ZWEI ANLAEUFE, BEIDE FALSCH, DESHALB HIER NOTIERT: (1) Am Knopf verankert, aber ohne margin-inline-start:auto darueber. Auf dem Telefon bricht die Leiste um, der Knopf stand am ANFANG der zweiten Zeile, und das Feld hing 65 px links ausserhalb des Bildschirms -- arabisch spiegelverkehrt 85 px rechts. (2) Statt am Knopf an der ganzen Leiste ausgerichtet. Damit blieb es zwar im Bild, hing aber sichtbar neben seinem Knopf: Schalter links, Menue rechts. Ein Klappfeld, das nicht an seinem Schalter klebt, sieht kaputt aus. Richtig ist, den KNOPF ans Zeilenende zu schieben (siehe oben) und das Feld an ihm zu lassen. max-inline-size bleibt als Fangnetz fuer sehr schmale Fenster. */ position: absolute; top: 100%; inset-inline-end: 0; max-inline-size: calc(100vw - 2 * var(--rand)); /* Die Variablen zurueckholen. .masthead setzt --link und --fokus auf Laubgruen, weil das auf dem dunklen Band richtig ist. Dieses Klappfeld steht aber auf dem Grundton, und dieselbe Farbe kommt dort auf 1,18:1 -- weit unter den 4,5:1 der Stufe AA. --link-grund haelt den Wert der Palette, in hellem wie in dunklem Modus. */ --link: var(--link-grund); --fokus: var(--fokus-grund); /* EIGENE FARBEN, NICHT GEERBTE. Das Menue haengt in der dunklen Kopfleiste; dort ist die Linkfarbe --laub (#D6F303), weil sie auf dem dunklen Band 7,75:1 erreicht. Das Klappfeld darunter steht aber auf Creme, und dieselbe Farbe kommt dort auf 1,18:1 -- unlesbar und weit unter den 4,5:1, die Stufe AA verlangt. Deshalb hier die Farben fuer hellen Grund festschreiben. */ color: var(--text); z-index: 40; margin: .35rem 0 0; padding: .35rem; min-width: 11rem; list-style: none; background: var(--papier); border: 1px solid var(--linie); border-radius: var(--r-gross); box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .18); } .sprachmenue > ul > li { margin: 0; } .sprachmenue > ul a, .sprachmenue > ul span { color: var(--link); /* 8,17:1 auf Creme */ display: block; padding: .4rem .6rem; border-radius: var(--r); text-decoration: none; } .sprachmenue > ul a:hover { background: var(--tafel); text-decoration: underline; } .sprachmenue > ul a:focus-visible { outline: 3px solid var(--fokus); outline-offset: -2px; } /* Die laufende Sprache ist kein Verweis, sondern Text. Sie bekommt eine sichtbare Marke, damit die Auszeichnung aria-current auch fuer Leute erkennbar ist, die keine Vorlesehilfe benutzen. */ .sprachmenue > ul [aria-current="true"] { color: var(--text); /* 15,02:1 auf Creme */ font-weight: 600; background: var(--tafel); } .sprachmenue > ul [aria-current="true"]::before { content: "\2713\00a0"; } @media (max-width: 40rem) { .sprachmenue > summary { padding: .3rem .45rem; font-size: .82rem; } } /* ==================================================================== Der Weg in die Stores Ersetzt den frueheren Abschnitt "Direkt laden". Die Webseite bietet kein Installationspaket mehr an; stattdessen steht hier, wie weit die Freigabe der beiden Stores ist. DER ZUSTAND STECKT NICHT NUR IN DER FARBE. Jede Stufe traegt ihn ausgeschrieben daneben ("erreicht", "laeuft gerade", "steht noch aus"). Eine Kette, die allein ueber Farbe funktioniert, ist fuer jemanden mit Farbsehschwaeche keine Auskunft. ==================================================================== */ .stand { padding: var(--abschnitt) 0; } .stand-vorspann { max-width: 42rem; margin-bottom: 2.2rem; } .stand-nachsatz { max-width: 42rem; margin-top: 2rem; color: var(--text-matt); font-size: .95rem; } .stand-paar { display: grid; gap: 2.4rem; grid-template-columns: 1fr; } @media (min-width: 48rem) { .stand-paar { grid-template-columns: 1fr 1fr; gap: 3rem; } } .stand-spalte h3 { font-size: 1.05rem; letter-spacing: .04em; text-transform: uppercase; color: var(--text-matt); margin-bottom: 1rem; } .kette { list-style: none; margin: 0; padding: 0; counter-reset: stufe; } /* Der Kasten mit Adresse und QR-Code fuer den geschlossenen Test. */ .einstieg { margin-top: 1.6rem; padding: 1.1rem 1.2rem 1.2rem; border: 1px solid var(--linie); border-radius: var(--r-gross); background: var(--tafel); } .einstieg h4 { margin: 0 0 .5rem; font-size: 1.05rem; } .einstieg p { margin: 0 0 .7rem; } /* Eine Adresse bricht nicht von allein; ohne anywhere schiebt sie den Kasten ueber den Bildschirmrand. */ .einstieg-adresse { overflow-wrap: anywhere; font-size: .95rem; } .einstieg-qr { margin: 0 0 .7rem; display: flex; gap: .9rem; align-items: center; flex-wrap: wrap; } .einstieg-qr .qr { width: 8.5rem; height: 8.5rem; flex: none; border-radius: var(--r); } .einstieg-qr figcaption { font-size: .9rem; color: var(--text-matt); } .einstieg .klein { margin: 0; font-size: .88rem; color: var(--text-matt); } /* ZWEI SCHRITTE MIT NUMMER. Der erste Schritt -- sich ueberhaupt fuer die Alpha eintragen -- stand frueher als Nachsatz unter dem QR-Code, klein und ohne Verweis. Wer von oben las, bekam Schritt zwei zuerst und landete an einer Adresse, die ihn abweist. Die Nummern stehen im Markup, nicht als CSS-Zaehler: sie sind Inhalt. Kontrast der Nummernscheibe: #000000 auf --laub #D6F303 = 16,68:1. */ .einstieg-schritt { display: flex; gap: .85rem; align-items: flex-start; } .einstieg-schritt + .einstieg-schritt { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--linie); } .einstieg-schritt > div { min-width: 0; } .einstieg-nummer { flex: none; margin: 0; inline-size: 1.75rem; block-size: 1.75rem; border-radius: 999px; background: var(--laub); color: #000000; font-weight: 700; font-size: .95rem; line-height: 1.75rem; text-align: center; } .einstieg-titel { font-weight: 650; margin-bottom: .35rem !important; } .einstieg-schritt .tat { margin-top: .15rem; } .stufe { counter-increment: stufe; position: relative; padding: .7rem 0 .7rem 2.6rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem; } /* Der senkrechte Faden zwischen den Punkten. */ .stufe::after { content: ""; position: absolute; left: .81rem; top: 1.9rem; bottom: -.35rem; width: 2px; background: var(--linie); } .stufe:last-child::after { display: none; } .stufe::before { content: counter(stufe); position: absolute; left: 0; top: .55rem; width: 1.7rem; height: 1.7rem; border-radius: 50%; font-size: .8rem; line-height: 1.7rem; text-align: center; font-variant-numeric: tabular-nums; border: 2px solid var(--linie); background: var(--grund); color: var(--text-matt); } .stufe--fertig::before { content: "✓"; border-color: var(--laub); background: var(--laub); color: var(--grund); font-weight: 700; } .stufe--laeuft::before { border-color: var(--laub); color: var(--laub); } .stufe-name { font-weight: 600; } .stufe--offen .stufe-name { color: var(--text-matt); font-weight: 400; } .stufe-zustand { font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-matt); } .stufe--laeuft .stufe-zustand { color: var(--laub); font-weight: 700; } .stufe-name a { font-weight: 700; } /* ================================ GESCHLOSSENE ALPHA UND SPONSORING ==== */ /* Das Band steht direkt unter dem Kopfbereich und ist dunkel wie die Abschnitte "Die App" und "Zahlen": auf cremefarbenem Grund waere es ein Absatz unter vielen, und genau das soll es nicht sein. */ .alphaband { background: var(--band); color: var(--auf-dunkel); padding-block: clamp(2.6rem, 6vw, 4.4rem); } .alphaband h2 { font-family: var(--schrift-display); font-size: clamp(1.45rem, 3.2vw, 2.1rem); line-height: 1.2; margin: .45rem 0 0; max-width: 26ch; } .alphaband .alphaplaetze { color: var(--laub); } .alpha-satz { max-width: var(--lesen); margin: .9rem 0 0; color: var(--leise-dunkel); } /* Der Knopf ist laubgruen und traegt Text nur auf dunklem Grund. Auf den hellen Unterseiten braucht er deshalb dieselbe Umkehrung wie .cta. */ .wrap .tat { background: var(--band); color: var(--auf-dunkel); } .wrap .tat:hover { background: #33481f; } /* Die Aenderungsseite: Fassung, Datum, dann zwei kurze Listen. */ .aend-datum { font-weight: 400; font-size: .8em; color: var(--leise); } article h3.aend-neu, article h3.aend-behoben { font-size: 1rem; letter-spacing: .05em; text-transform: uppercase; margin: 1.4rem 0 .2rem; } article h3.aend-neu { color: var(--laub-text); } article h3.aend-behoben { color: var(--leise); } .platzstand { font-size: 1.05rem; } .platzstand strong { color: var(--laub-text); } /* --- Das Anmeldeformular ----------------------------------------------- */ .formularseite form { max-width: var(--lesen); margin-block: 1.4rem 1.8rem; } .formularseite fieldset { border: 1px solid var(--linie); border-radius: var(--r-gross); padding: .8rem 1.1rem 1rem; margin: 0 0 1.3rem; } .formularseite legend { font-weight: 650; padding-inline: .35rem; } .wahl { margin: .4rem 0; } /* Kaestchen und Text nebeneinander, der Text als EIN Element. Ohne das umschliessende macht Flexbox aus jedem Textstueck und aus dem Link darin je ein eigenes Kaestchen: der Link "Datenschutzerklaerung" stand dann als schmale Saeule Silbe unter Silbe. */ .wahl label, .feld--haken label { display: flex; gap: .6rem; align-items: baseline; cursor: pointer; } .feld--haken label > input { flex: none; } .feld--haken label > span { flex: 1; } .feld { display: grid; gap: .35rem; margin: 0 0 1.3rem; } .feld > label { font-weight: 650; } /* Die Einwilligung ist ein Satz, keine Feldbeschriftung: normal gesetzt, sonst steht der laengste Text des Formulars auch noch fett da. MUSS hinter ".feld > label" stehen: beide Regeln wiegen gleich schwer, und bei Gleichstand gewinnt die spaetere. */ .feld--haken > label { font-weight: 400; } .feld input[type="email"], .feld textarea { font: inherit; color: var(--text); background: var(--papier); border: 1px solid var(--linie-stark); border-radius: var(--r); padding: .6rem .7rem; inline-size: 100%; } .feld textarea { resize: vertical; min-block-size: 4.5rem; } .feld input:focus-visible, .feld textarea:focus-visible, .wahl input:focus-visible, .feld--haken input:focus-visible { outline: 2px solid var(--fokus-grund); outline-offset: 2px; } .hinweis { font-size: .9rem; color: var(--leise); } button.tat { font: inherit; font-weight: 650; cursor: pointer; border: 2px solid transparent; } button.tat[disabled] { opacity: .5; cursor: not-allowed; } button.tat[disabled]:hover { background: var(--band); transform: none; } .pruefstand { min-block-size: 1.5em; font-size: .95rem; color: var(--leise); margin: 0 0 .5rem; } /* Der Honigtopf. NICHT display:none und NICHT hidden: beides sehen Skripte genauso leicht wie ein Mensch und lassen das Feld dann in Ruhe. Aus dem Sichtfeld geschoben ist es fuer ein Skript ein Feld wie jedes andere. aria-hidden am Absatz haelt es aus der Vorlesereihenfolge, tabindex="-1" am Feld aus der Tabulatorreihenfolge. */ .honigtopf { position: absolute; inline-size: 1px; block-size: 1px; inset-inline-start: -9999px; overflow: hidden; } /* ============================== VERWALTUNG DER WARTELISTE ==== Nur auf der passwortgeschuetzten Seite sichtbar. Die Regeln stehen hier und nicht als