/* =============================================================================
   Startseite - "Orbit"
   Eigene Datei, geladen NACH style.css von index.html UND (seit Block 12)
   von marvin-de-vries.html sowie kontakt.html - alle drei tragen body.v2.
   Alles hier haengt an .v2-* bzw. an body.v2 und trifft die uebrigen
   Seiten deshalb nicht. Tokens, Kopfleiste, Fussbereich, Knoepfe und
   Kontaktleiste kommen unveraendert aus style.css.

   Die Bloecke 1-11 gehoeren zur sticky-Choreografie der Startseite
   (body.v2.has-dark-hero) und wirken durch ihre .v2-*-Klassennamen auf
   den beiden Unterseiten ohnehin nicht (dort gibt es kein .v2-hero,
   .v2-orbit etc.). Block 12 kehrt das um: er haengt an body.v2.v2-page
   (NUR marvin-de-vries.html und kontakt.html tragen diese zweite Klasse)
   und ueberschreibt dort normale, aus style.css bekannte Projektklassen
   wie .section--surface oder .field - deshalb der eigene Klassen-Anker,
   damit diese Regeln index.html so sicher verfehlen wie umgekehrt.

   Zur Namensgebung: die .v2-*-Praefixe stammen aus der Zeit, als diese
   Fassung als "Variante 2" neben einer aelteren Kurven-Fassung stand.
   Die Alternative liegt heute im Branch mikro-animationen; die Praefixe
   sind geblieben, weil sie die Regeln dieser Seite sauber von style.css
   trennen - ein Umbenennen brachte nichts ausser Risiko.

   Bauprinzip der ganzen Seite: jede Sektion ist HOEHER als der
   Bildschirm; ihr sichtbarer Inhalt klebt per position:sticky am
   Viewport. Der Scrollfortschritt INNERHALB der Sektion treibt die
   Choreografie (JS setzt dafuer Custom Properties wie --p, --turn,
   --beat). Damit gilt fuer jede Bewegung: zu jeder Scrollposition
   gehoert genau ein Bild, und jeder Vorwaerts-Scroll hat seinen
   Rueckwaerts-Scroll. Keine einmaligen Zeitanimationen, die man nur
   abwarten kann.
   ============================================================================= */

/* -----------------------------------------------------------------------
   1) Palette der Weltraum-Buehne
   Angelehnt an den Auftritt der Muttergesellschaft ADence: tiefes
   Blaugruen als Grund, ein blau-cyanfarbener Kern als Lichtquelle, feine
   Rasterlinien. Die Leistungsfarben sind unveraendert die aus Variante 1
   uebernommen - dieselbe Leistung traegt in beiden Entwuerfen dieselbe
   Farbe.
   ----------------------------------------------------------------------- */
body.v2 {
  --v2-void: #04101a;
  --v2-deep: #071c28;
  --v2-space: #0a2735;
  --v2-space-hi: #124256;
  --v2-line: rgba(140, 226, 240, 0.14);
  --v2-line-soft: rgba(140, 226, 240, 0.07);
  --v2-text: #eaf6fb;
  --v2-text-dim: rgba(234, 246, 251, 0.62);
  --v2-core: #7fe3ff;
  --v2-core-mid: #2f6fed;
  --v2-core-deep: #14276e;

  --v2-seo: #a9d6ec;
  --v2-sem: #5cc8d8;
  --v2-email: #b9a9e6;
  --v2-social: #8fa8e6;
  --v2-chatbot: #74d2ab;
  --v2-webdesign: #e3c88e;

  background: var(--v2-void);
  color: var(--v2-text);
}

/* Die Kopfleiste bleibt unveraendert die aus style.css: eine helle
   Glaspille, die dort bereits fuer den dunklen Auftakt von Variante 1
   ausgelegt ist (weisser Grundton fuer den Textkontrast, saturate()
   faerbt den Untergrund durch). Sie hier auf dunkel umzufaerben, hiesse
   dunkle Schrift auf dunklem Grund - beide Entwuerfe teilen sich diese
   Leiste bewusst.

   Was Variante 2 braucht, ist der zweite Knopf: .btn--secondary ist in
   style.css fuer helle Flaechen gezeichnet (blauer Rand, blaue Schrift)
   und steht hier auf tiefem Blau. */
/* style.css setzt h1-h3 auf --color-ink (dunkel) - richtig fuer die
   hellen Seiten des Projekts, hier aber dunkel auf dunkel. Die
   Ueberschriften der Weltraum-Buehnen bekommen deshalb ausdruecklich den
   hellen Ton. Betrifft nur .v2-*, die Ueberschriften im Fussbereich
   bleiben unberuehrt. */
body.v2 .v2-hero__title,
body.v2 .v2-turn__title,
body.v2 .v2-orbit__title,
body.v2 .v2-track__caption-title,
body.v2 .v2-outro__claim,
body.v2 .v2-step h3,
body.v2 .v2-final__cta h2 {
  color: var(--v2-text);
}

body.v2 .btn--secondary {
  color: var(--v2-text);
  border-color: rgba(140, 226, 240, 0.4);
  background: rgba(140, 226, 240, 0.06);
}
body.v2 .btn--secondary:hover,
body.v2 .btn--secondary:focus-visible {
  border-color: var(--v2-core);
  background: rgba(140, 226, 240, 0.14);
  color: #fff;
}

/* -----------------------------------------------------------------------
   2) Gemeinsame Bausteine der Buehnen
   ----------------------------------------------------------------------- */

/* Sticky-Buehne: EIN Bildschirm, der stehen bleibt, waehrend die Sektion
   darunter durchgescrollt wird. overflow:clip statt hidden, damit
   position:sticky im Elternteil nicht bricht. */
.v2-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: clip;
  isolation: isolate;
}

/* ---------------------------------------------------------------------
   Die gemeinsame Buehne von Leistungsfeldern und Einzelbeschreibung.

   Der Zentralplanet liegt hier, NICHT in einer der beiden Sektionen: so
   klebt er ueber die gesamte Strecke beider am Viewport und wandert beim
   Sektionswechsel einfach mit. In einer .v2-stage waere er an deren
   Unterkante beschnitten worden (overflow: clip).

   Die Huelle selbst ist nur ein Rahmen ohne eigene Hoehe - ihre Hoehe
   ergibt sich aus den beiden Sektionen darin. Deshalb auch KEIN
   overflow hier: was der Planet ueberragt, soll sichtbar bleiben.
   --------------------------------------------------------------------- */
.v2-journey { position: relative; }

.v2-journey__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  /* Die Buehne nimmt im Fluss keinen Platz ein: die Orbit-Sektion beginnt
     direkt unter dem Hero, Planet, Rubrik und Ausgangs-Karte kommen
     gemeinsam hoch, waehrend der Hero geht. Vorher musste nach dem Hero eine
     volle Bildschirmhoehe ueberscrollt werden, in der nur der aufsteigende
     Planet zu sehen war. */
  margin-bottom: -100svh;
  /* Seitlich beschneiden: die Trabanten umkreisen einen Kern, der auf
     schmalen Schirmen breiter als der Viewport ist - sie ragten dadurch
     bis zu 235px ueber den rechten Rand und dehnten das Dokument
     entsprechend (der schwarze Streifen auf Tablet und Telefon).

     clip statt hidden, und bewusst nur in X: hidden wuerde einen
     Scroll-Container erzeugen und damit position:sticky an dieser Stelle
     aushebeln - genau davon lebt aber die ganze Choreografie. */
  overflow-x: clip;
  /* Hinter den Inhalten beider Sektionen: Textspalten, Beschriftungen
     und Anzeigen liegen darueber. */
  z-index: 0;
  pointer-events: none;
}
/* Vor dem Anheften der Buehne am Viewport statt in der Buehne (setzt initOrbit): lagfrei, kein JS-Ausgleich. */
.v2-journey__stage .v2-orbit__system.is-fixed { position: fixed; }
/* Das System bleibt anfassbar, obwohl die Huelle es nicht ist - sonst
   liesse es sich nicht mehr drehen. */
.v2-journey__stage .v2-orbit__system { pointer-events: auto; }

/* ---------------------------------------------------------------------
   Der durchgehende Weltraum
   Uebergang, Orbit, Parcours und Ausklang liegen gemeinsam in .v2-space.
   Dort - und NUR dort - liegen Farbverlauf, Raster und Sternenfeld.
   Vorher trug jede Sektion beides selbst; an jeder Sektionskante brach
   das Muster deshalb ab und setzte versetzt wieder an, und die
   Farbverlaeufe stiessen sichtbar aneinander.

   .v2-space__bg klebt per position:sticky einen Bildschirm hoch am
   oberen Rand und wird per negativem Aussenabstand wieder aus dem Fluss
   genommen - die Sektionen liegen also DARUEBER, das Muster laeuft
   ununterbrochen unter ihnen durch, ueber die gesamte Strecke.
   --------------------------------------------------------------------- */
.v2-space {
  position: relative;
  /* Derselbe Grund wie im Hero: --v2-void, dazu die Lichter in
     .v2-space__bg und die Sterne in .v2-space__stars. Kein eigener
     Verlauf mehr, damit die Seite unter dem Hero nicht in eine andere
     Farbwelt kippt. */
  background: var(--v2-void);
}

.v2-space__bg {
  position: sticky;
  top: 0;
  z-index: 0;
  height: 100svh;
  /* Die beiden Lichter des Heros (siehe .v2-hero), hier an den Bildschirm
     gebunden statt an die lange Huelle. */
  background:
    radial-gradient(90% 70% at 22% 40%, var(--v2-space) 0%, transparent 62%),
    radial-gradient(70% 60% at 82% 66%, rgba(47, 111, 237, 0.16) 0%, transparent 70%);
  /* Wieder aus dem Fluss nehmen: die erste Sektion beginnt dadurch
     buendig am oberen Rand der Huelle statt einen Bildschirm tiefer. */
  margin-bottom: -100svh;
  overflow: clip;
  pointer-events: none;
  /* Weiche Ober- und Unterkante. Solange die Huelle noch nicht am
     oberen Rand klebt, IST die Oberkante dieser Ebene im Bild - ohne
     Verlauf zeichnete sie sich dort als harte waagerechte Linie quer
     durchs Bild ab, genau beim Uebergang aus dem Hero. Im gepinnten
     Zustand wirkt derselbe Verlauf als ruhiges Auslaufen nach oben und
     unten. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 11%, #000 89%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 11%, #000 89%, transparent 100%);
  /* An den Enden der Huelle sanft auf- und abblenden, damit das Muster
     nicht mit einer harten Kante in den Hero bzw. in den
     Abschlussbereich stoesst. --bg-fade setzt das JS. */
  opacity: var(--bg-fade, 1);
}

/* Die Sektionen liegen ueber dem gemeinsamen Grund und bringen nur noch
   ihr eigenes Licht mit - keine deckende Grundfarbe mehr, sonst waere
   das Raster darunter wieder abgedeckt. */
.v2-space > section { position: relative; z-index: 1; }

/* Der Footer ist der einzige Bereich OHNE das Muster - dort endet die
   Weltraum-Strecke.

   Er steht zwar hinter .v2-space im Markup, ist aber selbst nicht
   positioniert; die gepinnte Hintergrundebene (.v2-space__bg, sticky,
   eine volle Bildschirmhoehe hoch) legte sich deshalb am Seitenende
   ueber ihn - am unteren Anschlag rund 400px weit, also quer ueber den
   halben Footer. Ein eigener Stapelplatz stellt die Reihenfolge des
   Markups wieder her, ohne dass die Huelle selbst etwas davon wissen
   muss. */
body.v2 .footer {
  position: relative;
  z-index: 2;
}

/* Das Licht einer Sektion liegt in einer eigenen Ebene mit weicher Ober-
   und Unterkante. Direkt als background der Sektion gesetzt, begann es
   an deren Oberkante schlagartig mit voller Staerke - beim Uebergang
   von einem Abschnitt zum naechsten zog sich dadurch eine sichtbare
   waagerechte Kante quer durchs Bild, obwohl das Raster darunter
   laengst durchlief. Der Verlauf ueber 12% der Sektionshoehe blendet
   das Licht statt dessen ein und wieder aus. */
.v2-orbit::before,
.v2-track::before,
.v2-outro::before,
.v2-final::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}

/* Das Raster. Zwei Ebenen: ein feines und ein groeberes darueber, damit
   die Flaeche Tiefe bekommt statt wie Millimeterpapier zu wirken. Die
   Position kommt vom JS (--grid-x/--grid-y) und laeuft LANGSAMER als die
   Seite - das Muster liest sich dadurch als eine Ebene hinter allem und
   bleibt ueber die gesamte Strecke luecken- und versatzfrei. */
.v2-space__grid {
  position: absolute;
  inset: -20% -10%;
  /* Sternenhimmel statt Raster (Pinterest-Vorlage). Das Bild ist schwarz;
     mit "screen" faellt das Schwarz weg und der Farbverlauf der Huelle
     scheint durch, nur die Sterne bleiben. Die Position kommt weiter vom
     JS (--grid-y) und laeuft langsamer als die Seite. */
  background-image: url("../img/space-bg-pin.jpg");
  background-size: 980px auto;
  background-repeat: repeat;
  background-position: 0 calc(var(--grid-y, 0) * 1px);
  mix-blend-mode: screen;
  opacity: 0.9;
  mask-image: radial-gradient(130% 110% at 50% 50%, #000 40%, transparent 100%);
  display: none;   /* der Hero hat nur die ruhigen CSS-Sterne, nicht dieses dichte Bild */
}

/* Sternenfeld: reine CSS-Punkte, kein Bild und kein Request. */
.v2-space__stars {
  position: absolute;
  inset: -30% -10%;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, rgba(255,255,255,.75), transparent),
    radial-gradient(1.2px 1.2px at 78% 14%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.8px 1.8px at 44% 68%, rgba(255,255,255,.65), transparent),
    radial-gradient(1.1px 1.1px at 88% 74%, rgba(255,255,255,.45), transparent),
    radial-gradient(1.4px 1.4px at 28% 86%, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 62% 40%, rgba(255,255,255,.4), transparent),
    radial-gradient(1.6px 1.6px at 6% 58%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.2px 1.2px at 94% 44%, rgba(255,255,255,.4), transparent);
  background-repeat: repeat;
  background-size: 640px 480px;
  background-position: 0 calc(var(--star-y, 0) * 1px);
  opacity: 0.85;
}

/* Sternenfeld im Hero - der liegt AUSSERHALB der gemeinsamen Huelle
   (eigene Buehne, eigener Grund) und behaelt deshalb seine eigene
   Ebene. */
.v2-stars {
  position: absolute;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, rgba(255,255,255,.75), transparent),
    radial-gradient(1.2px 1.2px at 78% 14%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.8px 1.8px at 44% 68%, rgba(255,255,255,.65), transparent),
    radial-gradient(1.1px 1.1px at 88% 74%, rgba(255,255,255,.45), transparent),
    radial-gradient(1.4px 1.4px at 28% 86%, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 62% 40%, rgba(255,255,255,.4), transparent),
    radial-gradient(1.6px 1.6px at 6% 58%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.2px 1.2px at 94% 44%, rgba(255,255,255,.4), transparent);
  background-repeat: repeat;
  background-size: 640px 480px;
  opacity: 0.85;
  transform: translate3d(calc(var(--star-x, 0) * 1px), calc(var(--star-y, 0) * 1px), 0);
}

/* Rubrik am oberen Rand einer Buehne - benennt den Abschnitt, ohne den
   Blick von der Choreografie abzuziehen. Gleiche Rolle wie
   .hero__seq-eyebrow in Variante 1. */
.v2-eyebrow {
  position: absolute;
  top: calc(var(--header-h) + 1.2rem);
  left: clamp(1.2rem, 4vw, 3.5rem);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(234, 246, 251, 0.55);
  /* --eyebrow (0..1) setzt das JS synchron mit dem Aufbau der jeweiligen
     Sektion (--build bzw. --hud) - ohne das stand der Kicker schon beim
     blossen Sektionseintritt da, lange bevor irgendetwas sonst im Bild
     passierte, und wirkte wie ein einsam vorausgeeilter Programmpunkt. */
  opacity: var(--eyebrow, 1);
  transform: translateY(calc((1 - var(--eyebrow, 1)) * -8px));
}
/* Der fuehrende Strich vor dem Kicker ist entfallen (war auf
   Screenshots als unmotivierter langer Balken vor kurzen Woertern
   wahrgenommen worden) - die Buchstabensperrung und Grossschreibung
   tragen die Rubrik-Optik bereits allein. */

/* =============================================================================
   3) HERO - Vorstellung
   Die Person steht ruhig auf der Buehne und atmet leicht (Ruhezustand,
   zeitgesteuert); erst das Scrollen dreht sie nach rechts und uebergibt
   an die naechste Sektion.
   ============================================================================= */
.v2-hero {
  position: relative;
  /* 100svh Buehne + 110svh Scrollstrecke: traegt jetzt ZWEI Akte auf
     derselben Buehne (Kopfdrehung UND das Einfliegen von "Was wir tun",
     siehe initHero/initTurn in orbit.js) statt nur den einen. Bei
     70svh (vorige Fassung) lief die Drehung so schnell durch, dass die
     Woerter praktisch im selben Scroll-Frame von unsichtbar auf fertig
     sprangen - fuer zwei gestaffelte Bewegungen in Folge war die
     Strecke schlicht zu kurz. */
  /* 260svh statt 210: 160svh Scrollstrecke. Die Karten brauchen Ruhe zum Lesen -
     bei 210svh stand "Was wir tun" nur gut einen Mausrad-Schritt still, bevor die
     Buehne weiterrollte. */
  min-height: 300svh;   /* drei Karten nacheinander (Begruessung, Karte 2, "Was wir tun") */
  /* Der Hero ist transparent und liegt (z-index) UEBER dem Planeten, der als Hintergrund hinter ihm steht (siehe
     .v2-orbit__system). Grund und Lichter kommen von body.v2 und .v2-hero__stage::before. */
  z-index: 3;
}
body.v2:not(.v2-page) { background: var(--v2-void); }
.v2-hero__stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(90% 70% at 22% 40%, var(--v2-space) 0%, transparent 62%),
    radial-gradient(70% 60% at 82% 66%, rgba(47, 111, 237, 0.10) 0%, transparent 70%);
}

.v2-hero__stage {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  padding: calc(var(--header-h) + 2rem) clamp(1.2rem, 5vw, 5rem) 3rem;
}

/* ---- Bildspalte ---------------------------------------------------- */
.v2-hero__figure {
  position: relative;
  z-index: 2;
  justify-self: center;
  /* Auch ueber die Fensterhoehe begrenzt: das Bild behaelt sein
     natuerliches Seitenverhaeltnis (kein object-fit, siehe unten), also
     muss die BREITE dafuer sorgen, dass es auf flachen Fenstern nicht
     unten aus der Buehne laeuft. 791x951 - Hoehe = Breite * 1.2. */
  width: min(100%, 460px, 52svh);
  /* Ruhezustand: ein langsames Heben und Senken. Liegt auf dem WRAPPER,
     damit es sich nicht mit der scrollgesteuerten Drehung im Kind
     ueberschreibt. */
  animation: v2-float 9s ease-in-out infinite;
}

.v2-hero__photo {
  position: relative;
  margin: 0;
  transform-origin: 58% 34%;   /* etwa Kopfhoehe: die Drehung geht vom Kopf aus */
  /* --turn (0..1) setzt das JS aus dem Scrollfortschritt.
     Positives rotateY laesst die rechte Bildkante zuruecktreten - das
     Gesicht wendet sich damit nach rechts, dorthin, wo die naechste
     Sektion aufgeht. Wer die Richtung umdrehen will, dreht hier das
     Vorzeichen: alles andere (Licht, Schatten, Versatz) folgt
     ausschliesslich --turn und stimmt danach weiterhin. */
  /* Kein Kippen mehr: das Foto bleibt beim Scrollen ruhig stehen. */
  transform: none;
  will-change: transform;
}
.v2-hero__photo img {
  display: block;
  width: 100%;
  height: auto;
  /* Das Quellfoto ist eine enge Portraetaufnahme: der Oberkoerper laeuft
     unten und links aus dem Bild heraus (die unterste Zeile ist zu 99%
     deckend). Nach dem Freistellen endet die Silhouette dort an einer
     schnurgeraden Kante - ohne Gegenmassnahme steht die Person als
     sichtbar rechteckiger Block auf der Buehne. Dieselbe Maske wie in
     Variante 1 loest den Anschnitt auf: unten laeuft der Oberkoerper
     weich aus, links wird die angeschnittene Schulterkante abgeweicht.
     Oben und rechts bleibt der echte Freisteller unangetastet scharf.
     Ein drop-shadow waere hier falsch - er zeichnete genau diese gerade
     Kante nach. */
  -webkit-mask-image:
    linear-gradient(to top, transparent 0%, rgba(0, 0, 0, 0.35) 7%, #000 24%),
    linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.45) 4%, #000 14%);
  mask-image:
    linear-gradient(to top, transparent 0%, rgba(0, 0, 0, 0.35) 7%, #000 24%),
    linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.45) 4%, #000 14%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* Licht auf der Person: wandert mit der Drehung von links nach rechts
   mit. Ohne diesen Wechsel wirkt die Drehung wie ein gekipptes Foto -
   erst das mitwandernde Licht macht daraus eine Bewegung im Raum. */
/* Liegt als eigene Ebene ueber dem Bild. Maskiert wird sie mit dem
   FREISTELLER SELBST: die Alphakanaele des Bildes schneiden die
   Lichtebene exakt auf die Silhouette zu. Mit den beiden
   Verlaufsmasken allein (unten/links weich) blieben Oberkante und
   rechte Kante hart - das Licht laege dann als sichtbares Rechteck auf
   der Buehne statt auf der Person. Die WebP-Fassung ist dieselbe
   Datei, die das <picture> ohnehin laedt; als Maske kostet sie deshalb
   keinen zweiten Abruf.

   mix-blend-mode: soft-light statt screen - screen kann ausschliesslich
   aufhellen, die abgewandte Seite der Drehung wuerde also gar nicht
   dunkler. */
.v2-hero__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-mask-image:
    url("../img/marvin-de-vries-cutout.webp"),
    linear-gradient(to top, transparent 0%, rgba(0, 0, 0, 0.35) 7%, #000 24%),
    linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.45) 4%, #000 14%);
  mask-image:
    url("../img/marvin-de-vries-cutout.webp"),
    linear-gradient(to top, transparent 0%, rgba(0, 0, 0, 0.35) 7%, #000 24%),
    linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.45) 4%, #000 14%);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  background: none;
  mix-blend-mode: soft-light;
}

/* Lichtkegel hinter der Person. Traegt das freigestellte Portrait
   optisch und pulsiert im Ruhezustand leicht mit. */
.v2-hero__glow {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 42%;
  width: 132%;
  aspect-ratio: 1;
  translate: -50% -50%;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(127, 227, 255, 0.34) 0%,
      rgba(47, 111, 237, 0.22) 34%,
      rgba(20, 39, 110, 0.12) 56%,
      transparent 72%);
  animation: v2-pulse 7s ease-in-out infinite;
  /* Der Kegel wandert mit dem Blick nach rechts. */
  transform: none;
}

/* Ringe hinter der Person: leiser Vorgriff auf den Orbit, der zwei
   Sektionen spaeter die Hauptrolle spielt. */
.v2-hero__rings {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 44%;
  width: 150%;
  aspect-ratio: 1;
  translate: -50% -50%;
  opacity: calc(0.5 + var(--turn, 0) * 0.5);
}
.v2-hero__rings span {
  position: absolute;
  inset: calc(var(--i) * 11%);
  border: 1px solid rgba(140, 226, 240, 0.12);
  border-radius: 50%;
  animation: v2-spin calc(40s + var(--i) * 14s) linear infinite;
}

/* ---- Textspalte ----------------------------------------------------- */
.v2-hero__body {
  position: relative;
  z-index: 3;
  max-width: 46rem;
  /* Die Karte bleibt an ihrem Platz und springt in den Warp: sie wird
     groesser, unscharf und heller, waehrend ein Scanstrahl darueberlaeuft,
     und gibt den Platz an die "Was wir tun"-Karte ab (--out, 0..1, siehe
     initHero und den Warp-Block am Ende dieser Datei). */
  opacity: calc(1 - var(--out, 0));
  transform: scale(calc(1 + var(--out, 0) * 0.1));
  filter: blur(calc(var(--out, 0) * 9px)) brightness(calc(1 + var(--out, 0) * 0.8));
  will-change: transform, filter, opacity;
}

.v2-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--v2-core);
  margin-bottom: var(--space-sm);
}
/* Der fuehrende Strich vor "Ihr Berater" ist aus demselben Grund
   entfallen wie bei .v2-eyebrow::after oben. */

.v2-hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-md);
}
.v2-hero__title-lead {
  display: block;
  /* Auch an der Fensterhoehe begrenzt (7.8vh): die Karte steht in EINER
     Buehnenhoehe und lief auf flachen Fenstern oben und unten heraus. */
  font-size: clamp(2.1rem, min(5.4vw, 7.8vh), 4.4rem);
  background: linear-gradient(96deg, #ffffff 0%, #7fe3ff 48%, #3f7bff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.v2-hero__title-rest {
  display: block;
  margin-top: 0.6rem;
  font-size: clamp(0.98rem, min(1.5vw, 2.35vh), 1.32rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0;
  color: var(--v2-text-dim);
  max-width: 34ch;
}

.v2-hero__text p {
  color: var(--v2-text-dim);
  line-height: 1.6;
  margin: 0 0 var(--space-sm);
  max-width: 58ch;
}
.v2-hero__text p:last-child { margin-bottom: 0; }

.v2-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin-top: clamp(0.7rem, 3.4vh, var(--space-lg));
}

/* Beide Hero-Aktionen tragen dieselbe Bauform (.cta-orbit) und exakt
   dieselben Masse: gleiche Hoehe, gleiche Breite (zwei gleich breite
   Spalten, die Breite bestimmt der laengere Text). Nur die Farbe
   unterscheidet sich (blau / cyan, siehe .cta-orbit--cyan). */
.v2-hero__actions .cta-orbit {
  height: 52px;
  padding-inline: calc(var(--orbit-ring) + 1.6rem);
  font-size: 1rem;
}
@media (min-width: 768px) {
  .v2-hero__actions {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    width: fit-content;
  }
}

/* Scroll-Hinweis: fest am unteren Bildrand, solange es noch etwas zu
   scrollen gibt (initScrollHint blendet ihn erst am Seitenende aus). */
.v2-hero__hint {
  position: fixed;
  left: 50%;
  bottom: 1.2rem;
  translate: -50% 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(234, 246, 251, 0.42);
  opacity: 1;
  transition: opacity 300ms ease;
  pointer-events: none;
}
.v2-hero__hint.is-hidden { opacity: 0; }
.v2-hero__hint-rail {
  width: 1px;
  height: 46px;
  background: linear-gradient(180deg, transparent, rgba(140, 226, 240, 0.7));
  position: relative;
  overflow: hidden;
}
.v2-hero__hint-rail::after {
  content: "";
  position: absolute;
  left: 0;
  width: 1px;
  height: 14px;
  background: var(--v2-core);
  animation: v2-rail 2.2s ease-in-out infinite;
}

/* =============================================================================
   4) UEBERGANG - "Was wir tun"
   Liegt NICHT mehr in einer eigenen Sektion, sondern als eigene Ebene
   (.v2-hero__turn) direkt in der Hero-Buehne - siehe .v2-hero__stage
   weiter oben und initHero in orbit.js. Beide Bewegungen teilen
   sich dadurch denselben Fortschritt (--turn): die drei Woerter kippen
   schon herein, waehrend Marvin sich noch dreht und der
   Vorstellungstext verblasst, statt strikt danach in einem zweiten Akt
   nachzuziehen.

   .v2-turn__title/-word/-lead bleiben unveraendert (nur ihr Container
   ist neu) - dieselbe Kipp-Choreografie wie zuvor, nur jetzt an --turn
   statt an einen eigenen Sektions-Scrollfortschritt gekoppelt.
   ============================================================================= */
/* Dasselbe zweispaltige Raster wie .v2-hero__stage (0.9fr Bildspalte /
   1.1fr Textspalte) - der Titel landet dadurch GENAU an der Position,
   an der "Moin, ich bin Marvin de Vries" steht, statt zentriert ueber
   die gesamte Buehne (Bild + Text) zu schweben. Die Bildspalte bleibt
   leer (Marvins Portraet scheint einfach durch), nur die zweite Spalte
   traegt Inhalt. */
.v2-hero__turn {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  padding: calc(var(--header-h) + 2rem) clamp(1.2rem, 5vw, 5rem) 3rem;
  /* Erst unsichtbar UND nicht anklickbar: solange --turn bei 0 steht,
     liegt diese Ebene deckungsgleich ueber Bild und Text der
     Vorstellung und darf deren Knoepfe (Kontakt aufnehmen etc.) nicht
     blockieren. pointer-events kippt hart bei --turn > 0.5 - fruehe
     Werte gehoeren noch der Vorstellung, ab der Haelfte der Drehung
     gehoert die Buehne dem Uebergang. */
  pointer-events: none;
}
.v2-hero__turn[data-live] { pointer-events: auto; }

/* Traegt Titel + Lead in der zweiten Spalte - genau dort, wo
   .v2-hero__body seinen Inhalt hat. grid-column:2 uebersteuert die
   automatische Platzierung, damit dieses Element (nicht ein leerer
   Platzhalter fuer die Bildspalte) die zweite Spalte belegt. */
.v2-hero__turn-copy {
  grid-column: 2;
  position: relative;
  z-index: 3;
  max-width: 46rem;   /* wie .v2-hero__body: die Karte belegt denselben Platz */
  /* Kommt aus dem Warp heran: klein, unscharf und dunkel bei --in=0,
     scharf und in Originalgroesse bei --in=1. Der Titel bleibt dabei fest
     in der Karte und scrollt mit ihr aus dem Bild. */
  opacity: var(--in, 0);
  transform: scale(calc(0.9 + var(--in, 0) * 0.1));
  filter: blur(calc((1 - var(--in, 0)) * 12px)) brightness(calc(1 + (1 - var(--in, 0)) * 0.8));
  will-change: transform, filter, opacity;
}

.v2-turn__title {
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: baseline;
  gap: clamp(0.4rem, 1.6vw, 1.4rem);
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  /* Deutlich kleiner als die vorige zentrierte Fassung (dort clamp bis
     10rem): die Zeile muss jetzt in die ~55% breite Textspalte passen,
     nicht mehr ueber die gesamte Buehnenbreite laufen. */
  font-size: clamp(2.4rem, min(5.4vw, 7.6vh), 4.6rem);
  line-height: 0.98;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

/* Jedes Wort traegt seinen eigenen Fortschritt --p (0..1, vom JS
   gestaffelt gesetzt) und seine eigene Startlage --fx/--fy/--fr. Bei
   --p=0 steht es weit aussen und stark gekippt, bei --p=1 exakt in der
   Zeile. Weil alles nur an --p haengt, laeuft die Bewegung rueckwaerts
   genauso sauber wie vorwaerts. */
.v2-turn__word {
  display: inline-block;
  color: var(--v2-text);
  /* Bei --p=0 wirklich UNSICHTBAR, nicht nur blass: der frueher hier
     stehende Sockel von 0.05 liess "WAS WIR TUN" schon im Ausgangsbild
     des Heros ueber Portraet und Knoepfen durchscheinen, obwohl der Text
     erst beim Herunterscrollen hereinfliegen soll. */
  opacity: var(--p, 0);
  transform:
    translate3d(
      calc((1 - var(--p, 0)) * var(--fx, 0) * 0.3vw),
      calc((1 - var(--p, 0)) * var(--fy, 0) * 0.3vh),
      0)
    rotate(calc((1 - var(--p, 0)) * var(--fr, 0) * 1deg))
    scale(calc(0.86 + var(--p, 0) * 0.14));
  will-change: transform;
}
/* Das mittlere Wort ist die Betonung - es bekommt den Markenton. */
.v2-turn__word--accent {
  background: linear-gradient(100deg, var(--v2-core) 0%, var(--v2-core-mid) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.v2-turn__lead {
  position: relative;
  z-index: 3;
  max-width: none;
  margin: clamp(1rem, 3vh, 1.6rem) 0 0;
  text-align: left;
  color: var(--v2-text-dim);
  line-height: 1.7;
  opacity: var(--lead, 0);
  transform: translateY(calc((1 - var(--lead, 0)) * 24px));
}

/* =============================================================================
   5) ORBIT - der Kern und seine sechs Trabanten
   Erst baut sich das System auf, dann faehrt die Rakete hindurch und
   sammelt die sechs Leistungen ein.
   ============================================================================= */
.v2-orbit {
  position: relative;
  /* 100svh Buehne + Strecke fuer Aufbau, EINE volle Umdrehung und die
     Uebergabe an den Parcours.

     260svh statt zuvor 360: die Strecke war fuer den Raketenflug
     bemessen (Anflug, sechs gestaffelte Abwuerfe, Abflug). Seit die
     Sektion nur noch einmal herumdreht, braucht sie weniger - bei 360
     zog sich die Drehung zaeh, weil auf 2.6 Bildschirmhoehen bloss 360
     Grad verteilt lagen. Rund eineinhalb Bildschirmhoehen reines
     Drehen sind genug, um alle sechs einmal vorne zu sehen. */
  /* 200svh: 100svh Buehne + ein Schirm fuer die Uebergabe nach dem letzten Schritt.
     Die Schritte selbst (Ausgangs-Karte, Text-Karte, sechs Trabanten mit je einer
     Karte) laufen nicht am Scrollweg, sondern pro Scroll-Impuls (siehe initOrbit). */
  min-height: 250svh;   /* 150svh Uebergabe: der Planet tritt langsam zurueck, waehrend der Ausklang hereinscrollt */
}
.v2-orbit::before {
  background: radial-gradient(80% 60% at 62% 50%, rgba(47, 111, 237, 0.18) 0%, transparent 70%);
}

/* Sektion UND Buehne sind hier nur Rahmen und duerfen die Maus nicht
   abfangen: der Zentralplanet liegt in .v2-journey darunter (z-index 0,
   die Sektionen bei 1) und muss zum Ziehen erreichbar bleiben. Ohne das
   lag eine leere Flaeche in Bildschirmgroesse ueber ihm - der Hinweis
   "Ziehen zum Drehen" stand da, das Ziehen ging aber ins Leere.
   Die Inhalte (Textspalte, Kicker) holen sich die Ereignisse zurueck. */
.v2-orbit,
.v2-orbit__stage {
  pointer-events: none;
}
.v2-orbit__stage { display: block; }
.v2-orbit__stage > * { pointer-events: auto; }

/* Textspalte links, waehrend das System rechts aufgeht. */
/* Mittig im freien Raum zwischen linkem Bildschirmrand und der
   aeussersten Bahn. Das System sitzt bei 80% mit Breite min(96vh,42vw);
   sein linker Bahnrand liegt damit bei rund 43% der Fensterbreite, die
   Mitte des freien Streifens also bei gut 21%. Vorher klebte die Spalte
   linksbuendig am Rand und liess rechts davon eine breite Luecke. */
.v2-orbit__copy {
  position: absolute;
  z-index: 5;
  display: grid;
  gap: 0.9rem;
  justify-items: start;
  /* Karte: Optik und Platz wie .v2-orbit__intro (siehe dort) - beide stehen
     am selben Punkt und tauschen nacheinander, ohne sich zu ueberlagern.
     Der Wechsel laeuft ueber --copy (scharf, volle Groesse bei 1). */
  opacity: var(--copy, 0);
  transform: scale(calc(0.94 + var(--copy, 0) * 0.06));
  filter: blur(calc((1 - var(--copy, 0)) * 10px));
}
@media (min-width: 901px) {
  .v2-orbit__copy {
    left: 21.5%;
    top: calc(50% - 11rem);
    translate: -50% 0;
    width: min(30rem, 36vw);
  }
}
.v2-orbit__title-line,
.lst-orbit__title-line { display: block; white-space: nowrap; }
.v2-orbit__title {
  font-family: var(--font-display);
  font-weight: 700;
  /* Wie der Titel der Ausgangs-Karte (.v2-orbit__intro-title): beide Karten
     sind gleich gross gesetzt. */
  font-size: clamp(1.2rem, min(2.4vw, 3.6vh), 2.2rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0;
}
.v2-orbit__title em {
  font-style: normal;
  background: linear-gradient(100deg, var(--v2-core), var(--v2-core-mid));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.v2-orbit__lead {
  max-width: none;
  color: var(--v2-text-dim);
  font-size: clamp(0.82rem, min(1.05vw, 1.9vh), 1.05rem);
  line-height: 1.65;
  margin: 0;
}

/* ---- Das System ------------------------------------------------------
   Die Umlaufbahnen sind Ellipsen (Breite x Breite*0.62): die
   orthografische Projektion eines leicht geneigten Kreises. Bewusst
   KEINE 3D-Transformationen - die Trabanten muessen die Bahn spaeter
   verlassen und zur Rakete fliegen; in einer 3D-Szene waere jede dieser
   Zielpositionen erst in die Ebene zurueckzurechnen. Als flache Ellipse
   ist die Bahnposition eine Zeile Mathematik (siehe orbitPoint() in
   orbit.js) und das Ziel an der Rakete eine zweite. */
.v2-orbit__system {
  position: absolute;
  z-index: 2;
  /* 80% statt Bildmitte: das System sitzt jetzt deutlich rechts, mit
     der Textspalte links frei davon. Bei 80% Mittelpunkt UND einer
     Breite, die weiterhin an der Bildschirmhoehe haengt, wuerde der
     linke Bahnrand auf breiten Fenstern unter die Textspalte laufen -
     die Breite ist deshalb zusaetzlich durch einen vw-Wert gedeckelt,
     der bei 80% Mitte gerade noch bis zum rechten Fensterrand reicht,
     ohne unter die Kontaktleiste zu geraten. */
  left: var(--sys-x, 80%);
  top: 50%;
  /* 68vh statt 96vh: auf sehr breiten Fenstern fuellte der Planet fast die
     ganze Hoehe. */
  width: min(68vh, 42vw);
  aspect-ratio: 1;
  /* --sys-lift gleicht das Hochrollen der Buehne aus: der Planet fliegt nicht von unten herein, sondern
     steht von Anfang an an seinem Platz (dort, wo ihn der Hero als Milchglas-Hintergrund zeigt). */
  translate: -50% -50%;
  /* Baut sich beim Eintritt auf und tritt beim Abflug der Rakete
     zurueck. */
  scale: var(--sys-scale, 1);
  /* Ein Planet, zwei Zustaende: --focus 0 = Hintergrund (weichgezeichnet wie hinter Milchglas, gedaempft), 1 = Vordergrund
     (scharf). initOrbit setzt --focus aus dem Hochrollen der Buehne - vorwaerts wie rueckwaerts. */
  /* Kein Weichzeichner: er kostete Bildrate und machte das Band im Hero unleserlich; der Hintergrund bleibt durch die Daempfung (opacity) zurueck */
  opacity: calc(var(--sys-opacity, 1) * (0.78 + 0.22 * var(--focus, 1)));
  /* Anfassbar: Ziehen dreht das System, ein Schwung wirkt nach.
     touch-action: pan-y laesst das vertikale Scrollen unangetastet -
     auf dem Telefon wird also nur die Querbewegung als Drehen gelesen,
     das Weiterscrollen bleibt moeglich. */
  cursor: grab;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}
.v2-orbit__system[data-dragging] { cursor: grabbing; }

/* Ab hier ist genug Platz, damit das System noch einmal zulegen kann,
   ohne der Textspalte in die Quere zu kommen. */
@media (min-width: 1500px) {
  .v2-orbit__system { width: min(68vh, 44vw); }
}

/* Eine Bahn besteht aus ZWEI deckungsgleichen Halb-Ellipsen statt einer
   ganzen: nur so kann der Planet in der Mitte der Bahnebene liegen,
   statt davor oder dahinter. Die hintere Haelfte (oberer Bogen,
   --ring-half: back) liegt UNTER dem Kern und verschwindet hinter ihm,
   die vordere (unterer Bogen) laeuft DARUEBER hinweg. Ein einzelnes
   Ellipsen-Div kann das nicht - es hat genau eine Stapelposition und
   liegt damit zwangslaeufig komplett vor oder komplett hinter der
   Kugel.

   clip-path schneidet jeweils die andere Haelfte weg. Der Beschnitt
   liegt bei 50% der Elementhoehe, also exakt auf der Ellipsenachse -
   dort, wo die Bahn den Betrachterhorizont kreuzt und tatsaechlich von
   vorn nach hinten wechselt. */
.v2-orbit__ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--rw) * 1%);
  /* Die Neigung steckt im Hoehenverhaeltnis der Ellipse und kommt vom
     JS (--tilt, Grundwert siehe TILT in orbit.js) - beim Ziehen
     nach oben/unten kippt die Bahnebene, die Ringe muessen das
     mitmachen. Ein fester Faktor im Stylesheet koennte das nicht. */
  height: calc(var(--rw) * var(--tilt, 0.46) * 1%);
  translate: -50% -50%;
  border: 1px solid rgba(140, 226, 240, 0.34);
  border-radius: 50%;
  /* --rings-opacity nimmt die Bahnen bei der Uebergabe an den Parcours
     zurueck; der Kern bleibt dort als Kulisse stehen. */
  opacity: calc(var(--build, 0) * var(--rings-opacity, 1));
  scale: calc(0.72 + var(--build, 0) * 0.28);
}
/* Hintere Haelfte: oberer Bogen, hinter dem Kern (z 1 < Kern z 2). */
.v2-orbit__ring--back {
  z-index: 1;
  clip-path: inset(0 0 50% 0);
}
/* Vordere Haelfte: unterer Bogen, vor dem Kern (z 3 > Kern z 2). */
.v2-orbit__ring--front {
  z-index: 3;
  clip-path: inset(50% 0 0 0);
}
/* Die aeusserste Bahn gestrichelt: sie liest sich damit als Bahn und
   nicht als Kreisrahmen um das Bild. */
.v2-orbit__ring--dashed {
  border-style: dashed;
  border-color: rgba(140, 226, 240, 0.22);
}

/* Kern: der Planet, um den alles kreist.

   Er sitzt IN der Bahnebene, nicht davor: die Bahnen sind als je zwei
   Halb-Ellipsen gebaut (siehe .v2-orbit__ring--back/--front oben), der
   Kern liegt mit z-index 2 dazwischen. Vorne laufen die Linien ueber
   ihn hinweg, hinten verschwinden sie hinter ihm.

   Die Kugel selbst bleibt in JEDER Drehlage ein perfekter Kreis - eine
   gedrehte Kugel aendert nie ihren Umriss. Sichtbar wird die Drehung
   allein ueber die Oberflaeche (.v2-orbit__core-shade): eine
   Wolken-/Kontinentstruktur, die mit --surface-x horizontal
   durchwandert. Ohne eine solche Textur waere die Rotation ueberhaupt
   nicht wahrnehmbar, weil eine merkmalslose Kugel in jeder Drehlage
   identisch aussieht. */
.v2-orbit__core {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  /* Der Planet ist jetzt die Hauptfigur der Szene: bei --rw:118 fuer
     die innerste Bahn liegt er mit 100% Systembreite deutlich INNERHALB
     der Bahnen und fuellt die Buehne, statt als kleine Kugel in einem
     grossen Bahnsystem zu schwimmen. */
  width: 100%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  overflow: hidden;
  background:
    radial-gradient(circle at 34% 30%,
      rgba(255, 255, 255, 0.92) 0%,
      var(--v2-core) 14%,
      var(--v2-core-mid) 44%,
      var(--v2-core-deep) 74%,
      #061634 100%);
  box-shadow:
    0 0 80px rgba(47, 111, 237, 0.5),
    0 0 200px rgba(127, 227, 255, 0.22),
    /* Innerer Schatten am unteren rechten Rand: gibt der Flaeche die
       Rundung, ohne die Silhouette anzutasten. */
    inset -18px -22px 60px rgba(3, 10, 26, 0.6);
  /* --appear: der echte Planet taucht schon auf, waehrend die Buehne von
     unten hereinrollt (Hero geht, Planet kommt), noch bevor sich das System
     aufbaut. --build uebernimmt von dort aus bis voll. */
  scale: calc(0.97 + max(var(--build, 0), var(--appear, 0)) * 0.03);   /* kein Heranwachsen mehr: der Planet steht schon als Hero-Hintergrund da und wird nur scharf */
  /* KEINE Puls-Animation auf der Kugel selbst: v2-pulse laesst die
     opacity zwischen 0.82 und 1 schwingen, wodurch die Trabanten auf der
     Rueckseite (z-index 1) sichtbar durch den Planeten durchschienen,
     statt hinter ihm zu verschwinden. Das Atmen sitzt jetzt allein auf
     dem Lichtschein ringsum (.v2-orbit__core-halo), der Koerper bleibt
     deckend. */
  opacity: 1;   /* der Kern ist von Anfang an da (Hero-Hintergrund); Dimmen und Unschaerfe liegen am System */
}

/* Der atmende Lichtschein um den Planeten - traegt die Puls-Bewegung,
   die frueher auf der Kugel selbst lag. Liegt als eigene Ebene HINTER
   dem Koerper (z-index 0 innerhalb des Kerns reicht nicht, weil der
   Kern overflow:hidden hat - deshalb ein Geschwisterelement im System,
   siehe Markup). */
.v2-orbit__core-halo {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: 112%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    rgba(127, 227, 255, 0.20) 0%,
    rgba(47, 111, 237, 0.14) 42%,
    transparent 68%);
  scale: calc(0.97 + max(var(--build, 0), var(--appear, 0)) * 0.03);   /* kein Heranwachsen mehr: der Planet steht schon als Hero-Hintergrund da und wird nur scharf */
  opacity: max(var(--build, 0), var(--appear, 0));
  animation: v2-pulse 6s ease-in-out infinite;
  pointer-events: none;
}

/* Oberflaechenstruktur: mehrere weiche Flecken, die als
   background-position horizontal durchlaufen (--surface-x vom JS, in
   Prozent). background-repeat sorgt dafuer, dass die Struktur beim
   Durchlaufen nahtlos wieder hereinkommt - so entsteht der Eindruck
   einer rotierenden Kugeloberflaeche.

   Die Maske verjuengt die Struktur zu den Raendern hin: auf einer Kugel
   werden Oberflaechenmerkmale zum sichtbaren Rand hin gestaucht und
   verschwinden, statt bis an die Silhouette in voller Groesse zu
   laufen. Ohne sie klebte die Struktur sichtbar flach auf einer
   Scheibe. */
.v2-orbit__core-shade {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-image:
    radial-gradient(38% 46% at 18% 32%, rgba(255, 255, 255, 0.20), transparent 70%),
    radial-gradient(30% 40% at 52% 62%, rgba(160, 235, 255, 0.16), transparent 72%),
    radial-gradient(26% 34% at 78% 26%, rgba(255, 255, 255, 0.13), transparent 70%),
    radial-gradient(34% 30% at 88% 70%, rgba(47, 111, 237, 0.22), transparent 74%);
  background-size: 50% 100%;
  background-repeat: repeat-x;
  background-position: calc(var(--surface-x, 0) * 1%) 0;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 42%, rgba(0, 0, 0, 0.35) 72%, transparent 92%);
  mask-image: radial-gradient(circle at 50% 50%, #000 42%, rgba(0, 0, 0, 0.35) 72%, transparent 92%);
  pointer-events: none;
}

/* Ein Trabant = eine Leistung. Position setzt das JS in Pixeln relativ
   zur Systemmitte (--tx/--ty), damit derselbe Mechanismus die Bahn UND
   den Weg zur Rakete beschreiben kann. */
.v2-orbit__sat {
  position: absolute;
  left: 50%;
  top: 50%;
  /* Die Konstellation ist starr (alle Bahnen gleich schnell, siehe
     ringSpeed im JS), der engste Abstand zweier Kugeln liegt damit fest
     bei rund 210px. Bei dieser Groesse bleiben davon ueber 120px Luft. */
  width: clamp(52px, 5.6vw, 82px);
  aspect-ratio: 1;
  margin: 0;
  transform:
    translate3d(calc(var(--tx, 0) * 1px), calc(var(--ty, 0) * 1px), 0)
    translate(-50%, -50%)
    scale(var(--sat-scale, 1));
  opacity: var(--sat-opacity, 0);
  /* Tiefenstaffelung: was gerade vor dem Kern laeuft, liegt darueber;
     was dahinter laeuft, verschwindet hinter ihm. --sat-z setzt das JS
     aus der Bahnposition (siehe orbitPoint). Ohne das schwebten alle
     sechs gleichweit vorn und die Bahnen sahen flach aus. */
  z-index: var(--sat-z, 3);
  will-change: transform;
}

/* Der Koerper: dieselbe vierlagige Kugel wie .v2-planet__body im
   Parcours - Glanzpunkt, Rueckstrahlung, Eigenfarbe mit aufgehellter
   Tagseite, Eigenschatten. Frueher war der Trabant eine eckige Karte
   mit backdrop-filter; die stand als Fremdkoerper zwischen lauter
   Himmelskoerpern. Die Werte sind bewusst dieselben wie dort, damit
   ein Feld hier und im Parcours als DERSELBE Planet gelesen wird. */
.v2-orbit__sat-body {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  /* Rueckfall zuerst: ohne color-mix() bliebe der ganze background
     sonst ungueltig und die Kugel unsichtbar. */
  background: radial-gradient(circle at 34% 28%, var(--tint) 0%, #04101a 78%);
  background:
    radial-gradient(circle at 29% 23%, rgba(255,255,255,1) 0%, rgba(255,255,255,0.6) 6%, transparent 24%),
    radial-gradient(circle at 78% 82%, rgba(160, 235, 255, 0.5) 0%, transparent 34%),
    radial-gradient(circle at 37% 31%,
      color-mix(in srgb, var(--tint) 40%, #ffffff) 0%,
      var(--tint) 26%,
      color-mix(in srgb, var(--tint) 50%, #06202c) 58%,
      #04101a 100%);
  box-shadow:
    inset -6px -8px 20px rgba(4, 16, 26, 0.72),
    0 0 22px rgba(127, 227, 255, 0.18);
}

/* Die Atmosphaere - wie .v2-planet__halo, nur enger. */
.v2-orbit__sat-halo {
  position: absolute;
  inset: -16%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    transparent 56%,
    color-mix(in srgb, var(--tint) 26%, transparent) 70%,
    transparent 84%);
  pointer-events: none;
}

/* Das Logo liegt AUF der Kugeloberflaeche und dreht mit ihr.

   --face-x ist die Laengengrad-Position: 0 heisst mittig zum Betrachter,
   +-1 der jeweilige Rand. Zwei Groessen ergeben zusammen die Woelbung:
   der waagerechte Versatz (die Wanderung ueber die sichtbare Halbkugel)
   und die Stauchung zum Rand hin (--face-squeeze) - das ist die
   Verkuerzung, die eine gewoelbte Flaeche erzeugt. --face-opacity
   blendet aus, sobald das Logo auf die abgewandte Seite laeuft.

   Dass das Logo dabei zeitweise nicht zu sehen ist, ist unkritisch: die
   Zuordnung zur Leistung traegt der Schriftzug UNTER dem Planeten, und
   der dreht nicht mit. */
.v2-orbit__sat-face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  /* Der Aufdruck endet an der Silhouette - was darueber hinauslaeuft,
     ist auf der Rueckseite und darf nicht zu sehen sein. */
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
  transform:
    translateX(calc(var(--face-x, 0) * 34%))
    scaleX(var(--face-squeeze, 1));
  opacity: var(--face-opacity, 1);
}
.v2-orbit__sat-face svg {
  width: 46%;
  height: auto;
  /* Der Schatten hebt das Logo von der Kugelfarbe ab - ohne ihn
     verschwimmen helle Logos auf hellen Tagseiten. */
  filter: drop-shadow(0 1px 3px rgba(4, 16, 26, 0.55));
}

/* Der Name steht UNTER dem Planeten und dreht nicht mit: er ist die
   Zuordnung zur Leistung und muss in jeder Drehlage lesbar bleiben.
   Auf der Kugel waere er die Haelfte der Zeit weggedreht oder bis zur
   Unkenntlichkeit gestaucht. */
.v2-orbit__sat-label {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  translate: -50% 0;
  white-space: nowrap;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.56vw, 1.24rem);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
  color: rgba(234, 246, 251, 0.82);
  text-shadow: 0 1px 4px rgba(4, 16, 26, 0.85);
  opacity: var(--label-opacity, 0);
  pointer-events: none;
}

/* Einmaliger Hinweis auf die Drehbarkeit. Sitzt unter dem Kern, ist
   selbst nicht anfassbar (der Griff ist die ganze Flaeche) und
   verschwindet nach der ersten Beruehrung dauerhaft. */
.v2-orbit__drag-hint {
  position: absolute;
  /* Ueber der Tiefenstaffelung (Trabanten 1/3, Kern 2) - ohne eigene
     Ebene lag der Hinweis hinter dem Kern und war schlicht nicht zu
     sehen. Und tief genug, dass er nicht im Leuchten des Kerns
     verschwindet: 64% der Systemhoehe liegt sicher ausserhalb. */
  z-index: 4;
  left: 50%;
  /* UNTERHALB des gesamten Systems, nicht mehr darin. Die aeusserste
     Bahn (--rw:178) reicht bei der Grundneigung bis rund 91% der
     Systemhoehe - der Hinweis stand bei 78% also mitten in ihr. Beim
     Kippen nach oben (TILT_MAX) waechst die Ellipse noch weiter, jeder
     Wert innerhalb des Systems waere also frueher oder spaeter
     getroffen. Ausserhalb ist er dauerhaft frei. */
  top: 103%;
  translate: -50% 0;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.34rem 0.75rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(140, 226, 240, 0.22);
  background: rgba(4, 20, 28, 0.55);
  backdrop-filter: blur(6px);
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(234, 246, 251, 0.66);
  pointer-events: none;
  opacity: var(--hint, 0);
  transition: opacity 400ms var(--ease-out);
}
.v2-orbit__drag-hint svg { width: 13px; height: 13px; }
/* Einmal angefasst - der Hinweis hat seinen Zweck erfuellt. */
.v2-orbit__system[data-touched] .v2-orbit__drag-hint { opacity: 0; }

/* =============================================================================
   6) PARCOURS - die sechs Leistungen als Planeten
   Rasterhintergrund, davor die Planeten in unterschiedlichen Groessen.
   Beim Scrollen ziehen sie von rechts nach links durch den Brennpunkt;
   rechts unten laufen zwei Anzeigen mit: die Draufsicht auf das
   Bahnsystem und das Kurvendiagramm aus Variante 1.
   ============================================================================= */
.v2-track {
  position: relative;
  /* Anlauf + sechs Leistungen, je rund eine Bildschirmhoehe Scrollweg. */
  min-height: 560svh;
}
.v2-track::before {
  background: radial-gradient(70% 60% at 30% 45%, rgba(18, 66, 86, 0.45) 0%, transparent 70%);
}

.v2-track__stage { display: block; }

/* Die Bahn, auf der die Planeten laufen. Die Planeten selbst sitzen
   absolut darin, ihr --x kommt vom JS. */
/* BEWUSST OHNE z-index: die Bahn darf keinen eigenen Stapelkontext
   aufmachen. Sonst laegen alle sechs Planeten geschlossen ueber dem
   Zentralplaneten, und ihr --z (vor/hinter dem Kern) waere wirkungslos -
   ein hinterer Planet koennte nie dahinter verschwinden. */
.v2-track__lane {
  position: absolute;
  inset: 0;
}

.v2-planet {
  position: absolute;
  left: 0;
  top: 50%;
  width: calc(var(--size) * 1vmin);
  aspect-ratio: 1;
  margin: 0;
  /* --x ist die MITTE des Planeten in vw, --y sein Versatz zur
     Mittelachse in vh. Das nachgestellte translate(-50%,-50%) setzt den
     Planeten auf diesen Punkt - ohne das waere --x seine linke Kante und
     ein grosser Planet stuende deutlich weiter rechts als ein kleiner,
     obwohl beide denselben Wert tragen. */
  transform:
    translate3d(calc(var(--x, 120) * 1vw), calc(var(--y, 0) * 1vh), 0)
    translate(-50%, -50%)
    scale(var(--scale, 1));
  opacity: var(--opacity, 0);
  /* Tiefenstaffelung gegen den Zentralplaneten: was vor ihm laeuft,
     liegt darueber, was dahinter zieht, verschwindet hinter ihm. Der
     Zentralplanet klebt in .v2-journey__stage mit z-index 0, ein
     hinterer Planet muss also darunter liegen. */
  z-index: var(--z, 3);
  will-change: transform;
}

/* Der Koerper: eine Kugel aus reinem CSS. Vier Ebenen uebereinander -
   Glanzlicht, Eigenfarbe, Terminator (die Schattenkante zur Nachtseite)
   und ein feiner Rand. Zusammen liest sich das als beleuchtete Kugel und
   nicht als farbiger Kreis. */
.v2-planet__body {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  /* Rueckfall zuerst: ohne color-mix()-Unterstuetzung bliebe der
     gesamte background sonst ungueltig und der Planet unsichtbar. */
  background: radial-gradient(circle at 34% 28%, var(--tint) 0%, #04101a 78%);
  background:
    /* Glanzpunkt der Lichtquelle */
    radial-gradient(circle at 29% 23%, rgba(255,255,255,1) 0%, rgba(255,255,255,0.6) 6%, transparent 24%),
    /* Rueckstrahlung: der duenne helle Saum unten rechts, der eine Kugel
       erst rund aussehen laesst statt flach */
    radial-gradient(circle at 78% 82%, rgba(160, 235, 255, 0.5) 0%, transparent 34%),
    /* Der Koerper selbst: von der aufgehellten Tagseite ueber die
       Eigenfarbe zur fast schwarzen Nachtseite. Die Tagseite ist bewusst
       mit Weiss aufgehellt - eine Kugel in reiner Vollfarbe liest sich
       als Kreis, nicht als beleuchteter Koerper. */
    radial-gradient(circle at 37% 31%,
      color-mix(in srgb, var(--tint) 40%, #ffffff) 0%,
      var(--tint) 26%,
      color-mix(in srgb, var(--tint) 50%, #06202c) 58%,
      #04101a 100%);
  box-shadow:
    /* Nur so viel Eigenschatten, dass die Kante zur Nachtseite sitzt -
       mehr davon frisst die Aufhellung der Tagseite wieder auf. */
    inset -14px -18px 44px rgba(4, 16, 26, 0.72),
    0 0 calc(var(--size) * 0.5vmin) rgba(127, 227, 255, 0.16);
  /* Langsame Eigendrehung: die Kugel steht nie ganz still. */
  animation: v2-drift 26s ease-in-out infinite;
}

/* Ein zweiter, sehr weicher Ring aussen herum - die Atmosphaere. */
.v2-planet__halo {
  position: absolute;
  inset: -14%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    transparent 58%,
    color-mix(in srgb, var(--tint) 22%, transparent) 70%,
    transparent 82%);
  opacity: var(--focus, 0);
}

/* Beschrifter: ein Punkt, von dem eine duenne Linie zum Planeten laeuft,
   und der Name daneben. Genau die Bauform aus der Vorlage. */
.v2-planet__pin {
  position: absolute;
  left: calc(var(--pin-x) * 1%);
  top: calc(var(--pin-y) * 1%);
  display: flex;
  align-items: center;
  gap: 8px;
  /* Der PUNKT sitzt auf dem angegebenen Ort, die Beschriftung schliesst
     nach aussen an - nicht die Mitte des Gespanns, sonst haenge das
     Wort ueber dem Planeten statt daneben. */
  transform: translateY(-50%);
  opacity: var(--focus, 0);
  pointer-events: none;
}
/* Beschrifter links des Planeten: der Name steht links vom Punkt, damit
   er vom Planeten weg laeuft und ihn nicht ueberdeckt. */
.v2-planet__pin--left {
  flex-direction: row-reverse;
  transform: translate(-100%, -50%);
}
.v2-planet__pin-dot {
  position: relative;
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 50%;
  background: var(--tint);
  box-shadow: 0 0 12px color-mix(in srgb, var(--tint) 70%, transparent);
}
/* Die Verbindungslinie: ein 1px-Strich, per --pin-rot zum Planeten
   gedreht und per --pin-len auf dessen Abstand gebracht. */
.v2-planet__pin-dot::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  /* Laenge in Prozent der Planetenbreite statt in festen Pixeln: sonst
     haengt die Linie beim grossen Planeten in der Luft und steckt beim
     kleinen mitten in der Kugel. */
  width: calc(var(--size) * var(--pin-len) * 0.01vmin);
  height: 1px;
  background: linear-gradient(90deg, var(--tint), color-mix(in srgb, var(--tint) 25%, transparent));
  transform-origin: 0 50%;
  transform: rotate(calc(var(--pin-rot) * 1deg));
}
.v2-planet__pin-label {
  font-family: var(--font-display);
  font-size: clamp(0.62rem, 0.9vw, 0.8rem);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--v2-text);
}

/* ---- Erklaertext im Brennpunkt --------------------------------------- */
/* Auf mittiger Bildschirmhoehe und etwas eingerueckt - nicht mehr unten
   links in der Ecke. Der Planet zieht in der oberen Bildhaelfte vor dem
   Kern vorbei, der Text steht damit auf einer Linie mit ihm statt
   darunter wegzurutschen. */
.v2-track__caption {
  position: absolute;
  z-index: 5;
  /* Deutlich weiter rechts als zuvor (9vw). Nicht ganz auf die Position
     aus "Was wir tun" (47vw): dort ist der Text rund 30vw breit und
     liefe damit genau durch die Bahn der Trabanten um den Kern (Mitte
     80vw). 20vw haelt beides frei. */
  left: clamp(2rem, 20vw, 22rem);
  top: 50%;
  translate: 0 -50%;
  max-width: min(32ch, 32vw);
  opacity: var(--caption, 0);
  /* Faehrt MIT den Trabanten von rechts herein, statt von unten
     hochzurutschen - beide kommen aus derselben Richtung. */
  transform: translateX(calc((1 - var(--caption, 0)) * 14vw));
}
.v2-track__caption-kicker {
  display: block;
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--caption-tint, var(--v2-core));
  margin-bottom: 0.5rem;
}
.v2-track__caption-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.4rem, 2.8vw, 2.4rem);
  line-height: 1.1;
  margin: 0 0 0.6rem;
}
.v2-track__caption-text {
  color: var(--v2-text-dim);
  line-height: 1.65;
  margin: 0;
}

/* ---- HUD rechts unten ------------------------------------------------
   Zwei Anzeigen nebeneinander: links die Draufsicht auf das Bahnsystem
   (welche Leistung laeuft gerade), rechts das Kurvendiagramm aus
   Variante 1 (was sie bewirkt). Die grosse Kurvenbuehne von Variante 1
   lebt damit als Messinstrument weiter, statt den Bildschirm zu fuellen.
   ---------------------------------------------------------------------- */
.v2-hud {
  position: absolute;
  z-index: 6;
  right: clamp(1rem, 3vw, 3rem);
  bottom: clamp(1.2rem, 4vh, 3rem);
  display: flex;
  gap: clamp(0.6rem, 1.2vw, 1rem);
  opacity: var(--hud, 0);
  transform: translateY(calc((1 - var(--hud, 0)) * 26px));
}
.v2-hud__panel {
  margin: 0;
  padding: 0.7rem 0.8rem 0.55rem;
  border: 1px solid rgba(140, 226, 240, 0.2);
  border-radius: 10px;
  background: rgba(4, 20, 28, 0.62);
  backdrop-filter: blur(8px);
}
.v2-hud__caption {
  display: block;
  font-family: var(--font-display);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(234, 246, 251, 0.45);
  margin-bottom: 0.4rem;
}
.v2-hud__panel svg { display: block; }
.v2-hud__panel--map svg { width: clamp(96px, 11vw, 148px); height: auto; }
.v2-hud__panel--chart svg { width: clamp(150px, 17vw, 236px); height: auto; }

/* Draufsicht: sechs Bahnen, je ein Punkt. Der aktive Punkt und seine
   Bahn treten hervor, alle anderen bleiben zurueck. */
.v2-hud__orbit { fill: none; stroke: rgba(140, 226, 240, 0.22); stroke-width: 0.7; }
.v2-hud__orbit.is-active { stroke: var(--tint); stroke-width: 1.1; }
/* Jeder Punkt sitzt in einer eigenen Gruppe, die um die Mitte gedreht
   wird - genau wie die Trabanten um den grossen Planeten. --a ist sein
   Startwinkel (aus den urspruenglich fest gesetzten Koordinaten
   zurueckgerechnet, das Bild bleibt also dasselbe), --spin kommt vom JS
   und laeuft mit derselben Drehung wie das grosse Original. */
.v2-hud__dot-orbit {
  transform: translate(60px, 60px) rotate(calc((var(--a, 0) + var(--spin, 0)) * 1deg));
}
.v2-hud__dot { fill: rgba(140, 226, 240, 0.35); transition: fill 0.3s, r 0.3s; }
.v2-hud__dot.is-active { fill: var(--tint); r: 3.2; filter: drop-shadow(0 0 5px var(--tint)); }
.v2-hud__center { fill: var(--v2-core); filter: drop-shadow(0 0 6px var(--v2-core)); }

/* Kurvendiagramm: die Kurven sind massstabsgetreu aus Variante 1
   uebernommen (dieselben Stuetzpunkte, nur auf das kleine Feld
   heruntergerechnet). --draw (0..1) steuert stroke-dashoffset, die Kurve
   zeichnet sich also mit dem Scrollen und rollt sich beim Zurueckscrollen
   wieder ein. */
.v2-hud__axis { stroke: rgba(140, 226, 240, 0.16); stroke-width: 0.7; }
.v2-hud__curve {
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1000;
  stroke-dashoffset: calc(1000 - var(--draw, 0) * 1000);
  opacity: 0;
}
.v2-hud__curve.is-active { opacity: 1; }
/* Bereits gelaufene Kurven bleiben als blasse Spur stehen - man sieht,
   wie sich das Bild ueber die Sektion aufbaut. */
.v2-hud__curve.is-past { opacity: 0.22; }

/* =============================================================================
   7) AUSKLANG - Kernaussage und die drei Schritte
   ============================================================================= */
.v2-outro {
  position: relative;
  min-height: 230svh;
}
.v2-outro::before {
  background: radial-gradient(80% 55% at 50% 18%, rgba(47, 111, 237, 0.22) 0%, transparent 72%);
}

.v2-outro__stage {
  display: grid;
  align-content: center;
  gap: clamp(1.5rem, 5vh, 3.5rem);
  padding: calc(var(--header-h) + 2rem) clamp(1.2rem, 5vw, 5rem) clamp(2rem, 6vh, 4rem);
}

.v2-outro__claim {
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 6.4vw, 5.4rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0;
  opacity: var(--claim, 0);
  transform: translateY(calc((1 - var(--claim, 0)) * 40px));
}
.v2-outro__claim em {
  font-style: normal;
  background: linear-gradient(100deg, var(--v2-core) 0%, var(--v2-core-mid) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.v2-outro__claim-sub {
  display: block;
  margin-top: 0.8rem;
  font-family: var(--font-base);
  font-size: clamp(0.95rem, 1.4vw, 1.15rem);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--v2-text-dim);
}

/* Die drei Schritte ziehen NACHEINANDER von unten herein - jeder Block
   hat seinen eigenen Fortschritt --p, den das JS gestaffelt aus dem
   Scrollfortschritt ableitet. */
.v2-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.8rem, 1.6vw, 1.6rem);
  max-width: var(--max-width);
  width: 100%;
  margin: 0 auto;
}
.v2-step {
  position: relative;
  padding: clamp(1.2rem, 2.4vw, 2rem);
  border: 1px solid rgba(140, 226, 240, 0.18);
  border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(18, 66, 86, 0.55) 0%, rgba(7, 28, 40, 0.75) 100%);
  opacity: var(--p, 0);
  transform: translateY(calc((1 - var(--p, 0)) * 26vh));
  will-change: transform;
}
.v2-step__num {
  display: block;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--v2-core);
  margin-bottom: 0.7rem;
}
.v2-step h3 {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  margin: 0 0 0.5rem;
}
.v2-step p {
  color: var(--v2-text-dim);
  line-height: 1.65;
  margin: 0;
  font-size: 0.95rem;
}
/* Verbindungslinie zwischen den Schritten - macht aus drei Karten einen
   Weg. Am letzten Block entfaellt sie. */
.v2-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  width: clamp(0.8rem, 1.6vw, 1.6rem);
  height: 1px;
  background: linear-gradient(90deg, rgba(140, 226, 240, 0.5), transparent);
}

/* =============================================================================
   8) FINALE - Zitat und Aufruf, als letzte Weltraum-Sektion
   Liegt AUSSERHALB von .v2-space (die Huelle endet bewusst beim Ausklang
   - eine sechste Sektion haette ihren Vorlauf/Fade-Mechanismus unноetig
   verkompliziert), fuehrt aber denselben Grund und dasselbe Sternenfeld
   fort, statt in die generische .quote/.cta-band-Optik aus style.css
   umzuschalten. Der Farbwechsel VOR dieser Sektion (v2-outro endet auf
   var(--v2-deep)) und ihr eigener Anfangston sind deshalb gleich - ohne
   das stiess hier eine Kante wie zwischen zwei verschiedenen Websites.

   Das Zitat selbst wird zum Sternbild: die Anfangsbuchstaben der
   Schluesselwoerter leuchten wie Sterne, duenne Linien verbinden sie zu
   einer Konstellation - das Bild, das die Weltraum-Metapher am Ende
   einloest, statt sie in einer x-beliebigen Karte zu verlassen.
   ============================================================================= */
/* Liegt jetzt INNERHALB von .v2-space (siehe Markup) und laesst deshalb
   das gemeinsame Raster samt Sternenfeld durchscheinen, statt sich
   beides selbst nachzubauen. Kein eigener Grund mehr - eine deckende
   Flaeche wuerde die Huelle darunter verdecken (vgl. .v2-space >
   section weiter oben). Uebrig bleibt nur das eigene Licht, und das
   liegt wie bei den Nachbarsektionen in einer Ebene mit weicher Ober-
   und Unterkante (.v2-final::before, gleich unten).

   Frueher stand hier ein eigener Verlauf (--v2-deep -> --v2-void) plus
   ein nachgebautes Raster aus nur einer 32px-Ebene, ohne das grobe
   160px-Raster und ohne Sterne. An der Sektionsgrenze wechselten damit
   Farbe UND Rastergeometrie auf einen Schlag - die harte Kante zwischen
   Ausklang und Finale. */
.v2-final {
  position: relative;
  padding: clamp(4rem, 11vh, 7.5rem) 0 clamp(4.5rem, 12vh, 8rem);
}
/* Der Schimmer, unter dem das Sternbild steht - dieselbe Rolle wie
   .v2-orbit::before bei den Nachbarsektionen. Die weiche Ober-/
   Unterkante kommt aus der gemeinsamen Regel oben. */
.v2-final::before {
  background: radial-gradient(70% 60% at 50% 38%, rgba(47, 111, 237, 0.16) 0%, transparent 68%);
}

.v2-final__inner {
  position: relative;
  z-index: 1;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 clamp(1.2rem, 4vw, 3rem);
}

/* ---- Das Zitat als Sternbild ------------------------------------------
   .v2-constellation ist die Buehne fuer BEIDES: den Fliesstext und die
   SVG-Ebene mit den Verbindungslinien. Beide teilen sich dasselbe
   Koordinatensystem (die <mark>-Elemente liefern per
   getBoundingClientRect ihre Position, siehe initFinal in
   orbit.js), deshalb liegt das SVG absolut ueber dem Text statt
   getrennt daneben. */
.v2-constellation {
  position: relative;
  max-width: 48rem;
  margin: 0 auto clamp(3rem, 8vh, 5rem);
  text-align: center;
}
/* Die Sternbild-Ebene reicht deutlich UEBER den Textbereich hinaus
   (negative inset-Werte): das Zitat schwebt dadurch IM Sternbild, statt
   von ihm nur unterlegt zu sein. Die zusaetzliche Flaeche traegt die
   aeusseren Fixsterne, die zu keinem Schluesselwort gehoeren.
   overflow:visible, damit nichts an der Kante abgeschnitten wird. */
.v2-constellation__lines {
  position: absolute;
  /* Der Ueberstand steht als Custom Property, weil initFinal() in
     orbit.js denselben Wert braucht, um die SVG-Flaeche und die
     Wortpositionen darin auszurechnen. Zwei getrennte Zahlenpaare in
     CSS und JS wuerden beim naechsten Anpassen auseinanderlaufen. */
  /* Waagerecht nur ein kleiner Ueberstand: .v2-final traegt
     overflow:clip, alles darueber hinaus wuerde ohnehin abgeschnitten.
     Senkrecht ist reichlich Platz in der Sektion - dort traegt der
     Ueberstand die aeusseren Fixsterne ueber und unter dem Zitat. */
  --const-over-x: 40px;
  --const-over-y: 224px;   /* breite Bildschirme: das Sternbild spannt seitlich weiter auf, siehe Media Queries unten */
  inset: calc(var(--const-over-y) * -1) calc(var(--const-over-x) * -1);
  max-width: none; max-height: none;   /* sonst quetscht das allgemeine svg{max-width:100%} die Ebene auf die Textbreite und die Sterne rutschen von den Woertern */
  z-index: 0;
  overflow: visible;
  pointer-events: none;
}
/* Breite Bildschirme: die Ebene reicht seitlich weiter ueber den Text hinaus, die Fixsterne verteilen sich mit */
/* Ueberstand nie groesser als der Rand neben dem Text (48rem Textbreite), sonst scrollt die Seite waagerecht */
@media (max-width: 899px) { .v2-constellation__lines { --const-over-x: 0px; } }
@media (min-width: 900px) { .v2-constellation__lines { --const-over-x: 60px; } }
@media (min-width: 1100px) { .v2-constellation__lines { --const-over-x: 160px; } }
@media (min-width: 1280px) { .v2-constellation__lines { --const-over-x: 240px; --const-over-y: 260px; } }
@media (min-width: 1440px) { .v2-constellation__lines { --const-over-x: 300px; } }
/* Auslaeufer: blasse Linien vom ersten und letzten Wortstern hinaus zu den aeusseren Fixsternen */
.v2-constellation__line--tail { stroke: rgba(140, 226, 240, 0.2); }

.v2-constellation__line {
  fill: none;
  stroke: rgba(140, 226, 240, 0.35);
  stroke-width: 1;
  stroke-dasharray: 3 5;
  opacity: var(--const-in, 0);
  transition: opacity 900ms var(--ease-out);
}

/* Die Sterne der Konstellation: leuchten nach dem Einblenden dauerhaft
   weiter, jeder mit eigener Phase (--twinkle-delay vom JS gesetzt) -
   ohne Versatz wuerden alle im Gleichtakt blinken, was mechanisch wirkt
   statt wie ein Sternenhimmel.

   Die Animation laeuft auf einem eigenen <g>-Wrapper bzw. ueber
   opacity-Multiplikation: --const-in traegt das einmalige Einblenden
   (Transition), die Keyframes darueber das dauerhafte Flackern. Beides
   auf derselben Eigenschaft ginge nicht - deshalb sitzt das Flackern
   auf einer eigenen Ebene aus <circle>-Halo und Kern. */
.v2-constellation__star {
  fill: var(--v2-core);
  opacity: var(--const-in, 0);
  transition: opacity 600ms var(--ease-out);
  animation: v2-twinkle 3.4s ease-in-out infinite;
  animation-delay: var(--twinkle-delay, 0s);
}
/* Weicher Lichthof um jeden Stern - macht aus dem Punkt einen
   leuchtenden Fixstern statt eines flachen Kreises. */
.v2-constellation__glow {
  fill: var(--v2-core);
  opacity: calc(var(--const-in, 0) * 0.22);
  transition: opacity 900ms var(--ease-out);
  animation: v2-twinkle-glow 3.4s ease-in-out infinite;
  animation-delay: var(--twinkle-delay, 0s);
  filter: blur(2.5px);
}
/* Die aeusseren Fixsterne (gehoeren zu keinem Wort, fuellen die Flaeche
   um den Text herum) - kleiner und blasser als die Wortsterne, damit
   die Konstellation ihre Hierarchie behaelt. */
.v2-constellation__field-star {
  fill: rgba(234, 246, 251, 0.75);
  opacity: calc(var(--const-in, 0) * 0.55);
  transition: opacity 1200ms var(--ease-out);
  animation: v2-twinkle 4.2s ease-in-out infinite;
  animation-delay: var(--twinkle-delay, 0s);
}

@keyframes v2-twinkle {
  0%, 100% { opacity: var(--const-in, 0); }
  50%      { opacity: calc(var(--const-in, 0) * 0.45); }
}
@keyframes v2-twinkle-glow {
  0%, 100% { opacity: calc(var(--const-in, 0) * 0.22); }
  50%      { opacity: calc(var(--const-in, 0) * 0.5); }
}

@media (prefers-reduced-motion: reduce) {
  .v2-constellation__star,
  .v2-constellation__glow,
  .v2-constellation__field-star { animation: none; }
}

.v2-quote {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  line-height: 1.5;
  color: var(--v2-text);
}
/* Die markierten Schluesselwoerter: ein Punkt am fuehrenden Buchstaben
   uebernimmt die Rolle des Sterns, das Wort selbst hebt sich sanft vom
   Fliesstext ab. data-star traegt den Index (0..N-1) - initFinal liest
   ihn aus, um Position und Verbindungslinie zuzuordnen. */
.v2-quote mark {
  position: relative;
  background: none;
  color: var(--v2-core);
  font-weight: 600;
}
.v2-quote mark::before {
  content: "";
  position: absolute;
  left: -0.05em;
  top: -0.15em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--v2-core);
  box-shadow: 0 0 8px 2px rgba(127, 227, 255, 0.65);
}

.v2-quote__author {
  position: relative;
  z-index: 1;
  margin: clamp(1.2rem, 3vh, 1.8rem) 0 0;
  font-family: var(--font-display);
  font-weight: 600;
  /* Gedaempfter als der Sternton (--v2-core): der volle Cyan ist fuer
     die sechs einzelnen Wortsterne im Fliesstext gedacht, auf einer
     ganzen Namenszeile wirkte er zu grell und lenkte vom Zitat ab. */
  color: color-mix(in srgb, var(--v2-core) 55%, var(--v2-text));
}
.v2-quote__author span {
  display: block;
  margin-top: 0.2rem;
  font-weight: 400;
  font-size: 0.875rem;
  color: var(--v2-text-dim);
}

/* ---- FAQ ------------------------------------------------------------
   Bewusst OHNE Aufklapp-Mechanik: eingeklappte Antworten sind zwar im
   HTML vorhanden, viele Antwortmaschinen bewerten sichtbaren Text aber
   hoeher. Der Block ist kurz genug, dass er offen stehen kann. */
.v2-faq {
  position: relative;
  z-index: 1;
  max-width: 56rem;
  margin: 0 auto clamp(2.5rem, 7vh, 4rem);
}
.v2-faq__title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  color: var(--v2-text);
  margin: 0 0 clamp(1.2rem, 3vh, 1.8rem);
  text-align: center;
}
.v2-faq__item {
  padding: clamp(0.9rem, 2.2vh, 1.3rem) 0;
  border-top: 1px solid rgba(140, 226, 240, 0.14);
}
.v2-faq__item:last-child { border-bottom: 1px solid rgba(140, 226, 240, 0.14); }

/* Die Frage ist die Schaltflaeche. list-style/::-webkit-details-marker
   nehmen das eingebaute Dreieck weg - an seine Stelle tritt das
   Plus/Minus rechts (siehe ::after). */
.v2-faq__summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  list-style: none;
  /* Ohne das bleibt in Safari das Dreieck stehen. */
  -webkit-tap-highlight-color: transparent;
}
.v2-faq__summary::-webkit-details-marker { display: none; }
.v2-faq__summary:focus-visible {
  outline: 2px solid var(--v2-core);
  outline-offset: 4px;
  border-radius: 4px;
}

/* Das h3 bleibt als Ueberschrift erhalten (Gliederung und
   FAQPage-Schema), traegt hier aber keine eigenen Abstaende mehr - die
   kommen vom summary. */
.v2-faq__item h3 {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  color: var(--v2-text);
  margin: 0;
  transition: color 0.2s ease;
}
.v2-faq__summary:hover h3 { color: var(--v2-core); }

/* Plus, das im offenen Zustand zum Minus wird. Beide Balken stecken als
   Verlaeufe IN EINEM Pseudoelement - mit zwei getrennten Balken muesste
   einer absolut positioniert werden und braeuchte dafuer einen
   Bezugsrahmen am summary, was dessen Flex-Layout stoert. Im offenen
   Zustand schrumpft der senkrechte Balken auf Hoehe 0 und verschwindet,
   der waagerechte bleibt als Minus stehen. */
.v2-faq__summary::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: calc(0.55em - 7px);
  background:
    linear-gradient(var(--v2-core), var(--v2-core)) center / 14px 2px no-repeat,
    linear-gradient(var(--v2-core), var(--v2-core)) center / 2px 14px no-repeat;
  transition: background-size 0.25s ease;
}
.v2-faq__item[open] .v2-faq__summary::after {
  background-size: 14px 2px, 2px 0;
}

.v2-faq__item p {
  margin: 0.7rem 0 0;
  /* Frostglas hinter dem Text: das Raster der Buehne lief genau auf der
     linken Textkante und kreuzte jede Zeile - das stoert den Lesefluss. */
  padding: 0.9rem 1.2rem;
  border-radius: 10px;
  background: rgba(4, 16, 26, 0.72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: rgba(234, 246, 251, 0.78);
  line-height: 1.7;
  max-width: 68ch;
}

/* Aktualisierungsdatum: eines der Signale, an denen Antwortmaschinen
   ablesen, ob eine Quelle noch gilt. Bewusst zurueckhaltend gesetzt -
   es ist eine Fussnote, keine Aussage. */
.v2-final__updated {
  position: relative;
  z-index: 1;
  margin: 0 auto clamp(1.5rem, 4vh, 2.5rem);
  text-align: center;
  font-size: 0.8rem;
  color: rgba(234, 246, 251, 0.42);
}

/* ---- Aufruf ------------------------------------------------------- */
.v2-final__cta {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 3vw, 2rem);
  max-width: 56rem;
  margin: 0 auto;
  padding: clamp(1.6rem, 4vh, 2.4rem) clamp(1.6rem, 4vw, 2.4rem);
  border-radius: var(--radius);
  border: 1px solid rgba(140, 226, 240, 0.18);
  background: rgba(10, 39, 53, 0.4);
  backdrop-filter: blur(6px);
}
.v2-final__cta h2 {
  margin: 0 0 0.4rem;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  color: var(--v2-text);
}
.v2-final__cta p {
  margin: 0;
  color: var(--v2-text-dim);
  max-width: 42ch;
}

@media (max-width: 640px) {
  .v2-final__cta { flex-direction: column; align-items: flex-start; }
}

/* =============================================================================
   9) Bewegungen im Ruhezustand
   Alle zeitgesteuert - sie laufen unabhaengig vom Scrollen und geben der
   Buehne Leben, wenn niemand scrollt.
   ============================================================================= */
@keyframes v2-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}
@keyframes v2-pulse {
  0%, 100% { opacity: 0.82; }
  50%      { opacity: 1; }
}
@keyframes v2-spin {
  from { rotate: 0deg; }
  to   { rotate: 360deg; }
}
@keyframes v2-rail {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(320%); }
}
@keyframes v2-drift {
  0%, 100% { background-position: 0% 0%, 0% 0%, 0% 0%; }
  50%      { background-position: 3% 2%, -4% -2%, 5% 3%; }
}

/* =============================================================================
   10) Schmale Bildschirme
   Die Choreografie bleibt, wird aber ruhiger: nebeneinander stehende
   Spalten stapeln sich, das HUD rueckt an den unteren Rand, und die
   Scrollstrecken werden kuerzer - auf dem Telefon ist eine
   Bildschirmhoehe pro Schritt bereits eine lange Wischbewegung.
   ============================================================================= */
@media (max-width: 900px) {
  /* Der Hero gibt auf schmalen Bildschirmen die Klebe-Buehne auf: Bild
     UND vollstaendiger Text passen dort nicht gemeinsam in eine
     Bildschirmhoehe - gepinnt lief der Text unten aus dem Bild, und die
     Knoepfe waren gar nicht erreichbar. Als normal fliessender Block
     steht alles lesbar untereinander; der Blickwechsel laeuft weiterhin
     mit, waehrend die Sektion vorbeizieht. Nur das Ausblenden des Textes
     entfaellt - es gehoert zum Uebergang einer gepinnten Buehne. */
  .v2-hero { min-height: 0; }
  /* Die VORSTELLUNG (Portraet, Titel, Text, Knoepfe) fuellt genau eine
     Bildschirmhoehe - "Was wir tun" liegt als weiterer Block in
     derselben Buehne und folgt darunter im Fluss, wird also erscrollt.
     Deshalb kein max-height auf der Buehne: das schnitte ihn ab. Die
     Hoehe wird stattdessen an den Teilen selbst gespart. */
  .v2-hero__stage {
    position: relative;
    height: auto;
    min-height: 0;
    grid-template-columns: 1fr;
    align-content: start;
    gap: var(--space-sm);
    text-align: left;
    padding-bottom: var(--space-md);
  }
  /* Der Vorstellungsteil - alles ausser "Was wir tun" - passt in einen
     Bildschirm. Vorher war der Hero mit Bild, zwei langen Absaetzen und
     zwei Knoepfen rund 1.8 Viewports hoch: man musste scrollen, bevor
     ueberhaupt etwas zu sehen war. */
  .v2-hero__body { display: flex; flex-direction: column; gap: var(--space-sm); }
  /* Der zweite Absatz wiederholt, was die Leistungssektionen ohnehin
     ausfuehren - auf dem kleinen Schirm ist er der Posten, der den
     Bildschirm sprengt. */
  /* Kleiner als zuvor (58%/260px) - das Portraet war der groesste
     Einzelposten in der Hoehe. */
  .v2-hero__figure { width: min(34%, 148px); }
  /* Der Kopfabstand richtet sich nach der Leiste, braucht darueber
     hinaus aber kein zusaetzliches Polster. */
  .v2-hero__stage { padding-top: calc(var(--header-h) + var(--space-sm)); }
  /* Der Desktop-Abstand ueber den Knoepfen (--space-lg) ist hier zu
     grosszuegig - er war der letzte Posten, der die Vorstellung ueber
     den Bildschirmrand schob. */
  .v2-hero__actions { margin-top: var(--space-sm); }
  .v2-hero__body { opacity: 1; transform: none; filter: none; }
  .v2-hero__turn-copy { opacity: 1; transform: none; filter: none; max-width: none; }
  /* Auf Mobile bleibt der Vorstellungstext dauerhaft sichtbar (siehe
     .v2-hero__body oben) statt bei --turn=1 zu verblassen - eine absolut
     positionierte Turn-Ebene ueber allem wuerde sich dann permanent mit
     ihm ueberlagern. "Was wir tun" folgt hier stattdessen als normaler,
     naechster Block unter dem Vorstellungstext im Textfluss. */
  .v2-hero__turn {
    position: relative;
    inset: auto;
    /* Eine Spalte statt des Desktop-Rasters (grid-template-columns von
       .v2-hero__turn oben) - sonst schiebt .v2-hero__turn-copy per
       grid-column:2 weiterhin in eine rechte, hier gar nicht mehr
       existierende Spalte und der Text landet rechtsbuendig statt im
       normalen, linksbuendigen Textfluss. */
    grid-template-columns: 1fr;
    /* Knapper als zuvor (10vh/6vh): der Block folgt direkt unter der
       Vorstellung, ein grosses Polster zog den Hero unnoetig in die
       Laenge. */
    padding: var(--space-lg) 0 var(--space-md);
    pointer-events: auto;
  }
  .v2-hero__turn-copy { grid-column: 1; }
  .v2-hero__turn .v2-turn__word { opacity: 1 !important; transform: none !important; }
  .v2-hero__turn .v2-turn__lead { opacity: 1 !important; transform: none !important; }

  /* Kuerzere Scrollstrecken als auf dem Desktop: dort traegt die Hoehe
     eine Choreografie, auf dem Telefon zieht sie den Abschnitt nur in
     die Laenge. */
  .v2-orbit { min-height: 300svh; }
  .v2-orbit__copy {
    position: absolute;
    top: calc(var(--header-h) + 3.5rem);
    translate: 0 0;
    max-width: min(38ch, 88vw);
  }
  .v2-orbit__lead,
  .lst-orbit__lead { max-width: none; }
  .v2-orbit__system {
    left: 50%;
    top: 62%;
    /* 84vw statt 94vw: die Beschriftungen der aeusseren Trabanten
       brauchen rechts und links noch Platz, sonst laufen sie ueber den
       Bildrand hinaus. */
    width: min(74vh, 84vw);
  }
  .v2-orbit__drag-hint { display: none; }

  .v2-track { min-height: 400svh; }
  .v2-track__caption {
    left: clamp(1rem, 5vw, 3rem);
    right: clamp(1rem, 5vw, 3rem);
    bottom: auto;
    top: calc(var(--header-h) + 3rem);
    max-width: none;
  }
  /* Rechts unten sitzen auf Mobilgeraeten der Zurueck-nach-oben-Knopf
     und der Schalter der Kontaktleiste - das HUD zieht deshalb nach
     links und wird kleiner. */
  .v2-hud {
    right: auto;
    left: 0.8rem;
    bottom: 0.9rem;
    gap: 0.5rem;
  }
  .v2-hud__panel { padding: 0.5rem 0.55rem 0.4rem; }
  .v2-hud__caption { font-size: 0.5rem; letter-spacing: 0.12em; }
  .v2-hud__panel--map svg { width: 62px; }
  .v2-hud__panel--chart svg { width: 112px; }

  .v2-steps { grid-template-columns: 1fr; }
  .v2-step:not(:last-child)::after { display: none; }
}

/* =============================================================================
   11) Ohne Bewegungswunsch
   Kein Scrubbing, keine Dauerschleifen: jede Sektion zeigt sofort ihren
   Endzustand, die Zusatzhoehe faellt weg. Das JS setzt dafuer
   data-v2-static am body (siehe orbit.js) - die Werte hier sind der
   Endzustand, den es sonst errechnen wuerde.
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
  .v2-hero__figure,
  .v2-orbit__core,
  .v2-orbit__flame,
  .v2-planet__body,
  .v2-hero__rings span,
  .v2-hero__hint-rail::after {
    animation: none !important;
  }
}

[data-v2-static] .v2-hero,
[data-v2-static] .v2-orbit,
[data-v2-static] .v2-track,
[data-v2-static] .v2-outro {
  min-height: 0;
}
[data-v2-static] .v2-stage {
  position: relative;
  height: auto;
  min-height: 100svh;
  padding-bottom: clamp(2rem, 6vh, 4rem);
}
/* --turn steht im statischen Fall fest auf 1 (siehe initHero): Bild und
   Vorstellungstext sind dann bereits ausgeblendet, "Was wir tun" folgt
   deshalb einfach als naechster Block im normalen Textfluss, statt
   absolut ueber allem zu liegen - eine absolute Ebene bei height:auto
   haette sonst keine verlaessliche Flaeche mehr, ueber der sie liegt. */
[data-v2-static] .v2-hero__turn {
  position: relative;
  inset: auto;
  padding: clamp(2rem, 8vh, 4rem) clamp(1rem, 4vw, 3rem) 0;
}

/* Im statischen Fall stehen alle Planeten nebeneinander im Bild statt
   auf einer Bahn zu laufen - das JS verteilt sie auf drei Spalten und
   zwei Reihen. Beide Buehnen brauchen dafuer etwas mehr Hoehe als einen
   Bildschirm, sonst schneiden sich Text und Koerper. */
[data-v2-static] .v2-track__stage { min-height: 128svh; }
[data-v2-static] .v2-orbit__stage { min-height: 132svh; }
/* Textspalte nach oben, System darunter: nebeneinander waere im
   statischen Fall beides zu eng, weil das System nicht mehr
   kleiner einfaehrt. */
[data-v2-static] .v2-orbit__copy {
  top: calc(var(--header-h) + 3rem);
  translate: 0 0;
  max-width: min(52ch, 82vw);
}
[data-v2-static] .v2-orbit__system {
  top: 62%;
  width: min(62vh, 62vw);
}
[data-v2-static] .v2-track__caption { bottom: auto; top: calc(var(--header-h) + 3rem); }

/* =============================================================================
   12) Unterseiten im Weltraum-Look (marvin-de-vries.html, kontakt.html)
   Diese beiden Seiten haben KEINE sticky-Choreografie - normale, scrollende
   .section-Bloecke wie ueberall sonst im Projekt. Sie tragen trotzdem
   body.v2 (siehe HTML) und laden diese Datei, um dieselbe Buehne (Grund,
   Sternenfeld, Glow, Typo, Leistungsfarben) wie die Startseite zu bekommen.

   Weil orbit.css AUSSCHLIESSLICH von index.html, marvin-de-vries.html und
   kontakt.html eingebunden wird, und index.html selbst keine
   .section--surface/--soft/--dark, .service-card, .contact-card, .field,
   .booking-type, .booking__cal*, .doc oder .cta-band im Markup hat (siehe
   Grep-Pruefung vor dieser Aenderung), treffen alle folgenden
   body.v2-Regeln ausschliesslich die beiden Unterseiten. index.html bleibt
   unberuehrt.

   Bauprinzip: KEIN eigener Hintergrund pro Sektion. Der ganze body traegt
   einen einzigen durchgehenden Verlauf (analog zu .v2-space auf der
   Startseite) - Sektionsgrenzen faerben nicht mehr um, sie bleiben nur
   Abstandshalter. Karten heben sich per eigener Flaeche (--v2-space-hi)
   vom gemeinsamen Grund ab. */

/* ---- 12.1 Seitengrund + Sternenfeld ---------------------------------- */
/* Derselbe lange Verlauf wie .v2-space auf der Startseite, hier aber auf
   dem BODY selbst statt auf einem Choreografie-Wrapper: es gibt keine
   Sektion, die ihn tragen koennte, und keinen sticky-Hintergrund, der
   mitlaufen muesste. background-attachment: fixed haelt den Verlauf beim
   Scrollen stehen, statt ihn (bei langen Seiten wie kontakt.html mit
   ausgeklapptem Formular) mehrfach zu wiederholen oder abzuschneiden. */
body.v2.v2-page {
  background:
    linear-gradient(180deg,
      var(--v2-void) 0%,
      var(--v2-deep) 18%,
      var(--v2-space) 42%,
      #06202a 68%,
      var(--v2-deep) 100%)
    fixed;
  background-color: var(--v2-void);
}

/* Sternenfeld: eigene, fixierte Ebene hinter allem Inhalt. Bewusst KEIN
   Parallax (kein JS auf diesen Seiten) - ein ruhiges, stehendes Muster
   reicht fuer die Wiedererkennung als "derselbe Weltraum". position:fixed
   statt sticky: es gibt keinen hoehenbegrenzten Elternrahmen wie
   .v2-space__bg auf der Startseite, ueber den sticky greifen koennte. */
body.v2.v2-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, rgba(255,255,255,.7), transparent),
    radial-gradient(1.2px 1.2px at 78% 14%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.8px 1.8px at 44% 68%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.1px 1.1px at 88% 74%, rgba(255,255,255,.4), transparent),
    radial-gradient(1.4px 1.4px at 28% 86%, rgba(255,255,255,.45), transparent),
    radial-gradient(1px 1px at 62% 40%, rgba(255,255,255,.35), transparent),
    radial-gradient(1.6px 1.6px at 6% 58%, rgba(255,255,255,.45), transparent),
    radial-gradient(1.2px 1.2px at 94% 44%, rgba(255,255,255,.35), transparent),
    radial-gradient(1.3px 1.3px at 35% 12%, rgba(255,255,255,.4), transparent),
    radial-gradient(1.5px 1.5px at 55% 92%, rgba(255,255,255,.5), transparent);
  background-repeat: repeat;
  background-size: 640px 480px;
  opacity: 0.7;
}
/* Weicher Glanz oben, angelehnt an den Kernschein im Hero der Startseite -
   ohne ihn wirkt der Seitenanfang leerer als der Rest der Buehne. */
body.v2.v2-page::after {
  content: "";
  position: fixed;
  top: 0;
  left: 50%;
  translate: -50% 0;
  z-index: 0;
  width: min(1400px, 160vw);
  height: 70vh;
  pointer-events: none;
  background: radial-gradient(60% 60% at 50% 0%, rgba(47, 111, 237, 0.16) 0%, transparent 70%);
}
/* Inhalt liegt ueber Sternenfeld und Glanz. main traegt den Stapelkontext,
   damit dessen Kinder (die Sektionen) automatisch darueber liegen, ohne
   dass jede einzeln z-index bekommen muss. */
body.v2.v2-page main {
  position: relative;
  z-index: 1;
}
/* Der Footer bleibt wie auf der Startseite ein eigener Stapelplatz -
   data-surface="dark" bringt ohnehin schon einen eigenen Grund mit
   (siehe partials/footer.html), er soll nicht vom fixierten Sternenfeld
   ueberdeckt werden koennen. */
body.v2.v2-page .footer {
  position: relative;
  z-index: 1;
}

/* ---- 12.2 Sektionen: kein eigener Grund mehr -------------------------
   .section--surface/--soft/--dark liefern auf den hellen Seiten des
   Projekts unterschiedliche Flaechentoene. Auf den Weltraum-Unterseiten
   uebernimmt das der gemeinsame body-Verlauf - jede einzelne Sektion
   bliebe sonst ein hartkantiges, deckendes Rechteck in einer eigenen
   Farbe und zerschnitte die durchgehende Buehne wieder in Balken. */
body.v2.v2-page .section--surface,
body.v2.v2-page .section--soft,
body.v2.v2-page .section--dark {
  background: none;
  color: var(--v2-text);
}
body.v2.v2-page .section--dark h1,
body.v2.v2-page .section--dark h2,
body.v2.v2-page .section--dark h3 {
  color: var(--v2-text);
}
/* .section__lead ist projektweit auf --color-text-muted gesetzt (dunkles
   Grau) - auf dunklem Grund faellt der Text sonst fast weg. */
body.v2.v2-page .section__lead {
  color: var(--v2-text-dim);
}
/* mdv-lead-onDark war fuer den hellen --color-bg-soft-Ton der alten
   .section--dark gedacht (siehe marvin-de-vries.html); der Text bekommt
   auf der neuen, dunkleren Buehne denselben gedaempften Ton wie
   .section__lead, damit er sich nicht vom Rest abhebt. */
body.v2.v2-page .mdv-lead-onDark {
  color: var(--v2-text-dim);
}
/* Allgemeiner Fliesstext (Ablauf-Absaetze, Erfahrungstext): projektweit
   .service-card__text auf --color-text-muted - dasselbe Kontrastproblem
   wie beim Lead. */
body.v2.v2-page .service-card__text,
body.v2.v2-page .mdv-text {
  color: var(--v2-text-dim);
}
body.v2.v2-page .mdv-claim {
  color: var(--v2-text);
}

/* h1-h3 kommen projektweit dunkel (--color-ink) - hier hell, dieselbe
   Begruendung wie bei den Choreografie-Ueberschriften in Block 2. */
body.v2.v2-page h1,
body.v2.v2-page h2,
body.v2.v2-page h3,
body.v2.v2-page h4 {
  color: var(--v2-text);
}

/* .eyebrow ist projektweit auf --color-primary (kraeftiges Blau) gesetzt -
   auf dem tiefen Weltraum-Grund zu dunkel und ohne den fuer Rubriken
   sonst ueblichen hellen Kontrast. Derselbe Kernton wie die
   .v2-hero__eyebrow der Startseite. */
body.v2.v2-page .eyebrow {
  color: var(--v2-core);
}

/* ---- 12.3 Karten: service-card, contact-card ------------------------- */
/* Eigene, etwas hellere Flaeche als der Seitengrund (--v2-space-hi statt
   --v2-void/--v2-deep) mit heller Linie statt hartem hellgrauen Rand -
   dieselbe Bauform wie .v2-step im Ausklang der Startseite (Verlauf +
   duenne helle Kontur), nur ohne die Scroll-Einblendung. */
body.v2.v2-page .service-card,
body.v2.v2-page .contact-card,
body.v2.v2-page .form,
body.v2.v2-page .booking__cal,
body.v2.v2-page .booking-type {
  background: linear-gradient(160deg, rgba(18, 66, 86, 0.55) 0%, rgba(7, 28, 40, 0.75) 100%);
  border-color: var(--v2-line);
}
body.v2.v2-page .service-card:hover,
body.v2.v2-page .service-card:focus-within {
  border-color: var(--v2-core);
  box-shadow: 0 12px 32px rgba(3, 10, 20, 0.5);
}
body.v2.v2-page .service-card__title {
  color: var(--v2-text);
}

/* Icons: auf der hellen Seite ein blasses Primaerblau-Feld
   (--color-primary-soft) mit blauem Symbol. Auf dunklem Grund braucht das
   Feld selbst mehr Praesenz (leicht getoent statt fast weiss) und das
   Symbol den Kernton, damit beides zusammen wie ein leuchtender Marker
   wirkt statt wie ein grauer Fleck. */
body.v2.v2-page .service-card__icon,
body.v2.v2-page .contact-info__icon {
  background: rgba(127, 227, 255, 0.14);
  color: var(--v2-core);
}

body.v2.v2-page .contact-info__item a,
body.v2.v2-page .contact-info__item p {
  color: var(--v2-text-dim);
}

body.v2.v2-page .contact-info__item a:hover,
body.v2.v2-page .contact-info__item a:focus-visible {
  color: var(--v2-core);
}
body.v2.v2-page .contact-info__item h3 {
  color: var(--v2-text);
}

/* ---- 12.4 Formularfelder ----------------------------------------------
   "komplett dunkel durchgefaerbt": die Eingabefelder bekommen einen
   eigenen, DUNKLEREN Grund als die Karte, in der sie liegen (--v2-void
   statt --v2-space-hi) - so lesen sie sich weiterhin als vertiefte
   Eingabeflaeche und nicht als helle Aussparung. Text und Platzhalter in
   hellem Ton, Rand deutlich sichtbar, Fokus im Kernton. */
body.v2.v2-page .field label {
  color: var(--v2-text);
}
body.v2.v2-page .field input,
body.v2.v2-page .field textarea {
  background: var(--v2-void);
  border-color: rgba(140, 226, 240, 0.32);
  color: var(--v2-text);
}
/* Eingegebener Text: 17.4:1 gegen --v2-void (siehe Kontrastmessung).
   Platzhalter bewusst gedaempft, aber nicht so schwach wie im
   Browser-Standard - 5.7:1 gegen --v2-void, klar ueber den geforderten
   4.5:1 fuer Fliesstext. */
body.v2.v2-page .field input::placeholder,
body.v2.v2-page .field textarea::placeholder {
  color: rgba(234, 246, 251, 0.55);
  opacity: 1;
}
body.v2.v2-page .field input:focus-visible,
body.v2.v2-page .field textarea:focus-visible {
  border-color: var(--v2-core);
  outline: 2px solid rgba(127, 227, 255, 0.35);
  outline-offset: 1px;
}
body.v2.v2-page .field--checkbox label {
  color: var(--v2-text-dim);
}
body.v2.v2-page .field--checkbox input {
  accent-color: var(--v2-core);
}
/* Der Datenschutz-Link in der Checkbox-Beschriftung ist inline auf
   --color-primary gesetzt (siehe kontakt.html) - auf dunklem Grund zu
   dunkel. */
body.v2.v2-page .field--checkbox a {
  color: var(--v2-core);
}
body.v2.v2-page .field__error {
  color: #ff9b8a;
}
body.v2.v2-page .form__status[data-state="success"] {
  color: #6fe3a6;
}
body.v2.v2-page .form__status[data-state="error"] {
  color: #ff9b8a;
}

/* ---- 12.5 Buchungs-UI: Terminart, Kalender, Zeit-Slots --------------- */
body.v2.v2-page .booking__legend {
  color: var(--v2-text);
}
body.v2.v2-page .booking__progress {
  color: var(--v2-text-dim);
}
body.v2.v2-page .booking__progress li {
  border-top-color: var(--v2-line);
}
body.v2.v2-page .booking__progress li.is-done,
body.v2.v2-page .booking__progress li.is-current {
  border-top-color: var(--v2-core);
}
body.v2.v2-page .booking__progress li.is-current {
  color: var(--v2-core);
}
body.v2.v2-page .booking__progress li.is-done {
  color: var(--v2-text);
}



body.v2.v2-page .booking-type:hover,
body.v2.v2-page .booking-type:focus-visible {
  border-color: var(--v2-core);
}
/* Ausgewaehlter Zustand: auf der hellen Seite ein blasses
   --color-primary-soft. Das waere auf dunklem Grund ein heller Fleck -
   stattdessen ein getoenter, aber weiterhin dunkler Grund (Kernfarbe in
   den Kartenverlauf gemischt) plus ein deutlich sichtbarer Ring in
   Kernfarbe. Gemessen: Kartentext (--v2-text) auf dieser Flaeche 8.15:1. */
body.v2.v2-page .booking-type:has(input:checked) {
  border-color: var(--v2-core);
  background: linear-gradient(160deg, rgba(127, 227, 255, 0.22) 0%, rgba(7, 28, 40, 0.85) 100%);
  box-shadow: 0 0 0 1px var(--v2-core);
}
body.v2.v2-page .booking-type:has(input:focus-visible) {
  outline-color: var(--v2-core);
}
body.v2.v2-page .booking-type__name {
  color: var(--v2-text);
}
body.v2.v2-page .booking-type__meta {
  color: var(--v2-core);
}
body.v2.v2-page .booking-type__desc {
  color: var(--v2-text-dim);
}
/* Der weisse Doppelring um die Farbpunkte war fuer helle Karten gedacht
   (er trennt den Punkt vom Kartenweiss) - auf dunklem Grund wird daraus
   ein unmotivierter heller Halo. Ring in Kartenfarbe statt Weiss. */
body.v2.v2-page .booking-type__dot {
  box-shadow: 0 0 0 3px rgba(7, 28, 40, 0.9), 0 0 0 4px rgba(140, 226, 240, 0.25);
}

body.v2.v2-page .booking__cal-head {
  color: var(--v2-text);
}
body.v2.v2-page .booking__cal-nav {
  color: var(--v2-core);
}

body.v2.v2-page .booking__cal-nav:hover,
body.v2.v2-page .booking__cal-nav:focus-visible {
  background: rgba(127, 227, 255, 0.14);
}
body.v2.v2-page .booking__cal-dow {
  color: var(--v2-text-dim);
}
body.v2.v2-page .booking__cal-day {
  color: var(--v2-text);
}
/* :not(.is-selected) ist hier notwendig, nicht nur kosmetisch: ohne den
   Zusatz gewinnt diese Hover-Regel gegen .is-selected weiter unten (3
   Selektoren gegen 2, dieselbe Rangfolge wie im Original-style.css) -
   ein Tag, den man gerade angeklickt hat UND auf dem die Maus noch
   steht (der Normalfall direkt nach einem Klick), zeigt dann die blasse
   Hover-Tönung statt den Kernton. Auf der hellen Seite fällt das kaum
   auf; auf dieser dunklen Buehne faellt die blasse Hover-Flaeche mit dem
   ebenfalls hellen Hover-Text nahezu zusammen (1:1 statt 13:1). */

body.v2.v2-page .booking__cal-day:not(:disabled):not(.is-selected):hover,
body.v2.v2-page .booking__cal-day:not(:disabled):not(.is-selected):focus-visible {
  background: rgba(127, 227, 255, 0.16);
  color: var(--v2-core);
}
/* Nicht buchbare Tage bleiben als Datum lesbar (3.3:1, ausreichend fuer
   einen erkennbar deaktivierten, nicht interaktiven Text), aber klar
   zurueckgenommen gegenueber wählbaren Tagen. */
body.v2.v2-page .booking__cal-day:disabled {
  color: rgba(234, 246, 251, 0.45);
  opacity: 1;
}
/* Ausgewaehlter Tag: voller Kernton statt Primaerblau-Flaeche, dunkler
   Text darauf - 13.1:1, der klarste "aktiv"-Zustand im ganzen Kalender. */
body.v2.v2-page .booking__cal-day.is-selected {
  background: var(--v2-core);
  color: var(--v2-void);
}

body.v2.v2-page .booking__slots-title {
  color: var(--v2-text);
}
body.v2.v2-page .booking__hint {
  color: var(--v2-text-dim);
}
body.v2.v2-page .booking__slot {
  background: var(--v2-void);
  border-color: rgba(140, 226, 240, 0.28);
  color: var(--v2-text);
}

body.v2.v2-page .booking__slot:hover,
body.v2.v2-page .booking__slot:focus-visible {
  border-color: var(--v2-core);
  color: var(--v2-core);
}
body.v2.v2-page .booking__slot.is-selected {
  background: var(--v2-core);
  border-color: var(--v2-core);
  color: var(--v2-void);
}
body.v2.v2-page .booking__summary {
  background: rgba(127, 227, 255, 0.12);
  border-left-color: var(--v2-core);
  color: var(--v2-text);
}

/* ---- 12.6 Beleg (.doc) -------------------------------------------------
   Die Dokumentoptik (Kopf/Fuss/Linien/Stempel) bleibt erhalten, nur in
   dunklen Toenen: dieselbe Kartenflaeche wie die uebrigen Karten dieser
   Seite, damit der Beleg nicht wie ein Fremdkoerper (heller Bogen) auf
   der dunklen Buehne liegt. */
body.v2.v2-page .doc {
  background: linear-gradient(160deg, rgba(18, 66, 86, 0.6) 0%, rgba(7, 28, 40, 0.85) 100%);
  border-color: var(--v2-line);
  box-shadow: 0 18px 48px rgba(3, 10, 20, 0.55);
}
body.v2.v2-page .doc__head {
  border-bottom-color: rgba(140, 226, 240, 0.35);
}
body.v2.v2-page .doc__issuer {
  color: var(--v2-text-dim);
}
body.v2.v2-page .doc__title {
  color: var(--v2-text);
}
/* Stempel "Angefragt": im Original Akzentgelb auf hellem Grund. Auf der
   Weltraum-Buehne uebernimmt derselbe Gelbton (--v2-seo) die Rolle - er
   ist die einzige warme Farbe im Beleg und bleibt dadurch der auffaellige
   Akzent, den ein Stempel braucht (7.77:1 gegen die Kartenflaeche). */
body.v2.v2-page .doc__stamp {
  border-color: var(--v2-seo);
  color: var(--v2-seo);
}
body.v2.v2-page .doc__row {
  border-bottom-color: rgba(140, 226, 240, 0.18);
}
body.v2.v2-page .doc__row dt {
  color: var(--v2-text-dim);
}
body.v2.v2-page .doc__row dd {
  color: var(--v2-text);
}
/* .doc__note hatte einen eigenen, etwas helleren Innengrund
   (--color-bg) gegen die Kartenflaeche (--color-surface) - dasselbe
   Prinzip hier mit den dunklen Toenen: minimal dunkler als die Karte,
   damit der Hinweistext sich weiterhin als eigener Absatz absetzt. */
body.v2.v2-page .doc__note {
  background: rgba(4, 16, 26, 0.4);
  color: var(--v2-text-dim);
}
body.v2.v2-page .doc__foot {
  border-top-color: rgba(140, 226, 240, 0.18);
  color: var(--v2-text-dim);
}

/* ---- 12.7 CTA-Band, Knoepfe -------------------------------------------
   .cta-band ist projektweit auf --color-ink (fast schwarz) gesetzt - auf
   der ohnehin dunklen Buehne braucht sie eine eigene, hellere Flaeche,
   sonst verschwindet sie fast unsichtbar im Hintergrund. Dieselbe
   Kartenoptik wie .service-card/.contact-card. */
body.v2.v2-page .cta-band {
  background: linear-gradient(160deg, rgba(18, 66, 86, 0.55) 0%, rgba(7, 28, 40, 0.8) 100%);
  border: 1px solid var(--v2-line);
}
body.v2.v2-page .cta-band h2 {
  color: var(--v2-text);
}
body.v2.v2-page .cta-band p {
  color: var(--v2-text-dim);
}

/* .btn--secondary.cta-orbit fuellt sich auf hellen Seiten mit
   --color-surface (Weiss) - auf der dunklen Buehne waere das ein heller
   Fleck mitten im Formular (Zurueck-Knoepfe, Beleg-Aktionen). Dieselbe
   Loesung wie das projekteigene .btn--secondary.btn--on-dark.cta-orbit
   fuer Hero/Carbon-Sektionen, hier ueber body.v2.v2-page erzwungen, weil
   die Buchungs-Knoepfe dieses Modifikators nicht tragen. */
body.v2.v2-page .btn--secondary.cta-orbit {
  --orbit-fill: var(--v2-space-hi);
  --orbit-fill-hover: var(--v2-core);
  --orbit-light: 234, 246, 251;
  color: var(--v2-text);
  border-color: rgba(140, 226, 240, 0.5);
}

body.v2.v2-page .btn--secondary.cta-orbit:hover,
body.v2.v2-page .btn--secondary.cta-orbit:focus-visible {
  border-color: var(--v2-core);
}
body.v2.v2-page .btn--secondary.cta-orbit .cta-orbit__label {
  color: var(--v2-text);
}
body.v2.v2-page .btn--secondary.cta-orbit:hover .cta-orbit__label,
body.v2.v2-page .btn--secondary.cta-orbit:focus-visible .cta-orbit__label {
  color: var(--v2-void);
}

/* ---- 12.8 Karte (OpenStreetMap-Einbindung) + Consent ------------------ */
body.v2.v2-page .contact__map {
  border-color: var(--v2-line);
  box-shadow: 0 18px 44px rgba(3, 10, 20, 0.5);
}
/* .map-consent liegt auch in der Kontakt-Leisten-Adresspopover auf JEDER
   Seite (auch index.html) - dort ist die Flaeche bereits Teil einer
   eigenen dunklen Glasscheibe (.contact-bar__map-popover-inner) und
   braucht keinen weiteren Grund. Dieser Block trifft deshalb nur die
   grosse Karten-Consent-Flaeche auf der Kontaktseite selbst, nicht die
   Popover-Variante. */
body.v2.v2-page #map-consent.map-consent {
  background: var(--v2-space-hi);
}
body.v2.v2-page #map-consent .map-consent__text {
  color: var(--v2-text-dim);
}
body.v2.v2-page #map-consent .map-consent__link {
  color: var(--v2-core);
}
body.v2.v2-page .contact__map-zoom {
  background: rgba(4, 16, 26, 0.82);
  border-color: var(--v2-line);
  color: var(--v2-text);
}

body.v2.v2-page .contact__map-zoom:hover,
body.v2.v2-page .contact__map-zoom:focus-visible {
  background: rgba(4, 16, 26, 0.95);
}

/* Karten-Lightbox (vergroesserte Ansicht + Routenplanung): dieselbe
   Kartenoptik wie die uebrigen Flaechen dieser Seite. */
body.v2.v2-page .map-lightbox__panel {
  background: linear-gradient(160deg, rgba(18, 66, 86, 0.92) 0%, rgba(7, 28, 40, 0.96) 100%);
  border: 1px solid var(--v2-line);
  color: var(--v2-text);
}
body.v2.v2-page .map-lightbox__head {
  border-bottom-color: var(--v2-line);
}
body.v2.v2-page .map-lightbox__title {
  color: var(--v2-text);
}
body.v2.v2-page .map-lightbox__address,
body.v2.v2-page .map-lightbox__hint {
  color: var(--v2-text-dim);
}
body.v2.v2-page .map-lightbox__close {
  color: var(--v2-text-dim);
}

body.v2.v2-page .map-lightbox__close:hover,
body.v2.v2-page .map-lightbox__close:focus-visible {
  background: rgba(127, 227, 255, 0.14);
  color: var(--v2-text);
}
body.v2.v2-page .map-lightbox__route {
  border-color: rgba(140, 226, 240, 0.4);
  color: var(--v2-core);
}

body.v2.v2-page .map-lightbox__route:hover,
body.v2.v2-page .map-lightbox__route:focus-visible {
  background: rgba(127, 227, 255, 0.14);
  border-color: var(--v2-core);
}
body.v2.v2-page .map-lightbox__foot {
  border-top-color: var(--v2-line);
}
body.v2.v2-page .map-lightbox__map {
  background: var(--v2-void);
}

/* ---- 12.9 Portraet-Bildunterlage (marvin-de-vries.html) ---------------
   .mdv-portrait traegt kein eigenes Kontrastproblem (ein Foto), steht
   aber ohne eigene Ebene direkt auf der neuen dunklen Buehne. Ein
   dezenter Kernschein dahinter verankert es optisch in derselben
   Weltraum-Optik wie das Hero-Portraet der Startseite (.v2-hero__glow),
   statt lose auf der Flaeche zu stehen. */
body.v2.v2-page .mdv-intro-grid {
  position: relative;
}
body.v2.v2-page .mdv-portrait {
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 20px 46px rgba(2, 8, 16, 0.6));
}

/* ---- 12.10 Nav-Abstand ohne eigenen Hero ------------------------------
   style.css raeumt den Platz fuer die schwebende Kopfleiste normalerweise
   per body:not(.has-dark-hero) > main > :first-child (padding-top) frei
   und schaltet ihn bei .has-dark-hero ab, weil die Startseite ihren
   eigenen .v2-hero-Abstand mitbringt (.v2-hero__stage padding-top).
   marvin-de-vries.html und kontakt.html haben keinen .v2-hero - sie
   behalten also bewusst .has-dark-hero NICHT auf dem body, damit die
   allgemeine Regel weiterhin greift und die erste Sektion nicht unter der
   Kopfleiste verschwindet. Diese Regel braucht daher keinen Eingriff. */

/* ---- 12.11 Schmale Bildschirme ---------------------------------------- */
@media (max-width: 640px) {
  body.v2.v2-page .cta-band {
    align-items: flex-start;
  }
}

/* =============================================================================
   13) referenzen.html im Weltraum-Look
   Die Seite hatte bisher einen EIGENEN dunklen Look (.section--carbon:
   #0c1119 plus ein Diagonal-Karo-Muster, siehe style.css Block 6) statt
   der blaugruenen v2-Buehne der uebrigen Unterseiten. Body traegt jetzt
   ebenfalls v2.v2-page und bekommt damit denselben Seitenverlauf und das
   Sternenfeld aus Block 12.1 - .section--carbon selbst wird hier
   UEBERSCHRIEBEN (nicht ergaenzt), sonst laege das Carbon-Karo weiterhin
   ueber dem Verlauf und beide Muster liefen sichtbar gegeneinander.

   Kein .ref-curtain-scope- oder .ref-card__media-Eingriff: Der Vorhang
   braucht weiterhin eine EIGENE deckende Flaeche (er liegt ueber dem
   Grid, sonst schimmern die Bildkacheln durch den Text), nur ihr Ton
   wechselt von Carbon-Schwarz auf die dunkelste Stufe der v2-Palette.
   Die Kachelbilder (echte Screenshots) bleiben unangetastet - nur Rand,
   Body-Flaeche/-Verlauf hinter dem Text, Tag, Titel und Text wechseln.
   Die Kontaktleiste (data-surface="mixed") ist Teil einer ganz anderen
   Kontrastlogik (siehe Kommentar im HTML) und wird hier nicht beruehrt. */

/* Sektionsgrund: statt des eigenen Carbon-Karos jetzt transparent, damit
   der body.v2.v2-page-Verlauf (Block 12.1) durchscheint - dieselbe
   Umsetzung wie bei .section--surface/--soft/--dark in Block 12.2. */
body.v2.v2-page .section--carbon {
  background: none;
  color: var(--v2-text);
}
body.v2.v2-page .section--carbon h1,
body.v2.v2-page .section--carbon h2,
body.v2.v2-page .section--carbon h3 {
  color: var(--v2-text);
}
/* .eyebrow ist in .section--carbon projektweit auf --color-accent (Gelb)
   gesetzt - bleibt als warmer Farbtupfer auf der dunklen Buehne
   funktional, wechselt hier aber nicht auf den Kernton: Gelb gegen das
   tiefe Blaugruen liest sich weiterhin klar als Rubrik-Akzent (kommt der
   .v2-seo-Leistungsfarbe nahe) und nicht wie ein Fehlton. */

/* ---- 13.1 Titel-Vorhang (.ref-curtain) --------------------------------
   Eigener, deckender Grund noetig (siehe HTML-Kommentar), jetzt in
   --v2-void statt Carbon-Schwarz, mit demselben weichen Verlauf ins
   Transparente, in den darunterliegenden Verlauf hinein statt in die
   vorherige feste Carbon-Flaeche. */
body.v2.v2-page .ref-curtain {
  background: linear-gradient(180deg, var(--v2-void) 0%, var(--v2-void) 75%, rgba(4, 16, 26, 0) 100%);
}

/* ---- 13.2 Referenzkarten (.ref-card) ----------------------------------
   Grundflaeche hinter/um die Bilder: --color-ink (fast Schwarz) wird zur
   dunkelsten v2-Stufe. Bleibt sichtbar, wo ein Bild nicht die ganze
   Kachel deckt (Ladezustand, object-fit-Raender). */
body.v2.v2-page .ref-card {
  background: var(--v2-void);
}
/* Text-Overlay unten auf dem Bild: derselbe Aufbau (Verlauf zu
   transparent, Blur), nur in einem Blauton statt reinem Kohleschwarz -
   greift denselben --v2-void-Ton auf wie die Kartenflaeche selbst, damit
   Bild und Overlay optisch zusammengehoeren. */
body.v2.v2-page .ref-card__body {
  background: linear-gradient(to top, rgba(4, 16, 26, 0.92) 0%, rgba(4, 16, 26, 0.75) 55%, transparent 100%);
}
/* Tag: projektweit --color-accent (Gelb) - bleibt hier bewusst der warme
   Akzent (dieselbe Begruendung wie bei .eyebrow oben), keine Aenderung
   noetig. Titel/Text/Volltext sind projektweit feste Weiss-/Grauwerte
   (#fff, rgba(255,255,255,.75/.62)) UNABHAENGIG vom Carbon-Ton - sie
   passen unveraendert auch zum neuen --v2-void-Grund (gemessen unten). */

/* Rahmen-Leuchten beim Hover: dieselbe Mechanik (Pseudo-Element,
   Kartenfarbe als Rand), der DUNKLE Trennsaum wechselt von reinem
   Schwarz auf denselben Void-Ton wie die neue Kartenflaeche, damit er
   sich nicht als Fremdfarbe gegen den Rest absetzt. */
body.v2.v2-page .ref-card:hover::after,
body.v2.v2-page .ref-card:focus-within::after {
  box-shadow: inset 0 0 0 3px rgba(4, 16, 26, 0.65),
              inset 0 0 22px -6px var(--card-accent);
}

/* ---- 13.3 Einladungs-Kachel "Ihr Projekt" (.ref-card--invite) --------
   Nutzt denselben Textblock/dieselbe CTA wie oben - hier nur die eine
   Stelle, die einen EIGENEN, von der v2-Palette abweichenden Wert
   mitbringt: der CTA-Knopf steht projektweit in --color-accent/--color-ink
   (Gelb/Fast-Schwarz). Auf der Weltraum-Buehne uebernimmt der Kernton
   dieselbe Rolle wie bei den uebrigen primaeren Aktionen dieser Seiten
   (vgl. .v2-hero__eyebrow, .doc__stamp). */
body.v2.v2-page .ref-card__cta {
  background: var(--v2-core);
  color: var(--v2-void);
}
body.v2.v2-page .ref-card--invite:hover .ref-card__cta,
body.v2.v2-page .ref-card--invite:focus-within .ref-card__cta {
  background: color-mix(in srgb, var(--v2-core) 70%, #ffffff);
}

/* =============================================================================
   14) leistungen.html im Weltraum-Look
   Die Seite ist gemischt: ein dunkler Intro-Block ganz oben (.lst--intro,
   frueher inline auf --color-ink/#fff hartcodiert - die Inline-Styles
   sind aus dem HTML entfernt, Farben kommen jetzt von hier bzw. von den
   allgemeinen body.v2.v2-page-Regeln aus Block 12.2 fuer h1/.eyebrow/
   .section__lead), ein Accordion (.svc-acc-item) und eine
   Karten-Slideshow (.svc-card) auf .section--surface, dazu das
   Leistungs-Detail-Modal (.service-modal), das im Footer-Bereich liegt
   und deshalb sonst als heller Fremdkoerper aufploppen wuerde. */

/* ---- 14.1 Intro-Block (.lst--intro) -----------------------------------
   Kein eigener Hintergrund mehr noetig: .lst--intro traegt keine der
   Klassen aus 12.2 (section--surface/--soft/--dark), body.v2.v2-page hat
   aber ohnehin schon einen deckenden Verlauf plus Sternenfeld auf sich
   selbst (Block 12.1) - .lst liegt einfach transparent darueber, exakt
   dieselbe Wirkung wie das vorherige inline background:var(--color-ink),
   nur in der v2-Palette statt reinem Ink-Ton. */
body.v2.v2-page .lst--intro {
  background: none;
  color: var(--v2-text);
}
/* Scroll-Weiter-Knopf: projektweit heller Rand + weisser Pfeil auf
   beliebigem dunklem Grund - passt unveraendert. */

/* ---- 14.2 Accordion (.svc-acc-item) ------------------------------------
   Karten auf derselben Flaeche wie .service-card/.contact-card (siehe
   Block 12.3), damit alle Kartenbausteine der Seite einheitlich wirken. */
body.v2.v2-page .svc-acc-item {
  border-color: var(--v2-line);
  background: linear-gradient(160deg, rgba(18, 66, 86, 0.55) 0%, rgba(7, 28, 40, 0.75) 100%);
}
body.v2.v2-page .svc-acc-item[data-open="true"] {
  border-color: var(--v2-core);
  box-shadow: 0 12px 32px rgba(3, 10, 20, 0.5);
}
/* Frage: projektweit --color-primary (kraeftiges Blau) - auf dunklem
   Grund zu dunkel, derselbe Kernton wie die uebrigen Ueberschriften-
   Akzente dieser Buehne (vgl. .v2-orbit__title em). */
body.v2.v2-page .svc-acc-item__q-text {
  color: var(--v2-core);
}
body.v2.v2-page .svc-acc-item__num {
  color: var(--v2-text-dim);
}
body.v2.v2-page .svc-acc-item__q svg {
  color: var(--v2-core);
}
body.v2.v2-page .svc-acc-item__a-inner p {
  color: var(--v2-text-dim);
}

/* ---- 14.3 Karten-Slideshow (.svc-card) --------------------------------
   Die Karten selbst sind Fotos mit Verlaufs-Overlay (dunkel unten,
   Text weiss) - das funktioniert unveraendert auf jedem Seitenton, das
   Overlay ist bereits dunkel genug fuer den weissen Titel/Teaser
   (projektweit #fff / rgba(255,255,255,.85), unabhaengig vom Seitengrund).
   Nur der Kartengrund HINTER dem Bild (sichtbar waehrend des Ladens)
   sowie Badge/Info-Knopf und die Pfeile daneben wechseln auf die
   v2-Palette, damit kein heller/grauer Fremdkoerper zwischen den Fotos
   und Pfeilen steht. */
body.v2.v2-page .svc-card {
  background: var(--v2-void);
}
body.v2.v2-page .svc-card__badge {
  background: rgba(127, 227, 255, 0.16);
}
body.v2.v2-page .svc-card__info {
  background: rgba(127, 227, 255, 0.16);
}
body.v2.v2-page .svc-card__info:hover,
body.v2.v2-page .svc-card__info:focus-visible {
  background: var(--v2-core);
  color: var(--v2-void);
}

/* Pfeile links/rechts neben dem Track: projektweit helle Kreisflaeche
   (--color-surface) mit dunklem Pfeil - auf der Weltraum-Buehne dieselbe
   Kartenoptik wie die uebrigen Bedienelemente. */
body.v2.v2-page .svc-nav {
  background: var(--v2-space-hi);
  border-color: var(--v2-line);
  color: var(--v2-text);
  box-shadow: 0 8px 20px rgba(3, 10, 20, 0.4);
}

body.v2.v2-page .svc-nav:hover:not(:disabled),
body.v2.v2-page .svc-nav:focus-visible:not(:disabled) {
  background: var(--v2-core);
  border-color: var(--v2-core);
  color: var(--v2-void);
}

/* Scrollbalken unter dem Track (Firefox + WebKit): projektweit helle
   Spur mit blauem Balken - auf dunklem Grund braucht die Spur einen
   dunkleren Ton, sonst stuende ein heller Streifen unter den Karten. */
body.v2.v2-page .svc-track {
  scrollbar-color: var(--v2-core) rgba(140, 226, 240, 0.12);
}
body.v2.v2-page .svc-track::-webkit-scrollbar-track {
  background: rgba(140, 226, 240, 0.12);
}
body.v2.v2-page .svc-track::-webkit-scrollbar-thumb {
  background: var(--v2-core);
}

/* ---- 14.4 Leistungs-Detail-Modal (.service-modal) ---------------------
   Liegt im Footer-Bereich, aber inhaltlich zu dieser Seite gehoerig -
   wird per JS befuellt und geoeffnet, sobald eine Karte angeklickt wird.
   Dieselbe Kartenoptik wie .doc/.cta-band (Block 12.6/12.7), damit das
   Panel nicht als heller Fremdkoerper ueber der dunklen Buehne aufploppt. */
body.v2.v2-page .service-modal__overlay {
  background: rgba(4, 10, 18, 0.72);
}
body.v2.v2-page .service-modal__panel {
  background: linear-gradient(160deg, rgba(18, 66, 86, 0.96) 0%, rgba(7, 28, 40, 0.98) 100%);
  box-shadow: 0 24px 64px rgba(2, 6, 12, 0.6);
}
body.v2.v2-page .service-modal__title {
  color: var(--v2-text);
}
body.v2.v2-page .service-modal__desc {
  color: var(--v2-text-dim);
}
body.v2.v2-page .service-modal__price {
  color: var(--v2-core);
}
body.v2.v2-page .service-modal__close {
  background: rgba(140, 226, 240, 0.12);
  color: var(--v2-text);
}

body.v2.v2-page .service-modal__close:hover,
body.v2.v2-page .service-modal__close:focus-visible {
  background: rgba(140, 226, 240, 0.22);
}
/* .service-modal__image traegt ein per JS gesetztes Foto als
   background-image - der feste --color-primary-soft-Fallback (Original:
   ein blasses Hellblau) waere hier ein heller Fleck, bevor das Bild
   geladen ist. */
body.v2.v2-page .service-modal__image {
  background-color: var(--v2-space-hi);
}

/* =============================================================================
   15) bestellung.html im Weltraum-Look
   Traegt ebenfalls body.v2.v2-page (kein has-dark-hero: .trustbar steht wie
   bei marvin-de-vries.html/kontakt.html normal im Fluss VOR <main>, kein
   dunkler Vollbild-Auftakt unter der Nav - main > :first-child bekommt den
   ueblichen Nav-Abstand ueber die allgemeine style.css-Regel).

   .order__block ist eine eigene Karten-Klasse (nicht .service-card/.form
   aus Block 12.3) und braucht deshalb einen eigenen Kartengrund. Die
   Leistungs- und Budget-Auswahlkarten (.svc-pick/.budget-opt) brauchen
   einen klar abgesetzten "ausgewaehlt"-Zustand, analog zu .booking-type
   in Block 12.5. Die .summe-Leiste ist der wichtigste CTA der Seite und
   bekommt eine eigene, deutlich hellere Kartenflaeche mit Leuchten. */

/* ---- 15.1 Trustbar ------------------------------------------------------
   Projektweit auf --color-ink (fast schwarz) mit hellem Text - auf der
   ohnehin dunklen Buehne verschmilzt das fast mit dem Seitengrund direkt
   unter der Kopfleiste. Eigene, etwas hellere Flaeche (--v2-space-hi)
   grenzt die Leiste sichtbar vom Sternenfeld dahinter ab. */
body.v2.v2-page .trustbar {
  background: var(--v2-space-hi);
  color: var(--v2-text-dim);
  border-bottom: 1px solid var(--v2-line);
}
/* "24 Stunden" / "kostenlos": projektweit --color-accent (bereits derselbe
   Gelbton wie --v2-seo) - hier ausdruecklich auf den v2-Namen gemuenzt,
   damit die Kopplung an die uebrige Leistungsfarben-Palette sichtbar
   bleibt, falls sich die Werte je trennen. Gemessen: 7.77:1 auf --v2-space-hi. */
body.v2.v2-page .trustbar__inner strong {
  color: var(--v2-seo);
}
body.v2.v2-page .trustbar__dot {
  background: rgba(234, 246, 251, 0.3);
}

/* ---- 15.2 Formular-Karten (.order__block) -------------------------------
   Dieselbe Kartenoptik wie .service-card/.svc-acc-item (Block 12.3/14.2):
   Verlauf von --v2-space-hi nach --v2-deep statt der hellen
   --color-surface-Flaeche, helle Kontur statt hartem Rand. */
body.v2.v2-page .order__block {
  background: linear-gradient(160deg, rgba(18, 66, 86, 0.55) 0%, rgba(7, 28, 40, 0.75) 100%);
  border-color: var(--v2-line);
}
/* Kopfzeile mit Nummer: projektweit --color-bg (helles Grau) - hier eine
   Spur dunkler als der Kartenkoerper, damit sie sich weiterhin als
   abgesetzte Kopfzeile liest, ohne einen hellen Fremdkoerper zu bilden. */
body.v2.v2-page .order__block-title {
  background: rgba(4, 16, 26, 0.35);
  border-bottom-color: var(--v2-line);
  color: var(--v2-text);
}
/* Die Nummer-Kugel bleibt im Kernton statt Primaerblau, dunkler Text fuer
   Kontrast (7.9:1 gegen --v2-core) statt Weiss auf mittelhellem Blau. */
body.v2.v2-page .order__block-title span:first-child {
  background: var(--v2-core);
  color: var(--v2-void);
}
body.v2.v2-page .order__block-title em {
  color: var(--v2-text-dim);
}
body.v2.v2-page .order__note {
  color: var(--v2-text-dim);
}
body.v2.v2-page .order__intro .accent {
  color: var(--v2-core);
}

/* ---- 15.3 Leistungs-Auswahlkarten (.svc-pick) ---------------------------
   Normalzustand: dieselbe Kartenflaeche wie .order__block selbst, nur
   einen Hauch heller/dunkler gestaffelt (siehe Kartenverlauf), damit die
   einzelnen Karten im Kartenkoerper noch als eigene Flaechen lesbar
   bleiben. */
body.v2.v2-page .svc-pick {
  border-color: rgba(140, 226, 240, 0.28);
  background: rgba(4, 16, 26, 0.28);
}

body.v2.v2-page .svc-pick:hover,
body.v2.v2-page .svc-pick:focus-visible {
  border-color: var(--v2-core);
}
body.v2.v2-page .svc-pick__title {
  color: var(--v2-text);
}
body.v2.v2-page .svc-pick__text {
  color: var(--v2-text-dim);
}
/* Checkbox-Kachel: heller Rand statt hellgrauem Standardrand, damit sie
   auf dunklem Grund ueberhaupt sichtbar ist. */
body.v2.v2-page .svc-pick__box {
  border-color: rgba(140, 226, 240, 0.45);
  background: rgba(4, 16, 26, 0.4);
}
body.v2.v2-page .svc-pick input:checked + .svc-pick__box {
  background: var(--v2-core);
  border-color: var(--v2-core);
}
body.v2.v2-page .svc-pick input:checked + .svc-pick__box::after {
  border-color: var(--v2-void);
}
body.v2.v2-page .svc-pick input:focus-visible + .svc-pick__box {
  outline-color: var(--v2-core);
}
/* Ausgewaehlter Zustand: heller Rand in Kernfarbe plus ein LEICHT getoenter
   Grund (Kernfarbe zu 16% in den dunklen Kartengrund gemischt) - bewusst
   schwaecher als das Muster in Block 12.5 (dort 22%), weil die Karten hier
   dichter beieinander stehen und ein staerkerer Farbfleck zu unruhig
   wirkte; bei 16% bleibt sowohl Titel als auch Beschreibungstext ueber dem
   Mindestkontrast (siehe Kontrastmessung: Titel 8.86:1, Beschreibung
   4.51:1 am hellsten Punkt des Verlaufs). Der Haken selbst (dunkel auf
   Kernfarbe) macht den Zustand zusaetzlich eindeutig, unabhaengig von der
   Flaechenfarbe. */
body.v2.v2-page .svc-pick:has(input:checked) {
  border-color: var(--v2-core);
  background: linear-gradient(160deg, rgba(127, 227, 255, 0.16) 0%, rgba(7, 28, 40, 0.85) 100%);
  box-shadow: 0 0 0 1px var(--v2-core);
}

/* ---- 15.4 Budget-Optionen (.budget-opt) ---------------------------------
   Dieselbe Bauform wie .svc-pick, nur die Karte traegt Rand + Grund direkt
   auf dem <span> (kein Aufklapp-Icon-Feld noetig). */
body.v2.v2-page .budget-opt span {
  border-color: rgba(140, 226, 240, 0.28);
  background: rgba(4, 16, 26, 0.28);
  color: var(--v2-text);
}
body.v2.v2-page .budget-opt span small {
  color: var(--v2-text-dim);
}
body.v2.v2-page .budget-opt:hover span {
  border-color: var(--v2-core);
}
body.v2.v2-page .budget-opt input:checked + span {
  border-color: var(--v2-core);
  background: linear-gradient(160deg, rgba(127, 227, 255, 0.16) 0%, rgba(7, 28, 40, 0.85) 100%);
  color: var(--v2-text);
  box-shadow: 0 0 0 1px var(--v2-core);
}
body.v2.v2-page .budget-opt input:focus-visible + span {
  outline-color: var(--v2-core);
}

/* ---- 15.5 Beratungs-Hinweisbox (.order__beratung) -----------------------
   Projektweit ein warmes, fast weisses Gelb (#fffaf0) mit gelbem Rand -
   auf dunklem Grund derselbe Ansatz wie der Beleg-Stempel in Block 12.6:
   die Kartenflaeche bleibt dunkel, der Akzent (Rand, Ueberschrift) traegt
   den Gelbton weiter. */
body.v2.v2-page .order__beratung {
  background: linear-gradient(160deg, rgba(18, 66, 86, 0.55) 0%, rgba(7, 28, 40, 0.75) 100%);
  border-color: var(--v2-seo);
}
body.v2.v2-page .order__beratung-titel {
  color: var(--v2-seo);
}
body.v2.v2-page .order__beratung-text {
  color: var(--v2-text-dim);
}

/* ---- 15.6 Eigene Daten: Checkbox-Feld (.field--check) -------------------
   .field/.field input/.field textarea kommen bereits aus Block 12.4 (die
   Formularfelder auf marvin-de-vries.html/kontakt.html) - hier fehlt nur
   noch die Datenschutz-Checkbox-Zeile, die eine eigene Klasse traegt. */
body.v2.v2-page .field--check label {
  color: var(--v2-text-dim);
}
body.v2.v2-page .field--check a {
  color: var(--v2-core);
}
body.v2.v2-page .field--check input {
  accent-color: var(--v2-core);
}
body.v2.v2-page .req {
  color: #ff9b8a;
}

/* ---- 15.7 Zusammenfassungs-Leiste (.summe) -------------------------------
   Der wichtigste Abschluss-CTA der Seite - braucht auf dunklem Grund einen
   klar abgesetzten EIGENEN Kartengrund (heller als der Seitengrund) mit
   spuerbarem Leuchten, sonst verschmilzt die projektweite --color-ink-
   Flaeche mit dem ohnehin dunklen Sternenfeld dahinter. */
body.v2.v2-page .summe {
  background: linear-gradient(160deg, var(--v2-space-hi) 0%, var(--v2-deep) 100%);
  border: 1px solid var(--v2-line);
  box-shadow:
    0 20px 52px rgba(2, 8, 16, 0.6),
    0 0 0 1px rgba(140, 226, 240, 0.08),
    0 0 60px rgba(47, 111, 237, 0.16);
  color: var(--v2-text);
}
body.v2.v2-page .summe__toggle {
  color: var(--v2-text);
}
body.v2.v2-page .summe__wert {
  color: var(--v2-seo);
}
body.v2.v2-page .summe__detail {
  color: var(--v2-text-dim);
}
body.v2.v2-page .summe__detail li::before {
  background: var(--v2-seo);
}
body.v2.v2-page .summe__hinweis {
  color: var(--v2-text-dim);
}
/* Fehlertext (per JS gesetzt, siehe initOrderForm in script.js): erbt sonst
   den gedaempften Ton der .summe__hinweis - im Fehlerfall braucht die
   Zeile denselben warnenden Rotton wie .field__error in Block 12.4. */
body.v2.v2-page .summe__hinweis:not(:empty) {
  color: #ff9b8a;
}

/* ---- 15.8 dritte Knopf-Variante: .btn--light -----------------------------
   Projektweit eine helle Flaeche (--color-accent, Gelb) mit dunklem Text -
   auf der dunklen Buehne bleibt das UNVERAENDERT die richtige Wahl: ein
   heller, gelber Knopf ist der staerkste moegliche Kontrast zur dunklen
   .summe-Karte und macht den Abschluss-Button unmissverstaendlich zum
   primaeren CTA der Seite (13.77:1 dunkler Text auf --v2-seo). Nur der
   Hover-Ton wechselt auf den etwas kraeftigeren Kernton statt
   --color-accent-deep, damit er zur uebrigen Weltraum-Palette passt. */
body.v2.v2-page .btn--light {
  background: var(--v2-seo);
  color: var(--v2-void);
}

body.v2.v2-page .btn--light:hover:not(:disabled),
body.v2.v2-page .btn--light:focus-visible:not(:disabled) {
  background: #ffe08a;
}
body.v2.v2-page .btn:disabled {
  opacity: 0.42;
}

/* ---- 15.9 Bestaetigung (.order__done) ------------------------------------
   Dieselbe Kartenoptik wie .order__block, mit dem Erfolgsgruen aus Block
   12.4 (.form__status[data-state="success"]) fuer die Ueberschrift statt
   projektweitem --color-success (das ist fuer helle Flaechen gezeichnet
   und zu dunkel fuer diese Buehne). */
body.v2.v2-page .order__done {
  background: linear-gradient(160deg, rgba(18, 66, 86, 0.55) 0%, rgba(7, 28, 40, 0.75) 100%);
  border-color: #6fe3a6;
}
body.v2.v2-page .order__done h2 {
  color: #6fe3a6;
}
body.v2.v2-page .order__done p {
  color: var(--v2-text-dim);
}

/* ---- 15.10 Rechtstext unter dem Formular (.order__legal) ----------------- */
body.v2.v2-page .order__legal {
  color: var(--v2-text-dim);
}
body.v2.v2-page .order__legal a {
  color: var(--v2-core);
}

/* =============================================================================
   16) leistungen.html - Orbit+Parcours-Szene als Hero (.lst-space)
   ECHTE 1:1-Kopie des gesamten zusammenhaengenden Themenblocks aus
   index.html (.v2-space/.v2-journey/.v2-orbit/.v2-track, Zeilen 264-639
   im Markup, Bloecke 2-6 hier in orbit.css) - Zentralplanet MIT allen
   sechs Trabanten UND drehbarem Orbit-System, danach Uebergabe an den
   Parcours mit den sechs grossen Einzelplaneten. Eigener Namensraum
   .lst-* (Klassennamen UND Custom Properties) statt .v2-*, damit nichts
   hier mit den Bloecken 1-11 (index.html) kollidiert - orbit.js bleibt
   laut eigenem Kopfkommentar exklusiv fuer index.html, orbit.css wird
   aber auch von leistungen.html geladen und darf deshalb keine
   ueberschneidenden Selektoren erzeugen.

   ALLE Werte (Groessen, Positionen, Radien, Farben, SVG-Pfade,
   Kurvendaten) sind Zeichen fuer Zeichen aus den Bloecken 2-6 oben
   uebernommen - nur Klassen-/Property-Praefixe wurden ersetzt
   (.v2- -> .lst-, --sys-/--build/--tilt/--copy/--eyebrow/--caption/--hud/
   --tint/--x/--y/--scale/--opacity/--focus/--z/--draw/--a/--spin/--grid-x/
   --grid-y/--star-x/--star-y/--bg-fade bleiben inhaltlich identisch, da
   Custom Properties keinen Namensraum-Konflikt mit index.html erzeugen
   koennen - sie sind Element-lokal). Keine eigenen Zahlen erfunden, keine
   Vereinfachung des Orbit-Systems.

   HINTERGRUND/RASTER: .lst-space/.lst-space__bg/__grid/__stars sind die
   1:1-Entsprechung von .v2-space & Kindern (Block 2) - EIGENES,
   scroll-gekoppeltes Sternenfeld+Raster fuer diese Szene, das per
   position:sticky ueber .lst-orbit und .lst-track hinweg mitklebt. Es
   ersetzt an dieser Stelle NICHT das fixierte Sternenfeld aus Block 12.1
   (body.v2.v2-page::before/::after) - jenes bleibt fuer den restlichen
   Seiteninhalt (Accordion, Slideshow, CTA-Band) unveraendert bestehen und
   liegt ohnehin dahinter (z-index 0 vs. .lst-space z-index/Stapelkontext
   ueber dem Seiteninhalt).

   EINZIGE Abweichung vom Original-Ablauf: index.html zeigt VOR dieser
   Szene den Marvin-Hero + "Was wir tun"-Uebergang; leistungen.html hat
   davor nichts und der bisherige Leistungen-Hero-Text steht stattdessen
   als Intro-Zustand von .lst-track__caption (siehe 16.5 unten) - Kern,
   Bahnen, Trabanten und Parcours selbst sind unveraendert 1:1.
   ============================================================================= */

/* ---- 16.1 Der durchgehende Weltraum (1:1 zu Block 2, .v2-space) ------- */
.lst-space {
  position: relative;
  background:
    linear-gradient(180deg,
      var(--v2-void) 0%,
      var(--v2-deep) 12%,
      var(--v2-space) 26%,
      #06202a 46%,
      #06202a 68%,
      var(--v2-deep) 100%);
}

.lst-space__bg {
  position: sticky;
  top: 0;
  z-index: 0;
  height: 100svh;
  margin-bottom: -100svh;
  overflow: clip;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 11%, #000 89%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 11%, #000 89%, transparent 100%);
  opacity: var(--bg-fade, 1);
}

.lst-space > section { position: relative; z-index: 1; }

.lst-orbit::before,
.lst-track::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}

.lst-space__grid {
  position: absolute;
  inset: -20% -10%;
  background-image:
    linear-gradient(var(--v2-line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--v2-line-soft) 1px, transparent 1px),
    linear-gradient(var(--v2-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--v2-line) 1px, transparent 1px);
  background-size: 32px 32px, 32px 32px, 160px 160px, 160px 160px;
  background-position:
    0 calc(var(--grid-y, 0) * 1px),
    calc(var(--grid-x, 0) * 1px) 0,
    0 calc(var(--grid-y, 0) * 1px),
    calc(var(--grid-x, 0) * 1px) 0;
  mask-image: radial-gradient(130% 110% at 50% 50%, #000 40%, transparent 100%);
}

.lst-space__stars {
  position: absolute;
  inset: -30% -10%;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, rgba(255,255,255,.75), transparent),
    radial-gradient(1.2px 1.2px at 78% 14%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.8px 1.8px at 44% 68%, rgba(255,255,255,.65), transparent),
    radial-gradient(1.1px 1.1px at 88% 74%, rgba(255,255,255,.45), transparent),
    radial-gradient(1.4px 1.4px at 28% 86%, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 62% 40%, rgba(255,255,255,.4), transparent),
    radial-gradient(1.6px 1.6px at 6% 58%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.2px 1.2px at 94% 44%, rgba(255,255,255,.4), transparent);
  background-repeat: repeat;
  background-size: 640px 480px;
  background-position: 0 calc(var(--star-y, 0) * 1px);
  opacity: 0.85;
}

/* Rubrik am oberen Rand einer Buehne - 1:1 zu .v2-eyebrow. */
.lst-eyebrow {
  position: absolute;
  top: calc(var(--header-h) + 1.2rem);
  left: clamp(1.2rem, 4vw, 3.5rem);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(234, 246, 251, 0.55);
  opacity: var(--eyebrow, 1);
  transform: translateY(calc((1 - var(--eyebrow, 1)) * -8px));
}

/* Sticky-Buehne - 1:1 zu .v2-stage. */
.lst-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: clip;
  isolation: isolate;
}

/* ---- 16.2 Gemeinsame Buehne von Orbit-System und Parcours (1:1 zu
   .v2-journey/.v2-journey__stage, Block 2) ------------------------------ */
.lst-journey { position: relative; }

.lst-journey__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow-x: clip;
  z-index: 0;
  pointer-events: none;
}
.lst-journey__stage .lst-orbit__system,
.lst-journey__stage .lst-track__caption {
  pointer-events: auto;
}

/* =============================================================================
   16.3 ORBIT - Kern und seine sechs Trabanten (1:1 zu Block 4, .v2-orbit*)
   ============================================================================= */
.lst-orbit {
  position: relative;
  min-height: 260svh;
}
.lst-orbit::before {
  background: radial-gradient(80% 60% at 62% 50%, rgba(47, 111, 237, 0.18) 0%, transparent 70%);
}

.lst-orbit,
.lst-orbit__stage {
  pointer-events: none;
}
.lst-orbit__stage { display: block; }
.lst-orbit__stage > * { pointer-events: auto; }

.lst-orbit__copy {
  position: absolute;
  z-index: 5;
  left: 21.5%;
  top: 50%;
  translate: -50% -50%;
  width: max-content;
  max-width: min(40vw, 92vw);
  opacity: var(--copy, 0);
  transform: translateX(calc((1 - var(--copy, 0)) * -40px));
}
.lst-orbit__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.7rem, 4.2vw, 4rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-sm);
  color: var(--v2-text);
}
.lst-orbit__title em {
  font-style: normal;
  background: linear-gradient(100deg, var(--v2-core), var(--v2-core-mid));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lst-orbit__lead {
  max-width: min(30ch, 34vw);
  color: var(--v2-text-dim);
  font-size: clamp(0.95rem, 1.15vw, 1.15rem);
  line-height: 1.7;
  margin: 0;
}

.lst-orbit__system {
  position: absolute;
  z-index: 2;
  left: var(--sys-x, 80%);
  top: 50%;
  width: min(96vh, 42vw);
  aspect-ratio: 1;
  translate: -50% -50%;
  scale: var(--sys-scale, 1);
  opacity: var(--sys-opacity, 1);
  cursor: grab;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}
.lst-orbit__system[data-dragging] { cursor: grabbing; }

@media (min-width: 1500px) {
  .lst-orbit__system { width: min(100vh, 44vw); }
}

.lst-orbit__ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--rw) * 1%);
  height: calc(var(--rw) * var(--tilt, 0.46) * 1%);
  translate: -50% -50%;
  border: 1px solid rgba(140, 226, 240, 0.34);
  border-radius: 50%;
  opacity: calc(var(--build, 0) * var(--rings-opacity, 1));
  scale: calc(0.72 + var(--build, 0) * 0.28);
}
.lst-orbit__ring--back {
  z-index: 1;
  clip-path: inset(0 0 50% 0);
}
.lst-orbit__ring--front {
  z-index: 3;
  clip-path: inset(50% 0 0 0);
}
.lst-orbit__ring--dashed {
  border-style: dashed;
  border-color: rgba(140, 226, 240, 0.22);
}

.lst-orbit__core {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 100%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  overflow: hidden;
  background:
    radial-gradient(circle at 34% 30%,
      rgba(255, 255, 255, 0.92) 0%,
      var(--v2-core) 14%,
      var(--v2-core-mid) 44%,
      var(--v2-core-deep) 74%,
      #061634 100%);
  box-shadow:
    0 0 80px rgba(47, 111, 237, 0.5),
    0 0 200px rgba(127, 227, 255, 0.22),
    inset -18px -22px 60px rgba(3, 10, 26, 0.6);
  scale: calc(0.4 + var(--build, 0) * 0.6);
  opacity: var(--build, 0);
}

.lst-orbit__core-halo {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: 112%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    rgba(127, 227, 255, 0.20) 0%,
    rgba(47, 111, 237, 0.14) 42%,
    transparent 68%);
  scale: calc(0.4 + var(--build, 0) * 0.6);
  opacity: var(--build, 0);
  animation: v2-pulse 6s ease-in-out infinite;
  pointer-events: none;
}

.lst-orbit__core-shade {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-image:
    radial-gradient(38% 46% at 18% 32%, rgba(255, 255, 255, 0.20), transparent 70%),
    radial-gradient(30% 40% at 52% 62%, rgba(160, 235, 255, 0.16), transparent 72%),
    radial-gradient(26% 34% at 78% 26%, rgba(255, 255, 255, 0.13), transparent 70%),
    radial-gradient(34% 30% at 88% 70%, rgba(47, 111, 237, 0.22), transparent 74%);
  background-size: 50% 100%;
  background-repeat: repeat-x;
  background-position: calc(var(--surface-x, 0) * 1%) 0;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 42%, rgba(0, 0, 0, 0.35) 72%, transparent 92%);
  mask-image: radial-gradient(circle at 50% 50%, #000 42%, rgba(0, 0, 0, 0.35) 72%, transparent 92%);
  pointer-events: none;
}

.lst-orbit__sat {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(52px, 5.6vw, 82px);
  aspect-ratio: 1;
  margin: 0;
  transform:
    translate3d(calc(var(--tx, 0) * 1px), calc(var(--ty, 0) * 1px), 0)
    translate(-50%, -50%)
    scale(var(--sat-scale, 1));
  opacity: var(--sat-opacity, 0);
  z-index: var(--sat-z, 3);
  will-change: transform;
}

.lst-orbit__sat-body {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, var(--tint) 0%, #04101a 78%);
  background:
    radial-gradient(circle at 29% 23%, rgba(255,255,255,1) 0%, rgba(255,255,255,0.6) 6%, transparent 24%),
    radial-gradient(circle at 78% 82%, rgba(160, 235, 255, 0.5) 0%, transparent 34%),
    radial-gradient(circle at 37% 31%,
      color-mix(in srgb, var(--tint) 40%, #ffffff) 0%,
      var(--tint) 26%,
      color-mix(in srgb, var(--tint) 50%, #06202c) 58%,
      #04101a 100%);
  box-shadow:
    inset -6px -8px 20px rgba(4, 16, 26, 0.72),
    0 0 22px rgba(127, 227, 255, 0.18);
}

.lst-orbit__sat-halo {
  position: absolute;
  inset: -16%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    transparent 56%,
    color-mix(in srgb, var(--tint) 26%, transparent) 70%,
    transparent 84%);
  pointer-events: none;
}

.lst-orbit__sat-face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
  transform:
    translateX(calc(var(--face-x, 0) * 34%))
    scaleX(var(--face-squeeze, 1));
  opacity: var(--face-opacity, 1);
}
.lst-orbit__sat-face svg {
  width: 46%;
  height: auto;
  filter: drop-shadow(0 1px 3px rgba(4, 16, 26, 0.55));
}

.lst-orbit__sat-label {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  translate: -50% 0;
  white-space: nowrap;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.56vw, 1.24rem);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
  color: rgba(234, 246, 251, 0.82);
  text-shadow: 0 1px 4px rgba(4, 16, 26, 0.85);
  opacity: var(--label-opacity, 0);
  pointer-events: none;
}

.lst-orbit__drag-hint {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 103%;
  translate: -50% 0;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.34rem 0.75rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(140, 226, 240, 0.22);
  background: rgba(4, 20, 28, 0.55);
  backdrop-filter: blur(6px);
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(234, 246, 251, 0.66);
  pointer-events: none;
  opacity: var(--hint, 0);
  transition: opacity 400ms var(--ease-out);
}
.lst-orbit__drag-hint svg { width: 13px; height: 13px; }
.lst-orbit__system[data-touched] .lst-orbit__drag-hint { opacity: 0; }

/* =============================================================================
   16.4 PARCOURS - die sechs Leistungen als Planeten (1:1 zu Block 6,
   .v2-track/.v2-planet/.v2-hud)
   ============================================================================= */
.lst-track {
  position: relative;
  min-height: 560svh;
}
.lst-track::before {
  background: radial-gradient(70% 60% at 30% 45%, rgba(18, 66, 86, 0.45) 0%, transparent 70%);
}

.lst-track__stage { display: block; }

.lst-track__lane {
  position: absolute;
  inset: 0;
}

.lst-planet {
  position: absolute;
  left: 0;
  top: 50%;
  width: calc(var(--size) * 1vmin);
  aspect-ratio: 1;
  margin: 0;
  transform:
    translate3d(calc(var(--x, 120) * 1vw), calc(var(--y, 0) * 1vh), 0)
    translate(-50%, -50%)
    scale(var(--scale, 1));
  opacity: var(--opacity, 0);
  z-index: var(--z, 3);
  will-change: transform;
}

.lst-planet__body {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, var(--tint) 0%, #04101a 78%);
  background:
    radial-gradient(circle at 29% 23%, rgba(255,255,255,1) 0%, rgba(255,255,255,0.6) 6%, transparent 24%),
    radial-gradient(circle at 78% 82%, rgba(160, 235, 255, 0.5) 0%, transparent 34%),
    radial-gradient(circle at 37% 31%,
      color-mix(in srgb, var(--tint) 40%, #ffffff) 0%,
      var(--tint) 26%,
      color-mix(in srgb, var(--tint) 50%, #06202c) 58%,
      #04101a 100%);
  box-shadow:
    inset -14px -18px 44px rgba(4, 16, 26, 0.72),
    0 0 calc(var(--size) * 0.5vmin) rgba(127, 227, 255, 0.16);
  animation: v2-drift 26s ease-in-out infinite;
}

.lst-planet__halo {
  position: absolute;
  inset: -14%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    transparent 58%,
    color-mix(in srgb, var(--tint) 22%, transparent) 70%,
    transparent 82%);
  opacity: var(--focus, 0);
}

.lst-planet__pin {
  position: absolute;
  left: calc(var(--pin-x) * 1%);
  top: calc(var(--pin-y) * 1%);
  display: flex;
  align-items: center;
  gap: 8px;
  transform: translateY(-50%);
  opacity: var(--focus, 0);
  pointer-events: none;
}
.lst-planet__pin--left {
  flex-direction: row-reverse;
  transform: translate(-100%, -50%);
}
.lst-planet__pin-dot {
  position: relative;
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 50%;
  background: var(--tint);
  box-shadow: 0 0 12px color-mix(in srgb, var(--tint) 70%, transparent);
}
.lst-planet__pin-dot::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--size) * var(--pin-len) * 0.01vmin);
  height: 1px;
  background: linear-gradient(90deg, var(--tint), color-mix(in srgb, var(--tint) 25%, transparent));
  transform-origin: 0 50%;
  transform: rotate(calc(var(--pin-rot) * 1deg));
}
.lst-planet__pin-label {
  font-family: var(--font-display);
  font-size: clamp(0.62rem, 0.9vw, 0.8rem);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--v2-text);
}

/* ---- 16.5 Erklaertext im Brennpunkt (1:1 zu .v2-track__caption) --------
   Traegt beim Sektionsstart den ALTEN Leistungen-Hero-Text als
   Intro-Zustand (siehe Abschnittskopf oben, "EINZIGE Abweichung") - Position
   und Optik sind exakt die des Original-Slots, nur die Zusatzklasse
   .lst-track__caption--intro schaltet auf groessere Typografie um,
   solange der Intro-Text steht (siehe leistungen-hero.js). */
.lst-track__caption {
  position: absolute;
  z-index: 5;
  left: clamp(2rem, 20vw, 22rem);
  top: 50%;
  translate: 0 -50%;
  max-width: min(32ch, 32vw);
  /* Wie die Karte "Sechs Hebel" in Variante 1 (.v2-orbit__copy): sie steht fest am Platz und blendet nur ein und aus,
     statt von rechts hereinzufahren */
  opacity: var(--caption, 0);
  transform: scale(calc(0.94 + var(--caption, 0) * 0.06));
  filter: blur(calc((1 - var(--caption, 0)) * 10px));
}
.lst-track__caption-kicker {
  display: block;
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--caption-tint, var(--v2-core));
  margin-bottom: 0.5rem;
}
.lst-track__caption-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.4rem, 2.8vw, 2.4rem);
  line-height: 1.1;
  margin: 0 0 0.6rem;
  color: var(--v2-text);
}
.lst-track__caption-text {
  color: var(--v2-text-dim);
  line-height: 1.65;
  margin: 0;
}

/* Platz der Karte wie "Sechs Hebel" in Variante 1 (.v2-orbit__copy): gleiche Lage, Breite und Verschiebung. */
@media (min-width: 901px) {
  .lst-track__caption {
    left: 21.5%;
    top: calc(50% - 11rem);
    translate: -50% 0;
    width: min(30rem, 36vw);
    max-width: none;
  }
}

/* Intro-Zustand: derselbe Slot, aber mit dem Massstab des frueheren
   Hero-Textes (H1 statt H4-Groesse) - siehe Abschnittskopf. Breiter als
   die knappe Leistungs-Caption, weil der Intro-Lead-Text laenger ist. */
.lst-track__caption--intro {
  max-width: min(46ch, 92%);
}
.lst-track__caption--intro .lst-track__caption-kicker {
  font-size: 0.72rem;
}
.lst-track__caption--intro .lst-track__caption-title {
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  line-height: 1.1;
  margin-bottom: 0.75rem;
}
.lst-track__caption--intro .lst-track__caption-text {
  font-size: clamp(0.98rem, 1.1vw, 1.08rem);
  max-width: 44ch;
}

/* ---- 16.6 HUD rechts unten (1:1 zu .v2-hud) ---------------------------- */
.lst-hud {
  position: absolute;
  z-index: 6;
  right: clamp(1rem, 3vw, 3rem);
  bottom: clamp(1.2rem, 4vh, 3rem);
  display: flex;
  gap: clamp(0.6rem, 1.2vw, 1rem);
  opacity: var(--hud, 0);
  transform: translateY(calc((1 - var(--hud, 0)) * 26px));
}
.lst-hud__panel {
  margin: 0;
  padding: 0.7rem 0.8rem 0.55rem;
  border: 1px solid rgba(140, 226, 240, 0.2);
  border-radius: 10px;
  background: rgba(4, 20, 28, 0.62);
  backdrop-filter: blur(8px);
}
.lst-hud__caption {
  display: block;
  font-family: var(--font-display);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(234, 246, 251, 0.45);
  margin-bottom: 0.4rem;
}
.lst-hud__panel svg { display: block; }
.lst-hud__panel--map svg { width: clamp(96px, 11vw, 148px); height: auto; }
.lst-hud__panel--chart svg { width: clamp(150px, 17vw, 236px); height: auto; }

.lst-hud__orbit { fill: none; stroke: rgba(140, 226, 240, 0.22); stroke-width: 0.7; }
.lst-hud__orbit.is-active { stroke: var(--tint); stroke-width: 1.1; }
.lst-hud__dot-orbit {
  transform: translate(60px, 60px) rotate(calc((var(--a, 0) + var(--spin, 0)) * 1deg));
}
.lst-hud__dot { fill: rgba(140, 226, 240, 0.35); transition: fill 0.3s, r 0.3s; }
.lst-hud__dot.is-active { fill: var(--tint); r: 3.2; filter: drop-shadow(0 0 5px var(--tint)); }
.lst-hud__center { fill: var(--v2-core); filter: drop-shadow(0 0 6px var(--v2-core)); }

.lst-hud__axis { stroke: rgba(140, 226, 240, 0.16); stroke-width: 0.7; }
/* Wirkungskurve im Stil einer leuchtenden Verlaufsgrafik (Vorlage: Neonlinie mit Flaeche, Grundlinie mit Knoten,
   Pfeilspitze und aufsteigenden Lichtpunkten) - in den Farben der Seite: Linie von Hellcyan zur Farbe der Leistung. */
.lst-hud__axis--v { stroke: rgba(140, 226, 240, 0.09); }
.lst-hud__series { opacity: 0; transition: opacity 0.4s ease; }
.lst-hud__series.is-active { opacity: 1; }
.lst-hud__series.is-past { opacity: 0; }
.lst-hud__series.is-past .lst-hud__area,
.lst-hud__series.is-past .lst-hud__base,
.lst-hud__series.is-past .lst-hud__nodes,
.lst-hud__series.is-past .lst-hud__shine,
.lst-hud__series.is-past .lst-hud__tip,
.lst-hud__series.is-past .lst-hud__spark { opacity: 0; }
.lst-hud__curve {
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1000;
  stroke-dashoffset: calc(1000 - var(--draw, 0) * 1000);
  filter: url(#lstGlow);
}
.lst-hud__area { stroke: none; clip-path: inset(0 calc((1 - var(--draw, 0)) * 100%) 0 0); }
.lst-hud__base {
  fill: none; stroke: rgba(234, 246, 251, 0.42); stroke-width: 0.8; stroke-linejoin: round;
  clip-path: inset(0 calc((1 - var(--draw, 0)) * 100%) 0 0);
}
.lst-hud__nodes { clip-path: inset(0 calc((1 - var(--draw, 0)) * 100%) 0 0); }
.lst-hud__node { fill: rgba(234, 246, 251, 0.85); stroke: var(--tint); stroke-width: 0.6; }
.lst-hud__shine {
  fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 7 93; opacity: 0.8;
  clip-path: inset(0 calc((1 - var(--draw, 0)) * 100%) 0 0);
  animation: lst-hud-shine 2.8s linear infinite;
}
.lst-hud__tip {
  fill: #fff; filter: url(#lstGlow);
  opacity: clamp(0, calc((var(--draw, 0) - 0.92) * 12), 1);
}
.lst-hud__spark {
  fill: var(--tint); opacity: 0;
  animation: lst-hud-spark 3.6s ease-in-out infinite; animation-delay: var(--sd, 0s);
}
@keyframes lst-hud-shine { from { stroke-dashoffset: 7; } to { stroke-dashoffset: -93; } }
@keyframes lst-hud-spark {
  0% { opacity: 0; transform: translateY(5px); }
  30% { opacity: 0.85; }
  100% { opacity: 0; transform: translateY(-9px); }
}
@media (prefers-reduced-motion: reduce) {
  .lst-hud__shine, .lst-hud__spark { animation: none; }
  .lst-hud__shine { display: none; }
}

/* ---- 16.7 Schmale Bildschirme (1:1 zu Block 10, @media max-width:900px) */
@media (max-width: 900px) {
  .lst-orbit { min-height: 200svh; }
  .lst-orbit__copy {
    position: absolute;
    top: calc(var(--header-h) + 3.5rem);
    translate: 0 0;
    max-width: min(38ch, 88vw);
  }
  .lst-orbit__lead { max-width: none; }
  .lst-orbit__system {
    left: 50%;
    top: 62%;
    width: min(74vh, 84vw);
  }
  .lst-orbit__drag-hint { display: none; }

  .lst-track { min-height: 400svh; }
  .lst-track__caption {
    left: clamp(1rem, 5vw, 3rem);
    right: clamp(1rem, 5vw, 3rem);
    bottom: auto;
    top: calc(var(--header-h) + 3rem);
    max-width: none;
    /* NICHT aus index.html uebernommen (dort fehlt diese Zeile in der
       entsprechenden .v2-track__caption-Regel) - das ist eine bewusste
       Korrektur, keine Abweichung von einem funktionierenden Original-
       Wert: ohne "translate: 0 0" wirkt weiterhin das Desktop-
       "translate: 0 -50%" von .lst-track__caption, top:X wird dadurch um
       die halbe Elementhoehe nach oben verschoben. Bei den kurzen
       Leistungs-Captions (~140px hoch) bleibt der Rest noch im Bild
       (siehe index.html, wo derselbe Effekt unbemerkt blieb); die
       hoehere Intro-Variante (--intro, siehe unten) wird dadurch aber so
       weit nach oben verschoben, dass Eyebrow und Titelanfang unter dem
       Header verschwinden. */
    translate: 0 0;
  }
  .lst-hud {
    right: auto;
    left: 0.8rem;
    bottom: 0.9rem;
    gap: 0.5rem;
  }
  .lst-hud__panel { padding: 0.5rem 0.55rem 0.4rem; }
  .lst-hud__caption { font-size: 0.5rem; letter-spacing: 0.12em; }
  .lst-hud__panel--map svg { width: 62px; }
  .lst-hud__panel--chart svg { width: 112px; }
}

/* ---- 16.8 Ohne Bewegungswunsch (1:1 zu Block 11, [data-v2-static]) -----
   JS setzt dafuer data-lst-static am body (siehe leistungen-hero.js) -
   die Werte hier sind der Endzustand, den es sonst errechnen wuerde. */
@media (prefers-reduced-motion: reduce) {
  .lst-orbit__core,
  .lst-planet__body {
    animation: none !important;
  }
}

[data-lst-static] .lst-orbit,
[data-lst-static] .lst-track {
  min-height: 0;
}
[data-lst-static] .lst-stage {
  position: relative;
  height: auto;
  min-height: 100svh;
  padding-bottom: clamp(2rem, 6vh, 4rem);
}
[data-lst-static] .lst-track__stage { min-height: 128svh; }
[data-lst-static] .lst-orbit__stage { min-height: 132svh; }
[data-lst-static] .lst-orbit__copy {
  top: calc(var(--header-h) + 3rem);
  translate: 0 0;
  max-width: min(52ch, 82vw);
}
[data-lst-static] .lst-orbit__system {
  top: 62%;
  width: min(62vh, 62vw);
}
/* translate: 0 0 - bewusste Korrektur, siehe Kommentar bei der
   mobilen .lst-track__caption-Regel oben (derselbe Effekt: ohne das
   verschiebt das Desktop-"translate: 0 -50%" die hoehere Intro-Variante
   unter den Header). In index.html fehlt dieselbe Zeile ebenfalls, faellt
   dort aber wegen der kuerzeren Leistungs-Captions nicht auf. */
[data-lst-static] .lst-track__caption { bottom: auto; top: calc(var(--header-h) + 3rem); translate: 0 0; }

/* =============================================================================
   17) PLANETEN-RENDERER (assets/js/planet-gl.js)
   -----------------------------------------------------------------------------
   Zentralplanet, Trabanten und Parcours-Planeten werden - sobald WebGL2
   verfuegbar ist - als beleuchtete 3D-Kugeln in ein Canvas gezeichnet. Das
   Canvas ist 24% groesser als der Koerper, damit Atmosphaere und Wolkenrand
   ueber die Silhouette hinausragen duerfen; die Kugel selbst fuellt exakt
   den bisherigen Koerper (Bahnen, Verdeckung und Radien aendern sich nicht).

   .has-gl setzt das JS erst, wenn das erste Bild wirklich gezeichnet ist.
   Bis dahin (und ohne WebGL2) bleibt die CSS-Kugel stehen - es gibt keinen
   Moment ohne Planet.
   ============================================================================= */
.omb-planet {
  position: absolute;
  left: -12%;
  top: -12%;
  width: 124%;
  height: 124%;
  display: block;
  pointer-events: none;
}

/* Zentralplanet: Beschnitt und Eigenschein sind jetzt Sache des Shaders */
.v2-orbit__core.has-gl,
.lst-orbit__core.has-gl {
  overflow: visible;
  background: none;
  box-shadow: none;
}
.v2-orbit__core.has-gl .v2-orbit__core-shade,
.lst-orbit__core.has-gl .lst-orbit__core-shade { display: none; }

/* Trabanten und Parcours-Planeten */
.v2-orbit__sat-body.has-gl,
.lst-orbit__sat-body.has-gl,
.v2-planet__body.has-gl,
.lst-planet__body.has-gl {
  background: none;
  box-shadow: none;
  animation: none;
}
/* Der Ringschimmer des Trabanten (CSS) wuerde den Shader-Rand doppeln */
.v2-orbit__sat-body.has-gl + .v2-orbit__sat-halo,
.lst-orbit__sat-body.has-gl + .lst-orbit__sat-halo { display: none; }

/* =============================================================================
   18) CARDS: Hover-Zoom und kleines Akzentlauflicht
   -----------------------------------------------------------------------------
   Beim Ueberfahren waechst die Karte leicht (scale, nicht transform - die
   Schritt-Karten tragen ihre Einflug-Verschiebung bereits in transform)
   und ein kurzes helles Segment laeuft um ihren Rand. Der Rand entsteht
   aus einem conic-gradient, der per Maske auf eine 1.5px-Linie reduziert
   wird; --glow-a dreht das Segment. Das Licht laeuft nur, solange die
   Karte ueberfahren wird, und entfaellt bei reduzierter Bewegung.
   ============================================================================= */
@property --glow-a {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.v2-step,
.v2-final__cta,
body.v2-page .cta-band {
  position: relative;
  transition: scale 320ms var(--ease-out), border-color 320ms var(--ease-out), box-shadow 320ms var(--ease-out);
}
.v2-step::before,
.v2-final__cta::before,
body.v2-page .cta-band::before {
  content: "";
  position: absolute;
  inset: -1px;
  padding: 1.5px;
  border-radius: inherit;
  background: conic-gradient(from var(--glow-a),
    transparent 0deg,
    transparent 318deg,
    rgba(127, 227, 255, 0.35) 336deg,
    rgba(190, 242, 255, 0.95) 358deg,
    transparent 360deg);
  -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 exclude, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 320ms var(--ease-out);
  pointer-events: none;
}
@media (hover: hover) {
  
  .v2-step:hover,
  .v2-final__cta:hover,
  body.v2-page .cta-band:hover,
.v2-step:focus-visible,
.v2-final__cta:focus-visible,
body.v2-page .cta-band:focus-visible {
    scale: 1.025;
    border-color: rgba(140, 226, 240, 0.4);
    box-shadow: 0 18px 44px rgba(3, 10, 20, 0.5);
  }
  
  .v2-step:hover::before,
  .v2-final__cta:hover::before,
  body.v2-page .cta-band:hover::before,
.v2-step:focus-visible::before,
.v2-final__cta:focus-visible::before,
body.v2-page .cta-band:focus-visible::before {
    opacity: 1;
    animation: glow-run 3.4s linear infinite;
  }
}
@keyframes glow-run {
  to { --glow-a: 360deg; }
}
@media (prefers-reduced-motion: reduce) {
  .v2-step:hover,
  .v2-final__cta:hover,
  body.v2-page .cta-band:hover { scale: 1; }
  .v2-step:hover::before,
  .v2-final__cta:hover::before,
  body.v2-page .cta-band:hover::before { animation: none; }
}

/* Gelber Haupt-CTA auf den dunklen Buehnenseiten: das dunkle Licht aus
   style.css verschwindet auf dem dunklen Kartengrund, der Ring war dort
   unsichtbar und der Knopf wirkte kleiner als die uebrigen. Hier laeuft
   das Licht deshalb im Akzentgelb - gleiche Ringbreite und Segmentlaenge
   wie bei den blauen Knoepfen. */
body.v2 .btn--primary.cta-orbit {
  --orbit-light: 255, 214, 102;
}

/* =============================================================================
   Flug von "Was wir tun" (Hero-Titel -> Rubrik der Orbit-Buehne) und die
   Zeile zum gerade aktiven Trabanten. Beides setzt orbit.js; siehe
   initFlight() und initOrbit().
   ============================================================================= */
body.v2 .v2-flight {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 40;
  width: max-content;
  flex-wrap: nowrap;
  transform-origin: 0 0;
  pointer-events: none;
  will-change: transform, opacity;
}
body.v2 .v2-flight .v2-turn__word { opacity: 1; transform: none; will-change: auto; }

.v2-orbit__now {
  margin-top: clamp(1rem, 3vh, 1.8rem);
  max-width: min(34ch, 36vw);
  padding-left: 0.9rem;
  border-left: 2px solid var(--now-tint, var(--v2-core));
  display: grid;
  gap: 0.3rem;
  opacity: var(--now, 0);
  transform: translateY(calc((1 - var(--now, 0)) * 10px));
  pointer-events: none;
}
.v2-orbit__now-kicker {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--now-tint, var(--v2-core));
}
.v2-orbit__now-title {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.35vw, 1.3rem);
  line-height: 1.25;
  color: var(--v2-text);
}
.v2-orbit__now-text {
  font-size: clamp(0.85rem, 1vw, 1rem);
  line-height: 1.6;
  color: var(--v2-text-dim);
}
@media (max-width: 900px) {
  .v2-orbit__now { display: none; }
}

html.is-orbit-live .v2-hero,
html.is-orbit-live .v2-hero * { pointer-events: none !important; }

/* Umschalter der Varianten in der Orbit-Sektion (Variante 1 = diese Buehne, 2 und 3 = Prototypen) */
.v2-variants {
  position: absolute;
  top: calc(var(--header-h) + 3.2rem);
  left: clamp(1.2rem, 4vw, 3.5rem);
  z-index: 6;
  display: flex;
  gap: 0.35rem;
  padding: 0.25rem;
  border-radius: 999px;
  background: rgba(8, 22, 38, 0.6);
  border: 1px solid rgba(140, 226, 240, 0.18);
  backdrop-filter: blur(6px);
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.v2-variants a {
  color: rgba(234, 246, 251, 0.62);
  text-decoration: none;
  border-radius: 999px;
  padding: 0.35rem 0.8rem;
}
.v2-variants a:hover,
.v2-variants a:focus-visible { color: #fff; background: rgba(127, 227, 255, 0.10); outline: none; }
.v2-variants a[aria-current] { color: #fff; background: rgba(127, 227, 255, 0.16); }
.v2-variants__sep { width: 1px; align-self: stretch; margin: 0.25rem 0.1rem; background: rgba(140, 226, 240, 0.25); }
.v2-variants button {
  font: inherit;
  letter-spacing: inherit;
  color: #fff;
  background: transparent;
  border: 1px solid rgba(140, 226, 240, 0.3);
  border-radius: 999px;
  padding: 0.35rem 0.8rem;
  cursor: pointer;
}
.v2-variants button:hover,
.v2-variants button:focus-visible { background: rgba(127, 227, 255, 0.16); outline: none; }

/* Fortschrittsleiste der Abfolge in der Orbit-Sektion: acht Segmente, das aktuelle fuellt sich bis zum naechsten Schritt (orbit.js) */
.v2-orbit__progress {
  position: absolute;
  left: 50%;
  bottom: clamp(6.4rem, 11svh, 7.6rem);   /* ueber dem Scroll-Hinweis */
  translate: -50% 0;
  z-index: 6;
  display: flex;
  gap: 0.35rem;
  width: min(30rem, 56vw);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.v2-orbit__progress.is-on { opacity: 1; }
.v2-orbit__progress button {
  flex: 1;
  padding: 0.7rem 0;            /* grosse Trefferflaeche, der sichtbare Balken bleibt schmal */
  background: none;
  border: 0;
  cursor: pointer;
  pointer-events: none;
}
.v2-orbit__progress.is-on button { pointer-events: auto; }
.v2-orbit__progress button:focus-visible { outline: 2px solid var(--v2-core, #7fe3ff); outline-offset: 2px; border-radius: 4px; }
.v2-orbit__progress i {
  --p: 0;
  display: block;
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: rgba(140, 226, 240, 0.2);
  overflow: hidden;
  transition: height 150ms ease;
}
.v2-orbit__progress button:hover i,
.v2-orbit__progress button:focus-visible i { height: 6px; }
.v2-orbit__progress i::after {
  content: "";
  display: block;
  height: 100%;
  background: var(--v2-core, #7fe3ff);
  transform-origin: 0 50%;
  transform: scaleX(var(--p));
}
.v2-orbit__progress.is-paused i::after { opacity: 0.55; }
/* Leistungsseite: rechts unten stehen die Karten, die Leiste bleibt davor */
.lst-journey__stage .v2-orbit__progress { width: min(24rem, 38vw); }

/* Hero-Erzaehlung auf dem Planeten: Hamburg, Wellen (Sichtbarkeit) und Punkte (Anfragen) - bewusst ohne ferne Orte (orbit.js, buildHeroNet) */
.v2-net {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  overflow: visible;
}
.v2-net__ripple { fill: none; stroke: var(--v2-core, #7fe3ff); stroke-width: 0.007; stroke-linecap: round; opacity: 0; }
.v2-net__dot { fill: #eaf9ff; stroke: var(--v2-core, #7fe3ff); stroke-width: 0.006; opacity: 0; }
.v2-net__home { fill: #ffd27a; stroke: #fff; stroke-width: 0.006; opacity: 0; }
.v2-net__label {
  fill: #fff;
  font-family: var(--font-display, "Space Grotesk", sans-serif);
  font-size: 0.062px;
  font-weight: 700;
  letter-spacing: 0.02em;
  paint-order: stroke;
  stroke: rgba(3, 11, 20, 0.85);
  stroke-width: 0.012px;
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) { .v2-net { display: none; } }

/* =============================================================================
   19) RAUMSONDEN (assets/js/probe-gl.js)
   -----------------------------------------------------------------------------
   Die sechs Leistungen sind Raumsonden - menschliche Technik - und keine Monde.
   Die Zeichenflaeche ist groesser als der Koerper, damit Solarflaechen und
   Antennen ueber die frueheren Kugelraender hinausragen duerfen. Bis das erste
   Bild steht (und ohne WebGL2) bleibt die CSS-Kugel stehen.
   ============================================================================= */
.omb-probe {
  position: absolute;
  left: -90%;
  top: -90%;
  width: 280%;
  height: 280%;
  display: block;
  pointer-events: none;
}
/* Parcours: grosse Koerper, weniger Ueberstand noetig */
.v2-planet__body > .omb-probe,
.lst-planet__body > .omb-probe { left: -25%; top: -25%; width: 150%; height: 150%; }
/* Der kreisrunde Leuchtring passt zu Kugeln, nicht zu Sonden: nur noch ein zarter Schein */
.has-probe .v2-planet__halo,
.has-probe .lst-planet__halo { opacity: calc(var(--focus, 0) * 0.35); }

/* =============================================================================
   Hero-Texte als technische Statuskarten (gleicher Look wie die Referenz-Karten
   und die Kopfleiste): dunkle Glasflaeche mit Scanlinien, Leuchtkante, Eckmarken
   und zwei abgeschnittenen Ecken.
   ============================================================================= */
.v2-hero__body,
.v2-hero__turn-copy,
.v2-orbit__intro,
.v2-orbit__copy,
.v2-orbit__satcard,
.v2-track__caption,
.lst-track__caption {
  padding: clamp(1.2rem, 2vw, 2rem) clamp(1.2rem, 2.4vw, 2.2rem);
  background:
    repeating-linear-gradient(0deg, rgba(127, 227, 255, 0.045) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, rgba(4, 24, 52, 0.88), rgba(1, 10, 26, 0.93));
  border: 1px solid rgba(127, 227, 255, 0.3);
  box-shadow: inset 0 0 40px rgba(41, 140, 230, 0.16);
  clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px);
}
.v2-hero__body::before,
.v2-hero__turn-copy::before,
.v2-orbit__intro::before,
.v2-orbit__copy::before,
.v2-orbit__satcard::before,
.v2-track__caption::before,
.lst-track__caption::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, #7fe3ff, transparent) top / 60% 2px no-repeat,
    linear-gradient(#7fe3ff, #7fe3ff) right top / 28px 2px no-repeat,
    linear-gradient(#7fe3ff, #7fe3ff) right top / 2px 28px no-repeat,
    linear-gradient(#7fe3ff, #7fe3ff) left bottom / 28px 2px no-repeat,
    linear-gradient(#7fe3ff, #7fe3ff) left bottom / 2px 28px no-repeat;
  filter: drop-shadow(0 0 4px rgba(127, 227, 255, 0.7));
}
.v2-track__caption, .lst-track__caption { position: absolute; }
/* Eyebrow als Statuschip mit Punkt */
.v2-hero__eyebrow,
.v2-orbit__intro-kicker,
.v2-orbit__copy-kicker,
.lst-track__caption-kicker,
.v2-track__caption-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.3rem 0.9rem;
  color: #7fe3ff;
  background: rgba(127, 227, 255, 0.1);
  border: 1px solid rgba(127, 227, 255, 0.4);
  border-radius: 999px;
}
.v2-hero__eyebrow::before,
.v2-orbit__intro-kicker::before,
.v2-orbit__copy-kicker::before,
.lst-track__caption-kicker::before,
.v2-track__caption-kicker::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #5dffb0;
  box-shadow: 0 0 8px #5dffb0;
  animation: hud-blink 1.8s ease-in-out infinite;
}
@keyframes hud-blink { 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) {
  .v2-hero__eyebrow::before, .lst-track__caption-kicker::before, .v2-track__caption-kicker::before { animation: none; }
}

/* Hover der Hero-Karten: Leuchtkante, Scanstrahl, Eyebrow und Titel reagieren */
.v2-hero__body,
.v2-hero__turn-copy,
.v2-orbit__intro,
.v2-orbit__copy,
.v2-orbit__satcard,
.v2-track__caption,
.lst-track__caption {
  overflow: hidden;
  transition: border-color 250ms ease, box-shadow 250ms ease;
}
.v2-hero__body::after,
.v2-hero__turn-copy::after,
.v2-orbit__intro::after,
.v2-orbit__copy::after,
.v2-orbit__satcard::after,
.v2-track__caption::after,
.lst-track__caption::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -30%;
  width: 30%;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(127, 227, 255, 0.22), transparent);
}

.v2-hero__body:hover,
.v2-hero__turn-copy:hover,
.v2-orbit__intro:hover,
.v2-orbit__copy:hover,
.v2-orbit__satcard:hover,
.v2-track__caption:hover,
.lst-track__caption:hover,
.v2-hero__body:focus-visible,
.v2-hero__turn-copy:focus-visible,
.v2-orbit__intro:focus-visible,
.v2-orbit__copy:focus-visible,
.v2-orbit__satcard:focus-visible,
.v2-track__caption:focus-visible,
.lst-track__caption:focus-visible {
  border-color: rgba(127, 227, 255, 0.85);
  box-shadow: inset 0 0 60px rgba(63, 170, 255, 0.34);
}

.v2-hero__body:hover::before,
.v2-hero__turn-copy:hover::before,
.v2-orbit__intro:hover::before,
.v2-orbit__copy:hover::before,
.v2-orbit__satcard:hover::before,
.v2-track__caption:hover::before,
.lst-track__caption:hover::before,
.v2-hero__body:focus-visible::before,
.v2-hero__turn-copy:focus-visible::before,
.v2-orbit__intro:focus-visible::before,
.v2-orbit__copy:focus-visible::before,
.v2-orbit__satcard:focus-visible::before,
.v2-track__caption:focus-visible::before,
.lst-track__caption:focus-visible::before { filter: drop-shadow(0 0 9px rgba(127, 227, 255, 1)); }

.v2-hero__body:hover::after,
.v2-hero__turn-copy:hover::after,
.v2-orbit__intro:hover::after,
.v2-orbit__copy:hover::after,
.v2-orbit__satcard:hover::after,
.v2-track__caption:hover::after,
.lst-track__caption:hover::after,
.v2-hero__body:focus-visible::after,
.v2-hero__turn-copy:focus-visible::after,
.v2-orbit__intro:focus-visible::after,
.v2-orbit__copy:focus-visible::after,
.v2-orbit__satcard:focus-visible::after,
.v2-track__caption:focus-visible::after,
.lst-track__caption:focus-visible::after { animation: hud-scan 1100ms ease-out 1; }
@keyframes hud-scan { 0% { left: -30%; opacity: 1; } 100% { left: 100%; opacity: 1; } }
.v2-hero__eyebrow, .lst-track__caption-kicker, .v2-track__caption-kicker { transition: background-color 250ms ease, border-color 250ms ease, letter-spacing 250ms ease; }
.v2-hero__body:hover .v2-hero__eyebrow,
.v2-track__caption:hover .v2-track__caption-kicker,
.lst-track__caption:hover .lst-track__caption-kicker { background: rgba(127, 227, 255, 0.22); border-color: #7fe3ff; letter-spacing: 0.26em; }
.v2-hero__body:hover .v2-hero__title-lead,
.lst-track__caption:hover .lst-track__caption-title { text-shadow: 0 0 22px rgba(127, 227, 255, 0.55); }
@media (prefers-reduced-motion: reduce) {
  .v2-hero__body::after, .v2-hero__turn-copy::after, .v2-track__caption::after, .lst-track__caption::after { display: none; }
}


/* =============================================================================
   Hero: Kartenwechsel im Warp
   "Moin, ich bin Marvin de Vries" und "Was wir tun" teilen sich denselben Platz.
   initHero setzt dafuer aus dem Scrollfortschritt:
     --out        0..1  Vorstellung springt in den Warp (gross, unscharf, hell)
     --in         0..1  "Was wir tun" kommt scharf aus der Tiefe heran
     --beam-*-x/a       Scanstrahl ueber der jeweiligen Karte (Lage, Staerke)
   Alles haengt allein am Scrollen und laeuft rueckwaerts genauso.
   ============================================================================= */
.v2-hero__body::after,
.v2-hero__turn-copy::after {
  background: linear-gradient(90deg, transparent, rgba(127, 227, 255, 0.4), rgba(235, 250, 255, 0.3), transparent);
}
.v2-hero__body::after {
  left: calc(-30% + var(--beam-out-x, 0) * 130%);
  opacity: var(--beam-out-a, 0);
}
.v2-hero__turn-copy::after {
  left: calc(-30% + var(--beam-in-x, 0) * 130%);
  opacity: var(--beam-in-a, 0);
}

/* Var 2 (Kommandozentrale) scrollt den Hero ungepinnt weg - dort bleibt der
   alte, ruhige Wechsel: Vorstellung blendet nach oben aus, die Karte
   "Was wir tun" blendet ein, ohne Warp und Strahlen. */
body.cockpit .v2-hero__body {
  opacity: calc(1 - var(--turn, 0) * 1.35);
  transform: translateY(calc(var(--turn, 0) * -7vh));
  filter: none;
}
body.cockpit .v2-hero__turn-copy {
  opacity: var(--in, 0);
  transform: none;
  filter: none;
}
body.cockpit .v2-hero__body::after,
body.cockpit .v2-hero__turn-copy::after { display: none; }


/* "Was wir tun" steht fest in der Karte: kein Einfliegen und Wackeln der
   einzelnen Woerter, auch der Text darunter blendet nicht separat ein. Der
   Auftritt kommt allein von der Karte (--in, siehe Warp-Block). */
.v2-hero__turn-copy .v2-turn__word,
.v2-hero__turn-copy .v2-turn__lead {
  opacity: 1;
  transform: none;
  will-change: auto;
}


/* =============================================================================
   Ein Hintergrund fuer die ganze Startseite
   Lichter und Sterne liegen EINMAL fest am Viewport hinter allem, statt in
   jedem Abschnitt neu zu beginnen (Hero-Grund, gepinnte Huelle, Sektions-
   lichter). Frueher endete der Hero-Grund an seiner Unterkante hart, und die
   Huelle blendete ihr eigenes Licht erst spaeter ein - dazwischen stand
   eine sichtbare waagerechte Kante. Jetzt gibt es nur noch Uebergaenge der
   Sektionslichter, keine eigene Flaeche pro Abschnitt. Die Sterne driften
   mit dem Scrollen (--star-scroll, siehe initScrollHint).
   ============================================================================= */
body.v2:not(.v2-page):not(.cockpit)::before,
body.v2:not(.v2-page):not(.cockpit)::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
body.v2:not(.v2-page):not(.cockpit)::before {
  background:
    radial-gradient(90% 70% at 22% 40%, var(--v2-space) 0%, transparent 62%),
    radial-gradient(70% 60% at 82% 66%, rgba(47, 111, 237, 0.16) 0%, transparent 70%);
}
body.v2:not(.v2-page):not(.cockpit)::after {
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, rgba(255,255,255,.75), transparent),
    radial-gradient(1.2px 1.2px at 78% 14%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.8px 1.8px at 44% 68%, rgba(255,255,255,.65), transparent),
    radial-gradient(1.1px 1.1px at 88% 74%, rgba(255,255,255,.45), transparent),
    radial-gradient(1.4px 1.4px at 28% 86%, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 62% 40%, rgba(255,255,255,.4), transparent),
    radial-gradient(1.6px 1.6px at 6% 58%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.2px 1.2px at 94% 44%, rgba(255,255,255,.4), transparent);
  background-size: 640px 480px;
  background-position: 0 calc(var(--star-scroll, 0) * 1px);
  opacity: 0.85;
}
body.v2:not(.v2-page):not(.cockpit) .v2-hero,
body.v2:not(.v2-page):not(.cockpit) .v2-space,
body.v2:not(.v2-page):not(.cockpit) .v2-space__bg { background: none; }
body.v2:not(.v2-page):not(.cockpit) .v2-stars,
body.v2:not(.v2-page):not(.cockpit) .v2-space__stars { display: none; }

/* Ausgangs-Karte der Orbit-Buehne: steht links, wo spaeter "Sechs Hebel"
   steht, und kommt gemeinsam mit dem Planeten hoch (--intro, siehe
   initOrbit). Optik wie die Hero-Karten (Listen weiter oben). */
.v2-orbit__intro {
  position: absolute;
  z-index: 5;
  left: 21.5%;
  top: calc(50% - 11rem);
  translate: -50% 0;
  width: min(30rem, 36vw);
  display: grid;
  gap: 0.9rem;
  justify-items: start;
  /* Rein: von unten, unscharf (--intro). Raus: gross und unscharf
     (--intro-out) - und danach erst kommt die naechste Karte, es ueberlappen
     nie zwei. */
  opacity: var(--intro, 0);
  transform: translateY(calc((1 - var(--intro, 0)) * 48px)) scale(calc(1 + var(--intro-out, 0) * 0.06));
  filter: blur(calc(var(--intro-out, 0) * 8px));
  pointer-events: none;
}
.v2-orbit__intro-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.2rem, min(2.4vw, 3.6vh), 2.2rem);
  line-height: 1.12;
  color: #fff;
}
.v2-orbit__intro-text {
  margin: 0;
  color: var(--v2-text-dim);
  font-size: clamp(0.82rem, min(1.05vw, 1.9vh), 1.05rem);
  line-height: 1.65;
}
@media (max-width: 900px) {
  .v2-orbit__intro { display: none; }
}

/* Alle Karten der Startseiten-Buehne stehen am selben Punkt und gleich breit:
   Ausgangs-Karte, "Sechs Hebel" (siehe oben) und die Erklaer-Karte der
   einzelnen Leistungen. Oberkante fest, die Hoehe richtet sich nach dem Text. */
@media (min-width: 901px) {
  .v2-track__caption {
    left: 21.5%;
    top: calc(50% - 11rem);
    translate: -50% 0;
    width: min(30rem, 36vw);
    max-width: none;
  }
}

/* Abstaende zwischen den Buehnen der Startseite
   Jede Buehne klebt fuer ihre Choreografie am Viewport und rollt danach in
   eigener Hoehe wieder hinaus - in diesem Auslauf stand bisher nur Hintergrund,
   weil die naechste Buehne erst darunter begann (rund ein Bildschirm leerer
   Scrollweg). Die folgende Buehne rueckt deshalb in den Auslauf der vorigen:
   Orbit um 30svh in den Hero (ueber den Aussenabstand der Hintergrundebene
   davor, siehe unten), Ausklang um 85svh in den Orbit. */
.v2-space__bg { margin-bottom: -130svh; }   /* 100svh Eigenhoehe + 30svh: aneinanderstossende Aussenabstaende fallen zusammen, ein eigener Abstand an .v2-journey wuerde verschluckt */
.v2-outro { margin-top: -85svh; }


/* =============================================================================
   Flache Fenster (Laptops, Fenster mit Leiste): Karten nach Hoehe skalieren
   Die Hero-Karte ist ~700px hoch und steht gepinnt in EINER Buehnenhoehe -
   unter rund 850px Fensterhoehe lief sie oben unter die Kopfleiste und unten
   ueber den Scroll-Hinweis hinaus. Schrift und Abstaende folgen jetzt der
   Hoehe; unter 820px entfaellt der zweite Absatz (er wiederholt, was die
   Leistungen ohnehin zeigen - wie schon auf dem Handy), unter 620px auch die
   Titelzeile unter dem Namen.
   ============================================================================= */
@media (min-width: 901px) {
  .v2-hero__text p { font-size: clamp(0.84rem, 1.78vh, 1rem); }
  .v2-hero__body { padding-block: clamp(0.9rem, 2.4vh, 2rem); }
  .v2-hero__eyebrow { margin-bottom: clamp(0.3rem, 1.2vh, var(--space-sm)); }
  .v2-hero__title { margin-bottom: clamp(0.5rem, 1.8vh, var(--space-md)); }
  .v2-hero__stage { padding-bottom: clamp(3rem, 12vh, 6rem); }
  /* Anker der Orbit-Karten: folgt der Hoehe, damit die Unterkante im Bild bleibt */
  .v2-orbit__intro, .v2-orbit__copy, .lst-track__caption { top: calc(50% - min(11rem, 20vh)); gap: clamp(0.5rem, 1.6vh, 0.9rem); }
  .v2-orbit__intro, .v2-orbit__copy, .v2-track__caption { padding-block: clamp(0.8rem, 2.2vh, 2rem); }
}
@media (min-width: 901px) and (max-height: 820px) {
  .v2-hero__text p { margin-bottom: 0; }
}
@media (min-width: 901px) and (max-height: 620px) {
  .v2-hero__title-rest { font-size: 0.8rem; }
  .v2-orbit__copy .v2-orbit__now { display: none; }
}

/* Erklaer-Karte je Trabant: zwischen Text-Karte (links) und Planet, gleiche
   Oberkante wie die anderen Karten. Wechsel ueber --now: scharf bei 1. */
.v2-orbit__satcard {
  position: absolute;
  z-index: 6;
  display: grid;
  gap: 0.5rem;
  justify-items: start;
  opacity: var(--now, 0);
  transform: scale(calc(0.94 + var(--now, 0) * 0.06));
  filter: blur(calc((1 - var(--now, 0)) * 8px));
  pointer-events: none;
}
.v2-orbit__satcard .v2-orbit__now-kicker { color: var(--now-tint, var(--v2-core)); }
.v2-orbit__satcard .v2-orbit__now-title { font-size: clamp(1rem, min(1.35vw, 2.3vh), 1.3rem); }
.v2-orbit__satcard .v2-orbit__now-text { font-size: clamp(0.8rem, min(1vw, 1.8vh), 0.98rem); }
.v2-orbit__satcard { border-color: var(--now-tint, rgba(127, 227, 255, 0.3)); }
@media (min-width: 901px) {
  .v2-orbit__satcard {
    left: calc(21.5% + min(15rem, 18vw) + 1rem);
    top: calc(50% - min(11rem, 20vh));
    width: min(17rem, 19vw);
    padding-block: clamp(0.8rem, 2.2vh, 1.4rem);
  }
}
@media (max-width: 900px) {
  .v2-orbit__satcard { display: none; }
}

/* Kleinere Bildschirme (Laptop, schmale Fenster): Karten hoch statt breit.
   Links vom Planeten ist nur rund ein Drittel der Breite frei; die Erklaer-
   Karte stand bisher rechts neben der Text-Karte und deckte die Trabanten ab.
   Beide Karten werden schmaler und ruecken nach links, die Erklaer-Karte endet
   vor der aeussersten Bahn (rund 43% der Fensterbreite). Die Hoehe richtet
   sich nach dem Text. */
@media (min-width: 901px) and (max-width: 1400px) {
  .v2-orbit__intro,
  .v2-orbit__copy,
  .v2-track__caption,
  .lst-track__caption {
    left: 13%;
    width: min(30rem, 22vw);
  }
  .v2-orbit__satcard {
    left: 25%;
    width: min(17rem, 16.5vw);
  }
  .v2-orbit__intro-title,
  .v2-orbit__title { font-size: clamp(1.1rem, min(2vw, 3.4vh), 1.7rem); }
  .v2-orbit__intro-text,
  .v2-orbit__lead { font-size: clamp(0.8rem, min(1.2vw, 1.9vh), 0.98rem); line-height: 1.55; }
  .v2-orbit__satcard .v2-orbit__now-title { font-size: clamp(0.95rem, min(1.3vw, 2.2vh), 1.15rem); }
  .v2-orbit__satcard .v2-orbit__now-text { font-size: clamp(0.78rem, min(1.15vw, 1.8vh), 0.92rem); line-height: 1.5; }
}


/* =============================================================================
   Ausklang, FAQ und Aufruf im Statuskarten-Look der Startseite
   Dieselbe Bauform wie die Hero-Karten: dunkle Glasflaeche mit Scanlinien,
   Leuchtkante, Eckmarken und zwei abgeschnittenen Ecken.
   ============================================================================= */
:root {
  --hud-glass:
    repeating-linear-gradient(0deg, rgba(127, 227, 255, 0.045) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, rgba(4, 24, 52, 0.88), rgba(1, 10, 26, 0.93));
  --hud-corners:
    linear-gradient(90deg, transparent, #7fe3ff, transparent) top / 60% 2px no-repeat,
    linear-gradient(#7fe3ff, #7fe3ff) right top / 28px 2px no-repeat,
    linear-gradient(#7fe3ff, #7fe3ff) right top / 2px 28px no-repeat,
    linear-gradient(#7fe3ff, #7fe3ff) left bottom / 28px 2px no-repeat,
    linear-gradient(#7fe3ff, #7fe3ff) left bottom / 2px 28px no-repeat;
}

/* ---- Die drei Schritte ---- */
.v2-step {
  overflow: hidden;
  padding: clamp(1.4rem, 2.4vw, 2.2rem) clamp(1.3rem, 2.4vw, 2.2rem);
  border: 1px solid rgba(127, 227, 255, 0.3);
  border-radius: 0;
  background: var(--hud-glass);
  box-shadow: inset 0 0 40px rgba(41, 140, 230, 0.16);
  clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px);
  transition: border-color 250ms ease, box-shadow 250ms ease, scale 320ms var(--ease-out);
}
/* Eckmarken (ersetzen den umlaufenden Lichtrand der alten Karte) */
.v2-step::before {
  inset: 0;
  padding: 0;
  border-radius: 0;
  opacity: 1;
  -webkit-mask: none;
  mask: none;
  background: var(--hud-corners);
  filter: drop-shadow(0 0 4px rgba(127, 227, 255, 0.7));
  animation: none;
}
/* Scanstrahl beim Ueberfahren; die fruehere Verbindungslinie entfaellt */
.v2-step:not(:last-child)::after,
.v2-step::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -30%;
  width: 30%;
  height: auto;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(127, 227, 255, 0.22), transparent);
}
.v2-step__num {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.3rem 0.9rem;
  margin-bottom: 1rem;
  color: #7fe3ff;
  background: rgba(127, 227, 255, 0.1);
  border: 1px solid rgba(127, 227, 255, 0.4);
  border-radius: 999px;
  transition: background-color 250ms ease, border-color 250ms ease, letter-spacing 250ms ease;
}
.v2-step__num::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #5dffb0;
  box-shadow: 0 0 8px #5dffb0;
  animation: hud-blink 1.8s ease-in-out infinite;
}
@media (hover: hover) {
  .v2-step:hover {
    scale: 1.02;
    border-color: rgba(127, 227, 255, 0.85);
    box-shadow: inset 0 0 60px rgba(63, 170, 255, 0.34);
  }
  .v2-step:hover::before { opacity: 1; animation: none; filter: drop-shadow(0 0 9px rgba(127, 227, 255, 1)); }
  
  .v2-step:hover::after,
.v2-step:focus-visible::after { animation: hud-scan 1100ms ease-out 1; }
  .v2-step:hover .v2-step__num { background: rgba(127, 227, 255, 0.22); border-color: #7fe3ff; letter-spacing: 0.26em; }
}
@media (prefers-reduced-motion: reduce) {
  .v2-step::after { display: none; }
  .v2-step__num::before { animation: none; }
}

/* ---- FAQ: Fragen als Datensaetze eines Bordcomputers ---- */
.v2-faq { counter-reset: faq; max-width: 58rem; }
.v2-faq__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  letter-spacing: -0.01em;
}
.v2-faq__title::before,
.v2-faq__title::after {
  content: "";
  flex: 1 1 0;
  max-width: 9rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(127, 227, 255, 0.7));
}
.v2-faq__title::after { transform: scaleX(-1); }
.v2-faq__item {
  position: relative;
  counter-increment: faq;
  margin-bottom: 0.9rem;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(127, 227, 255, 0.24);
  background: var(--hud-glass);
  box-shadow: inset 0 0 30px rgba(41, 140, 230, 0.12);
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
  transition: border-color 250ms ease, box-shadow 250ms ease;
}
.v2-faq__item:last-child { border-bottom: 1px solid rgba(127, 227, 255, 0.24); }
/* Leuchtkante links: bei Hover und im offenen Zustand ein Balken, der von oben herunterlaeuft */
.v2-faq__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, #7fe3ff, #4db4ff);
  box-shadow: 0 0 12px rgba(127, 227, 255, 0.8);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 380ms var(--ease-out);
}

.v2-faq__item[open]::before,
.v2-faq__item:hover::before,
.v2-faq__item:focus-visible::before { transform: scaleY(1); }

.v2-faq__item:hover,
.v2-faq__item:focus-visible { border-color: rgba(127, 227, 255, 0.6); }
.v2-faq__item[open] {
  border-color: rgba(127, 227, 255, 0.7);
  box-shadow: inset 0 0 50px rgba(63, 170, 255, 0.26), 0 0 28px rgba(41, 140, 230, 0.18);
}
.v2-faq__summary {
  align-items: center;
  gap: 1.1rem;
  padding: clamp(1rem, 2.4vh, 1.35rem) clamp(1rem, 2.4vw, 1.6rem);
}
/* Laufende Nummer als Statuschip vor der Frage */
.v2-faq__summary::before {
  content: counter(faq, decimal-leading-zero);
  flex: none;
  padding: 0.25rem 0.7rem;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #7fe3ff;
  background: rgba(127, 227, 255, 0.1);
  border: 1px solid rgba(127, 227, 255, 0.4);
  border-radius: 999px;
}
.v2-faq__item h3 { flex: 1; font-size: clamp(1rem, 1.7vw, 1.2rem); }
.v2-faq__summary::after { margin-top: 0; }
.v2-faq__item[open] h3 { color: #fff; text-shadow: 0 0 18px rgba(127, 227, 255, 0.45); }
.v2-faq__item p {
  margin: 0;
  padding: 0 clamp(1rem, 2.4vw, 1.6rem) clamp(1.1rem, 2.6vh, 1.5rem) calc(clamp(1rem, 2.4vw, 1.6rem) + 3.4rem);
  border-radius: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  max-width: none;
}
.v2-faq__item[open] p { animation: faq-in 380ms var(--ease-out) both; }
@keyframes faq-in { from { opacity: 0; transform: translateY(-8px); } }
@media (max-width: 640px) {
  .v2-faq__summary::before { display: none; }
  .v2-faq__item p { padding-left: clamp(1rem, 2.4vw, 1.6rem); }
}
@media (prefers-reduced-motion: reduce) {
  .v2-faq__item[open] p { animation: none; }
  .v2-faq__item::before { transition: none; }
}

/* ---- Aufruf "Bereit fuer mehr Sichtbarkeit?" ---- */
.v2-final__cta {
  position: relative;
  overflow: hidden;
  max-width: 58rem;
  gap: clamp(1.4rem, 3vw, 2.4rem);
  padding: clamp(1.8rem, 4.4vh, 2.8rem) clamp(1.6rem, 4vw, 3rem);
  border: 1px solid rgba(127, 227, 255, 0.35);
  border-radius: 0;
  background:
    radial-gradient(60% 120% at 12% 0%, rgba(77, 180, 255, 0.22), transparent 70%),
    var(--hud-glass);
  box-shadow: inset 0 0 60px rgba(41, 140, 230, 0.2), 0 0 44px rgba(41, 140, 230, 0.14);
  clip-path: polygon(26px 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%, 0 26px);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.v2-final__cta::before {
  inset: 0;
  padding: 0;
  border-radius: 0;
  opacity: 1;
  -webkit-mask: none;
  mask: none;
  background: var(--hud-corners);
  filter: drop-shadow(0 0 5px rgba(127, 227, 255, 0.75));
  animation: none;
}
@media (hover: hover) {
  .v2-final__cta:hover { scale: 1; border-color: rgba(127, 227, 255, 0.8); box-shadow: inset 0 0 70px rgba(63, 170, 255, 0.3), 0 0 56px rgba(41, 140, 230, 0.24); }
  .v2-final__cta:hover::before { animation: none; filter: drop-shadow(0 0 10px rgba(127, 227, 255, 1)); }
}
.v2-final__cta-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.9rem;
  padding: 0.3rem 0.9rem;
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #7fe3ff;
  background: rgba(127, 227, 255, 0.1);
  border: 1px solid rgba(127, 227, 255, 0.4);
  border-radius: 999px;
}
.v2-final__cta-eyebrow::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #5dffb0;
  box-shadow: 0 0 8px #5dffb0;
  animation: hud-blink 1.8s ease-in-out infinite;
}
.v2-final__cta h2 { font-size: clamp(1.6rem, 3.4vw, 2.5rem); line-height: 1.08; letter-spacing: -0.015em; }
.v2-final__cta h2 em {
  font-style: normal;
  background: linear-gradient(100deg, var(--v2-core) 0%, var(--v2-core-mid) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.v2-final__cta p { max-width: 40ch; }
.v2-final__cta-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.1rem 0 0;
  padding: 0;
  list-style: none;
}
.v2-final__cta-facts li {
  padding: 0.25rem 0.75rem;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(234, 246, 251, 0.78);
  border: 1px solid rgba(127, 227, 255, 0.24);
}
/* Knopf wie die Hero-Aktion: schraege Kanten, Grossbuchstaben, Lichtpunkt */
.v2-final__cta .cta-orbit {
  --orbit-ring: 2px;
  --orbit-light: 127, 227, 255;
  --orbit-fill: linear-gradient(90deg, #7fe3ff, #4db4ff);
  --orbit-fill-hover: linear-gradient(90deg, #c2f4ff, #8fd6ff);
  --hud-cut: 14px;
  height: 56px;
  border-radius: 0;
  clip-path: polygon(var(--hud-cut) 0, 100% 0, calc(100% - var(--hud-cut)) 100%, 0 100%);
  font-family: var(--font-display, "Space Grotesk", sans-serif);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-inline: calc(var(--hud-cut) + 1.6rem);
  transition: filter 220ms ease, transform 220ms ease;
}
.v2-final__cta .cta-orbit::before { border-radius: 0; background: conic-gradient(rgba(127, 227, 255, 0.35) 0deg, rgba(127, 227, 255, 0.35) 300deg, #fff 355deg, rgba(127, 227, 255, 0.35) 360deg); }
.v2-final__cta .cta-orbit::after {
  border-radius: 0;
  clip-path: polygon(calc(var(--hud-cut) - 2px) 0, 100% 0, calc(100% - var(--hud-cut) + 2px) 100%, 0 100%);
  transition: filter 220ms ease;
}
.v2-final__cta .cta-orbit .cta-orbit__label { color: #021226; transition: letter-spacing 220ms ease; }
.v2-final__cta .cta-orbit:hover,
.v2-final__cta .cta-orbit:focus-visible { color: #021226; transform: translateY(-1px); filter: drop-shadow(0 0 10px rgba(127, 227, 255, 0.75)); }
.v2-final__cta .cta-orbit:hover .cta-orbit__label,
.v2-final__cta .cta-orbit:focus-visible .cta-orbit__label { color: #021226; letter-spacing: 0.18em; }


/* =============================================================================
   bestellung.html im Statuskarten-Look der Startseite
   Gleiche Bauform wie die Hero-Karten: Glasflaeche mit Scanlinien, Leuchtkante,
   Eckmarken, abgeschnittene Ecken, Statuschips, schraege Knoepfe.
   Nutzt --hud-glass / --hud-corners aus dem Block "Ausklang, FAQ und Aufruf".
   ============================================================================= */

/* Vertrauensleiste: zwei Statuschips statt heller Balken */
body.v2.v2-page .trustbar {
  background: transparent;
  border-bottom: 0;
}
body.v2.v2-page .trustbar__inner { justify-content: center; gap: 0.8rem; flex-wrap: wrap; }
body.v2.v2-page .trustbar__inner > span:not(.trustbar__dot) {
  padding: 0.3rem 0.9rem;
  color: #7fe3ff;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  background: rgba(127, 227, 255, 0.1);
  border: 1px solid rgba(127, 227, 255, 0.4);
  border-radius: 999px;
}
body.v2.v2-page .trustbar__inner strong { color: #fff; }
body.v2.v2-page .trustbar__dot { display: none; }

/* Einleitung */
body.v2.v2-page .order__intro .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.3rem 0.9rem;
  color: #7fe3ff;
  background: rgba(127, 227, 255, 0.1);
  border: 1px solid rgba(127, 227, 255, 0.4);
  border-radius: 999px;
}
body.v2.v2-page .order__intro .eyebrow::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #5dffb0;
  box-shadow: 0 0 8px #5dffb0;
  animation: hud-blink 1.8s ease-in-out infinite;
}
body.v2.v2-page .order__intro .section__title {
  letter-spacing: -0.015em;
  margin-block: 0.9rem 1rem;
}
body.v2.v2-page .order__intro .accent {
  background: linear-gradient(100deg, var(--v2-core) 0%, var(--v2-core-mid) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Alle Karten: Glas, Leuchtkante, Eckmarken */
body.v2.v2-page .order__beratung,
body.v2.v2-page .order__block,
body.v2.v2-page .summe,
body.v2.v2-page .order__done {
  position: relative;
  overflow: hidden;
  background: var(--hud-glass);
  border: 1px solid rgba(127, 227, 255, 0.3);
  border-radius: 0;
  box-shadow: inset 0 0 40px rgba(41, 140, 230, 0.16);
  clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px);
  transition: border-color 250ms ease, box-shadow 250ms ease;
}
body.v2.v2-page .order__beratung::before,
body.v2.v2-page .order__block::before,
body.v2.v2-page .summe::before,
body.v2.v2-page .order__done::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--hud-corners);
  filter: drop-shadow(0 0 4px rgba(127, 227, 255, 0.7));
}

body.v2.v2-page .order__block:hover,
body.v2.v2-page .order__block:focus-within,
body.v2.v2-page .order__beratung:hover,
body.v2.v2-page .order__beratung:focus-visible {
  border-color: rgba(127, 227, 255, 0.75);
  box-shadow: inset 0 0 60px rgba(63, 170, 255, 0.28);
}
body.v2.v2-page .order__beratung { padding: clamp(1.2rem, 2vw, 1.8rem); }
body.v2.v2-page .order__beratung-titel { color: #fff; font-family: var(--font-display); font-size: 1.1rem; }

/* Kopfzeile je Block: Nummer als Statuschip */
body.v2.v2-page .order__block-title {
  position: relative;
  z-index: 2;
  background: rgba(127, 227, 255, 0.06);
  border-bottom: 1px solid rgba(127, 227, 255, 0.22);
  font-family: var(--font-display);
  letter-spacing: 0.01em;
}
body.v2.v2-page .order__block-title span:first-child {
  display: inline-grid;
  place-items: center;
  min-width: 2rem;
  height: 2rem;
  border-radius: 999px;
  color: #7fe3ff;
  background: rgba(127, 227, 255, 0.1);
  border: 1px solid rgba(127, 227, 255, 0.5);
  box-shadow: 0 0 12px rgba(127, 227, 255, 0.25);
  font-size: 0.85rem;
}
body.v2.v2-page .order__block-body { position: relative; z-index: 2; }

/* Leistungs- und Budgetkacheln */
body.v2.v2-page .svc-pick,
body.v2.v2-page .budget-opt span {
  border: 1px solid rgba(127, 227, 255, 0.28);
  border-radius: 0;
  background: rgba(4, 16, 26, 0.45);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  transition: border-color 220ms ease, background-color 220ms ease, box-shadow 220ms ease;
}
body.v2.v2-page .svc-pick:hover,
body.v2.v2-page .budget-opt:hover span {
  border-color: rgba(127, 227, 255, 0.8);
  box-shadow: inset 0 0 26px rgba(63, 170, 255, 0.22);
}
body.v2.v2-page .svc-pick:has(input:checked),
body.v2.v2-page .budget-opt input:checked + span {
  border-color: #7fe3ff;
  background: linear-gradient(160deg, rgba(127, 227, 255, 0.2) 0%, rgba(7, 28, 40, 0.9) 100%);
  box-shadow: inset 0 0 0 1px #7fe3ff, inset 0 0 34px rgba(63, 170, 255, 0.3);
}
body.v2.v2-page .svc-pick__title { font-family: var(--font-display); }
body.v2.v2-page .svc-pick__box {
  border-radius: 3px;
  border-color: rgba(127, 227, 255, 0.55);
}
body.v2.v2-page .svc-pick input:checked + .svc-pick__box {
  background: #7fe3ff;
  border-color: #7fe3ff;
  box-shadow: 0 0 12px rgba(127, 227, 255, 0.8);
}
body.v2.v2-page .svc-pick input:checked + .svc-pick__box::after { border-color: #021226; }

/* Formularfelder */
body.v2.v2-page .order .field label {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7fe3ff;
}
body.v2.v2-page .order .field--check label {
  font-size: 0.875rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--v2-text-dim);
}
body.v2.v2-page .order .field input[type="text"],
body.v2.v2-page .order .field input[type="email"],
body.v2.v2-page .order .field input[type="tel"],
body.v2.v2-page .order .field textarea {
  color: var(--v2-text);
  background: rgba(1, 10, 26, 0.65);
  border: 1px solid rgba(127, 227, 255, 0.28);
  border-radius: 0;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: border-color 220ms ease, box-shadow 220ms ease, background-color 220ms ease;
}
body.v2.v2-page .order .field input:hover,
body.v2.v2-page .order .field textarea:hover { border-color: rgba(127, 227, 255, 0.6); }
body.v2.v2-page .order .field input:focus,
body.v2.v2-page .order .field textarea:focus {
  outline: none;
  border-color: #7fe3ff;
  background: rgba(4, 24, 52, 0.75);
  box-shadow: inset 0 0 22px rgba(63, 170, 255, 0.28);
}

/* Zusammenfassung: Statusleiste mit schraegem Absende-Knopf */
body.v2.v2-page .summe {
  border-color: rgba(127, 227, 255, 0.5);
  box-shadow: inset 0 0 50px rgba(41, 140, 230, 0.2);
}
body.v2.v2-page .summe > * { position: relative; z-index: 2; }
body.v2.v2-page .summe__toggle { font-family: var(--font-display); }
body.v2.v2-page .summe__wert {
  min-width: 2.6rem;
  padding: 0.1rem 0.8rem;
  text-align: center;
  font-size: 1.2rem;
  color: #7fe3ff;
  background: rgba(127, 227, 255, 0.1);
  border: 1px solid rgba(127, 227, 255, 0.45);
  border-radius: 999px;
}
body.v2.v2-page .summe__detail li::before { background: #5dffb0; box-shadow: 0 0 8px #5dffb0; }
body.v2.v2-page .summe__cta.btn--light {
  --hud-cut: 14px;
  color: #021226;
  background: linear-gradient(90deg, #7fe3ff, #4db4ff);
  border: 0;
  border-radius: 0;
  clip-path: polygon(var(--hud-cut) 0, 100% 0, calc(100% - var(--hud-cut)) 100%, 0 100%);
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: filter 220ms ease, letter-spacing 220ms ease, opacity 220ms ease;
}

body.v2.v2-page .summe__cta.btn--light:hover:not(:disabled),
body.v2.v2-page .summe__cta.btn--light:focus-visible:not(:disabled) {
  background: linear-gradient(90deg, #c2f4ff, #8fd6ff);
  transform: none;
  letter-spacing: 0.18em;
  filter: drop-shadow(0 0 10px rgba(127, 227, 255, 0.75));
}
body.v2.v2-page .summe__cta.btn--light:disabled {
  opacity: 0.4;
  filter: saturate(0.5);
}

/* "Lieber direkt anrufen": zweite Aktion im Stil der Hero-Knoepfe (dunkles Glas) */
body.v2.v2-page .order__beratung .cta-orbit {
  --orbit-ring: 2px;
  --orbit-light: 127, 227, 255;
  --orbit-fill: linear-gradient(180deg, #073250, #031a2e);
  --orbit-fill-hover: linear-gradient(90deg, #7fe3ff, #4db4ff);
  --hud-cut: 14px;
  border-radius: 0;
  clip-path: polygon(var(--hud-cut) 0, 100% 0, calc(100% - var(--hud-cut)) 100%, 0 100%);
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-inline: calc(var(--hud-cut) + 1.1rem);
  transition: filter 220ms ease;
}
body.v2.v2-page .order__beratung .cta-orbit::before { border-radius: 0; background: conic-gradient(rgba(127, 227, 255, 0.35) 0deg, rgba(127, 227, 255, 0.35) 300deg, #fff 355deg, rgba(127, 227, 255, 0.35) 360deg); }
body.v2.v2-page .order__beratung .cta-orbit::after {
  border-radius: 0;
  clip-path: polygon(calc(var(--hud-cut) - 2px) 0, 100% 0, calc(100% - var(--hud-cut) + 2px) 100%, 0 100%);
}
body.v2.v2-page .order__beratung .cta-orbit .cta-orbit__label { color: #eaf6fb; transition: letter-spacing 220ms ease; }
body.v2.v2-page .order__beratung .cta-orbit:hover,
body.v2.v2-page .order__beratung .cta-orbit:focus-visible { filter: drop-shadow(0 0 10px rgba(127, 227, 255, 0.75)); }
body.v2.v2-page .order__beratung .cta-orbit:hover .cta-orbit__label,
body.v2.v2-page .order__beratung .cta-orbit:focus-visible .cta-orbit__label { color: #021226; letter-spacing: 0.18em; }

/* Bestaetigung */
body.v2.v2-page .order__done { border-color: rgba(93, 255, 176, 0.6); }
body.v2.v2-page .order__done::before { filter: drop-shadow(0 0 4px rgba(93, 255, 176, 0.7)); }

@media (prefers-reduced-motion: reduce) {
  body.v2.v2-page .order__intro .eyebrow::before { animation: none; }
}

/* Die Zusammenfassung bleibt am unteren Rand haften (siehe style.css) */
body.v2.v2-page .summe { position: sticky; }


/* =============================================================================
   kontakt.html im Statuskarten-Look der Startseite
   Dieselbe Bauform wie bestellung.html: Glasflaeche mit Scanlinien, Eckmarken,
   abgeschnittene Ecken, Statuschips, schraege Knoepfe. Greift nur auf Seiten
   mit .contact-grid (:has), damit andere Seiten unberuehrt bleiben.
   ============================================================================= */
body.v2.v2-page main:has(.contact-grid) .section__head .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.3rem 0.9rem;
  color: #7fe3ff;
  background: rgba(127, 227, 255, 0.1);
  border: 1px solid rgba(127, 227, 255, 0.4);
  border-radius: 999px;
}
body.v2.v2-page main:has(.contact-grid) .section__head .eyebrow::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #5dffb0;
  box-shadow: 0 0 8px #5dffb0;
  animation: hud-blink 1.8s ease-in-out infinite;
}
body.v2.v2-page main:has(.contact-grid) .section__title {
  letter-spacing: -0.015em;
  margin-block: 0.9rem 1rem;
}

/* Grosse Karten */
body.v2.v2-page .contact-card,
body.v2.v2-page .booking.form,
body.v2.v2-page .contact__map {
  position: relative;
  overflow: hidden;
  background: var(--hud-glass);
  border: 1px solid rgba(127, 227, 255, 0.3);
  border-radius: 0;
  box-shadow: inset 0 0 40px rgba(41, 140, 230, 0.16);
  clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px);
  transition: border-color 250ms ease, box-shadow 250ms ease;
}
body.v2.v2-page .contact-card::before,
body.v2.v2-page .booking.form::before,
body.v2.v2-page .contact__map::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: var(--hud-corners);
  filter: drop-shadow(0 0 4px rgba(127, 227, 255, 0.7));
}

body.v2.v2-page .contact-card:hover,
body.v2.v2-page .booking.form:hover,
body.v2.v2-page .booking.form:focus-within,
body.v2.v2-page .contact__map:hover,
body.v2.v2-page .contact-card:focus-visible,
body.v2.v2-page .contact__map:focus-visible {
  border-color: rgba(127, 227, 255, 0.75);
  box-shadow: inset 0 0 60px rgba(63, 170, 255, 0.28);
}

/* Eckdaten: Icons als leuchtende Marker, Titel als Kleinschrift-Label */
body.v2.v2-page .contact-info__icon {
  border-radius: 0;
  background: rgba(127, 227, 255, 0.1);
  border: 1px solid rgba(127, 227, 255, 0.45);
  box-shadow: 0 0 12px rgba(127, 227, 255, 0.2);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
body.v2.v2-page .contact-info__item h3 {
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7fe3ff;
}

/* Terminarten und Uhrzeiten als Kacheln mit abgeschnittener Ecke */
body.v2.v2-page .booking-type,
body.v2.v2-page .booking__slot {
  border: 1px solid rgba(127, 227, 255, 0.28);
  border-radius: 0;
  background: rgba(4, 16, 26, 0.45);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  transition: border-color 220ms ease, background-color 220ms ease, box-shadow 220ms ease, color 220ms ease;
}
body.v2.v2-page .booking-type:hover,
body.v2.v2-page .booking__slot:hover {
  border-color: rgba(127, 227, 255, 0.8);
  box-shadow: inset 0 0 26px rgba(63, 170, 255, 0.22);
}
body.v2.v2-page .booking-type:has(input:checked) {
  border-color: #7fe3ff;
  background: linear-gradient(160deg, rgba(127, 227, 255, 0.2) 0%, rgba(7, 28, 40, 0.9) 100%);
  box-shadow: inset 0 0 0 1px #7fe3ff, inset 0 0 34px rgba(63, 170, 255, 0.3);
}
body.v2.v2-page .booking-type__name { font-family: var(--font-display); }
body.v2.v2-page .booking-type__meta { color: #7fe3ff; }
body.v2.v2-page .booking__slot.is-selected {
  background: linear-gradient(90deg, #7fe3ff, #4db4ff);
  border-color: #7fe3ff;
  color: #021226;
  box-shadow: 0 0 14px rgba(127, 227, 255, 0.5);
}

/* Fortschritt: Segmente als Leuchtbalken */
body.v2.v2-page .booking__progress li {
  font-family: var(--font-display);
  letter-spacing: 0.14em;
}
body.v2.v2-page .booking__progress li.is-current,
body.v2.v2-page .booking__progress li.is-done { color: #7fe3ff; }
body.v2.v2-page .booking__progress li.is-current { text-shadow: 0 0 12px rgba(127, 227, 255, 0.6); }
body.v2.v2-page .booking__legend { font-family: var(--font-display); }

/* Kalender */
body.v2.v2-page .booking__cal {
  border: 1px solid rgba(127, 227, 255, 0.28);
  border-radius: 0;
  background: rgba(4, 16, 26, 0.45);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}
body.v2.v2-page .booking__cal-day { border-radius: 0; }
body.v2.v2-page .booking__cal-day.is-selected {
  background: linear-gradient(90deg, #7fe3ff, #4db4ff);
  color: #021226;
  box-shadow: 0 0 14px rgba(127, 227, 255, 0.55);
}
body.v2.v2-page .booking__cal-nav { border-radius: 0; }
body.v2.v2-page .booking__summary {
  border-radius: 0;
  border-left: 3px solid #7fe3ff;
  background: rgba(127, 227, 255, 0.1);
}

/* Formularfelder */
body.v2.v2-page .booking .field label {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7fe3ff;
}
body.v2.v2-page .booking .field--checkbox label {
  font-size: 0.875rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--v2-text-dim);
}
body.v2.v2-page .booking .field input[type="text"],
body.v2.v2-page .booking .field input[type="email"],
body.v2.v2-page .booking .field input[type="tel"],
body.v2.v2-page .booking .field textarea {
  color: var(--v2-text);
  background: rgba(1, 10, 26, 0.65);
  border: 1px solid rgba(127, 227, 255, 0.28);
  border-radius: 0;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: border-color 220ms ease, box-shadow 220ms ease, background-color 220ms ease;
}
body.v2.v2-page .booking .field input:hover,
body.v2.v2-page .booking .field textarea:hover { border-color: rgba(127, 227, 255, 0.6); }
body.v2.v2-page .booking .field input:focus,
body.v2.v2-page .booking .field textarea:focus {
  outline: none;
  border-color: #7fe3ff;
  background: rgba(4, 24, 52, 0.75);
  box-shadow: inset 0 0 22px rgba(63, 170, 255, 0.28);
}

/* Knoepfe wie die Hero-Aktionen: primaer = Cyan gefuellt, sekundaer = dunkles Glas */
body.v2.v2-page .booking .cta-orbit,
body.v2.v2-page .map-consent__btn.cta-orbit {
  --orbit-ring: 2px;
  --orbit-light: 127, 227, 255;
  --orbit-fill: linear-gradient(90deg, #7fe3ff, #4db4ff);
  --orbit-fill-hover: linear-gradient(90deg, #c2f4ff, #8fd6ff);
  --hud-cut: 14px;
  border-radius: 0;
  clip-path: polygon(var(--hud-cut) 0, 100% 0, calc(100% - var(--hud-cut)) 100%, 0 100%);
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-inline: calc(var(--hud-cut) + 1.1rem);
  transition: filter 220ms ease;
}
body.v2.v2-page .booking .cta-orbit::before,
body.v2.v2-page .map-consent__btn.cta-orbit::before {
  border-radius: 0;
  background: conic-gradient(rgba(127, 227, 255, 0.35) 0deg, rgba(127, 227, 255, 0.35) 300deg, #fff 355deg, rgba(127, 227, 255, 0.35) 360deg);
}
body.v2.v2-page .booking .cta-orbit::after,
body.v2.v2-page .map-consent__btn.cta-orbit::after {
  border-radius: 0;
  clip-path: polygon(calc(var(--hud-cut) - 2px) 0, 100% 0, calc(100% - var(--hud-cut) + 2px) 100%, 0 100%);
}
body.v2.v2-page .booking .cta-orbit .cta-orbit__label,
body.v2.v2-page .map-consent__btn.cta-orbit .cta-orbit__label { color: #021226; transition: letter-spacing 220ms ease; }
body.v2.v2-page .booking .cta-orbit.btn--secondary {
  --orbit-fill: linear-gradient(180deg, #073250, #031a2e);
  --orbit-fill-hover: linear-gradient(90deg, #7fe3ff, #4db4ff);
}
body.v2.v2-page .booking .cta-orbit.btn--secondary .cta-orbit__label { color: #eaf6fb; }
body.v2.v2-page .booking .cta-orbit:hover,
body.v2.v2-page .booking .cta-orbit:focus-visible,
body.v2.v2-page .map-consent__btn.cta-orbit:hover,
body.v2.v2-page .map-consent__btn.cta-orbit:focus-visible { filter: drop-shadow(0 0 10px rgba(127, 227, 255, 0.75)); }
body.v2.v2-page .booking .cta-orbit:hover .cta-orbit__label,
body.v2.v2-page .booking .cta-orbit:focus-visible .cta-orbit__label,
body.v2.v2-page .map-consent__btn.cta-orbit:hover .cta-orbit__label { color: #021226; letter-spacing: 0.18em; }

@media (prefers-reduced-motion: reduce) {
  body.v2.v2-page main:has(.contact-grid) .section__head .eyebrow::before { animation: none; }
}

/* =============================================================================
   marvin-de-vries.html im Statuskarten-Look (Ergaenzung zu kontakt.html oben)
   ============================================================================= */
/* Leistungskarten, Textspalten und Abschluss-Band: Glas, Eckmarken, Schrägen */
body.v2.v2-page main:has(.mdv-intro-grid) .service-card,
body.v2.v2-page .mdv-panel,
body.v2.v2-page main:has(.mdv-intro-grid) .cta-band {
  position: relative;
  overflow: hidden;
  background: var(--hud-glass);
  border: 1px solid rgba(127, 227, 255, 0.3);
  border-radius: 0;
  box-shadow: inset 0 0 40px rgba(41, 140, 230, 0.16);
  clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px);
  transition: border-color 250ms ease, box-shadow 250ms ease, scale 320ms var(--ease-out);
}
body.v2.v2-page .mdv-panel { padding: clamp(1.3rem, 2.4vw, 2.2rem); }
body.v2.v2-page main:has(.mdv-intro-grid) .service-card::before,
body.v2.v2-page .mdv-panel::before,
body.v2.v2-page main:has(.mdv-intro-grid) .cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: 0;
  border-radius: 0;
  opacity: 1;
  -webkit-mask: none;
  mask: none;
  pointer-events: none;
  background: var(--hud-corners);
  filter: drop-shadow(0 0 4px rgba(127, 227, 255, 0.7));
  animation: none;
}

body.v2.v2-page main:has(.mdv-intro-grid) .service-card:hover,
body.v2.v2-page .mdv-panel:hover,
body.v2.v2-page main:has(.mdv-intro-grid) .cta-band:hover,
body.v2.v2-page main:has(.mdv-intro-grid) .service-card:focus-visible,
body.v2.v2-page .mdv-panel:focus-visible,
body.v2.v2-page main:has(.mdv-intro-grid) .cta-band:focus-visible {
  scale: 1;
  border-color: rgba(127, 227, 255, 0.75);
  box-shadow: inset 0 0 60px rgba(63, 170, 255, 0.28);
}

body.v2.v2-page main:has(.mdv-intro-grid) .service-card:hover::before,
body.v2.v2-page main:has(.mdv-intro-grid) .cta-band:hover::before,
body.v2.v2-page main:has(.mdv-intro-grid) .service-card:focus-visible::before,
body.v2.v2-page main:has(.mdv-intro-grid) .cta-band:focus-visible::before { animation: none; filter: drop-shadow(0 0 9px rgba(127, 227, 255, 1)); }
body.v2.v2-page main:has(.mdv-intro-grid) .service-card__icon {
  border-radius: 0;
  background: rgba(127, 227, 255, 0.1);
  border: 1px solid rgba(127, 227, 255, 0.45);
  box-shadow: 0 0 12px rgba(127, 227, 255, 0.2);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
body.v2.v2-page main:has(.mdv-intro-grid) .service-card__title,
body.v2.v2-page .mdv-panel .service-card__title { font-family: var(--font-display); }

/* Claim unter dem Einleitungstext als Statuszeile */
body.v2.v2-page .mdv-claim {
  display: inline-block;
  padding: 0.5rem 1rem;
  color: #fff;
  border-left: 3px solid #7fe3ff;
  background: rgba(127, 227, 255, 0.08);
}
/* Portraet: Leuchtring wie im Hero der Startseite */
body.v2.v2-page .mdv-intro-grid > div:last-child { position: relative; }
body.v2.v2-page .mdv-intro-grid > div:last-child::before {
  content: "";
  position: absolute;
  inset: 8% 6% 4%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(63, 170, 255, 0.4), rgba(63, 170, 255, 0.1) 60%, transparent 72%);
  filter: blur(8px);
}

/* Knopf im Abschlussband wie die Hero-Aktion */
body.v2.v2-page main:has(.mdv-intro-grid) .cta-band .cta-orbit {
  --orbit-ring: 2px;
  --orbit-light: 127, 227, 255;
  --orbit-fill: linear-gradient(90deg, #7fe3ff, #4db4ff);
  --orbit-fill-hover: linear-gradient(90deg, #c2f4ff, #8fd6ff);
  --hud-cut: 14px;
  height: 56px;
  border-radius: 0;
  clip-path: polygon(var(--hud-cut) 0, 100% 0, calc(100% - var(--hud-cut)) 100%, 0 100%);
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-inline: calc(var(--hud-cut) + 1.6rem);
  transition: filter 220ms ease;
}
body.v2.v2-page main:has(.mdv-intro-grid) .cta-band .cta-orbit::before { border-radius: 0; background: conic-gradient(rgba(127, 227, 255, 0.35) 0deg, rgba(127, 227, 255, 0.35) 300deg, #fff 355deg, rgba(127, 227, 255, 0.35) 360deg); }
body.v2.v2-page main:has(.mdv-intro-grid) .cta-band .cta-orbit::after {
  border-radius: 0;
  clip-path: polygon(calc(var(--hud-cut) - 2px) 0, 100% 0, calc(100% - var(--hud-cut) + 2px) 100%, 0 100%);
}
body.v2.v2-page main:has(.mdv-intro-grid) .cta-band .cta-orbit .cta-orbit__label { color: #021226; transition: letter-spacing 220ms ease; }

body.v2.v2-page main:has(.mdv-intro-grid) .cta-band .cta-orbit:hover,
body.v2.v2-page main:has(.mdv-intro-grid) .cta-band .cta-orbit:focus-visible { filter: drop-shadow(0 0 10px rgba(127, 227, 255, 0.75)); }
body.v2.v2-page main:has(.mdv-intro-grid) .cta-band .cta-orbit:hover .cta-orbit__label { letter-spacing: 0.18em; }

/* =============================================================================
   leistungen.html: Accordion und Abschluss-Band im Statuskarten-Look
   (die Orbit-Buehne darueber nutzt ihn bereits)
   ============================================================================= */
body.v2.v2-page .svc-acc-item {
  position: relative;
  overflow: hidden;
  background: var(--hud-glass);
  border: 1px solid rgba(127, 227, 255, 0.24);
  border-radius: 0;
  box-shadow: inset 0 0 30px rgba(41, 140, 230, 0.12);
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
  transition: border-color 250ms ease, box-shadow 250ms ease;
}
/* Leuchtkante links: Hover und offen */
body.v2.v2-page .svc-acc-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 100%;
  z-index: 2;
  background: linear-gradient(180deg, #7fe3ff, #4db4ff);
  box-shadow: 0 0 12px rgba(127, 227, 255, 0.8);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 380ms var(--ease-out);
}

body.v2.v2-page .svc-acc-item[data-open="true"]::before,
body.v2.v2-page .svc-acc-item:hover::before,
body.v2.v2-page .svc-acc-item:focus-visible::before { transform: scaleY(1); }

body.v2.v2-page .svc-acc-item:hover,
body.v2.v2-page .svc-acc-item:focus-visible { border-color: rgba(127, 227, 255, 0.6); }
body.v2.v2-page .svc-acc-item[data-open="true"] {
  border-color: rgba(127, 227, 255, 0.7);
  box-shadow: inset 0 0 50px rgba(63, 170, 255, 0.26), 0 0 28px rgba(41, 140, 230, 0.18);
}
body.v2.v2-page .svc-acc-item__q-text { color: var(--v2-text); font-family: var(--font-display); }
body.v2.v2-page .svc-acc-item[data-open="true"] .svc-acc-item__q-text { color: #fff; text-shadow: 0 0 18px rgba(127, 227, 255, 0.45); }
/* Nummer als Statuschip */
body.v2.v2-page .svc-acc-item__num {
  display: inline-block;
  padding: 0.2rem 0.7rem;
  margin-right: 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #7fe3ff;
  background: rgba(127, 227, 255, 0.1);
  border: 1px solid rgba(127, 227, 255, 0.4);
  border-radius: 999px;
}
body.v2.v2-page .svc-acc-item__q svg { color: #7fe3ff; filter: drop-shadow(0 0 4px rgba(127, 227, 255, 0.6)); }

/* Aktionsknoepfe im Accordion und im Abschluss-Band wie die Hero-Aktionen */
body.v2.v2-page .svc-acc-item .cta-orbit,
body.v2.v2-page main:has(.svc-acc) .cta-band .cta-orbit {
  --orbit-ring: 2px;
  --orbit-light: 127, 227, 255;
  --orbit-fill: linear-gradient(90deg, #7fe3ff, #4db4ff);
  --orbit-fill-hover: linear-gradient(90deg, #c2f4ff, #8fd6ff);
  --hud-cut: 14px;
  border-radius: 0;
  clip-path: polygon(var(--hud-cut) 0, 100% 0, calc(100% - var(--hud-cut)) 100%, 0 100%);
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-inline: calc(var(--hud-cut) + 1.1rem);
  transition: filter 220ms ease;
}
body.v2.v2-page .svc-acc-item .cta-orbit::before,
body.v2.v2-page main:has(.svc-acc) .cta-band .cta-orbit::before { border-radius: 0; background: conic-gradient(rgba(127, 227, 255, 0.35) 0deg, rgba(127, 227, 255, 0.35) 300deg, #fff 355deg, rgba(127, 227, 255, 0.35) 360deg); }
body.v2.v2-page .svc-acc-item .cta-orbit::after,
body.v2.v2-page main:has(.svc-acc) .cta-band .cta-orbit::after {
  border-radius: 0;
  clip-path: polygon(calc(var(--hud-cut) - 2px) 0, 100% 0, calc(100% - var(--hud-cut) + 2px) 100%, 0 100%);
}
body.v2.v2-page .svc-acc-item .cta-orbit .cta-orbit__label,
body.v2.v2-page main:has(.svc-acc) .cta-band .cta-orbit .cta-orbit__label { color: #021226; transition: letter-spacing 220ms ease; }
body.v2.v2-page .svc-acc-item .cta-orbit.btn--secondary { --orbit-fill: linear-gradient(180deg, #073250, #031a2e); --orbit-fill-hover: linear-gradient(90deg, #7fe3ff, #4db4ff); }
body.v2.v2-page .svc-acc-item .cta-orbit.btn--secondary .cta-orbit__label { color: #eaf6fb; }

body.v2.v2-page .svc-acc-item .cta-orbit:hover,
body.v2.v2-page main:has(.svc-acc) .cta-band .cta-orbit:hover,
body.v2.v2-page .svc-acc-item .cta-orbit:focus-visible,
body.v2.v2-page main:has(.svc-acc) .cta-band .cta-orbit:focus-visible { filter: drop-shadow(0 0 10px rgba(127, 227, 255, 0.75)); }
body.v2.v2-page .svc-acc-item .cta-orbit:hover .cta-orbit__label,
body.v2.v2-page main:has(.svc-acc) .cta-band .cta-orbit:hover .cta-orbit__label { color: #021226; letter-spacing: 0.18em; }

/* Abschluss-Band */
body.v2.v2-page main:has(.svc-acc) .cta-band {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(60% 120% at 12% 0%, rgba(77, 180, 255, 0.22), transparent 70%),
    var(--hud-glass);
  border: 1px solid rgba(127, 227, 255, 0.35);
  border-radius: 0;
  box-shadow: inset 0 0 60px rgba(41, 140, 230, 0.2), 0 0 44px rgba(41, 140, 230, 0.14);
  clip-path: polygon(26px 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%, 0 26px);
}
body.v2.v2-page main:has(.svc-acc) .cta-band::before {
  inset: 0;
  padding: 0;
  border-radius: 0;
  opacity: 1;
  -webkit-mask: none;
  mask: none;
  background: var(--hud-corners);
  filter: drop-shadow(0 0 5px rgba(127, 227, 255, 0.75));
  animation: none;
}

body.v2.v2-page main:has(.svc-acc) .cta-band:hover,
body.v2.v2-page main:has(.svc-acc) .cta-band:focus-visible { scale: 1; }

body.v2.v2-page main:has(.svc-acc) .cta-band:hover::before,
body.v2.v2-page main:has(.svc-acc) .cta-band:focus-visible::before { animation: none; }
body.v2.v2-page main:has(.svc-acc) .cta-band h2 { font-family: var(--font-display); letter-spacing: -0.01em; }




/* =============================================================================
   HERO im Schema der Referenz (Desktop ab 901px)
   Hinten rechts die leise Silhouette der spaeteren Planetenkonstellation, davor Marvins Portraet,
   unten im Querformat eine Glaskarte mit dem Vorstellungstext. Das Portraet setzt sich beim Laden
   aus Bits zusammen (assets/js/hero-assemble.js). Mobil bleibt das bisherige Layout.
   ============================================================================= */

@media (min-width: 901px) {
  .v2-hero__stage {
    display: block;      /* position bleibt sticky (.v2-stage): die Buehne steht waehrend des Uebergangs */
    padding: 0;
  }

  /* ---- Portraet ---- */
  .v2-hero__figure {
    position: absolute;
    z-index: 2;
    left: clamp(2rem, 17vw, 22rem);              /* links-mittig */
    bottom: clamp(7rem, 22vh, 13rem);            /* der untere Rand laeuft hinter die Karte */
    width: min(34vw, 540px, 58svh);
  }

  /* Aufgepeppt: feine Scanlinien und ein Lichtstreifen laufen ueber die Silhouette */
  .v2-hero__photo::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    -webkit-mask-image:
      url("../img/marvin-de-vries-cutout.webp"),
      linear-gradient(to top, transparent 0%, rgba(0, 0, 0, 0.35) 7%, #000 24%),
      linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.45) 4%, #000 14%);
    mask-image:
      url("../img/marvin-de-vries-cutout.webp"),
      linear-gradient(to top, transparent 0%, rgba(0, 0, 0, 0.35) 7%, #000 24%),
      linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.45) 4%, #000 14%);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
    background:
      linear-gradient(180deg, transparent 0%, rgba(127, 227, 255, 0.45) 50%, transparent 100%) 0 -30% / 100% 24% no-repeat,
      repeating-linear-gradient(0deg, rgba(127, 227, 255, 0.10) 0 1px, transparent 1px 4px);
    mix-blend-mode: screen;
    animation: hero-scan 7s ease-in-out 4s infinite;
  }
  @keyframes hero-scan { 0% { background-position: 0 -30%, 0 0; } 45%, 100% { background-position: 0 130%, 0 0; } }

  /* Bit-Aufbau: das Foto bleibt unsichtbar, bis es von der Animation eingeblendet wird */
  .v2-hero__photo.is-assembling img { opacity: 0; }
  .v2-hero__photo.is-assembling.is-revealing img { opacity: 1; transition: opacity 0.9s ease; }
  .v2-hero__bits {
    position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none;
    /* dieselben weichen Kanten wie das Foto, sonst steht der Aufbau als Rechteck da */
    -webkit-mask-image:
      linear-gradient(to top, transparent 0%, rgba(0, 0, 0, 0.35) 7%, #000 24%),
      linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.45) 4%, #000 14%);
    mask-image:
      linear-gradient(to top, transparent 0%, rgba(0, 0, 0, 0.35) 7%, #000 24%),
      linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.45) 4%, #000 14%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }

  /* ---- Karte: Glas im Querformat, unten ---- */
  .v2-hero__body {
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    bottom: clamp(3.4rem, 8vh, 5.4rem);
    margin-inline: auto;
    width: min(1180px, calc(100% - 2 * clamp(1.2rem, 5vw, 5rem)));
    max-width: none;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    column-gap: clamp(1.4rem, 3.4vw, 3.4rem);
    align-items: start;
    padding: clamp(1.1rem, 2.6vh, 2rem) clamp(1.4rem, 3vw, 2.8rem);
    background: linear-gradient(135deg, rgba(30, 52, 92, 0.55), rgba(8, 18, 42, 0.66));
    -webkit-backdrop-filter: blur(22px) saturate(1.25);
    backdrop-filter: blur(22px) saturate(1.25);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 22px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.16);
    clip-path: none;
  }
  .v2-hero__body::before, .v2-hero__body::after { display: none; }
  .v2-hero__body:hover { border-color: rgba(255, 255, 255, 0.22); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
  .v2-hero__eyebrow { grid-column: 1; grid-row: 1; justify-self: start; margin-bottom: 0.7rem; }
  .v2-hero__title { grid-column: 1; grid-row: 2 / span 2; margin: 0; }
  .v2-hero__title-lead { font-size: clamp(1.8rem, min(3.8vw, 5.6vh), 3.3rem); }
  .v2-hero__title-rest { font-size: clamp(0.9rem, min(1.2vw, 2vh), 1.1rem); max-width: 40ch; }
  .v2-hero__text { grid-column: 2; grid-row: 1 / span 2; }
  .v2-hero__text p { font-size: clamp(0.8rem, min(0.98vw, 1.8vh), 0.95rem); line-height: 1.55; margin-bottom: 0.6rem; max-width: none; }
  .v2-hero__actions { grid-column: 2; grid-row: 3; margin-top: clamp(0.5rem, 1.6vh, 1rem); }

  /* "Was wir tun": dieselbe Karte an derselben Stelle wie die Vorstellung davor - unten, breit im Querformat,
     als Glas; links der Titel, rechts der Text. Sie blendet aus, sobald der echte Planet der Orbit-Sektion
     hochkommt (--focus), damit sie nicht in die naechste Buehne ragt. */
  .v2-hero__turn {
    grid-template-columns: 1fr;
    align-items: end;
    justify-items: center;
    padding: 0 clamp(1.2rem, 5vw, 5rem) clamp(3.4rem, 8vh, 5.4rem);
  }
  .v2-hero__turn-copy {
    grid-column: 1;
    width: min(1180px, 100%);
    max-width: none;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    column-gap: clamp(1.4rem, 3.4vw, 3.4rem);
    align-items: center;
    padding: clamp(1.1rem, 2.6vh, 2rem) clamp(1.4rem, 3vw, 2.8rem);
    background: linear-gradient(135deg, rgba(30, 52, 92, 0.55), rgba(8, 18, 42, 0.66));
    -webkit-backdrop-filter: blur(22px) saturate(1.25);
    backdrop-filter: blur(22px) saturate(1.25);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 22px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.16);
    clip-path: none;
    opacity: calc(var(--in, 0) * (1 - var(--focus, 0) * 2));
  }
  .v2-hero__turn-copy::before, .v2-hero__turn-copy::after { display: none; }
  .v2-hero__turn-copy:hover { border-color: rgba(255, 255, 255, 0.22); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
  .v2-hero__turn-copy .v2-turn__title { grid-column: 1; margin: 0; }
  .v2-hero__turn-copy .v2-turn__lead { grid-column: 2; margin: 0; max-width: none; }

  /* Karte 2 der Vorstellung: dieselbe Glaskarte, Lage und Breite wie Begruessung und "Was wir tun" */
  .v2-hero__more {
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    bottom: clamp(3.4rem, 8vh, 5.4rem);
    margin-inline: auto;
    width: min(1180px, calc(100% - 2 * clamp(1.2rem, 5vw, 5rem)));
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    column-gap: clamp(1.4rem, 3.4vw, 3.4rem);
    align-items: center;
    padding: clamp(1.1rem, 2.6vh, 2rem) clamp(1.4rem, 3vw, 2.8rem);
    background: linear-gradient(135deg, rgba(30, 52, 92, 0.55), rgba(8, 18, 42, 0.66));
    -webkit-backdrop-filter: blur(22px) saturate(1.25);
    backdrop-filter: blur(22px) saturate(1.25);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 22px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.16);
    pointer-events: none;
    opacity: calc(var(--mid, 0) * (1 - var(--focus, 0) * 2));
    transform: scale(calc(0.92 + var(--mid, 0) * 0.08));
    filter: blur(calc((1 - var(--mid, 0)) * 12px)) brightness(calc(1 + (1 - var(--mid, 0)) * 0.8));
    will-change: transform, filter, opacity;
  }
  .v2-hero__more p { margin: 0; }
  .v2-hero__more-lead {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.15rem, min(2vw, 3.4vh), 1.8rem);
    line-height: 1.25;
    color: #eaf6ff;
  }
  .v2-hero__more-text { font-size: clamp(0.84rem, min(1.05vw, 1.9vh), 1.02rem); line-height: 1.6; color: rgba(214, 228, 245, 0.86); }

  /* Portraet und Karte weichen dem echten Planeten ebenfalls */
  .v2-hero__figure { opacity: calc(1 - var(--focus, 0) * 1.6); }
}

/* Niedrige Laptop-Fenster: die Zeile mit Hamburg und Norddeutschland bleibt (sie ist die Kernaussage), der Absatz zur Erfahrung entfaellt */
@media (min-width: 901px) and (max-height: 780px) {
  .v2-hero__text p { font-size: clamp(0.74rem, 1.7vh, 0.9rem); line-height: 1.4; margin-bottom: 0.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .v2-hero__photo::before { animation: none; }
}


/* =============================================================================
   Uebersicht ueber alle sechs Leistungen (Schritt 8, zusaetzlich zur Karte "Sechs Hebel")
   Gleiche Karte wie die Leistungs-Karten daneben (Glas, Scanlinien, Eckmarken); Aufbau der Eintraege
   wie bei .v2-orbit__now: farbiger Randstrich, kleiner Name, Kurzaussage.
   ============================================================================= */
.v2-orbit__summary {
  position: absolute;
  z-index: 6;
  display: grid;
  gap: 0.7rem;
  justify-items: start;
  padding: clamp(0.8rem, 2.2vh, 1.4rem) clamp(1.1rem, 1.8vw, 1.8rem);
  background:
    repeating-linear-gradient(0deg, rgba(127, 227, 255, 0.045) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, rgba(4, 24, 52, 0.88), rgba(1, 10, 26, 0.93));
  border: 1px solid rgba(127, 227, 255, 0.3);
  box-shadow: inset 0 0 40px rgba(41, 140, 230, 0.16);
  clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px);
  overflow: hidden;
  opacity: var(--sum, 0);
  transform: scale(calc(0.94 + var(--sum, 0) * 0.06));
  filter: blur(calc((1 - var(--sum, 0)) * 8px));
  pointer-events: none;
}
.v2-orbit__summary::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, #7fe3ff, transparent) top / 60% 2px no-repeat,
    linear-gradient(#7fe3ff, #7fe3ff) right top / 28px 2px no-repeat,
    linear-gradient(#7fe3ff, #7fe3ff) right top / 2px 28px no-repeat,
    linear-gradient(#7fe3ff, #7fe3ff) left bottom / 28px 2px no-repeat,
    linear-gradient(#7fe3ff, #7fe3ff) left bottom / 2px 28px no-repeat;
  filter: drop-shadow(0 0 4px rgba(127, 227, 255, 0.7));
}
.v2-orbit__summary-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.3rem 0.9rem;
  color: #7fe3ff;
  background: rgba(127, 227, 255, 0.1);
  border: 1px solid rgba(127, 227, 255, 0.4);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.v2-orbit__summary-kicker::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #5dffb0;
  box-shadow: 0 0 8px #5dffb0;
  animation: hud-blink 1.8s ease-in-out infinite;
}
.v2-orbit__summary-list {
  --node: 2.2rem;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}
/* Senkrechte Abfolge wie ein Ablaufplan: runder Knoten mit Symbol, dazwischen eine Linie mit Pfeil nach unten */
.v2-orbit__summary-list li {
  position: relative;
  display: grid;
  grid-template-columns: var(--node) minmax(0, 1fr);
  align-items: center;
  column-gap: 0.75rem;
  padding-block: clamp(0.3rem, 0.9vh, 0.5rem);
}
.v2-orbit__summary-list li::before,
.v2-orbit__summary-list li::after {
  content: "";
  position: absolute;
  left: calc(var(--node) / 2 - 1px);
  width: 2px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tint, #7fe3ff) 55%, transparent), rgba(127, 227, 255, 0.28));
}
.v2-orbit__summary-list li:not(:first-child)::before { top: 0; bottom: calc(50% + var(--node) / 2); }
.v2-orbit__summary-list li:not(:last-child)::after { top: calc(50% + var(--node) / 2); bottom: 0; }
.v2-orbit__summary-list .chev {
  position: absolute;
  left: calc(var(--node) / 2);
  top: 0;
  width: 7px;
  height: 7px;
  border-right: 2px solid rgba(127, 227, 255, 0.8);
  border-bottom: 2px solid rgba(127, 227, 255, 0.8);
  transform: translate(-50%, -62%) rotate(45deg);
  filter: drop-shadow(0 0 3px rgba(127, 227, 255, 0.6));
}
.v2-orbit__summary-list .node {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--node);
  height: var(--node);
  border-radius: 50%;
  color: var(--tint, #7fe3ff);
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--tint, #7fe3ff) 22%, #04122a) 0%, #030c1e 78%);
  border: 1.5px solid var(--tint, #7fe3ff);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--tint, #7fe3ff) 14%, transparent),
    0 0 12px color-mix(in srgb, var(--tint, #7fe3ff) 55%, transparent),
    inset 0 0 8px color-mix(in srgb, var(--tint, #7fe3ff) 30%, transparent);
}
.v2-orbit__summary-list .node svg { width: 56%; height: 56%; }
.v2-orbit__summary-list li > div { display: grid; gap: 0.12rem; min-width: 0; }
.v2-orbit__summary-list small {
  font-family: var(--font-display);
  font-size: clamp(0.58rem, min(0.75vw, 1.4vh), 0.7rem);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tint, #7fe3ff);
}
.v2-orbit__summary-list span {
  font-size: clamp(0.78rem, min(0.95vw, 1.7vh), 0.94rem);
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
}
@media (min-width: 901px) {
  .v2-orbit__summary {
    left: calc(21.5% + min(15rem, 18vw) + 1rem);
    top: calc(50% - min(11rem, 20vh));
    width: min(18rem, 20vw);
  }
}
@media (min-width: 901px) and (max-width: 1400px) {
  .v2-orbit__summary { left: 25%; width: min(18rem, 16.5vw); }
}
@media (max-width: 900px) {
  .v2-orbit__summary { display: none; }
}

/* =============================================================================
   Feinschliff der Aufteilung fuer kleine Fenster (Breite UND Hoehe)
   ============================================================================= */
/* Variantenleiste: bleibt im Bild und bricht auf schmalen Schirmen um, statt rechts herauszulaufen */
.v2-variants {
  max-width: calc(100vw - 2 * clamp(1.2rem, 4vw, 3.5rem));
  flex-wrap: wrap;
  row-gap: 0.25rem;
}
@media (max-width: 700px) {
  .v2-variants { border-radius: 1.2rem; font-size: 0.68rem; letter-spacing: 0.03em; }
  .v2-variants a,
  .v2-variants button { padding: 0.3rem 0.6rem; }
  .v2-variants__sep { display: none; }
}

/* Hero-Aktionen: im schmalen Kartenbereich (Tablet, kleines Notebook) umbrechen statt abgeschnitten zu werden */
@media (min-width: 768px) and (max-width: 1180px) {
  .v2-hero__actions {
    display: flex;
    flex-wrap: wrap;
    width: auto;
    max-width: 100%;
  }
  .v2-hero__actions .cta-orbit {
    height: 46px;
    font-size: 0.85rem;
    padding-inline: calc(var(--orbit-ring) + 1rem);
  }
}

/* Uebersichts-Karte: bei geringer Hoehe kompakter, damit sie nicht unten aus dem Bild laeuft */
@media (min-width: 901px) and (max-height: 760px) {
  .v2-orbit__summary { gap: 0.4rem; padding-block: 0.6rem; max-height: calc(50svh + min(11rem, 20vh) - 0.75rem); }
  .v2-orbit__summary-kicker { padding: 0.2rem 0.7rem; font-size: 0.64rem; }
  .v2-orbit__summary-list { --node: 1.7rem; }
  .v2-orbit__summary-list li { padding-block: 0.15rem; column-gap: 0.55rem; }
  .v2-orbit__summary-list small { font-size: 0.54rem; letter-spacing: 0.08em; }
  .v2-orbit__summary-list span { font-size: 0.72rem; line-height: 1.2; }
}


/* leistungen.html: keine Sonden/Satelliten im Parcours, Hintergrund wie auf der Startseite (Sterne statt Karo).
   Der Erklaertext und das HUD je Leistung laufen unveraendert weiter. */
.lst-planet,
.lst-track__lane { display: none !important; }
.lst-space,
.lst-space__bg { background: none; }
.lst-space__grid { display: none; }


/* Karte 2 gibt es nur auf dem Desktop; auf dem Handy bleibt die Vorstellung bei einer Karte */
@media (max-width: 900px) {
  .v2-hero__more { display: none; }
}


/* =============================================================================
   marvin-de-vries.html im Glas-Stil der Startseite (Karten wie im Hero: abgerundet, Glas, ohne Eckmarken)
   ============================================================================= */
body.v2.v2-page main:has(.mdv-intro-grid) .service-card,
body.v2.v2-page .mdv-panel,
body.v2.v2-page main:has(.mdv-intro-grid) .cta-band,
body.v2.v2-page .mdv-intro-card {
  background: linear-gradient(135deg, rgba(30, 52, 92, 0.55), rgba(8, 18, 42, 0.66));
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
  backdrop-filter: blur(22px) saturate(1.25);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 22px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  clip-path: none;
}
body.v2.v2-page main:has(.mdv-intro-grid) .service-card::before,
body.v2.v2-page .mdv-panel::before,
body.v2.v2-page main:has(.mdv-intro-grid) .cta-band::before { display: none; }
body.v2.v2-page main:has(.mdv-intro-grid) .service-card:hover,
body.v2.v2-page .mdv-panel:hover,
body.v2.v2-page main:has(.mdv-intro-grid) .cta-band:hover {
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
body.v2.v2-page main:has(.mdv-intro-grid) .service-card__icon {
  border-radius: 12px;
  clip-path: none;
  background: rgba(127, 227, 255, 0.1);
  border: 1px solid rgba(127, 227, 255, 0.35);
}
/* Einleitung: Text in einer Glaskarte, daneben das Portraet mit Leuchtkern, Scanlinien und Bit-Aufbau wie im Hero */
body.v2.v2-page .mdv-intro-card { padding: clamp(1.4rem, 3vw, 2.6rem); }
body.v2.v2-page .mdv-claim {
  border: 1px solid rgba(127, 227, 255, 0.4);
  border-left-width: 1px;
  border-radius: 999px;
  padding: 0.5rem 1.1rem;
  background: rgba(127, 227, 255, 0.1);
}
body.v2.v2-page .mdv-photo { position: relative; margin: 0; z-index: 1; }
body.v2.v2-page .mdv-photo .mdv-portrait { position: relative; }
body.v2.v2-page .mdv-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(127, 227, 255, 0.08) 0 1px, transparent 1px 4px);
  -webkit-mask-image: url("../img/marvin-telefon-cutout.webp");
  mask-image: url("../img/marvin-telefon-cutout.webp");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  mix-blend-mode: screen;
}
.mdv-photo.is-assembling img { opacity: 0; }
.mdv-photo.is-assembling.is-revealing img { opacity: 1; transition: opacity 0.9s ease; }
.mdv-photo .v2-hero__bits {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none;
}


/* =============================================================================
   Einheitlicher Karten-Stil (aus test-cards-dashboard.html): dunkle Glasflaeche mit leichtem Verlauf, feine Cyan-Kontur,
   Eckmarken oben links und unten rechts, runde Ecken. Ueberschreibt die frueheren Statuskarten mit abgeschnittenen Ecken
   auf allen Seiten (index, 1b, leistungen, marvin-de-vries, kontakt, bestellung, referenzen).
   Die Werte stehen als Variablen oben; wegen der vielen frueheren Einzelregeln mit !important.
   ============================================================================= */
:root {
  --card-bg: linear-gradient(160deg, rgba(10, 28, 52, 0.82), rgba(3, 10, 24, 0.9));
  --card-line: rgba(63, 216, 255, 0.22);
  --card-glow: inset 0 0 40px rgba(40, 140, 230, 0.12), 0 18px 40px rgba(0, 0, 0, 0.5);
  --card-corners:
    linear-gradient(#3fd8ff, #3fd8ff) left top / 16px 1px no-repeat,
    linear-gradient(#3fd8ff, #3fd8ff) left top / 1px 16px no-repeat,
    linear-gradient(#3fd8ff, #3fd8ff) right bottom / 16px 1px no-repeat,
    linear-gradient(#3fd8ff, #3fd8ff) right bottom / 1px 16px no-repeat;
  --hud-glass: var(--card-bg);
  --hud-corners: var(--card-corners);
}

/* Grosse Karten */
.v2-hero__body,
.v2-hero__turn-copy,
.v2-orbit__intro,
.v2-orbit__copy,
.v2-orbit__satcard,
.v2-track__caption,
.lst-track__caption,
.v2-step,
.v2-faq__item,
.v2-final__cta,
body.v2.v2-page .order__beratung,
body.v2.v2-page .order__block,
body.v2.v2-page .summe,
body.v2.v2-page .order__done,
body.v2.v2-page .contact-card,
body.v2.v2-page .booking.form,
body.v2.v2-page .contact__map,
body.v2.v2-page main:has(.mdv-intro-grid) .service-card,
body.v2.v2-page .mdv-panel,
body.v2.v2-page main:has(.mdv-intro-grid) .cta-band,
body.v2.v2-page .svc-acc-item,
body.v2.v2-page main:has(.svc-acc) .cta-band,
.v2-orbit__summary,
body.v2 .v2-hero__more,
body.v2.v2-page .mdv-intro-card {
  background: var(--card-bg) !important;
  border: 1px solid var(--card-line) !important;
  border-radius: 12px !important;
  box-shadow: var(--card-glow) !important;
  clip-path: none !important;
}

.v2-hero__body:hover,
.v2-hero__turn-copy:hover,
.v2-orbit__intro:hover,
.v2-orbit__copy:hover,
.v2-orbit__satcard:hover,
.v2-track__caption:hover,
.lst-track__caption:hover,
.v2-step:hover,
.v2-faq__item:hover,
.v2-final__cta:hover,
body.v2.v2-page .order__beratung:hover,
body.v2.v2-page .order__block:hover,
body.v2.v2-page .summe:hover,
body.v2.v2-page .order__done:hover,
body.v2.v2-page .contact-card:hover,
body.v2.v2-page .booking.form:hover,
body.v2.v2-page .contact__map:hover,
body.v2.v2-page main:has(.mdv-intro-grid) .service-card:hover,
body.v2.v2-page .mdv-panel:hover,
body.v2.v2-page main:has(.mdv-intro-grid) .cta-band:hover,
body.v2.v2-page .svc-acc-item:hover,
body.v2.v2-page main:has(.svc-acc) .cta-band:hover,
.v2-orbit__summary:hover,
body.v2 .v2-hero__more:hover,
body.v2.v2-page .mdv-intro-card:hover,
body.v2.v2-page .summe:focus-visible,
body.v2.v2-page .order__done:focus-visible,
.v2-orbit__summary:focus-visible,
body.v2 .v2-hero__more:focus-visible,
body.v2.v2-page .mdv-intro-card:focus-visible {
  border-color: rgba(63, 216, 255, 0.5) !important;
  box-shadow: inset 0 0 56px rgba(63, 170, 255, 0.22), 0 22px 48px rgba(0, 0, 0, 0.55) !important;
}
/* Eckmarken */
.v2-hero__body::before,
.v2-hero__turn-copy::before,
.v2-orbit__intro::before,
.v2-orbit__copy::before,
.v2-orbit__satcard::before,
.v2-track__caption::before,
.lst-track__caption::before,
.v2-step::before,
.v2-faq__item::before,
.v2-final__cta::before,
body.v2.v2-page .order__beratung::before,
body.v2.v2-page .order__block::before,
body.v2.v2-page .summe::before,
body.v2.v2-page .order__done::before,
body.v2.v2-page .contact-card::before,
body.v2.v2-page .booking.form::before,
body.v2.v2-page .contact__map::before,
body.v2.v2-page main:has(.mdv-intro-grid) .service-card::before,
body.v2.v2-page .mdv-panel::before,
body.v2.v2-page main:has(.mdv-intro-grid) .cta-band::before,
body.v2.v2-page .svc-acc-item::before,
body.v2.v2-page main:has(.svc-acc) .cta-band::before,
.v2-orbit__summary::before,
body.v2 .v2-hero__more::before,
body.v2.v2-page .mdv-intro-card::before {
  display: block !important;
  background: var(--card-corners) !important;
  filter: drop-shadow(0 0 4px #3fd8ff) !important;
  border-radius: 12px !important;
  -webkit-mask: none !important;
  mask: none !important;
}

/* Kacheln und kleine Felder: nur die Form, die Farben (z. B. ausgewaehlt) bleiben */
body.v2.v2-page .svc-pick,
body.v2.v2-page .budget-opt span,
body.v2.v2-page .booking-type,
body.v2.v2-page .booking__slot,
body.v2.v2-page .booking__cal {
  clip-path: none !important;
  border-radius: 8px !important;
}

/* HUD-Anzeigen (Bahnen und Wirkungskurve) in derselben Form */
.v2-hud__panel,
.lst-hud__panel {
  border-radius: 12px !important;
  clip-path: none !important;
  border-color: var(--card-line) !important;
  background: var(--card-bg) !important;
  box-shadow: var(--card-glow) !important;
}


/* =============================================================================
   Leistungen, Variante 2 (assets/js/leistungen-v2.js): der Planet kommt aus einem eingebetteten Fenster (planet-v2.html?embed);
   Karte links und die zwei Karten rechts unten bleiben die dieser Seite.
   ============================================================================= */
.lst-v2embed { position: absolute; inset: 0; z-index: 1; display: none; }
html.lst-v2 .lst-v2embed { display: block; }
.lst-v2embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity 0.7s ease; }
.lst-v2embed.is-ready iframe { opacity: 1; }
.lst-v2embed__chip {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: grid; gap: 0.7rem; justify-items: center; min-width: 14rem;
  padding: 0.9rem 1.4rem; border-radius: 16px; font-size: 0.82rem; letter-spacing: 0.08em; color: #7fe3ff;
  background: rgba(4, 24, 52, 0.78); border: 1px solid rgba(127, 227, 255, 0.35);
}
.lst-v2embed__bar { width: 100%; height: 3px; border-radius: 3px; background: rgba(140, 226, 240, 0.16); overflow: hidden; }
.lst-v2embed__fill {
  display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, #2f6fed, #7fe3ff); box-shadow: 0 0 12px rgba(127, 227, 255, 0.7);
}
html.lst-v2 .lst-orbit__system, html.lst-v2 .lst-track__lane { display: none !important; }
.lst-journey__stage .lst-variants { z-index: 7; pointer-events: auto; }
.lst-journey__stage .lst-v2embed { pointer-events: auto; }

/* Leistungen: derselbe Grund wie auf der Startseite (Void, dazu die beiden Lichter des Heros), ueber die ganze Seite und ohne
   Wechsel zwischen Buehne und den Abschnitten darunter. Sterne und Glanz oben bleiben (body::before/::after). */
body.v2.v2-page.lst-page {
  background:
    radial-gradient(90% 70% at 22% 40%, var(--v2-space) 0%, transparent 62%) fixed,
    radial-gradient(70% 60% at 82% 66%, rgba(47, 111, 237, 0.16) 0%, transparent 70%) fixed,
    var(--v2-void) fixed;
}

/* Leistungen: beide Karten rechts unten haben fuer jede Leistung dieselbe Groesse (vorher bestimmte die Laenge der Ueberschrift die Breite) */
.lst-hud__panel { width: clamp(190px, 15.5vw, 280px); box-sizing: border-box; }
.lst-hud__panel--map svg, .lst-hud__panel--chart svg { width: 100%; height: auto; max-height: clamp(110px, 10.5vw, 160px); }
.lst-hud__panel--map svg { margin-inline: auto; }
.lst-hud__caption { min-height: 2.4em; line-height: 1.2; }
@media (max-width: 900px) { .lst-hud__panel { width: clamp(120px, 38vw, 170px); } }

/* Radar-Karte (leistungen.html): dunkle Scheibe mit Gitter, Randskala, laufendem Radarstrahl; im Zentrum der Globus (lst-radar.js) */
.lst-radar { position: relative; width: 100%; aspect-ratio: 1; }
.lst-radar svg { position: absolute; inset: 0; width: 100% !important; max-height: none !important; }
.lst-radar__globe { position: absolute; left: 50%; top: 50%; width: 27%; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; }
.lst-radar__rim { fill: none; stroke: rgba(127, 227, 255, 0.7); stroke-width: 0.8; }
.lst-radar__ticks { fill: none; stroke: rgba(127, 227, 255, 0.55); stroke-width: 2.4; stroke-dasharray: 0.35 1.65; }
.lst-radar__grid line { stroke: rgba(127, 227, 255, 0.16); stroke-width: 0.5; }
.lst-radar__sweep { transform-origin: 60px 60px; animation: lst-radar-sweep 5.5s linear infinite; }
.lst-radar__sweep line { stroke: rgba(127, 227, 255, 0.85); stroke-width: 0.8; }
@keyframes lst-radar-sweep { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .lst-radar__sweep { animation: none; } }
.lst-hud__panel--map .lst-hud__orbit { stroke: rgba(140, 226, 240, 0.4); }
.lst-hud__panel--map .lst-hud__dot { fill: rgba(140, 226, 240, 0.7); }
.lst-hud__panel--map .lst-hud__orbit.is-active { stroke: var(--tint); stroke-width: 1.4; filter: drop-shadow(0 0 3px var(--tint)); }
.lst-hud__panel--map .lst-hud__dot.is-active { fill: var(--tint); }
.lst-radar .lst-hud__center { display: none; }
.lst-radar__globe { width: 29%; }
/* Radar-Karte: kompakt, so hoch wie die Diagramm-Karte; groesserer Globus im Zentrum */
.lst-radar { width: clamp(96px, 8.6vw, 132px); margin-inline: auto; }
.lst-radar__globe { width: 40%; }
.lst-hud { align-items: stretch; }
.lst-hud__panel { display: flex; flex-direction: column; }
.lst-hud__panel--chart svg { margin-top: auto; margin-bottom: auto; }
.lst-hud__panel--map .lst-radar { margin-block: auto; }
/* Die Parcours-Sektion liegt ueber der Buehne, enthaelt aber nichts Anklickbares: Klicks (Variantenleiste, Planet) gehen durch */
.lst-track, .lst-track__stage { pointer-events: none; }

/* Radarstrahl: zeigt auf die aktive Leistung (Winkel setzt lst-radar.js), kein freier Umlauf */
.lst-radar__sweep { animation: none !important; transition: transform 0.25s linear; }

/* Variante 1 der Leistungen: die Trabanten kreisen sichtbar um den Kern; die alten Parcours-Planeten bleiben aus.
   Die Buehne ist klickdurchlaessig (siehe oben), der Kern bleibt ziehbar. */
.lst-journey__stage .lst-orbit__sat { pointer-events: none; }
html.lst-v2 .lst-orbit__sat { display: none; }

/* =============================================================================
   TESTWEISE: alle Karten der Landingpage als Glastafeln (Klasse "glas" am body, nur index.html und index-1b.html).
   Vorlage: test-card-glas.html - durchscheinendes Acrylglas, helle Kante, leuchtende Unterkante, weicher Lichtschein.
   Zum Abschalten die Klasse "glas" aus dem body-Tag nehmen.
   ============================================================================= */
body.glas {
  --card-bg:
    linear-gradient(115deg, rgba(120, 190, 255, 0.16) 0%, rgba(40, 90, 170, 0.07) 38%, rgba(10, 30, 70, 0.12) 100%),
    rgba(6, 18, 42, 0.42);
  --card-line: rgba(150, 215, 255, 0.5);
  --card-glow:
    0 0 0 1px rgba(79, 180, 255, 0.22),
    0 0 32px rgba(79, 180, 255, 0.28),
    inset 0 0 50px rgba(79, 180, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -3px 0 -1px rgba(159, 220, 255, 0.95),
    0 14px 28px -18px rgba(79, 180, 255, 0.9);
}
body.glas .v2-hero__body,

body.glas .v2-hero__turn-copy,

body.glas .v2-orbit__intro,

body.glas .v2-orbit__copy,

body.glas .v2-orbit__satcard,

body.glas .v2-track__caption,

body.glas .lst-track__caption {
  -webkit-backdrop-filter: blur(6px) saturate(1.25);
  backdrop-filter: blur(6px) saturate(1.25);
  border-radius: 10px !important;
}

body.glas /* Grosse Karten */
.v2-hero__body,
body.glas .v2-hero__turn-copy,
body.glas .v2-orbit__intro,
body.glas .v2-orbit__copy,
body.glas .v2-orbit__satcard,
body.glas .v2-track__caption,
body.glas .lst-track__caption,
body.glas .v2-step,
body.glas .v2-faq__item,
body.glas .v2-final__cta,
body.glas body.v2.v2-page .order__beratung,
body.glas body.v2.v2-page .order__block,
body.glas body.v2.v2-page .summe,
body.glas body.v2.v2-page .order__done,
body.glas body.v2.v2-page .contact-card,
body.glas body.v2.v2-page .booking.form,
body.glas body.v2.v2-page .contact__map,
body.glas body.v2.v2-page main:has(.mdv-intro-grid) .service-card,
body.glas body.v2.v2-page .mdv-panel,
body.glas body.v2.v2-page main:has(.mdv-intro-grid) .cta-band,
body.glas body.v2.v2-page .svc-acc-item,
body.glas body.v2.v2-page main:has(.svc-acc) .cta-band,
body.glas .v2-orbit__summary,
body.glas body.v2 .v2-hero__more,
body.glas body.v2.v2-page .mdv-intro-card {
  -webkit-backdrop-filter: blur(6px) saturate(1.25);
  backdrop-filter: blur(6px) saturate(1.25);
}

/* Das Leistungen-Menue der Kopfzeile im selben Glas-Stil */
body.glas .nav__dropdown-menu { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

/* =============================================================================
   Schmale Bildschirme (Handy): kein Scrollen als Bedienung, daher keine Scrollhinweise und kein Top-Button; der Burger gehoert nur oben
   rechts in die Kopfzeile, die Kontaktleiste bekommt ein Telefon-Symbol; die Vorstellung bleibt unter 1,3 Bildschirmen.
   ============================================================================= */
@media (max-width: 900px) {
  .to-top, .scroll-cue, .v2-hero__cue, [class*="scroll-cue"], .v2-scroll, .v2-hero__scroll { display: none !important; }
  .contact-bar__toggle svg { display: none; }
  .contact-bar__toggle::after {
    content: ""; width: 22px; height: 22px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .v2-hero__text { display: none; }
  .v2-hero__figure { width: min(30%, 120px); margin-inline: auto; }
}
@media (max-width: 900px) {
  .v2-hero__hint, .v2-orbit__hint, [class*="__hint"]:not(.lst-orbit__drag-hint) { display: none !important; }
  /* Variantenleiste: ueber der Karte, nicht darin; auf Handys Leiste kompakt */
  .v2-variants { top: calc(var(--header-h) + 2.6rem); left: 12px; right: 12px; flex-wrap: wrap; justify-content: center; }
  .v2-orbit__copy, .v2-orbit__intro, .v2-orbit__summary { top: calc(var(--header-h) + 8rem) !important; }
}

/* =============================================================================
   Handy: Textkarten der Heros stehen unten und verdecken keine Animation
   -----------------------------------------------------------------------------
   Oben: Kopfzeile, Variantenleiste und (Leistungen) die beiden Messkarten; darunter
   die Szene (Planet, Trabanten); ganz unten die Textkarte, ueber dem Telefon-Knopf.
   ============================================================================= */
@media (max-width: 767px) {
  /* Seit der Zurueck-nach-oben-Knopf auf dem Handy entfaellt, braucht der Telefon-Knopf keine Luecke mehr darunter */
  .contact-bar { bottom: var(--space-md); }
  :root { --hero-card-bottom: var(--space-md); }
}
@media (max-width: 900px) {
  :root { --hero-card-bottom: 1rem; }

  /* ---- Leistungen ---- */
  .lst-journey__stage .lst-track__caption {
    top: auto;
    bottom: var(--hero-card-bottom);
    padding: 0.9rem 1.1rem;
  }
  .lst-track__caption-title { font-size: 1.25rem; margin-bottom: 0.4rem; }
  /* Der Telefon-Knopf liegt ueber der unteren rechten Ecke der Karte: der Text weicht ihm aus */
  .lst-track__caption-text, .v2-orbit__lead { font-size: 0.86rem; line-height: 1.5; }
  .lst-track__caption--intro .lst-track__caption-title { font-size: 1.5rem; margin-bottom: 0.4rem; }
  .lst-track__caption--intro .lst-track__caption-text { font-size: 0.86rem; }
  .lst-track__caption-kicker { margin-bottom: 0.4rem; }

  /* Messkarten oben unter der Variantenleiste (unten steht jetzt die Textkarte) */
  .lst-hud {
    left: 50%;
    right: auto;
    bottom: auto;
    top: calc(var(--header-h) + 5.5rem);
    translate: -50% 0;
    gap: 0.5rem;
  }
  .lst-hud__panel { width: clamp(110px, 30vw, 140px); padding: 0.4rem 0.45rem 0.35rem; }
  .lst-hud__caption { min-height: 2.4em; }

  /* Szene zwischen Messkarten und Textkarte */
  .lst-orbit__system {
    top: 55%;
    width: min(32vh, 60vw);
  }
}

@media (max-width: 900px) {
  /* ---- Startseite: Orbit-Sektion ---- */
  .v2-orbit__stage .v2-orbit__copy {
    top: auto !important;
    bottom: var(--hero-card-bottom);
    left: clamp(1rem, 5vw, 3rem);
    right: clamp(1rem, 5vw, 3rem);
    max-width: none;
    translate: 0 0;
    padding: 0.9rem 1.1rem;
    gap: 0.5rem;
  }
  .v2-orbit__title { font-size: 1.25rem; }
  .v2-orbit__system {
    top: 46%;
    width: min(35vh, 64vw);
  }
}

@media (max-width: 900px) {
  /* Leistungen, Variante 2: kleinere Messkarten, damit der Planet der eingebetteten Szene darunter Platz hat */
  html.lst-v2 .lst-hud__panel { width: clamp(96px, 27vw, 120px); }
  html.lst-v2 .lst-hud__panel--map .lst-radar { width: 70%; }
}

@media (max-width: 900px) and (max-height: 700px) {
  /* Kurze Bildschirme: neben der Textkarte bleibt keine Hoehe fuer die Messkarten - die Szene hat Vorrang */
  .lst-hud { display: none; }
  .lst-orbit__system { top: 43%; width: min(32vh, 58vw); }
  .v2-orbit__system { top: 41%; width: min(32vh, 58vw); }
}

/* Accordion der Leistungen: der Titel bricht um statt das Schliessen-Symbol aus der Karte zu schieben; Antworttext im Blocksatz */
body.v2.v2-page .svc-acc-item__q-text { flex: 1 1 auto; min-width: 0; flex-wrap: wrap; overflow-wrap: anywhere; }
body.v2.v2-page .svc-acc-item__q svg { flex: 0 0 auto; }
body.v2.v2-page .svc-acc-item__a-inner p { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }

/* Akkordeon: Titel immer einzeilig, das Plus/X sitzt in jeder Zeile an derselben Stelle am rechten Rand (offen wie zu) */
body.v2.v2-page .svc-acc-item__q { gap: 0.5rem; }
body.v2.v2-page .svc-acc-item__q-text { flex-wrap: nowrap; white-space: nowrap; overflow-wrap: normal; align-items: center; }
body.v2.v2-page .svc-acc-item__q svg { margin-left: auto; }
@media (max-width: 600px) {
  body.v2.v2-page .svc-acc-item__q { padding: 0.8rem 0.8rem; }
  body.v2.v2-page .svc-acc-item__num { padding: 0.15rem 0.5rem; margin-right: 0; letter-spacing: 0.08em; }
  body.v2.v2-page .svc-acc-item__q-text { gap: 0.5rem; font-size: clamp(0.78rem, 4.3vw, 1.0625rem); }
  body.v2.v2-page .svc-acc-item__a-inner { padding-inline: 0.8rem; }
}

/* ---- Startseite, Vorstellung auf dem Handy: grosses Portraet, kompakte Karte unten ----
   Die Karte bleibt kurz (Chip, Name, Satz, zwei Knoepfe), alles uebrige Platz der ersten Bildschirmhoehe gehoert dem Portraet. */
@media (max-width: 900px) {
  :root { --hero-card-h: 18.6rem; }
  .v2-hero__stage { padding-top: calc(var(--header-h) + 0.5rem); gap: 0.75rem; padding-bottom: 0; }
  .v2-hero__figure {
    width: min(86vw, 460px, calc((100svh - var(--header-h) - var(--hero-card-h) - 3.5rem) * 0.83));
    margin-inline: auto;
  }
  .v2-hero__body { gap: 0.4rem; padding: 0.9rem 1.1rem 1rem; max-width: none; }
  .v2-hero__eyebrow { margin-bottom: 0; font-size: 0.66rem; align-self: flex-start; }
  .v2-hero__title { margin: 0; }
  .v2-hero__title-lead { font-size: 1.55rem; line-height: 1.1; }
  .v2-hero__title-rest { margin-top: 0.4rem; font-size: 0.86rem; line-height: 1.45; max-width: none; }
  /* Die Knoepfe stehen untereinander; rechts bleibt die Ecke fuer den Telefon-Knopf frei */
  .v2-hero__actions { display: flex; flex-direction: column; align-items: stretch; gap: 0.5rem; margin-top: 0.5rem; width: auto; }
  .v2-hero__actions .cta-orbit { height: 42px; font-size: 0.82rem; padding-inline: 1rem; }
}

/* ---- Wisch-Hinweis zwischen Animation und Textkarte (assets/js/swipe-nav.js), nur Handy ---- */
.swipe-hint { display: none; }
@media (max-width: 900px) {
  .swipe-hint {
    position: absolute;
    right: calc(clamp(1rem, 5vw, 3rem) + 0.6rem);
    bottom: 12rem;
    transition: opacity 250ms ease;
    z-index: 7;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.3rem;
    border-radius: 999px;
    background: rgba(4, 24, 52, 0.45);
    border: 1px solid rgba(127, 227, 255, 0.22);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    pointer-events: auto;
    opacity: 0.85;
  }
  .swipe-hint__arrow {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: #7fe3ff;
    cursor: pointer;
  }
  .swipe-hint__arrow svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
  .swipe-hint__arrow--prev svg { animation: swipe-nudge-l 2.6s ease-in-out infinite; }
  .swipe-hint__arrow--next svg { animation: swipe-nudge-r 2.6s ease-in-out infinite; }
  .swipe-hint__dots { display: flex; gap: 0.38rem; }
  .swipe-hint__dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(127, 227, 255, 0.25); transition: background 250ms ease, transform 250ms ease; }
  .swipe-hint__dots i.is-on { background: #7fe3ff; transform: scale(1.25); box-shadow: 0 0 6px rgba(127, 227, 255, 0.7); }
  @keyframes swipe-nudge-l { 0%, 70%, 100% { transform: none; } 80% { transform: translateX(-3px); } 90% { transform: none; } }
  @keyframes swipe-nudge-r { 0%, 70%, 100% { transform: none; } 80% { transform: translateX(3px); } 90% { transform: none; } }
  @media (prefers-reduced-motion: reduce) { .swipe-hint__arrow svg { animation: none; } }

  /* Leistungen, Variante 2: das eingebettete Fenster schluckt sonst die Beruehrungen, das Wischen gehoert der Seite */
  .lst-v2embed iframe { pointer-events: none; }

  /* Startseite: die Karte der jeweiligen Leistung loest "Sechs Hebel" unten ab (auf dem Handy gab es sie bisher nicht) */
  .v2-orbit__stage .v2-orbit__copy { opacity: calc(var(--copy, 0) * (1 - var(--now-hide, 0))); }
  .v2-orbit__stage .v2-orbit__satcard {
    display: grid;
    left: clamp(1rem, 5vw, 3rem);
    right: clamp(1rem, 5vw, 3rem);
    top: auto;
    bottom: var(--hero-card-bottom);
    width: auto;
    padding: 0.9rem 1.1rem;
    gap: 0.5rem;
  }
  .v2-orbit__satcard .v2-orbit__now-title { font-size: 1.25rem; }
  .v2-orbit__satcard .v2-orbit__now-text { font-size: 0.86rem; line-height: 1.5; }

  /* Platz fuer den Hinweis: die Szene ein Stueck hoeher */
  .lst-orbit__system { top: 53%; }
  .v2-orbit__system { top: 44%; }
}

/* ---- Startseite auf dem Handy: Bereiche loesen sich ab statt sich zu ueberlagern ---- */
@media (max-width: 900px) {
  /* "Was wir tun"-Karte des Heros weicht, sobald die Orbit-Buehne hochkommt (--focus, orbit.js) */
  .v2-hero__turn { opacity: max(0, calc(1 - var(--focus, 0) * 2.2)); }
  /* Bedienelemente der Orbit-Buehne blenden aus, sobald die Folgesektion darueberlaeuft (--leave, swipe-nav.js) */
  .v2-orbit__stage > :not(.v2-orbit__system) { opacity: calc(var(--leave-op, 1)); }
  .v2-orbit__stage .v2-orbit__copy { opacity: calc(var(--copy, 0) * (1 - var(--now-hide, 0)) * var(--leave-op, 1)); filter: none; transform: none; }
  .v2-orbit__stage .v2-orbit__satcard { opacity: calc(var(--now-m, 0) * var(--leave-op, 1)); filter: none; transform: none; }
  .lst-journey__stage .lst-track__caption { filter: none; transform: none; }
  [data-orbit-play].is-playing { background: rgba(127, 227, 255, 0.22); }

  /* Blocksatz in den Textkarten */
  .v2-hero__title-rest, .v2-turn__lead, .v2-orbit__lead, .v2-orbit__now-text, .v2-orbit__intro-text,
  .lst-track__caption-text, .v2-step p, .lst-orbit__lead { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
}
@media (max-width: 900px) {
  .v2-orbit__system { opacity: calc(var(--sys-opacity, 1) * var(--leave-op, 1)); }
}

/* Bestellung auf dem Handy: die Zusammenfassung haftet nicht mehr schwebend ueber den Feldern, sondern steht am Ende des Formulars */
@media (max-width: 900px) {
  body.v2.v2-page .summe { position: static; margin-bottom: var(--space-md); }
}


/* =============================================================================
   Leistungen, Variante 1 auf kleinen und mittleren Bildschirmen: Karte, Planet und Trabanten im Gleichgewicht
   - die Textkarte links steht in der Hoehe mittig und ist schmaler, ihre Schrift richtet sich nach Breite UND Hoehe
   - der Projektplanet ist kleiner, die Trabanten groesser, damit sie als Planeten mit Beschriftung lesbar sind
   - die Scrollstrecke je Leistung ist laenger (mehr Zeit zum Einrasten)
   ============================================================================= */
@media (min-width: 901px) {
  .lst-track__caption {
    top: 50%;
    translate: -50% -50%;
    left: 27%;
    width: min(26rem, 30vw);
    padding: clamp(0.9rem, 2.4vh, 1.8rem) clamp(1rem, 1.8vw, 1.8rem);
  }
  .lst-track__caption-kicker { font-size: clamp(0.58rem, 1.4vh, 0.68rem); margin-bottom: 0.4rem; }
  .lst-track__caption-title { font-size: clamp(1.15rem, min(2.1vw, 3.8vh), 2rem); line-height: 1.12; margin-bottom: 0.45rem; }
  .lst-track__caption-text { font-size: clamp(0.8rem, min(0.98vw, 1.9vh), 0.98rem); line-height: 1.5; hyphens: manual; -webkit-hyphens: manual; }
  .lst-track__caption--intro .lst-track__caption-title { font-size: clamp(1.4rem, min(3vw, 5.4vh), 2.5rem); }
  .lst-track__caption--intro .lst-track__caption-text { font-size: clamp(0.82rem, min(1vw, 1.9vh), 1rem); }

  .lst-orbit__system { width: min(76vh, 34vw); left: var(--sys-x, 70%); }
  .lst-orbit__sat { width: clamp(70px, min(8vw, 15vh), 124px); }
  .lst-track { min-height: 1100svh; }   /* je Leistung gut 180 Bildschirmhoehen: die Trabanten bleiben lange im Bild */
}
@media (min-width: 1500px) {
  .lst-orbit__system { width: min(78vh, 35vw); }
}

/* =============================================================================
   Heros fuellen mindestens eine Bildschirmhoehe (100svh) - auf allen Seiten und in allen Fenstergroessen.
   Vorher war z. B. der Start-Hero im Hochformat-Tablet (820x1180) 37 px kuerzer als das Fenster und die naechste Sektion
   schaute unten herein; auf grossen Monitoren endete der Hero der Marvin-Seite vor dem unteren Rand.
   ============================================================================= */
/* Desktop: Der Hero ist laenger als ein Bildschirm (min-height in svh weiter oben), seine Buehne klebt auf 100svh. */
@media (max-width: 900px) {
  .v2-hero { min-height: 100svh; }
}
/* Einleitung der Unterseiten: der erste Block steht als Hero mittig in einer vollen Bildschirmhoehe (unter der Kopfleiste) */
body.v2.v2-page main:has(.mdv-intro-grid) > section:first-child {
  min-height: 100svh;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
body.v2.v2-page main:has(.mdv-intro-grid) > section:first-child > .container { width: 100%; }
body.v2.v2-page main > .order > .order__intro-grid {
  min-height: calc(100svh - 2rem);
  align-content: center;
  box-sizing: border-box;
}


/* Handy: die Vorstellung (Portraet + Karte) fuellt genau eine Bildschirmhoehe, "Was wir tun" beginnt erst darunter - kein Anschnitt der
   naechsten Sektion am unteren Rand. Auf dem Desktop hat der Wrapper keine eigene Box. */
.v2-hero__first { display: contents; }
@media (max-width: 900px) {
  .v2-hero__first {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    min-height: calc(100svh - var(--header-h) - 0.5rem);
    padding-bottom: 1rem;
    gap: 0.75rem;
  }
  .v2-hero__first .v2-hero__figure { margin-block: auto; }
  .v2-hero__first .v2-hero__body { flex: 0 0 auto; }
  .v2-hero__stage { gap: 0; }
  .v2-hero__turn { margin-top: 0.75rem; }
}


/* =============================================================================
   Leistungskonfigurator (bestellung.html, assets/js/order-steps.js): eine Karte, ein Schritt zugleich
   Aufbau wie der Produktfinder im Greve-Behrens-Projekt (Schrittleiste, Frage, Zurueck / Ist mir egal / Weiter), im Kartenstil dieser Seite.
   ============================================================================= */
.order--steps [hidden], .order--steps .konf__chips[hidden] { display: none !important; }
body.v2.v2-page .konfkarte {
  position: relative;
  max-width: 920px;
  margin-inline: auto;
  background: var(--card-bg);
  border: 1px solid var(--card-line);
  border-radius: 12px;
  box-shadow: var(--card-glow);
  overflow: hidden;
}
body.v2.v2-page .konfkarte::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--card-corners);
  filter: drop-shadow(0 0 4px #3fd8ff);
  z-index: 3;
}
/* Schrittleiste */
.konf { padding: clamp(0.9rem, 2vh, 1.3rem) clamp(1rem, 2.4vw, 1.8rem) 0; }
.konf__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }
.konf__step {
  all: unset;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0 0.5rem;
  border-top: 2px solid rgba(127, 227, 255, 0.18);
  color: rgba(214, 228, 245, 0.55);
  font-family: var(--font-display);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 200ms ease, border-color 200ms ease;
}
.konf__step:disabled { cursor: default; }
.konf__num {
  display: inline-grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 1px solid currentColor;
  font-size: 0.7rem;
  letter-spacing: 0;
}
.konf__step.is-current { color: #7fe3ff; border-top-color: #7fe3ff; }
.konf__step.is-current .konf__num { background: rgba(127, 227, 255, 0.16); box-shadow: 0 0 10px rgba(127, 227, 255, 0.5); }
.konf__step.is-done { color: #5dffb0; border-top-color: rgba(93, 255, 176, 0.5); }
.konf__step:focus-visible { outline: 2px solid #7fe3ff; outline-offset: 2px; }
/* Auswahl-Chips */
.konf__chips { list-style: none; margin: 0.7rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.konf__chips li {
  padding: 0.18rem 0.7rem;
  border-radius: 999px;
  font-size: 0.74rem;
  color: #d9f4ff;
  background: rgba(127, 227, 255, 0.1);
  border: 1px solid rgba(127, 227, 255, 0.35);
}
/* der aktive Schritt: kein zweiter Kartenrahmen */
body.v2.v2-page .order--steps .order__block {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: clamp(0.8rem, 2vh, 1.2rem) clamp(1rem, 2.4vw, 1.8rem) 0 !important;
  margin: 0 !important;
}
body.v2.v2-page .order--steps .order__block::before,
body.v2.v2-page .order--steps .order__block::after { display: none !important; }
body.v2.v2-page .order--steps .order__block-title {
  margin: 0 0 0.35rem;
  padding: 0;
  border: 0;
  background: none;
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  line-height: 1.2;
  outline: none;
}
body.v2.v2-page .order--steps .order__block-body { padding: 0; border: 0; background: none; }
.order--steps .order__note { margin: 0 0 0.7rem; font-size: 0.86rem; }
@media (prefers-reduced-motion: no-preference) {
  .order--steps .order__block.is-current { animation: konf-in 280ms ease both; }
}
@keyframes konf-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* kompakte Auswahlkacheln: drei Spalten, kurzer Text */
.order--steps .svc-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
.order--steps .svc-pick { padding: 0.75rem 0.85rem; min-height: 0; }
.order--steps .svc-pick__title { font-size: 0.92rem; }
.order--steps .svc-pick__text { font-size: 0.76rem; line-height: 1.4; }
.order--steps .budget-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; }
.order--steps .fields { gap: 0.7rem 1rem; }
.order--steps textarea { min-height: 7rem; }
/* Aktionsleiste */
.konf__actions {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: clamp(0.9rem, 2vh, 1.3rem) clamp(1rem, 2.4vw, 1.8rem) clamp(1rem, 2.4vh, 1.5rem);
}
.konf__btn {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  padding: 0.65rem 1.4rem;
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  transition: background-color 200ms ease, border-color 200ms ease, opacity 200ms ease;
}
.konf__btn--ghost { border: 1px solid rgba(127, 227, 255, 0.35); color: #cfeeff; }

.konf__btn--ghost:hover,
.konf__btn--ghost:focus-visible { background: rgba(127, 227, 255, 0.12); border-color: #7fe3ff; }
.konf__btn--primary { margin-left: auto; color: #021226; background: linear-gradient(90deg, #7fe3ff, #4db4ff); font-weight: 700; }

.konf__btn--primary:hover:not(:disabled),
.konf__btn--primary:focus-visible:not(:disabled) { filter: brightness(1.08); }
.konf__btn--primary:disabled { opacity: 0.4; cursor: not-allowed; }
.konf__skip { all: unset; cursor: pointer; margin-left: auto; font-size: 0.82rem; color: rgba(214, 228, 245, 0.7); text-decoration: underline; text-underline-offset: 3px; }
.konf__skip:hover { color: #fff; }
.konf__skip:not([hidden]) + .konf__btn--primary { margin-left: 0; }
.konf__btn:focus-visible, .konf__skip:focus-visible { outline: 2px solid #7fe3ff; outline-offset: 2px; }
@media (max-width: 760px) {
  .order--steps .svc-picker, .order--steps .budget-row { grid-template-columns: 1fr 1fr; }
  .konf__lab { display: none; }
  .konf__step { justify-content: center; }
  .konf__actions { flex-wrap: wrap; }
  .konf__btn--primary { flex: 1 1 100%; margin-left: 0; order: 3; }
}
@media (max-width: 480px) {
  .order--steps .svc-picker { grid-template-columns: 1fr; }
}
body.v2.v2-page .konfkarte { width: 100%; box-sizing: border-box; }
/* letzter Schritt: die Absende-Leiste steht unter der Karte im Fluss statt als Leiste ueber dem Inhalt */
body.v2.v2-page .order--steps .summe { position: static; max-width: 920px; margin: 1rem auto 0; }


/* FAQ der Bestellseite (native details, passend zum Schema im Kopf der Seite) */
.order-faq { max-width: 920px; margin: clamp(2rem, 6vh, 4rem) auto 0; }
.order-faq__list { display: grid; gap: 0.7rem; margin-top: 1rem; }
.order-faq__item {
  background: var(--card-bg);
  border: 1px solid var(--card-line);
  border-radius: 12px;
  box-shadow: var(--card-glow);
  overflow: hidden;
}
.order-faq__item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.95rem 1.2rem;
  font-family: var(--font-display);
  font-weight: 600;
  color: #fff;
}
.order-faq__item summary::-webkit-details-marker { display: none; }
.order-faq__item summary::after {
  content: "+";
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(127, 227, 255, 0.4);
  border-radius: 50%;
  color: #7fe3ff;
  transition: transform 220ms ease;
}
.order-faq__item[open] summary::after { transform: rotate(45deg); }
.order-faq__item summary:focus-visible { outline: 2px solid #7fe3ff; outline-offset: -2px; }
.order-faq__item p { margin: 0; padding: 0 1.2rem 1.1rem; color: rgba(214, 228, 245, 0.86); line-height: 1.6; }
.order-faq__item a { color: #7fe3ff; }
@media (max-width: 900px) {
  .lst-track { min-height: 720svh; }
}

/* =============================================================================
   Lesbarkeit der Hero-Karten ueber dem Planeten: die Glasflaeche war mit 42 % Deckkraft zu durchsichtig, helle Wolken und Land
   schimmerten durch den Text (Kontrast zum Teil unter 4,5:1). Jetzt dunkles Glas mit etwa 85 % Deckkraft und hellere Schrift.
   ============================================================================= */
.v2-hero__body,
.v2-hero__turn-copy,
.v2-hero__more {
  --card-bg: linear-gradient(135deg, rgba(6, 20, 44, 0.86), rgba(2, 10, 26, 0.92));
}
.v2-hero__text p,
.v2-hero__title-rest,
.v2-turn__lead,
.v2-hero__more-text { color: rgba(240, 248, 252, 0.95); }

/* Das dunkle Blau der Hero-Karten gilt fuer alle Karten der Startseite (Seiten mit v2-page behalten ihr eigenes Glas) */
body.glas:not(.v2-page) {
  --card-bg: linear-gradient(135deg, rgba(6, 20, 44, 0.86), rgba(2, 10, 26, 0.92));
}

/* Wiedergabe-Knoepfe (Pause / Ueberspringen) unter dem Hinweis "Ziehen zum Drehen", mittig unter dem Planeten */
@media (min-width: 901px) {
  .v2-orbit__stage > .v2-variants {
    top: calc(50% + min(68vh, 42vw) / 2 + 3.4rem);
    left: var(--sys-x, 80%);
    translate: -50% 0;
  }
}

/* Schmale Schirme: das Fenster mit Adresse und Karte oeffnet mittig im Bild, nicht neben der Kontaktleiste (dort lief es aus dem Bild) */
@media (max-width: 900px) {
  .contact-bar__map-popover {
    position: fixed;
    left: 50%;
    right: auto;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(92vw, 380px);
    max-height: 88vh;
    overflow-y: auto;
    z-index: 60;
  }
}

/* Wiedergabe-Knoepfe: weg, sobald die Buehne verlassen wird */
.v2-variants.is-off { opacity: 0; pointer-events: none; visibility: hidden; transition: opacity 250ms ease, visibility 0s linear 250ms; }

/* Anfrageseite: Einleitung fuellt genau den sichtbaren Bildschirm (unter der Vertrauensleiste) und steht darin mittig - vorher begann sie
   erst 180 px unter der Kante, lief ueber den Bildschirm hinaus und liess oben viel Leerraum. Unten bekommt die Fussnote Luft. */
body.v2.v2-page main > .order { padding-top: 0; }
body.v2.v2-page main > .order > .order__intro-grid {
  min-height: calc(100svh - 3.4rem);
  align-content: center;
  padding-block: clamp(5rem, 11vh, 7rem) clamp(1.5rem, 5vh, 3rem);   /* oben unter der schwebenden Kopfleiste, unten kein Anstossen */
}
body.v2.v2-page .order-faq { margin-bottom: clamp(1.5rem, 4vh, 3rem); }
body.v2.v2-page .order__legal {
  max-width: 920px;
  margin: clamp(1.5rem, 4vh, 2.5rem) auto 0;
  padding-bottom: clamp(2rem, 6vh, 4rem);
  line-height: 1.6;
}

/* ---- Handy / schmale Fenster: Fortschritt, Wiedergabe-Knoepfe und Wisch-Anzeige stehen in einem Block unter der Kopfzeile ----
   Reihenfolge von oben: Ueberschrift der Sektion, Fortschrittsleiste (acht Segmente, jedes zeigt seinen Fuellstand), Knoepfe, Pager.
   Vorher lag die Leiste ueber der Textkarte und verdeckte die Ueberschrift. */
@media (max-width: 900px) {
  .v2-orbit__progress {
    top: calc(var(--header-h) + 2.1rem);
    bottom: auto;
    left: 12px;
    right: 12px;
    width: auto;
    translate: none;
    gap: 4px;
  }
  .v2-orbit__progress button { padding: 0.5rem 0; }
  .v2-orbit__progress i { height: 6px; }
  .v2-orbit__progress button:hover i,
  .v2-orbit__progress button:focus-visible i { height: 6px; }
  .v2-orbit__stage > .v2-variants,
  .lst-journey__stage .v2-variants { top: calc(var(--header-h) + 3.7rem); }
  .v2-orbit__stage > .swipe-hint,
  .lst-journey__stage > .swipe-hint {
    top: calc(var(--header-h) + 3.7rem + 3rem);
    bottom: auto;
    right: auto;
    left: 50%;
    translate: -50% 0;
  }
  .lst-journey__stage .v2-orbit__progress { width: auto; }
  .lst-hud__panel { width: clamp(92px, 25vw, 112px); }
  .lst-hud__caption { font-size: 0.56rem; }
  .lst-hud { top: calc(var(--header-h) + 3.7rem + 5.6rem); }
}

/* =============================================================================
   Unterseiten am Handy: keine Luecke unter der Kopfleiste, Inhalt auf die Bildschirmhoehe verteilt
   Die erste Sektion trug 182 px Polster oben (Sektionspolster plus Kopfleiste plus Abstand) - am Handy blieb dadurch ein leerer
   Streifen. Jetzt beginnt der Inhalt direkt unter der Kopfleiste.
   ============================================================================= */
@media (max-width: 900px) {
  body:not(.has-dark-hero) > main > :first-child {
    padding-top: calc(var(--nav-pill-h) + 1.5rem);
  }
  body.v2.v2-page main:has(.mdv-intro-grid) > section:first-child { align-items: flex-start; }
  /* Anfrageseite: Einleitung oben, Beratungskarte unten - auf eine Bildschirmhoehe verteilt, ohne Leerstreifen */
  body.v2.v2-page main > .order > .order__intro-grid {
    min-height: calc(100svh - 3.4rem);
    align-content: space-between;
    padding-block: 3rem 1.5rem;
    row-gap: 1.5rem;
  }
  .error-page { min-height: calc(100svh - 3.4rem); }
}

/* Kontakt: das Buchungsformular passt am Handy auf einen Bildschirm (Terminarten kompakt, ohne Beschreibung) */
@media (max-width: 700px) {
  body.v2.v2-page .booking-type { padding: 0.55rem 0.7rem; gap: 0.6rem; }
  body.v2.v2-page .booking-type__desc { display: none; }
  body.v2.v2-page .booking-type__name { font-size: 0.95rem; }
  body.v2.v2-page .booking-type__meta { font-size: 0.78rem; margin-top: 0.1rem; }
}

/* Leistungen am Handy: die Animation steht hoeher, die Karten "Leistung" und "Wirkung ueber die Zeit" darunter (zwischen Animation und Textkarte) */
@media (max-width: 900px) {
  .lst-v2embed { inset: auto 0 auto 0; top: calc(var(--header-h) + 7.4rem); height: 36svh; }
  .lst-hud { top: calc(var(--header-h) + 7.4rem + 36svh + 0.2rem); }
}
@media (max-width: 900px) and (max-height: 700px) {
  .lst-hud { display: none; }   /* auf sehr niedrigen Schirmen ist kein Platz zwischen Animation und Textkarte */
}

/* =============================================================================
   Startseite am Handy: Hero-Karten nacheinander, danach die Animation - ohne Ueberdeckung, ohne Hintergrundplanet
   ============================================================================= */
@media (max-width: 900px) {
  /* Die Orbit-Sektion beginnt erst unter dem Hero (sie ragte 240 px in die letzte Hero-Karte hinein) */
  .v2-space__bg { margin-bottom: -100svh; }
  /* Der Planet steht im Hero nicht mehr als Hintergrund hinter Marvin; er erscheint, wenn die Orbit-Buehne ins Bild kommt (--focus) */
  .v2-orbit__system {
    opacity: calc(var(--sys-opacity, 1) * clamp(0, calc((var(--focus, 0) - 0.55) * 3), 1));
  }
  /* Karte 2 steht am Handy als normaler Block zwischen Vorstellung und "Was wir tun" */
  .v2-hero__more {
    display: grid !important;
    position: static;
    width: auto;
    margin: var(--space-sm) 0 0;
    padding: 0.9rem 1.1rem 1rem;
    gap: 0.5rem;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    pointer-events: auto;
    background: var(--card-bg, linear-gradient(135deg, rgba(6, 20, 44, 0.86), rgba(2, 10, 26, 0.92)));
    border: 1px solid rgba(127, 227, 255, 0.3);
    border-radius: 12px;
  }
  .v2-hero__more-lead { font-size: 1.15rem; line-height: 1.25; }
  .v2-hero__more-text { font-size: 0.9rem; line-height: 1.55; }
  /* Einblenden nacheinander (nur mit JavaScript, sonst bleiben alle Karten stehen) */
  .m-reveal .v2-hero__body,
  .m-reveal .v2-hero__more,
  .m-reveal .v2-hero__turn-copy {
    opacity: 0 !important;
    transform: translateY(26px) !important;
    transition: opacity 600ms ease, transform 600ms ease;
  }
  .m-reveal .v2-hero__body.is-in,
  .m-reveal .v2-hero__more.is-in,
  .m-reveal .v2-hero__turn-copy.is-in { opacity: 1 !important; transform: none !important; }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .m-reveal .v2-hero__body, .m-reveal .v2-hero__more, .m-reveal .v2-hero__turn-copy { opacity: 1 !important; transform: none !important; transition: none; }
}

/* "Mehr Sichtbarkeit fuer Ihr Unternehmen" am Handy: Ueberschrift und die drei Schritte stehen zusammen auf einem Bildschirm und bleiben ueber
   mehrere Scrollschritte stehen. Vorher war der Inhalt hoeher als der Bildschirm, wurde mittig ausgerichtet und die Ueberschrift lief
   oben unter die Kopfleiste und wurde fast unsichtbar. */
@media (max-width: 900px) {
  .v2-outro { min-height: 330svh; }
  .v2-outro__stage {
    align-content: start;
    gap: 0.9rem;
    padding: calc(var(--header-h) + 1rem) 1rem 1rem;
  }
  .v2-outro__claim { font-size: clamp(1.45rem, 7.2vw, 2rem); line-height: 1.15; }
  .v2-outro__claim-sub { margin-top: 0.5rem; font-size: 0.88rem; line-height: 1.4; }
  .v2-steps { gap: 0.6rem; }
  .v2-step {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.7rem;
    align-items: center;
    padding: 0.75rem 0.95rem 0.8rem;
  }
  .v2-step__num { margin: 0; }
  .v2-step h3 { margin: 0; font-size: 1.05rem; }
  .v2-step p { grid-column: 1 / -1; margin: 0.4rem 0 0; font-size: 0.88rem; line-height: 1.45; text-align: left; hyphens: auto; }
}

/* Fortschrittssegmente: grosse Trefferflaeche (rund 44 px hoch), der sichtbare Balken bleibt schmal */
.v2-orbit__progress button { position: relative; }
.v2-orbit__progress button::before { content: ""; position: absolute; inset: -0.45rem -2px; }

/* Kontakt-Buchung am Handy, Schritt 2 und 3: Kalender, Zeitfenster und Formular so kompakt, dass jeder Schritt auf einen Bildschirm passt */
@media (max-width: 700px) {
  body.v2.v2-page .booking { padding: 0.9rem 0.9rem 1rem; }
  body.v2.v2-page .booking__legend { margin-bottom: 0.5rem; font-size: 1.02rem; }
  body.v2.v2-page .booking__cal { padding: 0.5rem 0.6rem 0.6rem; }
  body.v2.v2-page .booking__cal-head { margin-bottom: 0.2rem; }
  body.v2.v2-page .booking__cal-day { min-height: 30px; height: 30px; padding: 0; font-size: 0.82rem; }
  body.v2.v2-page .booking__cal-grid { gap: 2px; }
  body.v2.v2-page .booking__slots-title { margin: 0.6rem 0 0.3rem; }
  body.v2.v2-page .booking__slots { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.3rem; }
  body.v2.v2-page .booking__slot { min-height: 34px; padding: 0; font-size: 0.8rem; }
  body.v2.v2-page .booking__nav { margin-top: 0.7rem; gap: 0.5rem; }
  body.v2.v2-page .booking__summary { padding: 0.45rem 0.7rem; margin: 0 0 0.5rem; font-size: 0.82rem; line-height: 1.35; }
  body.v2.v2-page .booking .field { margin-bottom: 0.5rem; }
  body.v2.v2-page .booking .form-row { gap: 0.5rem; }
  body.v2.v2-page .booking .field label { margin-bottom: 0.15rem; font-size: 0.68rem; }
  body.v2.v2-page .booking .field input[type="text"],
  body.v2.v2-page .booking .field input[type="email"],
  body.v2.v2-page .booking .field input[type="tel"] { min-height: 40px; padding: 0.35rem 0.65rem; }
  body.v2.v2-page .booking .field textarea { min-height: 0; height: 4.4rem; padding: 0.4rem 0.65rem; }
  body.v2.v2-page .booking .field--check label { font-size: 0.78rem; line-height: 1.35; }
}

@media (max-width: 700px) {
  /* Zurueck / Weiter nebeneinander statt untereinander */
  body.v2.v2-page .booking__nav { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
  body.v2.v2-page .booking__nav .btn { min-height: 46px; padding-inline: 0.4rem; font-size: 0.78rem; width: 100%; margin: 0; }
  body.v2.v2-page .booking .field { margin-bottom: 0.35rem; }
}

/* Handy im Querformat (niedriger Bildschirm): Fortschritt, Knoepfe und Pager stehen in einer schmalen Zeile unter der Kopfleiste,
   die Messkarten entfallen, Animation und Textkarte teilen sich den Rest */
@media (max-height: 520px) and (max-width: 950px) and (orientation: landscape) {
  .v2-eyebrow, .lst-eyebrow { display: none; }
  .v2-orbit__progress { top: calc(var(--header-h) + 0.1rem); }
  .v2-orbit__stage > .v2-variants,
  .lst-journey__stage .v2-variants { top: calc(var(--header-h) + 1.3rem); left: 12px; right: auto; width: auto; flex-wrap: nowrap; }
  .v2-orbit__stage > .swipe-hint,
  .lst-journey__stage > .swipe-hint { top: calc(var(--header-h) + 1.3rem); left: auto; right: 4.6rem; translate: none; }
  .lst-hud { display: none; }
  .lst-v2embed { top: calc(var(--header-h) + 3.6rem); height: calc(100svh - var(--header-h) - 3.6rem - 6.6rem); }
  .v2-orbit__system { top: 58%; width: min(30vh, 40vw); }
}

/* "Ueberspringen" ist am Ende der Abfolge inaktiv (nichts mehr zu ueberspringen) */
.v2-variants button:disabled { opacity: 0.38; cursor: default; border-color: rgba(140, 226, 240, 0.15); }
.v2-variants button:disabled:hover { background: transparent; }

/* ---- Hero (Desktop): Marvin steht zuerst in der Mitte und wandert beim Scrollen nach links, der Planet kommt dabei aus dem
   Hintergrund ins Bild, eingezoomt auf Hamburg und Norddeutschland (--shift, --hero-in, --hero-zoom: orbit.js) ---- */
@media (min-width: 901px) {
  .v2-hero__figure {
    translate: calc((1 - var(--shift, 1)) * (50vw - clamp(2rem, 17vw, 22rem) - min(34vw, 540px, 58svh) / 2)) 0;
  }
  .v2-orbit__system {
    scale: calc(var(--sys-scale, 1) * var(--hero-zoom, 1));
    opacity: calc(var(--sys-opacity, 1) * (0.78 + 0.22 * var(--focus, 1)) * var(--hero-in, 1));
  }
}

/* Handy: der laengere Text der Karte "Was wir tun" in Kartengroesse der uebrigen Hero-Karten */
@media (max-width: 900px) {
  .v2-hero__turn .v2-turn__lead { font-size: 0.9rem; line-height: 1.5; }
  .v2-hero__turn .v2-turn__title { font-size: clamp(1.7rem, 8vw, 2.2rem); }
}

/* =============================================================================
   Die drei Hero-Karten (Vorstellung, "Ihr Anliegen", "Was wir tun") im selben Stil
   Titel: gleiche Schrift, Groesse und derselbe Verlauf (Weiss nach Blau) ueber die ganze Zeile; Text darunter bzw. rechts.
   Karte 1 ohne Chip: Name als schlichte Zeile ueber dem Titel (H1 wie auf der alten Seite), Buttons links unten unter dem Titel.
   ============================================================================= */
.v2-hero__title-lead,
.v2-hero__more-lead,
.v2-hero__turn-copy .v2-turn__title {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-transform: none;
  background: linear-gradient(96deg, #ffffff 0%, #7fe3ff 48%, #3f7bff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.v2-hero__turn-copy .v2-turn__word,
.v2-hero__turn-copy .v2-turn__word--accent { display: inline; color: transparent; background: none; }
.v2-hero__turn-copy .v2-turn__word + .v2-turn__word::before { content: " "; }
.v2-hero__more[data-live] { pointer-events: auto; }
.v2-hero__eyebrow {
  display: block;
  padding: 0;
  margin: 0 0 0.55rem;
  background: none;
  border: 0;
  border-radius: 0;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--v2-core);
}
.v2-hero__eyebrow::before { content: none; display: none; }
.v2-hero__text p { margin: 0 0 0.7rem; }
.v2-hero__text p:last-child { margin-bottom: 0; }

@media (min-width: 901px) {
  .v2-hero__title-lead,
  .v2-hero__more-lead,
  .v2-hero__turn-copy .v2-turn__title { font-size: clamp(1.6rem, min(2.9vw, 4.6vh), 2.7rem); }
  .v2-hero__more-lead { font-weight: 700; }
  .v2-hero__body { grid-template-rows: auto auto; align-items: center; }
  .v2-hero__title { grid-column: 1; grid-row: 1; align-self: start; margin: 0; }
  .v2-hero__text { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .v2-hero__actions { grid-column: 1; grid-row: 2; align-self: end; margin-top: clamp(0.8rem, 2vh, 1.4rem); }
}

@media (max-width: 900px) {
  .v2-hero__title-lead,
  .v2-hero__more-lead,
  .v2-hero__turn-copy .v2-turn__title { font-size: 1.45rem; }
  .v2-hero__turn .v2-turn__title { font-size: 1.45rem; }
  .v2-hero__eyebrow { font-size: 0.7rem; margin-bottom: 0.35rem; }
  /* Karte 1: der Satz mit Region bleibt, der Absatz zur Erfahrung entfaellt (die Karten darunter sind kurz) */
  .v2-hero__text { display: block; }
  .v2-hero__text p { font-size: 0.86rem; line-height: 1.5; text-align: justify; hyphens: auto; }
  .v2-hero__text p { font-size: clamp(0.74rem, 1.7vh, 0.9rem); line-height: 1.4; margin-bottom: 0.4rem; }
}

/* Verlauf nur ueber die Breite des Textes, damit er in allen drei Karten gleich aussieht */
.v2-hero__title-lead,
.v2-hero__more-lead,
.v2-hero__turn-copy .v2-turn__title { width: fit-content; max-width: 100%; }
/* Kein Schimmer/Glanz ueber dem Portraet */
.v2-hero__photo::before, .v2-hero__photo::after { display: none !important; animation: none !important; }
@media (min-width: 901px) {
  .v2-orbit__system { translate: -50% calc(-50% + var(--hero-dy, 0%)); }
}
.v2-orbit__system.is-hero-solo .v2-orbit__sat,
.v2-orbit__system.is-hero-solo .v2-orbit__ring,
.v2-orbit__system.is-hero-solo .v2-orbit__drag-hint { opacity: 0 !important; transition: opacity 400ms ease; pointer-events: none; }
html.orbit-away .v2-orbit__copy,
html.orbit-away .v2-orbit__intro,
html.orbit-away .v2-orbit__summary,
html.orbit-away .v2-orbit__satcard { opacity: 0 !important; transition: opacity 250ms ease; pointer-events: none; }

/* =============================================================================
   Hero jeder Unterseite = genau ein Bildschirm (100svh), Inhalt beginnt unter der Kopfzeile
   Marvin de Vries, Kontakt, Leistungen anfragen: die erste Sektion fuellt die Hoehe, der Inhalt sitzt mittig und ist an der Hoehe skaliert.
   ============================================================================= */
body.v2.v2-page:not(.has-dark-hero) main > section:first-child,
body.v2.v2-page:not(.has-dark-hero) main > form > .order__intro-grid {
  box-sizing: border-box;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: calc(var(--header-h, 76px) + 1rem);
  padding-bottom: 1.5rem;
}
body.v2.v2-page:not(.has-dark-hero) main > section:first-child > .container { width: 100%; }

/* Marvin de Vries: Karte und Portraet in einen Bildschirm */
body.v2.v2-page main:has(.mdv-intro-grid) > section:first-child { max-height: none; }
body.v2.v2-page .mdv-intro-grid { align-items: center; }
body.v2.v2-page .mdv-intro-card .section__title { font-size: clamp(1.5rem, min(3.4vw, 5.2vh), 2.8rem); margin-bottom: 0.6rem; }
body.v2.v2-page .mdv-intro-card .section__lead { font-size: clamp(0.82rem, 2.1vh, 1.05rem); line-height: 1.55; margin-bottom: 0.7rem; }
body.v2.v2-page .mdv-intro-card .mdv-text { font-size: clamp(0.78rem, 1.9vh, 0.98rem); line-height: 1.5; margin-bottom: 0.7rem; }
body.v2.v2-page .mdv-intro-card .mdv-claim { font-size: clamp(0.78rem, 1.9vh, 0.98rem); }
body.v2.v2-page .mdv-portrait { max-height: calc(100svh - var(--header-h, 76px) - 3rem); width: auto; max-width: 100%; }

/* Kontakt: der Kopf (Titel und Einleitung) fuellt den Bildschirm, Termin und Kontaktdaten folgen darunter */
@media (max-width: 900px) {
  body.v2.v2-page main:has(.contact-grid):not(:has(.mdv-intro-grid)) > section:first-child .section__head {
  min-height: calc(100svh - var(--header-h, 76px) - 3rem);
  display: flex; flex-direction: column; justify-content: center; margin-bottom: 0;
}
}

@media (max-width: 900px) {
  /* Handy: Marvin-Karte kuerzer, damit sie samt Portraet in einen Bildschirm passt */
  body.v2.v2-page .mdv-intro-grid { grid-template-columns: 1fr; gap: 0.8rem; }
  body.v2.v2-page .mdv-intro-card .mdv-text { display: none; }
  body.v2.v2-page .mdv-intro-card .section__lead { font-size: 0.9rem; line-height: 1.5; text-align: justify; hyphens: auto; }
  body.v2.v2-page .mdv-intro-card .section__title { font-size: 1.5rem; }
  body.v2.v2-page .mdv-portrait { max-height: 30svh; margin-inline: auto; display: block; }
  body.v2.v2-page .mdv-claim { font-size: 0.85rem; }
}

@media (max-width: 900px) {
  /* Handy: Marvin-Hero (Karte, Portraet) und Anfrage-Hero in einen Bildschirm */
  body.v2.v2-page .mdv-intro-card { padding: 0.9rem 1rem; }
  body.v2.v2-page .mdv-intro-card .eyebrow { margin-bottom: 0.3rem; }
  body.v2.v2-page .mdv-intro-card .section__lead { font-size: 0.82rem; line-height: 1.42; }
  body.v2.v2-page .mdv-claim { display: none; }
  body.v2.v2-page .mdv-portrait { max-height: 26svh; }
  body.v2.v2-page .order__intro .section__title { font-size: clamp(1.4rem, 7vw, 1.8rem); }
  body.v2.v2-page .order__intro .section__lead { font-size: 0.85rem; line-height: 1.45; text-align: justify; hyphens: auto; }
  body.v2.v2-page .order__intro-grid { gap: 0.8rem; }
  body.v2.v2-page .order__beratung { padding: 0.8rem 1rem; }
  body.v2.v2-page .order__beratung p { font-size: 0.82rem; line-height: 1.4; }
}

/* =============================================================================
   Handy, Startseite: gleiche Abstaende zwischen den Hero-Karten; Orbit-Buehne mit Reihenfolge Ueberschrift, Planet, danach erst
   Fortschrittsleiste (ueber dem Planeten) und Wiedergabe-Knoepfe (darunter)
   ============================================================================= */
@media (max-width: 900px) {
  .v2-hero__stage { row-gap: 0.9rem; }
  .v2-hero__more { margin: 0 !important; }
  .v2-hero__turn { padding: 0 !important; }
  .v2-hero__turn-copy { margin: 0; }

  .v2-orbit__stage { --ow: min(26vh, 52vw); }
  .v2-orbit__stage .v2-orbit__system { top: 41%; width: var(--ow); }
  .v2-orbit__stage > .v2-orbit__progress {
    top: calc(41% - var(--ow) / 2 - 4.4rem);
    opacity: 0 !important;
  }
  .v2-orbit__stage > .v2-orbit__progress.is-on { opacity: calc(clamp(0, calc((var(--focus, 0) - 0.94) * 16), 1) * var(--leave-op, 1)) !important; }
  .v2-orbit__stage > .v2-variants {
    top: calc(41% + var(--ow) / 2 + 2.6rem);
    opacity: clamp(0, calc((var(--focus, 0) - 0.85) * 6.7), 1);
  }
  .v2-orbit__stage > .swipe-hint { top: auto; bottom: calc(var(--hero-card-bottom, 1rem) + 8.5rem); }
}
@media (max-width: 900px) {
  .v2-orbit__stage > .swipe-hint { top: auto !important; right: 1.2rem; left: auto; translate: none; }
}

/* =============================================================================
   Leistungen am Handy: Fortschritt oben (mit Zurueck/Weiter an den Enden), dann Animation, darunter die Bedienknoepfe; Pager-Zeile entfaellt
   ============================================================================= */
@media (max-width: 900px) {
  .lst-journey__stage > .swipe-hint { display: none !important; }
  .lst-journey__stage .v2-orbit__progress { left: 44px; right: 44px; }
  .lst-prev, .lst-next {
    position: absolute; z-index: 7; top: calc(var(--header-h) + 2.1rem); width: 32px; height: 28px; padding: 0;
    display: grid; place-items: center; background: none; border: 0; color: #7fe3ff; cursor: pointer; pointer-events: auto;
  }
  .lst-prev { left: 8px; } .lst-next { right: 8px; }
  .lst-prev svg, .lst-next svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
  .lst-prev:disabled, .lst-next:disabled { opacity: 0.3; }
  .lst-v2embed { top: var(--emb-top, calc(var(--header-h) + 3.4rem)); height: var(--emb-h, calc(100svh - var(--header-h) - 3.4rem - 16.2rem)); }
  .lst-journey__stage .v2-variants { top: var(--btn-top, auto); bottom: auto; background: none !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; padding: 0; }
  .lst-hud { display: none; }
}
@media (max-width: 900px) and (min-height: 760px) { .lst-hud { display: none; } }

/* Leistungen, aufgeklapptes Feld: fuellt den Bildschirm unter der Kopfzeile, laeuft die Antwort darueber hinaus, scrollt die Seite normal */
.svc-acc-item[data-open="true"] { scroll-margin-top: calc(var(--header-h, 76px) + 0.8rem); }
@media (max-width: 900px) {
  body.v2.v2-page .svc-acc-item[data-open="true"] { min-height: calc(100svh - var(--header-h, 76px) - 1.6rem); }
  body.v2.v2-page .svc-acc-item[data-open="true"] .svc-acc-item__a { max-height: none; }
}

/* Startseite Handy: Bedienknoepfe ohne Huelle unter dem Planeten, Zurueck/Weiter an der Fortschrittsleiste, kein Pager */
@media (max-width: 900px) {
  .v2-orbit__stage .v2-orbit__system { top: 37% !important; }
  .v2-orbit__stage > .v2-orbit__progress { top: calc(37% - var(--ow) / 2 - 4.6rem); left: 44px; right: 44px; }
  .v2-orbit__stage > .v2-variants {
    top: calc(37% + var(--ow) / 2 + 5.4rem) !important;
    background: none !important; border: 0 !important; box-shadow: none !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    padding: 0; justify-content: center;
  }
  .v2-orbit__stage > .swipe-hint { display: none !important; }
  .v2-orbit__stage > .lst-prev, .v2-orbit__stage > .lst-next { top: calc(37% - var(--ow) / 2 - 4.6rem - 0.1rem); opacity: calc(clamp(0, calc((var(--focus, 0) - 0.94) * 16), 1) * var(--leave-op, 1)); }
  /* Keine Chips mit Punkt: die Zeile ueber der Karte entfaellt */
  .v2-orbit__copy-kicker, .v2-orbit__intro-kicker, .lst-track__caption-kicker::before,
  .v2-track__caption-kicker::before { display: none; }
  .v2-orbit__copy-kicker, .v2-orbit__intro-kicker { padding: 0; border: 0; background: none; }
}
.v2-orbit__copy-kicker, .v2-orbit__intro-kicker, .v2-hero__eyebrow, .lst-track__caption-kicker, .v2-track__caption-kicker, .v2-orbit__summary-kicker {
  padding: 0 !important; background: none !important; border: 0 !important; border-radius: 0 !important;
}
.v2-orbit__copy-kicker::before, .v2-orbit__intro-kicker::before, .lst-track__caption-kicker::before, .v2-track__caption-kicker::before, .v2-orbit__summary-kicker::before { display: none !important; }

/* Startseite Handy: Reihenfolge Ueberschrift -> Planet -> Leiste und Buttons; Schritte laufen langsamer (laengere Scrollstrecke + sanftes Einrasten) */
@media (max-width: 900px) {
  :root { --ow: min(34vh, 66vw); }
  .v2-orbit { min-height: 560svh; }
  .v2-orbit__stage > .v2-eyebrow {
    top: calc(var(--header-h) + 1.1rem); left: 16px; font-size: 0.8rem; letter-spacing: 0.2em; color: rgba(234, 246, 251, 0.85);
    opacity: calc(clamp(0, calc((var(--focus, 0) - 0.9) * 10), 1) * var(--leave-op, 1));
  }
  .v2-journey__stage .v2-orbit__system {
    top: 41% !important;
    width: var(--ow) !important;
    opacity: calc(var(--sys-opacity, 1) * calc(clamp(0, calc((var(--focus, 0) - 0.985) * 70), 1) * var(--leave-op, 1)) * var(--leave-op, 1)) !important;
    transition: opacity 600ms ease;
  }
  .v2-orbit__stage > .v2-orbit__progress {
    top: calc(var(--header-h) + 3.3rem);
    opacity: 0 !important;
    transition: opacity 600ms ease 500ms;
  }
  .v2-orbit__stage > .v2-orbit__progress.is-on { opacity: calc(clamp(0, calc((var(--focus, 0) - 0.985) * 70), 1) * var(--leave-op, 1)) !important; }
  .v2-orbit__stage > .v2-variants {
    top: calc(41% + var(--ow) / 2 + 2.6rem) !important;
    opacity: calc(clamp(0, calc((var(--focus, 0) - 0.985) * 70), 1) * var(--leave-op, 1));
    transition: opacity 600ms ease 700ms;
  }
  .v2-orbit__stage > .lst-prev, .v2-orbit__stage > .lst-next {
    top: calc(var(--header-h) + 3.3rem - 0.5rem);
    opacity: calc(clamp(0, calc((var(--focus, 0) - 0.985) * 70), 1) * var(--leave-op, 1));
    transition: opacity 600ms ease 500ms;
  }
}
@media (max-width: 900px) {
  /* Einleitungs-Karte der Leistungen kompakter, damit die Bedienknoepfe darueber Platz haben */
  .lst-track__caption--intro .lst-track__caption-title { font-size: 1.25rem; }
  .lst-track__caption--intro .lst-track__caption-text { font-size: 0.8rem; line-height: 1.42; }
  .lst-track__caption--intro { padding: 0.8rem 1rem; }
}

/* ---- Ueberschriften: keine Chips/Zeilen ueber den Titeln mehr (der Titel traegt die Aussage) ---- */
body .eyebrow, body .rf__eyebrow { display: none !important; }

/* ---- Kontakt (Handy): Karte mit den Kontaktdaten im ersten Bildschirm, Symbole bedienbar, Karte als Fenster mit Schliessen-Kreuz ---- */
.contact__map-close { display: none; }
@media (max-width: 900px) {
  body.v2.v2-page main:has(.contact-grid):not(:has(.mdv-intro-grid)) > section:first-child .section__head { min-height: 0; margin-bottom: 0.8rem; }
  body.v2.v2-page main:has(.contact-grid):not(:has(.mdv-intro-grid)) > section:first-child { padding-bottom: 0; }
  body.v2.v2-page main:has(.contact-grid) .contact-grid { gap: 1rem; }
  body.v2.v2-page main:has(.contact-grid) .contact-col { min-height: calc(100svh - var(--header-h, 76px) - 22rem); display: flex; justify-content: flex-start; }
  body.v2.v2-page .contact-card { padding: 0.8rem 0.9rem; }
  body.v2.v2-page .contact-info { gap: 0.6rem 0.8rem; grid-template-columns: 1fr 1fr; }
  .contact-info__item.is-action { cursor: pointer; }
  .contact-info__item.is-action .contact-info__icon { box-shadow: 0 0 0 1px rgba(127, 227, 255, 0.7), 0 0 10px rgba(127, 227, 255, 0.35); }
  .contact__map { position: fixed !important; inset: calc(var(--header-h, 76px) + 0.8rem) 0.8rem 5rem 0.8rem !important; width: auto !important; height: auto !important; z-index: 800; display: none; margin: 0 !important; }
  .contact__map.is-open { display: block; }
  .contact__map-close {
    display: grid; place-items: center; position: absolute; top: 0.5rem; right: 0.5rem; z-index: 5; width: 40px; height: 40px;
    color: #fff; background: rgba(2, 14, 32, 0.9); border: 1px solid rgba(127, 227, 255, 0.5); border-radius: 50%; cursor: pointer;
  }
  .contact__map-close svg { width: 20px; height: 20px; }
  body.map-open::after { content: ""; position: fixed; inset: 0; z-index: 700; background: rgba(2, 8, 20, 0.7); }
}

/* ---- Ueber uns (Handy): Ueberschrift oben links, darunter Bild, darunter Text ---- */
.mdv-pagehead { display: none; }
@media (max-width: 900px) {
  .mdv-pagehead {
    display: block; margin: 0 0 0.5rem; font: 700 1.6rem/1.1 var(--font-display); letter-spacing: -0.015em;
    background: linear-gradient(96deg, #ffffff 0%, #7fe3ff 48%, #3f7bff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; width: fit-content;
  }
  body.v2.v2-page .mdv-intro-grid { display: flex; flex-direction: column; gap: 0.6rem; }
  body.v2.v2-page .mdv-intro-grid > div:last-child { order: -1; }
  body.v2.v2-page .mdv-portrait { max-height: 24svh; }
  body.v2.v2-page .mdv-intro-card .section__lead { font-size: 0.8rem; line-height: 1.4; }
  body.v2.v2-page .section { padding-block: 2.2rem; }
  body.v2.v2-page .section--tight { padding-block: 1.6rem; }
}
@media (max-width: 900px) {
  body.v2.v2-page .contact-info { grid-template-columns: 1fr; gap: 0.45rem; }
  body.v2.v2-page .contact-info__item { display: flex; align-items: center; gap: 0.8rem; min-width: 0; }
  body.v2.v2-page .contact-info__item h3 { margin: 0; font-size: 0.66rem; }
  body.v2.v2-page .contact-info__item p, body.v2.v2-page .contact-info__item a { font-size: 0.86rem; line-height: 1.3; margin: 0; }
  body.v2.v2-page .contact-info__icon { flex: 0 0 auto; width: 2.4rem; height: 2.4rem; }
  body.map-open .contact__map { top: calc(var(--header-h, 76px) + 0.8rem); }
  body.v2.v2-page .mdv-portrait { max-height: 30svh; }
}

/* Referenzen (Handy): Ueberschrift links oben im Ueberschriftsstil, ohne Kasten */
@media (max-width: 900px) {
  .rf .rf__head {
    left: 16px !important; translate: none !important; width: auto !important; text-align: left !important; padding: 0 !important; background: none !important; border: 0 !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important; top: calc(var(--header-h, 88px) + 1rem);
  }
  .rf .rf__title {
    font-size: 1.6rem; line-height: 1.1; text-shadow: none !important; width: fit-content; text-align: left;
    background: linear-gradient(96deg, #ffffff 0%, #7fe3ff 48%, #3f7bff 100%); -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important;
  }
  /* Leistungen: die Ueberschrift der Buehne steht von Anfang an */
  .lst-eyebrow { opacity: 1 !important; transform: none !important; }
}

/* ---- Handy: keine Scrollleiste ---- */
@media (max-width: 900px) {
  html { scrollbar-width: none; -ms-overflow-style: none; }
  html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; width: 0; }

  /* Telefon-Knopf mittig am rechten Rand; die Kontaktleiste klappt mittig im Bild auf */
  .contact-bar { top: 50% !important; bottom: auto !important; right: 8px !important; transform: none !important; margin-top: -22px; z-index: 600; }
  .contact-bar .contact-bar__list,
  .contact-bar[data-tone] .contact-bar__list {
    position: fixed !important; left: 50% !important; top: 50% !important; right: auto !important; bottom: auto !important;
    transform: translate(-50%, -50%) scale(0.92); width: min(78vw, 300px); max-height: none; padding: 0.9rem 1rem !important;
    pointer-events: none; transition: opacity 200ms ease, transform 200ms ease;
  }
  .contact-bar[data-open="true"] .contact-bar__list { transform: translate(-50%, -50%) scale(1); pointer-events: auto; max-height: none; }
  .contact-bar .contact-bar__link { padding: 0.5rem 0.6rem; }
  .contact-bar .contact-bar__tip { display: block !important; position: static; opacity: 1; transform: none; background: none; border: 0; margin-left: 0.7rem; font-size: 0.9rem; pointer-events: none; }
  .contact-bar .contact-bar__link { display: flex; align-items: center; width: 100%; }

  /* Ausklang "Mehr Sichtbarkeit": groesserer Titel, mehr Luft, kompakte Karten ohne Zahlen-Chip */
  .v2-outro { min-height: 230svh; }
  .v2-outro__stage { align-content: center; gap: 1.1rem; padding: calc(var(--header-h) + 1.5rem) 1rem 2rem; }
  .v2-outro__claim { font-size: clamp(1.9rem, 9vw, 2.4rem); line-height: 1.12; }
  .v2-outro__claim-sub { margin-top: 1rem; margin-bottom: 0.4rem; font-size: 0.9rem; }
  .v2-step { padding: 0.6rem 0.9rem 0.65rem; row-gap: 0; }
  .v2-step__num { background: none !important; border: 0 !important; padding: 0 !important; margin: 0 !important; font-size: 0.85rem; letter-spacing: 0.1em; box-shadow: none !important; }
  .v2-step__num::before { display: none !important; }
  .v2-step p { margin-top: 0.25rem; font-size: 0.84rem; line-height: 1.4; }
}

/* Abschluss-Karte: keine Chip-Zeile, sondern eine schlichte Beschriftung wie "Was wir tun" */
.v2-final__cta-eyebrow {
  display: block !important; padding: 0 !important; background: none !important; border: 0 !important; border-radius: 0 !important;
  font: 600 0.78rem/1 var(--font-display); letter-spacing: 0.2em; text-transform: uppercase; color: rgba(234, 246, 251, 0.85); margin-bottom: 0.7rem;
}
.v2-final__cta-eyebrow::before { display: none !important; }
@media (max-width: 900px) {
  .contact-bar .contact-bar__list, .contact-bar[data-tone] .contact-bar__list {
    background: rgba(3, 14, 32, 0.97) !important; border: 1px solid rgba(127, 227, 255, 0.45) !important; border-radius: 14px !important;
    box-shadow: 0 0 0 100vmax rgba(2, 8, 20, 0.55), 0 20px 50px rgba(0, 0, 0, 0.6) !important;
  }
  .contact-bar:not([data-open="true"]) .contact-bar__list { box-shadow: none !important; }
}

/* ---- Handy: Kontaktleiste als senkrechte Symbolleiste am rechten Rand, mittig; Symbole rufen direkt ihre Funktion auf ---- */
@media (max-width: 900px) {
  .contact-bar .contact-bar__list, .contact-bar[data-tone] .contact-bar__list {
    left: auto !important; right: 8px !important; top: 50% !important; width: auto !important; padding: 0.4rem !important;
    transform: translateY(-50%) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
  }
  .contact-bar[data-open="true"] .contact-bar__list { transform: translateY(-50%) !important; }
  .contact-bar:not([data-open="true"]) .contact-bar__list { box-shadow: none !important; }
  .contact-bar .contact-bar__tip { display: none !important; }
  .contact-bar .contact-bar__link { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .contact-bar[data-open="true"] .contact-bar__toggle { visibility: hidden; }

  /* Karten: Symbol und Titel in einer Zeile */
  body.v2.v2-page .service-card { display: grid; grid-template-columns: auto 1fr; column-gap: 0.8rem; align-items: center; }
  body.v2.v2-page .service-card > * { grid-column: 1 / -1; }
  body.v2.v2-page .service-card > .service-card__icon { grid-column: 1; grid-row: 1; margin: 0; }
  body.v2.v2-page .service-card > .service-card__title { grid-column: 2; grid-row: 1; margin: 0; }
  .mdv-pagehead { font-size: 1.45rem; }
}
@media (max-width: 900px) {
  /* Geoeffnet: kleines Schliessen-Kreuz mittig auf der rechten Kante der Leiste (4 px vom Bildrand), die Leiste bleibt, wo sie ist */
  .contact-bar[data-open="true"] .contact-bar__toggle {
    visibility: visible !important; position: relative; z-index: 3; width: 24px; height: 24px; min-width: 0; padding: 0; margin: 10px 0;
    transform: translateX(4px); border-radius: 50% !important; font-size: 0;
  }
  .contact-bar[data-open="true"] .contact-bar__toggle::after {
    -webkit-mask: none; mask: none; background: none; content: "\00d7"; width: auto; height: auto; font: 400 20px/1 var(--font-display, sans-serif); color: #fff;
  }
  .contact-bar[data-open="true"] .contact-bar__toggle svg { display: none; }
}
@media (max-width: 900px) { .v2-orbit__stage > .v2-variants, .v2-orbit__stage > .v2-orbit__progress, .v2-orbit__stage > .lst-prev, .v2-orbit__stage > .lst-next { pointer-events: auto; } }

/* ===== Einheitliche Ueberschriften =====
   Sektionen: kleine Beschriftung links oben, ohne Karte (wie "Was wir tun"). Karten: eine Ueberschrift mit demselben Verlauf (feste Farbpunkte, gleiche Blautoene). */
.v2-hero__title-lead,
.v2-hero__more-lead,
.v2-hero__turn-copy .v2-turn__title,
.mdv-pagehead {
  background-image: linear-gradient(96deg, #ffffff 0%, #7fe3ff 48%, #3f7bff 100%) !important;
  background-size: auto !important;
}
.v2-hero__turn-copy .v2-turn__title em, .v2-hero__turn-copy .v2-turn__word { -webkit-text-fill-color: transparent; }

@media (max-width: 900px) {
  .mdv-pagehead, .rf .rf__title, .v2-faq__title, .order-faq .section__title {
    display: block; width: auto; margin: 0 0 0.8rem; padding: 0; text-align: left !important;
    font: 600 0.8rem/1.3 var(--font-display) !important; letter-spacing: 0.2em; text-transform: uppercase;
    background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important;
    -webkit-text-fill-color: rgba(234, 246, 251, 0.85); color: rgba(234, 246, 251, 0.85) !important; text-shadow: none !important;
  }
  .v2-faq__title::before, .v2-faq__title::after { display: none !important; }
  .rf .rf__title { max-width: 14rem; }
  body.v2.v2-page .mdv-portrait { max-height: 34svh; }

  /* Kontakt und Abschlusskarten: nach Inhalt gross, mittig */
  body.v2.v2-page .contact-card { width: fit-content; max-width: 100%; margin-inline: auto; }
  body.v2.v2-page .cta-band { max-width: 24rem; margin-inline: auto; }

  /* Karte der Kontaktseite: nur die eine Ansicht (Lightbox), nicht das eigene Fenster */
  .contact__map, .contact__map.is-open { display: none !important; }
  body.map-open::after { display: none; }

  /* Uebersicht nach dem Ende der Planetenabfolge: Karte unten wie im Hero */
  .v2-orbit__stage .v2-orbit__summary {
    display: grid; left: clamp(1rem, 5vw, 3rem); right: clamp(1rem, 5vw, 3rem); top: auto !important; bottom: var(--hero-card-bottom, 1rem);
    width: auto; max-height: none; padding: 0.8rem 1rem; gap: 0.5rem; filter: none; transform: none;
    opacity: calc(var(--sum, 0) * var(--leave-op, 1)); clip-path: none; border-radius: 12px; pointer-events: none;
  }
  .v2-orbit__summary-list { grid-template-columns: 1fr 1fr; gap: 0.35rem 0.8rem; --node: 1.7rem; }
  .v2-orbit__summary-list li::before, .v2-orbit__summary-list li::after, .v2-orbit__summary-list .chev { display: none; }
  .v2-orbit__summary-list li { padding-block: 0.1rem; column-gap: 0.55rem; }
  .v2-orbit__summary-list small { display: none; }
  .v2-orbit__summary-list span { font-size: 0.8rem; line-height: 1.2; }
}

/* Kontakt (Desktop): Screen 1 = grosser Titel + Kontaktkarte mittig + feiner Scroll-Hinweis; Screen 2 = Karte und Termin nebeneinander auf gleicher Hoehe */
.contact-cue { display: none; }
@media (min-width: 901px) {
  body.v2.v2-page main:has(.contact-grid):not(:has(.mdv-intro-grid)) > section:first-child {
    justify-content: flex-start; padding-top: calc(var(--header-h, 76px) + 0.5rem); padding-bottom: 3rem; min-height: 0;
  }
  body.v2.v2-page main:has(.contact-grid) .section__head {
    min-height: 50svh; width: 100%; max-width: none; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
  }
  body.v2.v2-page main:has(.contact-grid) .section__head .section__title {
    font-size: clamp(2.6rem, min(5.4vw, 8vh), 4.6rem); line-height: 1.04; letter-spacing: -0.02em; margin: 0 0 1rem; width: fit-content;
    background: linear-gradient(96deg, #ffffff 0%, #7fe3ff 48%, #3f7bff 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  body.v2.v2-page main:has(.contact-grid) .section__head .section__lead { font-size: clamp(0.95rem, 2vh, 1.1rem); max-width: 40rem; margin: 0 auto; line-height: 1.5; }
  body.v2.v2-page main:has(.contact-grid) .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; align-items: stretch; max-width: 64rem; margin-inline: auto; width: 100%; grid-template-rows: calc(50svh - var(--header-h, 76px) - 1.9rem) auto; }
  body.v2.v2-page main:has(.contact-grid) .contact-col { display: contents; }
  body.v2.v2-page main:has(.contact-grid) .contact-card { grid-column: 1 / -1; grid-row: 1; justify-self: center; width: fit-content; max-width: 100%; padding: 1rem 1.6rem; align-self: center; }
  body.v2.v2-page main:has(.contact-grid) .contact__map { grid-column: 1; grid-row: 2; height: calc(100svh - var(--header-h, 76px) - 3rem); min-height: 0; }
  body.v2.v2-page main:has(.contact-grid) .booking.form { grid-column: 2; grid-row: 2; height: calc(100svh - var(--header-h, 76px) - 3rem); min-height: 0; overflow: hidden; padding: 0.8rem 1.1rem; }
  body.v2.v2-page main:has(.contact-grid) .contact-info { grid-template-columns: repeat(4, auto); gap: 0.8rem 2rem; }
  .contact-cue { display: grid; justify-items: center; gap: 0.35rem; position: absolute; left: 50%; top: calc(100svh - 3.4rem); translate: -50% 0; z-index: 2; font: 600 0.62rem/1 var(--font-display); letter-spacing: 0.22em; text-transform: uppercase; color: rgba(234, 246, 251, 0.5); pointer-events: none; }
  .contact-cue::before { content: ""; width: 1px; height: 1.6rem; background: linear-gradient(180deg, transparent, rgba(127, 227, 255, 0.8)); }
}

@media (min-width: 901px) {
  /* Terminbuchung kompakt: passt samt Karte in einen Bildschirm */
  body.v2.v2-page main:has(.contact-grid) .booking-type { padding-block: 0.4rem; margin: 0; }
  body.v2.v2-page main:has(.contact-grid) .booking-type__desc { display: none !important; }
  body.v2.v2-page main:has(.contact-grid) .booking-type__name { font-size: clamp(0.85rem, 2vh, 1rem); }
  body.v2.v2-page main:has(.contact-grid) .booking-type__meta { font-size: clamp(0.7rem, 1.6vh, 0.82rem); margin-top: 0.1rem; }
  body.v2.v2-page main:has(.contact-grid) .booking h2, body.v2.v2-page main:has(.contact-grid) .booking legend { font-size: clamp(0.95rem, 2.2vh, 1.1rem); margin-block: 0.4rem; }
  body.v2.v2-page main:has(.contact-grid) .booking .btn { min-height: 40px; }
  body.v2.v2-page main:has(.contact-grid) .booking__progress { margin-bottom: 0.4rem; }
  body.v2.v2-page main:has(.contact-grid) .booking [data-step] { gap: 0.4rem; }
}

@media (min-width: 901px) {
  /* Karten nur so gross wie ihr Inhalt, beide gleich hoch, mittig unter der Kopfzeile im zweiten Bildschirm */
  body.v2.v2-page main:has(.contact-grid) .contact__map,
  body.v2.v2-page main:has(.contact-grid) .booking.form { height: auto !important; min-height: 0 !important; overflow: visible; align-self: start; }
  body.v2.v2-page main:has(.contact-grid) .contact__map { height: 100% !important; align-self: stretch; }
  body.v2.v2-page main:has(.contact-grid) .contact-grid { grid-template-rows: calc(50svh - var(--header-h, 76px) - 1.9rem) auto; align-items: stretch; max-width: 56rem; }
  body.v2.v2-page main:has(.contact-grid) .booking.form { align-self: stretch; }
}

@media (min-width: 901px) {
  body.v2.v2-page main:has(.contact-grid) .contact-grid { max-width: 64rem; }
  body.v2.v2-page main:has(.contact-grid) .contact-info__item a, body.v2.v2-page main:has(.contact-grid) .contact-info__item p { white-space: nowrap; }
  body.v2.v2-page main:has(.contact-grid) .contact-card { padding: 1rem 1.8rem; }
  body.v2.v2-page main:has(.contact-grid) .contact-info { gap: 0.8rem 2.2rem; }
}
.contact-cue { display: none !important; }

/* Kontaktkarte: Symbolfelder im neuen Stil (abgerundetes Glas wie die Symbole der Leistungskarten, keine abgeschnittenen Ecken) */
body.v2.v2-page .contact-info__icon {
  clip-path: none !important; border-radius: 12px !important;
  background: linear-gradient(135deg, rgba(127, 227, 255, 0.14), rgba(40, 90, 170, 0.1)) !important;
  border: 1px solid rgba(127, 227, 255, 0.4) !important;
  box-shadow: inset 0 0 12px rgba(79, 180, 255, 0.18) !important;
}
body.v2.v2-page .contact-info__icon::before, body.v2.v2-page .contact-info__icon::after { display: none !important; }
body.v2.v2-page .contact-info__icon { border-radius: 50% !important; transform: none !important; }
body.v2.v2-page .contact-card { clip-path: none !important; border-radius: 18px !important; }
body.v2.v2-page .contact-card::before, body.v2.v2-page .contact-card::after { display: none !important; }

/* =============================================================================
   Ueber uns, Hero: Karte waechst mit dem Text, Foto behaelt sein Seitenverhaeltnis
   - Die feste Zeilenhoehe des Kontakt-Rasters (calc(50svh ...)) galt auch fuer .mdv-intro-grid (hat ebenfalls .contact-grid):
     die Karte war nur so hoch wie das Foto, der Text lief unten heraus. Jetzt bestimmt der Inhalt die Hoehe.
   - Das Bit-Canvas des Hologramms fuellt die Figur. Die Figur war so breit wie die Spalte, das Bild nur 270 px: das Canvas wurde
     breit gezogen (Hologramm gestaucht) und danach auf das schmale Bild zurueckgesetzt. Jetzt umschliesst die Figur das Bild genau.
   - Groessen folgen dem kleineren Wert aus Breite und Hoehe des Fensters (min(vw, vh)), damit Karte und Foto auf jedem
     Seitenverhaeltnis in einen Bildschirm passen.
   ============================================================================= */
body.v2.v2-page main:has(.mdv-intro-grid) .mdv-intro-grid.contact-grid {
  grid-template-rows: auto;
  align-items: center;
  max-width: 72rem;
  gap: clamp(1rem, 3vw, 3rem);
}
body.v2.v2-page .mdv-photo { width: fit-content; max-width: 100%; margin-inline: auto; }
body.v2.v2-page .mdv-photo .mdv-portrait { display: block; margin: 0; height: auto; }
body.v2.v2-page .mdv-intro-card { padding: clamp(1rem, min(2.4vw, 4vh), 2.4rem); min-width: 0; overflow-wrap: break-word; }
body.v2.v2-page .mdv-intro-card .section__title { font-size: clamp(1.4rem, min(3.4vw, 5.2vh), 2.8rem); }
body.v2.v2-page .mdv-intro-card .section__lead { font-size: clamp(0.82rem, min(1.35vw, 2.3vh), 1.1rem); }
body.v2.v2-page .mdv-intro-card .mdv-text,
body.v2.v2-page .mdv-intro-card .mdv-claim { font-size: clamp(0.78rem, min(1.25vw, 2.1vh), 1rem); }

/* Kontakt (Desktop), erster Bildschirm: Titelblock und Karte mit maessigem Abstand --gm zueinander (nicht aneinander, nicht
   weit auseinander); der uebrige freie Platz teilt sich gleich auf oben (--go) und unten (--go, dort steht der Scroll-Hinweis).
   Titelblock (--kt) und Karte (--kc) haben ungefaehre Hoehen; der Kopf endet mit dem Titelblock, die Karte beginnt --gm darunter,
   das Raster darunter (Karte und Termin) folgt direkt nach dem ersten Bildschirm. */
@media (min-width: 901px) {
  body.v2.v2-page main:has(.contact-grid):not(:has(.mdv-intro-grid)) {
    --kt: clamp(7rem, 17.5vh, 10.8rem);
    --kc: 6.4rem;
    --gm: clamp(2rem, 7vh, 4.5rem);
    --go: max(1.5rem, calc((100svh - var(--header-h, 76px) - 0.5rem - var(--kt) - var(--kc) - var(--gm)) / 2));
  }
  body.v2.v2-page main:has(.contact-grid):not(:has(.mdv-intro-grid)) .section__head {
    justify-content: flex-end; padding-bottom: 0; min-height: calc(var(--go) + var(--kt)); translate: none;
  }
  body.v2.v2-page main:has(.contact-grid):not(:has(.mdv-intro-grid)) .contact-grid { grid-template-rows: calc(var(--gm) + var(--kc) + var(--go)) auto; }
  body.v2.v2-page main:has(.contact-grid):not(:has(.mdv-intro-grid)) .contact-card { align-self: start; margin-top: var(--gm); translate: none; }
}

/* =============================================================================
   Ueber uns, Abschnitte unter dem Hero: ausgewogene Raumnutzung
   - Die Kontakt-Regeln (.contact-grid mit fester Zeilenhoehe, .section__head mit 50svh) galten auch hier: die einzeilige
     Ueberschrift bekam einen halben Bildschirm, die Karten darunter wurden auf eine feste Hoehe gequetscht, der Text lief heraus.
     Jetzt bestimmt der Inhalt die Hoehe; Kopf, Karten und Abschnittsraender folgen einem Abstand (--mdv-gap).
   - Leistungskarten: Symbol und Ueberschrift stehen in einer Zeile, die Texte darunter ueber die volle Kartenbreite.
   ============================================================================= */
@media (min-width: 901px) {
  body.v2.v2-page main:has(.mdv-intro-grid) > section:not(:first-child) {
    --mdv-gap: clamp(1.5rem, 3vw, 2.5rem);
    padding-block: calc(var(--mdv-gap) * 1.6);
  }
  body.v2.v2-page main:has(.mdv-intro-grid) > section:not(:first-child) .section__head {
    min-height: 0; margin-bottom: var(--mdv-gap); justify-content: flex-start;
  }
  body.v2.v2-page main:has(.mdv-intro-grid) > section:not(:first-child) .contact-grid {
    grid-template-rows: auto; align-items: stretch; gap: var(--mdv-gap); max-width: none;
  }
  body.v2.v2-page main:has(.mdv-intro-grid) > section:not(:first-child) .mdv-panel { height: auto; align-self: stretch; }
  body.v2.v2-page main:has(.mdv-intro-grid) .services-grid { gap: var(--mdv-gap, 2rem); }
}
body.v2.v2-page main:has(.mdv-intro-grid) .service-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; row-gap: 0.7rem; align-content: start; align-items: center;
}
body.v2.v2-page main:has(.mdv-intro-grid) .service-card__icon { grid-column: 1; grid-row: 1; margin: 0; }
body.v2.v2-page main:has(.mdv-intro-grid) .service-card > .service-card__title { grid-column: 2; grid-row: 1; margin: 0; }
body.v2.v2-page main:has(.mdv-intro-grid) .service-card > .service-card__text { grid-column: 1 / -1; margin: 0; }

/* Ueber uns: Abschnittsueberschriften einzeilig (vorher so gross, dass "Wie funktioniert ..." auf zwei Zeilen umbrach),
   Absaetze in den Textkarten mit gleichem Abstand statt aneinanderzukleben */
@media (min-width: 901px) {
  body.v2.v2-page main:has(.mdv-intro-grid) > section:not(:first-child) .section__head .section__title {
    font-size: clamp(1.8rem, min(3vw, 6vh), 2.7rem); margin: 0;
  }
}
body.v2.v2-page main:has(.mdv-intro-grid) .mdv-panel { display: flex; flex-direction: column; gap: 0.8rem; }
body.v2.v2-page main:has(.mdv-intro-grid) .mdv-panel > * { margin: 0; }

/* =============================================================================
   Leistungen anfragen (bestellung.html), Hero auf einem Bildschirm, symmetrisch
   - Die allgemeine Unterseiten-Regel machte das Hero-Raster zu einer Spalte (flex): Text und Karte standen untereinander, links gedraengt
     und rechts leer. Auf dem Desktop wieder zwei Spalten, beide vertikal mittig; Text und Karte teilen sich die Breite gleichmaessig.
   - Die Vertrauens-Chips liegen jetzt im Textblock (vorher eigene Leiste unter der Kopfleiste, davon verdeckt).
   ============================================================================= */
@media (min-width: 901px) {
  body.v2.v2-page main > form.order > .order__intro-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    column-gap: clamp(2rem, 6vw, 6rem);
    align-items: center;
    align-content: center;
    justify-content: stretch;
    min-height: 100svh;
    padding-block: calc(var(--header-h, 76px) + 1.5rem) 2.5rem;
  }
  body.v2.v2-page .order__intro { max-width: 38rem; justify-self: end; }
  body.v2.v2-page .order__beratung { max-width: 30rem; justify-self: start; width: 100%; }
}
body.v2.v2-page .order__intro .trustbar { background: transparent; border: 0; padding: 0; margin-top: 1.4rem; }
body.v2.v2-page .order__intro .trustbar__inner { padding: 0; width: auto; max-width: none; justify-content: flex-start; }

/* Niedrige Desktop-Fenster (bis 860 px Hoehe): Scroll-Hinweis kleiner, die Fortschrittsleiste dafuer weiter unten, direkt ueber dem Hinweis.
   Vorher stand sie ueber dem grossen Hinweis (6,4 rem Abstand) und damit mitten im Bild, nahe an den Karten rechts unten. */
@media (min-width: 901px) and (max-height: 860px) {
  .v2-hero__hint { bottom: 0.6rem; gap: 0.3rem; font-size: 0.56rem; letter-spacing: 0.18em; }
  .v2-hero__hint-rail { height: 26px; }
  .v2-orbit__progress { bottom: 3.9rem; }
}

/* Focus-Pendants zu Hover-Effekten (checkweb Punkt 9): Tastaturnutzer sehen dieselbe Rueckmeldung wie Mausnutzer */
.v2-faq__summary:focus-visible h3 { color: var(--v2-core); }
.to-top:focus-visible .to-top__disc { border-color: var(--color-accent); }
.to-top:focus-visible .to-top__disc svg { translate: 0 -2px; }
.btn--secondary.btn--on-dark.cta-orbit:focus-visible .cta-orbit__label { color: var(--color-ink); }
@media (min-width: 901px) {
  /* Bevor die Folgesektion ("Mehr Sichtbarkeit") ueber die Orbit-Buehne laeuft, blenden deren Karten, Planet und Bedienelemente aus */
  .v2-orbit__stage .v2-orbit__copy, .v2-orbit__stage .v2-orbit__intro, .v2-orbit__stage .v2-orbit__satcard, .v2-orbit__stage .v2-orbit__summary,
  .v2-orbit__stage > .v2-variants, .v2-orbit__stage > .v2-orbit__progress, .v2-orbit__stage > .v2-eyebrow { opacity: calc(var(--leave-op, 1) * var(--_o, 1)); }
  .v2-orbit__stage .v2-orbit__copy { --_o: var(--copy, 0); }
  .v2-orbit__stage .v2-orbit__satcard { --_o: var(--now, 0); }
  .v2-orbit__stage .v2-orbit__summary { --_o: var(--sum, 0); }
  .v2-orbit__stage .v2-orbit__intro { --_o: var(--intro, 0); }
  .v2-journey__stage .v2-orbit__system { opacity: calc(var(--sys-opacity, 1) * (0.78 + 0.22 * var(--focus, 1)) * var(--hero-in, 1) * var(--leave-op, 1)); }
}

/* Leistungen (Desktop): Zurueck/Weiter links und rechts der Fortschrittsleiste */
@media (min-width: 901px) {
  .lst-journey__stage > .lst-prev, .lst-journey__stage > .lst-next {
    position: absolute; z-index: 7; bottom: calc(clamp(6.4rem, 11svh, 7.6rem) - 0.3rem - 2.2rem); width: 34px; height: 34px; padding: 0;
    display: grid; place-items: center; background: none; border: 0; color: #7fe3ff; cursor: pointer; pointer-events: auto;
  }
  .lst-journey__stage > .lst-prev { left: calc(50% - min(12rem, 19vw) - 2.2rem); }
  .lst-journey__stage > .lst-next { right: calc(50% - min(12rem, 19vw) - 2.2rem); }
  .lst-prev svg, .lst-next svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
  .lst-prev:hover, .lst-next:hover { color: #fff; }
  .lst-prev:disabled, .lst-next:disabled { opacity: 0.3; cursor: default; }
}

/* Zitat: keine Silbentrennung und keine Zeilenumbrueche mitten im Wort */
.v2-quote, .v2-quote *, .v2-quote__author, .v2-constellation, .v2-constellation * {
  hyphens: none !important; -webkit-hyphens: none !important; overflow-wrap: normal !important; word-break: keep-all !important;
}
@media (max-width: 900px) {
  /* Geoeffnete Kontaktleiste ein Stueck nach links, damit das Schliessen-Kreuz den Karten-Knopf nicht ueberdeckt */
  .contact-bar[data-open="true"] .contact-bar__list, .contact-bar[data-open="true"][data-tone] .contact-bar__list { right: 30px !important; }
  .contact-bar[data-open="true"] .contact-bar__toggle { transform: translateX(-68px) !important; }
}

/* Leistungen (Desktop): Status-Karten links unter der Textkarte (linksbuendig mit ihr), Bedienknoepfe unter dem Planeten */
@media (min-width: 901px) {
  .lst-journey__stage .lst-hud { right: auto; left: calc(21.5% - min(15rem, 18vw)); bottom: clamp(1.4rem, 4.6svh, 3rem); justify-content: flex-start; }
  .lst-hud__panel { width: clamp(170px, 13.5vw, 240px); }
  .lst-journey__stage .v2-variants.lst-variants {
    top: calc(50% + min(30svh, 18vw) + 4.6rem); left: 67%; translate: -50% 0; right: auto; width: auto; flex-wrap: nowrap;
    background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0;
  }
}

/* Leistungen: Mausrad, Wischen und Tasten gehoeren immer der Seite (Raststellen), nie dem eingebetteten Planeten-Fenster */
.lst-v2embed iframe { pointer-events: none; }
.lst-journey__stage .lst-v2embed { pointer-events: none; }


/* Uebersicht (Desktop): horizontal, unter der Leistungen-Karte, linksbuendig mit ihr; beide zusammen mittig (Lage setzt orbit.js) */
@media (min-width: 901px) {
  .v2-orbit__stage .v2-orbit__summary { width: min(46rem, 54vw); padding: 0.9rem 1.2rem 1rem; transform: none; clip-path: none; border-radius: 16px; }
  .v2-orbit__stage .v2-orbit__copy { translate: -50% var(--pair-dy, 0px) !important; }
  .v2-orbit__summary-list { grid-template-columns: repeat(6, 1fr); gap: 0.4rem; --node: 2rem; }
  .v2-orbit__summary-list li { grid-template-columns: 1fr; justify-items: center; text-align: center; row-gap: 0.4rem; padding-block: 0.1rem; }
  .v2-orbit__summary-list li::before, .v2-orbit__summary-list .chev { display: none; }
  .v2-orbit__summary-list li:not(:last-child)::after { left: calc(50% + var(--node) / 2 + 2px); right: calc(-50% + var(--node) / 2 + 2px); top: calc(var(--node) / 2 + 0.1rem); bottom: auto; width: auto; height: 2px; background: linear-gradient(90deg, color-mix(in srgb, var(--tint, #7fe3ff) 55%, transparent), rgba(127, 227, 255, 0.28)); }
  .v2-orbit__summary-list small { display: none; }
  .v2-orbit__summary-list li > div { justify-items: center; }
  .v2-orbit__summary-list span { font-size: 0.74rem; line-height: 1.25; }
}
@media (min-width: 901px) { .lst-journey__stage .lst-track__caption { translate: -50% var(--pair-dy, 0px) !important; } }

/* Startseite: Zurueck/Weiter links und rechts der Fortschrittsleiste (Lage setzt swipe-nav.js), Eyebrow erst mit der Buehne */
.v2-orbit__stage > .lst-prev, .v2-orbit__stage > .lst-next {
  position: absolute; z-index: 7; width: 34px; height: 34px; padding: 0; display: grid; place-items: center; background: none; border: 0; color: #7fe3ff; cursor: pointer; pointer-events: auto;
  opacity: calc(clamp(0, calc((var(--focus, 0) - 0.94) * 16), 1) * var(--leave-op, 1));
}
.v2-orbit__stage > .lst-prev svg, .v2-orbit__stage > .lst-next svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.v2-orbit__stage > .lst-prev:hover, .v2-orbit__stage > .lst-next:hover { color: #fff; }
@media (min-width: 901px) {
  .v2-orbit__stage > .v2-eyebrow { opacity: calc(clamp(0, calc((var(--focus, 0) - 0.9) * 10), 1) * var(--leave-op, 1)); }
  .v2-orbit__stage .v2-orbit__satcard { transform: none; filter: none; }
}
@media (max-width: 900px) {
  /* Schliessen-Kreuz bleibt rechts an der Leiste; nur die Leiste ist nach links geschoben */
  .contact-bar[data-open="true"] .contact-bar__toggle { transform: translateX(-4px) !important; }
}

/* Leistungen (Desktop): Karten weiter links, kleinerer Scroll-Hinweis, Fortschritt samt Pfeilen und Bedienknoepfe weiter unten */
@media (min-width: 901px) {
  body.lst-page .lst-journey__stage .lst-track__caption { left: calc(21.5% - 3.2vw); }
  body.lst-page .v2-hero__hint { bottom: 0.5rem; gap: 0.25rem; font-size: 0.54rem; letter-spacing: 0.18em; }
  body.lst-page .v2-hero__hint-rail { height: 22px; }
  body.lst-page .lst-journey__stage .v2-orbit__progress { bottom: clamp(3.6rem, 6.4svh, 4.6rem); }
}
/* Karten blenden beim Sprung weich aus und an der Zielstellung wieder ein */
.lst-journey__stage .lst-track__caption, .lst-journey__stage .lst-hud { transition: opacity 320ms ease; }
@media (min-width: 901px) {
  .v2-orbit__stage .v2-orbit__intro { translate: -50% var(--pair-dy, 0px) !important; }
}

/* Karten der Orbit-Buehne im Hero-Stil (Glas, ohne HUD-Eckmarken) */
.v2-orbit__intro, .v2-orbit__copy, .v2-orbit__satcard, .v2-orbit__summary {
  background: linear-gradient(135deg, rgba(30, 52, 92, 0.55), rgba(8, 18, 42, 0.66)) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.25); backdrop-filter: blur(22px) saturate(1.25);
  border: 1px solid rgba(255, 255, 255, 0.13) !important; border-radius: 22px !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.16) !important; clip-path: none !important;
}
.v2-orbit__intro::before, .v2-orbit__intro::after, .v2-orbit__copy::before, .v2-orbit__copy::after,
.v2-orbit__satcard::before, .v2-orbit__satcard::after, .v2-orbit__summary::before, .v2-orbit__summary::after { display: none !important; }

/* Ueber uns: Einleitungskarte im Hero-Stil */
body.v2.v2-page .mdv-intro-card, body.glas body.v2.v2-page .mdv-intro-card {
  background: linear-gradient(135deg, rgba(30, 52, 92, 0.55), rgba(8, 18, 42, 0.66)) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.25); backdrop-filter: blur(22px) saturate(1.25);
  border: 1px solid rgba(255, 255, 255, 0.13) !important; border-radius: 22px !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.16) !important; clip-path: none !important;
}
body.v2.v2-page .mdv-intro-card::before, body.v2.v2-page .mdv-intro-card::after { display: none !important; }

/* =============================================================================
   Ueber uns: Leistungsversprechen einklappbar, Ablauf als Zeitleiste, Zahlen, wechselnde Flaechen
   ============================================================================= */
.service-card__chev { display: none; }
body.v2.v2-page .service-card.is-collapsible { cursor: pointer; position: relative; padding-right: 3rem; }
body.v2.v2-page .service-card.is-collapsible .service-card__text:nth-of-type(n+2) { display: none; }
body.v2.v2-page .service-card.is-collapsible.is-open .service-card__text:nth-of-type(n+2) { display: block; }
body.v2.v2-page .service-card.is-collapsible .service-card__chev {
  display: block; position: absolute; right: 1.1rem; top: 1.3rem; width: 11px; height: 11px;
  border-right: 2px solid #7fe3ff; border-bottom: 2px solid #7fe3ff; transform: rotate(45deg); transition: transform 250ms ease;
}
body.v2.v2-page .service-card.is-collapsible.is-open .service-card__chev { transform: rotate(-135deg); top: 1.5rem; }

body.v2.v2-page main:has(.mdv-intro-grid) .mdv-panel { position: relative; }
body.v2.v2-page main:has(.mdv-intro-grid) .mdv-panel > p { position: relative; padding-left: 2.2rem; }
body.v2.v2-page main:has(.mdv-intro-grid) .mdv-panel > p::before {
  content: ""; position: absolute; left: 0.2rem; top: 0.45rem; width: 12px; height: 12px; border-radius: 50%;
  background: #04122a; border: 2px solid #7fe3ff; box-shadow: 0 0 10px rgba(127, 227, 255, 0.6); z-index: 1;
}
body.v2.v2-page main:has(.mdv-intro-grid) .mdv-panel > p::after {
  content: ""; position: absolute; left: calc(0.2rem + 5px); top: 1.4rem; bottom: -1.2rem; width: 2px;
  background: linear-gradient(180deg, #7fe3ff, rgba(127, 227, 255, 0.15)); transform-origin: top; transform: scaleY(0); transition: transform 900ms ease;
}
body.v2.v2-page main:has(.mdv-intro-grid) .mdv-panel > p:last-child::after { display: none; }
body.v2.v2-page main:has(.mdv-intro-grid) .mdv-panel.is-in > p::after { transform: scaleY(1); }

.mdv-stats { display: flex; gap: clamp(2rem, 8vw, 6rem); justify-content: center; margin: 0 0 2rem; }
.mdv-stat { display: grid; justify-items: center; gap: 0.2rem; }
.mdv-stat__num {
  font: 700 clamp(3rem, 8vw, 5.5rem)/1 var(--font-display); letter-spacing: -0.03em;
  background: linear-gradient(96deg, #ffffff 0%, #7fe3ff 48%, #3f7bff 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mdv-stat__label { font: 600 0.8rem/1.2 var(--font-display); letter-spacing: 0.18em; text-transform: uppercase; color: rgba(234, 246, 251, 0.7); }

/* Hintergrundverlaeufe enden vor den Sektionskanten (Radius <= 64 % der Hoehe), sonst steht an der Kante ein harter Farbsprung */
body.v2.v2-page main:has(.mdv-intro-grid) > section:nth-of-type(2) { background: radial-gradient(70% 90% at 15% 20%, rgba(47, 111, 237, 0.16), transparent 70%); }
body.v2.v2-page main:has(.mdv-intro-grid) > section:nth-of-type(3) { background: linear-gradient(180deg, rgba(2, 10, 24, 0.55), rgba(8, 28, 52, 0.35)); border-block: 1px solid rgba(127, 227, 255, 0.12); }
body.v2.v2-page main:has(.mdv-intro-grid) > section:nth-of-type(4) { background: radial-gradient(80% 100% at 85% 40%, rgba(122, 77, 255, 0.16), transparent 70%); }
body.v2.v2-page main:has(.mdv-intro-grid) > section:nth-of-type(5) { background: radial-gradient(60% 110% at 50% 0%, rgba(127, 227, 255, 0.12), transparent 70%); }

/* =============================================================================
   Einheitliche Karten auf allen Seiten: das Glas der Hero-Karten (Verlauf, Weichzeichner, feiner heller Rand, runde Ecken, kein HUD-Rahmen)
   ============================================================================= */
.v2-hero__body,
.v2-hero__more,
.v2-hero__turn-copy,
.v2-orbit__intro,
.v2-orbit__copy,
.v2-orbit__satcard,
.v2-orbit__summary,
.v2-track__caption,
.lst-track__caption,
.lst-hud__panel,
.v2-step,
.v2-faq__item,
.v2-final__cta,
.order-faq__item,
body.v2.v2-page .order__beratung,
body.v2.v2-page .order__block,
body.v2.v2-page .summe,
body.v2.v2-page .order__done,
body.v2.v2-page .contact-card,
body.v2.v2-page .booking.form,
body.v2.v2-page .contact__map,
body.v2.v2-page .service-card,
body.v2.v2-page .mdv-panel,
body.v2.v2-page .mdv-intro-card,
body.v2.v2-page .cta-band,
body.v2.v2-page .svc-acc-item,
body.v2.v2-page .konf,
.rf-card__body,
.rf-dock .rf-card__body {
  background: linear-gradient(135deg, rgba(30, 52, 92, 0.55), rgba(8, 18, 42, 0.66)) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.25); backdrop-filter: blur(22px) saturate(1.25);
  border: 1px solid rgba(255, 255, 255, 0.13) !important; border-radius: 22px !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.16) !important; clip-path: none !important;
}
.lst-hud__panel,
.v2-faq__item,
.order-faq__item,
.rf-dock .rf-card__body { border-radius: 14px !important; }
.v2-orbit__intro::before,
.v2-orbit__intro::after,
.v2-orbit__copy::before,
.v2-orbit__copy::after,
.v2-orbit__satcard::before,
.v2-orbit__satcard::after,
.v2-orbit__summary::before,
.v2-orbit__summary::after,
.v2-track__caption::before,
.v2-track__caption::after,
.lst-track__caption::before,
.lst-track__caption::after,
.lst-hud__panel::before,
.lst-hud__panel::after,
.v2-step::before,
.v2-step::after,
.v2-faq__item::before,
.v2-faq__item::after,
.v2-final__cta::before,
.v2-final__cta::after { display: none !important; }
body.v2.v2-page .booking.form::before, body.v2.v2-page .booking.form::after, body.v2.v2-page .contact-card::before, body.v2.v2-page .contact-card::after,
body.v2.v2-page .service-card::before, body.v2.v2-page .service-card::after, body.v2.v2-page .mdv-panel::before, body.v2.v2-page .mdv-panel::after,
body.v2.v2-page .svc-acc-item::before, body.v2.v2-page .svc-acc-item::after, body.v2.v2-page .cta-band::before, body.v2.v2-page .cta-band::after,
body.v2.v2-page .summe::before, body.v2.v2-page .summe::after, body.v2.v2-page .order__block::before, body.v2.v2-page .order__block::after,
body.v2.v2-page .order__beratung::before, body.v2.v2-page .order__beratung::after, body.v2.v2-page .contact__map::after, .rf-card__body::before, .rf-card__body::after { display: none !important; }
body.v2.v2-page .contact__map, body.v2.v2-page .contact__map .map-consent { background: linear-gradient(135deg, rgba(30, 52, 92, 0.55), rgba(8, 18, 42, 0.66)) !important; }

/* Ueber uns: Abstand nach den Sektionsueberschriften, fliessende Hintergruende ohne harte Kanten */
body.v2.v2-page main:has(.mdv-intro-grid) .section__head { margin-bottom: clamp(1.6rem, 4vh, 2.6rem); }
body.v2.v2-page main:has(.mdv-intro-grid) .section__head .section__title { margin-bottom: 1rem; }
body.v2.v2-page main:has(.mdv-intro-grid) > section { border: 0 !important; box-shadow: none !important; background-color: transparent !important; }
body.v2.v2-page main:has(.mdv-intro-grid) > section:nth-of-type(2) { background: radial-gradient(70% 64% at 15% 50%, rgba(47, 111, 237, 0.14), transparent 75%) !important; }
body.v2.v2-page main:has(.mdv-intro-grid) > section:nth-of-type(3) { background: radial-gradient(80% 62% at 50% 50%, rgba(8, 28, 52, 0.45), transparent 78%) !important; }
body.v2.v2-page main:has(.mdv-intro-grid) > section:nth-of-type(4) { background: radial-gradient(70% 64% at 85% 50%, rgba(122, 77, 255, 0.13), transparent 75%) !important; }
body.v2.v2-page main:has(.mdv-intro-grid) > section:nth-of-type(5) { background: radial-gradient(60% 64% at 50% 50%, rgba(127, 227, 255, 0.1), transparent 75%) !important; }
body.v2.v2-page main:has(.mdv-intro-grid) .section__head .section__title { margin-bottom: 1.2rem !important; }
body.v2.v2-page main:has(.mdv-intro-grid) .section__head .section__lead { margin-top: 0 !important; }
/* Fussbereich: weicher Uebergang statt harter Kante */
body.v2 .footer { background: linear-gradient(180deg, rgba(7, 14, 28, 0) 0, rgba(7, 14, 28, 0.92) 7rem, var(--color-ink, #0a1224) 100%) !important; padding-top: calc(var(--space-2xl) + 4rem); margin-top: -4rem; }


/* Anfrage: Einleitung links in einer Karte im Hero-Stil, Titel im Hero-Verlauf */
body.v2.v2-page .order__intro {
  background: linear-gradient(135deg, rgba(30, 52, 92, 0.55), rgba(8, 18, 42, 0.66)) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.25); backdrop-filter: blur(22px) saturate(1.25);
  border: 1px solid rgba(255, 255, 255, 0.13) !important; border-radius: 22px !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.16) !important; padding: clamp(1.2rem, 2.6vw, 2.2rem) !important;
}
body.v2.v2-page .order__intro .section__title {
  font-size: clamp(1.6rem, min(2.9vw, 4.6vh), 2.7rem); line-height: 1.1; letter-spacing: -0.015em; width: fit-content; max-width: 100%;
  background: linear-gradient(96deg, #ffffff 0%, #7fe3ff 48%, #3f7bff 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; -webkit-text-fill-color: transparent;
}
body.v2.v2-page .order__intro .section__title .accent { background: none !important; color: inherit !important; -webkit-text-fill-color: transparent; }
@media (min-width: 901px) { body.v2.v2-page .order__intro { justify-self: stretch; max-width: none; } }


/* Anfrage: Hinweise (Antwort / kostenlos) unter der linken Karte; beide Karten gleiche Schrift */
.order__intro-col { display: grid; gap: 1rem; align-content: center; min-width: 0; }
body.v2.v2-page .order__intro .trustbar { display: none; }
body.v2.v2-page .order__intro-col > .trustbar { background: none; border: 0; padding: 0; margin: 0; }
body.v2.v2-page .order__intro-col > .trustbar .trustbar__inner { padding: 0; width: auto; max-width: none; justify-content: flex-start; flex-wrap: wrap; }
body.v2.v2-page .order__intro .section__lead, body.v2.v2-page .order__beratung-text { font-size: clamp(0.88rem, 1.9vh, 1rem) !important; line-height: 1.55 !important; }
body.v2.v2-page .order__beratung-titel { font-size: clamp(1.1rem, 2.4vh, 1.4rem) !important; font-family: var(--font-display); font-weight: 700; margin-bottom: 0.5rem; }
body.v2.v2-page .order__intro .section__title { font-size: clamp(1.1rem, 2.4vh, 1.4rem) !important; }
body.v2.v2-page .order__intro .section__title { font-weight: 700 !important; font-family: var(--font-display); }

/* Anfrage (Desktop): beide Karten gleich hoch nebeneinander, die beiden Hinweise darunter ueber die ganze Breite mittig */
@media (min-width: 901px) {
  body.v2.v2-page main > form.order > .order__intro-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; align-content: center; row-gap: 1.2rem; max-width: 62rem; margin-inline: auto; }
  .order__intro-col { display: contents; }
  body.v2.v2-page .order__intro { grid-column: 1; grid-row: 1; max-width: none; justify-self: stretch; align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
  body.v2.v2-page .order__beratung { grid-column: 2; grid-row: 1; max-width: none; justify-self: stretch; align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
  body.v2.v2-page .order__intro-col > .trustbar { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
  body.v2.v2-page .order__intro-col > .trustbar .trustbar__inner { justify-content: center; }
}

/* Anfrage (Desktop): "Unverbindlich und kostenlos" unter der linken, "Antwort innerhalb eines Werktags" unter der rechten Karte; Ueberschriften beginnen auf gleicher Hoehe */
@media (min-width: 901px) {
  body.v2.v2-page .order__intro-col > .trustbar, body.v2.v2-page .order__intro-col > .trustbar .trustbar__inner { display: contents; }
  body.v2.v2-page .order__intro-col > .trustbar .trustbar__dot { display: none; }
  body.v2.v2-page .order__intro-col > .trustbar .trustbar__inner > span:nth-of-type(1) { grid-column: 2; grid-row: 2; justify-self: start; }
  body.v2.v2-page .order__intro-col > .trustbar .trustbar__inner > span:nth-of-type(2) { grid-column: 1; grid-row: 2; justify-self: start; }
  body.v2.v2-page .order__intro, body.v2.v2-page .order__beratung { justify-content: flex-start !important; }
  body.v2.v2-page .order__intro .section__title { font-size: clamp(1.5rem, 2.9vh, 1.9rem) !important; line-height: 1.12; margin: 0 0 0.9rem; }
  body.v2.v2-page .order__beratung-titel { margin: 0 0 0.9rem; line-height: 1.12; }
}
@media (min-width: 901px) { body.v2.v2-page .order__intro-col > .trustbar .trustbar__inner > span { width: fit-content !important; justify-self: start !important; } }
@media (min-width: 901px) { body.v2.v2-page .order__intro-col > .trustbar .trustbar__inner > span:nth-of-type(1), body.v2.v2-page .order__intro-col > .trustbar .trustbar__inner > span:nth-of-type(2) { justify-self: center !important; } }
@media (min-width: 901px) {
  body.v2.v2-page .order__intro-col > .trustbar .trustbar__inner > span:nth-of-type(3) { grid-column: 1; grid-row: 2; justify-self: center !important; width: fit-content !important; }
}
@media (min-width: 901px) {
  /* Ueberschriften beider Karten beginnen mit der Oberkante der Grossbuchstaben auf gleicher Hoehe */
  body.v2.v2-page .order__intro, body.v2.v2-page .order__beratung { padding-top: 2.2rem !important; }
  body.v2.v2-page .order__intro .section__title, body.v2.v2-page .order__beratung-titel { margin-top: 0 !important; text-box: trim-start cap alphabetic; }
}

/* Ueberschriften mit Verlauf: Start- und Endfarbe sind immer dieselben, der Verlauf skaliert mit der Laenge der Ueberschrift (Breite = Textbreite) */
.v2-hero__title-lead, .v2-hero__more-lead, .v2-hero__turn-copy .v2-turn__title, .mdv-pagehead, .order__intro .section__title,
body.v2.v2-page main:has(.contact-grid) .section__head .section__title, .mdv-stat__num { width: fit-content; max-width: 100%; background-size: 100% 100% !important; }
@media (min-width: 901px) {
  /* Hero-Karten: Titel links schmaler, Text rechts breiter - ausgewogene Zeilenzahl */
  .v2-hero__body, .v2-hero__more, .v2-hero__turn-copy { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
  .v2-hero__more-lead, .v2-hero__turn-copy .v2-turn__title, .v2-hero__title { align-self: center; }
  .v2-hero__more-text, .v2-turn__lead, .v2-hero__text p { font-size: clamp(0.88rem, 1.9vh, 1.02rem); line-height: 1.55; }
  .v2-hero__more-lead, .v2-hero__turn-copy .v2-turn__title { font-size: clamp(1.6rem, min(2.9vw, 4.6vh), 2.7rem); }
}
@media (min-width: 901px) {
  .v2-hero__body, .v2-hero__more, .v2-hero__turn-copy { min-height: clamp(11.5rem, 26vh, 15rem); align-items: center !important; box-sizing: border-box; }
  .v2-hero__more-lead, .v2-hero__turn-copy .v2-turn__title, .v2-hero__title-lead { font-size: clamp(1.7rem, min(3vw, 4.8vh), 2.8rem) !important; line-height: 1.1; }
  .v2-hero__more-text, .v2-turn__lead { font-size: clamp(0.9rem, 2vh, 1.05rem) !important; }
}

/* Trabanten-Beschriftungen: dunkler Schatten und milchiger Schleier eng an den Buchstabenkonturen, damit sie auch ueber hellen Wolken lesbar bleiben */
.v2-orbit__sat-label {
  color: #f4fbff;
  text-shadow: 0 0 2px rgba(3, 12, 26, 1), 0 0 4px rgba(3, 12, 26, 0.95), 0 1px 8px rgba(5, 20, 44, 0.9), 0 0 16px rgba(10, 36, 70, 0.8), 0 0 28px rgba(150, 195, 235, 0.28);
  -webkit-text-stroke: 0.4px rgba(3, 12, 26, 0.55);
}

/* "Leistungen" als Zeile ueber der Karte entfaellt (Einleitung der Leistungen-Seite) */
.lst-track__caption--intro .lst-track__caption-kicker { display: none; }
/* "Sechs Hebel fuer Ihr Wachstum": ganze Ueberschrift im Hero-Verlauf mit Leuchten */
.v2-orbit__title {
  width: fit-content; max-width: 100%;
  background: linear-gradient(96deg, #ffffff 0%, #7fe3ff 48%, #3f7bff 100%) !important; background-size: 100% 100% !important;
  -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important;
  filter: drop-shadow(0 0 14px rgba(127, 227, 255, 0.35));
}
.v2-orbit__title em { background: none !important; color: inherit !important; -webkit-text-fill-color: transparent; }

/* =============================================================================
   EINE Kartenoptik fuer die ganze Seite (alle Seiten und Unterseiten, Desktop und Handy):
   dunkles Marineblau mit leuchtendem hellblauem Rand und Glanz an der Unterkante - die Optik der Hero-Karte "Ihr Anliegen steht im Mittelpunkt".
   Diese Regel steht ganz am Ende und gilt vor allen frueheren Kartenstilen.
   ============================================================================= */
.v2-hero__body,
.v2-hero__more,
.v2-hero__turn-copy,
.v2-orbit__intro,
.v2-orbit__copy,
.v2-orbit__satcard,
.v2-orbit__summary,
.v2-orbit__now,
.v2-track__caption,
.lst-track__caption,
.lst-hud__panel,
.v2-step,
.v2-final__cta,
.v2-faq__item,
.order-faq__item,
body.v2.v2-page .order__intro,
body.v2.v2-page .order__beratung,
body.v2.v2-page .order__block,
body.v2.v2-page .order__done,
body.v2.v2-page .summe,
body.v2.v2-page .contact-card,
body.v2.v2-page .booking.form,
body.v2.v2-page .contact__map,
body.v2.v2-page .service-card,
body.v2.v2-page .mdv-panel,
body.v2.v2-page .mdv-intro-card,
body.v2.v2-page .cta-band,
body.v2.v2-page .svc-acc-item,
body.v2.v2-page .konf,
.rf-card__body,
.rf-dock .rf-card__body,
body.glas body.v2.v2-page .service-card,
body.glas body.v2.v2-page .cta-band,
body.glas .v2-hero__more {
  background: linear-gradient(135deg, rgba(6, 20, 44, 0.86), rgba(2, 10, 26, 0.92)) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.25); backdrop-filter: blur(22px) saturate(1.25);
  border: 1px solid rgba(150, 215, 255, 0.5) !important; border-radius: 16px !important;
  box-shadow: 0 0 0 1px rgba(79, 180, 255, 0.22), 0 0 32px rgba(79, 180, 255, 0.28), inset 0 0 50px rgba(79, 180, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -3px 0 -1px rgba(159, 220, 255, 0.95), 0 14px 28px -18px rgba(79, 180, 255, 0.9) !important;
  clip-path: none !important;
}
.lst-hud__panel,
.v2-faq__item,
.order-faq__item,
.v2-step,
.rf-card__body,
.rf-dock .rf-card__body { border-radius: 12px !important; }
body.v2.v2-page .service-card::before,
body.v2.v2-page .service-card::after,
body.v2.v2-page .cta-band::before,
body.v2.v2-page .cta-band::after,
body.v2.v2-page .konf::before,
body.v2.v2-page .konf::after,
.v2-orbit__now::before,
.v2-orbit__now::after,
.v2-hero__more::before,
.v2-hero__more::after,
.v2-hero__body::before,
.v2-hero__body::after,
.v2-hero__turn-copy::before,
.v2-hero__turn-copy::after,
body.v2.v2-page .mdv-intro-card::before,
body.v2.v2-page .mdv-intro-card::after { display: none !important; }

/* Farbverlauf nur fuer grosse Ueberschriften; Titel kleinerer Karten sind schlicht hell */
body.v2.v2-page .order__intro .section__title,
body.v2.v2-page .order__intro .section__title .accent {
  background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important;
  color: #f4fbff !important; -webkit-text-fill-color: #f4fbff !important; filter: none;
}
.mdv-pagehead { background: none !important; -webkit-text-fill-color: rgba(234, 246, 251, 0.9) !important; color: rgba(234, 246, 251, 0.9) !important; }

/* Kartenoptik mit hoher Spezifitaet: schlaegt alle frueheren Einzelregeln (cta-band, service-card, Konfigurator-Karte u. a.) */
html body.v2.v2-page main .v2-hero__body,
html body.v2 .v2-hero__body,
html body.v2.v2-page main .v2-hero__more,
html body.v2 .v2-hero__more,
html body.v2.v2-page main .v2-hero__turn-copy,
html body.v2 .v2-hero__turn-copy,
html body.v2.v2-page main .v2-orbit__intro,
html body.v2 .v2-orbit__intro,
html body.v2.v2-page main .v2-orbit__copy,
html body.v2 .v2-orbit__copy,
html body.v2.v2-page main .v2-orbit__satcard,
html body.v2 .v2-orbit__satcard,
html body.v2.v2-page main .v2-orbit__summary,
html body.v2 .v2-orbit__summary,
html body.v2.v2-page main .lst-track__caption,
html body.v2 .lst-track__caption,
html body.v2.v2-page main .lst-hud__panel,
html body.v2 .lst-hud__panel,
html body.v2.v2-page main .v2-step,
html body.v2 .v2-step,
html body.v2.v2-page main .v2-final__cta,
html body.v2 .v2-final__cta,
html body.v2.v2-page main .v2-faq__item,
html body.v2 .v2-faq__item,
html body.v2.v2-page main .order-faq__item,
html body.v2 .order-faq__item,
html body.v2.v2-page main .order__intro,
html body.v2 .order__intro,
html body.v2.v2-page main .order__beratung,
html body.v2 .order__beratung,
html body.v2.v2-page main .order__block,
html body.v2 .order__block,
html body.v2.v2-page main .summe,
html body.v2 .summe,
html body.v2.v2-page main .contact-card,
html body.v2 .contact-card,
html body.v2.v2-page main .booking.form,
html body.v2 .booking.form,
html body.v2.v2-page main .contact__map,
html body.v2 .contact__map,
html body.v2.v2-page main .service-card,
html body.v2 .service-card,
html body.v2.v2-page main .mdv-panel,
html body.v2 .mdv-panel,
html body.v2.v2-page main .mdv-intro-card,
html body.v2 .mdv-intro-card,
html body.v2.v2-page main .cta-band,
html body.v2 .cta-band,
html body.v2.v2-page main .svc-acc-item,
html body.v2 .svc-acc-item,
html body.v2.v2-page main .konf,
html body.v2 .konf,
html body.v2.v2-page main .konfkarte,
html body.v2 .konfkarte,
html body.v2.v2-page main .rf-card__body,
html body.v2 .rf-card__body,
html body.v2.v2-page main .rf-dock .rf-card__body,
html body.v2 .rf-dock .rf-card__body {
  background: linear-gradient(135deg, rgba(6, 20, 44, 0.86), rgba(2, 10, 26, 0.92)) !important;
  border: 1px solid rgba(150, 215, 255, 0.5) !important; border-radius: 16px !important; clip-path: none !important;
  box-shadow: 0 0 0 1px rgba(79, 180, 255, 0.22), 0 0 32px rgba(79, 180, 255, 0.28), inset 0 0 50px rgba(79, 180, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -3px 0 -1px rgba(159, 220, 255, 0.95), 0 14px 28px -18px rgba(79, 180, 255, 0.9) !important;
}

html body.v2.v2-page .booking-type,
html body.v2.v2-page .svc-pick,
html body.v2.v2-page .mdv-claim,
.rf__head {
  background: linear-gradient(135deg, rgba(6, 20, 44, 0.86), rgba(2, 10, 26, 0.92)) !important;
  border: 1px solid rgba(150, 215, 255, 0.5) !important; border-radius: 12px !important;
  box-shadow: 0 0 0 1px rgba(79, 180, 255, 0.18), 0 0 18px rgba(79, 180, 255, 0.2), inset 0 -2px 0 -1px rgba(159, 220, 255, 0.8) !important;
}

html body.v2 .v2-hero__text p,
html body.v2 .v2-hero__more-text,
html body.v2 .v2-turn__lead,
html body.v2 .v2-orbit__lead,
html body.v2 .v2-orbit__intro-text,
html body.v2 .v2-orbit__now-text,
html body.v2 .lst-track__caption-text,
html body.v2 .v2-step p,
html body.v2 .v2-faq__item p,
html body.v2 .v2-faq__item li,
html body.v2 .order-faq__item p,
html body.v2 .order__intro .section__lead,
html body.v2 .order__beratung-text,
html body.v2 .contact-info p,
html body.v2 .contact-info__item p,
html body.v2 .mdv-intro-card .section__lead,
html body.v2 .mdv-intro-card .mdv-text,
html body.v2 .mdv-panel p,
html body.v2 .mdv-panel .section__lead,
html body.v2 .service-card__text,
html body.v2 .cta-band p,
html body.v2 .svc-acc-item__a-inner p,
html body.v2 .svc-acc-item__a-inner li,
html body.v2 .v2-final__cta p,
html body.v2 .v2-final__cta li,
html body.v2 .summe__detail,
html body.v2 .summe__hinweis,
html body.v2 .konf p,
html body.v2 .konf label,
html body.v2 .konfkarte p,
html body.v2 .booking p,
html body.v2 .booking label,
html body.v2 .booking-type__meta,
html body.v2 .rf-card__text,
html body.v2 .map-consent__text,
html body.v2 .v2-orbit__satcard .v2-orbit__now-text,
html body.v2 .v2-final__cta-facts li,
html body.v2 .lst-hud__caption { color: #f4f9ff !important; }

/* hoechste Spezifitaet fuer Karten mit besonders hartnaeckigen Einzelregeln (cta-band, service-card u. a.) */
html body.v2.v2-page.v2-page.v2-page.v2-page.v2-page main .service-card,
html body.v2.v2-page.v2-page.v2-page.v2-page.v2-page main .cta-band,
html body.v2.v2-page.v2-page.v2-page.v2-page.v2-page main .konfkarte,
html body.v2.v2-page.v2-page.v2-page.v2-page.v2-page main .mdv-panel,
html body.v2.v2-page.v2-page.v2-page.v2-page.v2-page main .mdv-intro-card,
html body.v2.v2-page.v2-page.v2-page.v2-page.v2-page main .contact-card,
html body.v2.v2-page.v2-page.v2-page.v2-page.v2-page main .booking.form,
html body.v2.v2-page.v2-page.v2-page.v2-page.v2-page main .svc-acc-item,
html body.v2.v2-page.v2-page.v2-page.v2-page.v2-page main .summe,
html body.v2.v2-page.v2-page.v2-page.v2-page.v2-page main .order__intro,
html body.v2.v2-page.v2-page.v2-page.v2-page.v2-page main .order__beratung {
  background: linear-gradient(135deg, rgba(6, 20, 44, 0.86), rgba(2, 10, 26, 0.92)) !important;
  border: 1px solid rgba(150, 215, 255, 0.5) !important; border-radius: 16px !important; clip-path: none !important;
  box-shadow: 0 0 0 1px rgba(79, 180, 255, 0.22), 0 0 32px rgba(79, 180, 255, 0.28), inset 0 0 50px rgba(79, 180, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -3px 0 -1px rgba(159, 220, 255, 0.95), 0 14px 28px -18px rgba(79, 180, 255, 0.9) !important;
}

/* Cookie-Fenster in derselben Kartenoptik, helle Schrift (vorher weiss auf weiss) */
html body .cookie-banner {
  background: linear-gradient(135deg, rgba(6, 20, 44, 0.96), rgba(2, 10, 26, 0.98)) !important;
  border: 1px solid rgba(150, 215, 255, 0.5) !important; border-radius: 16px !important; color: #f4f9ff !important;
  box-shadow: 0 0 0 1px rgba(79, 180, 255, 0.22), 0 0 32px rgba(79, 180, 255, 0.28), inset 0 0 50px rgba(79, 180, 255, 0.12), inset 0 -3px 0 -1px rgba(159, 220, 255, 0.95) !important;
}
html body .cookie-banner__title, html body .cookie-banner__text, html body .cookie-option__label { color: #f4f9ff !important; }
html body .cookie-option__note { color: rgba(244, 249, 255, 0.75) !important; }
html body .cookie-banner__link { color: #7fe3ff !important; }
html body .cookie-option__box { background: rgba(255, 255, 255, 0.06); border-color: rgba(150, 215, 255, 0.7) !important; }
html body .cookie-banner .btn--secondary.cta-orbit { background: rgba(127, 227, 255, 0.1) !important; border: 1px solid rgba(150, 215, 255, 0.6) !important; }
html body .cookie-banner .btn--secondary.cta-orbit .cta-orbit__label { color: #f4f9ff !important; }

/* Grosse Ueberschriften der ganzen Seite: der eine Verlauf (Weiss -> Hellblau -> Blau) ueber die gesamte Ueberschrift, Wortfarben der Einzelteile werden ueberschrieben */
html body.v2 .v2-final__cta h2, html body.v2 .v2-outro__claim, html body.v2 .v2-faq__title, html body.v2 main .section__head .section__title,
html body.v2 .order-faq .section__title, html body.v2.v2-page main:has(.contact-grid) .section__head .section__title {
  display: block; width: fit-content; max-width: 100%;
  background: linear-gradient(96deg, #ffffff 0%, #7fe3ff 48%, #3f7bff 100%) !important; background-size: 100% 100% !important;
  -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 0 14px rgba(127, 227, 255, 0.28));
}
html body.v2 .v2-final__cta h2 em, html body.v2 .v2-outro__claim em, html body.v2 .v2-outro__claim span, html body.v2 .v2-faq__title span, html body.v2 main .section__head .section__title em, html body.v2 main .section__head .section__title span, html body.v2 .order-faq .section__title span {
  background: none !important; color: inherit !important; -webkit-text-fill-color: transparent !important; font-style: normal;
}
html body.v2 .section__head--center .section__title, html body.v2 .section__head--center-mobile .section__title, html body.v2 .v2-outro__claim, html body.v2 .v2-faq__title,
html body.v2.v2-page main:has(.contact-grid) .section__head .section__title { margin-inline: auto; text-align: center; }
@media (max-width: 900px) { html body.v2 .section__head--center-mobile .section__title { margin-inline: 0; text-align: left; } html body.v2 .v2-faq__title { margin-inline: 0; } }

/* Einheitliches Weiss fuer allen Fliesstext im Hauptinhalt (Karten und freie Abschnitte); Akzentfarben (Rubriken, Links, Hinweise, Fehler) bleiben */
html body.v2 main p:not(.summe__hinweis):not(.form__status):not(.mdv-pagehead):not([class*="kicker"]):not([class*="eyebrow"]),
html body.v2 main li:not([class*="kicker"]), html body.v2 main .section__lead, html body.v2 main .contact-info a, html body.v2 main .contact-info p,
html body.v2 main dd, html body.v2 main .booking__hint, html body.v2 main .konf__hint, html body.v2 main label:not(.cookie-option) { color: #f4f9ff !important; }
html body.v2 .v2-orbit__stage p:not([class*="kicker"]), html body.v2 .v2-hero p { color: #f4f9ff !important; }
html body.v2 main p.map-consent__text { color: #f4f9ff !important; }
/* Footer ueberlappt keine Inhalte (der weiche Uebergang kommt allein aus dem Verlauf) */
html body.v2 .footer { margin-top: 0 !important; padding-top: var(--space-2xl) !important; position: relative; z-index: 0; }
html body.v2 main { position: relative; z-index: 1; }
/* Burger-Menue: alle Eintraege gleich, keine Hervorhebung der aktuellen Seite */
@media (max-width: 1023px) {
  .nav__menu a[aria-current="page"], .nav__dropdown-toggle[aria-current="page"], .nav__menu > a[aria-current="page"]:not(.nav__cta) {
    color: #e8f4ff !important; text-decoration: none !important; text-shadow: none !important;
  }
}

/* Untertitel "So arbeite ich ..." weiss; Titel der drei Schritte und der Hero-Karten im einheitlichen Verlauf */
html body.v2 .v2-outro__claim-sub, html body.v2 .v2-outro__claim-sub * { color: #f4f9ff !important; -webkit-text-fill-color: #f4f9ff !important; background: none !important; }
html body.v2 .v2-step h3, html body.v2 .v2-hero__more-lead, html body.v2 .v2-hero__turn-copy .v2-turn__title {
  display: block; width: fit-content; max-width: 100%;
  background: linear-gradient(96deg, #ffffff 0%, #7fe3ff 48%, #3f7bff 100%) !important; background-size: 100% 100% !important;
  -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; -webkit-text-fill-color: transparent !important;
}
html body.v2 .v2-hero__turn-copy .v2-turn__title .v2-turn__word, html body.v2 .v2-hero__turn-copy .v2-turn__title .v2-turn__word--accent {
  background: none !important; color: inherit !important; -webkit-text-fill-color: transparent !important; display: inline;
}
html body.v2 .v2-turn__lead, html body.v2 .v2-hero__more-text, html body.v2 .v2-hero__text p { color: #f4f9ff !important; -webkit-text-fill-color: #f4f9ff !important; }
html body.v2 .v2-outro__claim span.v2-outro__claim-sub { color: #f4f9ff !important; -webkit-text-fill-color: #f4f9ff !important; background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; display: block; }

/* "Mehr Sichtbarkeit fuer Ihr Unternehmen": ein Verlauf ueber beide Zeilen, Untertitel ausserhalb */
html body.v2 .v2-outro__claim { background: none !important; -webkit-text-fill-color: initial !important; color: inherit !important; filter: none; width: 100%; text-align: center; margin-inline: 0; }
html body.v2 .v2-outro__claim .v2-outro__claim-text {
  display: inline-block; text-align: center;
  background: linear-gradient(110deg, #ffffff 0%, #7fe3ff 48%, #3f7bff 100%) !important; background-size: 100% 100% !important;
  -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 0 14px rgba(127, 227, 255, 0.28));
}
html body.v2 .v2-outro__claim .v2-outro__claim-text em { background: none !important; color: inherit !important; -webkit-text-fill-color: transparent !important; font-style: normal; }
html body.v2 p.v2-outro__claim-sub { display: block; text-align: center; color: #f4f9ff !important; -webkit-text-fill-color: #f4f9ff !important; background: none !important; margin: 0.8rem auto 0; }

/* Titel der drei Schritte: ein konstanter, WCAG-konformer Blauton (hell genug auf dem dunklen Kartengrund, Kontrast > 7:1) */
html body.v2 .v2-step h3 {
  background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important;
  color: #8fd0ff !important; -webkit-text-fill-color: #8fd0ff !important;
}

/* Handy: kleine Sektionsueberschriften (Haeufige Fragen, Rund um Ihre Anfrage, Referenzen, Ueber uns) im grauweissen Ton, ohne Verlauf */
@media (max-width: 900px) {
  html body.v2 .v2-faq__title, html body.v2 .order-faq .section__title, html body.v2 .order-faq h2, html body.v2 .rf .rf__title, html body.v2 .mdv-pagehead {
    background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; filter: none !important;
    color: rgba(234, 246, 251, 0.9) !important; -webkit-text-fill-color: rgba(234, 246, 251, 0.9) !important;
  }
  html body.v2 .v2-faq__title span, html body.v2 .order-faq .section__title span { color: inherit !important; -webkit-text-fill-color: rgba(234, 246, 251, 0.9) !important; }
}
/* Titel der drei Schritte im selben Hellblau wie die Nummer davor (#7fe3ff, Kontrast zum dunklen Kartengrund > 11:1) */
html body.v2 .v2-step h3 { color: #7fe3ff !important; -webkit-text-fill-color: #7fe3ff !important; }

/* Handy: alle Handlungsbuttons (CTAs) ueber die volle Breite ihrer Karte bzw. des Bildschirms */
@media (max-width: 900px) {
  html body main .cta-orbit, html body main a.btn, html body main button.btn, html body .rf-dock .rf-card__go, html body .rf-card__go,
  html body .v2-hero__actions .cta-orbit, html body .order__beratung-actions, html body .order__beratung-actions .cta-orbit, html body .v2-final__cta .cta-orbit, html body .cta-band .cta-orbit, html body .konf__btn {
    display: flex !important; width: 100% !important; max-width: none !important; justify-content: center; box-sizing: border-box; text-align: center;
  }
  html body .v2-hero__actions, html body .cta-band, html body .konf__actions, html body .booking__nav { width: 100%; }
  html body .cta-band { flex-direction: column; align-items: stretch !important; }
  html body .konf__actions { flex-direction: column; align-items: stretch; }
  html body .konf__skip { margin-left: 0; text-align: center; }
  html body .v2-variants button, html body .lst-prev, html body .lst-next { width: auto !important; }
}

/* Kalender (Calendly) auf der Kontaktseite: Hinweiskarte, nach dem Klick der Kalender als iframe (Zwei-Klick-Loesung wie die Karte) */
body.v2.v2-page .calendly { min-width: 0; max-width: 72rem; margin-inline: auto; }
body.v2.v2-page .calendly__consent {
  display: grid; gap: 1rem; justify-items: center; text-align: center; padding: 2rem 1.5rem;
  background: var(--v2-space-hi); border: 1px solid var(--v2-line); border-radius: 10px;
}
body.v2.v2-page .calendly__title { margin: 0; font-size: 1.5rem; }
body.v2.v2-page .calendly__text { margin: 0; max-width: 40rem; color: var(--v2-text-dim); }
body.v2.v2-page .calendly__link { color: var(--v2-core); }
body.v2.v2-page .calendly__frame { display: block; width: 100%; height: 760px; border: 1px solid var(--v2-line); border-radius: 10px; background: #04101a; }
@media (max-width: 700px) {
  body.v2.v2-page .calendly__frame { height: 640px; }
}

/* Unterueberschriften der Kontaktseite (Karte, Terminbuchung): eigene Klasse, damit die grosse Kopfzeile (.section__head) nicht greift */
body.v2.v2-page .sub-head { display: grid; gap: 0.6rem; justify-items: center; text-align: center; max-width: 44rem; margin: 0 auto 2rem; }
body.v2.v2-page .sub-head__eyebrow { margin: 0; font: 600 0.8rem/1.3 var(--font-display); letter-spacing: 0.2em; text-transform: uppercase; color: var(--v2-core); }
body.v2.v2-page .sub-head__title {
  margin: 0; font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1.1; letter-spacing: -0.02em; width: fit-content;
  background: linear-gradient(96deg, #ffffff 0%, #7fe3ff 48%, #3f7bff 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
body.v2.v2-page .sub-head__lead { margin: 0; max-width: 40rem; color: var(--v2-text-dim); line-height: 1.5; }
body.v2.v2-page .sub-head--map { display: none; }

/* Kalender-Karte im Stil der Kartenflaeche (Glasflaeche, abgeschraegte Ecken) */
body.v2.v2-page .calendly__consent, body.v2.v2-page .calendly__frame {
  border: 1px solid rgba(127, 227, 255, 0.3); border-radius: 0; box-shadow: inset 0 0 40px rgba(41, 140, 230, 0.16);
  clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px);
}
body.v2.v2-page .calendly__consent { background: var(--hud-glass); padding: 3rem 1.5rem; }
body.v2.v2-page .calendly__title { font: 600 1.25rem/1.3 var(--font-display); }
body.v2.v2-page main:has(.contact-grid) #termin { padding-top: 3rem; }

/* Kontaktseite (Desktop): das Terminformular entfaellt - Eckdaten, Unterueberschrift und Karte stehen untereinander in voller Breite */
@media (min-width: 901px) {
  body.v2.v2-page main:has(.contact-grid) .contact-grid { grid-template-columns: 1fr; grid-template-rows: auto auto auto !important; }
  body.v2.v2-page main:has(.contact-grid) .sub-head--map { display: grid; grid-column: 1 / -1; grid-row: 2; margin: 2.5rem auto 0.5rem; }
  body.v2.v2-page main:has(.contact-grid) .contact__map { grid-column: 1 / -1; grid-row: 3; height: 24rem !important; align-self: start; }
}

body.v2.v2-page .vk-qr { margin: 0; display: grid; gap: 0.8rem; justify-items: center; text-align: center; max-width: 15rem; }
body.v2.v2-page .vk-qr__code { width: min(100%, 244px); background: #fff; padding: 8px; border-radius: 6px; }
body.v2.v2-page .vk-qr__code svg { display: block; width: 228px; max-width: 100%; height: auto; }
body.v2.v2-page .vk-qr figcaption { color: var(--v2-text-dim); font-size: 0.9rem; line-height: 1.45; }

/* Kontaktseite (Desktop): Seite beginnt direkt unter der Kopfleiste; Eckdaten als 2x2-Karte, rechts daneben gleich grosse QR-Karte */
@media (min-width: 901px) {
  body.v2.v2-page main:has(.contact-grid):not(:has(.mdv-intro-grid)) > section:first-child .section__head { min-height: 0 !important; padding-block: 1.5rem 2rem; }
  body.v2.v2-page main:has(.contact-grid):not(:has(.mdv-intro-grid)) > section:first-child { padding-top: calc(var(--header-h, 76px) + 1.5rem) !important; }
  body.v2.v2-page main:has(.contact-grid) .contact-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); max-width: 70rem; }
  body.v2.v2-page main:has(.contact-grid) .contact-card { grid-column: 1; grid-row: 1; justify-self: stretch !important; align-self: stretch !important; width: auto !important; max-width: none !important; display: grid; align-content: center; }
  body.v2.v2-page main:has(.contact-grid) .contact-info { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 1.2rem; }
  body.v2.v2-page main:has(.contact-grid) .contact-info__item { min-width: 0; }
  body.v2.v2-page main:has(.contact-grid) .contact-info__item p { overflow-wrap: anywhere; }
  body.v2.v2-page main:has(.contact-grid) .vk-qr--side { grid-column: 2; grid-row: 1; }
  body.v2.v2-page main:has(.contact-grid) .sub-head--map { grid-row: 2; }
  body.v2.v2-page main:has(.contact-grid) .contact__map { grid-row: 3; }
}
/* QR-Karte: Rahmen im Stil der Seite (Glasflaeche, abgeschraegte Ecken) */
body.v2.v2-page .vk-qr {
  max-width: none; padding: 1.4rem; align-content: center; background: var(--hud-glass); border: 1px solid rgba(127, 227, 255, 0.3);
  box-shadow: inset 0 0 40px rgba(41, 140, 230, 0.16); clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px);
}
body.v2.v2-page .vk-qr--side .vk-save { justify-self: center; }
@media (min-width: 901px) { body.v2.v2-page .vk-qr--side .vk-save { display: none; } }
@media (max-width: 900px) { body.v2.v2-page .vk-qr--side .vk-qr__code { display: none; } }

@media (min-width: 901px) { body.v2.v2-page main:has(.contact-grid):not(:has(.mdv-intro-grid)) .contact-card { align-self: stretch !important; margin-top: 0 !important; } }
/* QR-Karte neben der Kontaktkarte: gleiche runde Form und Kontur wie die Kontaktkarte */
body.v2.v2-page .vk-qr--side { clip-path: none; border-radius: 18px; border-color: rgba(127, 227, 255, 0.55); box-shadow: 0 0 24px rgba(63, 123, 255, 0.22), inset 0 0 40px rgba(41, 140, 230, 0.16); }
/* Beschriftung der QR-Karte: Desktop nennt den Code, Handy (ohne Code) nur den Knopf darunter */
body.v2.v2-page .vk-cap-m { display: none; }
@media (max-width: 900px) { body.v2.v2-page .vk-cap-d { display: none; } body.v2.v2-page .vk-cap-m { display: inline; } }
/* Konsistenz: Kalender-Link wie der Karten-Link (unterstrichen, Hover/Fokus), Wort-Witwen in den neuen Ueberschriften */
body.v2.v2-page .calendly__link { font-size: 0.85rem; text-decoration: underline; text-underline-offset: 3px; }
body.v2.v2-page .calendly__link:hover, body.v2.v2-page .calendly__link:focus-visible { text-decoration-thickness: 2px; }
body.v2.v2-page .sub-head__title { text-wrap: balance; }
body.v2.v2-page .sub-head__lead, body.v2.v2-page .calendly__text, body.v2.v2-page .vk-qr figcaption { text-wrap: pretty; }
/* Leistungen: waehrend "Animation wird berechnet" noch keine Fortschrittsleiste, Pfeile und Wiedergabeknoepfe */
html.lst-loading .lst-variants, html.lst-loading [data-lst-progress], html.lst-loading .lst-prev, html.lst-loading .lst-next { visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; }
/* Referenzen (Handy und kleines Tablet): die Ueberschrift steht ohne Kasten (die Karten-Regel .rf__head oben gilt nur am Desktop) */
@media (max-width: 900px) { html body.v2 .rf .rf__head { background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; } }