/* ============================================================
   BEYONITY — Shared Design System
   Prototype stylesheet for the multi-page site.
   Aligned to beyonity-ui (storybook devel) + louluzern.ch:
   - Blue primary buttons, rounded-rect radii (4/8/12/16/20/24),
     subtle elevation tokens. Yellow demoted to accent.

   SCHRIFTEN LIEGEN AUSSCHLIESSLICH LOKAL (assets/fonts.css, BwGradual
   400/500/700/800). Hier stand bis zum 12.09.2026 ein @import auf
   fonts.googleapis.com fuer Inter in sechs Schnitten. Der Satz darueber
   ("Inter as the primary UI/body font") stammte aus dem Prototyp und war
   im fertigen Theme nicht mehr wahr: --font-ui ist BwGradual, und Inter
   stand nur noch als Rueckfallwert HINTER BwGradual in --font-branding.

   Im Browser nachgemessen: NULL Elemente rendern in Inter, und alle sechs
   Schnitte melden [unloaded]. Der Browser lud die Schriftdateien also gar
   nicht — aber er lud und parste das blockierende Stylesheet von Google.
   PageSpeed mass dafuer 750 ms im kritischen Pfad, und zwar verkettet:
   erst styles.css (1410 ms), dann daraus der Google-Aufruf, dann erst
   waeren die Dateien gekommen. Ein @import ist dafuer die teuerste Bauart.

   Dazu die andere Seite: eine Anfrage an Google bei jedem Seitenaufruf,
   mit IP des Besuchers, ohne Gegenwert.
   ============================================================ */

:root {
  /* --- brand / CI (beyonity-ui --ci-primary = blue-700, yellow = accent) --- */
  --blau:        #3c57e1;   /* blue-700  · --ci-primary */
  --blau-hover:  #95a5ff;   /* blue-400  · main button hover */
  --blau-soft:   #ecefff;   /* blue-100  · --ci-tertiary, soft fills */
  --gelb:        #f8ff76;   /* yellow-100 · accent only */
  --dunkelblau:  #001a64;   /* blue-1000 */
  --hellblau:    #ecefff;   /* blue-100  · soft blue surface */
  --weiss:       #ffffff;   /* gray-0 */
  --grau:        #f7f7f7;   /* gray-75   · neutral surface */
  --grau-200:    #e3e3e3;   /* gray-200  · borders */
  --text-muted:  rgba(0,26,100,0.58);
  --linie:       rgba(0,26,100,0.10);
  --linie-w:     rgba(255,255,255,0.12);

  /* --- type --- */
  --font-ui:       'BwGradual', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-branding: 'BwGradual', 'Inter', sans-serif;

  /* --- radii (beyonity-ui R100–R600) --- */
  --r-100: 4px;  --r-200: 8px;  --r-300: 12px;
  --r-400: 16px; --r-500: 20px; --r-600: 24px;

  /* --- elevation (beyonity-ui E-scale) --- */
  --shadow-btn:  var(--elev-200);
  --shadow-card: var(--elev-400);
  --elev-100: 0 1px 1px rgba(66,66,66,0.10), 0 0 0 0.5px rgba(0,0,0,0.08);
  --elev-200: 0 3px 5px rgba(66,66,66,0.15), 0 0 1px rgba(66,66,66,0.31);
  --elev-300: 0 8px 12px rgba(66,66,66,0.15), 0 0 1px rgba(66,66,66,0.31);
  --elev-400: 0 10px 18px rgba(0,26,100,0.13), 0 0 1px rgba(66,66,66,0.28);
  --elev-500: 0 18px 28px rgba(0,26,100,0.16), 0 0 1px rgba(66,66,66,0.28);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-ui);
  font-weight: 400; line-height: 1.6;
  color: var(--dunkelblau); background: var(--weiss);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
/* WordPress erzeugt --wp--style--global--content-size aus theme.json
   (760px, richtig als Default fuer Fliesstext) und verengt damit jedes
   Kind einer .is-layout-constrained-Gruppe. Das Theme benutzt die
   Variable NIRGENDS selbst (gemessen: 0 Treffer in allen assets/*.css)
   und regelt seine Breiten ueber .container (1240px) und
   .container-narrow (920px). Also wird die Variable innerhalb dieser
   Container auf die Container-Breite gehoben: die WP-Regel verengt
   dann auf genau die Breite, die das Theme an der Stelle ohnehin
   vorsieht, und der Block-Editor kann Gruppen beliebig tief
   verschachteln, ohne ein Sektionsraster zu zerdruecken. Der Weg ueber
   die Variable statt ueber Selektoren traegt jede Verschachtelungstiefe;
   ein `>`-Selektor faengt nur eine. Vgl. A17. */
.container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 32px; --wp--style--global--content-size: 1240px; }
.container-narrow { width: 100%; max-width: 920px; margin: 0 auto; padding: 0 32px; --wp--style--global--content-size: 920px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---------- BUTTONS ----------
   Matches hello-os.html: yellow pill buttons, BwGradual 800, ring-glow
   hover instead of a color swap. */
.btn-primary { background: var(--gelb); color: var(--dunkelblau) !important; padding: 16px 32px; border-radius: 100px; font-family: var(--font-ui); font-weight: 800; font-size: 15px; display: inline-flex; align-items: center; gap: 10px; box-shadow: 0 0 0 2px rgba(255,255,255,0); transition: box-shadow 0.2s ease, transform 0.2s ease; border: none; cursor: pointer; }
/* Hover (15.09.): 2px weisse Kante — dieselbe Staerke wie der border des
   Nachbarn .btn-outline-white, damit die beiden Knoepfe nebeneinander
   dieselbe Geste machen. Der Ring liegt im Ruhezustand durchsichtig schon
   da, sonst wuerde die Kante beim Hover aufblitzen statt aufzuziehen.
   Der Knopf steht auf der ganzen Seite nur auf --dunkelblau und --blau;
   der vorherige 6px-Ring in Schwarz bei 50% wurde dort zum Wulst.
   .btn-nav in der Kopfzeile bekommt dieselbe Geste, siehe unten. */
.btn-primary:hover { box-shadow: 0 0 0 2px rgba(255,255,255,0.75), 0 8px 20px rgba(0,0,0,0.22); transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) {
  .btn-primary, .btn-primary:hover { transition: none; transform: none; }
}
.btn-primary:active { background: var(--blau); color: var(--weiss) !important; }
.btn-outline-white { background: transparent; color: var(--weiss) !important; padding: 16px 32px; border-radius: 100px; font-family: var(--font-ui); font-weight: 800; font-size: 15px; border: 2px solid rgba(255,255,255,0.38); display: inline-flex; align-items: center; gap: 10px; transition: border-color 0.2s ease, background 0.2s ease; cursor: pointer; }
.btn-outline-white:hover { border-color: rgba(255,255,255,0.68); background: rgba(255,255,255,0.07); }
.btn-outline-dark { background: transparent; color: var(--dunkelblau) !important; padding: 14px 28px; border-radius: 100px; font-family: var(--font-ui); font-weight: 800; font-size: 14px; border: 2px solid var(--linie); display: inline-flex; align-items: center; gap: 10px; transition: border-color 0.2s ease, box-shadow 0.2s ease; cursor: pointer; }
.btn-outline-dark:hover { border-color: var(--blau); box-shadow: 0 0 0 6px rgba(0,0,0,0.50); }
.btn-nav { background: var(--gelb); color: var(--dunkelblau) !important; padding: 10px 22px; border-radius: 100px; font-family: var(--font-ui); font-weight: 800; font-size: 13px; display: inline-block; box-shadow: 0 0 0 2px rgba(255,255,255,0); transition: box-shadow 0.2s ease, transform 0.2s ease; }
/* Dieselbe Kante wie bei .btn-primary — der Knopf in der Kopfzeile ist
   derselbe Knopf, nur kleiner, und steht ebenfalls auf --dunkelblau. */
.btn-nav:hover { box-shadow: 0 0 0 2px rgba(255,255,255,0.75), 0 8px 20px rgba(0,0,0,0.22); transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) {
  .btn-nav, .btn-nav:hover { transition: none; transform: none; }
}
.arrow { transition: transform 0.2s ease; }
a:hover .arrow { transform: translateX(4px); }
.text-link { color: var(--blau); font-weight: 700; font-size: 15px; display: inline-flex; align-items: center; gap: 8px; }
.text-link:hover { text-decoration: underline; }

/* ---------- HEADER ---------- */
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(0,26,100,0.96); backdrop-filter: blur(16px); border-bottom: 1px solid var(--linie-w); }
.site-header .container { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.logo-wrapper { display: flex; align-items: center; gap: 10px; }
.logo-wrapper svg { height: 22px; width: auto; }
.logo-hello { font-family: var(--font-branding); font-weight: 800; font-size: 13px; color: var(--gelb); letter-spacing: 0.12em; text-transform: uppercase; line-height: 1; }
.nav { display: flex; gap: 28px; align-items: center; }
.nav a { color: rgba(255,255,255,0.68); font-size: 14px; font-weight: 500; transition: color 0.2s ease; }
.nav a:hover, .nav a.active { color: var(--weiss); }
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: #fff; margin: 4px 0; transition: 0.25s ease; }
.nav-toggle.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 920px) {
  .nav-toggle { display: block; }
  .nav { position: fixed; inset: 72px 0 auto 0; flex-direction: column; gap: 0; background: rgba(0,26,100,0.99); backdrop-filter: blur(16px); padding: 12px 0 28px; border-bottom: 1px solid var(--linie-w); transform: translateY(-130%); transition: transform 0.3s ease; max-height: calc(100dvh - 72px); overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
  .nav.open { transform: translateY(0); }
  .nav a { width: 100%; padding: 16px 32px; font-size: 16px; }
  .nav a.btn-nav { width: auto; margin: 12px 32px 0; text-align: center; }
}

/* ---------- NAV DROPDOWN ---------- */
.nav-dropdown { position: relative; display: flex; align-items: center; }
.nav-prod-trigger { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
/* A24 Nachtrag 3 (15.09.): Core-Ausloeser traegt nicht .nav-prod-trigger,
   sondern a.wp-block-navigation-item__content. Cores Inline setzt darauf
   display (Blockformat), der Caret rutschte darunter. Hier auf 0,4,0 —
   .nav-Prefix + Core-Klassenkette. Der Sprachumschalter bleibt ueber
   .nav-prod-trigger korrekt (eigener Block, gleiche Werte). */
.nav .wp-block-navigation .wp-block-navigation-submenu > .wp-block-navigation-item__content {
  display: inline-flex; align-items: center; gap: 5px;
}
.nav-caret { transition: transform 0.2s ease; }
.nav-dropdown:hover .nav-caret, .nav-dropdown:focus-within .nav-caret { transform: rotate(180deg); }
.nav-menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(10px); margin-top: 14px; background: var(--weiss); border: 1px solid var(--linie); border-radius: 16px; padding: 10px; width: 340px; box-shadow: 0 28px 64px -20px rgba(0,26,100,0.40); opacity: 0; visibility: hidden; transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; }
.nav-menu::before { content: ''; position: absolute; top: -16px; left: 0; right: 0; height: 16px; }
.nav-dropdown:hover .nav-menu, .nav-dropdown:focus-within .nav-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nav-menu a { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 10px; color: var(--dunkelblau) !important; transition: background 0.15s ease; }
.nav-menu a:hover { background: var(--grau); }
.nm-icon { flex-shrink: 0; width: 36px; height: 36px; border-radius: 9px; background: var(--hellblau); color: var(--blau); display: flex; align-items: center; justify-content: center; }
.nm-icon svg { width: 18px; height: 18px; }
.nm-icon.nm-hello { background: var(--gelb); color: var(--blau); }
.nm-text { display: flex; flex-direction: column; gap: 1px; }
.nm-name { font-size: 14px; font-weight: 700; color: var(--dunkelblau); }
.nm-desc { font-size: 12px; color: var(--text-muted); font-weight: 400; }

/* ---------- LANGUAGE SWITCH ---------- */
.lang-switch .nav-prod-trigger { font-weight: 700; letter-spacing: 0.02em; }
.lang-menu { left: auto; right: 0; width: auto; min-width: 168px; padding: 8px; transform: translateY(10px); }
.nav-dropdown:hover .lang-menu, .nav-dropdown:focus-within .lang-menu { transform: translateY(0); }
.lang-menu a { display: block; padding: 9px 14px; }
.lang-menu a.active { color: var(--blau) !important; font-weight: 700; background: var(--blau-soft); pointer-events: none; }

@media (max-width: 920px) {
  /* Submenus stay collapsed until their trigger is tapped (JS toggles .open) */
  .nav-dropdown { display: block; width: 100%; }
  .nav-caret { margin-left: 6px; }
  .nav-dropdown.open .nav-caret { transform: rotate(180deg); }
  .nav-menu { position: static; opacity: 1; visibility: visible; transform: none; margin: 0; width: 100%; background: transparent; border: none; box-shadow: none; padding: 0 18px; max-height: 0; overflow: hidden; transition: max-height 0.25s ease; }
  /* the desktop hover/focus-within rule outranks a plain .nav-menu override by
     specificity, so a tapped (thus :focus-within) trigger would otherwise reapply
     the desktop centering transform and push the menu off-screen */
  .nav-dropdown:hover .nav-menu, .nav-dropdown:focus-within .nav-menu { transform: none; }
  .nav-menu::before { display: none; }
  .nav-dropdown.open .nav-menu { max-height: 640px; padding: 0 18px 12px; }
  .nav-menu a { color: rgba(255,255,255,0.66) !important; padding: 12px; }
  .nav-menu a:hover { background: rgba(255,255,255,0.06); }
  .nm-name { color: #fff; }
  .nm-desc { color: rgba(255,255,255,0.42); }
}

/* ---------- A24: NAV auf core/navigation (wp_navigation) ----------
   Header und Footer laufen ueber core/navigation. Die Prototyp-Klassen
   .nav-dropdown / .nav-menu / .nm-icon / .nm-text / .nav-caret liegen
   ueber className bzw. render_block-Filter (inc/nav-erweiterung.php)
   an den core-Elementen — die Regeln oben greifen. Hier stehen nur
   die Zusaetze, die core-eigene Struktur (ul/li, __container,
   __submenu-container, __toggle) auf das Design bringen. */

/* Core packt alles in ein <ul class="wp-block-navigation__container">.
   Der Container soll wie ein flach-flex .nav-Kind wirken, ohne
   Aufzaehlungs-Bullets, ohne Rand. */
.nav .wp-block-navigation__container {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: 28px;
}
.nav .wp-block-navigation-item { list-style: none; position: relative; margin: 0; }

/* Der <a>-Text im Top-Level-Item — Farbe/Groesse gleich wie .nav a. */
.nav .wp-block-navigation-item__content {
  color: rgba(255,255,255,0.68);
  font-size: 14px; font-weight: 500;
  transition: color 0.2s ease;
}
.nav .wp-block-navigation-item__content:hover,
.nav .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
  color: var(--weiss);
}

/* Core-eigenes Chevron abschalten — der nav-caret kommt aus dem
   render_block-Filter. */
.nav .wp-block-navigation__submenu-icon { display: none; }

/* Falls Core den Toggle-Button trotz openSubmenusOnClick:false
   ausgibt: unsichtbar aber im Fokus-Fluss belassen. Der Prototyp
   oeffnet ueber :hover und :focus-within — der Knopf wuerde die
   Fokus-Kette nur unterbrechen. */
.nav .wp-block-navigation-submenu__toggle {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); border: 0; padding: 0; margin: -1px;
}

/* Submenu-Container: das <ul> traegt zusaetzlich .nav-menu (aus dem
   render_block-Filter), damit die bestehenden .nav-menu-Regeln
   greifen. Hier nur ul-Reset. */
.nav .wp-block-navigation__submenu-container { list-style: none; margin: 0; }
.nav .wp-block-navigation__submenu-container li { list-style: none; }

/* Aufklappen: die bestehende .nav-dropdown:hover-Regel greift, weil
   der Submenu-Wrapper .wp-block-navigation-submenu auch .nav-dropdown
   traegt (className aus migrate-navigation.php). Zusaetzlich hier die
   core-Selektoren fuer den Fall, dass die Klasse verlorengeht. */
.nav .wp-block-navigation-submenu:hover > .wp-block-navigation__submenu-container,
.nav .wp-block-navigation-submenu:focus-within > .wp-block-navigation__submenu-container {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.nav .wp-block-navigation-submenu:hover .nav-caret,
.nav .wp-block-navigation-submenu:focus-within .nav-caret {
  transform: rotate(180deg);
}

/* --- A24 Nachtrag 2: Farbe/Groesse der Menuepunkte + btn-nav-Pille ---
   Zweite Runde derselben Falle wie beim Panel: Cores Inline-Regeln
   schlagen die Prototyp-Regeln. Konkret gemessen auf b3kwi5:

     .wp-block-navigation .wp-block-navigation-item__content
       .wp-block-navigation-link { color: inherit }              (0,3,0)
     .wp-block-navigation .wp-block-navigation-item
       { background: inherit }                                    (0,2,0)

   Die Prototyp-Regel auf .nav .wp-block-navigation-item__content
   (0,2,0) verliert bei Textfarbe/-groesse; die alte .btn-nav-Regel
   (0,1,0) verliert bei der Pillenflaeche. Ergebnis war: Menuepunkte
   in rgb(0,26,100) auf rgba(0,26,100,0.99) — unsichtbar — und die
   btn-nav-Pille transparent.

   Fuenf Werte kommen 1:1 aus A24-soll-zustand.md § 2 bzw. § 4a. */

/* Top-Level-Menuepunkte, ausdruecklich nur die direkten Kinder des
   __container — Untermenue-Eintraege bleiben ueber .nav-menu a
   dunkelblau (mit !important dort). Spezifitaet 0,4,0. */
.nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
  color: rgba(255,255,255,0.68);
  font-size: 14px;
  font-weight: 500;
  transition: color 0.2s ease;
}
.nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover {
  color: var(--weiss);
}
.nav .wp-block-navigation__container > .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
  color: var(--weiss);
}

/* A24 Nachtrag 3 (15.09.): die 0,5,0-Bruecke fuer .btn-nav INNERHALB
   der Navigation ist gegenstandslos — "Demo buchen" ist per Paulos
   Entscheidung aus dem Menue in den Vorlagenteil gewandert (parts/
   header.html, beyonity/link-list nach dem lang-switcher). Damit sitzt
   die Pille wieder direkt am <a class="btn-nav">, wie im Prototyp,
   und die alte .btn-nav-Regel (styles.css:95) trifft ohne Umwege. */

/* --- A24 Nachtrag (14.09., gemessen auf der Box): Panel-Geometrie ---
   Core schreibt fuer die aktive Navigation INLINE-Regeln in den <head>
   mit dem Selektor
     .wp-block-navigation .has-child .wp-block-navigation__submenu-container
   (Spezifitaet 0,3,0). Die Prototyp-Regel auf .nav-menu (0,1,0)
   verliert, und weil Inline nach den Enqueued-Stylesheets kommt,
   gewinnt Core selbst bei gleichem Wert. Gemessen wurden ohne diese
   Bruecke: Breite 200 statt 340, transform -100 statt -170,
   margin-top 0 statt 14, padding 10px 10px 10px 0 statt 10.

   Dieselbe Selektor-Struktur PLUS eine vierte Klasse (0,4,0) — ohne
   !important. Die Design-Werte kommen 1:1 aus
   A24-soll-zustand.md § 2. */
.wp-block-navigation .has-child > .wp-block-navigation__submenu-container.nav-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  width: 340px;
  padding: 10px;
  margin-top: 14px;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: 16px;
  box-shadow: 0 28px 64px -20px rgba(0,26,100,0.40);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(10px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
/* Cores Inline hat einen ZWEITEN Riegel — nur im OFFENEN Zustand:
     .wp-block-navigation .has-child
     .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~
     .wp-block-navigation__submenu-container { width:auto; min-width:200px }
   Spezifitaet 0,5,0. Die Regel unten (0,4,1 = 0,5,0) verlor bei
   gleicher Spezifitaet gegen Inline. Deshalb hier mit .nav-Prefix
   auf 0,6,0 — width mit reingezogen. transform:translateX(-50%)
   stimmt dann von allein wieder, weil es sich auf die eigene Breite
   bezieht (200 vs 340 = die gemessenen -100 vs -170). */
.nav .wp-block-navigation .has-child:hover > .wp-block-navigation__submenu-container.nav-menu,
.nav .wp-block-navigation .has-child:focus-within > .wp-block-navigation__submenu-container.nav-menu {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
  width: 340px;
}

@media (max-width: 920px) {
  .wp-block-navigation .has-child > .wp-block-navigation__submenu-container.nav-menu {
    position: static;
    width: 100%;
    padding: 0 18px;
    margin: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
  }
  /* DER .nav-PREFIX IST HIER PFLICHT, nicht Geschmack.
     Die Desktop-Regel oben traegt ihn (Zeile mit ".nav .wp-block-navigation
     .has-child:hover") und liegt damit auf 0,6,0. Diese Ueberschreibung
     ohne Prefix lag auf 0,5,0 — ein Media Query zaehlt bei der
     Spezifitaet nicht mit, also gewann die Desktop-Regel AUCH MOBIL,
     sobald der Trigger Fokus hatte. Und Fokus hat er nach jedem Tipp.

     Gemessen am 24.09.2026 auf der Live-Seite, Viewport 414:
       ohne Fokus:  transform none,               links  40px
       mit Fokus:   transform translateX(-170px), links -133px
     133 Pixel ausserhalb des Bildes — genau die Spalte, in der die
     Icons stehen. Beim Scrollen verliert der Trigger den Fokus, die
     Regel faellt weg, das Menue springt zurueck. Das ist der Grund
     fuer "Erstansicht verschoben, nach dem Scrollen richtig".

     width muss mit zurueck: die Desktop-Regel setzt 340px fest, und
     translateX(-50%) rechnet auf genau diese Breite. */
  .nav .wp-block-navigation .has-child:hover > .wp-block-navigation__submenu-container.nav-menu,
  .nav .wp-block-navigation .has-child:focus-within > .wp-block-navigation__submenu-container.nav-menu {
    transform: none;
    width: 100%;
  }
  .wp-block-navigation-submenu.open > .wp-block-navigation__submenu-container.nav-menu {
    max-height: 640px;
    padding: 0 18px 12px;
  }
}

@media (max-width: 920px) {
  /* Mobiles Menue: Container stapelt statt flex-row. Untermenues
     bleiben zu, bis app.js .open auf den Submenu-Wrapper setzt (siehe
     .nav-dropdown.open-Regel oben, greift auch auf
     .wp-block-navigation-submenu, weil die Klasse mitgetragen wird). */
  .nav .wp-block-navigation__container { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .nav .wp-block-navigation-submenu { display: block; width: 100%; }
  .nav .wp-block-navigation-item__content { width: 100%; padding: 16px 32px; font-size: 16px; }
  .nav .wp-block-navigation-item__content.btn-nav { width: auto; margin: 12px 32px 0; text-align: center; }
  .nav .wp-block-navigation__submenu-container {
    position: static; opacity: 1; visibility: visible; transform: none;
    max-height: 0; overflow: hidden;
    padding: 0 18px; margin: 0; width: 100%;
    background: transparent; border: none; box-shadow: none;
    transition: max-height 0.25s ease;
  }
  .nav .wp-block-navigation-submenu:hover > .wp-block-navigation__submenu-container,
  .nav .wp-block-navigation-submenu:focus-within > .wp-block-navigation__submenu-container {
    transform: none;
  }
  /* height und width MUESSEN mit, nicht nur max-height. Gemeldet am
     24.09.2026: auf dem Handy klappte kein einziges Untermenue auf.

     Der Grund liegt im Core-CSS des Navigations-Blocks, das WordPress
     inline in den <head> schreibt:

       .wp-block-navigation .has-child .wp-block-navigation__submenu-container
       { height: 0; width: 0; visibility: hidden; overflow: hidden; }

     Aufgehoben wird das dort nur durch :hover — und zwar in
     @media (hover: hover), was ein Touchgeraet nie erfuellt — oder durch
     einen Toggle-Knopf mit aria-expanded="true", den diese Navigation
     nicht rendert.

     Die Regel hier setzte bisher allein max-height. Gegen ein
     height: 0 richtet das nichts aus: die Klasse .open wurde gesetzt,
     der Pfeil drehte sich, und darunter blieb es leer. Gemessen: der
     Container 12px hoch (nur das Padding), seine sechs Eintraege je
     59px, sauber positioniert und weggeschnitten.

     height: auto statt eines festen Werts — damit passt sich das Menue
     seinem Inhalt an. Gemessen nach der Aenderung: Produkte 363px,
     Loesungen 246px, Ressourcen 305px, zugeklappt wieder 0.

     Die dritte Zeile ist der Sprachumschalter. Er ist KEIN
     Navigations-Block, sein Menue heisst .nav-menu.lang-menu und traegt
     die Klasse wp-block-navigation__submenu-container nicht — die
     ersten beiden Zeilen erreichen ihn also nicht. Waere beim Messen
     fast durchgerutscht. Gemessen: 210px offen, 0 zu.

     Ohne !important geprueft und fuer ausreichend befunden. */
  /* Nachtrag 24.09.2026, gemeldet von iPhone UND Firefox mobile: die
     Untereintraege standen nach links aus dem Bild geschoben, die Icons
     ausserhalb, waehrend "Produkte" darueber richtig sass.

     ZWEI URSACHEN, beide unsichtbar in der Browser-Emulation — dort
     entstand bei 320px wie bei 375px kein Ueberlauf, der Fehler war
     nicht nachzustellen. Behoben wurde darum gegen beide:

     a) .nav traegt overflow-y: auto fuer das lange Menue. Ist EINE
        Achse scrollbar, deutet CSS die andere von visible zu auto um —
        seitliches Scrollen entsteht also von selbst, ohne dass es
        jemand geschrieben hat. Jetzt steht overflow-x: hidden explizit
        daneben (Zeile 133).

     b) Das Core-CSS des Navigations-Blocks setzt das Untermenue auf
        position: absolute, mit hoeherer Spezifitaet als unsere Regel:

          Core:   .wp-block-navigation .has-child .…__submenu-container  0,3,0
          unsere: .nav .…__submenu-container                             0,2,0

        Bei uns gewann trotzdem static, auf dem Geraet offenbar nicht.
        Der Selektor unten hat jetzt 0,4,0 und laesst keine Wahl. */
  .nav .wp-block-navigation .has-child > .wp-block-navigation__submenu-container,
  .nav .wp-block-navigation .has-child > .nav-menu {
    position: static; left: auto; right: auto; top: auto; transform: none;
    min-width: 0; max-width: 100%;
  }

  /* min-width: 0 bis hinunter zum Text. Flex-Kinder haben von Haus aus
     min-width: auto und schrumpfen darum NIE unter die Breite ihres
     laengsten Wortes — "Immobilienentwickler" hat zwanzig Zeichen.
     Reicht der Platz nicht, spannt so ein Wort den Container auf, und
     der scrollt dann seitlich weg.

     Im Bildschirmvideo vom 24.09. ist genau das zu sehen: "Produkte"
     mit kurzen Eintraegen sitzt richtig, "Loesungen" mit den langen
     Rollenbezeichnungen ist nach links verschoben.

     overflow-wrap: anywhere als letzte Sicherung — lieber ein Wort
     umgebrochen als ein Menue, das aus dem Bild laeuft. */
  .nav .wp-block-navigation__submenu-container .wp-block-navigation-item,
  .nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
  .nav .wp-block-navigation__submenu-container .nm-text,
  .nav .wp-block-navigation__submenu-container .nm-name,
  .nav .wp-block-navigation__submenu-container .nm-desc {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .nav .wp-block-navigation-submenu.open > .wp-block-navigation__submenu-container,
  .nav .nav-dropdown.open > .wp-block-navigation__submenu-container,
  .nav .nav-dropdown.open > .nav-menu {
    max-height: none; height: auto; width: 100%; overflow: visible;
    padding: 0 18px 12px;
  }
}

/* Fussleiste: die Spalten-Menues nutzen dieselbe core/navigation-Struktur.
   Kein Icon, keine Beschreibung — nur eine schmale Link-Liste. */
.footer-col .wp-block-navigation__container {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 0;
}
.footer-col .wp-block-navigation-item { list-style: none; margin: 0; }
.footer-col .wp-block-navigation-item__content { display: block; padding: 6px 0; }
.footer-bottom .wp-block-navigation__container {
  list-style: none; margin: 0; padding: 0;
  display: inline-flex; gap: 18px;
}
.footer-bottom .wp-block-navigation-item { list-style: none; }

/* ---------- SECTIONS / SHARED ---------- */
section { padding: 80px 0; position: relative; }
@media (max-width: 768px) { section { padding: 56px 0; } }
.eyebrow { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blau); margin-bottom: 16px; }
.eyebrow-light { color: var(--gelb); }
.section-title { font-size: clamp(28px, 4.2vw, 50px); font-weight: 800; line-height: 1.08; letter-spacing: -0.025em; max-width: 22ch; }
.section-title.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-lead { font-size: 17px; line-height: 1.65; color: var(--text-muted); max-width: 62ch; margin-top: 20px; }
.section-lead strong { color: var(--blau); font-weight: 800; }
.section-lead.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-lead-white { font-size: 17px; line-height: 1.65; color: rgba(255,255,255,0.70); max-width: 62ch; margin-top: 20px; }
.section-lead-white.center { margin-left: auto; margin-right: auto; text-align: center; }
.cta-row { display: flex; gap: 14px; flex-wrap: wrap; }
.cta-row-center { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.bg-grau { background: var(--grau); }
.bg-weiss { background: var(--weiss); }
.bg-hellblau { background: var(--hellblau); }

/* ---------- PAGE HERO (interior pages) ---------- */
.page-hero { background: var(--dunkelblau); color: var(--weiss); padding: 76px 0 84px; position: relative; overflow: hidden; }
.page-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 78% 30%, rgba(60,87,225,0.40) 0%, transparent 56%), radial-gradient(ellipse at 12% 90%, rgba(248,255,118,0.07) 0%, transparent 46%); pointer-events: none; }
.page-hero::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse at 50% 40%, black 5%, transparent 70%); pointer-events: none; }
.page-hero .container { position: relative; z-index: 2; }
.page-hero-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gelb); padding: 6px 16px; border: 1px solid rgba(248,255,118,0.32); border-radius: 100px; margin-bottom: 28px; }
.page-hero-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gelb); box-shadow: 0 0 10px var(--gelb); }
.page-hero h1 { font-size: clamp(36px, 5.6vw, 66px); font-weight: 800; line-height: 1.04; letter-spacing: -0.03em; margin-bottom: 22px; max-width: 20ch; }
.page-hero h1 .accent { color: var(--gelb); }
/* The two sentences of a page-hero headline should not share a line, and
   the closing phrase should not be torn apart — otherwise the greedy wrap
   strands single words like "kein". */
.page-hero h1 .h1-lead { display: block; }
/* Only from 600px up: below that the phrase is wider than its column and
   would spill, and the narrow column breaks it cleanly by itself. */
@media (min-width: 600px) { .page-hero h1 .h1-tail { white-space: nowrap; } }
.page-hero .lead { font-size: clamp(16px, 1.6vw, 19px); color: rgba(255,255,255,0.72); max-width: 60ch; line-height: 1.6; }
.page-hero .cta-row { margin-top: 38px; }

/* ---------- BREADCRUMB ---------- */
.breadcrumb { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; color: rgba(255,255,255,0.45); margin-bottom: 22px; }
.breadcrumb a { color: rgba(255,255,255,0.45); }
.breadcrumb a:hover { color: var(--gelb); }
.breadcrumb span { color: rgba(255,255,255,0.78); }

/* ---------- HOME HERO ---------- */
.hero { background: var(--dunkelblau); color: var(--weiss); padding: 88px 0 100px; overflow: hidden; position: relative; }
.hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 75% 40%, rgba(60,87,225,0.38) 0%, transparent 55%), radial-gradient(ellipse at 15% 80%, rgba(248,255,118,0.08) 0%, transparent 45%); pointer-events: none; }
.hero::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px); background-size: 48px 48px; pointer-events: none; mask-image: radial-gradient(ellipse at 50% 50%, black 10%, transparent 70%); }
.hero .container { position: relative; z-index: 2; }
.hero-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gelb); padding: 6px 16px; border: 1px solid rgba(248,255,118,0.32); border-radius: 100px; margin-bottom: 32px; }
.hero-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gelb); box-shadow: 0 0 10px var(--gelb); }
.hero h1 { font-size: clamp(42px, 7vw, 84px); font-weight: 800; line-height: 1.02; letter-spacing: -0.035em; margin-bottom: 24px; max-width: 16ch; }
.hero h1 .accent { color: var(--gelb); }
.hero .lead { font-size: clamp(16px, 1.7vw, 20px); color: rgba(255,255,255,0.72); max-width: 56ch; margin-bottom: 44px; line-height: 1.6; }
.hero-visual { position: absolute; right: -4%; top: 50%; transform: translateY(-50%); width: 46%; max-width: 580px; z-index: 1; opacity: 0.75; }
@media (max-width: 1024px) { .hero-visual { display: none; } }
/* two-column hero: copy and product image share the stage.
   The image carries the visual weight, so the section drops the
   decorative glow + grid overlay it needs when it stands alone. */
.hero-split::before { background: radial-gradient(ellipse at 12% 82%, rgba(248,255,118,0.07) 0%, transparent 46%); }
.hero-split::after { display: none; }
/* kept tight on purpose: the client logo strip below must stay above the fold */
.hero-split { padding: 60px 0 52px; }
.hero-split h1 { font-size: clamp(38px, 4.3vw, 58px); max-width: 15ch; margin-bottom: 20px; }
.hero-split .lead { max-width: 50ch; margin-bottom: 30px; }
.hero-split .hero-badge { margin-bottom: 24px; }
.hero-split .hero-metarow { margin-top: 30px; padding-top: 22px; }
.hero-grid { display: grid; grid-template-columns: 1.06fr 0.94fr; gap: 56px; align-items: center; }
.hero-content { min-width: 0; }
.hero-figure { position: relative; margin: 0; }
.hero-figure::before { content: ''; position: absolute; inset: -10% -8%; z-index: 0;
  background: radial-gradient(circle at 52% 50%, rgba(60,87,225,0.45) 0%, rgba(60,87,225,0.12) 42%, transparent 68%); }
.hero-figure img { position: relative; z-index: 1; width: 100%; height: auto; }
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero h1 { max-width: none; }
  .hero-figure { max-width: 400px; margin: 0 auto; }
}
.hero-metarow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 32px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--linie-w); }
.hero-metarow .item .num { font-size: 30px; font-weight: 800; color: var(--gelb); letter-spacing: -0.03em; line-height: 1; }
.hero-metarow .item .lbl { font-size: 12px; color: rgba(255,255,255,0.55); margin-top: 6px; }
@media (max-width: 860px) { .hero { padding-top: 80px; padding-bottom: 72px; } .hero-metarow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; margin-top: 32px; padding-top: 24px; } }
@media (max-width: 480px) { .hero { padding-top: 56px; padding-bottom: 48px; } .hero-metarow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; margin-top: 28px; padding-top: 20px; } .hero-metarow .item .num { font-size: 24px; } .hero-metarow .item .lbl { font-size: 11px; } }

/* ---------- CLICK-TO-CONTRACT STEPPER (home hero) ----------
   Die Journey hat vier Stationen — Erleben, Vertiefen, Lead, Abschluss.
   Vorher lagen Listing, Agent und Vertrag als Flussdiagramm übereinander;
   Navigator-Erkundung und Lead-Entstehung hätten dort nur Platz gefunden,
   indem alles kleiner wird. Deshalb ein Stepper: immer nur eine Station
   sichtbar, dafür in voller Grösse.
   Die Mikro-Animationen hängen an .c2c-stage.is-active und starten dadurch
   beim Stationswechsel von selbst neu — es braucht keinen Reset-Hack. Alle
   Bühnen liegen in derselben Grid-Zelle, damit die Panelhöhe konstant bleibt
   und beim Wechsel nichts springt.
   Der Ruhezustand jedes Elements ist das ENDBILD der jeweiligen Station.
   Ohne JS und bei prefers-reduced-motion steht damit überall das Ergebnis —
   nie ein halbfertiges Zwischenbild. */
.c2c { position: relative; z-index: 1; max-width: 430px; margin: 0 auto; background: rgba(255,255,255,0.05); border: 1px solid var(--linie-w); border-radius: var(--r-600); padding: 20px; backdrop-filter: blur(12px); box-shadow: var(--elev-500); }
.c2c-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.c2c-live { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gelb); }
.c2c-live-dot { flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--gelb); box-shadow: 0 0 8px var(--gelb); animation: c2c-blink 2s ease-in-out infinite; }
.c2c-modes { display: inline-flex; flex-shrink: 0; gap: 3px; padding: 3px; background: rgba(255,255,255,0.07); border: 1px solid var(--linie-w); border-radius: 100px; }
.c2c-mode { appearance: none; border: 0; background: transparent; font-family: inherit; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: rgba(255,255,255,0.55); padding: 5px 12px; border-radius: 100px; cursor: pointer; white-space: nowrap; transition: background 0.2s ease, color 0.2s ease; }
.c2c-mode:hover { color: #fff; }
.c2c-mode.is-active { background: rgba(255,255,255,0.92); color: var(--dunkelblau); }
.c2c-mode:focus-visible { outline: 2px solid var(--gelb); outline-offset: 2px; }

/* --- Schrittleiste: zeigt den ganzen Bogen, auch wenn nur eine Station läuft --- */
.c2c-rail { position: relative; list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 0 16px; padding: 0; }
/* Grundlinie und Fortschrittslinie laufen von Punktmitte zu Punktmitte (12.5% → 87.5%) */
.c2c-rail::before, .c2c-rail::after { content: ''; position: absolute; top: 10px; left: 12.5%; height: 2px; border-radius: 2px; }
.c2c-rail::before { right: 12.5%; background: rgba(255,255,255,0.14); }
.c2c-rail::after { width: 0; background: var(--gelb); transition: width 0.45s ease; }
.c2c[data-stage="2"] .c2c-rail::after { width: 25%; }
.c2c[data-stage="3"] .c2c-rail::after { width: 50%; }
.c2c[data-stage="4"] .c2c-rail::after { width: 75%; }
.c2c-rail-item { list-style: none; }
.c2c-rail-btn { display: flex; flex-direction: column; align-items: center; gap: 7px; width: 100%; padding: 0; background: transparent; border: 0; font-family: inherit; color: inherit; cursor: pointer; }
.c2c-rail-btn:focus-visible { outline: 2px solid var(--gelb); outline-offset: 3px; border-radius: var(--r-200); }
.c2c-rail-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(0,26,100,0.94); border: 1px solid rgba(255,255,255,0.28); font-size: 10.5px; font-weight: 800; color: rgba(255,255,255,0.62); transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease; }
.c2c-rail-item.is-done .c2c-rail-dot { border-color: rgba(248,255,118,0.6); color: var(--gelb); }
.c2c-rail-item.is-active .c2c-rail-dot { background: var(--gelb); border-color: var(--gelb); color: var(--dunkelblau); box-shadow: 0 0 0 4px rgba(248,255,118,0.16); }
.c2c-rail-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.01em; color: rgba(255,255,255,0.48); transition: color 0.25s ease; }
.c2c-rail-item.is-done .c2c-rail-label { color: rgba(255,255,255,0.72); }
.c2c-rail-item.is-active .c2c-rail-label { color: #fff; }
.c2c-rail-btn:hover .c2c-rail-label { color: #fff; }

/* --- Bühne: alle Stationen in einer Grid-Zelle, nur eine sichtbar --- */
.c2c-stages { display: grid; grid-template-columns: minmax(0, 1fr); }
.c2c-stage { --off: 0s; grid-area: 1 / 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.32s ease, transform 0.32s ease, visibility 0.32s; }
.c2c-stage.is-active { opacity: 1; visibility: visible; transform: none; }
/* Ohne JS bleibt keine Station stehen — dann zeigt die erste das Bild. */
.c2c-stages:not(:has(.is-active)) .c2c-stage:first-child { opacity: 1; visibility: visible; transform: none; }
.c2c-say { margin-top: auto; padding-top: 6px; text-align: center; font-size: 11.5px; line-height: 1.5; color: rgba(255,255,255,0.55); }
.c2c-say strong { color: var(--gelb); font-weight: 700; }
.c2c-foot { margin-top: 14px; text-align: center; font-size: 12px; color: rgba(255,255,255,0.55); }
.c2c-foot strong { color: var(--gelb); font-weight: 700; }

/* --- gemeinsame Bausteine --- */
.c2c-card { position: relative; display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,0.06); border: 1px solid var(--linie-w); border-radius: var(--r-400); padding: 13px 14px; }
.c2c-thumb { flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px; background: rgba(60,87,225,0.38); color: #fff; display: flex; align-items: center; justify-content: center; }
.c2c-thumb-doc { background: rgba(248,255,118,0.14); color: var(--gelb); }
.c2c-card-info { min-width: 0; flex: 1; }
.c2c-card-title { font-size: 13.5px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c2c-card-meta { font-size: 11.5px; color: rgba(255,255,255,0.55); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c2c-chip { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; padding: 6px 11px; border-radius: 100px; background: rgba(255,255,255,0.05); border: 1px solid var(--linie-w); font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.72); white-space: nowrap; }
.c2c-chip-tour, .c2c-chip-strong, .c2c-chip-late, .c2c-pick { background: rgba(248,255,118,0.14); border-color: rgba(248,255,118,0.40); color: var(--gelb); font-weight: 800; }
.c2c-sw { flex-shrink: 0; width: 12px; height: 12px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.25); }
.c2c-buy { flex-shrink: 0; background: var(--gelb); color: var(--dunkelblau); font-size: 11.5px; font-weight: 800; padding: 8px 13px; border-radius: 100px; }
.c2c-cursor { position: absolute; right: 37px; top: 30px; z-index: 2; opacity: 0; transform-origin: 4px 4px; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.45)); }
.c2c-stamp { flex-shrink: 0; background: var(--gelb); color: var(--dunkelblau); font-size: 11px; font-weight: 800; padding: 6px 10px; border-radius: 8px; rotate: -6deg; }

/* --- 01 · Erleben (Navigator) --- */
.c2c-scene { position: relative; }
.c2c-bld { display: block; width: 100%; height: auto; }
.c2c-win { fill: rgba(255,255,255,0.10); }
.c2c-win-lit { fill: rgba(255,255,255,0.20); }
.c2c-unit { fill: rgba(248,255,118,0.90); stroke: var(--gelb); stroke-width: 1.2; filter: drop-shadow(0 0 8px rgba(248,255,118,0.65)); }
.c2c-tip { position: absolute; left: 49%; top: 14%; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; background: rgba(2,12,52,0.94); border: 1px solid rgba(248,255,118,0.40); border-radius: 9px; font-size: 10.5px; font-weight: 700; color: #fff; white-space: nowrap; box-shadow: 0 8px 20px rgba(0,0,0,0.35); }
.c2c-tip-dot { flex-shrink: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--gelb); box-shadow: 0 0 6px var(--gelb); }
.c2c-cursor-scene { right: auto; top: auto; left: 47%; bottom: 12%; }

.c2c-stage.is-active .c2c-cursor-scene { animation: c2c-cursor-scene 2.1s ease-in-out both; }
.c2c-stage.is-active .c2c-unit { animation: c2c-unit 1.5s linear both; }
.c2c-stage.is-active .c2c-tip { animation: c2c-rise 0.4s ease 1.55s both; }
.c2c-stage.is-active .c2c-chip-tour { animation: c2c-pop 0.4s cubic-bezier(0.2,1.4,0.4,1) 2.1s both; }

@keyframes c2c-cursor-scene {
  0% { opacity: 0; transform: translate(34px, 26px); }
  12% { opacity: 1; }
  55% { opacity: 1; transform: translate(0, 0); }
  62% { transform: translate(0, 0) scale(0.78); }
  70% { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(0, 0); }
}
@keyframes c2c-unit {
  0%, 62% { fill: rgba(255,255,255,0.10); stroke: rgba(248,255,118,0); filter: drop-shadow(0 0 0 rgba(248,255,118,0)); }
  76%, 100% { fill: rgba(248,255,118,0.90); stroke: rgba(248,255,118,1); filter: drop-shadow(0 0 8px rgba(248,255,118,0.65)); }
}

/* --- 02 · Besichtigen (Miete) / Vertiefen (Kauf) ----------------------
   Mieter konfigurieren keinen Innenausbau — sie wollen die Wohnung sehen.
   Deshalb hat diese Station zwei Varianten: Terminbuchung für die Miete,
   Living Configurator für den Kauf. Die Transaktionsart entscheidet, welche
   im DOM sichtbar ist; die versteckte wird nicht animiert. */
.c2c-var { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.c2c:not(.is-kauf) .c2c-only-kauf, .c2c.is-kauf .c2c-only-miete { display: none; }

/* Miete: automatisierte Terminbuchung */
.c2c-cal { padding: 12px 13px; background: rgba(255,255,255,0.04); border: 1px solid var(--linie-w); border-radius: var(--r-400); }
.c2c-cal-head { font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.45); margin-bottom: 10px; }
.c2c-cal-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 10px; }
.c2c-cal-day { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 0; border-radius: 10px; border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.03); font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.32); }
.c2c-cal-day b { font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.30); }
.c2c-cal-day.is-free { border-color: var(--linie-w); background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.82); }
.c2c-cal-day.is-free b { color: rgba(255,255,255,0.50); }
.c2c-cal-day.c2c-pick { border-color: rgba(248,255,118,0.40); background: rgba(248,255,118,0.14); color: var(--gelb); }
.c2c-cal-day.c2c-pick b { color: var(--gelb); }
.c2c-cal-slots { display: flex; gap: 6px; }

/* Kauf: Living Configurator — Materialien und Logik wie living-configurator.html */
.c2c-kitchen { display: block; width: 100%; max-width: 300px; height: auto; margin: 0 auto; border-radius: var(--r-400); }
.c2c-mat { fill: #33333e; }
.c2c-matlabel { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.62); }
.c2c-incl { padding: 3px 9px; border-radius: 100px; background: rgba(255,255,255,0.07); border: 1px solid var(--linie-w); font-size: 10px; font-weight: 700; color: rgba(255,255,255,0.70); }
.c2c-swatches { display: flex; flex-wrap: wrap; gap: 6px; }

.c2c-stage.is-active .c2c-pick-1 { animation: c2c-pick 0.35s ease 0.65s both; }
.c2c-stage.is-active .c2c-pick-2 { animation: c2c-pick 0.35s ease 1.5s both; }
.c2c-stage.is-active .c2c-mat { animation: c2c-mat 0.45s ease 1.6s both; }
.c2c-stage.is-active .c2c-slide-in { animation: c2c-rise 0.42s ease 2.3s both; }

@keyframes c2c-pick {
  from { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.12); color: rgba(255,255,255,0.72); }
  to { background: rgba(248,255,118,0.14); border-color: rgba(248,255,118,0.40); color: #f8ff76; }
}
@keyframes c2c-mat { from { fill: #e9e4da; } to { fill: #33333e; } }

/* --- 03 · Lead (HELLO OS) --- */
.c2c-score { padding: 11px 13px; background: rgba(255,255,255,0.04); border: 1px solid var(--linie-w); border-radius: var(--r-400); }
.c2c-score-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.45); }
.c2c-score-head b { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; color: var(--gelb); text-transform: none; }
.c2c-score-track { height: 5px; border-radius: 100px; background: rgba(255,255,255,0.12); overflow: hidden; }
.c2c-score-fill { display: block; width: 87%; height: 100%; border-radius: 100px; background: linear-gradient(90deg, var(--blau-hover) 0%, var(--gelb) 100%); }

.c2c-stage.is-active .c2c-score-fill { animation: c2c-score 1.5s cubic-bezier(0.3,0.8,0.3,1) 0.5s both; }
.c2c-stage.is-active .c2c-chip-late { animation: c2c-pop 0.4s cubic-bezier(0.2,1.4,0.4,1) 3.1s both; }
@keyframes c2c-score { from { width: 0; } to { width: 87%; } }

/* --- 04 · Abschluss (Click-to-Contract) --- */
.c2c-stage-close { --off: 1.15s; }
.c2c-link { position: relative; width: 2px; height: 20px; margin: 0 auto; background: rgba(255,255,255,0.14); border-radius: 2px; }
.c2c-packet { position: absolute; left: 50%; top: -4px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--gelb); box-shadow: 0 0 10px var(--gelb); opacity: 0; }
.c2c-agent { gap: 14px; }
.c2c-core { position: relative; flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg, var(--blau) 0%, #2438a8 100%); color: var(--gelb); display: flex; align-items: center; justify-content: center; }
.c2c-ring { position: absolute; inset: -5px; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 66%, #95a5ff 86%, var(--gelb) 100%); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px)); opacity: 0; }
.c2c-sign { stroke-dasharray: 20; stroke-dashoffset: 0; }
.c2c.is-kauf .c2c-sign { stroke: rgba(255,255,255,0.4); stroke-dasharray: 2.4 3; stroke-dashoffset: 0; }

.c2c-stage.is-active .c2c-cursor:not(.c2c-cursor-scene) { animation: c2c-cursor 1.5s ease-in-out both; }
.c2c-stage.is-active .c2c-buy { animation: c2c-buy 0.5s ease 0.8s both; }
.c2c-stage.is-active .c2c-link-1 .c2c-packet { animation: c2c-packet 0.6s linear 0.95s both; }
.c2c-stage.is-active .c2c-core { animation: c2c-core 0.35s ease 1.1s both; }
.c2c-stage.is-active .c2c-ring { animation: c2c-spin 1.6s linear infinite, c2c-ring 2.95s linear 1.15s both; }
.c2c-stage.is-active .c2c-link-2 .c2c-packet { animation: c2c-packet 0.6s linear 4.15s both; }
.c2c-stage.is-active .c2c-contract { animation: c2c-contract 0.4s ease 4.35s both; }
.c2c-stage.is-active .c2c-sign { animation: c2c-sign 0.9s ease 4.7s both; }
.c2c-stage.is-active .c2c-stamp { animation: c2c-stamp 0.45s cubic-bezier(0.2,1.5,0.4,1) 5.55s both; }
.c2c.is-kauf .c2c-stage.is-active .c2c-sign { animation: none; }

@keyframes c2c-cursor {
  0% { opacity: 0; transform: translate(26px, 22px); }
  16% { opacity: 1; }
  62% { opacity: 1; transform: translate(0, 0); }
  72% { transform: translate(0, 0) scale(0.78); }
  82% { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(0, 0); }
}
@keyframes c2c-buy {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(248,255,118,0.55); }
  45% { transform: scale(0.94); box-shadow: 0 0 0 9px rgba(248,255,118,0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(248,255,118,0); }
}
@keyframes c2c-packet {
  0% { opacity: 0; transform: translateY(0); }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translateY(24px); }
}
@keyframes c2c-core { from { filter: brightness(0.55); } to { filter: none; } }
@keyframes c2c-ring { 0% { opacity: 0; } 4% { opacity: 1; } 94% { opacity: 1; } 100% { opacity: 0; } }
@keyframes c2c-contract { from { opacity: 0.35; } to { opacity: 1; } }
@keyframes c2c-sign { from { stroke-dashoffset: 20; } to { stroke-dashoffset: 0; } }
@keyframes c2c-stamp {
  0% { opacity: 0; transform: scale(1.6); }
  70% { opacity: 1; transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}

/* --- Checklisten (Station 03 und 04) ---
   Jede Zeile hat drei Phasen: gedimmt → Spinner → Häkchen. Die Startzeiten
   stehen als Variablen an der Zeile, --off verschiebt die ganze Liste (in
   Station 04 laufen die Prüfungen erst nach dem Klick los). */
.c2c-tasks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1; }
.c2c-tasks-boxed { flex: 0 0 auto; padding: 12px 13px; background: rgba(255,255,255,0.04); border: 1px solid var(--linie-w); border-radius: var(--r-400); gap: 9px; }
.c2c-task { display: flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,0.88); }
.c2c-task i { position: relative; flex-shrink: 0; width: 17px; height: 17px; font-style: normal; }
.c2c-task i::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255,255,255,0.22); border-top-color: #95a5ff; opacity: 0; }
.c2c-task i::after { content: '✓'; position: absolute; inset: 0; border-radius: 50%; background: var(--gelb); color: var(--dunkelblau); font-size: 10.5px; font-weight: 800; line-height: 17px; text-align: center; }
.c2c-t1 { --t0: 0.15s; --t1: 1.05s; }
.c2c-t2 { --t0: 1.05s; --t1: 1.95s; }
.c2c-t3 { --t0: 1.95s; --t1: 2.90s; }

.c2c-stage.is-active .c2c-task { animation: c2c-li 0.25s ease calc(var(--off) + var(--t0)) both; }
.c2c-stage.is-active .c2c-task i::before { animation: c2c-spin 0.9s linear infinite, c2c-spinner calc(var(--t1) - var(--t0)) linear calc(var(--off) + var(--t0)) both; }
.c2c-stage.is-active .c2c-task i::after { animation: c2c-check 0.4s cubic-bezier(0.2,1.4,0.4,1) calc(var(--off) + var(--t1)) both; }

@keyframes c2c-li { from { opacity: 0.35; } to { opacity: 1; } }
@keyframes c2c-spinner { 0% { opacity: 0; } 6% { opacity: 1; } 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes c2c-check {
  0% { opacity: 0; transform: scale(0.3); }
  65% { opacity: 1; transform: scale(1.15); }
  100% { opacity: 1; transform: scale(1); }
}

/* --- Datenprofil: der Lead entsteht nicht am Ende, er wächst ab Klick eins --- */
.c2c-meter { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--linie-w); }
.c2c-meter-label { flex-shrink: 0; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.42); }
.c2c-meter-track { flex: 1; min-width: 40px; height: 4px; border-radius: 100px; background: rgba(255,255,255,0.12); overflow: hidden; }
.c2c-meter-fill { display: block; width: 25%; height: 100%; border-radius: 100px; background: linear-gradient(90deg, var(--blau-hover) 0%, var(--gelb) 100%); transition: width 0.45s ease; }
.c2c[data-stage="2"] .c2c-meter-fill { width: 50%; }
.c2c[data-stage="3"] .c2c-meter-fill { width: 78%; }
.c2c[data-stage="4"] .c2c-meter-fill { width: 100%; }
.c2c-meter-state { flex-shrink: 0; font-size: 10.5px; font-weight: 800; color: var(--gelb); white-space: nowrap; }

/* --- gemeinsame Keyframes --- */
@keyframes c2c-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes c2c-spin { to { transform: rotate(360deg); } }
@keyframes c2c-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes c2c-pop {
  0% { opacity: 0; transform: scale(0.72); }
  70% { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}

@media (max-width: 480px) {
  .c2c { padding: 14px; }
  .c2c-card { padding: 11px 12px; gap: 10px; }
  .c2c-head { flex-wrap: wrap; }
  .c2c-mode { padding: 5px 10px; }
  .c2c-rail-label { font-size: 9.5px; }
  .c2c-tip { left: auto; right: 2px; top: 4px; font-size: 9.5px; padding: 5px 8px; }
  /* schmalere Pills lassen dem Objekttitel Platz, statt ihn abzuschneiden */
  .c2c-chip { font-size: 10px; padding: 5px 9px; gap: 5px; }
  .c2c-buy { font-size: 10.5px; padding: 7px 11px; }
  .c2c-cal-slots .c2c-chip { padding: 5px 10px; }
  .c2c-meter { flex-wrap: wrap; gap: 8px; }
  .c2c-meter-track { order: 3; flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .c2c, .c2c *, .c2c *::before, .c2c *::after { animation: none !important; }
  .c2c-stage, .c2c-meter-fill, .c2c-rail::after { transition: none; }
  .c2c-cursor, .c2c-packet { display: none; }
}

/* ---------- CONVERSION FUNNEL ANIMATION (BeyonityHELLO hero) ----------
   Deliberately a different figure from the home hero: that one stacks three
   equal cards and ticks off a checklist, this one is a tapering funnel —
   four stages narrowing from Lead-Generierung to Vertragsabschluss, which is
   exactly the claim in the copy beside it.
   A 9s loop fills the funnel stage by stage: the stage lights up, a sheen
   sweeps across it, the chevron below pulses as the flow drops to the next.
   Every label is transaction-neutral — the funnel ends in a Vertrag, not in
   a Miet- or Kaufvertrag — so the figure holds for both without a switch,
   and it needs no JS at all.
   Stage arrivals: 4.444% + n × 22.222% (0.4s + n × 2.0s of 9s). The sheen
   and chevron pulses share one keyframe each and are phase-shifted by a
   positive animation-delay — same period, so the offset holds forever.
   The animation-less state is the filled funnel, so prefers-reduced-motion
   shows the finished run rather than an empty frame. */
.fnl { --fnl-t: 9s; position: relative; z-index: 1; max-width: 440px; margin: 0 auto; background: rgba(255,255,255,0.05); border: 1px solid var(--linie-w); border-radius: var(--r-600); padding: 20px; backdrop-filter: blur(12px); box-shadow: var(--elev-500); }
.fnl-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.fnl-live { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gelb); }
.fnl-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gelb); box-shadow: 0 0 8px var(--gelb); animation: c2c-blink 2s ease-in-out infinite; }
.fnl-tag { flex-shrink: 0; font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; color: rgba(255,255,255,0.66); background: rgba(255,255,255,0.07); border: 1px solid var(--linie-w); border-radius: 100px; padding: 4px 10px; white-space: nowrap; }

.fnl-stage { display: flex; flex-direction: column; align-items: center; }
.fnl-band { position: relative; overflow: hidden; width: 100%; min-height: 62px; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 11px 16px; text-align: center; background: rgba(60,87,225,0.34); border: 1px solid rgba(255,255,255,0.22); }
.fnl-b2 { width: 84%; }
.fnl-b3 { width: 68%; }
.fnl-b4 { width: 52%; background: rgba(248,255,118,0.11); border-color: rgba(248,255,118,0.50); }
/* the sheen that crosses a stage the moment the flow reaches it */
.fnl-band::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 34%, rgba(255,255,255,0.26) 50%, transparent 66%); transform: translateX(-105%); opacity: 0; animation: fnl-sheen var(--fnl-t) linear infinite backwards; }
.fnl-title { font-size: 11px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: #fff; white-space: nowrap; }
.fnl-sub { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 3px 6px; font-size: 10.5px; font-weight: 600; line-height: 1.45; color: rgba(255,255,255,0.74); }
.fnl-nb { white-space: nowrap; }
.fnl-b4 .fnl-title { color: var(--gelb); }
.fnl-b4 .fnl-sub { color: #fff; }
.fnl-stamp { flex-shrink: 0; background: var(--gelb); color: var(--dunkelblau); font-size: 9.5px; font-weight: 800; padding: 3px 7px; border-radius: 6px; rotate: -5deg; animation: fnl-stamp var(--fnl-t) linear infinite; }

.fnl-drop { position: relative; width: 100%; height: 12px; display: flex; align-items: center; justify-content: center; color: var(--gelb); }
/* --a/--b: how far each side is inset above and below this gap. They are
   the taper itself — the band widths below are 100% minus twice --a. */
.fnl-d1 { --a: 0%; --b: 8%; }
.fnl-d2 { --a: 8%; --b: 16%; }
.fnl-d3 { --a: 16%; --b: 24%; }
.fnl-wall { position: absolute; top: 0; bottom: 0; width: calc(var(--b) - var(--a)); height: 100%; overflow: visible; }
.fnl-wall-l { left: var(--a); }
.fnl-wall-r { right: var(--a); }
.fnl-wall path { fill: none; stroke: rgba(255,255,255,0.20); stroke-width: 1.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.fnl-chev { position: relative; width: 13px; height: 13px; display: block; opacity: 0.85; animation: fnl-drop var(--fnl-t) linear infinite backwards; }

.fnl-foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linie-w); text-align: center; font-size: 12px; color: rgba(255,255,255,0.55); }
.fnl-foot strong { color: var(--gelb); font-weight: 700; }

.fnl-b1 { animation: fnl-s1 var(--fnl-t) linear infinite; }
.fnl-b2 { animation: fnl-s2 var(--fnl-t) linear infinite; }
.fnl-b3 { animation: fnl-s3 var(--fnl-t) linear infinite; }
.fnl-b4 { animation: fnl-s4 var(--fnl-t) linear infinite; }
.fnl-b2::after { animation-delay: 2s; }
.fnl-b3::after { animation-delay: 4s; }
.fnl-b4::after { animation-delay: 6s; }
.fnl-d2 .fnl-chev { animation-delay: 2s; }
.fnl-d3 .fnl-chev { animation-delay: 4s; }

/* stages 1–3: dim until the flow arrives, lit until the run resets */
@keyframes fnl-s1 {
  0%, 3.3% { opacity: 0.34; background: rgba(255,255,255,0.045); border-color: rgba(255,255,255,0.12); }
  5.5%, 93.333% { opacity: 1; background: rgba(60,87,225,0.34); border-color: rgba(255,255,255,0.22); }
  96.667%, 100% { opacity: 0.34; background: rgba(255,255,255,0.045); border-color: rgba(255,255,255,0.12); }
}
@keyframes fnl-s2 {
  0%, 25.5% { opacity: 0.34; background: rgba(255,255,255,0.045); border-color: rgba(255,255,255,0.12); }
  27.8%, 93.333% { opacity: 1; background: rgba(60,87,225,0.34); border-color: rgba(255,255,255,0.22); }
  96.667%, 100% { opacity: 0.34; background: rgba(255,255,255,0.045); border-color: rgba(255,255,255,0.12); }
}
@keyframes fnl-s3 {
  0%, 47.8% { opacity: 0.34; background: rgba(255,255,255,0.045); border-color: rgba(255,255,255,0.12); }
  50%, 93.333% { opacity: 1; background: rgba(60,87,225,0.34); border-color: rgba(255,255,255,0.22); }
  96.667%, 100% { opacity: 0.34; background: rgba(255,255,255,0.045); border-color: rgba(255,255,255,0.12); }
}
/* the last stage carries the accent — it is the moment the copy promises */
@keyframes fnl-s4 {
  0%, 70% { opacity: 0.34; background: rgba(255,255,255,0.045); border-color: rgba(255,255,255,0.12); }
  72.2%, 93.333% { opacity: 1; background: rgba(248,255,118,0.11); border-color: rgba(248,255,118,0.50); }
  96.667%, 100% { opacity: 0.34; background: rgba(255,255,255,0.045); border-color: rgba(255,255,255,0.12); }
}
/* one sheen keyframe for all four stages, phase-shifted per stage */
@keyframes fnl-sheen {
  0%, 4.444% { transform: translateX(-105%); opacity: 0; }
  6% { opacity: 1; }
  14.5% { transform: translateX(105%); opacity: 1; }
  15.5%, 100% { transform: translateX(105%); opacity: 0; }
}
/* the chevron pulses while the flow drops to the stage below */
@keyframes fnl-drop {
  0%, 19% { opacity: 0.30; transform: translateY(-3px); }
  22% { opacity: 1; transform: translateY(-3px); }
  26.667% { opacity: 1; transform: translateY(3px); }
  30%, 100% { opacity: 0.30; transform: translateY(3px); }
}
@keyframes fnl-stamp {
  0%, 84.5% { opacity: 0; transform: scale(0.5); }
  87% { opacity: 1; transform: scale(1.16); }
  89%, 93.333% { opacity: 1; transform: scale(1); }
  96.667%, 100% { opacity: 0; transform: scale(1); }
}
/* Below the desktop hero the card is too narrow to carry the full taper —
   the last stage would end up tighter than its own label — so from here on
   it narrows half as fast. Bands and walls move together. */
@media (max-width: 900px) {
  .fnl-b2 { width: 90%; }
  .fnl-b3 { width: 80%; }
  .fnl-b4 { width: 70%; }
  .fnl-d1 { --b: 5%; }
  .fnl-d2 { --a: 5%; --b: 10%; }
  .fnl-d3 { --a: 10%; --b: 15%; }
}
@media (max-width: 480px) {
  .fnl { padding: 14px; }
  .fnl-tag { display: none; }
  .fnl-band { padding: 10px 12px; }
  .fnl-sub { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .fnl, .fnl *, .fnl *::before, .fnl *::after { animation: none !important; }
  .fnl-band::after { display: none; }
}

/* ---------- SOCIAL DISCOVERY FEED (BeyonityHELLO, Social Real Commerce) ----------
   Bewusst ein anderes Bild als die beiden anderen Figuren der Seite: kein
   Karten-Stack und kein Trichter, sondern ein Gerät im Hochformat, in dem ein
   Social-Feed durchläuft — die Konsumentensicht, wörtlich genommen.
   Ein 12s-Zyklus zeigt vier Beiträge à 3s. Der Track scrollt in 20%-Schritten
   (der fünfte Beitrag ist eine Kopie des ersten, damit der Rücksprung auf 0
   unsichtbar bleibt). Die vier Plattform-Chips teilen sich eine Keyframe und
   sind per +3s/+6s/+9s-Delay auf ihren Beitrag phasenverschoben. Der Toast
   laeuft mit 3s = T/4 und feuert damit einmal pro Beitrag. Ohne JS.
   Der animationslose Zustand ist der erste Beitrag, also zeigt
   prefers-reduced-motion ein vollstaendiges Bild statt eines leeren Rahmens. */
.srx { --srx-t: 12s; position: relative; z-index: 1; max-width: 440px; margin: 0 auto; }
.srx-stage { position: relative; }

/* Geraet */
.srx-phone { position: relative; z-index: 2; width: 232px; margin: 0 auto; padding: 9px; border-radius: 34px;
  background: linear-gradient(160deg, rgba(255,255,255,0.26), rgba(255,255,255,0.06));
  border: 1px solid rgba(255,255,255,0.32); box-shadow: 0 26px 60px rgba(0,8,45,0.45); }
.srx-screen { position: relative; height: 356px; border-radius: 26px; overflow: hidden; background: #000f3d; }
.srx-island { position: absolute; top: 9px; left: 50%; transform: translateX(-50%); z-index: 6;
  width: 62px; height: 5px; border-radius: 100px; background: rgba(255,255,255,0.22); }

/* Feed */
.srx-track { height: 500%; display: flex; flex-direction: column; animation: srx-scroll var(--srx-t) cubic-bezier(0.72, 0, 0.16, 1) infinite; }
.srx-post { height: 20%; flex: none; display: flex; flex-direction: column; gap: 8px; padding: 22px 12px 13px; }
.srx-post-top { display: flex; align-items: center; gap: 7px; }
.srx-badge { flex: none; width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.24); color: #fff; }
.srx-badge svg { width: 14px; height: 14px; }
.srx-app { font-size: 10.5px; font-weight: 800; color: #fff; }
.srx-handle { margin-left: auto; font-size: 9.5px; font-weight: 600; color: rgba(255,255,255,0.45);
  max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srx-media { position: relative; flex: 1; min-height: 0; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(152deg, rgba(255,255,255,0.17) 0%, rgba(255,255,255,0.05) 62%, rgba(60,87,225,0.22) 100%);
  border: 1px solid rgba(255,255,255,0.14); color: rgba(255,255,255,0.5); overflow: hidden; }
.srx-media > svg { width: 46px; height: 46px; }
/* Video-Marker in der Ecke, damit das Objekt-Icon sichtbar bleibt */
.srx-play { position: absolute; top: 9px; right: 9px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(0,15,61,0.6); border: 1px solid rgba(255,255,255,0.42); color: #fff; backdrop-filter: blur(4px); }
.srx-play svg { width: 13px; height: 13px; }
.srx-pill { position: absolute; left: 9px; bottom: 9px; padding: 4px 8px; border-radius: 100px;
  background: var(--gelb); color: var(--dunkelblau); font-size: 9px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.srx-cap { font-size: 10.5px; font-weight: 600; line-height: 1.4; color: rgba(255,255,255,0.82); }
.srx-eng { display: flex; align-items: center; gap: 13px; }
.srx-eng > span { display: inline-flex; align-items: center; gap: 5px; font-size: 9.5px; font-weight: 700; color: rgba(255,255,255,0.58); }
.srx-eng svg { width: 12px; height: 12px; }
.srx-eng > span:first-child { color: var(--gelb); }
.srx-save { margin-left: auto; }

/* aufsteigende Likes */
.srx-hearts { position: absolute; right: 16px; bottom: 78px; z-index: 4; width: 30px; height: 20px; pointer-events: none; }
.srx-heart { position: absolute; bottom: 0; width: 13px; height: 13px; color: var(--gelb); opacity: 0;
  animation: srx-heart 2.6s ease-out infinite; }
.srx-heart svg { width: 100%; height: 100%; }
.srx-heart:nth-child(1) { right: 2px; }
.srx-heart:nth-child(2) { right: 13px; animation-delay: 0.85s; }
.srx-heart:nth-child(3) { right: -5px; animation-delay: 1.7s; }

/* Lead-Bestaetigung */
/* legt sich ueber die Interaktionszeile, laesst die Bildunterschrift frei */
.srx-toast { position: absolute; left: 11px; right: 11px; bottom: 7px; z-index: 5;
  display: flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 10px;
  background: rgba(248,255,118,0.16); border: 1px solid rgba(248,255,118,0.55); backdrop-filter: blur(8px);
  font-size: 9.5px; font-weight: 800; color: var(--gelb); opacity: 0; transform: translateY(9px);
  animation: srx-toast 3s ease-out infinite; }
.srx-toast svg { flex: none; width: 12px; height: 12px; }

/* Plattform-Chips rund um das Geraet */
.srx-chip { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px 7px 8px;
  border-radius: 100px; background: rgba(0,20,80,0.78); border: 1px solid rgba(255,255,255,0.26);
  box-shadow: 0 10px 24px rgba(0,8,45,0.4); backdrop-filter: blur(8px); color: #fff;
  animation: srx-chip-on var(--srx-t) linear infinite; }
.srx-chip svg { flex: none; width: 15px; height: 15px; }
.srx-chip span { font-size: 9.5px; font-weight: 800; white-space: nowrap; }
.srx-chip::after { content: ''; position: absolute; inset: -1px; border-radius: 100px; border: 1.5px solid var(--gelb);
  opacity: 0; animation: srx-ripple var(--srx-t) linear infinite; }
.srx-c1 { top: 44px; left: 0; }
.srx-c2 { top: 134px; right: 0; }
.srx-c3 { top: 226px; left: 0; }
.srx-c4 { top: 316px; right: 0; }
.srx-c2, .srx-c2::after { animation-delay: 3s; }
.srx-c3, .srx-c3::after { animation-delay: 6s; }
.srx-c4, .srx-c4::after { animation-delay: 9s; }

.srx-foot { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.16);
  text-align: center; font-size: 12px; color: rgba(255,255,255,0.6); }
.srx-foot strong { color: var(--gelb); font-weight: 700; }

/* vier Beitraege, dazwischen jeweils ein Halt — der fuenfte ist die Kopie des ersten */
@keyframes srx-scroll {
  0%, 18% { transform: translateY(0); }
  25%, 43% { transform: translateY(-20%); }
  50%, 68% { transform: translateY(-40%); }
  75%, 93% { transform: translateY(-60%); }
  100% { transform: translateY(-80%); }
}
@keyframes srx-heart {
  0% { opacity: 0; transform: translateY(0) scale(0.6); }
  14% { opacity: 1; transform: translateY(-7px) scale(1); }
  100% { opacity: 0; transform: translateY(-54px) scale(0.85); }
}
/* endet, bevor der Feed weiterscrollt (18% von 12s = 2.16s = 72% dieser 3s) */
@keyframes srx-toast {
  0%, 38% { opacity: 0; transform: translateY(9px); }
  46%, 68% { opacity: 1; transform: translateY(0); }
  76%, 100% { opacity: 0; transform: translateY(0); }
}
@keyframes srx-chip-on {
  0%, 1% { color: #fff; border-color: rgba(255,255,255,0.26); box-shadow: 0 10px 24px rgba(0,8,45,0.4); }
  4% { color: var(--gelb); border-color: rgba(248,255,118,0.85); box-shadow: 0 10px 24px rgba(0,8,45,0.4), 0 0 0 5px rgba(248,255,118,0.13); }
  20% { color: var(--gelb); border-color: rgba(248,255,118,0.6); box-shadow: 0 10px 24px rgba(0,8,45,0.4); }
  25%, 100% { color: #fff; border-color: rgba(255,255,255,0.26); box-shadow: 0 10px 24px rgba(0,8,45,0.4); }
}
@keyframes srx-ripple {
  0%, 2% { opacity: 0; transform: scale(1); }
  5% { opacity: 0.7; transform: scale(1); }
  20% { opacity: 0; transform: scale(1.42); }
  21%, 100% { opacity: 0; transform: scale(1.42); }
}

/* Schmale Spalten: Chips verlieren ihr Label und ruecken an den Rand des Geraets */
@media (max-width: 1080px) {
  .srx-chip span { display: none; }
  .srx-chip { padding: 8px; }
}
@media (max-width: 980px) {
  .srx-chip span { display: inline; }
  .srx-chip { padding: 7px 11px 7px 8px; }
}
@media (max-width: 420px) {
  .srx-chip span { display: none; }
  .srx-chip { padding: 8px; }
  .srx-phone { width: 208px; }
  .srx-screen { height: 330px; }
}
@media (prefers-reduced-motion: reduce) {
  .srx, .srx *, .srx *::before, .srx *::after { animation: none !important; }
  .srx-hearts { display: none; }
  .srx-toast { opacity: 1; transform: none; }
}

/* page heroes that pair copy with an animated figure: type scales down */
.page-hero .hero-grid { margin-top: 8px; align-items: center; }
.page-hero .hero-grid h1 { font-size: clamp(32px, 3.6vw, 50px); }
.page-hero .hero-grid .cta-row { margin-top: 30px; }

/* Project-page hero: client logo, right of the headline. Same glass-card
   language as the c2c/fnl/nvx hero figures (soft white fill, hairline
   border, radial glow) but static — a case study leads with proof, not
   another animation, and a real client mark will replace this placeholder. */
.proj-logo-card { position: relative; max-width: 400px; min-height: 260px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  padding: 40px; border-radius: var(--r-600); background: rgba(255,255,255,0.05);
  border: 1px solid var(--linie-w); backdrop-filter: blur(12px); overflow: hidden; }
.proj-logo-card::before { content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 72% 24%, rgba(60,87,225,0.42) 0%, transparent 58%); }
.proj-logo-card > * { position: relative; z-index: 1; }
.proj-logo-mark { width: 230px; max-width: 60%; }
.proj-logo-mark svg { width: 100%; height: auto; display: block; }
@media (max-width: 980px) { .proj-logo-card { max-width: 340px; margin-top: 8px; } }
@media (max-width: 480px) { .proj-logo-card { padding: 30px; min-height: 200px; } .proj-logo-mark { width: 170px; } }

/* ---------- NAVIGATOR JOURNEY ANIMATION (Navigator hero) ----------
   Pure CSS loop (~12s): a visitor explores the building, picks a unit,
   the journey steps complete (erleben → konfigurieren → bewerben) and
   the application is sent. Default (animation-less) state = completed,
   so prefers-reduced-motion shows the end result. */
.nvx { --nvx-t: 12s; position: relative; z-index: 1; max-width: 440px; margin: 0 auto; background: rgba(255,255,255,0.05); border: 1px solid var(--linie-w); border-radius: var(--r-600); padding: 20px; backdrop-filter: blur(12px); box-shadow: var(--elev-500); }
.nvx-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 6px; }
.nvx-live { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gelb); }
.nvx-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gelb); box-shadow: 0 0 8px var(--gelb); animation: c2c-blink 2s ease-in-out infinite; }
.nvx-tag { font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.45); letter-spacing: 0.04em; white-space: nowrap; }

.nvx-scene { position: relative; margin-top: 8px; }
.nvx-bld { display: block; width: 100%; height: auto; }
.nvx-win { fill: rgba(255,255,255,0.10); }
.nvx-win-lit { fill: rgba(255,255,255,0.20); }
.nvx-unit { fill: rgba(248,255,118,0.9); stroke: var(--gelb); stroke-width: 1.2; filter: drop-shadow(0 0 8px rgba(248,255,118,0.7)); animation: nvx-unit var(--nvx-t) linear infinite; }
.nvx-cursor { position: absolute; left: 48%; top: 45%; z-index: 3; opacity: 0; transform-origin: 4px 4px; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.45)); animation: nvx-cursor var(--nvx-t) ease-in-out infinite; }
.nvx-tip { position: absolute; left: 55%; top: 22%; z-index: 2; display: inline-flex; align-items: center; gap: 6px; background: rgba(2,12,52,0.92); border: 1px solid rgba(248,255,118,0.4); border-radius: 9px; padding: 6px 10px; font-size: 10.5px; font-weight: 700; color: #fff; white-space: nowrap; box-shadow: 0 8px 20px rgba(0,0,0,0.35); animation: nvx-tip var(--nvx-t) linear infinite; }
.nvx-tip .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--gelb); box-shadow: 0 0 6px var(--gelb); }

.nvx-steps { display: flex; justify-content: space-between; gap: 8px; margin: 12px 2px 12px; }
.nvx-step { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,0.88); }
.nvx-step i { position: relative; flex-shrink: 0; width: 16px; height: 16px; font-style: normal; }
.nvx-step i::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255,255,255,0.22); border-top-color: #95a5ff; opacity: 0; animation: c2c-spin 0.9s linear infinite; }
.nvx-step i::after { content: '✓'; position: absolute; inset: 0; border-radius: 50%; background: var(--gelb); color: var(--dunkelblau); font-size: 10px; font-weight: 800; line-height: 16px; text-align: center; }
.nvx-s1 { animation: nvx-s1-li var(--nvx-t) linear infinite; }
.nvx-s1 i::before { animation: c2c-spin 0.9s linear infinite, nvx-s1-spin var(--nvx-t) linear infinite; }
.nvx-s1 i::after { animation: nvx-s1-check var(--nvx-t) linear infinite; }
.nvx-s2 { animation: nvx-s2-li var(--nvx-t) linear infinite; }
.nvx-s2 i::before { animation: c2c-spin 0.9s linear infinite, nvx-s2-spin var(--nvx-t) linear infinite; }
.nvx-s2 i::after { animation: nvx-s2-check var(--nvx-t) linear infinite; }
.nvx-s3 { animation: nvx-s3-li var(--nvx-t) linear infinite; }
.nvx-s3 i::before { animation: c2c-spin 0.9s linear infinite, nvx-s3-spin var(--nvx-t) linear infinite; }
.nvx-s3 i::after { animation: nvx-s3-check var(--nvx-t) linear infinite; }

.nvx-card { position: relative; display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,0.06); border: 1px solid var(--linie-w); border-radius: var(--r-400); padding: 12px 13px; animation: nvx-card var(--nvx-t) linear infinite; }
.nvx-thumb { flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px; background: rgba(60,87,225,0.38); color: #fff; display: flex; align-items: center; justify-content: center; }
.nvx-card-info { min-width: 0; flex: 1; }
.nvx-card-title { font-size: 13.5px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nvx-card-meta { font-size: 11.5px; color: rgba(255,255,255,0.55); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nvx-apply { flex-shrink: 0; background: var(--gelb); color: var(--dunkelblau); font-size: 11.5px; font-weight: 800; padding: 8px 13px; border-radius: 100px; animation: nvx-apply var(--nvx-t) linear infinite; }
.nvx-stamp { position: absolute; right: 132px; top: -9px; z-index: 3; background: var(--gelb); color: var(--dunkelblau); font-size: 11px; font-weight: 800; padding: 5px 10px; border-radius: 8px; rotate: -6deg; box-shadow: 0 6px 16px rgba(0,0,0,0.35); animation: nvx-stamp var(--nvx-t) linear infinite; }

.nvx-foot { margin-top: 14px; text-align: center; font-size: 12px; color: rgba(255,255,255,0.55); }
.nvx-foot strong { color: var(--gelb); font-weight: 700; }

@keyframes nvx-cursor {
  0%, 3% { opacity: 0; transform: translate(64px, 52px); }
  6% { opacity: 1; }
  12% { opacity: 1; transform: translate(0, 0); }
  13.5% { transform: translate(0, 0) scale(0.8); }
  15% { opacity: 1; transform: translate(0, 0) scale(1); }
  22%, 100% { opacity: 0; transform: translate(0, 0); }
}
@keyframes nvx-unit {
  0%, 13.5% { fill: rgba(255,255,255,0.10); stroke: rgba(248,255,118,0); filter: drop-shadow(0 0 0 rgba(248,255,118,0)); }
  15.5%, 100% { fill: rgba(248,255,118,0.9); stroke: rgba(248,255,118,1); filter: drop-shadow(0 0 8px rgba(248,255,118,0.7)); }
}
@keyframes nvx-tip {
  0%, 15.5% { opacity: 0; transform: translateY(6px) scale(0.9); }
  17.5%, 100% { opacity: 1; transform: none; }
}
@keyframes nvx-s1-li { 0%, 3% { opacity: 0.35; } 5%, 100% { opacity: 1; } }
@keyframes nvx-s1-spin { 0%, 4.5% { opacity: 0; } 5.5%, 15% { opacity: 1; } 16%, 100% { opacity: 0; } }
@keyframes nvx-s1-check { 0%, 16% { opacity: 0; transform: scale(0.3); } 18.5% { opacity: 1; transform: scale(1.15); } 20%, 100% { opacity: 1; transform: scale(1); } }
@keyframes nvx-s2-li { 0%, 27% { opacity: 0.35; } 29%, 100% { opacity: 1; } }
@keyframes nvx-s2-spin { 0%, 27.5% { opacity: 0; } 28.5%, 44% { opacity: 1; } 45%, 100% { opacity: 0; } }
@keyframes nvx-s2-check { 0%, 44.5% { opacity: 0; transform: scale(0.3); } 47% { opacity: 1; transform: scale(1.15); } 48.5%, 100% { opacity: 1; transform: scale(1); } }
@keyframes nvx-s3-li { 0%, 49% { opacity: 0.35; } 51%, 100% { opacity: 1; } }
@keyframes nvx-s3-spin { 0%, 49.5% { opacity: 0; } 50.5%, 58% { opacity: 1; } 59%, 100% { opacity: 0; } }
@keyframes nvx-s3-check { 0%, 59.5% { opacity: 0; transform: scale(0.3); } 62% { opacity: 1; transform: scale(1.15); } 63.5%, 100% { opacity: 1; transform: scale(1); } }
@keyframes nvx-card { 0%, 16% { opacity: 0.35; } 20%, 100% { opacity: 1; } }
@keyframes nvx-apply {
  0%, 52% { transform: none; box-shadow: 0 0 0 0 rgba(248,255,118,0); }
  53.5% { transform: scale(0.92); box-shadow: 0 0 0 0 rgba(248,255,118,0.55); }
  56% { transform: none; }
  60%, 100% { transform: none; box-shadow: 0 0 0 14px rgba(248,255,118,0); }
}
@keyframes nvx-stamp {
  0%, 63% { opacity: 0; transform: scale(1.6); }
  67% { opacity: 1; transform: scale(0.95); }
  69%, 100% { opacity: 1; transform: scale(1); }
}
@media (max-width: 480px) {
  .nvx { padding: 14px; }
  .nvx-tag { display: none; }
  .nvx-step { font-size: 10.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .nvx, .nvx *, .nvx *::before, .nvx *::after { animation: none !important; }
  .nvx-cursor { display: none; }
}

/* ---------- LIVING CONFIGURATOR ANIMATION (Living Configurator hero) ----------
   Pure CSS loop (~12s), modelled on the real configurator UI: a buyer
   picks a new worktop/backsplash material, the kitchen render updates
   in realtime, the room is marked as done and the configuration is
   sent. Default (animation-less) state = completed, so
   prefers-reduced-motion shows the end result. */
.lcx { --lcx-t: 12s; position: relative; z-index: 1; max-width: 440px; margin: 0 auto; background: rgba(255,255,255,0.05); border: 1px solid var(--linie-w); border-radius: var(--r-600); padding: 20px; backdrop-filter: blur(12px); box-shadow: var(--elev-500); }
.lcx-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.lcx-live { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gelb); }
.lcx-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gelb); box-shadow: 0 0 8px var(--gelb); animation: c2c-blink 2s ease-in-out infinite; }
.lcx-tag { font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.45); letter-spacing: 0.04em; white-space: nowrap; }

.lcx-scene { display: block; width: 100%; height: auto; border-radius: 12px; }
.lcx-mat { animation: lcx-mat var(--lcx-t) linear infinite; }
svg .lcx-mat { fill: #33333e; }

.lcx-mats { margin-top: 12px; }
.lcx-mats-label { display: flex; justify-content: space-between; align-items: center; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-bottom: 8px; }
.lcx-incl { font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: none; color: #7de89b; background: rgba(96,216,133,0.14); border: 1px solid rgba(96,216,133,0.32); border-radius: 100px; padding: 3px 9px; }
.lcx-sw-row { position: relative; display: flex; justify-content: space-between; gap: 8px; }
.lcx-sw { display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 9.5px; font-weight: 600; color: rgba(255,255,255,0.65); }
.lcx-sw i { width: 32px; height: 32px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.25); }
.lcx-sw1 i { animation: lcx-ring1 var(--lcx-t) linear infinite; }
.lcx-sw3 { position: relative; }
.lcx-sw3 i { box-shadow: 0 0 0 2px #7b8cff, 0 0 12px rgba(96,123,255,0.5); animation: lcx-ring3 var(--lcx-t) linear infinite; }
/* anchored inside the Kelya swatch so the click lands on the tile at any width */
.lcx-cursor { position: absolute; left: 13px; top: 11px; z-index: 3; opacity: 0; transform-origin: 4px 4px; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.45)); animation: lcx-cursor var(--lcx-t) ease-in-out infinite; }

.lcx-done { display: flex; align-items: center; gap: 9px; margin-top: 12px; padding: 9px 12px; border: 1px solid var(--linie-w); border-radius: 11px; font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,0.88); animation: lcx-done-li var(--lcx-t) linear infinite; }
.lcx-done i { position: relative; flex-shrink: 0; width: 16px; height: 16px; font-style: normal; }
.lcx-done i::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255,255,255,0.22); border-top-color: #95a5ff; opacity: 0; animation: c2c-spin 0.9s linear infinite, lcx-done-spin var(--lcx-t) linear infinite; }
.lcx-done i::after { content: '✓'; position: absolute; inset: 0; border-radius: 50%; background: var(--gelb); color: var(--dunkelblau); font-size: 10px; font-weight: 800; line-height: 16px; text-align: center; animation: lcx-done-check var(--lcx-t) linear infinite; }

.lcx-sum { position: relative; display: flex; align-items: center; gap: 12px; margin-top: 10px; background: rgba(255,255,255,0.06); border: 1px solid var(--linie-w); border-radius: var(--r-400); padding: 12px 13px; }
.lcx-sum-info { min-width: 0; flex: 1; }
.lcx-sum-extras { font-size: 10.5px; color: rgba(255,255,255,0.55); }
.lcx-sum-total { font-size: 12px; color: rgba(255,255,255,0.75); margin-top: 2px; white-space: nowrap; }
.lcx-sum-total strong { font-size: 13.5px; font-weight: 800; color: #fff; margin-left: 6px; }
.lcx-send { flex-shrink: 0; background: var(--gelb); color: var(--dunkelblau); font-size: 11px; font-weight: 800; padding: 8px 12px; border-radius: 100px; white-space: nowrap; animation: lcx-send var(--lcx-t) linear infinite; }
.lcx-stamp { position: absolute; right: 150px; top: -9px; z-index: 3; background: var(--gelb); color: var(--dunkelblau); font-size: 11px; font-weight: 800; padding: 5px 10px; border-radius: 8px; rotate: -6deg; box-shadow: 0 6px 16px rgba(0,0,0,0.35); animation: lcx-stamp var(--lcx-t) linear infinite; }

.lcx-foot { margin-top: 14px; text-align: center; font-size: 12px; color: rgba(255,255,255,0.55); }
.lcx-foot strong { color: var(--gelb); font-weight: 700; }

@keyframes lcx-cursor {
  0%, 3% { opacity: 0; transform: translate(84px, 64px); }
  6% { opacity: 1; }
  12% { opacity: 1; transform: translate(0, 0); }
  13.5% { transform: translate(0, 0) scale(0.8); }
  15% { opacity: 1; transform: translate(0, 0) scale(1); }
  22%, 100% { opacity: 0; transform: translate(0, 0); }
}
@keyframes lcx-mat { 0%, 15% { fill: #e9e4da; } 20%, 100% { fill: #33333e; } }
@keyframes lcx-ring1 {
  0%, 14% { box-shadow: 0 0 0 2px #7b8cff, 0 0 12px rgba(96,123,255,0.5); }
  15.5%, 100% { box-shadow: 0 0 0 2px rgba(123,140,255,0), 0 0 0 rgba(96,123,255,0); }
}
@keyframes lcx-ring3 {
  0%, 14% { box-shadow: 0 0 0 2px rgba(123,140,255,0), 0 0 0 rgba(96,123,255,0); }
  15.5%, 100% { box-shadow: 0 0 0 2px #7b8cff, 0 0 12px rgba(96,123,255,0.5); }
}
@keyframes lcx-done-li { 0%, 28% { opacity: 0.35; } 30%, 100% { opacity: 1; } }
@keyframes lcx-done-spin { 0%, 29.5% { opacity: 0; } 30.5%, 40% { opacity: 1; } 41%, 100% { opacity: 0; } }
@keyframes lcx-done-check { 0%, 41.5% { opacity: 0; transform: scale(0.3); } 44% { opacity: 1; transform: scale(1.15); } 45.5%, 100% { opacity: 1; transform: scale(1); } }
@keyframes lcx-send {
  0%, 50% { transform: none; box-shadow: 0 0 0 0 rgba(248,255,118,0); }
  51.5% { transform: scale(0.92); box-shadow: 0 0 0 0 rgba(248,255,118,0.55); }
  54% { transform: none; }
  58%, 100% { transform: none; box-shadow: 0 0 0 14px rgba(248,255,118,0); }
}
@keyframes lcx-stamp {
  0%, 61% { opacity: 0; transform: scale(1.6); }
  65% { opacity: 1; transform: scale(0.95); }
  67%, 100% { opacity: 1; transform: scale(1); }
}
@media (max-width: 480px) {
  .lcx { padding: 14px; }
  .lcx-tag { display: none; }
  .lcx-sw { font-size: 8.5px; }
  .lcx-stamp { right: 120px; }
}
@media (prefers-reduced-motion: reduce) {
  .lcx, .lcx *, .lcx *::before, .lcx *::after { animation: none !important; }
  .lcx-cursor { display: none; }
}

/* ---------- COMMERCIAL FLOOR-PLAN ANIMATION (Commercial Configurator hero) ----------
   Pure CSS loop (~12s), deliberately different vocabulary from the
   other hero animations: the floor plan itself is manipulated. The
   wall between two spaces dissolves (kombinieren), a partition with a
   drag handle slides and the m² labels update (zuschneiden), then the
   tailored space is let. Geometry (rect width) and transforms animate;
   no cursor, no checklist. Default (animation-less) state = the
   re-cut, let floor, so prefers-reduced-motion shows the end result. */
.ccx { --ccx-t: 12s; position: relative; z-index: 1; max-width: 440px; margin: 0 auto; background: rgba(255,255,255,0.05); border: 1px solid var(--linie-w); border-radius: var(--r-600); padding: 20px; backdrop-filter: blur(12px); box-shadow: var(--elev-500); }
.ccx-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.ccx-live { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gelb); }
.ccx-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gelb); box-shadow: 0 0 8px var(--gelb); animation: c2c-blink 2s ease-in-out infinite; }
.ccx-tag { font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.45); letter-spacing: 0.04em; white-space: nowrap; }

.ccx-plan { display: block; width: 100%; height: auto; }
.ccx-plan text { font-family: inherit; }
.ccx-title { font-size: 7px; font-weight: 600; fill: rgba(255,255,255,0.55); text-anchor: middle; }
.ccx-sqm { font-size: 8.5px; font-weight: 800; fill: #fff; text-anchor: middle; }

.ccx-wall1 { stroke: rgba(248,255,118,0.9); stroke-width: 2; opacity: 0; animation: ccx-wall1 var(--ccx-t) linear infinite; }
.ccx-merge { fill: rgba(248,255,118,0.08); stroke: rgba(248,255,118,0.55); stroke-width: 1.5; width: 158px; animation: ccx-merge var(--ccx-t) linear infinite; }
.ccx-lbl-ab { opacity: 0; animation: ccx-lbl-ab var(--ccx-t) linear infinite; }
.ccx-lbl-r { opacity: 1; animation: ccx-lbl-r var(--ccx-t) linear infinite; }
.ccx-r1 { opacity: 0; animation: ccx-r1 var(--ccx-t) linear infinite; }
.ccx-r2 { opacity: 1; animation: ccx-r2 var(--ccx-t) linear infinite; }
.ccx-c1 { opacity: 0; animation: ccx-c1 var(--ccx-t) linear infinite; }
.ccx-c2 { opacity: 1; animation: ccx-c2 var(--ccx-t) linear infinite; }
.ccx-wall2 { transform: translateX(20px); animation: ccx-slide var(--ccx-t) linear infinite; }
.ccx-handle { opacity: 0; animation: ccx-handle var(--ccx-t) linear infinite; }
.ccx-dim { opacity: 1; animation: ccx-dim var(--ccx-t) linear infinite; }
.ccx-dimline { width: 158px; animation: ccx-dimline var(--ccx-t) linear infinite; }
.ccx-chip { opacity: 1; transform-box: fill-box; transform-origin: center; animation: ccx-chip var(--ccx-t) linear infinite; }

.ccx-foot { margin-top: 12px; text-align: center; font-size: 12px; color: rgba(255,255,255,0.55); }
.ccx-foot strong { color: var(--gelb); font-weight: 700; }

@keyframes ccx-wall1 {
  0%, 11% { stroke: rgba(255,255,255,0.45); opacity: 1; }
  13%, 16% { stroke: rgba(248,255,118,0.9); opacity: 1; }
  21%, 100% { stroke: rgba(248,255,118,0.9); opacity: 0; }
}
@keyframes ccx-merge {
  0%, 17% { opacity: 0; width: 138px; }
  22%, 44% { opacity: 1; width: 138px; }
  54%, 100% { opacity: 1; width: 158px; }
}
@keyframes ccx-lbl-ab { 0%, 16% { opacity: 1; } 20%, 100% { opacity: 0; } }
@keyframes ccx-lbl-r { 0%, 21% { opacity: 0; } 25%, 100% { opacity: 1; } }
@keyframes ccx-r1 { 0%, 21% { opacity: 0; } 25%, 52% { opacity: 1; } 55%, 100% { opacity: 0; } }
@keyframes ccx-r2 { 0%, 53% { opacity: 0; } 57%, 100% { opacity: 1; } }
@keyframes ccx-c1 { 0%, 52% { opacity: 1; } 55%, 100% { opacity: 0; } }
@keyframes ccx-c2 { 0%, 53% { opacity: 0; } 57%, 100% { opacity: 1; } }
@keyframes ccx-slide { 0%, 44% { transform: translateX(0); } 54%, 100% { transform: translateX(20px); } }
@keyframes ccx-handle {
  0%, 38% { opacity: 0; }
  41%, 56% { opacity: 1; }
  61%, 100% { opacity: 0; }
}
@keyframes ccx-dim {
  0%, 23% { opacity: 0; }
  27%, 100% { opacity: 1; }
}
@keyframes ccx-dimline { 0%, 44% { width: 138px; } 54%, 100% { width: 158px; } }
@keyframes ccx-chip {
  0%, 66% { opacity: 0; transform: scale(1.5); }
  70% { opacity: 1; transform: scale(0.95); }
  72%, 100% { opacity: 1; transform: scale(1); }
}
@media (max-width: 480px) {
  .ccx { padding: 14px; }
  .ccx-tag { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ccx, .ccx *, .ccx *::before, .ccx *::after { animation: none !important; }
}

/* ---------- PORTFOLIO LEAD-MATCHING ANIMATION (Portfolio Overview hero) ----------
   Pure CSS loop (~12s), its own vocabulary again: a mini portfolio
   dashboard whose occupancy bars fill on load. An application hits an
   already-let unit — the "Absage" is struck through instead of sent,
   the applicant is promoted a suitable alternative further down the
   portfolio, occupancy ticks 64 → 68 % and the chip flips to
   "Neues Angebot ✓". Default (animation-less) state = the promoted
   offer on the target project, so prefers-reduced-motion shows the
   end result. */
.pox { --pox-t: 12s; position: relative; z-index: 1; max-width: 440px; margin: 0 auto; background: rgba(255,255,255,0.05); border: 1px solid var(--linie-w); border-radius: var(--r-600); padding: 20px; backdrop-filter: blur(12px); box-shadow: var(--elev-500); }
.pox-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.pox-live { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gelb); }
.pox-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gelb); box-shadow: 0 0 8px var(--gelb); animation: c2c-blink 2s ease-in-out infinite; }
.pox-tag { font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.45); letter-spacing: 0.04em; white-space: nowrap; }

.pox-rows { position: relative; display: flex; flex-direction: column; gap: 10px; }
.pox-row { position: relative; display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,0.06); border: 1px solid var(--linie-w); border-radius: var(--r-400); padding: 11px 13px; }
.pox-row-info { min-width: 0; width: 118px; flex-shrink: 0; }
.pox-row-name { font-size: 13px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pox-row-loc { font-size: 10.5px; color: rgba(255,255,255,0.5); margin-top: 2px; white-space: nowrap; }
.pox-bar { flex: 1; height: 6px; border-radius: 100px; background: rgba(255,255,255,0.12); overflow: hidden; }
.pox-fill { display: block; height: 100%; border-radius: 100px; background: linear-gradient(90deg, #3c57e1, #7b8cff); }
.pox-f1 { width: 96%; animation: pox-f1 var(--pox-t) linear infinite; }
.pox-f2 { width: 78%; animation: pox-f2 var(--pox-t) linear infinite; }
.pox-f3 { width: 68%; animation: pox-f3 var(--pox-t) linear infinite; }
.pox-pct { flex-shrink: 0; width: 34px; text-align: right; font-size: 11.5px; font-weight: 800; color: #fff; }
.pox-pct-swap { position: relative; }
.pox-pct-swap span { position: absolute; right: 0; top: 50%; translate: 0 -50%; }
.pox-p1 { opacity: 0; animation: pox-p1 var(--pox-t) linear infinite; }
.pox-p2 { opacity: 1; animation: pox-p2 var(--pox-t) linear infinite; }
.pox-full { position: absolute; top: -8px; right: 10px; z-index: 2; background: rgba(2,12,52,0.95); border: 1px solid rgba(255,255,255,0.3); border-radius: 100px; padding: 3px 9px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; color: rgba(255,255,255,0.8); opacity: 0; animation: pox-full var(--pox-t) linear infinite; }
.pox-row3 { border-color: rgba(248,255,118,0.5); background: rgba(248,255,118,0.05); animation: pox-row3 var(--pox-t) linear infinite; }

/* the lead: a floating chip dragged from the full project to the match */
.pox-chip { position: absolute; left: 50%; top: 16px; z-index: 3; display: grid; place-items: center; padding: 6px 12px; border-radius: 100px; font-size: 10.5px; font-weight: 800; white-space: nowrap; background: var(--gelb); border: 1px solid rgba(248,255,118,0.5); box-shadow: 0 10px 24px rgba(0,0,0,0.4); transform: translate(-50%, 128px); animation: pox-chip var(--pox-t) ease-in-out infinite; }
.pox-chip span { grid-area: 1 / 1; }
.pox-chip-lead { color: #fff; opacity: 0; animation: pox-chip-lead var(--pox-t) linear infinite; }
.pox-chip-decl { position: relative; color: rgba(255,255,255,0.85); opacity: 0; animation: pox-chip-decl var(--pox-t) linear infinite; }
.pox-chip-decl::after { content: ''; position: absolute; left: 0; top: 50%; translate: 0 -50%; height: 2px; width: 100%; border-radius: 2px; background: var(--gelb); box-shadow: 0 0 6px rgba(248,255,118,0.7); animation: pox-strike var(--pox-t) linear infinite; }
.pox-chip-match { color: var(--dunkelblau); opacity: 1; animation: pox-chip-match var(--pox-t) linear infinite; }

.pox-foot { margin-top: 14px; text-align: center; font-size: 12px; color: rgba(255,255,255,0.55); }
.pox-foot strong { color: var(--gelb); font-weight: 700; }

@keyframes pox-f1 { 0%, 2% { width: 0; } 9%, 100% { width: 96%; } }
@keyframes pox-f2 { 0%, 3% { width: 0; } 10%, 100% { width: 78%; } }
@keyframes pox-f3 { 0%, 4% { width: 0; } 11%, 40% { width: 64%; } 45%, 100% { width: 68%; } }
@keyframes pox-p1 { 0%, 2% { opacity: 0; } 4%, 41% { opacity: 1; } 44%, 100% { opacity: 0; } }
@keyframes pox-p2 { 0%, 42% { opacity: 0; } 45%, 100% { opacity: 1; } }
@keyframes pox-full {
  0%, 13.5% { opacity: 0; transform: scale(0.6); }
  16%, 30% { opacity: 1; transform: scale(1); }
  34%, 100% { opacity: 0; transform: scale(1); }
}
@keyframes pox-row3 {
  0%, 36% { border-color: var(--linie-w); background: rgba(255,255,255,0.06); }
  39%, 100% { border-color: rgba(248,255,118,0.5); background: rgba(248,255,118,0.05); }
}
@keyframes pox-chip {
  0%, 9% { opacity: 0; transform: translate(-50%, 0) scale(0.6); background: rgba(2,12,52,0.95); border-color: rgba(255,255,255,0.3); }
  11% { opacity: 1; transform: translate(-50%, 0) scale(1.08); background: rgba(2,12,52,0.95); border-color: rgba(255,255,255,0.3); }
  12.5%, 27% { opacity: 1; transform: translate(-50%, 0) scale(1); background: rgba(2,12,52,0.95); border-color: rgba(255,255,255,0.3); }
  31.5% { transform: translate(-50%, 64px) rotate(-4deg); }
  36%, 37.5% { opacity: 1; transform: translate(-50%, 128px); background: rgba(2,12,52,0.95); border-color: rgba(255,255,255,0.3); }
  39.5%, 100% { opacity: 1; transform: translate(-50%, 128px); background: var(--gelb); border-color: rgba(248,255,118,0.5); }
}
@keyframes pox-chip-lead { 0%, 18% { opacity: 1; } 20%, 100% { opacity: 0; } }
@keyframes pox-chip-decl { 0%, 19% { opacity: 0; } 21%, 36.5% { opacity: 1; } 38.5%, 100% { opacity: 0; } }
@keyframes pox-strike { 0%, 22.5% { width: 0; } 26%, 100% { width: 100%; } }
@keyframes pox-chip-match { 0%, 37.5% { opacity: 0; } 39.5%, 100% { opacity: 1; } }
@media (max-width: 480px) {
  .pox { padding: 14px; }
  .pox-tag { display: none; }
  .pox-row-info { width: 104px; }
}
@media (prefers-reduced-motion: reduce) {
  .pox, .pox *, .pox *::before, .pox *::after { animation: none !important; }
}

/* ---------- REALTIME TOUR ANIMATION (Realtime Tour hero) ----------
   Pure CSS loop (~12s) with yet another vocabulary: a first-person
   tour viewport whose camera drifts continuously (parallax between
   room and window view), while guests from Zürich and Dubai join the
   live session, hearts float up and the dwell time becomes an
   interest signal. Presence instead of process — nothing is clicked.
   Default (animation-less) state = full session, so
   prefers-reduced-motion shows everyone joined. */
.rtx { --rtx-t: 12s; position: relative; z-index: 1; max-width: 440px; margin: 0 auto; background: rgba(255,255,255,0.05); border: 1px solid var(--linie-w); border-radius: var(--r-600); padding: 20px; backdrop-filter: blur(12px); box-shadow: var(--elev-500); }
.rtx-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.rtx-live { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gelb); }
.rtx-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gelb); box-shadow: 0 0 8px var(--gelb); animation: c2c-blink 2s ease-in-out infinite; }
.rtx-tag { font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.45); letter-spacing: 0.04em; white-space: nowrap; }

.rtx-stage { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--linie-w); }
.rtx-view { display: block; width: 100%; height: auto; }
.rtx-room { animation: rtx-pan var(--rtx-t) ease-in-out infinite; }
.rtx-sky { animation: rtx-sky var(--rtx-t) ease-in-out infinite; }
.rtx-way { transform-box: fill-box; transform-origin: center; animation: rtx-way 2.4s ease-out infinite; }

.rtx-pill { position: absolute; display: inline-flex; align-items: center; gap: 6px; background: rgba(2,12,52,0.85); border: 1px solid rgba(255,255,255,0.22); border-radius: 100px; padding: 5px 10px; font-size: 10px; font-weight: 700; color: #fff; white-space: nowrap; }
.rtx-viewers { top: 10px; left: 10px; }
.rtx-viewers .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--gelb); box-shadow: 0 0 6px var(--gelb); animation: c2c-blink 2s ease-in-out infinite; }
.rtx-stack { display: grid; }
.rtx-stack span { grid-area: 1 / 1; }
.rtx-v1 { opacity: 0; animation: rtx-v1 var(--rtx-t) linear infinite; }
.rtx-v2 { opacity: 0; animation: rtx-v2 var(--rtx-t) linear infinite; }
.rtx-v3 { opacity: 1; animation: rtx-v3 var(--rtx-t) linear infinite; }
.rtx-int { bottom: 10px; left: 10px; color: var(--gelb); opacity: 1; animation: rtx-int var(--rtx-t) linear infinite; }

.rtx-heart { position: absolute; right: 18px; bottom: 14px; font-size: 13px; color: var(--gelb); text-shadow: 0 0 8px rgba(248,255,118,0.6); opacity: 0; animation: rtx-heart var(--rtx-t) linear infinite; }
.rtx-heart2 { right: 32px; animation-delay: 0.7s; }
.rtx-heart3 { right: 25px; animation-delay: 1.3s; }

.rtx-people { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.rtx-person { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,0.07); border: 1px solid var(--linie-w); border-radius: 100px; padding: 5px 11px 5px 6px; font-size: 10.5px; font-weight: 600; color: rgba(255,255,255,0.85); white-space: nowrap; }
.rtx-ava { width: 19px; height: 19px; border-radius: 50%; background: linear-gradient(135deg, var(--blau), #2438a8); color: #fff; font-size: 8px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.rtx-p2 { animation: rtx-p2 var(--rtx-t) linear infinite; }
.rtx-p3 { animation: rtx-p3 var(--rtx-t) linear infinite; }
.rtx-p2 .rtx-ava, .rtx-p3 .rtx-ava { background: linear-gradient(135deg, #5c73ff, var(--blau)); }

.rtx-foot { margin-top: 14px; text-align: center; font-size: 12px; color: rgba(255,255,255,0.55); }
.rtx-foot strong { color: var(--gelb); font-weight: 700; }

@keyframes rtx-pan { 0%, 100% { transform: translateX(-5px); } 50% { transform: translateX(5px); } }
@keyframes rtx-sky { 0%, 100% { transform: translateX(3px); } 50% { transform: translateX(-3px); } }
@keyframes rtx-way {
  0% { transform: scale(0.6); opacity: 0.9; }
  70%, 100% { transform: scale(2); opacity: 0; }
}
@keyframes rtx-v1 { 0%, 18% { opacity: 1; } 20%, 100% { opacity: 0; } }
@keyframes rtx-v2 { 0%, 19% { opacity: 0; } 21%, 46% { opacity: 1; } 48%, 100% { opacity: 0; } }
@keyframes rtx-v3 { 0%, 47% { opacity: 0; } 49%, 100% { opacity: 1; } }
@keyframes rtx-p2 {
  0%, 19% { opacity: 0; transform: translateY(6px) scale(0.8); }
  22%, 100% { opacity: 1; transform: none; }
}
@keyframes rtx-p3 {
  0%, 47% { opacity: 0; transform: translateY(6px) scale(0.8); }
  50%, 100% { opacity: 1; transform: none; }
}
@keyframes rtx-heart {
  0%, 56% { opacity: 0; transform: translateY(0) scale(0.6); }
  59% { opacity: 1; transform: translateY(-6px) scale(1.1); }
  66%, 100% { opacity: 0; transform: translateY(-30px) scale(0.9); }
}
@keyframes rtx-int {
  0%, 71% { opacity: 0; transform: translateY(4px); }
  75%, 100% { opacity: 1; transform: none; }
}
@media (max-width: 480px) {
  .rtx { padding: 14px; }
  .rtx-tag { display: none; }
  .rtx-person { font-size: 9.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .rtx, .rtx *, .rtx *::before, .rtx *::after { animation: none !important; }
  .rtx-heart { display: none; }
}

/* ---------- TWO COLUMN ---------- */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
@media (max-width: 880px) { .two-col { grid-template-columns: 1fr; gap: 40px; } }
.two-col p { font-size: 17px; line-height: 1.65; color: var(--text-muted); margin-bottom: 16px; }

/* ---------- PROD-BLOCK (Feature-Row aus BeyonityHELLO-Prototyp) ---------- */
.prod-block { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
@media (max-width: 880px) { .prod-block { grid-template-columns: 1fr; gap: 36px; } }
.prod-block.flip .prod-text { order: 2; }
@media (max-width: 880px) { .prod-block.flip .prod-text { order: 0; } }
.prod-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blau); margin-bottom: 12px; }
.prod-text h2 { font-size: clamp(26px,3.4vw,40px); font-weight: 800; letter-spacing: -0.025em; line-height: 1.1; margin-bottom: 16px; }
.prod-text p { font-size: 16px; color: var(--text-muted); line-height: 1.7; margin-bottom: 22px; }
.prod-list { list-style: none; display: flex; flex-direction: column; gap: 12px; padding: 0; margin: 0; }
.prod-list li { display: flex; gap: 12px; font-size: 15px; color: var(--dunkelblau); align-items: flex-start; }
.prod-list li svg { flex-shrink: 0; margin-top: 3px; }
.prod-visual { background: var(--dunkelblau); border-radius: 24px; padding: 48px; min-height: 320px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px; position: relative; overflow: hidden; }
.prod-visual::before { content:''; position:absolute; inset:0; background: radial-gradient(circle at 75% 20%, rgba(60,87,225,0.42) 0%, transparent 58%); }
.prod-visual.alt { background: var(--blau); }
.prod-visual.gelb { background: var(--gelb); }
.prod-visual > * { position: relative; z-index: 2; }
.prod-glyph { width: 96px; height: 96px; border-radius: 22px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.20); display: flex; align-items: center; justify-content: center; color: #fff; }
.prod-visual.gelb .prod-glyph { background: rgba(0,26,100,0.10); border-color: rgba(0,26,100,0.20); color: var(--dunkelblau); }
.prod-glyph svg { width: 46px; height: 46px; }
.prod-badge { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; padding: 7px 16px; border-radius: 100px; background: var(--gelb); color: var(--dunkelblau); }
.prod-visual.gelb .prod-badge { background: var(--dunkelblau); color: #fff; }
.prod-visual.has-media { padding: 0; min-height: 0; aspect-ratio: 16 / 9; align-items: stretch; }
.prod-visual.has-media::before { display: none; }
.prod-visual.has-media .prod-badge { position: absolute; top: 18px; left: 18px; z-index: 3; }
.prod-visual.has-media video, .prod-visual.has-media img { position: absolute; inset: -2px; z-index: 1; width: calc(100% + 4px); height: calc(100% + 4px); max-width: none; max-height: none; object-fit: cover; display: block; }
/* Ist ein <video> direktes Kind, uebersteuert es das 16:9 des Rahmens.
   Das Bild (falls vorhanden) behaelt inset:-2px als Subpixel-Deckel;
   Video im Fluss hat diese Fuge nicht. */
.prod-visual.has-media:has(> video) { aspect-ratio: auto; }
.prod-visual.has-media:has(> video) > video {
  position: static; inset: auto;
  width: 100%; height: auto;
  max-width: none; max-height: none;
  object-fit: initial;
}
/* Kein Zusatz-Zoom mehr: er stammt vom alten 16:10-Navigator-Video und
   schnitt beim 16:9-Film weitere 4 % weg (16.09.2026). */
.two-col p:last-child { margin-bottom: 0; }
.two-col p strong { color: var(--dunkelblau); font-weight: 700; }

/* ---------- STAT BANDS ---------- */
.stat-band { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 44px; }
@media (max-width: 880px) { .stat-band { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .stat-band { grid-template-columns: 1fr; } }
.stat-cell { padding: 32px 24px; border-radius: 18px; background: var(--grau); border: 1px solid var(--linie); }
.stat-cell .num { font-size: clamp(34px, 4vw, 50px); font-weight: 800; color: var(--blau); letter-spacing: -0.04em; line-height: 1; margin-bottom: 8px; }
.stat-cell .lbl { font-size: 13px; color: var(--text-muted); line-height: 1.55; }
.stat-cell.dark { background: var(--dunkelblau); border-color: var(--dunkelblau); color: var(--weiss); }
.stat-cell.dark .num { color: var(--gelb); }
.stat-cell.dark .lbl { color: rgba(255,255,255,0.62); }

/* ---------- PRODUCT / FEATURE CARDS GRID ---------- */
.card-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 44px; }
@media (max-width: 960px) { .card-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .card-grid-3 { grid-template-columns: 1fr; } }
.card-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-top: 44px; }
@media (max-width: 760px) { .card-grid-2 { grid-template-columns: 1fr; } }

/* Der Ruhezustand war unsichtbar: graue Karte auf grauem Band ergab 1.00:1,
   der Rand war transparent, und Kontur bekam die Karte erst beim Hover — auf
   Touch also nie. Auf hellem Grund ist mit einer Füllung kein nennenswerter
   Kontrast zu holen (weiss auf #f7f7f7 sind 1.06:1); die Arbeit machen die
   Kante und der weiche Schatten. Auf weissen Sections bleibt die Karte grau,
   damit dort wenigstens die Fläche noch einen Unterschied macht. */
.product-card { background: var(--weiss); border: 1px solid var(--linie); box-shadow: var(--elev-100); border-radius: 20px; padding: 40px 32px; transition: all 0.3s ease; display: flex; flex-direction: column; }
.bg-weiss .product-card { background: var(--grau); }
.product-card:hover { background: var(--weiss); border-color: rgba(60,87,225,0.34); box-shadow: var(--elev-400); transform: translateY(-4px); }
.product-icon { display: flex; align-items: center; color: var(--blau); margin-bottom: 20px; }
.product-icon svg { width: 30px; height: 30px; stroke-width: 1.6; }
.product-card .tag { font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blau); margin-bottom: 10px; display: block; }
.product-card h3 { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; color: var(--dunkelblau); margin-bottom: 12px; }
.product-card p { font-size: 15px; color: var(--text-muted); line-height: 1.65; margin-bottom: 18px; }
.product-card .text-link { margin-top: auto; }
.product-card.dark { background: var(--dunkelblau); }
.product-card.dark:hover { background: var(--dunkelblau); }
.product-card.dark h3 { color: var(--weiss); }
.product-card.dark p { color: rgba(255,255,255,0.66); }
.product-card.dark .tag { color: var(--gelb); }
.product-card.dark .product-icon { color: var(--gelb); }
.product-card.dark .text-link { color: var(--gelb); }

/* ---------- CARDS ON A COLOURED BAND ----------
   Vorher trugen diese Karten eine Weissfüllung von 6%. Gemessen sind das
   1.12:1 gegen das Blau und 1.16:1 gegen das Dunkelblau — auf vielen Panels
   und bei Tageslicht schlicht nicht da. Auch die kräftigste noch ansehnliche
   Füllung bleibt unter 1.6:1, deshalb trägt hier die Kante:
     auf Blau       Fläche 1.56:1 · Kante 1.80:1
     auf Dunkelblau Fläche 1.30:1 · Kante 2.53:1
   Ein Rand wird besser gesehen als eine Fläche, weil das Auge lokalen
   Kontrast an Kanten auswertet und nicht Helligkeit über Flächen. */
.product-card.on-blue { background: rgba(0,26,100,0.42); border: 1px solid rgba(255,255,255,0.30); box-shadow: none; }
.product-card.on-navy { background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.30); box-shadow: none; }

/* ---------- NUMBERED PILLAR CARDS ---------- */
.pillar-card { padding: 44px 32px; background: var(--grau); border-radius: 20px; border: 1px solid transparent; transition: all 0.3s ease; }
.pillar-card:hover { background: var(--weiss); border-color: var(--linie); box-shadow: var(--shadow-btn); transform: translateY(-4px); }
.pillar-number { font-size: 68px; font-weight: 800; color: var(--blau); opacity: 0.12; line-height: 1; letter-spacing: -0.04em; margin-bottom: 16px; }
/* small numbered-step marker (e.g. "01 / 02 / 03" leading a process card) — full opacity, unlike .pillar-number's decorative background numeral */
.step-number { font-size: 13px; font-weight: 800; color: var(--blau); letter-spacing: 0.1em; margin-bottom: 16px; }
.pillar-card h3 { font-size: 21px; font-weight: 700; margin-bottom: 14px; letter-spacing: -0.02em; color: var(--dunkelblau); }
.pillar-card p { font-size: 15px; color: var(--text-muted); line-height: 1.65; }

/* ---------- TESTIMONIALS ---------- */
.testimonials { background: var(--dunkelblau); color: var(--weiss); position: relative; overflow: hidden; }
.testimonials::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 85% 15%, rgba(60,87,225,0.28) 0%, transparent 50%); pointer-events: none; }
.testimonials .container { position: relative; z-index: 2; }
.testimonials .section-title { color: var(--weiss); }
.testi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 60px; }
@media (max-width: 820px) { .testi-grid { grid-template-columns: 1fr; } }
.testi-card { background: rgba(255,255,255,0.05); border: 1px solid var(--linie-w); border-radius: 20px; padding: 36px 32px; transition: background 0.2s ease, transform 0.2s ease; }
.testi-card:hover { background: rgba(255,255,255,0.09); transform: translateY(-3px); }
.testi-card.feature { grid-column: span 2; background: var(--blau); border-color: var(--blau); }
@media (max-width: 820px) { .testi-card.feature { grid-column: span 1; } }
.testi-stars { color: var(--gelb); font-size: 15px; letter-spacing: 3px; margin-bottom: 18px; }
.testi-quote { font-size: 17px; line-height: 1.6; color: rgba(255,255,255,0.92); font-weight: 500; margin-bottom: 24px; }
.testi-card.feature .testi-quote { font-size: clamp(20px, 2.4vw, 28px); font-weight: 700; letter-spacing: -0.015em; color: var(--weiss); }
.testi-person { display: flex; align-items: center; gap: 14px; }
.testi-avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--hellblau); color: var(--blau); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; flex-shrink: 0; overflow: hidden; }
.testi-card.feature .testi-avatar { background: var(--gelb); }
/* portrait placeholder: zoom toward the face so it fills the circle */
.testi-avatar img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.5); transform-origin: 50% 34%; }
.testi-name { font-size: 14px; font-weight: 700; color: var(--weiss); }
.testi-role { font-size: 12px; color: rgba(255,255,255,0.55); margin-top: 2px; }

/* testimonial slider (interactive) */
.testi-slider { margin-top: 56px; position: relative; }
.testi-track { overflow: hidden; }
.testi-slides { display: flex; transition: transform 0.5s cubic-bezier(0.4,0,0.2,1); }
.testi-slide { min-width: 100%; padding: 0 4px; }
.testi-slide blockquote { font-size: clamp(22px, 3vw, 34px); font-weight: 700; line-height: 1.35; letter-spacing: -0.02em; color: var(--weiss); max-width: 24ch; margin: 0 auto; text-align: center; }
.testi-slide .testi-person { justify-content: center; margin-top: 28px; }
.testi-controls { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 36px; }
.testi-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.22); border: none; cursor: pointer; padding: 0; transition: all 0.2s ease; }
.testi-dot.active { background: var(--gelb); width: 26px; border-radius: 100px; }
.testi-arrow { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--linie-w); background: rgba(255,255,255,0.05); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; }
.testi-arrow:hover { background: var(--blau); border-color: var(--blau); }

/* ---------- SOCIAL PROOF BAR ---------- */
.trust-bar { background: var(--dunkelblau); border-bottom: 1px solid rgba(255,255,255,0.08); padding: 20px 0; }
.trust-bar .container { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
.trust-bar-label { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.38); white-space: nowrap; flex-shrink: 0; }
.trust-bar-logos { display: flex; align-items: center; gap: 0; flex-wrap: wrap; flex: 1; }
.trust-bar-logos span { display: inline-flex; align-items: center; padding: 6px 15px; border-right: 1px solid rgba(255,255,255,0.10); }
.trust-bar-logos span:last-child { border-right: none; }
/* placeholder wordmark, knocked out to white for the dark strip */
.trust-bar-logos img { width: 72px; height: auto; filter: brightness(0) invert(1); opacity: 0.78; transition: opacity 0.2s ease; }
.trust-bar-logos span:hover img { opacity: 1; }
@media (max-width: 768px) { .trust-bar .container { gap: 16px; } .trust-bar-logos span { padding: 4px 10px; } .trust-bar-logos img { width: 56px; } }
/* Mobil frisst das nowrap-Label die Breite, sodass je nach Labellänge nur
   ein bis zwei Logos pro Zeile bleiben. Label kommt darum auf eine eigene
   Zeile, die Logos in ein Raster: 8 Logos → 2 Reihen, 9 → 3 Reihen. */
@media (max-width: 600px) {
  /* nowrap ist Pflicht: ein Column-Flex mit wrap und auto-Höhe bläht die
     Grid-Zeilen darunter auf ein Vielfaches ihrer Inhaltshöhe auf. */
  .trust-bar .container { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 12px; }
  .trust-bar-label { white-space: normal; }
  .trust-bar-logos { display: grid; grid-template-columns: repeat(auto-fit, minmax(68px, 1fr)); gap: 4px; flex: none; }
  .trust-bar-logos span { padding: 8px 4px; border-right: none; justify-content: center; }
}

/* ---------- LOGO WALL ---------- */
.logo-wall { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 48px; }
.logo-chip { background: var(--weiss); border: 1px solid var(--linie); border-radius: 100px; padding: 12px 26px; font-size: 14px; font-weight: 800; letter-spacing: 0.02em; color: var(--dunkelblau); transition: all 0.2s ease; }
.logo-chip:hover { border-color: var(--blau); box-shadow: var(--shadow-btn); }

/* ---------- ADD-ON CHIPS (Navigator) ----------
   Same preview mechanism as the feature cards: dwelling opens the modal on a
   fine pointer, tapping opens it everywhere else. Because a chip carries no
   other affordance, the plus icon is always visible rather than appearing on
   hover — on touch there is no hover to reveal it with. */
.addon-wall { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.addon-hint { margin-top: 22px; font-size: 13px; font-weight: 600; color: var(--text-muted); }
.addon-hint-tap { display: none; }
.addon-chip { display: inline-flex; align-items: center; gap: 9px; background: var(--weiss);
  border: 1px solid var(--linie); border-radius: 100px; padding: 11px 22px;
  font-family: inherit; font-size: 14px; font-weight: 800; letter-spacing: 0.02em;
  color: var(--dunkelblau); cursor: pointer; text-align: left;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; }
.addon-chip:hover { border-color: var(--blau); box-shadow: var(--shadow-btn); transform: translateY(-1px); }
.addon-chip:focus-visible { outline: 2px solid var(--blau); outline-offset: 3px; }
/* With a real pointer the chip carries its own affordance — cursor, hover
   lift and the line above the group. The icon only earns its place where
   there is no hover to show any of that. */
.addon-chip-icon { display: none; flex-shrink: 0; color: var(--blau); }
@media (hover: none), (max-width: 760px) {
  .addon-hint-hover { display: none; }
  .addon-hint-tap { display: inline; }
  /* a tap target needs to read as one: filled icon, full width pairs */
  .addon-chip { justify-content: space-between; padding: 13px 16px 13px 20px; }
  .addon-chip-icon { display: block; width: 22px; height: 22px; padding: 5px; color: var(--weiss); background: var(--blau); border-radius: 50%; }
}
/* M14: zwei Chips pro Zeile, nicht einer über die volle Breite */
@media (max-width: 560px) {
  .addon-wall { gap: 8px; }
  .addon-chip { flex: 1 1 calc(50% - 4px); min-width: 0; padding: 11px 12px; font-size: 12.5px; }
  .addon-chip-icon { width: 18px; height: 18px; padding: 4px; }
}
@media (prefers-reduced-motion: reduce) { .addon-chip { transition: none; } }
.logo-cats { display: flex; gap: 28px; justify-content: center; flex-wrap: wrap; margin-top: 32px; }
.logo-cat { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }

/* ---------- CASE STUDY / SUCCESS STORIES ---------- */
.case-feature { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 0; border-radius: 24px; overflow: hidden; border: 1px solid var(--linie); margin-top: 44px; }
@media (max-width: 880px) { .case-feature { grid-template-columns: 1fr; } }
.case-feature-visual { background: var(--dunkelblau); color: var(--weiss); padding: 52px 48px; position: relative; overflow: hidden; }
.case-feature-visual::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 80% 20%, rgba(60,87,225,0.4) 0%, transparent 55%); }
.case-feature-visual > * { position: relative; z-index: 2; }
.case-tag { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; background: rgba(248,255,118,0.14); color: var(--gelb); padding: 6px 14px; border-radius: 100px; margin-bottom: 24px; }
.case-feature-visual h3 { font-size: clamp(24px, 3vw, 36px); font-weight: 800; letter-spacing: -0.025em; line-height: 1.1; margin-bottom: 16px; }
.case-feature-visual p { font-size: 15px; color: rgba(255,255,255,0.7); line-height: 1.65; }
.case-feature-metrics { background: var(--grau); padding: 52px 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-content: center; }
.case-metric .num { font-size: clamp(32px, 4vw, 48px); font-weight: 800; color: var(--blau); letter-spacing: -0.04em; line-height: 1; }
.case-metric .lbl { font-size: 13px; color: var(--text-muted); margin-top: 8px; line-height: 1.5; }
.case-metric .unit { font-size: 0.5em; }

.case-card { background: var(--weiss); border: 1px solid var(--linie); border-radius: 20px; overflow: hidden; transition: all 0.3s ease; display: flex; flex-direction: column; }
.case-card:hover { box-shadow: var(--shadow-card); transform: translateY(-4px); }
/* The header carries a photo of the project. The blue stays underneath as the
   ground the scrim mixes into, so a card whose image has not loaded still
   reads instead of showing a white gap. */
.case-card-top { position: relative; overflow: hidden; min-height: 200px;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: var(--dunkelblau); color: var(--weiss); padding: 28px 28px 24px; }
.case-card-top.alt { background: var(--blau); }
.case-card-img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
  object-fit: cover; transition: transform 0.5s ease; margin: 0; }
/* WordPress' post-featured-image emits <figure><a><img> — die inneren Wrapper
   müssen den Rahmen komplett füllen, damit das Bild wie im Prototyp als
   absoluter Header-Hintergrund wirkt und der Dunkel-Overlay drüberliegt. */
.case-card-img > a { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.case-card-img > a > img,
.case-card-img > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.case-card:hover .case-card-img,
.case-card:hover .case-card-img > a > img { transform: scale(1.045); }
.case-card:nth-child(3n+2) .case-card-img { object-position: 26% 64%; }
.case-card:nth-child(3n+3) .case-card-img { object-position: 74% 36%; }
/* the scrim: light at the top so the photo still reads, heavy where the type sits */
.case-card-top::before { content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(0,26,100,0.22) 0%, rgba(0,26,100,0.62) 48%, rgba(0,26,100,0.90) 100%); }
.case-card-top > *:not(.case-card-img) { position: relative; z-index: 2; }
/* placeholder client-logo badge, top-left, in front of the photo */
/* .case-card-top > *:not(.case-card-img) outweighs a bare .case-card-logo
   on specificity (two class-equivalents vs one), which was overriding
   position:absolute back to relative — scope under .case-card-top to win. */
.case-card-top .case-card-logo { position: absolute; top: 16px; left: 16px; z-index: 3;
  display: flex; align-items: center; width: auto; padding: 8px 10px; border-radius: 8px;
  background: rgba(0,26,100,0.55); border: 1px solid rgba(255,255,255,0.24); backdrop-filter: blur(6px); }
.case-card-logo svg { height: 13px; width: auto; display: block; }
@media (prefers-reduced-motion: reduce) {
  .case-card-img, .case-card:hover .case-card-img { transition: none; transform: none; }
}
.case-card-cat { font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gelb); margin-bottom: 12px; }
.case-card-top h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: var(--weiss); }
/* Prototyp: <h3>Titel</h3> — WP post-title emittiert <h3><a>Titel</a></h3>.
   Anchor-Farbe an den Titel-Kontext binden. */
.case-card-top h3 a { color: inherit; text-decoration: none; }
.case-card-top h3 a:hover { color: var(--gelb); }
.case-card-top .loc { font-size: 12px; color: rgba(255,255,255,0.55); margin-top: 6px; }
.case-card-body { padding: 26px 28px; flex: 1; display: flex; flex-direction: column; text-align: left; }
/* WPs wp-block-post-excerpt wickelt den Auszug in <div><p>. Klassenparität
   erzwingen: gleicher Font/Farbe/Margin wie im Prototyp. */
.case-card-body p,
.case-card-body .wp-block-post-excerpt,
.case-card-body .wp-block-post-excerpt__excerpt { font-size: 14px; color: var(--text-muted); line-height: 1.6; margin-bottom: 20px; text-align: left; }
.case-card-stats { display: flex; gap: 22px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--linie); width: 100%; justify-content: flex-start; }
.case-card-stats .num { font-size: 24px; font-weight: 800; color: var(--blau); letter-spacing: -0.03em; line-height: 1; }
.case-card-stats .lbl { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
/* a case card that links to its own project page */
.case-card-clickable { position: relative; }
.case-card-clickable .case-card-top { padding-right: 62px; }
.case-card-clickable .case-card-top::after { content: '→'; position: absolute; top: 26px; right: 26px; z-index: 3;
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,0.14); color: var(--weiss); font-size: 15px;
  transition: background 0.25s ease, transform 0.25s ease; }
.case-card-clickable:hover .case-card-top::after { background: var(--gelb); color: var(--dunkelblau); transform: translateX(3px); }
.case-card-clickable:focus-visible { outline: 2px solid var(--blau); outline-offset: 3px; }

/* filter pills */
.filter-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 40px; }
.filter-pill { background: var(--weiss); border: 1px solid var(--linie); border-radius: 100px; padding: 9px 20px; font-size: 13px; font-weight: 700; color: var(--text-muted); cursor: pointer; transition: all 0.2s ease; font-family: inherit; }
.filter-pill:hover { border-color: var(--blau); color: var(--dunkelblau); }
.filter-pill.active { background: var(--dunkelblau); border-color: var(--dunkelblau); color: var(--weiss); }

/* ---------- FAQ ACCORDION ---------- */
.faq-cat-label { font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blau); margin: 48px 0 8px; }
.faq-cat-label:first-of-type { margin-top: 0; }
.faq-list { border-top: 1px solid var(--linie); }
.faq-item { border-bottom: 1px solid var(--linie); }
.faq-q { width: 100%; background: none; border: none; cursor: pointer; font-family: inherit; text-align: left; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 26px 4px; font-size: 17px; font-weight: 700; color: var(--dunkelblau); letter-spacing: -0.01em; transition: color 0.2s ease; }
.faq-q:hover { color: var(--blau); }
.faq-icon { position: relative; flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--hellblau); display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; }
.faq-icon::before, .faq-icon::after { content: ''; position: absolute; background: var(--blau); border-radius: 2px; }
.faq-icon::before { width: 12px; height: 2px; }
.faq-icon::after { width: 2px; height: 12px; transition: transform 0.3s ease; }
.faq-item.open .faq-icon { background: var(--blau); }
.faq-item.open .faq-icon::before, .faq-item.open .faq-icon::after { background: var(--weiss); }
.faq-item.open .faq-icon::after { transform: rotate(90deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.faq-a-inner { padding: 0 4px 28px; font-size: 15px; color: var(--text-muted); line-height: 1.7; max-width: 80ch; }
.faq-a-inner strong { color: var(--dunkelblau); font-weight: 700; }

/* ---------- TEAM ---------- */
.team-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 44px; }
@media (max-width: 880px) { .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .team-grid { grid-template-columns: 1fr; } }
.team-card { background: var(--grau); border: 1px solid var(--linie); border-radius: 20px; padding: 32px 26px; text-align: center; transition: all 0.3s ease; }
.team-card:hover { background: var(--weiss); box-shadow: var(--shadow-card); transform: translateY(-4px); }
.team-avatar { width: 84px; height: 84px; border-radius: 50%; background: var(--weiss); color: var(--blau); display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 800; margin: 0 auto 18px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--linie); }
/* portrait placeholder: the illustration sits on white, so it gets a light
   dish and is fitted rather than cropped */
.team-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 46% 46%; transform: scale(0.94); }
.team-card h3 { font-size: 17px; font-weight: 700; color: var(--dunkelblau); }
.team-card .role { font-size: 13px; color: var(--blau); font-weight: 700; margin-top: 4px; }
.team-card .bio { font-size: 13px; color: var(--text-muted); margin-top: 12px; line-height: 1.6; }
/* the address is long relative to the card, so it breaks at the dot rather
   than pushing the grid wider */
.team-mail { display: inline-block; margin-top: 8px; font-size: 12.5px; font-weight: 600;
  color: var(--text-muted); text-decoration: none; overflow-wrap: anywhere;
  transition: color 0.2s ease; }
.team-mail:hover { color: var(--blau); text-decoration: underline; }
.team-mail:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; border-radius: 3px; }
/* Booking link on the sales cards — opens the LP in a new tab.
   Touch/narrow: always visible, in flow. Pointer devices: revealed in the
   card corner on hover, the same affordance the case cards use. */
.team-demo { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px;
  padding: 8px 14px; border-radius: 100px; background: var(--blau-soft); color: var(--blau) !important;
  font-size: 12px; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, opacity 0.22s ease, transform 0.22s ease, box-shadow 0.2s ease; }
.team-demo:hover { background: var(--blau); color: var(--weiss) !important; box-shadow: var(--elev-100); }
.team-demo svg { flex: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 761px) {
  /* Kopfhoehe fuer die Ecken-Pille. Sie gilt fuer ALLE Karten eines Rasters,
     sobald darin ueberhaupt ein Buchungslink vorkommt — sonst sitzen Karten
     ohne Link 24px hoeher als ihre Nachbarn und die Reihe wirkt verrutscht.
     Aufgefallen an Jan Junker: er war der Einzige im Verwaltungsrat mit einem
     Link (und zwar mit dem von David Huber). Der Link ist weg, damit ist
     aktuell keine Gruppe gemischt — die Regel haelt es so, wenn naechstes Mal
     jemand einem Einzelnen einen Buchungslink gibt. */
  .team-card { position: relative; }
  .team-grid:has(.team-demo) .team-card { padding-top: 56px; }
  .team-demo { position: absolute; top: 12px; right: 12px; margin-top: 0; z-index: 3;
    background: var(--blau); color: var(--weiss) !important; box-shadow: var(--elev-200);
    opacity: 0; transform: translateY(-5px); pointer-events: none; }
  .team-card:hover .team-demo, .team-card:focus-within .team-demo {
    opacity: 1; transform: none; pointer-events: auto; }
  .team-demo:hover { background: var(--dunkelblau); box-shadow: var(--elev-300); }
}
.team-section { margin-top: 44px; }
.team-section-header { padding-bottom: 14px; border-bottom: 1px solid var(--linie); }
.team-section .team-grid { margin-top: 24px; }

/* ---------- INTEGRATIONS ---------- */
.int-categories { display: grid; grid-template-columns: 1fr 1fr; gap: 44px 56px; margin-top: 44px; }
@media (max-width: 720px) { .int-categories { grid-template-columns: 1fr; gap: 36px; } }
.int-category-label { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--blau); margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.int-category-label svg { flex-shrink: 0; }
.int-category .logo-wall { justify-content: flex-start; margin-top: 0; }
.int-category .logo-chip { font-size: 13px; padding: 8px 16px; }
.fear-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 48px; border: 1px solid var(--linie); border-radius: 20px; overflow: hidden; }
@media (max-width: 720px) { .fear-grid { grid-template-columns: 1fr; } }
.fear-col { padding: 32px 36px; }
.fear-col:first-child { border-right: 1px solid var(--linie); background: var(--grau); }
@media (max-width: 720px) { .fear-col:first-child { border-right: none; border-bottom: 1px solid var(--linie); } }
.fear-col-label { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 24px; display: flex; align-items: center; gap: 8px; }
.fear-col:first-child .fear-col-label { color: var(--text-muted); }
.fear-col:last-child .fear-col-label { color: var(--blau); }
.fear-row { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 20px; font-size: 15px; line-height: 1.55; }
.fear-row:last-child { margin-bottom: 0; }
.fear-icon { flex-shrink: 0; margin-top: 1px; }
.fear-col:first-child .fear-row { color: var(--text-muted); }
.fear-col:last-child .fear-row { color: var(--dunkelblau); font-weight: 500; }

/* ---------- VALUES / IDENTITY ---------- */
.value-row { display: grid; grid-template-columns: 200px 1fr; gap: 40px; padding: 36px 0; border-bottom: 1px solid var(--linie); align-items: start; }
@media (max-width: 720px) { .value-row { grid-template-columns: 1fr; gap: 12px; } }
.value-row:last-child { border-bottom: none; }
.value-row h3 { font-size: 21px; font-weight: 700; color: var(--dunkelblau); letter-spacing: -0.02em; }
.value-row .vnum { font-size: 12px; font-weight: 800; color: var(--blau); letter-spacing: 0.1em; margin-bottom: 8px; }
.value-row p { font-size: 16px; color: var(--text-muted); line-height: 1.7; }

/* ---------- MARKETS ---------- */
.market-list { margin-top: 56px; border-top: 1px solid var(--linie); }
.market-row { display: grid; grid-template-columns: 56px 1fr 160px 130px; gap: 24px; align-items: center; padding: 24px 4px; border-bottom: 1px solid var(--linie); transition: background 0.2s ease; }
@media (max-width: 720px) { .market-row { grid-template-columns: 44px 1fr; gap: 8px 16px; } .market-row .mr-phase, .market-row .mr-stars { grid-column: 2; } }
.market-row:hover { background: var(--grau); }
.market-flag { width: 56px; height: 40px; border-radius: 8px; background: var(--hellblau); display: flex; align-items: center; justify-content: center; font-size: 20px; }
.market-row .mr-name { font-size: 18px; font-weight: 700; color: var(--dunkelblau); }
.market-row .mr-desc { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.market-row .mr-phase { font-size: 13px; font-weight: 700; color: var(--blau); }
.market-row .mr-stars { font-size: 14px; color: var(--gelb); letter-spacing: 2px; }
.market-row .mr-stars .off { color: var(--linie); }

/* ---------- FORMS ---------- */
.form-card { background: var(--weiss); border: 1px solid var(--linie); border-radius: 24px; padding: 44px; box-shadow: var(--shadow-card); }
@media (max-width: 600px) { .form-card { padding: 28px; } }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-field { display: flex; flex-direction: column; gap: 7px; }
.form-field.full { grid-column: span 2; }
@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } .form-field.full { grid-column: span 1; } }
.form-field label { font-size: 12px; font-weight: 700; color: var(--dunkelblau); letter-spacing: 0.02em; }
.form-field input, .form-field select, .form-field textarea { font-family: inherit; font-size: 14px; color: var(--dunkelblau); background: var(--grau); border: 1px solid var(--linie); border-radius: 10px; padding: 13px 14px; transition: all 0.2s ease; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: none; border-color: var(--blau); background: var(--weiss); box-shadow: 0 0 0 3px rgba(60,87,225,0.12); }
.form-field textarea { resize: vertical; min-height: 96px; }
.form-check { display: flex; gap: 10px; align-items: flex-start; font-size: 12px; color: var(--text-muted); line-height: 1.5; }
.form-check input { margin-top: 2px; }
.form-note { margin-top: 18px; font-size: 14px; font-weight: 700; }
.form-note.ok { color: #1a8a3c; }

/* contact info cards */
.office-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 28px; }
@media (max-width: 820px) { .office-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .office-grid { grid-template-columns: 1fr; } }
.office-card { background: var(--grau); border: 1px solid var(--linie); border-radius: 16px; padding: 24px; }
.office-card .oc-region { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blau); margin-bottom: 10px; }
.office-card .oc-name { font-size: 15px; font-weight: 700; color: var(--dunkelblau); }
.office-card .oc-line { font-size: 13px; color: var(--text-muted); margin-top: 6px; }
.office-card a.oc-line:hover { color: var(--blau); }

/* path switch — choose which quote form to show */
.path-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 24px; }
@media (max-width: 600px) { .path-switch { grid-template-columns: 1fr; } }
.path-option { display: flex; gap: 14px; align-items: flex-start; text-align: left; background: var(--weiss); border: 2px solid var(--linie); border-radius: 16px; padding: 20px; cursor: pointer; font-family: inherit; transition: border-color 0.2s ease, background 0.2s ease; }
.path-option:hover { border-color: var(--blau-hover); }
.path-option.active { border-color: var(--blau); background: var(--hellblau); }
.path-option .po-icon { flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; background: var(--hellblau); display: flex; align-items: center; justify-content: center; color: var(--blau); }
.path-option.active .po-icon { background: var(--weiss); }
.path-option .po-name { display: block; font-size: 15px; font-weight: 800; color: var(--dunkelblau); }
.path-option .po-desc { display: block; font-size: 13px; color: var(--text-muted); margin-top: 2px; }

/* ---------- MID CTA ---------- */
.mid-cta { background: var(--blau); color: var(--weiss); text-align: center; padding: 76px 0; position: relative; overflow: hidden; }
.mid-cta::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.09) 0%, transparent 55%); pointer-events: none; }
.mid-cta .container { position: relative; z-index: 2; }
.mid-cta h2 { font-size: clamp(26px, 3.5vw, 42px); font-weight: 800; letter-spacing: -0.025em; max-width: 24ch; margin: 0 auto 14px; line-height: 1.12; }
.mid-cta p { color: rgba(255,255,255,0.78); font-size: 17px; margin-bottom: 36px; }

/* ---------- FINAL CTA ---------- */
.final-cta { background: var(--blau); color: var(--weiss); text-align: center; position: relative; overflow: hidden; }
.final-cta::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 20% 0%, rgba(255,255,255,0.09) 0%, transparent 45%), radial-gradient(circle at 80% 100%, rgba(248,255,118,0.10) 0%, transparent 45%); }
.final-cta .container { position: relative; z-index: 2; }
.final-cta h2 { font-size: clamp(32px, 5vw, 60px); font-weight: 800; letter-spacing: -0.03em; max-width: 22ch; margin: 0 auto 18px; line-height: 1.08; }
.final-cta p { font-size: 18px; color: rgba(255,255,255,0.80); max-width: 52ch; margin: 0 auto 40px; }

/* ---------- FOOTER ---------- */
.site-footer { background: var(--dunkelblau); color: rgba(255,255,255,0.50); padding: 72px 0 36px; font-size: 13px; border-top: 1px solid var(--linie-w); }
.footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 36px; padding-bottom: 48px; border-bottom: 1px solid var(--linie-w); }
@media (max-width: 820px) { .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 480px) { .footer-top { grid-template-columns: 1fr; } }
.footer-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.footer-logo svg { height: 20px; width: auto; filter: brightness(0) invert(1); }
.footer-logo .logo-hello { font-size: 12px; }
.footer-brand p { color: rgba(255,255,255,0.5); font-size: 13px; line-height: 1.6; max-width: 34ch; }
.footer-col h4 { color: var(--weiss); font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 16px; }
.footer-col a { display: block; color: rgba(255,255,255,0.5); margin-bottom: 11px; transition: color 0.2s ease; }
.footer-col a:hover { color: var(--gelb); }

/* Seit der Umstellung der Fussnavigation auf core/navigation (15.09.) sind die
   vier Spalten <ul class="wp-block-navigation__container"> und stehen per Core
   auf `align-items: center`. Die Spaltenkoepfe daneben sind linksbuendig — am
   17.09. im Browser gemessen: Kopf bei x=258, Eintraege bei 308, 324, 323.
   Die Zeile .legal im Fussbereich bleibt aussen vor, sie ist eine Reihe und
   dort ist zentriert richtig. */
.site-footer .wp-block-navigation__container:not(.legal) { align-items: flex-start; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; padding-top: 28px; }
.footer-bottom strong { color: rgba(255,255,255,0.75); font-weight: 700; }
.footer-bottom .legal a { color: rgba(255,255,255,0.4); margin-left: 18px; }
.footer-bottom .legal a:hover { color: rgba(255,255,255,0.7); }
/* Mobil bricht die Zeile ohnehin um — dann links bündig statt eingerückt,
   der margin-left der ersten Link-Spalte muss weg. */
@media (max-width: 560px) {
  .footer-bottom { justify-content: flex-start; align-items: flex-start; gap: 10px; }
  .footer-bottom .legal { display: flex; gap: 18px; }
  .footer-bottom .legal a { margin-left: 0; }
}

/* ---------- SCROLL REVEAL ---------- */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.75s ease, transform 0.75s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  .testi-slides { transition: none; }
}

/* utility */
.mt-0 { margin-top: 0 !important; }
.center { text-align: center; }

/* ---------- PROSE / LEGAL / TEXT PAGES ---------- */
.text-section { padding: 56px 0 72px; background: var(--weiss); }
.prose { max-width: 800px; }
.prose h2 { font-size: clamp(22px,2.4vw,28px); font-weight: 700; letter-spacing: -0.02em; margin: 48px 0 14px; color: var(--dunkelblau); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 18px; font-weight: 700; margin: 30px 0 8px; color: var(--dunkelblau); }
.prose p, .prose li { color: var(--dunkelblau); opacity: 0.84; margin-bottom: 14px; }
.prose ul { padding-left: 22px; margin-bottom: 18px; }
.prose li { margin-bottom: 8px; }
.prose a:not(.btn-primary, .btn-outline-dark, .btn-outline-white, .btn-nav) { color: var(--blau); text-decoration: underline; }
.prose strong { font-weight: 700; opacity: 1; }
.prose-meta { font-size: 13px; color: var(--text-muted); margin-bottom: 28px; }
.legal-note { background: var(--grau); border-left: 3px solid var(--blau); padding: 16px 20px; border-radius: 10px; font-size: 14px; line-height: 1.55; margin: 0 0 36px; color: var(--dunkelblau); }
.legal-note strong { color: var(--blau); }
.data-table { width: 100%; border-collapse: collapse; margin: 8px 0 24px; font-size: 14px; }
.data-table th, .data-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--linie); vertical-align: top; }
.data-table th { font-weight: 700; color: var(--dunkelblau); width: 32%; }
.data-table td { color: var(--dunkelblau); opacity: 0.84; }

/* ---------- ARCHITECTURE DIAGRAM (BeyonityHELLO) ----------
   Hierarchy is shown through surface/tone, not boxes-with-borders:
   the brand frame is plain white, Navigator is the blue surface,
   modules are a flush divider row, HELLO OS is the dark foundation
   the whole frame rests on. Module icons stay bare — no icon tiles. */
.architecture { background: var(--grau); }
.arch-frame { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-600);
  box-shadow: var(--shadow-card); overflow: hidden; }
.arch-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px;
  padding: 32px 40px 28px; border-bottom: 1px solid var(--linie); }
.arch-head h2 { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; color: var(--dunkelblau); margin-bottom: 6px; }
.arch-head p { font-size: 14px; line-height: 1.55; color: var(--text-muted); max-width: 50ch; }
.arch-badge { flex-shrink: 0; font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--blau); background: var(--hellblau); padding: 7px 14px; border-radius: 100px; margin-top: 3px; white-space: nowrap; }

.arch-hero { position: relative; overflow: hidden; margin: 28px 40px 0; padding: 32px 36px;
  border-radius: var(--r-500); background: linear-gradient(135deg, var(--blau) 0%, #2946c9 100%);
  color: var(--weiss); display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.arch-hero::before { content: ''; position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(ellipse at 85% 15%, rgba(255,255,255,0.14) 0%, transparent 55%); pointer-events: none; }
.arch-hero > div, .arch-hero-icon { position: relative; z-index: 2; }
.arch-hero-eyebrow { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--gelb); margin-bottom: 6px; }
.arch-hero-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gelb); box-shadow: 0 0 8px var(--gelb); }
.arch-hero h3 { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 10px; }
.arch-hero-desc { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.78); max-width: 44ch; margin-bottom: 18px; }
.arch-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.arch-tag { font-size: 12px; font-weight: 700; padding: 6px 13px; border-radius: 100px;
  background: rgba(255,255,255,0.13); border: 1px solid rgba(255,255,255,0.22); color: var(--weiss); }
.arch-tag.alt { background: var(--gelb); border-color: var(--gelb); color: var(--dunkelblau); }
.arch-hero-icon { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.arch-hero-icon svg { width: 52px; height: 52px; stroke-width: 1.3; }
.arch-hero-icon .ver { font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--dunkelblau); background: var(--gelb); padding: 3px 11px; border-radius: 100px; }
.arch-hero-icon .lic { font-size: 11px; color: rgba(255,255,255,0.62); }

.arch-sub-label { display: flex; align-items: center; gap: 14px; margin: 28px 40px 14px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.arch-sub-label::after { content: ''; flex: 1; height: 1px; background: var(--linie); }

.arch-modules { margin: 0 40px 32px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--linie); border-radius: var(--r-400); overflow: hidden; }
.arch-mod { display: flex; flex-direction: column; gap: 10px; padding: 22px; background: var(--grau);
  border-right: 1px solid var(--linie); }
.arch-mod:last-child { border-right: none; }
.arch-mod-icon { color: var(--blau); }
.arch-mod-icon svg { width: 22px; height: 22px; }
.arch-mod-eyebrow { font-size: 11px; color: var(--text-muted); }
.arch-mod-name { font-size: 15px; font-weight: 700; color: var(--dunkelblau); }
.arch-mod-ver { font-size: 11px; font-weight: 700; color: var(--blau); margin-top: auto; padding-top: 6px; }
@media (max-width: 760px) {
  .arch-modules { grid-template-columns: 1fr; }
  .arch-mod { border-right: none; border-bottom: 1px solid var(--linie); }
  .arch-mod:last-child { border-bottom: none; }
}

.arch-os { position: relative; overflow: hidden; padding: 40px; margin-top: 8px;
  background: linear-gradient(135deg, #0a2a8a 0%, var(--dunkelblau) 58%, #00103f 100%); color: var(--weiss); }
.arch-os::before { content: ''; position: absolute; inset: 0; z-index: 1;
  background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 40px 40px; mask-image: radial-gradient(ellipse at 20% 30%, black 8%, transparent 66%); pointer-events: none; }
.arch-os-top, .arch-os-desc, .arch-os-foot { position: relative; z-index: 2; }
.arch-os-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 16px; }
.arch-os-eyebrow { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--gelb); margin-bottom: 6px; }
.arch-os-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gelb); box-shadow: 0 0 8px var(--gelb); }
.arch-os-left h3 { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.arch-os-tags { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; max-width: 380px; }
.arch-os-tag { font-size: 11px; font-weight: 700; padding: 6px 12px; border-radius: 100px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16); color: rgba(255,255,255,0.85); }
.arch-os-desc { font-size: 14px; line-height: 1.65; color: rgba(255,255,255,0.78); max-width: 720px; margin-bottom: 22px; }
.arch-os-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.14); font-size: 13px; color: rgba(255,255,255,0.62); }
.arch-os-foot .pill { flex-shrink: 0; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--dunkelblau); background: var(--gelb); padding: 6px 14px; border-radius: 100px; }
@media (max-width: 640px) {
  .arch-head, .arch-hero, .arch-sub-label, .arch-modules { margin-left: 20px; margin-right: 20px; }
  .arch-head { padding-left: 24px; padding-right: 24px; flex-direction: column; }
  .arch-hero { flex-direction: column; align-items: flex-start; padding: 26px; }
  .arch-os { padding: 30px 24px; }
  .arch-os-tags { justify-content: flex-start; max-width: none; }
}

/* ---------- PRICING ---------- */
.price-grid { display: grid; grid-template-columns: repeat(3,minmax(0, 1fr)); gap: 24px; margin-top: 8px; }
@media (max-width: 900px){ .price-grid { grid-template-columns: 1fr; } }
.price-card { position: relative; overflow: hidden; display: flex; flex-direction: column;
  background: var(--weiss); border: 1px solid var(--linie); border-radius: 20px;
  padding: 30px 28px 32px; box-shadow: var(--shadow-card); }
/* the numeral carries the sequence, so the tag only has to name the mode */
.price-card .pc-num { position: absolute; top: 16px; right: 22px; font-size: 58px; font-weight: 800;
  line-height: 1; letter-spacing: -0.04em; color: rgba(0,26,100,0.07); pointer-events: none; }
.price-card .pc-icon { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center;
  background: var(--blau-soft); color: var(--blau); margin-bottom: 18px; }
.price-card .pc-icon svg { width: 22px; height: 22px; }
.price-card .pc-tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--blau); }
.price-card h3 { font-size: 21px; font-weight: 700; margin: 8px 0 6px; letter-spacing: -0.02em; }
/* reserved so the three lists start on one line even when a subtitle wraps */
.price-card .pc-sub { min-height: 42px; font-size: 14px; color: var(--text-muted); margin-bottom: 18px; }
.price-card ul { list-style: none; padding-top: 6px; border-top: 1px solid var(--linie); }
.price-card li { position: relative; padding-left: 24px; margin-bottom: 9px; font-size: 14px; opacity: 0.88; }
.price-card li:first-child { margin-top: 16px; }
/* blue, not yellow: yellow on white sits at about 1.1:1 and reads as a smudge */
.price-card li::before { content: ''; position: absolute; left: 2px; top: 6px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--blau); }

/* The recurring licence is the block that carries the relationship, so it gets
   the dark treatment — and with it the only ground on which yellow belongs. */
.price-card.is-lead { background: var(--dunkelblau); border-color: transparent; }
.price-card.is-lead .pc-num { color: rgba(255,255,255,0.10); }
.price-card.is-lead .pc-icon { background: rgba(255,255,255,0.10); color: var(--gelb); }
.price-card.is-lead .pc-tag { color: var(--gelb); }
.price-card.is-lead h3 { color: var(--weiss); }
.price-card.is-lead .pc-sub { color: rgba(255,255,255,0.62); }
.price-card.is-lead ul { border-top-color: rgba(255,255,255,0.14); }
.price-card.is-lead li { color: rgba(255,255,255,0.88); opacity: 1; }
.price-card.is-lead li::before { background: var(--gelb); }
@media (max-width: 900px) {
  /* stacked, the subtitles no longer need to line up across columns */
  .price-card .pc-sub { min-height: 0; }
}

/* ---------- MEDIA PLACEHOLDERS ---------- */
/* isolation: isolate erzwingt einen eigenen Stacking-Kontext. Ohne die
   Zeile lecken die z-index-Werte der Kinder (::before=1, .media-ph-inner=2,
   ::after=3) in den Elternkontext .fmodal-panel und konkurrieren dort
   direkt mit .fmodal-close (z-index 2 vor A16). Der Bildplatzhalter lag
   dadurch UEBER dem Schliessen-Kreuz, das Zentrum des Buttons war nicht
   klickbar (elementFromPoint am 09.09.2026 gemessen).
   NICHT ENTFERNEN — die Regel hat keine sichtbare Wirkung (kein
   mix-blend-mode im Theme, 0 Treffer per grep bestaetigt) und sieht
   deshalb bei fluechtigem Lesen ueberfluessig aus. Sie behebt die
   z-index-Kollision, nicht ein visuelles Symptom. Vgl. A16 Punkt 1. */
.media-ph { position: relative; isolation: isolate; display: block; width: 100%; border-radius: 18px; overflow: hidden;
  background: linear-gradient(135deg, #0a2a8a 0%, var(--dunkelblau) 58%, #00103f 100%);
  border: 1px solid var(--linie); box-shadow: var(--shadow-card); }
.media-ph::before { content: ''; position: absolute; inset: 0; z-index: 1;
  background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 40px 40px; mask-image: radial-gradient(ellipse at 50% 42%, black 8%, transparent 76%); pointer-events: none; }
.media-ph::after { content: 'Platzhalter'; position: absolute; top: 14px; right: 14px; z-index: 3;
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--dunkelblau); background: var(--gelb); padding: 5px 11px; border-radius: 100px; }
.media-ph[data-ratio="16x9"] { aspect-ratio: 16 / 9; }
.media-ph[data-ratio="4x3"]  { aspect-ratio: 4 / 3; }
.media-ph[data-ratio="3x2"]  { aspect-ratio: 3 / 2; }
.media-ph-inner { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; gap: 13px; padding: 24px; }
.media-ph-icon { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(248,255,118,0.13); border: 1px solid rgba(248,255,118,0.34); color: var(--gelb); }
.media-ph-video .media-ph-icon { background: var(--gelb); color: var(--dunkelblau); border: none;
  box-shadow: 0 0 0 10px rgba(248,255,118,0.10); }
.media-ph-label { color: #fff; font-weight: 700; font-size: 16px; letter-spacing: -0.01em; }
.media-ph-hint { color: rgba(255,255,255,0.58); font-size: 13px; max-width: 38ch; line-height: 1.5; }
.media-ph-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 760px) { .media-ph-grid { grid-template-columns: 1fr; } }
.media-ph-sm .media-ph-icon { width: 46px; height: 46px; }
.media-ph-sm .media-ph-label { font-size: 14px; }
.media-ph-sm::after { top: 10px; right: 10px; padding: 4px 9px; }
/* the badge names the asset type that belongs in the slot */
.media-ph-video::after { content: 'Video · Platzhalter'; }
.media-ph-image::after { content: 'Bild · Platzhalter'; }
.media-ph-gif::after   { content: 'GIF · Platzhalter'; }
.media-ph-gif .media-ph-icon { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.32); color: #fff; }

/* ---------- JOINT / PARTNER PRODUCT (BiG OS) ----------
   Highlighted not by an accent bar but by being the only two-tone
   surface on the page: the panel is literally split, which is what
   a jointly built product is. No border, no coloured rule.        */
.joint-product { margin-top: 28px; display: grid; grid-template-columns: 1.55fr 1fr;
  align-items: stretch; background: var(--weiss); border-radius: var(--r-600);
  overflow: hidden; box-shadow: var(--elev-300);
  position: relative; transition: box-shadow 0.2s ease; }
/* Die ganze Karte führt auf big-os.ch. Der vorhandene Link spannt sich per
   ::after über die Karte — so gibt es genau ein Linkziel und kein
   verschachteltes <a>. Fokus wird an der Karte sichtbar, nicht nur am Text. */
.joint-product:hover { box-shadow: var(--elev-500); }
.joint-product:focus-within { outline: 2px solid var(--blau); outline-offset: 3px; }
.card-link::after { content: ''; position: absolute; inset: 0; }
.card-link:focus-visible { outline: none; }
.ext-icon { flex-shrink: 0; }
@media (prefers-reduced-motion: reduce) { .joint-product { transition: none; } }
.joint-product-main { background: var(--blau-soft); padding: 44px 46px; }
.joint-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--dunkelblau);
  background: var(--weiss); padding: 7px 14px; border-radius: 100px; box-shadow: var(--elev-100); }
.joint-tag::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--gelb);
  box-shadow: 0 0 0 1px rgba(0,26,100,0.10); }
.joint-product h3 { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; margin: 16px 0 10px; }
.joint-product p { color: var(--dunkelblau); opacity: 0.86; margin-bottom: 16px; max-width: 54ch; }
.joint-product-partners { padding: 44px 40px; display: flex; flex-direction: column; justify-content: center; }
.jp-label { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); display: block; margin-bottom: 16px; }
.jp-logos { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.jp-logos-stack { flex-direction: column; align-items: stretch; gap: 8px; flex-wrap: nowrap; }
@media (max-width: 860px) {
  .joint-product { grid-template-columns: 1fr; }
  .joint-product-main { padding: 30px 26px; }
  .joint-product-partners { padding: 26px; }
}

/* ---------- LOGO PLACEHOLDERS ----------
   Stand-in slots for real brand assets: a dashed frame at true logo
   proportions, a neutral mark and the firm name. Reads as "asset
   pending", never as a fake wordmark.                              */
.logo-ph { display: inline-flex; align-items: center; justify-content: center;
  width: 168px; height: 62px; color: var(--text-muted); }
.logo-ph img { width: 138px; height: auto; filter: grayscale(1); opacity: 0.62;
  transition: filter 0.2s ease, opacity 0.2s ease; }
.logo-ph:hover img { filter: none; opacity: 1; }
.logo-ph-name { font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  white-space: nowrap; line-height: 1; }
.logo-ph-sm { width: 140px; height: 80px; padding: 12px 14px; gap: 7px; }
.logo-ph-sm img { width: 80px; }
.logo-ph-sm .logo-ph-name { font-size: 10px; }
/* horizontal slot for stacked partner lockups — logo only, centred */
.logo-ph-row { width: 100%; height: 54px; padding: 0 16px; gap: 14px;
  justify-content: center;
  border: 1px dashed rgba(0,26,100,0.20); border-radius: var(--r-300); background: var(--weiss);
  transition: color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; }
.logo-ph-row:hover { color: var(--dunkelblau); border-color: var(--blau); border-style: solid; box-shadow: var(--elev-100); }
.logo-ph-row img { width: 74px; opacity: 1; }
.logo-ph-row .logo-ph-name { font-size: 11px; }
/* echtes Markenasset statt Platzhalter: kein Graufilter, keine gestrichelte
   „asset pending"-Kontur, Höhe gedeckelt damit unterschiedliche
   Logo-Proportionen in einer Reihe gleich gross wirken */
.logo-ph-real img { opacity: 1; width: auto; max-width: 138px; max-height: 40px; }
/* in der Logowand bleibt der einheitliche Graufilter (Farbe on hover, wie bei
   den Platzhaltern) — sonst zieht ein einzelnes buntes Logo den Blick weg */
.logo-ph-row.logo-ph-real { border-style: solid; border-color: var(--linie); }
.logo-ph-row.logo-ph-real img { filter: none; max-width: 84px; max-height: 24px; }
@media (max-width: 560px) {
  /* 50% - 6px ergab bei 14px gap zusammen 100% + 2px — es passte nie ein
     zweites Logo in die Zeile. Auf .logo-wall eingegrenzt, damit die
     Partner-Zeilen (.logo-ph-row) ihre volle Breite behalten. */
  .logo-wall .logo-ph { width: calc(50% - 8px); }
  .logo-ph-sm { width: 100%; }
  .logo-ph-row { width: 100%; }
  /* Logo-Chips zu zweit pro Zeile statt unregelmässig umbrechend */
  .logo-wall .logo-chip { flex: 1 1 calc(50% - 8px); text-align: center; padding: 11px 10px; font-size: 13px; }
  .int-category .logo-wall .logo-chip { flex: 0 1 auto; text-align: left; }
}

/* ---------- DATA CHANNELS & WEBSITE INTEGRATION (Integrationen) ---------- */
.req-lead { margin-top: 52px; font-size: 12px; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--blau); }
.req-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }
@media (max-width: 900px) { .req-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .req-grid { grid-template-columns: 1fr; } }
.req-item { background: var(--weiss); border: 1px solid var(--linie); border-radius: 16px; padding: 22px 20px; }
.req-item h4 { font-size: 15px; font-weight: 800; color: var(--dunkelblau); letter-spacing: -0.01em; margin-bottom: 8px; }
.req-item p { font-size: 13.5px; color: var(--text-muted); line-height: 1.6; }

/* ---------- WEBHOOK: event based, and shown as one ----------
   A 5s loop: the unit flips in the customer's system, the event travels the
   wire, the Navigator flips after it. No JavaScript — the two labels sit on
   top of each other and trade opacity. The resting state is the end of the
   run, so prefers-reduced-motion shows the result rather than half a frame. */
.wh-panel { --wh-t: 5s; display: grid; grid-template-columns: 1fr auto; gap: 44px; align-items: center;
  margin-top: 20px; background: var(--weiss); border: 1px solid var(--linie); border-radius: 18px;
  padding: 30px 32px; }
@media (max-width: 980px) { .wh-panel { grid-template-columns: 1fr; gap: 28px; } }
.wh-panel h3 { font-size: 18px; font-weight: 800; color: var(--dunkelblau); margin-bottom: 10px; letter-spacing: -0.01em; }
.wh-panel p { font-size: 14.5px; color: var(--text-muted); line-height: 1.65; max-width: 58ch; }

.whx { display: flex; align-items: center; }
@media (max-width: 980px) { .whx { justify-content: center; } }
.whx-node { flex: none; width: 156px; background: var(--grau); border: 1px solid var(--linie);
  border-radius: 12px; padding: 12px; }
.whx-label { display: block; font-size: 9px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 10px; }
.whx-row { display: flex; align-items: center; gap: 8px; }
.whx-row + .whx-row { margin-top: 7px; }
.whx-row.is-dim { opacity: 0.45; }
.whx-row i { flex: 1; height: 6px; border-radius: 3px; background: rgba(0,26,100,0.14); }
.whx-pill { position: relative; flex: none; width: 62px; height: 17px; }
.whx-pill b { position: absolute; inset: 0; }
.whx-pill b, .whx-pill.is-static { display: grid; place-items: center;
  border-radius: 100px; font-size: 9px; font-weight: 800; letter-spacing: 0.02em; }
.whx-pill .is-a, .whx-pill.is-static { background: var(--blau-soft); color: var(--blau); }
.whx-pill .is-b { background: var(--dunkelblau); color: var(--weiss); }
/* resting state = after the run */
.whx-pill .is-a { opacity: 0; }
.whx-pill .is-b { opacity: 1; }

/* --whx-run is the packet's travel distance; it lives here so the keyframe
   follows whatever width the wire has at a given breakpoint */
.whx-wire { --whx-run: 75px; position: relative; flex: none; width: 80px; height: 2px; background: rgba(0,26,100,0.14); }
.whx-packet { position: absolute; top: -4px; left: 0; width: 10px; height: 10px; border-radius: 50%;
  background: var(--blau); box-shadow: 0 0 10px 1px rgba(60,87,225,0.75); opacity: 0; }

.whx-src .is-a { animation: whx-a-src var(--wh-t) linear infinite; }
.whx-src .is-b { animation: whx-b-src var(--wh-t) linear infinite; }
.whx-dst .is-a { animation: whx-a-dst var(--wh-t) linear infinite; }
.whx-dst .is-b { animation: whx-b-dst var(--wh-t) linear infinite; }
.whx-packet { animation: whx-packet var(--wh-t) linear infinite; }

@keyframes whx-a-src { 0%, 6% { opacity: 1; } 10%, 92% { opacity: 0; } 96%, 100% { opacity: 1; } }
@keyframes whx-b-src {
  0%, 6% { opacity: 0; box-shadow: 0 0 0 0 rgba(60,87,225,0); }
  10% { opacity: 1; box-shadow: 0 0 0 5px rgba(60,87,225,0.22); }
  15%, 92% { opacity: 1; box-shadow: 0 0 0 0 rgba(60,87,225,0); }
  96%, 100% { opacity: 0; box-shadow: 0 0 0 0 rgba(60,87,225,0); }
}
@keyframes whx-a-dst { 0%, 30% { opacity: 1; } 34%, 92% { opacity: 0; } 96%, 100% { opacity: 1; } }
@keyframes whx-b-dst {
  0%, 30% { opacity: 0; box-shadow: 0 0 0 0 rgba(60,87,225,0); }
  34% { opacity: 1; box-shadow: 0 0 0 5px rgba(60,87,225,0.22); }
  39%, 92% { opacity: 1; box-shadow: 0 0 0 0 rgba(60,87,225,0); }
  96%, 100% { opacity: 0; box-shadow: 0 0 0 0 rgba(60,87,225,0); }
}
@keyframes whx-packet {
  0%, 11% { transform: translateX(-5px); opacity: 0; }
  13% { transform: translateX(2px); opacity: 1; animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); }
  30% { transform: translateX(var(--whx-run)); opacity: 1; }
  32%, 100% { transform: translateX(var(--whx-run)); opacity: 0; }
}
/* the two nodes plus the wire are 392px wide — more than a phone-width card
   can hold, so they shrink together with the packet's run */
@media (max-width: 560px) {
  .whx-node { width: 118px; padding: 10px; }
  .whx-wire { width: 44px; --whx-run: 39px; }
  .whx-pill { width: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .whx, .whx * { animation: none !important; }
  .whx-packet { display: none; }
}

/* Two browser windows instead of two text columns: the recommendation is a
   thing you can see, not a claim you have to take. The good one is itself the
   link to the live project. */
.wsi-frames { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 48px; }
@media (max-width: 900px) { .wsi-frames { grid-template-columns: 1fr; } }
.wsi-case { position: relative; margin: 0; }
.wsi-case.is-good:focus-within { outline: 2px solid var(--blau); outline-offset: 6px; border-radius: 18px; }
.wsi-chrome { border: 1px solid var(--linie); border-radius: 14px; overflow: hidden; background: var(--weiss);
  box-shadow: var(--elev-200); transition: box-shadow 0.25s ease, transform 0.25s ease; }
.wsi-case.is-good:hover .wsi-chrome { box-shadow: var(--elev-400); transform: translateY(-3px); }
.wsi-bar { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--grau);
  border-bottom: 1px solid var(--linie); }
.wsi-dots { display: flex; gap: 5px; flex: none; }
.wsi-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(0,26,100,0.16); }
.wsi-url { flex: 1; font-size: 11px; font-weight: 700; color: var(--text-muted); background: var(--weiss);
  border: 1px solid var(--linie); border-radius: 100px; padding: 4px 12px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.wsi-view { position: relative; height: 236px; overflow: hidden; }

/* the Navigator, filling its window */
.wsi-nav { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px; padding: 14px;
  background: linear-gradient(160deg, #12266f 0%, var(--dunkelblau) 100%); }
.wsi-nav-top { display: flex; align-items: center; gap: 7px; }
.wsi-brand { width: 16px; height: 16px; border-radius: 5px; background: var(--gelb); }
.wsi-pill { height: 8px; width: 42px; border-radius: 100px; background: rgba(255,255,255,0.20); }
.wsi-mass { position: relative; flex: 1; display: flex; align-items: flex-end; gap: 6px; }
.wsi-mass i { flex: 1; border-radius: 4px 4px 0 0; background: rgba(149,165,255,0.34); }
/* the unit markers the Navigator actually puts on a building */
.wsi-mass b { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--weiss);
  box-shadow: 0 1px 3px rgba(0,26,100,0.4); }
.wsi-units { display: flex; flex-direction: column; gap: 5px; }
.wsi-units span { height: 9px; border-radius: 3px; background: rgba(255,255,255,0.15); }
.wsi-units span:nth-child(2) { width: 82%; }
.wsi-units span:nth-child(3) { width: 64%; }
.wsi-cta { width: 88px; height: 16px; border-radius: 100px; background: var(--gelb); }

/* the same Navigator, boxed into someone else's page */
.wsi-site { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 8px; padding: 10px;
  background: var(--weiss); }
.wsi-site-head { display: flex; align-items: center; gap: 8px; padding-bottom: 8px;
  border-bottom: 1px solid var(--linie); }
.wsi-logo { width: 16px; height: 16px; border-radius: 4px; background: rgba(0,26,100,0.22); }
.wsi-navline { height: 6px; width: 30px; border-radius: 100px; background: rgba(0,26,100,0.12); }
.wsi-site-copy { flex: none; display: flex; flex-direction: column; gap: 5px; }
.wsi-site-copy i { height: 7px; border-radius: 3px; background: rgba(0,26,100,0.10); }
.wsi-site-copy i:last-child { width: 58%; }
.wsi-site-copy i.is-title { height: 11px; width: 46%; background: rgba(0,26,100,0.20); }
/* fixed share, not flex: 1 — the whole point is that the Navigator gets less
   room than the page around it */
.wsi-embed { position: relative; flex: none; height: 42%; border: 1px solid var(--linie); border-radius: 8px;
  overflow: hidden; }
.wsi-embed-tag { position: absolute; top: 5px; right: 5px; z-index: 2; font-size: 8px; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); background: rgba(255,255,255,0.86);
  border-radius: 4px; padding: 2px 5px; }
.wsi-nav.is-squeezed { gap: 6px; padding: 9px; }
.wsi-site-foot { flex: none; height: 16px; margin-top: auto; border-radius: 4px; background: rgba(0,26,100,0.08); }
.wsi-cookie { position: absolute; left: 10px; right: 10px; bottom: 10px; height: 22px; display: flex;
  align-items: center; gap: 8px; padding: 0 8px; border-radius: 6px; background: var(--dunkelblau); }
.wsi-cookie i { flex: 1; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.30); }
.wsi-cookie span { flex: none; width: 26px; height: 10px; border-radius: 100px; background: var(--gelb); }

.wsi-case figcaption { padding-top: 20px; }
.wsi-verdict { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 10px; }
.wsi-verdict.is-good { color: var(--blau); }
.wsi-verdict.is-bad { color: var(--text-muted); }
.wsi-case figcaption p { font-size: 15px; line-height: 1.65; color: var(--text-muted); }
.wsi-case figcaption p strong { color: var(--dunkelblau); font-weight: 800; }
.wsi-case figcaption em { font-style: normal; color: var(--dunkelblau); font-weight: 700; }
.wsi-case figcaption .text-link { margin-top: 14px; }

/* the roadmap strip: a different register again, so it does not read as a third case */
.wsi-next { display: grid; grid-template-columns: auto 1fr; gap: 30px; align-items: start; margin-top: 44px;
  background: var(--dunkelblau); border-radius: 20px; padding: 32px 34px; }
@media (max-width: 720px) { .wsi-next { grid-template-columns: 1fr; gap: 18px; } }
.wsi-when { align-self: start; font-size: 12px; font-weight: 800; letter-spacing: 0.12em; color: var(--dunkelblau);
  background: var(--gelb); border-radius: 100px; padding: 8px 16px; white-space: nowrap; }
.wsi-next h3 { font-size: 21px; font-weight: 700; color: var(--weiss); letter-spacing: -0.02em; margin-bottom: 10px; }
.wsi-next p { font-size: 15px; line-height: 1.65; color: rgba(255,255,255,0.70); max-width: 74ch; }
.wsi-next p.wsi-fine { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linie-w);
  font-size: 13px; color: rgba(255,255,255,0.50); }

/* ---------- FEATURE CARD WITH PREVIEW MODAL ----------
   The preview used to open by itself once the pointer had rested on a card.
   That is gone: the enlarge button in the corner is the trigger, on every
   device. The button keeps its text label in the DOM so screen readers and
   the four translations still have a name to read — it is only sized away
   visually, which is why there is no aria-label to keep in sync per language. */
.feature-card { position: relative; cursor: pointer; }
.feature-card .product-icon { padding-right: 44px; }

.feature-peek { position: absolute; top: 22px; right: 22px; z-index: 1;
  width: 34px; height: 34px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--linie);
  background: var(--weiss) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233c57e1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E") center / 15px 15px no-repeat;
  box-shadow: var(--elev-100);
  font-size: 0; line-height: 0; color: transparent;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; }
.feature-peek:hover { border-color: var(--blau); box-shadow: var(--elev-200); transform: scale(1.06); }
.feature-peek:focus-visible { outline: 2px solid var(--blau); outline-offset: 3px; }
.feature-card.dark .feature-peek { background-color: var(--gelb); border-color: transparent; }
.feature-card.dark .feature-peek:focus-visible { outline-color: var(--gelb); }
/* Where there is a real pointer the button only shows on hover — the card is
   quieter that way and the trigger appears exactly when it can be used.
   Touch and narrow viewports keep it permanently visible: there is no hover
   to reveal it with, and it is the only affordance the card has.
   Keyboard users get it back through :focus-within on the card. */
@media (hover: hover) and (pointer: fine) and (min-width: 761px) {
  .feature-peek { opacity: 0; transform: scale(0.85);
    transition: opacity 0.22s ease, transform 0.22s ease, border-color 0.2s ease, box-shadow 0.2s ease; }
  .feature-card:hover .feature-peek, .feature-card:focus-within .feature-peek { opacity: 1; transform: none; }
  .feature-card:hover .feature-peek:hover { transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) { .feature-peek { transition: none; } }
@media (max-width: 760px) {
  .feature-peek { top: 18px; right: 18px; }
}

.fmodal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center;
  justify-content: center; padding: 24px; }
.fmodal[hidden] { display: none; }
.fmodal-backdrop { position: absolute; inset: 0; background: rgba(0,26,100,0.55);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity 0.24s ease; }
.fmodal.open .fmodal-backdrop { opacity: 1; }
.fmodal-panel { position: relative; z-index: 1; width: min(780px, 100%);
  max-height: calc(100vh - 48px); overflow-y: auto; background: var(--weiss);
  border-radius: var(--r-600); box-shadow: var(--elev-500);
  opacity: 0; transform: translateY(12px) scale(0.985);
  transition: opacity 0.24s ease, transform 0.24s ease; }
.fmodal.open .fmodal-panel { opacity: 1; transform: none; }
/* z-index 10 statt 2: die 2 war der eigentliche Fehler in A15, nicht die
   Groesse. .media-ph::after hat z-index 3 und leckte in den Elternkontext
   (vor A16, siehe isolation-Kommentar bei :1805) — Gleichstand oder
   Ueberlagerung mit der 2 des Buttons. Die 10 ist der Gurt fuer den
   naechsten Inhalt, der im Media-Bereich mit eigenem z-index kommt;
   die Ursache behebt die isolation an .media-ph, nicht diese Zahl. */
.fmodal-close { position: absolute; top: 16px; right: 16px; z-index: 10;
  display: flex; align-items: center; justify-content: center; padding: 0;
  width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,0.92); color: var(--dunkelblau); font-size: 20px; line-height: 1;
  box-shadow: var(--elev-200); transition: background 0.2s ease; }
/* Trefferflaeche 44 px bei unveraendertem 38-px-Kreis. Unsichtbar,
   faengt Klicks am Rand des X, das sonst nur 38 px trifft. */
.fmodal-close::before { content: ""; position: absolute; inset: -3px; border-radius: 50%; }
.fmodal-close:hover { background: var(--weiss); }
.fmodal-media { padding: 20px 20px 0; }
.fmodal-media .media-ph { border-radius: var(--r-400); }
/* keep the type badge clear of the close button */
.fmodal-media .media-ph::after { left: 14px; right: auto; }
.fmodal-body { padding: 26px 34px 34px; }
.fmodal-eyebrow { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--blau); margin-bottom: 10px; }
.fmodal-body h3 { font-size: 24px; font-weight: 700; letter-spacing: -0.02em;
  color: var(--dunkelblau); margin-bottom: 12px; }
.fmodal-body p { font-size: 16px; color: var(--text-muted); line-height: 1.65; }
.fmodal-list { list-style: none; margin-top: 18px; display: grid; gap: 10px; }
.fmodal-list li { position: relative; padding-left: 26px; font-size: 15px;
  color: var(--dunkelblau); line-height: 1.55; }
.fmodal-list li::before { content: ''; position: absolute; left: 0; top: 7px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--blau); }
@media (max-width: 620px) {
  .fmodal { padding: 0; align-items: flex-end; }
  .fmodal-panel { width: 100%; max-height: 88vh; border-radius: var(--r-600) var(--r-600) 0 0; }
  .fmodal-body { padding: 22px 24px 30px; }
  .fmodal-media { padding: 14px 14px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .fmodal-backdrop, .fmodal-panel, .feature-card::after { transition: none; }
}

/* ---------- PROJECT DETAIL / SUCCESS STORY ----------
   Building blocks for a single project page: fact strip, narrative
   chapters, media gallery and third-party embeds.                  */
.proj-facts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px;
  margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--linie-w); }
.proj-facts dt { font-size: 11px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
  color: rgba(255,255,255,0.45); margin-bottom: 7px; }
.proj-facts dd { font-size: 16px; font-weight: 600; color: var(--weiss); line-height: 1.35; }
@media (max-width: 860px) { .proj-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }

/* headline results, sitting on the light section below the hero */
.proj-results { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.proj-result { background: var(--grau); border-radius: var(--r-500); padding: 30px 26px; }
.proj-result .num { font-size: 40px; font-weight: 800; letter-spacing: -0.035em; color: var(--blau); line-height: 1; }
.proj-result .num .unit { font-size: 21px; margin-left: 2px; }
.proj-result .lbl { font-size: 14px; color: var(--text-muted); line-height: 1.5; margin-top: 12px; }
.proj-result .src { font-size: 12px; color: var(--text-muted); opacity: 0.7; margin-top: 10px; }
@media (max-width: 980px) { .proj-results { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .proj-results { grid-template-columns: 1fr; } }

/* narrative chapter: text one side, media the other, alternating */
.proj-chapter { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.proj-chapter + .proj-chapter { margin-top: 88px; }
.proj-chapter.reverse .proj-chapter-text { order: 2; }
.proj-chapter-num { display: inline-flex; align-items: center; gap: 10px; font-size: 11px;
  font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blau); margin-bottom: 14px; }
.proj-chapter-num::before { content: ''; width: 26px; height: 2px; background: var(--blau); border-radius: 2px; }
.proj-chapter h3 { font-size: clamp(24px, 2.6vw, 32px); font-weight: 700; letter-spacing: -0.025em;
  color: var(--dunkelblau); margin-bottom: 16px; }
.proj-chapter p { font-size: 16px; color: var(--text-muted); line-height: 1.7; }
.proj-chapter p + p { margin-top: 14px; }
.proj-chapter ul { list-style: none; margin-top: 20px; display: grid; gap: 11px; }
.proj-chapter li { position: relative; padding-left: 26px; font-size: 15px; color: var(--dunkelblau); line-height: 1.55; }
.proj-chapter li::before { content: ''; position: absolute; left: 0; top: 7px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--blau); }
@media (max-width: 860px) {
  .proj-chapter { grid-template-columns: 1fr; gap: 28px; }
  .proj-chapter + .proj-chapter { margin-top: 44px; }
  .proj-chapter.reverse .proj-chapter-text { order: 0; }
}

/* pull quote from the client */
.proj-quote { background: var(--dunkelblau); color: var(--weiss); border-radius: var(--r-600);
  padding: 56px 60px; display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; }
.proj-quote blockquote { font-size: clamp(20px, 2.3vw, 28px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.4; }
.proj-quote-by { display: flex; align-items: center; gap: 14px; white-space: nowrap; }
.proj-quote-by .avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--gelb);
  display: grid; place-items: center; font-weight: 800; color: var(--dunkelblau); font-size: 16px;
  overflow: hidden; flex: none; }
.proj-quote-by .avatar img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.5); transform-origin: 50% 34%; }
.proj-quote-by .who { display: block; font-size: 15px; font-weight: 700; }
.proj-quote-by .role { display: block; font-size: 13px; color: rgba(255,255,255,0.6); margin-top: 3px; }
@media (max-width: 760px) { .proj-quote { grid-template-columns: 1fr; padding: 34px 28px; gap: 24px; } }

/* products used on the project */
.proj-stack { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
/* Die Chip-Form haengt an der Chip-KLASSE, nicht am Element: ein Chip
   ohne Link ist ein <span> (Features und Add-ons sind teils nicht
   verlinkt, geplante nie), und `.proj-stack a` allein liess den ganz
   ohne Form — Icon ueber dem Text, kein Rand, keine Pille. Nachgesehen,
   nicht vermutet.

   Flaeche, Text- und Iconfarbe kommen aus drei Variablen mit genau den
   bisherigen Werten als Rueckfall. Damit setzt eine Variante (siehe
   theme-extras.css, Abschnitt CHIPS) nur ihre Farbe, und es gibt kein
   Spezifitaetsrennen und kein !important. */
.proj-stack a,
.proj-stack .proj-stack-item { display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px;
  background: var(--chip-flaeche, var(--weiss)); border: 1px solid var(--linie); border-radius: 100px;
  font-size: 14px; font-weight: 600; color: var(--chip-farbe, var(--dunkelblau));
  transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.proj-stack a:hover { border-color: var(--blau); box-shadow: var(--elev-100); }
.proj-stack svg { width: 18px; height: 18px; color: var(--chip-icon, var(--blau)); }

/* ---------- EMBEDS (video, tour, iframe) ----------
   Third-party frames load only after an explicit click, so no request
   leaves the page until the visitor asks for it.                    */
.embed { position: relative; width: 100%; border-radius: var(--r-500); overflow: hidden;
  background: linear-gradient(135deg, #0a2a8a 0%, var(--dunkelblau) 58%, #00103f 100%);
  border: 1px solid var(--linie); box-shadow: var(--shadow-card); }
.embed[data-ratio="16x9"] { aspect-ratio: 16 / 9; }
.embed[data-ratio="4x3"]  { aspect-ratio: 4 / 3; }
.embed[data-ratio="1x1"]  { aspect-ratio: 1 / 1; }
.embed iframe, .embed video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; object-fit: cover; }
/* Ist ein <video> direktes Kind, richtet sich der Rahmen nach dem Video —
   kein Beschnitt durch ein festes aspect-ratio. iframe ist ausgenommen:
   ein Iframe hat keine natuerliche Hoehe, ohne Deckel faellt der Rahmen
   auf 0 und das eingebettete Video ist weg. Spezifitaet an data-ratio
   angehaengt, damit die Attribut-Regel oben ueberschrieben wird. */
.embed[data-ratio]:has(> video) { aspect-ratio: auto; }
.embed:has(> video) > video {
  position: static; inset: auto;
  width: 100%; height: auto;
  object-fit: initial;
}
.embed-facade { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 28px;
  cursor: pointer; border: 0; background: none; font-family: var(--font-ui); width: 100%; }
.embed-facade::before { content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 40px 40px; mask-image: radial-gradient(ellipse at 50% 42%, black 8%, transparent 76%); }
.embed-facade > * { position: relative; }
.embed-play { width: 66px; height: 66px; border-radius: 50%; background: var(--gelb); color: var(--dunkelblau);
  display: grid; place-items: center; box-shadow: 0 0 0 10px rgba(248,255,118,0.10);
  transition: transform 0.2s ease, box-shadow 0.2s ease; }
.embed-facade:hover .embed-play { transform: scale(1.06); box-shadow: 0 0 0 14px rgba(248,255,118,0.14); }
.embed-title { color: #fff; font-weight: 700; font-size: 17px; letter-spacing: -0.01em; }
.embed-note { color: rgba(255,255,255,0.56); font-size: 13px; max-width: 46ch; line-height: 1.5; }
.embed-provider { position: absolute; top: 14px; left: 14px; z-index: 2; font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--dunkelblau); background: var(--gelb);
  padding: 5px 11px; border-radius: 100px; }
figure.embed-figure { margin: 0; }
.embed-caption { font-size: 13px; color: var(--text-muted); margin-top: 12px; line-height: 1.55; }

/* gallery of stills */
.proj-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.proj-gallery .media-ph { border-radius: var(--r-400); }
@media (max-width: 760px) { .proj-gallery { grid-template-columns: 1fr; } }

/* ---------- RESPONSIVE GRID UTILITIES (override inline) ---------- */
/* `1fr` ist `minmax(auto, 1fr)`: ein langes Wort hebt das Minimum einer Spalte,
   die anderen geben ihren Anteil ab. Auf 768px ergab das 258/220/171px — die
   dritte Spalte halb so breit wie die erste, ihre Überschrift über vier Zeilen.
   `minmax(0, 1fr)` hält die Spalten gleich breit. */
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
@media (max-width: 980px) { .grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
/* Zwischenschritt auf zwei Spalten, wie ihn .card-grid-3 von sich aus hat. Der
   Override sprang vorher von drei Spalten direkt auf eine — und 768px lag genau
   im Loch dazwischen. */
@media (max-width: 960px) { .grid-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 640px) { .grid-cols-3 { grid-template-columns: 1fr !important; } }
@media (max-width: 560px) { .grid-cols-4 { grid-template-columns: 1fr !important; } }