/* ===== Schriften (lokal, keine Anfrage an Dritte) ===== */
@font-face{font-family:Cinzel;src:url(fonts/cinzel.woff2) format("woff2");font-weight:400 900;font-display:swap}
@font-face{font-family:Outfit;src:url(fonts/outfit-400.woff2) format("woff2");font-weight:300 500;font-display:swap}
@font-face{font-family:Outfit;src:url(fonts/outfit-700.woff2) format("woff2");font-weight:600 900;font-display:swap}
@font-face{font-family:Cormorant;src:url(fonts/cormorant.woff2) format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:Cormorant;src:url(fonts/cormorant-italic.woff2) format("woff2");font-weight:300 700;font-style:italic;font-display:swap}
/* Maßstab: Beim Bau wird jede Länge mit --k multipliziert (tools/massstab.mjs). Auf großen Bildschirmen erscheint so alles kleiner,
   wie in der verkleinerten Vorschau des Dashboards. Die Werte im Quelltext sind die Maße bei --k = 1. */
:root{--k:1}
@media (min-width:1700px){:root{--k:.9}}
@media (min-width:2000px){:root{--k:.82}}
@media (min-width:2400px){:root{--k:.73}}
/* Polnische Buchstaben: werden nur geladen, wenn die Seite sie braucht. Gleiche Gewichts-Angaben wie oben, sonst verdrängen sie die Hauptschrift. Für Outfit kommt die verwandte Montserrat. */
@font-face{font-family:Cinzel;src:url(fonts/cinzel-ext.woff2) format("woff2");font-weight:400 900;font-display:swap;unicode-range:U+0100-017F}
@font-face{font-family:Outfit;src:url(fonts/outfit-ext.woff2) format("woff2");font-weight:300 500;font-display:swap;size-adjust:94%;unicode-range:U+0100-017F}
@font-face{font-family:Outfit;src:url(fonts/outfit-ext.woff2) format("woff2");font-weight:600 900;font-display:swap;size-adjust:94%;unicode-range:U+0100-017F}
@font-face{font-family:Cormorant;src:url(fonts/cormorant-ext.woff2) format("woff2");font-weight:300 700;font-display:swap;unicode-range:U+0100-017F}
@font-face{font-family:Cormorant;src:url(fonts/cormorant-ext-italic.woff2) format("woff2");font-weight:300 700;font-style:italic;font-display:swap;unicode-range:U+0100-017F}

/* Parallaxe-Werte erben nicht, sonst rechnet der Browser pro Bild den ganzen Teilbaum neu */
@property --py{syntax:'<length>';inherits:false;initial-value:0px}
@property --px{syntax:'<length>';inherits:false;initial-value:0px}

/* ===== Tokens ===== */
:root{
  --cream:#f8f2e7;--cream-2:#f1e7d5;--cream-3:#ebddc4;--paper:#fffaf0;
  --ink:#2b2117;--espresso:#30251a;--espresso-2:#2d1e12;--brown:#57442a;--muted:#6b5636;--taupe:#8f7853;
  --gold-text:#7a5b1b;--gold:#c9a24e;--gold-2:#e6cb85;--gold-light:#f1da9c;--gold-deep:#a8822f;
  --mint:#2f8f6b;--mint-2:#6fd0a8;--mint-deep:#14573f;--water:#5d8fbd;--heat:#d4692a;
  --line:rgba(48,37,26,.46);--line-soft:rgba(48,37,26,.15);
  --glass-a:rgba(255,253,247,.8);--glass-b:rgba(250,243,230,.58);
  --shadow:0 calc(24px*var(--k)) calc(60px*var(--k)) calc(-30px*var(--k)) rgba(70,50,20,.34),0 2px calc(8px*var(--k)) calc(-4px*var(--k)) rgba(70,50,20,.1);
  --t:clamp(calc(18.5px*var(--k)),calc(1.42vw*var(--k)),calc(22px*var(--k)));--buehne:radial-gradient(85% 80% at 50% 50%,#7c5b37,#5d4128 62%,#49321e);--r:calc(22px*var(--k));--r-s:calc(14px*var(--k));--foto-spalt:clamp(calc(6px*var(--k)),calc(.7vw*var(--k)),calc(10px*var(--k)));
  --ease:cubic-bezier(.2,.75,.2,1);--spring:cubic-bezier(.3,1.5,.5,1);
  --serif:Cinzel,"Times New Roman",serif;--sans:Outfit,system-ui,-apple-system,"Segoe UI",sans-serif;--ital:Cormorant,Georgia,serif;
  --gold-grad:linear-gradient(100deg,#553d0d 0%,#6f5215 22%,#8a6a1d 44%,#f0d994 50%,#8a6a1d 56%,#6f5215 78%,#553d0d 100%);
  --btn-grad:linear-gradient(160deg,#fbeec2 0%,#ecd18a 45%,#d4b05c 100%);
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(112px*var(--k))}
body{margin:0;background:var(--cream);color:var(--ink);font:400 clamp(calc(18.5px*var(--k)),calc(1.38vw*var(--k)),calc(21px*var(--k)))/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
html,body{overflow-x:clip}
img,svg,canvas,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--mint);outline-offset:calc(3px*var(--k));border-radius:calc(6px*var(--k))}
.svg-defs{position:absolute;width:0;height:0}
.skip{position:fixed;left:calc(16px*var(--k));top:calc(-80px*var(--k));z-index:100;background:var(--espresso);color:var(--gold-light);padding:calc(10px*var(--k)) calc(18px*var(--k));border-radius:calc(999px*var(--k));transition:top .2s}
.skip:focus{top:calc(12px*var(--k))}

/* Papiergrund mit Lichthof, wie im Flyer */
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:
  radial-gradient(calc(70vw*var(--k)) calc(60*var(--fh,1vh)*var(--k)) at 86% 6%,rgba(255,251,240,.95),transparent 70%),
  radial-gradient(calc(80vw*var(--k)) calc(70*var(--fh,1vh)*var(--k)) at 0% 100%,rgba(212,191,155,.34),transparent 70%),
  linear-gradient(180deg,var(--cream),var(--cream-2) 60%,var(--cream-3))}

.wrap{width:min(calc(1240px*var(--k)),100%);margin-inline:auto;padding-inline:clamp(calc(20px*var(--k)),calc(4vw*var(--k)),calc(44px*var(--k)));position:relative;z-index:3}
.wrap--eng{width:min(calc(860px*var(--k)),100%)}
main{position:relative;display:block}
section{position:relative}
.sek{padding-block:clamp(calc(72px*var(--k)),calc(10vw*var(--k)),calc(150px*var(--k)))}
.sek--klein{padding-block:clamp(calc(56px*var(--k)),calc(7vw*var(--k)),calc(100px*var(--k)))}

/* ===== Typografie ===== */
h1,h2,h3{font-family:var(--serif);font-weight:700;line-height:1.1;letter-spacing:.005em;color:var(--espresso)}
h1{font-size:clamp(calc(42px*var(--k)),calc(6.2vw*var(--k)),calc(88px*var(--k)))}
h2{font-size:clamp(calc(30px*var(--k)),calc(4.2vw*var(--k)),calc(56px*var(--k)))}
h3{font-size:clamp(calc(22px*var(--k)),calc(2vw*var(--k)),calc(28px*var(--k)));line-height:1.2}
/* In Karten die Logo-Schrift von Pixelantium */
.glass h3,.st__txt h3,.thema h3,.weiter b,.modus__name,.simblock__knoepfe button b,.dokkarte b,.hs-text b{font-family:var(--sans);font-weight:700;letter-spacing:0}
.gold{background:var(--gold-grad);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
/* Die Goldfarbe malt nur in ihrer Fläche: oben etwas Luft, sonst fehlen die Punkte auf Ö, Ä, Ü. Der Rand gleicht sich aus, nichts verrutscht. */
.gold{padding-block:.18em .08em;margin-block:-.18em -.08em}
.is-in .gold,.gold.is-in{animation:glanz 2.6s var(--ease) both}
@keyframes glanz{from{background-position:100% 0}to{background-position:0 0}}
.lead{font-size:clamp(calc(20px*var(--k)),calc(1.65vw*var(--k)),calc(24px*var(--k)));line-height:1.6;color:#3b2e1e;max-width:62ch}
.klein{font-size:var(--t);line-height:1.55;color:var(--muted)}
.kicker{display:inline-flex;align-items:center;gap:calc(10px*var(--k));font-weight:700;font-size:var(--t);letter-spacing:.11em;text-transform:uppercase;color:var(--gold-text)}
.kicker svg{width:calc(15px*var(--k));height:calc(15px*var(--k));fill:var(--gold);flex:none}
.sek-kopf{display:grid;gap:calc(14px*var(--k));margin-bottom:clamp(calc(30px*var(--k)),calc(4vw*var(--k)),calc(60px*var(--k)));max-width:calc(820px*var(--k))}
.sek-kopf--mitte{margin-inline:auto;text-align:center;justify-items:center}
.sek-kopf .lead{margin-top:calc(4px*var(--k))}

/* ===== Glas ===== */
.glass{position:relative;border-radius:var(--r);background:linear-gradient(160deg,var(--glass-a),var(--glass-b));box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.75)}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(135deg,rgba(48,37,26,.5),rgba(48,37,26,.06) 34%,rgba(48,37,26,.05) 66%,rgba(48,37,26,.36));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.glass--dark{background:linear-gradient(165deg,rgba(84,60,38,.86),rgba(50,34,20,.9));color:#f3e8d4;box-shadow:0 calc(30px*var(--k)) calc(70px*var(--k)) calc(-30px*var(--k)) rgba(20,12,4,.7),inset 0 1px 0 rgba(255,235,190,.16)}
.glass--dark::before{background:linear-gradient(135deg,rgba(241,218,156,.6),rgba(241,218,156,.05) 34%,rgba(241,218,156,.05) 66%,rgba(241,218,156,.42))}
.glass--dark h3,.glass--dark h2{color:var(--gold-light)}
.glass--dark .kicker{color:var(--gold-2)}

/* Lichtfleck folgt dem Zeiger */
.licht{isolation:isolate}
.licht::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;z-index:0;
  background:radial-gradient(calc(340px*var(--k)) circle at var(--mx,50%) var(--my,50%),rgba(236,205,130,.34),transparent 65%)}
.licht:hover::after{opacity:1}
.glass--dark.licht::after{background:radial-gradient(calc(380px*var(--k)) circle at var(--mx,50%) var(--my,50%),rgba(236,205,130,.2),transparent 65%)}
.licht>*{position:relative;z-index:1}
.kipp{transform:perspective(calc(1100px*var(--k))) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s var(--ease)}
.kipp.is-kipp{transition:transform .08s linear}

/* ===== Knöpfe ===== */
.btn{--h:calc(52px*var(--k));display:inline-flex;align-items:center;justify-content:center;gap:calc(10px*var(--k));min-height:var(--h);padding:0 calc(26px*var(--k));border-radius:calc(999px*var(--k));font-weight:700;font-size:var(--t);letter-spacing:.01em;text-decoration:none;position:relative;overflow:hidden;transition:transform .35s var(--spring),box-shadow .3s,background .3s,color .3s;white-space:nowrap}
.btn svg{width:calc(18px*var(--k));height:calc(18px*var(--k));flex:none;transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(calc(3px*var(--k)))}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn--gold{background:var(--btn-grad);color:#3f2d0c;box-shadow:0 calc(12px*var(--k)) calc(28px*var(--k)) calc(-12px*var(--k)) rgba(150,110,30,.75),inset 0 1px 0 rgba(255,255,255,.7),inset 0 0 0 1px rgba(160,120,40,.5)}
.btn--gold::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s var(--ease)}
.btn--gold:hover::after{transform:translateX(120%)}
.btn--gold:hover{box-shadow:0 calc(16px*var(--k)) calc(36px*var(--k)) calc(-10px*var(--k)) rgba(190,140,40,.85),0 0 0 calc(4px*var(--k)) rgba(230,203,133,.25),inset 0 1px 0 rgba(255,255,255,.7),inset 0 0 0 1px rgba(160,120,40,.5)}
.btn--ghost{color:var(--espresso);background:rgba(255,253,247,.4);box-shadow:inset 0 0 0 1px var(--line)}
.btn--ghost:hover{background:rgba(255,253,247,.8)}
.dark .btn--ghost,.glass--dark .btn--ghost{color:var(--gold-light);background:rgba(255,235,190,.06);box-shadow:inset 0 0 0 1px rgba(241,218,156,.45)}
.dark .btn--ghost:hover,.glass--dark .btn--ghost:hover{background:rgba(255,235,190,.14)}
.btn--sm{--h:calc(42px*var(--k));padding:0 calc(20px*var(--k));font-size:var(--t)}
.btn-reihe{display:flex;flex-wrap:wrap;gap:calc(14px*var(--k));align-items:center}

/* Beleg-Knopf: kleiner Verweis aufs Original */
.quelle{display:inline-flex;align-items:center;gap:calc(8px*var(--k));font-size:var(--t);font-weight:600;color:var(--gold-text);text-align:left;line-height:1.3;text-decoration:none;padding:calc(6px*var(--k)) calc(12px*var(--k)) calc(6px*var(--k)) calc(8px*var(--k));border-radius:calc(999px*var(--k));background:rgba(201,162,78,.12);box-shadow:inset 0 0 0 1px rgba(168,130,47,.3);transition:background .25s,transform .3s var(--spring)}
.quelle:hover{background:rgba(201,162,78,.26);transform:translateY(-1px)}
.quelle svg{width:calc(15px*var(--k));height:calc(15px*var(--k));flex:none}
.dark .quelle,.glass--dark .quelle{color:var(--gold-light);background:rgba(241,218,156,.1);box-shadow:inset 0 0 0 1px rgba(241,218,156,.32)}
.dark .quelle:hover,.glass--dark .quelle:hover{background:rgba(241,218,156,.22)}
.textlink{font-weight:700;color:var(--gold-text);text-decoration:none;display:inline-flex;align-items:center;gap:calc(7px*var(--k))}
.textlink svg{width:calc(16px*var(--k));height:calc(16px*var(--k));transition:transform .3s var(--ease)}
.textlink:hover svg{transform:translateX(calc(4px*var(--k)))}
.dark .textlink,.glass--dark .textlink{color:var(--gold-light)}

/* „Kurz gesagt“ */
.einfach{display:flex;gap:calc(12px*var(--k));align-items:flex-start;font-size:var(--t);line-height:1.5;padding:calc(12px*var(--k)) calc(16px*var(--k));border-radius:var(--r-s);background:rgba(47,143,107,.09);box-shadow:inset 0 0 0 1px rgba(47,143,107,.24);color:#22392f}
.einfach svg{width:calc(18px*var(--k));height:calc(24px*var(--k));flex:none;fill:var(--mint);margin-top:1px}
.einfach b{color:var(--mint-deep)}
.dark .einfach,.glass--dark .einfach{background:rgba(111,208,168,.1);box-shadow:inset 0 0 0 1px rgba(111,208,168,.28);color:#dcefe6}
.dark .einfach b,.glass--dark .einfach b{color:var(--mint-2)}
.dark .einfach svg,.glass--dark .einfach svg{fill:var(--mint-2)}

/* Dunkle Bühne */
.dark{color:#efe3cd;--line:rgba(241,218,156,.4);--line-soft:rgba(241,218,156,.16);padding-block:clamp(calc(40px*var(--k)),calc(6vw*var(--k)),calc(90px*var(--k))) clamp(calc(70px*var(--k)),calc(9vw*var(--k)),calc(130px*var(--k)))}
.dark>.wrap{z-index:3}
.dark::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:
  radial-gradient(calc(60vw*var(--k)) calc(50*var(--fh,1vh)*var(--k)) at 20% 20%,rgba(120,84,30,.34),transparent 70%),
  radial-gradient(calc(70vw*var(--k)) calc(60*var(--fh,1vh)*var(--k)) at 90% 90%,rgba(47,110,86,.16),transparent 70%),
  linear-gradient(180deg,var(--espresso-2),#38271a 50%,var(--espresso-2))}
.dark h2,.dark h3{color:var(--gold-light)}
.dark .gold,.glass--dark .gold{background:linear-gradient(100deg,#b8913f,#f7e8bd 45%,#e6cb85 60%,#b8913f);background-size:220% 100%;-webkit-background-clip:text;background-clip:text}
.dark .lead{color:#e4d7bf}
.dark .klein{color:#bfae8f}
.dark .kicker{color:var(--gold-2)}
.uebergang{height:clamp(calc(90px*var(--k)),calc(14vw*var(--k)),calc(200px*var(--k)));position:relative;z-index:1;pointer-events:none}
.uebergang--rein{background:linear-gradient(180deg,transparent,var(--espresso-2))}
.uebergang--raus{background:linear-gradient(180deg,var(--espresso-2),transparent)}

/* Einblenden beim Scrollen */
.js [data-rein]{opacity:0;transform:translateY(calc(22px*var(--k)));transition:opacity .65s var(--ease),transform .75s var(--ease);transition-delay:var(--d,0ms)}
.js [data-rein].is-in{opacity:1;transform:none}
.js [data-rein="zoom"]{transform:scale(.94)}
.js [data-rein="links"]{transform:translateX(calc(-30px*var(--k)))}
.js [data-rein="rechts"]{transform:translateX(calc(30px*var(--k)))}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .js [data-rein]{opacity:1;transform:none}
}

/* ===== Navigation ===== */
.nav{position:fixed;left:0;right:0;top:0;z-index:30;padding:calc(14px*var(--k)) clamp(calc(12px*var(--k)),calc(2.4vw*var(--k)),calc(28px*var(--k)));transition:transform .45s var(--ease),padding .3s}
.nav.is-weg{transform:translateY(-110%)}
.nav.is-klein{padding-block:calc(8px*var(--k))}
.nav__in{display:flex;align-items:center;gap:clamp(calc(14px*var(--k)),calc(2vw*var(--k)),calc(30px*var(--k)));margin-inline:auto;max-width:calc(1320px*var(--k));min-height:calc(56px*var(--k));padding:calc(6px*var(--k)) calc(10px*var(--k)) calc(6px*var(--k)) calc(20px*var(--k));border-radius:calc(999px*var(--k));position:relative;
  background:linear-gradient(160deg,#573e26,#33221a 55%,#2b1c12);
  box-shadow:0 calc(16px*var(--k)) calc(36px*var(--k)) calc(-18px*var(--k)) rgba(30,15,5,.8),0 0 0 1px rgba(255,205,130,.22),inset 0 1px 0 rgba(255,225,160,.3)}
.nav__in::after{content:"";position:absolute;left:6%;right:6%;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,205,130,.42),transparent)}
.logo{display:inline-flex;align-items:center;gap:calc(10px*var(--k));text-decoration:none;flex:none;position:relative;transition:transform .4s var(--spring)}
/* Der Tropfen entspringt dem Logo */
.logo--geburt::before{content:"";position:absolute;left:calc(10.5% - calc(45px*var(--k)));top:60%;width:calc(90px*var(--k));height:calc(90px*var(--k));margin-top:calc(-45px*var(--k));border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(255,214,110,.85),rgba(255,214,110,.28) 42%,transparent 70%);opacity:0;animation:logoGlut 2.6s var(--ease) .35s both}
@keyframes logoGlut{0%{opacity:0;transform:scale(.4)}35%{opacity:1;transform:scale(1.15)}60%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(1.5)}}
.logo--geburt .logo__bild{transform-origin:10% 70%;animation:logoPuls 1.6s var(--ease) .5s both}
@keyframes logoPuls{0%{transform:none}38%{transform:scale(1.05)}70%{transform:scale(.99)}100%{transform:none}}
.logo__funken{position:absolute;left:10.5%;top:60%;width:0;height:0;pointer-events:none;z-index:2}
.logo__funken i{position:absolute;width:calc(3px*var(--k));height:calc(3px*var(--k));margin:-1.5px;border-radius:50%;background:#ffe9a8;box-shadow:0 0 calc(5px*var(--k)) 1px rgba(255,205,90,.9);opacity:0;animation:logoFunke 1.5s var(--ease) calc(.7s + var(--d)) both}
@keyframes logoFunke{0%{opacity:0;transform:rotate(var(--w)) translateX(calc(4px*var(--k))) scale(.4)}25%{opacity:1}100%{opacity:0;transform:rotate(var(--w)) translateX(calc(46px*var(--k))) scale(1)}}
.logo:hover{transform:scale(1.03)}
.logo__bild{height:min(calc(66px*var(--k)),calc((100vw - calc(200px*var(--k)))/3.64));width:auto;display:block}
/* Das Logo ist größer als die Leiste und hängt unten über ihren Rand */
@media (min-width:1061px){
  .nav .logo__bild{height:calc(88px*var(--k))}
  .nav .logo{margin-block:calc(-20px*var(--k)) calc(-38px*var(--k))}
}
.nav__links>a,.drop__btn,.nav__cta{white-space:nowrap}
@media (min-width:1061px) and (max-width:1320px){
  .nav .logo__bild{height:calc(72px*var(--k))}
  .nav .logo{margin-block:calc(-14px*var(--k)) calc(-30px*var(--k))}
  .nav__in{gap:calc(12px*var(--k))}
}
@media (min-width:1061px) and (max-width:1200px){
  .nav__cta{display:none}
  .nav .logo__bild{height:calc(66px*var(--k))}
  .nav .logo{margin-block:calc(-12px*var(--k)) calc(-26px*var(--k))}
}
.nav__links{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav__links>a,.drop__btn{display:inline-flex;align-items:center;gap:calc(6px*var(--k));padding:calc(9px*var(--k)) calc(14px*var(--k));border-radius:calc(999px*var(--k));font-weight:600;font-size:var(--t);text-decoration:none;color:var(--espresso);transition:background .25s,color .25s}
.nav__links>a:hover,.drop__btn:hover,.drop.is-offen .drop__btn{background:rgba(201,162,78,.18)}
.nav__links>a[aria-current=page]{color:var(--gold-text);box-shadow:inset 0 -2px 0 var(--gold)}
.drop{position:relative}
.drop__btn svg{transition:transform .3s var(--ease)}
.drop.is-offen .drop__btn svg{transform:rotate(180deg)}
.drop__panel{position:absolute;left:50%;top:calc(100% + calc(14px*var(--k)));width:calc(760px*var(--k));display:grid;grid-template-columns:1fr 1fr;gap:calc(4px*var(--k));padding:calc(12px*var(--k));transform:translate(-50%,calc(10px*var(--k)));opacity:0;visibility:hidden;transition:opacity .25s,transform .35s var(--ease),visibility .25s;background:linear-gradient(160deg,rgba(255,253,247,.96),rgba(248,240,226,.92))}
.drop.is-offen .drop__panel{opacity:1;visibility:visible;transform:translate(-50%,0)}
.drop__panel a{display:grid;gap:2px;padding:calc(12px*var(--k)) calc(14px*var(--k));border-radius:var(--r-s);text-decoration:none;transition:background .2s,transform .3s var(--ease)}
.drop__panel a:hover{background:rgba(201,162,78,.16);transform:translateX(calc(3px*var(--k)))}
.drop__panel b{font-size:var(--t);color:var(--espresso)}
.drop__panel span{font-size:var(--t);line-height:1.35;color:var(--muted)}
.drop__panel a[aria-current=page] b{color:var(--gold-text)}
.sprachen{display:flex;align-items:center;gap:calc(9px*var(--k));flex:none}
.flagge{position:relative;display:block;width:calc(34px*var(--k));height:calc(23px*var(--k));border-radius:calc(5px*var(--k));overflow:hidden;box-shadow:0 0 0 1px rgba(48,37,26,.24),0 calc(3px*var(--k)) calc(9px*var(--k)) rgba(48,37,26,.24);transition:transform .4s var(--spring),box-shadow .3s;animation:flaggeRein .75s var(--spring) .25s backwards}
.flagge:nth-child(2){animation-delay:.4s}
.flagge svg{display:block;width:100%;height:100%}
.flagge::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 28%,rgba(255,255,255,.24) 50%,transparent 72%);transform:translateX(-130%)}
.flagge:hover,.flagge:focus-visible{transform:translateY(-2px) scale(1.14) rotate(-3deg);box-shadow:0 0 0 1px rgba(201,162,78,.8),0 calc(6px*var(--k)) calc(16px*var(--k)) rgba(48,37,26,.32)}
.flagge:hover::after,.flagge:focus-visible::after{transform:translateX(130%);transition:transform .65s var(--ease)}
@keyframes flaggeRein{from{opacity:0;transform:translateY(calc(-16px*var(--k))) scale(.5) rotate(-16deg)}}
.sprachwechsel{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:var(--creme,#f8f2e7);clip-path:circle(0 at var(--x) var(--y));animation:swAuf .46s cubic-bezier(.6,0,.3,1) forwards;pointer-events:none}
.sprachwechsel span{display:block;width:calc(96px*var(--k));height:calc(64px*var(--k));border-radius:calc(9px*var(--k));overflow:hidden;box-shadow:0 0 0 1px rgba(48,37,26,.2),0 calc(14px*var(--k)) calc(40px*var(--k)) rgba(48,37,26,.3);animation:swFlagge .46s var(--spring) forwards}
.sprachwechsel svg{display:block;width:100%;height:100%}
@keyframes swAuf{to{clip-path:circle(calc(150vmax*var(--k)) at var(--x) var(--y))}}
@keyframes swFlagge{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
html.sw-ankunft body::after{content:"";position:fixed;inset:0;z-index:9999;background:var(--creme,#f8f2e7);pointer-events:none;animation:swAb .6s var(--ease) forwards}
@keyframes swAb{to{opacity:0;visibility:hidden}}
.rechtshinweis{max-width:calc(760px*var(--k));margin:0 auto calc(18px*var(--k));padding-inline:calc(20px*var(--k));text-align:center;font-weight:600;color:var(--muted)}
@media (prefers-reduced-motion:reduce){.flagge{animation:none}html.sw-ankunft body::after{display:none}}
.nav__burger{display:none;width:calc(44px*var(--k));height:calc(44px*var(--k));border-radius:50%;position:relative;background:var(--btn-grad);box-shadow:inset 0 0 0 1px rgba(160,120,40,.5);flex:none}
.nav__burger span{position:absolute;left:calc(12px*var(--k));right:calc(12px*var(--k));height:2px;border-radius:2px;background:#3f2d0c;transition:transform .3s var(--ease),top .3s var(--ease)}
.nav__burger span:first-child{top:calc(17px*var(--k))}.nav__burger span:last-child{top:calc(25px*var(--k))}
.nav--offen .nav__burger span:first-child{top:calc(21px*var(--k));transform:rotate(45deg)}
.nav--offen .nav__burger span:last-child{top:calc(21px*var(--k));transform:rotate(-45deg)}
.kein-scroll,.kein-scroll body{overflow:hidden}
/* Holzleiste: Schrift in hellem Orange-Gold mit leichtem Schein. Das aufgeklappte Handy-Menü bleibt hell. */
@media (min-width:1061px){
  .nav__links>a,.drop__btn{color:#ffcf8a;text-shadow:0 0 calc(10px*var(--k)) rgba(255,176,72,.5),0 1px 1px rgba(30,15,5,.55)}
  .nav__links>a:hover,.drop__btn:hover,.drop.is-offen .drop__btn{color:#ffe6bd;background:rgba(255,190,90,.16);text-shadow:0 0 calc(14px*var(--k)) rgba(255,190,90,.8),0 1px 1px rgba(30,15,5,.55)}
  .nav__links>a[aria-current=page]{color:#ffe0a8;box-shadow:inset 0 -2px 0 #ffb64d}
  .drop__panel{background:linear-gradient(160deg,#573e26,#2f2015);box-shadow:0 calc(30px*var(--k)) calc(60px*var(--k)) calc(-24px*var(--k)) rgba(30,15,5,.85),0 0 0 1px rgba(255,205,130,.24)}
  .drop__panel a:hover{background:rgba(255,190,90,.14)}
  .drop__panel b,.drop__panel a[aria-current=page] b{color:#ffcf8a;text-shadow:0 0 calc(10px*var(--k)) rgba(255,176,72,.45)}
  .drop__panel span{color:#f3e1c4}
}
.nav__in>.holz.is-sicht::before{opacity:.5}
.drop__panel>.holz.is-sicht::before{opacity:.32}
@media (max-width:1060px){
  .nav__burger{display:block}
  .sprachen{margin-left:auto}
  .nav__cta{display:none}
  .nav__links{position:fixed;left:calc(12px*var(--k));right:calc(12px*var(--k));top:calc(92px*var(--k));max-height:calc(100dvh - calc(110px*var(--k)));overflow:auto;flex-direction:column;align-items:stretch;gap:2px;padding:calc(14px*var(--k));border-radius:var(--r);background:rgba(255,251,241,.98);box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(calc(-10px*var(--k)));transition:opacity .25s,transform .35s var(--ease),visibility .25s}
  .nav--offen .nav__links{opacity:1;visibility:visible;transform:none}
  .nav__links>a,.drop__btn{width:100%;justify-content:space-between;padding:calc(13px*var(--k)) calc(14px*var(--k));font-size:var(--t)}
  .drop__panel{position:relative;left:auto;width:auto;grid-template-columns:1fr;transform:none;opacity:1;visibility:visible;display:none;background:none;box-shadow:none;padding:0 0 calc(6px*var(--k)) calc(8px*var(--k))}
  .drop__panel::before,.drop__panel>.holz{display:none}
  .drop.is-offen .drop__panel{display:grid;transform:none}
}

/* ===== Fuß ===== */
.fuss{position:relative;background:linear-gradient(180deg,#38271a,var(--espresso-2));color:#d9cbb1;padding-block:clamp(calc(48px*var(--k)),calc(6vw*var(--k)),calc(80px*var(--k))) calc(34px*var(--k));margin-top:0;z-index:3}
.fuss a{text-decoration:none;color:#d9cbb1;transition:color .2s}
.fuss a:hover{color:var(--gold-light)}
/* Zugang zum Dashboard, bewusst unauffällig */
.fuss .fuss__admin{display:block;width:max-content;margin:calc(14px*var(--k)) auto 0;font-size:calc(13px*var(--k));letter-spacing:.08em;color:rgba(217,203,177,.45)}
.fuss .fuss__admin:hover{color:var(--gold-light)}
.hinweis{display:flex;gap:calc(16px*var(--k));align-items:flex-start;padding:calc(20px*var(--k)) calc(24px*var(--k));margin-bottom:clamp(calc(36px*var(--k)),calc(5vw*var(--k)),calc(60px*var(--k)));font-size:var(--t);line-height:1.55}
.hinweis__ico{width:calc(20px*var(--k));height:calc(27px*var(--k));fill:var(--gold-2);flex:none;margin-top:2px}
.hinweis b{color:var(--gold-light)}
.fuss__grid{display:grid;grid-template-columns:1.7fr repeat(4,1fr);gap:clamp(calc(22px*var(--k)),calc(3vw*var(--k)),calc(46px*var(--k)))}
.fuss__marke .logo__bild{height:calc(80px*var(--k))}
.fuss__marke p{margin-top:calc(12px*var(--k));font-family:var(--ital);font-style:italic;font-size:calc(21px*var(--k));color:var(--gold-2)}
.fuss__mail{display:inline-block;margin-top:calc(8px*var(--k));font-weight:600;color:var(--gold-light)!important}
.fuss nav{display:grid;gap:calc(8px*var(--k));align-content:start;font-size:var(--t)}
.fuss h2{font:700 var(--t)/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-2);margin-bottom:calc(6px*var(--k))}
.fuss__klein{margin-top:clamp(calc(30px*var(--k)),calc(4vw*var(--k)),calc(50px*var(--k)));padding-top:calc(18px*var(--k));font-size:var(--t);line-height:1.5;color:#a8987c;position:relative}
.fuss__klein::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(241,218,156,.4),transparent)}
@media (max-width:860px){.fuss__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.fuss__marke{grid-column:1/-1}}

/* ===== Beleg-Betrachter ===== */
/* Vollbild: Das Dokument wächst beim Öffnen aus seinem Vorschaubild heraus (10-belege.js) */
.beleg{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:#efe6d3;color:var(--ink);overflow:hidden;opacity:0;transition:opacity .3s}
.beleg.is-an{opacity:1}
.beleg::backdrop{background:rgba(27,19,12,.72);-webkit-backdrop-filter:blur(calc(8px*var(--k)));backdrop-filter:blur(calc(8px*var(--k)))}
.beleg__rahmen{display:grid;grid-template-columns:minmax(0,1fr) clamp(calc(340px*var(--k)),calc(28vw*var(--k)),calc(500px*var(--k)));height:100%}
.beleg__bild{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:clamp(calc(12px*var(--k)),calc(2vw*var(--k)),calc(28px*var(--k)));background:radial-gradient(circle at 50% 30%,#fbf5e8,#e2d5bb);touch-action:none;cursor:zoom-in}
.beleg__stage{position:relative;flex:none;box-shadow:0 calc(18px*var(--k)) calc(50px*var(--k)) calc(-20px*var(--k)) rgba(60,40,10,.55);background:#fff;transition:transform .25s var(--ease);transform-origin:center}
.beleg__stage.is-zoom{cursor:grab}
.beleg__stage img{width:100%;height:100%;object-fit:contain;display:block;user-select:none}
.mark{position:absolute;display:block;background:rgba(246,205,74,.5);mix-blend-mode:multiply;border-radius:calc(3px*var(--k));transform-origin:left center;animation:marker .55s var(--ease) both;animation-delay:var(--d,0ms);transition:background .2s,box-shadow .2s}
.mark em{position:absolute;right:calc(100% + 2px);top:50%;transform:translateY(-50%);font:700 calc(15px*var(--k))/calc(16px*var(--k)) var(--sans);width:calc(16px*var(--k));height:calc(16px*var(--k));text-align:center;border-radius:50%;background:var(--gold-deep);color:#fff;mix-blend-mode:normal}
.mark.is-hell{background:rgba(247,180,40,.8);box-shadow:0 0 0 2px rgba(190,130,20,.7)}
@keyframes marker{from{transform:scaleX(0);opacity:.2}to{transform:scaleX(1);opacity:1}}
.beleg__werkzeug{position:absolute;right:calc(14px*var(--k));top:calc(14px*var(--k));display:grid;gap:calc(6px*var(--k))}
.beleg__werkzeug button{width:calc(38px*var(--k));height:calc(38px*var(--k));border-radius:50%;background:rgba(255,253,247,.92);font-size:calc(20px*var(--k));line-height:1;box-shadow:0 calc(6px*var(--k)) calc(14px*var(--k)) calc(-6px*var(--k)) rgba(60,40,10,.5),inset 0 0 0 1px var(--line-soft)}
.beleg__tipp{position:absolute;left:0;right:0;bottom:calc(8px*var(--k));text-align:center;font-size:var(--t);color:var(--muted);pointer-events:none}
.beleg__text{position:relative;overflow:auto;padding:clamp(calc(20px*var(--k)),calc(2.4vw*var(--k)),calc(34px*var(--k)));display:flex;flex-direction:column;gap:calc(14px*var(--k));background:linear-gradient(180deg,#fbf6ea,#f4ead6)}
.beleg__text h2{font-size:clamp(calc(22px*var(--k)),calc(2.2vw*var(--k)),calc(30px*var(--k)));padding-right:calc(34px*var(--k))}
.beleg__text>*{flex:none}
/* Blättern: dunkelbraune Pfeile mit schwachem Schimmer links und rechts am Bild */
.beleg__pfeil{position:absolute;top:50%;z-index:4;display:grid;place-items:center;width:clamp(calc(48px*var(--k)),calc(4vw*var(--k)),calc(64px*var(--k)));aspect-ratio:1;margin-top:calc(clamp(calc(48px*var(--k)),calc(4vw*var(--k)),calc(64px*var(--k)))/-2);border-radius:50%;cursor:pointer;color:#f1da9c;background:linear-gradient(165deg,#54391f,#2f1f12);box-shadow:0 0 0 1px rgba(241,218,156,.32),0 calc(8px*var(--k)) calc(18px*var(--k)) calc(-8px*var(--k)) rgba(40,24,8,.75),0 0 calc(12px*var(--k)) rgba(214,170,70,.14);transition:transform .4s var(--spring),box-shadow .35s,color .3s}
.beleg__pfeil svg{width:52%;height:52%;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.beleg__pfeil--links{left:clamp(calc(8px*var(--k)),calc(1vw*var(--k)),calc(16px*var(--k)))}
.beleg__pfeil--rechts{right:clamp(calc(8px*var(--k)),calc(1vw*var(--k)),calc(16px*var(--k)))}
.beleg__pfeil:hover,.beleg__pfeil:focus-visible{transform:scale(1.08);color:#ffe9b0;box-shadow:0 0 0 1px rgba(241,218,156,.55),0 calc(10px*var(--k)) calc(22px*var(--k)) calc(-8px*var(--k)) rgba(40,24,8,.8),0 0 calc(16px*var(--k)) rgba(214,170,70,.26)}
.beleg__pfeil:active{transform:scale(.96)}
.beleg__berichte{display:grid;gap:calc(10px*var(--k));justify-items:start;opacity:0;transform:translateY(calc(10px*var(--k)));transition:opacity .5s,transform .6s var(--ease)}
.beleg__berichte.is-an{opacity:1;transform:none}
.beleg__berichtkopf{margin-top:calc(6px*var(--k));font:700 clamp(calc(18px*var(--k)),calc(1.3vw*var(--k)),calc(21px*var(--k)))/1.25 var(--serif);color:var(--gold-text)}
.beleg__berichte .beleg__bericht{display:grid;gap:calc(5px*var(--k));justify-items:start;width:100%;padding:calc(13px*var(--k)) calc(15px*var(--k));border-radius:calc(12px*var(--k));font-size:clamp(calc(17.5px*var(--k)),calc(1.2vw*var(--k)),calc(20px*var(--k)));line-height:1.42;background:rgba(255,255,255,.58);box-shadow:inset 0 0 0 1px var(--line-soft)}
.beleg__berichte .beleg__bericht--eigen{background:rgba(248,168,0,.1);box-shadow:inset 0 0 0 1px rgba(216,124,0,.42),inset calc(3px*var(--k)) 0 0 #f8a800}
.beleg__bericht .kicker{font-size:clamp(calc(14.5px*var(--k)),calc(1vw*var(--k)),calc(16px*var(--k)))}
.beleg__bericht .referenz__zahl{font:700 clamp(calc(21px*var(--k)),calc(1.6vw*var(--k)),calc(26px*var(--k)))/1.15 var(--serif)}
.beleg__bericht h3{font-size:clamp(calc(18px*var(--k)),calc(1.3vw*var(--k)),calc(21px*var(--k)))}
.beleg__bericht .lead,.beleg__bericht p{font-size:inherit;line-height:inherit}
.beleg__bericht .klein{font-size:clamp(calc(15px*var(--k)),calc(1vw*var(--k)),calc(16.5px*var(--k)))}
.beleg__bericht .fakt{padding:0;box-shadow:none;background:none}
.beleg__bericht .fakt::before{display:none}
.beleg__berichte .einfach{font-size:clamp(calc(16px*var(--k)),calc(1.08vw*var(--k)),calc(18px*var(--k)))}
.beleg__zu{position:absolute;right:calc(14px*var(--k));top:calc(12px*var(--k));width:calc(40px*var(--k));height:calc(40px*var(--k));border-radius:50%;font-size:calc(26px*var(--k));line-height:1;background:rgba(48,37,26,.08);transition:background .2s,transform .3s var(--spring)}
.beleg__zu:hover{background:rgba(48,37,26,.16);transform:rotate(90deg)}
.beleg__liste{display:grid;gap:calc(8px*var(--k));font-size:var(--t);line-height:1.45}
.beleg__liste li{display:grid;grid-template-columns:calc(24px*var(--k)) 1fr;gap:calc(10px*var(--k));padding:calc(8px*var(--k)) calc(10px*var(--k));border-radius:calc(10px*var(--k));transition:background .2s}
.beleg__liste li.is-hell{background:rgba(246,205,74,.28)}
.beleg__liste span{width:calc(22px*var(--k));height:calc(22px*var(--k));border-radius:50%;background:var(--gold-deep);color:#fff;font:700 var(--t)/calc(22px*var(--k)) var(--sans);text-align:center}
.beleg__links{display:flex;flex-wrap:wrap;gap:calc(8px*var(--k));margin-top:2px}
@media (max-width:860px){
  .beleg__rahmen{grid-template-columns:1fr;grid-template-rows:minmax(0,52%) minmax(0,48%)}
  .beleg__tipp{display:none}
}

/* ===== Bilder im Archiv-Look, zum Vergrößern ===== */
.foto{position:relative;padding:0;border-radius:var(--r-s);overflow:hidden;display:block;cursor:zoom-in;background:#d9cdb5;isolation:isolate}
.foto img{width:100%;height:100%;object-fit:cover;filter:sepia(.24) saturate(.92) contrast(1.02);transition:transform 1s var(--ease),filter .6s}
.foto:hover img{transform:scale(1.05);filter:none}
.foto::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(48,37,26,.22);border-radius:inherit}
.foto figcaption,.foto__txt{position:absolute;left:0;right:0;bottom:0;padding:calc(26px*var(--k)) calc(14px*var(--k)) calc(10px*var(--k));font-size:var(--t);line-height:1.3;font-weight:600;color:#fff;background:linear-gradient(transparent,rgba(27,19,12,.82))}
.dok{position:relative;display:block;padding:0;background:#fff;box-shadow:0 calc(22px*var(--k)) calc(50px*var(--k)) calc(-24px*var(--k)) rgba(60,40,10,.6),0 0 0 1px rgba(48,37,26,.12);cursor:zoom-in;transition:transform .5s var(--ease),box-shadow .4s}
.dok:hover{transform:translateY(calc(-4px*var(--k))) rotate(0deg)!important;box-shadow:0 calc(34px*var(--k)) calc(70px*var(--k)) calc(-24px*var(--k)) rgba(60,40,10,.7),0 0 0 1px rgba(48,37,26,.2)}
.dok img{width:100%}
/* Kleine Originaldokumente als Karten: leicht gefächert, beim Darüberfahren richten sie sich auf und das Blatt gleitet nach oben */
.blattkarten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(14px*var(--k));width:100%;max-width:calc(600px*var(--k));min-width:0;margin-top:calc(24px*var(--k));justify-self:stretch}
.blattkarte{display:grid;grid-template-columns:minmax(0,1fr);min-width:0;align-content:start;gap:calc(3px*var(--k));padding:calc(8px*var(--k)) calc(8px*var(--k)) calc(12px*var(--k));border-radius:calc(14px*var(--k));text-align:left;cursor:zoom-in;background:linear-gradient(165deg,#fffdf8,#f3e8d4);box-shadow:0 calc(18px*var(--k)) calc(34px*var(--k)) calc(-22px*var(--k)) rgba(60,40,10,.65),0 0 0 1px rgba(160,120,40,.22),inset 0 1px 0 #fff;transition:transform .5s var(--spring),box-shadow .35s}
.blattkarte:nth-child(1){transform:rotate(-1.6deg)}
.blattkarte:nth-child(2){transform:translateY(calc(-5px*var(--k))) rotate(.8deg)}
.blattkarte:nth-child(3){transform:rotate(-.6deg)}
.blattkarte:hover,.blattkarte:focus-visible{transform:translateY(calc(-9px*var(--k))) scale(1.03);box-shadow:0 calc(30px*var(--k)) calc(48px*var(--k)) calc(-24px*var(--k)) rgba(60,40,10,.75),0 0 0 1px rgba(201,162,78,.7),inset 0 1px 0 #fff}
.blattkarte__blatt{position:relative;display:block;aspect-ratio:4/5;margin-bottom:calc(7px*var(--k));overflow:hidden;border-radius:calc(7px*var(--k));background:#fff;box-shadow:0 0 0 1px rgba(48,37,26,.14)}
.blattkarte__blatt img{width:100%;height:auto;min-height:100%;object-fit:cover;object-position:top;transition:transform 1.4s var(--ease)}
.blattkarte:hover img,.blattkarte:focus-visible img{transform:translateY(-7%)}
.blattkarte__blatt::after{content:"";position:absolute;inset:auto 0 0;height:34%;background:linear-gradient(transparent,rgba(255,250,238,.92));pointer-events:none}
.blattkarte__blatt i{position:absolute;right:calc(7px*var(--k));bottom:calc(7px*var(--k));z-index:1;display:grid;place-items:center;width:calc(30px*var(--k));height:calc(30px*var(--k));border-radius:50%;background:var(--btn-grad);box-shadow:0 calc(4px*var(--k)) calc(10px*var(--k)) rgba(60,40,10,.35);color:#3f2d0c;opacity:0;transform:scale(.6);transition:opacity .25s,transform .4s var(--spring)}
.blattkarte__blatt i svg{width:calc(16px*var(--k));height:calc(16px*var(--k))}
.blattkarte:hover i,.blattkarte:focus-visible i{opacity:1;transform:none}
.blattkarte b{font:700 clamp(calc(15px*var(--k)),calc(1.15vw*var(--k)),calc(17px*var(--k)))/1.2 var(--sans);letter-spacing:0;color:var(--espresso);overflow-wrap:anywhere}
.blattkarte small{font-size:clamp(calc(14px*var(--k)),calc(1vw*var(--k)),calc(16px*var(--k)));line-height:1.25;color:var(--muted);overflow-wrap:anywhere}

/* ===== Laufband der Referenzen ===== */
.lauf{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.lauf__zug{display:flex;width:max-content;gap:clamp(calc(26px*var(--k)),calc(3vw*var(--k)),calc(48px*var(--k)));animation:lauf 46s linear infinite}
.lauf:hover .lauf__zug{animation-play-state:paused}
.lauf__zug span{font-family:var(--serif);font-weight:600;font-size:clamp(calc(18.5px*var(--k)),calc(1.5vw*var(--k)),calc(22px*var(--k)));color:var(--brown);white-space:nowrap;display:inline-flex;align-items:center;gap:clamp(calc(26px*var(--k)),calc(3vw*var(--k)),calc(48px*var(--k)))}
.lauf__zug span::after{content:"";width:calc(9px*var(--k));height:calc(12px*var(--k));background:var(--gold);clip-path:path("M4.500 0C3 3 .5 5 .5 8a4 4 0 0 0 8 0C8.500 5 6 3 4.500 0Z")}
@keyframes lauf{to{transform:translateX(-50%)}}

/* ===== Seitenkopf der Unterseiten ===== */
.kopf{padding-block:clamp(calc(130px*var(--k)),calc(14vw*var(--k)),calc(190px*var(--k))) clamp(calc(30px*var(--k)),calc(4vw*var(--k)),calc(60px*var(--k)));position:relative;overflow:hidden}
.kopf__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(calc(24px*var(--k)),calc(4vw*var(--k)),calc(60px*var(--k)));align-items:center}
.kopf h1{font-size:clamp(calc(36px*var(--k)),calc(5vw*var(--k)),calc(70px*var(--k)))}
.kopf .lead{margin-top:calc(14px*var(--k))}
.kopf__bild{position:relative}
.brot{display:flex;gap:calc(8px*var(--k));font-size:var(--t);color:var(--muted);margin-bottom:calc(14px*var(--k));flex-wrap:wrap}
.brot a{text-decoration:none;color:inherit}
.brot a:hover{color:var(--gold-text)}
@media (max-width:860px){.kopf__grid{grid-template-columns:minmax(0,1fr)}}

/* Seitenwechsel-Karten am Ende von Unterseiten */
.weiter{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,calc(230px*var(--k))),1fr));gap:clamp(calc(12px*var(--k)),calc(1.6vw*var(--k)),calc(20px*var(--k)))}
.weiter a{display:grid;gap:calc(4px*var(--k));padding:calc(18px*var(--k)) calc(20px*var(--k));text-decoration:none;transition:transform .45s var(--spring)}
.weiter a:hover{transform:translateY(calc(-4px*var(--k)))}
.weiter b{font-family:var(--serif);font-size:clamp(calc(20px*var(--k)),calc(1.6vw*var(--k)),calc(23px*var(--k)));color:var(--espresso)}
.weiter span{font-size:var(--t);line-height:1.4;color:var(--muted)}

/* Verweise auf die Originale */
.quellen{margin-top:calc(10px*var(--k))}
.quellen a{font-weight:600;color:var(--gold-text)}
.quellen .textlink{font-size:inherit}
.dark .quellen a,.glass--dark .quellen a,.dark .quellen .textlink,.glass--dark .nugget__fuss .textlink{color:var(--gold-light)}
.st__txt p.quellen{margin-top:calc(10px*var(--k));font-size:.8em;line-height:1.45;color:#bfae8f}
.st__txt .quellen a,.st__txt .quellen .textlink{font-weight:500}
/* Quelle klein unten in den Kacheln */
.nugget__quelle{margin-top:auto;padding-top:calc(8px*var(--k));font-size:calc(14px*var(--k));line-height:1.35;opacity:.78}
.nugget__quelle .textlink,.nugget__fuss .textlink{font-size:inherit;font-weight:500;text-decoration:underline;text-underline-offset:2px}

/* Formularfelder */
.feld{display:grid;gap:calc(6px*var(--k));font-size:var(--t);font-weight:600;color:var(--brown)}
.feld input,.feld textarea,.feld select{font:inherit;font-weight:500;font-size:var(--t);padding:calc(12px*var(--k)) calc(14px*var(--k));border-radius:calc(12px*var(--k));border:0;color:var(--ink);background:rgba(255,253,247,.75);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .2s,background .2s}
.feld input:focus,.feld textarea:focus,.feld select:focus{outline:0;background:#fff;box-shadow:inset 0 0 0 2px var(--gold-deep)}
.feld textarea{min-height:calc(130px*var(--k));resize:vertical}

/* Schieberegler */
input[type=range].regler{-webkit-appearance:none;appearance:none;width:100%;margin:0;height:calc(26px*var(--k));background:none;cursor:grab}
input[type=range].regler::-webkit-slider-runnable-track{height:calc(6px*var(--k));border-radius:calc(6px*var(--k));background:linear-gradient(90deg,var(--gold-deep) var(--p,50%),rgba(48,37,26,.16) var(--p,50%))}
input[type=range].regler::-moz-range-track{height:calc(6px*var(--k));border-radius:calc(6px*var(--k));background:rgba(48,37,26,.16)}
input[type=range].regler::-moz-range-progress{height:calc(6px*var(--k));border-radius:calc(6px*var(--k));background:var(--gold-deep)}
input[type=range].regler::-webkit-slider-thumb{-webkit-appearance:none;width:calc(24px*var(--k));height:calc(24px*var(--k));margin-top:calc(-9px*var(--k));border-radius:50%;background:var(--btn-grad);box-shadow:0 calc(4px*var(--k)) calc(10px*var(--k)) -2px rgba(120,85,20,.6),inset 0 0 0 1px rgba(160,120,40,.7);transition:transform .25s var(--spring)}
input[type=range].regler::-moz-range-thumb{width:calc(24px*var(--k));height:calc(24px*var(--k));border:0;border-radius:50%;background:var(--btn-grad);box-shadow:0 calc(4px*var(--k)) calc(10px*var(--k)) -2px rgba(120,85,20,.6),inset 0 0 0 1px rgba(160,120,40,.7)}
input[type=range].regler:active::-webkit-slider-thumb{transform:scale(1.2)}

/* Holz-Optik auf den dunklen Flächen: Jede Fläche zeigt einen eigenen Ausschnitt, gedreht und sehr durchsichtig.
   Das Holz läuft nahtlos in voller Auflösung weiter und wird nie vergrößert, darum bleibt es scharf. */
:where(.holz-traeger){position:relative}
.holz{position:absolute;inset:0;z-index:-1;overflow:hidden;border-radius:inherit;pointer-events:none;container-type:size}
.holz::before{--seite:calc(100cqw + 100cqh);content:"";position:absolute;left:50%;top:50%;width:var(--seite);height:var(--seite);margin:calc(var(--seite)/-2) 0 0 calc(var(--seite)/-2);background:var(--holz) var(--hx) var(--hy)/calc(3344px*var(--k)) calc(1882px*var(--k)) repeat;transform:rotate(var(--hw));opacity:0;transition:opacity 1s var(--ease)}
.holz.is-sicht::before{opacity:.18}
.hat-holz{isolation:isolate}
.dark>.holz{z-index:1}
.modus:not(.is-an)>.holz{display:none}

/* ===== Straße und Öltropfen ===== */
.strasse{position:fixed;left:0;top:0;pointer-events:none;z-index:2}
.oelblob{position:fixed;left:0;top:0;pointer-events:none;z-index:2}
.oelblob.is-oben{z-index:31}
html.am-tropfen,html.am-tropfen *{cursor:pointer}
.logo-ober{position:fixed;left:0;top:0;z-index:32;height:auto;max-width:none;pointer-events:none;visibility:hidden}

/* ===== Held ===== */
.held{position:relative;min-height:100svh;display:flex;align-items:center;padding-block:clamp(calc(110px*var(--k)),calc(12*var(--fh,1vh)*var(--k)),calc(150px*var(--k))) clamp(calc(30px*var(--k)),calc(6*var(--fh,1vh)*var(--k)),calc(70px*var(--k)));overflow:clip}
.guil{position:absolute;right:calc(-16vw*var(--k));top:calc(-20*var(--fh,1vh)*var(--k));width:min(calc(96vw*var(--k)),calc(1100px*var(--k)));height:auto;aspect-ratio:1;pointer-events:none;opacity:.3;z-index:0;animation:drehen 300s linear infinite}
@keyframes drehen{to{transform:rotate(360deg)}}
.held__grid{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:clamp(calc(10px*var(--k)),calc(2vw*var(--k)),calc(30px*var(--k)));align-items:center;width:min(calc(1320px*var(--k)),100%)}
.held__text{position:relative;z-index:4;display:grid;gap:clamp(calc(16px*var(--k)),calc(2*var(--fh,1vh)*var(--k)),calc(26px*var(--k)));justify-items:start}
.held__titel{font-size:clamp(calc(40px*var(--k)),calc(5vw*var(--k)),calc(84px*var(--k)));line-height:1.03;display:grid;gap:.03em}
.zeile{display:block;overflow:hidden;padding-block:.06em .1em;margin-block:-.06em -.1em}
.zeile>span{display:inline-block;animation:zeileEin 1.1s var(--ease) both;animation-delay:calc(var(--i)*130ms + 100ms)}
/* Den Glanz über den Titelzeilen steuert OF.titelGlanz (20-held.js): einmal nach dem Einblenden, dann zufällig alle 5 bis 9 Sekunden */
@keyframes zeileEin{from{opacity:0}to{opacity:1}}
.held__a{animation:sanftRein 1s var(--ease) both;animation-delay:calc(var(--i)*130ms + 150ms)}
@keyframes sanftRein{from{opacity:0;transform:translateY(calc(16px*var(--k)))}to{opacity:1;transform:none}}
.held__pfeil{width:calc(13px*var(--k))!important;height:calc(18px*var(--k))!important;fill:var(--gold-deep);animation:huepf 1.8s var(--ease) infinite}
@keyframes huepf{0%,100%{transform:translateY(-2px)}50%{transform:translateY(calc(4px*var(--k)))}}
.held__beweis{display:flex;flex-wrap:wrap;gap:calc(6px*var(--k)) calc(18px*var(--k));margin-top:2px}
.held__beweis button{font-size:var(--t);font-weight:600;color:var(--brown);padding:2px 0;position:relative}
.held__beweis button::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,var(--gold),transparent);transition:opacity .2s}
.held__beweis button:hover{color:var(--gold-text)}

.held__buehne{position:relative;height:min(calc(92*var(--fh,1vh)*var(--k)),calc(860px*var(--k)));z-index:3}
.held__glanz{position:absolute;left:50%;top:44%;width:92%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,240,200,.9),rgba(240,210,140,.28) 45%,transparent 70%);animation:atmen 7s ease-in-out infinite}
@keyframes atmen{0%,100%{opacity:.75;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}}
.held__filter{position:absolute;left:50%;top:50%;height:112%;aspect-ratio:1050/1357;transform:translate(calc(-46% + var(--px,0px)),calc(-50% + var(--py,0px))) rotate(1deg);animation:filterRein 1.5s var(--ease) both,filterWachs 1.5s var(--ease) backwards;animation-composition:replace,add}
/* Das Wachsen rechnet sich auf die eigene Größe drauf (add) und lässt danach los (backwards): So bleibt eine eingestellte Vergrößerung nach dem Einblenden erhalten, auch in Browsern ohne add */
@keyframes filterRein{from{opacity:0}to{opacity:1}}
@keyframes filterWachs{from{scale:.94}to{scale:1}}
.held__filter img{width:100%;height:100%;display:block;user-select:none;-webkit-user-drag:none;filter:drop-shadow(calc(-24px*var(--k)) calc(34px*var(--k)) calc(38px*var(--k)) rgba(70,50,20,.32));will-change:transform}
.roentgen{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
/* Schilder der Linse (20-held.js): Lage, Größe und Deckkraft setzt das Skript, ein translate verschiebt sie. Im Lab anklickbar */
.held__schild{position:absolute;left:0;top:0;z-index:1;box-sizing:border-box;padding:0 calc(13px*var(--k));opacity:0;pointer-events:none;white-space:nowrap;overflow:hidden;border-radius:calc(999px*var(--k));border:1px solid rgba(230,203,133,.75);background:linear-gradient(180deg,rgba(66,44,22,.96),rgba(34,21,10,.96));box-shadow:0 calc(3px*var(--k)) calc(10px*var(--k)) rgba(20,10,2,.45);font:600 calc(14px*var(--k))/1 Outfit,sans-serif;color:#ebd08c}
/* Griff über dem Punkt, an dem die Linie im Filter endet: unsichtbar, im Lab anklickbar, sein translate verschiebt den Punkt */
.held__punkt{position:absolute;left:0;top:0;z-index:2;width:calc(18px*var(--k));height:calc(18px*var(--k));border-radius:50%;pointer-events:none}
html.dz-lab .held__schild,html.dz-lab .held__punkt{pointer-events:auto}
html.dz-lab .held__punkt{box-shadow:0 0 0 1.5px rgba(255,250,235,.85),0 0 calc(8px*var(--k)) rgba(255,210,120,.6)}
.held__tipp{position:absolute;right:4%;bottom:7%;display:flex;align-items:center;gap:calc(9px*var(--k));padding:calc(7px*var(--k)) calc(14px*var(--k));border-radius:calc(999px*var(--k));font-size:var(--t);font-weight:600;color:var(--brown);background:rgba(255,253,247,.86);box-shadow:inset 0 0 0 1px var(--line-soft);z-index:5;animation:sanftRein 1s var(--ease) 1.6s both}
.held__tipp i{font-style:normal}
.held__tipp span{width:calc(9px*var(--k));height:calc(9px*var(--k));border-radius:50%;background:var(--gold);position:relative}
.held__tipp span::after,.hs::after{content:"";position:absolute;inset:0;border-radius:50%;background:rgba(201,162,78,.55);animation:ring 2.2s var(--ease) infinite;pointer-events:none;z-index:-1}
@keyframes ring{from{transform:scale(1);opacity:1}to{transform:scale(2.8);opacity:0}}
@media (max-width:980px){
  .held{min-height:0;padding-top:calc(112px*var(--k))}
  .held__grid{grid-template-columns:minmax(0,1fr)}
  .held__buehne{height:min(calc(118vw*var(--k)),calc(620px*var(--k)));margin-top:calc(10px*var(--k))}
  .held__filter{height:104%}
  .held__tipp{left:calc(8px*var(--k));right:calc(8px*var(--k));margin-inline:auto;width:max-content;max-width:calc(100% - calc(16px*var(--k)));white-space:normal;text-align:center;bottom:2%}
}

/* ===== Nutzen ===== */
.nutzen{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,calc(420px*var(--k))),1fr));gap:2px clamp(calc(20px*var(--k)),calc(3vw*var(--k)),calc(44px*var(--k)));margin-bottom:clamp(calc(16px*var(--k)),calc(2vw*var(--k)),calc(24px*var(--k)))}
.nutzen li{display:grid;grid-template-columns:calc(24px*var(--k)) 1fr;gap:calc(12px*var(--k));padding:calc(12px*var(--k)) 2px;font-size:var(--t);line-height:1.4;font-weight:500;position:relative}
.nutzen li::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
.nutzen svg{width:calc(22px*var(--k));height:calc(22px*var(--k));color:var(--gold-text);margin-top:1px}
.nutzen small{display:block;font-size:var(--t);font-weight:400;color:var(--muted)}
.nutzen__satz{font:700 clamp(calc(19px*var(--k)),calc(1.9vw*var(--k)),calc(25px*var(--k)))/1.3 var(--serif);color:var(--espresso);margin-bottom:clamp(calc(22px*var(--k)),calc(3vw*var(--k)),calc(40px*var(--k)));max-width:42ch}

/* ===== Goldnuggets ===== */
.sek--nuggets{padding-top:clamp(calc(40px*var(--k)),calc(6vw*var(--k)),calc(80px*var(--k)))}
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(calc(12px*var(--k)),calc(1.5vw*var(--k)),calc(20px*var(--k)));margin-bottom:clamp(calc(30px*var(--k)),calc(4vw*var(--k)),calc(56px*var(--k)))}
.nugget{padding:clamp(calc(20px*var(--k)),calc(2.2vw*var(--k)),calc(30px*var(--k)));display:flex;flex-direction:column;gap:calc(10px*var(--k));text-decoration:none;color:inherit;min-width:0}
.nugget--welt{grid-column:span 8;grid-row:span 2;display:grid;grid-template-columns:minmax(0,.68fr) minmax(0,1fr);gap:0;padding:0;overflow:hidden}
.nugget--last{grid-column:span 4}
.nugget--fein,.nugget--zeit{grid-column:span 4;grid-row:span 2}
/* ALDI über die Jahre: Balken wachsen mit den Kilometern */
.zeitstrahl{display:grid;gap:calc(12px*var(--k));margin-top:calc(4px*var(--k))}
.zeitstrahl li{display:grid;grid-template-columns:3.2em minmax(0,1fr);gap:2px calc(10px*var(--k));align-items:baseline}
.zeitstrahl b{font:700 clamp(calc(17px*var(--k)),calc(1.2vw*var(--k)),calc(20px*var(--k)))/1 var(--serif);color:var(--gold-text)}
.zeitstrahl span{font-size:var(--t);font-weight:600;color:var(--brown);line-height:1.3}
.zeitstrahl i{grid-column:2;display:block;height:calc(9px*var(--k));width:max(calc(9px*var(--k)),var(--w));border-radius:calc(5px*var(--k));background:linear-gradient(90deg,#6f5a3a,#a8926c);transform-origin:left;transform:scaleX(0);transition:transform 1.3s var(--ease) .3s}
.zeitstrahl .is-gold i{background:var(--gold);box-shadow:0 0 calc(14px*var(--k)) calc(3px*var(--k)) rgba(226,180,70,.7)}
.is-in .zeitstrahl i{transform:none}
.nugget--oel{grid-column:span 6}
.nugget--stadt,.nugget--pruefung{grid-column:span 6}
.nugget .kicker{font-size:var(--t)}
.zahl{font:700 clamp(calc(48px*var(--k)),calc(5.4vw*var(--k)),calc(78px*var(--k)))/1 var(--serif);letter-spacing:-.005em;white-space:nowrap}
.zahl small{font:700 clamp(calc(17px*var(--k)),calc(1.7vw*var(--k)),calc(24px*var(--k))) var(--sans);letter-spacing:0}
.zahl em{font:400 .55em var(--sans);font-style:normal;opacity:.7;margin-inline:.1em}
.glass--dark .zahl{color:var(--gold-light)}
/* Altöl: 33 l, großer Pfeil mit „reduziert“, 3 l. Der Pfeil zeichnet sich beim Einblenden */
.oelzahl{display:flex;align-items:center;gap:clamp(calc(12px*var(--k)),calc(1.4vw*var(--k)),calc(22px*var(--k)))}
.oelzahl__wert{display:inline-flex;align-items:baseline;gap:.08em;color:#4a3418}
.oelzahl__wert.is-gut{color:var(--gold-text)}
.oelzahl small{font-size:.3em;margin-left:.15em}
.oelzahl__pfeil{display:grid;justify-items:center;gap:calc(4px*var(--k));color:var(--gold)}
.oelzahl__pfeil em{font:800 clamp(calc(16px*var(--k)),calc(1.3vw*var(--k)),calc(22px*var(--k)))/1 var(--sans);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-text);opacity:1;margin:0}
.oelzahl__pfeil svg{width:clamp(calc(100px*var(--k)),calc(10vw*var(--k)),calc(170px*var(--k)));height:auto;fill:none;stroke:currentColor;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:150;stroke-dashoffset:150;filter:drop-shadow(0 2px calc(6px*var(--k)) rgba(201,162,78,.45));transition:stroke-dashoffset 1.3s var(--ease) .45s}
.is-in .oelzahl__pfeil svg{stroke-dashoffset:0}
.nugget__satz{font-size:var(--t);line-height:1.45;color:#3b2e1e;max-width:40ch}
.glass--dark .nugget__satz{color:#e9dcc4;font-size:var(--t);max-width:30ch}
.nugget__txt{display:flex;flex-direction:column;gap:calc(12px*var(--k));align-items:flex-start;justify-content:center;padding:clamp(calc(20px*var(--k)),calc(2.2vw*var(--k)),calc(32px*var(--k)));min-width:0;position:relative;z-index:2}
.nugget__dok{position:relative;display:block;align-self:center;aspect-ratio:795/1109;margin:clamp(calc(14px*var(--k)),calc(1.6vw*var(--k)),calc(22px*var(--k))) clamp(calc(14px*var(--k)),calc(1.6vw*var(--k)),calc(22px*var(--k))) clamp(calc(14px*var(--k)),calc(1.6vw*var(--k)),calc(22px*var(--k))) 0;border-radius:calc(4px*var(--k));overflow:hidden;background:#fff;cursor:zoom-in;box-shadow:0 calc(26px*var(--k)) calc(50px*var(--k)) calc(-18px*var(--k)) #000,0 0 0 1px rgba(241,218,156,.3);transform:rotate(1.2deg);transition:transform .7s var(--spring),box-shadow .5s}
.nugget__dok img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:transform 1.1s var(--ease),opacity .22s}
.nugget__dok img.ist-weg{opacity:0}
/* Archivseiten sind breiter als ein Brief: Sie stehen oben auf dem weißen Blatt */
.nugget__dok.ist-abschrift img{object-position:50% 0}
.nugget__dok:hover{transform:rotate(0) translateY(calc(-6px*var(--k)));box-shadow:0 calc(34px*var(--k)) calc(70px*var(--k)) calc(-18px*var(--k)) #000,0 0 0 1px rgba(241,218,156,.75),0 0 calc(44px*var(--k)) calc(-8px*var(--k)) rgba(236,205,130,.55)}
.nugget__dok:hover img{transform:scale(1.05)}
.welt__runden{font-size:var(--t);color:#e9dcc4}
.schritte{display:inline-flex;padding:calc(4px*var(--k));border-radius:calc(999px*var(--k));background:rgba(255,235,190,.08);box-shadow:inset 0 0 0 1px rgba(241,218,156,.28)}
.schritte button{padding:calc(6px*var(--k)) calc(15px*var(--k));border-radius:calc(999px*var(--k));font-weight:700;font-size:var(--t);color:#d9cbb1;transition:background .3s,color .3s}
.schritte button.is-an{background:var(--btn-grad);color:#3f2d0c}
.balken-mini{display:grid;gap:calc(7px*var(--k));margin-block:calc(4px*var(--k)) 2px}
.balken-mini div{display:grid;grid-template-columns:max-content 1fr;gap:calc(10px*var(--k));align-items:center;font-size:var(--t);font-weight:600;color:var(--brown)}
.balken-mini i{display:block;height:calc(12px*var(--k));border-radius:0 calc(6px*var(--k)) calc(6px*var(--k)) 0;width:var(--w);background:#b9a889;transform-origin:left;transform:scaleX(0);transition:transform 1.4s var(--ease) .35s}
.balken-mini .is-gold i{background:linear-gradient(90deg,#d8b663,#f7e8bd 60%,#c9a24e);box-shadow:0 0 calc(16px*var(--k)) rgba(214,170,70,.55)}
.is-in .balken-mini i{transform:none}
.skala{display:grid;gap:calc(7px*var(--k));margin-top:2px}
.skala li{display:grid;gap:calc(3px*var(--k));font-size:var(--t);font-weight:600;color:var(--brown)}
.skala i{display:block;height:calc(9px*var(--k));width:var(--w);border-radius:0 calc(5px*var(--k)) calc(5px*var(--k)) 0;background:linear-gradient(90deg,#6f5a3a,#a8926c);transform-origin:left;transform:scaleX(0);transition:transform 1.3s var(--ease) .3s}
.skala .is-gold i{height:calc(9px*var(--k));border-radius:2px;background:var(--gold);box-shadow:0 0 calc(14px*var(--k)) calc(4px*var(--k)) rgba(226,180,70,.85)}
.is-in .skala i{transform:none}
.kanister{display:grid;gap:calc(6px*var(--k));margin-top:auto}
.kanister div{display:grid;grid-template-columns:6.6em minmax(0,1fr) auto;gap:calc(10px*var(--k));align-items:center;min-height:calc(35px*var(--k))}
.kanister div span{display:flex;flex-wrap:wrap;gap:calc(5px*var(--k));align-items:flex-end}
.kanister em{font-style:normal;font-size:var(--t);font-weight:700;color:var(--brown)}
.kanister b{font:700 clamp(calc(19px*var(--k)),calc(1.4vw*var(--k)),calc(24px*var(--k)))/1 var(--sans);color:#3a2614;white-space:nowrap}
.kanister .is-gut b{color:var(--gold-text)}
.kanister small{font-size:calc(14px*var(--k));color:var(--muted)}
.kanister svg{width:calc(26px*var(--k));height:calc(35px*var(--k));opacity:0;transform:translateY(calc(-14px*var(--k))) scale(.9);transition:opacity .4s,transform .55s var(--spring);transition-delay:var(--d,0ms)}
.is-in .kanister svg{opacity:1;transform:none}
.marken{display:flex;flex-wrap:wrap;gap:calc(3px*var(--k)) calc(11px*var(--k));font-family:var(--serif);font-weight:600;font-size:var(--t);color:var(--brown);flex:1;align-content:flex-start}
.marken li{opacity:0;transform:translateY(calc(8px*var(--k)));transition:opacity .5s,transform .5s var(--ease)}
.is-in .marken li{opacity:1;transform:none}
.nugget--stadt .textlink{align-self:flex-start}
.nugget__zitat{margin:calc(4px*var(--k)) 0 2px;padding-left:calc(14px*var(--k));border-left:calc(3px*var(--k)) solid var(--gold);font:italic 500 clamp(calc(17px*var(--k)),calc(1.2vw*var(--k)),calc(20px*var(--k)))/1.45 var(--ital);color:var(--espresso)}
.nugget__zitat small{display:block;margin-top:calc(4px*var(--k));font:600 calc(14px*var(--k))/1.3 var(--sans);font-style:normal;color:var(--muted)}
.spielen{width:calc(46px*var(--k));height:calc(46px*var(--k));border-radius:50%;display:grid;place-items:center;flex:none;background:var(--btn-grad);color:#3f2d0c;box-shadow:0 0 0 calc(6px*var(--k)) rgba(241,218,156,.18);transition:transform .35s var(--spring)}
.spielen svg{width:calc(20px*var(--k));height:calc(20px*var(--k))}
.nugget__fuss{color:#bfae8f;font-size:var(--t)}
.lauf__notiz{margin-top:calc(12px*var(--k));text-align:center}
@media (max-width:980px){
  .nugget--welt,.nugget--last,.nugget--fein,.nugget--oel,.nugget--stadt,.nugget--pruefung{grid-column:1/-1;grid-row:auto}
  .nugget--welt{grid-template-columns:1fr}
  .nugget__dok{margin:0 calc(16px*var(--k)) calc(16px*var(--k));justify-self:center;width:min(100% - calc(32px*var(--k)),calc(340px*var(--k)))}
}

/* ===== Kopf des Archivs mit Foto der TV-Vorführung ===== */
.archiv-kopf{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(calc(24px*var(--k)),calc(4vw*var(--k)),calc(64px*var(--k)));align-items:center;margin-bottom:clamp(calc(30px*var(--k)),calc(4vw*var(--k)),calc(60px*var(--k)))}
.archiv-kopf .sek-kopf{margin-bottom:0}
/* Klein ein leicht schräges Foto, beim Start wächst es zum Player */
.archiv-video{width:clamp(calc(300px*var(--k)),calc(27vw*var(--k)),calc(440px*var(--k)));padding:0;border-radius:calc(14px*var(--k));transform:rotate(2.4deg);box-shadow:0 calc(26px*var(--k)) calc(50px*var(--k)) calc(-20px*var(--k)) rgba(60,40,10,.6),0 0 0 1px rgba(255,250,235,.85),0 0 0 2px rgba(168,130,47,.4);transition:width .85s var(--spring),padding .5s,transform .7s var(--spring),box-shadow .5s,background .5s}
.archiv-video:hover{transform:translateY(calc(-4px*var(--k))) rotate(0deg);box-shadow:0 calc(36px*var(--k)) calc(70px*var(--k)) calc(-22px*var(--k)) rgba(50,30,5,.75),0 0 0 1px #fff7df,0 0 0 2px var(--gold),0 0 calc(50px*var(--k)) calc(-8px*var(--k)) rgba(226,180,70,.7)}
.archiv-video .video__huelle{aspect-ratio:4/3;border-radius:calc(14px*var(--k));transition:aspect-ratio .85s var(--spring)}
.archiv-video .video__start img{filter:saturate(.95)}
.archiv-video .video__start:hover img{filter:none}
.archiv-video__text{position:absolute;left:0;right:0;bottom:0;display:grid;gap:1px;padding:calc(40px*var(--k)) clamp(calc(84px*var(--k)),calc(7vw*var(--k)),calc(110px*var(--k))) calc(14px*var(--k)) calc(16px*var(--k));line-height:1.25;color:#fff;background:linear-gradient(transparent,rgba(20,13,7,.9))}
.archiv-video__text b{font-size:clamp(calc(19px*var(--k)),calc(1.5vw*var(--k)),calc(24px*var(--k)));font-weight:700}
.archiv-video__text span{font-size:clamp(calc(15.5px*var(--k)),calc(1.1vw*var(--k)),calc(18px*var(--k)));color:var(--gold-light)}
.archiv-video .video__start .archiv-video__text small{position:static;padding:0;font-size:clamp(calc(13.5px*var(--k)),calc(.9vw*var(--k)),calc(15px*var(--k)));opacity:.78;background:none}
.archiv-video .video__start .spielen{left:auto;top:auto;right:calc(14px*var(--k));bottom:calc(14px*var(--k));width:clamp(calc(58px*var(--k)),calc(5vw*var(--k)),calc(76px*var(--k)));height:clamp(calc(58px*var(--k)),calc(5vw*var(--k)),calc(76px*var(--k)));margin:0;transition:transform .45s var(--spring),box-shadow .3s}
.archiv-video .video__start:hover .spielen,.archiv-video .video__start:focus-visible .spielen{transform:scale(1.14);box-shadow:0 0 0 calc(8px*var(--k)) rgba(241,218,156,.3)}
.archiv-video .spielen svg{width:42%;height:42%;margin-left:4%}
.archiv-video.is-spielt{width:clamp(calc(480px*var(--k)),calc(46vw*var(--k)),calc(720px*var(--k)));padding:clamp(calc(8px*var(--k)),calc(.8vw*var(--k)),calc(12px*var(--k)));border-radius:var(--r);transform:none;background:var(--buehne);box-shadow:0 calc(40px*var(--k)) calc(80px*var(--k)) calc(-30px*var(--k)) rgba(60,40,10,.85),0 0 0 1px rgba(233,200,120,.35)}
.archiv-video.is-spielt .video__huelle{aspect-ratio:16/9;border-radius:calc(10px*var(--k))}
.archiv-video .spieler{padding-inline:2px}
.archiv-video .spieler__knopf{color:var(--gold-light);background:rgba(241,218,156,.14);box-shadow:inset 0 0 0 1px rgba(241,218,156,.4)}
.archiv-video .spieler__zeit{color:#f3e8d4}
.archiv-video input[type=range].regler::-webkit-slider-runnable-track{background:linear-gradient(90deg,var(--gold-light) var(--p,0%),rgba(241,218,156,.28) var(--p,0%))}
.archiv-video input[type=range].regler::-moz-range-track{background:rgba(241,218,156,.28)}
.archiv-video input[type=range].regler::-moz-range-progress{background:var(--gold-light)}
@media (max-width:980px){.archiv-kopf{grid-template-columns:minmax(0,1fr)}.archiv-video,.archiv-video.is-spielt{width:100%;transform:none}}

/* ===== Artikel-Ausschnitt: Schreiben des Bürgermeisters ===== */
.bericht{position:relative;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(calc(20px*var(--k)),calc(3.4vw*var(--k)),calc(52px*var(--k)));align-items:center;margin-top:clamp(calc(40px*var(--k)),calc(5vw*var(--k)),calc(72px*var(--k)));padding-block:clamp(calc(28px*var(--k)),calc(3.4vw*var(--k)),calc(48px*var(--k)));scroll-margin-top:calc(90px*var(--k))}
.bericht::before,.bericht::after{content:"";position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent)}
.bericht::before{top:0}.bericht::after{bottom:0}
.bericht__text{display:grid;gap:calc(14px*var(--k));justify-items:start;min-width:0}
.bericht__text h2{font-size:clamp(calc(26px*var(--k)),calc(3vw*var(--k)),calc(40px*var(--k)))}
.bericht__zitat{margin:calc(6px*var(--k)) 0 2px;padding-left:clamp(calc(14px*var(--k)),calc(1.6vw*var(--k)),calc(22px*var(--k)));font:500 italic clamp(calc(23px*var(--k)),calc(2.25vw*var(--k)),calc(31px*var(--k)))/1.28 var(--ital);color:var(--espresso);position:relative}
.bericht__zitat::before{content:"";position:absolute;left:0;top:.2em;bottom:.2em;width:1px;background:linear-gradient(180deg,transparent,var(--gold-deep),transparent)}
.bericht__fakten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(calc(10px*var(--k)),calc(1.6vw*var(--k)),calc(22px*var(--k)));width:100%;font-size:var(--t);line-height:1.3;color:var(--brown)}
.bericht__fakten b{display:block;font:700 clamp(calc(22px*var(--k)),calc(2.2vw*var(--k)),calc(30px*var(--k)))/1.15 var(--serif);color:var(--gold-text)}
.bericht__schluss{font:500 italic clamp(calc(19px*var(--k)),calc(1.6vw*var(--k)),calc(22px*var(--k)))/1.3 var(--ital);color:var(--brown)}
.bericht__name{font-size:var(--t);line-height:1.35;color:var(--brown)}
.bericht__name b{display:block;font:700 clamp(calc(19px*var(--k)),calc(1.6vw*var(--k)),calc(22px*var(--k)))/1.25 var(--serif);color:var(--espresso)}
.bericht__blatt{display:block;width:100%;background:#fff;cursor:zoom-in;border-radius:calc(3px*var(--k));box-shadow:0 calc(30px*var(--k)) calc(60px*var(--k)) calc(-26px*var(--k)) rgba(60,40,10,.65),0 0 0 1px rgba(48,37,26,.14);transform:rotate(1.6deg);transition:transform .7s var(--spring),box-shadow .5s}
.bericht__blatt img{display:block;width:100%;height:auto}
.bericht__blatt:hover,.bericht__blatt:focus-visible{transform:rotate(0) translateY(calc(-6px*var(--k))) scale(1.03);box-shadow:0 calc(44px*var(--k)) calc(80px*var(--k)) calc(-26px*var(--k)) rgba(60,40,10,.75),0 0 0 1px rgba(168,130,47,.6),0 0 calc(48px*var(--k)) calc(-10px*var(--k)) rgba(226,180,70,.55)}
@media (max-width:860px){
  .bericht{grid-template-columns:1fr}
  .bericht__blatt{max-width:calc(380px*var(--k));justify-self:center}
}
@media (max-width:520px){.bericht__fakten{grid-template-columns:1fr}}

/* ===== Reise durch den Filter ===== */
.reise{height:calc(190*var(--fh,1vh)*var(--k))}
.reise__pin{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;overflow:hidden}
.reise__grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(calc(20px*var(--k)),calc(3vw*var(--k)),calc(56px*var(--k)));align-items:center;width:min(calc(1320px*var(--k)),100%);padding-left:calc(clamp(calc(20px*var(--k)),calc(4vw*var(--k)),calc(44px*var(--k))) + max(0px,(min(100vw,calc(1320px*var(--k))) - calc(1240px*var(--k)))/2))}
.reise__links{display:grid;gap:calc(14px*var(--k));justify-items:start;padding-top:calc(60px*var(--k))}
.reise__links h2{font-size:clamp(calc(28px*var(--k)),calc(3.4vw*var(--k)),calc(48px*var(--k)))}
.reise__schritte{position:relative;display:grid;width:100%;min-height:calc(260px*var(--k))}
.reise__schritte li{grid-area:1/1;display:grid;gap:calc(10px*var(--k));align-content:start;opacity:0;transform:translateY(calc(14px*var(--k)));transition:opacity .3s,transform .35s var(--ease);pointer-events:none;visibility:hidden}
.reise__schritte li.is-an{opacity:1;transform:none;pointer-events:auto;visibility:visible}
.reise__schritte h3{font-size:clamp(calc(21px*var(--k)),calc(2vw*var(--k)),calc(28px*var(--k)))}
.reise__punkte{display:flex;gap:calc(8px*var(--k))}
.reise__punkte i{width:calc(34px*var(--k));height:calc(4px*var(--k));border-radius:calc(4px*var(--k));background:rgba(48,37,26,.16);overflow:hidden;position:relative}
.reise__punkte i::after{content:"";position:absolute;inset:0;background:var(--gold-deep);transform:scaleX(var(--f,0));transform-origin:left}
.reise__buehne{position:relative;height:min(calc(84*var(--fh,1vh)*var(--k)),calc(780px*var(--k)))}
.filtersim{position:absolute;inset:0}
.filtersim__cam{position:absolute;inset:0;transform-origin:50% 50%;will-change:transform;transition:transform .7s var(--ease)}
.filtersim svg,.filtersim canvas{position:absolute;inset:0;width:100%;height:100%}
.filtersim .fs-teil{transition:opacity .7s,filter .7s}
.fs-glow{filter:drop-shadow(0 0 calc(7px*var(--k)) rgba(232,190,90,.95))}
@media (max-width:980px){
  .reise{height:calc(210*var(--fh,1vh)*var(--k))}
  .reise__grid{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;height:100%;align-content:stretch;align-items:stretch;padding-block:calc(76px*var(--k)) calc(12px*var(--k));gap:calc(6px*var(--k))}
  .reise__buehne{grid-row:1;height:100%;min-height:0}
  .reise__links{grid-row:2;padding-top:0;gap:calc(8px*var(--k))}
  .reise__links>.kicker,.reise__links>h2,.reise__links>.textlink{display:none}
  .reise__schritte{min-height:calc(210px*var(--k))}
  .reise__schritte h3{font-size:calc(20px*var(--k))}
  .reise__schritte p{font-size:var(--t)}
}

/* ===== Duell ===== */
.duell{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(calc(24px*var(--k)),calc(4vw*var(--k)),calc(70px*var(--k)));align-items:center}
.duell__waage{display:grid;gap:calc(14px*var(--k))}
.waage{width:100%;height:auto}
.waage text{font:600 var(--t) var(--sans);fill:#e4d7bf}
.duell__ergebnis{display:grid;gap:calc(16px*var(--k));justify-items:center;text-align:center}
.duell__satz{max-width:50ch;font-size:var(--t);line-height:1.5;color:#e4d7bf}
.duell__ablauf{display:grid;gap:calc(12px*var(--k));font-size:var(--t);line-height:1.5}
.duell__ablauf li{display:grid;grid-template-columns:calc(30px*var(--k)) 1fr;gap:calc(12px*var(--k))}
.duell__ablauf span{width:calc(28px*var(--k));height:calc(28px*var(--k));border-radius:50%;background:var(--btn-grad);color:#3f2d0c;font:700 var(--t)/calc(28px*var(--k)) var(--sans);text-align:center}
.duell__ablauf b{color:var(--gold-light);display:block}
.duell__fazit{max-width:54ch;font:600 clamp(calc(17px*var(--k)),calc(1.5vw*var(--k)),calc(20px*var(--k)))/1.45 var(--sans);color:#f3e8d4}
@media (max-width:860px){.duell{grid-template-columns:minmax(0,1fr)}}

/* ===== Zeittunnel ===== */
.tunnel{height:calc(var(--n,10)*calc(26*var(--fh,1vh)*var(--k)) + 100vh);padding:0}
/* Tropfen und Linie laufen unsichtbar unter dem Holz durch, unten kommen sie aus dem Schatten wieder heraus */
.tunnel.dark::before,.tunnel.dark>.holz{z-index:3}
.tunnel::after{content:"";position:absolute;left:0;right:0;top:100%;height:clamp(calc(60px*var(--k)),calc(9*var(--fh,1vh)*var(--k)),calc(110px*var(--k)));z-index:1;pointer-events:none;background:linear-gradient(rgba(30,15,5,.5),rgba(30,15,5,.16) 45%,transparent)}
.tunnel__pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;z-index:4;perspective:calc(2200px*var(--k));perspective-origin:50% 46%}
.tunnel__sterne{position:absolute;inset:0;width:100%;height:100%}
.tunnel__kopf{position:absolute;left:0;right:0;top:clamp(calc(78px*var(--k)),calc(10*var(--fh,1vh)*var(--k)),calc(108px*var(--k)));text-align:center;z-index:5;display:grid;gap:calc(6px*var(--k));justify-items:center;transition:opacity .5s;pointer-events:none}
.tunnel__kopf h2{font-size:clamp(calc(22px*var(--k)),calc(2.6vw*var(--k)),calc(34px*var(--k)))}
.tunnel__raum{position:absolute;inset:0;transform-style:preserve-3d}
.st{--bw:min(calc(50vw*var(--k)),calc(960px*var(--k)),calc(112*var(--fh,1vh)*var(--k)));--tw:min(calc(32vw*var(--k)),calc(500px*var(--k)));--spalt:clamp(calc(10px*var(--k)),calc(1vw*var(--k)),calc(16px*var(--k)));position:absolute;left:50%;top:57%;display:grid;grid-template-columns:var(--bw) var(--tw);gap:var(--spalt);align-items:center;transform:translate3d(-50%,-50%,0);opacity:0;visibility:hidden;pointer-events:none}
.st--dok{--bw:min(calc(47*var(--fh,1vh)*var(--k)),calc(36vw*var(--k)))}
.st--breit{--bw:min(calc(52vw*var(--k)),calc(1000px*var(--k)),calc(112*var(--fh,1vh)*var(--k)))}
.st--logo{--bw:min(calc(36vw*var(--k)),calc(560px*var(--k)))}
.st__haupt{min-width:0}
.st--logo .dok,.st--ziel .st__haupt img{padding:calc(18px*var(--k));background:#fffdf7;border-radius:calc(8px*var(--k))}
.st__haupt .dok{width:100%;border-radius:calc(3px*var(--k));display:block}
.st__haupt .foto{width:100%;aspect-ratio:16/10;display:block;box-shadow:0 calc(30px*var(--k)) calc(70px*var(--k)) calc(-20px*var(--k)) #000}
.st__rechts{display:grid;gap:var(--spalt);min-width:0}
.st__txt{display:grid;gap:calc(10px*var(--k));justify-items:start;padding:clamp(calc(16px*var(--k)),calc(1.7vw*var(--k)),calc(26px*var(--k)));border-radius:var(--r-s);background:linear-gradient(165deg,#3f3020,#21170e);box-shadow:inset 0 1px 0 rgba(255,235,190,.14),inset 0 0 0 1px rgba(241,218,156,.2)}
.st__jahr{font:700 clamp(calc(44px*var(--k)),calc(4.6vw*var(--k)),calc(76px*var(--k)))/.95 var(--serif);background:linear-gradient(100deg,#b8913f,#f7e8bd 50%,#b8913f);-webkit-background-clip:text;background-clip:text;color:transparent}
.st__txt h3{font-size:clamp(calc(23px*var(--k)),calc(2.3vw*var(--k)),calc(34px*var(--k)))}
.st__txt p{font-size:clamp(calc(21px*var(--k)),calc(1.45vw*var(--k)),calc(30px*var(--k)));line-height:1.55;color:#e9dcc4}
.st__txt p.quellen{font-size:clamp(calc(18px*var(--k)),calc(1.25vw*var(--k)),calc(25px*var(--k)))}
.st__txt .quelle,.st__txt .btn--sm{font-size:clamp(calc(21px*var(--k)),calc(1.95vw*var(--k)),calc(30px*var(--k)))}
.st__knopf{display:flex;flex-wrap:wrap;gap:calc(6px*var(--k))}
.st__neben{width:100%;height:clamp(calc(120px*var(--k)),calc(22*var(--fh,1vh)*var(--k)),calc(230px*var(--k)));box-shadow:0 calc(20px*var(--k)) calc(50px*var(--k)) calc(-18px*var(--k)) #000}
.tunnel__jahre{position:absolute;right:clamp(calc(10px*var(--k)),calc(2vw*var(--k)),calc(30px*var(--k)));top:50%;transform:translateY(-50%);display:grid;gap:2px;z-index:6}
.tunnel__jahre button{display:flex;align-items:center;justify-content:flex-end;gap:calc(8px*var(--k));font-size:var(--t);font-weight:700;color:#a8987c;padding:calc(3px*var(--k)) 0;transition:color .25s}
.tunnel__jahre button::after{content:"";width:calc(14px*var(--k));height:1px;background:currentColor;transition:width .3s var(--ease)}
.tunnel__jahre button.is-an{color:var(--gold-light)}
.tunnel__jahre button.is-an::after{width:calc(30px*var(--k))}
@media (max-width:860px){
  .tunnel{height:calc(var(--n,10)*calc(26*var(--fh,1vh)*var(--k)) + 100vh)}
  .st,.st--dok,.st--breit,.st--logo{--bw:calc(92vw*var(--k));--tw:calc(92vw*var(--k));--spalt:calc(8px*var(--k));grid-template-columns:var(--bw);top:53%}
  .st--dok .st__haupt .dok{max-height:calc(36*var(--fh,1vh)*var(--k));overflow:hidden}
  .st__txt{gap:calc(6px*var(--k));padding:calc(14px*var(--k)) calc(16px*var(--k))}
  .st__jahr{font-size:calc(38px*var(--k))}
  .st__txt p{font-size:var(--t)}
  .st__neben{display:none}
  .tunnel__jahre{display:none}
  .tunnel__kopf{top:calc(70px*var(--k))}
  .tunnel__kopf .kicker{display:none}
}
/* Ohne Script oder bei ruhiger Darstellung: normale Liste */
.tunnel--liste{height:auto;padding-block:calc(60px*var(--k))}
.tunnel--liste .tunnel__pin{position:relative;height:auto;overflow:visible;perspective:none}
.tunnel--liste .tunnel__sterne,.tunnel--liste .st__neben,.tunnel--liste .tunnel__jahre{display:none}
.tunnel--liste .tunnel__kopf{position:relative;top:auto;margin-bottom:calc(30px*var(--k))}
.tunnel--liste .tunnel__raum{position:relative;display:grid;gap:calc(40px*var(--k));padding-inline:calc(20px*var(--k));max-width:calc(1100px*var(--k));margin-inline:auto}
.tunnel--liste .st{position:relative;left:auto;top:auto;transform:none;opacity:1;visibility:visible;pointer-events:auto;grid-template-columns:1fr 1.2fr;gap:calc(14px*var(--k))}
@media (max-width:860px){.tunnel--liste .st{grid-template-columns:1fr}}
html:not(.js) .tunnel{height:auto}
html:not(.js) .st{position:relative;left:auto;top:auto;transform:none;opacity:1;visibility:visible;pointer-events:auto;margin:calc(20px*var(--k)) auto}

/* ===== Einsatz ===== */
.kacheln{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,calc(240px*var(--k))),1fr));gap:clamp(calc(10px*var(--k)),calc(1.2vw*var(--k)),calc(16px*var(--k)))}
.kachel{display:grid;gap:calc(3px*var(--k));padding:calc(16px*var(--k)) calc(18px*var(--k));text-decoration:none;height:100%;align-content:start}
.kachel svg{width:calc(34px*var(--k));height:calc(34px*var(--k));color:var(--gold-text);margin-bottom:calc(6px*var(--k));transition:transform .4s var(--spring)}
.kachel:hover svg{transform:translateY(calc(-3px*var(--k))) scale(1.08)}
.kachel b{font-size:var(--t);color:var(--espresso);line-height:1.25}
.kachel span{font-size:var(--t);color:var(--muted);line-height:1.3}
.fotoband{display:grid;gap:var(--foto-spalt);margin:clamp(calc(28px*var(--k)),calc(3vw*var(--k)),calc(44px*var(--k))) auto 0;width:min(calc(1240px*var(--k)),100%);padding-inline:clamp(calc(20px*var(--k)),calc(4vw*var(--k)),calc(44px*var(--k)));overflow:hidden;position:relative;z-index:3}
.fotoband__zeile{display:flex;gap:var(--foto-spalt);width:max-content;will-change:transform}
.fotoband .foto{width:clamp(calc(280px*var(--k)),calc(29vw*var(--k)),calc(560px*var(--k)));height:clamp(calc(190px*var(--k)),calc(20vw*var(--k)),calc(372px*var(--k)));flex:none;transition:opacity .5s,transform .7s var(--spring),box-shadow .5s}
/* Volle Bildschirmbreite, zu beiden Seiten breit auslaufend. Die Straße und der Tropfen laufen über den Fotos. */
.fotoband{width:100%;max-width:none;padding:calc(18px*var(--k)) 0;margin-inline:0;z-index:1;--aus:clamp(calc(120px*var(--k)),calc(17vw*var(--k)),calc(380px*var(--k)));-webkit-mask-image:linear-gradient(90deg,transparent,rgba(0,0,0,.28) calc(var(--aus)*.4),#000 var(--aus),#000 calc(100% - var(--aus)),rgba(0,0,0,.28) calc(100% - var(--aus)*.4),transparent);mask-image:linear-gradient(90deg,transparent,rgba(0,0,0,.28) calc(var(--aus)*.4),#000 var(--aus),#000 calc(100% - var(--aus)),rgba(0,0,0,.28) calc(100% - var(--aus)*.4),transparent)}
.fotoband__huelle{position:relative}
.fotoband:has(.foto:hover) .foto:not(:hover){opacity:.9}
.fotoband .foto:hover{z-index:2;transform:scale(1.02);box-shadow:0 calc(20px*var(--k)) calc(44px*var(--k)) calc(-18px*var(--k)) rgba(50,30,5,.6),0 0 0 1px #fff7df,0 0 0 2px var(--gold)}
.fotoband .foto:hover .foto__txt{opacity:0}
.fotoband .foto__txt{transition:opacity .3s}
/* Lichtstreif läuft einmal über das Bild, dann steigen die Angaben auf */
.fotoband .foto::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(105deg,transparent 38%,rgba(255,240,195,.16) 50%,transparent 62%);transform:translateX(-120%)}
.fotoband .foto:hover::before{transform:translateX(120%);transition:transform 1.1s var(--ease)}
.foto__info{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:calc(5px*var(--k));padding:clamp(calc(14px*var(--k)),calc(1.4vw*var(--k)),calc(24px*var(--k)));text-align:left;color:#fff;background:linear-gradient(180deg,rgba(20,13,7,0) 18%,rgba(20,13,7,.62) 52%,rgba(20,13,7,.93));opacity:0;transition:opacity .4s}
.foto:hover .foto__info,.foto:focus-visible .foto__info{opacity:1}
.foto__info>*{display:block;opacity:0;transform:translateY(calc(16px*var(--k)));transition:opacity .45s,transform .6s var(--spring)}
.foto:hover .foto__info>*,.foto:focus-visible .foto__info>*{opacity:1;transform:none}
.foto:hover .foto__info>:nth-child(1){transition-delay:.08s}
.foto:hover .foto__info>:nth-child(2){transition-delay:.16s}
.foto:hover .foto__info>:nth-child(3){transition-delay:.24s}
.foto:hover .foto__info>:nth-child(4){transition-delay:.34s}
.foto__info small{font-size:clamp(calc(14px*var(--k)),calc(1vw*var(--k)),calc(17px*var(--k)));font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-light)}
.foto__info b{font:700 clamp(calc(21px*var(--k)),calc(1.6vw*var(--k)),calc(28px*var(--k)))/1.15 var(--serif)}
.foto__info span{font-size:var(--t);line-height:1.35;-webkit-text-stroke:.2px currentColor}
.foto__info i{margin-top:calc(3px*var(--k));font-style:normal;font-size:clamp(calc(14px*var(--k)),calc(1vw*var(--k)),calc(16.5px*var(--k)));color:var(--gold-light)}

/* ===== Kleine Themen ===== */
.themen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(calc(12px*var(--k)),calc(1.5vw*var(--k)),calc(20px*var(--k)))}
.thema{padding:0;overflow:hidden;display:flex;flex-direction:column;transition:transform .6s var(--spring),box-shadow .5s}
.thema:hover{transform:translateY(calc(-6px*var(--k)));box-shadow:0 calc(34px*var(--k)) calc(70px*var(--k)) calc(-28px*var(--k)) rgba(60,40,10,.7),0 0 0 1px rgba(201,162,78,.7),0 0 calc(50px*var(--k)) calc(-14px*var(--k)) rgba(248,168,0,.55)}
.thema__buehne{position:relative;display:grid;place-items:center;aspect-ratio:360/206;padding:calc(8px*var(--k));background:var(--buehne)}
.thema__buehne svg{display:block;width:100%;height:100%;overflow:visible}
.thema__text{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:calc(8px*var(--k));padding:clamp(calc(18px*var(--k)),calc(1.8vw*var(--k)),calc(26px*var(--k)));font-size:var(--t);line-height:1.45}
.thema__text h3{margin-bottom:2px}
.thema .textlink{margin-top:auto;padding-top:calc(8px*var(--k))}
.thema .kicker{font-size:clamp(calc(16.5px*var(--k)),calc(1.15vw*var(--k)),calc(18px*var(--k)))}
.thema:not(.is-sicht) *{animation-play-state:paused!important}
.thema svg text{font-family:var(--sans);text-anchor:middle}

/* Größen: Filter füllen sich mit Öl */
.groesse__oel{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0);transition:transform 1.5s cubic-bezier(.3,.9,.3,1) calc(var(--i)*.28s + .35s)}
.is-in .groesse__oel{transform:none}
.groesse__name{font-size:calc(18px*var(--k));font-weight:700;fill:#ffd25a;transition:font-size .3s}
.groesse__liter{font-size:calc(13.5px*var(--k));font-weight:500;fill:#e9dcc4}
.groesse__schein{animation:themaAtmen 3.4s ease-in-out calc(var(--i)*.5s) infinite}
.groesse{transition:opacity .35s}
.thema:has(.groesse:hover) .groesse:not(:hover){opacity:.42}
.groesse__perle{fill:#fff3c4;opacity:0;animation:perleAuf var(--t) ease-in var(--w) infinite}
.groesse__glanz{animation:groesseGlanz 5.4s ease-in-out calc(var(--i)*.45s + 1.8s) infinite}
@keyframes themaAtmen{50%{opacity:.45}}
@keyframes perleAuf{0%{opacity:0;transform:none}15%{opacity:.9}85%{opacity:.7}100%{opacity:0;transform:translateY(var(--h))}}
@keyframes groesseGlanz{0%,62%{translate:0 0}100%{translate:calc(130px*var(--k)) 0}}

/* Einbau: der Tropfen läuft durch alle Schritte */
.schrittpunkt{transition:transform .5s var(--spring)}
.schrittpunkt.is-an{transform:scale(1.14)}
.schrittpunkt__kreis{fill:#2c1e13;stroke:#d8b663;stroke-width:2;transition:fill .35s}
.schrittpunkt.is-an .schrittpunkt__kreis{fill:#a85c08}
.schrittpunkt__licht{opacity:0;transition:opacity .4s}
.schrittpunkt.is-an .schrittpunkt__licht{opacity:1}
.schrittpunkt__zahl{font-weight:700;fill:#fff3c4}
.schrittpunkt__name{font-size:calc(15px*var(--k));font-weight:600;fill:#e9dcc4}
@keyframes knotenAuf{0%{transform:scale(1)}7%{transform:scale(1.16)}24%,100%{transform:scale(1)}}
@keyframes knotenFarbe{0%{fill:#241a10}7%{fill:#d87c00;stroke:#ffe08a}30%,100%{fill:#241a10;stroke:#d8b663}}
@keyframes knotenLicht{0%{opacity:0}7%{opacity:1}34%,100%{opacity:0}}

/* Ausfälle: Ring zählt hoch */
.ring__wert{stroke-dasharray:90 100;stroke-dashoffset:90;transition:stroke-dashoffset 1.8s cubic-bezier(.25,.8,.25,1) .3s}
.is-in .ring__wert{stroke-dashoffset:0}
.ring__schein{animation:themaAtmen 3.6s ease-in-out infinite}
.ring__zahl{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;line-height:1;color:#fff3c4;pointer-events:none}
.ring__zahl small{font-size:clamp(calc(14px*var(--k)),calc(1.05vw*var(--k)),calc(17px*var(--k)));font-weight:600;color:#e9dcc4;margin-bottom:calc(3px*var(--k))}
.ring__zahl b{font:700 clamp(calc(28px*var(--k)),calc(2.6vw*var(--k)),calc(42px*var(--k)))/1 var(--serif);color:#ffd25a}
.teil{opacity:0}
.teil--dreck{fill:#8d7c67;stroke:#c9b9a2;stroke-width:.5;animation:teilRein 3.7s ease-in var(--w) infinite}
.teil--rein{fill:#ffc84a;animation:teilRaus 3.7s ease-out var(--w) infinite}
@keyframes teilRein{0%{opacity:0;transform:none}12%{opacity:1}80%{opacity:1}100%{opacity:0;transform:translate(calc(104px*var(--k)),var(--y))}}
@keyframes teilRaus{0%{opacity:0;transform:none}15%{opacity:1}85%{opacity:.9}100%{opacity:0;transform:translate(calc(102px*var(--k)),var(--y))}}
@media (prefers-reduced-motion:reduce){.groesse__schein,.groesse__perle,.groesse__glanz,.ring__schein,.teil{animation:none}.groesse__oel,.ring__wert{transition:none}}
.index{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(calc(18px*var(--k)),calc(3vw*var(--k)),calc(50px*var(--k)));margin-top:clamp(calc(40px*var(--k)),calc(5vw*var(--k)),calc(70px*var(--k)));padding-top:clamp(calc(24px*var(--k)),calc(3vw*var(--k)),calc(36px*var(--k)));position:relative}
.index::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent)}
.index div{display:grid;gap:calc(6px*var(--k));align-content:start}
.index h3{font-size:var(--t);color:var(--gold-text);margin-bottom:calc(4px*var(--k))}
.index a{font-size:var(--t);text-decoration:none;color:var(--espresso);transition:transform .3s var(--ease),color .2s;display:inline-block;justify-self:start}
.index a:hover{color:var(--gold-text);transform:translateX(calc(4px*var(--k)))}
@media (max-width:980px){.themen{grid-template-columns:minmax(0,1fr)}.index{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}

/* ===== Ziel ===== */
.ziel__karte{padding:clamp(calc(28px*var(--k)),calc(4.4vw*var(--k)),calc(70px*var(--k)));display:grid;gap:calc(18px*var(--k));justify-items:start;overflow:hidden}
.ziel__karte h2{font-size:clamp(calc(28px*var(--k)),calc(3.8vw*var(--k)),calc(50px*var(--k)));max-width:20ch}
.ziel__karte .lead{color:#e9dcc4}
.ziel__schritte{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(calc(14px*var(--k)),calc(2vw*var(--k)),calc(30px*var(--k)));width:100%;margin-block:calc(10px*var(--k))}
.ziel__schritte li{display:grid;gap:calc(4px*var(--k));font-size:var(--t);line-height:1.45;color:#d9cbb1;padding-top:calc(14px*var(--k));position:relative}
.ziel__schritte li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,rgba(241,218,156,.55),transparent)}
.ziel__schritte span{font:700 calc(26px*var(--k)) var(--serif);color:var(--gold-2)}
.ziel__schritte b{color:var(--gold-light);font-size:var(--t)}
@media (max-width:760px){.ziel__schritte{grid-template-columns:minmax(0,1fr)}}

/* Polnische Überschriften sind länger */
html[lang=pl] .held h1,html[lang=pl] .held__titel{font-size:clamp(calc(36px*var(--k)),calc(5vw*var(--k)),calc(72px*var(--k)))}
html[lang=en] .held__titel{font-size:clamp(calc(34px*var(--k)),calc(3.6vw*var(--k)),calc(52px*var(--k)))}

/* ===== Der Beweis: heller Grund, zwei freigestellte Prüfrollen im Duell ===== */
#beweis{--ende:#5e4932;color:#fff6e3}
#beweis::before{background:
  radial-gradient(calc(52vw*var(--k)) calc(62*var(--fh,1vh)*var(--k)) at 74% 38%,rgba(255,214,120,.3),transparent 68%),
  radial-gradient(calc(40vw*var(--k)) calc(46*var(--fh,1vh)*var(--k)) at 18% 62%,rgba(255,200,110,.13),transparent 70%),
  linear-gradient(180deg,#7a6242,#6a5438 74%,var(--ende))}
#beweis:has(+ .tunnel){--ende:var(--espresso-2)}
.uebergang--rein:has(+ #beweis){background:linear-gradient(180deg,transparent,#7a6242)}
#beweis + .uebergang--raus{background:linear-gradient(180deg,#5e4932,transparent)}
#beweis .gold{background-image:linear-gradient(100deg,#f1d68f,#fff8df 45%,#ffe6a6 60%,#f1d68f)}
#beweis .kicker{color:#ffe2a0}
#beweis .lead,#beweis .duell__satz,#beweis .klein{color:#fff1d8}
#beweis .klein a{color:inherit}
#beweis .waage text{fill:#fff3da}
#beweis .duell__ablauf b,#beweis .tiefer summary{color:#ffe2a0}
.duell__waage{padding:clamp(calc(14px*var(--k)),calc(1.6vw*var(--k)),calc(24px*var(--k)));border-radius:var(--r);background:linear-gradient(165deg,rgba(255,244,220,.11),rgba(255,244,220,.03));box-shadow:inset 0 0 0 1px rgba(255,232,180,.2),0 calc(30px*var(--k)) calc(60px*var(--k)) calc(-36px*var(--k)) rgba(20,10,0,.6)}
.duell__buehne{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:start;gap:clamp(calc(4px*var(--k)),calc(1vw*var(--k)),calc(14px*var(--k)));width:100%;padding-top:calc(8px*var(--k));perspective:calc(1300px*var(--k))}
.duell__buehne::before{content:"";position:absolute;left:50%;top:44%;width:92%;aspect-ratio:1.5;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(255,226,150,.34),transparent);pointer-events:none;opacity:0;transition:opacity 1.4s var(--ease)}
.duell__buehne.is-an::before{opacity:1}
.rolle-frei{position:relative;z-index:1;display:grid;justify-items:center;align-content:start;gap:2px;background:none;color:inherit;text-align:center;cursor:zoom-in}
.rolle-frei__bild{position:relative;display:block;width:min(100%,calc(250px*var(--k)));margin-bottom:calc(22px*var(--k));transition:transform .7s var(--spring),opacity .9s var(--ease);transform-style:preserve-3d}
.rolle-frei img{display:block;width:100%;height:auto;filter:drop-shadow(0 calc(18px*var(--k)) calc(16px*var(--k)) rgba(24,12,0,.42))}
.rolle-frei__bild::after{content:"";position:absolute;left:4%;right:4%;bottom:-7%;height:11%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgba(24,12,0,.62),transparent)}
.rolle-frei__glanz{position:absolute;inset:0;-webkit-mask:var(--bild) center/100% 100% no-repeat;mask:var(--bild) center/100% 100% no-repeat;background:linear-gradient(105deg,transparent 38%,rgba(255,252,240,.28) 50%,transparent 62%) 150% 0/280% 100% no-repeat;pointer-events:none}
.rolle-frei b{font-size:var(--t);color:#ffe7ae}
.rolle-frei small{font-size:var(--t);line-height:1.3;color:#fff1d8;max-width:24ch}
.js .rolle-frei--a .rolle-frei__bild{opacity:0;transform:translateX(calc(-70px*var(--k))) rotate(-6deg)}
.js .rolle-frei--b .rolle-frei__bild{opacity:0;transform:translateX(calc(70px*var(--k))) rotate(6deg)}
.js .duell__buehne.is-an .rolle-frei__bild{opacity:1;transform:none}
.duell__buehne.is-an .rolle-frei__glanz{animation:rolleGlanz 1.5s var(--ease) .9s both}
.js .duell__buehne.is-an .rolle-frei:hover .rolle-frei__bild,.js .duell__buehne.is-an .rolle-frei:focus-visible .rolle-frei__bild{transform:translateY(calc(-10px*var(--k))) scale(1.04)}
.rolle-frei:hover .rolle-frei__glanz{animation:rolleGlanz2 1.1s var(--ease)}
@keyframes rolleGlanz{to{background-position:-50% 0}}
@keyframes rolleGlanz2{from{background-position:150% 0}to{background-position:-50% 0}}
.duell__siegel{--p:0;position:relative;z-index:2;display:grid;place-content:center;justify-items:center;width:clamp(calc(112px*var(--k)),calc(8.6vw*var(--k)),calc(132px*var(--k)));aspect-ratio:1;margin:clamp(calc(56px*var(--k)),calc(4.6vw*var(--k)),calc(82px*var(--k))) calc(-18px*var(--k)) 0;border-radius:50%;background:conic-gradient(from -90deg,#ffd768 calc(var(--p)*360deg),rgba(255,240,205,.2) 0);box-shadow:0 calc(22px*var(--k)) calc(44px*var(--k)) calc(-16px*var(--k)) rgba(24,12,0,.75),0 0 calc(44px*var(--k)) calc(4px*var(--k)) rgba(255,205,100,calc(var(--p)*.42));transition:transform .9s var(--spring) .35s,opacity .5s .35s}
.duell__siegel::before{content:"";position:absolute;inset:calc(6px*var(--k));border-radius:50%;background:radial-gradient(circle at 34% 26%,#5c452a,#2e2114 78%);box-shadow:inset 0 1px 0 rgba(255,235,190,.3)}
.js .duell__siegel{opacity:0;transform:scale(.45)}
.js .duell__buehne.is-an .duell__siegel{opacity:1;transform:none}
.duell__siegel .zahl{position:relative;font-size:clamp(calc(30px*var(--k)),calc(2.9vw*var(--k)),calc(44px*var(--k)));line-height:1;white-space:nowrap}
.duell__siegel small{position:relative;margin-top:calc(3px*var(--k));font-size:calc(13px*var(--k));font-weight:600;line-height:1.15;color:#ffe7ae;text-align:center;max-width:9ch}
.duell__fazit{font-size:clamp(calc(18px*var(--k)),calc(1.6vw*var(--k)),calc(22px*var(--k)))}
@media (prefers-reduced-motion:reduce){.rolle-frei__bild,.duell__siegel{transition:none}}
/* Pfeil von der Stahlrolle in der Animation zur Rolle im Foto */
.duell{position:relative}
.duell__pfeil{position:absolute;inset:0;width:100%;height:100%;z-index:4;overflow:visible;pointer-events:none}
.duell__pfeil path{fill:none;stroke:#ffe7ae;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.duell__pfeil .pfeil__linie{stroke-dasharray:1;stroke-dashoffset:1;opacity:.82;transition:stroke-dashoffset 1.3s var(--ease) 1.5s}
.duell__pfeil .pfeil__kopf{opacity:0;transition:opacity .4s 2.6s}
.duell__pfeil circle{fill:#fff3cf;opacity:0;transition:opacity .4s 2.8s}
.duell.is-an .duell__pfeil .pfeil__linie{stroke-dashoffset:0}
.duell.is-an .duell__pfeil .pfeil__kopf{opacity:.9}
.duell.is-an .duell__pfeil circle{opacity:.9}
@media (max-width:860px){.duell__pfeil{display:none}}

/* ===== Rechner ===== */
.rechner{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:0;overflow:hidden}
.rechner__modi{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:var(--foto-spalt);padding:clamp(calc(10px*var(--k)),calc(1.2vw*var(--k)),calc(14px*var(--k)))}
.modus{display:grid;gap:1px;text-align:left;padding:calc(14px*var(--k)) calc(18px*var(--k));border-radius:var(--r-s);background:rgba(48,37,26,.05);box-shadow:inset 0 0 0 1px var(--line-soft);transition:background .3s,box-shadow .3s,color .3s}
.modus:hover{background:rgba(201,162,78,.14)}
.modus__name{font:700 clamp(calc(18.5px*var(--k)),calc(1.4vw*var(--k)),calc(22px*var(--k)))/1.2 var(--serif);color:var(--espresso)}
.modus__unter{font-size:var(--t);color:var(--muted)}
.modus b{font:700 clamp(calc(21px*var(--k)),calc(2.2vw*var(--k)),calc(30px*var(--k)))/1.2 var(--serif);color:var(--gold-text);margin-top:calc(6px*var(--k))}
.modus__zeile{font-size:var(--t);color:var(--muted);font-variant-numeric:tabular-nums}
.modus.is-an{background:linear-gradient(165deg,#4a3a26,#3a2817);box-shadow:inset 0 0 0 1px rgba(233,200,120,.45)}
.modus.is-an .modus__name,.modus.is-an b{color:var(--gold-light)}
.modus.is-an .modus__unter,.modus.is-an .modus__zeile{color:#d9cbb1}
.rechner__satz{font-size:var(--t);line-height:1.5;color:#3b2e1e}
.rechner__weitere{display:grid;gap:calc(8px*var(--k))}
@media (max-width:640px){.rechner__modi{grid-template-columns:minmax(0,1fr)}}
.rechner__regler{padding:clamp(calc(20px*var(--k)),calc(2.4vw*var(--k)),calc(32px*var(--k)));display:grid;gap:calc(10px*var(--k));align-content:start;position:relative}
.rechner__regler::after{content:"";position:absolute;right:0;top:8%;bottom:8%;width:1px;background:linear-gradient(180deg,transparent,var(--line),transparent)}
.vorlagen{display:inline-flex;padding:calc(4px*var(--k));border-radius:calc(999px*var(--k));background:rgba(48,37,26,.06);justify-self:start;margin-bottom:calc(4px*var(--k))}
.vorlagen button{padding:calc(7px*var(--k)) calc(15px*var(--k));border-radius:calc(999px*var(--k));font-weight:700;font-size:var(--t);color:var(--brown);transition:background .25s,color .25s}
.vorlagen button.is-an{background:var(--btn-grad);color:#3f2d0c;box-shadow:inset 0 0 0 1px rgba(160,120,40,.5)}
.regel{display:grid;gap:2px;font-size:var(--t)}
.regel__kopf{display:flex;justify-content:space-between;gap:calc(10px*var(--k));align-items:baseline;color:var(--brown);font-weight:600}
.regel output{font-weight:700;color:var(--espresso);font-variant-numeric:tabular-nums;white-space:nowrap}
.rechner__filter{font-size:var(--t);line-height:1.45;padding:calc(10px*var(--k)) calc(12px*var(--k));border-radius:calc(12px*var(--k));background:rgba(201,162,78,.12);margin-top:calc(4px*var(--k))}
.rechner__filter .textlink{font-size:var(--t)}
.rechner__bild{padding:clamp(calc(18px*var(--k)),calc(2.2vw*var(--k)),calc(30px*var(--k)));display:grid;gap:calc(10px*var(--k));align-content:start;min-width:0}
.rechner__kacheln{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(10px*var(--k))}
.rechner__kacheln div{display:grid;gap:2px;padding:calc(10px*var(--k)) calc(12px*var(--k));border-radius:calc(14px*var(--k));background:linear-gradient(165deg,#4a3a26,#3a2817);color:#f1e8d6;box-shadow:inset 0 0 0 1px rgba(233,200,120,.35)}
.rechner__kacheln span{font-size:var(--t);line-height:1.2}
.rechner__kacheln b{font:700 clamp(calc(17px*var(--k)),calc(1.9vw*var(--k)),calc(25px*var(--k)))/1.1 var(--serif);color:var(--gold-light);white-space:nowrap}
.legende{display:flex;flex-wrap:wrap;gap:calc(6px*var(--k)) calc(18px*var(--k));font-size:var(--t);font-weight:600;color:var(--brown)}
.legende span{display:inline-flex;align-items:center;gap:calc(7px*var(--k))}
.legende i{width:calc(16px*var(--k));height:calc(3px*var(--k));border-radius:2px;display:inline-block}
.diagramm{position:relative;touch-action:pan-y}
.diagramm svg{width:100%;height:auto;overflow:visible}
.d-gitter{stroke:rgba(48,37,26,.12);stroke-width:1}
.d-basis{stroke:rgba(48,37,26,.4);stroke-width:1}
.d-achse{font:500 var(--t) var(--sans);fill:var(--muted);font-variant-numeric:tabular-nums}
.d-linie{fill:none;stroke-width:2;stroke-linecap:round}
.d-punkt{stroke:#fbf6ec;stroke-width:2}
.d-spar{fill:rgba(47,143,107,.12)}
.d-be-linie{stroke:rgba(168,130,47,.55);stroke-width:1}
.d-text{font:700 var(--t) var(--sans);fill:var(--espresso)}
.d-wert{font:700 var(--t) var(--sans);fill:var(--espresso);font-variant-numeric:tabular-nums}
.d-kreuz{stroke:rgba(48,37,26,.4);stroke-width:1}
.diagramm__tip{position:absolute;top:0;transform:translateX(-50%);padding:calc(8px*var(--k)) calc(12px*var(--k));border-radius:calc(12px*var(--k));display:grid;gap:2px;font-size:var(--t);color:#f1e8d6;background:rgba(30,21,13,.94);pointer-events:none;white-space:nowrap;z-index:5}
.diagramm__tip b{color:var(--gold-light)}
.diagramm__tip span{display:flex;align-items:center;gap:calc(6px*var(--k))}
.diagramm__tip i{width:calc(9px*var(--k));height:calc(9px*var(--k));border-radius:50%;display:inline-block;box-shadow:0 0 0 1px rgba(255,255,255,.5)}
.rechner__fuss{display:grid;grid-template-columns:minmax(0,1fr);gap:calc(8px*var(--k));justify-items:start}
.rechner__notiz{margin-top:calc(14px*var(--k));max-width:90ch}
.tabelle{width:100%;border-collapse:collapse;font-size:var(--t);margin-block:calc(8px*var(--k))}
.tabelle th,.tabelle td{padding:calc(8px*var(--k)) calc(10px*var(--k));text-align:left;border-bottom:1px solid var(--line-soft);font-variant-numeric:tabular-nums}
.tabelle td:last-child{white-space:nowrap}
.tabelle th{font-size:var(--t);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
@media (max-width:900px){.rechner{grid-template-columns:minmax(0,1fr)}.rechner__regler::after{display:none}}

/* ===== Reiter ===== */
.reiter{display:inline-flex;flex-wrap:wrap;gap:calc(4px*var(--k));padding:calc(5px*var(--k));border-radius:calc(999px*var(--k));background:rgba(48,37,26,.07);margin-bottom:calc(16px*var(--k))}
.reiter button{padding:calc(9px*var(--k)) calc(20px*var(--k));border-radius:calc(999px*var(--k));font-weight:700;font-size:var(--t);color:var(--brown);transition:background .25s,color .25s}
.reiter button[aria-selected=true]{background:var(--btn-grad);color:#3f2d0c;box-shadow:inset 0 0 0 1px rgba(160,120,40,.5),0 calc(8px*var(--k)) calc(18px*var(--k)) calc(-10px*var(--k)) rgba(120,85,20,.7)}
.reiter--klein{margin-bottom:calc(6px*var(--k))}
.reiter--klein button{padding:calc(7px*var(--k)) calc(14px*var(--k));font-size:var(--t)}

/* ===== Einbauplan ===== */
.einbau{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(calc(16px*var(--k)),calc(2.4vw*var(--k)),calc(34px*var(--k)));padding:clamp(calc(12px*var(--k)),calc(1.4vw*var(--k)),calc(20px*var(--k)));align-items:stretch}
.einbau__plan svg{width:100%;height:auto}
.einbau__text{display:grid;gap:calc(14px*var(--k));justify-items:start}
.einbau__liste{display:grid;gap:calc(6px*var(--k));width:100%;font-size:var(--t);line-height:1.38}
.einbau__liste li{animation:sanftRein .6s var(--ease) both;animation-delay:var(--d)}
.einbau__schritt{display:grid;grid-template-columns:calc(28px*var(--k)) minmax(0,1fr);gap:0 calc(10px*var(--k));width:100%;padding:calc(9px*var(--k)) calc(11px*var(--k));border-radius:calc(13px*var(--k));text-align:left;transition:background .25s,box-shadow .25s}
.einbau__schritt:hover{background:rgba(201,162,78,.1)}
.einbau__schritt.is-an{background:rgba(201,162,78,.16);box-shadow:inset 0 0 0 1px rgba(168,130,47,.42)}
.einbau__schritt>span{width:calc(26px*var(--k));height:calc(26px*var(--k));border-radius:50%;background:var(--btn-grad);color:#3f2d0c;font:700 calc(15px*var(--k))/calc(26px*var(--k)) var(--sans);text-align:center;box-shadow:inset 0 0 0 1px rgba(160,120,40,.5);transition:transform .45s var(--spring)}
.einbau__schritt.is-an>span{transform:scale(1.14)}
.einbau__schritt>b{font-weight:500}
.einbau__schritt>small{grid-column:2;display:grid;grid-template-rows:0fr;font-size:.92em;color:var(--brown);transition:grid-template-rows .45s var(--ease)}
.einbau__schritt>small>i{overflow:hidden;min-height:0;font-style:normal;opacity:0;transition:opacity .35s}
.einbau__schritt.is-an>small{grid-template-rows:1fr;margin-top:calc(4px*var(--k))}
.einbau__schritt.is-an>small>i{opacity:1}
.einbau__buehne{position:relative;display:flex;flex-direction:column;justify-content:center;gap:clamp(calc(8px*var(--k)),calc(1vw*var(--k)),calc(16px*var(--k)));padding:clamp(calc(12px*var(--k)),calc(1.4vw*var(--k)),calc(20px*var(--k)));border-radius:var(--r-s);background:linear-gradient(160deg,#573e26,#33221a 55%,#2b1c12);color:#fff2da;box-shadow:0 calc(22px*var(--k)) calc(44px*var(--k)) calc(-26px*var(--k)) rgba(30,15,5,.8)}
.einbau__plan{min-width:0}
.ol-spur{fill:none;stroke:rgba(255,240,205,.16);stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
.ol-voll{fill:none;stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.ol-voll--dreck{stroke:#a85c08}
.ol-voll--rein{stroke:#ffc84a;filter:drop-shadow(0 0 calc(5px*var(--k)) rgba(255,190,70,.65))}
.ol-tropfen path{fill:#a85c08;stroke:#ffcf8a;stroke-width:1;transition:fill .4s}
.ol-tropfen.ist-rein path{fill:#ffb31f;stroke:#fff0b8}
.ol-ort{transition:transform .5s var(--spring)}
.ol-ort.is-an{transform:scale(1.05)}
.ol-ort text{fill:#fff2da}
.ol-ort .ol-klein{font-size:calc(12.5px*var(--k));fill:#ecd9b8}
.ol-feld{fill:#3a2817;stroke:rgba(255,205,130,.42);stroke-width:1.2;transition:fill .35s,stroke .35s}
.ol-ort.is-an .ol-feld{fill:#5f4227;stroke:#ffc84a}
.ol-ort--filter image{filter:drop-shadow(0 calc(10px*var(--k)) calc(12px*var(--k)) rgba(15,8,0,.55))}
.ol-schein{fill:rgba(255,200,90,.34);opacity:0;transition:opacity .45s}
.ol-ort.is-an .ol-schein{opacity:1}
.einbau__jetzt{display:grid;gap:1px;min-height:4.9em;padding:calc(9px*var(--k)) calc(13px*var(--k));border-radius:calc(12px*var(--k));background:rgba(255,245,225,.09);box-shadow:inset 0 0 0 1px rgba(255,225,170,.16);line-height:1.34}
.einbau__jetzt b{font-family:var(--serif);color:var(--gold-light)}
.einbau__jetzt.is-neu>*{animation:sanftRein .5s var(--ease) both}
.einbau__legende{display:flex;flex-wrap:wrap;align-items:center;gap:calc(6px*var(--k)) calc(8px*var(--k));font-size:.88em;color:#ecd9b8}
.einbau__legende i{width:calc(22px*var(--k));height:calc(5px*var(--k));border-radius:calc(5px*var(--k))}
.einbau__legende i+*{margin:0}
.einbau__legende .ist-dreck{background:#a85c08}
.einbau__legende .ist-rein{margin-left:calc(10px*var(--k));background:#ffc84a}
.einbau__fakten{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(10px*var(--k));margin-top:calc(12px*var(--k));padding:0;list-style:none}
.einbau__fakten li{display:grid;gap:calc(3px*var(--k));padding:calc(13px*var(--k)) calc(15px*var(--k));border-radius:var(--r-s);background:linear-gradient(165deg,rgba(255,253,247,.9),rgba(248,240,226,.66));box-shadow:0 calc(14px*var(--k)) calc(28px*var(--k)) calc(-22px*var(--k)) rgba(70,50,20,.6),inset 0 0 0 1px rgba(160,120,40,.2);animation:sanftRein .6s var(--ease) both;animation-delay:var(--d)}
.einbau__fakten b{font:700 clamp(calc(18px*var(--k)),calc(1.5vw*var(--k)),calc(24px*var(--k)))/1.15 var(--serif);color:var(--gold-text)}
.einbau__fakten span{font-size:.95em;line-height:1.3;color:var(--brown)}
@media (max-width:860px){.einbau__fakten{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){.einbau{grid-template-columns:minmax(0,1fr)}}

/* ===== Größenfinder ===== */

/* ===== Datenblatt ===== */
.fakten{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,calc(250px*var(--k))),1fr));gap:clamp(calc(12px*var(--k)),calc(1.5vw*var(--k)),calc(18px*var(--k)))}
.fakt{padding:calc(18px*var(--k)) calc(20px*var(--k));display:grid;gap:calc(4px*var(--k))}
.seite-praxistest .fakt{translate:0 calc(60px*var(--k))}
.fakt b{font-family:var(--serif);font-size:var(--t);color:var(--espresso)}
.fakt p{font-size:var(--t);line-height:1.5}

/* ===== ISO-Vergleich ===== */

/* ===== Kilometerwand ===== */
.kmwand{display:grid;gap:calc(12px*var(--k))}
.kmwand li{display:grid;grid-template-columns:minmax(calc(170px*var(--k)),calc(280px*var(--k))) 1fr max-content;gap:calc(14px*var(--k));align-items:center;opacity:0;transform:translateX(calc(-14px*var(--k)));transition:opacity .6s,transform .7s var(--ease);transition-delay:var(--d)}
.is-in .kmwand li,.kmwand.is-in li{opacity:1;transform:none}
.kmwand__wer{display:grid;line-height:1.25}
.kmwand__wer b{font-size:var(--t)}
.kmwand__wer small{font-size:var(--t);color:var(--muted)}
.kmwand__spur{height:calc(16px*var(--k));border-radius:0 calc(8px*var(--k)) calc(8px*var(--k)) 0;background:rgba(48,37,26,.07);overflow:hidden}
.kmwand__spur i{display:block;height:100%;width:var(--w);border-radius:0 calc(8px*var(--k)) calc(8px*var(--k)) 0;background:linear-gradient(90deg,#b8913f,#f0d98f);transform-origin:left;transform:scaleX(0);transition:transform 1.5s var(--ease);transition-delay:calc(var(--d) + 200ms)}
.is-in .kmwand__spur i{transform:none}
.kmwand__wert{font:700 var(--t) var(--serif);text-align:right;white-space:nowrap;color:var(--espresso)}
@media (max-width:640px){
  .kmwand li{grid-template-columns:minmax(0,1fr) auto;gap:calc(4px*var(--k)) calc(10px*var(--k))}
  .kmwand__wer{grid-column:1/-1}
  .kmwand__spur{grid-area:2/1}
  .kmwand__wert{grid-area:2/2;font-size:var(--t)}
}

/* ===== Galerie ===== */
.galerie{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--foto-spalt)}
.galerie .foto{grid-column:span 2;aspect-ratio:4/3;width:100%}
.galerie .foto:last-child:nth-child(3n+2),.galerie .foto:nth-last-child(2):nth-child(3n+1){grid-column:span 3;aspect-ratio:16/10}
.galerie .foto:last-child:nth-child(3n+1){grid-column:span 6;aspect-ratio:21/9}
.galerie--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.galerie--2 .foto,.galerie--2 .foto:last-child:nth-child(n),.galerie--2 .foto:nth-last-child(2):nth-child(n){grid-column:span 1;aspect-ratio:4/3}
@media (max-width:760px){.galerie{grid-template-columns:repeat(2,minmax(0,1fr))}.galerie .foto,.galerie .foto:last-child:nth-child(n),.galerie .foto:nth-last-child(2):nth-child(n){grid-column:span 1;aspect-ratio:4/3}}
.gruppe{scroll-margin-top:calc(110px*var(--k))}
.gruppe__kopf{display:flex;align-items:center;gap:calc(14px*var(--k));margin-bottom:calc(16px*var(--k))}
.gruppe__kopf svg{width:calc(36px*var(--k));height:calc(36px*var(--k));color:var(--gold-text);flex:none}
.gruppe__kopf h2{font-size:clamp(calc(24px*var(--k)),calc(2.6vw*var(--k)),calc(34px*var(--k)))}
.referenz{padding:clamp(calc(18px*var(--k)),calc(2vw*var(--k)),calc(26px*var(--k)));display:flex;flex-direction:column;gap:calc(8px*var(--k));font-size:var(--t);line-height:1.5}
.referenz h3{font-size:clamp(calc(22px*var(--k)),calc(1.9vw*var(--k)),calc(26px*var(--k)))}
.referenz .quelle{align-self:flex-start;margin-top:auto}
.referenz__zahl{font:700 clamp(calc(30px*var(--k)),calc(3vw*var(--k)),calc(40px*var(--k)))/1 var(--serif)}
.raster-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,calc(280px*var(--k))),1fr));gap:clamp(calc(12px*var(--k)),calc(1.5vw*var(--k)),calc(20px*var(--k)))}
.raster-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,calc(340px*var(--k))),1fr));gap:clamp(calc(14px*var(--k)),calc(2vw*var(--k)),calc(28px*var(--k)));align-items:center}
.raster-2>*{min-width:0}

/* ===== Hotspots ===== */
/* Bild und Punkte liegen in derselben Rasterzeile: So beziehen sich die Prozentwerte nur aufs Bild, nicht auf den Text darunter */
.hsbild{position:relative;display:grid;grid-template-columns:minmax(0,1fr)}
.hsbild>.dok,.hsbild>.hs{grid-area:1/1/2/2}
.hsbild>.hs-text{grid-area:2/1/3/2}
.hsbild img{width:100%;border-radius:var(--r-s)}
.hs{position:absolute;width:calc(30px*var(--k));height:calc(30px*var(--k));margin:calc(-15px*var(--k)) 0 0 calc(-15px*var(--k));border-radius:50%;background:var(--btn-grad);color:#3f2d0c;font:700 var(--t)/calc(30px*var(--k)) var(--sans);text-align:center;box-shadow:0 0 0 0 rgba(201,162,78,.7),inset 0 0 0 1px rgba(160,120,40,.6);isolation:isolate;transition:transform .3s var(--spring)}
.hs.is-an::after,.hs:hover::after{animation:none;opacity:0}
.hs.is-an,.hs:hover{transform:scale(1.25);box-shadow:0 0 0 calc(6px*var(--k)) rgba(201,162,78,.3),inset 0 0 0 1px rgba(160,120,40,.6)}
.hs-text{padding:calc(14px*var(--k)) calc(18px*var(--k));font-size:var(--t);line-height:1.5;min-height:calc(96px*var(--k))}
.hs-text b{display:block;font-family:var(--serif);font-size:clamp(calc(20px*var(--k)),calc(1.6vw*var(--k)),calc(23px*var(--k)));color:var(--espresso)}

/* ===== Simulation mit Knöpfen ===== */
.simblock{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(calc(16px*var(--k)),calc(3vw*var(--k)),calc(44px*var(--k)));align-items:center}
.simblock__knoepfe{display:grid;gap:calc(6px*var(--k))}
.simblock__knoepfe button{display:grid;gap:2px;text-align:left;padding:calc(13px*var(--k)) calc(16px*var(--k));border-radius:calc(14px*var(--k));transition:background .25s,box-shadow .25s}
.simblock__knoepfe button b{font:700 clamp(calc(19px*var(--k)),calc(1.45vw*var(--k)),calc(22px*var(--k))) var(--serif);color:var(--espresso)}
.simblock__knoepfe button span{font-size:var(--t);line-height:1.4;color:var(--muted)}
.simblock__knoepfe button.is-an{background:rgba(255,253,247,.8);box-shadow:inset 0 0 0 1px var(--line),var(--shadow)}
.simblock__buehne{position:relative;aspect-ratio:360/340;width:100%}
/* Die Kamera zoomt über die Bühne hinaus: Am Seitenrand sauber abschneiden */
.sek:has(>.wrap>.simblock){overflow-x:clip}
@media (max-width:860px){.simblock{grid-template-columns:minmax(0,1fr)}.simblock__buehne{order:-1;overflow:hidden}}

/* ===== Vergleich Hauptstrom/Nebenstrom ===== */
.strom{display:grid;grid-template-columns:1fr 1fr;gap:clamp(calc(12px*var(--k)),calc(1.5vw*var(--k)),calc(20px*var(--k)))}
.strom article{padding:clamp(calc(18px*var(--k)),calc(2vw*var(--k)),calc(26px*var(--k)));display:grid;gap:calc(8px*var(--k));align-content:start}
.strom__rohr{height:calc(44px*var(--k));border-radius:calc(22px*var(--k));position:relative;overflow:hidden;background:rgba(48,37,26,.08);box-shadow:inset 0 0 0 1px var(--line-soft)}
.strom__rohr i{position:absolute;top:50%;width:var(--g);height:var(--g);margin-top:calc(var(--g)/-2);border-radius:50%;background:var(--c);left:-10%;animation:rohr var(--t) linear infinite;animation-delay:var(--d)}
@keyframes rohr{to{left:110%}}
@media (max-width:680px){.strom{grid-template-columns:minmax(0,1fr)}}

/* ===== FAQ ===== */
.faq{display:grid;gap:calc(10px*var(--k))}
.faq details{border-radius:var(--r-s);overflow:hidden}
.faq summary{cursor:pointer;padding:calc(16px*var(--k)) calc(50px*var(--k)) calc(16px*var(--k)) calc(20px*var(--k));font-weight:700;font-size:var(--t);line-height:1.35;list-style:none;position:relative;color:var(--espresso)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:calc(20px*var(--k));top:50%;width:calc(12px*var(--k));height:calc(12px*var(--k));margin-top:calc(-8px*var(--k));border-right:2px solid var(--gold-deep);border-bottom:2px solid var(--gold-deep);transform:rotate(45deg);transition:transform .35s var(--ease)}
.faq details[open] summary::after{transform:rotate(225deg);margin-top:calc(-3px*var(--k))}
.faq__antwort{padding:0 calc(20px*var(--k)) calc(18px*var(--k));font-size:var(--t);line-height:1.6;display:grid;gap:calc(10px*var(--k));animation:sanftRein .5s var(--ease) both}
.faq__suche{width:100%;margin-bottom:calc(14px*var(--k))}
.faq__kat{font:700 var(--t) var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-text);margin:calc(18px*var(--k)) 0 2px}

/* ===== Videos ===== */
.videos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,calc(320px*var(--k))),1fr));gap:clamp(calc(14px*var(--k)),calc(2vw*var(--k)),calc(26px*var(--k)))}
.video{display:grid;gap:calc(10px*var(--k));align-content:start}
.video__huelle{position:relative;aspect-ratio:16/9;border-radius:var(--r-s);overflow:hidden;background:#1b130c}
.video__start{position:absolute;inset:0;width:100%;display:block;text-align:left;color:#fff;cursor:pointer}
.video__start img{width:100%;height:100%;object-fit:cover;filter:sepia(.2) brightness(.82);transition:transform .9s var(--ease),filter .4s}
.video__start:hover img{transform:scale(1.04);filter:none}
.video__start .spielen{position:absolute;left:50%;top:50%;width:calc(68px*var(--k));height:calc(68px*var(--k));margin:calc(-34px*var(--k)) 0 0 calc(-34px*var(--k))}
.video__start .spielen svg{width:calc(28px*var(--k));height:calc(28px*var(--k))}
.video__start small{position:absolute;left:0;right:0;bottom:0;padding:calc(22px*var(--k)) calc(12px*var(--k)) calc(8px*var(--k));font-size:var(--t);line-height:1.3;background:linear-gradient(transparent,rgba(0,0,0,.84))}
.video__frame{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none}
.video h3{font-size:clamp(calc(22px*var(--k)),calc(1.9vw*var(--k)),calc(26px*var(--k)))}
.video p{font-size:var(--t);line-height:1.5}
.kapitel{display:grid;gap:calc(6px*var(--k));font-size:var(--t);line-height:1.4}
.kapitel li{padding-left:calc(18px*var(--k));position:relative}
.kapitel li::before{content:"";position:absolute;left:0;top:calc(7px*var(--k));width:calc(7px*var(--k));height:calc(9px*var(--k));background:var(--gold);clip-path:path("M3.500 0C2.500 2.500 0 4 0 6a3.500 3.500 0 0 0 7 0C7 4 4.500 2.500 3.500 0Z")}

/* ===== Belege ===== */
.dokgitter{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,calc(290px*var(--k))),1fr));gap:clamp(calc(18px*var(--k)),calc(2vw*var(--k)),calc(26px*var(--k))) var(--foto-spalt)}
.dokkarte{display:grid;gap:calc(10px*var(--k));align-content:start;text-align:left;width:100%}
.dokkarte__bild{position:relative;display:block;height:clamp(calc(320px*var(--k)),calc(30vw*var(--k)),calc(420px*var(--k)));overflow:hidden;background:#fff;border-radius:calc(4px*var(--k));box-shadow:0 calc(18px*var(--k)) calc(40px*var(--k)) calc(-22px*var(--k)) rgba(60,40,10,.6),0 0 0 1px rgba(48,37,26,.14);transition:transform .5s var(--spring),box-shadow .4s}
.dokkarte:hover .dokkarte__bild{transform:translateY(calc(-6px*var(--k))) rotate(-.6deg);box-shadow:0 calc(30px*var(--k)) calc(60px*var(--k)) calc(-22px*var(--k)) rgba(60,40,10,.7),0 0 0 1px rgba(168,130,47,.5)}
.dokkarte__bild img{width:100%;height:100%;object-fit:cover;object-position:top}
.dokkarte__bild--breit img{object-position:center;object-fit:contain}
.dokkarte b{font:700 clamp(calc(19px*var(--k)),calc(1.45vw*var(--k)),calc(22px*var(--k)))/1.25 var(--serif);color:var(--espresso);display:block}
.dokkarte span{font-size:var(--t);line-height:1.4;color:var(--muted);display:block}
.zeitband{display:grid;gap:0;position:relative;padding-left:calc(26px*var(--k))}
.zeitband::before{content:"";position:absolute;left:calc(6px*var(--k));top:0;bottom:0;width:1px;background:linear-gradient(180deg,transparent,var(--line) 6%,var(--line) 94%,transparent)}
.zeitband li{position:relative;padding:0 0 calc(18px*var(--k));font-size:var(--t);line-height:1.5}
.zeitband li::before{content:"";position:absolute;left:calc(-25px*var(--k));top:calc(8px*var(--k));width:calc(11px*var(--k));height:calc(11px*var(--k));border-radius:50%;background:var(--btn-grad);box-shadow:inset 0 0 0 1px rgba(160,120,40,.7),0 0 0 calc(3px*var(--k)) var(--cream)}
.zeitband b{display:block;font:700 var(--t) var(--serif);color:var(--gold-text)}

/* Fließtext */
.prosa{display:grid;gap:calc(14px*var(--k));font-size:var(--t);line-height:1.7}
.prosa h2{margin-top:calc(18px*var(--k));font-size:clamp(calc(24px*var(--k)),calc(2.6vw*var(--k)),calc(34px*var(--k)))}
.prosa h3{margin-top:calc(10px*var(--k))}
.prosa ul{display:grid;gap:calc(6px*var(--k));padding-left:calc(20px*var(--k));list-style:disc}
.kontaktform{padding:clamp(calc(20px*var(--k)),calc(3vw*var(--k)),calc(40px*var(--k)));display:grid;gap:calc(14px*var(--k))}

/* ===== Skala groß und Testband ===== */
.skala--gross{gap:calc(14px*var(--k))}
.skala--gross li{font-size:var(--t);font-weight:500;gap:calc(5px*var(--k))}
.skala--gross b{font-weight:700}
.skala--gross i{height:calc(14px*var(--k))}
.skala--gross .is-gold i{height:calc(14px*var(--k))}
.testband{position:relative;height:calc(150px*var(--k));margin:calc(70px*var(--k)) calc(8px*var(--k)) calc(70px*var(--k))}
.testband::before{content:"";position:absolute;left:0;right:0;top:50%;height:calc(3px*var(--k));border-radius:calc(3px*var(--k));background:linear-gradient(90deg,#3a2614,#c9a24e 30%,#e6cb85)}
.testband li{position:absolute;left:var(--p);top:50%;width:calc(190px*var(--k));font-size:var(--t);line-height:1.35;padding-top:calc(18px*var(--k));transform:translateX(calc(-10px*var(--k)))}
.testband li::before{content:"";position:absolute;left:calc(3px*var(--k));top:calc(-6px*var(--k));width:calc(15px*var(--k));height:calc(15px*var(--k));border-radius:50%;background:var(--btn-grad);box-shadow:inset 0 0 0 1px rgba(160,120,40,.7),0 0 0 calc(4px*var(--k)) rgba(201,162,78,.2)}
.testband li b{display:block;font-family:var(--serif);font-size:var(--t);color:var(--gold-text)}
.testband li:last-child{transform:translateX(calc(-190px*var(--k)));text-align:right}
.testband li:last-child::before{left:auto;right:calc(3px*var(--k))}
.testband--hoch{top:auto!important;bottom:50%;padding-top:0!important;padding-bottom:calc(18px*var(--k))}
.testband--hoch::before{top:auto!important;bottom:calc(-6px*var(--k))}
@media (max-width:1100px){
  .testband{height:auto;margin:calc(10px*var(--k)) 0 calc(10px*var(--k)) calc(8px*var(--k));display:grid;gap:calc(14px*var(--k));padding-left:calc(22px*var(--k))}
  .testband::before{left:calc(6px*var(--k));right:auto;top:0;bottom:0;width:calc(3px*var(--k));height:auto}
  .testband li,.testband--hoch,.testband li:last-child{position:relative;left:auto;top:auto;bottom:auto;width:auto;padding:0;transform:none;text-align:left}
  .testband li::before,.testband--hoch::before,.testband li:last-child::before{left:calc(-25px*var(--k));right:auto;top:calc(3px*var(--k));bottom:auto}
}
.ziel__schritte--hell li{color:var(--brown)}
.ziel__schritte--hell li::before{background:linear-gradient(90deg,var(--line),transparent)}
.ziel__schritte--hell b{color:var(--espresso)}
.ziel__schritte--hell span{color:var(--gold-text)}
.textlink[type=button]{padding:0;font-size:inherit}
.reiter button.is-an{background:var(--btn-grad);color:#3f2d0c}

/* ===== Größenfinder ===== */
.finder{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);overflow:hidden}
.finder__wahl{display:grid;gap:clamp(calc(14px*var(--k)),calc(1.4vw*var(--k)),calc(20px*var(--k)));justify-items:start;align-content:center;padding:clamp(calc(24px*var(--k)),calc(3vw*var(--k)),calc(44px*var(--k)))}
.finder__wahl .regel{width:100%}
.finder__reiter{position:relative;margin:0;isolation:isolate}
.finder__reiter button{position:relative;z-index:1;transition:color .3s}
.finder__reiter button[aria-selected=true]{background:none;box-shadow:none}
.finder__pille{position:absolute;left:0;top:calc(5px*var(--k));bottom:calc(5px*var(--k));width:var(--b,calc(80px*var(--k)));transform:translateX(var(--x,calc(5px*var(--k))));border-radius:calc(999px*var(--k));background:var(--btn-grad);box-shadow:inset 0 0 0 1px rgba(160,120,40,.5),0 calc(8px*var(--k)) calc(18px*var(--k)) calc(-10px*var(--k)) rgba(120,85,20,.7);transition:transform .55s var(--spring),width .55s var(--spring)}
.finder__zonen{display:flex;gap:calc(3px*var(--k));width:100%;margin-top:calc(-8px*var(--k))}
.finder__zonen button{min-width:0;padding:calc(7px*var(--k)) 2px;border-radius:calc(7px*var(--k));font-size:calc(15px*var(--k));font-weight:700;color:var(--muted);background:rgba(48,37,26,.06);transition:background .35s,color .35s,box-shadow .35s}
.finder__zonen button:hover{background:rgba(201,162,78,.22)}
.finder__zonen button.is-an{color:#3f2d0c;background:linear-gradient(165deg,#ffd25a,#f8a800);box-shadow:0 calc(6px*var(--k)) calc(16px*var(--k)) calc(-7px*var(--k)) rgba(216,124,0,.9)}
.finder__ergebnis{display:grid;gap:2px}
.finder__ergebnis span{font-size:var(--t);font-weight:600;color:var(--muted)}
.finder__ergebnis b{display:inline-block;font:700 clamp(calc(38px*var(--k)),calc(3.6vw*var(--k)),calc(56px*var(--k)))/1.05 var(--serif);will-change:transform}
.finder__hinweis{margin-top:calc(-8px*var(--k));font-size:var(--t);font-weight:600;color:var(--gold-text)}
.finder__hinweis[hidden]{display:block;visibility:hidden}
.finder__werte{display:grid;grid-template-columns:repeat(3,auto);gap:clamp(calc(14px*var(--k)),calc(1.8vw*var(--k)),calc(30px*var(--k)));margin:0}
.finder__werte div{display:grid;gap:2px}
.finder__werte dt{font-size:clamp(calc(14.5px*var(--k)),calc(1vw*var(--k)),calc(16.5px*var(--k)));font-weight:600;color:var(--muted);white-space:nowrap}
.finder__werte dd{margin:0;font:700 clamp(calc(21px*var(--k)),calc(1.75vw*var(--k)),calc(29px*var(--k)))/1.1 var(--sans);color:var(--espresso);font-variant-numeric:tabular-nums;white-space:nowrap}
.finder__buehne{position:relative;min-height:clamp(calc(480px*var(--k)),calc(44vw*var(--k)),calc(660px*var(--k)));overflow:hidden;background:var(--buehne)}
.finder__buehne svg{position:absolute;inset:0;width:100%;height:100%}
.finder__buehne text{font-family:var(--sans)}
.f-mass__wert{font:700 calc(24px*var(--k)) var(--sans)!important;fill:#ffd25a}
.f-mass__name{font-size:calc(15px*var(--k));font-weight:600;fill:#e9dcc4}
.f-schein{animation:fAtmen 3.8s ease-in-out infinite}
@keyframes fAtmen{50%{opacity:.5}}
.f-welle{opacity:0;transform-box:fill-box;transform-origin:center}
.f-perle{fill:#fff3c4;opacity:0;animation:fPerle var(--t) ease-in var(--w) infinite}
@keyframes fPerle{0%{opacity:0;transform:none}14%{opacity:.85}82%{opacity:.75}100%{opacity:0;transform:translateY(var(--lauf,calc(-120px*var(--k))))}}
.f-strahl{opacity:.9}
.finder__foto{position:absolute;right:2%;top:50%;width:45%;height:80%;margin:0;transform:translateY(-50%)}
/* Lichtkreis hinter dem echten Filter, zwei Ringe drehen sich langsam gegeneinander */
.finder__foto::before{content:"";position:absolute;left:50%;top:48%;width:104%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,214,120,.62),rgba(248,168,0,.2) 44%,transparent 68%);animation:fAtmen 4.2s ease-in-out infinite}
.finder__ring{position:absolute;left:50%;top:48%;width:92%;aspect-ratio:1;margin-left:-46%;translate:0 -50%;border-radius:50%;border:1.5px dashed rgba(255,226,150,.55);animation:fRing 34s linear infinite}
.finder__ring--2{width:74%;margin-left:-37%;border:1px solid rgba(255,226,150,.34);border-left-color:transparent;border-right-color:transparent;animation-duration:22s;animation-direction:reverse}
@keyframes fRing{to{rotate:360deg}}
.finder__schwebe{position:absolute;inset:0;animation:fSchwebe 6.5s ease-in-out infinite}
@keyframes fSchwebe{50%{transform:translateY(calc(-10px*var(--k))) rotate(-1deg)}}
.finder__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transform:scale(.8) rotate(-7deg);filter:drop-shadow(calc(-18px*var(--k)) calc(30px*var(--k)) calc(26px*var(--k)) rgba(25,14,4,.62));transition:opacity .45s,transform .9s var(--spring)}
.finder__foto img.is-an{opacity:1;transform:none}
.finder__foto figcaption{position:absolute;left:50%;bottom:-4%;transform:translateX(-50%);padding:calc(5px*var(--k)) calc(14px*var(--k));border-radius:calc(999px*var(--k));white-space:nowrap;font-size:clamp(calc(15px*var(--k)),calc(1.05vw*var(--k)),calc(17px*var(--k)));font-weight:600;color:#fff3c4;background:rgba(45,29,14,.62);box-shadow:inset 0 0 0 1px rgba(255,226,150,.4)}
@media (max-width:760px){.finder{grid-template-columns:minmax(0,1fr)}.finder__buehne{min-height:calc(420px*var(--k))}.finder__werte{grid-template-columns:repeat(auto-fit,minmax(calc(110px*var(--k)),1fr))}}

/* ===== Vergleich der drei Größen ===== */
.vergleich{overflow:hidden;padding:clamp(calc(10px*var(--k)),calc(1.2vw*var(--k)),calc(16px*var(--k)))}
.vergleich table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}
.vergleich th,.vergleich td{padding:clamp(calc(11px*var(--k)),calc(1vw*var(--k)),calc(15px*var(--k))) clamp(calc(10px*var(--k)),calc(1.2vw*var(--k)),calc(18px*var(--k)));text-align:left;vertical-align:middle;font-size:var(--t);line-height:1.3;transition:background .3s}
.vergleich thead td{width:25%}
.vergleich thead th{padding-block:clamp(calc(10px*var(--k)),calc(1vw*var(--k)),calc(14px*var(--k))) clamp(calc(14px*var(--k)),calc(1.2vw*var(--k)),calc(18px*var(--k)));vertical-align:top;font-weight:400;border-radius:calc(14px*var(--k)) calc(14px*var(--k)) 0 0}
.vergleich__bilder{display:grid;grid-template-columns:1fr 1fr;gap:calc(6px*var(--k));margin-bottom:calc(12px*var(--k))}
.vergleich__bilder img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:calc(10px*var(--k));transition:transform .7s var(--spring)}
.vergleich__name{display:block;font:700 clamp(calc(24px*var(--k)),calc(1.9vw*var(--k)),calc(30px*var(--k)))/1.1 var(--serif);color:var(--espresso)}
.vergleich__preis{display:block;margin-top:calc(3px*var(--k));font:700 clamp(calc(20px*var(--k)),calc(1.55vw*var(--k)),calc(25px*var(--k)))/1.15 var(--serif);color:var(--gold-text)}
.vergleich thead small{font-size:clamp(calc(15px*var(--k)),calc(1.05vw*var(--k)),calc(17px*var(--k)));color:var(--muted)}
.vergleich tbody th{font-weight:600;color:var(--muted);font-size:clamp(calc(16.5px*var(--k)),calc(1.15vw*var(--k)),calc(19px*var(--k)))}
.vergleich tbody td{font-weight:600;color:var(--espresso);font-size:clamp(calc(17px*var(--k)),calc(1.2vw*var(--k)),calc(20px*var(--k)))}
.vergleich tbody tr>*{border-top:1px solid var(--line-soft)}
.js .vergleich tbody tr{opacity:0;transform:translateY(calc(10px*var(--k)));transition:opacity .5s calc(var(--i)*45ms + 120ms),transform .65s var(--ease) calc(var(--i)*45ms + 120ms)}
.js .vergleich.is-in tbody tr{opacity:1;transform:none}
.vergleich tbody tr:hover>*{background:rgba(201,162,78,.1)}
.wert-balken{display:block;height:calc(4px*var(--k));margin-top:calc(7px*var(--k));width:var(--w);border-radius:calc(3px*var(--k));background:linear-gradient(90deg,#f8a800,#ffd25a);transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease) calc(var(--i,0)*45ms + 350ms)}
.vergleich.is-in .wert-balken{transform:none}
/* Spalte unter dem Zeiger und Wahl aus dem Finder */
[data-spalte="1"] tr>:nth-child(2),[data-spalte="2"] tr>:nth-child(3),[data-spalte="3"] tr>:nth-child(4){background:rgba(248,168,0,.09)}
[data-wahl="1"] thead th:nth-child(2),[data-wahl="2"] thead th:nth-child(3),[data-wahl="3"] thead th:nth-child(4){background:linear-gradient(180deg,rgba(248,168,0,.2),rgba(248,168,0,.05));box-shadow:inset 0 2px 0 #f8a800}
[data-wahl="1"] thead th:nth-child(2) img,[data-wahl="2"] thead th:nth-child(3) img,[data-wahl="3"] thead th:nth-child(4) img{transform:translateY(-2px)}
@media (max-width:860px){.vergleich{overflow-x:auto}.vergleich table{min-width:calc(680px*var(--k))}}

/* ===== ISO ===== */
.iso{position:relative;display:grid;gap:clamp(calc(12px*var(--k)),calc(1.3vw*var(--k)),calc(18px*var(--k)));justify-items:center;text-align:center;overflow:hidden;padding:clamp(calc(28px*var(--k)),calc(3.4vw*var(--k)),calc(52px*var(--k)));border-radius:var(--r);color:#e9dcc4;background:var(--buehne);box-shadow:0 calc(34px*var(--k)) calc(70px*var(--k)) calc(-30px*var(--k)) rgba(60,40,10,.8),0 0 0 1px rgba(233,200,120,.3)}
.iso__wert{position:relative;font:700 clamp(calc(84px*var(--k)),calc(10vw*var(--k)),calc(150px*var(--k)))/1 var(--serif);background:linear-gradient(100deg,#d08a10,#ffd25a 30%,#fff3c4 50%,#ffd25a 70%,#d08a10);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:isoGlanz 6s linear infinite}
@keyframes isoGlanz{to{background-position:-220% 0}}
.iso__klassen{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(calc(10px*var(--k)),calc(1.2vw*var(--k)),calc(18px*var(--k)));width:100%;margin:0}
.iso__klassen div{display:grid;gap:calc(3px*var(--k));padding:calc(12px*var(--k)) calc(14px*var(--k));border-radius:calc(12px*var(--k));background:rgba(241,218,156,.08);box-shadow:inset 0 0 0 1px rgba(241,218,156,.2)}
.iso__klassen dt{font:700 clamp(calc(19px*var(--k)),calc(1.5vw*var(--k)),calc(23px*var(--k)))/1.15 var(--serif);color:#ffd25a}
.iso__klassen dd{margin:0;font-size:clamp(calc(16px*var(--k)),calc(1.1vw*var(--k)),calc(18px*var(--k)));line-height:1.3}
.iso__satz{position:relative;font-size:var(--t);line-height:1.4;font-weight:500;color:#f3e8d4}
.iso__staub i{position:absolute;bottom:calc(-10px*var(--k));width:var(--g,calc(5px*var(--k)));height:var(--g,calc(5px*var(--k)));border-radius:50%;background:#ffc84a;opacity:0;animation:isoStaub var(--t,7s) linear var(--w,0s) infinite}
.iso__staub i:nth-child(1){left:8%;--g:calc(4px*var(--k));--t:7s}
.iso__staub i:nth-child(2){left:20%;--g:calc(6px*var(--k));--t:9s;--w:1.4s}
.iso__staub i:nth-child(3){left:33%;--g:calc(3px*var(--k));--t:6s;--w:3s}
.iso__staub i:nth-child(4){left:46%;--g:calc(5px*var(--k));--t:8s;--w:.6s}
.iso__staub i:nth-child(5){left:60%;--g:calc(3px*var(--k));--t:7.5s;--w:2.2s}
.iso__staub i:nth-child(6){left:72%;--g:calc(6px*var(--k));--t:9.5s;--w:4s}
.iso__staub i:nth-child(7){left:84%;--g:calc(4px*var(--k));--t:6.5s;--w:1s}
.iso__staub i:nth-child(8){left:93%;--g:calc(3px*var(--k));--t:8.5s;--w:3.5s}
@keyframes isoStaub{0%{opacity:0;transform:none}12%{opacity:.7}85%{opacity:.5}100%{opacity:0;transform:translateY(calc(-420px*var(--k)))}}

/* ===== Datenkarten ===== */
.datenkarten{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(calc(12px*var(--k)),calc(1.4vw*var(--k)),calc(20px*var(--k)))}
.datenkarte{position:relative;display:flex;flex-direction:column;gap:calc(6px*var(--k));overflow:hidden;padding:clamp(calc(18px*var(--k)),calc(1.7vw*var(--k)),calc(26px*var(--k)));transition:transform .55s var(--spring),box-shadow .45s}
.datenkarte::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(3px*var(--k));background:linear-gradient(90deg,#f8a800,#ffd25a);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.datenkarte:hover{transform:translateY(calc(-6px*var(--k)));box-shadow:0 calc(30px*var(--k)) calc(60px*var(--k)) calc(-28px*var(--k)) rgba(60,40,10,.65),0 0 0 1px rgba(201,162,78,.6)}
.datenkarte:hover::before{transform:scaleX(1)}
.datenkarte span{font-size:clamp(calc(15.5px*var(--k)),calc(1.08vw*var(--k)),calc(18px*var(--k)));font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-text)}
.datenkarte b{font:700 clamp(calc(27px*var(--k)),calc(2.35vw*var(--k)),calc(38px*var(--k)))/1.1 var(--sans);color:var(--espresso)}
.datenkarte p{margin-top:calc(4px*var(--k));font-size:clamp(calc(17px*var(--k)),calc(1.18vw*var(--k)),calc(19.5px*var(--k)));line-height:1.42}
@media (max-width:1100px){.datenkarten{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){.finder__foto::before,.finder__ring,.finder__schwebe,.f-schein,.f-perle,.iso__wert,.iso__staub i{animation:none}.js .vergleich tbody tr{opacity:1;transform:none}.wert-balken{transform:none}}

/* ===== Über uns ===== */
.ueber__lkw{max-width:min(calc(460px*var(--k)),calc(46*var(--fh,1vh)*var(--k)));justify-self:center;width:100%}
.ueber__lkw .foto{aspect-ratio:518/843;width:100%;box-shadow:var(--shadow)}
.mission{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,calc(220px*var(--k))),1fr));gap:clamp(calc(12px*var(--k)),calc(1.5vw*var(--k)),calc(20px*var(--k)))}
.mission li{display:grid;gap:calc(12px*var(--k));padding:clamp(calc(20px*var(--k)),calc(2.2vw*var(--k)),calc(28px*var(--k)));font:700 clamp(calc(18px*var(--k)),calc(1.6vw*var(--k)),calc(22px*var(--k)))/1.25 var(--serif);color:var(--espresso)}
.mission svg{width:calc(40px*var(--k));height:calc(40px*var(--k));color:var(--gold-text)}
.mission__satz{margin-top:clamp(calc(22px*var(--k)),calc(3vw*var(--k)),calc(40px*var(--k)));text-align:center;font:700 clamp(calc(22px*var(--k)),calc(3vw*var(--k)),calc(40px*var(--k)))/1.2 var(--serif)}
.win{position:relative;aspect-ratio:1;width:min(calc(440px*var(--k)),100%);justify-self:center}
.win__k{position:absolute;width:58%;aspect-ratio:1;border-radius:50%;display:flex;justify-content:center;padding:14% 8%;mix-blend-mode:multiply;box-shadow:inset 0 0 0 1px rgba(48,37,26,.3);animation:winAtmen 5s ease-in-out infinite}
.win__k b{font:700 clamp(calc(18.5px*var(--k)),calc(1.5vw*var(--k)),calc(22px*var(--k))) var(--serif);color:var(--espresso)}
.win__k--1{left:21%;top:2%;background:rgba(230,203,133,.6)}
.win__k--2{left:2%;top:38%;background:rgba(111,208,168,.5);align-items:flex-end;padding:0 18% 18% 8%;animation-delay:-1.6s}
.win__k--3{right:2%;top:38%;background:rgba(201,162,78,.45);align-items:flex-end;padding:0 8% 18% 18%;animation-delay:-3.2s}
@keyframes winAtmen{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
.win__mitte{position:absolute;left:50%;top:53%;transform:translate(-50%,-50%);padding:calc(9px*var(--k)) calc(16px*var(--k));border-radius:calc(999px*var(--k));white-space:nowrap;font:700 clamp(calc(18.5px*var(--k)),calc(1.4vw*var(--k)),calc(22px*var(--k))) var(--serif);color:var(--gold-light);background:linear-gradient(165deg,#4a3a26,#3a2817);box-shadow:0 0 0 1px rgba(233,200,120,.5),0 0 calc(30px*var(--k)) calc(6px*var(--k)) rgba(226,180,70,.55)}
.menschen{display:grid;grid-template-columns:1fr 1fr;gap:var(--foto-spalt);width:100%}
.menschen .foto{aspect-ratio:.9;width:100%}
.trabold-wort{padding:calc(18px*var(--k)) calc(20px*var(--k));display:grid;gap:calc(8px*var(--k));width:100%}
.trabold-wort ul{display:grid;gap:calc(3px*var(--k));font-size:var(--t)}
.trabold-wort b{font:700 calc(19px*var(--k)) var(--serif);color:var(--gold-text);display:inline-block;min-width:1em}

/* ===== Kontakt ===== */
.feld--versteckt{position:absolute;left:calc(-9999px*var(--k));width:1px;height:1px;overflow:hidden}
.feld__fehler{display:none;font-style:normal;font-size:var(--t);font-weight:600;color:#a23b1c}
.hat-fehler .feld__fehler{display:block}
.hat-fehler input:not([type=checkbox]),.hat-fehler textarea{box-shadow:inset 0 0 0 2px #a23b1c}
.feld--haken{display:grid;grid-template-columns:calc(22px*var(--k)) 1fr;gap:calc(10px*var(--k));font-size:var(--t);line-height:1.45;cursor:pointer}
.feld--haken input{width:calc(20px*var(--k));height:calc(20px*var(--k));margin:2px 0 0;accent-color:var(--gold-deep)}
.feld--haken .feld__fehler{grid-column:2}
.kontakt__meldung{padding:calc(12px*var(--k)) calc(16px*var(--k));border-radius:calc(12px*var(--k));font-weight:600;font-size:var(--t);background:rgba(212,105,42,.12);box-shadow:inset 0 0 0 1px rgba(212,105,42,.4)}
.kontakt__meldung.is-gut{background:rgba(47,143,107,.12);box-shadow:inset 0 0 0 1px rgba(47,143,107,.4);color:var(--mint-deep)}

/* ===== Datenblatt-Bilder und Archivliste ===== */
.archivliste{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,calc(270px*var(--k))),1fr));gap:2px calc(26px*var(--k))}
.archivliste a{display:flex;gap:calc(12px*var(--k));align-items:baseline;padding:calc(10px*var(--k)) 2px;text-decoration:none;font-size:var(--t);position:relative;transition:transform .3s var(--ease),color .2s}
.archivliste a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
.archivliste a:hover{transform:translateX(calc(4px*var(--k)));color:var(--gold-text)}
.archivliste b{font:700 var(--t) var(--serif);color:var(--gold-text);min-width:calc(44px*var(--k))}

/* ===== Eigener Videoplayer ===== */
.spieler{display:grid;gap:calc(6px*var(--k));padding-top:calc(8px*var(--k))}
.spieler__zeile{display:flex;align-items:center;gap:calc(8px*var(--k));flex-wrap:wrap}
.spieler .regler{flex:1;min-width:calc(80px*var(--k))}
.spieler__laut .spieler__knopf{display:grid;place-items:center}
.spieler__sprachen{display:flex;flex-wrap:wrap;gap:calc(6px*var(--k))}
.spieler__original{display:inline-flex;align-items:center;gap:calc(7px*var(--k));padding:calc(4px*var(--k)) 2px;font-size:var(--t);font-weight:600;color:var(--muted)}
.spieler__original svg{width:calc(24px*var(--k));height:calc(16px*var(--k));border-radius:calc(3px*var(--k));box-shadow:0 0 0 1px rgba(48,37,26,.2);flex:none}
.spieler-rahmen:fullscreen .spieler__original,.spieler-rahmen.ist-gross .spieler__original{color:var(--gold-light)}
.sprache{display:inline-flex;align-items:center;gap:calc(7px*var(--k));min-height:calc(40px*var(--k));padding:calc(4px*var(--k)) calc(13px*var(--k)) calc(4px*var(--k)) calc(8px*var(--k));border-radius:calc(999px*var(--k));font-size:var(--t);font-weight:600;color:var(--espresso);background:rgba(48,37,26,.05);box-shadow:inset 0 0 0 1px var(--line-soft);transition:background .25s,box-shadow .25s,color .25s}
.sprache svg{width:calc(24px*var(--k));height:calc(16px*var(--k));border-radius:calc(3px*var(--k));box-shadow:0 0 0 1px rgba(48,37,26,.2);flex:none}
.sprache:hover{background:rgba(201,162,78,.16)}
.sprache[aria-pressed=true]{background:linear-gradient(165deg,#4a3a26,#3a2817);color:var(--gold-light);box-shadow:inset 0 0 0 1px rgba(233,200,120,.45)}
.spieler__knopf{min-width:calc(40px*var(--k));height:calc(40px*var(--k));border-radius:50%;font-size:var(--t);font-weight:700;color:var(--espresso);background:rgba(201,162,78,.16);box-shadow:inset 0 0 0 1px rgba(168,130,47,.35);transition:background .2s,opacity .2s}
.spieler__knopf--text{border-radius:calc(999px*var(--k));padding:0 calc(13px*var(--k))}
.spieler__knopf svg{display:block;width:calc(22px*var(--k));height:calc(22px*var(--k));margin:auto}
.spieler__laut{display:inline-flex;align-items:center;gap:calc(8px*var(--k));flex:none}
.spieler__laut[hidden]{display:none}
.spieler .spieler__laut .regler{flex:none;width:clamp(calc(72px*var(--k)),calc(8vw*var(--k)),calc(120px*var(--k)));min-width:0}
.spieler__knopf:hover{background:rgba(201,162,78,.3)}
.spieler__knopf[aria-pressed=false]{opacity:.5}
.spieler__zeit{font-size:var(--t);font-variant-numeric:tabular-nums;color:var(--muted);min-width:calc(36px*var(--k));text-align:center}
.spieler__ut{position:absolute;left:6%;right:6%;bottom:7%;margin-inline:auto;width:fit-content;max-width:88%;padding:calc(6px*var(--k)) calc(14px*var(--k));border-radius:calc(10px*var(--k));text-align:center;font-size:clamp(calc(18.5px*var(--k)),calc(1.5vw*var(--k)),calc(22px*var(--k)));line-height:1.35;font-weight:500;color:#fff;background:rgba(20,13,7,.72);pointer-events:none;z-index:3;opacity:0;transform:translateY(calc(8px*var(--k)));transition:opacity .25s}
.spieler__ut.is-an{opacity:1;transform:none;transition:opacity .25s,transform .35s var(--ease)}
.spieler-rahmen:fullscreen,.spieler-rahmen.ist-gross{display:flex;flex-direction:column;background:#000;padding:0 calc(16px*var(--k)) calc(10px*var(--k))}
.spieler-rahmen:fullscreen .video__huelle,.spieler-rahmen.ist-gross .video__huelle{flex:1;aspect-ratio:auto;border-radius:0;min-height:0}
.spieler-rahmen:fullscreen .spieler__ut,.spieler-rahmen.ist-gross .spieler__ut{font-size:clamp(calc(20px*var(--k)),calc(2.6vw*var(--k)),calc(38px*var(--k)));bottom:6%}
.spieler-rahmen:fullscreen .sprache,.spieler-rahmen:fullscreen .spieler__knopf,.spieler-rahmen.ist-gross .sprache,.spieler-rahmen.ist-gross .spieler__knopf{color:var(--gold-light)}
.spieler-rahmen:fullscreen .spieler__zeit,.spieler-rahmen.ist-gross .spieler__zeit{color:#d9cbb1}
.spieler-rahmen.ist-gross{position:fixed;inset:0;z-index:9000;width:auto;height:auto;margin:0}
html.im-kino .nav,html.im-kino .strasse,html.im-kino .oelblob,html.im-kino .logo-ober{visibility:hidden}
html.im-kino .archiv-video{transform:none;transition:none;z-index:9000}

/* ===== Schrift Rubik (frei, Dateien in assets/fonts/frei) ===== */
@font-face{font-family:'Rubik';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/frei/rubik-400-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Rubik';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/frei/rubik-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Rubik';font-style:normal;font-weight:700;font-display:swap;src:url(../assets/fonts/frei/rubik-700-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Rubik';font-style:normal;font-weight:700;font-display:swap;src:url(../assets/fonts/frei/rubik-700-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ===== „Im Detail“: Tiefe zum Aufklappen ===== */
.tiefer{font-size:var(--t);line-height:1.55;width:100%}
.tiefer summary{display:inline-flex;align-items:center;gap:calc(8px*var(--k));cursor:pointer;list-style:none;font-weight:700;font-size:var(--t);color:var(--gold-text);padding:calc(4px*var(--k)) 0;user-select:none}
.tiefer summary::-webkit-details-marker{display:none}
.tiefer summary::before{content:"";flex:none;width:calc(18px*var(--k));height:calc(18px*var(--k));border-radius:50%;background:
  linear-gradient(currentColor,currentColor) center/calc(9px*var(--k)) 1.6px no-repeat,
  linear-gradient(currentColor,currentColor) center/1.6px calc(9px*var(--k)) no-repeat;box-shadow:inset 0 0 0 1px currentColor;transition:transform .35s var(--ease),background-size .3s}
.tiefer[open] summary::before{transform:rotate(180deg);background-size:calc(9px*var(--k)) 1.6px,1.6px 0}
.tiefer summary:hover{color:var(--gold-deep)}
.tiefer__inhalt{margin-top:calc(6px*var(--k));padding:calc(10px*var(--k)) calc(14px*var(--k));border-radius:calc(12px*var(--k));background:rgba(201,162,78,.1);box-shadow:inset 0 0 0 1px rgba(168,130,47,.22);animation:sanftRein .45s var(--ease) both}
.dark .tiefer summary,.glass--dark .tiefer summary{color:var(--gold-2)}
.dark .tiefer__inhalt,.glass--dark .tiefer__inhalt{background:rgba(241,218,156,.08);box-shadow:inset 0 0 0 1px rgba(241,218,156,.22);color:#e9dcc4}
.tiefer--gross{margin-top:clamp(calc(14px*var(--k)),calc(2vw*var(--k)),calc(22px*var(--k)))}
.tiefer--gross summary{font-family:var(--serif);font-size:clamp(calc(17px*var(--k)),calc(1.5vw*var(--k)),calc(20px*var(--k)));color:var(--espresso)}
.tiefer--gross .tiefer__inhalt{padding:clamp(calc(12px*var(--k)),calc(1.6vw*var(--k)),calc(20px*var(--k)));background:none;box-shadow:none}
.reise__schritte .tiefer__inhalt{max-height:calc(30*var(--fh,1vh)*var(--k));overflow:auto}

/* ===== Feinschliff Handy ===== */
@media (max-width:640px){
  .rechner__kacheln{grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(6px*var(--k))}
  .rechner__kacheln div{padding:calc(8px*var(--k)) calc(10px*var(--k))}
  .rechner__kacheln div:nth-child(2){grid-column:1/-1;order:3}
  .rechner__kacheln span{font-size:var(--t)}
  .rechner__kacheln b{font-size:calc(17px*var(--k))}
  .reise__schritte{min-height:calc(180px*var(--k))}
  .reise__schritte p{font-size:var(--t);line-height:1.45}
}

/* Enge Fenster: Feste Zweierraster aus dem HTML (style="…1fr 1fr") untereinander stellen */
@media (min-width:861px) and (max-width:1100px){
  .kopf__grid .fakten{grid-template-columns:minmax(0,1fr)!important}
}
@media (max-width:560px){
  .fakten,.nutzen,.raster-3{grid-template-columns:minmax(0,1fr)!important}
}
@media (max-width:380px){
  [style*="minmax(260px"]{grid-template-columns:minmax(0,1fr)!important}
}

/* Fotos auf dem Handy: Jedes dritte Bild über die volle Breite, die anderen paarweise */
@media (max-width:760px){
  .galerie .foto:not([style*="aspect-ratio"]):nth-child(3n+1),.galerie .foto:not([style*="aspect-ratio"]):last-child:nth-child(3n+2){grid-column:1/-1;aspect-ratio:16/10}
}

/* Schmale Tabellenspalten: lange Wörter dürfen umbrechen */
@media (max-width:1100px){
  .tabelle th,.tabelle td{padding-inline:calc(6px*var(--k));-webkit-hyphens:auto;hyphens:auto}
  .tabelle th{letter-spacing:.02em;font-size:var(--t)}
  .glass>.tabelle td:nth-child(2){overflow-wrap:anywhere}
  .glass>.tabelle td:first-child{min-width:calc(112px*var(--k))}
}
/* Rechentabelle im Aufklapper: enger gesetzt, notfalls seitlich wischen statt abschneiden */
@media (max-width:640px){
  .tiefer__inhalt{overflow-x:auto;padding-inline:calc(10px*var(--k))}
  .tiefer .tabelle{font-size:var(--t)}
  .tiefer .tabelle th,.tiefer .tabelle td{padding-inline:2px}
  .tiefer .tabelle th{text-transform:none;letter-spacing:0;font-size:var(--t)}
}
/* Patenttabelle auf dem Handy: Schrift und Datum in einer Zeile, der Inhalt darunter */
@media (max-width:560px){
  .glass>.tabelle,.glass>.tabelle tbody{display:block}
  .glass>.tabelle thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .glass>.tabelle tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px calc(10px*var(--k));padding:calc(10px*var(--k)) calc(6px*var(--k));border-bottom:1px solid var(--line-soft)}
  .glass>.tabelle td{display:block;padding:0;border:0}
  .glass>.tabelle td:nth-child(2){grid-area:2/1/3/3}
  .glass>.tabelle tr:last-child{border-bottom:0}
}
/* „Hochleistungsfilter“ ist das längste Wort im Seitentitel von Über uns: passend kleiner, das Foto behält seine Spalte */
.kopf__grid:has(.ueber__lkw) h1{font-size:clamp(calc(23px*var(--k)),calc(3.8vw*var(--k)),calc(52px*var(--k)))}
@media (max-width:860px){
  .kopf__grid:has(.ueber__lkw) h1{font-size:clamp(calc(23px*var(--k)),calc(7.4vw*var(--k)),calc(50px*var(--k)))}
}

/* Handy: Überschriften mit langen Wörtern, knappe Knöpfe */
@media (max-width:640px){
  h1,h2,h3,.kachel b,.fakt b{-webkit-hyphens:auto;hyphens:auto}
  .kopf h1{font-size:clamp(calc(28px*var(--k)),calc(8.6vw*var(--k)),calc(44px*var(--k)))}
  .held__titel{font-size:clamp(calc(28px*var(--k)),calc(9.4vw*var(--k)),calc(52px*var(--k)))}
  .btn{white-space:normal;text-align:center;line-height:1.25;padding-block:calc(10px*var(--k))}
  .kacheln{grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(8px*var(--k))}
  .kacheln li:last-child:nth-child(odd){grid-column:1/-1}
  .kachel{grid-template-columns:minmax(0,1fr);padding:calc(14px*var(--k))}
  .kachel b{font-size:var(--t)}
}

/* Sehr schmale Handys: lange Wörter in Überschriften und Spaltenlisten passen noch */
@media (max-width:380px){
  h2{font-size:clamp(calc(24px*var(--k)),calc(7.8vw*var(--k)),calc(30px*var(--k)))}
  .index a,.fuss nav{font-size:var(--t)}
}

/* Handy und Tablet: Tippflächen mindestens 40 Pixel hoch */
@media (max-width:820px),(pointer:coarse){
  .quelle,.textlink,.tiefer summary,.schritte button,.vorlagen button,.reiter button,.reiter--klein button,.held__beweis button{min-height:calc(40px*var(--k))}
  .quelle{padding-block:calc(4px*var(--k))}
  .held__beweis{gap:0 calc(18px*var(--k))}
  .held__beweis button{display:inline-flex;align-items:center}
  .schritte button,.vorlagen button,.reiter button{display:inline-flex;align-items:center}
  input[type=range].regler{height:calc(40px*var(--k))}
  .brot a,.fuss__mail,main p a:not([class]),.zeitband li>a,.quellen a{padding-block:calc(11px*var(--k))}
  .brot a{display:inline-block;margin-block:calc(-11px*var(--k))}
  .fuss nav{gap:0}
  .fuss nav a,.index a{display:flex;align-items:center;min-height:calc(40px*var(--k))}
  .fuss h2{margin-bottom:2px}
  .index div{gap:0}
  .beleg__werkzeug button{width:calc(42px*var(--k));height:calc(42px*var(--k))}
  /* Die Punkte im Bild bleiben klein, nur die Trefferfläche wächst */
  .hs::before{content:"";position:absolute;inset:calc(-6px*var(--k));border-radius:50%}
}

/* Chronik in flachen Fenstern (Handy quer, kleine Laptop-Fenster): Foto und Text nebeneinander, alles im Bild */
@media (max-height:520px),(max-width:860px) and (max-height:640px) and (orientation:landscape){
  .tunnel__kopf,.tunnel__jahre,.st__neben{display:none}
  .st,.st--breit{--bw:min(calc(46vw*var(--k)),calc((100svh - calc(92px*var(--k)))*1.36));--tw:min(calc(46vw*var(--k)),calc(400px*var(--k)));--spalt:calc(8px*var(--k));grid-template-columns:var(--bw) var(--tw);top:calc(50% + calc(34px*var(--k)))}
  .st--dok{--bw:calc((100svh - calc(92px*var(--k)))*.66)}
  .st--logo{--bw:min(calc(46vw*var(--k)),calc((100svh - calc(92px*var(--k)))*1.2))}
  .st--dok .st__haupt .dok{max-height:none;overflow:visible}
  .st__txt{gap:calc(4px*var(--k));padding:calc(10px*var(--k)) calc(14px*var(--k))}
  .st__jahr{font-size:calc(30px*var(--k))}
  .st__txt h3{font-size:calc(19px*var(--k))}
  .st__txt p{font-size:var(--t);line-height:1.4}
  .st__knopf .quelle{min-height:calc(32px*var(--k))}
}
@media (max-height:340px){
  .st__txt{gap:2px;padding:calc(8px*var(--k)) calc(12px*var(--k))}
  .st__jahr{font-size:calc(24px*var(--k))}
  .st__txt h3{font-size:var(--t)}
  .st__txt p{font-size:var(--t);line-height:1.35}
}
/* Kleine Handys hochkant: Foto etwas flacher, damit der Text noch ins Bild passt */
@media (max-width:860px) and (max-height:620px) and (orientation:portrait){
  .st,.st--dok,.st--breit,.st--logo{top:calc(50% + calc(16px*var(--k)))}
  .st__haupt .foto,.st--dok .st__haupt .dok,.st--breit .st__haupt .dok,.st--logo .st__haupt .dok{max-height:calc(30*var(--fh,1svh)*var(--k));overflow:hidden}
  .st__txt{gap:calc(4px*var(--k));padding:calc(10px*var(--k)) calc(14px*var(--k))}
  .st__jahr{font-size:calc(30px*var(--k))}
  .st__txt p{font-size:var(--t);line-height:1.4}
}
/* Chronik als Liste bei ruhiger Darstellung: Dokumente nicht höher als das Fenster */
.tunnel--liste .st--dok{grid-template-columns:minmax(0,min(calc(56*var(--fh,1vh)*var(--k)),46%)) minmax(0,1fr)}
@media (max-width:860px){
  .tunnel--liste .st--dok{grid-template-columns:minmax(0,1fr)}
}

/* ===== Schriftgrößen: Ausnahmen, damit Bedienelemente und Beschriftungen passen ===== */
.nav{--nav-schrift:calc(17px*var(--k))}
.nav__links>a,.drop__btn{font-size:var(--nav-schrift)}
.btn{font-size:calc(18px*var(--k))}
.btn--sm{font-size:calc(17px*var(--k))}
.kicker{font-size:clamp(calc(18.5px*var(--k)),calc(1.4vw*var(--k)),calc(21px*var(--k)));letter-spacing:.09em}
.nugget .kicker,.thema .kicker{font-size:clamp(calc(17.5px*var(--k)),calc(1.25vw*var(--k)),calc(19.5px*var(--k)))}
.einbau__liste span,.beleg__liste span,.duell__ablauf span,.hs,.mark em{font-size:calc(15px*var(--k))}
.spieler__zeit,.diagramm__tip{font-size:calc(15px*var(--k))}
.tabelle th{font-size:calc(16px*var(--k))}
.d-achse{font-size:calc(14px*var(--k))}.d-text,.d-wert{font-size:calc(15px*var(--k))}
.waage text{font-size:calc(14px*var(--k))}
.beleg__tipp{font-size:calc(15px*var(--k))}
.fuss__klein{font-size:calc(16px*var(--k))}
.fuss nav{font-size:calc(18px*var(--k))}
.fuss h2{font-size:calc(16px*var(--k))}
.regel{font-size:clamp(calc(18px*var(--k)),calc(1.25vw*var(--k)),calc(19.5px*var(--k)))}
.rechner__kacheln span{font-size:calc(17px*var(--k))}
.feld--haken{font-size:calc(18px*var(--k))}

/* ===== Kleine Texte in Karten: kräftiger ===== */
.nugget__satz,.referenz p,.fakt p,.thema p,.klein,.weiter span,.kachel span,.welt__runden,.nugget__fuss,.bericht__fakten li,.bericht__name,.drop__panel span,.modus__zeile,.modus__unter,.faq__antwort p,.st__txt p,.duell__ablauf,.duell__satz,.rechner__satz,.video p,.zeitband li,.dokkarte span,.einbau__liste,.foto__txt{-webkit-text-stroke:.22px currentColor}
.skala li,.balken-mini div,.regel__kopf,.legende,.dokkarte b,.kachel b,.fakt b{font-weight:700}

/* ===== Auf dem Handy: Tabelle und Kacheln ohne getrennte Wörter ===== */
@media (max-width:520px){
  .tiefer .tabelle{font-size:calc(16px*var(--k))}
  .tiefer .tabelle th{font-size:calc(14px*var(--k));-webkit-hyphens:none;hyphens:none}
  .kacheln{grid-template-columns:minmax(0,1fr)!important}
}

/* ===== Ihr Gewinn: größer und kräftiger ===== */
#nutzen .kicker{font-size:clamp(calc(20px*var(--k)),calc(1.6vw*var(--k)),calc(24px*var(--k)))}
.nutzen{grid-template-columns:repeat(auto-fit,minmax(min(100%,calc(460px*var(--k))),1fr))}
.nutzen li{grid-template-columns:calc(30px*var(--k)) 1fr;gap:calc(14px*var(--k));padding:calc(14px*var(--k)) 2px;font-size:clamp(calc(21px*var(--k)),calc(1.7vw*var(--k)),calc(26px*var(--k)));line-height:1.32;-webkit-text-stroke:.25px currentColor}
.nutzen svg{width:calc(28px*var(--k));height:calc(28px*var(--k))}
.nutzen small{font-size:clamp(calc(18.5px*var(--k)),calc(1.35vw*var(--k)),calc(21px*var(--k)));margin-top:calc(3px*var(--k))}
.nutzen__satz{font-size:clamp(calc(26px*var(--k)),calc(2.6vw*var(--k)),calc(36px*var(--k)))}
.nutzen__karten .referenz{font-size:clamp(calc(19.5px*var(--k)),calc(1.55vw*var(--k)),calc(23px*var(--k)))}
.nutzen__karten .referenz h3{font-size:clamp(calc(24px*var(--k)),calc(2.1vw*var(--k)),calc(30px*var(--k)))}

/* ===== Film über „Ihr Gewinn“ ===== */
.film__buehne{display:grid;gap:clamp(calc(14px*var(--k)),calc(1.8vw*var(--k)),calc(24px*var(--k)));padding:clamp(calc(10px*var(--k)),calc(1.4vw*var(--k)),calc(20px*var(--k)));border-radius:var(--r);background:var(--buehne);box-shadow:0 calc(40px*var(--k)) calc(80px*var(--k)) calc(-36px*var(--k)) rgba(60,40,10,.75),0 0 0 1px rgba(233,200,120,.35)}
.film .spieler-rahmen{min-width:0}
.film .video__huelle{border-radius:clamp(calc(10px*var(--k)),calc(1.2vw*var(--k)),calc(16px*var(--k)));box-shadow:0 0 0 1px rgba(233,200,120,.4)}
.film .video__start img{filter:sepia(.18) brightness(.78)}
.film .video__start:hover img{filter:sepia(.05) brightness(.95)}
.film .video__start .spielen{left:50%;top:50%;width:clamp(calc(84px*var(--k)),calc(9vw*var(--k)),calc(128px*var(--k)));height:clamp(calc(84px*var(--k)),calc(9vw*var(--k)),calc(128px*var(--k)));margin:0;transform:translate(-50%,-50%)}
.film .video__start:hover .spielen,.film .video__start:focus-visible .spielen{transform:translate(-50%,-50%) scale(1.1)}
.film .video__start .spielen svg{width:42%;height:42%;margin-left:4%}
.film .video__start .spielen::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 2px var(--gold-light);opacity:0;animation:filmPuls 2.6s var(--ease) infinite}
@keyframes filmPuls{0%{transform:scale(1);opacity:.75}80%,100%{transform:scale(1.55);opacity:0}}
.film .spieler{padding-inline:clamp(calc(4px*var(--k)),calc(.6vw*var(--k)),calc(8px*var(--k)))}
.film .spieler__knopf{color:var(--gold-light)}
.film .spieler__zeit{color:#d9cbb1;font-size:calc(17px*var(--k))}
.film .spieler__knopf{background:rgba(241,218,156,.14);box-shadow:inset 0 0 0 1px rgba(241,218,156,.4)}
.film input[type=range].regler::-webkit-slider-runnable-track{background:linear-gradient(90deg,var(--gold-light) var(--p,0%),rgba(241,218,156,.24) var(--p,0%))}
.film input[type=range].regler::-moz-range-track{background:rgba(241,218,156,.24)}
.film input[type=range].regler::-moz-range-progress{background:var(--gold-light)}
.film__kapitel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(calc(10px*var(--k)),calc(1.1vw*var(--k)),calc(16px*var(--k)));font-size:var(--t);line-height:1.38;color:#e9dcc4;-webkit-text-stroke:.22px currentColor}
.film__kapitel li{padding:clamp(calc(16px*var(--k)),calc(1.6vw*var(--k)),calc(24px*var(--k))) clamp(calc(12px*var(--k)),calc(1.3vw*var(--k)),calc(20px*var(--k))) clamp(calc(18px*var(--k)),calc(1.7vw*var(--k)),calc(26px*var(--k)));border-radius:var(--r-s);text-align:center;text-wrap:balance;background:linear-gradient(170deg,rgba(241,218,156,.11),rgba(241,218,156,.03));box-shadow:inset 0 0 0 1px rgba(241,218,156,.2)}
.film__kapitel b{display:block;white-space:nowrap;font:700 clamp(calc(18px*var(--k)),calc(1.6vw*var(--k)),calc(24px*var(--k)))/1.2 var(--serif);color:var(--gold-light);-webkit-text-stroke:0}
.film__kapitel b::after{content:"";display:block;width:calc(34px*var(--k));height:2px;margin:calc(10px*var(--k)) auto calc(11px*var(--k));border-radius:2px;background:linear-gradient(90deg,transparent,var(--gold-2),transparent)}
.film .quellen{margin-top:clamp(calc(12px*var(--k)),calc(1.3vw*var(--k)),calc(18px*var(--k)));text-align:center}
@media (max-width:980px){.film__kapitel{grid-template-columns:repeat(2,minmax(0,1fr))}.film__kapitel b{font-size:calc(22px*var(--k))}}
@media (max-width:520px){.film__kapitel{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.film .video__start .spielen::after{animation:none}}
.archivliste b{flex:none;white-space:nowrap}

/* ===== Feinschliff: Kanten, Abstände, Ausrichtung ===== */
/* Karten mit losem Text: Zeilen bleiben oben zusammen, statt sich über die Kartenhöhe zu verteilen */
.fakt,.weiter a,.ziel__schritte li,.mission li{align-content:start}
.ziel__schritte b{margin-bottom:2px}
.ziel__karte h2{max-width:26ch}
/* Neun Kacheln stehen sauber in drei Spalten statt mit einem Rest */
@media (min-width:861px){
  .kacheln,.fakten:has(>:nth-child(9):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* Der Hero-Text beginnt an derselben Kante wie alle Abschnitte, der Filter bleibt, wo er ist */
.held__text{padding-left:max(0px,(min(100vw,calc(1320px*var(--k))) - calc(1240px*var(--k)))/2)}
/* Abstände zwischen den Abschnitten der Startseite einheitlich */
#goldnuggets,#rechner,#ziel{padding-bottom:clamp(calc(56px*var(--k)),calc(7vw*var(--k)),calc(100px*var(--k)))}
#rechner,#ziel{padding-top:clamp(calc(56px*var(--k)),calc(7vw*var(--k)),calc(100px*var(--k)))}
/* Seitenkopf: Oberzeile und Titel wie in den Abschnitten */
.kopf h1{margin-top:calc(14px*var(--k))}
/* Quellenzeile über Karten bekommt Luft */
.quellen+.nutzen__karten{margin-top:clamp(calc(20px*var(--k)),calc(2.4vw*var(--k)),calc(32px*var(--k)))}
/* Film: Kapitel bündig mit dem Video, gleiche Innenabstände rundum */
.film__buehne{padding:clamp(calc(12px*var(--k)),calc(1.4vw*var(--k)),calc(20px*var(--k)));gap:clamp(calc(16px*var(--k)),calc(1.6vw*var(--k)),calc(22px*var(--k)))}
.film .spieler{padding-inline:0}
/* Hinweis auf dem Vorschaubild sitzt mit gleichem Abstand zu beiden Kanten */
.video__start small{padding:calc(30px*var(--k)) calc(16px*var(--k)) calc(13px*var(--k));font-size:calc(16px*var(--k));line-height:1.3}
/* Praxistest: Beschriftungen am Anfang der Strecke überlappen nicht */
.testband{margin-block:calc(90px*var(--k)) calc(130px*var(--k))}
@media (min-width:861px){
  .testband li:first-child{width:calc(13.6% + calc(38px*var(--k)))}
  .testband li:nth-child(3){width:calc(344px*var(--k));padding-left:calc(44px*var(--k))}
}

/* Designer: Startseite, Kopfbereich */
.nav__in.holz-traeger{translate:0 calc(8px*var(--k))}
.nav__in .logo{translate:1px calc(-9px*var(--k))}
.held__buehne{translate:calc(96px*var(--k)) 0}
.held__claim{margin:0;font-size:clamp(calc(20px*var(--k)),calc(5vw*var(--k)),calc(30px*var(--k)));font-weight:700;letter-spacing:.09em;color:var(--gold-text);text-align:center}
/* Der Leitsatz wächst und schrumpft mit der Fensterbreite (Maße der Designer-Lage bei 1920 px), damit er nie rechts aus dem Bild läuft */
@media (min-width:1061px){
  .held__claim{white-space:nowrap;font-family:'Rubik',sans-serif;font-size:calc(40px*var(--k));width:calc(1266px*var(--k));height:calc(141px*var(--k));max-width:none;min-width:0;max-height:none;min-height:0;translate:calc(-67.8px*var(--k)) calc(12.2px*var(--k));margin-bottom:calc(62px*var(--k));text-align:center}
}
/* Das Filterbild darf unten aus dem Titelbereich ragen, nur seitlich wird beschnitten */
.held{overflow-x:clip;overflow-y:visible}
/* Sicherheit: Kann ein Browser keine Schrift mit Farbverlauf füllen, bleibt der Text trotzdem sichtbar (sonst wäre er durchsichtig) */
@supports not ((background-clip:text) or (-webkit-background-clip:text)){
  .gold{color:var(--gold-text);-webkit-text-fill-color:currentColor}
}
/* Der Titel ist eine einzige Box mit drei Zeilen (Zeilenumbrüche), nicht drei einzelne Kästen */
.held__titel>.gold{display:block;line-height:1.8;translate:0 calc(108px*var(--k));animation:zeileEin 1.1s var(--ease) .2s both}
.held__beweis button{translate:0 calc(352.2px*var(--k))}
.held__beweis button:nth-child(2){translate:calc(20px*var(--k)) calc(352.2px*var(--k))}
.held__beweis button:nth-child(3){translate:calc(46.7px*var(--k)) calc(352.2px*var(--k))}
/* Beschriftungen an der Röntgenlinse und die Punkte ihrer Führungslinien, im Lab verschoben */
.held__schild[data-schild="Zellulose-Wickel"],
.held__schild[data-schild="Mittelhülse"],
.held__schild[data-schild="Kühlrippen"],
.held__punkt[data-punkt="Zellulose-Wickel"],
.held__punkt[data-punkt="Mittelhülse"],
.held__punkt[data-punkt="Schmutz und Wasser"],
.held__punkt[data-punkt="Kühlrippen"]{translate:calc(-7.3px*var(--k)) calc(-63.4px*var(--k))}
.held__schild[data-schild="Schmutz und Wasser"]{translate:calc(12.2px*var(--k)) calc(-109.8px*var(--k))}
.held__titel{translate:calc(-28.9px*var(--k)) calc(54.4px*var(--k));width:calc(655px*var(--k));height:calc(317px*var(--k));max-width:none;min-width:0;max-height:none;min-height:0}
.held__titel .gold{font-size:.786em}
.held__text .btn--gold{position:relative;z-index:25;translate:calc(92.2px*var(--k)) calc(280px*var(--k));transition-duration:.55s}
.held__text .btn--gold{border-radius:calc(999px*var(--k));color:#2a1605;background:linear-gradient(165deg,#f6d98c,#d9a441);border:0;padding:calc(13px*var(--k)) calc(25px*var(--k));width:calc(313px*var(--k));height:calc(72px*var(--k));max-width:none;min-width:0;max-height:none;min-height:0;justify-content:center;text-align:center;font-size:calc(26px*var(--k));text-shadow:0 0 1px #2a1605}
/* Archiv-Reise: weniger Leerraum oben */
#archiv{padding-top:0}
#archiv>.tunnel__pin{margin-top:calc(-112px*var(--k))}

/* Logo mittig über der Menüleiste (nur Desktop) */
@media (min-width:1061px){
  /* Abstand zwischen Logo und Leiste: 10 % der Logohöhe zusätzlich */
  .nav{--logo-h:calc(72px*var(--k));--logo-luft:calc(var(--logo-platz,var(--logo-h))*.1);padding-top:calc(var(--logo-platz,var(--logo-h)) + var(--logo-luft) + calc(32px*var(--k)))}
  /* Logo und Schriftzug sind eine Einheit und stehen immer genau mittig, egal wie groß sie sind */
  .nav .logo{position:absolute;left:0;right:0;bottom:100%;margin:0 auto calc(calc(4px*var(--k)) + var(--logo-luft));width:fit-content;translate:none}
  .nav .logo__bild{height:var(--logo-h)}
}

/* Designer: Seite Funktionsweise, Kopfleiste */
.seite-funktionsweise .nav__in .logo{z-index:1}

/* Header-Zone: Logo und Menüleiste. Unten steht die Trennlinie; im Lab verschiebt der Griff „Länge" der Zone sie und gibt der Leiste mehr Platz */
.kopfzone{display:none}
@media (min-width:1061px){
  .kopfzone{display:block;position:relative;box-sizing:content-box;height:var(--nav-unten,calc(180px*var(--k)));min-height:calc(347.8px*var(--k));padding-bottom:calc(22.2px*var(--k));pointer-events:none}
  .kopfzone::after{content:"";position:absolute;left:6%;right:6%;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(201,162,78,.45),transparent)}
}

/* Die Quellenzeile der Reise steht fest unter „Zur Funktionsweise“, in der angehefteten Spalte, und fährt nicht mehr ein */
.reise__links>.quellen{margin-top:calc(9px*var(--k))}
/* Länge der Reise: Das Bild bleibt stehen, während man durch die fünf Schritte scrollt. Die Höhe muss deutlich größer als der Bildschirm sein (Grundwert 190vh in 03-start.css). */
#reise{height:calc(260*var(--fh,1vh)*var(--k))}

/* Der Weg der Ölspur (Punkte mit Griffen), im Lab gezeichnet: a = Abschnitt (a = -1 das Logo), x und y vom Anker aus */
.start #inhalt{--weg:'[{"a":-1,"x":-5.8,"y":9.3,"i":[0,0],"o":[-130.5,-66]},{"a":-1,"x":-456.8,"y":235.6,"i":[34,-217.5],"o":[-19.9,127.4]},{"a":0,"x":-614.5,"y":487.6,"i":[-53.2,-140.4],"o":[53.5,141.3]},{"a":1,"x":-669.3,"y":213.6,"i":[-21.3,-147.3],"o":[22.2,153.6]},{"a":1,"x":-711.8,"y":663,"i":[-5,-144.2],"o":[5,144.2]},{"a":1,"x":-629.6,"y":1055.3,"i":[-5,-144.2],"o":[5,144.2]},{"a":1,"x":-633.2,"y":1448.5,"i":[-104,-87.1],"o":[104,87.1]},{"a":1,"x":0,"y":1454.8,"i":[-218,-30],"o":[218,30]},{"a":2,"x":654,"y":90,"i":[-114,-90.8],"o":[114,90.8]},{"a":2,"x":684,"y":544.7,"i":[5,-151.6],"o":[-5,151.6]},{"a":2,"x":624,"y":999.3,"i":[5,-151.6],"o":[-5,151.6]},{"a":2,"x":654,"y":1454,"i":[104,-85.3],"o":[-104,85.3]},{"a":2,"x":0,"y":1511,"i":[218,-19],"o":[-218,19]},{"a":2,"x":-654,"y":1568,"i":[114,-100.3],"o":[-114,100.3]},{"a":3,"x":-684,"y":534.8,"i":[-5,-181.6],"o":[5,181.6]},{"a":3,"x":-624,"y":1079.6,"i":[0,-181.6],"o":[0,181.6]},{"a":3,"x":-684,"y":1624.4,"i":[0,-181.6],"o":[0,181.6]},{"a":3,"x":-624,"y":2169.2,"i":[-5,-181.6],"o":[5,181.6]},{"a":4,"x":-640.1,"y":21.5,"i":[-104,-118.6],"o":[104,118.6]},{"a":3,"x":27.8,"y":2507.3,"i":[-218,-55.7],"o":[218,55.7]},{"a":3,"x":490.1,"y":2596,"i":[-228.3,-31.8],"o":[274.4,38.2]},{"a":4,"x":684,"y":459,"i":[5,-126.3],"o":[-5,126.3]},{"a":4,"x":633.7,"y":731.1,"i":[5,-126.3],"o":[-5,126.3]},{"a":4,"x":677.6,"y":1269.1,"i":[172.6,-141.9],"o":[-190.5,156.7]},{"a":4,"x":0,"y":1312,"i":[254.1,-47],"o":[-216.6,40]},{"a":5,"x":-654,"y":70,"i":[114,-102.3],"o":[-114,102.3]},{"a":5,"x":-684,"y":589,"i":[-5,-173],"o":[5,173]},{"a":5,"x":-624,"y":1108,"i":[0,-173],"o":[0,173]},{"a":5,"x":-684,"y":1627,"i":[0,-173],"o":[0,173]},{"a":5,"x":-624,"y":2146,"i":[0,-173],"o":[0,173]},{"a":5,"x":-684,"y":2665,"i":[5,-173],"o":[-5,173]},{"a":6,"x":-654,"y":281,"i":[-114,-95.3],"o":[114,95.3]},{"a":6,"x":0,"y":334,"i":[-218,-17.7],"o":[218,17.7]},{"a":6,"x":654,"y":387,"i":[-114,-106.3],"o":[114,106.3]},{"a":6,"x":684,"y":575,"i":[5,-195],"o":[-5,195]},{"a":6,"x":624,"y":1160,"i":[0,-195],"o":[0,195]},{"a":6,"x":684,"y":1745,"i":[0,-195],"o":[0,195]},{"a":6,"x":624,"y":2330,"i":[0,-195],"o":[0,195]},{"a":6,"x":684,"y":2915,"i":[0,-195],"o":[0,195]},{"a":6,"x":624,"y":3500,"i":[0,-195],"o":[0,195]},{"a":6,"x":684,"y":4085,"i":[0,-195],"o":[0,195]},{"a":6,"x":624,"y":4670,"i":[5,-195],"o":[-5,195]},{"a":6,"x":13.9,"y":4711.6,"i":[218,-46.7],"o":[-218,46.7]},{"a":7,"x":-654,"y":90,"i":[114,-107.3],"o":[-114,107.3]},{"a":7,"x":-684,"y":593.7,"i":[-5,-167.9],"o":[5,167.9]},{"a":7,"x":-624,"y":1097.3,"i":[-5,-167.9],"o":[5,167.9]},{"a":7,"x":-654,"y":1601,"i":[-104,-98.9],"o":[104,98.9]},{"a":8,"x":0,"y":0,"i":[-218,-30],"o":[218,30]},{"a":8,"x":654,"y":90,"i":[-114,-99],"o":[114,99]},{"a":8,"x":684,"y":594,"i":[5,-168],"o":[-5,168]},{"a":8,"x":624,"y":1098,"i":[5,-168],"o":[-5,168]},{"a":8,"x":654,"y":1602,"i":[104,-99],"o":[-104,99]},{"a":9,"x":0,"y":0,"i":[218,-30],"o":[-218,30]},{"a":9,"x":-634.5,"y":4,"i":[114,-86.3],"o":[-114,86.3]},{"a":9,"x":-684,"y":518,"i":[0,-142.7],"o":[0,142.7]},{"a":9,"x":-654,"y":946,"i":[-59.5,-82.5],"o":[59.5,82.5]},{"a":9,"x":-327,"y":1013,"i":[-109,-22.3],"o":[109,22.3]},{"a":10,"x":0,"y":103.7,"i":[-3.1,-152.9],"o":[0,0]}]';
}

/* Praxistest (Beweis): Einleitung größer, Ergebnisblock mit festem Platz */
#beweis .sek-kopf .lead{font-size:calc(26px*var(--k))}
#beweis{padding-bottom:calc(50px*var(--k));min-height:calc(1344.4px*var(--k))}
.duell>.duell__ergebnis{height:calc(788.9px*var(--k));max-height:none;min-height:0;translate:0 calc(25.6px*var(--k))}
.duell__ergebnis .duell__fazit{height:calc(161.1px*var(--k));max-width:none;max-height:none;min-height:0;translate:0 calc(-15.6px*var(--k))}
.duell__ergebnis>.btn{translate:0 calc(-51.1px*var(--k))}
.duell__ergebnis>.klein{translate:0 calc(-34.4px*var(--k))}

/* Designer: Abschnitte weiter unten */
#goldnuggets{padding-bottom:calc(140px*var(--k))}
#film{padding-top:calc(26.7px*var(--k));padding-bottom:0}
#nutzen{padding-bottom:calc(131.6px*var(--k));min-height:calc(1577.8px*var(--k))}
/* Überschrift über den Vorteilen, mit kurzer Goldlinie darunter */
.nutzen__titel{position:relative;margin:clamp(calc(20px*var(--k)),calc(2.4vw*var(--k)),calc(36px*var(--k))) 0 clamp(calc(14px*var(--k)),calc(1.6vw*var(--k)),calc(22px*var(--k)));padding-bottom:calc(16px*var(--k));font:700 clamp(calc(22px*var(--k)),calc(2.1vw*var(--k)),calc(30px*var(--k)))/1.25 var(--serif);letter-spacing:.02em;color:var(--espresso)}
/* Motorbild links, Überschrift und Punkte rechts */
.nutzen__buehne{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(calc(24px*var(--k)),calc(4vw*var(--k)),calc(72px*var(--k)));align-items:center;margin-bottom:clamp(calc(20px*var(--k)),calc(2.4vw*var(--k)),calc(36px*var(--k)))}
.nutzen__bild{position:relative;display:grid;place-items:center;padding:clamp(calc(8px*var(--k)),calc(2vw*var(--k)),calc(28px*var(--k)));translate:calc(-50px*var(--k)) calc(10px*var(--k))}
.nutzen__glanz{position:absolute;inset:6% 4%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,236,190,.85),rgba(240,210,140,.28) 55%,transparent 75%);filter:blur(calc(6px*var(--k)));pointer-events:none}
.nutzen__motor{position:relative;display:block;width:calc(492px*var(--k));height:calc(478px*var(--k));max-width:none;min-width:0;max-height:none;min-height:0;translate:0 calc(-56px*var(--k));object-fit:contain;filter:drop-shadow(0 calc(26px*var(--k)) calc(30px*var(--k)) rgba(48,37,26,.38)) drop-shadow(0 calc(4px*var(--k)) calc(6px*var(--k)) rgba(48,37,26,.25))}
.nutzen__text .nutzen__titel{margin-top:0}
@media (max-width:860px){
  .nutzen__buehne{grid-template-columns:minmax(0,1fr)}
  .nutzen__bild{translate:none}
  .nutzen__motor{width:100%;max-width:calc(380px*var(--k));height:auto;translate:none;margin-inline:auto}
}
.nutzen__titel::after{content:"";position:absolute;left:0;bottom:0;width:calc(90px*var(--k));height:2px;border-radius:2px;background:linear-gradient(90deg,var(--gold),transparent)}
#film .sek-kopf h2 .gold{display:inline-block;width:calc(1042px*var(--k));max-width:none;min-width:0;translate:calc(20px*var(--k)) calc(3px*var(--k));font-size:calc(34px*var(--k))}
/* Filtergrafik und Teilchen liegen übereinander und wandern zusammen, sonst schwebt der Schmutz neben dem Filter */
.filtersim__cam>svg,
.filtersim__cam>canvas{translate:calc(-78.9px*var(--k)) calc(-101.1px*var(--k))}
.reise__links{translate:0 calc(-88.9px*var(--k))}

/* Mehr Luft zwischen Videokarte und den Karten darunter und zwischen den Karten selbst */
.archiv-kopf{margin-bottom:clamp(calc(50px*var(--k)),calc(5vw*var(--k)),calc(96px*var(--k)))}
.bento{gap:clamp(calc(18px*var(--k)),calc(2vw*var(--k)),calc(32px*var(--k)));margin-bottom:clamp(calc(44px*var(--k)),calc(5vw*var(--k)),calc(80px*var(--k)))}

/* Menüleiste ohne braunen Kasten: Menü, Sprachen und Knöpfe bleiben */
.nav__in{background:none;box-shadow:none}
.nav__in::after,.nav__in>.holz{display:none}
@media (min-width:1061px){
  .nav__links>a,.drop__btn{color:var(--espresso);text-shadow:0 0 calc(10px*var(--k)) rgba(248,242,231,.9)}
  .nav__links>a:hover,.drop__btn:hover,.drop.is-offen .drop__btn{color:var(--gold-text);background:rgba(201,162,78,.18);text-shadow:0 0 calc(10px*var(--k)) rgba(248,242,231,.9)}
  .nav__links>a[aria-current=page]{color:var(--gold-text);box-shadow:inset 0 -2px 0 var(--gold)}
}

/* Logo größer und genau mittig, Menü mittig: links die Sprachen, in der Mitte das Menü, rechts Admin und Lab */
@media (min-width:1061px){
  .nav{--logo-h:calc(108px*var(--k))}
  /* Platz unter Logo und Leiste (Leiste endet bei etwa 180 px), damit nichts mehr hineinragt */
  /* Die Bühne mit Filter und Röntgenlinse wächst und schrumpft mit der Fensterhöhe, damit der ganze Filter samt Auslauf unten ins Bild passt */
  .held__buehne{height:clamp(calc(380px*var(--k)),calc(calc(88*var(--fh,1vh)*var(--k)) - calc(419px*var(--k))),calc(860px*var(--k)))}
  .held{padding-top:0;padding-bottom:calc(807.6px*var(--k));min-height:calc(1297.8px*var(--k))}
  .held__grid{margin-top:calc(-378px*var(--k));margin-bottom:calc(-249px*var(--k))}
  .held__text{height:calc(413.3px*var(--k));max-height:none;min-height:0;translate:calc(11.1px*var(--k)) calc(94.4px*var(--k))}
  .kopf{padding-top:calc(var(--nav-unten,calc(180px*var(--k))) + calc(60px*var(--k)))}
  .nav__in{display:grid;grid-template-columns:1fr auto 1fr;justify-items:center}
  .nav .nav__links{grid-column:2;grid-row:1;margin:0}
  .nav .sprachen{grid-column:1;grid-row:1;justify-self:start}
  .nav__in>[data-dz-ui]{grid-column:3;grid-row:1;justify-self:end}
  .nav .logo{z-index:3}
  .nav__links>a[data-nav=start]{text-align:left;justify-content:flex-start}
  .drop>.drop__btn{text-align:right;justify-content:flex-end}
}

/* Beim Herunterscrollen: Das Logo blendet aus, die Leiste bekommt einen Glashintergrund und bleibt stehen */
/* Logo und Menüleiste stehen nur ganz oben und scrollen mit der Seite weg */
.nav{position:absolute;transition:none}

/* Designer: Startseite, kleine Verschiebungen */
.start .sprachen__btn{translate:calc(1027.8px*var(--k)) calc(28.9px*var(--k))}
/* Das Menü wird als ganze Box verschoben; die Punkte darin sitzen ohne eigene Verschiebung in der Box */
.start .nav__links{translate:calc(-4.4px*var(--k)) calc(27.8px*var(--k))}
.held__glanz{translate:calc(277.8px*var(--k)) calc(230px*var(--k));scale:2.127}
.archiv-kopf__foto>.archiv-video{translate:0 2px}
/* Die Verschiebung gilt der ganzen Hülle, damit die Röntgenlinse über dem Bild mitwandert */
/* Die Leinwand der Linse reicht unter den Filter, so schaut die Linse auch an seinem Boden in voller Größe hinein */
.held__filter .roentgen{height:124%}
.held__filter{translate:calc(-18px*var(--k)) calc(118px*var(--k));height:113.5%}
/* Desktop: Der Filter steht oben in seinem Bereich und ist nur so hoch, wie bis zum unteren Bildschirmrand Platz ist,
   damit man ihn auf dem ersten Bildschirm ganz sieht. Auf schmaleren Bildschirmen rückt er zurück und wird kleiner, damit er nie rechts aus der Seite ragt. */
@media (min-width:1061px){
  .held__filter{top:0;transform:translate(calc(-46% + var(--px,0px)),var(--py,0px)) rotate(1deg);translate:clamp(calc(-40px*var(--k)),calc(calc(25vw*var(--k)) - calc(400px*var(--k))),calc(80px*var(--k))) 0;height:min(113.5%,calc(calc(59.8vw*var(--k)) - calc(98px*var(--k))),var(--filter-platz,113.5%))}
}

/* Designer: Startseite, Leiste und Logo */
.start .nav__in.holz-traeger{translate:0 calc(14px*var(--k))}
.start .nav{--nav-schrift:calc(24px*var(--k))}
@media (min-width:1061px){
  .start .nav .logo,
  .start .nav .logo__bild{width:calc(558px*var(--k));height:calc(153px*var(--k));max-width:none;min-width:0;max-height:none;min-height:0}
  .start .nav .logo{translate:0 calc(-22px*var(--k))}
}

/* Sprachwahl als Auswahlmenü */
.sprachen{position:relative}
.sprachen__btn{display:inline-flex;align-items:center;gap:calc(10px*var(--k));padding:calc(8px*var(--k)) calc(15px*var(--k));border-radius:calc(999px*var(--k));font-weight:700;font-size:calc(18px*var(--k));letter-spacing:.03em;color:var(--espresso);background:rgba(255,253,247,.75);box-shadow:inset 0 0 0 1px rgba(160,120,40,.45);cursor:pointer;transition:background .25s}
.sprachen__btn:hover,.sprachen.is-offen .sprachen__btn{background:rgba(201,162,78,.28)}
.sprachen__btn>svg:first-child,.sprachen__eintrag svg{width:calc(31px*var(--k));height:calc(20px*var(--k));border-radius:calc(3px*var(--k));flex:none;box-shadow:0 0 0 1px rgba(48,37,26,.25)}
.sprachen__pfeil{transition:transform .3s var(--ease)}
.sprachen.is-offen .sprachen__pfeil{transform:rotate(180deg)}
.sprachen__liste{position:absolute;left:0;top:calc(100% + calc(10px*var(--k)));z-index:5;min-width:calc(240px*var(--k));display:grid;gap:2px;padding:calc(8px*var(--k));border-radius:var(--r-s);background:linear-gradient(160deg,#573e26,#2f2015);box-shadow:0 calc(30px*var(--k)) calc(60px*var(--k)) calc(-24px*var(--k)) rgba(30,15,5,.85),0 0 0 1px rgba(255,205,130,.24);opacity:0;visibility:hidden;transform:translateY(calc(8px*var(--k)));transition:opacity .25s,transform .35s var(--ease),visibility .25s}
.sprachen.is-offen .sprachen__liste{opacity:1;visibility:visible;transform:none}
.sprachen__eintrag{display:flex;align-items:center;gap:calc(12px*var(--k));padding:calc(11px*var(--k)) calc(14px*var(--k));border-radius:calc(12px*var(--k));text-decoration:none;font-size:calc(20px*var(--k));color:#ffcf8a}
.sprachen__eintrag b{font-weight:600}
a.sprachen__eintrag:hover{background:rgba(255,190,90,.14);color:#ffe6bd}
.sprachen__eintrag[aria-current]{color:#ffe0a8}
.sprachen__eintrag[aria-current]::after{content:"✓";margin-left:auto;padding-left:calc(14px*var(--k))}
@media (max-width:1060px){
  .sprachen__liste{left:auto;right:0}
}

/* Designer: Filter im neuen Titelbereich (steht nach den allgemeinen Regeln oben, damit sie gilt).
   Die Verschiebung gilt der ganzen Hülle, damit die Röntgenlinse mitwandert. */
@media (min-width:1061px){
  .held__filter{height:calc(591px*var(--k));translate:calc(24.4px*var(--k)) calc(465.6px*var(--k));scale:1.489}
}

/* Vermittlungshinweis im Fuß: mittig, größer */
.hinweis>p{flex:1;text-align:center;font-size:calc(27.8px*var(--k))}
.hinweis>p>b{font-size:calc(33.3px*var(--k))}

/* Praxistest: Quelle im Beweis-Abschnitt verschoben */
.seite-praxistest #beweis>.wrap>p.quellen{translate:calc(132.2px*var(--k)) calc(108.9px*var(--k));width:calc(886.7px*var(--k));max-width:none;min-width:0}

/* Praxistest: neues Kostendiagramm (Querformat) ganz zeigen, nicht beschneiden */
.blattkarte[data-beleg="kosten"] .blattkarte__blatt img{object-fit:contain;object-position:center}

/* Zurück zur letzten Seite: schwebt unten links, bis man zurückkehrt */
.zurueck{position:fixed;left:clamp(calc(12px*var(--k)),calc(2vw*var(--k)),calc(28px*var(--k)));bottom:clamp(calc(12px*var(--k)),calc(2vw*var(--k)),calc(28px*var(--k)));z-index:29;display:inline-flex;align-items:center;gap:calc(10px*var(--k));max-width:min(calc(560px*var(--k)),calc(100vw - calc(24px*var(--k))));min-height:calc(52px*var(--k));padding:0 calc(24px*var(--k)) 0 calc(18px*var(--k));border-radius:calc(999px*var(--k));background:var(--btn-grad);color:#3f2d0c;font-weight:700;font-size:var(--t);text-decoration:none;box-shadow:0 calc(14px*var(--k)) calc(30px*var(--k)) calc(-12px*var(--k)) rgba(40,24,8,.7),0 0 0 1px rgba(160,120,40,.55),inset 0 1px 0 rgba(255,255,255,.6);opacity:0;transform:translateY(calc(24px*var(--k)));transition:opacity .45s var(--ease),transform .5s var(--spring)}
.zurueck.is-da{opacity:1;transform:none}
.zurueck:hover,.zurueck:focus-visible{transform:translateY(calc(-3px*var(--k)))}
.zurueck svg{flex:none;width:calc(22px*var(--k));height:calc(22px*var(--k));transform:scaleX(-1)}
.zurueck span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zurueck-marke{position:absolute;z-index:28;pointer-events:none;border-radius:calc(10px*var(--k));box-shadow:0 0 0 calc(3px*var(--k)) rgba(212,176,92,.95),0 0 calc(28px*var(--k)) calc(6px*var(--k)) rgba(255,215,104,.55);animation:zurueckPuls 1.3s ease-in-out 4}
.zurueck-marke span{position:absolute;left:0;top:100%;margin-top:calc(8px*var(--k));padding:calc(5px*var(--k)) calc(12px*var(--k));border-radius:calc(999px*var(--k));background:var(--btn-grad);color:#3f2d0c;font-size:.85em;font-weight:700;white-space:nowrap;box-shadow:0 calc(8px*var(--k)) calc(18px*var(--k)) calc(-8px*var(--k)) rgba(40,24,8,.7)}
@keyframes zurueckPuls{50%{box-shadow:0 0 0 calc(6px*var(--k)) rgba(212,176,92,.6),0 0 calc(40px*var(--k)) calc(12px*var(--k)) rgba(255,215,104,.7)}}
@media (prefers-reduced-motion:reduce){.zurueck{transition:opacity .2s}.zurueck-marke{animation:none}}

/* Chronik: Die Ebene der Stationen fängt selbst keine Klicks, sonst liegt sie bei Stationen weiter hinten im Raum vor ihnen */
.tunnel__raum{pointer-events:none}

/* ===== Auftakt beim Laden: alles kommt sanft und nacheinander ===== */
/* Reihenfolge: Leiste, Logo, Öl-Linie, Text (eigene Kaskade in 03-start), Filter vom Kern bis zum Gehäuse */
/* Bewegung und Größe laufen als eigene Animation, die sich auf die eingestellte Lage und Größe draufrechnet (add) und danach loslässt (backwards): So bleibt ein im Lab verschobenes oder vergrößertes Element nach dem Einblenden, wo es ist */
@keyframes aufLeiste{from{opacity:0;filter:blur(calc(4px*var(--k)))}to{opacity:1;filter:none}}
@keyframes aufLeisteWeg{from{translate:0 calc(-18px*var(--k))}to{translate:0 0}}
@keyframes aufLogo{from{opacity:0;filter:blur(calc(8px*var(--k)))}60%{filter:blur(0)}to{opacity:1;filter:none}}
@keyframes aufLogoGross{from{scale:.9}to{scale:1}}
@keyframes aufLinie{from{opacity:0;clip-path:inset(0 0 100% 0)}35%{opacity:1}to{opacity:1;clip-path:inset(0 0 0 0)}}
@keyframes aufSanft{from{opacity:0}to{opacity:1}}

html.js.auftakt .nav__in{animation:aufLeiste 1.2s cubic-bezier(.2,.8,.2,1) .05s both,aufLeisteWeg 1.2s cubic-bezier(.2,.8,.2,1) .05s backwards;animation-composition:replace,add}
html.js.auftakt .nav .logo__bild{transform-origin:50% 60%;animation:aufLogo 2.4s cubic-bezier(.2,.8,.2,1) .35s both,aufLogoGross 2.4s cubic-bezier(.2,.8,.2,1) .35s backwards;animation-composition:replace,add}
/* Die Geburt des Tropfens bleibt, aber ohne Aufblitzen und ohne Pumpen des Logos */
html.js.auftakt .logo--geburt::before{display:none}
html.js.auftakt .logo--geburt .logo__bild{animation:aufLogo 2.4s cubic-bezier(.2,.8,.2,1) .35s both,aufLogoGross 2.4s cubic-bezier(.2,.8,.2,1) .35s backwards;animation-composition:replace,add}
/* Die Öl-Linie zeichnet sich von oben nach unten, der Tropfen blendet weich ein */
html.js.auftakt .strasse{animation:aufLinie 2.2s cubic-bezier(.3,.7,.2,1) .2s both}
html.js.auftakt .oelblob{animation:aufSanft 1.6s ease .6s both}
/* Text erst nach Leiste und Logo */
html.js.auftakt .held__a,html.js.auftakt .zeile>span{animation-delay:calc(var(--i)*150ms + 450ms),calc(var(--i)*150ms + 450ms),0s}
/* Filter: erst der Kern im Ganzen, dann schließt sich das Gehäuse darum (Ablauf in 20-held.js) */
html.js [data-roentgen]:not(.is-schliesst):not(.is-fertig) .held__filter img{opacity:0}
html.js [data-roentgen] .held__filter img{transition:opacity 1.9s cubic-bezier(.4,0,.2,1)}
html.js [data-roentgen]:not(.is-auftakt):not(.is-schliesst):not(.is-fertig) [data-roentgen-cv]{opacity:0}
html.js [data-roentgen] [data-roentgen-cv]{transition:opacity 1s ease}
@media (prefers-reduced-motion:reduce){
  html.js.auftakt .nav__in,html.js.auftakt .nav .logo__bild,html.js.auftakt .strasse,html.js.auftakt .oelblob{animation:none}
}

/* Fertige Stücke aus dem Lab (Reiter „Elemente“): Sie werden in einen Abschnitt gezogen und nutzen die Klassen der Seite */
.baustein{display:block;margin-block:clamp(calc(22px*var(--k)),calc(3vw*var(--k)),calc(40px*var(--k)));position:relative}
.baustein .sek-kopf{margin-bottom:0}
.baustein--zwei{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(calc(24px*var(--k)),calc(4vw*var(--k)),calc(56px*var(--k)));align-items:center}
.baustein--links{grid-template-columns:.9fr 1.1fr}
.baustein--zwei h3{margin-bottom:calc(10px*var(--k))}
.baustein--zwei img,.baustein__bild img{width:100%;height:auto;border-radius:var(--r);box-shadow:var(--shadow)}
.baustein--drei{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(18px*var(--k))}
.baustein__karte{padding:calc(24px*var(--k)) calc(26px*var(--k))}
.baustein__karte h3{margin-bottom:calc(8px*var(--k))}
.baustein__zahl{padding:calc(24px*var(--k)) calc(20px*var(--k));display:grid;gap:calc(6px*var(--k));text-align:center}
.baustein__zahl b{font:700 clamp(calc(34px*var(--k)),calc(3.4vw*var(--k)),calc(48px*var(--k)))/1 var(--serif)}
.baustein__zahl span{color:var(--muted);font-size:var(--t);line-height:1.4}
.glass--dark .baustein__zahl span,.glass--dark.baustein__zahl span{color:#d9c9a8}
.baustein__liste{display:grid;gap:calc(12px*var(--k))}
.baustein__liste li{position:relative;padding-left:calc(34px*var(--k))}
.baustein__liste li::before{content:"";position:absolute;left:0;top:.28em;width:calc(22px*var(--k));height:calc(22px*var(--k));border-radius:50%;background:var(--mint)}
.baustein__liste li::after{content:"";position:absolute;left:calc(7px*var(--k));top:calc(.28em + calc(6px*var(--k)));width:calc(8px*var(--k));height:calc(5px*var(--k));border-left:2px solid #fff;border-bottom:2px solid #fff;rotate:-45deg}
.baustein__zitat{margin:0;padding:calc(22px*var(--k)) calc(28px*var(--k));border-left:calc(3px*var(--k)) solid var(--gold);font:italic 500 clamp(calc(22px*var(--k)),calc(2vw*var(--k)),calc(28px*var(--k)))/1.45 var(--ital);color:var(--espresso)}
.baustein__zitat cite{display:block;margin-top:calc(10px*var(--k));font:600 var(--t)/1.4 var(--sans);font-style:normal;color:var(--muted)}
.baustein__bild{margin:0}
.baustein__bild figcaption{margin-top:calc(10px*var(--k));font-size:var(--t);color:var(--muted)}
@media (max-width:760px){
  .baustein--zwei,.baustein--links,.baustein--drei{grid-template-columns:1fr}
}