/* =========================================================================
   Kniff (Lab, Experiment 05) · Look „Werktisch“
   Heller Basteltisch: Papier, Schneidematte, Tinte und ein Koralle-Akzent,
   handschriftliche Notizen am Modell. Hinten die Bühne (three.js), darüber
   Start (Format + Katalog) bzw. die Schrittansicht (Liste, Karte, Werkzeuge).
   Logik: assets/js/kniff.js · Motor: kniff-motor.js · Modelle: kniff-modelle*.js
   ========================================================================= */

@font-face { font-family: 'Instrument Sans'; src: url('../fonts/instrument-sans-latin-wght-normal.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url('../fonts/instrument-serif-latin-400.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url('../fonts/instrument-serif-latin-400-italic.woff2') format('woff2'); font-style: italic; font-display: swap; }
@font-face { font-family: 'Caveat'; src: url('../fonts/caveat-latin-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Caveat'; src: url('../fonts/caveat-latin-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }

:root {
  --papier: #F3EEE5;          /* Tisch */
  --papier-2: #EAE3D6;        /* etwas dunkler: Mulden, Bildgrund */
  --karte: #FFFDF8;           /* Karten, Knöpfe */
  --tinte: #24211D;
  --leise: #6B6457;
  --linie: #E2DBCC;
  --linie-2: #D3CBBA;
  --koralle: #E5573F;
  --koralle-text: #B23F29;    /* Koralle als Schrift auf Papier (AA) */
  --salbei: #8FA58A;
  --salbei-dunkel: #4F6A4B;
  --salbei-hell: #DDE5D6;
  --marker: #FBE7A6;
  --schatten: 0 1px 0 #D9D2C3;
  --schatten-gross: 0 2px 0 #E2DBCC, 0 22px 44px -26px rgba(60, 40, 20, .4);
  --serif: 'Instrument Serif', 'Times New Roman', serif;
  --sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --hand: 'Caveat', 'Segoe Print', 'Bradley Hand', cursive;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --feder: cubic-bezier(.34, 1.56, .64, 1);
  --leiste: 68px;
  --liste: 290px;
  --rund: 22px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
html { background: var(--papier); -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--sans); color: var(--tinte); background: var(--papier); -webkit-font-smoothing: antialiased; overflow: hidden; }
button { font: inherit; color: inherit; cursor: pointer; }
svg { display: block; }
a { color: inherit; }
[hidden] { display: none !important; }
.skip-link { position: fixed; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--tinte); color: var(--karte); border-radius: 30px; }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 2.5px solid var(--koralle-text); outline-offset: 3px; border-radius: 10px; }

/* ---------- Leiste --------------------------------------------------------- */
.leiste { position: fixed; inset: 0 0 auto 0; height: var(--leiste); z-index: 40; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; pointer-events: none; }
.leiste > * { pointer-events: auto; }
.leiste__links, .leiste__rechts { display: flex; align-items: center; gap: 10px; }
.leiste__marke img { width: 30px; height: 30px; }
.leiste__titel { position: absolute; left: 50%; transform: translateX(-50%); margin: 0; display: flex; align-items: baseline; gap: 10px; font-family: var(--serif); font-size: 26px; letter-spacing: .01em; white-space: nowrap; pointer-events: none; }
.leiste__titel span { font-family: var(--sans); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--leise); vertical-align: 3px; }
.leiste__titel .leiste__modell { font-family: var(--hand); font-size: 24px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--koralle-text); display: inline-block; transform: rotate(-4deg); vertical-align: 0; }
body.ist-falten .leiste__titel > span:first-child { display: none; }
.pille {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; text-decoration: none;
  font-size: 15px; font-weight: 500; background: var(--karte); border: 0; box-shadow: var(--schatten);
  transition: background .25s, transform .4s var(--feder);
}
.pille:hover { background: #fff; transform: translateY(-1px); }
body.ist-falten .leiste__links > .pille:not(.pille--zurueck) { display: none; }

/* ---------- Bühne ---------------------------------------------------------- */
.buehne { position: fixed; inset: 0; z-index: 0; background: var(--papier); }
.buehne canvas, .buehne svg.buehne__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.buehne canvas { touch-action: none; cursor: grab; }
.buehne canvas:active { cursor: grabbing; }
.buehne svg.buehne__svg { pointer-events: none; overflow: visible; }
.buehne__fehler { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 420px; text-align: center; color: var(--leise); }
body.ist-start .buehne canvas { cursor: default; }

/* Diagramm-Ebene (SVG über der 3D-Bühne): Tinte und Koralle wie von Hand gezeichnet */
.ov { transition: opacity .35s var(--ease); }
.ov-unter { fill: none; stroke: rgba(255, 253, 248, .9); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.ov-linie { fill: none; stroke-width: 2.6; stroke-linecap: round; }
.ov-linie--tal { stroke: var(--tinte); stroke-dasharray: 10 7; }
.ov-linie--berg { stroke: var(--koralle-text); stroke-dasharray: 14 6 2.5 6; }
.ov-linie--schnitt { stroke: var(--tinte); stroke-dasharray: 3 6; stroke-width: 2; }
.ov-pfeil { fill: none; stroke: var(--tinte); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.ov-pfeil--berg { stroke: var(--koralle-text); stroke-dasharray: 8 7; }
.ov-pfeil--auf { stroke: var(--tinte); stroke-dasharray: 2 7; opacity: .8; }
.ov-spitze { fill: var(--tinte); stroke: rgba(255, 253, 248, .9); stroke-width: 1.4; stroke-linejoin: round; }
.ov-spitze--berg { fill: none; stroke: var(--koralle-text); stroke-width: 3; stroke-linecap: round; }
.ov-punkt { fill: var(--koralle); stroke: var(--karte); stroke-width: 2.5; }
.ov-ziel { fill: none; stroke: var(--koralle); stroke-width: 2.6; stroke-dasharray: 3 3.4; }
.ov-icon { fill: none; stroke: var(--tinte); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ov-icon-grund { fill: var(--karte); stroke: var(--linie-2); }
.ov-text { font: 600 13px var(--sans); fill: var(--tinte); letter-spacing: .03em; paint-order: stroke; stroke: rgba(255, 253, 248, .92); stroke-width: 4px; }
.ov-notiz { font: 600 27px var(--hand); fill: var(--tinte); paint-order: stroke; stroke: rgba(243, 238, 229, .92); stroke-width: 6px; stroke-linejoin: round; }
.ov-notiz--berg { fill: var(--koralle-text); }
.ov-auge { fill: #151515; }
.ov-glanz { fill: #fff; }
.ov-nase { fill: #1b1b1b; }

/* ---------- Start ---------------------------------------------------------- */
/* Die Startseite scrollt über der festen Bühne: oben der Zeitraffer (Bühne sichtbar),
   darunter der Katalog auf deckendem Papiergrund. */
.start { position: fixed; inset: 0; z-index: 10; overflow-y: auto; overflow-x: hidden; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: var(--linie-2) transparent; }
.held { position: relative; min-height: 88svh; display: flex; align-items: center;
  background: linear-gradient(90deg, rgba(243, 238, 229, .97) 0%, rgba(243, 238, 229, .86) 34%, rgba(243, 238, 229, 0) 60%); }
.held__innen { width: min(620px, 48vw); padding: calc(var(--leiste) + 4vh) clamp(20px, 3.4vw, 52px) 8vh; }
.start__marke { margin: 0 0 14px; font-family: var(--hand); font-size: 26px; font-weight: 600; color: var(--koralle-text); display: inline-block; transform: rotate(-3deg); }
.start__titel { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(48px, 5.6vw, 92px); line-height: .98; letter-spacing: -.01em; }
.start__titel em { font-style: italic; color: var(--koralle-text); }
.start__text { margin: 22px 0 0; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.55; color: var(--leise); max-width: 44ch; }
.held .held__los { margin-top: 30px; min-height: 52px; padding: 0 24px; text-decoration: none; background: var(--tinte); color: var(--karte); border-color: var(--tinte); }
.held .held__los:hover { background: #000; border-color: #000; }
.held__los span { transition: transform .4s var(--feder); }
.held__los:hover span { transform: translateY(3px); }
.start__zeitraffer { position: absolute; right: 30px; bottom: 56px; z-index: 5; text-align: right; pointer-events: none; }
.start__zeitraffer-name { display: block; font-family: var(--hand); font-size: 34px; font-weight: 600; line-height: 1; transform: rotate(-3deg); }
.start__zeitraffer-zeile { display: block; margin-top: 6px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--leise); }

.katalog { position: relative; background: var(--papier); border-top: 1px solid var(--linie); box-shadow: 0 -30px 60px rgba(120, 100, 70, .14); }
.katalog__innen { max-width: 1480px; margin: 0 auto; padding: 8px clamp(16px, 3vw, 48px) 80px; }

/* Auswahlleiste: bleibt beim Scrollen unter der Kopfleiste stehen */
.wahl { position: sticky; top: 0; z-index: 6; padding-top: var(--leiste); margin-top: calc(-1 * var(--leiste));
  background: rgba(243, 238, 229, .96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--linie); }
.wahl__innen { max-width: 1480px; margin: 0 auto; padding: 12px clamp(16px, 3vw, 48px) 12px; }
.wahl__zeile { display: flex; align-items: center; gap: 16px; }
.wahl__zeile--zwei { margin-top: 10px; justify-content: flex-start; flex-wrap: wrap; gap: 8px 14px; }
.wahl__zeile--zwei .wahl__zahl { margin-left: auto; }
.filter--stufe { padding-left: 14px; border-left: 1px solid var(--linie-2); }
.filter--stufe .stufe { margin-right: 4px; vertical-align: 1px; }
.filter--stufe .stufe i { width: 6px; height: 6px; }
.filter button.ist-an .stufe i { background: rgba(255, 253, 248, .35); }
.filter button.ist-an .stufe i.an { background: var(--karte); }
.wahl__label { flex: none; margin: 0; font-family: var(--hand); font-size: 24px; font-weight: 600; color: var(--koralle-text); transform: rotate(-3deg); }
.wahl__zahl { margin: 0; font-size: 14px; color: var(--leise); text-align: right; }
.wahl__zahl b { color: var(--tinte); font-weight: 600; }
.start__fuss { margin: 40px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--leise); }

.formate { display: flex; flex-wrap: wrap; gap: 8px; }
.format {
  display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 6px 14px 6px 10px; border-radius: 16px; border: 0;
  background: var(--karte); box-shadow: var(--schatten); text-align: left; white-space: nowrap; transition: background .25s, transform .4s var(--feder), box-shadow .25s;
}
.format:hover { transform: translateY(-1px); }
.format.ist-an { background: var(--marker); box-shadow: inset 0 0 0 2px var(--tinte); }
.format__blatt { flex: none; display: grid; place-items: end center; width: 26px; height: 30px; }
.format__blatt i { display: block; background: #fff; border-radius: 1.5px; box-shadow: 0 0 0 1.2px var(--linie-2), 0 2px 0 rgba(0, 0, 0, .06); }
.format.ist-an .format__blatt i { box-shadow: 0 0 0 1.5px var(--tinte); }
.format b { display: block; font-size: 14px; font-weight: 600; }
.format small { display: block; font-size: 11.5px; color: var(--leise); margin-top: 1px; }
.eigen { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 14px; border-radius: 16px; background: var(--karte); box-shadow: var(--schatten); font-size: 14px; color: var(--leise); width: fit-content; }
.eigen input { width: 76px; margin: 0 4px; padding: 8px 10px; border-radius: 10px; border: 1.5px solid var(--linie-2); background: #fff; color: var(--tinte); font: inherit; }

.filter { display: flex; flex-wrap: wrap; gap: 6px; }
.filter button { min-height: 40px; padding: 0 15px; border-radius: 999px; border: 1.5px solid var(--linie-2); background: transparent; font-size: 14px; color: var(--tinte); transition: color .25s, border-color .25s, background .25s; }
.filter button:hover { border-color: var(--tinte); }
.filter button.ist-an { color: var(--karte); background: var(--tinte); border-color: var(--tinte); }

.gruppe { margin-top: clamp(28px, 4vw, 44px); }
.gruppe__kopf { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 16px; }
.gruppe__titel { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 2.6vw, 38px); letter-spacing: -.005em; }
.gruppe__text { margin: 0; max-width: 62ch; font-size: 14.5px; line-height: 1.5; color: var(--leise); }
.katalog__leer, .katalog__nicht { margin: 36px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--leise); }
.katalog__nicht b { color: var(--tinte); font-weight: 600; }

.karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: clamp(16px, 1.8vw, 26px); }
.modell {
  position: relative; display: flex; flex-direction: column; text-align: left; padding: 0; border-radius: 24px; overflow: hidden;
  border: 0; background: var(--karte); box-shadow: var(--schatten-gross); transition: transform .5s var(--feder), box-shadow .5s var(--ease);
}
.modell:nth-child(3n+1) { --neig: -.5deg; }
.modell:nth-child(3n+2) { --neig: .4deg; }
.modell:nth-child(3n) { --neig: -.25deg; }
.modell:hover, .modell.ist-live { transform: translateY(-5px) rotate(var(--neig, 0deg)); box-shadow: 0 2px 0 #E2DBCC, 0 34px 56px -28px rgba(60, 40, 20, .5); }
.modell__bild { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; margin: 10px 10px 0; border-radius: 16px; background: #E9E5D8; }
.modell__bild::before { content: ''; position: absolute; inset: 0; opacity: .9;
  background: linear-gradient(rgba(36, 33, 29, .06) 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(90deg, rgba(36, 33, 29, .06) 1px, transparent 1px) 0 0 / 22px 22px; }
.modell__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(.96); transition: opacity .5s var(--ease), transform .8s var(--ease); }
.modell__bild img.ist-da { opacity: 1; transform: none; }
.modell__bild svg { position: absolute; left: 13%; top: 11%; width: 74%; height: 78%; opacity: .5; }
.modell__dreh { position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--karte); box-shadow: var(--schatten); color: var(--leise); opacity: 0; transition: opacity .3s; }
.modell__dreh svg { position: static; width: 16px; height: 16px; opacity: 1; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
@media (hover: hover) { .modell__bild:hover .modell__dreh { opacity: 0; } .modell:not(:hover) .modell__dreh { opacity: .9; } }
.modell__text { display: flex; flex-direction: column; gap: 6px; padding: 16px 20px 20px; }
.modell__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.modell__name { font-family: var(--serif); font-size: 26px; font-weight: 400; letter-spacing: -.005em; line-height: 1.05; }
.modell__kurz { font-size: 14.5px; line-height: 1.45; color: var(--leise); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.modell__info { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin-top: 4px; font-size: 13px; color: var(--leise); }
.modell__info > span + span:not(:empty)::before { content: '·'; margin-right: 10px; opacity: .6; }
.modell__info > .stufe + span::before { content: none; }
.stufe { display: inline-flex; gap: 3px; }
.stufe i { width: 8px; height: 8px; border-radius: 2px; transform: rotate(45deg); background: var(--linie-2); }
.stufe i.an { background: var(--koralle); }
.modell__stempel { position: absolute; top: 18px; left: 18px; z-index: 2; display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px 5px; border-radius: 6px; font-family: var(--hand); font-size: 20px; font-weight: 600; line-height: 1.1; background: var(--marker); color: var(--tinte); transform: rotate(-3deg); box-shadow: 0 6px 14px -8px rgba(80, 50, 0, .45); }
.modell__saison { position: absolute; top: 18px; right: 18px; z-index: 2; padding: 4px 12px 5px; border-radius: 6px; font-family: var(--hand); font-size: 20px; font-weight: 600; line-height: 1.1; background: var(--tinte); color: var(--karte); transform: rotate(3deg); box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .45); }
.modell__gruppe { flex: none; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--leise); }

/* Live-3D über der Karte (eine Bühne, wandert mit der Maus) */
.vorschau { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .25s var(--ease); overflow: hidden; }
.vorschau.ist-weg { position: fixed; inset: auto; left: -10000px; top: 0; width: 560px; height: 420px; }
.vorschau.ist-an { opacity: 1; }
.vorschau canvas, .vorschau svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.vorschau svg { overflow: visible; }

body.ist-falten .start { display: none; }

/* ---------- Falten --------------------------------------------------------- */
.falten { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
.falten > * { pointer-events: auto; }

.liste { position: absolute; left: 0; top: var(--leiste); bottom: 0; width: var(--liste); display: flex; flex-direction: column; padding: 6px 12px 18px 22px;
  background: linear-gradient(90deg, rgba(243, 238, 229, .96), rgba(243, 238, 229, .86) 78%, rgba(243, 238, 229, 0)); }
.liste__kopf { padding: 4px 4px 12px; }
.liste__modell { margin: 0; font-family: var(--serif); font-size: 32px; line-height: 1.05; }
.liste__format { margin-top: 8px; display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 14px; border-radius: 999px; border: 0; background: var(--karte); box-shadow: var(--schatten); font-size: 13px; color: var(--leise); }
.liste__format:hover { color: var(--tinte); }
.liste__schritte { list-style: none; margin: 0; padding: 0 6px 0 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--linie-2) transparent; }
.liste__schritte li { margin: 0; }
.liste__schritte .liste__gruppe { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 14px 4px 6px; font-size: 13px; font-weight: 600; color: var(--leise); letter-spacing: .02em; }
.liste__schritte .liste__gruppe small { font-weight: 400; font-size: 12.5px; }
.liste__schritte .liste__gruppe:first-child { padding-top: 4px; }
.liste__schritte button { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 10px; border: 0; border-radius: 12px; background: transparent; text-align: left; font-size: 15px; color: var(--tinte); transition: background .2s, color .2s; }
.liste__schritte button:hover { background: rgba(255, 253, 248, .8); }
.liste__schritte .nr { position: relative; flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--linie-2); font-size: 12px; color: var(--leise); font-variant-numeric: tabular-nums; }
.liste__schritte .vor .nr { border-style: dashed; }
.liste__schritte .ist-erledigt button { color: var(--leise); }
.liste__schritte .ist-erledigt .nr { border-color: transparent; background: var(--salbei-hell); color: transparent; }
.liste__schritte .ist-erledigt .nr::after { content: ''; position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M8.5 14.5l3.6 3.4L19.8 9.8' fill='none' stroke='%234F6A4B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
.liste__schritte .ist-an button { color: var(--tinte); background: var(--marker); font-weight: 600; }
.liste__schritte .ist-an .nr { background: var(--tinte); border-color: var(--tinte); color: var(--karte); font-weight: 700; }
.liste__schritte .ist-an .nr::after { content: none; }

.karte { position: absolute; left: calc(var(--liste) + 24px); right: 100px; bottom: 24px; max-width: 780px; margin: 0 auto; padding: 22px 28px 20px; border-radius: var(--rund);
  background: var(--karte); box-shadow: var(--schatten-gross); transform: rotate(-.35deg); }
.karte__kopf { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.karte__nr { font-size: 14px; color: var(--leise); font-variant-numeric: tabular-nums; }
.karte__technik { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 500; background: var(--papier); color: var(--tinte); }
.karte__technik svg { width: 24px; height: 8px; }
.karte__technik[data-art='berg'] svg { color: var(--koralle-text); }
.karte__trick { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: var(--marker); font-size: 13px; font-weight: 600; }
.karte__trick svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.karte__liste-auf { display: none; margin-left: auto; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 0; background: var(--papier); place-items: center; }
.karte__liste-auf svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.karte__titel { margin: 10px 0 8px; font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 2.8vw, 44px); letter-spacing: -.005em; line-height: 1; }
.karte__text { margin: 0; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.55; color: var(--tinte); min-height: 3em; max-width: 62ch; }
.karte__hinweis { margin: 12px 0 0; padding: 10px 14px; border-radius: 12px; font-size: 14px; line-height: 1.45; color: var(--tinte); background: var(--marker); }
.karte__steuer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 16px; margin-top: 16px; }
.karte__knoepfe { display: flex; align-items: center; gap: 10px; margin-left: auto; }

/* Fortschritt: ein Papierquadrat je Schritt */
.fortschritt { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; flex: 1 1 260px; }
.fortschritt button { width: 18px; height: 18px; padding: 0; border: 0; background: transparent; display: grid; place-items: center; }
.fortschritt button i { display: block; width: 12px; height: 12px; border-radius: 2.5px; transform: rotate(45deg); background: var(--linie); transition: background .3s, transform .4s var(--feder); }
.fortschritt button.ist-erledigt i { background: var(--salbei); }
.fortschritt button.ist-an i { background: var(--koralle); transform: rotate(45deg) scale(1.25); }
.fortschritt button:hover i { transform: rotate(45deg) scale(1.2); }
.fortschritt__zahl { display: none; font-size: 13px; color: var(--leise); }

.rund { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--linie-2); background: var(--karte); transition: border-color .25s, background .25s, transform .4s var(--feder); }
.rund:hover { border-color: var(--tinte); transform: translateY(-1px); }
.rund:disabled { opacity: .4; cursor: default; transform: none; }
.rund svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rund[aria-pressed='true'] { background: var(--tinte); color: var(--karte); border-color: var(--tinte); }
.rund span { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }

.werkzeuge { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 12px; }
.werkzeuge .rund { border: 0; box-shadow: var(--schatten); }
.werkzeuge .rund:hover { background: #fff; }
.farbpunkt { display: block; width: 22px; height: 22px; border-radius: 50%; background: conic-gradient(var(--a, #E4572E) 0 50%, var(--b, #F4EFE4) 0); box-shadow: inset 0 0 0 1.5px var(--tinte); transform: rotate(45deg); }
.farben { position: absolute; right: 60px; top: 50%; transform: translateY(-50%); display: grid; grid-template-columns: repeat(3, 36px); gap: 8px; padding: 14px; border-radius: 20px; background: var(--karte); box-shadow: var(--schatten-gross); }
.farben button { width: 36px; height: 36px; border-radius: 50%; border: 0; background: conic-gradient(var(--a) 0 50%, var(--b) 0); transform: rotate(45deg); box-shadow: inset 0 0 0 1.5px rgba(36, 33, 29, .25); transition: transform .3s var(--feder); }
.farben button:hover { transform: rotate(45deg) scale(1.1); }
.farben button.ist-an { box-shadow: 0 0 0 2px var(--karte), 0 0 0 4px var(--tinte); }

.hand-hinweis { position: absolute; left: 50%; top: calc(var(--leiste) + 10px); transform: translateX(-50%); display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 999px; background: var(--karte); box-shadow: var(--schatten-gross); font-size: 14px; color: var(--leise); }
.hand-hinweis b { color: var(--tinte); font-weight: 600; }
.hand-hinweis__punkt { width: 9px; height: 9px; border-radius: 50%; background: var(--koralle); box-shadow: 0 0 0 0 rgba(229, 87, 63, .6); animation: puls 1.6s infinite; }
.hand-hinweis.ist-gehoert { color: var(--tinte); background: var(--marker); }
@keyframes puls { 70% { box-shadow: 0 0 0 10px rgba(229, 87, 63, 0); } 100% { box-shadow: 0 0 0 0 rgba(229, 87, 63, 0); } }

.fertig { position: absolute; left: calc(var(--liste) + 24px); right: 100px; bottom: 24px; max-width: 780px; margin: 0 auto; padding: 24px 28px; border-radius: var(--rund);
  background: var(--karte); box-shadow: var(--schatten-gross); transform: rotate(-.35deg); animation: rein .8s var(--ease) both; }
@keyframes rein { from { opacity: 0; transform: translateY(18px); } }
.fertig__marke { margin: 0; font-family: var(--hand); font-size: 30px; font-weight: 600; line-height: 1; color: var(--koralle-text); display: inline-block; transform: rotate(-4deg); }
.fertig__titel { margin: 8px 0 8px; font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 3.4vw, 52px); line-height: 1; }
.fertig__text { margin: 0; color: var(--leise); line-height: 1.55; font-size: 16.5px; max-width: 62ch; }
.fertig__knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.flugdaten { display: flex; flex-wrap: wrap; align-items: baseline; gap: 26px; margin-top: 16px; padding-top: 14px; border-top: 1.5px dashed var(--linie-2); }
.flugdaten div b { display: block; font-family: var(--hand); font-size: 40px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.flugdaten div span { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--leise); }
.flugdaten p { flex: 1 1 220px; margin: 0; font-size: 13.5px; color: var(--leise); line-height: 1.45; }
body.ist-fertig .karte { display: none; }

.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 999px; border: 1.5px solid var(--linie-2); background: var(--karte); color: var(--tinte); font-size: 15px; font-weight: 500; transition: border-color .25s, background .25s, transform .4s var(--feder); }
.knopf:hover { border-color: var(--tinte); transform: translateY(-1px); }
.knopf--hell { background: var(--tinte); color: var(--karte); border-color: var(--tinte); font-weight: 600; }
.knopf--hell:hover { background: #000; border-color: #000; }
.knopf--klein { min-height: 40px; padding: 0 16px; font-size: 14px; }
.knopf svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s var(--feder); }
.knopf:hover svg { transform: translateX(2px); }

/* ---------- Gut zu wissen -------------------------------------------------- */
.wissen { position: fixed; right: 14px; top: 78px; bottom: 14px; z-index: 60; width: min(440px, calc(100vw - 28px)); overflow-y: auto; padding: 28px 28px 22px; border-radius: 24px; background: var(--karte); box-shadow: 0 30px 80px rgba(60, 40, 20, .25); animation: rein .5s var(--ease) both; }
.wissen h2 { margin: 0 0 18px; font-family: var(--serif); font-weight: 400; font-size: 38px; }
.wissen ol { margin: 0; padding-left: 22px; display: grid; gap: 16px; }
.wissen li { line-height: 1.55; color: var(--tinte); font-size: 15px; }
.wissen li::marker { font-family: var(--hand); font-size: 22px; font-weight: 600; color: var(--koralle-text); }
.wissen li b { color: var(--tinte); }
.wissen__zu { position: absolute; right: 14px; top: 14px; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--linie-2); background: transparent; font-size: 24px; line-height: 1; }
.quellen { margin-top: 22px; font-size: 13px; color: var(--leise); }
.quellen summary { cursor: pointer; }
.quellen ul { padding-left: 18px; line-height: 1.6; }
.wissen__fuss { margin: 20px 0 0; font-size: 12px; color: var(--leise); }
.schleier { position: fixed; inset: 0; z-index: 55; background: rgba(60, 45, 30, .2); }

/* ---------- Telefon / schmale Fenster ------------------------------------- */
@media (max-width: 1100px) {
  :root { --liste: 250px; }
  .karte, .fertig { right: 86px; }
}
@media (max-width: 860px) {
  :root { --leiste: 58px; }
  .leiste { padding: 0 12px; }
  .leiste__titel { font-size: 20px; }
  .leiste__titel > span:first-child { display: none; }
  .pille { min-height: 40px; padding: 0 14px; font-size: 14px; }
  .held { min-height: 92svh; align-items: flex-end; background: linear-gradient(180deg, rgba(243, 238, 229, 0) 0, rgba(243, 238, 229, 0) 38svh, rgba(243, 238, 229, .95) 56svh); }
  .held__innen { width: auto; padding: 0 18px 7svh; }
  .start__titel { font-size: clamp(42px, 11vw, 62px); }
  .start__zeitraffer { display: none; }
  body.ist-falten .leiste__titel { display: none; }
  .wahl__innen { padding: 10px 0 10px; }
  .wahl__zeile { display: block; }
  .wahl__label { padding: 0 16px 8px; transform: none; }
  .formate, .filter { flex-wrap: nowrap; overflow-x: auto; padding: 2px 16px 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .wahl__zeile--zwei { display: block; }
  .filter--stufe { border-left: 0; padding-left: 16px; margin-top: 8px; }
  .wahl__zeile--zwei .wahl__zahl { margin-left: 0; }
  .formate::-webkit-scrollbar, .filter::-webkit-scrollbar { display: none; }
  .format { flex: none; min-height: 46px; }
  .filter button { flex: none; }
  .eigen { margin: 10px 16px 0; }
  .wahl__zahl { padding: 8px 16px 0; text-align: left; font-size: 13px; }
  .katalog__innen { padding: 0 14px 60px; }
  .karten { grid-template-columns: 1fr; gap: 16px; }
  .modell__name { font-size: 24px; }

  .liste { position: fixed; left: 0; right: 0; top: auto; bottom: 0; width: auto; max-height: 70vh; padding: 16px 16px 20px; border-radius: 24px 24px 0 0; background: var(--karte); box-shadow: 0 -2px 0 var(--linie); z-index: 30; transform: translateY(105%); transition: transform .45s var(--ease); }
  .liste.ist-offen { transform: none; box-shadow: 0 -20px 60px rgba(60, 40, 20, .25); }
  .karte, .fertig { left: 10px; right: 10px; bottom: 10px; padding: 16px 18px 14px; border-radius: 20px; transform: none; }
  .karte__liste-auf { display: inline-grid; }
  .karte__kopf { flex-wrap: nowrap; }
  .karte__nr, .karte__technik, .karte__trick { white-space: nowrap; }
  .karte__technik { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .karte__titel { font-size: 28px; margin-top: 8px; }
  .karte__text { font-size: 15.5px; min-height: 0; }
  .karte__steuer { margin-top: 12px; }
  .fortschritt { display: none; }
  .karte__knoepfe .knopf--leise { display: none; }
  .werkzeuge { top: calc(var(--leiste) + 8px); right: 10px; transform: none; gap: 8px; }
  .werkzeuge .rund { width: 44px; height: 44px; }
  .farben { right: 52px; top: 0; transform: none; }
  .ov-notiz { font-size: 22px; }
}

/* ---------- Weniger Bewegung ---------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---------- Druckansicht --------------------------------------------------- */
.druck { display: none; }
@media print {
  @page { size: A4; margin: 12mm; }
  html, body { background: #fff !important; color: #111 !important; overflow: visible !important; height: auto !important; }
  body > *:not(.druck) { display: none !important; }
  .druck { display: block !important; font-family: var(--sans); color: #111; }
  .druck__kopf { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1.5px solid #111; padding-bottom: 6mm; margin-bottom: 6mm; }
  .druck__kopf h1 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 30pt; }
  .druck__kopf p { margin: 0; font-size: 9.5pt; color: #444; text-align: right; }
  .druck__legende { display: flex; gap: 8mm; font-size: 9pt; color: #333; margin-bottom: 6mm; }
  .druck__legende span { display: inline-flex; align-items: center; gap: 2mm; }
  .druck__raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6mm 5mm; }
  .druck__schritt { break-inside: avoid; border: .3mm solid #ccc; border-radius: 3mm; padding: 3mm; }
  .druck__schritt h3 { margin: 0 0 1.5mm; font-size: 10pt; }
  .druck__schritt h3 span { display: inline-block; min-width: 6mm; font-weight: 700; }
  .druck__schritt svg { width: 100%; height: 44mm; }
  .druck__schritt p { margin: 1.5mm 0 0; font-size: 8.5pt; line-height: 1.35; color: #222; }
  .druck__fuss { margin-top: 8mm; font-size: 8pt; color: #666; }
}

/* Während des Testflugs: Karte kompakter, mehr Platz für das Flugzeug */
body.ist-flug .fertig__marke, body.ist-flug .fertig__text { display: none; }
body.ist-flug .fertig__titel { font-size: clamp(26px, 2.2vw, 34px); }
body.ist-flug .fertig { padding: 14px 20px; }
body.ist-flug .flugdaten { margin-top: 10px; padding-top: 10px; }
/* Knalltüte: kurzer Ruck beim Knall */
.buehne.ist-knall canvas { animation: kniff-knall .32s cubic-bezier(.2,.8,.3,1); }
@keyframes kniff-knall { 0% { transform: translate(0,0); } 20% { transform: translate(-6px,4px); } 45% { transform: translate(5px,-3px); } 70% { transform: translate(-2px,1px); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .buehne.ist-knall canvas { animation: none; } }