/* ============================================================
   MARVIN.WEB Mix M3 "Pixel traegt" (05.10.2026)
   Das Handy ist die Anzeigetafel (Vorlage C2). Grundzustand dieses Stylesheets ist das Handy (390 x 844),
   alles Groessere kommt per min-width dazu; der Desktop ist eigens komponiert (ab 1024 px).

   Grammatik: stehendes Feld, das sich umordnet. Ein Feld aus MW-Kacheln steht fixiert hinter der Seite
   (vom Skript gebaut, aria-hidden). Jede Station ist ein Geraet aus drei Teilen:
     oben die Anzeige: eine Ziffer fuellt das Feld (nur 790 und 1,8, dazu im Check die Zahl der geprueften Seite)
     die Linie bei 58svh: die Oberkante der Tafel, ein Massband, dessen Fuellung der Weg der Seite ist
     unten die Tafel: Zusage, Stapel und Knoepfe, im Daumenbereich
   Die naechste Tafel steigt von unten VOR die alte und rastet an derselben Linie ein; ihre Ansage zieht dabei durch
   die Anzeige nach oben und schaltet Zeile fuer Zeile die neue Ziffer frei. Ab den Paketen loest sich die Tafel von
   der Linie und wird zur Seite; im Fuss steigt die letzte Tafel wieder an die Linie, der Pixel kehrt heim.
   Physik: Kacheln schalten stufig (keine transition); nur der Pixel gleitet je 14-px-Stufe (js/pixel-reise.js).

   Kontraste (WCAG 2.x, NUR die Paare aus dem Kopf von basis.css):
     Kreide auf Teer 16,30 · Papier auf Teer 14,37 · Muted-dunkel auf Teer 6,02 · Signal auf Teer 4,60
     Teer auf Signal 4,60 (Pixel-Knopf, Hauptknopf auf Teer, leuchtende Ziffer in der Kennzahl)
     Auf Kreide (Karten, Blatt, Kontakt): Teer 16,30 · #b53507 5,36 · Muted 4,98 · Kreide auf #b53507 5,36
     Leuchtende Kacheln stehen NIE unter Text: Ansagen tragen Teer-Grund, und das Skript schaltet Kacheln hinter
     ihnen aus. Kleine Signal-Schrift steht immer auf eigener Teer-Flaeche.

   Skalierung: Laengen in rem (1rem = 10px am Anker), Breakpoints in px, Rahmen bis 2px in px. Hoehen in svh.
   ============================================================ */

:root{
  --leiste:5.6rem;                       /* Zeile der Daumenleiste */
  --streifen:2.2rem;                     /* Streifen mit der wachsenden Wortmarke, oben IN der Leiste */
  --safe-u:env(safe-area-inset-bottom, 0px);
  --unten:calc(var(--leiste) + var(--streifen) + var(--safe-u));
  --knopf-px:5.6rem;                     /* der Pixel als Knopf */
  /* Die Linie: fest bei 58svh; nur wenn die hoechste Tafel darunter keinen Platz hat, rueckt sie hoeher
     (Safari mit Leisten, 390 x 664). --tafel-min misst das Skript nach, der Wert hier ist die Schaetzung ohne Skript. */
  --tafel-min:27rem;
  --linie:min(58svh, calc(100svh - var(--unten) - var(--tafel-min)));
  --tafel-h:calc(100svh - var(--linie) - var(--unten));
  --zelle:4.333rem;                      /* vom Skript gesetzt: Breite einer Kachel, zugleich Teilung des Massbands */
  /* h1: laengstes Wort ANFRAGEN = 7,42 em */
  --h1:min(clamp(3.4rem, calc((100vw - 2 * var(--gutter)) / 7.7), 13rem), calc(100svh / 8.6));
  --px:calc(var(--h1) * .2465);          /* Punkt der Wortmarke = 0,2465 em */
  /* h2: laengstes Wort VERKAUFEN. = 8,55 em */
  --h2:clamp(2.8rem, calc((100vw - 2 * var(--gutter)) / 9.4), 6.4rem);
  --rand:var(--teer-2);
  --rein-l:max(var(--gutter), env(safe-area-inset-left, 0px));
  --rein-r:max(var(--gutter), env(safe-area-inset-right, 0px));
  /* Stapel (aus B2): die Form der Wortmarke, das A schneidet dem M die rechte untere Ecke ab */
  --fuge-b:.8rem;
  --biss:2.4rem;
}

html{scroll-padding-bottom:calc(var(--unten) + 1.6rem);background:var(--teer)}
body{background:var(--teer);color:var(--kreide)}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-left:var(--rein-l);padding-right:var(--rein-r)}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.nw{white-space:nowrap}
main,.fuss{position:relative;z-index:1}
html:not(.js-motion) .nur-motion{display:none}

/* ---------- Das Feld (vom Skript erzeugt, aria-hidden) ---------- */
.kachelfeld{position:fixed;left:0;top:0;z-index:0;pointer-events:none;display:block;overflow:hidden}
/* Ziffer und Figur: volles Signal-Quadrat, das MW darin in Teer ausgespart (liest sich auf Armlaenge als Zahl).
   Ruhe-Tafel im Fuss: nur das Zeichen leuchtet, wie unten rechts auf der CI-Tafel. Entscheidung aus C2. */
.kachelfeld .an{--k-an:var(--signal);--k-zeichen:var(--teer)}
.kachelfeld .an-z{--k-zeichen:var(--signal)}

/* ---------- Grundtypo ---------- */
.label{display:inline-block;font-family:var(--mono);font-weight:500;font-size:1.25rem;letter-spacing:.06em;text-transform:uppercase;line-height:1.4;color:var(--signal);background:var(--teer);padding:.2rem .5rem;margin-left:-.5rem}
.label--hell{color:var(--signal-text);background:transparent}
h2.disp{font-size:var(--h2);margin-top:1rem}
h2.disp--lang{font-size:min(var(--h2), calc((100vw - 2 * var(--gutter)) / 9.9))}
h3{font-family:var(--body);font-weight:800;font-size:2rem;line-height:1.2;letter-spacing:-.005em}
.lead{font-size:1.8rem;line-height:1.5;max-width:54ch;margin-top:1.6rem}
.klein{font-size:1.6rem;line-height:1.5;color:var(--muted-d);max-width:72ch}
.beleg{color:var(--muted-d);font-size:1.2rem}
p,li,dd,summary,figcaption,.beleg{text-wrap:pretty}
h3,.lead,.held__unter,.ich__zitat p{text-wrap:balance}
p a,.kontakt__mail a,li a{text-underline-offset:.2em;text-decoration-thickness:2px}
p a:hover{color:var(--signal)}
.kreide p a:hover,.blatt p a:hover{color:var(--signal-text)}

.pfeil{display:inline-flex;align-items:center;gap:.8rem;font-family:var(--mono);font-weight:500;font-size:1.3rem;letter-spacing:.05em;text-transform:uppercase;color:var(--kreide);text-decoration:none;padding:1.2rem 0 .6rem;box-shadow:inset 0 -2px 0 var(--signal);min-height:4.4rem}
.pfeil::after{content:"\2192";color:var(--signal)}
.pfeil:hover{color:var(--signal)}

/* ---------- Knoepfe: schalten, gleiten nicht ---------- */
.knoepfe{display:flex;flex-wrap:wrap;gap:1.2rem}
.knopf{display:inline-flex;align-items:center;justify-content:center;min-height:5.2rem;padding:1.2rem 2.2rem;font-family:var(--mono);font-weight:500;font-size:1.4rem;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;border:2px solid transparent;cursor:pointer;line-height:1.2;text-align:center}
.knopf--haupt{background:var(--signal);color:var(--teer);border-color:var(--signal)}
.knopf--neben{background:var(--teer);color:var(--kreide);border-color:var(--kreide)}
.knopf:active{transform:translate(2px,2px)}
.knopf:disabled{cursor:progress;transform:none;box-shadow:none}
.kreide .knopf--haupt,.blatt .knopf--haupt{background:var(--signal-text);border-color:var(--signal-text);color:var(--kreide)}
.kreide .knopf--neben,.blatt .knopf--neben{background:transparent;color:var(--teer);border-color:var(--teer)}
@media (hover:hover){
  .knopf:hover{transform:translate(-3px,-3px);box-shadow:3px 3px 0 var(--papier)}
  .knopf--neben:hover{box-shadow:3px 3px 0 var(--signal)}
  .kreide .knopf:hover,.blatt .knopf:hover{box-shadow:3px 3px 0 var(--teer)}
}

/* ---------- Kopf: am Handy nur die Wortmarke, sie scrollt mit weg ---------- */
.kopf{position:absolute;inset:0 0 auto 0;z-index:5}
.kopf__innen{max-width:var(--wrap);margin-inline:auto;padding:calc(env(safe-area-inset-top, 0px) + 1.6rem) var(--rein-r) 0 var(--rein-l);display:flex;align-items:center;gap:2rem}
.kopf__marke{display:block;flex:none;color:var(--papier);margin-right:auto;padding:.6rem 0}
.kopf__marke .wm{height:1.8rem;width:auto}
.kopf__nav{display:none}

/* ---------- Daumenleiste: Streifen mit der wachsenden Wortmarke, darunter alles Tippbare ---------- */
.leiste{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--teer);padding-bottom:var(--safe-u)}
.leiste__streifen{display:flex;align-items:flex-end;height:var(--streifen);padding:0 var(--rein-r) 0 var(--rein-l);pointer-events:none;color:var(--papier)}
.leiste__streifen .wm{display:block;height:1.1rem;width:auto}
.leiste__zeile{position:relative;display:flex;align-items:center;gap:1.2rem;height:var(--leiste);padding:0 var(--rein-r) 0 var(--rein-l)}
.leiste__liste{flex:1;display:flex;min-width:0;margin-left:-1rem}
.leiste__liste li{flex:1 1 0;min-width:0}
.leiste__eintrag{display:flex;align-items:center;justify-content:center;width:100%;min-height:4.8rem;padding:0 .2rem;background:none;border:0;font-family:var(--mono);font-weight:500;font-size:1.2rem;letter-spacing:.05em;text-transform:uppercase;color:var(--kreide);text-decoration:none;cursor:pointer;white-space:nowrap}
.leiste__eintrag:hover{box-shadow:inset 0 -2px 0 var(--signal)}
.leiste__eintrag:focus-visible{outline-offset:-3px}
.leiste__menue[aria-expanded="true"]{color:var(--signal)}
.js .leiste__menue-link{display:none}
.leiste__platz{flex:none;width:var(--knopf-px);height:var(--knopf-px);box-shadow:inset 0 0 0 2px var(--muted-d)}
/* Der Pixel als Knopf: liegt auf seinem Platz; mit Bewegung faehrt er vom Punkt der h1 dorthin */
.pixelknopf{position:absolute;right:var(--rein-r);top:calc((var(--leiste) - var(--knopf-px)) / 2);width:var(--knopf-px);height:var(--knopf-px);display:flex;align-items:flex-end;padding:.5rem .6rem;background:var(--signal);color:var(--teer);font-family:var(--mono);font-weight:500;font-size:1.2rem;letter-spacing:.04em;text-transform:uppercase;line-height:1;text-decoration:none;transform-origin:50% 50%;z-index:2}
.pixelknopf:focus-visible{outline-color:var(--papier)}
.pixelknopf.unterwegs .pixelknopf__text{visibility:hidden}
.pixelknopf.unterwegs{pointer-events:none}
/* Tastatur: wer den Knopf fokussiert, bekommt ihn sofort an seinem Platz */
.pixelknopf:focus-visible{transform:none !important;pointer-events:auto}
.pixelknopf:focus-visible .pixelknopf__text{visibility:visible !important}
@media (hover:hover){.pixelknopf:hover{box-shadow:3px 3px 0 var(--papier)}}
/* Beim Tippen in ein Feld verschwindet die Leiste (die Tastatur braucht den Platz) */
@media (max-width:1023px){.tippt .leiste{visibility:hidden}}

/* ---------- Menue als Blatt von unten ---------- */
.menue{position:fixed;left:0;right:0;bottom:var(--unten);z-index:19;display:grid;gap:1.6rem;align-content:start;max-height:calc(100svh - var(--unten) - 6.4rem);overflow-y:auto;overscroll-behavior:contain;padding:2.4rem var(--rein-r) 2.4rem var(--rein-l);background:var(--teer);box-shadow:0 -2px 0 var(--teer-2)}
.menue[hidden]{display:none}
.menue:focus{outline:none}
.menue__liste a{display:flex;align-items:center;min-height:5.2rem;font-family:var(--mono);font-weight:500;font-size:2.6rem;letter-spacing:.02em;text-transform:uppercase;text-decoration:none;color:var(--kreide)}
.menue__liste a::before{content:"";flex:none;width:1rem;height:1rem;margin-right:1.4rem;box-shadow:inset 0 0 0 2px var(--muted-d)}
.menue__liste a:hover::before,.menue__liste a:focus-visible::before{background:var(--signal);box-shadow:none}
.menue__check{justify-self:start;margin-top:.8rem}
.menue__meta{color:var(--muted-d)}
.menue__meta a{color:var(--kreide)}
.blatt-offen main,.blatt-offen .kopf,.blatt-offen .fuss{visibility:hidden}
.check-offen .leiste{visibility:hidden}

/* ============================================================
   STATIONEN, Grundzustand (ohne JS, Ruhefassung, Handy quer): normaler Fluss
   Ansage, darunter die Tafel mit ihrer eigenen Linie oben, alle Bilder untereinander.
   ============================================================ */
.station{position:relative}
.anzeige{position:relative}
.ansage{position:relative;padding:8rem var(--rein-r) 2.4rem var(--rein-l);background:var(--teer)}
.ansage__lead{margin-top:1.2rem;font-size:1.6rem;line-height:1.45;color:var(--kreide);max-width:46ch}
.tafel{position:relative;background:var(--teer);padding:2.8rem var(--rein-r) 3.2rem var(--rein-l)}
.tafel__stapel{display:grid;gap:3.2rem}
.bild{min-width:0}
.bild > * + *{margin-top:1rem}
.bild__text > * + *{margin-top:.8rem}
.bild__text > .beleg{margin-top:1rem}
.halt{display:none}
.tafel--deck{padding-left:0;padding-right:0}

/* ---------- Die Linie: Massband an der Oberkante jeder Tafel ----------
   Grundlinie in Papier, grosse Teilstriche je Kachel (die Teilung ist das Feld), kleine je Fuenftel.
   Die Fuellung in Signal ist der Weg der Seite; an zwei Stationen wird das Band zur Skala (Tage, Sekunden). */
.band{position:absolute;left:0;right:0;top:0;height:1.5rem;pointer-events:none;
  --strich:var(--muted-d);
  background:
    linear-gradient(var(--papier),var(--papier)) 0 0/100% .3rem no-repeat,
    repeating-linear-gradient(90deg,var(--strich) 0 2px,transparent 2px var(--zelle)) 0 .3rem/100% 1.2rem no-repeat,
    repeating-linear-gradient(90deg,var(--strich) 0 1px,transparent 1px calc(var(--zelle) / 5)) 0 .3rem/100% .6rem no-repeat}
.band__weg{position:absolute;left:0;top:-.1rem;width:100%;height:.5rem;background:var(--signal);transform-origin:0 50%;transform:scaleX(0)}
.band--skala{height:3.4rem}
.weg--tage .band{background:
    linear-gradient(var(--papier),var(--papier)) 0 0/100% .3rem no-repeat,
    repeating-linear-gradient(90deg,var(--strich) 0 2px,transparent 2px 20%) 0 .3rem/100% 1.2rem no-repeat,
    repeating-linear-gradient(90deg,var(--strich) 0 1px,transparent 1px 4%) 0 .3rem/100% .6rem no-repeat}
.weg--sekunden .band{background:
    linear-gradient(var(--papier),var(--papier)) 0 0/100% .3rem no-repeat,
    linear-gradient(var(--signal),var(--signal)) 62.5% .3rem/2px 1.6rem no-repeat,
    repeating-linear-gradient(90deg,var(--strich) 0 2px,transparent 2px 25%) 0 .3rem/100% 1.2rem no-repeat,
    repeating-linear-gradient(90deg,var(--strich) 0 1px,transparent 1px 6.25%) 0 .3rem/100% .6rem no-repeat}
.band__skala{position:absolute;left:0;right:0;top:1.6rem;height:1.6rem}
.band__skala li{position:absolute;top:0;font-family:var(--mono);font-weight:500;font-size:1.2rem;line-height:1.3;letter-spacing:.03em;color:var(--muted-d);white-space:nowrap}
.band__skala--tage li{left:calc(var(--i) * 20% + .5rem)}
.band__skala--tage li:nth-child(1){--i:0}.band__skala--tage li:nth-child(2){--i:1}.band__skala--tage li:nth-child(3){--i:2}.band__skala--tage li:nth-child(4){--i:3}.band__skala--tage li:nth-child(5){--i:4}
.band__skala--sekunden li{left:calc(var(--x) * 1% + .5rem)}
.band__skala--sekunden li:nth-child(2),.band__skala--sekunden li:nth-child(3){display:none}
.band__skala--sekunden li:last-child{left:auto;right:.6rem}
.band__skala li.band__marke{left:auto;right:calc(37.5% + .5rem);color:var(--kreide)}
.tafel:has(.band--skala){padding-top:4.4rem}

/* ============================================================
   STATIONEN mit Bewegung (Handy hoch, Tablet, Desktop): das Geraet
   Weg = Linie + Tafel + Halt + Rest. Jeder Weg beginnt um seinen Halt nach dem vorigen, alle enden gemeinsam am
   Ende des Geraets (Rest = Halt der folgenden Stationen). So steigt die neue Tafel von unten VOR die alte und rastet
   an der Linie ein, die alten bleiben verdeckt darunter kleben und fahren erst mit der letzten Tafel gemeinsam ab.
   Die Ansage der neuen Station liegt UNTER den Tafeln: sie taucht erst an der Linie aus der alten Tafel auf.
   ============================================================ */
@media (min-height:560px){
  .js-motion .weg{position:relative}
  .js-motion .weg--folgt{margin-top:calc(-100svh - var(--rest-vor, 0px))}
  .js-motion .anzeige{z-index:1;height:var(--linie);display:flex;flex-direction:column;justify-content:flex-end}
  .js-motion .ansage{padding-top:1.6rem;padding-bottom:2rem}
  .js-motion .tafel{position:sticky;z-index:2;top:var(--linie);height:var(--tafel-h);display:flex;flex-direction:column;padding-top:2.4rem;padding-bottom:1.2rem;
    /* unter der Tafel bleibt es Teer, auch wenn Safari unten die Leiste einklappt */
    box-shadow:0 40vh 0 var(--teer)}
  .js-motion .tafel--deck{padding-bottom:.4rem}
  .js-motion .tafel:has(.band--skala){padding-top:4rem}
  .js-motion .tafel__stapel{flex:1;min-height:0;display:grid;gap:0}
  .js-motion .tafel__stapel > .bild{grid-area:1 / 1}
  .js-motion .tafel__stapel > .bild + .bild{clip-path:inset(0 0 100% 0)}
  .js-motion .halt{display:block;height:calc(var(--halt, 60svh) + var(--rest, 0px) + var(--unten))}
  /* Messen: natuerliche Hoehe der Tafeln (das Skript schaltet das kurz an) */
  .js-motion.messen .tafel{height:auto;position:relative;top:auto}
  .js-motion .tafel--deck .deck,.js-motion .tafel--deck .deck-spur{flex:1 1 auto;min-height:0}
  .js-motion.messen .tafel--deck .deck,.js-motion.messen .tafel--deck .deck-spur{flex:none}
}

/* ---------- 1 Hero ---------- */
.ansage--held{padding-top:7.2rem}
.held__titel{font-size:var(--h1);margin-top:1rem;color:var(--kreide)}
.held__bild > * + *{margin-top:1.2rem}
.held__unter{font-weight:800;font-size:2rem;line-height:1.25;color:var(--papier)}
.held__lauf{font-size:1.6rem;line-height:1.45;max-width:46ch}
.held__knoepfe{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.6rem}
.held__knoepfe .knopf{flex:1 1 auto;padding-inline:1.4rem}
.held__knoepfe .pfeil{letter-spacing:.03em}
@media (max-width:599px){.held__lauf-zwei{display:none}}
.belegzeile{color:var(--muted-d);font-size:1.2rem}

/* Der Punkt der h1: ein Signal-Quadrat (das echte Satzzeichen steht fuer Screenreader daneben) */
.slot--h1{display:inline-block;width:var(--px);height:var(--px);margin-left:.07em;vertical-align:baseline;background:var(--signal)}
/* Sobald der Pixel reist, zeigt sein Platz ein Loch, bis er wieder da ist */
.pixel-aktiv .slot--h1{background:transparent;box-shadow:inset 0 0 0 2px var(--muted-d)}
.pixel-aktiv .fuss__punkt{fill:transparent;stroke:var(--muted-d);stroke-width:2px;vector-effect:non-scaling-stroke}
.pixel-aktiv.pixel-daheim .fuss__punkt{fill:var(--signal);stroke:none}

/* ---------- Kennzahl: die ganze Zahl als echter Text; die Ziffer, die das Feld gerade zeigt, ist markiert ---------- */
.kennzahl{display:flex;align-items:baseline;flex-wrap:wrap;font-family:var(--mono);font-weight:500;font-size:3.6rem;line-height:1;color:var(--papier)}
.kennzahl .z{display:inline-block;min-width:.62em;padding:.12em .04em;text-align:center}
.kennzahl__einheit{font-size:.42em;letter-spacing:.04em;color:var(--muted-d)}
.kennzahl__name{align-self:center;margin-right:1.2rem;font-size:1.2rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted-d)}
.z.ist-an{background:var(--signal);color:var(--teer)}
.bild--zahl .bild__text h3{margin-top:0}

/* Messwerte (Beleg): Zahl und Name in einer Zeile, zwei Spalten */
.werte{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem 1.6rem}
.wert{display:flex;align-items:baseline;gap:.8rem;min-width:0}
.wert__n{font-family:var(--mono);font-weight:500;font-size:2.8rem;line-height:1;color:var(--kreide);font-variant-numeric:tabular-nums}
.wert__name{font-family:var(--mono);font-weight:500;font-size:1.2rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted-d);min-width:0;overflow-wrap:anywhere}
.tafel__zeile{color:var(--kreide);font-size:1.6rem;line-height:1.45}
.bild--check .knopf{margin-top:1.4rem}

/* ============================================================
   DER STAPEL (aus B2): Karten zum seitlichen Wischen, jede schiebt sich mit dem Schnitt aus dem Logo VOR die vorige.
   Ohne JS und in der Ruhefassung: eine normale, seitlich scrollbare Liste.
   ============================================================ */
.deck{position:relative;container-type:inline-size;display:flex;flex-direction:column;--sektion:var(--teer);
  --rand:var(--rein-l);--innen:calc(100cqi - 2 * var(--rand));--karte-b:calc(var(--innen) * .92)}
.deck-spur{position:relative;display:flex;align-items:stretch;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--rand);padding:1.2rem var(--rand) .4rem;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.deck-spur::-webkit-scrollbar{display:none}
/* links bleibt nur die Freistellkante der vordersten Karte sichtbar, keine Reste der zurueckgebliebenen */
.js-motion .deck-spur{clip-path:inset(-2rem 0 -2rem calc(var(--rand) - var(--fuge-b)))}
.deck-spur::after{content:"";flex:0 0 calc(100cqi - var(--rand) - var(--karte-b) - var(--rand));min-width:1px}
.slot{position:relative;flex:0 0 var(--karte-b);display:flex;scroll-snap-align:start;scroll-snap-stop:always;outline:none}
.slot+.slot{margin-left:calc(-1 * var(--biss))}
.slot:nth-child(1){z-index:1}.slot:nth-child(2){z-index:2}.slot:nth-child(3){z-index:3}.slot:nth-child(4){z-index:4}
.deck .karte{position:relative;isolation:isolate;flex:1 1 auto;display:flex;flex-direction:column;padding:1.4rem 1.8rem 1.4rem 1.6rem;color:var(--teer);--flaeche:var(--kreide)}
/* Flaeche und Freistellkante als zwei Ebenen mit derselben Form; die Kante liegt eine Kante nach links versetzt in der
   Farbe der Tafel und schneidet der vorigen Karte die Ecke ab. --form steht am Element selbst. */
.karte{--form:polygon(var(--kerbe,0px) 0, 100% 0, 100% 100%, 0 100%, var(--kerbe,0px) calc(100% - 2 * var(--kerbe,0px)))}
.karte::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--flaeche);clip-path:var(--form)}
.slot+.slot .karte{--kerbe:calc(var(--biss) + var(--fuge-b));padding-left:calc(var(--kerbe) + 1.2rem)}
.slot+.slot .karte::before{content:"";position:absolute;top:0;bottom:0;left:calc(-1 * var(--fuge-b));right:var(--fuge-b);z-index:-2;background:var(--sektion);clip-path:var(--form)}
.slot:focus-visible{outline:3px solid var(--signal);outline-offset:-3px}
.karte-inhalt{flex:1 1 auto;display:flex;flex-direction:column;gap:.6rem;position:relative}
.deck .karte{clip-path:polygon(calc(var(--kerbe,0px) - var(--fuge-b)) -4rem, calc(100% + 4rem) -4rem, calc(100% + 4rem) calc(100% + 4rem), calc(-1 * var(--fuge-b)) calc(100% + 4rem), calc(-1 * var(--fuge-b)) 100%, calc(var(--kerbe,0px) - var(--fuge-b)) calc(100% - 2 * var(--kerbe,0px)))}
.karte h3{color:var(--teer)}
.karte p,.karte li{font-size:1.6rem;line-height:1.45}
.karte-inhalt > p{color:var(--muted)}

/* Steuerung unter dem Stapel, im Daumenbereich: Zaehlung in Mono, Vor/Zurueck */
.deck-steuer{display:flex;align-items:center;justify-content:space-between;gap:1.6rem;min-height:4.4rem;padding:0 var(--rand)}
.deck-zahl{color:var(--muted-d);font-size:1.3rem}
.deck-ist{font-weight:500;color:var(--kreide)}
.js .deck-ohnejs{display:none}
.deck-knoepfe{display:flex;gap:.8rem}
.deck-knopf{display:grid;place-items:center;width:4.4rem;height:4.4rem;padding:0;background:var(--kreide);color:var(--teer);border:0;cursor:pointer}
.deck-knopf svg{width:1.6rem;height:1.6rem;fill:currentColor}
.deck-zurueck svg{transform:scaleX(-1)}
.deck-knopf:hover{box-shadow:3px 3px 0 var(--signal);transform:translate(-2px,-2px)}
.deck-knopf[aria-disabled="true"]{background:transparent;color:var(--muted-d);box-shadow:inset 0 0 0 2px currentColor;transform:none;cursor:default}
.deck-zieht .deck-spur{scroll-snap-type:none;cursor:grabbing}
.deck-zieht .slot{user-select:none}

/* Pakete im Stapel: Name und Preis in einer Zeile, darunter was drin ist */
.paket__kopf{display:grid;gap:.4rem}
.paket .karte-inhalt{position:static}
.paket__name{font-size:2rem}
.paket__link{color:inherit;text-decoration:none;-webkit-user-drag:none}
.paket__link::after{content:"\2192";margin-left:.5em;color:var(--signal-text)}
/* der Name ist der Link, und die ganze Karte ist seine Flaeche */
.paket__link::before{content:"";position:absolute;inset:0;z-index:1}
.paket__link:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.2em}
.paket__preis{display:flex;align-items:baseline;gap:.6rem;white-space:nowrap}
.paket__betrag{font-family:var(--mono);font-weight:500;font-size:2.6rem;line-height:1;color:var(--teer)}
.paket__betrag--wort{font-size:1.8rem}
.paket__einmal{font-size:1.2rem;color:var(--muted)}
.paket__punkte{display:grid;gap:.2rem}
.paket__punkte li{position:relative;padding-left:1.8rem;line-height:1.35}
.paket__punkte li::before{content:"";position:absolute;left:0;top:.55em;width:.8rem;height:.8rem;background:var(--teer)}
.paket__marke{position:absolute;top:0;left:calc(var(--kerbe,0px) + 1.2rem);translate:0 -50%;background:var(--signal);color:var(--teer);padding:.3rem .9rem;z-index:2;font-size:1.2rem}
.paket--beliebt{--flaeche:linear-gradient(var(--signal),var(--signal)) 0 0 / 100% .6rem no-repeat,var(--kreide)}
.karte--sicher .sicher{display:grid;gap:.6rem}
.karte--sicher .sicher li{position:relative;padding-left:2.4rem;color:var(--teer);font-weight:700;line-height:1.35}
.karte--sicher .sicher li::before{content:"";position:absolute;left:.2rem;top:.3em;width:1.3rem;height:.75rem;border-left:.3rem solid var(--signal-text);border-bottom:.3rem solid var(--signal-text);rotate:-45deg}

/* ---------- 5 Check: das Blatt (ohne Bewegung steht es als Kreide-Karte im Fluss) ---------- */
.blatt{margin:0 var(--gutter) 4.8rem;background:var(--kreide);color:var(--teer);padding:2.4rem 2rem 3.2rem;display:grid;gap:2.4rem}
.blatt__kopf{display:none;align-items:center;justify-content:space-between;gap:1.6rem}
.blatt__titel{color:var(--muted);font-size:1.2rem}
.blatt__zu{flex:none;display:inline-flex;align-items:center;white-space:nowrap;min-height:4.4rem;padding:0 1.2rem;margin-right:-1.2rem;background:none;border:0;font-family:var(--mono);font-weight:500;font-size:1.3rem;letter-spacing:.05em;text-transform:uppercase;color:var(--teer);cursor:pointer}
.blatt__zu::before{content:"";flex:none;width:1rem;height:1rem;margin-right:.8rem;background:var(--signal-text)}
.check__form{display:grid;gap:1.2rem}
.check__label{font-family:var(--mono);font-weight:500;font-size:1.3rem;letter-spacing:.04em;text-transform:uppercase}
.check__zeile{display:grid;gap:1rem}
.check__zeile input{width:100%;min-height:5.2rem;padding:1.2rem 1.4rem;background:var(--kreide);border:2px solid var(--muted);border-radius:0;color:var(--teer);font-size:1.7rem}
.check__zeile input::placeholder{color:var(--muted)}
.check__hinweis{font-size:1.6rem;color:var(--muted)}
.check__status{font-size:1.3rem;min-height:1.4em}
.check__status:empty{display:none}
.check__noscript{font-size:1.6rem}
.messkarte--check .messkarte__kopf{color:var(--muted);font-size:1.2rem}
.werte--check{margin-top:1.4rem}
.werte--check .wert{flex-direction:column;gap:.3rem}
.werte--check .wert__n{color:var(--teer);font-size:4rem}
.werte--check .wert__name{color:var(--muted)}
[data-zustand="misst"] ~ .messkarte--check .wert__n{color:var(--muted)}
/* Befund ueber Form und Signal, keine neue Farbe */
.wert[data-stufe="warn"] .wert__n{box-shadow:inset 0 -.5rem 0 var(--signal-text);padding-bottom:.6rem;align-self:flex-start}
.wert[data-stufe="kritisch"] .wert__n{outline:2px solid var(--signal-text);outline-offset:.4rem;align-self:flex-start;margin:.4rem 0 .4rem .4rem}
.wert[data-stufe="kritisch"] .wert__name::after{content:" · kritisch";color:var(--signal-text)}
.wert[data-stufe="warn"] .wert__name::after{content:" · schwach";color:var(--signal-text)}
.vgl{font-size:1.2rem;color:var(--muted)}
.ladezeit{margin-top:1.4rem;font-size:1.6rem;line-height:1.45}
.ladezeit__wert{font-family:var(--mono);font-weight:500;white-space:nowrap}
.check__lz-text{margin-top:.6rem;font-size:1.6rem}
.check__fazit{display:grid;gap:1rem}
.check__fazit .knoepfe{margin-top:.8rem}
/* Das Blatt als Dialog von unten (nur mit Bewegung) */
.blatt-dialog{position:fixed;inset:auto 0 0 0;margin:0;width:100%;max-width:none;height:auto;max-height:var(--blatt-max, 72svh);padding:0;border:0;background:var(--kreide);color:var(--teer);overflow-y:auto;overscroll-behavior:contain}
.blatt-dialog::backdrop{background:transparent}
.blatt-dialog .blatt{margin:0;padding:1.6rem var(--rein-r) calc(var(--safe-u) + 3.2rem) var(--rein-l)}
.blatt-dialog .blatt__kopf{display:flex}
.blatt-dialog:not([open]){display:none}

/* ---------- Nachsatz der Pakete: hier wird die Tafel zur Seite ---------- */
.nachsatz{position:relative;z-index:3;background:var(--teer);padding:1.6rem 0 2.4rem}
.nachsatz__innen{display:grid;gap:2.4rem}
.nachsatz__text{display:grid;gap:1.2rem;max-width:80ch}
.nachsatz__text a{color:var(--kreide);font-weight:700}
.bogen{display:grid;gap:.8rem;justify-items:start;padding:2rem 1.8rem;background:var(--teer);box-shadow:inset 0 0 0 2px var(--rand)}
.bogen__zahlen{display:flex;flex-wrap:wrap;gap:.8rem 2.4rem;color:var(--muted-d);font-size:1.2rem}
.bogen__zahlen strong{color:var(--papier);font-weight:500;font-size:2.4rem;margin-right:.6rem}

/* Im Fluss sprechen die Ueberschriften eine Stufe leiser als die Ansagen im Geraet */
@media (max-width:599px){.abschnitt h2.disp,.abschnitt-kreide h2.disp{font-size:min(var(--h2), 3.4rem)}}

/* ---------- 7 Ablauf ---------- */
.abschnitt{position:relative;z-index:3;background:var(--teer);padding-block:4.8rem}
.ablauf{margin:2rem 0 1.2rem}
.schritt{display:grid;grid-template-columns:4.8rem minmax(0,1fr);column-gap:1.2rem;row-gap:.2rem;padding:1.2rem 0;border-top:2px solid var(--rand)}
.schritt:last-child{border-bottom:2px solid var(--rand)}
.schritt__nr{grid-row:1 / span 2;font-family:var(--mono);font-weight:500;font-size:2.4rem;line-height:1.1;color:var(--signal)}
.schritt h3,.schritt p{grid-column:2}
.schritt p{font-size:1.6rem;line-height:1.45}

/* ---------- 8 Ueber mich: knapp, das Foto bleibt in seinem Rahmen zurueck ---------- */
#ueber-mich{padding-top:2.4rem}
.raster-ich{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:1.6rem 2rem;align-items:start}
.ich__rahmen{overflow:hidden;aspect-ratio:4 / 5}
.ich__rahmen img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.js-motion .ich__rahmen img{height:118%;margin-top:-9%}
.ich__bild figcaption{margin-top:.8rem;color:var(--muted-d);font-size:1.2rem}
.ich__text{display:grid;gap:1.2rem;justify-items:start;align-content:start}
.ich__text h2.disp{margin-top:0;font-size:min(var(--h2), calc((100vw - 2 * var(--gutter)) * .62 / 5.6))}
.ich__zitat{grid-column:1 / -1;margin:0;font-weight:700;font-size:2.2rem;line-height:1.3;color:var(--papier);max-width:30ch}
.ich__text > p:not(.label){max-width:56ch}
/* am Handy: Zitat, Text und Link unter Foto und Name ueber die volle Breite */
@media (max-width:599px){
  .raster-ich{grid-template-columns:minmax(0,4fr) minmax(0,7fr)}
  .ich__text{display:contents}
  .ich__text > .label,.ich__text > h2{grid-column:2}
  .ich__text > .label{grid-row:1;align-self:start}
  .ich__text > h2{grid-row:1;align-self:end;margin-bottom:2.4rem}
  .ich__bild{grid-row:1}
  .ich__text > .ich__zitat,.ich__text > p:not(.label),.ich__text > .pfeil{grid-column:1 / -1}
}

/* ---------- 9/10 Kreide-Blatt: Kontakt und FAQ ---------- */
.kreide{position:relative;z-index:3;background:var(--kreide);color:var(--teer)}
.abschnitt-kreide{padding-block:4.8rem 3.2rem}
.abschnitt-kreide + .abschnitt-kreide{padding-top:1.6rem}
.kreide .lead{color:var(--teer)}
.kreide :focus-visible{outline-color:var(--signal-text)}
.raster-kontakt,.raster-faq{display:grid;gap:2.4rem}
.formular{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem 1.2rem;margin-top:2rem}
.feld--breit,.formular__senden,.formular__recht,.formular .hp-feld{grid-column:1 / -1}
.feld{display:grid;gap:.6rem}
.feld label{font-family:var(--mono);font-weight:500;font-size:1.3rem;letter-spacing:.04em;text-transform:uppercase;color:var(--teer)}
.feld input,.feld textarea{width:100%;min-height:5.2rem;padding:1.2rem 1.4rem;background:var(--kreide);border:2px solid var(--muted);border-radius:0;color:var(--teer);font-size:1.7rem}
.feld textarea{resize:vertical;min-height:10rem}
.feld input::placeholder,.feld textarea::placeholder{color:var(--muted)}
.feld input:focus,.feld textarea:focus,.check__zeile input:focus{border-color:var(--teer)}
.formular__senden{width:100%}
.formular__recht{font-size:1.6rem;color:var(--muted)}
.kontakt__direkt{display:grid;gap:1rem;align-content:start;justify-items:start;padding-top:2rem;border-top:2px solid var(--kreide-2)}
.knoepfe--direkt{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;width:100%}
.knoepfe--direkt .knopf{padding-inline:1rem}
.knoepfe--direkt .knopf:first-child{grid-column:1 / -1}
.kontakt__mail a{color:var(--teer)}
.faq details{border-top:2px solid var(--kreide-2)}
.faq details:last-child{border-bottom:2px solid var(--kreide-2)}
.faq summary{display:flex;justify-content:space-between;align-items:flex-start;gap:1.6rem;padding:1.4rem 0;min-height:4.8rem;cursor:pointer;list-style:none;font-weight:800;font-size:1.7rem;line-height:1.3;text-wrap:balance}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:1.6rem;height:1.6rem;margin-top:.2rem;box-shadow:inset 0 0 0 2px var(--teer)}
.faq details[open] summary::after{background:var(--signal-text);box-shadow:none}
.faq summary:hover{color:var(--signal-text)}
.faq details p{padding:0 0 2rem;max-width:64ch;font-size:1.6rem}

/* ---------- Fuss: das Geraet kommt zur Ruhe ---------- */
.fuss{background:var(--teer);padding:4.8rem 0 calc(var(--unten) + 2.4rem)}
.fuss__feld{color:var(--papier)}
.fuss__feld{width:100%;margin-inline:0}
.fuss__marke{display:block;width:100%;max-width:72rem;height:auto}
.fuss__tafel{position:relative;margin-top:2.4rem;padding-top:2.4rem;background:var(--teer)}
.fuss__unten{display:grid;gap:1.2rem}
.fuss__nav ul{display:flex;flex-wrap:wrap;gap:0 1.8rem}
.fuss__nav a{display:inline-flex;align-items:center;min-height:4.4rem;font-family:var(--mono);font-weight:500;font-size:1.3rem;letter-spacing:.05em;text-transform:uppercase;color:var(--kreide);text-decoration:none}
.fuss__nav a:hover{box-shadow:inset 0 -2px 0 var(--signal)}
.fuss__adresse,.fuss__copy{color:var(--muted-d);font-size:1.2rem}
.fuss__adresse a{color:var(--kreide)}
@media (min-height:560px){
  .js-motion .fuss{background:transparent;padding:0 0 var(--unten);min-height:100svh;display:flex;flex-direction:column}
  .js-motion .fuss__zone{height:var(--linie);display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:2.4rem}
  .js-motion .fuss__tafel{margin-top:0;height:var(--tafel-h);padding-top:2.6rem}
}

/* Handy quer (niedrig): die Seite laeuft im Fluss, Ueberschriften richten sich nach der Hoehe */
@media (orientation:landscape) and (max-height:559px){
  :root{--h2:min(clamp(2.8rem, calc((100vw - 2 * var(--gutter)) / 9.4), 6.4rem), 10svh)}
  h2.disp--lang{font-size:min(var(--h2), calc((100vw - 2 * var(--gutter)) / 9.9))}
  .ansage{padding-top:4.8rem}
}

/* ============================================================
   Ab 600 px (Tablet hoch, grosse Handys quer)
   ============================================================ */
@media (min-width:600px){
  .deck{--karte-b:calc(var(--innen) * .56)}
  .deck-spur::after{flex-basis:0}
  .held__knoepfe .knopf{flex:none}
  .werte{grid-template-columns:repeat(4,minmax(0,1fr))}
  .wert{flex-direction:column;gap:.3rem}
  .bild--zahl{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:3.2rem;align-items:start}
  .bild--zahl > * + *{margin-top:0}
  .formular{grid-template-columns:repeat(2,minmax(0,1fr))}
  .feld--breit,.formular__senden,.formular__recht,.formular .hp-feld{grid-column:1 / -1}
  .formular__senden{width:auto;justify-self:start}
  .knoepfe--direkt{display:flex}
  .schritt{grid-template-columns:8rem minmax(0,1fr)}
  .blatt{margin-inline:var(--rein-l) var(--rein-r)}
  .check__zeile{grid-template-columns:minmax(0,1fr) auto}
  .nachsatz__innen{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;column-gap:4.8rem}
}

/* ============================================================
   Desktop ab 1024 px, eigens komponiert:
   oben die Navigation (dort waechst die Wortmarke), die Leiste entfaellt, der Pixel-Knopf steht unten rechts.
   Ueber der Linie steht die Ansage links, die Ziffer rechts; unter der Linie die Tafel in Spalten.
   ============================================================ */
@media (min-width:1024px){
  :root{
    --unten:0px;
    --tafel-min:30rem;
    --knopf-px:7.2rem;
    --kopf-h:7.2rem;
    --rand-d:max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter)));
    --reserve:max(var(--rand-d), 12.8rem);            /* rechts unten steht der Pixel-Knopf */
    --h1:min(clamp(8rem, calc((min(100vw, var(--wrap)) - 2 * var(--gutter)) / 10.4), 15rem), calc((var(--linie) - var(--kopf-h) - 8rem) / 2.9));
    --h2:clamp(4.6rem, 4.2vw, 7.2rem);
  }
  html{scroll-padding-top:8.8rem;scroll-padding-bottom:2.4rem}
  .kopf{position:fixed;background:var(--teer)}
  .kopf__innen{padding:0 var(--rand-d);max-width:none;height:var(--kopf-h)}
  .kopf__marke .wm{height:2.2rem}
  .kopf__nav{display:block}
  .kopf__nav ul{display:flex;gap:0 2.8rem}
  .kopf__nav a{display:inline-flex;align-items:center;min-height:4.4rem;font-family:var(--mono);font-weight:500;font-size:1.3rem;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;color:var(--kreide)}
  .kopf__nav a:hover{box-shadow:inset 0 -2px 0 var(--signal)}

  .leiste{left:auto;width:auto;background:none;padding:0}
  .leiste__streifen,.leiste__liste{display:none}
  .leiste__zeile{height:auto;padding:0 3.2rem 3.2rem 0;gap:0}
  .leiste__platz{box-shadow:none}
  .pixelknopf{right:3.2rem;top:0;padding:.8rem;font-size:1.3rem}
  .menue{display:none !important}

  h3{font-size:2.2rem}
  .lead{font-size:2rem}
  .ansage{padding:12rem 3.2rem 3.2rem var(--rand-d)}
  .tafel{padding:3.2rem var(--reserve) 3.2rem var(--rand-d)}
  .tafel--deck{padding-left:0;padding-right:var(--reserve)}
  .deck{--rand:var(--rand-d);--karte-b:calc(var(--innen) * .31)}
  .tafel__stapel{max-width:calc(var(--wrap) - 2 * var(--gutter))}

  /* Hero: die h1 ueber die volle Breite, die Tafel in zwei Spalten */
  .ansage--held{width:auto;max-width:none;padding-right:var(--rand-d)}
  .held__bild{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:6.4rem;row-gap:2rem;align-items:start}
  .held__bild > *{margin-top:0}
  .held__unter{grid-column:1;grid-row:1;font-size:3.6rem;line-height:1.1}
  .held__lauf{grid-column:1;grid-row:2;font-size:2rem;line-height:1.45}
  .held__knoepfe{grid-column:2;grid-row:1;align-self:center;gap:1.2rem 2.4rem}
  .held__knoepfe .knopf{padding-inline:2.2rem}
  .belegzeile{grid-column:2;grid-row:2;font-size:1.3rem;max-width:40ch}

  /* die Tafel spricht am Desktop gross: Zusage in 3,4 rem, Kennzahl wie eine Anzeige */
  .tafel h3{font-size:clamp(3.4rem, 4.4vh, 4.4rem);line-height:1.1;letter-spacing:-.01em}
  .tafel .kennzahl{font-size:clamp(8.8rem, 12vh, 13rem)}
  .kennzahl__name{font-size:1.3rem}
  .bild--zahl{column-gap:6.4rem;align-items:center}
  .bild__text{max-width:68ch}
  .bild__text > * + *{margin-top:1.2rem}
  .bild__text p,.tafel__zeile,.weg--tage .bild p{font-size:clamp(2rem, 2.3vh, 2.4rem);line-height:1.45}
  .tafel .beleg,.tafel .belegzeile{font-size:1.3rem}
  .tafel .klein{font-size:1.9rem;max-width:80ch}
  .werte{gap:1.6rem 3.2rem}
  .wert__n{font-size:6.4rem}
  .wert__name{font-size:1.3rem}
  .weg--tage .bild > * + *{margin-top:1.2rem}
  .bild--check{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:6.4rem;align-items:start}
  .bild--check > *{margin-top:0}
  .bild--check .bild__text{display:grid;gap:2rem;justify-items:start}
  .bild--check .knopf{margin-top:0}

  .deck .karte{padding:2.8rem 3.2rem 2.4rem 2.8rem}
  .slot+.slot .karte{padding-left:calc(var(--kerbe) + 2.8rem)}
  .slot:last-child .karte{padding-right:3.2rem}
  .deck-spur{cursor:grab;padding-top:1.8rem}
  .deck-steuer{justify-content:flex-start;gap:2.4rem}
  .deck .karte h3{font-size:2.6rem}
  .karte p,.karte li{font-size:1.8rem}
  .paket__name{font-size:2.8rem}
  .paket__betrag{font-size:3.6rem}

  .blatt-dialog{left:auto;right:0;width:min(56rem, 100%);max-height:100svh;height:100svh}

  .nachsatz{padding:3.2rem 0 8rem}
  .nachsatz .wrap,.abschnitt .wrap,.abschnitt-kreide .wrap,.fuss .wrap{padding-left:var(--rand-d);padding-right:var(--rand-d);max-width:none}
  .nachsatz__innen{grid-template-columns:minmax(0,6fr) minmax(0,5fr);column-gap:9.6rem;align-items:start}
  .nachsatz__text{font-size:2rem;line-height:1.45}
  .nachsatz__text .klein{font-size:1.6rem}
  .bogen{padding:3.2rem;gap:1.2rem}
  .bogen h3{font-size:2.6rem}
  .bogen__zahlen strong{font-size:3.2rem}

  .abschnitt{padding-block:8rem}
  .ablauf{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:3.2rem;margin:4rem 0 2.4rem}
  .schritt{display:flex;flex-direction:column;gap:1rem;padding:2.4rem 0 0;border-bottom:0 !important}
  .schritt__nr{font-size:4.8rem}

  #ueber-mich{padding-top:0}
  .raster-ich{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:2.4rem;align-items:end}
  .ich__bild{grid-column:1 / 4}
  .ich__text{grid-column:5 / -1}
  .ich__zitat{font-size:3rem}

  .abschnitt-kreide{padding-block:8rem 4.8rem}
  .raster-kontakt{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:2.4rem}
  .kontakt__haupt{grid-column:1 / 8}
  .kontakt__direkt{grid-column:9 / -1;border-top:0;padding-top:0}
  .knoepfe--direkt{display:grid;grid-template-columns:minmax(0,1fr)}
  .raster-faq{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:2.4rem}
  .faq__kopf{grid-column:1 / 5}
  .faq{grid-column:6 / -1}

  .fuss{padding-bottom:4.8rem}
  .fuss__unten{grid-template-columns:minmax(0,1fr) auto;align-items:end;row-gap:1.6rem;padding-right:var(--reserve) !important}
  .fuss__nav{grid-column:1 / -1}
}
@media (min-width:1024px) and (max-width:1279px){
  .deck{--karte-b:calc(var(--innen) * .44)}
}
@media (min-width:1024px) and (min-height:560px){
  .js-motion .ansage{width:fit-content;max-width:62%;padding-top:2.4rem;padding-bottom:3.2rem}
  .js-motion .ansage--held{width:auto;max-width:none}
  .js-motion .tafel{padding-top:3.6rem;padding-bottom:2.4rem}
  .js-motion .tafel--deck{padding-bottom:1.6rem}
  .js-motion .tafel:has(.band--skala){padding-top:4.8rem}
  .js-motion .weg--tage .tafel__stapel{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:6.4rem}
  .js-motion .weg--tage .tafel__stapel > .bild{grid-area:auto;clip-path:none !important}
  .js-motion .fuss{padding-bottom:0}
  .js-motion .fuss__zone{padding-bottom:3.2rem}
}

/* Ruhefassung: nichts steht, nichts schaltet; der Knopf steht an seinem Platz */
@media (prefers-reduced-motion: reduce){
  .knopf:hover,.pixelknopf:hover,.deck-knopf:hover{transform:none}
}

/* ============================================================ BEWEGUNG AM SCROLLWERT (aus B2, nur mit JS)
   Die vorige Karte bleibt beim Wischen zurueck (Tempo -0,6), ihr Text faehrt weiter und verschwindet an ihrer
   Vorderkante; die naechste schiebt sich darueber. Wo der Browser das nicht kann, setzt site.js dieselben Werte. */
@keyframes zurueck-x{to{translate:40% 0}}
@keyframes inhalt-x{to{translate:-40% 0}}
@supports (animation-timeline:view()){
  .js-motion .slot{view-timeline:--slot x;view-timeline-inset:var(--rand) 0px}
  .js-motion .deck .karte{animation:zurueck-x linear both;animation-timeline:--slot;animation-range:exit-crossing 0% exit-crossing 100%}
  .js-motion .karte-inhalt{animation:inhalt-x linear both;animation-timeline:--slot;animation-range:exit-crossing 0% exit-crossing 100%}
}