/* ═══════════════════════════════════════════════════════════════════════
   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;
}
.hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background: var(--cb-hero-overlay);
}
.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); }

/* ── 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. */
.cb-col.cb-col :is(h1,h2,h3,h4,h5),
.cb-surf.cb-surf :is(h1,h2,h3,h4,h5) { color: var(--cb-ctx-heading, var(--cb-heading-dark)); }
.cb-col.cb-col :is(p,li,.cb-subhead),
.cb-surf.cb-surf :is(p,li,.cb-subhead) { 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); }

/* 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);
}

/* 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-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));
}
.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);
}
.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);
}
.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);
}
.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;
}
.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;
}
.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);
}
.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;
}
.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;
}
.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);
}
.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);
}
.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: auto; margin-right: auto;
}
.cta-actions { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }

/* ── TEXT / TEXTBLOCK ─────────────────────────────────────────────────── */
.section-text .text-content {
  max-width: 780px; color: var(--cb-text-muted-dark); line-height: 1.9;
  margin-left: auto; 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; }
.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; }
.cb-block-img-bg h2,
.cb-block-img-bg h3 { color: var(--cb-text-bright) !important; }
.cb-block-img-bg p  { 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; }

/* ── 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);
}
.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));
}
.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; }
.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;
}
.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;
}
.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;
}
.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);
}
.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);
}
@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);
}
.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);
}
.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; }
  .cb-block-img img, .cb-block-img video, .cb-block-img .cb-video-fade-wrap { width: 100% !important; height: 260px !important; }
  .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);
  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;
}
.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);
}
.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;
}
.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;
}
.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; }
}

/* ═══════════════════════════════════════════════════════════════════════
   CraftBuilder Design: Digital Dark  v2
   Palette: Fast-Schwarz + Elektrisches Cyan + Dunkelgrau
   Zielgruppe: IT-Dienstleistungen, Software, Cloud, Cybersecurity, SaaS
   Charakter: Modern, mutig, tech-affin. Dark Mode, Cyan-Akzente, Glows.
   Schriften: Space Grotesk (Headlines) + DM Sans (Body)

   DARK-MODE-BESONDERHEIT:
   --heading-dark / --text-dark    → auf --surface-bright (hellen Sections)
   --heading-bright / --text-bright → auf --surface-dark/mid (dunklen Sections)
   ═══════════════════════════════════════════════════════════════════════ */

/* lokal eingebettet aus https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap – CraftBuilder Font-Hosting */
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/dm-sans-5a14cee0.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: 'DM Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/dm-sans-30c8038a.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: 'DM Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/dm-sans-850928f5.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: 'DM Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/dm-sans-002a94d0.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: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/dm-sans-850928f5.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: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/dm-sans-002a94d0.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: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/dm-sans-850928f5.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: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/dm-sans-002a94d0.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: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/dm-sans-850928f5.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: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/dm-sans-002a94d0.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;
}
/* vietnamese */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/space-grotesk-01d4d517.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: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/space-grotesk-c0b2233d.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: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/space-grotesk-4ecc7e89.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;
}
/* vietnamese */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/space-grotesk-01d4d517.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: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/space-grotesk-c0b2233d.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: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/space-grotesk-4ecc7e89.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;
}
/* vietnamese */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/space-grotesk-01d4d517.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: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/space-grotesk-c0b2233d.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: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/space-grotesk-4ecc7e89.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;
}
/* vietnamese */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/space-grotesk-01d4d517.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: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/space-grotesk-c0b2233d.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: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/space-grotesk-4ecc7e89.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:        #1a2a35;   /* Überschriften auf heller Fläche (dunkel) */
  --heading-bright:      #e8f4f8;   /* Überschriften auf dunkler Fläche (hell) */
  --text-dark:           #2e3d48;   /* Fließtext auf heller Fläche */
  --text-bright:         #e8f4f8;   /* Fließtext auf dunkler Fläche */
  --text-muted-dark:     #5a7080;   /* gedämpft auf heller Fläche */
  --text-muted-bright:   #6a8898;   /* gedämpft auf dunkler Fläche */

  /* ── Flächen ── */
  --surface-dark:        #060b10;   /* Header, Footer */
  --surface-mid:         #0d1a24;   /* CTA, Kontakt, Karussell, Body-BG */
  --surface-bright:      #fff5f5;   /* helle Sections */
  --surface-bright-2:    #e0edf4;   /* etwas dunklere helle Sections */

  /* ── Akzent (Elektrisches Cyan) ── */
  --accent:              #099a87;
  --accent-dark:         #00a896;   /* Hover */
  --accent-bright:       #33dfc6;   /* hellere Variante */
  --accent-pale:         #e6faf7;   /* auf hellen Flächen */
  --accent-glow:         rgba(0,212,184,.22);

  /* ── Rahmen ── */
  --border-dark:         #c8dde8;   /* auf heller Fläche */
  --border-bright:       #1e3040;   /* auf dunkler Fläche */
  --border-focus:        rgba(0,212,184,.7);

  /* ── Schatten ── */
  --shadow-sm:           0 2px 12px rgba(0,10,20,.4);
  --shadow-md:           0 6px 28px rgba(0,10,20,.5);
  --shadow-lg:           0 16px 56px rgba(0,10,20,.65);

  /* ── Radien ── */
  --radius:              8px;
  --radius-lg:           16px;
  --radius-xl:           24px;

  /* ── Typografie ── */
  --font-head:           'Space Grotesk', system-ui, sans-serif;
  --font-body:           'DM Sans', system-ui, sans-serif;

  /* ── Layout ── */
  --max-w:               1200px;
  --transition:          .22s cubic-bezier(.4,0,.2,1);
  --section-pad:         5.5rem;


  /* ══════════════════════════════════════════════════════
     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(--surface-mid);    /* "weiße" Karten = dunkel */
  --cb-surface-2:           var(--surface-bright);
  --cb-surface-3:           var(--surface-bright-2);
  --cb-surface-dark:        var(--surface-mid);

  /* Rahmen & Schatten */
  --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);

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

  /* Layout */
  --cb-max-w:               var(--max-w);
  --cb-transition:          var(--transition);
  --cb-section-pad:         var(--section-pad);
  --cb-pad-mobile:          1rem;

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

  /* Buttons */
  --cb-btn-radius:          var(--radius);
  --cb-btn-weight:          600;
  --cb-btn-spacing:         .01em;
  --cb-btn-transform:       none;
  --cb-btn-outline-color:        var(--accent);
  --cb-btn-outline-border:       var(--accent);
  --cb-btn-outline-hover-bg:     rgba(0,212,184,.15);
  --cb-btn-outline-hover-color:  var(--accent-bright);
  --cb-btn-outline-hover-border: var(--accent-bright);

  /* Header */
  --cb-header-bg:              var(--surface-dark);
  --cb-header-shadow:          0 1px 0 rgba(0,212,184,.15), 0 4px 24px rgba(0,0,0,.5);
  --cb-header-scrolled-bg:     rgba(6,11,16,.97);
  --cb-header-scrolled-shadow: 0 1px 0 rgba(0,212,184,.2), 0 8px 32px rgba(0,0,0,.6);
  --cb-header-pad-y:           .8rem;
  --cb-header-h:               70px;
  --cb-header-h-mobile:        60px;

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

  /* Navigation */
  --cb-nav-size:            .8rem;
  --cb-nav-weight:          500;
  --cb-nav-spacing:         .01em;
  --cb-nav-hover-bg:        rgba(0,212,184,.1);
  --cb-nav-active-bg:       rgba(0,212,184,.18);

  /* Hero */
  --cb-section-hero-bg:     var(--surface-dark);
  --cb-hero-min-h:          680px;
  --cb-hero-overlay:        linear-gradient(
    135deg,
    rgba(6,11,16,.98)   0%,
    rgba(6,11,16,.85)   40%,
    rgba(0,30,40,.7)    70%,
    rgba(0,212,184,.05) 100%
  );
  --cb-hero-grid-size:      40px;
  --cb-hero-h1-weight:      700;
  --cb-hero-h1-lh:          1.1;
  --cb-hero-h1-ls:          -.03em;
  --cb-hero-em-style:       normal;
  --cb-hero-em-color:       var(--accent);

  /* Hero-Eyebrow: Pill mit Cyan */
  --cb-eyebrow-pad:         .35rem 1rem;
  --cb-eyebrow-radius:      var(--radius);
  --cb-eyebrow-bg:          rgba(0,212,184,.12);
  --cb-eyebrow-border:      1px solid rgba(0,212,184,.4);

  /* Sektions-Hintergründe: Dark/Bright-Wechsel */
  --cb-section-leistungen-bg:   var(--surface-bright);   /* hell */
  --cb-section-ueber-bg:        var(--surface-mid);      /* dark */
  --cb-section-galerie-bg:      var(--surface-bright-2); /* hell */
  --cb-section-testimonials-bg: var(--surface-mid);      /* dark */
  --cb-section-team-bg:         var(--surface-bright);   /* hell */
  --cb-section-events-bg:       var(--surface-mid);      /* dark */
  --cb-section-news-bg:         var(--surface-bright);   /* hell */
  --cb-section-text-bg:         var(--surface-dark);     /* dunkel wie Header/Footer, für lange Rechtstexte */
  --cb-section-cta-bg:          var(--surface-dark);
  --cb-section-kontakt-bg:      var(--surface-dark);
  --cb-section-karussell-bg:    var(--surface-mid);
  --cb-section-faq-bg:          var(--surface-bright);   /* hell */
  --cb-section-usp-bg:          var(--surface-mid);      /* dark */
  --cb-section-oz-bg:           var(--surface-bright-2); /* hell */
  --cb-section-video-bg:        var(--surface-bright); /* hell */
  --cb-section-zauber-bg:       var(--surface-dark);
  --cb-section-kosmos-bg:        var(--surface-dark);
  --cb-section-tinte-bg:        var(--surface-dark);
  --cb-section-prozess-bg:        var(--surface-bright);
  --cb-section-lettern-bg:        var(--surface-mid);

  /* Galerie */
  --cb-galerie-overlay: linear-gradient(
    135deg, rgba(0,212,184,.4) 0%, rgba(6,11,16,.7) 100%
  );

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

  /* Kontakt & Formular */
  --cb-kontakt-icon-bg:     rgba(0,212,184,.12);
  --cb-kontakt-icon-border: rgba(0,212,184,.3);
  --cb-form-focus-border:   var(--border-focus);
  --cb-form-focus-glow:     rgba(0,212,184,.12);

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

  /* CTA-Overlay */
  --cb-cta-overlay:
    radial-gradient(ellipse at 10% 50%, rgba(0,212,184,.08) 0%, transparent 55%),
    radial-gradient(ellipse at 90% 50%, rgba(0,212,184,.05) 0%, transparent 50%);

  /* Hintergrundbild-Overlay */
  --cb-bg-img-overlay: linear-gradient(
    135deg, rgba(6,11,16,.92) 0%, rgba(0,30,40,.8) 100%
  );

  /* FAQ (auf heller Section) */
  --cb-faq-q-size:          .95rem;
  --cb-faq-q-weight:        600;
  --cb-faq-q-ls:            -.01em;
  --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(--heading-dark);

  /* USP */
  --cb-usp-title-size:      .95rem;

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

  /* Karussell */
  --cb-carousel-bg:         var(--surface-dark);
  --cb-carousel-caption-bg: linear-gradient(transparent, rgba(6,11,16,.9));
  --cb-carousel-btn-bg:     rgba(0,212,184,.15);
  --cb-carousel-pause-bg:   rgba(6,11,16,.6);

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

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

html, body { overflow-x: hidden; }
body {
  padding-top: var(--cb-header-h);
  background: var(--surface-mid);
  color: var(--text-bright);
}

/* Signature: Cyan-Glow-Linie unten am Header */
.site-header::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0,212,184,.6) 30%,
    rgba(0,212,184,.8) 50%,
    rgba(0,212,184,.6) 70%,
    transparent 100%
  );
}

/* Nav auf Dark */
.site-nav a { color: rgba(255,255,255,.6); }
.site-nav a:hover,
.site-nav a.active { color: var(--accent); }
.site-nav a.active { background: rgba(0,212,184,.12); }

/* Signature: Hero Cyan-Linie unten */
.section-hero::after {
  content: '';
  position: absolute; bottom: -1px; left: 0;
  width: 100%; height: 2px;
  background: linear-gradient(90deg,
    var(--accent) 0%,
    rgba(0,212,184,.3) 40%,
    transparent 70%
  );
  z-index: 2;
}

/* Hero-Raster sichtbarer */
.hero-grid {
  opacity: .35;
  background-image:
    linear-gradient(rgba(0,212,184,.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,184,.15) 1px, transparent 1px);
}
.hero-eyebrow { color: var(--accent-bright); }

/* Dunkle Sections: alle Texte hell */
.section-ueber-uns,
.section-testimonials,
.section-events,
.section-usp,
.section-karussell,
.section-cta,
.section-kontakt,
.section-text {
  color: var(--text-bright);
}
.section-ueber-uns h2, .section-ueber-uns h3,
.section-testimonials h2, .section-testimonials h3,
.section-events h2, .section-events h3,
.section-usp h2, .section-usp h3,
.section-karussell h2, .section-karussell h3,
.section-text h2, .section-text h3 { color: var(--heading-bright); }

/* Subheadline (cb-subhead) auf den dunklen Sektionen mit Untertitel hell-gedämpft.
   cta/kontakt sind bereits in blocks.css abgedeckt – hier fehlte karussell. */
.section-karussell .cb-heading-block .cb-subhead { color: var(--text-muted-bright); }

.section-ueber-uns .ueber-text p { color: var(--text-muted-bright); }
.section-ueber-uns .ueber-text p:first-of-type { color: var(--text-bright); }
.section-ueber-uns .ueber-stat span { color: var(--text-muted-bright); }
.section-ueber-uns .ueber-image::after { background: rgba(0,212,184,.08); }

.section-testimonials .testimonial-card {
  background: var(--surface-dark);
  border-color: var(--border-bright);
}
.section-testimonials .testimonial-text { color: var(--text-muted-bright); }
.section-testimonials .testimonial-author { color: var(--heading-bright); }

.section-events .event-item {
  background: var(--surface-dark);
  border-color: var(--border-bright);
}
.section-events .event-item strong { color: var(--heading-bright); }
.section-events .event-item p { color: var(--text-muted-bright); }

.section-usp .usp-item {
  background: var(--surface-dark);
  border-color: var(--border-bright);
}
.section-usp .usp-body strong { color: var(--heading-bright); }
.section-usp .usp-body p { color: var(--text-muted-bright); }

/* Section-Text (Rechtstexte etc.): dunkel wie Header/Footer, mit derselben
   Cyan-Glow-Signaturlinie wie unter dem Header, damit lange Textseiten nicht
   als isolierte, unstrukturierte schwarze Fläche wirken. */
.section-text { position: relative; }
.section-text::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0,212,184,.6) 30%,
    rgba(0,212,184,.8) 50%,
    rgba(0,212,184,.6) 70%,
    transparent 100%
  );
}
.section-text .text-content { color: var(--text-muted-bright); }
.section-text .text-content h1,
.section-text .text-content h2,
.section-text .text-content h3,
.section-text .text-content strong { color: var(--heading-bright); }
.section-text .text-content blockquote { color: var(--text-muted-bright); }

/* Helle Sections: dunkle Karten */
.section-leistungen .leistung-card {
  background: #ffffff;
  border-color: var(--surface-bright-2);
}
.section-leistungen .leistung-card h3 { color: var(--heading-dark); }
.section-leistungen .leistung-card p  { color: var(--text-muted-dark); }

.section-team .team-card {
  background: #ffffff;
  border-color: var(--surface-bright-2);
}
.section-team .team-card h3 { color: var(--heading-dark); }
.section-team .team-role    { color: var(--accent-dark); }
.section-team .team-card p  { color: var(--text-muted-dark); }
.section-team .team-placeholder {
  background: var(--surface-bright-2);
  border-color: var(--accent);
}

.section-faq .faq-q {
  background: #ffffff;
  color: var(--heading-dark);
}
.section-faq .faq-a {
  background: #ffffff;
  color: var(--text-muted-dark);
}
.section-faq .faq-item { border-color: var(--surface-bright-2); }

.section-oeffnungszeiten .oz-wrap {
  background: #ffffff;
  border-color: var(--surface-bright-2);
}
.section-oeffnungszeiten .oz-day  { color: var(--heading-dark); }
.section-oeffnungszeiten .oz-time { color: var(--text-muted-dark); }

/* Signature: Cyan-Glow auf Buttons */
.btn-primary {
  box-shadow: 0 0 0 0 var(--accent-glow);
  transition: all var(--transition), box-shadow .3s;
}
.btn-primary:hover {
  box-shadow: 0 0 24px var(--accent-glow), 0 4px 16px rgba(0,212,184,.3);
  transform: translateY(-2px);
}

.site-footer { border-top: 1px solid var(--border-bright); }
.footer-divider { background: var(--accent); }

.leistung-card.cb-stagger {
  opacity: 0; transform: translateY(22px);
  transition: opacity .5s, transform .5s;
}
.leistung-card.cb-stagger.cb-stagger-visible { opacity: 1; transform: none; }

@media (max-width: 768px) {
  :root { --section-pad: 3.5rem; }
}