/* ═══════════════════════════════════════════════════════════════════════
   CraftBuilder – blocks.css  (shared across all designs)

   Enthält alle Baustein-Styles. Verwendet ausschließlich --cb-* Tokens –
   kein einziges hartes Hex-Value oder design-spezifisches Custom Property.

   TOKEN-KONVENTION (dark/bright):
   --cb-heading-dark / --cb-heading-bright   Überschriften auf heller / dunkler Fläche
   --cb-text-dark    / --cb-text-bright      Fließtext auf heller / dunkler Fläche
   --cb-text-muted-dark / --cb-text-muted-bright  gedämpft auf heller / dunkler Fläche
   --cb-border-dark  / --cb-border-bright    Rahmen auf heller / dunkler Fläche
   --cb-accent-dark  / --cb-accent-bright    Akzent dunkel / hell
   --cb-surface-bright / --cb-surface-bright-2  helle Sektionsflächen
   ═══════════════════════════════════════════════════════════════════════ */

/* ── RESET & BASIS ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  font-family: var(--cb-font-body);
  color: var(--cb-text-dark);
  background: var(--cb-surface-1);
  line-height: 1.75;
  font-size: 16px;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a   { color: var(--cb-accent); text-decoration: none; transition: color var(--cb-transition); }
a:hover { color: var(--cb-accent-dark); text-decoration: underline; }

.container { max-width: var(--cb-max-w); margin: 0 auto; padding: 0 2rem; }

/* ── BUTTONS ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .8rem 2rem; border-radius: var(--cb-btn-radius);
  font-family: var(--cb-font-body); font-size: .875rem;
  font-weight: var(--cb-btn-weight); letter-spacing: var(--cb-btn-spacing);
  text-transform: var(--cb-btn-transform);
  cursor: pointer; border: 2px solid transparent;
  transition: all var(--cb-transition); text-decoration: none !important;
}
.btn-primary {
  background: var(--cb-btn-bg-override, var(--cb-accent));
  color: var(--cb-btn-color-override, var(--cb-text-bright));
  border-color: var(--cb-btn-bg-override, var(--cb-accent));
  box-shadow: 0 4px 18px var(--cb-accent-glow);
}
.btn-primary:hover {
  background: var(--cb-btn-bg-override, var(--cb-accent-dark));
  border-color: var(--cb-btn-bg-override, var(--cb-accent-dark));
  color: var(--cb-btn-color-override, var(--cb-text-bright));
  transform: translateY(-2px);
  box-shadow: 0 8px 24px var(--cb-accent-glow);
  text-decoration: none !important;
}
.btn-outline {
  background: transparent; color: var(--cb-btn-outline-color);
  border-color: var(--cb-btn-outline-border);
}
.btn-outline:hover {
  background: var(--cb-btn-outline-hover-bg);
  color: var(--cb-btn-outline-hover-color);
  border-color: var(--cb-btn-outline-hover-border);
  text-decoration: none !important;
}
.btn-white {
  background: var(--cb-surface-1); color: var(--cb-accent);
  border-color: var(--cb-surface-1);
  box-shadow: 0 4px 18px rgba(0,0,0,.15);
}
.btn-white:hover {
  background: var(--cb-accent-pale);
  text-decoration: none !important;
}

/* ── HEADER ───────────────────────────────────────────────────────────── */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  background: var(--cb-header-bg);
  box-shadow: var(--cb-header-shadow);
  transition: background var(--cb-transition), box-shadow var(--cb-transition);
}
.site-header .container {
  display: flex; align-items: center;
  justify-content: space-between;
  padding-top: var(--cb-header-pad-y); padding-bottom: var(--cb-header-pad-y);
  min-height: var(--cb-header-h);
}
.site-header.scrolled {
  background: var(--cb-header-scrolled-bg);
  box-shadow: var(--cb-header-scrolled-shadow);
}

/* Logo */
.logo { display: flex; align-items: center; gap: .75rem; flex-shrink: 0; }
.logo-img { height: var(--cb-logo-h); width: auto; object-fit: contain; }
.logo-text {
  font-family: var(--cb-logo-font);
  font-size: var(--cb-logo-size);
  font-weight: var(--cb-logo-weight);
  color: var(--cb-text-bright);
  line-height: 1.25;
  letter-spacing: var(--cb-logo-spacing);
  text-transform: var(--cb-logo-transform);
}
.logo a {
  display: flex; align-items: center; gap: .75rem;
  text-decoration: none !important; color: var(--cb-text-bright);
}
.logo a:hover { color: rgba(255,255,255,.85); text-decoration: none !important; }

/* Navigation */
/* Typografie kommt aus dem Menü-Design-Tab (--menu-*). Ist dort nichts gesetzt,
   greift der Fallback und es bleibt exakt beim Design-Default (--cb-nav-* bzw.
   uppercase). WICHTIG: Diese Variablen gelten fuer die GESAMTE Navigation –
   einfache Links, Dropdown-Elternlinks und Dropdown-Eintraege. Frueher war
   text-transform hier hart auf uppercase verdrahtet, wodurch der Menue-Design-Tab
   die Hauptnavigation gar nicht erreichte und Dropdown-Elternlinks anders
   aussahen als ihre Geschwister. */
.site-nav { display: flex; gap: .1rem; align-items: center; flex-wrap: wrap; }
.site-nav a {
  font-family: var(--menu-font, inherit);
  font-size: var(--menu-font-size, var(--cb-nav-size));
  font-weight: var(--menu-font-weight, var(--cb-nav-weight));
  letter-spacing: var(--menu-letter-spacing, var(--cb-nav-spacing));
  text-transform: var(--menu-text-transform, uppercase);
  color: rgba(255,255,255,.7);
  padding: .45rem .85rem; border-radius: var(--cb-radius);
  transition: all var(--cb-transition); text-decoration: none !important;
}
.site-nav a:hover,
.site-nav a.active {
  color: var(--cb-text-bright);
  background: var(--cb-nav-hover-bg);
  text-decoration: none !important;
}
.site-nav a.active { background: var(--cb-nav-active-bg); color: var(--cb-text-bright); }

.nav-toggle {
  display: none; background: rgba(255,255,255,.1); border: none;
  color: var(--cb-text-bright); font-size: 1.2rem; cursor: pointer;
  padding: .4rem .65rem; border-radius: var(--cb-radius);
}
.nav-toggle:hover { background: rgba(255,255,255,.2); }

/* Dropdown */
.nav-item-dropdown { position: relative; }
.nav-dropdown-menu {
  display: none; position: absolute; top: calc(100% + .35rem); left: 0;
  background: var(--cb-header-bg);
  border-radius: var(--cb-radius); min-width: 180px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.1);
  z-index: 300; overflow: hidden;
}
.nav-item-dropdown.open .nav-dropdown-menu { display: block; }
.nav-dropdown-menu a {
  display: block; padding: .6rem 1rem;
  font-size: .78rem; border-radius: 0; width: 100%;
}
.nav-divider {
  display: inline-block; width: 1px; height: 18px;
  background: rgba(255,255,255,.25); margin: 0 .4rem; vertical-align: middle;
}

/* ── HERO ─────────────────────────────────────────────────────────────── */
.section-hero {
  position: relative;
  min-height: var(--cb-hero-min-h);
  display: flex; align-items: center;
  background: var(--cb-section-hero-bg);
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: -10% 0;
  background-size: cover; background-position: center;
  will-change: transform;
}
.hero-bg-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
/* Reduced-Motion: Hero-Hintergrundvideo ausblenden, das Hero-Hintergrundbild
   (.hero-bg) bleibt sichtbar. BEWUSST hier per CSS und NICHT als
   <source media="(prefers-reduced-motion: no-preference)"> (so war es bis
   13.07.2026): Passt eine <source>-media-Bedingung nicht, hat das <video>
   gar keine Quelle – Edge Android wertete das anders aus als Chrome und
   zeigte das Hero-Video nie. Breiten-Bedingungen sind die einzige media-
   Bedingung, die noch im <source> steht. */
@media (prefers-reduced-motion: reduce) {
  .hero-bg-video { display: none !important; }
}
/* Weiches Einblenden beim ersten Bild (F14): Klassen setzt cb-video-fade.js,
   ohne JS bleibt das Video sofort sichtbar. Gilt für <video> und den
   Playlist-Wrapper gleichermaßen (beide tragen .hero-bg-video). */
.hero-bg-video.cb-video-fadein { opacity: 0; transition: opacity .8s ease; }
.hero-bg-video.cb-video-fadein.cb-video-ready { opacity: 1; }
.hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background: var(--cb-hero-overlay);
  /* Farbschicht-Regler am Hero (3.2.10): 1 = Design-Standard, 0 = aus.
     Variable wird inline auf .hero-bg (rich) bzw. .section-hero (simple) gesetzt. */
  opacity: var(--cb-hero-overlay-opacity, 1);
}
.hero-overlay { opacity: var(--cb-hero-overlay-opacity, 1); }
.hero-grid {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: var(--cb-hero-grid-size, 56px) var(--cb-hero-grid-size, 56px);
}
.hero-content {
  position: relative; z-index: 2;
  padding: 6rem 0; max-width: 720px; width: 100%;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .7rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(255,255,255,.9);
  margin-bottom: 1.4rem;
  padding: var(--cb-eyebrow-pad);
  border-radius: var(--cb-eyebrow-radius);
  background: var(--cb-eyebrow-bg);
  border: var(--cb-eyebrow-border);
}
.hero-content h1 {
  font-family: var(--cb-font-head);
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: var(--cb-hero-h1-weight);
  line-height: var(--cb-hero-h1-lh);
  letter-spacing: var(--cb-hero-h1-ls);
  color: var(--cb-text-bright); margin-bottom: 1.3rem;
}
.hero-content h1 em { font-style: var(--cb-hero-em-style); color: var(--cb-hero-em-color); }
.hero-sub {
  font-size: 1.05rem; line-height: 1.85;
  color: rgba(255,255,255,.78); max-width: 560px; margin-bottom: 2.6rem;
}
/* Box-Ausrichtung der .hero-sub (max-width:560px) wird seit Session 2b per
   Inline-Style aus subheadlineAlign||headlineAlign in allen drei Renderpfaden
   gesetzt (subheadAlignStyle/edSubheadAlignStyle), damit der Untertitel auch
   unabhängig von der Überschrift ausrichtbar ist. Die frühere reine CSS-Lösung
   (Attribut-Selektor auf .hero-content) entfiele sonst als zweite, konkurrierende
   Quelle und ist daher hier entfernt. */
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }

.scroll-indicator {
  position: absolute; bottom: 2.5rem; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
  color: rgba(255,255,255,.45); font-size: .65rem; letter-spacing: .12em;
  text-transform: uppercase; z-index: 2;
  animation: scrollBob 2.4s ease-in-out infinite;
}
.scroll-indicator .scroll-line {
  width: 1px; height: 38px;
  background: linear-gradient(180deg, var(--cb-accent), transparent);
}
@keyframes scrollBob {
  0%,100% { transform: translateX(-50%) translateY(0); opacity: .55; }
  50%      { transform: translateX(-50%) translateY(6px); opacity: 1; }
}

/* ── SECTIONS ALLGEMEIN ───────────────────────────────────────────────── */
section { padding: var(--cb-section-pad) 0; }

.section-leistungen   { background: var(--cb-section-leistungen-bg); }
.section-ueber-uns    { background: var(--cb-section-ueber-bg); }
.section-galerie      { background: var(--cb-section-galerie-bg); }
.section-testimonials { background: var(--cb-section-testimonials-bg); }
.section-team         { background: var(--cb-section-team-bg); }
.section-events       { background: var(--cb-section-events-bg); }
.section-news         { background: var(--cb-section-news-bg); }
.section-text         { background: var(--cb-section-text-bg); }
.section-cta          { background: var(--cb-section-cta-bg); }
.section-kontakt      { background: var(--cb-section-kontakt-bg); }
.section-karussell    { background: var(--cb-section-karussell-bg); }
.section-faq          { background: var(--cb-section-faq-bg); }
.section-usp          { background: var(--cb-section-usp-bg); }
.section-oeffnungszeiten { background: var(--cb-section-oz-bg); }
.section-video           { background: var(--cb-section-video-bg); }
.section-foerderung      { background: var(--cb-section-foerderung-bg, var(--cb-surface-2)); }
.section-notdienst       { background: var(--cb-section-notdienst-bg, var(--cb-surface-1)); }
.section-terminal        { background: var(--cb-section-terminal-bg, var(--cb-surface-2)); }
.section-pipeline        { background: var(--cb-section-pipeline-bg, var(--cb-surface-1)); }

/* ── BAUSTEINE IN STRUKTURELEMENTEN: Spalten + Flächen (v2.5.0) ────────── */
/* Ein Baustein wird "losgelöst" (transparent, ohne Vollflächen-Chrome), wenn
   er (a) in einer mehrspaltigen Zeile liegt (.cb-col, siehe server.js
   renderNode / editor.js buildPlaceholderNodeHTML) ODER (b) das
   Strukturelement eine eigene Fläche trägt (.cb-surf, Hintergrund gesetzt).
   Über container-type reagieren die Bausteine zusätzlich auf ihre SPALTEN-
   Breite statt auf die Fensterbreite. */
.cb-col { container-type: inline-size; min-width: 0; }

/* Vollflächen-Chrome ablegen: kein Section-Padding, kein eigener Hintergrund,
   Container füllt die Spalte/Fläche statt sich zu zentrieren/zu begrenzen. Die
   Fläche trägt – falls gewünscht – das Strukturelement selbst (layout.surface). */
.cb-col section,
.cb-surf section    { padding-block: 0; background: transparent; }
.cb-col .container,
.cb-surf .container { max-width: none; padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; }

/* Überschriften an die Spaltenbreite koppeln (cqi = 1% der Container-Breite)
   statt an die Fensterbreite (vw) – verhindert das Überlaufen in engen Spalten. */
.cb-col h2 { font-size: clamp(1.3rem, 9cqi, 2.4rem); }
.cb-col h3 { font-size: clamp(1.02rem, 6cqi, 1.4rem); }

/* Harte 2-Spalter im Baustein-Inneren werden in einer Spalte immer einspaltig
   (sie brechen sonst nur über Viewport-Media-Queries um, nicht über die
   tatsächliche – hier schmale – Spaltenbreite). */
.cb-col .ueber-inner,
.cb-col .kontakt-grid,
.cb-col .form-row { grid-template-columns: 1fr; }

/* Text-Ton losgelöster Bausteine: liest den Kontext-Ton aus Variablen
   (Standard = Seiten-Ton → dunkle Schrift auf heller Fläche; in Voll-Dark-
   Designs zeigen die -dark-Token ohnehin auf helle Werte). Das Strukturelement
   schaltet den Ton über .cb-surf-ondark / .cb-surf-onlight um. So funktioniert
   die Ausnahme für CTA/Kontakt NICHT mehr über eine Karte (inkonsistent),
   sondern über den Ton der getragenen Fläche – jeder Baustein bleibt
   transparent UND lesbar. Doppelte Klasse = genug Spezifität, um die per-
   Sektion gesetzten Schriftfarben (.section-cta h2 …) zu überschreiben. */
/* KARTEN-AUSNAHME (31.08.2026): Container mit EIGENER Fläche (alle Selektoren
   dieser Datei, die selbst background: var(--cb-surface-*) tragen und Text
   enthalten) sind vom Kontext-Ton ausgenommen – sonst stünde auf einer dunklen
   Fläche helle Schrift auf der weiterhin hellen Karte (weiß auf weiß). Dieselbe
   Liste steht unten bei .cb-block-img-bg (Bild als Baustein-Hintergrund);
   beide synchron halten, neue Karte mit eigener Fläche → an beiden Stellen.
   :where() statt :is(), damit die Regel ihre Spezifität (0,2,1) behält – die
   Panel-Farbe ([style*=--cb-ctx-…], weiter unten) muss bei gleicher Stärke als
   spätere Regel gewinnen. */
.cb-col.cb-col :is(h1,h2,h3,h4,h5):not(:where(.leistung-card,.usp-item,.testimonial-card,.faq-q,.faq-a,.event-item,.news-item,.oz-wrap,.fd-card,.team-card,.nd-band,.pl-node,.term-frame) *),
.cb-surf.cb-surf :is(h1,h2,h3,h4,h5):not(:where(.leistung-card,.usp-item,.testimonial-card,.faq-q,.faq-a,.event-item,.news-item,.oz-wrap,.fd-card,.team-card,.nd-band,.pl-node,.term-frame) *) { color: var(--cb-ctx-heading, var(--cb-heading-dark)); }
.cb-col.cb-col :is(p,li,.cb-subhead):not(:where(.leistung-card,.usp-item,.testimonial-card,.faq-q,.faq-a,.event-item,.news-item,.oz-wrap,.fd-card,.team-card,.nd-band,.pl-node,.term-frame) *),
.cb-surf.cb-surf :is(p,li,.cb-subhead):not(:where(.leistung-card,.usp-item,.testimonial-card,.faq-q,.faq-a,.event-item,.news-item,.oz-wrap,.fd-card,.team-card,.nd-band,.pl-node,.term-frame) *) { color: var(--cb-ctx-text, var(--cb-text-dark)); }
.cb-surf-ondark  { --cb-ctx-heading: var(--cb-heading-bright); --cb-ctx-text: var(--cb-text-bright); }
.cb-surf-onlight { --cb-ctx-heading: var(--cb-heading-dark);   --cb-ctx-text: var(--cb-text-dark); }

/* ══ TON JE BAUSTEIN (F6, 31.08.2026) ═══════════════════════════════════
   sec.style.tone = 'light' | 'dark' → Sektionsklasse cb-tone-light / cb-tone-dark
   (gesetzt über sectionAnimFlagClasses in allen drei Renderpfaden).
   Hintergrund aus den Design-Token --cb-tone-light-bg / --cb-tone-dark-bg
   (Fallback: --cb-surface-1 bzw. --cb-surface-dark).
   Prinzip TOKEN-DREH, symmetrisch: Dunkel zeigt alle -dark-Token auf ihre
   -bright-Gegenstücke (wie ein Voll-Dark-Design), Hell umgekehrt – so folgt
   jede token-basierte Regel dieser Datei (Zahlen, Labels, Kennzahlen, Rahmen,
   Akzentworte …) automatisch. Die Originaltöne werden an :root eingefroren
   (dort berechnet, als Wert vererbt) und an Karten mit eigener Fläche
   (KARTEN-AUSNAHME-Liste) sowie Buttons zurückgegeben.
   Überschrift/Text/Untertitel zusätzlich per Doppelklasse (0,2,1), weil
   Designs eigene .section-<typ> h2-Regeln mit Palettenfarben haben (0,1,1).
   Spezifität bewusst über .cb-surf section { background: transparent }
   (0,1,1): der ausdrückliche Ton am Baustein gewinnt gegen die Fläche.
   Bild als Baustein-Hintergrund (.cb-block-img-bg) liegt ÜBER dem Grund und
   behält seine eigenen Textregeln (!important) – Bild gewinnt. */
:root {
  --cb-tone-heading-dark: var(--cb-heading-dark);    --cb-tone-heading-bright: var(--cb-heading-bright);
  --cb-tone-text-dark:    var(--cb-text-dark);       --cb-tone-text-bright:    var(--cb-text-bright);
  --cb-tone-muted-dark:   var(--cb-text-muted-dark); --cb-tone-muted-bright:   var(--cb-text-muted-bright);
  --cb-tone-accent-dark:  var(--cb-accent-dark);     --cb-tone-accent-bright:  var(--cb-accent-bright);
  --cb-tone-border-dark:  var(--cb-border-dark);     --cb-tone-border-bright:  var(--cb-border-bright);
}
section.cb-tone-dark.cb-tone-dark {
  background: var(--cb-tone-dark-bg, var(--cb-surface-dark));
  --cb-heading-dark: var(--cb-tone-heading-bright); --cb-text-dark: var(--cb-tone-text-bright);
  --cb-text-muted-dark: var(--cb-tone-muted-bright); --cb-accent-dark: var(--cb-tone-accent-bright);
  --cb-border-dark: var(--cb-tone-border-bright);
  --cb-ctx-heading: var(--cb-tone-heading-bright); --cb-ctx-text: var(--cb-tone-text-bright); --cb-ctx-muted: var(--cb-tone-muted-bright);
}
section.cb-tone-light.cb-tone-light {
  background: var(--cb-tone-light-bg, var(--cb-surface-1));
  --cb-heading-bright: var(--cb-tone-heading-dark); --cb-text-bright: var(--cb-tone-text-dark);
  --cb-text-muted-bright: var(--cb-tone-muted-dark); --cb-accent-bright: var(--cb-tone-accent-dark);
  --cb-border-bright: var(--cb-tone-border-dark);
  --cb-ctx-heading: var(--cb-tone-heading-dark); --cb-ctx-text: var(--cb-tone-text-dark); --cb-ctx-muted: var(--cb-tone-muted-dark);
}
/* Karten (eigene Fläche) und Buttons (eigene Farbwelt): Originaltöne beider Sätze zurück */
:is(section.cb-tone-light.cb-tone-light, section.cb-tone-dark.cb-tone-dark) :where(.leistung-card,.usp-item,.testimonial-card,.faq-q,.faq-a,.event-item,.news-item,.oz-wrap,.fd-card,.team-card,.nd-band,.pl-node,.term-frame,.btn) {
  --cb-heading-dark: var(--cb-tone-heading-dark);     --cb-heading-bright: var(--cb-tone-heading-bright);
  --cb-text-dark: var(--cb-tone-text-dark);           --cb-text-bright: var(--cb-tone-text-bright);
  --cb-text-muted-dark: var(--cb-tone-muted-dark);    --cb-text-muted-bright: var(--cb-tone-muted-bright);
  --cb-accent-dark: var(--cb-tone-accent-dark);       --cb-accent-bright: var(--cb-tone-accent-bright);
  --cb-border-dark: var(--cb-tone-border-dark);       --cb-border-bright: var(--cb-tone-border-bright);
}
/* Designeigene Sektions-Textregeln übertrumpfen (Karten-Ausnahme wie oben) */
:is(section.cb-tone-light.cb-tone-light, section.cb-tone-dark.cb-tone-dark)
  :is(h1,h2,h3,h4,h5,.lettern-line):not(:where(.leistung-card,.usp-item,.testimonial-card,.faq-q,.faq-a,.event-item,.news-item,.oz-wrap,.fd-card,.team-card,.nd-band,.pl-node,.term-frame) *) { color: var(--cb-ctx-heading); }
:is(section.cb-tone-light.cb-tone-light, section.cb-tone-dark.cb-tone-dark)
  :is(p,li):not(:where(.leistung-card,.usp-item,.testimonial-card,.faq-q,.faq-a,.event-item,.news-item,.oz-wrap,.fd-card,.team-card,.nd-band,.pl-node,.term-frame) *) { color: var(--cb-ctx-text); }
:is(section.cb-tone-light.cb-tone-light, section.cb-tone-dark.cb-tone-dark)
  :is(.cb-subhead,.hero-sub):not(:where(.leistung-card,.usp-item,.testimonial-card,.faq-q,.faq-a,.event-item,.news-item,.oz-wrap,.fd-card,.team-card,.nd-band,.pl-node,.term-frame) *) { color: var(--cb-ctx-muted); }
section.cb-tone-dark.cb-tone-dark   a:not([class*="btn"]):not(:where(.leistung-card,.usp-item,.testimonial-card,.faq-q,.faq-a,.event-item,.news-item,.oz-wrap,.fd-card,.team-card,.nd-band,.pl-node,.term-frame) *) { color: var(--cb-tone-accent-bright); }
section.cb-tone-light.cb-tone-light a:not([class*="btn"]):not(:where(.leistung-card,.usp-item,.testimonial-card,.faq-q,.faq-a,.event-item,.news-item,.oz-wrap,.fd-card,.team-card,.nd-band,.pl-node,.term-frame) *) { color: var(--cb-tone-accent-dark); }
section.cb-tone-light.cb-tone-light .btn-outline { color: var(--cb-tone-heading-dark); border-color: var(--cb-tone-heading-dark); }
/* Überschrift-Linie: Kontakt/CTA setzen sie unten fest auf Weiß-Transparenz → auf Hell zurück aufs Design-Token */
section.cb-tone-light.cb-tone-light:is(.section-kontakt,.section-cta) .cb-heading-line { background: var(--cb-heading-line-bg, var(--cb-accent)); }
/* Formularfelder: feste Weiß-Transparenzen (für dunkle Kontaktflächen gebaut) → auf Hell dunkle Variante */
section.cb-tone-light.cb-tone-light .form-field input,
section.cb-tone-light.cb-tone-light .form-field textarea { background: rgba(0,0,0,.04); border-color: var(--cb-tone-border-dark); color: var(--cb-tone-text-dark); }
section.cb-tone-light.cb-tone-light .form-field label { color: var(--cb-tone-muted-dark); }
section.cb-tone-light.cb-tone-light .check-label { color: var(--cb-tone-text-dark); }

/* Baustein-Textfarbe aus dem Stil-Panel (sec.style.color). Der Renderer setzt
   --cb-ctx-heading/-text inline auf die <section>; der doppelte Attribut-Selektor
   hebt die Spezifität (0,2,1) über die designeigenen .section-<typ> h2/p-Regeln
   (meist 0,1,1) – exakt die Technik von .cb-surf.cb-surf, aber ohne Fläche, damit
   die Panel-Farbe das Design übertrumpft OHNE es zu überschreiben. Greift nur, wenn
   die Variable inline gesetzt wurde (Panel-Farbe aktiv); sonst inert. Steht bewusst
   NACH dem .cb-surf-Block: bei gesetzter Fläche UND Panel-Farbe gewinnt die Panel-
   Farbe (gleiche Spezifität, spätere Regel). */
[style*="--cb-ctx-heading"][style*="--cb-ctx-heading"] :is(h1,h2,h3,h4,h5) { color: var(--cb-ctx-heading); }
[style*="--cb-ctx-text"][style*="--cb-ctx-text"] :is(p,li,.cb-subhead) { color: var(--cb-ctx-text); }

/* Losgelöst heißt WIRKLICH transparent: dekorative Section-Overlays (z.B. der
   Aurora-Verlauf von .section-cta::before) müssen ebenfalls weg, sonst bliebe
   ein Rechteck stehen, obwohl der Hintergrund transparent ist. */
.cb-col .section-cta::before,
.cb-surf .section-cta::before { display: none; }

/* Fläche eines Strukturelements – zwei Ausprägungen:
   • Wurzel-Ebene → randloses Band (.cb-band): volle Breite, Hintergrund via
     Inline-Style, KEINE Rundung/Rahmen – verhält sich wie eine normale Sektion.
     Der Inhalt (inneres .cb-grid) bleibt auf max-width zentriert.
   • Verschachtelt → umschlossene Karte (.cb-panel): Rundung/Rahmen pro Design
     über --cb-struct-* justierbar (mit Fallback). */
.cb-band { display: block; width: 100%; box-sizing: border-box; }
.cb-panel {
  border-radius: var(--cb-struct-radius, var(--cb-radius-lg));
  border: var(--cb-struct-border, none);
}

/* Bild-Fläche (surface:'image', v3.x): Hintergrundbild als cover auf Band ODER
   Panel. Das Bild selbst kommt als Inline-background-image (Responsive-BG-JS
   tauscht Varianten und überschreibt style.backgroundImage komplett – deshalb
   liegen cover/center/Overlay hier und NICHT im Inline-Style). Die Abdunkelung
   steuert --cb-surf-overlay (0–.65, Inline gesetzt) über ein ::before-Cover;
   die direkten Kinder (Grid bzw. Spalten) heben sich per z-index darüber. */
.cb-surf-img {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.cb-surf-img::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, var(--cb-surf-overlay, 0));
  border-radius: inherit;
  pointer-events: none;
}
.cb-surf-img > * { position: relative; z-index: 1; }

/* Sehr schmale Spalten: auch die auto-fit/auto-fill-Kartengrids strikt
   einspaltig, damit nichts gequetscht nebeneinander landet. */
@container (max-width: 340px) {
  .leistungen-grid, .usp-grid, .team-grid,
  .testimonials-grid, .galerie-grid { grid-template-columns: 1fr; }
}

/* ── HEADINGS ─────────────────────────────────────────────────────────── */
h2 {
  font-family: var(--cb-font-head);
  font-size: clamp(1.75rem, 3vw, 2.6rem);
  font-weight: var(--cb-h2-weight);
  line-height: 1.2;
  letter-spacing: var(--cb-h2-ls);
  color: var(--cb-heading-dark);
  margin-bottom: .5rem;
}
/* Dunkle Sections: helle Überschriften */
.section-kontakt h2,
.section-cta h2,
.section-ueber-uns.dark h2,
.section-testimonials.dark h2,
.section-events.dark h2,
.section-news.dark h2,
.section-usp.dark h2 { color: var(--cb-heading-bright); }

.cb-heading-block { margin-bottom: 3rem; }
.cb-heading-block h2 { margin-bottom: .35rem; }
.cb-heading-block .cb-subhead {
  color: var(--cb-text-muted-dark); font-size: 1.05rem;
  max-width: 580px; line-height: 1.75; margin-top: .5rem;
}
.section-kontakt .cb-heading-block .cb-subhead,
.section-cta .cb-heading-block .cb-subhead { color: var(--cb-text-muted-bright); }

.cb-heading-line {
  display: block; width: 42px; height: 3px;
  background: var(--cb-heading-line-bg, var(--cb-accent)); border-radius: 2px; margin-top: .7rem;
}
.section-kontakt .cb-heading-line,
.section-cta .cb-heading-line { background: rgba(255,255,255,.45); }

h3 {
  font-family: var(--cb-font-head);
  font-size: 1.2rem;
  color: var(--cb-heading-dark);
  margin-bottom: .45rem;
  font-weight: var(--cb-h3-weight);
}
.section-kontakt h3 { color: var(--cb-heading-bright); }

p { color: var(--cb-text-muted-dark); line-height: 1.8; margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }
.section-kontakt p,
.section-cta p { color: var(--cb-text-muted-bright); }

/* ── LEISTUNGEN ───────────────────────────────────────────────────────── */
.leistungen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 1.65rem;
}
.leistung-card {
  background: var(--cb-surface-1);
  border-radius: var(--cb-radius-lg);
  padding: 2.4rem 1.85rem;
  box-shadow: var(--cb-shadow-sm);
  border: 1px solid var(--cb-border-dark);
  transition: transform var(--cb-transition), box-shadow var(--cb-transition), border-color var(--cb-transition);
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
}
.leistung-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cb-accent), var(--cb-accent-bright));
}
:where(section:not(.cb-no-hover)) .leistung-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--cb-shadow-md);
  border-color: var(--cb-accent-pale);
}
.leistung-icon { font-size: 2.3rem; margin-bottom: 1.15rem; display: block; line-height: 1; }
.leistung-card h3 { color: var(--cb-heading-dark); margin-bottom: .5rem; }
.leistung-card p  { font-size: .9rem; color: var(--cb-text-muted-dark); flex: 1; }
.leistung-arrow {
  display: inline-flex; align-items: center; gap: .3rem;
  margin-top: 1.15rem; font-size: .75rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--cb-accent);
  opacity: 0; transform: translateX(-6px);
  transition: all var(--cb-transition);
}
:where(section:not(.cb-no-hover)) .leistung-card:hover .leistung-arrow { opacity: 1; transform: translateX(0); }

/* ── ÜBER UNS ─────────────────────────────────────────────────────────── */
.section-ueber-uns .container { max-width: 1080px; }
.ueber-inner {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 5rem; align-items: center;
}
.ueber-text p { color: var(--cb-text-muted-dark); }
.ueber-text p:first-of-type { font-size: 1.07rem; color: var(--cb-text-dark); line-height: 1.85; }
.ueber-text .btn { margin-top: 1.75rem; }
.section-ueber-uns:has(.ueber-text-full) .container { max-width: var(--cb-max-w); }
.ueber-image { position: relative; }
.ueber-image img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
  border-radius: var(--cb-radius-lg);
  box-shadow: var(--cb-shadow-lg);
}
.ueber-image::before {
  content: ''; position: absolute;
  top: -13px; right: -13px; bottom: 13px; left: 13px;
  border: 2px solid var(--cb-accent);
  border-radius: var(--cb-radius-lg); z-index: -1; opacity: .32;
}
.ueber-image::after {
  content: ''; position: absolute;
  top: 13px; right: 13px; bottom: -13px; left: -13px;
  background: var(--cb-accent-pale);
  border-radius: var(--cb-radius-lg); z-index: -2;
}
.ueber-stats { display: flex; gap: 2rem; margin-top: 2rem; flex-wrap: wrap; }
.ueber-stat strong {
  display: block; font-size: 1.9rem; font-weight: 900;
  color: var(--cb-accent); line-height: 1; font-family: var(--cb-font-head);
}
.ueber-stat span {
  font-size: .78rem; text-transform: uppercase;
  letter-spacing: .07em; color: var(--cb-text-muted-dark); font-weight: 700;
}

/* Über uns auf dunkler Sektion */
.section-ueber-uns.on-dark h2,
.section-ueber-uns.on-dark h3 { color: var(--cb-heading-bright); }
.section-ueber-uns.on-dark p  { color: var(--cb-text-muted-bright); }
.section-ueber-uns.on-dark .ueber-text p:first-of-type { color: var(--cb-text-bright); }
.section-ueber-uns.on-dark .ueber-stat span { color: var(--cb-text-muted-bright); }

/* ── GALERIE ──────────────────────────────────────────────────────────── */
.galerie-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
  gap: 1rem;
}
.galerie-item {
  border-radius: var(--cb-radius-lg); overflow: hidden;
  cursor: zoom-in; position: relative;
  box-shadow: var(--cb-shadow-sm);
  transition: box-shadow var(--cb-transition);
}
:where(section:not(.cb-no-hover)) .galerie-item:hover { box-shadow: var(--cb-shadow-md); }
.galerie-item img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
  transition: transform .5s cubic-bezier(.4,0,.2,1);
}
:where(section:not(.cb-no-hover)) .galerie-item:hover img { transform: scale(1.06); }
.galerie-item::after {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: var(--cb-galerie-overlay);
  opacity: 0; transition: opacity .32s; pointer-events: none;
}
:where(section:not(.cb-no-hover)) .galerie-item:hover::after { opacity: 1; }
.galerie-item .galerie-zoom {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.9rem; color: var(--cb-text-bright);
  opacity: 0; transition: opacity .32s; pointer-events: none;
}
:where(section:not(.cb-no-hover)) .galerie-item:hover .galerie-zoom { opacity: 1; }

/* Titel/Untertitel pro Bild (nur vorhanden, wenn der Kunde im CMS Text
   hinterlegt hat) – immer sichtbar statt nur bei Hover, damit es auch auf
   Touch-Geräten ohne Hover funktioniert. */
.galerie-item .galerie-caption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: .6rem .75rem .5rem;
  background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0));
  display: flex; flex-direction: column; gap: .1rem;
  pointer-events: none;
}
.galerie-caption-title {
  font-size: .85rem; font-weight: 700; line-height: 1.25;
  color: var(--cb-text-bright);
}
.galerie-caption-subtitle {
  font-size: .72rem; line-height: 1.2;
  color: var(--cb-text-muted-bright);
}

/* ── TEAM ─────────────────────────────────────────────────────────────── */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr));
  gap: 2.25rem;
}
.team-card {
  text-align: center;
  background: var(--cb-surface-1);
  border-radius: var(--cb-radius-lg);
  padding: 2.4rem 1.65rem 2rem;
  box-shadow: var(--cb-shadow-sm);
  border: 1px solid var(--cb-border-dark);
  transition: transform var(--cb-transition), box-shadow var(--cb-transition);
}
:where(section:not(.cb-no-hover)) .team-card:hover { transform: translateY(-4px); box-shadow: var(--cb-shadow-md); }
.team-photo {
  width: 108px; height: 108px;
  border-radius: 50%; overflow: hidden;
  margin: 0 auto 1.3rem;
  border: 3px solid var(--cb-accent);
  box-shadow: 0 4px 16px var(--cb-accent-glow);
  transition: box-shadow var(--cb-transition);
}
.team-photo img { width: 100%; height: 100%; object-fit: cover; }
.team-placeholder {
  width: 108px; height: 108px; border-radius: 50%;
  background: var(--cb-surface-2);
  border: 3px solid var(--cb-accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 2.7rem; margin: 0 auto 1.3rem;
}
:where(section:not(.cb-no-hover)) .team-card:hover .team-photo { box-shadow: 0 6px 24px var(--cb-accent-glow); }
.team-card h3 { color: var(--cb-heading-dark); margin-bottom: .25rem; }
.team-role {
  color: var(--cb-accent); font-size: .73rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; margin-bottom: .6rem;
}
.team-card p { color: var(--cb-text-muted-dark); font-size: .88rem; }

/* ── TESTIMONIALS ─────────────────────────────────────────────────────── */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: 1.65rem;
}
.testimonial-card {
  background: var(--cb-surface-1);
  border-radius: var(--cb-radius-lg);
  padding: 2.2rem 1.85rem 2rem;
  box-shadow: var(--cb-shadow-sm);
  border: 1px solid var(--cb-border-dark);
  transition: transform var(--cb-transition), box-shadow var(--cb-transition);
  position: relative; overflow: hidden;
}
.testimonial-card::before {
  content: '\201C'; font-family: var(--cb-font-head);
  font-size: 5.5rem; line-height: 1; color: var(--cb-accent);
  opacity: var(--cb-quote-opacity);
  position: absolute; top: .25rem; left: 1.25rem;
  pointer-events: none;
}
:where(section:not(.cb-no-hover)) .testimonial-card:hover { transform: translateY(-4px); box-shadow: var(--cb-shadow-md); }
.testimonial-stars { color: var(--cb-accent); font-size: .88rem; margin-bottom: .8rem; }
.testimonial-text {
  font-style: italic; color: var(--cb-text-muted-dark);
  margin-bottom: 1.2rem; position: relative; z-index: 1; line-height: 1.85;
}
.testimonial-author-row { display: flex; align-items: center; gap: .75rem; }
.testimonial-author-avatar {
  width: 37px; height: 37px; border-radius: 50%;
  background: var(--cb-accent-pale);
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem; flex-shrink: 0;
  border: 2px solid var(--cb-accent-glow);
}
.testimonial-author {
  font-weight: 700; color: var(--cb-heading-dark); font-size: .81rem;
  text-transform: uppercase; letter-spacing: .04em;
}

/* ── KONTAKT ──────────────────────────────────────────────────────────── */
.kontakt-grid {
  display: grid; grid-template-columns: 1fr 1.6fr;
  gap: 5rem; align-items: start;
}
.kontakt-detail {
  display: flex; align-items: flex-start; gap: 1.05rem; margin-bottom: 1.65rem;
}
.kontakt-detail-icon {
  width: 45px; height: 45px; border-radius: var(--cb-radius-lg);
  background: var(--cb-kontakt-icon-bg);
  border: 1px solid var(--cb-kontakt-icon-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; flex-shrink: 0;
}
.kontakt-detail-text { font-size: .9rem; }
.kontakt-detail-text strong {
  display: block; color: var(--cb-text-bright);
  margin-bottom: .14rem; font-size: .78rem;
  letter-spacing: .06em; text-transform: uppercase;
}
.kontakt-detail-text a  { color: var(--cb-text-muted-bright); }
.kontakt-detail-text a:hover { color: var(--cb-text-bright); text-decoration: none !important; }
.kontakt-detail-text span { color: var(--cb-text-muted-bright); }
.kontakt-info { margin: 1.5rem 0 2rem; }
.kontakt-info p { margin-bottom: .58rem; color: var(--cb-text-muted-bright); }
.kontakt-info a { color: var(--cb-text-bright); }
.kontakt-info a:hover { color: var(--cb-text-bright); text-decoration: none !important; }

.kontakt-form { display: flex; flex-direction: column; gap: 1.05rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.05rem; }
.form-field { position: relative; }
.form-field input,
.form-field textarea {
  width: 100%;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.2);
  color: var(--cb-text-bright); padding: 1.12rem 1rem .52rem;
  border-radius: var(--cb-radius); font-size: .95rem;
  font-family: inherit; transition: all var(--cb-transition); resize: none;
}
.form-field textarea { min-height: 130px; }
.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--cb-form-focus-border);
  background: rgba(255,255,255,.11);
  box-shadow: 0 0 0 3px var(--cb-form-focus-glow);
}
.form-field label {
  position: absolute; left: 1rem; top: 50%;
  transform: translateY(-50%); font-size: .9rem;
  color: rgba(255,255,255,.42); pointer-events: none; transition: all .2s;
}
.form-field textarea ~ label { top: 1.1rem; transform: none; }
.form-field input:focus ~ label,
.form-field input:not(:placeholder-shown) ~ label,
.form-field textarea:focus ~ label,
.form-field textarea:not(:placeholder-shown) ~ label {
  top: .37rem; transform: none; font-size: .63rem;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--cb-accent-bright);
}
.form-field input::placeholder,
.form-field textarea::placeholder { color: transparent; }
.form-note       { color: var(--cb-text-muted-bright); font-size: .875rem; margin-top: .25rem; }
.form-note-error { color: #ffaaaa; }

/* Datenschutz-Checkbox */
.form-field-check { display: flex; align-items: flex-start; position: static; }
.check-label {
  display: flex; align-items: flex-start; gap: .5rem;
  font-size: .875rem; cursor: pointer;
  color: var(--cb-text-muted-bright); position: static;
  transform: none; pointer-events: auto;
}
.check-label input[type=checkbox] {
  margin-top: .2rem; flex-shrink: 0;
  accent-color: var(--cb-accent); cursor: pointer;
}
.check-label a { color: var(--cb-accent); }

/* ── EVENTS ───────────────────────────────────────────────────────────── */
.events-list { display: flex; flex-direction: column; gap: .95rem; }
.event-item {
  background: var(--cb-surface-1);
  border-radius: var(--cb-radius-lg);
  padding: 1.7rem 1.9rem;
  box-shadow: var(--cb-shadow-sm);
  border: 1px solid var(--cb-border-dark);
  display: flex; gap: 1.85rem; align-items: flex-start;
  transition: transform var(--cb-transition), box-shadow var(--cb-transition), border-color var(--cb-transition);
}
:where(section:not(.cb-no-hover)) .event-item:hover {
  transform: translateX(4px);
  box-shadow: var(--cb-shadow-md);
  border-color: var(--cb-accent-pale);
}
.event-date {
  background: var(--cb-event-date-bg);
  color: var(--cb-text-bright);
  border-radius: var(--cb-radius); padding: .58rem .95rem;
  font-weight: 700; font-size: .78rem; text-align: center;
  min-width: 67px; flex-shrink: 0; line-height: 1.5;
  display: flex; flex-direction: column; align-items: center;
  box-shadow: 0 3px 10px var(--cb-accent-glow);
}
.event-date .event-day { font-size: 1.55rem; line-height: 1; font-family: var(--cb-font-head); }
.event-body { flex: 1; }
.event-item strong {
  color: var(--cb-heading-dark); display: block;
  margin-bottom: .28rem; font-size: 1.01rem; font-family: var(--cb-font-head);
}
.event-item p { color: var(--cb-text-muted-dark); font-size: .875rem; margin: 0; }
.event-tag {
  display: inline-block; font-size: .67rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--cb-accent); background: var(--cb-accent-pale);
  padding: .19rem .6rem; border-radius: 3rem; margin-bottom: .32rem;
}

/* ── NEWS / AKTUELLES ─────────────────────────────────────────────────── */
/* Karten liegen immer auf --cb-surface-1, daher innen bewusst die -dark-
   Textrollen – lesbar auf hellen wie dunklen Section-Hintergründen (analog
   zu .event-item). Nur die Section-<h2> flippt via .section-news.dark. */
.news-list { display: flex; flex-direction: column; gap: 1.15rem; }
.news-item {
  background: var(--cb-surface-1);
  border-radius: var(--cb-radius-lg);
  border: 1px solid var(--cb-border-dark);
  border-left: 3px solid var(--cb-accent);
  padding: 1.55rem 1.85rem;
  box-shadow: var(--cb-shadow-sm);
  transition: transform var(--cb-transition), box-shadow var(--cb-transition), border-color var(--cb-transition);
}
:where(section:not(.cb-no-hover)) .news-item:hover {
  transform: translateX(4px);
  box-shadow: var(--cb-shadow-md);
  border-color: var(--cb-accent-pale);
  border-left-color: var(--cb-accent);
}
.news-date {
  display: inline-block;
  color: var(--cb-accent);
  font-family: var(--cb-font-head);
  font-weight: 700; font-size: .78rem;
  letter-spacing: .05em; text-transform: uppercase;
  margin-bottom: .45rem;
}
.news-title {
  color: var(--cb-heading-dark);
  font-family: var(--cb-font-head);
  font-size: 1.15rem; line-height: 1.3;
  margin: 0 0 .4rem;
}
.news-text {
  color: var(--cb-text-muted-dark);
  font-size: .9rem; line-height: 1.65; margin: 0;
}
.news-empty {
  color: var(--cb-text-muted-dark); opacity: .75;
  font-style: italic; padding: .4rem 0; margin: 0;
}

/* ── CTA ──────────────────────────────────────────────────────────────── */
.section-cta { position: relative; overflow: hidden; }
.section-cta::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: var(--cb-cta-overlay);
}
.section-cta h2 { color: var(--cb-heading-bright); }
.section-cta p  {
  color: var(--cb-text-muted-bright); margin-bottom: 2.2rem;
  font-size: 1.07rem; max-width: 600px;
  margin-left: 0; margin-right: auto;
}
.cta-actions { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }

/* ── TEXT / TEXTBLOCK ─────────────────────────────────────────────────── */
.section-text .text-content {
  max-width: var(--cb-content-w, 780px); color: var(--cb-text-muted-dark); line-height: 1.9;
  margin-left: 0; margin-right: auto;
}
.section-text .text-content h1,
.section-text .text-content h2,
.section-text .text-content h3 {
  color: var(--cb-heading-dark); margin: 1.75rem 0 .6rem;
  font-family: var(--cb-font-head);
}
.section-text .text-content h2 { font-size: 1.8rem; }
.section-text .text-content h3 { font-size: 1.2rem; }
.section-text .text-content strong { color: var(--cb-heading-dark); }
.section-text .text-content ul,
.section-text .text-content ol { padding-left: 1.5rem; margin-bottom: 1rem; }
.section-text .text-content li { margin-bottom: .45rem; }
.section-text .text-content blockquote {
  border-left: 4px solid var(--cb-accent); padding-left: 1.5rem;
  margin: 2rem 0; font-style: italic; color: var(--cb-text-muted-dark);
  font-family: var(--cb-font-head); font-size: 1.08rem; line-height: 1.7;
}
.section-text .text-content a { color: var(--cb-accent); }
.section-text .text-content a:hover { color: var(--cb-accent-dark); }

/* ── BLOCK-BILD-SYSTEM ────────────────────────────────────────────────── */
.cb-block-img-wrap { display: grid; gap: 3.5rem; align-items: center; }
.cb-block-img-wrap.img-left  { grid-template-columns: auto 1fr; }
.cb-block-img-wrap.img-right { grid-template-columns: 1fr auto; }
.cb-block-img-wrap.img-right .cb-block-img     { order: 2; }
.cb-block-img-wrap.img-right .cb-block-content { order: 1; }
.cb-block-img-wrap.img-top    { display: flex; flex-direction: column; }
/* img-bottom: KEIN column-reverse – das HTML stellt den Content bereits VOR das
   Bild (contentEl, dann imgEl). column zeigt die DOM-Reihenfolge → Bild unten.
   Mit column-reverse (Bug bis 12.07.2026) hoben sich HTML- und CSS-Umkehrung
   gegenseitig auf und img-bottom sah exakt aus wie img-top. */
.cb-block-img-wrap.img-bottom { display: flex; flex-direction: column; }
/* align-items: center (Basisregel oben) laesst Flex-Items auf ihre INHALTS-
   breite schrumpfen. Ein <img> hat eine intrinsische Breite, ein
   <div class="cb-video-fade-wrap"> (smoothLoop) dagegen nicht – dessen
   width:100% rechnet dann gegen einen 0 breiten Container: Video 0px breit,
   sichtbar bleibt nur eine leere Flaeche (Bug bis 13.07.2026, fiel nur bei
   Videos auf). align-self: stretch gibt dem Container die volle Breite der
   Spalte. Gilt fuer top/bottom immer, fuer left/right ab <=960px (s.u.). */
.cb-block-img-wrap.img-top    .cb-block-img,
.cb-block-img-wrap.img-bottom .cb-block-img { align-self: stretch; }
.cb-block-img-bg {
  position: relative; overflow: hidden;
  border-radius: var(--cb-radius-lg);
  box-shadow: var(--cb-shadow-md);
}
.cb-block-img-bg .cb-block-bg-img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center; object-fit: cover; z-index: 0;
}
/* Abdunkel-Overlay liegt am CONTAINER-::after, nicht am Medien-Element:
   auf <video class="cb-block-bg-img"> (Video-Hintergrund) funktionieren
   Pseudo-Elemente nicht – dort fehlte das Overlay bis 12.07.2026 komplett.
   Stacking: ::after (z-index:0) wird nach dem bgEl (z-index:0) gemalt →
   liegt über Bild/Video, unter dem Content (z-index:1). */
.cb-block-img-bg::after {
  content: ''; position: absolute; inset: 0;
  background: var(--cb-bg-img-overlay); z-index: 0; pointer-events: none;
}
.cb-block-img-bg .cb-block-content { position: relative; z-index: 1; padding: 3rem 2.5rem; }
/* Helle Schrift nur für Text, der DIREKT auf dem Bild liegt – Karten mit
   eigener Fläche sind ausgenommen (Liste identisch mit der KARTEN-AUSNAHME beim
   Flächen-System, synchron halten). Bis 31.08.2026 färbte die Regel auch
   Karten-Texte weiß → unsichtbar auf weißer Karte (nur Icons blieben). */
.cb-block-img-bg h2:not(:where(.leistung-card,.usp-item,.testimonial-card,.faq-q,.faq-a,.event-item,.news-item,.oz-wrap,.fd-card,.team-card,.nd-band,.pl-node,.term-frame) *),
.cb-block-img-bg h3:not(:where(.leistung-card,.usp-item,.testimonial-card,.faq-q,.faq-a,.event-item,.news-item,.oz-wrap,.fd-card,.team-card,.nd-band,.pl-node,.term-frame) *) { color: var(--cb-text-bright) !important; }
.cb-block-img-bg p:not(:where(.leistung-card,.usp-item,.testimonial-card,.faq-q,.faq-a,.event-item,.news-item,.oz-wrap,.fd-card,.team-card,.nd-band,.pl-node,.term-frame) *)  { color: rgba(255,255,255,.82) !important; }
.cb-block-img-bg .cb-heading-line { background: rgba(255,255,255,.45) !important; }
.cb-block-img { flex-shrink: 0; }
.cb-block-img img,
.cb-block-img video,
.cb-block-img .cb-video-fade-wrap {
  border-radius: var(--cb-radius-lg);
  box-shadow: var(--cb-shadow-md);
  object-fit: cover; display: block;
}
.cb-block-img.img-sm  img, .cb-block-img.img-sm  video, .cb-block-img.img-sm  .cb-video-fade-wrap { width: 220px; height: 220px; }
.cb-block-img.img-md  img, .cb-block-img.img-md  video, .cb-block-img.img-md  .cb-video-fade-wrap { width: 340px; height: 258px; }
.cb-block-img.img-lg  img, .cb-block-img.img-lg  video, .cb-block-img.img-lg  .cb-video-fade-wrap { width: 480px; height: 360px; }
.cb-block-img-wrap.img-top  .cb-block-img img, .cb-block-img-wrap.img-top  .cb-block-img video, .cb-block-img-wrap.img-top  .cb-block-img .cb-video-fade-wrap,
.cb-block-img-wrap.img-bottom .cb-block-img img, .cb-block-img-wrap.img-bottom .cb-block-img video, .cb-block-img-wrap.img-bottom .cb-block-img .cb-video-fade-wrap { width: 100%; height: 320px; }
.cb-block-img-wrap.img-top  .cb-block-img.img-sm img, .cb-block-img-wrap.img-top  .cb-block-img.img-sm video, .cb-block-img-wrap.img-top  .cb-block-img.img-sm .cb-video-fade-wrap,
.cb-block-img-wrap.img-bottom .cb-block-img.img-sm img, .cb-block-img-wrap.img-bottom .cb-block-img.img-sm video, .cb-block-img-wrap.img-bottom .cb-block-img.img-sm .cb-video-fade-wrap { height: 200px; }
.cb-block-img-wrap.img-top  .cb-block-img.img-lg img, .cb-block-img-wrap.img-top  .cb-block-img.img-lg video, .cb-block-img-wrap.img-top  .cb-block-img.img-lg .cb-video-fade-wrap,
.cb-block-img-wrap.img-bottom .cb-block-img.img-lg img, .cb-block-img-wrap.img-bottom .cb-block-img.img-lg video, .cb-block-img-wrap.img-bottom .cb-block-img.img-lg .cb-video-fade-wrap { height: 440px; }

/* ── Block-Bild: Feinausrichtung (Session 30) ─────────────────────────────
   Die Klassen werden vom Renderer nur im jeweils passenden Modus gesetzt:
   img-v-* nur bei img-left/img-right, img-h-* nur bei img-top/img-bottom,
   img-gap-* bei allen vier (nie bei bg). Ohne Klasse gilt der Bestand
   (vertikal zentriert, Vollbreite, gap 3.5rem). */
/* Vertikal (Grid-Zeile: left/right) */
.cb-block-img-wrap.img-v-top     { align-items: start; }
.cb-block-img-wrap.img-v-bottom  { align-items: end; }
.cb-block-img-wrap.img-v-stretch { align-items: stretch; }
/* Strecken: Bild-Container füllt die Zeilenhöhe (= Inhaltshöhe), das Medium
   folgt per height:100% + bestehendem object-fit:cover (beschneidet).
   Breite bleibt die sm/md/lg-Festbreite. */
.cb-block-img-wrap.img-v-stretch .cb-block-img img,
.cb-block-img-wrap.img-v-stretch .cb-block-img video,
.cb-block-img-wrap.img-v-stretch .cb-block-img .cb-video-fade-wrap { height: 100%; }
/* Horizontal (Stapel: top/bottom): Container bekommt die Größen-FESTBREITE
   (statt Vollbreite) und wird ausgerichtet; das Medium füllt ihn über die
   bestehende width:100%-Regel des top/bottom-Blocks, Höhen bleiben 200/320/440.
   Steht NACH den align-self:stretch-Regeln oben → gleiche Spezifität,
   spätere Regel gewinnt. */
.cb-block-img-wrap.img-h-left   .cb-block-img,
.cb-block-img-wrap.img-h-center .cb-block-img,
.cb-block-img-wrap.img-h-right  .cb-block-img { width: 340px; max-width: 100%; }
.cb-block-img-wrap.img-h-left   .cb-block-img.img-sm,
.cb-block-img-wrap.img-h-center .cb-block-img.img-sm,
.cb-block-img-wrap.img-h-right  .cb-block-img.img-sm { width: 220px; }
.cb-block-img-wrap.img-h-left   .cb-block-img.img-lg,
.cb-block-img-wrap.img-h-center .cb-block-img.img-lg,
.cb-block-img-wrap.img-h-right  .cb-block-img.img-lg { width: 480px; }
.cb-block-img-wrap.img-h-left   .cb-block-img { align-self: flex-start; }
.cb-block-img-wrap.img-h-center .cb-block-img { align-self: center; }
.cb-block-img-wrap.img-h-right  .cb-block-img { align-self: flex-end; }
/* Abstand Bild ↔ Inhalt */
.cb-block-img-wrap.img-gap-none { gap: 0; }
.cb-block-img-wrap.img-gap-sm   { gap: 1.5rem; }
.cb-block-img-wrap.img-gap-lg   { gap: 5rem; }
.cb-block-img-wrap.img-gap-xl   { gap: 7rem; }
/* Abdunkelung im bg-Modus: höhere Spezifität als .cb-block-img-bg::after →
   überschreibt das Design-Token, wenn der Renderer img-ov + Inline-Var setzt. */
.cb-block-img-bg.img-ov::after { background: rgba(0, 0, 0, var(--cb-blockimg-ov, 0)); }
/* Paar-Deckelung (Session 30c): Bausteine mit intrinsisch ZENTRIERTEM/schmalem
   Inhalt (cta: p max-width 600 + Buttons zentriert · lettern: text-align center ·
   text: .text-content 780 · faq: .faq-list 760 · oeffnungszeiten: .oz-wrap 520).
   Ohne Deckel parkt das Bild bei img-left/right am Wrapper-Rand, während der
   Inhalt mittig in der 1fr-Restspalte schwebt – extrem auf Flächen-Bändern,
   wo .cb-surf .container die max-width komplett aufhebt. Der Deckel macht
   Bild + Inhalt zur zentrierten Einheit (Muster: .section-ueber-uns .container
   max-width 1080px). Grid-/Listen-Bausteine (leistungen, testimonials, …)
   füllen ihre Spalte und brauchen bewusst KEINEN Deckel. top/bottom/bg unberührt. */
.section-cta .cb-block-img-wrap.img-left,
.section-cta .cb-block-img-wrap.img-right,
.section-lettern .cb-block-img-wrap.img-left,
.section-lettern .cb-block-img-wrap.img-right,
.section-text .cb-block-img-wrap.img-left,
.section-text .cb-block-img-wrap.img-right,
.section-faq .cb-block-img-wrap.img-left,
.section-faq .cb-block-img-wrap.img-right,
.section-oeffnungszeiten .cb-block-img-wrap.img-left,
.section-oeffnungszeiten .cb-block-img-wrap.img-right {
  max-width: 1080px; margin-inline: auto;
}

/* ── Video-Loop-Überblendung (smoothLoop) ────────────────────────────────
   Zwei gestapelte <video>-Instanzen, identischer Clip, dauerhaft synchron
   im Loop. JS (generateMainJS / editor.js-Canvas) tauscht kurz vor dem
   natürlichen Loop-Ende per Opacity-Crossfade die sichtbare Instanz –
   kaschiert harte Schnitte bei nicht perfekt geloopten Videos.
   Klassenbasiert (kein Tag-Selektor) → funktioniert überall dort, wo sonst
   ein einzelnes <video> stünde (Hero, Block-Bild-System, Video-Baustein). */
.cb-video-fade-wrap { position: relative; overflow: hidden; }
.cb-video-fade-wrap video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0;
  transition-property: opacity; transition-timing-function: linear;
}
.cb-video-fade-wrap video.cb-vfade-visible { opacity: 1; }

/* ── FAQ ──────────────────────────────────────────────────────────────── */
.faq-list {
  max-width: 760px; margin: 0 auto;
  display: flex; flex-direction: column; gap: .45rem;
}
.faq-item {
  border: 1px solid var(--cb-border-dark);
  border-radius: var(--cb-radius-lg); overflow: hidden;
  box-shadow: var(--cb-shadow-sm);
  transition: box-shadow var(--cb-transition), border-color var(--cb-transition);
}
:where(section:not(.cb-no-hover)) .faq-item:hover { box-shadow: var(--cb-shadow-md); border-color: var(--cb-faq-hover-border); }
.faq-q {
  width: 100%; display: flex; justify-content: space-between;
  align-items: center; gap: 1rem;
  background: var(--cb-surface-1); border: none;
  padding: 1.18rem 1.5rem; cursor: pointer;
  font-family: var(--cb-font-head);
  font-size: var(--cb-faq-q-size);
  font-weight: var(--cb-faq-q-weight);
  letter-spacing: var(--cb-faq-q-ls);
  color: var(--cb-heading-dark); text-align: left;
  transition: background var(--cb-transition), color var(--cb-transition);
}
.faq-q:hover  { background: var(--cb-faq-hover-bg); }
.faq-q.open   { background: var(--cb-faq-open-bg); color: var(--cb-faq-open-color); }
.faq-q.open .faq-icon { transform: rotate(45deg); }
.faq-icon { font-size: 1.3rem; flex-shrink: 0; transition: transform .2s; color: var(--cb-accent); }
.faq-a {
  padding: 1.1rem 1.5rem 1.3rem; font-size: .95rem; line-height: 1.75;
  color: var(--cb-text-muted-dark); background: var(--cb-surface-1);
  border-top: 1px solid var(--cb-border-dark);
}

/* ── USP / VORTEILE ───────────────────────────────────────────────────── */
.usp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 1.85rem; margin-top: 2rem;
}
.usp-item {
  display: flex; gap: 1.1rem; align-items: flex-start;
  background: var(--cb-surface-2);
  border: 1px solid var(--cb-border-dark);
  border-radius: var(--cb-radius-lg);
  padding: 1.5rem 1.25rem;
  box-shadow: var(--cb-shadow-sm);
  transition: transform var(--cb-transition), box-shadow var(--cb-transition), border-color var(--cb-transition);
  position: relative; overflow: hidden;
}
.usp-item::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cb-accent), var(--cb-accent-bright));
}
:where(section:not(.cb-no-hover)) .usp-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--cb-shadow-md);
  border-color: var(--cb-accent-pale);
}
.usp-icon { font-size: 2rem; flex-shrink: 0; line-height: 1; margin-top: .1rem; }
.usp-body strong {
  display: block; font-size: var(--cb-usp-title-size); font-weight: 700;
  font-family: var(--cb-font-head); letter-spacing: var(--cb-h2-ls);
  color: var(--cb-heading-dark); margin-bottom: .3rem;
}
.usp-body p { font-size: .9rem; color: var(--cb-text-muted-dark); margin: 0; line-height: 1.6; }

/* ── ÖFFNUNGSZEITEN ───────────────────────────────────────────────────── */
.oz-wrap {
  max-width: 520px; margin: 2rem auto 0;
  background: var(--cb-surface-1);
  border-radius: var(--cb-radius-lg);
  border: 1px solid var(--cb-border-dark);
  box-shadow: var(--cb-shadow-sm);
  overflow: hidden;
}
.oz-table { width: 100%; border-collapse: collapse; }
.oz-table tr { border-bottom: 1px solid var(--cb-border-dark); }
.oz-table tr:last-child { border-bottom: none; }
:where(section:not(.cb-no-hover)) .oz-table tr:hover td { background: var(--cb-oz-hover-bg); }
.oz-day {
  padding: .85rem 1rem .85rem 1.5rem; font-weight: 700;
  font-family: var(--cb-font-head); letter-spacing: var(--cb-h2-ls);
  color: var(--cb-heading-dark); width: 55%;
}
.oz-time { padding: .85rem 1.5rem .85rem 0; color: var(--cb-text-muted-dark); text-align: right; }
.oz-closed .oz-day,
.oz-closed .oz-time { opacity: .42; }
.oz-closed-label { font-style: italic; }
.oz-empty { padding: .85rem 1.5rem; text-align: center; color: var(--cb-text-muted-dark); font-style: italic; }
.oz-prop-list { display: flex; flex-direction: column; gap: .3rem; margin-top: .25rem; }
.oz-prop-row  { display: flex; gap: .3rem; align-items: center; }

/* ── VIDEO-BAUSTEIN ───────────────────────────────────────────────────── */
.cb-video-embed {
  position: relative; width: 100%; overflow: hidden;
  border-radius: var(--cb-radius-lg); box-shadow: var(--cb-shadow-md);
}
.cb-video-embed > video,
.cb-video-embed > .cb-video-fade-wrap { display: block; width: 100%; height: 100%; object-fit: cover; }
.cb-video-embed.cb-video-h-sm { height: var(--cb-video-h-sm, 280px); }
.cb-video-embed.cb-video-h-md { height: var(--cb-video-h-md, 460px); }
.cb-video-embed.cb-video-h-lg { height: var(--cb-video-h-lg, 640px); }
.cb-video-empty {
  display: flex; align-items: center; justify-content: center; height: 100%;
  background: var(--cb-surface-3); color: var(--cb-text-muted-dark); font-size: .9rem;
}
@media (max-width: 768px) {
  .cb-video-embed.cb-video-h-sm { height: 220px; }
  .cb-video-embed.cb-video-h-md { height: 300px; }
  .cb-video-embed.cb-video-h-lg { height: 400px; }
}

/* ── KOSMOS (interaktiver 3D-Baustein: Sternenfeld / Warp / Globus) ──────
   Reines Canvas – kein Bild/Video. Die Interaktions-Engine (CB_COSMOS_JS)
   findet [data-cb-cosmos] und rendert je nach data-variant. Der
   --cb-section-kosmos-bg-Token hat einen Fallback, damit der Baustein auch
   in Designs ohne eigenen Token korrekt dunkel bleibt. */
.section-kosmos {
  position: relative; overflow: hidden; padding: 0;
  display: flex; align-items: center;
  background: var(--cb-section-kosmos-bg, #05060f);
}
.section-kosmos-h-md   { min-height: 460px; }
.section-kosmos-h-lg   { min-height: 640px; }
.section-kosmos-h-full { min-height: 100vh; }
.kosmos-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; z-index: 0;
}
.kosmos-overlay {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 34%, rgba(4,5,14,.55) 100%),
    linear-gradient(180deg, rgba(4,5,14,.4) 0%, transparent 28%, transparent 72%, rgba(4,5,14,.6) 100%);
}
.kosmos-content {
  position: relative; z-index: 2; width: 100%;
  text-align: center; padding: 5rem 2rem;
  pointer-events: none;               /* Maus erreicht das Canvas … */
}
.kosmos-content a, .kosmos-content .btn { pointer-events: auto; } /* … außer Buttons */
.kosmos-eyebrow {
  display: inline-block; font-family: var(--cb-font-body);
  font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--cb-accent-bright); margin-bottom: 1.1rem;
}
.kosmos-headline {
  font-family: var(--cb-font-head);
  font-size: clamp(2rem, 4.5vw, 3.6rem);
  line-height: 1.08; letter-spacing: -.02em;
  color: #fff; margin: 0 auto .9rem; max-width: 18ch;
  text-shadow: 0 0 44px rgba(109,92,240,.4);
}
.kosmos-sub {
  color: rgba(230,234,255,.82); font-size: 1.05rem; line-height: 1.8;
  max-width: 560px; margin: 0 auto 2rem 0;
}
.kosmos-actions { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }
.kosmos-hint {
  display: inline-flex; align-items: center; gap: .5rem; margin-top: 2.2rem;
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(200,206,239,.5);
}
.kosmos-hint-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--cb-accent-bright); box-shadow: 0 0 10px var(--cb-accent-glow);
  animation: cbKosmosPulse 1.8s ease-in-out infinite;
}
@keyframes cbKosmosPulse {
  0%, 100% { opacity: .4; transform: scale(.8); }
  50%      { opacity: 1;  transform: scale(1.3); }
}
@media (prefers-reduced-motion: reduce) { .kosmos-hint-dot { animation: none; } }
@media (max-width: 768px) {
  .section-kosmos-h-lg   { min-height: 520px; }
  .section-kosmos-h-full { min-height: 620px; }
  .kosmos-content { padding: 3.5rem 1.1rem; }
}

/* ── ZAUBER (ambienter Fantasy-Baustein: Blätter / Glühlichter / 3D-Ring) ─
   Reines Canvas – kein Bild/Video. Die Ambiente-Engine (CB_ZAUBER_JS)
   findet [data-cb-zauber] und rendert je nach data-variant. Der
   --cb-section-zauber-bg-Token hat einen Fallback, damit der Baustein auch
   in Designs ohne eigenen Token korrekt dunkel bleibt. */
.section-zauber {
  position: relative; overflow: hidden; padding: 0;
  display: flex; align-items: center;
  background: var(--cb-section-zauber-bg, #0a0e08);
}
.section-zauber-h-md   { min-height: 460px; }
.section-zauber-h-lg   { min-height: 640px; }
.section-zauber-h-full { min-height: 100vh; }
.zauber-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; z-index: 0;
}
.zauber-overlay {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 42%, transparent 30%, rgba(4,7,3,.5) 100%),
    linear-gradient(180deg, rgba(4,7,3,.45) 0%, transparent 26%, transparent 72%, rgba(4,7,3,.62) 100%);
}
.zauber-content {
  position: relative; z-index: 2; width: 100%;
  text-align: center; padding: 5rem 2rem;
  pointer-events: none;               /* Maus erreicht das Canvas … */
}
.zauber-content a, .zauber-content .btn { pointer-events: auto; } /* … außer Buttons */
.zauber-eyebrow {
  display: inline-block; font-family: var(--cb-font-body);
  font-size: .74rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase;
  color: var(--cb-accent-bright); margin-bottom: 1.1rem;
}
.zauber-headline {
  font-family: var(--cb-font-head);
  font-size: clamp(2rem, 4.5vw, 3.6rem);
  line-height: 1.12; letter-spacing: .01em;
  color: #fdf6e3; margin: 0 auto .9rem; max-width: 20ch;
  text-shadow: 0 0 44px var(--cb-accent-glow, rgba(212,164,55,.4));
}
.zauber-sub {
  color: rgba(240,234,214,.82); font-size: 1.05rem; line-height: 1.8;
  max-width: 560px; margin: 0 auto 2rem 0;
}
.zauber-actions { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }
.zauber-hint {
  display: inline-flex; align-items: center; gap: .5rem; margin-top: 2.2rem;
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(230,222,196,.5);
}
.zauber-hint-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--cb-accent-bright); box-shadow: 0 0 10px var(--cb-accent-glow);
  animation: cbZauberPulse 1.8s ease-in-out infinite;
}
@keyframes cbZauberPulse {
  0%, 100% { opacity: .4; transform: scale(.8); }
  50%      { opacity: 1;  transform: scale(1.3); }
}
@media (prefers-reduced-motion: reduce) { .zauber-hint-dot { animation: none; } }
@media (max-width: 768px) {
  .section-zauber-h-lg   { min-height: 520px; }
  .section-zauber-h-full { min-height: 620px; }
  .zauber-content { padding: 3.5rem 1.1rem; }
}

/* ── TINTE (interaktiver Atelier-Baustein: Tuschefluss / Linien / Punkte) ─
   Reines Canvas – kein Bild/Video. Die Interaktions-Engine (CB_TINTE_JS)
   findet [data-cb-tinte] und rendert je nach data-variant. Der
   --cb-section-tinte-bg-Token hat einen Fallback, damit der Baustein auch
   in Designs ohne eigenen Token korrekt dunkel bleibt. */
.section-tinte {
  position: relative; overflow: hidden; padding: 0;
  display: flex; align-items: center;
  background: var(--cb-section-tinte-bg, #0a0912);
}
.section-tinte-h-md   { min-height: 460px; }
.section-tinte-h-lg   { min-height: 640px; }
.section-tinte-h-full { min-height: 100vh; }
.tinte-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; z-index: 0;
}
.tinte-overlay {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 44%, transparent 32%, rgba(4,3,8,.5) 100%),
    linear-gradient(180deg, rgba(4,3,8,.42) 0%, transparent 26%, transparent 72%, rgba(4,3,8,.6) 100%);
}
.tinte-content {
  position: relative; z-index: 2; width: 100%;
  text-align: center; padding: 5rem 2rem;
  pointer-events: none;               /* Maus erreicht das Canvas … */
}
.tinte-content a, .tinte-content .btn { pointer-events: auto; } /* … außer Buttons */
.tinte-eyebrow {
  display: inline-block; font-family: var(--cb-font-body);
  font-size: .74rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase;
  color: var(--cb-accent-bright); margin-bottom: 1.1rem;
}
.tinte-headline {
  font-family: var(--cb-font-head);
  font-size: clamp(2rem, 4.5vw, 3.6rem);
  line-height: 1.12; letter-spacing: .01em;
  color: #f4efe6; margin: 0 auto .9rem; max-width: 20ch;
  text-shadow: 0 0 44px var(--cb-accent-glow, rgba(198,154,78,.4));
}
.tinte-sub {
  color: rgba(240,236,226,.82); font-size: 1.05rem; line-height: 1.8;
  max-width: 560px; margin: 0 auto 2rem 0;
}
.tinte-actions { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }
.tinte-hint {
  display: inline-flex; align-items: center; gap: .5rem; margin-top: 2.2rem;
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(232,226,214,.5);
}
.tinte-hint-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--cb-accent-bright); box-shadow: 0 0 10px var(--cb-accent-glow);
  animation: cbTintePulse 1.8s ease-in-out infinite;
}
@keyframes cbTintePulse {
  0%, 100% { opacity: .4; transform: scale(.8); }
  50%      { opacity: 1;  transform: scale(1.3); }
}
@media (prefers-reduced-motion: reduce) { .tinte-hint-dot { animation: none; } }
@media (max-width: 768px) {
  .section-tinte-h-lg   { min-height: 520px; }
  .section-tinte-h-full { min-height: 620px; }
  .tinte-content { padding: 3.5rem 1.1rem; }
}

/* ── PROZESS (Ablauf-Baustein mit selbstzeichnender Linie) ────────────────
   Eine durchgehende SVG-Linie verbindet die Schritt-Marker und "tätowiert
   sich" beim ersten Viewport-Eintritt (CB_MOTION_JS setzt .pz-inked auf
   [data-cb-prozess]; die Animation selbst ist reines CSS über
   stroke-dashoffset 2000→0, kein pathLength-Attribut). Schritte treten gestaffelt ein
   (--pz-i wird von der Engine gesetzt). Mobil: vertikale Linie statt SVG. */
.section-prozess { background: var(--cb-section-prozess-bg, var(--cb-surface-2)); }
.prozess-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: 2rem 1.5rem;
  margin-top: 2.5rem;
}
.prozess-line {
  position: absolute; left: 4%; right: 4%; width: 92%;
  top: 1px; height: 60px; z-index: 0;
  pointer-events: none; overflow: visible;
}
.prozess-path {
  fill: none;
  stroke: var(--cb-accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  opacity: .8;
  filter: drop-shadow(0 0 6px var(--cb-accent-glow));
}
.pz-inked .prozess-path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.9s cubic-bezier(.4,0,.2,1) .3s;
}
.prozess-step {
  position: relative; z-index: 1;
  text-align: center;
  opacity: 0; transform: translateY(18px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1);
  transition-delay: calc(.3s + var(--pz-i, 0) * .22s * var(--cb-rv-gap, 1));
}
.pz-inked .prozess-step { opacity: 1; transform: none; }
.prozess-marker {
  width: 62px; height: 62px; margin: 0 auto 1.1rem;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--cb-surface-1);
  border: 1px solid var(--cb-accent);
  box-shadow: var(--cb-shadow-sm);
  font-size: 1.5rem; line-height: 1;
  position: relative;
}
.pz-inked .prozess-marker {
  animation: cbPzPop .55s cubic-bezier(.34,1.56,.64,1) both;
  animation-delay: calc(.35s + var(--pz-i, 0) * .22s * var(--cb-rv-gap, 1));
}
@keyframes cbPzPop {
  0%   { transform: scale(.72); }
  70%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}
.prozess-num {
  position: absolute; top: -8px; right: -8px;
  min-width: 24px; height: 24px; padding: 0 .3rem;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--cb-accent);
  color: var(--cb-text-bright);
  font-family: var(--cb-font-body);
  font-size: .62rem; font-weight: 700; letter-spacing: .04em;
}
.prozess-title {
  font-family: var(--cb-font-head); font-weight: var(--cb-h3-weight);
  color: var(--cb-heading-dark); font-size: 1.08rem; margin-bottom: .35rem;
}
.prozess-text { color: var(--cb-text-muted-dark); font-size: .88rem; line-height: 1.65; margin: 0 auto; max-width: 30ch; }
@media (prefers-reduced-motion: reduce) {
  .prozess-path  { stroke-dasharray: 2000; stroke-dashoffset: 0; transition: none; }
  .prozess-step  { opacity: 1; transform: none; transition: none; }
  .pz-inked .prozess-marker { animation: none; }
}
@media (max-width: 768px) {
  .prozess-line { display: none; }
  .prozess-track { grid-template-columns: 1fr; gap: 1.6rem; }
  .prozess-track::before {
    content: ''; position: absolute; left: 30px; top: 30px; bottom: 30px;
    width: 1px; z-index: 0;
    background: linear-gradient(180deg, var(--cb-accent), var(--cb-accent-glow));
    transform: scaleY(0); transform-origin: top;
  }
  .pz-inked.prozess-track::before { transform: scaleY(1); transition: transform 1.6s cubic-bezier(.4,0,.2,1) .1s; }
  .prozess-step {
    display: grid; grid-template-columns: 62px 1fr; gap: 0 1.1rem;
    text-align: left; align-items: start;
  }
  .prozess-marker { grid-row: 1 / span 2; margin: 0; }
  .prozess-text { max-width: none; }
  @media (prefers-reduced-motion: reduce) {
    .pz-inked.prozess-track::before { transform: scaleY(1); transition: none; }
  }
}

/* ── LETTERN (Statement-Baustein mit Wort-für-Wort-Reveal) ────────────────
   Große Serif-Zeilen; CB_MOTION_JS zerlegt jede .lettern-line in
   .lt-word-Spans (--lt-i fortlaufend), setzt .lt-ready und beim ersten
   Viewport-Eintritt .lt-in – der gestaffelte Reveal selbst ist reines CSS.
   Ohne JS/bei reduced motion bleibt der Text unverändert sichtbar
   (.lt-ready wird dann nie gesetzt). <em>/<i> markiert ein Akzent-Wort. */
.section-lettern { background: var(--cb-section-lettern-bg, var(--cb-surface-2)); overflow: hidden; }
.lettern-content { text-align: center; }
.lettern-eyebrow {
  display: inline-block; font-family: var(--cb-font-body);
  font-size: .74rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase;
  color: var(--cb-accent-bright); margin-bottom: 1.4rem;
}
.lettern-line {
  font-family: var(--cb-font-head);
  font-weight: var(--cb-h2-weight);
  letter-spacing: var(--cb-h2-ls);
  color: var(--cb-heading-dark);
  line-height: 1.16;
  margin: .12em 0;
}
.lettern-size-sm .lettern-line { font-size: clamp(1.5rem, 3.4vw, 2.5rem); }
.lettern-size-md .lettern-line { font-size: clamp(1.9rem, 4.8vw, 3.6rem); }
.lettern-size-lg .lettern-line { font-size: clamp(2.3rem, 6.2vw, 4.8rem); }
.lettern-line em, .lettern-line i { font-style: italic; color: var(--cb-accent-bright); }
.lt-word { display: inline-block; }
.lt-ready .lt-word {
  opacity: 0;
  transform: translateY(.55em) rotate(1.5deg);
  filter: blur(6px);
}
.lt-ready.lt-in .lt-word {
  opacity: 1; transform: none; filter: blur(0);
  transition:
    opacity .65s ease,
    transform .75s cubic-bezier(.22,.61,.36,1),
    filter .65s ease;
  transition-delay: calc(var(--lt-i, 0) * 70ms * var(--cb-rv-gap, 1));
}
.lettern-actions {
  display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap;
  margin-top: 2.2rem;
}
@media (prefers-reduced-motion: reduce) {
  .lt-ready .lt-word { opacity: 1; transform: none; filter: none; transition: none; }
}
.section-karussell .container { max-width: var(--cb-max-w); }
.cb-carousel {
  position: relative;
  border-radius: var(--cb-radius-xl);
  overflow: hidden;
  box-shadow: var(--cb-shadow-lg);
  background: var(--cb-carousel-bg);
  user-select: none;
}
.cb-carousel.mode-single .cb-carousel-track {
  display: flex;
  transition-property: transform;
  transition-timing-function: linear;
  will-change: transform;
}
.cb-carousel.mode-single .cb-carousel-slide { flex: 0 0 100%; min-width: 100%; position: relative; }
.cb-carousel.mode-single .cb-carousel-slide img {
  width: 100%; height: var(--carousel-height, 480px);
  object-fit: cover; display: block;
}
.cb-carousel.mode-multi .cb-carousel-track {
  display: grid;
  grid-template-columns: repeat(var(--carousel-cols, 3), 1fr);
  gap: 1rem; padding: 1rem;
}
.cb-carousel.mode-multi .cb-carousel-slide {
  position: relative; border-radius: var(--cb-radius-lg); overflow: hidden; cursor: pointer;
}
.cb-carousel.mode-multi .cb-carousel-slide img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
  transition: transform .4s var(--cb-transition);
}
.cb-carousel.mode-multi .cb-carousel-slide:hover img { transform: scale(1.04); }
.cb-carousel.mode-multi.no-zoom .cb-carousel-slide:hover img { transform: none; }
.cb-carousel.mode-multi.cb-lightbox .cb-carousel-slide { cursor: zoom-in; }
.cb-carousel.mode-multi .cb-carousel-track-wrap { overflow: hidden; }

.cb-carousel-caption {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: var(--cb-carousel-caption-bg);
  padding: 2.5rem 1.75rem 1.5rem;
  transform: translateY(4px);
  opacity: 0; transition: opacity .3s, transform .3s; pointer-events: none;
}
.cb-carousel-slide:hover .cb-carousel-caption,
.cb-carousel-caption.visible { opacity: 1; transform: translateY(0); }
.cb-carousel-caption strong {
  display: block; color: var(--cb-text-bright);
  font-weight: var(--cb-h3-weight); font-family: var(--cb-font-head);
  font-size: 1.05rem; margin-bottom: .25rem;
}
.cb-carousel-caption span { color: rgba(255,255,255,.72); font-size: .85rem; }

.cb-carousel-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 10; background: var(--cb-carousel-btn-bg);
  backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.2);
  color: var(--cb-text-bright); width: 47px; height: 47px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 1.2rem;
  transition: background var(--cb-transition), transform var(--cb-transition);
}
.cb-carousel-btn:hover {
  background: var(--cb-accent);
  border-color: var(--cb-accent);
  transform: translateY(-50%) scale(1.08);
}
.cb-carousel-btn.prev { left: 1rem; }
.cb-carousel-btn.next { right: 1rem; }

.cb-carousel-dots { display: flex; justify-content: center; gap: .45rem; padding: 1rem 0 .5rem; }
.cb-carousel-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--cb-border-dark); border: none; cursor: pointer;
  transition: background var(--cb-transition), transform var(--cb-transition); padding: 0;
}
.cb-carousel-dot.active { background: var(--cb-accent); transform: scale(1.38); }

.cb-carousel:hover .cb-carousel-pause-hint { opacity: 1; }
.cb-carousel-pause-hint {
  position: absolute; top: 1rem; right: 1rem;
  background: var(--cb-carousel-pause-bg); color: var(--cb-text-bright);
  padding: .3rem .65rem; border-radius: 3rem;
  font-size: .65rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; z-index: 10;
  opacity: 0; transition: opacity .3s; pointer-events: none;
}

/* ── FOOTER ───────────────────────────────────────────────────────────── */
.site-footer {
  background: var(--cb-footer-bg);
  color: var(--cb-text-muted-bright);
  text-align: center; padding: 3rem 2rem; font-size: .83rem;
}
.footer-logo {
  color: var(--cb-text-bright); font-weight: 700;
  font-family: var(--cb-logo-font); font-size: 1rem;
  margin-bottom: .38rem; letter-spacing: var(--cb-logo-spacing);
  /* Zentrierte Flex-Zeile wie .logo im Header: das globale img{display:block}
     (Z. 29) ließ ein Bild-Logo sonst links kleben (Bug 12, 3.2.13). */
  display: flex; justify-content: center; align-items: center; gap: .75rem;
}
.footer-divider {
  width: 31px; height: 2px;
  background: var(--cb-accent); margin: .9rem auto 1.15rem; border-radius: 1px;
}
.site-footer p   { margin-bottom: .28rem; color: var(--cb-text-muted-bright); }
.site-footer a   { color: var(--cb-text-muted-bright); }
.site-footer a:hover { color: var(--cb-accent); text-decoration: none !important; }

/* ── LIGHTBOX ─────────────────────────────────────────────────────────── */
.lightbox {
  position: fixed; inset: 0; background: rgba(0,0,0,.91);
  z-index: 9999; display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(8px);
}
.lightbox-inner { position: relative; max-width: 92vw; max-height: 92vh; }
.lightbox-inner img {
  max-width: 90vw; max-height: 85vh;
  object-fit: contain; border-radius: var(--cb-radius-lg);
  box-shadow: var(--cb-shadow-lg);
}
.lightbox-inner button {
  position: absolute; top: -2.5rem; right: 0;
  background: none; border: none; color: rgba(255,255,255,.62);
  font-size: 1.6rem; cursor: pointer; transition: color var(--cb-transition);
}
.lightbox-inner button:hover { color: var(--cb-accent); }

/* ── Galeriex-Lightbox ───────────────────────────────────────────────── */
.gx-lightbox { user-select: none; overflow: hidden; }

.gx-lightbox-inner {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}

.gx-lb-img {
  max-width: 88vw; max-height: 84vh;
  object-fit: contain;
  border-radius: var(--cb-radius-lg);
  box-shadow: var(--cb-shadow-lg);
  display: block;
  transform-origin: center center;
  will-change: auto;
}

/* Schliessen-Button */
.gx-lb-close {
  position: fixed; top: 1.2rem; right: 1.4rem;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.8); font-size: 1.3rem;
  width: 2.4rem; height: 2.4rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; border-radius: 50%;
  transition: background var(--cb-transition), color var(--cb-transition);
  z-index: 10001;
}
.gx-lb-close:hover { background: rgba(255,255,255,.2); color: #fff; }

/* Nav-Buttons links/rechts */
.gx-lb-nav {
  position: fixed;
  top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.75);
  font-size: 2rem; line-height: 1;
  width: 2.8rem; height: 4.5rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; border-radius: var(--cb-radius-lg);
  transition: background var(--cb-transition), color var(--cb-transition),
              opacity var(--cb-transition);
  opacity: .55;
  z-index: 10001;
}
.gx-lb-nav:hover { background: rgba(255,255,255,.18); color: #fff; opacity: 1; }
.gx-lb-prev { left: 1.2rem; }
.gx-lb-next { right: 1.2rem; }

/* Zähler */
.gx-lb-counter {
  position: fixed; bottom: 1.4rem; left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,.5); font-size: .82rem; letter-spacing: .06em;
  pointer-events: none; z-index: 10001;
}

/* Mobile: Nav-Buttons ausblenden */
@media (max-width: 768px) {
  .gx-lb-nav  { display: none; }
  .gx-lb-img  { max-width: 96vw; max-height: 80vh; }
}

@media (prefers-reduced-motion: reduce) {
  .gx-lb-img { transition: none !important; }
}

/* ── JS-FEATURE-KLASSEN ───────────────────────────────────────────────── */
.leistung-card.cb-stagger {
  opacity: 0; transform: translateY(24px);
  transition: opacity .55s, transform .55s;
}
.leistung-card.cb-stagger.cb-stagger-visible { opacity: 1; transform: none; }

/* ── RESPONSIVE ───────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .ueber-inner { grid-template-columns: 1fr; gap: 3rem; }
  .ueber-image { order: -1; }
  .kontakt-grid { grid-template-columns: 1fr; gap: 3rem; }
  .cb-block-img-wrap.img-left,
  .cb-block-img-wrap.img-right {
    grid-template-columns: 1fr;
    display: flex; flex-direction: column;
  }
  .cb-block-img-wrap.img-right .cb-block-img     { order: 0; }
  .cb-block-img-wrap.img-right .cb-block-content { order: 1; }
  /* Siehe Kommentar am img-top/img-bottom-Block: gestapelt schrumpfen die
     Flex-Items sonst auf Inhaltsbreite -> Video (cb-video-fade-wrap) 0px. */
  .cb-block-img-wrap.img-left  .cb-block-img,
  .cb-block-img-wrap.img-right .cb-block-img { align-self: stretch; }
  .cb-block-img img, .cb-block-img video, .cb-block-img .cb-video-fade-wrap { width: 100% !important; height: 260px !important; }
  /* Feinausrichtung mobil neutralisieren: gestapelt sind V-Ausrichtung
     (height 260px !important oben schlägt img-v-stretch) und H-Festbreiten
     sinnlos – Container zurück auf Vollbreite. Nur img-gap-* bleibt aktiv
     (bewusste Designer-Entscheidung wirkt auch mobil). */
  .cb-block-img-wrap.img-h-left   .cb-block-img,
  .cb-block-img-wrap.img-h-center .cb-block-img,
  .cb-block-img-wrap.img-h-right  .cb-block-img { width: 100%; align-self: stretch; }
  .cb-block-img-bg .cb-block-content { padding: 2rem 1.25rem; }
  .cb-carousel.mode-multi .cb-carousel-track { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  body { padding-top: var(--cb-header-h-mobile, 64px); }
  .nav-toggle { display: block; }
  .site-nav {
    display: none; position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--cb-header-bg);
    flex-direction: column; gap: 0;
    padding: .5rem 0;
    box-shadow: 0 8px 28px rgba(0,0,0,.25);
    border-top: 1px solid rgba(255,255,255,.1);
  }
  .site-nav.open { display: flex; }
  .site-nav a { padding: .8rem 1.5rem; border-radius: 0; width: 100%; }
  .site-nav .nav-dropdown-menu a {
    padding: .6rem 1.5rem .6rem 2.5rem; font-size: .8rem;
    color: rgba(255,255,255,.7) !important; background: transparent;
  }
  .site-nav .nav-dropdown-menu a:hover {
    color: #fff !important; background: rgba(255,255,255,.06) !important;
  }
  .site-header .container { position: relative; }
  .container { padding-left: var(--cb-pad-mobile); padding-right: var(--cb-pad-mobile); }
  .cb-grid   { padding-left: var(--cb-pad-mobile) !important; padding-right: var(--cb-pad-mobile) !important; }
  .hero-content { padding: 3rem var(--cb-pad-mobile) 4rem; }
  .hero-content h1 { font-size: clamp(1.9rem, 7vw, 3rem); }
  .leistung-card    { padding: 1.5rem 1.25rem; }
  .team-card        { padding: 1.75rem 1.25rem 1.5rem; }
  .testimonial-card { padding: 1.5rem 1.25rem; }
  .event-item       { padding: 1.25rem; gap: 1rem; }
  .news-item        { padding: 1.25rem 1.35rem; }
  .kontakt-grid     { grid-template-columns: 1fr; gap: 2rem; }
  .form-row { grid-template-columns: 1fr; }
  .cb-carousel.mode-multi .cb-carousel-track { grid-template-columns: 1fr; }
  .cb-carousel.mode-single .cb-carousel-slide img {
    height: var(--carousel-height-mobile, 260px);
  }
}

/* ── ERWEITERTE GALERIE (galeriex) ───────────────────────────────────────── */
/*
  Aufbau: zentrierte Tab-Leiste oben + Bild-Grid darunter.
  Tokens:
    --cb-section-galeriex-bg  Hintergrund (Fallback: identisch zur normalen Galerie)
    --cb-galerie-overlay       Hover-Verdunkelung (geteilt mit normaler Galerie)
  Alle Grid/Tab-Animationen respektieren prefers-reduced-motion.
*/
.section-galeriex { background: var(--cb-section-galeriex-bg, var(--cb-section-galerie-bg)); }
.section-galeriex .container { max-width: var(--gx-container-w, var(--cb-max-w)); }

/* ── Tab-Leiste ── */
.gx-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .45rem;
  margin-bottom: 2.2rem;
  /* Mobil: horizontal scrollbar ohne Umbruch */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: .2rem;
}
.gx-tabs::-webkit-scrollbar { display: none; }

.gx-tab {
  display: inline-flex;
  align-items: center;
  padding: .42rem 1.1rem;
  border-radius: 3rem;
  border: 1.5px solid var(--cb-border);
  background: transparent;
  color: var(--cb-text-dark);
  font-family: var(--cb-font-body);
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background var(--cb-transition), color var(--cb-transition),
              border-color var(--cb-transition), transform var(--cb-transition);
  white-space: nowrap;
  user-select: none;
}
.gx-tab:hover {
  border-color: var(--cb-accent);
  color: var(--cb-accent);
  transform: translateY(-1px);
}
.gx-tab.active {
  background: var(--cb-accent);
  border-color: var(--cb-accent);
  color: var(--cb-text-bright);
  transform: translateY(-1px);
  box-shadow: 0 3px 12px var(--cb-accent-pale, rgba(0,0,0,.18));
}

/* ── Bild-Grid ── */
.gx-grid {
  display: grid;
  grid-template-columns: repeat(var(--gx-cols, 3), 1fr);
  gap: 1rem;
}
/* Container Queries für Baustein in Spalten */
@container (max-width: 520px) { .gx-grid { grid-template-columns: 1fr; } }
@container (max-width: 780px) { .gx-grid { grid-template-columns: repeat(2, 1fr); } }

/* ── Bild-Item ── */
.gx-item {
  border-radius: var(--cb-radius-lg);
  overflow: hidden;
  cursor: zoom-in;
  position: relative;
  box-shadow: var(--cb-shadow-sm);
  transition: box-shadow var(--cb-transition), transform var(--cb-transition);
  /* Startzustand für Enter-Animation */
  animation-fill-mode: both;
}
:where(section:not(.cb-no-hover)) .gx-item:hover {
  box-shadow: var(--cb-shadow-md);
  transform: translateY(-3px);
}
.gx-item img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(.4,0,.2,1);
}
:where(section:not(.cb-no-hover)) .gx-item:hover img { transform: scale(1.07); }

/* Overlay-Verdunkelung (wie normale Galerie) */
.gx-item::after {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background: var(--cb-galerie-overlay);
  opacity: 0; transition: opacity .3s; pointer-events: none;
}
:where(section:not(.cb-no-hover)) .gx-item:hover::after { opacity: 1; }

/* Zoom-Icon */
.gx-item .gx-zoom {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.75rem; color: var(--cb-text-bright);
  opacity: 0; transition: opacity .3s; pointer-events: none;
}
:where(section:not(.cb-no-hover)) .gx-item:hover .gx-zoom { opacity: 1; }

/* Caption */
.gx-caption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: .65rem .8rem .5rem;
  background: linear-gradient(to top, rgba(0,0,0,.74), rgba(0,0,0,0));
  display: flex; flex-direction: column; gap: .1rem;
  pointer-events: none;
}
.gx-caption-title {
  font-size: .85rem; font-weight: 700; line-height: 1.25;
  color: var(--cb-text-bright);
}
.gx-caption-subtitle {
  font-size: .72rem; line-height: 1.2;
  color: rgba(255,255,255,.72);
}

/* ── Enter-Animationen (Tabwechsel) ── */
@keyframes gxFadeIn {
  from { opacity: 0; transform: translateY(12px) scale(.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1);   }
}
@keyframes gxSlideIn {
  from { opacity: 0; transform: translateX(22px); }
  to   { opacity: 1; transform: translateX(0);    }
}
.gx-item.gx-enter-fade { animation: gxFadeIn  .38s cubic-bezier(.22,.68,0,1.2) both; }
.gx-item.gx-enter-slide { animation: gxSlideIn .32s cubic-bezier(.4,0,.2,1) both; }

/* Stagger-Delays (bis zu 12 Elemente, danach dieselbe Verzögerung) */
.gx-item:nth-child(1)  { animation-delay:  .00s; }
.gx-item:nth-child(2)  { animation-delay:  .04s; }
.gx-item:nth-child(3)  { animation-delay:  .08s; }
.gx-item:nth-child(4)  { animation-delay:  .12s; }
.gx-item:nth-child(5)  { animation-delay:  .16s; }
.gx-item:nth-child(6)  { animation-delay:  .20s; }
.gx-item:nth-child(7)  { animation-delay:  .24s; }
.gx-item:nth-child(8)  { animation-delay:  .28s; }
.gx-item:nth-child(9)  { animation-delay:  .32s; }
.gx-item:nth-child(10) { animation-delay:  .34s; }
.gx-item:nth-child(11) { animation-delay:  .36s; }
.gx-item:nth-child(12) { animation-delay:  .38s; }

/* ── prefers-reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  .gx-tab              { transition: none; transform: none !important; }
  .gx-item             { animation: none !important; transition: none; }
  .gx-item img         { transition: none; }
  .gx-item::after      { transition: none; }
  .gx-item .gx-zoom    { transition: none; }
  .gx-item:hover img   { transform: none; }
  .gx-item:hover       { transform: none; }
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .gx-tabs {
    justify-content: flex-start;
    flex-wrap: nowrap;
    padding-left: var(--cb-pad-mobile);
    padding-right: var(--cb-pad-mobile);
    margin-left:  calc(-1 * var(--cb-pad-mobile));
    margin-right: calc(-1 * var(--cb-pad-mobile));
  }
  .gx-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .gx-grid { grid-template-columns: 1fr; }
}

/* ══ KLICKBARE BAUSTEIN-KARTEN (cb-card-linked / cb-card-cover) ═════════════
   Trägt ein Listen-Eintrag (Leistung, Teammitglied, USP, Kundenstimme,
   Prozess-Schritt) ein Link-Ziel, bleibt die Karte ein <div> und bekommt die
   Klasse .cb-card-linked; der Link wird als absolut positioniertes,
   unsichtbares <a class="cb-card-cover"> IN die Karte gelegt (Stretched-Link).
   Grund: Ein <a> UM die ganze Karte (früherer Ansatz) kollidiert mit einem
   evtl. vorhandenen <a> im Kartentext (verschachtelte <a> sind in HTML
   verboten) – der Parser zerreißt die Karte dann in zwei Teile. Das Cover
   vermeidet das strukturell und lässt die ganze Fläche klickbar.
   Optik der Karte bleibt unverändert: Hover/::before-Akzent/Stagger hängen
   weiter am Karten-<div>. */
.cb-card-linked { cursor: pointer; }
/* Die meisten Karten haben bereits position:relative (leistung-card, usp-item,
   testimonial-card, prozess-step). team-card nicht – hier nachziehen, sonst
   ankert das Cover am nächsthöheren positionierten Vorfahren. */
.team-card.cb-card-linked { position: relative; }
.cb-card-cover {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  text-indent: -9999px;      /* falls je Textinhalt dazukommt: unsichtbar */
  overflow: hidden;
}
/* Ein echter Link im Kartentext muss über dem Cover klickbar bleiben. */
.cb-card-linked :is(p, h3, .team-role, .testimonial-text) a:not(.cb-card-cover) {
  position: relative;
  z-index: 3;
}

/* ── Scroll-to-Top-Button (mobil, v3.0.0) ─────────────────────────────
   Optionaler schwebender „Nach oben"-Button (project.mobileSettings.
   scrollTopBtn). Markup + Sichtbarkeits-Logik kommen aus cbInitScrollTop()
   (dreifach: Vorschau-JS + generateMainJS in server.js, Canvas-IIFE in
   editor.js). Halbtransparent, Akzentfarbe des Designs, nur ≤768px sichtbar,
   erscheint erst nach dem Herunterscrollen (.visible per JS). */
.cb-scrolltop {
  position: fixed;
  right: 14px;
  bottom: 18px;
  z-index: 900;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--cb-border-bright, rgba(255, 255, 255, .25));
  background: var(--cb-accent, #444);
  color: var(--cb-text-bright, #fff);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: var(--cb-shadow-md, 0 4px 14px rgba(0, 0, 0, .25));
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .25s, transform .25s;
}
.cb-scrolltop.visible {
  opacity: .55;               /* bewusst transparent – nicht aufdringlich */
  transform: translateY(0);
  pointer-events: auto;
}
.cb-scrolltop.visible:hover,
.cb-scrolltop.visible:active { opacity: .9; }
@media (max-width: 768px) {
  .cb-scrolltop { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
  .cb-scrolltop { transition: none; transform: none; }
}

/* ── THERMO (interaktiver Klima-Baustein: Wärme / Wasser / Luft) ──────────
   Canvas-Engine CB_THERMO_JS (server.js + editor.js, synchron halten). Der
   --cb-section-thermo-bg-Token hat einen Fallback, damit der Baustein auch
   in Designs ohne eigenen Token korrekt dunkel bleibt (Session-15-Muster). */
.section-thermo {
  position: relative; overflow: hidden; padding: 0;
  display: flex; align-items: center;
  background: var(--cb-section-thermo-bg, #050b16);
}
.section-thermo-h-md   { min-height: 460px; }
.section-thermo-h-lg   { min-height: 640px; }
.section-thermo-h-full { min-height: 100vh; }
.thermo-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; z-index: 0;
}
.thermo-overlay {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 44%, transparent 34%, rgba(2,6,14,.5) 100%),
    linear-gradient(180deg, rgba(2,6,14,.45) 0%, transparent 26%, transparent 72%, rgba(2,6,14,.6) 100%);
}
.thermo-content {
  position: relative; z-index: 2; width: 100%;
  text-align: center; padding: 5rem 2rem;
  pointer-events: none;               /* Maus erreicht das Canvas … */
}
.thermo-content a, .thermo-content .btn { pointer-events: auto; } /* … außer Buttons */
.thermo-eyebrow {
  display: inline-block; font-family: var(--cb-font-body);
  font-size: .74rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase;
  color: var(--cb-accent-bright); margin-bottom: 1.1rem;
}
.thermo-headline {
  font-family: var(--cb-font-head);
  font-size: clamp(2rem, 4.5vw, 3.6rem);
  line-height: 1.12; letter-spacing: -.01em;
  color: #f2f7ff; margin: 0 auto .9rem; max-width: 22ch;
  text-shadow: 0 0 44px var(--cb-accent-glow, rgba(47,125,255,.4));
}
.thermo-sub {
  color: rgba(226,238,252,.82); font-size: 1.05rem; line-height: 1.8;
  max-width: 560px; margin: 0 auto 2rem 0;
}
.thermo-actions { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }
.thermo-hint {
  display: inline-flex; align-items: center; gap: .5rem; margin-top: 2.2rem;
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(220,232,248,.5);
}
.thermo-hint-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--cb-accent-bright); box-shadow: 0 0 10px var(--cb-accent-glow);
  animation: cbThermoPulse 1.8s ease-in-out infinite;
}
@keyframes cbThermoPulse {
  0%, 100% { opacity: .4; transform: scale(.8); }
  50%      { opacity: 1;  transform: scale(1.3); }
}
@media (prefers-reduced-motion: reduce) { .thermo-hint-dot { animation: none; } }
@media (max-width: 768px) {
  .section-thermo-h-lg   { min-height: 520px; }
  .section-thermo-h-full { min-height: 620px; }
  .thermo-content { padding: 3.5rem 1.1rem; }
}

/* ── ZAHLEN (Kennzahlen mit Count-up + Fortschrittsring) ──────────────────
   CB_CRAFT_JS setzt --zl-i pro Item und .zl-in auf [data-cb-zahlen] und
   zählt .zl-num per rAF hoch; Ring-Zeichnung + Item-Stagger sind reines CSS
   (--zl-ring 0–100 inline vom Renderer, Kreisumfang r=54 → 339.292).
   Ohne JS steht der fertig formatierte Endwert bereits im Markup. */
.section-zahlen { background: var(--cb-section-zahlen-bg, var(--cb-surface-2)); }
.zahlen-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 2rem 1.5rem;
}
.zahlen-item {
  text-align: center;
  opacity: 0; transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
  transition-delay: calc(var(--zl-i, 0) * 90ms * var(--cb-rv-gap, 1));
}
.zl-in .zahlen-item { opacity: 1; transform: none; }
.zl-figure {
  position: relative; display: inline-flex;
  align-items: center; justify-content: center; min-height: 74px;
}
.zl-has-ring .zl-figure { width: 140px; height: 140px; }
.zl-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.zl-ring circle { fill: none; stroke-width: 7; }
.zl-ring-bg { stroke: var(--cb-border-dark); opacity: .55; }
.zl-ring-fg {
  stroke: var(--cb-accent); stroke-linecap: round;
  stroke-dasharray: 339.292; stroke-dashoffset: 339.292;
  transition: stroke-dashoffset 1.5s cubic-bezier(.25,.6,.25,1);
  transition-delay: calc(var(--zl-i, 0) * 90ms * var(--cb-rv-gap, 1) + 150ms);
}
.zl-in .zl-ring-fg { stroke-dashoffset: calc(339.292px - 339.292px * var(--zl-ring, 0) / 100); }
.zl-value {
  font-family: var(--cb-font-head); font-weight: var(--cb-h2-weight, 700);
  font-size: clamp(2rem, 3.4vw, 2.9rem); line-height: 1;
  color: var(--cb-heading-dark);
  display: inline-flex; align-items: baseline; gap: .1em;
}
.zl-num { font-variant-numeric: tabular-nums; }
.zl-prefix, .zl-suffix { color: var(--cb-accent); font-size: .62em; font-weight: 700; }
.zl-label { margin-top: .7rem; color: var(--cb-text-muted-dark); font-size: .92rem; letter-spacing: .02em; }
@media (prefers-reduced-motion: reduce) {
  .zahlen-item { opacity: 1; transform: none; transition: none; }
  .zl-ring-fg  { transition: none; }
}
@media (max-width: 640px) {
  .zahlen-grid { grid-template-columns: repeat(2, 1fr); gap: 1.6rem 1rem; }
}

/* ── VERGLEICH (Vorher/Nachher-Bildvergleich mit Schieberegler) ───────────
   Der Regler ist ein unsichtbares, flächenfüllendes <input type=range>
   (Drag + Klick + Pfeiltasten nativ); CB_CRAFT_JS spiegelt den Wert in
   --vg-pos. clip-path zeigt das Nachher-Bild links der Trennlinie. */
.section-vergleich { background: var(--cb-section-vergleich-bg, var(--cb-surface-1)); }
.vergleich-frame {
  --vg-pos: 50%;
  position: relative; overflow: hidden;
  aspect-ratio: 16 / 9; max-width: 980px; margin: 0 auto;
  border-radius: var(--cb-radius-lg); box-shadow: var(--cb-shadow-lg);
  user-select: none; -webkit-user-select: none;
}
.vg-media { position: absolute; inset: 0; }
.vg-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vg-after { clip-path: inset(0 calc(100% - var(--vg-pos)) 0 0); }
.vg-tag {
  position: absolute; top: .9rem; z-index: 3; pointer-events: none;
  font-family: var(--cb-font-body); font-size: .72rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: #fff; background: rgba(8,12,20,.62); padding: .35rem .7rem;
  border-radius: var(--cb-radius); backdrop-filter: blur(4px);
}
.vg-tag-before { right: .9rem; }
.vg-tag-after  { left: .9rem; }
.vg-divider {
  position: absolute; top: 0; bottom: 0; left: var(--vg-pos); z-index: 2;
  width: 2px; margin-left: -1px; background: rgba(255,255,255,.9);
  box-shadow: 0 0 12px rgba(0,0,0,.45); pointer-events: none;
}
.vg-grip {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--cb-accent); color: var(--cb-text-bright, #fff);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; font-weight: 700;
  box-shadow: var(--cb-shadow-md);
}
.vg-range {
  position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: ew-resize;
  -webkit-appearance: none; appearance: none;
  background: transparent; touch-action: pan-y;
}
.vg-empty {
  aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center;
  background: var(--cb-surface-2); border: 1px dashed var(--cb-border-dark);
  color: var(--cb-text-muted-dark); text-align: center; padding: 2rem;
}
@media (max-width: 640px) {
  .vergleich-frame { aspect-ratio: 4 / 3; }
  .vg-grip { width: 38px; height: 38px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ANIMATIONS-SCHALTER PRO BAUSTEIN (Session 34)
   Klassen am <section>-Tag, gesetzt von den drei Renderpfaden
   (injectClassesIntoSection in server.js + editor.js):
     cb-no-entrance  sec.data.animEntrance === false  → Eingangs-Animationen aus
     cb-no-hover     sec.data.animHover === false     → dekorative Hovers aus
     cb-no-fx        sec.data.animInteractive === false → Engines/Parallaxe aus
                     (wirkt über die JS-Gates in CB_*_JS, nicht über CSS)
     cb-calm         canvas-only, transient: patchSection setzt sie bei
                     Content-Edits, damit interne Animationen nicht neu
                     abspielen. Erscheint im Export NIE – die cb-calm-Selektoren
                     unten sind dort bewusst tote Regeln (eine Quelle statt
                     Duplikat).
   Alle Regeln sind rein subtraktiv (leere/inaktive Bausteine brechen nicht).
   prefers-reduced-motion behält überall Vorrang (eigene Media-Query-Blöcke
   weiter oben bleiben unangetastet). ══════════════════════════════════════ */

/* Generischer Eingangs-Animations-Kill mit Aussparung des direkten
   .container-Kinds: dort läuft ggf. der Content-Reveal (cb-anim-scope-content,
   ANIM_CSS) weiter; der Block-Reveal-Wrapper liegt außerhalb der section und
   bleibt ohnehin unberührt. Hero-Entrance-Designs nutzen das both-Keyframe-
   Muster (Anfangszustände nur in den Keyframes) → animation:none zeigt den
   Endzustand, nichts bleibt unsichtbar. */
section.cb-no-entrance, section.cb-calm,
section.cb-no-entrance > *:not(.container), section.cb-calm > *:not(.container),
section.cb-no-entrance > *:not(.container) *, section.cb-calm > *:not(.container) *,
section.cb-no-entrance > .container *, section.cb-calm > .container * { animation: none !important; }

/* Klassenbasierte Spiegel der prefers-reduced-motion-Blöcke (Transitions
   laufen nicht über animation:none): Endzustand sofort, ohne Übergang. */
section.cb-no-entrance .prozess-path, section.cb-calm .prozess-path {
  stroke-dasharray: 2000; stroke-dashoffset: 0; transition: none;
}
section.cb-no-entrance .prozess-step, section.cb-calm .prozess-step {
  opacity: 1; transform: none; transition: none;
}
section.cb-no-entrance .pz-inked .prozess-marker, section.cb-calm .pz-inked .prozess-marker { animation: none; }
section.cb-no-entrance .lt-ready .lt-word, section.cb-calm .lt-ready .lt-word {
  opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important;
}
section.cb-no-entrance .zahlen-item, section.cb-calm .zahlen-item {
  opacity: 1; transform: none; transition: none;
}
section.cb-no-entrance .zl-ring-fg, section.cb-calm .zl-ring-fg { transition: none; }
@media (max-width: 768px) {
  /* Mobil-Prozess: vertikale Linie ohne Zeichen-Transition (Spiegel der
     reduced-motion-Regel im Prozess-Mobil-Block). */
  section.cb-no-entrance .pz-inked.prozess-track::before,
  section.cb-calm .pz-inked.prozess-track::before { transform: scaleY(1); transition: none; }
}

/* Hover-Effekte aus: --fx-hover: 0 neutralisiert per Vererbung alle Design-
   Signatur-Hovers, die über den Multiplikator laufen (Lift, Icon-Pop,
   Conic-Scan, Caption-Shift …). --fx-glow bleibt bewusst unangetastet
   (ambientes Leuchten ist kein Hover). Die dekorativen blocks.css-Hovers
   tragen zusätzlich den :where(section:not(.cb-no-hover))-Guard (Spezifität
   unverändert, Design-Overrides gewinnen weiter per Quellreihenfolge). */
section.cb-no-hover { --fx-hover: 0; }
/* Generischer Fänger für hover-getriggerte CSS-Animationen. */
section.cb-no-hover *:hover,
section.cb-no-hover *:hover::before,
section.cb-no-hover *:hover::after { animation: none !important; }


/* ═══════════════════════════════════════════════════════════════════════
   FÖRDERUNG (Session 57)
   Zuschuss-Stufen als Karten mit großer Betragszahl. Struktur only –
   alle Farben/Radien/Schatten über --cb-*-Tokens.
   ═══════════════════════════════════════════════════════════════════════ */
.fd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 1.6rem; margin-top: 2.2rem;
}
.fd-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: .55rem;
  background: var(--cb-surface-1);
  border: 1px solid var(--cb-border-dark);
  border-radius: var(--cb-radius-lg);
  padding: 1.75rem 1.5rem 1.6rem;
  box-shadow: var(--cb-shadow-sm);
  transition: transform var(--cb-transition), box-shadow var(--cb-transition), border-color var(--cb-transition);
}
.fd-card::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 4px;
  background: linear-gradient(180deg, var(--cb-accent-bright), var(--cb-accent));
  opacity: .9;
}
:where(section:not(.cb-no-hover)) .fd-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--cb-shadow-md);
  border-color: var(--cb-accent-pale);
}
.fd-amount {
  display: flex; align-items: baseline; gap: .18rem;
  font-family: var(--cb-font-head);
  color: var(--cb-accent-dark, var(--cb-accent));
  line-height: 1;
}
.fd-amount-val { font-size: clamp(1.9rem, 5cqi, 2.7rem); font-weight: 800; letter-spacing: -.02em; }
.fd-amount-unit { font-size: clamp(1.05rem, 3cqi, 1.4rem); font-weight: 700; }
.fd-title {
  display: block; font-family: var(--cb-font-head);
  font-size: var(--cb-usp-title-size, 1.12rem); font-weight: 700;
  letter-spacing: var(--cb-h2-ls); color: var(--cb-heading-dark);
}
.fd-text { color: var(--cb-text-dark); font-size: .97rem; line-height: 1.65; margin: 0; }
.fd-note {
  margin: 1.6rem 0 0; font-size: .86rem; line-height: 1.6;
  color: var(--cb-text-muted-dark); max-width: var(--cb-content-w, 780px);
}
.fd-actions { margin-top: 1.7rem; display: flex; flex-wrap: wrap; gap: .8rem; }

/* Dunkle Fläche / losgelöst: Schrift aufhellen */
.section-foerderung.dark .fd-title,
.cb-surf-ondark .fd-title { color: var(--cb-heading-bright); }
.section-foerderung.dark .fd-text,
.cb-surf-ondark .fd-text { color: var(--cb-text-bright); }

/* ═══════════════════════════════════════════════════════════════════════
   NOTDIENST-BAND (Session 57)
   Auffälliges, aber ruhiges Kontaktband. Bewusst kein Blinken – der
   Puls ist ein weicher, langsamer Ring (reduced-motion schaltet ihn aus).
   ═══════════════════════════════════════════════════════════════════════ */
.nd-band {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem 2rem;
  background: var(--cb-surface-3, var(--cb-surface-2));
  border: 1px solid var(--cb-border-dark);
  border-left: 5px solid var(--cb-accent);
  border-radius: var(--cb-radius-lg);
  padding: 1.7rem 1.9rem;
  box-shadow: var(--cb-shadow-md);
}
.nd-pulse {
  flex: 0 0 auto; position: relative;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--cb-accent);
}
.nd-pulse::after {
  content: ''; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid var(--cb-accent);
  opacity: 0;
  animation: cbNdPulse 2.6s ease-out infinite;
}
@keyframes cbNdPulse {
  0%   { transform: scale(.6); opacity: .55; }
  70%  { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}
.nd-band .nd-body { flex: 1 1 320px; min-width: 0; }
.nd-eyebrow {
  display: inline-block; font-size: .74rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--cb-accent-dark, var(--cb-accent)); margin-bottom: .35rem;
}
.nd-headline {
  display: block; font-family: var(--cb-font-head);
  font-size: clamp(1.25rem, 3.4cqi, 1.75rem); font-weight: 700;
  letter-spacing: var(--cb-h2-ls); color: var(--cb-heading-dark);
}
.nd-text { margin: .4rem 0 0; color: var(--cb-text-dark); line-height: 1.6; }
.nd-actions {
  flex: 0 1 auto; display: flex; flex-direction: column;
  align-items: flex-start; gap: .45rem;
}
.nd-phone {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--cb-font-head);
  font-size: clamp(1.2rem, 3cqi, 1.6rem); font-weight: 800;
  letter-spacing: -.01em; text-decoration: none;
  color: var(--cb-accent-dark, var(--cb-accent));
  transition: color var(--cb-transition), transform var(--cb-transition);
}
.nd-phone:hover { color: var(--cb-accent); transform: translateX(2px); }
.nd-phone-icon { font-size: .9em; opacity: .8; }
.nd-note { font-size: .82rem; color: var(--cb-text-muted-dark); }
.nd-btn { margin-top: .35rem; }

.section-notdienst.dark .nd-headline,
.cb-surf-ondark .nd-headline { color: var(--cb-heading-bright); }
.section-notdienst.dark .nd-text,
.cb-surf-ondark .nd-text { color: var(--cb-text-bright); }
.section-notdienst.dark .nd-note,
.cb-surf-ondark .nd-note { color: var(--cb-text-muted-bright); }
.section-notdienst.dark .nd-phone,
.section-notdienst.dark .nd-eyebrow,
.cb-surf-ondark .nd-phone,
.cb-surf-ondark .nd-eyebrow { color: var(--cb-accent-bright); }

@media (max-width: 640px) {
  .nd-band { padding: 1.4rem 1.25rem; gap: 1rem; }
  .nd-actions { align-items: stretch; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .nd-pulse::after { animation: none; opacity: .35; transform: none; }
  .fd-card { transition: none; }
}

/* ── TERMINAL (animiertes Terminal-Fenster, Tipp-Effekt) ───────────────────
   Engine CB_NEURAL_JS (engines/cb-neural.js). Progressive Enhancement: das
   Markup trägt den vollständigen Text; die Engine leert die Zeilen und tippt
   sie beim Viewport-Eintritt nach. Ruhig-Gate: bei .cb-no-fx bzw.
   prefers-reduced-motion fasst die Engine nichts an (term-static) – der Text
   steht dann fertig da. Der Rahmen ist bewusst IMMER dunkel (Terminal-Look),
   unabhängig vom Section-Hintergrund – funktioniert dadurch auch losgelöst
   auf Bild-Flächen (.cb-surf) ohne Sonderregeln. Farben über Tokens mit
   Fallbacks, damit der Baustein in jedem Design lesbar bleibt. */
.term-frame {
  max-width: 780px; margin: 0 auto;
  background: var(--cb-term-bg, #0b0f1a);
  border: 1px solid var(--cb-term-border, rgba(255,255,255,.12));
  border-radius: var(--cb-radius-lg);
  box-shadow: var(--cb-shadow-lg);
  overflow: hidden;
  text-align: left;
}
.term-bar {
  display: flex; align-items: center; gap: .45rem;
  padding: .65rem .9rem;
  background: var(--cb-term-bar-bg, rgba(255,255,255,.05));
  border-bottom: 1px solid var(--cb-term-border, rgba(255,255,255,.12));
}
.term-dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; }
.term-dot-r { background: #ff5f57; }
.term-dot-y { background: #febc2e; }
.term-dot-g { background: #28c840; }
.term-title {
  margin-left: .55rem;
  font-family: var(--cb-font-mono, ui-monospace, 'Cascadia Mono', 'JetBrains Mono', Consolas, monospace);
  font-size: .74rem; letter-spacing: .06em;
  color: var(--cb-term-title, rgba(255,255,255,.55));
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.term-body {
  padding: 1.1rem 1.2rem 1.3rem;
  font-family: var(--cb-font-mono, ui-monospace, 'Cascadia Mono', 'JetBrains Mono', Consolas, monospace);
  font-size: .88rem; line-height: 1.7;
  min-height: 7.5em;                     /* Tipp-Phase: Rahmen springt nicht */
}
.term-row { display: block; }
.term-row-cmd .term-text { color: var(--cb-term-cmd, #e8edff); font-weight: 500; }
.term-prompt {
  color: var(--cb-term-prompt, var(--cb-accent-bright, var(--cb-accent)));
  margin-right: .6em; user-select: none;
}
.term-row-out .term-text {
  display: block; white-space: pre-wrap; word-break: break-word;
  color: var(--cb-term-out, rgba(210,220,240,.75));
  padding: .15rem 0 .35rem;
}
.term-cursor {
  display: inline-block; width: .55em; height: 1.05em;
  margin-left: 1px; vertical-align: text-bottom;
  background: var(--cb-term-prompt, var(--cb-accent-bright, var(--cb-accent)));
  animation: cbTermBlink 1s steps(1) infinite;
}
@keyframes cbTermBlink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
.term-actions { margin-top: 1.6rem; text-align: center; }

/* Losgelöst/Spalte: Rahmen füllt die Spalte, bleibt aber ein Terminal. */
.cb-col .term-frame, .cb-surf .term-frame { max-width: none; }
@container (max-width: 420px) {
  .term-body { font-size: .78rem; padding: .85rem .9rem 1rem; }
}
@media (max-width: 640px) {
  .term-body { font-size: .78rem; }
}
@media (prefers-reduced-motion: reduce) {
  .term-cursor { animation: none; }
}

/* ── PIPELINE (Workflow-Knoten mit Datenpulsen) ────────────────────────────
   Engine CB_NEURAL_JS setzt beim Viewport-Eintritt pl-in (Stagger über
   --pl-i, von der Engine gesetzt; Fallback 0). Ohne JS: Knoten voll sichtbar
   (Absenkung nur UNTER .pl-in-Abwesenheit minimal, kein Verstecken).
   Dauer-Pulse laufen NUR mit pl-in und werden über .cb-no-fx und
   prefers-reduced-motion stillgelegt; die Eingangs-Animation hängt an
   .cb-no-entrance (Engine setzt pl-in dann sofort). Desktop: horizontale
   Kette, mobil/Schmal: vertikal (Wire dreht mit). */
.pl-flow {
  display: flex; align-items: stretch; justify-content: center;
  gap: 0; margin-top: .5rem;
}
.pl-node {
  position: relative; flex: 1 1 0; min-width: 0; max-width: 320px;
  background: var(--cb-surface-1);
  border: 1px solid var(--cb-pl-border, var(--cb-border-dark));
  border-radius: var(--cb-radius-lg);
  box-shadow: var(--cb-shadow-sm);
  padding: 1.35rem 1.3rem 1.45rem;
  transition: transform var(--cb-transition), box-shadow var(--cb-transition),
              border-color var(--cb-transition),
              opacity .55s ease, translate .55s ease;
}
/* Eingangszustand NUR wenn die Engine armiert hat (pl-armed) – ohne JS
   existiert die Klasse nie, alles bleibt voll sichtbar. */
.pl-flow.pl-armed:not(.pl-in) .pl-node { opacity: .35; translate: 0 14px; }
.pl-flow.pl-in .pl-node {
  opacity: 1; translate: 0 0;
  transition-delay: 0s, 0s, 0s, calc(var(--pl-i, 0) * .16s * var(--cb-rv-gap, 1)), calc(var(--pl-i, 0) * .16s * var(--cb-rv-gap, 1));
}
:where(section:not(.cb-no-hover)) .pl-node:hover {
  transform: translateY(-4px);
  border-color: var(--cb-pl-border-hover, var(--cb-accent));
  box-shadow: var(--cb-shadow-md), 0 0 26px var(--cb-accent-glow);
}
.pl-node-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: .7rem;
}
.pl-icon { font-size: 1.5rem; line-height: 1; filter: drop-shadow(0 0 12px var(--cb-accent-glow)); }
.pl-step {
  font-family: var(--cb-font-mono, ui-monospace, Consolas, monospace);
  font-size: .72rem; letter-spacing: .14em;
  color: var(--cb-text-muted-dark); opacity: .85;
}
.pl-title {
  display: block; font-family: var(--cb-font-head);
  font-size: 1.02rem; font-weight: var(--cb-h3-weight);
  color: var(--cb-heading-dark); margin-bottom: .35rem;
}
.pl-text { font-size: .88rem; line-height: 1.65; color: var(--cb-text-muted-dark); margin: 0; }

/* Ports: kleine Anschluss-Punkte an den Kanten der Knoten */
.pl-port {
  position: absolute; top: 50%; width: 8px; height: 8px;
  border-radius: 50%; translate: 0 -50%;
  background: var(--cb-pl-wire, var(--cb-accent));
  box-shadow: 0 0 8px var(--cb-accent-glow);
}
.pl-port-in  { left: -4px; }
.pl-port-out { right: -4px; }
.pl-node:first-child .pl-port-in,
.pl-node:last-child  .pl-port-out { display: none; }

/* Verbindung: Wire (füllt sich mit pl-in) + zwei laufende Pulse */
.pl-link {
  position: relative; flex: 0 0 clamp(26px, 4vw, 64px);
  align-self: center; height: 2px; overflow: visible;
}
.pl-wire {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--cb-pl-wire, var(--cb-accent)), var(--cb-pl-wire-2, var(--cb-accent-bright, var(--cb-accent))));
  transform: scaleX(1); transform-origin: left center;
  transition: transform .5s ease calc(var(--pl-i, 0) * .16s);
  opacity: .75;
}
.pl-flow.pl-armed:not(.pl-in) .pl-wire { transform: scaleX(0); }
.pl-flow.pl-in .pl-wire { transform: scaleX(1); opacity: .75; }
.pl-pulse {
  position: absolute; top: 50%; left: 0;
  width: 7px; height: 7px; border-radius: 50%;
  translate: 0 -50%;
  background: var(--cb-pl-wire-2, var(--cb-accent-bright, var(--cb-accent)));
  box-shadow: 0 0 10px var(--cb-accent-glow), 0 0 3px var(--cb-pl-wire-2, var(--cb-accent-bright, var(--cb-accent)));
  opacity: 0;
}
.pl-flow.pl-in .pl-pulse   { animation: cbPlPulse 2.2s linear infinite; }
.pl-flow.pl-in .pl-pulse-2 { animation-delay: 1.1s; }
@keyframes cbPlPulse {
  0%   { left: 0;    opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}
/* Ruhig-Gates: Dauer-Pulse aus (Wire + Knoten bleiben) */
.cb-no-fx .pl-pulse { animation: none !important; opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .pl-pulse { animation: none !important; opacity: 0; }
  .pl-flow.pl-armed:not(.pl-in) .pl-node { opacity: 1; translate: 0 0; }
}

/* Dunkle Section / dunkle getragene Fläche: Texte hell */
.section-pipeline.dark .pl-title,
.cb-surf-ondark .pl-title { color: var(--cb-heading-bright); }
.section-pipeline.dark .pl-text,
.section-pipeline.dark .pl-step,
.cb-surf-ondark .pl-text,
.cb-surf-ondark .pl-step { color: var(--cb-text-muted-bright); }

/* Schmal (Spaltenbreite ODER Mobil): Kette vertikal */
@media (max-width: 820px) {
  .pl-flow { flex-direction: column; align-items: stretch; }
  .pl-node { max-width: none; }
  .pl-link { flex-basis: 34px; height: 34px; width: 2px; align-self: center; }
  .pl-wire {
    inset: 0; left: 50%; width: 2px; height: 100%; translate: -50% 0;
    background: linear-gradient(180deg, var(--cb-pl-wire, var(--cb-accent)), var(--cb-pl-wire-2, var(--cb-accent-bright, var(--cb-accent))));
    transform-origin: top center; transform: scaleY(1);
  }
  .pl-flow.pl-armed:not(.pl-in) .pl-wire { transform: scaleY(0); }
  .pl-flow.pl-in .pl-wire { transform: scaleY(1); }
  .pl-pulse { left: 50%; top: 0; translate: -50% 0; }
  .pl-flow.pl-in .pl-pulse { animation-name: cbPlPulseV; }
  .pl-port { top: auto; left: 50%; translate: -50% 0; }
  .pl-port-in  { top: -4px; }
  .pl-port-out { bottom: -4px; right: auto; }
}
@keyframes cbPlPulseV {
  0%   { top: 0;    opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════
   CraftBuilder Design: Sonnenwerk
   Palette: Sonnengrün + Sonnengelb + Tannen-Anthrazit + Weiß
   Zielgruppe: Heizungsbau, Solartechnik, Sanitär, Gebäudetechnik
   Charakter: technisch, nachhaltig, sonnig, sauber, regional, hochwertig.
              Weiße, luftige Flächen; Grün trägt Struktur und Vertrauen;
              Gelb ist ausschließlich Energie-Akzent (NIE Textfarbe).
   Schriften: Outfit (Headlines, 600/700/800) + Source Sans 3 (Body)

   SIGNATUR (die vier tragenden Elemente):
     1. Sonnenstrahl-Linie unter dem Header (Gelb → Grün)
     2. Hero-Korona: weicher Gelbschleier oben rechts + Horizontbogen
     3. Skyline-Trenner zwischen Hell- und Dunkelsektionen
     4. Karten mit Glut-Kante links beim Hover (über --fx-hover gedimmt)
   ═══════════════════════════════════════════════════════════════════════ */

/* lokal eingebettet aus https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Source+Sans+3:wght@300;400;500;600;700&display=swap – CraftBuilder Font-Hosting */
/* latin-ext */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/outfit-feaf43e8.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/outfit-97312486.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/outfit-feaf43e8.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/outfit-97312486.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/outfit-feaf43e8.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/outfit-97312486.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/outfit-feaf43e8.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/outfit-97312486.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/outfit-feaf43e8.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/outfit-97312486.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/source-sans-3-0be55daa.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/source-sans-3-e381d876.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/source-sans-3-0c8f6ccb.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/source-sans-3-d5a498b9.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/source-sans-3-5be8fefd.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/source-sans-3-9b02b9f7.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/source-sans-3-40c9e8f2.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/source-sans-3-0be55daa.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/source-sans-3-e381d876.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/source-sans-3-0c8f6ccb.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/source-sans-3-d5a498b9.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/source-sans-3-5be8fefd.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/source-sans-3-9b02b9f7.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/source-sans-3-40c9e8f2.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/source-sans-3-0be55daa.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/source-sans-3-e381d876.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/source-sans-3-0c8f6ccb.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/source-sans-3-d5a498b9.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/source-sans-3-5be8fefd.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/source-sans-3-9b02b9f7.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/source-sans-3-40c9e8f2.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/source-sans-3-0be55daa.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/source-sans-3-e381d876.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/source-sans-3-0c8f6ccb.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/source-sans-3-d5a498b9.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/source-sans-3-5be8fefd.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/source-sans-3-9b02b9f7.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/source-sans-3-40c9e8f2.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/source-sans-3-0be55daa.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/source-sans-3-e381d876.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/source-sans-3-0c8f6ccb.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/source-sans-3-d5a498b9.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/source-sans-3-5be8fefd.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/source-sans-3-9b02b9f7.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/source-sans-3-40c9e8f2.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root {

  /* ══════════════════════════════════════════════════════
     PALETTE
     ══════════════════════════════════════════════════════ */

  /* ── Textfarben ── */
  --heading-dark:        #0e2119;   /* Tannen-Anthrazit, kein Schwarz */
  --heading-bright:      #f2fbf5;
  --text-dark:           #243029;
  --text-bright:         #ffffff;
  --text-muted-dark:     #4c5a51;
  --text-muted-bright:   rgba(242,251,245,.8);

  /* ── Flächen ──
     Reinweiß (#fff) ist bewusst KEINE Sektionsfläche mehr, sondern nur noch
     Karten-/Band-Fläche – so heben sich Karten vom Grund ab und der
     Hintergrund blendet nicht. Hellste Sektionsfläche = --surface-0. */
  --surface-0:           #f8faf6;   /* hellste Sections (Off-White) */
  --surface-dark:        #0e2119;   /* Header-BG, Footer-BG */
  --surface-mid:         #143026;   /* CTA-BG, Kontakt-BG */
  --surface-bright:      #eff4ee;   /* helle Sections */
  --surface-bright-2:    #e2eae1;   /* etwas dunklere helle Sections */

  /* ── Akzent: Sonnengrün ── */
  --accent:              #1e8a4c;
  --accent-dark:         #14663a;   /* Hover / Text auf Hell */
  --accent-bright:       #3fbe72;   /* auf dunklen Flächen */
  --accent-pale:         #edf8f1;   /* sehr helle Fläche */
  --accent-glow:         rgba(30,138,76,.18);

  /* ── Zweitakzent: Sonnengelb / Glut-Orange ──
     Nur für Flächen, Verläufe, Icons und Grafik – nie als Textfarbe
     auf hellem Grund (Kontrast reicht dort nicht). */
  --sun:                 #f5b301;
  --sun-deep:            #f58a1f;
  --sun-pale:            #fff7e2;
  --sun-glow:            rgba(245,179,1,.22);

  /* ── Rahmen ── */
  --border-dark:         #ccd9cd;
  --border-bright:       rgba(242,251,245,.18);
  --border-focus:        rgba(30,138,76,.6);

  /* ── Schatten (grünstichig statt neutralgrau) ── */
  --shadow-sm:           0 2px 12px rgba(14,33,25,.06);
  --shadow-md:           0 8px 28px rgba(14,33,25,.11);
  --shadow-lg:           0 18px 56px rgba(14,33,25,.17);

  /* ── Radien (freundlich, nicht verspielt) ── */
  --radius:              10px;
  --radius-lg:           18px;
  --radius-xl:           26px;

  /* ── Typografie ── */
  --font-head:           'Outfit', system-ui, sans-serif;
  --font-body:           'Source Sans 3', system-ui, sans-serif;

  /* ── Layout ── */
  --max-w:               1220px;
  --transition:          .3s cubic-bezier(.22,.61,.36,1);
  --section-pad:         6rem;

  /* ── Signatur-Rezepturen (eine Quelle, mehrfach verwendet) ── */
  --sw-sunline:          linear-gradient(90deg,
                           rgba(245,179,1,0) 0%,
                           rgba(245,179,1,.9) 22%,
                           rgba(63,190,114,.9) 62%,
                           rgba(30,138,76,0) 100%);
  --sw-corona:           radial-gradient(circle at 82% 6%,
                           rgba(245,179,1,.30) 0%,
                           rgba(245,138,31,.14) 34%,
                           rgba(14,33,25,0) 66%);
  --sw-line:             linear-gradient(90deg,
                           rgba(30,138,76,0) 0%,
                           rgba(30,138,76,.32) 30%,
                           rgba(245,179,1,.55) 50%,
                           rgba(30,138,76,.32) 70%,
                           rgba(30,138,76,0) 100%);


  /* ══════════════════════════════════════════════════════
     CB-TOKEN-MAPPING
     Ausschließlich var(). Kein Hex-Code erlaubt.
     ══════════════════════════════════════════════════════ */

  /* Akzent */
  --cb-accent:              var(--accent);
  --cb-accent-dark:         var(--accent-dark);
  --cb-accent-bright:       var(--accent-bright);
  --cb-accent-pale:         var(--accent-pale);
  --cb-accent-glow:         var(--accent-glow);

  /* Textfarben */
  --cb-heading-dark:        var(--heading-dark);
  --cb-heading-bright:      var(--heading-bright);
  --cb-text-dark:           var(--text-dark);
  --cb-text-bright:         var(--text-bright);
  --cb-text-muted-dark:     var(--text-muted-dark);
  --cb-text-muted-bright:   var(--text-muted-bright);

  /* Oberflächen */
  --cb-surface-1:           var(--text-bright);
  --cb-surface-2:           var(--surface-bright);
  --cb-surface-3:           var(--surface-bright-2);
  --cb-tone-light-bg:       var(--surface-0);   /* F6 Ton „Hell“ je Baustein */
  --cb-tone-dark-bg:        var(--surface-mid);   /* F6 Ton „Dunkel“ je Baustein */
  --cb-surface-dark:        var(--surface-mid);
  --cb-surface-bright:      var(--surface-bright);
  --cb-surface-bright-2:    var(--surface-bright-2);

  /* Rahmen & Schatten */
  --cb-border:              var(--border-dark);
  --cb-border-dark:         var(--border-dark);
  --cb-border-bright:       var(--border-bright);
  --cb-border-focus:        var(--border-focus);
  --cb-shadow-sm:           var(--shadow-sm);
  --cb-shadow-md:           var(--shadow-md);
  --cb-shadow-lg:           var(--shadow-lg);

  /* Radien */
  --cb-radius:              var(--radius);
  --cb-radius-lg:           var(--radius-lg);
  --cb-radius-xl:           var(--radius-xl);
  --cb-struct-radius:       var(--radius-lg);
  --cb-struct-border:       var(--border-dark);

  /* Typografie */
  --cb-font-head:           var(--font-head);
  --cb-font-body:           var(--font-body);

  /* Layout */
  --cb-max-w:               var(--max-w);
  --cb-content-w:           var(--content-w, 760px);
  --cb-transition:          var(--transition);
  --cb-section-pad:         var(--section-pad);
  --cb-pad-mobile:          1.1rem;

  /* Heading-Typografie */
  --cb-h2-weight:           700;
  --cb-h2-ls:               -.022em;
  --cb-h3-weight:           600;

  /* Buttons */
  --cb-btn-radius:          3rem;
  --cb-btn-weight:          600;
  --cb-btn-spacing:         .01em;
  --cb-btn-transform:       none;
  --cb-btn-outline-color:        var(--text-bright);
  --cb-btn-outline-border:       rgba(255,255,255,.45);
  --cb-btn-outline-hover-bg:     rgba(255,255,255,.12);
  --cb-btn-outline-hover-color:  var(--text-bright);
  --cb-btn-outline-hover-border: var(--text-bright);

  /* Header */
  --cb-header-bg:              var(--surface-dark);
  --cb-header-shadow:          0 2px 24px rgba(14,33,25,.24);
  --cb-header-scrolled-bg:     rgba(14,33,25,.96);
  --cb-header-scrolled-shadow: 0 6px 34px rgba(14,33,25,.32);
  --cb-header-pad-y:           .75rem;
  --cb-header-h:               76px;
  --cb-header-h-mobile:        64px;

  /* Logo */
  --cb-logo-h:              46px;
  --cb-logo-font:           var(--font-head);
  --cb-logo-size:           .96rem;
  --cb-logo-weight:         700;
  --cb-logo-spacing:        .005em;
  --cb-logo-transform:      none;

  /* Navigation */
  --cb-nav-size:            .8rem;
  --cb-nav-weight:          600;
  --cb-nav-spacing:         .035em;
  --cb-nav-hover-bg:        rgba(63,190,114,.22);
  --cb-nav-active-bg:       var(--accent);

  /* Hero */
  --cb-section-hero-bg:     var(--surface-dark);
  --cb-hero-min-h:          660px;
  --cb-hero-overlay:        linear-gradient(
    112deg,
    rgba(14,33,25,.94) 0%,
    rgba(14,33,25,.82) 42%,
    rgba(20,48,38,.58) 68%,
    rgba(20,48,38,.34) 100%
  );
  --cb-hero-grid-size:      54px;
  --cb-hero-h1-weight:      800;
  --cb-hero-h1-lh:          1.06;
  --cb-hero-h1-ls:          -.03em;
  --cb-hero-em-style:       normal;
  --cb-hero-em-color:       var(--accent-bright);

  /* Eyebrow: Pille in Akzent-Pale */
  --cb-eyebrow-pad:         .34rem .95rem;
  --cb-eyebrow-radius:      3rem;
  --cb-eyebrow-bg:          rgba(63,190,114,.14);
  --cb-eyebrow-border:      1px solid rgba(63,190,114,.34);

  /* Sektions-Hintergründe – Rhythmus Weiß → Hell → Dunkel */
  --cb-section-leistungen-bg:   var(--surface-0);
  --cb-section-ueber-bg:        var(--surface-bright);
  --cb-section-galerie-bg:      var(--surface-bright-2);
  --cb-section-galeriex-bg:     var(--surface-bright-2);
  --cb-section-testimonials-bg: var(--surface-bright);
  --cb-section-team-bg:         var(--surface-0);
  --cb-section-events-bg:       var(--surface-bright);
  --cb-section-news-bg:         var(--surface-bright);
  --cb-section-text-bg:         var(--surface-0);
  --cb-section-cta-bg:          var(--surface-mid);
  --cb-section-kontakt-bg:      var(--surface-mid);
  --cb-section-karussell-bg:    var(--surface-bright);
  --cb-section-faq-bg:          var(--surface-0);
  --cb-section-usp-bg:          var(--surface-0);        /* Karten (surface-2 = surface-bright) müssen sich abheben, 31.08.2026 */
  --cb-section-oz-bg:           var(--surface-bright-2);
  --cb-section-video-bg:        var(--surface-bright);
  --cb-section-foerderung-bg:   var(--surface-bright-2);
  --cb-section-notdienst-bg:    var(--surface-0);
  --cb-section-prozess-bg:      var(--surface-0);
  --cb-section-lettern-bg:      var(--surface-mid);
  --cb-section-zahlen-bg:       var(--surface-bright);
  --cb-section-vergleich-bg:    var(--surface-0);
  --cb-section-kosmos-bg:       var(--surface-dark);
  --cb-section-zauber-bg:       var(--surface-dark);
  --cb-section-tinte-bg:        var(--surface-dark);
  --cb-section-thermo-bg:       var(--surface-dark);
  --cb-section-terminal-bg:     var(--surface-bright-2);
  --cb-section-pipeline-bg:     var(--surface-0);

  /* Galerie */
  --cb-galerie-overlay: linear-gradient(
    135deg, rgba(14,33,25,.62) 0%, rgba(245,179,1,.3) 100%
  );

  /* Testimonials */
  --cb-quote-opacity:       .07;

  /* Kontakt & Formular */
  --cb-kontakt-icon-bg:     rgba(63,190,114,.18);
  --cb-kontakt-icon-border: rgba(63,190,114,.32);
  --cb-form-focus-border:   var(--border-focus);
  --cb-form-focus-glow:     rgba(30,138,76,.12);

  /* Events */
  --cb-event-date-bg:       var(--surface-mid);

  /* CTA-Overlay: Sonnenkorona + Grünhauch */
  --cb-cta-overlay:
    radial-gradient(ellipse at 88% 8%, rgba(245,179,1,.16) 0%, transparent 58%),
    radial-gradient(ellipse at 4% 100%, rgba(63,190,114,.16) 0%, transparent 62%);

  /* Hintergrundbild-Overlay */
  --cb-bg-img-overlay: linear-gradient(
    130deg, rgba(14,33,25,.86) 0%, rgba(20,48,38,.66) 100%
  );
  --cb-blockimg-ov:    linear-gradient(
    130deg, rgba(14,33,25,.8) 0%, rgba(20,48,38,.6) 100%
  );
  --cb-surf-overlay:   rgba(14,33,25,.5);

  /* FAQ */
  --cb-faq-q-size:          1rem;
  --cb-faq-q-weight:        600;
  --cb-faq-q-ls:            -.012em;
  --cb-faq-hover-bg:        var(--accent-pale);
  --cb-faq-hover-border:    var(--accent-pale);
  --cb-faq-open-bg:         var(--accent-pale);
  --cb-faq-open-color:      var(--accent-dark);

  /* USP */
  --cb-usp-title-size:      1.02rem;

  /* Öffnungszeiten */
  --cb-oz-hover-bg:         var(--accent-pale);

  /* Karussell */
  --cb-carousel-bg:         var(--surface-mid);
  --cb-carousel-caption-bg: linear-gradient(transparent, rgba(14,33,25,.86));
  --cb-carousel-btn-bg:     rgba(255,255,255,.14);
  --cb-carousel-pause-bg:   rgba(14,33,25,.5);

  /* Video-Höhen */
  --cb-video-h-sm:          320px;
  --cb-video-h-md:          460px;
  --cb-video-h-lg:          620px;

  /* Footer */
  --cb-footer-bg:           var(--surface-dark);
}

/* ══════════════════════════════════════════════════════════════════════
   DESIGN-SPEZIFISCHE OVERRIDES & SIGNATURE-ELEMENTE
   ══════════════════════════════════════════════════════════════════════ */

html, body { overflow-x: hidden; }
body { padding-top: var(--cb-header-h); }

/* ── Signatur 1: Sonnenstrahl-Linie unter dem Header ─────────────────── */
.site-header::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--sw-sunline);
  pointer-events: none;
}

/* ── Signatur 2: Hero-Korona + Horizontbogen ─────────────────────────── */
.section-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--sw-corona);
  z-index: 1; pointer-events: none;
}
.section-hero::after {
  content: '';
  position: absolute; left: -10%; right: -10%; bottom: -14%;
  height: 46%;
  border-top: 2px solid rgba(63,190,114,.34);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  z-index: 1; pointer-events: none;
}
.hero-eyebrow {
  color: var(--accent-bright);
  display: inline-flex; align-items: center; gap: .5rem;
}
.hero-eyebrow::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--sun);
  box-shadow: 0 0 0 3px rgba(245,179,1,.2);
}

/* ── Signatur 3: Sektions-Trennlinie (border-image, kein Pseudo-Element,
      damit es nicht mit vorhandenen ::before/::after kollidiert) ─────── */
section[class*="section-"] {
  border-top: 1px solid transparent;
  border-image: var(--sw-line) 1;
}
section.section-hero { border-top: 0; border-image: none; }
.cb-col section[class*="section-"],
.cb-surf section[class*="section-"] { border-top: 0; border-image: none; }

/* ── Überschriften-Linie in Sonnenfarbe ──────────────────────────────── */
/* Überschrift-Linie über das Token, damit der Verlauf auch beim Ton-Schalter
   (F6, Hell auf Kontakt/CTA) erhalten bleibt. */
:root { --cb-heading-line-bg: linear-gradient(90deg, var(--sun), var(--accent)); }

/* ── Signatur 4: Karten mit Glut-Kante beim Hover ───────────────────── */
.leistung-card,
.usp-item,
.team-member,
.testimonial-card,
.fd-card {
  --fx-hover: 1;
}
:where(section:not(.cb-no-hover)) .leistung-card:hover,
:where(section:not(.cb-no-hover)) .usp-item:hover,
:where(section:not(.cb-no-hover)) .testimonial-card:hover {
  box-shadow:
    calc(-4px * var(--fx-hover, 1)) 0 0 0 var(--sun),
    var(--shadow-md);
}

/* ── Dunkle Sektionen: Schrift aufhellen ─────────────────────────────── */
.section-cta h2, .section-kontakt h2, .section-lettern h2,
.section-cta h3, .section-kontakt h3 { color: var(--heading-bright); }
.section-lettern .lettern-line { color: var(--heading-bright); }
.section-cta .cb-subhead, .section-kontakt .cb-subhead { color: var(--text-muted-bright); }

/* ── Linkfarben nach Flächenhelligkeit (Buttons ausgenommen) ─────────── */
:where(.section-leistungen, .section-ueber-uns, .section-faq, .section-usp,
       .section-team, .section-news, .section-events, .section-text,
       .section-foerderung, .section-notdienst) a:not([class*="btn"]) {
  color: var(--accent-dark);
}
:where(.section-leistungen, .section-ueber-uns, .section-faq, .section-usp,
       .section-team, .section-news, .section-events, .section-text,
       .section-foerderung, .section-notdienst) a:not([class*="btn"]):hover {
  color: var(--accent);
}
:where(.section-cta, .section-kontakt, .section-lettern) a:not([class*="btn"]) {
  color: var(--accent-bright);
}

/* ── Kleinteile ──────────────────────────────────────────────────────── */
.team-placeholder { background: var(--accent-pale); border-color: var(--accent-bright); }
.ueber-image::after { background: var(--sun-pale); }
.leistung-icon, .usp-icon { filter: saturate(1.05); }

/* Förderung: Betragszahl bekommt den Sonnenverlauf */
.fd-amount {
  background: linear-gradient(96deg, var(--accent-dark), var(--sun-deep));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* Notdienst: Band bekommt eine Sonnenkante statt reiner Akzentkante */
.nd-band {
  border-left-color: var(--sun);
  background:
    radial-gradient(ellipse at 100% 0%, rgba(245,179,1,.1) 0%, transparent 58%),
    var(--text-bright);
}

/* Zahlen: Ring in Sonnengelb, Wert in Grün */
.zl-ring-fg { stroke: var(--sun); }
.zl-num, .zl-prefix, .zl-suffix { color: var(--accent-dark); }

/* Prozess: Ablauflinie in Akzent */
.prozess-path { stroke: var(--accent-bright); }

@media (max-width: 768px) {
  :root { --section-pad: 3.4rem; }
  .section-hero::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto; }
}