/* =============================================================
   DK MONTAGE-SERVICE — Design System (Richtung A, v3)
   Referenzen: bulthaup · Reform CPH · Vipp · Poggenpohl
   Eigene Designsprache: ruhige Grotesk als Leitelement +
   feine „Präzisions"-Details (versetzter Rahmen, Registermarken).
   ============================================================= */

/* Selbst-gehostete Schriften — DSGVO-konform & schnell (kein Google-CDN)
   Fraunces = Überschriften (edle Serife, Handwerks-Charakter), Instrument Sans = Fließtext */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400 600;font-display:swap;src:url('../assets/fonts/fraunces-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400 600;font-display:swap;src:url('../assets/fonts/fraunces-ext2.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400 600;font-display:swap;src:url('../assets/fonts/fraunces-ext1.woff2') format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 600;font-stretch:100%;font-display:swap;src:url('../assets/fonts/instrumentsans-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 600;font-stretch:100%;font-display:swap;src:url('../assets/fonts/instrumentsans-ext1.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}}
img,svg{display:block;max-width:100%;height:auto}
button,a{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none}
a{text-decoration:none}
ul{list-style:none}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:2px}
/* Sicherheitsnetz gegen lange, unteilbare Wörter (z.B. "Datenschutzerklärung") auf sehr schmalen Bildschirmen */
h1,h2,h3{overflow-wrap:break-word;word-break:break-word}

:root{
  --bone:#F2EEE6;
  --bone-deep:#E8E1D4;
  --paper:#FCFAF5;
  --ink:#17140F;          /* dunkler für maximale Headline-Präsenz */
  --ink-soft:#33302A;
  --muted:#736A5E;
  --muted-2:#9A9084;
  --line:#DCD5C7;
  --line-soft:#E8E2D6;
  --brass:#9A7B4F;
  --brass-deep:#7C6039;
  --brass-light:#C6975C;

  --font:'Instrument Sans',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-head:'Fraunces','Iowan Old Style','Palatino Linotype',Georgia,'Times New Roman',serif;
  --container:1280px;
  --gutter:clamp(1.25rem,4vw,3.5rem);
  --ease:cubic-bezier(.22,.61,.36,1);

  --t-label:.74rem;
  --t-body:clamp(1.02rem,.98rem + .2vw,1.1rem);
  --t-lead:clamp(1.1rem,1.02rem + .45vw,1.34rem);
  --h1:clamp(2.35rem,1.5rem + 3.6vw,4.4rem);
}

body{
  font-family:var(--font);font-size:var(--t-body);line-height:1.62;
  color:var(--ink);
  /* Flache Bone-Fläche + kaum sichtbarer Lichthauch hinter dem Hero (Papier, das Licht fängt) */
  background:var(--bone) linear-gradient(180deg,rgba(255,253,248,.75),rgba(255,253,248,0) 34rem) no-repeat;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;letter-spacing:-0.01em;
  font-feature-settings:"kern","liga","calt";font-kerning:normal;font-optical-sizing:auto;
}
h1,h2,h3{font-family:var(--font-head);font-weight:500;line-height:1.1;letter-spacing:-0.005em;text-wrap:balance}
::selection{background:var(--ink);color:var(--bone)}
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}

/* Nummeriertes Label — die „technische" Stimme der Marke */
.label{display:inline-flex;align-items:baseline;gap:.7rem;font-size:var(--t-label);font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.label__n{color:var(--brass-deep);font-variant-numeric:tabular-nums;letter-spacing:.1em}

/* ---------- Buttons ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;font-size:.94rem;font-weight:500;padding:1.05rem 1.75rem;border-radius:3px;line-height:1;transition:transform .35s var(--ease),background .3s var(--ease),color .3s var(--ease),box-shadow .35s var(--ease)}
.btn svg{width:1.05em;height:1.05em;flex:none;transition:transform .3s var(--ease)}
/* Sheen-Sweep: ein Lichtstreif wandert beim Hover über den Button */
.btn--primary::before,.btn--light::before{content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;transform:skewX(-18deg);transition:left .75s var(--ease);pointer-events:none;z-index:1}
.btn--primary::before{background:linear-gradient(105deg,transparent,rgba(255,255,255,.16),transparent)}
.btn--light::before{background:linear-gradient(105deg,transparent,rgba(23,20,15,.06),transparent)}
.btn--primary:hover::before,.btn--light:hover::before{left:140%}
.btn--primary{background:linear-gradient(180deg,#221D16,#17140F 70%);color:var(--bone);box-shadow:0 1px 2px rgba(23,20,15,.22),inset 0 1px 0 rgba(255,255,255,.08)}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 20px 38px -16px rgba(23,20,15,.62),inset 0 1px 0 rgba(255,255,255,.12)}
.btn--primary:hover svg{transform:translateX(4px)}
.btn--primary:active{transform:translateY(0);box-shadow:0 2px 6px -2px rgba(23,20,15,.45)}
.btn--text{color:var(--ink);padding:1.05rem .3rem;position:relative}
.btn--text::after{content:"";position:absolute;left:.3rem;right:.3rem;bottom:.65rem;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.btn--text:hover::after{transform:scaleX(1)}
.btn--text svg{color:var(--brass-deep)}

/* ---------- Header / Navigation ---------- */
.site-header{position:sticky;top:0;z-index:100;transition:background .4s var(--ease)}
.site-header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line);transform:scaleX(0);transition:transform .5s var(--ease)}
.site-header.is-scrolled{background:rgba(242,238,230,.85);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.site-header.is-scrolled::after{transform:scaleX(1)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:2rem;height:92px;transition:height .4s var(--ease)}
.site-header.is-scrolled .nav{height:74px}

.brand{display:inline-flex;align-items:center;gap:.7rem;flex:none}
/* Firmensiegel in Messing getönt — fügt sich in die Farbwelt statt aufgeklebt zu wirken */
.brand__seal{width:38px;height:auto;flex:none;transition:width .4s var(--ease)}
.site-header.is-scrolled .brand__seal{width:33px}
/* Sehr schmale Handys: Markenblock kompakter, damit der Menü-Button Platz hat */
@media (max-width:400px){.brand{gap:.55rem}.brand__seal,.site-header.is-scrolled .brand__seal{width:32px}}
@media (max-width:350px){.brand__rule,.brand__word{display:none}}
.brand__mono{font-weight:600;font-size:1.42rem;letter-spacing:-.03em;color:var(--ink);line-height:1}
.brand__rule{width:1px;height:24px;background:var(--line)}
.brand__word{font-size:.6rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);line-height:1.4}
/* Wortmarke auf Mobil kräftiger & besser lesbar */
@media (max-width:940px){.brand__word{color:var(--ink-soft);font-size:.64rem;letter-spacing:.12em;line-height:1.3}}

.nav__links{display:flex;align-items:center;gap:.2rem}
.nav__links a{position:relative;font-size:.88rem;font-weight:500;color:var(--ink-soft);padding:.55rem .95rem;letter-spacing:.01em;transition:color .25s}
.nav__links a::after{content:"";position:absolute;left:.95rem;right:.95rem;bottom:.35rem;height:1px;background:var(--brass);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav__links a:hover{color:var(--ink)}
.nav__links a:hover::after{transform:scaleX(1)}
.nav__mcta{display:none}
.nav__mcta a::after{display:none}

.nav__actions{display:flex;align-items:center;gap:1.5rem;flex:none}
.nav__phone{display:inline-flex;align-items:center;gap:.5rem;font-size:.88rem;font-weight:500;color:var(--ink)}
.nav__phone svg{width:1rem;height:1rem;color:var(--brass-deep)}
.nav__toggle{display:none;width:44px;height:44px;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.nav__toggle span{width:22px;height:1.5px;background:var(--ink);transition:transform .3s var(--ease),opacity .2s}
.nav__toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ---------- Hero ---------- */
/* overflow:clip hält den dekorativen Lichtschein im Rahmen (kein 1px-Seitenscroll auf Mobil) */
.hero{position:relative;overflow:clip}
.hero__grid{
  display:grid;grid-template-columns:1.06fr .94fr;
  gap:clamp(2.5rem,5vw,6.5rem);align-items:center;
  padding-block:clamp(2.75rem,2rem + 4.5vw,6rem) clamp(4rem,3rem + 5vw,7.5rem);
}
/* Scroll-Indikator: dünne Linie, Messing-Segment wandert nach unten */
.hero__scroll{position:absolute;left:var(--gutter);bottom:clamp(1.4rem,2.5vw,2.4rem);display:inline-flex;align-items:center;gap:.85rem;font-size:.68rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.hero__scroll__line{position:relative;width:1.5px;height:42px;background:var(--line);overflow:hidden;border-radius:2px}
.hero__scroll__line::after{content:"";position:absolute;left:0;top:-60%;width:100%;height:60%;background:linear-gradient(180deg,transparent,var(--brass));animation:scrollLine 2s var(--ease) infinite}
@keyframes scrollLine{0%{top:-60%}60%,100%{top:100%}}
.hero__scroll:hover{color:var(--ink)}
@media (max-width:940px){.hero__scroll{display:none}}
@media (prefers-reduced-motion:reduce){.hero__scroll__line::after{animation:none;top:0}}
.hero__eyebrow{margin-bottom:2.2rem}
.hero h1{font-size:var(--h1);font-weight:500;letter-spacing:-.028em;margin-bottom:1.9rem;max-width:15ch}
.hero h1 .accent{color:var(--brass-deep)}
.hero__lead{font-size:var(--t-lead);color:var(--muted);max-width:44ch;font-weight:400;line-height:1.6;margin-bottom:2.8rem}
.hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.5rem}

/* Bild mit versetztem Rahmen + Messing-Registermarken (Präzisions-Signatur) */
.frame{margin:0}
.frame__box{position:relative}
.frame__box::before{content:"";position:absolute;inset:-16px;border:1px solid var(--line);border-radius:3px;pointer-events:none}
.frame__wrap{overflow:hidden;border-radius:2px;background:var(--bone-deep)}
.frame__img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 40%;box-shadow:0 45px 80px -50px rgba(23,20,15,.55)}
.hero__media .frame__img{transform:scale(1.06);transition:transform 1.3s var(--ease)}
.hero__media.in .frame__img{transform:scale(1)}
.frame__tick{position:absolute;width:11px;height:11px;pointer-events:none;opacity:0;transform:scale(.55);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.frame__tick--tr{top:-16px;right:-16px;border-top:1.5px solid var(--brass);border-right:1.5px solid var(--brass)}
.frame__tick--bl{bottom:-16px;left:-16px;border-bottom:1.5px solid var(--brass);border-left:1.5px solid var(--brass)}
/* Registermarken „klicken" beim Reveal ein — verstärkt die Präzisions-Signatur */
[data-reveal].in .frame__tick{opacity:1;transform:none;transition-delay:.55s}
.frame__cap{margin-top:2.4rem;display:flex;align-items:center;gap:.7rem;font-size:var(--t-label);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.frame__cap::before{content:"";width:22px;height:1px;background:var(--brass)}

/* ---------- Trust-Leiste ---------- */
.hero__trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.hero__trust .container{display:flex;align-items:center;gap:clamp(1.1rem,2.8vw,2.4rem);padding-block:1.6rem}
/* Firmen-Siegel („Kompetent und zuverlässig") als Vertrauensanker */
.trust-seal{width:clamp(54px,5.2vw,68px);height:auto;flex:none}
.trust-items{flex:1;min-width:0;display:grid;grid-template-columns:repeat(4,1fr)}
.trust-item{display:flex;align-items:center;gap:.9rem;font-size:.92rem;color:var(--ink);letter-spacing:-.005em}
.trust-item + .trust-item{padding-left:clamp(1rem,3vw,2.5rem);border-left:1px solid var(--line)}
.trust-item svg{width:42px;height:42px;flex:none;padding:10px;border:1px solid var(--line);border-radius:50%;background:var(--paper);color:var(--brass-deep);stroke-width:1.5;box-shadow:inset 0 1px 0 rgba(255,255,255,.6);transition:transform .35s var(--ease),border-color .35s var(--ease)}
.trust-item:hover svg{transform:translateY(-2px);border-color:var(--brass)}
.trust-item b{font-weight:600}

/* ---------- Section-Utilities ---------- */
.section{padding-block:clamp(4rem,3rem + 5vw,8.5rem)}

/* ---------- Leistungen (interaktiver Index mit Live-Vorschau) ---------- */
.services__head{display:grid;grid-template-columns:1.1fr .9fr;gap:1.5rem 4rem;align-items:end;margin-bottom:clamp(2.5rem,4vw,4rem);padding-bottom:2.2rem;border-bottom:1px solid var(--line)}
.services__head h2{font-size:clamp(2rem,1.35rem + 2.6vw,3.15rem);font-weight:500;letter-spacing:-.03em;margin-top:1.3rem;max-width:15ch}
.services__head h2 .accent{color:var(--brass-deep)}
.services__lead{color:var(--muted);max-width:42ch;margin-bottom:1.4rem}
.services__cta{display:inline-flex;align-items:center;gap:.55rem;font-weight:500;color:var(--ink);position:relative}
.services__cta::after{content:"";position:absolute;left:0;right:1.6rem;bottom:-.35rem;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.services__cta:hover::after{transform:scaleX(1)}
.services__cta svg{width:1.05em;height:1.05em;color:var(--brass-deep);transition:transform .3s var(--ease)}
.services__cta:hover svg{transform:translateX(4px)}

.services__body{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2.5rem,5vw,5.5rem);align-items:start}
.svc-list{border-top:1px solid var(--line)}
.svc-row{display:grid;grid-template-columns:2.4rem minmax(0,1fr);column-gap:1.4rem;padding:1.7rem .2rem;border-bottom:1px solid var(--line);transition:padding-left .4s var(--ease)}
.svc-row__n{font-size:.78rem;color:var(--brass-deep);font-variant-numeric:tabular-nums;letter-spacing:.08em;padding-top:.5rem;transition:color .3s}
.svc-row__main{min-width:0}
.svc-row__name{display:flex;align-items:center;gap:.75rem;font-size:clamp(1.3rem,1.05rem + 1vw,1.75rem);font-weight:500;letter-spacing:-.02em;color:var(--ink)}
.svc-row__name svg{width:19px;height:19px;color:var(--brass-deep);opacity:0;transform:translateX(-8px);transition:opacity .3s var(--ease),transform .3s var(--ease);flex:none}
.svc-row__desc{color:var(--muted);font-size:.97rem;max-width:46ch;margin-top:.55rem}
.svc-row__tags{display:flex;flex-wrap:wrap;gap:.55rem 1.4rem;margin-top:.95rem}
.svc-row__tags i{font-style:normal;font-size:.69rem;font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:var(--muted-2);display:inline-flex;align-items:center;gap:.45rem}
.svc-row__tags i::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--brass);flex:none}
.svc-row:hover,.svc-row.is-active{padding-left:1rem}
.svc-row:hover .svc-row__name svg,.svc-row.is-active .svc-row__name svg{opacity:1;transform:translateX(0)}
.svc-row.is-active .svc-row__n{color:var(--ink)}

/* Live-Vorschaubild (nutzt .frame-Stil) — zwei überblendende Ebenen */
.services__preview{position:sticky;top:118px}
.services__preview .frame__wrap{position:relative;aspect-ratio:3/2}
.services__preview .frame__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transform-origin:center;transition:opacity .7s var(--ease),transform 1s var(--ease)}
.services__pimg--b{opacity:0}
.services__pcap{transition:opacity .3s}

/* ---------- Warum DK Montage (dunkle Vertrauens-Sektion) ---------- */
.why{background:radial-gradient(130% 95% at 12% 0%,#201C15 0%,var(--ink) 58%);color:#B4AA9A}
.why .label{color:#A69C8B}
.why .label__n{color:var(--brass-light)}
.why__top{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2.5rem,5vw,6rem);align-items:start}
.why__intro{position:sticky;top:118px}
.why__intro h2{font-size:clamp(2rem,1.35rem + 2.6vw,3.15rem);font-weight:500;letter-spacing:-.03em;color:var(--bone);margin-top:1.4rem;max-width:13ch}
.why__intro h2 .accent{color:var(--brass-light)}
.why__lead{color:#B8AEA0;max-width:44ch;margin-bottom:2.2rem;font-size:var(--t-lead)}
.why__reasons{border-top:1px solid rgba(255,255,255,.13)}
.why__reason{display:grid;grid-template-columns:2.4rem 1fr;column-gap:1.4rem;padding:1.7rem .2rem;border-bottom:1px solid rgba(255,255,255,.13)}
.why__reason__n{font-size:.78rem;color:var(--brass-light);letter-spacing:.08em;padding-top:.4rem;font-variant-numeric:tabular-nums}
.why__reason h3{font-size:clamp(1.15rem,1rem + .5vw,1.4rem);font-weight:500;color:var(--bone);letter-spacing:-.02em;margin-bottom:.5rem}
.why__reason p{color:#A69C8B;font-size:.97rem;max-width:52ch}
/* ---- Kennzahlen ----
   Eigener Abschnitt statt Anhängsel: eigene Beschriftung, deutlich größere
   Ziffernstufe, Messing-Spaltenlinien als Struktur und ein weicher Schimmer für
   Kontrast. Bewusst keine Kacheln und keine Rahmen: die Designsprache der Seite
   arbeitet mit Skala, Haarlinien und Weißraum, nicht mit Kästen. */
.wzone{position:relative;margin-top:clamp(3.4rem,6vw,6rem);padding-top:clamp(2.6rem,4.5vw,4.2rem);border-top:1px solid rgba(255,255,255,.14)}
.wzone__label{display:inline-flex;align-items:center;gap:.9rem;margin:0 0 clamp(2rem,3.4vw,3.2rem);font-size:.72rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--brass-light)}
.wzone__label::before{content:"";width:2.8rem;height:1px;background:var(--brass)}

.wstats{position:relative;display:grid;grid-template-columns:repeat(3,1fr)}
/* Hebt die Ziffern vom dunklen Grund ab, ohne einen Kasten zu zeichnen */
/* Seitlich bewusst bei 0: jedes Prozent nach außen erzeugt waagerechten
   Überstand auf der ganzen Seite. Der Verlauf läuft ohnehin vorher aus. */
.wstats::before{content:"";position:absolute;inset:-45% 0 -60%;background:radial-gradient(62% 60% at 50% 42%,rgba(198,151,92,.12),transparent 74%);pointer-events:none}
.wstat{position:relative;z-index:1;padding-inline:clamp(1.1rem,2.8vw,3.2rem)}
.wstat:first-child{padding-left:0}
.wstat:last-child{padding-right:0}
/* Spaltenlinien mit weich auslaufenden Enden, fahren beim Einblenden aus der Mitte aus */
.wstat + .wstat::before{content:"";position:absolute;left:0;top:.15rem;bottom:.15rem;width:1px;background:linear-gradient(180deg,transparent,rgba(198,151,92,.5) 18%,rgba(198,151,92,.5) 82%,transparent);transform:scaleY(0);transition:transform 1s var(--ease) .3s}
[data-reveal].in .wstat + .wstat::before{transform:scaleY(1)}

.wstat__fig{display:flex;align-items:baseline;gap:.55rem;margin:0;line-height:.86}
.wstat__fig i{font-style:normal;font-family:var(--font);font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--brass-light);align-self:flex-start;padding-top:.5em}
.wstat__fig b{font-family:var(--font-head);font-size:clamp(3rem,1.5rem + 5vw,5.8rem);font-weight:500;letter-spacing:-.042em;color:var(--bone);font-variant-numeric:lining-nums tabular-nums}
.wstat__cap{margin:clamp(.9rem,1.4vw,1.3rem) 0 0;font-size:clamp(.9rem,.85rem + .2vw,1.02rem);color:#B4AA9A}

/* Nachweise: vorher das kleinste Element im Abschnitt, obwohl sie den härtesten
   Beleg tragen. Jetzt eigene Zeile, größer, heller und als echte Liste. */
.wcreds{display:flex;flex-wrap:wrap;gap:.9rem clamp(1.6rem,3vw,3rem);margin:clamp(2.6rem,4vw,3.6rem) 0 0;padding:clamp(1.5rem,2.4vw,2rem) 0 0;border-top:1px solid rgba(255,255,255,.09);list-style:none}
.wcreds li{display:inline-flex;align-items:center;gap:.7rem;font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#A69C8B}
.wcreds li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brass-light);flex:none;box-shadow:0 0 0 3px rgba(198,151,92,.15)}
.wzone__cta{margin-top:clamp(2.4rem,3.6vw,3.2rem)}
.btn--light{background:linear-gradient(180deg,#FCFAF5,#EFEADF);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.7)}
.btn--light:hover{transform:translateY(-2px);box-shadow:0 20px 38px -18px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.85)}
.btn--light:active{transform:translateY(0);box-shadow:0 2px 6px -2px rgba(0,0,0,.4)}
.btn--light svg{color:var(--brass-deep)}

/* ---------- Section-Head (generisch) ---------- */
.section-head{max-width:660px;margin-bottom:clamp(1rem,2vw,1.5rem)}
.section-head h2{font-size:clamp(2rem,1.35rem + 2.6vw,3.15rem);font-weight:500;letter-spacing:-.03em;margin-top:1.35rem;max-width:16ch}
.section-head h2 .accent{color:var(--brass-deep)}
.section-lead{color:var(--muted);max-width:46ch;margin-top:1.1rem;font-size:var(--t-lead)}

/* ---------- Ablauf (4-Schritt-Sequenz) ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,1.5vw,1.4rem);margin-top:clamp(2.5rem,4vw,4.5rem);position:relative}
/* Timeline-Verbindungslinie hinter den Badges (nur Desktop) */
.steps::before{content:"";position:absolute;top:calc(1.7rem + 25px);left:6%;right:6%;height:1.5px;background:linear-gradient(90deg,var(--brass),var(--line) 88%);z-index:0}
.step{position:relative;z-index:1;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:1.7rem 1.5rem 1.8rem;transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease)}
.step:hover{transform:translateY(-6px);box-shadow:0 32px 54px -32px rgba(23,20,15,.4);border-color:var(--line-soft)}
.step__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.15rem}
.step__badge{width:50px;height:50px;border-radius:50%;border:1.5px solid var(--brass);display:flex;align-items:center;justify-content:center;color:var(--brass-deep);background:linear-gradient(180deg,#FCFAF5,#EFEADF);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 8px 16px -9px rgba(154,123,79,.55);transition:transform .45s var(--ease)}
.step:hover .step__badge{transform:scale(1.07) rotate(-3deg)}
.step__badge svg{width:23px;height:23px}
.step__n{font-size:.82rem;font-weight:600;color:var(--brass-deep);letter-spacing:.14em;font-variant-numeric:tabular-nums}
.step h3{font-size:clamp(1.15rem,1rem + .5vw,1.35rem);font-weight:600;letter-spacing:-.02em;margin:0 0 .55rem}
.step p{color:var(--muted);font-size:.95rem;max-width:34ch}
@media (max-width:940px){.steps::before{display:none}}
/* Dezente warme Akzentfläche unter dem Ablauf — lässt die Karten hochwertig wirken */
#ablauf{background:var(--bone-deep)}
.step{box-shadow:0 1px 2px rgba(23,20,15,.05),0 12px 24px -20px rgba(23,20,15,.25)}

/* ---------- Referenzen (Masonry-Galerie + Lightbox) ---------- */
.gallery{columns:3;column-gap:clamp(.9rem,1.4vw,1.3rem);margin-top:clamp(2.5rem,4vw,4rem)}
.g-item{position:relative;display:block;break-inside:avoid;margin-bottom:clamp(.9rem,1.4vw,1.3rem);overflow:hidden;border-radius:12px;background:var(--bone-deep);cursor:pointer;border:1px solid var(--line);box-shadow:0 1px 2px rgba(23,20,15,.05);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.g-item:hover{transform:translateY(-4px);box-shadow:0 30px 52px -32px rgba(23,20,15,.5)}
.g-item img{width:100%;display:block;transition:transform 1.3s var(--ease)}
.g-item:hover img{transform:scale(1.06)}
/* Dauerhafter Scrim + Caption (auch auf Mobile lesbar) */
.g-item::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(23,20,15,.62),rgba(23,20,15,0) 44%);opacity:.92;transition:opacity .45s var(--ease)}
.g-item:hover::after{opacity:1}
/* Zoom-Hinweis oben rechts beim Hover */
.g-item::before{content:"";position:absolute;top:.9rem;right:.9rem;z-index:3;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.5);background:rgba(23,20,15,.35) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 8h10M8 3v10'/%3E%3C/svg%3E") center/14px no-repeat;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;transform:scale(.8);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.g-item:hover::before{opacity:1;transform:none}
.g-item__cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:1.1rem 1.2rem;display:flex;align-items:center;gap:.5rem;font-size:.75rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:#fff;opacity:1;transform:translateY(0);transition:transform .5s var(--ease)}
.g-item:hover .g-item__cap{transform:translateY(-2px)}
.g-item__cap .n{color:var(--brass-light);font-variant-numeric:tabular-nums}
/* Handy: Bildunterschrift UNTER das Foto statt darüber — Bild bleibt frei sichtbar */
@media (max-width:760px){
  .g-item{background:none;border:0;box-shadow:none;overflow:visible;border-radius:0}
  .g-item:hover{transform:none;box-shadow:none}
  .g-item img{border-radius:12px}
  .g-item::after,.g-item::before{display:none}
  .g-item__cap{position:static;padding:.6rem .1rem 0;color:var(--muted);font-size:.72rem;letter-spacing:.09em}
  .g-item__cap .n{color:var(--brass-deep)}
}

/* Lightbox */
.lightbox{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:clamp(1rem,4vw,3rem);background:rgba(20,17,12,.95);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.lightbox.open{display:flex;animation:lbFade .3s var(--ease)}
@keyframes lbFade{from{opacity:0}to{opacity:1}}
.lightbox__img{max-width:min(1120px,92vw);max-height:85vh;object-fit:contain;border-radius:3px;box-shadow:0 40px 90px -30px rgba(0,0,0,.7)}
.lightbox.open .lightbox__img{animation:lbZoom .5s var(--ease)}
@keyframes lbZoom{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:none}}
.lightbox__close,.lightbox__nav{position:absolute;color:#fff;border:1px solid rgba(255,255,255,.22);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .25s,border-color .25s;line-height:1}
.lightbox__close{top:clamp(1rem,2vw,1.7rem);right:clamp(1rem,2vw,1.7rem);width:46px;height:46px;font-size:1.5rem}
.lightbox__nav{top:50%;transform:translateY(-50%);width:52px;height:52px;font-size:1.9rem}
.lightbox__close:hover,.lightbox__nav:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.5)}
.lightbox__prev{left:clamp(.8rem,2vw,2rem)}
.lightbox__next{right:clamp(.8rem,2vw,2rem)}
.lightbox__cap{position:absolute;bottom:clamp(1rem,3vw,1.8rem);left:0;right:0;text-align:center;color:#B4AA9A;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase}

/* ---------- Bewertungen (echte, überprüfbare Zahlen) ---------- */
.reviews-split{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(2.5rem,5vw,5.5rem);align-items:center;margin-top:clamp(2.5rem,4vw,4rem)}
.rating-hero__num{font-size:clamp(4.5rem,3rem + 6vw,7.5rem);font-weight:600;letter-spacing:-.04em;line-height:.9;color:var(--ink)}
.rating-hero__stars{color:var(--brass);font-size:1.5rem;letter-spacing:5px;margin:1.1rem 0 1rem}
.rating-hero p{color:var(--muted);font-size:var(--t-lead)}
.rating-hero p b{color:var(--ink);font-weight:600}
.rating-hero small{display:block;margin-top:.6rem;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--brass-deep)}
.platforms{border-top:1px solid var(--line)}
.platform{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.55rem .2rem;border-bottom:1px solid var(--line);transition:padding-left .35s var(--ease)}
.platform:hover{padding-left:.8rem}
.platform__left{display:flex;flex-direction:column;gap:.4rem}
.platform__name{font-size:clamp(1.15rem,1rem + .5vw,1.4rem);font-weight:500;letter-spacing:-.02em;color:var(--ink)}
.platform__stars{color:var(--brass);letter-spacing:2px;font-size:.82rem}
.platform__right{display:flex;align-items:center;gap:.7rem;color:var(--muted);font-size:.92rem;white-space:nowrap}
.platform__right b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.platform__right svg{width:16px;height:16px;color:var(--brass-deep);transition:transform .3s var(--ease);flex:none}
.platform:hover .platform__right svg{transform:translateX(4px)}
.reviews-note{margin-top:clamp(2rem,3vw,2.8rem);font-size:.88rem;color:var(--muted)}
.reviews-note a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* Kundenstimmen (echte Rezensionen) — Slider mit nativem Scroll.
   Alle Karten stehen im HTML, nichts wird per JS nachgeladen oder geklont. */
.tslider{--tgap:clamp(1rem,1.6vw,1.5rem);--tarrow:2.9rem;--tdur:.72s;--tease:cubic-bezier(.32,.72,0,1);margin-top:clamp(3rem,5vw,4.5rem);padding-top:clamp(2.5rem,4vw,3.5rem);border-top:1px solid var(--line)}
.tslider__head{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;margin-bottom:clamp(1.5rem,2.2vw,2.1rem);min-height:2.5rem}
.tslider__eyebrow{margin:0;font-size:var(--t-label);font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.tslider__dots[hidden]{display:none}
/* Pfeile mittig neben den Karten. Sie liegen zur Hälfte außerhalb des Scrollfelds,
   die andere Hälfte fällt in den Innenabstand der Karte, damit kein Text verdeckt
   wird (genau dieser Fehler ist auf der Vorlage von KüMo zu sehen). */
.tslider__stage{position:relative}
.tslider__arrow{position:absolute;top:50%;z-index:2;display:none;transform:translateY(-50%);box-shadow:0 16px 34px -16px rgba(23,20,15,.4)}
.tslider.has-nav .tslider__arrow{display:inline-flex}
.tslider__arrow--prev{left:calc(var(--tarrow) / -2)}
.tslider__arrow--next{right:calc(var(--tarrow) / -2)}
.tslider__arrow:hover:not(:disabled){transform:translateY(-50%) scale(1.07)}
.tslider__arrow:active:not(:disabled){transform:translateY(-50%) scale(.97)}
.tslider__btn{display:inline-flex;align-items:center;justify-content:center;width:var(--tarrow);height:var(--tarrow);flex:none;border:1px solid var(--line);border-radius:50%;background:var(--paper);color:var(--ink);transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease),transform .3s var(--ease),opacity .3s var(--ease)}
.tslider__btn svg{width:1.15rem;height:1.15rem}
.tslider__btn[hidden]{display:none}
/* Pause/Weiter: etwas kleiner und ruhiger als die Richtungspfeile */
.tslider__btn--play{width:2.5rem;height:2.5rem;border-color:var(--line-soft);color:var(--muted)}
.tslider__btn--play svg{width:.95rem;height:.95rem}
.tslider__btn--play:hover:not(:disabled){background:var(--brass);border-color:var(--brass);color:var(--bone)}
.tslider__ico--play{display:none}
.tslider__btn--play.is-paused .tslider__ico--pause{display:none}
.tslider__btn--play.is-paused .tslider__ico--play{display:block}
.tslider__btn:hover:not(:disabled){background:var(--ink);border-color:var(--ink);color:var(--bone);transform:translateY(-2px)}
.tslider__btn:disabled{opacity:.3;cursor:default}
/* Kein Scroll-Container: die Bewegung läuft über transform, damit Easing und der
   nahtlose Umbruch am Ende steuerbar sind. touch-action lässt senkrechtes
   Scrollen der Seite zu und übernimmt nur die waagerechte Geste. */
.tslider__viewport{overflow:hidden;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.tslider__viewport:focus-visible{outline:2px solid var(--brass);outline-offset:5px;border-radius:16px}
/* KEIN will-change:transform. Der Track ist mit Klonen rund 6000 px breit, und
   jede Karte malt darin den Spotlight-Verlauf. Eine dauerhaft beförderte Ebene
   dieser Größe ist zu teuer: die Compositor-Animation bleibt dann stehen
   (nachgewiesen in Chrome) und sie kostet auf Telefonen unnötig Speicher.
   Chrome befördert bei Transform-Übergängen von selbst, nur für deren Dauer. */
.tslider__track{position:relative;display:flex;align-items:stretch;gap:var(--tgap);transition:transform var(--tdur) var(--tease)}
.tslider.is-dragging .tslider__track{transition:none}
.tslider__track>.tcard{flex:0 0 calc((100% - 2*var(--tgap))/3);margin:0;display:flex;flex-direction:column}
/* Klone tragen denselben Inhalt, sind aber für Screenreader unsichtbar */
.tslider__track>.tcard.is-clone{pointer-events:auto}
/* Durch den Zeilen-Anriss liegen die Karten ohnehin nah beieinander, deshalb
   reicht der natürliche Fluss. Kein Ausrichtungstrick mehr nötig. */
.tslider__dots{display:flex;justify-content:center;flex-wrap:wrap;gap:.6rem;margin-top:clamp(1.7rem,2.5vw,2.3rem)}
.tslider__dot{width:7px;height:7px;padding:0;border:0;border-radius:50%;background:var(--line);transition:background .3s var(--ease),transform .3s var(--ease)}
.tslider__dot:hover{background:var(--muted-2)}
.tslider__dot[aria-current="true"]{background:var(--brass);transform:scale(1.4)}
.tcard{position:relative;margin:0;padding:clamp(1.6rem,2vw,2.1rem);background:var(--paper);border:1px solid var(--line);border-radius:14px;transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease)}
.tcard::after{content:"\201C";position:absolute;top:.55rem;right:1.15rem;font-family:Georgia,'Times New Roman',serif;font-size:4.4rem;line-height:1;color:var(--brass);opacity:.16;pointer-events:none}
.tcard:hover{transform:translateY(-4px);border-color:var(--line-soft);box-shadow:0 28px 50px -30px rgba(23,20,15,.45)}
.tcard__stars{color:var(--brass);letter-spacing:2px;font-size:.9rem;margin-bottom:1rem}
.tcard blockquote{color:var(--ink);font-size:1rem;line-height:1.62;margin:0}
/* Kopfzeile: Initial-Kreis, Name, Quelle und Datum */
.tcard__head{display:flex;align-items:center;gap:.85rem;margin-bottom:1.15rem}
.tcard__avatar{display:inline-flex;align-items:center;justify-content:center;flex:none;width:2.6rem;height:2.6rem;border-radius:50%;font-family:var(--font-head);font-size:1.15rem;font-weight:500;line-height:1;color:var(--bone);background:var(--brass);-webkit-user-select:none;user-select:none}
.tcard:nth-child(3n+2) .tcard__avatar{background:var(--brass-deep)}
.tcard:nth-child(3n+3) .tcard__avatar{background:#5C5347}
.tcard__id{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.tcard__id b{color:var(--ink);font-weight:600;font-size:.98rem;letter-spacing:-.01em;overflow-wrap:anywhere}
.tcard__meta{font-size:.78rem;color:var(--muted)}
/* Lange Zitate werden angerissen. Der Text bleibt vollständig im HTML und im
   Barrierefreiheits-Baum (nur overflow:hidden, kein display:none), der Knopf
   erscheint per JS ausschließlich dort, wo wirklich etwas abgeschnitten ist. */
.tcard__q{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;line-clamp:6;overflow:hidden}
.tcard__q.is-open{display:block;-webkit-line-clamp:unset;line-clamp:unset}
.tcard__more{align-self:flex-start;margin-top:.95rem;padding:0;border:0;background:none;font-size:.8rem;font-weight:600;letter-spacing:.06em;color:var(--brass-deep);position:relative}
.tcard__more::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;opacity:.35;transition:opacity .3s var(--ease)}
.tcard__more:hover::after{opacity:1}
.tcard__more[hidden]{display:none}

/* ---------- FAQ (Accordion) ---------- */
.faq-split{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(2.5rem,5vw,5.5rem);align-items:start;margin-top:clamp(2rem,3vw,3rem)}
.faq-intro{position:sticky;top:118px}
.faq-intro h2{font-size:clamp(1.9rem,1.35rem + 2.4vw,2.9rem);font-weight:500;letter-spacing:-.03em;margin:1.3rem 0 1.2rem;max-width:13ch}
.faq-intro p{color:var(--muted);max-width:34ch;margin-bottom:1.5rem}
.faq-intro a{display:inline-flex;align-items:center;gap:.55rem;font-weight:500;color:var(--ink);position:relative}
.faq-intro a::after{content:"";position:absolute;left:0;right:1.5rem;bottom:-.3rem;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.faq-intro a:hover::after{transform:scaleX(1)}
.faq-intro a svg{width:1.05em;height:1.05em;color:var(--brass-deep);transition:transform .3s var(--ease)}
.faq-intro a:hover svg{transform:translateX(4px)}

.faq{border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__q{list-style:none;width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;padding:1.55rem .2rem;font-size:clamp(1.1rem,1rem + .55vw,1.35rem);font-weight:500;letter-spacing:-.02em;color:var(--ink);cursor:pointer;transition:color .25s}
.faq__q::-webkit-details-marker{display:none}
.faq__q:hover{color:var(--brass-deep)}
.faq__icon{position:relative;width:20px;height:20px;flex:none;margin-top:.3rem}
.faq__icon::before,.faq__icon::after{content:"";position:absolute;top:50%;left:50%;width:13px;height:1.5px;background:currentColor;transform:translate(-50%,-50%);transition:transform .35s var(--ease)}
.faq__icon::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq__item[open] .faq__icon::after{transform:translate(-50%,-50%) rotate(0)}
.faq__a{padding:0 .2rem 1.6rem;color:var(--muted);font-size:1rem;max-width:60ch}
.faq__item[open] .faq__a{animation:faqIn .45s var(--ease)}
@keyframes faqIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}

/* ---------- Kontakt (dunkler Abschluss) ---------- */
.contact{background:radial-gradient(120% 95% at 88% 0%,#201C15 0%,var(--ink) 58%);color:#B4AA9A}
.contact__grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(2.5rem,5vw,5rem);align-items:start}
.contact .label{color:#A69C8B}
.contact .label__n{color:var(--brass-light)}
.contact h2{font-size:clamp(2rem,1.35rem + 2.6vw,3.15rem);font-weight:500;letter-spacing:-.03em;color:var(--bone);margin:1.35rem 0 1.2rem;max-width:12ch}
.contact__lead{color:#B8AEA0;max-width:38ch;margin-bottom:2.4rem;font-size:var(--t-lead)}
.contact__methods{display:grid;gap:.75rem}
.cmethod{display:flex;align-items:center;gap:1.1rem;padding:1.05rem 1.2rem;border:1px solid rgba(255,255,255,.12);border-radius:4px;transition:border-color .3s var(--ease),transform .3s var(--ease)}
.cmethod:hover{border-color:rgba(255,255,255,.3);transform:translateY(-2px)}
.cmethod .ic{width:44px;height:44px;border-radius:11px;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;color:var(--brass-light);flex:none}
.cmethod .ic svg{width:20px;height:20px}
.cmethod small{display:block;color:#A69C8B;font-size:.75rem;letter-spacing:.07em;text-transform:uppercase}
.cmethod b{font-size:1.05rem;color:var(--bone);font-weight:600}

.form{background:var(--paper);border-radius:8px;padding:clamp(1.5rem,3vw,2.5rem);color:var(--ink);box-shadow:0 45px 90px -45px rgba(0,0,0,.55)}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.field{margin-bottom:1rem}
.field label{display:block;font-size:.82rem;font-weight:600;margin-bottom:.4rem;color:var(--ink)}
.field label .req{color:var(--brass-deep)}
.field input,.field select,.field textarea{width:100%;padding:.85rem .95rem;border:1px solid #D6CEBD;border-radius:8px;background:#fff;font-size:1rem;font-family:inherit;color:var(--ink);transition:border-color .2s,box-shadow .2s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brass);box-shadow:0 0 0 3px rgba(154,123,79,.16)}
.field textarea{resize:vertical;min-height:112px}
.form__consent{display:flex;gap:.6rem;font-size:.82rem;color:var(--muted);margin:.3rem 0 1.2rem;line-height:1.5}
.form__consent input{margin-top:.15rem;width:18px;height:18px;flex:none;accent-color:var(--brass)}
.form__consent a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.form .btn{width:100%;justify-content:center}
.form .btn[disabled]{opacity:.7;cursor:wait}
.form__note{font-size:.8rem;color:var(--muted);margin-top:.9rem;text-align:center}
.form__hp{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;padding:0}

.form__result{display:flex;gap:.7rem;align-items:flex-start;margin-top:1rem;padding:.9rem 1rem;border-radius:8px;font-size:.88rem;line-height:1.5}
.form__result[hidden]{display:none}

/* =============================================================
   LEISTUNGSSEITEN — Editorial-Bildband unter dem Seitenkopf.
   Nutzt bewusst den bestehenden .frame-Look (versetzter Rahmen +
   Messing-Registermarken), nur im Querformat statt 4/5.
   ============================================================= */
.svc-figure{margin:clamp(3.2rem,5.5vw,5rem) 0 clamp(.6rem,1vw,1rem);
  display:grid;grid-template-columns:minmax(0,580px) 1fr;gap:clamp(2rem,3.5vw,3.5rem);align-items:end}
.frame--wide .frame__img{aspect-ratio:16/10;object-position:center 45%}
/* Bildunterschrift steht neben dem Bild (Magazin-Satz), nicht darunter */
.svc-figure .frame__cap{margin-top:0;padding-bottom:.35rem;font-size:.7rem;max-width:30ch}
@media (max-width:940px){
  .svc-figure{grid-template-columns:1fr;gap:0;max-width:600px}
  .svc-figure .frame__cap{margin-top:clamp(1.2rem,2vw,1.6rem);padding-bottom:0;max-width:none}
}
@media (max-width:560px){
  .frame--wide .frame__img{aspect-ratio:3/2}
  .svc-figure{margin-top:2.4rem}
}
.form__result svg{width:1.3rem;height:1.3rem;flex:none;margin-top:.1rem}
.form__result b{display:block;margin-bottom:.15rem;color:var(--ink)}
.form__result span{color:var(--muted)}
.form__result--ok{background:rgba(154,123,79,.1);border:1px solid rgba(154,123,79,.28)}
.form__result--ok svg{color:var(--brass-deep)}
.form__result--err{background:rgba(162,59,46,.08);border:1px solid rgba(162,59,46,.25)}
.form__result--err svg{color:#A23B2E}
.form__result--err a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.form.is-sent .field,.form.is-sent .form__consent,.form.is-sent .btn,.form.is-sent .form__note{display:none}

/* ---------- Footer ---------- */
.footer{background:var(--ink);color:#9A9080;padding-block:clamp(3rem,5vw,4rem) 1.8rem;border-top:1px solid rgba(255,255,255,.1)}
.footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:2.5rem;padding-bottom:2.5rem;border-bottom:1px solid rgba(255,255,255,.1)}
.footer__brand .brand{color:var(--bone);margin-bottom:1.1rem}
.footer__brand .brand__mono{color:var(--bone)}
.footer__brand .brand__word{color:#9A9080}
.footer__brand .brand__rule{background:rgba(255,255,255,.2)}
.footer__brand p{font-size:.92rem;max-width:34ch;color:#9A9080}
.footer__seal{width:76px;height:auto;margin-top:1.5rem}
.footer h3{color:var(--bone);font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;margin-bottom:1.1rem;font-weight:600;line-height:1.3}
.footer ul{display:grid;gap:.6rem}
.footer a{color:#9A9080;font-size:.92rem;transition:color .25s}
.footer a:hover{color:var(--bone)}
.footer address{font-style:normal;line-height:1.85;font-size:.92rem;color:#9A9080}
.footer__bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.8rem;padding-top:1.6rem;font-size:.8rem;color:#8C8373}
.footer__bottom a{font-size:.8rem;color:#8C8373}
.footer__bottom a:hover{color:var(--bone)}

/* ---------- Unterseiten (Impressum, Datenschutz) ---------- */
.site-header--solid{background:rgba(242,238,230,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.site-header--solid::after{transform:scaleX(1)}
.subhero{padding-block:clamp(1.5rem,2vw,2.5rem) clamp(2.5rem,4vw,4rem);border-bottom:1px solid var(--line)}
.crumbs{font-size:.85rem;color:var(--muted);margin-bottom:clamp(1.5rem,3vw,2.5rem)}
.crumbs a{transition:color .2s}
.crumbs a:hover{color:var(--ink)}
.crumbs span{color:var(--muted-2);margin-inline:.55rem}
.subhero h1{font-size:clamp(2.2rem,1.5rem + 2.6vw,3.4rem);font-weight:500;letter-spacing:-.03em;margin-bottom:1rem;max-width:18ch}
.subhero .lead{font-size:var(--t-lead);color:var(--muted);max-width:56ch}
.prose{max-width:760px;padding-block:clamp(2.5rem,4vw,4rem)}
.prose h2{font-size:clamp(1.4rem,1.1rem + 1vw,1.9rem);font-weight:500;letter-spacing:-.02em;margin:2.6rem 0 1rem;color:var(--ink)}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.2rem;font-weight:500;margin:1.8rem 0 .6rem;color:var(--ink)}
.prose p{margin-bottom:1.1rem;color:var(--muted);font-size:1.05rem;line-height:1.72}
.prose a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.prose strong{color:var(--ink);font-weight:600}
.prose em{color:var(--muted-2);font-style:italic}
.prose ul{display:grid;gap:.6rem;margin:0 0 1.4rem}
.prose li{position:relative;padding-left:1.6rem;color:var(--muted)}
.prose li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;background:var(--brass);border-radius:50%}
.footer--simple .footer__bottom{border:0;padding-top:0;justify-content:center;gap:1.2rem}

/* ---------- Reveal ---------- */
[data-reveal]{opacity:0;transform:translateY(16px);filter:blur(5px);transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease)}
[data-reveal].in{opacity:1;transform:none;filter:none}
[data-reveal][data-d="1"]{transition-delay:.1s}
[data-reveal][data-d="2"]{transition-delay:.2s}
[data-reveal][data-d="3"]{transition-delay:.3s}
[data-reveal][data-d="4"]{transition-delay:.4s}

/* ---------- Responsive ---------- */
@media (max-width:1160px){
  .wstats{gap:clamp(1.2rem,2.4vw,2.2rem)}
}
@media (max-width:760px){
  /* Untereinander. Die senkrechten Spaltenlinien werden zu waagerechten
     Trennern, die von links einfahren. Gleiche Gestaltungsidee, andere Achse. */
  .wstats{grid-template-columns:1fr}
  .wstat{padding-inline:0;padding-top:clamp(1.6rem,4vw,2.2rem)}
  .wstat:first-child{padding-top:0}
  .wstat + .wstat::before{left:0;right:auto;top:0;bottom:auto;width:3.4rem;height:1px;background:linear-gradient(90deg,rgba(198,151,92,.6),transparent);transform:scaleX(0);transform-origin:0 50%;transition:transform .8s var(--ease) .25s}
  [data-reveal].in .wstat + .wstat::before{transform:scaleX(1)}
  .wstat__fig b{font-size:clamp(2.9rem,1.6rem + 6vw,4rem)}
  .wcreds{gap:.8rem 1.4rem}
  .wcreds li{font-size:.72rem;letter-spacing:.1em}
}
@media (max-width:940px){
  .nav__links,.nav__phone{display:none}
  .nav__toggle{display:flex}
  .nav,.site-header.is-scrolled .nav{height:74px}
  .nav.open .nav__links{display:flex;flex-direction:column;align-items:stretch;gap:.1rem;position:absolute;top:74px;left:0;right:0;background:var(--bone);padding:1rem var(--gutter) 1.6rem;border-bottom:1px solid var(--line);box-shadow:0 24px 40px -28px rgba(23,20,15,.35)}
  .nav.open .nav__links a{padding:.9rem .4rem;font-size:1.05rem}
  .nav__actions .btn--primary{display:none}
  .nav.open .nav__mcta{display:block;margin-top:1rem}
  .nav.open .nav__mcta a{padding:1rem 1.5rem;font-size:.98rem;width:100%;justify-content:center;color:var(--bone)}
  .hero__grid{grid-template-columns:1fr;gap:3rem}
  .hero__media{max-width:500px}
  .frame__img{aspect-ratio:5/4;object-position:center 45%}
  .frame__box::before{inset:-12px}
  .frame__tick--tr{top:-12px;right:-12px}.frame__tick--bl{bottom:-12px;left:-12px}
  .services__head{grid-template-columns:1fr;gap:1.4rem;align-items:start}
  .services__body{grid-template-columns:1fr}
  .services__preview{display:none}
  .why__top{grid-template-columns:1fr;gap:2.25rem}
  .why__intro{position:static}
  .steps{grid-template-columns:1fr 1fr}
  .step{padding-right:1.4rem;padding-bottom:1.7rem}
  .reviews-split{grid-template-columns:1fr;gap:2.75rem}
  .reviews-split>*{min-width:0}
  .tslider__track>.tcard{flex-basis:calc((100% - var(--tgap))/2)}
  .faq-split{grid-template-columns:1fr;gap:2.25rem}
  .faq-intro{position:static}
  .contact__grid{grid-template-columns:1fr;gap:2.5rem}
  .footer__grid{grid-template-columns:1fr 1fr;gap:2.4rem 2.5rem}
  .footer__brand{grid-column:1 / -1}
}
@media (max-width:760px){
  .hero__cta .btn--primary{width:100%}
  /* Siegel auf dem Handy über die Trust-Punkte stellen, damit der Text atmen kann */
  .hero__trust .container{flex-direction:column;align-items:flex-start;gap:1.3rem}
  .trust-seal{width:62px}
  .trust-items{width:100%;grid-template-columns:1fr 1fr;gap:1.1rem 0}
  .trust-item{font-size:.86rem}
  .trust-item + .trust-item{padding-left:0;border-left:0}
  .trust-item:nth-child(even){padding-left:clamp(1rem,4vw,2rem);border-left:1px solid var(--line)}
  .trust-item:nth-child(3),.trust-item:nth-child(4){padding-top:1.1rem;border-top:1px solid var(--line)}
  .steps{grid-template-columns:1fr}
  .gallery{columns:2}
  .form__row{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr;gap:2rem}
  .tslider__track>.tcard{flex-basis:100%}
  /* Nur eine Karte sichtbar: gleiche Höhen brächten nichts und würden bei den
     kurzen Zitaten Leerraum erzeugen. Also natürliche Höhe, und etwas mehr
     Text vor dem Anriss, weil vertikal ohnehin Platz ist. */
  .tslider__track{align-items:flex-start}
  .tcard__q{-webkit-line-clamp:9;line-clamp:9}
}
/* Unter 580px wird der Außenabstand des Containers schmaler als die halbe
   Pfeilbreite. Kleinere Pfeile, sonst ragen sie aus dem Bildschirm. */
@media (max-width:580px){
  .tslider{--tarrow:2.3rem}
  .tslider__btn--play{width:2.1rem;height:2.1rem}
}
@media (prefers-reduced-motion:reduce){.tslider{--tdur:.001s}}
@media (max-width:420px){
  .hero__cta{flex-direction:column;align-items:stretch}
  .hero__cta .btn{width:100%}
  .gallery{columns:1}
}
@media (max-width:400px){
  .platform{flex-wrap:wrap;row-gap:.35rem}
  .platform__right{white-space:normal;width:100%}
}

/* =============================================================
   PREMIUM LAYER v5 — Tiefe · Material · Licht · Bewegung
   Additiv, markentreu (Bone/Ink/Messing, Schibsted Grotesk).
   ============================================================= */

/* Film-Grain: feine Textur über der ganzen Seite (Overlay-Blend) */
.grain{position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:140px 140px}
@media (prefers-reduced-motion:reduce){.grain{display:none}}

/* Status-Pill mit pulsierendem Messing-Punkt */
.hero__status{display:inline-flex;align-items:center;gap:.6rem;margin-bottom:1.5rem;padding:.5rem .95rem .5rem .8rem;
  background:linear-gradient(180deg,#FCFAF5,#F1EBDF);border:1px solid var(--line);border-radius:100px;
  font-size:.78rem;font-weight:500;letter-spacing:.005em;color:var(--ink-soft);
  box-shadow:0 1px 2px rgba(23,20,15,.05),inset 0 1px 0 rgba(255,255,255,.75)}
.hero__status__dot{width:8px;height:8px;border-radius:50%;background:var(--brass);position:relative;flex:none}
.hero__status__dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--brass);animation:pulse 2.6s var(--ease) infinite}
@keyframes pulse{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(2.8);opacity:0}}

/* Warmer Lichtschein hinter dem Hero-Bild */
.hero__media{position:relative;isolation:isolate}
.hero__glow{position:absolute;z-index:-1;inset:-8% -6% -12% -4%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(198,151,92,.32),rgba(198,151,92,.10) 55%,transparent 76%);
  filter:blur(34px);opacity:0;transform:scale(.9);transition:opacity 1.5s var(--ease),transform 1.7s var(--ease)}
.hero__media.in .hero__glow{opacity:1;transform:none}

/* Bild-Enthüllung: Clip-Path-Wisch nach oben */
.hero__media .frame__img{clip-path:inset(100% 0 0 0);transition:transform 1.3s var(--ease),clip-path 1.2s var(--ease)}
.hero__media.in .frame__img{clip-path:inset(0 0 0 0)}

/* Schwebende Bewertungs-Karte über der Bildecke */
.hero__badge{position:absolute;left:-16px;bottom:38px;z-index:3;display:flex;align-items:center;gap:.75rem;
  padding:.72rem 1rem;background:rgba(252,250,245,.85);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.6);border-radius:13px;
  box-shadow:0 24px 46px -22px rgba(23,20,15,.52),inset 0 1px 0 rgba(255,255,255,.7);
  opacity:0;transform:translateY(16px) scale(.95);transition:opacity .8s .65s var(--ease),transform .8s .65s var(--ease)}
.hero__media.in .hero__badge{opacity:1;transform:none}
.hero__badge__stars{color:var(--brass);font-size:.82rem;letter-spacing:1px}
.hero__badge__txt{display:flex;flex-direction:column;line-height:1.12}
.hero__badge__txt b{font-size:1.18rem;font-weight:600;color:var(--ink);letter-spacing:-.02em}
.hero__badge__txt small{font-size:.68rem;color:var(--muted);letter-spacing:.01em}

/* Cursor-Spotlight: warmer Glow folgt der Maus über Karten/Zeilen */
.spot{position:relative;isolation:isolate}
.spot::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;opacity:0;
  transition:opacity .45s var(--ease);pointer-events:none;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),var(--spot,rgba(154,123,79,.13)),transparent 68%)}
.spot:hover::before{opacity:1}
.why__reason.spot{--spot:rgba(198,151,92,.15)}
.cmethod.spot{--spot:rgba(198,151,92,.18)}
.tcard.spot{--spot:rgba(154,123,79,.10)}

/* Dünne Messing-Registermarke als Auftakt der dunklen Sektionen */
.why,.contact{position:relative}
.why::before,.contact::before{content:"";position:absolute;top:0;left:var(--gutter);width:36px;height:2px;
  background:linear-gradient(90deg,var(--brass-light),transparent);z-index:1}

/* reduced-motion-Sicherheit für die neuen Effekte */
@media (prefers-reduced-motion:reduce){
  .hero__media .frame__img{clip-path:none}
  .hero__glow,.hero__badge{opacity:1;transform:none;transition:none}
  .hero__status__dot::after{animation:none}
}

/* Responsive Feinschliff für die neuen Premium-Elemente */
@media (max-width:940px){
  .hero__badge{left:auto;right:14px;bottom:14px}
}
@media (max-width:420px){
  .hero__badge{padding:.55rem .72rem;gap:.5rem;border-radius:11px}
  .hero__badge__txt b{font-size:1.02rem}
}

/* =============================================================
   PREMIUM LAYER v6 — Bewegungs-System (60fps, alle Geräte)
   Scroll-Progress · Line-Reveal · Magnetic · Active-Nav ·
   Floating · Animated Border · Stagger
   ============================================================= */

/* Scroll-Fortschrittsbalken (Messing) ganz oben */
.scroll-prog{position:fixed;top:0;left:0;right:0;height:3px;z-index:300;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--brass-deep),var(--brass-light));box-shadow:0 0 12px rgba(198,151,92,.5);will-change:transform}

/* Zeilenweises Text-Reveal (Headlines steigen hinter einer Maske auf) */
.line{display:block;overflow:hidden;padding-bottom:.2em;margin-bottom:-.1em}
.line__inner{display:block;transform:translateY(130%);transition:transform 1s var(--ease);will-change:transform}
.lines-in .line__inner{transform:translateY(0)}
.line:nth-child(1) .line__inner{transition-delay:.02s}
.line:nth-child(2) .line__inner{transition-delay:.11s}
.line:nth-child(3) .line__inner{transition-delay:.20s}
.line:nth-child(4) .line__inner{transition-delay:.29s}
/* Wenn Headlines per Line-Reveal laufen, den generischen Fade/Blur auf ihnen abschalten */
h1[data-reveal].lines-ready,h2[data-reveal].lines-ready{opacity:1;transform:none;filter:none}

/* Active-Nav-Indikator (Scroll-Spy) */
.nav__links a.active{color:var(--ink)}
.nav__links a.active::after{transform:scaleX(1)}

/* Floating: schwebende Bewertungs-Karte wippt sanft nach dem Einblenden */
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.hero__media.in .hero__badge{animation:floaty 5.5s ease-in-out 1.6s infinite}

/* Animierter Messing-Rahmen um die Kontakt-Formularkarte */
@property --brdr{syntax:'<angle>';inherits:false;initial-value:0deg}
.form{position:relative}
.form::before{content:"";position:absolute;inset:-1px;border-radius:9px;padding:1.5px;pointer-events:none;z-index:1;
  background:conic-gradient(from var(--brdr),transparent 0 62%,rgba(198,151,92,.9) 80%,rgba(242,238,230,.6) 88%,transparent 96%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  animation:brdrspin 7s linear infinite}
@keyframes brdrspin{to{--brdr:360deg}}

/* Stagger-Feinschliff: Leistungs-Zeilen kaskadieren beim Einblenden */
.svc-list .svc-row[data-reveal]{transition-delay:0s}
.svc-list .svc-row:nth-child(2){transition-delay:.06s}
.svc-list .svc-row:nth-child(3){transition-delay:.12s}
.svc-list .svc-row:nth-child(4){transition-delay:.18s}
.svc-list .svc-row:nth-child(5){transition-delay:.24s}
.svc-list .svc-row:nth-child(6){transition-delay:.30s}

@media (prefers-reduced-motion:reduce){
  .scroll-prog{display:none}
  .line__inner{transform:none!important;transition:none}
  .hero__media.in .hero__badge{animation:none}
  .form::before{animation:none}
  .accent{animation:none!important}
}

/* Animierter Messing-Schimmer auf allen Akzent-Wörtern (mit sicherem Fallback) */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .accent{
    background:linear-gradient(100deg,#9A7B4F 0%,#D6AC72 42%,#9A7B4F 78%);
    background-size:220% 100%;-webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
    animation:accentShimmer 7.5s var(--ease) infinite}
  @keyframes accentShimmer{0%{background-position:130% 0}100%{background-position:-70% 0}}
}

/* =============================================================
   Leistungen: Bilder auch auf MOBILE sichtbar
   Desktop = Sticky-Crossfade-Vorschau · Mobile = Bild-Karten
   ============================================================= */
.svc-row__img{display:none}
@media (max-width:940px){
  .svc-list{border-top:0}
  .svc-row{grid-template-columns:1fr;column-gap:0;padding:0;border-bottom:0;margin-bottom:1.1rem;
    background:var(--paper);border:1px solid var(--line);border-radius:16px;overflow:hidden;position:relative;
    box-shadow:0 1px 2px rgba(23,20,15,.04)}
  .svc-row:hover,.svc-row.is-active{padding-left:0}
  /* Bild oben, Ken-Burns-Zoom beim Reinscrollen */
  .svc-row__img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--bone-deep);
    transform:scale(1.07);transition:transform 1.4s var(--ease)}
  .svc-row.in .svc-row__img{transform:scale(1)}
  /* Nummer als Badge auf dem Bild */
  .svc-row__n{position:absolute;top:.85rem;left:.85rem;z-index:2;padding:.32rem .62rem;border-radius:8px;
    background:rgba(23,20,15,.72);color:#fff;font-size:.72rem;font-weight:600;letter-spacing:.06em;
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
  .svc-row__main{padding:1.15rem 1.3rem 1.4rem;min-width:0}
  .svc-row__name{font-size:1.32rem}
  .svc-row__name svg{opacity:1;transform:none}
  .svc-row__desc{max-width:none;margin-top:.55rem}
  .svc-row__tags{margin-top:1rem}
}

/* Elegante Section-Übergänge: Haarlinie mit Messing-Registermarke (Raute) */
.sdiv{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.sdiv__line{position:relative;height:1px;background:linear-gradient(90deg,transparent,var(--line) 18%,var(--line) 82%,transparent)}
.sdiv__line::before{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;transform:translate(-50%,-50%) rotate(45deg);background:var(--bone);border:1.5px solid var(--brass)}

/* LCP-Optimierung: Hero-Bild (größtes Element) sofort rendern — der Reveal
   darf das LCP nicht verzögern. Container sofort sichtbar, Bild nicht geclippt;
   nur der dezente Scale-Settle + Glow/Badge laufen weiter über .in. */
.hero__media[data-reveal]{opacity:1;transform:none;filter:none;transition:none}
/* Hero-Überschrift ist das LCP-Element -> sofort sichtbar, kein Einblenden */
.hero h1[data-reveal]{opacity:1;transform:none;filter:none;transition:none}

/* ---- Mobile-Performance ----
   blur()-Filter, mix-blend-mode und backdrop-filter sind die teuersten
   Operationen für Style/Paint. Auf Handys (schwächere CPU/GPU) werden sie
   durch günstige Alternativen ersetzt; Desktop behält den vollen Look. */
@media (max-width:940px){
  [data-reveal]{filter:none}
  .grain{display:none}
  .site-header.is-scrolled{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(242,238,230,.97)}
  .hero__badge{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(252,250,245,.95)}
  .svc-row__n{-webkit-backdrop-filter:none;backdrop-filter:none}
  .hero__glow{filter:blur(22px)}
}
.hero__media .frame__img{clip-path:none}

/* Skip-Link (Barrierefreiheit): nur bei Tastatur-Fokus sichtbar */
.skip-link{position:fixed;top:.7rem;left:.7rem;z-index:1000;background:var(--ink);color:var(--bone);
  padding:.75rem 1.1rem;border-radius:6px;font-size:.9rem;font-weight:500;
  transform:translateY(-160%);transition:transform .25s var(--ease)}
.skip-link:focus{transform:none;outline:2px solid var(--brass);outline-offset:2px}

/* =============================================================
   LEISTUNGSSEITEN — CTA, FAQ, verwandte Leistungen
   Additiv, markentreu. Nutzt vorhandene .subhero/.prose/.faq.
   ============================================================= */
.subhero .label{margin-bottom:1rem}
.subhero h1 .accent{color:var(--brass-deep)}

/* CTA-Box */
.svc-cta{padding-block:clamp(2rem,3vw,3.5rem)}
.svc-cta__box{background:linear-gradient(180deg,#221D16,#17140F 70%);color:var(--bone);
  border-radius:6px;padding:clamp(2rem,4vw,3.4rem);display:grid;
  grid-template-columns:1.3fr .9fr;gap:clamp(1.6rem,3vw,3rem);align-items:center;
  box-shadow:0 30px 60px -34px rgba(23,20,15,.6),inset 0 1px 0 rgba(255,255,255,.08)}
.svc-cta__box h2{font-size:clamp(1.5rem,1.1rem + 1.7vw,2.2rem);font-weight:500;
  letter-spacing:-.03em;color:var(--bone);margin-bottom:.9rem}
.svc-cta__box p{color:#C9C0B2;font-size:1.02rem;line-height:1.7;max-width:42ch}
.svc-cta__actions{display:flex;flex-direction:column;gap:.9rem;align-items:stretch}
.svc-cta__actions .btn{width:100%}
.svc-cta__actions .btn--light svg{width:1.05em;height:1.05em}

/* FAQ auf Leistungsseiten */
.svc-faq{padding-top:clamp(1rem,2vw,2rem)}
.svc-faq__h{font-size:clamp(1.6rem,1.2rem + 1.7vw,2.4rem);font-weight:500;
  letter-spacing:-.03em;margin-bottom:1.5rem;max-width:16ch}

/* Verwandte Leistungen */
.related{padding-top:clamp(1rem,2vw,2rem)}
.related .label{margin-bottom:1.5rem}
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.rel-card{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.25rem 1.4rem;border:1px solid var(--line);border-radius:4px;
  background:var(--card,#FBF8F2);font-weight:500;color:var(--ink);
  transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease)}
.rel-card svg{width:1.1em;height:1.1em;flex:none;color:var(--brass-deep);transition:transform .3s var(--ease)}
.rel-card:hover{transform:translateY(-2px);border-color:var(--brass);
  box-shadow:0 18px 30px -20px rgba(23,20,15,.4)}
.rel-card:hover svg{transform:translateX(4px)}

@media (max-width:940px){
  .svc-cta__box{grid-template-columns:1fr;gap:1.6rem}
  .svc-cta__actions{flex-direction:row;flex-wrap:wrap}
  .svc-cta__actions .btn{width:auto;flex:1 1 auto}
  .rel-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .rel-grid{grid-template-columns:1fr}
  .svc-cta__actions{flex-direction:column}
}

/* =============================================================
   NAV-DROPDOWN „Leistungen" — jede Leistung direkt aus der Navigation
   ============================================================= */
.nav__has-sub{position:relative;padding-bottom:.7rem;margin-bottom:-.7rem}
.nav__caret{display:inline-block;margin-left:.3em;font-size:.62em;vertical-align:middle;color:var(--brass-deep);transition:transform .3s var(--ease)}
.nav__has-sub:hover .nav__caret,.nav__has-sub:focus-within .nav__caret{transform:rotate(180deg)}
.nav__sub{position:absolute;top:100%;left:0;min-width:252px;display:grid;gap:.1rem;
  padding:.55rem;margin-top:.35rem;background:var(--bone);border:1px solid var(--line);border-radius:6px;
  box-shadow:0 26px 46px -24px rgba(23,20,15,.42),inset 0 1px 0 rgba(255,255,255,.6);
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s;z-index:60}
.nav__has-sub:hover .nav__sub,.nav__has-sub:focus-within .nav__sub{opacity:1;visibility:visible;transform:translateY(0)}
.nav__sub a{padding:.62rem .8rem;border-radius:4px;font-size:.9rem;font-weight:500;color:var(--ink-soft);white-space:nowrap;transition:background .2s,color .2s}
.nav__sub a::after{display:none!important}
.nav__sub a:hover{background:var(--bone-deep,#EFEADF);color:var(--ink)}

@media (max-width:940px){
  /* Mobil: Untermenü als eingerückte, dauerhaft sichtbare Liste im offenen Menü */
  .nav__has-sub{flex-direction:column;align-items:stretch;padding-bottom:0;margin-bottom:0}
  .nav__caret{display:none}
  .nav__sub{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;
    background:transparent;border-radius:0;
    padding:.1rem 0 .4rem 0;margin:.1rem 0 .3rem 1rem;min-width:0;gap:0}
  .nav.open .nav__sub a{padding:.7rem .4rem;font-size:.98rem;color:var(--muted)}
  .nav.open .nav__sub a:hover{background:transparent;color:var(--ink)}
}

/* =============================================================
   MOBILE STICKY-AKTIONSLEISTE — Anrufen & WhatsApp immer erreichbar.
   Auf dem Handy sind Header-Telefon/CTA ausgeblendet; diese Leiste
   hält die primären Conversion-Aktionen dauerhaft einen Tap entfernt.
   ============================================================= */
.mcallbar{position:fixed;left:0;right:0;bottom:0;z-index:120;display:none;gap:.6rem;
  padding:.7rem .9rem calc(.7rem + env(safe-area-inset-bottom,0px));
  background:rgba(242,238,230,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);box-shadow:0 -12px 30px -18px rgba(23,20,15,.5);
  transform:translateY(115%);transition:transform .35s var(--ease)}
.mcallbar.is-visible{transform:translateY(0)}
.mcallbar a{flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  height:52px;border-radius:8px;font-size:1rem;font-weight:600;letter-spacing:.01em}
.mcallbar a svg{width:1.15rem;height:1.15rem;flex:none}
.mcallbar__call{background:var(--ink);color:var(--bone)}
.mcallbar__wa{background:var(--brass-deep);color:var(--bone)}
@media (max-width:940px){
  .mcallbar{display:flex}
  .footer{padding-bottom:calc(94px + env(safe-area-inset-bottom,0px))}
}