/* © 2026 Hans Stellmacher. WebinarButler. Alle Rechte vorbehalten. */
/* WebinarButler, gemeinsames Stylesheet */
:root {
  /* Markenfarben der Palette vom 2026-08-17. Sie stehen hier in :root und
     gelten damit fuer BEIDE Bereiche: Besucherseiten und Verwaltung. Bis zum
     2026-08-23 trug die Verwaltung noch das alte Orange #f07d00, das war ein
     Zwischenstand und kein Entwurf. */
  --navy: #12182B;
  --orange: #E8A33D;
  --orange-hover: #D89128;
  --light-bg: #F4F6F9;
  --text: #12182B;
  --text-muted: #667085;
  --radius: 8px;

  /* Zwei Farben, die sich aus der Markenfarbe ERGEBEN und deshalb mit ihr
     zusammen wechseln muessen. Sie einzeln zu setzen war der Fehler, der die
     erste Fassung so muehsam gemacht hat:

     --auf-marke   Schrift, die AUF der Markenflaeche steht (Knopf, aktiver
                   Reiter). Auf Amber muss sie dunkel sein, Weiss kaeme dort
                   nur auf 2,16:1. Auf Petrol ist es genau umgekehrt.
     --marke-text  die Marke ALS Schrift auf hellem Grund (Hinweise, Pfeile,
                   Zeigen-Zustaende). Amber selbst schafft dort nur 2,16:1,
                   deshalb der dunklere Ton mit 5,00:1. */
  --auf-marke: #12182B;
  --marke-text: #9C6300;
  /* Getoente Flaeche in der Markenfarbe, fuer Kaesten, die zur Marke gehoeren.
     NICHT fuer Warnungen: Die sind warm, weil sie Warnung bedeuten, und bleiben
     es auch in einer blauen Farbwelt. */
  --marke-hell: #FFF4E0;

  /* Bedeutungsfarben. Vorher standen dieselben Werte an ueber dreissig Stellen
     wortwoertlich in beiden Stildateien, und die Selbstpruefung benutzte fuer
     dieselbe Bedeutung sogar leicht andere Werte (#b3261e statt #c0392b,
     #1e7a3c statt #1e7e45). Das war nicht als Unterscheidung gemeint, es war
     gewachsen. Jetzt gibt es je Bedeutung genau einen Wert mit Namen. */
  /* Bedeutungsfarben in der abgenommenen Fassung der Palette. Sie gelten seit
     dem 2026-08-23 fuer BEIDE Bereiche; bis dahin trug die Verwaltung noch die
     gewachsenen Werte #1e7e45 und #c0392b, sodass dieselbe Erfolgsmeldung in
     der Verwaltung ein anderes Gruen hatte als auf der Anmeldeseite.
     Gemessen: Gruen 5,02:1 auf Weiss und 4,59:1 auf der eigenen Flaeche,
     Rot 5,03:1 und 4,51:1. */
  --rot: #C93B3D;          /* Fehler, Loeschen, Abgemeldet */
  --rot-hell: #FFEFEE;     /* Flaeche hinter einer Fehlermeldung */
  --gruen: #008130;        /* Erfolg, aktiv, versendet */
  --gruen-hell: #E0FCE3;   /* Flaeche hinter einer Erfolgsmeldung */
  --wb-b: pvz3yn7nua;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Inter', Arial, sans-serif;
  background: var(--light-bg);
  color: var(--text);
  line-height: 1.6;
}

.webinar-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.webinar-box {
  background: #fff;
  border-radius: var(--radius);
  padding: 40px 36px;
  max-width: 480px;
  width: 100%;
  text-align: center;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
}
.webinar-box h1 { font-size: 24px; margin-bottom: 16px; color: var(--navy); }
/* Anmeldeseite: breiter (600 statt 480 px), damit die lange Headline besser liest */
.webinar-box-anmeldung { max-width: 520px; }

/* iFrame-Einbettung (…?embed=1): Karte, Zentrierung und Hintergrund entfernen,
   damit sich das Formular nahtlos in die einbettende Seite (z. B. eine mit einem
   Pagebuilder erstellte Landingpage) fügt */
body.embed { background: transparent; }
body.embed .webinar-wrapper { min-height: 0; padding: 0; display: block; }
body.embed .webinar-box { max-width: 520px; margin: 0 auto; background: transparent; box-shadow: none; padding: 4px 0; }
.untertitel { color: var(--text-muted); margin-bottom: 24px; }
/* Hinweisbalken, wenn die Seite nur für Admin/Vorschau sichtbar ist.
   Bleibt beim Scrollen oben kleben: Der Inhaltsbereich darunter ist einen ganzen
   Bildschirm hoch (min-height:100vh), sonst würde der Balken schon beim kleinsten
   Scrollen aus dem Blick rutschen. */
.vorschau-balken {
  position: sticky; top: 0; z-index: 100;
  background: var(--rot); color: #fff; text-align: center; padding: 10px 16px;
  font-size: 13px; font-weight: 600; line-height: 1.45;
}
/* Der Balken zählt zur Seitenhöhe, der Bereich darunter wird entsprechend
   kürzer, damit keine unnötige Bildlaufleiste entsteht. */
.vorschau-balken ~ .webinar-wrapper { min-height: calc(100vh - 42px); }
body.embed .vorschau-balken { position: static; border-radius: var(--radius); margin-bottom: 12px; }

/* Anmeldeseite: Webinar-Untertitel direkt unter der Überschrift (Nutzenversprechen) */
.anmelde-untertitel { color: var(--navy); font-weight: 600; font-size: 17px; line-height: 1.4; margin: -6px 0 16px; }

/* Anmeldeseite: Dringlichkeit + Social Proof direkt über dem Formular */
.dringlichkeit { color: var(--orange); font-weight: 700; margin: -14px 0 4px; }
/* Social Proof: gleiche Schrift wie die Formular-Beschriftungen, in Orange */
.social-proof { color: var(--orange); font-weight: 600; font-size: 14px; margin-bottom: 18px; }
.fehler { color: var(--rot); margin-bottom: 16px; }
.hinweis-box { background: var(--gruen-hell); color: var(--gruen); padding: 12px 16px; border-radius: var(--radius); margin-bottom: 20px; text-align: center; }

.anmelde-formular { display: flex; flex-direction: column; gap: 14px; text-align: left; }
.anmelde-formular label { font-weight: 600; font-size: 14px; }
.anmelde-formular input,
.anmelde-formular select {
  padding: 11px 14px; border: 1px solid #ccc; border-radius: var(--radius); font-size: 15px;
  background: #fff; color: var(--text); width: 100%;
}
/* Der Wechsel-Eintrag in der Terminauswahl soll sich abheben. Bei einem
   option-Element sind die Mittel begrenzt, deshalb drei zugleich: Fett und
   Markenfarbe setzen Firefox und Chrome am Rechner tatsaechlich um, die
   Auswahl des Betriebssystems auf dem Handy ignoriert sie. Dort wirken
   stattdessen die Trennlinie darueber, das Zeichen davor und die
   Grossschreibung, und die wirken ueberall. */
#termin_wahl .wechsel { font-weight: 700; color: var(--orange); }
/* Rueckmeldung nach dem Wechsel. Der negative Abstand holt sie dicht an das
   Auswahlfeld heran, damit sie erkennbar dazugehoert. */
.termin-hinweis { margin-top: -8px; font-size: 14px; color: var(--orange); }
#termin_wahl option:disabled { color: #a8aeb8; }

.anmelde-formular input:focus,
.anmelde-formular select:focus { outline: none; border-color: var(--orange); }

/* Terminauswahl: Solange kein Termin gewählt ist (:invalid, weil Pflichtfeld mit
   leerem Platzhalter), zeigt das geschlossene Feld den orange-fetten Platzhalter
   (= nächster Termin). Sobald ein echter Termin gewählt ist, erscheint er normal. */
#termin_wahl:invalid { color: var(--orange); font-weight: 700; }
#termin_wahl option { color: var(--text); font-weight: 400; }
#termin_wahl option[value=""] { color: var(--orange); font-weight: 700; }
.einwilligung-hinweis { font-size: 12px; line-height: 1.5; color: var(--text-muted); margin: 2px 0 4px; }
/* Einwilligung: Kästchen und Text nebeneinander, linksbündig. Das Kästchen ist
   bewusst gut greifbar, es ist eine bewusste Handlung und kein Beiwerk. */
.einwilligung-kasten { display: flex; align-items: flex-start; gap: 10px; text-align: left; margin: 2px 0 4px; cursor: pointer; }
.einwilligung-kasten input[type="checkbox"] { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--orange); }

/* Honeypot: für Menschen unsichtbar (fängt automatisierte Bots ab) */
.hp-feld { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }


.btn {
  display: inline-block; background: var(--orange); color: var(--auf-marke); border: none;
  padding: 13px 20px; border-radius: var(--radius); font-weight: 700; font-size: 15px; cursor: pointer; text-decoration: none;
}
.btn:hover { background: var(--orange-hover); }
.btn-outline { background: transparent; border: 2px solid #fff; color: #fff; }
.btn-klein { padding: 6px 12px; font-size: 13px; background: var(--orange); color: var(--auf-marke); border: none; border-radius: 6px; cursor: pointer; text-decoration: none; }

/* Countdown */
/* Warte-/Countdown-Seite: breiter (600 statt 480 px), damit die "Gleich lernst Du"-Bullets Luft haben */
.webinar-box.countdown-box { max-width: 600px; }
.countdown-box .countdown { font-size: 44px; font-weight: 800; color: var(--navy); margin: 20px 0; font-variant-numeric: tabular-nums; }
.hinweis { color: var(--text-muted); font-size: 13px; }

/* Warteraum: "Gleich lernst Du"-Vorschau unter dem Countdown */
.warteraum-info { margin-top: 24px; padding-top: 18px; border-top: 1px solid #eee; text-align: left; }
.warteraum-titel { font-weight: 700; color: var(--navy); margin-bottom: 8px; }
.warteraum-info ul { padding-left: 22px; margin-bottom: 14px; }
.warteraum-info li { margin-bottom: 6px; }
.warteraum-tipp { color: var(--text-muted); font-size: 13px; }

/* Video */
.video-box { width: 100%; padding: 24px; }
.video-wrapper { position: relative; padding-top: 56.25%; background: #000; border-radius: var(--radius); overflow: hidden; }
.video-wrapper video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; object-fit: contain; background: #000; }

/* Unsichtbare Sperrschicht über dem Video: verhindert Klicks auf Pause,
   Zeitleiste, Geschwindigkeit usw., das Video läuft ungestört automatisch durch. */
.video-sperre { position: absolute; inset: 0; z-index: 5; background: transparent; }

/* Start-Button: einmaliger Klick erlaubt dem Browser, das Video mit Ton
   abzuspielen (Autoplay mit Ton ist ohne Nutzerinteraktion nicht erlaubt). */
.video-start {
  position: absolute; inset: 0; z-index: 6;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  width: 100%; height: 100%;
  background: rgba(11,31,53,0.85);
  color: #fff; border: none; cursor: pointer;
  font-family: 'Inter', Arial, sans-serif; font-size: 16px; font-weight: 600;
  text-align: center; padding: 24px;
}
.video-start:hover { background: rgba(11,31,53,0.92); }
.video-start-icon {
  display: flex; align-items: center; justify-content: center;
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--orange); color: var(--auf-marke); font-size: 28px;
}

/* Vollbild-Button: erscheint erst, nachdem das Video gestartet wurde */
.video-fullscreen {
  position: absolute; right: 14px; bottom: 14px; z-index: 7;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(11,31,53,0.75); color: #fff; border: none; cursor: pointer;
  font-size: 20px;
}
.video-fullscreen:hover { background: rgba(11,31,53,0.9); }

/* Lautstärkeregelung: unten links, erscheint (wie der Vollbild-Button) erst nach Start */
.video-volume {
  position: absolute; left: 14px; bottom: 14px; z-index: 7;
  display: flex; align-items: center; gap: 8px;
  background: rgba(11,31,53,0.75); border-radius: 22px; padding: 6px 12px 6px 8px;
}
.video-volume-btn {
  background: none; border: none; color: #fff; cursor: pointer;
  font-size: 18px; line-height: 1; padding: 0; width: 24px; height: 24px;
}
.video-volume-slider { width: 90px; cursor: pointer; accent-color: var(--orange); }

/* Video-Ende: CTA-Overlay über dem Schlussbild. Ohne Endbild bleibt das letzte
   Videobild sichtbar (CTA-Kasten liegt unten); ein optionales Endbild
   (ENDBILD_DATEI) füllt die gesamte Fläche. */
.video-ende {
  position: absolute; inset: 0; z-index: 8;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 24px;
}
.video-ende-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-ende-inhalt {
  position: relative;
  background: rgba(11,31,53,0.88); border-radius: var(--radius);
  padding: 22px 26px; text-align: center; max-width: 560px;
}
.video-ende-text { color: #fff; font-size: 17px; font-weight: 600; margin-bottom: 14px; }
@media (max-width: 600px) {
  .video-ende { padding: 10px; }
  .video-ende-inhalt { padding: 14px 16px; }
  .video-ende-text { font-size: 15px; margin-bottom: 10px; }
}

/* Video-Steuerung automatisch aus-/einblenden: standardmäßig unsichtbar und nicht
   bedienbar; erst sichtbar, wenn der Rahmen die Klasse .controls-sichtbar trägt
   (das setzt/entfernt das JavaScript in raum.php bei Mausbewegung/Tippen, auch im
   Vollbild, mit zeitverzögertem Ausblenden). */
.video-fullscreen, .video-volume {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.video-wrapper.controls-sichtbar .video-fullscreen,
.video-wrapper.controls-sichtbar .video-volume {
  opacity: 1;
  pointer-events: auto;
}

/* Im Vollbild braucht es den Seitenverhältnis-Trick (padding-top) nicht mehr,
   der Rahmen füllt ohnehin den ganzen Bildschirm. */
.video-wrapper:fullscreen,
.video-wrapper:-webkit-full-screen {
  padding-top: 0;
  width: 100vw;
  height: 100vh;
}

.raum-titel {
  color: var(--navy);
  font-size: clamp(40px, 5vw, 50px);
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  margin: 24px 24px 0;
}

/* Halb so groß wie .raum-titel, bei jeder Fensterbreite proportional dazu */
.raum-untertitel {
  color: var(--text-muted);
  font-size: clamp(20px, 2.5vw, 25px);
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  margin: 8px 24px 0;
}

/* Mobil: Webinarraum-Titel kleiner, näher an der Subheadline (Breite bleibt) */
@media (max-width: 600px) {
  .raum-titel { font-size: 28px; }
}

/* Call-to-Action im Webinarraum */
.cta-box {
  margin-top: 20px;
  padding: 28px;
  background: #fff;
  border-radius: var(--radius);
  text-align: center;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
  animation: cta-einblenden 0.5s ease;
}
.cta-text { font-size: 17px; font-weight: 600; color: var(--navy); margin-bottom: 16px; }

@keyframes cta-einblenden {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Admin */
.admin-wrapper { max-width: 1000px; margin: 0 auto; padding: 32px 24px; }
.admin-header { display: flex; justify-content: space-between; align-items: center; background: var(--navy); color: #fff; padding: 20px 28px; border-radius: var(--radius); margin-bottom: 24px; }
.admin-header h1 { font-size: 20px; }

/* Innere Reiter einer Admin-Seite (E-Mail-Editor, Einstellungen). Nicht gewählte
   Tafeln werden nur ausgeblendet, nicht entfernt: So wandert beim Speichern
   weiterhin ALLES mit, auch was gerade nicht zu sehen ist. */
.reiter-leiste { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:20px; border-bottom:2px solid #dfe3e8; }
.reiter { display:flex; align-items:center; gap:8px; padding:11px 18px; font-size:14px; font-weight:600;
    color:var(--text-muted); background:transparent; border:none; border-bottom:3px solid transparent;
    margin-bottom:-2px; cursor:pointer; font-family:inherit; }
.reiter:hover { color:var(--navy); }
.reiter.aktiv { color:var(--navy); border-bottom-color:var(--orange); }
.reiter-zahl { display:inline-block; min-width:20px; padding:1px 6px; border-radius:10px; background:#dfe3e8;
    color:var(--navy);   /* auf der grauen Flaeche: 13,1:1 statt 3,86:1 */ font-size:12px; font-weight:700; text-align:center; }
.reiter.aktiv .reiter-zahl { background:var(--orange); color:var(--auf-marke); }
.reiter-tafel { display:none; }
.reiter-tafel.aktiv { display:block; }

/* Reiterleiste im Admin-Kopf (includes/admin-kopf.php). Alle Bereiche stehen
   immer da, der eigene ist gefüllt statt umrandet. Etwas kleiner als die
   üblichen Knöpfe, sonst passen sieben Stück nicht neben die Überschrift. */
.admin-reiter { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; align-items: center; }
/* Mit sieben Reitern wird es eng: etwas weniger Innenabstand, damit die Leiste
   auch bei 1000 Pixeln Rahmenbreite auf einer Zeile bleibt. */
.admin-reiter .btn { padding: 8px 12px; font-size: 14px; }
/* Gleiche Rahmenbreite wie .btn-outline, sonst springen die Knöpfe in der Höhe. */
.admin-reiter .reiter-aktiv { background: var(--orange); border: 2px solid var(--orange); color: var(--auf-marke); }
.admin-reiter .reiter-aktiv:hover { background: var(--orange); }
/* Logout ist keine Seite, sondern eine Handlung. Deshalb kleiner, leiser und
   durch einen deutlichen Abstand von den Reitern getrennt: ein schmaler Knopf
   ohne Rahmengewicht, der nicht mehr wie ein weiterer Bereich aussieht. */
.admin-reiter .reiter-logout {
  margin-left: 18px; padding: 5px 11px; font-size: 12px; font-weight: 600;
  border: 1px solid rgba(255,255,255,0.4); color: rgba(255,255,255,0.85);
  border-radius: 6px;
}
.admin-reiter .reiter-logout:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,0.1); }

/* Nur die Teilnehmerseite darf breiter sein: Dort steht die Übersicht aller
   zwanzig geplanten E-Mails je Person, die den Platz wirklich braucht. */
.admin-wrapper.breit { max-width: 1280px; }
.admin-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 24px; margin-bottom: 24px; }
.admin-card { background: #fff; border-radius: var(--radius); padding: 24px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
.admin-card h2 { font-size: 16px; margin-bottom: 16px; color: var(--navy); }
.termin-formular { display: flex; flex-direction: column; gap: 12px; }
.termin-formular label { font-size: 13px; font-weight: 600; }
.termin-formular input { padding: 9px 12px; border: 1px solid #ccc; border-radius: 6px; }
.admin-tabelle { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-tabelle th, .admin-tabelle td { text-align: left; padding: 9px 10px; border-bottom: 1px solid #eee; }
.admin-tabelle th { color: var(--text-muted); font-size: 12px; text-transform: uppercase; }

/* Funnel-Dashboard: alle fünf Kennzahlen nebeneinander in EINER Reihe.
   Schrift und Innenabstände sind darauf abgestimmt, damit auch längere
   Beschriftungen wie „Bestätigt / DOI · 100 %" ohne Umbruch hineinpassen. */
.funnel-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 12px; }
.funnel-stat { background: var(--light-bg); border-radius: var(--radius); padding: 14px 8px; text-align: center; }
.funnel-zahl { display: block; font-size: 24px; font-weight: 800; color: var(--navy); line-height: 1.1; }
.funnel-label { display: block; font-size: 11px; line-height: 1.35; color: var(--text-muted); margin-top: 6px; }
.reset-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
/* Handlungen am Ende einer Tabellenzeile, nebeneinander statt untereinander. */
.zeilen-aktionen { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

@media (max-width: 760px) {
  .admin-grid { grid-template-columns: 1fr; }
  .funnel-grid { grid-template-columns: 1fr 1fr; }
  /* Schmaler Bildschirm: Überschrift über die Reiter, statt beides zu quetschen. */
  .admin-header { flex-direction: column; align-items: flex-start; gap: 14px; }
  .admin-reiter { justify-content: flex-start; }
  .admin-reiter .reiter-logout { margin-left: 0; }
}

/* Smartphone: Video größer darstellen, nur noch ein schmaler Rand zum
   Bildschirmrand (statt der üblichen 24px+24px Innenabstände). */
@media (max-width: 600px) {
  .webinar-wrapper { padding: 10px; }
  .video-box { padding: 10px 0; }
}

/* ============================================================
   FOOTER + RECHTSTEXTE (Impressum / Datenschutz)
============================================================ */
.seiten-footer {
  text-align: center;
  padding: 24px 16px;
  font-size: 13px;
  color: var(--text-muted);
}
.seiten-footer a { color: var(--text-muted); text-decoration: underline; }
.seiten-footer a:hover { color: var(--orange); }
.seiten-footer span { margin: 0 8px; color: #bbb; }

.rechtstext {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 24px;
  background: #fff;
}
.rechtstext h1 { font-size: 28px; color: var(--navy); margin-bottom: 24px; }
.rechtstext h2 { font-size: 18px; color: var(--navy); margin: 28px 0 10px; }
.rechtstext p, .rechtstext li { font-size: 15px; color: var(--text); line-height: 1.7; margin-bottom: 10px; }
.rechtstext ul { padding-left: 22px; margin-bottom: 10px; }
.rechtstext a { color: var(--orange); }

/* ---- Signale im Warteraum und beim Start ----
   Ohne sie verpassen Teilnehmer den Beginn, weil sie in einem anderen Tab
   arbeiten oder gar nicht am Rechner sitzen. */
.erinnerung { margin-top: 22px; }
/* Aussehen kommt aus .hinweis, hier steht nur der Abstand zum Knopf.
   Zweimal dieselbe Groesse und Farbe hinzuschreiben waere eine Dopplung,
   die beim naechsten Aendern auseinanderlaeuft. */
.erinnern-frage { margin-bottom: 12px; }

/* Bewusst zurueckhaltend: Der Knopf ist ein Angebot, nicht der Hauptweg der
   Seite. Ein feiner Rand in der Markenfarbe zeigt, dass er anfassbar ist; die
   Schrift bleibt dunkel und damit gut lesbar, denn Orange kommt auf Weiss nur
   auf einen Kontrast von 2.75. Beim Zeigen faerbt sich nur der Grund leicht,
   statt den Knopf ganz auszufuellen. */
.erinnern-knopf {
  background: #fff; border: 1px solid var(--orange); color: var(--text);
  font-family: inherit; font-size: 14px;
  padding: 8px 16px; border-radius: 20px; cursor: pointer;
}
.erinnern-knopf:hover:enabled { background: #fff8f0; }

/* Ist die Erinnerung an, wird der Knopf gruen: Das ist die Farbe fuer
   Erledigtes und sagt ohne Worte, dass es geklappt hat. */
.erinnern-knopf:disabled {
  border-color: var(--gruen); color: var(--gruen); cursor: default;
}
.erinnern-status { margin-top: 10px; font-size: 13px; color: var(--text-muted); }

/* Die Startmeldung erscheint bei Sekunde null, auch fuer den, der die ganze
   Zeit zugeschaut hat. */
.start-meldung {
  margin-top: 18px; padding: 12px 16px; border-radius: var(--radius);
  background: var(--orange); color: var(--auf-marke); font-size: 16px;
}

/* Hinweis im Raum, dass das Webinar laeuft. */
.laeuft-hinweis {
  margin: 0 auto 14px; padding: 12px 16px; border-radius: var(--radius);
  background: var(--gruen-hell); color: var(--gruen); font-size: 15px;
  text-align: center;
}

/* ============================================================
   ABSTAENDE UND AUFLAGEN, DIE FRUEHER IM HTML STANDEN (2026-08-24)
   ============================================================
   Bis zu diesem Tag trugen rund vierzig Stellen ihren Abstand als
   style="margin:..." direkt am Element. Das war der letzte Rest der alten
   Bauweise, in der jede Seite ihr Aussehen selbst mitbrachte. Zu sehen war
   davon nichts, aber die Gestaltung sass an vierzig Stellen statt an einer,
   und genau das macht das Redesign teuer.

   Die Klassen heissen nach dem Abstand, den sie setzen, nicht nach einer
   Pixelzahl und nicht nach der Seite, auf der sie zufaellig zuerst gebraucht
   wurden. Die Werte davor streuten ohne Absicht (4, 10, 12, 14, 16, 18 und 24
   Pixel fuer immer dieselben drei Faelle); eingekocht sind sie auf einen Wert
   je Fall. Wer einen aendert, aendert ihn ueberall.

   Der Block steht bewusst am ENDE des gemeinsamen Teils: So gewinnt er bei
   gleicher Spezifitaet gegen die Grundwerte weiter oben, etwa wenn
   .ohne-abstand-unten den Abstand von .untertitel zuruecknimmt. */
.abstand-oben-eng   { margin-top: 4px; }
.abstand-oben       { margin-top: 14px; }
.abstand-oben-weit  { margin-top: 18px; }
.abstand-unten      { margin-bottom: 12px; }
.abstand-unten-weit { margin-bottom: 24px; }
.ohne-abstand-unten { margin-bottom: 0; }
.abstand-links      { margin-left: 8px; }
/* Haelt ein kurzes Statuswort in einer Tabellenzelle zusammen. */
.eine-zeile         { white-space: nowrap; }

/* Rot als Schriftfarbe: die Statuswoerter in den Tabellen der Verwaltung
   ("offen", "verpasst", "nein", "gestoppt") und Hinweise, die auf einen
   Fehlstand zeigen. Die Klasse steht hier und nicht in admin.css, weil
   admin.php die Verwaltungsdatei nicht laedt: Sie kommt mit den gemeinsamen
   Klassen aus, und genau deshalb stand die Farbe dort bisher im HTML. */
.text-rot { color: var(--rot); }

/* Fehlerfassung der Hinweisbox. Ihr Vorgabestand ist gruen, also Erfolg; wo
   eine Meldung einen Fehlschlag traegt, kommt diese Klasse dazu.

   Sie stand bis zum 2026-08-24 in admin.css und war damit fuer admin.php
   unerreichbar. Die Folge: dieselben drei Angaben noch einmal im HTML, an drei
   Stellen, zweimal davon ohne das fette Schriftgewicht. Jetzt gibt es einen
   Ort und ein Aussehen. */
.hinweis-box-fehler { background: var(--rot-hell); color: var(--rot); font-weight: 600; }

/* Versionszeile unten auf den Verwaltungsseiten. Warum die Werte so sind und
   wo die Zeile stehen muss, steht in includes/version-fuss.php. */
.versions-fuss { text-align: center; margin: 18px 0 6px; }

/* Breite des Videobereichs im Webinarraum. Der Wert kommt aus
   VIDEO_MAX_BREITE_PX und kann deshalb nicht hier stehen; raum.php reicht ihn
   ueber $body_stil als --video-breite an den <body>. Vorher trug jedes der vier
   Elemente denselben Wert einzeln im HTML, wer die Breite aendern wollte,
   musste an vier Stellen daran denken. Der Ersatzwert greift nur, falls die
   Variable einmal fehlt. */
.laeuft-hinweis, .raum-titel, .raum-untertitel, .video-box {
  max-width: var(--video-breite, 960px);
}

/* ============================================================
   MARKENFASSUNG DER BESUCHERSEITEN (2026-08-22)
   ============================================================
   Alles unterhalb dieser Linie gilt ausschliesslich fuer Seiten, die die
   Koerperklasse "wb-besucher" tragen. Die vergibt includes/seite-start.php an
   jede Seite, die keine Verwaltungsseite ist. Die Verwaltung behaelt damit ihr
   bisheriges Orange, sie kommt beim Redesign gesondert an die Reihe.

   Warum das hier unten steht und nicht in den Regeln oben eingearbeitet ist:
   Ein Teil dieser Klassen gehoert beiden Bereichen (.btn, .hinweis, und die
   Anmeldeseite der Verwaltung benutzt sogar .webinar-box). Wuerde ich die
   Werte oben aendern, aenderte sich die Verwaltung mit. Dieser Block ist
   deshalb bewusst eine Auflage: oben steht der gemeinsame Stand, hier die
   Fassung fuer Besucher. Mit 2.0 faellt beides zusammen weg.

   Die Farben stammen aus der Palette vom 2026-08-17, die Werte des
   Hintergrundmusters aus der Vorfuehrung vom selben Tag.
   ============================================================ */

body.wb-besucher {
  /* Die Markenfarben stehen seit dem 2026-08-23 in :root und gelten fuer beide
     Bereiche. Hier bleibt nur, was sich zwischen Besucherseiten und Verwaltung
     wirklich unterscheidet, sonst stuenden dieselben Werte zweimal da und
     liefen beim naechsten Aendern auseinander. */
  --kante: #E4E8EF;         /* feine Kartenkante, nur die Besucherkarte hat sie */
  --radius: 12px;           /* die Verwaltung bleibt bei 8px */


  background-color: var(--light-bg);
}

/* ---- Hintergrundmuster ----
   Ein Buendel gepunkteter Bahnen ueber die ganze Breite: in der Bildmitte zu
   einer Taille zusammengefuehrt, die hinter der Karte liegt, zu beiden Raendern
   hin auffaechernd. Die Datei ist einmal ausgerechnet, es laeuft also KEIN
   Skript dafuer im Betrieb. Gerechnet wird sie von muster_erzeugen.php, das
   NEBEN dem Projektordner liegt (P:\Programme\Claude-Projekte) und bewusst
   nicht darin: Werkzeuge im Ordner tools/ wandern beim Einrichten mit auf den
   Server. Eingestellt wird das Muster mit muster-regler.html im selben Ordner.

   "100% 100%" statt "cover" ist Absicht: Das Bild wird auf die Fenstergroesse
   gezogen, statt gleichmaessig vergroessert zu werden. So bleibt das Muster auf
   jedem Bildschirm 60 Prozent der Hoehe hoch und mittig. Mit "cover" wuchs es
   auf einem grossen Monitor mit und wirkte dadurch aufdringlich. Zum Ziehen
   gehoert preserveAspectRatio="none" im SVG, beides wirkt nur zusammen.

   Erst ab 900 Pixel Fensterbreite: Auf dem Handy liefe das Buendel quer durch
   die Karte, und daneben ist ohnehin kein Platz. */
@media (min-width: 900px) {
  body.wb-besucher {
    /* Die Zahl hinter dem Fragezeichen ist der Stand der Bilddatei. Ohne sie
       holt kein Browser ein geaendertes Muster: Die style.css bekommt ihren
       Stempel beim Ausliefern von includes/kopf.php, die Bilddatei darin aber
       nicht, und sie heisst nach einer Aenderung ja weiterhin gleich.
       muster_erzeugen.php schreibt die Zahl bei jedem Lauf selbst hierher. */
    background-image: url("muster-hell.svg?v=1787428595");
    background-size: 100% 100%;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
  }
}
/* Im iFrame gehoert der Hintergrund der einbettenden Seite, nicht uns. */
body.wb-besucher.embed { background-color: transparent; background-image: none; }

/* ---- Karte: mehr Luft, mehr Tiefe, Markenkante oben ---- */
body.wb-besucher .webinar-box {
  border-radius: 16px;
  padding: 48px 40px 44px;
  border: 1px solid var(--kante);
  border-top: 4px solid var(--orange);
  box-shadow: 0 1px 2px rgba(18,24,43,0.04), 0 18px 48px rgba(18,24,43,0.13);
}
body.wb-besucher.embed .webinar-box { border: none; box-shadow: none; padding: 4px 0; }

/* ---- Schrift: deutlichere Rangfolge im Kopf der Karte ---- */
body.wb-besucher .webinar-box h1 { font-size: 32px; letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 12px; }
body.wb-besucher .untertitel { font-size: 16px; line-height: 1.5; }
body.wb-besucher .anmelde-untertitel { font-size: 18px; }

/* ---- Knopf: Amber mit DUNKLER Schrift ----
   Weiss auf Amber waere 2,16:1 und damit unlesbar, Dunkelblau erreicht 8,17:1.
   Das war die Entscheidung vom 2026-08-17 und gilt fuer jede amberfarbene
   Flaeche auf diesen Seiten, nicht nur fuer den Knopf. */
body.wb-besucher .btn {
  background-image: linear-gradient(180deg, #EFB25A 0%, var(--orange) 55%, #DE9930 100%);
  padding: 15px 22px; border-radius: 10px; font-size: 16px;
  box-shadow: 0 1px 2px rgba(18,24,43,0.10);
  transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
body.wb-besucher .btn:hover {
  background-image: linear-gradient(180deg, #E8A33D 0%, var(--orange-hover) 55%, #C9821E 100%);
  transform: translateY(-1px); box-shadow: 0 4px 12px rgba(18,24,43,0.16);
}
body.wb-besucher .btn:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(18,24,43,0.10); }
body.wb-besucher .anmelde-formular .btn { display: block; width: 100%; margin-top: 4px; }
/* ---- Eingabefelder: gleiche Rundung wie der Knopf, ruhigere Kante ---- */
body.wb-besucher .anmelde-formular input,
body.wb-besucher .anmelde-formular select {
  border-radius: 10px; border: 1px solid #C9CFDA; padding: 13px 14px; font-size: 15px;
}
body.wb-besucher .anmelde-formular label { font-size: 13px; letter-spacing: .01em; color: var(--navy); }
/* Das aktive Feld erkennt man am eigenen Rahmen, an SONST NICHTS. Vorher lagen
   hier ein Schimmer per Schatten UND weiter unten der Fokusring uebereinander,
   das ergab zwei Ringe um dasselbe Feld.

   Die Farbe ist --marke-text und nicht --orange: Amber selbst kommt auf Weiss
   nur auf 2,16:1, ein Rahmen in dieser Farbe waere kaum zu sehen. Der dunklere
   Ton erreicht 5,00:1 (bei Petrol sind beide Toene ohnehin derselbe).

   Der innen liegende Schatten verdoppelt die Linie auf zwei Pixel, ohne dass
   das Feld beim Anklicken um einen Pixel springt; eine echte 2-Pixel-Kante
   wuerde die Zeile umbrechen lassen. Es bleibt optisch EIN Rahmen. */
body.wb-besucher .anmelde-formular input:focus,
body.wb-besucher .anmelde-formular select:focus {
  border-color: var(--marke-text);
  box-shadow: inset 0 0 0 1px var(--marke-text);
}

/* ---- Fokus: sichtbarer Ring fuer alle, die mit der Tastatur bedienen ----
   Nur fuer Links und Knoepfe. Eingabefelder sind BEWUSST ausgenommen: Sie haben
   einen eigenen Rahmen, der sich beim Aktivieren einfaerbt, und der Ring kaeme
   als zweiter Kreis obendrauf. */
body.wb-besucher a:focus-visible,
body.wb-besucher .btn:focus-visible,
body.wb-besucher button:focus-visible {
  outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 6px;
}

/* ---- Links: Amber, ohne Unterstreichung (Entscheid vom 2026-08-17) ---- */
body.wb-besucher .webinar-box a:not(.btn),
body.wb-besucher .rechtstext a { color: var(--orange); text-decoration: none; }
body.wb-besucher .webinar-box a:not(.btn):hover,
body.wb-besucher .rechtstext a:hover { color: var(--navy); }

/* ---- Amber als SCHRIFT: eine Stufe dunkler ----
   Der Entscheid vom 2026-08-17 betraf Textlinks, die bleiben Amber. Diese
   Stellen sind aber keine Links, sondern kurze Hinweise. Amber auf Weiss ergibt
   2,16:1, das alte Orange immerhin 2,75:1 – der Wechsel wuerde sie also
   schlechter lesbar machen. #9C6300 ist der abgenommene dunkle Amberton aus der
   Palette und erreicht 5,00:1. */
body.wb-besucher .dringlichkeit,
body.wb-besucher .termin-hinweis,
body.wb-besucher #termin_wahl:invalid,
body.wb-besucher #termin_wahl option[value=""],
body.wb-besucher #termin_wahl .wechsel { color: var(--marke-text); }

/* ---- Countdown: die Zahl traegt die Seite ---- */
body.wb-besucher .countdown-box .countdown { font-size: 58px; letter-spacing: -0.03em; margin: 16px 0 6px; }
body.wb-besucher .countdown-box h1::after {
  content: ""; display: block; width: 54px; height: 3px; border-radius: 2px;
  background: var(--orange); margin: 14px auto 0;
}

/* ---- Warteraum: Haken statt Aufzaehlungspunkten ---- */
body.wb-besucher .warteraum-info { border-top: 1px solid var(--kante); }
body.wb-besucher .warteraum-info ul { list-style: none; padding-left: 2px; }
body.wb-besucher .warteraum-info li { position: relative; padding-left: 26px; margin-bottom: 9px; }
body.wb-besucher .warteraum-info li::before {
  content: "✓"; position: absolute; left: 0; top: -1px; color: var(--marke-text); font-weight: 700;
}

/* ---- Fusszeile: zurueckhaltender, ohne Unterstreichung ---- */
body.wb-besucher .seiten-footer a { text-decoration: none; }
body.wb-besucher .seiten-footer a:hover { color: var(--navy); }

/* ---- Schmale Bildschirme ----
   Die groessere Karte und die groessere Ueberschrift sind fuer den Schreibtisch
   gedacht. Auf dem Handy bleiben von 375 Pixeln sonst nur 275 fuer den Inhalt,
   das ist weniger als vorher. Deshalb hier zurueckgenommen. */
@media (max-width: 600px) {
  body.wb-besucher .webinar-box { padding: 32px 22px 30px; border-radius: 14px; }
  body.wb-besucher .webinar-box h1 { font-size: 26px; }
  body.wb-besucher .countdown-box .countdown { font-size: 46px; }
}

/* ============================================================
   FARBWELT PETROLBLAU (2026-08-23)
   ============================================================
   Zweite Farbwelt, umschaltbar in der Verwaltung unter Einstellungen. Ab Werk
   ist Amber eingestellt.

   Der ganze Block besteht fast nur noch aus vier Farbnamen. Das ist der Ertrag
   der Umstellung: Weil --auf-marke und --marke-text mit der Markenfarbe
   zusammen wechseln, muss hier nicht mehr Regel fuer Regel nachgezogen werden,
   was vorher zwei Dutzend Zeilen waren.

   Es wird NUR die Akzentfarbe getauscht. Karte, Seitengrund, Textfarben und die
   Bedeutungsfarben bleiben: Der Kunde soll eine andere Anmutung bekommen und
   keine zweite Software.

   Die Farbnamen haengen an body.wb-petrol OHNE wb-besucher und gelten deshalb
   auch fuer die Verwaltung: Der Kunde soll nicht zwei verschieden aussehende
   Haelften vor sich haben. Was darunter steht, betrifft nur Besucherseiten
   (Verlauf und Muster), das hat die Verwaltung gar nicht. */
body.wb-petrol {
  --orange: #0E7490;
  --orange-hover: #0B5C73;
  /* Auf Petrol traegt Weiss 5,36:1, Dunkelblau kaeme nur auf 3,29:1. Bei Amber
     ist es genau umgekehrt, deshalb steckt die Entscheidung im Token. */
  --auf-marke: #FFFFFF;
  /* Petrol darf auch selbst Schrift sein (5,36:1 auf Weiss), Amber nicht. */
  --marke-text: #0E7490;
  /* Getoente Flaeche passend zur Farbe. */
  --marke-hell: #E6F2F6;
}
body.wb-besucher.wb-petrol .btn {
  background-image: linear-gradient(180deg, #1795B5 0%, #0E7490 55%, #0A5C74 100%);
}
body.wb-besucher.wb-petrol .btn:hover {
  background-image: linear-gradient(180deg, #0E7490 0%, #0B5C73 55%, #0A5C74 100%);
}
/* Eigenes Hintergrundmuster in derselben Farbe, gebaut von muster_erzeugen.php. */
@media (min-width: 900px) {
  body.wb-besucher.wb-petrol { background-image: url("muster-petrol.svg?v=1787470177"); }
}
body.wb-besucher.wb-petrol.embed { background-image: none; }