/* ==========================================================================
   Fluint Health, Variante "apple": Seitenaufbau nach dem Muster von Apple.com,
   Gestaltung nach dem Fluint Health Design System (00_unternehmen/index.html,
   02_farben/farben.css, 03_typografie/typografie.css):
     Primaer Stealth Green #7F9F9F · Sekundaer Blassrot #D9A8A8 · Neutrale hell/dunkel
     Headlines Onest · Fliesstext Roboto · keine dritte Schrift
     Rundung ausschliesslich unten rechts (Chips 10, Buttons/Karten 12, grosse Flaechen 18)
     Drei Ebenen statt Schatten · keine Verlaeufe als Flaechenfarbe · ein Primaer-CTA je Ansicht
     Fokusring 2 px #7F9F9F, Versatz 2 px · Motion dezent, prefers-reduced-motion respektiert
   Keine Inline-Styles in den Seiten (CSP: style-src 'self').
   ========================================================================== */

/* ------- Tokens (aus farben.css, Namen der Hauptinstanz als Aliase) ------- */
:root{--sec-pad:clamp(64px,8vw,112px);--head-gap:clamp(40px,5vw,64px);
  --fh-primary:#7F9F9F; --fh-primary-hover:#7F9F9F; --fh-primary-dark:#7F9F9F; --fh-primary-light:#7F9F9F; --fh-primary-tint:#7F9F9F;
  --fh-red:#D9A8A8; --fh-red-hover:#C48F8F; --fh-red-dark:#A87070; --fh-red-tint:#F6E9E9;
  --l1:#EFEFEF; --l2:#E0E0E0; --l3:#FFFFFF;                 /* Ebene 1, 2, 3 (hell) */
  --d1:#2B2B2B; --d2:#404040; --d3:#383838;                 /* Ebene 1, 2, 3 (dunkel) */
  --text:#212121; --text-soft:#3A3A3A; --muted:#5C5C5C; --border:#D5D5D5;
  --dtext:#FFFFFF; --dtext-soft:#D0D0D0; --dmuted:#B5B5B5; --dborder:#3A3A3A;
  --accent-text:#7F9F9F; --accent-text-strong:#7F9F9F;      /* Akzent als Text (WCAG AA auf hellen Flaechen) */
  --success:#7F9F9F; --warning:#C9A94E; --info:#6EA0DC; --error:#A87070;
  --radius-sm:0 0 10px 0; --radius:0 0 12px 0; --radius-md:0 0 14px 0; --radius-lg:0 0 18px 0;
  --nav-h:48px; --localnav-h:52px;
  --w-content:1200px; --w-text:720px;
  --gutter:clamp(16px,4vw,48px);
  --ease:ease; --t-hover:.15s; --t-panel:.25s;
  --font-head:'Onest',sans-serif; --font-body:'Roboto',sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);font-size:15px;line-height:1.6;color:var(--text);background:var(--l3);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.menu-open{overflow:hidden}
h1,h2,h3,h4,h5{font-family:var(--font-head);color:var(--text);font-weight:600;line-height:1.2}
p{color:var(--text)}
a{color:var(--accent-text);text-decoration:none;transition:color var(--t-hover) var(--ease)}
a:hover{text-decoration:underline;text-underline-offset:3px}
:where(p,li) a:where(:not(.link,.btn,.nav-cta)){text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--fh-primary)}
:where(footer li,.nav-menu li,.localnav-links,.legal-toc li) a{text-decoration:none}
img,svg,iframe{max-width:100%;display:block}
img{height:auto}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--fh-primary-dark);outline-offset:2px}
::selection{background:var(--fh-primary-tint)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:1000;background:var(--d1);color:#fff;padding:10px 16px;border-radius:var(--radius)}
.skip:focus{top:12px}
section[id],div[id]{scroll-margin-top:calc(var(--nav-h) + var(--localnav-h) + 12px)}

/* ------- Typografie-Skala (Display Onest 300, H1 bis H3 Onest 600, Body Roboto) ------- */
.t-hero{font-size:clamp(30px,3.2vw,42px);font-weight:600;line-height:1.15;letter-spacing:-0.3px}
/* Eine Sektionsueberschrift fuer alle Buehnen und Kapitel (Groesse, Gewicht, Zeilenhoehe identisch) */
.t-stage,.t-headline{font-size:clamp(30px,3.2vw,42px);font-weight:600;line-height:1.15;letter-spacing:-0.3px}
.t-tile{font-size:clamp(22px,2.2vw,28px);font-weight:600;line-height:1.25}
/* Eine Unterzeile fuer alle Sektionen: Roboto 400, gleiche Groesse, Akzentfarbe (dunkel: Primaer Hell) */
.t-sub,.chapter-head .t-intro{font-family:var(--font-body);font-weight:400;font-size:clamp(17px,1.4vw,19px);line-height:1.55;color:var(--accent-text)}
.t-intro{font-family:var(--font-body);font-weight:400;font-size:clamp(17px,1.4vw,19px);line-height:1.55;color:var(--text-soft)}
.t-body{font-size:15px;line-height:1.6}
.t-caption{font-size:11.5px;line-height:1.4;letter-spacing:0.3px;color:var(--muted)}
.eyebrow{display:inline-block;font:500 11px var(--font-body);letter-spacing:1px;text-transform:uppercase;color:var(--accent-text);margin-bottom:12px}
.wm{font-family:var(--font-head);text-transform:none}
.accent{color:var(--accent-text)}
.muted{color:var(--muted)}
.center{text-align:center}
.measure{max-width:var(--w-text);margin-left:auto;margin-right:auto}
.measure-wide{max-width:860px;margin-left:auto;margin-right:auto}

/* ------- Links mit Chevron, Buttons (Teil 2, Abschnitt 21) ------- */
.link{display:inline-flex;align-items:center;gap:4px;font-size:clamp(15px,1.3vw,18px);color:var(--accent-text);font-weight:500}
.link::after{content:"\203A";font-size:1.25em;line-height:1;transform:translateY(-1px);transition:transform var(--t-hover) var(--ease)}
.link:hover,.link:focus-visible{text-decoration:none;color:var(--accent-text-strong)}
.chapter.dark .link:hover,.stage.dark .link:hover{color:var(--dtext)}
.link:hover::after{transform:translate(3px,-1px)}
.link-row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 36px;margin-top:22px}
.wv + .link-row{margin-top:44px}
.wv.wv-links article{grid-row:span 5}
.wv article .link{align-self:end;margin-top:18px;font-size:14px}
.gallery-cta{margin-top:var(--sec-pad)}
/* Hinweis mit CTA unter einem Kartenraster: mittig zwischen Raster und Sektionsende, praesenter als die Bildunterschrift */
/* Haeufige Fragen: statische Definitionsliste, ohne JavaScript lesbar; Frage links, Antwort rechts */
.faq{display:grid;grid-template-columns:minmax(0,1fr);gap:0;max-width:960px;margin:0 auto}
.faq dt{font:600 19px/1.35 var(--font-head);color:var(--text);padding-top:28px;letter-spacing:-.01em}
.faq dd{margin:10px 0 28px;font-size:16px;line-height:1.65;color:var(--text-soft);border-bottom:1px solid var(--border)}
.faq dd:last-child{border-bottom:0}
.faq dd a{color:var(--accent-text);font-weight:500}
.chapter.dark .faq dt{color:#fff} .chapter.dark .faq dd{color:var(--dtext-soft);border-color:var(--d2)}
@media (min-width:821px){.faq{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(24px,4vw,56px)}
  .faq dt{padding:28px 0;border-bottom:1px solid var(--border)} .faq dd{margin:0;padding:28px 0}
  .faq dt:last-of-type,.faq dd:last-of-type{border-bottom:0}}
.section-note{text-align:center;max-width:720px;margin-left:auto;margin-right:auto}
.chapter .wrap > .section-note,.chapter .wrap-wide > .section-note{margin-top:var(--sec-pad)}
.section-note p{font-size:clamp(17px,1.4vw,19px);line-height:1.55;color:var(--text-soft)}
.section-note .link-row{margin-top:18px}
.chapter.dark .section-note p{color:var(--dtext-soft)}   /* Link unter der Galerie: mittig zwischen Steuerung und Sektionsende (Abstand oben = unterer Sektionsabstand) */   /* Links unter den Werteversprechen-Kacheln mit mehr Luft */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:500 15px var(--font-body);line-height:1.3;border-radius:var(--radius);padding:10px 22px;transition:background-color var(--t-hover) var(--ease),color var(--t-hover) var(--ease),border-color var(--t-hover) var(--ease);text-align:center;border:1px solid transparent;cursor:pointer}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--fh-primary-dark);color:#fff;border-color:var(--fh-primary-dark)}
.btn-primary:hover{background:var(--fh-primary-hover);border-color:var(--fh-primary-hover)}
.btn-primary:active{background:var(--fh-primary-dark)}
.btn-ghost{background:transparent;color:var(--accent-text);border-color:var(--fh-primary)}
.btn-ghost:hover{background:var(--fh-primary-dark);border-color:var(--fh-primary-dark);color:#fff}
.btn-sm{font-size:13px;padding:7px 14px}
.btn-group{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:28px}
.btn[disabled]{opacity:.38;cursor:not-allowed}

/* ------- Globale Navigation (schlank, zentriert, leicht transparent) ------- */
.nav-wrap{position:sticky;top:0;z-index:300;height:var(--nav-h);background:#fff}   /* deckend weiss, keine Transparenz, keine Trennlinie zur Unternavigation */
.nav-wrap:not(:has(+ .localnav)){border-bottom:1px solid var(--border)}
.nav{height:var(--nav-h);max-width:var(--w-content);margin:0 auto;padding:0 var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:12px}
.nav-logo{display:flex;align-items:center;color:var(--text);height:100%}
.nav-logo svg{height:24px;width:auto}
.nav-logo:hover{text-decoration:none}
.nav-menu{display:flex;align-items:center;gap:clamp(14px,2.4vw,34px)}
.nav-menu a{font:400 13px var(--font-body);letter-spacing:0.2px;color:var(--text);padding:6px 0;white-space:nowrap}
.nav-menu a:hover,.nav-menu a[aria-current="page"]{text-decoration:none;color:var(--accent-text)}
.nav-menu a .wm{font-size:14px}
.nav-menu li.mobile-cta{display:none}
.nav-cta{display:inline-flex;align-items:center;white-space:nowrap;font:500 12.5px var(--font-body);background:var(--fh-primary-dark);color:#fff;padding:7px 14px;border-radius:var(--radius-sm);transition:background-color var(--t-hover) var(--ease)}
.nav-cta:hover{background:var(--fh-primary-hover);text-decoration:none;color:#fff}
.burger{display:none;width:44px;height:44px;flex-direction:column;align-items:center;justify-content:center;gap:5px;border-radius:var(--radius-sm)}
.burger span{display:block;width:18px;height:1.5px;background:var(--text);transition:transform var(--t-panel) var(--ease),opacity var(--t-hover)}
body.menu-open .burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ------- Lokale Navigation einer Produktseite ------- */
.localnav{position:sticky;top:var(--nav-h);z-index:290;height:var(--localnav-h);background:#fff;border-bottom:1px solid var(--border)}   /* deckend weiss wie das Hauptmenue */
.localnav-in{height:100%;max-width:var(--w-content);margin:0 auto;padding:0 var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:16px}
.localnav-title{font:600 19px var(--font-head);color:var(--text);white-space:nowrap}
.localnav-title:hover{text-decoration:none}
.localnav-title small{font:500 11px var(--font-body);color:var(--muted);letter-spacing:1px;text-transform:uppercase;margin-left:8px}
.localnav-links{display:flex;align-items:center;gap:clamp(14px,2vw,28px);margin-left:auto}
/* Unterpunkte beginnen auf der Hoehe des ersten Hauptmenuepunkts (lunéa); --menu-x setzt das Skript aus der Hauptnavigation */
.localnav-in{position:relative}
/* Dreizeilige Unternavigation ab 1025 px schon per CSS (vor dem Skript), damit beim Laden nichts springt (CLS).
   --menu-x ist eine Naeherung an die Position von „lunéa“ im Hauptmenue; site.js setzt den gemessenen Wert. */
@media (min-width:1025px){
  :root{--localnav-h:77px}
  .localnav{height:auto;--menu-x:min(calc(40vw - 161.5px), max(305.5px, calc(318.5px - (100vw - 1200px) * 0.0542)))}
  .localnav .localnav-in{display:block;height:auto;padding-top:12px;padding-bottom:14px}
  .localnav .localnav-title{display:block;margin-left:var(--menu-x);line-height:1.3}
  .localnav .localnav-links{margin-left:var(--menu-x);margin-top:10px;justify-content:flex-start}
}
.localnav-links a{font:400 13px var(--font-body);color:var(--text-soft);white-space:nowrap}
.localnav-links a:hover{color:var(--accent-text);text-decoration:none}

/* ------- Buehnen (volle Breite, zentrierter Text, Medium darunter); Ebene 1 und 3 im Wechsel ------- */
.stage{position:relative;overflow:hidden;padding:var(--sec-pad) 0 0;text-align:center}
.stage.light{background:var(--l3);color:var(--text)}
.stage.tint,.stage.soft{background:var(--l1)}
.stage.dark{background:var(--d1);color:var(--dtext)}
.stage-text{max-width:860px;margin:0 auto;padding:0 var(--gutter)}
.stage-text h1,.stage-text h2{color:inherit}
.stage.dark .t-sub{color:var(--fh-primary-light)}
.stage.dark p{color:var(--dtext-soft)}
.stage.dark .eyebrow{color:var(--fh-primary-light)}
.stage.dark .link{color:var(--fh-primary-light)}
.stage.dark .btn-ghost{color:var(--dtext);border-color:var(--fh-primary-light)}
.stage.dark .btn-ghost:hover{background:var(--fh-primary-light);border-color:var(--fh-primary-light);color:var(--d1)}
.stage .t-sub{margin-top:14px}
.stage .chips{margin-top:24px}
.stage-media{position:relative;margin-top:var(--head-gap);padding:0 var(--gutter)}
.stage-media.bleed{padding:0}
.stage-media > img{margin:0 auto;border-radius:var(--radius-lg);border:1px solid var(--border)}
.stage-media.flat > img{border:0;border-radius:0}
.stage.pad-b{padding-bottom:clamp(56px,8vw,104px)}
.stage-media.win{max-width:1180px;margin-left:auto;margin-right:auto}
.stage-media.win-sm{max-width:960px;margin-left:auto;margin-right:auto}
.stage-media .hs-note,.stage-media.pad-b{padding-bottom:clamp(32px,4vw,56px)}
.stage.light .stage-media.win-sm .hs-window{margin-bottom:0}

/* Fensterrahmen fuer Produktansichten und das Demo-Widget: Ebene 2 als Rahmen, eine Ecke, kein Schatten */
.hs-window{position:relative;width:100%;border-radius:var(--radius-lg);overflow:hidden;background:var(--l2);border:1px solid var(--border)}
.stage.dark .hs-window,.chapter.dark .hs-window{border-color:var(--d2);background:var(--d2)}
.hs-screen{position:relative;width:100%;aspect-ratio:16/9;background:var(--l1);overflow:hidden}
.hs-bar{position:absolute;top:0;left:0;right:0;height:30px;z-index:5;display:flex;align-items:center;justify-content:center;padding:0 14px;background:var(--l2);border-bottom:1px solid var(--border)}
.hs-lights{display:none}
.hs-url{height:20px;min-width:32%;padding:0 10px;display:flex;align-items:center;justify-content:center;gap:5px;background:var(--l3);border-radius:var(--radius-sm);font:400 9.5px var(--font-body);color:var(--muted)}
.hs-url svg{width:9px;height:9px;fill:var(--muted);color:var(--muted)}
.hs-app{position:absolute;inset:30px 0 0 0;overflow:hidden;background:var(--l1)}
.hs-frame{position:absolute;left:0;top:0;width:1280px;max-width:none;height:720px;border:0;transform-origin:0 0;pointer-events:none;background:var(--l1);opacity:0;transition:opacity .6s var(--ease)}
.hs-frame.is-ready{opacity:1}
.hs-frame.hs-mobile{display:none;width:720px}
.hs-poster{position:absolute;inset:0;transition:opacity .6s var(--ease)}
/* Hero als dunkler Akt: Buehne ohne untere Kante, das Fenster laeuft in die Werteversprechen hinein */
.stage.hero-act{overflow:visible;padding-bottom:0}
.hero-act .hero-media{position:relative;z-index:2;margin-bottom:calc(-1 * clamp(48px,7vw,110px))}
.hero-act .hero-media .hs-window{position:relative;z-index:1;border-color:var(--d2)}
.stage.act-follow{padding-top:calc(var(--sec-pad) + clamp(48px,7vw,110px))}
/* Bildschirm ohne Browserleiste und ohne Blende: die Produkt-UI steht direkt auf der dunklen Buehne, nur eine 1-px-Kontur, Rundung unten rechts */
.hs-device{padding:0;background:transparent;border:1px solid #4A4A4A;border-radius:var(--radius-lg);overflow:hidden}
.hs-device .hs-screen{background:var(--l1)}
.hs-device .hs-bar{display:none}
.hs-device .hs-app{inset:0}
.stage.dark .hs-window.hs-device{background:transparent;border-color:#4A4A4A}
@keyframes heroFade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes heroRise{from{transform:translateY(28px) scale(.97)}to{transform:none}}
.hero-act .eyebrow,.hero-act .t-hero,.hero-act .t-sub,.hero-act .link-row{animation:heroFade .7s var(--ease) both}
.hero-act .t-hero{animation-delay:.08s}
/* Glow der Wortmarke im Fluint-Farbraum (Stealth Green), weich und ruhig; einzige Leuchtwirkung der Seite */
.hero-act .t-hero .wm{color:#fff;text-shadow:0 0 18px rgba(127,159,159,.7),0 0 48px rgba(127,159,159,.45),0 0 110px rgba(127,159,159,.28)}
.hero-act .t-sub{animation-delay:.16s}
.hero-act .link-row{animation-delay:.24s}
.hero-act .hero-media{animation:heroRise .9s cubic-bezier(.22,1,.36,1) .3s both}
@media (prefers-reduced-motion:reduce){.hero-act .eyebrow,.hero-act .t-hero,.hero-act .t-sub,.hero-act .link-row,.hero-act .hero-media{animation:none}}

.hs-poster img{width:100%;height:100%;object-fit:cover;object-position:top left}
.hs-app.is-live .hs-poster{opacity:0}
html.no-js .hs-frame{display:none}
.hs-still{display:block;width:100%;height:auto;margin-top:30px}
.hs-shot{position:absolute;inset:30px 0 0 0;width:100%;height:calc(100% - 30px);object-fit:cover;object-position:top left}
/* Bildfolge im Fenster (Atlas-Buehne): sieben Ansichten, weiche Ueberblendung, Fensterhoehe folgt dem Bildformat */
.hs-screen-auto{aspect-ratio:auto}
/* Grouper: Die Ansicht wechselt wie im Produkt zwischen eingeklapptem Ergebnis (Grundbild) und aufgeklapptem Ergebnis-Panel.
   Das Panel (ohne Seitenleiste) sitzt exakt dort, wo im Grundbild der Bereich Diagnosen/Prozeduren beginnt (183 Bild-px unter
   der Kopfzeile), gleich skaliert; der Wechsel ist ein kurzer Ueberblendschnitt (0,3 s), kein Hereinfahren. */
.hs-screen:has(.hs-drawer){container-type:inline-size}
.hs-shot.hs-drawer{inset:calc(30px + 11.4375cqw) auto auto 2.8125%;width:97.1%;height:auto;object-fit:fill;border:1px solid rgba(0,0,0,.08);border-radius:6px;opacity:0;animation:hsflip 14s linear infinite}
@keyframes hsflip{0%,30%{opacity:0}32.2%,78%{opacity:1}80.2%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.hs-shot.hs-drawer{display:none}}
.hs-slides{--sd:3.5s;--st:calc(var(--sd) * 7);position:relative;margin-top:30px;aspect-ratio:1600/826;background:#F2F2F2;overflow:hidden}
.hs-slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top left;opacity:0;animation:hsSlide var(--st) linear infinite;animation-play-state:paused;backface-visibility:hidden}
.hs-slides.is-ready img{animation-play-state:running}
.hs-slides img:nth-child(1){animation:none;opacity:1}  /* erstes Bild liegt dauerhaft als Basis, die weiteren blenden darueber ein */
.hs-slides img:nth-child(2){animation-delay:calc(-6 * var(--sd))}
.hs-slides img:nth-child(3){animation-delay:calc(-5 * var(--sd))}
.hs-slides img:nth-child(4){animation-delay:calc(-4 * var(--sd))}
.hs-slides img:nth-child(5){animation-delay:calc(-3 * var(--sd))}
.hs-slides img:nth-child(6){animation-delay:calc(-2 * var(--sd))}
.hs-slides img:nth-child(7){animation-delay:calc(-1 * var(--sd))}
.hs-slides img:last-child{animation-name:hsSlideLast}
@keyframes hsSlide{0%{opacity:0}3.7%{opacity:1}18%{opacity:1}18.01%{opacity:0}100%{opacity:0}}
@keyframes hsSlideLast{0%{opacity:0}3.7%{opacity:1}14.3%{opacity:1}18%{opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.hs-slides img{animation:none}.hs-slides img:first-child{opacity:1}}
.hs-note{margin:14px auto 0;font-size:11.5px;letter-spacing:0.3px;color:var(--muted);max-width:720px}
.stage.dark .hs-note{color:var(--dmuted)}

/* ------- Kachelraster (zwei Spalten); Flaechen in Ebenen und Tints, keine Verlaeufe ------- */
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:12px;background:var(--l3);overflow:hidden}
.tile{position:relative;overflow:hidden;min-height:540px;padding:var(--head-gap) clamp(20px,3vw,40px) 0;text-align:center;display:flex;flex-direction:column;align-items:center;background:var(--l1);border:1px solid var(--border);border-radius:var(--radius-lg)}
.tile.dark{background:var(--d1);border-color:var(--d1);color:var(--dtext)}
.tile.dark h3,.tile.dark p{color:var(--dtext)}
.tile.dark .t-sub{color:var(--fh-primary-light)}
.tile.dark .link{color:var(--fh-primary-light)}
.tile.dark .eyebrow{color:var(--fh-primary-light)}
.tile.petrol{background:var(--fh-primary-tint)}
.tile.green{background:var(--l3)}
.tile.blue{background:var(--l2)}
.tile.blue .eyebrow,.tile.blue .t-sub,.tile.blue .link{color:var(--accent-text-strong)}
.tile.plum{background:var(--fh-red-tint)}
.tile.wide{grid-column:1 / -1;min-height:460px}
/* Bildwelt-Kachel nach dem Muster der Apple-Kacheln: Text oben wie in jeder Kachel, das Motiv (Original 1:1 aus 04_bildwelt) steht darunter in voller Breite,
   oben weich in die Kachelflaeche eingeblendet und unten von der Kachelkante angeschnitten. Kein Scrim, kein Text ueber dem Bild. */
.tile.photo{padding-bottom:0;min-height:620px}
.tile.photo.pos-low .photo-media > img{object-position:50% 24%}
.tile.photo.pos-high .photo-media > img{object-position:50% 6%}
.tile.photo.pos-mid .photo-media > img{object-position:50% 40%}
.tiles.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.tiles.three .tile.photo{min-height:560px}
.tiles.three .tile .photo-media{min-height:240px}
.tiles.inner{padding:0;background:transparent;margin-top:var(--head-gap)}
.tiles.compact .tile{min-height:0;padding-bottom:var(--head-gap);justify-content:flex-start}
.tiles.compact .tile-text{max-width:520px}
.tile.light{background:var(--l1)}
.chapter.soft .tile.light,.chapter.soft .tile.green{background:var(--l3)}
.stage-media.photo{max-width:1180px;margin-left:auto;margin-right:auto}
.stage-media.photo > img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius-lg);border:1px solid var(--border);border-bottom:0}
.stage.dark .stage-media.photo > img{border-color:var(--d2)}
.tile .ec-check{width:100%;max-width:560px;text-align:left}
.tile .ec-check li{background:rgba(255,255,255,.55)}
.tile.green .ec-check li{background:rgba(255,255,255,.6)}
.tile.photo.light{background:var(--l1)}
.tile.photo.light .t-sub,.tile.photo.light .link{color:var(--accent-text)}
.tile .photo-media{margin-top:28px;padding:0;flex:1 1 auto;min-height:290px;width:calc(100% + 2*clamp(20px,3vw,40px));position:relative;overflow:hidden;display:block}
.tile .photo-media > img{position:absolute;inset:0;width:100%;height:100%;max-height:none;border:0;border-radius:0;object-fit:cover;object-position:50% 0;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0,#000 26%);mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0,#000 26%)}
.tile-text{max-width:560px;position:relative;z-index:1}
.tile-text .t-sub{margin-top:10px}
.tile .link-row{margin-top:16px}
.tile .brand-mark{position:absolute;top:24px;right:28px;z-index:2;display:flex;align-items:center;gap:10px;color:var(--text);font:300 26px/1 var(--font-head);letter-spacing:-.01em}
.tile .brand-mark img{width:44px;height:auto}
/* Kachel mit hochformatigem Foto rechts, Text links */
.tile.side{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,44%);align-items:center;padding:0;text-align:left}
.tile.side .tile-text{padding:var(--head-gap) clamp(20px,3vw,40px);max-width:none;justify-self:start}
.tile.side .tile-text .t-sub,.tile.side .tile-text .link-row{margin-left:0;margin-right:0}
.tile.side .link-row{justify-content:flex-start}
.tile.side .side-media{position:relative;align-self:stretch;min-height:540px;margin:0;padding:0;display:block;overflow:hidden}
.tile.side .side-media > img{position:absolute;inset:0;width:100%;height:100%;max-height:none;border:0;border-radius:0;object-fit:cover;object-position:50% 30%}
.tile.side .side-media::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--l1) 0%,rgba(255,255,255,0) 14%);z-index:1;pointer-events:none}
.tile-media{margin-top:auto;padding-top:40px;width:100%;display:flex;justify-content:center;align-items:flex-end;position:relative;z-index:1}
.tile-media > img{max-height:300px;width:auto;border-radius:var(--radius-lg) 0 0 0;border:1px solid var(--border);border-bottom:0}
.tile-media.plain > img,.tile-media > img.plain{border:0;border-radius:0}
.tile-media.pad{padding-bottom:clamp(32px,4vw,56px)}

/* Mini-Mockups in Kacheln und Galerie (Bausteine der Hauptinstanz, ohne Inline-Styles) */
.ec-models{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.ec-models span{display:inline-flex;align-items:center;gap:8px;font:400 13px var(--font-body);color:var(--text);background:var(--l3);border:1px solid var(--border);border-radius:var(--radius-sm);padding:6px 12px}
.ec-models span img{height:16px;width:auto}
.ec-models-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%;max-width:360px}   /* Sprachmodelle: 5 Zeilen x 2 Spalten */
.ec-models-grid span.is-api{font-weight:500}
.ec-hostnote{margin:14px auto 0;max-width:360px;font:400 13px/1.5 var(--font-body);color:var(--text-soft);text-align:center}
.ec-models-grid span{justify-content:center;padding:6px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}

.tile.dark .ec-models span,.gcard.dark .ec-models span{background:var(--d3);border-color:var(--d2);color:var(--dtext)}
.ec-hostgroup{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:22px}
.ec-hostgroup:last-child{margin-bottom:0}
.ec-hostlabel{font:500 11px var(--font-body);letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.tile.dark .ec-hostlabel{color:var(--dmuted)}
.ec-check{display:grid;gap:10px;text-align:left;max-width:420px;width:100%}
.ec-check li{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--text-soft);background:var(--l3);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 14px}
.ec-check li::before{content:"\2713";color:var(--accent-text);font-weight:700;flex:0 0 auto}
.ec-check b{display:block;color:var(--text);font-weight:500}
.tile.dark .ec-check li,.gcard.dark .ec-check li,.chapter.dark .ec-check li{background:var(--d3);border-color:var(--d2);color:var(--dtext-soft)}
.tile.dark .ec-check b,.gcard.dark .ec-check b,.chapter.dark .ec-check b{color:var(--dtext)}
.tile.dark .ec-check li::before,.gcard.dark .ec-check li::before,.chapter.dark .ec-check li::before{color:var(--fh-primary-light)}
/* IHE-Connectathon-Siegel: dezent, aber sichtbar; ein Link auf die Ergebnisseite bei IHE */
.ihe-seals{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;text-decoration:none;color:var(--text-soft)}
.ihe-seals img{width:68px;height:auto;border-radius:6px;box-shadow:0 1px 2px rgba(0,0,0,.08);opacity:.92;transition:opacity var(--t-hover) var(--ease),transform var(--t-hover) var(--ease)}
.ihe-seals:hover img,.ihe-seals:focus-visible img{opacity:1}
.ihe-seals:hover{text-decoration:none}
.ihe-seals-label{flex-basis:100%;text-align:center;font:400 12.5px/1.4 var(--font-body);color:var(--text-soft);margin-top:2px}
.ihe-seals:hover .ihe-seals-label{color:var(--accent-text)}
.tile-media:has(> .ihe-seals-tile){flex-wrap:wrap}
.ihe-seals-tile{flex-basis:100%;margin-top:26px}
.ihe-seals-tile img{width:56px}
.ihe-block{text-align:center;margin-top:var(--head-gap)}
.ihe-block .ihe-text{max-width:720px;margin:12px auto 22px;font-size:15px;line-height:1.6;color:var(--text-soft)}
.ihe-block .ihe-seals img{width:84px}
.ihe-block + .cols-3{margin-top:var(--head-gap)}
.std-logos{display:flex;align-items:center;justify-content:center;gap:28px;flex-wrap:wrap}
.std-logos img{height:34px;width:auto}
.std-logos span{display:inline-flex;align-items:center;background:var(--l3);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 16px}
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.chips span{font:400 12.5px var(--font-body);color:var(--accent-text-strong);background:var(--fh-primary-tint);border:1px solid var(--fh-primary-light);padding:5px 12px;border-radius:var(--radius-sm);white-space:nowrap}
.stage.dark .chips span,.tile.dark .chips span,.gcard.dark .chips span{color:var(--dtext);background:var(--d3);border-color:var(--fh-primary-dark)}

/* Eingabezeile des Assistenten mit Tipp-Animation (drei Fragen im Wechsel) */
.ec-inputbar{display:flex;align-items:center;gap:12px;width:min(100%,520px);background:var(--l3);border:1px solid var(--border);border-radius:var(--radius);padding:12px 16px;text-align:left;overflow:hidden}
.ec-inputbar .ec-type{flex:1;min-width:0;position:relative;height:1.5em;font:400 15px/1.5 var(--font-body);color:var(--text);white-space:nowrap;overflow:hidden}
.ec-type span{position:absolute;left:0;top:0;white-space:nowrap;opacity:0;transition:opacity .35s var(--ease)}
.ec-type span.is-on{opacity:1}
.no-js .ec-type span:first-child{opacity:1}.no-js .ec-type span:first-child::before{content:attr(data-q)}
.ec-type span.is-on::after{content:"";display:inline-block;width:1.5px;height:1.1em;margin-left:1px;vertical-align:-0.15em;background:var(--fh-primary);animation:eccaret 1s steps(1) infinite}
@keyframes eccaret{0%,49%{opacity:1}50%,100%{opacity:0}}
.ec-inputbar .ec-send{width:34px;height:34px;border-radius:var(--radius-sm);background:var(--fh-primary);display:flex;align-items:center;justify-content:center;color:#fff;flex:0 0 auto}
.ec-inputbar .ec-send svg{width:16px;height:16px}

/* Konnektoren: Hub mit fliessenden Punkten (Hauptinstanz, Positionen als Klassen) */
.ec-mcphub{position:relative;width:300px;height:200px;margin:0 auto}
.mh-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mh-lines path{stroke:var(--fh-primary-light);stroke-width:1.2;stroke-dasharray:2.5 5;opacity:.7}
.mh-dots circle{fill:var(--fh-primary)}
.mh-halo{fill:var(--fh-primary-tint)}
.mh-core{fill:var(--l3)}
.gcard.dark .mh-halo,.tile.dark .mh-halo{fill:var(--d2)}
.gcard.dark .mh-core,.tile.dark .mh-core{fill:var(--d3)}
.gcard.dark .mh-dots circle,.tile.dark .mh-dots circle{fill:var(--fh-primary-light)}
.mh-brain{position:absolute;left:150px;top:86px;transform:translate(-50%,-50%);width:44px;height:auto}
.mh-chip{position:absolute;transform:translateY(-50%);font:400 9.5px var(--font-head);letter-spacing:0.02em;color:var(--text-soft);white-space:nowrap}
.gcard.dark .mh-chip,.tile.dark .mh-chip{color:var(--dtext-soft)}
.mh-chip.l{right:calc(100% - 92px)}
.mh-chip.r{left:208px}
.mh-chip.y1{top:14px}.mh-chip.y2{top:50px}.mh-chip.y3{top:86px}.mh-chip.y4{top:122px}.mh-chip.y5{top:158px}
@media (prefers-reduced-motion:reduce){.mh-dots{display:none}}

/* Interoperabilitaet: Standards links, Systemlandschaft rechts, Verdrahtung (Hauptinstanz) */
.ec-io4{position:relative;height:221px;width:100%;max-width:420px;margin:0 auto}
.ec-wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ec-wires path{stroke:var(--fh-primary);stroke-width:1;stroke-dasharray:3 4;stroke-linecap:round;fill:none;opacity:.85}
.ec-flow{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1}
.ec-flow circle{fill:var(--fh-primary)}
.gcard.dark .ec-flow circle,.tile.dark .ec-flow circle{fill:var(--fh-primary-light)}
.ec-io4 .ec-port{display:none}
.ec-port{position:absolute;width:9px;height:9px;border-radius:var(--radius-sm);background:var(--l3);border:2px solid var(--fh-primary);z-index:2}
.ec-port.x1{left:calc(27% - 4px)}.ec-port.x2{left:calc(62% - 4px)}
.ec-port.p1{top:32.5px}.ec-port.p2{top:106px}.ec-port.p3{top:179.5px}
.ec-port.q1{top:7px}.ec-port.q2{top:40px}.ec-port.q3{top:73px}.ec-port.q4{top:106px}.ec-port.q5{top:139px}.ec-port.q6{top:172px}.ec-port.q7{top:205px}
.ec-io4-std{position:absolute;left:0;width:25%;transform:translateY(-50%);display:flex;align-items:center;justify-content:flex-end}
.ec-io4-std img{display:block;max-width:88px;max-height:26px;width:auto;height:auto}
.ec-io4-std.s1{top:37px}.ec-io4-std.s2{top:110.5px}.ec-io4-std.s3{top:184px}
.ec-io-chip{font:400 10.5px var(--font-body);background:var(--l3);border:1px solid var(--border);color:var(--text-soft);padding:5px 11px;border-radius:var(--radius-sm);white-space:nowrap}
.ec-io4-sys{position:absolute;left:62%;transform:translateY(-50%);margin-left:6px}
.ec-io4-sys.t1{top:11.5px}.ec-io4-sys.t2{top:44.5px}.ec-io4-sys.t3{top:77.5px}.ec-io4-sys.t4{top:110.5px}.ec-io4-sys.t5{top:143.5px}.ec-io4-sys.t6{top:176.5px}.ec-io4-sys.t7{top:209.5px}
.ec-io4-more{background:transparent;border:1px dashed var(--fh-primary-light);color:var(--muted);letter-spacing:2px}

/* Workflow und Automatisierung: Canvas mit Knoten (Hauptinstanz) */
.ec-canvas{position:relative;height:290px;width:100%;max-width:380px;margin:0 auto}
.ec-canvas .ec-port{width:8px;height:8px;border-radius:50%;left:calc(50% - 4px)}
.ec-canvas .ec-port.w1{top:56px}.ec-canvas .ec-port.w2{top:84px}.ec-canvas .ec-port.w3{top:148px}.ec-canvas .ec-port.w4{top:176px}
.ec-wfnode{position:absolute;left:0;width:100%;background:var(--l3);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.ec-wfnode.ec-wf1{top:0}.ec-wfnode.ec-wf2{top:92px}
.ec-canvas .ec-addpanel{left:0;top:184px;width:100%}
.ec-wfnode-head{display:flex;align-items:center;gap:7px;font:400 11px var(--font-body);color:var(--text);padding:7px 10px;background:var(--fh-primary-tint);height:30px}
.ec-wficon{width:16px;height:16px;border-radius:var(--radius-sm);background:var(--fh-primary);color:#fff;font-size:9px;display:flex;align-items:center;justify-content:center;font-style:normal}
.ec-wfplay{margin-left:auto;font-size:8px;color:var(--muted)}
.ec-wfnode-io{display:flex;gap:12px;font:400 10px var(--font-body);color:var(--muted);padding:5px 10px;background:var(--l1)}
.ec-addpanel{position:absolute;left:6%;top:98px;width:76%;background:var(--l3);border:1px solid var(--border);border-radius:var(--radius);padding:8px 10px}
.ec-addhead{display:flex;align-items:center;gap:7px;font:400 11px var(--font-body);color:var(--text);padding-bottom:6px;border-bottom:1px solid var(--border);margin-bottom:5px}
.ec-addplus{width:15px;height:15px;border:1px solid var(--fh-primary);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--accent-text)}
.ec-addrow{display:flex;align-items:center;gap:8px;padding:4px 6px;border-radius:var(--radius-sm)}
.ec-rowicon{width:18px;height:18px;border-radius:var(--radius-sm);background:var(--fh-primary-tint);border:1px solid var(--fh-primary-light);color:var(--accent-text);font-size:9px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.ec-rowtxt{display:flex;flex-direction:column;line-height:1.25;text-align:left}
.ec-rowtxt b{font:400 10.5px var(--font-body);color:var(--text)}
.ec-rowtxt small{font-size:9px;color:var(--muted)}
.ec-hl1{animation:echl 4.8s ease-in-out infinite}
.ec-hl2{animation:echl 4.8s ease-in-out infinite;animation-delay:2.4s}
@keyframes echl{0%,22%,100%{background:transparent}8%,14%{background:var(--fh-primary-tint)}}

/* Werteversprechen: Schiene, Hub und Fundament (Sektion 02 der Hauptinstanz) */
.v2-rail{position:relative;height:1px;background:var(--fh-primary-light);margin:28px auto 0;width:min(100%,900px)}
.v2-rail-chip{display:flex;justify-content:center;margin-top:-14px}
.v2-rail-chip span{display:inline-flex;align-items:center;gap:8px;background:var(--l3);border:1px solid var(--fh-primary-light);color:var(--accent-text-strong);border-radius:var(--radius-sm);padding:6px 14px;font:500 12px var(--font-body)}
.v2-rail-chip svg{width:16px;height:16px;fill:currentColor}
.v2-drop{width:1px;height:40px;background:var(--fh-primary-light);margin:0 auto}
.v2-hub{display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px 28px;align-items:center;max-width:900px;margin:0 auto;background:var(--l3);border:1px solid var(--border);border-radius:var(--radius-lg);padding:clamp(20px,3vw,32px);text-align:left}
.v2-brand{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:120px}
.v2-brand img{width:72px;height:auto}
.v2-word{font:400 24px var(--font-head);color:var(--text)}
.v2-hub h3{font-size:clamp(22px,2.2vw,28px);line-height:1.25}
.v2-hub p{margin-top:8px;font-size:15px;color:var(--text-soft)}
.v2-hub-dots{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:8px}
.v2-hub-dots span{display:inline-flex;align-items:center;gap:8px;font:400 12.5px var(--font-body);color:var(--accent-text-strong);background:var(--fh-primary-tint);border:1px solid var(--fh-primary-light);border-radius:var(--radius-sm);padding:6px 12px}
.v2-hub-dots svg{width:16px;height:16px;fill:currentColor}
.chapter.dark .v2-rail,.chapter.dark .v2-drop{background:var(--fh-primary-dark)}
.chapter.dark .v2-rail-chip span,.chapter.dark .v2-hub{background:var(--d3);border-color:var(--d2);color:var(--dtext)}
.chapter.dark .v2-hub h3,.chapter.dark .v2-word{color:var(--dtext)}
.chapter.dark .v2-hub p{color:var(--dtext-soft)}
.chapter.dark .v2-hub-dots span{background:var(--d2);border-color:var(--fh-primary-dark);color:var(--dtext)}

/* ------- Kapitel; Ebene 1 und 3 im Wechsel, dunkle Kapitel flach #2B2B2B ------- */
.chapter{padding:var(--sec-pad) 0}
.chapter.soft,.chapter.tint{background:var(--l1)}
.chapter.dark{background:var(--d1);color:var(--dtext)}
.chapter.dark h2,.chapter.dark h3,.chapter.dark h4{color:var(--dtext)}
.chapter.dark p{color:var(--dtext-soft)}
.chapter.dark .eyebrow{color:var(--fh-primary-light)}
.chapter.dark .link{color:var(--fh-primary-light)}
.chapter.dark .t-sub,.chapter.dark .chapter-head .t-intro{color:var(--fh-primary-light)}
.chapter.dark .t-intro{color:var(--dtext-soft)}
.chapter.dark .chapter-head .t-intro{color:var(--fh-primary-light)}
.chapter.dark .t-caption{color:var(--dmuted)}
.chapter.dark p a:not(.link),.stage.dark p a:not(.link){color:var(--fh-primary-light);text-decoration:underline;text-underline-offset:3px}
.wrap{max-width:var(--w-content);margin:0 auto;padding:0 var(--gutter)}
.wrap-wide{max-width:var(--w-content);margin:0 auto;padding:0 var(--gutter)}
.chapter-head{text-align:center;max-width:860px;margin:0 auto}
.chapter .wrap > * + *,.chapter .wrap-wide > * + *{margin-top:var(--head-gap)}
.chapter .wrap > * + .link-row,.chapter .wrap-wide > * + .link-row{margin-top:24px}
.chapter .wrap > * + .t-caption,.chapter .wrap-wide > * + .t-caption{margin-top:20px}
.chapter .wrap > h3.eyebrow + *,.chapter .wrap-wide > h3.eyebrow + *{margin-top:16px}
.chapter .wrap > .chapter-head + .stairs{margin-top:var(--head-gap)}
.chapter > .chapter-head + .gallery{margin-top:var(--head-gap)}   /* Galerie folgt dem Kopf im gleichen Abstand wie Raster und Fenster */
.t-group{font-family:var(--font-head);font-weight:500;font-size:clamp(20px,1.7vw,24px);line-height:1.3;letter-spacing:-.01em;text-align:center;color:var(--text)}
.chapter.dark .t-group{color:#fff}
.chapter .wrap > .t-group + *,.chapter .wrap-wide > .t-group + *{margin-top:28px}
.chapter .wrap > .cols-5 + .v2-rail,.chapter .wrap-wide > .cols-5 + .v2-rail,.chapter .wrap-wide > .wv + .v2-rail{margin-top:28px}
.chapter :is(.wrap,.wrap-wide) > .v2-rail + .v2-rail-chip,.chapter :is(.wrap,.wrap-wide) > .v2-rail-chip + .v2-drop,.chapter :is(.wrap,.wrap-wide) > .v2-drop + .v2-hub{margin-top:0}
.chapter-head .t-sub{margin-top:14px}
.chapter-head.left{text-align:left;margin-left:0}
.chapter-head .t-headline + .t-intro{margin-top:14px}
.chapter-head .t-intro + .t-intro{margin-top:10px}

.cols-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,32px)}
.cols-2.cols-single{grid-template-columns:minmax(0,1fr);max-width:720px;margin-left:auto;margin-right:auto}
.cols-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.cols-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.8vw,24px)}
.cols-5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,1.4vw,16px)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center}
.chapter .split:has(> div > h2){align-items:start}   /* Ueberschrift in der Spalte beginnt oben wie in allen anderen Sektionen */
.split.rev > :first-child{order:2}
.split h3{font-size:clamp(22px,2.2vw,28px);line-height:1.25;hyphens:auto;overflow-wrap:break-word}
.split h2{hyphens:auto;overflow-wrap:break-word}
.split > div > p{margin-top:14px;font-size:15px;line-height:1.6;color:var(--text-soft)}
.split .steps{margin-top:22px}
.split > div > .link{margin-top:18px}
.split > img{border-radius:var(--radius-lg);border:1px solid var(--border)}
.split + .split{margin-top:clamp(48px,6vw,80px)}

/* Karten: Ebene 3 auf Ebene 1 (oder Ebene 1 auf Ebene 3), duenne Kontur, kein Schatten */
.card{background:var(--l3);border:1px solid var(--border);border-radius:var(--radius);padding:clamp(20px,2.4vw,28px);transition:border-color var(--t-hover) var(--ease)}
.card:hover{border-color:var(--fh-primary)}
.stage.light .card,.chapter:not(.soft):not(.tint):not(.dark) .card{background:var(--l1)}
.card h3,.card h4,.card .h-card,.wv h3,.gcard h3,.letters h3,.ways h3,.certs h3{hyphens:auto;overflow-wrap:break-word}
.card h3,.card h4,.card .h-card{font-family:var(--font-head);font-size:19px;font-weight:600;line-height:1.35;color:var(--text)}
.card h4 + p,.card h3 + p,.card .h-card + p{margin-top:10px;font-size:14px;color:var(--text-soft);line-height:1.6}
.card .num{display:block;font:500 11px var(--font-body);letter-spacing:1px;text-transform:uppercase;color:var(--accent-text);margin-bottom:12px}
.card .ico{width:36px;height:36px;color:var(--accent-text);margin-bottom:14px}
.card .ico svg{width:36px;height:36px;fill:currentColor}
.card.flat{border-color:var(--border)}
.card.flat:hover{border-color:var(--border)}
.card.flat h3 + p,.card.flat h3 + .ec-check{margin-top:14px}
.card.flat .std-logos{margin-top:18px;justify-content:flex-start}
.chapter.dark .card,.stage.dark .card{background:var(--d3);border-color:var(--d2);color:var(--dtext)}
.chapter.dark .card:hover,.stage.dark .card:hover{border-color:var(--fh-primary)}
.chapter.dark .card h3,.chapter.dark .card h4,.stage.dark .card h3,.stage.dark .card h4,.stage.dark .card .h-card{color:var(--dtext)}
.chapter.dark .card p,.stage.dark .card p{color:var(--dtext-soft)}
.chapter.dark .card .num,.chapter.dark .card .ico,.stage.dark .card .num,.stage.dark .card .ico{color:var(--fh-primary-light)}
.chapter.dark .card .eyebrow{color:var(--fh-primary-light)}
.card .link{font-size:15px;margin-top:14px}
.card .eyebrow{margin-bottom:8px}

/* Werteversprechen: fuenf Spalten auf dunkler Buehne; Nummer oben, Subgrid richtet Nummer, Titel, Unterzeile und Text ueber alle Karten buendig aus */
.wv{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;text-align:left}
.wv li{display:contents}
.wv article{background:var(--d3);border:1px solid var(--d2);border-radius:var(--radius);padding:22px 20px 24px;display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0;align-content:start;min-height:240px}
.wv .num{font:300 32px/1 var(--font-head);letter-spacing:0;color:var(--fh-primary-light);margin-bottom:22px}
.wv h3{font-size:19px;line-height:1.3;color:var(--dtext);font-weight:600}
.wv .wv-sub{font:400 14px/1.4 var(--font-body);color:var(--dtext-soft);margin-top:6px}
.wv .wv-text{font-size:14px;line-height:1.6;color:var(--dtext-soft);margin-top:16px}

/* Die Treppe: fuenf Stufen, ansteigend */
.stairs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;align-items:end}
.stairs li{display:flex;flex-direction:column;background:var(--l3);border:1px solid var(--border);border-radius:var(--radius);padding:22px 20px 22px;position:relative;hyphens:auto}
.stairs li:nth-child(1){min-height:380px}
.stairs li:nth-child(2){min-height:430px}
.stairs li:nth-child(3){min-height:480px}
.stairs li:nth-child(4){min-height:530px}
.stairs li:nth-child(5){min-height:580px}
.stairs .num{font:300 clamp(28px,3vw,40px) var(--font-head);color:var(--fh-primary);line-height:1}
.stairs h3{font-size:19px;line-height:1.3;margin-top:12px}
.stairs p{font-size:14px;line-height:1.6;color:var(--text-soft);margin-top:10px}
.stairs li.is-live{padding-bottom:52px}
.stairs li.is-live::after{content:"Produktiv am KKB";position:absolute;bottom:16px;left:20px;font:500 10px var(--font-body);letter-spacing:1px;text-transform:uppercase;color:#7F9F9F;background:rgba(127,159,159,0.25);padding:4px 8px;border-radius:var(--radius-sm)}

/* Zahlenband */
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;text-align:center}
.facts b{display:block;font:300 clamp(34px,4vw,56px) var(--font-head);color:var(--accent-text);line-height:1}
.facts span{display:block;margin-top:8px;font-size:13px;color:var(--muted)}
.chapter.dark .facts b{color:var(--dtext)}
.chapter.dark .facts span{color:var(--dmuted)}

/* Zitat: Akzent in Blassrot (Sekundaerfarbe, sparsam) */
.quote{max-width:900px;margin:0 auto;text-align:center;border-left:3px solid var(--fh-red);padding-left:clamp(16px,3vw,32px);text-align:left}
.quote p{font:300 clamp(20px,2.2vw,28px)/1.4 var(--font-head);color:var(--text)}
.quote cite{display:block;margin-top:18px;font:400 14px var(--font-body);font-style:normal;color:var(--muted)}
.quote cite b{display:block;color:var(--text);font-weight:500}
.chapter.dark .quote p{color:var(--dtext)}
.chapter.dark .quote cite{color:var(--dmuted)}
.chapter.dark .quote cite b{color:var(--dtext)}
.quote img{height:56px;width:auto;margin:0 0 20px}
.chapter.dark .quote img{background:var(--l3);padding:10px 18px;height:76px;border-radius:var(--radius)}

/* Galerie: horizontal scrollende Karten */
.gallery{position:relative}
.gallery-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:8px calc((100vw - min(100vw - 2*var(--gutter),var(--w-content))) / 2) 24px;scrollbar-width:none;-ms-overflow-style:none;scroll-padding-left:calc((100vw - min(100vw - 2*var(--gutter),var(--w-content))) / 2)}
.gallery-track::-webkit-scrollbar{display:none}
.gcard{position:relative;flex:0 0 min(400px,82vw);scroll-snap-align:start;background:var(--l1);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;min-height:520px}
.gcard.dark{background:var(--d1);border-color:var(--d1);color:var(--dtext)}
.gcard.petrol{background:var(--fh-primary-tint)}
.gcard.green{background:var(--l3)}
.gcard.blue{background:var(--l2)}
.gcard.plum{background:var(--fh-red-tint)}
.gcard.sand{background:var(--l1)}
.chapter.soft .gcard,.chapter.soft .gcard.sand{background:var(--l3)}
.chapter.soft .gcard.dark{background:var(--d1)}
.chapter.soft .gcard.petrol{background:var(--fh-primary-tint)}
.chapter.soft .gcard.blue{background:var(--l2)}
.chapter.soft .gcard.plum{background:var(--fh-red-tint)}
.gcard-text{padding:26px 24px 0}
.gcard .eyebrow{margin-bottom:8px}
.gcard h3{font-size:22px;line-height:1.25}
.gcard.dark h3{color:var(--dtext)}
.gcard p{margin-top:10px;font-size:14px;line-height:1.6;color:var(--text-soft)}
.gcard.dark p{color:var(--dtext-soft)}
.gcard.dark .eyebrow{color:var(--fh-primary-light)}
.gcard.dark .link{color:var(--fh-primary-light)}
.gcard .link{margin-top:12px;font-size:14px}
.gcard-media{margin-top:auto;padding:24px 0 0;display:flex;justify-content:center;align-items:flex-end}
.gcard-media > img{width:92%;border-radius:var(--radius-lg) 0 0 0;border:1px solid var(--border);border-bottom:0}
.gcard-media.pad{padding:24px 24px 24px}
.gcard-media.pad > img{width:100%;border-radius:var(--radius-lg);border:1px solid var(--border)}
.gallery-nav{display:flex;justify-content:flex-end;gap:10px;max-width:var(--w-content);margin:0 auto;padding:0 var(--gutter)}
.gallery-nav button{width:44px;height:44px;border-radius:var(--radius-sm);background:var(--d1);border:1px solid var(--d1);color:#fff;display:flex;align-items:center;justify-content:center;transition:background-color var(--t-hover),border-color var(--t-hover)}
.gallery-nav button:hover{background:var(--fh-primary-dark);border-color:var(--fh-primary-dark)}
.gallery-nav button svg{width:16px;height:16px}
.gallery-nav button[aria-disabled="true"]{opacity:.35;cursor:default}
.chapter.dark .gallery-nav button{background:var(--d3);border-color:var(--d2);color:#fff}

/* Konzeptbild: Zoom mit Notizen beim Ueberfahren (Hauptinstanz, an das Design System angepasst)
   Desktop: Hover oder Tastaturfokus vergroessert das Fenster nach links, die Notizen "Chat" und "Die Buehne"
   blenden mit Pfeilen ein. Bis 1000 px: Klick oeffnet, die Notizen stehen unter dem Bild.
   --z Skalierung, --tx Verschiebung nach links (Anteil der Bildbreite); --oh = Ueberstand links. */
.split.split-cs{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr)}
.cs-wrap{position:relative;z-index:1;cursor:zoom-in;outline:none;--z:1.38;--tx:.24;--oh:.43}
.cs-wrap:focus-visible{outline:2px solid var(--fh-primary-light);outline-offset:6px}
.cs-wrap .concept-shot{display:block;width:100%;height:auto;border-radius:var(--radius-lg);border:1px solid var(--border);transform-origin:center;transition:transform .55s cubic-bezier(.22,1,.36,1),box-shadow .55s ease}
.chapter.dark .cs-wrap .concept-shot{border-color:var(--d2)}
.cs-mcp{--z:1.3;--tx:.2;--oh:.38}
.cs-mcp .concept-shot{border-radius:var(--radius-lg)}
@media (min-width:1001px){
  .cs-mcp .cs-note-l{top:18%}
  .cs-mcp .cs-note-r{right:calc(100% * (1 + var(--oh)) + 18px);left:auto;top:auto;bottom:10%;transform:rotate(-1.2deg) translateY(8px)}
  .cs-mcp:hover .cs-note-r,.cs-mcp:focus-visible .cs-note-r,.cs-mcp.is-open .cs-note-r{transform:rotate(-1.2deg)}
  .cs-mcp .cs-arr-r{left:calc(100% + 4px);right:auto;bottom:auto;top:30%;width:96px;height:auto}
}
.cs-note{position:absolute;width:210px;background:var(--fh-primary);border-radius:var(--radius);padding:12px 14px;font:400 12.5px/1.5 var(--font-body);color:var(--text);box-shadow:0 10px 30px rgba(0,0,0,0.28);opacity:0;pointer-events:none;transition:opacity .35s ease,transform .15s cubic-bezier(.22,1,.36,1)}
.cs-note strong{display:block;font:600 13.5px var(--font-head);color:var(--text);margin-bottom:3px}
.cs-arr{position:absolute;color:var(--fh-primary-dark);overflow:visible}
.chapter.dark .cs-arr{color:var(--fh-primary-light)}
@media (min-width:1001px){
  .cs-wrap:hover,.cs-wrap:focus-visible,.cs-wrap.is-open{z-index:90}
  .cs-wrap:hover .concept-shot,.cs-wrap:focus-visible .concept-shot,.cs-wrap.is-open .concept-shot{transform:translateX(calc(var(--tx) * -100%)) scale(var(--z));box-shadow:0 34px 90px rgba(0,0,0,0.38);cursor:zoom-out}
  .cs-note-l{right:calc(100% * (1 + var(--oh)) + 18px);top:46%;transform:translateY(-50%) rotate(-1.5deg) translateY(8px)}
  .cs-note-r{right:-2%;top:calc(50% * (1 + var(--z)) + 18px);transform:rotate(1.2deg) translateY(8px)}
  .cs-arr-l{left:calc(100% + 4px);top:52%;width:96px}
  .cs-arr-r{bottom:calc(100% + 6px);right:34%;height:74px}
  .cs-wrap:hover .cs-note,.cs-wrap:focus-visible .cs-note,.cs-wrap.is-open .cs-note{opacity:1}
  .cs-wrap:hover .cs-note-l,.cs-wrap:focus-visible .cs-note-l,.cs-wrap.is-open .cs-note-l{transform:translateY(-50%) rotate(-1.5deg)}
  .cs-wrap:hover .cs-note-r,.cs-wrap:focus-visible .cs-note-r,.cs-wrap.is-open .cs-note-r{transform:rotate(1.2deg)}
}
@media (min-width:1001px) and (max-width:1279px){
  .cs-wrap{--z:1.26;--tx:.17;--oh:.3}
  .cs-note{width:180px}
}
@media (max-width:1000px){
  .cs-note{position:static;width:auto;margin-top:12px;display:none;transform:none;box-shadow:none}
  .cs-arr{display:none}
  .cs-wrap.is-open .cs-note{display:block;opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .cs-wrap .concept-shot,.cs-note{transition:none}
}

/* Sektion Kompetenzen: Kompetenzen erstellen links, Kompetenzbibliothek rechts (Aufbau der Hauptinstanz, Gestaltung nach Design System) */
.fb{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,48px);align-items:stretch}
.fb-col{min-width:0;display:flex;flex-direction:column}
.fb-col h3{font-size:clamp(22px,2.2vw,28px);line-height:1.25;hyphens:auto;overflow-wrap:break-word}
.fb-text{margin-top:10px;font-size:15px;line-height:1.6;color:var(--text-soft)}
.cb-step{display:flex;align-items:center;gap:11px;margin-bottom:14px;font:500 11px var(--font-body);letter-spacing:1px;text-transform:uppercase;color:var(--accent-text)}
.cb-step b{display:flex;align-items:center;justify-content:center;width:26px;height:26px;flex:0 0 auto;background:var(--fh-primary-dark);color:#fff;border-radius:var(--radius-sm);font:500 12px/1 var(--font-head);letter-spacing:0}
.fb-steps{list-style:none;margin:20px 0 22px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.fb-steps li{display:flex;flex-direction:column;gap:3px;padding-left:12px;border-left:2px solid var(--fh-primary)}
.fb-steps b{font:600 13.5px/1.3 var(--font-head);color:var(--text)}
.fb-steps span{font-size:12.5px;line-height:1.45;color:var(--text-soft)}
.fb-window{flex:1 1 auto;display:flex;flex-direction:column}
.fb-window .hs-screen{flex:1 0 auto;aspect-ratio:4/3}

/* Kompetenzbibliothek: dunkles Panel nach dem Drei-Ebenen-Prinzip (Ebene 1 Panel, Ebene 2 Funktionsflaechen, Ebene 3 Karten) */
.fb-libbox{position:relative;flex:1 1 auto;min-height:420px}
.mkt{--mk-tint:#7F9F9F;--mk-tint-red:#605454;--mk-line:#4A4A4A;
  position:absolute;inset:0;display:flex;flex-direction:column;background:var(--d1);border:1px solid var(--d2);border-radius:var(--radius-lg);overflow:hidden;color:var(--dtext)}
.mkt-head{display:flex;align-items:center;gap:12px;padding:14px 14px 0}
.mkt-search{flex:1 1 auto;display:flex;align-items:center;gap:8px;height:36px;padding:0 12px;background:var(--d2);border-bottom:1px solid transparent;border-radius:var(--radius);transition:border-color var(--t-hover) var(--ease)}
.mkt-search:focus-within{border-bottom-color:var(--fh-primary);outline:2px solid var(--fh-primary-light);outline-offset:2px}
.mkt-search svg{width:14px;height:14px;flex:0 0 auto;fill:none;stroke:var(--dmuted);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;color:var(--dmuted)}
.mkt-search input{flex:1 1 auto;min-width:0;height:100%;background:none;border:0;outline:0;color:var(--dtext);font:400 13px var(--font-body)}
.mkt-search input::placeholder{color:var(--dmuted)}
.mkt-search input::-webkit-search-cancel-button{filter:invert(1) grayscale(1) brightness(.85)}
.mkt-filter{display:flex;flex-wrap:wrap;gap:6px;padding:10px 14px 12px;border-bottom:1px solid var(--mk-line)}
.mkt-filter button{appearance:none;background:transparent;border:1px solid var(--fh-primary);color:var(--dtext-soft);border-radius:var(--radius-sm);padding:7px 12px;min-height:32px;font:400 12px var(--font-body);letter-spacing:.3px;cursor:pointer;white-space:nowrap;transition:background-color var(--t-hover) var(--ease),color var(--t-hover) var(--ease)}
.mkt-filter button:hover{background:var(--d2)}
.mkt-filter button.on{background:var(--fh-primary);border-color:var(--fh-primary);color:var(--text)}
.mkt-list{flex:1 1 auto;min-height:0;overflow-y:auto;padding:12px 14px 20px;display:grid;grid-auto-rows:max-content;gap:8px;align-content:start;
  scrollbar-width:thin;scrollbar-color:var(--d2) transparent;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 26px),transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 26px),transparent 100%)}
.mkt-list::-webkit-scrollbar{width:6px}
.mkt-list::-webkit-scrollbar-thumb{background:var(--d2)}
.mkt-list:focus-visible{outline-offset:-2px}
.mkt-empty{padding:14px 4px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.mkt-empty p{font-size:13px;color:var(--dtext-soft)}
.mkt-empty .btn-ghost{color:var(--fh-primary-light);border-color:var(--fh-primary)}
.mkt-empty .btn-ghost:hover{background:var(--fh-primary);border-color:var(--fh-primary);color:var(--text)}
.mkt-foot{padding:10px 14px 12px;border-top:1px solid var(--mk-line);text-align:center;font:400 12px/1.45 var(--font-body);color:var(--dmuted)}

/* Karte (Ebene 3) */
.mc{background:var(--d3);border:1px solid var(--mk-line);border-radius:var(--radius);padding:10px 12px 11px;transition:border-color var(--t-hover) var(--ease)}
.mc:hover{border-color:var(--fh-primary)}
.mc-head{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:center}
.mc-ico{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:var(--d2);border-radius:var(--radius-sm);color:var(--fh-primary-light)}
.mc-ico svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.mc-head h4{min-width:0;font:600 13.5px/1.25 var(--font-head);color:var(--dtext);letter-spacing:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mc-tag{font:400 10.5px/1 var(--font-body);letter-spacing:.3px;padding:5px 8px;border-radius:var(--radius-sm);background:var(--mk-tint);color:#7F9F9F;white-space:nowrap}
.mc[data-cat="daten"] .mc-tag{background:var(--mk-tint-red);color:#F0D8D8}
.mc-desc{margin:8px 0 0;font-size:12px;line-height:1.45;color:var(--dtext-soft)}
.mc-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:9px}
.mc-stats > div{background:var(--d2);border-radius:var(--radius-sm);padding:5px 6px;text-align:center;display:flex;flex-direction:column;gap:1px;min-width:0}
.mc-stats b{font:500 12px/1.25 var(--font-body);color:var(--dtext);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-stats span{font:400 8.5px var(--font-body);letter-spacing:1px;text-transform:uppercase;color:var(--dmuted)}

/* Schritte (Kompetenzen erstellen) */
.steps{display:grid;gap:14px;counter-reset:step}
.steps li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:2px 14px;align-items:start}
.steps li::before{counter-increment:step;content:counter(step,decimal-leading-zero);grid-row:1 / span 2;font:600 16px var(--font-head);color:var(--accent-text);background:var(--fh-primary-tint);border-radius:var(--radius-sm);width:40px;height:40px;display:flex;align-items:center;justify-content:center}
.steps b,.steps span{grid-column:2}
.steps b{display:block;font:600 15px var(--font-head);color:var(--text)}
.steps span{display:block;font-size:14px;color:var(--text-soft);margin-top:2px;line-height:1.5}
.chapter.dark .steps b{color:var(--dtext)}
.chapter.dark .steps span{color:var(--dtext-soft)}
.chapter.dark .steps li::before{background:var(--d3);color:var(--fh-primary-light)}
.chapter.dark .split > div > p{color:var(--dtext-soft)}

/* Markenstory L U N E A */
.letters{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.letters article{background:var(--l3);border:1px solid var(--border);border-radius:var(--radius);padding:22px 20px}
.letters .big{font:300 clamp(44px,5vw,72px) var(--font-head);color:var(--fh-primary);line-height:1}
.letters h3{font-size:19px;line-height:1.3;margin-top:14px}
.letters p{font-size:14px;line-height:1.6;color:var(--text-soft);margin-top:10px}


/* Tabelle (Perspektiven, Zertifikate): Kopf mit Akzent-Unterkante, kein Zebra */
.table{width:100%;border-collapse:collapse;font-size:15px}
.table th,.table td{text-align:left;padding:12px 16px;border-bottom:0.5px solid var(--border);vertical-align:top}
.table thead th{font:500 11px var(--font-body);letter-spacing:1px;text-transform:uppercase;color:var(--muted);background:var(--l2);border-bottom:1.5px solid var(--fh-primary)}
.table td:first-child{font-weight:500;color:var(--text);white-space:nowrap}
.table tr:last-child td{border-bottom:0}
.table-wrap{overflow-x:auto;background:var(--l3);border:1px solid var(--border);border-radius:var(--radius)}
.certs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.certs article{background:var(--l1);border:1px solid var(--border);border-radius:var(--radius);padding:22px}
.certs h3{font-size:19px}
.certs .count{display:block;font:500 11px var(--font-body);letter-spacing:1px;text-transform:uppercase;color:var(--accent-text);margin:4px 0 14px}
.certs li{display:flex;justify-content:space-between;gap:12px;font-size:14px;padding:8px 0;border-bottom:0.5px solid var(--border);color:var(--text-soft)}
.certs li:last-child{border-bottom:0}
.certs li span{color:var(--muted);white-space:nowrap}
.cert-figure{margin:0 auto;max-width:440px}
.cert-figure img{border-radius:var(--radius);border:1px solid var(--border)}
.cert-figure figcaption{margin-top:12px;font-size:11.5px;letter-spacing:0.3px;color:var(--muted);text-align:center}

/* Zugaenge (drei Wege) */
.ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ways article{background:var(--l1);border:1px solid var(--border);border-radius:var(--radius);padding:26px 24px;display:flex;flex-direction:column}
.chapter.soft .ways article{background:var(--l3)}
.ways .eyebrow{margin-bottom:8px}
.ways h3{font-size:19px;line-height:1.3}
.ways p{margin-top:10px;font-size:14px;color:var(--text-soft)}
.ways ul{margin-top:16px;display:grid;gap:8px}
.ways li{display:flex;gap:10px;font-size:14px;color:var(--text-soft)}
.ways li::before{content:"\2713";color:var(--accent-text);font-weight:700}
.ways .link{margin-top:auto;padding-top:18px;font-size:15px}

/* Module (Workshop) */
.modules{display:grid;gap:10px}
.module{display:grid;grid-template-columns:44px 1fr auto;gap:16px;align-items:start;background:var(--l1);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px}
.module .m-num{width:44px;height:44px;border-radius:var(--radius-sm);background:var(--fh-primary-dark);color:#fff;display:flex;align-items:center;justify-content:center;font:600 17px var(--font-head)}
.module h4{font-size:19px;font-weight:600}
.module p{font-size:14px;color:var(--text-soft);margin-top:4px;line-height:1.55}
.module .dur{font:500 11px var(--font-body);letter-spacing:1px;text-transform:uppercase;color:var(--muted);white-space:nowrap;padding-top:4px}
.tiny{font-size:11.5px;letter-spacing:0.3px;color:var(--muted);margin-top:14px}

/* Logo-Band (Metriken der Hauptinstanz) */
.logo-band{padding:clamp(22px,3.2vw,40px) 0}   /* Band etwa 30 % schmaler, Logos unveraendert */
.logo-band-title{font:500 11px var(--font-body);letter-spacing:1px;text-transform:uppercase;color:var(--muted);text-align:center;margin-bottom:20px}
.logo-band-track{--logo-h:52px;--pad:36px;--speed:45s;width:100%;overflow:hidden;position:relative}
.logo-band-track::before,.logo-band-track::after{content:'';position:absolute;top:0;bottom:0;width:90px;pointer-events:none;z-index:2}
.logo-band-track::before{left:0;background:linear-gradient(to right,var(--l3) 0%,rgba(255,255,255,0) 100%)}
.logo-band-track::after{right:0;background:linear-gradient(to left,var(--l3) 0%,rgba(255,255,255,0) 100%)}
.soft .logo-band-track::before{background:linear-gradient(to right,var(--l1) 0%,rgba(239,239,239,0) 100%)}
.soft .logo-band-track::after{background:linear-gradient(to left,var(--l1) 0%,rgba(239,239,239,0) 100%)}
.logo-band-rail{display:flex;width:max-content;animation:marquee var(--speed) linear infinite;will-change:transform}
.logo-band-track.pause-on-hover:hover .logo-band-rail{animation-play-state:paused}
.logo-set{display:flex;align-items:center;padding:10px 0}
.logo-item{display:inline-flex;align-items:center;justify-content:center;min-height:var(--logo-h);flex:0 0 auto;padding:0 var(--pad);opacity:0.95;transition:opacity var(--t-hover) var(--ease)}
.logo-item:hover{opacity:1}
.logo-item img{width:auto;height:var(--logo-h);max-height:none;display:block;object-fit:contain}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-25%)}}
.logo-item.is-kkb img{height:calc(var(--logo-h)*1.22)}
.logo-item.is-medecon img{height:calc(var(--logo-h)*0.74)}
.logo-item.is-meerkat img{height:calc(var(--logo-h)*1.02)}
.logo-item.is-quhr img{height:calc(var(--logo-h)*1.35)}
.logo-item.is-stiftung img{height:calc(var(--logo-h)*0.79)}
.logo-item.is-dianovi img{height:calc(var(--logo-h)*0.92)}
.logo-item.is-xqt img{height:calc(var(--logo-h)*0.93)}
.logo-item.is-digitalhealth img{height:calc(var(--logo-h)*0.85)}
.logo-item.is-campus img{height:calc(var(--logo-h)*0.96)}
.logo-item.is-ci img{height:calc(var(--logo-h)*0.98)}
.logo-item.is-tai img{height:calc(var(--logo-h)*0.98)}

/* Kontaktformular (Teil 2, Eingabefelder) */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(28px,5vw,64px);align-items:start}
.contact-aside h2{font-size:clamp(30px,3.2vw,42px);font-weight:600;line-height:1.15;letter-spacing:-0.3px}
.contact-aside p{margin-top:14px;color:var(--text-soft)}
.contact-aside ul{margin-top:20px;display:grid;gap:10px}
.contact-aside li{display:flex;gap:10px;font-size:15px;color:var(--text-soft)}
.contact-aside li::before{content:"\2713";color:var(--accent-text);font-weight:700}
.contact-form{position:relative;background:var(--l3);border:1px solid var(--border);border-radius:var(--radius-lg);padding:clamp(22px,3vw,32px)}
.chapter:not(.soft):not(.tint) .contact-form{background:var(--l1)}
.contact-form label{display:block;font:500 11px var(--font-body);letter-spacing:1px;text-transform:uppercase;color:var(--text-soft);margin:16px 0 6px}
.contact-form label:first-of-type{margin-top:0}
.contact-form input,.contact-form select,.contact-form textarea{width:100%;border:1px solid var(--border);border-radius:var(--radius);padding:11px 14px;font:400 15px var(--font-body);color:var(--text);background:var(--l3);transition:border-color var(--t-hover)}
.contact-form input:hover,.contact-form select:hover,.contact-form textarea:hover{border-color:var(--fh-primary-light)}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{outline:2px solid var(--fh-primary-dark);outline-offset:1px;border-color:var(--fh-primary)}
.consent{display:flex;gap:10px;align-items:flex-start;margin-top:18px;font-size:12.5px;color:var(--text-soft)}
.consent input{width:auto;margin-top:3px;accent-color:var(--fh-primary-dark)}
.consent label{all:unset;font-size:12.5px;color:var(--text-soft);line-height:1.5}
.consent a{text-decoration:underline}
.contact-form .btn-primary{width:100%;margin-top:22px}
.contact-form .hp{position:absolute !important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.contact-form .form-note{margin:0 0 18px;padding:12px 14px;border-radius:var(--radius);font:400 14px/1.5 var(--font-body);background:rgba(127,159,159,0.22);border:1px solid var(--success);color:var(--text)}
.contact-form .form-note.is-error{background:var(--fh-red-tint);border-color:var(--fh-red);color:var(--text)}
.contact-form .form-msg{display:none;scroll-margin-top:calc(var(--nav-h) + var(--localnav-h) + 24px)}
.contact-form .form-msg:target,.contact-form .form-msg.is-on{display:block}
.contact-form .form-msg:focus{outline:2px solid var(--fh-primary-dark);outline-offset:2px}
.contact-form .form-hint{margin:6px 0 0;font:400 12px/1.4 var(--font-body);color:var(--text-soft)}
.contact-form button[aria-busy="true"]{opacity:.75;cursor:progress}

/* Rechtstexte */
.legal-wrap{display:grid;grid-template-columns:260px minmax(0,1fr);gap:48px;align-items:start}
.legal-toc{position:sticky;top:calc(var(--nav-h) + 24px);background:var(--l3);border:1px solid var(--border);border-radius:var(--radius);padding:20px 22px}
.legal-toc h2{margin:0 0 12px;font:500 11px var(--font-body);letter-spacing:1px;text-transform:uppercase;color:var(--text-soft)}
.legal-toc ol{display:grid;gap:8px}
.legal-toc a{font-size:14px;line-height:1.4;color:var(--text-soft)}
.legal-toc a:hover{color:var(--text)}
.legal{max-width:760px;min-width:0;overflow-wrap:anywhere}
.legal-toc{min-width:0;overflow-wrap:anywhere}
.legal h2{font-size:26px;line-height:1.3;margin:0 0 14px}
.legal h3{font-size:19px;font-weight:600;margin:22px 0 8px}
.legal .lg{padding:0 0 32px;margin:0 0 32px;border-bottom:1px solid var(--border)}
.legal .lg:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.legal p,.legal li{font-size:15px;line-height:1.6;color:var(--text)}
.legal p{margin:0 0 12px}
.legal ul{margin:0 0 12px 0;padding-left:22px;list-style:disc}
.legal li{margin:4px 0}
.legal a{color:var(--text);text-decoration:underline;text-decoration-color:var(--fh-primary);text-underline-offset:3px}
.legal a:hover{color:var(--accent-text)}
.legal .lg-note{background:var(--l3);border:1px solid var(--border);border-radius:var(--radius);padding:14px 18px;font-size:14px;color:var(--text-soft);margin:14px 0 0}
.legal .addr{margin:0 0 12px;line-height:1.6}
.legal dl{display:grid;grid-template-columns:minmax(140px,max-content) minmax(0,1fr);gap:6px 24px;margin:0 0 12px}
.legal dt{color:var(--text-soft);font-size:14px}
.legal dd{margin:0;font-size:15px}
.legal .stand{color:var(--muted);font-size:13px;margin-top:8px}
.page-head{padding:clamp(48px,6vw,80px) 0 clamp(28px,3.5vw,48px);text-align:center}
.page-head h1{font-size:clamp(30px,3.2vw,42px);font-weight:600;line-height:1.15;letter-spacing:-0.3px}
.page-head p{margin-top:12px;color:var(--accent-text);font-size:clamp(17px,1.4vw,19px);line-height:1.55}

/* ------- CTA-Band ------- */
.cta-band{text-align:center;padding:var(--sec-pad) 0}
.cta-band.soft{background:var(--l1)}
.cta-band h2{font-size:clamp(30px,3.2vw,42px);font-weight:600;line-height:1.15;letter-spacing:-0.3px}
.cta-band p{margin:14px auto 0;max-width:640px;color:var(--text-soft);font-size:clamp(17px,1.4vw,19px);line-height:1.55}

/* ------- Footer: dunkel (#2B2B2B), Fussnoten, Spalten, Rechtliches ------- */
footer{background:var(--d1);padding:48px 0 32px;font-size:12px;color:var(--dmuted)}
/* Weiche Kanten oben und unten: waehrend des Scrollens blendet ein leichter Unschaerfe-Verlauf am Viewport-Rand ein, danach wieder aus */

/* Hinweis unten rechts (keine Cookies): faehrt beim ersten Besuch ein, ein Vermerk im lokalen Speicher merkt sich das Schliessen */
.hinweis{position:fixed;right:16px;bottom:16px;z-index:60;max-width:min(380px,calc(100vw - 32px));padding:16px 18px 14px;background:var(--l3);border:1px solid var(--fh-primary);border-radius:var(--radius);
  transform:translateY(calc(100% + 24px));opacity:0;visibility:hidden;transition:transform var(--t-panel) var(--ease),opacity var(--t-panel) var(--ease),visibility 0s linear var(--t-panel)}
.hinweis.is-in{transform:none;opacity:1;visibility:visible;transition:transform .35s var(--ease),opacity .35s var(--ease),visibility 0s}
.hinweis p{font-size:13px;line-height:1.5;color:var(--text-soft)}
.hinweis-actions{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:12px}
.hinweis-actions a{font-size:13px}
.footer-cols{max-width:var(--w-content);margin:0 auto;padding:12px var(--gutter) 0;display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:28px}
.footer-brand svg{height:32px;width:auto;color:var(--dtext)}
.footer-brand p{margin-top:14px;font-size:13px;line-height:1.6;color:var(--dtext-soft)}
.footer-brand a{color:var(--fh-primary-light)}
footer h2{font:500 11px var(--font-body);color:var(--dtext);letter-spacing:1px;text-transform:uppercase;margin-bottom:10px}
footer h2 .wm{font:500 13px var(--font-head);text-transform:none;letter-spacing:0}
footer li{margin:2px 0}
footer li a{display:inline-block;padding:4px 0;color:var(--dtext-soft);font-size:12.5px}
footer li a:hover{color:var(--dtext)}
.footer-legal{max-width:var(--w-content);margin:36px auto 0;padding:0 var(--gutter);display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;font-size:12px;color:var(--dmuted)}
.footer-legal a{display:inline-block;padding:4px 0;color:var(--dtext-soft)}
.footer-legal nav{display:flex;flex-wrap:wrap;gap:8px 18px}

/* ------- Bewegung: Einblenden beim Scrollen, in beide Richtungen ------- */
/* Einblenden: immer leicht von unten nach oben, langsam und weich (Kacheln, Fenster, Raster; die Galerie nicht) */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .85s cubic-bezier(.22,.61,.36,1),transform .85s cubic-bezier(.22,.61,.36,1)}
.reveal.in{opacity:1;transform:none}
.reveal.stagger > *{transition:opacity .75s cubic-bezier(.22,.61,.36,1),transform .75s cubic-bezier(.22,.61,.36,1);opacity:0;transform:translateY(20px)}
.reveal.stagger.in > *{opacity:1;transform:none}
.reveal.stagger > :nth-child(2){transition-delay:.06s}.reveal.stagger > :nth-child(3){transition-delay:.12s}.reveal.stagger > :nth-child(4){transition-delay:.18s}.reveal.stagger > :nth-child(5){transition-delay:.24s}.reveal.stagger > :nth-child(6){transition-delay:.3s}.reveal.stagger > :nth-child(7){transition-delay:.36s}.reveal.stagger > :nth-child(8){transition-delay:.42s}.reveal.stagger > :nth-child(9){transition-delay:.48s}
html.no-js .reveal,html.no-js .reveal.stagger > *{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal,.reveal.stagger > *{opacity:1;transform:none;transition:none}
  .logo-band-rail,.ec-hl1,.ec-hl2,.ec-type span.is-on::after{animation:none}
  .ec-type span:first-child{opacity:1}.ec-type span:first-child::before{content:attr(data-q)}
  .ec-type span:nth-child(n+2){display:none}
  .hs-frame,.hs-poster{transition:none}
}

/* ------- Responsive ------- */
@media (max-width:1180px){
  .wv{grid-template-columns:repeat(3,minmax(0,1fr))}
  .wv li:nth-child(4) article{grid-column:1 / 2}
}
@media (max-width:1024px){
  .tiles.three{grid-template-columns:1fr}
  .tiles.three .tile.photo{min-height:520px}
  .fb{grid-template-columns:1fr;gap:48px}
  .fb-libbox{height:560px;flex:0 0 auto}
  .fb-window{flex:0 0 auto}
  .fb-window .hs-screen{flex:0 0 auto;aspect-ratio:16/9}
  /* backdrop-filter wuerde fuer das fixe Menue einen eigenen Containing Block erzeugen */
  .nav-wrap{background:#fff}
  .nav-menu{position:fixed;inset:var(--nav-h) 0 0 0;background:var(--l3);flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:0;padding:24px var(--gutter) 40px;transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity var(--t-panel) var(--ease),transform var(--t-panel) var(--ease),visibility 0s linear var(--t-panel);overflow:auto}
  body.menu-open .nav-menu{opacity:1;visibility:visible;transform:none;transition:opacity var(--t-panel) var(--ease),transform var(--t-panel) var(--ease)}
  .nav-menu li{width:100%;border-bottom:1px solid var(--border)}
  .nav-menu a{display:block;font:600 clamp(22px,5vw,28px) var(--font-head);padding:16px 0}
  .nav-menu a .wm{font-size:inherit}
  .nav-menu li.mobile-cta{display:block;border:0;padding-top:20px}
  .nav-menu li.mobile-cta a{display:inline-flex;font:500 15px var(--font-body);background:var(--fh-primary-dark);color:#fff;padding:12px 22px;border-radius:var(--radius)}
  .nav .nav-cta{display:none}
  .burger{display:flex}
  .localnav-links{display:none}
  .cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cols-3,.cols-5,.certs,.ways,.letters{grid-template-columns:repeat(2,minmax(0,1fr))}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px}
  .footer-cols{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1 / -1}
  .stairs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .stairs li{min-height:0 !important}
  .legal-wrap{grid-template-columns:minmax(0,1fr);gap:28px}.legal-toc{position:static}
  .v2-hub{grid-template-columns:1fr;text-align:center}
  .v2-hub-dots{justify-content:center}
}
@media (max-width:820px){
  .hs-slides{--sd:2.6s}
  .tiles,.tiles.three{grid-template-columns:1fr;gap:10px;padding:10px}
  .tiles.inner{padding:0}
  .tile.side{grid-template-columns:1fr;text-align:center}
  .tile.side .tile-text{justify-self:center;padding-bottom:0}
  .tile.side .link-row{justify-content:center}
  .tile.side .side-media{min-height:0;aspect-ratio:4/5;margin-top:28px}
  .tile.side .side-media::before{display:none}
  .tile{min-height:0;padding-top:48px}
  .tile.photo{min-height:600px}
  .tile.wide{min-height:0}
  .tile-media > img{max-height:240px}
  .split,.split.split-cs,.cols-2,.contact{grid-template-columns:1fr}
  .split.rev > :first-child{order:0}
  .wv{grid-template-columns:1fr 1fr}
  .wv li:nth-child(4) article{grid-column:auto}
  .wv li:nth-child(5) article{grid-column:1 / -1}
  .stairs{grid-template-columns:1fr 1fr}
  .module{grid-template-columns:40px 1fr;grid-template-rows:auto}
  .module .dur{grid-column:2;padding-top:0}
  .localnav-title small{display:none}
}
@media (max-width:560px){
  :root{--localnav-h:48px}
  .fb-steps{grid-template-columns:1fr;gap:10px}
  .mkt-head{flex-wrap:wrap}
  .mc-head h4{white-space:normal}
  .fb-window.hs-live .hs-screen{aspect-ratio:4/5}
  .t-hero{font-size:clamp(28px,8vw,36px);hyphens:auto;overflow-wrap:break-word}
  .t-stage{font-size:clamp(28px,8vw,36px);hyphens:auto;overflow-wrap:break-word}
  .t-headline{font-size:clamp(26px,7.4vw,32px);hyphens:auto;overflow-wrap:break-word}
  .t-tile{hyphens:auto;overflow-wrap:break-word}
  .cols-3,.cols-4,.cols-5,.certs,.ways,.letters,.wv,.stairs{grid-template-columns:1fr}
  .wv article{min-height:0}
  .facts{grid-template-columns:1fr 1fr}
  .mkt-list{grid-template-columns:1fr;max-height:480px}
  .footer-cols{grid-template-columns:1fr}
  .gcard{min-height:460px}
  .link{font-size:15px}
  .table th,.table td{padding:10px 12px;font-size:14px}
  .legal dl{grid-template-columns:1fr;gap:2px 0}.legal dt{margin-top:8px}
  .std-logos{gap:14px}
  .std-logos img{height:26px}
  .hs-url{display:none}
  .hs-window.hs-live .hs-screen{aspect-ratio:4/5}
  .hs-frame.hs-desktop{display:none}
  .hs-frame.hs-mobile{display:block}
  .ec-mcphub{transform:scale(.86);transform-origin:top center;height:180px}
  .quote{border-left:0;padding-left:0;text-align:center}
  .quote img{margin:0 auto 20px}
}

/* Rechtsseiten: Inhalt auf dunkler Flaeche, Inhaltsverzeichnis bleibt hell */
.legal-dark .legal-toc{background:var(--l3);border-color:var(--border)}
.legal-dark .legal-toc h2{color:var(--text-soft)}
.legal-dark .legal-toc a{color:var(--text-soft)}
.legal-dark .legal-toc a:hover{color:var(--text)}
.legal-dark .legal h2,.legal-dark .legal h3{color:var(--dtext)}
.legal-dark .legal p,.legal-dark .legal li,.legal-dark .legal dd{color:var(--dtext-soft)}
.legal-dark .legal dt,.legal-dark .legal .stand{color:var(--dmuted)}
.legal-dark .legal .lg{border-bottom-color:var(--d2)}
.legal-dark .legal a{color:var(--dtext);text-decoration-color:var(--fh-primary-light)}
.legal-dark .legal a:hover{color:var(--fh-primary-light)}
.legal-dark .legal .lg-note{background:var(--d3);border-color:var(--d2);color:var(--dtext-soft)}
.legal-dark .legal strong,.legal-dark .legal b{color:var(--dtext)}

/* Ueber Fluint, Unsere Werte: dunkle Flaeche mit Nachtdienst-Motiv aus der Bildwelt; die Karten wirken wie Fenster auf das Bild
   (Backdrop-Filter hellt das Motiv nur innerhalb der Karte auf, die Flaeche dazwischen bleibt abgedunkelt) */
.chapter.dark.werte-bg{position:relative;isolation:isolate;background:#1d1f20 url(assets/nachtdienst-01.jpg) center 40%/cover no-repeat}
.chapter.dark.werte-bg::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(22,24,25,.90) 0%,rgba(22,24,25,.82) 45%,rgba(22,24,25,.88) 100%)}
.chapter.dark.werte-bg .card{background:rgba(18,20,21,.38);border-color:rgba(255,255,255,.18);-webkit-backdrop-filter:brightness(2.1) saturate(1.05) blur(1.5px);backdrop-filter:brightness(2.1) saturate(1.05) blur(1.5px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),0 10px 30px rgba(0,0,0,.25);transition:border-color var(--t-hover) var(--ease),-webkit-backdrop-filter var(--t-hover) var(--ease),backdrop-filter var(--t-hover) var(--ease)}
.chapter.dark.werte-bg .card:hover{border-color:rgba(255,255,255,.34);background:rgba(18,20,21,.22);-webkit-backdrop-filter:brightness(2.4) saturate(1.1) blur(1px);backdrop-filter:brightness(2.4) saturate(1.1) blur(1px)}
.chapter.dark.werte-bg .card h3{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.7)}
.chapter.dark.werte-bg .card h3 + p{color:#f3f3f3;text-shadow:0 1px 3px rgba(0,0,0,.75)}
@supports not (backdrop-filter:brightness(2)){.chapter.dark.werte-bg .card{background:rgba(40,42,43,.78)}}
@media (max-width:820px){.chapter.dark.werte-bg{background-image:url(assets/nachtdienst-01-sm.jpg)}}

/* Kennzeichnung fuer Funktionen im fruehen Stadium (Kompetenzen erstellen, Entscheidung Martin 06.10.2026) */
.badge-alpha{display:inline-block;vertical-align:middle;margin-left:10px;padding:3px 9px;border:1px solid currentColor;border-radius:999px;font:500 11px/1.2 var(--font-body);letter-spacing:.06em;text-transform:uppercase;opacity:.85;white-space:nowrap}

/* Druck: Kopf, Unternavigation, Hinweis und Menueknopf nicht mitdrucken */
@media print{
  .nav-wrap,.localnav,.hinweis,#hinweis,.burger,.skip,.gallery-nav{display:none!important}
  body{background:#fff}
}

.cert-links{margin-top:28px;justify-content:center}