/* =========================================================================
   Himmel der Welt (Lab, Experiment 07)
   Ein Himmelsatlas als Kupferstich: tiefes Nachtblau, feine Goldlinien,
   Cormorant Garamond. Die Kuppel (Canvas) füllt die Seite; darüber liegen
   die Kulturen (oben, nach Regionen; am Handy als Knopf mit Raster), die Tafel
   der Kultur (links), der Steckbrief (rechts bzw. als Blatt von unten), die Suche
   und die Zeitleiste. Motor: assets/js/himmel-motor.js, Bedienung: himmel.js
   ========================================================================= */

@font-face { font-family: 'Instrument Sans'; src: url('../fonts/instrument-sans-latin-wght-normal.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url('../fonts/instrument-sans-ext-400.woff2') format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+0100-024F, U+1E00-1EFF, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Instrument Sans'; src: url('../fonts/instrument-sans-ext-600.woff2') format('woff2'); font-weight: 600; font-display: swap; unicode-range: U+0100-024F, U+1E00-1EFF, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Cormorant Garamond'; src: url('../fonts/cormorant-garamond-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cormorant Garamond'; src: url('../fonts/cormorant-garamond-latin-ext-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Cormorant Garamond'; src: url('../fonts/cormorant-garamond-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cormorant Garamond'; src: url('../fonts/cormorant-garamond-latin-ext-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Cormorant Garamond'; src: url('../fonts/cormorant-garamond-latin-500-italic.woff2') format('woff2'); font-weight: 500; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cormorant Garamond'; src: url('../fonts/cormorant-garamond-latin-ext-500-italic.woff2') format('woff2'); font-weight: 500; font-style: italic; font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }


:root {
  color-scheme: dark;
  --nacht: #070b1f;
  --nacht-2: #0c1433;
  --tafel: rgba(8, 12, 32, .86);
  --tafel-fest: #0a0f28;
  --gold: #D9B56A;
  --gold-hell: #F0D696;
  --gold-leise: rgba(217, 181, 106, .4);
  --gold-hauch: rgba(217, 181, 106, .14);
  --papier: #EFE6D2;
  --papier-2: rgba(239, 230, 210, .78);
  --papier-3: rgba(239, 230, 210, .64);   /* Kleintext: Kontrast ≥ 4,5:1 auf den Tafeln */
  --serif: 'Cormorant Garamond', 'Cormorant', Garamond, 'Times New Roman', serif;
  --sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --cjk: 'Songti TC', 'Noto Serif CJK TC', 'Noto Serif TC', 'PMingLiU', 'Songti SC', 'Noto Serif CJK SC', serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --leiste: 64px;
  --unten: 74px;            /* Höhe der Zeitleiste */
  --kband: 58px;            /* Höhe des Kulturen-Bands */
  --rand: max(16px, env(safe-area-inset-left, 0px));
  --rand-r: max(16px, env(safe-area-inset-right, 0px));
  --frei-l: 0px; --frei-r: 0px;   /* von himmel.js: verdeckte Ränder der Kuppel */
  --tafel-b: 340px;
  /* feine Kupferstich-Schraffur für Tafeln */
  --stich: repeating-linear-gradient(115deg, rgba(217, 181, 106, .025) 0 1px, transparent 1px 5px);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
html { background: var(--nacht); -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--sans); color: var(--papier); background: var(--nacht); -webkit-font-smoothing: antialiased; overflow: hidden; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
svg { display: block; }
a { color: inherit; }
[hidden] { display: none !important; }
.unsichtbar { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: fixed; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--papier); color: var(--nacht); border-radius: 30px; }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--gold-hell); outline-offset: 3px; border-radius: 8px; }
[lang|="zh"], [lang="ja"] { font-family: var(--cjk); }
[lang="ar"] { font-family: 'Amiri', 'Noto Naskh Arabic', 'Geeza Pro', 'Times New Roman', serif; }
[lang="sa"] { font-family: 'Noto Serif Devanagari', 'Kohinoor Devanagari', 'Nirmala UI', 'Mangal', serif; }
kbd { font: 600 12px/1 var(--sans); padding: 2px 6px; border: 1px solid var(--gold-leise); border-radius: 4px; }

/* ---------- Leiste ------------------------------------------------------------ */
.leiste { position: fixed; inset: 0 0 auto 0; height: calc(var(--leiste) + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) var(--rand-r) 0 var(--rand); z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(rgba(7, 11, 31, .86), rgba(7, 11, 31, 0)); pointer-events: none; }
.leiste > * { pointer-events: auto; }
.leiste__links, .leiste__rechts { display: flex; align-items: center; gap: 10px; }
.leiste__marke { display: grid; place-items: center; min-width: 40px; min-height: 40px; }
.leiste__marke img { width: 30px; height: 30px; }
.leiste__titel { position: absolute; left: 50%; transform: translateX(-50%); margin: 0; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 24px; letter-spacing: .01em; white-space: nowrap; color: var(--papier); pointer-events: none; }
.leiste__titel span { font-family: var(--sans); font-style: normal; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-right: 10px; vertical-align: 4px; }
.pille { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 999px; text-decoration: none;
  font-size: 14px; font-weight: 500; background: rgba(7, 11, 31, .6); border: 1px solid var(--gold-leise); color: var(--papier); transition: border-color .3s, background .3s; }
.pille:hover, .pille[aria-expanded="true"] { border-color: var(--gold); background: rgba(217, 181, 106, .1); }
.pille svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }

/* ---------- Kuppel ------------------------------------------------------------ */
.himmel { position: fixed; inset: 0; }
.himmel__kuppel { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: none; cursor: grab; }
.himmel__kuppel:active { cursor: grabbing; }
.himmel__kuppel:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--gold); }
.himmel__hinweis { position: absolute; z-index: 26; top: calc(var(--leiste) + var(--kband) + 16px);
  left: calc(var(--frei-l) + (100vw - var(--frei-l) - var(--frei-r)) / 2); transform: translate(-50%, -8px); margin: 0;
  width: max-content; max-width: min(560px, calc(100vw - var(--frei-l) - var(--frei-r) - 32px));
  padding: 10px 18px; border-radius: 18px; background: var(--tafel-fest); border: 1px solid var(--gold-leise); font-size: 14px; line-height: 1.45; color: var(--papier);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35); opacity: 0; pointer-events: none; transition: opacity .4s, transform .5s var(--ease); text-align: center; }
.himmel__hinweis.ist-an { opacity: 1; transform: translate(-50%, 0); }
.himmel__fehler { position: absolute; inset: auto 16px 40% 16px; text-align: center; font-family: var(--serif); font-size: 22px; }

/* ---------- Knöpfe -------------------------------------------------------------- */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 22px; border-radius: 999px;
  border: 1px solid var(--gold-leise); background: rgba(7, 11, 31, .6); color: var(--papier); font-size: 15px; font-weight: 500; white-space: nowrap;
  transition: background .25s, border-color .25s, color .25s, transform .3s var(--ease); }
.knopf:hover { border-color: var(--gold); background: rgba(217, 181, 106, .1); }
.knopf:active { transform: translateY(1px); }
.knopf--gold { background: var(--gold); border-color: var(--gold); color: #1a1406; }
.knopf--gold:hover { background: var(--gold-hell); border-color: var(--gold-hell); }
.knopf--rand { background: transparent; }
.knopf--klein { min-height: 40px; padding: 0 15px; font-size: 14px; }
.knopf svg { width: 15px; height: 15px; fill: currentColor; }
.knopf[aria-pressed="true"] { background: rgba(217, 181, 106, .18); border-color: var(--gold); color: var(--gold-hell); }
.knopf .kurz { display: none; }
.rund { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; padding: 0; border: 1px solid var(--gold-leise);
  background: var(--tafel); color: var(--papier); font-size: 22px; line-height: 1; font-family: var(--serif); transition: border-color .25s, background .25s; }
.rund:hover, .rund[aria-expanded="true"] { border-color: var(--gold); background: rgba(217, 181, 106, .12); }
.rund svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
.textknopf { padding: 4px 0; border: 0; background: none; color: var(--gold-hell); font-size: 13.5px; text-decoration: underline; text-decoration-color: var(--gold-leise); text-underline-offset: 4px; }
.textknopf:hover { text-decoration-color: var(--gold); }

/* ---------- Kulturen: Band oben (nach Regionen) ------------------------------- */
.kulturen { position: absolute; z-index: 20; left: var(--rand); right: var(--rand-r); top: calc(var(--leiste) + 2px + env(safe-area-inset-top, 0px));
  display: flex; justify-content: center; }
.kulturen__band { position: relative; width: fit-content; max-width: 100%; display: flex; align-items: center; gap: 3px; padding: 5px; border-radius: 999px;
  background: var(--tafel); border: 1px solid var(--gold-leise); box-shadow: 0 0 0 3px rgba(7, 11, 31, .55), 0 0 0 4px var(--gold-hauch);
  overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; overscroll-behavior-x: contain; }
.kulturen__band::-webkit-scrollbar { display: none; }
.kulturen.kann-l .kulturen__band { -webkit-mask-image: linear-gradient(90deg, transparent, #000 56px); mask-image: linear-gradient(90deg, transparent, #000 56px); }
.kulturen.kann-r .kulturen__band { -webkit-mask-image: linear-gradient(270deg, transparent, #000 56px); mask-image: linear-gradient(270deg, transparent, #000 56px); }
.kulturen.kann-l.kann-r .kulturen__band { -webkit-mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent); }
.kulturen__pfeil { position: absolute; top: 50%; z-index: 2; width: 34px; height: 34px; margin-top: -17px; display: none; place-items: center; padding: 0 0 2px;
  border-radius: 50%; border: 1px solid var(--gold-leise); background: var(--tafel-fest); color: var(--gold-hell); font: 500 22px/1 var(--serif); }
.kulturen__pfeil--l { left: -6px; } .kulturen__pfeil--r { right: -6px; }
.kulturen.kann-l .kulturen__pfeil--l, .kulturen.kann-r .kulturen__pfeil--r { display: grid; }
.kulturen__trenner { flex: none; width: 1px; height: 24px; margin: 0 4px; background: var(--gold-leise); }
.kultur-k { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 13px 0 7px; border-radius: 999px; border: 0;
  background: transparent; color: var(--papier-2); font-family: var(--serif); font-size: 17px; font-weight: 600; letter-spacing: .01em; white-space: nowrap;
  transition: background .25s, color .25s; }
.kultur-k svg, .kulturknopf__emblem svg, .kulturwahl__k svg { width: 30px; height: 30px; flex: none; border-radius: 50%; border: 1px solid var(--gold-leise); background: rgba(217, 181, 106, .05); }
:is(.kultur-k, .kulturknopf, .kulturwahl__k) svg path { fill: none; stroke: var(--gold); stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
:is(.kultur-k, .kulturknopf, .kulturwahl__k) svg :is(circle, ellipse) { fill: var(--gold-hell); stroke: none; }
.kultur-k:hover { color: var(--papier); background: rgba(217, 181, 106, .08); }
.kultur-k[aria-checked="true"] { background: var(--gold); color: #1a1406; }
.kultur-k[aria-checked="true"] svg { border-color: rgba(26, 20, 6, .35); background: rgba(26, 20, 6, .08); }
.kultur-k[aria-checked="true"] svg path { stroke: #1a1406; }
.kultur-k[aria-checked="true"] svg :is(circle, ellipse) { fill: #1a1406; }
.kultur-k:focus-visible { outline-offset: -2px; border-radius: 999px; }
/* Handy: Knopf „Himmel ▾“ mit Raster nach Regionen */
.kulturknopf { display: none; }
.kulturwahl { position: absolute; z-index: 45; left: var(--rand); right: var(--rand-r); top: calc(var(--leiste) + 58px + env(safe-area-inset-top, 0px));
  max-height: calc(100dvh - var(--leiste) - 140px); overflow-y: auto; padding: 14px 14px 18px; background: var(--stich), var(--tafel-fest);
  border: 1px solid var(--gold-leise); border-radius: 14px; box-shadow: 0 30px 60px rgba(0, 0, 0, .55); }
.kulturwahl__region { margin: 6px 4px 4px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.kulturwahl__region:first-child { margin-top: 0; }
.kulturwahl__raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.kulturwahl__k { display: grid; justify-items: center; gap: 3px; min-height: 74px; padding: 8px 4px 6px; border-radius: 10px; border: 1px solid var(--gold-hauch); background: transparent; text-align: center; }
.kulturwahl__k svg { width: 32px; height: 32px; }
.kulturwahl__k b { font-family: var(--serif); font-size: 17px; font-weight: 600; line-height: 1.05; }
.kulturwahl__k small { max-width: 100%; font-size: 12px; color: var(--papier-3); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kulturwahl__k[aria-pressed="true"] { border-color: var(--gold); background: rgba(217, 181, 106, .12); }

/* ---------- Tafeln (links: Kultur, rechts: Steckbrief) ------------------------- */
.tafel { position: absolute; z-index: 15; top: calc(var(--leiste) + var(--kband) + 14px + env(safe-area-inset-top, 0px));
  max-height: calc(100dvh - var(--leiste) - var(--kband) - var(--zeit-h, var(--unten)) - 22px - env(safe-area-inset-top, 0px));
  width: 336px; display: flex; flex-direction: column; color: var(--papier);
  background: var(--stich), var(--tafel); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--gold-leise); border-radius: 4px; box-shadow: 0 0 0 4px rgba(7, 11, 31, .5), 0 0 0 5px var(--gold-hauch), 0 30px 60px rgba(0, 0, 0, .35);
  transition: opacity .5s var(--ease), transform .6s var(--ease); }
.tafel--kultur { left: var(--rand); }
.tafel--bild { right: var(--rand-r); width: var(--tafel-b); }
.tafel__inhalt { overflow-y: auto; padding: 22px 24px 24px; scrollbar-width: thin; scrollbar-color: var(--gold-leise) transparent; overscroll-behavior: contain; }
.tafel__griff, .tafel__mehr { display: none; }
.tafel__zu, .tafel__klapp { position: absolute; top: 10px; right: 10px; z-index: 2; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; padding: 0;
  border: 1px solid var(--gold-leise); background: var(--tafel-fest); color: var(--papier); font: 400 22px/1 var(--serif); }
.tafel__zu:hover, .tafel__klapp:hover { border-color: var(--gold); }
.tafel__klapp { padding-bottom: 2px; top: 12px; right: -19px; width: 36px; height: 36px; box-shadow: 0 0 0 3px rgba(7, 11, 31, .6); }
/* eingeklappt (Desktop): nur ein Griff links */
.tafel--kultur.ist-zu { background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; width: auto; }
.tafel--kultur.ist-zu .tafel__inhalt, .tafel--kultur.ist-zu .tafel__klapp { display: none; }
.tafel--kultur.ist-zu .tafel__griff { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px 0 12px; border-radius: 999px;
  border: 1px solid var(--gold-leise); background: var(--tafel); font-family: var(--serif); font-size: 17px; font-weight: 600; color: var(--papier); }
.tafel--kultur.ist-zu .tafel__griff::before { content: '›'; font-size: 20px; color: var(--gold); }
body.ist-intro .tafel, body.ist-intro .kulturen, body.ist-intro .kulturknopf, body.ist-intro .zeit, body.ist-intro .werkzeuge { opacity: 0; pointer-events: none; transform: translateY(12px); }
.kulturen, .kulturknopf, .zeit, .werkzeuge { transition: opacity .6s var(--ease), transform .7s var(--ease); }

/* Typografie in den Tafeln */
.kicker { margin: 0 46px 8px 0; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); display: flex; align-items: center; gap: 8px; }
.kicker::after { content: ''; flex: 1; min-width: 12px; height: 1px; background: linear-gradient(90deg, var(--gold-leise), transparent); }
.tafel h2 { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 32px; line-height: 1.04; letter-spacing: -.005em; text-wrap: balance; }
.tafel h2:focus { outline: none; }
.tafel__meta { margin: 10px 0 0; font-size: 13px; color: var(--papier-3); line-height: 1.45; }
.tafel__meta b { font-weight: 500; color: var(--papier-2); }
.tafel__text { margin: 12px 0 0; font-family: var(--serif); font-size: 18.5px; line-height: 1.42; color: var(--papier-2); }
.tafel__intro { position: relative; margin-top: 16px; }
.tafel__intro .tafel__text { margin: 0; font-size: 17.5px; }
.tafel__intro.ist-kurz { max-height: 5.8em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.zier { display: flex; align-items: center; gap: 10px; margin: 20px 0 10px; color: var(--gold); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; }
.zier::before, .zier::after { content: ''; flex: 1; height: 1px; background: var(--gold-leise); }
.zier span::before { content: '✦ '; letter-spacing: 0; }
.figuren, .alle__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.figur-k { width: 100%; min-height: 48px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 10px; text-align: left; padding: 8px 10px; border-radius: 3px;
  border: 1px solid transparent; background: transparent; transition: background .2s, border-color .2s; }
.figur-k:hover { background: rgba(217, 181, 106, .07); }
.figur-k[aria-current="true"] { border-color: var(--gold-leise); background: rgba(217, 181, 106, .1); }
.figur-k__de { font-family: var(--serif); font-size: 19px; font-weight: 600; line-height: 1.15; color: var(--papier); }
.figur-k__nativ { grid-column: 1; font-size: 13px; color: var(--papier-3); }
.figur-k__stand { grid-row: 1 / span 2; grid-column: 2; font-size: 12px; color: var(--papier-3); display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.figur-k__stand i, .punkt { flex: none; width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--gold); }
.figur-k__stand.ist-oben, .alle__k:has(.ist-oben) { color: var(--papier-2); }
.figur-k__stand.ist-oben i, .punkt.ist-oben { background: var(--gold); box-shadow: 0 0 6px var(--gold); }
.figur-k__stand.ist-tag i, .punkt.ist-tag { background: linear-gradient(90deg, var(--gold) 50%, transparent 50%); }
.alle { margin-top: 18px; border-top: 1px solid var(--gold-hauch); padding-top: 6px; }
.alle summary { cursor: pointer; padding: 10px 0; font-family: var(--serif); font-size: 18px; font-weight: 600; color: var(--papier); list-style-position: inside; }
.alle summary::marker { color: var(--gold); }
.alle__k { width: 100%; min-height: 40px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; padding: 7px 8px; border: 0; border-radius: 3px; background: none; text-align: left; font-size: 14.5px; color: var(--papier-2); }
.alle__k .punkt { align-self: center; width: 7px; height: 7px; }
.alle__k small { font-size: 12.5px; color: var(--papier-3); }
.alle__k:hover { background: rgba(217, 181, 106, .07); color: var(--papier); }
.tafel__fuss { margin: 16px 0 0; font-size: 13px; line-height: 1.5; color: var(--papier-3); }
.tafel__fuss .textknopf { font-size: 13px; padding: 0; }

/* Steckbrief */
.bild__nativ { margin: 2px 46px 0 0; font-size: 34px; line-height: 1.15; color: var(--gold-hell); font-family: var(--serif); font-weight: 500; overflow-wrap: anywhere; }
.bild__nativ:is([lang|="zh"], [lang="ja"]) { font-family: var(--cjk); font-weight: 400; }
.bild__nativ[lang="ar"] { font-weight: 400; direction: rtl; text-align: left; }
.bild__nativ[lang="sa"] { font-weight: 400; }
.bild__nativ[lang="el"] { font-family: 'GFS Didot', 'Gentium Plus', Georgia, serif; }
.bild__nativ + .bild__aus, .bild__aus { margin: 4px 0 0; font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--papier-2); }
.bild__de { margin: 10px 46px 0 0 !important; font-family: var(--serif); font-weight: 600 !important; font-style: normal !important; font-size: 26px !important; line-height: 1.1 !important; text-wrap: balance; }
.bild__nativ ~ .bild__de { margin-right: 0 !important; }
.bild__stand { margin: 12px 0 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; font-size: 14px; color: var(--papier-2); }
.bild__stand:empty { display: none; }
.bild__stand .knopf { min-height: 38px; font-size: 13.5px; }
.bild__sterne { margin: 12px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--papier-3); }
.bild__sterne b { font-weight: 500; color: var(--papier-2); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: baseline; gap: 6px; min-height: 36px; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--gold-leise); background: transparent;
  font-size: 13.5px; line-height: 1.25; color: var(--papier); text-decoration: none; text-align: left; transition: border-color .2s, background .2s; }
.chip small { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.chip:hover { border-color: var(--gold); background: rgba(217, 181, 106, .1); }
.chip--gott { border-style: dashed; }
.chip--gott::after { content: '→'; color: var(--gold); }
.namen { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.namen li { font-size: 15px; line-height: 1.35; color: var(--papier); }
.namen small { display: inline-block; min-width: 7.5em; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.namen i { font-family: var(--serif); font-size: 16.5px; color: var(--papier-2); }

/* ---------- Werkzeuge (rechts unten) und Ebenen --------------------------------- */
.werkzeuge { position: absolute; z-index: 14; right: calc(var(--rand-r) + var(--frei-r)); bottom: calc(var(--zeit-h, var(--unten)) + 12px); display: grid; gap: 8px; transition: right .4s var(--ease), opacity .6s var(--ease), transform .7s var(--ease); }
body.hat-bild .werkzeuge { right: calc(var(--frei-r) + 6px); }
.ebenen { position: absolute; z-index: 30; right: calc(var(--rand-r) + var(--frei-r) + 56px); bottom: calc(var(--zeit-h, var(--unten)) + 12px); width: 236px; padding: 14px 16px 12px;
  background: var(--tafel-fest); border: 1px solid var(--gold-leise); border-radius: 4px; box-shadow: 0 20px 40px rgba(0, 0, 0, .4); display: grid; gap: 2px; }
.ebenen__titel { margin: 0 0 6px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.ebenen label { display: flex; align-items: center; gap: 10px; min-height: 36px; font-size: 14px; cursor: pointer; }
.ebenen input { appearance: none; -webkit-appearance: none; width: 32px; height: 20px; border-radius: 999px; border: 1px solid var(--gold-leise); background: transparent; position: relative; margin: 0; flex: none; transition: background .2s; cursor: pointer; }
.ebenen input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--papier-3); transition: transform .25s var(--ease), background .2s; }
.ebenen input:checked { background: rgba(217, 181, 106, .25); border-color: var(--gold); }
.ebenen input:checked::after { transform: translateX(12px); background: var(--gold-hell); }

/* ---------- Suche ----------------------------------------------------------------- */
.suche { position: absolute; z-index: 50; top: calc(var(--leiste) + 6px + env(safe-area-inset-top, 0px)); right: var(--rand-r); width: min(460px, calc(100vw - var(--rand) - var(--rand-r)));
  max-height: min(70vh, 620px); display: flex; flex-direction: column; background: var(--stich), var(--tafel-fest); border: 1px solid var(--gold-leise); border-radius: 6px;
  box-shadow: 0 0 0 4px rgba(7, 11, 31, .6), 0 30px 70px rgba(0, 0, 0, .6); }
.suche__feld { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 16px; border-bottom: 1px solid var(--gold-hauch); }
.suche__feld svg { width: 19px; height: 19px; flex: none; fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; }
.suche__feld input { flex: 1; min-width: 0; height: 40px; border: 0; background: none; font-size: 16px; outline: none; }
.suche__feld input::placeholder { color: var(--papier-3); }
.suche__feld .tafel__zu { position: static; flex: none; }
.suche__liste { list-style: none; margin: 0; padding: 6px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--gold-leise) transparent; }
.suche__k { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 0 10px; padding: 9px 10px; border-radius: 4px; cursor: pointer; }
.suche__k[aria-selected="true"], .suche__k:hover { background: rgba(217, 181, 106, .12); }
.suche__titel { font-family: var(--serif); font-size: 19px; font-weight: 600; }
.suche__nativ { font-size: 14px; color: var(--gold-hell); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suche__k small { grid-column: 1 / -1; font-size: 12.5px; color: var(--papier-3); }
.suche__nichts, .suche__hinweis { margin: 0; padding: 14px 16px; font-size: 14px; color: var(--papier-3); list-style: none; }

/* ---------- Zeitleiste (unten) -------------------------------------------------- */
.zeit { position: absolute; z-index: 25; left: 0; right: 0; bottom: 0; min-height: var(--unten); padding: 10px var(--rand-r) calc(10px + env(safe-area-inset-bottom, 0px)) var(--rand);
  display: grid; grid-template-columns: minmax(200px, 1fr) minmax(420px, 720px) minmax(200px, 1fr); align-items: center; gap: 18px;
  background: linear-gradient(rgba(7, 11, 31, 0), rgba(7, 11, 31, .9) 38%); }
.zeit__ort { display: grid; gap: 2px; min-width: 0; }
.zeit__ortknopf { justify-self: start; display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 2px 8px 2px 4px; border: 0; border-radius: 6px; background: none;
  font-family: var(--serif); font-size: 21px; font-weight: 600; color: var(--papier); max-width: 100%; }
.zeit__ortknopf span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-bottom: 1px dotted var(--gold-leise); }
.zeit__ortknopf svg { width: 17px; height: 17px; fill: none; stroke: var(--gold); stroke-width: 1.5; flex: none; }
.zeit__ortknopf:hover span { border-bottom-color: var(--gold); }
.zeit__wann { padding-left: 4px; font-size: 13px; color: var(--papier-2); font-variant-numeric: tabular-nums; }
.zeit__regler { display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 18px; }
.zeit__lauf { display: flex; gap: 6px; }
.regler { display: grid; gap: 1px; min-width: 0; }
.regler__titel { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.regler__skala { display: flex; justify-content: space-between; font-size: 12px; color: var(--papier-3); padding: 0 2px; }
.regler__skala i { font-style: normal; }
.regler input { -webkit-appearance: none; appearance: none; width: 100%; height: 26px; margin: 0; background: transparent; cursor: pointer; }
.regler input::-webkit-slider-runnable-track { height: 1px; background: linear-gradient(90deg, var(--gold-leise), var(--gold), var(--gold-leise)); }
.regler input::-moz-range-track { height: 1px; background: linear-gradient(90deg, var(--gold-leise), var(--gold), var(--gold-leise)); }
.regler input::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: var(--nacht); border: 1.5px solid var(--gold-hell); box-shadow: 0 0 0 3px rgba(7, 11, 31, .7), 0 0 10px rgba(240, 214, 150, .4); }
.regler input::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--nacht); border: 1.5px solid var(--gold-hell); box-shadow: 0 0 10px rgba(240, 214, 150, .4); }
.zeit__knoepfe { display: flex; justify-content: flex-end; gap: 8px; }
.zeit__mehr { display: none; }
.zeit__mehr svg { fill: none; stroke: currentColor; stroke-width: 1.6; }
.ortwahl { position: absolute; left: var(--rand); bottom: calc(100% + 6px); width: 310px; padding: 14px; display: grid; gap: 6px;
  background: var(--tafel-fest); border: 1px solid var(--gold-leise); border-radius: 4px; box-shadow: 0 20px 40px rgba(0, 0, 0, .45); }
.ortwahl__titel { margin: 0 0 4px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.ortwahl__k { display: grid; text-align: left; gap: 1px; min-height: 48px; padding: 8px 12px; border-radius: 3px; border: 1px solid var(--gold-hauch); background: transparent; }
.ortwahl__k b { font-family: var(--serif); font-size: 18px; font-weight: 600; }
.ortwahl__k span { font-size: 13px; color: var(--papier-3); }
.ortwahl__k:hover, .ortwahl__k[aria-pressed="true"] { border-color: var(--gold); background: rgba(217, 181, 106, .08); }
.ortwahl__stadt { display: grid; gap: 4px; margin-top: 4px; font-size: 13px; color: var(--papier-3); }
.ortwahl__stadt select { width: 100%; min-height: 44px; padding: 8px 10px; border-radius: 3px; border: 1px solid var(--gold-leise); background: var(--nacht); font-size: 15px; }

/* ---------- Intro ------------------------------------------------------------------- */
.intro { position: absolute; inset: 0; z-index: 30; display: flex; overflow-y: auto; overscroll-behavior: contain; padding: calc(var(--leiste) + 20px) var(--rand-r) 40px var(--rand);
  background: radial-gradient(ellipse at 50% 55%, rgba(7, 11, 31, .25), rgba(7, 11, 31, .78) 75%); transition: opacity .9s var(--ease), visibility 0s .9s; }
body:not(.ist-intro) .intro { opacity: 0; visibility: hidden; pointer-events: none; }
.intro__karte { margin: auto; max-width: 640px; text-align: center; padding: 44px 46px 40px; position: relative;
  background: var(--stich), rgba(7, 11, 31, .74); border: 1px solid var(--gold-leise); box-shadow: 0 0 0 5px rgba(7, 11, 31, .6), 0 0 0 6px var(--gold-hauch); border-radius: 3px; }
.intro__karte::before, .intro__karte::after { content: '✦'; position: absolute; left: 50%; transform: translateX(-50%); color: var(--gold); font-size: 13px; background: var(--nacht); padding: 0 10px; line-height: 1; }
.intro__karte::before { top: -7px; } .intro__karte::after { bottom: -7px; }
.intro__marke { margin: 0 0 16px; font-size: 12px; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); }
.intro__titel { margin: 0; font-family: var(--serif); font-weight: 500; font-size: clamp(42px, 7vw, 76px); line-height: .98; letter-spacing: -.01em; text-wrap: balance; }
.intro__titel em { font-style: italic; color: var(--gold-hell); }
.intro__text { margin: 20px auto 0; max-width: 32em; font-family: var(--serif); font-size: clamp(18px, 2.2vw, 21px); line-height: 1.42; color: var(--papier-2); }
.intro__knoepfe { margin-top: 28px; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }

/* ---------- Gut zu wissen ------------------------------------------------------- */
.wissen { width: min(720px, calc(100vw - 32px)); max-height: min(86vh, 900px); padding: 0; color: var(--papier); background: var(--stich), var(--tafel-fest);
  border: 1px solid var(--gold-leise); border-radius: 4px; box-shadow: 0 0 0 5px rgba(7, 11, 31, .7), 0 0 0 6px var(--gold-hauch), 0 40px 90px rgba(0, 0, 0, .6); overflow: hidden; }
.wissen[open] { display: flex; flex-direction: column; }
.wissen::backdrop { background: rgba(3, 5, 14, .66); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.wissen__kopf { position: relative; padding: 22px 26px 12px; border-bottom: 1px solid var(--gold-hauch); }
.wissen__kopf h2 { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 32px; }
.wissen__inhalt { overflow-y: auto; padding: 6px 26px 28px; scrollbar-width: thin; scrollbar-color: var(--gold-leise) transparent; }
.wissen h3 { margin: 22px 0 6px; font-family: var(--serif); font-weight: 600; font-size: 22px; color: var(--gold-hell); }
.wissen p, .wissen li { font-size: 15px; line-height: 1.6; color: var(--papier-2); }
.wissen ul { padding-left: 18px; margin: 6px 0; }
.wissen a { color: var(--gold-hell); text-underline-offset: 3px; }
.wissen details { border-top: 1px solid var(--gold-hauch); padding: 8px 0; }
.wissen summary { cursor: pointer; font-family: var(--serif); font-size: 18px; font-weight: 600; color: var(--papier); min-height: 32px; }
.wissen details p, .wissen details li { font-size: 14px; }


/* ---------- Runde 3: Damals, Rückweg, Vorführen, Intro-Schritte, Legende ---------- */
.zeit__wann { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.damals { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 11px 0 8px; border-radius: 999px; border: 1px solid var(--gold-leise);
  background: transparent; color: var(--gold-hell); font-size: 12.5px; font-weight: 500; letter-spacing: .02em; white-space: nowrap; transition: background .25s, border-color .25s, color .25s; }
.damals svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.damals:hover { border-color: var(--gold); background: rgba(217, 181, 106, .1); }
.damals[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: #1a1406; }
body.ist-damals [data-wann] { color: var(--gold-hell); }
.rueckweg { position: absolute; z-index: 27; left: calc(var(--frei-l) + (100vw - var(--frei-l) - var(--frei-r)) / 2); bottom: calc(var(--frei-u, var(--unten)) + 14px);
  transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; min-height: 44px; max-width: calc(100vw - 32px); padding: 0 18px;
  border-radius: 999px; border: 1px solid var(--gold); background: var(--tafel-fest); color: var(--gold-hell); font-size: 14.5px; font-weight: 500;
  box-shadow: 0 0 0 3px rgba(7, 11, 31, .6), 0 12px 30px rgba(0, 0, 0, .4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: bottom .4s var(--ease), left .4s var(--ease); animation: auftauchen .5s var(--ease); }
.rueckweg:hover { background: rgba(217, 181, 106, .16); }
@keyframes auftauchen { from { opacity: 0; transform: translate(-50%, 8px); } }
.vorfuehr { position: absolute; z-index: 36; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px); padding: 8px; border-radius: 999px;
  background: var(--tafel-fest); border: 1px solid var(--gold-leise); box-shadow: 0 0 0 4px rgba(7, 11, 31, .55), 0 20px 50px rgba(0, 0, 0, .5); }
.vorfuehr__name { min-width: 0; flex: 1 1 auto; padding: 0 8px; text-align: center; font-family: var(--serif); font-size: 21px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vorfuehr .knopf { flex: none; }
body.ist-vorfuehren :is(.leiste, .tafel, .zeit, .werkzeuge, .kulturen, .kulturknopf, .kulturwahl, .ebenen, .suche, .rueckweg, .skip-link) { opacity: 0 !important; visibility: hidden; pointer-events: none; }
body.ist-vorfuehren .himmel__hinweis { top: calc(20px + env(safe-area-inset-top, 0px)); left: 50%; font-size: 17px; max-width: min(720px, calc(100vw - 32px)); }
body.ist-vorfuehren .himmel__kuppel { cursor: default; }
.intro__schritte { list-style: none; counter-reset: schritt; margin: 24px auto 0; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 22px; }
.intro__schritte li { counter-increment: schritt; display: inline-flex; align-items: center; gap: 9px; font-size: 14.5px; color: var(--papier-2); }
.intro__schritte li::before { content: counter(schritt); flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--gold-leise);
  font: 600 14px/1 var(--serif); color: var(--gold-hell); }
.intro__schritte b { font-weight: 600; color: var(--papier); }
.intro__recht { margin: 24px 0 0; font-size: 12.5px; color: var(--papier-3); }
.intro__recht a { color: var(--papier-2); text-underline-offset: 3px; text-decoration-color: var(--gold-leise); }
body.laedt .nur-bereit, body:not(.laedt) .nur-laedt { display: none; }
body.laedt [data-los] { cursor: progress; background: transparent; color: var(--gold-hell); }
body.laedt .nur-laedt { animation: atmen 1.6s ease-in-out infinite; }
@keyframes atmen { 50% { opacity: .55; } }
.legende { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; }
.legende span { display: inline-flex; align-items: center; gap: 8px; }
.glossar { margin: 6px 0 0; }
.glossar dt { margin: 12px 0 0; font-family: var(--serif); font-size: 18px; font-weight: 600; color: var(--papier); }
.glossar dd { margin: 2px 0 0; font-size: 15px; line-height: 1.55; color: var(--papier-2); }

/* ---------- Mittelgroß --------------------------------------------------------------- */
@media (max-width: 1540px) {
  .kultur-k { font-size: 15.5px; padding: 0 9px 0 5px; gap: 5px; }
  .kultur-k svg { width: 28px; height: 28px; }
  .kulturen__trenner { margin: 0 2px; }
}
@media (max-width: 1360px) {
  .tafel { width: 312px; }
  :root { --tafel-b: 316px; }
  .zeit { grid-template-columns: minmax(170px, 1fr) minmax(380px, 620px) auto; gap: 14px; }
  .zeit__lauf [data-raffer] span { display: none; }
}
@media (min-width: 861px) and (max-width: 1200px) {
  .knopf--gold .lang { display: none; } .knopf--gold .kurz { display: inline; }
}

/* ---------- Telefon und Tablet hochkant ------------------------------------------- */
@media (max-width: 860px), (max-width: 1000px) and (max-height: 500px) {
  :root { --leiste: 56px; --unten: 64px; --kband: 56px; }
  .leiste { background: linear-gradient(rgba(7, 11, 31, .94), rgba(7, 11, 31, .55)); }
  .leiste__titel { display: none; }
  .pille { min-height: 44px; padding: 0 14px; font-size: 14px; }
  .pille--ikon span { display: none; }
  .pille--ikon { width: 44px; padding: 0; justify-content: center; }
  .kulturen { display: none; }
  .kulturknopf { position: absolute; z-index: 20; left: var(--rand); top: calc(var(--leiste) + 4px + env(safe-area-inset-top, 0px)); display: inline-flex; align-items: center; gap: 10px;
    min-height: 48px; padding: 0 16px 0 8px; border-radius: 999px; border: 1px solid var(--gold-leise); background: var(--tafel); box-shadow: 0 0 0 3px rgba(7, 11, 31, .5); }
  .kulturknopf__text { display: grid; text-align: left; line-height: 1.05; }
  .kulturknopf__text small { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
  .kulturknopf__text b { font-family: var(--serif); font-size: 19px; font-weight: 600; }
  .kulturknopf__pfeil { color: var(--gold); font-size: 13px; }
  .kulturknopf[aria-expanded="true"] { border-color: var(--gold); }
  /* Tafel der Kultur als Blatt von unten: zusammengeklappt nur der Griff */
  .tafel { left: 0; right: 0; width: auto; top: auto; bottom: var(--zeit-h, calc(var(--unten) + env(safe-area-inset-bottom, 0px))); max-height: 62dvh; border-radius: 14px 14px 0 0;
    box-shadow: 0 -20px 50px rgba(0, 0, 0, .4); border-left: 0; border-right: 0; border-bottom: 0; }
  .tafel--kultur { left: 0; }
  .tafel--kultur:not(.ist-offen) .tafel__inhalt { display: none; }
  .tafel__klapp { display: none; }
  .tafel__griff { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; padding: 12px 16px 10px; border: 0; background: none;
    font-family: var(--serif); font-size: 18px; font-weight: 600; color: var(--papier); }
  .tafel__griff::before, .tafel__mehr::before { content: ''; width: 36px; height: 4px; border-radius: 4px; background: var(--gold-leise); position: absolute; top: 6px; left: 50%; transform: translateX(-50%); }
  .tafel__griff::after { content: '⌃'; font-family: var(--sans); color: var(--gold); transition: transform .3s; }
  .tafel--kultur.ist-offen .tafel__griff::after { transform: rotate(180deg); }
  .tafel__inhalt { padding: 4px 20px 22px; }
  /* Steckbrief: erst als niedrige Vorschau, hochziehbar */
  .tafel--bild { z-index: 22; width: auto; max-height: 72dvh; }
  .tafel--bild:not(.ist-voll) { max-height: 36dvh; }
  .tafel--bild:not(.ist-voll) .tafel__inhalt { overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
  .tafel__mehr { display: block; position: absolute; inset: 0 0 auto 0; height: 26px; border: 0; background: none; z-index: 1; }
  .tafel--bild .tafel__inhalt { padding-top: 24px; }
  .tafel--bild:not(.ist-voll)::after { content: 'Mehr ⌃'; position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); padding: 5px 14px; border-radius: 999px; background: var(--tafel-fest); border: 1px solid var(--gold-leise); font-size: 12.5px; letter-spacing: .08em; color: var(--gold-hell); pointer-events: none; }
  body.hat-bild .tafel--kultur, body.zeit-offen .tafel--kultur { opacity: 0; pointer-events: none; }
  .tafel h2 { font-size: 28px; }
  .bild__nativ { font-size: 28px; }
  .bild__de { font-size: 23px !important; }
  .tafel--kultur .tafel__inhalt { display: flex; flex-direction: column; }
  .werkzeuge, body.hat-bild .werkzeuge { right: var(--rand-r); bottom: auto; top: calc(var(--leiste) + 4px + env(safe-area-inset-top, 0px)); grid-auto-flow: column; }
  .werkzeuge [data-zoom] { display: none; }
  .ebenen { right: var(--rand-r); bottom: auto; top: calc(var(--leiste) + 56px + env(safe-area-inset-top, 0px)); }
  .himmel__hinweis { top: calc(var(--leiste) + 62px); left: 50%; max-width: calc(100vw - 32px); }
  .zeit { grid-template-columns: 1fr auto; gap: 8px 10px; padding-top: 8px; background: rgba(7, 11, 31, .95); border-top: 1px solid var(--gold-hauch); }
  .zeit__regler { grid-column: 1 / -1; grid-row: 2; display: none; padding: 6px 0 4px; }
  .zeit.ist-offen .zeit__regler { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .zeit__lauf { justify-content: flex-start; }
  .zeit__lauf .knopf { min-height: 44px; }
  .zeit__lauf [data-raffer] span { display: inline; }
  .zeit__knoepfe { flex-wrap: nowrap; }
  .zeit__knoepfe .knopf { min-height: 44px; }
  .knopf--gold .lang { display: none; } .knopf--gold .kurz { display: inline; }
  .zeit__mehr { display: inline-flex; }
  .zeit__ortknopf { font-size: 18px; min-height: 40px; }
  .zeit__wann { font-size: 12.5px; }
  .ortwahl { width: auto; left: var(--rand); right: var(--rand-r); }
  .suche { left: var(--rand); right: var(--rand-r); width: auto; max-height: calc(100dvh - var(--leiste) - 90px); }
  .intro__karte { padding: 34px 22px 30px; }
  .chip { min-height: 44px; }
  .rund { width: 44px; height: 44px; }
}
@media (max-width: 860px), (max-width: 1000px) and (max-height: 500px) {
  .regler input { height: 44px; }
  .damals { min-height: 36px; }
  .intro__schritte { gap: 8px 16px; }
  .rueckweg { left: 50%; }
}
/* Handy quer: Tafeln als Seitenblätter, Kulturwahl breit, Intro kompakt */
@media (max-width: 1000px) and (max-height: 500px) and (orientation: landscape) {
  :root { --leiste: 50px; }
  .leiste { background: none; }
  .himmel__hinweis { left: calc(var(--frei-l) + (100vw - var(--frei-l) - var(--frei-r)) / 2); }
  .tafel { top: calc(var(--leiste) + 6px + env(safe-area-inset-top, 0px)); bottom: var(--zeit-h, var(--unten)); max-height: none; width: min(380px, 44vw);
    border-radius: 10px 10px 0 0; border: 1px solid var(--gold-leise); border-bottom: 0; }
  .tafel--kultur { left: var(--rand); right: auto; }
  .tafel--bild { left: auto; right: var(--rand-r); width: min(380px, 44vw); max-height: none; }
  .tafel--bild:not(.ist-voll) { max-height: none; }
  .tafel--bild:not(.ist-voll) .tafel__inhalt { overflow-y: auto; -webkit-mask-image: none; mask-image: none; }
  .tafel--bild:not(.ist-voll)::after, .tafel__mehr { display: none; }
  .tafel--bild .tafel__inhalt { padding-top: 16px; }
  .tafel--kultur:not(.ist-offen) { top: auto; width: auto; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; bottom: calc(var(--zeit-h, var(--unten)) + 8px); }
  .tafel--kultur:not(.ist-offen) .tafel__griff { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--gold-leise); background: var(--tafel); }
  .tafel--kultur:not(.ist-offen) .tafel__griff::before { display: none; }
  .tafel--kultur.ist-offen .tafel__griff { justify-content: flex-start; }
  .tafel--kultur.ist-offen .tafel__griff::before { display: none; }
  .tafel--kultur.ist-offen .tafel__griff::after { transform: rotate(90deg); }
  .kulturwahl { top: calc(var(--leiste) + 4px + env(safe-area-inset-top, 0px)); max-height: calc(100dvh - var(--leiste) - 20px); padding: 10px 12px 12px; }
  .kulturwahl__raster { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kulturwahl__k { min-height: 52px; grid-template-columns: auto 1fr; justify-items: start; align-items: center; text-align: left; padding: 6px 8px; gap: 0 8px; }
  .kulturwahl__k svg { grid-row: 1 / span 2; width: 28px; height: 28px; }
  .kulturwahl__k b { font-size: 16px; }
  .kulturwahl__k small { font-size: 11px; }
  .himmel__hinweis { top: calc(var(--leiste) + 8px); max-width: min(520px, calc(100vw - var(--frei-l) - var(--frei-r) - 120px)); font-size: 13.5px; padding: 8px 14px; }
  .kulturknopf { top: calc(4px + env(safe-area-inset-top, 0px)); left: calc(var(--rand) + 150px); min-height: 42px; }
  .kulturknopf__text small { display: none; }
  .werkzeuge, body.hat-bild .werkzeuge { top: calc(var(--leiste) + 6px + env(safe-area-inset-top, 0px)); right: calc(var(--rand-r) + var(--frei-r)); grid-auto-flow: row; }
  .ebenen { top: calc(var(--leiste) + 6px + env(safe-area-inset-top, 0px)); right: calc(var(--rand-r) + var(--frei-r) + 54px); max-height: calc(100dvh - var(--leiste) - var(--unten) - 20px); overflow-y: auto; }
  .zeit { grid-template-columns: 1fr auto; }
  .zeit.ist-offen .zeit__regler { grid-template-columns: 1fr 1fr auto; gap: 14px; }
  .suche { max-height: calc(100dvh - var(--leiste) - 16px); }
  .intro { padding-top: calc(var(--leiste) + 8px); padding-bottom: 12px; }
  .intro__karte { padding: 22px 24px 20px; }
  .intro__titel { font-size: 34px; }
  .intro__text { margin-top: 10px; font-size: 16px; }
  .intro__schritte { margin-top: 12px; }
  .intro__knoepfe { margin-top: 14px; }
  .intro__recht { margin-top: 12px; }
}
@media (max-width: 380px) {
  .leiste__marke { display: none; }
  .leiste .pille { white-space: nowrap; }
  .zeit__mehr span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .zeit__mehr { width: 44px; padding: 0; }
  .zeit__knoepfe .knopf--gold { padding: 0 12px; font-size: 13.5px; }
  .leiste__links .pille { padding: 0 12px; }
  .leiste__links, .leiste__rechts { gap: 6px; }
  .leiste__rechts .pille:not(.pille--ikon) { padding: 0 11px; font-size: 13px; }
  .intro__karte { padding: 26px 16px 22px; }
  .intro__titel { font-size: 36px; }
  .intro__text { font-size: 17px; }
  .intro__schritte { flex-direction: column; align-items: flex-start; width: fit-content; }
  .vorfuehr__name { font-size: 17px; }
  .kulturknopf__text b { font-size: 17px; }
  .zeit__ortknopf { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .tafel, .kulturen, .kulturknopf, .zeit, .werkzeuge, .intro, .himmel__hinweis, .knopf, .kultur-k, .kulturen__band, .rueckweg, .damals { transition: none !important; scroll-behavior: auto; }
  .rueckweg, body.laedt .nur-laedt { animation: none; }
}
.suche__feld input::-webkit-search-cancel-button, .suche__feld input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }