/* buehne-2026-10-01 — Buehnen-Seiten (ein Bildschirm, alles steht fest: Sternenhimmel, Gedanken-Baum, Stecker-Moment,
   Die eine Methode). Befund 01.10.2026 (Andreas): "da kommt kein Sternenhimmel", "ich seh das Menue nicht mehr".
   Ursache: spaeter angehaengte Bausteine (helle Flaeche "Der naechste Gedanke", Hinweis-Kasten, Wegweiser, Katalog)
   stehen im normalen Seitenfluss und legten sich quer ueber die feste Buehne; die Kopfzeile war ein kleines
   schwebendes Kaestchen, in das ein ganzes Menue gequetscht wurde.
   Regel jetzt: Eine Buehnen-Seite ist EIN Bild. Oben die normale Kopfzeile ueber die ganze Breite, unten eine
   schmale Fusszeile, dazwischen nur die Buehne. Alles Angehaengte bleibt auf diesen Seiten unsichtbar. */
html body.buehnen-seite > research-next,
html body.buehnen-seite > #ki-schild-r153,
html body.buehnen-seite > .rs-banner,
html body.buehnen-seite > .perspective-compass,
html body.buehnen-seite > .observer-catalog-access,
html body.buehnen-seite > .siegel-band,
html body.buehnen-seite > .wow4-faden,
html body.buehnen-seite > .naht-traeger-2607 { display: none !important; }

/* Hoehe der Kopfzeile als Mass fuer alles darunter */
html body.buehnen-seite { --bk: 72px; }
@media (max-width: 900px) { html body.buehnen-seite { --bk: 67px; } }

/* Kopfzeile: ueber die ganze Breite, ganz oben, wie auf allen anderen Seiten
   (:is(...) hebt das Gewicht der Regel, weil manche Seiten der Kopfzeile ueber eine Kennung eine eigene Lage geben) */
html body.buehnen-seite > header[data-c43="header"]:is(#rueckweg, .rueckweg, header) {
  position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: auto !important;
  inset: 0 0 auto 0 !important; width: auto !important; max-width: none !important; margin: 0 !important;
  box-sizing: border-box !important; z-index: 1500 !important;
}
/* Hintergrund-Ebene immer ueber den ganzen Bildschirm (am Handy hatte ein anderes Programm sie auf 72 % gekuerzt) */
html body.buehnen-seite > #lebende-ebene { top: 0 !important; bottom: 0 !important; height: auto !important; max-height: none !important; }
html body.buehnen-seite > div[aria-hidden="true"][style*="rgba(6,8,12,.94)"] { display: none !important; }

/* Buehne und Titel beginnen UNTER der Kopfzeile */
html body.buehnen-seite > #buehne { top: var(--bk) !important; height: calc(100% - var(--bk)) !important; }
html body.buehnen-seite > header.titelblock { top: calc(var(--bk) + 14px) !important; }
/* Klang-Knopf: unter die Kopfzeile, rechts */
html body.buehnen-seite > .klang,
html body.buehnen-seite > #klang,
html body.buehnen-seite > #klangKnopf { top: calc(var(--bk) + 12px + env(safe-area-inset-top)) !important; }
/* KI-Kennzeichen: immer sichtbar, unter der Kopfzeile, links (rechts sitzt der Klang-Knopf) */
html:root:root:root:root:root:root:root:root body.buehnen-seite .mk-schild.mk-sichtbar {
  position: fixed !important; top: calc(var(--bk) + 14px + env(safe-area-inset-top)) !important; left: 12px !important; right: auto !important; bottom: auto !important;
  z-index: 1400 !important; display: inline-flex !important; visibility: visible !important; opacity: 1 !important;
}

/* Fusszeile: schmal und ruhig, damit sie die Buehne nicht verdeckt */
html body.buehnen-seite > footer#fuss {
  padding: 10px 14px calc(8px + env(safe-area-inset-bottom)) !important;
  background: linear-gradient(to top, rgba(4,7,14,.95) 0%, rgba(4,7,14,.82) 62%, rgba(4,7,14,0) 100%) !important;
}
html body.buehnen-seite > footer#fuss p,
html body.buehnen-seite > footer#fuss a,
html body.buehnen-seite > footer#fuss span { font-size: 12.5px !important; line-height: 1.5 !important; }
html body.buehnen-seite > footer#fuss p { margin: 1px auto !important; }
html body.buehnen-seite > footer#fuss .ki-kennzeichnung-platte { display: none !important; } /* der Satz steht auf der Seite "Disclaimer"; das Kennzeichen am Bild bleibt sichtbar */
html body.buehnen-seite > footer#fuss p.rechts a { margin: 0 5px !important; }
html body.buehnen-seite #bewegung-knopf { font-size: 12.5px !important; padding: 5px 12px !important; min-height: 0 !important; }
@media (max-width: 700px) {
  html body.buehnen-seite > footer#fuss > p:not(.rechts) { display: none !important; }
}

/* Sternenhimmel: Auswahl vorgegebener Woerter statt freiem Eintippen */
.stern-wahl { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 4px 0 6px; padding: 0; list-style: none; }
.stern-wahl button {
  font: inherit; font-size: 15px !important; line-height: 1.2; padding: 8px 13px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.24); background: rgba(255,255,255,.06); color: rgba(255,255,255,.9);
  transition: border-color .2s ease, background .2s ease, color .2s ease; -webkit-tap-highlight-color: transparent;
}
.stern-wahl button:hover, .stern-wahl button:focus-visible { border-color: rgba(240,217,140,.8); outline: none; }
.stern-wahl button[aria-pressed="true"] { border-color: #d4af37; background: rgba(212,175,55,.22); color: #f8ecc0; }
.stern-zahl { font-size: 14px !important; letter-spacing: .06em; color: rgba(240,217,140,.85); margin: 2px 0 4px; text-align: center; }
@media (max-width: 700px) {
  .stern-wahl { gap: 6px; }
  .stern-wahl button { font-size: 14px !important; padding: 7px 11px; }
}

/* Sternenhimmel: Die Tafel steht fest zwischen Kopfzeile und Fusszeile (vorher: mittig per Verschiebung - dabei rutschte
   sie am Handy halb unter die Kopfzeile). Ihr Inhalt laesst sich scrollen; die Knopfreihe ("Ordnen") bleibt immer sichtbar. */
html body.buehnen-seite #tafel {
  top: calc(var(--bk) + 14px) !important; bottom: 122px !important; left: 50% !important; right: auto !important;
  transform: translateX(-50%) !important; height: auto !important; max-height: none !important;
  overflow-y: auto !important; overscroll-behavior: contain; padding-bottom: 0 !important;
}
html body.buehnen-seite #tafel .knopfreihe {
  position: sticky; bottom: 0; z-index: 2; margin-top: 8px; padding: 14px 0 16px;
  background: linear-gradient(to top, rgb(14,14,23) 0%, rgb(14,14,23) 72%, rgba(14,14,23,0) 100%);
}
/* Die eine Methode: die Welten-Karten duerfen innerhalb der Buehne gescrollt werden und enden ueber der Fusszeile */
html body[data-buehne="die-eine-methode"] > #buehne { overflow-y: auto !important; padding-bottom: 128px !important; box-sizing: border-box !important; overscroll-behavior: contain; }

/* Auf einer Buehne stoert die kleine Lese-Leiste ("Seite merken / Link kopieren") - weg damit */
html body.buehnen-seite research-guide { display: none !important; }

/* Die eine Methode: Befund 01.10. - die vier Welten-Karten lagen groesstenteils UNTER dem Bildschirmrand.
   Jetzt: am Rechner alle vier in einer Reihe; der Inhalt endet ueber der Fusszeile und laesst sich notfalls scrollen. */
html body[data-buehne="die-eine-methode"] #ebene {
  top: 6px !important; bottom: 118px !important; height: auto !important;
  overflow-y: auto !important; overscroll-behavior: contain;
}
html body[data-buehne="die-eine-methode"] #kopf { margin-top: auto !important; }
@media (min-width: 900px) {
  html body[data-buehne="die-eine-methode"] #welten {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important; width: min(940px, 92vw) !important; max-width: none !important;
  }
}
/* Handy: Klang-Knopf nicht ueber Ueberschrift oder Tafel legen */
@media (max-width: 700px) {
  html body.buehnen-seite > header.titelblock { top: calc(var(--bk) + 56px) !important; }
  html body.buehnen-seite #tafel { top: calc(var(--bk) + 58px) !important; bottom: 112px !important; }
  html body.buehnen-seite #bewegung-knopf { margin-left: auto !important; margin-right: auto !important; display: block !important; width: auto !important; }
}

html body.buehnen-seite > footer#fuss a,
html body.buehnen-seite > footer#fuss button { pointer-events: auto !important; }
html body.buehnen-seite > div[aria-hidden="true"][style*="rgba(6, 8, 12, 0.94)"] { display: none !important; }
@media (max-width: 700px) {
  html body[data-buehne="die-eine-methode"] > footer#fuss:not(.versteckt) { display: block !important; max-height: none !important; overflow: visible !important; }
  html body[data-buehne="die-eine-methode"] > footer#fuss .direction-motion-toggle { display: inline-flex !important; width: auto !important; margin: 4px auto 0 !important; }
}
@media (max-width: 700px) {
  html body[data-buehne="gedanken-baum"] #kopf { padding-top: 64px !important; }
}
html body[data-buehne="stecker-moment"] .ruheUhr { bottom: calc(var(--rev-fuss-h, 124px) + 8px) !important; z-index: 45 !important; }
@media (max-width: 560px) {
    html body[data-buehne="stecker-moment"] > footer#fuss { padding-top: 52px !important; }
  html body[data-buehne="stecker-moment"] .ruheUhr { left: 50% !important; white-space: nowrap !important; width: max-content !important; bottom: calc(var(--rev-fuss-h, 150px) - 47px) !important; transform: translate(-50%, 6px) !important; }
  html body[data-buehne="stecker-moment"] .ruheUhr.sichtbar { transform: translate(-50%, 0) !important; }
}
@media (min-width: 900px) and (min-height: 640px) {
  html body[data-buehne="sternenhimmel"] #tafel { width: min(820px, calc(100vw - 64px)) !important; }
  html body[data-buehne="sternenhimmel"] #tafel .erklaer,
  html body[data-buehne="sternenhimmel"] #tafel .klein { max-width: 640px; margin-left: auto; margin-right: auto; }
  html body[data-buehne="sternenhimmel"] .stern-wahl { gap: 7px; }
  html body[data-buehne="sternenhimmel"] .stern-wahl button { padding: 6px 12px; }
}
html body[data-buehne="die-eine-methode"] > #lebende-ebene video { filter: saturate(1.35) contrast(1.15) brightness(.8) !important; }
html body[data-buehne="sternenhimmel"] #tafel h1,
html body[data-buehne="sternenhimmel"] #tafel h1 *,
html body[data-buehne="stecker-moment"] .titelblock h1,
html body[data-buehne="stecker-moment"] .titelblock h1 * { text-shadow: none !important; }
html body.buehnen-seite #tafel .knopfreihe { padding-top: 22px !important; row-gap: 6px !important;
  background: linear-gradient(to top, rgb(14,14,23) 0%, rgb(14,14,23) 84%, rgba(14,14,23,0) 100%) !important; }
html body.buehnen-seite #tafel .knopfreihe > .stern-zahl,
html body.buehnen-seite #tafel .knopfreihe > .hinweis { flex: 0 0 100%; margin: 0 !important; text-align: center; }
html body.buehnen-seite #tafel .knopfreihe > .hinweis:empty { display: none !important; }