/* Artefakt Toolbox – Landingpage. Gestaltungssystem „Konsole“: gebürstetes Champagner-Metall, Walnuss, Amber-Glas.
   Tokens je Erscheinung (Auto folgt dem Gerät, Regler am Gerät überschreibt). Logische Eigenschaften für Rechts-nach-links. */
:root {
  color-scheme: dark;
  /* Standard: dunkle Seite (Walnuss/Graphit) mit Champagner-Metallplatten wie in der App */
  --seite: #1b1510; --seite-2: #251b13; --text: #f1e7d2; --text-2: #cbbd9f; --link: #f2b84b; --rand: #3d2f22;
  --m1: #ece3d1; --m2: #d3c6ae; --m3: #bcae93; --gravur: #3b3224; --gravur-2: #4a4030; --gravur-licht: rgb(255 255 255 / .65);
  --holz-1: #6b4529; --holz-2: #4a2f1c; --holz-3: #2f1d11; --glas: #15120e; --amber: #f2b84b; --amber-tief: #a8741c; --amber-text: #f6d99a;
  --text-hell: #f1e7d2; --text-hell-2: #cbbd9f; --led-aus: #6b5f4a;
  --breit: 1180px; --schmal: 760px; --rund: 16px;
}
/* Helle Stufe (Ahorn) nur auf ausdrücklichen Wunsch über den Regler „Erscheinung“ */
:root[data-theme="hell"] { color-scheme: light; --seite: #efe6d2; --seite-2: #e6dac0; --text: #2b2418; --text-2: #574c39; --link: #7a5210; --rand: #cdbfa6; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body { margin: 0; background: var(--seite); color: var(--text); font: 18px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: clamp(2.1rem, 6.4vw, 3.8rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.5rem, 4vw, 2.2rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }
a { color: var(--link); }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; border-radius: 6px; }
.skip { position: fixed; inset-inline-start: 8px; top: -60px; background: var(--amber); color: #2a1a05; padding: 12px 16px; border-radius: 8px; z-index: 20; font-weight: 700; }
.skip:focus { top: 8px; }

/* ----- Material ----- */
.metall { background-image: repeating-linear-gradient(90deg, rgb(255 255 255 / .09) 0 1px, rgb(0 0 0 / .025) 1px 3px), linear-gradient(180deg, var(--m1), var(--m2) 55%, var(--m3)); color: var(--gravur); }
.platte { position: relative; border-radius: var(--rund); box-shadow: inset 0 1px 0 rgb(255 255 255 / .55), inset 0 -2px 4px rgb(0 0 0 / .18), 0 10px 24px rgb(0 0 0 / .22); }
.platte::before, .platte::after { content: ""; position: absolute; top: 10px; width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #8d8372 60%, #4a4235); box-shadow: 0 1px 1px rgb(0 0 0 / .4); }
.platte::before { inset-inline-start: 10px; } .platte::after { inset-inline-end: 10px; }
.gravur { text-transform: uppercase; letter-spacing: .2em; font-weight: 700; color: var(--gravur); text-shadow: 0 1px 0 var(--gravur-licht); }
.gravur.gross { font-size: clamp(1rem, 3vw, 1.4rem); }
.gravur.klein { font-size: .8125rem; letter-spacing: .16em; }
.gravur-h { text-transform: uppercase; letter-spacing: .14em; font-size: clamp(1.2rem, 3.4vw, 1.7rem); color: var(--text); margin-bottom: 1.1rem; }
.gravur-h.hell { color: var(--text-hell); text-shadow: 0 1px 0 rgb(0 0 0 / .5); }
.holz { background-image: repeating-linear-gradient(92deg, rgb(255 255 255 / .035) 0 2px, transparent 2px 7px), linear-gradient(180deg, var(--holz-1), var(--holz-2)); color: var(--text-hell); }
.holz .lead, .lead.hell { color: var(--text-hell-2); }

/* ----- Kopf ----- */
.kopf { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 16px; padding: 8px max(16px, calc((100vw - var(--breit)) / 2)); background-image: repeating-linear-gradient(90deg, rgb(255 255 255 / .06) 0 1px, transparent 1px 3px), linear-gradient(180deg, #3d3226, #281e15); color: var(--text-hell); box-shadow: 0 2px 10px rgb(0 0 0 / .45); }
.marke { display: flex; align-items: center; gap: 10px; color: var(--text-hell); text-decoration: none; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: .9rem; margin-inline-end: auto; }
.marke img { border-radius: 8px; }
.hauptnav { display: none; gap: 4px; }
.hauptnav a, .sprachliste a { color: var(--text-hell); text-decoration: none; padding: 12px 14px; border-radius: 8px; min-height: 48px; display: inline-flex; align-items: center; }
.hauptnav a:hover, .sprachliste a:hover { background: rgb(255 255 255 / .08); }
@media (min-width: 860px) { .hauptnav { display: flex; } }
.sprache { position: relative; }
.sprache summary { list-style: none; cursor: pointer; min-height: 48px; padding: 0 14px; display: flex; align-items: center; border-radius: 8px; border: 1px solid #6a5842; font-size: .95rem; }
.sprache summary::-webkit-details-marker { display: none; }
.sprachliste { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); min-width: 180px; background: #2c2218; border: 1px solid #6a5842; border-radius: 10px; padding: 6px; display: grid; }
.sprachliste a[aria-current] { font-weight: 700; color: var(--amber); }

.spalte { width: 100%; max-width: var(--breit); margin-inline: auto; padding-inline: 16px; }
.spalte.schmal { max-width: var(--schmal); }
.spalte.mitte { text-align: center; }
.abschnitt { padding-block: clamp(48px, 9vw, 96px); }
.dunkel { background: var(--glas); color: var(--text-hell); }
.dunkel .lead { color: var(--text-hell-2); }
.dunkel a { color: var(--amber); }
.lead { font-size: 1.2rem; color: var(--text-2); }

/* ----- Hero ----- */
.hero { background: radial-gradient(1100px 520px at 50% -8%, #5a3b24 0%, var(--holz-3) 70%); color: var(--text-hell); padding-block: clamp(36px, 7vw, 80px) clamp(40px, 7vw, 80px); }
.hero-text { text-align: center; margin-bottom: clamp(28px, 5vw, 48px); }
.oberzeile { color: var(--amber); font-weight: 800; letter-spacing: .24em; text-transform: uppercase; font-size: .85rem; margin-bottom: 14px; }
.hero h1 { color: #fff7e6; max-width: 18ch; margin-inline: auto; text-wrap: balance; text-shadow: 0 2px 20px rgb(0 0 0 / .5); }
.unterzeile { font-size: clamp(1.05rem, 2.4vw, 1.3rem); color: var(--text-hell-2); max-width: 38em; margin-inline: auto; text-wrap: pretty; }
.knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 14px; justify-content: center; }
.knopf { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px; border-radius: 12px; background: linear-gradient(180deg, #ffd27a, var(--amber)); color: #2a1a05; font-weight: 800; text-decoration: none; box-shadow: 0 3px 0 var(--amber-tief), 0 8px 20px rgb(242 184 75 / .25); transition: transform .12s, box-shadow .12s; }
.knopf:hover { transform: translateY(-1px); }
.knopf:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--amber-tief); }
.knopf.zweit { background: transparent; color: var(--text-hell); box-shadow: inset 0 0 0 2px #7b6247; }
.status { font-size: .95rem; color: var(--text-hell-2); margin: 0; }
.konsolenbreit { max-width: 1120px; }

/* ----- Gerät ----- */
.geraet { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; filter: drop-shadow(0 30px 40px rgb(0 0 0 / .5)); }
.geraet .platte { border-radius: 22px 22px 8px 8px; padding: 14px 16px 18px; color: var(--gravur); }
.titelzeile { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 6px 22px 12px; }
.claim { font-size: .95rem; color: var(--gravur-2); }
.bedienfeld { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); align-items: center; }
.anzeige, .coverfenster, .platte { min-width: 0; }
.reglerpaar { display: flex; justify-content: center; gap: clamp(16px, 4vw, 40px); }
.reglerfeld { display: grid; justify-items: center; gap: 6px; min-width: 72px; }
.wert { font-size: .8125rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gravur); display: inline-flex; align-items: center; gap: 6px; }
.wert::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 8px var(--amber); }
.skala { position: relative; width: 86px; height: 86px; display: grid; place-items: center; }
.skala i { position: absolute; inset: 0; transform: rotate(var(--a, 0deg)); }
.skala i::before { content: ""; position: absolute; inset-inline-start: calc(50% - 1.5px); top: -2px; width: 3px; height: 8px; border-radius: 2px; background: var(--gravur); opacity: .55; }
.regler { position: relative; width: 62px; height: 62px; border-radius: 50%; cursor: grab; touch-action: none; transform: rotate(var(--w, -135deg)); transition: transform .22s cubic-bezier(.3, 1.4, .5, 1);
  background: conic-gradient(from 20deg, #faf5ea, #b7aa93, #f3ecdd, #8a7e6a, #f3ecdd, #b7aa93, #faf5ea), #ddd;
  box-shadow: 0 7px 12px rgb(0 0 0 / .4), inset 0 0 0 3px rgb(255 255 255 / .5), inset 0 -4px 8px rgb(0 0 0 / .3), 0 0 0 5px rgb(0 0 0 / .12); }
.regler::after { content: ""; position: absolute; inset-inline-start: calc(50% - 2px); top: 6px; width: 4px; height: 17px; border-radius: 2px; background: #2a1a05; box-shadow: 0 0 0 1px rgb(255 255 255 / .35); }
.regler:active { cursor: grabbing; }
.regler:focus-visible { outline-offset: 6px; border-radius: 50%; }
html:not(.js) .regler { transform: rotate(-135deg); cursor: default; }

.anzeige { display: grid; gap: 12px; }
.blende { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 12px; border-radius: 16px; background: linear-gradient(180deg, #a99c82, #d8ccb4 40%, #e9e0cd); box-shadow: inset 0 2px 5px rgb(0 0 0 / .35), 0 1px 0 rgb(255 255 255 / .6); }
.schirm { position: relative; min-width: 0; border-radius: 10px; overflow: hidden; background: var(--glas); color: var(--amber-text); box-shadow: inset 0 0 0 1px #000, inset 0 0 30px rgb(242 184 75 / .08), 0 0 0 3px rgb(0 0 0 / .35); display: grid; grid-template-rows: auto 1fr; }
.schirm::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgb(255 255 255 / .03) 0 1px, transparent 1px 3px), linear-gradient(160deg, rgb(255 255 255 / .07), transparent 35%); }
.kopfzeile { display: flex; justify-content: space-between; gap: 10px; padding: 8px 14px; font: 700 .8125rem/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--amber); text-shadow: 0 0 8px rgb(242 184 75 / .6); border-bottom: 1px solid #2c2418; }
.kopfzeile #zustand::before { content: "▸ "; }
.flaeche { position: relative; height: 250px; display: grid; }
.flaeche iframe { width: 100%; height: 100%; border: 0; background: var(--glas); animation: einblenden .5s both; }
.leer-text { margin: auto; padding: 16px 24px; max-width: 30ch; text-align: center; font: 600 1rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--amber-text); animation: blinken 2.4s ease-in-out infinite; }
[data-zustand="laedt"] .flaeche::before { content: ""; position: absolute; inset-inline: 20%; top: 50%; height: 4px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--amber), transparent); background-size: 60% 100%; background-repeat: no-repeat; animation: lauf 1s linear infinite; }
@keyframes einblenden { from { opacity: 0; transform: scale(.98); } }
@keyframes blinken { 50% { opacity: .55; } }
@keyframes lauf { from { background-position: -60% 0; } to { background-position: 160% 0; } }
.pegel { display: flex; gap: 5px; padding-block: 2px; }
.pegel i { --p: 0; width: 14px; border-radius: 3px; background: #0c0a07 repeating-linear-gradient(to top, rgb(242 184 75 / .14) 0 6px, transparent 6px 9px) padding-box; position: relative; box-shadow: inset 0 0 0 1px #000; }
.pegel i::before { content: ""; position: absolute; inset: 2px; border-radius: 2px; background: repeating-linear-gradient(to top, var(--amber) 0 6px, transparent 6px 9px); clip-path: inset(calc(100% - var(--p) * 100%) 0 0 0); filter: drop-shadow(0 0 4px rgb(242 184 75 / .7)); }
.tastenfeld { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 10px 22px; }
.transport { display: flex; justify-content: center; gap: 8px; }
/* Taste = Kappe (das Bewegliche) + eingravierte Beschriftung darunter */
.taste { display: grid; justify-items: center; gap: 5px; padding: 0; border: 0; background: none; font: inherit; cursor: pointer; color: var(--gravur); }
.taste .kappe, .ftaste .kappe { display: grid; place-items: center; width: 58px; height: 52px; border-radius: 10px; color: var(--gravur); background: linear-gradient(180deg, var(--m1), var(--m3)); box-shadow: inset 0 1px 0 rgb(255 255 255 / .6), 0 3px 0 rgb(0 0 0 / .3), 0 6px 10px rgb(0 0 0 / .2); transition: transform .08s, box-shadow .08s; }
.taste.gross .kappe { width: 84px; background: linear-gradient(180deg, #ffd27a, var(--amber)); color: #2a1a05; box-shadow: inset 0 1px 0 rgb(255 255 255 / .7), 0 3px 0 var(--amber-tief), 0 0 18px rgb(242 184 75 / .35); }
.taste:active .kappe, .ftaste:not([aria-disabled]):active .kappe { transform: translateY(3px); box-shadow: inset 0 1px 0 rgb(255 255 255 / .4), 0 0 0 rgb(0 0 0 / 0); }
.tbeschr { font-size: .6875rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; line-height: 1.1; color: var(--gravur); text-shadow: 0 1px 0 var(--gravur-licht); white-space: nowrap; }
/* Funktionstasten: breite Kappe mit Symbol und Namen, wie die Speichertasten an einem Tuner */
.funktionen { display: flex; gap: 8px; }
.ftaste { display: block; text-decoration: none; color: var(--gravur); }
.ftaste .kappe { display: flex; gap: 8px; width: auto; min-width: 118px; padding: 0 16px; font-size: .8125rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.ftaste .ik { width: 20px; height: 20px; flex: none; }
.ftaste[aria-disabled] { cursor: default; }
.ftaste[aria-disabled] .kappe { color: #7d7262; box-shadow: inset 0 1px 0 rgb(255 255 255 / .5), 0 1px 0 rgb(0 0 0 / .25); transform: translateY(2px); }
.taste:focus-visible, .ftaste:focus-visible { outline: none; }
.taste:focus-visible .kappe, .ftaste:focus-visible .kappe { outline: 3px solid var(--amber); outline-offset: 3px; }
.ik { width: 24px; height: 24px; fill: currentColor; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ik.gross { width: 44px; height: 44px; fill: none; }
.taste .ik, .ftaste .ik { fill: currentColor; stroke: none; }

/* ----- Cover-Fenster unter dem Radio (= die Tool-Galerie): Tool-Cover wie Plattencover einer Jukebox, Wahlnummer am Cover ----- */
.coverfenster { position: relative; padding: 14px 16px 18px; background: radial-gradient(120% 90% at 50% 0%, #6a4220 0%, #2c1a0e 70%); box-shadow: inset 0 10px 18px rgb(0 0 0 / .6), inset 0 -3px 0 rgb(0 0 0 / .45); border-top: 5px solid #8a7a5c; border-bottom: 5px solid #8a7a5c; }
.coverfenster::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgb(255 255 255 / .1) 0%, rgb(255 255 255 / .02) 30%, transparent 31%, transparent 60%, rgb(255 255 255 / .05) 61%, transparent 75%); }
.led { width: 10px; height: 10px; border-radius: 50%; background: var(--led-aus); box-shadow: inset 0 1px 2px rgb(0 0 0 / .5); flex: none; }
.led.an { background: var(--amber); box-shadow: 0 0 10px var(--amber); }
.coverkopf { display: flex; align-items: center; gap: 10px; padding: 0 6px 6px; scroll-margin-top: calc(var(--kopf, 84px) + 8px); }
.coverkopf h2 { margin: 0; }
.coverlead { margin: 0 6px 14px; max-width: 62ch; color: var(--text-hell-2); font-size: .95rem; line-height: 1.5; }
.coverpunkte { list-style: none; display: grid; gap: 8px; margin: 18px 4px 4px; padding: 0; }
.coverpunkte li { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 10px 12px; border-radius: 8px; background: rgb(0 0 0 / .35); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08); color: var(--text-hell); font-size: .9rem; line-height: 1.4; }
.coverpunkte .led.an { margin-top: 4px; background: #5fbf7a; box-shadow: 0 0 8px rgb(95 191 122 / .7); }
.coverhinweis { margin: 12px 6px 0; font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; color: var(--amber-text); }
@media (min-width: 760px) { .coverpunkte { grid-template-columns: repeat(3, 1fr); } }
.coverfenster:has(#galerie:target) { animation: glimmen 1.6s ease-out; }
@keyframes glimmen { 0% { box-shadow: inset 0 10px 18px rgb(0 0 0 / .6), 0 0 0 0 rgb(242 184 75 / .8); } 40% { box-shadow: inset 0 0 40px rgb(242 184 75 / .4), 0 0 40px 6px rgb(242 184 75 / .5); } 100% { box-shadow: inset 0 10px 18px rgb(0 0 0 / .6), 0 0 0 0 rgb(242 184 75 / 0); } }
.coverkopf .gravur { color: var(--amber-text); text-shadow: 0 0 10px rgb(242 184 75 / .55); }
.coverreihe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 760px) { .coverreihe { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; } }
.cover { --k: #e3c06e; position: relative; display: grid; grid-template-rows: auto auto; min-width: 0; padding: 0; border: 0; border-radius: 6px; font: inherit; text-align: start; color: #1d170e; background: #f4ecd9; box-shadow: 0 8px 14px rgb(0 0 0 / .5), 0 0 0 1px rgb(255 255 255 / .12); transition: transform .25s cubic-bezier(.3, 1.3, .5, 1), box-shadow .25s; }
.cover.gelb { --k: #e3c06e; } .cover.rot { --k: #cf6f46; } .cover.gruen { --k: #86a273; }
button.cover { cursor: pointer; }
button.cover:hover { transform: translateY(-5px); }
.cover .art { display: grid; place-items: center; aspect-ratio: 1; margin: 5px 5px 0; border-radius: 3px; background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--k) 70%, #fff), var(--k) 55%, color-mix(in srgb, var(--k) 70%, #000)); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .2); }
.cover .art .ik.gross { width: 46%; height: 46%; opacity: .85; }
.etikett { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 8px 8px 9px; min-width: 0; }
.ctitel { font-weight: 800; font-size: .875rem; line-height: 1.15; overflow-wrap: break-word; hyphens: auto; min-width: 0; }
.nr { flex: none; display: grid; place-items: center; min-width: 30px; height: 30px; border-radius: 50%; font-size: .8125rem; font-weight: 800; color: #f3e6c4; background: radial-gradient(circle at 35% 30%, #4a3c2a, #17110b); box-shadow: 0 2px 0 rgb(0 0 0 / .35), inset 0 0 0 2px #0a0704; }
.cover.eingelegt { transform: translateY(-8px); box-shadow: 0 14px 22px rgb(0 0 0 / .55), 0 0 0 2px var(--amber), 0 0 28px rgb(242 184 75 / .5); }
.cover.eingelegt .nr { color: #2a1a05; background: radial-gradient(circle at 35% 30%, #ffd98a, var(--amber)); box-shadow: 0 0 12px var(--amber); }
.cover.leer { background: rgb(244 236 217 / .06); box-shadow: inset 0 0 0 2px rgb(241 231 210 / .22); color: rgb(241 231 210 / .6); }
.cover.leer .art { background: repeating-linear-gradient(135deg, rgb(255 255 255 / .05) 0 6px, transparent 6px 12px); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1); }
.cover.leer .nr { color: #8a7a5c; }
.cover.leer .ctitel { font-weight: 700; font-size: .8125rem; }
@media (max-width: 759px) {
  .etikett { flex-direction: column; align-items: flex-start; gap: 6px; }
  .ctitel { font-size: .8125rem; }
  .cover.leer .ctitel { display: none; }
  .cover.leer .etikett { flex-direction: row; justify-content: flex-end; }
}
.sockel { display: flex; align-items: center; gap: 12px; padding: 10px 16px 12px; border-radius: 0 0 22px 22px; background: linear-gradient(180deg, #3a2719, #24160c); box-shadow: inset 0 2px 0 rgb(255 255 255 / .06); }
.rille { flex: 1; height: 22px; border-radius: 6px; background: repeating-linear-gradient(90deg, #0d0804 0 3px, #3b2a1b 3px 7px); box-shadow: inset 0 2px 4px rgb(0 0 0 / .7); }
.plakette { padding: 6px 14px; border-radius: 6px; font-size: .8125rem; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; color: #d9c9a7; background: linear-gradient(180deg, #5a4630, #3b2c1c); box-shadow: inset 0 1px 0 rgb(255 255 255 / .15); }

@media (min-width: 980px) {
  .bedienfeld { grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px; }
  .reglerpaar { flex-direction: column; gap: 22px; }
  .flaeche { height: 280px; }
  .geraet .platte { padding: 18px 22px 24px; }
}
@media (max-width: 520px) {
  .flaeche { height: 230px; }
  .skala { width: 74px; height: 74px; } .regler { width: 54px; height: 54px; }
  .reglerpaar { gap: 8px; }
  .plakette { display: none; }
}

/* ----- Abschnitte ----- */
.schritte { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 16px; counter-reset: s; }
.schritte > li { counter-increment: s; padding: 26px 22px 22px; padding-inline-start: 84px; }
.schritte > li::marker { content: none; }
.schritte > li > h3, .schritte > li > p { position: relative; }
.schritte > li > h3::before { content: counter(s); position: absolute; inset-inline-start: -64px; top: -6px; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: var(--gravur); background: conic-gradient(from 20deg, #faf5ea, #b7aa93, #f3ecdd, #8a7e6a, #f3ecdd, #b7aa93, #faf5ea); box-shadow: 0 4px 8px rgb(0 0 0 / .3), inset 0 0 0 3px rgb(255 255 255 / .45); }
.karten { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.karten li { padding: 30px 22px 22px; }
.karten .led { position: absolute; top: 12px; inset-inline-start: 50%; transform: translateX(-50%); }
.karten p, .schritte p { margin: 0; }
.platte p { color: var(--gravur-2); }
@media (min-width: 900px) { .schritte { grid-template-columns: repeat(3, 1fr); } .schritte > li { padding-inline-start: 22px; padding-top: 84px; } .schritte > li > h3::before { inset-inline-start: 0; top: -62px; } }
ul { padding-inline-start: 1.2em; }
.abschnitt li { margin-bottom: .5em; }
.karten li, .schritte > li { margin-bottom: 0; }
.status-liste { list-style: none; padding: 0; margin: 20px 0; display: grid; gap: 10px; }
.status-liste li { display: flex; gap: 14px; align-items: flex-start; margin: 0; padding: 14px 16px; border-radius: 12px; background: #1f1a14; box-shadow: inset 0 0 0 1px #3a3025; color: var(--text-hell); }
.haken { flex: none; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%; background: #5fbf7a; box-shadow: 0 0 10px rgb(95 191 122 / .6); position: relative; }
.haken::after { content: ""; position: absolute; inset: 5px 6px 7px 7px; border: solid #0b2a14; border-width: 0 3px 3px 0; transform: rotate(40deg) scale(.9); }
.marke-hinweis { display: inline-block; padding: 6px 12px; border-radius: 999px; background: var(--seite-2); border: 1px solid var(--rand); font-size: .95rem; }
.textlink { font-weight: 700; }
.app-bilder { display: flex; justify-content: center; gap: clamp(14px, 4vw, 48px); margin-top: 28px; padding-bottom: 16px; }
.app-bilder .telefon { width: min(40vw, 300px); margin: 0; border-radius: 26px; padding: 6px; background: #0c0906; box-shadow: 0 20px 40px rgb(0 0 0 / .5), inset 0 0 0 2px #3a2d22; }
.app-bilder .telefon img { border-radius: 20px; width: 100%; aspect-ratio: 720 / 1473; object-fit: cover; }
.app-bilder .telefon:nth-child(2) { transform: translateY(-16px); }
.frage { margin-bottom: 12px; padding: 0; }
.frage summary { cursor: pointer; padding: 16px 44px 16px 18px; min-height: 56px; font-weight: 700; list-style: none; }
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after { content: "+"; position: absolute; inset-inline-end: 20px; top: 12px; font-size: 1.5rem; color: var(--amber-tief); }
.frage[open] summary::after { content: "−"; }
.frage p { padding: 0 18px 4px; margin: 0 0 14px; }
.ende { background: radial-gradient(900px 420px at 80% 120%, #5a3b24 0%, var(--holz-3) 65%); color: var(--text-hell); }
.ende .lead { color: var(--text-hell-2); }
.textseite { padding-block: 40px 72px; }
.textseite h2 { margin-top: 1.6em; font-size: 1.4rem; }
.fuss { background: #1b120a; color: var(--text-hell-2); padding: 32px max(16px, calc((100vw - var(--breit)) / 2)); font-size: .95rem; border-top: 6px solid #2c1a0e; }
.fuss nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.fuss a { color: var(--text-hell); display: inline-flex; align-items: center; min-height: 48px; }

/* ===== Gehäuse: die ganze Seite ist die Jukebox =====
   Raum (dunkel) › Korpus (Chrom-Seitenleisten mit Neonröhre) › Innenraum (Seite). Kopf = Senderskala, Hero = Leuchtschild,
   Radio und Cover-Fenster bündig im Gehäuse, Abschnitte als Module zwischen Chromleisten, Fuß = Lautsprecher-Sockel. */
:root { --chrom-v: linear-gradient(90deg, #4f4639, #e9dfc8 16%, #9a8f7b 38%, #f2ead6 58%, #8b806c 80%, #4a4235); --chrom-h: linear-gradient(180deg, #f2ead6, #a99d86 45%, #6d6252 55%, #cfc4ad); --rad: clamp(26px, 5vw, 64px); --rail: clamp(10px, 1.6vw, 18px); }
body { background: #0c0805; }
.raum { min-height: 100vh; padding: clamp(0px, 2vw, 28px) clamp(0px, 2vw, 28px) 0; background: radial-gradient(1200px 700px at 50% 0%, #2c1c10 0%, #0c0805 75%); }
.korpus { position: relative; max-width: 1260px; margin-inline: auto; padding: var(--rail) var(--rail) 0; background: var(--chrom-v); border-radius: var(--rad) var(--rad) 0 0; box-shadow: 0 0 0 1px #000, 0 0 90px rgb(242 184 75 / .08), 0 40px 80px rgb(0 0 0 / .7); }
.korpus::before, .korpus::after { content: ""; position: absolute; top: calc(var(--rad) + 24px); bottom: 90px; width: 3px; border-radius: 3px; background: #ffd98a; box-shadow: 0 0 8px 2px rgb(242 184 75 / .8), 0 0 24px 6px rgb(242 184 75 / .3); animation: neon 6s ease-in-out infinite; }
.korpus::before { inset-inline-start: calc(var(--rail) / 2 - 1.5px); }
.korpus::after { inset-inline-end: calc(var(--rail) / 2 - 1.5px); animation-delay: -3s; }
@keyframes neon { 0%, 100% { opacity: .95; } 48% { opacity: .75; } 52% { opacity: 1; } }
.innen { background: var(--seite); border-radius: calc(var(--rad) - var(--rail)) calc(var(--rad) - var(--rail)) 0 0; }

/* Kopf = Krone mit Senderskala */
.kopf { padding: 8px clamp(12px, 2.5vw, 28px); border-radius: calc(var(--rad) - var(--rail)) calc(var(--rad) - var(--rail)) 0 0; background-image: repeating-linear-gradient(90deg, rgb(255 255 255 / .05) 0 1px, transparent 1px 3px), linear-gradient(180deg, #3d3226, #1d1510); border-bottom: 3px solid #8a7a5c; }
.hauptnav { position: relative; margin-inline: auto; padding: 4px 12px 14px; gap: 0; border-radius: 10px; background: linear-gradient(180deg, #120d08, #1d150d); box-shadow: inset 0 2px 6px #000, 0 0 0 1px #5d4a2e; }
.hauptnav::after { content: ""; position: absolute; inset-inline: 12px; bottom: 5px; height: 6px; background: repeating-linear-gradient(90deg, rgb(246 217 154 / .5) 0 1px, transparent 1px 9px); }
.hauptnav a { color: var(--amber-text); text-transform: uppercase; letter-spacing: .14em; font-size: .8125rem; font-weight: 700; padding-inline: 18px; min-height: 44px; }
.hauptnav a:hover { background: rgb(242 184 75 / .1); }
.zeiger { position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px; background: #ffe2a0; box-shadow: 0 0 10px 2px rgb(255 214 130 / .85); transform: translateX(var(--zx, 12px)); transition: transform .5s cubic-bezier(.3, 1.25, .4, 1); pointer-events: none; }
.zeiger::before { content: ""; position: absolute; left: -4px; top: -2px; border: 5px solid transparent; border-top-color: #ffe2a0; }

/* Hero = Leuchtschild im Gehäuse */
.hero { background: radial-gradient(900px 420px at 50% 0%, #3a2516 0%, transparent 70%), var(--seite); padding-block: clamp(24px, 4vw, 48px) 0; }
.hero-text { margin-bottom: clamp(22px, 4vw, 40px); }
.schild { max-width: 880px; margin-inline: auto; padding: clamp(24px, 4vw, 44px) clamp(18px, 4vw, 48px); border-radius: 22px; background: linear-gradient(180deg, #120d08, #1d140c); box-shadow: inset 0 0 0 2px #3a2c1d, 0 0 0 3px #0a0705, 0 0 0 5px var(--amber-tief), 0 0 34px rgb(242 184 75 / .35), inset 0 0 70px rgb(242 184 75 / .08); }
.schild h1 { text-shadow: 0 0 22px rgb(242 184 75 / .45); }
.deck { border-block: 5px solid; border-image: var(--chrom-h) 1; }
.geraet { filter: none; }
.geraet .platte { border-radius: 0; box-shadow: inset 0 1px 0 rgb(255 255 255 / .55), inset 0 -2px 4px rgb(0 0 0 / .18); }
.coverfenster { border-top: 0; }

/* Abschnitte = eingebaute Module zwischen Chromleisten */
.abschnitt { position: relative; }
.abschnitt::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 6px; background: var(--chrom-h); box-shadow: 0 2px 6px rgb(0 0 0 / .5); }
.gravur-h { display: flex; align-items: center; gap: .7em; }
.gravur-h::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 10px var(--amber); }
.gravur-h::after { content: ""; flex: 1; height: 2px; background: linear-gradient(90deg, var(--amber-tief), transparent); }
.coverkopf h2.gravur-h::before, .coverkopf h2::before, .coverkopf h2::after { content: none; }
.app-bilder { position: relative; padding: 28px 16px; border-radius: 16px; background: linear-gradient(135deg, #120d08, #251a10); box-shadow: inset 0 0 0 2px #3a2c1d, inset 0 0 60px rgb(0 0 0 / .6), 0 10px 30px rgb(0 0 0 / .4); overflow: hidden; }
.app-bilder::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgb(255 255 255 / .07), transparent 30%); }
.ende { padding-bottom: clamp(36px, 6vw, 64px); }
.muenzschlitz { width: 84px; height: 150px; margin: 0 auto 24px; border-radius: 14px; background: var(--chrom-v); display: grid; place-items: center; box-shadow: 0 8px 20px rgb(0 0 0 / .5), inset 0 0 0 2px rgb(255 255 255 / .35); }
.muenzschlitz span { width: 10px; height: 88px; border-radius: 5px; background: #000; box-shadow: 0 0 0 3px #3a3226, inset 0 0 8px rgb(242 184 75 / .7), 0 0 24px rgb(242 184 75 / .55); animation: neon 4s ease-in-out infinite; }

/* Fuß = Lautsprecher-Sockel */
.fuss { padding: 0 0 24px; border-top: 0; background: #130d07; }
.fuss > p, .fuss > nav { padding-inline: clamp(16px, 4vw, 48px); }
.sockel { margin-bottom: 22px; border-radius: 0; padding-block: 16px; min-height: 76px; }
.rille { height: 36px; }
.korpus { padding-bottom: calc(var(--rail) * .8); }
@media (max-width: 859px) { .hauptnav { display: none; } .marke { font-size: .8rem; } }
@media (prefers-reduced-motion: reduce) { .korpus::before, .korpus::after, .muenzschlitz span { animation: none; } .zeiger { transition: none; } }

/* ===== Scroll-Geschichte „Vom Chat ins Regal“ =====
   Nur mit Skript und ohne „Bewegung reduzieren“ (html.js-story); sonst bleiben die Schritt-Karten. Die Bühne misst 600×460 und wird skaliert.
   app.js setzt --a (Datei im Chat), --b (wird zum Cover), --c (gleitet in den Schacht), je 0…1. */
.story { display: none; }
.js-story .schritte { display: none; }
.js-story .story { display: block; position: relative; height: 300vh; margin-top: 12px; }
.buehne { position: sticky; top: max(var(--kopf, 84px), calc(50svh - 270px)); display: grid; gap: 20px; align-items: center; min-height: min(560px, calc(100svh - 110px)); }
@media (min-width: 900px) { .buehne { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 36px; } }
.legende { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: l; }
.legende > li { counter-increment: l; position: relative; margin: 0; padding: 16px 18px 16px 62px; border-radius: 14px; background: rgb(255 255 255 / .04); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08); opacity: .45; transition: opacity .35s, box-shadow .35s, background .35s; }
.legende > li::before { content: attr(data-s); position: absolute; inset-inline-start: 16px; top: 14px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: var(--gravur); background: conic-gradient(from 20deg, #faf5ea, #b7aa93, #f3ecdd, #8a7e6a, #f3ecdd, #b7aa93, #faf5ea); box-shadow: 0 3px 6px rgb(0 0 0 / .4); }
.legende > li.aktiv { opacity: 1; background: rgb(242 184 75 / .08); box-shadow: inset 0 0 0 1px var(--amber-tief), 0 0 24px rgb(242 184 75 / .18); }
.legende h3 { margin: 0 0 4px; color: var(--text); }
.legende p { margin: 0; color: var(--text-2); font-size: .98rem; }
@media (max-width: 899px) { .legende > li { padding: 10px 12px 10px 54px; } .legende > li::before { top: 8px; inset-inline-start: 12px; } .legende p { font-size: .9rem; line-height: 1.4; } .legende { gap: 8px; order: 2; } }
.szene { --s: 1; position: relative; width: 100%; height: calc(460px * var(--s)); }
.szene-innen { position: absolute; left: 0; top: 0; width: 600px; height: 460px; transform-origin: 0 0; transform: scale(var(--s)); --a: 0; --b: 0; --c: 0; }
.chat { position: absolute; left: 50px; top: 6px; width: 500px; height: 190px; border-radius: 14px; background: linear-gradient(180deg, #201810, #15100a); box-shadow: inset 0 0 0 2px #3a2c1d, 0 8px 20px rgb(0 0 0 / .5); z-index: 2; opacity: calc(1 - var(--b) * .35); }
.chat-kopf { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-bottom: 1px solid #2c2418; font-size: 15px; letter-spacing: .12em; text-transform: uppercase; color: var(--amber-text); }
.chat-kopf i { width: 9px; height: 9px; border-radius: 50%; background: #5d4a2e; }
.chat-kopf span { margin-inline-start: 8px; }
.blase { position: absolute; margin: 0; padding: 9px 14px; font-size: 20px; line-height: 1.3; color: #f1e7d2; }
.blase.nutzer { left: 18px; top: 44px; max-width: 290px; border-radius: 14px 14px 14px 3px; background: #3a2c1d; }
.blase.ki { left: 182px; top: 90px; width: 300px; height: 84px; padding-top: 10px; border-radius: 14px 14px 3px 14px; background: #2b2214; box-shadow: inset 0 0 0 1px #5d4a2e; }
.datei { position: absolute; left: 200px; top: 128px; width: 200px; height: 36px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 8px; font: 700 17px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #2a1a05; background: linear-gradient(180deg, #ffd27a, var(--amber)); box-shadow: 0 2px 0 var(--amber-tief); z-index: 2; opacity: max(0, calc(1 - var(--b) * 6)); transform: translateY(calc(var(--a) * -2px - 6px * (1 - var(--a)))); }
.ik.klein { width: 18px; height: 18px; fill: none; }
.maschine { position: absolute; left: 30px; top: 230px; width: 540px; height: 230px; border-radius: 16px 16px 0 0; z-index: 1; }
.m-schirm { position: absolute; left: 100px; top: 24px; width: 340px; height: 92px; border-radius: 10px; display: grid; place-items: center; background: var(--glas); box-shadow: inset 0 0 0 1px #000, 0 0 0 4px rgb(0 0 0 / .3), inset 0 0 30px rgb(242 184 75 / .08); color: var(--amber-text); font: 700 17px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; text-align: center; padding: 0 44px 0 14px; }
.m-schirm span { grid-area: 1 / 1; }
.m-leer { opacity: max(0, calc(1 - var(--c) * 4)); }
.m-lauf { opacity: max(0, calc((var(--c) - .85) * 8)); text-shadow: 0 0 10px rgb(242 184 75 / .6); }
.m-pegel { position: absolute !important; right: 12px; top: 12px; bottom: 12px; display: flex; gap: 4px; }
.m-pegel i { --p: 0; width: 10px; border-radius: 2px; background: #0c0a07; position: relative; }
.m-pegel i::before { content: ""; position: absolute; inset: 2px; background: repeating-linear-gradient(to top, var(--amber) 0 5px, transparent 5px 8px); clip-path: inset(calc(100% - var(--p) * 100%) 0 0 0); }
.laeuft .m-pegel i:nth-child(1) { animation: pegelauf 1.1s ease-in-out infinite alternate; }
.laeuft .m-pegel i:nth-child(2) { animation: pegelauf 0.8s ease-in-out infinite alternate; }
@keyframes pegelauf { from { --p: .25; } to { --p: .95; } }
@property --p { syntax: "<number>"; inherits: false; initial-value: 0; }
.dk { position: absolute; top: 40px; width: 46px; height: 46px; border-radius: 50%; background: conic-gradient(from 20deg, #faf5ea, #b7aa93, #f3ecdd, #8a7e6a, #f3ecdd, #b7aa93, #faf5ea); box-shadow: 0 5px 9px rgb(0 0 0 / .4), inset 0 0 0 3px rgb(255 255 255 / .5); }
.dk::after { content: ""; position: absolute; left: 21px; top: 5px; width: 4px; height: 14px; border-radius: 2px; background: #2a1a05; }
.dk.l { left: 28px; transform: rotate(-40deg); } .dk.r { right: 28px; transform: rotate(35deg); }
.m-gitter { position: absolute; left: 24px; right: 24px; bottom: 16px; height: 28px; border-radius: 6px; background: repeating-linear-gradient(90deg, #14100a 0 3px, #5d5242 3px 7px); box-shadow: inset 0 2px 4px rgb(0 0 0 / .7); }
.clip { position: absolute; left: 0; top: 0; width: 600px; height: 384px; overflow: hidden; z-index: 3; pointer-events: none; }
.szene-cover { --k: #cf6f46; position: absolute; left: 240px; top: 80px; width: 120px; display: grid; border-radius: 6px; background: #f4ecd9; color: #1d170e; box-shadow: 0 10px 18px rgb(0 0 0 / .55), 0 0 0 1px rgb(255 255 255 / .12); opacity: min(1, calc(var(--b) * 4));
  transform: translate(calc(50px * (1 - var(--b))), calc(-7px * (1 - var(--b)) + 308px * var(--c))) scale(calc(.4 + .6 * var(--b) - .04 * var(--c))); }
.szene-cover .art { display: grid; place-items: center; aspect-ratio: 1; margin: 5px 5px 0; border-radius: 3px; background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--k) 70%, #fff), var(--k) 55%, color-mix(in srgb, var(--k) 70%, #000)); }
.szene-cover .art .ik.gross { width: 46%; height: 46%; opacity: .85; }
.szene-cover .etikett { padding: 6px 8px 8px; }
.lippe { position: absolute; left: 130px; top: 380px; width: 340px; height: 18px; z-index: 4; border-radius: 6px; background: var(--chrom-h); box-shadow: 0 -6px 16px rgb(242 184 75 / calc(.15 + var(--c) * .65)), 0 4px 8px rgb(0 0 0 / .5); display: grid; place-items: center; }
.lippe span { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: #3b3224; font-weight: 700; }

/* ===== Eröffnung: die Schlagzeile steht im Jukebox-Display; Scrollen schiebt sie hinaus und legt das erste Cover in den Schacht =====
   Nur bei genug Platz (≥ 900 × 800 px), mit Skript und ohne „Bewegung reduzieren“ (html.js-pin); sonst steht die Schlagzeile als Leuchtschild über dem Gerät. */
.blende { position: relative; }
.einlegelippe { position: absolute; left: 50%; bottom: -8px; width: min(380px, 60%); height: 14px; transform: translateX(-50%); z-index: 8; border-radius: 6px; background: var(--chrom-h); box-shadow: 0 -5px 14px rgb(242 184 75 / var(--lg, .25)), 0 3px 6px rgb(0 0 0 / .5); pointer-events: none; }
.coverinfo { display: none; }
.cover.fliegt { position: relative; z-index: 7; transition: none; pointer-events: none; box-shadow: 0 16px 26px rgb(0 0 0 / .55), 0 0 0 2px var(--amber), 0 0 26px rgb(242 184 75 / .5); }
.cover.zurueck { animation: einblenden .45s both; }
.pin .hero-sticky { position: sticky; top: var(--kopf, 84px); }
.pin.hero { padding-block: 0; }
.pin .titelzeile { display: none; }
.pin .geraet .platte { padding-top: 18px; }
.pin .hero-text { position: absolute; inset: 0; z-index: 2; margin: 0; max-width: none; padding: 0; display: grid; place-items: center; text-align: center; overflow: hidden; opacity: var(--h, 1); transform: translateY(calc((1 - var(--h, 1)) * -70px)); }
.pin .schild { background: none; box-shadow: none; padding: 8px 28px; max-width: none; border-radius: 0; }
.pin .schild h1 { max-width: none; margin: 0 0 .35em; font: 800 clamp(1.7rem, 3.3vw, 3rem) / 1.12 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-transform: uppercase; letter-spacing: .03em; text-wrap: balance; color: #ffe9b8; text-shadow: 0 0 16px rgb(242 184 75 / .85), 0 0 46px rgb(242 184 75 / .4); }
.pin .oberzeile { margin-bottom: 8px; font-size: .78rem; }
.pin .unterzeile { margin-bottom: .5em; max-width: 58ch; font-size: clamp(.88rem, 1.25vw, 1.02rem); line-height: 1.45; color: var(--amber-text); }
.pin .knoepfe { margin: 10px 0 6px; }
.pin .knopf { min-height: 46px; padding: 0 20px; font-size: .95rem; }
.pin .status { font-size: .8rem; color: var(--amber-text); opacity: .8; }
.pin .flaeche { height: clamp(270px, 38vh, 340px); }
.pin .leer-text { animation: none; opacity: var(--l, 0); }
.pin .coverlead, .pin .coverunten { display: none; }
.pin .coverreihe { grid-template-columns: repeat(6, 128px); justify-content: center; gap: 14px; }
.pin .coverfenster { padding-bottom: 14px; }
.pin ~ .coverinfo { display: block; padding: 4px clamp(16px, 4vw, 48px) 28px; background: radial-gradient(120% 90% at 50% 0%, #2c1a0e, #1d130b 80%); border-bottom: 5px solid #8a7a5c; }
.pin ~ .coverinfo .coverlead { margin: 0 0 14px; }
.pin ~ .coverinfo .coverpunkte { margin-inline: 0; }
@media (prefers-reduced-motion: reduce) { .pin .hero-text { transform: none; } }

/* ===== Kleine Mechanik: Neon-Aufwärmen, Rastpunkte, Kanalwechsel, Cover kippen ===== */
.nur-leser { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.knopf .pfeil { margin-inline-start: .45em; font-size: .9em; }
.korpus::before { animation: neonstart 1.6s ease-out both, neon 6s ease-in-out 1.6s infinite; }
.korpus::after { animation: neonstart 1.6s ease-out .25s both, neon 6s ease-in-out 1.85s infinite; }
@keyframes neonstart { 0% { opacity: 0; } 8% { opacity: .9; } 12% { opacity: .05; } 22% { opacity: 1; } 30% { opacity: .25; } 42% { opacity: 1; } 55% { opacity: .6; } 100% { opacity: .95; } }
.skala i.an::before { background: var(--amber-tief); opacity: 1; box-shadow: 0 0 6px var(--amber); width: 4px; }
.schirm.wechsel .flaeche { animation: kanal .42s ease-out; }
@keyframes kanal { 0% { filter: brightness(2.4) contrast(1.5); transform: scaleY(.02); } 35% { filter: brightness(1.7); transform: scaleY(1.05) translateY(-2px); } 60% { transform: scaleY(.99) translateY(1px); } 100% { filter: none; transform: none; } }
@media (hover: hover) { button.cover:hover { transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .korpus::before, .korpus::after { animation: none; } .schirm.wechsel .flaeche { animation: none; } }

/* ===== Rechtstexte ===== */
.textseite .spalte { line-height: 1.65; }
.textseite h2 { color: var(--text); text-transform: none; letter-spacing: 0; }
.textseite address { font-style: normal; margin: 0 0 1em; padding: 14px 18px; border-radius: 12px; background: rgb(255 255 255 / .05); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1); }
.textseite ul { margin: 0 0 1em; }
.textseite a { word-break: break-word; }
.muster-hinweis { margin: 0 0 1.6em; padding: 14px 18px; border-radius: 12px; font-weight: 700; color: #2a1a05; background: linear-gradient(180deg, #ffd27a, var(--amber)); box-shadow: 0 0 0 3px #0a0705, 0 0 0 5px var(--amber-tief); }

/* ===== Effekte verfeinert ===== */
.einlegelippe { transform: translateX(-50%) translateY(var(--lt, 0px)); transition: transform .1s ease-out; }
/* Abgang der Schlagzeile wie bei einer Röhre: schärfe nimmt ab, Laufweite wächst, Glühen bleibt kurz stehen */
.pin .hero-text { filter: blur(calc((1 - var(--h, 1)) * 3px)); }
.pin .schild h1 { letter-spacing: calc(.03em + (1 - var(--h, 1)) * .1em); }
/* Glanz wandert mit der Maus über das Cover */
.cover:not(.leer)::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .2s; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgb(255 255 255 / .42), transparent 55%); mix-blend-mode: soft-light; }
@media (hover: hover) { button.cover:hover::after { opacity: 1; } }
/* Story: Cover mit Schwung und Ruck am Schacht */
.szene-cover { transform: translate(calc(50px * (1 - var(--b))), calc(-7px * (1 - var(--b)) + 308px * var(--c))) rotate(calc(var(--b) * (1 - var(--b)) * 12deg - var(--c) * (1 - var(--c)) * 8deg)) scale(calc(.4 + .6 * var(--b) - .04 * var(--c))); }
.lippe { transform: translateY(calc(max(0, var(--c) - .96) * 60px)); }
@media (prefers-reduced-motion: reduce) { .pin .hero-text { filter: none; } .pin .schild h1 { letter-spacing: .03em; } }
.textseite h1, .textseite h2, .textseite p, .textseite li, .textseite address { overflow-wrap: break-word; hyphens: auto; }
.textseite h2 { font-size: clamp(1.15rem, 5vw, 1.4rem); }

/* ===== Funktionsumfang: sechs Kapitel, das obere Bildfeld wechselt mit ===== */
.js-story .story { height: 560vh; }
.mehr p { margin: 0 0 .5em; }
.unterliste { list-style: none; padding: 0; margin: .4em 0 0; }
.unterliste li { margin: 0 0 .5em; font-size: .92rem; line-height: 1.4; }
.unterliste strong { display: inline; }
.liste h4 { margin: .8em 0 .2em; font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; }
.schritte .unterliste li { color: var(--gravur-2); }
.schritte .unterliste strong, .schritte .liste h4 { color: var(--gravur); }
.legende .unterliste li { color: var(--text-2); }
.legende .unterliste strong { color: var(--text); }
.legende .liste h4 { color: var(--amber-text); }
.js-story .legende .mehr { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s ease; }
.js-story .legende .mehr > div { overflow: hidden; min-height: 0; }
.js-story .legende > li.aktiv .mehr { grid-template-rows: 1fr; }
.legende > li { cursor: pointer; }
.legende .quellen li { opacity: .5; transition: opacity .3s; }
.legende .quellen li.aktiv { opacity: 1; }
.legende .quellen li.aktiv strong { color: var(--amber-text); }
.schritte { grid-template-columns: 1fr; }
@media (min-width: 900px) { .schritte { grid-template-columns: repeat(3, 1fr); } }
.schritte > li { padding-top: 22px; padding-inline-start: 84px; }
@media (min-width: 900px) { .schritte > li { padding-inline-start: 22px; padding-top: 84px; } }

/* Bildfeld oben auf der Bühne: je Kapitel eine Ebene */
.chat { opacity: 1; }
.pan { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .35s; }
.story[data-schritt="1"] .pan1, .story[data-schritt="2"] .pan2, .story[data-schritt="3"] .pan3,
.story[data-schritt="4"] .pan4, .story[data-schritt="5"] .pan5, .story[data-schritt="6"] .pan6, .story[data-schritt="7"] .pan7 { opacity: 1; }
.datei { opacity: 0; }
.story[data-schritt="3"] .datei { opacity: max(0, calc(1 - var(--b) * 6)); }
.anatomie { position: absolute; left: 22px; right: 22px; top: 44px; bottom: 14px; display: grid; grid-template-rows: auto 1fr 1fr 1fr; gap: 6px; }
.dateiname { display: flex; align-items: center; gap: 8px; font: 700 15px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--amber-text); }
.schicht { display: flex; align-items: center; gap: 12px; padding: 0 14px; border-radius: 8px; border-inline-start: 5px solid var(--sc); background: rgb(255 255 255 / .05); font-size: 17px; color: var(--text-hell); }
.schicht b { font: 700 14px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--sc); min-width: 92px; }
.schicht.s1 { --sc: #f2b84b; opacity: calc(.3 + .7 * clamp(0, (var(--u) - .05) * 8, 1)); }
.schicht.s2 { --sc: #e0805a; opacity: calc(.3 + .7 * clamp(0, (var(--u) - .35) * 8, 1)); }
.schicht.s3 { --sc: #9bbb88; opacity: calc(.3 + .7 * clamp(0, (var(--u) - .65) * 8, 1)); }
.quellenreihe { position: absolute; left: 16px; right: 16px; top: 46px; bottom: 14px; display: flex; gap: 10px; }
.qkachel { flex: 1; display: grid; place-items: center; align-content: center; gap: 8px; border-radius: 10px; background: rgb(255 255 255 / .05); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1); color: var(--text-hell); font-size: 16px; text-align: center; opacity: .45; transition: opacity .3s, box-shadow .3s, background .3s; }
.ik.qik { width: 34px; height: 34px; fill: none; color: var(--amber-text); }
.story[data-quelle="1"] .q1, .story[data-quelle="2"] .q2, .story[data-quelle="3"] .q3, .story[data-quelle="4"] .q4 { opacity: 1; background: rgb(242 184 75 / .1); box-shadow: inset 0 0 0 2px var(--amber), 0 0 22px rgb(242 184 75 / .3); }
.lampenreihe { position: absolute; left: 22px; right: 22px; top: 60px; display: grid; gap: 14px; }
.lampe { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 10px; background: rgb(255 255 255 / .05); color: var(--text-hell); font-size: 19px; }
.aktionen { position: absolute; left: 22px; right: 22px; top: 52px; bottom: 16px; display: flex; gap: 14px; }
.aktion { flex: 1; display: grid; place-items: center; align-content: center; gap: 4px; border-radius: 12px; background: rgb(255 255 255 / .05); box-shadow: inset 0 0 0 2px var(--amber-tief); color: var(--text-hell); font-size: 19px; font-weight: 700; }
.aktion em { font: 700 14px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--amber-text); font-style: normal; }
.aktion.a1 { opacity: calc(.4 + .6 * clamp(0, (.55 - var(--u)) * 8, 1)); }
.aktion.a2 { opacity: calc(.4 + .6 * clamp(0, (var(--u) - .45) * 8, 1)); }
.schalter-feld { position: absolute; left: 22px; right: 22px; top: 40px; bottom: 8px; display: grid; grid-template-rows: repeat(4, 1fr); align-items: center; }
.schloss-zeile { display: flex; align-items: center; gap: 10px; color: var(--amber-text); font: 700 15px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .1em; text-transform: uppercase; text-shadow: 0 0 10px rgb(242 184 75 / .6); }
.schalter-zeile { display: flex; align-items: center; gap: 12px; color: var(--text-hell); font-size: 17px; }
.schalter-zeile .kipp { margin-inline-start: auto; width: 38px; height: 20px; border-radius: 10px; background: #0c0a07; box-shadow: inset 0 0 0 1px #5d4a2e; position: relative; }
.schalter-zeile .kipp i { position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: #8d8372; }
.schalter-zeile em { width: 34px; font-style: normal; font-size: 14px; color: var(--text-hell-2); }
.legende > li { padding-block: 12px; }
@media (max-width: 899px) {
  .js-story .story { height: 700vh; }
  .legende > li:not(.aktiv) h3 { font-size: .95rem; margin: 0; }
  .legende > li.aktiv h3 { font-size: 1.02rem; }
}

/* Kapitel 6: Schalter legen um, das Schloss wird zu „Erweitert“ */
.schloss-zeile { position: relative; }
.schloss-zeile .zu, .schloss-zeile .offen { transition: opacity .3s; }
.schloss-zeile .offen { position: absolute; inset-inline-start: 34px; opacity: 0; color: #ffb27a; text-shadow: 0 0 10px rgb(255 140 80 / .6); white-space: nowrap; }
.schloss-zeile .zu { opacity: calc(1 - clamp(0, (var(--u) - .55) * 8, 1)); }
.schloss-zeile .offen { opacity: clamp(0, (var(--u) - .55) * 8, 1); }
.schalter-zeile .kipp i { left: calc(3px + 18px * clamp(0, (var(--u) - .55) * 8, 1)); background: color-mix(in srgb, #8d8372, var(--amber) calc(clamp(0, (var(--u) - .55) * 8, 1) * 100%)); }
.schalter-zeile em { position: relative; width: 38px; }
.schalter-zeile em .an { position: absolute; inset-inline-start: 0; opacity: clamp(0, (var(--u) - .55) * 8, 1); color: var(--amber-text); }
.schalter-zeile em .aus { opacity: calc(1 - clamp(0, (var(--u) - .55) * 8, 1)); }
/* Aufzählungspunkte und kompaktere Legende */
.liste .unterliste { list-style: disc; padding-inline-start: 1.1em; }
.liste .unterliste li::marker { color: var(--amber); }
.legende .mehr, .legende p { font-size: .92rem; }
.legende .unterliste li { font-size: .9rem; margin-bottom: .35em; }
.legende > li { padding-block: 10px; }
.legende { max-height: calc(100svh - 130px); overflow-y: hidden; }
.legende > li::before { top: 6px; transition: top .3s; }
.legende > li.aktiv::before { top: 12px; }
@media (max-width: 899px) { .legende { max-height: max(220px, calc(100svh - 400px)); } .legende > li::before { top: 5px; } .legende > li.aktiv::before { top: 10px; } }
.schritte .mehr p { font-size: .95rem; line-height: 1.5; }
.schritte .unterliste li { font-size: .92rem; }

/* ===== Mobil: dieselbe Mechanik in kompakter Anordnung ===== */
html { scroll-padding-top: calc(var(--kopf, 84px) + 8px); }
.regler-label .kurz, .gravur .kurz { display: none; }
.cover:not(.leer):active { transform: perspective(700px) scale(.97); }
@media (max-width: 859px) {
  /* Senderskala als zweite Kopfzeile, seitlich wischbar */
  .kopf { flex-wrap: wrap; row-gap: 6px; padding-bottom: 6px; }
  .hauptnav { display: flex; order: 3; flex: 1 0 100%; margin: 0; padding: 2px 6px 12px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
  .hauptnav::-webkit-scrollbar { display: none; }
  .hauptnav a { flex: none; scroll-snap-align: center; min-height: 40px; padding-inline: 16px; }
  .hauptnav::after { inset-inline: 6px; }
}
/* Eröffnung auf dem Handy: Display oben, Regler als Reihe darunter, nur die drei Demo-Cover */
.pin ~ .coverinfo { padding-inline: 16px; }

/* Handy: Kopf und Gerät verdichten */
@media (max-width: 859px) {
  .kopf { padding-block: 5px 2px; row-gap: 2px; }
  .marke img { width: 30px; height: 30px; }
  .sprache summary { min-height: 40px; }
  .hauptnav { padding: 0 6px 10px; }
  .hauptnav a { min-height: 34px; padding-inline: 14px; }
  .hauptnav::after { bottom: 3px; height: 5px; }
  .zeiger { top: 2px; bottom: 2px; }
}

/* ===== Mobil, überarbeitet: Lesbarkeit zuerst. Hochformat: Display + Transport + Cover, Regler im Streifen darunter ===== */
html, body { overflow-x: clip; }
.szene { overflow: hidden; }
.sub-kurz { display: none; }
.pin-m .sub-lang, .pin-l .sub-lang { display: none; }
.pin-m .sub-kurz, .pin-l .sub-kurz { display: inline; }
.reglerstreifen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 8px; padding: 22px 14px 18px; margin: 0; border-radius: 0; }
@media (min-width: 640px) { .reglerstreifen { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.reglerstreifen .reglerpaar { display: contents; }
.reglerstreifen .gravur .lang { display: inline; }
.reglerstreifen .gravur .kurz { display: none; }
.reglerstreifen .wert { font-size: .8125rem; }
.pin ~ .reglerstreifen { border-block: 5px solid; border-image: var(--chrom-h) 1; }

.pin-m .bedienfeld { grid-template-columns: minmax(0, 1fr); gap: 0; }
.pin-m .geraet .platte { padding: 12px 10px 14px; }
.pin-m .titelzeile { display: none; }
.pin-m .blende { padding: 8px; gap: 6px; }
.pin-m .flaeche { height: clamp(250px, calc(100svh - var(--kopf, 107px) - 352px), 400px); }
.pin-m .pegel i { width: 10px; }

.pin-m .schild { padding: 4px 10px; }
.pin-m .schild h1 { font-size: clamp(1.45rem, 6.6vw, 1.95rem); line-height: 1.12; margin-bottom: .3em; }
.pin-m .oberzeile { font-size: .8125rem; margin-bottom: 6px; }
.pin-m .unterzeile { font-size: 1rem; line-height: 1.45; margin-bottom: .4em; }
.pin-m .knoepfe { gap: 8px; margin: 8px 0 6px; }
.pin-m .knopf { min-height: 48px; padding: 0 20px; font-size: 1rem; }
.pin-m .knopf.zweit { display: none; }
.pin-m .status { font-size: .8125rem; line-height: 1.35; }
.pin-m .coverfenster { padding: 10px 10px 14px; }
.pin-m .coverreihe { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pin-m .cover.leer { display: none; }
.pin-m .coverkopf { padding-bottom: 8px; }
.pin-m .cover .art { aspect-ratio: 4 / 3; }
.pin-m .etikett { padding: 6px 7px 7px; gap: 4px; }
.pin-m .ctitel { font-size: .875rem; }
.pin-m .nr { min-width: 28px; height: 28px; font-size: .8125rem; }
.pin-m .einlegelippe { width: 70%; }

/* ===== Querformat (Handy und niedrige Fenster): Display links, Cover als Liste rechts ===== */
.pin-l .geraet { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); }
.pin-l .geraet .platte { padding: 10px 10px 12px; }
.pin-l .titelzeile { display: none; }
.pin-l .bedienfeld { grid-template-columns: minmax(0, 1fr); gap: 0; }
.pin-l .blende { padding: 8px; gap: 6px; }
.pin-l .flaeche { height: clamp(150px, calc(100svh - var(--kopf, 62px) - 128px), 360px); }
.pin-l .kopfzeile { padding: 5px 12px; font-size: .8125rem; }
.pin-l .pegel i { width: 9px; }

.pin-l .schild { padding: 2px 14px; }
.pin-l .schild h1 { font-size: clamp(1.15rem, 2.9vw, 1.9rem); line-height: 1.12; margin-bottom: .25em; }
.pin-l .oberzeile { font-size: .75rem; margin-bottom: 2px; }
.pin-l .unterzeile { font-size: clamp(.8125rem, 1.7vw, 1rem); line-height: 1.4; margin-bottom: .3em; }
.pin-l .knoepfe { gap: 8px; margin: 4px 0; }
.pin-l .knopf { min-height: 42px; padding: 0 16px; font-size: .9375rem; }
.pin-l .knopf.zweit { display: none; }
.pin-l .status { display: none; }
.pin-l .coverfenster { display: flex; flex-direction: column; padding: 8px 10px; border-top: 0; }
.pin-l .coverkopf { padding-bottom: 6px; }
.pin-l .coverkopf .gravur { font-size: .8125rem; }
.pin-l .coverreihe { grid-template-columns: minmax(0, 1fr); gap: 6px; flex: 1; align-content: center; }
.pin-l .cover { grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: auto; align-items: center; }
.pin-l .cover .art { aspect-ratio: 1; margin: 4px 0 4px 4px; }
.pin-l .cover.leer { display: none; }
.pin-l .etikett { flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; padding: 4px 8px; }
.pin-l .ctitel { font-size: .875rem; }
.pin-l .nr { min-width: 26px; height: 26px; font-size: .75rem; }
.pin-l .einlegelippe { width: 70%; }
@media (orientation: landscape) and (max-height: 799px) and (max-width: 960px) {
  /* Kopf einzeilig, Skala daneben */
  .kopf { flex-wrap: nowrap; }
  .marke span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hauptnav { display: flex; order: 0; flex: 1 1 0; min-width: 0; margin: 0; padding: 0 6px 10px; overflow-x: auto; scrollbar-width: none; }
  .hauptnav::-webkit-scrollbar { display: none; }
  .hauptnav a { flex: none; min-height: 34px; padding-inline: 14px; }
}

/* ===== Kapitel 6 (Was Tools können) ===== */
.kannreihe { position: absolute; left: 22px; right: 22px; top: 52px; bottom: 16px; display: grid; gap: 12px; grid-template-rows: repeat(3, 1fr); }
.kachel { display: flex; align-items: center; gap: 16px; padding: 0 18px; border-radius: 10px; background: rgb(255 255 255 / .05); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1); color: var(--text-hell); font-size: 19px; opacity: .45; }
.kachel.k1 { opacity: calc(.45 + .55 * clamp(0, (.34 - var(--u)) * 12 + 1, 1)); }
.kachel.k2 { opacity: calc(.45 + .55 * clamp(0, 1 - abs(var(--u) - .5) * 12, 1)); }
.kachel.k3 { opacity: calc(.45 + .55 * clamp(0, (var(--u) - .66) * 12 + 1, 1)); }
.kapitelpunkte { display: none; }

/* ===== Mobil: Story lesbar. Nur das aktive Kapitel im Text, Punkte zum Springen, Szene mit größerer Schrift ===== */
@media (max-width: 899px), (orientation: landscape) and (max-height: 799px) and (max-width: 960px) {
  .js-story .buehne { gap: 10px; align-content: start; min-height: 0; top: var(--kopf, 107px); padding-top: 8px; }
  .js-story .buehne { grid-template-areas: "s" "p" "l"; }
  .szene { grid-area: s; }
  .kapitelpunkte { grid-area: p; display: flex; justify-content: center; gap: 4px; }
  .legende { grid-area: l; max-height: none; overflow: visible; }
  .kapitelpunkte button { width: 32px; height: 32px; padding: 0; border: 0; background: none; position: relative; cursor: pointer; }
  .kapitelpunkte button::before { content: ""; position: absolute; inset: 11px; border-radius: 50%; background: #5d4a2e; transition: background .3s, box-shadow .3s, inset .3s; }
  .story[data-schritt="1"] .kapitelpunkte [data-s="1"]::before, .story[data-schritt="2"] .kapitelpunkte [data-s="2"]::before, .story[data-schritt="3"] .kapitelpunkte [data-s="3"]::before,
  .story[data-schritt="4"] .kapitelpunkte [data-s="4"]::before, .story[data-schritt="5"] .kapitelpunkte [data-s="5"]::before, .story[data-schritt="6"] .kapitelpunkte [data-s="6"]::before, .story[data-schritt="7"] .kapitelpunkte [data-s="7"]::before { inset: 12px; background: var(--amber); box-shadow: 0 0 10px var(--amber); }
  .js-story .legende > li:not(.aktiv) { display: none; }
  .js-story .legende > li.aktiv { padding-block: 6px; }
  .js-story .legende > li.aktiv h3 { font-size: 1.2rem; }
  .js-story .legende .mehr, .js-story .legende p { font-size: 1.0625rem; line-height: 1.5; }
  .js-story .legende .unterliste li { font-size: 1rem; line-height: 1.45; }
  .js-story .legende > li::before { top: 8px; }
  /* Szene: Text in der Bühne größer, damit er nach dem Verkleinern lesbar bleibt */
  .szene-innen .chat-kopf span { font-size: 21px; }
  .szene-innen .dateiname { font-size: 22px; }
  .szene-innen .schicht { font-size: 26px; }
  .szene-innen .schicht b { font-size: 20px; min-width: 128px; }
  .szene-innen .qkachel { font-size: 23px; }
  .szene-innen .lampe { font-size: 27px; }
  .szene-innen .aktion { font-size: 27px; }
  .szene-innen .aktion em { font-size: 20px; }
  .szene-innen .kachel { font-size: 26px; }
  .szene-innen .schalter-zeile { font-size: 24px; }
  .szene-innen .schloss-zeile { font-size: 20px; }
  .szene-innen .m-schirm { font-size: 20px; }
  .szene-innen .ctitel { font-size: 20px; }
}
/* Querformat: Szene links, Text rechts */
@media (orientation: landscape) and (max-height: 799px) and (max-width: 960px) {
  .js-story .buehne { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "s l" "p p"; gap: 12px 18px; align-items: start; top: var(--kopf, 62px); }
  .szene { height: calc(460px * var(--s)); }
  .js-story .legende { max-height: calc(100svh - var(--kopf, 62px) - 56px); overflow-y: auto; }
  .js-story .legende > li.aktiv h3 { font-size: 1.05rem; }
  .js-story .legende .mehr, .js-story .legende p { font-size: .9375rem; line-height: 1.4; }
  .js-story .legende .unterliste li { font-size: .9rem; }
  .js-story .story { height: 800vh; }
}

@media (max-width: 899px) {
  .js-story .legende > li.aktiv { padding-block: 8px 10px; }
  .js-story .legende .mehr, .js-story .legende p { font-size: 1rem; line-height: 1.45; }
  .js-story .legende .unterliste li { font-size: .95rem; line-height: 1.4; margin-bottom: .3em; }
  .js-story .legende > li.aktiv h3 { font-size: 1.125rem; }
}
@media (max-width: 400px) { .marke span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .kopf { flex-wrap: wrap; } .pin-m .ctitel { font-size: .8125rem; } }
@media (max-width: 899px) and (max-height: 780px) and (orientation: portrait) {
  .js-story .legende .mehr, .js-story .legende p { font-size: .9375rem; line-height: 1.4; }
  .js-story .legende .unterliste li { font-size: .9rem; line-height: 1.35; margin-bottom: .2em; }
  .js-story .legende > li.aktiv h3 { font-size: 1.05rem; }
  .js-story .legende > li.aktiv { padding-inline-start: 50px; }
  .js-story .legende > li::before { width: 28px; height: 28px; }
  .js-story .legende .liste h4 { margin-top: .4em; }
}
@media (orientation: landscape) and (max-height: 799px) and (max-width: 960px) {
  .js-story .buehne { grid-template-areas: "s l" "s p"; grid-template-rows: auto auto; gap: 4px 18px; }
  .js-story .legende .mehr, .js-story .legende p { font-size: .875rem; line-height: 1.35; }
  .js-story .legende .unterliste li { font-size: .84rem; line-height: 1.3; margin-bottom: .2em; }
  .js-story .legende .liste h4 { margin-top: .3em; }
  .kapitelpunkte button { height: 28px; width: 28px; }
}
@media (max-height: 780px) and (orientation: portrait) {
  .pin-m .status { display: none; }
  .pin-m .flaeche { height: clamp(200px, calc(100svh - var(--kopf, 107px) - 362px), 400px); }
  .pin-m .schild h1 { font-size: clamp(1.3rem, 6vw, 1.6rem); }
  .pin-m .unterzeile { font-size: .9375rem; line-height: 1.4; }
}

/* Handy: Text läuft mit dem Scrollen; Rand zeigt, dass noch etwas folgt */
@media (max-width: 899px), (orientation: landscape) and (max-height: 799px) and (max-width: 960px) {
  .js-story .legende { overflow: hidden; }
  .js-story .legende.laeuft-text:not(.ende-erreicht) { -webkit-mask-image: linear-gradient(#000 calc(100% - 34px), transparent); mask-image: linear-gradient(#000 calc(100% - 34px), transparent); }
  .js-story .story { height: 860vh; }
}

/* ===== Handy: Eröffnung mit dem Screenshot der App statt der Jukebox; die Jukebox kommt in „So funktioniert's“ ===== */
.coverinfo .coverkopf { display: none; }
@media (max-width: 899px), (orientation: landscape) and (max-height: 799px) and (max-width: 960px) {
  .hero .hero-sticky { display: none; }
  .hero { padding-block: 22px 0; }
  .hero-text { margin-bottom: 18px; padding-inline: 4px; }
  .hero-text .schild { padding-inline: 8px; }
  .hero h1 { font-size: clamp(1.9rem, 8.4vw, 2.6rem); line-height: 1.12; max-width: 14ch; }
  .hero .sub-lang { display: none; }
  .hero .sub-kurz { display: inline; font-size: 1.0625rem; line-height: 1.5; }
  .hero .unterzeile { max-width: 36ch; margin-inline: auto; }
  .hero .knopf { min-height: 52px; font-size: 1.0625rem; padding-inline: 26px; }
  .hero .status { font-size: .8125rem; }
  .coverinfo { display: block; padding: 18px 16px 26px; background: radial-gradient(120% 90% at 50% 0%, #2c1a0e, #1d130b 80%); border-bottom: 5px solid #8a7a5c; }
  .coverinfo .coverkopf { display: flex; }
  .coverinfo .coverlead { display: block; }
}
@media (orientation: landscape) and (max-height: 799px) and (max-width: 960px) {
  .hero { padding-inline: clamp(12px, 3vw, 32px); }
  .hero-text { margin: 0; text-align: start; }
  .hero h1 { margin-inline: 0; max-width: 18ch; font-size: clamp(1.5rem, 4vw, 2.1rem); }
  .hero .unterzeile { margin-inline: 0; }
}

/* Story auf dem Handy: Kapitel antippen; die Jukebox zeigt, was das Kapitel bedeutet */
@media (max-width: 899px), (orientation: landscape) and (max-height: 799px) and (max-width: 960px) {
  .js-story .story.tippen { height: auto; }
  .story.tippen .buehne { position: static; min-height: 0; }
  .story.tippen .legende { height: auto; max-height: none; overflow: visible; -webkit-mask-image: none; mask-image: none; }
}
@media (max-width: 899px) {
  .hero { padding-block: 14px 0; }
  .hero-text { margin-bottom: 12px; }
  .hero-text .schild { padding: 14px 12px; }
  .hero h1 { font-size: clamp(1.7rem, 7.4vw, 2.2rem); }
  .hero .oberzeile { margin-bottom: 4px; }
  .hero .sub-kurz { font-size: 1rem; line-height: 1.45; }
  .hero .knopf.zweit { display: none; }
  .hero .knoepfe { margin: 10px 0 6px; }
  .hero .status { margin: 0; }
}
@media (orientation: landscape) and (max-height: 799px) and (max-width: 960px) {
  .hero .unterzeile, .hero .sub-kurz { line-height: 1.4; font-size: .9375rem; }
  .hero-text .schild { padding: 12px 16px; }
  .hero .knopf { min-height: 46px; }
}

.kapitelpunkte .tipp { display: none; }
@media (max-width: 899px), (orientation: landscape) and (max-height: 799px) and (max-width: 960px) {
  .kapitelpunkte { flex-wrap: wrap; row-gap: 2px; }
  .kapitelpunkte button { width: min(44px, calc((100vw - 110px) / 7)); height: 44px; }
  .kapitelpunkte button::before { inset: 16px; }
  .kapitelpunkte .tipp { display: block; flex: 0 0 100%; text-align: center; font-size: .8125rem; color: var(--text-hell-2); }
}
@media (max-width: 899px) { .kapitelpunkte { column-gap: 0; } .kapitelpunkte button { flex: none; } }
@media (max-width: 899px), (orientation: landscape) and (max-height: 799px) and (max-width: 960px) {
  .kapitelpunkte button::before { inset: 50% auto auto 50% !important; width: 14px; height: 14px; margin: -7px 0 0 -7px; }
  .kapitelpunkte button[aria-current]::before { width: 22px; height: 22px; margin: -11px 0 0 -11px; }
}

/* Längerer Hero-Text im Display (Desktop): Schrift etwas kleiner, Display etwas höher */
.pin .flaeche { height: clamp(290px, 41vh, 420px); }
.pin .schild h1 { font-size: clamp(1.4rem, 2.6vw, 2.4rem); margin-bottom: .3em; }
.pin .unterzeile { max-width: 66ch; font-size: clamp(.8rem, 1.02vw, .92rem); line-height: 1.42; margin-bottom: .35em; }
.pin .knoepfe { margin: 6px 0 4px; }
.pin .oberzeile { margin-bottom: 4px; }
@media (min-width: 900px) and (max-height: 859px) {
  .pin .sub-lang { display: none; }
  .pin .sub-kurz { display: inline; }
  .pin .flaeche { height: clamp(270px, 38vh, 340px); }
}
@media (max-width: 899px) { .hero h1 { font-size: clamp(1.5rem, 6.4vw, 1.95rem); max-width: 20ch; } .hero .sub-kurz { font-size: .9375rem; } }

/* ===== Handy: ruhiger Rhythmus. Abstandsstufen: klein 16 · mittel 28 · groß 56–72 ===== */
@media (max-width: 899px) {
  :root { --raum-s: 16px; --raum-m: 28px; --raum-l: 64px; }
  .abschnitt { padding-block: var(--raum-l) calc(var(--raum-l) + 8px); }
  .abschnitt .gravur-h { margin-bottom: var(--raum-m); }
  .abschnitt .lead { margin-top: 0; margin-bottom: var(--raum-m); line-height: 1.6; }
  .karten { gap: 20px; margin-top: var(--raum-m); }
  .status-liste { gap: 14px; margin-block: var(--raum-m); }
  .abschnitt .textlink { display: inline-block; margin-top: var(--raum-s); }
  .frage { margin-bottom: 14px; }
  .app-bilder { margin-top: var(--raum-m); }
  /* Hero → Jukebox der Galerie */
  .coverinfo { padding: 40px 16px 48px; }
  .coverinfo .coverkopf { margin-bottom: 10px; }
  .coverinfo .coverlead { margin-bottom: 22px; line-height: 1.6; }
  .coverinfo .coverpunkte { gap: 12px; margin-top: 0; }
  .coverinfo .coverhinweis { margin-top: 22px; }
  /* Kapitel-Bühne */
  .js-story .story, .story { margin-top: var(--raum-m); }
  .story.tippen .buehne { gap: 20px; padding-top: 0; }
  .story.tippen .kapitelpunkte { margin-block: 0 6px; }
  .story.tippen .legende { margin-bottom: 8px; }
  .abschnitt.ende { padding-block: var(--raum-l); }
}
@media (max-width: 899px), (orientation: landscape) and (max-height: 799px) and (max-width: 960px) {
  .hero-text { margin-bottom: 36px; }
}
@media (orientation: landscape) and (max-height: 799px) and (max-width: 960px) { .hero-text { margin-bottom: 0; } }

/* ===== Leitfaden: HTML-Tools erklärt ===== */
.leitfaden .spalte { max-width: 900px; }
.leitfaden h1 { font-size: clamp(1.8rem, 6.5vw, 2.8rem); line-height: 1.15; margin-bottom: .5em; text-wrap: balance; }
.leitfaden .lead { font-size: clamp(1.0625rem, 2.6vw, 1.25rem); line-height: 1.6; max-width: 62ch; }
.leitfaden p, .leitfaden li, .leitfaden dd { line-height: 1.65; }
.lf-kurz { list-style: none; padding: 0; margin: 28px 0 24px; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.lf-kurz li { display: grid; gap: 4px; padding: 18px 20px; margin: 0; }
.lf-kurz strong { font-size: 1.0625rem; }
.lf-hinweis { margin: 0 0 28px; padding: 14px 18px; border-radius: 12px; border-inline-start: 5px solid var(--amber); background: rgb(242 184 75 / .1); color: var(--text); }
.lf-toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; padding: 14px; border-radius: 14px; background: #120e0a; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1); }
.lf-toc a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; text-decoration: none; font-size: .9375rem; color: var(--amber-text); box-shadow: inset 0 0 0 1px var(--amber-tief); }
.lf-toc a:hover, .lf-toc a:focus-visible { background: rgb(242 184 75 / .14); }
.lf-abschnitt { padding-block: clamp(40px, 8vw, 64px) 8px; scroll-margin-top: calc(var(--kopf, 84px) + 8px); }
.leitfaden .lf-abschnitt h2 { text-transform: none; letter-spacing: .01em; font-size: clamp(1.3rem, 4.6vw, 1.75rem); line-height: 1.25; margin: 0 0 1.2rem; align-items: flex-start; }
.leitfaden .lf-abschnitt h2::before { margin-top: .5em; }
.leitfaden .lf-abschnitt h2::after { display: none; }
.leitfaden h3 { font-size: 1.125rem; margin: 1.6em 0 .5em; color: var(--text); }
.leitfaden ul { padding-inline-start: 1.2rem; }
.leitfaden ul li::marker { color: var(--amber); }

.lf-tabelle { margin: 20px 0 28px; overflow-x: auto; border-radius: 14px; background: #17120d; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12); }
.lf-tabelle table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: .9375rem; }
.lf-tabelle caption { text-align: start; padding: 14px 16px 6px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: .8125rem; color: var(--amber-text); }
.lf-tabelle th, .lf-tabelle td { text-align: start; vertical-align: top; padding: 12px 16px; border-top: 1px solid rgb(255 255 255 / .09); }
.lf-tabelle thead th { color: var(--text-hell-2); font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; }
.lf-tabelle tbody th { color: var(--text-hell); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .875rem; font-weight: 700; white-space: normal; overflow-wrap: anywhere; min-width: 9ch; }
.lf-tabelle td { color: var(--text-hell-2); }
.lf-tabelle a { color: var(--amber-text); }   /* die Tabelle bleibt in beiden Stufen dunkel, also feste helle Schrift */
.lf-tabelle:focus-visible, .lf-code pre:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }

.lf-code { margin: 20px 0 28px; border-radius: 14px; overflow: hidden; background: #0c0a07; box-shadow: inset 0 0 0 1px #5d4a2e, 0 10px 24px rgb(0 0 0 / .35); }
.lf-code figcaption { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 8px 6px 16px; background: #1b1510; border-bottom: 1px solid #3a2d22; font-weight: 700; font-size: .875rem; color: var(--amber-text); }
.lf-kopieren { min-height: 44px; min-width: 96px; padding: 0 16px; border: 0; border-radius: 10px; cursor: pointer; font: 700 .875rem/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #2a1a05; background: linear-gradient(180deg, #ffd27a, var(--amber)); box-shadow: 0 2px 0 var(--amber-tief); }
.lf-kopieren:active { transform: translateY(2px); box-shadow: none; }
.lf-code pre { margin: 0; padding: 16px; overflow: auto; max-height: 480px; font: .875rem/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #ffe9b8; tab-size: 2; }
.lf-prompt pre { white-space: pre-wrap; overflow-wrap: anywhere; color: #f5ecd8; max-height: none; }

.lf-schritte { list-style: none; padding: 0; margin: 24px 0; display: grid; gap: 14px; counter-reset: lf; }
.lf-schritte li { counter-increment: lf; position: relative; margin: 0; padding: 14px 18px 14px 68px; border-radius: 14px; background: rgb(255 255 255 / .04); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .09); }
.lf-schritte li::before { content: counter(lf); position: absolute; inset-inline-start: 16px; top: 14px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: var(--gravur); background: conic-gradient(from 20deg, #faf5ea, #b7aa93, #f3ecdd, #8a7e6a, #f3ecdd, #b7aa93, #faf5ea); box-shadow: 0 3px 6px rgb(0 0 0 / .4); }
.lf-schritte h3 { margin: 0 0 .25em; font-size: 1.0625rem; }
.lf-schritte p { margin: 0; color: var(--text-2); }

.lf-zwei { display: grid; gap: 20px; margin: 20px 0 28px; }
@media (min-width: 760px) { .lf-zwei { grid-template-columns: 1fr 1fr; } }
.lf-zwei section { padding: 8px 20px 12px; border-radius: 14px; background: rgb(255 255 255 / .04); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .09); }
.lf-zwei li { margin-bottom: .55em; color: var(--text-2); }

.lf-karten { list-style: none; padding: 0; margin: 24px 0; display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.lf-karten li { margin: 0; padding: 20px 20px 18px; }
.lf-karten h3 { margin: 0 0 .5em; font-size: 1.25rem; }
.lf-karten dt { margin-top: .8em; font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gravur-2); }
.lf-karten dd { margin: .15em 0 0; color: var(--gravur); }
.lf-schluss { padding-bottom: 24px; }
.leitfaden-link { margin: 32px 0 0; text-align: center; }
.leitfaden-link .textlink { display: inline-flex; align-items: center; min-height: 48px; font-weight: 700; }
@media (max-width: 899px) { .lf-abschnitt { padding-block: 48px 8px; } .lf-tabelle { margin-inline: -4px; } }
.lf-kurz li { align-content: start; }
.lf-code pre { max-height: 560px; }
/* Handy: Tabellenzeilen werden zu Karten, nichts muss seitlich gewischt werden */
@media (max-width: 640px) {
  .lf-tabelle { overflow: visible; background: none; box-shadow: none; }
  .lf-tabelle table, .lf-tabelle tbody, .lf-tabelle tr, .lf-tabelle th, .lf-tabelle td, .lf-tabelle caption { display: block; min-width: 0; width: 100%; }
  .lf-tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .lf-tabelle caption { padding: 0 0 10px; color: var(--link); }   /* steht hier auf der Seite, nicht auf der dunklen Tabelle */
  .lf-tabelle tr { margin-bottom: 12px; border-radius: 14px; background: #17120d; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12); overflow: hidden; }
  .lf-tabelle tbody th { padding: 14px 16px 6px; border-top: 0; font-size: .9375rem; color: var(--amber-text); }
  .lf-tabelle td { padding: 6px 16px 12px; border-top: 0; }
  .lf-tabelle td[data-l]::before { content: attr(data-l); display: block; margin-bottom: 2px; font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); opacity: .8; }
  .lf-tabelle td + td { padding-top: 0; }
}
.lf-download { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: -12px 0 28px; }
.lf-download .knopf { min-height: 48px; }
.lf-download .knopf.zweit { color: var(--text); }   /* steht auf der Seite, nicht auf Holz: folgt der Erscheinung */
.lf-download span { color: var(--text-2); font-size: .9375rem; flex: 1 1 240px; }
.lf-code.lf-prompt pre { max-height: none; }
/* Unten: beide Knöpfe gleich groß und gleich auffällig */
.ende .knoepfe .knopf { flex: 1 1 230px; max-width: 300px; justify-content: center; text-align: center; }
/* Unten: das App-Symbol statt des Münzschlitzes */
.ende-icon { width: 120px; height: 120px; margin: 0 auto 24px; padding: 6px; border-radius: 28px; background: var(--chrom-v); box-shadow: 0 10px 24px rgb(0 0 0 / .55), 0 0 36px rgb(242 184 75 / .25), inset 0 0 0 2px rgb(255 255 255 / .35); }
.ende-icon img { display: block; width: 100%; height: 100%; border-radius: 22px; }


/* ===== Feinschliff nach Design-Bewertung ===== */
/* 1. Ruhe: kein Dauerflackern der Neonleisten, nur das Aufwärmen beim Laden */
.korpus::before { animation: neonstart 1.6s ease-out both; }
.korpus::after { animation: neonstart 1.6s ease-out .25s both; }

/* 2. Display (Desktop): kurze Fassung des Textes, größer und besser lesbar; der volle Text steht unter dem Gerät */
.pin .sub-lang { display: none; }
.pin .sub-kurz { display: inline; }
.pin .unterzeile { max-width: 52ch; font-size: clamp(.95rem, 1.3vw, 1.125rem); line-height: 1.5; }
.pin .flaeche { height: clamp(270px, 38vh, 390px); }
.hero-lang { display: none; }
.pin ~ .coverinfo .hero-lang { display: block; margin: 8px 0 22px; max-width: 70ch; font-size: 1.0625rem; line-height: 1.65; color: var(--text-hell); }

/* 3. Platzhalter: nur noch ein leerer Platz zeigt, dass es weitergeht */
.pin .coverreihe { grid-template-columns: repeat(4, 128px); }
.pin .cover.leer:nth-last-child(-n+2) { display: none; }

/* 4. Handy: das Gehäuse nimmt weniger Breite weg */
@media (max-width: 899px) { :root { --rail: 8px; } .raum { padding-inline: 4px; } }

/* 5. Desktop: Das Gerät wirkt von hinten angestrahlt. Das Licht fällt am Gehäuse vorbei zu den Seiten.
      Nur statische Verläufe (keine Unschärfe-Filter), in der Mitte bleibt der Grund dunkel, damit der Text kontrastreich bleibt. */
@media (min-width: 900px) {
  body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
      radial-gradient(520px 78vh at calc(50% - 690px) 46%, rgb(255 178 82 / .26), rgb(255 150 60 / .10) 45%, transparent 72%),
      radial-gradient(520px 78vh at calc(50% + 690px) 46%, rgb(255 178 82 / .26), rgb(255 150 60 / .10) 45%, transparent 72%),
      radial-gradient(900px 40vh at 50% 108%, rgb(255 150 60 / .12), transparent 70%); }
  .raum, .korpus { position: relative; z-index: 1; }
  .raum { background: transparent; }
  .korpus { box-shadow: 0 0 0 1px #000, 0 0 0 2px rgb(255 214 150 / .28), 0 0 38px 4px rgb(255 190 100 / .30), 0 0 120px 20px rgb(255 150 60 / .16), 0 40px 80px rgb(0 0 0 / .7); }
}
@media (prefers-reduced-motion: reduce) { body::before { opacity: .85; } }
@media (min-width: 900px) and (max-height: 859px) { .pin .unterzeile { font-size: .9rem; line-height: 1.42; } .pin .schild h1 { font-size: clamp(1.35rem, 2.4vw, 2.1rem); } }
.ctitel { hyphens: auto; overflow-wrap: break-word; }
@media (min-width: 900px) { .pin .ctitel { font-size: .78rem; hyphens: manual; overflow-wrap: normal; } }

/* ===== Leitfaden als Doku: Seitenleiste, Pfad, „Auf dieser Seite“, Blättern ===== */
.leitfaden .spalte.lf-rahmen { max-width: var(--breit); display: grid; gap: 24px; }
@media (min-width: 960px) { .leitfaden .spalte.lf-rahmen { grid-template-columns: 250px minmax(0, 1fr); gap: 48px; align-items: start; } }
.lf-inhalt { min-width: 0; max-width: 820px; }
.lf-seitenleiste { min-width: 0; }
@media (min-width: 960px) { .lf-seitenleiste { position: sticky; top: calc(var(--kopf, 84px) + 16px); max-height: calc(100vh - var(--kopf, 84px) - 32px); overflow-y: auto; } }
.lf-nav { border-radius: 14px; background: #120e0a; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1); }
.lf-nav summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 16px; cursor: pointer; font-weight: 800; color: var(--amber-text); list-style: none; }
.lf-nav summary::-webkit-details-marker { display: none; }
.lf-nav summary::after { content: ""; width: 10px; height: 10px; border-inline-end: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-3px); transition: transform .15s; }
.lf-nav[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
@media (min-width: 960px) { .lf-nav[open] summary { display: none; } }
.lf-nav nav { padding: 4px 8px 12px; }
.lf-nav-gruppe { margin: 14px 10px 4px; font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #b9a98a; }
.lf-nav-liste { list-style: none; margin: 0; padding: 0 !important; }
.lf-nav-liste li { margin: 0; }
.lf-nav-liste a { display: flex; align-items: center; min-height: 44px; padding: 6px 10px; border-radius: 8px; text-decoration: none; color: #e9dcc1; font-size: .9375rem; line-height: 1.3; border-inline-start: 3px solid transparent; }
.lf-nav-liste a:hover, .lf-nav-liste a:focus-visible { background: rgb(242 184 75 / .12); color: #fff3d6; }
.lf-nav-liste a[aria-current="page"] { background: rgb(242 184 75 / .16); color: var(--amber-text); font-weight: 800; border-inline-start-color: var(--amber); }
.lf-zurueck { margin: 0 0 8px; }
.lf-pfad ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0 0 10px; padding: 0 !important; font-size: .875rem; color: var(--text-2); }
.lf-pfad li { margin: 0; }
.lf-pfad li + li::before { content: "›"; margin-inline: 8px; }
.lf-pfad a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.leitfaden .lf-toc { display: block; padding: 14px 16px 10px; margin: 24px 0 8px; }
.lf-toc p { margin: 0 0 6px; font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #b9a98a; }
.lf-toc ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0 !important; }
.lf-toc li { margin: 0; }
.leitfaden .lf-h2 { scroll-margin-top: calc(var(--kopf, 84px) + 12px); margin: 2.2em 0 .7em; font-size: clamp(1.25rem, 4.2vw, 1.6rem); line-height: 1.25; color: var(--text); padding-top: 18px; border-top: 1px solid var(--rand); }
.lf-text > .lf-h2:first-child { margin-top: 1.2em; }
.lf-siehe { margin: 24px 0; padding: 12px 16px; border-radius: 12px; background: rgb(255 255 255 / .04); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .09); }
.lf-siehe span { font-weight: 800; color: var(--text); margin-inline-end: 4px; }
.lf-siehe a { display: inline-flex; align-items: center; min-height: 44px; }
.lf-neu { margin: 0 0 8px; padding: 18px 22px 10px; }
.leitfaden .lf-neu h2 { margin: 0 0 .5em; font-size: 1.125rem; color: var(--gravur); }
.lf-neu li { color: var(--gravur); margin-bottom: .4em; }
.lf-neu a { color: var(--gravur); text-decoration: underline; }
.leitfaden .lf-gruppe { padding-block: 40px 0; }
.lf-seitenliste { list-style: none; margin: 0; padding: 0 !important; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.lf-seitenliste li { margin: 0; scroll-margin-top: calc(var(--kopf, 84px) + 12px); }
.lf-seitenliste a { display: grid; gap: 6px; height: 100%; padding: 16px 18px; border-radius: 14px; text-decoration: none; background: rgb(255 255 255 / .04); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1); transition: background .15s, box-shadow .15s; }
.lf-seitenliste a:hover, .lf-seitenliste a:focus-visible { background: rgb(242 184 75 / .1); box-shadow: inset 0 0 0 1px var(--amber-tief); }
.lf-seitenliste strong { color: var(--link); font-size: 1.0625rem; }
.lf-seitenliste span { color: var(--text-2); font-size: .9375rem; line-height: 1.5; }
.lf-blaettern { display: grid; gap: 12px; margin: 48px 0 8px; padding-top: 24px; border-top: 1px solid var(--rand); }
@media (min-width: 600px) { .lf-blaettern { grid-template-columns: 1fr 1fr; } }
.lf-blaettern a { display: grid; gap: 2px; min-height: 64px; padding: 12px 16px; border-radius: 12px; text-decoration: none; background: rgb(255 255 255 / .04); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1); }
.lf-blaettern a:hover, .lf-blaettern a:focus-visible { box-shadow: inset 0 0 0 1px var(--amber-tief); }
.lf-blaettern small { font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.lf-blaettern span { color: var(--link); font-weight: 700; }
.lf-blaettern .lf-vor small::before { content: "← "; }
.lf-blaettern .lf-nach { text-align: end; grid-column: -2; }
.lf-blaettern .lf-nach small::after { content: " →"; }
:root[data-theme="hell"] .lf-seitenliste a, :root[data-theme="hell"] .lf-blaettern a, :root[data-theme="hell"] .lf-siehe { background: rgb(0 0 0 / .03); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .12); }
/* Tabellen haben in beiden Stufen einen dunklen Grund: Textfarben der dunklen Stufe behalten */
:root[data-theme="hell"] .lf-tabelle { --text: #f1e7d2; --text-2: #cbbd9f; }
.lf-pfad ol { align-items: center; }
.lf-nav summary { line-height: 1.3; }
.lf-inhalt h1 { font-size: clamp(1.5rem, 6vw, 2.6rem); overflow-wrap: normal; }

/* ===== Galerie im Regal der Jukebox: jedes Tool ist ein Cover, das Regal blättert seitlich ===== */
[hidden] { display: none !important; }
.gsym { fill: none; }
.coverfenster { overflow-x: clip; }
.coverkopf .regalknoepfe { display: flex; gap: 8px; margin-inline-start: auto; }
.regalknopf { display: grid; place-items: center; width: 44px; height: 44px; padding: 0 0 3px; border: 0; border-radius: 50%; cursor: pointer; font: 700 1.6rem/1 system-ui, sans-serif; color: #f3e6c4; background: radial-gradient(circle at 35% 30%, #4a3c2a, #17110b); box-shadow: 0 2px 0 rgb(0 0 0 / .35), inset 0 0 0 2px #0a0704; }
.regalknopf:disabled { cursor: default; color: #8a7a5c; }
.coverreihe, .pin .coverreihe { display: flex; justify-content: flex-start; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: 6px; position: relative; margin: -10px -6px 0; padding: 14px 6px 16px; scrollbar-width: thin; scrollbar-color: #8a7a5c transparent; }
.coverreihe.flug { overflow: visible; }
.coverreihe .cover { flex: 0 0 112px; scroll-snap-align: start; }
@media (min-width: 760px) { .coverreihe .cover { flex-basis: 128px; } .coverreihe { gap: 14px; } }
.cover .nr { min-width: 36px; height: 26px; padding-inline: 6px; border-radius: 13px; font-size: .75rem; letter-spacing: .04em; }
.coveralle { margin: 16px 6px 0; }
.coveralle .knopf { min-height: 48px; }
.coverinfo .coveralle { margin-inline: 0; }

/* Display: Angaben zum eingelegten Tool */
.tinfo { position: relative; z-index: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: grid; align-content: start; gap: 6px; padding: 12px 16px 14px; color: var(--amber-text); font-size: .9375rem; line-height: 1.45; animation: einblenden .35s both; scrollbar-width: thin; scrollbar-color: var(--amber-tief) transparent; }
.tinfo:focus-visible { outline: 3px solid var(--amber); outline-offset: -3px; border-radius: 6px; }
.ti-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; font: 700 .75rem/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .12em; text-transform: uppercase; }
.ti-nr { padding: 3px 7px; border-radius: 4px; color: #2a1a05; background: var(--amber); letter-spacing: .06em; }
.tinfo .ti-name { margin: 2px 0 0; font-size: 1.3rem; color: #ffe2a3; text-shadow: 0 0 10px rgb(242 184 75 / .45); }
.ti-kern { margin: 0; }
.ti-kann { margin: 0; padding-inline-start: 1.1em; font-size: .875rem; }
.ti-kann li { margin: 0; }
.ti-kann li::marker { color: var(--amber); }
.ti-verb { margin: 0; font-size: .8125rem; }
.ti-tipp { margin: 4px 0 0; padding-top: 8px; border-top: 1px dashed rgb(242 184 75 / .3); font: 700 .75rem/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .06em; }
@media (max-width: 520px) { .ti-kann li:nth-child(3) { display: none; } .tinfo { padding: 10px 12px 12px; } .tinfo .ti-name { font-size: 1.15rem; } }

/* ===== Galerie-Seiten: Übersicht und je Tool eine Seite ===== */
.galerie-seite .spalte { max-width: var(--breit); }
.galerie-seite .lf-abschnitt > p, .galerie-seite .t-teil > p { max-width: 70ch; }
.g-fakten { list-style: none; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); margin: 28px 0 0; padding: 0 !important; }
.g-fakten li { display: grid; gap: 2px; margin: 0; padding: 14px 18px; border-radius: 14px; background: rgb(255 255 255 / .04); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1); }
.g-fakten strong { font: 800 2rem/1.1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--link); }
.g-fakten span { color: var(--text-2); font-size: .9375rem; line-height: 1.4; }
.g-filter { display: grid; gap: 14px; margin: 0 0 22px; }
.g-suche { display: grid; gap: 6px; margin: 0; max-width: 460px; }
.g-suche label { font-weight: 700; }
#g-suche { width: 100%; min-height: 48px; padding: 0 16px; border: 0; border-radius: 12px; font: inherit; color: var(--text); background: #120e0a; box-shadow: inset 0 0 0 1.5px #6b5a40; }
#g-suche::placeholder { color: #a8987a; }
.g-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.g-chip { min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; cursor: pointer; font: 700 .875rem/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--amber-text); background: transparent; box-shadow: inset 0 0 0 1.5px var(--amber-tief); }
.g-chip:hover { background: rgb(242 184 75 / .12); }
.g-chip[aria-pressed="true"] { color: #2a1a05; background: var(--amber); box-shadow: none; }
.g-treffer { margin: 0; color: var(--text-2); font-size: .9375rem; }
.g-keine { padding: 16px 18px; border-radius: 12px; background: rgb(242 184 75 / .1); }

.g-karten { list-style: none; display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); margin: 0; padding: 0 !important; }
.g-karte { --k: var(--amber); position: relative; display: grid; grid-template-rows: auto 1fr auto; margin: 0; border-radius: 16px; overflow: hidden; background: #17120d; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1), 0 10px 24px rgb(0 0 0 / .3); transition: transform .15s, box-shadow .15s; }
.g-karte:hover, .g-karte:focus-within { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--amber-tief), 0 14px 28px rgb(0 0 0 / .4); }
.g-bild { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--k) 70%, #fff), var(--k) 55%, color-mix(in srgb, var(--k) 60%, #000)); }
.g-bild img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.g-cover { position: absolute; inset: 0; display: grid; place-items: center; color: #1d170e; }
.g-bild img + .g-cover { inset: auto auto 10px 10px; width: 48px; height: 48px; border-radius: 10px; background: var(--k); box-shadow: 0 4px 10px rgb(0 0 0 / .4); }
.g-cover .ik.gross { width: 38%; height: 38%; opacity: .85; }
.g-bild img + .g-cover .ik.gross { width: 30px; height: 30px; }
.g-text { display: grid; align-content: start; gap: 4px; padding: 14px 18px 4px; }
.g-nr { margin: 0; font: 700 .75rem/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .1em; color: var(--text-2); }
.g-text h3 { margin: 0; font-size: 1.2rem; }
.g-link { color: var(--text); text-decoration: none; }
.g-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }   /* die ganze Karte ist klickbar */
.g-link:focus-visible { outline: none; }
.g-karte:has(.g-link:focus-visible) { outline: 3px solid var(--amber); outline-offset: 3px; }
.g-beschr { margin: 0; color: var(--text-2); font-size: .9375rem; line-height: 1.5; }
.g-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; padding: 0 !important; }
.g-tags li { margin: 0; padding: 3px 9px; border-radius: 999px; font-size: .75rem; font-weight: 700; color: var(--amber-text); box-shadow: inset 0 0 0 1px var(--amber-tief); }
.g-aktion { position: relative; z-index: 2; margin: 0; padding: 10px 18px 16px; }
.g-laden { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 0; border-radius: 10px; cursor: pointer; font: 700 .9375rem/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; text-decoration: none; color: var(--text); background: transparent; box-shadow: inset 0 0 0 2px #7b6247; }
.g-laden:hover { background: rgb(242 184 75 / .1); }
.g-karten.mini { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); margin-top: 18px; }
.g-karte.klein { grid-template-columns: 72px minmax(0, 1fr); grid-template-rows: auto; align-items: stretch; }
.g-karte.klein .g-bild { aspect-ratio: auto; min-height: 72px; }
.g-karte.klein .g-cover .ik.gross { width: 32px; height: 32px; }
.g-karte.klein .g-text { padding: 12px 14px; }
.g-karte.klein h3 { font-size: 1.0625rem; }
.g-karte.klein .g-beschr { font-size: .875rem; }

.g-pakete { list-style: none; display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); margin: 24px 0 0; padding: 0 !important; }
.g-paket { margin: 0; padding: 20px 20px 16px; scroll-margin-top: calc(var(--kopf, 84px) + 12px); }
.g-paket:target { box-shadow: 0 0 0 3px var(--amber), 0 10px 24px rgb(0 0 0 / .3); }
.galerie-seite .g-paket h3 { margin: 0 0 .4em; padding-inline-end: 16px; font-size: 1.2rem; color: var(--gravur); }
.g-paket p { margin: 0 0 12px; color: var(--gravur); font-size: .9375rem; line-height: 1.55; }
.g-mini { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0 !important; }
.g-mini li { margin: 0; }
.g-mini a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 14px 4px 5px; border-radius: 999px; text-decoration: none; font-weight: 700; font-size: .9375rem; color: #2b2418; background: rgb(255 255 255 / .55); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .15); }
.g-mini a:hover { background: rgb(255 255 255 / .8); }
.g-mini .gsym { flex: none; width: 34px; height: 34px; padding: 7px; border-radius: 50%; color: #1d170e; background: var(--k); stroke-width: 2; }
.g-haken { list-style: none; display: grid; gap: 10px; margin: 0 0 1.2em; padding: 0 !important; }
.g-haken li { position: relative; margin: 0; padding-inline-start: 34px; }
.g-haken li::before { content: ""; position: absolute; inset-inline-start: 2px; top: .3em; width: 20px; height: 20px; border-radius: 50%; background: #5fbf7a; box-shadow: 0 0 8px rgb(95 191 122 / .5); }
.g-haken li::after { content: ""; position: absolute; inset-inline-start: 9px; top: calc(.3em + 4px); width: 6px; height: 10px; border: solid #10240f; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.g-bald { margin-top: 4px; color: var(--text-2); font-size: .9375rem; }
.g-links { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.g-links a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }

/* Tool-Seite */
.t-kopf { display: grid; gap: 28px; align-items: center; margin: 8px 0 12px; }
@media (min-width: 860px) { .t-kopf { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 48px; } }
.t-nr { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; font: 700 .8125rem/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .1em; color: var(--text-2); }
.t-sym { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 12px; color: #1d170e; background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--k) 70%, #fff), var(--k) 55%, color-mix(in srgb, var(--k) 60%, #000)); box-shadow: 0 6px 14px rgb(0 0 0 / .4); }
.t-sym .gsym { width: 30px; height: 30px; }
.t-paket { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px; font: 700 .8125rem/1 system-ui, sans-serif; letter-spacing: 0; text-decoration: none; color: var(--amber-text); box-shadow: inset 0 0 0 1px var(--amber-tief); }
.t-paket:hover { background: rgb(242 184 75 / .12); }
.t-fuer { color: var(--text-2); max-width: 62ch; }
.t-fuer strong { color: var(--text); }
.t-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 0; }
.t-knoepfe .knopf { gap: 10px; }
.t-knoepfe .knopf small { font-weight: 600; font-size: .8125rem; opacity: .85; }
.t-knoepfe .knopf.zweit { border: 0; cursor: pointer; font: inherit; font-weight: 800; color: var(--text); }
.t-bild { justify-self: center; width: min(100%, 300px); margin: 8px 0; border-radius: 26px; overflow: hidden; background: #0c0a07; box-shadow: 0 0 0 8px #241a12, 0 0 0 9px #4a3a28, 0 24px 48px rgb(0 0 0 / .55); }
@media (min-width: 860px) { .t-bild { width: min(100%, 340px); } }
.t-bild img { width: 100%; aspect-ratio: 5 / 8; object-fit: cover; object-position: top; }
.t-bild.ohne { display: grid; place-items: center; aspect-ratio: 5 / 8; color: #1d170e; background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--k) 70%, #fff), var(--k) 55%, color-mix(in srgb, var(--k) 60%, #000)); }
.t-bild.ohne .ik.gross { width: 30%; height: 30%; }
.t-probe { margin: 28px 0 0; scroll-margin-top: calc(var(--kopf, 84px) + 12px); border-radius: 18px; overflow: hidden; background: #0c0a07; box-shadow: inset 0 0 0 1px #5d4a2e, 0 16px 32px rgb(0 0 0 / .45); }
.t-probe-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 10px 12px 10px 18px; background: #1b1510; border-bottom: 1px solid #3a2d22; }
.t-probe-kopf p { margin: 0; flex: 1 1 260px; font-size: .9375rem; color: var(--text-2); }
.t-probe iframe { display: block; width: 100%; height: min(78vh, 720px); border: 0; background: #15120e; }
.t-raster { display: grid; gap: 0 48px; }
@media (min-width: 860px) { .t-raster { grid-template-columns: 1fr 1fr; } }
.t-teil { padding-top: clamp(32px, 6vw, 48px); }
.galerie-seite .t-teil h2 { font-size: clamp(1.2rem, 4vw, 1.5rem); margin: 0 0 1rem; text-transform: uppercase; letter-spacing: .1em; }
.t-vorlagen { display: grid; gap: 10px; margin: 0; }
.t-vorlagen div { padding: 12px 16px; border-radius: 12px; background: rgb(255 255 255 / .04); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .09); }
.t-vorlagen dt { font-weight: 800; color: var(--link); }
.t-vorlagen dd { margin: 2px 0 0; color: var(--text-2); font-size: .9375rem; line-height: 1.5; }
.t-verb { display: grid; gap: 20px; }
@media (min-width: 760px) { .t-verb { grid-template-columns: 1fr 1fr; } }
.t-verb-teil { padding: 4px 18px 16px; border-radius: 14px; background: rgb(255 255 255 / .04); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .09); }
.galerie-seite .t-verb-teil h3 { margin: 12px 0 10px; font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }
.t-verb .g-mini { display: grid; gap: 10px; }
.t-verb .g-mini li { display: grid; gap: 2px; justify-items: start; }
.t-verb .g-mini a { color: var(--text); background: rgb(255 255 255 / .06); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12); }
.t-verb .g-mini a:hover { background: rgb(242 184 75 / .12); }
.t-verb small { padding-inline-start: 12px; color: var(--text-2); font-size: .875rem; }
.t-fakten { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); margin: 0 0 12px; }
.t-fakten div { padding: 10px 14px; border-radius: 12px; background: rgb(255 255 255 / .04); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .09); }
.t-fakten .breit { grid-column: 1 / -1; }
.t-fakten dt { font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.t-fakten dd { margin: 2px 0 0; font-weight: 700; }
.t-fakten code { font-size: .8125rem; overflow-wrap: anywhere; word-break: break-all; color: var(--amber-text); }
.t-melden { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 8px; }
.t-melden span { color: var(--text-2); font-size: .9375rem; flex: 1 1 240px; }
.t-pakete { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.t-paketinfo { padding: 14px 18px 4px; border-radius: 14px; background: rgb(255 255 255 / .04); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .09); }
.galerie-seite .t-paketinfo h3 { margin: 0 0 .35em; font-size: 1.0625rem; }
.t-paketinfo p { color: var(--text-2); font-size: .9375rem; line-height: 1.55; }
.tinfo p { color: var(--amber-text); }   /* das Display liegt auf einer Metallplatte: deren gravierte Schriftfarbe gilt hier nicht */

/* Handy: Unter dem Bild der App steht die Jukebox der Galerie, ohne Drehregler (Sprache steht oben, die Seite ist dunkel) */
@media (max-width: 899px), (orientation: landscape) and (max-height: 799px) and (max-width: 960px) {
  .hero .hero-sticky { display: block; margin-top: 8px; }
  .hero .bedienfeld > .reglerpaar { display: none; }
  .hero .coverlead, .hero .coverunten { display: none; }
  .coverinfo .coverkopf { display: none; }
  .coverinfo { padding-top: 22px; }
}
.coverreihe .etikett { flex-direction: column; align-items: flex-start; gap: 6px; }
.coverreihe .ctitel, .pin .coverreihe .ctitel { font-size: .8125rem; hyphens: auto; overflow-wrap: anywhere; }
/* Desktop-Eröffnung: das Gerät samt Regal muss auf den Bildschirm passen */
.pin .cover .art { aspect-ratio: 4 / 3; }
.pin .coverreihe { padding-block: 12px 8px; }
.pin .regalknopf { width: 36px; height: 36px; font-size: 1.3rem; }
.pin .coverfenster .coverkopf { padding-bottom: 2px; }

/* Handy: Tasten etwas kleiner, Funktionstasten in voller Breite unter dem Transport */
@media (max-width: 520px) {
  .tastenfeld { gap: 10px; }
  .taste .kappe { width: 54px; height: 48px; }
  .taste.gross .kappe { width: 76px; }
  .funktionen { width: 100%; }
  .ftaste { flex: 1; }
  .ftaste .kappe { width: 100%; min-width: 0; height: 48px; padding: 0 10px; letter-spacing: .04em; }
}

/* ===== Anflug: die Jukebox in der Ferne, Scrollen fährt die Kamera heran (Steuerung in app.js) ===== */
.anflug, .anflug-strecke { display: none; }
html.mit-anflug .anflug { display: block; position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: radial-gradient(120% 80% at 50% 35%, #1a1410 0%, #080706 70%); }
html.mit-anflug .anflug-strecke { display: block; position: relative; }
/* Die Mauer bleibt: hinter der Seite (Seite z-index 1) und an den Seiten zu jeder Zeit sichtbar */
html.mit-anflug .raum { background: transparent; }
html.mit-anflug body::before { content: none; }
.anflug img { position: absolute; left: 0; top: 0; width: 1366px; height: 768px; max-width: none; transform-origin: 0 0; will-change: transform, opacity; }
.anflug-nah { opacity: 0; }
.anflug-schirm { position: absolute; left: 0; top: 0; width: 677px; height: 304px; transform-origin: 0 0; opacity: 0; border-radius: 6px; background: var(--glas); box-shadow: inset 0 0 0 1px #000; }
.anflug-tipp { position: absolute; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: grid; justify-items: center; gap: 2px; width: max-content; max-width: calc(100vw - 32px); margin: 0; padding: 8px 18px 6px; border-radius: 14px; background: rgb(8 6 4 / .78); box-shadow: inset 0 0 0 1px rgb(242 184 75 / .45), 0 0 18px rgb(242 184 75 / .2); text-align: center; font: 700 .8125rem/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .14em; text-transform: uppercase; color: #ffd98a; text-shadow: 0 0 10px rgb(242 184 75 / .8), 0 2px 4px #000; }
.anflug-tipp .pfeil { font-size: 1.2rem; animation: anflug-wink 1.8s ease-in-out infinite; }
@keyframes anflug-wink { 50% { transform: translateY(6px); } }
.anflug-direkt { display: none; }
.schirm.einschalten > * { animation: schirm-an .35s ease-out; }
@keyframes schirm-an { from { opacity: 0; } }
html.mit-anflug:not(.anflug-vorbei) .anflug-direkt { display: inline-flex; position: fixed; z-index: 31; top: 14px; inset-inline-end: 14px; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; font-weight: 700; font-size: .875rem; text-decoration: none; color: #ffe2a3; background: rgb(12 9 6 / .7); box-shadow: inset 0 0 0 1px rgb(242 184 75 / .5); }
html.mit-anflug .skip { z-index: 40; }

/* ===== Neon-Cover wie in den Bildern: dunkler Rahmen, leuchtende Kante in der Farbe des Tools ===== */
.coverreihe .cover { color: #f1e7d2; background: linear-gradient(180deg, #1e1813, #120e0b); box-shadow: inset 0 0 0 2px var(--k), 0 0 14px color-mix(in srgb, var(--k) 55%, transparent), 0 8px 14px rgb(0 0 0 / .55); }
.coverreihe .cover .art { margin: 6px 6px 0; background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--k) 80%, #fff), var(--k) 55%, color-mix(in srgb, var(--k) 55%, #000)); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .35), inset 0 -10px 18px rgb(0 0 0 / .25); }
.coverreihe .cover .ctitel { color: #f1e7d2; }
.coverreihe .cover .nr { color: #f3e6c4; }
.coverreihe .cover.eingelegt { box-shadow: inset 0 0 0 2px var(--k), 0 0 0 2px var(--amber), 0 0 26px color-mix(in srgb, var(--k) 80%, transparent), 0 14px 22px rgb(0 0 0 / .6); }
.coverreihe .cover.fliegt { box-shadow: inset 0 0 0 2px var(--k), 0 0 22px color-mix(in srgb, var(--k) 80%, transparent), 0 16px 26px rgb(0 0 0 / .55); }
/* Das Nahbild hat links und rechts schwarze Ränder: sie laufen weich ins Fernbild aus */
.anflug-nah { -webkit-mask-image: linear-gradient(to right, transparent 10.5%, #000 17%, #000 83%, transparent 89.5%); mask-image: linear-gradient(to right, transparent 10.5%, #000 17%, #000 83%, transparent 89.5%); }

/* ===== Desktop-Eröffnung: Die Jukebox ist das Bild (anflug/nah.webp, Ausschnitt 957 × 620 ab Bildpunkt 215/113).
   Display, Pegel, Drehregler, Tasten und Regal liegen genau auf ihren Stellen im Bild. Maße in Bildpunkten × --e. ===== */
.pin .deck { border: 0; border-image: none; }
.pin .geraet { container-type: inline-size; --e: calc(100cqw / 957); position: relative; display: block; width: min(100%, calc((100svh - var(--kopf, 84px) - 12px) * 957 / 620)); aspect-ratio: 957 / 620; margin-inline: auto; filter: none;
  background: #1a1410 url(/assets/anflug/nah.webp) no-repeat; background-size: 142.74% auto; background-position: 52.57% 76.35%; }
.pin .geraet .platte, .pin .geraet .bedienfeld, .pin .geraet .reglerpaar, .pin .geraet .reglerfeld, .pin .geraet .anzeige, .pin .geraet .blende,
.pin .geraet .tastenfeld, .pin .geraet .transport, .pin .geraet .funktionen, .pin .geraet .coverfenster, .pin .geraet .coverkopf {
  position: static; display: block; min-width: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.pin .geraet .platte::before, .pin .geraet .platte::after, .pin .geraet .coverfenster::after { content: none; }
/* Beschriftungen stehen schon im Bild */
.pin .geraet .reglerfeld > .gravur, .pin .geraet .coverkopf h2 { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pin .geraet .coverkopf .led { display: none; }

/* Display und Pegel */
.pin .geraet .schirm { position: absolute; left: calc(135 * var(--e)); top: calc(32 * var(--e)); width: calc(677 * var(--e)); height: calc(302 * var(--e)); border-radius: calc(5 * var(--e)); box-shadow: inset 0 0 0 1px #000, inset 0 0 30px rgb(242 184 75 / .08); background: var(--glas); }   /* deckend: das Neon-Logo des Bildes verschwindet, sobald das Display Schrift zeigt */
.pin .geraet .flaeche { height: auto; min-height: 0; }
.pin .geraet .pegel { position: absolute; left: calc(817 * var(--e)); top: calc(34 * var(--e)); width: calc(28 * var(--e)); height: calc(296 * var(--e)); gap: calc(4 * var(--e)); padding: 0; }
.pin .geraet .pegel i { width: calc(12 * var(--e)); }
.pin .geraet .einlegelippe { left: calc(342 * var(--e)); bottom: auto; top: calc(337 * var(--e)); width: calc(295 * var(--e)); height: calc(8 * var(--e)); transform: none; }

/* Drehregler: Knopf auf dem Knopf im Bild, Wert als kleines Leuchtfenster über der Beschriftung im Bild */
.pin .geraet .skala { position: absolute; width: calc(70 * var(--e)); height: calc(70 * var(--e)); }
.pin .geraet .regler { width: calc(50 * var(--e)); height: calc(50 * var(--e)); }
.pin .geraet .regler::after { top: calc(5 * var(--e)); height: calc(14 * var(--e)); width: calc(3.5 * var(--e)); }
.pin .geraet .skala i::before { height: calc(6 * var(--e)); }
.pin .geraet [data-feld="sprache"] .skala { left: calc(28 * var(--e)); top: calc(115 * var(--e)); }
.pin .geraet [data-feld="erscheinung"] .skala { left: calc(28 * var(--e)); top: calc(241 * var(--e)); }
.pin .geraet [data-feld="ton"] .skala { left: calc(869 * var(--e)); top: calc(115 * var(--e)); }
.pin .geraet [data-feld="haptik"] .skala { left: calc(869 * var(--e)); top: calc(241 * var(--e)); }
.pin .geraet .wert { position: absolute; width: calc(78 * var(--e)); height: calc(18 * var(--e)); justify-content: center; gap: calc(5 * var(--e)); border-radius: calc(4 * var(--e)); font-size: calc(9.5 * var(--e)); letter-spacing: .08em; color: #ffd98a; background: #15110d; box-shadow: inset 0 0 0 1px rgb(242 184 75 / .3); text-shadow: 0 0 6px rgb(242 184 75 / .5); }
.pin .geraet .wert::after { width: calc(5 * var(--e)); height: calc(5 * var(--e)); }
.pin .geraet [data-feld="sprache"] .wert { left: calc(18 * var(--e)); top: calc(188 * var(--e)); }
.pin .geraet [data-feld="erscheinung"] .wert { left: calc(19 * var(--e)); top: calc(315 * var(--e)); }
.pin .geraet [data-feld="ton"] .wert { left: calc(861 * var(--e)); top: calc(188 * var(--e)); }
.pin .geraet [data-feld="haptik"] .wert { left: calc(863 * var(--e)); top: calc(315 * var(--e)); }

/* Tasten: Kappen auf den Tasten im Bild, die Beschriftung auf einem dunklen Streifen darunter */
.pin .geraet .tastenfeld::before { content: ""; position: absolute; left: calc(216 * var(--e)); top: calc(393 * var(--e)); width: calc(263 * var(--e)); height: calc(15 * var(--e)); border-radius: calc(3 * var(--e)); background: #16120e; box-shadow: inset 0 1px 2px rgb(0 0 0 / .6); }
.pin .geraet .taste, .pin .geraet .ftaste { position: absolute; top: calc(352 * var(--e)); height: calc(40 * var(--e)); display: block; }
.pin .geraet .taste .kappe, .pin .geraet .ftaste .kappe { width: 100%; height: 100%; min-width: 0; border-radius: calc(7 * var(--e)); }
.pin .geraet .taste .ik { width: calc(17 * var(--e)); height: calc(17 * var(--e)); }
.pin .geraet .tbeschr { position: absolute; left: 50%; top: calc(43 * var(--e)); transform: translateX(-50%); font-size: calc(7.5 * var(--e)); letter-spacing: .06em; color: #ffd98a; text-shadow: none; }
.pin .geraet .ftaste .kappe { gap: calc(6 * var(--e)); padding: 0 calc(8 * var(--e)); font-size: calc(9.5 * var(--e)); }
.pin .geraet .ftaste .ik { width: calc(13 * var(--e)); height: calc(13 * var(--e)); }
.pin .geraet #t-zurueck { left: calc(223 * var(--e)); width: calc(44 * var(--e)); }
.pin .geraet #t-stopp { left: calc(282 * var(--e)); width: calc(44 * var(--e)); }
.pin .geraet #t-start { left: calc(349 * var(--e)); width: calc(65 * var(--e)); }
.pin .geraet #t-weiter { left: calc(427 * var(--e)); width: calc(45 * var(--e)); }
.pin .geraet #t-details { left: calc(490 * var(--e)); width: calc(112 * var(--e)); }
.pin .geraet #t-laden { left: calc(610 * var(--e)); width: calc(146 * var(--e)); }

/* Regal: die Tools liegen auf den Neon-Covern im Bild, seitlich blätterbar */
.pin .geraet .coverreihe { position: absolute; left: calc(13 * var(--e)); top: calc(461 * var(--e)); width: calc(938 * var(--e)); height: calc(144 * var(--e)); margin: 0; padding: calc(6 * var(--e)) calc(2 * var(--e)); gap: calc(10.3 * var(--e)); scrollbar-width: none; }
.pin .geraet .coverreihe::-webkit-scrollbar { display: none; }
.pin .geraet .coverreihe.flug { overflow: visible; clip-path: inset(-200vh 0 0 0); }
.pin .geraet .coverreihe .cover { flex: 0 0 calc(99 * var(--e)); height: calc(132 * var(--e)); border-radius: calc(9 * var(--e)); grid-template-rows: auto 1fr; }
.pin .geraet .coverreihe .cover .art { aspect-ratio: auto; height: calc(65 * var(--e)); margin: calc(7 * var(--e)) calc(7 * var(--e)) 0; border-radius: calc(5 * var(--e)); }
.pin .geraet .cover .art .ik.gross { width: calc(26 * var(--e)); height: calc(26 * var(--e)); }
.pin .geraet .coverreihe .etikett { padding: calc(7 * var(--e)) calc(8 * var(--e)); gap: calc(5 * var(--e)); justify-content: space-between; }
.pin .geraet .coverreihe .ctitel { font-size: calc(10 * var(--e)); line-height: 1.15; overflow-wrap: normal; hyphens: auto; }
.pin .geraet .coverreihe .nr { height: calc(16 * var(--e)); min-width: calc(28 * var(--e)); padding: 0 calc(5 * var(--e)); border-radius: calc(8 * var(--e)); font-size: calc(8.5 * var(--e)); }
.pin .geraet .regalknoepfe { position: absolute; left: calc(877 * var(--e)); top: calc(436 * var(--e)); gap: calc(8 * var(--e)); margin: 0; }
.pin .geraet .regalknopf { width: calc(26 * var(--e)); height: calc(26 * var(--e)); padding: 0 0 calc(2 * var(--e)); font-size: calc(17 * var(--e)); }
/* Liegt ein Tool im Display, tritt die Schlagzeile der Eröffnung zurück */
.pin .schirm:not([data-zustand="leer"]) .hero-text { visibility: hidden; }
.skala[data-n="2"] i:nth-child(1){--a:-135deg}
.skala[data-n="2"] i:nth-child(2){--a:135deg}
.skala[data-n="3"] i:nth-child(1){--a:-135deg}
.skala[data-n="3"] i:nth-child(2){--a:0deg}
.skala[data-n="3"] i:nth-child(3){--a:135deg}
.skala[data-n="4"] i:nth-child(1){--a:-135deg}
.skala[data-n="4"] i:nth-child(2){--a:-45deg}
.skala[data-n="4"] i:nth-child(3){--a:45deg}
.skala[data-n="4"] i:nth-child(4){--a:135deg}
.skala[data-n="5"] i:nth-child(1){--a:-135deg}
.skala[data-n="5"] i:nth-child(2){--a:-67deg}
.skala[data-n="5"] i:nth-child(3){--a:0deg}
.skala[data-n="5"] i:nth-child(4){--a:68deg}
.skala[data-n="5"] i:nth-child(5){--a:135deg}
[data-k="C01"]{--k:#9bbb88}
[data-k="M01"]{--k:#7fb2ee}
[data-k="F02"]{--k:#6fb3c8}
[data-k="H01"]{--k:#f2b84b}
[data-k="B07"]{--k:#5cc2b6}
[data-k="E07"]{--k:#bda6ee}
[data-k="I06"]{--k:#6f8fb8}
[data-k="F01"]{--k:#f2b84b}
[data-k="C02"]{--k:#86a273}
[data-k="G01"]{--k:#e0805a}
[data-k="D01"]{--k:#b49ae8}
[data-k="N02"]{--k:#ec9ec3}
[data-k="B03"]{--k:#cf6f46}
[data-k="I09"]{--k:#d98a6a}
[data-k="K01"]{--k:#b8a07a}
[data-k="I01"]{--k:#d9a441}
[data-k="D04"]{--k:#a4b8e0}
[data-k="L04"]{--k:#e0605a}
[data-k="L01"]{--k:#5fae9e}
[data-k="O01"]{--k:#e7a3c4}
[data-k="J05"]{--k:#e3c06e}
[data-k="B01"]{--k:#e3a05a}
[data-k="H03"]{--k:#f0c35a}
[data-k="E10"]{--k:#c98a5a}
[data-k="J04"]{--k:#8fa8d8}
[data-k="A02"]{--k:#7fc88a}