/* ═══════════════════════════════════════════════════════════════════
Betriebsarten des AusdauerLabs (Stand 11.08.2026)
Jedes Modul laeuft in zwei Betriebsarten:
einzeln — eine Person, ein Tablet. Der gefuehrte Weg Schritt fuer
Schritt, mit allen Eingabefeldern. Das ist der Stand,
den die Module bisher hatten.
klasse — die Lehrkraft am Monitor in der Halle. Kein persoenliches
Eingabefeld, dafuer grosse Uhren, grosse Zahlen und der
direkte Sprung in einzelne Teilbereiche.
„klasse" ist bewusst KEINE vergroesserte Schuelerseite. Wer 12 m vor
dem Monitor steht, braucht andere Inhalte, nicht dieselben in gross.
Die Module liefern deshalb eigene Bloecke mit data-nur="klasse".
Einbinden (im , Pfad je nach Ordnertiefe):
Die Datei bringt KEINE eigenen Farben mit. Sie liest --modul (Flaeche)
und --modul-schrift (Schrift auf Weiss) aus dem Modul; fehlt letztere,
faellt sie auf --modul zurueck. Genauso --kondens/--mono/--tinte.
═══════════════════════════════════════════════════════════════════ */
:root {
--ba-schrift: var(--modul-schrift, var(--modul, #16181a));
--ba-tinte: var(--tinte, #16181a);
--ba-linie: var(--linie, #d8d3c8);
--ba-kondens: var(--kondens, 'Barlow Condensed', 'Arial Narrow', sans-serif);
--ba-mono: var(--mono, 'Plex Mono', Consolas, monospace);
}
/* ───────────── 1. Sichtbarkeit nach Betriebsart ─────────────
Diese Regeln VERSTECKEN nur, sie zeigen nie etwas an. Das ist Absicht:
ein „display:revert !important" wuerde die Phasenmechanik der Module
aushebeln — jede .phase mit data-nur waere dauerhaft sichtbar, auch
ohne .active. Wer etwas einblenden will, nimmt die Regeln des Moduls.
Damit vor dem ersten Skriptlauf nichts Falsches aufblitzt, steht die
Voreinstellung schon im ; die Adresse
(?betrieb=klasse) uebersteuert sie im Kopf der Seite. */
html[data-betrieb="klasse"] [data-nur="einzeln"] { display: none !important; }
html[data-betrieb="einzeln"] [data-nur="klasse"] { display: none !important; }
/* ───────────── 2. Der Umschalter ───────────── */
.ba-wahl { border: 3px solid var(--ba-tinte); background: #fff; margin: 0 0 26px }
.ba-wahl-kopf {
display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
padding: 12px 16px; border-bottom: 3px solid var(--ba-tinte);
background: var(--ba-tinte); color: #fff;
}
.ba-wahl-kopf b {
font-family: var(--ba-kondens); font-weight: 700; font-size: 19px;
letter-spacing: .12em; text-transform: uppercase;
}
.ba-wahl-kopf span { font-size: 15px; color: rgba(255,255,255,.78) }
.ba-knoepfe { display: grid; grid-template-columns: 1fr 1fr }
.ba-knopf {
display: block; width: 100%; text-align: left; cursor: pointer;
min-height: 96px; padding: 16px 18px; background: #fff; color: var(--ba-tinte);
border: 0; border-right: 3px solid var(--ba-tinte);
font-family: inherit; font-size: 15px; line-height: 1.45;
-webkit-tap-highlight-color: transparent;
}
.ba-knopf:last-child { border-right: 0 }
.ba-knopf b {
display: block; margin-bottom: 4px; font-family: var(--ba-kondens);
font-weight: 700; font-size: 21px; letter-spacing: .06em; text-transform: uppercase;
}
.ba-knopf .ba-sub { color: var(--grau, #6f6b64) }
.ba-knopf:hover { background: var(--flaeche, #fafafa) }
.ba-knopf[aria-pressed="true"] { background: var(--modul, #16181a); color: #fff }
.ba-knopf[aria-pressed="true"] .ba-sub { color: rgba(255,255,255,.85) }
/* Helle Modulfarben (Modul 03 ist Neongelb): weisse Schrift kaeme dort auf
1,9:1. Die Kennzeichnung setzt betriebsart.js, wenn --modul-schrift da ist. */
html[data-modulfarbe="hell"] .ba-knopf[aria-pressed="true"] { color: var(--ba-tinte) }
html[data-modulfarbe="hell"] .ba-knopf[aria-pressed="true"] .ba-sub { color: rgba(0,0,0,.7) }
.ba-wahl-fuss {
display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
padding: 12px 16px; border-top: 3px solid var(--ba-tinte);
}
/* Form „schalter": nur Ton und Vollbild, kein Kopf darüber — dann braucht
der Fuß auch keine Trennlinie nach oben. */
.ba-wahl > .ba-wahl-fuss:first-child { border-top: 0 }
/* Form „kompakt": zwei knappe Knöpfe, für die Leiste im laufenden Ablauf. */
.ba-wahl-kompakt .ba-knopf { min-height: 56px; padding: 10px 16px; text-align: center }
.ba-wahl-kompakt .ba-knopf b { margin: 0; font-size: 18px }
.ba-wahl-kompakt .ba-wahl-kopf { padding: 8px 16px }
.ba-wahl-kompakt .ba-wahl-kopf b { font-size: 15px }
.ba-schalter {
min-height: 48px; padding: 0 16px; cursor: pointer; background: #fff;
color: var(--ba-tinte); border: 2px solid var(--ba-tinte);
font-family: var(--ba-kondens); font-weight: 700; font-size: 15px;
letter-spacing: .08em; text-transform: uppercase;
}
.ba-schalter:hover { background: var(--ba-tinte); color: #fff }
.ba-schalter[aria-pressed="false"] { border-color: var(--ba-linie); color: var(--grau, #6f6b64) }
.ba-wahl-fuss .ba-hinweis { flex: 1 1 220px; margin: 0; font-size: 14px; color: var(--grau, #6f6b64) }
/* ───────────── 3. Sprungleiste „Direkt zu" ─────────────
Die Lehrkraft braucht oft nur einen Teilbereich — die Uhr, das Diagramm,
die Karte. Diese Leiste springt ohne Umweg dorthin. */
.ba-sprung { border: 3px solid var(--ba-tinte); background: #fff; margin: 0 0 26px }
.ba-sprung-kopf {
padding: 10px 16px; border-bottom: 2px solid var(--ba-linie);
font-family: var(--ba-kondens); font-weight: 700; font-size: 15px;
letter-spacing: .12em; text-transform: uppercase; color: var(--grau, #6f6b64);
}
.ba-sprung-innen { display: flex; flex-wrap: wrap; gap: 0 }
.ba-sprung-innen > button, .ba-sprung-innen > a {
flex: 1 1 190px; min-height: 62px; padding: 10px 16px; cursor: pointer;
background: #fff; color: var(--ba-tinte); text-decoration: none;
border: 0; border-right: 2px solid var(--ba-linie); border-top: 0;
display: flex; align-items: center; gap: 10px;
font-family: var(--ba-kondens); font-weight: 700; font-size: 18px;
letter-spacing: .05em; text-transform: uppercase;
-webkit-tap-highlight-color: transparent;
}
.ba-sprung-innen > :last-child { border-right: 0 }
.ba-sprung-innen > :hover { background: var(--modul, #16181a); color: #fff }
html[data-modulfarbe="hell"] .ba-sprung-innen > :hover { color: var(--ba-tinte) }
.ba-sprung-innen .ba-ziffer {
flex: 0 0 auto; min-width: 30px; font-family: var(--ba-mono); font-size: 15px;
color: var(--ba-schrift);
}
.ba-sprung-innen > :hover .ba-ziffer { color: inherit }
/* ───────────── 4. Monitorblock ─────────────
Grossflaechige Kacheln fuer die Wand. Zahlen in Konturgroesse, damit sie
aus der Hallenentfernung lesbar bleiben. */
.ba-monitor { border: 3px solid var(--ba-tinte); background: #fff; margin: 0 0 26px }
.ba-monitor-kopf {
display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
padding: 14px 20px; background: var(--ba-tinte); color: #fff;
}
.ba-monitor-kopf h2 {
margin: 0; font-family: var(--ba-kondens); font-weight: 700;
font-size: clamp(24px, 3.4vw, 34px); letter-spacing: .06em; text-transform: uppercase;
}
.ba-monitor-kopf .ba-marke {
font-family: var(--ba-mono); font-size: 15px; color: rgba(255,255,255,.8);
}
.ba-monitor-innen { padding: 22px 20px }
.ba-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px,100%), 1fr)); gap: 0 }
.ba-kachel {
padding: 20px; border-right: 2px solid var(--ba-linie); border-bottom: 2px solid var(--ba-linie);
}
.ba-kachel dt {
margin: 0 0 6px; font-family: var(--ba-kondens); font-size: 15px;
letter-spacing: .12em; text-transform: uppercase; color: var(--grau, #6f6b64);
}
.ba-kachel dd {
margin: 0; font-family: var(--ba-mono); font-weight: 600;
font-size: clamp(38px, 6vw, 64px); line-height: 1; color: var(--ba-schrift);
}
.ba-kachel .ba-einheit { font-size: .42em; color: var(--grau, #6f6b64) }
/* Grosse Anweisung an die Klasse */
.ba-ansage {
border-left: 10px solid var(--modul, #16181a); background: var(--flaeche, #fafafa);
padding: 18px 22px; margin: 0 0 20px;
}
.ba-ansage p { margin: 0; font-size: clamp(19px, 2.4vw, 26px); line-height: 1.4 }
.ba-ansage strong { font-family: var(--ba-kondens); letter-spacing: .03em }
/* ───────────── 5. Hallenuhr (Vollbild) ─────────────
Uebernommen aus Modul 1, wo sie erprobt ist: Vollbild, Ampelfarben,
Konturziffer. Sie laeuft in BEIDEN Betriebsarten — am Tablet wie am
Monitor ist eine grosse Zahl die richtige Zahl. */
.ba-uhr {
position: fixed; inset: 0; z-index: 900; display: none;
flex-direction: column; align-items: center; justify-content: center;
gap: 10px; padding: 24px; text-align: center; color: #fff;
background: #16181a;
}
.ba-uhr.ba-sichtbar { display: flex }
.ba-uhr .ba-uhr-marke {
font-family: var(--ba-kondens); font-weight: 700;
font-size: clamp(26px, 6vw, 46px); letter-spacing: .1em; text-transform: uppercase;
}
.ba-uhr .ba-uhr-zahl {
font-family: var(--ba-mono); font-weight: 600; line-height: .92;
font-size: clamp(96px, 30vw, 300px); font-variant-numeric: tabular-nums;
}
.ba-uhr .ba-uhr-hinweis {
max-width: 30ch; font-size: clamp(16px, 3.4vw, 26px); line-height: 1.35;
color: rgba(255,255,255,.9);
}
.ba-uhr .ba-uhr-zusatz {
font-family: var(--ba-mono); font-size: clamp(15px, 2.6vw, 22px);
color: rgba(255,255,255,.72);
}
.ba-uhr-knoepfe { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 26px }
.ba-uhr-knopf {
min-height: 62px; padding: 0 28px; cursor: pointer; background: transparent; color: #fff;
border: 3px solid rgba(255,255,255,.75);
font-family: var(--ba-kondens); font-weight: 700; font-size: 20px;
letter-spacing: .08em; text-transform: uppercase;
}
.ba-uhr-knopf:hover { background: #fff; color: #16181a }
/* Balken am unteren Rand — zeigt den Rest der Zeit ohne Zahlenlesen */
.ba-uhr-balken { position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background: rgba(255,255,255,.22) }
.ba-uhr-balken i { display: block; height: 100%; width: 100%; background: #fff }
/* ───────────── 6. Tablet und Handy ───────────── */
@media (max-width: 640px) {
.ba-knoepfe { grid-template-columns: 1fr }
.ba-knopf { border-right: 0; border-bottom: 3px solid var(--ba-tinte); min-height: 84px }
.ba-knopf:last-child { border-bottom: 0 }
.ba-sprung-innen > button, .ba-sprung-innen > a { flex: 1 1 100%; border-right: 0; border-bottom: 2px solid var(--ba-linie) }
.ba-sprung-innen > :last-child { border-bottom: 0 }
.ba-kachel { border-right: 0 }
}
/* Wer Bewegung reduziert haben will, bekommt keine Balkenanimation. */
@media (prefers-reduced-motion: reduce) {
.ba-uhr-balken i { transition: none !important }
}