/**
 * Bewerbungsformular der eco media days.
 * Greift die Bildsprache der Seite auf: schwarze Konturen, Pastellflächen,
 * versetzte Schatten, Versalien in Boldonse.
 */

.emd-bewerbung {
    --emd-an-kontur: var(--emd-kontur, #1a1a1a);
    --emd-an-radius: var(--emd-radius, 14px);
    --emd-an-schatten: 4px 5px 0 0 var(--emd-an-kontur);
    --emd-an-salbei: var(--primary-color, #9ab48a);
    --emd-an-himmel: var(--four-color, #98CDEA);
    --emd-an-pfirsich: var(--five-color, #FFC29F);
    --emd-an-flieder: var(--six-color, #EFCCFF);
    --emd-an-feld: #fff;
    --emd-an-fehler: #b3261e;

    max-width: 860px;
    margin: 0 auto;
}

/* ---------- Abschnitte ---------- */

.emd-bewerbung__form {
    display: flex;
    flex-direction: column;
    gap: 34px;
}

.emd-bewerbung__block {
    border: 2px solid var(--emd-an-kontur);
    border-radius: var(--emd-an-radius);
    background: rgba(255, 255, 255, 0.62);
    box-shadow: var(--emd-an-schatten);
    margin: 0;
    padding: 10px 26px 26px;
}

.emd-bewerbung__block > legend.emd-pille {
    margin-left: 0;
}

.emd-pille {
    display: inline-block;
    border: 2px solid var(--emd-an-kontur);
    border-radius: 999px;
    padding: 9px 20px 10px;
    background: var(--emd-an-salbei);
    color: var(--emd-an-kontur);
    font-family: var(--emd-display, "Boldonse", serif);
    /* Boldonse ist eine hohe Schrift - unter 1.4 laufen die Zeichen unten heraus. */
    line-height: 1.45;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.emd-pille--himmel { background: var(--emd-an-himmel); }
.emd-pille--pfirsich { background: var(--emd-an-pfirsich); }
.emd-pille--flieder { background: var(--emd-an-flieder); }

/* ---------- Felder ---------- */

.emd-bewerbung__felder {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 22px;
    margin-top: 22px;
}

.emd-feld {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.emd-feld--breit {
    grid-column: 1 / -1;
}

.emd-feld__label,
.emd-feld__radios legend {
    font-weight: 600;
    font-size: 15px;
    line-height: 1.4;
    color: var(--emd-an-kontur);
}

.emd-feld__muss {
    color: var(--emd-an-fehler);
}

.emd-bewerbung input[type="text"],
.emd-bewerbung input[type="email"],
.emd-bewerbung input[type="tel"],
.emd-bewerbung input[type="url"],
.emd-bewerbung input[type="date"],
.emd-bewerbung input[type="time"],
.emd-bewerbung input[type="number"],
.emd-bewerbung select,
.emd-bewerbung textarea {
    width: 100%;
    box-sizing: border-box;
    border: 2px solid var(--emd-an-kontur);
    border-radius: 10px;
    background: var(--emd-an-feld);
    padding: 12px 14px;
    font: inherit;
    font-size: 16px; /* unter 16px zoomt iOS beim Antippen */
    color: var(--emd-an-kontur);
    transition: box-shadow 0.12s ease;
}

.emd-bewerbung textarea {
    resize: vertical;
    min-height: 120px;
}

.emd-bewerbung input:focus-visible,
.emd-bewerbung select:focus-visible,
.emd-bewerbung textarea:focus-visible {
    outline: none;
    box-shadow: 3px 3px 0 0 var(--emd-an-kontur);
}

.emd-feld__hilfe {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.45;
    opacity: 0.72;
}

/* Ein Hinweis ohne Eingabefeld. Bewusst kein Warnton: das ist eine Auskunft,
   kein Fehler. */
.emd-feld__hinweis {
    margin: 0;
    border: 2px solid var(--emd-an-kontur);
    border-radius: var(--emd-radius, 14px);
    background: var(--emd-an-pfirsich);
    color: var(--emd-an-kontur);
    padding: 11px 15px 12px;
    font-size: 14.5px;
    line-height: 1.45;
}

.emd-feld__fehler {
    margin: 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--emd-an-fehler);
    display: none;
}

.emd-feld--falsch .emd-feld__fehler {
    display: block;
}

.emd-feld--falsch input,
.emd-feld--falsch select,
.emd-feld--falsch textarea,
.emd-feld--falsch .emd-feld__radios {
    border-color: var(--emd-an-fehler);
}

/* ---------- Auswahl und Haken ---------- */

.emd-feld__radios {
    border: 2px dashed rgba(26, 26, 26, 0.28);
    border-radius: 10px;
    padding: 14px 16px;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
}

.emd-feld__radios legend {
    padding: 0 6px;
}

.emd-radio,
.emd-haken {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 15px;
    line-height: 1.5;
    cursor: pointer;
}

.emd-radio input,
.emd-haken input {
    width: 20px;
    height: 20px;
    margin: 2px 0 0;
    accent-color: var(--emd-an-kontur);
    flex: 0 0 auto;
}

.emd-feld--haken {
    gap: 4px;
}

/* ---------- Honigtopf ---------- */

.emd-bewerbung__falle {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---------- Abschluss ---------- */

.emd-bewerbung__fuss {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 22px;
}

.emd-bewerbung__knopf {
    border: 2px solid var(--emd-an-kontur);
    border-radius: 999px;
    background: var(--emd-an-pfirsich);
    color: var(--emd-an-kontur);
    box-shadow: var(--emd-an-schatten);
    font-family: var(--emd-display, "Boldonse", serif);
    line-height: 1.45;
    font-size: 14px;
    text-transform: uppercase;
    padding: 15px 30px 16px;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.emd-bewerbung__knopf:hover,
.emd-bewerbung__knopf:focus-visible {
    transform: translate(2px, 2px);
    box-shadow: 2px 3px 0 0 var(--emd-an-kontur);
}

.emd-bewerbung__knopf[disabled] {
    opacity: 0.55;
    cursor: progress;
    transform: none;
    box-shadow: var(--emd-an-schatten);
}

.emd-bewerbung__pflichtnote {
    margin: 0;
    font-size: 13.5px;
    opacity: 0.72;
}

/* ---------- Rückmeldung ---------- */

.emd-bewerbung__meldung:empty {
    display: none;
}

.emd-bewerbung__meldung {
    border: 2px solid var(--emd-an-kontur);
    border-radius: var(--emd-an-radius);
    box-shadow: var(--emd-an-schatten);
    padding: 22px 26px;
    background: var(--emd-an-himmel);
    font-size: 16px;
    line-height: 1.6;
}

.emd-bewerbung__meldung--gut { background: var(--emd-an-salbei); }
.emd-bewerbung__meldung--schlecht { background: var(--emd-an-pfirsich); }

.emd-bewerbung__meldung h3 {
    margin: 0 0 8px;
    font-family: var(--emd-display, "Boldonse", serif);
    line-height: 1.45;
    font-size: 15px;
    text-transform: uppercase;
}

.emd-bewerbung__meldung p:last-child {
    margin-bottom: 0;
}

.emd-bewerbung--hinweis p {
    border: 2px dashed var(--emd-an-kontur);
    border-radius: var(--emd-an-radius);
    padding: 26px;
    margin: 0;
    text-align: center;
    font-size: 17px;
}

/* ---------- Schmale Fenster ---------- */

@media (max-width: 700px) {
    .emd-bewerbung__felder {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }

    .emd-bewerbung__block {
        padding: 8px 18px 20px;
    }

    .emd-bewerbung__form {
        gap: 26px;
    }

    .emd-bewerbung__knopf {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .emd-bewerbung * {
        transition: none !important;
    }
}

/* ---------- Mehrfachauswahl ---------- */

.emd-feld__mehrfach {
    border: 2px dashed rgba(26, 26, 26, 0.28);
    border-radius: 10px;
    padding: 14px 16px 16px;
    margin: 0;
}

.emd-feld__mehrfach legend {
    padding: 0 6px;
}

.emd-feld__mehrfach-liste {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
    gap: 10px 20px;
    margin-top: 10px;
}

.emd-feld--falsch .emd-feld__mehrfach {
    border-color: var(--emd-an-fehler);
    border-style: solid;
}

@media (max-width: 700px) {
    .emd-feld__mehrfach-liste {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- Nur für Minderjährige ---------- */

.emd-bewerbung__block[hidden] {
    display: none;
}

.emd-bewerbung__erklaerung {
    margin: 18px 0 0;
    font-size: 14.5px;
    line-height: 1.55;
    opacity: 0.78;
}

.emd-bewerbung__block--minderjaehrig {
    background: rgba(255, 194, 159, 0.22);
}

/* ---------- Ablauf einer Bewerbung ---------- */

.emd-ablauf {
    --emd-an-kontur: var(--emd-kontur, #1a1a1a);
    --emd-an-salbei: var(--primary-color, #9ab48a);
    --emd-an-himmel: var(--four-color, #98CDEA);
    --emd-an-pfirsich: var(--five-color, #FFC29F);
    --emd-an-flieder: var(--six-color, #EFCCFF);

    /* Gleiche Breite wie das Formular darunter, damit die Seite eine Kante hat. */
    max-width: 860px;
    margin: 0 auto 44px;
}

.emd-ablauf__titel {
    margin: 0 0 20px;
}

.emd-ablauf__kette {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    counter-reset: emd-schritt;
}

.emd-ablauf__schritt {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 7px;
    border: 2px solid var(--emd-an-kontur);
    border-radius: var(--emd-radius, 14px);
    background: #fff;
    padding: 14px 13px 16px;
    box-shadow: 4px 5px 0 0 var(--emd-an-kontur);
}

/* Der Pfeil zum nächsten Schritt. Rein dekorativ. */
.emd-ablauf__schritt::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -13px;
    width: 11px;
    height: 11px;
    border-top: 2px solid var(--emd-an-kontur);
    border-right: 2px solid var(--emd-an-kontur);
    transform: translateY(-50%) rotate(45deg);
    z-index: 1;
}

.emd-ablauf__schritt:last-child::after {
    display: none;
}

.emd-ablauf__nummer {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 2px solid var(--emd-an-kontur);
    border-radius: 50%;
    font-family: var(--emd-display, "Boldonse", serif);
    /* Boldonse braucht Luft nach unten, sonst stösst die Ziffer an. */
    line-height: 1.45;
    font-size: 13px;
    background: var(--emd-an-salbei);
    color: var(--emd-an-kontur);
}

.emd-ablauf__schritt--himmel .emd-ablauf__nummer { background: var(--emd-an-himmel); }
.emd-ablauf__schritt--pfirsich .emd-ablauf__nummer { background: var(--emd-an-pfirsich); }
.emd-ablauf__schritt--flieder .emd-ablauf__nummer { background: var(--emd-an-flieder); }

.emd-ablauf__titel-schritt {
    font-weight: 700;
    /* Sechs Spalten statt fuenf: etwas kleiner, damit die Bezeichnungen
       nicht in jeder Karte dreizeilig umbrechen. */
    font-size: 13.5px;
    line-height: 1.3;
    text-wrap: balance;
}

@media (max-width: 900px) {
    .emd-ablauf__kette {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .emd-ablauf__schritt::after { display: none; }
}

@media (max-width: 560px) {
    .emd-ablauf__kette {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }
    .emd-ablauf__schritt {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 12px;
        padding: 13px 15px 15px;
    }
    .emd-ablauf__nummer { flex: 0 0 auto; }
    .emd-ablauf__titel-schritt { flex: 1 1 auto; }
}

/* ---------- Altersrückmeldung ---------- */

.emd-alter {
    margin: 4px 0 0;
    border: 2px solid var(--emd-an-kontur);
    border-radius: 999px;
    background: var(--emd-an-salbei);
    color: var(--emd-an-kontur);
    padding: 8px 16px 9px;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.45;
    display: inline-block;
    box-shadow: 3px 3px 0 0 var(--emd-an-kontur);
}

.emd-alter[hidden] { display: none; }

.emd-alter--ausserhalb {
    background: var(--emd-an-pfirsich);
    font-weight: 500;
}

/* ---------- Einleitungstext auf dieselbe Kante wie Ablauf und Formular ----------
   Greift nur auf Seiten, die tatsächlich ein Bewerbungsformular enthalten.
   Kann der Browser :has() nicht, bleibt einfach alles wie bisher. */

.pxl-entry-content:has(.emd-bewerbung) > p,
.pxl-entry-content:has(.emd-bewerbung) > ul,
.pxl-entry-content:has(.emd-bewerbung) > ol,
.pxl-entry-content:has(.emd-bewerbung) > h2,
.pxl-entry-content:has(.emd-bewerbung) > h3 {
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
}

/* Bewusst KEINE eigene Schriftgroesse oder Zeilenhoehe: der Einleitungstext
   soll aussehen wie jeder andere Fliesstext der Seite. Nur die Breite wird
   auf die Kante von Ablauf und Formular gebracht. */

/* ---------- Symbole bei Auswahlmöglichkeiten ----------
   Bewusst SVG statt Emoji: Emojis sehen auf jedem Gerät anders aus und werden
   von Screenreadern vorgelesen. Diese Symbole sind rein dekorativ. */

.emd-symbol {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    color: var(--emd-an-kontur);
    opacity: 0.85;
}

.emd-radio--symbol,
.emd-haken--symbol {
    align-items: center;
    gap: 9px;
}

.emd-radio--symbol input,
.emd-haken--symbol input {
    margin-top: 0;
}

/* Bedingte Felder */
.emd-feld[hidden] {
    display: none;
}

/* ---------- Tage als kleiner Wochenkalender ----------
   Bewusst gewoehnliche Kaestchen: ohne Stylesheet und ohne JavaScript bleibt
   das hier eine ganz normale, bedienbare Mehrfachauswahl. Auch die Werte
   aendern sich nicht - nur ihre Darstellung. */

/* Raster statt Flex-Zeile: bei einem Flex-Kasten waere die letzte Kachel
   einer angebrochenen Zeile doppelt so breit wie die anderen. `auto-fit`
   laesst leere Spalten weg, sodass die fuenf Tage eine breite Zeile ganz
   ausfuellen und auf schmalen Fenstern gleichmaessig umbrechen.
   Doppelte Klasse, damit die Angabe die Grundregel der Mehrfachauswahl in
   jeder Reihenfolge schlaegt. */
.emd-kalender.emd-feld__mehrfach-liste {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
    gap: 10px;
}

.emd-kachel {
    position: relative;
    display: block;
    min-width: 0;
    margin: 0;
    border: 2px solid var(--emd-an-kontur);
    border-radius: var(--emd-an-radius, 14px);
    background: var(--emd-an-feld, #fff);
    padding: 12px 8px 13px;
    text-align: center;
    cursor: pointer;
    transition: background 0.12s ease, box-shadow 0.12s ease;
}

/* Das Kaestchen bleibt vorhanden und mit der Tastatur erreichbar - nur sieht
   man es nicht mehr, weil die Kachel selbst zeigt, ob der Tag gewaehlt ist. */
.emd-kachel input {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
}

.emd-kachel__inhalt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.emd-kachel__tag {
    font-family: var(--emd-display, "Boldonse", serif);
    /* Boldonse braucht Luft nach unten, sonst stoesst die Zeile an. */
    line-height: 1.45;
    font-size: 12px;
    text-transform: uppercase;
}

.emd-kachel__datum {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
}

.emd-kachel__zusatz {
    font-size: 12px;
    line-height: 1.35;
    opacity: 0.75;
}

.emd-kachel:hover {
    box-shadow: var(--emd-an-schatten);
}

.emd-kachel:has(input:checked) {
    background: var(--emd-an-salbei);
    box-shadow: var(--emd-an-schatten);
}

.emd-kachel:has(input:focus-visible) {
    outline: 2px solid var(--emd-an-kontur);
    outline-offset: 3px;
}

/* Rueckfall fuer Browser ohne :has(): dann hebt wenigstens das Datum den
   gewaehlten Tag hervor. */
.emd-kachel input:checked ~ .emd-kachel__inhalt .emd-kachel__datum {
    text-decoration: underline;
    text-decoration-thickness: 3px;
}