/*
 * Ausgeliefert aus dem Plugin, nicht von einem CDN (REQUIREMENTS Abschnitt 10:
 * keine externen Ressourcen).
 */

.schulanmeldung fieldset {
    border: 1px solid #ccc;
    margin: 0 0 1.5em;
    padding: 1em;
}

.schulanmeldung legend {
    font-weight: bold;
    padding: 0 .5em;
}

.schulanmeldung label {
    display: inline-block;
    font-weight: bold;
}

.schulanmeldung input[type="text"],
.schulanmeldung input[type="email"],
.schulanmeldung input[type="tel"],
.schulanmeldung input[type="date"],
.schulanmeldung textarea {
    display: block;
    max-width: 32em;
    width: 100%;
}

.schulanmeldung input[type="radio"],
.schulanmeldung input[type="checkbox"] {
    margin-right: .5em;
}

.schulanmeldung input[type="radio"] + label,
.schulanmeldung input[type="checkbox"] + label {
    font-weight: normal;
}

/* Sichtbarer Fokus. Nisarg bringt eigene Stile mit; hier wird nachgeschaerft,
   damit die Tastaturbedienung nicht davon abhaengt (Abschnitt 11). */
.schulanmeldung :focus {
    outline: 3px solid #0b5fa5;
    outline-offset: 2px;
}

.schulanmeldung-hinweis {
    color: #444;
    display: block;
    font-size: .875em;
    font-weight: normal;
}

.schulanmeldung-fehler {
    background: #fdf0f0;
    border-left: 4px solid #a30000;
    padding: .75em 1em;
}

.schulanmeldung-vorschau {
    background: #fff8dc;
    border: 2px dashed #8a6d00;
    font-size: 1.1em;
    padding: .75em 1em;
}

.schulanmeldung-status {
    font-weight: normal;
}

/*
 * Die Anmeldetage nebeneinander, einer je Spalte.
 *
 * min(300px, 100%) statt 300px: auf einem schmalen Telefon waere eine
 * feste Mindestbreite breiter als der Bildschirm, und die Seite liesse
 * sich seitlich schieben. So stehen die Tage dort untereinander.
 *
 * align-items: start, damit ein kurzer Tag nicht auf die Hoehe des langen
 * gezogen wird.
 */
.schulanmeldung-tage {
    align-items: start;
    display: grid;
    gap: 1.5em;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
}

.schulanmeldung-tag-titel {
    border-bottom: 1px solid #ccc;
    font-size: 1.1em;
    margin: 0 0 .5em;
    padding-bottom: .2em;
}

/* Innerhalb eines Tages stehen die Termine untereinander -- eine Uhrzeit
   nach der anderen liest sich als Liste, nicht als Flaeche. */
.schulanmeldung-slots {
    display: flex;
    flex-direction: column;
    gap: .4em;
}

.schulanmeldung-slots .schulanmeldung-slot {
    margin: 0;
}

/* Die ganze Kachel ist das Ziel, nicht nur der Punkt davor. */
.schulanmeldung-slots label {
    align-items: center;
    border: 1px solid #bbb;
    border-radius: 3px;
    cursor: pointer;
    display: flex;
    font-weight: normal;
    gap: .6em;
    padding: .7em .9em;
}

.schulanmeldung-slots label:hover {
    border-color: #0b5fa5;
}

/* Tastaturbedienung: der Fokus liegt auf dem Feld, sichtbar sein muss die
   Kachel (Abschnitt 11). */
.schulanmeldung-slots label:focus-within {
    outline: 3px solid #0b5fa5;
    outline-offset: 2px;
}

/* Die Pause zwischen zwei Zeitfenstern -- zurueckhaltend, sie trennt nur. */
.schulanmeldung-pause {
    border: 0;
    border-top: 1px dashed #bbb;
    margin: .6em 0;
}

.schulanmeldung-beginn {
    font-weight: bold;
}

/* Tritt zurueck, bleibt aber lesbar: #666 auf Weiss sind 5,7:1 und damit
   ueber der Anforderung von 4,5:1 aus WCAG AA (Abschnitt 11). */
.schulanmeldung-bis {
    color: #666;
    font-size: .9em;
}

.schulanmeldung-slots input[type="radio"] {
    flex: none;
    margin: 0;
}

/* Der gewaehlte Termin bleibt erkennbar, ohne dass die Farbe die einzige
   Information waere -- der Punkt im Feld sagt es ohnehin. */
.schulanmeldung-slots label:has(input:checked) {
    background: #eef4fb;
    border-color: #0b5fa5;
    box-shadow: inset 0 0 0 1px #0b5fa5;
}

/* Honeypot. Nicht display:none -- manche Bots erkennen das und lassen das
   Feld dann in Ruhe. Aus dem Sichtfeld schieben wirkt zuverlaessiger.
   aria-hidden und tabindex="-1" stehen im Markup. */
.schulanmeldung-hp {
    height: 0;
    left: -9999px;
    overflow: hidden;
    position: absolute;
    width: 0;
}

.schulanmeldung-nummer strong {
    font-family: monospace;
    font-size: 1.6em;
    letter-spacing: .12em;
}

.schulanmeldung-termin,
.schulanmeldung-angaben {
    border-collapse: collapse;
    margin: 0 0 1.5em;
    width: 100%;
}

.schulanmeldung-termin caption,
.schulanmeldung-angaben caption {
    font-weight: bold;
    text-align: left;
    padding-bottom: .3em;
}

.schulanmeldung-termin th,
.schulanmeldung-angaben th {
    text-align: left;
    vertical-align: top;
    white-space: nowrap;
    width: 14em;
}

.schulanmeldung-termin th,
.schulanmeldung-termin td,
.schulanmeldung-angaben th,
.schulanmeldung-angaben td {
    border-bottom: 1px solid #ddd;
    padding: .4em .6em .4em 0;
}

.schulanmeldung-warnung {
    background: #fdf0f0;
    border-left: 4px solid #a30000;
    padding: .75em 1em;
}

.schulanmeldung-knopf {
    border: 2px solid currentColor;
    display: inline-block;
    font-weight: bold;
    padding: .6em 1.2em;
    text-decoration: none;
}

/*
 * Druck (Abschnitt 4): Strg+P muss ein brauchbares Blatt ergeben.
 *
 * Entwickelt gegen Nisarg 1.7, das klassische Theme der Schulseite. Die
 * Selektoren sind zweistufig: erst die Nisarg-eigenen Bereiche, dann die
 * gaengigen Klassen, damit ein Themewechsel den Ausdruck nicht sofort
 * zerlegt.
 */
@media print {
    .site-header,
    .site-footer,
    .site-branding,
    .main-navigation,
    .nav-links,
    #secondary,
    .widget-area,
    .sidebar,
    .entry-footer,
    .comments-area,
    .breadcrumbs,
    .skip-link,
    .schulanmeldung-aktionen,
    .schulanmeldung-storno-hinweis a {
        display: none !important;
    }

    body,
    .site-content,
    .content-area,
    .entry-content {
        background: #fff !important;
        color: #000 !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    .schulanmeldung {
        font-size: 12pt;
    }

    /* Der Termin darf nicht ueber den Seitenrand brechen. */
    .schulanmeldung-termin,
    .schulanmeldung-angaben,
    .schulanmeldung-nummer,
    .schulanmeldung-vorschau {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .schulanmeldung-vorschau {
        border: 2px solid #000;
    }

    /* Die Stornoadresse als Text, damit sie auf Papier lesbar bleibt. */
    .schulanmeldung-storno-hinweis::after {
        content: " " attr(data-url);
        word-break: break-all;
    }

    .schulanmeldung-warnung {
        border: 2px solid #000;
    }
}