@CHARSET "UTF-8";

/*
 * Seitengeruest im SYNQONY-Stil - gemeinsam fuer alle Masken des Projekts (#39).
 *
 * Hier steht alles, was jede Maske gleich braucht: der Rahmen der Seite (Kopf
 * und Fuss auf dem Markenverlauf, dazwischen die Flaeche mit Seitenkopf und
 * scrollendem Inhalt), die Bausteine der Formulare (Abschnitte, 12er-Raster,
 * Felder, Knoepfe, Spalten), der Anmeldedialog, die Ladeanzeige, die Dialoge
 * von jQuery UI und die Umbrueche fuer schmale und niedrige Fenster.
 *
 * Der Rahmen folgt dem neuen Design des Portals (#41; zedal-portal,
 * htdocs/css/display_view.css, Abschnitt "Verlauf als Rahmen"), Felder, Knoepfe
 * und Dialoge der Portal-Loginseite (login_synqony.css). Klassennamen und
 * Tokens sind dieselben, wo es sie dort gibt.
 *
 * Eingebettet (.syn-page--embedded) gibt es keinen Rahmen: Die Abschnitte
 * bleiben dort Karten auf dem Grund der Gastseite. Alles, was nur im Rahmen
 * gilt, haengt deshalb an .syn-page--rahmen.
 *
 * EINBINDEN: nach synqony_brand.css (das die Variablen setzt) und VOR dem
 * Stylesheet der jeweiligen Seite, damit die Seite ueberschreiben kann.
 *
 * HIER NICHT HINEIN: Regeln, die nur eine Maske betrifft. Die gehoeren in deren
 * Stylesheet. Wenn eine Regel bei der zweiten Maske gebraucht wird, darf sie
 * hierher wandern - aber dann bitte auch fuer die erste pruefen.
 */

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

/*
 * Nur fuer Screenreader: aus der Flaeche genommen, aber vorlesbar. Das
 * uebliche Muster - display: none oder visibility: hidden nehmen den Text auch
 * der Vorlesefunktion weg.
 */

/*
 * Floats aufraeumen. Stand in common.css und wird weiter gebraucht: Das Markup,
 * das die Masken in ihren AJAX-Antworten nachliefern - Artikelzeilen,
 * Warenkorb, Buchungsuebersicht, Anfallstellen - arbeitet mit Floats und
 * schliesst jede Zeile mit einem div.cf ab.
 *
 * Das zoom: 1 von damals ist entfallen; es war der hasLayout-Trick fuer den
 * Internet Explorer 7.
 */

.cf::after {
    clear: both;
    content: "";
    display: block;
}

.syn-visually-hidden {
    border: 0;
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

body {
    background-color: 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);
    margin: 0;
    padding: 0;
}

/*
 * Die Seite spannt genau ueber die Fensterhoehe; gescrollt wird nicht sie
 * selbst, sondern der Inhaltsbereich darin (siehe .syn-main). Dadurch bleiben
 * Kopf, Seitenkopf und Fuss immer sichtbar, waehrend das Formular scrollt.
 *
 * height statt min-height: Mit min-height duerfte die Seite wachsen, und der
 * Fuss waere wieder erst am Ende des Formulars zu sehen.
 *
 * 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.
 */

.syn-page {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
}

/* Kopf, Seitenkopf und Fuss behalten ihre Hoehe und geben nichts ab */

.syn-header,
.syn-topbar,
.syn-footer {
    flex: 0 0 auto;
}

/*
 * Der Rahmen: Kopf und Fuss stehen auf dem Markenverlauf, die Flaeche liegt
 * davor. Der Verlauf liegt an der Seite selbst - sie ist genau so gross wie das
 * Fenster, und auf schmalen Geraeten, wo sie mitwaechst, endet er weiter unten
 * in derselben Farbe.
 */

.syn-page--rahmen {
    background: var(--syn-secondary);
    background: var(--syn-frame);
}

/*
 * Die Flaeche: eine Karte mit runden Ecken, rechts, links und unten 8px vom
 * Fensterrand, wie die Flaeche im Portal. Sie ist selbst eine Spalte aus
 * Seitenkopf und Inhalt; gescrollt wird nur der Inhalt, die Ecken schneidet sie
 * deshalb selbst (overflow: hidden).
 */

.syn-flaeche {
    background-color: var(--syn-surface);
    border: 1px solid var(--syn-frame-edge);
    border-radius: var(--syn-radius-large);
    box-shadow: var(--syn-frame-shadow);
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    margin: 0 8px;
    min-height: 0;
    overflow: hidden;
}

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

/*
 * Der einzige scrollende Bereich der Seite.
 *
 * 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 - genau der Fehler, den man
 * beim Umbau eines solchen Layouts zuerst macht.
 */

.syn-main {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0 0 32px;
}

/*
 * Eingebettet (?embed=1) steht die Maske im Rahmen einer fremden Seite: kein
 * Kopf, kein Seitenkopf, kein Fuss - und kein eigener Grund, der sich vom
 * Gastgeber abheben wuerde.
 *
 * Auch keine Fensterhoehe und kein eigener Scrollbereich: Im Rahmen wuerde die
 * Maske dann auf die Hoehe des Rahmens zusammengedrueckt und brachte einen
 * zweiten Bildlauf innerhalb der Gastseite mit. Eingebettet waechst sie
 * einfach mit ihrem Inhalt.
 */

.syn-page--embedded {
    height: auto;
}

.syn-page--embedded .syn-main {
    background-color: transparent;
    border-top: 0;
    overflow-y: visible;
    padding: 0;
}

.syn-page--embedded .syn-container {
    padding: 0;
}

/* ==========================================================================
   Kopf auf dem Rahmen: Logo, Sprachwahl, Anmeldung, Darstellung

   Wie der Titelbalken im neuen Design des Portals in weisser Schrift auf dem
   Markenverlauf, links das Logo mit Bildmarke wie auf der Portal-Loginseite. Weiss haelt auf dem Rahmen an jeder Stelle 4,5:1
   (--syn-frame in synqony_brand.css). Die Schrift wechselt beim Ueberfahren
   deshalb nicht die Farbe - Mint auf dem hellen Ende des Verlaufs kaeme auf
   1,9:1 -, sondern bekommt eine Unterstreichung oder eine Flaeche.
   ========================================================================== */

.syn-header {
    color: var(--syn-bar-ink);
}

.syn-header__inner {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px var(--syn-gap);
    justify-content: space-between;
    min-height: 76px;
    padding: 0 24px;
}

.syn-header__logo {
    flex: 0 0 auto;
}

/*
 * Feste Hoehe statt max-height: Die Hoehe ist zentral ueber --syn-logo-height
 * steuerbar; die width/height am img-Element ergaenzen das nur gegen den Sprung
 * im Seitenaufbau.
 */

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

.syn-header__actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    justify-content: flex-end;
}

/*
 * Der Fokusring ist im Kopf weiss: Mint (--syn-focus) hebt sich vom hellen Ende
 * des Verlaufs kaum ab.
 */

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

.syn-headerlink,
.syn-headerlink:link,
.syn-headerlink:visited {
    color: var(--syn-link);
    font-size: var(--syn-font-size);
    text-decoration: none;
}

.syn-headerlink:hover,
.syn-headerlink:focus-visible {
    color: var(--syn-link-hover);
    text-decoration: underline;
}

/* Anmeldung mit ZEDAL-Konto; entspricht dem Rueckruf-Angebot der Loginseite */

.syn-account {
    align-items: center;
    border-radius: var(--syn-radius-pill);
    color: var(--syn-bar-ink);
    cursor: pointer;
    display: flex;
    font-family: var(--syn-font-display);
    font-size: 15px;
    gap: 8px;
    padding: 6px 12px;
}

.syn-account:hover,
.syn-account:focus-visible {
    background-color: var(--syn-frame-control);
}

/*
 * Das Symbol ist eine Maske in der Farbe der Beschriftung - icon-account.svg
 * traegt Navy fest im Bild und stuende auf dem Verlauf unsichtbar da.
 *
 * Hoehe und Breite explizit, sonst hat das leere Element keine Flaeche.
 */

.syn-account__icon {
    background-color: currentColor;
    display: block;
    flex: 0 0 auto;
    height: 20px;
    -webkit-mask: url("/img/icon-account.svg") center / contain no-repeat;
    mask: url("/img/icon-account.svg") center / contain no-repeat;
    width: 20px;
}

/*
 * Umschalter der Darstellung (SynqonyDarstellung::umschalter()), rechts im
 * Kopf. Er traegt alle drei Zeichen; sichtbar ist das, das zum Attribut auf
 * <html> passt. Ohne Attribut ist js/darstellung.js nicht gelaufen - dann
 * taete der Knopf nichts und bleibt weg.
 */

.syn-darstellung {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: var(--syn-radius-pill);
    color: var(--syn-bar-ink);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    height: 36px;
    justify-content: center;
    padding: 0;
    width: 36px;
}

.syn-darstellung:hover {
    background-color: var(--syn-frame-control);
}

html:not([data-darstellung]) .syn-darstellung,
.syn-darstellung__symbol,
.syn-darstellung__text {
    display: none;
}

html[data-darstellung="system"] .syn-darstellung__symbol--system,
html[data-darstellung="hell"] .syn-darstellung__symbol--hell,
html[data-darstellung="dunkel"] .syn-darstellung__symbol--dunkel {
    display: block;
}

html[data-darstellung="system"] .syn-darstellung__text--system,
html[data-darstellung="hell"] .syn-darstellung__text--hell,
html[data-darstellung="dunkel"] .syn-darstellung__text--dunkel {
    display: inline;
}

/*
 * Sprachwahl.
 *
 * Das Markup kommt aus Common::languageDropdown() und wird von sechs Masken
 * geteilt: ein div mit einem Weltkugel-Symbol und der Liste darin. Angefasst
 * wird es nicht, nur gestaltet - der Wrapper traegt hier die Klasse
 * syn-language.
 *
 * Das Symbol wird ausgeblendet: Die Grafik ist fast schwarz (#1d1d1b) und
 * stuende auf dem Verlauf unsichtbar da. Die Bezeichnung "Sprache" traegt die
 * Bedeutung, und die Liste nennt jede Sprache in ihrer eigenen Schreibweise -
 * das versteht auch, wer die Bezeichnung nicht lesen kann.
 */

.syn-language img {
    display: none;
}

/*
 * ACHTUNG: Sichtbar ist hier nicht die Liste, sondern ein Knopf.
 *
 * common.js haengt der Sprachwahl beim Laden JEDER Seite den
 * jQuery-Multiselect-Aufsatz an ($('#zedal_language_selector').multiselect(...)).
 * Der versteckt das select und setzt einen Knopf davor - mit Breite 150, Hoehe
 * 26, weisser Flaeche, ohne Rahmen und in "Open sans", alles als Inline-Style.
 *
 * common.js gehoert allen Masken und bleibt unangetastet; gegen die
 * Inline-Angaben kommt nur !important an. Dieselbe Lage wie bei der
 * Providerliste im Anmeldedialog weiter unten.
 *
 * Hier die Form eines Felds - im eingebetteten Aufruf der Seminarbuchung steht
 * die Sprachwahl als Feld in der Auswahl. Im Kopf wird daraus eine Pille
 * (.syn-sprachwahl, gleich darunter). Die Regel fuer das select bleibt
 * daneben stehen: Faellt der Aufsatz eines Tages weg, sieht das Feld sofort
 * richtig aus.
 */

.syn-language select,
.syn-language button.ui-multiselect {
    background: var(--syn-bg) !important;
    border: 1px solid var(--syn-line-field) !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) !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 10px !important;
    text-align: left;
    width: 100% !important;
}

.syn-language select:focus,
.syn-language button.ui-multiselect:focus {
    border-color: var(--syn-focus) !important;
    outline: 2px solid var(--syn-focus);
    outline-offset: 1px;
}

/*
 * Die Sprachwahl im Kopf: eine Pille auf dem Verlauf, die Bezeichnung vor dem
 * Wert - wie die Auswahlfelder auf dem Titelbalken des Portals. Der Grund ist
 * ein dunkler Schleier (--syn-frame-control), damit die weisse Schrift auch am
 * hellen Ende des Verlaufs traegt.
 *
 * Die Pille selbst ist der Rahmen; der Knopf des Aufsatzes darin ist
 * durchsichtig und so breit wie sein Text.
 */

.syn-sprachwahl {
    align-items: center;
    background-color: var(--syn-frame-control);
    border: 1px solid var(--syn-frame-control-line);
    border-radius: var(--syn-radius-pill);
    display: inline-flex;
    height: 36px;
    padding-left: 14px;
}

.syn-sprachwahl:hover,
.syn-sprachwahl:focus-within {
    background-color: var(--syn-frame-control-hover);
}

.syn-sprachwahl__label {
    color: var(--syn-bar-ink);
    cursor: pointer;
    font-size: var(--syn-font-size-small);
}

.syn-sprachwahl .syn-language select,
.syn-sprachwahl .syn-language button.ui-multiselect {
    background: transparent !important;
    border: 0 !important;
    border-radius: var(--syn-radius-pill) !important;
    color: var(--syn-bar-ink) !important;
    font-family: var(--syn-font-display) !important;
    font-size: 15px !important;
    height: 34px !important;
    padding: 0 30px 0 8px !important;
    position: relative;
    width: auto !important;
}

.syn-sprachwahl .syn-language select {
    /* Die Liste des Systems ist hell - der Pfeil und die Schrift im Feld weiss */
    appearance: none;
}

.syn-sprachwahl .syn-language select option {
    color: var(--syn-text);
}

.syn-sprachwahl .syn-language button.ui-multiselect:focus {
    outline: 2px solid var(--syn-bar-ink);
    outline-offset: 2px;
}

/*
 * Der Pfeil des Aufsatzes ist ein Sprite in Dunkelgrau; auf dem Verlauf wird er
 * ersetzt durch einen gezeichneten Winkel in der Schriftfarbe.
 */

.syn-sprachwahl .syn-language button.ui-multiselect .ui-icon {
    display: none;
}

.syn-sprachwahl .syn-language button.ui-multiselect::after {
    border-bottom: 1.6px solid currentColor;
    border-right: 1.6px solid currentColor;
    content: "";
    height: 7px;
    margin-top: -6px;
    position: absolute;
    right: 14px;
    top: 50%;
    transform: rotate(45deg);
    width: 7px;
}

/* ==========================================================================
   Seitenkopf oben in der Flaeche

   Die Ueberschrift der Maske und, auf der Seminarseite, die Auswahl von
   Seminar und Termin samt Ort, Zeit und Preis. Eine Linie ueber die ganze
   Breite trennt ihn vom Formular, wie im Portal Titelzeile und Liste.
   ========================================================================== */

.syn-topbar {
    border-bottom: 1px solid var(--syn-line-strong);
    color: var(--syn-text);
    padding: 22px 0 18px;
}

/*
 * Traegt der Seitenkopf eine Ueberschrift, teilt er sich auf: Ueberschrift
 * links, Auswahl rechts daneben.
 *
 * Nur mit dem Merker --titled, damit die Seminarseite unberuehrt bleibt: Dort
 * ist die Ueberschrift unsichtbar, und die Auswahl von Seminar und Termin
 * bekommt die ganze Breite.
 */

.syn-topbar--titled > .syn-container {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 40px;
}

.syn-topbar__title {
    /* Chillax wie bei den Abschnittsueberschriften */
    font-family: var(--syn-font-display);
    font-size: 26px;
    font-weight: 500;
    line-height: 1.25;
    margin: 0;
    /* Nicht schrumpfen, aber auch nicht die Auswahl verdraengen */
    flex: 0 1 auto;
}

.syn-topbar--titled > .syn-container > .syn-selection {
    flex: 1 1 320px;
}

/* ==========================================================================
   Auswahlfelder

   Im Seitenkopf der Seminarseite, im eingebetteten Aufruf als Abschnitt im
   Inhalt. Die Feldzeile ist ein Flex-Container.
   ========================================================================== */

.syn-selection__fields {
    align-items: flex-end;
    display: flex;
    flex-wrap: wrap;
    gap: 16px 32px;
}

.syn-selection__field {
    display: flex;
    flex-direction: column;
    width: 260px;
}

/* Fuer Inhalte, die mehr Platz brauchen - lange Bezeichnungen in Listen */

.syn-selection__field--wide {
    width: 420px;
}

/*
 * Die Sprachwahl im eingebetteten Aufruf steht rechts, abgesetzt von den
 * Feldern: Sie bestimmt die Sprache der Seite, nicht eine Eigenschaft des
 * Formulars. Breite knapp gehalten - die Sprachnamen sind kurz.
 */

.syn-selection__field--narrow {
    margin-left: auto;
    width: 190px;
}

.syn-selection__label {
    color: var(--syn-text-muted);
    font-size: var(--syn-font-size-small);
    padding-bottom: 6px;
}

@media (max-width: 1100px) {
.syn-selection__field,
    .syn-selection__field--wide {
        width: 100%;
    }

/*
     * Die Sprachwahl behaelt ihr schmales Mass und bleibt rechts. Die Regel
     * muss HIER stehen, nicht nur weiter oben: .syn-selection__field trifft das
     * Feld ebenfalls (es traegt beide Klassen) und hat dieselbe Spezifitaet -
     * ohne diese Wiederholung liefe die Liste ueber die volle Breite, was nach
     * Versehen aussieht.
     */

.syn-selection__field--narrow {
        margin-left: auto;
        width: 190px;
    }
}

/* ==========================================================================
   Abschnitte des Formulars

   Eingebettet ist jeder Abschnitt eine Karte auf dem Grund der Gastseite. Im
   Rahmen liegen die Abschnitte dagegen ohne eigenen Rand auf der Flaeche und
   sind durch Linien getrennt: Die Flaeche ist schon die Karte, ein zweiter Rand
   darin waere einer zu viel - so haelt es auch das Portal.
   ========================================================================== */

.syn-card {
    background-color: var(--syn-bg);
    border: 1px solid var(--syn-border);
    border-radius: var(--syn-radius-large);
    box-shadow: 0 1px 2px rgba(14, 26, 38, 0.04);
    margin-bottom: 20px;
    padding: 24px 28px 28px;
}

.syn-page--rahmen .syn-card {
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid var(--syn-border);
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    padding: 26px 0 30px;
}

/*
 * Rueckmeldung nach dem Abschicken.
 *
 * Die Masken ersetzen nach einer erfolgreichen Anfrage das Formular durch einen
 * Satz vom Server (send() in productform.js schreibt ihn in #box_wrapper), oder
 * sie stellen eine Fehlermeldung ueber das Formular. Die Meldung ist ein
 * Kasten mit einem Streifen links - in der Markenfarbe, wenn etwas geklappt hat,
 * in Rot, wenn nicht. Im Rahmen ist er gefuellt, damit er sich von den
 * Abschnitten ohne Rand abhebt.
 *
 * Steht im Geruest und nicht bei einer einzelnen Maske: Jede Maske endet mit
 * einer solchen Meldung.
 */

.syn-notice {
    border-left: 4px solid var(--syn-primary-strong);
    font-size: var(--syn-font-size);
    line-height: var(--syn-line-height);
}

/* Ist es nicht durchgegangen, bleibt das Formular stehen und die Meldung sitzt
   darueber - dann in Rot, damit sie nicht wie eine Bestaetigung aussieht */

.syn-notice--error {
    border-left-color: var(--syn-error-bg);
}

.syn-page--rahmen .syn-card.syn-notice {
    background-color: var(--syn-success-bg);
    border: 0;
    border-left: 4px solid var(--syn-primary-strong);
    border-radius: 0 var(--syn-radius) var(--syn-radius) 0;
    margin-top: 24px;
    padding: 16px 20px;
}

.syn-page--rahmen .syn-card.syn-notice--error {
    background-color: var(--syn-danger-bg);
    border-left-color: var(--syn-error-bg);
}

.syn-card__title {
    color: var(--syn-text);
    font-family: var(--syn-font-display);
    font-size: 21px;
    font-weight: 500;
    margin: 0 0 20px;
}

/*
 * Zweite Zeile unter der Ueberschrift - der Termin einer Veranstaltung. Der
 * Abstand der Ueberschrift wandert dann nach unten an den Untertitel, sonst
 * stehen beide 20px auseinander.
 */

.syn-card__title + .syn-card__subtitle {
    color: var(--syn-text-muted);
    font-size: var(--syn-font-size);
    margin: -14px 0 20px;
}

.syn-card__action {
    display: flex;
    justify-content: flex-end;
    padding-top: 20px;
}

/* ==========================================================================
   Formular und Zusammenfassung nebeneinander

   Bestellung und Seminarbuchung (SynqonyPageGUI::getColumns()): links die
   Abschnitte, rechts Warenkorb bzw. Buchungsuebersicht mit dem Absendeknopf.
   Die Spalte bleibt beim Rollen stehen - sticky im rollenden .syn-main -, so
   ist die Summe beim Durchgehen der langen Artikelliste immer zu sehen.
   ========================================================================== */

.syn-spalten {
    align-items: start;
    display: grid;
    gap: 0 40px;
    grid-template-columns: minmax(0, 1fr) 360px;
}

.syn-spalten__seite {
    padding-top: 26px;
    position: sticky;
    top: 0;
}

/*
 * Die Zusammenfassung ist der eine Kasten auf der Flaeche: Sie steht neben dem
 * Formular und nicht in seinem Fluss, die Kante sagt das.
 */

.syn-page--rahmen .syn-spalten__seite .syn-card {
    border: 1px solid var(--syn-line-strong);
    border-radius: var(--syn-radius-large);
    padding: 20px 20px 22px;
}

.syn-spalten__seite .syn-card__title {
    margin-bottom: 14px;
}

/* Darunter der Knopf ueber die ganze Breite, Hinweis und Rueckweg darunter */

.syn-page--rahmen .syn-spalten__seite .syn-submit {
    align-items: stretch;
    flex-direction: column-reverse;
    gap: 12px;
    padding-top: 16px;
}

.syn-spalten__seite .syn-submit .syn-button {
    width: 100%;
}

.syn-spalten__seite .syn-submit__aside {
    justify-content: space-between;
}

/*
 * Das Raster der Felder: zwoelf Spalten, jedes Feld belegt so viele davon, wie
 * sein Inhalt braucht (.syn-formfield--w1 bis --w12). Je Zeile ein eigenes
 * Raster - die Begruendung steht bei getRow() in Seminar_GUI.php.
 *
 * Vorher standen Bezeichnungen und Felder in getrennten Zeilen, jede Zelle mit
 * einer Prozentbreite als Inline-Style aus dem PHP. Die Zuordnung ergab sich
 * allein aus der Reihenfolge, und bei schmalem Fenster rutschten Bezeichnung
 * und Feld auseinander.
 */

.syn-grid {
    display: grid;
    gap: 18px 20px;
    grid-template-columns: repeat(12, 1fr);
}

.syn-grid + .syn-grid {
    margin-top: 18px;
}

.syn-formfield {
    display: flex;
    flex-direction: column;
    /* sonst sprengt ein langer Wert im Feld die Rasterspalte */
    min-width: 0;
}

.syn-formfield--w1 { grid-column: span 1; }

.syn-formfield--w2 { grid-column: span 2; }

.syn-formfield--w3 { grid-column: span 3; }

.syn-formfield--w4 { grid-column: span 4; }

.syn-formfield--w5 { grid-column: span 5; }

.syn-formfield--w6 { grid-column: span 6; }

.syn-formfield--w7 { grid-column: span 7; }

.syn-formfield--w8 { grid-column: span 8; }

.syn-formfield--w9 { grid-column: span 9; }

.syn-formfield--w10 { grid-column: span 10; }

.syn-formfield--w11 { grid-column: span 11; }

.syn-formfield--w12 { grid-column: span 12; }

.syn-formfield__label {
    color: var(--syn-text-muted);
    font-size: var(--syn-font-size-small);
    padding-bottom: 6px;
}

/*
 * Pflichtfeld-Stern im Markenton, aber im dunklen: "Abstufung 1" (#0cad8e) auf
 * Weiss ergibt 2,8:1, das dunklere --syn-link ("Abstufung 2", #09826a) kommt
 * auf 4,8:1. Bei einem 13px kleinen Zeichen ist das der Unterschied zwischen
 * sichtbar und nicht. Der Stern steht auf der Flaeche oder in einer Karte, also
 * auf Weiss - auf Light Mint waeren es nur 4,4:1 und der Token muesste
 * --syn-primary-ink sein.
 */

.syn-formfield__req {
    color: var(--syn-link);
    padding-left: 3px;
}

/* ==========================================================================
   Eingabefelder

   .seminar_input steht mit in der Liste: Die Anmeldemaske im Kopfbereich kommt
   aus dem gemeinsamen Common_GUI und traegt nur diese Klasse. Die Datei hier
   gilt nur fuer die Seminarseite, die Aenderung erreicht die anderen Masken
   also nicht.
   ========================================================================== */

.syn-input,
.seminar_input,
.syn-select,
.syn-textarea {
    background-color: var(--syn-bg);
    border: 1px solid var(--syn-line-field);
    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);
    width: 100%;
}

.syn-input,
.seminar_input,
.syn-select {
    height: 44px;
    padding: 0 12px;
}

/*
 * Auswahllisten tragen den Pfeil des Portals statt des Dreiecks des Systems -
 * das Dreieck sah in jedem Browser anders aus und stand dunkel schwarz auf dem
 * Feld. Der Pfeil ist ein Bild in --syn-field-chevron, dunkel heller gezeichnet.
 * Die aufgeklappte Liste bleibt die des Systems.
 */

.syn-select {
    appearance: none;
    background-image: var(--syn-field-chevron);
    background-position: right 14px center;
    background-repeat: no-repeat;
    background-size: 12px 8px;
    /* Platz fuer den Pfeil */
    padding-right: 38px;
}

.syn-textarea {
    line-height: var(--syn-line-height);
    min-height: 120px;
    padding: 10px 12px;
    resize: vertical;
}

.syn-input::placeholder,
.seminar_input::placeholder,
.syn-textarea::placeholder {
    color: var(--syn-placeholder);
}

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

/*
 * Gesperrte Felder - Kundennummer und Provider kommen aus der Anmeldung.
 *
 * Eigener Token und nicht mehr --syn-bg-muted: Der Seitengrund ist seit dem
 * Farbdokument Light Mint, und das ist hier die Akzentfarbe - siehe die
 * Begruendung an --syn-field-disabled in synqony_brand.css.
 */

.syn-input[disabled],
.syn-input[readonly] {
    background-color: var(--syn-field-disabled);
    color: var(--syn-text-muted);
}

/*
 * Fehlende Pflichtangaben: Das JavaScript der Maske setzt die Klasse und dazu
 * einen roten Rahmen als Inline-Style (addUser() in seminare.js, send() in
 * productform.js). Der Rahmen gewinnt damit ohnehin; hier kommt nur die Flaeche
 * dazu, damit das Feld auch ohne genaues Hinsehen auffaellt.
 */

.syn-input.ui-state-error,
.seminar_input.ui-state-error,
.syn-textarea.ui-state-error {
    background-color: var(--syn-danger-bg);
}


/*
 * Ein Hinweistext im Formular - etwa die Erlaeuterung zur Einzugsermaechtigung.
 * Abgesetzt vom Rest, damit er nicht wie eine Feldbeschriftung gelesen wird.
 */

.syn-hint {
    background-color: var(--syn-bg-muted);
    border-radius: var(--syn-radius);
    color: var(--syn-text-muted);
    font-size: var(--syn-font-size-small);
    line-height: var(--syn-line-height);
    margin-bottom: 18px;
    padding: 12px 14px;
}

/* ==========================================================================
   Optionsfelder

   Genau eine Wahl aus mehreren - Zahlungsart, Art der Einzugsermaechtigung.
   Beschriftung per label am Feld, damit auch der Text anklickbar ist.
   ========================================================================== */

.syn-radios {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 32px;
    /*
     * Derselbe Abstand nach unten, den auch zwei Feldzeilen zueinander haben
     * (siehe .syn-grid + .syn-grid). Ohne ihn klebte was folgt bei 0px an den
     * Optionsfeldern - im Bestellformular lagen die Beschriftungen "Name des
     * Zahlungspflichtigen", "IBAN" und "BIC" buendig unter den Radios und sahen
     * aus, als gehoerten sie zu ihnen.
     */
    margin-bottom: 18px;
}

/* Stehen die Optionsfelder am Ende einer Karte, traegt deren Polsterung den
   Abstand - dann waere der eigene zu viel */

.syn-radios:last-child {
    margin-bottom: 0;
}

.syn-radio {
    align-items: flex-start;
    display: flex;
    gap: 10px;
    /* Damit lange Beschriftungen umbrechen statt die Zeile zu sprengen -
       "Einzugsermaechtigung neu fuer wiederkehrende Zahlung" ist lang */
    max-width: 420px;
}

/*
 * Optionsknoepfe und Kaestchen in der Form des Portals (synqony_dialoge.css
 * dort): 22px, Feldflaeche mit Feldkante, gewaehlt gefuellt in Abstufung 2
 * (--syn-tab-active) mit weissem Zeichen aus einer Maske - rund beim
 * Optionsknopf, eckig beim Kaestchen. Ein blosses accent-color faerbte nur und
 * liesse den kleinen Knopf des Browsers stehen, der in jedem Browser anders
 * aussieht. Weiss auf der Fuellung 4,76:1, die Fuellung auf der Flaeche ueber
 * 3:1 (tests/design/DunkleDarstellungTest.php).
 */

.syn-radio__input,
.syn-checkbox {
    appearance: none;
    background-color: var(--syn-bg);
    border: 1px solid var(--syn-line-field);
    cursor: pointer;
    display: inline-grid;
    flex: none;
    height: 22px;
    margin: 0;
    place-content: center;
    width: 22px;
}

.syn-radio__input {
    border-radius: 50%;
    /* Auf die erste Textzeile ausrichten, nicht auf die Mitte des Blocks */
    margin-top: 1px;
}

.syn-checkbox {
    border-radius: var(--syn-radius-small);
}

.syn-radio__input::before,
.syn-checkbox::before {
    background-color: var(--syn-text-inverse);
    content: "";
    height: 18px;
    -webkit-mask: url("/img/icon-haken.svg") center / contain no-repeat;
    mask: url("/img/icon-haken.svg") center / contain no-repeat;
    transform: scale(0);
    width: 18px;
}

.syn-radio__input::before {
    -webkit-mask-image: url("/img/icon-punkt.svg");
    mask-image: url("/img/icon-punkt.svg");
}

.syn-radio__input:checked,
.syn-checkbox:checked {
    background-color: var(--syn-tab-active);
    border-color: var(--syn-tab-active);
}

.syn-radio__input:checked::before,
.syn-checkbox:checked::before {
    transform: scale(1);
}

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

.syn-radio__label {
    color: var(--syn-text);
    cursor: pointer;
    font-size: var(--syn-font-size);
    line-height: var(--syn-line-height);
}

/* ==========================================================================
   Aufklappbare Abschnitte

   Fuer Angaben, die die meisten nicht brauchen - abweichende Rechnungs- und
   Lieferadresse. Der Umschalter sitzt oben rechts in der Karte; absolut
   positioniert, damit die Ueberschrift ihre Zeile behaelt und das Markup nicht
   um ihn herum gebaut werden muss.
   ========================================================================== */

.syn-card--collapsible {
    position: relative;
}

.syn-collapse {
    background-color: var(--syn-bg-muted);
    border: 1px solid var(--syn-border);
    border-radius: var(--syn-radius);
    cursor: pointer;
    height: 32px;
    position: absolute;
    right: 24px;
    top: 20px;
    width: 32px;
}

.syn-collapse:hover {
    border-color: var(--syn-primary-strong);
}

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

/*
 * Das Zeichen im Knopf ist gezeichnet und keine Schrift: Ein Plus als Zeichen
 * sitzt je nach Schriftart anders, zwei Striche sitzen immer in der Mitte. Der
 * senkrechte verschwindet im aufgeklappten Zustand - aus dem Plus wird ein
 * Minus.
 */

.syn-collapse__sign,
.syn-collapse__sign::before {
    background-color: var(--syn-text);
    content: "";
    display: block;
    height: 2px;
    width: 12px;
}

.syn-collapse__sign {
    margin: 0 auto;
}

.syn-collapse__sign::before {
    transform: rotate(90deg);
}

.syn-collapse[aria-expanded="true"] .syn-collapse__sign::before {
    display: none;
}

/*
 * Ein Aufklapper INNERHALB einer Karte - im Teilnahmeantrag die abweichende
 * Firma zur Anfallstelle. Er soll wie ein Unterabschnitt aussehen und nicht wie
 * eine zweite Karte: gedeckte Flaeche statt weiss, kein Schatten, und die
 * Ueberschrift in der Fliesstextschrift statt in Chillax.
 */

.syn-card .syn-card--collapsible {
    background-color: var(--syn-bg-muted);
    box-shadow: none;
    margin-bottom: 0;
    padding: 14px 18px 16px;
}

.syn-card .syn-card--collapsible .syn-card__title {
    font-family: var(--syn-font-sans);
    font-size: var(--syn-font-size);
    font-weight: bold;
    margin-bottom: 0;
    /* Platz fuer den Umschalter rechts */
    padding-right: 44px;
}

.syn-card .syn-card--collapsible .syn-collapse {
    right: 16px;
    top: 12px;
}

/* Abstand erst, wenn aufgeklappt ist - sonst waere er auch zugeklappt da */

.syn-collapse__box > *:first-child {
    padding-top: 16px;
}

/*
 * Im Rahmen ist der aufklappbare Abschnitt eine Zeile wie die anderen
 * Abschnitte: Der Umschalter steht am rechten Rand der Flaeche, und zugeklappt
 * bleibt unter der Ueberschrift kein Abstand stehen.
 */

.syn-page--rahmen .syn-card--collapsible {
    padding: 22px 0;
}

.syn-page--rahmen .syn-card--collapsible > .syn-card__title {
    margin-bottom: 0;
    padding-right: 48px;
}

.syn-page--rahmen .syn-card--collapsible > .syn-collapse {
    right: 0;
    top: 20px;
}

/* Der Aufklapper in einem Abschnitt bleibt eine gedeckte Unterflaeche */

.syn-page--rahmen .syn-card .syn-card--collapsible {
    background-color: var(--syn-bg-muted);
    border: 0;
    border-radius: var(--syn-radius);
    /* Derselbe Abstand wie zwischen zwei Feldzeilen (.syn-grid + .syn-grid) */
    margin-top: 18px;
    padding: 14px 18px 16px;
}

.syn-page--rahmen .syn-card .syn-card--collapsible > .syn-collapse {
    right: 16px;
    top: 12px;
}

/* Zugeklappt beginnen - toggleBox() in order.js schaltet um */

.syn-collapse__box {
    display: none;
}

/*
 * Ein Hinweis unter einem Feld - kleiner und gedeckter als die Beschriftung,
 * damit er nicht mit ihr verwechselt wird.
 */

.syn-formfield__hint {
    color: var(--syn-text-muted);
    font-size: var(--syn-font-size-small);
    line-height: var(--syn-line-height);
    padding-top: 4px;
}

/*
 * Grossbuchstaben erzwingen - die behoerdliche Nummer im Teilnahmeantrag wird
 * gross geschrieben, ganz gleich, wie man sie eintippt. Nur die Anzeige; der
 * Wert selbst bleibt, wie eingegeben, und participate.js raeumt Leerzeichen weg.
 */

.syn-input--upper {
    text-transform: uppercase;
}

/*
 * Ein Knopf oben in der Karte - etwa "Daten von AP (Fachlich) kopieren". Steht
 * vor dem ersten Feld, deshalb der Abstand nach unten statt nach oben.
 */

.syn-card__action--top {
    padding-bottom: 18px;
    padding-top: 0;
}

/* Ein Knopf, der neben Feldern steht und sie nicht ueberragen soll */

.syn-button--small {
    font-size: var(--syn-font-size-small);
    height: 36px;
    padding: 0 16px;
}

/* ==========================================================================
   Zustimmungen

   Newsletter und Datenschutz. Kaestchen und Text stehen in einer Flex-Zeile,
   das Kaestchen oben ausgerichtet - der Text kann mehrere Zeilen lang sein und
   soll dann nicht dazu fuehren, dass das Kaestchen mittig daneben schwebt.
   ========================================================================== */

.syn-consent {
    align-items: flex-start;
    display: flex;
    gap: 12px;
}

/* Das Kaestchen selbst steht bei den Optionsfeldern - eine Form fuer beide */

/*
 * Der Text gehoert per label zum Kaestchen, ein Klick darauf setzt den Haken.
 * Deshalb der Zeigefinger: Ohne ihn sieht die Flaeche nicht anklickbar aus.
 */

.syn-consent__text {
    color: var(--syn-text);
    cursor: pointer;
    font-size: var(--syn-font-size);
    line-height: var(--syn-line-height);
}

/* Fehlende Pflichtzustimmung - errorTooltip() setzt die Klasse am Kaestchen */

.syn-checkbox.ui-state-error {
    outline: 2px solid var(--syn-error-bg);
    outline-offset: 2px;
}

/* ==========================================================================
   Knoepfe

   .syn-button ist der gefuellte Knopf fuer die Hauptaktion (buchen, anfragen),
   .syn-button--ghost der Kontur-Knopf fuer alles Nebensaechliche - genau wie
   auf der Portal-Loginseite.
   ========================================================================== */

/*
 * Beschriftung in Navy auf dem Marken-Teal (10,3:1) - weisse Schrift kaeme dort
 * auf 1,8:1. Das Portal fuehrt seit 2026-09-04 dieselbe Beschriftung.
 *
 * Beim Ueberfahren und beim Tastaturfokus wechselt der Knopf wie im Portal
 * (Vorlage sind dort die Knoepfe des Support-Dialogs) auf die kraeftige Flaeche
 * --syn-fill (Navy) mit weisser Schrift (18,8:1); die Groesse bleibt. Die
 * Uebergaenge stehen am Ruhezustand, damit die Farbe beim Verlassen
 * zurueckblendet statt zu springen; ohne Uebergang bei prefers-reduced-motion
 * (Block "Bewegung abbestellt").
 *
 * Der Rand nimmt --syn-fill-border: hell dunkelgruen, dunkel Mint - dort ist
 * Navy so dunkel wie die Karte, und der Knopf verloere seine Kante.
 */

.syn-button {
    background-color: 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: 18px;
    height: 44px;
    min-width: 150px;
    padding: 0 28px;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.syn-button:hover,
.syn-button:focus-visible {
    background-color: var(--syn-fill);
    border-color: var(--syn-fill-border);
    color: var(--syn-fill-ink);
}

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

/*
 * Kontur-Knopf: Beschriftung im dunklen Markenton --syn-primary-ink, weil
 * "Abstufung 1" (#0cad8e) auf Weiss nur 2,8:1 erreicht; auf Weiss 8,64:1. Die
 * Kontur bleibt im hellen Teal - eine Linie ist kein Text und darf leuchten.
 *
 * Beim Ueberfahren geht er wie im Portal in denselben Zustand wie der gefuellte
 * Knopf: der Zeiger sagt "hier passiert etwas", nicht "das ist die zweite Stufe".
 */

.syn-button--ghost {
    background-color: transparent;
    border-color: var(--syn-primary);
    color: var(--syn-primary-ink);
    font-size: var(--syn-font-size);
    height: 40px;
    min-width: 120px;
}

.syn-button--ghost:hover,
.syn-button--ghost:focus-visible {
    background-color: var(--syn-fill);
    border-color: var(--syn-fill-border);
    color: var(--syn-fill-ink);
}

/* ==========================================================================
   Abschluss: Pflichtfeld-Hinweis und Hauptaktion
   ========================================================================== */

.syn-submit {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: space-between;
    padding-top: 4px;
}

/* Im Rahmen steht die Zeile unter der Linie des letzten Abschnitts */

.syn-page--rahmen .syn-submit {
    padding-top: 24px;
}

/*
 * Links das Nebensaechliche: Pflichtfeld-Hinweis und Rueckweg. Sie stehen
 * nebeneinander, brechen aber untereinander um, wenn die Zeile schmal wird.
 */

.syn-submit__aside {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
}

.syn-submit__hint {
    color: var(--syn-text-muted);
    font-size: var(--syn-font-size-small);
}

/*
 * Der Rueckweg ist ein Weg, keine Handlung - deshalb ein Link und kein Knopf,
 * und in derselben Groesse wie der Hinweis daneben.
 */

.syn-submit .syn-headerlink {
    font-size: var(--syn-font-size-small);
}

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

   Auf dem Rahmen unter der Flaeche: das Produktlogo, darunter Copyright und
   Impressum in weisser Schrift wie der Kopf.
   ========================================================================== */

.syn-footer {
    color: var(--syn-bar-ink);
    font-size: var(--syn-font-size-small);
    padding: 24px 24px 20px;
    text-align: center;
}

/*
 * 52px wie das Logo im Fuss des Portals. Die Masse stehen zusaetzlich am
 * img-Element, damit der Fuss beim Laden nicht springt.
 */

.syn-footer__logo {
    margin-bottom: 12px;
}

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

/* Das Logo ist der Link nach synqony.com; der Fokusring legt sich um es */

.syn-footer__logo a {
    border-radius: var(--syn-radius-small);
    display: inline-block;
}

.syn-footer__inner {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 0;
    justify-content: center;
}

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

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

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

/* Abstand um den senkrechten Strich zwischen den Links, wie im Portal */

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

/* ==========================================================================
   Anmeldemaske im Sprechblasen-Dialog (qtip)

   Das Markup kommt aus Common_GUI::getLoginGUI() und gehoert allen Masken des
   Projekts - es bleibt unangetastet und wird hier nur fuer die Seminarseite
   neu gestaltet.
   ========================================================================== */

.qtip {
    max-width: 360px;
}

/*
 * Die Sprechblase selbst - Anmeldung und Fehlerhinweis am Feld. Beide laufen
 * mit style.widget, ihre Flaeche kaeme also aus .ui-widget-content des
 * jQuery-UI-Themes (weiss, grauer Rand, Schrift #333) und bliebe dunkel weiss.
 * Hier in der Hinweisform des Portals: Karte mit Navy-Umriss.
 */

.qtip.ui-tooltip {
    box-shadow: var(--syn-tooltip-shadow);
}

.qtip.ui-tooltip .qtip-content {
    background: var(--syn-tooltip-bg);
    border: 1px solid var(--syn-tooltip-border);
    color: var(--syn-text);
}

/*
 * Die Anmeldung ist kein Hinweis, sondern ein kleines Formular (Klasse aus
 * seminare.js und order.js): Grund wie die Flaeche, darin Felder wie im
 * Formular.
 */

.qtip.syn-anmeldung .qtip-content {
    background: var(--syn-surface);
    border-radius: var(--syn-radius-large);
}

.qtip-content .login_div {
    box-sizing: border-box;
    height: auto;
    padding: 6px 4px;
    width: 320px;
}

.login_div_hl {
    color: var(--syn-text);
    font-size: var(--syn-font-size);
    line-height: var(--syn-line-height);
    padding-bottom: 16px;
}

.login_div_subhl {
    color: var(--syn-text-muted);
    font-size: var(--syn-font-size-small);
    padding: 12px 0 6px;
}

.login_div input {
    box-sizing: border-box;
    margin: 0;
    width: 100%;
}

/*
 * Die Providerliste im Dialog kommt in zwei Gestalten, weil index.php sie ueber
 * Common_GUI mit Common::isMobileDevice() baut: Am Rechner haengt der
 * jQuery-Multiselect-Aufsatz daran (siehe die Regel weiter unten), auf einem
 * Telefon bleibt sie ein einfaches select - dort traegt sie die Klasse
 * login_dropdown_mobile, und seminare.js laesst den Aufsatz dann weg. Gestaltet
 * war dieser Fall bisher in seminar_mobile.css, die seit #39 nicht mehr geladen
 * wird. Diese Regel deckt ihn ab.
 */

.login_div select {
    background-color: var(--syn-bg);
    border: 1px solid var(--syn-line-field);
    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);
    height: 44px;
    margin: 0;
    padding: 0 6px 0 10px;
    width: 100%;
}

/* Die beiden Knoepfe des Dialogs kommen als a.button.button_blue aus dem
   gemeinsamen Common_GUI; hier bekommen sie das Aussehen des Kontur-Knopfs */

.login_div .button,
.login_div .button:link,
.login_div .button:visited {
    background-color: transparent;
    border: 1px solid var(--syn-primary);
    border-radius: var(--syn-radius-pill);
    /* --syn-primary-ink wie beim Kontur-Knopf - siehe .syn-button--ghost */
    color: var(--syn-primary-ink);
    cursor: pointer;
    display: inline-block;
    font-family: var(--syn-font-display);
    font-size: var(--syn-font-size-small);
    font-weight: normal;
    padding: 9px 18px;
    text-decoration: none;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.login_div .button:hover,
.login_div .button:focus-visible {
    background-color: var(--syn-fill);
    border-color: var(--syn-fill-border);
    color: var(--syn-fill-ink);
}

/*
 * Die Providerliste im Dialog ist der einzige Rest des jQuery-Multiselect auf
 * dieser Seite (er kommt aus dem gemeinsamen Dialog). Das Widget schreibt
 * Breite, Hoehe, Rahmen und Schrift als Inline-Style an seinen Knopf - nur mit
 * !important ist dagegen anzukommen.
 */

.qtip-content button.ui-multiselect {
    background: var(--syn-bg) !important;
    border: 1px solid var(--syn-line-field) !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) !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 10px !important;
    text-align: left;
    width: 100% !important;
}

/*
 * Die aufgeklappten Menues der Providerliste und der Sprachwahl haengen am
 * body, nicht am Feld: ein Menue auf der Flaeche, wie die Ausklappmenues im
 * Portal.
 */

.ui-multiselect-menu {
    background-color: var(--syn-surface);
    border: 1px solid var(--syn-line-strong);
    border-radius: var(--syn-radius);
    box-shadow: var(--syn-tooltip-shadow);
    color: var(--syn-text);
}

/* common.js und order.js setzen dem Menue "Open sans" und 13px als
   Inline-Style; die Schrift laedt keine Maske */

.ui-multiselect-menu,
.ui-multiselect-menu label {
    font-family: var(--syn-font-sans) !important;
    font-size: 14px !important;
}

/* ==========================================================================
   Ladeanzeige

   common.js schaltet bei asynchronen Anfragen die Klasse "loading" am body
   (setLoading()), common.css blendet daraufhin .overlay ein. Dort steckt ein
   198x18 Pixel breiter preloader.gif-Streifen aus der alten Gestaltung.

   common.css teilen sich alle Masken des Projekts und bleibt deshalb
   unangetastet; hier wird nur fuer die Seminarseite ueberschrieben. Das GIF
   verschwindet dabei aus dem background-Kurzschreibweise-Wert - es wird also
   auch nicht mehr geladen.

   Gedreht wird die Favicon-Marke. Sie ist ein Kreismotiv aus zwei
   punktsymmetrischen Boegen, die Drehung laeuft dadurch rund und ohne sichtbaren
   Ansatz. Als Hintergrundbild allein waere sie nicht zu animieren - Drehung
   braucht ein Element, deshalb das Pseudo-Element.
   ========================================================================== */

/*
 * Vollstaendig hier, seit die umgebauten Masken common.css nicht mehr laden.
 * Die Struktur (fest im Bild, ueber allem, zunaechst unsichtbar) stand dort,
 * die Erscheinung schon vorher hier. Das GIF von damals ist weg: Das drehende
 * Favicon zeichnet die Regel darunter.
 *
 * Etwas deckender als die 0.8 zuvor, damit klar ist, dass das Formular gerade
 * nicht bedient werden kann.
 */

.overlay {
    background: rgba(255, 255, 255, 0.86);
    /* Der Seitengrund, wie im Portal; die Zeile davor fuer Browser ohne color-mix() */
    background: color-mix(in srgb, var(--syn-bg) 86%, transparent);
    display: none;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
}

/* setLoading() in common.js schaltet die Klasse am body */

body.loading {
    overflow: hidden;
}

body.loading .overlay {
    display: block;
}

.overlay::after {
    /* Als Maske in --syn-text-brand: das SVG traegt Navy fest im Bild */
    background-color: var(--syn-text-brand);
    -webkit-mask: url("/img/favicon-zedal.svg") center / contain no-repeat;
    mask: url("/img/favicon-zedal.svg") center / contain no-repeat;
    content: "";
    height: 64px;
    left: 50%;
    position: absolute;
    top: 50%;
    width: 64px;
    /* Die Verschiebung muss in der Animation mitlaufen, sonst springt das Bild
       beim ersten Bild der Drehung in die Ecke */
    animation: syn-drehen 1.1s linear infinite;
}

@keyframes syn-drehen {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/*
 * Wer Bewegung abbestellt hat, bekommt keine Drehung: An ihrer Stelle atmet die
 * Marke langsam. Ganz ohne Regung waere nicht zu erkennen, dass die Seite
 * arbeitet.
 */

@media (prefers-reduced-motion: reduce) {
    .overlay::after {
        animation: syn-atmen 2s ease-in-out infinite;
        transform: translate(-50%, -50%);
    }

    @keyframes syn-atmen {
        0%, 100% {
            opacity: 0.35;
        }

        50% {
            opacity: 1;
        }
    }
}

/* ==========================================================================
   Dialoge von jQuery UI

   Impressum, Erfolgsmeldung der Buchung und der Hinweis auf einen abgelaufenen
   Termin. Uebernommen aus der Portal-Loginseite (login_synqony.css, Abschnitte
   "Dialoge" und "Impressum"), damit die Dialoge auf beiden Seiten gleich
   aussehen.

   Das Bundle jquery-ui.min.css laedt vor dieser Datei, gleiche Spezifitaet
   genuegt also zum Ueberschreiben.
   ========================================================================== */

/* Abdunklung hinter dem Dialog im Markenblau statt im Grau des Bundles */

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

.ui-dialog {
    /* Der Grund des Themes (.ui-widget-content) ist weiss und bliebe es dunkel */
    background: var(--syn-surface);
    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);
    /* die Breite kommt als Inline-Style aus dem JavaScript (600px); auf
       schmalen Fenstern darf der Dialog nicht darueber hinausragen */
    max-width: calc(100vw - 32px);
    overflow: hidden;
    padding: 0;
}

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

.ui-dialog .ui-dialog-title {
    float: none;
    font-family: var(--syn-font-display);
    font-size: 18px;
    font-weight: 500;
    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.
 */

.ui-dialog .ui-dialog-titlebar-close {
    background: transparent;
    border: 0;
    height: 28px;
    margin-top: -14px;
    right: 14px;
    width: 28px;
}

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

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

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

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

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

/* Beschriftung blau auf teal - siehe die Begruendung bei .syn-button */

.ui-dialog .ui-dialog-buttonpane .ui-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;
    padding: 0 24px;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

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

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

   Die Knoepfe faden beim Ueberfahren ihre Farben. Wer im Betriebssystem
   "Bewegung reduzieren" gesetzt hat, bekommt den Farbwechsel ohne Uebergang -
   der Wechsel traegt die Information, der Uebergang nicht. Wie im Portal
   (login_synqony.css, Ende der Datei).
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .syn-button,
    .login_div .button,
    .ui-dialog .ui-dialog-buttonpane .ui-button {
        transition: none;
    }
}

/*
 * Die Zeichen von jQuery UI (der Papierkorb im Warenkorb, Plus und Minus der
 * eingebetteten Artikelliste, der Pfeil der Providerliste in der Anmeldung)
 * kommen aus einem dunkelgrauen Sprite; dunkel kehrt --syn-ui-icon-filter sie
 * um.
 */

.syn-main .ui-icon,
.qtip .ui-icon {
    filter: var(--syn-ui-icon-filter);
}

/* Inhalt des Impressums; Klassennamen wie im Portal */

#impressum {
    line-height: 1.6;
}

#impressum .impressum_title {
    display: inline-block;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 2px;
}

#impressum .impressum_headline {
    font-weight: 600;
}

.ui-dialog-content a,
.ui-dialog-content a:link,
.ui-dialog-content a:visited {
    color: var(--syn-link);
    text-decoration: none;
}

.ui-dialog-content a:hover,
.ui-dialog-content a:focus {
    text-decoration: underline;
}

/* ==========================================================================
   Niedrige Fenster

   Kopf, Seitenkopf und Fuss stehen fest - was sie belegen, fehlt dem Formular
   dauerhaft. Im Rahmen sind das zusammen rund 260px; auf niedrigen Fenstern
   rueckt der Seitenkopf enger zusammen, auf sehr niedrigen auch der Fuss. Die
   Logos bleiben bei 44px, die Unterzeile "by SYNQONY" vertraegt nicht weniger.

   Die Karten-Regel gilt der eingebetteten Fassung: Kontakt und Newsletter
   haengen in 600px hohen Rahmen auf zedal.de, die Fensterhoehe ist dort die des
   Rahmens. Im Rahmen der eigenen Seite ueberstimmt .syn-page--rahmen .syn-card
   sie.

   Bezugsgroesse ist die Fensterhoehe, nicht die Breite - ein breites, flaches
   Fenster hat dasselbe Problem wie ein schmales.
   ========================================================================== */

@media (max-height: 900px) {
    .syn-topbar {
        padding: 14px 0 12px;
    }

    .syn-topbar__title {
        font-size: 23px;
    }

    .syn-card {
        margin-bottom: 16px;
        padding: 18px 24px 20px;
    }

    .syn-page--rahmen .syn-card {
        padding: 20px 0 24px;
    }

    .syn-spalten__seite {
        padding-top: 20px;
    }
}

@media (max-height: 760px) {
    .syn-footer {
        padding: 12px 24px 10px;
    }

    .syn-footer__logo {
        margin-bottom: 6px;
    }
}

/* ==========================================================================
   Schmale Fenster

   Die Spaltenzahl der Felder wird stufenweise zusammengefasst. Das Raster
   behaelt dabei seine zwoelf Spalten - eine kleinere Spaltenzahl zusammen mit
   stehengebliebenen span-Angaben wuerde der Browser mit stillschweigend
   angelegten Zusatzspalten auffuellen.
   ========================================================================== */

@media (max-width: 1100px) {
    /*
     * Zwei Felder je Zeile, unabhaengig von der Spaltenzahl aus dem PHP. Eine
     * feiner abgestufte Umrechnung (schmale Felder bleiben schmal) haette in
     * jeder Zeile eine andere Luecke gelassen, weil sich die Summen nicht mehr
     * auf zwoelf ergaenzen. Gleich breite Paare sind vorhersagbar.
     *
     * Der Selektor traegt dieselbe Spezifitaet wie die --wN-Regeln oben und
     * gewinnt allein durch die spaetere Stelle in der Datei.
     */

    .syn-formfield {
        grid-column: span 6;
    }

    /*
     * Ausgenommen, was ueber die ganze Breite gedacht ist: Ein Freitextfeld in
     * halber Zeile laesst die andere Haelfte leer stehen und bietet trotzdem
     * weniger Platz zum Schreiben. Gleiche Spezifitaet wie die Regel darueber,
     * gewinnt durch die spaetere Stelle.
     */

    .syn-formfield--w12 {
        grid-column: span 12;
    }

    /*
     * Die Zusammenfassung rutscht unter das Formular - bei der Bestellung steht
     * sie dann nach der Zahlungsart, also dort, wo man ohnehin abschickt.
     */

    .syn-spalten {
        grid-template-columns: minmax(0, 1fr);
    }

    .syn-spalten__seite {
        position: static;
    }
}

@media (max-width: 767px) {
    /*
     * Auf schmalen Geraeten wieder normaler Seitenfluss - dasselbe macht die
     * Portal-Loginseite. Ein festgezurrtes Fenster mit eigenem Scrollbereich
     * vertraegt sich schlecht mit ein- und ausfahrenden Browserleisten, und Kopf
     * plus Seitenkopf wuerden vom ohnehin knappen Platz zu viel dauerhaft
     * belegen: Vom Formular blieben wenige Zentimeter.
     */

    .syn-page {
        height: auto;
        min-height: 100vh;
        min-height: 100dvh;
    }

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

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

    /* Die Aktionen rutschen unter die Wortmarke, wenn die Zeile nicht reicht */

    .syn-header__inner {
        padding: 10px 16px;
    }

    .syn-header__actions {
        justify-content: flex-start;
    }

    .syn-card {
        padding: 20px 18px 22px;
    }

    /* Auf dem Telefon steht die Ueberschrift ueber der Auswahl - den Umbruch
       macht der Flex-Container von sich aus, hier kommt nur die kleinere
       Groesse dazu */

    .syn-topbar__title {
        font-size: 21px;
    }

    /*
     * Jedes Feld auf eine eigene Zeile - aber nur fuer die Seite selbst.
     *
     * Eingebettet ist die Fensterbreite die Breite des iFRAMES, nicht die des
     * Geraets. Die Formulare von contact.php und newsletter.php haengen als
     * 633px breiter Rahmen in einer Desktop-Seite (zedal.de/abfall-*); mit dieser
     * Regel bekaemen sie dort das Telefon-Layout und waeren fast doppelt so hoch
     * wie noetig. Fuer sie greift derselbe Umbruch erst weiter unten, bei der
     * Breite, ab der auch im Rahmen zwei Spalten nicht mehr passen.
     */

    .syn-page:not(.syn-page--embedded) .syn-formfield {
        grid-column: span 12;
    }

    .syn-page:not(.syn-page--embedded) .syn-submit {
        justify-content: flex-start;
    }

    .syn-page:not(.syn-page--embedded) .syn-submit .syn-button {
        width: 100%;
    }
}

/*
 * Der Umbruch fuer die eingebettete Fassung - siehe die Begruendung im Block
 * darueber. 520px ist die Breite, unter der zwei Spalten auch im Rahmen zu eng
 * werden; ein echtes Telefon, das die einbettende Seite aufruft, landet damit
 * wieder beim Feld-je-Zeile.
 */

@media (max-width: 519px) {
    .syn-page--embedded .syn-formfield {
        grid-column: span 12;
    }

    .syn-page--embedded .syn-submit {
        justify-content: flex-start;
    }

    .syn-page--embedded .syn-submit .syn-button {
        width: 100%;
    }
}