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

/* Ein hochgeladenes Logo statt eines Symbols (die Terminvereinbarung trägt
   das Logo der Praxis neben dem Namen). Es steht OHNE Plättchen: Ein
   Wort-Bild-Zeichen ist selten quadratisch, und in 38 Pixeln Kantenlänge
   wäre es entweder verzerrt oder beschnitten. Die feste Höhe hält es
   trotzdem auf der Zeile des Namens, die Breite darf es sich nehmen. */
.oe-marke.mit-logo .oe-marke-zeichen {
    width: auto;
    height: 44px;
    max-width: 180px;
    background: none;
    border: 0;
    border-radius: 0;
}

.oe-marke.mit-logo .oe-marke-zeichen img {
    display: block;
    width: auto;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
}

/* Auf schmalen Geräten steht die Marke schnell in zwei Zeilen; ein kleineres
   Logo hält sie in einer. */
@media (max-width: 480px) {
    .oe-marke.mit-logo .oe-marke-zeichen { height: 34px; max-width: 130px; }
}

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