/*
Theme Name: Estetic Studio
Theme URI: https://estetic-studio.com
Author: Estetic Studio
Description: Theme für Kosmetik- und Hautästhetik-Studios. Zweisprachig Deutsch/Russisch, mit Preisliste nach Kategorien, heller und dunkler Fassung, WhatsApp-Terminanfrage — komplett über den WordPress-Customizer editierbar.
Version: 1.4.2
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: est
Tags: beauty, salon, spa, one-page, custom-colors, custom-logo, custom-menu, featured-images, translation-ready
*/

/* ============================================================
   1. TOKENS
   ============================================================ */
:root{
  /* Markenfarbe aus dem Customizer — das Blush der bestehenden Website. */
  --accent:    #e2bcae;

  --bg:        #1d1e20;
  --bg-2:      #232427;
  --surface:   #2a2b2e;
  --surface-2: #323337;
  --line:      rgba(255,255,255,.10);
  --line-2:    rgba(255,255,255,.18);

  --gold:      var(--accent);
  --gold-2:    #efd6c9;

  --text:      #fbf9f6;
  --muted:     #b3aca6;   /* 8.0:1 auf dem Grund */
  --muted-2:   #97908a;   /* 5.6:1 */

  --shadow:    0 30px 70px rgba(0,0,0,.5);
  --on-gold:   #1d1e20;   /* Anthrazit auf reinem Blush: 9.6:1 */

  /* Bodoni Moda und DM Sans wie auf der bestehenden Seite.
     Playfair und Manrope springen für Kyrillisch ein — die beiden
     Markenschriften bringen keine kyrillischen Zeichen mit. */
  --font-display: 'Bodoni Moda', 'Playfair Display', 'Iowan Old Style', Georgia, serif;
  --font-body:    'DM Sans', 'Manrope', 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:        #fbf9f6;   /* das Elfenbein der bestehenden Seite */
  --bg-2:      #f4efe9;
  --surface:   #ffffff;
  --surface-2: #faf5f1;
  --line:      rgba(29,30,32,.11);
  --line-2:    rgba(29,30,32,.20);

  /* Blush ist hell — auf Elfenbein muss es kräftig abgedunkelt werden,
     sonst ist Text darin nicht lesbar. Werte sind nachgerechnet. */
  --gold:      color-mix(in srgb, var(--accent) 38%, #3d2018);
  --gold-2:    color-mix(in srgb, var(--accent) 34%, #3d2018);

  --text:      #1d1e20;
  --muted:     #5f5a56;
  --muted-2:   #6f6862;

  --shadow:    0 24px 60px rgba(90,60,50,.13);
  --on-gold:   #ffffff;   /* Weiss auf abgedunkeltem Blush: 6.1:1 */
}

/* Grundfarbe der Seite — wird gebraucht, damit Bildbereiche
   sauber in die Seite auslaufen können. */
:root{ --page-bg:#1d1e20; }
html[data-theme="light"]{ --page-bg:#fbf9f6; }

/* ============================================================
   1c. HELLE BILDINSELN
   Kopfbild, Filmsequenzen und Ablauf zeigen lichtdurchflutete
   Aufnahmen — Behandlungsraum und Hautnahaufnahmen. Darüber
   gehört dunkle Schrift, und zwar in beiden Fassungen. Sonst
   verschwindet der Text im hellen Bild.
   ============================================================ */
.hero, .page-hero{
  --on-gold:   #ffffff;
  --bg:        #fbf9f6;
  --bg-2:      #f4efe9;
  --surface:   #ffffff;
  --surface-2: #faf5f1;
  --line:      rgba(29,30,32,.12);
  --line-2:    rgba(29,30,32,.22);
  --gold:      color-mix(in srgb, var(--accent) 38%, #3d2018);
  --gold-2:    color-mix(in srgb, var(--accent) 34%, #3d2018);
  --text:      #1d1e20;
  --muted:     #4f4a46;
  --muted-2:   #6f6862;
  --shadow:    0 24px 60px rgba(90,60,50,.16);
  color:var(--text);
}

/* ============================================================
   1d. DUNKLE INSELN
   Abschluss und Fusszeile bleiben im Anthrazit der Marke — sie
   rahmen die helle Seite unten ab.
   ============================================================ */
.cta, .site-footer{
  --on-gold:   #1d1e20;
  --bg:        #1d1e20;
  --bg-2:      #232427;
  --surface:   #2a2b2e;
  --surface-2: #323337;
  --line:      rgba(255,255,255,.10);
  --line-2:    rgba(255,255,255,.18);
  --gold:      var(--accent);
  --gold-2:    #efd6c9;
  --text:      #fbf9f6;
  --muted:     #b3aca6;
  --muted-2:   #97908a;
  --shadow:    0 30px 70px rgba(0,0,0,.5);
  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:400;
  font-size:clamp(16px,1.05vw,17.5px);
  line-height:1.8;
  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{ margin:0; font-weight:400; line-height:1.1; letter-spacing:-.01em; font-family:var(--font-display); }
/* Bodoni Moda ist eine Didone: hauchdünne Striche, die erst ab etwa 2rem
   sauber stehen. Kleinere Überschriften laufen deshalb in DM Sans. */
h3,h4{ margin:0; font-weight:500; line-height:1.35; letter-spacing:0; font-family:var(--font-body); }
p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }
::selection{ background:var(--gold); color:var(--on-gold); }

: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:var(--on-gold); 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:.74rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--gold);
  margin:0 0 22px; font-weight:500;
}
.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(2rem,3.6vw,3.1rem); }
.h-md{ font-size:clamp(1.6rem,2.8vw,2.35rem); }
.h-sm{ font-size:clamp(1.25rem,1.9vw,1.6rem); }
em,.it{ font-style:italic; color:var(--gold-2); }

.lede{
  font-size:clamp(1.02rem,1.3vw,1.16rem);
  line-height:1.85; color:var(--muted); max-width:58ch;
}
.muted{ color:var(--muted); }
.center{ text-align:center; }
.center .lede{ margin-inline:auto; }

/* ============================================================
   4. BUTTONS
   ============================================================ */
.btn{
  --btn-bg:var(--gold); --btn-fg:var(--on-gold); --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:.74rem; font-weight:500; letter-spacing:.14em; 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:var(--bg); }

.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:    #1d1e20;
  --hdr-muted: rgba(29,30,32,.72);
  --hdr-line:  rgba(29,30,32,.24);

  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:15px; color:var(--hdr-fg); }

/* Das EM-Monogramm. Über dem hellen Kopfbild ist der Goldton immer der
   reine Markenton — dort wäre das für Elfenbein abgedunkelte Gold zu
   schwach. Erst wenn das Menüband andockt, übernimmt es die Farbe der
   jeweiligen Fassung. Dieselbe Logik wie bei --hdr-fg. */
.site-header{ --logo:var(--gold); }

.brand__mark{
  display:block; flex:none; color:var(--logo);
  transition:opacity .45s var(--ease);
}
.brand__mark svg{
  display:block; width:auto; height:44px;
  transition:height .5s var(--ease);
}
.site-header.is-stuck .brand__mark svg{ height:36px; }
.brand:hover .brand__mark{ opacity:.75; }

/* Der Schriftzug bleibt echter Text, keine Grafik: So bleibt er in jeder
   Grösse gestochen scharf, nimmt die Farbe der Fassung an und lässt sich
   von Suchmaschinen und Vorlesehilfen lesen. */
.brand__text{ display:flex; flex-direction:column; line-height:1.2; min-width:0; }
.brand__name{
  font-family:var(--font-body); font-weight:400;
  font-size:1.02rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--hdr-fg); white-space:nowrap;
}
.brand__sub{
  margin-top:3px;
  font-size:.58rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--hdr-muted); white-space:nowrap;
}
.brand img.custom-logo{ max-height:52px; width:auto; }

/* Die ganze Wort-Bild-Marke in der Fusszeile */
.footer__logo{ display:block; color:var(--gold); }
.footer__logo svg{ display:block; width:auto; max-width:100%; height:132px; }
.footer__logo .logo-tinte{ color:var(--text); }

/* 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:.78rem; letter-spacing:.1em; text-transform:uppercase; font-weight:500;
  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:var(--on-gold); }

.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. KOPFBEREICH
   Zweispaltig gedacht: Das Foto bringt die helle Fläche links
   bereits mit, der Text setzt sich einfach hinein.
   ============================================================ */
.hero{
  position:relative;
  min-height:clamp(540px, 76svh, 720px);
  display:grid; align-items:center;
  overflow:hidden;
  background:var(--bg);
  padding-top:96px;   /* Platz für die fixierte Kopfzeile */
}
.hero__bild{ position:absolute; inset:0; }
.hero__bild img{ width:100%; height:100%; object-fit:cover; object-position:center right; }
.hero__bild::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,
    var(--page-bg) 0%, rgba(251,249,246,.92) 34%, rgba(251,249,246,.55) 52%, transparent 72%);
}
.hero__content{ position:relative; z-index:2; max-width:var(--shell); }
/* Bewusst kleiner als die Standard-Grossüberschrift: eine Kosmetikseite
   wirkt mit ruhiger Typografie hochwertiger als mit Plakatgrösse. */
.hero__title{
  margin:0 0 26px; max-width:16ch;
  font-size:clamp(2.3rem, 4.4vw, 3.7rem);
  line-height:1.12;
}
.hero__sub{
  max-width:42ch; margin:0 0 38px;
  color:var(--muted);
  font-size:clamp(1.02rem,1.3vw,1.16rem); line-height:1.85;
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; }

@media (max-width:860px){
  /* Auf dem Handy steht das Foto oben, der Text darunter — sonst
     läge die Schrift auf Erikas Gesicht.
     Wichtig: kein Abstand über dem Bild. Die Kopfzeile ist oben noch
     durchsichtig, das Foto läuft also bis an den oberen Rand. Mit dem
     alten Abstand von 96px stand darüber ein leerer heller Streifen —
     das Bild wirkte dadurch verrutscht. */
  .hero{
    min-height:0; display:block;
    padding-top:0; padding-bottom:clamp(34px,7vw,54px);
  }
  /* Erika steht rechts im Bild — deshalb hochkant zuschneiden und den
     Ausschnitt nach rechts schieben, sonst fällt sie aus dem Rahmen.

     Wichtig: hier KEIN aspect-ratio zusammen mit max-height. Safari
     rechnet aus dem Seitenverhältnis die Breite zurück, sobald die
     Höhe begrenzt ist — das Bild stand dadurch auf dem iPhone schmaler
     als der Bildschirm, mit heller Fläche daneben. Chrome macht das
     nicht, deshalb fällt es am Rechner nicht auf.
     Stattdessen eine feste Höhe und volle Breite; den Zuschnitt
     übernimmt object-fit. Das verhält sich in jedem Browser gleich.

     svh statt vh: die Adressleiste des Handys verändert vh beim
     Scrollen, dadurch sprang das Bild in der Höhe. Die vh-Zeile davor
     bleibt als Rückfall für ältere Browser stehen. */
  .hero__bild{
    position:relative; inset:auto;
    width:100%; overflow:hidden;
    aspect-ratio:auto; max-height:none;
    height:54vh;
    height:clamp(320px, 52svh, 560px);
  }
  .hero__bild picture{ display:block; width:100%; height:100%; }
  .hero__bild img{ width:100%; height:100%; object-fit:cover; object-position:center 20%; }
  .hero__bild::after{
    background:
      /* oben ein heller Schleier, damit Logo und Menü lesbar bleiben */
      linear-gradient(180deg, rgba(251,249,246,.90) 0, rgba(251,249,246,.42) 62px, transparent 128px),
      /* unten weicher Übergang in die Seitenfarbe */
      linear-gradient(180deg, transparent 58%, var(--bg) 100%);
  }
  .hero__content{ padding-top:clamp(22px,6vw,32px); text-align:center; }
  .hero__title{ max-width:none; }
  .hero__sub{ max-width:none; margin-inline:auto; }
  .hero__actions{ justify-content:center; }

  /* Seitenkopf der Unterseiten: auf dem Handy niedriger, sonst muss
     man erst an einem halbleeren Bild vorbeiscrollen. */
  .page-hero{ min-height:clamp(300px,42svh,420px); padding-block:128px 60px; }
}

/* ============================================================
   7. LAUFBAND
   ============================================================ */
.ticker{
  border-block:1px solid var(--line); background:var(--bg-2);
  padding-block:18px; 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-body); font-size:clamp(.82rem,1.1vw,.95rem);
  color:var(--muted); letter-spacing:.14em; text-transform:uppercase;
}
.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:var(--on-gold); 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; }

/* ============================================================
   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.18rem,1.6vw,1.35rem); margin-bottom:6px; letter-spacing:.01em; }
.svc__sub{
  font-size:.8rem; letter-spacing:.06em; color:var(--gold);
  margin:0 0 14px; font-weight:500;
}
.svc p{ color:var(--muted); font-size:.97rem; 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);
}

/* ── Dauer und Preis auf der Behandlungskarte ── */
.svc__meta{
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  margin:18px 0 0; padding-top:16px; border-top:1px solid var(--line);
}
.svc__dauer{
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted-2);
}
.svc__preis{
  margin-left:auto; font-family:var(--font-display);
  font-size:1.05rem; color:var(--gold);
}

/* ============================================================
   10b. PREISLISTE
   Nach Kategorien gegliedert wie auf der Preisseite: Titel,
   darunter die Positionen mit Führungspunkten zum Preis.
   Zwei Spalten am Rechner, eine auf dem Handy.
   ============================================================ */
.preise{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:clamp(20px,2.2vw,32px);
  align-items:start;
}
.preise__gruppe{
  padding:clamp(24px,2.6vw,32px) clamp(22px,2.4vw,30px);
  background:var(--surface); border:1px solid var(--line);
}
.preise__gruppe-titel{
  margin:0 0 6px; font-family:var(--font-display);
  font-size:clamp(1.24rem,1.9vw,1.5rem); font-weight:400;
  letter-spacing:.01em; line-height:1.3;
}
.preise__gruppe-sub{
  display:inline-block; margin-left:8px;
  font-family:var(--font-body); font-size:.82rem;
  letter-spacing:.06em; color:var(--muted-2);
}
.preise__zeile{
  display:flex; align-items:baseline; gap:8px;
  padding:11px 0; border-bottom:1px solid var(--line);
}
.preise__zeile:last-child{ border-bottom:0; padding-bottom:0; }
.preise__pos{
  font-size:clamp(.96rem,1.2vw,1.04rem); line-height:1.5;
  color:var(--text);
}
/* Führungspunkte zwischen Position und Preis — wie auf einer Karte. */
.preise__fuehrung{
  flex:1 1 18px; min-width:18px; align-self:flex-end;
  border-bottom:1px dotted var(--line-2); transform:translateY(-5px);
}
.preise__preis{
  font-family:var(--font-body); font-weight:500;
  font-size:clamp(.96rem,1.2vw,1.04rem); color:var(--gold);
  white-space:nowrap; font-variant-numeric:tabular-nums;
}
.preise__zwischen{
  margin:20px 0 4px; font-size:.62rem; letter-spacing:.26em;
  text-transform:uppercase; color:var(--muted-2);
}
.preise__zwischen + .preise__zeile{ border-top:1px solid var(--line); }

/* Wirkungen als ruhige Schlagworte unter der Liste */
.preise__tags{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:10px; margin-top:clamp(34px,4vw,50px);
}
.preise__tag{
  padding:9px 18px; border:1px solid var(--line-2);
  font-size:.64rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted); border-radius:999px;
}
.preise__hinweis{
  margin:26px auto 0; font-size:.82rem; line-height:1.75;
  color:var(--muted-2); max-width:70ch; text-align:center;
}

@media (max-width:760px){
  .preise{ grid-template-columns:1fr; gap:18px; }
  .preise__gruppe{ padding:22px 20px; }
  .preise__hinweis{ text-align:left; }
}

/* ============================================================
   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:var(--on-gold); padding:9px 20px;
  font-size:.58rem; letter-spacing:.3em; text-transform:uppercase;
}
.member__body{ padding-top:28px; transform:translateZ(40px); }
.member__body h3{ font-family:var(--font-display); font-size:clamp(1.7rem,2.6vw,2.2rem); font-weight:400; margin-bottom:8px; }
.member__role{
  font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; font-weight:500;
  color:var(--gold); margin-bottom:18px;
}
.member__body p{ color:var(--muted); font-size:.95rem; }
.member__skills{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.pill{
  font-size:.72rem; letter-spacing:.06em; text-transform:none;
  padding:8px 16px; border:1px solid var(--line-2); color:var(--muted);
}

/* ============================================================
   12b. EINBLICK-VIDEO
   ============================================================ */
.einblick{ margin-top:26px; padding-top:24px; border-top:1px solid var(--line); }
.einblick__titel{
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; font-weight:500;
  color:var(--gold); margin:0 0 14px;
}
.einblick__video{ width:100%; 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);
  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);
}


/* ============================================================
   10c. BILDBAND
   Bild und Aussage nebeneinander. Hochformataufnahmen müssen so
   nicht auf ein Breitformat zurechtgeschnitten werden.
   ============================================================ */
.band{ padding-block:clamp(70px,9vw,120px); }
.band__inner{
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(36px,5vw,80px); align-items:center;
}
.band__bild img{
  width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center 42%;
}
.band__text p.h-md{
  font-family:var(--font-display); line-height:1.16;
  margin:0 0 22px; max-width:20ch;
}
.band__text em{ font-style:italic; color:var(--gold-2); }
.band__text .lede{ max-width:44ch; }

@media (max-width:860px){
  .band__inner{ grid-template-columns:1fr; gap:30px; }
  .band__bild img{ aspect-ratio:3/2; object-position:center 40%; }
  .band__text p.h-md{ max-width:none; }
}

/* ============================================================
   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:.78rem; letter-spacing:.08em; font-weight:500; text-transform:uppercase; color:var(--muted);
  /* Lange deutsche Wörter wie „Behandlungsgeräte“ passen auf schmalen
     Displays nicht in eine Kachel und schoben sie sonst über den Rand.
     Erst Silbentrennung, im Notfall Umbruch mitten im Wort.
     Getrennt wird erst ab zwölf Zeichen — sonst zerlegt der Browser
     auch „Betreuung“, obwohl daneben ein Leerzeichen zum Umbrechen wäre. */
  -webkit-hyphens:auto; hyphens:auto; overflow-wrap:anywhere;
  hyphenate-limit-chars:12 6 4;
  -webkit-hyphenate-limit-before:6; -webkit-hyphenate-limit-after:4;
}

/* ============================================================
   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,58svh,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; }
/* Zum Schluss die Farbe des Kopfbereichs selbst (--bg), nicht die der
   Seite. Der Kopfbereich ist in beiden Fassungen hell — mit --page-bg
   entstand in der dunklen Fassung unten ein dunkler Balken. */
.page-hero__bg::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(251,249,246,.72), rgba(251,249,246,.60) 50%, var(--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; }

.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:.76rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--gold); margin-bottom:22px; font-weight:500;
}
.footer__col ul{ display:grid; gap:12px; }
.footer__col a,.footer__col li{ color:var(--muted); font-size:.96rem; }
.footer__col a:hover{ color:var(--text); }
.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:var(--on-gold); 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::after{ background:var(--text); }
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 */

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

/* ============================================================
   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); }
  /* Der aktive Sprachknopf hat einen goldenen Grund. Die allgemeine
     Regel darüber färbte ihn gedämpft ein — auf Gold war „DE" dadurch
     kaum zu lesen. Hier bekommt er seine Kontrastfarbe zurück. */
  .nav .langsw__item.is-active,
  html[data-theme="light"] .nav .langsw__item.is-active{ color:var(--on-gold,#1d1e20); }
  .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. */
  /* Bei offenem Menü muss der Unschärfe-Filter der angedockten Kopfzeile
     weg. Ein Element mit backdrop-filter wird zum Bezugsrahmen für alles,
     was darin position:fixed ist — das Menü spannte sich dann nur über
     den Kopfzeilen-Streifen statt über den Bildschirm. Sichtbar war das
     erst, wenn man vor dem Öffnen gescrollt hatte. */
  .nav-open .site-header{
    backdrop-filter:none; -webkit-backdrop-filter:none; background:transparent;
  }
  .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 rückt alles enger zusammen. */
  .brand{ gap:11px; }
  .brand__mark svg{ height:38px; }
  .site-header.is-stuck .brand__mark svg{ height:32px; }
  .brand__name{ font-size:.8rem; letter-spacing:.15em; }
  .brand__sub{ font-size:.5rem; letter-spacing:.2em; }
  .header__inner{ gap:12px; }
  .footer__logo svg{ height:112px; }

  .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. */

}

@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:104px; }
  .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%; }
  /* Früher standen hier 120px Abstand nach oben — ein Rest aus der
     Fassung, in der der Text noch über dem Bild lag. Auf dem Handy
     schob das die Überschrift weit unter den sichtbaren Bereich. */
  .hero__title{
    margin-bottom:16px;
    /* „Sichtbare Ergebnisse." lief sonst bis an beide Ränder. */
    font-size:clamp(1.85rem,8.4vw,2.6rem);
  }
  .hero__sub{ margin-bottom:28px; font-size:1rem; line-height:1.75; }

  /* Die flankierenden Striche der Kleinzeile brechen auf schmalen
     Displays unschön um — auf Handy nur der Text. */
  .eyebrow{ letter-spacing:.14em; font-size:.7rem; }
  .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); }
  .info-card{ padding:26px 22px; }
}

/* Sehr schmale Geräte */
@media (max-width:400px){
  /* Ganz schmal bleibt nur Monogramm und Name — die Unterzeile würde
     den Namen sonst über den Rand drücken. */
  .brand__sub{ display:none; }
  .brand{ gap:9px; }
  .brand__mark svg{ height:34px; }
  .site-header.is-stuck .brand__mark svg{ height:30px; }
  .brand__name{ font-size:.72rem; letter-spacing:.1em; }
  .langsw__item,.themesw__btn{ min-width:34px; padding:7px 7px; }

  /* Die Kennzahl-Kacheln sind zu zweit nebeneinander nur noch gut
     130 px breit — mit 24 px Innenabstand bleibt für den Text zu wenig. */
  .stat{ padding:26px 12px; }
  .stat span{ font-size:.68rem; letter-spacing:.04em; }
}

/* ============================================================
   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__sub,.hero__actions{ opacity:1; }
}