/*
Theme Name: Rai Events
Theme URI: https://rai-events.de
Author: Rai Events
Description: Premium-Theme für Eventagenturen — Hochzeiten, Jubiläen, Tamada & DJ. Mit cinematischem 3D-Scroll-Effekt, 5 fertigen Seitenvorlagen und komplett über den WordPress-Customizer editierbar.
Version: 1.3.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rai
Tags: events, wedding, one-page, custom-colors, custom-logo, custom-menu, featured-images, translation-ready
*/

/* ============================================================
   1. TOKENS
   ============================================================ */
:root{
  /* Markenfarbe aus dem Customizer. Alles andere leitet sich davon ab. */
  --accent:    #c9a961;

  --bg:        #08080c;
  --bg-2:      #0d0d14;
  --surface:   #14141d;
  --surface-2: #1c1c27;
  --line:      rgba(255,255,255,.09);
  --line-2:    rgba(255,255,255,.16);

  --gold:      var(--accent);
  --gold-2:    #e6d2a0;
  --violet:    #8b6cff;

  --text:      #f4f1ea;
  --muted:     #9c968c;   /* 6.8:1 auf dem Grund */
  --muted-2:   #8b857c;   /* 5.5:1 — vorher 3.7:1 und damit zu schwach */

  --shadow:    0 30px 70px rgba(0,0,0,.6);

  --font-display: 'Playfair Display', 'Iowan Old Style', Georgia, serif;
  --font-body:    'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --shell: 1240px;
  --gut:   clamp(20px, 5vw, 56px);

  --ease: cubic-bezier(.2,.7,.2,1);
  --t:    .55s var(--ease);
}

/* ============================================================
   1b. HELLE FASSUNG
   Warmes Elfenbein statt Weiß — passt zu Feiern und bleibt weich.
   Das Gold wird abgedunkelt, sonst ist es auf Hell nicht lesbar.
   ============================================================ */
html[data-theme="light"]{
  --bg:        #faf7f2;
  --bg-2:      #f1ebe1;
  --surface:   #ffffff;
  --surface-2: #f7f2ea;
  --line:      rgba(28,24,20,.11);
  --line-2:    rgba(28,24,20,.20);

  /* Auf Elfenbein muss das Gold deutlich dunkler sein: bei 68 % lag der
     Kontrast nur bei 3,5:1, jetzt bei 4,8:1. */
  --gold:      color-mix(in srgb, var(--accent) 52%, #35280c);
  --gold-2:    color-mix(in srgb, var(--accent) 48%, #35280c);

  --text:      #1c1814;
  --muted:     #6b6259;   /* 5.6:1 */
  --muted-2:   #746b61;   /* 4.9:1 — vorher 3.1:1 */

  --shadow:    0 24px 60px rgba(60,45,25,.14);
}

/* Grundfarbe der Seite — wird gebraucht, damit dunkle Bereiche
   sauber in die helle Seite auslaufen können. */
:root{ --page-bg:#08080c; }
html[data-theme="light"]{ --page-bg:#faf7f2; }

/* ============================================================
   1c. DUNKLE INSELN
   Kopfbild, Filmsequenzen, Ablauf-Tunnel und Abschluss bleiben in
   beiden Fassungen dunkel — das Material ist Kerzenlicht und Nacht,
   und über einem dunklen Bild braucht es helle Schrift.
   ============================================================ */
.hero, .page-hero, .cine, .tunnel, .cta, .site-footer{
  --on-gold:   #0b0b10;
  --bg:        #08080c;
  --bg-2:      #0d0d14;
  --surface:   #14141d;
  --surface-2: #1c1c27;
  --line:      rgba(255,255,255,.09);
  --line-2:    rgba(255,255,255,.16);
  --gold:      var(--accent);
  --gold-2:    #e6d2a0;
  --text:      #f4f1ea;
  --muted:     #9c968c;
  --muted-2:   #6f6a62;
  --shadow:    0 30px 70px rgba(0,0,0,.6);
  color:var(--text);
  background:var(--bg);
}

/* ============================================================
   2. RESET / BASE
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-weight:300;
  font-size:clamp(15px,1.02vw,17px);
  line-height:1.75;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* Lenis smooth-scroll wird per JS gesteuert */
html.lenis,html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }

img,svg,video,canvas{ max-width:100%; display:block; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ margin:0; font-weight:400; line-height:1.08; letter-spacing:-.01em; font-family:var(--font-display); }
p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }
::selection{ background:var(--gold); color:#0b0b10; }

:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gut); }
.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;
}
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:9999;
  background:var(--gold); color:#0b0b10; padding:12px 20px;
}
.skip-link:focus{ left:12px; top:12px; }

/* ============================================================
   3. TYPOGRAFIE-BAUSTEINE
   ============================================================ */
.eyebrow{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--font-body); font-size:.66rem; font-weight:400;
  letter-spacing:.42em; text-transform:uppercase; color:var(--gold);
  margin:0 0 22px;
}
.eyebrow::before{
  content:''; width:34px; height:1px; background:var(--gold); opacity:.65;
}
.eyebrow--center{ justify-content:center; }
.eyebrow--center::after{
  content:''; width:34px; height:1px; background:var(--gold); opacity:.65;
}

.h-xl{ font-size:clamp(2.9rem,8.2vw,7rem); }
.h-lg{ font-size:clamp(2.3rem,5.4vw,4.4rem); }
.h-md{ font-size:clamp(1.75rem,3.4vw,2.9rem); }
.h-sm{ font-size:clamp(1.25rem,1.9vw,1.6rem); }
em,.it{ font-style:italic; color:var(--gold-2); }

.lede{
  font-size:clamp(1rem,1.35vw,1.18rem);
  line-height:1.85; color:var(--muted); max-width:56ch;
}
.muted{ color:var(--muted); }
.center{ text-align:center; }
.center .lede{ margin-inline:auto; }

/* ============================================================
   4. BUTTONS
   ============================================================ */
.btn{
  --btn-bg:var(--gold); --btn-fg:#0b0b10; --btn-bd:var(--gold);
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:17px 40px; background:var(--btn-bg); color:var(--btn-fg);
  border:1px solid var(--btn-bd);
  font-size:.68rem; font-weight:400; letter-spacing:.3em; text-transform:uppercase;
  overflow:hidden; isolation:isolate;
  transition:color .45s var(--ease), border-color .45s var(--ease);
}
.btn::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:var(--text); transform:translateY(101%);
  transition:transform .55s var(--ease);
}
.btn:hover::after{ transform:translateY(0); }
.btn:hover{ color:#0b0b10; }

.btn--ghost{ --btn-bg:transparent; --btn-fg:var(--text); --btn-bd:var(--line-2); }
.btn--ghost::after{ background:var(--gold); }
.btn--sm{ padding:12px 26px; font-size:.62rem; letter-spacing:.26em; }
.btn--wide{ padding-inline:56px; }

.link-arrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.68rem; letter-spacing:.3em; text-transform:uppercase; color:var(--gold);
  transition:gap .4s var(--ease);
}
.link-arrow::after{ content:'→'; transition:transform .4s var(--ease); }
.link-arrow:hover{ gap:16px; }

/* ============================================================
   5. HEADER / NAVIGATION
   ============================================================ */
.site-header{
  /* Über dem dunklen Kopfbild immer helle Schrift — erst beim Andocken
     übernimmt der Kopfbereich die Farben der jeweiligen Fassung. */
  --hdr-fg:    #f4f1ea;
  --hdr-muted: rgba(244,241,234,.82);
  --hdr-line:  rgba(255,255,255,.3);

  position:fixed; inset:0 0 auto; z-index:200;
  transition:background .5s var(--ease), backdrop-filter .5s, border-color .5s, padding .5s var(--ease);
  border-bottom:1px solid transparent;
  padding-block:24px;
}
.admin-bar .site-header{ top:32px; }
.site-header.is-stuck{
  --hdr-fg:    var(--text);
  --hdr-muted: var(--muted);
  --hdr-line:  var(--line-2);

  background:color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter:blur(16px) saturate(1.25);
  -webkit-backdrop-filter:blur(16px) saturate(1.25);
  border-bottom-color:var(--line);
  padding-block:14px;
}
.header__inner{ display:flex; align-items:center; justify-content:space-between; gap:28px; }

.brand{ display:inline-flex; align-items:center; gap:13px; color:var(--hdr-fg); }

/* Das Logo erbt seine Farbe. Über dem dunklen Kopfbild ist das immer
   das reine Gold — dort wäre das abgedunkelte Gold der hellen Fassung
   nicht zu sehen. Erst wenn das Menüband andockt und einen eigenen
   Untergrund bekommt, übernimmt es die Farbe der Fassung.
   Dieselbe Logik wie bei --hdr-fg direkt darüber. */
.site-header{ --logo:var(--accent); }
.site-header.is-stuck{ --logo:var(--gold); }

.brand__logo{
  display:block; color:var(--logo);
  transition:color .5s var(--ease), opacity .45s var(--ease);
}
.brand__logo svg{
  display:block; width:auto; height:62px;
  transition:height .5s var(--ease);
}
.site-header.is-stuck .brand__logo svg{ height:46px; }
.brand:hover .brand__logo{ opacity:.78; }

/* Der Name steht weiterhin im Markup — nur für Screenreader und
   Suchmaschinen, sichtbar ist die Grafik. */
.brand__name{
  font-family:var(--font-display); font-size:1.05rem; letter-spacing:.26em;
  text-transform:uppercase; color:var(--hdr-fg); white-space:nowrap;
}
.brand img.custom-logo{ max-height:62px; width:auto; }

/* Am Rechner stehen Menü und Umschalter nebeneinander in der Kopfzeile. */
.nav{ display:flex; align-items:center; gap:30px; margin-left:auto; }
.nav__list{ display:flex; align-items:center; gap:34px; }
.nav__list a{
  position:relative; font-size:.67rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--hdr-muted); padding-block:6px; transition:color .35s var(--ease);
}
.nav__list a::after{
  content:''; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease);
}
.nav__list a:hover,
.nav__list .current-menu-item > a{ color:var(--hdr-fg); }
.nav__list a:hover::after,
.nav__list .current-menu-item > a::after{ transform:scaleX(1); transform-origin:left; }

.header__cta{ flex:none; }

/* ── SPRACH- UND FASSUNGSUMSCHALTER ── */
.switches{ display:inline-flex; align-items:stretch; gap:8px; flex:none; }

.langsw,.themesw{
  display:inline-flex; align-items:stretch; flex:none;
  border:1px solid var(--hdr-line);
}
.langsw__item,.themesw__btn{
  display:grid; place-items:center;
  padding:9px 13px; min-width:44px; min-height:40px;
  font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--hdr-muted); background:none; border:0;
  transition:background .3s var(--ease), color .3s var(--ease);
}
.langsw__item + .langsw__item{ border-left:1px solid var(--hdr-line); }
.langsw__item:hover,.themesw__btn:hover{ color:var(--hdr-fg); }
.langsw__item.is-active{ background:var(--gold); color:#0b0b10; }

.themesw__btn{ cursor:pointer; }
.themesw__btn svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.4; }
/* Sonne in der dunklen Fassung (»umschalten auf hell«), Mond in der hellen. */
.themesw__btn .icon-sun{ display:block; }
.themesw__btn .icon-moon{ display:none; }
html[data-theme="light"] .themesw__btn .icon-sun{ display:none; }
html[data-theme="light"] .themesw__btn .icon-moon{ display:block; }

/* In der Fußzeile stehen die Umschalter auf dunklem Grund. */
.site-footer .langsw,.site-footer .themesw{ border-color:var(--line-2); }
.site-footer .langsw__item,.site-footer .themesw__btn{ color:var(--muted); }
.site-footer .langsw__item:hover,.site-footer .themesw__btn:hover{ color:var(--text); }
.site-footer .langsw__item + .langsw__item{ border-left-color:var(--line-2); }

.burger{
  display:none; width:44px; height:44px; place-items:center; gap:6px;
  flex-direction:column; flex:none;
}
.burger span{
  display:block; width:24px; height:1px; background:var(--hdr-fg);
  transition:transform .4s var(--ease), opacity .3s, background .4s;
}
.nav-open .burger span:nth-child(1){ transform:translateY(3.5px) rotate(45deg); }
.nav-open .burger span:nth-child(2){ transform:translateY(-3.5px) rotate(-45deg); }

/* ============================================================
   6. HERO — 3D-LAYER-PARALLAX
   ============================================================ */
.hero{
  position:relative; min-height:100svh;
  display:grid; place-items:center;
  overflow:hidden; perspective:1000px; perspective-origin:50% 50%;
  background:var(--bg);
}
.hero__stage{
  position:absolute; inset:0; transform-style:preserve-3d;
  will-change:transform;
  transition:transform .9s var(--ease);
}
.hero__layer{
  position:absolute; inset:0; transform-style:preserve-3d;
  will-change:transform; pointer-events:none;
}
.hero__layer img{ width:100%; height:100%; object-fit:cover; }

/* Ebene 1 – Bild, tief hinten (translateZ -420 → scale 1.42 bei perspective 1000) */
.hero__layer--img{ transform:translateY(var(--sy,0px)) translateZ(-420px) scale(1.42); }
.hero__layer--img::after{
  content:''; position:absolute; inset:0;
  /* Läuft unten in die Grundfarbe der Seite aus — in der hellen
     Fassung also nach Elfenbein statt nach Schwarz. */
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 30%, rgba(8,8,12,.62) 78%, var(--page-bg) 100%),
    linear-gradient(180deg, rgba(8,8,12,.72) 0%, rgba(8,8,12,.25) 34%, rgba(8,8,12,.45) 62%, var(--page-bg) 100%);
}
/* Ebene 2 – Lichtschein */
.hero__layer--glow{ transform:translateY(var(--sy,0px)) translateZ(-260px) scale(1.26); }
.hero__layer--glow::before{
  content:''; position:absolute; left:50%; top:46%; translate:-50% -50%;
  width:min(1100px,120vw); aspect-ratio:1;
  background:radial-gradient(circle, rgba(201,169,97,.20) 0%, rgba(139,108,255,.10) 38%, transparent 68%);
  filter:blur(30px);
}
/* Ebene 3 – Raster */
.hero__layer--grid{ transform:translateY(var(--sy,0px)) translateZ(-120px) scale(1.12); opacity:.5; }
.hero__layer--grid::before{
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:clamp(60px,7vw,110px) clamp(60px,7vw,110px);
  mask-image:radial-gradient(ellipse 70% 60% at 50% 45%, #000 20%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 45%, #000 20%, transparent 75%);
}
/* Ebene 4 – Inhalt, vorn */
.hero__content{
  position:relative; z-index:5; text-align:center;
  padding-block:140px 120px; transform-style:preserve-3d;
  will-change:transform;
  transform:translateY(var(--sy,0px));
}
.hero__title{ margin:0 0 26px; }
.hero__title .line{ display:block; overflow:hidden; }
.hero__title .line > span{
  display:block;
  transform:translateY(105%);
  animation:heroRise 1.15s var(--ease) forwards;
}
.hero__title .line:nth-child(2) > span{ animation-delay:.13s; }
@keyframes heroRise{ to{ transform:translateY(0); } }

.hero__sub{
  max-width:52ch; margin:0 auto 42px;
  /* Heller als --muted und mit Schattierung: der Text steht auf einem
     Foto, dessen Helligkeit sich nicht vorhersagen lässt. */
  color:rgba(244,241,234,.86);
  text-shadow:0 1px 18px rgba(0,0,0,.7);
  font-size:clamp(.95rem,1.25vw,1.12rem); line-height:1.85;
  opacity:0; animation:heroFade 1s var(--ease) .42s forwards;
}
.hero__title{ text-shadow:0 2px 34px rgba(0,0,0,.55); }
.hero .eyebrow{ text-shadow:0 1px 14px rgba(0,0,0,.7); }
.page-hero__in .lede{ color:rgba(244,241,234,.86); text-shadow:0 1px 18px rgba(0,0,0,.7); }
.crumbs{ text-shadow:0 1px 12px rgba(0,0,0,.6); }
.hero__actions{
  display:flex; flex-wrap:wrap; gap:14px; justify-content:center;
  opacity:0; animation:heroFade 1s var(--ease) .56s forwards;
}
@keyframes heroFade{ to{ opacity:1; } }

/* Der Scroll-Hinweis wurde auf Wunsch entfernt — der Kopfbereich wirkt
   ohne ihn ruhiger, und dass man scrollen kann, versteht sich. */

/* ============================================================
   7. LAUFBAND
   ============================================================ */
.ticker{
  border-block:1px solid var(--line); background:var(--bg-2);
  padding-block:20px; overflow:hidden; white-space:nowrap;
}
.ticker__track{ display:inline-flex; gap:0; animation:tickerRun 42s linear infinite; }
.ticker:hover .ticker__track{ animation-play-state:paused; }
.ticker__item{
  display:inline-flex; align-items:center; gap:36px; padding-inline:18px;
  font-family:var(--font-display); font-size:clamp(1.05rem,1.9vw,1.6rem);
  color:var(--muted); font-style:italic;
}
.ticker__item::after{ content:'✦'; font-style:normal; font-size:.5em; color:var(--gold); }
@keyframes tickerRun{ to{ transform:translateX(-50%); } }

/* ============================================================
   8. SECTIONS
   ============================================================ */
.section{ padding-block:clamp(90px,11vw,170px); position:relative; }
.section--tight{ padding-block:clamp(64px,7vw,104px); }
.section--alt{ background:var(--bg-2); }
.section__head{ max-width:800px; margin-bottom:clamp(48px,6vw,84px); }
.section__head.center{ margin-inline:auto; }

/* Zweispaltiges Intro */
.split{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,90px); align-items:center;
}
.split__media{ position:relative; }
.split__media img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  filter:saturate(.9) contrast(1.04);
}
.split__media::after{
  content:''; position:absolute; inset:auto -18px -18px auto;
  width:58%; height:58%; border:1px solid var(--gold); z-index:-1;
}
.split__badge{
  position:absolute; left:-22px; bottom:36px;
  background:var(--gold); color:#0b0b10; padding:22px 26px; text-align:center;
}
.split__badge b{
  display:block; font-family:var(--font-display); font-size:2.2rem; line-height:1;
}
.split__badge span{ font-size:.56rem; letter-spacing:.28em; text-transform:uppercase; }

/* ============================================================
   9. CINEMATIC SCRUB (Higgsfield-Framesequenz)
   ============================================================ */
.cine{ position:relative; height:460vh; background:var(--bg); }
.cine__sticky{
  position:sticky; top:0; height:100svh; overflow:hidden;
  display:grid; place-items:center; background:#06060a;
}
.cine__canvas{ position:absolute; inset:0; width:100%; height:100%; }
.cine__veil{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(115% 85% at 50% 45%, rgba(4,4,8,.30) 0%, rgba(4,4,8,.34) 34%, rgba(4,4,8,.76) 100%),
    linear-gradient(180deg, rgba(4,4,8,.62) 0%, rgba(4,4,8,.12) 22%, rgba(4,4,8,.12) 68%, rgba(4,4,8,.82) 100%);
}
.cine__copy{ position:relative; z-index:4; width:100%; height:100%; }
/* Zentrierung läuft über transform — das JS überschreibt genau diese
   Eigenschaft und ergänzt nur den Scroll-Versatz. */
.cine__line{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:min(900px,86vw); text-align:center; opacity:0;
  will-change:opacity,transform;
}
.cine__line h2{
  margin:0 0 18px;
  text-shadow:0 2px 30px rgba(0,0,0,.75), 0 1px 6px rgba(0,0,0,.55);
}
.cine__line p{
  font-size:.72rem; letter-spacing:.4em; text-transform:uppercase;
  color:rgba(244,241,234,.72); margin:0;
  text-shadow:0 1px 14px rgba(0,0,0,.8);
}
.cine__progress{
  position:absolute; left:var(--gut); right:var(--gut); bottom:42px; z-index:5;
  height:1px; background:rgba(255,255,255,.13);
}
.cine__progress i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--gold),var(--gold-2));
  box-shadow:0 0 14px rgba(201,169,97,.55);
}

/* ============================================================
   10. LEISTUNGEN — 3D-KARTEN
   ============================================================ */
.svc-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:2px;
  perspective:1400px;
}
.svc{
  position:relative; background:var(--surface); border:1px solid var(--line);
  padding:clamp(30px,3.4vw,46px) clamp(26px,2.6vw,38px);
  transform-style:preserve-3d; will-change:transform;
  transition:transform .6s var(--ease), background .5s var(--ease), border-color .5s var(--ease);
  overflow:hidden; min-height:290px;
  display:flex; flex-direction:column;
}
.svc::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(150deg, rgba(201,169,97,.13), transparent 55%);
  opacity:0; transition:opacity .55s var(--ease);
}
.svc:hover{ background:var(--surface-2); border-color:rgba(201,169,97,.4); }
.svc:hover::before{ opacity:1; }
.svc__in{ position:relative; transform:translateZ(38px); transform-style:preserve-3d; height:100%; display:flex; flex-direction:column; }
.svc__num{
  font-family:var(--font-display); font-size:.72rem; letter-spacing:.34em;
  color:var(--gold); margin-bottom:20px;
}
.svc__icon{
  width:46px; height:46px; margin-bottom:22px; color:var(--gold);
  transform:translateZ(20px);
}
.svc__icon svg{ width:100%; height:100%; stroke:currentColor; fill:none; stroke-width:1.1; }
.svc h3{ font-size:clamp(1.3rem,1.9vw,1.72rem); margin-bottom:14px; }
.svc p{ color:var(--muted); font-size:.94rem; line-height:1.8; }
.svc__more{ margin-top:auto; padding-top:24px; }

/* Bildvariante der Karte */
.svc--img{ padding:0; min-height:0; }
.svc--img .svc__media{ position:relative; aspect-ratio:4/5; overflow:hidden; }
.svc--img .svc__media img{
  width:100%; height:100%; object-fit:cover;
  filter:brightness(.6) saturate(.85);
  transition:transform .9s var(--ease), filter .6s var(--ease);
}
.svc--img:hover .svc__media img{ transform:scale(1.07); filter:brightness(.78) saturate(1); }
.svc--img .svc__body{
  position:absolute; inset:auto 0 0; padding:clamp(24px,2.6vw,36px);
  background:linear-gradient(0deg, rgba(6,6,10,.9) 8%, transparent 100%);
  transform:translateZ(50px);
}

/* ============================================================
   11. 3D-TUNNEL (Ablauf)
   ============================================================ */
.tunnel{ position:relative; height:500vh; background:var(--bg-2); }
.tunnel__sticky{
  position:sticky; top:0; height:100svh; overflow:hidden;
  /* Weite Perspektive: die Panels schrumpfen mit der Tiefe weniger stark
     und bleiben dadurch länger lesbar. */
  perspective:1500px; perspective-origin:50% 48%;
  display:grid; place-items:center;
}
.tunnel__sticky::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 62% 52% at 50% 48%, transparent 42%, var(--bg-2) 88%);
}
.tunnel__scene{ position:absolute; inset:0; transform-style:preserve-3d; }
/* Zentrierung erledigt das JS über calc(-50% + Versatz) im transform —
   deshalb hier bewusst keine margin-Korrektur. */
.tunnel__panel{
  position:absolute; left:50%; top:50%;
  width:min(560px,80vw);
  padding:clamp(28px,3vw,42px);
  background:rgba(20,20,29,.86); border:1px solid var(--line);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  will-change:transform,opacity; opacity:0;
}
.tunnel__panel b{
  display:block; font-family:var(--font-display); font-size:.74rem;
  letter-spacing:.36em; color:var(--gold); margin-bottom:16px; font-weight:400;
}
.tunnel__panel h3{ font-size:clamp(1.5rem,2.6vw,2.3rem); margin-bottom:12px; }
.tunnel__panel p{ color:var(--muted); font-size:.95rem; margin:0; }
.tunnel__head{
  position:absolute; left:0; right:0; top:clamp(70px,11vh,120px); z-index:6;
  text-align:center; pointer-events:none;
}

/* ============================================================
   12. TEAM
   ============================================================ */
.team-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.6vw,40px);
  perspective:1500px;
}
.member{
  position:relative; transform-style:preserve-3d; will-change:transform;
  transition:transform .6s var(--ease);
}
.member__media{ position:relative; overflow:hidden; background:var(--surface); }
.member__media img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  filter:grayscale(.35) contrast(1.05);
  transition:transform .9s var(--ease), filter .7s var(--ease);
}
.member:hover .member__media img{ transform:scale(1.05); filter:grayscale(0) contrast(1); }
.member__tag{
  position:absolute; left:0; top:26px; transform:translateZ(60px);
  background:var(--gold); color:#0b0b10; padding:9px 20px;
  font-size:.58rem; letter-spacing:.3em; text-transform:uppercase;
}
.member__body{ padding-top:28px; transform:translateZ(40px); }
.member__body h3{ font-size:clamp(1.6rem,2.6vw,2.2rem); margin-bottom:6px; }
.member__role{
  font-size:.64rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--gold); margin-bottom:16px;
}
.member__body p{ color:var(--muted); font-size:.95rem; }
.member__skills{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.pill{
  font-size:.58rem; letter-spacing:.24em; text-transform:uppercase;
  padding:7px 15px; border:1px solid var(--line-2); color:var(--muted);
}

/* ============================================================
   12b. HÖRPROBEN
   Eigener Player statt der Browser-Standardleiste — die sieht in
   jedem Browser anders aus und passt zu keinem Entwurf.
   ============================================================ */
.proben{ margin-top:26px; padding-top:24px; border-top:1px solid var(--line); }

/* Platzhalter, solange nichts hinterlegt ist. Sieht nur, wer angemeldet
   ist — deshalb darf er ruhig wie eine Notiz aussehen und nicht wie
   ein Gestaltungselement. */
.proben--leer{ opacity:.85; }
.proben__hinweis{
  margin:0; padding:16px 18px;
  border:1px dashed var(--line-2); border-radius:4px;
  font-size:.8rem; line-height:1.65; color:var(--muted-2);
}

/* „Ina anfragen" unter der jeweiligen Person */
.member__anfrage{ margin:18px 0 0; }
.proben__titel{
  font-size:.58rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--gold); margin:0 0 14px;
}

.probe{
  display:flex; align-items:center; gap:14px;
  padding:10px 14px 10px 10px; margin-bottom:8px;
  background:var(--surface); border:1px solid var(--line);
  transition:border-color .35s var(--ease);
}
.probe:hover{ border-color:rgba(201,169,97,.4); }

.probe__play{
  flex:none; display:grid; place-items:center;
  width:40px; height:40px; border-radius:50%;
  background:var(--gold); color:var(--on-gold,#0b0b10);
  transition:transform .3s var(--ease), background .3s var(--ease);
}
.probe__play:hover{ transform:scale(1.07); }
.probe__play svg{ width:17px; height:17px; fill:currentColor; }
.probe__play .i-pause{ display:none; }
.probe.is-playing .i-play{ display:none; }
.probe.is-playing .i-pause{ display:block; }

.probe__mitte{ flex:1; min-width:0; }
.probe__label{
  display:block; font-size:.76rem; letter-spacing:.06em;
  color:var(--text); margin-bottom:8px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.probe__bar{
  position:relative; height:3px; background:var(--line-2);
  cursor:pointer; border-radius:2px;
}
.probe__bar i{
  display:block; height:100%; width:0;
  background:var(--gold); border-radius:2px;
}
/* Vergrößert die Trefferfläche fürs Spulen mit dem Finger */
.probe__bar::before{ content:''; position:absolute; inset:-12px 0; }
.probe__zeit{
  flex:none; font-size:.68rem; color:var(--muted);
  font-variant-numeric:tabular-nums; min-width:38px; text-align:right;
}
.probe__video{ width:100%; margin-top:12px; background:#000; }

/* Zwei-Klick-Video */
.videobox{
  position:relative; margin-top:12px; overflow:hidden;
  background:var(--surface); border:1px solid var(--line);
  aspect-ratio:16/9;
}
.videobox img{ width:100%; height:100%; object-fit:cover; filter:brightness(.62); }
.videobox iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.videobox__play{
  position:absolute; left:50%; top:50%; translate:-50% -50%;
  display:grid; place-items:center; width:62px; height:62px; border-radius:50%;
  background:var(--gold); color:var(--on-gold,#0b0b10);
  transition:transform .35s var(--ease);
}
.videobox__play:hover{ transform:translate(-50%,-50%) scale(1.08); }
.videobox__play svg{ width:24px; height:24px; fill:currentColor; }
.videobox__hinweis{
  position:absolute; left:0; right:0; bottom:0; margin:0;
  padding:10px 14px; font-size:.6rem; line-height:1.5;
  color:rgba(244,241,234,.86); background:rgba(6,6,10,.82);
}

/* ============================================================
   13. STATS
   ============================================================ */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:2px; }
.stat{
  background:var(--surface); border:1px solid var(--line);
  padding:clamp(32px,3.6vw,54px) 24px; text-align:center;
}
.stat b{
  display:block; font-family:var(--font-display); font-weight:400;
  font-size:clamp(2.6rem,4.6vw,4rem); line-height:1; color:var(--text);
}
.stat b .suffix{ color:var(--gold); }
.stat span{
  display:block; margin-top:14px;
  font-size:.6rem; letter-spacing:.34em; text-transform:uppercase; color:var(--muted);
}

/* ============================================================
   14. STIMMEN
   ============================================================ */
.quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.4vw,32px); }
.quote{
  background:var(--surface); border:1px solid var(--line);
  padding:clamp(30px,3.2vw,44px); position:relative;
  transition:border-color .5s var(--ease), transform .5s var(--ease);
}
.quote:hover{ border-color:rgba(201,169,97,.4); transform:translateY(-6px); }
.quote::before{
  content:'”'; position:absolute; right:26px; top:6px;
  font-family:var(--font-display); font-size:5rem; color:var(--gold); opacity:.2; line-height:1;
}
.quote__stars{ color:var(--gold); letter-spacing:.24em; font-size:.8rem; margin-bottom:18px; }
.quote p{ font-size:1rem; line-height:1.85; color:var(--text); font-style:italic; }
.quote cite{
  display:block; margin-top:22px; font-style:normal;
  font-size:.6rem; letter-spacing:.3em; text-transform:uppercase; color:var(--muted);
}

/* ============================================================
   15. GALERIE — 3D-GRID
   ============================================================ */
.gal{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(10px,1.4vw,18px);
  perspective:1600px;
}
.gal__item{
  position:relative; overflow:hidden; background:var(--surface);
  transform-style:preserve-3d; will-change:transform;
  transition:transform .65s var(--ease), box-shadow .65s var(--ease);
}
.gal__item img{
  width:100%; height:100%; object-fit:cover; aspect-ratio:1;
  filter:saturate(.85) brightness(.88);
  transition:transform .9s var(--ease), filter .6s var(--ease);
}
.gal__item--tall img{ aspect-ratio:3/4; }
.gal__item--wide{ grid-column:span 2; }
.gal__item--wide img{ aspect-ratio:2/1; }
.gal__item:hover{ box-shadow:0 30px 70px rgba(0,0,0,.6); }
.gal__item:hover img{ transform:scale(1.06); filter:saturate(1) brightness(1); }
.gal__cap{
  position:absolute; inset:auto 0 0; padding:22px 24px;
  background:linear-gradient(0deg, rgba(6,6,10,.86), transparent);
  font-size:.6rem; letter-spacing:.28em; text-transform:uppercase; color:var(--text);
  opacity:0; transform:translateY(12px) translateZ(40px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.gal__item:hover .gal__cap{ opacity:1; transform:translateY(0) translateZ(40px); }

/* ============================================================
   16. CTA
   ============================================================ */
.cta{
  position:relative; overflow:hidden; text-align:center;
  padding-block:clamp(100px,13vw,190px);
  background:var(--bg-2);
}
.cta::before{
  content:''; position:absolute; left:50%; top:50%; translate:-50% -50%;
  width:min(900px,110vw); aspect-ratio:1;
  background:radial-gradient(circle, rgba(201,169,97,.14), transparent 66%);
  filter:blur(20px); pointer-events:none;
}
.cta__in{ position:relative; }
.cta h2{ margin-bottom:22px; }
.cta .lede{ margin-inline:auto; margin-bottom:42px; }
.cta__actions{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }

/* ============================================================
   17. SEITENKOPF (Unterseiten)
   ============================================================ */
.page-hero{
  position:relative; min-height:clamp(400px,58vh,600px);
  display:grid; place-items:center; text-align:center;
  overflow:hidden; padding-block:160px 90px; background:var(--bg-2);
}
.page-hero__bg{ position:absolute; inset:0; }
.page-hero__bg img{ width:100%; height:100%; object-fit:cover; }
.page-hero__bg::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,8,12,.86), rgba(8,8,12,.72) 50%, var(--page-bg) 100%);
}
.page-hero__in{ position:relative; z-index:2; }
.crumbs{
  margin-top:22px; font-size:.6rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--muted-2);
}
.crumbs a{ color:var(--muted); transition:color .3s; }
.crumbs a:hover{ color:var(--gold); }
.crumbs span{ color:var(--gold); }

/* ============================================================
   18. FORMULAR
   ============================================================ */
.form-wrap{
  display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(40px,5vw,80px);
  align-items:start;
}
.form{ display:grid; gap:20px; }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.field{ display:flex; flex-direction:column; gap:9px; }
.field label{
  font-size:.6rem; letter-spacing:.3em; text-transform:uppercase; color:var(--muted);
}
.field input,.field select,.field textarea{
  width:100%; padding:15px 18px;
  background:var(--surface); color:var(--text);
  border:1px solid var(--line); border-radius:0;
  font-family:var(--font-body); font-size:.95rem; font-weight:300;
  transition:border-color .4s var(--ease), background .4s var(--ease);
  appearance:none;
}
.field select{
  background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position:calc(100% - 20px) 22px, calc(100% - 14px) 22px;
  background-size:6px 6px,6px 6px; background-repeat:no-repeat;
}
.field textarea{ min-height:150px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--gold); background:var(--surface-2);
}
.field input::placeholder,.field textarea::placeholder{ color:var(--muted-2); }
.form__hp{ position:absolute; left:-9999px; opacity:0; }
.form__note{ font-size:.78rem; color:var(--muted-2); line-height:1.7; }

.notice{ padding:16px 20px; border:1px solid; font-size:.9rem; }
.notice--ok{ border-color:rgba(120,200,140,.5); background:rgba(120,200,140,.09); color:#a9e0b8; }
.notice--err{ border-color:rgba(230,120,120,.5); background:rgba(230,120,120,.09); color:#f0b4b4; }

/* Der direkte Weg über WhatsApp, oberhalb des Formulars */
.wa-direkt{
  display:flex; flex-wrap:wrap; align-items:center; gap:16px;
  margin-bottom:34px; padding-bottom:32px;
  border-bottom:1px solid var(--line);
}
.wa-direkt .btn{ gap:12px; }
.wa-direkt .btn svg{ flex:none; }
.wa-direkt span{
  font-size:.86rem; line-height:1.6; color:var(--muted); max-width:30ch;
}

.info-card{
  background:var(--surface); border:1px solid var(--line);
  padding:clamp(28px,3vw,40px);
}
.info-list{ display:grid; gap:26px; margin-top:8px; }
.info-list li b{
  display:block; font-size:.58rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold); font-weight:400; margin-bottom:7px;
}
.info-list li a,.info-list li span{ color:var(--text); font-size:1rem; }
.info-list li a:hover{ color:var(--gold); }

/* FAQ */
.faq{ display:grid; gap:2px; max-width:900px; margin-inline:auto; }
.faq__item{ background:var(--surface); border:1px solid var(--line); }
.faq__q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:24px clamp(20px,2.4vw,32px); text-align:left;
  font-family:var(--font-display); font-size:clamp(1.05rem,1.5vw,1.28rem);
  transition:color .35s;
}
.faq__q:hover{ color:var(--gold); }
.faq__q i{ font-style:normal; color:var(--gold); flex:none; transition:transform .45s var(--ease); }
.faq__item.is-open .faq__q i{ transform:rotate(45deg); }
.faq__a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s var(--ease); }
.faq__item.is-open .faq__a{ grid-template-rows:1fr; }
.faq__a > div{ overflow:hidden; }
.faq__a p{
  padding:0 clamp(20px,2.4vw,32px) 26px; color:var(--muted); font-size:.95rem; margin:0;
}

/* ============================================================
   19. FOOTER
   ============================================================ */
.site-footer{ background:var(--bg-2); border-top:1px solid var(--line); }
.footer__top{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:clamp(30px,4vw,60px);
  padding-block:clamp(60px,7vw,96px);
}
.footer__col h4{
  font-family:var(--font-body); font-size:.6rem; letter-spacing:.32em;
  text-transform:uppercase; color:var(--gold); margin-bottom:22px; font-weight:400;
}
.footer__col ul{ display:grid; gap:12px; }
.footer__col a,.footer__col li{ color:var(--muted); font-size:.92rem; }
.footer__col a:hover{ color:var(--text); }
/* In der Fusszeile hat das Logo Platz — hier steht die grosse Fassung.
   Die Fusszeile ist in beiden Fassungen dunkel, deshalb reines Gold. */
.footer__logo{ display:block; color:var(--gold); }
.footer__logo svg{ display:block; width:auto; height:104px; }
.footer__brand p{ color:var(--muted); font-size:.92rem; max-width:34ch; margin-top:20px; }
.socials{ display:flex; gap:10px; margin-top:24px; }
.socials a{
  display:grid; place-items:center; width:40px; height:40px;
  border:1px solid var(--line-2); color:var(--muted);
  transition:background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.socials a:hover{ background:var(--gold); color:#0b0b10; border-color:var(--gold); }
.socials svg{ width:17px; height:17px; fill:currentColor; }
.footer__bottom{
  border-top:1px solid var(--line); padding-block:26px;
  display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:center;
  font-size:.72rem; color:var(--muted-2);
}
.footer__bottom nav{ display:flex; gap:24px; }

/* ============================================================
   20. SCROLL-REVEALS
   ============================================================ */
[data-reveal]{
  opacity:0; transform:translate3d(0,44px,0);
  transition:opacity .95s var(--ease), transform .95s var(--ease);
}
[data-reveal="3d"]{ transform:translate3d(0,60px,0) rotateX(14deg); transform-origin:50% 100%; }
[data-reveal].is-in{ opacity:1; transform:none; }
[data-reveal][data-delay="1"]{ transition-delay:.1s; }
[data-reveal][data-delay="2"]{ transition-delay:.2s; }
[data-reveal][data-delay="3"]{ transition-delay:.3s; }
[data-reveal][data-delay="4"]{ transition-delay:.4s; }
[data-reveal][data-delay="5"]{ transition-delay:.5s; }

/* ============================================================
   21. WORDPRESS-STANDARDKLASSEN
   ============================================================ */
.entry-content{ max-width:760px; margin-inline:auto; }
.entry-content > * + *{ margin-top:1.3em; }
.entry-content h2{ font-size:clamp(1.7rem,3vw,2.4rem); margin-top:1.8em; }
.entry-content h3{ font-size:clamp(1.3rem,2.2vw,1.7rem); margin-top:1.6em; }
.entry-content a{ color:var(--gold); text-decoration:underline; text-underline-offset:4px; }
.entry-content ul,.entry-content ol{ padding-left:1.3em; }
.entry-content ul{ list-style:disc; }
.entry-content ol{ list-style:decimal; }
.entry-content li{ margin-bottom:.5em; color:var(--muted); }
.entry-content blockquote{
  border-left:2px solid var(--gold); padding-left:26px; font-style:italic;
  font-family:var(--font-display); font-size:1.3rem;
}
.alignleft{ float:left; margin:0 2em 1.4em 0; }
.alignright{ float:right; margin:0 0 1.4em 2em; }
.aligncenter{ margin-inline:auto; }
.wp-caption-text,figcaption{ font-size:.78rem; color:var(--muted-2); margin-top:10px; }
.wp-block-image img{ height:auto; }

/* ============================================================
   21b. ANPASSUNGEN DER HELLEN FASSUNG
   Auf Elfenbein ist das Gold dunkler — deshalb steht dort weiße
   statt schwarzer Schrift darauf. Bilder dürfen heller bleiben.
   ============================================================ */
html[data-theme="light"]{
  --on-gold:#ffffff;
}
html[data-theme="light"] ::selection{ background:var(--gold); color:#fff; }

html[data-theme="light"] .btn{ --btn-fg:var(--on-gold); }
html[data-theme="light"] .btn::after{ background:var(--text); }
html[data-theme="light"] .btn:hover{ color:var(--bg); }
html[data-theme="light"] .btn--ghost{ --btn-fg:var(--text); }
html[data-theme="light"] .btn--ghost::after{ background:var(--gold); }
html[data-theme="light"] .btn--ghost:hover{ color:var(--on-gold); }

html[data-theme="light"] .langsw__item.is-active{ color:var(--on-gold); }
html[data-theme="light"] .split__badge{ color:var(--on-gold); }
html[data-theme="light"] .member__tag{ color:var(--on-gold); }

/* Bilder auf hellem Grund nicht künstlich abdunkeln */
html[data-theme="light"] .svc--img .svc__media img{ filter:brightness(.82) saturate(.95); }
html[data-theme="light"] .svc--img:hover .svc__media img{ filter:brightness(.95) saturate(1); }
html[data-theme="light"] .gal__item img{ filter:saturate(.95) brightness(1); }
html[data-theme="light"] .member__media img{ filter:grayscale(.18) contrast(1.02); }
html[data-theme="light"] .member__media{ background:var(--surface-2); }

/* Karten bekommen auf Hell eine leichte Tiefe statt nur einer Linie */
html[data-theme="light"] .svc,
html[data-theme="light"] .quote,
html[data-theme="light"] .stat,
html[data-theme="light"] .info-card,
html[data-theme="light"] .faq__item{ box-shadow:0 1px 2px rgba(60,45,25,.05); }
html[data-theme="light"] .quote:hover{ box-shadow:0 18px 40px rgba(60,45,25,.12); }
html[data-theme="light"] .gal__item:hover{ box-shadow:var(--shadow); }

/* Der Übergang vom dunklen Kopfbild in die helle Seite */
html[data-theme="light"] .hero__layer--grid{ opacity:.28; }

/* Vorhang beim Seitenwechsel in der Grundfarbe der Fassung */
html[data-theme="light"] #pagefade{ background:#faf7f2; }

/* ============================================================
   22. RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .svc-grid{ grid-template-columns:repeat(2,1fr); }
  .team-grid{ grid-template-columns:repeat(2,1fr); }
  .quotes{ grid-template-columns:1fr; }
  .footer__top{ grid-template-columns:1fr 1fr; }
  .stats{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:860px){
  .burger{ display:flex; }
  .header__cta{ display:none; }
  .site-header{ padding-block:14px; }
  .site-header.is-stuck{ padding-block:10px; }

  /* Menü als Vollbild-Ebene. Deckend statt durchscheinend: der
     Unschärfe-Filter erzeugte auf dem Handy eine sichtbare Kante
     und kostet unnötig Leistung. */
  .nav{
    position:fixed; inset:0; z-index:1;
    background:#08080c;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:44px; margin-left:0; padding:100px 24px 40px;
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .4s var(--ease), visibility .4s;
    overflow-y:auto;
  }
  html[data-theme="light"] .nav{ background:var(--bg); }
  .nav-open .nav{ opacity:1; visibility:visible; pointer-events:auto; }
  .nav__list{ flex-direction:column; gap:26px; text-align:center; }
  .nav__list a{ font-size:1.15rem; letter-spacing:.2em; color:var(--hdr-fg); }
  html[data-theme="light"] .nav__list a{ color:var(--text); }

  /* Sprache und Fassung stehen im geöffneten Menü, nicht mehr in der Kopfzeile. */
  .nav .switches{ margin:0; gap:12px; }
  .nav .langsw__item,.nav .themesw__btn{
    min-width:60px; min-height:46px; padding:12px 16px; font-size:.66rem;
    color:var(--hdr-muted);
  }
  html[data-theme="light"] .nav .langsw__item,
  html[data-theme="light"] .nav .themesw__btn{ color:var(--muted); }
  .nav .langsw,.nav .themesw{ border-color:var(--hdr-line); }
  html[data-theme="light"] .nav .langsw,
  html[data-theme="light"] .nav .themesw{ border-color:var(--line-2); }

  /* Marke und Burger bleiben über der Menü-Ebene bedienbar. */
  .brand,.burger{ position:relative; z-index:2; }
  /* Bei offenem Menü ist der Grund immer dunkel bzw. hell — Schrift anpassen. */
  .nav-open .site-header{ --hdr-fg:#f4f1ea; --hdr-muted:rgba(244,241,234,.66); --hdr-line:rgba(255,255,255,.24); }
  html[data-theme="light"] .nav-open .site-header{ --hdr-fg:var(--text); --hdr-muted:var(--muted); --hdr-line:var(--line-2); }
  body.nav-open{ overflow:hidden; }

  /* Auf dem Handy ist das Menüband schmaler — das Logo geht mit. */
  .brand__logo svg{ height:50px; }
  .site-header.is-stuck .brand__logo svg{ height:42px; }
  .header__inner{ gap:12px; }

  .split{ grid-template-columns:1fr; }
  .split__media::after{ display:none; }
  .split__badge{ left:auto; right:-8px; bottom:-14px; padding:16px 20px; }
  .team-grid{ grid-template-columns:1fr; }
  .form-wrap{ grid-template-columns:1fr; }
  .gal{ grid-template-columns:repeat(2,1fr); }

  /* svh statt vh: die Adressleiste des Handys ändert vh beim Scrollen,
     dadurch sprangen die Sticky-Sektionen. */
  .cine{ height:340svh; }
  .tunnel{ height:380svh; }
  .cine__sticky,.tunnel__sticky{ height:100svh; }

  .tunnel__panel{ width:min(420px,86vw); padding:26px 22px; }
  .tunnel__head{ top:clamp(58px,9vh,90px); }
  .cine__progress{ bottom:30px; }
}

@media (max-width:600px){
  .svc-grid{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .gal{ grid-template-columns:1fr; }
  .gal__item--wide{ grid-column:span 1; }
  .form__row{ grid-template-columns:1fr; }
  .footer__top{ grid-template-columns:1fr; text-align:center; }
  .footer__brand p{ margin-inline:auto; }
  .footer__logo{ display:flex; justify-content:center; }
  .footer__logo svg{ height:88px; }
  .socials{ justify-content:center; }
  .footer__bottom{ flex-direction:column; gap:18px; text-align:center; }
  .footer__bottom nav{ justify-content:center; }

  .hero__actions{ flex-direction:column; align-items:stretch; }
  .hero__actions .btn{ width:100%; }
  .hero__content{ padding-block:120px 100px; }
  .hero__title{ margin-bottom:20px; }
  .hero__sub{ margin-bottom:34px; }

  /* Die flankierenden Striche der Kleinzeile brechen auf schmalen
     Displays unschön um — auf Handy nur der Text. */
  .eyebrow{ letter-spacing:.3em; }
  .eyebrow::before,.eyebrow--center::after{ display:none; }

  .section{ padding-block:clamp(64px,12vw,90px); }
  .cta{ padding-block:clamp(76px,16vw,110px); }
  .svc{ min-height:0; }
  .quote{ padding:26px 22px; }
  .gal__item img,.gal__item--tall img{ aspect-ratio:4/3; }
  .stat b{ font-size:clamp(2.2rem,11vw,3rem); }
  .stat span{ letter-spacing:.24em; font-size:.55rem; }
  .cine__line p{ letter-spacing:.28em; }
  .info-card{ padding:26px 22px; }
}

/* Sehr schmale Geräte */
@media (max-width:380px){
  .brand__logo svg{ height:44px; }
  .site-header.is-stuck .brand__logo svg{ height:38px; }
  .langsw__item,.themesw__btn{ min-width:34px; padding:7px 7px; }
}

/* ============================================================
   23. REDUZIERTE BEWEGUNG
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  .hero__title .line > span{ transform:none; }
  .hero__sub,.hero__actions{ opacity:1; }
  .tunnel__panel{ opacity:1; }
}