/* Pastamanufaktur Ferriola. Seitenstil. Die Engine-Klassen (.sc-*, [data-sc-*])
   bleiben unangetastet; hier stehen Marke, Werkbank, Teig, Walzen und Schluss. */
:root {
  --sc-canvas:     #F5EEDB;
  --sc-surface:    #EDE3C6;
  --sc-ink:        #26231A;
  --sc-ink-soft:   #5A5240;
  --sc-accent:     #A92E19;
  --sc-accent-ink: #FBF6EA;
  --sc-hairline:   rgb(38 35 26 / .14);
  --sc-font-display: "Young Serif", Georgia, serif;
  --sc-font-text:    "Golos Text", system-ui, sans-serif;
  --sc-font-mono:    "Golos Text", system-ui, sans-serif;
  --sc-shadow-color: 40 45% 30%;

  --teig-dick: #E6A526;
  --teig-duenn: #F7DE86;
  --holz: #EADFC2;
  --band-h: 60px;
  color-scheme: light;
}
html { background: var(--sc-canvas); scrollbar-color: #CDBE94 var(--sc-canvas); }
body { font-family: var(--sc-font-text); background: var(--sc-canvas); color: var(--sc-ink); }
::selection { background: var(--teig-dick); color: var(--sc-ink); }
:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; border-radius: 4px; }
button { font: inherit; color: inherit; }
.sc-grain { opacity: .05; mix-blend-mode: multiply; }

/* Anzeige: Young Serif hat nur einen Schnitt, kräftig genug. Enge Laufweite. */
.sc-display {
  font-family: var(--sc-font-display); font-weight: 400;
  letter-spacing: -0.015em; line-height: 1.04; color: var(--sc-ink);
  text-wrap: balance;
}
.sc-display--lg { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.6rem); }
.sc-display--md { font-size: clamp(1.6rem, 1.15rem + 1.7vw, 2.6rem); line-height: 1.08; }
.sc-body { color: var(--sc-ink-soft); font-size: var(--sc-t-lg); line-height: 1.55; text-wrap: pretty; }
@media (max-width: 700px) {
  .sc-display--lg { font-size: clamp(1.75rem, 1.1rem + 3.4vw, 2.3rem); }
  .sc-display--md { font-size: clamp(1.4rem, 1rem + 2.6vw, 1.8rem); }
  .sc-body { font-size: 1.04rem; }
}

/* ---------- Teigband (Kopf und Navigation) ---------- */
.teigband {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  height: var(--band-h);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(1rem, 3vw, 2.5rem);
  padding: 0 var(--sc-gutter);
  background: color-mix(in oklab, var(--sc-canvas) 92%, transparent);
  border-bottom: 1px solid var(--sc-hairline);
}
.wortmarke {
  font: 400 1.45rem/1 var(--sc-font-display); letter-spacing: -0.01em;
  color: var(--sc-ink); text-decoration: none;
}
.teigband__bahn { position: relative; height: 38px; }
.teigband__teig {
  position: absolute; left: 0; bottom: 7px; height: 7px; border-radius: 4px;
  width: 100%; transform: scaleX(var(--laenge, .25)); transform-origin: 0 50%;
  background:
    repeating-linear-gradient(90deg, rgb(255 255 255 / .18) 0 1px, transparent 1px 9px),
    linear-gradient(var(--teig-duenn), var(--teig-dick));
  box-shadow: 0 1px 2px rgb(140 95 20 / .3);
  transition: transform 240ms cubic-bezier(.23,1,.32,1);
}
.teigband.ist-geschnitten .teigband__teig {
  background:
    repeating-linear-gradient(180deg, var(--teig-dick) 0 1.5px, transparent 1.5px 2.4px),
    var(--teig-duenn);
}
.teigband__kerben {
  position: absolute; inset: 0; list-style: none; margin: 0; padding: 0;
  display: flex; justify-content: space-between;
}
.teigband__kerben a {
  position: relative; display: flex; align-items: flex-start; height: 38px; min-width: 28px;
  padding: 0 2px; color: var(--sc-ink-soft); text-decoration: none;
  font-size: 13px; font-weight: 500; letter-spacing: .01em; white-space: nowrap;
  transition: color 160ms cubic-bezier(.23,1,.32,1);
}
.teigband__kerben li:last-child a { justify-content: flex-end; }
.teigband__kerben a::after { /* die Kerbe im Band */
  content: ""; position: absolute; bottom: 4px; left: 2px; width: 2px; height: 13px; border-radius: 1px;
  background: color-mix(in oklab, var(--sc-ink) 30%, transparent);
}
.teigband__kerben li:last-child a::after { left: auto; right: 2px; }
.teigband__kerben a.ist-hier { color: var(--sc-accent); }
.teigband__kerben a.ist-hier::after { background: var(--sc-accent); }
@media (hover: hover) and (pointer: fine) { .teigband__kerben a:hover { color: var(--sc-ink); } }
.teigband__wert {
  margin: 0; display: flex; gap: .7em; align-items: baseline;
  font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--sc-ink);
}
.teigband__mm { color: var(--sc-ink-soft); font-weight: 500; min-width: 10.6em; }
.teigband__wert > :first-child { min-width: 5.8em; text-align: right; }
@media (max-width: 760px) {
  :root { --band-h: 54px; }
  .teigband { gap: 18px; }
  .teigband__bahn { margin-right: 4px; }
  .wortmarke { font-size: 1.2rem; }
  .teigband__kerben a span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .teigband__kerben a { min-width: 24px; }
  .teigband__wert { font-size: 13px; flex-direction: column; gap: 0; align-items: flex-end; line-height: 1.2; }
  .teigband__mm, .teigband__wert > :first-child { min-width: 0; }
}

/* ---------- Knopf ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 0 24px; border-radius: 999px; border: 0; cursor: pointer;
  font: 600 1rem/1 var(--sc-font-text); letter-spacing: .01em; text-decoration: none; white-space: nowrap;
  transition: transform 120ms cubic-bezier(.23,1,.32,1), background-color 160ms cubic-bezier(.23,1,.32,1);
}
.knopf:active { transform: scale(.97); }
/* Der volle Knopf trägt ein feines Gitter, über das ein Lichtstreif läuft. */
.knopf--voll {
  position: relative; overflow: hidden; isolation: isolate;
  color: var(--sc-accent-ink); background: var(--sc-accent);
  box-shadow: 0 6px 14px -8px rgb(70 50 25 / .45), inset 0 1px 0 rgb(255 255 255 / .18);
}
.knopf--voll::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(105deg, transparent 35%, rgb(255 255 255 / .22) 50%, transparent 65%) -200% 0 / 200% 100% no-repeat,
    repeating-linear-gradient(90deg, rgb(0 0 0 / .08) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(0deg, rgb(0 0 0 / .08) 0 1px, transparent 1px 6px);
  animation: streif 4.8s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes streif { 0%, 55% { background-position: -200% 0, 0 0, 0 0; } 100% { background-position: 200% 0, 0 0, 0 0; } }
@media (hover: hover) and (pointer: fine) { .knopf--voll:hover { background: #952614; } }

/* ---------- Werkbank: Brett, Platte, Walze ---------- */
.werkbank { --platte-top: 55%; --platte-unten: 6%; background: var(--sc-canvas); }
.werkbank--neun { --platte-top: 35%; --platte-unten: 5%; }
.brett { /* helles Eschenholz mit verstreuten Grießkörnern */
  position: absolute; inset: 0;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='s'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='1' seed='4'/><feColorMatrix values='0 0 0 0 0.80  0 0 0 0 0.64  0 0 0 0 0.30  0 0 0 11 -7.6'/></filter><rect width='240' height='240' filter='url(%23s)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='310' height='310'><filter id='s'><feTurbulence type='fractalNoise' baseFrequency='0.45' numOctaves='1' seed='9'/><feColorMatrix values='0 0 0 0 0.86  0 0 0 0 0.72  0 0 0 0 0.40  0 0 0 12 -8.6'/></filter><rect width='310' height='310' filter='url(%23s)'/></svg>"),
    repeating-linear-gradient(178deg, rgb(160 130 80 / .045) 0 2px, transparent 2px 23px),
    linear-gradient(100deg, #F6EFDC, #F1E7CD 60%, #F5EDD8);
}
.brett::after { /* Fensterlicht von links, steht still (unter dem Teig wird jede Bewegung mitgeblurrt) */
  content: ""; position: absolute; inset: -10%;
  background: linear-gradient(115deg, rgb(255 252 240 / .55), transparent 40%);
}

.held {
  position: absolute; z-index: var(--sc-z-copy);
  left: var(--sc-gutter); top: calc(var(--band-h) + clamp(1.2rem, 4.5vh, 3rem));
  width: min(50rem, calc(100% - 2 * var(--sc-gutter)));
  display: grid;
}
.held > * { grid-area: 1 / 1; }
.held__titel { font-size: clamp(2.3rem, 1.2rem + 3.2vw, 4.4rem); max-width: 17ch; line-height: 1.02; }
.held__sub { margin-top: var(--sc-4); max-width: 44ch; }
.held__a .knopf { margin-top: var(--sc-5); }
.held__b .sc-body { margin-top: var(--sc-4); max-width: 46ch; }
.held__b .sc-display { max-width: 20ch; }

.messwert {
  position: absolute; z-index: 4; margin: 0;
  right: var(--sc-gutter); top: calc(var(--platte-top) - 2.1rem);
  font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--sc-ink);
  letter-spacing: .01em;
}

/* Die Tafel liegt auf dem Brett, die Platte darüber. */
.tafel {
  position: absolute; z-index: 1;
  left: var(--sc-gutter); top: var(--platte-top); bottom: var(--platte-unten);
  width: var(--platte-start, 60vw);
  display: flex; align-items: center; padding: 0 clamp(1rem, 3vw, 3rem);
}
.satz {
  margin: 0; font: 400 clamp(2.6rem, 1rem + 6vw, 7rem)/1 var(--sc-font-display);
  letter-spacing: -0.02em; color: var(--sc-ink);
}
.zeitung { color: var(--sc-ink); max-width: 62rem; }
.zeitung__kopf {
  margin: 0 0 .5em; font: 400 clamp(1.9rem, 1rem + 3.2vw, 4rem)/1.02 var(--sc-font-display);
  letter-spacing: -0.02em; text-wrap: balance;
}
.zeitung__spalten { columns: 3 13rem; column-gap: 1.6rem; border-top: 2px solid var(--sc-ink); padding-top: .8rem; }
.zeitung__spalten p { margin: 0 0 .6em; font-size: 15px; line-height: 1.45; break-inside: avoid; }

.platte {
  position: absolute; z-index: 2;
  left: var(--sc-gutter); top: var(--platte-top); bottom: var(--platte-unten);
  width: var(--platte-start, 60vw);
  border-radius: 7px 16px 11px 9px;
  box-shadow: 0 var(--schatten, 6px) calc(var(--schatten, 6px) * 2.2) -2px rgb(150 100 20 / .28);
}
.lage {
  position: absolute; inset: 0; border-radius: inherit;
  background: rgb(var(--farbe, 230 165 38) / var(--deck, .95));
  -webkit-backdrop-filter: blur(var(--streu, 8px));
  backdrop-filter: blur(var(--streu, 8px));
}
.lage::after { /* Maserung in Walzrichtung und feines Korn */
  content: ""; position: absolute; inset: 0; border-radius: inherit; mix-blend-mode: multiply;
  opacity: var(--korn, .5);
  background:
    repeating-linear-gradient(0deg, rgb(200 140 30 / .10) 0 1px, transparent 1px 5px),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.8  0 0 0 0 0.55  0 0 0 0 0.1  0 0 0 .55 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}
.schnitte { /* die Schnittlinien der Schneidwalze */
  position: absolute; inset: 0; border-radius: inherit; opacity: 0; pointer-events: none;
  background: repeating-linear-gradient(180deg, transparent 0 calc(var(--band, 9px) - 1.2px), rgb(150 95 15 / .55) calc(var(--band, 9px) - 1.2px) var(--band, 9px));
}
.band {
  position: absolute; left: 0; right: 0; border-radius: 2px;
  background: rgb(var(--farbe, 247 222 134) / var(--deck, .5));
  box-shadow: 0 1px 0 rgb(170 110 20 / .25);
  will-change: transform;
}

.walze { /* Stahlwalze von oben gesehen */
  position: absolute; z-index: 3; left: 0; width: 30px;
  top: calc(var(--platte-top) - 16px); bottom: calc(var(--platte-unten) - 16px);
  border-radius: 15px;
  background: linear-gradient(90deg, #8E8A80, #E9E6DE 32%, #FFFFFF 42%, #B8B3A7 70%, #6F6B62);
  box-shadow: 10px 6px 14px -4px rgb(90 70 30 / .35);
  will-change: transform; opacity: 0;
}
.walze i { /* Achse an beiden Enden */
  position: absolute; left: 50%; top: -10px; bottom: -10px; width: 8px; translate: -50% 0; border-radius: 4px;
  background: linear-gradient(90deg, #5d5950, #c9c4b8, #5d5950); z-index: -1;
}
.walze--schneid {
  width: 38px; border-radius: 19px;
  background:
    repeating-linear-gradient(180deg, rgb(60 55 45 / .55) 0 1.5px, transparent 1.5px var(--band, 9px)),
    linear-gradient(90deg, #8E8A80, #E9E6DE 32%, #FFFFFF 42%, #B8B3A7 70%, #6F6B62);
}

.neun__text {
  position: absolute; z-index: var(--sc-z-copy);
  left: var(--sc-gutter); top: calc(var(--band-h) + clamp(1rem, 4vh, 2.6rem));
  width: min(44rem, calc(100% - 2 * var(--sc-gutter) - 15rem));
  display: grid;
}
.neun__text > * { grid-area: 1 / 1; }
.neun__text .sc-body { margin-top: var(--sc-3); max-width: 50ch; }

@media (max-width: 860px) {
  .werkbank { --platte-top: 57%; --platte-unten: 4%; }
  .werkbank--neun { --platte-top: 41%; --platte-unten: 4%; }
  .held__titel { font-size: clamp(2.05rem, 1.2rem + 4.6vw, 2.8rem); }
  .held__sub { font-size: 1rem; }
  .neun__text { width: calc(100% - 2 * var(--sc-gutter)); }
  .messwert { font-size: 13.5px; top: calc(var(--platte-top) - 1.8rem); }
  .tafel { padding: 0 1rem; }
  .satz { font-size: clamp(2.2rem, 1rem + 8vw, 3.6rem); }
  .zeitung__kopf { font-size: clamp(1.6rem, 1rem + 4vw, 2.2rem); }
  .zeitung__spalten { columns: 1; }
  .zeitung__spalten p { font-size: 14.5px; }
  .zeitung__spalten p:nth-child(n+3) { display: none; }
}
@media (max-width: 860px) and (max-height: 700px) {
  .held__sub { display: none; }
  .werkbank { --platte-top: 55%; }
  .werkbank--neun { --platte-top: 44%; }
  .neun__text .sc-body { font-size: .95rem; }
  .zeitung__spalten p:nth-child(n+2) { display: none; }
}

/* ---------- Zutaten (flow) ---------- */
.zutaten { padding-block: clamp(1.5rem, 3vw, 3rem) clamp(4rem, 9vw, 8rem); }
.zutaten__raster {
  display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(2rem, 4vw, 4rem) clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.zutaten__gross { grid-column: 1 / -1; margin: 0; }
.zutaten__gross img { width: 100%; height: auto; border-radius: 10px; display: block; aspect-ratio: 2400 / 1357; object-fit: cover; }
.zutaten__text { padding-top: var(--sc-4); }
.zutaten__text h2 { max-width: 16ch; }
.zutaten__text .sc-body { max-width: 44ch; }
.daten { margin: var(--sc-6) 0 0; border-top: 1px solid var(--sc-hairline); }
.daten div { display: grid; grid-template-columns: 11rem 1fr; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--sc-hairline); }
.daten dt { font-weight: 600; color: var(--sc-ink); }
.daten dd { margin: 0; color: var(--sc-ink-soft); font-variant-numeric: tabular-nums; }
.zutaten__klein { margin: 0; justify-self: end; width: min(100%, 26rem); rotate: 1.2deg; }
.zutaten__klein img { width: 100%; height: auto; border-radius: 8px; display: block; box-shadow: 0 18px 30px -18px rgb(120 90 30 / .45); }
.zutaten__klein figcaption { margin-top: .8rem; font-size: 15px; color: var(--sc-ink-soft); line-height: 1.5; max-width: 34ch; }
@media (max-width: 860px) {
  .zutaten__raster { grid-template-columns: 1fr; }
  .zutaten__klein { justify-self: start; width: 82%; }
  .daten div { grid-template-columns: 8.5rem 1fr; }
}

/* ---------- Breiten (pan) ---------- */
.breiten { background: var(--sc-canvas); display: flex; align-items: center; }
.schiene {
  display: flex; gap: clamp(1.2rem, 2.5vw, 2.4rem); align-items: stretch;
  padding: calc(var(--band-h) + 2rem) var(--sc-gutter) 2rem; width: max-content;
}
/* (Grieß auch im Papier der Sorten) */
.sorte {
  position: relative; overflow: hidden;
  width: clamp(17rem, 27vw, 24rem); padding: 1.4rem 1.4rem 1.6rem; border-radius: 14px;
  background:
    radial-gradient(rgb(214 178 92 / .35) .8px, transparent 1.2px) 0 0 / 14px 14px,
    #FBF6E8;
  box-shadow: 0 1px 0 rgb(255 255 255 / .9) inset, 0 18px 34px -24px rgb(120 90 30 / .5);
}
.sorte > * { position: relative; }
.sorte__bild { width: 100%; height: auto; display: block; margin-bottom: 1rem; }
.sorte h3 { margin: 0; font: 400 1.9rem/1.1 var(--sc-font-display); letter-spacing: -0.01em; }
.sorte__etikett { margin: .5rem 0 0; color: var(--sc-ink-soft); font-size: 1rem; line-height: 1.5; }
.sorte--kopf, .sorte--schluss { background: none; box-shadow: none; width: clamp(18rem, 32vw, 30rem); align-self: center; }
.sorte--kopf .sc-body { margin-top: var(--sc-4); }
.sorte--schluss { width: clamp(15rem, 24vw, 20rem); }
@media (prefers-reduced-motion: no-preference) {
  .sorte:not(.sorte--kopf) { opacity: calc(.55 + .45 * min(1, var(--sc-p, 0) * 6)); }
}

/* ---------- Trocknen (flow + parallax) ---------- */
.trocknen { padding-block: clamp(4rem, 9vw, 8rem) clamp(5rem, 10vw, 9rem); overflow: clip; }
.trocknen__raster { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.trocknen__bild { grid-row: span 2; }
.trocknen__bild img, .trocknen__nester img { width: 100%; height: auto; display: block; border-radius: 10px; }
.trocknen__nester { width: 62%; justify-self: end; rotate: -1.6deg; }
.trocknen__nester img { box-shadow: 0 18px 30px -18px rgb(120 90 30 / .45); }
.trocknen__text h2 { max-width: 14ch; }
.trocknen__text .sc-body { max-width: 42ch; }
@media (max-width: 860px) {
  .trocknen__raster { grid-template-columns: 1fr; }
  .trocknen__bild { grid-row: auto; width: 88%; }
  .trocknen__nester { width: 64%; }
}

/* ---------- Trockenstab (Schluss) ---------- */
.stab { background: var(--sc-canvas); }
.brett--hell::after { opacity: .7; }
.stab__bild {
  position: absolute; z-index: 2; left: var(--sc-gutter); top: calc(var(--band-h) + 3vh);
  width: min(52vw, 780px); height: auto; overflow: visible;
}
.stab__inhalt {
  position: absolute; z-index: var(--sc-z-copy);
  right: var(--sc-gutter); top: calc(var(--band-h) + clamp(1.5rem, 8vh, 5rem));
  width: min(30rem, 34vw);
}
.stab__inhalt h2 { max-width: 14ch; }
.wahl { border: 0; margin: var(--sc-6) 0 0; padding: 0; min-width: 0; }
.wahl legend, .menge__label { font-size: 14px; font-weight: 600; color: var(--sc-ink); margin-bottom: .55rem; padding: 0; }
.wahl__reihe { display: flex; flex-wrap: wrap; gap: .5rem; }
.wahl button, .menge__regler button {
  cursor: pointer; border: 1.5px solid color-mix(in oklab, var(--sc-ink) 35%, transparent);
  background: #FBF6E8; border-radius: 999px; min-height: 44px; padding: 0 16px; font-weight: 600; font-size: 15px;
  transition: background-color 160ms cubic-bezier(.23,1,.32,1), border-color 160ms cubic-bezier(.23,1,.32,1), transform 120ms cubic-bezier(.23,1,.32,1);
}
.wahl button small { font-weight: 500; color: var(--sc-ink-soft); margin-left: .25em; font-size: 13px; }
.wahl button[aria-pressed="true"] { background: var(--sc-ink); border-color: var(--sc-ink); color: var(--sc-canvas); }
.wahl button[aria-pressed="true"] small { color: #E7DDC2; }
.wahl button:active, .menge__regler button:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .wahl button:hover { border-color: var(--sc-ink); } }
.menge { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: var(--sc-5); }
.menge__label { margin: 0; }
.menge__regler { display: inline-flex; align-items: center; gap: .4rem; }
.menge__regler button { width: 44px; padding: 0; font-size: 1.2rem; }
.menge__regler output { min-width: 2ch; text-align: center; font-weight: 700; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.menge__summe { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--sc-ink); margin-left: auto; }
.stab__datum { margin: var(--sc-5) 0 var(--sc-5); color: var(--sc-ink-soft); font-size: 1rem; line-height: 1.5; max-width: 40ch; }
.stab__hinweis { margin: .8rem 0 0; font-size: 14px; color: var(--sc-ink-soft); max-width: 40ch; }
.fuss {
  position: absolute; z-index: 5; left: var(--sc-gutter); right: var(--sc-gutter); bottom: 14px;
  display: flex; gap: 1.2rem; align-items: baseline; font-size: 13px; color: var(--sc-ink-soft); line-height: 1.4;
}
.fuss__marke { font: 400 1rem/1 var(--sc-font-display); color: var(--sc-ink); }
.nudel { transform-box: fill-box; }
@media (prefers-reduced-motion: no-preference) {
  .stab__nudeln { animation: pendeln 5.5s ease-in-out infinite alternate; transform-origin: 50% 0; transform-box: fill-box; }
  .nudel--neu { animation: haengen 520ms cubic-bezier(.23,1,.32,1) both; }
}
@keyframes pendeln { from { transform: rotate(-.35deg); } to { transform: rotate(.35deg); } }
@keyframes haengen { from { opacity: 0; transform: translateY(-14px); } }
@media (max-width: 860px) {
  .stab__bild { width: calc(100% - 2 * var(--sc-gutter)); top: calc(var(--band-h) + 6px); height: 27svh; }
  .stab__inhalt { left: var(--sc-gutter); right: var(--sc-gutter); width: auto; top: calc(var(--band-h) + 27svh + 10px); }
  .stab__inhalt h2 { max-width: none; }
  .wahl { margin-top: var(--sc-4); }
  .wahl button { padding: 0 12px; font-size: 14px; }
  .wahl button small { display: none; }
  .menge { margin-top: var(--sc-4); }
  .stab__datum { margin: var(--sc-3) 0; font-size: .95rem; }
  .fuss { bottom: 8px; font-size: 11.5px; }
  .fuss__marke { display: none; }
}
@media (max-width: 860px) and (max-height: 700px) {
  .stab__bild { height: 19svh; }
  .stab__inhalt { top: calc(var(--band-h) + 19svh + 6px); }
  .stab__datum { display: none; }
  .wahl legend { display: none; }
}

.messwert { display: none; }