/* ==========================================================================
   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 */
  --blase-flaeche:      #0E2337;   /* Rezensionsblase inkl. Zipfel */
  --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);
  /* Setzt kräftig an und läuft weich aus — für Bewegungen, die
     hereinfahren sollen statt nur einzublenden. */
  --schwung: cubic-bezier(.16, 1, .3, 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.125rem, 9.2vw, 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;
}

.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__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));
}



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

/* ==========================================================================
   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; }

/* ==========================================================================
   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
   ========================================================================== */

.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,
.fuss__nav button {
  color: var(--farbe-text-leise);
  text-decoration: none;
  font-size: .9375rem;
  font-weight: 600;
  padding-block: .25rem;
}
/* Der Widerrufsknopf ist ein echtes <button>, sieht aber aus wie die
   Links daneben. Deshalb werden die Vorgaben des Browsers entfernt. */
.fuss__nav button {
  padding-inline: 0;
  border: 0;
  background: none;
  font-family: inherit;
  line-height: inherit;
  cursor: pointer;
}
.fuss__nav a:hover,
.fuss__nav button: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); }


/* ==========================================================================
   16c  Bausteine der neuen Landingpage
   ==========================================================================
   Alles hier ist mobil-zuerst formuliert. Die Spaltenaufteilungen stehen
   in Abschnitt 18 bei den übrigen Breakpoints.
   ========================================================================== */

/* --- Inklusivliste ------------------------------------------------------ */

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

.inklusiv__zeichen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-m);
  border: 1px solid var(--farbe-rand);
  background: linear-gradient(140deg, rgba(16, 180, 240, .16), rgba(16, 180, 240, .04));
  color: var(--farbe-akzent-hell);
  transition: transform .25s var(--weich), border-color .25s var(--weich);
}
.inklusiv__zeichen svg { width: 1.5rem; height: 1.5rem; }
.karte:hover .inklusiv__zeichen {
  transform: translateY(-2px);
  border-color: var(--farbe-akzent);
}

.inklusiv h3 { margin: 0; font-size: 1.125rem; }
.inklusiv p { margin: 0; color: var(--farbe-text-leise); font-size: .9375rem; line-height: 1.6; }

/* Der Punkt, der am häufigsten unterschätzt wird, bekommt einen Rahmen in
   Akzentfarbe — Token- und Creditkosten sind bei Wettbewerbern der übliche
   Grund für Nachzahlungen. */
.inklusiv--betont { border-color: var(--farbe-akzent); }
.inklusiv--betont .inklusiv__zeichen {
  border-color: var(--farbe-akzent);
  color: var(--farbe-akzent);
}

/* Kanalliste als kleine Marken. Reiner Text, keine fremden Logos. */
.kanaele {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-3xs);
  margin: var(--raum-3xs) 0 0;
  padding: 0;
  list-style: none;
}
.kanaele li {
  padding: .2rem .55rem;
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius-pille);
  background: rgba(16, 180, 240, .07);
  color: var(--farbe-text-leise);
  font-size: .75rem;
  font-weight: 600;
  white-space: nowrap;
}


/* --- Nachsatz unter einem Abschnitt ------------------------------------- */

.abschnitt__nachsatz {
  max-width: 60ch;
  margin: var(--raum-l) auto 0;
  padding: var(--raum-s) var(--raum-m);
  border-left: 3px solid var(--farbe-akzent);
  border-radius: 0 var(--radius-m) var(--radius-m) 0;
  background: rgba(16, 180, 240, .07);
  color: var(--farbe-text-leise);
  font-size: 1rem;
  line-height: 1.6;
  text-wrap: pretty;
}
.abschnitt__nachsatz strong { color: var(--farbe-text); }


/* --- „Wo ist der Haken“ ------------------------------------------------- */

.hakenpunkte {
  display: grid;
  gap: var(--raum-s);
  margin: 0;
  padding: 0;
  list-style: none;
}
.hakenpunkt h3 {
  margin: 0 0 var(--raum-2xs);
  font-size: 1.0625rem;
}
.hakenpunkt p {
  margin: 0;
  color: var(--farbe-text-leise);
  font-size: .9375rem;
  line-height: 1.65;
}


/* --- Bereichsauswahl im Formular ---------------------------------------- */

.feld--bereiche {
  margin: 0;
  padding: 0;
  border: 0;
}
.feld--bereiche legend {
  padding: 0;
  margin-bottom: var(--raum-2xs);
  font-size: .875rem;
  font-weight: 700;
  color: var(--farbe-text);
}

.bereichswahl { display: flex; flex-wrap: wrap; gap: var(--raum-3xs); }

/* Der Ankreuzkasten selbst wird ausgeblendet, bleibt aber bedienbar und
   für die Tastatur erreichbar — der Fokusring sitzt auf der Kachel. */
.bereichswahl__kachel input {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.bereichswahl__kachel span {
  display: inline-block;
  padding: .45rem .75rem;
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius-pille);
  background: var(--farbe-flaeche-hoch);
  color: var(--farbe-text-leise);
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .2s var(--weich), color .2s var(--weich), background .2s var(--weich);
  user-select: none;
}
.bereichswahl__kachel:hover span { border-color: var(--farbe-akzent); color: var(--farbe-text); }

.bereichswahl__kachel input:checked + span {
  border-color: var(--farbe-akzent);
  background: rgba(16, 180, 240, .16);
  color: var(--farbe-text);
}
.bereichswahl__kachel input:focus-visible + span {
  outline: 2px solid var(--farbe-akzent-hell);
  outline-offset: 2px;
}


/* --- Letzter Aufruf ----------------------------------------------------- */

.abschluss { position: relative; }
.abschluss__innen { text-align: center; }
.abschluss__innen h2 { margin-bottom: var(--raum-s); }
.abschluss__innen p {
  max-width: 54ch;
  margin: 0 auto var(--raum-l);
  color: var(--farbe-text-leise);
  font-size: 1.0625rem;
  line-height: 1.65;
  text-wrap: pretty;
}
.knopfreihe--mitte { justify-content: center; }


/* ==========================================================================
   16d  Ergebnisse, Einblick und Referenzen
   ========================================================================== */

/* --- Vorher/Nachher-Karten ---------------------------------------------- */




/* --- Bildschirmfotos im Fensterrahmen ----------------------------------- */

.bildschirm { margin: 0; }
.bildschirm + .bildschirm, .bildschirmpaar { margin-top: var(--raum-l); }

.bildschirm__rahmen {
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius-m);
  background: var(--farbe-flaeche);
  box-shadow: var(--schatten-karte);
  overflow: hidden;
}

.bildschirm__leiste {
  display: flex;
  align-items: center;
  gap: var(--raum-2xs);
  padding: .5rem var(--raum-xs);
  border-bottom: 1px solid var(--farbe-rand);
  background: var(--farbe-flaeche-hoch);
}
.bildschirm__punkte { display: flex; gap: .3rem; }
.bildschirm__punkte i {
  width: .5rem; height: .5rem;
  border-radius: 50%;
  background: var(--farbe-rand);
}
.bildschirm__titel {
  color: var(--farbe-text-leise);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .02em;
}

/* Der Kasten trägt die Marken; das Bild füllt ihn vollständig aus, damit
   die prozentualen Positionen beim Skalieren treffen. */
.bildschirm__bild { position: relative; display: block; }
.bildschirm__bild img {
  display: block;
  width: 100%;
  height: auto;
}

.bildmarke {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  display: none;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--farbe-akzent);
  color: #03202F;
  font-size: .8125rem;
  font-weight: 800;
  box-shadow: 0 0 0 .3rem rgba(16, 180, 240, .28);
}

.bildschirm__legende { margin-top: var(--raum-s); }
.bildschirm__legende ol {
  display: grid;
  gap: var(--raum-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.bildschirm__legende li {
  display: flex;
  align-items: flex-start;
  gap: var(--raum-2xs);
  color: var(--farbe-text-leise);
  font-size: .9375rem;
  line-height: 1.55;
}
.bildschirm__nr {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: .05rem;
  border-radius: 50%;
  background: rgba(16, 180, 240, .16);
  border: 1px solid var(--farbe-akzent);
  color: var(--farbe-akzent-hell);
  font-size: .75rem;
  font-weight: 800;
}

.bildschirm__satz {
  margin-top: var(--raum-xs);
  color: var(--farbe-text-leise);
  font-size: .9375rem;
  line-height: 1.6;
}
.bildschirm__satz strong { color: var(--farbe-text); }


/* ==========================================================================
   16e  Preisanker
   ==========================================================================
   Die Balken sind auf 10.000 € skaliert. --start verschiebt den Anfang,
   --breite bestimmt die Länge; damit lässt sich auch eine Spanne
   darstellen, ohne zwei Elemente zu brauchen.
   ========================================================================== */

.anker {
  margin-bottom: var(--raum-xl);
  padding: var(--raum-m);
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius-l);
  background: var(--farbe-flaeche);
}

.anker__titel {
  margin: 0 0 var(--raum-m);
  font-size: 1.0625rem;
}

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

.ankerzeile {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--raum-3xs) var(--raum-s);
  padding-bottom: var(--raum-s);
  border-bottom: 1px solid var(--farbe-rand-leise);
}
.ankerzeile:last-child { padding-bottom: 0; border-bottom: 0; }

.ankerzeile__was {
  margin: 0;
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.4;
}
.ankerzeile__was span {
  display: block;
  margin-top: .1rem;
  color: var(--farbe-text-leise);
  font-size: .8125rem;
  font-weight: 500;
}
.ankerzeile__was strong { color: var(--farbe-akzent-hell); }

.ankerzeile__preis {
  margin: 0;
  color: var(--farbe-text-leise);
  font-size: 1rem;
  font-weight: 700;
  white-space: nowrap;
  text-align: right;
}

/* Der Balken sitzt auf dem Handy unter der Zeile und nimmt die volle
   Breite ein. Ab 40rem rückt er zwischen Bezeichnung und Betrag. */
.ankerzeile__balken {
  grid-column: 1 / -1;
  position: relative;
  height: .5rem;
  border-radius: var(--radius-pille);
  background: var(--farbe-flaeche-hoch);
  overflow: hidden;
}
.ankerzeile__balken span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--start);
  width: var(--breite);
  min-width: .5rem;
  border-radius: var(--radius-pille);
  background: linear-gradient(90deg, rgba(155, 179, 203, .45), rgba(155, 179, 203, .7));
}

/* Die eigene Zeile hebt sich in Farbe und Gewicht ab — sie ist die
   Antwort auf alles darüber. */
.ankerzeile--wir .ankerzeile__was { color: var(--farbe-text); }
.ankerzeile--wir .ankerzeile__preis {
  color: var(--farbe-akzent-hell);
  font-size: 1.25rem;
  font-weight: 800;
}
.ankerzeile--wir .ankerzeile__balken span {
  background: linear-gradient(90deg, var(--farbe-akzent), var(--farbe-akzent-hell));
  box-shadow: 0 0 14px rgba(16, 180, 240, .55);
}

.anker__einwand {
  margin: var(--raum-m) 0 0;
  padding: var(--raum-s) var(--raum-m);
  border-left: 3px solid var(--farbe-akzent);
  border-radius: 0 var(--radius-m) var(--radius-m) 0;
  background: rgba(16, 180, 240, .07);
  color: var(--farbe-text-leise);
  font-size: .9375rem;
  line-height: 1.6;
  text-wrap: pretty;
}
.anker__einwand strong { color: var(--farbe-text); }

.anker__fuss {
  margin: var(--raum-xs) 0 0;
  color: var(--farbe-text-leise);
  font-size: .75rem;
  line-height: 1.5;
}

/* ==========================================================================
   16f  Auffälliger Hauptknopf und mitlaufende Leiste
   ========================================================================== */

/* --- Der große Anfrageknopf --------------------------------------------- */

.knopf--gross {
  min-height: 3.75rem;
  padding: 1.125rem 2.5rem;
  font-size: 1.125rem;
  letter-spacing: -0.015em;
}
.knopf--gross .knopf__pfeil { width: 1.375rem; height: 1.375rem; }

/* Ein zweiter, weicher Ring um den Knopf. Er sitzt auf einem
   Pseudoelement, damit der Lichtreflex im ::after erhalten bleibt. */
.knopf--primaer.knopf--gross::before {
  content: "";
  position: absolute;
  inset: -4px;
  z-index: -2;
  border-radius: inherit;
  background: var(--farbe-akzent);
  opacity: .28;
  filter: blur(12px);
  transition: opacity var(--zeit-mittel) ease;
}
.knopf--primaer.knopf--gross:hover::before { opacity: .55; }
.knopf--primaer.knopf--gross:hover { transform: translateY(-2px); }

/* Ein einzelner, langsamer Puls. Nur auf dem Hero-Knopf, sonst wirkt die
   Seite unruhig. Bei "Bewegung reduzieren" schaltet Abschnitt 17 ihn ab. */
@keyframes knopfpuls {
  0%, 100% { box-shadow: var(--schein-akzent); }
  50%      { box-shadow: var(--schein-stark); }
}
/* Nur der Abschlussknopf pulsiert. Im Hero steht kein Knopf mehr — dort
   führt der Weiterlesen-Hinweis nach unten. */
.abschluss .knopf--gross { animation: knopfpuls 3.2s var(--weich) infinite; }
.abschluss .knopf--gross:hover { animation: none; }


/* --- Knopf im Kopfbereich ----------------------------------------------- */

.kopf .knopf--primaer { box-shadow: var(--schein-akzent); }
.kopf .knopf--primaer:hover { box-shadow: var(--schein-stark); }

/* --- Mitlaufende Leiste am unteren Rand ---------------------------------
   Erscheint, sobald der Hero-Knopf aus dem Bild ist, und verschwindet
   wieder, sobald das Formular sichtbar wird. Gesteuert von script.js. */

.mitlauf {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  padding: var(--raum-2xs) var(--raum-m);
  padding-bottom: calc(var(--raum-2xs) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--farbe-rand);
  background: rgba(5, 13, 24, .88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transform: translateY(110%);
  transition: transform var(--zeit-mittel) var(--weich);
}
.mitlauf--sichtbar { transform: translateY(0); }

.mitlauf__innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum-s);
  max-width: var(--breite-max);
  margin-inline: auto;
}
.mitlauf__text {
  margin: 0;
  min-width: 0;
  font-size: .875rem;
  font-weight: 700;
  line-height: 1.3;
}
.mitlauf__text span {
  display: block;
  color: var(--farbe-text-leise);
  font-size: .75rem;
  font-weight: 500;
}
.mitlauf .knopf { flex: 0 0 auto; }

/* ==========================================================================
   16g  Hero ohne Knopfreihe, Zahlenband, animierte Balken
   ========================================================================== */

/* --- Hero: eine Spalte, viel Luft -------------------------------------- */

.hero { min-height: min(92svh, 54rem); display: grid; align-items: center; }
.hero__innen { width: 100%; }

/* Linksbündig: Augenbraue, Überschrift, Satz und Vertrauenszeile teilen
   sich damit eine gemeinsame Kante. Neben der Anfragekarte ist das
   ruhiger als eine zentrierte Überschrift, die quer zu allem anderen
   in der Spalte steht. */
.hero__titel { margin-bottom: var(--raum-l); }
.hero__satz {
  margin-bottom: 0;
  max-width: 40ch;
  font-size: clamp(1.125rem, 3.4vw, 1.375rem);
}


/* Feines Raster als Untergrund. Zwei Verläufe statt einer Bilddatei; die
   Maske lässt es zu allen Seiten weich auslaufen. */
.hero__gitter {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(22, 48, 76, .55) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(22, 48, 76, .55) 1px, transparent 1px);
  background-size: 4.5rem 4.5rem;
  mask-image: radial-gradient(ellipse 75% 60% at 50% 45%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 75% 60% at 50% 45%, #000 20%, transparent 78%);
}

/* Augenbraue im Hero als kleine Kapsel mit pulsierendem Punkt. */
.augenbraue--hero::before { margin-top: 0; }

.augenbraue--hero {
  display: inline-flex;
  align-items: center;
  /* Der Punkt kommt aus .augenbraue::before — er sitzt in dieser einen
     Zeile mittig statt oben, deshalb die eigene Ausrichtung hier. */
  padding: .45rem .9rem;
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius-pille);
  background: rgba(16, 180, 240, .08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
/* Vertrauenszeile trägt jetzt mehr Gewicht — sie ist das Einzige, was
   unter der Überschrift noch steht. */
.vertrauen { gap: var(--raum-xs); margin-top: var(--raum-xl); }
.vertrauen li {
  padding: .45rem .85rem;
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius-pille);
  background: rgba(11, 26, 43, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: .8125rem;
  font-weight: 600;
}



/* --- Preisanker: Balken wachsen beim Einblenden ------------------------- */

.ankerzeile__balken span { transform-origin: left center; }

/* Ohne .einblenden bleiben die Balken schlicht stehen. Erst wenn script.js
   den Block markiert hat, laufen sie ein — so sind sie nie unsichtbar,
   auch wenn Einblendungen abgeschaltet sind. */
.anker.einblenden .ankerzeile__balken span {
  transform: scaleX(0);
  transition: transform 1.1s var(--weich);
}
.anker.einblenden.ist-sichtbar .ankerzeile__balken span { transform: scaleX(1); }
.anker.einblenden.ist-sichtbar .ankerzeile:nth-child(2) .ankerzeile__balken span { transition-delay: .12s; }
.anker.einblenden.ist-sichtbar .ankerzeile:nth-child(3) .ankerzeile__balken span { transition-delay: .24s; }
.anker.einblenden.ist-sichtbar .ankerzeile:nth-child(4) .ankerzeile__balken span { transition-delay: .4s; }

/* Wird von script.js gesetzt, sobald die Tiefenwirkung aktiv ist. Ohne
   das Skript bleibt der Rahmen schlicht gerade stehen. */
.bildschirm__rahmen--tief {
  transform: perspective(1400px) rotateX(var(--kippung, 0deg)) scale(var(--groesse, 1));
  transform-origin: center 80%;
  will-change: transform;
}

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

/* ==========================================================================
   16h  Register der Fachbereiche
   ==========================================================================
   Der Abschnitt darüber ist ein Kachelraster. Zwei gleichartige Raster
   hintereinander verschmelzen optisch zu einem Block — deshalb hier eine
   bewusst andere Bauform: Zeilen mit Haarlinien, laufender Nummer und
   einer zweiten Textspalte. Keine Rahmen, keine Flächen.
   ========================================================================== */

.register {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
  border-top: 1px solid var(--farbe-rand);
}

.registerzeile {
  position: relative;
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: .25rem var(--raum-s);
  padding: var(--raum-s) var(--raum-xs);
  border-bottom: 1px solid var(--farbe-rand);
  transition: background-color var(--zeit-kurz) ease;
}

/* Ein Strich in Akzentfarbe, der beim Überfahren von links einläuft.
   scaleX statt width — das löst kein Neuberechnen des Layouts aus. */
.registerzeile::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  bottom: -1px;
  width: 2px;
  background: var(--farbe-akzent);
  transform: scaleY(0);
  transform-origin: center top;
  transition: transform var(--zeit-mittel) var(--weich);
}
.registerzeile:hover { background: rgba(16, 180, 240, .05); }
.registerzeile:hover::before { transform: scaleY(1); }

.registerzeile__nr {
  font-size: .8125rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
  color: var(--farbe-rand);
  transition: color var(--zeit-kurz) ease;
}
.registerzeile:hover .registerzeile__nr { color: var(--farbe-akzent); }

.registerzeile__zeichen {
  display: inline-flex;
  color: var(--farbe-text-leise);
  transition: color var(--zeit-kurz) ease, transform var(--zeit-kurz) var(--weich);
}
.registerzeile__zeichen svg { width: 1.375rem; height: 1.375rem; }
.registerzeile:hover .registerzeile__zeichen {
  color: var(--farbe-akzent-hell);
  transform: translateY(-1px);
}

.registerzeile__titel {
  margin: 0;
  font-size: clamp(1.25rem, 4.5vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.registerzeile__satz {
  /* Auf dem Handy unter Nummer und Titel, über die volle Zeilenbreite. */
  grid-column: 1 / -1;
  margin: 0;
  color: var(--farbe-text-leise);
  font-size: .9375rem;
  line-height: 1.55;
  text-wrap: pretty;
}

/* ==========================================================================
   16j  Rezensionen
   ==========================================================================
   Die einzige Sprechblasenform auf der Seite. Alles andere ist rechteckig
   gerahmt — Kacheln, Registerzeilen, Bildrahmen. Eine Blase mit Zipfel und
   ein Kürzel darunter liest sich sofort als Rezension und nicht als
   weiterer Leistungspunkt.
   ========================================================================== */

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

.stimme { display: grid; gap: var(--raum-xs); align-content: start; }

.stimme__blase {
  position: relative;
  margin: 0;
  padding: var(--raum-m) var(--raum-m) var(--raum-s);
  border: 1px solid var(--farbe-rand);
  /* Unten links läuft die Ecke flach aus — dort sitzt der Zipfel. */
  border-radius: var(--radius-l) var(--radius-l) var(--radius-l) .25rem;
  /* Einfarbig statt Verlauf: der Zipfel unten ist ein eigenes Element und
     müsste den Verlauf sonst exakt fortsetzen, was nicht zuverlässig geht. */
  background: var(--blase-flaeche);
  box-shadow: var(--schatten-karte);
  transition: border-color var(--zeit-kurz) ease, transform var(--zeit-kurz) var(--weich);
}
.stimme:hover .stimme__blase {
  border-color: var(--farbe-akzent);
  transform: translateY(-2px);
}

/* Der Zipfel wird aus zwei Dreiecken gebaut: das größere in Randfarbe,
   das kleinere in Flächenfarbe darüber. So bleibt die Kontur sichtbar. */
.stimme__blase::before,
.stimme__blase::after {
  content: "";
  position: absolute;
  left: -1px;
  width: 0;
  height: 0;
  border-style: solid;
}
.stimme__blase::before {
  bottom: -13px;
  border-width: 13px 0 0 14px;
  border-color: var(--farbe-rand) transparent transparent transparent;
}
.stimme__blase::after {
  bottom: -11px;
  border-width: 11px 0 0 12px;
  border-color: var(--blase-flaeche) transparent transparent transparent;
}

/* Großes Anführungszeichen als Wasserzeichen hinter dem Text. */
.stimme__zeichen {
  position: absolute;
  top: -.9rem;
  right: var(--raum-s);
  font-size: 5rem;
  line-height: 1;
  font-weight: 800;
  color: var(--farbe-akzent);
  opacity: .16;
  pointer-events: none;
}

.stimme__blase p {
  position: relative;
  margin: 0;
  color: var(--farbe-text);
  font-size: 1.0625rem;
  line-height: 1.6;
  text-wrap: pretty;
}

.stimme__quelle {
  display: flex;
  align-items: center;
  gap: var(--raum-2xs);
  margin: 0;
  padding-left: var(--raum-2xs);
}

/* Kürzel im Kreis. Ersetzt ein Logo, das ohne Lizenz nicht verwendet
   werden darf. */
.stimme__kuerzel {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 1px solid var(--farbe-rand);
  background: var(--farbe-flaeche-hoch);
  color: var(--farbe-akzent-hell);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .02em;
}

.stimme__name {
  color: var(--farbe-text);
  font-size: .9375rem;
  font-weight: 700;
}

/* ==========================================================================
   16k  Waagerechte Verteilung auf großen Schirmen
   ==========================================================================
   Auf dem Handy füllt jeder Block die Breite — dort stimmte es. Auf dem
   Desktop sind Hero, Abschnittsköpfe und Nachsätze aber schmaler als die
   Bahn und klebten deshalb am linken Rand, während rechts eine leere
   Fläche stand.

   Die Blöcke bekommen jetzt automatische Seitenränder: sie stehen mittig
   in der Bahn, der Text darin bleibt linksbündig. Nur die Hauptüberschrift
   ist zentriert — das war so gewünscht.
   ========================================================================== */

.hero__text {
  max-width: 48rem;
  margin-inline: auto;
}

.abschnitt__kopf {
  max-width: 52rem;
  margin-inline: auto;
}

.abschnitt__nachsatz { margin-inline: auto; }

.anker__einwand { max-width: 60ch; margin-inline: auto; }

.fuss__satz { max-width: 40ch; }

/* ==========================================================================
   16l  Vergleich: eigene Spalte hervorheben
   ========================================================================== */

.vergleich__fuss {
  max-width: 60ch;
  margin: var(--raum-m) auto 0;
  color: var(--farbe-text-leise);
  font-size: .75rem;
  line-height: 1.5;
}

/* Auf dem Handy steht je Zeile ein Kasten mit dem Spaltennamen davor.
   Die eigene Angabe wird dort farblich abgesetzt. */
.vzelle--wir { background: rgba(16, 180, 240, .07); }
.vzelle--wir > * { color: var(--farbe-text); font-weight: 700; }
.vkopf--wir { color: var(--farbe-akzent-hell); }

/* ==========================================================================
   16m  Einzug der Hauptüberschrift
   ==========================================================================
   Die drei Zeilen fahren nacheinander von links, von rechts und wieder
   von links ein. Danach läuft die Seite ruhig weiter — eine Bewegung, die
   sich wiederholt, wird nach dem zweiten Mal zur Belästigung.

   Aufbau je Zeile:
     .titelzeile        Blende. Schneidet ab, was seitlich übersteht.
     .titelzeile__text  Der Block, der hineinfährt.
     .leuchttext        Der Farbverlauf, eine Ebene tiefer, damit sein
                        eigener Schimmer die Einfahrt nicht überschreibt.
   ========================================================================== */

/* Spaltenfluss statt Textumbruch: so ist jede Zeile ein eigener Kasten,
   der nur so breit ist wie ihr Text. Der Block darin verschwindet dadurch
   bei -100 % vollständig hinter der Blende.
   flex-start statt center — die Kästen sitzen an der linken Kante. */
.hero__titel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.titelzeile {
  display: block;
  overflow: hidden;
  /* Die Zeilenhöhe von 1.04 ist kleiner als die Schrift hoch ist. Ohne
     diesen Puffer würde die Blende Unterlängen abschneiden — beim „p“ in
     „Festpreis“ gut sichtbar. Das Minus gleicht den Puffer im Layout
     wieder aus; im Spaltenfluss fallen Aussenabstände nicht zusammen,
     der Ausgleich geht also exakt auf. */
  padding-block: .16em;
  margin-block: -.16em;
}

.titelzeile__text {
  display: block;
  animation-duration: .95s;
  animation-timing-function: var(--schwung);
  animation-fill-mode: both;
}
.titelzeile__text--links  { animation-name: einfahrtLinks; }
.titelzeile__text--rechts { animation-name: einfahrtRechts; }

.titelzeile:nth-child(1) .titelzeile__text { animation-delay: .18s; }
.titelzeile:nth-child(2) .titelzeile__text { animation-delay: .32s; }
.titelzeile:nth-child(3) .titelzeile__text { animation-delay: .46s; }

@keyframes einfahrtLinks {
  from { transform: translate3d(-100%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}
@keyframes einfahrtRechts {
  from { transform: translate3d(100%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

/* Die Überschrift steigt nicht zusätzlich auf — sie hat ihre eigene
   Bewegung. Zwei gleichzeitig sähen unruhig aus. */
.beim-laden > .hero__titel { opacity: 1; animation: none; }

/* Satz und Vertrauenszeile kommen danach, nicht gleichzeitig. */
.beim-laden > .hero__satz { animation-delay: .62s; }
.beim-laden > .vertrauen  { animation: none; opacity: 1; }

/* Die vier Punkte laufen einzeln ein statt als Block. */
.beim-laden .vertrauen li {
  opacity: 0;
  animation: aufsteigen .7s var(--weich) forwards;
}
.beim-laden .vertrauen li:nth-child(1) { animation-delay: .76s; }
.beim-laden .vertrauen li:nth-child(2) { animation-delay: .83s; }
.beim-laden .vertrauen li:nth-child(3) { animation-delay: .90s; }
.beim-laden .vertrauen li:nth-child(4) { animation-delay: .97s; }

/* ==========================================================================
   16n  Anfragekarte im Hero
   ==========================================================================
   Das Formular steht neben der Überschrift. Damit es sich von der dunklen
   Fläche abhebt, ohne wie ein Fremdkörper zu wirken:

     – heller als der Hintergrund, aber nicht weiss
     – ein weicher Lichtsaum in Akzentfarbe, der die Karte anhebt
     – eine Lichtkante oben, wie bei Glas

   Die Felder sind kompakt gehalten (2,75 rem hoch statt 3 rem), damit die
   Karte auf einem Laptopbildschirm vollständig ins Bild passt.
   ========================================================================== */

.hero__formular { position: relative; }

.anfragekarte {
  position: relative;
  padding: var(--raum-m);
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius-l);
  background: linear-gradient(180deg, rgba(18, 40, 62, .96), rgba(11, 26, 43, .96));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow:
    0 30px 70px -30px rgba(2, 8, 16, .9),
    0 0 0 1px rgba(16, 180, 240, .12),
    0 0 60px -20px rgba(16, 180, 240, .35);
  animation: aufsteigen .9s var(--schwung) both;
  animation-delay: .5s;
}

/* Lichtkante am oberen Rand — lässt die Karte wie eine Glasplatte wirken,
   die im Licht steht. */
.anfragekarte::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(140, 220, 255, .55), transparent);
}

.anfragekarte__kopf { margin-bottom: var(--raum-s); }

.anfragekarte__titel {
  margin: 0;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
}

/* Drei Stichworte statt eines Satzes. Durch Punkte getrennt, die als
   Pseudoelement kommen — so steht vor dem ersten keiner. */
.anfragekarte__satz {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .55rem;
  margin: .4rem 0 0;
  color: var(--farbe-text-leise);
  font-size: .8125rem;
  font-weight: 600;
}
.anfragekarte__satz span { display: inline-flex; align-items: center; gap: .55rem; }
.anfragekarte__satz span + span::before {
  content: "";
  width: .25rem;
  height: .25rem;
  border-radius: 50%;
  background: var(--farbe-akzent);
}

/* Die Lichtspur der Karten würde beim Tippen ständig aufblitzen. */
.anfragekarte .karte__spur { display: none; }

/* --- Kompaktere Felder in der Karte ------------------------------------- */

.anfragekarte .formular { gap: .7rem; }
.anfragekarte .feld { gap: .3rem; }
.anfragekarte .formular input:not([type="checkbox"]),
.anfragekarte .formular textarea {
  min-height: 2.75rem;
  padding: .6rem .8rem;
}
.anfragekarte .formular textarea { min-height: 4.5rem; }
.anfragekarte .formular label { font-size: .8125rem; }

/* --- Eingeklappte Zusatzfelder ------------------------------------------ */

.mehrfelder {
  border-top: 1px solid var(--farbe-rand-leise);
  border-bottom: 1px solid var(--farbe-rand-leise);
  padding-block: .15rem;
}

.mehrfelder > summary {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem 0;
  cursor: pointer;
  list-style: none;
  color: var(--farbe-akzent-hell);
  font-size: .8125rem;
  font-weight: 700;
}
.mehrfelder > summary::-webkit-details-marker { display: none; }

/* Ein Pluszeichen aus zwei Strichen: der senkrechte verschwindet beim
   Aufklappen, übrig bleibt ein Minus. */
.mehrfelder > summary::after {
  content: "";
  width: .7rem;
  height: .7rem;
  margin-left: auto;
  background:
    linear-gradient(currentColor, currentColor) center/100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center/1.5px 100% no-repeat;
  transition: transform var(--zeit-mittel) var(--weich);
}
.mehrfelder[open] > summary::after {
  background:
    linear-gradient(currentColor, currentColor) center/100% 1.5px no-repeat;
  transform: rotate(180deg);
}

.mehrfelder > summary span {
  color: var(--farbe-text-leise);
  font-size: .75rem;
  font-weight: 500;
}

.mehrfelder__inhalt {
  display: grid;
  gap: .7rem;
  padding-block: .55rem .8rem;
}

.anfragekarte .bereichswahl__kachel span {
  padding: .35rem .6rem;
  font-size: .8125rem;
}

.anfragekarte .feld--zustimmung .ankreuz label { font-size: .75rem; line-height: 1.5; }
.anfragekarte .formular__fuss { font-size: .75rem; }

/* ==========================================================================
   16o  Handy und kleine Tablets
   ==========================================================================
   Der Desktop bleibt unangetastet. Hier wird nur zurückgenommen, was auf
   einem schmalen Schirm zu viel ist: erzwungene Bildschirmhöhe, große
   Abstände und Schrift, die für 1400 px gedacht war.
   ========================================================================== */

@media (max-width: 63.99rem) {

  /* Der Hero enthält jetzt auch das Formular. Eine Mindesthöhe von 92 %
     des Bildschirms würde oben Leerraum erzwingen und die Karte noch
     weiter nach unten drücken. Der Inhalt bestimmt die Höhe selbst. */
  .hero {
    min-height: 0;
    display: block;
    padding-block: var(--raum-l) var(--raum-xl);
  }

  /* Die Augenbraue ist lang und bricht in der Kapsel um. Etwas kleiner
     gesetzt passt sie in zwei statt drei Zeilen. */
  .augenbraue--hero {
    padding: .4rem .75rem;
    font-size: .6875rem;
    letter-spacing: .09em;
  }

  .hero__titel { margin-bottom: var(--raum-s); }
  .hero__satz { font-size: 1.0625rem; }

  /* Kompaktere Vertrauenspunkte: vier Stück in zwei Zeilen statt vier. */
  .vertrauen { gap: .4rem; }
  .vertrauen li { padding: .3rem .65rem; font-size: .6875rem; }

  /* Deutlicher Absatz zwischen Text und Karte, damit die Karte als
     eigener Block gelesen wird und nicht als Fortsetzung. */
  .hero__formular { margin-top: var(--raum-l); }

  /* Die Vertrauenspunkte rutschen UNTER die Karte.

     Auf dem Desktop stehen sie links unter dem Text, dort ist Platz. Auf
     dem Telefon schieben sie die Karte um rund hundert Pixel nach unten —
     genau die Höhe, die entscheidet, ob man das Formular beim Öffnen noch
     sieht. Unter der Karte wirken sie ausserdem besser: erst die Eingabe,
     dann die Beruhigung.

     "display: contents" löst den Textkasten auf, seine Kinder werden
     direkt zu Elementen der Spalte. Nur so lässt sich die Liste an der
     Karte vorbeischieben, ohne das Markup zu ändern — und ohne den
     Desktop anzufassen. Wo es nicht unterstützt wird, bleibt einfach die
     bisherige Reihenfolge stehen. */
  .hero__innen { display: flex; flex-direction: column; }
  .hero__text { display: contents; }
  .vertrauen { order: 1; margin-top: var(--raum-m); }

  .abschnitt { padding-block: var(--raum-xl); }
  .abschnitt__kopf { margin-bottom: var(--raum-l); }

  /* Registerzeilen etwas enger — acht Stück hintereinander werden sonst
     zu einer sehr langen Strecke. */
  .registerzeile { padding-block: var(--raum-xs); }
  .registerzeile__titel { font-size: 1.25rem; }

  /* Die Aufnahmen sind für 1600 px gezeichnet. Auf dem Telefon ist die
     Schrift darin ohnehin nicht lesbar — sie wirken als Eindruck. Die
     Legende darunter trägt die Aussage. */
  .bildschirm__leiste { padding: .4rem var(--raum-2xs); }
  .bildschirm__titel { font-size: .6875rem; }

  /* Platz für die mitlaufende Leiste, sonst verdeckt sie das Impressum. */
  .fuss { padding-bottom: 5.5rem; }
}

/* --- sehr schmale Geräte bis 26rem / 416px ------------------------------ */
@media (max-width: 26rem) {
  .anfragekarte { padding: var(--raum-s); }
  .anfragekarte__titel { font-size: 1.125rem; }

  /* In der Leiste bleibt nur das Wesentliche stehen. */
  .mitlauf { padding-inline: var(--raum-s); }
  .mitlauf__text span { display: none; }
  .mitlauf__text { font-size: .8125rem; }

  /* Drei Stichworte nebeneinander werden hier zu eng. */
  .anfragekarte__satz { font-size: .75rem; }
}

/* ==========================================================================
   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 > *,
  .beim-laden .vertrauen li,
  .titelzeile__text {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  /* Ohne Bewegung braucht es auch keine Blende mehr. */
  .titelzeile { overflow: visible; }
  .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__gitter,
  .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, .anfragekarte { 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--2 { grid-template-columns: repeat(2, 1fr); }

  /* Vier Spalten: Nummer, Zeichen, Titel, Beschreibung. Der Titel bekommt
     eine feste Breite, damit alle Beschreibungen bündig untereinander
     beginnen — das ist der Unterschied zwischen Liste und Register. */
  .registerzeile {
    grid-template-columns: auto auto minmax(0, 15rem) minmax(0, 1fr);
    gap: var(--raum-m);
    padding-block: var(--raum-m);
  }
  .registerzeile__satz { grid-column: auto; text-align: left; }
  .ankerzeile { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) auto; }
  .ankerzeile__balken { grid-column: auto; }
  .raster--3 { grid-template-columns: repeat(2, 1fr); }
  .raster--4 { grid-template-columns: repeat(2, 1fr); }
  .hakenpunkte { grid-template-columns: repeat(2, 1fr); }
  /* Bei zwei Spalten stünde die dritte Rezension allein — sie nimmt
     deshalb die volle Breite ein. */
  .stimmen { grid-template-columns: repeat(2, 1fr); }
  .stimmen .stimme:last-child { grid-column: span 2; }

  /* Die beiden Kernleistungen nehmen je eine ganze Zeile ein. */
  .inklusiv--gross { grid-column: span 2; }
  .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); }

  /* Die eigene Spalte läuft als zusammenhängendes Band durch die Tabelle
     und ist dadurch beim Überfliegen sofort auffindbar. */
  .vtabelle thead th:not(:first-child) { width: 24%; }
  .vkopf--wir, .vzelle--wir {
    background: rgba(16, 180, 240, .09);
    box-shadow: inset 1px 0 0 rgba(16, 180, 240, .35),
                inset -1px 0 0 rgba(16, 180, 240, .35);
  }
  .vtabelle tbody tr:hover .vzelle--wir { background: rgba(16, 180, 240, .14); }

  .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 ---------------------------------------------------- */
@media (min-width: 56rem) {
  .raster--4 { grid-template-columns: repeat(4, 1fr); }

  /* Vier Spalten: die beiden Kernleistungen liegen zu zweit in der ersten
     Zeile, die vier kleineren Punkte darunter nebeneinander. */
  .inklusiv--gross { grid-column: span 2; }

  .raster--3 { grid-template-columns: repeat(3, 1fr); }
  .stimmen { grid-template-columns: repeat(3, 1fr); }
  .stimmen .stimme:last-child { grid-column: auto; }


  /* Die Marken auf dem Bildschirmfoto sind erst hier lesbar. Darunter
     trägt die nummerierte Legende die gleiche Information. */
  .bildmarke { display: grid; }

  .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); }

  /* Text links, Anfragekarte rechts. Die linke Spalte bekommt etwas mehr
     Platz, weil die Überschrift dort der Blickfang bleiben soll. */
  .hero__innen {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 25rem);
    gap: var(--raum-xl);
    align-items: center;
  }
  .hero__text { max-width: none; margin-inline: 0; }
}

/* --- ab 90rem / 1440px: nur mehr Luft, kein neues Layout ---------------- */
@media (min-width: 90rem) {
  :root { --breite-max: 82rem; }
  .abschnitt { padding-block: 6.5rem; }
  /* Auch die mittig gesetzten Blöcke wachsen mit, sonst wirkt die Seite
     auf großen Schirmen wie eine schmale Säule. */
  .abschnitt__kopf { max-width: 58rem; }
  .hero__innen { grid-template-columns: minmax(0, 1.05fr) minmax(0, 27rem); }
}