/* Hellmoor Keramik. Seitenstil. Die Engine-Klassen (.sc-*, [data-sc-*]) bleiben
   unangetastet; hier stehen Marke, eigene Bühnen, Schale und Besatzplan. */
:root {
  --sc-canvas:     #EEF1EB;
  --sc-surface:    #FBFAF6;
  --sc-ink:        #16211B;
  --sc-ink-soft:   #45524A;
  --sc-accent:     #8A4B2A;
  --sc-accent-ink: #FBF7F1;
  --sc-font-display: "Alegreya Sans", system-ui, sans-serif;
  --sc-font-text:    "Alegreya Sans", system-ui, sans-serif;
  --sc-font-mono:    "Alegreya Sans", system-ui, sans-serif;
  --sc-shadow-color: 110 14% 30%;
  --seladon: #C9D6C8;
  --seladon-tief: #9DB3A0;
  --nacht: #141B17;
  --nacht-ink: #F1F0E8;
  --nacht-soft: #CDD3CB;
  --r: 10px;              /* ein Radius für Flächen, Knöpfe 999px */
  color-scheme: light;
}
html { background: var(--sc-canvas); scrollbar-color: #A7B4A8 var(--sc-canvas); }
body { font-family: var(--sc-font-text); background: var(--sc-canvas); color: var(--sc-ink); font-size: 1.125rem; }
::selection { background: var(--seladon); color: var(--sc-ink); }
:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; border-radius: 4px; }
input { caret-color: var(--sc-accent); }
a { color: inherit; text-underline-offset: 4px; }
.sc-grain { opacity: .035; }
[data-sc-progress] { background: var(--seladon-tief); }

.sc-display {
  font-family: var(--sc-font-display);
  font-weight: 800;
  letter-spacing: -0.022em;
  line-height: 1.02;
  color: var(--sc-ink);
}
.sc-display--xl { font-size: clamp(2.7rem, 1.5rem + 4.4vw, 5.8rem); line-height: .98; }
.sc-display--lg { font-size: clamp(2.05rem, 1.3rem + 2.5vw, 3.7rem); }
.sc-display--md { font-size: clamp(1.9rem, 1.3rem + 1.8vw, 3rem); }
.sc-body { color: var(--sc-ink-soft); font-size: clamp(1.12rem, 1.02rem + .35vw, 1.32rem); line-height: 1.55; }
@media (max-width: 700px) {
  .sc-display--xl { font-size: clamp(2.35rem, 1.4rem + 5.4vw, 3.1rem); }
  .sc-display--lg { font-size: clamp(1.75rem, 1.2rem + 3vw, 2.3rem); }
  .sc-body { font-size: 1.08rem; line-height: 1.5; }
}

/* ---------- Knöpfe ---------- */
.knopf {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 28px; border-radius: 999px; white-space: nowrap;
  font: 700 1.06rem/1 var(--sc-font-text); letter-spacing: .01em; text-decoration: none;
  color: var(--sc-accent-ink); background: var(--sc-accent); border: 0;
  box-shadow: 0 1px 0 rgb(255 255 255 / .18) inset, 0 6px 16px -8px hsl(var(--sc-shadow-color) / .55);
  transition: transform 140ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out);
  cursor: pointer;
}
/* Feines Mosaik im Knopf, ein Lichtstreif zieht alle paar Sekunden darüber. */
.knopf::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 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; } }
.knopf:active { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) { .knopf:hover { background: #7A4024; } }

.textknopf {
  font: 500 1rem/1.3 var(--sc-font-text); color: var(--sc-ink); background: none; border: 0; padding: 6px 0;
  text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--sc-accent) 60%, transparent);
  text-decoration-thickness: 1.5px; text-underline-offset: 5px; cursor: pointer;
  transition: text-decoration-color 160ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) { .textknopf:hover { text-decoration-color: var(--sc-accent); } }

/* ---------- Kopf: Töpferstempel und Brennbuch ---------- */
.kopf { position: fixed; top: 16px; left: var(--sc-gutter); z-index: var(--sc-z-chrome); }
.stempel {
  display: flex; align-items: center; gap: 10px; padding: 4px 14px 4px 4px; border: 0; border-radius: 999px;
  background: color-mix(in oklab, var(--sc-canvas) 82%, transparent);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 1px 2px hsl(var(--sc-shadow-color) / .12), 0 6px 18px -10px hsl(var(--sc-shadow-color) / .4);
  color: var(--sc-accent); cursor: pointer; transition: transform 160ms var(--sc-ease-out);
}
.stempel svg { width: 44px; height: 44px; fill: none; stroke: currentColor; stroke-width: 3; transition: transform 420ms var(--sc-ease-out); }
.stempel svg .stempel__innen { stroke-width: 1; stroke-dasharray: 2 3; }
.stempel__name { font: 800 1.12rem/1 var(--sc-font-display); letter-spacing: .02em; color: var(--sc-ink); }
.stempel:active { transform: translateY(1px); }
.stempel[aria-expanded="true"] svg { transform: rotate(-14deg); }
@media (hover: hover) and (pointer: fine) { .stempel:hover svg { transform: rotate(-8deg); } }

.brennbuch {
  position: absolute; top: calc(100% + 10px); left: 0; width: min(19rem, calc(100vw - 2 * var(--sc-gutter)));
  padding: 18px 20px 14px; border-radius: var(--r);
  background:
    repeating-linear-gradient(to bottom, transparent 0 31px, rgb(22 33 27 / .07) 31px 32px) 0 46px / 100% calc(100% - 46px) no-repeat,
    var(--sc-surface);
  box-shadow: 0 1px 0 rgb(255 255 255 / .9) inset, 0 2px 4px hsl(var(--sc-shadow-color) / .14), 0 18px 40px -14px hsl(var(--sc-shadow-color) / .45);
  rotate: -1.2deg; transform-origin: 20px 0;
}
.brennbuch:not([hidden]) { animation: zettel 260ms var(--sc-ease-out); }
@keyframes zettel { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
.brennbuch__kopf { margin: 0 0 8px; font: italic 500 1rem/1.4 var(--sc-font-text); color: var(--sc-ink-soft); }
.brennbuch ol { list-style: none; margin: 0; padding: 0; }
.brennbuch a {
  display: flex; gap: 14px; align-items: baseline; min-height: 32px; padding: 4px 0;
  font: 500 1.08rem/1.4 var(--sc-font-text); text-decoration: none; color: var(--sc-ink);
}
.brennbuch a span { flex: 0 0 4.2em; font: italic 500 .95rem/1 var(--sc-font-text); color: var(--sc-accent); font-variant-numeric: tabular-nums; }
.brennbuch a.ist-hier { font-weight: 700; }
@media (hover: hover) and (pointer: fine) { .brennbuch a:hover { text-decoration: underline; text-decoration-color: var(--sc-accent); } }

/* ---------- Schale + Risse (gemeinsam) ---------- */
.schalenbox { position: relative; aspect-ratio: 1; }
.schalenbox img { display: block; width: 100%; height: 100%; }
.riss { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* ---------- 1 Held ---------- */
.held {
  position: relative; min-height: 100svh; display: grid; align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  padding: 96px var(--sc-gutter) 56px; gap: clamp(1rem, 3vw, 3rem); overflow: clip;
}
.held__text { grid-column: 1; grid-row: 1; position: relative; z-index: 2; }
.held h1 { max-width: 11ch; }
.held__sub { max-width: 38ch; }
.held__knopf { margin-top: var(--sc-6) !important; }
.held__bild { grid-column: 2; grid-row: 1; position: relative; justify-self: center; width: min(100%, 82svh); }
.held__schatten {
  position: absolute; inset: 12% 8% 4% 14%; border-radius: 50%;
  background: radial-gradient(closest-side, hsl(110 12% 30% / .16), transparent);
  filter: blur(18px);
}
.held__bild .schalenbox img { border-radius: var(--r); }

@media (max-width: 860px) {
  .held { grid-template-columns: 1fr; align-content: start; padding-top: 88px; gap: 0; }
  .held__bild { grid-column: 1; grid-row: 1; width: min(92vw, 52svh); margin-bottom: 4px; }
  .held__text { grid-row: 2; }
  .held h1 { max-width: 12ch; }
}

/* ---------- 2 Feuer ---------- */
.feuer { --sc-canvas: var(--nacht); background: var(--nacht); color: var(--nacht-ink); }
.feuer__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.feuer__scrim {
  background: linear-gradient(to right, rgb(20 27 23 / .9) 0%, rgb(20 27 23 / .72) 30%, rgb(20 27 23 / .2) 52%, transparent 66%);
}
.feuer__text { position: absolute; z-index: var(--sc-z-copy); left: var(--sc-gutter); top: 50%; translate: 0 -50%; width: min(34rem, 42vw); display: grid; }
.feuer__text > div { grid-area: 1 / 1; }
.feuer .sc-display { color: var(--nacht-ink); letter-spacing: -0.012em; }
.feuer .sc-body { color: var(--nacht-soft); margin-top: var(--sc-4); letter-spacing: .005em; line-height: 1.6; }
.feuer__kurve { position: absolute; z-index: 2; left: var(--sc-gutter); bottom: clamp(24px, 7vh, 64px); width: min(34rem, 42vw); height: 92px; }
.feuer__kurve svg, .kuehl__kurve svg { width: 100%; height: 100%; overflow: visible; }
.kurve__achse { stroke: currentColor; stroke-opacity: .28; stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
.kurve__geist { stroke: currentColor; stroke-opacity: .2; stroke-width: 1.5; fill: none; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.kurve__linie { stroke: #E9A05A; stroke-width: 2.4; fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.kurve__punkt { fill: #E9A05A; }
.feuer__kurve { color: var(--nacht-ink); }
@media (max-width: 860px) {
  .feuer__scrim { background: linear-gradient(to top, rgb(20 27 23 / .94) 0%, rgb(20 27 23 / .8) 44%, rgb(20 27 23 / .25) 66%, transparent 80%); }
  .feuer__text { top: auto; translate: none; bottom: 132px; right: var(--sc-gutter); width: auto; }
  .feuer__kurve { right: var(--sc-gutter); width: auto; height: 70px; bottom: 36px; }
  .feuer__bild { object-position: 50% 30%; }
}

/* ---------- 3 Brennbuch (pan) ---------- */
.stunden { background: var(--sc-canvas); display: flex; align-items: center; }
.buch { gap: clamp(1rem, 2.4vw, 2rem); padding-inline: var(--sc-gutter); align-items: stretch; }
.buch > * { flex: 0 0 auto; }
.buch__vorn { width: min(26rem, 80vw); align-self: center; padding-right: 2rem; }
.buch__vorn .sc-body { margin-top: var(--sc-4); max-width: 30ch; }
.blatt {
  position: relative; width: clamp(17rem, 24vw, 22rem); padding: 14px 14px 22px; border-radius: var(--r);
  background:
    repeating-linear-gradient(to bottom, transparent 0 29px, rgb(22 33 27 / .06) 29px 30px),
    var(--sc-surface);
  box-shadow: 0 1px 0 #fff inset, 0 2px 4px hsl(var(--sc-shadow-color) / .1), 0 16px 34px -18px hsl(var(--sc-shadow-color) / .45);
}
.blatt:nth-child(odd) { rotate: .8deg; }
.blatt:nth-child(even) { rotate: -.6deg; }
.blatt img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 4.2; object-fit: cover; border-radius: 6px; }
.blatt__zeit { margin: 16px 4px 0; font: italic 500 1.1rem/1 var(--sc-font-text); color: var(--sc-accent); font-variant-numeric: tabular-nums; }
.blatt h3 { margin: 6px 4px 0; font: 800 1.7rem/1.1 var(--sc-font-display); letter-spacing: -0.015em; }
.blatt p:last-child { margin: 8px 4px 0; color: var(--sc-ink-soft); font-size: 1.06rem; line-height: 1.5; max-width: 30ch; }
.blatt--eisen, .blatt--zu { display: flex; flex-direction: column; justify-content: flex-end; }
.eisen { position: relative; flex: 1; min-height: 12rem; border-radius: 6px; overflow: hidden; background: #E9E6DD; }
.eisen i { position: absolute; inset: 0; }
.eisen__rot { background: radial-gradient(70% 70% at 30% 40%, #A86A42, #8A4B2A 60%, #6D3A20); clip-path: polygon(0 0, 62% 0, 38% 100%, 0 100%); }
.eisen__gruen { background: radial-gradient(70% 70% at 70% 50%, #D3DFD2, #B5C8B5 55%, #93AC97); clip-path: polygon(62% 0, 100% 0, 100% 100%, 38% 100%); }
.blatt--zu { background:
    repeating-linear-gradient(to bottom, transparent 0 29px, rgb(22 33 27 / .06) 29px 30px),
    var(--seladon); }
.blatt--zu::before { /* zugemauerte Öffnung als kleine Zeichnung */
  content: ""; flex: 1; min-height: 12rem; border-radius: 6px;
  background:
    repeating-linear-gradient(to bottom, transparent 0 22px, rgb(22 33 27 / .25) 22px 24px),
    linear-gradient(90deg, transparent 0 48%, rgb(22 33 27 / .25) 48% 50%, transparent 50%) 0 0 / 46px 48px,
    linear-gradient(90deg, transparent 0 48%, rgb(22 33 27 / .25) 48% 50%, transparent 50%) 23px 24px / 46px 48px,
    #DCD5C6;
}
.blatt--zu p:last-child { color: #33403A; }
@media (prefers-reduced-motion: no-preference) {
  .blatt { opacity: max(.55, min(1, calc(var(--sc-p, 0) * 6 - var(--i, 0) * .9 + 1))); transition: opacity 200ms linear; }
  .blatt:nth-of-type(1) { --i: 0; } .blatt:nth-of-type(2) { --i: 1; } .blatt:nth-of-type(3) { --i: 2; } .blatt:nth-of-type(4) { --i: 3; }
}
@media (max-width: 700px) { .blatt { width: 76vw; } .blatt img { aspect-ratio: 4 / 3.2; } .eisen, .blatt--zu::before { min-height: 9rem; } }

/* ---------- 4 Zumauern ---------- */
.zumauern { background: var(--seladon); padding-block: clamp(4.5rem, 12vw, 10rem); }
.zumauern .sc-body { color: #33403A; max-width: 40ch; }
.zumauern__innen { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: center; }
.mauer { display: grid; grid-template-columns: repeat(3, 34px); gap: 4px; }
.mauer i { height: 16px; background: #B9AE9C; border-radius: 2px; box-shadow: 0 1px 0 rgb(255 255 255 / .35) inset; }
.mauer i:nth-child(6n+4), .mauer i:nth-child(6n+5), .mauer i:nth-child(6n+6) { translate: 17px 0; }
@media (max-width: 700px) { .zumauern__innen { grid-template-columns: 1fr; } }

/* ---------- 5 Abkühlen (Höhepunkt) ---------- */
.kuehl { background: var(--sc-canvas); }
.kuehl__glut { /* der ganze Ofenraum glüht am Anfang mit */
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 70% at 70% 50%, #F1B37A, #E8D6C0 70%);
  opacity: calc(var(--glut, 0) * .55);
}
.kuehl__bild { position: absolute; top: 50%; right: max(var(--sc-gutter), 4vw); translate: 0 -54%; width: min(48vw, 80svh); }
.schalenbox--gross img { border-radius: 50%; clip-path: circle(46% at 49.3% 48.3%); }
.schalenbox__glut {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 49.3% 48.3%, #FFE9A8 0%, #FFB45A 20%, #F07A2A 33%, rgb(190 70 20 / .55) 38%, rgb(160 60 20 / 0) 47%);
  mix-blend-mode: screen;
  opacity: var(--glut, 0);
}
.kuehl__text { position: absolute; z-index: var(--sc-z-copy); left: var(--sc-gutter); top: 46%; translate: 0 -50%; width: min(30rem, 38vw); display: grid; }
.kuehl__text > div { grid-area: 1 / 1; }
.kuehl__text .sc-body { margin-top: var(--sc-4); }
.netznr { color: var(--sc-accent); font-variant-numeric: tabular-nums; }
.kuehl__neu { margin-top: var(--sc-4); }
.kuehl__fuss { position: absolute; z-index: var(--sc-z-copy); left: var(--sc-gutter); bottom: clamp(20px, 6vh, 56px); width: min(30rem, 38vw); }
.kuehl__kurve { position: relative; height: 76px; color: var(--sc-ink); }
.kuehl__kurve .kurve__linie { stroke: var(--sc-accent); }
.kuehl__kurve .kurve__punkt { fill: var(--sc-accent); }
.kuehl__grad {
  position: absolute; top: -6px; left: 0; translate: -50% -100%; white-space: nowrap;
  font: 700 .98rem/1 var(--sc-font-text); font-variant-numeric: tabular-nums; color: var(--sc-ink);
}
.textknopf--ton { margin-top: 10px; font-size: .98rem; }
@media (max-width: 860px) {
  .kuehl__bild { top: 76px; right: auto; left: 50%; translate: -50% 0; width: min(84vw, 44svh); }
  .kuehl__text { top: auto; translate: none; bottom: 128px; right: var(--sc-gutter); width: auto; }
  .kuehl__fuss { right: var(--sc-gutter); width: auto; bottom: 16px; }
  .kuehl__kurve { height: 54px; }
  .textknopf--ton { margin-top: 2px; }
}
@media (max-width: 400px) and (max-height: 700px) {
  .kuehl__bild { top: 64px; width: min(70vw, 36svh); }
  .kuehl__text .sc-body { font-size: 1rem; line-height: 1.42; margin-top: 6px; }
  .kuehl__text .sc-display--lg { font-size: 1.55rem; }
  .kuehl__text { bottom: 112px; }
  .kuehl__kurve { height: 44px; }
}

/* ---------- 6 In der Hand ---------- */
.hand { padding-top: clamp(4rem, 8vw, 7rem); }
.hand__raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: clamp(1.5rem, 4vw, 4rem) clamp(2rem, 5vw, 5.5rem); align-items: start; }
.hand__gross { grid-row: 1 / span 2; margin: 0; }
.hand__gross img, .hand__klein img { display: block; width: 100%; height: auto; border-radius: var(--r); }
.hand__text { padding-top: 2rem; }
.hand__text .sc-body { max-width: 40ch; }
.hand__klein { margin: 0; width: 72%; justify-self: end; }
.hand__klein figcaption { margin-top: 10px; font-size: 1rem; color: var(--sc-ink-soft); font-style: italic; }
.etikett {
  margin-top: var(--sc-6) !important; padding: 12px 0; border-block: 1px solid rgb(22 33 27 / .18);
  font: 500 1.1rem/1.45 var(--sc-font-text); color: var(--sc-ink); max-width: 40ch;
}
.pflege { margin: var(--sc-6) 0 0; display: grid; gap: 18px; }
.pflege dt { font: 800 1.2rem/1.2 var(--sc-font-display); }
.pflege dd { margin: 4px 0 0; color: var(--sc-ink-soft); line-height: 1.55; max-width: 44ch; }
@media (max-width: 860px) {
  .hand__raster { grid-template-columns: 1fr; }
  .hand__gross { grid-row: auto; }
  .hand__text { padding-top: 0; }
  .hand__klein { width: 80%; }
}

/* ---------- 7 Nächster Brand ---------- */
.schluss { background: var(--sc-canvas); display: flex; flex-direction: column; justify-content: center; }
.schluss__innen {
  width: 100%; max-width: var(--sc-maxw); margin-inline: auto; padding: 84px var(--sc-gutter) 70px;
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 5rem); align-items: center;
}
.schluss__kopf .sc-body { margin-top: var(--sc-4); max-width: 34ch; }
.besatz__plan { border: 0; margin: 0; padding: 0; display: grid; gap: 14px; }
.besatz__legende { padding: 0; margin-bottom: 10px; font: italic 500 1rem/1.3 var(--sc-font-text); color: var(--sc-ink-soft); }
.platte {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; padding: 14px; border-radius: var(--r);
  background:
    radial-gradient(rgb(22 33 27 / .07) 1px, transparent 1.4px) 0 0 / 9px 9px,
    #E4E1D6;
  box-shadow: 0 1px 0 rgb(255 255 255 / .7) inset, 0 2px 3px hsl(var(--sc-shadow-color) / .12), 0 12px 24px -16px hsl(var(--sc-shadow-color) / .5);
}
.platz {
  position: relative; aspect-ratio: 1; width: 100%; min-width: 44px; border-radius: 50%; padding: 0; cursor: pointer;
  background: transparent; border: 1.5px dashed rgb(22 33 27 / .38);
  transition: transform 140ms var(--sc-ease-out), border-color 160ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out);
}
.platz:disabled {
  cursor: default; border: 0;
  background: radial-gradient(circle at 46% 44%, #C4D3C3 0 30%, #A9BDAA 58%, #9AAF9B 64%, #8E8070 66%, #8E8070 70%, transparent 71%);
}
.platz:disabled::after { /* ein Hauch Netz auf den schon vergebenen Schalen */
  content: ""; position: absolute; inset: 22%; border-radius: 50%; opacity: .5;
  background:
    linear-gradient(32deg, transparent 47%, rgb(40 60 48 / .5) 48% 50%, transparent 51%),
    linear-gradient(118deg, transparent 47%, rgb(40 60 48 / .45) 48% 50%, transparent 51%),
    linear-gradient(76deg, transparent 60%, rgb(40 60 48 / .35) 61% 63%, transparent 64%);
}
.platz[aria-pressed="true"] { border: 3px solid var(--sc-accent); background: radial-gradient(circle, var(--seladon) 0 52%, transparent 54%); }
.platz:not(:disabled):active { transform: scale(.95); }
@media (hover: hover) and (pointer: fine) { .platz:not(:disabled):hover { border-color: var(--sc-accent); background: rgb(138 75 42 / .07); } }
.besatz__wahl { margin: 14px 0 0; font-size: 1.08rem; color: var(--sc-ink); min-height: 1.5em; }
.besatz__wahl b { color: var(--sc-accent); }
.besatz__zeile { margin-top: 14px; }
.besatz__zeile label { display: block; font-weight: 500; font-size: 1rem; margin-bottom: 6px; }
.besatz__eingabe { display: flex; gap: 10px; }
.besatz__eingabe input {
  flex: 1; min-width: 0; min-height: 52px; padding: 0 16px; border-radius: var(--r);
  border: 1.5px solid rgb(22 33 27 / .35); background: var(--sc-surface); color: var(--sc-ink);
  font: 400 1.08rem var(--sc-font-text);
}
.besatz__eingabe input:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; border-color: var(--sc-accent); }
.besatz__fehler { display: block; margin-top: 6px; color: #8A2E1C; font-size: .98rem; }
.besatz__hinweis { margin: 10px 0 0; font-size: .98rem; color: var(--sc-ink-soft); }
.fuss {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 14px var(--sc-gutter);
  display: flex; gap: 8px 24px; flex-wrap: wrap; justify-content: space-between;
  font-size: .95rem; color: var(--sc-ink-soft); border-top: 1px solid rgb(22 33 27 / .1);
}
.fuss__marke { font-weight: 800; color: var(--sc-ink); }
@media (max-width: 860px) {
  .schluss { justify-content: flex-start; }
  .schluss__innen { grid-template-columns: 1fr; gap: 14px; padding-top: 78px; padding-bottom: 0; }
  .platte { gap: 6px; padding: 9px; }
  .platz { min-width: 0; }
  .besatz__plan { gap: 8px; }
  .besatz__legende { margin-bottom: 4px; }
  .besatz__wahl { margin-top: 8px; }
  .besatz__zeile { margin-top: 6px; }
  .besatz__eingabe .knopf { padding: 0 18px; }
  .fuss { padding-block: 8px; font-size: .85rem; }
  .fuss span:not(.fuss__marke) { flex-basis: 100%; }
}
@media (max-width: 400px) and (max-height: 700px) {
  .schluss__innen { padding-top: 68px; gap: 8px; }
  .schluss__kopf .sc-display--lg { font-size: 1.6rem; }
  .schluss__kopf .sc-body { font-size: 1rem; line-height: 1.4; margin-top: 6px; }
  .besatz__legende { display: none; }
  .besatz__eingabe input, .besatz__eingabe .knopf { min-height: 46px; }
  .besatz__hinweis { margin-top: 4px; font-size: .9rem; }
  .fuss { display: none; }
}
@media (max-width: 860px) and (max-height: 700px) { .fuss { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .knopf::before { animation: none; }
  .brennbuch:not([hidden]) { animation: none; }
}
.kuehl__grad::after { content: ""; position: absolute; left: 50%; bottom: -11px; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: var(--sc-accent); box-shadow: 0 0 0 3px var(--sc-canvas); }

/* Nachträge aus der Prüfung */
.besatz, .schluss__innen > * { min-width: 0; }
@media (max-width: 400px) {
  .besatz__eingabe .knopf { padding: 0 14px; font-size: 1rem; }
}
@media (max-width: 860px) {
  /* Handy: Bild oben mit sichtbarer Glut, Text darunter auf Nachtgrund */
  .feuer picture { position: absolute; inset: 0 0 auto 0; height: 58%; display: block; }
  .feuer__bild { object-position: 50% 78%; mask-image: linear-gradient(to bottom, #000 72%, transparent); -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent); }
  .feuer__scrim { display: none; }
  .feuer__text { bottom: 118px; }
}

.blatt--zu .blatt__zeit { color: #6A381E; }