/* ============================================================
   CHARLIER GOLF · v5 · Welt „Hell" (Dunkel als Umschalter: Instrument-Werte)
   Die Oberfläche hat keine eigene Farbe. Vier Werte, zwei Modi.
   Eine Schrift (Archivo 500), eine Mono-Ebene (Plex), eine Kurve.
   Das Filmmaterial und die Produktfotos sind die einzige Farbe.
   ============================================================ */

@font-face{font-family:Archivo;src:url("font/archivo-var.woff2")format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:Archivo;src:url("font/archivo-var-ext.woff2")format("woff2");font-weight:100 900;unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB;font-display:swap}
@font-face{font-family:Plex;src:url("font/plexmono-400.woff2")format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Plex;src:url("font/plexmono-400-ext.woff2")format("woff2");font-weight:400;unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB;font-display:swap}
@font-face{font-family:Plex;src:url("font/plexmono-500.woff2")format("woff2");font-weight:500;font-display:swap}

:root{
  /* ---- die Palette: vier Rollen. Dunkel ist der Grundzustand. ---- */
  --ink-rgb:10 11 12;   --ink:#0A0B0C;
  --paper-rgb:233 233 231; --paper:#E9E9E7;
  --grey:#888C91;
  --navc:#ABAFB4;
  --line:#24272B;
  --brand:#13A538;
  --focus:#13A538;
  --tile:#E9E9E7;
  color-scheme:dark;

  /* ---- Chrome-Geometrie ---- */
  --head:60px; --bar:0px; --rail:30px;

  /* ---- eine Kurve, eine Dauer-Familie ---- */
  --e:cubic-bezier(.16,1,.3,1);
  --t1:1100ms; --t2:520ms; --t3:240ms;

  /* ---- die Signatur: 45°-Eckkerbe ---- */
  --n:18px;

  /* ---- fluider Rhythmus ---- */
  --gut:clamp(1.125rem,2.4vw,2.25rem);
  --s1:clamp(.75rem,1.4vw,1.25rem);
  --s2:clamp(1.5rem,2.8vw,2.5rem);
  --s3:clamp(2.5rem,5vw,4.5rem);
  --s4:clamp(3.75rem,8vw,7rem);
  --s5:clamp(5rem,11vw,10rem);
}
:root[data-theme="light"]{
  --ink-rgb:243 242 238; --ink:#F3F2EE;
  --paper-rgb:10 11 12;  --paper:#0A0B0C;
  --grey:#5C6065;
  --navc:#3F4348;
  --line:#D6D5D0;
  --focus:#0D7F2B;
  --tile:#FFFFFF;
  --floor-a:#E4E6EA; --floor-b:#F7F8F9;
  color-scheme:light;
}

*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--ink);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth;scroll-padding-top:calc(var(--head) + 1rem)}
body{
  font-family:Archivo,system-ui,sans-serif;font-weight:500;
  font-variant-numeric:tabular-nums;
  background:var(--ink);color:var(--paper);
  overflow-x:hidden;
  padding:var(--head) 0 0 var(--rail);
  transition:background-color var(--t2) var(--e),color var(--t2) var(--e);
}
::selection{background:var(--paper);color:var(--ink)}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:var(--gut);top:-60px;z-index:100;background:var(--paper);color:var(--ink);padding:.6rem .8rem;font-size:.8125rem}
.skip:focus{top:calc(var(--head) + .5rem)}
[hidden]{display:none!important}
.only-light{display:none}
:root[data-theme="light"] .only-light{display:block}
:root[data-theme="light"] .only-dark{display:none}

/* ============ die Label-/Spec-Ebene. Mono lebt nur hier. ============ */
.m{font-family:Plex,ui-monospace,monospace;font-weight:400;font-size:.78125rem;line-height:1.5;letter-spacing:.05em;text-transform:uppercase;color:var(--grey);font-variant-numeric:tabular-nums}
.m--on{color:var(--paper);font-weight:500}
.cta .m,.note,.k.m dd,.menu__k,.eb>.m:last-child,.hero__eb>.m:last-child,.tags span,.tag{font-size:.875rem;letter-spacing:.04em}

/* ============ die Typo-Leiter. ein Gewicht. Größe + Tracking. ============ */
.d1{font-size:clamp(2.1rem,min(7.1vw,12.6svh),6.4rem);line-height:.9;letter-spacing:-.045em}
.d2{font-size:clamp(1.75rem,4.6vw,3.75rem);line-height:.94;letter-spacing:-.035em}
.d3{font-size:clamp(1.375rem,2.9vw,2.375rem);line-height:1.06;letter-spacing:-.025em}
.d4{font-size:clamp(1.0625rem,1.5vw,1.375rem);line-height:1.15;letter-spacing:-.015em}
.bd{font-size:clamp(1rem,1.08vw,1.0625rem);line-height:1.5;letter-spacing:-.015em;color:var(--grey)}
.bd--on{color:var(--paper)}
.bs{font-size:.875rem;line-height:1.55;letter-spacing:0;color:var(--grey)}
.bd a,.bs a{border-bottom:1px solid var(--line);transition:border-color var(--t3) var(--e),color var(--t3) var(--e)}
.bd a:hover,.bs a:hover{color:var(--paper);border-color:var(--paper)}
h1,h2,h3,h4{font-weight:500;text-wrap:balance}
.d1 .soft,.d2 .soft,.d3 .soft{color:var(--grey)}

/* ============ CHROME: Rail (links) ============ */
.rail{position:fixed;inset:0 auto 0 0;width:var(--rail);z-index:80;border-right:1px solid var(--line);background:var(--ink);overflow:hidden;transition:background-color var(--t2) var(--e)}
.rail__t{position:absolute;inset:0;
  background:repeating-linear-gradient(to bottom,var(--line) 0 1px,transparent 1px 13px),repeating-linear-gradient(to bottom,var(--line) 0 1px,transparent 1px 65px);
  background-size:7px 100%,15px 100%;background-position:100% 0,100% 0;background-repeat:repeat-y}
.rail__i{position:absolute;left:0;right:0;top:0;height:1px;background:var(--paper);will-change:transform}
.rail__i::before{content:"";position:absolute;left:0;top:-2px;width:5px;height:5px;background:var(--paper)}

/* ============ CHROME: Header ============ */
.head{position:fixed;top:0;left:var(--rail);right:0;height:var(--head);z-index:70;background:transparent;border-bottom:0;pointer-events:none;
  display:grid;grid-template-columns:1fr auto;column-gap:var(--s2);align-items:center;padding:0 var(--gut)}
.head>*{pointer-events:auto}
.pill{border-radius:999px;background:rgb(var(--ink-rgb)/.72);border:1px solid rgb(var(--paper-rgb)/.1);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:background-color var(--t2) var(--e),border-color var(--t2) var(--e)}
.mark{display:flex;align-items:center;gap:.65rem;width:max-content;padding:4px 12px 4px 5px}
.mark img{height:30px;width:30px}
.mark b{font-weight:500;font-size:.875rem;letter-spacing:-.015em;text-transform:uppercase;white-space:nowrap}
.nav{display:flex;gap:2px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:4px;font-family:Archivo,system-ui,sans-serif;font-size:.875rem;font-weight:500;letter-spacing:-.01em;text-transform:none}
.nav a{display:inline-flex;align-items:center;height:2.125rem;padding:0 .9rem;border-radius:999px;color:var(--navc);transition:color var(--t3) var(--e),background-color var(--t3) var(--e);white-space:nowrap}
.nav a:hover{color:var(--paper);background:rgb(var(--paper-rgb)/.06)}
.nav a[aria-current]{color:var(--paper);background:rgb(var(--paper-rgb)/.1)}
.head__r{display:flex;justify-content:flex-end;align-items:center;gap:var(--s1);padding:4px 5px 4px 14px}
.head__tel{white-space:nowrap;padding:.6rem 0;transition:color var(--t3) var(--e)}
.head__tel:hover{color:var(--paper)}
.tgl{display:flex;align-items:center;gap:.4rem;cursor:pointer;user-select:none;padding:.6rem 0}
.tgl__sl{color:var(--line)}
.tgl b{font-weight:400;color:var(--grey);transition:color var(--t3) var(--e)}
.tgl b[data-on]{color:var(--paper)}

/* Kerbe als Rahmen + Füllung, damit die 45°-Kante ihre Hairline behält */
.nb{background:var(--line);padding:1px;cursor:pointer;width:max-content;clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,0 100%);transition:background-color var(--t2) var(--e)}
.nb:hover{background:var(--grey)}
.nb__in{display:flex;align-items:center;gap:.55rem;padding:.6rem .7rem .55rem;min-height:2.25rem;background:var(--ink);clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,0 100%);transition:color var(--t2) var(--e),background-color var(--t2) var(--e)}
.nb:hover .nb__in{color:var(--paper)}
.nb--fill{background:var(--paper)}
.nb--fill .nb__in{background:var(--paper);color:var(--ink)}
.nb--fill:hover{background:var(--paper)}
.nb--fill:hover .nb__in{background:var(--ink);color:var(--paper)}
.nb__ic{display:grid;gap:3px}
.nb__ic i{display:block;width:13px;height:1px;background:currentColor;transition:transform var(--t2) var(--e)}
.nb[aria-expanded="true"] .nb__ic i:first-child{transform:translateY(2px) rotate(45deg)}
.nb[aria-expanded="true"] .nb__ic i:last-child{transform:translateY(-2px) rotate(-45deg)}
/* In der runden Kopf-Pille sitzen runde Schaltflaechen; die Kerbe bleibt ueberall sonst */
.head__r .nb{clip-path:none;border-radius:999px}
.head__r .nb__in{clip-path:none;border-radius:999px}

/* ============ MENÜ (Overlay) ============ */
.menu{position:fixed;inset:var(--head) 0 0 var(--rail);z-index:60;background:var(--ink);display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gut);padding:var(--s3) var(--gut);
  clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path var(--t2) var(--e),visibility 0s linear var(--t2);overflow:auto}
.menu[data-open]{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path var(--t2) var(--e),visibility 0s;overscroll-behavior:contain}
.menu__l{grid-column:1/span 7}
.menu__r{grid-column:8/span 5;display:flex;flex-direction:column;justify-content:flex-end;gap:var(--s2)}
.menu ol{counter-reset:mi;border-top:1px solid var(--line)}
.menu li{counter-increment:mi;border-bottom:1px solid var(--line)}
.menu li a{display:grid;grid-template-columns:3rem 1fr auto;align-items:baseline;gap:1rem;padding:.9rem 0;transition:color var(--t2) var(--e)}
.menu li a::before{content:counter(mi,decimal-leading-zero);font-family:Plex,ui-monospace,monospace;font-size:.75rem;letter-spacing:.06em;color:var(--grey)}
.menu li a::after{content:"↗";font-family:Plex,ui-monospace,monospace;font-size:.75rem;color:var(--line);transition:color var(--t2) var(--e),transform var(--t2) var(--e)}
.menu li a:hover::after,.menu li a[aria-current]::after{color:var(--paper);transform:translate(3px,-3px)}
.menu li a span{font-size:clamp(1.25rem,2.2vw,1.9rem);letter-spacing:-.025em;line-height:1.1;transition:transform var(--t2) var(--e)}
.menu:focus{outline:none}
.menu li a:hover span{transform:translateX(clamp(5px,.7vw,11px))}
.menu__k{display:grid;grid-template-columns:5.5rem 1fr;column-gap:1rem}
.menu__k dt,.menu__k dd{padding:.55rem 0;border-top:1px solid var(--line)}
.menu__k dt{color:var(--grey)}
.menu__k dd{color:var(--paper)}
.menu__k dd a{border-bottom:1px solid var(--line)}
.menu__k dd a:hover{border-color:var(--paper)}

/* ============ APERTURE — das einzige Gefäß für Film und Foto ============ */
.ap{position:relative;background:var(--line);padding:1px;clip-path:polygon(0 0,calc(100% - var(--n)) 0,100% var(--n),100% 100%,0 100%);transition:background-color var(--t2) var(--e)}
.ap__f{position:relative;height:100%;background:var(--ink);overflow:hidden;clip-path:polygon(0 0,calc(100% - var(--n) + 1px) 0,100% calc(var(--n) - 1px),100% 100%,0 100%)}
.ap__m{position:absolute;inset:0;transition:clip-path var(--t1) var(--e),transform var(--t2) var(--e)}
[data-js] .ap__m{clip-path:inset(0 100% 0 0)}
.in .ap__m,.ap--now .ap__m{clip-path:inset(0 0 0 0)}
.ap__m img,.ap__m video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%)}
.ap__m video{opacity:0;transition:opacity var(--t2) var(--e)}
.ap__m video[data-live]{opacity:1}
.ap--contain .ap__m img{object-fit:contain}
.ap--top .ap__m img,.ap--top .ap__m video{object-position:50% 15%}
.ap--left .ap__m img,.ap--left .ap__m video{object-position:20% 50%}
.ap--right .ap__m img,.ap--right .ap__m video{object-position:80% 50%}
.ap:hover .ap__m{transform:scale(1.025)}
.ap--lift{transition:transform var(--t2) var(--e),background-color var(--t2) var(--e)}
.ap--lift:hover .ap__m,.ap--lift:focus-within .ap__m{transform:scale(1.03)}
a.ap:focus-visible{outline-offset:4px}
.ap[style*="--ar"]{aspect-ratio:var(--ar)}
.ap--fill{flex:1 1 auto;min-height:460px}

/* ============ HERO ============ */
.hero{min-height:calc(100svh - var(--head));padding:clamp(1.125rem,3.1svh,2.25rem) var(--gut);display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:auto minmax(0,1fr);column-gap:var(--gut);row-gap:clamp(1.25rem,3.6svh,2.5rem);border-bottom:1px solid var(--line)}
.hero__eb{grid-column:1/-1;display:flex;justify-content:space-between;gap:1rem;padding-bottom:.7rem;border-bottom:1px solid var(--line)}
.hero__l{grid-column:1/span 7;display:flex;flex-direction:column;justify-content:space-between;gap:var(--s2);min-width:0}
.hero__b{display:flex;flex-direction:column;gap:clamp(1.25rem,3.4svh,2.25rem)}
.hero__r{grid-column:8/span 5;min-width:0;display:flex;flex-direction:column}
.hero__sub{max-width:44ch}
.hero__cta{display:flex;gap:.75rem;flex-wrap:wrap;align-items:center}
.hero__meta{display:flex;gap:0;border-top:1px solid var(--line)}
.hero__meta div{flex:1;padding:.7rem .9rem .1rem;min-width:0}
.hero__meta div:first-child{padding-left:0}
.hero__meta div+div{border-left:1px solid var(--line)}
.hero__meta b{display:block;font-weight:500;font-size:.8125rem;letter-spacing:-.01em;color:var(--paper);margin-top:.2rem}
.hero--sub{min-height:0;align-items:center}
.hero--sub .hero__r .ap{flex:none;aspect-ratio:16/10;height:auto}

/* ============ ABSCHNITTSRAHMEN ============ */
section{padding-inline:var(--gut)}
.sec{padding-top:var(--s4);padding-bottom:var(--s4)}
.sec--tight{padding-top:var(--s3);padding-bottom:var(--s3)}
.sec+.sec{padding-top:0}
.eb{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding-bottom:.7rem;border-bottom:1px solid var(--line)}
.lede{max-width:26ch;margin-top:var(--s2)}
.lede--w{max-width:38ch}
.g12{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gut);grid-auto-flow:row dense}
.c7{grid-column:1/span 7;min-width:0}.c5{grid-column:8/span 5;min-width:0}.cl5{grid-column:1/span 5;min-width:0}.cr7{grid-column:6/span 7;min-width:0}.cl4{grid-column:1/span 4;min-width:0}.cr8{grid-column:5/span 8;min-width:0}.c6{grid-column:span 6;min-width:0}.c12{grid-column:1/-1;min-width:0}.c4{grid-column:span 4;min-width:0}.c3{grid-column:span 3;min-width:0}.c8{grid-column:span 8;min-width:0}
.intro{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gut);row-gap:var(--s2);margin-top:var(--s2);align-items:end}
.intro>.d3,.intro>.d2{grid-column:1/span 7}
.intro>.bd{grid-column:8/span 5;max-width:44ch}

/* ============ SPEC-ZEILEN (Spezimenblatt) ============ */
.spec{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gut);align-items:start;padding-block:clamp(1.5rem,3vw,2.5rem);border-top:1px solid var(--line)}
.intro+.spec,.intro+.tiles,.intro+.disc__g,.intro+.num__g{margin-top:var(--s3)}
.spec__n{grid-column:1/span 1;color:var(--grey);transition:color var(--t2) var(--e)}
.spec__b{grid-column:2/span 6;display:flex;flex-direction:column;gap:.9rem;padding-top:.1rem;min-width:0;align-self:stretch}
.spec__a{grid-column:8/span 5;aspect-ratio:16/9}
.spec__a .ap{height:100%}
.spec:last-of-type,.spec--last{border-bottom:1px solid var(--line)}
.spec:hover .spec__n,[data-active].spec .spec__n{color:var(--paper)}
.spec__t{font-weight:500;transition:transform var(--t2) var(--e);transform-origin:left center}
.spec:hover .spec__t{transform:translateX(clamp(5px,.7vw,11px))}
.tags{display:flex;gap:.4rem;flex-wrap:wrap}
.tags span,.tag{border:1px solid var(--line);padding:.3rem .55rem .25rem;transition:border-color var(--t2) var(--e),color var(--t2) var(--e)}
.spec:hover .tags span{border-color:var(--grey);color:var(--paper)}
.k{display:grid;grid-template-columns:7rem 1fr;column-gap:1rem;margin-top:auto;padding-top:var(--s2)}
.k--now{margin-top:0;padding-top:0}
.k dt,.k dd{padding:.55rem 0;border-top:1px solid var(--line)}
.k dt{color:var(--grey)}
.k dd{color:var(--grey);transition:color var(--t2) var(--e)}
.k--on dd,.spec:hover .k dd{color:var(--paper)}
.k dd a{border-bottom:1px solid var(--line);transition:border-color var(--t3) var(--e)}
.k dd a:hover{border-color:var(--paper)}
.k--price{grid-template-columns:1fr auto}
.k--price dd{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.k--price dt{opacity:1}
.k--bd dt,.k--bd dd{font-family:Archivo,system-ui,sans-serif;font-size:clamp(1rem,1.08vw,1.0625rem);letter-spacing:-.015em;text-transform:none;line-height:1.4;padding:.7rem 0}
.spec__p{max-width:48ch}
.spec:hover .ap__m{transform:scale(1.025)}

/* ============ DISZIPLINEN-RASTER ============ */
.disc__g{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gut);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:var(--s3)}
.disc__c{grid-column:span 4;position:relative;padding:var(--s2) 0 var(--s3);min-width:0}
.disc__g--2 .disc__c{grid-column:span 6}
.disc__c+.disc__c::before{content:"";position:absolute;top:0;bottom:0;left:calc(var(--gut)/-2);width:1px;background:var(--line)}
.disc__c h3{font-weight:500;margin:.9rem 0 var(--s2);max-width:18ch;min-height:2.3em}
.disc__c ol{counter-reset:i}
.disc__c li{counter-increment:i;display:grid;grid-template-columns:2.25rem 1fr;align-items:baseline;padding:.55rem 0;border-top:1px solid var(--line);transition:color var(--t2) var(--e)}
.disc__c li::before{content:counter(i,decimal-leading-zero);font-family:Plex,ui-monospace,monospace;font-size:.75rem;letter-spacing:.06em;color:var(--line);transition:color var(--t2) var(--e)}
.disc__c li>span,.disc__c li>a{font-size:1rem;letter-spacing:-.01em;color:var(--grey);text-decoration:none;transition:color var(--t2) var(--e)}
.disc__c li>a:hover,.disc__c li>a:focus-visible{color:var(--paper)}
.disc__c:hover li>span,.disc__c:hover li>a{color:var(--paper)}
.disc__c:hover li::before{color:var(--grey)}
.disc__c .bd{margin-top:var(--s1);max-width:40ch}

/* ============ READOUTS ============ */
.num__g{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gut);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:var(--s3)}
.num__c{grid-column:span 3;position:relative;padding:var(--s2) 0;display:flex;flex-direction:column;gap:var(--s2);min-width:0}
.num__g--3 .num__c{grid-column:span 4}
.num__c+.num__c::before{content:"";position:absolute;top:0;bottom:0;left:calc(var(--gut)/-2);width:1px;background:var(--line)}
.num__c b{display:block;font-weight:500;letter-spacing:-.045em;line-height:.85;font-size:clamp(2.25rem,4.4vw,3.5rem);transition:clip-path var(--t1) var(--e);white-space:nowrap}
[data-js] .num__c b{clip-path:inset(0 0 100% 0)}
.num__c b small{font-size:.45em;letter-spacing:-.02em;color:var(--grey)}
.in .num__c b{clip-path:inset(0 0 0 0)}
.num__c p{margin-top:auto;max-width:24ch}
.tick{height:22px;position:relative;border-bottom:1px solid var(--line)}
.tick::before{content:"";position:absolute;inset:auto 0 0 0;height:100%;background:repeating-linear-gradient(to right,var(--line) 0 1px,transparent 1px 9px);background-size:100% 6px;background-position:0 100%;background-repeat:no-repeat}
.tick::after{content:"";position:absolute;left:0;bottom:0;width:1px;height:100%;background:var(--paper)}

/* ============ NOTCH-CTA ============ */
.cta{display:inline-block;width:max-content;max-width:100%;background:var(--paper);padding:1px;clip-path:polygon(0 0,calc(100% - 11px) 0,100% 11px,100% 100%,0 100%);vertical-align:middle}
.cta__in{display:flex;align-items:center;gap:2.75rem;padding:.95rem 1.15rem .85rem;background:var(--ink);color:var(--paper);clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%);transition:background-color var(--t2) var(--e),color var(--t2) var(--e)}
.cta .m{color:inherit;font-weight:500}
.cta:hover .cta__in,.cta:focus-visible .cta__in{background:var(--paper);color:var(--ink)}
.cta--fill .cta__in{background:var(--paper);color:var(--ink)}
.cta--fill:hover .cta__in,.cta--fill:focus-visible .cta__in{background:var(--ink);color:var(--paper)}
.cta--s .cta__in{gap:1.5rem;padding:.7rem .9rem .6rem}
.ctas{display:flex;gap:.75rem;flex-wrap:wrap;align-items:center}

/* ============ MARQUEE (Marken) ============ */
.mq{overflow:hidden;border-block:1px solid var(--line);padding-block:1.6rem;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.mq__t{display:flex;gap:clamp(2.5rem,6vw,5.5rem);width:max-content;animation:mq 40s linear infinite;align-items:center}
.mq:hover .mq__t{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
.mq__i{display:flex;align-items:center;height:28px;flex:none;white-space:nowrap;color:var(--grey);transition:color var(--t2) var(--e)}
.mq__i img{height:100%;width:auto;max-width:160px;object-fit:contain;opacity:.85}
:root[data-theme="light"] .mq__i img{filter:invert(1) hue-rotate(180deg)}
.mq__i--t{font-size:clamp(1.1rem,1.6vw,1.45rem);letter-spacing:-.03em}
.mq__i--foresight img{height:16px}
.mq__i--titleist img{height:20px}
.mq__i--diamana img{height:15px}
.mq__i--tensei img{height:11px}

/* ============ MARKEN-RASTER: echte Logos auf heller Kachel ============ */
.brands{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;padding:1px;margin-top:var(--s3)}
.brands--4{grid-template-columns:repeat(4,1fr)}
.brands li{background:var(--ink);aspect-ratio:3/2;position:relative;min-width:0;overflow:hidden;box-shadow:0 0 0 1px var(--line);transition:background-color var(--t2) var(--e)}
/* Logos liegen direkt auf dem Grund; einfarbige/zweifarbige Logos werden im Dunkelmodus invertiert (Farbton bleibt), Mizuno/Foresight/EVO bleiben wie sie sind */
:root:not([data-theme="light"]) .brands img[data-inv]{filter:invert(1) hue-rotate(180deg)}
.brands img{position:absolute;inset:0;margin:auto;width:auto;height:auto;max-width:64%;max-height:56%;object-fit:contain;display:block;transition:transform var(--t2) var(--e)}
.brands li:hover img{transform:scale(1.04)}
.brands li.brands__t{background:var(--ink);padding:.9rem 1rem;align-content:center;justify-items:start;gap:.4rem}
.brands li.brands__t span{display:block}

/* ============ PLAN (Elektroplan des neuen Studios, animierte Strichzeichnung) ============ */
.plan{position:relative;width:100%;aspect-ratio:582/776;overflow:hidden}
.plan svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.plan .wall path{fill:var(--paper);fill-opacity:.16;stroke:var(--paper);stroke-width:.6;stroke-opacity:.85;opacity:0;transition:opacity 1.2s var(--e)}
.plan .ln path{fill:none;stroke:var(--grey);stroke-width:.7;stroke-dasharray:1;stroke-dashoffset:1}
.plan .ln path[fill]{fill:var(--grey);fill-opacity:.55;stroke:none;opacity:0;transition:opacity .8s var(--e) 1.4s}
.plan .ctx path{fill:none;stroke:var(--line);stroke-width:.6}
.plan .dim path{fill:none;stroke:var(--grey);stroke-opacity:.4;stroke-width:.5;stroke-dasharray:1;stroke-dashoffset:1}
.plan .dim path[fill]{fill:var(--grey);fill-opacity:.4;stroke:none;opacity:0;transition:opacity .6s var(--e) 2.2s}
.plan .el path{fill:none;stroke:var(--brand);stroke-width:.9;stroke-dasharray:1;stroke-dashoffset:1}
.plan .el path[fill]{fill:var(--brand);stroke:none;opacity:0;transition:opacity .6s var(--e) 3s}
.in .plan .wall path{opacity:1}
.in .plan .ln path{animation:draw 1.6s var(--e) forwards;animation-delay:calc(.3s + var(--d,0)*1s)}
.in .plan .ln path[fill],.in .plan .dim path[fill],.in .plan .el path[fill]{opacity:1}
.in .plan .dim path{animation:draw 1.4s var(--e) 1.6s forwards}
.in .plan .el path{animation:draw 1.6s var(--e) 2.1s forwards}
.plan::after{content:"";position:absolute;top:0;bottom:0;left:0;width:1px;background:var(--paper);opacity:0;pointer-events:none}
.in .plan::after{animation:scan 2.8s var(--e) .2s 1}
@keyframes draw{to{stroke-dashoffset:0}}
/* ============ Atempause: vollbreite Landschaft ohne Text ============ */
.pause{padding:var(--s3) var(--gut) 0}
.pause .ap{aspect-ratio:21/9}

/* ============ Vollbild-Hero (Startseite): Medium unter dem Text, kein Rahmen ============ */
.hero--full{position:relative;display:block;min-height:calc(100svh - var(--head));padding:0;color:#fff;isolation:isolate;border-bottom:0}
.hero--full .hero__media{position:absolute;inset:0;overflow:hidden;background:#0A0B0C}
.hero--full .hero__media img,.hero--full .hero__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.hero--full .hero__media video{opacity:0;transition:opacity var(--t1) var(--e)}
.hero--full .hero__media video[data-live]{opacity:1}
.hero--full .hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgb(10 11 12/.55) 0,transparent 30%,transparent 52%,rgb(10 11 12/.66) 100%)}
.hero--full .hero__l{position:absolute;left:var(--gut);right:var(--gut);bottom:var(--s3);z-index:2;display:grid;gap:var(--s2);max-width:min(64rem,100%)}
.hero--full .d1{color:#fff;font-size:clamp(2.1rem,min(6.6vw,12.6svh),6rem)}
.hero--full .hero__sub{color:rgb(255 255 255/.86);max-width:52ch}
.hero--full .cta{background:rgb(255 255 255/.9)}
.hero--full .cta .cta__in{background:rgb(10 11 12/.62);color:#fff}
.hero--full .cta:hover .cta__in,.hero--full .cta:focus-visible .cta__in{background:#fff;color:#0A0B0C}
.hero--full .cta--fill .cta__in{background:#fff;color:#0A0B0C}
.hero--full .cta--fill:hover .cta__in,.hero--full .cta--fill:focus-visible .cta__in{background:rgb(10 11 12/.72);color:#fff}

@keyframes scan{0%{left:0;opacity:.9}85%{opacity:.6}100%{left:100%;opacity:0}}
.plan__lg{display:flex;gap:1.2rem;flex-wrap:wrap;margin-top:var(--s1)}
.plan__lg span{display:flex;align-items:center;gap:.5rem}
.plan__lg i{display:inline-block;width:14px;height:0;border-top:1.5px solid var(--grey)}
.plan__lg i.w{border-top:3px solid var(--paper);opacity:.6}
.plan__lg i.e{border-top:1.5px solid var(--brand)}
html[data-shot] .plan path,.plan.plan--now path{animation:none!important;stroke-dashoffset:0!important;opacity:1!important}
html[data-shot] .plan::after{display:none}

/* ============ KACHELN 3:4 (Titleist-Auswahlhilfen) ============ */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);column-gap:var(--gut);row-gap:var(--s2);margin-top:var(--s3)}
.tile{display:block}
.tile .ap{aspect-ratio:3/4}
.tile__t{padding-top:.8rem}
.tile__t .m{display:block;margin-top:.4rem;color:var(--grey)}
.tile h3{font-size:clamp(1.25rem,2vw,1.75rem);letter-spacing:-.03em;line-height:1}

/* ============ PRODUKT-DREIER (Imola-Gimmick, Instrument-Kleid) ============ */
.trio{position:relative;display:grid;grid-template-columns:repeat(3,1fr);align-items:end;justify-items:center;min-height:clamp(380px,48vw,640px);margin-top:var(--s3);padding:var(--s3) 2% var(--s2)}
:root[data-theme="light"] .trio{background:radial-gradient(78% 48% at 50% 70%,var(--floor-a) 0 34%,transparent 64%)}
:root:not([data-theme="light"]) .trio{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
:root[data-theme="light"] .trio::after{content:"";position:absolute;left:0;right:0;bottom:0;height:38%;background:radial-gradient(60% 82% at 50% 44%,var(--floor-b) 0 26%,transparent 68%);pointer-events:none}
:root[data-theme="light"] .prod{z-index:1}
:root[data-theme="light"] .prod:hover,:root[data-theme="light"] .prod:focus-visible,:root[data-theme="light"] .prod[aria-expanded="true"]{z-index:6}
:root[data-theme="light"] .prod::before{content:"";position:absolute;left:18%;right:18%;bottom:calc(1rem + 1.25rem);height:16px;border-radius:50%;background:rgb(10 11 12/.16);filter:blur(10px);z-index:-1;transition:transform var(--t2) var(--e),opacity var(--t2) var(--e)}
:root[data-theme="light"] .prod:hover::before,:root[data-theme="light"] .prod:focus-visible::before{transform:scaleX(1.08);opacity:.85}
:root[data-theme="light"] .prod img{filter:none;object-position:50% 100%}
:root[data-theme="light"] .prod__dot{box-shadow:0 0 0 4px rgb(255 255 255/.85)}
:root[data-theme="light"] .prod__dot::after{background:#fff}
:root[data-theme="light"] .prod:last-child .prod__dot{top:60%}
:root[data-theme="light"] .prod:last-child .prod__card{top:64%}
:root[data-theme="light"] .prod__card>span{background:var(--paper);color:var(--ink)}
:root[data-theme="light"] .prod__card .m,:root[data-theme="light"] .prod__line{color:rgb(var(--ink-rgb)/.72)}
:root[data-theme="light"] .prod__card .m--on{color:var(--ink)}
.prod{position:relative;width:100%;text-align:center;color:inherit;display:grid;justify-items:center;gap:1rem}
.prod img{height:clamp(300px,40vw,560px);width:auto;max-width:100%;object-fit:contain;filter:drop-shadow(0 28px 30px rgb(0 0 0/.55));transition:transform var(--t2) var(--e),filter var(--t2) var(--e)}
.prod:hover img,.prod:focus-visible img,.prod[aria-expanded="true"] img{transform:translateY(-10px) scale(1.02)}
.prod__dot{position:absolute;top:38%;left:50%;width:22px;height:22px;margin-left:-11px;border-radius:50%;background:var(--paper);box-shadow:0 0 0 5px rgb(var(--paper-rgb)/.22);pointer-events:none;transition:transform var(--t2) var(--e)}
.prod__dot::after{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--ink)}
.prod:hover .prod__dot{transform:scale(1.12)}
.prod__card{position:absolute;top:42%;left:50%;width:min(280px,80vw);transform:translate(12px,14px);text-align:left;opacity:0;visibility:hidden;transition:opacity var(--t2) var(--e),transform var(--t2) var(--e),visibility var(--t2);z-index:5;
  background:var(--paper);padding:1px;clip-path:polygon(0 0,calc(100% - 11px) 0,100% 11px,100% 100%,0 100%)}
.prod__card>span{display:grid;gap:.5rem;background:var(--ink);padding:.9rem 1rem 1rem;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%)}
.prod:hover .prod__card,.prod:focus-visible .prod__card,.prod[aria-expanded="true"] .prod__card{opacity:1;visibility:visible;transform:translate(12px,0)}
.prod:last-child .prod__card{left:auto;right:50%;transform:translate(-12px,14px)}
.prod:last-child:hover .prod__card,.prod:last-child:focus-visible .prod__card,.prod:last-child[aria-expanded="true"] .prod__card{transform:translate(-12px,0)}
.trio{overflow-x:clip}
.prod__name{font-size:1rem;letter-spacing:-.02em;line-height:1.15}
.prod__line{font-size:.8125rem;line-height:1.45;color:var(--grey)}
.prod__lbl{font-size:.8125rem;letter-spacing:-.01em;color:var(--grey);transition:color var(--t2) var(--e)}
.prod:hover .prod__lbl{color:var(--paper)}

/* ============ GRIFFWAHL ============ */
.grips{display:grid;grid-template-columns:repeat(5,1fr);gap:.75rem;align-items:end;justify-items:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:var(--s2) 0 var(--s2)}
.grip{display:grid;gap:1rem;justify-items:center;color:var(--grey);width:100%;padding:.5rem 0;transition:color var(--t2) var(--e)}
.grip img{height:clamp(200px,30vw,440px);width:auto;filter:drop-shadow(0 18px 24px rgb(0 0 0/.55));transition:transform var(--t2) var(--e)}
:root[data-theme="light"] .grip img{filter:drop-shadow(0 14px 20px rgb(0 0 0/.28))}
.grip:hover img,.grip:focus-visible img,.grip[aria-pressed="true"] img{transform:translateY(-10px)}
.grip[aria-pressed="true"]{color:var(--paper)}
.grip .m{display:flex;align-items:center;gap:.5rem;color:inherit}
.grip__sw{width:8px;height:8px;border-radius:50%;display:inline-block}

/* ============ AKKORDEON ============ */
.acc{border-top:1px solid var(--line);margin-top:var(--s3)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{list-style:none;cursor:pointer;padding:1.2rem 0;display:grid;grid-template-columns:3rem 1fr auto;gap:1rem;align-items:baseline}
.acc summary::-webkit-details-marker{display:none}
.acc summary .m{color:var(--grey)}
.acc summary b{font-weight:500;transition:transform var(--t2) var(--e);transform-origin:left center}
.acc summary:hover b{transform:translateX(clamp(5px,.7vw,11px))}
.acc summary i{font-style:normal;font-family:Plex,ui-monospace,monospace;font-size:.875rem;color:var(--grey);width:1.2rem;text-align:right}
.acc details[open] summary i::before{content:"−"}
.acc details:not([open]) summary i::before{content:"+"}
.acc .bd{padding:0 0 1.4rem 4rem;max-width:60ch}

/* ============ SCHRITTE ============ */
.steps{border-top:1px solid var(--line);margin-top:var(--s2)}
.steps li{display:grid;grid-template-columns:3rem 1fr;gap:1rem;padding:.9rem 0;border-bottom:1px solid var(--line);align-items:baseline}
.steps li span:last-child{font-family:Archivo,system-ui,sans-serif;text-transform:none;font-size:clamp(1rem,1.08vw,1.0625rem);letter-spacing:-.015em;line-height:1.5;color:var(--grey)}

/* ============ BANNER-APERTURE (vollbreit) ============ */
.bnr{margin-top:var(--s3)}
.bnr .ap{aspect-ratio:2.78/1}
.bnr--tall .ap{aspect-ratio:2040/600}
.bnr--photo .ap{aspect-ratio:16/9}
.bnr--stage .ap{aspect-ratio:2.4/1}
/* top+height statt eines 4-seitigen inset: bei position:absolute mit allen 4 Seiten gesetzt
   ist die Box eines Replaced Element (img) mehrdeutig — Browser bemessen dann nach der
   intrinsischen Bildgröße statt nach der inset-Box, egal ob width/height auto oder 100% ist.
   left:0/right:0/margin:auto zentrieren width:min(62%,1000px) innerhalb der so verbleibenden
   Breite — nie breiter als ~1000 CSS-Px, auch nicht bei sehr breiten Viewports (Retina-Regel,
   siehe Brief; ein einfaches left:19% wie zuvor skaliert mit dem Viewport unbegrenzt mit). */
.bnr--stage .ap__m img{object-fit:contain;object-position:50% 100%;top:7%;left:0;right:0;margin:0 auto;width:min(62%,1000px);height:93%;filter:drop-shadow(0 28px 30px rgb(0 0 0/.55));z-index:1}
/* Licht: kein Schlagschatten (Kontaktschatten statt Schlagschatten, wie .prod es macht) —
   .prod img{filter:none} im Hellmodus, hier genauso; die Ellipse ::after unten übernimmt
   Position/Größe/Deckkraft wortgleich von :root[data-theme="light"] .prod::before. */
:root[data-theme="light"] .bnr--stage .ap__m img{filter:none}
:root[data-theme="light"] .bnr--stage .ap__f::after{content:"";position:absolute;left:50%;bottom:calc(1rem + 1.25rem);transform:translateX(-50%);width:56%;height:16px;border-radius:50%;background:rgb(10 11 12/.16);filter:blur(10px);z-index:0;pointer-events:none}
:root[data-theme="light"] .bnr--stage .ap__f{background:radial-gradient(78% 48% at 50% 70%,var(--floor-a) 0 34%,transparent 64%)}
:root:not([data-theme="light"]) .bnr--stage .ap__f{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.bnr__tx{display:flex;justify-content:space-between;align-items:center;gap:var(--s2);padding-top:.9rem}
.bnr__tx h3{font-weight:500;text-wrap:balance}
.bnr__tx>.m{color:var(--grey)}

/* ============ FOOTER ============ */
footer{padding:var(--s4) var(--gut) var(--s2);border-top:1px solid var(--line)}
.foot__g{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gut);align-items:end;row-gap:var(--s3)}
.foot__l{grid-column:1/span 6;display:flex;flex-direction:column;gap:var(--s2);min-width:0}
.foot__r{grid-column:8/span 5;min-width:0}
.foot__r .ap{aspect-ratio:4/3}
footer h2{font-weight:500;text-wrap:balance;margin-top:.9rem}
.foot__nav{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gut);row-gap:var(--s2);margin-top:var(--s4);padding-top:var(--s2);border-top:1px solid var(--line)}
.foot__nav>div{grid-column:span 3;min-width:0}
.foot__nav h3{font-weight:500;font-size:.8125rem;letter-spacing:-.01em;margin-bottom:.6rem}
.foot__nav li{padding:.1rem 0}
.foot__nav li a{display:inline-block;padding:.35rem 0}
.foot__nav li a{color:var(--grey);font-size:.9375rem;letter-spacing:-.015em;transition:color var(--t3) var(--e)}
.foot__nav li a:hover{color:var(--paper)}
.foot__nav address{font-style:normal;color:var(--grey);font-size:.9375rem;line-height:1.55;letter-spacing:-.015em}
.foot__nav address a{border-bottom:1px solid var(--line)}
.foot__end{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:var(--s3);padding:.9rem 0;border-top:1px solid var(--line)}
.foot__end .tgl{margin-left:auto}

/* ============ TEXTSEITEN (Impressum, Datenschutz, AGB) ============ */
.prose{max-width:68ch}
.prose h2{font-size:clamp(1.375rem,2.9vw,2.375rem);line-height:1.06;letter-spacing:-.025em;margin:var(--s3) 0 var(--s1)}
.prose h3{font-size:clamp(1.0625rem,1.5vw,1.375rem);line-height:1.15;letter-spacing:-.015em;margin:var(--s2) 0 .6rem}
.prose p,.prose li{font-size:clamp(1rem,1.08vw,1.0625rem);line-height:1.55;letter-spacing:-.015em;color:var(--grey)}
.prose p+p{margin-top:.9rem}
.prose ul{margin:.6rem 0 .6rem 1.1rem;list-style:square}
.prose li{margin:.25rem 0}
.prose a{color:var(--paper);border-bottom:1px solid var(--line)}
.prose a:hover{border-color:var(--paper)}
.prose .k{margin-top:var(--s2);padding-top:0}
.prose .k dd{color:var(--paper)}
.note{display:inline-flex;align-items:center;gap:.6rem;margin-top:var(--s2);padding:.5rem .7rem;border:1px dashed var(--line)}
.note::before{content:"";width:6px;height:6px;background:var(--grey);clip-path:polygon(0 0,100% 0,100% 100%)}

/* ============ Reveal — Opacity + Transform + Clip. Sonst nichts. ============ */
[data-js] [data-rv]{opacity:0;transform:translateY(10px);transition:opacity var(--t1) var(--e),transform var(--t1) var(--e)}
[data-rv].in{opacity:1;transform:none}
/* Wort-Reveal (v3-Gimmick, eine Kurve) nur auf Display-Zeilen */
[data-js] [data-wr] .w{display:inline-block;opacity:0;filter:blur(4px);transform:translateY(10px);transition:opacity .6s var(--e),filter .6s var(--e),transform .6s var(--e);transition-delay:calc(var(--i,0)*30ms)}
[data-wr].in .w{opacity:1;filter:blur(0);transform:none}

/* ============ Router-Seiten (Einzeldatei) ============ */
main[data-page]{display:block}
main[data-page][hidden]{display:none!important}
@keyframes pageIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
main.page-in{animation:pageIn var(--t2) var(--e) both}

/* ============ 1600 und mehr ============ */
@media(min-width:1600px){:root{--gut:2.75rem;--head:64px;--rail:36px}}

/* ============ Kopf: die zentrierte Pille braucht beide Flanken frei ============ */
/* Gemessen 2026-09-03 (marken.html und index.html, 760-1920px): mit Telefonnummer
   bleiben zwischen Nav-Pille und rechter Pille bei 1480-1507px unter 16px Luft.
   Darum die Nummer erst ab 1700px; ohne sie sind es bei 1320px schon 72px. */
@media(max-width:1699px){
  .head__tel{display:none}
}
/* Gemessen 2026-09-03 (index.html?shot=1, .nav testweise erzwungen sichtbar,
   Breiten 1080-1319px): gapL (Marke bis Nav) bleibt überall > 100px, gapR
   (Nav bis rechte Pille) unterschreitet 16px unter 1200px (0px bei 1160px,
   -36px bei 1080px) und liegt ab 1200px bei 18px. Darum die Nav-Pille erst
   ab 1200px zeigen, nicht erst ab 1319px. */
@media(max-width:1199px){
  .nav{display:none}
}

/* ============ Tablet ============ */
@media(max-width:1080px){
  .hero{grid-template-columns:1fr;row-gap:var(--s2)}
  .hero__l,.hero__r{grid-column:1/-1}
  .spec{grid-template-columns:2.5rem minmax(0,1fr);row-gap:var(--s2)}
  .spec__n{grid-column:1}.spec__b{grid-column:2}.spec__a{grid-column:1/-1}
  .k{padding-top:var(--s1)}
  .disc__g{grid-template-columns:1fr}
  .disc__c,.disc__g--2 .disc__c{grid-column:1;padding-block:var(--s2)}
  .disc__c+.disc__c{border-top:1px solid var(--line)}
  .disc__c+.disc__c::before{display:none}
  .num__g{grid-template-columns:repeat(6,1fr)}
  .num__c,.num__g--3 .num__c{grid-column:span 3}
  .num__c:nth-child(odd)::before{display:none}
  .num__c:nth-child(n+3){border-top:1px solid var(--line)}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .brands,.brands--4{grid-template-columns:repeat(3,1fr)}
  .intro>.d3,.intro>.d2,.intro>.bd{grid-column:1/-1}
  .c7,.c5,.c6,.c4,.c3,.c8,.cl5,.cr7,.cl4,.cr8{grid-column:1/-1}
  .g12{row-gap:var(--s2)}
  .foot__l,.foot__r{grid-column:1/span 12}
  .foot__nav>div{grid-column:span 6}
  .menu{grid-template-columns:1fr;row-gap:var(--s3)}
  .menu__l,.menu__r{grid-column:1/-1}
}

/* ============ Mobil ============ */
@media(max-width:760px){
  :root{--head:56px;--rail:22px;--n:14px}
  .mark{padding:3px 10px 3px 4px}
  .mark img{height:26px;width:26px}
  .head__r{padding:3px 4px 3px 10px}
  .mark,.head__r .nb .nb__in{min-height:44px}   /* Tippziele 44px (Audit 2026-09-03): Logo-Pille, Termin, Menü */
  #menuBtn .nb__in{min-width:44px;justify-content:center}
  .bs{font-size:1rem;line-height:1.5}           /* Lesetext nie unter 16px auf dem Handy */
  .foot__nav li a{padding:.5rem 0}              /* Fußzeilen-Links mit mehr Zeilenhöhe */
  .hero--full .hero__media img,.hero--full .hero__media video{object-position:50% 45%}
  .hero--full .hero__l{bottom:var(--s2);gap:var(--s1)}
  .hero__meta{flex-direction:column}
  .hero__meta div+div{border-left:0;border-top:1px solid var(--line)}
  .hero__meta div{padding:.6rem 0 .5rem}
  .hero__eb span:last-child{display:none}
  .num__g{grid-template-columns:1fr}
  .num__c,.num__g--3 .num__c{grid-column:1}
  .num__c+.num__c{border-top:1px solid var(--line)}
  .num__c+.num__c::before{display:none}
  .eb,.hero__eb{flex-wrap:wrap;row-gap:.25rem}
  .eb>.m:first-child,.hero__eb>.m:first-child{white-space:nowrap}
  .head .tgl{display:none}
  #menuBtn .nb__in>span:first-child{display:none}
  .k:not(.k--price){grid-template-columns:5.5rem 1fr}
  .eb>.m:last-child{display:none}
  .spec .k{display:none}
  .ap--fill{min-height:0;aspect-ratio:4/3;flex:none;width:100%}
  .cta__in{gap:1.75rem}
  .tiles{grid-template-columns:1fr 1fr;column-gap:.75rem}
  .brands,.brands--4{grid-template-columns:repeat(2,1fr)}
  .trio{grid-template-columns:1fr;gap:var(--s3);min-height:0;padding-inline:0}
  .prod img{height:260px}
  :root[data-theme="light"] .prod::before{left:26%;right:26%;height:10px;bottom:auto;top:calc(260px - 8px)}
  .prod__dot{display:none}
  .prod__card{position:static;transform:none!important;opacity:1;visibility:visible;width:100%;margin-top:.5rem}
  .grips{gap:.35rem}
  .grip img{height:180px}
  .grip .m span{display:none}
  .acc summary{grid-template-columns:2.2rem 1fr auto}
  .acc .bd{padding-left:0}
  .bnr .ap,.bnr--tall .ap{aspect-ratio:16/10}
  .bnr--type .ap{aspect-ratio:2040/600}
  .bnr--type .ap__m img{object-fit:contain;background:var(--floor-b,var(--ink))}
  .bnr--stage .ap{aspect-ratio:4/3}
  .bnr--stage .ap__m img{top:8%;left:0;right:0;margin:0 auto;width:min(92%,1000px);height:92%}
  .bnr__tx{flex-direction:column;align-items:flex-start;gap:var(--s1)}
  .pause .ap{aspect-ratio:4/5}
  .foot__end{flex-direction:column;gap:.4rem}
  .foot__end .tgl{margin-left:0}
  .foot__nav>div{grid-column:span 12}
  .menu{padding:var(--s2) var(--gut)}
  .menu li a{padding:.7rem 0}
}

/* ============ Reduzierte Bewegung ============ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  video{display:none!important}
  [data-rv]{opacity:1!important;transform:none!important}
  [data-wr] .w{opacity:1!important;filter:none!important;transform:none!important}
  .ap__m{clip-path:none!important;transform:none!important}
  .num__c b{clip-path:none!important}
  .mq__t{animation:none!important}
  .plan path{animation:none!important;stroke-dashoffset:0!important;opacity:1!important}
  .plan::after{display:none}
}

/* ============ Screenshot-Modus (?shot): alles sichtbar, Hero auf 800px-Viewport gerechnet ============ */
html[data-shot] [data-rv],html[data-shot] [data-wr] .w{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
html[data-shot] .ap__m,html[data-shot] .num__c b{clip-path:none!important;transition:none!important}
html[data-shot] .hero--full{min-height:800px!important}
html[data-shot] .hero:not(.hero--sub){min-height:calc(800px - var(--head))!important}
html[data-shot] video{display:none!important}
html[data-shot] .mq__t{animation:none!important}