/* ===== 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}
/* Kein weiches Scrollen per CSS: Auf den langen Seiten brach der Browser es ab, Sprünge zu Ankern (../#rechner, #patente) landeten falsch oder gar nicht */
html{-webkit-text-size-adjust:100%;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}
}
/* Überschriften brechen gleichmäßig um, kein einzelnes Wort allein in der letzten Zeile; Fließtext ohne Schusterjungen (Chrome ab 114, ältere ignorieren es) */
h1,h2,h3{text-wrap:balance}
.lead,.sek-kopf p{text-wrap:pretty}
/* Oberzeilen brechen gleichmäßig um; bricht eine zweizeilig, steht der Stern oben an der ersten Zeile statt zwischen den Zeilen */
.kicker{align-items:flex-start;text-wrap:balance}
.kicker svg{margin-top:calc((1lh - calc(15px*var(--k)))/2)}
/* Wörter, die zusammenbleiben: Orts- und Firmennamen mit Bindestrich, Fachbegriffe (ab 641 px, auf dem Handy dürfen lange Titel brechen) */
.nw{white-space:nowrap}
@media (min-width:641px){.nw-ab641{white-space:nowrap}}

/* ===== 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:clamp(calc(12px*var(--k)),calc(1.4vw*var(--k)),calc(22px*var(--k)));top:clamp(calc(12px*var(--k)),calc(1.4vw*var(--k)),calc(22px*var(--k)));z-index:4;display:grid;gap:calc(10px*var(--k));padding:calc(8px*var(--k));border-radius:calc(999px*var(--k));background:rgba(47,31,18,.18);-webkit-backdrop-filter:blur(calc(6px*var(--k)));backdrop-filter:blur(calc(6px*var(--k)));box-shadow:inset 0 0 0 1px rgba(241,218,156,.28)}
.beleg__werkzeug button{display:grid;place-items:center;width:clamp(calc(48px*var(--k)),calc(3.6vw*var(--k)),calc(58px*var(--k)));aspect-ratio:1;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,opacity .3s}
.beleg__werkzeug svg{width:46%;height:46%;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.beleg__werkzeug button:hover:not(:disabled),.beleg__werkzeug button: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,.3)}
.beleg__werkzeug button:active:not(:disabled){transform:scale(.95)}
.beleg__werkzeug button:disabled{opacity:.38;cursor:default}
.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}
/* Ganze Archiv-Collagen: vollständig zeigen statt zuschneiden, die weißen Flächen gehören zum Original */
.foto img[src*="-gesamt"]{object-fit:contain;background:#fff}
.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);-webkit-hyphens:auto;hyphens:auto}
.blattkarte small{font-size:clamp(calc(14px*var(--k)),calc(1vw*var(--k)),calc(16px*var(--k)));line-height:1.25;color:var(--muted);-webkit-hyphens:auto;hyphens:auto}

/* ===== 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)}
/* Ein Link bricht nicht mitten im Linktext, sondern rückt als Ganzes in die nächste Zeile. Nur ein Link, der länger als die Zeile ist, bricht in sich */
.quellen a,.klein a,.zeitband li>a{display:inline-block}
/* Ist ein Link länger als eine ganze Zeile, bleibt er ein normaler Link im Satz (99-start.js setzt data-lang), sonst stünde „Quelle:“ allein davor */
.quellen a[data-lang],.klein a[data-lang],.zeitband li>a[data-lang]{display:inline}
/* Knopf „Artikel ansehen“ im Zeitband sieht aus wie die Links daneben */
.zeitband button.textlink{display:inline;font-weight:inherit;color:inherit;text-decoration:underline;text-underline-offset:.14em}
.quellen .textlink{font-size:inherit}
/* Quellen als Knopf (öffnet das Dokument) stehen wie ein Link im Satz: nicht mittig, unterstrichen */
.quellen button.textlink{display:inline;text-align:left;font-weight:600;text-decoration:underline;text-underline-offset:.14em;cursor:pointer}
.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--zeit,.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}
/* Chronik in 3D: Die Teile einer Station fliegen einzeln (Skript), darum muss die Tiefe bis zu ihnen durchgehen */
.tunnel--3d .st,.tunnel--3d .st__rechts{transform-style:preserve-3d}
.tunnel--3d .st__txt{box-shadow:inset 0 1px 0 rgba(255,235,190,.14),inset 0 0 0 1px rgba(241,218,156,.2),0 calc(26px*var(--k)) calc(60px*var(--k)) calc(-22px*var(--k)) rgba(0,0,0,.85)}
/* Schatten und Glanz am Rand des Holzes: innen dunkel auslaufend mit warmem Schimmer. Fest, damit nichts neu gemalt wird; das Licht in der Mitte malt das Skript */
.tunnel__pin::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;transform:translateZ(0);background:radial-gradient(ellipse 125% 105% at 50% 50%,transparent 48%,rgba(10,5,1,.6) 100%);box-shadow:inset 0 0 calc(120px*var(--k)) calc(24px*var(--k)) rgba(8,4,0,.45),inset 0 0 calc(40px*var(--k)) rgba(214,160,72,.14),inset 0 0 0 1px rgba(241,218,156,.07)}
.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/238;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: drei echte Filter auf dem Podest, ein Lichtkegel wandert von Größe zu Größe */
.groesse{cursor:default}
.groesse__bild{opacity:0;translate:0 calc(-26px*var(--k));transition:opacity .6s calc(var(--i)*.18s + .2s),translate .9s var(--spring) calc(var(--i)*.18s + .2s),filter .5s}
.is-in .groesse__bild{opacity:1;translate:0 0}
.groesse:not(.is-an) .groesse__bild{filter:brightness(.78) saturate(.85)}
.groesse__spot{opacity:.12;transition:opacity .7s}
.groesse.is-an .groesse__spot{opacity:1}
.groesse__schein{opacity:.35;transition:opacity .6s}
.groesse.is-an .groesse__schein{opacity:1;animation:themaAtmen 2.4s ease-in-out infinite}
.groesse__funke{fill:#fff3c4;opacity:0}
.groesse.is-an .groesse__funke{animation:perleAuf var(--t) ease-out var(--w) infinite}
.groesse__name{font-size:calc(30px*var(--k));font-weight:700;fill:#f1da9c;letter-spacing:.04em;paint-order:stroke;stroke:rgba(20,10,2,.55);stroke-width:calc(3px*var(--k));transition:fill .4s}
.groesse.is-an .groesse__name{fill:#ffe08a}
.groesse__liter{font-size:calc(21px*var(--k));font-weight:600;fill:#d9caa9;transition:fill .4s}
.groesse.is-an .groesse__liter{fill:#fff3da}
@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))}}

/* Einbau: echte Teile, der Tropfen läuft durch alle Schritte */
.einbau__glanz{opacity:0;transition:opacity .5s}
.einbau__glanz.is-an{opacity:1}
.schrittpunkt{transition:transform .5s var(--spring)}
.schrittpunkt.is-an{transform:scale(1.08)}
.schrittpunkt__kreis{fill:rgba(36,24,13,.88);stroke:rgba(216,182,99,.55);stroke-width:1.2;transition:fill .35s,stroke .35s}
.schrittpunkt.is-an .schrittpunkt__kreis{fill:#8a4c06;stroke:#ffe08a}
.schrittpunkt__zahl{font-size:calc(17px*var(--k));font-weight:800;fill:#ffd25a}
.schrittpunkt.is-an .schrittpunkt__zahl{fill:#fff3c4}
.schrittpunkt__name{font-size:calc(21px*var(--k));font-weight:700;fill:#efe3cb;paint-order:stroke;stroke:rgba(20,10,2,.5);stroke-width:calc(3px*var(--k));transition:fill .35s}
.schrittpunkt.is-an .schrittpunkt__name{fill:#ffe08a}

/* Ausfälle: Ring zählt hoch, darunter arbeitet ein Hydraulikzylinder */
.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__klein{font-size:calc(22px*var(--k));font-weight:600;fill:#e9dcc4}
.ring__gross{font:700 calc(44px*var(--k)) var(--serif);fill:#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(var(--x),var(--y))}}
@keyframes teilRaus{0%{opacity:0;transform:none}15%{opacity:1}85%{opacity:.9}100%{opacity:0;transform:translate(var(--x),var(--y))}}
@media (prefers-reduced-motion:reduce){.groesse__schein,.groesse.is-an .groesse__schein,.groesse__funke,.groesse.is-an .groesse__funke,.ring__schein,.teil{animation:none}.groesse__bild,.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 ===== */
.rk{display:grid;grid-template-columns:minmax(0,1fr);gap:0;overflow:hidden}
.rk__rumpf>*{min-width:0}
.rk__eingabe,.rk__ergebnis,.rk-erg,.rk-gruppe,.rk-block,.rk-optional{grid-template-columns:minmax(0,1fr)}
.rk-detail .tiefer__inhalt{overflow-x:auto}
.rk-detail .tabelle{min-width:calc(420px*var(--k))}
.rk__kopf{display:flex;flex-wrap:wrap;gap:calc(12px*var(--k)) calc(24px*var(--k));align-items:center;justify-content:space-between;padding:clamp(calc(14px*var(--k)),calc(1.6vw*var(--k)),calc(22px*var(--k))) clamp(calc(18px*var(--k)),calc(2.2vw*var(--k)),calc(30px*var(--k)));border-bottom:1px solid var(--line-soft)}
.rk-einheit{display:flex;flex-wrap:wrap;align-items:center;gap:calc(10px*var(--k));font-size:var(--t);font-weight:700;color:var(--brown)}
.rk-umschalter{display:inline-flex;flex-wrap:wrap;gap:calc(4px*var(--k));padding:calc(4px*var(--k));border-radius:calc(999px*var(--k));background:rgba(48,37,26,.07);justify-self:start}
.rk-umschalter button{padding:calc(9px*var(--k)) calc(18px*var(--k));border-radius:calc(999px*var(--k));font-weight:700;font-size:var(--t);color:var(--brown);transition:background .25s,color .25s}
.rk-umschalter button.is-an{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)}
.rk-umschalter--klein button{padding:calc(6px*var(--k)) calc(14px*var(--k))}
.rk__rumpf{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);align-items:start}
.rk__eingabe{padding:clamp(calc(18px*var(--k)),calc(2.2vw*var(--k)),calc(30px*var(--k)));display:grid;gap:calc(16px*var(--k));align-content:start;position:relative}
.rk__eingabe::after{content:"";position:absolute;right:0;top:4%;bottom:4%;width:1px;background:linear-gradient(180deg,transparent,var(--line),transparent)}
.rk__ergebnis{padding:clamp(calc(18px*var(--k)),calc(2.2vw*var(--k)),calc(30px*var(--k)));display:grid;gap:calc(14px*var(--k));align-content:start;min-width:0}
.rk-gruppe{display:grid;gap:calc(10px*var(--k));padding:calc(14px*var(--k)) calc(16px*var(--k));border-radius:calc(16px*var(--k));background:rgba(255,253,247,.7);box-shadow:inset 0 0 0 1px var(--line-soft)}
.rk-gruppe__kopf{display:flex;justify-content:space-between;gap:calc(10px*var(--k));align-items:center;font-size:var(--t);color:var(--espresso)}
.rk-klein{font-size:calc(15px*var(--k));font-weight:700;color:var(--gold-text);text-decoration:underline;padding:calc(4px*var(--k)) 0}
.rk-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,calc(270px*var(--k))),1fr));gap:calc(12px*var(--k)) calc(16px*var(--k))}
.rk-feld{display:grid;gap:calc(4px*var(--k));font-size:var(--t);align-content:start}
.rk-feld__t{font-weight:700;color:var(--brown);line-height:1.3}
.rk-feld__w{display:flex;align-items:baseline;gap:calc(8px*var(--k));font-weight:700;color:var(--espresso)}
.rk-feld__w em{font-style:normal;white-space:nowrap}
/* Einheiten (Liter, €, km) stehen in einer gleich breiten Spalte, so enden alle Eingabefelder an derselben Kante */
.rk-feld__w em{flex:none;min-width:3.4em}
.rk-zahl{flex:1;min-width:0;width:100%;padding:calc(9px*var(--k)) calc(12px*var(--k));text-align:right;font:inherit;font-weight:700;font-size:clamp(calc(19px*var(--k)),calc(1.5vw*var(--k)),calc(22px*var(--k)));color:var(--espresso);font-variant-numeric:tabular-nums;border:0;border-radius:calc(12px*var(--k));background:#fffdf7;box-shadow:inset 0 0 0 1px rgba(160,120,40,.5)}
.rk-zahl::placeholder{font-weight:500;color:var(--muted)}
.rk-zahl:focus{outline:2px solid var(--gold);outline-offset:1px}
.rk-wahl{width:100%;padding:calc(9px*var(--k)) calc(12px*var(--k));font:inherit;font-weight:700;color:var(--espresso);border:0;border-radius:calc(12px*var(--k));background:#fffdf7;box-shadow:inset 0 0 0 1px rgba(160,120,40,.5)}
.rk-hilfe{font-size:calc(15px*var(--k));font-weight:500;line-height:1.4;color:var(--muted)}
.rk-fehler{font-size:calc(15px*var(--k));font-weight:700;color:#a3360f}
.rk-fehler:empty{display:none}
.rk-feld.is-fehler .rk-zahl{box-shadow:inset 0 0 0 2px #c4491a;background:#fff5ef}
.rk-tag{font-style:normal;font-size:calc(13px*var(--k));font-weight:700;letter-spacing:.03em;padding:2px calc(8px*var(--k));border-radius:calc(999px*var(--k));vertical-align:middle;white-space:nowrap}
.rk-tag--an{background:rgba(201,162,78,.22);color:#6b4a12}
.rk-tag--ok{background:rgba(47,143,107,.18);color:#1f6b4d}
.rk-tag--opt{background:rgba(48,37,26,.08);color:var(--brown)}
.rk-modell{font-size:calc(15px*var(--k));font-weight:600;color:var(--brown)}
.rk-modell:empty{display:none}
.rk-modell.is-warn{color:#8a4a0a}
.rk-optional{display:grid;gap:calc(8px*var(--k));padding:calc(14px*var(--k)) calc(16px*var(--k));border-radius:calc(16px*var(--k));background:rgba(201,162,78,.08);box-shadow:inset 0 0 0 1px var(--line-soft)}
.rk-block{display:grid;gap:calc(10px*var(--k));padding-bottom:calc(12px*var(--k))}
.rk-block__t{font-weight:700;font-size:var(--t);color:var(--espresso)}
.rk-add{justify-self:start;padding:calc(10px*var(--k)) calc(20px*var(--k));border-radius:calc(999px*var(--k));font-weight:700;font-size:var(--t);color:var(--gold-text);background:rgba(201,162,78,.14);box-shadow:inset 0 0 0 1px rgba(168,130,47,.4);transition:background .25s}
.rk-add:hover{background:rgba(201,162,78,.28)}
.rk-weitere .tiefer__inhalt{display:grid;gap:calc(14px*var(--k))}
.rk-erg{display:grid;gap:calc(12px*var(--k));align-content:start}
.rk-gross{font:700 clamp(calc(24px*var(--k)),calc(2.3vw*var(--k)),calc(34px*var(--k)))/1.25 var(--serif);color:var(--espresso)}
.rk-gross b{display:block;margin-top:calc(4px*var(--k));color:#1f6b4d;font-size:1.15em}
.rk-gross--gut b{color:#1f6b4d}
.rk-gross--minus{color:#8a3511}
.rk-gross--neutral{color:var(--brown);font-size:clamp(calc(21px*var(--k)),calc(1.9vw*var(--k)),calc(28px*var(--k)))}
.rk-gross:not(.rk-gross--gut) b{display:inline;color:#1f6b4d}
.rk-gross.rk-gross--minus b{color:#a3360f;font-size:inherit}
.rk-liste{display:grid;gap:calc(8px*var(--k));font-size:var(--t);line-height:1.45}
.rk-liste li{padding-left:calc(20px*var(--k));position:relative}
.rk-liste li::before{content:"";position:absolute;left:2px;top:.62em;width:calc(8px*var(--k));height:calc(8px*var(--k));border-radius:50%;background:var(--btn-grad);box-shadow:inset 0 0 0 1px rgba(160,120,40,.6)}
.rk-liste b{color:var(--espresso)}
.rk-kacheln{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(10px*var(--k))}
.rk-kacheln li{display:grid;gap:calc(4px*var(--k));padding:calc(12px*var(--k)) calc(14px*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);align-content:start}
.rk-kacheln span{font-size:calc(15px*var(--k));line-height:1.25}
.rk-kacheln b{font:700 clamp(calc(20px*var(--k)),calc(1.9vw*var(--k)),calc(27px*var(--k)))/1.1 var(--serif);color:var(--gold-light);white-space:nowrap}
.rk-fein{font-size:var(--t);line-height:1.5;color:#3b2e1e}
.rk-warn{font-size:calc(15px*var(--k));line-height:1.45;padding:calc(10px*var(--k)) calc(12px*var(--k));border-radius:calc(12px*var(--k));background:rgba(201,162,78,.16);color:#5b3d0a}
.rk-leer{padding:calc(18px*var(--k));border-radius:calc(16px*var(--k));background:rgba(48,37,26,.05);font-size:var(--t);line-height:1.5;color:var(--brown)}
.rk-leer--hinweis{display:grid;gap:calc(10px*var(--k))}
.rk-pruef{font-size:calc(15px*var(--k));line-height:1.5;color:var(--muted)}
.rk-pruef a{font-weight:700;color:var(--gold-text);text-decoration:underline}
.rk-detail .tiefer__inhalt h4{font:700 var(--t)/1.3 var(--sans);color:var(--espresso);margin:calc(16px*var(--k)) 0 calc(4px*var(--k))}
.rk-detail .tiefer__inhalt h4:first-child{margin-top:calc(4px*var(--k))}
.rk-ann,.rk-weg{display:grid;gap:calc(8px*var(--k));font-size:calc(15.5px*var(--k));line-height:1.5;padding-left:calc(18px*var(--k))}
.rk-ann{list-style:disc}
.rk-weg{list-style:decimal}
.rk-detail .tabelle{font-size:calc(15.5px*var(--k))}
.rk-detail .tabelle th[scope=row]{text-transform:none;letter-spacing:0;font-size:inherit;color:var(--espresso);font-weight:600}
.d-stufe{stroke-width:2.5;stroke-linejoin:miter}
@media (max-width:900px){.rk__rumpf{grid-template-columns:minmax(0,1fr)}.rk__eingabe::after{display:none}.rk__eingabe{border-bottom:1px solid var(--line-soft)}}
@media (max-width:560px){.rk-umschalter--ansicht{display:grid;width:100%}.rk-umschalter button{padding:calc(9px*var(--k)) calc(12px*var(--k))}.rk-kacheln{grid-template-columns:minmax(0,1fr)}}
.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}
/* Rechenweg im Rechner: Die Spalte „Herkunft“ darf umbrechen, sonst läuft die Tabelle aus ihrem Kasten. Beträge bleiben ganz (geschütztes Leerzeichen vor €) */
.rk-detail .tabelle td:last-child{white-space:normal}
/* Patentnummern brechen nie mitten in der Nummer */
.tabelle td:first-child a{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;-webkit-hyphens:auto;hyphens:auto}
/* Zweierraster der Faktenkarten im Seitenkopf: Spalten dürfen schmaler als ein langes Wort werden, es wird getrennt statt über den Rand zu ragen */
@media (min-width:1341px){.kopf__grid .fakten[style*="1fr 1fr"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}}

/* ===== 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)}
/* Alle Zeilen teilen dieselben Spalten: Die Wertspalte ist so breit wie der längste Wert, alle Spuren enden gleich und haben denselben Maßstab */
@media (min-width:641px){
  .kmwand{grid-template-columns:minmax(calc(170px*var(--k)),calc(280px*var(--k))) minmax(0,1fr) max-content;column-gap:calc(14px*var(--k))}
  .kmwand li{grid-column:1/-1;grid-template-columns:subgrid}
}
/* Browser ohne subgrid (vor Chrome 117): feste Mindestbreite der Wertspalte, die deutschen Werte sind alle schmaler, so enden die Spuren gleich */
@supports not (grid-template-columns:subgrid){
  @media (min-width:641px){.kmwand li{grid-template-columns:minmax(calc(170px*var(--k)),calc(280px*var(--k))) minmax(0,1fr) minmax(9em,max-content)}}
}
.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)}}
/* Das Prinzip: Ölkreislauf mit zwei Filtern (Skript zeichnet auf die Fläche), darunter die beiden Filter im Vergleich */
.prinzip{display:grid;gap:clamp(calc(14px*var(--k)),calc(1.6vw*var(--k)),calc(22px*var(--k)))}
.prinzip__buehne{position:relative;border-radius:var(--r);background:var(--buehne);box-shadow:inset 0 0 0 1px rgba(255,232,180,.18),inset 0 0 calc(80px*var(--k)) rgba(20,10,2,.45),var(--shadow);overflow:hidden;min-height:calc(240px*var(--k))}
.prinzip__buehne canvas{display:block}
.prinzip__karten{display:grid;grid-template-columns:1fr 1fr;gap:clamp(calc(12px*var(--k)),calc(1.5vw*var(--k)),calc(20px*var(--k)))}
.prinzip__karte{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(calc(14px*var(--k)),calc(1.6vw*var(--k)),calc(22px*var(--k)));align-items:center;padding:clamp(calc(16px*var(--k)),calc(1.8vw*var(--k)),calc(24px*var(--k)))}
.prinzip__karte img{width:clamp(calc(56px*var(--k)),calc(5.4vw*var(--k)),calc(84px*var(--k)));height:auto;filter:drop-shadow(0 calc(10px*var(--k)) calc(12px*var(--k)) rgba(40,25,8,.35))}
.prinzip__karte>div{display:grid;gap:calc(6px*var(--k))}
.prinzip__wert{font:700 clamp(calc(24px*var(--k)),calc(2.2vw*var(--k)),calc(34px*var(--k)))/1 var(--sans);letter-spacing:-.01em;color:var(--espresso)}
.prinzip__karte--gold .prinzip__wert{background:linear-gradient(100deg,#9a7428,#d9b45e 50%,#9a7428);-webkit-background-clip:text;background-clip:text;color:transparent}
.prinzip__karte--gold{box-shadow:inset 0 0 0 1px rgba(201,162,78,.55),var(--shadow)}
@media (max-width:680px){.prinzip__karten{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}
/* Praxistest: die Beobachtung aus dem Bericht als Zitat */
.beobachtung{font-size:var(--t);line-height:1.5}
.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%}
/* Frage links, Wert rechts über dem Regler („Wie viel Öl fasst der Motor?“ … „6 l“), nicht aneinandergeklebt */
.regel__kopf{display:flex;justify-content:space-between;align-items:baseline;gap:calc(12px*var(--k))}
.regel__kopf output{flex:none;font-variant-numeric:tabular-nums}
/* Der Umschalter Motor / Hydraulik / Heizung bleibt in einer Zeile, sonst läge die goldene Pille hinter zwei Knöpfen */
.finder__reiter{position:relative;margin:0;isolation:isolate;flex-wrap:nowrap}
.finder__reiter button{white-space:nowrap}
.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(2,auto);justify-content:start;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}
/* Der Goldstaub steigt nur an den Rändern auf, neben der Schrift: Ein Punkt über einem Buchstaben läse sich sonst wie ein Akzent („Filtèrt“) */
.iso__staub i:nth-child(1){left:2.5%;--g:calc(4px*var(--k));--t:7s}
.iso__staub i:nth-child(2){left:5.5%;--g:calc(6px*var(--k));--t:9s;--w:1.4s}
.iso__staub i:nth-child(3){left:8.5%;--g:calc(3px*var(--k));--t:6s;--w:3s}
.iso__staub i:nth-child(4){left:4%;--g:calc(5px*var(--k));--t:8s;--w:4.6s}
.iso__staub i:nth-child(5){left:91%;--g:calc(3px*var(--k));--t:7.5s;--w:2.2s}
.iso__staub i:nth-child(6){left:94%;--g:calc(6px*var(--k));--t:9.5s;--w:4s}
.iso__staub i:nth-child(7){left:97%;--g:calc(4px*var(--k));--t:6.5s;--w:1s}
.iso__staub i:nth-child(8){left:92.5%;--g:calc(3px*var(--k));--t:8.5s;--w:5.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}}

/* Rechner, erste Gruppe: Hinweise größer (Lab) */
.rk__eingabe>.rk-gruppe:nth-of-type(1)>.rk-modell{font-size:calc(20.5px*var(--k))}
.rk-hilfe--gross{font-size:calc(20.5px*var(--k));text-align:center}

/* ===== Ü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);text-wrap:balance}
/* Die Quelle steht mittig unter dem mittigen Satz */
.mission__satz+.quellen{text-align:center}
.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}
/* Der Anfangsbuchstabe steht rechts in seiner Spalte und schließt ans Wort an („Technischer“ statt „T echnischer“), die Wörter beginnen trotzdem untereinander */
.trabold-wort b{text-align:right;padding-right:1px}

/* ===== 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 und schmale Laptops: Feste Zweierraster im Seitenkopf (style="…1fr 1fr") untereinander stellen, sonst werden die Karten zu schmal für ihren Text */
@media (min-width:861px) and (max-width:1340px){
  .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: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: „Motor schützen.“ passt mit Reserve in eine Zeile (bei 9,4vw blieben bei 390 px nur 2 px), und das Wort wird nie getrennt */
  .held__titel{font-size:clamp(calc(26px*var(--k)),calc(8.6vw*var(--k)),calc(52px*var(--k)));-webkit-hyphens:manual;hyphens:manual}
  .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}
  /* 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(18px*var(--k))}
.beleg__tipp{font-size:calc(15px*var(--k))}
.fuss__klein{font-size:calc(16px*var(--k))}
.fuss nav{font-size:calc(21px*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:641px){
  .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. Die Lab-Lagen gelten nur am großen Bildschirm (ab 1061 px): Handy und Tablet hängen so nicht davon ab, dass 09-handy.css jede einzelne zurücksetzt */
@media (min-width:1061px){
.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(-55px*var(--k)) calc(-87px*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;animation:zeileEin 1.1s var(--ease) .2s both}
.held__text .btn--gold{position:relative;z-index:25;transition-duration:.55s;border-radius:calc(999px*var(--k));color:#2a1605;background:linear-gradient(165deg,#f6d98c,#d9a441);border:0;justify-content:center;text-align:center;text-shadow:0 0 1px #2a1605}
/* Lab-Maße des Titels, des Knopfs und der Schilder an der Röntgenlinse: nur am großen Bildschirm */
@media (min-width:1061px){
.held__titel>.gold{line-height:1.8;translate:0 calc(-34px*var(--k));width:calc(719.2px*var(--k));height:calc(411px*var(--k));max-width:none;min-width:0;max-height:none;min-height:0}
.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:calc(72.6px*var(--k))}
.held__text .btn--gold{translate:calc(110px*var(--k)) calc(171px*var(--k))}
.held__text .btn--gold{padding:calc(13px*var(--k)) calc(25px*var(--k));width:calc(396.7px*var(--k));height:calc(91.1px*var(--k));max-width:none;min-width:0;max-height:none;min-height:0;font-size:calc(26px*var(--k))}
}
/* 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 auf der Startseite (nur .reise, nicht der gleichnamige Abschnitt der Funktionsweise): 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#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":-472.4,"y":246.7,"i":[34,-217.5],"o":[-19.9,127.4]},{"a":0,"x":-647.9,"y":365.5,"i":[-37.6,-145.4],"o":[37.9,146.9]},{"a":1,"x":-669.3,"y":213.6,"i":[-119.1,-525.1],"o":[34.3,151.4]},{"a":1,"x":-711.8,"y":663,"i":[-47.8,-136.1],"o":[64.8,184.7]},{"a":1,"x":-677.6,"y":1253.6,"i":[-104,-87.1],"o":[104,87.1]},{"a":2,"x":7.7,"y":85.1,"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":3,"x":-651.7,"y":2833.9,"i":[-104,-118.6],"o":[104,118.6]},{"a":3,"x":-108.7,"y":2895,"i":[-284.8,210.8],"o":[321.3,-237.8]},{"a":4,"x":450.4,"y":9.9,"i":[-236,99.5],"o":[255.3,-107.6]},{"a":4,"x":706.2,"y":296.8,"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":1373.8,"i":[267.6,32.1],"o":[-218.7,-26.3]},{"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":-607.7,"y":70.6,"i":[-114,-95.3],"o":[114,95.3]},{"a":6,"x":7.7,"y":252.9,"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":7,"x":217.7,"y":91.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":8,"x":-645.6,"y":28.8,"i":[-104,-98.9],"o":[104,98.9]},{"a":8,"x":0,"y":0,"i":[-277.8,-72.5],"o":[212.9,55.5]},{"a":8,"x":571,"y":144,"i":[-114,-99],"o":[114,99]},{"a":8,"x":684,"y":594,"i":[5,-168],"o":[-5,168]},{"a":8,"x":790,"y":1099.9,"i":[5,-168],"o":[-5,168]},{"a":8,"x":654,"y":1602,"i":[104,-99],"o":[-104,99]},{"a":8,"x":3.9,"y":1630,"i":[332.5,-106.2],"o":[-312.8,99.9]},{"a":9,"x":-634.5,"y":4,"i":[114,-86.3],"o":[-114,86.3]},{"a":9,"x":-684,"y":518,"i":[40.5,-138.8],"o":[-40,137]},{"a":9,"x":-654,"y":946,"i":[-59.5,-82.5],"o":[59.5,82.5]},{"a":9,"x":-278.8,"y":1026.5,"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 */
/* Lab-Maße gelten nur am großen Bildschirm, darunter ordnet sich alles von selbst */
@media (min-width:1061px){#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}
@media (min-width:1061px){#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 */
/* Lab-Lage der Filterzeichnung in der Reise: nur bei genug Höhe, sonst schneidet der Rand oben das Einlassrohr ab */
@media (min-height:861px){.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(612.6px*var(--k));min-height:calc(1103px*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: Lage von Menü, Sprachauswahl und Logo wie auf der Startseite, auf allen Seiten (Desktop) */
@media (min-width:1061px){
  .nav__in.holz-traeger{translate:0 calc(14px*var(--k))}
  .nav__links{translate:calc(-4.4px*var(--k)) calc(27.8px*var(--k))}
  .nav__links>a,.nav__links .drop__btn{translate:0 calc(-30.1px*var(--k))}
  .sprachen__btn{translate:calc(1088.9px*var(--k)) 0}
  .nav .logo{translate:0 calc(-22px*var(--k))}
}
@media (min-width:1061px){.held__glanz{translate:calc(610px*var(--k)) calc(264.4px*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%}
@media (min-width:1061px){.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: Leiste und Logo, Größe wie auf der Startseite, auf allen Seiten */
.nav{--nav-schrift:calc(24px*var(--k))}
/* Hauptmenü: Schrift 15 % größer (24 auf 27,6), nur am großen Bildschirm. Der Sprachenknopf steht weiter unten bei seiner Grundregel. */
@media (min-width:1061px){
  .nav{--nav-schrift:calc(27.6px*var(--k))}
}
@media (min-width:1061px){
  .nav .logo,
  .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}
}

/* Fuß: Logo und Menüspalten wachsen mit dem Kopf (Logo 80 auf 113 hoch, Schrift 22), die Spalten bekommen mehr Platz */
@media (min-width:861px){
  .fuss__marke .logo,
  .fuss__marke .logo__bild{width:calc(337px*var(--k));height:calc(109.6px*var(--k));max-width:none;min-width:0;max-height:none;min-height:0}
  .fuss__marke .logo{translate:calc(-52.1px*var(--k)) calc(-5.5px*var(--k))}
  .fuss__marke .logo__bild{translate:calc(28.8px*var(--k)) 0}
  .fuss__grid{grid-template-columns:auto repeat(4,minmax(0,1fr));gap:clamp(calc(18px*var(--k)),calc(2vw*var(--k)),calc(32px*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)}
/* Sprachenknopf: Schrift 15 % größer (18 auf 20,7), nur am großen Bildschirm */
@media (min-width:1061px){.sprachen__btn{font-size:calc(20.7px*var(--k))}}
.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(26px*var(--k)) calc(394px*var(--k));scale:1.489}
}

/* Vermittlungshinweis im Fuß: mittig, größer */
.hinweis>p{flex:1;text-align:center}
@media (min-width:1061px){.hinweis>p{font-size:calc(27.8px*var(--k))}.hinweis>p>b{font-size:calc(33.3px*var(--k))}}
/* Die Zeilenumbrüche mitten im Satz gelten nur am großen Bildschirm */
@media (max-width:1060px){.hinweis br.gross{display:none}.hinweis>p{max-width:60ch;margin-inline:auto}}

/* 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}

/* Fotoband: Die Quellenzeile steht unter dem Band in der normalen Spalte (index.html), nicht mehr im ausgeblendeten Rand des Bandes, das über die ganze Bildschirmbreite läuft.
   Der zweite Link stand im Lab mit einem festen Schub (933 px) am rechten Rand und lag damit auf kleineren Bildschirmen außerhalb des Bildes. */
.fotoband__quellen{margin-top:clamp(calc(14px*var(--k)),calc(1.6vw*var(--k)),calc(22px*var(--k)))}

/* Funktionsweise: Abschnitt „Reise“ (Lab): kein Abstand unten. Die Mindesthöhe ist raus, sie ließ unter dem Filter eine große Lücke. */
.seite-funktionsweise #reise{padding-bottom:0}

/* Startseite, Waage (Lab): Die Verschiebungen von Rolle und Beschriftungen sind jetzt direkt in der Zeichnung (32-duell.js): Rolle auf der Ringkante, „Testöl“ mittig, „Stahlrolle“ links frei vom Pfeil. */

/* Startseite, Waage im Praxistest-Abschnitt (Lab): Prüfrolle um 1 nach oben */
.start .waage>g:nth-of-type(3)>image{display:inline-block;translate:0 -1px}

/* Kontaktformular: Breite und Lage aus dem Lab, nur am großen Bildschirm */
@media (min-width:1061px){.kontaktform{width:calc(841.1px*var(--k));max-width:none;min-width:0;translate:calc(-34.4px*var(--k)) 0}}
/* Nachrichtenfeld: doppelt so hoch, genau so breit wie die anderen Felder */
.kontaktform textarea{min-height:calc(260px*var(--k));width:100%;box-sizing:border-box}

/* Kontakt, Überschrift (Lab): breiter und verschoben, nur am großen Bildschirm */
@media (min-width:1061px){
  .seite-kontakt h1>.gold{display:inline-block;width:calc(836.7px*var(--k));max-width:none;min-width:0;translate:0 calc(-6.7px*var(--k));font-size:calc(38.9px*var(--k))}
  .seite-kontakt .kopf .kicker{font-size:calc(21.1px*var(--k));translate:0 calc(3.3px*var(--k))}
  .seite-kontakt #inhalt>section:nth-of-type(2){padding-bottom:calc(46.7px*var(--k));min-height:calc(992.2px*var(--k))}
  .seite-kontakt .kopf .lead{font-size:calc(28.9px*var(--k));line-height:calc(42.7px*var(--k))}
  .seite-kontakt .kopf .lead a{padding:calc(6.7px*var(--k)) calc(12.2px*var(--k));font-size:calc(28.9px*var(--k));line-height:calc(42.7px*var(--k))}
  .seite-kontakt .kontaktform .btn--gold{padding:calc(15.6px*var(--k)) calc(30px*var(--k));font-size:calc(22.2px*var(--k))}
}

/* ===== 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}
}

/* Handy und Tablet (bis 1060 px): Die im Lab gesetzten Lagen und festen Maße gelten nur für den großen Bildschirm.
   Darunter ordnet sich alles von selbst an, nichts ragt seitlich heraus. Desktop bleibt unverändert. */
@media (max-width:1060px){
  /* Kopf der Startseite */
  .nav__in .logo,.held__buehne,.held__glanz{translate:none}
  .held__glanz{scale:1}
  .held__filter{translate:none;height:100%}
  .held__titel{translate:none;width:auto;height:auto}
  .held__titel>.gold{translate:none;width:auto;height:auto;line-height:1.12}
  .held__titel .gold{font-size:inherit}
  .held__text .btn--gold{translate:none;width:auto;height:auto;min-height:calc(56px*var(--k));padding:calc(12px*var(--k)) calc(28px*var(--k));font-size:clamp(calc(18px*var(--k)),calc(2.6vw*var(--k)),calc(22px*var(--k)))}
  /* Der Leitsatz „bewährt seit 30 Jahren“ bricht sauber um und wird mit dem Bildschirm kleiner */
  .held__claim{font-size:clamp(calc(17px*var(--k)),calc(3.4vw*var(--k)),calc(27px*var(--k)));line-height:1.4;letter-spacing:.05em;text-wrap:balance;max-width:34ch;margin-inline:auto}
  /* Schilder an der Röntgenlinse: ohne die Verschiebung vom großen Bildschirm */
  .held__schild,.held__punkt{translate:none!important}

  /* Weitere Abschnitte der Startseite */
  .duell>.duell__ergebnis,.duell__ergebnis .duell__fazit{height:auto;translate:none}
  .duell__ergebnis>.btn,.duell__ergebnis>.klein{translate:none}
  .nav__in.holz-traeger{translate:none}
  .nutzen__bild{translate:none}
  .nutzen__motor{width:min(100%,calc(492px*var(--k)));height:auto;translate:none}
  #film .sek-kopf h2 .gold{display:inline;width:auto;translate:none;font-size:inherit}
  .filtersim__cam>svg,.filtersim__cam>canvas{translate:none}
  .reise__links{translate:none}

  /* Unterseiten */
  .seite-praxistest #beweis>.wrap>p.quellen{translate:none;width:auto}
  .seite-praxistest .fakt{translate:none}
  .fotoband>p.quellen>a{translate:none}
}

/* Handy: Sprachknopf nur mit Flagge, damit Logo, Sprache und Menü nebeneinander passen */
@media (max-width:560px){
  .sprachen__btn{gap:calc(6px*var(--k));padding:calc(7px*var(--k)) calc(10px*var(--k));font-size:calc(16px*var(--k))}
  .sprachen__btn>b{display:none}
}
/* Vermittlungshinweis im Fuß: auf kleinen Bildschirmen nicht in Desktop-Größe */
@media (max-width:860px){
  .hinweis>p{font-size:clamp(calc(16px*var(--k)),calc(3.4vw*var(--k)),calc(24px*var(--k)))}
  .hinweis>p>b{font-size:1.15em}
}
/* Handy: Bildkarten mit Silbentrennung statt Bruch mitten im Wort, Umschalter (Motor / Hydraulik / Heizung) in einer Zeile */
@media (max-width:560px){
  .blattkarte b,.blattkarte small{overflow-wrap:normal;-webkit-hyphens:auto;hyphens:auto}
  .blattkarte b{font-size:calc(14.5px*var(--k))}
  .reiter{flex-wrap:nowrap;max-width:100%;overflow-x:auto;scrollbar-width:none}
  .reiter button{padding:calc(7px*var(--k)) calc(10px*var(--k));font-size:calc(15px*var(--k));white-space:nowrap;flex:none}
}
/* Schmale Laptops (bis 1340 px): Der einzeilige Leitsatz und die im Lab gesetzte Lage des Sprachknopfs passen erst darüber.
   Darunter bricht der Leitsatz wie auf dem Tablet in seiner Spalte um, und der Sprachknopf steht am rechten Rand der Menüleiste. */
@media (min-width:1061px) and (max-width:1340px){
  .held__claim{white-space:normal;width:auto;height:auto;max-width:34ch;translate:none;margin-inline:auto;font-size:clamp(calc(24px*var(--k)),calc(2.3vw*var(--k)),calc(31px*var(--k)));line-height:1.4;text-wrap:balance}
  .nav .sprachen{grid-column:3;justify-self:end}
  .sprachen__btn{translate:0 -1.2px}
}

/* Niedrige Bildschirme am Laptop (bis 860 px Höhe, etwa 1280×720 oder 1366×768): Der Kopf der Startseite ist im Lab für 960 px Höhe gesetzt.
   Hier eine kompakte Fassung mit denselben Teilen: Leitsatz, Titel und Knopf links, Filter rechts, alles auf dem ersten Bildschirm. */
@media (min-width:1061px) and (max-height:860px){
  .kopfzone{min-height:0;padding-bottom:calc(8px*var(--k))}
  .held{padding-top:0;padding-bottom:clamp(calc(16px*var(--k)),calc(3*var(--fh,1vh)*var(--k)),calc(32px*var(--k)));min-height:calc(100svh - var(--nav-unten,calc(180px*var(--k))) - calc(10px*var(--k)))}
  .held__grid{margin-top:0;margin-bottom:0;align-items:center}
  .held__text{height:auto;translate:none;gap:clamp(calc(12px*var(--k)),calc(2.2*var(--fh,1vh)*var(--k)),calc(22px*var(--k)))}
  .held__claim{white-space:normal;width:auto;height:auto;max-width:44ch;translate:none;margin:0 0 calc(4px*var(--k));font-size:clamp(calc(19px*var(--k)),calc(1.7vw*var(--k)),calc(26px*var(--k)));line-height:1.35;text-align:left;text-wrap:balance}
  .held__titel{translate:none;width:auto;height:auto}
  .held__titel>.gold{translate:none;width:auto;height:auto;line-height:1.08}
  .held__titel .gold{font-size:clamp(calc(42px*var(--k)),min(calc(4.4vw*var(--k)),calc(8.6*var(--fh,1vh)*var(--k))),calc(68px*var(--k)))}
  .held__text .btn--gold{translate:none;width:auto;height:auto;min-height:calc(58px*var(--k));padding:calc(13px*var(--k)) calc(30px*var(--k));font-size:clamp(calc(18px*var(--k)),calc(1.4vw*var(--k)),calc(21px*var(--k)))}
  .held__buehne{translate:none;height:min(calc(100svh - var(--nav-unten,calc(180px*var(--k))) - calc(24px*var(--k))),calc(720px*var(--k)))}
  .held__glanz{translate:none;scale:1}
  .held__filter{translate:0 0;scale:1;height:100%}
  .held__schild,.held__punkt{translate:none!important}
}

/* ===== Sicht-Prüfung Runde 1: Tablet (768), Laptop (1280×720, 1366×768) und 1920×1080 =====
   Der Bildschirm des Inhabers (1920×960) bleibt wie im Lab eingestellt. Was nur auf anderen Größen stört, steht in Stufen bis 1699 px. */

/* Alle Größen: beide Prüfrollen gleich hoch, so beginnen ihre Bildunterschriften auf derselben Linie */
.rolle-frei img{aspect-ratio:335/538;object-fit:contain;object-position:50% 100%}
/* Hinweis „Beim Klick lädt YouTube“ bleibt auch auf hellen Vorschaubildern lesbar */
.video__start small{text-shadow:0 1px calc(3px*var(--k)) rgba(0,0,0,.85)}
/* Archivliste: Bricht ein Eintrag zweizeilig, stehen die Trennlinien der Nachbarn trotzdem auf einer Höhe */
.archivliste li{display:flex}
.archivliste a{flex:1}
/* Praxistest, Zeitleiste waagrecht: Der Punkt bei km 1.000 (1 % der Strecke) verschmolz mit dem bei km 0 zu einem Doppelklecks */
@media (min-width:1101px){.testband li:nth-child(2)::before{display:none}}
/* Zeitleiste senkrecht: ohne die großen Abstände der waagrechten Fassung */
@media (max-width:1100px){.testband{margin-block:calc(14px*var(--k)) calc(24px*var(--k))}}

/* Touch: Links und Knöpfe in Quellenzeilen haben eine große Trefferfläche, machen die Zeile aber nicht höher.
   Die Zeilen stehen etwas weiter auseinander, damit sich die Trefferflächen übereinanderliegender Links kaum überlappen */
@media (max-width:820px),(pointer:coarse){
  .quellen{line-height:1.9}
  .quellen button.textlink,.nugget__fuss .textlink,.nugget__quelle .textlink,.zeitband .textlink{min-height:0;padding-block:calc(8px*var(--k));margin-block:calc(-8px*var(--k))}
  main p:is(.quellen,.klein) a,.zeitband li>a{padding-block:calc(8px*var(--k));margin-block:calc(-8px*var(--k))}
}

/* Bis 1060 px */
@media (max-width:1060px){
  /* Harte Zeilenumbrüche, die nur für den großen Bildschirm gesetzt sind, entfallen */
  br.gross{display:none}
  /* Leitsatz im Kopf links wie Titel und Knopf: eine Achse statt zwei */
  .held__claim{margin-inline:0;text-align:left}
  /* Rechner: Hinweis unter dem Feld wie die übrigen Hinweise, links und ohne festen Umbruch */
  .rk-hilfe--gross{font-size:calc(15px*var(--k));text-align:left}
  .rk-hilfe--gross br{display:none}
}

/* Tablet und kleiner (bis 980 px) */
@media (max-width:980px){
  /* Zweierraster untereinander: Halbe Spalten sind hier zu schmal für Fotos, Tabellen und Karten. Win-Win-Win bleibt nebeneinander */
  .raster-2:not(:has(>.win)){grid-template-columns:minmax(0,1fr)}
  /* Schiffe: Überschrift und Text vor dem Foto, wie in allen anderen Gruppen */
  #schiff .raster-2>[data-rein="rechts"]{order:-1}
  /* Größenfinder einspaltig, der Umschalter Motor / Hydraulik / Heizung passt in eine Zeile */
  .finder{grid-template-columns:minmax(0,1fr)}
  /* Über uns, Kontaktkarte: Der Hinweis zur Vermittlung steht nicht allein in der zweiten Reihe */
  [style*="minmax(260px"]>.einfach:last-child{grid-column:1/-1}
  /* Über uns: Das Lkw-Foto im Kopf füllt nicht mehr den halben Bildschirm */
  .ueber__lkw{max-width:min(calc(340px*var(--k)),calc(40*var(--fh,1vh)*var(--k)))}
}

/* Tablet (561 bis 980 px) */
@media (min-width:561px) and (max-width:980px){
  /* Dreierraster als Zweierraster, eine einzelne Karte in der letzten Reihe geht über die ganze Breite */
  .raster-3:not([style*="grid-template-columns"]){grid-template-columns:repeat(2,minmax(0,1fr))}
  .raster-3>:last-child:nth-child(odd){grid-column:1/-1}
  .mission{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Reise: Oberzeile und Überschrift stehen über der Filtergrafik, der Abschnitt beginnt nicht mehr kopflos */
  .reise__grid{grid-template-rows:auto auto minmax(0,1fr) auto auto auto;padding-top:calc(48px*var(--k))}
  .reise__links{display:contents}
  .reise__links>.kicker{display:inline-flex;grid-row:1;justify-self:start}
  .reise__links>h2{display:block;grid-row:2;font-size:clamp(calc(26px*var(--k)),calc(4.4vw*var(--k)),calc(36px*var(--k)))}
  .reise__buehne{grid-row:3}
  .reise__schritte{grid-row:4}
  .reise__punkte{grid-row:5}
  .reise__links>.quellen{grid-row:6}
}

/* Ab 641 px: drei Weiter-Karten in einer Reihe statt zwei und einer allein */
@media (min-width:641px){.weiter:has(>:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Videos und Dokumentkarten: Eine unvollständige letzte Reihe steht mittig statt links mit einem Loch rechts */
@media (max-width:1699px){
  .dokgitter,.videos{--n:1;display:flex;flex-wrap:wrap;justify-content:center}
  .dokgitter{--sp:var(--foto-spalt)}
  .videos{--sp:clamp(calc(14px*var(--k)),calc(2vw*var(--k)),calc(26px*var(--k)))}
  .dokgitter>*,.videos>*{flex:0 0 calc((100% - (var(--n) - 1)*var(--sp))/var(--n));min-width:0}
}
@media (min-width:641px) and (max-width:1699px){.dokgitter,.videos{--n:2}}
@media (min-width:986px) and (max-width:1699px){.dokgitter,.videos{--n:3}}

/* Bis 1340 px: Vermittlungshinweis im Fuß ohne harte Umbrüche, als Block mittig, der Tropfen steht über dem Text */
@media (max-width:1340px){
  .hinweis br.gross{display:none}
  .hinweis{flex-direction:column;align-items:center}
  .hinweis>p{flex:none;max-width:60ch;margin-inline:auto}
}

/* Laptops (1061 bis 1699 px): Feste Lab-Maße vom großen Bildschirm, die hier nicht passen */
@media (min-width:1061px) and (max-width:1699px){
  /* Vermittlungshinweis: Schrift wächst mit der Breite (bei 1280 px wie der übrige Text), statt größer als am großen Bildschirm zu sein */
  .hinweis>p{font-size:clamp(calc(19px*var(--k)),calc(1.45vw*var(--k)),calc(25px*var(--k)))}
  .hinweis>p>b{font-size:1.2em}
  /* Praxistest, Beweis: Die festen Höhen der Startseite und der Schub der Quellenzeile ließen hier ein Loch */
  .seite-praxistest .duell>.duell__ergebnis,.seite-praxistest .duell__ergebnis .duell__fazit{height:auto;translate:none}
  .seite-praxistest #beweis>.wrap>p.quellen{translate:none;width:auto;text-align:center}
  .seite-praxistest #beweis{min-height:0}
  /* Überschriften in halben Spalten etwas kleiner, damit „Die Beobachtungen“ nicht nach dem ersten Wort bricht */
  .raster-2>div>h2{font-size:clamp(calc(30px*var(--k)),calc(3.4vw*var(--k)),calc(48px*var(--k)))}
  /* Schiffe: Foto oben bündig mit der Überschrift daneben, nicht senkrecht mittig mit Leerraum darüber */
  #schiff .raster-2{align-items:start}
  /* Collagen in Galerien unten bündig: Das Schild sitzt am Bild statt darunter in der Luft */
  .galerie .foto img[src*="-gesamt"]{object-position:50% 100%}
  /* Vier Fotos in einer Reihe statt drei und eines als Breitbild über die ganze Zeile */
  .galerie:has(>.foto:nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}
  .galerie:has(>.foto:nth-child(4):last-child)>.foto{grid-column:auto;aspect-ratio:4/3}
}
/* Tablet quer (761 bis 1060 px): vier Fotos als 2 × 2 */
@media (min-width:761px) and (max-width:1060px){
  .galerie:not(.galerie--2):has(>.foto:nth-child(4):last-child)>.foto{grid-column:span 3;aspect-ratio:4/3}
}

/* Niedrige Laptop-Bildschirme (ab 1061 px breit, bis 860 px hoch) */
@media (min-width:1061px) and (max-height:860px){
  /* Weniger Leerraum zwischen den Abschnitten: Bei 1280×720 war ein Viertel des Bildschirms leer */
  .sek--klein{padding-block:clamp(calc(40px*var(--k)),calc(4.6vw*var(--k)),calc(66px*var(--k)))}
  /* Patentzeichnung nicht höher als der Bildschirm */
  .hsbild{max-width:min(calc(560px*var(--k)),calc((100svh - calc(140px*var(--k)))*.68))!important}
  /* Chronik „Heute“: Das Archivfoto der drei Größen ohne die halb angeschnittene Kopfzeile */
  .st--ziel .st__neben img{object-position:50% 100%}
}

/* ===== Handy (bis 560 px, geprüft bei 390×844) und Handy-Menü ===== */
@media (max-width:1060px){
  /* Menü deckend (die große Held-Überschrift schien als Geisterschrift durch), aktiver Punkt als Fläche statt geschwungener Linie */
  .nav__links{background:#fffbf1}
  .nav__links>a[aria-current=page]{box-shadow:none;background:rgba(201,162,78,.14)}
  /* Der Zurück-Knopf weicht beim Herunterscrollen aus und kommt beim Hochscrollen wieder (01-zurueck.js) */
  .zurueck.is-weg{opacity:0;transform:translateY(calc(24px*var(--k)));pointer-events:none}
}
@media (max-width:980px){
  /* Held: feste Luft zwischen dem Knopf „Beratung anfragen“ und dem Filter */
  .held__buehne{margin-top:calc(24px*var(--k))}
  /* Einspaltig steht der Text vor dem Bild: erst Überschrift, dann Zeichnung bzw. Foto (Aufbau im Schnitt, Schiffe, Von Schwarz zu Goldgelb) */
  .raster-2>.hsbild:first-child,.raster-2>.foto:first-child{order:2}
}
@media (max-width:640px){
  /* Kilometerwand: Wert rechts neben dem Namen, die Spur darunter über die ganze Breite: alle Spuren gleich lang, gleicher Maßstab */
  .kmwand__wer{grid-column:1;grid-row:1}
  .kmwand__wert{grid-area:1/2;align-self:start}
  .kmwand__spur{grid-area:2/1/3/3}
  /* Dokumentkarten: mehr Abstand zur nächsten Karte als zum eigenen Bild, so ist klar, welcher Titel wozu gehört */
  .dokgitter{row-gap:calc(32px*var(--k))}
  /* Archivliste: „EXPO“ ist breiter als die Jahreszahlen, alle Texte beginnen trotzdem an derselben Kante */
  .archivliste b{min-width:3.1em}
}
@media (max-width:560px){
  /* Zurück-Knopf kleiner */
  .zurueck{min-height:calc(44px*var(--k));padding:0 calc(16px*var(--k)) 0 calc(12px*var(--k));font-size:calc(15px*var(--k));max-width:calc(100vw - calc(96px*var(--k)))}
  /* Videos: Abspielknopf etwas höher und kleiner, die Zeile „Beim Klick lädt YouTube“ läuft nicht mehr hindurch */
  .video__start .spielen{top:42%}
  .video__start small{font-size:calc(14px*var(--k));padding:calc(18px*var(--k)) calc(12px*var(--k)) calc(7px*var(--k))}
  .film .video__start .spielen{width:calc(60px*var(--k));height:calc(60px*var(--k));top:40%}
  /* Fuß: Spalten mit Luft zum rechten Rand */
  .fuss nav{font-size:calc(18px*var(--k))}
  .fuss__grid{column-gap:calc(16px*var(--k))}
  /* Rechner: Der Umschalter steht hier in zwei Zeilen, darum als Kasten mit runden Ecken statt als Pille */
  .rk-umschalter--ansicht{border-radius:calc(18px*var(--k))}
  .rk-umschalter--ansicht button{border-radius:calc(14px*var(--k))}
  /* Wertheim-Brief: schräg gestellt bleibt er im Seitenrand */
  .bericht__blatt{max-width:min(calc(380px*var(--k)),92%)}
  /* Beweis: Der lange Ergebnissatz links und nicht fett, so ist er lesbar */
  .duell__fazit{text-align:left;font-weight:500}
  /* Technische Daten: Datenkarten untereinander statt zwei schmale Spalten („EINSATZWECHS / EL“) */
  .datenkarten{grid-template-columns:minmax(0,1fr)}
  /* Vergleichstabelle: Die 20er-Spalte ist angeschnitten zu sehen, so merkt man, dass man seitlich wischen kann */
  .vergleich table{min-width:calc(600px*var(--k))}
  /* Größenfinder: Auch das schmale 10er-Feld ist gut zu treffen */
  .finder__zonen button{min-width:calc(48px*var(--k))}
  /* Montage: Einbau-Kärtchen untereinander und oben bündig, Umschalter über die ganze Breite */
  .einbau__fakten{grid-template-columns:minmax(0,1fr)}
  .einbau__fakten li{align-content:start}
  .reiter{display:flex;width:100%}
  .reiter button{flex:1 0 auto}
  /* Praxistest, Blattkarten: zwei je Reihe, die dritte mittig darunter, damit die Titel ins Feld passen */
  .blattkarten{grid-template-columns:repeat(2,minmax(0,1fr))}
  .blattkarte:nth-child(3){grid-column:1/-1;justify-self:center;width:calc(50% - calc(7px*var(--k)))}
  /* Galerien einspaltig: Collagen und Fotos in voller Breite statt klein nebeneinander */
  .galerie,.galerie--2{grid-template-columns:minmax(0,1fr)}
  .galerie>.foto,.galerie--2>.foto{grid-column:auto!important}
  .galerie>.foto:not([style*="aspect-ratio"]){aspect-ratio:4/3!important}
  /* Karten-Oberzeilen mit langen Namen etwas enger gesperrt */
  .referenz .kicker{letter-spacing:.03em}
  /* Kontakt: Kästchen der Einwilligung größer */
  .feld--haken{grid-template-columns:calc(24px*var(--k)) minmax(0,1fr);gap:calc(12px*var(--k))}
  .feld--haken input{width:calc(24px*var(--k));height:calc(24px*var(--k))}
  /* Weniger Leerraum zwischen den Abschnitten */
  .sek--klein{padding-block:calc(44px*var(--k))}
}

/* Porträts (Über uns): Der Name steht oben im Bild, unten am Rednerpult steht der Leitspruch „TRABOLD – filtern statt Öl wechseln“ */
.menschen .foto__txt{top:0;bottom:auto;padding:calc(10px*var(--k)) calc(14px*var(--k)) calc(26px*var(--k));background:linear-gradient(rgba(27,19,12,.82),transparent)}
/* Chronik 2005: Vom Fendt-Foto nur der obere Teil mit den vier Filtern, ohne die eingebrannte Beschriftung „Montagebeispiel“ unter dem Bildtext */
@media (max-width:1699px){.st__neben img[src*="fendt-schweizer"]{object-position:50% 22%}}
/* Montage, Kopfbild: Das Motorschema hat einen weißen Grund. Statt als weißer Kasten im cremefarbenen Feld zu kleben, geht das Weiß im Creme auf */
@media (max-width:1699px){.kopf__bild .foto img[src*="motor-schema"]{mix-blend-mode:multiply;filter:none;padding:2%}}

/* Freigestellte Archivbilder: Die weißen Ränder der Collagen und Produktfotos sind durchsichtig.
   Statt eines weißen Kastens liegt ein weicher Schatten unter dem Bild, der seiner Form folgt. */
.foto img[src*="-gesamt"]{object-fit:contain;background:none;padding:3% 3% 6%;filter:sepia(.18) saturate(.95) drop-shadow(0 calc(16px*var(--k)) calc(16px*var(--k)) rgba(60,40,10,.28)) drop-shadow(0 calc(3px*var(--k)) calc(4px*var(--k)) rgba(60,40,10,.2))}
.foto:hover img[src*="-gesamt"]{filter:drop-shadow(0 calc(22px*var(--k)) calc(22px*var(--k)) rgba(60,40,10,.32)) drop-shadow(0 calc(4px*var(--k)) calc(5px*var(--k)) rgba(60,40,10,.22))}
.foto:has(img[src*="-gesamt"]){background:none;overflow:visible}
.foto:has(img[src*="-gesamt"])::after{display:none}
/* Logos und Preise aus dem Archiv als Foto: ganz zeigen, auf hellem Grund */
.foto img[src*="/beleg/"]{object-fit:contain;padding:6%;filter:drop-shadow(0 calc(10px*var(--k)) calc(12px*var(--k)) rgba(60,40,10,.22))}
.foto:has(img[src*="/beleg/"]){background:linear-gradient(165deg,#fffdf8,#f3e8d4)}

/* Vergrößerte Ansicht: Fotos ohne weißes Blatt, mit weichem Schatten. Dokumente bleiben auf weißem Papier. */
.beleg__stage--foto{background:none;box-shadow:none}
.beleg__stage--foto img{filter:drop-shadow(0 calc(26px*var(--k)) calc(28px*var(--k)) rgba(60,40,10,.34)) drop-shadow(0 calc(5px*var(--k)) calc(7px*var(--k)) rgba(60,40,10,.24))}

/* ===== Karussell (Fotoband) ===== */
/* Bildtitel als kleines Schild in Holz und Gold, im Karussell und unter freigestellten Collagen */
.fotoband .foto__txt,.foto:has(img[src*="-gesamt"]) .foto__txt{left:50%;right:auto;bottom:clamp(calc(10px*var(--k)),calc(1vw*var(--k)),calc(16px*var(--k)));width:max-content;max-width:calc(100% - calc(28px*var(--k)));translate:-50% 0;padding:calc(7px*var(--k)) calc(16px*var(--k)) calc(8px*var(--k));border-radius:calc(999px*var(--k));text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:700 clamp(calc(15px*var(--k)),calc(1.05vw*var(--k)),calc(19px*var(--k)))/1.2 var(--serif);letter-spacing:.04em;color:#f6dfa0;background:linear-gradient(165deg,rgba(84,57,31,.94),rgba(42,27,14,.94));box-shadow:0 0 0 1px rgba(241,218,156,.38),0 calc(10px*var(--k)) calc(20px*var(--k)) calc(-10px*var(--k)) rgba(30,15,5,.75),inset 0 1px 0 rgba(255,236,190,.18);transition:opacity .3s,translate .45s var(--spring)}
/* Unter freigestellten Collagen darf das Schild zweizeilig werden, statt den Namen mit „…“ abzuschneiden („Reisebus Renault I…“) */
.foto:has(img[src*="-gesamt"]) .foto__txt{white-space:normal;text-wrap:balance;overflow:visible;text-overflow:clip}
.fotoband .foto:hover .foto__txt{opacity:0;translate:-50% calc(8px*var(--k))}
.foto:has(img[src*="-gesamt"]) .foto__txt{position:absolute}
/* Angaben beim Darüberfahren: ruhiger Verlauf, goldene Kopfzeile mit Linie */
.fotoband .foto__info{border-radius:var(--r-s);background:linear-gradient(180deg,rgba(20,13,7,0) 10%,rgba(20,13,7,.7) 48%,rgba(20,13,7,.95))}
.fotoband .foto__info small{display:flex;align-items:center;gap:calc(8px*var(--k))}
.fotoband .foto__info small::before{content:"";width:calc(22px*var(--k));height:1px;background:linear-gradient(90deg,var(--gold),transparent)}
.fotoband .foto__info b{color:#fff3d6;text-shadow:0 2px calc(10px*var(--k)) rgba(0,0,0,.45)}
/* Einblenden beim ersten Hineinscrollen: Karte für Karte, weich aus der Unschärfe */
.fotoband.kommt .foto{opacity:0;translate:0 calc(26px*var(--k));scale:.96;filter:blur(calc(6px*var(--k)))}
.fotoband.kommt.ist-da .foto{opacity:1;translate:none;scale:1;filter:none;transition:opacity .9s var(--ease) var(--ein,0s),translate 1.1s var(--spring) var(--ein,0s),scale 1.1s var(--spring) var(--ein,0s),filter .9s var(--ease) var(--ein,0s)}
/* Nach dem Einblenden gelten wieder die schnellen Übergänge beim Darüberfahren */
.fotoband.kommt.ist-da .foto:hover{transition:opacity .5s,transform .7s var(--spring),box-shadow .5s}
/* Freigestellte Karten haben keinen Rahmen, beim Darüberfahren also auch keinen goldenen Ring */
.fotoband .foto:has(img[src*="-gesamt"]):hover{box-shadow:none}
@media (prefers-reduced-motion:reduce){
  .fotoband.kommt .foto{opacity:1;translate:none;scale:1;filter:none}
}

/* Reibverschleißwaage aus Fotos: Beschriftung lesbar auf Öl und Metall */
.waage text{paint-order:stroke;stroke:rgba(30,18,8,.55);stroke-width:calc(3px*var(--k));stroke-linejoin:round}
.waage image{image-rendering:auto}