/* ==========================================================================
   Tixy.Cloud — Landingpage
   --------------------------------------------------------------------------
   Aufbau dieser Datei:
     01  Stellschrauben (Farben, Abstände, Radien, Schrift)
     02  Grundlagen und Zurücksetzen
     03  Typografie
     04  Layout
     05  Bewegung: Einblenden, Lichtspur, Schimmer
     06  Bausteine (Knöpfe, Karten, Listen, Marke)
     07  Kopfbereich
     08  Hero
     09  Nutzen
     10  Ablauf
     11  Preise
     12  Vergleich
     13  Formular
     14  FAQ
     15  Fußbereich
     16  Einwilligungsbanner
     17  Randfälle: Bewegung aus, Kontrast, Druck
     18  Größere Bildschirme

   Farben, Abstände und Radien werden ausschließlich in 01 gepflegt.
   Mobile first: die Grundwerte gelten fürs Handy, größere Bildschirme
   bekommen Ergänzungen in Abschnitt 18.

   Alle Effekte laufen ausschließlich über transform, opacity und
   Farbverläufe — nichts davon löst ein Neuberechnen des Layouts aus.
   Es gibt keine einzige Bilddatei: jede Fläche, jedes Leuchten und
   auch die Körnung sind CSS beziehungsweise SVG.
   ========================================================================== */


/* ==========================================================================
   01  Stellschrauben
   ========================================================================== */

:root {
  /* --- Farben. Vorgabe aus dem Gestaltungsraster. --- */
  --farbe-grund:        #050D18;
  --farbe-flaeche:      #0B1A2B;
  --farbe-rand:         #16304C;
  --farbe-akzent:       #10B4F0;
  --farbe-akzent-stark: #0A84E0;
  --farbe-text:         #FFFFFF;
  --farbe-text-leise:   #9BB3CB;
  --farbe-erfolg:       #22C36B;

  /* Abgeleitet, nicht neu erfinden */
  --farbe-flaeche-hoch: #102538;   /* Karte auf Karte */
  --farbe-rand-leise:   #102A44;
  --farbe-akzent-hell:  #4CCBFA;
  --farbe-fehler:       #FF7A85;   /* Kontrast 6.4:1 auf --farbe-flaeche */

  /* --- Schrift --- */
  --schrift: "Inter var", "Inter", -apple-system, BlinkMacSystemFont,
             "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* --- Abstände --- */
  --raum-3xs: 0.25rem;
  --raum-2xs: 0.5rem;
  --raum-xs:  0.75rem;
  --raum-s:   1rem;
  --raum-m:   1.5rem;
  --raum-l:   2rem;
  --raum-xl:  3rem;
  --raum-2xl: 4rem;
  --raum-3xl: 5.5rem;

  /* --- Radien --- */
  --radius-s:  10px;
  --radius-m:  16px;
  --radius-l:  20px;
  --radius-pille: 999px;

  /* --- Schatten und Leuchten. Sparsam, sonst wirkt Dunkelblau matschig. --- */
  --schatten-karte: 0 1px 2px rgba(0, 0, 0, .4);
  --schatten-hoch:  0 18px 40px -20px rgba(0, 0, 0, .85);
  --schein-akzent:  0 0 0 1px rgba(16, 180, 240, .35),
                    0 12px 32px -14px rgba(16, 180, 240, .55);
  --schein-stark:   0 0 0 1px rgba(16, 180, 240, .5),
                    0 18px 44px -16px rgba(16, 180, 240, .75);

  /* --- Zeiten --- */
  --zeit-kurz: .16s;
  --zeit-mittel: .32s;
  --weich: cubic-bezier(.22, .61, .36, 1);

  /* --- Maße --- */
  --breite-max:    75rem;   /* 1200px */
  --breite-schmal: 46rem;   /* 736px  */
  --kopf-hoehe:    4.25rem;
}

/* Registrierte Eigenschaften. Nur damit lassen sich Winkel und
   Leuchtstärke weich überblenden statt hart umzuspringen.
   Browser ohne @property zeigen den Ruhezustand — kein Fehler. */
@property --winkel {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@property --glanz {
  syntax: "<number>";
  initial-value: 0;
  inherits: false;
}


/* ==========================================================================
   02  Grundlagen und Zurücksetzen
   ========================================================================== */

/* Eine Datei, alle Schnitte von 100 bis 900. Subset auf lateinische
   Zeichen: 71 kB statt 352 kB. Lizenz: assets/fonts/Inter-LICENSE.txt */
@font-face {
  font-family: "Inter var";
  src: url("assets/fonts/InterVariable-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

*,
*::before,
*::after { box-sizing: border-box; }

/* Das hidden-Attribut muss stärker sein als jede eigene display-Regel.
   Ohne diese Zeile überstimmt z. B. `.bestaetigung { display: grid }` das
   hidden und der Block wäre von Anfang an sichtbar. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anker landen nicht unter dem fixierten Kopfbereich */
  scroll-padding-top: calc(var(--kopf-hoehe) + var(--raum-s));
}

body {
  margin: 0;
  /* clip statt hidden: verhindert Querscrollen, ohne position:sticky zu brechen */
  overflow-x: clip;
  background-color: var(--farbe-grund);
  color: var(--farbe-text);
  font-family: var(--schrift);
  font-size: 1rem;
  line-height: 1.65;
  font-optical-sizing: auto;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Zwei sehr schwache Lichtquellen über der gesamten Seite.
   Fest verankert, damit beim Scrollen Tiefe entsteht. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(58rem 34rem at 84% -10%, rgba(16, 180, 240, .16), transparent 60%),
    radial-gradient(46rem 30rem at 4% 8%,   rgba(10, 132, 224, .12), transparent 58%),
    radial-gradient(40rem 26rem at 50% 108%, rgba(16, 180, 240, .10), transparent 62%);
}

/* Feine Körnung. Nimmt dem Farbverlauf die Streifenbildung und gibt der
   Fläche Textur. Eine SVG-Rauschtextur direkt im Stylesheet: keine
   zusätzliche Anfrage, wenige hundert Byte. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23r)'/%3E%3C/svg%3E");
}

img, svg, video { max-width: 100%; }
img, video { height: auto; display: block; }

a {
  color: var(--farbe-akzent);
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  transition: color var(--zeit-kurz) ease;
}
a:hover { color: var(--farbe-akzent-hell); }

/* Sichtbarer Fokus, überall, ohne Ausnahme. */
:focus-visible {
  outline: 3px solid var(--farbe-akzent);
  outline-offset: 3px;
  border-radius: var(--radius-s);
}

/* Symbolvorrat darf keinen Platz einnehmen */
.symbolvorrat { position: absolute; width: 0; height: 0; overflow: hidden; }

.nur-fuer-screenreader {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.sprungmarke {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -110%);
  z-index: 100;
  padding: var(--raum-xs) var(--raum-m);
  background: var(--farbe-akzent);
  color: var(--farbe-grund);
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 var(--radius-m) var(--radius-m);
  transition: transform .18s ease;
}
.sprungmarke:focus { transform: translate(-50%, 0); color: var(--farbe-grund); }


/* ==========================================================================
   03  Typografie
   ========================================================================== */

h1, h2, h3, h4 {
  margin: 0;
  line-height: 1.12;
  letter-spacing: -0.022em;
  font-weight: 800;
  text-wrap: balance;
}

h1 { font-size: clamp(2.5rem, 9vw, 4.75rem); letter-spacing: -0.038em; line-height: 1.04; }
h2 { font-size: clamp(1.75rem, 5.4vw, 2.85rem); letter-spacing: -0.03em; }
h3 { font-size: clamp(1.125rem, 2.4vw, 1.3rem); font-weight: 700; letter-spacing: -0.018em; }

p { margin: 0 0 var(--raum-s); }
p:last-child { margin-bottom: 0; }

.blau { color: var(--farbe-akzent); }

/* Überschriften-Wort mit Verlauf und langsamem Lichtwandern.
   Fällt ohne background-clip auf die volle Akzentfarbe zurück. */
.leuchttext {
  color: var(--farbe-akzent);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .leuchttext {
    background-image: linear-gradient(
      100deg,
      var(--farbe-akzent-stark) 0%,
      var(--farbe-akzent) 26%,
      #8FE3FF 46%,
      var(--farbe-akzent) 62%,
      var(--farbe-akzent-stark) 100%
    );
    background-size: 260% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: schimmer 9s ease-in-out infinite;
  }
}

.augenbraue {
  display: flex;
  /* Nicht zentriert: bricht die Zeile um, muss der Punkt an der ersten
     Zeile stehen bleiben, nicht in die Mitte des Blocks rutschen. */
  align-items: flex-start;
  gap: .55rem;
  margin: 0 0 var(--raum-s);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--farbe-akzent);
}
/* Kleiner Leuchtpunkt vor der Zeile, wie in den Anzeigenmotiven */
.augenbraue::before {
  content: "";
  width: .45rem; height: .45rem;
  margin-top: .48em;
  border-radius: 50%;
  background: var(--farbe-akzent);
  box-shadow: 0 0 0 3px rgba(16, 180, 240, .22), 0 0 12px rgba(16, 180, 240, .9);
  flex: 0 0 auto;
  animation: pulsieren 2.8s ease-in-out infinite;
}

.abschnitt__satz {
  max-width: 46ch;
  color: var(--farbe-text-leise);
  font-size: clamp(1rem, 2.4vw, 1.0625rem);
  text-wrap: pretty;
}


/* ==========================================================================
   04  Layout
   ========================================================================== */

.huelle {
  width: 100%;
  max-width: var(--breite-max);
  margin-inline: auto;
  padding-inline: var(--raum-s);
}
.huelle--schmal { max-width: var(--breite-schmal); }

.abschnitt { padding-block: var(--raum-2xl); position: relative; }

/* Abschnitte mit Fläche heben sich ab, ohne harte Kante */
.abschnitt--flaeche {
  background:
    linear-gradient(180deg, rgba(11, 26, 43, 0) 0%, rgba(11, 26, 43, .6) 12%,
                            rgba(11, 26, 43, .6) 88%, rgba(11, 26, 43, 0) 100%);
}

/* Haarlinie als Abschnittstrenner, in der Mitte hell auslaufend */
.abschnitt--flaeche::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(16, 180, 240, .45) 50%, transparent);
}

.abschnitt__kopf { margin-bottom: var(--raum-xl); }
.abschnitt__kopf h2 { margin-bottom: var(--raum-s); }

.raster { display: grid; gap: var(--raum-s); margin: 0; padding: 0; list-style: none; }


/* ==========================================================================
   05  Bewegung
   ==========================================================================
   Drei Effekte, alle abschaltbar über prefers-reduced-motion (Abschnitt 17):

     a) Einblenden beim Hochscrollen   .einblenden / .ist-sichtbar
     b) Lichtspur unter dem Zeiger     --maus-x / --maus-y auf .karte
     c) Dauerbewegung                  Aurora, Schimmer, Pulsschlag

   Alle Bewegungen laufen über transform und opacity. Kein Layoutumbruch,
   damit auch ältere Telefone flüssig bleiben.
   ========================================================================== */

@keyframes aufsteigen {
  from { opacity: 0; transform: translate3d(0, 1.5rem, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes schimmer {
  0%, 100% { background-position: 100% 0; }
  50%      { background-position: 0 0; }
}

@keyframes pulsieren {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: .55; transform: scale(.82); }
}

@keyframes drehen {
  to { --winkel: 360deg; }
}

@keyframes aurora-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33%      { transform: translate3d(6%, -4%, 0) scale(1.12); }
  66%      { transform: translate3d(-4%, 5%, 0) scale(.94); }
}

@keyframes aurora-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.05); }
  50%      { transform: translate3d(-7%, 6%, 0) scale(.9); }
}

@keyframes signal {
  0%       { transform: translateY(-100%); opacity: 0; }
  12%      { opacity: 1; }
  88%      { opacity: 1; }
  100%     { transform: translateY(340%); opacity: 0; }
}

/* --- a) Einblenden beim Scrollen ---------------------------------------
   Die Klasse .einblenden vergibt script.js — und zwar ausschließlich an
   Elemente, die beim Laden noch unterhalb des Bildschirms liegen. Damit
   kann nichts kurz aufblitzen und wieder verschwinden.
   Ohne JavaScript bekommt niemand die Klasse: alles ist sofort da. */

.einblenden {
  opacity: 0;
  transform: translate3d(0, 1.75rem, 0);
  transition:
    opacity .7s var(--weich) var(--verzoegerung, 0s),
    transform .7s var(--weich) var(--verzoegerung, 0s);
  will-change: opacity, transform;
}
.einblenden.ist-sichtbar {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  will-change: auto;
}

/* Der Hero blendet ohne JavaScript ein — reine CSS-Animation, die schon
   beim Auswerten des Stylesheets greift. */
.beim-laden > * {
  opacity: 0;
  animation: aufsteigen .85s var(--weich) forwards;
}
.beim-laden > *:nth-child(1) { animation-delay: .05s; }
.beim-laden > *:nth-child(2) { animation-delay: .14s; }
.beim-laden > *:nth-child(3) { animation-delay: .23s; }
.beim-laden > *:nth-child(4) { animation-delay: .32s; }
.beim-laden > *:nth-child(5) { animation-delay: .41s; }


/* ==========================================================================
   06  Bausteine
   ========================================================================== */

/* --- Marke ------------------------------------------------------------- */

/* Wort-Bild-Marke. Der Schriftzug erbt color (siehe Kommentar am Symbol
   im Markup), die Bildmarke behält ihre eigenen Blautöne. */
.marke {
  display: inline-flex;
  align-items: center;
  color: var(--farbe-text);
  text-decoration: none;
  transition: filter var(--zeit-mittel) ease;
}
.marke:hover { color: var(--farbe-text); }

.marke__logo {
  display: block;
  height: 1.75rem;          /* Seitenverhältnis 340:51 */
  width: auto;
  filter: drop-shadow(0 0 12px rgba(16, 180, 240, .3));
  transition: filter var(--zeit-mittel) ease;
}
a.marke:hover .marke__logo { filter: drop-shadow(0 0 18px rgba(16, 180, 240, .6)); }

.fuss .marke__logo { height: 1.5rem; }

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

.knopf {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 3rem;                 /* Fingerkuppe, WCAG 2.5.5 */
  padding: .75rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pille);
  font: inherit;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: background-color var(--zeit-kurz) ease,
              border-color var(--zeit-kurz) ease,
              color var(--zeit-kurz) ease,
              transform var(--zeit-kurz) ease,
              box-shadow var(--zeit-mittel) ease;
}
.knopf:active { transform: translateY(1px); }

.knopf--primaer {
  background: linear-gradient(180deg, var(--farbe-akzent) 0%, var(--farbe-akzent-stark) 100%);
  color: var(--farbe-grund);
  box-shadow: var(--schein-akzent);
}
.knopf--primaer:hover {
  background: linear-gradient(180deg, #45C8F7 0%, #1191EE 100%);
  color: var(--farbe-grund);
  box-shadow: var(--schein-stark);
}

/* Lichtreflex, der beim Überfahren einmal quer läuft */
.knopf--primaer::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, .5) 50%, transparent 68%);
  transform: translateX(-120%);
  transition: transform .6s var(--weich);
}
.knopf--primaer:hover::after { transform: translateX(120%); }

.knopf--sekundaer {
  background: rgba(11, 26, 43, .5);
  border-color: var(--farbe-rand);
  color: var(--farbe-text);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.knopf--sekundaer:hover {
  border-color: var(--farbe-akzent);
  background: rgba(16, 180, 240, .1);
  color: var(--farbe-text);
  box-shadow: 0 0 0 1px rgba(16, 180, 240, .25);
}

.knopf--klein { min-height: 2.625rem; padding: .5rem 1.125rem; font-size: .9375rem; }
.knopf--breit { width: 100%; }

.knopf__pfeil {
  width: 1.125rem; height: 1.125rem;
  flex: 0 0 auto;
  transition: transform var(--zeit-mittel) var(--weich);
}
.knopf:hover .knopf__pfeil { transform: translateX(.28rem); }

.knopfreihe { display: flex; flex-wrap: wrap; gap: var(--raum-xs); }
.knopfreihe .knopf { flex: 1 1 14rem; }

/* --- Karten ------------------------------------------------------------
   Jede Karte trägt eine Lichtspur, die dem Zeiger folgt. Die Position
   kommt als --maus-x / --maus-y aus script.js; ohne JavaScript oder auf
   Geräten ohne Maus bleibt sie schlicht aus. */

.karte {
  position: relative;
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius-l);
  padding: var(--raum-m);
  box-shadow: var(--schatten-karte);
  transition: border-color var(--zeit-mittel) ease,
              transform var(--zeit-mittel) var(--weich),
              box-shadow var(--zeit-mittel) ease;
}

.karte::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    16rem 16rem at var(--maus-x, 50%) var(--maus-y, 0%),
    rgba(16, 180, 240, .16),
    transparent 68%
  );
  opacity: 0;
  transition: opacity var(--zeit-mittel) ease;
}
/* Inhalt liegt über der Lichtspur */
.karte > * { position: relative; z-index: 1; }

@media (hover: hover) and (pointer: fine) {
  .karte:hover {
    border-color: rgba(16, 180, 240, .42);
    transform: translateY(-2px);
    box-shadow: var(--schatten-hoch);
  }
  .karte:hover::before { opacity: 1; }
}

/* --- Häkchenlisten ----------------------------------------------------- */

.hakenliste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--raum-2xs); }
.hakenliste li {
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  gap: .625rem;
  align-items: start;
  color: var(--farbe-text-leise);
  font-size: .9375rem;
  line-height: 1.55;
}
.hakenliste .haken {
  width: 1.25rem; height: 1.25rem;
  margin-top: .16em;
  color: var(--farbe-erfolg);
  flex: 0 0 auto;
}
.hakenliste--gross li { font-size: 1rem; color: var(--farbe-text); }

.hinweisblock { margin-bottom: var(--raum-m); }
.hinweisblock .hakenliste { margin: var(--raum-s) 0; }


/* ==========================================================================
   07  Kopfbereich
   ========================================================================== */

.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(5, 13, 24, .74);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid transparent;
  transition: border-color var(--zeit-mittel) ease, background-color var(--zeit-mittel) ease;
}
/* Rand erscheint erst beim Scrollen (Klasse setzt script.js) */
.kopf.ist-gescrollt {
  border-bottom-color: var(--farbe-rand-leise);
  background: rgba(5, 13, 24, .93);
}

/* Lesefortschritt als Haarlinie am unteren Rand des Kopfbereichs */
.kopf__fortschritt {
  position: absolute;
  left: 0; bottom: -1px;
  height: 2px;
  width: 100%;
  transform: scaleX(var(--fortschritt, 0));
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--farbe-akzent-stark), var(--farbe-akzent), #8FE3FF);
  box-shadow: 0 0 12px rgba(16, 180, 240, .7);
  pointer-events: none;
}

.kopf__innen {
  min-height: var(--kopf-hoehe);
  display: flex;
  align-items: center;
  gap: var(--raum-s);
}

.kopf__nav { display: none; }

/* Auf schmalen Geräten müssen Marke und Knopf zusammen in eine Zeile
   passen — sonst bricht die Beschriftung um und der Kopf wird doppelt
   so hoch. Beide werden deshalb bis 30rem etwas kleiner gesetzt. */
.kopf .knopf {
  margin-left: auto;
  white-space: nowrap;
}

@media (max-width: 29.99rem) {
  .kopf .marke__logo { height: 1.5rem; }
  .kopf .knopf--klein {
    padding: .5rem .9rem;
    font-size: .8125rem;
    min-height: 2.5rem;
  }
}

@media (min-width: 56rem) {
  .kopf__nav {
    display: flex;
    gap: var(--raum-m);
    margin-left: var(--raum-l);
  }
  .kopf__nav a {
    position: relative;
    color: var(--farbe-text-leise);
    text-decoration: none;
    font-size: .9375rem;
    font-weight: 600;
    padding-block: .25rem;
  }
  .kopf__nav a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -.1rem;
    height: 1px;
    background: var(--farbe-akzent);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform var(--zeit-mittel) var(--weich);
  }
  .kopf__nav a:hover { color: var(--farbe-text); }
  .kopf__nav a:hover::after { transform: scaleX(1); }
}


/* ==========================================================================
   08  Hero
   ========================================================================== */

.hero {
  position: relative;
  padding-block: var(--raum-xl) var(--raum-2xl);
  isolation: isolate;
}

/* Bewegte Lichtflächen. Zwei weich gezeichnete Farbfelder, die sehr
   langsam wandern — die Seite wirkt lebendig, ohne abzulenken. */
/* Bündig mit dem Viewport, nicht darüber hinaus — sonst entstünde eine
   Seite, die 128 px breiter ist als der Bildschirm. Die Farbfelder
   dürfen ruhig überstehen, sie werden hier zugeschnitten. */
.hero__aurora {
  position: absolute;
  inset: -20% 0 auto;
  height: 42rem;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
}
.hero__aurora span {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .5;
}
.hero__aurora span:nth-child(1) {
  width: 34rem; height: 26rem;
  top: 8%; right: -12%;
  background: radial-gradient(circle, rgba(16, 180, 240, .62), transparent 68%);
  animation: aurora-a 22s ease-in-out infinite;
}
.hero__aurora span:nth-child(2) {
  width: 28rem; height: 24rem;
  top: 34%; left: -14%;
  background: radial-gradient(circle, rgba(10, 132, 224, .5), transparent 68%);
  animation: aurora-b 27s ease-in-out infinite;
}
.hero__aurora span:nth-child(3) {
  width: 22rem; height: 18rem;
  top: 2%; left: 34%;
  background: radial-gradient(circle, rgba(76, 203, 250, .3), transparent 70%);
  animation: aurora-a 31s ease-in-out infinite reverse;
}

/* Rasterlinien, sehr schwach. Rein dekorativ, keine Bilddatei. */
.hero__schein {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(22, 48, 76, .34) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22, 48, 76, .34) 1px, transparent 1px);
  background-size: 4.5rem 4.5rem;
  mask-image: radial-gradient(52rem 32rem at 50% 6%, #000 0%, transparent 74%);
  -webkit-mask-image: radial-gradient(52rem 32rem at 50% 6%, #000 0%, transparent 74%);
}

.hero__innen { position: relative; }
.hero__text { max-width: 40rem; }

.hero__titel { margin-bottom: var(--raum-m); }

.hero__satz {
  max-width: 40ch;
  margin-bottom: var(--raum-l);
  color: var(--farbe-text-leise);
  font-size: clamp(1.0625rem, 3.2vw, 1.1875rem);
  line-height: 1.6;
  text-wrap: pretty;
}

.vertrauen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-2xs) var(--raum-m);
  margin: var(--raum-l) 0 0;
  padding: 0;
  list-style: none;
}
.vertrauen li {
  display: flex;
  align-items: center;
  gap: .45rem;
  color: var(--farbe-text-leise);
  font-size: .875rem;
  font-weight: 500;
}
.vertrauen svg {
  width: 1rem; height: 1rem;
  color: var(--farbe-erfolg);
  flex: 0 0 auto;
  filter: drop-shadow(0 0 6px rgba(34, 195, 107, .5));
}

/* Schematische Darstellung — erst ab Tablet, auf dem Handy zählt Tempo. */
.hero__bild { display: none; }


/* ==========================================================================
   09  Nutzen
   ========================================================================== */

.nutzen { display: flex; flex-direction: column; gap: var(--raum-xs); }

.nutzen__zeichen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: var(--radius-s);
  background: linear-gradient(150deg, rgba(16, 180, 240, .18), var(--farbe-flaeche-hoch));
  border: 1px solid var(--farbe-rand);
  color: var(--farbe-akzent);
  transition: border-color var(--zeit-mittel) ease,
              box-shadow var(--zeit-mittel) ease,
              transform var(--zeit-mittel) var(--weich);
}
.nutzen__zeichen svg { width: 1.375rem; height: 1.375rem; }

.karte:hover .nutzen__zeichen {
  border-color: rgba(16, 180, 240, .55);
  box-shadow: 0 0 20px -4px rgba(16, 180, 240, .6);
  transform: translateY(-1px);
}

.nutzen p { color: var(--farbe-text-leise); font-size: .9375rem; }


/* ==========================================================================
   10  Ablauf
   ========================================================================== */

.schritte {
  display: grid;
  gap: var(--raum-s);
  margin: 0;
  padding: 0;
  list-style: none;
}

.schritt {
  display: flex;
  flex-direction: column;
  gap: var(--raum-xs);
  overflow: hidden;   /* hält die Schattenziffer in der Karte */
}

/* Große, sehr schwache Ziffer im Hintergrund der Karte */
.schritt::after {
  content: attr(data-nummer);
  position: absolute;
  right: -.5rem; bottom: -2.2rem;
  z-index: 0;
  font-size: 7.5rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;
  color: rgba(155, 179, 203, .07);
  pointer-events: none;
  transition: color var(--zeit-mittel) ease, transform var(--zeit-mittel) var(--weich);
}
.karte.schritt:hover::after {
  color: rgba(16, 180, 240, .16);
  transform: translateY(-.35rem);
}

.schritt__nr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: var(--radius-pille);
  background: rgba(16, 180, 240, .12);
  border: 1px solid rgba(16, 180, 240, .34);
  color: var(--farbe-akzent);
  font-weight: 800;
  font-size: 1.0625rem;
  font-variant-numeric: tabular-nums;
  transition: box-shadow var(--zeit-mittel) ease, background-color var(--zeit-mittel) ease;
}
.karte.schritt:hover .schritt__nr {
  background: rgba(16, 180, 240, .2);
  box-shadow: 0 0 22px -4px rgba(16, 180, 240, .75);
}

.schritt p { color: var(--farbe-text-leise); font-size: .9375rem; }


/* ==========================================================================
   11  Preise
   ========================================================================== */

.preisraster {
  display: grid;
  gap: var(--raum-s);
  align-items: stretch;
  /* Solange die Karten untereinander stehen, werden sie nicht auf volle
     Breite gezogen — auf dem Tablet sähen sie sonst auseinandergerissen
     aus. Ab 56rem hebt die Dreispaltigkeit die Begrenzung wieder auf. */
  max-width: 30rem;
  margin-inline: auto;
}

.tarif {
  display: flex;
  flex-direction: column;
  gap: var(--raum-s);
  padding: var(--raum-m);
}

.tarif--hervorgehoben {
  border-color: rgba(16, 180, 240, .5);
  background:
    linear-gradient(180deg, rgba(16, 180, 240, .1) 0%, rgba(16, 180, 240, 0) 44%),
    var(--farbe-flaeche);
  box-shadow: var(--schatten-hoch);
}

/* Umlaufender Lichtrand auf der Empfehlungskarte.
   Zwei Masken schneiden die Fläche zu einem 1 px breiten Rahmen. */
.tarif--hervorgehoben::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from var(--winkel),
    transparent 0deg,
    var(--farbe-akzent) 40deg,
    #8FE3FF 70deg,
    var(--farbe-akzent) 100deg,
    transparent 150deg,
    transparent 210deg,
    var(--farbe-akzent-stark) 265deg,
    transparent 320deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: drehen 7s linear infinite;
  pointer-events: none;
}

.tarif__fahne {
  position: absolute;
  top: 0; left: var(--raum-m);
  transform: translateY(-50%);
  z-index: 2;
  padding: .3rem .75rem;
  border-radius: var(--radius-pille);
  background: linear-gradient(180deg, var(--farbe-akzent) 0%, var(--farbe-akzent-stark) 100%);
  color: var(--farbe-grund);
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 6px 18px -8px rgba(16, 180, 240, .95);
}

.tarif__kopf { display: flex; flex-direction: column; gap: var(--raum-3xs); }
.tarif__name { font-size: 1.1875rem; }
.tarif__kurz { color: var(--farbe-text-leise); font-size: .9375rem; line-height: 1.5; }

.tarif__preisblock {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem .5rem;
  padding-top: var(--raum-2xs);
}
.tarif__preis {
  font-size: clamp(2.25rem, 7.5vw, 2.9rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #FFFFFF 30%, #B9D2E8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* "Preis auf Anfrage" darf die Karte nicht sprengen */
.tarif__preis--anfrage {
  font-size: clamp(1.375rem, 4.6vw, 1.8rem);
  letter-spacing: -0.025em;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--farbe-akzent);
}
.tarif__einheit { color: var(--farbe-text-leise); font-size: .9375rem; font-weight: 500; }
.tarif__ust { width: 100%; color: var(--farbe-text-leise); font-size: .8125rem; }

.tarif__abrechnung {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: .4rem;
  padding: .3rem .7rem;
  border-radius: var(--radius-pille);
  border: 1px solid var(--farbe-rand);
  background: var(--farbe-flaeche-hoch);
  color: var(--farbe-text-leise);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.tarif__abrechnung::before {
  content: "";
  width: .4rem; height: .4rem;
  border-radius: 50%;
  background: var(--farbe-akzent);
  box-shadow: 0 0 8px rgba(16, 180, 240, .9);
  flex: 0 0 auto;
}

.tarif__satz { color: var(--farbe-text-leise); font-size: .875rem; }

.tarif__hinweis {
  padding: var(--raum-xs);
  border-radius: var(--radius-s);
  border: 1px solid rgba(34, 195, 107, .32);
  background: rgba(34, 195, 107, .09);
  color: var(--farbe-text);
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.5;
}
/* Einschränkende Hinweise nicht grün färben — das las sich wie ein Vorteil. */
.tarif__hinweis--einschraenkung {
  border-color: var(--farbe-rand);
  background: var(--farbe-flaeche-hoch);
  color: var(--farbe-text-leise);
  font-weight: 500;
}

/* Die Häkchenliste schließt direkt an den Text an. Nur der Knopf wird
   nach unten gedrückt — so stehen die Knöpfe aller drei Karten auf einer
   Linie, ohne dass bei der kürzesten Karte eine Lücke mitten im Text
   entsteht. */
.tarif__leistungen { padding-top: var(--raum-2xs); }
.tarif .knopf { margin-top: auto; }

/* --- Erklärblock zu den Abrechnungsarten --- */

.abrechnung {
  position: relative;
  margin-top: var(--raum-l);
  padding: var(--raum-m);
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius-l);
  background:
    linear-gradient(180deg, rgba(16, 180, 240, .07) 0%, rgba(16, 180, 240, 0) 60%),
    var(--farbe-flaeche);
}
.abrechnung__titel { margin-bottom: var(--raum-s); font-size: 1.0625rem; }
.abrechnung__raster { display: grid; gap: var(--raum-s); }

.abrechnungsart {
  position: relative;
  padding: var(--raum-s);
  border-radius: var(--radius-m);
  border: 1px solid var(--farbe-rand);
  background: var(--farbe-grund);
  overflow: hidden;
  transition: border-color var(--zeit-mittel) ease;
}
/* Farbstreifen links, macht die drei Arten auf einen Blick unterscheidbar */
.abrechnungsart::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--farbe-akzent), var(--farbe-akzent-stark));
  opacity: .8;
}
.abrechnungsart:hover { border-color: rgba(16, 180, 240, .4); }

.abrechnungsart__kennzeichen {
  display: block;
  margin-bottom: var(--raum-3xs);
  color: var(--farbe-akzent);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.015em;
}
.abrechnungsart__gehoert {
  display: block;
  margin-bottom: var(--raum-2xs);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--farbe-text-leise);
}
.abrechnungsart p { color: var(--farbe-text-leise); font-size: .875rem; line-height: 1.55; }

/* Was nach dem Ende der Flatrate passiert — der Punkt, der die
   größte Sorge nimmt, deshalb optisch abgesetzt. */
.danach {
  margin-top: var(--raum-s);
  padding: var(--raum-s);
  border: 1px solid rgba(34, 195, 107, .3);
  border-radius: var(--radius-m);
  background: rgba(34, 195, 107, .07);
}
.danach__titel {
  margin: 0 0 var(--raum-3xs);
  font-size: .9375rem;
  font-weight: 700;
  color: var(--farbe-erfolg);
}
.danach p {
  margin: 0;
  color: var(--farbe-text-leise);
  font-size: .875rem;
  line-height: 1.55;
}

.abrechnung__fuss {
  margin-top: var(--raum-s);
  color: var(--farbe-text-leise);
  font-size: .8125rem;
}


/* ==========================================================================
   12  Vergleich
   ========================================================================== */

.vergleich { display: grid; gap: var(--raum-xs); }

.vgruppe {
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius-l);
  background: var(--farbe-flaeche);
  overflow: hidden;
  transition: border-color var(--zeit-mittel) ease;
}
.vgruppe:hover { border-color: rgba(16, 180, 240, .3); }

.vgruppe > summary {
  display: flex;
  align-items: center;
  gap: var(--raum-2xs);
  padding: var(--raum-s) var(--raum-m);
  cursor: pointer;
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.015em;
  list-style: none;
  min-height: 3rem;
  transition: background-color var(--zeit-kurz) ease;
}
.vgruppe > summary::-webkit-details-marker { display: none; }

/* Eigenes Zeichen, damit es in beide Richtungen animiert */
.vgruppe > summary::after {
  content: "";
  margin-left: auto;
  width: .65rem; height: .65rem;
  border-right: 2px solid var(--farbe-akzent);
  border-bottom: 2px solid var(--farbe-akzent);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--zeit-mittel) var(--weich);
  flex: 0 0 auto;
}
.vgruppe[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.vgruppe > summary:hover { background: var(--farbe-flaeche-hoch); }

.vgruppe__inhalt { padding: 0 var(--raum-m) var(--raum-m); }

.vtabelle { width: 100%; border-collapse: collapse; text-align: left; }
.vtabelle th, .vtabelle td { font-size: .875rem; }

/* --- Handy: gestapelt, kein Querscrollen --- */
.vtabelle thead { display: none; }
.vtabelle tbody, .vtabelle tr, .vtabelle th, .vtabelle td { display: block; }

.vtabelle tr {
  padding: var(--raum-s) 0;
  border-top: 1px solid var(--farbe-rand-leise);
}
.vtabelle tr:first-child { border-top: none; padding-top: 0; }

.vtabelle tbody th {
  font-weight: 700;
  color: var(--farbe-text);
  margin-bottom: var(--raum-2xs);
  line-height: 1.45;
}

.vtabelle td {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--raum-s);
  padding: .3rem 0;
  color: var(--farbe-text-leise);
}
.vtabelle td::before {
  content: attr(data-paket);
  flex: 0 0 auto;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--farbe-text-leise);
  opacity: .8;
}
.vtabelle td > * { text-align: right; }

.vwert { display: inline-flex; align-items: center; gap: .35rem; }
.vwert svg { width: 1.125rem; height: 1.125rem; flex: 0 0 auto; }
.vwert--ja {
  color: var(--farbe-erfolg);
  filter: drop-shadow(0 0 6px rgba(34, 195, 107, .45));
}
.vwert--nein { color: var(--farbe-text-leise); opacity: .5; }
.vwert--text { color: var(--farbe-text); font-weight: 600; }


/* ==========================================================================
   13  Formular
   ========================================================================== */

.anfrage { display: grid; gap: var(--raum-xl); }

.anfrage__text h2 { margin-bottom: var(--raum-s); }
.anfrage__text .hakenliste { margin-top: var(--raum-m); }

.formularkarte { padding: var(--raum-m); }
/* Die Lichtspur würde beim Tippen ständig aufblitzen */
.formularkarte::before { display: none; }
.formularkarte:hover { transform: none; }

.formular { display: grid; gap: var(--raum-s); }

.feld { display: grid; gap: .375rem; }

.feld > label {
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: -0.005em;
}
.pflicht  { color: var(--farbe-akzent); }
.optional {
  margin-left: .35rem;
  color: var(--farbe-text-leise);
  font-weight: 500;
  font-size: .8125rem;
}

input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
  width: 100%;
  min-height: 3rem;
  padding: .7rem .875rem;
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius-s);
  background: var(--farbe-grund);
  color: var(--farbe-text);
  font: inherit;
  /* 16px verhindert das Hineinzoomen von iOS beim Antippen */
  font-size: 1rem;
  line-height: 1.4;
  transition: border-color var(--zeit-kurz) ease, box-shadow var(--zeit-kurz) ease;
  appearance: none;
  -webkit-appearance: none;
}
textarea { min-height: 6.5rem; resize: vertical; }

input::placeholder, textarea::placeholder { color: #6F89A3; }

input:hover, select:hover, textarea:hover { border-color: #1E4066; }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--farbe-akzent);
  box-shadow: 0 0 0 3px rgba(16, 180, 240, .25);
}
/* Tastaturnutzer bekommen zusätzlich den Systemrahmen */
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--farbe-akzent);
  outline-offset: 2px;
}

select {
  padding-right: 2.5rem;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--farbe-akzent) 50%),
    linear-gradient(135deg, var(--farbe-akzent) 50%, transparent 50%);
  background-position: right 1.15rem center, right .875rem center;
  background-size: .35rem .35rem, .35rem .35rem;
  background-repeat: no-repeat;
  cursor: pointer;
}
select option { background: var(--farbe-flaeche); color: var(--farbe-text); }

.hilfe { margin: 0; color: var(--farbe-text-leise); font-size: .8125rem; line-height: 1.5; }

/* --- Fehler direkt am Feld --- */

.fehler {
  margin: 0;
  color: var(--farbe-fehler);
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.45;
  display: none;
}
.fehler.ist-sichtbar { display: block; }

.feld.hat-fehler input,
.feld.hat-fehler select,
.feld.hat-fehler textarea {
  border-color: var(--farbe-fehler);
}
.feld.hat-fehler input:focus,
.feld.hat-fehler select:focus,
.feld.hat-fehler textarea:focus {
  box-shadow: 0 0 0 3px rgba(255, 122, 133, .25);
}

/* --- Einwilligung --- */

.feld--zustimmung { gap: .5rem; }

.ankreuz { display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: start; }

.ankreuz input[type="checkbox"] {
  /* 24 px: Mindestgröße für Tippziele (WCAG 2.5.8). Zusätzlich schaltet
     die zugehörige Beschriftung das Kästchen mit. */
  width: 1.5rem;
  height: 1.5rem;
  min-height: 0;
  margin: .1rem 0 0;
  padding: 0;
  border: 1px solid var(--farbe-rand);
  border-radius: 6px;
  background: var(--farbe-grund);
  cursor: pointer;
  flex: 0 0 auto;
  display: grid;
  place-content: center;
  transition: background-color var(--zeit-kurz) ease, border-color var(--zeit-kurz) ease;
}
.ankreuz input[type="checkbox"]::before {
  content: "";
  width: .75rem; height: .75rem;
  transform: scale(0);
  transition: transform .14s var(--weich);
  box-shadow: inset 1rem 1rem var(--farbe-grund);
  clip-path: polygon(14% 44%, 0 65%, 40% 100%, 100% 16%, 84% 0, 39% 66%);
}
.ankreuz input[type="checkbox"]:checked {
  background: var(--farbe-akzent);
  border-color: var(--farbe-akzent);
  box-shadow: 0 0 14px -2px rgba(16, 180, 240, .8);
}
.ankreuz input[type="checkbox"]:checked::before { transform: scale(1); }
.ankreuz input[type="checkbox"]:hover { border-color: var(--farbe-akzent); }

.ankreuz label {
  font-size: .875rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--farbe-text-leise);
  cursor: pointer;
}

.feld--zustimmung.hat-fehler .ankreuz input[type="checkbox"] { border-color: var(--farbe-fehler); }

/* --- Honigtopf: für Menschen und Screenreader nicht vorhanden ---
   Bewusst kein "left: -9999px": das vergrößert in manchen Browsern die
   Scrollfläche. Ein 1-px-Kasten mit Beschnitt erreicht dasselbe, ohne
   das Layout anzufassen. Vom Screenreader hält aria-hidden es fern. */

.honigtopf {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Absenden --- */

#absendeknopf[aria-busy="true"] { opacity: .72; cursor: progress; }

.formular__fuss { margin: 0; color: var(--farbe-text-leise); font-size: .8125rem; }

.formular__meldung {
  margin: 0;
  display: none;
  padding: var(--raum-xs);
  border-radius: var(--radius-s);
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.5;
}
.formular__meldung.ist-sichtbar { display: block; }
.formular__meldung.ist-fehler {
  border: 1px solid rgba(255, 122, 133, .4);
  background: rgba(255, 122, 133, .1);
  color: var(--farbe-fehler);
}

/* --- Bestätigungsansicht --- */

.bestaetigung { display: grid; gap: var(--raum-s); justify-items: start; padding-block: var(--raum-s); }
.bestaetigung:focus { outline: none; }
.bestaetigung__zeichen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem; height: 3.25rem;
  border-radius: var(--radius-pille);
  background: rgba(34, 195, 107, .14);
  border: 1px solid rgba(34, 195, 107, .45);
  color: var(--farbe-erfolg);
  box-shadow: 0 0 32px -6px rgba(34, 195, 107, .7);
  animation: aufsteigen .5s var(--weich) both;
}
.bestaetigung__zeichen svg { width: 1.625rem; height: 1.625rem; }
.bestaetigung p { color: var(--farbe-text-leise); }
.bestaetigung__klein { font-size: .8125rem; }

/* --- Vorschau im Probelauf --- */

.probelauf {
  margin-top: var(--raum-m);
  border: 1px dashed var(--farbe-rand);
  border-radius: var(--radius-m);
  background: var(--farbe-grund);
}
.probelauf > summary {
  padding: var(--raum-xs) var(--raum-s);
  cursor: pointer;
  font-size: .875rem;
  font-weight: 700;
  color: var(--farbe-text-leise);
  min-height: 2.75rem;
  display: flex;
  align-items: center;
}
.probelauf__hinweis {
  padding: 0 var(--raum-s);
  color: var(--farbe-text-leise);
  font-size: .8125rem;
}
.probelauf code {
  padding: .1rem .35rem;
  border-radius: 5px;
  background: var(--farbe-flaeche-hoch);
  font-size: .95em;
}
.probelauf pre {
  margin: var(--raum-2xs) 0 0;
  padding: var(--raum-s);
  overflow-x: auto;
  background: var(--farbe-flaeche);
  border-top: 1px solid var(--farbe-rand);
  border-radius: 0 0 var(--radius-m) var(--radius-m);
  color: var(--farbe-text-leise);
  font-size: .78125rem;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}


/* ==========================================================================
   14  FAQ
   ========================================================================== */

.fragen { display: grid; gap: var(--raum-2xs); }

.frage {
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius-m);
  background: var(--farbe-flaeche);
  overflow: hidden;
  transition: border-color var(--zeit-mittel) ease;
}
.frage:hover { border-color: rgba(16, 180, 240, .3); }
.frage[open] { border-color: rgba(16, 180, 240, .38); }

.frage > summary {
  display: flex;
  align-items: center;
  gap: var(--raum-s);
  padding: var(--raum-s) var(--raum-m);
  min-height: 3.25rem;
  cursor: pointer;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.45;
  letter-spacing: -0.012em;
  list-style: none;
  transition: background-color var(--zeit-kurz) ease;
}
.frage > summary::-webkit-details-marker { display: none; }
.frage > summary::after {
  content: "";
  margin-left: auto;
  width: .625rem; height: .625rem;
  border-right: 2px solid var(--farbe-akzent);
  border-bottom: 2px solid var(--farbe-akzent);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--zeit-mittel) var(--weich);
  flex: 0 0 auto;
}
.frage[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.frage > summary:hover { background: var(--farbe-flaeche-hoch); }

.frage__inhalt {
  padding: 0 var(--raum-m) var(--raum-m);
  color: var(--farbe-text-leise);
  font-size: .9375rem;
  max-width: 62ch;
}
.frage[open] > .frage__inhalt { animation: aufsteigen .35s var(--weich) both; }
.frage__inhalt strong { color: var(--farbe-text); }


/* ==========================================================================
   15  Fußbereich
   ========================================================================== */

.fuss {
  position: relative;
  border-top: 1px solid var(--farbe-rand-leise);
  background: var(--farbe-flaeche);
  padding-block: var(--raum-xl) var(--raum-m);
}
.fuss::before {
  content: "";
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(16, 180, 240, .5) 50%, transparent);
}

.fuss__innen { display: grid; gap: var(--raum-m); }

.fuss__satz {
  margin: var(--raum-2xs) 0 0;
  max-width: 34ch;
  color: var(--farbe-text-leise);
  font-size: .875rem;
}

.fuss__nav { display: flex; flex-wrap: wrap; gap: var(--raum-2xs) var(--raum-m); }
.fuss__nav a {
  color: var(--farbe-text-leise);
  text-decoration: none;
  font-size: .9375rem;
  font-weight: 600;
  padding-block: .25rem;
}
.fuss__nav a:hover { color: var(--farbe-akzent); text-decoration: underline; }

.fuss__zeile {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--raum-2xs) var(--raum-m);
  margin-top: var(--raum-l);
  padding-top: var(--raum-s);
  border-top: 1px solid var(--farbe-rand-leise);
}
.fuss__zeile p { margin: 0; color: var(--farbe-text-leise); font-size: .8125rem; }


/* ==========================================================================
   16  Einwilligungsbanner
   ========================================================================== */

.einwilligung {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  padding: var(--raum-s);
  padding-bottom: max(var(--raum-s), env(safe-area-inset-bottom));
  background: rgba(5, 13, 24, .96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--farbe-rand);
  box-shadow: 0 -20px 50px -30px rgba(0, 0, 0, .9);
  animation: aufsteigen .45s var(--weich) both;
}
.einwilligung[hidden] { display: none; }

.einwilligung__innen {
  max-width: var(--breite-max);
  margin-inline: auto;
  display: grid;
  gap: var(--raum-s);
}

.einwilligung h2 { font-size: 1rem; margin-bottom: var(--raum-3xs); }
.einwilligung p {
  margin: 0;
  color: var(--farbe-text-leise);
  font-size: .8125rem;
  line-height: 1.55;
  max-width: 68ch;
}

/* Beide Knöpfe gleich groß und gleich prominent — Ablehnen darf nicht
   schwerer zu treffen sein als Zustimmen. */
.einwilligung__knoepfe { display: flex; flex-wrap: wrap; gap: var(--raum-2xs); }
.einwilligung__knoepfe .knopf { flex: 1 1 10rem; min-height: 2.875rem; }


/* ==========================================================================
   16b  Rechtsseiten (Impressum, Datenschutz, AGB)
   ========================================================================== */

.rechtstext { padding-block: var(--raum-2xl) var(--raum-3xl); }
.rechtstext h1 { margin-bottom: var(--raum-m); font-size: clamp(2rem, 6vw, 3rem); }

.rechtstext h2 {
  margin: var(--raum-xl) 0 var(--raum-s);
  font-size: clamp(1.25rem, 3.2vw, 1.5rem);
  padding-top: var(--raum-s);
  border-top: 1px solid var(--farbe-rand-leise);
}
.rechtstext h3 { margin: var(--raum-m) 0 var(--raum-2xs); font-size: 1.0625rem; }

.rechtstext p,
.rechtstext li { color: var(--farbe-text-leise); font-size: .9375rem; }
.rechtstext ul { padding-left: 1.15rem; margin: 0 0 var(--raum-s); }
.rechtstext li { margin-bottom: .3rem; }
.rechtstext address { font-style: normal; color: var(--farbe-text-leise); }

.rechtstext__vorspann {
  margin-bottom: var(--raum-l);
  color: var(--farbe-text-leise);
  font-size: 1.0625rem;
}

/* Auszufüllende Angaben sind im Text sofort erkennbar. */
.auszufuellen {
  display: inline-block;
  padding: .1rem .45rem;
  border: 1px dashed rgba(255, 122, 133, .6);
  border-radius: 6px;
  background: rgba(255, 122, 133, .08);
  color: var(--farbe-fehler);
  font-size: .875em;
  font-weight: 700;
  letter-spacing: .01em;
}

.rechtstext__warnung {
  margin-bottom: var(--raum-l);
  padding: var(--raum-s);
  border: 1px solid rgba(255, 122, 133, .35);
  border-left: 3px solid var(--farbe-fehler);
  border-radius: var(--radius-s);
  background: rgba(255, 122, 133, .07);
}
.rechtstext__warnung p { color: var(--farbe-text); font-size: .875rem; }

.zurueck {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: var(--raum-m);
  color: var(--farbe-text-leise);
  text-decoration: none;
  font-size: .875rem;
  font-weight: 600;
}
.zurueck:hover { color: var(--farbe-akzent); }
.zurueck svg { width: 1rem; height: 1rem; transform: rotate(180deg); }


/* ==========================================================================
   17  Randfälle
   ========================================================================== */

/* Wer im System "Bewegung reduzieren" eingestellt hat, bekommt die Seite
   vollständig ruhig: keine Aurora, kein Schimmer, keine Einblendungen.
   Alle Inhalte bleiben sichtbar und vollständig bedienbar. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  .einblenden,
  .beim-laden > * {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .hero__aurora span { animation: none; }
  .karte:hover { transform: none; }
}

@media (prefers-contrast: more) {
  :root {
    --farbe-text-leise: #C8D9EA;
    --farbe-rand: #2E5C88;
  }
  body::after { display: none; }        /* Körnung nimmt Kontrast weg */
  .hero__aurora { opacity: .35; }
}

/* Windows-Kontrastmodus: Verlaufstext wäre dort unsichtbar */
@media (forced-colors: active) {
  .leuchttext,
  .tarif__preis {
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: CanvasText;
    forced-color-adjust: none;
  }
  body::after, .hero__aurora, .hero__schein { display: none; }
  .karte, .vgruppe, .frage { border: 1px solid CanvasText; }
}

@media print {
  .kopf, .einwilligung, .hero__schein, .hero__aurora, .hero__bild,
  .probelauf, .kopf__fortschritt { display: none !important; }
  body { background: #fff; color: #000; }
  body::before, body::after { display: none; }
  .karte, .vgruppe, .frage { border-color: #999; background: #fff; box-shadow: none; }
  .leuchttext, .tarif__preis {
    background: none; -webkit-background-clip: border-box;
    background-clip: border-box; color: #000;
  }
  .frage__inhalt, .vgruppe__inhalt { display: block !important; }
  .einblenden { opacity: 1 !important; transform: none !important; }
}


/* ==========================================================================
   18  Größere Bildschirme
   ========================================================================== */

/* --- ab 30rem / 480px: mehr Luft --------------------------------------- */
@media (min-width: 30rem) {
  .huelle { padding-inline: var(--raum-m); }
  .karte, .formularkarte, .abrechnung { padding: var(--raum-l); }
  .einwilligung { padding: var(--raum-m); }
  .einwilligung__knoepfe .knopf { flex: 0 1 auto; min-width: 9rem; }
}

/* --- ab 40rem / 640px: zwei Spalten ------------------------------------ */
@media (min-width: 40rem) {
  .abschnitt { padding-block: var(--raum-3xl); }
  .raster--4 { grid-template-columns: repeat(2, 1fr); }
  .schritte  { grid-template-columns: repeat(2, 1fr); }
  .abrechnung__raster { grid-template-columns: repeat(2, 1fr); }
  .knopfreihe .knopf { flex: 0 1 auto; }
}

/* --- ab 48rem / 768px: Tabellen werden wieder Tabellen ------------------ */
@media (min-width: 48rem) {

  .vtabelle thead { display: table-header-group; }
  .vtabelle tbody { display: table-row-group; }
  .vtabelle tr    { display: table-row; padding: 0; border-top: none; }
  .vtabelle th, .vtabelle td { display: table-cell; }

  .vtabelle thead th {
    padding: 0 var(--raum-s) var(--raum-xs);
    border-bottom: 1px solid var(--farbe-rand);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--farbe-text-leise);
    vertical-align: bottom;
  }
  .vtabelle thead th:first-child { padding-left: 0; }
  .vtabelle thead th:not(:first-child) { text-align: center; width: 27%; }

  .vtabelle tbody tr {
    border-top: 1px solid var(--farbe-rand-leise);
    transition: background-color var(--zeit-kurz) ease;
  }
  .vtabelle tbody tr:first-child { border-top: none; }
  .vtabelle tbody tr:hover { background: rgba(16, 180, 240, .05); }

  .vtabelle tbody th {
    padding: var(--raum-xs) var(--raum-s) var(--raum-xs) 0;
    margin: 0;
    font-weight: 600;
    vertical-align: middle;
  }
  .vtabelle tbody td {
    padding: var(--raum-xs) var(--raum-s);
    text-align: center;
    vertical-align: middle;
  }
  .vtabelle tbody td::before { content: none; }
  .vtabelle tbody td > * { text-align: center; }
  .vwert { justify-content: center; }

  /* Auf großen Bildschirmen bleiben die Gruppen offen und der
     Aufklapp-Pfeil verschwindet — die Übersicht zählt mehr. */
  .vgruppe > summary { cursor: default; }
  .vgruppe > summary::after { display: none; }
  .vgruppe > summary:hover { background: none; }
}

/* --- ab 56rem / 896px: Formular neben Text ----------------------------- */
@media (min-width: 56rem) {
  .anfrage {
    grid-template-columns: minmax(0, 1fr) minmax(0, 27rem);
    gap: var(--raum-xl);
    align-items: start;
  }
  .anfrage__text { position: sticky; top: calc(var(--kopf-hoehe) + var(--raum-m)); }

  .raster--4 { grid-template-columns: repeat(4, 1fr); }
  .schritte  { grid-template-columns: repeat(4, 1fr); }

  .preisraster {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--raum-m);
    max-width: none;
  }
  /* Die mittlere Karte steht etwas höher */
  .tarif--hervorgehoben { transform: translateY(-.75rem); }
  @media (hover: hover) and (pointer: fine) {
    .tarif--hervorgehoben:hover { transform: translateY(-1.1rem); }
  }

  .fuss__innen { grid-template-columns: 1fr auto; align-items: start; }
  .fuss__nav { justify-content: flex-end; }

  .einwilligung__innen {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--raum-l);
  }
}

/* --- ab 64rem / 1024px: Hero zweispaltig -------------------------------- */
@media (min-width: 64rem) {
  .hero { padding-block: var(--raum-2xl) var(--raum-3xl); }

  .hero__innen {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    gap: var(--raum-xl);
    align-items: center;
  }
  .hero__bild { display: block; }

  .flussbild { position: relative; display: grid; gap: var(--raum-2xs); }

  .flussbild__karte {
    position: relative;
    display: grid;
    gap: .1rem;
    padding: var(--raum-s) var(--raum-m);
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius-m);
    background: linear-gradient(135deg, rgba(11, 26, 43, .97), rgba(11, 26, 43, .74));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: var(--schatten-karte);
    animation: aufsteigen .8s var(--weich) both;
  }
  .flussbild__karte:nth-of-type(1) { animation-delay: .35s; }
  .flussbild__karte:nth-of-type(2) { animation-delay: .5s; }
  .flussbild__karte:nth-of-type(3) { animation-delay: .65s; }

  .flussbild__karte--aktiv {
    border-color: rgba(16, 180, 240, .55);
    background: linear-gradient(135deg, rgba(16, 180, 240, .16), rgba(11, 26, 43, .84));
    box-shadow: var(--schein-akzent);
  }

  .flussbild__nr {
    font-size: .6875rem;
    font-weight: 800;
    letter-spacing: .14em;
    color: var(--farbe-akzent);
    font-variant-numeric: tabular-nums;
  }
  .flussbild__wort { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.015em; }
  .flussbild__zeile { color: var(--farbe-text-leise); font-size: .8125rem; }

  /* Verbindungsstück mit wanderndem Lichtpunkt: zeigt, dass hier etwas
     durchläuft, statt es nur zu behaupten. */
  .flussbild__pfeil {
    position: relative;
    height: 1.9rem;
    margin-inline: auto;
    width: 2px;
    background: linear-gradient(180deg, var(--farbe-rand), rgba(22, 48, 76, .25));
    overflow: hidden;
    border-radius: 2px;
  }
  .flussbild__pfeil svg { display: none; }
  .flussbild__pfeil::after {
    content: "";
    position: absolute;
    left: -1px;
    width: 4px; height: 60%;
    border-radius: 4px;
    background: linear-gradient(180deg, transparent, var(--farbe-akzent), transparent);
    box-shadow: 0 0 10px rgba(16, 180, 240, .95);
    animation: signal 2.6s cubic-bezier(.5, 0, .5, 1) infinite;
  }
  .flussbild__pfeil:nth-of-type(4)::after { animation-delay: .5s; }
}

/* --- ab 90rem / 1440px: nur mehr Luft, kein neues Layout ---------------- */
@media (min-width: 90rem) {
  :root { --breite-max: 78rem; }
  .abschnitt { padding-block: 6.5rem; }
}