/* ==========================================================================
   Walid Dawood — Portfolio 2026 · Horizontal Edition
   Jede Sektion hat ihre eigene Fläche. GSAP blendet die Farben um.
   ========================================================================== */

@font-face{font-family:"Bric";src:url("../fonts/bricolage-latin.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap;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:"Bric";src:url("../fonts/bricolage-latin-ext.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap;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:"Jost";src:url("../fonts/jost-latin.woff2") format("woff2");font-weight:200 700;font-style:normal;font-display:swap;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:"Jost";src:url("../fonts/jost-latin-ext.woff2") format("woff2");font-weight:200 700;font-style:normal;font-display:swap;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}

/* ---------------- CI ---------------- */
:root{
  --ink:#121212;
  --ink-2:#1A1A1A;
  --paper:#FDFBF7;
  --cream:#EDE3D8;
  --orange:#E8541C;
  --orange-deep:#C9440F;
  --orange-2:#FF7A3D;

  /* Fixe Oberflaeche – wird von GSAP getweent */
  --ui-bg:#121212;
  --ui-ink:#FDFBF7;
  --ui-soft:#8E8C87;
  --ui-line:rgba(253,251,247,.2);
  --ui-accent:#FF7A3D;
  --ui-veil:rgba(18,18,18,.92);
  --ui-chip:rgba(253,251,247,.10);

  --gutter:clamp(22px,5vw,96px);
  --panel-pad:clamp(26px,6vh,70px);
  --r:16px;
  --r-l:26px;
  --ease:cubic-bezier(.22,1,.36,1);
  --head-h:14px;
  --pdf-w:clamp(192px,14vw,236px);
  --rail:46px;
}

/* ---------------- Flaechen pro Sektion ---------------- */
.pnl{
  --c-bg:var(--ink); --c-ink:var(--paper); --c-soft:#8E8C87; --c-text:#8E8C87;
  --c-line:rgba(253,251,247,.14); --c-line-2:rgba(253,251,247,.3);
  --c-accent:#FF7A3D; --c-card:rgba(253,251,247,.05); --c-solid:var(--cream);
  background:var(--c-bg); color:var(--c-soft);
}
.pnl[data-bg="ink2"]{--c-bg:var(--ink-2);--c-card:rgba(253,251,247,.065)}
.pnl[data-bg="cream"]{
  --c-bg:var(--cream); --c-ink:var(--ink); --c-soft:#6E6A64; --c-text:#4A4741;
  --c-line:rgba(18,18,18,.16); --c-line-2:rgba(18,18,18,.3);
  --c-accent:var(--orange-deep); --c-card:rgba(18,18,18,.035); --c-solid:#FFFFFF;
}
.pnl[data-bg="paper"]{
  --c-bg:var(--paper); --c-ink:var(--ink); --c-soft:#6E6A64; --c-text:#4A4741;
  --c-line:rgba(18,18,18,.13); --c-line-2:rgba(18,18,18,.3);
  --c-accent:var(--orange-deep); --c-card:rgba(18,18,18,.03); --c-solid:#FFFFFF;
}
.pnl[data-bg="orange"]{
  --c-bg:var(--orange-deep); --c-ink:#FFFFFF; --c-soft:#FFFFFF; --c-text:#FFFFFF;
  --c-line:rgba(255,255,255,.32); --c-line-2:rgba(255,255,255,.55);
  --c-accent:#FFFFFF; --c-card:rgba(255,255,255,.13); --c-solid:#FFFFFF;
}
/* Naht zwischen den Flaechen: der Schatten faellt immer auf die helle Seite,
   sonst waere er auf Schwarz unsichtbar */
.pnl{--seam:.26;--seam-w:clamp(70px,7vw,130px)}
.pnl + .pnl::before{content:"";position:absolute;left:0;top:0;bottom:0;z-index:3;pointer-events:none;
  --seam-fade:#000 0%,rgba(0,0,0,.72) 8%,rgba(0,0,0,.46) 20%,rgba(0,0,0,.24) 38%,rgba(0,0,0,.09) 60%,rgba(0,0,0,.02) 82%,transparent 100%;
  width:var(--seam-w);background:#000;opacity:var(--seam);
  -webkit-mask-image:linear-gradient(to right,var(--seam-fade));
  mask-image:linear-gradient(to right,var(--seam-fade))}
.pnl + .pnl[data-bg="ink"]::before{left:calc(var(--seam-w) * -1);
  -webkit-mask-image:linear-gradient(to left,var(--seam-fade));
  mask-image:linear-gradient(to left,var(--seam-fade))}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--ui-soft);
  font-family:"Jost",system-ui,sans-serif;font-size:clamp(.95rem,.9rem + .2vw,1.05rem);
  line-height:1.65;font-weight:300;-webkit-font-smoothing:antialiased;overflow-x:clip;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--orange);color:#fff}
/* Die Seite wird gezogen: nichts markieren, keine Bilder mitziehen. Rechtstexte bleiben kopierbar. */
.hz,.rail,.mob,.hdr,.pdfx,.wvy{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.hz :is(input,textarea),.mob :is(input,textarea){-webkit-user-select:text;user-select:text}
.hz img,.hz svg,.rail img,.rail svg,.mob img,.mob svg{-webkit-user-drag:none}
:focus-visible{outline:2px solid var(--orange);outline-offset:4px;border-radius:4px}
.skip{position:fixed;left:calc(var(--rail) + 12px);top:12px;z-index:400;background:var(--orange-deep);color:#fff;
  padding:1em 1.6em;transform:translateY(-200%)}
.skip:focus{transform:none}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(142,140,135,.5);border-radius:4px}

/* ---------------- Typo ---------------- */
h1,h2{font-family:"Bric",system-ui,sans-serif;font-weight:300;color:var(--c-ink);margin:0 0 .4em;
  line-height:.92;letter-spacing:-.04em}
h3{font-family:"Bric",system-ui,sans-serif;font-weight:400;color:var(--c-ink);margin:0 0 .4em;
  line-height:1.04;letter-spacing:-.025em}
h1{font-size:clamp(2.6rem,min(8vw,11.4vh),9rem)}
h2{font-size:clamp(2.3rem,5.2vw,5rem)}
h3{font-size:clamp(1.4rem,2.2vw,2.2rem);line-height:1.08}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
em{font-style:normal;color:var(--orange-2)}
.lbl{font-family:"Jost",sans-serif;font-size:clamp(.6rem,.68vw,.72rem);font-weight:400;
  letter-spacing:.3em;text-transform:uppercase;color:var(--c-soft);line-height:1.9}
.lbl--orange{color:var(--c-accent)}
.num{font-family:"Bric",system-ui,sans-serif;font-weight:300;letter-spacing:-.04em;font-size:clamp(2.6rem,5vw,4.6rem);line-height:1;color:var(--c-ink)}
.lead{font-size:clamp(1rem,.95rem + .4vw,1.25rem);color:var(--c-text);max-width:46ch;font-weight:300;line-height:1.6}
.rule{display:block;width:clamp(30px,4vw,64px);height:1px;background:var(--c-accent);border:0;margin:0}

/* ---------------- Loader ---------------- */
.loader{position:fixed;inset:0;z-index:300;background:var(--ink);display:grid;place-items:center;overflow:hidden}
.loader__in{width:min(80vw,460px)}
.loader__art{width:100%;height:auto;display:block;margin:0 0 clamp(12px,2vh,20px);overflow:visible}
/* Oberflaeche des Design-Programms */
.ld-chrome{fill:rgba(253,251,247,.05)}
.ld-bar{fill:rgba(253,251,247,.09)}
.ld-dot{fill:rgba(253,251,247,.26)}
.ld-layer-i{fill:rgba(253,251,247,.34)}
.ld-layer-b,.ld-prop-b{fill:rgba(253,251,247,.17)}
.ld-prop-f{fill:rgba(253,251,247,.07)}
.ld-sw{fill:var(--orange-2)}
/* Zeichenflaeche */
.ld-flabel,.ld-glabel,.ld-badge{fill:var(--orange-2)}
.ld-frame{fill:#FDFBF7}
.ld-blocks rect{fill:#121212}
.ld-blocks rect.is-soft{fill:#EDE3D8}
.ld-blocks rect.is-line{fill:rgba(18,18,18,.25)}
.ld-blocks rect.is-acc{fill:var(--orange-2)}
/* Auswahl und Masse */
.ld-sel{fill:none;stroke:var(--orange-2);stroke-width:1.2}
.ld-h{fill:#FDFBF7;stroke:var(--orange-2);stroke-width:1.1}
.ld-guide{stroke:var(--orange-2);stroke-width:1;stroke-dasharray:3 3;fill:none}
.ld-cur path{fill:#FDFBF7;stroke:#121212;stroke-width:.6;stroke-linejoin:round}
.loader__bar{height:1px;background:rgba(253,251,247,.16);position:relative;overflow:hidden;margin-bottom:14px}
.loader__bar i{position:absolute;inset:0;background:var(--orange-2);transform:scaleX(0);transform-origin:left;display:block}
.loader__n{display:flex;justify-content:space-between}
.loader .lbl{color:#8E8C87}
.loader .lbl[data-load]{color:var(--orange-2)}
body.is-loading{overflow:hidden}

/* ---------------- Seitenleiste ---------------- */
.rail{position:fixed;left:0;top:0;bottom:0;width:var(--rail);z-index:70;display:flex;flex-direction:column;align-items:center;
  background:var(--ui-bg);color:var(--ui-ink);border-right:1px solid var(--ui-line);padding:16px 0 14px}
.rail__burger{display:grid;gap:4px;width:30px;height:30px;place-content:center;flex:none}
.rail__burger span{display:block;width:16px;height:1.5px;background:currentColor}
.rail__txt,.rail__cur{writing-mode:vertical-rl;transform:rotate(180deg);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.rail__txt{margin-top:22px;opacity:.72}
.rail__logo{position:fixed;top:clamp(8px,1.4vh,14px);right:calc(var(--gutter) - (100vw - 100%));display:block;width:clamp(104px,8.4vw,132px);aspect-ratio:637/207;
  color:var(--logo-c,var(--ui-ink));transition:color .3s,opacity .25s}
.rail__logo svg{display:block;width:100%;height:100%;fill:currentColor}
.menu-open .rail__logo{opacity:0;pointer-events:none}
.rail__cur b{font-family:"Bric",system-ui,sans-serif;font-weight:400;font-size:.95rem;letter-spacing:0}
.rail__cur{margin:auto 0 12px}
.prog{position:relative;display:block;width:3px;height:clamp(84px,24vh,240px);background:var(--ui-line);border-radius:3px;overflow:hidden;flex:none}
.prog i{position:absolute;inset:0;display:block;background:var(--ui-accent);transform:scaleY(max(var(--p,0),.05));transform-origin:top}
.rail__dots{display:grid;gap:4px;margin-top:12px;flex:none}
.rail__dots i{display:block;width:5px;height:5px;background:currentColor;transform:rotate(45deg)}

/* ---------------- Vollbild-Menue ---------------- */
.mob{position:fixed;inset:0;z-index:80;background:#FDFBF7;color:#121212;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(20px,4vh,44px) var(--gutter) clamp(20px,4vh,44px) calc(var(--rail) + var(--gutter));
  visibility:hidden;clip-path:circle(0% at 23px 31px)}
.mob.is-open{visibility:visible}
/* Hintergrund: deckend mit Fernsehrauschen. Das Korn ist ein einmal gerasterter Kachel-Layer, er springt nur per transform und laeuft nur bei offenem Menue */
.menu-open .ray i{animation-play-state:paused!important}
.mob{overflow:hidden}
.mob::after{content:"";position:absolute;inset:-256px;pointer-events:none;opacity:.38;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='256' height='256'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .07 0 0 0 0 .07 0 0 0 0 .07 2.4 0 0 0 -.95'/></filter><rect width='256' height='256' filter='url(%23n)'/></svg>") 0 0/256px 256px}
/* Fernsehrauschen ueber allen Flaechen ausser der ersten: helle und dunkle Punkte, sichtbar auf jedem Grund */
.tv{position:fixed;left:0;top:0;width:100vw;height:100vh;height:100lvh;z-index:75;overflow:hidden;pointer-events:none;visibility:hidden;will-change:transform}
.tv.is-on{visibility:visible}
.tv i{position:absolute;inset:-256px;opacity:.14;will-change:transform;background:url("../img/ui/tv-noise.webp") 0 0/256px 256px}
@media (prefers-reduced-motion:no-preference){.tv.is-on i{animation:mobStatic .7s steps(1) infinite}}
.menu-open .tv{visibility:hidden}
@media (prefers-reduced-motion:no-preference){.mob.is-open::after{animation:mobStatic .7s steps(1) infinite;will-change:transform}}
@keyframes mobStatic{0%{transform:translate3d(0,0,0)}14%{transform:translate3d(-61px,43px,0)}28%{transform:translate3d(87px,-29px,0)}42%{transform:translate3d(-23px,-97px,0)}56%{transform:translate3d(113px,71px,0)}70%{transform:translate3d(-109px,17px,0)}84%{transform:translate3d(37px,-53px,0)}}
/* Oeffnen: eine orange Flaeche laeuft voraus, die Seite tritt zurueck */
.mob__lead{position:fixed;inset:0;z-index:79;display:none;background:#FF7A3D;pointer-events:none}
.mob__veil{position:fixed;inset:0;z-index:78;display:none;background:rgba(18,18,18,.08);opacity:0;pointer-events:none}
.mob__num{position:absolute;right:var(--gutter);bottom:-.1em;overflow:hidden;pointer-events:none;
  font-family:"Bric",system-ui,sans-serif;font-size:min(82vh,44vw);line-height:1;letter-spacing:-.02em;color:rgba(18,18,18,.075)}
.mob__num i{display:block;font-style:normal}
.mob__nav,.mob__meta{position:relative;z-index:1}
.mob__x{z-index:2}
.mob__nav{display:flex;flex-direction:column;align-items:flex-start}
.mob__nav button{position:relative;display:flex;align-items:baseline;gap:.5em;clip-path:inset(-.16em -.3em -.16em -.1em);font-family:"Bric",system-ui,sans-serif;font-weight:300;
  font-size:clamp(2rem,min(9.4vh,7vw),6.6rem);line-height:1.18;margin:-.08em 0;letter-spacing:-.04em;text-align:left}
/* Die Zeile reicht weit nach rechts: das Bild erscheint auch neben dem Wort, das bleibt lesbar */
@media(min-width:1024px) and (hover:hover){.mob__nav button{padding-right:clamp(160px,30vw,520px)}}
.mob__nav .n{color:#E8541C;font-family:"Jost",sans-serif;font-size:.68rem;letter-spacing:.1em;width:2.4em}
/* Buchstaben rollen beim Hover: die orange Kopie steigt von unten nach */
/* Platz fuer Unterlaengen und das letzte Zeichen; die Trefferflaeche bleibt der Button */
.roll{position:relative;display:block;overflow:hidden;line-height:1.5;margin:-.16em -.2em -.16em 0;padding-right:.2em;pointer-events:none}
.roll-a,.roll-b{display:block;white-space:nowrap}
.roll-b{position:absolute;left:0;top:100%;color:#E8541C}
/* Bild folgt dem Zeiger */
.mob__prev{position:fixed;top:0;left:0;z-index:82;width:clamp(240px,23vw,380px);aspect-ratio:1;opacity:0;pointer-events:none}
.mob__prev img{display:block;width:100%;height:100%;object-fit:contain}
/* Beim Oeffnen bleibt die Leiste sichtbar und nimmt die Menuefarbe an */
.menu-anim .rail{z-index:90;transition:background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}
.menu-open .rail{background:transparent;color:#121212;border-color:rgba(18,18,18,.18);transition-delay:.3s}
.menu-open .prog i{background:#E8541C}
.mob__meta{display:flex;flex-wrap:wrap;gap:.4em 2em;margin-top:clamp(14px,3vh,30px);font-size:.82rem}
.mob__x{position:absolute;top:clamp(16px,3vh,32px);right:var(--gutter);display:grid;place-items:center;width:clamp(56px,8vh,84px);aspect-ratio:1;
  border-radius:6px;background:#121212;color:#fff;transition:background .3s var(--ease),color .3s var(--ease)}
.mob__x:hover{background:#E8541C;color:#fff}
.mob__x svg{width:26%;stroke:currentColor;stroke-width:1.4;fill:none;stroke-linecap:round}
.mob :focus-visible{outline-color:#121212}

/* ---------------- Zeiger: praeziser Punkt, ueber Links rastet ein Eckrahmen ein ---------------- */
.cur{position:fixed;top:0;left:0;z-index:200;width:0;height:0;pointer-events:none;opacity:0}
.cur__d{position:absolute;left:0;top:0;width:8px;height:8px;border-radius:50%;background:#E8541C;transform:translate(-50%,-50%);
  transition:width .2s,height .2s,background-color .2s}
.cur-lock .cur__d{width:5px;height:5px}
.cur-acc .cur__d{background:#fff}
.has-grab .cur__d{width:5px;height:5px}
/* Beim Druecken: Hand mit Pfeilen, die zum Ziehen einladen */
.cur__g{position:absolute;left:0;top:0;width:58px;height:58px;display:grid;place-items:center;border-radius:50%;background:#E8541C;color:#fff;opacity:0;
  transform:translate(-50%,-50%) scale(.45);transition:opacity .16s,transform .32s cubic-bezier(.22,1,.3,1)}
.cur__g svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cur__g i{position:absolute;top:50%;width:10px;height:10px;margin-top:-5px;border:solid #E8541C;border-width:2px 0 0 2px}
.cur__g .is-l{left:-20px;transform:rotate(-45deg)}
.cur__g .is-r{right:-20px;transform:rotate(135deg)}
.can-drag.has-grab:not(.cur-lock):not(.menu-open) .cur__d{opacity:0}
.can-drag.has-grab:not(.cur-lock):not(.menu-open) .cur__g{opacity:1;transform:translate(-50%,-50%) scale(1)}
.can-drag.has-grab:not(.cur-lock):not(.menu-open) .cur__g .is-l{animation:curNudgeL .9s ease-in-out infinite}
.can-drag.has-grab:not(.cur-lock):not(.menu-open) .cur__g .is-r{animation:curNudgeR .9s ease-in-out infinite}
@keyframes curNudgeL{50%{transform:translate3d(-6px,0,0) rotate(-45deg)}}
@keyframes curNudgeR{50%{transform:translate3d(6px,0,0) rotate(135deg)}}
.curf{position:fixed;left:0;top:0;z-index:199;width:0;height:0;pointer-events:none}
.curf i{position:fixed;left:0;top:0;width:11px;height:11px;border:0 solid #E8541C;opacity:0;transition:opacity .16s;will-change:transform}
.curf i:nth-child(1){border-width:2px 0 0 2px}
.curf i:nth-child(2){border-width:2px 2px 0 0}
.curf i:nth-child(3){border-width:0 0 2px 2px}
.curf i:nth-child(4){border-width:0 2px 2px 0}
.cur-lock .curf i{opacity:1}
@media(hover:none),(pointer:coarse){.curf{display:none!important}}
html.has-cur,html.has-cur *{cursor:none!important}
@media(hover:none),(pointer:coarse){.cur{display:none!important}}

/* ================= Horizontaler Rahmen ================= */
.hz{position:relative;height:100svh;overflow:hidden}
.hz__track{display:flex;height:100%;width:max-content;will-change:transform}
.pnl{position:relative;flex:0 0 auto;height:100%;width:100vw;display:flex;flex-direction:column;
  justify-content:center;padding:calc(var(--head-h) + var(--panel-pad)) var(--gutter) calc(var(--panel-pad) + 14px) calc(var(--rail) + var(--gutter))}
.pnl--auto{width:auto}
/* Redaktionelle Kopfzeile – Raster und Haarlinie wie im Vorbild */
.pnl__tag{z-index:4;position:absolute;top:calc(var(--head-h) + 10px);
  left:calc(var(--rail) + var(--gutter));right:var(--gutter);display:flex;align-items:center;white-space:nowrap;
  justify-content:flex-start;gap:clamp(16px,3vw,56px);
  padding-bottom:10px;border-bottom:1px solid var(--c-line)}
.pnl__id{display:flex;align-items:center;gap:.9em;flex:none}
.pnl__meta{display:flex;gap:clamp(16px,2.6vw,48px)}
.pnl__m{display:flex;align-items:baseline;gap:.9em}
.pnl__m em{font-style:normal;font-size:.74rem;letter-spacing:.06em;color:var(--c-ink)}
.pnl__rail{display:none}
@media(max-width:900px){.pnl__meta{display:none}}
.pnl__tag b{font-family:"Bric",system-ui,sans-serif;font-weight:400;font-size:1.2rem;color:var(--orange-2)}
.pnl__tag .pnl__m b{font-size:.68rem}
.pnl[data-bg="orange"] .pnl__tag b,.pnl[data-bg="orange"] em{color:#FFFFFF}
/* helle Flaechen: das hellere Orange erreicht dort nicht genug Kontrast */
.pnl[data-bg="paper"] .pnl__tag b,.pnl[data-bg="cream"] .pnl__tag b{color:var(--orange-deep)}
.pnl[data-bg="paper"] :is(h1,h2,h3) em,.pnl[data-bg="cream"] :is(h1,h2,h3) em{color:var(--orange)}

/* ---------------- 01 Intro ---------------- */
/* Vollflaechig schwarz: Text links, Person steht auf der Unterkante */
.intro{
  --fig:min(46vw,1024px);
  overflow:hidden;display:grid;grid-template-columns:100%;grid-template-rows:minmax(0,1fr) auto;padding:0}
.intro__wall{position:absolute;inset:0;z-index:0;overflow:hidden;
  background:linear-gradient(to bottom,#161616,#0C0C0C)}
/* Stroemungsfeld: feine Linien wie Rauch im Gegenlicht */
.flow{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.9}
.flow--top{opacity:1}
/* feines Korn */
.intro__wall::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.055'/></svg>")}
.intro__bg{position:absolute;z-index:1;pointer-events:none;
  right:clamp(14px,4vw,90px);top:calc(var(--head-h) + clamp(6px,1.5vh,20px));bottom:0;
  display:flex;align-items:flex-end;justify-content:flex-end}
.intro__bg img{position:relative;z-index:1;display:block;height:100%;width:auto;
  max-width:var(--fig);object-fit:contain;object-position:bottom right;will-change:transform}
/* Werkzeuge fliegen bei Hover aus der Person heraus */
.hot{position:absolute;inset:-4% -8%;z-index:4;pointer-events:auto}
.fly{position:absolute;inset:0;z-index:3;pointer-events:none}
.tool{--ts:clamp(50px,4.8vw,80px);position:absolute;left:50%;top:42%;width:var(--ts);
  margin-left:calc(var(--ts) / -2);margin-top:calc(var(--ts) / -2);opacity:0;will-change:transform}
.tool img{display:block;width:100%;height:auto;
  filter:drop-shadow(0 10px 26px rgba(0,0,0,.6)) drop-shadow(0 0 16px rgba(255,122,61,.22))}
.shock{position:absolute;left:50%;top:42%;z-index:2;width:40px;height:40px;margin:-20px 0 0 -20px;
  border-radius:50%;border:1px solid var(--orange-2);opacity:0;pointer-events:none}
/* Gegenlicht aus der Silhouette der Person, fertig gerendert (.build/make_glow.py) */
.ray{position:absolute;z-index:0;left:-50%;bottom:0;width:200%;aspect-ratio:720/475;pointer-events:none;
  transform-origin:62% 46%}
/* ruhiges Gegenlicht; die Spuren, die die Person erreichen, hellen es auf (initFlow) */
.ray{will-change:opacity}
.ray i{animation-play-state:var(--ray-run,running)!important;position:absolute;display:block;inset:0;will-change:opacity;opacity:.8;
  background:url("../img/ui/hero-glow.webp?v=4") center/100% 100% no-repeat;
  animation:rayBase 13s ease-in-out infinite alternate}
@keyframes rayBase{from{opacity:.72}to{opacity:1}}
.is-still .ray i{animation:none!important}
@media (prefers-reduced-motion:reduce){.ray i{animation:none!important}}
.intro__txt{position:relative;z-index:2;height:100%;min-height:0;overflow:hidden;max-width:min(100%,52%);
  display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--head-h) + 92px + var(--panel-pad)) var(--gutter) clamp(16px,3vh,40px) calc(var(--rail) + var(--gutter));
  box-sizing:border-box}
.intro h1{max-width:none;margin-bottom:.34em}
.intro .lead{max-width:42ch}
/* Fusszeile: Stichworte links, Scroll-Hinweis rechts */
.intro__foot{position:relative;z-index:2;display:flex;flex-wrap:wrap;
  justify-content:flex-start;align-items:center;align-content:center;gap:clamp(12px,2vh,22px) clamp(16px,3vw,40px);
  max-width:min(100%,52%);margin:0;padding:0 var(--gutter) clamp(18px,3.4vh,36px) calc(var(--rail) + var(--gutter));border-top:0}
.intro__foot .lbl{color:var(--c-soft)}
.intro .scrl__t{background:rgba(253,251,247,.24)}
.intro .scrl__t i{background:var(--orange-2)}
.intro .scrl__t i::after{border-top-color:var(--orange-2);border-right-color:var(--orange-2)}
.intro__cols{display:flex;flex-wrap:wrap;gap:clamp(22px,3vw,60px)}
.intro__cols div{display:grid;gap:.18rem}
.intro__cols .lbl{font-size:clamp(.63rem,.74vw,.77rem)}
/* Scroll-Hinweis */
.scrl{display:flex;align-items:center;gap:.9em;flex:none;align-self:center;margin-left:clamp(20px,4vw,70px)}
.scrl__t{position:relative;display:block;width:clamp(48px,6vw,84px);height:1px;background:var(--c-line-2)}
.scrl__t i{position:absolute;left:0;top:0;display:block;width:20px;height:1px;background:var(--c-accent)}
.scrl__t i::after{content:"";position:absolute;right:-1px;top:-3px;width:6px;height:6px;
  border-top:1px solid var(--c-accent);border-right:1px solid var(--c-accent);transform:rotate(45deg)}


/* ---------------- 02 Profil ---------------- */
.pnl--kit{--w:clamp(260px,min(58vw,100vh),1240px);--tile:clamp(44px,min(5.2vw,8.6vh),96px)}
.kit__h{margin:0 0 .4em;font-family:"Bric",system-ui,sans-serif;font-weight:300;line-height:.92;letter-spacing:-.04em;color:var(--c-ink);font-size:clamp(2.6rem,min(8vw,11.4vh),9rem)}
.kit__lead{max-width:62ch;margin:0}
.kit__track{display:flex;flex-wrap:wrap;gap:20px;margin-top:clamp(14px,2.6vh,30px)}
.kit__card{position:relative;flex:0 0 auto;display:flex;flex-direction:column;width:min(var(--w),100%);min-height:320px;overflow:hidden;border-radius:8px;background:#F6F1E9;box-shadow:-8px 0 18px -14px rgba(18,18,18,.5)}
.kit__media{position:relative;flex:1;min-height:0;overflow:hidden;background:radial-gradient(58% 90% at var(--gx,50%) 62%,rgba(232,84,28,.58),rgba(232,84,28,0) 74%),radial-gradient(40% 60% at 92% 4%,rgba(255,122,61,.16),rgba(255,122,61,0) 70%),#151311}
.kit__card:nth-child(2) .kit__media{--gx:38%}
.kit__card:nth-child(3) .kit__media{--gx:62%}
.kit__card:nth-child(4) .kit__media{--gx:44%}
/* Ruhendes Rauschen, einmal gerastert */
.kit__media::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.2;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='256' height='256'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .96 0 0 0 0 .9 0 0 0 0 .84 2.4 0 0 0 -.95'/></filter><rect width='256' height='256' filter='url(%23n)'/></svg>") 0 0/256px 256px}
.kit__art{position:absolute;z-index:1;inset:5% 4% calc(var(--tile) * .5 + 3%);will-change:transform}
.kit__art img{display:block;width:100%;height:100%;object-fit:contain}
.kit__body{position:relative;flex:none;display:flex;justify-content:space-between;align-items:flex-start;gap:clamp(14px,2vw,40px);padding:clamp(12px,2vh,24px) clamp(16px,1.8vw,30px) clamp(12px,2vh,24px)}
.kit__text{min-width:0;flex:1 1 0}
.kit__text h3{margin:0 0 .6em}
.kit__text p{margin:0;max-width:38ch;font-size:clamp(.82rem,.95vw,1.05rem);line-height:1.4;font-weight:300;color:var(--c-text)}
/* Einheitliche Kacheln, halb auf dem Bild */
.kit__dock{position:relative;z-index:2;flex:none;display:flex;gap:clamp(8px,.9vw,16px);margin:calc(var(--tile) * -.5 - clamp(12px,2vh,24px)) 0 0;padding:0;list-style:none}
.kit__tool{display:flex;flex-direction:column;align-items:center;gap:7px;width:var(--tile);will-change:transform,opacity}
.kit__tile{display:grid;place-items:center;width:var(--tile);height:var(--tile);border-radius:8%;background:#fff;box-shadow:0 0 0 1px rgba(18,18,18,.06),0 4px 10px -6px rgba(18,18,18,.22);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.kit__tool:hover .kit__tile{transform:translateY(-5px)}
.kit__tile img{display:block;width:66%;height:66%;object-fit:contain}
.kit__name{font-size:clamp(.64rem,.78vw,.9rem);line-height:1;white-space:nowrap;color:var(--c-text)}
.kit__veil{position:absolute;z-index:2;inset:0;background:var(--ink);opacity:0;pointer-events:none}
/* Die Flaeche steht, die Karten werden nacheinander auf einen Stapel gelegt */
.film-live .pnl--kit{width:315vw;padding:0}
.film-live .kit{position:absolute;left:0;top:0;width:100vw;height:100%;display:flex;flex-direction:column;overflow:hidden;will-change:transform;
  padding:calc(var(--head-h) + var(--panel-pad) + clamp(10px,3vh,34px)) var(--gutter) clamp(18px,3.4vh,40px) calc(var(--rail) + var(--gutter))}
.film-live .kit__heads{position:relative;flex:none;height:1.04em;margin:clamp(6px,1.6vh,18px) 0 .16em;font-size:clamp(2.6rem,min(8vw,11.4vh),9rem)}
.film-live .kit__h{position:absolute;left:0;bottom:0;margin:0;font-size:inherit;white-space:nowrap;visibility:hidden}
.film-live .kit__h .film__l{display:inline-block;vertical-align:bottom;margin-right:-.02em}
.film-live .kit__h em{color:var(--orange-deep)}
.film-live .kit__track{position:relative;display:block;flex:1;min-height:0}
.film-live .kit__card{position:absolute;left:0;top:0;width:var(--w);height:100%;min-height:0;transform-origin:0 50%;will-change:transform}
.kit__burst{display:none}
.film-live .kit__burst{display:block;position:absolute;top:0;bottom:0;visibility:hidden;pointer-events:none}
.kit__bt{position:absolute;left:0;top:0;will-change:transform,opacity}
.kit__core,.kit__ring{position:absolute;left:0;top:0;border-radius:50%;will-change:transform,opacity}
.kit__core{background:var(--orange)}
.kit__ring{border:2px solid var(--orange);box-sizing:border-box}
.kit__sum{position:absolute;left:0;margin:0;font-family:"Bric",system-ui,sans-serif;font-weight:300;font-size:clamp(1.05rem,1.45vw,1.75rem);line-height:1.12;letter-spacing:-.02em;color:var(--c-ink);will-change:transform,opacity}
.kit__sum b{font-weight:300;color:var(--orange-deep)}
@media (max-width:1023px),(hover:none),(pointer:coarse){
  .film-live .kit__burst{display:none}
  .pnl--kit{--w:calc(100vw - 2 * var(--gutter) - 44px);--tile:36px}
  .kit__h{font-size:clamp(2rem,11.5vw,5rem)}
  .kit__body{flex-direction:column;gap:12px}
  .kit__dock{order:-1;flex-wrap:wrap;margin-top:-30px;gap:5px}
  .kit__name{display:none}
  .kit__text{flex:none}
  .film-live .pnl.pnl--kit{width:auto;height:620svh;padding:0;display:block}
  .film-live .kit{position:sticky;width:100%;height:100svh;will-change:auto;padding:calc(var(--head-h) + 14px) var(--gutter) 20px}
  .film-live .kit .pnl__tag{display:none}
  .film-live .kit__heads{height:1.96em;font-size:clamp(2rem,11.5vw,5rem)}
  .film-live .kit__h .film__l{display:block;margin:0}
  .film-live .kit__lead{font-size:.86rem;line-height:1.4}
}
.profil-grid{display:grid;gap:clamp(24px,3vw,60px);align-items:center;align-content:center;
  flex:1 1 auto;min-height:0}
@media(min-width:1000px){.profil-grid{grid-template-columns:1.05fr .95fr}}
.profil-grid h2{font-size:clamp(2.1rem,min(4.6vw,7vh),4.6rem)}
/* Bildsequenz im Hintergrund, laeuft mit dem Scrollen */
.film{height:100%;display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,4vw,72px);align-items:center}
.film__cv{display:none}
.film__still{order:2;width:100%;height:auto;border-radius:6px}
.film-live .pnl--film{width:420vw;padding:0}
.film-live .film{display:block;position:absolute;left:0;top:0;width:100vw;height:100%;overflow:hidden;will-change:transform;background:var(--c-bg)}
.film-live .film__cv{display:block;position:absolute;inset:0;width:100%;height:100%}
.film-live .film__still{display:none}
.film__scrim{display:none}
.film-live .film__scrim{display:block;position:absolute;inset:0;opacity:0;pointer-events:none;background:linear-gradient(to top,rgba(10,5,2,.72),rgba(10,5,2,.28) 42%,rgba(10,5,2,0) 68%)}
.film__h{margin-top:.5em;font-family:"Bric",system-ui,sans-serif;font-weight:300;line-height:.92;letter-spacing:-.04em;color:var(--c-ink);font-size:clamp(1.9rem,3.4vw,3.4rem)}
.film__l{display:block}
.film-live .film__txt{position:absolute;left:calc(var(--rail) + var(--gutter));bottom:clamp(40px,9vh,110px);right:var(--gutter)}
.film-live .film__h{position:absolute;left:0;bottom:0;margin:0;color:#fff;font-size:clamp(2.6rem,min(8vw,11.4vh),9rem);visibility:hidden}
.film-live .film__h em{color:#FF7A3D}
.film-live .film__l{overflow:hidden;padding:.08em .12em .14em 0;margin:-.06em -.12em -.08em 0;white-space:nowrap}
.film-live .film__l>span{display:block}
.fw,.fc{display:inline-block}
/* Karte auf heller Flaeche warm absetzen */
.pnl[data-bg="paper"] .paper{background:var(--cream)}
/* Eckdaten-Zeile unten */
.facts{flex:none;display:flex;flex-wrap:wrap;gap:clamp(18px,4vw,70px);
  margin-top:clamp(18px,3vh,40px);padding-top:clamp(13px,2vh,22px);border-top:1px solid var(--c-line)}
.facts div{display:grid;gap:.3rem}
.facts b{font-family:"Bric",system-ui,sans-serif;font-weight:400;font-size:clamp(1rem,1.15vw,1.3rem);
  color:var(--c-ink);line-height:1.1}

/* ---------------- Papier-Karte ---------------- */
.paper{position:relative;background:var(--c-solid);color:var(--ink);border-radius:4px;
  padding:clamp(20px,2vw,32px);box-shadow:0 24px 50px -26px rgba(0,0,0,.55)}
.paper::before{content:"";position:absolute;right:-10px;top:14px;bottom:14px;width:18px;
  background:var(--orange);border-radius:0 4px 4px 0;z-index:-1}
.paper h3{color:var(--ink)}
.paper .lbl{color:#6E6A64}
.paper p{color:#3A3732}

/* ---------------- Leistungen: feste Buehne mit drei Spalten ---------------- */
.svcx{--svc-bg:transparent}
.svcx__in{display:grid;gap:clamp(24px,4vw,70px)}
.svcx__h{margin:0;font-family:"Bric",system-ui,sans-serif;font-weight:300;line-height:1;letter-spacing:-.04em;color:var(--c-ink);font-size:clamp(2.6rem,min(6vw,10.6vh),7rem)}
.svcx__h em{color:var(--c-accent)}
.svcx__fact{margin-bottom:2em}
.svcx__num{font-family:"Bric",system-ui,sans-serif;font-weight:300;font-size:clamp(2.6rem,min(5.2vw,9.4vh),6.2rem);line-height:1;letter-spacing:-.04em;color:var(--c-accent);white-space:nowrap}
.svcx__fact h3{margin:.5em 0 0;font-family:"Bric",system-ui,sans-serif;font-weight:400;font-size:clamp(1.05rem,min(1.65vw,3vh),1.95rem);line-height:1.15;letter-spacing:.01em;text-transform:uppercase;color:var(--c-ink)}
.svcx__fact p{margin:.7em 0 0;max-width:32ch;font-weight:400;font-size:clamp(1rem,min(1.2vw,2.2vh),1.35rem);line-height:1.4;color:var(--c-text)}
.svcx__pack{position:relative;width:100%}
.svcx__img{position:relative;display:block;width:100%;height:auto}
.svcx__ring,.svcx__bit{display:none}
.svcx__title .lbl{margin:0 0 1em}
.svcx__steps{display:none}
/* Die Flaeche steht, nur die Timeline laeuft mit dem Scrollen */
.film-live .pnl--svcx{width:340vw;padding:0}
.film-live .svcx{position:absolute;left:0;top:0;width:100vw;height:100%;overflow:hidden;background:var(--svc-bg);will-change:transform;
  padding:calc(var(--head-h) + var(--panel-pad)) var(--gutter) clamp(14px,3vh,34px) calc(var(--rail) + var(--gutter))}
.film-live .svcx__in{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;height:100%}
.film-live .svcx__copy{position:relative;min-height:clamp(240px,42vh,400px)}
.film-live .svcx__fact{position:absolute;left:0;right:0;top:0;margin:0;visibility:hidden;will-change:transform,opacity}
.film-live .svcx__pack{width:clamp(300px,min(35vw,68vh),640px)}
.film-live .svcx__img{z-index:1;will-change:transform}
.film-live .svcx__ring{display:block;position:absolute;left:50%;top:50%;width:122%;aspect-ratio:1;margin:-61% 0 0 -61%;border:1.5px dashed rgba(18,18,18,.3);border-radius:50%;will-change:transform,opacity}
/* Kleine Teile aus dem Bild: die Farbfelder der Bodenplatte */
.film-live .svcx__bit{display:block;position:absolute;z-index:2;border-radius:3px;will-change:transform}
.svcx__bit--a{left:-7%;top:14%;width:20px;height:20px;background:#E8541C}
.svcx__bit--b{right:-9%;top:58%;width:24px;height:24px;background:#2A2A2A}
.svcx__bit--c{right:-3%;top:-3%;width:14px;height:14px;background:#E8541C}
.svcx__bit--d{left:-4%;bottom:0;width:16px;height:16px;background:#E5DED3;box-shadow:inset 0 0 0 1px rgba(18,18,18,.14)}
.film-live .svcx__title{text-align:right}
.film-live .svcx__h .film__l{display:block}
.film-live .svcx__steps{display:flex;justify-content:flex-end;gap:8px;margin-top:clamp(14px,2.6vh,26px)}
.svcx__steps i{width:clamp(18px,1.9vw,30px);height:3px;border-radius:2px;background:var(--c-line);transition:background-color .25s}
.svcx__steps i.is-on{background:#E8541C}
@media (max-width:1023px),(hover:none),(pointer:coarse){
  .svcx__h{font-size:clamp(2.4rem,12vw,5rem)}
  .film-live .pnl.pnl--svcx{width:auto;height:770svh;padding:0;display:block}
  .film-live .svcx{position:sticky;width:100%;height:100svh;will-change:auto;padding:calc(var(--head-h) + 40px) var(--gutter) 20px}
  .film-live .svcx .pnl__tag{display:none}
  .film-live .svcx__in{display:flex;flex-direction:column;align-items:stretch;gap:clamp(10px,2vh,20px)}
  .film-live .svcx__title{order:-1;text-align:left}
  .film-live .svcx__h .film__l{display:inline-block;vertical-align:bottom;margin-right:.12em}
  .film-live .svcx__steps{justify-content:flex-start}
  .film-live .svcx__pack{flex:none;width:min(78vw,38svh);margin:clamp(14px,5svh,44px) auto}
  .film-live .svcx__ring{width:106%;margin:-53% 0 0 -53%}
  .film-live .svcx__copy{order:1;flex:1;min-height:0}
  .svcx__num{font-size:clamp(2.6rem,13vw,5rem)}
}

/* ---------------- Referenzen ---------------- */
  border:1px solid var(--c-line)}
  background:rgba(18,18,18,.74);backdrop-filter:blur(8px)}

/* ---------------- Werdegang ---------------- */

/* ---------------- Zahlen / Tools ---------------- */

/* ---------------- FAQ ---------------- */
.faq__i{border-top:1px solid var(--c-line)}
.faq__q{width:100%;display:flex;align-items:center;gap:1rem;text-align:left;padding:.85rem 0;
  font-family:"Bric",system-ui,sans-serif;font-size:clamp(.98rem,1.25vw,1.25rem);color:var(--c-ink)}
.faq__q .lbl{flex:none;color:var(--c-accent)}
.faq__q u{flex:1;text-decoration:none}
.faq__q i{flex:none;width:12px;height:12px;position:relative}
.faq__q i::before,.faq__q i::after{content:"";position:absolute;inset:0;margin:auto;background:var(--c-soft)}
.faq__q i::before{width:12px;height:1px}
.faq__q i::after{width:1px;height:12px;transition:transform .4s var(--ease)}
.faq__i.is-open .faq__q i::after{transform:scaleY(0)}
.faq__i.is-open .faq__q i::before{background:var(--c-accent)}
.faq__a{height:0;overflow:hidden}
.faq__a p{font-size:.85rem;color:var(--c-text);padding:0 0 .9rem 2.4rem;max-width:52ch}

/* ---------------- Kontakt ---------------- */
.ct{position:relative;z-index:2;display:grid;gap:clamp(26px,3vw,60px);align-items:center}
@media(min-width:900px){.ct{grid-template-columns:1fr .9fr}}
.ct__list{display:grid;gap:0;border-top:1px solid var(--c-line)}
.ct__list a,.ct__list div{display:flex;justify-content:space-between;gap:14px;padding:.85rem 0;
  border-bottom:1px solid var(--c-line);color:var(--c-ink)}
.ct__list b{font-weight:400;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--c-soft)}
.ct__list em{font-style:normal;font-weight:400;color:var(--c-ink);display:inline-flex;align-items:center;gap:.45em;white-space:nowrap}
.ct__list a:hover em{color:var(--c-accent)}
/* Kontaktdaten: gross und gut lesbar, mit Phosphor-Icons */
.ct__list a,.ct__list div{align-items:center;padding:clamp(.6rem,1.7vh,1.15rem) 0}
.ct__list b{display:inline-flex;align-items:center;gap:1em;white-space:nowrap}
.ct__ic{flex:none;width:clamp(22px,min(1.9vw,3.4vh),30px);height:clamp(22px,min(1.9vw,3.4vh),30px);fill:var(--c-accent)}
.ct__list em{font-family:"Bric",system-ui,sans-serif;font-size:clamp(1.02rem,min(1.5vw,2.8vh),1.7rem);letter-spacing:-.012em}
[data-pnl="08"] .btn:not(.btn--ink){background:var(--orange)}
[data-pnl="08"] .btn:not(.btn--ink):hover{background:#A83A0C}

.btn{display:inline-flex;align-items:center;gap:.7em;padding:1em 1.9em;border-radius:6px;
  background:var(--orange-deep);color:#fff;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  transition:background .3s var(--ease);will-change:transform}
.btn:hover{background:#A83A0C}
.btn--ghost,.btn--ink{background:transparent;border:1px solid var(--c-line-2);color:var(--c-ink)}
.btn--ghost:hover,.btn--ink:hover{background:var(--c-ink);color:var(--c-bg)}
.btns{display:flex;flex-wrap:wrap;gap:12px}
.arr{width:.78em;height:.78em;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;
  stroke-linejoin:round;flex:none;transition:transform .35s var(--ease)}
.btn:hover .arr{transform:translate(3px,-3px)}
.out__links{display:flex;flex-wrap:wrap;gap:10px 26px}
/* Telefon: Rechtliches ganz am Ende, nach den Kontaktdaten */
.out__links--m{display:none}
@media(max-width:899px){.out__links--d{display:none}.out__links--m{display:flex}}
.out__links a{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--c-soft)}
.out__links a:hover{color:var(--c-accent)}

/* ---------------- Reveals ---------------- */
.rv{opacity:0}
.no-js .rv,.no-js [data-split]{opacity:1!important}
[data-split]{opacity:0}
/* Innenabstand nimmt Umlaute und Kursive mit auf, ohne die Zeilen zu verschieben */
.w{overflow:hidden;padding:.2em .08em .08em;margin:-.2em -.08em -.08em;vertical-align:top}
.c{display:inline-block;will-change:transform}

/* ========== Kurze Viewports ========== */
@media (min-width:1024px) and (max-height:860px){
  :root{--panel-pad:clamp(16px,3vh,36px)}
  h1{font-size:clamp(2.4rem,min(7.4vw,11vh),7rem)}
  h2{font-size:clamp(1.7rem,3.4vw,2.9rem)}
  .lead{font-size:.95rem;line-height:1.5;max-width:44ch}
  .intro h1{margin-bottom:.14em}
  .intro__foot{margin-top:clamp(10px,1.6vh,22px);padding-top:clamp(10px,1.4vh,16px)}
  .intro__cols{gap:clamp(16px,2.2vw,40px)}
  .lbl{line-height:1.75}
  .paper{padding:clamp(16px,1.6vw,24px)}
  .paper h3{font-size:clamp(1.15rem,1.6vw,1.5rem)}
  .faq__q{padding:.6rem 0;font-size:clamp(.9rem,1.1vw,1.08rem)}
  .faq__a p{padding-bottom:.7rem}
}
@media (min-width:1024px) and (max-height:700px){
  h1{font-size:clamp(2.2rem,min(6vw,9.6vh),5rem)}
  h2{font-size:clamp(1.55rem,2.9vw,2.4rem)}
  .lead{font-size:.9rem}
}

/* Auf niedrigen Bildschirmen beginnt das Foto unter der Kopfzeile */
@media (min-width:1024px) and (max-height:960px){
  .intro__bg{top:calc(var(--head-h) + 50px)}
}

/* ================= MOBIL: vertikal ================= */
@media (max-width:1023px),(hover:none),(pointer:coarse){
  :root{--rail:0px;--head-h:54px}
  .rail{width:auto;right:0;bottom:auto;height:54px;flex-direction:row;padding:0 14px;gap:12px;border-right:0;border-bottom:1px solid var(--ui-line)}
  .rail__txt,.rail__dots,.rail__cur{display:none}
  .rail__logo{position:static;margin-left:auto;width:92px;color:inherit}
  .film{display:block}
  .film__still{margin-bottom:24px}
  .film-live .pnl.pnl--film{width:auto;height:760svh;padding:0;justify-content:flex-start}
  /* Der Film reicht bis unter die Adressleiste, der Text bleibt ueber ihr */
  .film-live .film{position:sticky;width:100%;height:100svh;height:100lvh;will-change:auto}
  .film-live .film__txt{left:var(--gutter);right:var(--gutter);bottom:calc(clamp(40px,9vh,110px) + 100lvh - 100svh)}
  .film-live .film__h{font-size:clamp(2rem,11.5vw,5rem)}
  .prog{position:absolute;left:0;right:0;bottom:-1px;width:auto;height:3px;background:transparent;border-radius:0}
  .prog i{transform:scaleX(max(var(--p,0),.03));transform-origin:left}
  .mob{clip-path:circle(0% at 29px 27px)}
  .mob__nav button{font-size:clamp(1.9rem,10.4vw,4.4rem)}
  .mob__x,.mob__prev{display:none}
  .hz{height:auto;overflow:visible}
  .hz__track{display:block;width:auto;height:auto;transform:none!important}
  .pnl{width:auto;height:auto;min-height:auto;padding:clamp(70px,12vh,110px) var(--gutter)}
  .pnl:first-child{padding-top:calc(var(--head-h) + 34px)}
  .pnl + .pnl::before{left:0;right:0;top:0;bottom:auto;width:auto;height:clamp(28px,7vw,64px);
    -webkit-mask-image:linear-gradient(to bottom,var(--seam-fade));
    mask-image:linear-gradient(to bottom,var(--seam-fade))}
  .pnl + .pnl[data-bg="ink"]::before{left:0;top:calc(clamp(28px,7vw,64px) * -1);
    -webkit-mask-image:linear-gradient(to top,var(--seam-fade));
    mask-image:linear-gradient(to top,var(--seam-fade))}
  .pnl__tag{position:static;margin-bottom:1.6rem}
  .intro{overflow:clip;display:flex;flex-direction:column;
    padding:calc(var(--head-h) + 34px) var(--gutter) clamp(70px,12vh,110px)}
  .intro__wall,.hot,.fly,.shock{display:none}
  .intro__bg{position:static;order:3;display:block;position:relative;top:auto;right:auto;bottom:auto;overflow:visible;
    margin:clamp(20px,4vh,40px) 0 0;height:auto}
  .ray{left:50%;margin-left:calc(min(66%,260px) * -1);width:calc(min(66%,260px) * 2)}
  .intro__bg img{display:block;width:min(66%,260px);height:auto;max-width:none;
    margin:clamp(14px,3vh,26px) auto 0;object-fit:contain}
  .intro__txt{display:block;max-width:none;height:auto;padding:0}
  .intro__foot{order:4;max-width:none;align-items:flex-start;padding:clamp(13px,2vh,20px) 0 0;
    margin-top:0;border-top:1px solid var(--c-line)}
  .intro h1{font-size:clamp(2.6rem,16vw,7rem)}
  .intro__foot{align-items:flex-start}
  .scrl{display:none}
  .pnl--auto > div[style]{display:block!important;height:auto!important}
  .pnl--auto > div[style] > div[style]{width:auto!important;margin-bottom:clamp(24px,5vh,40px)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .rv,[data-split]{opacity:1!important;transform:none!important}
  .loader{display:none}
  .cur{display:none}
  html.has-cur,html.has-cur *{cursor:auto!important}
}
@media print{.rail,.mob,.cur{display:none!important}}

/* --- Referenzen (05): erst ein Fenster, dann fuenf Arbeiten als Vollbild --- */
.pnl--works{width:auto;padding:0}
.wkx{position:relative;display:flex;align-items:stretch;gap:clamp(12px,1.4vw,24px);height:100%;
  padding:calc(var(--head-h) + 60px) var(--gutter) var(--gutter) calc(var(--rail) + var(--gutter))}
.wkx__in{flex:none;align-self:center;width:clamp(240px,26vw,460px)}
.wkx__h{margin:0;font-size:clamp(2.6rem,min(8vw,11.4vh),9rem);line-height:1}
.wkx__win{display:none}
.wk{position:relative;display:block;flex:none;width:62vw;background:var(--bg);color:#fff;text-decoration:none}
.wk__m{position:absolute;inset:0;display:block;overflow:hidden;transform-origin:0 0}
.wk__m img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--pos)}
.wk__m::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.34),rgba(0,0,0,0) 18%),linear-gradient(0deg,rgba(0,0,0,.72),rgba(0,0,0,.24) 26%,rgba(0,0,0,0) 48%)}
.wk--poster .wk__m::after,.wk--fit .wk__m::after{display:none}
.wk--fit{color:#121212}
.wk--fit .wk__k{color:rgba(18,18,18,.72)}
.wk--fit .wk__k b,.wk--fit .wk__go{color:#121212}
.wk--logo .wk__m img,.wk--poster .wk__m img,.wk--fit .wk__m img{position:absolute;right:0;top:0;width:auto;max-width:100%;object-fit:contain;object-position:100% 50%}
.wk--fit .wk__m img{top:6%;height:86%}
.wk--logo .wk__m img{-webkit-mask-image:linear-gradient(90deg,transparent,#000 24%);mask-image:linear-gradient(90deg,transparent,#000 24%)}
.wk__c{position:absolute;left:clamp(16px,2vw,32px);bottom:clamp(14px,2.6vh,30px);display:block}
.wk__k{display:block;margin-bottom:.9em;color:rgba(255,255,255,.86)}
.wk__k b{color:#fff;font-weight:500}
.wk__t{display:block;font-family:"Bric",system-ui,sans-serif;font-size:clamp(2rem,4.4vw,4.6rem);line-height:1;letter-spacing:-.02em}
.wk__go{position:absolute;right:clamp(16px,2vw,32px);bottom:clamp(14px,2.6vh,30px);display:inline-flex;align-items:center;gap:.7em;color:#fff}
.wk:hover .arr{transform:translate(3px,-3px)}
.wkx__end{flex:none;align-self:center;width:clamp(300px,34vw,560px);background:#121212;color:#FDFBF7}
.wkx__more{margin-top:clamp(14px,3vh,34px)}
.wkx__nums{margin:0 0 1em;color:#FF7A3D}
.wkx__end .lead{margin:0;max-width:44ch;color:rgba(253,251,247,.74);font-size:clamp(.9rem,1.05vw,1.1rem)}
.wkx__top{display:flex;align-items:flex-end;gap:clamp(14px,1.8vw,34px)}
.wkx__count{flex:none;font-family:"Bric",system-ui,sans-serif;font-weight:300;font-size:calc(clamp(2.6rem,min(8vw,11.4vh),9rem) * 2.3);line-height:.84;letter-spacing:-.05em;color:#FF7A3D;font-variant-numeric:tabular-nums}
.wkx__end .wkx__h{line-height:1}
.wkx__cta{position:relative;display:block;overflow:hidden;width:min(100%,640px);height:clamp(58px,9.6vh,94px);margin:0 0 clamp(12px,2.2vh,24px);border-radius:6px;background:rgba(253,251,247,.4);color:#fff;text-decoration:none}
.wkx__cta::before{content:"";position:absolute;left:50%;top:50%;width:120%;aspect-ratio:1;margin:-60% 0 0 -60%;background:conic-gradient(rgba(255,255,255,0) 0 60%,#fff 84%,rgba(255,255,255,0) 100%)}
@media (prefers-reduced-motion:no-preference){.wkx__cta::before{animation:pdfOrbit 3s linear infinite}}
.wkx__ctaf{position:absolute;inset:2px;display:flex;align-items:center;justify-content:space-between;gap:1em;padding:0 clamp(18px,2vw,32px);border-radius:4px;background:#E8541C;transition:background-color .3s,color .3s}
.wkx__ctaf b{text-transform:uppercase;font-family:"Bric",system-ui,sans-serif;font-weight:400;font-size:clamp(1.15rem,min(2.1vw,3.7vh),1.8rem);letter-spacing:-.015em;white-space:nowrap}
.wkx__ctam{display:inline-flex;align-items:center;gap:1em}
.wkx__ctam small{white-space:nowrap;color:inherit;opacity:.88}
.wkx__cta:hover .wkx__ctaf{background:#FDFBF7;color:#121212}
.wkx__cta:hover .arr{transform:translate(3px,-3px)}
.wall,.wall__dim{display:none}

.film-live .pnl--works{width:640vw}
.film-live .wkx{position:absolute;left:0;top:0;display:block;width:100vw;height:100%;padding:0;overflow:hidden;will-change:transform}
.film-live .wkx__in{position:absolute;z-index:7;left:calc(var(--rail) + var(--gutter));top:50%;width:auto;margin-top:calc(clamp(2.6rem,min(8vw,11.4vh),9rem) * -1.1);pointer-events:none}
.film-live .wkx__win{display:block;position:absolute;right:var(--gutter);top:19%;width:50vw;height:66%}
.film-live .wk{position:absolute;z-index:5;left:0;top:0;width:100%;height:100%;visibility:hidden;pointer-events:none}
.film-live .wk:first-of-type{background:transparent}
.film-live .wk:first-of-type .wk__m{box-shadow:0 0 0 1px rgba(253,251,247,.16)}
.film-live .wk__m{pointer-events:auto;background:var(--bg)}
.film-live .wk__c{z-index:1;left:calc(var(--rail) + var(--gutter));bottom:clamp(26px,6vh,72px)}
.film-live .wk__t{font-size:clamp(2.6rem,min(8vw,11.4vh),9rem)}
.film-live .wk__go{right:var(--gutter);bottom:clamp(30px,6.6vh,78px)}
.film-live .wk+.wk::before,.film-live .wkx__end::before{content:"";position:absolute;left:-4px;top:0;bottom:0;width:4px;background:#E8541C}
.film-live .wkx__end{position:absolute;z-index:8;left:0;top:0;width:100%;height:100%;visibility:hidden;display:flex;align-items:center}
.film-live .wkx__endin{position:relative;z-index:2;width:calc(var(--rail) + var(--gutter) + clamp(480px,52vw,1000px));pointer-events:none;
  padding:calc(var(--head-h) + 20px) 0 20px calc(var(--rail) + var(--gutter))}
.film-live .wkx__more{margin:clamp(14px,3vh,34px) 0 0;visibility:hidden}
.film-live .wkx__more a{pointer-events:auto}
.film-live .wkx__count{opacity:0}
/* Die Wand: alle 83 Arbeiten aus dem PDF, jede oeffnet ihre Seite */
.film-live .wall{display:block;position:absolute;inset:0;overflow:hidden}
.film-live .wall__in{position:absolute;left:-14%;top:50%;display:flex;width:128%;transform:translate3d(0,-50%,0) rotate(-5deg)}
.film-live .wall__c{position:relative;flex:1 1 0;min-width:0;aspect-ratio:306/2200;display:flex;flex-direction:column;background:#17181b;will-change:transform}
/* Oben dunkler, damit Logo und PDF-Knopf auf der Wand lesbar bleiben */
.film-live .wall::after{content:"";position:absolute;left:0;right:0;top:0;height:clamp(70px,14vh,130px);background:linear-gradient(180deg,rgba(13,14,12,.86),rgba(13,14,12,0));pointer-events:none}
.wall__c img{position:absolute;inset:0;width:100%;height:100%}
.wall__t{position:relative;flex:1;display:block}
.film-live .wall__dim{display:block;position:absolute;inset:0;opacity:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(13,14,12,.97),rgba(13,14,12,.93) 46%,rgba(13,14,12,.42) 76%,rgba(13,14,12,.2));will-change:opacity}

@media (max-width:1023px),(hover:none),(pointer:coarse){
  .wkx{display:block;height:auto;padding:0}
  .wkx__in,.wkx__end{width:auto;margin-bottom:24px}
  .wkx__h{font-size:clamp(2rem,11.5vw,5rem)}
  .wk{width:auto;aspect-ratio:4/3;margin-bottom:12px}
  .wk__go{display:none}
  .wk__t{font-size:clamp(2rem,11.5vw,5rem)}
  .wk--logo .wk__m img,.wk--poster .wk__m img,.wk--fit .wk__m img{position:static;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
  .wk--logo .wk__m img,.wk--fit .wk__m img{object-fit:contain;-webkit-mask-image:none;mask-image:none}
  .film-live .pnl.pnl--works{width:auto;height:1150svh;padding:0;display:block}
  .film-live .wkx{position:sticky;top:0;width:100%;height:100svh;will-change:auto;margin:0}
  .film-live .wkx .pnl__tag{display:none}
  .film-live .wkx__in{left:var(--gutter);top:calc(var(--head-h) + 22px);margin:0}
  .film-live .wkx__win{left:var(--gutter);right:var(--gutter);top:44%;width:auto;height:46%}
  .film-live .wk{aspect-ratio:auto;margin:0}
  .film-live .wk__m{inset:var(--head-h) 0 auto 0;height:calc(70% - var(--head-h))}
  .film-live .wk__m::after{display:none}
  .film-live .wk__c{left:var(--gutter);right:var(--gutter);bottom:auto;top:calc(70% + 18px)}
  .film-live .wk__t{font-size:clamp(2.6rem,14vw,5rem)}
  .film-live .wk--web .wk__m{height:calc(58% - var(--head-h))}
  .film-live .wk--web .wk__c{top:calc(58% + 22px)}
  .film-live .wk--logo .wk__m,.film-live .wk--fit .wk__m{height:min(75vw,58svh)}
  .film-live .wk--logo .wk__c,.film-live .wk--fit .wk__c{top:calc(var(--head-h) + min(75vw,58svh) + 22px)}
  .film-live .wk__go{display:inline-flex;left:var(--gutter);right:auto;bottom:clamp(26px,6svh,56px);pointer-events:auto}
  .film-live .wkx__end{align-items:flex-end}
  .film-live .wkx__endin{width:100%;padding:0 var(--gutter) 24px}
  .film-live .wkx__more{margin-top:18px}
  .film-live .wall__in{left:-35%;width:170%}
  .film-live .wall__c:nth-child(n+5){display:none}
  .film-live .wall__dim{background:linear-gradient(0deg,rgba(13,14,12,.98),rgba(13,14,12,.94) 58%,rgba(13,14,12,.3) 84%,rgba(13,14,12,.15))}
  .wkx__count{font-size:calc(clamp(2rem,11.5vw,5rem) * 2.3)}
  .wkx__ctam small{display:none}
}

/* --- Werdegang (06): grosse Stationen als Treppe bis heute --- */
.pnl--wayx{width:100vw;padding:0}
.wayx{position:relative;display:flex;flex-direction:column;width:100vw;height:100%;
  padding:calc(var(--head-h) + var(--panel-pad) + clamp(10px,3vh,34px)) var(--gutter) clamp(18px,3.4vh,40px) calc(var(--rail) + var(--gutter))}
.wayx__h{flex:none;margin:0 0 clamp(8px,2vh,24px);font-size:clamp(2.6rem,min(8vw,11.4vh),9rem);line-height:1}
.wayx__h .film__l{display:inline-block;vertical-align:bottom}
.wayx__list{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-start;list-style:none;margin:0;padding:0}
.wayx__r{position:relative;display:flex;align-items:center;gap:clamp(14px,1.6vw,30px);margin-left:calc(var(--i) * 8.5vw);padding:.1vh 0}
.wayx__t{flex:none;margin:0;font-size:clamp(2rem,min(5.4vw,9.4vh),6.4rem);line-height:1.04;letter-spacing:-.025em;white-space:nowrap}
.wayx__r.is-now .wayx__t{color:var(--c-accent)}
.wayx__m{display:flex;flex-direction:column;margin:0;font-size:clamp(.72rem,.86vw,.95rem);line-height:1.3;color:var(--c-soft)}
.wayx__m .lbl{margin-bottom:.15em}
.wayx__m span:nth-child(2){color:var(--c-ink)}
.wayx__line{position:absolute;left:0;right:calc(var(--gutter) * -1);bottom:0;height:1px;background:var(--c-line);display:block}
.wayx__line b{display:block;height:100%;background:#E8541C;transform-origin:0 50%}
.wayx__yr{display:none}
.film-live .pnl--wayx{width:260vw}
.film-live .wayx{position:absolute;left:0;top:0;overflow:hidden;will-change:transform}
.film-live .wayx__r{visibility:hidden}
.film-live .wayx__t{will-change:opacity}
.film-live .wayx__line b{transform:scaleX(0)}
.film-live .wayx__yr{display:block;position:absolute;left:calc(var(--rail) + var(--gutter));bottom:clamp(18px,4vh,46px);height:1em;overflow:hidden;
  font-family:"Bric",system-ui,sans-serif;font-size:clamp(3rem,min(9vw,16vh),10rem);line-height:1;letter-spacing:-.04em;color:var(--c-accent)}
.film-live .wayx__yr>div{will-change:transform}
.film-live .wayx__yr span{display:block;height:1em}
@media (max-width:1023px),(hover:none),(pointer:coarse){
  .pnl--wayx{width:auto}
  .wayx{width:auto;height:auto;padding:0}
  .wayx__h{font-size:clamp(2rem,11.5vw,5rem);margin-bottom:12px}
  .wayx__h .film__l{display:block}
  .wayx__r{flex-direction:column;align-items:flex-start;gap:2px;margin-left:calc(var(--i) * 3.5vw);padding:5px 0 7px}
  .wayx__t{font-size:clamp(1.9rem,10.2vw,4rem)}
  .wayx__m{flex-direction:row;flex-wrap:wrap;gap:0 .6em;font-size:.72rem}
  .wayx__m span:nth-child(2){display:none}
  .film-live .pnl.pnl--wayx{width:auto;height:520svh;padding:0;display:block}
  .film-live .wayx{position:sticky;top:0;width:100%;height:100svh;will-change:auto;padding:calc(var(--head-h) + 14px) var(--gutter) 20px}
  .film-live .wayx .pnl__tag{display:none}
  .film-live .wayx__yr{left:var(--gutter);bottom:18px;font-size:clamp(3rem,20vw,7rem)}
}

/* --- Arbeitsweise (07): Fragen links, Antwort gross daneben --- */
.pnl--faq{align-items:stretch}
.fq{display:flex;flex-direction:column;justify-content:center;height:100%}
.fq__h{margin:0 0 clamp(10px,2.4vh,30px);font-size:clamp(2rem,min(8vw,11.4vh),9rem);line-height:1;white-space:nowrap}
.faq{position:relative}
.faq__i{border-top:1px solid var(--c-line)}
.faq__i:last-child{border-bottom:1px solid var(--c-line)}
.faq__q{width:100%;display:flex;align-items:center;gap:clamp(10px,1.2vw,22px);padding:.42em 0;text-align:left;color:var(--c-ink);cursor:pointer;
  font-family:"Bric",system-ui,sans-serif;font-size:clamp(1.05rem,min(2.2vw,4vh),2.5rem);line-height:1.12;letter-spacing:-.015em}
.faq__q .lbl{flex:none;width:2.2em;color:var(--c-accent)}
.faq__q u{flex:1;text-decoration:none;transition:transform .45s var(--ease)}
.faq__q i{flex:none;position:relative;width:12px;height:12px}
.faq__q i::before,.faq__q i::after{content:"";position:absolute;inset:0;margin:auto;background:var(--c-soft)}
.faq__q i::before{width:12px;height:1px}
.faq__q i::after{width:1px;height:12px;transition:transform .4s var(--ease)}
.faq__i.is-open .faq__q i::after{transform:scaleY(0)}
.faq__i.is-open .faq__q i::before{background:var(--c-accent)}
.faq__a{height:0;overflow:hidden}
.faq__no{display:none}
.faq__a p{margin:0;padding:0 0 .9rem;font-size:clamp(.95rem,2.4vw,1.15rem);line-height:1.45;color:var(--c-text)}
@media (min-width:1024px) and (hover:hover) and (pointer:fine){
  .faq{width:56%}
  .faq__q{transition:color .3s}
  .faq__i:not(.is-open) .faq__q{color:var(--c-soft)}
  .faq__i.is-open .faq__q u{transform:translate3d(.5em,0,0)}
  .faq__q i{transform:rotate(0);opacity:0;transition:opacity .3s}
  .faq__i.is-open .faq__q i{opacity:1}
  .faq__i.is-open .faq__q i::before{width:clamp(20px,3vw,56px);left:auto;right:0;height:2px;background:#E8541C}
  .faq__q i::after{display:none}
  .faq__a{position:absolute;left:calc(100% + clamp(30px,5vw,96px));top:0;bottom:0;width:66%;height:auto!important;overflow:visible;
    display:flex;align-items:center;visibility:hidden;opacity:0;transform:translate3d(0,14px,0);transition:opacity .3s,transform .5s var(--ease),visibility 0s .3s}
  .faq__i.is-open .faq__a{visibility:visible;opacity:1;transform:none;transition:opacity .4s .06s,transform .5s var(--ease) .06s,visibility 0s}
  .faq__no{display:block;margin-bottom:.12em;font-family:"Bric",system-ui,sans-serif;font-weight:300;font-size:clamp(3.4rem,min(9vw,17vh),10rem);line-height:1;letter-spacing:-.04em;color:#FF7A3D}
  .faq__a p{padding:0;font-size:clamp(1.1rem,min(2vw,3.6vh),2.2rem);line-height:1.28;letter-spacing:-.01em;color:var(--c-ink)}
}

/* --- Referenzen-PDF: Gegenfarbe zur Flaeche, ein Licht laeuft um die Kante --- */
.pdfx{position:fixed;z-index:90;top:clamp(10px,1.6vh,16px);left:calc(var(--rail) + var(--gutter));
  display:block;width:var(--pdf-w);height:clamp(38px,4.8vh,44px);border-radius:6px;text-decoration:none;text-transform:uppercase;letter-spacing:.06em;color:#fff;background:#D94A12;
  transition:opacity .35s,visibility .35s,background-color .3s,color .3s}
/* Schallwellen: ab und zu laufen drei Ringe vom Knopf nach aussen, nur transform und opacity */
.pdfx::before,.pdfx::after,.pdfx__f::before{content:"";position:absolute;inset:0;z-index:-1;border:1.5px solid #E8541C;border-radius:6px;opacity:0;pointer-events:none}
@media (prefers-reduced-motion:no-preference){
  .pdfx::before,.pdfx::after,.pdfx__f::before{animation:pdfWave 4.5s cubic-bezier(.2,.6,.3,1) infinite}
  .pdfx::after{animation-delay:.26s}
  .pdfx__f::before{animation-delay:.52s}
}
@keyframes pdfWave{0%{transform:none;opacity:0}2%{opacity:.85}26%,100%{transform:scale(1.13,1.55);opacity:0}}
@keyframes pdfOrbit{to{transform:rotate(360deg)}}
.pdfx__f{position:relative;display:flex;align-items:center;justify-content:center;height:100%;padding:0 clamp(14px,1.3vw,22px);
  font-family:"Jost",sans-serif;font-size:clamp(.8rem,.9vw,.95rem);font-weight:500;letter-spacing:.01em;white-space:nowrap}
.pdfx__r{position:relative;display:block;height:1.3em;line-height:1.3;overflow:hidden}
.pdfx__r>span{display:block;transition:transform .5s var(--ease)}
.pdfx__r>span+span{position:absolute;left:0;right:0;text-align:center}
.pdfx em{color:inherit;margin-left:.7em;padding-left:.7em;border-left:1px solid rgba(255,255,255,.5);font-style:normal;font-weight:500;letter-spacing:.08em;font-size:.86em}
.pdfx:hover{background:#FDFBF7;color:#121212}
.pdfx:hover .pdfx__r>span{transform:translate3d(0,-100%,0)}
.menu-open .pdfx,.pdf-off .pdfx{opacity:0;visibility:hidden;pointer-events:none}
.menu-open .pdfx::before,.menu-open .pdfx::after,.menu-open .pdfx__f::before{animation-play-state:paused}
@media (max-width:1023px),(hover:none),(pointer:coarse){
  .pdfx{top:10px;left:54px;width:auto;height:34px}
  .pdfx__f{padding:0 13px;font-size:.74rem}
}
@media print{.pdfx{display:none!important}}
/* Schmale Fenster: die zweite Kopfangabe weicht der PDF-Pille */
@media (max-width:1320px){.pnl__m+.pnl__m{display:none}}
/* --- Feste Kopfzeile aus Glas: bleibt beim Blaettern ruhig, nur der Inhalt wechselt --- */
.hdr{display:none}
.hdr-on .hdr{--c-ink:var(--ui-ink);--c-soft:var(--ui-soft);--c-accent:var(--ui-accent);--c-line:var(--ui-line);--c-text:var(--ui-ink);display:block;position:fixed;z-index:69;left:var(--rail);right:0;top:0;
  height:calc(clamp(10px,1.6vh,16px) * 2 + clamp(38px,4.8vh,44px));color:var(--ui-ink);background:var(--ui-bg);background:color-mix(in srgb,var(--ui-bg) 74%,transparent);
  -webkit-backdrop-filter:blur(14px) saturate(1.25);backdrop-filter:blur(14px) saturate(1.25);border-bottom:1px solid var(--ui-line)}
.hdr__t{position:absolute;left:var(--gutter);top:0;bottom:0;display:flex;align-items:center;gap:clamp(16px,3vw,56px);white-space:nowrap;opacity:0;transition:opacity .35s}
.hdr__t.is-on{opacity:1}
.hdr__t b{font-family:"Bric",system-ui,sans-serif;font-weight:400;font-size:1.2rem;color:var(--ui-accent)}
.hdr__t .pnl__m b{font-size:.68rem}
.hdr-on .pnl__tag{visibility:hidden}
.hdr-on .rail__logo{color:var(--ui-ink)}
/* --- Wellen-Pfeile: zusammen unten rechts im Seitenrand, der Inhalt bleibt frei --- */
.wvy{--wvy:clamp(40px,calc(var(--gutter) - 14px),56px);--wvy-b:clamp(14px,2.4vh,24px);position:fixed;z-index:72;right:calc((var(--gutter) - var(--wvy)) / 2);bottom:var(--wvy-b);width:var(--wvy);height:var(--wvy);padding:0;
  border:1px solid rgba(253,251,247,.42);border-radius:50%;background:#121212;color:#FDFBF7;transition:border-color .25s,opacity .3s,visibility .3s,transform .4s cubic-bezier(.22,1,.3,1)}
.wvy--prev{bottom:calc(var(--wvy-b) + var(--wvy) + 8px)}
.wvy--next.is-hide+.wvy--prev{bottom:var(--wvy-b)}
.wvy::before{content:"";position:absolute;inset:-1px;border-radius:50%;background:#E8541C;transform:scale(0);transition:transform .38s cubic-bezier(.22,1,.3,1)}
.wvy svg{position:absolute;left:13%;top:0;display:block;width:74%;height:100%;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.wvy--prev svg{transform:scaleX(-1)}
.wvy:hover{border-color:#E8541C;transform:scale(1.06)}
.wvy:hover::before{transform:scale(1)}
.wvy.is-hide,.menu-open .wvy{opacity:0;visibility:hidden;pointer-events:none}
@media print{.wvy,.hdr{display:none!important}}

/* Telefone: Rauschen etwas schwaecher, kleinere Ebene (die Spruenge bleiben unter 128px) und Bild statt SVG-Filter */
@media (max-width:1023px),(hover:none),(pointer:coarse){
  .tv{will-change:auto}
  .tv i{inset:-128px;opacity:.05}
  .mob::after{inset:-128px;opacity:.15;background:url("../img/ui/tv-noise.webp") 0 0/256px 256px}
  .kit__media::after{opacity:.08;background:url("../img/ui/tv-noise.webp") 0 0/256px 256px}
  .intro__wall::after{opacity:.1;background:url("../img/ui/tv-noise.webp") 0 0/256px 256px}
}
/* Telefone: die ganze Seite darf keine eigene Grafikebene sein (Schichtung bleibt durch isolation) */
@media (max-width:1023px),(hover:none),(pointer:coarse){
  .hz__track{will-change:auto;isolation:isolate}
  .c,.btn,.kit__tile,.kit__core,.kit__ring,.kit__sum{will-change:auto}
}
/* Telefon-Menue: Liste oben statt mittig */
@media (max-width:767px){
  .mob{justify-content:flex-start;padding-top:clamp(72px,11vh,104px)}
}
/* Telefon quer: die ganze Liste passt in die Hoehe */
@media (max-width:1023px) and (max-height:520px),(hover:none) and (max-height:520px){
  .mob{justify-content:flex-start;padding-top:calc(44px + 2svh);padding-bottom:8px}
  .mob__nav button{font-size:8svh}
}
/* Sehr schmale Telefone: die E-Mail darf in die naechste Zeile, der PDF-Knopf bleibt frei vom Logo */
@media (max-width:360px){
  .pdfx{letter-spacing:.02em}
  .pdfx__f{padding:0 9px;font-size:.66rem}
  .ct__list a,.ct__list div{flex-wrap:wrap;gap:2px 14px}
}
/* Kurze Telefone hochkant: die grosse Jahreszahl darf die Liste nicht beruehren */
@media (max-width:1023px) and (min-height:521px) and (max-height:700px){
  .wayx__h{font-size:min(11.5vw,6vh);margin-bottom:6px}
  .wayx__r{gap:0;padding:2px 0 3px}
  .wayx__t{font-size:min(10.2vw,5vh)}
  .film-live .wayx__yr{bottom:10px;font-size:min(20vw,10vh)}
}
/* Telefon quer: wenig Hoehe, also Titel einzeilig und Inhalt zuerst */
@media (max-width:1023px) and (max-height:520px),(hover:none) and (max-height:520px){
  .film-live .wayx{padding:calc(var(--head-h) + 6px) var(--gutter) 8px}
  .wayx__h{font-size:clamp(1.5rem,11vh,2.6rem);margin-bottom:4px}
  .wayx__h .film__l{display:inline-block}
  .wayx__r{flex-direction:row;align-items:baseline;gap:10px;margin-left:calc(var(--i) * 3vw);padding:2px 0 3px}
  .wayx__t{font-size:clamp(1.3rem,8.4vh,2.2rem)}
  .film-live .wayx__yr{left:auto;right:var(--gutter);bottom:8px;font-size:clamp(2.2rem,18vh,4.4rem)}

  .pnl--kit{--w:calc(100vw - 2 * var(--gutter) - 44px)}
  .film-live .kit{padding:calc(var(--head-h) + 4px) var(--gutter) 8px}
  .film-live .kit__lead{display:none}
  .film-live .kit__heads{height:1.04em;margin:0 0 6px;font-size:clamp(1.5rem,11vh,2.6rem)}
  .film-live .kit__h .film__l{display:inline-block;margin-right:-.12em}
  .kit__card{min-height:0}
  .kit__dock{margin-top:0}
  .kit__text{display:none}
  .kit__body{flex-direction:row;align-items:center;padding-top:6px;padding-bottom:6px}

  .film-live .wkx__in{top:calc(var(--head-h) + 8px)}
  .film-live .wkx__h{font-size:clamp(1.5rem,11vh,2.6rem)}
  .film-live .wkx__h .film__l{display:inline-block;margin-right:.1em}
  .film-live .wk__go{display:none}
  .film-live .wkx__win{left:38%;top:calc(var(--head-h) + 8px);height:calc(100% - var(--head-h) - 16px)}
  .film-live .wk__m{height:100%!important;inset:0 0 0 auto;width:62%}
  .film-live .wk__c{left:var(--gutter);right:auto;width:34%;top:calc(var(--head-h) + 14px);bottom:auto!important}
  .film-live .wk__t{font-size:clamp(1.5rem,11vh,2.6rem)}
  .film-live .wkx__endin{padding-top:var(--head-h)}
  .film-live .wkx__count{font-size:clamp(2.4rem,18vh,4.4rem)}
  .film-live .wkx__endin .wkx__h{font-size:clamp(1.2rem,8vh,2rem)}
  .film-live .wkx__nums{margin-bottom:.4em}
  .film-live .wkx__end .lead{display:none}
  .wkx__cta{height:46px;margin-bottom:6px}
}

/* Touch: kein Nachfedern an Anfang und Ende der Seite */
@media (hover:none),(pointer:coarse){html,body{overscroll-behavior-y:none}}