/* Tank · tank.3lite.com — Kleid „Aurora"
   Nachthimmel über dem eigenen Haus: Der Hero ist dunkel und leuchtet ruhig
   (die KI arbeitet lokal, während du schläfst), der Rest der Seite ist das
   Morgenlicht danach — hell, luftig, aufgeräumt. Licht ist Standard, Dunkel
   folgt der Systemeinstellung. Kein Framework, keine Fremd-Schriften; das
   kleine Reveal-Script liegt inline in index.html — ohne JavaScript (und bei
   reduzierter Bewegung) ist alles sofort sichtbar und statisch.

   Die Klassen .container, .knopf, .law und .hinweis nutzen auch die
   Nachbarseiten (preise.html, widerruf.html, impressum.html); ebenso die
   Variablen --ink und --line. Beim Umbenennen dort nachziehen. */

:root {
  /* Morgenlicht (Licht-Modus) */
  --grund: #f3f6f5;           /* Seitengrund, kühles Morgenlicht */
  --flaeche: #ffffff;         /* Karten und Kästen */
  --flaeche-tief: #e9f0ed;    /* abgesetzte Abschnitte */
  --tinte: #0e1f1a;           /* Text */
  --nebel: #54655f;           /* gedämpfter Text */
  --linie: #dbe3e0;           /* feine Linien */
  --linie-stark: #b6c4bf;
  --akzent: #0d7a5c;          /* tiefes Polar-Grün, tragfähig auf Weiß */
  --akzent-tief: #095c45;
  --akzent-schein: #e1f2ea;   /* grüner Hauch für Kästen */
  --knopf-text: #ffffff;
  --marker: #f8e08e;          /* Textmarker für die Szenen-Zeitzeilen */
  --marker-tinte: #4a3c07;
  --karten-schatten: 0 1px 2px rgba(8, 20, 17, .04),
                     0 16px 40px -24px rgba(8, 20, 17, .25);
  --karten-schatten-hoch: 0 2px 4px rgba(8, 20, 17, .05),
                          0 24px 48px -20px rgba(8, 20, 17, .3);

  /* Nachtbühne (Hero und Laden) — in beiden Farbschemata gleich */
  --nacht: #081411;
  --nacht-hoch: #0a1c17;      /* obere Kante der Bühne, auch hinter dem Kopf */
  --nacht-tinte: #f2f9f5;
  --nacht-nebel: rgba(226, 240, 233, .68);
  --nacht-linie: rgba(255, 255, 255, .12);
  --nacht-glas: rgba(255, 255, 255, .05);
  --polar-gruen: #2fdba4;     /* der Leuchtakzent der Aurora */
  --polar-mint: #8cf0cd;
  --polar-blau: #2f9dd8;

  /* Verträglichkeit mit widerruf.html: dessen Eingabefelder tragen im
     Inline-Stil fest background:#141416. --ink und --line müssen darauf
     lesbar sein, in BEIDEN Farbschemata, deshalb feste helle Werte. */
  --ink: #e8e6df;
  --line: #46525a;

  /* Schrift */
  --serif: ui-serif, "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund: #0a1210;
    --flaeche: #101b17;
    --flaeche-tief: #0d1713;
    --tinte: #e6efe9;
    --nebel: #93a49d;
    --linie: #22312b;
    --linie-stark: #3a4d45;
    --akzent: #43dda6;
    --akzent-tief: #7ce8c2;
    --akzent-schein: #11251d;
    --knopf-text: #04231a;
    --marker: #4f451d;
    --marker-tinte: #f0dc9a;
    --karten-schatten: 0 1px 2px rgba(0, 0, 0, .3),
                       0 16px 40px -24px rgba(0, 0, 0, .55);
    --karten-schatten-hoch: 0 2px 4px rgba(0, 0, 0, .35),
                            0 24px 48px -20px rgba(0, 0, 0, .6);
  }
}

/* ------------------------------ Grundlage ------------------------------ */

* { box-sizing: border-box; }

html { color-scheme: light dark; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--tinte);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Auf index.html beginnt die Seite mit der Nachtbühne; das Band hinter der
   schwebenden Kopfzeile gehört farblich dazu. Nur dort: danke.html und
   abbruch.html tragen denselben Kopf, aber helle Inhalte direkt darunter —
   ohne Hero kein Band. Die übrigen Nachbarseiten haben keinen .kopf. */
body:has(> .kopf):has(.hero) {
  background-color: var(--grund);
  background-image: linear-gradient(var(--nacht-hoch), var(--nacht-hoch));
  background-repeat: no-repeat;
  background-size: 100% 16rem;
  background-position: top;
}

.container {
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

/* Nachbarseiten (preise, widerruf, impressum …): der Container hängt direkt
   im body und bekommt Luft nach oben und unten. */
body > .container { padding-block: 2.4rem 2.8rem; }

h1, h2 {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--tinte);
  margin: 0 0 .55em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.3rem, 5.5vw, 3.7rem); line-height: 1.08; letter-spacing: -.02em; }
h2 { font-size: clamp(1.65rem, 3.4vw, 2.4rem); line-height: 1.15; letter-spacing: -.015em; }

h3 {
  font-family: var(--sans);
  font-weight: 650;
  font-size: 1.06rem;
  line-height: 1.3;
  letter-spacing: -.005em;
  color: var(--tinte);
  margin: 0 0 .5em;
}

p { margin: 0 0 1em; }

a {
  color: var(--akzent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { color: var(--akzent-tief); }

:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 2px;
  border-radius: .2rem;
}

::selection { background: var(--akzent); color: var(--knopf-text); }

code {
  font-family: var(--mono);
  font-size: .88em;
  background: var(--flaeche-tief);
  border: 1px solid var(--linie);
  border-radius: .35rem;
  padding: .08em .35em;
}

address { font-style: normal; }

/* Schlichte Listen der Nachbarseiten atmen etwas. */
ul:not([class]) { padding-left: 1.15rem; }
ul:not([class]) li { margin-bottom: .35rem; }

section { padding-block: clamp(3.6rem, 9vw, 6.5rem); scroll-margin-top: 6rem; }

/* Die Technikstimme: Mono, klein, weit gesperrt. */
.kicker {
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--akzent);
  margin: 0 0 1rem;
}

/* Sektionsnummern: kleine Mono-Ziffern vor den Kapiteln (aus data-nr,
   rein dekorativ — die Alternativtext-Form "/ ''" hält sie aus dem
   Vorlesefluss; Browser ohne diese Syntax lassen die Nummer schlicht weg). */
h2[data-nr]::before {
  content: attr(data-nr) / "";
  display: inline-block;
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--akzent);
  transform: translateY(-.8em);
  margin-right: .55em;
}

.abschnitt-intro { max-width: 46rem; font-size: 1.08rem; color: var(--tinte); }

.law { font-size: .875rem; color: var(--nebel); }
.law a { color: inherit; text-decoration-color: var(--nebel); }
.law a:hover { color: var(--akzent); }

.hinweis {
  background: var(--akzent-schein);
  border: 1px solid var(--linie);
  border-left: 3px solid var(--akzent);
  border-radius: .8rem;
  padding: .9rem 1.1rem;
  margin-block: 1rem;
}

/* Der Sprung-Link liegt unsichtbar vor der Kopfzeile und erscheint,
   sobald ihn die Tastatur erreicht. */
.sprung {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 99;
  background: var(--flaeche);
  color: var(--tinte);
  border: 1px solid var(--linie-stark);
  border-radius: .5rem;
  padding: .5rem 1rem;
}
.sprung:focus-visible { left: .5rem; top: .5rem; }

/* ------------------------------- Knöpfe ------------------------------- */

.knopf {
  display: inline-block;
  background: var(--akzent);
  color: var(--knopf-text);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  padding: .72rem 1.3rem;
  border: 1px solid transparent;
  border-radius: .7rem;
  text-decoration: none;
  cursor: pointer;
}
.knopf:hover { background: var(--akzent-tief); color: var(--knopf-text); }

.knopf.gross { font-size: 1.08rem; padding: .9rem 1.7rem; }
.knopf.klein { font-size: .86rem; padding: .42rem .95rem; }

.knopf.zweit {
  background: transparent;
  color: var(--akzent);
  border-color: var(--linie-stark);
}
.knopf.zweit:hover { border-color: var(--akzent); background: var(--akzent-schein); color: var(--akzent); }

/* Auf der Nachtbühne leuchten die Hauptknöpfe wie die Aurora. */
.kopf .knopf,
.hero .knopf:not(.zweit),
.laden .knopf {
  background: linear-gradient(135deg, #3fe3ad, #17b586);
  color: #03271c;
  border-color: rgba(255, 255, 255, .18);
  box-shadow: 0 10px 30px -12px rgba(47, 219, 164, .55);
}
.kopf .knopf:hover,
.hero .knopf:not(.zweit):hover,
.laden .knopf:hover {
  background: linear-gradient(135deg, #5aeebb, #1cc795);
  color: #03271c;
  box-shadow: 0 14px 34px -12px rgba(47, 219, 164, .7);
}

.pfeil-link { font-weight: 600; }
.pfeil-link::after { content: " →"; display: inline-block; }

/* --------------------- Kopf: schwebendes Glas --------------------- */

.kopf {
  position: sticky;
  top: .7rem;
  z-index: 30;
  margin-top: .7rem;
  padding-inline: .7rem;
}

.kopf-innen {
  display: flex;
  align-items: center;
  gap: .9rem;
  flex-wrap: wrap;
  padding-block: .6rem;
  background: rgba(8, 17, 14, .82);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 1.1rem;
  box-shadow: 0 14px 36px -22px rgba(3, 10, 8, .7);
}

.marke {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 600;
  color: #fdfffe;
  text-decoration: none;
}

.marke-zusatz {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(230, 242, 236, .55);
}

.kopf nav {
  margin-left: auto;
  display: flex;
  gap: 1.15rem;
  align-items: center;
  flex-wrap: wrap;
}

/* Textlinks der Kopfzeile; der Laden-Knopf (a.knopf) bleibt ausgenommen,
   damit kein !important nötig wird. */
.kopf nav a:not(.knopf) {
  font-size: .92rem;
  color: rgba(240, 250, 245, .82);
  text-decoration: none;
}
.kopf nav a:not(.knopf):hover { color: var(--polar-mint); }

.kopf :focus-visible { outline-color: var(--polar-mint); }

/* Auf schmalen Schirmen bricht die Kopfzeile mehrzeilig um — festgeklebt
   würde sie den halben Schirm decken und beim Ankersprung die Überschrift
   überlagern. Dort rollt sie mit dem Inhalt weg. */
@media (max-width: 38rem) {
  .marke-zusatz { display: none; }
  .kopf { position: static; }
  .kopf nav { gap: .85rem; }
  section { scroll-margin-top: 1.5rem; }
}

/* --------------------- Hero: die Nachtbühne --------------------- */

.hero {
  position: relative;
  overflow: hidden;
  display: grid;
  align-items: center;
  min-height: min(88svh, 58rem);
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
  background:
    radial-gradient(90rem 42rem at 85% -20%, rgba(47, 157, 216, .16), transparent 60%),
    radial-gradient(70rem 36rem at -10% 15%, rgba(47, 219, 164, .13), transparent 55%),
    linear-gradient(180deg, var(--nacht-hoch) 0%, var(--nacht) 60%, #071310 100%);
  color: var(--nacht-tinte);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.hero .container, .laden .container { position: relative; z-index: 1; }
.hero :focus-visible, .laden :focus-visible { outline-color: var(--polar-mint); }
.hero ::selection, .laden ::selection { background: var(--polar-mint); color: #06231a; }

.hero-innen {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2.5rem, 6vw, 4.5rem);
  align-items: center;
}

/* Blowout-Wache: kein Kind des Hero-Rasters darf die Spalte über die
   Viewport-Breite hinaus aufdrücken (Grid-Items haben min-width:auto). */
.hero-innen > * { min-width: 0; }

.hero .kicker { color: var(--polar-mint); }
.hero h1 { color: #f7fcf9; }

.untertitel { font-size: 1.16rem; max-width: 34rem; }
.hero .untertitel { color: rgba(233, 244, 238, .87); }

.hero-knoepfe {
  display: flex;
  gap: .8rem;
  flex-wrap: wrap;
  margin-block: 1.6rem 1rem;
}

.hero .knopf.zweit {
  color: #eaf6f0;
  border-color: rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .04);
}
.hero .knopf.zweit:hover {
  border-color: var(--polar-mint);
  color: var(--polar-mint);
  background: rgba(255, 255, 255, .07);
}

.hero .law { color: var(--nacht-nebel); }
.hero code, .laden code {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .14);
  color: rgba(240, 250, 245, .88);
}

.pruefsumme { overflow-wrap: anywhere; }

.fakten {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  padding: 0;
  margin: 1.3rem 0 0;
}
.fakten li {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .08em;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .05);
  color: rgba(230, 242, 236, .78);
  border-radius: 999px;
  padding: .32rem .8rem;
}

/* Das Schaubild sitzt in einer Glas-Karte über der Aurora. Das gepunktete
   Blueprint-Raster darunter gibt der Karte Halt und hebt sie vom dunklen
   Verlauf ab — die technische Zeichnung zur technischen Zusage. */
.schaubild {
  margin: 0;
  background:
    radial-gradient(rgba(140, 240, 205, .13) 1px, transparent 1.4px) 0 0 / 22px 22px,
    linear-gradient(160deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04) 55%);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 1.25rem;
  padding: clamp(.9rem, 2vw, 1.6rem);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 30px 80px -40px rgba(0, 0, 0, .6),
              inset 0 1px 0 rgba(255, 255, 255, .12);
}
.schaubild svg { width: 100%; height: auto; display: block; }

@media (max-width: 56rem) {
  .hero { min-height: 0; }
  .hero-innen { grid-template-columns: 1fr; }
  .schaubild { max-width: 34rem; }
}

/* Auf schmalen Handys nicht mitschrumpfen lassen: das Schaubild behält
   eine Mindestbreite und rollt in seinem eigenen Rahmen seitwärts,
   damit die Beschriftung lesbar bleibt — die Seite selbst bleibt dabei
   exakt Viewport-breit (max-width sichert den Scrollrahmen ab). */
@media (max-width: 36rem) {
  .schaubild { overflow-x: auto; max-width: 100%; }
  .schaubild svg { min-width: 30rem; }
}

/* Schaubild-Teile, gestimmt auf die Nachtbühne — hell genug, dass der
   Mock nicht im Verlauf absäuft: das Gehäuse bekommt eine eigene Fläche,
   Beschriftung und Schloss tragen fast volles Weiß. */
.sb-box   { fill: rgba(13, 32, 26, .78); stroke: rgba(255, 255, 255, .34); stroke-width: 1.2; }
.sb-punkt { fill: rgba(240, 250, 245, .65); }
.sb-linie { stroke: rgba(255, 255, 255, .22); stroke-width: 1; }
.sb-titel { font-family: var(--serif); font-size: 24px; font-weight: 600; fill: #ffffff; }
.sb-text  { font-family: var(--sans); font-size: 14px; fill: rgba(244, 252, 247, .96); }
.sb-klein { font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; fill: rgba(230, 244, 237, .8); }
.sb-marke { fill: var(--polar-gruen); }
.sb-icon  { fill: none; stroke: var(--polar-mint); stroke-width: .9;
            stroke-linecap: round; stroke-linejoin: round; }
.sb-schloss { stroke: rgba(236, 248, 242, .85); stroke-width: 2; }
.sb-wolke {
  fill: none; stroke: rgba(226, 240, 233, .55);
  stroke-width: .42; stroke-dasharray: 1.1 .9; stroke-linecap: round;
}
.sb-strich {
  stroke: var(--polar-gruen); stroke-width: 6; stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(47, 219, 164, .6));
}
.sb-akzent-text { font-family: var(--sans); font-size: 15px; font-weight: 600; fill: var(--polar-mint); }

/* ------------------- Aurora: der ruhige Schleier ------------------- */

.aurora {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.aurora i {
  position: absolute;
  border-radius: 999px;
  filter: blur(64px);
  mix-blend-mode: screen;
}
.aurora i:nth-child(1) {
  width: 52vmax; height: 34vmax; left: -12%; top: -18%;
  background: radial-gradient(closest-side, rgba(47, 219, 164, .5), transparent 70%);
}
.aurora i:nth-child(2) {
  width: 44vmax; height: 30vmax; right: -14%; top: -6%;
  background: radial-gradient(closest-side, rgba(47, 157, 216, .4), transparent 70%);
}
.aurora i:nth-child(3) {
  width: 60vmax; height: 26vmax; left: 12%; bottom: -30%;
  background: radial-gradient(closest-side, rgba(47, 157, 216, .36), transparent 70%);
}
/* Im Laden-Abschnitt hängt der Schleier tiefer und ruhiger. */
.laden .aurora i:nth-child(1) { top: auto; bottom: -34%; left: -8%; }
.laden .aurora i:nth-child(2) { top: auto; bottom: -20%; right: -10%; }

/* ------------------------------- Karten ------------------------------- */

.karten {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
  margin-top: 1.8rem;
}

.karten-drei { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }

.karte {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 1.1rem;
  padding: 1.35rem 1.4rem;
  box-shadow: var(--karten-schatten);
}

.karte h3 { margin-bottom: .45em; }
.karte p:last-child { margin-bottom: 0; }

.karte:hover, .preis-karte:hover {
  border-color: var(--linie-stark);
  box-shadow: var(--karten-schatten-hoch);
}

/* Abgesetzte Abschnitte im Wechsel: ein Hauch Aurora im Morgenlicht.
   Die Bänder sitzen enger als die offenen Abschnitte, damit nach ihnen
   keine doppelte Leerzone entsteht (Bandpolster + Folgepolster). */
.zusagen, .ablauf {
  padding-block: clamp(2.8rem, 6vw, 4.25rem);
  background:
    radial-gradient(60rem 22rem at 50% 0, rgba(47, 219, 164, .06), transparent 60%),
    var(--flaeche-tief);
  border-block: 1px solid var(--linie);
}

/* Crop-Mark-Ecken auf den Bändern: ruhige Druckbogen-Struktur. */
.zusagen > .container, .ablauf > .container { position: relative; }
.zusagen > .container::before, .ablauf > .container::before,
.zusagen > .container::after,  .ablauf > .container::after {
  content: "";
  position: absolute;
  width: .85rem;
  height: .85rem;
  border: 0 solid var(--linie-stark);
  pointer-events: none;
}
.zusagen > .container::before, .ablauf > .container::before {
  top: -1.9rem; left: 1.25rem;
  border-top-width: 1px; border-left-width: 1px;
}
.zusagen > .container::after, .ablauf > .container::after {
  bottom: -1.9rem; right: 1.25rem;
  border-bottom-width: 1px; border-right-width: 1px;
}

/* ------------------------------- Szenen ------------------------------- */

.szene { display: flex; flex-direction: column; }
.szene h3 { margin-top: .85rem; }

/* Die Zeitzeile als Textmarker-Etikett: ein warmer, menschlicher Akzent
   gegen die Techniklastigkeit — leicht verkantet, wie von Hand geklebt. */
.zeit {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--marker);
  color: var(--marker-tinte);
  border-radius: .35rem;
  padding: .22rem .6rem;
  transform: rotate(-1.2deg);
  margin: 0;
}

.stufe {
  margin: auto 0 0;
  padding-top: .8rem;
  border-top: 1px dashed var(--linie-stark);
  color: var(--nebel);
  font-size: .84rem;
}

/* ------------------------------- Finanz ------------------------------- */

.spalten {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: 1fr 1fr;
  margin-top: 1.8rem;
}

@media (max-width: 48rem) {
  .spalten { grid-template-columns: 1fr; }
}

.spalte {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 1.1rem;
  padding: 1.35rem 1.4rem;
  box-shadow: var(--karten-schatten);
}

/* Die beiden Spaltentitel („Frei enthalten" / „Premium schaltet frei")
   sprechen mit der Technikstimme. */
.spalte h3 {
  font-family: var(--mono);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--akzent);
  margin-bottom: .9em;
}

.haken-liste {
  list-style: none;
  margin: 0 0 1em;
  padding: 0;
}

.haken-liste li {
  padding-left: 1.5rem;
  position: relative;
  margin-bottom: .5rem;
}

.haken-liste li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--akzent);
  font-weight: 700;
}

.finanz-preis {
  margin-top: 1.6rem;
  font-size: 1.12rem;
  font-weight: 600;
  max-width: 46rem;
}

/* ------------------------------- Preise ------------------------------- */

.preis-gitter {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  margin-block: 1.8rem 1.4rem;
}

.preis-karte {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 1.1rem;
  padding: 1.35rem 1.4rem;
  box-shadow: var(--karten-schatten);
  display: flex;
  flex-direction: column;
}

.preis-karte h3 { margin-bottom: .3em; }

.preis { display: flex; flex-direction: column; gap: .1rem; margin-bottom: .9em; }

.betrag {
  font-family: var(--serif);
  font-size: 2.15rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--tinte);
  font-variant-numeric: tabular-nums lining-nums;
}

.preis-zusatz { font-size: .9rem; color: var(--tinte); }
.preis-monat  { font-size: .82rem; color: var(--nebel); }

.frei-karte {
  grid-column: 1 / -1;
  border-color: rgba(13, 122, 92, .4);
  background: linear-gradient(135deg, var(--akzent-schein) 30%, #e7f0f8);
}

@media (prefers-color-scheme: dark) {
  .frei-karte {
    border-color: rgba(67, 221, 166, .35);
    background: linear-gradient(135deg, #0f231c 30%, #101d29);
  }
}

.frei-liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: .1rem 2rem;
  margin-bottom: 0;
}

/* ---------------------- Tabellen (preise.html) ---------------------- */

/* Auf schmalen Handys rollt die Preistabelle in ihrem eigenen Rahmen
   seitwärts, statt die ganze Seite breit zu ziehen. */
.tabellen-rolle { overflow-x: auto; }
.tabellen-rolle table { min-width: 34rem; }

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-block: 1rem 1.4rem;
  font-size: .95rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: .9rem;
  overflow: hidden;
}

th, td {
  text-align: left;
  padding: .6rem .8rem;
  border-bottom: 1px solid var(--linie);
  vertical-align: top;
}

tr:last-child td { border-bottom: 0; }

th {
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--nebel);
  background: var(--flaeche-tief);
}

/* --------------------- Formulare (widerruf.html) --------------------- */

input[type="text"], input[type="email"] {
  font: inherit;
  color: var(--tinte);
  background: var(--flaeche);
  border: 1px solid var(--linie-stark);
  border-radius: .5rem;
  padding: .5rem .65rem;
}

/* ---------------- Fuß der Nachbarseiten (im .container) ---------------- */

.container > footer {
  margin-top: 3rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--linie);
  color: var(--nebel);
  font-size: .9rem;
}

/* --------------------- Laden: die zweite Nacht --------------------- */

.laden {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(70rem 30rem at 50% 120%, rgba(47, 219, 164, .12), transparent 60%),
    linear-gradient(180deg, var(--nacht-hoch), #071310);
  color: var(--nacht-tinte);
  text-align: center;
}

.laden h2 { color: #f7fcf9; }
.laden h2[data-nr]::before { color: var(--polar-mint); }
.laden .abschnitt-intro { margin-inline: auto; color: rgba(233, 244, 238, .85); }
.laden .law { color: var(--nacht-nebel); }
.laden .knopf { margin-block: .6rem 1.2rem; }

/* -------------------------------- Fuß -------------------------------- */

.fuss {
  border-top: 1px solid var(--linie);
  background: var(--grund);
  padding-block: 1.8rem;
}

.fuss-innen {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.fuss p { margin: 0; color: var(--nebel); font-size: .9rem; }

.fuss nav {
  margin-left: auto;
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}

/* Textlinks im Fuß; der Widerrufsknopf bleibt ausgenommen, damit seine
   Farben ohne !important gelten. */
.fuss nav a:not(.fuss-widerruf) { font-size: .9rem; color: var(--tinte); }
.fuss nav a:not(.fuss-widerruf):hover { color: var(--akzent); }

/* Der Widerrufsknopf ist Pflicht (§ 356a BGB) und soll auffallen. */
.fuss nav a.fuss-widerruf {
  font-size: .9rem;
  border: 1px solid var(--akzent);
  border-radius: .55rem;
  padding: .35rem .7rem;
  font-weight: 600;
  color: var(--akzent);
  text-decoration: none;
}
.fuss nav a.fuss-widerruf:hover { background: var(--akzent); color: var(--knopf-text); }

@media (max-width: 38rem) {
  .fuss-innen { flex-direction: column; align-items: flex-start; }
  .fuss nav { margin-left: 0; }
}

/* ----------------------- Bewegung, komplett gekapselt -----------------------
   Alles, was sich bewegt, wohnt in diesem Block. Bei reduzierter Bewegung
   existiert nichts davon: die Seite ist dann vollständig statisch. */

/* --------------------------- Szenen-Galerie --------------------------- */
/* Toms Ansage 29.08.2026: viel mehr Beispiele, von links nach rechts
   wisch- und scrollbar. Die Rolle snapt je Karte; die Karten behalten den
   normalen Karten-Look und bleiben vom Scroll-Reveal ausgenommen. */

.galerie-rolle {
  display: flex;
  gap: 1.1rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: .25rem .25rem 1.1rem;
  margin-inline: -.25rem;
  scrollbar-width: thin;
  scrollbar-color: var(--linie-stark) transparent;
}
.galerie-rolle:focus-visible { outline: 2px solid var(--akzent); outline-offset: 4px; }
.galerie-rolle > .karte {
  flex: 0 0 auto;
  width: min(21rem, 82vw);
  scroll-snap-align: start;
}
.galerie-hinweis {
  font-family: var(--mono);
  font-size: .8rem;
  letter-spacing: .04em;
  color: var(--nebel);
  margin-top: .35rem;
}

/* --------------------------- Konfigurator --------------------------- */
/* "Stell dir deinen Tank zusammen": Auswahl links, Summe rechts. Die
   Pillen sind echte Checkboxen/Radios (accent-color), kein nachgebautes
   Formular — Tastatur und Vorlesen funktionieren von selbst. */

.konfig {
  margin-top: 2.6rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 18px;
  box-shadow: var(--karten-schatten);
  padding: clamp(1.4rem, 3vw, 2.2rem);
}
.konfig-titel { font-family: var(--serif); font-size: 1.5rem; margin-bottom: .3em; }
.konfig-flaechen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 21rem);
  gap: 1.6rem;
  align-items: start;
}
@media (max-width: 52rem) {
  .konfig-flaechen { grid-template-columns: 1fr; }
}
.konfig-wahl fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 1.15rem;
}
.konfig-wahl legend {
  font-weight: 650;
  font-size: 1.02rem;
  color: var(--tinte);
  margin-bottom: .5rem;
}
.konfig-pille {
  display: inline-flex;
  align-items: baseline;
  gap: .45rem;
  border: 1px solid var(--linie-stark);
  border-radius: 999px;
  padding: .42rem .85rem;
  margin: 0 .45rem .5rem 0;
  cursor: pointer;
  background: var(--flaeche);
  font-size: .92rem;
  transition: border-color .15s ease, background .15s ease;
}
.konfig-pille:hover { border-color: var(--akzent); }
.konfig-pille:has(input:checked) {
  border-color: var(--akzent);
  background: var(--akzent-schein);
}
.konfig-pille:has(input:focus-visible) { outline: 2px solid var(--akzent); outline-offset: 2px; }
.konfig-pille input { accent-color: var(--akzent); margin: 0; align-self: center; }
.konfig-pille small { color: var(--nebel); font-family: var(--mono); font-size: .74rem; }

.konfig-summe {
  background: var(--akzent-schein);
  border: 1px solid var(--linie);
  border-radius: 14px;
  padding: 1.2rem 1.3rem;
  position: sticky;
  top: 6rem;
}
.konfig-summe h4 { margin: 0 0 .5em; font-size: 1rem; color: var(--tinte); }
.konfig-posten {
  list-style: none;
  margin: 0 0 .9rem;
  padding: 0;
  font-size: .92rem;
  color: var(--tinte);
}
.konfig-posten li { padding: .18rem 0; border-bottom: 1px dashed var(--linie); }
.konfig-posten li:last-child { border-bottom: 0; }
.konfig-betrag { margin: 0 0 .3rem; display: flex; flex-direction: column; }
.konfig-betrag > span:first-child {
  font-family: var(--serif);
  font-size: 2.1rem;
  font-weight: 600;
  color: var(--tinte);
  letter-spacing: -.02em;
}
.konfig-tipp { margin-top: .7rem; }

@media (prefers-reduced-motion: no-preference) {

  html { scroll-behavior: smooth; }

  /* Weiche Übergänge */
  a { transition: color .15s ease, text-decoration-color .15s ease; }
  .knopf {
    transition: background-color .18s ease, border-color .18s ease,
                color .18s ease, box-shadow .22s ease, transform .18s ease;
  }
  .knopf:hover { transform: translateY(-1px); }
  .knopf:active { transform: translateY(0); }
  .karte, .preis-karte, .spalte {
    transition: transform .35s cubic-bezier(.22, .61, .36, 1),
                box-shadow .35s ease, border-color .35s ease;
  }
  .karte:hover, .preis-karte:hover { transform: translateY(-3px); }
  .zeit { transition: transform .25s ease; }
  .szene:hover .zeit { transform: rotate(0deg); }
  .pfeil-link::after { transition: transform .18s ease; }
  .pfeil-link:hover::after { transform: translateX(3px); }
  .fuss nav a.fuss-widerruf { transition: background-color .18s ease, color .18s ease; }

  /* Die Aurora treibt sehr langsam — nur transform, GPU-freundlich. */
  .aurora i { will-change: transform; }
  .aurora i:nth-child(1) { animation: polar-a 46s ease-in-out infinite alternate; }
  .aurora i:nth-child(2) { animation: polar-b 58s ease-in-out infinite alternate; }
  .aurora i:nth-child(3) { animation: polar-c 52s ease-in-out infinite alternate; }

  /* Hero-Choreographie beim Laden, sanft gestaffelt */
  .hero-text > * { animation: aufgang .7s cubic-bezier(.22, .61, .36, 1) backwards; }
  .hero-text > *:nth-child(1) { animation-delay: .05s; }
  .hero-text > *:nth-child(2) { animation-delay: .14s; }
  .hero-text > *:nth-child(3) { animation-delay: .24s; }
  .hero-text > *:nth-child(4) { animation-delay: .34s; }
  .hero-text > *:nth-child(5) { animation-delay: .42s; }
  .hero-text > *:nth-child(6) { animation-delay: .5s; }
  .hero-text > *:nth-child(7) { animation-delay: .58s; }
  .schaubild { animation: aufgang .85s cubic-bezier(.22, .61, .36, 1) .3s backwards; }

  /* Der Strich durch die Wolke zeichnet sich einmal selbst … */
  .sb-strich {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    animation: strich-ziehen .9s cubic-bezier(.22, .61, .36, 1) 1.15s forwards;
  }
  /* … und der KI-Chip pulsiert leise: die KI rechnet gerade. */
  .sb-icon:not(.sb-schloss) { animation: chip-puls 3.2s ease-in-out 2.2s infinite; }

  /* Außer Sicht ruht die Bühne: das Inline-Script setzt .ruht, sobald
     Hero bzw. Laden den Viewport verlassen — die Endlosschleifen (Aurora,
     Chip-Puls) pausieren dann, statt unsichtbar weiterzurechnen. Der
     einmalige Strich bleibt unberührt, er läuft schlicht zu Ende. */
  .ruht .aurora i,
  .ruht .sb-icon:not(.sb-schloss) { animation-play-state: paused; }

  /* Scroll-Reveals: die Klasse .enthuellen vergibt erst das Inline-Script
     (html.anim). Ohne JavaScript bleibt alles sofort sichtbar. */
  html.anim .enthuellen {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .65s ease var(--d, 0ms),
                transform .65s cubic-bezier(.22, .61, .36, 1) var(--d, 0ms);
  }
  html.anim .enthuellen.da { opacity: 1; transform: none; }

  @keyframes aufgang {
    from { opacity: 0; transform: translateY(16px); }
  }
  @keyframes polar-a {
    to { transform: translate3d(9vw, 6vh, 0) rotate(8deg) scale(1.12); }
  }
  @keyframes polar-b {
    to { transform: translate3d(-8vw, 10vh, 0) rotate(-10deg) scale(1.18); }
  }
  @keyframes polar-c {
    to { transform: translate3d(6vw, -6vh, 0) scale(1.08); }
  }
  @keyframes strich-ziehen {
    to { stroke-dashoffset: 0; }
  }
  @keyframes chip-puls {
    0%, 100% { opacity: 1; }
    50% { opacity: .45; }
  }
}

/* ------------------------------- Druck ------------------------------- */

@media print {
  /* Der Band-Selektor oben ist spezifischer (0,2,1) als body:has(> .kopf)
     (0,1,1) — fürs Papier muss er hier wörtlich wiederkehren, sonst
     bliebe das Nachtband beim Druck mit Hintergrunddarstellung stehen. */
  body, body:has(> .kopf):has(.hero) { background: #fff; }
  .aurora, .sprung { display: none; }
  .kopf { position: static; margin: 0; padding: 0; }
  .kopf-innen {
    background: none; border: 0; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .marke, .kopf nav a:not(.knopf), .marke-zusatz { color: #111; }
  .hero, .laden { background: none; color: #111; min-height: 0; border: 0; }
  .hero h1, .laden h2 { color: #111; }
  .hero .kicker, .hero .untertitel, .hero .law, .laden .law,
  .laden .abschnitt-intro { color: #333; }
  .fakten li { color: #333; border-color: #bbb; background: none; }
  .schaubild {
    background: none; border-color: #ccc; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .sb-titel, .sb-text { fill: #111; }
  .sb-klein, .sb-punkt { fill: #555; }
  .sb-box { fill: none; stroke: #999; }
  .sb-linie { stroke: #ccc; }
  .sb-icon { stroke: #111; }
  .sb-schloss, .sb-wolke { stroke: #555; }
  .sb-strich { filter: none; }
  .hero code, .laden code { background: none; border-color: #ccc; color: #111; }
  .karte, .preis-karte, .spalte { box-shadow: none; }
}