/* Hallmark · v2.0.0 · redesign full · theme: kiln (ember), by the brief · genre atmospheric · shape: Workbench, Stage hero · nav: edge-aligned wordmark · footer: mast · signature: the reading (53–55 °C) on the pan photograph · copy: verbatim */
/* critique: dark bench, heat only where something is hot; the calculator is the workbench, figures in Boska */
/* waive 49a: Einträge im Inhaltsverzeichnis sind Überschriften im Wortlaut und dürfen umbrechen · waive 58,77: Ratgeber-Seiten mit SEO-Text, Länge vom Auftraggeber vorgegeben · waive 48 in SVG-Daten: Garstufenfarben sind Messwerte aus garstufen.json */
@font-face{font-family:"Boska";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/boska.woff2) format("woff2")}
@font-face{font-family:"Geist";font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/geist.woff2) format("woff2")}
:root{
  --color-paper:oklch(13% .012 40); --color-paper-2:oklch(17.5% .016 40); --color-paper-3:oklch(22% .018 40);
  --color-ink:oklch(94% .02 80); --color-ink-2:oklch(84% .025 70); --color-muted:oklch(72% .03 60);
  --color-rule:oklch(96% .01 80 / .12); --color-rule-2:oklch(96% .01 80 / .22);
  --color-accent:oklch(70% .2 45); --color-accent-2:oklch(76% .19 50); --color-accent-ink:oklch(14% .02 40); --color-focus:oklch(76% .19 56); --color-button:oklch(52% .19 38); --color-button-2:oklch(57% .2 38); --color-button-ink:oklch(97% .015 85);
  --color-scrim:oklch(13% .012 40 / .72); --color-shade:oklch(8% .01 40 / .5); --color-crust:oklch(30% .05 45);
  --heat-2:oklch(40% .16 27); --heat-4:oklch(76% .19 56); --heat-6:oklch(98% .04 95);
  --font-display:"Boska","Iowan Old Style",Georgia,serif; --font-body:"Geist",ui-sans-serif,system-ui,sans-serif;
  --radius-card:28px; --radius-well:16px; --radius-pill:999px;
  --shadow-card:0 50px 90px -30px var(--color-shade);
  --space-xs:8px; --space-sm:12px; --space-md:16px; --space-lg:24px; --space-xl:40px; --space-2xl:64px; --section-gap:clamp(72px,9vw,128px);
  --gutter:clamp(16px,4vw,56px); --wide:1360px; --read:680px;
  --text-display:clamp(2.5rem,1.4rem + 4.4vw,5rem); --text-section:clamp(1.875rem,1.3rem + 2.2vw,3.25rem); --text-title:clamp(1.375rem,1.2rem + .7vw,1.75rem);
  --text-body:1.0625rem; --text-small:.9375rem; --text-label:.875rem;
  --ease-out:cubic-bezier(.16,1,.3,1); --dur-short:.18s; --dur-long:.5s;
}
*{box-sizing:border-box}
html,body{overflow-x:clip}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px;background:var(--color-paper)}
body{margin:0;background:var(--color-paper);color:var(--color-ink);font:400 var(--text-body)/1.6 var(--font-body);font-variant-numeric:tabular-nums}
::selection{background:color-mix(in oklab,var(--color-accent) 35%,transparent)}
:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px;border-radius:4px}
a{color:var(--color-ink);text-underline-offset:.2em;text-decoration-thickness:1px;text-decoration-color:var(--color-accent);transition:text-decoration-color var(--dur-short) var(--ease-out)}
a:hover{text-decoration-color:var(--color-ink)}
img,svg{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:var(--font-display);font-weight:500;line-height:1.06;letter-spacing:-.02em;text-wrap:balance;margin:0;overflow-wrap:break-word;min-width:0}
h1{font-size:var(--text-display)}
h2{font-size:var(--text-section);margin-top:var(--section-gap);text-align:center}
h3{font-size:var(--text-title);margin-top:var(--space-xl);line-height:1.15}
p{margin:var(--space-md) 0 0;text-wrap:pretty}
strong{font-weight:600}
.rahmen{max-width:calc(var(--wide) + 2*var(--gutter));margin:0 auto;padding:0 var(--gutter)}
.sprung{position:absolute;top:-80px;left:16px;z-index:50;background:var(--color-ink);color:var(--color-accent-ink);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-pill)}
.sprung:focus{top:12px}

/* Kopfleiste */
.leiste{background:var(--color-paper);border-bottom:1px solid var(--color-rule);position:sticky;top:0;z-index:30}
.leiste .rahmen{display:flex;align-items:center;justify-content:space-between;gap:var(--space-lg);min-height:68px}
.marke{font-family:var(--font-display);font-weight:500;font-size:1.5rem;letter-spacing:-.02em;text-decoration:none;display:flex;align-items:center;gap:var(--space-sm);white-space:nowrap}
.marke svg{width:30px;height:20px}
.marke small{font-family:var(--font-body);font-weight:400;font-size:var(--text-label);letter-spacing:0;color:var(--color-muted);padding-left:var(--space-md);border-left:1px solid var(--color-rule-2)}
.nav{display:flex;gap:4px;list-style:none;margin:0;padding:0;align-items:center}
.nav>li{position:relative}
.nav button,.nav>li>a{font:500 var(--text-small)/1 var(--font-body);color:var(--color-ink-2);background:none;border:0;padding:var(--space-sm) var(--space-md);cursor:pointer;text-decoration:none;display:flex;align-items:center;gap:var(--space-xs);border-radius:var(--radius-pill);white-space:nowrap;transition:color var(--dur-short) var(--ease-out),background-color var(--dur-short) var(--ease-out)}
.nav button:hover,.nav>li>a:hover,.nav button[aria-expanded=true]{color:var(--color-ink);background:var(--color-paper-2)}
.nav button:active,.nav>li>a:active{background:var(--color-paper-3)}
.nav>li:last-child>a{box-shadow:inset 0 0 0 1px var(--color-rule-2);color:var(--color-ink)}
.nav button svg{width:10px;height:6px;transition:transform var(--dur-short) var(--ease-out)}
.nav button[aria-expanded=true] svg{transform:rotate(180deg)}
.klappe{position:absolute;top:100%;right:0;min-width:280px;background:var(--color-paper-2);border:1px solid var(--color-rule);list-style:none;margin:var(--space-xs) 0 0;padding:var(--space-xs);border-radius:var(--radius-well);box-shadow:var(--shadow-card);display:none}
.nav li:first-child .klappe{right:auto;left:0}
.klappe.offen{display:block}
.klappe a{display:block;padding:var(--space-sm);text-decoration:none;font-weight:500;font-size:var(--text-small);border-radius:8px;color:var(--color-ink-2)}
.klappe a:hover,.klappe a[aria-current]{background:var(--color-paper-3);color:var(--color-ink)}
.menue-knopf{display:none;font:500 var(--text-small)/1 var(--font-body);color:var(--color-ink);background:none;box-shadow:inset 0 0 0 1px var(--color-rule-2);border:0;padding:var(--space-sm) 20px;border-radius:var(--radius-pill);cursor:pointer}
@media (max-width:1180px){.marke small{display:none}}
@media (max-width:900px){
  .menue-knopf{display:block}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--color-paper);border-bottom:1px solid var(--color-rule);flex-direction:column;align-items:stretch;padding:var(--space-xs) var(--gutter) var(--space-lg);max-height:calc(100dvh - 68px);overflow:auto}
  .nav.offen{display:flex}
  .nav button{width:100%;justify-content:space-between;padding:var(--space-md) var(--space-sm);font-size:1rem}
  .nav>li>a{padding:var(--space-md) var(--space-sm);font-size:1rem;justify-content:center;margin-top:var(--space-xs)}
  .klappe{position:static;box-shadow:none;margin:0 0 var(--space-xs);min-width:0}
}

/* Knöpfe */
.knopf{display:inline-flex;align-items:center;min-height:50px;padding:0 var(--space-lg);border-radius:var(--radius-pill);background:var(--color-button);color:var(--color-button-ink);font-weight:600;font-size:1.0625rem;text-decoration:none;white-space:nowrap;margin-top:var(--space-lg);transition:background-color var(--dur-short) var(--ease-out),transform var(--dur-short) var(--ease-out)}
.knopf:hover{background:var(--color-button-2)}
.knopf:active{transform:scale(.97)}
.knopf.leise{background:none;color:var(--color-ink);font-weight:500;box-shadow:inset 0 0 0 1px var(--color-rule-2)}
.knopf.leise:hover{background:var(--color-paper-2)}

/* Startseite: Bühne */
.buehne-kopf{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(var(--space-lg),4vw,72px);align-items:center;padding-top:clamp(28px,4vw,var(--space-2xl));padding-bottom:clamp(var(--space-xl),5vw,80px);min-height:min(732px,calc(100dvh - 68px))}
.buehne-kopf h1{font-size:clamp(2.25rem,1.2rem + 3.6vw,4.25rem);line-height:1.02}
.buehne-kopf .unter{font-size:clamp(1.0625rem,1rem + .3vw,1.25rem);color:var(--color-ink-2);max-width:40ch;margin-top:var(--space-lg);line-height:1.5}
.buehne-kopf .knoepfe{display:flex;flex-wrap:wrap;gap:0 var(--space-sm);margin:0}
.schau{position:relative;margin:0}
.schau img{width:100%;aspect-ratio:7/5;object-fit:cover;border-radius:min(2vw,var(--radius-card));outline:1px solid color-mix(in oklab,var(--color-ink) 8%,transparent);outline-offset:-1px;box-shadow:var(--shadow-card)}
.ablesung{position:absolute;left:clamp(-28px,-2vw,-12px);bottom:clamp(20px,3vw,44px);width:min(300px,62%);background:var(--color-paper-2);border:1px solid var(--color-rule);border-radius:20px;padding:20px var(--space-lg);box-shadow:var(--shadow-card)}
.ablesung p{margin:0;font-size:var(--text-label);color:var(--color-muted);line-height:1.4}
.ablesung .zahl{font-family:var(--font-display);font-weight:500;font-size:clamp(2.25rem,1.6rem + 2vw,3.25rem);letter-spacing:-.03em;line-height:1;color:var(--color-ink);margin:var(--space-xs) 0 var(--space-sm)}
.ablesung .reihe{display:flex;justify-content:space-between;gap:var(--space-sm);padding-top:var(--space-sm);margin-top:var(--space-sm);border-top:1px solid var(--color-rule);color:var(--color-ink-2)}
.ablesung .reihe b{font-weight:500;color:var(--color-ink);white-space:nowrap}
@media (max-width:900px){.buehne-kopf{grid-template-columns:1fr;min-height:0}.ablesung{position:static;width:auto;margin-top:var(--space-sm);box-shadow:none}.schau img{aspect-ratio:4/3}}
.werkbank{background:var(--color-paper-2);border-top:1px solid var(--color-rule);border-bottom:1px solid var(--color-rule);padding:clamp(var(--space-xl),6vw,96px) 0}
.werkbank h2{margin-top:0}
.werkbank .unter{text-align:center;color:var(--color-ink-2);max-width:56ch;margin:var(--space-md) auto 0}
.klein{font-size:var(--text-small);color:var(--color-muted);max-width:70ch;margin:var(--space-lg) auto 0;line-height:1.5;text-align:center}

/* Artikelkopf */
.artikelkopf{padding:clamp(var(--space-xl),6vw,88px) 0 clamp(var(--space-lg),4vw,48px);text-align:center}
.artikelkopf h1{max-width:18ch;margin:0 auto}
.artikelkopf .unter{font-size:clamp(1.125rem,1rem + .5vw,1.375rem);color:var(--color-ink-2);max-width:52ch;margin:var(--space-lg) auto 0;line-height:1.45}
.pfad{font-size:var(--text-label);color:var(--color-muted);margin-bottom:var(--space-lg)}
.pfad a{color:inherit}
.pfad strong{font-weight:500;color:var(--color-ink-2)}

/* Inhalt */
main{padding-bottom:var(--section-gap)}
.inhalt p,.inhalt ul,.inhalt ol,.inhalt h3{max-width:var(--read);margin-left:auto;margin-right:auto}
.inhalt p,.inhalt li{color:var(--color-ink-2)}
.inhalt strong{color:var(--color-ink)}
.inhalt h2+*{margin-top:var(--space-xl)}
.inhalt ul,.inhalt ol{padding-left:1.3em;margin-top:var(--space-md)}
.inhalt li{margin-top:var(--space-xs)}
.verzeichnis{max-width:var(--read);margin:clamp(28px,4vw,48px) auto 0;background:var(--color-paper-2);border:1px solid var(--color-rule);border-radius:var(--radius-well);padding:var(--space-lg) 28px}
.verzeichnis strong{display:block;font-family:var(--font-display);font-weight:500;font-size:1.375rem}
.verzeichnis ol{margin:var(--space-sm) 0 0;padding-left:1.4em;columns:2;column-gap:var(--space-xl)}
.verzeichnis li{margin:0 0 var(--space-xs);break-inside:avoid;color:var(--color-muted)}
.verzeichnis a{text-decoration-color:var(--color-rule-2);color:var(--color-ink-2)}
.verzeichnis a:hover{color:var(--color-ink);text-decoration-color:var(--color-accent)}
@media (max-width:640px){.verzeichnis ol{columns:1}}

.bild{margin:clamp(28px,4vw,56px) auto 0;max-width:var(--wide)}
.inhalt .bild{max-width:1000px}
.bild img{width:100%;aspect-ratio:2/1;object-fit:cover;border-radius:min(2vw,var(--radius-card));outline:1px solid color-mix(in oklab,var(--color-ink) 8%,transparent);outline-offset:-1px}
.bild figcaption{font-size:var(--text-label);color:var(--color-muted);margin-top:var(--space-sm);text-align:center}
.grafik{margin:clamp(28px,4vw,56px) auto 0;max-width:var(--wide);background:var(--color-paper-2);border:1px solid var(--color-rule);border-radius:var(--radius-well);padding:clamp(20px,3vw,var(--space-xl))}
.inhalt .grafik{max-width:1000px}
.grafik h3{margin:0;font-size:var(--text-title);text-align:left;max-width:none}
.grafik .mass{color:var(--color-muted);margin:var(--space-xs) 0 0;max-width:none;font-size:var(--text-small)}
.grafik svg{margin-top:20px;width:100%}
.grafik .legende{display:flex;flex-wrap:wrap;gap:var(--space-xs) 20px;margin:var(--space-md) 0 0;padding:0;list-style:none;font-size:var(--text-small);font-weight:500;max-width:none}
.grafik .legende li{display:flex;align-items:center;gap:var(--space-xs);margin:0}
.grafik .legende i{width:20px;height:12px;border-radius:3px;background:var(--f)}
.grafik text{font-family:var(--font-body);fill:var(--color-ink)}
.zeiger{pointer-events:none}
.karte{position:absolute;pointer-events:none;background:var(--color-ink);color:var(--color-accent-ink);padding:var(--space-sm);border-radius:12px;font-size:var(--text-small);line-height:1.4;min-width:150px;opacity:0;transition:opacity var(--dur-short);z-index:5}
.karte.an{opacity:1}
.karte b{display:block;font-size:1rem;font-weight:600}
.grafik .buehne{position:relative}

.tafel{margin:28px auto 0;max-width:var(--wide);overflow-x:auto;-webkit-overflow-scrolling:touch}
.inhalt .tafel{max-width:1000px}
table{border-collapse:collapse;width:100%;font-size:1rem;line-height:1.4}
caption{text-align:left;font-weight:500;padding:0 0 var(--space-sm);font-size:var(--text-body);color:var(--color-ink)}
th,td{text-align:left;padding:var(--space-md) var(--space-sm);border-bottom:1px solid var(--color-rule);vertical-align:top;color:var(--color-ink-2)}
thead th{font-weight:500;font-size:var(--text-label);color:var(--color-muted);border-bottom:1px solid var(--color-rule-2);white-space:nowrap}
tbody td:first-child,tbody th{color:var(--color-ink);font-weight:500}
td.z,th.z{text-align:right;white-space:nowrap}
.farbfeld{display:inline-block;width:14px;height:14px;border-radius:4px;background:var(--f);margin-right:var(--space-xs);vertical-align:-1px}
@media (max-width:820px){
  .tafel.stapel table,.tafel.stapel tbody,.tafel.stapel tr,.tafel.stapel td{display:block;width:100%}
  .tafel.stapel thead{position:absolute;left:-9999px}
  .tafel.stapel caption{display:block;width:100%}
  .tafel.stapel tr{padding:var(--space-sm) 0;border-bottom:1px solid var(--color-rule)}
  .tafel.stapel td{border:0;padding:4px 0;text-align:left!important;white-space:normal!important}
  .tafel.stapel td::before{content:attr(data-t) ": ";color:var(--color-muted)}
  .tafel.stapel td:first-child{font-family:var(--font-display);font-size:1.25rem}
  .tafel.stapel td:first-child::before{content:""}
}

.rezept{max-width:1000px;margin:28px auto 0;background:var(--color-paper-2);border:1px solid var(--color-rule);border-radius:var(--radius-well);padding:clamp(20px,3vw,var(--space-xl));display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(20px,4vw,56px)}
.rezept h3{margin:0 0 4px;max-width:none}
.rezept ul,.rezept ol{margin:var(--space-sm) 0 0;max-width:none;padding-left:1.25em}
.rezept .eck{font-weight:500;color:var(--color-muted);margin:0;max-width:none}
@media (max-width:760px){.rezept{grid-template-columns:1fr}}

.fragen{max-width:var(--read);margin:28px auto 0}
.fragen h3{margin-top:0;padding-top:28px;border-top:1px solid var(--color-rule);font-size:1.375rem}
.fragen h3:first-child{border-top:0;padding-top:0}
.fragen p{margin:var(--space-sm) 0 28px}

.schluss{background:var(--color-paper-2);border:1px solid var(--color-rule);border-radius:var(--radius-card);max-width:var(--wide);margin:var(--section-gap) auto 0;padding:clamp(28px,5vw,72px);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(20px,4vw,56px);align-items:center}
.schluss h2{margin:0;text-align:left;font-size:clamp(1.75rem,1.2rem + 2vw,3rem)}
.schluss p{color:var(--color-ink-2);font-size:1.125rem;max-width:46ch;margin:var(--space-md) 0 0}
.schluss .balken{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-xs)}
.schluss .balken i{height:clamp(72px,10vw,128px);border-radius:12px;background:var(--f)}
@media (max-width:760px){.schluss{grid-template-columns:1fr}.schluss .balken{order:-1}}

.kacheln{max-width:var(--wide);margin:28px auto 0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--space-md)}
.kacheln a{grid-column:span 4;position:relative;display:block;text-decoration:none;border-radius:20px;overflow:hidden;background:var(--color-paper-2);min-height:240px;outline:1px solid color-mix(in oklab,var(--color-ink) 8%,transparent);outline-offset:-1px}
.kacheln a.breit{grid-column:span 8}
.kacheln a:hover span{text-decoration:underline;text-decoration-color:var(--color-accent);text-underline-offset:.2em}
.kacheln img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.kacheln span{position:absolute;left:0;right:0;bottom:0;padding:48px 20px 20px;font-family:var(--font-display);font-weight:500;font-size:1.5rem;letter-spacing:-.02em;line-height:1.1;background:linear-gradient(to top,var(--color-scrim),transparent)}
.kacheln small{display:block;font-family:var(--font-body);font-weight:400;font-size:var(--text-small);letter-spacing:0;margin-top:4px;color:var(--color-ink-2)}
@media (max-width:860px){.kacheln a,.kacheln a.breit{grid-column:span 6}}
@media (max-width:560px){.kacheln a,.kacheln a.breit{grid-column:span 12;min-height:184px}}

footer{border-top:1px solid var(--color-rule);color:var(--color-muted);padding:clamp(var(--space-xl),6vw,80px) 0 32px;font-size:var(--text-small)}
footer .name{font-family:var(--font-display);font-weight:500;font-size:clamp(2.5rem,8vw,7rem);letter-spacing:-.03em;color:var(--color-ink);line-height:1;margin:0 0 clamp(28px,4vw,56px);white-space:nowrap}
footer .spalten{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;border-top:1px solid var(--color-rule);padding-top:28px}
footer h2{font-family:var(--font-body);font-weight:500;font-size:var(--text-small);color:var(--color-ink);margin:0 0 var(--space-sm);text-align:left;letter-spacing:0}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin-top:var(--space-xs)}
footer a{color:var(--color-ink-2);text-decoration:none}
footer a:hover{color:var(--color-ink);text-decoration:underline}
@media (max-width:760px){footer .spalten{grid-template-columns:1fr 1fr}}

/* Rechner: die Werkbank. Glut nur als Füllung (Regler, Fokus), Garstufenfarben sind die Messwerte */
.rechner{margin:clamp(28px,3vw,48px) auto 0;max-width:1160px;background:var(--color-paper);color:var(--color-ink);border:1px solid var(--color-rule);border-radius:var(--radius-card);text-align:left;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);overflow:hidden;box-shadow:var(--shadow-card)}
.rechner form{padding:clamp(20px,3vw,44px);display:grid;gap:clamp(var(--space-lg),2.4vw,32px);align-content:start;border-right:1px solid var(--color-rule)}
.rechner fieldset{border:0;margin:0;padding:0;min-width:0}
.rechner legend{font-weight:500;font-size:var(--text-small);color:var(--color-muted);padding:0;margin-bottom:var(--space-sm);display:block}
.wahl{display:grid;gap:var(--space-xs)}
.wahl label{position:relative;display:block}
.wahl input{position:absolute;opacity:0;inset:0;cursor:pointer;margin:0}
.wahl span{display:flex;align-items:center;justify-content:center;text-align:center;min-height:48px;padding:var(--space-xs) var(--space-sm);background:var(--color-paper-2);box-shadow:inset 0 0 0 1px var(--color-rule);border-radius:var(--radius-pill);font-weight:500;font-size:var(--text-small);line-height:1.15;color:var(--color-ink-2);transition:background-color var(--dur-short) var(--ease-out),color var(--dur-short) var(--ease-out),box-shadow var(--dur-short) var(--ease-out)}
.wahl input:hover+span{box-shadow:inset 0 0 0 1px var(--color-rule-2);color:var(--color-ink)}
.wahl input:active+span{background:var(--color-paper-3)}
.wahl input:checked+span{background:var(--color-ink);color:var(--color-accent-ink);box-shadow:none}
.wahl input:focus-visible+span{outline:2px solid var(--color-focus);outline-offset:3px}
.stuecke{grid-template-columns:repeat(4,minmax(0,1fr))}
.stuecke span{border-radius:14px}
.arten{grid-template-columns:repeat(3,minmax(0,1fr))}
.stufen{grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-xs)}
.stufen span{flex-direction:column;justify-content:flex-start;gap:var(--space-xs);padding:0 0 4px;background:none;box-shadow:none;border-radius:12px;font-size:var(--text-label);color:var(--color-muted)}
.stufen i{display:block;width:100%;height:48px;border-radius:12px;background:var(--f);transition:box-shadow var(--dur-short) var(--ease-out),transform var(--dur-short) var(--ease-out)}
.stufen input:hover+span{box-shadow:none}
.stufen input:hover+span i{transform:translateY(-2px)}
.stufen input:checked+span{background:none;color:var(--color-ink)}
.stufen input:checked+span i{box-shadow:0 0 0 3px var(--color-paper),0 0 0 4px var(--color-ink);transform:translateY(-2px)}
.dicke{display:grid;grid-template-columns:52px 1fr 52px;gap:var(--space-xs) var(--space-sm);align-items:center}
.dicke button{width:52px;height:52px;border:0;box-shadow:inset 0 0 0 1px var(--color-rule-2);background:none;border-radius:50%;cursor:pointer;color:var(--color-ink);display:grid;place-items:center;transition:background-color var(--dur-short) var(--ease-out),transform var(--dur-short) var(--ease-out)}
.dicke button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.dicke button:hover{background:var(--color-paper-2)}
.dicke button:active{transform:scale(.94)}
.dicke output{font-family:var(--font-display);font-weight:500;font-size:clamp(2.5rem,2rem + 1.6vw,3.5rem);letter-spacing:-.03em;text-align:center;line-height:1}
.dicke output small{font-size:.45em;letter-spacing:-.01em;color:var(--color-muted);margin-left:.1em}
.dicke input[type=range]{grid-column:1/-1;width:100%;height:36px;margin:4px 0 0;background:none;-webkit-appearance:none;appearance:none;cursor:pointer;--p:33%}
.dicke input[type=range]::-webkit-slider-runnable-track{height:2px;background:linear-gradient(to right,var(--heat-2),var(--heat-4),var(--heat-6))}
.dicke input[type=range]::-moz-range-track{height:2px;background:linear-gradient(to right,var(--heat-2),var(--heat-4),var(--heat-6))}
.dicke input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:calc(-1*var(--space-sm));transform:translateY(-1px);border-radius:50%;background:var(--color-accent);border:4px solid var(--color-paper)}
.dicke input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--color-accent);border:4px solid var(--color-paper)}
.dicke .skala{grid-column:1/-1;display:flex;justify-content:space-between;font-size:var(--text-label);color:var(--color-muted)}
.dicke .skala b{font-weight:400}
.ergebnis{padding:clamp(20px,3vw,44px);display:grid;gap:clamp(var(--space-md),2vw,var(--space-lg));align-content:start;background:var(--color-paper-2)}
.schnitt{width:100%}
.schnitt #schnitt-kern{transition:fill var(--dur-long) var(--ease-out)}
.ergebnis .gross{margin:0;font-family:var(--font-display);font-weight:500;font-size:clamp(3.5rem,2.2rem + 5.4vw,6.5rem);letter-spacing:-.03em;line-height:.95;font-variant-numeric:lining-nums tabular-nums}
.ergebnis .gross small{display:block;font-family:var(--font-body);font-size:var(--text-small);font-weight:500;letter-spacing:0;line-height:1.3;color:var(--color-muted);margin-bottom:var(--space-sm)}
.ergebnis .gross i{font-style:normal;font-size:.5em;letter-spacing:-.01em;color:var(--color-ink-2);margin-left:.12em}
.werte{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:0;border-top:1px solid var(--color-rule);border-bottom:1px solid var(--color-rule)}
.werte div{padding:var(--space-md) var(--space-md) var(--space-md) 0}
.werte div:first-child{grid-column:1/-1;border-bottom:1px solid var(--color-rule)}
.werte div:nth-child(3){padding-left:var(--space-md);border-left:1px solid var(--color-rule)}
.werte dt{font-size:var(--text-label);line-height:1.3;color:var(--color-muted)}
.werte dd{margin:var(--space-xs) 0 0;font-family:var(--font-display);font-weight:500;font-size:1.5rem;line-height:1.15;letter-spacing:-.02em}
.werte div:first-child dd{font-size:clamp(1.625rem,1.3rem + 1.2vw,2.25rem)}
.ablauf{margin:0;padding:0;list-style:none;counter-reset:s;font-size:1rem;line-height:1.5;color:var(--color-ink-2)}
.ablauf li{counter-increment:s;position:relative;padding-left:36px;margin-top:var(--space-sm)}
.ablauf li:first-child{margin-top:0}
.ablauf li::before{content:counter(s);position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--color-rule-2);color:var(--color-ink);font-size:.75rem;font-weight:500;display:grid;place-items:center}
.steckbrief{border-top:1px solid var(--color-rule);padding-top:20px;font-size:var(--text-small);line-height:1.45}
.steckbrief .st-name{margin:0;font-family:var(--font-display);font-weight:500;font-size:1.5rem;letter-spacing:-.02em}
.steckbrief dl{margin:var(--space-sm) 0 0;display:grid;gap:var(--space-xs)}
.steckbrief dl div{display:grid;grid-template-columns:160px 1fr;gap:var(--space-sm)}
.steckbrief dt{color:var(--color-muted)}
.steckbrief dd{margin:0;color:var(--color-ink)}
.steckbrief p{margin:var(--space-sm) 0 0;color:var(--color-ink-2)}
@media (max-width:900px){.rechner{grid-template-columns:1fr;border-radius:20px}.rechner form{border-right:0;border-bottom:1px solid var(--color-rule)}}
@media (max-width:560px){.stuecke{grid-template-columns:repeat(2,minmax(0,1fr))}.stufen span{font-size:.75rem}.steckbrief dl div{grid-template-columns:1fr;gap:0}th,td{padding:var(--space-sm) var(--space-xs)}table{font-size:.9375rem}}
@media (max-width:560px){thead th{white-space:normal}.tafel:not(.stapel) table{table-layout:fixed}.tafel:not(.stapel) th,.tafel:not(.stapel) td{padding:var(--space-xs) 4px;font-size:.875rem;overflow-wrap:anywhere;hyphens:auto}.tafel:not(.stapel) td.z,.tafel:not(.stapel) th.z{white-space:normal}.farbfeld{margin-right:4px;width:12px;height:12px}}

pre.code{max-width:var(--read);margin:var(--space-md) auto 0;background:var(--color-paper-2);border:1px solid var(--color-rule);color:var(--color-ink-2);padding:var(--space-md) 20px;border-radius:var(--radius-well);overflow-x:auto;font:400 .9375rem/1.5 ui-monospace,Menlo,monospace;white-space:pre-wrap;word-break:break-all}
.einbett{max-width:1160px;margin:28px auto 0}
.einbett iframe{width:100%;height:820px;border:0;border-radius:var(--radius-card);background:var(--color-paper)}
body.nackt .rechner{margin:0;max-width:none;border-radius:0;border:0;box-shadow:none}
body.nackt .herkunft{font-size:var(--text-small);padding:var(--space-sm) var(--space-md);margin:0;text-align:right;color:var(--color-muted)}

.nur-schmal{display:none}
@media (max-width:700px){.nur-breit{display:none}.nur-schmal{display:block}}
@media (prefers-reduced-motion:no-preference){
  .js .auf{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
  .js .auf.da{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

.melden{max-width:620px;margin:var(--space-xl) auto 0;padding:var(--space-lg);background:var(--color-paper-2);border:1px solid var(--color-rule);border-radius:var(--radius-well);text-align:left}
.melden label{display:block;font-weight:600;margin-bottom:var(--space-xs)}
.melden div{display:flex;gap:var(--space-sm);flex-wrap:wrap}
.melden input{flex:1 1 240px;min-height:50px;padding:0 var(--space-md);font:inherit;color:var(--color-ink);background:var(--color-paper);border:1px solid var(--color-rule-2);border-radius:var(--radius-pill)}
.melden input:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
.melden input::placeholder{color:var(--color-muted)}
.melden .knopf{border:0;cursor:pointer;font:inherit;font-weight:600;flex:0 0 auto}
.melden small{display:block;margin-top:var(--space-sm);color:var(--color-muted);font-size:var(--text-label);line-height:1.5}
.spalten{columns:2 220px;column-gap:var(--space-xl)}