/* =========================================================
   ORTHOPÄDIE DR. MED. JÖRG HAIN — Wiesbaden
   Designsystem v2 — serifenlos, groß, ruhig

   Schrift: Maison Neue (Lizenz-Webfont, lokal einbinden).
            Die @font-face-Blöcke unten sind vorbereitet – sobald
            die Lizenzdateien unter assets/fonts/ liegen und die
            Blöcke aktiv sind, greift Maison Neue automatisch.
            Bis dahin läuft Inter als metrisch sehr nahe
            Interimsschrift. Am Font-Stack ist nichts zu ändern.

   Primär   #ad5c36  (Clay / Terracotta – aus dem Logo)
   Sekundär #e2dfcf  (Sand)
   Prinzip: strenges Raster, Haarlinien, kein Radius,
            keine Verläufe, keine Schatten.
   ========================================================= */

/* ---------- Maison Neue: Lizenzdateien hier eintragen ----------
@font-face{font-family:"Maison Neue";src:url("../fonts/MaisonNeue-Book.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Maison Neue";src:url("../fonts/MaisonNeue-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Maison Neue";src:url("../fonts/MaisonNeue-Demi.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Maison Neue";src:url("../fonts/MaisonNeue-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
---------------------------------------------------------------- */

/* ---------- Tokens ---------- */
:root{
  --clay:        #ad5c36;
  --clay-deep:   #8a4626;
  --clay-tint:   #f4e9e2;
  --sand:        #e2dfcf;
  --sand-soft:   #eeece0;
  --paper:       #fbfaf6;
  --white:       #ffffff;
  --ink:         #171614;
  --ink-2:       #4c463f;
  --ink-3:       #7a7369;
  --line:        rgba(23,22,20,.16);
  --line-soft:   rgba(23,22,20,.09);
  --line-dark:   rgba(226,223,207,.20);

  --ff: "Maison Neue","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  --shell: 1340px;
  --gut: clamp(20px, 4.5vw, 72px);
  --sec: clamp(84px, 10vw, 160px);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--ff);
  font-size:clamp(16px,1.02vw,17.5px);
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--clay);outline-offset:3px}
::selection{background:var(--clay);color:#fff}

/* ---------- Layout ---------- */
.shell{max-width:var(--shell);margin-inline:auto;padding-inline:var(--gut)}
.sec{padding-block:var(--sec)}
.sec--tight{padding-block:clamp(64px,7vw,104px)}

/* ---------- Typografie ---------- */
.eyebrow{
  font-size:.86rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;color:var(--clay);
  display:flex;align-items:center;gap:16px;
}
.eyebrow::before{content:"";width:36px;height:2px;background:var(--clay);flex:none}
.eyebrow__i{color:var(--ink-3);font-weight:500;letter-spacing:.12em}
.on-dark .eyebrow{color:var(--sand)}
.on-dark .eyebrow::before{background:var(--sand)}
.on-dark .eyebrow__i{color:rgba(226,223,207,.5)}

.h1{
  font-size:clamp(2.4rem,5.6vw,4.6rem);
  line-height:1;
  letter-spacing:-.035em;
  font-weight:600;
}
.h2{
  font-size:clamp(2.1rem,4.8vw,3.7rem);
  line-height:1.02;
  letter-spacing:-.033em;
  font-weight:600;
}
.h3{
  font-size:clamp(1.28rem,1.7vw,1.55rem);
  line-height:1.22;
  letter-spacing:-.022em;
  font-weight:600;
}
.h4{font-size:1.02rem;font-weight:600;letter-spacing:-.016em;line-height:1.32}
.lead{
  font-size:clamp(1.08rem,1.4vw,1.3rem);
  line-height:1.55;color:var(--ink-2);font-weight:400;letter-spacing:-.012em;
}
.muted{color:var(--ink-3)}
em.acc{font-style:normal;color:var(--clay)}
.on-dark em.acc{color:var(--sand)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:11px;
  padding:17px 30px;border:1px solid transparent;
  font-size:.87rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  transition:background .22s ease,color .22s ease,border-color .22s ease;
  white-space:nowrap;
}
.btn svg{width:14px;height:14px;flex:none;transition:transform .28s cubic-bezier(.4,0,.2,1)}
.btn:hover svg{transform:translateX(4px)}
.btn--primary{background:var(--clay);color:#fff;border-color:var(--clay)}
.btn--primary:hover{background:var(--clay-deep);border-color:var(--clay-deep)}
.btn--ghost{border-color:var(--line);color:var(--ink)}
.btn--ghost:hover{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.on-dark .btn--ghost{border-color:var(--line-dark);color:var(--sand)}
.on-dark .btn--ghost:hover{background:var(--sand);border-color:var(--sand);color:var(--ink)}
.btn--sm{padding:13px 22px;font-size:.8rem}

.tlink{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.86rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--clay);padding-bottom:6px;border-bottom:1px solid rgba(173,92,54,.3);
  transition:border-color .2s ease,gap .25s ease;
}
.tlink:hover{border-color:var(--clay);gap:16px}
.on-dark .tlink{color:var(--sand);border-bottom-color:rgba(226,223,207,.3)}
.on-dark .tlink:hover{border-color:var(--sand)}

/* =========================================================
   HEADER
   ========================================================= */
.topbar{background:var(--ink);color:rgba(226,223,207,.82);font-size:.82rem;letter-spacing:.02em}
.topbar__in{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:38px}
.topbar__list{display:flex;align-items:center;gap:28px}
.topbar__list li{display:flex;align-items:center;gap:9px}
.topbar a:hover{color:#fff}
.dot{width:5px;height:5px;background:var(--clay);flex:none}

.hdr{
  position:sticky;top:0;z-index:60;
  background:rgba(251,250,246,.9);
  backdrop-filter:saturate(1.5) blur(14px);
  border-bottom:1px solid var(--line-soft);
  transition:border-color .25s ease;
}
.hdr.is-stuck{border-bottom-color:var(--line)}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:92px}
.prog{position:absolute;left:0;bottom:-1px;height:2px;background:var(--clay);width:0;transition:width .1s linear}

.brand{display:flex;align-items:center;flex:none}
.brand img{width:clamp(38px,3.4vw,48px);height:auto}

.nav{display:flex;align-items:center;gap:36px}
.nav a{font-size:.94rem;font-weight:500;letter-spacing:-.005em;position:relative;padding-block:7px}
.nav a::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:1.5px;background:var(--clay);
  transition:width .3s cubic-bezier(.4,0,.2,1);
}
.nav a:hover::after{width:100%}
.hdr__cta{display:flex;align-items:center;gap:20px}
.hdr__tel{font-size:.94rem;font-weight:600;display:flex;align-items:center;gap:9px;white-space:nowrap}
.hdr__tel svg{width:15px;height:15px;color:var(--clay)}

.burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;margin-right:-10px}
.burger span{display:block;width:23px;height:1.5px;background:var(--ink);position:relative;transition:background .2s}
.burger span::before,.burger span::after{
  content:"";position:absolute;left:0;width:23px;height:1.5px;background:var(--ink);transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.burger span::before{top:-7px}.burger span::after{top:7px}
body.nav-open .burger span{background:transparent}
body.nav-open .burger span::before{transform:translateY(7px) rotate(45deg)}
body.nav-open .burger span::after{transform:translateY(-7px) rotate(-45deg)}

.drawer{
  position:fixed;inset:0;z-index:55;background:var(--paper);
  padding:124px var(--gut) 40px;
  transform:translateY(-101%);transition:transform .5s cubic-bezier(.65,0,.15,1);
  overflow-y:auto;
}
body.nav-open .drawer{transform:translateY(0)}
.drawer a.drawer__lnk{
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:clamp(1.6rem,6vw,2.1rem);font-weight:600;letter-spacing:-.03em;
  padding:18px 0;border-bottom:1px solid var(--line-soft);
}
.drawer a.drawer__lnk span{font-size:.68rem;letter-spacing:.18em;color:var(--ink-3);font-weight:500}
.drawer__foot{margin-top:34px;display:grid;gap:14px}

/* =========================================================
   HERO
   ========================================================= */
.hero{position:relative;padding-top:clamp(56px,7vw,110px);padding-bottom:0;overflow:hidden}
/* Keyword-Zeile innerhalb der H1 – optisch Eyebrow, semantisch Teil der Hauptüberschrift */
.h1 .kw{
  display:flex;align-items:center;gap:14px;
  font-size:.86rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;color:var(--clay);line-height:1.4;
  margin-bottom:clamp(26px,3vw,42px);
  opacity:0;transition:opacity .7s ease .1s;
}
.h1 .kw::before{content:"";width:36px;height:2px;background:var(--clay);flex:none}
.hero.ready .h1 .kw{opacity:1}
.hero__h{
  margin-top:0;
  font-size:clamp(2.5rem,6.3vw,5.2rem);
  line-height:.98;letter-spacing:-.038em;
}
.hero__h .ln{display:block;overflow:hidden;padding-bottom:.03em}
.hero__h .ln i{display:block;font-style:normal;transform:translateY(103%);transition:transform 1s cubic-bezier(.19,1,.22,1)}
.hero.ready .hero__h .ln i{transform:translateY(0)}
.hero__h .ln:nth-child(2) i{transition-delay:.1s}

.hero__grid{
  display:grid;grid-template-columns:1fr .82fr;
  gap:clamp(32px,5vw,80px);align-items:stretch;
  margin-top:clamp(40px,4.5vw,66px);
}
.hero__copy{display:flex;flex-direction:column;padding-bottom:clamp(48px,6vw,86px);max-width:38em}
.hero__lead{max-width:33em;opacity:0;transform:translateY(12px);transition:opacity .8s ease .4s,transform .8s ease .4s}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px;opacity:0;transform:translateY(12px);transition:opacity .8s ease .5s,transform .8s ease .5s}
.hero__note{margin-top:28px;font-size:.94rem;color:var(--ink-3);display:flex;align-items:center;gap:10px;opacity:0;transition:opacity .8s ease .62s}
.hero__note svg{width:15px;height:15px;color:var(--clay);flex:none}
.hero.ready .hero__lead,.hero.ready .hero__cta{opacity:1;transform:none}
.hero.ready .hero__note{opacity:1}

.hero__badge{
  margin-top:auto;padding-top:20px;
  border-top:2px solid var(--clay);max-width:30em;
  opacity:0;transition:opacity .8s ease .72s;
}
.hero.ready .hero__badge{opacity:1}
.hero__badge .n{font-size:1.06rem;font-weight:700;letter-spacing:-.018em;display:block}
.hero__badge .r{font-size:.9rem;color:var(--ink-3);margin-top:6px;line-height:1.5;display:block}

.hero__media{margin:0}
.hero__frame{display:block;overflow:hidden}
.hero__frame img{
  width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 14%;
  transform:scale(1.09);transition:transform 1.5s cubic-bezier(.19,1,.22,1) .2s;
}
.hero.ready .hero__frame img{transform:scale(1)}

/* Haltungsleiste unter dem Hero */
.facts{border-top:1px solid var(--line);background:var(--sand-soft)}
.facts__grid{display:grid;grid-template-columns:repeat(3,1fr)}
.facts__it{padding:46px 42px 44px;border-right:1px solid var(--line-soft)}
.facts__it:first-child{padding-left:0}
.facts__it:last-child{border-right:0;padding-right:0}
.facts__n{font-size:.82rem;letter-spacing:.16em;font-weight:700;color:var(--clay);display:block}
.facts__t{
  margin-top:16px;font-size:clamp(1.45rem,2.1vw,1.85rem);
  line-height:1.1;letter-spacing:-.03em;font-weight:600;
}
.facts__l{margin-top:14px;font-size:1rem;color:var(--ink-2);line-height:1.55;max-width:26em}

/* =========================================================
   Abschnitts-Kopf — Text links, Bild rechts
   ========================================================= */
.shead{
  display:grid;grid-template-columns:1.04fr .96fr;
  gap:clamp(28px,4.5vw,80px);align-items:center;
}
.shead__l{max-width:34em}
.shead .h2{margin-top:24px}
.shead .lead{max-width:34em}
.shead__note{margin-top:28px;font-size:.98rem;color:var(--ink-3);max-width:26em;line-height:1.55}
.shead__note a{color:var(--clay);border-bottom:1px solid rgba(173,92,54,.3);padding-bottom:1px}
.shead__note a:hover{border-color:var(--clay)}
.on-dark .shead__note{color:rgba(226,223,207,.6)}

.shead__media{margin:0;overflow:hidden}
.shead__media img{
  width:100%;aspect-ratio:4/3;object-fit:cover;
  transform:scale(1.05);transition:transform 1.5s cubic-bezier(.19,1,.22,1);
}
.shead__media.in img{transform:scale(1)}

/* Platzhalter für noch fehlende Fotos */
.ph{
  position:relative;display:grid;place-items:center;
  aspect-ratio:4/3;background:var(--sand-soft);
  border:1px solid var(--line-soft);
}
.sandbg .ph,.dark .ph{background:var(--paper)}
.ph--tall{aspect-ratio:5/6}
@media (max-width:900px){.ph--tall{aspect-ratio:4/3}}
.ph img.ph__mark{width:58px;max-width:58px;height:auto;aspect-ratio:auto;object-fit:contain;opacity:.15;transform:none !important}
.ph figcaption{
  position:absolute;left:0;bottom:0;padding:14px 18px;
  font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--ink-3);
}

/* =========================================================
   UNSER KONZEPT
   ========================================================= */
.konz__h{margin-top:26px;max-width:14em}
.konz{
  display:grid;grid-template-columns:1.15fr .85fr;
  gap:clamp(28px,4.5vw,72px);align-items:start;
  margin-top:clamp(34px,4vw,52px);
}
.konz__t{max-width:36em;color:#3d382f}
.konz__t a{
  color:var(--clay);font-weight:500;
  border-bottom:1px solid rgba(173,92,54,.4);padding-bottom:1px;
  transition:border-color .2s ease;
}
.konz__t a:hover{border-color:var(--clay)}
.konz__l{border-top:1px solid rgba(23,22,20,.18)}
.konz__l li{border-bottom:1px solid rgba(23,22,20,.11)}
.konz__l a{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:17px 0;font-size:1.02rem;font-weight:600;letter-spacing:-.014em;
  transition:padding-left .3s cubic-bezier(.4,0,.2,1),color .2s ease;
}
.konz__l a:hover{padding-left:10px;color:var(--clay)}
.konz__l svg{width:15px;height:15px;flex:none;color:var(--clay);opacity:0;transform:translateX(-6px);transition:.28s ease}
.konz__l a:hover svg{opacity:1;transform:translateX(0)}
@media (max-width:900px){
  .konz{grid-template-columns:1fr;gap:34px}
  .konz__h{max-width:none}
}

/* =========================================================
   SCHWERPUNKTE — zwei breite Kacheln pro Zeile,
   die fünfte spannt über die volle Breite
   ========================================================= */
.foc{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(34px,4vw,60px) clamp(24px,3vw,48px);
  margin-top:clamp(40px,4vw,60px);
}
.foc__it{display:flex;flex-direction:column}
.foc__media{display:block;overflow:hidden;margin-bottom:26px}
.foc__media img{
  width:100%;aspect-ratio:3/2;object-fit:cover;
  transform:scale(1.02);transition:transform .9s cubic-bezier(.19,1,.22,1);
}
.foc__it:hover .foc__media img{transform:scale(1.06)}
.foc__media img.foc--shoulder{object-position:center 40%}
.foc__n{font-size:.82rem;letter-spacing:.16em;font-weight:700;color:var(--clay)}
.foc__t{
  display:block;margin-top:14px;
  font-size:clamp(1.3rem,1.9vw,1.72rem);line-height:1.14;
  letter-spacing:-.028em;font-weight:600;
}
.foc__d{
  display:block;margin-top:14px;font-size:1rem;line-height:1.6;
  color:var(--ink-2);flex:1;max-width:38em;
}
.foc__a{
  display:inline-flex;align-items:center;gap:9px;margin-top:24px;
  font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
  color:var(--clay);padding-bottom:6px;
  border-bottom:1px solid rgba(173,92,54,.28);align-self:flex-start;
  transition:border-color .2s ease,gap .25s ease;
}
.foc__a svg{width:13px;height:13px;flex:none}
.foc__it:hover .foc__a{border-color:var(--clay);gap:14px}

/* Breite Kachel */
.foc__it--wide{
  grid-column:1 / -1;
  display:grid;grid-template-columns:.92fr 1.08fr;
  gap:clamp(24px,3vw,48px);align-items:center;
  border-top:1px solid var(--line-soft);padding-top:clamp(30px,3vw,44px);
}
.foc__it--wide .foc__media{margin-bottom:0}
.foc__it--wide .foc__media img{aspect-ratio:16/10}
.foc__body{display:flex;flex-direction:column;align-items:flex-start}
.foc__it--wide .foc__d{flex:0 1 auto}

@media (max-width:820px){
  .foc{grid-template-columns:1fr;gap:44px}
  .foc__media img{aspect-ratio:16/10}
  .foc__it--wide{grid-template-columns:1fr;padding-top:34px}
  .foc__it--wide .foc__media{margin-bottom:26px}
}

/* =========================================================
   PRINZIPIEN
   ========================================================= */
.princ{display:grid;grid-template-columns:repeat(3,1fr);margin-top:clamp(56px,6vw,88px)}
.princ__it{padding:34px 38px 10px 0;border-top:1.5px solid var(--ink)}
.princ__it + .princ__it{padding-left:38px;border-left:1px solid var(--line-soft)}
.princ__n{font-size:.82rem;letter-spacing:.16em;font-weight:700;color:var(--clay)}
.princ__it .h3{margin-top:20px}
.princ__it p{margin-top:16px;color:var(--ink-2);font-size:1rem}

/* =========================================================
   DUNKLE SEKTIONEN
   ========================================================= */
.dark{background:var(--ink);color:var(--sand)}
.dark .h2,.dark .h3{color:#fff}
.dark p{color:rgba(226,223,207,.7)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,88px);align-items:center}
.split--rev .split__media{order:-1}
.split__media{overflow:hidden}
.split__media img{width:100%;aspect-ratio:5/6;object-fit:cover;transform:scale(1.06);transition:transform 1.5s cubic-bezier(.19,1,.22,1)}
.split__media.in img{transform:scale(1)}
.split__body .h2{margin-top:24px}
.split__body p{margin-top:24px;max-width:35em}

.mlist{margin-top:38px;display:grid;grid-template-columns:1fr 1fr;gap:0 34px}
.mlist li{
  min-height:58px;padding:15px 0;border-top:1px solid var(--line-dark);
  font-size:.98rem;display:flex;align-items:center;gap:12px;color:rgba(226,223,207,.88);
}
.mlist li::before{content:"";width:5px;height:5px;background:var(--clay);flex:none}

.quote{
  margin-top:44px;padding-left:28px;border-left:2px solid var(--clay);
  font-size:clamp(1.25rem,1.9vw,1.65rem);font-weight:500;letter-spacing:-.024em;
  line-height:1.32;color:#fff !important;
}
.quote cite{
  display:block;margin-top:18px;font-style:normal;
  font-size:.82rem;letter-spacing:.15em;text-transform:uppercase;color:var(--clay);font-weight:600;
}

/* =========================================================
   LEISTUNGEN
   ========================================================= */
.svc{margin-top:clamp(52px,5vw,76px);border-top:1.5px solid var(--ink)}
.svc__grid{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(30px,4vw,72px)}
.svc__it{
  display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:22px;
  padding:26px 6px 26px 0;border-bottom:1px solid var(--line-soft);
  transition:padding-left .35s cubic-bezier(.4,0,.2,1),background .3s ease;
}
.svc__it:hover{padding-left:16px;background:rgba(173,92,54,.04)}
.svc__n{font-size:.8rem;letter-spacing:.12em;color:var(--ink-3);font-weight:600;font-variant-numeric:tabular-nums}
.svc__t{font-size:1.06rem;font-weight:600;letter-spacing:-.022em}
.svc__d{display:block;font-weight:400;font-size:.95rem;color:var(--ink-3);margin-top:7px;line-height:1.55;letter-spacing:0}
.svc__a{color:var(--clay);opacity:0;transform:translateX(-8px);transition:.3s cubic-bezier(.4,0,.2,1);align-self:center}
.svc__a svg{width:16px;height:16px}
.svc__it:hover .svc__a{opacity:1;transform:translateX(0)}

/* =========================================================
   ABLAUF
   ========================================================= */
.steps{display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(52px,5vw,80px)}
.steps__it{padding:0 30px 0 0}
.steps__it + .steps__it{padding-left:30px}
.steps__bar{height:2px;background:var(--line);position:relative;margin-bottom:28px}
.steps__bar i{position:absolute;left:0;top:0;height:2px;width:0;background:var(--clay);transition:width .9s cubic-bezier(.19,1,.22,1)}
.steps__it.in .steps__bar i{width:38px}
.steps__n{font-size:.82rem;letter-spacing:.16em;font-weight:700;color:var(--clay)}
.steps__it .h4{margin-top:14px}
.steps__it p{margin-top:12px;font-size:.98rem;color:var(--ink-2)}

/* =========================================================
   DIAGNOSTIK
   ========================================================= */
.diag__list{margin-top:34px;border-top:1px solid var(--line)}
.diag__list li{display:flex;gap:20px;align-items:baseline;padding:17px 0;border-bottom:1px solid var(--line-soft)}
.diag__list b{font-size:1.02rem;font-weight:600;min-width:9.5em;letter-spacing:-.014em}
.diag__list span{font-size:.98rem;color:var(--ink-3)}

/* =========================================================
   SAND / Streifen
   ========================================================= */
.whitebg{background:var(--white)}
.sandbg{background:var(--sand)}
.sandbg .lead,.sandbg p{color:#3d382f}
/* =========================================================
   FAQ
   ========================================================= */
.faq{margin-top:clamp(44px,4vw,64px);border-top:1.5px solid var(--ink)}
.faq__it{border-bottom:1px solid var(--line-soft)}
.faq__q{
  width:100%;display:flex;justify-content:space-between;align-items:flex-start;gap:24px;
  padding:26px 0;text-align:left;font-size:1.06rem;font-weight:600;letter-spacing:-.022em;
}
.faq__q .ic{flex:none;width:22px;height:22px;position:relative;margin-top:4px}
.faq__q .ic::before,.faq__q .ic::after{content:"";position:absolute;background:var(--clay);transition:transform .35s cubic-bezier(.4,0,.2,1)}
.faq__q .ic::before{left:0;top:10px;width:22px;height:1.5px}
.faq__q .ic::after{left:10px;top:0;width:1.5px;height:22px}
.faq__it.open .ic::after{transform:scaleY(0)}
.faq__a{max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.4,0,.2,1)}
.faq__a p{padding:0 60px 30px 0;color:var(--ink-2);font-size:1.02rem;max-width:62ch}

/* =========================================================
   KONTAKT
   ========================================================= */
.cta__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(38px,5vw,88px)}
.hours{border-top:1px solid var(--line-dark);margin-top:10px}
.hours li{display:flex;justify-content:space-between;gap:20px;padding:15px 0;border-bottom:1px solid var(--line-dark);font-size:1rem}
.hours li b{font-weight:600;color:#fff}
.hours li span{color:rgba(226,223,207,.7);text-align:right;font-variant-numeric:tabular-nums}
.hours li.off span{color:rgba(226,223,207,.4)}
.hours li.now{background:rgba(173,92,54,.16);padding-inline:12px;margin-inline:-12px}
.cta__box{margin-top:36px;display:flex;flex-wrap:wrap;gap:14px}
.addr{display:grid;gap:24px;margin-top:34px}
.addr__it{display:grid;gap:6px}
.addr__k{font-size:.82rem;letter-spacing:.15em;text-transform:uppercase;color:var(--clay);font-weight:600}
.addr__v{font-size:1rem;color:#fff;line-height:1.5}
.addr__v a:hover{color:var(--clay)}

/* =========================================================
   FOOTER
   ========================================================= */
.ftr{background:#100f0e;color:rgba(226,223,207,.66);font-size:.94rem}
.ftr__top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:38px;padding-block:clamp(56px,5vw,80px)}
.ftr h5{font-size:.82rem;letter-spacing:.15em;text-transform:uppercase;color:var(--sand);font-weight:600;margin:0 0 20px}
.ftr li{padding:7px 0}
.ftr a:hover{color:var(--clay)}
.ftr__brand img{width:46px;margin-bottom:22px}
.ftr__bot{border-top:1px solid rgba(226,223,207,.1);padding-block:24px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:.86rem}

/* Mobile Sticky CTA */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:none;grid-template-columns:1fr 1fr;background:var(--ink);border-top:1px solid rgba(226,223,207,.14)}
.mbar a{padding:17px 10px;text-align:center;font-size:.84rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--sand)}
.mbar a + a{background:var(--clay);color:#fff}

/* ---------- Reveal ---------- */
.rv{opacity:0;transform:translateY(16px);transition:opacity .8s cubic-bezier(.19,1,.22,1),transform .8s cubic-bezier(.19,1,.22,1)}
.rv.in{opacity:1;transform:none}

/* =========================================================
   RESPONSIVE
   ========================================================= */
/* Header: Telefon weicht, sobald die Navigation eng wird */
@media (max-width:1280px){
  .hdr__tel{display:none}
  .nav{gap:28px}
}
/* Ab hier Burger-Menü – fünf Menüpunkte brauchen sonst zu viel Platz */
@media (max-width:1100px){
  .nav{display:none}
  .burger{display:flex}
}

@media (max-width:1140px){
  .facts__it{padding-inline:28px}
  .steps{grid-template-columns:repeat(2,1fr);gap:42px 0}
  .princ{grid-template-columns:1fr}
  .princ__it + .princ__it{padding-left:0;border-left:0}
  .ftr__top{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .facts__grid{grid-template-columns:1fr}
  .facts__it{padding:34px 0;border-right:0}
  .facts__it + .facts__it{border-top:1px solid var(--line-soft)}
  .hero__grid{grid-template-columns:1fr;gap:38px}
  .hero__copy{display:block;padding-bottom:0;max-width:none;order:2}
  .hero__badge{margin-top:clamp(30px,5vw,44px)}
  .hero__media{order:1}
  .hero__frame img{aspect-ratio:4/3;object-position:center 18%}
  .hero__badge{max-width:none}
  .shead{grid-template-columns:1fr;gap:34px}
  .shead__l,.shead .lead{max-width:none}
  .split{grid-template-columns:1fr;gap:36px}
  .split--rev .split__media{order:0}
  .split__media img{aspect-ratio:4/3}
  .svc__grid{grid-template-columns:1fr}
  .cta__grid{grid-template-columns:1fr}
  .mbar{display:grid}
  body{padding-bottom:54px}
}
@media (max-width:600px){
  .topbar__list li:not(:first-child){display:none}
  .brand img{width:34px}
  .hdr__cta .btn{display:none}
  .hdr__in{min-height:70px}
  .hero__frame img{aspect-ratio:1/1;object-position:center 12%}
  .hero__h{font-size:clamp(2.1rem,9.6vw,3.1rem);letter-spacing:-.03em}
  .facts__grid{grid-template-columns:1fr}
  .facts__it{padding:32px 0;border-right:0}
  .facts__it + .facts__it{border-top:1px solid var(--line-soft)}
  .steps{grid-template-columns:1fr}
  .steps__it,.steps__it + .steps__it{padding-left:0;padding-right:0}
  .mlist{grid-template-columns:1fr}
  .ftr__top{grid-template-columns:1fr;gap:32px}
  .faq__a p{padding-right:0}
  .btn,.hero__cta .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important}
  .rv{opacity:1;transform:none}
  .hero .h1 .ln i{transform:none}
  .h1 .kw{opacity:1}
  .hero__lead,.hero__cta,.hero__note{opacity:1;transform:none}
  .hero__frame img,.split__media img,.strip img{transform:none}
}
@media print{.hdr,.topbar,.mbar,.drawer,.prog{display:none}}