/* =============================================================
   BIWERPLAN · Edis Michael Biwer
   Design System & Styles
   "Quiet Luxury" / Boutique Wealth Office
   ============================================================= */

/* ---------- 1. DESIGN TOKENS (CSS Custom Properties) ---------- */
:root{
  /* Farben */
  --navy:#0A1428;          /* Tiefes Mitternachtsblau – Primär/Dunkelflächen */
  --navy-2:#13233F;        /* Helleres Navy – Sekundärflächen */
  --ivory:#F7F4EF;         /* Warmes Elfenbein – Haupt-Hintergrund */
  --white:#FFFFFF;         /* Reines Weiß – Kontrastflächen */
  --gold:#C2A36B;          /* Champagner-Gold – Akzent */
  --gold-dark:#A8884F;     /* Dunkleres Gold – Hover */
  --ink:#1A1A1A;           /* Anthrazit – Fließtext */
  --grey:#6B6B6B;          /* Gedämpftes Grau – Sekundärtext */
  --line:rgba(26,26,26,.12);
  --line-light:rgba(247,244,239,.16);

  /* Typo-Scale – eine einheitliche Schrift (Inter) für alles */
  --serif:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fs-hero:clamp(3rem,6vw,5.5rem);
  --fs-h2:clamp(2rem,4vw,3.25rem);
  --fs-h3:clamp(1.3rem,2.2vw,1.65rem);
  --fs-lead:clamp(1.05rem,1.4vw,1.25rem);
  --fs-eyebrow:.78rem;
  --lh-body:1.7;

  /* Spacing & Layout */
  --container:1280px;
  --section-y:clamp(80px,12vw,160px);
  --radius:2px;            /* sehr dezent – scharfe Kanten wirken hochwertig */

  /* Schatten (subtil) */
  --shadow-sm:0 1px 2px rgba(10,20,40,.05);
  --shadow-md:0 24px 60px -28px rgba(10,20,40,.32);
  --shadow-lg:0 50px 110px -40px rgba(10,20,40,.55);

  /* Easing */
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. RESET & BASE ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  font-size:1.0625rem;
  line-height:var(--lh-body);
  color:var(--ink);
  background:var(--ivory);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font-family:inherit;cursor:pointer}
::selection{background:var(--gold);color:var(--navy)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

h1,h2,h3,h4{font-family:var(--serif);color:var(--navy);font-weight:600;line-height:1.12;letter-spacing:-.01em}
strong{font-weight:600;color:var(--ink)}

/* ---------- 3. LAYOUT HELPERS ---------- */
.container{max-width:var(--container);margin-inline:auto;padding-inline:clamp(20px,5vw,48px)}
.section{padding-block:var(--section-y);scroll-margin-top:96px}
.section--ivory{background:var(--ivory)}
.section--white{background:var(--white)}
.section--navy{background:var(--navy);color:var(--ivory)}
.section--navy h1,.section--navy h2,.section--navy h3{color:var(--white)}
/* Lesbarkeit der Split-Texte auf Navy-Hintergrund */
.section--navy .split__body p{color:rgba(247,244,239,.86)}
.section--navy .split__body .lead-quote{color:var(--gold)}
.section--navy .subhead{color:var(--white)}

.eyebrow{
  display:inline-flex;align-items:center;gap:14px;
  font-family:var(--sans);font-size:var(--fs-eyebrow);font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold);
  margin-bottom:22px;
}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--gold);opacity:.7}
.eyebrow.is-centered{justify-content:center}

.section-head{max-width:720px;margin-bottom:clamp(44px,6vw,72px)}
.section-head.is-centered{margin-inline:auto;text-align:center}
.section-head.is-centered .eyebrow{justify-content:center}
.section-head h2{font-size:var(--fs-h2);margin-bottom:20px}
.section-head p{font-size:var(--fs-lead);color:var(--grey);max-width:60ch}

.lead{font-size:var(--fs-lead);color:var(--grey)}

/* ---------- 4. BUTTONS ---------- */
.btn{
  --btn-bg:var(--gold);--btn-fg:var(--navy);--btn-bd:var(--gold);
  position:relative;display:inline-flex;align-items:center;gap:12px;
  padding:17px 34px;font-family:var(--sans);font-size:.92rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--btn-fg);background:var(--btn-bg);
  border:1px solid var(--btn-bd);border-radius:var(--radius);
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease);
  will-change:transform;
}
.btn:hover{background:var(--gold-dark);border-color:var(--gold-dark);transform:translateY(-2px)}
.btn .arrow{transition:transform .35s var(--ease)}
.btn:hover .arrow{transform:translateX(5px)}

.btn--navy{--btn-bg:var(--navy);--btn-fg:var(--white);--btn-bd:var(--navy)}
.btn--navy:hover{background:#06101f;border-color:#06101f}

.btn--outline{--btn-bg:transparent;--btn-fg:var(--navy);--btn-bd:var(--line)}
.btn--outline:hover{background:var(--navy);color:var(--white);border-color:var(--navy)}

.btn--outline-light{--btn-bg:transparent;--btn-fg:var(--ivory);--btn-bd:var(--line-light)}
.btn--outline-light:hover{background:var(--gold);color:var(--navy);border-color:var(--gold)}

/* ---------- 5. SCROLL PROGRESS BAR ---------- */
.progress-bar{position:fixed;top:0;left:0;height:2px;width:0;background:var(--gold);z-index:1000;transition:width .1s linear}

/* ---------- 6. HEADER / NAV — Luxuriös, Navy wie der Kennzahlen-Bereich ---------- */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:900;
  background:rgba(10,20,40,.82);
  backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border-bottom:1px solid rgba(198,168,96,.28);
  box-shadow:0 14px 40px -20px rgba(0,0,0,.55);
  transition:padding .4s var(--ease),background .4s var(--ease);
  padding-block:14px;
}
.site-header .container{display:flex;align-items:center;justify-content:space-between;position:relative}
/* Brand: hell auf Navy, weites Letter-Spacing, dünner Gold-Akzent-Strich */
.brand{
  font-family:var(--serif);font-size:1.45rem;font-weight:600;letter-spacing:.04em;
  color:var(--ivory);
  display:inline-flex;align-items:center;gap:0;
  position:relative;padding-bottom:6px;
  transition:color .3s var(--ease);
}
.brand::after{
  content:"";position:absolute;left:0;bottom:0;
  width:32px;height:1px;background:var(--gold);
  transition:width .45s var(--ease);
}
.brand:hover::after{width:100%}
.brand span{color:var(--gold);letter-spacing:.04em}

.nav{display:flex;align-items:center;gap:clamp(20px,3vw,40px)}
.nav__links{display:flex;align-items:center;gap:clamp(18px,2.6vw,36px)}
.nav__links a{position:relative;font-size:.95rem;font-weight:500;color:rgba(247,244,239,.86);padding-block:6px;transition:color .3s var(--ease)}
.nav__links a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--gold);transition:width .35s var(--ease)}
.nav__links a:hover{color:var(--white)}
.nav__links a:hover::after{width:100%}

/* Beim Scrollen wird Navy etwas dichter + Padding schrumpft minimal */
.site-header.is-solid{padding-block:10px;background:rgba(10,20,40,.94);box-shadow:0 16px 48px -22px rgba(0,0,0,.6)}

/* Burger */
.burger{display:none;flex-direction:column;gap:6px;background:none;border:0;padding:8px;z-index:950}
.burger span{width:28px;height:1.8px;background:var(--ivory);border-radius:2px;transition:.35s var(--ease)}
.burger.is-open span:nth-child(1){transform:translateY(7.8px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-7.8px) rotate(-45deg)}

/* Vision-Sektion: Handshake-Foto als sehr dezenter Hintergrund (nur ~20% sichtbar).
   Navy-Overlay liegt über dem Foto, der Text steht klar darüber. */
.vision-bg{position:relative;overflow:hidden}
.vision-bg::before{
  content:"";position:absolute;inset:0;
  /* Auf Desktop rechts positioniert → Gesicht + Handschlag sichtbar, Text links auf dunklerem Bereich */
  background:url("../images/edis-handshake.jpg") right center/cover no-repeat;
  opacity:.3;                                  /* Foto zu ~30 % sichtbar */
  z-index:0;
}
.vision-bg::after{
  /* Navy-Verlauf: links dicht für Textlesbarkeit, rechts heller damit Foto durchscheint */
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(90deg, rgba(10,20,40,.85) 0%, rgba(10,20,40,.62) 50%, rgba(10,20,40,.30) 100%);
}
.vision-bg .container{position:relative;z-index:1}
.vision-body{max-width:560px}
.vision-body p:last-child{margin-bottom:0}
/* Mobile: Foto zentriert (kein breiter Crop), Text volle Breite, Verlauf vertikaler */
@media (max-width:860px){
  .vision-bg::before{background-position:center}
  .vision-bg::after{background:linear-gradient(180deg, rgba(10,20,40,.70) 0%, rgba(10,20,40,.80) 100%)}
  .vision-body{max-width:none}
}

/* Über mich (Text-only — Bild wurde entfernt) */
.ueber-body{max-width:760px;margin-inline:auto}
.ueber-body p{margin-bottom:14px}
.ueber-body p:last-child{margin-bottom:0}

/* ---------- 7. HERO ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;background:var(--navy);color:var(--ivory);overflow:hidden}
.hero__media{position:absolute;inset:0 0 0 auto;width:52%;height:100%}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 18%}
/* Verlauf: links Navy → rechts transparent, damit der Text lesbar bleibt */
.hero__media::after{content:"";position:absolute;inset:0;background:
   linear-gradient(90deg,var(--navy) 6%,rgba(10,20,40,.72) 38%,rgba(10,20,40,.15) 100%),
   linear-gradient(0deg,rgba(10,20,40,.5),transparent 40%)}
.hero__inner{position:relative;z-index:2;width:100%;padding-block:140px 90px}
.hero__content{max-width:660px}
.hero .eyebrow{color:var(--gold)}
.hero h1{font-size:var(--fs-hero);color:var(--white);font-weight:600;letter-spacing:-.02em;margin-bottom:26px}
.hero__quote{font-family:var(--serif);font-style:italic;font-size:clamp(1.15rem,1.8vw,1.5rem);color:rgba(247,244,239,.92);line-height:1.5;border-left:2px solid var(--gold);padding-left:24px;margin-bottom:40px;max-width:520px;
  /* Beim ersten Laden ausgeblendet — wird per JS sichtbar gemacht sobald gescrollt wird */
  opacity:0;transform:translateY(14px);
  transition:opacity .9s var(--ease),transform .9s var(--ease);
}
.hero__quote.is-revealed{opacity:1;transform:translateY(0)}
.hero__quote cite{display:block;font-style:normal;font-family:var(--sans);font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-top:14px}
.hero__cta{display:flex;flex-wrap:wrap;gap:16px}
.hero__scroll{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);z-index:2;color:rgba(247,244,239,.6);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:10px}
.hero__scroll::after{content:"";width:1px;height:42px;background:linear-gradient(var(--gold),transparent);animation:scrollLine 2.2s var(--ease) infinite}
@keyframes scrollLine{0%{opacity:0;transform:scaleY(.3)}50%{opacity:1}100%{opacity:0;transform:scaleY(1);transform-origin:bottom}}

/* ---------- 8. STAT-BAND (Kennzahlen, animiert) ---------- */
.stats{background:var(--navy);color:var(--ivory);border-block:1px solid var(--line-light)}
.stats__grid{display:grid;grid-template-columns:repeat(3,1fr)}
.stat{text-align:center;padding:clamp(48px,7vw,84px) 24px;border-right:1px solid var(--line-light)}
.stat:last-child{border-right:0}
.stat__num{font-family:var(--serif);font-size:clamp(3rem,6vw,4.75rem);font-weight:600;color:var(--gold);line-height:1;display:block}
.stat__label{margin-top:16px;font-size:.82rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(247,244,239,.7)}

/* ---------- 9. SPLIT / EDITORIAL SECTIONS ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,90px);align-items:center}
.split--reverse .split__media{order:2}
.split__body h2{font-size:var(--fs-h2);margin-bottom:28px}
.split__body p{margin-bottom:20px;color:var(--ink)}
.split__body .lead-quote{font-family:var(--serif);font-style:italic;font-size:clamp(1.2rem,2vw,1.55rem);color:var(--navy);line-height:1.5;margin-bottom:32px}
.subhead{font-family:var(--serif);font-size:var(--fs-h3);color:var(--navy);margin:36px 0 18px}

/* Bild-Rahmen + Platzhalter-Fallback */
.media{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--navy-2);box-shadow:var(--shadow-md)}
.media::before{content:"";position:absolute;inset:0;border:1px solid var(--line-light);z-index:3;pointer-events:none}
.media img{width:100%;height:100%;object-fit:cover;object-position:center 16%}
.media__ph{display:none;position:absolute;inset:0;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:30px;
  background:linear-gradient(160deg,var(--navy-2),var(--navy));color:rgba(247,244,239,.55)}
.media__ph .mono{font-family:var(--serif);font-size:3.4rem;color:var(--gold);opacity:.85}
.media__ph small{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase}
.media.is-empty img{display:none}
.media.is-empty .media__ph{display:flex}
/* dezenter Gold-Akzentrahmen hinter dem Bild (redaktionell) */
.media-wrap{position:relative}
.media-wrap::after{content:"";position:absolute;width:100%;height:100%;border:1px solid var(--gold);top:24px;left:24px;z-index:-1;opacity:.5}
.media-wrap.media-wrap--left::after{left:-24px}

/* ---------- 10. WERTE / CHARAKTERISTIKA ---------- */
.values-intro{max-width:880px;margin-bottom:clamp(40px,5vw,64px)}
.values-intro p{margin-bottom:18px;color:var(--ink);font-size:var(--fs-lead)}
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,32px)}
.value-card{background:var(--white);border:1px solid var(--line);padding:clamp(32px,3vw,46px);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.value-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.value-card__line{width:46px;height:2px;background:var(--gold);margin-bottom:26px}
.value-card .num{font-family:var(--serif);font-size:.95rem;color:var(--gold);letter-spacing:.1em}
.value-card h3{font-size:var(--fs-h3);margin:10px 0 16px}
.value-card p{color:var(--grey);font-size:.98rem}

/* ---------- 11. LEISTUNGEN ---------- */
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,30px)}
.service{position:relative;background:var(--white);border:1px solid var(--line);padding:clamp(32px,3vw,44px);transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease)}
.service:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:var(--gold)}
.service__num{font-family:var(--serif);font-size:1rem;color:var(--gold);display:block;margin-bottom:22px;letter-spacing:.08em}
.service h3{font-size:var(--fs-h3);margin-bottom:14px}
.service p{color:var(--grey);font-size:.98rem}
.placeholder-note{display:inline-block;margin-top:14px;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-dark);border:1px dashed var(--gold);padding:5px 10px;border-radius:var(--radius)}

/* ---------- 12. ABLAUF / PROZESS ---------- */
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,3vw,40px);counter-reset:step}
.step{position:relative;padding-top:30px;border-top:1px solid var(--line)}
.section--navy .step{border-top-color:var(--line-light)}
.step__num{font-family:var(--serif);font-size:2.4rem;color:var(--gold);line-height:1;display:block;margin-bottom:16px}
.step h3{font-size:1.25rem;margin-bottom:12px}
.step p{color:var(--grey);font-size:.95rem}
.section--navy .step p{color:rgba(247,244,239,.7)}

/* ---------- 13. REZENSIONEN / LAUFBAND (automatisch) ---------- */
.reviews-marquee{position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.reviews-row{display:flex;gap:26px;width:max-content;animation:reviewScroll 55s linear infinite}
.reviews-marquee:hover .reviews-row{animation-play-state:paused}
@keyframes reviewScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.review-card{flex:0 0 auto;width:min(400px,84vw);background:var(--white);border:1px solid var(--line);padding:38px 36px;display:flex;flex-direction:column;gap:16px;box-shadow:var(--shadow-sm)}
.review-card .stars{color:var(--gold);letter-spacing:3px;font-size:.95rem}
.review-card blockquote{font-size:1.12rem;line-height:1.55;color:var(--navy);font-style:italic;flex:1}
.review-card figcaption{font-weight:600;font-size:.98rem;color:var(--gold);letter-spacing:.02em;border-top:1px solid var(--line);padding-top:16px}
/* Karte ohne Rezensionstext – nur Sterne + Name, mittig */
.review-card--stars-only{justify-content:center;align-items:center;text-align:center;min-height:200px}
.review-card--stars-only .stars{font-size:1.6rem;letter-spacing:4px}
.review-card--stars-only figcaption{border-top:0;padding-top:0;margin-top:8px}
@media (prefers-reduced-motion:reduce){.reviews-row{animation:none;flex-wrap:wrap;width:auto;justify-content:center}}

/* ---------- 14. KONTAKT / FORM ---------- */
.contact-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,6vw,80px);align-items:start}
.contact-aside h2{font-size:var(--fs-h2);margin-bottom:24px}
.contact-aside p{color:rgba(247,244,239,.82);margin-bottom:32px;max-width:46ch}
.contact-direct{display:flex;flex-direction:column;gap:14px;margin-bottom:36px}
.contact-direct a{display:inline-flex;align-items:center;gap:14px;font-size:1.05rem;color:var(--ivory);transition:color .3s var(--ease)}
.contact-direct a:hover{color:var(--gold)}
.contact-direct .ic{width:42px;height:42px;border:1px solid var(--line-light);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--gold);flex:none}
.contact-direct .ic svg{width:18px;height:18px}
.booking-note{font-size:.82rem;color:rgba(247,244,239,.55);border:1px dashed var(--line-light);padding:14px 16px;margin-top:8px}

.form{background:var(--white);padding:clamp(28px,3.4vw,46px);box-shadow:var(--shadow-lg)}
.form__row{margin-bottom:20px}
.form__row label{display:block;font-size:.82rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--grey);margin-bottom:8px}
.form input,.form textarea{width:100%;padding:14px 16px;font-family:var(--sans);font-size:1rem;color:var(--ink);background:var(--ivory);border:1px solid var(--line);border-radius:var(--radius);transition:border-color .3s var(--ease)}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--gold)}
.form textarea{resize:vertical;min-height:130px}
.form .btn{width:100%;justify-content:center;margin-top:6px}
.form__msg{margin-top:16px;font-size:.92rem;padding:12px 14px;border-radius:var(--radius);display:none}
.form__msg.is-ok{display:block;background:rgba(194,163,107,.14);color:var(--gold-dark);border:1px solid var(--gold)}
.form__msg.is-err{display:block;background:rgba(180,40,40,.08);color:#9a2b2b;border:1px solid #d99}

/* ---------- 15. NEWSLETTER ---------- */
.newsletter{text-align:center;max-width:680px;margin-inline:auto}
.newsletter h2{font-size:var(--fs-h2);margin-bottom:18px}
.newsletter p{color:var(--grey);margin-bottom:30px}
.newsletter__form{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.newsletter__form input{flex:1;min-width:240px;padding:16px 18px;font-size:1rem;border:1px solid var(--line);background:var(--white);border-radius:var(--radius)}
.newsletter__form input:focus{outline:none;border-color:var(--gold)}
.newsletter__hint{font-size:.8rem;color:var(--grey);margin-top:16px}
.newsletter__msg{margin-top:14px;font-size:.9rem;color:var(--gold-dark);display:none}
.newsletter__msg.is-visible{display:block}

/* ---------- 16. FOOTER ---------- */
.footer{background:var(--navy);color:rgba(247,244,239,.7);padding-block:clamp(60px,7vw,90px) 32px}
.footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:clamp(36px,5vw,70px);padding-bottom:48px;border-bottom:1px solid var(--line-light)}
.footer__brand .brand{color:var(--white);display:inline-block;margin-bottom:18px}
.footer__brand p{max-width:34ch;font-size:.95rem}
.footer h4{font-family:var(--sans);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:20px}
.footer a{display:inline-block;color:rgba(247,244,239,.7);font-size:.96rem;margin-bottom:12px;transition:color .3s var(--ease)}
.footer a:hover{color:var(--white)}
.footer__col--contact a{display:flex;align-items:center;gap:10px}
.footer__bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:26px;font-size:.85rem;color:rgba(247,244,239,.5)}
.footer__bottom a{font-size:.85rem;margin:0}

/* ---------- 17. BACK TO TOP ---------- */
.to-top{position:fixed;right:26px;bottom:26px;width:50px;height:50px;border-radius:50%;background:var(--navy);color:var(--gold);border:1px solid var(--gold);display:flex;align-items:center;justify-content:center;font-size:1.1rem;opacity:0;visibility:hidden;transform:translateY(12px);transition:.4s var(--ease);z-index:800}
.to-top.is-visible{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--gold);color:var(--navy)}

/* ---------- 18. LEGAL PAGES ---------- */
.page-hero{background:var(--navy);color:var(--ivory);padding:clamp(130px,16vw,180px) 0 clamp(50px,7vw,80px)}
.page-hero h1{color:var(--white);font-size:var(--fs-h2)}
.legal{padding-block:clamp(56px,8vw,96px)}
.legal__content{max-width:760px}
.legal__content h2{font-size:var(--fs-h3);margin:40px 0 14px;color:var(--navy)}
.legal__content h2:first-child{margin-top:0}
.legal__content p{color:var(--ink);margin-bottom:14px}
.legal__content .placeholder{display:block;background:rgba(194,163,107,.1);border-left:3px solid var(--gold);padding:16px 18px;color:var(--gold-dark);font-style:italic;margin:14px 0}
.back-link{display:inline-flex;align-items:center;gap:10px;margin-top:40px;color:var(--gold-dark);font-weight:600}
.back-link:hover{color:var(--gold)}

/* ---------- 19. SCROLL REVEAL ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:.1s}
.reveal[data-delay="2"]{transition-delay:.2s}
.reveal[data-delay="3"]{transition-delay:.3s}

/* ---------- 20. RESPONSIVE ---------- */
@media (max-width:1024px){
  .hero__media{width:46%}
  .footer__grid{grid-template-columns:1fr 1fr}
  .footer__brand{grid-column:1/-1}
}
@media (max-width:860px){
  /* WICHTIG: backdrop-filter auf dem Header macht aus position:fixed der Kinder
     eine Containing-Box → das Menü würde nur in der ~58px Header-Box erscheinen.
     Auf Mobile daher solides Navy ohne backdrop-filter, damit das Menü voll aufgeht. */
  .site-header{background:var(--navy);backdrop-filter:none;-webkit-backdrop-filter:none}
  .site-header.is-solid{background:var(--navy)}
  .nav__links{
    position:fixed;inset:0 0 0 auto;width:min(84vw,380px);height:100dvh;
    background:var(--navy);flex-direction:column;align-items:flex-start;justify-content:center;
    gap:6px;padding:48px;transform:translateX(100%);
    transition:transform .45s var(--ease);box-shadow:-30px 0 90px rgba(10,20,40,.4);
    overflow-y:auto;z-index:940;
  }
  .nav__links.is-open{transform:translateX(0)}
  .nav__links a{font-family:var(--serif);font-size:1.5rem;color:var(--ivory)!important;padding-block:8px}
  .nav__links .btn{margin-top:18px;font-family:var(--sans);font-size:.92rem}
  .burger{display:flex}
  /* Mobile: KOMPLETTES Portrait sichtbar (head-to-hands), Text overlay'd AUF dem Foto ab Kragen-Höhe */
  /* padding-top knapp unter Header-Höhe — alles (Foto + Text) rückt zusammen nach oben */
  .hero{min-height:auto;display:block;padding-top:28px;padding-bottom:0}
  .hero__media{
    position:relative;width:100%;opacity:1;
    /* aspect-ratio matched die Foto-Proportion 902/1552 → KEIN Beschnitt, das ganze Bild ist zu sehen */
    aspect-ratio:902/1552;
    height:auto;
    /* Negativer Margin zieht den Text-Block hoch, sodass er auf Kragen-Höhe (≈55% des Bildes) startet */
    margin-bottom:-77vw;
  }
  .hero__media img{width:100%;height:100%;object-fit:cover;object-position:center}
  .hero__media::after{
    /* Oberes 42% bleibt klar → Kopf + Gesicht unverdeckt. Ab 56% (Kragen) sanfter Fade nach Navy für Lesbarkeit. */
    background:linear-gradient(180deg,
      transparent 0%,
      transparent 42%,
      rgba(10,20,40,.32) 56%,
      rgba(10,20,40,.72) 76%,
      rgba(10,20,40,.92) 92%,
      var(--navy) 100%);
  }
  /* z-index hebt Text VOR das Foto. padding-block setzt nur vertikalen Abstand, .container-padding-inline bleibt erhalten. */
  .hero__inner{padding-block:0 56px;position:relative;z-index:2}
  .hero__content{max-width:none}
  /* Eyebrow: freistehender Text mit dezentem Schatten — kein Hintergrund, keine Pill */
  .hero__content .eyebrow{
    margin-bottom:14px;
    background:transparent;
    border:0;
    box-shadow:none;
    padding:0;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    text-shadow:0 2px 14px rgba(0,0,0,.75),0 1px 4px rgba(0,0,0,.55);
  }
  .hero__content h1{margin-bottom:18px;text-shadow:0 2px 24px rgba(0,0,0,.75),0 1px 4px rgba(0,0,0,.55)}
  .hero__content .hero__quote{margin-bottom:20px;text-shadow:0 1px 12px rgba(0,0,0,.60)}
  .hero__scroll{display:none}
  .stats__grid{grid-template-columns:1fr}
  .stat{border-right:0;border-bottom:1px solid var(--line-light)}
  .stat:last-child{border-bottom:0}
  .split{grid-template-columns:1fr;gap:48px}
  .split--reverse .split__media{order:0}
  .media-wrap::after{display:none}
  .values,.services{grid-template-columns:1fr}
  .process{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr;gap:48px}
}
@media (max-width:560px){
  :root{--section-y:72px}
  .process{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
  .hero__cta{flex-direction:column;align-items:flex-start}
  .hero__cta .btn{width:100%;justify-content:center}
}

/* ---------- 21. REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}