/* ============================================================
   LÖWENSTEIN CONCEPT — Design-System 2026
   Private Real Estate Transactions
   Warm · institutionell · ruhig · founder-led
   ------------------------------------------------------------
   Grundwirkung: Ivory / Warm White / Charcoal / Champagne / Stone
   Dunkle Flächen nur gezielt (Hero-Detail, Enquiry, Footer).
   Champagne ausschließlich als Mikroakzent — kein Goldteppich.
   Keine Tracking-Logik. Keine externen Requests.
   ============================================================ */

/* ---------- 1. DESIGN-TOKENS ---------- */
:root{
  /* Farbwelt (Masterbrief 2026) */
  --ivory:#F4F0E8;          /* Seitenhintergrund, große Flächen */
  --warm-white:#FBF9F4;     /* hellste Flächen, Karten */
  --sand-tint:#E6DBC6;      /* warme Sand-Stufe für Sektionsrhythmus */
  --charcoal:#1D1C1A;       /* Headlines, Fließtext */
  --graphite:#2A2926;       /* gezielte Tiefe: Hero, Enquiry, Footer */
  --champagne:#C7A86A;      /* feine Linien, Mikro-Akzente */
  --champagne-deep:#A6864A; /* Akzentschrift/Hover auf hell */
  --stone:#8A8176;          /* Sekundärtext, Metadaten */
  --sand:#D8CBB8;           /* ruhige Kontraste */
  --sand-soft:#E8E0D2;      /* sanfte Übergänge */

  /* Linien */
  --line:rgba(29,28,26,.14);
  --line-strong:rgba(29,28,26,.26);
  --line-on-dark:rgba(255,255,255,.16);

  /* Typografie
     Serif: zuerst die spätere selbst gehostete Lizenz-Serif ("Löwenstein Display"),
     dann hochwertige System-Serifen (Windows: Palatino Linotype / Book Antiqua;
     macOS: Iowan/Hoefler), zuletzt Georgia. KEINE externen Font-Requests. */
  --serif:"Löwenstein Display","Palatino Linotype","Book Antiqua","Iowan Old Style","Hoefler Text",Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;

  /* Maße */
  --maxw:1280px;
  --gutter:clamp(22px,5vw,64px);
  --section-y:clamp(78px,11vw,150px);
  --radius:2px;

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

/* Selbst gehostete Serif (Lora, SIL OFL) als "Löwenstein Display".
   Keine externen Requests, DSGVO-konform. WOFF (29 KB) + TTF-Fallback. */
@font-face{
  font-family:"Löwenstein Display";
  src:url("../fonts/loewenstein-display.woff") format("woff"),
      url("../fonts/loewenstein-display.ttf") format("truetype");
  font-weight:400; font-style:normal; font-display:swap;
}

/* ---------- 2. RESET / BASIS ---------- */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--ivory);
  color:var(--charcoal);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--champagne); color:#fff; }

/* ---------- 3. TYPOGRAFIE ---------- */
h1,h2,h3{
  font-family:var(--serif);
  font-weight:400;
  color:var(--charcoal);
  margin:0;
  letter-spacing:-.02em;
}
h1{ font-size:clamp(40px,6.4vw,86px); line-height:1.02; letter-spacing:-.035em; }
h2{ font-size:clamp(30px,4.2vw,58px); line-height:1.07; letter-spacing:-.028em; }
h3{ font-size:clamp(21px,2.2vw,28px); line-height:1.18; }
p{ margin:0 0 1.1em; }

.eyebrow,
.section-label{
  display:inline-block;
  margin:0 0 22px;
  color:var(--champagne-deep);
  font-family:var(--sans);
  font-size:11px;
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
}
.lead{
  font-size:clamp(18px,1.6vw,22px);
  line-height:1.6;
  color:#3a3833;
  font-weight:400;
}
.muted{ color:var(--stone); }
.measure{ max-width:54ch; }

/* ---------- 4. LAYOUT ---------- */
.container{ width:100%; max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--section-y); }
.section--tint{ background:var(--sand-tint); }
.section--warm-white{ background:var(--warm-white); }
.hr-gold{ width:64px; height:1px; background:var(--champagne); border:0; margin:0 0 30px; }

/* ---------- 5. HEADER / NAVIGATION ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(244,240,232,.82);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  height:76px; display:flex; align-items:center; justify-content:space-between; gap:28px;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand-logo{ width:clamp(40px,3.4vw,52px); height:auto; }
.menu{ display:flex; align-items:center; gap:clamp(18px,2.2vw,38px); margin-left:auto; }
.menu a{
  position:relative; font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:#4a463f; padding-block:6px; transition:color .25s var(--ease);
}
.menu a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--champagne); transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
.menu a:hover, .menu a[aria-current="page"]{ color:var(--charcoal); }
.menu a:hover::after, .menu a[aria-current="page"]::after{ transform:scaleX(1); }
.menu .nav-cta{
  border:1px solid var(--line-strong); padding:10px 18px; border-radius:var(--radius);
}
.menu .nav-cta::after{ display:none; }
.menu .nav-cta:hover{ border-color:var(--champagne); }
.nav-toggle{
  display:none; width:46px; height:46px; border:0; background:transparent; cursor:pointer; padding:11px;
}
.nav-toggle span{ display:block; height:1.5px; margin:6px 0; background:var(--charcoal); transition:.3s var(--ease); }

/* ---------- 6. BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; gap:12px;
  min-height:54px; padding:0 30px; border-radius:var(--radius);
  font-size:12px; letter-spacing:.18em; text-transform:uppercase; font-weight:600;
  border:1px solid var(--charcoal); color:var(--charcoal); background:transparent;
  transition:all .3s var(--ease); cursor:pointer;
}
.btn:hover{ background:var(--charcoal); color:var(--ivory); }
.btn--gold{ border-color:var(--champagne); color:var(--champagne-deep); }
.btn--gold:hover{ background:var(--champagne); color:#fff; border-color:var(--champagne); }
/* CTA-Hierarchie auf dunklem Grund: solider Primär-, dezenter Ghost-Sekundärbutton */
.btn--solid{ background:var(--ivory); color:var(--charcoal); border-color:var(--ivory); }
.btn--solid:hover{ background:#fff; color:var(--charcoal); }
.btn--ghost{ background:transparent; color:var(--ivory); border-color:rgba(253,251,246,.42); }
.btn--ghost:hover{ background:rgba(253,251,246,.10); color:#fff; border-color:rgba(253,251,246,.85); }
.text-link{
  display:inline-flex; align-items:center; gap:9px; font-size:13px; letter-spacing:.06em;
  color:var(--charcoal); border-bottom:1px solid var(--champagne); padding-bottom:3px;
  transition:gap .3s var(--ease), color .3s var(--ease);
}
.text-link:hover{ gap:15px; color:var(--champagne-deep); }
.text-link .arrow{ color:var(--champagne); }

/* ---------- 7. HERO ---------- */
.hero{ position:relative; min-height:calc(100vh - 112px); min-height:calc(100svh - 112px); display:flex; align-items:center; overflow:hidden; }
.hero-media{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero::after{                 /* gezielter, warmer Tiefenverlauf — NICHT flächig schwarz */
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(26,22,17,.56) 0%, rgba(26,22,17,.26) 40%, rgba(26,22,17,0) 68%),
    linear-gradient(0deg, rgba(26,22,17,.52) 0%, rgba(26,22,17,0) 44%);
}
.hero-inner{ position:relative; z-index:2; padding-block:clamp(24px,3.6vh,48px); max-width:1000px; }
.hero .eyebrow{ color:var(--champagne); }
.hero h1{ color:#FDFBF6; text-shadow:0 2px 26px rgba(20,16,10,.42); max-width:15ch; font-size:clamp(34px,4.6vw,66px); }
.hero .lead{ color:rgba(253,251,246,.9); max-width:60ch; margin-top:18px; text-shadow:0 1px 14px rgba(20,16,10,.4); }
.hero-actions{ margin-top:24px; display:flex; gap:16px; flex-wrap:wrap; }

/* ---------- 8. STATEMENT ---------- */
.statement{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(34px,6vw,90px); align-items:start; }
.statement .body p{ font-size:clamp(17px,1.3vw,19px); color:#3a3833; }
.statement .body p:first-child{ color:var(--charcoal); font-size:clamp(18px,1.4vw,20px); }
.pill-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.pill{
  font-size:12px; letter-spacing:.06em; color:#4a463f;
  border:1px solid var(--line-strong); border-radius:999px; padding:8px 16px; background:var(--warm-white);
}

/* ---------- 9. SELL / BUY (Duo) ---------- */
.duo{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.duo-card{
  position:relative; display:flex; flex-direction:column; min-height:340px;
  padding:clamp(28px,3vw,44px);
  background:var(--warm-white); border:1px solid var(--line);
  border-top:1px solid var(--champagne);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.duo-card:hover{ transform:translateY(-6px); box-shadow:0 30px 60px -28px rgba(40,34,22,.4); }
.duo-card .num{ font-family:var(--serif); font-size:15px; color:var(--champagne-deep); letter-spacing:.1em; }
.duo-card h3{ margin:14px 0 6px; }
.duo-card .role{ font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--stone); margin-bottom:18px; }
.duo-card p{ color:#3f3d37; }
.duo-card .text-link{ margin-top:auto; }
.duo-media{ height:200px; margin:-1px -1px 0; overflow:hidden; }
.duo-media img{ width:100%; height:100%; object-fit:cover; }

/* ---------- 10. PROZESS ---------- */
.process-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:50px; }
.process-step{ padding:34px 28px 34px 0; border-top:1px solid var(--line-strong); }
.process-step + .process-step{ padding-left:28px; }
.process-step .num{ font-family:var(--serif); font-size:28px; color:var(--champagne-deep); line-height:1; }
.process-step h3{ margin:20px 0 10px; font-size:22px; }
.process-step p{ font-size:15px; color:#46443d; margin:0; }

/* ---------- 11. PRINCIPAL / FOUNDER ---------- */
.principal{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(30px,5vw,72px); align-items:center; }
.portrait{
  position:relative; aspect-ratio:4/5; border:1px solid var(--line-strong);
  background:linear-gradient(150deg,var(--warm-white),var(--ivory));
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; text-align:center;
}
.portrait::before{ content:""; position:absolute; inset:14px; border:1px solid var(--champagne); opacity:.4; }
.portrait .mono{ font-family:var(--serif); font-size:64px; color:var(--champagne-deep); letter-spacing:.04em; }
.portrait .ph-note{ font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--stone); }
.portrait-cap{ margin-top:16px; text-align:center; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--stone); }
.portrait-cap b{ display:block; font-family:var(--serif); font-size:18px; letter-spacing:.02em; text-transform:none; color:var(--charcoal); margin-bottom:5px; }
.principal h2{ margin:16px 0 22px; }
.exp-row{ display:flex; gap:40px; margin-top:30px; flex-wrap:wrap; }
.exp-row .stat b{ font-family:var(--serif); font-size:38px; font-weight:400; color:var(--charcoal); display:block; line-height:1; }
.exp-row .stat span{ font-size:13px; color:var(--stone); letter-spacing:.04em; }

/* ---------- 12. ENQUIRY (gezielt dunkel) ---------- */
.enquiry{ position:relative; background:var(--graphite); color:var(--ivory); overflow:hidden; }
.enquiry::before{
  content:""; position:absolute; inset:0; opacity:.14;
  background:linear-gradient(120deg, rgba(199,168,106,.5), transparent 55%);
}
.enquiry .inner{ position:relative; z-index:2; max-width:840px; }
.enquiry .eyebrow{ color:var(--champagne); }
.enquiry h2{ color:var(--ivory); }
.enquiry p{ color:rgba(244,240,232,.78); font-size:clamp(17px,1.3vw,19px); max-width:62ch; }
.enquiry .contacts{ display:flex; gap:38px; flex-wrap:wrap; margin:30px 0 36px; }
.enquiry .contacts a{ color:var(--ivory); border-bottom:1px solid var(--champagne); padding-bottom:3px; font-size:16px; }
.enquiry .contacts small{ display:block; color:var(--champagne); letter-spacing:.2em; text-transform:uppercase; font-size:11px; margin-bottom:8px; }
.disclaimer{ margin-top:34px; font-size:12px; color:rgba(244,240,232,.5); max-width:70ch; }

/* ---------- 13. FOOTER ---------- */
.site-footer{ background:var(--charcoal); color:var(--ivory); }
.footer-inner{ display:flex; flex-wrap:wrap; gap:24px; justify-content:space-between; align-items:center; padding-block:40px; }
.site-footer .legal-line{ font-size:13px; color:rgba(244,240,232,.6); max-width:60ch; }
.footer-links{ display:flex; align-items:center; gap:14px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; }
.footer-links a{ color:rgba(244,240,232,.82); }
.footer-links a:hover{ color:var(--champagne); }
.footer-links .dot{ color:var(--champagne); }
.copy{ width:100%; border-top:1px solid var(--line-on-dark); padding-top:22px; font-size:12px; color:rgba(244,240,232,.45); }

/* ---------- 14. RESPONSIVE ---------- */
/* Nav frueher in den Burger-Modus (max-width:1120px); Grid/Content bleibt bei 900px */
@media (max-width:1120px){
  .nav-toggle{ display:block; }
  .menu{
    position:fixed; inset:76px 16px auto 16px; flex-direction:column; align-items:flex-start; gap:0;
    background:var(--warm-white); border:1px solid var(--line); border-radius:8px; padding:8px 20px;
    box-shadow:0 30px 60px -30px rgba(40,34,22,.5);
    opacity:0; visibility:hidden; transform:translateY(-8px); pointer-events:none;
    transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  }
  body.nav-open .menu{ opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; }
  .menu a{ width:100%; padding:16px 0; border-bottom:1px solid var(--line); }
  .menu a:last-child{ border-bottom:0; }
  .menu .nav-cta{ border:0; padding:16px 0; }
  body.nav-open .nav-toggle span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
  body.nav-open .nav-toggle span:nth-child(2){ opacity:0; }
  body.nav-open .nav-toggle span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }
}

@media (max-width:900px){
  .nav-toggle{ display:block; }
  .menu{
    position:fixed; inset:76px 16px auto 16px; flex-direction:column; align-items:flex-start; gap:0;
    background:var(--warm-white); border:1px solid var(--line); border-radius:8px; padding:8px 20px;
    box-shadow:0 30px 60px -30px rgba(40,34,22,.5);
    opacity:0; visibility:hidden; transform:translateY(-8px); pointer-events:none;
    transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  }
  body.nav-open .menu{ opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; }
  .menu a{ width:100%; padding:16px 0; border-bottom:1px solid var(--line); }
  .menu a:last-child{ border-bottom:0; }
  .menu .nav-cta{ border:0; padding:16px 0; }
  body.nav-open .nav-toggle span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
  body.nav-open .nav-toggle span:nth-child(2){ opacity:0; }
  body.nav-open .nav-toggle span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

  .statement, .duo, .principal{ grid-template-columns:1fr; }
  .process-grid{ grid-template-columns:1fr 1fr; }
  .process-step,.process-step + .process-step{ padding:26px 0; }
  .principal .portrait{ max-width:360px; }
}
@media (max-width:540px){
  body{ font-size:16px; }
  .process-grid{ grid-template-columns:1fr; }
  .hero-actions{ flex-direction:column; align-items:flex-start; }
  .btn{ width:100%; justify-content:center; }
  .exp-row{ gap:26px; }
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* ============================================================
   HOMEPAGE-KOMPONENTEN (additiv)
   ============================================================ */

/* Brand: Löwe + gesetzter Schriftzug */
.brand-lion{ height:40px; width:auto; display:block; }
.brand-name{ display:flex; flex-direction:column; line-height:1; }
.brand-name .n1{ font-family:var(--serif); font-size:18px; letter-spacing:.05em; color:var(--charcoal); }
.brand-name .n2{ font-size:9.5px; letter-spacing:.4em; text-transform:uppercase; color:var(--champagne-deep); margin-top:4px; }

/* Statement-Kontrast: was Löwenstein NICHT ist / stattdessen */
.contrast{ margin-top:36px; }
.contrast-row{
  display:grid; grid-template-columns:1fr 1fr; gap:24px;
  padding:18px 0; border-top:1px solid var(--line);
}
.contrast-row:last-child{ border-bottom:1px solid var(--line); }
.contrast-row .neg{ color:var(--stone); position:relative; padding-left:24px; font-size:15px; }
.contrast-row .neg::before{ content:"–"; position:absolute; left:0; }
.contrast-row .pos{ color:var(--charcoal); position:relative; padding-left:24px; font-size:15px; }
.contrast-row .pos::before{ content:"→"; position:absolute; left:0; color:var(--champagne-deep); }

/* Transaktionsfokus */
.focus-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); margin-top:46px; }
.focus-item{ background:var(--warm-white); padding:30px 26px; }
.focus-item .k{ display:block; font-family:var(--serif); font-size:20px; color:var(--charcoal); margin-bottom:10px; }
.focus-item p{ font-size:14px; color:#46443d; margin:0; }
.focus-note{ margin-top:28px; font-size:13.5px; letter-spacing:.03em; color:var(--stone); }
.focus-note b{ color:var(--champagne-deep); font-weight:600; }

/* Full-bleed Image-Break (warme Beweisführung, nicht flächig dunkel) */
.image-break{ position:relative; min-height:clamp(300px,42vw,500px); display:flex; align-items:center; overflow:hidden; }
.image-break img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.image-break::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(26,22,17,.52) 0%, rgba(26,22,17,.18) 52%, rgba(26,22,17,0) 100%); }
.image-break .ib-text{ position:relative; z-index:2; max-width:680px; }
.image-break .ib-text p{ font-family:var(--serif); font-size:clamp(22px,3vw,38px); line-height:1.2;
  color:#FDFBF6; margin:0; text-shadow:0 2px 22px rgba(20,16,10,.42); }

/* Duo-Card mit Medienbild (Modifier, ohne Inline-Styles) */
.duo-card.has-media{ padding:0; }
.duo-card.has-media .duo-media{ height:210px; margin:0; }
.duo-card.has-media .body{ padding:clamp(26px,3vw,40px); display:flex; flex-direction:column; flex:1; }

@media (max-width:900px){
  .contrast-row{ grid-template-columns:1fr; gap:4px; }
  .focus-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:540px){
  .focus-grid{ grid-template-columns:1fr; }
  .brand-name .n1{ font-size:16px; }
}

/* ============================================================
   SYSTEM-HÄRTUNG — Typografie · Motion · A11y · Tokens
   ============================================================ */

/* Spacing-Skala (8-pt) für konsistente Unterseiten */
:root{
  --space-xs:8px; --space-s:16px; --space-m:24px;
  --space-l:40px; --space-xl:64px; --space-2xl:96px;
}

/* Mikrotypografie */
h1,h2,h3{ text-wrap:balance; }
p,.lead{ text-wrap:pretty; }
html{ hanging-punctuation:first last; }
.exp-row .stat b{ font-variant-numeric:tabular-nums lining-nums; }
.focus-note b, .duo-card .num{ font-variant-numeric:tabular-nums; }

/* Skip-Link (A11y) */
.skip-link{
  position:absolute; left:16px; top:-64px; z-index:1000;
  background:var(--charcoal); color:var(--ivory);
  padding:10px 18px; border-radius:var(--radius); font-size:13px; letter-spacing:.04em;
  transition:top .2s var(--ease);
}
.skip-link:focus{ top:12px; }

/* Sichtbare Fokuszustände (A11y) */
a:focus-visible, button:focus-visible, .btn:focus-visible{
  outline:2px solid var(--champagne-deep); outline-offset:3px; border-radius:2px;
}

/* Meta-Leiste (institutioneller Rahmen, hell) */
.meta-bar{ background:var(--warm-white); border-bottom:1px solid var(--line); }
.meta-bar .inner{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding-block:8px; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--stone);
}
.meta-bar .inner .sep{ color:var(--champagne); margin:0 6px; }
@media (max-width:600px){ .meta-bar .inner .hide-s{ display:none; } }

/* Vertraulichkeits-/Selektivitätszeile (auf dunklem Enquiry-Grund) */
.trust-line{ margin-top:26px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:rgba(244,240,232,.6); }
.trust-line .sep{ color:var(--champagne); margin:0 10px; }

/* Hero: sehr langsamer, ruhiger Scale */
.hero-media{ animation:heroScale 18s ease-out both; }
@keyframes heroScale{ from{ transform:scale(1.06); } to{ transform:scale(1); } }

/* Sanfte Scroll-Reveals (nur mit JS aktiv; ohne JS voll sichtbar) */
.js .reveal{ opacity:0; transform:translateY(18px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal.is-visible{ opacity:1; transform:none; }
.js .stagger>*{ opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.js .stagger.is-visible>*{ opacity:1; transform:none; }
.js .stagger.is-visible>*:nth-child(2){ transition-delay:.08s; }
.js .stagger.is-visible>*:nth-child(3){ transition-delay:.16s; }
.js .stagger.is-visible>*:nth-child(4){ transition-delay:.24s; }
@media (prefers-reduced-motion:reduce){
  .hero-media{ animation:none; }
  .js .reveal, .js .stagger>*{ opacity:1 !important; transform:none !important; transition:none !important; }
}

.portrait{ overflow:hidden; }
.portrait picture{ position:absolute; inset:0; z-index:0; }
.portrait img{ width:100%; height:100%; object-fit:cover; display:block; }
.portrait::before{ z-index:1; }

/* ============================================================
   RESPONSIVE-FEINSCHLIFF HERO (nur Hero/Hoehen · additiv · keine Inhalte)
   ============================================================ */
@media (max-height:940px){
  .hero-inner{ padding-block:clamp(14px,3vh,28px); }
  .hero h1{ font-size:clamp(30px,4vw,50px); }
  .hero .lead{ margin-top:16px; }
  .hero-actions{ margin-top:22px; }
}
@media (max-width:540px){
  .hero h1{ font-size:clamp(28px,7.4vw,36px); line-height:1.05; max-width:18ch; }
  .hero .lead{ font-size:16px; margin-top:16px; }
  .hero-inner{ padding-block:clamp(22px,5vh,40px); }
  .hero-actions{ margin-top:22px; gap:12px; }
}
@media (max-height:500px) and (orientation:landscape){
  .meta-bar{ display:none; }
  .header-inner{ height:54px; }
  .menu{ top:54px; max-height:calc(100vh - 66px); overflow-y:auto; }
  .hero{ min-height:calc(100vh - 56px); min-height:calc(100svh - 56px); align-items:center; }
  .hero-inner{ padding-block:clamp(10px,4vh,18px); }
  .hero .eyebrow{ font-size:10px; margin-bottom:6px; }
  .hero h1{ font-size:clamp(19px,3.4vw,26px); line-height:1.08; max-width:36ch; }
  .hero .lead{ font-size:13px; line-height:1.4; margin-top:8px; max-width:62ch; }
  .hero-actions{ margin-top:12px; flex-direction:row; flex-wrap:wrap; gap:8px; }
  .hero-actions .btn{ width:auto; }
}

/* Desktop-Navigation: aktive/Hover-Underline naeher an den Menuetext (nur horizontale Nav >1120px) */
@media (min-width:1121px){
  .menu a::after{ bottom:6px; }
}