/* Entrance is independent from the reading stage: the scene shows during reveal, copy waits for landing. */
html:is([data-intro="loading"], [data-intro="ready"], [data-intro="preparing"], [data-intro="entering"]) :is(.kopf, #inhalt, .fuss, .schilder, .dreh-hinweis) {
  visibility: hidden; opacity: 0; pointer-events: none;
}
/* The start-station hint has its own high-specificity visibility rule. */
html:is([data-intro="loading"], [data-intro="ready"], [data-intro="preparing"], [data-intro="entering"]) .dreh-hinweis { display: none !important; }
#b-sound { min-width: 7.5em; justify-content: flex-start; }
.schalter { gap: 0 15px; }
.schalter .aktion { font-size: 11px; letter-spacing: .08em; }
#b-bewegung { min-width: 11.6em; }
/* Programmatically focused reading headings are not controls. Keep rings on actual buttons/links. */
.feld :is(h1, h2)[tabindex="-1"]:focus { outline: none; box-shadow: none; }
.feld ::selection { background: #4a4f59; color: #fff; text-shadow: none; }
@media (max-width: 1100px) and (min-width: 701px) {
 .kopf { grid-template-columns: auto 1fr; grid-template-rows: auto auto; }
 .stationen { grid-column: 1 / -1; grid-row: 2; }
 .schalter { justify-content: flex-end; }
}
@media (max-width: 700px) {
 .schalter { gap: 0 10px; }
 .schalter .aktion { font-size: 10px; letter-spacing: .02em; }
 #b-sound, #b-bewegung { min-width: 0; }
 .kopf { padding-left: 9px; padding-right: 9px; }
 .logo img { width: 91px; }
}
@media (max-width: 370px) {
 .logo img { width: 72px; }
 .schalter { gap: 0 7px; }
 .schalter .aktion { font-size: 9px; }
}
/* V19.14 (Owner 24.10.: große Monitore, P43): ab 1920 px wächst der Kopf im Verhältnis von 1440×900 mit (--gu = 1 px bei 1440×900,
   site.css), Gestaltung unverändert – nur Maße. max(): nie kleiner als bisher (breite, niedrige Fenster). */
@media (min-width: 1920px) and (min-height: 901px) {
 .kopf { gap: 0 max(40px, calc(35 * var(--gu)));   /* Lage (oben/links 10 px) bleibt wie bisher */
  padding: max(6px, calc(6 * var(--gu))) max(28px, calc(28 * var(--gu))); }
 .logo img { width: max(156px, calc(151 * var(--gu))); }
 .schalter { gap: 0 max(15px, calc(15 * var(--gu))); }
 .schalter .aktion { font-size: max(11px, calc(11 * var(--gu))); }
 #b-settings { width: max(44px, calc(44 * var(--gu))); height: max(44px, calc(44 * var(--gu))); padding: max(10px, calc(10 * var(--gu))); }
 #b-settings .control-icon { width: max(24px, calc(24 * var(--gu))); height: max(24px, calc(24 * var(--gu))); }
 #a-sprache { min-height: max(44px, calc(44 * var(--gu))); }
 .stationen a.aktion { min-height: max(48px, calc(48 * var(--gu))); padding: max(25px, calc(25 * var(--gu))) 2px max(6px, calc(6 * var(--gu)));
  font-size: max(11.5px, calc(11.5 * var(--gu))); }
 .stationen a.aktion::before { top: max(10px, calc(10 * var(--gu))); height: max(11px, calc(11 * var(--gu))); }
 .stationen a.aktion[aria-current="step"]::before { width: max(3px, calc(3 * var(--gu))); }
 .stationen .bahn { top: max(15px, calc(15 * var(--gu))); }
}