/* =====================================================================
   STUDIO KALDER — Innenarchitektur & Raumdesign
   ENTERPRISE-DEMO der Web-Agentur „Vor Ort Online" (Enterprise-Upgrade
   ab Phase 4, 16.07.2026 — Dark-first-Redesign, siehe plan.md)
   Autor: @senior-dev (Alex) · Design: @ui-ux-designer (Mira)

   100% offline. Kein CDN, keine externen Fonts. Vendor-Libraries
   (GSAP/ScrollTrigger/Lenis/SplitType/Three.js) liegen lokal in
   assets/vendor/ (siehe assets/vendor/LIZENZEN.md).
   Alle Kommentare auf Deutsch (Lernzweck für den CEO).

   GLIEDERUNG
   1.  Design-Tokens (:root) — Dark-Token-Set, 1:1 aus
       _design-konzept-enterprise.md Abschn. 1
   2.  Reset & Grundlagen
   3.  Typografie-Helfer
   4.  Layout-Helfer (Container, Grid, Sektionen)
   5.  Signature: Eckwinkel (kalder-ecke) + Abschnitts-Kicker
   6.  Buttons
   7.  Demo-Balken
   8.  Header & Navigation (Desktop + Mobile)
   9.  Hero (Cinemagraph-Video + Three.js-Partikel/Licht-Layer)
       9b. Signature-Glow-Variante (Hero/Portal)
       9c. SplitType-Zeilen-Reveal-Modul (wiederverwendbar, alle Seiten)
       9d. Preloader (Eckwinkel + Prozent-Counter)
       9e. Portal-Moment (Phase 5, index — Effekt-Spec 4.2)
   10. Tilt-Karten (3D-Effekt 4b, unverändert — Content-Sektionen)
       10b. Bild-Reveal-Karten / Object Reveal (Phase 5, Effekt-Spec 4.3)
   11. Prozess-Band + Scroll-Tiefen-Parallax (3D-Effekt 4c, für ueber-uns.html reserviert)
       11b. Prozess-Band Skizze->Raum-Sequenz (Phase 5, index — Effekt-Spec 4.12)
   12. Material-Würfel (3D-Effekt 4d, unverändert)
   13. Flip-Galerie (projekte.html, unverändert)
   14. Bewertungen / Inhaberin-Split / sonstige Blöcke
       14b. Breaking-the-4th-Wall-Utility (Effekt-Spec 4.10)
   15. Leistungs-Blöcke & Preis-Tabelle
   16. Formular (kontakt.html)
       16b. Zahlen-Counter + Showreel-Teaser-Kachel (Phase 5, Effekt-Spec 4.9)
   17. CTA-Band
   18. Footer
   19. Mobile Sticky-Bottom-Bar
   20. Scroll-Eintritts-Animationen
   21. Responsive (Mobile-First Breakpoints)
   22. prefers-reduced-motion (globaler Schalter)
   23. Foto-Einbindung
   ===================================================================== */


/* =====================================================================
   0. SCHRIFTEN — lokal gehostet (DSGVO: KEIN Google-CDN, kein externer Request)
   Display: „Bodoni Moda" (Hochkontrast-Didone, Architektur-/Magazin-Wirkung)
   Fließtext: „Manrope" (ruhige geometrische Grotesk)
   Beides Variable Fonts (ein woff2 deckt 400–700 ab) → wenige, kleine Dateien.
   Lizenz: SIL Open Font License 1.1 (frei, auch kommerziell). Siehe assets/fonts/.
   ===================================================================== */
@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/bodoni-moda-latin.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;
}
@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/bodoni-moda-latinext.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;
}
@font-face {
  font-family: 'Bodoni Moda';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/bodoni-moda-italic-latin.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;
}
@font-face {
  font-family: 'Bodoni Moda';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/bodoni-moda-italic-latinext.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;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/manrope-latin.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;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/manrope-latinext.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;
}


/* =====================================================================
   1. DESIGN-TOKENS — CSS Custom Properties
   ENTERPRISE-UPGRADE (Phase 4, 16.07.2026): Dark-first-Umverteilung
   derselben 5 Markenfarben — 1:1 aus `_design-konzept-enterprise.md`
   Abschn. 1 übernommen. Anthrazit ist jetzt die "Galeriewand", auf der
   das ganze Haus steht (nicht mehr nur Header/Hero/Footer). Sand ist
   jetzt der seltene, kostbare Lichteinfall (max. 1-2 "helle Inseln"
   pro Seite). Alte Variablennamen (--c-bg/--c-weiss/--c-anthrazit/
   --c-anthrazit-2/--c-linie) entfallen ersatzlos — siehe Kontrastnachweis
   im Konzept-Dokument für alle Werte.
   ===================================================================== */
:root {
  /* --- FARBPALETTE — Grundtöne (Seiten-Basis, gestaffelt nach Tiefe) --- */
  --c-bg-tief:        #121110;  /* tiefste Ebene: Hero-/Portal-Vignette, Video-Scrim */
  --c-bg-dunkel:      #1c1b1a;  /* SEITEN-GRUNDTON — ersetzt Sand als Standard-Body-BG */
  --c-flaeche:        #242220;  /* erhöhte Fläche 1: Sektionswechsel, Panels */
  --c-flaeche-hoch:   #2c2a27;  /* erhöhte Fläche 2: Karten, Modals, Cube/Ring-Bühne */
  --c-flaeche-hover:  #363330;  /* Hover-/Active-Zustand auf Karten */
  --c-linie-dunkel:   #3a3833;  /* Trenner auf Dunkel (unverändert aus Vorgänger) */

  /* Akzent: Messing-Licht (Glanz, Glow, Interaktion — NIE Fließtext-Farbe) */
  --c-messing:        #b08d4f;  /* Linien, Icons, Signature, Kicker, Zahlen, Links ≥18px/bold */
  --c-messing-hell:   #e6d7b8;  /* helle Alternative für Inline-Links/Labels bei 16px normal */
  --c-messing-glueh:  rgba(176,141,79,.45);  /* Glow-Shadow-Basis (Buttons, Signature, Portal) */
  --c-messing-glueh-stark: rgba(176,141,79,.65); /* starker Glow: Portal-Moment, Hero-Partikel-Licht */

  /* Sand: jetzt SELTENER heller Kontraston (max. 1-2 Sektionen/Seite) */
  --c-sand:           #f4f1ea;  /* Zitat-Bänder, Bewertungs-Sektion, seltene helle Insel */
  --c-sand-2:         #faf8f3;  /* erhöhte Fläche AUF Sand (Karten in der hellen Insel) */

  /* Textfarben — je nach Untergrund (Dunkel ist jetzt der Normalfall!) */
  --c-text-invers:        #f4f1ea;  /* Standard-Fließtext auf Dunkel — 14.8:1 (AAA) */
  --c-text-invers-leicht: #b6b0a4;  /* Captions/Sekundärtext auf Dunkel — 6.4:1 (AA) */
  --c-text:               #1c1b1a;  /* Fließtext NUR in der seltenen Sand-Insel — 14.8:1 (AAA) */
  --c-text-leicht:        #6a655c;  /* Captions in der Sand-Insel — 5.0:1 (AA) */

  /* Scrim für Text-über-Bild/Video (Breaking-4th-Wall, Hero) */
  --c-scrim:          rgba(18,17,16,.55);
  --c-scrim-stark:    rgba(18,17,16,.78);

  /* Helfer (zählen nicht als Markenfarbe) */
  --c-fehler:  #e08a73;  /* Fehlermeldung auf Dunkel — 7.1:1 (AAA) */
  --c-erfolg:  #8fbf95;  /* Bestätigung auf Dunkel — 8.9:1 (AAA) */

  /* Three.js-Referenzwerte (Licht/Partikel-Layer, Hero) */
  --three-messing-hex:      0xb08d4f;
  --three-messing-hell-hex: 0xe6d7b8;
  --three-bg-tief-hex:      0x121110;

  /* --- TYPOGRAFIE — 2 lokal gehostete Schriften (siehe Abschnitt 0), kein CDN --- */
  /* Display: „Bodoni Moda" — Hochkontrast-Didone, architektonische Magazin-Wirkung.
     Fallback-Kette (Didot/Bodoni MT/Times) greift nur, falls woff2 nicht lädt. */
  --font-display: "Bodoni Moda", "Didot", "Bodoni MT", "Hoefler Text",
                  "Times New Roman", "Times", serif;
  /* Fließtext: „Manrope" — ruhige geometrische Grotesk; Systemschriften als Fallback. */
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;

  /* Fluid-Größenskala (clamp, Basis 16px — Body NIE unter 16px) */
  --text-xs:   clamp(0.75rem,  0.70rem + 0.25vw, 0.875rem);  /* 12–14: Labels, Demo-Hinweise */
  --text-sm:   clamp(0.875rem, 0.85rem + 0.20vw, 1rem);      /* 14–16: Captions */
  --text-base: clamp(1rem,     1.00rem + 0.20vw, 1.0625rem); /* 16–17: Body */
  --text-md:   clamp(1.125rem, 1.10rem + 0.30vw, 1.25rem);   /* 18–20: Lead */
  --text-lg:   clamp(1.25rem,  1.20rem + 0.50vw, 1.5rem);    /* 20–24: Karten-Headlines */
  --text-xl:   clamp(1.5rem,   1.35rem + 0.90vw, 2.125rem);  /* 24–34: Seiten-H2 */
  --text-2xl:  clamp(2rem,     1.70rem + 1.50vw, 3rem);      /* 32–48: Seiten-H1 */
  --text-3xl:  clamp(2.75rem,  2.20rem + 2.60vw, 4.5rem);    /* 44–72: Hero-Display */

  --leading-tight:  1.08;
  --leading-snug:   1.25;
  --leading-normal: 1.65;
  --leading-loose:  1.85;

  --track-tight: -0.02em;
  --track-wide:   0.18em;
  --track-wider:  0.32em;

  /* --- SPACING (4px-Basis) --- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  2.5rem;
  --space-8:  3rem;
  --space-9:  4rem;
  --space-10: 6rem;
  --space-11: 8rem;

  /* --- RADIUS (architektonisch zurückhaltend) --- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   14px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* --- SHADOWS (kühler Kernschatten + warmes Streulicht) --- */
  --shadow-sm:  0 1px 3px rgba(28,27,26,0.10);
  --shadow-md:  0 8px 24px rgba(28,27,26,0.12);
  --shadow-lg:  0 24px 60px rgba(28,27,26,0.20);
  --shadow-3d:  0 30px 60px -20px rgba(28,27,26,0.45);
  --shadow-messing: 0 0 28px rgba(176,141,79,0.30);

  /* --- 3D-SYSTEM-VARIABLEN (zentral steuerbar) --- */
  --perspektive:      1200px;
  --perspektive-nah:  800px;
  --tilt-max:         10deg;
  --parallax-tief:    -1;

  /* --- TRANSITIONS --- */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 150ms;
  --dur-mid:  300ms;
  --dur-slow: 500ms;

  /* Maximale Inhaltsbreite */
  --max-breite: 1200px;
}


/* =====================================================================
   2. RESET & GRUNDLAGEN
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);   /* nie unter 16px */
  line-height: var(--leading-normal);
  color: var(--c-text-invers);
  background: var(--c-bg-dunkel);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;            /* schützt vor horizontalem Scroll durch 3D-Transforms */
}

img, svg, canvas { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

ul { list-style: none; padding: 0; }

button { font: inherit; cursor: pointer; border: none; background: none; }

/* Skip-Link — Tastatur springt direkt zum Inhalt */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  background: var(--c-bg-dunkel);
  color: var(--c-text-invers);
  padding: var(--space-3) var(--space-5);
  border-radius: 0 0 var(--radius-md) 0;
}
.skip-link:focus { left: 0; }

/* Sichtbarer Fokusring überall (WCAG 2.4.11 — NIE outline:none ohne Ersatz) */
:focus-visible {
  outline: 2px solid var(--c-messing);
  outline-offset: 3px;
}

/* Bildschirmleser-only (für aria-live-Regionen etc.) */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}


/* =====================================================================
   3. TYPOGRAFIE-HELFER
   ===================================================================== */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--leading-snug);
  letter-spacing: var(--track-tight);
  color: var(--c-text-invers);
}

p { line-height: var(--leading-normal); }

.kicker {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--c-messing);
  margin-bottom: var(--space-2);
}
/* Kicker auf dunklem Grund braucht keinen anderen Wert — Messing trägt auf Anthrazit (5.1:1, ≥18px nicht nötig, da bold caps) */

.lead {
  font-size: var(--text-md);
  line-height: var(--leading-loose);
  color: var(--c-text-invers-leicht);
  max-width: 60ch;
}

.text-zentriert { text-align: center; }
.text-invers { color: var(--c-text-invers); }


/* =====================================================================
   4. LAYOUT-HELFER
   ===================================================================== */
.container {
  width: 100%;
  max-width: var(--max-breite);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.section {
  padding-block: var(--space-9);
}
@media (min-width: 768px) {
  .section { padding-block: var(--space-10); }
}

/* Dunkle Sektion (tiefste Ebene — Abgrenzung zur Standard-Seite) */
.section--dunkel {
  background: var(--c-bg-tief);
  color: var(--c-text-invers);
}
.section--dunkel h1,
.section--dunkel h2,
.section--dunkel h3 { color: var(--c-text-invers); }
.section--dunkel .lead { color: var(--c-text-invers-leicht); }

/* Ehemals "helle" Sektion — im Dark-First-Konzept eine leicht erhöhte
   Fläche (Sektionswechsel), NICHT die seltene Sand-Insel (die kommt
   gezielt erst in Phase 5/6 auf einzelnen Abschnitten zum Einsatz). */
.section--weiss {
  background: var(--c-flaeche);
  color: var(--c-text-invers);
}
.section--weiss h1,
.section--weiss h2,
.section--weiss h3 { color: var(--c-text-invers); }

/* Seltene helle Insel (Design-Konzept Abschn. 1: Sand ist jetzt "selten, kostbar",
   max. 1-2 Sektionen/Seite — auf index.html ausschließlich die Bewertungen).
   Kontrast-Korrektur: --c-messing erreicht auf --c-sand nur ~2,75:1 (fällt sogar
   für große Texte/UI durch, Guardrail-Nachweis nur für --c-text/--c-text-leicht
   auf Sand belegt) — deshalb hier gezielt auf die dunklen Textfarben umgeschaltet,
   statt die sonst überall geltende Messing-Akzentfarbe unverändert zu übernehmen. */
.section--sand {
  background: var(--c-sand);
  color: var(--c-text);
}
.section--sand h1,
.section--sand h2,
.section--sand h3 { color: var(--c-text); }
.section--sand .lead { color: var(--c-text-leicht); }
.section--sand .kicker,
.section--sand .bewertungs-sterne,
.section--sand .abschnitt-ecke { color: var(--c-text); }
.section--sand .bewertungs-karte {
  background: var(--c-sand-2);
  border-color: rgba(28,27,26,0.10);
}
.section--sand .bewertungs-autor,
.section--sand .bewertungs-hinweis { color: var(--c-text-leicht); }

/* Phase 6 (ueber-uns.html): Philosophie-Sektion wird laut Wireframe 3.4
   zur seltenen hellen Sand-Insel — dieselbe Kontrast-Korrektur wie bei den
   Bewertungen (--c-messing fällt auf --c-sand durch, siehe Guardrail
   Abschn. 1 im Design-Konzept), Zitat/Werte-Karten switchen auf dunkle
   Textfarben statt der sonst überall geltenden hellen. */
.section--sand .philo-zitat { color: var(--c-text); }
.section--sand .philo-quelle { color: var(--c-text-leicht); }
.section--sand .wert-karte {
  background: var(--c-sand-2);
  color: var(--c-text);
  border: 1px solid rgba(28,27,26,0.10);
}
.section--sand .wert-karte h3 { color: var(--c-text); }
.section--sand .wert-karte p { color: var(--c-text-leicht); }
.section--sand .wert-karte svg { stroke: var(--c-text); }

/* Responsive Grids */
.grid { display: grid; gap: var(--space-6); }
.grid-2 { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
.grid-3 { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 700px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 920px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}

.abschnitt-kopf {
  max-width: 60ch;
  margin-bottom: var(--space-8);
}
.abschnitt-kopf.text-zentriert { margin-inline: auto; }


/* =====================================================================
   5. SIGNATURE: ECKWINKEL (kalder-ecke)
   Vier feste Einsatzorte: Logo, vor H2, Kartenecken, Footer-Deko.
   „Zeichnen"-Effekt über IntersectionObserver-Klasse .ist-sichtbar.
   ===================================================================== */
.kalder-ecke { color: var(--c-messing); }

/* Block-Variante vor H2 */
.abschnitt-ecke {
  display: block;
  width: 34px; height: 34px;
  margin-bottom: var(--space-3);
  color: var(--c-messing);
}
.abschnitt-ecke.zentriert { margin-inline: auto; }

/* „Wird gezeichnet": Pfade als Strich animieren, sobald sichtbar */
.abschnitt-ecke path {
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  transition: stroke-dashoffset var(--dur-slow) var(--ease-out);
}
.ist-sichtbar .abschnitt-ecke path { stroke-dashoffset: 0; }

/* Dekor-Ecken um Karten (oben-links + unten-rechts) */
.eck-deko {
  position: absolute;
  width: 26px; height: 26px;
  color: var(--c-messing);
  opacity: 0.7;
  pointer-events: none;
}
.eck-deko--tl { top: 10px; left: 10px; }
.eck-deko--br { bottom: 10px; right: 10px; transform: rotate(180deg); }


/* =====================================================================
   6. BUTTONS
   ===================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;            /* Touch-Target ≥44px */
  padding: 0.7rem 1.6rem;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: transform var(--dur-mid) var(--ease-spring),
              box-shadow var(--dur-mid) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}

/* Primär: Messing-Pill, dunkler Text (Kontrastnachweis Abschn. 1: 5.1:1 AA) */
.btn-primaer {
  background: var(--c-messing);
  color: var(--c-bg-dunkel);
  box-shadow: var(--shadow-sm);
}
.btn-primaer:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md), var(--shadow-messing);
}
.btn-primaer:active { transform: translateY(-1px); transition-duration: var(--dur-fast); }

/* Ghost auf dunkel: Sand-Rahmen */
.btn-ghost {
  background: transparent;
  color: var(--c-text-invers);
  border: 1.5px solid var(--c-text-invers-leicht);
}
.btn-ghost:hover {
  transform: translateY(-3px);
  border-color: var(--c-messing);
  color: var(--c-messing);
}

/* Ghost "hell" (Name aus Vorgänger-Konzept beibehalten, Klasse bleibt im
   HTML unverändert) — im Dark-First-Konzept gibt es kaum noch echte
   helle Flächen, darum verhält sich diese Variante jetzt wie .btn-ghost.
   OHNE diese Anpassung wäre der Button (dunkler Rahmen + dunkler Text)
   auf der jetzt dunklen Standardfläche unsichtbar (Kontrastfehler). */
.btn-ghost-hell {
  background: transparent;
  color: var(--c-text-invers);
  border: 1.5px solid var(--c-text-invers-leicht);
}
.btn-ghost-hell:hover {
  transform: translateY(-3px);
  border-color: var(--c-messing);
  color: var(--c-messing);
}

/* Text-Link mit Pfeil */
.btn-text {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  font-weight: 600;
  color: var(--c-text-invers);
  border-bottom: 2px solid transparent;
}
.btn-text::after { content: "→"; transition: transform var(--dur-fast) var(--ease-out); }
.btn-text:hover { color: var(--c-messing); }
.btn-text:hover::after { transform: translateX(4px); }


/* =====================================================================
   7. DEMO-BALKEN (ganz oben, auf jeder Seite identisch)
   ===================================================================== */
.demo-balken {
  background: var(--c-bg-dunkel);
  color: var(--c-text-invers);
  font-size: var(--text-xs);
  text-align: center;
  padding: 6px var(--space-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-1) var(--space-4);
  border-bottom: 1px solid var(--c-linie-dunkel);
}
.demo-balken a {
  color: var(--c-messing);
  font-weight: 600;
  border-bottom: 1px solid transparent;
}
.demo-balken a:hover { border-bottom-color: var(--c-messing); }


/* =====================================================================
   8. HEADER & NAVIGATION
   Transparent über Hero, auf Scroll Anthrazit + blur (Klasse .ist-gescrollt)
   ===================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  transition: background var(--dur-mid) var(--ease-out),
              box-shadow var(--dur-mid) var(--ease-out),
              backdrop-filter var(--dur-mid) var(--ease-out);
}
/* Standard (nicht gescrollt): leicht abgesetzt, damit Nav auf hellem Seitenkopf lesbar bleibt */
.site-header { background: rgba(28,27,26,0.0); }

/* Über dunklem Hero: weiße Schrift schon transparent gut lesbar.
   Seiten OHNE dunklen Hero bekommen .header--solid (s. u.). */
.site-header.ist-gescrollt {
  background: rgba(28,27,26,0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-md);
}

/* Auf Unterseiten ohne dunklen Hero: Header sofort solide Anthrazit */
.header--solid {
  background: rgba(28,27,26,0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-sm);
}

.header-inner {
  max-width: var(--max-breite);
  margin-inline: auto;
  padding: var(--space-4) var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}

/* Logo */
.logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.logo-ecke { width: 22px; height: 22px; flex-shrink: 0; }
.logo-text { display: flex; flex-direction: column; line-height: 1.1; }
.logo-name {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: var(--track-wider);
  color: var(--c-text-invers);
}
.logo-claim {
  font-size: var(--text-xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--c-text-invers-leicht);
}

/* Haupt-Navigation (Desktop) */
.haupt-nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}
.nav-links {
  display: none;       /* Mobile-First: erst ab Breakpoint sichtbar */
  align-items: center;
  gap: var(--space-5);
}
.nav-links a {
  position: relative;
  font-size: var(--text-sm);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--c-text-invers);
  padding-block: var(--space-2);
}
/* Nav-Unterstrich wächst per scaleX von links ein */
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--c-messing);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-fast) var(--ease-out);
}
.nav-links a:hover::after,
.nav-links a.aktiv::after { transform: scaleX(1); }
.nav-links a.aktiv { color: var(--c-messing); }

.nav-cta { display: none; }
@media (min-width: 920px) {
  .nav-links { display: flex; }
  .nav-cta { display: inline-flex; }
}

/* Hamburger (Mobile) */
.hamburger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;   /* Touch-Target */
  padding: 10px;
}
.hamburger span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--c-text-invers);
  transition: transform var(--dur-fast) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (min-width: 920px) {
  .hamburger { display: none; }
}

/* Mobile Slide-down Overlay */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--c-bg-dunkel);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-5);
  padding: var(--space-8);
  transform: translateY(-100%);
  transition: transform var(--dur-mid) var(--ease-out);
  visibility: hidden;
}
.mobile-nav.offen { transform: translateY(0); visibility: visible; }
.mobile-nav a {
  font-size: var(--text-md);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--c-text-invers);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--c-linie-dunkel);
}
.mobile-nav a.aktiv { color: var(--c-messing); }
.mobile-nav .btn { margin-top: var(--space-4); }
@media (min-width: 920px) {
  .mobile-nav { display: none; }
}


/* =====================================================================
   9. HERO — Cinemagraph-Video + Three.js-Partikel/Licht-Layer
   (Enterprise-Upgrade Phase 4, Wow-Moment 1 auf index, Effekt-Spec 4.1)
   Ebenen (unten -> oben): Video -> Three.js-Canvas (Lichtstaub) ->
   Scrim (Lesbarkeit) -> Text. Kein Pinning, nur transform/opacity.
   ===================================================================== */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  background: var(--c-bg-tief);   /* tiefste Ebene laut Token-Set Abschn. 1 */
  color: var(--c-text-invers);
  overflow: hidden;
}

/* Ebene 1: Cinemagraph-Video (Loft-Loop), autoplay per JS nach reduced-motion-Check */
.hero-video-ebene { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Ebene 2: Three.js-Bühne — schwebender Lichtstaub (Partikel-Cap 1000, DPR-Cap 1.5) */
.hero-partikel-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Ebene 3: Scrim — sichert WCAG-Kontrast des Texts über Video/Partikeln */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, var(--c-scrim-stark) 0%, var(--c-scrim) 45%, var(--c-scrim-stark) 100%);
  pointer-events: none;
}

/* Ebene 4: Text — immer über allem */
.hero-inner {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: var(--max-breite);
  margin-inline: auto;
  padding: var(--space-11) var(--space-5) var(--space-9);
  display: grid;
  gap: var(--space-6);
}
@media (min-width: 920px) {
  .hero-inner { grid-template-columns: minmax(0, 620px) 1fr; align-items: center; }
}

.hero-content { max-width: 38ch; }

/* Signature Glow-Eckwinkel — einziger Einsatzort neben dem Portal-Moment (Abschn. 2 Konzept) */
.hero-signatur { margin-bottom: var(--space-4); }
.hero-signatur .kalder-ecke-glow { width: 30px; height: 30px; }

.hero-kicker { color: var(--c-messing); }
.hero h1 {
  font-family: var(--font-display);
  font-weight: 500;      /* Guardrail: nie 400 auf Volldunkel (Bodoni-Halation, Abschn. 1) */
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  color: var(--c-text-invers);
  margin-block: var(--space-4) var(--space-5);
}
.hero-lead {
  font-size: var(--text-md);
  line-height: var(--leading-loose);
  color: var(--c-text-invers-leicht);
  margin-bottom: var(--space-5);
}

.hero-bewertung {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--c-text-invers);
  margin-bottom: var(--space-6);
}
.sterne { color: var(--c-messing); letter-spacing: 2px; }

.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* Scroll-Indikator (dezent, Messing) — markiert das Ende des Hero-Bereichs */
.hero-scroll-indikator {
  position: absolute;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: var(--c-messing-hell);
  font-size: var(--text-xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}
.hero-scroll-linie {
  width: 1px; height: 34px;
  background: linear-gradient(to bottom, var(--c-messing), transparent);
  animation: hero-scroll-puls 1.8s ease-in-out infinite;
}
@keyframes hero-scroll-puls {
  0%, 100% { opacity: 0.35; transform: scaleY(0.7); transform-origin: top; }
  50%      { opacity: 1;    transform: scaleY(1);   transform-origin: top; }
}


/* =====================================================================
   9b. SIGNATURE-GLOW-VARIANTE (Enterprise-Konzept Abschn. 2)
   Nur Hero + künftiger Portal-Moment (Phase 5) — überall sonst bleibt
   die ruhige „Zeichnen"-Variante (.abschnitt-ecke), sonst Inflation.
   ===================================================================== */
.kalder-ecke-glow { color: var(--c-messing); }
.kalder-ecke-glow path {
  stroke: var(--c-messing);
  filter: drop-shadow(0 0 6px var(--c-messing-glueh));
}
.kalder-ecke-glow.ist-sichtbar path {
  animation: ecke-puls 2.6s ease-in-out infinite;
}
@keyframes ecke-puls {
  0%, 100% { filter: drop-shadow(0 0 6px var(--c-messing-glueh)); }
  50%      { filter: drop-shadow(0 0 14px var(--c-messing-glueh-stark)); }
}
@media (prefers-reduced-motion: reduce) {
  .kalder-ecke-glow path { animation: none; filter: drop-shadow(0 0 6px var(--c-messing-glueh)); }
}


/* =====================================================================
   9c. SPLITTYPE-ZEILEN-REVEAL-MODUL (Enterprise-Konzept Abschn. 4.11)
   Wiederverwendbar auf jedem [data-reveal-zeilen]-Element (Kicker, H1,
   Lead, künftige Überschriften weiterer Seiten). JS wrappt jede von
   SplitType erzeugte .line in eine .zeile-maske (overflow:hidden) und
   animiert die Zeile per GSAP aus der Maske heraus nach oben.
   reduced-motion: SplitType wird gar nicht erst initialisiert — Original-
   Text bleibt unverändert und sofort sichtbar (siehe assets/js/enterprise-core.js).
   ===================================================================== */
.zeile-maske { display: block; overflow: hidden; }
[data-reveal-zeilen] .line { display: block; will-change: transform; }


/* =====================================================================
   9d. PRELOADER (Eckwinkel + Prozent-Counter, max. 1-2s)
   Volle Sicherheit gegen "hängenbleiben": CSS-Notausstieg per Keyframe
   nach 2,5s, unabhängig vom JS (siehe assets/js/enterprise-core.js).
   ===================================================================== */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  background: var(--c-bg-tief);
  transition: opacity 320ms var(--ease-out);
  animation: preloader-sicherheitsnetz 0s linear 2.5s forwards;
}
.preloader.ausgeblendet { opacity: 0; pointer-events: none; }
@keyframes preloader-sicherheitsnetz {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}
.preloader-ecke {
  width: 64px; height: 64px;
  color: var(--c-messing);
}
.preloader-ecke path {
  stroke-dasharray: 46;
  stroke-dashoffset: 46;
  transition: stroke-dashoffset 1.2s var(--ease-out);
}
.preloader.aktiv .preloader-ecke path { stroke-dashoffset: 0; }
.preloader-prozent {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  letter-spacing: var(--track-wide);
  color: var(--c-text-invers-leicht);
  font-variant-numeric: tabular-nums;
}
/* Scroll-Sperre, solange der Preloader läuft (verhindert Sprünge) */
html.preloader-aktiv,
html.preloader-aktiv body { overflow: hidden; height: 100%; }
@media (prefers-reduced-motion: reduce) {
  /* Kein Flash: Preloader wird nie sichtbar, kein Zeichnen/Zählen */
  .preloader { display: none; }
  html.preloader-aktiv,
  html.preloader-aktiv body { overflow: auto; height: auto; }
}


/* =====================================================================
   9e. PORTAL-MOMENT (Enterprise-Konzept Abschn. 4.2, Phase 5 — index)
   Türrahmen-Silhouette (4 vergrößerte Eckwinkel) über einer "Video-Echo"-
   Ebene (Standbild statt Video — Perf-Budget). ScrollTrigger scrubt
   scale/opacity, siehe assets/js/index-enterprise.js. Rein dekorativ.
   ===================================================================== */
.portal-sektion {
  position: relative;
  min-height: clamp(340px, 58vh, 620px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--c-bg-tief);
}
.portal-video-echo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.30;
  filter: brightness(0.5) saturate(0.85);
}
.portal-rahmen-buehne {
  position: relative;
  z-index: 1;
  width: min(62vw, 520px);
  aspect-ratio: 1;
}
.portal-rahmen {
  width: 100%;
  height: 100%;
  color: var(--c-messing);
  filter: drop-shadow(0 0 10px var(--c-messing-glueh));
  transform-origin: center;
  will-change: transform, opacity;
}
@media (prefers-reduced-motion: reduce) {
  /* Statischer Deko-Zustand laut Spec: Rahmen fix bei Opacity 0.4, kein Video-Echo */
  .portal-rahmen { opacity: 0.4; }
  .portal-video-echo { display: none; }
}


/* =====================================================================
   10. TILT-KARTEN (3D-Effekt 4b)
   Container = Perspektive-Bühne; Karte kippt zur Maus, Glanz folgt Cursor.
   ===================================================================== */
.tilt-buehne { perspective: var(--perspektive); }

.tilt-karte {
  position: relative;
  background: var(--c-flaeche-hoch);
  border: 1px solid var(--c-linie-dunkel);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transform-style: preserve-3d;
  /* --rx/--ry werden per JS gesetzt; Default 0 */
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-mid) var(--ease-out);
  will-change: transform;
}
/* Glanz-Reflex: radialer Lichtschein folgt dem Cursor (--mx/--my per JS) */
.tilt-karte::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
              rgba(255,255,255,0.18), transparent 45%);
  opacity: 0;
  transition: opacity var(--dur-mid) var(--ease-out);
}
.tilt-karte.tilt-aktiv::before { opacity: 1; }

/* Fokus/Hover ohne Tilt (Tastatur, Touch): ruhiger Schatten-Lift */
.tilt-karte:focus-within,
.tilt-karte:hover { box-shadow: var(--shadow-3d); }

/* Bildfläche der Karte (CSS-Gradient statt Foto) */
.karte-bild {
  height: 180px;
  position: relative;
  background: linear-gradient(135deg, var(--c-flaeche-hoch), var(--c-messing));
}
.karte-bild--konzept   { background: linear-gradient(135deg, #2c2a27, #6a655c); }
.karte-bild--viz       { background: linear-gradient(135deg, #1c1b1a, #b08d4f); }
.karte-bild--komplett  { background: linear-gradient(135deg, #3a3833, #e6d7b8); }
.karte-bild--material  { background: linear-gradient(135deg, #6a655c, #e6d7b8); }
.karte-bild--licht     { background: linear-gradient(135deg, #1c1b1a, #e6d7b8 140%); }

/* Icon-Plakette auf der Bildfläche, schwebt leicht (translateZ) */
.karte-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(244,241,234,0.85);
  transform: translateZ(40px);
}

.karte-body {
  position: relative;
  z-index: 2;
  padding: var(--space-5);
  transform: translateZ(20px);     /* Inhalt schwebt leicht über der Karte */
}
.karte-badge {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--c-messing);
  background: var(--c-messing-hell);
  border-radius: var(--radius-pill);
  padding: 4px 12px;
  margin-bottom: var(--space-3);
}
.karte-titel { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.karte-text { color: var(--c-text-invers-leicht); margin-bottom: var(--space-4); }
.karte-preis {
  font-weight: 700;
  color: var(--c-messing-hell);
}


/* =====================================================================
   10b. BILD-REVEAL-KARTEN (Object Reveal, Enterprise-Konzept Abschn. 4.3)
   Phase 5 — ersetzt die Tilt-Karten in Leistungs-Preview + Projekt-Teaser.
   Zwei <img>-Ebenen übereinander, obere ("nachher") crossfadet per reinem
   CSS bei Hover/Fokus — kein JS nötig.
   ===================================================================== */
.reveal-karte {
  position: relative;
  background: var(--c-flaeche-hoch);
  border: 1px solid var(--c-linie-dunkel);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-mid) var(--ease-out),
              transform var(--dur-mid) var(--ease-out);
}
.reveal-karte:hover,
.reveal-karte:focus-within { box-shadow: var(--shadow-3d); transform: translateY(-4px); }

.bild-reveal { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.bild-reveal img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bild-reveal .nachher { opacity: 0; transition: opacity var(--dur-slow) var(--ease-out); }
.reveal-karte:hover .bild-reveal .nachher,
.reveal-karte:focus-within .bild-reveal .nachher { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  /* Zustand wechselt sofort statt crossfade — funktional identisch, kein Bewegungsreiz */
  .bild-reveal .nachher { transition: none; }
  .reveal-karte { transition: none; }
}


/* =====================================================================
   11. PROZESS-BAND + SCROLL-TIEFEN-PARALLAX (3D-Effekt 4c)
   Pure-CSS-Weg: perspective-Container, Ebenen mit translateZ + scale.
   HINWEIS (Phase 5): Auf index.html wird der Prozess-Band-Slot jetzt
   durch die Skizze->Raum Scroll-Sequenz ersetzt (Abschn. 11b weiter
   unten) — dieser Parallax-Block bleibt für die Wiederverwendung auf
   ueber-uns.html (Phase 6, Wireframe 3.4 "Atelier-Einblicke") bestehen.
   ===================================================================== */
.parallax-szene {
  position: relative;
  perspective: var(--perspektive);
  perspective-origin: 50% 30%;
  overflow: hidden;
  background: var(--c-bg-tief);
  color: var(--c-text-invers);
}

/* Hintere Deko-Ebene (Wandblock + Maßlinie), parallaxt langsamer */
.parallax-ebene-fern {
  position: absolute;
  inset: 0;
  z-index: 0;
  transform: translateZ(-3px) scale(1.4);
  background:
    linear-gradient(180deg, transparent 60%, rgba(176,141,79,0.10)),
    radial-gradient(50% 60% at 80% 20%, rgba(176,141,79,0.12), transparent 70%);
  pointer-events: none;
}
.parallax-ebene-mid {
  position: absolute;
  inset: 0;
  z-index: 1;
  transform: translateZ(-1px) scale(1.13);
  pointer-events: none;
}
/* Vordergrund: voll lesbarer Inhalt */
.parallax-ebene-nah {
  position: relative;
  z-index: 2;
  transform: translateZ(0);
}

/* Prozess-Schritte mit verbindender Maßlinie. Jetzt ein <ol> (Phase 5,
   semantisch korrekt für einen nummerierten Ablauf) — list-style/padding
   explizit zurückgesetzt, da der globale Reset nur <ul> abdeckt. */
.prozess-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  margin-top: var(--space-8);
  list-style: none;
  padding-left: 0;
}
@media (min-width: 760px) {
  .prozess-grid { grid-template-columns: repeat(4, 1fr); }
}
.prozess-schritt { position: relative; }
.prozess-nr {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--c-messing);
  line-height: 1;
  margin-bottom: var(--space-3);
}
.prozess-schritt h3 { color: var(--c-text-invers); font-size: var(--text-lg); margin-bottom: var(--space-2); }
.prozess-schritt p { color: var(--c-text-invers-leicht); font-size: var(--text-sm); }
/* Maßlinie zwischen den Schritten (nur Desktop) */
@media (min-width: 760px) {
  .prozess-schritt:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 14px; right: calc(var(--space-6) / -2);
    width: var(--space-6); height: 1px;
    background: var(--c-messing);
    opacity: 0.5;
  }
}


/* =====================================================================
   11b. PROZESS-BAND: SKIZZE->RAUM SCROLL-SEQUENZ (Enterprise-Konzept
   Abschn. 4.12, Phase 5 — index). 4 übereinanderliegende Ebenen, Opacity
   per ScrollTrigger-Progress-Callback überblendet (assets/js/index-enterprise.js).
   Reine aspect-ratio-Bühne -> kein CLS, unabhängig vom Bildladen.
   ===================================================================== */
.prozess-buehne {
  position: relative;
  max-width: 900px;
  margin: var(--space-8) auto 0;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--c-bg-tief);
}
.prozess-frame {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.prozess-frame:first-child { opacity: 1; } /* Startzustand, falls JS nicht lädt: Skizze bleibt sichtbar */
.prozess-frame img { width: 100%; height: 100%; object-fit: cover; }
.prozess-linien { width: 100%; height: 100%; }
.prozess-mass-label { font: 600 14px var(--font-body); fill: var(--c-text-invers-leicht); }
.prozess-frame-label {
  position: absolute;
  left: var(--space-4);
  bottom: var(--space-4);
  z-index: 1;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--c-text-invers);
  background: rgba(18,17,16,0.55);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
}


/* =====================================================================
   12. MATERIAL-WÜRFEL (3D-Effekt 4d) — CSS 3D-Cube + Buttons + aria-live
   ===================================================================== */
.cube-block {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 820px) {
  .cube-block { grid-template-columns: 1fr 1fr; }
}

.cube-szene {
  perspective: var(--perspektive-nah);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 360px;
  touch-action: none;            /* Drag soll nicht scrollen */
}
.cube {
  position: relative;
  width: 240px; height: 240px;
  transform-style: preserve-3d;
  /* --cx/--cy per JS gesetzt; Default Ruhe-Ecke */
  transform: rotateX(var(--cx, -20deg)) rotateY(var(--cy, 30deg));
  transition: transform var(--dur-slow) var(--ease-spring);
  cursor: grab;
}
.cube.zieht { cursor: grabbing; transition: none; }   /* während Drag keine Transition */

.cube-face {
  position: absolute;
  inset: 0;
  width: 240px; height: 240px;
  backface-visibility: hidden;
  border: 2px solid rgba(176,141,79,0.45);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: flex-end;
  padding: var(--space-3);
  color: var(--c-bg-dunkel);
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(255,255,255,0.4);
}
/* Jede Fläche eine Materialwelt (Gradient + dezente Textur via repeating-linear) */
.face-front  { transform: translateZ(120px);
  background:
    repeating-linear-gradient(90deg, rgba(120,80,40,0.18) 0 2px, transparent 2px 9px),
    linear-gradient(135deg, #c9a063, #8a5a2b); }                 /* Eiche natur */
.face-back   { transform: rotateY(180deg) translateZ(120px);
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 7px),
    linear-gradient(135deg, #b7b2aa, #7d776e); }                 /* Sichtbeton */
.face-right  { transform: rotateY(90deg) translateZ(120px);
  background: linear-gradient(135deg, #e6d7b8, #c2a878); }       /* Samt-Sand */
.face-left   { transform: rotateY(-90deg) translateZ(120px);
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,0.25) 0 1px, transparent 1px 14px),
    linear-gradient(135deg, #f4f1ea, #cfcabf); }                 /* Marmor */
.face-top    { transform: rotateX(90deg) translateZ(120px);
  background: linear-gradient(135deg, #d8b878, #b08d4f); color: var(--c-bg-dunkel); }  /* Messing */
.face-bottom { transform: rotateX(-90deg) translateZ(120px);
  background:
    repeating-linear-gradient(45deg, rgba(120,110,90,0.12) 0 1px, transparent 1px 6px),
    linear-gradient(135deg, #cabfa3, #9a8f76); }                 /* Leinen */

.cube-steuerung {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.cube-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.cube-btn {
  min-height: 44px;
  padding: 0.6rem 1.2rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--c-linie-dunkel);
  background: var(--c-flaeche-hoch);
  color: var(--c-text-invers);
  font-weight: 600;
  font-size: var(--text-sm);
  transition: transform var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.cube-btn[aria-pressed="true"] {
  background: var(--c-messing);
  border-color: var(--c-messing);
  color: var(--c-bg-dunkel);
}
.cube-btn.puls { animation: cube-puls var(--dur-mid) var(--ease-spring); }
@keyframes cube-puls { 0%{transform:scale(1);} 50%{transform:scale(1.08);} 100%{transform:scale(1);} }

.cube-material {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--c-text-invers);
}


/* =====================================================================
   13. FLIP-GALERIE (projekte.html) — CSS rotateY 180°, fokussierbar
   ===================================================================== */
.galerie-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .galerie-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .galerie-grid { grid-template-columns: repeat(3, 1fr); } }

.flip-karte {
  perspective: var(--perspektive);
  background: transparent;
  border: none;
  padding: 0;
  width: 100%;
  text-align: left;
  border-radius: var(--radius-lg);
}
.flip-inner {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  transform-style: preserve-3d;
  transition: transform var(--dur-slow) var(--ease-out);
}
/* Klick togglet .geflippt (JS); zusätzlich Tastatur über <button>-Wrapper */
.flip-karte.geflippt .flip-inner { transform: rotateY(180deg); }

.flip-seite {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-5);
}
/* Vorderseite = „Vorher" (Rohraum, kühl) */
.flip-vorne {
  background: linear-gradient(160deg, #2c2a27, #4a4640);
  color: var(--c-text-invers);
}
/* Rückseite = „Nachher" (gestaltet, warm) */
.flip-hinten {
  transform: rotateY(180deg);
  background: linear-gradient(160deg, #b08d4f, #e6d7b8);
  color: var(--c-bg-dunkel);
}
.flip-label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  opacity: 0.85;
}
.flip-titel { font-family: var(--font-display); font-size: var(--text-lg); margin-top: var(--space-1); }
.flip-hinweis {
  position: absolute;
  top: var(--space-3); right: var(--space-3);
  font-size: var(--text-xs);
  background: rgba(0,0,0,0.25);
  color: #fff;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}
.flip-hinten .flip-hinweis { background: rgba(28,27,26,0.18); color: var(--c-bg-dunkel); }

/* Filter-Pills */
.filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-7);
}
.filter-pill {
  min-height: 44px;
  padding: 0.5rem 1.2rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--c-linie-dunkel);
  background: var(--c-flaeche-hoch);
  color: var(--c-text-invers);
  font-weight: 600;
  font-size: var(--text-sm);
}
.filter-pill[aria-pressed="true"] {
  background: var(--c-bg-dunkel);
  border-color: var(--c-bg-dunkel);
  color: var(--c-text-invers);
}
.galerie-item.versteckt { display: none; }


/* =====================================================================
   14. BEWERTUNGEN / INHABERIN-SPLIT
   ===================================================================== */
.bewertungs-karte {
  background: var(--c-flaeche-hoch);
  border: 1px solid var(--c-linie-dunkel);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}
.bewertungs-sterne { color: var(--c-messing); letter-spacing: 2px; margin-bottom: var(--space-3); }
.bewertungs-text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-md);
  line-height: var(--leading-loose);
  margin-bottom: var(--space-4);
}
.bewertungs-autor { font-size: var(--text-sm); color: var(--c-text-invers-leicht); font-weight: 600; }
.bewertungs-hinweis {
  text-align: center;
  font-size: var(--text-xs);
  color: var(--c-text-invers-leicht);
  margin-top: var(--space-6);
}

.inhaberin-split {
  display: grid;
  gap: var(--space-7);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 820px) {
  .inhaberin-split { grid-template-columns: 0.9fr 1.1fr; }
}
.inhaberin-bild {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, #2c2a27, #6a655c 70%, #b08d4f);
  display: flex;
  align-items: flex-end;
  padding: var(--space-5);
  overflow: hidden;
}
.inhaberin-bild-zitat {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--c-text-invers);
}

/* =====================================================================
   14b. BREAKING THE 4TH WALL — Freisteller-Überstand (Enterprise-Konzept
   Abschn. 4.10). Erlaubt Freisteller-Bildern, per clamp()-Überstand über
   die Sektionsgrenze (hier: das eigene Padding der Sektion) hinauszuragen.
   Reserved-Space-Guardrail: Die negative Margin ist Teil des initialen
   Layouts (nicht nachträglich per JS injiziert) -> kein CLS, weil das
   Grid die Zeilenhöhe schon beim ersten Render inkl. Margin-Box berechnet.
   ===================================================================== */
.freisteller-ueberstand {
  margin-block: clamp(-3rem, -6vw, -1rem);
  position: relative;
  z-index: 2;
}

/* Werte-Karten (über-uns / index) */
.wert-karte {
  background: var(--c-flaeche-hoch);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  color: var(--c-text-invers);
}
.wert-karte h3 { color: var(--c-text-invers); font-size: var(--text-lg); margin-block: var(--space-3) var(--space-2); }
.wert-karte p { color: var(--c-text-invers-leicht); }

/* Großes Philosophie-Zitat */
.philo-zitat {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--c-text-invers);
  max-width: 28ch;
  margin-inline: auto;
  text-align: center;
}
.philo-quelle {
  display: block;
  margin-top: var(--space-5);
  font-family: var(--font-body);
  font-style: normal;
  font-size: var(--text-sm);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--c-messing);
}

/* Atelier-Einblicke: horizontaler Scroller */
.atelier-scroll {
  display: flex;
  gap: var(--space-5);
  overflow-x: auto;
  padding-bottom: var(--space-4);
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.atelier-flaeche {
  flex: 0 0 280px;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  scroll-snap-align: start;
  position: relative;
  border: 1px solid var(--c-linie-dunkel);
}
.atelier-flaeche:nth-child(1){ background: linear-gradient(160deg,#2c2a27,#6a655c); }
.atelier-flaeche:nth-child(2){ background: linear-gradient(160deg,#e6d7b8,#b08d4f); }
.atelier-flaeche:nth-child(3){ background: linear-gradient(160deg,#3a3833,#1c1b1a); }
.atelier-flaeche:nth-child(4){ background: linear-gradient(160deg,#cfcabf,#f4f1ea); }
.atelier-flaeche:nth-child(5){ background: linear-gradient(160deg,#b08d4f,#2c2a27); }

/* Phase 6 — leichte Scroll-Tiefen-Parallax auf dem Atelier-Scroller
   (Enterprise-Konzept Abschn. 4c, Pure-CSS-Weg 1: der scrollende
   Container selbst trägt `perspective`, Kacheln bekommen ein kleines
   `translateZ`. Beim horizontalen Scrollen verschieben sich weiter
   zurückgesetzte Kacheln optisch minimal langsamer — reine Bild-Kacheln,
   kein Text betroffen, daher entfällt die Lesbarkeits-Guardrail aus 4c
   hier komplett). Tiefenwerte bewusst sehr klein (max. -2px bei
   --perspektive: 1200px), damit nichts sichtbar "springt". */
.atelier-scroll {
  perspective: var(--perspektive);
  transform-style: preserve-3d;
}
.atelier-flaeche:nth-child(3n+2) { transform: translateZ(-1px) scale(1.004); }
.atelier-flaeche:nth-child(3n)   { transform: translateZ(-2px) scale(1.008); }

@media (prefers-reduced-motion: reduce) {
  /* Gleiche Selektor-Spezifität wie oben nötig (nth-child schlägt sonst eine
     einfache .atelier-flaeche-Regel unabhängig von der Quellreihenfolge) —
     sonst bleibt der Parallax-Versatz unter reduced-motion fälschlich aktiv. */
  .atelier-flaeche,
  .atelier-flaeche:nth-child(3n+2),
  .atelier-flaeche:nth-child(3n) { transform: translateZ(0); }
}


/* =====================================================================
   15. LEISTUNGS-BLÖCKE & PREIS-TABELLE
   ===================================================================== */
.leistung-block {
  display: grid;
  gap: var(--space-7);
  grid-template-columns: 1fr;
  align-items: center;
  padding-block: var(--space-8);
  border-bottom: 1px solid var(--c-linie-dunkel);
}
@media (min-width: 820px) {
  .leistung-block { grid-template-columns: 1fr 1fr; }
  /* alternierend: jeder zweite Block dreht Text/Bild um */
  .leistung-block:nth-child(even) .leistung-flaeche { order: -1; }
}
.leistung-flaeche {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--c-flaeche-hoch), var(--c-messing));
}
/* Phase 6 — Bild-Reveal-Crossfade (Object Reveal, Spec 4.3) auch in den
   Leistungs-Blöcken: das vorhandene .bild-reveal-Muster (siehe Abschn. 10b)
   füllt hier die schon reservierte 16:10-Fläche komplett aus (aspect-ratio
   der Kind-Klasse überschrieben, da die äußere Fläche das Seitenverhältnis
   vorgibt). Getriggert wird über den GANZEN .leistung-block (Text- ODER
   Bildseite hovern zeigt das zweite Still) statt nur über die Bildfläche
   — Fokus auf den "Anfragen"-Link im Textteil löst per :focus-within
   denselben Crossfade aus, damit Tastatur-Nutzer den Effekt ebenfalls sehen. */
.leistung-flaeche .bild-reveal { position: absolute; inset: 0; aspect-ratio: auto; }
.leistung-block:hover .bild-reveal .nachher,
.leistung-block:focus-within .bild-reveal .nachher { opacity: 1; }
.preis-badge {
  display: inline-block;
  font-weight: 700;
  color: var(--c-bg-dunkel);
  background: var(--c-messing-hell);
  border-radius: var(--radius-pill);
  padding: 6px 16px;
  margin-block: var(--space-3) var(--space-4);
}

.preis-tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.preis-tabelle caption {
  text-align: left;
  color: var(--c-text-invers-leicht);
  font-size: var(--text-xs);
  margin-bottom: var(--space-3);
}
.preis-tabelle th,
.preis-tabelle td {
  text-align: left;
  padding: var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--c-linie-dunkel);
  vertical-align: top;
}
.preis-tabelle th { font-family: var(--font-body); font-weight: 700; color: var(--c-text-invers); }
.preis-tabelle td:last-child { white-space: nowrap; font-weight: 700; color: var(--c-messing); }


/* =====================================================================
   16. FORMULAR (kontakt.html)
   ===================================================================== */
.kontakt-grid {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
}
@media (min-width: 820px) {
  .kontakt-grid { grid-template-columns: 1fr 1fr; }
}

.kontakt-info p { margin-bottom: var(--space-3); }
.kontakt-info a { color: var(--c-messing); font-weight: 600; }

/* Karten-Platzhalter (keine externe Karte!) */
.karten-platzhalter {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  background:
    repeating-linear-gradient(0deg, rgba(176,141,79,0.10) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgba(176,141,79,0.10) 0 1px, transparent 1px 28px),
    linear-gradient(160deg, #e6d7b8, #cfcabf);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  color: var(--c-bg-dunkel);
  text-align: center;
  padding: var(--space-5);
}

.formular { max-width: 640px; }
.feld { margin-bottom: var(--space-5); }
.feld label {
  display: block;
  font-weight: 600;
  font-size: var(--text-sm);
  margin-bottom: var(--space-2);
}
.feld .pflicht { color: var(--c-fehler); }
.feld input,
.feld select,
.feld textarea {
  width: 100%;
  min-height: 48px;          /* Touch-Target */
  font: inherit;
  font-size: 1rem;           /* ≥16px verhindert iOS-Zoom */
  color: var(--c-text-invers);
  background: var(--c-flaeche-hoch);
  border: 1.5px solid var(--c-linie-dunkel);
  border-radius: var(--radius-md);
  padding: 0.6rem 0.9rem;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.feld textarea { min-height: 130px; resize: vertical; }
.feld input:focus,
.feld select:focus,
.feld textarea:focus {
  outline: 2px solid var(--c-messing);
  outline-offset: 1px;
  border-color: var(--c-messing);
  box-shadow: 0 0 0 4px rgba(176,141,79,0.22);
}
/* Fehlerzustand */
.feld input.fehler,
.feld select.fehler,
.feld textarea.fehler {
  border-color: var(--c-fehler);
  box-shadow: 0 0 0 4px rgba(168,60,44,0.18);
}
.feld-fehler {
  display: block;
  min-height: 1.2em;
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--c-fehler);
  font-weight: 600;
}

/* DSGVO-Checkbox-Zeile (Touch-Target ≥44px) */
.feld-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.feld-checkbox input {
  width: 24px; height: 24px;
  min-height: 24px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--c-messing);
}
.feld-checkbox label { font-weight: 400; font-size: var(--text-sm); line-height: var(--leading-normal); }
.feld-checkbox a { color: var(--c-messing); text-decoration: underline; }

/* Honeypot — CSS-versteckt, aber NICHT display:none (Bots füllen sichtbare Felder) */
/* SECURITY-REVIEW: Honeypot off-screen, aria-hidden + tabindex=-1 im HTML */
.honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* Erfolgs-State */
.formular-erfolg {
  background: var(--c-flaeche-hoch);
  border: 1px solid var(--c-linie-dunkel);
  border-left: 4px solid var(--c-erfolg);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
}
.formular-erfolg h3 { font-size: var(--text-lg); margin-block: var(--space-3) var(--space-2); }
.versteckt { display: none; }


/* =====================================================================
   16b. ZAHLEN-COUNTER + SHOWREEL-TEASER-KACHEL (Enterprise-Konzept
   Abschn. 4.9, Phase 5 — index). Counter-Logik in assets/js/index-enterprise.js.
   ===================================================================== */
.counter-showreel-grid {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
  align-items: center;
  margin-top: var(--space-8);
}
@media (min-width: 920px) {
  .counter-showreel-grid { grid-template-columns: 1.15fr 1fr; }
}

.zahlen-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}
@media (min-width: 560px) {
  .zahlen-grid { grid-template-columns: repeat(4, 1fr); }
}
.zahl-karte { text-align: center; }
.zahl {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-2xl);
  color: var(--c-messing);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.zahl-label {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--c-text-invers-leicht);
}

.showreel-kachel {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.showreel-kachel img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.showreel-kachel:hover img,
.showreel-kachel:focus-visible img { transform: scale(1.04); }
.showreel-kachel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18,17,16,0.10), rgba(18,17,16,0.72));
}
.showreel-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-messing);
  color: var(--c-bg-dunkel);
  border-radius: 50%;
  box-shadow: var(--shadow-messing);
}
.showreel-kachel-text {
  position: absolute;
  left: var(--space-4); bottom: var(--space-4);
  z-index: 2;
  display: flex; align-items: center; gap: var(--space-2);
  color: var(--c-text-invers);
  font-weight: 600;
}
@media (prefers-reduced-motion: reduce) {
  .showreel-kachel img { transition: none; }
}


/* =====================================================================
   17. CTA-BAND (--c-bg-tief + Messing-Glow, laut Wireframe Abschn. 3.1)
   ===================================================================== */
.cta-band {
  position: relative;
  background: var(--c-bg-tief);
  color: var(--c-text-invers);
  text-align: center;
  padding-block: var(--space-10);
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(50% 80% at 50% 0%, rgba(176,141,79,0.22), transparent 70%);
  pointer-events: none;
}
.cta-band .container { position: relative; z-index: 1; }
.cta-band h2 { color: var(--c-text-invers); font-size: var(--text-xl); margin-bottom: var(--space-4); }
.cta-band p { color: var(--c-text-invers-leicht); margin-bottom: var(--space-6); max-width: 50ch; margin-inline: auto; }
.cta-buttons { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }


/* =====================================================================
   18. FOOTER (--c-bg-tief, großer Hintergrund-Eckwinkel Opacity 0.12)
   Bewusst dieselbe tiefe Ebene wie Hero/CTA-Band — bildet den dunklen
   "Rahmen" der Seite (Galerie-Eingang/-Ausgang).
   ===================================================================== */
.site-footer {
  position: relative;
  background: var(--c-bg-tief);
  color: var(--c-text-invers);
  padding-block: var(--space-9) var(--space-6);
  overflow: hidden;
}
/* großer dezenter Hintergrund-Eckwinkel */
.footer-deko-ecke {
  position: absolute;
  bottom: -20px; right: -20px;
  width: 220px; height: 220px;
  color: var(--c-messing);
  opacity: 0.12;
  pointer-events: none;
}
.footer-grid {
  position: relative;
  display: grid;
  gap: var(--space-7);
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .footer-grid { grid-template-columns: 1.2fr 1fr 1fr; }
}
.footer-logo-name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  letter-spacing: var(--track-wider);
  color: var(--c-text-invers);
}
.footer-claim { color: var(--c-text-invers-leicht); margin-block: var(--space-2) var(--space-4); }
.footer-heading {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--c-messing);
  margin-bottom: var(--space-4);
}
.footer-grid p { color: var(--c-text-invers-leicht); margin-bottom: var(--space-2); }
.footer-grid a { color: var(--c-text-invers); }
.footer-grid a:hover { color: var(--c-messing); }
.footer-grid table td { padding: 2px 0; color: var(--c-text-invers-leicht); }
.footer-grid table td:first-child { padding-right: var(--space-4); color: var(--c-text-invers); }

.footer-social { display: flex; gap: var(--space-3); margin-top: var(--space-4); }
.footer-social-icon {
  display: inline-flex;
  width: 38px; height: 38px;
  align-items: center; justify-content: center;
  border: 1px solid var(--c-linie-dunkel);
  border-radius: var(--radius-pill);
  color: var(--c-text-invers-leicht);
}

.footer-trenner {
  position: relative;
  border: none;
  border-top: 1px solid var(--c-messing);
  opacity: 0.3;
  margin-block: var(--space-7) var(--space-5);
}
.footer-unten {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.footer-fiktiv { font-size: var(--text-xs); color: var(--c-text-invers-leicht); }
.footer-copyright { font-size: var(--text-xs); color: var(--c-text-invers-leicht); }


/* =====================================================================
   19. MOBILE STICKY-BOTTOM-BAR (Anrufen + Haupt-CTA)
   ===================================================================== */
.mobile-cta-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 90;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3) calc(var(--space-2) + env(safe-area-inset-bottom, 0));
  background: rgba(28,27,26,0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--c-linie-dunkel);
}
.mobile-cta-bar .btn {
  min-height: 46px;
  font-size: var(--text-xs);
  padding: 0.5rem 0.6rem;
}
@media (min-width: 920px) {
  .mobile-cta-bar { display: none; }
}
/* Auf Mobile etwas Platz unten lassen, damit die Bar nichts verdeckt */
@media (max-width: 919px) {
  body { padding-bottom: 64px; }
}


/* =====================================================================
   20. SCROLL-EINTRITTS-ANIMATIONEN (IntersectionObserver setzt .ist-sichtbar)
   ===================================================================== */
.animiert {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}
.animiert.ist-sichtbar { opacity: 1; transform: translateY(0); }
/* gestaffelt (stagger) via inline --delay oder nth-child in Grids */
.stagger > * { transition-delay: calc(var(--i, 0) * 60ms); }


/* =====================================================================
   21. RESPONSIVE Feinheiten
   ===================================================================== */
@media (max-width: 600px) {
  .hero { min-height: auto; padding-top: var(--space-6); }
  .hero-inner { padding-block: var(--space-9) var(--space-8); }
  /* Partikel-Layer auf Mobile dezenter (Guardrail 8: mobil reduziert-aber-erlebbar) */
  .hero-partikel-canvas { opacity: 0.7; }
}


/* =====================================================================
   23. FOTO-EINBINDUNG (echte Stockbilder, lokal in bilder/)
   Generischer Cover-Helfer + Scrims für Lesbarkeit über Fotos.
   Alle Fotos lokal gehostet (kein CDN) → DSGVO bleibt gewahrt.
   ===================================================================== */
/* Foto füllt seine Fläche randlos (object-fit: cover) */
.flaeche-foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Tilt-Karten-Bildfläche: Foto absolut, Gradient bleibt als Fallback darunter */
.karte-bild { overflow: hidden; }
.karte-bild .flaeche-foto {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Leistungs-Flächen + Atelier-Kacheln clippen das Foto am Radius */
.leistung-flaeche,
.atelier-flaeche { overflow: hidden; }
.atelier-flaeche .flaeche-foto { position: absolute; inset: 0; }

/* Inhaberin-Porträt: Foto hinter dem Zitat + dunkler Verlauf für Lesbarkeit */
.inhaberin-bild .flaeche-foto { position: absolute; inset: 0; z-index: 0; }
.inhaberin-bild::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(28,27,26,0.78), rgba(28,27,26,0.05) 55%);
}
.inhaberin-bild-zitat { position: relative; z-index: 2; }

/* Flip-Galerie: Foto hinter den Labels, unten dunkler Scrim, Text immer hell lesbar */
.flip-seite .flaeche-foto { position: absolute; inset: 0; z-index: 0; }
.flip-seite::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(0,0,0,0.62), transparent 55%);
}
.flip-seite > .flip-label,
.flip-seite > .flip-titel { position: relative; z-index: 2; }
.flip-hinweis { z-index: 2; }
/* Über Fotos ist heller Text auf beiden Seiten am sichersten */
.flip-hinten { color: var(--c-text-invers); }
.flip-hinten .flip-hinweis { background: rgba(28,27,26,0.5); color: #fff; }


/* =====================================================================
   22. prefers-reduced-motion — GLOBALER SCHALTER
   Alle Auto-Animationen aus; Effekte zeigen ruhigen Standzustand.
   (Das JS prüft zusätzlich matchMedia und startet keine rAF-Loops.)
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  /* Eintritts-Animationen sofort sichtbar (kein translate) */
  .animiert { opacity: 1; transform: none; }
  .abschnitt-ecke path { stroke-dashoffset: 0; }
  /* Tilt-Karten: kein 3D, nur ruhiger Schatten */
  .tilt-karte { transform: none !important; }
  .tilt-karte::before { display: none; }
  /* Parallax-Ebenen flach stapeln (Text nie verdeckt) */
  .parallax-ebene-fern,
  .parallax-ebene-mid,
  .parallax-ebene-nah { transform: none !important; }
  /* Würfel/Flip: keine Drehung */
  .cube { transition: none !important; }
  /* Hero: kein Partikel-Canvas, Video bleibt auf dem <poster>-Standbild stehen (kein .play()) */
  .hero-partikel-canvas { display: none; }
  .hero-scroll-linie { animation: none; }
}