/*
 * Bühne (KONZEPT-BUEHNE.md): Die 3D-Karte liegt als fester Hintergrund hinter der Seite, <main> wird zur Tafel darüber.
 * Alles hier gilt nur mit html.buehne-an (setzt der Kopfskript in vorlagen/layout.php, wenn WebGL da ist, kein Datensparen
 * und kein „Karte aus" gilt). Ohne Bühne bleibt die Seite eine normale Seite; dann zeigen nur-ohne-buehne und der Knopf
 * „Karte öffnen" den Weg zur Karte.
 *
 * Handy (bis 56rem): Tafel von unten mit drei Haltepunkten, Blick, halb und ganz (buehne.js setzt --tafel-y).
 * Desktop: Spalte links, 30rem breit, einklappbar; die Bühne liegt unter der ganzen Seite und rechts neben der Spalte.
 * Landschaftskante (KONZEPT-MOTION.md Idee 6): Die Oberkante der Tafel (Handy) und die rechte Kante der Spalte (Desktop) ist
 * ein Höhenprofil, ein echter Schnitt aus dem Geländemodell (assets/js/buehne-profil.js, erzeugt von werkzeug/profil.mjs).
 * Die Kante ist ein eigenes Element neben <main> und bewegt sich mit denselben Werten wie die Tafel.
 * Ohne Karte (html.poster-an) steht das Luftbild-Poster statt der Bühne (Idee 25), beim Laden liegt es unter dem Nebel (Idee 24).
 * Bewegung: nur transform und opacity, Kurven und Dauern aus tokens.css; bei Ruhe läuft nichts (rahmen.css).
 */

/* ---- Wer wo zu sehen ist ---- */
.nur-buehne { display: none; }
html.buehne-an .nur-buehne { display: revert; }
html.buehne-an .nur-ohne-buehne { display: none !important; }
html.buehne-an .karte-weg { display: none; }
html.poster-an .nur-film { display: none !important; }      /* ohne 3D-Karte im Hintergrund gibt es keinen Film */

/* ---- Maße der Bühnenansicht ---- */
html.buehne-an {
  --tafel-breit: min(30rem, 62vw);
  --kopf-gesamt: 4.5rem;            /* Höhe des klebenden Tafelkopfs; buehne.js misst sie genau */
  --kante-h: 2rem;                  /* Höhe der Landschaftskante (Handy: über der Tafel, Desktop: Breite rechts neben der Spalte) */
  --t-h1: clamp(1.8rem, 1.5rem + 1.4vw, 2.3rem);
  --t-h2: clamp(1.4rem, 1.2rem + .8vw, 1.7rem);
  --abschnitt: 2.5rem;
  height: 100%;
  overflow: hidden;
}
html.buehne-an body {
  display: block;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  background: linear-gradient(160deg, var(--papier-2), var(--papier));
}
html.buehne-an .kopf { position: fixed; inset: 0 0 auto 0; }
html.buehne-an { overscroll-behavior: none; }
html.buehne-an .anker { display: none; }
html.buehne-an .zeitstrahl { --zs-oben: var(--kopf-hoehe, 0px); }   /* die klebende Jahresleiste schließt bündig an den Tafelkopf an, kein Text scheint dazwischen durch */

/* ---- Die Bühne: die Karte als fester Hintergrund ---- */
.buehne { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--papier-2); }
.buehne iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 0;
  background: transparent;
  color-scheme: normal;
  transition: opacity var(--d-wechsel) var(--kurve-atmen);
}
.buehne.bereit iframe { opacity: 1; }
.buehne:not(.bereit) iframe { pointer-events: none; }        /* solange die Karte unsichtbar lädt, nimmt sie keine Berührung (das Poster darunter ist bedienbar) */

/* Das Poster (Idee 25): ein Luftbild von Roringen unter der Karte, solange sie lädt, und statt der Karte, wenn es keine gibt.
   Die Fläche hat die Pixelmaße des Bildes und wird von buehne.js mit translate und scale in den sichtbaren Bereich gelegt;
   Punkte und Ringe darin werden mit --p-s zurückskaliert, bleiben also immer gleich groß. */
.poster { position: absolute; inset: 0; overflow: hidden; }
.poster-flaeche {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  transform: translate(var(--p-x, 0px), var(--p-y, 0px)) scale(var(--p-s, 1));
  transition: transform var(--d-tafel) var(--kurve-schieben), opacity var(--d-teil) linear;
}
.poster-flaeche.springt { transition: opacity var(--d-teil) linear; }
.poster-flaeche.blass { opacity: 0; }
.poster-bild { display: block; max-width: none; width: 100%; height: 100%; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }
html[data-theme="dunkel"] .poster-bild { filter: brightness(.72) saturate(.9); }
@media (prefers-color-scheme: dark) { html:not([data-theme]) .poster-bild { filter: brightness(.72) saturate(.9); } }
.poster-orte { margin: 0; padding: 0; list-style: none; }
.poster-ort {
  position: absolute;
  display: block;
  width: 2.75rem;
  height: 2.75rem;
  margin: 0;
  padding: 0;
  transform: translate(-50%, -50%) scale(calc(1 / var(--p-s, 1)));
  background: none;
  border: 0;
  border-radius: 50%;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.poster-ort::before {            /* der sichtbare Punkt: Papierfüllung, heller Rand, damit er auf jedem Luftbild steht */
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: .8rem;
  height: .8rem;
  margin: -.4rem 0 0 -.4rem;
  box-sizing: border-box;
  border: 2px solid var(--poster-punkt);
  border-radius: 50%;
  background: var(--akzent-fl);
  box-shadow: 0 0 0 1px rgb(0 0 0 / .45);
}
.poster-ort.station::before { background: var(--spur); width: .65rem; height: .65rem; margin: -.325rem 0 0 -.325rem; }
.poster-ort:hover::before { box-shadow: 0 0 0 1px rgb(0 0 0 / .45), 0 0 0 .3rem rgb(255 255 255 / .35); }
.poster-ort:focus-visible { outline: 3px solid var(--fokus); outline-offset: -.4rem; }
.poster.pfad .poster-ort:not(.station) { opacity: .55; }
.poster.pfad .poster-ort.station::before { width: .95rem; height: .95rem; margin: -.475rem 0 0 -.475rem; }
.poster-ort.hier::before { width: 1.25rem; height: 1.25rem; margin: -.625rem 0 0 -.625rem; border-width: 3px; }
.poster.pfad .poster-ort.hier::before { width: 1.25rem; height: 1.25rem; margin: -.625rem 0 0 -.625rem; }
.poster-ort.markiert::before { background: var(--glanz-licht); width: 1rem; height: 1rem; margin: -.5rem 0 0 -.5rem; }
.poster-etikett {                /* Name am Punkt, nur für den gezeigten Ort und den Treffer unter dem Finger */
  position: absolute;
  left: 50%;
  top: calc(50% + .85rem);
  transform: translateX(-50%);
  padding: .1rem .55rem;
  border-radius: var(--rad-pille);
  background: var(--papier);
  color: var(--tinte);
  border: var(--linienstaerke) solid var(--linie);
  font-size: var(--t-klein);
  font-weight: 650;
  line-height: 1.4;
  white-space: nowrap;
  pointer-events: none;
}
.poster-ort:not(.hier) .poster-etikett { display: none; }
.poster-quelle {
  position: absolute;
  left: .6rem;
  top: .6rem;
  margin: 0;
  padding: .15rem .6rem;
  background: var(--papier);
  color: var(--tinte-2);
  border: var(--linienstaerke) solid var(--rand);
  border-radius: var(--rad-pille);
  font-size: var(--t-klein);
  line-height: 1.4;
}
.poster-laden {
  position: absolute;
  right: .75rem;
  top: .75rem;
  min-height: var(--tipp);
  padding: 0 1rem;
  background: var(--papier);
  color: var(--tinte);
  border: 2px solid var(--linie);
  border-radius: var(--rad-pille);
  font: inherit;
  font-size: var(--t-klein);
  font-weight: 700;
}
.poster-laden:hover { background: var(--papier-2); }
.poster-laden[hidden] { display: none; }
/* In der Karte darunter braucht das Poster keine Bedienung: nur das Bild */
.buehne:not(.poster-aktiv) .poster-orte, .buehne:not(.poster-aktiv) .poster-quelle, .buehne:not(.poster-aktiv) .poster-laden { display: none; }
.buehne.bereit .poster { visibility: hidden; transition: visibility 0s var(--d-wechsel); }
.buehne.bereit.poster-aktiv .poster { visibility: visible; }

/* Nebel (Idee 24): Frühnebel im Tal, solange die Karte lädt. Verlauf von unten, hebt sich, sobald die Karte bereit ist und ruht. */
.buehne-nebel {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--nebel), color-mix(in srgb, var(--nebel) 55%, transparent));
  opacity: 1;
  pointer-events: none;
  transition: opacity 900ms var(--kurve-atmen);
}
.buehne.bereit .buehne-nebel, .buehne.poster-aktiv .buehne-nebel { opacity: 0; }
.buehne.bereit.nebel-leicht .buehne-nebel { opacity: .5; transition-duration: var(--d-teil); }
.buehne.poster-aktiv .buehne-nebel { display: none; }

/* Die Bühne tritt zurück (Idee 7): Lesemodus und Inhalte ohne Lage. Ein papierfarbener Schleier, die Karte pausiert. */
.buehne-schleier { position: absolute; inset: 0; background: var(--schleier-lesen); opacity: 0; pointer-events: none; transition: opacity var(--d-teil) var(--kurve-atmen); }
.buehne.zurueck .buehne-schleier { opacity: 1; transition-duration: 350ms; }

/* ---- Die Tafel: <main> ---- */
html.buehne-an body > main#inhalt {
  position: fixed;
  z-index: 40;
  display: block;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-padding-top: var(--kopf-gesamt);
  background: var(--papier);
  color: var(--tinte);
  box-shadow: var(--schatten-2);
  outline: none;
}

/* Tafelkopf: klebt oben in der Tafel, trägt Griff, Titel und zwei Werkzeuge */
.tafel-kopf {
  position: sticky;
  top: 0;
  z-index: 6;
  background: var(--papier);
  border-bottom: var(--linienstaerke) solid var(--rand);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.tafel-griff {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;                 /* Tippziel (und Griff zum Ziehen) mindestens 44 px hoch */
  padding: .3rem 0 .1rem;
  border: 0;
  background: none;
  color: var(--tinte-2);
  cursor: grab;
  touch-action: none;
}
.tafel-griff-strich { width: 3rem; height: .3rem; border-radius: var(--rad-pille); background: var(--linie); }
.tafel-griff:hover .tafel-griff-strich { background: var(--tinte-2); }
.tafel-griff:focus-visible { outline: 3px solid var(--fokus); outline-offset: -3px; border-radius: var(--rad-m); }
.tafel-zeile { container: tafelzeile / inline-size; display: flex; align-items: center; gap: var(--r-2); padding: 0 var(--rand-seite) .5rem; min-height: calc(var(--tipp) + .5rem); }
.tafel-titel {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-family: var(--schrift-titel);
  font-size: 1.25rem;
  font-weight: 650;
  line-height: 1.2;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.tafel-hinweis { margin: 0; padding: 0 var(--rand-seite) .5rem; font-size: var(--t-klein); line-height: 1.4; color: var(--tinte-2); }   /* „Die Karte lädt langsam …" */
.tafel-label { display: none; }
.tafel-werkzeuge { display: flex; gap: .3rem; flex: none; }
/* Die Überschrift nimmt den Fokus nach einem Tafelwechsel nur für Tabulator und Vorlesen, ein Rahmen darum wäre Lärm */
.tafel-inhalt h1[tabindex="-1"]:focus { outline: none; }
.tafel-knopf {
  display: inline-grid;
  place-items: center;
  width: var(--tipp);
  height: var(--tipp);
  padding: 0;
  border: var(--linienstaerke) solid var(--rand);
  border-radius: var(--rad-m);
  background: var(--karte);
  color: var(--tinte);
}
.tafel-knopf:hover { border-color: var(--linie); background: var(--papier-2); }
.tafel-knopf .symbol { width: 1.35rem; height: 1.35rem; }
.tafel-knopf[hidden] { display: none; }

/* ---- Landschaftskante (Idee 6): Höhenprofil als Silhouette der Tafel, Rest in den Medienbereichen unten ---- */
.tafel-kante { position: fixed; z-index: 41; pointer-events: none; touch-action: none; }
.tafel-kante svg { display: block; width: 100%; height: 100%; overflow: visible; }
.kante-flaeche { fill: var(--papier); stroke: none; }
.kante-linie { fill: none; stroke: var(--linie); stroke-width: 1px; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.kante-punkt {                      /* der gezeigte Ort, wenn der Schnitt ihn berührt (St. Martin, Warte) */
  position: absolute;
  width: .8rem;
  height: .8rem;
  margin: -.4rem 0 0 -.4rem;
  box-sizing: border-box;
  border: 2px solid var(--papier);
  border-radius: 50%;
  background: var(--akzent-fl);
  box-shadow: 0 0 0 1px var(--linie);
}
.kante-punkt[hidden] { display: none; }

/* Lädt eine neue Tafel länger als einen Moment, läuft ein dünner Strich am Tafelkopf */
.tafel-kopf::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background: var(--akzent-fl);
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
}
html.tafel-laedt .tafel-kopf::after { opacity: 1; transform: scaleX(.85); transition: transform 6s cubic-bezier(.1, .6, .2, 1), opacity .2s; }

/* Überblendung beim Tafelwechsel (KONZEPT-MOTION.md 3.3): nur Deckkraft, der Text bewegt sich nicht. Die Bilder der neuen Tafel
   blenden erst ein, wenn die Kamera steht (Klasse tafel-fahrt auf <main>, buehne.js); sie werden nie verschoben oder skaliert.
   Waagerechtes Wischen gehört der Hülle (nächste und vorige Seite der Reihe). */
.tafel-inhalt { transition: opacity var(--d-beruehrung) linear; touch-action: pan-y pinch-zoom; }
.tafel-inhalt.aus { opacity: 0; }
.tafel-inhalt.ein { animation: tafel-ein var(--d-teil) linear both; }
@keyframes tafel-ein { from { opacity: 0; } to { opacity: 1; } }
.tafel-inhalt img { transition: opacity var(--d-teil) linear; }
main.tafel-fahrt .tafel-inhalt img { opacity: 0; }

/* Fuß am Ende der Tafel */
html.buehne-an .fuss { padding-bottom: var(--r-6); }
html.buehne-an:not(.tafel-bereit) .fuss { display: none; }
html.buehne-an .fuss-innen { grid-template-columns: 1fr; }

/* Inhalte der Seiten in der schmalen Spalte */
html.buehne-an .s-naehe-liste, html.buehne-an .s-kacheln { grid-template-columns: 1fr; }
html.buehne-an .s-termin article { grid-template-columns: 1fr; gap: .5rem; }
html.buehne-an .kapitel-spalte { display: none !important; }
html.buehne-an .kapitel-klein[data-da] { display: block; }
html.buehne-an .fliesstext { font-size: var(--t-basis); }

/* ---- Film (KONZEPT-BUEHNE.md, Buehne.film): der Rundflug der Karte als eigenes Erlebnis ----
   Knopf „Film“ im Tafelkopf; während des Films steht die Tafel auf „Blick“ (Handy: unterster Haltepunkt, Desktop: eine kleine Karte unten
   links) und zeigt in der Kopfzeile Titel und Untertitel der Szene mit Pause, Weiter und Beenden. Der Titel wechselt nur über die Deckkraft. */
.film-knopf {
  width: auto;
  gap: .4rem;
  padding: 0 .85rem 0 .7rem;
  display: inline-flex;
  align-items: center;
  font: inherit;
  font-size: var(--t-klein);
  font-weight: 700;
  line-height: 1;
  background: var(--akzent-fl);
  border-color: var(--akzent-fl);
  color: var(--auf-akzent);
}
.film-knopf:hover { background: color-mix(in srgb, var(--akzent-fl) 86%, black); border-color: color-mix(in srgb, var(--akzent-fl) 86%, black); }
html[data-theme="kontrast"] .film-knopf:hover { background: var(--tinte); border-color: var(--tinte); color: var(--papier); }
.film-knopf .symbol { width: 1.25rem; height: 1.25rem; }
.film-knopf[hidden] { display: none; }
/* Sehr schmal oder sehr große Schrift: nur das Symbol, damit der Titel der Tafel lesbar bleibt (der Knopf trägt ein aria-label) */
@container tafelzeile (max-width: 19em) {
  .film-knopf { width: var(--tipp); padding: 0; justify-content: center; }
  .film-knopf .film-knopf-text { display: none; }
}
.film-zeile { display: none; }
html.film-an .tafel-zeile { display: none; }
html.film-an .tafel-griff { display: none; }
html.film-an .film-zeile { display: flex; align-items: center; gap: var(--r-2); min-height: calc(var(--tipp) + 1.1rem); padding: .55rem var(--rand-seite) .6rem; }
.film-titel {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: .1rem 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}
.film-titel:disabled { cursor: default; opacity: 1; color: inherit; }
.film-titel:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; border-radius: var(--rad-m); }
.film-text { display: block; transition: opacity var(--d-teil) linear; }
.film-text.wechselt { opacity: 0; }
.film-label { display: none; font-size: var(--t-klein); font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: var(--tinte-2); }
.film-name { display: block; font-family: var(--schrift-titel); font-size: 1.25rem; font-weight: 650; line-height: 1.2; }
.film-titel:not(:disabled) .film-name::after { content: " \203A"; color: var(--akzent); }
.film-unter { display: block; font-size: var(--t-klein); line-height: 1.35; color: var(--tinte-2); }
.film-knoepfe { display: flex; gap: .3rem; flex: none; }
.film-taste .film-knopf-text { display: none; }
html[data-bewegung="ruhig"] .film-text { transition: none; }

/* ---- Aussicht („Blick von hier“, Buehne.aussicht): Orte mit ort.aussicht; die Kamera sitzt auf Augenhöhe am Ort ----
   Knopf im Inhalt und im Tafelkopf, nur mit 3D-Karte im Hintergrund. Während der Aussicht steht die Tafel auf „Blick“ (Handy) oder ist eine
   kleine Karte unten links (Desktop) mit Titel, Hinweisen und dem großen Knopf „Zurück zur Übersicht“. */
.aussicht-zeile { margin: .25rem 0 1rem; }
.aussicht-knopf {
  display: none;
  align-items: center;
  gap: .5rem;
  min-height: var(--tipp);
  padding: 0 1.1rem 0 .9rem;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  background: var(--akzent-fl);
  border: var(--linienstaerke) solid var(--akzent-fl);
  border-radius: var(--rad-m);
  color: var(--auf-akzent);
  cursor: pointer;
  touch-action: manipulation;
}
html.buehne-an:not(.poster-an) .aussicht-knopf { display: inline-flex; }
.aussicht-knopf:hover { background: color-mix(in srgb, var(--akzent-fl) 86%, black); border-color: color-mix(in srgb, var(--akzent-fl) 86%, black); }
html[data-theme="kontrast"] .aussicht-knopf:hover { background: var(--tinte); border-color: var(--tinte); color: var(--papier); }
.aussicht-knopf .symbol { width: 1.35rem; height: 1.35rem; }
.aussicht-knopf:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
.aussicht-knopf-kopf { width: auto; gap: .4rem; padding: 0 .85rem 0 .7rem; font: inherit; font-size: .9375rem; font-weight: 700; line-height: 1; background: var(--akzent-fl); border-color: var(--akzent-fl); color: var(--auf-akzent); display: inline-flex; align-items: center; }
.aussicht-knopf-kopf[hidden] { display: none; }
.aussicht-knopf-kopf .film-knopf-text { display: inline; }
.aussicht-zeile-kopf { display: none; }
html.aussicht-an .tafel-zeile, html.aussicht-an .tafel-griff { display: none; }
html.aussicht-an .aussicht-zeile-kopf { display: flex; align-items: center; gap: var(--r-2); padding: .55rem var(--rand-seite) .6rem; }
.aussicht-text { flex: 1; min-width: 0; margin: 0; }
.aussicht-name { display: block; font-family: var(--schrift-titel); font-size: 1.25rem; font-weight: 650; line-height: 1.2; }
.aussicht-unter { display: block; font-size: var(--t-klein); line-height: 1.35; color: var(--tinte-2); }
.aussicht-hinweis { display: block; margin-top: .15rem; font-size: .75rem; line-height: 1.35; color: var(--tinte-2); }
.aussicht-hinweis[hidden] { display: none; }
.aussicht-zurueck {
  flex: none;
  width: auto;
  height: auto;
  min-height: var(--tipp);
  padding: .4rem .9rem .4rem .7rem;
  gap: .4rem;
  display: inline-flex;
  align-items: center;
  font: inherit;
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
  background: var(--tinte);
  border-color: var(--tinte);
  color: var(--papier);
}
.aussicht-zurueck:hover { background: color-mix(in srgb, var(--tinte) 86%, white); border-color: color-mix(in srgb, var(--tinte) 86%, white); }
.aussicht-zurueck .symbol { width: 1.2rem; height: 1.2rem; }
/* Handy: Titel und Hinweise oben, darunter der große Knopf über die ganze Breite (die Tafel steht auf „Blick“ und bleibt klein) */
@media (max-width: 56rem) {
  html.aussicht-an .aussicht-zeile-kopf { flex-direction: column; align-items: stretch; gap: .5rem; padding-top: .7rem; padding-bottom: .7rem; }
  .aussicht-name { font-size: 1.15rem; }
  .aussicht-unter { font-size: .8125rem; }
  .aussicht-hinweis { font-size: .75rem; }
  .aussicht-zurueck { width: 100%; justify-content: center; min-height: 3rem; }
}

/* ---- Handy: Tafel von unten mit drei Haltepunkten ---- */
@media (max-width: 56rem) and (not ((orientation: landscape) and (max-height: 500px))) {
  html.buehne-an body > main#inhalt {
    left: 0;
    right: 0;
    top: var(--kopf-px, calc(var(--kopf-h) + 1px));
    bottom: 0;
    padding-bottom: calc(var(--tafel-weg, 0px) + var(--leiste-px, calc(var(--leiste-h) + .6rem)) + env(safe-area-inset-bottom));
    border-top: 0;                  /* die Oberkante zeichnet die Landschaftskante */
    transform: translateY(var(--tafel-y, 50%));
    transition: transform var(--d-tafel) var(--kurve-schieben);
    will-change: transform;
    scroll-padding-bottom: calc(var(--leiste-px, 5rem) + 1rem);      /* ein fokussiertes Element rückt über die untere Leiste, nicht dahinter */
  }
  html.buehne-an body > main#inhalt.zieht, html.tafel-zieht .tafel-kante { transition: none; }
  html.buehne-an body > main#inhalt.tafel-blick { overflow-y: hidden; }
  /* Bildschirmtastatur (handy.js misst sie über visualViewport, wo sie die Seite überdeckt statt zu verkleinern, z. B. iOS):
     die Tafel endet über der Tastatur, die untere Leiste ruht, bis sie wieder weg ist */
  html.tastatur-auf body > main#inhalt { bottom: var(--tastatur, 0px); padding-bottom: var(--tafel-weg, 0px); }
  html.tastatur-auf .leiste, html.tastatur-auf .tafel-kante { display: none; }
  html.buehne-an .tafel-blick .tafel-inhalt,
  html.buehne-an .tafel-blick .fuss { opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s .2s; }
  .tafel-klappe { display: none; }
  /* Die Karte beginnt unter dem Kopf, damit ihre Quellenangabe (oben links) sichtbar bleibt */
  .buehne { top: var(--kopf-px, calc(var(--kopf-h) + 1px)); }
  /* Landschaftskante über der Tafel: gleiche Verschiebung, gleiche Kurve; bei ganz offener Tafel verschwindet sie unter dem Kopf */
  .tafel-kante {
    left: 0;
    right: 0;
    top: calc(var(--kopf-px, calc(var(--kopf-h) + 1px)) - var(--kante-h));
    height: calc(var(--kante-h) + 1px);
    transform: translateY(var(--tafel-y, 50%));
    transition: transform var(--d-tafel) var(--kurve-schieben), opacity var(--d-teil) linear;
  }
  .tafel-kante { pointer-events: auto; cursor: grab; }
  html.tafel-ganz .tafel-kante { opacity: 0; pointer-events: none; }
  .tafel-kante-marke { display: none; }
  /* die untere Leiste bleibt sichtbar über der Tafel und läuft nicht mit dem Scrollen weg */
  html.buehne-an body.leiste-weg .leiste { transform: none; visibility: visible; }
}

/* ---- Desktop: Spalte links, Bühne rechts ---- */
@media (min-width: 56.01rem), (orientation: landscape) and (max-height: 500px) {
  html.buehne-an body > main#inhalt {
    left: 0;
    top: var(--kopf-px, calc(var(--kopf-h) + 1px));
    bottom: 0;
    width: var(--tafel-breit);
    border-right: 0;                /* die rechte Kante zeichnet die Landschaftskante */
    transform: translateX(var(--tafel-x, 0));
    transition: transform var(--d-tafel) var(--kurve-schieben);
  }
  html.tafel-zu body > main#inhalt { --tafel-x: calc(-100% - 2rem); visibility: hidden; transition: transform var(--d-tafel) var(--kurve-schieben), visibility 0s var(--d-tafel); }
  /* Landschaftskante rechts neben der Spalte: der Schnitt läuft von oben (WSW) nach unten (ONO), die Höhe zeigt nach rechts */
  .tafel-kante {
    --kante-h: 1.5rem;
    top: var(--kopf-px, calc(var(--kopf-h) + 1px));
    bottom: 0;
    left: calc(var(--tafel-breit) - 1px);
    width: calc(var(--kante-h) + 1px);
    transition: transform var(--d-tafel) var(--kurve-schieben);
  }
  html.tafel-zu .tafel-kante { transform: translateX(calc(-1 * (var(--tafel-breit) + var(--kante-h) + 2rem))); }
  .tafel-kante-marke {
    position: absolute;
    left: calc(100% + .3rem);
    transform: translateY(-50%);
    padding: .05rem .5rem;
    background: var(--papier);
    color: var(--tinte);
    border: var(--linienstaerke) solid var(--linie);
    border-radius: var(--rad-pille);
    font-size: var(--t-klein);
    font-weight: 650;
    line-height: 1.5;
    white-space: nowrap;
    pointer-events: none;
  }
  .tafel-kante-marke small { color: var(--tinte-2); font-weight: 560; }
  .tafel-griff { display: none; }
  .tafel-zeile { padding-top: .5rem; }
  /* In der Spalte steht die Überschrift der Seite gleich darunter: im Kopf steht zuerst die Art der Seite, der Titel erst, wenn die Überschrift weggescrollt ist */
  .tafel-label { display: inline; }
  .tafel-name { display: none; }
  main.tafel-gescrollt .tafel-label { display: none; }
  main.tafel-gescrollt .tafel-name { display: inline; }
  .tafel-titel { font-size: var(--t-klein); font-family: var(--schrift-text); font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: var(--tinte-2); }
  main.tafel-gescrollt .tafel-titel { font-size: 1.25rem; font-family: var(--schrift-titel); font-weight: 650; letter-spacing: 0; text-transform: none; color: var(--tinte); }
  .tafel-klappe {
    position: fixed;
    z-index: 41;
    top: calc(var(--kopf-px, 4rem) + 1rem);
    left: var(--tafel-breit);
    display: grid;
    place-items: center;
    width: var(--tipp);             /* Tippziel mindestens 44 px (Prüflauf 07.10.: vorher 32 px) */
    height: var(--tipp);
    padding: 0;
    border: var(--linienstaerke) solid var(--rand);
    border-left: 0;
    border-radius: 0 var(--rad-m) var(--rad-m) 0;
    background: var(--papier);
    color: var(--tinte);
    box-shadow: var(--schatten-1);
    transition: transform var(--d-tafel) var(--kurve-schieben);
  }
  .tafel-klappe:hover { background: var(--papier-2); }
  .tafel-klappe .symbol { width: 1.1rem; height: 1.1rem; transition: transform var(--d-tafel) var(--kurve-schieben); }
  html.tafel-zu .tafel-klappe { transform: translateX(calc(-1 * var(--tafel-breit))); }
  html.tafel-zu .tafel-klappe .symbol { transform: rotate(180deg); }
  html:not(.tafel-zu) .tafel-klappe .symbol { transform: none; }
  .tafel-klappe:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
  /* Film: die Spalte schrumpft zu einer Karte unten links (nur Kopfzeile), die Bühne füllt das Bild */
  .film-label { display: block; }
  .film-taste { width: auto; padding: 0 .8rem; gap: .4rem; display: inline-flex; align-items: center; }
  .film-taste .film-knopf-text { display: inline; font-size: var(--t-klein); font-weight: 650; }
  html.film-an body > main#inhalt {
    top: auto;
    bottom: 1.5rem;
    left: 1.5rem;
    width: min(36rem, calc(100vw - 3rem));
    height: auto;
    overflow: hidden;
    border-radius: var(--rad-l);
    transform: none;
    transition: none;
    animation: tafel-ein var(--d-teil) linear both;
  }
  html.film-an.tafel-zu body > main#inhalt { visibility: visible; }
  html.film-an .tafel-kopf { border-bottom: 0; }
  html.film-an .tafel-inhalt, html.film-an .fuss, html.film-an .tafel-kante, html.film-an .tafel-klappe { display: none; }
  /* Aussicht: die Spalte schrumpft zu einer Karte unten links (nur Kopfzeile), die Bühne füllt das Bild */
  html.aussicht-an body > main#inhalt {
    top: auto;
    bottom: 1.5rem;
    left: 1.5rem;
    width: min(32rem, calc(100vw - 3rem));
    height: auto;
    overflow: hidden;
    border-radius: var(--rad-l);
    transform: none;
    transition: none;
    animation: tafel-ein var(--d-teil) linear both;
  }
  html.aussicht-an.tafel-zu body > main#inhalt { visibility: visible; }
  html.aussicht-an .tafel-kopf { border-bottom: 0; }
  html.aussicht-an .tafel-inhalt, html.aussicht-an .fuss, html.aussicht-an .tafel-kante, html.aussicht-an .tafel-klappe { display: none; }
}

/* ---- Druck: keine Bühne, die Seite wie gewohnt ---- */
@media print {
  html.buehne-an, html.buehne-an body { height: auto; overflow: visible; }
  .buehne, .tafel-kopf, .tafel-klappe, .tafel-kante { display: none !important; }
  html.buehne-an .kopf { position: static; }
  html.buehne-an body > main#inhalt { position: static; width: auto; transform: none; overflow: visible; padding: 0; box-shadow: none; border: 0; }
  html.buehne-an:not(.tafel-bereit) .fuss { display: block; }
  html.buehne-an .nur-ohne-buehne { display: revert !important; }
}

/* ---- Kompassband oben über der Karte (buehne.js kompassBauen): folgt der Drehung, Antippen richtet nach Norden aus ---- */
.kompass {
  position: fixed; z-index: 5; top: 0; left: 50%;
  width: min(56rem, calc(var(--kompass-raum, 100vw) - 7rem)); height: var(--tipp);
  transform: translateX(-50%);
  padding: 0; margin: 0; overflow: hidden; cursor: pointer;
  background: var(--nebel); color: var(--tinte);
  border: 1px solid var(--rand); border-radius: var(--rad-m);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  font: 500 var(--t-klein)/1 var(--schrift-text);
  font-variant-numeric: tabular-nums;
}
.kompass[hidden] { display: none; }
/* Handy: schmaler, damit die Bedienknöpfe der Karte in den oberen Ecken frei bleiben */
@media (max-width: 40rem) { .kompass { width: calc(100vw - 7rem); } }
/* Handy: Ist die Tafel halb oder ganz offen, steht die Überschrift der Seite gleich darunter. Im Kopf steht dann wie am
   Desktop zuerst die Art der Seite, der Titel erst nach dem Scrollen (sonst „Chronik“ über „Chronik“). Bei „blick“ bleibt der Titel. */
@media (max-width: 56rem) and (not ((orientation: landscape) and (max-height: 500px))) {
  html.tafel-halb .tafel-label, html.tafel-ganz .tafel-label { display: inline; }
  html.tafel-halb .tafel-name, html.tafel-ganz .tafel-name { display: none; }
  html.tafel-halb main.tafel-gescrollt .tafel-label, html.tafel-ganz main.tafel-gescrollt .tafel-label { display: none; }
  html.tafel-halb main.tafel-gescrollt .tafel-name, html.tafel-ganz main.tafel-gescrollt .tafel-name { display: inline; }
  html.tafel-halb main:not(.tafel-gescrollt) .tafel-titel, html.tafel-ganz main:not(.tafel-gescrollt) .tafel-titel {
    font-size: var(--t-klein); font-family: var(--schrift-text); font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: var(--tinte-2);
  }
}
.kompass:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; -webkit-mask-image: none; mask-image: none; }
.kompass-band { position: absolute; inset: 0 auto 0 0; will-change: transform; pointer-events: none; }
.kompass-strich { position: absolute; bottom: 0; width: 1px; height: .35rem; background: currentColor; opacity: .45; }
.kompass-strich.kompass-lang { height: .6rem; opacity: .8; }
.kompass-strich.kompass-fein { height: .2rem; opacity: .3; }
.kompass-zahl, .kompass-name { position: absolute; top: .45rem; transform: translateX(-50%); white-space: nowrap; }
.kompass-zahl { opacity: .7; }
.kompass-name { font-weight: 750; }
.kompass-name.kompass-haupt { color: var(--akzent); }
.kompass-marke {
  position: absolute; left: 50%; top: 0; width: 0; height: 0; transform: translateX(-50%);
  border-left: .35rem solid transparent; border-right: .35rem solid transparent; border-top: .4rem solid var(--akzent);
  pointer-events: none;
}