/* Brennwerk Neun. Seitenstil. Die Engine-Klassen (.sc-*, [data-sc-*]) bleiben
   unangetastet; hier stehen Marke, Bühnen, Manometer, Tasse und Zettel.
   Grund ist Milchweiß; der Bezug und das Makro sind der dunkle Anker.
   Ein Akzent (Manometer-Rot) in zwei Helligkeiten, je nach Grund. */
:root {
  --milch:      #F3F3F0;
  --milch-2:    #EAE7E1;
  --espresso:   #17110E;
  --espresso-2: #221915;
  --rot:        #D8432E;   /* Flächen, Nadel, Knopf */
  --rot-hell:   #B8351F;   /* Text auf Milch */
  --rot-dunkel: #EF6F57;   /* Text auf Espresso */

  --sc-canvas:     var(--milch);
  --sc-surface:    #FBFAF8;
  --sc-ink:        #1E1714;
  --sc-ink-soft:   #5C514B;
  --sc-accent:     var(--rot);
  --sc-accent-ink: #FFF8F4;
  --sc-font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --sc-font-text:    "Figtree", system-ui, sans-serif;
  --sc-font-mono:    "Figtree", system-ui, sans-serif;
  --sc-shadow-color: 20 25% 12%;
  --leiste-h: 60px;
  color-scheme: light;
}
html { background: var(--milch); scrollbar-color: #B9B2AB var(--milch); }
body { font-family: var(--sc-font-text); background: var(--milch); color: var(--sc-ink); }
::selection { background: var(--rot); color: #FFF8F4; }
:focus-visible { outline: 2px solid var(--rot); outline-offset: 3px; border-radius: 4px; }
input, select { caret-color: var(--rot); }

.sc-display {
  font-family: var(--sc-font-display);
  font-variation-settings: "opsz" 96, "wdth" 88;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 0.98;
}
.sc-display--xl { font-size: clamp(2.7rem, 1.2rem + 5.4vw, 6.4rem); }
.sc-display--lg { font-size: clamp(2rem, 1.1rem + 2.8vw, 3.7rem); line-height: 1.02; }
.sc-display--md { font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.5rem); line-height: 1.06; }
.sc-body { font-size: var(--sc-t-lg); line-height: 1.55; }
@media (max-width: 700px) {
  .sc-display--xl { font-size: clamp(2.3rem, 1.3rem + 5vw, 3rem); }
  .sc-display--lg { font-size: clamp(1.75rem, 1.2rem + 2.6vw, 2.2rem); }
  .sc-body { font-size: 1.04rem; }
}
.vorzeile {
  margin: 0 0 var(--sc-4); color: var(--rot-hell);
  font: 700 var(--sc-t-xs)/1.2 var(--sc-font-text); letter-spacing: .14em; text-transform: uppercase;
}

/* ---------- Protokoll-Leiste ---------- */
.leiste {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  height: var(--leiste-h);
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 3rem);
  padding: 0 var(--sc-gutter);
  background: color-mix(in oklab, var(--milch) 90%, transparent);
  border-bottom: 1px solid color-mix(in oklab, var(--espresso) 10%, transparent);
  backdrop-filter: blur(10px);
  color: var(--sc-ink);
  transition: background-color 260ms var(--sc-ease-out), color 260ms var(--sc-ease-out), border-color 260ms var(--sc-ease-out);
}
.leiste.ist-dunkel {
  background: color-mix(in oklab, var(--espresso) 88%, transparent);
  border-bottom-color: rgb(244 242 238 / .1);
  color: var(--milch);
}
.wortmarke {
  font: 800 21px/1 var(--sc-font-display); font-variation-settings: "opsz" 48, "wdth" 78;
  letter-spacing: -.02em; color: inherit; text-decoration: none;
}
.wortmarke::after { /* der rote Zeigerstrich aus dem Zeichen */
  content: ""; display: inline-block; width: 12px; height: 3px; margin-left: 4px; vertical-align: .18em;
  background: var(--rot); border-radius: 2px; rotate: -38deg;
}
.leiste__stationen { display: flex; gap: clamp(.9rem, 2.2vw, 2rem); margin-right: auto; }
.leiste__stationen a {
  position: relative; padding: 8px 0; color: inherit; text-decoration: none;
  font-size: var(--sc-t-sm); font-weight: 500; opacity: .72;
  transition: opacity 160ms var(--sc-ease-out);
}
.leiste__stationen a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; border-radius: 1px;
  background: var(--rot); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 260ms var(--sc-ease-out);
}
.leiste__stationen a.ist-hier { opacity: 1; font-weight: 600; }
.leiste__stationen a.ist-hier::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) { .leiste__stationen a:hover { opacity: 1; } }
.leiste__wert {
  display: flex; align-items: baseline; gap: 8px; color: inherit; text-decoration: none;
  font-size: var(--sc-t-sm); white-space: nowrap;
}
.leiste__wert-kopf { opacity: .72; }
.leiste__wert b { font-weight: 700; font-variant-numeric: tabular-nums; }
.leiste__wert.ist-sitzt b { color: var(--rot-hell); }
.leiste.ist-dunkel .leiste__wert.ist-sitzt b { color: var(--rot-dunkel); }
.leiste__wert.ist-neu b { animation: aufleuchten 1.2s var(--sc-ease-out); }
@keyframes aufleuchten { 0% { background: color-mix(in oklab, var(--rot) 30%, transparent); } 100% { background: transparent; } }
@media (max-width: 900px) {
  .leiste__stationen { display: none; }
  .leiste { justify-content: space-between; }
}
@media (max-width: 400px) { .leiste__wert-kopf { display: none; } }

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px; border-radius: 999px;
  font: 700 1rem/1 var(--sc-font-text); letter-spacing: .005em; text-decoration: none; white-space: nowrap; cursor: pointer;
  color: inherit; border: 1.5px solid currentColor; background: transparent;
  transition: transform 140ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out), border-color 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out);
}
.knopf:active { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) { .knopf:hover { border-color: var(--rot); } }
/* Der volle Knopf trägt ein feines Raster, über das ein Lichtstreif läuft. */
.knopf--voll {
  position: relative; overflow: hidden; isolation: isolate;
  color: #FFF8F4; background: #C23A25; border-color: #C23A25;
}
.knopf--voll::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(105deg, transparent 35%, rgb(255 255 255 / .3) 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 var(--sc-ease-in-out) 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: #A93020; border-color: #A93020; } }

/* ---------- Ankommen ---------- */
.ankunft {
  position: relative; height: 100svh; min-height: 620px; overflow: clip;
  background:
    radial-gradient(60% 50% at 70% 60%, #FBFAF8, transparent 70%),
    var(--milch);
}
.ankunft__neun {
  position: absolute; right: 3vw; top: 12svh;
  font: 800 84svh/.8 var(--sc-font-display); font-variation-settings: "opsz" 96, "wdth" 75;
  letter-spacing: -.06em; color: var(--rot);
  user-select: none; pointer-events: none;
}
.ankunft__maschine {
  position: absolute; margin: 0; right: 24vw; bottom: -2svh;
  height: 76svh; aspect-ratio: 1400 / 1750;
}
.ankunft__maschine img { width: 100%; height: 100%; max-width: none; filter: drop-shadow(0 30px 40px rgb(23 17 14 / .28)); }
.ankunft__maschine::after { /* Kontaktschatten auf der Theke */
  content: ""; position: absolute; left: 8%; right: 8%; bottom: 1.4%; height: 5%; z-index: -1;
  background: radial-gradient(50% 50% at 50% 50%, rgb(23 17 14 / .45), transparent 70%); filter: blur(6px);
}
.ankunft__text {
  position: absolute; z-index: var(--sc-z-copy);
  left: var(--sc-gutter); bottom: clamp(3rem, 11svh, 8rem);
  width: min(31rem, 38vw);
}
.ankunft h1 { max-width: 10ch; }
.ankunft__sub { margin-top: var(--sc-5); max-width: 36ch; color: var(--sc-ink-soft); }
.ankunft .knopf { margin-top: var(--sc-6); }
.ankunft__hinweis { margin: var(--sc-3) 0 0; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
@media (max-width: 900px) {
  .ankunft__neun { right: 1vw; top: 9svh; font-size: 50svh; }
  .ankunft__maschine { right: auto; left: 4vw; bottom: auto; top: 14svh; height: 42svh; }
  .ankunft__text { width: auto; right: var(--sc-gutter); bottom: clamp(1.5rem, 5svh, 3rem); }
  .ankunft h1 { max-width: 12ch; }
  .ankunft__sub { font-size: 1rem; margin-top: var(--sc-4); }
  .ankunft .knopf { margin-top: var(--sc-5); }
}
@media (max-height: 700px) and (max-width: 900px) {
  .ankunft__maschine { height: 36svh; top: 11svh; }
  .ankunft__neun { font-size: 44svh; }
  .ankunft__sub { display: none; }
}

/* ---------- Vorbereiten (pan) ---------- */
.ritual { background: var(--milch); display: flex; align-items: center; }
.ritual__schiene {
  display: flex; align-items: center; gap: clamp(2.5rem, 5vw, 6rem);
  padding: var(--leiste-h) var(--sc-gutter) 0;
}
.ritual__schiene > * { flex: 0 0 auto; }
.ritual__kopf { width: min(32rem, 84vw); }
.ritual__kopf .sc-body { margin-top: var(--sc-5); color: var(--sc-ink-soft); max-width: 34ch; }
.handgriff { width: clamp(16rem, 24vw, 23rem); margin: 0; }
.handgriff__bild {
  width: 100%; height: auto; aspect-ratio: 4 / 3;
  background:
    radial-gradient(rgb(23 17 14 / .09) 1px, transparent 1.3px) 0 0 / 16px 16px,
    var(--milch-2);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .7);
}
.z { fill: none; stroke: var(--espresso); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.z--fein { stroke-width: 1.4; stroke: #6D625C; }
.z--rot { stroke: var(--rot); stroke-width: 2.6; }
.z--bohne ellipse { fill: #4A2E1E; }
.z--mehl circle { fill: #4A2E1E; }
.handgriff__verb {
  display: block; margin: var(--sc-5) 0 var(--sc-2);
  font: 700 var(--sc-t-xl)/1.1 var(--sc-font-display); font-variation-settings: "opsz" 48, "wdth" 88; letter-spacing: -.02em;
}
.handgriff__satz { display: block; margin: 0; color: var(--sc-ink-soft); line-height: 1.55; max-width: 32ch; }
.handgriff--foto { width: clamp(17rem, 27vw, 26rem); }
.handgriff--foto img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 14px; box-shadow: var(--sc-e2); }
.handgriff--foto .handgriff__verb { margin-top: var(--sc-4); }
.ritual__schluss { width: min(22rem, 78vw); padding-right: var(--sc-gutter); }
.ritual__schluss .sc-body { margin-top: var(--sc-4); color: var(--sc-ink-soft); }
@media (max-width: 700px) {
  .ritual__schiene { gap: 2.2rem; }
  .handgriff { width: 74vw; }
  .handgriff--foto { width: 66vw; }
  .handgriff--foto img { aspect-ratio: 1 / 1; }
  .ritual__kopf .sc-body { font-size: 1rem; }
}
@media (max-height: 700px) and (max-width: 700px) {
  .handgriff--foto { width: 52vw; }
  .handgriff__bild { aspect-ratio: 16 / 10; }
}

/* ---------- Druck und Bezug (Höhepunkt) ---------- */
.bezug {
  --sc-ink: #F4F2EE; --sc-ink-soft: #BDB2AA;
  color: var(--sc-ink);
  background:
    radial-gradient(70% 70% at 66% 55%, #2A1E18, transparent 70%),
    var(--espresso);
}
.bezug__rig {
  position: absolute; z-index: 1;
  height: 135svh; aspect-ratio: 1400 / 1750;
  top: -32.4svh; left: calc(68vw - 54svh);
}
.bezug__rig picture, .bezug__maschine { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.bezug__maschine { filter: drop-shadow(0 0 1px rgb(244 242 238 / .25)); }
.bezug__band { display: none; }
.bezug__tasse { position: absolute; left: 25%; top: 46%; width: 50%; height: 26%; }

.bezug__text {
  position: absolute; z-index: var(--sc-z-copy);
  left: var(--sc-gutter); top: calc(var(--leiste-h) + clamp(2rem, 8svh, 5rem));
  width: min(30rem, 36vw);
  display: grid;
}
.bezug__text > * { grid-area: 1 / 1; }
.bezug__text .sc-body { margin-top: var(--sc-4); max-width: 34ch; line-height: 1.6; letter-spacing: .005em; }
.bezug__text h2 { font-weight: 750; letter-spacing: -.022em; }
.urteil__zeile { display: flex; align-items: center; gap: var(--sc-4); margin-top: var(--sc-5); }
.urteil__notiz { margin: 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); max-width: 26ch; line-height: 1.5; }
.urteil .knopf { margin-top: var(--sc-5); color: var(--sc-ink); }
.urteil [data-urteil-titel] { color: var(--sc-ink); }
.urteil.ist-sitzt [data-urteil-titel] { color: var(--rot-dunkel); }
.crema { width: 96px; height: 96px; border-radius: 50%; flex: none; box-shadow: 0 0 0 5px #F4F2EE, 0 0 0 6px rgb(23 17 14 / .25), var(--sc-e2); }
.crema--klein { width: 76px; height: 76px; }

.bezug__instrumente {
  position: absolute; z-index: var(--sc-z-copy);
  left: var(--sc-gutter); bottom: clamp(1.5rem, 6svh, 4rem);
  display: grid; grid-template-columns: auto auto; grid-template-areas: "mano zahlen" "mano lage";
  column-gap: clamp(1rem, 2vw, 2rem); align-items: end;
}
.manometer { grid-area: mano; width: clamp(150px, 17vw, 240px); height: auto; filter: drop-shadow(0 18px 24px rgb(0 0 0 / .45)); }
.manometer__einheit { font: 600 13px var(--sc-font-text); fill: #6D625C; letter-spacing: .06em; }
.manometer .skala-zahl { font: 700 13px var(--sc-font-display); fill: var(--espresso); font-variant-numeric: tabular-nums; }
[data-nadel] { transform-origin: 110px 110px; transform-box: view-box; }
.anzeige { grid-area: zahlen; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(7.2rem, auto)); gap: 14px 22px; }
.anzeige > div { border-top: 1px solid rgb(244 242 238 / .16); padding-top: 8px; }
.anzeige dt { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); letter-spacing: .02em; }
.anzeige dd { margin: 2px 0 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.anzeige b {
  font: 700 clamp(1.5rem, 1.1rem + 1vw, 2.2rem)/1 var(--sc-font-display); font-variation-settings: "opsz" 48, "wdth" 80;
  color: var(--sc-ink); font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.anzeige__zeit b { color: var(--rot-dunkel); }
.anzeige__lage { grid-area: lage; margin: 14px 0 0; font-size: var(--sc-t-sm); font-weight: 600; color: var(--sc-ink); min-height: 1.5em; }
.anzeige__lage.ist-warnung { color: var(--rot-dunkel); }

@media (max-width: 1100px) and (min-width: 701px) {
  .bezug__rig { left: calc(62vw - 54svh); }
  .bezug__text { width: min(26rem, 40vw); }
  .anzeige { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .bezug__rig {
    height: 108svh; top: -2.5svh; left: calc(50vw - 43.2svh);
  }
  .bezug__maschine { mask-image: linear-gradient(to bottom, transparent 0, transparent 30%, #000 44%); }
  .bezug__band {
    position: absolute; inset: 0 0 auto 0; display: block; height: 58svh; z-index: 2; pointer-events: none;
    background: linear-gradient(to bottom, var(--espresso) 0, var(--espresso) 62%, rgb(23 17 14 / .7) 80%, transparent);
    opacity: var(--band, 0);
  }
  .urteil__notiz { display: none; }
  .bezug__text { width: auto; right: var(--sc-gutter); top: calc(var(--leiste-h) + 1rem); }
  .bezug__text .sc-body { font-size: .98rem; margin-top: var(--sc-3); }
  .urteil__zeile { margin-top: var(--sc-3); }
  .urteil .knopf { margin-top: var(--sc-3); min-height: 44px; }
  .crema { width: 64px; height: 64px; box-shadow: 0 0 0 4px #F4F2EE, var(--sc-e2); }
  .urteil__notiz { font-size: .82rem; }
  .bezug__instrumente {
    left: 12px; right: 12px; bottom: 12px;
    grid-template-columns: auto 1fr; column-gap: 12px;
    padding: 10px 12px; border-radius: 14px;
    background: color-mix(in oklab, var(--espresso) 86%, transparent);
    border: 1px solid rgb(244 242 238 / .1); backdrop-filter: blur(6px);
  }
  .manometer { width: 104px; }
  .anzeige { gap: 6px 14px; }
  .anzeige > div { padding-top: 4px; }
  .anzeige b { font-size: 1.32rem; }
  .anzeige dd { font-size: .8rem; }
  .anzeige__lage { margin-top: 6px; font-size: .84rem; }
}
@media (max-width: 700px) and (max-height: 700px) {
  .bezug__rig { height: 100svh; top: 2svh; left: calc(50vw - 40svh); }
  .bezug__text .sc-body { display: none; }
  .manometer { width: 84px; }
  .anzeige b { font-size: 1.1rem; }
  .anzeige dt { font-size: .7rem; }
  .crema { width: 52px; height: 52px; }
  .urteil__notiz { display: none; }
}

/* ---------- Makro ---------- */
.makro { background: #0C0907; --sc-ink: #F4F2EE; --sc-ink-soft: #CFC5BD; --sc-canvas: #0C0907; color: var(--sc-ink); }
.makro__scrim {
  background: linear-gradient(to top left,
    rgb(12 9 7 / .94) 0%, rgb(12 9 7 / .74) 28%, rgb(12 9 7 / .3) 50%, transparent 70%);
}
.makro__copy { color: var(--sc-ink); max-width: min(40rem, 60vw); }
.makro__copy h2 { font-weight: 750; letter-spacing: -.022em; }
.makro__sub { margin-top: var(--sc-5); margin-left: auto; max-width: 36ch; line-height: 1.6; color: var(--sc-ink-soft); }
@media (max-width: 860px) {
  .makro__scrim { background: linear-gradient(to top, rgb(12 9 7 / .96) 0%, rgb(12 9 7 / .82) 34%, rgb(12 9 7 / .3) 56%, transparent 72%); }
  .makro__copy { max-width: none; }
  .makro__sub { margin-left: 0; }
}

/* ---------- Die Maschine ---------- */
.maschine { background: var(--milch); position: relative; }
.maschine__raster {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 6vw, 7rem); align-items: center;
}
.maschine__bild {
  margin: 0; position: relative; padding: clamp(1rem, 3vw, 2.5rem);
  border-radius: 20px;
  background:
    radial-gradient(rgb(23 17 14 / .08) 1px, transparent 1.3px) 0 0 / 18px 18px,
    linear-gradient(160deg, #FBFAF8, var(--milch-2));
  box-shadow: inset 0 1px 0 #fff, var(--sc-e2);
}
.maschine__bild img { width: 100%; height: auto; }
.maschine__text .sc-body { color: var(--sc-ink-soft); max-width: 46ch; }
.daten { margin: var(--sc-6) 0 0; border-top: 1px solid var(--sc-hairline-strong); }
.daten > div { display: grid; grid-template-columns: 9rem 1fr; gap: var(--sc-4); padding: 13px 0; border-bottom: 1px solid var(--sc-hairline); }
.daten dt { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.daten dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.maschine__fuss { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
@media (max-width: 860px) {
  .maschine__raster { grid-template-columns: 1fr; }
  .maschine__bild { max-width: 26rem; }
}
@media (max-width: 500px) { .daten > div { grid-template-columns: 6.4rem 1fr; } }

/* ---------- Bestellen ---------- */
.bestellen { background: var(--milch); }
.bestellen__inhalt {
  position: absolute; z-index: var(--sc-z-copy);
  inset: calc(var(--leiste-h) + clamp(1.5rem, 7svh, 4.5rem)) var(--sc-gutter) auto var(--sc-gutter);
  display: grid; grid-template-columns: 1fr minmax(20rem, 27rem); gap: clamp(2rem, 6vw, 7rem); align-items: start;
}
.bestellen__kopf h2 { max-width: 13ch; }
.bestellen__kopf .sc-body { margin-top: var(--sc-5); max-width: 36ch; color: var(--sc-ink-soft); }
.zettel {
  position: relative; rotate: -1.2deg;
  padding: 28px clamp(1.2rem, 2.2vw, 1.8rem) 22px;
  background: #FFFEFC; color: var(--sc-ink);
  border-radius: 4px;
  box-shadow: 0 1px 0 #fff inset, 0 2px 4px rgb(23 17 14 / .08), 0 22px 44px -16px rgb(23 17 14 / .3);
}
.zettel::before { /* Abrisskante oben */
  content: ""; position: absolute; left: 0; right: 0; top: -7px; height: 8px;
  background: radial-gradient(circle at 6px 8px, transparent 5px, #FFFEFC 5.5px) 0 0 / 12px 8px repeat-x;
}
.zettel > * { position: relative; z-index: 1; }
.zettel__titel {
  margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1.5px dashed rgb(23 17 14 / .25);
  font: 800 1.15rem/1 var(--sc-font-display); font-variation-settings: "opsz" 48, "wdth" 80; letter-spacing: -.01em;
}
.zettel__bezug { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1.5px dashed rgb(23 17 14 / .25); }
.zettel__urteil { margin: 0; font-weight: 700; font-size: 1.02rem; }
.zettel.ist-sitzt .zettel__urteil { color: var(--rot-hell); }
.zettel__werte { margin: 3px 0 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); font-variant-numeric: tabular-nums; line-height: 1.45; }
.zettel__werte a { color: var(--rot-hell); font-weight: 600; }
.feld { display: grid; gap: 6px; margin-bottom: 12px; }
.feld label { font-size: var(--sc-t-sm); font-weight: 600; }
.feld input, .feld select {
  height: 46px; padding: 0 12px; border-radius: 8px;
  font: 500 1rem var(--sc-font-text); color: var(--sc-ink);
  background: #fff; border: 1px solid #A39A93;
  transition: border-color 160ms var(--sc-ease-out), box-shadow 160ms var(--sc-ease-out);
}
.feld input:focus, .feld select:focus { border-color: var(--rot); outline: none; box-shadow: 0 0 0 3px rgb(216 67 46 / .22); }
.feld__fehler { color: var(--rot-hell); font-size: var(--sc-t-xs); }
.zettel .knopf { width: 100%; margin-top: 6px; }
.zettel__hinweis { margin: 10px 0 0; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.zettel.ist-gesendet .zettel__hinweis { color: var(--rot-hell); font-weight: 600; }
.fuss {
  position: absolute; z-index: var(--sc-z-copy); inset: auto var(--sc-gutter) 14px var(--sc-gutter);
  display: flex; justify-content: space-between; gap: 1rem; font-size: var(--sc-t-xs); color: var(--sc-ink-soft);
}
.fuss__marke { font: 800 14px/1 var(--sc-font-display); font-variation-settings: "opsz" 48, "wdth" 78; color: var(--sc-ink); }
@media (max-width: 860px) {
  .bestellen__inhalt { grid-template-columns: 1fr; gap: 1rem; inset: calc(var(--leiste-h) + .8rem) 14px auto 14px; }
  .bestellen__kopf .sc-body { display: none; }
  .bestellen__kopf h2 { max-width: none; font-size: clamp(1.9rem, 1.2rem + 3vw, 2.4rem); }
  .zettel { rotate: -.6deg; padding: 20px 16px 14px; }
  .zettel__titel { margin-bottom: 10px; padding-bottom: 8px; }
  .zettel__bezug { margin-bottom: 10px; padding-bottom: 10px; }
  .feld { margin-bottom: 8px; }
  .feld input, .feld select { height: 42px; }
  .fuss { display: none; }
}
@media (max-width: 860px) and (max-height: 700px) {
  .bestellen__kopf h2 { font-size: 1.6rem; }
  .crema--klein { width: 52px; height: 52px; }
  .feld label { font-size: .8rem; }
  .feld { gap: 3px; margin-bottom: 6px; }
  .feld input, .feld select { height: 38px; }
  .zettel .knopf { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .knopf--voll::before { animation: none; }
  .leiste__wert.ist-neu b { animation: none; }
}

/* Reduced Motion auf großen Bildschirmen: das Ritual liegt als Raster still
   im Bild, statt seitlich zu fahren. Auf dem Handy bleibt die Scrollleiste. */
@media (prefers-reduced-motion: reduce) and (min-width: 900px) and (min-height: 760px) {
  .ritual__schiene {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem 3rem;
    width: 100%; max-width: 76rem; margin-inline: auto; transform: none !important;
    padding-top: calc(var(--leiste-h) + 1rem);
  }
  .ritual__kopf, .handgriff, .handgriff--foto, .ritual__schluss { width: auto; padding-right: 0; }
  .handgriff__bild, .handgriff--foto img { aspect-ratio: 16 / 9; object-fit: cover; }
  .ritual__kopf .sc-display--lg { font-size: clamp(1.8rem, 1rem + 1.6vw, 2.4rem); }
  .handgriff__verb { margin-top: .7rem; }
  .handgriff__satz { font-size: .95rem; }
}