/**
 * Teilnehmendenportal der eco media days.
 *
 * Handgeschrieben, ohne Tailwind: auf dem Server kann kein CSS gebaut werden,
 * und das Portal soll ohnehin nicht wie das Mitgliederportal aussehen, sondern
 * wie ecomediadays.org — schwarze Konturen, Pastellflächen, versetzte
 * Schatten, Sticker-Pillen, Versalien in Boldonse.
 *
 * Aufbau
 *   1  Grundwerte
 *   2  Grundgerüst
 *   3  Sticker-Pillen
 *   4  Karten
 *   5  Kopf und Navigation
 *   6  Zustandsanzeige
 *   7  Formulare und Knöpfe
 *   8  Datenlisten
 *   9  Meldungen
 *  10  Fuss
 *  11  Schmale Fenster
 */

/* ========================================================== 1  Grundwerte */

:root {
    --emd-kontur: #1a1a1a;
    --emd-radius: 14px;
    --emd-schatten: 4px 5px 0 0 var(--emd-kontur);
    --emd-schatten-klein: 3px 3px 0 0 var(--emd-kontur);

    --emd-salbei: #9ab48a;
    --emd-himmel: #98cdea;
    --emd-pfirsich: #ffc29f;
    --emd-flieder: #efccff;

    --emd-papier: #f7f4ec;
    --emd-flaeche: #ffffff;
    --emd-fehler: #b3261e;

    /* Boldonse ist eine sehr hohe Anzeigeschrift. Unter 1.4 laufen die
       Zeichen unten aus ihrer Zeile heraus — das ist auf der Hauptseite
       schon zweimal passiert. Dieser Wert ist die Untergrenze, nicht ein
       Vorschlag. */
    --emd-display: "Boldonse", "Geist", Georgia, serif;
    --emd-display-hoehe: 1.45;
    --emd-text: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* ======================================================= 2  Grundgerüst */

html {
    -webkit-text-size-adjust: 100%;
}

body.emd {
    margin: 0;
    min-height: 100vh;
    background-color: var(--emd-papier);
    background-image:
        radial-gradient(circle at 12% -6%, rgba(154, 180, 138, 0.38), transparent 42%),
        radial-gradient(circle at 92% 4%, rgba(152, 205, 234, 0.34), transparent 38%),
        radial-gradient(circle at 60% 100%, rgba(239, 204, 255, 0.30), transparent 45%);
    background-attachment: fixed;
    color: var(--emd-kontur);
    font-family: var(--emd-text);
    font-size: 16px;
    line-height: 1.6;
}

.emd-huelle {
    width: 100%;
    max-width: 860px;
    margin: 0 auto;
    padding: 0 18px 60px;
}

.emd-anzeige,
h1.emd-anzeige,
h2.emd-anzeige {
    font-family: var(--emd-display);
    font-weight: 400;
    line-height: var(--emd-display-hoehe);
    text-transform: uppercase;
    letter-spacing: 0.01em;
    margin: 0;
}

a {
    color: var(--emd-kontur);
    text-underline-offset: 3px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible {
    outline: 3px solid var(--emd-kontur);
    outline-offset: 2px;
}

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

/* ==================================================== 3  Sticker-Pillen */

.emd-pille {
    display: inline-block;
    border: 2px solid var(--emd-kontur);
    border-radius: 999px;
    padding: 9px 20px 10px;
    background: var(--emd-salbei);
    color: var(--emd-kontur);
    font-family: var(--emd-display);
    font-weight: 400;
    /* siehe Kommentar bei --emd-display-hoehe */
    line-height: var(--emd-display-hoehe);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    text-decoration: none;
}

.emd-pille--schatten {
    box-shadow: var(--emd-schatten);
}

.emd-pille--salbei { background: var(--emd-salbei); }
.emd-pille--himmel { background: var(--emd-himmel); }
.emd-pille--pfirsich { background: var(--emd-pfirsich); }
.emd-pille--flieder { background: var(--emd-flieder); }
.emd-pille--weiss { background: var(--emd-flaeche); }

.emd-pille--gross {
    font-size: 15px;
    padding: 12px 24px 13px;
}

/* =========================================================== 4  Karten */

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

.emd-karte > .emd-pille {
    /* Die Pille sitzt wie ein Aufkleber auf der Kartenkante. */
    transform: translateY(-22px);
    margin-bottom: -12px;
}

.emd-karte__inhalt > *:first-child {
    margin-top: 0;
}

.emd-karte__inhalt > *:last-child {
    margin-bottom: 0;
}

.emd-karte p {
    margin: 0 0 14px;
}

.emd-karte h3 {
    font-family: var(--emd-display);
    font-weight: 400;
    line-height: var(--emd-display-hoehe);
    text-transform: uppercase;
    font-size: 14px;
    margin: 24px 0 10px;
}

/* ============================================= 5  Kopf und Navigation */

.emd-kopf {
    padding: 26px 0 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px 28px;
    flex-wrap: wrap;
}

.emd-kopf__text {
    flex: 1 1 300px;
    min-width: 0;
}

.emd-kopf__marke {
    flex: 0 0 auto;
    display: block;
    text-decoration: none;
    /* Optisch auf die Grundlinie der Überschrift, nicht auf deren Kasten:
       Boldonse hat oben viel Luft. */
    margin-top: 2px;
}

.emd-kopf__titel {
    margin: 0;
    font-size: clamp(19px, 5.4vw, 27px);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Die winkende Hand. Ein Gag, kein Bedienelement — deshalb aria-hidden. */
.emd-kopf__hand {
    height: 40px;
    width: auto;
    flex: 0 0 auto;
    transform-origin: 70% 90%;
    animation: emd-winken 2.6s ease-in-out 0.4s 2;
}

@keyframes emd-winken {
    0%, 60%, 100% { transform: rotate(0deg); }
    68% { transform: rotate(-13deg); }
    76% { transform: rotate(9deg); }
    84% { transform: rotate(-7deg); }
    92% { transform: rotate(4deg); }
}

@media (prefers-reduced-motion: reduce) {
    .emd-kopf__hand { animation: none; }
}

.emd-kopf__unterzeile {
    font-size: 14.5px;
    opacity: 0.75;
    /* Boldonse hat tiefe Unterlängen — ohne Abstand berührt die Überschrift die Zeile. */
    margin: 10px 0 0;
}

.emd-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 22px 0 30px;
}

.emd-nav__punkt {
    display: inline-block;
    border: 2px solid var(--emd-kontur);
    border-radius: 999px;
    padding: 9px 18px 10px;
    background: var(--emd-flaeche);
    color: var(--emd-kontur);
    font-family: var(--emd-display);
    line-height: var(--emd-display-hoehe);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.emd-nav__punkt:hover,
.emd-nav__punkt:focus-visible {
    box-shadow: var(--emd-schatten-klein);
    transform: translate(-1px, -1px);
}

.emd-nav__punkt--hier {
    background: var(--emd-salbei);
    box-shadow: var(--emd-schatten-klein);
}

.emd-nav__abmelden {
    margin-left: auto;
}

.emd-nav__abmelden button {
    border: 2px solid var(--emd-kontur);
    border-radius: 999px;
    padding: 9px 18px 10px;
    background: transparent;
    color: var(--emd-kontur);
    font-family: var(--emd-display);
    line-height: var(--emd-display-hoehe);
    font-size: 12px;
    text-transform: uppercase;
    cursor: pointer;
}

.emd-nav__abmelden button:hover {
    background: var(--emd-flaeche);
}

/* ================================================== 6  Zustandsanzeige */

.emd-zustand {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.emd-zustand__kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.emd-zustand__satz {
    font-size: 17px;
    margin: 0;
}

.emd-schritte {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.emd-schritte li {
    position: relative;
    border: 2px dashed rgba(26, 26, 26, 0.3);
    border-radius: 10px;
    padding: 13px 16px 13px 46px;
    background: rgba(255, 255, 255, 0.5);
    line-height: 1.55;
}

.emd-schritte li::before {
    content: counter(emd-schritt);
    counter-increment: emd-schritt;
    position: absolute;
    left: 12px;
    top: 11px;
    width: 24px;
    height: 24px;
    border: 2px solid var(--emd-kontur);
    border-radius: 999px;
    background: var(--emd-himmel);
    font-family: var(--emd-display);
    font-size: 10px;
    line-height: 20px;
    text-align: center;
}

.emd-schritte {
    counter-reset: emd-schritt;
}

/* ========================================= 7  Formulare und Knöpfe */

.emd-formular {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 18px;
}

.emd-feld {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.emd-feld label {
    font-weight: 600;
    font-size: 15px;
    line-height: 1.4;
}

.emd-feld input {
    width: 100%;
    border: 2px solid var(--emd-kontur);
    border-radius: 10px;
    background: var(--emd-flaeche);
    padding: 13px 14px;
    font: inherit;
    /* unter 16px zoomt iOS beim Antippen in das Feld hinein */
    font-size: 16px;
    color: var(--emd-kontur);
    transition: box-shadow 0.12s ease;
}

.emd-feld input:focus-visible {
    outline: none;
    box-shadow: var(--emd-schatten-klein);
}

.emd-feld--falsch input {
    border-color: var(--emd-fehler);
}

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

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

.emd-knopf {
    display: inline-block;
    border: 2px solid var(--emd-kontur);
    border-radius: 999px;
    background: var(--emd-pfirsich);
    color: var(--emd-kontur);
    box-shadow: var(--emd-schatten);
    font-family: var(--emd-display);
    line-height: var(--emd-display-hoehe);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 15px 30px 16px;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

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

.emd-knopf--salbei { background: var(--emd-salbei); }
.emd-knopf--himmel { background: var(--emd-himmel); }

/* ==================================================== 8  Datenlisten */

.emd-daten {
    margin: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}

.emd-daten__zeile {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    padding: 12px 0;
    border-bottom: 2px dotted rgba(26, 26, 26, 0.22);
}

.emd-daten__zeile:last-child {
    border-bottom: 0;
}

.emd-daten dt {
    flex: 0 0 200px;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.7;
    margin: 0;
}

.emd-daten dd {
    flex: 1 1 220px;
    margin: 0;
    font-size: 16.5px;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* ====================================================== 9  Meldungen */

.emd-meldung {
    border: 2px solid var(--emd-kontur);
    border-radius: var(--emd-radius);
    box-shadow: var(--emd-schatten);
    background: var(--emd-himmel);
    padding: 18px 22px;
    margin: 0 0 26px;
    line-height: 1.6;
}

.emd-meldung--gut { background: var(--emd-salbei); }
.emd-meldung--achtung { background: var(--emd-pfirsich); }

.emd-meldung p {
    margin: 0;
}

.emd-hinweis {
    border: 2px dashed var(--emd-kontur);
    border-radius: var(--emd-radius);
    padding: 18px 20px;
    background: rgba(255, 255, 255, 0.45);
    line-height: 1.6;
}

.emd-hinweis p:first-child { margin-top: 0; }
.emd-hinweis p:last-child { margin-bottom: 0; }

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

.emd-fuss {
    margin-top: 34px;
    padding-top: 20px;
    border-top: 2px solid rgba(26, 26, 26, 0.2);
    font-size: 14px;
    line-height: 1.6;
    opacity: 0.78;
}

.emd-fuss a {
    color: inherit;
}

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

@media (max-width: 640px) {
    .emd-huelle {
        padding: 0 14px 44px;
    }

    .emd-karte {
        padding: 8px 18px 20px;
        margin-bottom: 24px;
    }

    .emd-nav {
        gap: 8px;
        margin: 18px 0 24px;
    }

    .emd-nav__abmelden {
        margin-left: 0;
        width: 100%;
    }

    .emd-nav__abmelden button {
        width: 100%;
    }

    .emd-knopf {
        width: 100%;
        text-align: center;
    }

    .emd-daten dt {
        flex: 1 1 100%;
    }

    .emd-daten dd {
        flex: 1 1 100%;
    }
}

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

/* ---------- Logos ---------- */

.emd-kopf__logo {
    display: block;
    width: auto;
    height: 46px;
    max-width: 100%;
    margin-bottom: 4px;
}

.emd-fuss__traeger {
    display: inline-block;
    margin-bottom: 14px;
}

.emd-fuss__traeger img {
    display: block;
    width: auto;
    height: 34px;
    max-width: 100%;
}

@media (max-width: 640px) {
    .emd-kopf { gap: 12px 18px; }
    .emd-kopf__logo { height: 32px; }
    .emd-kopf__hand { height: 34px; }
    .emd-fuss__traeger img { height: 28px; }
}

.emd-karte__fussnote {
    margin: 18px 0 0;
    font-size: 14px;
    opacity: 0.72;
}

/* ---------- Schrittkette ----------
   Der aktuelle Schritt ist nicht nur farblich abgesetzt, sondern auch durch
   Kontur, Schatten und die Beschriftung "hier stehst du". Wer Farben anders
   sieht, erkennt ihn trotzdem. */

.emd-kette {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.emd-kette__schritt {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    border: 2px solid var(--emd-kontur, #1a1a1a);
    border-radius: 12px;
    padding: 12px 12px 13px;
    background: #fff;
    font-size: 13.5px;
    line-height: 1.35;
}

.emd-kette__schritt::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -10px;
    width: 9px;
    height: 9px;
    border-top: 2px solid var(--emd-kontur, #1a1a1a);
    border-right: 2px solid var(--emd-kontur, #1a1a1a);
    transform: translateY(-50%) rotate(45deg);
}

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

.emd-kette__zeichen {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 2px solid var(--emd-kontur, #1a1a1a);
    border-radius: 50%;
    font-size: 13px;
    font-weight: 700;
    background: #fff;
}

.emd-kette__titel { font-weight: 600; }

.emd-kette__schritt--erledigt {
    background: #9ab48a;
    opacity: 0.85;
}

.emd-kette__schritt--erledigt .emd-kette__zeichen {
    background: var(--emd-kontur, #1a1a1a);
    color: #fff;
}

.emd-kette__schritt--jetzt {
    background: #FFC29F;
    border-width: 3px;
    box-shadow: 4px 5px 0 0 var(--emd-kontur, #1a1a1a);
    padding: 11px 11px 12px;
}

.emd-kette__schritt--kommt {
    border-style: dashed;
    opacity: 0.6;
}

.emd-kette__marke {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

@media (max-width: 760px) {
    .emd-kette { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .emd-kette__schritt::after { display: none; }
}

@media (max-width: 480px) {
    .emd-kette { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .emd-kette__schritt {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: 5px 10px;
    }
}

/* ---------- Kopf auf schmalen Fenstern ----------
   Logo nach oben, Begrüßung darunter: nebeneinander ist bei 375 Pixeln kein
   Platz, und das Logo zwischen Begrüßung und Navigation stört den Lesefluss. */

@media (max-width: 640px) {
    .emd-kopf {
        flex-direction: column-reverse;
        align-items: flex-start;
    }

    .emd-kopf__text {
        flex: 0 0 auto;   /* Spaltenrichtung: die 300px waeren sonst HOEHE */
        width: 100%;
    }

    .emd-kopf__marke {
        margin-top: 0;
        margin-bottom: 2px;
    }
}

/* ---------- Anmeldebereich ----------
   Die erste Seite, die jemand sieht. Sie darf laut sein — der Rest des
   Portals ist es bewusst nicht. */

.emd-anmeldung {
    position: relative;
    border: 3px solid var(--emd-kontur, #1a1a1a);
    border-radius: 22px;
    background: linear-gradient(150deg, #ffffff 0%, #f4f8f0 55%, #eaf4fb 100%);
    box-shadow: 7px 8px 0 0 var(--emd-kontur, #1a1a1a);
    padding: 40px 34px 34px;
    /* Platz fuer die Formen, die ueberstehen sollen. */
    margin: 34px 0 46px;
}

/* Aufkleber, leicht gekippt — wie auf der Hauptseite. */
.emd-anmeldung__sticker {
    position: absolute;
    z-index: 3;
    border: 2px solid var(--emd-kontur, #1a1a1a);
    border-radius: 999px;
    padding: 7px 16px 8px;
    font-family: var(--emd-anzeige, 'Boldonse', serif);
    /* Boldonse braucht Luft nach unten. */
    line-height: 1.45;
    font-size: 11px;
    text-transform: uppercase;
    box-shadow: 3px 3px 0 0 var(--emd-kontur, #1a1a1a);
    white-space: nowrap;
}

.emd-anmeldung__sticker--datum {
    top: 20px;
    right: 22px;
    background: #FFC29F;
    transform: rotate(4deg);
}

.emd-anmeldung__sticker--ort {
    bottom: 26px;
    right: 30px;
    background: #EFCCFF;
    transform: rotate(-5deg);
}

.emd-anmeldung__innen {
    position: relative;
    z-index: 1;
    max-width: 30rem;
}

.emd-anmeldung__auge {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: #5c6a55;
}

.emd-anmeldung__titel {
    margin: 0 0 16px;
    font-size: clamp(26px, 6.4vw, 40px);
}

.emd-anmeldung__satz {
    margin: 0 0 26px;
    font-size: 16.5px;
    line-height: 1.6;
}

.emd-anmeldung__form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
}

.emd-anmeldung__form .emd-feld {
    width: 100%;
}

.emd-knopf--gross {
    font-size: 15px;
    padding: 16px 34px 17px;
}

.emd-anmeldung__kleingedrucktes {
    margin: 0;
    font-size: 13px;
    opacity: 0.7;
}

/* ---------- Fussnoten: bewusst leise ---------- */

.emd-fussnoten {
    margin: 0 0 30px;
    padding: 0 2px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 44rem;
}

.emd-fussnoten p {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    opacity: 0.72;
}

.emd-fussnoten strong {
    opacity: 0.95;
}

@media (max-width: 640px) {
    .emd-anmeldung {
        padding: 30px 20px 26px;
        border-radius: 18px;
        box-shadow: 5px 6px 0 0 var(--emd-kontur, #1a1a1a);
    }

    /* Auf schmalen Fenstern wuerden die Aufkleber den Text ueberlagern. */
    .emd-anmeldung__sticker--ort { display: none; }

    .emd-anmeldung__sticker--datum {
        position: static;
        display: inline-block;
        transform: rotate(-2deg);
        margin-bottom: 16px;
    }

    .emd-anmeldung__innen { max-width: none; }

    .emd-knopf--gross { width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
    .emd-anmeldung__sticker { transform: none; }
}

/* ---------- Grafik aus der Hauptseite ----------
   Dieselben rotierenden Formen und dieselbe Hand wie im Hero von
   ecomediadays.org. Alles dekorativ, nichts davon traegt Information. */

/* Die Formen ueberstehen bewusst die Kartenkante — das ist der Collage-Look
   der Hauptseite. Damit dadurch kein seitliches Scrollen entsteht, schneidet
   die Huelle ab. */
/* Nicht die Huelle abschneiden — die ist nur 860px breit, dort wuerden die
   Formen mitten im Bild kappen. Erst am Fensterrand schneiden. */
body {
    overflow-x: clip;
}

.emd-anmeldung__form-gelb,
.emd-anmeldung__form-blau {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    user-select: none;
    /* Kein drop-shadow: die Formen bringen ihre Kontur schon mit, und der
       Filter hat sie in manchen Browsern gar nicht mehr gezeichnet. */
}

.emd-anmeldung__form-gelb {
    top: -46px;
    left: -40px;
    width: 128px;
    height: auto;
    animation: emd-dreh 26s linear infinite;
}

.emd-anmeldung__form-blau {
    right: -38px;
    bottom: -42px;
    width: 116px;
    height: auto;
    animation: emd-dreh 34s linear infinite reverse;
}

@keyframes emd-dreh {
    to { transform: rotate(360deg); }
}

/* Die Hand sitzt in der Ueberschrift und zeigt nach oben — als kleiner
   Gruss, nicht als Hinweis auf etwas. */
.emd-anmeldung__titel-hand {
    display: inline-block;
    width: auto;
    height: 0.78em;
    /* Bei kleiner Ueberschrift wuerde sie sonst auf 16px schrumpfen und
       schlicht uebersehen werden. */
    min-height: 30px;
    margin-left: 0.22em;
    vertical-align: -0.04em;
    transform-origin: 60% 90%;
    animation: emd-winken 3.8s ease-in-out 0.8s 3;
}

@media (prefers-reduced-motion: reduce) {
    .emd-anmeldung__form-gelb,
    .emd-anmeldung__form-blau,
    .emd-anmeldung__titel-hand,
    .emd-hintergrund span {
        animation: none;
    }
}

@media (max-width: 640px) {
    /* Auf schmalen Fenstern wuerden die Formen den Text ueberlagern. */
    .emd-anmeldung__form-gelb {
        /* Vollstaendig im Bild lassen: am Fensterrand wuerde der Stern sonst
           angeschnitten aussehen. */
        top: -34px;
        left: -12px;
        width: 96px;
    }

    .emd-anmeldung__form-blau { display: none; }
}


/* ---------- Hintergrund ----------
   Drei weiche Farbfelder, die langsam wandern. Sie liegen hinter allem,
   nehmen keine Klicks an und stehen still, wenn jemand reduzierte Bewegung
   eingestellt hat. Bewusst sehr langsam: es soll auffallen, wenn man
   hinschaut, und sonst nicht stoeren. */

.emd-hintergrund {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.emd-hintergrund span {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(64px);
    opacity: 0.62;
}

.emd-hintergrund span:nth-child(1) {
    width: 46vw;
    height: 46vw;
    top: -12vw;
    left: -10vw;
    background: #9ab48a;
    animation: emd-wandern-a 42s ease-in-out infinite alternate;
}

.emd-hintergrund span:nth-child(2) {
    width: 38vw;
    height: 38vw;
    top: 34vh;
    right: -12vw;
    background: #98CDEA;
    animation: emd-wandern-b 55s ease-in-out infinite alternate;
}

.emd-hintergrund span:nth-child(3) {
    width: 32vw;
    height: 32vw;
    bottom: -14vw;
    left: 26vw;
    background: #EFCCFF;
    animation: emd-wandern-c 63s ease-in-out infinite alternate;
}

@keyframes emd-wandern-a {
    to { transform: translate3d(9vw, 7vh, 0) scale(1.14); }
}

@keyframes emd-wandern-b {
    to { transform: translate3d(-11vw, -9vh, 0) scale(0.9); }
}

@keyframes emd-wandern-c {
    to { transform: translate3d(7vw, -6vh, 0) scale(1.2); }
}

@media (prefers-reduced-motion: reduce) {
    .emd-hintergrund span { animation: none; }
}

/* ================================================================
   Bewegung
   ================================================================
   Zwei Sorten: ein Auftritt beim Laden, und Reaktionen auf das, was
   man anfasst. Bewusst kein Effekt an jeder Ecke — die Seite soll
   atmen, nicht zappeln.

   Wichtig zum Aufbau: die Startwerte stehen NUR in den Keyframes,
   nie in der Grundregel. Läuft die Animation nicht — reduzierte
   Bewegung, alter Browser, abgebrochenes CSS —, ist alles trotzdem
   sichtbar. Ein unsichtbarer Anmeldeknopf wäre ein schlechter Tausch
   für eine hübsche Einblendung.
   ================================================================ */

@keyframes emd-auftritt {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
}

@keyframes emd-auftritt-kopf {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
}

.emd-auftritt .emd-kopf {
    animation: emd-auftritt-kopf 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
}

.emd-auftritt .emd-nav {
    animation: emd-auftritt 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) 0.08s backwards;
}

/* Die Bereiche kommen nacheinander — knapp genug, dass es wie eine
   Bewegung wirkt und nicht wie eine Warteschlange. */
.emd-auftritt .emd-huelle main > * {
    animation: emd-auftritt 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) 0.16s backwards;
}

.emd-auftritt .emd-huelle main > *:nth-child(2) { animation-delay: 0.24s; }
.emd-auftritt .emd-huelle main > *:nth-child(3) { animation-delay: 0.32s; }
.emd-auftritt .emd-huelle main > *:nth-child(4) { animation-delay: 0.4s; }
.emd-auftritt .emd-huelle main > *:nth-child(n+5) { animation-delay: 0.46s; }

.emd-auftritt .emd-fuss {
    animation: emd-auftritt 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) 0.5s backwards;
}

/* Die Aufkleber kippen sich beim Laden in ihre schiefe Lage. */
@keyframes emd-sticker-datum {
    from { opacity: 0; transform: rotate(-14deg) scale(0.8); }
}

@keyframes emd-sticker-ort {
    from { opacity: 0; transform: rotate(12deg) scale(0.8); }
}

.emd-auftritt .emd-anmeldung__sticker--datum {
    animation: emd-sticker-datum 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.42s backwards;
}

.emd-auftritt .emd-anmeldung__sticker--ort {
    animation: emd-sticker-ort 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.52s backwards;
}

/* ---------------- Reaktionen ---------------- */

/* Aufkleber zucken kurz, wenn man drübergeht. */
.emd-anmeldung__sticker {
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.emd-anmeldung:hover .emd-anmeldung__sticker--datum { transform: rotate(1deg) scale(1.05); }
.emd-anmeldung:hover .emd-anmeldung__sticker--ort   { transform: rotate(-2deg) scale(1.05); }

/* Knöpfe lassen sich sichtbar drücken. */
.emd-knopf {
    transition: transform 0.14s ease, box-shadow 0.14s ease;
}

.emd-knopf:active {
    transform: translate(3px, 4px);
    box-shadow: 1px 1px 0 0 var(--emd-kontur, #1a1a1a);
}

/* Karten heben sich leicht, wenn der Zeiger draufliegt. */
.emd-karte {
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.emd-karte:hover {
    transform: translate(-1px, -2px);
}

/* Der aktuelle Schritt atmet — so findet das Auge ihn wieder,
   auch ohne die Farben unterscheiden zu können. */
@keyframes emd-atmen {
    0%, 100% { box-shadow: 4px 5px 0 0 var(--emd-kontur, #1a1a1a); }
    50%      { box-shadow: 5px 7px 0 0 var(--emd-kontur, #1a1a1a); }
}

.emd-kette__schritt--jetzt {
    animation: emd-atmen 3.2s ease-in-out infinite;
}

/* Eingabefelder wachsen beim Hineinklicken minimal. */
.emd-formular input,
.emd-bewerbung input,
.emd-bewerbung textarea,
.emd-bewerbung select {
    transition: box-shadow 0.14s ease, border-color 0.14s ease;
}

/* Links im Fließtext bekommen einen mitlaufenden Unterstrich. */
.emd-huelle main a:not(.emd-knopf):not(.emd-pille) {
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-size: 0 2px;
    background-position: 0 100%;
    transition: background-size 0.24s ease;
    text-decoration: none;
}

.emd-huelle main a:not(.emd-knopf):not(.emd-pille):hover,
.emd-huelle main a:not(.emd-knopf):not(.emd-pille):focus-visible {
    background-size: 100% 2px;
}

/* ---------------- Wer keine Bewegung will, bekommt keine ---------------- */

@media (prefers-reduced-motion: reduce) {
    .emd-auftritt .emd-kopf,
    .emd-auftritt .emd-nav,
    .emd-auftritt .emd-huelle main > *,
    .emd-auftritt .emd-fuss,
    .emd-auftritt .emd-anmeldung__sticker--datum,
    .emd-auftritt .emd-anmeldung__sticker--ort,
    .emd-kette__schritt--jetzt {
        animation: none;
    }

    .emd-anmeldung__sticker,
    .emd-knopf,
    .emd-karte,
    .emd-huelle main a {
        transition: none;
    }

    .emd-karte:hover { transform: none; }
    .emd-knopf:active { transform: none; }
}


/* ---------- Hintergrund, zweite Ebene ----------
   Ein viertes Farbfeld und ein paar treibende Formen. Sie steigen sehr
   langsam auf und drehen sich dabei — zwischen 70 und 110 Sekunden pro
   Durchlauf. Bewusst so traege: es soll auffallen, wenn man einen Moment
   verweilt, und beim Arbeiten nicht am Auge ziehen. */

.emd-hintergrund span:nth-child(4) {
    width: 30vw;
    height: 30vw;
    top: 8vh;
    left: 38vw;
    background: #FFC29F;
    opacity: 0.45;
    animation: emd-wandern-d 71s ease-in-out infinite alternate;
}

@keyframes emd-wandern-d {
    to { transform: translate3d(-8vw, 11vh, 0) scale(1.12); }
}

.emd-hintergrund i {
    position: absolute;
    display: block;
    opacity: 0.4;
}

/* Die Sterne aus dem Hero, klein und blass. */
.emd-hg-stern {
    background-repeat: no-repeat;
    background-size: contain;
}

.emd-hg-stern--gelb {
    width: 78px; height: 78px;
    left: 6vw; top: 78vh;
    background-image: url('/emd-portal/bilder/home1-shape2.webp');
    animation: emd-treiben-hoch 86s linear infinite;
}

.emd-hg-stern--blau {
    width: 62px; height: 62px;
    left: 72vw; top: 96vh;
    background-image: url('/emd-portal/bilder/home1-shape1.webp');
    animation: emd-treiben-hoch 104s linear infinite 12s;
}

.emd-hg-stern--gelb2 {
    width: 46px; height: 46px;
    left: 44vw; top: 88vh;
    background-image: url('/emd-portal/bilder/home1-shape2.webp');
    animation: emd-treiben-hoch 73s linear infinite 34s;
}

/* Ringe und Kreise mit der schwarzen Kontur der Seite. */
.emd-hg-ring {
    border: 2px solid var(--emd-kontur, #1a1a1a);
    border-radius: 50%;
    opacity: 0.16;
}

.emd-hg-ring--1 {
    width: 120px; height: 120px;
    left: 18vw; top: 92vh;
    animation: emd-treiben-hoch 97s linear infinite 6s;
}

.emd-hg-ring--2 {
    width: 74px; height: 74px;
    left: 86vw; top: 84vh;
    animation: emd-treiben-hoch 79s linear infinite 41s;
}

.emd-hg-kreis {
    border-radius: 50%;
    opacity: 0.3;
}

.emd-hg-kreis--1 {
    width: 34px; height: 34px;
    background: #9ab48a;
    left: 60vw; top: 90vh;
    animation: emd-treiben-hoch 68s linear infinite 22s;
}

.emd-hg-kreis--2 {
    width: 22px; height: 22px;
    background: #98CDEA;
    left: 30vw; top: 99vh;
    animation: emd-treiben-hoch 91s linear infinite 55s;
}

/* Ein Durchlauf: von unterhalb des Bildes bis darüber hinaus, mit einer
   sanften Drehung und leichtem seitlichem Versatz. */
@keyframes emd-treiben-hoch {
    from {
        transform: translate3d(0, 12vh, 0) rotate(0deg);
        opacity: 0;
    }
    12% {
        opacity: var(--emd-hg-deckkraft, 0.4);
    }
    88% {
        opacity: var(--emd-hg-deckkraft, 0.4);
    }
    to {
        transform: translate3d(6vw, -112vh, 0) rotate(200deg);
        opacity: 0;
    }
}

.emd-hg-ring { --emd-hg-deckkraft: 0.16; }
.emd-hg-kreis { --emd-hg-deckkraft: 0.3; }

/* Auf schmalen Fenstern weniger davon — sonst wird es unruhig, und auf
   Telefonen kostet jede Bewegung Akku. */
@media (max-width: 640px) {
    .emd-hg-stern--gelb2,
    .emd-hg-ring--2,
    .emd-hg-kreis--2 {
        display: none;
    }

    .emd-hintergrund span:nth-child(4) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .emd-hintergrund i { animation: none; opacity: 0.12; }
}

/* ---------- Der Gruß der Hand ----------
   Sprechblase im Aufkleber-Stil. Rein dekorativ: vor Screenreadern
   versteckt, ohne JavaScript passiert einfach nichts. */

.emd-gruss {
    position: relative;
    display: inline-block;
    cursor: default;
}

.emd-gruss__blase {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    transform: translate(-50%, 6px) scale(0.85);
    white-space: nowrap;
    border: 2px solid var(--emd-kontur, #1a1a1a);
    border-radius: 999px;
    background: #FFE9A8;
    color: var(--emd-kontur, #1a1a1a);
    box-shadow: 3px 3px 0 0 var(--emd-kontur, #1a1a1a);
    padding: 6px 13px 7px;
    font-family: var(--emd-text, inherit);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.01em;
    text-transform: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.16s ease, transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 5;
}

/* Das Zipfelchen zur Hand hin. */
.emd-gruss__blase::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -6px;
    margin-top: -2px;
    width: 10px;
    height: 10px;
    background: #FFE9A8;
    border-right: 2px solid var(--emd-kontur, #1a1a1a);
    border-bottom: 2px solid var(--emd-kontur, #1a1a1a);
    transform: rotate(45deg);
}

.emd-gruss--aktiv .emd-gruss__blase {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
}

@keyframes emd-gruss-winken {
    0%, 100% { transform: rotate(0deg); }
    15%      { transform: rotate(-20deg); }
    30%      { transform: rotate(14deg); }
    45%      { transform: rotate(-14deg); }
    60%      { transform: rotate(10deg); }
    75%      { transform: rotate(-6deg); }
}

.emd-gruss__hand--winkt {
    animation: emd-gruss-winken 1s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
    .emd-gruss__blase { transition: opacity 0.16s ease; transform: translate(-50%, 0) scale(1); }
    .emd-gruss__hand--winkt { animation: none; }
}

/* Blase unterhalb der Hand, wenn oben kein Platz ist. */
.emd-gruss--unten .emd-gruss__blase {
    bottom: auto;
    top: calc(100% + 10px);
    transform: translate(-50%, -6px) scale(0.85);
}

.emd-gruss--unten.emd-gruss--aktiv .emd-gruss__blase {
    transform: translate(-50%, 0) scale(1);
}

.emd-gruss--unten .emd-gruss__blase::after {
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: -2px;
    border-right: none;
    border-bottom: none;
    border-left: 2px solid var(--emd-kontur, #1a1a1a);
    border-top: 2px solid var(--emd-kontur, #1a1a1a);
}

@media (prefers-reduced-motion: reduce) {
    .emd-gruss--unten .emd-gruss__blase { transform: translate(-50%, 0) scale(1); }
}

/* ---------- Programmwahl ---------- */

.emd-programm__stand { margin: 0 0 8px; font-size: 16px; }
.emd-programm__frist { margin: 0; font-size: 14px; opacity: 0.75; }
.emd-programm__zeit {
    margin: 0 0 16px;
    font-size: 14px;
    font-weight: 600;
    opacity: 0.75;
}

.emd-programm__liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.emd-programm__angebot {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    border: 2px solid var(--emd-kontur, #1a1a1a);
    border-radius: 12px;
    background: #fff;
    padding: 14px 16px 15px;
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.emd-programm__angebot:hover {
    transform: translate(-1px, -2px);
    box-shadow: 3px 4px 0 0 var(--emd-kontur, #1a1a1a);
}

.emd-programm__angebot--gewaehlt {
    background: #eef4e9;
    border-width: 3px;
    box-shadow: 4px 5px 0 0 var(--emd-kontur, #1a1a1a);
}

.emd-programm__angebot--voll {
    opacity: 0.55;
    border-style: dashed;
}

.emd-programm__angebot--voll:hover {
    transform: none;
    box-shadow: none;
}

.emd-programm__text { min-width: 0; }

.emd-programm__titel {
    margin: 0 0 4px;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.3;
}

.emd-programm__beschreibung {
    margin: 0 0 6px;
    font-size: 14px;
    line-height: 1.5;
    opacity: 0.78;
}

.emd-programm__plaetze {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    opacity: 0.7;
}

.emd-programm__aktion {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 7px;
}

.emd-programm__marke {
    font-size: 11px;
    padding: 4px 11px 5px;
}

.emd-knopf--klein {
    font-size: 12px;
    padding: 10px 20px 11px;
}

.emd-programm__weg {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: 13px;
    text-decoration: underline;
    text-underline-offset: 3px;
    opacity: 0.65;
    cursor: pointer;
    color: inherit;
}

.emd-programm__weg:hover { opacity: 1; }

@media (max-width: 640px) {
    .emd-programm__angebot {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .emd-programm__aktion {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .emd-knopf--klein { width: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .emd-programm__angebot { transition: none; }
    .emd-programm__angebot:hover { transform: none; }
}

/* ---------- Hinweise an Programmpunkten ----------
   Nur zwei Zustände: es wird knapp, oder es geht nicht mehr. Freie Plätze
   zählen wir bewusst nicht öffentlich mit — eine Zahl macht Druck und lädt
   zum Taktieren ein. Gerechnet wird trotzdem, nur eben still. */

.emd-badge {
    display: inline-block;
    border: 2px solid var(--emd-kontur, #1a1a1a);
    border-radius: 999px;
    padding: 5px 14px 6px;
    font-family: var(--emd-anzeige, 'Boldonse', serif);
    /* Boldonse braucht Luft nach unten, sonst stoesst die Schrift an. */
    line-height: 1.45;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
    box-shadow: 3px 3px 0 0 var(--emd-kontur, #1a1a1a);
}

/* Knapp: leicht gekippt wie ein aufgeklebter Zettel, damit es auffaellt. */
.emd-badge--knapp {
    background: #FF9B6A;
    transform: rotate(-3deg);
    animation: emd-badge-puls 2.6s ease-in-out infinite;
}

@keyframes emd-badge-puls {
    0%, 100% { box-shadow: 3px 3px 0 0 var(--emd-kontur, #1a1a1a); }
    50%      { box-shadow: 4px 5px 0 0 var(--emd-kontur, #1a1a1a); }
}

/* Ausgebucht bleibt ruhig — hier gibt es nichts mehr zu holen. */
.emd-badge--voll {
    background: #d8d8d8;
    box-shadow: 2px 2px 0 0 var(--emd-kontur, #1a1a1a);
}

@media (prefers-reduced-motion: reduce) {
    .emd-badge--knapp { animation: none; }
}

/* ---------- Aufruf zur Programmwahl ----------
   Bewusst lauter als die Karten darunter: solange gewählt werden kann, ist
   das der einzige Punkt, an dem etwas von der Person erwartet wird. */

.emd-aufruf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px 30px;
    flex-wrap: wrap;
    border: 3px solid var(--emd-kontur, #1a1a1a);
    border-radius: 18px;
    background: linear-gradient(140deg, #fff6ef 0%, #ffe4d3 100%);
    box-shadow: 6px 7px 0 0 var(--emd-kontur, #1a1a1a);
    padding: 26px 28px 28px;
    margin: 0 0 30px;
}

.emd-aufruf__text {
    flex: 1 1 320px;
    min-width: 0;
}

.emd-aufruf__titel {
    margin: 14px 0 8px;
    font-size: clamp(19px, 3.4vw, 26px);
}

.emd-aufruf__satz {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.55;
}

/* Der Menüpunkt ruft, solange gewählt werden kann. */
.emd-nav__punkt--ruft {
    background: var(--emd-pfirsich, #FFC29F);
    box-shadow: 3px 3px 0 0 var(--emd-kontur, #1a1a1a);
}

.emd-nav__punkt--ruft.emd-nav__punkt--hier {
    background: var(--emd-salbei, #9ab48a);
}

@media (max-width: 640px) {
    .emd-aufruf {
        padding: 20px 18px 22px;
        border-radius: 15px;
        box-shadow: 4px 5px 0 0 var(--emd-kontur, #1a1a1a);
    }

    .emd-aufruf .emd-knopf--gross {
        width: 100%;
        text-align: center;
    }
}

/* ---------- Stundenplan ----------
   Dasselbe Raster wie auf der Website: Tage untereinander, in jedem Tag die
   Blöcke von früh nach spät. Feste Punkte (Essen, Shows) bilden den Rahmen,
   die wählbaren Blöcke sind die Lücken darin. Die Auswahl selbst klappt auf,
   damit der Plan lesbar bleibt. */

.emd-plan {
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin: 0 0 30px;
}

.emd-plan__tag {
    border: 2px solid var(--emd-kontur, #1a1a1a);
    border-radius: var(--emd-radius, 14px);
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 4px 5px 0 0 var(--emd-kontur, #1a1a1a);
    overflow: hidden;
}

.emd-plan__kopf {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 0;
    padding: 14px 20px 15px;
    background: var(--emd-kontur, #1a1a1a);
    color: #fff;
    font-family: var(--emd-anzeige, 'Boldonse', serif);
    /* Boldonse braucht Luft nach unten. */
    line-height: 1.45;
    font-size: 14px;
    text-transform: uppercase;
}

.emd-plan__datum {
    font-family: var(--emd-text, inherit);
    font-size: 13px;
    font-weight: 600;
    opacity: 0.72;
    text-transform: none;
}

.emd-plan__block {
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr);
    gap: 0 18px;
    padding: 13px 20px 14px;
    border-top: 1px solid rgba(26, 26, 26, 0.14);
}

.emd-plan__zeit {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.emd-plan__uhr {
    font-weight: 700;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

.emd-plan__blockname {
    font-size: 12.5px;
    opacity: 0.65;
}

/* Fester Rahmen: zurückhaltend, das ist Orientierung, keine Entscheidung. */
.emd-plan__block--fest {
    background: rgba(26, 26, 26, 0.035);
}

.emd-plan__fest {
    margin: 0 0 3px;
    font-size: 14.5px;
    opacity: 0.78;
}

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

.emd-plan__ort {
    font-size: 12.5px;
    opacity: 0.7;
    margin-left: 8px;
}

/* Wählbarer Block, noch leer: fordert sichtbar zur Wahl auf. */
.emd-plan__leer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    width: 100%;
    border: 2px dashed var(--emd-kontur, #1a1a1a);
    border-radius: 10px;
    /* Pfirsich wie ueberall dort, wo etwas von der Person erwartet wird. */
    background: #fff1e6;
    padding: 12px 15px 13px;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}

.emd-plan__leer:hover {
    background: #FFC29F;
    transform: translate(-1px, -1px);
    box-shadow: 3px 4px 0 0 var(--emd-kontur, #1a1a1a);
}

.emd-plan__leer-titel { font-weight: 700; font-size: 15px; }
.emd-plan__leer-mehr { font-size: 13px; opacity: 0.7; }

/* Gewählt */
.emd-plan__gewaehlt {
    border: 2px solid var(--emd-kontur, #1a1a1a);
    border-radius: 10px;
    background: #eef4e9;
    padding: 12px 15px 13px;
}

.emd-plan__titel { margin: 0 0 3px; font-weight: 700; font-size: 15.5px; }
.emd-plan__text { margin: 0 0 9px; font-size: 13.5px; line-height: 1.5; opacity: 0.8; }

.emd-plan__aktion {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.emd-plan__wechseln {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    color: inherit;
}

/* Aufgeklappte Auswahl */
.emd-plan__auswahl {
    padding: 4px 20px 18px;
    background: rgba(152, 205, 234, 0.14);
    border-top: 1px solid rgba(26, 26, 26, 0.14);
}

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

.emd-programm__notiz {
    margin: 0 0 18px;
    font-size: 14px;
    opacity: 0.75;
}

/* Farbstreifen je Kategorie, wie im Stundenplan der Website */
.emd-programm__angebot--pfirsich { border-left: 7px solid #FFC29F; }
.emd-programm__angebot--salbei   { border-left: 7px solid #9ab48a; }
.emd-programm__angebot--himmel   { border-left: 7px solid #98CDEA; }
.emd-programm__angebot--flieder  { border-left: 7px solid #EFCCFF; }

@media (max-width: 640px) {
    .emd-plan__block {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    .emd-plan__zeit {
        flex-direction: row;
        align-items: baseline;
        gap: 10px;
    }

    .emd-plan__auswahl { padding: 4px 14px 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .emd-plan__leer { transition: none; }
    .emd-plan__leer:hover { transform: none; }
}

/* ---------- Bewegung bei der Programmwahl ---------- */

.emd-wahl--laedt {
    opacity: 0.55;
    transition: opacity 0.12s ease;
}

/* Die frisch gewählte Karte macht einmal auf sich aufmerksam. */
@keyframes emd-wahl-frisch {
    0%   { transform: scale(0.97); box-shadow: 2px 2px 0 0 var(--emd-kontur, #1a1a1a); }
    45%  { transform: scale(1.02); box-shadow: 6px 7px 0 0 var(--emd-kontur, #1a1a1a); }
    100% { transform: scale(1);    box-shadow: 4px 5px 0 0 var(--emd-kontur, #1a1a1a); }
}

.emd-wahl--frisch {
    animation: emd-wahl-frisch 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Die Meldung fährt von oben herein statt einfach dazustehen. */
@keyframes emd-meldung-kommt {
    from { opacity: 0; transform: translateY(-8px); }
}

.emd-meldung--kommt {
    animation: emd-meldung-kommt 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
    .emd-wahl--laedt { transition: none; }
    .emd-wahl--frisch,
    .emd-meldung--kommt { animation: none; }
}

/* ---------- Übersicht aller Angebote ---------- */

.emd-uebersicht__zurueck { margin: 0 0 22px; }

.emd-uebersicht__gruppe { margin: 0 0 34px; }

.emd-uebersicht__titel {
    display: inline-block;
    margin: 0 0 16px;
}

.emd-uebersicht__gitter {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
    gap: 16px;
}

.emd-karte-klein {
    display: flex;
    flex-direction: column;
    border: 2px solid var(--emd-kontur, #1a1a1a);
    border-radius: var(--emd-radius, 14px);
    background: #fff;
    box-shadow: 4px 5px 0 0 var(--emd-kontur, #1a1a1a);
    overflow: hidden;
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.emd-karte-klein:hover {
    transform: translate(-2px, -3px);
    box-shadow: 6px 8px 0 0 var(--emd-kontur, #1a1a1a);
}

.emd-karte-klein__bild {
    position: relative;
    aspect-ratio: 16 / 9;
    border-bottom: 2px solid var(--emd-kontur, #1a1a1a);
    background: #f1f1ef;
    overflow: hidden;
}

.emd-karte-klein__bild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Musterfläche, wenn kein Bild da ist. */
.emd-karte-klein__muster {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-family: var(--emd-anzeige, 'Boldonse', serif);
    /* Boldonse braucht Luft nach unten. */
    line-height: 1.45;
    font-size: 30px;
    color: rgba(26, 26, 26, 0.42);
    background-image:
        repeating-linear-gradient(
            -45deg,
            rgba(26, 26, 26, 0.05) 0 10px,
            transparent 10px 20px
        );
}

.emd-karte-klein--pfirsich .emd-karte-klein__bild { background: #FFC29F; }
.emd-karte-klein--salbei   .emd-karte-klein__bild { background: #9ab48a; }
.emd-karte-klein--himmel   .emd-karte-klein__bild { background: #98CDEA; }
.emd-karte-klein--flieder  .emd-karte-klein__bild { background: #EFCCFF; }

.emd-karte-klein__text {
    padding: 13px 15px 16px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.emd-karte-klein__titel {
    margin: 0;
    font-weight: 700;
    font-size: 15.5px;
    line-height: 1.3;
    text-wrap: balance;
}

.emd-karte-klein__wann {
    margin: 0;
    font-size: 12.5px;
    font-weight: 600;
    opacity: 0.68;
}

.emd-karte-klein__beschreibung {
    margin: 4px 0 0;
    font-size: 13.5px;
    line-height: 1.5;
    opacity: 0.85;
}

.emd-karte-klein__wer {
    margin: 4px 0 0;
    font-size: 12.5px;
    font-style: italic;
    opacity: 0.7;
}

@media (prefers-reduced-motion: reduce) {
    .emd-karte-klein { transition: none; }
    .emd-karte-klein:hover { transform: none; }
}

.emd-programm__stoebern { margin: 14px 0 10px; }

/* ---------- Stundenplan der Website im Portal ----------
   Der Plan kommt fertig gezeichnet von ecomediadays.org und bringt sein
   eigenes Stylesheet mit. Hier wird nur ergänzt, was das Portal hinzufügt:
   die persönliche Wahl in den wählbaren Feldern. */

.emd-planraster {
    margin: 0 0 26px;
}

/* Der Plan ist breiter als die Inhaltsspalte — er darf ausbrechen und
   innerhalb seiner selbst seitlich scrollen. */
.emd-planraster .emd-tl-huelle {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.emd-tl__gruppe--wahl {
    display: flex;
    padding: 2px;
}

/* Die Wahl sitzt als Knopf im Raster. */
.emd-tl__wahl {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    width: 100%;
    min-height: 100%;
    border: 2px solid var(--emd-kontur, #1a1a1a);
    border-radius: 9px;
    padding: 7px 9px 8px;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.emd-tl__wahl-titel {
    display: block;
    font-weight: 700;
    font-size: 13px;
    line-height: 1.25;
    /* Lange Titel dürfen umbrechen, aber nicht aus der Blase laufen. */
    overflow-wrap: anywhere;
}

.emd-tl__wahl-zusatz {
    display: block;
    font-size: 11px;
    line-height: 1.3;
    opacity: 0.75;
}

/* Gewählt */
.emd-tl__wahl--meins {
    background: #9ab48a;
    box-shadow: 3px 3px 0 0 var(--emd-kontur, #1a1a1a);
}

.emd-tl__wahl--meins:hover {
    transform: translate(-1px, -2px);
    box-shadow: 4px 5px 0 0 var(--emd-kontur, #1a1a1a);
}

/* Noch offen — fordert zur Wahl auf */
.emd-tl__wahl--offen {
    background: #fff1e6;
    border-style: dashed;
}

.emd-tl__wahl--offen:hover {
    background: #FFC29F;
    border-style: solid;
    transform: translate(-1px, -2px);
    box-shadow: 3px 4px 0 0 var(--emd-kontur, #1a1a1a);
}

/* Auswahlliste unter dem Raster */
.emd-plan__auswahl {
    border: 2px solid var(--emd-kontur, #1a1a1a);
    border-radius: var(--emd-radius, 14px);
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 4px 5px 0 0 var(--emd-kontur, #1a1a1a);
    padding: 16px 20px 20px;
    margin: 0 0 22px;
}

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

.emd-plan__auswahl-kopf {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 0 14px;
    font-size: 15px;
}

.emd-plan__auswahl-kopf span {
    font-size: 13px;
    opacity: 0.7;
    font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
    .emd-tl__wahl { transition: none; }
    .emd-tl__wahl:hover { transform: none; }
}

/* Der Plan braucht 940px Mindestbreite, die Inhaltsspalte hat 824.
   Also darf er aus der Spalte ausbrechen und die Fensterbreite nutzen.
   Der Rumpf ist seitlich beschnitten, das bleibt also sauber. */
.emd-planraster {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: min(1180px, calc(100vw - 40px));
}

/* ---------- Die Wahl feiern ---------- */

#emd-konfetti {
    position: fixed;
    inset: 0;
    z-index: 90;
    pointer-events: none;
    overflow: hidden;
}

.emd-konfetti__stueck {
    position: fixed;
    width: 9px;
    height: 13px;
    border: 1.5px solid var(--emd-kontur, #1a1a1a);
    will-change: transform, opacity;
}

@keyframes emd-knall {
    0%   { transform: scale(1);    box-shadow: 3px 3px 0 0 var(--emd-kontur, #1a1a1a); }
    28%  { transform: scale(1.09) rotate(-1.4deg); box-shadow: 7px 9px 0 0 var(--emd-kontur, #1a1a1a); }
    58%  { transform: scale(0.98) rotate(0.8deg);  box-shadow: 2px 2px 0 0 var(--emd-kontur, #1a1a1a); }
    100% { transform: scale(1);    box-shadow: 3px 3px 0 0 var(--emd-kontur, #1a1a1a); }
}

.emd-wahl--knall {
    animation: emd-knall 0.66s cubic-bezier(0.2, 1.3, 0.4, 1) var(--verzug, 0ms) both;
}

@keyframes emd-stand-voll {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.06); }
    100% { transform: scale(1); }
}

.emd-stand--voll {
    animation: emd-stand-voll 0.7s ease-out both;
}

@media (prefers-reduced-motion: reduce) {
    .emd-wahl--knall,
    .emd-stand--voll { animation: none; }
    #emd-konfetti { display: none; }
}

/* Gewaehlt: die Farbe der Kategorie, wie im Plan der Website.
   Das Gruen war eine Ersatzfarbe und hat alle Genres eingeebnet. */
.emd-tl__wahl--meins {
    background: var(--emd-farbe, #9ab48a);
}

/* ---------- Nachfrage vor einem durchlaufenden Angebot ---------- */

.emd-nachfrage {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(26, 26, 26, 0.42);
    animation: emd-nachfrage-auf 0.18s ease-out both;
}

@keyframes emd-nachfrage-auf {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.emd-nachfrage__karte {
    width: min(460px, 100%);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    background: #fffdf8;
    border: 2px solid var(--emd-kontur, #1a1a1a);
    border-radius: var(--emd-radius, 14px);
    box-shadow: 6px 8px 0 0 var(--emd-kontur, #1a1a1a);
    padding: 22px 24px 24px;
    animation: emd-nachfrage-rein 0.26s cubic-bezier(0.2, 1.25, 0.4, 1) both;
}

@keyframes emd-nachfrage-rein {
    from { transform: translateY(14px) scale(0.96); opacity: 0; }
    to   { transform: none; opacity: 1; }
}

.emd-nachfrage__titel {
    margin: 0 0 12px;
    font-family: var(--emd-display);
    font-size: 17px;
    /* Boldonse braucht Luft, sonst schneiden sich die Zeilen. */
    line-height: 1.45;
    text-transform: uppercase;
}

.emd-nachfrage__text p {
    margin: 0 0 10px;
    font-size: 15px;
    line-height: 1.5;
}

.emd-nachfrage__weg {
    border-left: 3px solid #FFC29F;
    padding-left: 10px;
}

.emd-nachfrage__knoepfe {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.emd-nachfrage__nein {
    border: 0;
    background: none;
    padding: 4px 2px;
    font: inherit;
    font-size: 14px;
    color: inherit;
    opacity: 0.7;
    text-decoration: underline;
    cursor: pointer;
}

.emd-nachfrage__nein:hover {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .emd-nachfrage,
    .emd-nachfrage__karte { animation: none; }
}

/* ---------- Hinweiszettel oben rechts ---------- */

.emd-meldungen {
    position: fixed;
    /* Unterhalb der Kopfzeile, sonst liegt der Zettel auf dem Logo. */
    top: 120px;
    right: 16px;
    z-index: 110;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(360px, calc(100vw - 32px));
    pointer-events: none;
}

.emd-meldungen .emd-meldung {
    position: relative;
    margin: 0;
    padding: 14px 40px 14px 16px;
    pointer-events: auto;
    box-shadow: 4px 5px 0 0 var(--emd-kontur);
}

.emd-meldungen .emd-meldung p {
    margin: 0 0 4px;
    font-size: 14px;
    line-height: 1.45;
}

.emd-meldungen .emd-meldung p:last-of-type {
    margin-bottom: 0;
}

.emd-meldung__zu {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    border: 2px solid var(--emd-kontur);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.7);
    font: inherit;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.emd-meldung__zu:hover {
    background: #fff;
}

@keyframes emd-zettel-rein {
    from { transform: translateX(24px); opacity: 0; }
    to   { transform: none; opacity: 1; }
}

@keyframes emd-zettel-raus {
    from { transform: none; opacity: 1; }
    to   { transform: translateX(24px); opacity: 0; }
}

.emd-meldung--kommt {
    animation: emd-zettel-rein 0.26s cubic-bezier(0.2, 1.2, 0.4, 1) both;
}

.emd-meldung--geht {
    animation: emd-zettel-raus 0.26s ease-in both;
}

@media (max-width: 640px) {
    .emd-meldungen {
        /* Knapp unter dem Logo. Die Navigation darf der Zettel kurz
           verdecken — er geht von selbst wieder weg. */
        top: 72px;
        right: 10px;
        left: 10px;
        width: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .emd-meldung--kommt,
    .emd-meldung--geht { animation: none; }
}

/* ---------- Fortschritt: ein Balken je Zeitfenster ---------- */

.emd-fortschritt__zahl {
    margin: 0 0 12px;
    font-size: 15px;
}

.emd-fortschritt {
    display: flex;
    gap: 6px;
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
}

.emd-fortschritt__stueck {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 8px 9px 9px;
    border: 2px solid var(--emd-kontur);
    border-radius: 9px;
    transition: transform 0.2s ease;
}

.emd-fortschritt__stueck--voll {
    background: var(--emd-farbe, var(--emd-salbei));
    box-shadow: var(--emd-schatten-klein);
}

.emd-fortschritt__stueck--offen {
    background: repeating-linear-gradient(
        135deg,
        rgba(26, 26, 26, 0.05) 0 6px,
        transparent 6px 12px
    );
    border-style: dashed;
}

.emd-fortschritt__wann {
    font-size: 10.5px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.65;
}

.emd-fortschritt__was {
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.25;
    /* Lange Workshoptitel duerfen umbrechen statt den Balken zu sprengen. */
    overflow-wrap: anywhere;
}

.emd-fortschritt__stueck--offen .emd-fortschritt__was {
    font-weight: 400;
    opacity: 0.55;
}

@media (max-width: 640px) {
    .emd-fortschritt {
        flex-wrap: wrap;
    }

    .emd-fortschritt__stueck {
        flex: 1 1 calc(50% - 3px);
    }
}

/* ---------- Übersicht: Plan als Wegweiser, dann Karten je Zeitfenster ---------- */

/* Die Farbe kommt jetzt je Karte aus der Kategorie, nicht mehr aus einer
   Handvoll fester Klassen. */
.emd-karte-klein__bild {
    background: var(--emd-farbe, #edeae4);
}

.emd-karte-klein__durch {
    margin: 0 0 6px;
    font-size: 11.5px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    opacity: 0.7;
}

.emd-uebersicht__zeit {
    margin-left: 8px;
    font-size: 11px;
    opacity: 0.7;
    text-transform: none;
    letter-spacing: 0;
}

.emd-uebersicht__gruppe {
    /* Beim Sprung aus dem Plan soll die Überschrift nicht am Rand kleben. */
    scroll-margin-top: 20px;
}

.emd-tl__wahl--wegweiser {
    background: rgba(255, 255, 255, 0.72);
    border-style: dashed;
    text-decoration: none;
    color: inherit;
}

.emd-tl__wahl--wegweiser:hover {
    background: #fff;
    border-style: solid;
    transform: translate(-1px, -2px);
    box-shadow: 3px 4px 0 0 var(--emd-kontur);
}

/* ---------- Die eigene Wahl deutlich markieren ----------
   In der Genrefarbe allein ging sie unter: die Farbe sagt „Ausflug", nicht
   „das ist deins". Also Pfeil, dickere Kontur und ein Aufkleber. */

.emd-tl__wahl {
    position: relative;
}

.emd-tl__wahl--meins {
    border-width: 3px;
    box-shadow: 4px 5px 0 0 var(--emd-kontur);
}

.emd-tl__wahl--meins:hover {
    transform: translate(-1px, -2px);
    box-shadow: 6px 8px 0 0 var(--emd-kontur);
}

/* „Deine Wahl" wird zum Aufkleber statt zur Kleingedruckten. */
.emd-tl__wahl--meins .emd-tl__wahl-zusatz {
    align-self: flex-start;
    max-width: 100%;
    margin-top: 2px;
    padding: 2px 8px 3px;
    border: 2px solid var(--emd-kontur);
    border-radius: 999px;
    background: #fffdf8;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.3;
    text-transform: uppercase;
    opacity: 1;
    overflow-wrap: anywhere;
}

.emd-tl__wahl--meins .emd-tl__wahl-titel {
    font-size: 13.5px;
}

/* Auch im Fortschrittsbalken die gewaehlten Felder klarer absetzen. */
.emd-fortschritt__stueck--voll {
    border-width: 3px;
}

/* ---------- Die eigene Wahl in der Angebotsliste ----------
   Hier steht die Entscheidung, hier muss sie auffallen: ein Pfeil zeigt auf
   den Eintrag, der Farbstreifen der Kategorie wird breiter. Die blasse gruene
   Fuellung allein war zu leise. */

.emd-programm__angebot {
    /* Der Streifen kommt aus der Kategorie selbst, nicht mehr aus einer
       Handvoll fester Klassen. */
    border-left: 7px solid var(--emd-farbe, #edeae4);
    position: relative;
}

/* Der ganze Eintrag ist das Signal, nicht nur ein Zeichen daneben:
   Kategoriefarbe als Fuellung, abgehoben vom Rest, mit Pfeil und Aufkleber. */
.emd-programm__angebot--gewaehlt {
    background: var(--emd-farbe, #9ab48a);
    border-width: 3px;
    border-left-width: 14px;
    padding-left: 40px;
    box-shadow: 6px 7px 0 0 var(--emd-kontur);
    transform: translate(-2px, -3px);
}

.emd-programm__angebot--gewaehlt:hover {
    transform: translate(-3px, -5px);
    box-shadow: 8px 10px 0 0 var(--emd-kontur);
}

.emd-programm__angebot--gewaehlt::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 19px;
    width: 0;
    height: 0;
    border-left: 15px solid var(--emd-kontur);
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
}

.emd-programm__angebot--gewaehlt .emd-programm__titel {
    font-weight: 700;
    font-size: 16px;
}

/* Auf der farbigen Fuellung braucht der Beschreibungstext mehr Kontrast. */
.emd-programm__angebot--gewaehlt .emd-programm__beschreibung,
.emd-programm__angebot--gewaehlt .emd-programm__durch {
    color: var(--emd-kontur);
    opacity: 0.85;
}

/* „Deine Wahl" wird zum aufgeklebten Zettel. */
.emd-programm__angebot--gewaehlt .emd-programm__marke {
    background: #fffdf8;
    border: 2px solid var(--emd-kontur);
    box-shadow: 2px 3px 0 0 var(--emd-kontur);
    transform: rotate(-3deg);
    font-size: 11px;
    white-space: nowrap;
}

.emd-programm__angebot--gewaehlt .emd-programm__weg {
    color: var(--emd-kontur);
    opacity: 0.8;
}

@media (prefers-reduced-motion: reduce) {
    .emd-programm__angebot--gewaehlt,
    .emd-programm__angebot--gewaehlt:hover { transform: none; }
}

@media (max-width: 640px) {
    .emd-programm__angebot--gewaehlt {
        padding-left: 34px;
        border-left-width: 12px;
    }

    .emd-programm__angebot--gewaehlt::before {
        left: 9px;
        border-left-width: 13px;
    }
}