/* =============================================================================
   Dentallabor Mühldorf — Cinematic Coming-Soon (LIGHT VERSION)
   "Aus Daten wird Wirklichkeit" — scroll-driven, Three.js stage + GSAP acts.
   CI: Weiß #FFFFFF · Akzent Orange #EC6608 · Text Navy #575756.
   Fonts: Open Sans (UI) + Cormorant Garamond (Display).
   ============================================================================= */

:root {
  /* Offizielle CI Zahnklinik Mühldorf am Inn (Stand 2022):
     Orange #EC6608 · Anthrazit #575756. Hex aus Logo_Zahnklinik_Farbcode.pdf. */
  --bg-1:        #ffffff;           /* Haupt-Hintergrund */
  --bg-2:        #f7f9fb;           /* sanfter Off-White für Tiefe */
  --bg-3:        #eef2f6;           /* Card-Stroke / Subtle */
  --ink-1:       #2a2a29;           /* Headline-Text (sehr dunkles Anthrazit, etwas dunkler als CI für Lesbarkeit) */
  --ink-2:       #575756;           /* Body-Text (offizielles CI-Anthrazit) */
  --ink-3:       #8a8a89;           /* Meta / Caption (helles Anthrazit) */
  --accent:      #EC6608;           /* Offizielles Brand-Orange */
  --accent-2:    #ff8a3d;
  --accent-soft: rgba(236,102,8,0.10);
  --line:        rgba(87,87,86,0.12);
  --card-bg:     rgba(255,255,255,0.86);
  --card-brd:    rgba(87,87,86,0.10);
  --card-sh:     0 14px 40px -18px rgba(87,87,86,0.22), 0 2px 8px -4px rgba(87,87,86,0.06);
  --ease:        cubic-bezier(0.22, 1, 0.36, 1);
  --container:   1400px;
  --gutter:      clamp(20px, 4vw, 48px);
}

@property --scrim { syntax:'<number>'; inherits:true; initial-value:0; }

* { margin:0; padding:0; box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body.cn {
  font-family:'Open Sans', -apple-system, 'Segoe UI', sans-serif;
  background:var(--bg-1);
  color:var(--ink-1);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a { color:inherit; text-decoration:none; }

html.lenis, html.lenis body { height:auto; }
.lenis.lenis-smooth { scroll-behavior:auto !important; }

/* ===== LOADER (hell) ===== */
.cn-loader {
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(110% 70% at 50% -5%, rgba(236,102,8,0.06) 0%, transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f5f7f9 100%);
  transition:opacity 0.9s var(--ease), visibility 0.9s var(--ease);
}
.cn-loader.is-done { opacity:0; visibility:hidden; }
.cn-loader-inner {
  display:flex; flex-direction:column; align-items:center;
  width:min(320px, 78vw); animation:cnLoaderRise 1s var(--ease) both;
}
@keyframes cnLoaderRise { from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;} }
.cn-loader-logo {
  height:clamp(40px, 7vw, 56px); width:auto; display:block;
  margin-bottom:34px; opacity:1;
  filter:drop-shadow(0 6px 24px rgba(87,87,86,0.18));
}
.cn-loader-bar {
  height:2px; width:100%; background:rgba(87,87,86,0.10);
  border-radius:2px; overflow:hidden;
}
.cn-loader-bar span {
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow:0 0 16px -2px rgba(236,102,8,0.5);
}
.cn-loader-meta {
  display:flex; align-items:center; justify-content:space-between;
  width:100%; margin-top:16px;
  font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:var(--ink-3);
}
.cn-loader-label { font-weight:600; }
.cn-loader-pct { font-variant-numeric:tabular-nums; color:var(--ink-2); }

/* ===== ATMOSPHÄRISCHER HINTERGRUND — komplett weiß ===== */
.cn-bg {
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:#ffffff;
}

/* ===== HERO-FOTO — Sonnenuntergang als Initial-Layer, fadet beim Scrollen aus ===== */
.cn-hero-photo {
  position:fixed; inset:0; z-index:1;
  pointer-events:none;
  opacity:1;   /* Initial sichtbar; ScrollTrigger animiert opacity → 0 */
  will-change:opacity, transform;
}
.cn-hero-photo img {
  width:100%; height:100%; object-fit:cover;
  filter:brightness(0.92) saturate(1.0);
}
/* Doppel-Verlauf: oben weiß-fade für Headline, unten weiß-fade für Hero-Wort */
.cn-hero-photo::before {
  content:''; position:absolute; inset:0 0 auto 0; height:35%;
  background:linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 100%);
  pointer-events:none;
}
.cn-hero-photo::after {
  content:''; position:absolute; inset:auto 0 0 0; height:50%;
  background:linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.65) 100%);
  pointer-events:none;
}

/* ===== 3D-STAGE — fix hinter allem, initial unsichtbar (Foto allein im Hero) ===== */
.cn-stage {
  position:fixed; inset:0; z-index:1;
  pointer-events:none;
  opacity:0;
  will-change:opacity, transform;
}
.cn-stage #cnGl {
  position:absolute; inset:0; width:100%; height:100%;
}

/* Bodenschatten entfernt — gab grauen Schimmer auf weißem Hintergrund */
.cn-shadow { display:none; }

/* ===== ATMOSPHERE-OVERLAY (sehr dezent auf Hell) ===== */
.cn-atmos {
  position:fixed; inset:0; z-index:2; pointer-events:none;
  background:
    radial-gradient(80% 50% at 50% 110%, rgba(236,102,8,0.05), transparent 60%);
}

/* ===== TOPBAR ===== */
.cn-topbar-wrap {
  position:fixed; top:0; left:0; right:0; height:90px; z-index:50;
  background:linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.80) 60%, rgba(255,255,255,0) 100%);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  pointer-events:none;
}
.cn-topbar {
  position:fixed; top:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:var(--container); z-index:51;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px clamp(24px, 4vw, 48px);
}
@media (max-width:768px) {
  .cn-topbar { padding:18px 24px; }
}
.cn-topbar-logo { display:inline-flex; align-items:center; }
.cn-topbar-logo img {
  height:clamp(26px, 3vw, 36px); width:auto; display:block;
}
.cn-topbar-status {
  font-size:12.5px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--accent);
  display:inline-flex; align-items:center; gap:9px;
  padding:9px 18px; border-radius:100px;
  background:var(--accent-soft); border:1px solid rgba(236,102,8,0.25);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.cn-topbar-status i {
  width:7px; height:7px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 0 rgba(236,102,8,0.5); animation:cnPulse 2.4s infinite;
}
@keyframes cnPulse { 0%{box-shadow:0 0 0 0 rgba(236,102,8,0.5);} 70%{box-shadow:0 0 0 7px rgba(236,102,8,0);} 100%{box-shadow:0 0 0 0 rgba(236,102,8,0);} }

/* ===== STICKY CTA — schwebt unten mittig, fadet ein nach Hero, raus vor Footer ===== */
.cn-stickycta {
  position:fixed;
  left:50%; bottom:calc(env(safe-area-inset-bottom, 0) + 22px);
  transform:translate(-50%, 12px);
  z-index:55;
  display:inline-flex; align-items:center; gap:11px;
  padding:14px 28px; border-radius:100px;
  background:var(--accent); color:#fff;
  font-size:15.5px; font-weight:700; letter-spacing:0.01em;
  white-space:nowrap;
  opacity:0; visibility:hidden; pointer-events:none;
  box-shadow:
    0 14px 40px -10px rgba(236,102,8,0.55),
    0 0 0 1px rgba(255,255,255,0.18) inset;
  transition:opacity 0.5s var(--ease), transform 0.5s var(--ease), background 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.cn-stickycta.is-visible {
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translate(-50%, 0);
}
.cn-stickycta:hover {
  background:var(--accent-2);
  box-shadow:0 18px 50px -10px rgba(236,102,8,0.65);
}
@media (max-width:768px) {
  .cn-stickycta {
    bottom:calc(env(safe-area-inset-bottom, 0) + 14px);
    padding:13px 24px; font-size:14.5px; gap:9px;
  }
}

/* ===== SCROLL-PROGRESS — fixed LINKS, voll-höhe ===== */
.cn-progress {
  position:fixed;
  top:0; bottom:0; left:0;
  width:4px;
  z-index:60;
  background:rgba(87,87,86,0.08);
  pointer-events:none;
}
.cn-progress-fill {
  position:absolute; top:0; left:0; right:0;
  height:0%;
  background:linear-gradient(180deg, var(--accent) 0%, var(--accent-2) 100%);
  box-shadow:2px 0 12px -2px rgba(236,102,8,0.45);
  transition:height 0.08s linear;
}

/* ===== SCROLL / ACTS ===== */
.cn-scroll { position:relative; z-index:10; overflow-x:clip; }
.cn-act {
  position:relative;
  min-height:100svh;
  display:flex;
  padding:0;
}
.cn-step, .cn-frasen { min-height:140svh; align-items:center; }
.cn-act > * {
  width:100%;
  max-width:var(--container);
  margin-left:auto;
  margin-right:auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}

/* ===== HERO — drei Zonen: Eyebrow (oben), Hero-Wort (mitte-unten), Strip (unten) ===== */
.cn-hero {
  position:relative;
  flex-direction:column;
  align-items:stretch; justify-content:space-between;
  text-align:left; padding-top:80px; padding-bottom:40px;
  gap:18px;
}

/* Eyebrow oben — Glas-Card (durchsichtiger, mehr Blur damit Headline trotzdem lesbar) */
.cn-hero-eyebrow {
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
  margin-top:36px;
  padding:22px clamp(24px, 4.5vw, 44px) 26px;
  background:rgba(255,255,255,0.30);
  border:1px solid rgba(255,255,255,0.42);
  border-radius:22px;
  backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  box-shadow:
    0 18px 60px -22px rgba(87,87,86,0.20),
    inset 0 1px 0 rgba(255,255,255,0.5);
  max-width:fit-content;
  margin-left:auto; margin-right:auto;
}
.cn-hero-eyebrow-kicker {
  display:inline-flex; align-items:center; gap:10px;
  font-size:13px; font-weight:700; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--accent); margin-bottom:16px;
  padding:9px 18px; border-radius:100px;
  background:var(--accent-soft); border:1px solid rgba(236,102,8,0.25);
}
.cn-hero-eyebrow-kicker::before {
  content:''; width:7px; height:7px; border-radius:50%; background:var(--accent);
  animation:cnPulse 2.4s infinite;
}
.cn-hero-eyebrow-line {
  font-family:'Cormorant Garamond', Georgia, serif;
  font-size:clamp(34px, 5vw, 70px); font-weight:600; line-height:1.05;
  letter-spacing:-0.015em;
  color:var(--ink-1); max-width:920px; margin:0;
}
.cn-nowrap { white-space:nowrap; }
.cn-hero-eyebrow-line strong { color:var(--ink-1); font-weight:600; }
.cn-hero-eyebrow-sub {
  display:block;
  margin-top:14px;
  font-size:clamp(17px, 1.7vw, 22px); font-weight:500; line-height:1.55;
  color:var(--ink-2);
}

/* Trust-Logo-Reihe — eigene zentrierte Reihe unter dem Strip */
.cn-hero-seals {
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:center;
  gap:14px; flex-wrap:wrap;
  margin-top:14px;
}
.cn-hero-seal {
  display:inline-flex; align-items:center; gap:9px;
  padding:7px 14px 7px 10px; border-radius:10px;
  background:var(--card-bg); border:1px solid var(--card-brd);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:0 4px 14px -6px rgba(87,87,86,0.18);
}
.cn-hero-seal--img img {
  height:32px; width:auto; display:block;
}
.cn-hero-seal-ce {
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:28px; border-radius:6px;
  font-family:Georgia, 'Times New Roman', serif;
  font-weight:700; font-size:18px; letter-spacing:-1px;
  color:var(--ink-1);
  background:#fff; border:1.5px solid var(--ink-1);
}
.cn-bavaria { width:32px; height:22px; display:block; flex-shrink:0; }

/* Bayern barrierefrei — offizielles Signet als Bild-Seal */
.cn-hero-seal-bayern {
  height:34px; width:auto; display:block;
}
.cn-hero-seal-meta {
  font-size:13px; font-weight:700; line-height:1.2; color:var(--ink-1);
  letter-spacing:0.02em;
}
.cn-hero-seal-meta small {
  display:block; font-size:11px; font-weight:500; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--ink-3); margin-top:3px;
}

/* Hero-CTA: prominenter mittiger Call-to-Action über dem Foto */
.cn-hero-cta-wrap {
  position:relative; z-index:2;
  display:flex; justify-content:center;
  margin:0 auto;
  flex:1;
  align-items:center;
}
.cn-hero-cta {
  display:inline-flex; align-items:center; gap:12px;
  padding:19px 38px; border-radius:100px;
  background:var(--accent); color:#fff;
  font-size:clamp(16px, 1.5vw, 19px); font-weight:700; letter-spacing:0.01em;
  box-shadow:
    0 14px 40px -10px rgba(236,102,8,0.55),
    0 0 0 1px rgba(255,255,255,0.20) inset;
  transition:transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s var(--ease);
}
.cn-hero-cta:hover {
  transform:translateY(-2px);
  background:var(--accent-2);
  box-shadow:0 18px 50px -10px rgba(236,102,8,0.65);
}

/* Hero-Wort: "Aus Daten wird bald Wirklichkeit" als zusammenhängender Block,
   links unten im Hero, darf leicht über das Modell überlappen. */
.cn-hero-content {
  position:relative; z-index:2; width:100%;
  margin-top:auto;   /* nach unten drücken */
}
.cn-hero-title { display:flex; flex-direction:column; align-items:flex-start; width:100%; }
.cn-hero-kicker {
  font-family:'Open Sans', sans-serif;
  font-size:clamp(18px, 2.4vw, 36px);
  font-weight:700; line-height:1.05; letter-spacing:-0.015em;
  color:var(--ink-1);
  margin-bottom:0.05em;
}
.cn-hero-tech {
  display:inline-block;
  font-family:'Cormorant Garamond', Georgia, serif;
  font-style:italic; font-weight:500; font-size:1.05em;
  letter-spacing:0; text-transform:lowercase;
  color:var(--accent);
  margin-left:0.3em;
}
.cn-hero-script {
  font-family:'Cormorant Garamond', Georgia, serif;
  font-style:italic;
  font-size:clamp(64px, 11vw, 180px);
  font-weight:500; line-height:0.92; letter-spacing:-0.01em;
  color:var(--ink-1); white-space:nowrap;
}

/* Hero-Strip — unter dem Modell: Zielgruppen + Produkte + Trust */
.cn-hero-strip {
  position:relative; z-index:2; width:100%;
  display:grid; grid-template-columns:1fr 1fr 1fr;
  gap:16px;
  margin-top:18px;
}
.cn-hero-strip--2 { grid-template-columns:1fr 1fr; max-width:880px; margin-left:auto; margin-right:auto; }
.cn-hero-cell {
  background:var(--card-bg);
  border:1px solid var(--card-brd);
  border-radius:14px;
  padding:14px 20px 16px;
  backdrop-filter:blur(10px) saturate(130%);
  -webkit-backdrop-filter:blur(10px) saturate(130%);
  box-shadow:var(--card-sh);
  text-align:center;
}
.cn-hero-cell-label {
  display:block; font-size:12px; font-weight:700; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--accent); margin-bottom:11px;
}
/* Bullet-List mittig — auch beim Wrappen bleiben die Items zentriert */
.cn-hero-cell-list {
  list-style:none; display:flex; flex-wrap:wrap;
  justify-content:center; align-items:center;
  gap:5px 16px;
  font-size:15.5px; line-height:1.5; color:var(--ink-1); font-weight:600;
}
.cn-hero-cell-list li { display:inline-flex; align-items:center; position:relative; }
/* Separator-Dot vor allen außer dem ersten — auch nach Wrap (kein Style-Crash) */
.cn-hero-cell-list li + li::before {
  content:'·'; color:var(--ink-3); margin-right:14px; font-weight:400; opacity:0.7;
}
.cn-hero-trust { display:flex; flex-wrap:wrap; gap:8px; }
.cn-hero-trust-badge {
  display:inline-flex; align-items:center; gap:7px;
  font-size:13px; font-weight:700; letter-spacing:0.06em;
  color:var(--ink-1);
  padding:7px 12px; border-radius:6px;
  background:var(--accent-soft); border:1px solid rgba(236,102,8,0.22);
}
.cn-hero-trust-badge svg { width:11px; height:11px; color:var(--accent); }

.cn-scrollhint {
  position:relative;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  margin:14px auto 0;
  font-size:12.5px; font-weight:700; letter-spacing:0.22em; text-transform:uppercase;
  color:#1a1a19;   /* Schwarz/sehr dunkel — gut sichtbar auf Foto + danach */
  z-index:2;
}
.cn-scrollhint svg { color:#1a1a19; }
.cn-scrollhint svg { animation:cnBob 2s var(--ease) infinite; }
@keyframes cnBob { 0%,100%{transform:translateY(0);opacity:0.5;} 50%{transform:translateY(6px);opacity:1;} }

/* ===== TRUST-SECTION (nach Hero, vor Acts) =====
   Eine ruhige Card-Section mit Zielgruppen + Produkten + Zertifikaten.
   Kompakter als die Acts (kein Stage-Move, Modell bleibt in Hero-Position). */
.cn-trust { min-height:100svh; align-items:center; justify-content:center; }
.cn-trust-card {
  position:relative; z-index:2;
  width:100%; max-width:880px;
  background:rgba(255,255,255,0.94);
  border:1px solid var(--card-brd);
  border-radius:22px;
  padding:clamp(28px, 4vw, 48px) clamp(24px, 4vw, 44px);
  backdrop-filter:blur(14px) saturate(130%);
  -webkit-backdrop-filter:blur(14px) saturate(130%);
  box-shadow:
    0 30px 80px -30px rgba(87,87,86,0.20),
    0 0 0 1px rgba(255,255,255,0.5) inset;
  opacity:var(--scrim, 0);
}
.cn-trust-eyebrow {
  display:inline-block;
  font-size:13px; font-weight:700; letter-spacing:0.22em;
  text-transform:uppercase; color:var(--accent);
  margin-bottom:14px;
}
.cn-trust-title {
  font-family:'Cormorant Garamond', Georgia, serif;
  font-size:clamp(28px, 4vw, 48px); font-weight:600; line-height:1.05;
  letter-spacing:-0.015em; color:var(--ink-1);
  margin:0 0 28px;
}
.cn-trust-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:24px;
  padding-bottom:24px;
  border-bottom:1px solid var(--line);
  margin-bottom:24px;
}
.cn-trust-col { text-align:left; }
.cn-trust-label {
  display:block; font-size:13px; font-weight:700; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--accent); margin-bottom:12px;
}
.cn-trust-list {
  list-style:none; font-size:16.5px; line-height:1.7; color:var(--ink-1);
}
.cn-trust-list li {
  position:relative; padding-left:18px;
}
.cn-trust-list li::before {
  content:''; position:absolute; left:0; top:0.7em;
  width:6px; height:6px; border-radius:50%; background:var(--accent);
}
.cn-trust-seals {
  display:flex; align-items:center; justify-content:center;
  gap:20px; flex-wrap:wrap;
}
/* Trust-Section: Seals doppelt so groß wie in der Hero-Topbar — Logos müssen lesbar sein */
.cn-trust-seals .cn-hero-seal {
  padding:12px 20px 12px 14px;
  gap:14px;
  border-radius:14px;
}
.cn-trust-seals .cn-hero-seal--img img,
.cn-trust-seals .cn-hero-seal-bayern {
  height:60px;
}
.cn-trust-seals .cn-hero-seal-ce {
  width:60px; height:48px; font-size:30px;
}
.cn-trust-seals .cn-hero-seal-meta {
  font-size:16.5px;
}
.cn-trust-seals .cn-hero-seal-meta small {
  font-size:13px;
  margin-top:3px;
}

/* ===== STEPS ===== */
.cn-step { align-items:center; }
.cn-step-text {
  display:flex; flex-direction:column;
  position:relative;
  max-width:520px;                  /* harte Breite damit Card nicht den ganzen Container füllt */
  padding:28px 32px;                /* Innenabstand für die Card */
}
.cn-step-text > * { position:relative; z-index:1; }
.cn-step-text--left  { align-items:flex-start; text-align:left;
  margin-left:max(var(--gutter), calc((100vw - var(--container))/2 + var(--gutter))); margin-right:auto; }
.cn-step-text--right { align-items:flex-end;   text-align:right;
  margin-right:max(var(--gutter), calc((100vw - var(--container))/2 + var(--gutter))); margin-left:auto; }

/* LESBARKEITS-CARD — weiße halb-transparente Card direkt um den Text */
.cn-step-text::before {
  content:''; position:absolute; z-index:0; pointer-events:none;
  inset:0;
  border-radius:18px;
  background:var(--card-bg);
  border:1px solid var(--card-brd);
  backdrop-filter:blur(12px) saturate(130%);
  -webkit-backdrop-filter:blur(12px) saturate(130%);
  box-shadow:var(--card-sh);
  opacity:var(--scrim, 0);
}

.cn-step-text--right .cn-step-no { justify-content:flex-end; }
.cn-step-no {
  display:flex; align-items:center; gap:9px;
  font-size:13.5px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--accent); margin-bottom:16px;
}
.cn-step-title {
  font-size:clamp(30px, 4vw, 54px); font-weight:800; line-height:1.05; letter-spacing:-0.025em;
  margin-bottom:18px; color:var(--ink-1);
}
.cn-step-body { font-size:clamp(16px, 1.5vw, 18.5px); line-height:1.65; color:var(--ink-2); font-weight:400; }
.cn-step-body strong { color:var(--ink-1); font-weight:700; }
.cn-step-meta {
  display:flex; flex-wrap:wrap; gap:8px; margin-top:20px;
}
.cn-step-meta-chip {
  display:inline-flex; align-items:center; gap:7px;
  font-size:12.5px; font-weight:700; letter-spacing:0.04em;
  color:var(--ink-1); padding:7px 12px; border-radius:6px;
  background:var(--accent-soft); border:1px solid rgba(236,102,8,0.22);
}
.cn-step-text--right .cn-step-meta { justify-content:flex-end; }

/* ===== FRÄSEN (Phase 2) ===== */
.cn-frasen { align-items:center; justify-content:center; }
.cn-frasen-card {
  position:relative; text-align:center; max-width:540px;
  padding:clamp(36px, 4.5vw, 56px) clamp(28px, 4.5vw, 52px);
  border-radius:22px;
  background:var(--card-bg);
  border:1px solid var(--card-brd);
  backdrop-filter:blur(16px) saturate(130%);
  -webkit-backdrop-filter:blur(16px) saturate(130%);
  box-shadow:
    0 30px 80px -30px rgba(87,87,86,0.30),
    0 0 60px -20px rgba(236,102,8,0.18),
    inset 0 1px 0 rgba(255,255,255,0.6);
  opacity:var(--scrim, 0);
}
.cn-frasen-card::before {
  content:''; position:absolute; top:-1px; left:50%; transform:translateX(-50%);
  width:52px; height:2px; border-radius:2px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
}
.cn-frasen-card > * { position:relative; z-index:1; }
.cn-frasen-card .cn-step-no { justify-content:center; }
.cn-frasen-title {
  font-size:clamp(28px, 4vw, 50px); font-weight:800; letter-spacing:-0.03em;
  margin-bottom:14px; color:var(--ink-1);
}
.cn-frasen-card .cn-step-body { color:var(--ink-2); }
.cn-pill {
  display:inline-flex; align-items:center; gap:9px; margin-top:24px; padding:9px 20px;
  font-size:12.5px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--accent); background:transparent;
  border:1px solid rgba(236,102,8,0.45); border-radius:100px;
}
.cn-pill::before { content:''; width:5px; height:5px; border-radius:50%; background:var(--accent); }

/* ===== FOOTER (hell) ===== */
.cn-footer {
  position:relative; z-index:10;
  min-height:100svh; display:flex; align-items:center; justify-content:center;
  padding:120px clamp(20px,5vw,80px) 60px; text-align:center;
}
.cn-footer-inner { max-width:680px; width:100%; }
.cn-footer-upper { transform:translateY(-80px); }
.cn-footer-lower { transform:translateY(70px); }

.cn-footer-title {
  font-size:clamp(36px, 5.5vw, 76px); font-weight:800; line-height:0.98; letter-spacing:-0.035em;
  color:var(--ink-1);
}
.cn-footer-sub { margin:20px auto 0; max-width:460px; font-size:17px; color:var(--ink-2); font-weight:400; line-height:1.6; }
.cn-cta {
  display:inline-flex; align-items:center; gap:10px; margin-top:36px;
  transform:translateY(-73px);
  padding:17px 34px; border-radius:100px;
  background:var(--accent); color:#fff; font-size:16.5px; font-weight:700;
  transition:transform 0.3s var(--ease), background 0.3s var(--ease), box-shadow 0.3s var(--ease);
  box-shadow:0 14px 40px -12px rgba(236,102,8,0.6);
}
.cn-cta:hover { transform:translateY(-75px); background:var(--accent-2); box-shadow:0 18px 50px -10px rgba(236,102,8,0.7); }

.cn-footer-info {
  display:grid; grid-template-columns:repeat(4, 1fr); gap:24px;
  margin:42px 0 0; padding-top:40px; border-top:1px solid var(--line); text-align:left;
}
.cn-footer-info .cn-k {
  display:block; font-size:13px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--accent); margin-bottom:9px;
}
.cn-footer-info .cn-v { font-size:15.5px; line-height:1.55; color:var(--ink-1); }
.cn-footer-info a:hover { color:var(--accent); }
.cn-certs {
  display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap;
  margin-top:28px;
}
.cn-certs img {
  height:64px; width:auto; display:block;
  background:#fff; border-radius:8px; padding:9px 14px;
  box-shadow:0 6px 22px -8px rgba(87,87,86,0.22);
  border:1px solid var(--card-brd);
}
.cn-footer-legal {
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin-top:32px; font-size:13.5px; color:var(--ink-3);
}

/* ===== RESIN-REVEAL ===== */
.cn-resin { will-change:transform, opacity, filter; }
.cn-rev { opacity:0; transform:translateY(28px); }

/* ===== MOBILE ===== */
@media (max-width:768px) {
  /* Topbar-Status auf Mobile kompakter, aber sichtbar.
     Progress-Indikator nimmt mittig Platz, daher Status nur als kurzer Hinweis. */
  .cn-topbar-status {
    font-size:11px; padding:6px 11px; gap:6px;
    letter-spacing:0.12em;
  }
  .cn-topbar-status i { width:5px; height:5px; }
  .cn-progress { width:3px; }    /* Mobile: schmaler */

  /* HERO mobile: Headline tiefer, Claim höher, Foto-Crop links, Card kompakter */
  .cn-hero { padding-top:88px; padding-bottom:110px; gap:14px; }
  .cn-hero-eyebrow {
    margin-top:80px;
    padding:24px 28px 26px;       /* mehr Innenraum damit Text nicht klemmt */
    border-radius:18px;
    max-width:calc(100% - 32px);
    margin-left:auto; margin-right:auto;
  }
  .cn-hero-eyebrow-line { font-size:clamp(22px, 6.4vw, 30px); line-height:1.1; padding:0 4px; }
  .cn-hero-photo img { object-position:20% center; }
  /* Hero-CTA mobile kompakter damit's nicht wie ein Riesen-Bar aussieht */
  .cn-hero-cta { padding:15px 28px; font-size:15.5px; gap:9px; }
  .cn-hero-eyebrow-sub { font-size:16.5px; line-height:1.55; }
  .cn-hero-eyebrow-kicker { font-size:11.5px; letter-spacing:0.18em; padding:7px 14px; }
  .cn-hero-seals { gap:10px; margin-top:14px; }
  .cn-hero-seal { padding:6px 12px 6px 9px; gap:8px; }
  .cn-hero-seal--img img { height:26px; }
  .cn-hero-seal-ce { width:32px; height:24px; font-size:15px; }
  .cn-bavaria { width:26px; height:18px; }
  .cn-hero-seal-meta { font-size:12px; }
  .cn-hero-seal-meta small { font-size:10.5px; }
  .cn-hero-strip--2 { grid-template-columns:1fr; }

  /* Mobile: "Aus Daten wird bald Wirklichkeit" als Block links unten, darf über Modell ragen */
  .cn-hero-kicker {
    font-size:clamp(18px, 5vw, 24px);
    line-height:1.05;
  }
  .cn-hero-script {
    font-size:clamp(64px, 17vw, 96px);
    line-height:0.92;
  }

  /* Trust-Section mobile: Card mit echtem Rand zum Bildschirm (nicht volle Breite) */
  .cn-trust { padding:100px 0 32px; }
  .cn-trust-card {
    padding:24px 22px; border-radius:18px;
    width:auto;
    margin-left:16px !important; margin-right:16px !important;
    max-width:calc(100% - 32px) !important;
  }
  .cn-trust-title { font-size:28px; margin-bottom:22px; line-height:1.1; }
  .cn-trust-grid { grid-template-columns:1fr; gap:22px; padding-bottom:22px; margin-bottom:22px; }
  .cn-trust-label { font-size:12px; margin-bottom:11px; }
  .cn-trust-list { font-size:15.5px; line-height:1.65; }
  /* Mobile: Seals weiter sichtbar groß, aber kompakter als Desktop */
  .cn-trust-seals { gap:12px; justify-content:center; }
  .cn-trust-seals .cn-hero-seal { padding:10px 14px 10px 11px; gap:10px; }
  .cn-trust-seals .cn-hero-seal--img img,
  .cn-trust-seals .cn-hero-seal-bayern { height:48px !important; }
  .cn-trust-seals .cn-hero-seal-ce { width:48px !important; height:38px !important; font-size:22px !important; }
  .cn-trust-seals .cn-bavaria { width:26px; height:18px; }
  .cn-trust-seals .cn-hero-seal-meta { font-size:14.5px !important; }
  .cn-trust-seals .cn-hero-seal-meta small { font-size:11.5px !important; }

  .cn-scrollhint { bottom:16px; }

  /* STEPS mobile — Cards mit Abstand zum Rand, padding-top damit Headline nicht hinter Topbar */
  .cn-step { align-items:center; padding:90px 0 0; }
  .cn-step-text,
  .cn-step-text--left,
  .cn-step-text--right {
    max-width:100% !important; text-align:left;
    margin-left:16px !important; margin-right:16px !important;
    padding:24px 22px;
    width:auto;
  }
  .cn-step-text--right .cn-step-no { justify-content:flex-start; }
  .cn-step-text--right .cn-step-meta { justify-content:flex-start; }
  .cn-step-title { font-size:clamp(28px, 7.5vw, 42px); line-height:1.08; }
  .cn-step-body { font-size:16.5px; line-height:1.6; }
  .cn-step-meta-chip { font-size:12.5px; padding:7px 12px; }

  /* Card-Background bleibt 16px innen vom Rand, mit border-radius, opaker */
  .cn-step-text::before {
    inset:0;
    border-radius:16px;
    background:rgba(255,255,255,0.94);
  }

  /* FOOTER */
  .cn-footer { padding:80px clamp(20px,5vw,80px) 80px; }
  .cn-footer-upper { transform:translateY(10px); }
  .cn-footer-lower { transform:translateY(140px); }
  .cn-footer-info {
    grid-template-columns:1fr 1fr; gap:18px;
    text-align:center;
    margin-top:22px;
    padding-top:25px;
  }
  .cn-certs { margin-top:18px; }
  .cn-footer-legal {
    flex-direction:column; align-items:center; text-align:center; gap:8px;
    margin-top:27px;
  }
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion:reduce) {
  .cn-rev { opacity:1 !important; transform:none !important; }
  .cn-scrollhint svg, .cn-topbar-status i { animation:none; }
}