/* ============================================================
   Mustermann GmbH · „Der Showroom" — geteiltes Stylesheet
   Luxury/Refined · Tiefschwarz + Kupfer · eine Signatur über alle Seiten
   ============================================================ */

:root{
  --ink:#0d0d0d;        /* Tiefschwarz – Grundfläche */
  --char:#1a1a1a;       /* Charcoal – Tiefenstaffelung */
  --char2:#161616;
  --ivory:#f5f5f0;      /* warm-weiß – Text/Nav */
  --copper:#c09a6b;     /* Akzent Kupfer */
  --copper-d:#a07f55;   /* gedämpftes Kupfer (Hover) */
  --ash:#5a5a55;        /* Kolophon/Meta-Grau */

  --fs-hero-italic: clamp(48px, 8vw, 112px);
  --fs-hero-sub:    clamp(19px, 2.4vw, 30px);
  --fs-h2:          clamp(34px, 5vw, 66px);
  --fs-h3:          clamp(22px, 2.6vw, 30px);
  --fs-bafa:        clamp(96px, 19vw, 260px);
  --fs-body:        clamp(16px, 1.15vw, 18px);

  --pad-y: clamp(96px, 14vh, 200px);
  --pad-x: clamp(24px, 6vw, 120px);
  --head-top: clamp(26px, 3.4vh, 42px); /* einheitlicher oberer Header-Abstand (Hero + Unterseiten) */
  --maxw: 1440px;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--ink); color:var(--ivory);
  font-family:"Josefin Sans",sans-serif; font-weight:400;
  font-size:var(--fs-body); line-height:1.72;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
::selection{ background:var(--copper); color:var(--ink); }

a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }

.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad-x); width:100%; }
.section{ padding-block:var(--pad-y); }

/* Display-Typo */
.display{ font-family:"Spectral",serif; font-weight:600; line-height:1.02; letter-spacing:-0.005em; }
.italic{ font-style:italic; }
.eyebrow{
  font-family:"Josefin Sans",sans-serif; font-weight:400; font-size:11px;
  letter-spacing:.28em; text-transform:uppercase; color:var(--copper);
}
.muted{ color:#9a9a93; }
.kicker{ color:var(--ash); }

/* „/" -Signatur-Trenner */
.slash{ color:var(--copper); font-family:"Spectral",serif; font-style:italic;
  padding-inline:.5em; font-weight:500; }
.slash-ash{ color:var(--ash); }

/* ---------- Header (Archetyp 4: im Hero integriert) ---------- */
.site-head{
  position:absolute; top:0; left:0; right:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--head-top) var(--pad-x) 0;
  pointer-events:none;
}
.site-head a, .site-head button{ pointer-events:auto; }
.brand-logo{
  height:clamp(32px,3.2vw,48px); width:auto; /* Logo transparent (weiß), einheitlich groß auf allen Seiten — breite Wortmarke, daher kompakt */
  display:block;
}
/* dunkles Logo-Band auf Unterseiten (kein Vollbild-Hero) */
.logo-band{ background:var(--ink); }
.subhead{
  position:relative; z-index:40; background:var(--ink);
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--head-top) var(--pad-x);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.page-hero{ background:var(--ink); padding-block:clamp(70px,12vh,150px) clamp(40px,7vh,90px); }
.page-hero h1{ font-family:"Spectral",serif; font-weight:600; font-style:italic;
  font-size:clamp(44px,8vw,104px); line-height:.98; color:var(--copper); margin:.18em 0 0; }
.page-hero p.lead{ max-width:60ch; margin-top:1.4em; color:#b8b8b1; }

.nav-desktop{ display:flex; align-items:center; gap:0; }
.nav-link{
  position:relative; font-family:"Josefin Sans",sans-serif; font-weight:400;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ivory);
  padding:6px 0;
}
.nav-sep{ color:var(--ash); font-size:13px; padding-inline:18px; }
/* Nav-Mechanik: Kupfer-Unterstrich per scaleX von LINKS (NICHT width-grow) */
.nav-link::after{
  content:""; position:absolute; left:0; right:0; bottom:-5px; height:1px;
  background:var(--copper); transform:scaleX(0); transform-origin:left;
  transition:transform .25s ease-out;
}
.nav-link:hover::after,
.nav-link[aria-current="page"]::after{ transform:scaleX(1); }

.head-right{ display:flex; align-items:center; gap:26px; }

/* Burger = zwei Hairlines, kippen zum „/" */
.burger{ display:none; width:30px; height:18px; position:relative; background:none; border:0; cursor:pointer; }
.burger span{ position:absolute; left:0; right:0; height:1px; background:var(--ivory); transition:transform .3s ease, opacity .3s ease; }
.burger span:nth-child(1){ top:4px; }
.burger span:nth-child(2){ bottom:4px; }
/* bei Öffnung legen sich beide Hairlines übereinander und kippen 45° -> bilden ein „/" */
.burger.open span{ background:var(--copper); }
.burger.open span:nth-child(1){ top:50%; transform:translateY(-50%) rotate(45deg); }
.burger.open span:nth-child(2){ bottom:auto; top:50%; transform:translateY(-50%) rotate(45deg); }

/* ---------- Floating-Kapsel (nach 80px Scroll) ---------- */
.capsule{
  position:fixed; top:16px; left:50%; transform:translate(-50%,-140%);
  z-index:54; display:flex; align-items:center; gap:10px; /* unter .mobile-nav (55): bei offenem Menü liegt die Kapsel hinter dem Overlay */
  background:rgba(13,13,13,.92); backdrop-filter:blur(12px);
  border-radius:100px; padding:9px 10px 9px 24px;
  box-shadow:0 8px 40px rgba(0,0,0,.5);
  transition:transform .38s cubic-bezier(.22,.61,.36,1);
}
.capsule.show{ transform:translate(-50%,0); }
.capsule .cap-brand{ font-family:"Josefin Sans",sans-serif; font-weight:400; font-size:16px; letter-spacing:.02em; color:var(--ivory); padding-right:6px; }
.capsule .cap-brand b{ color:var(--copper); font-weight:400; }
.cap-nav{ display:flex; align-items:center; }
.cap-link{ position:relative; font-family:"Josefin Sans",sans-serif; font-weight:400; font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ivory); padding:6px 13px; transition:color .2s ease; }
.cap-link:hover, .cap-link[aria-current="page"]{ color:var(--copper); }
.cap-ghost{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ivory); transition:color .2s ease; }
.cap-ghost:hover{ color:var(--copper); }
/* Burger IN der Kapsel: trägt die Navigation, wenn die cap-nav mobil verborgen ist.
   Erbt Größe/Animation von .burger (display:none desktop, display:block ≤880). */
.cap-burger{ flex-shrink:0; margin-left:4px; margin-right:6px; }

/* ---------- CTA-Anatomie ---------- */
/* A — scharfkantiger Block-CTA (Kupfer-Fläche, Fill-from-left, KEIN Lift) */
.btn-block{
  position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:.7em;
  background:var(--copper); color:var(--ink); border:0; border-radius:0;
  padding:19px 32px; cursor:pointer;
  font-family:"Josefin Sans",sans-serif; font-weight:400; font-size:14px;
  letter-spacing:.12em; text-transform:uppercase;
}
.btn-block::before{ content:""; position:absolute; inset:0; background:var(--copper-d);
  transform:scaleX(0); transform-origin:left; transition:transform .3s ease-out; }
.btn-block > *{ position:relative; z-index:1; }
.btn-block:hover::before{ transform:scaleX(1); }

/* B — Kupfer-Pill (NUR in der Kapsel) */
.btn-pill{
  position:relative; overflow:hidden; display:inline-flex; align-items:center;
  background:var(--copper); color:var(--ink); border-radius:100px; padding:10px 22px;
  font-family:"Josefin Sans",sans-serif; font-weight:400; font-size:12px;
  letter-spacing:.1em; text-transform:uppercase;
  white-space:nowrap; flex-shrink:0; /* CTA bleibt einzeilig — Kapsel wächst mit */
}
.btn-pill::before{ content:""; position:absolute; inset:0; background:var(--copper-d);
  transform:scaleX(0); transform-origin:left; transition:transform .25s ease-out; }
.btn-pill > *{ position:relative; z-index:1; }
.btn-pill:hover::before{ transform:scaleX(1); }

/* C — Ghost-Outline (sekundär) */
.btn-ghost{
  display:inline-flex; align-items:center; gap:.7em; background:transparent;
  border:1px solid rgba(245,245,240,.32); color:var(--ivory); border-radius:0;
  padding:14px 26px; cursor:pointer;
  font-family:"Josefin Sans",sans-serif; font-weight:400; font-size:13px;
  letter-spacing:.12em; text-transform:uppercase;
  transition:border-color .22s ease, color .22s ease;
}
.btn-ghost:hover{ border-color:var(--copper); color:var(--copper); }

/* Text-Link mit Kupfer-Unterstrich (scaleX) – sekundäre Inline-Aktion */
.link-draw{ position:relative; display:inline-block; font-size:13px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ivory); padding-bottom:5px; }
.link-draw::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--copper); transform:scaleX(0); transform-origin:left; transition:transform .28s ease-out; }
.link-draw:hover{ color:var(--copper); }
.link-draw:hover::after{ transform:scaleX(1); }

/* ---------- Hero (Archetyp 6, scroll-getrieben) ---------- */
.hero{ position:relative; height:100vh; min-height:620px; width:100%; overflow:hidden; background:var(--ink); }
.hero-stage{ position:absolute; inset:0; overflow:hidden; }
.hero-img{
  position:absolute; inset:-2%; width:104%; height:104%; object-fit:cover;
  object-position:center 40%;
  transform:scale(1.04); transform-origin:center 50%; will-change:transform;
  filter:brightness(.58) contrast(1.05) saturate(.95);
}
/* dunkle Vignette + Kupfer-Ambientlicht von unten */
.hero-stage::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:6;
  background:
    linear-gradient(180deg, rgba(13,13,13,.78) 0%, rgba(13,13,13,0) 20%),    /* Top-Scrim für Logo/Nav-Kontrast */
    linear-gradient(180deg, rgba(13,13,13,.45) 0%, rgba(13,13,13,.18) 42%, rgba(13,13,13,.85) 100%),
    linear-gradient(90deg, rgba(13,13,13,.40) 0%, rgba(13,13,13,0) 48%);
}
.hero-copy{ position:absolute; left:var(--pad-x); bottom:clamp(120px,20vh,210px); z-index:10; max-width:min(92vw,1000px); }
.hero-line1{ font-family:"Spectral",serif; font-style:italic; font-weight:600;
  font-size:var(--fs-hero-italic); line-height:.96; color:var(--copper); margin:0; }
.hero-line2{ font-family:"Josefin Sans",sans-serif; font-weight:300; font-size:var(--fs-hero-sub);
  color:var(--ivory); margin:.5em 0 0; letter-spacing:.01em; }
.hero-clip{ display:block; }
/* CTA-Streifen am Pin-Ende */
.hero-strip{
  position:absolute; left:0; right:0; bottom:0; z-index:15;
  background:var(--ink); border-top:1px solid rgba(192,154,107,.25);
}
.hero-strip a{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:1em;
  padding:22px var(--pad-x); }
/* Kupfer-Hairline fährt bei Hover von links über den Streifen (scaleX) */
.hero-strip a::before{ content:""; position:absolute; top:-1px; left:0; right:0; height:1px;
  background:var(--copper); transform:scaleX(0); transform-origin:left; transition:transform .35s ease-out; }
.hero-strip a:hover::before{ transform:scaleX(1); }
.hero-strip .hs-label{ font-family:"Josefin Sans",sans-serif; font-weight:400; font-size:14px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--copper); transition:color .25s ease; }
.hero-strip .hs-meta{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ash); }
.hero-strip a:hover .hs-label{ color:var(--ivory); }
/* Kupfer-Ambientlicht (intensiviert beim Scroll via JS) – streift die Geräte-Kante oben links */
.hero-glow{ position:absolute; inset:0; z-index:5; pointer-events:none; opacity:.55;
  background:
    radial-gradient(46% 42% at 24% 24%, rgba(192,154,107,.55), rgba(192,154,107,0) 62%),
    radial-gradient(120% 70% at 50% 120%, rgba(192,154,107,.30), rgba(192,154,107,0) 60%);
  mix-blend-mode:screen; }
.scroll-hint{ position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:12;
  font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--ash); }

/* ---------- Sektion: Leistungs-Trio (Zickzack) ---------- */
.svc{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,90px); align-items:center; }
.svc + .svc{ margin-top:clamp(64px,9vw,140px); }
.svc.flip .svc-media{ order:2; }
.svc-media{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--char); }
.svc-media img{ width:100%; height:100%; object-fit:cover; filter:brightness(.74) contrast(1.03); transition:filter .5s ease, transform 1.2s cubic-bezier(.2,.7,.2,1); }
.svc-media::after{ content:""; position:absolute; inset:0;
  background:radial-gradient(90% 70% at 20% 110%, rgba(192,154,107,.30), rgba(192,154,107,0) 60%); }
.svc:hover .svc-media img{ filter:brightness(.9) contrast(1.05); }
.svc-no{ font-family:"Spectral",serif; font-style:italic; color:var(--copper); font-size:20px; }
.svc-title{ font-family:"Spectral",serif; font-weight:500; font-size:var(--fs-h2); line-height:1.04; margin:.15em 0 .5em; }
.svc-meta{ font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--ash); margin-bottom:1.4em; }

/* ---------- Vollbreite Foto-Aussage (Design-Objekt-Highlight) ---------- */
.showcase{ position:relative; min-height:88vh; display:flex; align-items:flex-end; overflow:hidden; }
.showcase img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:center 14%; /* Klimagerät sitzt oben im Bild -> oberen Bildausschnitt zeigen */
  filter:brightness(.62) contrast(1.05); }
.showcase::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(13,13,13,.55) 0%, rgba(13,13,13,0) 30%, rgba(13,13,13,.85) 100%),
            radial-gradient(70% 60% at 80% 0%, rgba(192,154,107,.28), rgba(192,154,107,0) 60%); }
.showcase .wrap{ position:relative; z-index:2; padding-bottom:clamp(60px,10vh,120px); }

/* ---------- BAFA Zahl-Statement ---------- */
.bafa{ text-align:center; background:var(--ink); }
.bafa-num{ font-family:"Spectral",serif; font-weight:600; font-style:italic;
  font-size:var(--fs-bafa); line-height:.85; color:var(--copper); letter-spacing:-.02em; }
.bafa-num small{ font-size:.32em; font-style:normal; vertical-align:baseline; }

/* ---------- Ablauf (horizontale Strecke) ---------- */
.flow{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; position:relative; }
.flow-step{ padding:0 clamp(16px,3vw,40px); border-left:1px solid rgba(192,154,107,.22); }
.flow-step:first-child{ border-left:0; padding-left:0; }
.flow-no{ font-family:"Spectral",serif; font-style:italic; color:var(--copper); font-size:18px; }
.flow-title{ font-family:"Spectral",serif; font-weight:500; font-size:var(--fs-h3); margin:.2em 0 .5em; }

/* ---------- Servicegebiet ---------- */
.geo{ font-family:"Spectral",serif; font-weight:500; font-size:clamp(26px,4.4vw,58px); line-height:1.35; }

/* ---------- Karten (Charcoal-Fläche, KEIN Rahmen) ---------- */
.card{ background:var(--char); padding:clamp(28px,3.4vw,46px); }
.card h3{ font-family:"Spectral",serif; font-weight:500; font-size:var(--fs-h3); margin:0 0 .5em; }
.values{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:rgba(192,154,107,.14); }
.value{ background:var(--ink); padding:clamp(28px,3.4vw,48px); }
.value .vno{ font-family:"Spectral",serif; font-style:italic; color:var(--copper); font-size:20px; }
.value h3{ font-family:"Spectral",serif; font-weight:500; font-size:var(--fs-h3); margin:.2em 0 .5em; }

/* Über-uns: echte Fotos */
.about-band{ position:relative; width:100%; aspect-ratio:21/8; overflow:hidden; background:var(--char); }
.about-band img{ width:100%; height:100%; object-fit:cover; filter:brightness(.74) contrast(1.04); }
.about-band::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(13,13,13,.2) 0%, rgba(13,13,13,0) 30%, rgba(13,13,13,.55) 100%); }
.team-layout{ display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(24px,4vw,56px); align-items:stretch; }
.team-photo{ overflow:hidden; background:var(--char); min-height:440px; }
.team-photo img{ width:100%; height:100%; object-fit:cover; object-position:center 28%; filter:grayscale(.08) brightness(.95) contrast(1.03); }
.region-photo{ margin-top:clamp(40px,6vw,72px); aspect-ratio:21/8; overflow:hidden; background:var(--char); }
.region-photo img{ width:100%; height:100%; object-fit:cover; filter:brightness(.82) contrast(1.03); }

/* Team */
.team{ display:grid; grid-template-columns:repeat(2,1fr); gap:2px; background:rgba(192,154,107,.14); }
.member{ background:var(--char); padding:clamp(26px,3vw,40px); display:flex; flex-direction:column; gap:6px; }
.member .m-name{ font-family:"Spectral",serif; font-weight:500; font-size:clamp(24px,2.6vw,32px); }
.member .m-role{ font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--copper); }
.member .m-contact{ font-size:14px; color:#b8b8b1; margin-top:6px; }

/* ---------- Footer (Archetyp 2: Kontakt als Statement) ---------- */
.site-foot{ background:var(--ink); padding-block:clamp(100px,16vh,200px) 0; text-align:center; }
.foot-statement{ font-family:"Spectral",serif; font-style:italic; font-weight:600;
  font-size:clamp(40px,6vw,72px); color:var(--copper); line-height:1; }
.foot-line{ margin-top:clamp(26px,3vw,40px); font-weight:300; font-size:clamp(14px,1.1vw,16px); color:var(--ivory); }
.foot-line a:hover{ color:var(--copper); }
.foot-hours{ margin-top:14px; font-size:12px; color:var(--ash); letter-spacing:.04em; }
.colophon{ margin-top:clamp(60px,9vh,110px); border-top:1px solid rgba(255,255,255,.07);
  padding:26px var(--pad-x); display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.colophon .cphon-brand{ font-family:"Josefin Sans",sans-serif; font-size:18px; color:var(--ivory); }
.colophon .cphon-brand b{ color:var(--copper); font-weight:400; }
.colophon-links{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ash); }
.colophon-links a{ transition:color .2s ease; }
.colophon-links a:hover{ color:var(--copper); }

/* ---------- Mobile-Nav (Archetyp 1: Fullscreen-Overlay) ---------- */
.mobile-nav{ position:fixed; inset:0; z-index:55; background:rgba(13,13,13,.985);
  backdrop-filter:blur(6px);
  display:flex; flex-direction:column; padding:clamp(22px,6vw,40px);
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease; }
.mobile-nav.open{ opacity:1; visibility:visible; }
.mnav-top{ display:flex; align-items:center; justify-content:space-between; }
.mnav-top .brand-logo{ height:clamp(56px,14vw,78px); }
.mnav-close{ width:36px; height:36px; position:relative; background:none; border:0; cursor:pointer; flex:none; }
.mnav-close span{ position:absolute; left:5px; right:5px; top:50%; height:1px; background:var(--copper); }
.mnav-close span:nth-child(1){ transform:translateY(-50%) rotate(45deg); }
.mnav-close span:nth-child(2){ transform:translateY(-50%) rotate(-45deg); }
.mnav-links{ flex:1; display:flex; flex-direction:column; justify-content:center; gap:clamp(4px,1.4vh,16px); }
.mnav-links a.m-link{ font-family:"Spectral",serif; font-weight:600; font-style:italic;
  font-size:clamp(40px,13vw,68px); line-height:1.1; color:var(--ivory); }
.mnav-links a.m-link[aria-current="page"]{ color:var(--copper); }
.mnav-foot{ display:flex; flex-direction:column; gap:16px; align-items:stretch; }
.mnav-foot .btn-block{ justify-content:center; }
.mnav-contact{ font-size:14px; letter-spacing:.03em; color:var(--ash); }
.mnav-contact a{ color:var(--copper); }

/* ---------- Kontakt-Formular (Inline-Underline, Floating-Label) ---------- */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,3vw,44px) clamp(24px,4vw,56px); }
.field{ position:relative; }
.field.full{ grid-column:1 / -1; }
.field input, .field textarea{
  width:100%; background:transparent; border:0; border-bottom:1px solid var(--ash);
  color:var(--ivory); font-family:"Josefin Sans",sans-serif; font-weight:300; font-size:17px;
  padding:14px 0 12px; outline:none; }
.field textarea{ resize:none; min-height:120px; }
.field label{ position:absolute; left:0; top:14px; color:var(--ash);
  font-size:11px; letter-spacing:.18em; text-transform:uppercase; pointer-events:none;
  transform-origin:left; transition:transform .2s ease, color .2s ease; }
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label{
  transform:translateY(-26px) scale(.92); color:var(--copper); }
/* Hairline färbt Kupfer (scaleX von links) bei Fokus */
.field::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--copper); transform:scaleX(0); transform-origin:left; transition:transform .25s ease-out; }
.field:focus-within::after{ transform:scaleX(1); }
/* Interesse-Auswahlzeile */
.choices{ display:flex; flex-wrap:wrap; gap:0 8px; align-items:center; }
.choice{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ash);
  padding:8px 0; cursor:pointer; transition:color .2s ease; background:none; border:0; font-family:inherit; }
.choice[aria-pressed="true"]{ color:var(--copper); }
.choice:hover{ color:var(--ivory); }

/* ---------- Reveal-Helfer ----------
   Versteckter Startzustand NUR wenn html.anim gesetzt ist (JS + GSAP + keine reduced-motion).
   Ohne JS / mit reduced-motion ist alles sofort sichtbar (Default).
   html.show-all = Watchdog-Notbremse: erzwingt Sichtbarkeit, falls rAF eingefroren ist
   (z.B. Hintergrund-Tab beim Screenshot) — Inhalte können nie unsichtbar hängenbleiben. */
[data-reveal]{ will-change:transform,opacity; }
html.anim [data-reveal]{ opacity:0; transform:translateY(38px); }
html.anim [data-reveal-group] > *{ opacity:0; transform:translateY(32px); }
html.anim #hero .eyebrow,
html.anim #hero .hero-line2,
html.anim #hero .hero-strip,
html.anim #hero .scroll-hint{ opacity:0; }
html.anim #hero .hero-line1{ opacity:0; transform:translateY(34px); }
html.anim #hero .hero-strip{ transform:translateY(22px); }
html.anim #hero .nav-link,
html.anim #hero .brand-logo{ opacity:0; transform:translateY(-8px); }

html.show-all [data-reveal],
html.show-all [data-reveal-group] > *,
html.show-all #hero .eyebrow,
html.show-all #hero .hero-line1,
html.show-all #hero .hero-line2,
html.show-all #hero .hero-strip,
html.show-all #hero .scroll-hint,
html.show-all #hero .nav-link,
html.show-all #hero .brand-logo{ opacity:1 !important; transform:none !important; }

/* ---------- Responsive ---------- */
@media (max-width:880px){
  .nav-desktop, .head-right .cta-head{ display:none; }
  .burger{ display:block; }
  .svc{ grid-template-columns:1fr; gap:24px; }
  .svc.flip .svc-media{ order:0; }
  .svc + .svc{ margin-top:64px; }
  .values, .flow, .form-grid, .team{ grid-template-columns:1fr; }
  .flow-step{ border-left:0; border-top:1px solid rgba(192,154,107,.22); padding:28px 0 0; }
  .flow-step:first-child{ padding-top:0; border-top:0; }
  .hero-copy{ left:var(--pad-x); right:var(--pad-x); bottom:clamp(140px,22vh,200px); }
  .colophon{ flex-direction:column; text-align:center; }
  .contact-grid{ grid-template-columns:1fr !important; gap:clamp(48px,8vw,72px) !important; }
  .team-layout{ grid-template-columns:1fr; }
  .team-photo{ min-height:340px; }
  .cap-nav{ display:none; } /* Kapsel bleibt mobil kompakt (Burger trägt die Navigation) */
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.01ms !important; }
}