/* ============================================================
   HEBEBÜHNE · styles
   One file, read top to bottom in page order. Every banner below
   is named like the data-sid of the section it styles.
   The first screen (buehne, tafel, kopf, ansage, heute, eintragen)
   is the approved draft D; its font-sensitive boxes are FIXED
   on purpose (CLS 0, see the comments where they are).
   ============================================================ */

/* ============================================================
   FONTS: self-hosted latin subsets (fonts/), OFL licensed.
   block, not swap: see the preload comment in index.html (CLS 0).
   ============================================================ */
@font-face { font-family: 'Caveat Brush'; font-style: normal; font-weight: 400; font-display: block; src: url(fonts/caveatbrush-latin.woff2?v=7e1fba9b) format('woff2'); }
@font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 400; font-display: block; src: url(fonts/spacemono-400-latin.woff2?v=049dfc59) format('woff2'); }
@font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 700; font-display: block; src: url(fonts/spacemono-700-latin.woff2?v=e5e90899) format('woff2'); }

/* ============================================================
   TOKENS
   Board side: board black, chalk white, paper, ONE accent (signal green) whose job is
   "this is yours / this is free". Photo side: no added colour at all, the photo's own
   orange lift arms are the only warm note. Two accents would be two stories.
   ============================================================ */
:root {
  --board: #16181a;
  --board-deep: #0e0f10;
  --chalk: #ece8de;
  --chalk-dim: rgba(236, 232, 222, .7);
  --green: #3ccf6e;
  --green-deep: #1f8a45;
  --green-ink: #17703a; /* green text on paper: --green itself fails AA on #efe9dc */
  --paper: #efe9dc;
  --paper-edge: #d9d0bd;
  --ink: #23221f;
  --ink-soft: #57534a;
  --red: #b3261e;
  --hand: 'Caveat Brush', 'Segoe Print', 'Bradley Hand', cursive;
  --mono: 'Space Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --shadow-card: 0 12px 18px -10px rgba(0, 0, 0, .75), 0 3px 4px rgba(0, 0, 0, .45), 8px 16px 14px -12px rgba(0, 0, 0, .7);
  --paper-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .38 0 0 0 0 .32 0 0 0 0 .22 .5 0 0 0 -.16'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
html { background: var(--board-deep); }
body {
  background: var(--board-deep);
  color: var(--chalk);
  font: 400 15px/1.5 var(--mono);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--green); color: #0b0c0d; padding: 10px 14px; font: 700 13px var(--mono); }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px dashed var(--green); outline-offset: 4px; }

/* ============================================================
   STAGE: the board on the wall left, the bay with the real lift right.
   A grid, not draft D's absolute split: once the booking sheet opens
   under the board, the column grows, and the photo must NOT grow with
   it (the layered car would rescale). So the bay is sticky at one
   screen height and stays in view while the visitor fills the sheet.
   ============================================================ */
.stage { --colw: min(680px, 46vw); display: grid; grid-template-columns: var(--colw) 1fr; align-items: start; }
.scene { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: #141516; }

/* ============================================================
   SCENE (data-sid="buehne"): one real photo, cut into layers
   .bay is the photo's own coordinate box (1820 x 1213). Every layer sits at its pixel rect
   in that box as percentages, so all layers scale together. Back to front:
   bg photo (car included, so first paint is the finished picture) -> clean wall patch
   (only where the rising car uncovers wall) -> shadow -> car + arms -> front post (static)
   -> carriage housing (rides up with the car, sits in front of the post).
   ============================================================ */
.bay { position: absolute; top: 50%; left: 0; height: max(100%, calc((100vw - var(--colw)) * .8424)); aspect-ratio: 1820/1213; transform: translate(-20.88%, -50%); }
.bay img, .bay .shade { position: absolute; display: block; max-width: none; }
.bay .bg { left: 0; top: 0; width: 100%; height: 100%; }
.ly-patch { left: 20.440%; top: 11.294%; width: 79.560%; height: 78.071%; }
.ly-car { left: 22.857%; top: 14.922%; width: 77.143%; height: 70.816%; }
.ly-post { left: 77.967%; top: 0; width: 15.824%; height: 100%; }
.ly-front { left: 75.659%; top: 58.533%; width: 18.242%; height: 23.825%; }
/* the shadow under the sill: starts at the car's underside, grows as the gap opens */
.bay .shade { left: 20%; top: 79%; width: 66%; height: 6%; transform-origin: 50% 0; opacity: 0;
  background: radial-gradient(50% 100% at 50% 0, rgba(0,0,0,.6), rgba(0,0,0,.25) 55%, rgba(0,0,0,0)); }
#car, #front, #shade { will-change: transform; }

/* ============================================================
   BOARD (data-sid="tafel"): the job board screwed to the wall next to the bay
   Layer order, back to front: enamel + texture, ghost writing, lamp pool, content.
   ============================================================ */
.board {
  grid-column: 1; grid-row: 1;
  position: relative;
  z-index: 2;
  min-height: 100vh;
  min-height: 100svh;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 18px 30px 64px 48px;
  background: radial-gradient(120% 90% at 50% 0%, #1c1f21 0%, var(--board) 45%, var(--board-deep) 100%);
  /* aluminium rail: the right edge is the seam to the bay, so the board reads as an object on the wall */
  border: 10px solid #2c2f31;
  border-image: linear-gradient(180deg, #5d6266 0%, #34383b 18%, #24272a 60%, #3a3e41 100%) 1;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.8), inset 0 18px 30px rgba(0,0,0,.55), 14px 0 30px -10px rgba(0,0,0,.6);
}
.layer { position: absolute; inset: 0; pointer-events: none; }
/* real photo of a wiped blackboard (Pexels, see CREDITS.md), pre-darkened in the file itself */
.tex { z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: .92; }
/* yesterday's board, wiped with a rag: words survive as ghosts */
.ghosts { z-index: -1; }
.ghosts span { position: absolute; font-family: var(--hand); color: var(--chalk); white-space: nowrap; filter: blur(1.4px); transform: rotate(var(--r, -3deg)); }
/* the workshop lamp: one warm pool from above the cards */
.light {
  z-index: -1;
  mix-blend-mode: screen;
  background:
    radial-gradient(60% 55% at 64% -6%, rgba(255, 232, 192, .30), rgba(255, 232, 192, .08) 50%, transparent 76%),
    radial-gradient(70% 30% at 50% 108%, rgba(0,0,0,.5), transparent 70%);
}
.intro .light { animation: lamp-on .55s steps(1, end) both; }
@keyframes lamp-on { 0% { opacity: 0; } 18% { opacity: .7; } 30% { opacity: .1; } 46% { opacity: .9; } 58% { opacity: .35; } 70%, 100% { opacity: 1; } }

/* ============================================================
   KOPF (data-sid="kopf"): mono micro-labels on the rail
   ============================================================ */
.head {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 16px;
  font-size: 11px; line-height: 16px; letter-spacing: .14em; text-transform: uppercase; color: var(--chalk-dim);
}
.head b { color: var(--chalk); font-weight: 700; }
/* the date is written by main.js ("Mi 21.10." / "Wed 21.10."): a fixed box of 10 mono characters,
   so a longer weekday never pushes the text after it (CLS 0) */
[data-today] { display: inline-block; width: calc(10ch + 10 * .16em); white-space: nowrap; }
/* same for the board's name next to it ("Auftragstafel" / "Job board") */
.head .date > span:first-child { display: inline-block; width: calc(13ch + 13 * .14em); }
/* the name line always owns row 1 and never wraps: a font swap cannot change the header's row count */
.head > span:first-child { flex-basis: 100%; white-space: nowrap; }
/* fixed box pinned to the right edge, text left-aligned in it: neither Space Mono arriving nor
   the English "fictional" can move where the text starts (CLS 0) */
.head a { box-sizing: content-box; width: 212px; text-align: left; color: var(--chalk); text-decoration: none; border-bottom: 1px solid rgba(236,232,222,.35); padding: 8px 0 2px; white-space: nowrap; }
.head a:hover { border-bottom-color: var(--green); color: #fff; }
/* language switch: a fixed 44 px target, so DE/EN never changes the row */
.head .lang { width: 44px; height: 30px; margin-left: auto; padding: 0; border: 1px solid rgba(236,232,222,.35); border-radius: 2px; background: transparent; color: var(--chalk); font: 700 11px/1 var(--mono); letter-spacing: .1em; cursor: pointer; }
.head .lang:hover { border-color: var(--green); }

/* ============================================================
   ANSAGE (data-sid="ansage"): what the owner wrote on the board
   ============================================================ */
.grease { filter: url(#grease); }
h1 {
  margin: clamp(18px, 4vh, 40px) 0 0;
  font: 400 clamp(58px, 6vw, 88px)/.9 var(--hand);
  letter-spacing: -.005em;
}
/* every line nowrap: the font can only change width, never the line count (CLS 0) */
h1 .l { display: block; white-space: nowrap; }
h1 .l2 { padding-left: .55em; }
/* fixed width in em (measured on Caveat Brush): the underline cannot move when the font arrives */
h1 .l3 { position: relative; width: 7.9em; margin-top: .3em; font-size: .56em; }
/* hand-drawn double underline under the promise, in the one accent */
h1 .l3 svg { position: absolute; left: -2%; bottom: -.32em; width: 104%; height: .5em; overflow: visible; }
h1 .l3 path { fill: none; stroke: var(--green); stroke-width: 3.2; stroke-linecap: round; }

.rules { margin: 22px 0 0; display: grid; gap: 8px; }
.rule { margin: 0; display: grid; grid-template-columns: 9em 1fr; gap: 2px 12px; align-items: baseline; }
.rule dt { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--chalk-dim); }
.rule dd { margin: 0; font: 400 21px/1.15 var(--hand); white-space: nowrap; }
/* explicit line breaks instead of wrapping (same trick as the h1): line count is fixed, CLS 0.
   Wide boards show each rule on one line, narrow ones break at the <br class="n">. */
.rule br.n { display: none; }
@media (max-width: 1199px) { .rule { grid-template-columns: 1fr; } .rule br.n { display: inline; } }
.rule dd em { font-style: normal; color: #fff; border-bottom: 2px solid rgba(236,232,222,.4); }

/* ============================================================
   HEUTE (data-sid="heute"): the day's job cards, held by magnets.
   Filled from the stored bookings; always four boxes, one of them free.
   ============================================================ */
.today { margin-top: 24px; min-width: 0; }
.today h2 { height: 34px; margin: 0 0 10px; display: flex; align-items: flex-end; /* box edges, not font baselines: font-independent */ gap: 12px; font: 400 32px/1 var(--hand); }
.today h2 .hw { flex: none; width: 4.3em; white-space: nowrap; } /* never shrinks: a long label beside it must not squeeze it */ /* fixed for the widest word ("Tomorrow"): the label after it never moves */
.today h2 small { height: 18px; padding-bottom: 7px; font: 400 10.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--chalk-dim); white-space: nowrap; }
/* fixed height and top-aligned date box: the line cannot grow when Space Mono replaces the fallback */
.today h2 small [data-today] { vertical-align: top; }
.cards {
  list-style: none; margin: 0 -8px; padding: 12px 8px 14px;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(124px, 1fr); gap: 14px;
  /* narrow screens: a rail you swipe, scrolled to the free slot on load (scrolling is not a layout shift) */
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.cards::-webkit-scrollbar { display: none; }
.cards > li { scroll-snap-align: start; position: relative; }
.card {
  position: relative; height: 128px; padding: 16px 11px 10px; color: var(--ink);
  transform: rotate(var(--r, 0deg)); transform-origin: 50% 8px; /* it hangs from its magnet */
  border-radius: 1px 2px 3px 1px;
  background: linear-gradient(172deg, rgba(255,255,255,.35) 0%, transparent 35%, transparent 70%, rgba(120,100,70,.14) 100%), var(--paper-noise), var(--paper);
  box-shadow: var(--shadow-card);
}
.card::before { content: ""; position: absolute; right: 0; bottom: 0; width: 20px; height: 17px; border-radius: 0 0 3px 0;
  background: linear-gradient(135deg, transparent 48%, rgba(255,255,255,.55) 52%, var(--paper-edge) 100%); }
.magnet {
  position: absolute; left: 50%; top: -9px; z-index: 2; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #fff 0 9%, #d6dadd 17%, #8a9196 46%, #3a3f43 82%, #202427 100%);
  box-shadow: 0 5px 6px -1px rgba(0,0,0,.65), 0 1px 1px rgba(0,0,0,.6), inset 0 -2px 3px rgba(0,0,0,.35);
}
.card .t { display: flex; justify-content: space-between; align-items: baseline; gap: 4px; font: 700 17px/1 var(--mono); letter-spacing: -.02em; }
.card .t i { white-space: nowrap; font: 400 8.5px/1 var(--mono); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
/* the lift label sits in a fixed, left-aligned box: "Bühne 1" and "Lift 1" start at the same x,
   so the language switch or the data refresh never moves a text node (CLS 0) */
.card .t i, .slot > .t i { flex: none; width: 5.4em; text-align: left; }
.card .car { margin: 8px 0 2px; font: 400 20px/1.05 var(--hand); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .what { margin: 3px 0 0; font: 400 16.5px/1.1 var(--hand); color: #3b3a35; white-space: nowrap; }
/* Austrian plate: white field, red-white-red bars top and bottom */
.plate { display: inline-block; padding: 1px 4px 0; font: 700 9.5px/1.5 var(--mono); letter-spacing: .06em; color: #111;
  background: #fbfbf8; border: 1px solid #333; box-shadow: inset 0 2px 0 #c8102e, inset 0 -2px 0 #c8102e; border-radius: 2px; }
/* a real customer's booking: the board says "taken", never whose car it is */
.card.private .car { color: var(--ink-soft); }
/* an empty cell (a quiet day): chalk outline only, same box */
.cell-empty { height: 128px; border-radius: 3px; outline: 1px dashed rgba(236,232,222,.14); outline-offset: -4px; }

/* the free slot: a chalk-outlined gap in the row, waiting for the visitor's card */
.slot { position: relative; height: 128px; padding: 15px 11px 10px; border-radius: 3px; outline: 2px dashed rgba(236,232,222,.34); outline-offset: -4px; }
.slot > .t { display: flex; justify-content: space-between; align-items: baseline; font: 700 17px/1 var(--mono); }
.slot > .t i { font: 400 8.5px/1 var(--mono); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--chalk-dim); }
.slot .frei { display: block; margin-top: 12px; font: 400 34px/1 var(--hand); color: var(--green); }
.slot .magnet-wait { position: absolute; left: 50%; top: -9px; margin-left: -11px; width: 22px; height: 22px; border-radius: 50%; border: 1.5px dashed rgba(236,232,222,.4); }
.slot.taken > .frei, .slot.taken > .t, .slot.taken > .magnet-wait { visibility: hidden; }
/* the visitor's card: same paper, green magnet, hidden until it is pinned */
.mine { position: absolute; inset: 0; visibility: hidden; }
.mine .magnet { background: radial-gradient(circle at 36% 30%, #f3fff6 0 9%, #9cf0b8 18%, var(--green) 48%, var(--green-deep) 85%, #0f4a24 100%); }
.mine .t i { color: var(--green-ink); font-weight: 700; }
.mine .what { white-space: normal; }
.mine .no { position: absolute; left: 11px; bottom: 9px; font: 700 10px/1 var(--mono); letter-spacing: .08em; color: var(--green-ink); }
.pinned .mine { visibility: visible; }
.word { white-space: nowrap; }
.w { display: inline-block; white-space: pre; }

/* ============================================================
   EINTRAGEN (data-sid="eintragen"): choose the job, press once
   ============================================================ */
.book { margin: 18px 0 0; padding: 0; border: 0; min-width: 0; }
.book legend { padding: 0; margin-bottom: 4px; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--chalk-dim); }
.jobs { display: flex; flex-wrap: nowrap; gap: 2px 4px; margin: 0 0 12px -10px; }
.job { position: relative; cursor: pointer; }
.job input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.job span { position: relative; display: block; white-space: nowrap; padding: 5px 14px 7px; font: 400 28px/1.1 var(--hand); color: var(--chalk-dim); transition: color .2s; }
/* fixed widths (em of Caveat Brush) so the row never re-flows when the font or the language arrives */
.job:nth-child(1) span { width: 3.5em; } .job:nth-child(2) span { width: 5.8em; } .job:nth-child(3) span { width: 3.4em; }
.job:hover span { color: var(--chalk); }
.job input:checked + span { color: #fff; }
.job input:focus-visible + span { outline: 2px dashed var(--green); outline-offset: 2px; }
/* the owner circles your choice with the green grease pencil */
.job svg { position: absolute; inset: -5px -6px -3px; width: calc(100% + 12px); height: calc(100% + 8px); overflow: visible; pointer-events: none; }
.job svg path { fill: none; stroke: var(--green); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
.job input:checked ~ svg path { opacity: 1; stroke-dashoffset: 0; transition: stroke-dashoffset .32s cubic-bezier(.3,.7,.2,1); }

.go-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.go {
  appearance: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 12px; width: 286px; min-height: 54px; padding: 0 18px; white-space: nowrap;
  font: 700 14px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #07130b;
  /* a strip of green enamel, lit from above: lighter top edge, darker lip */
  background: linear-gradient(180deg, #5be08a 0%, var(--green) 38%, #2fb75d 100%);
  border-radius: 3px;
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 -2px 0 rgba(0,0,0,.18) inset, 0 10px 18px -8px rgba(0,0,0,.8), 0 0 0 1px #0a3a1b;
  transition: transform .15s, box-shadow .15s;
}
.go:hover { transform: translateY(-1px); }
.go:active { transform: translateY(1px); }
.go[disabled] { cursor: progress; filter: saturate(.4); transform: none; }
/* the magnet you are about to pin, sitting on the button */
.go .dot { width: 16px; height: 16px; flex: none; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 12%, #b9c0c4 26%, #5d6468 62%, #24282b 100%); box-shadow: 0 2px 3px rgba(0,0,0,.5); }
.status { flex: 1 1 14em; min-height: 3em; margin: 0; font-size: 12px; line-height: 1.5; letter-spacing: .04em; color: var(--chalk-dim); }
.status strong { color: var(--green); font-weight: 700; }

.foot { position: absolute; left: 48px; right: 30px; bottom: 34px; margin: 0; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--chalk-dim); }
/* bottom ledge with the grease pencil lying in it: the depth cue that the board is a wall object */
.ledge { position: absolute; left: 0; right: 0; bottom: 0; height: 22px; z-index: 1;
  background: linear-gradient(180deg, #4a4f53 0%, #2a2e31 30%, #1a1c1e 100%); box-shadow: 0 -10px 18px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.18); }
.pencil { position: absolute; bottom: 12px; right: 14%; width: 150px; height: 12px; z-index: 2; transform: rotate(-1.5deg); border-radius: 2px 7px 7px 2px;
  background: linear-gradient(180deg, #f6f3ea 0%, #ddd8cb 45%, #a49f93 100%); box-shadow: 0 6px 6px -2px rgba(0,0,0,.6); }
.pencil::before { content: ""; position: absolute; left: -15px; top: 2px; width: 17px; height: 8px; border-radius: 6px 0 0 6px; background: linear-gradient(180deg, #fbfaf4, #cfcabd); }

/* ============================================================
   AUFTRAG (data-sid="auftrag"): the booking slip under the board.
   Paper, clipped to the board's ledge by a steel clip. Mono for
   what is printed on the slip, handwriting only for what you chose.
   ============================================================ */
.sheet { grid-column: 1; grid-row: 2; position: relative; padding: 0 30px 56px 48px; background: var(--board-deep); }
.sheet[hidden] { display: none; }
.clip { position: absolute; left: 50%; top: -6px; z-index: 2; width: 64px; height: 26px; margin-left: -32px; border-radius: 3px 3px 8px 8px;
  background: linear-gradient(180deg, #c9cdd0, #7d8387 60%, #4b5054); box-shadow: 0 6px 8px -2px rgba(0,0,0,.6); }
.paper {
  position: relative; margin-top: 4px; padding: 30px 26px 26px; color: var(--ink);
  background: linear-gradient(180deg, rgba(255,255,255,.3), transparent 30%), var(--paper-noise), var(--paper);
  box-shadow: var(--shadow-card);
}
.paper h2 { margin: 0; font: 700 13px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); }
.paper h2:focus { outline: none; }
.sheet-job { margin: 6px 0 0; font: 400 30px/1.1 var(--hand); }
.paper fieldset { margin: 22px 0 0; padding: 0; border: 0; min-width: 0; }
.paper legend { padding: 0; margin-bottom: 8px; font: 700 11px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }

/* day and time chips: printed boxes, the chosen one is circled in green like on the board */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { position: relative; flex: none; }
.chip input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.chip span { display: block; min-width: 64px; padding: 9px 10px; text-align: center; border: 1px solid #b9b09c; border-radius: 2px; font: 700 13px/1.2 var(--mono); background: rgba(255,255,255,.35); }
.chip span small { display: block; font-weight: 400; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.chip input:checked + span { border-color: var(--green-deep); box-shadow: inset 0 0 0 2px var(--green); background: #fff; }
.chip input:focus-visible + span { outline: 2px dashed var(--green-deep); outline-offset: 2px; }
.chip:hover span { border-color: var(--ink); }
.none { margin: 0; font-size: 13px; color: var(--ink-soft); }

.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.field { display: block; margin-top: 8px; }
.field > span { display: block; font-size: 12px; color: var(--ink-soft); }
.field small { font-size: 11px; }
.field input {
  width: 100%; min-height: 44px; padding: 6px 2px 4px; border: 0; border-bottom: 2px solid #8f8774; border-radius: 0;
  background: transparent; color: var(--ink); font: 400 24px/1.2 var(--hand);
}
.field input:focus { outline: none; border-bottom-color: var(--green-deep); background: rgba(255,255,255,.4); }
.field input[aria-invalid="true"] { border-bottom-color: var(--red); }

/* the Pickerl: a round sticker with twelve punch holes. Punching = choosing. */
.punch { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; max-width: 460px; }
.pm { position: relative; }
.pm input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.pm span { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 0; font: 700 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.pm span::before { content: ""; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #8f8774; background: rgba(255,255,255,.5); }
.pm input:checked + span::before { border-color: var(--ink); background: radial-gradient(circle, var(--board) 55%, #000 100%); box-shadow: inset 0 2px 3px rgba(0,0,0,.8); }
.pm input:focus-visible + span { outline: 2px dashed var(--green-deep); outline-offset: 1px; }
.f-punch[disabled] { opacity: .45; }
.window { min-height: 1.5em; margin: 10px 0 0; font: 400 22px/1.2 var(--hand); }
.window .off { color: var(--red); }

.check { display: grid; grid-template-columns: 26px 1fr; gap: 8px; align-items: start; margin-top: 18px; font-size: 13px; line-height: 1.5; cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--green-deep); }
.check a { color: var(--ink); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ferr { margin: 4px 0 0; font-size: 12px; color: var(--red); }
.ferr:empty { display: none; }
.send-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 22px; }
.err { flex: 1 1 14em; margin: 0; font-size: 13px; color: var(--red); }

/* the answer: a rubber-stamped number on the same slip */
.done p { margin: 12px 0 0; font-size: 14px; }
.stamp { display: inline-block; margin-top: 14px !important; padding: 6px 14px; border: 3px solid var(--green-ink); border-radius: 4px; transform: rotate(-3deg);
  font: 700 30px/1 var(--mono) !important; letter-spacing: .06em; color: var(--green-ink); }
.done .ics { width: auto; margin-top: 8px; }

/* ============================================================
   PAGE SECTIONS below the stage: the rest of the wall.
   One shared frame; each section has ONE quiet idea of its own.
   ============================================================ */
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 48px; }
.prices h2, .window-sec h2, .tyres h2, .shop h2, .faq h2, .fuss h2 { margin: 0; font: 400 clamp(40px, 4.6vw, 60px)/1 var(--hand); }
.lead { max-width: 40em; margin: 16px 0 0; font-size: 15px; line-height: 1.6; }
.note { margin: 18px 0 0; font-size: 12px; color: var(--ink-soft); }

/* ============================================================
   LEISTUNGEN (data-sid="leistungen"): a printed price list on paper.
   Idea: the "Beispielpreise" rubber stamp across it. Template honesty,
   made visible where nobody can miss it.
   ============================================================ */
.prices { position: relative; padding: 88px 0 80px; color: var(--ink); background: var(--paper-noise), var(--paper); }
.prices .wrap { position: relative; }
.prices .lead { color: var(--ink); }
.stamp-ex { position: absolute; right: 56px; top: 8px; margin: 0; padding: 6px 14px; border: 3px solid var(--red); border-radius: 4px;
  transform: rotate(-7deg); font: 700 18px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--red); opacity: .9; }
.list { list-style: none; margin: 34px 0 0; padding: 0; border-top: 2px solid var(--ink); }
.list li { display: grid; grid-template-columns: 1fr auto auto; gap: 4px 28px; align-items: baseline; padding: 14px 0; border-bottom: 1px dashed #b9b09c; }
.list .n { font-size: 16px; }
.list .d { font-size: 12px; color: var(--ink-soft); white-space: nowrap; }
.list .p { font-weight: 700; white-space: nowrap; text-align: right; min-width: 9.5em; }
.list .p small { margin-right: 6px; font-weight: 400; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
/* the combined job is the reason this workshop exists online: one green rule, nothing louder */
.list li.both { border-left: 4px solid var(--green-deep); padding-left: 12px; }
.prices .note { color: var(--ink-soft); }

/* ============================================================
   FENSTER (data-sid="fenster"): the window rule as a 12-row table.
   Idea: the rows whose window is open TODAY get a green chalk mark.
   ============================================================ */
.window-sec { padding: 88px 0; background: var(--board); }
.window-sec .lead, .interval { color: var(--chalk); }
.interval { max-width: 40em; margin: 12px 0 0; font-size: 15px; line-height: 1.6; min-height: 1.6em; }
.months { width: 100%; max-width: 640px; margin-top: 30px; border-collapse: collapse; }
.months th { padding: 0 0 8px; text-align: left; font: 400 10.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--chalk-dim); border-bottom: 1px solid rgba(236,232,222,.35); }
.months td { padding: 8px 0; border-bottom: 1px dashed rgba(236,232,222,.16); font: 400 21px/1.2 var(--hand); }
.months td:first-child { width: 34%; }
.months td:last-child { width: 9em; text-align: right; font: 700 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--green); }
.months tr.open td:first-child, .months tr.open td:nth-child(2) { color: #fff; }

/* ============================================================
   REIFEN (data-sid="reifen"): winter rule + the tyre hotel.
   Idea: the paper hang-tag that sits on every stored set.
   ============================================================ */
.tyres { padding: 88px 0; background: var(--board-deep); }
.tyres .wrap { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: center; }
.tyres p { max-width: 36em; margin: 16px 0 0; line-height: 1.6; }
.tag { position: relative; justify-self: center; width: 260px; margin: 0; padding: 40px 22px 22px; color: var(--ink); transform: rotate(4deg);
  background: var(--paper-noise), #f4eedc; border-radius: 4px 4px 14px 14px; box-shadow: var(--shadow-card);
  clip-path: polygon(18% 0, 82% 0, 100% 12%, 100% 100%, 0 100%, 0 12%); }
.tag .hole { position: absolute; left: 50%; top: 12px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--board-deep); box-shadow: inset 0 0 0 3px #c9bf9f; }
.tag-h { margin: 0; font: 700 11px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); text-align: center; }
.tag dl { margin: 14px 0 0; }
.tag dl div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px dashed #b9b09c; }
.tag dt { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.tag dd { margin: 0; font: 400 21px/1 var(--hand); }
.tag figcaption { margin-top: 10px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); text-align: center; }

/* ============================================================
   WERKSTATT (data-sid="werkstatt"): photo, address, hours, sketch map.
   Idea: none beyond the photo itself. Facts, in a row, like the
   sign at the gate.
   ============================================================ */
.shop { padding: 88px 0; color: var(--ink); background: var(--paper-noise), var(--paper); }
.shop .wrap { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: start; }
.photo { margin: 0; }
.photo img { display: block; width: 100%; height: auto; box-shadow: var(--shadow-card); }
.photo figcaption, .map figcaption { margin-top: 10px; font-size: 11px; color: var(--ink-soft); }
.addr { margin: 16px 0 0; font-size: 16px; line-height: 1.6; }
.addr small { font-size: 11px; color: var(--ink-soft); }
.shop h3 { margin: 26px 0 0; font: 700 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
.hours { margin: 8px 0 0; }
.hours div { display: grid; grid-template-columns: 3em 1fr; padding: 5px 0; border-bottom: 1px dashed #b9b09c; font-size: 14px; }
.hours dt { font-weight: 700; }
.hours dd { margin: 0; }
.map { margin: 26px 0 0; }
.map svg { display: block; width: 100%; height: auto; background: #e6dfcd; border: 1px solid #b9b09c; }
.map .road { fill: none; stroke: #fff; stroke-width: 12; }
.map .road.thin { stroke-width: 8; }
.map .house { fill: var(--ink); }
.map .pin { fill: var(--green); }
.map text { font: 400 10px var(--mono); fill: var(--ink-soft); }

/* ============================================================
   FRAGEN (data-sid="fragen"): native details, nothing to learn
   ============================================================ */
.faq { padding: 88px 0; background: var(--board); }
.faq details { max-width: 760px; border-bottom: 1px dashed rgba(236,232,222,.25); }
.faq details:first-of-type { margin-top: 28px; border-top: 1px dashed rgba(236,232,222,.25); }
.faq summary { padding: 16px 32px 16px 0; cursor: pointer; list-style: none; position: relative; font: 400 23px/1.2 var(--hand); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 14px; font: 700 18px/1 var(--mono); color: var(--green); }
.faq details[open] summary::after { content: "–"; }
.faq details p { max-width: 40em; margin: 0 0 18px; line-height: 1.6; color: var(--chalk); }

/* ============================================================
   FUSS (data-sid="fuss"): legal text marked as template text
   ============================================================ */
.fuss { padding: 72px 0 24px; background: var(--board-deep); border-top: 1px solid #2a2d2f; }
.fuss .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 48px; }
.fuss h2 { font-size: 30px; }
.fuss .tpl { margin: 10px 0 0; font-size: 12px; line-height: 1.6; color: var(--chalk-dim); }
.fuss .demo { grid-column: 1 / -1; margin: 12px 0 24px; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--chalk-dim); }

/* ============================================================
   PHONE: stacked. Board first (CTA inside the first screen), the bay
   band below it, then the slip. After the pin the page scrolls the
   band into view so the rise is seen (main.js "showBay"), and the
   slip waits right under it.
   ============================================================ */
@media (max-width: 860px) {
  .stage { display: flex; flex-direction: column; }
  .board { order: 1; width: 100%; min-height: 0; padding: 12px 16px 80px; border-width: 6px; }
  .head { font-size: 10px; letter-spacing: .05em; }
  .head .date { display: none; }
  .head a { width: 170px; } /* still fixed: DE and EN differ in length (CLS 0) */
  h1 { margin-top: 14px; font-size: min(13.4vw, 56px); }
  .rules { margin-top: 16px; gap: 8px; }
  .rule { grid-template-columns: 1fr; }
  .rule dd { font-size: 19px; }
  .today { margin-top: 16px; }
  .today h2 { height: 30px; font-size: 28px; margin-bottom: 4px; }
  /* the phone row is too narrow for both; the footer line says the plates are made up anyway */
  .today h2 small .made { display: none; }
  .cards { grid-auto-columns: 132px; margin-inline: -16px; padding-inline: 16px; }
  .book { margin-top: 10px; }
  .jobs { margin-bottom: 8px; }
  .job span { font-size: 25px; padding: 5px 10px 7px; }
  .foot { left: 16px; right: 16px; bottom: 30px; }
  .pencil { right: 8%; width: 110px; }
  /* the bay band: photo x 360..1560, y 20..1036 (nose, wheel, arm), own smaller file */
  .scene { order: 2; position: relative; height: auto; width: 100%; aspect-ratio: 1200/1016; }
  .bay { top: 0; height: auto; width: 151.667%; transform: translate(-19.780%, -1.649%); }
  .bay .bg { left: 19.780%; top: 1.649%; width: 65.934%; height: 83.759%; }
  .sheet { order: 3; padding: 0 12px 40px; }
  .paper { padding: 26px 16px 20px; }
  .row2 { grid-template-columns: 1fr; gap: 0; }
  .wrap { padding: 0 16px; }
  .prices, .window-sec, .tyres, .shop, .faq { padding: 64px 0; }
  .stamp-ex { right: 12px; top: -34px; font-size: 13px; }
  .list li { grid-template-columns: 1fr auto; }
  .list .d { grid-row: 2; }
  .list .p { grid-row: 1 / span 2; grid-column: 2; min-width: 0; }
  .list .p small { display: block; margin: 0 0 2px; }
  .tyres .wrap, .shop .wrap, .fuss .wrap { grid-template-columns: 1fr; gap: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}