/* ==========================================================================
   Die gemeinsame Grundlage aller öffentlichen Seiten (23.08.2026)

   ÖFFENTLICH heißt: Hier steht die Anwendung nicht vor dem Mitarbeiter,
   sondern vor einem Kunden. Das sind acht Seiten in fünf Familien, die alle
   ihr eigenes Blatt haben:

     landingpage.css      zahnschutz · berufsunfaehigkeit · risikoleben · karriere
     termin.css           termin_buchen · termin_absagen · termin_vorschlag ·
                          videoraum · newsletter · abmelden · besichtigung_buchen
     formular.css         formular
     kalender-geteilt.css kalender_geteilt
     login.css            login

   WARUM DIESE DATEI. Die fünf Blätter sind über ein Jahr nebeneinander
   gewachsen, und dabei ist derselbe Baustein fünfmal entstanden – jedes Mal
   unter eigenem Namen und jedes Mal eine Spur anders:

     Die Marke      .lp-brand · .tb-marke · .kg-marke · .lg-brand · .fb-marke
                    Name in --fs-8/800 (drei Seiten) oder --fs-7/700 (Anmeldung),
                    Zusatz in --fs-3, --fs-4 ODER --fs-5, Abstand darunter
                    0px, 18px oder 22px.
     Die WA-Zeile   .lp-wa · .tb-wa – Wort für Wort dieselben 30 Zeilen in zwei
                    Dateien; der Kommentar darüber sagte es selbst („dieselbe
                    Zeile wie auf der Landingpage").

   Nebeneinander sieht ein Kunde diese Unterschiede nie – er sieht nur, dass
   die Terminbuchung und die Anmeldung nicht dieselbe Firma zu sein scheinen.

   WAS HIERHER GEHÖRT: ein Baustein, den mehr als eine Familie zeigt.
   WAS NICHT: alles, was nur eine Seite hat – das bleibt in ihrem Blatt.

   REIHENFOLGE. Diese Datei steht in jeder Seite als ERSTER Eintrag von
   $extraCss, das Blatt der Familie danach. Bei gleicher Spezifität gewinnt
   das Spätere: Eine Familie kann also nachbessern, ohne dass hier eine
   Ausnahme entsteht.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Die Marke über der Seite

   Sie steht auf jeder öffentlichen Seite an derselben Stelle: oben links,
   ohne Kasten, ohne Trennlinie. Auf hellem Grund trägt sie die Schriftfarbe
   der Seite, auf der dunklen Bühne die weiße – deshalb `inherit` und keine
   eigene Farbe: Der Baustein fragt nicht, worauf er liegt.

   Der Akzent im Namen kommt aus gesellschaftMarkeHtml() und trägt die Klasse
   `.accent`; welcher Teil des Namens ihn bekommt, entscheidet das
   Erscheinungsbild (gesellschaft.php), nicht das Blatt.
   -------------------------------------------------------------------------- */
.oe-marke {
    /* Der Zusatz („Niederlassung Ahrweiler") ist auf Papier der leise Ton des
       Hauses, auf der Bühne der leise Ton der Bühne. Als Variable am Baustein
       statt als zweite Regel: So steht die Umschaltung an einer Stelle. */
    --oe-marke-sub: var(--brand-quiet);

    position: relative;
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 0 var(--sp-7);
}

/* Auf der dunklen Bühne (Anmeldung, Landingpage-Kopf). */
.oe-marke.auf-buehne {
    --oe-marke-sub: var(--stage-soft);
}

/* Mit Zeichen davor (die Anmeldung): Dann liegen Plättchen und Schrift auf
   einer Mittellinie statt auf der Grundlinie. */
.oe-marke.mit-zeichen { align-items: center; }

.oe-marke-zeichen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: var(--r-ctl);
    background: rgba(255, 255, 255, .08);
    border: 1px solid var(--stage-line);
    color: var(--brand-accent);
}

.oe-marke-name {
    font-size: var(--fs-8);
    font-weight: 700;
    letter-spacing: -0.015em;
    /* Die Marke ist auf den meisten Seiten ein Verweis auf die Startseite.
       `inherit` schlägt Bootstraps Linkfarbe (Klasse vor Element) und hält
       den Namen in der Schriftfarbe der Seite. */
    color: inherit;
    text-decoration: none;
}

.oe-marke-name .accent { color: var(--brand-accent); }

.oe-marke-sub {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: var(--fs-5);
    color: var(--oe-marke-sub);
}

/* Trägt die Marke Name und Zusatz übereinander (die Anmeldung, weil rechts
   daneben das Zeichen steht), stapelt dieser Halter sie. */
.oe-marke-text { display: block; }
.oe-marke-text .oe-marke-name,
.oe-marke-text .oe-marke-sub { display: block; }

/* --------------------------------------------------------------------------
   Die WhatsApp-Zeile unter jedem öffentlichen Formular

   Ein Angebot, keine Pflicht: eine eigene Zeile mit Rahmen, die beim Anhaken
   WhatsApp-grün wird. Sie steht unter dem Formular der Landingpages UND unter
   dem der Terminbuchung – und stand deshalb bis zum 23.08.2026 in beiden
   Blättern.
   -------------------------------------------------------------------------- */
.oe-wa {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 2px 0 14px;
    padding: 11px 14px;
    border: 1px solid var(--brand-border);
    border-radius: var(--oe-radius-sm);
    background: var(--brand-bg);
    cursor: pointer;
    transition: border-color var(--t-fast) var(--ease-out),
                background-color var(--t-fast) var(--ease-out);
}

.oe-wa:hover { border-color: var(--btn-green-border-hover); }

.oe-wa:has(input:checked) {
    border-color: var(--btn-green-border-an);
    background: var(--btn-green-bg-light);
}

.oe-wa:has(input:focus-visible) {
    border-color: var(--btn-green);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--btn-green) 22%, transparent);
}

.oe-wa input {
    flex: none;
    width: 17px;
    height: 17px;
    accent-color: var(--btn-green);
}

.oe-wa-icon {
    flex: none;
    display: inline-flex;
    color: var(--btn-green);
}
.oe-wa-icon svg { width: 19px; height: 19px; }

.oe-wa-text {
    font-size: var(--fs-5);
    line-height: 1.45;
    color: var(--brand-quiet);
}

.oe-wa-text strong {
    display: block;
    font-size: var(--fs-6);
    font-weight: 700;
    color: var(--brand-text);
}