/* =========================================================================
   HEIMMALERIE – main.css
   Dark Luxury / Fine Art / Premium. Cormorant Garamond × DM Sans.
   Gold ausschließlich als Akzent. Ruhig, elegant, hochwertig.
   ========================================================================= */

/* ---- Tokens ---- */
:root{
  /* Flächen */
  --bg:#0F0F10; --surface:#181716; --surface-raised:#211F1C;
  --paper:#0F0F10;      /* Seiten-Hintergrund (Kompatibilitätsname) */
  --sand:#181716;       /* abgesetzte Sektion */
  --mat:#211F1C;        /* Rahmen/Fläche hinter Bildern */

  /* Text */
  --ink:#F5F0E8;        /* Headlines / helle Highlights */
  --body:#B9B1A5;       /* Fließtext */
  --muted:#8F887E;      /* dezent / Captions */

  /* Gold (nur Akzent) */
  --gold:#C79A4B; --gold-strong:#C79A4B; --gold-light:#DDB76B; --gold-dark:#9C6A28;
  --gold-ink:#DDB76B;   /* Gold-Text/Links auf Dunkel (guter Kontrast) */

  --line:#463A2A;       /* Rahmen/Trennlinien */
  --button-text:#111111;

  --font-display:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --type-scale:1;
  --radius:6px;         /* Buttons */
  --radius-lg:12px;     /* Rahmen/Cards */
  --section-y:clamp(88px,12vw,168px);
  --wrap:1280px;
  --gutter:clamp(20px,5vw,72px);

  --shadow-soft:0 24px 60px -34px rgba(0,0,0,.65);
  --shadow-strong:0 44px 90px -48px rgba(0,0,0,.75);
}

/* ---- Reset ---- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--body);font-family:var(--font-body);font-weight:400;
  font-size:calc(1.06rem*var(--type-scale));line-height:1.68;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg,video{max-width:100%;display:block;height:auto}
a{color:inherit}
button{font:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ---- Typography ---- */
h1,h2,h3,h4{font-family:var(--font-display);color:var(--ink);font-weight:600;line-height:1.08;letter-spacing:.005em}
h1{font-size:calc(clamp(2.8rem,7vw,5.4rem)*var(--type-scale));font-weight:500;letter-spacing:0}
h2{font-size:calc(clamp(2.1rem,4.4vw,3.5rem)*var(--type-scale));font-weight:500}
h3{font-size:calc(clamp(1.35rem,2.3vw,1.75rem)*var(--type-scale))}
p{max-width:64ch}
.lead{font-size:calc(clamp(1.2rem,1.8vw,1.5rem)*var(--type-scale));color:var(--body);line-height:1.6;font-weight:300}
.eyebrow{font-family:var(--font-body);font-size:calc(.78rem*var(--type-scale));font-weight:600;
  text-transform:uppercase;letter-spacing:.24em;color:var(--gold-ink);max-width:none}

/* ---- Layout helpers ---- */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section-y)}
.section--sand{background:var(--surface)}
.center{text-align:center}
.rule{height:1px;background:var(--line);border:0;margin:0}

.skip-link{position:absolute;left:-999px;top:0;z-index:200;background:var(--gold);color:var(--button-text);
  padding:.7rem 1.1rem;border-radius:0 0 6px 0;font-weight:600}
.skip-link:focus{left:0}

/* ---- Brand / Logo-Lockup ---- */
.brand{display:inline-flex;align-items:center;gap:.62rem;text-decoration:none;line-height:1}
.brand__mark{flex:none;display:flex;align-items:center}
.brand__mark img,.brand__mark svg{display:block;height:42px;width:auto}
.brand__word{font-family:var(--font-display);font-size:calc(1.5rem*var(--type-scale));font-weight:600;
  letter-spacing:.2em;color:var(--ink);white-space:nowrap}
.brand:hover .brand__word{color:var(--gold-light)}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:52px;
  padding:0 1.9rem;font-family:var(--font-body);font-size:calc(.96rem*var(--type-scale));font-weight:600;
  letter-spacing:.02em;border-radius:var(--radius);cursor:pointer;text-decoration:none;
  border:1px solid transparent;transition:transform .18s ease,background .2s,color .2s,border-color .2s}
.btn--primary{background:var(--gold-strong);color:var(--button-text)}
.btn--primary:hover{background:var(--gold-light);transform:translateY(-2px)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--ghost:hover{background:var(--surface-raised);border-color:var(--gold-dark)}
.btn--gold{background:transparent;color:var(--gold-light);border-color:var(--gold-dark)}
.btn--gold:hover{background:var(--gold-strong);color:var(--button-text);border-color:var(--gold-strong);transform:translateY(-2px)}

/* ---- Header ---- */
.hdr{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:blur(12px);transition:box-shadow .3s,border-color .3s;border-bottom:1px solid transparent}
.hdr.is-stuck{border-bottom-color:var(--line)}
.hdr__in{display:flex;align-items:center;justify-content:space-between;height:82px}
.nav{display:flex;align-items:center;gap:2.2rem}
.nav a:not(.btn){font-size:calc(.96rem*var(--type-scale));text-decoration:none;color:var(--body)}
.nav a:not(.btn):hover{color:var(--gold-light)}
.nav__cta{margin-left:.4rem}
.nav__order{margin-left:-1.5rem;min-height:44px;padding:0 1.2rem}

/* ---- Formular-Seiten (eingebettetes Bestell-/Testformular auf eigener Domain) ---- */
.formhead{color:var(--body);text-decoration:none;font-size:calc(.95rem*var(--type-scale))}
.formhead:hover{color:var(--gold-light)}
.formpage{padding:clamp(1.4rem,4vw,2.6rem) 0 3.5rem;text-align:center}
.formpage h1{margin:.2rem 0 .5rem;font-size:clamp(1.8rem,4.6vw,2.7rem)}
.formpage .lead{max-width:56ch;margin:0 auto 1.4rem}
/* Formular fließt als normaler Seiteninhalt (kein Kasten, kein innerer Scrollbalken) –
   der Einbett-Helfer zieht den Rahmen automatisch auf die volle Formularhöhe. */
.formembed{max-width:840px;margin:0 auto;text-align:left}
.formembed iframe{width:100%;border:0;display:block;min-height:640px}
.formnote{margin:1.6rem auto 0;max-width:56ch;font-size:calc(.85rem*var(--type-scale));color:var(--muted)}
/* Pflichthinweise vor dem Bestellformular (Zahlungspflicht, Zahlungsart, Preise, Bedingungen).
   Steht bewusst ÜBER dem Formular — ein Hinweis unter einem 900 px hohen Formular liest niemand. */
.orderinfo{max-width:840px;margin:0 auto 1.8rem;text-align:left;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(1rem,3vw,1.5rem)}
.orderinfo h2{font-family:var(--font-body);font-size:calc(.78rem*var(--type-scale));letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-ink);margin:0 0 .7rem}
.orderinfo ul{margin:0;padding-left:1.2rem;display:grid;gap:.55rem}
.orderinfo li{font-size:calc(.92rem*var(--type-scale));line-height:1.55;color:var(--body)}
.orderinfo strong{color:var(--ink)}
.orderinfo a{color:var(--gold-ink);text-decoration:underline}

/* ---- Kundenstimmen ---- */
.testimonials .tgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.4rem;margin-top:1.9rem}
.tcard{background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:1.9rem 1.7rem;display:flex;flex-direction:column;gap:1.1rem}
.tcard__quote{margin:0;font-family:var(--font-display);font-size:calc(1.28rem*var(--type-scale));
  line-height:1.45;color:var(--ink);font-style:italic;position:relative;padding-top:1.5rem}
.tcard__quote::before{content:"\201C";position:absolute;top:-.2rem;left:-.3rem;
  font-family:var(--font-display);font-size:3.2rem;line-height:1;color:var(--gold-dark)}
.tcard__by{display:flex;flex-direction:column;gap:.12rem;margin-top:auto}
.tcard__name{font-family:var(--font-body);font-weight:600;color:var(--gold-ink);font-size:calc(.95rem*var(--type-scale))}
.tcard__role{font-size:calc(.82rem*var(--type-scale));color:var(--muted)}

/* ---- Warum Makler uns wählen ---- */
.why__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.3rem;margin-top:1.9rem}
.why__item{background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.7rem 1.6rem}
.why__item h3{font-family:var(--font-display);font-size:calc(1.35rem*var(--type-scale));color:var(--ink);margin:0 0 .5rem;line-height:1.15}
.why__item p{margin:0;color:var(--body)}

/* ---- Garantie / Ohne Risiko ---- */
.guarantee .grt{max-width:820px;margin:0 auto;text-align:center;background:var(--surface-raised);
  border:1px solid var(--gold-dark);border-radius:var(--radius-lg);padding:clamp(1.8rem,4vw,2.8rem)}
.grt__list{list-style:none;margin:1.6rem auto;padding:0;max-width:600px;text-align:left;display:grid;gap:.9rem}
.grt__list li{position:relative;padding-left:1.9rem;color:var(--body)}
.grt__list li::before{content:"✓";position:absolute;left:0;top:0;color:var(--gold-light);font-weight:700}
.grt__list b{color:var(--ink)}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:var(--radius);
  width:48px;height:48px;cursor:pointer;align-items:center;justify-content:center;position:relative}
.burger span,.burger span::before,.burger span::after{width:20px;height:2px;background:var(--ink);position:absolute;content:"";transition:transform .2s,opacity .2s}
.burger span::before{transform:translateY(-6px)}
.burger span::after{transform:translateY(6px)}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:rotate(-45deg)}

/* ---- Hero ---- */
.hero{padding-top:clamp(44px,6vw,84px);text-align:center}
.hero__brand{display:flex;justify-content:center;margin-bottom:1.8rem}
.hero__brand img,.hero__brand svg{display:block;height:clamp(64px,10vw,104px);width:auto}
.hero .eyebrow{margin-bottom:1.4rem}
.hero h1{max-width:17ch;margin:0 auto 1.6rem}
.hero__lead{max-width:60ch;margin:0 auto 2.2rem}
.hero__cta{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-bottom:1.2rem}
.hero__trust{font-size:calc(.9rem*var(--type-scale));color:var(--muted);max-width:none}
.hero__trust b{color:var(--gold-light);font-weight:600}

/* ---- Cinematic before/after band + frames ---- */
.band{margin-top:clamp(48px,7vw,90px)}
.frame{position:relative;background:var(--mat);padding:clamp(12px,1.6vw,18px);border:1px solid var(--line);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-strong)}
.frame--soft{box-shadow:var(--shadow-soft)}
.band__cap{display:flex;justify-content:space-between;align-items:center;margin-top:1rem;flex-wrap:wrap;gap:.5rem}
.band__cap .t{font-family:var(--font-body);font-size:calc(.82rem*var(--type-scale));letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink)}
.band__cap .s{font-size:calc(.85rem*var(--type-scale));color:var(--muted)}

.ba{position:relative;overflow:hidden;--pos:50%;user-select:none;touch-action:pan-y;background:var(--mat);
  border-radius:calc(var(--radius-lg) - 4px)}
.ba--16-9{aspect-ratio:16/9}
.ba--3-2{aspect-ratio:3/2}
.ba__layer{position:absolute;inset:0}
.ba__layer img{width:100%;height:100%;object-fit:cover;display:block}
.ba__before{z-index:2;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba__tag{position:absolute;bottom:14px;z-index:3;font-family:var(--font-body);font-size:.72rem;
  letter-spacing:.16em;text-transform:uppercase;background:rgba(15,15,16,.82);
  color:var(--ink);padding:.4em .8em;border-radius:4px;border:1px solid rgba(199,154,75,.35);pointer-events:none}
.ba__tag--b{left:14px}.ba__tag--a{right:14px}
.ba__handle{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;background:var(--gold);z-index:4;transform:translateX(-1px);pointer-events:none}
.ba__grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;
  background:var(--surface-raised);border:1px solid var(--gold);display:grid;place-items:center;color:var(--gold-light);font-size:1.1rem;pointer-events:none;box-shadow:0 6px 18px -6px rgba(0,0,0,.7)}
.ba input[type=range]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;z-index:5;margin:0}
.ba:focus-within{outline:2px solid var(--gold);outline-offset:3px}

/* ---- Trust strip ---- */
.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg)}
.strip__in{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(1rem,4vw,3rem);padding-block:1.4rem;text-align:center}
.strip span{font-size:calc(.9rem*var(--type-scale));color:var(--body);display:flex;align-items:center;gap:.7rem}
.strip span::before{content:"";width:6px;height:6px;background:var(--gold);border-radius:50%;flex:none}

/* ---- Value ---- */
.value{text-align:center}
.value__body{max-width:56ch;margin:clamp(2rem,4vw,3rem) auto 0;text-align:left;
  font-size:calc(1.15rem*var(--type-scale));line-height:1.75;color:var(--body)}
.dropcap::first-letter{font-family:var(--font-display);font-size:3.6em;line-height:.8;float:left;
  margin:.06em .12em 0 0;color:var(--gold)}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:clamp(2.6rem,5vw,4.2rem);text-align:left}
.trio>div{padding:clamp(1.4rem,2.6vw,2.2rem) clamp(1.2rem,2.2vw,2rem)}
.trio>div+div{border-left:1px solid var(--line)}
.trio h3{margin-bottom:.5rem}
.trio p{font-size:calc(1rem*var(--type-scale))}
.trio .k{font-family:var(--font-display);color:var(--gold-light);font-size:1.5rem;margin-bottom:.7rem;letter-spacing:.01em}

/* ---- Gallery ---- */
.gal__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(30px,4vw,60px);margin-top:clamp(2.6rem,5vw,4.2rem)}
.gal__item .cap{margin-top:1.15rem;text-align:center}
.cap__style{font-family:var(--font-display);font-size:calc(1.5rem*var(--type-scale));color:var(--ink);line-height:1.15}
.cap__schrift{font-size:calc(.96rem*var(--type-scale));color:var(--body);margin-top:.55rem}
.cap__pc{font-size:calc(.85rem*var(--type-scale));color:var(--muted);margin-top:.15rem;letter-spacing:.015em}
.gal__note{text-align:center;max-width:62ch;margin:clamp(2.6rem,5vw,3.8rem) auto 0;color:var(--body);
  font-size:calc(1.05rem*var(--type-scale));line-height:1.6}

/* ---- Steps ---- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(2.6rem,5vw,4.2rem)}
.steps>div{padding:2rem 1.4rem;text-align:center;position:relative}
.steps>div+div::before{content:"";position:absolute;left:0;top:2rem;bottom:2rem;width:1px;background:var(--line)}
.steps .k{font-family:var(--font-display);font-size:calc(3.2rem*var(--type-scale));color:var(--gold);line-height:1;font-weight:400}
.steps h3{margin:.8rem 0 .4rem;font-size:calc(1.2rem*var(--type-scale))}
.steps p{font-size:calc(.92rem*var(--type-scale));margin-inline:auto}

/* ---- Personalization ---- */
.perso__grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;margin-top:clamp(2rem,4vw,3rem)}
.tags{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.4rem}
.tags span{font-family:var(--font-display);font-size:calc(1.1rem*var(--type-scale));color:var(--ink);
  background:var(--surface-raised);border:1px solid var(--line);border-radius:30px;padding:.45em 1.1em}
.perso__note{margin-top:1.4rem;font-size:calc(.92rem*var(--type-scale));color:var(--muted)}
.perso__demo{background:var(--mat);padding:clamp(20px,3vw,32px);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft);text-align:center}
.perso__demo .ba{aspect-ratio:4/3}
.perso__plate{margin-top:1.2rem;font-family:var(--font-display);font-size:calc(1.5rem*var(--type-scale));color:var(--ink)}
.perso__plate small{display:block;font-family:var(--font-body);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:.45rem}

/* ---- Products (editorial rows) ---- */
.plist{margin-top:clamp(2.6rem,5vw,4.2rem);border-top:1px solid var(--line)}
.prow{display:grid;grid-template-columns:1fr auto;gap:1rem 2rem;align-items:center;
  padding:clamp(1.7rem,3vw,2.5rem) clamp(0px,1.5vw,1.4rem);border-bottom:1px solid var(--line);transition:background .2s}
.prow:hover{background:var(--surface)}
.prow--feat{background:linear-gradient(90deg,transparent,rgba(199,154,75,.10),transparent)}
.prow--feat:hover{background:linear-gradient(90deg,transparent,rgba(199,154,75,.16),transparent)}
.prow h3{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap}
.prow .badge{font-family:var(--font-body);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-light);border:1px solid var(--gold-dark);border-radius:20px;padding:.2em .8em}
.prow p{color:var(--body);font-size:calc(.98rem*var(--type-scale));margin-top:.4rem;max-width:52ch}
.prow__right{display:flex;align-items:center;gap:1.6rem;flex-wrap:wrap}
.prow .price{font-family:var(--font-display);font-size:calc(2.6rem*var(--type-scale));color:var(--ink);white-space:nowrap;font-weight:500}
.prow .price small{font-size:1rem;color:var(--muted);font-family:var(--font-body)}
/* Pflichtangabe direkt beim Preis: Umsatzsteuer und Versandkosten (§ 1 PAngV).
   Bewusst NICHT `white-space:nowrap` — der Text ist lang und muss im schmalen Fenster umbrechen
   dürfen, sonst wächst die Zeile über das Fenster hinaus. */
.prow .pnote{font-family:var(--font-body);font-size:calc(.78rem*var(--type-scale));color:var(--muted);
  line-height:1.4;max-width:22ch;margin-left:-.9rem}
.plist__note{margin-top:1.6rem;font-size:calc(.88rem*var(--type-scale));color:var(--muted);max-width:70ch;line-height:1.6}
.plist__note a{color:var(--gold-ink);text-decoration:underline}
@media (max-width:560px){
  /* Im schmalen Fenster steht der Hinweis unter dem Preis statt daneben. */
  .prow .pnote{max-width:none;margin-left:0;flex-basis:100%;order:3}
  .prow__right{gap:.6rem 1rem}
}

/* ---- Sample CTA ---- */
.sample{text-align:center}
.sample .lead{max-width:50ch;margin:1.2rem auto 2rem}
.sample__meta{margin-top:1.4rem;font-size:calc(.88rem*var(--type-scale));color:var(--muted);max-width:none}

/* ---- Quality ---- */
.quality__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.chips{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.2rem}
.chips span{font-size:calc(.85rem*var(--type-scale));background:var(--surface-raised);border:1px solid var(--line);
  border-radius:20px;padding:.42em .95em;color:var(--body)}

/* ---- FAQ ---- */
.faq{max-width:840px;margin-inline:auto}
details{border-bottom:1px solid var(--line)}
summary{cursor:pointer;list-style:none;padding:1.4rem 2.2rem 1.4rem 0;position:relative;
  font-family:var(--font-display);font-size:calc(1.35rem*var(--type-scale));color:var(--ink)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:.2rem;top:50%;transform:translateY(-50%);color:var(--gold);font-size:1.5rem}
details[open] summary::after{content:"–"}
details p{padding:0 0 1.4rem;font-size:calc(1rem*var(--type-scale))}

/* ---- Closing ---- */
.close{text-align:center}
.close h2{max-width:18ch;margin:0 auto 1.8rem}

/* ---- Footer ---- */
.foot{background:var(--surface);color:var(--body);padding-block:clamp(52px,8vw,88px);border-top:1px solid var(--line)}
.foot__in{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.foot a{color:var(--muted);text-decoration:none;font-size:.94rem}
.foot a:hover{color:var(--gold-light)}
.foot__links{display:flex;gap:1.8rem;flex-wrap:wrap}
/* Markenclaim unter dem Markennamen der Fusszeile. `--gold-ink` ist die fuer Text auf
   dunklem Grund vorgesehene Goldvariante (siehe Farbtabelle oben), nicht die Flaechenfarbe. */
.brand__claim{margin-top:.55rem;font-size:.9rem;letter-spacing:.02em;color:var(--gold-ink);font-style:italic}
.foot__legal{margin-top:2rem;font-size:.82rem;color:var(--muted)}

/* ---- Legal / reading pages ---- */
.legal{padding-block:clamp(48px,8vw,110px)}
.legal .wrap{max-width:760px}
.legal h1{font-size:calc(clamp(2.2rem,5vw,3.4rem)*var(--type-scale));margin-bottom:1.5rem}
.legal h2{font-size:calc(clamp(1.5rem,2.6vw,2rem)*var(--type-scale));margin:2.4rem 0 .8rem;color:var(--ink)}
.legal p,.legal li{font-size:calc(1.02rem*var(--type-scale));max-width:70ch}
.legal ul{margin:.6rem 0 .6rem 1.2rem}
.legal a{color:var(--gold-light)}
.legal .todo{background:rgba(199,154,75,.10);border:1px dashed var(--gold-dark);
  border-radius:8px;padding:.9rem 1.1rem;margin:1rem 0;color:var(--ink);font-size:.95rem}
.legal .back{display:inline-block;margin-top:2.5rem;color:var(--gold-light);text-decoration:none;
  border-bottom:1px solid var(--gold-dark);padding-bottom:.2em}

/* ---- 404 ---- */
.err{min-height:70vh;display:grid;place-content:center;text-align:center;gap:1.2rem;padding:var(--gutter)}
.err h1{font-size:clamp(4rem,14vw,9rem);color:var(--gold)}

/* ---- Responsive ---- */
@media(max-width:900px){
  .trio,.gal__grid,.steps,.quality__grid,.perso__grid{grid-template-columns:1fr}
  .trio>div+div{border-left:none;border-top:1px solid var(--line)}
  .steps>div+div::before{display:none}
  .steps>div+div{border-top:1px solid var(--line)}
  .prow{grid-template-columns:1fr}
  .prow__right{justify-content:space-between}
  .perso__demo{order:-1}
  .nav{display:none}
  .burger{display:flex}
  .nav.open{display:flex;position:absolute;top:82px;left:0;right:0;flex-direction:column;gap:1.1rem;
    background:var(--bg);border-bottom:1px solid var(--line);padding:1.6rem var(--gutter);box-shadow:var(--shadow-soft)}
  .nav.open a{padding:.4rem 0}
  .nav.open .nav__cta{margin-left:0;width:100%}
}
@media(max-width:520px){
  .brand__word{font-size:calc(1.2rem*var(--type-scale));letter-spacing:.14em}
  .brand__mark img,.brand__mark svg{height:34px}
}

@media print{
  .hdr,.foot,.hero__cta,.sample .btn,.close .btn{display:none}
  body{background:#fff;color:#000}
}

/* ---- B2B-Hinweis (Angebot ausschließlich für Unternehmer, § 14 BGB) ---- */
.b2b-hinweis{max-width:66ch;margin:1rem auto 0;padding:.8rem 1.05rem;border:1px solid var(--gold-dark);
  border-radius:var(--radius);background:color-mix(in srgb,var(--gold) 9%,transparent);
  color:var(--body);font-size:calc(.9rem*var(--type-scale));line-height:1.5}
.b2b-hinweis strong{color:var(--gold-ink)}

/* ---- Tally-Einbettung erst auf Klick (Datenschutz, § 25 TDDDG) ----
   Solange dieser Platzhalter steht, wurde KEINE Verbindung zu tally.so aufgebaut. */
.tallygate{max-width:840px;margin:0 auto;padding:clamp(1.4rem,4vw,2.2rem);text-align:left;
  background:var(--surface);border:1px dashed var(--gold-dark);border-radius:var(--radius-lg)}
.tallygate p{margin:0 0 1.15rem;max-width:66ch;font-size:calc(.94rem*var(--type-scale));
  line-height:1.6;color:var(--body)}
.tallygate strong{color:var(--ink)}
.tallygate a{color:var(--gold-ink);text-decoration:underline}
.tallygate code{font-size:.92em;color:var(--gold-ink)}