/* Tank · tank.3lite.com — Christophs Kleid
   ==========================================================================
   Umgesetzt am 05.09.2026 aus Christophs Entwurf
   (git.realjarvis.ai/Christoph/tank-marketing-page, Stand f5fdc78).

   Übernommen ist die GESTALTUNG: Farben, Typografie, Abstände, das
   Bento-Raster, Kopf- und Fußzeile, die Knopfzustände, die Bildsprache
   (die Bots) und die Bewegung. Christophs Maße stehen als Kommentar an
   der Stelle, an der sie herkommen, damit ein späterer Abgleich mit
   seinem Repo möglich bleibt.

   NICHT übernommen ist sein Technik-Stack. Diese Seite bleibt statisches
   HTML ohne Baukasten und ohne Fremdcode zur Laufzeit: an ihr hängen
   erzeugte Seiten (preise, laden, ausblick) und drei Prüfer, die ein
   Next.js-Umbau zerreißen würde.

   Die Klassennamen sind unsere geblieben. Christophs Variablennamen sind
   seine geblieben (--bg, --primary, --card, --sunset, --bot-*), damit man
   seine globals.css danebenlegen und Zeile für Zeile vergleichen kann.

   Aufbau:
     1  Schriften            8  Karten und Bento-Raster
     2  Farben und Maße      9  Szenen-Galerie
     3  Grundlage           10  Preise, Tabellen, Konfigurator
     4  Kopfzeile           11  Ausblick
     5  Vorab-Banner        12  Fußnoten
     6  Knöpfe              13  Unterseiten und Formulare
     7  Hero                14  Abschluss und Fußzeile
                            15  Bots, Bewegung, Druck
   ========================================================================== */


/* ══ 1 Schriften ═══════════════════════════════════════════════════════════
   Selbst gehostet, nicht von fremden Servern. Beide unter SIL OFL 1.1,
   Herkunft und Lizenz stehen in schrift/LIESMICH.md. Beide sind variabel:
   EINE Datei trägt alle Schnitte, deshalb der Bereich in font-weight.
   unicode-range hält latin-ext aus dem Netz, solange kein Zeichen daraus
   vorkommt — bei deutschem Text also immer. */

@font-face{
  font-family:"Bricolage Grotesque"; font-style:normal; font-weight:200 800;
  font-display:swap; src:url(/schrift/bricolage-grotesque-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
    U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
    U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Bricolage Grotesque"; font-style:normal; font-weight:200 800;
  font-display:swap; src:url(/schrift/bricolage-grotesque-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,
    U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Inter var"; font-style:normal; font-weight:100 900;
  font-display:swap; src:url(/schrift/inter-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
    U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
    U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Inter var"; font-style:normal; font-weight:100 900;
  font-display:swap; src:url(/schrift/inter-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,
    U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}


/* ══ 2 Farben und Maße ═════════════════════════════════════════════════════
   1:1 aus Christophs :root. --primary ist ein RGB-Tripel ohne rgb(), damit
   rgb(var(--primary)/.08) geht — er staffelt fast alle Linien und stillen
   Texte über die Deckkraft der Grundfarbe statt über eigene Farbwerte. */

:root{
  --site-content-width:1280px;

  --bg:#FAFAF8;
  --primary:17 18 20;
  --muted:#63686D;   /* Christoph: #6B7075. Eine Spur dunkler, sonst bleibt Fließtext auf --card-03 unter 4,5:1. */
  --card:#F2F2EF;
  --card-03:#EBEBE7;
  --accent:#111214; --accent-hover:#2C2E32; --accent-contrast:#FFFFFF;
  --sunset:#C2571F;
  /* --sunset trägt Ränder, Marken und Flächen; als kleiner Text erreicht er
     nur 4,3:1 auf dem Grund und 4,0:1 auf der Karte. Für Text deshalb eine
     eigene, dunklere Tinte. Christophs Farbe bleibt, wo sie Fläche ist. */
  --sunset-tinte:#A8481A;
  --bot-tank:#2F4FA2; --bot-post:#B4342B; --bot-belege:#8A6A2F;
  --bot-bank:#2E6B58; --bot-ablage:#6B4E8C; --bot-stimme:#0A5FD1;
  --signal:#B4342B; --bot-ring:var(--bg);

  --font-display:"Bricolage Grotesque",system-ui,-apple-system,sans-serif;
  --font-ui:"Inter var",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-logo:var(--font-display);
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  color-scheme:light;
}

/* Dunkel: über die Systemwahl, sofern der Schalter im Fuß nichts anderes
   gespeichert hat. Beide Blöcke tragen dieselben Werte — getrennt, weil
   :is()/:where() mit @media hier nichts spart und Christoph es auch so hat. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0A0A0C; --primary:237 237 234; --muted:#9DA2A7;
    --card:#141518; --card-03:#1C1D21;
    --accent:#F1F1EF; --accent-hover:#FFFFFF; --accent-contrast:#0A0A0C;
    --sunset:#E08A55;
    /* Im Dunkeln trägt der helle Ton schon 7,5:1, er bleibt. */
    --sunset-tinte:#E08A55;
    --bot-tank:#7F9AEA; --bot-post:#E5776B; --bot-belege:#C7A15C;
    --bot-bank:#63BFA1; --bot-ablage:#A98BD8; --bot-stimme:#4A9BFF;
    --signal:#E5776B;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0A0A0C; --primary:237 237 234; --muted:#9DA2A7;
  --card:#141518; --card-03:#1C1D21;
  --accent:#F1F1EF; --accent-hover:#FFFFFF; --accent-contrast:#0A0A0C;
  --sunset:#E08A55;
    /* Im Dunkeln trägt der helle Ton schon 7,5:1, er bleibt. */
    --sunset-tinte:#E08A55;
  --bot-tank:#7F9AEA; --bot-post:#E5776B; --bot-belege:#C7A15C;
  --bot-bank:#63BFA1; --bot-ablage:#A98BD8; --bot-stimme:#4A9BFF;
  --signal:#E5776B;
  color-scheme:dark;
}


/* ══ 3 Grundlage ═══════════════════════════════════════════════════════════ */

*{box-sizing:border-box; margin:0}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
/* Die Kopfleiste schwebt fest über der Seite. Ohne scroll-margin landet
   jedes Ankerziel darunter. 88px ist Leistenhöhe plus Luft. */
[id]{scroll-margin-top:88px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  background:var(--bg); color:rgb(var(--primary));
  font-family:var(--font-ui); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  /* Kein overflow-x:hidden am body: das killt position:sticky in
     Nachkommen und verschluckt waagerechtes Überlaufen, statt es zu
     zeigen. Wo etwas überragen darf, steht overflow:clip am Abschnitt. */
}
img,svg{max-width:100%}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit}
:focus-visible{outline:2px solid rgb(var(--primary)/.5); outline-offset:3px;
  border-radius:8px}

/* Fließtext-Links in Absätzen und Listen: unterstrichen, damit sie ohne
   Farbe erkennbar bleiben. Knöpfe und Navigationen nehmen sich das aus.
   :where() drückt die Gewichtung auf null — sonst schlüge diese Regel
   jede spätere, und die Fußnoten-Sternchen bekämen einen Strich, der wie
   ein Gedankenstrich aussieht. Genau das ist beim ersten Wurf passiert. */
:is(p,li,dd) :where(a:not(.knopf):not(.fuss-widerruf):not(.pfeil-link)){
  text-decoration:underline; text-underline-offset:3px;
  text-decoration-thickness:1px;
  text-decoration-color:rgb(var(--primary)/.28);
  transition:text-decoration-color .15s, color .15s;
}
:is(p,li,dd) :where(a:not(.knopf):not(.fuss-widerruf)):hover{
  text-decoration-color:rgb(var(--primary)/.7)}

h1,h2,h3,h4{font-family:var(--font-display); font-weight:500;
  letter-spacing:-.025em; text-wrap:balance; overflow-wrap:break-word}
/* Deutsche Komposita brechen nicht von allein. „Geschäftsbedingungen" ist
   bei 320px Ansichtsbreite breiter als die ganze Zeile, blieb in einem
   Stück und schob die AGB-Seite auf 363px: eine waagerechte Rollleiste,
   gemessen am 06.09.2026. Dasselbe mit „Datenschutzerklärung" (346px) und
   „Auftragsverarbeitung" (334px). 320px ist die Breite, bei der WCAG 1.4.10
   Umbruch ohne waagerechtes Rollen verlangt.

   Warum in einer Abfrage und nicht überall: hyphens:auto trennt nicht nur
   im Notfall, sondern immer dann, wenn es die Zeile besser findet. Global
   gesetzt bekäme jede umbrechende Überschrift der Seite Trennstriche, und
   das wäre eine Änderung an Christophs Gestaltung, kein Fehlerbeheben.
   Die Grenze liegt bei 389px, nicht bei 320: Bei 360px Breite (Galaxy S8
   und Geschwister) lief agb.html schon vorher über, 363 statt 360. Ab
   390px, Toms Messbreite, ändert sich dagegen nichts. Der Browser trennt
   nach den Regeln von lang="de"; overflow-wrap oben ist das Netz darunter,
   falls er für Deutsch keine Trennmuster mitbringt. */
@media (max-width:389px){h1,h2,h3,h4{hyphens:auto}}
/* Die Anbieterangabe im Impressum steht in <address>. Browser setzen das
   kursiv; in diesem Kleid liest sich das wie ein Zitat statt wie eine
   Anschrift. */
address{font-style:normal; line-height:1.75}
strong,b{font-weight:600}

/* Der Sprunglink liegt unsichtbar über allem und kommt bei Tastatur-Fokus
   hervor. Er muss VOR der festen Kopfleiste liegen, sonst deckt sie ihn. */
.sprung{position:fixed; z-index:80; top:8px; left:8px;
  transform:translateY(-200%);
  display:inline-flex; align-items:center; min-height:44px;
  padding:10px 18px; border-radius:999px;
  background:var(--accent); color:var(--accent-contrast); font-size:14px}
.sprung:focus{transform:none}

/* Die Technikstimme: Mono, klein, gesperrt. Trägt Modulzeilen und Stände. */
.ausblick-modul,.kicker{font-family:var(--mono); font-size:11.5px;
  font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  color:rgb(var(--primary)/.6)}

/* Der stille Kleintext: Rechtshinweise, Vorbehalte, Einschränkungen. */
.law,p.hinweis,.galerie-hinweis{font-size:13.5px; line-height:1.65;
  color:rgb(var(--primary)/.6); text-wrap:pretty}
/* Als eigener Block ist .hinweis ein Kasten, kein Kleintext: so steht er
   im Widerrufsformular zwischen den beiden Stufen nach § 356a BGB. */
div.hinweis{margin-top:20px; padding:16px 20px; border-radius:14px;
  background:var(--card); border:1px solid rgb(var(--primary)/.08);
  font-size:15px; line-height:1.65; text-wrap:pretty}
div.hinweis p + p{margin-top:10px}
.karte .law{margin-top:14px}

/* Christophs Seitenbreite. Der Hero und die Bänder nehmen 80rem, die
   Lesespalten der Unterseiten 52rem — beides steht bei ihm so. */
.container{width:100%; max-width:80rem; margin-inline:auto; padding-inline:16px}
@media (min-width:640px){.container{padding-inline:24px}}


/* ══ 4 Kopfzeile ═══════════════════════════════════════════════════════════
   Christophs Leiste: fest oben, oben durchsichtig, ab 50px Scroll von
   72rem auf 56rem geschrumpft, mit Grund, Ring und Unschärfe. Unter
   1024px wird aus der Navigation ein Vollbildmenü hinter dem Burger.
   Den Zustand setzt seite.js über data-scrolled / data-state. */

.kopf{position:fixed; inset-inline:0; top:0; z-index:50; padding:8px}
@media (min-width:1024px){.kopf{padding:12px 8px 0}}

.kopf-innen{width:100%; max-width:72rem; margin-inline:auto;
  padding-inline:12px; border-radius:16px; border:1px solid transparent;
  transition:max-width .5s ease-in-out, background-color .5s ease-in-out,
    box-shadow .5s ease-in-out, backdrop-filter .5s ease-in-out;
  position:relative; display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between}
@media (min-width:1024px){.kopf-innen{padding-block:8px}}
.kopf[data-scrolled] .kopf-innen{max-width:56rem; backdrop-filter:blur(12px);
  background:color-mix(in srgb,var(--bg) 75%,transparent);
  box-shadow:0 0 0 1px rgb(var(--primary)/.06),0 4px 12px -4px rgba(0,0,0,.1)}
@media (max-width:1023px){
  .kopf[data-scrolled] .kopf-innen{padding-inline:20px}
}

/* Wortmarke. Christoph setzt sie in FH Lecturis Rounded Test Bold; die
   Probefassung ist für eine öffentliche Seite nicht lizenziert (siehe
   schrift/LIESMICH.md), deshalb hier Bricolage 700 eng gestellt. */
/* inline-flex mit 44px Mindesthöhe: die Wortmarke sieht gleich aus, ist
   aber ein Tippziel, kein 26px hoher Textschnipsel. */
.marke{display:inline-flex; align-items:center; min-height:44px;
  font-family:var(--font-logo); font-weight:700; font-size:26px;
  line-height:1; letter-spacing:-.03em; text-transform:uppercase}

.kopf-links{display:flex; align-items:center; justify-content:space-between;
  gap:32px}
@media (max-width:1023px){.kopf-links{height:52px; width:100%}}

.burger{display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; margin-right:-10px; border:0; background:transparent;
  cursor:pointer; color:rgb(var(--primary))}
.burger svg{width:20px; height:20px}
.burger .ikon-zu,.kopf[data-state="offen"] .burger .ikon-menu{display:none}
.kopf[data-state="offen"] .burger .ikon-zu{display:block}
@media (min-width:1024px){.burger{display:none}}

/* Die Navigation sitzt absolut in der Mitte der Leiste, der Knopf rechts. */
.kopf nav.breit{display:none; position:absolute; inset:0; margin:auto;
  width:fit-content; height:fit-content; align-items:center; gap:12px}
@media (min-width:1024px){.kopf nav.breit{display:flex}}
.kopf nav.breit a{padding:5px 11px; border-radius:8px; font-size:13.5px;
  color:rgb(var(--primary)/.7); transition:background .15s, color .15s}
.kopf nav.breit a:hover{background:rgb(var(--primary)/.05);
  color:rgb(var(--primary))}
.kopf-rechts{display:none}
@media (min-width:1024px){.kopf-rechts{display:flex}}

/* Vollbildmenü unter 1024px. 100dvh statt 100vh: auf dem iPhone wandert
   die Adressleiste, und 100vh schiebt den letzten Punkt darunter. */
.kopf[data-state="offen"]{height:100dvh;
  background:color-mix(in srgb,var(--card) 92%,transparent);
  backdrop-filter:blur(12px); overflow-y:auto}
.kopf[data-state="offen"] .kopf-innen{padding-inline:20px;
  background:color-mix(in srgb,var(--bg) 75%,transparent);
  backdrop-filter:blur(12px)}
.kopf[data-state="offen"] .kopf-links{
  border-bottom:1px solid rgb(var(--primary)/.08)}
.kopf nav.schmal{display:none; width:100%; flex-direction:column;
  padding-block:8px 24px}
.kopf[data-state="offen"] nav.schmal{display:flex}
.kopf nav.schmal a:not(.knopf){padding:14px 0; font-size:18px; font-weight:500;
  border-bottom:1px solid rgb(var(--primary)/.08)}
.kopf nav.schmal .knopf{margin-top:24px; justify-content:center; width:100%}

/* Solange das Menü offen ist, darf die Seite darunter nicht mitrollen.
   Die Klasse setzt seite.js am <html>. */
html.menue-offen,html.menue-offen body{overflow:hidden}

/* Ohne JavaScript öffnet der Burger nichts. Er ist dann kein Knopf, sondern
   eine Sackgasse: Gemessen am 06.09.2026 blieb auf dem Handy von sieben
   Zielen in der Kopfleiste genau eines erreichbar, die Wortmarke. Das
   trifft nicht nur, wer JavaScript abschaltet, sondern jeden, bei dem
   seite.js nicht ankommt oder unterwegs stolpert. Die Rechtsseiten stehen
   zwar auch im Fuß, „Preise", „Laden" und „Ausblick" aber nirgends sonst.

   Ohne JS steht die Leiste deshalb still am Anfang der Seite statt zu
   schweben, der Burger geht weg, und die schmale Liste steht offen da. Der
   Abstand, den der Vorab-Banner für die schwebende Leiste freihält, fällt
   mit ihr weg. Ab 1024px ändert sich nichts: Dort trägt die Leiste ohnehin
   die breite Navigation, und die braucht kein Skript. */
@media (max-width:1023px){
  html:not(.js) .kopf{position:static}
  html:not(.js) .burger{display:none}
  html:not(.js) .kopf nav.schmal{display:flex}
  html:not(.js) .vorab-banner{padding-top:16px}
}


/* ══ 5 Vorab-Banner ════════════════════════════════════════════════════════
   Steht auf JEDER Seite, solange Tank nicht erschienen ist. Er sitzt unter
   der schwebenden Leiste, deshalb der Abstand oben. */

.vorab-banner{max-width:80rem; margin:0 auto; padding:88px 16px 0}
@media (min-width:640px){.vorab-banner{padding-inline:24px}}
.vorab-banner p{
  padding:12px 18px; border-radius:14px;
  background:color-mix(in srgb,var(--sunset) 9%,var(--bg));
  border:1px solid color-mix(in srgb,var(--sunset) 28%,transparent);
  color:rgb(var(--primary)/.78); font-size:14px; line-height:1.6;
  text-wrap:pretty}
.vorab-banner strong{color:var(--sunset-tinte)}


/* ══ 6 Knöpfe ══════════════════════════════════════════════════════════════
   Christoph: h-9 px-4 text-sm, ab md h-11 px-6 text-base, rounded-full.
   .knopf = btn, .gross = die volle Höhe auch auf dem Handy, .zweit = btn-2,
   .klein = btn-klein. Mindesthöhe 44px, wo man wirklich tippt. */

.knopf{display:inline-flex; align-items:center; justify-content:center;
  gap:6px; height:44px; padding-inline:20px; border-radius:999px;
  background:var(--accent); color:var(--accent-contrast);
  font-size:15px; font-weight:500; white-space:nowrap; cursor:pointer;
  border:1px solid transparent;
  transition:background .2s, filter .2s, transform .1s}
@media (min-width:768px){.knopf{padding-inline:24px; font-size:16px}}
.knopf:hover{background:var(--accent-hover)}
.knopf:active{transform:translateY(1px)}

.knopf.zweit{background:var(--card-03); color:rgb(var(--primary))}
.knopf.zweit:hover{background:var(--card-03); filter:brightness(.93)}
:root[data-theme="dark"] .knopf.zweit:hover{filter:brightness(1.35)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .knopf.zweit:hover{filter:brightness(1.35)}
}

/* Der kleine Knopf in der Kopfleiste. Er ist kein Tippziel im Fließtext,
   sondern sitzt in einer 52px hohen Leiste — deshalb darf er flacher sein.
   Auf dem Handy taucht er ohnehin als voller Knopf im Menü auf. */
.knopf.klein{height:32px; padding-inline:14px; font-size:13.5px}
.knopf.gross{height:48px; padding-inline:26px; font-size:16px}
.knopf svg{width:1.1em; height:1.1em; flex:none; translate:0 -.05em}

/* Auf schmalen Schirmen stehen Knopfreihen untereinander und tragen die
   volle Breite: nebeneinander wären sie zu schmal zum Treffen. */
.hero-knoepfe,.ausblick-mehr{display:flex; align-items:center;
  justify-content:center; gap:10px; flex-wrap:wrap}
@media (max-width:539px){
  .hero-knoepfe{flex-direction:column; width:100%}
  .hero-knoepfe .knopf{width:100%}
}
@media (min-width:768px){.hero-knoepfe{gap:12px}}

/* Der Pfeil-Link: ein Textlink, der wie ein Weiter-Zeichen aussieht. */
.pfeil-link{display:inline-flex; align-items:center; gap:6px;
  font-size:15px; color:rgb(var(--primary)/.7);
  border-bottom:1px solid rgb(var(--primary)/.2); padding-bottom:1px;
  transition:color .15s, border-color .15s}
.pfeil-link:hover{color:rgb(var(--primary));
  border-color:rgb(var(--primary)/.6)}


/* Unter 360px passt „Sag mir Bescheid, wenn Tank da ist" nicht mehr in eine
   Zeile: 324px Knopf bei 304px Platz, und die Startseite bekam davon eine
   waagerechte Rollleiste (gemessen 06.09.2026). Nur dort darf der Text
   umbrechen. Christophs einzeilige Knöpfe bleiben ab 360px unverändert,
   und die Mindesthöhe von 44px hält auch mit zwei Zeilen. */
@media (max-width:359px){
  .knopf{white-space:normal; height:auto; min-height:44px;
    padding-block:9px; padding-inline:16px; text-align:center}
  .knopf.gross{height:auto; min-height:48px; padding-inline:18px}
  .knopf.klein{height:auto; min-height:32px; padding-block:5px}
}


/* ══ 7 Hero ════════════════════════════════════════════════════════════════
   Christoph: mittig, gap-12/sm:gap-16, pt-32/sm:pt-[148px], pb-20/sm:pb-28,
   text-center. Bei ihm liegt die Navigation darüber; hier steht der
   Vorab-Banner dazwischen, deshalb oben etwas weniger. */

.hero{overflow-x:clip}
.hero-innen{display:flex; flex-direction:column; align-items:center;
  gap:48px; padding-top:40px; padding-bottom:72px; text-align:center}
@media (min-width:640px){
  .hero-innen{gap:64px; padding-top:56px; padding-bottom:104px}
}
.hero-text{display:flex; flex-direction:column; align-items:center; width:100%}

/* Die Pille über der Überschrift. Bei Christoph trägt sie eine Marke
   („Vorschau"), einen Satz und einen Pfeil. Unser .kicker liefert den
   Text; die Marke steht als <b> darin. */
.hero .kicker{display:inline-flex; align-items:center; gap:8px;
  max-width:100%; border-radius:999px; padding:6px 14px 6px 8px;
  margin-bottom:16px; border:1px solid rgb(var(--primary)/.08);
  backdrop-filter:blur(4px); font-family:var(--font-ui); font-size:13px;
  font-weight:400; letter-spacing:-.01em; text-transform:none;
  color:rgb(var(--primary)/.6);
  transition:border-color .2s, background .2s}
@media (min-width:640px){.hero .kicker{margin-bottom:20px}}
.hero .kicker:hover{border-color:rgb(var(--primary)/.15)}
.hero .kicker b{flex:none; border-radius:999px; padding:2px 8px;
  border:1px solid color-mix(in srgb,var(--sunset) 45%,transparent);
  color:var(--sunset-tinte); font-family:var(--font-ui); font-size:10px;
  font-weight:600; line-height:1.4; text-transform:uppercase;
  letter-spacing:.025em; white-space:nowrap}

/* font-display, 36 → 48 → 60px, leading 1.05, tracking -.025em.
   perspective, damit die Wörter beim Hereinkippen Tiefe haben. */
.hero h1{font-size:clamp(31px,8.2vw,36px); line-height:1.05;
  perspective:1200px}
.hero h1 .w{display:inline-block}
/* Die Wörter kommen nacheinander, 60 ms auseinander wie bei Christoph. */
.anim .hero h1 .w:nth-child(1){animation-delay:0s}
.anim .hero h1 .w:nth-child(2){animation-delay:.06s}
.anim .hero h1 .w:nth-child(3){animation-delay:.12s}
.anim .hero h1 .w:nth-child(4){animation-delay:.18s}
.anim .hero h1 .w:nth-child(5){animation-delay:.24s}
.anim .hero h1 .w:nth-child(6){animation-delay:.3s}
/* Der Bot im Wort „Blick": ein Zeichen breit, auf der Grundlinie sitzend.
   Die negativen Ränder schließen die Lücke, die ein Inline-Element sonst
   zu den Buchstaben links und zum Punkt rechts lässt. */
h1 [data-bot]{display:none}
.js h1 [data-bot]{display:inline-block; width:1em; height:1em;
  margin-left:-.04em; margin-right:-.14em; translate:0 .12em;
  vertical-align:baseline}
@media (min-width:640px){.hero h1{font-size:48px}}
@media (min-width:1024px){.hero h1{font-size:60px; max-width:15ch}}

.untertitel{color:var(--muted); margin-top:16px; max-width:36rem;
  font-size:16px; line-height:1.625; text-wrap:pretty}
@media (min-width:640px){
  .untertitel{margin-top:20px; max-width:42rem; font-size:18px}
}

.hero-knoepfe{margin-top:26px}
.hero .law{margin-top:14px; max-width:38rem}
.hero .law a{color:rgb(var(--primary)/.7)}

/* Die vier Fakten unter dem Hero: kleine, ruhige Pillen. Sie ersetzen
   keinen Satz, sie fassen zusammen, was oben steht. */
.fakten{display:flex; flex-wrap:wrap; justify-content:center; gap:8px;
  margin-top:26px; padding:0; list-style:none}
.fakten li{padding:6px 13px; border-radius:999px; background:var(--card);
  font-size:13px; color:rgb(var(--primary)/.62)}

/* Der Rahmen um das Schaubild: Christophs .frame, rounded-3xl mit Ring und
   einem tiefen, weichen Schatten. Darin sitzt eine Fensterleiste mit den
   drei Punkten, damit das Bild als Programmfenster liest. */
.schaubild{width:100%; max-width:var(--site-content-width); margin:0;
  border-radius:24px; overflow:hidden; background:var(--card);
  box-shadow:0 0 0 1px rgb(var(--primary)/.08),
             0 30px 80px -40px rgb(var(--primary)/.4)}
.schaubild-leiste{display:flex; align-items:center; gap:8px; height:44px;
  padding-inline:16px; border-bottom:1px solid rgb(var(--primary)/.07)}
.ampel{display:flex; gap:6px; flex:none}
.ampel i{width:11px; height:11px; border-radius:999px;
  box-shadow:inset 0 0 0 .5px rgba(0,0,0,.2)}
.ampel i:nth-child(1){background:#ff5f57}
.ampel i:nth-child(2){background:#febc2e}
.ampel i:nth-child(3){background:#28c840}
.schaubild-name{font-size:13px; color:rgb(var(--primary)/.7)}
.schaubild-stand{margin-left:auto; display:inline-flex; align-items:center;
  gap:6px; font-size:12px; color:rgb(var(--primary)/.6)}
.schaubild-stand::before{content:""; width:7px; height:7px;
  border-radius:999px; background:var(--bot-bank)}
.schaubild svg{display:block; width:100%; height:auto; padding:20px}

/* Die Teile des Schaubilds, gestimmt auf den hellen Grund. */
.sb-box{fill:var(--bg); stroke:rgb(var(--primary)/.12); stroke-width:1.5}
.sb-punkt{fill:rgb(var(--primary)/.22)}
.sb-linie{stroke:rgb(var(--primary)/.1); stroke-width:1.5}
.sb-titel{fill:rgb(var(--primary)); font-family:var(--font-display);
  font-size:22px; font-weight:600; letter-spacing:-.02em}
.sb-marke{fill:var(--bot-tank)}
.sb-text{fill:rgb(var(--primary)/.72); font-family:var(--font-ui);
  font-size:14px}
/* SVG-Text trägt seine Farbe in `fill`, nicht in `color`. Die
   Kontrastkorrektur vom 06.09.2026 suchte nach `color:` und hat diese
   Zeile deshalb übersehen: „KI: lokal" und „Deine Daten …" standen bei
   3,43:1 im Hellmodus. .sb-punkt bleibt bei .22, das sind die drei
   Fensterpunkte und kein Text. */
.sb-klein{fill:rgb(var(--primary)/.6); font-family:var(--font-ui);
  font-size:12px}
.sb-akzent-text{fill:var(--muted); font-family:var(--font-ui);
  font-size:13px}
.sb-icon{fill:none; stroke:var(--bot-tank); stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round}
.sb-schloss{stroke:rgb(var(--primary)/.4)}
.sb-wolke{fill:none; stroke:rgb(var(--primary)/.16); stroke-width:1.4;
  stroke-dasharray:3 3}
.sb-strich{stroke:var(--signal); stroke-width:2; stroke-linecap:round}


/* ══ 8 Abschnitte, Karten und das Bento-Raster ═════════════════════════════ */

main section{padding-block:64px}
@media (min-width:640px){main section{padding-block:96px}}
main section.hero{padding-top:0}

/* Jeder zweite Abschnitt bekommt einen ruhigen Grund, damit die Seite
   Takt hat. Christoph macht das über .karte.muted; auf einer Seite mit
   fünfzehn Abschnitten trägt der Wechsel besser.
   Der Assistent-Abschnitt bleibt ausgenommen: dort steht das Bento-Raster,
   und dessen Abstufung (Karte hell, muted, dunkel) geht auf getöntem Grund
   verloren — die mittlere Stufe wäre dann genau die Grundfarbe. */
main section:nth-of-type(odd):not(.hero){
  background:color-mix(in srgb,var(--card) 55%,var(--bg))}

/* Die Kapitelüberschrift mit der Mono-Ziffer davor (aus data-nr). */
main section h2{font-size:29px; line-height:1.1}
@media (min-width:640px){main section h2{font-size:36px}}
main section h2[data-nr]::before{
  content:attr(data-nr); display:block; margin-bottom:12px;
  font-family:var(--mono); font-size:11.5px; font-weight:500;
  letter-spacing:.14em; color:rgb(var(--primary)/.6)}

.abschnitt-intro{margin-top:14px; max-width:44rem; color:var(--muted);
  font-size:17px; line-height:1.65; text-wrap:pretty}
main section > .container > .law{margin-top:20px; max-width:44rem}

/* --- Karten -------------------------------------------------------------
   Christophs .karte: rounded-2xl, p-8, Grund var(--bg), Ring 8 %. */
.karten{display:grid; grid-template-columns:1fr; gap:12px; margin-top:36px}
@media (min-width:640px){.karten{grid-template-columns:1fr 1fr}}
@media (min-width:1024px){.karten-drei{grid-template-columns:repeat(3,1fr)}}

.karte{display:flex; flex-direction:column; padding:28px;
  border-radius:16px; background:var(--bg);
  border:1px solid rgb(var(--primary)/.08); min-width:0}
@media (min-width:640px){.karte{padding:32px}}
.karte h3{font-size:17px; font-weight:600; letter-spacing:-.02em;
  text-wrap:balance}
.karte p{margin-top:12px; color:var(--muted); font-size:15px; line-height:1.6;
  text-wrap:pretty}
/* Auf dem abgesetzten Grund kehrt sich das Verhältnis um: dort ist die
   Karte die hellere Fläche. */
main section:nth-of-type(odd) .karte{background:var(--bg);
  border-color:rgb(var(--primary)/.07)}

/* --- Das Bento-Raster ---------------------------------------------------
   Christophs Kernstück: zehn Spalten, Karten über 4/6/3/4/3, die kleine
   Karte zuerst auf dem Handy. Unser Assistent-Abschnitt hat genau die
   fünf Karten, für die er es gebaut hat. container-type, damit das Raster
   auf die Breite des Abschnitts hört und nicht auf die des Fensters. */
.assistent .container{container-type:inline-size}
.assistent .karten{gap:12px}
.assistent .karte:nth-child(5){grid-row-start:1}
@container (min-width:36rem){
  .assistent .karten{grid-template-columns:1fr 1fr}
  .assistent .karte:nth-child(2){grid-column:span 2}
}
@container (min-width:56rem){
  .assistent .karten{grid-template-columns:repeat(10,1fr)}
  .assistent .karte:nth-child(1){grid-column:span 4}
  .assistent .karte:nth-child(2){grid-column:span 6}
  .assistent .karte:nth-child(3){grid-column:span 3}
  .assistent .karte:nth-child(4){grid-column:span 4}
  .assistent .karte:nth-child(5){grid-column:span 3; grid-row-start:auto}
}
/* Die abgesetzten Kacheln des Bentos: zwei Stufen, wie bei Christoph. */
.assistent .karte:nth-child(2),.assistent .karte:nth-child(4){
  background:var(--card); border-color:transparent}
.assistent .karte:nth-child(3){background:var(--card-03);
  border-color:transparent}

/* Die Statement-Bande: ein Satz auf einer breiten Karte, rechts schaut
   der große Bot über die Kante. Christophs .statement. Sie eröffnet den
   Assistent-Abschnitt; das Bento-Raster folgt darunter. */
.statement-karte{position:relative; display:flex; margin-top:0;
  border-radius:24px; background:var(--card)}
@media (min-width:768px){.statement-karte{min-height:22rem}}
.statement-text{position:relative; z-index:1; display:flex;
  flex-direction:column; justify-content:center; gap:16px; width:100%;
  min-width:0; padding:32px 32px 200px}
@media (min-width:640px){.statement-text{gap:20px; padding:40px 48px 210px}}
@media (min-width:768px){.statement-text{padding:40px 42% 40px 48px}}
/* Der Bot ragt oben aus der Karte und wird unten flach gekappt: kein
   overflow:hidden an der Karte, sondern ein Kasten, dessen Oberkante über
   dem Kopf und dessen Unterkante die Schnittlinie ist. */
/* Ohne JavaScript gibt es den Bot nicht — dann braucht die Karte unten
   auch keine 200 Pixel Luft für ihn. */
html:not(.js) .statement-pop{display:none}
html:not(.js) .statement-text{padding-bottom:32px}
@media (min-width:640px){html:not(.js) .statement-text{padding-bottom:40px}}
.statement-pop{position:absolute; z-index:0; inset:-110px 0 0; overflow:hidden;
  pointer-events:none; display:flex; align-items:flex-end;
  justify-content:center}
@media (min-width:768px){
  .statement-pop{left:auto; right:0; width:46%; top:-170px;
    justify-content:flex-end}
}
.statement-pop [data-bot]{width:min(230px,68%); aspect-ratio:1;
  translate:0 12.5%}
@media (min-width:768px){
  .statement-pop [data-bot]{width:min(100%,480px); translate:0 12.5%}
}

/* Die dreispaltigen Blöcke (Zusagen, Motoren, KI-Option …). */
.spalten{display:grid; grid-template-columns:1fr; gap:12px; margin-top:36px}
@media (min-width:760px){.spalten{grid-template-columns:repeat(3,1fr)}}
.spalte{padding:28px; border-radius:16px; background:var(--card);
  min-width:0}
.spalte h3{font-size:17px; font-weight:600; letter-spacing:-.02em}
.spalte p{margin-top:12px; color:var(--muted); font-size:15px;
  line-height:1.6; text-wrap:pretty}

/* Hakenlisten: der Punkt ist ein gezeichneter Haken, kein Emoji. */
.haken-liste{margin-top:14px; padding:0; list-style:none; display:grid;
  gap:10px}
.haken-liste li{position:relative; padding-left:26px; font-size:15px;
  line-height:1.55; color:var(--muted)}
.haken-liste li::before{content:""; position:absolute; left:0; top:.42em;
  width:14px; height:8px; border-left:1.8px solid var(--bot-bank);
  border-bottom:1.8px solid var(--bot-bank); rotate:-45deg}

/* Schlichte Listen in den Abschnitten. */
main section ul:not(.fakten):not(.haken-liste):not(.fn-liste):not(.frei-liste),
main section ol:not(.fn-liste){margin-top:14px; padding-left:1.25em;
  font-size:15.5px; line-height:1.7; color:var(--muted)}
main section li + li{margin-top:5px}


/* ══ 9 Szenen-Galerie ══════════════════════════════════════════════════════
   Zehn Szenen, waagerecht zu wischen. Scroll-Snap, damit auf dem Handy
   jede Karte einrastet statt irgendwo stehenzubleiben. Der Kasten hat
   eigene Ränder, damit die erste Karte am Textrand beginnt und die
   letzte nicht an der Fensterkante klebt. */

.galerie-rolle{display:grid; grid-auto-flow:column;
  grid-auto-columns:min(84vw,340px); gap:12px; margin-top:36px;
  padding-bottom:14px; overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scrollbar-width:thin;
  scroll-padding-inline:0}
.galerie-rolle > .karte{scroll-snap-align:start}
.galerie-rolle:focus-visible{outline-offset:6px}
.galerie-hinweis{margin-top:10px}

.szene .zeit{margin-top:0; display:inline-block; padding:3px 9px;
  border-radius:6px; font-family:var(--mono); font-size:11px;
  font-weight:500; letter-spacing:.06em; text-transform:uppercase;
  background:color-mix(in srgb,var(--sunset) 14%,transparent);
  color:var(--sunset-tinte)}
.szene h3{margin-top:14px}
/* Die Stufenzeile steht unten an der Karte, egal wie lang der Text ist. */
.szene .stufe{margin-top:auto; padding-top:16px; font-size:13px;
  line-height:1.55; color:rgb(var(--primary)/.6)}
.szene .stufe::before{content:""; display:block; width:28px;
  margin-bottom:12px; border-top:1px solid rgb(var(--primary)/.12)}


/* ══ 10 Preise, Tabellen, Konfigurator ═════════════════════════════════════
   Christophs Tarifkarten: rounded-3xl, p-6/sm:p-8, Grund var(--card),
   der Preis in der Display-Schrift mit Tabellenziffern. */

.preis-gitter{display:grid; grid-template-columns:1fr; gap:16px;
  margin-top:36px}
@media (min-width:768px){.preis-gitter{grid-template-columns:repeat(3,1fr)}}

.preis-karte{display:flex; flex-direction:column; padding:24px;
  border-radius:24px; background:var(--card); min-width:0}
@media (min-width:640px){.preis-karte{padding:32px}}
.preis-karte h3{font-size:14px; font-weight:500; color:var(--muted);
  letter-spacing:0}
.preis-karte > p:not(.preis){margin-top:16px; color:var(--muted);
  font-size:15px; line-height:1.6; text-wrap:pretty}
/* Die Preiszeile: die Zahl groß in der Display-Schrift, die Einheit klein
   daneben, der Monatspreis auf eigener Zeile. flex-wrap statt fester
   Spalten — „1.490 €" und „oder 149 € im Monat, inkl. USt" nebeneinander
   sprengen sonst jede Kartenbreite. */
.preis{display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 8px;
  min-width:0; margin-top:12px}
.betrag{font-family:var(--font-display); font-size:34px; font-weight:500;
  line-height:1.05; letter-spacing:-.025em; font-variant-numeric:tabular-nums}
.preis-zusatz{font-size:14px; color:var(--muted); min-width:0}
.preis-monat{flex-basis:100%; font-size:13.5px; color:rgb(var(--primary)/.6)}
.preis-karte .knopf{margin-top:22px; width:100%}
.frei-liste{margin-top:24px; padding:0; list-style:none;
  display:grid; align-content:start; gap:10px}
.frei-liste li{display:flex; align-items:flex-start; gap:9px;
  font-size:14px; line-height:1.45; color:var(--muted)}
.frei-liste li::before{content:""; flex:none;
  width:12px; height:7px; margin-top:.3em;
  border-left:1.7px solid rgb(var(--primary)/.45);
  border-bottom:1.7px solid rgb(var(--primary)/.45); rotate:-45deg}

.frei-karte{padding:24px; border-radius:24px; background:var(--card);
  margin-top:16px}
@media (min-width:640px){.frei-karte{padding:32px}}

/* --- Tabellen (preise.html) --------------------------------------------
   Auf schmalen Schirmen rollt die Tabelle in ihrem eigenen Rahmen, statt
   die Seite breit zu machen. Der Rahmen sagt mit einem Schattenrand, dass
   rechts noch etwas kommt. */
.tabellen-rolle,.container > table{overflow-x:auto; margin-top:20px;
  border-radius:16px; border:1px solid rgb(var(--primary)/.08);
  overscroll-behavior-x:contain}
table{width:100%; border-collapse:collapse; font-size:14.5px;
  background:var(--card)}
th,td{padding:11px 14px; text-align:left; vertical-align:top;
  border-bottom:1px solid rgb(var(--primary)/.06)}
thead th{position:sticky; top:0; z-index:1; background:var(--card-03);
  font-size:12px; font-weight:600; letter-spacing:.07em;
  text-transform:uppercase; color:rgb(var(--primary)/.6); white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
td:last-child,th:last-child{text-align:right; font-variant-numeric:tabular-nums}

/* Auf dem Handy wird aus jeder Zeile eine Karte. Vier Spalten auf 390
   Pixeln heißt sonst: waagerecht wischen und raten, in welcher Spalte man
   gerade ist. Der Spaltenname kommt aus data-spalte (build-preise.py). */
@media (max-width:639px){
  .tabellen-rolle{overflow:visible; border:0; border-radius:0}
  .tabellen-rolle table{display:block; background:none}
  .tabellen-rolle thead{display:none}
  .tabellen-rolle tbody{display:grid; gap:10px}
  .tabellen-rolle tr{display:block; padding:14px 16px; border-radius:14px;
    background:var(--card); border:1px solid rgb(var(--primary)/.06)}
  .tabellen-rolle td{display:flex; justify-content:space-between; gap:16px;
    padding:4px 0; border:0; text-align:right;
    font-variant-numeric:tabular-nums}
  .tabellen-rolle td::before{content:attr(data-spalte); flex:none;
    text-align:left; color:rgb(var(--primary)/.6); font-variant-numeric:normal}
  .tabellen-rolle td:first-child{display:block; margin-bottom:8px;
    padding-bottom:8px; border-bottom:1px solid rgb(var(--primary)/.07);
    font-weight:600; font-size:15px; text-align:left}
  .tabellen-rolle td:first-child::before{content:none}
  .tabellen-rolle td:empty{display:none}
}

/* --- Konfigurator ------------------------------------------------------- */
.konfig{margin-top:24px; padding:24px; border-radius:24px;
  background:var(--card); display:flex; flex-direction:column; gap:20px}
@media (min-width:640px){.konfig{padding:32px}}
.konfig-titel{font-family:var(--font-display); font-size:22px;
  font-weight:500; letter-spacing:-.02em}
.konfig-tipp{font-size:14.5px; line-height:1.6; color:var(--muted);
  max-width:44rem; text-wrap:pretty}
.konfig-flaechen{display:grid; gap:20px}
@media (min-width:900px){
  .konfig-flaechen{grid-template-columns:minmax(0,1fr) 264px; gap:24px}
}
.konfig-wahl{display:grid; gap:16px; min-width:0}
@media (min-width:640px){.konfig-wahl{grid-template-columns:1fr 1fr}}
.konfig-wahl fieldset{border:0; padding:0; min-width:0}
/* 12px, nicht 11: Bei gesperrter Versalschrift auf dem Handy sind elf
   Punkte an der Grenze, und diese Zeilen benennen die Gruppen, in denen
   man etwas auswählt. Christoph setzt sie ebenfalls auf zwölf. */
.konfig-wahl legend{padding:0 0 8px; font-family:var(--mono);
  font-size:12px; font-weight:500; letter-spacing:.12em;
  text-transform:uppercase; color:rgb(var(--primary)/.6)}
/* Eine Wahlzeile (konfigurator.js baut sie als label.konfig-pille). Die
   ganze Zeile ist Tippfläche, nicht nur das Kästchen: 44px Mindesthöhe. */
.konfig-pille{display:flex; align-items:center; gap:10px; cursor:pointer;
  min-height:44px; padding:9px 12px; border-radius:10px; background:var(--bg);
  border:1px solid rgb(var(--primary)/.06); font-size:14px; line-height:1.35;
  transition:border-color .15s}
.konfig-pille + .konfig-pille{margin-top:6px}
.konfig-pille:hover{border-color:rgb(var(--primary)/.18)}
.konfig-pille:has(input:checked){border-color:rgb(var(--primary)/.4);
  background:color-mix(in srgb,var(--bg) 82%,var(--card-03))}
.konfig-pille input{accent-color:rgb(var(--primary)); flex:none; margin:0;
  width:18px; height:18px}
.konfig-pille span{flex:1; min-width:0}
/* Das ist kein Etikett, sondern Inhalt: „zehn Monatspreise", „5 GB frei
   enthalten". Wer danach entscheidet, muss es lesen können. */
.konfig-pille small{display:block; margin-top:2px; font-size:13px;
  color:rgb(var(--primary)/.6)}
.konfig-pille:has(input:focus-visible){outline:2px solid rgb(var(--primary)/.5);
  outline-offset:2px}

/* Die Postenliste in der Summe rechts. */
.konfig-summe h4{font-size:14px; font-weight:600}
.konfig-posten{margin-top:10px; padding:0; list-style:none; display:grid;
  gap:5px; font-size:13.5px; line-height:1.5; color:var(--muted)}
.konfig-posten li{padding-left:14px; position:relative}
.konfig-posten li::before{content:""; position:absolute; left:0; top:.55em;
  width:5px; height:5px; border-radius:999px; background:rgb(var(--primary)/.25)}
.konfig-summe{align-self:start; padding:20px; border-radius:16px;
  background:var(--bg); border:1px solid rgb(var(--primary)/.08)}
.konfig-betrag{margin-top:12px; font-family:var(--font-display);
  font-size:34px; font-weight:500; line-height:1.05; letter-spacing:-.025em;
  font-variant-numeric:tabular-nums}
/* .finanz-preis ist kein Preis, sondern der eine Satz, der unter einem
   Abschnitt stehen bleiben soll (was er kostet, was ohne dein Ja nicht
   passiert). Deshalb ein abgesetzter Kasten, keine große Zahl. */
.finanz-preis{margin-top:24px; padding:16px 20px; border-radius:14px;
  background:var(--card); border-left:3px solid var(--bot-tank);
  font-size:15px; line-height:1.65; color:rgb(var(--primary)/.8);
  text-wrap:pretty; max-width:52rem}
.finanz-preis .pfeil-link{margin-top:10px}


/* ══ 11 Ausblick ═══════════════════════════════════════════════════════════
   Drei Stände, und die Regel aus dem Haus gilt weiter: Bedeutung nie nur
   über Farbe. Die Marke sagt es in WORTEN, Farbe und Form sind Zugabe —
   gefüllt für gebaut, Textmarker für in Arbeit, gestrichelt für geplant. */

.stand{display:inline-flex; align-items:center; gap:6px; align-self:start;
  padding:3px 11px; border-radius:999px; font-family:var(--font-ui);
  font-size:11.5px; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; line-height:1.5}
.stand::before{content:""; width:8px; height:8px; border-radius:2px}

.stand-gebaut{background:color-mix(in srgb,var(--bot-bank) 15%,transparent);
  color:var(--bot-bank); border:1px solid transparent}
.stand-gebaut::before{background:var(--bot-bank)}

.stand-in_arbeit{background:color-mix(in srgb,var(--sunset) 16%,transparent);
  color:var(--sunset-tinte); border:1px solid transparent}
.stand-in_arbeit::before{background:var(--sunset); border-radius:999px}

.stand-geplant{background:transparent; color:rgb(var(--primary)/.6);
  border:1px dashed rgb(var(--primary)/.3)}
.stand-geplant::before{border:1.5px dashed rgb(var(--primary)/.4);
  background:none; border-radius:999px}

.ausblick-karte .ausblick-modul{margin-top:14px}
.ausblick-karte h3{margin-top:6px}
.ausblick-mehr{margin-top:28px; justify-content:flex-start}

/* Die Unterseite: nach Stand gruppiert, eine Liste statt Karten. */
.ausblick-gruppe{margin-top:44px}
.ausblick-gruppe-titel{display:flex; align-items:center; gap:12px;
  font-family:var(--font-display); font-size:21px; font-weight:500;
  letter-spacing:-.02em}
.ausblick-gruppe-titel::after{content:""; flex:1;
  border-top:1px solid rgb(var(--primary)/.1)}
.ausblick-eintrag{padding-block:22px;
  border-bottom:1px solid rgb(var(--primary)/.07)}
.ausblick-eintrag:last-child{border-bottom:0}
.ausblick-eintrag h3{font-family:var(--font-display); font-size:18px;
  font-weight:500; letter-spacing:-.02em; margin-top:8px}
.ausblick-kurz{margin-top:8px; font-size:15.5px; line-height:1.65;
  color:rgb(var(--primary)/.8); text-wrap:pretty}
.ausblick-eintrag > p:not(.ausblick-kurz):not(.ausblick-modul){
  margin-top:10px; font-size:15px; line-height:1.7; color:var(--muted);
  text-wrap:pretty}


/* ══ 12 Fußnoten ═══════════════════════════════════════════════════════════
   Die Sternchen im Text und das Kleingedruckte unten. Christophs .klein
   trägt die Marke in --sunset; hier ist die Marke das Sternchen selbst. */

sup.fn-marke{line-height:0; font-size:.7em; margin-left:1px}
sup.fn-marke a{padding:0 2px; border-radius:3px; color:var(--sunset-tinte);
  font-weight:600; text-decoration:none}
sup.fn-marke a:hover{background:color-mix(in srgb,var(--sunset) 16%,transparent)}
h1 sup.fn-marke,h2 sup.fn-marke,h3 sup.fn-marke{font-size:.42em;
  vertical-align:super}

.fn-liste{margin-top:36px; padding:0; list-style:none; counter-reset:none}
.fn{position:relative; padding-block:32px;
  border-bottom:1px solid rgb(var(--primary)/.07)}
.fn:last-child{border-bottom:0}
.fn-kopf{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap}
.fn-zeichen{font-size:21px; line-height:1; font-weight:600;
  color:var(--sunset-tinte); letter-spacing:.06em}
.fn-titel{font-family:var(--font-display); font-size:21px; font-weight:500;
  letter-spacing:-.02em; text-wrap:balance}
.fn > p:not(.fn-kopf){margin-top:14px; font-size:15.5px; line-height:1.75;
  color:rgb(var(--primary)/.75); text-wrap:pretty; max-width:44rem}
.fn-zurueck a{display:inline-flex; align-items:center; gap:8px;
  font-size:14px; color:rgb(var(--primary)/.6); text-decoration:none;
  border-bottom:1px solid rgb(var(--primary)/.2); padding-bottom:1px}
.fn-zurueck a:hover{color:rgb(var(--primary))}
/* Angesprungen: die gemeinte Fußnote hebt sich ab, ohne dass Farbe allein
   die Aussage trägt — der Balken links sagt es auch ohne Farbsehen. */
.fn:target{border-left:3px solid var(--sunset); padding-left:18px;
  background:color-mix(in srgb,var(--sunset) 5%,transparent);
  border-radius:0 12px 12px 0}


/* ══ 13 Unterseiten und Formulare ══════════════════════════════════════════
   Die Nachbarseiten (Preise, Laden, Kontakt, Rechtstexte) haben kein
   <main class="hero">, sondern hängen direkt an einem .container. Der
   wird hier zur Lesespalte: Christophs .seite, max-w-2xl, mit dem
   Seitenkopf über einer Linie. */

main.blatt{max-width:52rem; padding-bottom:96px}
main.blatt > h1{padding-top:16px; font-size:34px; line-height:1.1;
  letter-spacing:-.03em}
@media (min-width:640px){main.blatt > h1{font-size:42px}}
main.blatt > h1 + p{margin-top:14px; font-size:17px; line-height:1.6;
  color:var(--muted); text-wrap:pretty}
main.blatt > h2{margin-top:44px; font-size:21px; font-weight:500;
  letter-spacing:-.02em}
main.blatt > h3{margin-top:28px; font-family:var(--font-display);
  font-size:18px; font-weight:500; letter-spacing:-.02em}
main.blatt > p{margin-top:12px; font-size:15.5px; line-height:1.7;
  text-wrap:pretty; color:rgb(var(--primary)/.82)}
main.blatt > ul,main.blatt > ol{margin-top:12px;
  padding-left:1.25em; font-size:15.5px; line-height:1.7;
  color:rgb(var(--primary)/.82)}
main.blatt > ul li + li,main.blatt > ol li + li{margin-top:5px}
main.blatt > .law{color:rgb(var(--primary)/.6)}

/* Eine reine Linkliste: jeder Punkt ist ein Tippziel und nichts sonst.
   Wo mit dem Finger getippt wird, gelten dieselben 44 Punkt wie im Fuß.
   Nicht zu verwechseln mit einer Liste, in der Links in Sätzen stehen —
   dort würde eine Mindesthöhe die Zeilen zerreißen. */
.linkliste{list-style:none; padding-left:0; display:grid}
.linkliste li{margin-top:0}
.linkliste a{display:inline-flex; align-items:center; min-height:34px;
  padding-block:6px}
@media (max-width:1023px),(pointer:coarse){
  .linkliste a{min-height:44px; min-width:44px; padding-block:10px}
}

/* Der Rücksprung „← Tank" über der Überschrift. */
.zurueck{margin-top:0; font-size:14px; color:rgb(var(--primary)/.6)}
.zurueck a{display:inline-flex; align-items:center; gap:8px;
  text-decoration:none; border-bottom:1px solid rgb(var(--primary)/.2);
  padding-bottom:1px}

/* Der Pfeil wird GEZEICHNET, nicht gesetzt. „←" (U+2190) steckt in keiner
   unserer beiden Schriften: Googles latin-Teilmenge führt U+2191 und
   U+2193, aber nicht U+2190. Der Pfeil fiel also auf acht Seiten still
   auf eine Systemschrift zurück, und bemerkt hätte das nie jemand.
   Als Winkel aus zwei Rändern braucht ihn keine Schrift, auf keinem
   System. Denselben Griff benutzen schon der Haken in .haken-liste und
   das Burger-Symbol. */
.zurueck a::before,.fn-zurueck a::before,.galerie-hinweis::after{
  content:""; flex:none; width:7px; height:7px;
  border-left:1.6px solid currentColor; border-bottom:1.6px solid currentColor}
.zurueck a::before,.fn-zurueck a::before{rotate:45deg}
.galerie-hinweis::after{display:inline-block; rotate:-135deg;
  margin-left:8px; vertical-align:1px}
.zurueck a:hover{color:rgb(var(--primary))}

/* Allein stehende Navigationslinks sind Tippziele, keine Wörter im Satz:
   der Rücksprung oben, der Pfeil-Link, der Rücklink einer Fußnote. Sie
   waren alle um die zwanzig Punkt hoch, und gemerkt hat das erst die
   Gegenprobe von pruefe-darstellung.py — vorher hielt der Prüfer sie
   selbst für Fließtext und maß sie gar nicht. Auf dem Rechner mit Maus
   bleiben sie kompakt. */
@media (max-width:1023px),(pointer:coarse){
  .zurueck a,.pfeil-link,.fn-zurueck a{min-height:44px}
}

/* Prüfsummen, Befehle: Mono in einem ruhigen Kasten, umbruchfähig, damit
   64 Zeichen am Stück auf dem Handy keine Rollleiste erzwingen. */
pre,code{font-family:var(--mono)}
code{font-size:.9em; padding:2px 5px; border-radius:5px;
  background:rgb(var(--primary)/.06)}
pre{margin-top:14px; padding:14px 16px; border-radius:12px;
  background:var(--card); border:1px solid rgb(var(--primary)/.07);
  overflow-x:auto; font-size:13px; line-height:1.6}
pre code{background:none; padding:0}
.law code{display:inline-block; max-width:100%; word-break:break-all;
  line-height:1.7}

/* --- Formulare (widerruf.html, kontakt.html) ---------------------------- */
form{margin-top:24px; display:grid; gap:16px; max-width:40rem}
label{display:grid; gap:6px; font-size:14px; font-weight:500}
/* Die Formulare schreiben <label>Text<br><input></label>. Im Raster
   stapelt sich das ohnehin; das <br> gäbe nur eine leere Zeile dazwischen. */
label br{display:none}
form p{margin:0}
input,select,textarea{
  width:100%; min-height:44px; padding:11px 14px; border-radius:12px;
  background:var(--bg); border:1px solid rgb(var(--primary)/.14);
  color:rgb(var(--primary)); font:inherit; font-size:16px;
  transition:border-color .15s}
textarea{min-height:130px; resize:vertical; line-height:1.6}
input:focus,select:focus,textarea:focus{outline:none;
  border-color:rgb(var(--primary)/.5);
  box-shadow:0 0 0 3px rgb(var(--primary)/.08)}
/* Platzhalter bleiben blasser als Fließtext: zu dunkel sehen sie aus
   wie ausgefüllte Werte. Die Bedeutung trägt die Beschriftung darüber. */
input::placeholder,textarea::placeholder{color:rgb(var(--primary)/.5)}
fieldset{border:1px solid rgb(var(--primary)/.1); border-radius:16px;
  padding:20px; display:grid; gap:14px}
legend{padding-inline:8px; font-size:13px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
button[type=submit],input[type=submit]{justify-self:start}
.kontakt-form{max-width:40rem}


/* ══ 14 Abschluss und Fußzeile ═════════════════════════════════════════════
   Christophs Abschluss: der Kreis ragt über die Fußzeile und wird unten
   gekappt. Bandhöhe 48 % der Breite, der Kreis 108 % Elementbreite und
   -4 % nach oben — die Rechnung steht in seiner globals.css. */

.abschluss{display:none}
.js .abschluss{display:block; position:relative; width:100%; max-width:var(--site-content-width);
  margin:56px auto 0; aspect-ratio:100/48; overflow:hidden}
.abschluss [data-bot]{position:absolute; left:50%; top:0; translate:-50% 0;
  margin-top:-4%; width:108%; aspect-ratio:1; opacity:.5}

.fuss{border-top:1px solid rgb(var(--primary)/.08)}
.fuss-innen{display:flex; flex-wrap:wrap; gap:36px; padding:40px 16px 64px;
  max-width:var(--site-content-width); margin-inline:auto;
  font-size:13px; color:rgb(var(--primary)/.6)}
@media (min-width:640px){.fuss-innen{padding-inline:24px}}
@media (min-width:1024px){.fuss-innen{flex-wrap:nowrap; gap:64px}}

.fuss-marke-block{display:grid; gap:18px; align-content:start; flex:0 0 auto}
@media (min-width:1024px){.fuss-marke-block{width:280px}}
.fuss-marke{display:inline-flex; align-items:center; min-height:44px;
  font-family:var(--font-logo); font-weight:700; font-size:20px;
  line-height:1; letter-spacing:-.03em; text-transform:uppercase;
  color:rgb(var(--primary)/.6); justify-self:start}
.fuss-jahr{font-size:11px; line-height:1.5; color:var(--muted)}

/* Der Hell/Dunkel-Schalter. Ohne JavaScript ist er nicht da (seite.js
   setzt ihn ein), und dann gilt einfach die Systemfarbe. */
/* Ohne JavaScript wird der Schalter nie eingesetzt. Ein leerer
   Platzhalter belegt im Raster trotzdem eine Zeile samt Abstand. */
.thema-platz:empty{display:none}

.thema{justify-self:start; display:flex; align-items:center;
  justify-content:center; width:44px; height:44px; margin-left:-10px;
  padding:0; border:0; border-radius:999px; background:none; cursor:pointer;
  color:rgb(var(--primary)/.6); transition:color .15s}
.thema:hover{color:rgb(var(--primary)/.85)}
.thema svg{width:17px; height:17px}

.fuss-strich{display:none}
@media (min-width:1024px){
  .fuss-strich{display:block; align-self:stretch;
    border-left:1px dashed rgb(var(--primary)/.1)}
}

.fuss-spalten{flex:1; display:grid; gap:28px 32px;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
@media (min-width:1024px){.fuss-spalten{gap:40px 56px}}
.fuss nav{display:grid; gap:8px; align-content:start}
.fuss-titel{font-weight:500; color:rgb(var(--primary)/.7)}
.fuss-links{display:grid; gap:2px; justify-items:start}
/* Wo mit dem Finger getippt wird, sind die Fußzeilen-Links 44px hoch —
   Toms Abnahmekriterium, gemessen bei 390, 430 und 768 Pixeln. Auf dem
   Rechner mit Maus bleiben sie kompakt, sonst wäre die Fußzeile dort eine
   halbe Bildschirmhöhe hoch. */
.fuss-links a{display:inline-flex; align-items:center; gap:8px;
  min-height:34px; padding-block:6px; line-height:1.5;
  transition:color .15s}
@media (max-width:1023px),(pointer:coarse){
  .fuss-links{gap:0}
  /* min-width dazu: „AGB" ist 27px breit, die Tippfläche darf das nicht
     sein. Der Kasten wächst, der Text bleibt links stehen. */
  .fuss-links a{min-height:44px; min-width:44px; padding-block:10px}
  .fuss-widerruf{min-height:44px; padding-block:10px}
}
.fuss-links a:hover{color:rgb(var(--primary))}
.fuss-links a svg{width:14px; height:14px; flex:none}

/* Der Widerrufsknopf ist Pflicht (§ 356a BGB, seit 19.06.2026) und muss
   auffallen. Er ist zweimal aus dieser Seite verschwunden, beide Male
   unbemerkt — deshalb ist er hier kein Textlink unter anderen, sondern
   trägt einen eigenen Rahmen. pruefe-pflichtelemente.py misst ihn. */
.fuss-widerruf{display:inline-flex; align-items:center;
  min-height:38px; padding:7px 14px; margin-top:4px; border-radius:999px;
  border:1px solid color-mix(in srgb,var(--sunset) 45%,transparent);
  color:var(--sunset-tinte); font-weight:500; font-size:13px;
  transition:background .15s}
.fuss-widerruf:hover{
  background:color-mix(in srgb,var(--sunset) 12%,transparent);
  color:var(--sunset-tinte)}

/* Der Abstand unter der festen Kopfleiste. Auf der Startseite macht das
   der Vorab-Banner, auf den Lesespalten steht er hier. */
main.blatt{padding-top:8px}


/* ══ 15 Bots, Bewegung, Druck ══════════════════════════════════════════════
   Die Bots sind Christophs Bildsprache: eine Silhouette mit zwei Augen,
   die blinzeln und dem Zeiger folgen. Die Rechnung dazu steht in bot.js
   (portiert aus seinem lib/bloub.js). Ohne JavaScript bleibt das erste
   Bild stehen, das im Markup steckt — sie sind Schmuck (aria-hidden),
   kein Inhalt. */

[data-bot]{display:inline-block; line-height:0}
[data-bot] svg{display:block; width:100%; height:100%; overflow:visible}

/* Christophs Bewegung: die Wörter der Überschrift kippen einzeln herein,
   der Rest steigt weich auf. Beides nur, wenn die Seite fertig ist und
   niemand reduzierte Bewegung verlangt hat — sonst steht alles sofort. */
.anim .w{animation:wort .7s cubic-bezier(.2,.7,.2,1) backwards}
@keyframes wort{from{opacity:0; transform:translateY(.32em) rotateX(-45deg)}}
.anim .steigt{animation:steigt .8s cubic-bezier(.2,.7,.2,1) backwards;
  animation-delay:var(--d,0ms)}
@keyframes steigt{from{opacity:0; transform:translateY(12px); filter:blur(5px)}}

/* Die Abschnitte weiter unten steigen erst auf, wenn sie in Sicht kommen;
   die Klasse „da" setzt seite.js. */
.anim .enthuellen{opacity:0; transform:translateY(14px);
  transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1);
  transition-delay:var(--d,0ms)}
.anim .enthuellen.da{opacity:1; transform:none}

@media (prefers-reduced-motion:reduce){
  .anim .w,.anim .steigt{animation:none}
  .anim .enthuellen{opacity:1; transform:none; transition:none}
  *{transition:none !important; animation:none !important}
}

@media print{
  /* .js .abschluss{display:block} wiegt schwerer als .abschluss allein,
     deshalb hier mit derselben Kette. Ohne das druckt sich der große
     Bot-Bogen auf JEDE Seite, auch auf die AGB. */
  .kopf,.thema,.burger,.sprung,.galerie-hinweis{display:none}
  .abschluss,.js .abschluss{display:none}

  /* Was beim Lesen erst aufsteigt, muss beim Drucken sofort dastehen.
     Sonst druckt sich die Startseite halb leer: Alles, was der Leser nie
     erreicht hat, steht noch auf opacity 0. Gemessen am 06.09.2026.

     ALLE drei Bewegungen, nicht nur die Enthüllung: `.steigt` und die
     Wörter der Überschrift laufen als Animation mit fill-mode backwards,
     stehen also VOR dem Start ebenfalls auf opacity 0. Beim ersten Wurf
     war nur .enthuellen abgefangen, und prompt fehlten im Druck die
     Fakten-Pillen und das Schaubild. */
  .enthuellen,.anim .enthuellen,.steigt,.anim .steigt,.w,.anim .w{
    opacity:1 !important; transform:none !important; filter:none !important;
    transition:none !important; animation:none !important}
  body{background:#fff; color:#000; font-size:11pt}
  /* Der Banner hält 88 Punkt für die schwebende Kopfleiste frei. Beim
     Drucken gibt es die nicht, und die Lücke wäre ein leerer Streifen
     oben auf Seite 1. */
  .vorab-banner{padding-top:0}
  .karte,.spalte,.preis-karte,.konfig,.frei-karte{border:1px solid #ccc;
    background:none; break-inside:avoid}
  .galerie-rolle{display:grid; grid-auto-flow:row;
    grid-auto-columns:auto; overflow:visible}
  main section{padding-block:16pt; background:none}
  a{text-decoration:underline}
}