/* ── Basis der Kontaktkarte: ERZEUGT, nicht von Hand aendern ─────────
   Die noch gebrauchten Regeln aus demo/demo.css und einfahren/efx.css,
   maschinell gefiltert nach einer Messung ueber neun Seiten aller Bauarten
   (welche Selektoren treffen ueberhaupt noch etwas, Zustandsklassen wie
   ist-gedrueckt mitgezaehlt). Der Rest der beiden Dateien gehoert zum
   Einfahr-Modus und zur Zeiger-Vorfuehrung, die seit v.48 nicht mehr laufen,
   und wird nur noch von den Mockup-Seiten geladen.

   Neu erzeugen:
     node <repo>/scratchpad/css-nutzung.mjs           (misst, schreibt lebende.txt)
     node build/kontaktdemo/extrahiere-basis.mjs <lebende.txt>
   Danach buendeln und den Computed-Style-Vergleich laufen lassen. */

/* ═══ aus demo/demo.css ═══ */

/* Buehne der Kontakt-Demo.
   Marken-Token aus dem Theme: Navy #0F1F33, Hellblau #6BB3D9, WhatsApp #25D366.

   WICHTIG: Auf allen Elementen, die renderAt(ms) steuert, stehen KEINE
   transition- und KEINE animation-Regeln. Zeit kommt ausschliesslich aus der
   Timeline, sonst weicht der Frame-Capture vom Live-Bild ab.

   Alle Masse haengen an --s statt an festen Pixeln. Im breiten Container ist
   --s = 1cqw, im schmalen wird --s angehoben und die Buehne wechselt ins
   Hochformat. Ohne das schrumpfen Knoepfe und Schrift auf dem Telefon mit der
   Containerbreite mit und werden unbrauchbar klein. */
/* Die Karte umfasst beides: oben die Vorfuehrung, unten die Bedienleiste.
   Ihre eigenen Masse stehen in festen Pixeln, nicht in --s: sie richtet sich
   nach dem Traeger um sie herum, nicht nach sich selbst. */
.ctademo {
  /* ── Farben der Buehne ────────────────────────────────────────────
     Alle Flaechen und Textfarben der Vorfuehrung haengen an diesen sechs
     Werten. Vorher standen sie als 16 einzelne Hexwerte verstreut in der
     Datei; ein Wechsel des Grundtons war dadurch ein Suchlauf statt einer
     Entscheidung. Die helle Fassung nimmt den Ton der Formularkarte auf
     (.lc-owner: #E8F4F8), damit Karte und Formular zusammengehoeren.
     Die dunkle Fassung steht unter .ctademo-dunkel und ist damit in einem
     Schritt zurueckholbar. */
  --grund:      #EDF6FA;   /* Buehnenflaeche, Mitte */
  --grund-tief: #E8F4F8;   /* oben, Ton von .lc-owner */
  --grund-fuss: #E2EFF6;   /* unten */
  --grund-licht: rgba(255, 255, 255, .85);  /* Lichtkegel oben */
  --text:       #0F1F33;
  --text-leise: #55677C;   /* 4,8:1 auf --grund, geprueft */
  --panel:      #fff;
  --panel-rand: #D8E6EE;
  --panel-schatten: rgba(8, 16, 28, .16);   /* wie .lead-card */
  --ring:       transparent;               /* Kontur des Navy-Knopfs */
  --aktiv-ring: rgba(15, 31, 51, .16);
  --puls-ring:  rgba(15, 31, 51, .5);
  --zeiger-schatten: rgba(8, 16, 28, .28);
  --gruen-text: #17915B;   /* "verbunden", 4,6:1 auf --panel */

  /* Beide Knopf-Reihen teilen sich Groesse und Abstand. Vorher lag die Reihe
     in der Buehne sichtbar weiter auseinander als die echte darunter. */
  /* Vorgefuehrt kleiner als echt: das Raster haelt die Mitten deckungsgleich,
     die Groesse sagt, welche Reihe die Bedienung ist. */
  --knopf-demo: 46px;
  --knopf-echt: 56px;
  /* Eine Spalte je Weg, breit genug fuer das laengste Label. Beide Reihen
     nutzen dasselbe Raster, damit die Knoepfe exakt uebereinander stehen. */
  --knopf-spalte: 76px;
  --knopf-abstand: 24px;
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(107, 179, 217, .3);
  box-shadow: 0 24px 60px rgba(8, 16, 28, .4);
}

/* Akzentbalken wie auf der Formularkarte (hero_split_block.txt: .lead-card::before) */
.ctademo::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: linear-gradient(90deg, #6BB3D9, #8BC9E8);
  z-index: 6;
}

/* ── Vorgefuehrte Knoepfe IN der Buehne ──────────────────────────────
   Attrappen. Sie treten auf, werden angeklickt und weichen dem Panel.
   Die anklickbaren Gegenstuecke stehen in der Leiste darunter. */
.ctademo-btns {
  position: absolute;
  /* Eingerueckt ueber left/right, nicht ueber padding: die Leiste unten traegt
     ihr Polster am ELTERNTEIL, ihre Knopfreihe selbst hat keines. Ein eigenes
     padding hier haette die Buehnenreihe doppelt eingerueckt, ihre Spalten
     waeren 3 px schmaler gewesen und die Knoepfe haetten die darunter um bis zu
     5 px verfehlt. */
  left: 14px; right: 14px;
  bottom: calc(4.4 * var(--s));
  z-index: 4;
  pointer-events: none;
}

/* Eine Flex-Reihe am unteren Rand, mit demselben Abstand wie die Leiste
   darunter. Frueher standen hier feste Prozentwerte je Knopf; die Reihe lag
   dadurch sichtbar weiter auseinander als die echte Reihe direkt darunter.
   Die Lage steht in CSS, nicht im Skript: demo.mjs misst die Knoepfe am
   gerenderten DOM, damit der Zeiger sie in jedem Format trifft. */
/* Vier gleiche Spalten statt vier feste Breiten: so passt die Reihe in jede
   Kartenbreite, und die Mitten bleiben deckungsgleich, weil beide Reihen
   dasselbe Raster und dasselbe seitliche Polster haben. Ein festes Raster war
   in der schmalen Hero-Karte breiter als die Buehne und lief seitlich heraus. */
.ctademo-btns,
.ctademo-leiste-btns {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--knopf-abstand);
  max-width: calc(4 * var(--knopf-spalte) + 3 * var(--knopf-abstand));
  margin-inline: auto;
}

.ctademo-knopf {
  display: flex;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
}

/* ── Bedienleiste: die echten Knoepfe ────────────────────────────────
   Heller Grund und Stillstand. Der Bruch zur bewegten Buehne darueber ist
   die eigentliche Botschaft: hier wird nichts vorgefuehrt, hier wird geklickt.
   Diese Knoepfe stehen NIE unter der Steuerung von renderAt, sie bleiben,
   was auch immer die Vorfuehrung gerade zeigt. */
/* Feste Pixel, nicht --s: ein Knopf, den man wirklich trifft, ist 68 px gross,
   egal wie gross der Film daruber gerade dargestellt wird. */
.ctademo-leiste {
  padding: 16px 14px;
  background: #fff;
  border-top: 1px solid #E2E8F0;
  text-align: center;
}

/* Aufforderung direkt ueber den echten Knoepfen. Die Kopfleiste der Karte sagt,
   worum es geht; diese Zeile sagt, was zu tun ist. */
.ctademo-leiste-kopf {
  margin-bottom: 12px;
  font-size: 14.5px;
  font-weight: 800;
  line-height: 1.3;
  color: #35618C;
  text-align: center;
}

/* ── Persoenliche Kopfzeile ───────────────────────────────────────
   Der Zweizeiler der Sticky-Bar: die Leiste sagt nicht mehr, WAS zu
   druecken ist, sondern was die Anfrage kostet (nichts) und wie sie geht.
   BEWUSST ohne Portraet: Torben steht in der Vorfuehrung (Chip, Panels)
   schon oft genug im Bild. Erbt Zentrierung, Farbe und Fettung von
   .ctademo-leiste-kopf; nur die beiden Zeilen bekommen eigene Groessen. */
.ctademo-leiste-kopf-p b {
  display: block;
  font-size: 15px;
  line-height: 1.25;
  letter-spacing: -.01em;
}

.ctademo-leiste-kopf-p span {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  color: #5B7185;
}

.ctademo-echt { text-decoration: none; text-align: center; display: block; width: 100%; }

/* Huelle NUR um den Kreis. Die Empfehlungs-Animation (efx.css,
   .ctademo-echt.ist-empfohlen) sitzt auf ihr, nicht auf .ctademo-echt selbst,
   damit das Label unter dem Kreis stillsteht und lesbar bleibt: waere der
   ganze Link der Animations-Traeger, wackelte die Beschriftung mit. Block statt
   dem Standard-inline eines span: sonst wuerde der block-level .ctademo-knopf
   (display:flex) als Kind eines inline-Elements "block-in-inline" gesplittet.
   Im gestapelten Format bleibt dadurch alles wie zuvor: die Huelle fuellt die
   volle Breite von .ctademo-echt, .ctademo-knopf zentriert sich darin per
   margin:auto. Im Querformat-Grid (Zeile ~779) wird jede Box automatisch zum
   Grid-Item, auch ohne eigene Grid-Regeln fuer die Huelle: sie uebernimmt so
   die erste Spalte (var(--knopf-echt) breit), der Kreis darin bleibt exakt so
   gross wie die Spalte selbst. */
.ctademo-knopfhuelle { display: block; }

.ctademo-echt .ctademo-knopf {
  width: var(--knopf-echt);
  height: var(--knopf-echt);
  margin: 0 auto;
  transition: transform .22s cubic-bezier(.34, 1.4, .64, 1), box-shadow .22s ease;
}

.ctademo-echt-label { transition: color .22s ease; }

/* Kein "animation: none" beim Hover: die Puls-Animation startete dadurch beim
   Verlassen von vorn und lief danach gegen die anderen drei versetzt. Sie setzt
   ohnehin nur box-shadow, der Hover nur transform. */
/* Deutlicher als die frueheren 1,1: der Knopf waechst, hebt sich an und wirft
   einen farbigen Schein in seiner eigenen Farbe. Wer mit der Maus daraufkommt,
   soll keinen Zweifel haben, dass hier etwas passiert. */
.ctademo-echt:hover .ctademo-knopf {
  transform: translateY(-4px) scale(1.18);
  box-shadow: 0 10px 26px var(--schatten), 0 0 0 6px var(--puls);
}

.ctademo-echt:hover .ctademo-echt-label { color: #35618C; }

/* Ein echter Tastendruck: der Knopf weicht kurz zurueck (kleiner, minimal
   nach unten), statt beim Klick noch groesser zu werden wie im Hover
   darueber. Das fuehlt sich gedrueckt an, nicht angehoben. Eigene, kuerzere
   Transition: die Basis-Transition (oben, .22s) ist auf den Hover-Anstieg
   ausgelegt und wirkt fuer den Druck traege; .09s macht ihn sofort spuerbar. */
.ctademo-echt:active .ctademo-knopf {
  transform: translateY(1px) scale(0.94);
  transition: transform .09s ease-out;
}

.ctademo-echt:focus-visible { outline: 2px solid #6BB3D9; outline-offset: 4px; border-radius: 12px; }

.ctademo-echt-label {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #0F1F33;
  white-space: nowrap;
}

/* Ein einziger Puls fuer alle vier Knoepfe: gleiche Dauer, gleiche Phase.
   Vorher hatte jeder Knopf seinen eigenen Keyframe mit eigener Laenge, dadurch
   liefen sie sichtbar auseinander. Die Farbe kommt je Knopf aus --puls. */
/* Der Puls laeuft auf einem eigenen Ring, nicht auf dem Knopf selbst.
   Beides auf box-shadow zu legen ging nicht: eine laufende Animation gewinnt in
   der Kaskade gegen jede normale Deklaration, der Hover-Schatten kam nie an.
   Frueher war die Animation deshalb beim Hover abgeschaltet, wodurch sie beim
   Verlassen neu startete und die vier Knoepfe auseinanderliefen. */
.ctademo-echt .ctademo-knopf {
  position: relative;
  box-shadow: 0 4px 20px var(--schatten);
}

.ctademo-echt .ctademo-knopf::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  animation: ctademoPuls 2.4s ease-in-out infinite;
}

.ctademo-echt-tel { --farbe: #0F1F33; --schatten: rgba(26, 26, 46, .35);   --puls: rgba(15, 31, 51, .40); }

.ctademo-echt-wa { --farbe: #25D366; --schatten: rgba(37, 211, 102, .5);  --puls: rgba(37, 211, 102, .45); }

.ctademo-echt-mail { --farbe: #3E5A75; --schatten: rgba(62, 90, 117, .45);  --puls: rgba(62, 90, 117, .45); }

.ctademo-echt-form { --farbe: #4E97BD; --schatten: rgba(78, 151, 189, .5); --puls: rgba(78, 151, 189, .45); }

.ctademo-echt .ctademo-knopf { background: var(--farbe); }

.ctademo-echt-tel  .ctademo-knopf svg { width: 25px; height: 25px; stroke: #fff; fill: none; }

.ctademo-echt-wa   .ctademo-knopf svg { width: 28px; height: 28px; fill: #fff; }

.ctademo-echt-mail .ctademo-knopf svg { width: 26px; height: 26px; stroke: #fff; fill: none; }

.ctademo-echt-form .ctademo-knopf svg { width: 25px; height: 25px; stroke: #fff; fill: none; }

@keyframes ctademoPuls {
  0%, 100% { box-shadow: 0 0 0 0 var(--puls); }
  55%      { box-shadow: 0 0 0 15px rgba(0, 0, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
.ctademo-echt .ctademo-knopf::after { animation: none; }
}

/* Beide Reihen an der Karte, nicht an der Buehne: sie sollen deckungsgleich
   bleiben, und die eine steht in der Buehne, die andere darunter. */
@container ctademo-karte (max-width: 620px) {
.ctademo-btns, .ctademo-leiste-btns { --knopf-abstand: 16px; --knopf-spalte: 74px; }
}

/* ── Hochformat, Lage der beweglichen Teile ──────────────────────────
   Muss am Dateiende stehen: bei gleicher Spezifitaet gewinnt die spaetere
   Regel, und die Basiswerte fuer .ctademo-panel und .ctademo-btn stehen
   weiter oben. Die Knoepfe ruecken tiefer, damit das hohe Formular-Panel
   darueber Platz hat, ohne das Etikett zu verdecken. */
@container ctademo-buehne (max-width: 620px) {
.ctademo-btns { bottom: calc(4.2 * var(--s)); }
}

.ctademo-echt-mail .ctademo-knopf svg { width: 26px; height: 26px; }

/* ── Querformat: Bedienleiste als Spalte rechts ──────────────────────
   Ab dieser Breite steht die Vorfuehrung links und die Bedienung rechts
   daneben. Die Schwelle liegt bei 720 px, die Sektions-Karte bei 900 px:
   damit bleiben der Buehne 680 px, deutlich ueber den 620 px, ab denen sie
   ins Hochformat wechselt. Bei knapperem Abstand koennte eine Rundung die
   Buehne kippen lassen.
   Die Hero-Karte bleibt mit 340 px darunter und damit im Hochformat. */
@container ctademo-karte (min-width: 720px) {
.ctademo {
    display: grid;
    grid-template-columns: 1fr 220px;
    grid-template-rows: auto 1fr;
    align-items: stretch;
  }

.ctademo-leiste {
    border-top: 0;
    border-left: 1px solid #E2E8F0;
    position: relative;
    display: flex;
    align-items: center;
    padding: 20px 18px;
    text-align: left;
  }

/* Der Kopf sitzt oben in der Spalte und NICHT im Fluss: sonst schoebe er den
     Knopfblock um seine halbe Hoehe nach unten, und der stuende dann nicht mehr
     zeilengleich neben der Reihe in der Buehne. */
.ctademo-leiste-kopf {
    position: absolute;
    left: 18px; right: 18px; top: 20px;
    margin-bottom: 0;
  }

/* ── Beide Knopfspalten auf gleicher Hoehe ────────────────────────
     Beide Bloecke sind gleich hoch (vier Zeilen zu --knopf-echt, dazwischen
     dieselbe Luecke) und sitzen mittig in ihrer Spalte. Da Buehne und Leiste
     im Raster gleich hoch sind, stehen die Knoepfe damit zeilengenau
     nebeneinander. Moeglich, seit die Ueberschrift ueber der ganzen Karte
     steht: solange sie in der Leiste stand, verschob sie den einen Block um
     ihre halbe Hoehe, und die haengt an der Laenge des Textes. */
.ctademo-leiste-btns {
    width: 100%;
    grid-template-columns: 1fr;
    grid-auto-rows: var(--knopf-echt);
    gap: 12px;
    align-items: center;
  }

.ctademo-echt {
    display: grid;
    grid-template-columns: var(--knopf-echt) 1fr;
    align-items: center;
    gap: 12px;
    width: auto;
    text-align: left;
  }

.ctademo-echt .ctademo-knopf { margin: 0; }

.ctademo-echt-label { margin-top: 0; }

/* Die vorgefuehrten Knoepfe stehen als Spalte am rechten Rand der Buehne,
     Zeile fuer Zeile neben ihrem echten Gegenstueck. Damit gehoert die ganze
     linke Flaeche der Vorfuehrung, statt dass eine Knopfreihe unten ein
     Drittel der Hoehe wegnimmt. */
.ctademo-btns {
    left: auto;
    right: calc(1.4 * var(--s));
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    width: var(--knopf-echt);
    grid-template-columns: 1fr;
    grid-auto-rows: var(--knopf-echt);
    gap: 12px;
    max-width: none;
    margin-inline: 0;
    align-items: center;
  }
}

/* ═══ aus einfahren/efx.css ═══ */

/* ── Dunkle Bedienleiste ─────────────────────────────────────────────
   Fuer Karten in HELLER Umgebung (Kontakt-Sektion): dort ist alles um die
   Karte hell, und die weisse Leiste ging unter. Im Hero bleibt sie weiss,
   dort traegt der dunkle Grund der Sektion den Kontrast.
   Der Puls laeuft hier WEISS, damit die Knoepfe auf dem Navy-Grund
   hervortreten. */
.leiste-dunkel .ctademo-leiste {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(107, 179, 217, 0.18), transparent 70%),
    linear-gradient(165deg, #1A3856 0%, #0F1F33 100%);
  border-color: rgba(107, 179, 217, 0.35);
}

.leiste-dunkel .ctademo-leiste-kopf { color: #fff; }

/* Persoenliche Kopfzeile auf dunklem Grund: die Fettzeile erbt das Weiss der
   Kopfzeile, die Subline braucht den hellen Graublau-Ton der Sticky-Bar. */
.leiste-dunkel .ctademo-leiste-kopf-p span { color: #B9CBDB; }

.leiste-dunkel .ctademo-echt-label { color: #fff; }

.leiste-dunkel .ctademo-echt:hover .ctademo-echt-label { color: #8BC9E8; }

/* Weisser Puls fuer alle vier Wege statt der Knopffarbe. */
.leiste-dunkel .ctademo-echt { --puls: rgba(255, 255, 255, 0.6); }

/* Die dunklen Knoepfe (Anrufen navy, E-Mail graublau) braeuchten sonst den
   Puls, um ueberhaupt sichtbar zu sein: eine staendige helle Kontur traegt
   sie auch zwischen den Pulsschlaegen. */
.leiste-dunkel .ctademo-echt-tel .ctademo-knopf { border: 2px solid rgba(255, 255, 255, 0.7); }

.leiste-dunkel .ctademo-echt-mail .ctademo-knopf { border: 2px solid rgba(255, 255, 255, 0.45); }

/* ── Kontaktwege v2 ───────────────────────────────────────────────────
   Gehoert zu v2.mjs. Abgenommen am Mockup unter
   prototype/_mockups/cta-ab-test/kontaktwege-v2/.

   Seit dem Rollout (2026-08-16) gilt v2 site-weit. Bis dahin trug jede Regel,
   die BESTEHENDES Markup trifft, ein body.home; diese Praefixe sind mit dem
   Gate gefallen. Regeln auf Klassen, die erst v2.mjs setzt (ctademo-v2,
   kxw-*, v2-*), hatten es nie noetig: dieses Markup entsteht nur dort, wo v2
   gelaufen ist. */

/* ── Hero-Karte: nur noch die Bedienleiste ────────────────────────── */
.ctademo-v2 { position: relative; container: ctademo-karte / inline-size; }
.ctademo-v2 .ctademo-leiste {
  border-top: 0;
  border-radius: 16px;
  position: relative;
  padding: 20px 18px;
}
.ctademo-v2.leiste-dunkel .ctademo-leiste { box-shadow: 0 10px 30px rgba(8, 16, 28, .35); }

/* Kopfzeile mit Portraet. Solange die Vorfuehrung eine Buehne hatte, stand
   Torben in Chip und Panels ohnehin im Bild und die Kopfzeile blieb bewusst
   ohne Gesicht. Ohne Buehne ist die Karte reine Schrift und vier Kreise; das
   Portraet gibt ihr wieder einen Absender. Bild links, Text daneben:
   uebereinander gestapelt schoebe es die Knoepfe zu weit nach unten. */
.ctademo-v2 .ctademo-leiste-kopf {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 18px;
  text-align: left;
}
.ctademo-v2 .v2-portraet {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
  background: #16324B;
  border: 2px solid rgba(78, 151, 189, .45);
  box-shadow: 0 3px 10px rgba(15, 31, 51, .18);
}
.ctademo-v2.leiste-dunkel .v2-portraet {
  border-color: rgba(139, 201, 232, .55);
  box-shadow: 0 3px 12px rgba(8, 16, 28, .4);
}
.ctademo-v2 .ctademo-leiste-kopf-p b,
.ctademo-v2 .ctademo-leiste-kopf-p span { text-align: left; }
/* Die Frage traegt die Karte, sie darf nicht wie eine Beschriftung wirken.
   Von 15 auf 19 px; die Zeile darunter bleibt, damit der Abstand stimmt. */
.ctademo-v2 .ctademo-leiste-kopf-p b { font-size: 19px; line-height: 1.2; }

/* Gedrueckter Knopf: sichtbar kleiner, kurz und ohne Nachwippen. Ein Klick
   ist ein harter Vorgang, kein Federn. Der Schatten rueckt naeher heran, als
   wuerde der Knopf auf die Flaeche gedrueckt. */
.ctademo-v2 .ctademo-echt { transition: none; }
.ctademo-v2 .ctademo-echt .ctademo-knopf {
  transition: transform .11s ease-out, box-shadow .11s ease-out;
}
.ctademo-v2 .ctademo-echt.ist-gedrueckt .ctademo-knopf {
  transform: translateY(2px) scale(.87);
  box-shadow: 0 1px 5px var(--schatten);
}
/* Die Karte steht auf hellem Grund, die Beschriftung ist dunkel. Das helle
   Blau der dunklen Leiste waere hier nicht zu lesen. */
.ctademo-v2 .ctademo-echt.ist-gedrueckt .ctademo-echt-label { color: #35618C; }
.ctademo-v2.leiste-dunkel .ctademo-echt.ist-gedrueckt .ctademo-echt-label { color: #8BC9E8; }

/* ── Knoepfe wachsen der Reihe nach ───────────────────────────────
   Statt eines fremden Zeigers, der klickt: jeder Knopf wird kurz groesser,
   einer nach dem anderen, dann von vorn. Das braucht keine Erklaerung und
   wirkt auf dem Telefon genauso wie am Rechner.

   Das Wachsen liegt auf dem LINK, nicht auf dem Knopf: eine laufende
   Animation gewinnt in der Kaskade gegen jede normale Deklaration, auf dem
   Knopf kaeme der Hover-Transform nie an. So multiplizieren sich beide
   Ebenen sauber. */
@keyframes v2Wachsen {
  0%, 22%, 100% { transform: scale(1); }
  8%            { transform: scale(1.18); }
}
/* In der Kontakt-Sektion deutlicher: die Knoepfe sind dort mit 42 px nur drei
   Viertel so gross wie in der Hero, derselbe Faktor faellt entsprechend
   weniger auf. */
@keyframes v2WachsenGross {
  0%, 22%, 100% { transform: scale(1); }
  8%            { transform: scale(1.38); }
}
/* Der Ring gehoert zu den Kontaktwegen: dort soll das Wachsen einmal
   deutlicher pulsieren. In der Hero bleibt es beim reinen Groesserwerden,
   die Knoepfe stehen dort ohnehin allein auf der Karte. */
@keyframes v2Ring {
  0%        { box-shadow: 0 0 0 0 var(--puls); }
  16%       { box-shadow: 0 0 0 18px rgba(0, 0, 0, 0); }
  17%, 100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
}

/* Hero: vier Knoepfe, Umlauf 4,8 s */
.ctademo-leiste-btns.v2-wachsen .ctademo-echt {
  animation: v2Wachsen 4.8s ease-in-out infinite;
}
.ctademo-leiste-btns.v2-wachsen .ctademo-echt:nth-child(2) { animation-delay: 1.2s; }
.ctademo-leiste-btns.v2-wachsen .ctademo-echt:nth-child(3) { animation-delay: 2.4s; }
.ctademo-leiste-btns.v2-wachsen .ctademo-echt:nth-child(4) { animation-delay: 3.6s; }

/* Der Absendeknopf ist ein breiter Riegel, kein Kreis: derselbe Faktor haette
   ihn ueber den Kartenrand geschoben. 1,04 reicht, um ihn im Umlauf
   mitzunehmen, ohne dass das Layout arbeitet. */
@keyframes v2WachsenRiegel {
  0%, 22%, 100% { transform: scale(1); }
  8%            { transform: scale(1.04); }
}

/* Kontaktwege UND Absendeknopf laufen in EINEM Umlauf von 6 s: Telefon,
   E-Mail, WhatsApp, zuletzt der Absendeknopf. Die Runde endet damit dort, wo
   die Anfrage abgeht.

   Gepanzert: die Seite setzt auf diesem Knopf animation:none !important (aus
   der Zeit, als er einen Dauerglanz trug). Ohne Gegenpanzerung passiert hier
   gar nichts, gemessen blieb er bei Faktor 1,00. */
body .kx-form .wpcf7-form input.wpcf7-submit.v2-wachsen-cta[type=submit] {
  animation: v2WachsenRiegel 6s ease-in-out infinite !important;
  animation-delay: 4.5s !important;
}
@media (prefers-reduced-motion: reduce) {
  body .kx-form .wpcf7-form input.wpcf7-submit.v2-wachsen-cta[type=submit] {
    animation: none !important;
  }
}

/* Kontaktwege: drei Knoepfe, Umlauf 6 s, mit Ring.
   Der Ring ist bei allen dreien GRUEN, nicht in der jeweiligen Knopffarbe.
   Navy auf Navy und das gedeckte Blau der E-Mail gingen auf dem dunklen Grund
   der Karte beinahe unter; nur WhatsApp war zu sehen. Der Ring sagt hier
   nicht, welcher Weg das ist, sondern dass dieser Knopf gerade dran ist. */
.kx-contact.v2-wachsen .kxw-btn {
  animation: v2WachsenGross 6s ease-in-out infinite;
  --puls: rgba(37, 211, 102, .5);
}
.kx-contact.v2-wachsen .kxw-btn .ctademo-knopf::after {
  animation: v2Ring 6s ease-in-out infinite;
}
.kx-contact.v2-wachsen li:nth-child(2) .kxw-btn,
.kx-contact.v2-wachsen li:nth-child(2) .kxw-btn .ctademo-knopf::after { animation-delay: 1.5s; }
.kx-contact.v2-wachsen li:nth-child(3) .kxw-btn,
.kx-contact.v2-wachsen li:nth-child(3) .kxw-btn .ctademo-knopf::after { animation-delay: 3s; }

@media (prefers-reduced-motion: reduce) {
  .ctademo-leiste-btns.v2-wachsen .ctademo-echt,
  .kx-contact.v2-wachsen .kxw-btn,
  .kx-contact.v2-wachsen .kxw-btn .ctademo-knopf::after { animation: none; }
}

/* ── Hero-Karte erscheint mit der Ueberschrift ────────────────────
   Hier steht bewusst KEINE Regel. Die Einblendung gehoert der Seite:
   `.hero.hero-split .hero-form-col` haelt die Spalte auf opacity 0 mit
   translateY(28px) und blendet sie ueber 1 s mit cubic-bezier(.22,1,.36,1)
   ein, sobald die Klasse `rt-form-in` gesetzt ist. v2.mjs setzt sie, sobald
   die Ueberschrift zu erscheinen beginnt, statt erst nach dem Timer des
   Inhalts (gemessen: H1 nach 2110 ms, Karte erst nach 5933 ms).

   Ein eigener Keyframe waere hier zweimal falsch gewesen: er haette gegen
   einen spezifischeren Selektor der Seite antreten muessen, und die Karte
   haette sich anders bewegt als alles andere in der Hero.
   Verlangsamt: die Regel der Seite blendet ueber 1 s ein, was neben der
   Subline zu flink wirkte. 1,8 s laesst die Karte mit ihr zusammen ankommen,
   statt vor ihr fertig zu sein. Der Selektor muss den der Seite ueberbieten
   (.hero.hero-split .hero-form-col), darum die volle Kette plus die Marke. */
body .hero.hero-split .hero-form-col.v2-mit-h1 {
  transition-duration: 1.8s, 1.8s;
}
@media (prefers-reduced-motion: reduce) {
  body .hero.hero-split .hero-form-col.v2-mit-h1 { transition-duration: 0s, 0s; }
}

/* ── Zeiger ───────────────────────────────────────────────────────── */
.v2-cursor {
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  pointer-events: none;
  z-index: 6;
  opacity: 0;
  background: no-repeat center/contain
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 2l14 11-6 .7 3.2 6.4-2.7 1.3L10.4 15 5 19z' fill='white' stroke='%230F1F33' stroke-width='2' stroke-linejoin='round'/></svg>");
  filter: drop-shadow(0 3px 7px rgba(0, 0, 0, .45)) drop-shadow(0 0 2px rgba(8, 16, 28, .5));
}
.v2-cursor-form { width: 28px; height: 28px; }

/* ── Karten im Fliesstext ─────────────────────────────────────────── */
/* Beide verschwinden. Das Sprungziel `kontaktwege` uebernimmt die Kontakt-
   Karte selbst (v2.mjs, v2AnkerAufKarte), darum braucht die untere Karte
   ihren Platz nicht mehr zu halten. */
.rt-kontaktdemo-testi.v2-weg,
.rt-kontaktdemo-kontakt.v2-weg { display: none; }
/* Die Zeile kuendigte das Formular gegenueber der Karte darueber an. Ohne die
   Karte kuendigt sie nichts mehr an.
   !important, weil die Zeile selbst gepanzert ist: die Seiten-Generationen
   scopen ihre Typografie per ID, darum wurde sie beim Kontaktwege-Rollout mit
   !important gesetzt. Ohne Gegenpanzerung gewinnt display:block, obwohl der
   Selektor hier spezifischer ist. */
body .rt-kontakt-oder { display: none !important; }

/* ── Hero-Spalte ──────────────────────────────────────────────────── */
/* Der Inhalt haelt mobil 480 px frei, reserviert fuer das alte Hero-FORMULAR
   und spaeter fuer die aufgehende Buehne. In v2 gibt es keine Buehne mehr;
   die Reservierung hinterliesse eine leere Flaeche von rund 300 px unter den
   Knoepfen. */
@media (max-width: 1023px) {
  body .hero-form-col.hero-form-below { min-height: 0 !important; }
}

/* ── Kontakt-Sektion: Wege als kleine Knoepfe ─────────────────────── */
/* Dieselben Knoepfe wie in der Hero, nur kleiner. Farbe, Schatten und Ring
   erben sie aus .ctademo-echt-*; hier steht nur, was anders ist.

   PANZERUNG. Die Regeln unten treffen Markup, das die Seiten selbst
   mitbringen, und muessen sich gegen deren Inline-CSS behaupten. Das ist aus
   zwei Gruenden nicht mit Spezifitaet allein zu loesen: das Inhalts-CSS steht
   im Body und gewinnt jeden Gleichstand, und die Kontakt-Sektion heisst je
   Seitengeneration anders (gemessen: `kontakt-section` auf Startseite und
   Cluster-Seiten, `sec` auf Ratgebern, `mig-kontakt` auf den Menue-Seiten).
   Ein Selektor ueber den Wrapper wuerde also je nach Seite ins Leere gehen.
   Darum wrapper-unabhaengig, mit `body` als Spezifitaets-Anker und
   !important dort, wo eine Regel der Seite dagegensteht. */
body .kx-contact { --kxw-groesse: 42px; }
body .kx-contact li { gap: 12px !important; }
/* Eine Spaltenbreite fuer alle vier Zeilen. Der Knopf gibt sie vor, das
   flache Standort-Icon uebernimmt sie, sonst laufen die Texte auseinander. */
body .kx-contact li > svg { flex: 0 0 var(--kxw-groesse, 42px) !important; }
.kxw-btn.ctademo-echt { flex: 0 0 var(--kxw-groesse, 42px); }
body .kx-contact li.kxw-ort > svg {
  width: var(--kxw-groesse) !important;
  height: var(--kxw-groesse) !important;
  padding: 11px;
  border-radius: 50%;
}
.kxw-btn.ctademo-echt {
  display: block;
  width: var(--kxw-groesse, 42px);
  height: var(--kxw-groesse, 42px);
  text-decoration: none;
}
.kxw-btn.ctademo-echt .ctademo-knopf {
  width: 100%;
  height: 100%;
  margin: 0;
  transition: transform .22s ease, box-shadow .22s ease;
}
.kxw-btn.ctademo-echt svg { width: 20px; height: 20px; }
.kxw-btn.ctademo-echt-wa svg { width: 21px; height: 21px; }
/* Auf dem Navy-Grund der Karte tragen die dunklen Knoepfe eine Kante, sonst
   verschwinden sie im Untergrund. Gleiche Loesung wie in leiste-dunkel. */
.kxw-btn.ctademo-echt-tel .ctademo-knopf { border: 2px solid rgba(255, 255, 255, .62); }
.kxw-btn.ctademo-echt-mail .ctademo-knopf { border: 2px solid rgba(255, 255, 255, .40); }

/* Puls und Zeiger laufen auf EINER Uhr. Pulsierten die Knoepfe auf eigenen
   Verzoegerungen, waehrend der Zeiger seine Runde dreht, lesen sich zwei
   Rhythmen nebeneinander als Unruhe. Jetzt gibt der Zeiger den Takt: der
   Knopf waechst, waehrend er herankommt, gibt beim Klick nach und wirft dabei
   seinen Ring ab. */
.kxw-btn.ctademo-echt.ist-nah .ctademo-knopf { transform: scale(1.16); }
.kxw-btn.ctademo-echt.ist-gedrueckt .ctademo-knopf { transform: scale(.88); }
.kxw-btn.ctademo-echt.ist-gedrueckt .ctademo-knopf::after { animation: kxwPuls .75s ease-out; }
.kxw-btn.ctademo-echt:hover .ctademo-knopf { transform: translateY(-2px) scale(1.09); }
.kxw-btn.ctademo-echt:active .ctademo-knopf { transform: translateY(1px) scale(.93); }

/* Eine Welle, 16 px weit: deutlicher als der alte Dauerpuls, solange es immer
   nur einen Knopf zur Zeit trifft. */
@keyframes kxwPuls {
  0%   { box-shadow: 0 0 0 0 var(--puls); }
  100% { box-shadow: 0 0 0 16px rgba(0, 0, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .kxw-btn.ctademo-echt .ctademo-knopf::after { animation: none; }
}

/* Buehne des Zeigers. Die Karte beschneidet ihren Inhalt bereits, er
   verschwindet damit sauber am Rand. Der Selektor liegt eine Klasse ueber der
   Regel im Inhalt, sonst kommt position:relative nicht an.
   scroll-margin-top, weil die Karte jetzt selbst das Sprungziel ist und die
   Navigationsleiste klebt; 100 px entsprechen dem Versatz, mit dem das
   Theme seine eigenen Sprunge rechnet. */
.kx-split.kxw-buehne { position: relative; scroll-margin-top: 100px; }

/* ── Kontakt-Karte kompakter ──────────────────────────────────────── */
/* Die Karte war 644 px hoch und passte zusammen mit der klebenden Navigation
   auf einem Fenster von 800 px nicht mehr ganz ins Bild. Getrieben hat das
   allein die linke Spalte (644 gegen 515 im Formular), darum wird auch nur
   dort gekuerzt: Portraet, Polster und die Abstaende zwischen den Bloecken.
   Das Formular bleibt unangetastet.

   Gepanzert wie oben: die Masse der linken Spalte stehen in jeder
   Seitengeneration anders im Inhalts-CSS (gemessen 44 px auf Startseite,
   Cluster- und Menue-Seiten, 30 px auf Ratgebern). */
body .kx-owner { padding-top: 32px !important; padding-bottom: 32px !important; }
body .kx-owner > img { width: 140px !important; height: 140px !important; margin-bottom: 14px; }
body .kx-quote { margin-top: 12px; }
body .kx-contact { margin-top: 12px; padding-top: 12px; }
body .kx-contact li { margin-bottom: 9px !important; }

/* ── Absendeknopf ─────────────────────────────────────────────────── */
/* Er hebt sich beim Ueberfahren deutlich an: steigt, waechst, heller Grund,
   weiter Schein und ein Ring. Bisher rueckte er nur zwei Pixel nach oben und
   wechselte die Toenung, was neben den Kontaktknoepfen daneben nicht auffiel.
   Wer bis hierher gescrollt hat, soll sehen, dass dieser eine Knopf das Ziel
   der Seite ist.

   Die Seiten bringen eigene Regeln im Inhalt mit, mit background !important
   im Hover und box-shadow !important im Grundzustand. Gepanzert und
   wrapper-unabhaengig aus demselben Grund wie oben: der Selektor darf nicht
   an `.kontakt-section` haengen, sonst greift er auf Ratgebern (`sec`) und
   Menue-Seiten (`mig-kontakt`) nicht. */
body .kx-form .wpcf7-submit {
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
body .kx-form .wpcf7-form input.wpcf7-submit[type=submit]:hover {
  transform: translateY(-3px) scale(1.03) !important;
  background: #1D4265 !important;
  box-shadow: 0 16px 34px rgba(15, 31, 51, .45), 0 0 0 8px rgba(107, 179, 217, .30) !important;
}
body .wpcf7-submit.ist-gedrueckt {
  transform: translateY(2px) scale(.975) !important;
  box-shadow: 0 2px 8px rgba(15, 31, 51, .28) !important;
  transition: transform .12s ease-out, box-shadow .12s ease-out;
}

/* ── Lage der Karte auf der Seite ─────────────────────────────────────
   Die Breiten entscheiden ueber das gestapelte Format: das Querformat ab
   720 px existiert im Einfahr-Modus nicht mehr. Alle Karten stehen schmal
   und untereinander. */
.rt-kontaktdemo { max-width: 420px; margin: 0 auto; }
.rt-kontaktdemo-hero { max-width: 420px; margin: 0; }
.rt-kontaktdemo-testi,
.rt-kontaktdemo-kontakt { max-width: 560px; }
.rt-kontaktdemo-testi { margin: 34px auto 0; }
/* scroll-margin, weil die CTAs hierher springen und die Navigation klebt. */
.rt-kontaktdemo-kontakt { margin: 0 auto 34px; scroll-margin-top: 110px; }

/* ── Hoehe der Karte in der Hero ──────────────────────────────────────
   Die Karte sass mittig neben der Textspalte und begann dadurch rund
   100 px unter der Ueberschrift; die vier Kontaktwege kamen erst beim
   Weiterlesen ins Blickfeld. Sie beginnt jetzt oben in der Zeile und
   ruecken nur um die Badge davor nach unten, damit ihre Oberkante mit
   der H1 abschliesst statt mit der Badge.
   Die 48 px sind die Badge selbst (32 px hoch) plus ihr Abstand zur H1
   (16 px); nachgemessen sitzt die Kante damit von 1024 bis 1920 px
   buendig. Ein frueherer Versuch mit 20 px rechnete den translateY(28px)
   der Einblendung unten mit ein, der hier aber entfaellt. Eine
   JS-Messung waere fuer eine rein optische Kante zu viel Maschinerie.
   Nur im geteilten Format ab 1024 px. Darunter stapelt die Hero, dort
   steht die Karte ohnehin unter dem Text und die Regel griffe ins Leere.
   Stufe 1: zur Abnahme nur Seite 605, das Gate faellt beim Rollout. */
@media (min-width: 1024px) {
  body.page-id-605 .hero.hero-split .hero-form-col {
    align-self: start;
    margin-top: 48px;
  }
}

/* ── Zeitpunkt: die Karte kommt mit der Ueberschrift ──────────────────
   Im Inhalt jeder Seite steht noch die Einblendung des alten Hero-
   FORMULARS: sie koppelt an den Start der H1-Animation und wartet dann
   NOCH EINMAL 3,7 s (Sicherheitstimer 6 s). Fuer ein Formular war das
   gewollt, damit der Blick zuerst auf der Ueberschrift landet. Seit dort
   die Kontaktkarte steht, heisst dieselbe Regel: die vier Kontaktwege
   sind vier Sekunden lang unsichtbar. Sie erscheinen jetzt zusammen mit
   der H1 (deren eigene Einblendung startet bei 0,3 s und dauert 1 s).

   Umgesetzt hier statt im Inhalt: der Timer steht in 69 post_contents,
   eine Regel im Stylesheet ersetzt 69 Inhalts-Eingriffe. Der Timer laeuft
   weiter und setzt spaeter seine Klasse, das ist dann folgenlos.
   Eigene Keyframes statt der Seiten-Animation heroFadeIn: die ist im
   Inhalt definiert und muss es nicht auf jeder Seite sein.
   Hoehere Spezifitaet ist Absicht, das Inline-CSS der Seite steht im DOM
   nach allen Stylesheets und gewinnt sonst.
   Nur ab 1024 px: der Timer im Inhalt laeuft ohnehin nur auf dem Desktop
   (er prueft selbst matchMedia min-width:1024px), mobil steht die Karte
   gestapelt unter dem Text und ist sofort da.
   Stufe 1: zur Abnahme nur Seite 605, das Gate faellt beim Rollout. */
@keyframes rtHeroKarteIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
@media (min-width: 1024px) {
  body.page-id-605 .hero.hero-split .hero-form-col {
    opacity: 1;
    transform: none;
    animation: rtHeroKarteIn 1s ease-out .45s both;
  }
}
@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  body.page-id-605 .hero.hero-split .hero-form-col { animation: none; }
}

/* ── Mobil keine reservierte Leerflaeche ──────────────────────────────
   Der Inhalt haelt mobil 480 px frei (min-height auf
   .hero-form-col.hero-form-below), reserviert fuer das alte Hero-FORMULAR.
   Die kompakte Karte ist 167 px hoch, und die Buehne faehrt UEBER der
   Bedienleiste auf: der Rest liegt UNTER den Knoepfen und bleibt leer.
   Ohne die Reservierung stehen beim ersten Vorbeiscrollen nur die Knoepfe,
   und das Feld schiebt sich erst auf, wenn der Besucher zu ihnen
   zurueckkehrt und hinsieht (Abnahme 2026-08-15).
   Stufe 1: zur Abnahme nur Seite 605, das Gate faellt beim Rollout. */
@media (max-width: 1023px) {
  body.page-id-605 .hero-form-col.hero-form-below { min-height: 0; }
}


/* ── Kopfleiste gegen die Seiten-Typografie behaupten ─────────────────
   Die Seite bringt eigene Regeln fuer h2 mit, teils als Inline-Style im Inhalt
   (.gfx h2, .gfx-kontakt h2). Die stehen im DOM nach allen Stylesheets und
   gewinnen bei gleicher Spezifitaet: die Ueberschrift kam dadurch in Cormorant
   Garamond, 33,6 px und weiss statt in der Schrift der Karte. Zwei Klassen
   heben die Spezifitaet ueber die Element-Selektoren der Seite. */
/* Mit !important, und zwar durchgaengig: die 60 Seiten stammen aus mehreren
   Baugenerationen, und einige scopen ihre Typografie per ID (#frh h2, #frh p).
   Ein ID-Selektor schlaegt jede Klassenkombination; auf der Fassaden-
   Generation kam die Kopfleiste dadurch in Cormorant Garamond und 48px.
   Die Karte ist eine in sich geschlossene Komponente, sie darf sich gegen
   Seiten-Resets wehren, dasselbe Muster nutzt die Sticky-Leiste. */
.rt-kontaktdemo .ctademo-titel {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: -.01em !important;
  line-height: 1.3 !important;
  color: #fff !important;
  background: #35618C !important;
  text-align: center !important;
  margin: 0 !important;
  padding: 15px 18px 14px !important;
}

/* ── Trennzeile zwischen Karte und Formular ───────────────────────────
   Zwei Kontaktangebote uebereinander lesen sich als ein Block. Die Zeile
   ordnet, statt zu betonen.

   Sie bringt ihren Kontrast SELBST mit, wie die Kopfleiste der Karte. Drei
   Wege ohne eigenen Grund sind vorher gescheitert und alle drei gemessen:
     geerbt ueber currentColor   1,79 (die Sektion faerbt nur .lead und h2)
     eigene Farbe per Klasse     wirkungslos, .gfx p aus dem Seiteninhalt
                                 gewinnt mit hoeherer Spezifitaet
     Klasse .lead uebernehmen    1,11 auf hellen Sektionen, dort ist .lead
                                 ebenfalls weiss
   Der Grund der Kontakt-Sektion ist je Seite verschieden, navy auf der einen,
   hellgrau auf der naechsten. Eine Pille in Markenfarbe ist auf beidem
   lesbar und braucht dafuer weder Messung noch Spezifitaets-Trick. */
.rt-kontakt-oder {
  display: block !important;
  width: fit-content !important;
  max-width: calc(100% - 40px) !important;
  margin: 0 auto 26px !important;
  padding: 9px 20px !important;
  border-radius: 999px !important;
  background: #35618C !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: .01em !important;
  line-height: 1.3 !important;
  text-align: center !important;
  box-shadow: 0 4px 14px rgba(8, 16, 28, .18) !important;
}

@media (max-width: 1023px) {
  .rt-kontaktdemo { max-width: none; }
  .rt-kontaktdemo-hero { max-width: none; }
  .rt-kontakt-oder { font-size: 13px !important; padding: 8px 16px !important; margin-bottom: 20px !important; }
}