@CHARSET "UTF-8";

/*
 * Loginseite im SYNQONY-Stil (#955).
 *
 * Farben, Schriften, Logo und Favicon stammen aus der Vorgabe der
 * Grafik-Abteilung. Abgeleitete Werte - Hover-Toene, Flaechenfarben,
 * Linkfarbe - sind unten einzeln als solche gekennzeichnet.
 *
 * Die Marken-Tokens (--syn-*) und die Hausschrift stehen NICHT hier, sondern
 * in synqony_brand.css - sie werden inzwischen auch vom angemeldeten Portal
 * gebraucht. LoginSynqonyGUI laedt die beiden Dateien in dieser Reihenfolge.
 * Wer hier einen Wert vermisst, sucht ihn dort.
 */

/* ==========================================================================
   Grundgeruest
   ========================================================================== */

/*
 * ACHTUNG zur Selektor-Wahl: LoginGUI::create() haengt zuerst dieses
 * Stylesheet und DANACH selectDesign() mit gesamt_<design>_login.css in den
 * Head. Jenes Bundle bringt eigene body- und input-Regeln mit (Arial, 12px,
 * Hintergrund #eee) und wuerde bei gleicher Spezifitaet gewinnen, weil es
 * spaeter kommt. Deshalb steht hier "html body" statt "body" - und weiter
 * unten "body .ui-dialog" statt ".ui-dialog". Klassenselektoren (.syn-*)
 * brauchen den Zusatz nicht, sie schlagen die Elementselektoren des Bundles
 * ohnehin.
 */
html body {
    margin: 0;
    padding: 0;
    background: var(--syn-bg);
    color: var(--syn-text);
    font-family: var(--syn-font-sans);
    font-size: var(--syn-font-size);
    line-height: var(--syn-line-height);
}

/*
 * login_wrapper kommt aus LoginGUI::create() und umschliesst Kopf, Inhalt und
 * Fuss. Er spannt genau ueber die Fensterhoehe; gescrollt wird nicht die Seite,
 * sondern der Inhaltsbereich darin (siehe .syn-main). Dadurch bleiben Kopf,
 * Anmeldeleiste und Fuss immer sichtbar, waehrend eine lange Seminarliste
 * scrollt.
 *
 * height statt min-height, weil create() dort "min-height: 100%" als
 * Inline-Style setzt - der Prozentwert laeuft mangels definierter Elternhoehe
 * ins Leere und stoert hier nicht.
 *
 * dvh nach vh: Auf Mobilgeraeten aendert sich die Fensterhoehe beim Ein- und
 * Ausblenden der Browserleisten; dvh macht das mit, vh bleibt der Rueckfall
 * fuer aeltere Browser.
 */
.login_wrapper {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
}

.syn-container {
    box-sizing: border-box;
    max-width: var(--syn-container);
    margin: 0 auto;
    padding: 0 32px;
    width: 100%;
}

/* ==========================================================================
   Kopfbereich: Logo + Rueckruf
   ========================================================================== */

.syn-header {
    background: var(--syn-bg);
}

.syn-header__inner {
    align-items: center;
    display: flex;
    justify-content: space-between;
    min-height: 120px;
}

/*
 * Feste Hoehe statt max-height. Das galt schon fuer das fruehere SVG, das nur
 * eine viewBox mitbrachte und im Flex-Container auf 0 x 0 kollabierte; beim
 * jetzigen PNG bleibt es richtig, weil die Hoehe hier zentral ueber
 * --syn-logo-height steuerbar sein soll. Die width/height-Attribute am
 * img-Element ergaenzen das nur gegen den Sprung im Seitenaufbau.
 */
.syn-header__logo {
    flex: 0 0 auto;
}

/* Mit der Beta-Marke (LoginSynqonyGUI::markenLogo()) steht sie neben dem Logo. */
.syn-header__logo:has(.beta-marke) {
    align-items: center;
    display: flex;
    gap: 10px;
}

.beta-marke {
    background: var(--syn-primary);
    border-radius: var(--syn-radius-small);
    color: var(--syn-secondary);
    cursor: help;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 2px 8px;
    text-transform: uppercase;
}

.syn-header__logo img {
    display: block;
    height: var(--syn-logo-height);
    max-width: 100%;
    width: auto;
}

/* Dunkle Darstellung (data-darstellung, darstellungDerSeite()): das Logo mit
   weisser Schrift statt des dunklen. */
.syn-header__logo .syn-header__logo-bild--dunkel {
    display: none;
}

@media (prefers-color-scheme: dark) {
    html[data-darstellung="system"] .syn-header__logo-bild--hell {
        display: none;
    }

    html[data-darstellung="system"] .syn-header__logo .syn-header__logo-bild--dunkel {
        display: block;
    }
}

html[data-darstellung="dunkel"] .syn-header__logo-bild--hell {
    display: none;
}

html[data-darstellung="dunkel"] .syn-header__logo .syn-header__logo-bild--dunkel {
    display: block;
}

/*
 * Der Knopf zurueck zum klassischen Design (Login\DesignSwitchButton),
 * zwischen Logo und Rueckruf. Darunter die Beta-Marke: das neue Design ist
 * noch in Arbeit.
 */
.designwahl {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: center;
}

/* Mit :link und :visited, sonst gewaenne a:link aus dem Buendel (gleiche Spezifitaet, spaeter geladen). */
.designwahl__knopf,
.designwahl__knopf:link,
.designwahl__knopf:visited {
    border: 2px solid var(--syn-text);
    border-radius: var(--syn-radius);
    color: var(--syn-text);
    font-family: var(--syn-font-display);
    font-size: 16px;
    font-weight: 600;
    padding: 8px 20px;
    text-decoration: none;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

/* Beim Ueberfahren wie die Support-Knoepfe im Portal, siehe .syn-button:hover. */
.designwahl__knopf:hover,
.designwahl__knopf:focus-visible {
    background: var(--syn-fill);
    border-color: var(--syn-primary-ink);
    color: var(--syn-fill-ink);
}

.designwahl__knopf:focus-visible {
    outline: 2px solid var(--syn-focus);
    outline-offset: 2px;
}

.designwahl__hinweis {
    color: var(--syn-text-muted);
    font-size: 13px;
}

.designwahl__beta {
    background: var(--syn-primary);
    border-radius: var(--syn-radius-small);
    color: var(--syn-secondary);
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    margin-right: 4px;
    padding: 2px 7px;
    text-transform: uppercase;
}

.syn-callback {
    align-items: center;
    color: var(--syn-text);
    cursor: pointer;
    display: flex;
    font-family: var(--syn-font-display);
    font-size: 21px;
    gap: 16px;
}

.syn-callback:hover,
.syn-callback:focus-visible {
    color: var(--syn-primary-strong);
}

.syn-callback:focus-visible {
    border-radius: var(--syn-radius);
    outline: 2px solid var(--syn-focus);
    outline-offset: 6px;
}

/*
 * Hoehe und Breite explizit: das Zeichen ist eine Maske ohne eigenen Inhalt -
 * ohne Angabe kollabiert es im Flex-Container auf 0 x 0.
 *
 * Das Symbol traegt seine Farbe selbst und folgt deshalb nicht mehr dem
 * Hover-Wechsel des Textes.
 */
.syn-callback__icon {
    display: block;
    flex: 0 0 auto;
    height: 40px;
    width: 40px;
    /* Maske in der Farbe der Beschriftung. */
    background-color: currentColor;
    -webkit-mask: url("/img/tabler/outline/phone-call.svg") center / contain no-repeat;
    mask: url("/img/tabler/outline/phone-call.svg") center / contain no-repeat;
}

/* Rueckruf und Umschalter der Darstellung (LoginSynqonyGUI::createHeaderActions()) */
.syn-header__actions {
    align-items: center;
    display: flex;
    gap: 24px;
}

/*
 * Umschalter der Darstellung (Login\AppearanceToggle), ganz rechts im Kopf wie
 * in zedal-web-order. Welches seiner drei Zeichen er zeigt und dass er ohne
 * Attribut auf <html> wegbleibt, steht in zedal.css.
 */
.syn-darstellung {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: var(--syn-radius-pill);
    color: var(--syn-text);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    height: 44px;
    justify-content: center;
    padding: 0;
    transition: background-color .18s ease;
    width: 44px;
}

.syn-darstellung:hover {
    background-color: var(--syn-bg-muted);
}

.syn-darstellung:focus-visible {
    outline: 2px solid var(--syn-focus);
    outline-offset: 2px;
}

/* ==========================================================================
   Loginleiste
   ========================================================================== */

.syn-loginbar {
    background: var(--syn-login-bar);
    padding: 22px 0;
}

/*
 * Nur so breit wie die Feldzeile und mittig im Streifen. Dadurch kann die
 * Fehlermeldung darunter buendig am Benutzernamen ausgerichtet werden, statt
 * am Rand des Containers zu kleben oder frei zentriert zu schweben.
 */
.syn-loginbar__stack {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    width: fit-content;
}

.syn-loginbar__inner {
    align-items: flex-start;
    display: flex;
    gap: var(--syn-gap);
    justify-content: center;
}

.syn-field {
    display: flex;
    flex-direction: column;
    width: 340px;
}

.syn-field__input {
    background-color: var(--syn-border-input);
    background-position: 12px center;
    background-repeat: no-repeat;
    border: 1px solid var(--syn-border-input);
    border-radius: var(--syn-radius);
    box-sizing: border-box;
    color: var(--syn-bar-field-ink);
    /* Das Feld ist in jeder Darstellung weiss. Ohne diese Angabe faerbt der
       Browser gespeicherte Anmeldedaten in der dunklen Darstellung olivgelb
       ein (:-webkit-autofill unter color-scheme: dark). */
    color-scheme: light;
    font-family: inherit;
    font-size: var(--syn-font-size);
    height: 44px;
    padding: 0 12px 0 42px;
    width: 100%;
}

.syn-field__input::placeholder {
    color: var(--syn-placeholder);
}

.syn-field__input:focus {
    border-color: var(--syn-focus);
    outline: 2px solid var(--syn-focus);
    outline-offset: 1px;
}

.syn-field__meta {
    color: var(--syn-bar-ink);
    font-size: var(--syn-font-size-small);
    padding: 6px 2px 0;
}

body .syn-field__meta a,
body .syn-field__meta a:link,
body .syn-field__meta a:visited {
    color: var(--syn-bar-ink);
    font-size: inherit;
    font-weight: inherit;
    text-decoration: none;
}

.syn-field__meta a:hover,
.syn-field__meta a:focus {
    text-decoration: underline;
}

.syn-loginbar__action {
    padding-top: 0;
}

/*
 * Beschriftung in Navy, nicht in Weiss.
 *
 * Das Signature-Teal ist ein helles Mint: Weiss darauf kommt auf 1,8:1 - ein
 * Knopf, den man nicht lesen kann. Navy darauf sind 10,3:1, beim Ueberfahren
 * (teal-strong) noch 7,5:1. In zedal-web-order ist es aus demselben Grund so
 * gehalten.
 *
 * Der Knopf steht im Verlauf, rechts der Mitte, wo dieser bei etwa
 * rgb(11,94,90) liegt: Die Fuellung grenzt sich davon mit 3,7:1 ab (Schwelle
 * fuer Bedienelemente 3:1). Ein Knopf in Navy waere zwar gut zu lesen, verlor
 * aber genau diese Kante - dunkel auf dunkel, gemessen 2,2:1.
 */
/*
 * Masse und Schrift sind am 2026-09-09 an synqony.com gemessen und
 * uebernommen - vorher war die Schrift zwar schon Chillax, aber 18px ohne
 * Gewichtsangabe (also 400), und genau das war der sichtbare Unterschied:
 * Chillax in 400 wirkt neben derselben Schrift in 500 duenn und fremd.
 *
 * Gemessen am Knopf "Kontakt aufnehmen" auf synqony.com:
 *   background #0fd8b1, color #091123, Chillax 15px/18px, Gewicht 500,
 *   border-radius 32px, padding 12px 24px, Hoehe 44px.
 *
 * Uebernommen sind Schriftgroesse, Gewicht, Zeilenhoehe und der Innenabstand.
 * --syn-radius-pill (999px) ergibt bei 44px Hoehe dieselbe Rundung wie deren
 * 32px - ein Halbrund ist ein Halbrund.
 */
.syn-button {
    background: var(--syn-primary);
    border: 1px solid var(--syn-primary);
    border-radius: var(--syn-radius-pill);
    color: var(--syn-secondary);
    cursor: pointer;
    font-family: var(--syn-font-display);
    font-size: 15px;
    font-weight: 500;
    height: 44px;
    line-height: 18px;
    min-width: 150px;
    padding: 0 24px;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

/*
 * Der Knopf IN der Anmeldeleiste steht auf dem Balken und nimmt dessen Rolle
 * (--syn-bar-button). Im Standard ist das derselbe Wert wie oben; ein Theme
 * mit Akzent-Balken bekaeme sonst einen Knopf in der Farbe seines Grundes.
 *
 * Vor der Hover-Regel darunter und mit derselben Spezifitaet (0,2,0): so
 * gewinnt beim Ueberfahren weiter die spaeter stehende Hover-Regel.
 */
.syn-loginbar .syn-button {
    background: var(--syn-bar-button);
    border-color: var(--syn-bar-button);
    color: var(--syn-bar-button-ink);
}

/*
 * Beim Ueberfahren wechselt der Knopf auf Navy mit weisser Schrift - wie auf
 * synqony.com. Weiss auf Navy sind 18,8:1; der Wechsel von Teal (Navy darauf
 * 10,3:1) ist also in beide Richtungen tragfaehig.
 *
 * Nur die Farbe wechselt, die Groesse bleibt - wie bei den Knoepfen des
 * Support-Dialogs im Portal, die dafuer die Vorlage sind. Von dort kommt auch
 * die Kante in --syn-primary-ink: hell dunkelgruen und kaum vom Navy zu
 * unterscheiden, dunkel Mint. Dunkel ist Navy zugleich der Grund der Seite,
 * und die Mint-Kante haelt den Umriss des Knopfs.
 *
 * Die Uebergaenge stehen am RUHEZUSTAND und nicht am Hover: nur so gelten sie
 * auch beim Verlassen, die Farbe blendet also zurueck statt zu springen.
 *
 * Wer Bewegung abbestellt hat (prefers-reduced-motion), bekommt den
 * Farbwechsel ohne Uebergang - siehe das Ende dieser Datei.
 */
.syn-button:hover,
.syn-button:focus-visible {
    background: var(--syn-fill);
    border-color: var(--syn-primary-ink);
    color: var(--syn-fill-ink);
}

/*
 * Der "Buchen"-Knopf der Seminarliste. Er folgt der Groesse und dem Gewicht
 * des Hauptknopfs (siehe dort), bleibt aber die zweite Stufe: keine Flaeche,
 * dafuer die Marken-Kante und die dunkelgruene Schrift (8,6:1 auf Weiss).
 */
.syn-button--ghost {
    background: transparent;
    border: 1px solid var(--syn-primary);
    color: var(--syn-primary-ink);
    font-size: 15px;
    font-weight: 500;
    height: 40px;
    line-height: 18px;
    min-width: 120px;
}

/*
 * Der Buchen-Knopf ist ein a-Element, und .syn-button--ghost allein macht
 * daraus keinen Knopf: Ein <a> bleibt inline und unterstrichen, wo ein
 * <button> beides von Haus aus richtig hat.
 *
 * Hier stand, der Knopf finge sich sonst das weisse "a:link" des
 * Login-Buendels ein. Das trifft fuer diese Maske NICHT zu und wurde am
 * 2026-09-21 nachgemessen: Die SYNQONY-Loginseite laedt das Buendel gar
 * nicht (LoginSynqonyGUI::__construct setzt synqony_brand.css und
 * login_synqony.css, sonst nichts), und ohne die Regeln unten bleibt die
 * Schrift auf --syn-primary-ink. Wirksam sind display, text-decoration und
 * font-weight - Letzteres gegen die 500 aus .syn-button, nicht gegen 700 aus
 * dem Buendel.
 *
 * Der body-Prefix bleibt trotzdem stehen: Er kostet nichts und traegt, falls
 * die Maske je wieder ein Buendel mit "a:link" laedt.
 */
body a.syn-button--ghost,
body a.syn-button--ghost:link,
body a.syn-button--ghost:visited {
    /* inline-flex, damit das a-Element die Hoehe aus .syn-button annimmt */
    align-items: center;
    /* a-Elemente erben die Schrift nicht vom Knopf-Stil, deshalb hier erneut */
    font-family: var(--syn-font-display);
    color: var(--syn-primary-ink);
    display: inline-flex;
    /* sonst 500 aus .syn-button - der Login-Knopf daneben laeuft auf 400 */
    font-weight: normal;
    justify-content: center;
    text-decoration: none;
}

/*
 * Der Buchen-Knopf geht denselben Weg: Navy mit weisser Schrift. Er ist die
 * zweite Stufe und startet ohne Flaeche - beim Ueberfahren treffen sich beide
 * Stufen also im selben Zustand, und das ist gewollt: der Zeiger sagt "hier
 * passiert etwas", nicht "das hier ist die zweite Stufe".
 */
body a.syn-button--ghost,
.syn-button--ghost {
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

body a.syn-button--ghost:hover,
body a.syn-button--ghost:focus-visible,
.syn-button--ghost:hover,
.syn-button--ghost:focus-visible {
    background: var(--syn-fill);
    border-color: var(--syn-primary-ink);
    color: var(--syn-fill-ink);
    text-decoration: none;
}

/*
 * Fehlermeldung der Anmeldung: unter den Feldern, buendig zum Benutzernamen.
 * login.js blendet den Kasten ueber seine Id ein und aus, der Wrapper bleibt
 * dabei stehen - deshalb sitzt der Abstand am Kasten und nicht am Wrapper,
 * sonst bliebe bei ausgeblendeter Meldung eine Luecke.
 */
.syn-loginbar__error {
    align-self: flex-start;
    max-width: 100%;
}

/*
 * Kein farbiger Kasten: Auf dem Verlauf konkurriert er mit der Leiste selbst.
 * Das Fehlersignal tragen die markierten Felder und das Zeichen davor, der
 * Text bleibt weiss und damit gut lesbar.
 */
.syn-loginbar__errorbox {
    align-items: center;
    color: var(--syn-bar-ink);
    display: flex;
    font-size: var(--syn-font-size-small);
    font-weight: 600;
    gap: 8px;
    margin-top: 8px;
}

/* Ausrufezeichen im Kreis - der Text selbst kommt aus PHP bzw. login.js */
.syn-loginbar__errorbox::before {
    background: var(--syn-error-bg);
    border-radius: 50%;
    color: var(--syn-text-inverse);
    content: "!";
    flex: 0 0 auto;
    font-size: 12px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    width: 18px;
}

/* Betroffene Eingabefelder markieren */
.syn-field__input--error {
    border-color: var(--syn-error-bg);
    box-shadow: 0 0 0 2px rgba(216, 64, 47, 0.35);
}

/* ==========================================================================
   Inhaltsbereich: Akademie-Werbung und Praesenztermine
   ========================================================================== */

/*
 * Der Inhaltsbereich nimmt den Platz zwischen Anmeldeleiste und Fuss ein und
 * scrollt bei Bedarf selbst.
 *
 * min-height: 0 ist dabei nicht optional: Ein Flex-Kind schrumpft sonst nicht
 * unter die Hoehe seines Inhalts, der Bereich wuerde also wachsen statt zu
 * scrollen und den Fuss aus dem Fenster schieben.
 */
.syn-main {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 56px 0 72px;
}

/* --------------------------------------------------------------------------
   Akademie-Werbung
   -------------------------------------------------------------------------- */

/*
 * Der Werbeblock ist eine Karte im Inhaltsbereich und keine durchgehende
 * Farbflaeche: .syn-main bringt oben 56px Innenabstand mit, eine randlose
 * Flaeche haette darum einen weissen Streifen unter der Anmeldeleiste stehen
 * gehabt - als waere sie verrutscht.
 *
 * Light Mint als Grund, weil es die einzige Markenflaeche ist, auf der die
 * Hausfarben ruhig stehen: Navy darauf 17,5:1, das dunkle Mint des Kickers
 * 8,0:1.
 *
 * Den Seitenabstand haelt .syn-container an der section darueber. Beides an
 * einem Element ginge nicht: Der Innenabstand der Karte ueberschreibt den des
 * Containers, und die Flaeche stuende dann am Fensterrand.
 *
 * Dieselbe Karte samt Ueberschrift und Text traegt die Rueckkehrseite der
 * Zertifikatsbestellung (.syn-abschluss, OrderCertificateGUI).
 */
.syn-academy__inner,
.syn-abschluss {
    background: var(--syn-primary-soft);
    border-radius: var(--syn-radius);
    padding: 44px 48px 48px;
}

.syn-academy__kicker {
    color: var(--syn-primary-ink);
    font-size: var(--syn-font-size-small);
    font-weight: 600;
    letter-spacing: 0.08em;
    margin: 0;
    text-transform: uppercase;
}

.syn-academy__headline,
.syn-abschluss__titel {
    color: var(--syn-text);
    font-family: var(--syn-font-display);
    font-size: 32px;
    font-weight: 600;
    line-height: 1.2;
    margin: 10px 0 0;
}

/*
 * Die Zeilenlaenge ist begrenzt, nicht die Breite der Karte: ueber die vollen
 * 1420px gelesen verliert man die Zeile.
 */
.syn-academy__lead,
.syn-abschluss__text {
    color: var(--syn-text-secondary);
    margin: 10px 0 0;
    max-width: 62ch;
}

/* Die Knoepfe der Fehlerseite (classes/common/PortalErrorPage.php) unter dem Text. */
.syn-abschluss__aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 28px 0 0;
}

/*
 * Ein Verweis als Knopf nimmt wie .syn-button--ghost die Hoehe des Knopfs an,
 * beide Stufen dieselbe. Die Farben bleiben bei .syn-button, damit dessen
 * Hover-Regel greift.
 */
.syn-abschluss__aktionen a.syn-button {
    align-items: center;
    box-sizing: border-box;
    display: inline-flex;
    height: 44px;
    justify-content: center;
    text-decoration: none;
}

/*
 * Drei gleich breite Kacheln. Grid und nicht Flex, damit alle drei dieselbe
 * Breite bekommen - bei Flex richtet sich die Breite nach dem Text, und der
 * mittlere Nutzen ist der kuerzeste.
 */
.syn-academy__benefits {
    display: grid;
    gap: var(--syn-gap);
    grid-template-columns: repeat(3, 1fr);
    list-style: none;
    margin: 32px 0 0;
    padding: 0;
}

.syn-academy__benefit {
    background: var(--syn-bg);
    border: 1px solid var(--syn-border);
    border-radius: var(--syn-radius);
    padding: 20px 24px 22px;
}

.syn-academy__benefit-title {
    color: var(--syn-text);
    display: block;
    font-family: var(--syn-font-display);
    font-size: 18px;
    font-weight: 600;
}

.syn-academy__benefit-text {
    color: var(--syn-text-secondary);
    display: block;
    font-size: var(--syn-font-size-small);
    margin-top: 6px;
}

/*
 * Der Knopf ist die ERSTE Stufe (Teal-Flaeche, Navy-Schrift, 10,3:1) und
 * nicht die zweite wie "Buchen" in der Terminliste: Er ist der Ruf des
 * Werbeblocks, und die Termine darunter sind das Nebenangebot.
 *
 * DIE EIGENE REGEL BRAUCHT ER, WEIL .syn-button FUER <button> GEBAUT IST.
 * Ein <a> ist inline und unterstrichen, und beides bringt die Knopf-Klasse
 * nicht mit - ein <button> hat es von Haus aus. Am gerenderten Knopf
 * gegengeprueft (Regeln per CSSOM entfernt, computed style gelesen): ohne
 * sie steht der Knopf auf "inline" statt "inline-flex" und traegt
 * "underline". Flaeche, Hoehe, Schriftgroesse und Farbe kommen dagegen aus
 * .syn-button und bleiben auch ohne diese Regel richtig.
 *
 * Der body-Prefix ist VORSORGE, kein heutiges Erfordernis: Er schluege ein
 * "a:link" aus htdocs/css/login.css, und dieses Stylesheet laedt die
 * SYNQONY-Maske gar nicht (LoginSynqonyGUI::__construct setzt genau zwei:
 * synqony_brand.css und diese Datei). Er steht hier, damit beide Knoepfe der
 * Seite gleich gebaut sind - siehe .syn-button--ghost.
 */
body a.syn-academy__cta,
body a.syn-academy__cta:link,
body a.syn-academy__cta:visited {
    align-items: center;
    box-sizing: border-box;
    color: var(--syn-secondary);
    display: inline-flex;
    font-family: var(--syn-font-display);
    font-weight: 500;
    justify-content: center;
    margin-top: 32px;
    text-decoration: none;
}

/* Die Flaeche kommt aus .syn-button:hover, hier fehlt nur die Schriftfarbe -
   a:link haette sie sonst zurueckgeholt. */
body a.syn-academy__cta:hover,
body a.syn-academy__cta:focus-visible {
    color: var(--syn-text-inverse);
    text-decoration: none;
}

/* --------------------------------------------------------------------------
   Seminare der NGS (NgsSeminarPromo), auf der Akademie-Karte
   -------------------------------------------------------------------------- */

/* Die Art des Seminars steht ueber dem Titel, wie der Kicker ueber der Karte. */
.syn-ngs-seminars__type {
    color: var(--syn-primary-ink);
    display: block;
    font-size: var(--syn-font-size-small);
    font-weight: 600;
    margin-bottom: 6px;
}

.syn-ngs-seminars__company {
    color: var(--syn-text);
    margin: 24px 0 0;
}

body a.syn-ngs-seminars__phone,
body a.syn-ngs-seminars__phone:link,
body a.syn-ngs-seminars__phone:visited {
    color: var(--syn-text);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

body a.syn-ngs-seminars__phone:hover,
body a.syn-ngs-seminars__phone:focus-visible {
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Logo statt Werbung (AdFreeLogin: AVH, EAPI, IPH)
   -------------------------------------------------------------------------- */

/*
 * Dasselbe Wasserzeichen wie auf der Startseite des Portals ohne Dashboard
 * (display_view.css, startseite-leer). Die Datei dient als Maske, die Farbe
 * kommt aus --syn-watermark und folgt so Theme und dunkler Darstellung.
 *
 * Die Hoehe kommt aus .syn-main, das als Flex-Kind die Flaeche zwischen
 * Anmeldeleiste und Fuss fuellt. min-height ist der Boden fuer schmale
 * Fenster, auf denen die Seite normal fliesst.
 */
.syn-watermark {
    box-sizing: border-box;
    display: grid;
    height: 100%;
    min-height: 160px;
    place-items: center;
}

.syn-watermark::before {
    content: "";
    display: block;
    /* Seitenverhaeltnis der Datei (viewBox 926 x 350). */
    width: clamp(240px, 38%, 560px);
    aspect-ratio: 926 / 350;
    background-image: url("/img/logo-zedal-by-synqony.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    /* Rueckfall ohne Masken: die Navy-Datei selbst, stark aufgehellt. */
    opacity: .12;
}

@supports (mask-image: none) or (-webkit-mask-image: none) {
    .syn-watermark::before {
        /* Sonst bliebe unter der Maske das Navy der Datei sichtbar. */
        background-image: none;
        background-color: var(--syn-watermark);
        opacity: 1;
        -webkit-mask-image: url("/img/logo-zedal-by-synqony.svg");
        mask-image: url("/img/logo-zedal-by-synqony.svg");
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-size: contain;
        mask-size: contain;
    }
}

/* --------------------------------------------------------------------------
   Praesenztermine
   -------------------------------------------------------------------------- */

/*
 * Die schmale Zeile unter dem Werbeblock. Sie traegt die Linie nach oben, der
 * Abstand sitzt darueber - so steht die Linie mittig zwischen Karte und Zeile
 * und nicht direkt an der Karte.
 */
.syn-seminars-teaser {
    border-top: 1px solid var(--syn-border);
    margin-top: 40px;
}

.syn-seminars-teaser__toggle {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--syn-text);
    cursor: pointer;
    display: flex;
    font-family: var(--syn-font-display);
    font-size: 18px;
    font-weight: 500;
    gap: 12px;
    padding: 20px 0;
    text-align: left;
    width: 100%;
}

.syn-seminars-teaser__toggle:hover .syn-seminars-teaser__label {
    color: var(--syn-link);
}

.syn-seminars-teaser__toggle:focus-visible {
    outline: 2px solid var(--syn-focus);
    outline-offset: 2px;
}

/* Die Anzahl als Pille - dunkles Mint auf hellem Mint sind 7,5:1. Bewusst in
   der Grundschrift: eine Ziffer in der Hausschrift wirkt neben der
   Beschriftung wie ein zweiter Titel. */
.syn-seminars-teaser__count {
    background: var(--syn-primary-tint);
    border-radius: var(--syn-radius-pill);
    color: var(--syn-primary-ink);
    font-family: var(--syn-font-sans);
    font-size: var(--syn-font-size-small);
    font-weight: 600;
    min-width: 24px;
    padding: 2px 9px;
    text-align: center;
}

/*
 * Der Winkel steht rechts (margin-left: auto), eingerueckt wie die Knoepfe der
 * Terminliste darunter, und zeigt zugeklappt nach unten, aufgeklappt nach
 * oben. Das Zeichen selbst ist ein Rechtswinkel - die Drehung macht die
 * Richtung.
 */
.syn-seminars-teaser__chevron {
    color: var(--syn-text-secondary);
    font-size: 22px;
    line-height: 1;
    margin-left: auto;
    margin-right: 16px;
    transform: rotate(90deg);
    transition: transform .12s ease;
}

.syn-seminars-teaser.is-open .syn-seminars-teaser__chevron {
    transform: rotate(-90deg);
}

/* Platz unter der aufgeklappten Liste, damit sie nicht am Fuss klebt. */
.syn-seminars__panel {
    padding-bottom: 8px;
}

/*
 * Auswahl der Seminarart ueber der Tabelle: Beschriftung ueber dem Feld,
 * Form wie die Felder im Kontaktdialog. Der Rand ist --syn-line-field
 * (3,01:1 auf Weiss, WCAG 1.4.11); --syn-border ist die Haarlinie zwischen
 * Flaechen und kaeme nur auf 1,2:1.
 */
.syn-seminars__filter {
    margin-bottom: 18px;
    max-width: 420px;
}

.syn-seminars__filter-label {
    color: var(--syn-text-secondary);
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
}

.syn-seminars__filter-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: var(--syn-bg) var(--syn-field-chevron) no-repeat right 12px center / 12px 8px;
    border: 1px solid var(--syn-line-field);
    border-radius: var(--syn-radius);
    box-sizing: border-box;
    color: var(--syn-text);
    cursor: pointer;
    font-family: var(--syn-font-sans);
    font-size: var(--syn-font-size-small);
    padding: 8px 32px 8px 10px;
    width: 100%;
}

.syn-seminars__filter-select:focus {
    border-color: var(--syn-focus);
    outline: 2px solid var(--syn-focus);
    outline-offset: 1px;
}

.syn-seminars {
    border-collapse: collapse;
    width: 100%;
}

/*
 * Der Spaltenkopf lief auf 22px, solange die Tabelle die Hauptflaeche war und
 * ihre Kopfzeile zugleich die Ueberschrift des Bereichs. Diese Rolle hat jetzt
 * die Akademie-Ueberschrift darueber; hier steht nur noch ein Spaltenkopf, und
 * der laeuft in Grundgroesse mit (9,6:1 auf Weiss).
 */
.syn-seminars th {
    border-bottom: 1px solid var(--syn-border);
    color: var(--syn-text-secondary);
    font-size: var(--syn-font-size);
    font-weight: 600;
    padding: 0 16px 14px 0;
    text-align: left;
}

.syn-seminars td {
    border-bottom: 1px solid var(--syn-border);
    color: var(--syn-text-muted);
    padding: 22px 16px 22px 0;
    vertical-align: top;
}

.syn-seminars tr:last-child td {
    border-bottom: 0;
}

.syn-seminars__title {
    color: var(--syn-text-muted);
    display: block;
}

.syn-seminars__location,
.syn-seminars__note {
    color: var(--syn-text-muted);
    display: block;
}

.syn-seminars__col--when {
    white-space: nowrap;
    width: 220px;
}

.syn-seminars__col--price {
    width: 260px;
}

.syn-seminars__col--action {
    text-align: right;
    width: 180px;
}

/*
 * Blaetterung unter der Liste. Bewusst schmal gehalten: eine Zeile aus
 * Ziffern mit je einem Pfeil, ohne Rahmen um das Ganze.
 */
.syn-pagination {
    align-items: center;
    display: flex;
    gap: 4px;
    justify-content: center;
    padding-top: 28px;
}

.syn-pagination__page,
.syn-pagination__step {
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--syn-radius);
    color: var(--syn-text-muted);
    cursor: pointer;
    font-family: var(--syn-font-sans);
    font-size: var(--syn-font-size-small);
    height: 32px;
    line-height: 1;
    min-width: 32px;
    padding: 0 6px;
}

.syn-pagination__page:hover,
.syn-pagination__step:hover:not(:disabled) {
    border-color: var(--syn-border);
    color: var(--syn-text);
}

.syn-pagination__page:focus-visible,
.syn-pagination__step:focus-visible {
    outline: 2px solid var(--syn-focus);
    outline-offset: 1px;
}

/* Beschriftung in Navy - dieselbe Rechnung wie beim Anmelden-Knopf: Weiss auf
   dem Signature-Teal sind 1,8:1, Navy 10,3:1 */
.syn-pagination__page.is-current {
    background: var(--syn-primary);
    border-color: var(--syn-primary);
    color: var(--syn-secondary);
}

.syn-pagination__step {
    font-size: 18px;
}

.syn-pagination__step:disabled {
    cursor: default;
    opacity: 0.35;
}

/* ==========================================================================
   Fuss
   ========================================================================== */

/*
 * Der Fuss laeuft eine Stufe groesser als der Fliesstext: In der Vorlage
 * traegt die Zeile mit den Portallinks deutlich mehr Gewicht als etwa die
 * Angaben unter den Eingabefeldern.
 */
.syn-footer {
    background: var(--syn-footer-bg);
    border-top: 1px solid var(--syn-footer-rule);
    color: var(--syn-bar-ink);
    flex: 0 0 auto;
    /*
     * Die Hausschrift, wie im Fuss von synqony.com. Sie stand hier nicht und
     * der Fuss erbte damit Arial vom body - als einziger Bereich der Seite,
     * denn Kopf, Rueckruf-Knopf und Anmeldeleiste fuehren Chillax schon.
     * Erben lassen und nicht je Kind setzen: die Links holen sich Groesse und
     * Gewicht ohnehin per inherit von hier (siehe die Regel weiter unten, die
     * das gegen die 9pt des Buendels durchsetzen muss).
     */
    font-family: var(--syn-font-display);
    /*
     * 14px statt 19px. Der Fuss ist Beiwerk - Portallinks, Mitgliedschaft,
     * Copyright -, und mit 19px trug er mehr Gewicht als die Angaben unter den
     * Eingabefeldern. Das Logo darueber behaelt seine 52px: es ist das
     * Einzige im Fuss, das etwas darstellen soll.
     */
    font-size: 14px;
    padding: 26px 0;
    text-align: center;
}

/*
 * Das Produktlogo in beiden Fassungen; das Token des Balkens zeigt die, deren
 * Schrift sich vom Fuss abhebt (--syn-bar-logo-white, --syn-bar-logo-navy in
 * synqony_brand.css). Die Masse stehen zusaetzlich am img-Element, damit der
 * Fuss beim Laden nicht springt; die Hoehe hier haelt ihn unabhaengig davon
 * fest, falls das Bild fehlt.
 */
.syn-footer__logo {
    margin-bottom: 14px;
}

.syn-footer__logo img {
    display: block;
    height: 52px;
    width: auto;
    margin: 0 auto;
}

.syn-footer__logo .syn-footer__logo-bild--hell {
    display: var(--syn-bar-logo-navy, none);
}

.syn-footer__logo .syn-footer__logo-bild--dunkel {
    display: var(--syn-bar-logo-white, block);
}

/*
 * font-size: inherit ist hier nicht ueberfluessig: Das Login-Bundle setzt
 * "a { font-size: 9pt }", und eine eigene Deklaration am Link schlaegt den
 * geerbten Wert des Umfelds - unabhaengig von der Spezifitaet. Ohne diese
 * Zeile liefen alle Links auf 12px, egal wie gross der Text daneben ist.
 *
 * Dasselbe gilt fuer font-weight: das Bundle setzt "a { font-weight: bold }".
 */
/*
 * Die Pseudoklassen :link und :visited sind hier nicht kosmetisch. Das
 * Bundle setzt "a:link { font-weight: bold; color: #FFFFFF }" - und
 * a:link hat dieselbe Spezifitaet (0-1-1) wie ".syn-footer__links a".
 * Bei Gleichstand gewinnt das spaeter geladene Stylesheet, und das ist das
 * Bundle. Erst der body-Prefix zusammen mit :link hebt die Regel darueber.
 *
 * font-size: inherit reichte ohne das aus, weil die 9pt aus dem
 * schwaecheren "a" (0-0-1) kommen - das Fettgewicht aber aus a:link.
 */
body .syn-footer__links a,
body .syn-footer__links a:link,
body .syn-footer__links a:visited {
    color: var(--syn-bar-ink);
    font-size: inherit;
    font-weight: inherit;
    text-decoration: none;
}

.syn-footer__links a:hover,
.syn-footer__links a:focus {
    text-decoration: underline;
}

.syn-footer__separator {
    padding: 0 12px;
}

/*
 * Der Copyright-Hinweis ist die leiseste Zeile der Seite.
 *
 * Zurueckgenommen wird er ueber eine eigene FARBE und nicht mehr ueber
 * opacity: Deckkraft rechnet gegen den Grund und ergibt je Flaeche einen
 * anderen Wert - auf dem Verlauf des Fusses also je Position einen anderen.
 * --syn-primary-soft ist ein sehr helles Mint und auf dem Fussgrund gemessen
 * 12,4:1, also klar zurueckgenommen und trotzdem weit ueber der Schwelle.
 */
.syn-footer__copyright {
    color: var(--syn-bar-ink-muted);
    font-size: 12px;
    padding-top: 14px;
}

/* ==========================================================================
   Passwort vergessen / Passwort neu setzen

   Beide Masken kommen unveraendert aus LoginGUI. Ihr bisheriges Aussehen stand
   komplett in login_main.css, das die neue Seite nicht mehr laedt - ohne diese
   Regeln stehen dort nackte Formularfelder. Etliche Eigenschaften sind im PHP
   als Inline-Style gesetzt (Spaltenbreiten, Rahmenfarben, Knopfmasse); die
   lassen sich nur mit !important zurueckholen.
   ========================================================================== */

body #login_pw_lost,
body #login_pw_recover {
    box-sizing: border-box;
    padding: 8px 16px 32px;
    width: 100%;
}

body #login_pw_lost_form,
body #login_pw_recover_form {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background-color: var(--syn-bg) !important;
    border: 1px solid var(--syn-border) !important;
    border-radius: var(--syn-radius-large) !important;
    box-shadow: 0 18px 48px rgba(14, 26, 38, 0.12) !important;
    box-sizing: border-box;
    color: var(--syn-text) !important;
    font-family: var(--syn-font-sans) !important;
    margin: 0 auto !important;
    max-width: 560px;
    padding: 28px 30px !important;
    width: 100% !important;
}

body .login_pw_lost_form_title {
    color: var(--syn-text);
    font-size: 22px;
    font-weight: 600;
}

body .login_pw_lost_form_subtitle {
    color: var(--syn-text-muted);
    font-size: var(--syn-font-size-small);
    margin: 4px 0 14px;
}

/*
 * Teilnehmer und Benutzerkennung stehen in #form_username als zwei Zeilen
 * direkt untereinander - ohne diese Regel beruehren sich die Felder.
 */
body #login_pw_lost_form #form_username > div:not(.login_pw_lost_form_subtitle) {
    margin-top: 12px;
}

/*
 * Die Zeilen stehen im PHP als zwei Spalten nebeneinander (float links 40 % /
 * rechts 60 %). Aufgehoben, damit die Bezeichnung ueber dem Feld steht - wie
 * in den Dialogen.
 */
body #login_pw_lost_form #form_question > div,
body #login_pw_recover_form #form_recover > div {
    height: auto !important;
    margin-bottom: 16px;
    min-height: 0 !important;
}

body #login_pw_lost_form #form_question > div > div,
body #login_pw_recover_form #form_recover > div > div {
    float: none !important;
    margin-top: 0 !important;
    width: auto !important;
}

body .login_pw_lost_headline {
    color: var(--syn-text);
    display: block;
    font-size: var(--syn-font-size);
    font-weight: 600;
    margin-bottom: 6px;
}

body #login_pw_lost_form input,
body #login_pw_recover_form input {
    /*
     * Das Symbol steht im PHP als Hintergrundbild mit fester Position
     * "7px 7px" - gemessen von der oberen Kante. Das passte zur alten
     * Feldhoehe; hier ist das Feld durch das groessere Innenabstandsmass
     * hoeher, sodass das 15 px kleine Symbol oben klebte, waehrend der
     * Platzhalter mittig sass. Deshalb die Position auf "center" ziehen -
     * dieselbe Loesung wie bei .syn-field__input in der Anmeldeleiste.
     *
     * background-position als Einzelangabe mit !important schlaegt die
     * Kurzform "background: ..." aus dem Inline-Style; das Bild selbst bleibt
     * unangetastet.
     */
    background-position: 10px center !important;
    /* Das style-Attribut setzt Weiss; das Feld steht wie die Karte auf dem
       Grund, sonst laege dunkel die helle Schrift auf Weiss. */
    background-color: var(--syn-bg) !important;
    border: 1px solid var(--syn-border) !important;
    border-radius: var(--syn-radius) !important;
    box-sizing: border-box !important;
    color: var(--syn-text) !important;
    font-family: var(--syn-font-sans);
    font-size: var(--syn-font-size-small);
    /* Platz fuer das Symbol, das im PHP als Hintergrundbild gesetzt wird */
    padding: 10px 12px 10px 32px !important;
    width: 100% !important;
}

/* Dunkel steht der Platzhalter im Token (6:1 auf dem Grund). Hell bleibt die
   Farbe des Browsers, sie ist kraeftiger als der Token (4,6:1 statt 2,5:1). */
@media (prefers-color-scheme: dark) {
    html[data-darstellung="system"] body #login_pw_lost_form input::placeholder,
    html[data-darstellung="system"] body #login_pw_recover_form input::placeholder {
        color: var(--syn-placeholder);
    }
}

html[data-darstellung="dunkel"] body #login_pw_lost_form input::placeholder,
html[data-darstellung="dunkel"] body #login_pw_recover_form input::placeholder {
    color: var(--syn-placeholder);
}

body #login_pw_lost_form input:focus,
body #login_pw_recover_form input:focus {
    border-color: var(--syn-focus) !important;
    outline: 2px solid var(--syn-focus);
    outline-offset: 1px;
}

/* Fragezeichen mit Hinweistext - ohne diese Regeln steht der Text offen da */
body .login_pw_lost_help {
    cursor: help;
    display: inline-block;
    margin-left: 8px;
    position: relative;
    vertical-align: middle;
}

body .login_pw_lost_help .login_pw_lost_help_text {
    background-color: var(--syn-bg);
    border: 1px solid var(--syn-border);
    border-radius: var(--syn-radius);
    box-shadow: 0 12px 32px rgba(14, 26, 38, 0.18);
    color: var(--syn-text);
    cursor: default;
    display: none;
    font-size: var(--syn-font-size-small);
    font-weight: normal;
    line-height: 1.5;
    padding: 12px 14px;
    position: absolute;
    right: 0;
    text-align: left;
    top: calc(100% + 8px);
    width: 300px;
    z-index: 1000;
}

body .login_pw_lost_help:hover .login_pw_lost_help_text,
body .login_pw_lost_help:focus .login_pw_lost_help_text {
    display: block;
}

/* Rueckmeldung nach dem Absenden */
body #pw_lost_info > span.login_pw_lost_headline,
body #pw_recover_info > span.login_pw_lost_headline {
    background: var(--syn-bg-muted);
    border: 1px solid var(--syn-border);
    border-left: 3px solid var(--syn-primary);
    border-radius: var(--syn-radius);
    box-sizing: border-box;
    color: var(--syn-text);
    display: block;
    font-weight: normal;
    line-height: 1.5;
    padding: 12px 14px;
}

/* Die Knoepfe tragen Hoehe und Breite als Inline-Style. Beschriftung in Navy -
   siehe .syn-button */
body #login_pw_lost_form button,
body #login_pw_recover_form button {
    background: var(--syn-primary);
    border: 1px solid var(--syn-primary);
    border-radius: var(--syn-radius-pill);
    color: var(--syn-secondary);
    cursor: pointer;
    font-family: var(--syn-font-display);
    font-size: var(--syn-font-size);
    height: 40px !important;
    min-width: 140px;
    padding: 0 24px;
    width: auto !important;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

/* Beim Ueberfahren wie .syn-button. Fokus nur ueber :focus-visible, sonst
   bliebe der Knopf nach einem Mausklick gefuellt. */
body #login_pw_lost_form button:hover,
body #login_pw_recover_form button:hover,
body #login_pw_lost_form button:focus-visible,
body #login_pw_recover_form button:focus-visible {
    background: var(--syn-fill);
    border-color: var(--syn-primary-ink);
    color: var(--syn-fill-ink);
}

/* ==========================================================================
   Links in Dialogen

   Das Login-Bundle setzt "a:link {color:#FFFFFF}" und "a:hover
   {color:#FF8000}". Auf den weissen Dialogflaechen (Impressum, Hilfe,
   Sicherheit, Rueckrufwunsch) sind Links damit unsichtbar und beim Ueberfahren
   orange. Weil das Bundle spaeter geladen wird, muessen die Regeln hier
   spezifischer sein - daher der body-Prefix und die ausgeschriebenen
   Pseudoklassen :link und :visited.
   ========================================================================== */

body .ui-dialog-content a,
body .ui-dialog-content a:link,
body .ui-dialog-content a:visited {
    color: var(--syn-link);
    font-size: inherit;
    font-weight: 600;
    text-decoration: none;
}

/* :focus-visible und nicht :focus: beim Oeffnen setzt jQuery UI den Fokus auf
   den ersten Verweis, der saehe sonst anders aus als seine Nachbarn. */
body .ui-dialog-content a:hover,
body .ui-dialog-content a:focus-visible {
    color: var(--syn-link-hover);
    text-decoration: underline;
}

/*
 * Die Links auf dunklem Grund - Loginleiste und Fuss - bleiben weiss, brauchen
 * aber ebenfalls einen eigenen Hover, sonst greift das Orange des Bundles.
 */
body .syn-field__meta a:hover,
body .syn-field__meta a:focus,
body .syn-footer__links a:hover,
body .syn-footer__links a:focus {
    color: var(--syn-bar-ink);
    text-decoration: underline;
}

/* ==========================================================================
   Impressum und Hilfe

   BEIDE STANDEN AUF WEISS UND BESTANDEN AUS ABSTAENDEN. Das Impressum war eine
   Folge von zwoelf <span> mit "<br><br>" dazwischen - Leerzeilen als
   Gestaltung -, die Hilfe zwei gefloatete Container je Zeile mit einem
   Aufraeumer dahinter. Was Name und was Wert ist, entschied in beiden Faellen
   allein das Fett.

   Jetzt tragen beide DIESELBE Form, und es ist die Form der uebrigen Dialoge:
   der Mint-Grund, darauf eine weisse Karte, darin Paare aus Name und Wert mit
   einer Haarlinie dazwischen. Vorbild ist die Registrierungsauskunft des
   Portals (.reginfo, htdocs/css/synqony_dialoge.css) - dieselbe Sache, nur
   dort in einem Kurzhinweis statt in einem Dialog.

   DER GRUND GEHOERT DEM EINZELNEN DIALOG und nicht ".ui-dialog-content"
   insgesamt: dieselbe Regel traefe sonst den Rueckruf-Dialog, den
   Sicherheitshinweis und die Meldung nach dem Absenden mit, und die drei
   bringen ihre Flaechen schon selbst mit.
   ========================================================================== */

body #impressum_dialog.ui-dialog-content,
body #help_dialog.ui-dialog-content {
    background: var(--syn-bg-muted);
    padding: 16px 20px;
}

body #impressum,
body #hilfe {
    color: var(--syn-text);
    font-size: var(--syn-font-size-small);
    line-height: var(--syn-line-height);
}

/*
 * Die Karte. Dieselbe Flaeche wie der Kasten des Rueckruf-Formulars darunter
 * (#dialog_contact .back) - nur umgekehrt herum: dort eine Mint-Flaeche auf
 * Weiss, hier eine weisse auf Mint. Beide Male geht es darum, dass der Inhalt
 * als ein Stueck dasteht und nicht als Text im Nichts.
 */
body .login-dialog-karte {
    box-sizing: border-box;
    padding: 4px 16px 12px;
    border-radius: var(--syn-radius);
    background: var(--syn-surface);
}

/* Der Firmenname. 16pt (also rund 21px) standen in login_main.css und galten
 * damit nur auf der bisherigen Seite; hier traegt ihn die Anzeigeschrift. */
body #impressum .impressum-firma {
    margin: 12px 0 2px;
    color: var(--syn-text);
    font-family: var(--syn-font-display);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.25;
}

body #impressum .impressum-anschrift {
    margin: 0 0 4px;
    color: var(--syn-text-secondary);
}

/* --------------------------------------------------------------------------
   Die Paare aus Name und Wert.
   -------------------------------------------------------------------------- */

body .login-angaben {
    margin: 0;
}

/*
 * Ein Paar. Name links, Wert rechts - ein Raster und keine Flex-Zeile: die
 * Werte sollen an DERSELBEN Kante beginnen, egal wie lang der Name daneben
 * ist ("Tel." gegen "Bankverbindung"). Mit zwei Spuren stimmt das von selbst.
 *
 * minmax(0, ...) an beiden Spuren, damit eine lange IBAN oder eine
 * Mailadresse die Spur nicht sprengt, sondern umbricht.
 */
body .login-angaben__zeile {
    display: grid;
    grid-template-columns: minmax(0, 34%) minmax(0, 1fr);
    column-gap: 16px;
    padding: 8px 0;
    border-top: 1px solid var(--syn-line);
}

body .login-angaben__zeile:first-child {
    border-top: 0 none;
}

/* Der Name. Gedaempft wie jeder Vorlauftext im Haus (.gui-stapel__text). */
body .login-angaben__name {
    margin: 0;
    color: var(--syn-text-secondary);
    font-weight: normal;
}

/*
 * Der Wert. Das margin-left: 40px, das ein <dd> von Haus aus mitbringt, muss
 * ausdruecklich weg - es steht im Stylesheet des Browsers und nicht in einer
 * Regel, die von selbst weicht.
 */
body .login-angaben__wert {
    margin: 0;
    overflow-wrap: anywhere;
}

/*
 * Die Fernwartung ist eine Handlung und keine Angabe - sie steht unter der
 * Karte und nicht darin. Vorher stand sie hinter einem nackten <br>.
 */
body #hilfe #fernwartung {
    margin-top: 12px;
}

/*
 * Die Verweise der Hilfe bringen ihre Farbe (#0000EE) als Inline-Stil mit,
 * damit sie auf der bisherigen Seite ueberhaupt sichtbar sind - deren Buendel
 * setzt "a:link {color:#FFFFFF}". Deshalb auch hier !important; sonst bliebe
 * es beim Browser-Blau neben den teal Verweisen des Impressums.
 */
body #hilfe a,
body #hilfe a:link,
body #hilfe a:visited {
    color: var(--syn-link) !important;
    font-weight: 600;
    text-decoration: none;
}

body #hilfe a:hover,
body #hilfe a:focus-visible {
    color: var(--syn-link-hover) !important;
    text-decoration: underline;
}

/* ==========================================================================
   Sicherheits-Hinweis (#sicherheit_dialog)

   Er stand als DRITTER dieser drei Dialoge auf Weiss: ein Satz, eine
   Zeichnung, drei Schritte und ein Schlusssatz, alles unmittelbar auf der
   Dialogflaeche. Jetzt derselbe Aufbau wie Impressum und Hilfe daneben -
   Mint-Grund, darauf die weisse Karte mit der Adresszeile und den Schritten.

   DER DIALOG HATTE AUSSERDEM KEINEN TITEL; er kommt jetzt aus dem Verweis,
   der ihn oeffnet (siehe sicherheit() in htdocs/js/login.js).
   ========================================================================== */

body #sicherheit_dialog.ui-dialog-content {
    background: var(--syn-bg-muted);
    padding: 16px 20px;
}

body #security {
    color: var(--syn-text);
    font-size: var(--syn-font-size-small);
    line-height: var(--syn-line-height);
}

body #security .security_intro {
    margin: 0 0 14px;
}

body #security .security_addressbar {
    margin: 10px 0 14px;
}

body #security .security_addressbar svg {
    display: block;
    height: auto;
    width: 100%;
}

body #security .security_steps {
    margin: 0 0 6px;
    padding-left: 20px;
}

body #security .security_steps li {
    margin-bottom: 8px;
}

/*
 * DER SCHLUSSSATZ IST EINE WARNUNG UND STAND IN TEAL. Die Kante links trug
 * --syn-primary, und das ist im Haus die Farbe eines HINWEISES
 * (.dialog-erklaerung, htdocs/css/synqony_dialoge.css). Hier steht "melden Sie
 * sich bitte nicht an" - der eine Satz des Dialogs, auf den es ankommt.
 *
 * --syn-warning kommt auf dem eigenen Grund auf 7,9:1; Text traegt hier
 * weiterhin --syn-text (16,9:1 auf --syn-warning-bg), die Warnfarbe traegt die
 * Kante. 4px statt 3, damit sie dieselbe Staerke hat wie die Kante der
 * Erklaerungskarten im Portal.
 */
body #security .security_hint {
    margin: 0;
    padding: 12px 14px;
    border: 1px solid var(--syn-warning-bg);
    border-left: 4px solid var(--syn-warning);
    border-radius: var(--syn-radius);
    background: var(--syn-warning-bg);
    color: var(--syn-text);
}

/* ==========================================================================
   Rueckruf-Dialog

   Der Dialog selbst kommt unveraendert aus SupportMessageGUI und wird von
   zedal_global.js als jQuery-UI-Dialog geoeffnet - beides teilt sich die
   Loginseite mit dem Portal, deshalb ist hier nichts davon angefasst. Die
   Umgestaltung passiert ausschliesslich ueber dieses Stylesheet, und das laedt
   nur die neue Loginseite. Im Portal bleibt der Dialog damit unveraendert.
   ========================================================================== */

body .ui-widget-overlay {
    background: var(--syn-overlay);
    opacity: 0.45;
}

body .ui-dialog {
    border: 0;
    border-radius: var(--syn-radius-large);
    box-shadow: 0 18px 48px rgba(14, 26, 38, 0.28);
    font-family: var(--syn-font-sans);
    font-size: var(--syn-font-size);
    overflow: hidden;
    padding: 0;
}

body .ui-dialog .ui-dialog-titlebar {
    background: var(--syn-dialog-header);
    border: 0;
    border-radius: 0;
    color: var(--syn-bar-ink);
    padding: 16px 20px;
}

body .ui-dialog .ui-dialog-title {
    float: none;
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    width: auto;
}

/*
 * Das Schliessen-Kreuz der jQuery-UI-Themes ist ein Sprite-Bild und damit auf
 * dunklem Grund unsichtbar. Es wird ausgeblendet und durch ein Zeichen ersetzt.
 */
body .ui-dialog .ui-dialog-titlebar-close {
    background: transparent;
    border: 0;
    height: 28px;
    margin-top: -14px;
    right: 14px;
    width: 28px;
}

body .ui-dialog .ui-dialog-titlebar-close .ui-icon {
    display: none;
}

body .ui-dialog .ui-dialog-titlebar-close::after {
    color: var(--syn-bar-ink);
    content: "\00d7";
    display: block;
    font-size: 24px;
    line-height: 26px;
    text-align: center;
}

body .ui-dialog .ui-dialog-titlebar-close:hover::after {
    color: var(--syn-bar-ink-hover);
}

body .ui-dialog .ui-dialog-content {
    color: var(--syn-text);
    font-size: var(--syn-font-size);
    padding: 22px 20px;
}

/* ==========================================================================
   Meldungen: Zeichen und Text in einer Zeile.

   #dialog_common oeffnet showCommonDialog() in htdocs/js/login.js - nach dem
   Absenden des Rueckruf-Formulars (Erfolg und Fehler) und nach einem
   gelungenen Passwortwechsel (changePassword() in htdocs/js/common.js).
   .dialog-meldung baut hausRueckfrage() in htdocs/js/common.js; auf der
   Anmeldeseite ist das der Fehler beim Passwortwechsel (#dialog_pwchanged).
   Beide tragen dieselbe Form.

   Ihr Markup kommt aus LoginGUI::createDialogProxy() und traegt seine Gestalt
   als Inline-Stil - das Zeichen gefloatet ("float:left; margin:0 7px 30px 0"),
   der Text mit 25px Einzug daneben. Das Markup BLEIBT so: dieselbe Methode
   baut auch die alte Standardmaske (LoginMaske::waehlen), und die liest diese
   Datei nicht. Geschlagen wird es hier - und Inline-Stile lassen sich nur mit
   !important schlagen, wie beim Kasten des Formulars darunter.
   ========================================================================== */

body #dialog_common_p,
body .dialog-meldung {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

/*
 * Das Zeichen war LEER. Es kommt aus dem Sprite-Satz .common-icon (icons.css),
 * und icons.css steckt in keinem Buendel der Anmeldeseite - am gerenderten
 * Dialog gemessen war der Platzhalter 4,5px breit (das &nbsp; darin), ohne
 * Hintergrundbild. Sichtbar blieb davon nur der 25px-Einzug des Textes
 * daneben, der so aussah, als sei die Meldung eingerueckt.
 *
 * Statt den Sprite-Satz nachzuladen - ein Pixelblatt aus der Zeit vor dem
 * SYNQONY-Aussehen - zeichnet die Seite das Zeichen selbst, so wie sie es mit
 * dem Schliessen-Kreuz oben schon tut.
 */
body #dialog_common_p > .common-icon,
body .dialog-meldung > .common-icon {
    float: none !important;
    margin: 1px 0 0 !important;
    position: relative;
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    /* Der Haken sitzt als Maske darin, das &nbsp; im Markup soll nicht
       mitzaehlen. */
    font-size: 0;
    background: var(--syn-tab-active);
}

/*
 * Der Haken ist dieselbe Datei, die im Portal im angehakten Kaestchen steht -
 * ein Zeichen, zwei Oberflaechen.
 */
body #dialog_common_p > .common-icon::after,
body .dialog-meldung > .common-icon::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: var(--syn-text-inverse);
    -webkit-mask-image: url("/img/tabler/outline/check.svg");
    mask-image: url("/img/tabler/outline/check.svg");
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 14px 14px;
    mask-size: 14px 14px;
}

/*
 * Und die Meldung, die schiefging. Fuer sie gibt es kein Haus-Zeichen als
 * Datei; das Ausrufezeichen ist deshalb ein Schriftzeichen - unmissverstaendlich
 * in jeder Schrift, und es braucht keine neue Zeichnung.
 */
body #dialog_common_p > .common-icon-exclamation,
body .dialog-meldung > .common-icon-exclamation {
    background: var(--syn-danger);
}

body #dialog_common_p > .common-icon-exclamation::after,
body .dialog-meldung > .common-icon-exclamation::after {
    content: "!";
    background: none;
    -webkit-mask-image: none;
    mask-image: none;
    color: var(--syn-text-inverse);
    font-family: var(--syn-font-sans);
    font-size: 15px;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
}

/* Der Einzug gehoerte zum gefloateten Zeichen - in der Flex-Zeile ist der
   Abstand die Luecke, und 25px zusaetzlich waeren ein zweites Mass dafuer. */
body #dialog_common_div {
    padding-left: 0 !important;
}

/*
 * Der Kasten um das Formular traegt im PHP ein Inline-Style mit gestricheltem
 * Rahmen. Inline-Styles lassen sich nur mit !important ueberschreiben - die
 * zweite Stelle, an der das noetig ist (die erste ist die Meldung darueber),
 * und beide Male aus demselben Grund: das Markup gehoert auch der alten
 * Standardmaske, die diese Datei nicht liest.
 */
/* Wie im Portal: Felder und Anhang-Zeile in der kleinen Grundschrift, nicht in
   den 16px von .ui-dialog-content. */
body #dialog_contact {
    font-size: var(--syn-font-size-small);
}

body #dialog_contact .back {
    background: var(--syn-bg-muted) !important;
    border: 1px solid var(--syn-border) !important;
    border-radius: var(--syn-radius) !important;
    padding: 18px !important;
}

/* --------------------------------------------------------------------------
   Der Vorlauftext steht UEBER dem Feld.

   Vorbild ist der Dialog "Signaturen anfordern" (#dialog_diwass_sign_job,
   htdocs/ajax_eakte.php). Dort baut GUIComponents jeden Block als zwei
   gestapelte Zeilen - erst die Beschriftung, darunter das Feld ueber die volle
   Breite. Am gerenderten Dialog gemessen: Beschriftung 12px in
   --syn-text-secondary, Feld 466,5px breit im Kasten von 490px.

   HIER STAND DIE BESCHRIFTUNG LINKS NEBEN DEM FELD UND WAR GROESSER ALS DIE
   EINGABE, DIE SIE ANKUENDIGT. Am gerenderten Dialog gemessen 16px gegen 13px:
   sie erbt die Groesse von .ui-dialog-content (--syn-font-size), das Feld
   daneben steht auf --syn-font-size-small. Die 452px im Kasten teilten sich
   dabei in 192px Beschriftung und 260px Feld - zwei Drittel der Zeile fuer das
   Wort "Telefon".

   GEAENDERT WIRD NUR DIE DARSTELLUNG. Das Markup kommt aus
   classes/supportmessage/SupportMessageGUI.php, und dieselbe Datei baut den
   Dialog auch im angemeldeten Portal und in alba - angefasst wird sie nicht,
   wie ueberall auf dieser Seite. Es bleiben also die drei divs je Zeile
   (Beschriftung, Feld, Aufraeumer), und ihre Floats stehen als Inline-Style am
   Element: nur !important schlaegt die.

   DIE REIHENFOLGE IST DER ANKER. Der Erzeuger setzt jede Zeile mit
   "$div_whole->set($div_l . $div_r . $cf)" - erst Beschriftung, dann Feld,
   dann Aufraeumer. Klassen gibt es an den ersten beiden nicht, deshalb
   greifen die Regeln ueber :first-child und :nth-child(2).
   -------------------------------------------------------------------------- */

/*
 * Die Beschriftung. Sie traegt "float: left" und - bei allen ausser der
 * Kategorie - zusaetzlich "padding-top: 8px"; das war der Versuch, sie neben
 * dem Feld auf dessen Mitte zu schieben. Im Stapel faellt beides weg.
 *
 * Ihr Innenabstand OBEN ist zugleich der Abstand zwischen zwei Feldgruppen -
 * als Innenabstand und nicht als Rand, weil Raender hier mit dem "margin:
 * 5px 0" der Zeile darueber zusammenfielen und der Abstand dann nicht das
 * waere, was dasteht. Dieselbe Rechnung wie im Portal-Dialog
 * (synqony_dialoge.css).
 *
 * 12px und bewusst kein Token: --syn-font-size-small (13px) traegt das FELD
 * darunter. Waeren beide gleich gross, waere der Vorlauftext kein Vorlauf
 * mehr, sondern eine zweite Zeile Inhalt. Dazu --syn-text-secondary (9,6:1
 * auf dem Mint des Kastens) statt --syn-text - dieselbe Rolle wie .gui-box im
 * Vorbild.
 */
body #dialog_contact .back > div > div:first-child:not(#dropzone_div):not(.dropzone-preview) {
    float: none !important;
    padding: 6px 0 3px !important;
    color: var(--syn-text-secondary);
    font-family: var(--syn-font-sans);
    font-size: 12px;
    line-height: var(--syn-line-height);
}

/*
 * Mit laufender Sitzung traegt der Dialog auch hier die Anhang-Ablage
 * (SupportMessageGUI). Ablage und Vorschau sind das erste Kind ihrer Zeile und
 * deshalb oben namentlich ausgenommen, wie im Portal. Rahmen, Innenabstand und
 * Hoehe stehen als Inline-Style im Erzeuger; der gestrichelte Rahmen bleibt,
 * nur in der Kante des Designs statt in lightgrey.
 */
body #dialog_contact #dropzone_div {
    border: 1px dashed var(--syn-line-strong) !important;
    border-radius: var(--syn-radius) !important;
    background: var(--syn-bg);
    color: var(--syn-text-secondary);
}

/* Die Trennlinie ueber der Anhang-Zeile - wie im Portal (synqony_dialoge.css). */
body #dialog_contact .back > div[style*="dashed"] {
    border-top: 1px solid var(--syn-border) !important;
}

/* Das Feld darunter - im Erzeuger "float: right". */
body #dialog_contact .back > div > div:nth-child(2) {
    float: none !important;
}

/*
 * Der Aufraeumer hinter den beiden Floats (.cf, display_view.css). Ohne
 * Floats hat er nichts mehr aufzuraeumen; sein ::after bliebe als leere
 * Zeile zwischen den Feldgruppen stehen.
 */
body #dialog_contact .back > div > .cf {
    display: none;
}

body #dialog_contact label {
    color: var(--syn-text);
}

/*
 * Einheitliche Feldbreite. Noetig, weil .text_medium (216px) nur in
 * login_main.css und gesamt_<design>_main.css steht - nicht im Login-Bundle.
 * Auf der neuen Seite haetten die Eingabefelder sonst gar keine gesetzte
 * Breite, waehrend die Textarea per Inline-Style 216px mitbringt; genau daher
 * kam der Versatz.
 */
body #dialog_contact input[type="text"],
body #dialog_contact input[type="email"],
body #dialog_contact input[type="tel"],
body #dialog_contact textarea,
body #dialog_contact select {
    background: var(--syn-bg);
    border: 1px solid var(--syn-border);
    border-radius: var(--syn-radius);
    box-sizing: border-box;
    color: var(--syn-text);
    font-family: var(--syn-font-sans);
    font-size: var(--syn-font-size-small);
    /*
     * Die Felder tragen "margin: 5px 0" als Inline-Style aus dem Erzeuger.
     * Nebeneinander war das der Abstand zwischen zwei Zeilen; im Stapel ist
     * der Abstand der der Beschriftung darueber, und die 5px waeren ein
     * zweites Mass fuer dasselbe - am gerenderten Dialog gemessen 70px
     * Gesamthoehe, die niemand angeordnet hat.
     */
    margin: 0 !important;
    padding: 8px 10px;
    /*
     * Volle Breite des Kastens statt --syn-dialog-field (260px). Die feste
     * Breite gehoerte zur Zeile aus Beschriftung UND Feld; im Stapel steht
     * ueber dem Feld nur noch die Beschriftung, und ein Feld, das bei 260px
     * endet, waehrend die Beschriftung darueber an der Kante beginnt, haette
     * eine Kante zu viel. Das Vorbild macht es genauso (gemessen 466,5px von
     * 490px Kasteninnenbreite).
     *
     * Damit hatte der Token keinen Verbraucher mehr - auch der Portal-Dialog
     * steht inzwischen im Stapel - und ist aus synqony_brand.css heraus.
     */
    width: 100%;
}

/*
 * Die Textarea traegt ihre Breite als Inline-Style aus SupportMessageGUI und
 * laesst sich nur mit !important auf die gemeinsame Breite ziehen. Hoehe statt
 * rows, damit die PHP-Seite (und damit das Portal) unangetastet bleibt.
 */
body #dialog_contact textarea {
    min-height: 96px;
    /*
     * Auch der Innenabstand steht dort als Inline-Style ("0.2em 0.5em"). Am
     * gerenderten Dialog gemessen waren das 2,6px/6,5px gegen die 8px/10px
     * der Felder darueber: der eingegebene Text sass in der Textflaeche
     * enger an der Kante als in jedem Eingabefeld daneben.
     */
    padding: 8px 10px !important;
    resize: vertical;
    width: 100% !important;
}

body #dialog_contact input[type="text"]:focus,
body #dialog_contact input[type="email"]:focus,
body #dialog_contact input[type="tel"]:focus,
body #dialog_contact textarea:focus {
    border-color: var(--syn-focus);
    outline: 2px solid var(--syn-focus);
    outline-offset: 1px;
}

/*
 * Kategorie: ein echtes select. Die Pfeilgrafik der Browser wird abgeschaltet
 * und durch einen eigenen Haken ersetzt, damit das Feld genauso aussieht wie
 * die Eingabefelder daneben.
 */
body #dialog_contact select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: var(--syn-field-chevron);
    background-position: right 12px center;
    background-repeat: no-repeat;
    background-size: 12px 8px;
    cursor: pointer;
    padding-right: 32px;
    text-align: left;
}

/*
 * Entsperr-Dialog (Sicherheitsfrage eines gesperrten Kontos).
 *
 * Das Antwortfeld wird in htdocs/ajax_login.php gebaut und traegt dort einen
 * Inline-Style aus der alten Seite: blauer Rahmen (#00519e), blaue Schrift
 * (#518dc9) und feste 340 px Breite. Auf der neuen Seite stand es damit als
 * einziges Feld noch im alten Farbschema. Die Datei liefert auch die alte
 * Loginseite aus, deshalb wird sie nicht angefasst - die Werte werden hier
 * ueberschrieben, wie schon bei den Feldern der Passwort-vergessen-Maske.
 *
 * Bewusst dieselben Angaben wie dort, damit beide Masken gleich aussehen; nur
 * der linke Innenabstand ist kleiner, weil dieses Feld kein Symbol traegt.
 */
body #user_locked_dialog #secret_answer {
    background: var(--syn-bg) !important;
    border: 1px solid var(--syn-border) !important;
    border-radius: var(--syn-radius) !important;
    box-sizing: border-box !important;
    color: var(--syn-text) !important;
    font-family: var(--syn-font-sans) !important;
    font-size: var(--syn-font-size-small) !important;
    margin: 4px 0 0 !important;
    padding: 10px 12px !important;
    width: 100% !important;
}

body #user_locked_dialog #secret_answer::placeholder {
    color: var(--syn-placeholder);
}

body #user_locked_dialog #secret_answer:focus {
    border-color: var(--syn-focus) !important;
    outline: 2px solid var(--syn-focus);
    outline-offset: 1px;
}

body #user_locked_dialog p.hint {
    color: var(--syn-text);
    font-size: var(--syn-font-size-small);
    line-height: var(--syn-line-height);
    margin: 0 0 12px;
}

/*
 * Rueckmeldung bei falscher Antwort. Kommt als reiner Text aus
 * RecoveryActions und stuende sonst unformatiert im Dialog. Aufbau wie der
 * Info-Kasten der Passwort-vergessen-Maske, nur mit roter Kante - es ist eine
 * Ablehnung, keine Bestaetigung.
 */
body #user_locked_dialog #answer_messagebox {
    background: var(--syn-bg-muted);
    border: 1px solid var(--syn-border);
    border-left: 3px solid var(--syn-error-bg);
    border-radius: var(--syn-radius);
    box-sizing: border-box;
    color: var(--syn-text);
    font-size: var(--syn-font-size-small);
    line-height: var(--syn-line-height);
    padding: 12px 14px;
}

/*
 * Passwort aendern (#dialog_changepw) - der erzwungene Wechsel bei
 * abgelaufenem Passwort. Markup aus changePWDialog() in htdocs/ajax_global.php:
 * GUIComponents-Bloecke in .gui-stapel, also dieselbe Form wie im Portal
 * (synqony_dialoge.css, display_view.css) - deren Regeln laedt diese Seite
 * aber nicht. Mint-Grund, Beschriftung ueber dem Feld, Felder wie im
 * Rueckruf-Formular.
 */
body #dialog_changepw.ui-dialog-content {
    background: var(--syn-bg-muted);
    padding: 16px 20px;
}

/* GUIComponents::getBox() setzt "width: 96%" als Inline-Stil. */
body #dialog_changepw .gui-box {
    width: auto !important;
}

body #dialog_changepw .gui-box--headline {
    display: block;
    padding-bottom: 3px;
    color: var(--syn-text-secondary);
    font-size: 12px;
    cursor: pointer;
}

body #dialog_changepw .gui-text-input {
    background: var(--syn-bg);
    border: 1px solid var(--syn-border);
    border-radius: var(--syn-radius);
    box-sizing: border-box;
    color: var(--syn-text);
    font-family: var(--syn-font-sans);
    font-size: var(--syn-font-size-small);
    margin: 0;
    padding: 8px 10px;
    width: 100%;
}

body #dialog_changepw .gui-text-input:focus {
    border-color: var(--syn-focus);
    outline: 2px solid var(--syn-focus);
    outline-offset: 1px;
}

/*
 * Die Knoepfe der Knopfleiste tragen die Form der Portal-Dialoge
 * (".ui-dialog .ui-dialog-buttonpane button", jquery-ui.theme.css): Umriss als
 * Pille, beim Ueberfahren fuellt er sich.
 */
body .ui-dialog .ui-dialog-buttonpane button {
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
    background: transparent;
    border: 1px solid var(--syn-text-brand);
    border-radius: var(--syn-radius-pill);
    color: var(--syn-text-brand);
    cursor: pointer;
    font-family: var(--syn-font-display);
    font-size: var(--syn-font-size-small);
    padding: 7px 20px;
}

/*
 * Absenden ist der Hauptknopf des Rueckruf-Dialogs: die Teal-Pille mit
 * Navy-Schrift wie im Portal (synqony_dialoge.css). login.js stellt ihn in die
 * Knopfleiste; Hoehe und Breite stehen als Inline-Style im Erzeuger.
 */
body #support_upload_submit {
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
    background: var(--syn-primary);
    border: 1px solid var(--syn-primary);
    border-radius: var(--syn-radius-pill);
    color: var(--syn-secondary);
    cursor: pointer;
    font-family: var(--syn-font-display);
    font-size: var(--syn-font-size-small);
}

body #support_upload_submit:hover,
body #support_upload_submit:focus-visible,
body .ui-dialog .ui-dialog-buttonpane button:hover,
body .ui-dialog .ui-dialog-buttonpane button:focus-visible {
    background: var(--syn-fill);
    border-color: var(--syn-primary-ink);
    color: var(--syn-fill-ink);
}

body .ui-dialog .ui-dialog-buttonpane {
    border-top: 1px solid var(--syn-border);
    margin: 0;
    padding: 14px 20px;
}

/* ==========================================================================
   Schmale Viewports
   ========================================================================== */

@media (max-width: 1100px) {
    .syn-loginbar__inner {
        flex-wrap: wrap;
    }

    .syn-field {
        width: 300px;
    }
}

@media (max-width: 767px) {
    /*
     * Auf Mobilgeraeten wieder normaler Seitenfluss: Ein festgezurrtes Fenster
     * mit eigenem Scrollbereich vertraegt sich schlecht mit ein- und
     * ausfahrenden Browserleisten, und Kopf plus Anmeldeleiste wuerden vom
     * ohnehin knappen Platz zu viel dauerhaft belegen.
     */
    .login_wrapper {
        height: auto;
        min-height: 100vh;
    }

    .syn-main {
        overflow-y: visible;
    }

    .syn-container {
        padding: 0 16px;
    }

    /*
     * Logo, Knopf zum klassischen Design und Rueckruf passen auf einem Handy
     * nicht in eine Zeile. Logo und Rueckruf bleiben oben, der Knopf steht
     * darunter ueber die ganze Breite.
     */
    .syn-header__inner {
        flex-wrap: wrap;
        gap: 16px;
        min-height: 88px;
        padding-bottom: 12px;
        padding-top: 12px;
        row-gap: 8px;
    }

    .designwahl {
        flex-basis: 100%;
        order: 1;
    }

    .syn-callback {
        font-size: 16px;
    }

    .syn-callback__label {
        display: none;
    }

    .syn-header__actions {
        gap: 8px;
    }

    .designwahl__knopf {
        font-size: 14px;
        padding: 6px 12px;
    }

    /* fit-content wuerde hier mit den vollbreiten Feldern kollidieren */
    .syn-loginbar__stack {
        width: 100%;
    }

    .syn-loginbar__inner {
        flex-direction: column;
    }

    /*
     * box-sizing gehoert hier zwingend dazu, und der Grund ist die Elementart:
     * .syn-button sitzt einmal auf einem <button> (Anmelden) und einmal auf
     * einem <a> (Buchen in der Seminarliste). Browser geben <button> von Haus
     * aus border-box, <a> dagegen content-box. Bei "width: 100%" heisst das
     * fuer den Link 100 % PLUS 2x28px Innenabstand plus Rahmen: auf einem
     * 375px-Fenster ein 401px breiter Knopf in einer 343px breiten Zelle, und
     * die ganze Seite liess sich seitwaerts schieben (Inhalt 417px).
     *
     * Fuer den <button> ist die Zeile folgenlos - er ist es ohnehin schon.
     *
     * Bewusst nur hier und nicht an .syn-button selbst: dort wirkt
     * min-width: 150px, und unter border-box zaehlte der Innenabstand hinein -
     * die Knoepfe der Vollansicht wuerden schmaler.
     */
    /*
     * Die Huelle des Anmelden-Knopfes muss mit auf volle Breite: .syn-loginbar__inner
     * traegt align-items: flex-start, ihre Kinder wachsen also nicht von selbst.
     * Ohne sie bliebe die Huelle auf Inhaltsbreite (150px, die min-width des
     * Knopfes) und der Knopf stuende schmal neben den vollbreiten Feldern.
     */
    .syn-field,
    .syn-loginbar__action,
    .syn-button {
        box-sizing: border-box;
        width: 100%;
    }

    /*
     * Die Karte des Werbeblocks rueckt enger an den Rand: 48px Innenabstand
     * auf einem 375px-Fenster liessen den Kacheln 231px.
     */
    .syn-academy__inner,
    .syn-abschluss {
        padding: 32px 20px 36px;
    }

    /*
     * Der Knopf der Karte darf zweizeilig werden ("Zur Seminaruebersicht und
     * Buchung" bei der NGS) und waechst dann mit; einzeilig bleibt er 44px.
     */
    body a.syn-academy__cta {
        height: auto;
        min-height: 44px;
        padding-bottom: 8px;
        padding-top: 8px;
    }

    .syn-academy__headline,
    .syn-abschluss__titel {
        font-size: 26px;
    }

    /* Die drei Kacheln untereinander */
    .syn-academy__benefits {
        grid-template-columns: 1fr;
    }

    /*
     * Der Winkel darf nicht nach rechts wegrutschen, wenn die Beschriftung
     * ueber zwei Zeilen geht - deshalb oben ausgerichtet statt mittig.
     */
    .syn-seminars-teaser__toggle {
        align-items: flex-start;
        font-size: 16px;
    }

    /* Tabelle wird zur Kartenliste */
    .syn-seminars,
    .syn-seminars tbody,
    .syn-seminars tr,
    .syn-seminars td {
        display: block;
        width: auto;
    }

    .syn-seminars thead {
        display: none;
    }

    .syn-seminars tr {
        border-bottom: 1px solid var(--syn-border);
        padding: 18px 0;
    }

    .syn-seminars td {
        border-bottom: 0;
        padding: 2px 0;
    }

    .syn-seminars__col--action {
        padding-top: 14px;
        text-align: left;
    }
}

/* ==========================================================================
   Bewegung abbestellt

   Die Knoepfe faden beim Ueberfahren ihre Farben. Wer im Betriebssystem
   "Bewegung reduzieren" gesetzt hat, bekommt den Farbwechsel ohne Animation:
   er traegt die Information "hier bin ich", der Uebergang faellt weg.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .syn-button,
    body a.syn-button--ghost,
    .syn-button--ghost,
    body #support_upload_submit,
    body .ui-dialog .ui-dialog-buttonpane button,
    body #login_pw_lost_form button,
    body #login_pw_recover_form button,
    .designwahl__knopf,
    .syn-darstellung {
        transition: none;
    }
}