/* KAP3 "Für Hersteller" v1 – baut auf ../markenentwicklung-v1/styles.css auf (Kopf, Typo, Hero-Bühne, Laufband, Reveal, Zahlen, Fußzeile).
   Hier nur neue Bausteine und Überschreibungen. styles.css wird nie geändert. */

/* ---------- Hilfen ---------- */
.sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
h1,h2,h3{text-wrap:balance}
.h2s{font-family:var(--serif);font-weight:300;font-size:clamp(34px,4.6vw,76px);line-height:1.04;letter-spacing:-.03em;max-width:14em;margin-top:clamp(20px,2.4vw,32px)}
.h2s em{font-style:italic;color:var(--gold-d)}
.dark .h2s em{color:var(--gold)}
/* Beschnittmarken in Gold (wie Druckbogen der Markenentwicklung) */
.cm{position:relative}
.cm::before{content:"";position:absolute;inset:-18px;pointer-events:none;z-index:3;
 background:
  linear-gradient(var(--gold),var(--gold)) 0 18px/14px 1px no-repeat,
  linear-gradient(var(--gold),var(--gold)) 18px 0/1px 14px no-repeat,
  linear-gradient(var(--gold),var(--gold)) 100% 18px/14px 1px no-repeat,
  linear-gradient(var(--gold),var(--gold)) calc(100% - 18px) 0/1px 14px no-repeat,
  linear-gradient(var(--gold),var(--gold)) 0 calc(100% - 18px)/14px 1px no-repeat,
  linear-gradient(var(--gold),var(--gold)) 18px 100%/1px 14px no-repeat,
  linear-gradient(var(--gold),var(--gold)) 100% calc(100% - 18px)/14px 1px no-repeat,
  linear-gradient(var(--gold),var(--gold)) calc(100% - 18px) 100%/1px 14px no-repeat}

/* ---------- 1 Hero ---------- */
.hero .hp img{object-position:80% 56%;transform-origin:70% 66%}
.hero .lead{max-width:42ch;font-size:clamp(16px,1.25vw,20px);line-height:1.6;color:#e6e1d5}
.hero .side{max-width:48ch}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 34px;margin-top:clamp(22px,2.4vw,34px)}
.cta-main{display:inline-flex;align-items:center;gap:14px;min-height:52px;padding:0 28px;background:var(--paper);color:var(--ink);font-size:14.5px;letter-spacing:.06em;border-bottom:3px solid var(--gold);transition:background .3s,color .3s}
.cta-main span{transition:transform .35s var(--ease)}
.cta-main:hover{background:var(--gold)}
.cta-main:hover span{transform:translateX(6px)}
.cta-row .cta{margin-top:0;min-height:44px;padding-block:12px 6px}
.cta-row .cta:hover span{transform:translateY(4px)}
@media(min-width:861px){
  .hero h1{font-size:clamp(46px,5.9vw,100px);line-height:1.02}
  .hero .t{margin-bottom:clamp(20px,2.4vw,36px)}
  /* Verlauf im Textbereich dunkler: Lead >= 4,5:1 auch an der hellsten Fotostelle (gemessen mit _test/kontrast_lead.py) */
  .hero .hf::after{background:linear-gradient(90deg,rgba(8,7,6,.88) 0,rgba(8,7,6,.72) 28%,rgba(8,7,6,.4) 40%,rgba(8,7,6,.12) 53%,rgba(8,7,6,0) 62%),linear-gradient(0deg,rgba(8,7,6,.74) 0,rgba(8,7,6,.2) 26%,rgba(8,7,6,0) 44%)}
  .js .hero .hf::after{background:linear-gradient(180deg,rgba(8,7,6,.55) 0,rgba(8,7,6,0) 160px),linear-gradient(90deg,rgba(8,7,6,.88) 0,rgba(8,7,6,.72) 28%,rgba(8,7,6,.4) 40%,rgba(8,7,6,.12) 53%,rgba(8,7,6,0) 62%),linear-gradient(0deg,rgba(8,7,6,.74) 0,rgba(8,7,6,.2) 26%,rgba(8,7,6,0) 44%)}
}
@media(max-width:860px){
  /* Handy/Tablet: Überschrift oben, Bild in der Mitte, Lead + Knöpfe darunter auf dunklem Grund (kein Text über dem Produkt) */
  .hero,.js .hero{display:flex;flex-direction:column;height:auto;min-height:0;max-height:none;padding:0;overflow:hidden}
  .hero .hc{display:contents}
  .hero .t{order:1;max-width:none;width:auto;padding:104px var(--g) 0}
  .hero h1{font-size:clamp(36px,10.6vw,60px)}
  .hero .l>span{white-space:nowrap}
  .hero .hf,.hero figure.hf{order:2;position:relative;inset:auto;width:100%;height:auto;aspect-ratio:16/9;margin:clamp(24px,5vw,40px) 0 0;overflow:hidden}
  .hero .hp{top:-4%;bottom:-4%;height:auto;-webkit-mask-image:none;mask-image:none}
  .hero .hp img{object-position:50% 50%}
  .hero .hf::after{background:linear-gradient(180deg,#0d0b09 0,rgba(13,11,9,0) 22%,rgba(13,11,9,0) 74%,#0d0b09 100%)}
  .hero .side{order:3;max-width:none;padding:8px var(--g) 52px}
  .hero .lead{max-width:44ch;font-size:16px}
  .cta-row{flex-direction:column;align-items:stretch;gap:6px}
  .cta-main{justify-content:space-between}
  .cta-row .cta{align-self:flex-start}
}
@media(max-width:700px){
  .hero .hf,.hero figure.hf{aspect-ratio:4/3}
  .hero .hp img{object-position:50% 84%}
}
/* kurze Handys (Höhe bis 720 px, z. B. 375x667, 360x640): Abstände enger, Bildhöhe aus der Fensterhöhe, damit der Hauptknopf über der Falz liegt */
@media(max-width:860px) and (max-height:720px){
  .hero .t{padding-top:84px}
  .hero .lab{margin-bottom:14px}
  .hero .gl{margin-top:14px}
  .hero .hf,.hero figure.hf{aspect-ratio:auto;height:clamp(150px,27svh,230px);margin-top:16px}
  .hero .side{padding:0 var(--g) 36px}
  .hero .lead{line-height:1.5}
  .cta-row{margin-top:16px}
  .cta-main{min-height:48px}
}
/* sehr kurze Handys (Höhe bis 600 px, z. B. 320x568) */
@media(max-width:860px) and (max-height:600px){
  .hero .t{padding-top:72px}
  .hero .lab{gap:10px;letter-spacing:.14em;margin-bottom:10px}
  .hero .lab::before{width:22px}
  .hero h1{font-size:clamp(32px,10vw,60px)}
  .hero .gl{margin-top:10px}
  .hero .hf,.hero figure.hf{height:clamp(130px,25svh,230px);margin-top:12px}
  .hero .lead{line-height:1.45}
  .cta-row{margin-top:12px}
}

/* ---------- 2 Haltung ---------- */
.haltung{padding-block:clamp(88px,12vw,200px) clamp(96px,13vw,210px)}
.haltung .hl-rule{grid-column:1/3;border-top:1px solid var(--hair);margin-top:.9em;align-self:start}
.haltung .body{grid-column:3/12}
.haltung .big{font-size:clamp(28px,4.3vw,72px);line-height:1.16;max-width:20em;text-wrap:pretty}
.nb{white-space:nowrap} /* letzte zwei Wörter bleiben zusammen: keine Einzelwort-Zeile am Ende (Text im DOM unverändert) */
.words .w{opacity:.16;transition:opacity .55s var(--ease)}
.words .w.on{opacity:1}
@media(max-width:860px){.haltung .hl-rule{display:block;width:140px;margin:0 0 28px}}
.band .trk{animation-duration:70s}

/* ---------- 3 Zwei Wege ---------- */
.wege{padding-block:clamp(80px,10vw,160px) clamp(72px,9vw,140px)}
.wege .wt{font-family:var(--serif);font-weight:300;font-size:clamp(34px,4.6vw,76px);line-height:1.04;letter-spacing:-.03em;max-width:15em;margin-bottom:clamp(36px,5vw,72px)}
.wege .wt .a{display:block}
.wege .wt em{color:var(--gold)}

/* Umschalter */
.tabs{position:relative;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair-s)}
html:not(.js) .tabs{display:none}
.tab{appearance:none;-webkit-appearance:none;background:none;border:0;border-radius:0;cursor:pointer;font:inherit;text-align:left;color:var(--mute-d);display:flex;flex-direction:column;gap:12px;min-height:88px;padding:clamp(20px,2.2vw,34px) clamp(16px,2vw,32px) clamp(24px,2.6vw,38px);transition:color .4s,background .4s}
.tab+.tab{border-left:1px solid var(--hair-s)}
.tab .k{display:flex;align-items:center;gap:14px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;color:var(--gold)}
.tab .k::before{content:"";width:28px;height:1px;background:currentColor;opacity:.75;transition:width .5s var(--ease)}
.tab .t{font-family:var(--serif);font-weight:300;font-size:clamp(21px,2.9vw,46px);line-height:1.08;letter-spacing:-.025em}
.tab:hover{color:var(--on-d)}
.tab[aria-selected=true]{color:var(--on-d);background:linear-gradient(180deg,rgba(201,162,74,.08),rgba(201,162,74,0))}
.tab[aria-selected=true] .k::before{width:48px}
.tab:focus-visible{outline-offset:-4px}
.ind{position:absolute;left:0;bottom:-1px;width:50%;height:3px;background:var(--gold);transition:transform .65s var(--ease)}
.tabs[data-on=b] .ind{transform:translateX(100%)}

/* Bühne: beide Wege liegen übereinander und blenden weich über (ohne JS stehen sie untereinander) */
.stage{display:grid;margin-top:clamp(36px,4.4vw,72px);row-gap:clamp(64px,8vw,110px)}
.js .stage{row-gap:0}
.js .wp{grid-area:1/1}
.wp{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:center;min-width:0}
.wp:focus-visible{outline:1px solid var(--gold);outline-offset:8px}
.wp-t{grid-column:1/-1;font-family:var(--serif);font-weight:300;font-size:clamp(26px,3vw,44px);letter-spacing:-.02em;margin-bottom:28px}
.js .wp-t{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wf{grid-column:1/8;margin:0;min-width:0}
.wf .frm{position:relative;aspect-ratio:2000/1342;overflow:hidden;background:var(--ink2);box-shadow:0 0 0 1px var(--hair-s);container-type:inline-size}
.wf img{width:100%;height:100%;object-fit:cover;transform-origin:50% 60%}
.wx{grid-column:8/13;padding-left:clamp(0px,2.4vw,40px);min-width:0}
.js .wp{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .6s var(--ease),visibility 0s .6s}
.js .wp.on{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .8s var(--ease) .1s,visibility 0s}
.js .wp .wf img{transform:scale(1.07);transition:transform 1.8s var(--ease)}
.js .wp.on .wf img{transform:none}
.js .wp .wx>*{opacity:0;transform:translate3d(0,14px,0);transition:opacity .45s,transform .45s}
.js .wp.on .wx>*{opacity:1;transform:none;transition:opacity .85s var(--ease) calc(.3s + var(--j,0)*.12s),transform .95s var(--ease) calc(.3s + var(--j,0)*.12s)}

.wl{font-family:var(--serif);font-weight:300;font-size:clamp(21px,2vw,32px);line-height:1.26;letter-spacing:-.018em;color:var(--on-d);max-width:22em}
.teile{margin-top:clamp(26px,3vw,46px);display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(18px,2vw,32px)}
.te h4{display:flex;align-items:center;gap:12px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-weight:500;margin-bottom:14px}
.te ul{list-style:none}
.te li{position:relative;padding:12px 0 12px 24px;border-top:1px solid var(--hair-s);font-size:15px;line-height:1.45;font-weight:300;color:#e5e1d8}
.te li:last-child{border-bottom:1px solid var(--hair-s)}
.te li::before{content:"";position:absolute;left:0;top:19px;width:10px;height:10px;border:1px solid var(--gold);border-radius:50%}
.te.u li::before{background:var(--gold)}


/* Vergleichstabelle */
.vgl{margin-top:clamp(56px,7vw,112px)}
.vgl-t{width:100%;border-collapse:collapse;table-layout:fixed}
.vgl-t th,.vgl-t td{text-align:left;vertical-align:top;padding:clamp(16px,1.8vw,26px) clamp(14px,1.6vw,28px);border-top:1px solid var(--hair-s);transition:background .5s var(--ease),color .5s,box-shadow .5s}
.vgl-t thead th,.vgl-t thead td{border-top:0}
.vgl-t thead th{font:500 12px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--gold);padding-block:20px 16px}
.vgl-t tbody th{width:34%;font-family:var(--serif);font-weight:300;font-size:clamp(18px,1.7vw,26px);line-height:1.25;letter-spacing:-.01em;color:var(--on-d)}
.vgl-t td{font-size:clamp(15px,1.2vw,18px);line-height:1.5;font-weight:300;color:var(--mute-d)}
.vgl-t td span{display:block}
.vgl-t td span::first-letter{text-transform:uppercase}
.vgl-t.on-a .ca,.vgl-t.on-b .cb{background:rgba(201,162,74,.09);color:var(--on-d)}
.vgl-t.on-a thead .ca,.vgl-t.on-b thead .cb{box-shadow:inset 0 3px 0 var(--gold)}
.vl{margin-top:clamp(28px,3.4vw,48px);padding-top:22px;border-top:1px solid var(--hair);max-width:46em;font-family:var(--serif);font-weight:300;font-size:clamp(18px,1.6vw,24px);line-height:1.4;letter-spacing:-.01em;color:#e5e1d8}

@media(max-width:999px){
  .wp{display:block}
  .wf{margin:0 calc(var(--g)*-1)}
  .wf .frm{box-shadow:none}
  .cm::before{display:none}
  .wx{padding:34px 0 0}
  .js .wp{align-self:start}
}
@media(max-width:760px){
  .teile{grid-template-columns:1fr;gap:26px}
  .te li{font-size:16px}
  .vgl-t,.vgl-t tbody,.vgl-t tr,.vgl-t th,.vgl-t td{display:block}
  .vgl-t thead{display:none}
  .vgl-t tr{border-top:1px solid var(--hair);padding:22px 0 8px}
  .vgl-t th,.vgl-t td{border:0}
  .vgl-t tbody th{width:auto;padding:0 0 14px}
  .vgl-t td{position:relative;padding:12px 14px 12px 18px;margin-bottom:8px;font-size:16px}
  .vgl-t td::before{content:attr(data-l);display:block;margin-bottom:5px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
  .vgl-t.on-a .ca,.vgl-t.on-b .cb{box-shadow:inset 3px 0 0 var(--gold)}
  .vgl-t td{color:var(--mute-d)}
}


/* ---------- 4 Kanäle ---------- */
.kanaele{padding-block:clamp(80px,10vw,160px) clamp(72px,9vw,150px)}
.kn-mq{margin-top:clamp(40px,5vw,84px);border-block:1px solid var(--hair);overflow:hidden;white-space:nowrap;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
.kn-trk{display:flex;width:max-content;animation:mq 95s linear infinite;will-change:transform}
.kn-half{display:flex;flex:none;list-style:none}
.kn-half li{font-family:var(--serif);font-weight:300;font-size:clamp(40px,5.6vw,92px);letter-spacing:-.03em;line-height:1;padding:clamp(22px,2.6vw,40px) 0;color:var(--ink);transition:color .4s}
.kn-half li:nth-child(even){font-style:italic}
.kn-half li::after{content:"\2726";font-family:var(--sans);font-style:normal;font-size:.28em;color:var(--gold);margin-inline:clamp(28px,3.6vw,60px);vertical-align:.9em}
.kn-half li:hover{color:var(--gold-d)}
.kn-mq:hover .kn-trk{animation-play-state:paused}
.kn-tx{margin:clamp(36px,4.4vw,64px) 0 0 auto;max-width:44em;padding-top:22px;border-top:1px solid var(--hair);color:var(--mute);font-size:clamp(16px,1.3vw,19px);line-height:1.65}
@media(min-width:861px){.kn-tx{margin-left:25%}}
@media(max-width:860px){.kn-tx{margin-left:0}}

/* ---------- 5 Ablauf ---------- */
.ablauf{padding-block:clamp(80px,10vw,160px) clamp(64px,8vw,128px)}
.ablauf h2{font-family:var(--disp);text-transform:uppercase;font-weight:800;font-size:clamp(46px,5.6vw,92px);line-height:.92;margin-bottom:clamp(36px,5vw,80px)}
.ab{display:grid;grid-template-columns:minmax(0,1fr)}
.ab-f{position:relative;margin:0 calc(var(--g)*-1)}
.ab-f .fi{position:relative;aspect-ratio:2000/1342;overflow:hidden;background:var(--ink2)}
.ab-f img{width:100%;height:100%;object-fit:cover}
.ab-s{padding:30px 0 clamp(52px,12vw,76px)}
.ab-s .num{font-size:clamp(72px,22vw,118px);margin-bottom:8px}
.ab-s h3{font-family:var(--disp);text-transform:uppercase;font-weight:800;font-size:clamp(38px,11vw,54px);line-height:.95;margin:0 0 14px}
.ab-s p{font-size:16px;font-weight:300;line-height:1.55;color:#e5e1d8;max-width:34ch}
.ab-ln{display:none}
.ab-s.s3{padding-bottom:12px}
/* Desktop ohne Bühne (ohne JS oder reduzierte Bewegung): Bild und Text je Schritt nebeneinander */
@media(min-width:861px){
  .ab:not(.ab-on){grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(40px,6vw,104px);row-gap:clamp(40px,5vw,80px);align-items:center}
  .ab:not(.ab-on) .ab-f{margin:0;box-shadow:0 0 0 1px var(--hair-s)}
  .ab:not(.ab-on) .ab-s,.ab:not(.ab-on) .ab-s.s3{padding:0}
}
/* Bühne: nur Desktop, mit JS, ohne reduzierte Bewegung (.ab-on setzt hersteller.js) */
.ab-on{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(40px,6vw,104px)}
.ab-on .ab-f{grid-column:1;grid-row:1/5;position:sticky;top:max(104px,calc(50svh - 17vw));align-self:start;margin:0;opacity:0;box-shadow:0 0 0 1px var(--hair-s);transition:opacity 1.1s var(--ease)}
.ab-on .ab-f.on{opacity:1}
.ab-on .ab-f img{transform:scale(1.09);transition:transform 2.4s var(--ease)}
.ab-on .ab-f.on img{transform:none}
.ab-on .s0{grid-row:1}.ab-on .s1{grid-row:2}.ab-on .s2{grid-row:3}.ab-on .s3{grid-row:4}
.ab-on .ab-s{grid-column:2;min-height:clamp(420px,62svh,720px);display:flex;flex-direction:column;justify-content:center;position:relative;padding:0 0 0 clamp(40px,4vw,64px);opacity:.28;transition:opacity .7s var(--ease)}
.ab-on .ab-s.on{opacity:1}
.ab-on .ab-s.s3{padding-bottom:0}
.ab-on .ab-s .num{font-size:clamp(84px,9vw,150px);position:relative}
.ab-on .ab-s .num::before{content:"";position:absolute;left:calc(-1*clamp(40px,4vw,64px) - 6px);top:50%;width:11px;height:11px;margin-top:-5px;border-radius:50%;border:1px solid var(--gold);background:var(--ink);transition:background .5s,transform .5s var(--ease)}
.ab-on .ab-s.done .num::before{background:var(--gold)}
.ab-on .ab-s.on .num::before{background:var(--gold);transform:scale(1.5)}
.ab-on .ab-s h3{font-size:clamp(40px,4.4vw,72px)}
.ab-on .ab-s p{font-size:clamp(16px,1.25vw,19px);transform:translate3d(0,10px,0);transition:transform .9s var(--ease)}
.ab-on .ab-s.on p{transform:none}
.ab-on .ab-ln{display:block;grid-column:2;grid-row:1/5;justify-self:start;width:1px;background:rgba(201,162,74,.28);position:relative}
.ab-ln i{position:absolute;left:-.5px;top:0;width:2px;height:100%;background:var(--gold);transform:scaleY(var(--p,0));transform-origin:50% 0;will-change:transform}

/* ---------- 6 Marken ---------- */
.marken{padding-block:clamp(80px,10vw,160px) clamp(56px,6vw,96px)}
.marken .h2s{margin-bottom:clamp(36px,5vw,72px)}
.mk-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
.mk-c{--mx:50%;--my:30%;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-start;gap:clamp(24px,2.6vw,40px);padding:clamp(28px,3.4vw,52px);background:var(--ink);color:var(--on-d);border-bottom:3px solid var(--gold);transition:transform .6s var(--ease),opacity 1s var(--ease)}
.mk-c::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(420px circle at var(--mx) var(--my),rgba(201,162,74,.16),transparent 65%);opacity:0;transition:opacity .5s}
.mk-c:hover::before{opacity:1}
.mk-c>*{position:relative}
.mk-c h3{margin:0;padding-bottom:clamp(22px,2.4vw,34px);border-bottom:1px solid rgba(201,162,74,.38)}
.mk-c .lg{height:clamp(40px,4.4vw,64px);width:auto;max-width:100%}
.mk-c p{font-family:var(--serif);font-weight:300;font-size:clamp(20px,1.9vw,30px);line-height:1.28;letter-spacing:-.015em;max-width:21em;color:#ece7db}
@media(max-width:700px){.mk-g{grid-template-columns:1fr}}
.zahlen{padding-block:clamp(72px,9vw,140px)}
.zahlen .stat .v{font-size:clamp(100px,14vw,230px)}
.zahlen .stat p{max-width:30ch}
@media(max-width:860px){.zahlen .stat .v{font-size:clamp(96px,30vw,150px)}}

/* ---------- 7 Für wen ---------- */
.passt{padding-block:clamp(80px,10vw,160px)}
.ps-g{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(36px,5vw,64px) clamp(40px,6vw,96px);margin-top:clamp(40px,5vw,80px);align-items:start}
.ps-v .lab{margin-bottom:6px}
.chk{list-style:none;margin-top:18px}
.chk li{display:flex;align-items:center;gap:clamp(16px,2vw,26px);padding:clamp(18px,2vw,28px) 0;border-top:1px solid var(--hair)}
.chk li:last-child{border-bottom:1px solid var(--hair)}
.chk li span{display:block;font-family:var(--serif);font-weight:300;font-size:clamp(22px,2.4vw,38px);line-height:1.2;letter-spacing:-.02em}
.chk li span::first-letter{text-transform:uppercase}
.ck{flex:none;width:clamp(32px,3vw,44px);height:clamp(32px,3vw,44px);fill:none;stroke:var(--gold-d);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ck circle,.ck path{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1s var(--ease)}
.js .ps-v:not(.in) .ck circle,.js .ps-v:not(.in) .ck path{stroke-dashoffset:1}
.ck path{stroke:var(--gold-d);stroke-width:2.2}
.ps-v.in li:nth-child(1) .ck circle{transition-delay:.3s}.ps-v.in li:nth-child(1) .ck path{transition-delay:.9s}
.ps-v.in li:nth-child(2) .ck circle{transition-delay:.55s}.ps-v.in li:nth-child(2) .ck path{transition-delay:1.15s}
.ps-v.in li:nth-child(3) .ck circle{transition-delay:.8s}.ps-v.in li:nth-child(3) .ck path{transition-delay:1.4s}
.ps-k{background:var(--cream);padding:clamp(28px,3.4vw,52px);border-top:3px solid var(--gold)}
.ps-k h3{font-family:var(--serif);font-weight:300;font-size:clamp(24px,2.4vw,38px);line-height:1.12;letter-spacing:-.025em}
.ps-k p{margin-top:16px;color:var(--mute);font-size:clamp(16px,1.3vw,19px)}
.lk{display:inline-flex;align-items:center;gap:14px;margin-top:22px;min-height:44px;font-family:var(--serif);font-weight:300;font-size:clamp(26px,2.6vw,42px);letter-spacing:-.025em;line-height:1.1;border-bottom:1px solid var(--gold);padding-bottom:6px;transition:color .3s}
.lk span{transition:transform .35s var(--ease)}
.lk:hover{color:var(--gold-d)}.lk:hover span{transform:translateX(8px)}
@media(max-width:860px){
  .ps-g{grid-template-columns:minmax(0,1fr)}
  .lk{flex-wrap:wrap;gap:2px 12px;max-width:100%;font-size:clamp(20px,6.4vw,32px)}
}
@media(max-width:400px){.ps-k{padding:26px 20px}}

/* ---------- 8 Fragen ---------- */
.fragen{background:var(--cream);padding-block:clamp(80px,10vw,160px)}
.fragen .no{grid-column:1/3;align-self:start;padding-top:.9em;border-top:1px solid var(--hair)}
.fragen .no::before{display:none}
.fq-l{grid-column:3/13;border-bottom:1px solid var(--hair)}
.fq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:64px;padding:clamp(20px,2.4vw,34px) 0;border-top:1px solid var(--hair)}
.fq summary::-webkit-details-marker{display:none}
.fq .q{font-family:var(--serif);font-weight:300;font-size:clamp(21px,2.3vw,36px);line-height:1.18;letter-spacing:-.02em;text-wrap:balance;transition:color .3s}
.fq summary:hover .q{color:var(--gold-d)}
.pm{position:relative;flex:none;width:44px;height:44px;border:1px solid var(--hair);border-radius:50%;transition:background .4s,border-color .4s}
.pm::before,.pm::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:1.5px;margin:-.75px 0 0 -8px;background:var(--ink);transition:transform .5s var(--ease),background .3s}
.pm::after{transform:rotate(90deg)}
.fq.is-open .pm{background:var(--ink);border-color:var(--ink)}
.fq.is-open .pm::before,.fq.is-open .pm::after{background:var(--paper)}
.fq.is-open .pm::after{transform:rotate(0)}
.ans{overflow:hidden}
.ans-i{max-width:46em;padding:0 clamp(0px,6vw,96px) clamp(26px,3vw,44px) 0;color:var(--mute);font-size:clamp(16px,1.3vw,19px);line-height:1.65}
.tl{border-bottom:1px solid var(--gold);color:var(--ink);transition:color .3s}
.tl:hover{color:var(--gold-d)}
@media(max-width:860px){.fragen .g12{display:block}.fragen .no{max-width:140px;margin-bottom:28px}}

/* ---------- 9 Kontakt ---------- */
.kontakt{position:relative;overflow:hidden;padding-block:clamp(110px,14vw,230px);isolation:isolate}
.kt-bg{position:absolute;inset:-6% 0;z-index:-2;will-change:transform}
.kt-bg img{width:100%;height:100%;object-fit:cover;object-position:62% 50%}
.kontakt::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(13,12,11,.95) 0,rgba(13,12,11,.82) 36%,rgba(13,12,11,.4) 72%,rgba(13,12,11,.28) 100%),linear-gradient(0deg,rgba(13,12,11,.55) 0,rgba(13,12,11,0) 45%)}
.kontakt::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--gold);z-index:1}
.kt-c{max-width:min(100%,860px)}
.kontakt h2{color:#f6f1e6;max-width:10em}
.kontakt .lead{color:#e0dbcf;max-width:38ch}
.kontakt .btn-d{background:var(--paper);color:var(--ink);min-height:56px;align-items:center}
.kontakt .btn-d:hover{background:var(--gold);color:var(--ink)}
.kontakt .tel{color:#d4cec0}
.kontakt .tel b{color:#fff}
.kontakt .tel a{display:inline-block;min-height:44px;line-height:44px;transition:color .3s}
.kontakt .tel a:hover{color:var(--gold)}
@media(max-width:860px){.kontakt .btn-d{justify-content:space-between}}

footer{margin-top:0;padding-block:37px 29px}
footer a{display:inline-flex;align-items:center;min-height:44px}

/* Handy: Knopfbeschriftungen und kurze Texte nicht unter 16 px */
@media(max-width:860px){
  .cta-main,.cta-row .cta,.kontakt .btn-d{font-size:16px}
  .zahlen .stat p,.kontakt .lead,.kontakt .tel{font-size:16px}
}

/* ---------- Bewegung reduziert: alles sofort sichtbar, Ablauf als Bild-Text-Folge ---------- */
@media(prefers-reduced-motion:reduce){
  .words .w{opacity:1;transition:none}
  .js .wp,.js .wp.on,.js .wp .wf img,.js .wp .wx>*,.js .wp.on .wx>*,.ind,.tab,.vgl-t td,.vgl-t th,.mk-c,.pm,.pm::before,.pm::after,.ab-on .ab-f,.ab-on .ab-f img,.ab-on .ab-s,.ab-on .ab-s p{transition:none}
  .js .wp .wf img{transform:none}
  .js .wp .wx>*{opacity:1;transform:none}
  .kn-trk{animation:none;display:block;width:auto;white-space:normal}
  .kn-half{flex-wrap:wrap;justify-content:center;padding-inline:var(--g)}
  .kn-half[aria-hidden]{display:none}
  .band .half span:nth-child(n+2){display:none}
  .kn-half li{font-size:clamp(30px,5vw,56px);padding-block:10px}
  .kn-mq{-webkit-mask-image:none;mask-image:none}
  .ck circle,.ck path{transition:none}
  .kt-bg{will-change:auto}
}

/* EN (08.10.): „Option A/B“ ist länger als „Weg A/B“ – auf dem Handy kürzerer Strich + engere Sperrung, damit das Label einzeilig bleibt. DE unverändert. */
@media(max-width:480px){
  :lang(en) .tab .k{gap:8px;letter-spacing:.14em;white-space:nowrap}
  :lang(en) .tab .k::before{width:14px}
  :lang(en) .tab[aria-selected=true] .k::before{width:22px}
}