/* ==========================================================================
   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    #26351A auf Papier 12,22   auf Tafel 11,09
     Link     #2F5417 auf Papier  8,17   auf Tafel  7,42
     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    #2F5417 auf Papier  8,17
     Gruen auf Creme #456C1B auf Papier 5,75   auf Tafel 5,22
     Knopftext #14200B auf Laubgruen #A5D66E  10,03

   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
     Laub     #A5D66E auf Papier 10,90   auf Tafel  9,94
     Koralle  #F2857F auf Papier  7,39   auf Tafel  6,74
     Fokus    #A5D66E auf Papier 10,90

   DUNKELGRUENES BAND  hell #26351A, dunkel #1E2B12
     #FAF7F0  12,22 / 13,93     #A5D66E  7,75 / 8,83
     #D8D3C4   8,74 / 9,96      #F2857F  5,25 / 5,99

   NACHTGRUND der Bestandsseite  hell #0C1207, dunkel #070A05
     #FAF7F0  17,76 / 18,61     #A5D66E 11,26 / 11,80
     #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   #A5D66E 10,19   #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   #A5D66E  8,72   #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   #A5D66E  6,96
       (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 #26351A  7,28   auf #1E2B12  8,29
     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
   GRUENE SCHRIFT AUF CREME: #456C1B auf #FAF7F0 5,75, auf #F1ECE0 5,22.
   Laubgruen #A5D66E traegt auf Creme nur 1,9:1 und steht dort nie als Text.
   ========================================================================== */

/* --------------------------------------------------------------- Merkmale */

:root {
  --papier:      #FAF7F0;
  --tafel:       #F1ECE0;
  --nacht:       #0C1207;
  --band:        #26351A;
  --text:        #1B2411;
  --leise:       #4A5A38;
  --marke:       #26351A;
  --link:        #2F5417;
  --laub:        #A5D66E;   /* traegt Text nur auf dunklem Grund */
  --laub-text:   #456C1B;   /* dieselbe Familie, aber satt genug fuer Text auf Creme */
  --koralle:     #A83E37;
  --koralle-bg:  #FDF0EE;
  --linie:       #DDD6C6;
  --linie-stark: #C6BDA8;
  --fokus:       #2F5417;
  --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:        #1E2B12;
    --text:        #EDE8DC;
    --leise:       #B9B3A3;
    --marke:       #A5D66E;
    --link:        #A5D66E;
    --laub-text:   #A5D66E;
    --koralle:     #F2857F;
    --koralle-bg:  #2A241C;
    --linie:       #2E3823;
    --linie-stark: #46523A;
    --fokus:       #A5D66E;
    --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:        #1E2B12;
  --text:        #EDE8DC;
  --leise:       #B9B3A3;
  --marke:       #A5D66E;
  --link:        #A5D66E;
  --laub-text:   #A5D66E;
  --koralle:     #F2857F;
  --koralle-bg:  #2A241C;
  --linie:       #2E3823;
  --linie-stark: #46523A;
  --fokus:       #A5D66E;
  --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: #14200B; font-weight: 650;
  padding: .42rem .95rem; border-radius: 999px; border-bottom: 0;
  white-space: nowrap;
}
.masthead nav a.zur-app:hover { background: #B7E184; color: #14200B; }
@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; }

.wrap { max-width: 36rem; margin: 0 auto; padding: 2.6rem var(--rand) 3.2rem; }
.wrap.wide { max-width: 58rem; }

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: #14200B;                 /* 10,03: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: #B7E184; 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;
}

/* --- 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);  /* 7,75 / 8,83 */
}
.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; }                        /* 7,7:1 auf #26351A */
.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;
}
.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 #A5D66E ergibt 9,8: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 #26351A: --auf-dunkel 11,9:1, --laub 7,1:1,
   --leise-dunkel 6,6:1. Alle ueber den geforderten 4,5:1.               */
.wettbewerb { background: var(--band); 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 #2F5417 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; }