@font-face{font-family:"Alfa Slab One";src:url(/assets/fonts/alfa-slab-one-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Barlow";src:url(/assets/fonts/barlow-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Barlow";src:url(/assets/fonts/barlow-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Barlow";src:url(/assets/fonts/barlow-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(/assets/fonts/barlow-condensed-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(/assets/fonts/barlow-condensed-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(/assets/fonts/barlow-condensed-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --gruen:#103B2D;--tief:#0B2B21;--nacht:#07201A;--emaille:#F5F1E6;--emaille-2:#EAE3CF;--tinte:#14241D;--grau:#3C4A43;
  --rot:#B4122B;--rot-tief:#8F0E22;--messing:#C9A24B;--messing-hell:#E3C37A;--messing-tief:#7A5E1C;--tafel:#141A17;--blau:#1F3F8F;--hell:#DDE5DE;
  --gut:clamp(16px,3vw,40px);--max:1280px;
  --slab:"Alfa Slab One",Rockwell,Georgia,serif;--cond:"Barlow Condensed","Arial Narrow",sans-serif;--text:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  --streifen:repeating-linear-gradient(135deg,var(--rot) 0 22px,var(--emaille) 22px 44px,var(--blau) 44px 66px,var(--emaille) 66px 88px);
  --korn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:20px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--gruen) var(--korn);color:var(--emaille);font:400 18px/1.55 var(--text);overflow-x:clip;-webkit-font-smoothing:antialiased}
a{color:var(--messing-hell);text-underline-offset:.16em}
a:hover{color:var(--emaille)}
:focus-visible{outline:3px solid var(--messing-hell);outline-offset:3px;border-radius:3px}
.hell :focus-visible,.plakette :focus-visible,.schild :focus-visible{outline-color:var(--rot)}
img,svg{display:block;max-width:100%}
h1,h2,h3{text-wrap:balance}
p{margin:0 0 1em}
.innen{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
.innen.breit{max-width:1520px}
.block{padding-block:clamp(52px,6.5vw,96px)}
.tief{background:var(--tief) var(--korn)}
.hell{background:var(--emaille);color:var(--tinte)}
.hell a{color:var(--rot-tief)}
.hell a:hover{color:var(--tinte)}
.mitte{text-align:center}
.nur-leser{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Überschriften im Stil der Schildermaler: Slab mit hartem Schlagschatten */
.slab{font-family:var(--slab);font-weight:400;line-height:1.04;letter-spacing:-.003em}
.titel{margin:0 0 .35em;font-family:var(--slab);font-weight:400;font-size:clamp(34px,4.2vw,58px);line-height:1.05;text-shadow:.045em .045em 0 var(--nacht)}
.hell .titel{text-shadow:none}
.dach{display:block;font:600 clamp(18px,1.8vw,23px)/1.2 var(--cond);letter-spacing:.09em;text-transform:uppercase;color:var(--messing-hell);margin:0 0 14px}
.hell .dach{color:var(--rot-tief)}
.vorspann{font-size:clamp(19px,1.7vw,22px);line-height:1.45;color:var(--hell);max-width:38em;margin:0 0 clamp(26px,3vw,40px)}
.hell .vorspann{color:var(--grau)}

/* Barber-Streifen, Absender, Kopf */
.band{height:20px;background:var(--streifen)}
.absender{background:var(--nacht);padding:9px var(--gut);text-align:center;font-size:15px;line-height:1.4;color:var(--hell)}
.absender a{white-space:nowrap}
.kopf{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 28px;padding-block:16px}
.marke{display:inline-flex;align-items:center;gap:11px;min-height:44px;font-family:var(--slab);font-size:30px;line-height:1;color:var(--emaille);text-decoration:none;text-shadow:.05em .05em 0 var(--nacht)}
.marke svg{width:17px;height:38px;flex:none}
.menue{display:flex;flex-wrap:wrap;gap:0 clamp(14px,2vw,26px);font:600 19px/1 var(--cond);letter-spacing:.05em;text-transform:uppercase}
.menue a{display:flex;align-items:center;min-height:44px;color:var(--emaille);text-decoration:none;border-bottom:3px solid transparent}
.menue a:hover,.menue a[aria-current]{color:var(--messing-hell);border-bottom-color:var(--messing)}

/* Knöpfe */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:6px 26px;background:var(--rot);color:#fff;font:700 22px/1.1 var(--cond);letter-spacing:.04em;text-transform:uppercase;text-decoration:none;border-radius:4px;box-shadow:0 4px 0 var(--rot-tief);transition:transform .14s,box-shadow .14s,background-color .14s}
.knopf:hover{color:#fff;background:#c6152f;transform:translateY(-2px);box-shadow:0 6px 0 var(--rot-tief)}
.knopf:active{transform:translateY(3px);box-shadow:0 1px 0 var(--rot-tief)}
.hell .knopf,.plakette .knopf,.schild .knopf{color:#fff}
.knopf.leer{background:transparent;color:var(--messing-hell);box-shadow:inset 0 0 0 2px var(--messing)}
.knopf.leer:hover{background:var(--messing);color:var(--tafel);transform:none;box-shadow:inset 0 0 0 2px var(--messing)}
.hell .knopf.leer,.plakette .knopf.leer{color:var(--tinte);box-shadow:inset 0 0 0 2px var(--tinte)}
.hell .knopf.leer:hover,.plakette .knopf.leer:hover{background:var(--tinte);color:var(--emaille)}
.eigen{display:block;margin-top:9px;font-size:14px;line-height:1.3;color:var(--hell)}
.hell .eigen,.plakette .eigen,.schild .eigen{color:var(--grau)}
.knoepfe{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center}

/* Startseite: Kopfbereich */
.held{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:40px clamp(32px,5vw,72px);align-items:start;padding-block:clamp(20px,3.5vw,48px) clamp(48px,6vw,84px)}
.held h1{margin:0}
.held .gross{display:block;font-family:var(--slab);font-weight:400;font-size:clamp(39px,5.5vw,82px);line-height:1.03;text-shadow:.04em .04em 0 var(--nacht)}
.held .vorspann{margin:24px 0 30px}
.fakten{display:flex;flex-wrap:wrap;gap:6px 26px;margin:28px 0 0;padding:0;list-style:none;font:600 19px/1.25 var(--cond);letter-spacing:.03em;color:var(--messing-hell)}
.fakten li{display:flex;align-items:center;gap:9px}
.fakten li::before{content:"";width:8px;height:8px;background:var(--messing);transform:rotate(45deg);flex:none}

.aushang{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(14px,2vw,26px);align-items:start;justify-items:center}
.stange{position:relative;width:54px;display:flex;flex-direction:column;align-items:center}
.stange .knauf{width:24px;height:24px;border-radius:50%;background:radial-gradient(circle at 36% 30%,#F4DFA6,#C9A24B 52%,#7A5E1C)}
.stange .kappe{width:54px;height:16px;border-radius:5px 5px 2px 2px;background:linear-gradient(90deg,#7A5E1C,#E3C37A 34%,#C9A24B 62%,#7A5E1C);margin-top:-3px}
.stange .kappe.unten{border-radius:2px 2px 5px 5px;margin:0}
.stange .glas{position:relative;width:44px;height:clamp(250px,25vw,350px);overflow:hidden;background:var(--emaille)}
.stange .glas i{position:absolute;inset:0 0 -126px;background:var(--streifen);animation:drehen 6.5s linear infinite}
.stange .glas::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,32,26,.6),rgba(255,255,255,.36) 28%,rgba(255,255,255,.04) 56%,rgba(7,32,26,.62))}
@keyframes drehen{to{transform:translateY(-124.45px)}}
.haengend{width:100%;max-width:440px;transform-origin:50% 0;animation:einschwingen 2.1s cubic-bezier(.3,.7,.4,1) both}
@keyframes einschwingen{0%{transform:rotate(-5deg)}26%{transform:rotate(2.1deg)}52%{transform:rotate(-1.2deg)}76%{transform:rotate(.45deg)}100%{transform:rotate(0)}}
.ketten{display:flex;justify-content:space-between;padding:0 19%}
.ketten span{width:3px;height:clamp(30px,4vw,54px);background:linear-gradient(90deg,#7A5E1C,#E3C37A,#7A5E1C)}
.schild{position:relative;display:block;background:var(--emaille);color:var(--tinte);border-radius:14px;padding:12px;box-shadow:0 26px 40px -20px rgba(0,0,0,.72),inset 0 1px 0 #fff,inset 0 -3px 0 #D9D1B9;text-decoration:none;transform:rotate(-1.4deg);transition:transform .25s}
a.schild:hover{color:var(--tinte);transform:rotate(-.4deg) translateY(-3px)}
.schild-innen{border:3px solid var(--rot);border-radius:8px;outline:1px solid var(--rot);outline-offset:-9px;padding:clamp(22px,2.5vw,32px) 18px;text-align:center}
.schild .ober{font:700 18px/1.2 var(--cond);letter-spacing:.14em;text-transform:uppercase;color:var(--rot-tief)}
.schild .name{font-family:var(--slab);font-size:clamp(44px,5vw,66px);line-height:1.05;margin:10px 0 8px}
.schild .zahl{font:600 22px/1.25 var(--cond)}
.schild .auf{display:inline-block;margin-top:14px;font:700 20px/1.1 var(--cond);letter-spacing:.05em;text-transform:uppercase;color:var(--rot-tief);border-bottom:3px solid var(--rot)}
.schraube{position:absolute;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#EBD08F,#A98534 60%,#6d5317)}
.schraube::after{content:"";position:absolute;left:1px;right:1px;top:4px;height:2px;background:rgba(40,30,8,.55);transform:rotate(38deg)}
.schraube.a{top:5px;left:5px}.schraube.b{top:5px;right:5px}.schraube.c{bottom:5px;left:5px}.schraube.d{bottom:5px;right:5px}

/* Preistafel */
.tafel-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:40px clamp(32px,5vw,72px);align-items:start}
.regler-spalte{position:sticky;top:20px}
.regler{display:grid;gap:14px}
.regler label{display:block}
.regler-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-weight:600}
.regler output{font-family:var(--slab);font-size:27px;line-height:1.2;color:var(--messing-hell);white-space:nowrap}
.hell .regler output{color:var(--rot-tief)}
input[type=range]{-webkit-appearance:none;appearance:none;display:block;width:100%;height:44px;margin:0;background:transparent;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:4px;background:linear-gradient(90deg,#7A5E1C,#C9A24B);box-shadow:inset 0 1px 2px rgba(0,0,0,.5)}
input[type=range]::-moz-range-track{height:8px;border-radius:4px;background:linear-gradient(90deg,#7A5E1C,#C9A24B);box-shadow:inset 0 1px 2px rgba(0,0,0,.5)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;margin-top:-11px;border-radius:50%;border:3px solid var(--tafel);background:radial-gradient(circle at 36% 30%,#F4DFA6,#C9A24B 60%,#7A5E1C);box-shadow:0 2px 5px rgba(0,0,0,.55)}
input[type=range]::-moz-range-thumb{width:26px;height:26px;border-radius:50%;border:3px solid var(--tafel);background:radial-gradient(circle at 36% 30%,#F4DFA6,#C9A24B 60%,#7A5E1C);box-shadow:0 2px 5px rgba(0,0,0,.55)}
.brett{position:relative;background:var(--tafel);border:6px solid var(--messing);border-radius:6px;padding:clamp(20px,3vw,38px);box-shadow:inset 0 0 0 2px #000,inset 0 0 44px rgba(0,0,0,.65),0 22px 40px -22px rgba(0,0,0,.8);color:var(--emaille)}
.brett .schraube.a{top:-3px;left:-3px}.brett .schraube.b{top:-3px;right:-3px}.brett .schraube.c{bottom:-3px;left:-3px}.brett .schraube.d{bottom:-3px;right:-3px}
.brett-kopf{font:700 20px/1.2 var(--cond);letter-spacing:.12em;text-transform:uppercase;text-align:center;color:var(--messing-hell);margin:0 0 16px}
.zeilen{list-style:none;margin:0;padding:0}
.zeile{display:flex;align-items:baseline;gap:10px;padding:8px 0}
.zeile .wer{min-width:0}
.zeile .wer a,.zeile .wer span.n{font-family:var(--slab);font-size:clamp(19px,2vw,26px);line-height:1.15;color:var(--emaille);text-decoration:none}
.zeile .wer a:hover{color:var(--messing-hell);text-decoration:underline}
.zeile small{display:block;font:500 15px/1.25 var(--cond);letter-spacing:.02em;color:#A9B5AD}
.zeile .linie{flex:1;min-width:18px;border-bottom:3px dotted #66726A;transform:translateY(-6px)}
.zeile .wert{font-family:var(--slab);font-size:clamp(19px,2vw,26px);line-height:1.15;white-space:nowrap;font-variant-numeric:tabular-nums}
.zeile.ich .wer a,.zeile.ich .wer span.n,.zeile.ich .wert{color:var(--messing-hell)}
.zeile.ich .linie{border-color:var(--messing-hell)}
.schalter{display:flex;align-items:flex-start;gap:10px;margin-top:16px;padding:10px 12px;border:2px solid var(--messing);border-radius:4px;font-weight:600;line-height:1.3;cursor:pointer}
.schalter input{flex:none;width:22px;height:22px;margin:0;accent-color:var(--messing);cursor:pointer}
.schalter input:focus-visible{outline:3px solid var(--messing-hell);outline-offset:2px}
.fazit{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--messing);font-size:18px;line-height:1.45}
.gruender{margin:14px 0 0;padding-top:14px;border-top:1px solid var(--messing);font-size:15.5px;line-height:1.45}
.gruender b{color:var(--messing-hell)}
.brett .knoepfe{margin-top:18px}
.hell .brett .eigen,.brett .eigen{color:var(--hell)}
.klein{font-size:15.5px;line-height:1.45;color:var(--hell)}
.hell .klein{color:var(--grau)}

/* Rangliste */
.plaketten{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:16px;margin:0;padding:0;list-style:none}
.plakette{position:relative;display:flex;gap:18px;align-items:flex-start;background:var(--emaille);color:var(--tinte);border-radius:10px;padding:22px 24px;box-shadow:0 14px 26px -18px rgba(0,0,0,.85),inset 0 -2px 0 #D9D1B9}
.plakette a{color:var(--rot-tief)}
.plakette a:hover{color:var(--tinte)}
.plakette .nr{font-family:var(--slab);font-size:50px;line-height:1;min-width:1.05em;color:var(--tinte)}
.plakette h3{margin:0;font-family:var(--slab);font-weight:400;font-size:25px;line-height:1.1}
.plakette h3 a{color:var(--tinte);text-decoration:none}
.plakette h3 a:hover{color:var(--rot-tief);text-decoration:underline}
.plakette .kenn{font:600 19px/1.25 var(--cond);color:var(--grau);margin:4px 0 8px}
.plakette p{margin:0;font-size:17px;line-height:1.42}
.plakette .inhalt{min-width:0;flex:1}
.plakette details{margin-top:12px;font-size:15.5px}
.plakette summary{cursor:pointer;font-weight:600;min-height:32px}
.balken{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:7px}
.balken li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 8px;line-height:1.25}
.balken b{font-weight:600}
.balken i{grid-column:1/-1;display:block;height:6px;border-radius:3px;background:#DAD2BA;overflow:hidden}
.balken i::after{content:"";display:block;height:100%;width:var(--w);background:var(--tinte)}
.plakette.eins{grid-column:1/-1;padding:clamp(24px,3vw,38px);border:3px solid var(--rot);outline:1px solid var(--rot);outline-offset:-9px;display:grid;grid-template-columns:auto minmax(0,1.3fr) minmax(0,1fr);gap:18px clamp(20px,3vw,44px)}
.plakette.eins .nr{font-size:clamp(70px,7vw,104px);color:var(--rot)}
.plakette.eins h3{font-size:clamp(34px,3.6vw,50px)}
.plakette.eins .kenn{font-size:23px}
.plakette.eins p{font-size:18px}
.plakette.eins .knoepfe{margin-top:18px}
.plakette.eins .balken{margin:0}
.plakette.eins .balken i::after{background:var(--rot)}
.hinweis-text{max-width:46em;margin:24px 0 0;color:var(--hell)}

/* Vergleichstabelle */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.chip{min-height:44px;padding:0 16px;background:transparent;color:var(--tinte);border:2px solid var(--tinte);border-radius:22px;font:600 18px/1 var(--cond);letter-spacing:.03em;cursor:pointer}
.chip[aria-pressed=true]{background:var(--tinte);color:var(--emaille)}
.tabelle-rand{overflow-x:auto;background:#fff;border:2px solid var(--tinte);border-radius:8px;-webkit-overflow-scrolling:touch}
table.vergleich{border-collapse:separate;border-spacing:0;width:100%;min-width:1340px;font-size:15.5px;line-height:1.35;background:#fff}
.vergleich th,.vergleich td{padding:11px 11px;text-align:left;vertical-align:top;border-bottom:1px solid #D9D1B9}
.vergleich thead th{position:sticky;top:0;background:var(--tinte);color:var(--emaille);font:600 17px/1.15 var(--cond);letter-spacing:.03em;border-bottom:0;vertical-align:bottom}
.vergleich tbody th{position:sticky;left:0;z-index:1;background:#FBF8EF;font-weight:600;min-width:128px;border-right:1px solid #D9D1B9}
.vergleich tbody th a{font-family:var(--slab);font-weight:400;font-size:18px;color:var(--tinte);text-decoration:none}
.vergleich tbody th a:hover{color:var(--rot-tief);text-decoration:underline}
.vergleich tr.ich th{background:#F4E7C2;box-shadow:inset 5px 0 0 var(--rot)}
.vergleich tr.ich td{background:#FBF4DF}
.vergleich tbody tr:last-child>*{border-bottom:0}
.vergleich tr[hidden]{display:none}
.m{display:inline-flex;vertical-align:-.16em;width:1.06em;height:1.06em}
.m svg{width:100%;height:100%}
.m.ja{color:#116B3E}.m.nein{color:var(--rot)}.m.na{color:#7b8780}
.ohne-treffer{margin:14px 0 0;font-weight:600}
.wisch{display:none;margin:0 0 8px}
@media (max-width:1280px){.wisch{display:block}}

sup.q{font:600 .7em/0 var(--cond);margin-left:1px}
sup.q a{padding:0 1px}
.hell sup.q a,.plakette sup.q a{color:var(--grau)}

/* Themenliste */
.themen{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:4px 40px;margin:0;padding:0;list-style:none}
.themen a{display:block;height:100%;padding:16px 0 18px;border-top:3px solid var(--tinte);color:var(--tinte);text-decoration:none}
.themen b{display:block;font:700 26px/1.14 var(--cond)}
.themen span{display:block;margin-top:4px;font-size:16.5px;line-height:1.38;color:var(--grau)}
.themen a:hover b{color:var(--rot-tief);text-decoration:underline;text-decoration-thickness:2px}

/* Häufige Fragen */
.fragen{max-width:52em}
.fragen details{border-top:2px solid var(--messing)}
.fragen details:last-child{border-bottom:2px solid var(--messing)}
.fragen summary{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:60px;padding:12px 0;cursor:pointer;font:600 22px/1.2 var(--cond);list-style:none}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary::after{content:"+";font-family:var(--slab);font-size:28px;line-height:1;color:var(--messing-hell);flex:none}
.hell .fragen summary::after{color:var(--rot)}
.fragen details[open] summary::after{content:"–"}
.fragen .antwort{padding:0 0 18px;max-width:46em}
.fragen .antwort p:last-child{margin:0}

/* Inhaltsseiten */
.krumen{font:500 17px/1.3 var(--cond);letter-spacing:.02em;margin:0 0 18px;color:var(--hell)}
.krumen ol{display:flex;flex-wrap:wrap;gap:0 8px;list-style:none;margin:0;padding:0}
.krumen li+li::before{content:"›";margin-right:8px;color:var(--messing)}
.krumen a{display:inline-block;padding-block:6px}
.seiten-kopf{padding-block:clamp(14px,2.5vw,30px) clamp(38px,5vw,64px)}
.seiten-kopf h1{margin:0;font-family:var(--slab);font-weight:400;font-size:clamp(35px,4.9vw,70px);line-height:1.05;text-shadow:.04em .04em 0 var(--nacht);max-width:18em}
.seiten-kopf .vorspann{margin:20px 0 0}
.aufbau{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,340px);gap:44px clamp(32px,5vw,72px);align-items:start;padding-block:clamp(36px,5vw,68px)}
.fliess{min-width:0;max-width:46em}
.fliess h2{font-family:var(--slab);font-weight:400;font-size:clamp(26px,2.9vw,38px);line-height:1.1;margin:1.7em 0 .5em;scroll-margin-top:20px}
.fliess h2:first-child{margin-top:0}
.fliess h3{font:700 25px/1.18 var(--cond);margin:1.4em 0 .35em}
.fliess ul,.fliess ol{padding-left:1.25em;margin:0 0 1.1em}
.fliess li{margin-bottom:.4em}
.kurz{position:relative;background:#fff;border:3px solid var(--tinte);border-radius:8px;padding:20px 24px;margin:0 0 30px}
.kurz .dach{margin:0 0 8px;font-size:19px}
.kurz p:last-child{margin:0}
.seitenleiste{position:sticky;top:20px;display:grid;gap:18px}
.seitenleiste .brett{padding:22px}
.seitenleiste .brett-kopf{font-size:18px;margin-bottom:10px}
.seitenleiste h2{margin:0 0 8px;font-family:var(--slab);font-weight:400;font-size:27px;line-height:1.1}
.seitenleiste p{font-size:17px;line-height:1.42}
.preisliste{list-style:none;margin:0 0 8px;padding:0}
.preisliste .zeile{padding:6px 0}
.preisliste .zeile .wer span.n,.preisliste .zeile .wert{font-size:clamp(17px,1.5vw,20px)}
.fliess .brett{margin:0 0 24px}
.fliess .brett .preisliste .zeile .wer span.n,.fliess .brett .preisliste .zeile .wert{font-size:clamp(18px,1.9vw,23px)}
.zwei{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:16px;margin:0 0 26px}
.karte{background:#fff;border:2px solid var(--tinte);border-radius:8px;padding:18px 20px}
.karte h3{margin:0 0 8px;font:700 23px/1.15 var(--cond)}
.karte ul{margin:0;padding-left:1.1em}
.karte li:last-child{margin-bottom:0}
.karte.gut{border-top:7px solid #116B3E}.karte.schwach{border-top:7px solid var(--rot)}
.datentabelle{overflow-x:auto;margin:0 0 26px;border:2px solid var(--tinte);border-radius:8px;background:#fff}
.datentabelle table{border-collapse:collapse;width:100%;min-width:520px;font-size:16.5px;line-height:1.35}
.datentabelle th,.datentabelle td{padding:10px 13px;text-align:left;vertical-align:top;border-bottom:1px solid #D9D1B9}
.datentabelle thead th{background:var(--tinte);color:var(--emaille);font:600 17px/1.15 var(--cond);letter-spacing:.03em}
.datentabelle tbody tr:last-child>*{border-bottom:0}
.datentabelle tbody th{font-weight:600}
.schritte{list-style:none;counter-reset:s;padding:0!important}
.schritte li{position:relative;counter-increment:s;padding:0 0 18px 60px;margin:0}
.schritte li::before{content:counter(s);position:absolute;left:0;top:-3px;width:44px;height:44px;display:grid;place-items:center;background:var(--tinte);color:var(--emaille);border-radius:50%;font:400 21px/1 var(--slab)}
.schritte b{display:block;font-size:19px}
.zuletzt{margin-top:26px;font-size:15.5px;color:var(--grau)}

.werbung{position:relative;background:var(--tief) var(--korn);color:var(--emaille)}
.werbung-innen{display:grid;grid-template-columns:minmax(0,1.5fr) auto;gap:22px 48px;align-items:center;padding-block:clamp(40px,5vw,64px)}
.werbung h2{margin:0 0 10px;font-family:var(--slab);font-weight:400;font-size:clamp(30px,3.5vw,48px);line-height:1.08;text-shadow:.045em .045em 0 var(--nacht)}
.werbung p{margin:0;max-width:40em;color:var(--hell)}

/* Methode */
.gewichte{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:10px}
.gewichte li{display:grid;grid-template-columns:62px minmax(0,1fr);gap:0 16px;padding:14px 0;border-top:2px solid var(--tinte)}
.gewichte b.g{grid-row:span 2;font:400 34px/1 var(--slab);color:var(--rot-tief)}
.gewichte b.n{font:700 23px/1.2 var(--cond)}
.gewichte span{font-size:17px;line-height:1.42;color:var(--grau)}
.punkte-tabelle table,.datentabelle .punkte-tabelle{min-width:0}
.punkte-tabelle td{white-space:nowrap}
.punkte-tabelle td{text-align:right;font-variant-numeric:tabular-nums}

/* Quellen und Fuß */
.quellen{background:var(--emaille-2);color:var(--tinte)}
.quellen details{padding-block:22px}
.quellen summary{cursor:pointer;min-height:44px;display:flex;align-items:center;gap:10px;font:700 24px/1.1 var(--cond)}
.quellen ol{margin:12px 0 0;padding-left:1.6em;font-size:16px;line-height:1.4;columns:2 400px;column-gap:40px}
.quellen li{margin-bottom:8px;break-inside:avoid;overflow-wrap:anywhere}
.quellen li:target{background:#F4E7C2}
.quellen a{color:var(--rot-tief)}
.fuss{background:var(--nacht) var(--korn);color:var(--hell);font-size:16.5px;line-height:1.45;padding-block:clamp(34px,4vw,52px)}
.fuss-raster{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:28px clamp(24px,4vw,56px)}
.fuss h2{margin:0 0 8px;font:700 19px/1.2 var(--cond);letter-spacing:.08em;text-transform:uppercase;color:var(--messing-hell)}
.fuss ul{list-style:none;margin:0;padding:0}
.fuss li a{display:inline-flex;align-items:center;min-height:32px;color:var(--emaille);text-decoration:none}
.fuss li a:hover{color:var(--messing-hell);text-decoration:underline}
.fuss p{margin:0 0 10px}
.fuss .marke{font-size:26px;margin-bottom:6px}
.stand{margin:26px 0 0;padding-top:16px;border-top:1px solid #2B4A3E;font-size:15px}

@media (max-width:980px){
  .held{grid-template-columns:minmax(0,1fr)}
  .aushang{max-width:540px;width:100%;margin-inline:auto}
  .tafel-raster,.aufbau{grid-template-columns:minmax(0,1fr)}
  .regler-spalte,.seitenleiste{position:static}
  .plakette.eins{grid-template-columns:auto minmax(0,1fr)}
  .plakette.eins .spalte-balken{grid-column:1/-1}
  .fuss-raster{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fuss-raster>div:first-child{grid-column:1/-1}
  .werbung-innen{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  body{font-size:17px}
  .band{height:14px}
  .aushang{grid-template-columns:minmax(0,1fr)}
  .stange{display:none}
  .marke{font-size:26px}
  .menue{font-size:17px;gap:0 12px;letter-spacing:.03em}
  .plakette{padding:18px;gap:13px}
  .plakette .nr{font-size:40px}
  .plakette.eins{grid-template-columns:minmax(0,1fr)}
  .plakette.eins .nr{font-size:64px}
  .zeile{gap:7px}
  .vergleich tbody th{min-width:0;padding-inline:8px}
  .vergleich tbody th a{font-size:15.5px}
  .schild{transform:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .stange .glas i,.haengend{animation:none}
  .knopf,.schild{transition:none}
}
@media print{
  .band,.stange,.chips,.regler-spalte{display:none}
  body{background:#fff;color:#000}
}