/* =========================================================
   MFB-FX — Stile zu js/mfb-fx.js
   Portierungen von: flow-field-background · spotlight-card ·
   aurora-section-hero · 3d-hero-section-boxes
   Alles im Markenkorridor Navy #0E3D6E → Blau #1F9FDC → Hellblau #5FC2EC,
   auf hellem Grund (medizinischer Vertrauenskontext statt Dark-Agency).
   Jeder Effekt ist dekorativ und bei prefers-reduced-motion vollständig aus.
   ========================================================= */

/* ── 1 · Kohärenz-Kontinuum: Bühne (Canvas kommt aus dem JS) ──
   Die Atmosphäre liegt als statischer CSS-Verlauf UNTER der Leinwand:
   kostet nichts pro Bild und bleibt dank transparenter Spuren sichtbar. */
.fx-flow{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 42%,rgba(31,159,220,.055) 0%,rgba(31,159,220,.035) 46%,transparent 72%),
    radial-gradient(ellipse at 50% 118%,rgba(14,61,110,.075),transparent 62%),
    #fff}
/* Weiche Kanten, damit die ∞-Figur nicht am Rand „abgeschnitten" wirkt.
   Mitte bleibt frei — dort steht der Hero-Text. */
.fx-flow::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 40%,transparent 52%,rgba(255,255,255,.5) 84%,rgba(255,255,255,.86) 100%)}

/* ── 2 · Spotlight-/Glow-Karten ─────────────────────────── */
.fx-glanz{
  --fx-x:50%; --fx-y:50%; --fx-xp:.5; --fx-an:0;
  --fx-hue:calc(200 + (var(--fx-xp) * 45));      /* bleibt Blau→Indigoblau, kein Regenbogen */
  --fx-rand:1.5px;
  position:relative;isolation:isolate;
  transition:transform .3s ease,box-shadow .3s ease;
}
/* Lichtkegel auf der Fläche */
.fx-glanz::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  border-radius:inherit;opacity:calc(var(--fx-an) * .9);transition:opacity .4s ease;
  background:radial-gradient(220px circle at var(--fx-x) var(--fx-y),
    hsl(var(--fx-hue) 82% 62% / .13),transparent 66%);
}
/* Leuchtender Rahmen — Maskentrick: Farbe nur auf dem Rand sichtbar */
.fx-glanz::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  border-radius:inherit;padding:var(--fx-rand);
  opacity:calc(var(--fx-an) * 1);transition:opacity .4s ease;
  background:radial-gradient(180px circle at var(--fx-x) var(--fx-y),
    hsl(var(--fx-hue) 90% 58%),transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.fx-glanz > *{position:relative;z-index:2}
@media (hover:hover){
  .fx-glanz:hover{transform:translateY(-4px);box-shadow:0 26px 54px -26px rgba(14,61,110,.34)}
}

/* ── 3 · Aurora-Lichtstrahlen (IT-/KI-Seite) ────────────── */
.fx-aurora{position:relative;overflow:hidden;isolation:isolate}
.fx-strahlen{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:
    linear-gradient(180deg,#F4F9FD 0%,#E9F4FB 55%,#fff 100%),
    radial-gradient(ellipse at 50% 120%,rgba(31,159,220,.16),transparent 62%)}
/* Perspektivisches Raster als „Datenboden" */
.fx-strahlen::before{
  content:"";position:absolute;left:-25%;right:-25%;bottom:0;height:52%;
  background-image:linear-gradient(rgba(31,159,220,.16) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(31,159,220,.16) 1px,transparent 1px);
  background-size:80px 40px;
  transform:perspective(340px) rotateX(62deg);transform-origin:bottom center;
  animation:fxRaster 9s linear infinite;
  -webkit-mask:linear-gradient(transparent,#000 55%);mask:linear-gradient(transparent,#000 55%)}
/* Lichtschein am Boden */
.fx-strahlen .fx-boden{position:absolute;left:50%;bottom:-14%;width:min(720px,86%);height:210px;
  transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(ellipse,rgba(95,194,236,.5),transparent 68%);
  filter:blur(26px);animation:fxBoden 6.5s ease-in-out infinite}
/* Zentrale Lichtsäule */
.fx-strahlen .fx-saeule{position:absolute;left:50%;bottom:0;width:3px;height:74%;
  transform:translateX(-50%);
  background:linear-gradient(to top,rgba(31,159,220,.85),rgba(95,194,236,.28) 58%,transparent);
  filter:blur(18px);animation:fxSaeule 3.6s ease-in-out infinite alternate}
/* Die eigentlichen Strahlen */
.fx-strahlen .fx-bahn{position:absolute;inset:0}
.fx-strahlen .fx-bahn i{position:absolute;bottom:0;height:34vh;border-radius:2px;
  background:linear-gradient(to top,rgba(14,61,110,.02),#1F9FDC 42%,rgba(95,194,236,.9));
  box-shadow:0 0 12px rgba(31,159,220,.55);opacity:0;
  animation-name:fxSteigen,fxBlenden,fxSinken;
  animation-timing-function:linear,ease-in-out,ease-in;
  animation-iteration-count:infinite,infinite,infinite}
/* Inhalt liegt über den Strahlen */
.fx-aurora > .container,.fx-aurora > *:not(.fx-strahlen){position:relative;z-index:1}

@keyframes fxSteigen{0%{transform:translateY(100%)}100%{transform:translateY(-120%)}}
@keyframes fxBlenden{0%,100%{opacity:0}6%,78%{opacity:.62}}
@keyframes fxSinken{0%,100%{filter:blur(0)}50%{filter:blur(1px)}}
@keyframes fxBoden{0%,100%{transform:translateX(-50%) scale(.92);opacity:.66}
  50%{transform:translateX(-50%) scale(1.08);opacity:1}}
@keyframes fxSaeule{from{opacity:.55;filter:blur(24px)}to{opacity:.85;filter:blur(14px)}}
@keyframes fxRaster{from{background-position:0 0}to{background-position:-80px -40px}}

/* ── 4 · Schaufenster-Sektion (aus „3d-hero-section-boxes") ──
   Ohne Spline: kein externer 3D-Dienst (Datenschutz + Ladezeit),
   stattdessen echtes Seitenbild mit Parallaxe im Markenrahmen.     */
.fx-schau{position:relative;z-index:2;margin-top:clamp(-40px,-4vh,-24px)}
.fx-schau .rahmen{position:relative;width:min(100%,900px);margin:0 auto;
  border-radius:var(--radius-lg,26px);overflow:hidden;
  border:1px solid var(--border,#DCE7F0);background:#fff;
  box-shadow:0 40px 90px -40px rgba(14,61,110,.42);will-change:transform}
.fx-schau .rahmen::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  border-radius:inherit;box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}
.fx-schau .leiste{display:flex;align-items:center;gap:7px;padding:11px 16px;
  background:linear-gradient(#fbfdff,#f2f8fd);border-bottom:1px solid var(--border,#DCE7F0)}
.fx-schau .leiste i{width:10px;height:10px;border-radius:50%;background:#dbe6f0;flex:0 0 auto}
.fx-schau .leiste i:first-child{background:#f3b8b8}
.fx-schau .leiste i:nth-child(2){background:#f7dca8}
.fx-schau .leiste i:nth-child(3){background:#b9e2c4}
.fx-schau .leiste span{margin-left:10px;font-size:.76rem;color:var(--muted,#5C7185);
  font-family:var(--font-body,system-ui);letter-spacing:.04em}
.fx-schau .rahmen img{display:block;width:100%;height:auto}

/* ── Reduced Motion: alles still, Inhalte bleiben vollständig ── */
@media (prefers-reduced-motion:reduce){
  .fx-strahlen::before,.fx-strahlen .fx-boden,.fx-strahlen .fx-saeule,
  .fx-strahlen .fx-bahn i{animation:none!important}
  /* Statt die Strahlen zu VERSTECKEN: als ruhendes Bild zeigen — sie stehen
     still, es bewegt sich nichts. Vorher blieb der Rahmen bei reduzierter
     Bewegung fast leer; die Buehne traegt aber die Aussage der IT-Seite. */
  .fx-strahlen .fx-bahn{display:block}
  .fx-strahlen .fx-bahn i{
    transform:none!important;filter:none!important;
    top:auto;bottom:6%;height:clamp(90px,26%,230px);opacity:.30;
    background:linear-gradient(to top,rgba(31,159,220,0),rgba(31,159,220,.7) 45%,rgba(95,194,236,.9));
    box-shadow:0 0 10px rgba(31,159,220,.32)}
  /* Hoehen staffeln, sonst wirkt es wie ein Balkendiagramm */
  .fx-strahlen .fx-bahn i:nth-child(3n){height:clamp(140px,40%,330px);opacity:.22}
  .fx-strahlen .fx-bahn i:nth-child(4n){height:clamp(60px,16%,150px);opacity:.34}
  .fx-strahlen .fx-bahn i:nth-child(5n){height:clamp(190px,54%,420px);opacity:.16}
  .fx-strahlen .fx-bahn i:nth-child(7n){height:clamp(40px,11%,110px);opacity:.38}
  .fx-glanz::before,.fx-glanz::after{display:none}
  .fx-glanz:hover{transform:none;box-shadow:none}
  .fx-schau .rahmen{transform:none!important}
}

/* =========================================================
   5 · HERO V5 — Portierung von „hero-section-5" (Tailark)
   Original: schwebende Pill-Navigation, vollflächiger Video-Rahmen,
   große linksbündige Headline, Logo-Laufband mit Progressive Blur.
   MFB-Übersetzung: statt Stock-Video das eigene Kohärenz-Kontinuum,
   statt fremder Firmenlogos die tatsächlich zitierten Fachquellen.
   ========================================================= */

/* ── Schwebende Pill-Navigation ────────────────────────────
   Bestehendes Header-Markup bleibt unverändert (5 Untermenüs und
   Mobil-Logik funktionieren weiter) — es wird nur neu eingekleidet. */
/* Der fixierte Kopf ist je Breite unterschiedlich hoch (Umbruch der Navigation).
   Feste px-Werte verdeckten den Pflicht-Disclaimer (gemessen: 14 px bei 820,
   50 px bei 410). Die Höhe wird deshalb im JS gemessen und hier eingesetzt;
   der Startwert dient nur, bis die erste Messung vorliegt. */
/* +2 px Sicherheit: die Kopfhoehe wird aufgerundet gemessen, zwischen zwei
   Messungen kann sie um Bruchteile eines Pixels wachsen (gemessen: 87,4 px bei
   gespeicherten 87 px -> 0,4 px des Pflicht-Disclaimers verdeckt). */
body.v5{padding-top:calc(var(--kopf-h,150px) + 2px)}
/* Sprungmarken und Tastaturfokus dürfen nicht hinter dem Kopf landen */
html:has(body.v5){scroll-padding-top:calc(var(--kopf-h,150px) + 14px)}
body.v5 .site-header{position:fixed;top:0;left:0;right:0;z-index:100;
  padding:10px 16px 0;background:transparent;backdrop-filter:none;border-bottom:none;
  transition:padding .3s ease}
body.v5 .site-header .nav{max-width:var(--maxw);margin:0 auto;border-radius:var(--radius-lg);
  padding:12px 22px;border:1px solid transparent;
  transition:background .35s ease,box-shadow .35s ease,padding .3s ease,border-color .35s ease}
body.v5 .site-header.is-glas{padding-top:6px}
body.v5 .site-header.is-glas .nav{background:rgba(255,255,255,.68);
  backdrop-filter:blur(22px) saturate(1.6);
  box-shadow:0 12px 40px -22px rgba(14,61,110,.42);
  padding-top:9px;padding-bottom:9px;border-color:rgba(255,255,255,.85)}
@media (max-width:768px){
  body.v5 .site-header .nav-links{background:rgba(255,255,255,.96);backdrop-filter:blur(20px);
    border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg)}
}

/* ── Hero-Rahmen: vollflächige Bühne mit runden Ecken ───── */
.hero-v5{position:relative;padding:clamp(30px,5vh,58px) 0 clamp(44px,7vh,88px)}
.hero-v5__rahmen{position:absolute;inset:6px;z-index:0;overflow:hidden;
  border-radius:clamp(22px,3.4vw,44px);border:1px solid rgba(14,61,110,.10);
  background:linear-gradient(170deg,#F7FBFE 0%,#EDF6FC 46%,#FFFFFF 100%)}
@media (max-width:700px){.hero-v5__rahmen{inset:4px;border-radius:20px}}
/* Eingebettete Variante des Kontinuums (nicht fixiert wie der Seitenhintergrund) */
/* Oben und unten ueber die Rahmenkante hinaus: die Ebene wird beim Scrollen um
   30 px verschoben (Parallaxe) — ohne diesen Ueberstand koennte an der Kante ein
   unbespielter Streifen sichtbar werden. Der Rahmen schneidet ab (overflow:hidden). */
.fx-flow--im-rahmen{position:absolute;left:0;right:0;top:-36px;bottom:-36px;
  z-index:0;overflow:hidden;pointer-events:none;background:transparent}
.fx-flow--im-rahmen::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 26% 46%,rgba(255,255,255,.9) 0%,rgba(255,255,255,.6) 32%,transparent 64%)}
/* Verlauf hält die Textseite ruhig, rechts darf das Kontinuum atmen */
.hero-v5__rahmen .vignette{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,.88) 0%,rgba(255,255,255,.58) 30%,rgba(255,255,255,.05) 60%,transparent 100%)}
@media (max-width:860px){
  .hero-v5__rahmen .vignette{background:linear-gradient(180deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,.58) 46%,transparent 100%)}
}
.hero-v5 .container{position:relative;z-index:2}
.hero-v5 .hero-grid{padding:clamp(38px,6vh,74px) 0 clamp(30px,5vh,56px)}
/* Größere Headline nach Vorbild der Vorlage (text-5xl → xl:text-7xl) */
.hero-v5 h1{font-size:clamp(2.05rem,5.2vw,4.2rem);line-height:1.06;letter-spacing:-.02em;
  max-width:22ch;text-wrap:balance}
.hero-v5 .lead{font-size:clamp(1.06rem,1.6vw,1.24rem);max-width:54ch}
/* Pill-Buttons mit Pfeil wie im Original */
.hero-v5 .hero-cta{gap:12px}
.hero-v5 .hero-cta .btn{border-radius:999px;min-height:52px;padding:0 26px;font-size:1.02rem;
  display:inline-flex;align-items:center;gap:10px}
.hero-v5 .hero-cta .btn--primary{padding-right:19px}
.hero-v5 .hero-cta .btn svg{transition:transform .25s ease}
.hero-v5 .hero-cta .btn:hover svg{transform:translateX(3px)}
.hero-v5 .hero-cta .btn--ghost{background:transparent;border:1px solid transparent}
.hero-v5 .hero-cta .btn--ghost:hover{background:rgba(14,61,110,.055)}

/* ── Vertrauensband: Laufschrift + Progressive Blur ─────── */
.band-quellen{background:var(--bg);padding:6px 0 26px}
.band-quellen .zeile{max-width:var(--maxw);margin:0 auto;padding:0 24px;
  display:flex;flex-direction:column;align-items:center;gap:10px}
@media (min-width:768px){.band-quellen .zeile{flex-direction:row;gap:0}}
.band-quellen .titel{font-size:.86rem;color:var(--muted);text-align:center;line-height:1.4}
@media (min-width:768px){
  .band-quellen .titel{max-width:12.5rem;text-align:right;padding-right:24px;
    border-right:1px solid var(--border);flex:0 0 auto}
}
.band-quellen .bahn{position:relative;padding:18px 0;width:100%;overflow:hidden}
@media (min-width:768px){.band-quellen .bahn{width:calc(100% - 12.5rem)}}
.band-lauf{display:flex;width:max-content;gap:56px;align-items:center;
  animation:bandLauf 46s linear infinite;will-change:transform}
.band-quellen .bahn:hover .band-lauf,
.band-quellen .bahn:focus-within .band-lauf{animation-duration:96s}
/* Echter Schalter (WCAG 2.2.2): hält die Bewegung an, nicht nur langsamer */
.band-lauf.ist-pausiert{animation-play-state:paused}
.band-pause{display:inline-flex;align-items:center;gap:7px;margin:0 auto;
  background:#fff;border:1px solid var(--border);border-radius:999px;
  padding:7px 15px;font:600 .8rem/1 var(--font-body);color:var(--muted);
  cursor:pointer;transition:border-color .2s,color .2s}
.band-pause:hover{border-color:var(--blue);color:var(--navy)}
.band-pause:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
.band-pause svg{width:13px;height:13px;flex:0 0 auto}
.band-quellen .schalterzeile{display:flex;justify-content:center;margin-top:10px}
.band-lauf span{font-family:var(--font-head);font-weight:600;font-size:.98rem;color:var(--navy);
  white-space:nowrap;opacity:.72;transition:opacity .25s ease}
.band-lauf span:hover{opacity:1}
.band-lauf span i{font-style:normal;color:var(--blue);margin-right:9px}
@keyframes bandLauf{to{transform:translateX(calc(-50% - 28px))}}
/* Progressive Blur: gestaffelte Ebenen mit Maskenverlauf (Port der React-Komponente) */
.band-quellen .kante{position:absolute;top:0;bottom:0;width:96px;z-index:2;pointer-events:none}
.band-quellen .kante--l{left:0}
.band-quellen .kante--r{right:0}
.band-quellen .kante b{position:absolute;inset:0;display:block}
.band-quellen .kante--l b:nth-of-type(1){backdrop-filter:blur(.5px);
  -webkit-mask-image:linear-gradient(270deg,transparent 0%,#000 22%,#000 44%,transparent 66%);
  mask-image:linear-gradient(270deg,transparent 0%,#000 22%,#000 44%,transparent 66%)}
.band-quellen .kante--l b:nth-of-type(2){backdrop-filter:blur(1.5px);
  -webkit-mask-image:linear-gradient(270deg,transparent 22%,#000 44%,#000 66%,transparent 88%);
  mask-image:linear-gradient(270deg,transparent 22%,#000 44%,#000 66%,transparent 88%)}
.band-quellen .kante--l b:nth-of-type(3){backdrop-filter:blur(3px);
  -webkit-mask-image:linear-gradient(270deg,transparent 44%,#000 66%,#000 100%);
  mask-image:linear-gradient(270deg,transparent 44%,#000 66%,#000 100%)}
.band-quellen .kante--r b:nth-of-type(1){backdrop-filter:blur(.5px);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 22%,#000 44%,transparent 66%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 22%,#000 44%,transparent 66%)}
.band-quellen .kante--r b:nth-of-type(2){backdrop-filter:blur(1.5px);
  -webkit-mask-image:linear-gradient(90deg,transparent 22%,#000 44%,#000 66%,transparent 88%);
  mask-image:linear-gradient(90deg,transparent 22%,#000 44%,#000 66%,transparent 88%)}
.band-quellen .kante--r b:nth-of-type(3){backdrop-filter:blur(3px);
  -webkit-mask-image:linear-gradient(90deg,transparent 44%,#000 66%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 44%,#000 66%,#000 100%)}
/* Harte Auslauf-Verläufe zusätzlich (im Original „from-background") */
.band-quellen .kante em{position:absolute;inset:0;display:block;font-style:normal}
.band-quellen .kante--l em{background:linear-gradient(90deg,var(--bg) 0%,rgba(255,255,255,0) 100%)}
.band-quellen .kante--r em{background:linear-gradient(270deg,var(--bg) 0%,rgba(255,255,255,0) 100%)}
.band-quellen .fussnote{max-width:var(--maxw);margin:2px auto 0;padding:0 24px;
  font-size:.78rem;color:var(--muted);text-align:center}

/* Das Schaufenster klebte in v4 direkt am Hero (negativer Rand).
   In v5 liegt das Vertrauensband dazwischen — sonst 40 px Überlappung. */
body.v5 .fx-schau{margin-top:clamp(10px,2vh,24px)}

/* ── Kontrast-Sicherung für Text über dem Kontinuum ────────
   Gemessen: grauer Kleintext (#5C7185) erreicht über einem voll
   deckenden Partikel nur 1,7:1 — WCAG AA verlangt 4,5:1.
   Zwei Maßnahmen, damit es auch im schlechtesten Fall hält:
   1) Hero-Lead und Hinweiszeile in dunkler Textfarbe (#1B2B3A)
      → 4,82:1 selbst bei voller Partikeldeckung.
   2) Weicher weißer Schleier hinter der Textspalte (wie der
      kräftige Scrim der Vorlage) — ohne sichtbare Kartenkante. */
.hero .lead,
.hero .hero-note{color:var(--text)}
.hero .hero-note{font-size:.9rem;letter-spacing:.01em}

.hero-v5 .hero-grid > div:first-child{position:relative}
.hero-v5 .hero-grid > div:first-child::before{
  content:"";position:absolute;z-index:-1;
  inset:-28px -40px -28px -44px;pointer-events:none;
  background:radial-gradient(120% 100% at 26% 50%,
    rgba(255,255,255,.94) 0%,rgba(255,255,255,.88) 42%,
    rgba(255,255,255,.55) 72%,rgba(255,255,255,0) 100%)}
@media (max-width:860px){
  .hero-v5 .hero-grid > div:first-child::before{inset:-20px -24px}
}

@media (prefers-reduced-motion:reduce){
  .band-lauf{animation:none;flex-wrap:wrap;width:auto;justify-content:center;gap:14px 28px}
  /* Ohne Laufbewegung braucht es die Kopien nicht — sonst steht jede Quelle zweimal */
  .band-lauf span[aria-hidden="true"]{display:none}
  .band-pause{display:none}
  .band-quellen .kante{display:none}
  .hero-v5 .hero-cta .btn:hover svg{transform:none}
  body.v5 .site-header .nav{transition:none}
}

/* =========================================================
   6 · GLANZ-MENÜ — Portierung von „glow-menu" (MenuBar)
   Radialer Schein über der Leiste bei Hover · 3D-Umklappen je Punkt ·
   bleibender Schein hinter dem aktiven Punkt · Linien-Icons.
   WICHTIG: kein overflow:hidden auf der Leiste — das würde die fünf
   Dropdown-Untermenüs abschneiden. Der Schein läuft von innen aus.
   ========================================================= */
.fx-glanzmenu{position:relative}
/* Schein über der ganzen Leiste, erscheint bei Hover (Vorlage: navGlowVariants) */
.fx-glanzmenu::before{
  content:"";position:absolute;inset:-6px;z-index:0;pointer-events:none;
  border-radius:calc(var(--radius-lg) + 6px);opacity:0;transition:opacity .5s cubic-bezier(.4,0,.2,1);
  background:
    radial-gradient(60% 120% at 22% 50%,rgba(14,61,110,.10),transparent 70%),
    radial-gradient(60% 120% at 52% 50%,rgba(31,159,220,.12),transparent 70%),
    radial-gradient(60% 120% at 82% 50%,rgba(95,194,236,.12),transparent 70%)}
.fx-glanzmenu:hover::before{opacity:1}
.fx-glanzmenu > *{position:relative;z-index:1}

/* Menüpunkt: Bühne für das Umklappen */
.fx-glanzmenu .fx-mp{position:relative;overflow:visible}
.fx-glanzmenu .fx-flip{position:relative;display:inline-block;perspective:620px;vertical-align:middle}
.fx-glanzmenu .fx-f,
.fx-glanzmenu .fx-b{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  transform-style:preserve-3d;
  transition:transform .42s cubic-bezier(.2,.75,.2,1),opacity .42s cubic-bezier(.2,.75,.2,1)}
.fx-glanzmenu .fx-f{transform-origin:center bottom}
.fx-glanzmenu .fx-b{position:absolute;left:0;top:0;transform-origin:center top;
  transform:rotateX(90deg);opacity:0}
/* Umklappen bei Hover und bei Tastatur-Fokus (nicht nur mit der Maus) */
.fx-glanzmenu .fx-mp:hover .fx-f,
.fx-glanzmenu .fx-mp:focus-visible .fx-f{transform:rotateX(-90deg);opacity:0}
.fx-glanzmenu .fx-mp:hover .fx-b,
.fx-glanzmenu .fx-mp:focus-visible .fx-b{transform:rotateX(0);opacity:1}
/* Untermenü offen? Dann bleibt der Punkt umgeklappt (Vorlage: aktiver Zustand) */
.fx-glanzmenu .fx-mp[aria-expanded="true"] .fx-f{transform:rotateX(-90deg);opacity:0}
.fx-glanzmenu .fx-mp[aria-expanded="true"] .fx-b{transform:rotateX(0);opacity:1}

/* Icons: Grundton grau-blau, färben sich im Marken-Ton beim Hover/aktiv */
.fx-glanzmenu .fx-mi{flex:0 0 auto;color:var(--muted);transition:color .3s ease}
/* Unter 1200 px sprengen Icons die Kopfzeile (Wortmarke und CTA schrumpfen,
   Menütexte brechen um) — dort bleibt die Navigation wie bisher rein textlich. */
@media (max-width:1200px){.fx-glanzmenu .fx-mi{display:none}}
.fx-glanzmenu .fx-mp[data-fx-ton="navy"]:hover .fx-mi,
.fx-glanzmenu .fx-mp[data-fx-ton="navy"].active .fx-mi{color:var(--navy)}
.fx-glanzmenu .fx-mp[data-fx-ton="blau"]:hover .fx-mi,
.fx-glanzmenu .fx-mp[data-fx-ton="blau"].active .fx-mi{color:var(--blue)}
.fx-glanzmenu .fx-mp[data-fx-ton="hell"]:hover .fx-mi,
.fx-glanzmenu .fx-mp[data-fx-ton="hell"].active .fx-mi{color:var(--blue-light)}

/* Bleibender Schein hinter dem aktiven Punkt (Vorlage: glowVariants, isActive) */
.fx-glanzmenu .fx-mp.active{color:var(--navy)}
.fx-glanzmenu .fx-mp.active::after{
  content:"";position:absolute;inset:-2px;z-index:-1;border-radius:14px;pointer-events:none;
  background:radial-gradient(circle,rgba(31,159,220,.16) 0%,rgba(31,159,220,.06) 52%,transparent 100%)}
.fx-glanzmenu .fx-mp[data-fx-ton="navy"].active::after{
  background:radial-gradient(circle,rgba(14,61,110,.15) 0%,rgba(14,61,110,.055) 52%,transparent 100%)}
.fx-glanzmenu .fx-mp[data-fx-ton="hell"].active::after{
  background:radial-gradient(circle,rgba(95,194,236,.20) 0%,rgba(95,194,236,.07) 52%,transparent 100%)}
/* Der aktive Punkt hat in style.css schon einen Hintergrund — der weicht dem Schein */
.fx-glanzmenu .nav-links a.active.fx-mp{background:transparent}

/* Sub-Toggle: Caret bleibt neben der Umklapp-Hülle stehen */
.fx-glanzmenu .sub-toggle.fx-mp{display:inline-flex;align-items:center;gap:6px}
.fx-glanzmenu .sub-toggle.fx-mp .caret{position:relative;z-index:1}

/* Fokus muss auf der Glasleiste sichtbar bleiben */
.fx-glanzmenu .fx-mp:focus-visible{outline:3px solid var(--navy);outline-offset:3px;border-radius:12px}

@media (prefers-reduced-motion:reduce){
  .fx-glanzmenu::before{display:none}
  .fx-glanzmenu .fx-f,.fx-glanzmenu .fx-b{transition:none}
  /* Das Menü ist hier bewusst AKTIV (es richtet die Zeilen aus), aber es darf
     nichts überblenden: Zustände wechseln sofort, ohne Bewegung. */
  .fx-glanzmenu .fx-mp,
  .fx-glanzmenu .fx-mp::after{transition:none!important;animation:none!important}
  /* Kein Umklappen: Vorderseite bleibt, Rückseite verschwindet ganz */
  .fx-glanzmenu .fx-mp:hover .fx-f,
  .fx-glanzmenu .fx-mp:focus-visible .fx-f,
  .fx-glanzmenu .fx-mp[aria-expanded="true"] .fx-f{transform:none;opacity:1}
  .fx-glanzmenu .fx-b{display:none}
}

/* ── Überlauf der Navigation zwischen 769 und 980 px ───────
   style.css schaltet erst bei 768 px auf das Burger-Menü. Dazwischen steht
   die volle Desktop-Navigation und läuft horizontal über — MESSBAR AUCH AUF
   DER LIVE-SEITE (820 px Viewport: Navigation reicht bis 908 px, das Dokument
   scrollt seitwärts). Das trifft Tablets im Hochformat und jeden Desktop bei
   400 % Zoom. In v5 greift der Burger deshalb schon ab 1259 px: NACHGERECHNET aus den
   gemessenen Breiten braucht die waagerechte Leiste in der kompakten Stufe
   (Schriftzug 330 px + sieben Punkte 745 px) mindestens 1218 px Fensterbreite,
   in der vollen Stufe 1290 px. Bei 1100 px fehlten 87 px, bei 1200 px noch 19 px. Die Regeln sind dieselben wie im 768-px-Block
   von style.css, nur auf body.v5 begrenzt.
   → Für die Live-Seite wäre derselbe Breakpoint-Wechsel in style.css nötig
     (betrifft alle 42 Seiten, deshalb hier nicht angetastet). */
@media (min-width:769px) and (max-width:1259px){
  body.v5 .site-header .nav{position:relative;flex-wrap:wrap}
  body.v5 .nav-toggle{display:block}
  body.v5 .site-header .nav-links{display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:2px;
    background:rgba(255,255,255,.96);backdrop-filter:blur(18px);
    border:1px solid var(--border);box-shadow:var(--shadow-lg);
    padding:10px 16px 16px;max-height:82vh;overflow-y:auto;border-radius:18px;margin-top:8px}
  body.v5 .site-header .nav-links.open{display:flex}
  body.v5 .site-header .nav-links li{width:100%}
  body.v5 .site-header .nav-links a{display:block;padding:12px}
  body.v5 .site-header .nav-links .btn{text-align:center;margin-top:8px}
  body.v5 .site-header .has-sub{position:static}
  body.v5 .site-header .sub-toggle{width:100%;justify-content:space-between;padding:12px}
  body.v5 .site-header .nav-sub{position:static;display:flex;min-width:0;border:0;box-shadow:none;
    background:transparent;padding:0 0 4px 12px;margin:0;backdrop-filter:none}
  body.v5 .site-header .nav-sub::before{display:none}
  /* Im aufgeklappten Zustand kein 3D-Umklappen — dort ist es eine Liste */
  body.v5 .fx-glanzmenu .fx-b{display:none}
  body.v5 .fx-glanzmenu .fx-mp:hover .fx-f{transform:none;opacity:1}
  /* Die Ausrichtung der waagerechten Leiste (mittig, nowrap, 42 px) gilt hier
     nicht — im Listenmodus wird linksbündig und umbruchfähig gesetzt. */
  body.v5 .site-header .nav-links > li{display:block}
  body.v5 .site-header .nav-links > li > a,
  body.v5 .site-header .nav-links > li > .sub-toggle{
    display:flex;align-items:center;justify-content:flex-start;
    white-space:normal;text-align:left;
    /* GEMESSEN: schlichte Links wurden 41 px hoch, Untermenue-Schalter nur 33 px.
       Eine gemeinsame Zeilenhoehe von 44 px raeumt das auf und ist zugleich die
       empfohlene Mindestgroesse einer Antippflaeche. */
    min-height:44px;padding:10px 12px;box-sizing:border-box}
  body.v5 .site-header .nav-links > li > .btn{
    max-width:none;white-space:nowrap;justify-content:center;padding:12px 18px}
}

/* =========================================================
   NACHARBEIT nach der adversarialen Prüfung (Punkte 1–3)
   ========================================================= */

/* ── PUNKT 1: Umklappen und Icons sind aus dem JS entfernt.
      Die Flip-/Icon-Regeln werden hier neutralisiert, damit nichts
      Verwaistes greift. Schein und Glas-Zustand bleiben — sie tragen
      Orientierung, nicht Zierde. ───────────────────────────── */
.fx-glanzmenu .fx-flip,
.fx-glanzmenu .fx-f,
.fx-glanzmenu .fx-b,
.fx-glanzmenu .fx-mi{all:unset}
.fx-glanzmenu .fx-b{display:none}

/* ── PUNKT 2: Headline passend zur zweispaltigen Bühne ───────
      Die Vorlage ist einspaltig gebaut, da tragen 4,2 rem. Hier stehen
      Text und Logo nebeneinander — gemessen brach die Zeile dann um und
      CTA sowie Qualifikationszeile rutschten nach unten aus dem Bild.
      Deshalb ein kleinerer Korridor; die Wirkung bleibt groß, weil die
      Zeilenlänge jetzt zur Spaltenbreite passt. */
.hero-v5 h1{font-size:clamp(1.9rem,3.4vw,3rem);line-height:1.1;max-width:19ch}
.hero-v5 .lead{font-size:clamp(1.02rem,1.35vw,1.15rem);max-width:46ch}
/* Ab hier ist genug Platz für die einspaltige Wirkung der Vorlage */
@media (min-width:1280px){
  .hero-v5 h1{font-size:clamp(2.4rem,3.6vw,3.4rem);max-width:21ch}
}
/* Unter 861 px stapelt style.css die Spalten — dort darf die Zeile groß sein */
@media (max-width:860px){
  .hero-v5 h1{font-size:clamp(1.85rem,7vw,2.6rem);max-width:24ch}
}

/* ── PUNKT 3: Bewegung im Hero beruhigen, ohne sie zu verlieren ──
      Vorher liefen vier Quellen dauerhaft nebeneinander: Kontinuum,
      Partikel-Logo, EKG-Linie und Logo-Puls. Für eine Zielgruppe mit
      ME/CFS, Migräne und POTS ist Dauerbewegung im Blickfeld belastend.
      Lösung: Jede Zierde spielt ihren Auftritt und kommt dann zur Ruhe.
      Das Kontinuum bleibt als EINZIGE ruhige Dauerbewegung — es ist die
      inhaltliche Aussage der Seite, nicht Dekoration. */

/* EKG-Linie: langsamer und nur vier Durchläufe, dann bleibt die zarte
   Grundlinie stehen (der wandernde Lichtpunkt läuft sauber aus dem Bild). */
.hero-v5 .mfb-ecg,
body.v5 .mfb-ecg{animation-duration:3.4s!important;animation-iteration-count:4!important;
  animation-fill-mode:forwards!important}
/* Logo-Puls: zwei Schläge zur Begrüßung, danach Ruhe (endet bei scale(1)). */
.hero-v5 .hero-logo,
body.v5 .hero-logo{animation-iteration-count:2!important;animation-fill-mode:forwards!important}
/* Das Kontinuum im Rahmen tritt einen Schritt zurück, damit das
   Partikel-Logo die Bühne behält. */
body.v5 .fx-flow--im-rahmen{opacity:.82}

/* Feinschliff zu Punkt 2: Bei 900 px Fensterhöhe lag die Qualifikationszeile
   noch 51 px unter der Kante. Etwas engere Bühne holt sie ins erste Bild,
   ohne dass es gedrängt wirkt (Kopfzeile + Hinweisband kosten schon 125 px). */
.hero-v5 .hero-grid{padding:clamp(20px,3.2vh,52px) 0 clamp(24px,3.6vh,46px)}
.hero-v5 h1{margin-bottom:.7rem}
.hero-v5 .lead{margin-bottom:1.2rem}
.hero-v5 .hero-cta{margin-bottom:.9rem}
.hero-v5 .trust-row{margin-top:14px}

/* ── Menü sauber ausrichten ────────────────────────────────
   Befund (gemessen bei 1440 px): Die Punkte hatten VIER verschiedene Höhen
   (40 · 70 · 71 · 74 px) und vier verschiedene Oberkanten — „Blog" saß 15 px
   tiefer als der Rest. Ursache: In style.css haben die schlichten Links
   („Start", „Blog") kein display, sind also `inline`, während die
   Untermenü-Schalter und der CTA `inline-flex` sind. Zwei Box-Modelle in
   einer Zeile richten sich nie gleich aus.
   Lösung: EIN Box-Modell, EINE Mindesthöhe, kein Umbruch, mittig zentriert. */
.fx-glanzmenu .nav-links{align-items:stretch}
.fx-glanzmenu .nav-links > li{display:flex;align-items:center}
.fx-glanzmenu .nav-links > li > a,
.fx-glanzmenu .nav-links > li > .sub-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:42px;padding:8px 10px;line-height:1.2;font-size:.93rem;
  white-space:nowrap;              /* nie umbrechen — sonst wird die Zeile schief */
  box-sizing:border-box}
/* Der CTA behält seine eigene Form, richtet sich aber auf derselben Linie aus */
/* Der CTA bleibt zweizeilig wie gewohnt — das spart ~75 px Breite und
   schafft damit erst den Abstand hinter dem Schriftzug. Zentriert, damit
   beide Zeilen auf der gemeinsamen Mittellinie der Leiste sitzen. */
.fx-glanzmenu .nav-links > li > .btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:42px;padding:8px 16px;font-size:.9rem;
  white-space:normal;text-align:center;line-height:1.16;max-width:14ch;
  box-sizing:border-box}

/* Schriftzug und „Start" klebten aneinander (gemessen: 16 px, also nur der
   reine Flex-Abstand). Jetzt ein echter Luftraum, der mit der Fensterbreite
   mitwächst — „Start" rückt nach rechts. */
.nav.fx-glanzmenu{gap:clamp(18px,2.6vw,48px)}
.nav.fx-glanzmenu .brand{flex:0 0 auto}
/* Die Kopfleiste ist ohnehin fensterbreit; nur .nav war auf 1120 px begrenzt.
   Gemessen brauchen Schriftzug (364 px) und sieben Punkte mehr — also darf die
   Leiste auf breiten Fenstern den vorhandenen Platz nutzen. Der Inhalt darunter
   bleibt bei 1120 px. */
@media (min-width:1260px){
  /* Spezifitaet muss body.v5 .site-header .nav (weiter oben) uebertreffen */
  body.v5 .site-header .nav.fx-glanzmenu,
  .site-header .nav.fx-glanzmenu{max-width:min(1320px,calc(100% - 32px))}
}
/* Caret des Untermenüs sitzt optisch auf der Textlinie */
.fx-glanzmenu .sub-toggle .caret{display:inline-flex;align-items:center;line-height:1;
  margin-left:2px;font-size:.72em;transform-origin:center}

/* Aktiver Punkt: Hinterlegung bleibt (Orientierung „wo bin ich?"), der
   Schein legt sich darüber statt sie zu ersetzen. */
.fx-glanzmenu .nav-links a.active.fx-mp{background:rgba(31,159,220,.10);color:var(--navy)}
.fx-glanzmenu .fx-mp.active::after{inset:0;border-radius:11px}
/* Hover-Fläche gleich groß wie die aktive Fläche — sonst „hüpft" es */
.fx-glanzmenu .nav-links a.fx-mp:hover,
.fx-glanzmenu .nav-links .sub-toggle.fx-mp:hover{border-radius:11px}

/* Bei knappem Platz lieber engere Abstände als Umbruch */
/* Bei knappem Platz lieber engere Abstände und ein etwas kleinerer Schriftzug
   als ein Umbruch oder ein Überlauf. */
@media (max-width:1340px){
  .fx-glanzmenu .nav-links > li > a,
  .fx-glanzmenu .nav-links > li > .sub-toggle{padding:8px 7px;font-size:.89rem}
  .fx-glanzmenu .nav-links > li > .btn{padding:8px 12px;font-size:.87rem;max-width:13ch}
  .nav.fx-glanzmenu{gap:16px}
  .nav.fx-glanzmenu .brand span{font-size:1rem}
}

/* =========================================================
   AURORA IM HERO-RAHMEN (IT-/KI-Seite)
   Vorher lief auf dieser Seite ZWEI Hintergruende gleichzeitig: der seitenweite
   fixierte ∞-Hintergrund aus script.js UND die Aurora im Hero — die Strahlen
   liefen dadurch quer durch das Salutogenese-Zeichen. Jetzt gilt hier dieselbe
   Buehne wie auf der Startseite (Rahmen mit runden Ecken), darin ausschliesslich
   die Aurora, und die Strahlen enden VOR der Logo-Spalte.
   ========================================================= */
/* Die Buehne endet VOR der Logo-Spalte — nicht per Maske ueber die ganze
   Breite, sondern als eigener Bereich. GEMESSEN: die Logo-Spalte beginnt bei
   rund 53 % der Rahmenbreite (1348 px von 2533 px); eine Maske bis 68 % liess
   die Strahlen noch in das Zeichen laufen. Jetzt endet der Bereich bei 52 %
   und blendet an seiner rechten Kante weich aus. */
.fx-aurora--im-rahmen{position:absolute;left:0;top:0;bottom:0;right:48%;
  z-index:0;pointer-events:none;overflow:hidden}
.fx-aurora--im-rahmen .fx-strahlen{
  -webkit-mask:linear-gradient(90deg,#000 0%,#000 64%,rgba(0,0,0,.35) 86%,transparent 100%);
          mask:linear-gradient(90deg,#000 0%,#000 64%,rgba(0,0,0,.35) 86%,transparent 100%)}
@media (max-width:860px){
  /* Gestapelt steht das Logo UNTER dem Text — dann ueber die volle Breite,
     aber nach unten ausgeblendet. */
  .fx-aurora--im-rahmen{right:0;bottom:auto;height:56%}
  .fx-aurora--im-rahmen .fx-strahlen{
    -webkit-mask:linear-gradient(180deg,#000 0%,#000 58%,transparent 100%);
            mask:linear-gradient(180deg,#000 0%,#000 58%,transparent 100%)}
}
/* Auf dieser Seite darf der Schleier leichter sein: der Text steht in Navy auf
   hellem Grund, und die Strahlen sollen sichtbar bleiben. */
body.v5.it .hero-v5__rahmen .vignette{
  background:linear-gradient(100deg,rgba(255,255,255,.86) 0%,rgba(255,255,255,.44) 22%,
             rgba(255,255,255,.08) 44%,transparent 62%)}
@media (max-width:860px){
  body.v5.it .hero-v5__rahmen .vignette{
    background:linear-gradient(180deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,.6) 44%,transparent 100%)}
}
/* Logo liegt sauber ueber der Buehne */
body.v5.it .hero-v5 .hero-visual{position:relative;z-index:2}
/* Das Statistik-Band gehoert zum Inhalt, nicht in die Buehne */
body.v5.it .hero-v5 .statband{position:relative;z-index:2;margin-top:clamp(18px,3vh,30px)}