/* © 2026 Hans Stellmacher. WebinarButler. Alle Rechte vorbehalten. */
/* WebinarButler, gemeinsames Stylesheet */
/* ============================================================
   Schrift
   Figtree liegt im Paket unter assets/schriften/ und kommt vom eigenen
   Server. Es geht also kein Aufruf an Google, und damit wandert auch keine
   Adresse eines Besuchers dorthin. Das erspart der Datenschutzerklaerung
   einen Punkt, den sie sonst ausweisen muesste.

   Es sind variable Schriften: EINE Datei traegt alle Staerken von 300 bis
   900, deshalb steht bei font-weight eine Spanne statt einer Zahl. Wer eine
   Staerke dazwischen setzt, etwa 550, bekommt sie auch.

   Getrennt wird nach Zeichenvorrat. "latin" deckt Deutsch vollstaendig ab,
   Umlaute und scharfes s eingeschlossen, und ist die Datei, die praktisch
   immer geladen wird. "latin-ext" holt der Browser von sich aus nur nach,
   wenn ein Zeichen daraus wirklich vorkommt, etwa in einem polnischen oder
   tuerkischen Teilnehmernamen.

   font-display:swap zeigt den Text sofort in Arial und tauscht die Schrift,
   sobald sie geladen ist. Der Text ist damit nie unsichtbar, auch nicht auf
   einer langsamen Mobilfunkverbindung.

   Lizenz: SIL Open Font License 1.1, Wortlaut in assets/schriften/OFL.txt.
   Die Lizenz erlaubt das Mitliefern mit der Software ausdruecklich, verlangt
   aber, dass der Lizenztext dabei bleibt. OFL.txt gehoert deshalb mit auf
   den Server und darf nicht geloescht werden.
   ============================================================ */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('schriften/figtree-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('schriften/figtree-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url('schriften/figtree-kursiv-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url('schriften/figtree-kursiv-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Markenfarben. Sie stehen hier in :root und gelten damit fuer BEIDE
     Bereiche: Besucherseiten und Verwaltung. */
  --navy: #12182B;

  /* ALLE warmen Toene dieser Datei stammen aus EINER Familie: derselbe Farbton
     30 Grad, volle Saettigung, es unterscheidet sie nur die Helligkeit.
         #E97400  Marke und Button        Weiss darauf 3,02:1, Navy 5,84:1
         #D66A00  Verlaufsmitte, Zeigen  Weiss darauf 3,55:1
         #C05C00  Verlaufsfuss, Button beim Zeigen   4,40:1
         #A85000  Fuss beim Zeigen                  5,51:1
         #FFF3E8  getoente Flaeche der Marke
     #E97400 steht dabei fuer ALLES, was nicht Verlauf ist: Flaeche, Kante,
     Rahmen, Links, Hinweise, Haken, Zwischenueberschriften. Es gibt bewusst
     KEINEN zweiten, dunkleren Ton fuer Schrift - es soll ueberall derselbe
     eine Ton stehen.
     Bedeutungsfarben (Gruen, Rot, Warngelb) gehoeren NICHT dazu: Sie stehen
     fuer eine Bedeutung und nicht fuer die Marke. */
  --orange: #E97400;
  --orange-hover: #D66A00;
  --light-bg: #F4F6F9;
  --text: #12182B;
  --text-muted: #667085;
  --radius: 8px;

  /* Auf einer gefuellten Markenflaeche steht ueberall Weiss, auf Buttons wie
     auf Meldungen. Es gab einmal einen zweiten Namen --auf-marke fuer dunkle
     Schrift auf Orange (dort traegt #12182B 5,84:1 und Weiss 3,02:1); er ist
     entfallen, weil nach und nach jede einzelne Stelle auf Weiss umgestellt
     wurde und am Ende niemand mehr auf ihn zeigte. Wer je wieder dunkle
     Schrift auf der Markenflaeche braucht, kennt jetzt die Werte.

     BUTTONS und alles, was man anklickt, tragen eine eigene Flaeche mit weisser
     Schrift. In der Orangewelt ist --button derselbe Wert wie --orange; es gibt
     keinen Grund, warum Button und Kartenkante zwei verschiedene Warmtoene
     tragen sollten. Die beiden Namen bleiben getrennt, weil in der Petrolwelt
     die Schrift darauf eine andere ist.

     WICHTIG, damit es niemand still "korrigiert": Weiss auf #E97400 ergibt
     3,02:1 und liegt damit UNTER den 4,5:1, die fuer normale Schrift gelten;
     die 3:1-Schwelle fuer Bedienelemente ist erfuellt. Das ist eine bewusste
     Entscheidung nach einem Vergleich mit gemessenen Zahlen, kein Versehen.
     Wer es besser haben will, hat genau zwei Wege: die Flaeche dunkler machen
     oder die Buttonschrift auf 19 px fett setzen, denn ab 18,66 px fett gilt
     Schrift als gross und 3:1 sind dann die richtige Schwelle. */
  --button: #E97400;
  /* Beim Zeigen dunkler, das bringt den Kontrast nebenbei auf 4,40:1. */
  --button-hover: #C05C00;
  --auf-button: #FFFFFF;
  /* 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: #FFF3E8;

  /* Bedeutungsfarben. Je Bedeutung genau EIN Wert mit Namen, und der gilt fuer
     beide Bereiche - sonst hat dieselbe Erfolgsmeldung in der Verwaltung ein
     anderes Gruen 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 */

  /* WARNUNG. Der Farbton liegt bei 45 Grad und damit 15 Grad neben der Marke.
     Das ist kein Geschmack, sondern Abstand: Beide Farben sind warm, und liegen
     sie zu dicht beieinander, sieht eine Warnung aus wie eine blasse Marke.
     WER DIE MARKENFARBE AENDERT, prueft diesen Abstand nach.

     EIN Wert traegt Schrift UND Flaeche, genau wie bei Gruen und Rot; Kontrast
     ist symmetrisch, ein zweiter Wert dafuer waere ueberfluessig. #8F6B00
     erreicht 4,92:1 gegen Weiss, in beide Richtungen.

     STAND 29.08.2026: In der VERWALTUNG traegt die Warnung ueberwiegend nicht
     mehr diese Farbe, sondern die Marke - Warnkaesten, der „geaendert"-Merker,
     die Zahlen und Zeichen der Selbstpruefung. Gelb geblieben sind die
     Zustandsmarker der Teilnehmerliste (.z-warn in admin.css): Dort stehen sie
     neben Gruen und Rot und sind Bedeutung, keine Marke. Die uebrigen Stellen findet, wer es zurueckdrehen will, in
     admin.css unter .warn-box, .kopf-geaendert, .klapp-status.warnung,
     .zahl-warnung, .marke-warnung, .m-uebersprungen und .pruef-selbsthilfe.
     Der Einrichtungs-Assistent benutzt die drei Werte ohnehin weiter; er hat
     eine eigene Palette und laeuft ohne diese Datei. */
  --warn: #8F6B00;         /* Schrift, Zahl, gefuellte Marke */
  --warn-hell: #FFF8E3;    /* Flaeche hinter einer Warnung, 4,63:1 fuer --warn */
  /* Nur Schmuck: der farbige Streifen links an den Warnkaesten. Er traegt keine
     Schrift und hat deshalb keine Schwelle; er soll den Kasten auf einen Blick
     als Warnung ausweisen. */
  --warn-signal: #F5BA0A;
  --wb-b: pvz3yn7nua;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Eingabefelder, Klappmenues und Buttons erben die Schrift NICHT von selbst:
   Jeder Browser setzt dort seine eigene Oberflaechenschrift ein, unter Windows
   also eine andere als auf einem iPhone. Diese eine Zeile stellt sie alle auf
   die Schrift der Seite um, die heutigen wie die spaeter hinzukommenden. Wo
   bewusst Consolas stehen soll, etwa im Pruefbericht oder im Nachweis einer
   Auskunft, setzt die dortige Klassenregel sie zurueck. */
input, select, textarea, button { font-family: inherit; }

body {
  font-family: 'Figtree', 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; }
/* Die Tagesueberschriften im Ausklappmenue (Heute, Morgen, Uebermorgen).
   Sie brauchen eine EIGENE Farbe, sonst erben sie die des Auswahlfeldes, und
   das traegt die Markenfarbe, solange noch kein Termin gewaehlt ist. Sie
   erbten sie also bloss, ohne dass das je entschieden worden waere. Jetzt
   steht sie ausdruecklich da: Der Nutzer will die Ueberschriften in der
   Markenfarbe, und dann soll das auch so im Bauplan stehen und nicht vom
   Zufall der Vererbung abhaengen. Fett sind sie ohnehin, das macht jeder
   Browser bei einer optgroup-Beschriftung von selbst. */
#termin_wahl optgroup { color: var(--orange); }

.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. */
/* Haken und Auswahl-Buttons tragen die Buttonfarbe, in der Orangewelt also
   dieselbe wie die Marke. Der Browser zeichnet das Haekchen darin immer WEISS,
   und das laesst sich nicht aendern; es traegt damit 3,02:1, dieselbe Zahl wie
   die Buttonschrift und dieselbe bewusste Entscheidung.
   --button und nicht --orange steht hier trotzdem, obwohl beide gleich sind:
   Ein Ankreuzfeld ist etwas zum Anklicken, und wenn die zwei Namen je wieder
   auseinandergehen, gehoert es zur Buttonseite.
   Eine Regel fuer alle: Anmeldeseite, Verwaltung, Einstellungen. */
input[type="checkbox"], input[type="radio"] { accent-color: var(--button); }

.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; }

/* 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(--button); color: var(--auf-button); border: none;
  padding: 13px 20px; border-radius: var(--radius);
  font-weight: 700; font-size: 15px; line-height: 1.25; cursor: pointer; text-decoration: none;
}
.btn:hover { background: var(--button-hover); }
.btn-outline { background: transparent; border: 2px solid #fff; color: #fff; }
/* Gilt fuer <button> UND fuer <a>: In der Teilnehmerliste stehen beide
   nebeneinander, und ohne diese Angaben waren sie verschieden hoch. Ein <a> ist
   von Haus aus inline und bekommt seine Hoehe aus der Zeilenhoehe der Umgebung,
   ein <button> bringt seine eigene mit und erbt ausserdem die Schrift nicht.
   inline-flex mit fester Zeilenhoehe und geerbter Schrift macht beide gleich. */
.btn-klein {
  display: inline-flex; align-items: center; justify-content: center;
  /* Der Rahmen ist von vornherein da, nur unsichtbar. Der Loeschen-Button ist
     der einzige mit sichtbarem Rahmen; ohne diese Zeile waere er um dessen zwei
     Pixel hoeher als seine Nachbarn, denn ein Rahmen kommt zur Hoehe hinzu,
     solange keine feste Hoehe gesetzt ist. So faerbt er ihn nur ein. */
  box-sizing: border-box;
  padding: 6px 12px; font-size: 13px; line-height: 1.25;
  background: var(--button); color: var(--auf-button); border: 1px solid transparent;
  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; }
/* Zweitgrösste Schrift der Karte, zwischen der Begrüssung (32 px) und dem
   Listentext. Vorher war sie nur fett und ging in der Aufzählung unter, obwohl
   sie den ganzen unteren Teil der Karte anführt. */
.warteraum-titel { font-size: 26px; font-weight: 700; line-height: 1.25;
                   letter-spacing: -0.01em; color: var(--navy); margin-bottom: 12px; }
.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 */
/* Der Kasten um das Video. Die Polsterung bringt die Bühne mit, deshalb hat
   er selbst keine mehr. */
.video-box { width: 100%; }
.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: 'Figtree', 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(--button); color: var(--auf-button);
}
/* Das gezeichnete Dreieck steht in einer quadratischen Flaeche, seine Spitze
   ragt weiter nach rechts als die Grundlinie nach links. Geometrisch mittig
   saehe es deshalb nach links verrutscht aus; der Pfad ist so gelegt, dass der
   Schwerpunkt in der Kreismitte liegt - das ist es, was das Auge sucht. */
.video-start-icon svg { display: block; }

/* 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(--button); }

/* 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;
}

/* ============================================================
   WEBINARRAUM, WÄHREND DAS WEBINAR LÄUFT
   ============================================================
   Die Bühne ist dieselbe Karte, die auch der Warteraum und die Anmeldeseite
   tragen: weiß, Markenkante oben. Der Grund ist nicht Geschmack, sondern
   Fokus. Vorher stand das schwarze Video ohne Rahmen auf hellgrauem Grund und
   der Titel nahm mit 50 px mehr Platz ein als jedes andere Element der Seite.
   Jetzt ist das Video der EINZIGE dunkle Fleck der Seite und zieht das Auge
   allein durch den Kontrast; alles andere ordnet sich ihm unter.

   Die Reihenfolge in der Karte: Live-Zeichen, persönliche Ansprache, Titel,
   Untertitel, Strich, Video, kleine Zeile darunter. Der Call-to-Action steht
   BEWUSST außerhalb der Karte - er erscheint erst am Ende des Videos, und als
   eigene Karte fällt er dann auf, statt sich anzuschließen. */
.raum-buehne {
  width: 100%;
  background: #fff;
  border-radius: 16px;
  /* Unten derselbe Wert wie an den Seiten: Seit die Zeile unter dem Video weg
     ist, schliesst das Bild die Karte ab, und ein Rahmen mit vier gleichen
     Raendern ist ruhiger als einer mit einem dickeren Fuss. */
  padding: 26px;
  border: 1px solid var(--kante, #E4E8EF);
  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.10);
}

/* Das Live-Zeichen. Es ersetzt den grünen Kasten von früher: Grün heißt in
   diesem Programm überall „erledigt, alles in Ordnung" und war hier die
   einzige Farbe im Bild - ausgerechnet eine, die nichts mit der Marke zu tun
   hat. Der Punkt pulst, damit man auf einen Blick sieht, dass gerade etwas
   läuft; wer keine Bewegung will, schaltet sie unten per Systemeinstellung ab. */
.laeuft-zeile {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--orange); font-size: 13.5px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  margin-bottom: 10px;
}
.laeuft-punkt {
  width: 9px; height: 9px; border-radius: 50%; background: var(--orange);
  animation: laeuft-puls 1.8s ease-out infinite;
}
@keyframes laeuft-puls {
  0%   { box-shadow: 0 0 0 0 rgba(233,116,0,0.55); }
  70%  { box-shadow: 0 0 0 9px rgba(233,116,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(233,116,0,0); }
}
/* Wer in seinem System weniger Bewegung eingestellt hat, bekommt sie hier auch
   nicht. Das Zeichen bleibt sichtbar, es hört nur auf zu pulsen. */
@media (prefers-reduced-motion: reduce) {
  .laeuft-punkt { animation: none; }
}

/* Die persönliche Ansprache. Der Warteraum begrüßt mit „Willkommen, Anna!";
   hier führt der Satz den Faden fort, statt die Anrede abbrechen zu lassen. */
.raum-anrede {
  font-size: 15px; font-weight: 600; color: var(--text-muted); margin-bottom: 6px;
}
.raum-anrede strong { color: var(--orange); font-weight: 700; }

.raum-titel {
  color: var(--orange);
  font-size: 30px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.raum-untertitel {
  color: var(--text-muted);
  font-size: 16.5px;
  font-weight: 500;
  line-height: 1.45;
  margin-top: 6px;
}
/* Derselbe Strich, den die Überschrift des Warteraums trägt. Er trennt den
   Kopf vom Video, ohne eine ganze Linie über die Karte zu ziehen. */
.raum-strich {
  width: 54px; height: 3px; border-radius: 2px;
  background: var(--orange); margin: 16px 0 20px;
}
/* Mobil: die Karte darf nicht mehr Rand als Inhalt haben. */
@media (max-width: 600px) {
  .raum-buehne { padding: 16px; border-radius: 14px; }
  .raum-titel { font-size: 23px; }
  .raum-untertitel { font-size: 15px; }
}

/* Call-to-Action im Webinarraum. Eigene Karte unter der Bühne, mit derselben
   Markenkante oben - er erscheint erst am Ende des Videos und soll dann als
   Nächstes gelesen werden. */
.cta-box {
  width: 100%;
  margin-top: 20px;
  padding: 28px;
  background: #fff;
  border-radius: 16px;
  border: 1px solid var(--kante, #E4E8EF);
  border-top: 4px solid var(--orange);
  text-align: center;
  box-shadow: 0 1px 2px rgba(18,24,43,0.04), 0 18px 48px rgba(18,24,43,0.10);
  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; }
.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-button); }
.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 Buttons, 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 Buttons in der Höhe. */
.admin-reiter .reiter-aktiv { background: var(--button); border: 2px solid var(--button); color: var(--auf-button); }
.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 Button
   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); }

/* Kasten fuer das, was man nicht ueberlesen darf. Rot wie die Fehlerfarbe, aber
   als Rahmen mit hellem Grund statt als volle Flaeche: Es ist kein Fehler, es
   ist eine Warnung, und sie steht dauerhaft da.
   Bewusst HIER und nicht in admin.css: admin.php ist die einzige
   Verwaltungsseite, die admin.css gar nicht laedt. */
.achtung-kasten { border: 2px solid var(--rot); background: var(--rot-hell);
                  border-radius: var(--radius); padding: 14px 16px; font-size: 13px;
                  line-height: 1.55; color: var(--navy); }
.achtung-kasten p { margin: 0 0 8px; }
.achtung-kasten p:last-child { margin-bottom: 0; }

/* Haken vor einer Handlung, die sich nicht zurueckholen laesst. */
.haken-zeile { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px;
               font-size: 13px; line-height: 1.5; cursor: pointer; max-width: 640px; }
.haken-zeile input { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; }
.btn:disabled { background: #cfcfcf; color: #f7f7f7; cursor: not-allowed; }
.termin-formular { display: flex; flex-direction: column; gap: 12px; }
.termin-formular label { font-size: 13px; font-weight: 600; }
.termin-formular input, .termin-formular select { padding: 9px 12px; border: 1px solid #ccc;
                                                  border-radius: 6px; font-size: 15px;
                                                  background: #fff;
                                                  color: var(--text); }
/* Uhrzeitfeld und Klappmenue stehen untereinander in derselben Spalte und
   muessen deshalb gleich hoch sein; der Browser rechnet sie von sich aus
   verschieden aus. Das Kontrollkaestchen im Export-Formular bleibt aussen vor,
   es ist quadratisch. */
.termin-formular input[type="time"], .termin-formular select { height: 41px; }
.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. */
/* Mit der sechsten Kachel wird eine feste Spaltenzahl zu eng. auto-fit legt so
   viele nebeneinander, wie bei 132 Pixeln Mindestbreite hineinpassen, und
   bricht den Rest von selbst um. Unter 700 Pixeln greift weiter unten ohnehin
   die Regel mit zwei Spalten. */
.funnel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 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; }
}

/* ============================================================
   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; }
/* Die Fusszeile steht auf dem Seitengrund, dort erreicht die Marke 2,79:1.
   Das ist ein Zeigen-Zustand eines Links, dessen Ruhefarbe (#667085, 4,97:1)
   ihn ohnehin lesbar haelt; die Entscheidung fuer den einen Ton gilt auch
   hier. */
.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. */
/* Ein eigener Kasten, kein loser Absatz: Der Ton ist das Einzige, was der
   Besucher im Warteraum wirklich tun kann, und er soll auch danach aussehen.
   Die Flaeche ist dieselbe helle, die die ganze Anwendung als Grund benutzt -
   auf der weissen Karte hebt sie sich gerade genug ab. */
.erinnerung {
  margin-top: 22px; padding: 16px 18px;
  background: var(--light-bg); border: 1px solid var(--kante, #E4E8EF);
  border-radius: 12px;
}
/* Aussehen kommt aus .hinweis, hier steht nur der Abstand zum Button.
   Zweimal dieselbe Groesse und Farbe hinzuschreiben waere eine Dopplung,
   die beim naechsten Aendern auseinanderlaeuft. */
.erinnern-frage { margin-bottom: 12px; }

/* Bewusst zurueckhaltend: Der Button 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 Button ganz auszufuellen. */
.erinnern-button {
  background: #fff; border: 1px solid var(--orange); color: var(--text);
  font-size: 14px;
  padding: 8px 16px; border-radius: 20px; cursor: pointer;
}
.erinnern-button:hover:enabled { background: var(--marke-hell); }

/* Ist die Erinnerung an, wird der Button gruen: Das ist die Farbe fuer
   Erledigtes und sagt ohne Worte, dass es geklappt hat. */
.erinnern-button: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. */
/* Die Meldung ist zwar kein Button, sitzt aber als gefuellte Flaeche zwischen
   lauter Buttons und soll deshalb dieselbe weisse Schrift tragen. Sie folgt
   damit --button/--auf-button statt der Markenflaeche. */
.start-meldung {
  margin-top: 18px; padding: 12px 16px; border-radius: var(--radius);
  background: var(--button); color: var(--auf-button); font-size: 16px;
}

/* ============================================================
   ABSTAENDE UND AUFLAGEN
   ============================================================
   Abstaende gehoeren hierher und nicht als style="margin:..." an das
   einzelne Element: Sonst sitzt die Gestaltung an vierzig Stellen statt an
   einer, und genau das macht ein 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
   werden. Je Fall gibt es genau einen Wert; wer ihn 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 steht hier und NICHT in admin.css, weil admin.php sie sonst nicht
   erreicht und dieselben drei Angaben wieder im HTML stuenden. */
.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 WEBINARRAUMS
   ============================================================
   Das Video ist so gross, wie das Fenster es zulaesst - und zwar begrenzt
   durch die HOEHE, nicht durch eine eingestellte Breite. Bei 16:9 kostet
   naemlich jeder Pixel Breite 0,5625 Pixel Hoehe, und zu wenig Hoehe war das
   eigentliche Problem: Das Angebot unter dem Video lag ausserhalb des
   Sichtfeldes, ausgerechnet im Moment des Pitches.

   In --raum-abzug steht alles, was neben dem Video Hoehe braucht: der Kopf der
   Karte, die Zeile darunter, das Polster, der Seitenrand und die Angebots-
   leiste am unteren Fensterrand. Die Leiste ist von Anfang an eingerechnet,
   obwohl sie erst zum Pitch erscheint - sonst verdeckte sie beim Auftauchen
   das Bild, oder das Video muesste mitten im Webinar springen.

   Der Wert hier ist die Vorgabe fuer den Fall, dass kein JavaScript laeuft;
   raum.php misst den Kopf der Karte nach und schreibt den genauen Wert. Die
   54 Pixel sind das Polster der Karte samt Rahmen, denn begrenzt wird die
   KARTE, waehrend die Rechnung vom Video ausgeht.

   Eine Einstellung dafuer gibt es bewusst nicht mehr: Es gibt keinen Wert, den
   ein Betreiber besser waehlen koennte als das Fenster seines Zuschauers.
   ============================================================ */
:root { --raum-abzug: 420px; }
.raum-buehne, .cta-box {
  max-width: max(320px, calc((100vh - var(--raum-abzug)) * 16 / 9 + 54px));
}

/* ---- Angebotsleiste am unteren Fensterrand ----
   Sie erscheint mit dem Pitch-CTA und nur dann, wenn dessen Kasten gerade
   NICHT im Bild ist - sonst staenden zwei gleiche Buttons uebereinander.
   Dieselbe Markenkante wie die Karten, damit sie dazugehoert und nicht wie
   eine fremde Werbeleiste wirkt. */
.angebot-leiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: #fff; border-top: 3px solid var(--orange);
  box-shadow: 0 -6px 26px rgba(18,24,43,0.16);
  padding: 12px 20px;
  display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap;
  transform: translateY(110%); transition: transform 0.35s ease;
}
.angebot-leiste.da { transform: none; }
/* Luft unter dem Angebotskasten. Sie hat zwei Aufgaben: Abstand nach unten -
   und Scrollweg, damit sich der Button im Kasten ueber die Leiste hinaus
   schieben laesst. Kaeme er nie ueber sie, verschwaende die Leiste nie wieder.
   80 px reichen dafuer mit Reserve: 28 px Polster im Kasten, 80 px hier und
   24 px Rand ergeben 132 px unter dem Button, die Leiste ist 73 bis 77 hoch.

   DIESER WERT DARF NICHT VON DER LEISTE ABHAENGEN. Kurzzeitig hing die Hoehe
   der Seite daran, ob die Leiste gerade steht (padding-bottom nur mit einer
   Koerperklasse). Das ergab auf dem Handy einen Kreislauf: Leiste weg -> Seite
   kuerzer -> Button rutscht aus dem Bild -> Leiste kommt -> Seite laenger ->
   Button wieder sichtbar -> Leiste weg. Der Bildschirm flimmerte, weil das
   mehrmals pro Sekunde geschah. Ein fester Abstand kann das nicht ausloesen:
   Die Seite ist immer gleich hoch, egal was die Leiste tut. */
.cta-box { margin-bottom: 80px; }
/* Eine Zeile, immer. Umbricht der Satz, waechst die Leiste - auf einem schmalen
   Handy war sie in der Erprobung 274 Pixel hoch und nahm den halben Bildschirm.
   Was nicht passt, wird abgeschnitten; der Button daneben sagt ohnehin, worum es
   geht, und derselbe Satz steht vollstaendig im Kasten darueber. */
.angebot-leiste p { font-size: 15px; font-weight: 600; color: var(--navy); margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.angebot-leiste .btn { padding: 11px 20px; font-size: 15px; }
@media (prefers-reduced-motion: reduce) {
  .angebot-leiste { transition: none; }
}
@media (max-width: 600px) {
  .angebot-leiste { gap: 10px; padding: 10px 14px; }
  .angebot-leiste p { font-size: 13.5px; }
}
/* Auf dem Handy bleibt nur der Button. Ein auf drei Woerter abgeschnittener Satz
   hilft niemandem, und die Leiste soll eine Zeile hoch sein und nicht mehr. */
@media (max-width: 460px) {
  .angebot-leiste p { display: none; }
}

/* ============================================================
   FASSUNG DER BESUCHERSEITEN
   ============================================================
   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. Es ist nur, was den
   Besucherseiten allein gehoert: groessere Karte, Kartenkante oben,
   Buttonverlauf, Hintergrundmuster, Countdown, Haken. Die Markenfarben gelten
   fuer BEIDE Bereiche und stehen deshalb oben in :root.

   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). Wuerden die Werte
   oben geaendert, 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 Werte des Hintergrundmusters stehen NICHT hier, sondern allein in
   muster_erzeugen.php neben dem Projektordner.
   ============================================================ */

body.wb-besucher {
  /* Die Markenfarben stehen 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=1787924688");
    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; }

/* ---- Button: Orange mit weisser Schrift ----
   Die Zahlen dazu stehen in :root. */
body.wb-besucher .btn {
  /* Der Verlauf laeuft von --button NUR nach unten, er wird nirgends heller.
     Das ist Absicht: --button ist mit 3,02:1 schon die hellste vertretbare
     Stelle, ein aufgehellter Rand oben laege darunter. Oben 3,02:1, in der
     Mitte, wo die Schrift steht, 3,55:1, am Fuss 4,40:1. */
  background-image: linear-gradient(180deg, var(--button) 0%, #D66A00 55%, #C05C00 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 {
  /* Beim Zeigen eine Stufe dunkler: 3,71:1 oben, 4,40:1 in der Mitte, 5,51:1 am Fuss. */
  background-image: linear-gradient(180deg, #D06800 0%, var(--button-hover) 55%, #A85000 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 Button, 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. Ein
   zusaetzlicher Schimmer per Schatten ergaebe zusammen mit dem Fokusring
   weiter unten zwei Ringe um dasselbe Feld.

   Die Farbe ist die Markenfarbe. Sie erreicht auf Weiss 3,02:1 und damit die
   3:1, die fuer Bedienelemente gelten; der Rahmen ist keine Schrift.

   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(--orange);
  box-shadow: inset 0 0 0 1px var(--orange);
}

/* ---- Fokus: sichtbarer Ring fuer alle, die mit der Tastatur bedienen ----
   Nur fuer Links und Buttons. 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: in der Markenfarbe, ohne Unterstreichung ----
   Die Markenfarbe traegt auf Weiss 3,02:1. KEINE Unterstreichung, auf keiner
   Seite und auch nicht beim Zeigen; dort aendert sich ausschliesslich die
   Farbe. */
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); }

/* ---- Hinweise in der Markenfarbe ----
   Diese Regel haelt die Liste der Stellen fest, an denen die Marke als
   SCHRIFT auftritt. Gemessen: 3,02:1 auf Weiss. Das liegt unter den 4,5:1
   fuer Schrift und ist dieselbe bewusste Entscheidung wie beim Button. Wer den
   Ton fuer Schrift je abdunkeln will, findet hier, was dazugehoert. */
body.wb-besucher .dringlichkeit,
body.wb-besucher .social-proof,
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(--orange); }

/* ---- Countdown: die Zahl im ablaufenden Ring ----
   Der Ring zeigt, was die nackte Zahl nicht zeigen konnte: wie weit die
   Wartezeit schon fortgeschritten ist. Bezug ist die Restzeit beim Aufruf der
   Seite, gedeckelt auf eine Stunde - wer drei Stunden vorher da ist, sieht
   einen vollen Ring, der in der letzten Stunde zu laufen beginnt. Gezeichnet
   wird er als Kreis mit unterbrochener Linie; raum.php verschiebt den Beginn
   der Unterbrechung, mehr passiert dort nicht. Der Versatz ist dort NEGATIV,
   damit die Linie im Uhrzeigersinn aufgezehrt wird und nicht dagegen. */
/* Kasten und Zeichnung muessen IMMER gleich gross sein, sonst sitzt die Zahl
   nicht mehr in der Mitte des Rings: Sie wird am Kasten ausgerichtet, der Ring
   aber vom SVG gezeichnet. Genau das ist auf einem Handy passiert - der Kasten
   war auf 168 px geschrumpft, das SVG blieb bei seinen 200 px und lief nach
   rechts unten aus dem Kasten heraus.
   Deshalb: Das SVG fuellt den Kasten (width/height 100 %), und der Kasten
   richtet sich nach der Breite des Bildschirms. Die Angaben width="200" im
   HTML sind nur noch der Notnagel fuer den Fall, dass kein CSS geladen wird;
   massgeblich ist die viewBox, mit der die Zeichnung mitskaliert. */
.countdown-ring { position: relative; width: min(200px, 62vw); height: min(200px, 62vw);
                  margin: 18px auto 6px; }
.countdown-ring svg { width: 100%; height: 100%; display: block;
                      transform: rotate(-90deg); }   /* Beginn oben statt rechts */
.countdown-ring circle { fill: none; stroke-width: 9; }
.ring-bahn { stroke: var(--marke-hell); }
.ring-fort { stroke: var(--orange); stroke-linecap: round; transition: stroke-dashoffset 0.3s linear; }
.ring-mitte {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.ring-text { font-size: 12px; color: var(--text-muted); letter-spacing: 0.06em; text-transform: uppercase; }
body.wb-besucher .countdown-box .countdown { font-size: 28px; letter-spacing: -0.02em; margin: 0 0 2px; }
/* ---- Bestaetigungsseite: der Countdown steht dort allein ----
   bestaetigen.php gibt ihn OHNE die Klasse countdown-box aus, denn dort gibt es
   weder Ring noch eigene Karte. Eine Regel dafuer fehlte, also sah der Timer
   aus wie Fliesstext - genau deshalb ist er niemandem aufgefallen. Er traegt
   hier die Akzentfarbe der gewaehlten Farbwelt (Orange oder Petrolblau) und
   bleibt bewusst gross und fett: Erst ab dieser Groesse haelt Orange auf Weiss
   die 3:1, die fuer grosse Schrift verlangt sind. Tabellenziffern, damit die
   Zahl beim Herunterzaehlen nicht zappelt. */
body.wb-besucher .countdown-gross {
  font-size: 46px; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em;
  color: var(--orange); font-variant-numeric: tabular-nums;
  margin: 4px 0 6px;
}

/* ---- Stufenleiste: wo stehe ich gerade? ----
   Auf bestaetigt.php, also nach dem Absenden des Formulars. Der Besucher soll
   auf einen Blick sehen, dass zwischen "angemeldet" und "dabei" noch ein
   Schritt liegt, den nur er selbst tun kann. Die aktuelle Stufe traegt die
   Akzentfarbe, erledigte das Gruen der Erfolgsmeldungen, kommende bleiben
   grau - dieselbe Bedeutung der Farben wie ueberall sonst. */
body.wb-besucher .stufen {
  list-style: none; display: flex; margin: 0 0 22px; padding: 0;
}
body.wb-besucher .stufen li {
  flex: 1; text-align: center; font-size: 13px; line-height: 1.3;
  color: var(--text-muted); position: relative;
}
/* Die Verbindungslinie liegt HINTER den Kreisen und beginnt beim vorigen
   Element, deshalb der negative Versatz. Beim ersten Punkt entfaellt sie. */
body.wb-besucher .stufen li::before {
  content: ""; position: absolute; top: 15px; left: -50%; width: 100%; height: 2px;
  background: var(--kante); z-index: 0;
}
body.wb-besucher .stufen li:first-child::before { display: none; }
body.wb-besucher .stufen .nr {
  position: relative; z-index: 1; display: flex; width: 30px; height: 30px;
  margin: 0 auto 7px; border-radius: 50%; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; background: #fff;
  border: 2px solid var(--kante); color: var(--text-muted);
}
body.wb-besucher .stufen .erledigt .nr {
  background: var(--gruen); border-color: var(--gruen); color: #fff;
}
body.wb-besucher .stufen .jetzt .nr {
  background: var(--orange); border-color: var(--orange); color: var(--auf-button);
  box-shadow: 0 0 0 4px var(--marke-hell);
}
body.wb-besucher .stufen .jetzt { color: var(--navy); font-weight: 700; }

/* ---- Der eine Auftrag, hervorgehoben ----
   Ohne diesen Klick ist die Anmeldung wertlos, deshalb steht der Satz nicht im
   Fliesstext, sondern in einer eigenen Flaeche in der Markenfarbe. */
body.wb-besucher .auftrag-kasten {
  display: flex; gap: 16px; align-items: flex-start; text-align: left;
  background: var(--marke-hell); border: 1px solid var(--orange);
  border-radius: var(--radius); padding: 20px 22px; margin: 4px 0 18px;
}
body.wb-besucher .auftrag-symbol { font-size: 30px; line-height: 1; color: var(--orange); flex: none; }
body.wb-besucher .auftrag-kasten p {
  margin: 0; font-size: 18.5px; font-weight: 700; color: var(--navy); line-height: 1.4;
}

/* ---- Nachgeordnete Zeile: Spam-Ordner, Neuanmeldung, Button-Hinweis ---- */
body.wb-besucher .klein-grau { font-size: 14px; color: var(--text-muted); margin: 16px 0 0; }

/* ---- Erfolgshaken ueber der Ueberschrift ----
   Gruen, weil es eine Erfolgsmeldung ist und nicht der naechste Handgriff. */
body.wb-besucher .erfolg-haken {
  width: 54px; height: 54px; border-radius: 50%; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  background: var(--gruen-hell); color: var(--gruen); font-size: 30px; font-weight: 700;
}

/* ---- Termin und Countdown als eigene Flaeche ----
   Auf der Erfolgsseite sind das die beiden Angaben, die zaehlen. In einer
   getoenten Flaeche stehen sie zusammen und nicht verstreut im Text. */
body.wb-besucher .termin-block {
  background: var(--marke-hell); border-radius: var(--radius);
  padding: 18px 20px 16px; margin: 18px 0 6px;
}
body.wb-besucher .termin-label {
  margin: 0 0 2px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-muted);
}
body.wb-besucher .termin-gross {
  margin: 0 0 12px; font-size: 19px; font-weight: 700; color: var(--navy);
}
body.wb-besucher .termin-block .countdown-gross { margin: 0; }

/* ---- Zu spaet gekommen ----
   Zwei Seiten sagen jemandem, dass sein Termin gelaufen ist: der Webinarraum
   nach dem Einlassende und die Bestaetigungsseite, wenn der Klick zu spaet
   kommt. Beide sollen nicht bei der Absage stehen bleiben, sondern zum
   naechsten Termin fuehren - deshalb tragen sie eine getoente Flaeche in der
   Akzentfarbe, die zeigt, was es dort zu holen gibt. */
body.wb-besucher .uhr-symbol {
  width: 54px; height: 54px; border-radius: 50%; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  background: var(--marke-hell); color: var(--button); font-size: 27px;
}

/* ============================================================
   ANMELDEKARTE
   ============================================================
   EIN Formular, zwei Anordnungen, entschieden allein hier:

   ab 861 px  zwei Spalten. Links die Markenflaeche mit Terminauswahl und
              Gastgeber, rechts auf Weiss die Nutzenpunkte und die
              Eingabefelder. Ueber beiden Spalten liegen Ueberschrift und
              Eckdaten auf Weiss.
   darunter   ein Strang. Ueberschrift und Gastgeber stehen zusammen in
              einem farbigen Band, alles Weitere darunter auf Weiss.

   Die Markenflaeche traegt in BEIDEN Farbwelten WEISSE Schrift. In der
   Petrolwelt sind das 5,36:1. In der Orangewelt nur 3,02:1, das liegt unter
   den 4,5:1 der Richtlinie. Der Betreiber hat sich am 2026-09-24 bewusst
   dafuer entschieden, weil Navy auf Orange ihm nicht gefaellt. Wer hier
   spaeter etwas aendert, soll wissen, dass das eine Entscheidung war und
   kein Versehen.

   Die zweifarbige Flaeche macht ein Verlauf auf der Karte selbst, keine
   Hintergrundfarbe an den Spalten: Sonst endete das Orange dort, wo der
   kuerzere Inhalt aufhoert, und die Karte haette unten eine weisse Ecke. */
body.wb-besucher .anmeldekarte {
  width: 100%; max-width: 820px; background: #fff;
  border-radius: 14px; overflow: hidden; text-align: left;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
  display: block; gap: 0;
}
body.wb-besucher .ak-kopf { padding: 26px 26px 20px; text-align: center; }
body.wb-besucher .ak-kopf h1 { font-size: 26px; line-height: 1.25; margin: 0; }
body.wb-besucher .ak-unter { font-size: 19px; line-height: 1.4; margin: 10px 0 0; }

body.wb-besucher .ak-gast { padding: 0 26px 22px; }
body.wb-besucher .ak-bild {
  width: 86px; height: 86px; border-radius: 50%; object-fit: cover;
  object-position: 50% 12%; flex: none;
}
body.wb-besucher .ak-gast-name { display: block; font-weight: 800; font-size: 16px; }
body.wb-besucher .ak-gast-rolle { display: block; font-size: 14.5px; opacity: .9; }
body.wb-besucher .ak-gast-zitat {
  font-style: italic; font-size: 14px; line-height: 1.55; margin: 8px 0 0; opacity: .93;
}

body.wb-besucher .ak-lern { padding: 18px 26px 0; }
/* Ueberschrift und Dauer stehen in einer Zeile, die Dauer rechts. Auf schmalen
   Karten bricht sie darunter, deshalb flex-wrap und kein festes Raster. */
body.wb-besucher .ak-lern-kopf {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 4px 14px; margin: 0 0 14px;
}
body.wb-besucher .ak-lern h2 { font-size: 19.5px; font-weight: 800; color: var(--navy); margin: 0; }
body.wb-besucher .ak-dauer {
  font-size: 14.5px; font-weight: 700; color: var(--text-muted); white-space: nowrap;
}

/* Die Beschriftung der Terminauswahl traegt hier mehr Gewicht als sonst: Sie
   ist die Handlungsaufforderung der ganzen Karte. Auf bestaetigen.php steht
   dieselbe Klasse als kleine Zeile ueber einer grossen Zahl, deshalb greift
   die Vergroesserung NUR in der Anmeldekarte. */
body.wb-besucher .ak-termin .termin-label {
  font-size: 17px; font-weight: 800; letter-spacing: 0; text-transform: none;
  margin: 0 0 9px; color: var(--navy);
}

body.wb-besucher .ak-termin { padding: 18px 26px 0; }
/* Die Dringlichkeit steht zwischen Beschriftung und Auswahlfeld, so wollte es
   der Betreiber. Im Auswahlfeld selbst wurde sie frueher abgeschnitten,
   deshalb steht sie ueberhaupt fuer sich. Der Abstand nach unten ist kleiner
   als der nach oben: Sie gehoert zum Feld darunter, nicht zur Beschriftung
   darueber. */
body.wb-besucher .ak-dringend {
  font-size: 14.5px; font-weight: 700; line-height: 1.35; margin: 0 0 8px;
  color: var(--orange);
}
/* Der Wert bleibt zusammen. Bricht die Zeile, dann zwischen "Start" und dem
   Zeitpunkt, nie mitten in "08:00 Uhr". */
body.wb-besucher .ak-dringend-wert { white-space: nowrap; }
body.wb-besucher .ak-rest {
  padding: 16px 26px 26px; display: flex; flex-direction: column; gap: 12px;
}

/* ---- schmal: ein Strang mit farbigem Band oben ---- */
@media (max-width: 860px) {
  body.wb-besucher .ak-kopf,
  body.wb-besucher .ak-gast { background: var(--button); color: #fff; }
  body.wb-besucher .ak-dringend { color: var(--orange); }
  body.wb-besucher .ak-kopf h1 { color: #fff; }
  body.wb-besucher .ak-kopf { padding-bottom: 14px; }
  body.wb-besucher .ak-gast {
    display: flex; align-items: center; gap: 14px; text-align: left;
    padding-bottom: 20px;
  }
  body.wb-besucher .ak-bild { width: 62px; height: 62px; border: 2px solid rgba(255,255,255,0.5); }
  body.wb-besucher .ak-gast-name { font-size: 15px; }
  body.wb-besucher .ak-gast-rolle { font-size: 13.5px; }
  body.wb-besucher .ak-gast-zitat { font-size: 13px; margin-top: 5px; }
  body.wb-besucher .ak-unter { font-size: 17px; }
}

/* ---- breit: zwei Spalten, Marke links ---- */
@media (min-width: 861px) {
  body.wb-besucher .anmeldekarte {
    display: grid; grid-template-columns: 37% 63%;
    background-image: linear-gradient(90deg, var(--button) 0 37%, #fff 37%);
  }
  body.wb-besucher .ak-kopf {
    grid-area: 1 / 1 / 2 / 3; background: #fff; padding: 32px 34px 22px;
  }
  body.wb-besucher .ak-kopf h1 { font-size: 28px; }

  body.wb-besucher .ak-termin { grid-area: 2 / 1 / 3 / 2; color: #fff; padding: 24px 22px 20px; }
  body.wb-besucher .ak-termin .termin-label,
  body.wb-besucher .ak-termin .ak-dringend { color: #fff; }

  body.wb-besucher .ak-gast {
    grid-area: 3 / 1 / 4 / 2; color: #fff; text-align: center;
    padding: 20px 22px 28px; border-top: 1px solid rgba(255,255,255,0.28);
    align-self: start;
  }
  body.wb-besucher .ak-gast .ak-bild {
    display: block; margin: 0 auto 10px; border: 3px solid rgba(255,255,255,0.5);
  }

  body.wb-besucher .ak-lern { grid-area: 2 / 2 / 3 / 3; padding: 26px 28px 0; }
  body.wb-besucher .ak-rest { grid-area: 3 / 2 / 4 / 3; padding: 18px 28px 28px; }
}

/* Eingebettet in eine fremde Seite gibt es keine Karte und keinen Schatten,
   sonst saesse ein Kasten im Kasten. */
body.embed .anmeldekarte { box-shadow: none; border-radius: 0; max-width: 100%; }

/* Vorfreude: die Warteraum-Punkte des Betreibers, hier als Grund, neu zu buchen. */
body.wb-besucher .vorfreude {
  background: var(--marke-hell); border-radius: var(--radius);
  padding: 18px 20px 16px; margin: 18px 0 8px; text-align: left;
}
body.wb-besucher .vorfreude h2 {
  font-size: 15px; color: var(--navy); margin: 0 0 10px;
}
/* Die Haken-Liste steht in ZWEI getoenten Kaesten: im Webinarraum unter
   "Das erwartet Dich im Webinar" und auf der Bestaetigungsseite unter dem
   Hinweis auf den naechsten Start. Deshalb eine eigene Klasse und nicht
   zweimal dieselben Regeln unter verschiedenen Elternnamen. */
body.wb-besucher .nutzen-liste {
  list-style: none; padding: 0; margin: 0; text-align: left;
}
body.wb-besucher .nutzen-liste li {
  position: relative; padding-left: 27px; margin-bottom: 8px; font-size: 15px;
}
body.wb-besucher .nutzen-liste li:last-child { margin-bottom: 0; }
body.wb-besucher .nutzen-liste li::before {
  content: "✓"; position: absolute; left: 0; top: -1px;
  color: var(--button); font-weight: 700;
}

/* "Jetzt zaehlt jede Minute": steht auf bestaetigt.php nur dann, wenn der
   gewaehlte Termin in wenigen Minuten beginnt. Der Ring darin ist derselbe
   wie im Warteraum, er kommt aus includes/countdown-ring.php. */
body.wb-besucher .eilt-kasten {
  background: var(--marke-hell); border-radius: var(--radius);
  padding: 20px 20px 18px; margin: 0 0 22px; text-align: center;
}
body.wb-besucher .eilt-titel {
  font-size: 19px; font-weight: 800; color: var(--navy); margin: 0 0 12px;
}
body.wb-besucher .eilt-text {
  font-size: 15.5px; line-height: 1.55; margin: 12px 0 0;
}
/* Der Ring steht hier auf getoentem Grund. Seine Bahn traegt sonst genau
   diesen Ton und waere unsichtbar, deshalb hier Weiss. Die Zahl in der Mitte
   holt ihre Groesse sonst aus .countdown-box, die es hier nicht gibt. */
body.wb-besucher .eilt-kasten .countdown-ring { margin: 0 auto; }
body.wb-besucher .eilt-kasten .ring-bahn { stroke: #fff; }
body.wb-besucher .eilt-kasten .countdown {
  font-size: 28px; font-weight: 800; color: var(--navy);
  letter-spacing: -0.02em; margin: 0 0 2px; font-variant-numeric: tabular-nums;
}

/* Naechster Start: nimmt der Absage die Endgueltigkeit. */
body.wb-besucher .sofort {
  background: var(--marke-hell); border-radius: var(--radius);
  padding: 16px 20px; margin: 18px 0 8px;
}
body.wb-besucher .sofort strong {
  display: block; font-size: 18px; color: var(--navy); margin-bottom: 4px;
}
body.wb-besucher .sofort span { display: block; font-size: 15px; color: var(--text-muted); }
body.wb-besucher .sofort .nutzen-liste { margin-top: 10px; }
/* Kuendigt der Satz die Liste an, steht er auf derselben Kante wie sie; mittig
   ueber linksbuendigen Punkten sieht er verrutscht aus. */
body.wb-besucher .sofort span.einleitung { text-align: left; }

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(--orange); 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: 24px; }
  body.wb-besucher .countdown-gross { font-size: 34px; }
  body.wb-besucher .stufen li { font-size: 11.5px; }
  body.wb-besucher .auftrag-kasten { padding: 16px 16px; gap: 12px; }
  body.wb-besucher .auftrag-kasten p { font-size: 17px; }
  body.wb-besucher .termin-gross { font-size: 17px; }
  body.wb-besucher .vorfreude,
  body.wb-besucher .sofort { padding: 15px 16px; }
  body.wb-besucher .sofort strong { font-size: 16.5px; }
  .warteraum-titel { font-size: 21px; }
}

/* ============================================================
   FARBWELT PETROLBLAU
   ============================================================
   Zweite Farbwelt, umschaltbar in der Verwaltung unter Einstellungen. Ab Werk
   ist Orange eingestellt.

   Der ganze Block besteht fast nur aus Farbnamen: Weil die Schrift auf der
   Markenflaeche in beiden Welten Weiss ist, muss hier nicht Regel fuer Regel
   nachgezogen werden.

   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;
  /* Buttonflaeche: in dieser Welt unveraendert die Markenfarbe, Weiss traegt
     darauf 5,36:1. */
  --button: #0E7490;
  --button-hover: #0B5C73;
  --auf-button: #FFFFFF;
  /* 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=1787914359"); }
}
body.wb-besucher.wb-petrol.embed { background-image: none; }

/* ============================================================
   HINTERGRUNDMUSTER ABSCHALTEN
   ============================================================
   Der Kunde bekommt dafuer genau EINEN Schalter in der Verwaltung, direkt unter
   der Farbwahl: "Hintergrundmuster anzeigen", ab Werk an. Keine Regler; fuenf
   Regler beim Kunden waeren fuenf Wege, das Aussehen zu zerlegen, plus
   Supportaufwand. Ist der Haken weg, haengt includes/seite-start.php die Klasse
   wb-ohne-muster an den Koerper.

   Diese Regel steht ganz am Ende der Datei, und das ist wichtig: Sie hat
   dieselbe Gewichtung wie body.wb-besucher.wb-petrol weiter oben (beides zwei
   Klassen). Bei gleicher Gewichtung entscheidet die Reihenfolge, also muss sie
   danach kommen, sonst bliebe in der Petrolwelt das Muster trotz Haken stehen.
   Wer hier etwas anfuegt, haengt es DARUNTER.

   Sie steht bewusst NICHT in der 900-Pixel-Bedingung: Ausgeschaltet ist
   ausgeschaltet, in jeder Fenstergroesse. */
body.wb-besucher.wb-ohne-muster { background-image: none; }