/* HBOT-Wiki Startseite - Port des Claude-Design-Entwurfs (HBOT Wiki Startseite.dc.html)
   Hell, Glass-Nav, Hero mit O2-Bläschen-Canvas, Video-Band, Brand-Grid, FAQ, Glass-Footer.
   Fonts: Poppins (Headings) + Mulish (Body). Akzent: Teal #14b8a6 (kleiner Text: --accent-text #0f766e). */

:root {
  --accent: #14b8a6;            /* Teal - Flaechen, Borders, Buttons, Icons */
  --accent-text: #0f766e;       /* dunklere Teal-Stufe fuer kleinen Text auf Weiss (AA ~5.5:1) */
  --page-bg: #eef0f9;
  --ink: #171a24;
  --body: #4a4f60;
  --muted: #565b6c;
  --hfont: 'Plus Jakarta Sans', sans-serif;
  --bfont: 'Mulish', sans-serif;
  --mfont: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Genesis-DNA: Gradient-Headline (ink -> teal nach rechts) + Standard-Easing */
  --grad-text: linear-gradient(120deg, var(--ink) 0%, #0f5c52 55%, #14b8a6 100%);
  /* Gradient-Kern fuer Headlines auf dunklem Foto-Grund (cine-hero): near-white -> Teal, leuchtend */
  --grad-text-onDark: linear-gradient(118deg, #eafffb 0%, #6ff0dc 42%, #2dd4bf 100%);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-toggle: cubic-bezier(.4, .2, .2, 1);

  /* Neumorphism-Schatten (Soft-UI-Sheet: #FAFBFF light / #161B1D @23% dark; Stufen -5/10, -10/20, -20/40) */
  --nm-light: #FAFBFF;
  --nm-dark: rgba(22, 27, 29, .23);
  --nm-sm: -5px -5px 10px var(--nm-light), 5px 5px 10px var(--nm-dark);
  --nm-md: -10px -10px 20px var(--nm-light), 10px 10px 20px var(--nm-dark);
  --nm-lg: -20px -20px 40px var(--nm-light), 20px 20px 40px var(--nm-dark);
}

html, body { margin: 0; padding: 0; }
*, *::before, *::after { box-sizing: border-box; }

body.home {
  min-height: 100vh;
  background: var(--page-bg);
  color: #20232f;
  font-family: var(--bfont);
  -webkit-font-smoothing: antialiased;
}
.home a { color: inherit; text-decoration: none; }
/* Nur echte Text-Links faerben - Buttons haben eigene Hover-States (sonst Text teal-auf-teal).
   accent-text statt accent, damit kleiner Link-Text im Hover AA-lesbar bleibt. */
.home a:not([class*="btn"]):not(.rm-btn):hover { color: var(--accent-text); }

/* Genesis Gradient-Text: Headline wird nach rechts farbig (ink -> teal) */
.grad {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Genesis Eyebrow-Pill: Mono, gedaempft, pulsierender Teal-Punkt mit Glow */
.hero__label, .steps-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mfont);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #8a8f9e;
}
.hero__label::before, .steps-kicker::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(20,184,166,.55);
  animation: cc-pulse 2.4s var(--ease-standard) infinite;
}
@keyframes cc-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .3; transform: scale(.85); } }

/* ===== Header / Nav ===== */
.site-header {
  position: sticky;
  top: 14px;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 14px 24px 0;
  padding: 14px 28px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255,255,255,.62) 0%, rgba(228,248,244,.42) 55%, rgba(198,240,232,.34) 100%);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow:
    0 22px 50px -26px rgba(24,48,80,.5),
    0 6px 16px -10px rgba(24,48,80,.25),
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -10px 24px -18px rgba(80,140,190,.35);
}
.logo { display: flex; align-items: center; }
.logo__img { display: block; width: auto; height: 30px; }
.logo__img--sm { height: 26px; }
.site-nav {
  display: flex;
  align-items: center;
  gap: 30px;
  font-family: var(--hfont);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #2c303e;
}
.nav-link { transition: color .18s ease; white-space: nowrap; }
.nav-link:hover { color: var(--accent-text); }
/* Dropdown "HBOT Chambers": Glas-Panel in Header-Anatomie, Hover + Focus-within */
.nav-item--drop { position: relative; display: inline-flex; align-items: center; }
.nav-link--drop { display: inline-flex; align-items: center; }
.nav-caret {
  display: inline-block;
  width: 5px; height: 5px;
  margin-left: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: .65;
  transition: transform .18s var(--ease-standard), opacity .18s var(--ease-standard);
}
.nav-item--drop:hover .nav-caret,
.nav-item--drop:focus-within .nav-caret {
  transform: translateY(0) rotate(-135deg);
  opacity: 1;
}
.nav-drop {
  position: absolute;
  top: 100%;
  left: -14px;
  z-index: 5;
  min-width: 244px;
  margin-top: 12px;
  padding: 8px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: linear-gradient(135deg, rgba(255,255,255,.9) 0%, rgba(230,248,244,.78) 55%, rgba(202,240,232,.72) 100%);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow:
    0 20px 44px -24px rgba(24,48,80,.5),
    0 6px 16px -10px rgba(24,48,80,.25),
    inset 0 1px 0 rgba(255,255,255,.85);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-7px);
  pointer-events: none;
  transition: opacity .18s var(--ease-standard), transform .18s var(--ease-standard), visibility 0s linear .18s;
}
/* Transparente Hover-Bruecke ueber der 12px-Luecke, damit der Hover nicht abreisst */
.nav-drop::before {
  content: '';
  position: absolute;
  top: -12px; left: 0; right: 0;
  height: 12px;
}
.nav-item--drop:hover .nav-drop,
.nav-item--drop:focus-within .nav-drop {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity .18s var(--ease-standard), transform .18s var(--ease-standard), visibility 0s;
}
.nav-drop__link {
  display: block;
  padding: 10px 14px;
  border-radius: 10px;
  font-family: var(--hfont);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: .005em;
  line-height: 1.3;
  text-transform: none;
  color: #2c303e;
  white-space: nowrap;
  transition: color .18s var(--ease-standard), background-color .18s var(--ease-standard);
}
.nav-drop__link:hover,
.nav-drop__link:focus-visible {
  color: var(--accent-text);
  background-color: rgba(20,184,166,.09);
}
@media (prefers-reduced-motion: reduce) {
  .nav-drop { transition: opacity .12s linear, visibility 0s linear .12s; transform: none; }
  .nav-item--drop:hover .nav-drop,
  .nav-item--drop:focus-within .nav-drop { transform: none; transition: opacity .12s linear, visibility 0s; }
  .nav-caret { transition: none; }
}
/* Sprachwahl: kompakt hinter den Nav-Links, aktive Sprache in Teal */
.nav-langs {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: 6px;
  padding-left: 18px;
  border-left: 1px solid rgba(30,50,80,.16);
  font-family: var(--mfont);
  font-size: 11px;
  letter-spacing: .08em;
}
.nav-lang { color: #8a8f9e; transition: color .18s ease; }
a.nav-lang:hover { color: var(--accent-text); }
.nav-lang.is-active { color: var(--accent-text); font-weight: 700; }
/* Karten komplett klickbar: unsichtbarer Stretched-Link ueber der ganzen Karte */
.card { position: relative; }
.card__link,
.brand-card__link {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
}
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  padding: 6px;
  cursor: pointer;
}
.nav-toggle span { width: 22px; height: 2px; background: #2c303e; border-radius: 2px; }

/* ===== Hero ===== */
.hero {
  position: relative;
  min-height: min(84vh, 720px);
  overflow: hidden;
  display: flex;
  align-items: center;
  background: var(--page-bg);
}
.hero__bubbles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  z-index: 0;
}
/* Weiche Unterkante: Hero laeuft sanft in den Seitenhintergrund aus (Zachi, 2026-07-22) */
.hero::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 150px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(238,240,249,0) 0%, var(--page-bg) 100%);
}
.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 40px;
}
.hero__copy { max-width: 640px; }
.hero__label {
  margin-bottom: 22px;
  animation: heroUp .7s cubic-bezier(.2,.7,.2,1) both .05s;
}
.hero__title {
  font-family: var(--hfont);
  font-weight: 300;
  font-size: clamp(28px, 5vw, 48px);
  line-height: 1.14;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: #141824;
  margin: 0 0 22px;
  text-wrap: balance;
  animation: heroUp .8s cubic-bezier(.2,.7,.2,1) both .16s;
}
/* Genesis-Kontrast: duenne Caps + fetter Gradient-Kern */
.hero__title .grad { font-weight: 700; }
.hero__sub {
  font-size: 18px;
  line-height: 1.65;
  color: var(--body);
  margin: 0 0 36px;
  max-width: 52ch;
  text-wrap: pretty;
  animation: heroUp .8s cubic-bezier(.2,.7,.2,1) both .32s;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; animation: heroUp .8s cubic-bezier(.2,.7,.2,1) both .48s; }
.btn {
  font-family: var(--hfont);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 10px;
  padding: 15px 28px;
  display: inline-block;
}
/* Genesis Button-Shine: weisses Lichtband unter dem Label (z-index -1), Text bleibt oben */
.btn--primary, .btn--ghost { position: relative; overflow: hidden; z-index: 1; }
.btn--primary::before, .btn--ghost::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  transition: left .6s var(--ease-standard);
  z-index: -1;
  pointer-events: none;
}
.btn--primary:hover::before, .btn--ghost:hover::before { left: 100%; }
.btn--primary {
  color: #06222e;
  background: var(--accent);
  border: 1.5px solid var(--accent);
  box-shadow: 0 16px 34px -18px rgba(20,184,166,.7);
}
.home .btn--primary:hover {
  color: #06222e;
  filter: brightness(1.06);
  transform: translateY(-3px);
  box-shadow: 0 22px 44px -18px rgba(20,184,166,.85);
}
.btn--ghost {
  color: #22303c;
  background: rgba(255,255,255,.7);
  border: 1.5px solid rgba(30,50,80,.16);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background .18s ease, border-color .18s ease, box-shadow .25s var(--ease-toggle), transform .25s var(--ease-toggle);
}
.home .btn--ghost:hover {
  color: #22303c;
  background: rgba(255,255,255,.95);
  border-color: rgba(20,184,166,.5);
  transform: translateY(-3px);
  box-shadow: 0 14px 30px -14px rgba(20,184,166,.55);
}
.btn--primary { transition: filter .18s ease, box-shadow .25s var(--ease-toggle), transform .25s var(--ease-toggle); }
@keyframes heroUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===== Sektionen ===== */
/* Grundraster 1360 statt 1120 - die Seite darf atmen (Zachi, 2026-07-22).
   Fliesstext bleibt durch ch-Limits lesbar, nur die Buehne wird breiter. */
.section { max-width: 1360px; margin: 0 auto; }
/* Welcome breiter als das Standard-Raster: Text greift nach links aus,
   Video haengt rechts raus - Block waechst, statt den Text zu quetschen (Zachi) */
.section--welcome {
  position: relative;
  max-width: 1360px;
  padding: 78px 620px 20px 40px;
}
/* Welcome-Media rechts neben dem Text: buendig mit der Headline-Oberkante,
   Genesis-Karten-Radius (22px), nm-lg-Schatten, Hover startet das Video. */
.welcome-media {
  position: absolute;
  top: 78px;
  right: -40px;
  width: 580px;
  aspect-ratio: 16 / 9;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: var(--nm-lg);
}
.welcome-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.section--chambers { padding: 56px 40px 84px; }
.section--brands { padding: 80px 40px 20px; }
.section--expert { padding: 80px 40px 30px; }
.section--faq { padding: 60px 40px 90px; }

.welcome-title {
  font-family: var(--hfont);
  font-weight: 700;
  font-size: 38px;
  line-height: 1.18;
  letter-spacing: -.5px;
  margin: 0 0 10px;
  color: var(--ink);
  max-width: 22ch;
  text-wrap: balance;
}
/* Kurze Headline + gestylter Subtitel statt Vier-Zeilen-Klotz (Zachi, 2026-07-22) */
.welcome-subtitle {
  font-family: var(--hfont);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: .01em;
  color: var(--muted);
  margin: 0 0 26px;
  max-width: 52ch;
  text-wrap: balance;
}
.section p.lead {
  max-width: 70ch;
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--body);
  margin: 0 0 18px;
  text-wrap: pretty;
}
.section p.lead:last-child { margin-bottom: 0; }

.h2 {
  font-family: var(--hfont);
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 34px;
}
.h2--offer { font-size: 28px; letter-spacing: -.3px; margin-bottom: 12px; }
/* Satz unter der Offer-Headline (Zachi: Headline nie nackt stehen lassen) */
.section-lead {
  max-width: 62ch;
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--body);
  margin: 0 0 34px;
  text-wrap: pretty;
}
.h2--brands { font-size: 32px; line-height: 1.2; letter-spacing: -.4px; margin-bottom: 26px; max-width: 24ch; text-wrap: balance; }
.h2--expert { font-size: 30px; letter-spacing: -.3px; margin-bottom: 24px; }
.h2--faq { font-size: 30px; line-height: 1.25; letter-spacing: -.3px; margin-bottom: 36px; max-width: 26ch; text-wrap: balance; }

.section p.body-text {
  max-width: 74ch;
  font-size: 16px;
  line-height: 1.75;
  color: var(--body);
  margin: 0 0 18px;
  text-wrap: pretty;
}
.section p.body-text strong { color: #1c1f2b; }

/* ===== Offer-Karten ===== */
.offer-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; margin-bottom: 30px; }
.offer-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.card {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 16px;
  padding: 14px;
  box-shadow: var(--nm-md);
  transition:
    transform .28s cubic-bezier(.2,.7,.2,1),
    box-shadow .28s cubic-bezier(.2,.7,.2,1),
    border-color .28s ease;
}
.card:hover {
  transform: translateY(-6px);
  border-color: rgba(20,184,166,.34);
  box-shadow: var(--nm-lg);
}
.offer-grid-3 .card { padding: 12px; }
.card__media {
  aspect-ratio: 16/9;
  border-radius: 11px;
  overflow: hidden;
  background: #eef0f7;
}
.offer-grid-3 .card__media { aspect-ratio: 4/3; }
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .55s cubic-bezier(.2,.7,.2,1);
}
.card:hover .card__media img { transform: scale(1.045); }
.card__body { padding: 20px 12px 12px; }
.offer-grid-3 .card__body { padding: 18px 10px 10px; }
.card__title {
  font-family: var(--hfont);
  font-weight: 700;
  font-size: 17px;
  margin: 0 0 10px;
  color: #1c1f2b;
  display: flex;
  align-items: center;
  gap: 9px;
}
.offer-grid-3 .card__title { font-size: 15.5px; margin-bottom: 9px; align-items: flex-start; gap: 8px; }
.card__check { color: var(--accent); font-size: 19px; }
.offer-grid-3 .card__check { font-size: 17px; line-height: 1.2; }
.card__text { font-size: 15px; line-height: 1.7; color: var(--muted); margin: 0; }
.offer-grid-3 .card__text { font-size: 14px; line-height: 1.65; }

/* ===== Genesis Icon-Cards (die drei kleinen Offer-Karten - Bild raus, Icon-Chip rein) ===== */
.offer-grid-3 .card--icon { padding: 28px 26px 26px; }
.card--icon .card__body { padding: 0; }
/* Icon-Chip: 46px Squircle (Radius 14 = --r-md), nm-sm-Schatten, feine Teal-Border, Icon im Self-Glow */
.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 18px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(20,184,166,.28);
  box-shadow: var(--nm-sm);
  color: var(--accent);
}
.card__icon svg {
  width: 24px;
  height: 24px;
  filter: drop-shadow(0 0 6px rgba(20,184,166,.45));
}
.offer-grid-3 .card--icon .card__title { font-size: 16px; margin-bottom: 10px; }

/* ===== Video-Band - Full-Bleed cinematischer Moment (Kante zu Kante, keine Box) ===== */
/* Voll-Bleed-Kinder duerfen bis zum Viewport-Rand ausbrechen, ohne Phantom-Scrollbar.
   overflow-x: clip laesst overflow-y sichtbar (sticky Header liegt ausserhalb main - unberuehrt). */
.home main { overflow-x: clip; }
.band-wrap { padding: 0; }
.band {
  max-width: none;
  margin: 0;
  position: relative;
  height: 440px;
  border-radius: 0;
  overflow: hidden;
  background: #0a1520;
}
.band video, .band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* 3D-Innenkante: das Band wirkt wie ein in die Seite eingelassenes Fenster
   (dunkle Inset-Schatten oben/unten + feine Glas-Lichtlinie an den Kanten) */
.band video { filter: saturate(.82) brightness(.96); }
.band::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  /* leichter Gradient-Schleier: nimmt dem Video die Farbwucht (Zachi) */
  background: linear-gradient(180deg, rgba(12,18,30,.30) 0%, rgba(12,18,30,.14) 45%, rgba(12,18,30,.34) 100%);
  box-shadow:
    inset 0 26px 44px -20px rgba(5, 10, 18, .65),
    inset 0 -26px 44px -20px rgba(5, 10, 18, .65);
  border-top: 1px solid rgba(255, 255, 255, .35);
  border-bottom: 1px solid rgba(255, 255, 255, .28);
}
/* Parallax: Video ueberformatig (130% Hoehe, -15% Offset), JS schiebt translateY im Puffer.
   Bei prefers-reduced-motion bleibt translateY(0) = ruhiger Center-Crop. */
.band video { top: -15%; bottom: auto; height: 130%; will-change: transform; }

/* ===== Brand-Karten ===== */
.brand-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.brand-card {
  position: relative;
  background: #fff;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--nm-md);
  display: flex;
  flex-direction: column;
  transition:
    transform .28s cubic-bezier(.2,.7,.2,1),
    box-shadow .28s cubic-bezier(.2,.7,.2,1),
    border-color .28s ease;
}
.brand-card:hover {
  transform: translateY(-6px);
  border-color: rgba(20,184,166,.34);
  box-shadow: var(--nm-lg);
}

/* Genesis Shine-Sweep: Teal-Lichtband wandert bei Hover ueber die Karte */
.card::before, .brand-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(20,184,166,.08), transparent);
  transition: left .6s var(--ease-standard);
  pointer-events: none;
}
.card:hover::before, .brand-card:hover::before { left: 100%; }
.brand-card__media { aspect-ratio: 16/11; background: #eef0f7; position: relative; overflow: hidden; }
.brand-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.brand-slate, .brand-slate span { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.brand-card:hover .brand-slate { transform: scale(1.05); }
.brand-card:hover .brand-slate span { transform: scale(1.06); color: rgba(28,63,90,.3); }
.brand-slate {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(90% 120% at 82% 18%, rgba(20,184,166,.18) 0%, rgba(20,184,166,0) 55%),
    linear-gradient(135deg, #f1f6f8 0%, #e2f1ec 60%, #d6ece5 100%);
}
.brand-slate span {
  font-family: var(--hfont);
  font-weight: 800;
  font-size: 54px;
  letter-spacing: -2px;
  color: rgba(28,63,90,.22);
}
.brand-card__body { padding: 22px 22px 26px; display: flex; flex-direction: column; flex: 1; }
.brand-card__title { font-family: var(--hfont); font-weight: 700; font-size: 16px; margin: 0 0 10px; color: #1c1f2b; }
.brand-card__text { font-size: 14px; line-height: 1.65; color: #5c6072; margin: 0 0 20px; flex: 1; }
.rm-btn {
  align-self: flex-start;
  font-family: var(--hfont);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent-text);
  border: 1.5px solid var(--accent);
  border-radius: 8px;
  padding: 10px 20px;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
/* Genesis-Regel: kein Farb-Umschlag beim Hover - nur Lift + staerkere Kante (wie btn--ghost) */
.home .rm-btn:hover {
  background: rgba(255,255,255,.95);
  color: var(--accent-text);
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -14px rgba(20,184,166,.5);
}
.rm-btn { transition: background .2s ease, border-color .2s ease, transform .25s var(--ease-toggle), box-shadow .25s var(--ease-toggle); }

.pagination { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 44px; }
.brands-more { display: flex; justify-content: center; margin-top: 44px; }
.page-dot {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--page-bg);
  color: #8a8f9e;
  font-family: var(--hfont);
  font-weight: 600;
  font-size: 13px;
  box-shadow: var(--nm-sm);
}
.page-dot--active {
  background: #2b2f3c;
  color: #fff;
  box-shadow: inset 2px 2px 5px rgba(0,0,0,.45), inset -2px -2px 5px rgba(255,255,255,.06);
}
.page-dot--next { color: var(--accent); font-size: 16px; }

/* ===== Expert ===== */
.expert-highlight { font-size: 16px; line-height: 1.75; color: #1c1f2b; font-weight: 700; margin: 0 0 28px; }
.btn--white {
  font-size: 12.5px;
  letter-spacing: .08em;
  color: #2c303e;
  background: #eef0f9;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 9px;
  padding: 14px 26px;
  box-shadow: var(--nm-sm);
  transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.home .btn--white:hover { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: var(--nm-sm), inset 0 0 0 1px rgba(20,184,166,.4); }

/* ===== FAQ ===== */
.faq-list { display: flex; flex-direction: column; gap: 14px; max-width: 920px; }
.faq-list details {
  background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 14px;
  box-shadow: var(--nm-sm);
  transition: border-color .25s ease, box-shadow .25s cubic-bezier(.2,.7,.2,1);
}
.faq-list details:hover {
  border-color: rgba(20,184,166,.28);
  box-shadow: var(--nm-md);
}
.faq-list details[open] {
  border-color: rgba(20,184,166,.32);
  box-shadow: var(--nm-md);
}
.faq-list summary { display: flex; align-items: center; gap: 16px; padding: 18px 22px; list-style: none; cursor: pointer; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::marker { content: ''; }
.faq-plus {
  flex: none;
  width: 26px; height: 26px;
  border: 1.5px solid var(--accent);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
  font-size: 18px;
  line-height: 1;
  transition: transform .2s ease;
}
details[open] .faq-plus { transform: rotate(45deg); }
.faq-q {
  font-family: var(--hfont);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.faq-a { margin: 0; padding: 2px 22px 22px 64px; font-size: 15px; line-height: 1.7; color: var(--muted); }

/* ===== Steps / How it works (Bluezone ProcessSteps-Mechanik) ===== */
.section--steps { padding: 84px 40px 40px; }
.steps-head { text-align: center; max-width: 720px; margin: 0 auto 46px; }
.steps-kicker {
  margin-bottom: 16px;
}
.h2--steps {
  font-size: 34px;
  line-height: 1.15;
  letter-spacing: -.4px;
  margin: 0;
  text-wrap: balance;
}
.h2--steps em {
  font-style: italic;
  font-weight: 700;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.process { max-width: 980px; margin: 0 auto; counter-reset: step; display: flex; flex-direction: column; gap: 18px; }
.process__step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 30px;
  align-items: center;
  padding: 26px 34px;
  counter-increment: step;
  background: #fff;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 16px;
  box-shadow: var(--nm-md);
  transition:
    transform .3s cubic-bezier(.2,.7,.2,1),
    border-color .3s ease,
    box-shadow .3s cubic-bezier(.2,.7,.2,1);
}
.process__step:hover {
  transform: translateY(-4px);
  border-color: rgba(20,184,166,.34);
  box-shadow: var(--nm-lg);
}
.process__number {
  font-family: var(--hfont);
  font-weight: 700;
  font-size: 52px;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--accent);
  text-shadow: 0 0 22px rgba(20,184,166,.42);
  min-width: 2.4ch;
  text-align: center;
  user-select: none;
}
.process__number::after { content: counter(step, decimal-leading-zero); }
.process__content h3 {
  font-family: var(--hfont);
  font-weight: 700;
  font-size: 19px;
  margin: 0 0 8px;
  color: #1c1f2b;
}
.process__content p { font-size: 15px; line-height: 1.7; color: var(--muted); margin: 0; }

/* ===== Footer ===== */
.site-footer {
  position: relative;
  margin: 80px 0 0;
  padding: 56px 24px 44px;
  overflow: hidden;
  color: var(--body);
  isolation: isolate;
  background: var(--page-bg);
}
/* Footer-Bubbles: dieselbe Engine wie im Hero, steigen hinter der Glass-Karte auf (z-index 0) */
.footer-bubbles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
}
/* Zellen-Finale: volle Deckkraft hinter der Glass-Karte (Zachis Ebenen-Prinzip -
   der Bildfond IST die Seitenfarbe, kein Transparenz-Fade auf dem Motiv). */
.footer-cells {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  z-index: 0;
  pointer-events: none;
}
/* Leuchtende Oberkante (Genesis-Kante): feine 1px-Teal-Linie ueber die volle Breite,
   an den Raendern aufgeloest. */
.site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(20,184,166,.55), transparent);
}
/* Sanfter Teal-Schimmer, der von der Kante nach unten auslaeuft */
.site-footer::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 140px;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(20,184,166,.09) 0%, transparent 100%);
}

/* Expert: Zachis Glas-O2 rechts neben dem Text - echte Spalten, nie Ueberlappung.
   Hover startet die Video-Version (gleicher Fond, nahtloser Wechsel). */
.section--expert {
  position: relative;
  /* Rechte Zone fest fuer das O2 reserviert - Text kann nie darunter laufen */
  padding-right: 500px;
}
.expert-o2 {
  position: absolute;
  top: 50%;
  right: 40px;
  transform: translateY(-50%);
  width: 420px;
}
.expert-o2__media {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
}
@media (max-width: 1060px) {
  .section--expert { padding-right: 380px; }
  .expert-o2 { width: 320px; right: 24px; }
  .section--welcome { padding-right: 380px; }
  .welcome-media { width: 420px; right: 0; }
}
@media (max-width: 860px) {
  .section--expert { padding-right: 40px; }
  .expert-o2 { display: none; }
  .section--welcome { padding-right: 40px; }
  .welcome-media { display: none; }
}
/* Genesis-Footer: KEINE Karten-Box - volle Breite, Inhalt in weitem Raster (Zachi, 2026-07-22) */
.footer-card {
  position: relative;
  z-index: 2;
  max-width: 1360px;
  margin: 0 auto;
  padding: 48px 48px 30px;
  border-radius: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 0;
  box-shadow: none;
}
/* Zentrierter Logo-Block ueber dem Footer-Inhalt (Genesis), Tagline im Mono-Eyebrow-Stil */
.footer-brand {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
  padding-bottom: 38px;
  margin-bottom: 40px;
}
.footer-brand::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(20,184,166,.2) 20%, rgba(30,50,80,.1) 50%, rgba(20,184,166,.2) 80%, transparent);
}
.footer-about__logo { display: inline-flex; margin-bottom: 14px; }
.footer-about .footer-tagline { margin: 0 0 14px; }
.footer-tagline {
  margin: 0;
  font-family: var(--mfont);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #8a8f9e;
}
.logo__img--footer { height: 34px; }
/* Spalten-Balance per Grid: About breit, zwei Link-Spalten gleich - keine tote Mitte.
   display:contents an .footer-links loest den Wrapper auf, seine zwei Divs werden Grid-Items. */
.footer-cols {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 40px 48px;
  align-items: start;
}
.footer-about { max-width: 340px; }
.footer-about p { font-size: 14px; line-height: 1.75; color: var(--muted); margin: 0; }
.footer-links { display: contents; }
.footer-links > div { min-width: 0; }
/* Link-Spalten-Ueberschrift im Eyebrow-Stil: Mono, gedaempft, mit kleinem Teal-Glow-Punkt */
.footer-links h4 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mfont);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #8a8f9e;
  margin: 2px 0 18px;
}
.footer-links h4::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 7px rgba(20,184,166,.5);
}
.footer-links nav { display: flex; flex-direction: column; gap: 12px; }
.footer-links nav a {
  width: fit-content;
  font-size: 14px;
  color: var(--muted);
  transition: color .2s var(--ease-standard), transform .2s var(--ease-standard);
}
.footer-links nav a:hover {
  color: var(--accent-text);
  transform: translateX(3px);
}
/* Chip-Badge-Zeile (Genesis .cc-trust-row--chips): Glass-Pills mit Glow-Ring-Punkt */
.footer-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 46px;
}
.footer-chip {
  position: relative;
  padding: 9px 18px 9px 36px;
  background: linear-gradient(158deg, rgba(255,255,255,.72), rgba(255,255,255,.5));
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: var(--nm-sm);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  transition: border-color .2s var(--ease-standard), transform .2s var(--ease-standard);
}
.footer-chip:hover {
  border-color: rgba(20,184,166,.4);
  transform: translateY(-2px);
}
.footer-chip::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 50%;
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  transform: translateY(-50%);
}
.footer-chip::after {
  content: '';
  position: absolute;
  left: 18px;
  top: 50%;
  width: 4px;
  height: 4px;
  background: var(--accent);
  border-radius: 50%;
  transform: translateY(-50%);
  box-shadow: 0 0 6px rgba(20,184,166,.6);
}
/* Bottom-Bar (Genesis): Copyright links, Legal-Links rechts, feine Teal-Fade-Trennlinie */
.footer-bottom {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 24px;
  margin-top: 44px;
  padding-top: 26px;
}
.footer-bottom::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(20,184,166,.26) 0%, rgba(30,50,80,.09) 45%, transparent 100%);
}
.footer-copy {
  font-family: var(--bfont);
  font-size: 13px;
  color: #6b7082;
}
.footer-legal {
  display: inline-flex;
  align-items: center;
  gap: 22px;
}
.footer-legal a {
  font-family: var(--bfont);
  font-size: 13px;
  color: #6b7082;
  transition: color .2s var(--ease-standard);
}

/* ===== Responsive ===== */
@media (max-width: 1080px) {
  .site-nav { gap: 20px; }
}
@media (max-width: 920px) {
  .nav-toggle { display: flex; }
  .site-header { flex-wrap: wrap; }
  .site-nav {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding-top: 16px;
  }
  .site-header.is-open .site-nav { display: flex; }
  /* Dropdown auf Touch: statisch eingerueckt unter dem Hauptpunkt, kein Hover-Panel */
  .nav-item--drop { flex-direction: column; align-items: flex-start; width: 100%; }
  .nav-caret { display: none; }
  .nav-drop {
    position: static;
    z-index: auto;
    min-width: 0;
    margin: 10px 0 0;
    padding: 0 0 0 14px;
    border: 0;
    border-left: 2px solid rgba(20,184,166,.28);
    border-radius: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    gap: 2px;
  }
  .nav-drop::before { display: none; }
  .nav-drop__link { padding: 8px 10px; white-space: normal; }
  .offer-grid-2 { grid-template-columns: 1fr; }
  .offer-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .brand-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .site-header { margin: 10px 12px 0; padding: 12px 18px; }
  .hero__inner, .section--welcome, .section--chambers, .section--brands, .section--expert, .section--faq { padding-left: 24px; padding-right: 24px; }
  .welcome-title { font-size: 31px; }
  .h2--brands { font-size: 27px; }
  .band { height: 260px; }
  .band-wrap { padding: 0; }
  .faq-a { padding-left: 22px; }
}
@media (max-width: 620px) {
  .offer-grid-3 { grid-template-columns: 1fr; }
  .brand-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .footer-cols { grid-template-columns: 1fr 1fr; gap: 34px 40px; }
  .footer-about { grid-column: 1 / -1; max-width: 520px; }
  .footer-bottom { justify-content: center; text-align: center; gap: 10px 20px; }
}
@media (max-width: 460px) {
  .footer-card { padding: 42px 26px 26px; }
  .footer-cols { grid-template-columns: 1fr; gap: 30px; }
  .footer-chip { font-size: 12px; padding: 8px 15px 8px 32px; }
  .footer-chip::before { left: 12px; }
  .footer-chip::after { left: 16px; }
}

/* =====================================================================
   Hersteller-Unterseiten (mfr-*) - Genesis-DNA: ruhiger Buehnen-Hero,
   Register-Chips (verified/neutral), Spec-Datasheet, Verified-Data-Trust.
   Body traegt .home -> Buttons, .grad, Shine-Sweeps, nm-Schatten geerbt.
   ===================================================================== */
.mfr-hero {
  position: relative;
  overflow: hidden;
  background: var(--page-bg);
  padding: 76px 0 60px;
}
/* Buehnen-Atmosphaere: statische Teal-Glows hinter Titel + Media (Echo der Hero-Blaeschen, ohne JS) */
.mfr-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(52% 62% at 82% 2%, rgba(20,184,166,.16), transparent 60%),
    radial-gradient(46% 60% at 1% 28%, rgba(20,184,166,.06), transparent 60%);
}
/* Weiche Unterkante wie im Startseiten-Hero */
.mfr-hero::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 130px;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(238,240,249,0) 0%, var(--page-bg) 100%);
}
.mfr-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 560px;
  gap: 60px;
  align-items: start;
}
.mfr-hero--textonly .mfr-hero__inner { grid-template-columns: minmax(0, 1fr); }
.mfr-hero__copy { max-width: 640px; }
.mfr-hero .hero__label { margin-bottom: 20px; }
.mfr-hero__title {
  font-family: var(--hfont);
  font-weight: 300;
  font-size: clamp(28px, 4.4vw, 46px);
  line-height: 1.14;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: #141824;
  margin: 0 0 26px;
  text-wrap: balance;
}
.mfr-hero__title .grad { font-weight: 700; }

/* ----- Register-Chips: verified (Teal + Haken, Self-Glow) vs. neutral (grau, Hohlring) ----- */
.mfr-badges { display: flex; flex-wrap: wrap; gap: 12px; }
.mfr-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 17px 9px 13px;
  border-radius: 999px;
  font-family: var(--bfont);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  box-shadow: var(--nm-sm);
}
.mfr-chip__label { white-space: normal; }
.mfr-chip__ico { flex: none; width: 17px; height: 17px; }
.mfr-chip--verified {
  background: linear-gradient(158deg, rgba(20,184,166,.16), rgba(20,184,166,.06));
  border: 1px solid rgba(20,184,166,.5);
  color: var(--accent-text);
}
.mfr-chip--verified .mfr-chip__ico {
  color: var(--accent);
  filter: drop-shadow(0 0 5px rgba(20,184,166,.55));
  animation: cc-glow 2.6s var(--ease-standard) infinite;
}
@keyframes cc-glow { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
.mfr-chip--neutral {
  background: linear-gradient(158deg, rgba(255,255,255,.72), rgba(255,255,255,.5));
  border: 1px solid rgba(30,50,80,.16);
  color: #6b7082;
}
.mfr-chip__ring {
  flex: none;
  width: 13px; height: 13px;
  border: 1.5px solid rgba(120,128,145,.7);
  border-radius: 50%;
}

/* ----- Hero-Media: exakt wie Startseiten-Karten (Radius 22, nm-lg, Shine-Sweep) ----- */
.mfr-hero__media {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: var(--nm-lg);
  background: #eef0f7;
}
.mfr-hero__media::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
  transition: left .7s var(--ease-standard);
}
.mfr-hero__media:hover::before { left: 100%; }
.mfr-hero__media img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.mfr-hero__media:hover img { transform: scale(1.04); }

/* Hero-CTA (Genesis-Button-System, aus dem Hero heraus handeln) */
.mfr-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

/* ===== Content-Sektion ===== */
.mfr-section { max-width: 1360px; margin: 0 auto; padding: 12px 40px 20px; }

.mfr-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mfont);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #8a8f9e;
  margin: 0 0 18px;
}
.mfr-kicker::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(20,184,166,.55);
  animation: cc-pulse 2.4s var(--ease-standard) infinite;
}

/* ----- Spec-Datasheet: EIN Soft-UI-Panel, Hairline-Raster (nie ragged) ----- */
.mfr-facts { margin-bottom: 40px; }
.mfr-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(30,50,80,.1);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--nm-md);
}
.mfr-specs--odd .mfr-spec:last-child { grid-column: 1 / -1; }
.mfr-spec {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 26px 32px 28px;
  background: #fff;
  transition: background .25s var(--ease-standard);
}
.mfr-spec:hover { background: #f6fcfb; }
.mfr-spec__label {
  font-family: var(--mfont);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #8a8f9e;
}
.mfr-spec__value {
  font-family: var(--bfont);
  font-size: 16.5px;
  line-height: 1.5;
  font-weight: 600;
  color: #1c1f2b;
}

/* ----- Verified-Data-Trust-Block: Genesis-Leuchtkante wie der Footer ----- */
.mfr-trust {
  position: relative;
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 40px 48px;
  padding: 40px 40px 38px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
  border: 1px solid rgba(20,184,166,.18);
  border-radius: 22px;
  box-shadow: var(--nm-md);
  overflow: hidden;
}
.mfr-trust::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(20,184,166,.6), transparent);
}
.mfr-trust::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 120px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(20,184,166,.07) 0%, transparent 100%);
}
.mfr-trust__main { position: relative; }
.mfr-trust__text {
  margin: 0 0 16px;
  font-size: 15.5px;
  line-height: 1.72;
  color: var(--body);
  max-width: 60ch;
}
.mfr-closing {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: #8a8f9e;
  font-style: italic;
}
.mfr-trust__aside {
  position: relative;
  border-left: 1px solid rgba(30,50,80,.1);
  padding-left: 40px;
}
.mfr-trust__aside-label {
  display: block;
  font-family: var(--mfont);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #8a8f9e;
  margin-bottom: 18px;
}
.mfr-sources { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.mfr-sources li {
  position: relative;
  padding-left: 26px;
  font-size: 14px;
  font-weight: 600;
  color: #2c303e;
}
.mfr-sources li::before {
  content: '';
  position: absolute;
  left: 2px; top: 3px;
  width: 11px; height: 6px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

/* ----- At-a-Glance-Lead: Kurzfazit direkt unter dem Hero, ruhig gesetzt (~62ch) ----- */
.mfr-lead { margin-bottom: 44px; }
.mfr-lead__text {
  max-width: 92ch;
  margin: 0;
  font-family: var(--bfont);
  font-weight: 400;
  font-size: clamp(17px, 1.55vw, 19px);
  line-height: 1.6;
  color: #2a2f3d;
  text-wrap: pretty;
}

/* ----- Profil-Sections als Genesis-Karten mit Teal-Leuchtkante (Haussanierung-DNA) ----- */
.mfr-profile { margin-bottom: 44px; display: flex; flex-direction: column; gap: 22px; }
.mfr-profile__block {
  position: relative;
  max-width: none;
  background: #fff;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 22px;
  box-shadow: var(--nm-md);
  padding: 28px 32px 30px 36px;
}
/* Leuchtkante links: schmale Teal-LED (Pill-Enden) mit 2-stufigem Bloom - kein overflow:hidden,
   damit die Blüte edel über die linke Karten-Kante auf den Page-BG austreten darf (Haussanierung-DNA) */
.mfr-profile__block::before {
  content: '';
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 3px;
  border-radius: 3px;
  background: var(--accent);
  box-shadow: 0 0 4px rgba(20,184,166,.7), 0 0 13px rgba(20,184,166,.38);
}
/* --sep war die alte Hairline-Trennung - jetzt sorgt der Flex-Gap fuer Abstand */
.mfr-profile__block--sep { margin-top: 0; padding-top: 28px; border-top: none; }
.mfr-profile__block .mfr-kicker { margin-bottom: 12px; }
.mfr-profile__heading {
  font-family: var(--hfont);
  font-weight: 700;
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.26;
  letter-spacing: -.3px;
  color: var(--ink);
  margin: 0 0 14px;
  max-width: 42ch;
  text-wrap: balance;
}
.mfr-profile__p {
  max-width: 1040px;
  margin: 0 0 15px;
  font-family: var(--bfont);
  font-size: 16px;
  line-height: 1.72;
  color: var(--body);
  text-wrap: pretty;
}
.mfr-profile__p:last-child { margin-bottom: 0; }
.mfr-profile__p strong { color: var(--ink); font-weight: 700; }
.mfr-lead__text strong { color: var(--ink); font-weight: 700; }
@media (max-width: 620px) {
  .mfr-profile__block { padding: 22px 20px 24px 26px; }
}

/* ===== Hersteller-Responsive ===== */
@media (max-width: 1200px) {
  .mfr-hero__inner { grid-template-columns: minmax(0, 1fr) 480px; gap: 48px; }
}
@media (max-width: 1000px) {
  .mfr-hero { padding: 60px 0 48px; }
  .mfr-hero__inner { grid-template-columns: 1fr; gap: 34px; }
  .mfr-hero__media { max-width: 560px; }
}
@media (max-width: 900px) {
  .mfr-trust { grid-template-columns: 1fr; gap: 30px; padding: 36px 32px 34px; }
  .mfr-trust__aside { border-left: 0; border-top: 1px solid rgba(30,50,80,.1); padding-left: 0; padding-top: 28px; }
}
@media (max-width: 700px) {
  .mfr-hero__inner, .mfr-section { padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 640px) {
  .mfr-specs { grid-template-columns: 1fr; }
  .mfr-specs--odd .mfr-spec:last-child { grid-column: auto; }
  .mfr-spec { padding: 22px 24px 24px; }
}

/* A11y: keine Motion - Puls/Glow aus, keine Hover-Transforms (Home-Regeln bleiben erhalten) */
@media (prefers-reduced-motion: reduce) {
  .mfr-kicker::before { animation: none; }
  .mfr-chip--verified .mfr-chip__ico { animation: none; }
  .mfr-hero__media:hover img { transform: none; }
  .hero__label::before, .steps-kicker::before { animation: none; }
  .hero__label, .hero__title, .hero__sub, .hero__cta { animation: none; }
  .cine-hero .hero__label, .cine-hero__title, .cine-hero__sub { animation: none; }
  .home .btn--primary:hover, .home .btn--ghost:hover,
  .card:hover, .brand-card:hover, .process__step:hover { transform: none; }
}

/* Aktive Seitenzahl muss weiss auf dunkel bleiben - auch als Link */
.home a.page-dot--active { color: #fff; }

/* =====================================================================
   Generische Unterseiten (sub-*) + Brands-Hub (brands-*) - Genesis-DNA.
   Body traegt .home -> Buttons, .grad, Shine-Sweeps, nm-Schatten, Icon-Cards geerbt.
   ===================================================================== */

/* ----- Seiten-Hero: ruhig, mit dezentem Startseiten-Blaeschen-Echo ----- */
.sub-hero {
  position: relative;
  overflow: hidden;
  background: var(--page-bg);
  padding: 72px 0 54px;
}
.sub-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(50% 60% at 84% -4%, rgba(20,184,166,.14), transparent 60%),
    radial-gradient(42% 56% at -2% 34%, rgba(20,184,166,.06), transparent 60%);
}
/* Blaeschen dezent zitiert (count 30, alphaScale .7 via JS) - nie die volle Hero-Wucht */
.sub-hero__bubbles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.sub-hero::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 120px;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(238,240,249,0) 0%, var(--page-bg) 100%);
}
.sub-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 40px;
}
.sub-hero__copy { max-width: 720px; }
.sub-hero .hero__label { margin-bottom: 20px; }
.sub-hero__title {
  font-family: var(--hfont);
  font-weight: 300;
  font-size: clamp(28px, 4.4vw, 46px);
  line-height: 1.14;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: #141824;
  margin: 0 0 20px;
  text-wrap: balance;
}
.sub-hero__title .grad { font-weight: 700; }
.sub-hero__sub {
  font-size: 17px;
  line-height: 1.7;
  color: var(--body);
  margin: 0;
  max-width: 62ch;
  text-wrap: pretty;
}

/* ===================================================================
   Cinematic Foto-Hero (nur Monoplace/Multiplace) - System-Helden-DNA:
   dunkles Full-Bleed-Foto direkt unter der Nav, Text links, O2-Blasen
   ueber dem Bild, Teal-Glow-Kurve unten-links, weicher Uebergang in die
   helle Seite. Layer: Foto -> Scrim -> Bubbles-Canvas -> Text.
   =================================================================== */
.cine-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: clamp(460px, 54vh, 620px);
  background: var(--page-bg);
}
/* Foto-Buehne: full-bleed (die Section spannt bereits die volle main-Breite),
   unten-links grosszuegig gerundet, oben + rechts kantig/bleedend. Der Teal-Halo
   spillt unter die Buehne in die helle Seite -> weicher Uebergang. */
.cine-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-bottom-left-radius: clamp(56px, 10vw, 150px);
  /* Bild-Schwarz (Bildraender sind ~#010101) - Foto verschmilzt nahtlos mit dem Band */
  background: #010102;
  box-shadow: 0 30px 70px -34px rgba(45, 212, 191, .32);
}
/* Rausgezoomt: ganzes Bild sichtbar (Monitor oben komplett), Motiv kleiner mit Luft/Schwarz
   rundum. contain zeigt das komplette Bild, scale gibt zusaetzlichen Negativraum. */
.cine-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 50%;
  transform: scale(.9);
  filter: saturate(.95) contrast(1.03);
}
/* Lese-Scrim: links dunkel (Text), Motiv rechts frei; feiner Top-Verlauf fuer Nav/Eyebrow. */
.cine-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(95deg, rgba(5, 11, 17, .88) 0%, rgba(5, 11, 17, .64) 24%, rgba(5, 11, 17, .24) 48%, rgba(5, 11, 17, 0) 70%),
    linear-gradient(180deg, rgba(5, 11, 17, .34) 0%, rgba(5, 11, 17, 0) 22%, rgba(5, 11, 17, 0) 84%, rgba(5, 11, 17, .28) 100%);
}
.cine-hero__bubbles {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* Teal-Leuchtlinie entlang Unterkante + gerundeter Kurve (inset-Schatten folgt dem Radius).
   Signatur statt System-Heldens Orange. */
.cine-hero__edge {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  border-bottom-left-radius: clamp(56px, 10vw, 150px);
  box-shadow:
    inset 0 -2px 0 0 rgba(94, 234, 212, .9),
    inset 0 -22px 46px -24px rgba(45, 212, 191, .6);
}
.cine-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 40px;
}
.cine-hero__copy { max-width: 600px; }
.cine-hero .hero__label {
  margin-bottom: 20px;
  color: rgba(255, 255, 255, .74);
  animation: heroUp .7s cubic-bezier(.2, .7, .2, 1) both .05s;
}
.cine-hero__title {
  font-family: var(--hfont);
  font-weight: 300;
  font-size: clamp(30px, 5vw, 52px);
  line-height: 1.1;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0 0 18px;
  text-wrap: balance;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .5);
  animation: heroUp .8s cubic-bezier(.2, .7, .2, 1) both .16s;
}
.cine-hero__title .grad {
  font-weight: 700;
  background-image: var(--grad-text-onDark);
  filter: drop-shadow(0 0 18px rgba(45, 212, 191, .45));
}
.cine-hero__sub {
  font-size: 17px;
  line-height: 1.65;
  color: rgba(255, 255, 255, .84);
  margin: 0;
  max-width: 46ch;
  text-wrap: pretty;
  text-shadow: 0 1px 14px rgba(0, 0, 0, .55);
  animation: heroUp .8s cubic-bezier(.2, .7, .2, 1) both .32s;
}

/* ----- Content-Sektion (teilt das mfr-Raster) ----- */
.sub-section { max-width: 1360px; margin: 0 auto; padding: 8px 40px 26px; }

/* ----- Status-Block: Genesis-Leuchtkante wie mfr-trust / Footer ----- */
.sub-status {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 34px 48px;
  align-items: center;
  padding: 34px 40px;
  margin-bottom: 54px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
  border: 1px solid rgba(20,184,166,.18);
  border-radius: 22px;
  box-shadow: var(--nm-md);
}
.sub-status__main { position: relative; }
.sub-status::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(20,184,166,.6), transparent);
}
.sub-status::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 120px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(20,184,166,.07) 0%, transparent 100%);
}
.sub-status .mfr-kicker { margin-bottom: 16px; }
.sub-status__row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
}
.sub-status__dot {
  flex: none;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(20,184,166,.6);
  animation: cc-pulse 2.4s var(--ease-standard) infinite;
}
.sub-status__text {
  margin: 0;
  font-family: var(--hfont);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: .01em;
  color: #1c1f2b;
}
.sub-status__note {
  position: relative;
  margin: 13px 0 0;
  padding-left: 22px;
  font-size: 14px;
  line-height: 1.6;
  color: #8a8f9e;
  max-width: 52ch;
}
/* Aside "Already live": spiegelt mfr-trust__aside / mfr-sources (Haken-Bullets) */
.sub-status__aside {
  position: relative;
  border-left: 1px solid rgba(30,50,80,.1);
  padding-left: 44px;
}
.sub-status__aside-label {
  display: block;
  font-family: var(--mfont);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #8a8f9e;
  margin-bottom: 18px;
}
.sub-status__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.sub-status__list li {
  position: relative;
  padding-left: 26px;
  font-size: 14px;
  font-weight: 600;
  color: #2c303e;
}
.sub-status__list li::before {
  content: '';
  position: absolute;
  left: 2px; top: 3px;
  width: 11px; height: 6px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}
/* Ghost-Fall (Hyperbaric Therapy Solutions): einspaltig, kein "lebt"-Puls, neutrale Kante */
.sub-status--ghost { grid-template-columns: 1fr; border-color: rgba(30,50,80,.14); }
.sub-status--ghost::before {
  background: linear-gradient(90deg, transparent, rgba(120,128,145,.4), transparent);
}
.sub-status--ghost::after { display: none; }
.sub-status--ghost .sub-status__dot {
  background: #b8bcc8;
  box-shadow: none;
  animation: none;
}

/* Kammertyp-Seiten: Hersteller-Block teilt das brands-grid, sitzt zwischen Prosa und Hub */
.sub-makers { margin-bottom: 54px; }
/* Artikel-Karten-Block auf Kategorie-Seiten: gleiche Bodenluft wie sub-status/sub-makers vor dem Hub */
.sub-articles { margin-bottom: 54px; }

/* Der Hub teilt die Startseiten-Icon-Cards (offer-grid-3 / .card--icon) 1:1 */
.sub-hub { margin-top: 4px; }

/* ----- Brands-Hub Grid ----- */
.brands-bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}
.brands-bar .mfr-kicker { margin: 0; }
.brands-count {
  font-family: var(--mfont);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #8a8f9e;
}
.brands-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.brand-tile {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 28px 28px 24px;
  background: #fff;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 16px;
  box-shadow: var(--nm-md);
  transition:
    transform .28s cubic-bezier(.2,.7,.2,1),
    box-shadow .28s cubic-bezier(.2,.7,.2,1),
    border-color .28s ease;
}
.brand-tile:hover {
  transform: translateY(-6px);
  border-color: rgba(20,184,166,.34);
  box-shadow: var(--nm-lg);
}
/* Genesis Shine-Sweep (eigene Regel, damit die .card-Selektoren unberuehrt bleiben) */
.brand-tile::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(20,184,166,.08), transparent);
  transition: left .6s var(--ease-standard);
}
.brand-tile:hover::before { left: 100%; }
.brand-tile__head {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.brand-tile__name {
  font-family: var(--hfont);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.25;
  color: #1c1f2b;
  margin: 0;
  text-wrap: balance;
}
.brand-tile__country {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mfont);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #8a8f9e;
}
.brand-tile__country svg { flex: none; width: 13px; height: 13px; color: var(--accent); }
.brand-tile__facts {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 16px;
  border-top: 1px solid rgba(30,50,80,.08);
}
.brand-tile__facts-label {
  font-family: var(--mfont);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #8a8f9e;
}
.brand-tile__facts-value {
  font-family: var(--bfont);
  font-size: 15px;
  line-height: 1.5;
  font-weight: 600;
  color: #2c303e;
}
.brand-tile__foot {
  position: relative;
  display: flex;
  margin-top: auto;
}
.brand-tile__foot .mfr-chip { font-size: 12.5px; padding: 8px 15px 8px 12px; }

.brands-note {
  margin: 40px 0 0;
  max-width: 72ch;
  font-size: 14px;
  line-height: 1.7;
  font-style: italic;
  color: #8a8f9e;
}
.brands-note a {
  font-style: normal;
  font-weight: 600;
  color: var(--accent-text);
  text-decoration-line: underline;
  text-decoration-color: rgba(20,184,166,.4);
  text-underline-offset: 3px;
}

/* =====================================================================
   News-Hub (news-*) - teilt Genesis-DNA mit brands-* (sub-hero, brands-bar,
   Karten mit nm-Schatten + Shine-Sweep). Artikel-Grid + Kategorie-Chips.
   ===================================================================== */
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.news-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px 28px 26px;
  background: #fff;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 16px;
  box-shadow: var(--nm-md);
  transition:
    transform .28s cubic-bezier(.2,.7,.2,1),
    box-shadow .28s cubic-bezier(.2,.7,.2,1),
    border-color .28s ease;
}
.news-card:hover {
  transform: translateY(-6px);
  border-color: rgba(20,184,166,.34);
  box-shadow: var(--nm-lg);
}
/* Genesis Shine-Sweep (eigene Regel, unter dem Stretched-Link z-index:2) */
.news-card::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(20,184,166,.08), transparent);
  transition: left .6s var(--ease-standard);
}
.news-card:hover::before { left: 100%; }
/* Eyebrow "Article": Mono-Pill mit pulsierendem Teal-Punkt (Genesis-Signatur) */
.news-card__kicker {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mfont);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #8a8f9e;
}
.news-card__kicker::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(20,184,166,.55);
  animation: cc-pulse 2.4s var(--ease-standard) infinite;
}
.news-card__title {
  position: relative;
  font-family: var(--hfont);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.32;
  letter-spacing: -.2px;
  color: #1c1f2b;
  margin: 0;
  text-wrap: balance;
}
.news-card__teaser {
  position: relative;
  margin: 0;
  font-family: var(--bfont);
  font-size: 14.5px;
  line-height: 1.65;
  color: #5c6072;
}
/* Read-Cue am Kartenfuss (der ganze Stretched-Link traegt den Klick) */
.news-card__more {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 4px;
  font-family: var(--mfont);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.news-card__more svg {
  width: 15px; height: 15px;
  transition: transform .22s var(--ease-standard);
}
.news-card:hover .news-card__more svg { transform: translateX(4px); }

/* ----- Kategorie-Chips: dezente Sekundaerlinks ----- */
.news-cats { margin-top: 46px; }
.news-cats .mfr-kicker { margin-bottom: 16px; }
.news-chips { display: flex; flex-wrap: wrap; gap: 12px; }
.news-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 17px 9px 13px;
  border-radius: 999px;
  background: linear-gradient(158deg, rgba(255,255,255,.82), rgba(255,255,255,.58));
  border: 1px solid rgba(30,50,80,.14);
  box-shadow: var(--nm-sm);
  font-family: var(--bfont);
  font-size: 13px;
  font-weight: 600;
  color: #2c303e;
  transition: border-color .2s ease, transform .25s var(--ease-toggle), box-shadow .25s var(--ease-toggle);
}
.home .news-chip:hover {
  border-color: rgba(20,184,166,.4);
  transform: translateY(-2px);
  box-shadow: var(--nm-md);
}
.news-chip__ico {
  flex: none;
  width: 15px; height: 15px;
  color: var(--accent);
  filter: drop-shadow(0 0 5px rgba(20,184,166,.5));
}

/* ----- News-Responsive (spiegelt brands-grid) ----- */
@media (max-width: 1000px) {
  .news-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .news-grid { grid-template-columns: 1fr; }
}

/* A11y: Puls aus, keine Hover-Transforms */
@media (prefers-reduced-motion: reduce) {
  .news-card__kicker::before { animation: none; }
  .news-card:hover { transform: none; }
  .news-card:hover .news-card__more svg { transform: none; }
  .home .news-chip:hover { transform: none; }
}

/* ----- Unterseiten/Brands-Responsive ----- */
@media (max-width: 1000px) {
  .brands-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .sub-status { grid-template-columns: 1fr; gap: 26px; align-items: start; }
  .sub-status__aside { border-left: 0; border-top: 1px solid rgba(30,50,80,.1); padding-left: 0; padding-top: 26px; }
}
@media (max-width: 700px) {
  .sub-hero { padding: 56px 0 46px; }
  .sub-hero__inner, .sub-section { padding-left: 24px; padding-right: 24px; }
  .sub-status { padding: 28px 24px 26px; }
  /* Foto-Hero mobil: Motiv mittig, deshalb kraeftigerer Boden-/Links-Scrim fuer Textkontrast */
  .cine-hero { min-height: clamp(420px, 68vh, 540px); }
  .cine-hero__inner { padding-left: 24px; padding-right: 24px; }
  .cine-hero__copy { max-width: 100%; }
  /* Mobil: cover fittet nach Hoehe -> volle Bildhoehe sichtbar (Monitor oben + silberner Name unten),
     nur die leeren schwarzen Seiten werden gecroppt. contain wuerde die Kammer zum Mini-Streifen machen. */
  .cine-hero__img { object-fit: cover; object-position: 50% 50%; transform: none; }
  .cine-hero__scrim {
    background:
      linear-gradient(180deg, rgba(5, 11, 17, .5) 0%, rgba(5, 11, 17, .2) 34%, rgba(5, 11, 17, .38) 72%, rgba(5, 11, 17, .58) 100%),
      linear-gradient(90deg, rgba(5, 11, 17, .78) 0%, rgba(5, 11, 17, .3) 52%, rgba(5, 11, 17, 0) 88%);
  }
}
@media (max-width: 640px) {
  .brands-grid { grid-template-columns: 1fr; }
}

/* A11y: Puls aus, keine Hover-Transforms (Blaeschen-JS ist bereits reduce-gated) */
@media (prefers-reduced-motion: reduce) {
  .sub-status__dot { animation: none; }
  .brand-tile:hover { transform: none; }
}

/* Screenreader-only: sichtbar fuer Crawler/AT, unsichtbar im Layout */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}