/* Wiederkehrende Muster aus der Werkbund-Seite */
html,body{margin:0;background:var(--surface-page);color:var(--text-primary);font-family:var(--font-body);font-size:var(--text-body);line-height:1.64;-webkit-font-smoothing:antialiased;
  /* clip statt hidden: overflow-x:hidden macht den Body zum Scroll-Container und bricht jedes position:sticky */
  overflow-x:clip;height:auto;min-height:100%;}
/* Der Klebe-Bereich einer sticky-Kopfzeile endet an der Box ihres Elternelements.
   Jeder Wrapper zwischen Wurzel und Kopfzeile muss deshalb mit dem Inhalt wachsen (height:auto). */
#dc-root,#root,.cmb-page-shell,#dc-root>.sc-host,#root>.sc-host{height:auto;min-height:100%;}
/* Kopfzeile: bleibt über die GANZE Seite am oberen Rand, nicht nur über dem Hero.
   Bedingung dafür: kein Vorfahr mit overflow:hidden/auto/scroll und keiner mit transform/filter/perspective. */
.cmb-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb, var(--surface-page) 91%, transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--border-hairline);}
a{color:var(--accent);}a:hover{color:var(--accent-hover);}
:where(a,button,input,select,textarea,summary,[tabindex]:not([tabindex="-1"])):focus-visible{outline:2.5px solid var(--focus-ring);outline-offset:3px;border-radius:3px;}
/* Pill-Button mit Text-Roll-Hover */
.cmb-btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--font-body);font-size:.92rem;font-weight:600;text-decoration:none;padding:.85em 1.6em;border-radius:var(--radius-pill);background:var(--btn-bg);color:var(--btn-fg);border:1.5px solid var(--accent-brass);cursor:pointer;white-space:nowrap;transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);}
.cmb-btn:hover{background:var(--accent-brass);border-color:var(--accent-brass);color:#FFFFFF;}
/* Hero-CTA: Messing auf tiefem Blau */
.cmb-btn--hero{background:var(--btn-hero-bg);color:var(--btn-hero-fg);border-color:var(--btn-hero-bg);}
.cmb-btn--hero:hover{background:#EBCB96;border-color:#EBCB96;color:var(--btn-hero-fg);}
.cmb-btn--outline{background:transparent;color:var(--text-primary);border:1.5px solid var(--border-strong);}
.cmb-btn--outline:hover{background:transparent;border-color:var(--accent-brass);color:var(--accent-brass);}
.cmb-btn--sm{font-size:.9rem;padding:.75em 1.4em;}
.cmb-roll{display:inline-flex;flex-direction:column;height:1.55em;overflow:hidden;}
.cmb-roll>span{display:block;line-height:1.55em;transition:transform var(--dur-mid) var(--ease);}
.cmb-btn:hover .cmb-roll>span,.cmb-btn:focus-visible .cmb-roll>span{transform:translateY(-1.55em);}
/* Textlink mit Unterstrich + Pfeil-Nudge */
.cmb-link{font-size:.92rem;font-weight:500;color:var(--accent-brass);text-decoration:none;border-bottom:1px solid var(--accent-brass);padding-bottom:2px;}
.cmb-link:hover{color:var(--accent);border-color:var(--accent);}
.cmb-link .cmb-arrow{display:inline-block;transition:transform var(--dur-fast) var(--ease);}
.cmb-link:hover .cmb-arrow{transform:translateX(5px);}
/* Setzkasten-Raster: Rahmen + Fugen liegen auf dem Container, deshalb darf keine Reihe unvollständig bleiben.
   Eine allein stehende letzte Kachel spannt über die Restspalten. */
.cmb-tilegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--tile-gap);background:var(--surface-page);border:3px solid var(--surface-page);outline:1px solid var(--border-hairline);}
.cmb-tilegrid>.cmb-eco:last-child:nth-child(odd){grid-column:1/-1;}
/* Ökosystem-Kachel: Hover-Lift + Aufhellen */
.cmb-eco{background:var(--surface-brand);color:var(--text-on-brand);padding:var(--card-pad);min-height:210px;display:flex;flex-direction:column;transition:background var(--dur-mid) var(--ease),transform var(--dur-mid) var(--ease);}
.cmb-eco:hover{background:var(--tile-hover);transform:translateY(-5px);}
/* Bild-Zoom im Container */
.cmb-img{position:relative;overflow:hidden;}
.cmb-img img{width:100%;height:100%;object-fit:cover;display:block;filter:none;  /* Art-Deco-Illustrationen sind bereits im Zielgrade — nicht entsättigen */transition:transform var(--dur-img) var(--ease);}
.cmb-img:hover img{transform:scale(1.045);}
/* Typo-Bausteine */
.cmb-eyebrow{margin:0;font-family:var(--font-mono);font-size:var(--text-eyebrow);letter-spacing:.22em;text-transform:uppercase;color:var(--text-muted);}
.cmb-label{font-family:var(--font-mono);font-size:var(--text-label);letter-spacing:.18em;text-transform:uppercase;color:var(--accent);}
.cmb-h2{margin:0;font-family:var(--font-display);font-weight:var(--display-weight);font-size:var(--text-h2);line-height:1.1;letter-spacing:var(--display-tracking);text-wrap:balance;}
.cmb-h2 em{font-style:italic;font-weight:500;color:var(--accent);}
.cmb-h1{margin:0;font-family:var(--font-display);font-weight:var(--display-weight);font-size:var(--text-hero);line-height:.95;letter-spacing:var(--display-tracking);max-width:12ch;text-wrap:balance;}
/* Marquee */
@keyframes cmb-marq{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.cmb-marquee{position:relative;overflow:hidden;border-top:1px solid var(--border-hairline);border-bottom:1px solid var(--border-hairline);background:var(--surface-page);}
.cmb-marquee>.cmb-marquee-track{display:flex;width:max-content;animation:cmb-marq 52s linear infinite;}
/* WCAG 2.2.2: Bewegung, die selbst startet und >5s läuft, braucht eine Bedienmöglichkeit */
.cmb-marquee[data-paused="true"]>.cmb-marquee-track{animation-play-state:paused;}
.cmb-marquee-toggle{position:absolute;right:0;top:0;bottom:0;z-index:2;display:inline-flex;align-items:center;gap:.4em;padding:0 1.1em;border:none;border-left:1px solid var(--border-strong);background:var(--surface-page);color:var(--text-secondary);font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;}
.cmb-marquee-toggle:hover{color:var(--accent-brass);}
.cmb-marquee span{flex:0 0 auto;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;color:var(--text-muted);padding:1.05em 0;white-space:nowrap;}
/* Deckt ALLE Animationen ab, nicht nur die Laufzeile (Scroll-Reveals, Hero-Parallax, Partikel) */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important;}
}
/* Bild-über-Text: garantierter Kontrast über ein Overlay mit fester Deckung, nicht über Bildhelligkeit */
.cmb-hero-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,29,46,.78),rgba(14,29,46,.62) 45%,rgba(14,29,46,.86));}