/*
Theme Name: Conferio Child
Theme URI: https://ecomediadays.org
Author: Junge Presse e.V.
Description: Child-Theme für ecomediadays.org. Enthält alle projektspezifischen Anpassungen, damit Updates des Eltern-Themes Conferio keine Änderungen überschreiben.
Template: conferio
Version: 1.0.0
License: GPL-2.0+
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: conferio-child
*/

/* Projektspezifisches CSS gehört hierher.
   Das Styling des Stundenplans liegt bewusst im Plugin emd-stundenplan,
   damit Plan und Darstellung zusammen bleiben. */

/* ============================================================ Fehlerseite */

.emd-404 {
    /* Dieselbe Angabe, die Conferio für h1–h6 setzt. Ändert sich die
       Theme-Schrift, muss dieser eine Wert nachgezogen werden. */
    --emd-display: "Boldonse", serif;
    --emd-kontur: #1a1a1a;
    --emd-radius: 14px;
    padding: clamp(50px, 8vw, 110px) 0;
    overflow: hidden;
}

.emd-404__inner {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

/* --- Bühne: Flugbahn, Wimpel und die grosse Zahl ------------------------ */

.emd-404__buehne {
    position: relative;
    margin-bottom: 26px;
    padding-top: clamp(64px, 12vw, 104px);
}

.emd-404__flug {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(600px, 108%);
    height: auto;
    pointer-events: none;
}

/* Die Spur zeichnet sich beim Laden einmal nach. */
.emd-404__spur {
    stroke-dashoffset: 0;
    animation: emd-404-spur 2.1s ease-out both;
}

@keyframes emd-404-spur {
    from { stroke-dashoffset: 620; }
    to   { stroke-dashoffset: 0; }
}

.emd-404__flieger {
    transform-box: fill-box;
    transform-origin: center;
    animation: emd-404-schweben 4.5s ease-in-out infinite;
}

@keyframes emd-404-schweben {
    0%, 100% { transform: translate(520px, 2px) rotate(-14deg); }
    50%      { transform: translate(520px, -9px) rotate(-9deg); }
}

/* Wimpel in der Formensprache des Themes */

.emd-404__wimpel {
    position: absolute;
    top: clamp(40px, 8vw, 64px);
    left: 50%;
    z-index: 2;
    display: inline-grid;
    place-items: center;
    width: 168px;
    height: 46px;
    transform: translateX(-50%) rotate(-4deg);
}

.emd-404__wimpel svg {
    grid-area: 1 / 1;
    width: 100%;
    height: 100%;
}

.emd-404__wimpeltext {
    grid-area: 1 / 1;
    z-index: 1;
    font-family: var(--emd-display);
    font-size: .625rem;
    line-height: 1.5;
    text-transform: uppercase;
    color: var(--emd-kontur);
}

.emd-404__zahl {
    position: relative;
    z-index: 1;
    /* Boldonse ist eine hohe Display-Schrift: die Zeilenhöhe muss über 1
       liegen, sonst ragt die Ziffer in die Überschrift darunter. */
    margin: 0;
    font-size: clamp(76px, 15vw, 168px);
    line-height: 1.12;
    letter-spacing: -.01em;
    color: var(--primary-color, #9ab48a);
}

/* --- Text -------------------------------------------------------------- */

.emd-404__titel {
    margin: 0 0 20px;
    font-size: clamp(22px, 3.1vw, 34px);
    line-height: 1.35;
}

.emd-404__text {
    margin: 0 auto 34px;
    max-width: 520px;
    color: var(--secondary-color, #776e6e);
}

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

.emd-404__aktion { margin: 0 0 52px; }

.emd-404__button {
    display: inline-block;
    padding: 14px 32px;
    border-radius: 999px;
    border: 2px solid var(--emd-kontur);
    background: transparent;
    color: var(--emd-kontur);
    font-family: var(--emd-display);
    font-size: .6875rem;
    line-height: 1.5;
    text-transform: uppercase;
    text-decoration: none;
    transition: background .18s ease, color .18s ease;
}

.emd-404__button:hover {
    background: #1a1a1a;
    color: #fff;
}

/* --- Vorschläge -------------------------------------------------------- */

.emd-404__links {
    padding-top: 40px;
    border-top: 2px solid rgba(26, 26, 26, .14);
    text-align: left;
}

.emd-404__linkstitel {
    margin: 0 0 20px;
    text-align: center;
    font-size: clamp(19px, 2.3vw, 25px);
    line-height: 1.3;
}

.emd-404__links ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.emd-404__kachel { margin: 0; }

.emd-404__kachel a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    height: 100%;
    padding: 20px 22px;
    border: 2px solid var(--emd-kontur);
    border-radius: var(--emd-radius);
    background: var(--emd-kachelfarbe, #EFCCFF);
    color: var(--emd-kontur);
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease;
}

.emd-404__kachel a:hover,
.emd-404__kachel a:focus-visible {
    transform: translateY(-3px);
    box-shadow: 4px 5px 0 0 var(--emd-kontur);
}

.emd-404__kacheltitel {
    font-family: var(--emd-display);
    font-size: .75rem;
    line-height: 1.5;
    text-transform: uppercase;
}

.emd-404__pfeil {
    flex: 0 0 auto;
    width: 20px;
    height: 16px;
    transition: transform .18s ease;
}

.emd-404__kachel a:hover .emd-404__pfeil { transform: translateX(4px); }

/* Farbwechsel der Kacheln aus der Palette der Website */
.emd-404__kachel--0 { --emd-kachelfarbe: var(--six-color, #EFCCFF); }
.emd-404__kachel--1 { --emd-kachelfarbe: var(--five-color, #FFC29F); }
.emd-404__kachel--2 { --emd-kachelfarbe: var(--four-color, #98CDEA); }
.emd-404__kachel--3 { --emd-kachelfarbe: var(--primary-color, #9ab48a); }

@media (max-width: 560px) {
    .emd-404__wimpel { width: 142px; height: 40px; }
    .emd-404__wimpeltext { font-size: .8125rem; }
}

/* Bewegung nur, wenn sie erwünscht ist */
@media (prefers-reduced-motion: reduce) {
    .emd-404__spur,
    .emd-404__flieger { animation: none; }
    .emd-404__kachel a,
    .emd-404__pfeil { transition: none; }
}

/* ====================================================== Seitenüberschrift */
/*
 * Der Kopfbereich jeder Seite besteht aus EINEM Widget: der Seitentitel
 * ("Programm") plus die beiden schrägen Wimpel "Jetzt bewerben" (links) und
 * "Köln 2026" (rechts).
 *
 * Zwei Probleme im Ausgangszustand:
 *
 * 1. Die Titelgröße war in festen Stufen hinterlegt (200/120/100/60/40/30 px).
 *    Zwischen 1367 px und rund 1470 px Fensterbreite galt die 200er-Stufe,
 *    "PROGRAMM" ist dort aber 1448 px breit bei nur 1347–1430 px Platz –
 *    das Wort brach mitten durch. Eine stufenlose Größe kann das nicht.
 *    Der Faktor 10vw ist gemessen: das längste vorkommende Einzelwort
 *    ("ecomediadays") ist 9,01 em breit, passt also mit Reserve.
 *
 * 2. Die Wimpel hatten eine feste Größe von 16 px – auf dem Handy stand ein
 *    30-px-Titel neben zwei 16-px-Wimpeln und ging darin unter. Jetzt
 *    skalieren sie mit.
 *
 * Bewusst auf #pxl-page-title-elementor begrenzt: dieselbe Widget-Art wird
 * auch für Überschriften im Seiteninhalt verwendet, die hiervon unberührt
 * bleiben müssen.
 */

#pxl-page-title-elementor .pxl-heading .pxl-item--title.style-text-banner .pxl-text-banner--caption {
    /* Auf dem Handy entspricht der Container praktisch der Fensterbreite,
       hier darf die Schrift also mit 10vw mitwachsen. Für breitere
       Bildschirme folgt weiter unten ein zurückhaltenderer Wert – dort ist
       der Container auf 1300px begrenzt, eine Rechnung mit vw würde den
       Platz überschätzen. Beides ist nur der Rückfall ohne JavaScript;
       mit Skript setzt kopfzeile.js die tatsächlich passende Grösse. */
    font-size: clamp(2rem, 10vw, 200px);
    letter-spacing: -.02em;
    /* Boldonse ist sehr hoch: bei 1.2 berühren sich die Zeilen eines
       umbrechenden Titels wie "ecomag Redaktion". */
    line-height: 1.3;
    /* Kein automatischer Trennstrich und kein Bruch mitten im Wort. */
    hyphens: manual;
    word-break: normal;
    overflow-wrap: break-word;
    /* Mehrwortige Titel möglichst gleichmäßig auf die Zeilen verteilen. */
    text-wrap: balance;
}

#pxl-page-title-elementor .pxl-heading .pxl-item--title.style-text-banner .pxl-text-banner--left,
#pxl-page-title-elementor .pxl-heading .pxl-item--title.style-text-banner .pxl-text-banner--right {
    font-size: clamp(10px, 1.35vw, 16px);
}

/*
 * Die Wimpel sassen mit translateX(±50%) zur Hälfte ausserhalb der
 * Überschrift. Da die Überschrift über die volle Fensterbreite läuft, lag
 * diese Hälfte ausserhalb des Bildschirms und wurde von .pxl-wapper
 * (overflow-x: clip) abgeschnitten – aus "Jetzt bewerben" war dauerhaft nur
 * "bewerben" zu lesen. Die Überschrift bekommt deshalb einen Rand, und die
 * Wimpel sitzen an dessen Ecken statt darüber hinaus. Das SVG ragt per
 * calc(100% + 30px) noch 15px über den Wimpel hinaus – dafür ist der Rand da.
 */
/*
 * KEIN max-width in Prozent auf der Überschrift:
 * Das Theme setzt .pxl-heading--inner auf display:inline-block. Dieses
 * Element schrumpft auf seinen Inhalt, seine Breite hängt also von der
 * Überschrift ab. Ein prozentualer max-width der Überschrift bezöge sich
 * damit auf sich selbst – ein Zirkelbezug, den Browser unvorhersehbar
 * auflösen. Zusammen mit einem ResizeObserver auf demselben Element
 * schaukelte sich die Schriftgrösse nach unten.
 *
 * Die Breite regelt stattdessen das Skript, gemessen am stabilen
 * .pxl-heading (Block, volle Breite des Containers).
 *
 * Nebeneffekt, der erwünscht ist: Die Überschrift bleibt so breit wie ihr
 * Wort, und die Wimpel flankieren das Wort statt die Seitenränder.
 */

@media (max-width: 767px) {
    /* Für die gestapelte Anordnung braucht die Überschrift die volle Breite. */
    #pxl-page-title-elementor .pxl-heading .pxl-heading--inner {
        display: block;
    }
}

@media (min-width: 768px) {
    #pxl-page-title-elementor .pxl-heading .pxl-item--title.style-text-banner .pxl-text-banner--caption {
        font-size: clamp(2rem, 7vw, 130px);
    }

    #pxl-page-title-elementor .pxl-heading .pxl-item--title.style-text-banner .pxl-text-banner--left,
    #pxl-page-title-elementor .pxl-heading .pxl-item--title.style-text-banner .pxl-text-banner--left.pxl-animated {
        transform: rotate(-8deg);
        animation: emd-wimpel-links 6s ease-in-out 1.2s infinite;
    }
    #pxl-page-title-elementor .pxl-heading .pxl-item--title.style-text-banner .pxl-text-banner--right,
    #pxl-page-title-elementor .pxl-heading .pxl-item--title.style-text-banner .pxl-text-banner--right.pxl-animated {
        transform: rotate(9deg);
        animation: emd-wimpel-rechts 7s ease-in-out .4s infinite;
    }
}

/* Zwei leicht unterschiedliche Bewegungen, damit es nicht wie ein Metronom
   aussieht: verschiedene Dauer, verschiedene Verzögerung, verschiedene Neigung. */
@keyframes emd-wimpel-links {
    0%, 100% { transform: rotate(-8deg) translateY(0); }
    50%      { transform: rotate(-5.5deg) translateY(-7px); }
}

@keyframes emd-wimpel-rechts {
    0%, 100% { transform: rotate(9deg) translateY(0); }
    50%      { transform: rotate(6deg) translateY(-9px); }
}

/* Beim Überfahren kurz aufrichten und vergrössern – dieselbe Geste, die die
   Kacheln der Fehlerseite und die Kacheln im Stundenplan verwenden. */
#pxl-page-title-elementor .pxl-heading .pxl-item--title.style-text-banner .pxl-text-banner--left,
#pxl-page-title-elementor .pxl-heading .pxl-item--title.style-text-banner .pxl-text-banner--right {
    transition: filter .25s ease;
    cursor: default;
}

#pxl-page-title-elementor .pxl-heading .pxl-item--title.style-text-banner .pxl-text-banner--left:hover,
#pxl-page-title-elementor .pxl-heading .pxl-item--title.style-text-banner .pxl-text-banner--right:hover {
    animation-play-state: paused;
    filter: drop-shadow(3px 4px 0 rgba(26, 26, 26, .85));
}

@media (prefers-reduced-motion: reduce) {
    #pxl-page-title-elementor .pxl-heading .pxl-item--title.style-text-banner .pxl-text-banner--left,
    #pxl-page-title-elementor .pxl-heading .pxl-item--title.style-text-banner .pxl-text-banner--left.pxl-animated,
    #pxl-page-title-elementor .pxl-heading .pxl-item--title.style-text-banner .pxl-text-banner--right,
    #pxl-page-title-elementor .pxl-heading .pxl-item--title.style-text-banner .pxl-text-banner--right.pxl-animated {
        animation: none;
    }
}

/*
 * Auf schmalen Bildschirmen liegen die beiden Wimpel über dem Titel und
 * verdecken ihn – aus "PROGRAMM" wurde sichtbar nur noch der halbe Titel.
 * Auf grossen Bildschirmen ist dieses Überlappen gewollt (Aufkleber auf einem
 * riesigen Wort), auf dem Handy nicht. Dort stehen sie deshalb übereinander:
 * "Köln 2026" über dem Titel, "Jetzt bewerben" darunter.
 *
 * position: relative statt static, weil das SVG im Wimpel absolut positioniert
 * ist und sonst an die Überschrift statt an den Wimpel andocken würde.
 */
@media (max-width: 767px) {
    #pxl-page-title-elementor .pxl-heading .pxl-item--title.style-text-banner {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }

    #pxl-page-title-elementor .pxl-heading .pxl-item--title.style-text-banner .pxl-text-banner--left,
    #pxl-page-title-elementor .pxl-heading .pxl-item--title.style-text-banner .pxl-text-banner--left.pxl-animated,
    #pxl-page-title-elementor .pxl-heading .pxl-item--title.style-text-banner .pxl-text-banner--right,
    #pxl-page-title-elementor .pxl-heading .pxl-item--title.style-text-banner .pxl-text-banner--right.pxl-animated {
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
        /* Nicht auf die Einblende-Animation warten: bliebe sie aus,
           wären die Wimpel dauerhaft unsichtbar. */
        opacity: 1;
    }

    #pxl-page-title-elementor .pxl-heading .pxl-item--title.style-text-banner .pxl-text-banner--right,
    #pxl-page-title-elementor .pxl-heading .pxl-item--title.style-text-banner .pxl-text-banner--right.pxl-animated {
        order: -1;
        transform: rotate(-4deg);
    }

    #pxl-page-title-elementor .pxl-heading .pxl-item--title.style-text-banner .pxl-text-banner--left,
    #pxl-page-title-elementor .pxl-heading .pxl-item--title.style-text-banner .pxl-text-banner--left.pxl-animated {
        order: 1;
        transform: rotate(4deg);
    }

    #pxl-page-title-elementor .pxl-heading .pxl-item--title.style-text-banner .pxl-text-banner--caption {
        text-align: center;
    }
}

/* ========================================================== Mega-Menü */
/*
 * Das Ausklappmenü unter "Über" nutzt den Showcase-Baustein, der für
 * Seitenabschnitte gedacht ist, nicht für ein Menü. Dadurch war es rund
 * 700px hoch: 60px + 80px Container-Polsterung, dazu ein quadratisches
 * Bild, das auf die volle Spaltenbreite (~460px) gezogen wurde. Da die
 * Vorlagen nur 300x300px gross sind, war es zusätzlich unscharf.
 *
 * Hier wird nichts am Inhalt geändert, nur die Darstellung: schmaleres
 * Menü, flachere Bilder, Sticker-Optik statt grauem Kasten.
 */

.pxl-menu-primary .pxl-megamenu > .sub-menu {
    max-width: 1080px;
    margin-inline: auto;
}

.pxl-menu-primary .pxl-megamenu .pxl-mega-menu-elementor {
    margin-top: 0;
}

/* Container-Polsterung deutlich kürzen */
.pxl-menu-primary .pxl-megamenu .pxl-mega-menu-elementor > .e-con,
.pxl-menu-primary .pxl-megamenu .pxl-mega-menu-elementor .e-con.e-parent {
    padding-block: 24px 28px !important;
    padding-inline: 24px !important;
    gap: 16px;
}

/* Die Kachel in der Formensprache der Seite */
.pxl-menu-primary .pxl-megamenu .pxl-showcase2 .pxl-item--inner {
    padding: 10px 10px 4px;
    border: 2px solid #1a1a1a;
    border-radius: 14px;
    background: #fff;
    transition: transform .18s ease, box-shadow .18s ease;
}

.pxl-menu-primary .pxl-megamenu .pxl-showcase2 .pxl-item--inner:hover {
    transform: translateY(-3px);
    box-shadow: 4px 5px 0 0 #1a1a1a;
}

/* Die Vorlagen sind quadratische Markengrafiken. Sie dürfen weder
   beschnitten (object-fit: cover schneidet Schriftzüge an) noch über ihre
   300px Auflösung hinaus vergrössert werden. Deshalb: feste Höhe, Seiten-
   verhältnis erhalten, zentriert. */
.pxl-menu-primary .pxl-megamenu .pxl-showcase2 .pxl-item--image {
    border-radius: 8px;
    overflow: hidden;
}

.pxl-menu-primary .pxl-megamenu .pxl-showcase2 .pxl-item--image img {
    display: block;
    width: auto;
    max-width: 100%;
    height: 150px;
    object-fit: contain;
    margin-inline: auto;
}

/* Titel: Versalien in der Display-Schrift, kompakt */
.pxl-menu-primary .pxl-megamenu .pxl-showcase2 .pxl-item--title {
    margin-top: 12px;
    margin-bottom: 8px;
    line-height: 1.4;
}

.pxl-menu-primary .pxl-megamenu .pxl-showcase2 .pxl-item--title a {
    font-family: "Boldonse", serif;
    font-size: .6875rem;
    line-height: 1.5;
    text-transform: uppercase;
    color: #1a1a1a;
}

/* Die eingeblendete Schaltfläche war mit 50px Zeilenhöhe für ein Menü zu wuchtig */
.pxl-menu-primary .pxl-megamenu .pxl-showcase2 .pxl-item--readmore {
    height: auto;
    width: auto;
    left: 50%;
    right: auto;
    top: 50%;
    transform: translate(-50%, -50%);
}

.pxl-menu-primary .pxl-megamenu .pxl-showcase2 .pxl-item--readmore a {
    line-height: 34px !important;
    min-width: 0;
    padding: 0 18px;
    border: 2px solid #1a1a1a;
    border-radius: 999px;
    font-family: "Boldonse", serif;
    font-size: .625rem;
    text-transform: uppercase;
    white-space: nowrap;
    color: #1a1a1a;
}

@media (prefers-reduced-motion: reduce) {
    .pxl-menu-primary .pxl-megamenu .pxl-showcase2 .pxl-item--inner {
        transition: none;
    }
}

/* ============================================ Startseite: leerer Blog */
/*
 * Solange es keine Beiträge gibt, zeigte der Abschnitt "Bleib am Puls" nur
 * einen Platzhaltertext. Die Klasse am body setzt functions.php; sobald der
 * erste Beitrag veröffentlicht ist, verschwindet sie und der Abschnitt
 * erscheint wieder – ohne dass jemand etwas umstellen muss.
 */
body.emd-ohne-beitraege .elementor-element-29fd537 {
    display: none;
}

/* ================================================ Startseite: Kopfbereich */
/*
 * Der Hero (Abschnitt 63466c3) bekommt Bewegung, ohne dass am Layout etwas
 * verrückt wird – die beiden Schmuckformen sind absolut positioniert und
 * bleiben exakt an ihrem Platz.
 *
 * Vorhandenes wird nicht überschrieben: die Bilder drehen sich bereits über
 * .pxl-image-spin (Animation auf dem img), der Button hat eine Einblend-
 * Animation. Die Drift setzt deshalb auf dem Umschlag an, nicht auf dem Bild.
 */

/*
 * Bewusst NICHT verwendet:
 *  - overflow: hidden am Hero. Die Schmuckformen sind absolut positioniert
 *    und könnten über den Rand ragen; sie würden dann abgeschnitten.
 *  - eine Regel wie ".elementor-element-63466c3 > *  { position: relative }".
 *    Sie würde das position:absolute der beiden Formen überschreiben und sie
 *    genau dorthin zurückwerfen, wo sie nicht hingehören.
 *  - ein wandernder Lichtschein per ::before. Der bräuchte eines von beidem.
 */

/* Die Schmuckformen driften sanft – die Eigendrehung des Bildes bleibt. */
.elementor-element-61d5cbb { animation: emd-form-drift-a 11s ease-in-out infinite; }
.elementor-element-1d667e6 { animation: emd-form-drift-b 14s ease-in-out infinite; }

@keyframes emd-form-drift-a {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -18px; }
}

@keyframes emd-form-drift-b {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 14px; }
}

/* Schaltfläche: dieselbe Sticker-Geste wie überall sonst auf der Seite. */
.elementor-element-cc1abb7 .btn {
    transition: transform .2s ease;
}

.elementor-element-cc1abb7 .btn:hover {
    transform: translateY(-3px) scale(1.02);
}

/*
 * Kein Weiter-Hinweis am unteren Rand: der Logo-Streifen darunter hat
 * margin-top: -228px und schiebt sich in den Hero hinein – ein Hinweis dort
 * läge unter dem schwarzen Balken. Das Laufband übernimmt die Aufgabe.
 */

/* -------------------------------------------- Kopfbereich: Mauseffekte */
/*
 * Das Licht liegt in einem eigenen Element, das selbst clippt. Dadurch
 * braucht der Hero kein overflow: hidden, das die absolut positionierten
 * Schmuckformen abschneiden würde.
 */

.emd-hero-licht {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.emd-hero-licht::after {
    content: "";
    position: absolute;
    left: var(--emd-maus-x, 50%);
    top: var(--emd-maus-y, 45%);
    width: 460px;
    height: 460px;
    margin: -230px 0 0 -230px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 70%);
    /* Aufhellen statt überdecken: die Schrift darüber bleibt lesbar. */
    mix-blend-mode: soft-light;
    opacity: 0;
    transition: opacity .45s ease;
}

/* Die Klasse setzt das Skript, sobald der Zeiger im Kopfbereich ist –
   :hover würde am Menü darüber scheitern, weil das ein eigenes Element ist. */
.emd-hero-interaktiv.emd-maus-drin .emd-hero-licht::after {
    opacity: 1;
}

/* Die Schmuckformen reagieren weich – das Nachlaufen macht das Skript,
   der Übergang hier fängt nur den Moment ab, in dem die Maus den Bereich
   verlässt. */
.elementor-element-61d5cbb img,
.elementor-element-1d667e6 img {
    transition: translate .5s cubic-bezier(.2, .7, .3, 1);
}

.elementor-element-63466c3.emd-maus-drin .elementor-element-61d5cbb img,
.elementor-element-63466c3.emd-maus-drin .elementor-element-1d667e6 img {
    transition: none;
}

.elementor-element-cc1abb7 .btn {
    transition: transform .2s ease, translate .35s cubic-bezier(.2, .7, .3, 1);
}

/* ============================================ Startseite: "Du hast Fragen?" */
/*
 * Der Abschnitt bestand aus einer 20px-Überschrift, einer Textliste und einer
 * entsättigten Karte. Inhalt bleibt unangetastet, nur die Darstellung: die
 * Angaben werden zu Sticker-Karten, die Karte bekommt einen Rahmen.
 */

.elementor-element-c238aae .pxl-item--title {
    font-size: clamp(1.25rem, 2.4vw, 1.75rem) !important;
    line-height: 1.45 !important;
}

.elementor-element-ea42dc3 .pxl-list1 {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.elementor-element-ea42dc3 .pxl-list1 .pxl--item {
    margin: 0;
    padding: 14px 20px 15px;
    border: 2px solid #1a1a1a;
    border-radius: 14px;
    background: #fff;
    transition: transform .18s ease, box-shadow .18s ease;
}

.elementor-element-ea42dc3 .pxl-list1 .pxl--item:hover {
    transform: translateY(-3px);
    box-shadow: 4px 5px 0 0 #1a1a1a;
}

/* Der Block dahinter ist flieder (#EFCCFF) und der Abschnitt pervenche
   (#C8CBFF). Die Karten müssen sich davon absetzen – Flieder auf Flieder
   wäre unsichtbar gewesen. */
.elementor-element-ea42dc3 .pxl-list1 .pxl--item:first-child {
    background: #ffffff;
}

.elementor-element-ea42dc3 .pxl-list1 .pxl--item:nth-child(2) {
    background: var(--five-color, #FFC29F);
}

.elementor-element-ea42dc3 .pxl-list1 .pxl--item:nth-child(3) {
    background: var(--four-color, #98CDEA);
}

.elementor-element-ea42dc3 .pxl-list1 .pxl--item label {
    display: block;
    margin-bottom: 2px;
    font-family: "Boldonse", serif;
    font-size: .5625rem !important;
    line-height: 1.5;
    text-transform: uppercase;
    color: rgba(26, 26, 26, .65);
}

.elementor-element-ea42dc3 .pxl-list1 .pxl--item .pxl-item-content {
    font-weight: 600;
}

.elementor-element-ea42dc3 .pxl-list1 .pxl--item a {
    color: #1a1a1a;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Karte im gleichen Rahmen wie alles andere */
.elementor-element-97c1f97 iframe {
    display: block;
    border: 2px solid #1a1a1a !important;
    border-radius: 14px;
}

@media (prefers-reduced-motion: reduce) {
    .emd-hero-licht::after,
    .elementor-element-61d5cbb img,
    .elementor-element-1d667e6 img,
    .elementor-element-ea42dc3 .pxl-list1 .pxl--item { transition: none; }
}

/*
 * Kein eigenes Laufband: die Seite hat oberhalb des Kopfbereichs bereits
 * eines. Meines lag ausserdem genau über dem Bewerben-Knopf.
 */

/* ------------------------------------------- Kontakt: Karte und Knopf */

.emd-karte iframe {
    filter: saturate(0);
    transition: filter .6s ease;
}

.emd-karte:hover iframe {
    filter: saturate(1);
}

.emd-kontakt-knopf {
    display: inline-block;
    margin-top: 26px;
    padding: 0 30px;
    border: 2px solid #1a1a1a;
    border-radius: 999px;
    background: var(--primary-color, #9ab48a);
    color: #1a1a1a;
    font-family: "Boldonse", serif;
    font-size: .6875rem;
    line-height: 48px;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.emd-kontakt-knopf:hover,
.emd-kontakt-knopf:focus-visible {
    transform: translateY(-3px);
    box-shadow: 4px 5px 0 0 #1a1a1a;
    /* Nicht auf Flieder wechseln – der Block dahinter ist bereits flieder. */
    background: #ffffff;
    color: #1a1a1a;
}

/* Die vorhandenen Sticker "22.–25. Okt. 2026" und "Köln" sind bereits
   gedreht und blenden ein. Sie bekommen zusätzlich ein leichtes Wippen –
   mit unterschiedlicher Dauer, damit es nicht gleichförmig wirkt. */

/*
 * WICHTIG: die Animation gehört auf den INNEREN Container.
 * Die Elemente tragen "elementor-invisible" und werden erst durch Elementors
 * Einblend-Animation (bounceIn) sichtbar. Eine eigene Animation auf demselben
 * Element überschreibt diese – dann bleiben die Sticker unsichtbar. Genau das
 * war die Ursache dafür, dass sie zwischendurch ganz verschwanden.
 */
.elementor-element-2390ffa > .elementor-widget-container {
    animation: emd-sticker-wippen-a 5.5s ease-in-out 1.4s infinite;
}

.elementor-element-1c4a43f > .elementor-widget-container {
    animation: emd-sticker-wippen-b 6.5s ease-in-out .8s infinite;
}

/*
 * Die Hintergrund-Grafiken der Sticker sassen falsch:
 * "Köln" hatte oberhalb 1366px gar keine background-size und rendert deshalb
 * in Eigengrösse – kleiner als die Schrift. Beim Datum stand "cover", was die
 * Form oben und unten abschneidet. Beides wird auf die Elementgrösse gedehnt.
 */
.elementor-element-2390ffa > .elementor-widget-container,
.elementor-element-1c4a43f > .elementor-widget-container,
.elementor-element-6184253 > .elementor-widget-container {
    background-size: 100% 100% !important;
}

@keyframes emd-sticker-wippen-a {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -8px; }
}

@keyframes emd-sticker-wippen-b {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 7px; }
}

@media (prefers-reduced-motion: reduce) {
    .elementor-element-2390ffa > .elementor-widget-container,
    .elementor-element-1c4a43f > .elementor-widget-container { animation: none; }
    .emd-karte iframe,
    .emd-kontakt-knopf { transition: none; }
}

/* ------------------------------ Überschriften der neuen Abschnitte */
/*
 * Elementors Standard-Überschrift erbt ihre Schrift aus der Elementor-Palette
 * (--e-global-typography-primary = Roboto). Das ist die Karteileiche, die
 * nicht zur Website passt – das Theme setzt für h1–h6 Boldonse in Versalien.
 * Hier wird das wiederhergestellt.
 */
.elementor-element-emdhome02a .elementor-heading-title,
.elementor-element-emdhome03a .elementor-heading-title {
    font-family: "Boldonse", serif;
    font-weight: 400;
    line-height: 1.45;
    text-transform: uppercase;
    font-size: clamp(1.25rem, 2.6vw, 2rem);
    color: #1a1a1a;
}

/* ------------------------------------- Kopfbereich: Feinheiten am Layout */
/*
 * Die Pille "Medien- & Umwelt-Convention" begann bei 131px, die Menüleiste
 * endet bei 150px – gemessen 19px Überlappung. Sie wird nach unten geschoben.
 * Nur oberhalb 1366px nötig; darunter setzt Elementor ohnehin bottom: 40px.
 */
@media (min-width: 1367px) {
    .elementor-1782 .elementor-element.elementor-element-6184253 {
        bottom: 430px;
    }
}

/*
 * Der Bewerben-Knopf im Menü war grau (--secondary-color) – für den
 * wichtigsten Handlungsaufruf der Seite zu blass. Jetzt in Signalgelb mit
 * schwarzer Kontur, in der Formensprache der übrigen Sticker.
 */
.emd-kopf-cta {
    background-color: #F4D64B !important;
    border: 2px solid #1a1a1a !important;
    color: #1a1a1a !important;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.emd-kopf-cta .btn-icon-left,
.emd-kopf-cta .btn-icon-right,
.emd-kopf-cta [class*="btn-icon"] {
    background-color: #1a1a1a !important;
}

.emd-kopf-cta [class*="btn-icon"] svg path {
    fill: #F4D64B !important;
}

.emd-kopf-cta:hover {
    transform: translateY(-2px);
    box-shadow: 3px 4px 0 0 #1a1a1a;
    background-color: var(--six-color, #EFCCFF) !important;
}

/*
 * Handgezeichnete Pfeile zu den beiden Bewerben-Knöpfen. Der Bogen wird
 * doppelt gezeichnet – dick in einer Palettenfarbe, darüber dünner in
 * Schwarz. Das ergibt dieselbe Aufkleber-Anmutung wie die übrigen Elemente
 * und macht sie deutlich sichtbarer als eine einzelne dünne Linie.
 */
.emd-pfeil {
    position: absolute;
    z-index: 3;
    pointer-events: none;
}

.emd-pfeil svg { display: block; width: 100%; height: auto; overflow: visible; }

.emd-pfeil__kontur { stroke: var(--emd-pfeilfarbe, #F4D64B); }

/* Der Bogen zeichnet sich einmal nach. */
.emd-pfeil__bogen,
.emd-pfeil .emd-pfeil__kontur:first-of-type {
    stroke-dasharray: 150;
    stroke-dashoffset: 150;
    animation: emd-pfeil-zeichnen 1s ease-out .8s forwards;
}

.emd-pfeil__spitze,
.emd-pfeil .emd-pfeil__kontur:nth-of-type(2) {
    opacity: 0;
    animation: emd-pfeil-spitze .3s ease-out 1.7s forwards;
}

@keyframes emd-pfeil-zeichnen { to { stroke-dashoffset: 0; } }
@keyframes emd-pfeil-spitze { to { opacity: 1; } }

/* Position setzt das Skript aus der tatsächlichen Lage des Knopfes –
   feste Werte hier gingen bei anderer Fensterbreite ins Leere. */
.emd-pfeil--kopf {
    top: 0;
    left: 0;
    width: 74px;
    --emd-pfeilfarbe: #EFCCFF;
    animation: emd-pfeil-bob 3.4s ease-in-out infinite;
}

/* Zum Knopf im Hero: von links heranführend. Position ebenfalls per Skript. */
.emd-pfeil--hero {
    top: 0;
    left: 0;
    width: 122px;
    --emd-pfeilfarbe: #F4D64B;
    animation: emd-pfeil-bob-quer 3.8s ease-in-out .6s infinite;
}

@keyframes emd-pfeil-bob {
    0%, 100% { translate: 0 0; }
    50%      { translate: -5px 4px; }
}

@keyframes emd-pfeil-bob-quer {
    0%, 100% { translate: 0 0; }
    50%      { translate: -8px 0; }
}

@media (max-width: 1024px) {
    .emd-pfeil { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .emd-pfeil { animation: none; }
    .emd-pfeil__bogen,
    .emd-pfeil__spitze,
    .emd-pfeil__kontur { animation: none; stroke-dashoffset: 0; opacity: 1; }
    .emd-kopf-cta { transition: none; }
}

/* ============================ Kopfbereich unterhalb der grossen Breiten */
/*
 * Die drei Sticker (Datum, Köln, Convention) sind von Elementor absolut
 * positioniert – mit festen left-Werten (96 / 176 / 690) und ab 1366px
 * abwärts alle auf bottom: 40px. Das ergibt drei Fehlerbilder:
 *
 *  ~1176px  Convention-Pille liegt auf der Überschrift, Datum links angeschnitten
 *  ~1035px  Überschrift und Pille überlagern sich unlesbar
 *   ≤767px  alle drei tragen "elementor-hidden-mobile" und verschwinden ganz –
 *           ausgerechnet die Veranstaltungsdaten fehlen dann auf dem Handy
 *
 * Unterhalb von 1367px fliessen sie deshalb im Textfluss mit, statt absolut
 * zu sitzen. Was fliesst, kann sich nicht überlagern und nicht aus dem Rahmen
 * fallen. Die verstreute Anordnung bleibt den grossen Bildschirmen vorbehalten,
 * wo genug Platz dafür ist.
 */

/*
 * Oberhalb von 1366px darf der Umschlag der Sticker keinerlei Wirkung haben –
 * dort bleibt Elementors verstreute Anordnung mit absoluter Positionierung.
 * "display: contents" entfernt den Umschlag aus dem Layout, als gäbe es ihn
 * nicht; ohne das wurden die Sticker zu 1300px breiten Blöcken.
 */
@media (min-width: 1367px) {
    .emd-sticker-reihe { display: contents; }
}

@media (max-width: 1366px) {
    /*
     * Der Selektor braucht body:not(...) davor: das Eltern-Theme setzt
     * "body:not(.elementor-editor-active) .elementor .elementor-hidden-mobile
     *  { display: none !important }" – das hat höhere Spezifität als eine
     * Regel aus Klassen allein und hätte sonst gewonnen.
     */
    body:not(.elementor-editor-active) .elementor-1782 .elementor-element.elementor-element-2390ffa,
    body:not(.elementor-editor-active) .elementor-1782 .elementor-element.elementor-element-1c4a43f,
    body:not(.elementor-editor-active) .elementor-1782 .elementor-element.elementor-element-6184253 {
        position: static !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        width: auto !important;
        max-width: 100%;
        margin: 0 !important;
        display: block !important;
        /* .elementor-invisible setzt visibility: hidden, bis die Einblend-
           Animation läuft. Solange das Element ausgeblendet war, lief sie nie
           – ohne diese Zeile bliebe der Sticker unsichtbar. */
        visibility: visible !important;
    }

    /*
     * Versetzte Reihe statt mittiger Stapel.
     *
     * Der Höhenversatz läuft NICHT über transform: die Sticker tragen
     * Elementors Einblend-Animation (bounceIn), und eine Animation schlägt
     * eine normale CSS-Angabe – der Versatz wurde schlicht überschrieben.
     * Stattdessen macht das Layout die Arbeit (align-self), das kann keine
     * Animation aushebeln.
     *
     * Die Neigung läuft über Elementors eigene Variable. Die braucht einen
     * Selektor mit mehr Gewicht als
     * ".elementor-1782 .elementor-element.elementor-element-XXXX >
     *  .elementor-widget-container", sonst bleibt es bei den 7 Grad.
     */
    .emd-sticker-reihe {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 10px 26px;
        width: 100%;
        min-height: 132px;
        margin: 0 auto 6px;
    }

    .emd-sticker-reihe > * { flex: 0 0 auto; }

    body:not(.elementor-editor-active) .elementor-1782 .emd-sticker-reihe .elementor-element.elementor-element-2390ffa {
        align-self: flex-start !important;
    }

    body:not(.elementor-editor-active) .elementor-1782 .emd-sticker-reihe .elementor-element.elementor-element-1c4a43f {
        align-self: flex-end !important;
    }

    body:not(.elementor-editor-active) .elementor-1782 .emd-sticker-reihe .elementor-element.elementor-element-6184253 {
        align-self: center !important;
    }

    .elementor-1782 .emd-sticker-reihe .elementor-element.elementor-element-2390ffa > .elementor-widget-container {
        --e-transform-rotateZ: -4deg;
    }

    .elementor-1782 .emd-sticker-reihe .elementor-element.elementor-element-1c4a43f > .elementor-widget-container {
        --e-transform-rotateZ: 6deg;
    }

    .elementor-1782 .emd-sticker-reihe .elementor-element.elementor-element-6184253 > .elementor-widget-container {
        --e-transform-rotateZ: -2deg;
    }

    /*
     * Die Überschrift hat 108px Abstand nach unten. Auf grossen Bildschirmen
     * füllen die verstreuten Sticker diesen Raum – sobald sie mitfliessen,
     * bleibt er als Loch stehen.
     */
    .elementor-1782 .elementor-element.elementor-element-509de06 .pxl-heading .pxl-item--title {
        margin-bottom: 30px !important;
    }
}

@media (max-width: 1024px) {
    .emd-sticker-reihe { gap: 12px 20px; }

    .elementor-1782 .elementor-element.elementor-element-509de06 .pxl-heading .pxl-item--title {
        margin-bottom: 22px !important;
    }
}

@media (max-width: 767px) {
    /* Braucht jeder Sticker eine eigene Zeile, sorgen seitliche Versätze
       dafür, dass es nach Collage aussieht und nicht nach Liste. Über
       margin, nicht über transform – siehe oben. */
    .emd-sticker-reihe { gap: 8px 14px; min-height: 0; }

    body:not(.elementor-editor-active) .elementor-1782 .emd-sticker-reihe .elementor-element.elementor-element-2390ffa {
        margin-right: 46px !important;
    }

    body:not(.elementor-editor-active) .elementor-1782 .emd-sticker-reihe .elementor-element.elementor-element-1c4a43f {
        margin-left: 84px !important;
    }

    body:not(.elementor-editor-active) .elementor-1782 .emd-sticker-reihe .elementor-element.elementor-element-6184253 {
        margin-right: 18px !important;
    }

    .elementor-1782 .elementor-element.elementor-element-2390ffa .pxl-heading .pxl-item--title,
    .elementor-1782 .elementor-element.elementor-element-1c4a43f .pxl-heading .pxl-item--title,
    .elementor-1782 .elementor-element.elementor-element-6184253 .pxl-heading .pxl-item--title {
        font-size: 13px !important;
    }

    .elementor-1782 .emd-sticker-reihe .elementor-widget-container {
        padding: 8px 22px 3px !important;
    }

    .elementor-1782 .elementor-element.elementor-element-509de06 .pxl-heading .pxl-item--title {
        margin-bottom: 16px !important;
    }
}

/* ======================================= Kontakt: kräftigere Gestaltung */
/*
 * Der Abschnitt hat Hintergrund #C8CBFF, der Block darin #EFCCFF bei 50%
 * Breite. Bisher: kleine Überschrift, Textliste, entsättigte Karte. Jetzt
 * bekommt der Block eine schwarze Kontur wie die übrigen Aufkleber, die
 * Überschrift mehr Gewicht, und die Karte einen Rahmen samt Marker.
 */

.elementor-1782 .elementor-element.elementor-element-31a9f7c {
    border: 3px solid #1a1a1a;
    border-radius: 18px 18px 0 0 !important;
    box-shadow: 8px 8px 0 0 #1a1a1a;
}

.elementor-element-c238aae .pxl-item--title {
    font-size: clamp(1.375rem, 3vw, 2.125rem) !important;
    line-height: 1.4 !important;
    margin-bottom: 22px !important;
}

/* Die Karte in denselben Rahmen wie der Block darüber. */
.emd-karte {
    position: relative;
}

.elementor-1782 .elementor-element.elementor-element-97c1f97 iframe {
    border: 3px solid #1a1a1a !important;
    border-radius: 18px;
}

/* Aufkleber auf der Karte – zeigt, worum es geht. */
.emd-karte::after {
    content: "Köln · 22.–25. Oktober 2026";
    position: absolute;
    left: 22px;
    top: 22px;
    z-index: 2;
    padding: 9px 16px 10px;
    border: 2px solid #1a1a1a;
    border-radius: 14px;
    background: #F4D64B;
    font-family: "Boldonse", serif;
    font-size: .625rem;
    line-height: 1.5;
    text-transform: uppercase;
    color: #1a1a1a;
    transform: rotate(-2.5deg);
    pointer-events: none;
}

@media (max-width: 767px) {
    .elementor-1782 .elementor-element.elementor-element-31a9f7c {
        border-radius: 18px !important;
        box-shadow: 5px 5px 0 0 #1a1a1a;
    }

    .emd-karte::after {
        left: 14px;
        top: 14px;
        font-size: .5625rem;
    }
}

/* -------------------------------------- Bewerben-Knopf auf dem Handy */
/*
 * Auf dem Handy steckt der Bewerben-Knopf in der Menü-Schublade und ist
 * damit unsichtbar – für den wichtigsten Handlungsaufruf zu versteckt.
 * Diese Pille sitzt neben dem Burger. Ziel ist dasselbe wie beim Knopf im
 * Menü der Desktop-Ansicht.
 */

.pxl-header-main { position: relative; }

.emd-mobil-cta {
    position: absolute;
    top: 50%;
    right: 68px;
    transform: translateY(-50%);
    z-index: 5;
    padding: 0 16px;
    border: 2px solid #1a1a1a;
    border-radius: 999px;
    background: #F4D64B;
    color: #1a1a1a;
    font-family: "Boldonse", serif;
    font-size: .5625rem;
    line-height: 34px;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
}

.emd-mobil-cta:active { transform: translateY(-50%) scale(.96); }

@media (min-width: 1025px) {
    .emd-mobil-cta { display: none; }
}

@media (max-width: 400px) {
    .emd-mobil-cta { right: 60px; padding: 0 12px; font-size: .5rem; }
}

/* -------------------------- Bewerben-Knopf im Hero auf kleinen Geräten */
/*
 * Der Knopf stand randbündig (1px über die Kante bei 390px Fensterbreite).
 * Der Selektor muss "…-cc1abb7 .pxl-button .btn" des Themes übertreffen,
 * sonst greift der Aussenabstand nicht.
 */
@media (max-width: 767px) {
    body .elementor-1782 .elementor-element.elementor-element-cc1abb7 .pxl-button .btn {
        margin-inline: 14px !important;
        padding-left: 16px !important;
        font-size: 13px !important;
    }
}

/* ================================== Kopfbereich: mobile Feinheiten */

@media (max-width: 767px) {
    /*
     * Die gelbe Form sass bei y -9 und lag damit hinter der Kopfleiste
     * (0–90px). Zwischen Kopfleiste und Überschrift (ab 160px) sind nur 70px
     * Platz – die Form ist höher. Sie wandert deshalb nach rechts auf die
     * Höhe des Datums; dort ist die Fläche frei, und zusammen mit der blauen
     * Form unten links ergibt das ein ausgewogenes Bild.
     */
    .elementor-1782 .elementor-element.elementor-element-61d5cbb {
        top: 190px !important;
    }

    /* Gemessen: rechts von x279 ist auf Höhe des Datums und von "Köln" frei.
       Bei 92px ragte die Form über beide und 3px über den Bildschirmrand. */
    .elementor-1782 .elementor-element.elementor-element-61d5cbb .pxl-image-single img {
        max-height: 78px !important;
    }

    /*
     * Die blaue Form überdeckte "MEDIEN" in der Convention-Pille. Sie ist
     * jetzt kleiner UND höher gesetzt: Der Convention-Text beginnt bei y417,
     * die Form endet damit darüber. Zu beachten: die Formen drehen sich
     * (.pxl-image-spin), ihr Rahmen ist deshalb rund 40 Prozent grösser als
     * das Bild – 78px Bild ergeben etwa 111px Rahmen.
     */
    .elementor-1782 .elementor-element.elementor-element-1d667e6 {
        top: 214px !important;
    }

    .elementor-1782 .elementor-element.elementor-element-1d667e6 .pxl-image-single img {
        max-height: 78px !important;
    }

    /*
     * Die Hintergrundform der Sticker ist ein SVG, dessen gezeichnete Fläche
     * ihren Rahmen nicht ganz ausfüllt. Bei background-size: 100% ragte der
     * Text deshalb links und rechts über die Form hinaus. Etwas grösser
     * gezogen und zentriert deckt sie den Text.
     */
    .elementor-1782 .emd-sticker-reihe .elementor-element .elementor-widget-container {
        background-size: 116% 108% !important;
        background-position: center center !important;
    }

    /*
     * Die zeigende Hand sass fast vollständig über dem Knopf. Etwas tiefer
     * gesetzt wirkt sie, als schaute sie dahinter hervor.
     */
    /* 34px waren zu viel: von 100px Höhe verschwanden 48 hinter dem Knopf.
       Mit 12px bleiben rund drei Viertel sichtbar. */
    .elementor-1782 [data-id="b306633"] {
        transform: translate(14px, 12px) !important;
    }

    /* Vertikale Abstände zusammenziehen – der Kopfbereich war sehr luftig. */
    .elementor-1782 .elementor-element.elementor-element-63466c3 {
        --padding-top: 70px;
        --padding-bottom: 24px;
    }

    .elementor-1782 .elementor-element.elementor-element-cc1abb7 > .elementor-widget-container {
        margin-bottom: 24px !important;
    }

    .elementor-1782 .elementor-element.elementor-element-emdhome01,
    .elementor-1782 .elementor-element.elementor-element-emdhome02,
    .elementor-1782 .elementor-element.elementor-element-emdhome03 {
        --padding-top: 40px;
        --padding-bottom: 40px;
    }

    .elementor-1782 .elementor-element.elementor-element-2d53fd2 {
        --padding-top: 56px;
        --padding-bottom: 56px;
    }

    /*
     * Das Bilder-Karussell nahm über 500px Höhe ein: 40px Polsterung je Folie
     * oben und unten plus grosse Bilder. Ausserdem war die Folie mit 405px
     * breiter als der Bildschirm – man sah genau eines und merkte nicht, dass
     * es weitergeht. Schmalere Folien lassen die nächste hereinragen.
     */
    /*
     * Die Folienbreite NICHT per Stylesheet ändern: Swiper merkt sich die
     * Breiten beim Start und rechnet seine Verschiebung darauf aus. Eine
     * Änderung im Nachhinein verschiebt die Folien aus dem Bild – auch ein
     * update() richtet das bei aktiver Endlosschleife nicht wieder. Dass die
     * nächste Folie hereinragt, kommt jetzt aus der Widget-Einstellung
     * "slides_to_show_xs: auto".
     */
    /*
     * Breite Polsterung statt schmalerer Folie: die Folie behält ihre 405px,
     * Swipers Rechnung bleibt also unangetastet – das Bild darin wird
     * schmaler und zentriert. Dadurch ragen die Nachbarbilder an beiden
     * Rändern herein, und man sieht, dass es weitergeht.
     */
    .elementor-1782 .elementor-element.elementor-element-18c1fda .pxl-swiper-slide {
        padding: 10px 52px !important;
    }

    .elementor-1782 .elementor-element.elementor-element-18c1fda .pxl-swiper-slide img {
        max-height: 190px;
        object-fit: cover;
        width: 100%;
    }

    /* Der Swiper-Umschlag hat 40px Polsterung oben und unten, der Rahmen
       darum nochmals über 100px Luft für die gedrehten Bilder. */
    .elementor-1782 .elementor-element.elementor-element-18c1fda .pxl-swiper-wrapper {
        padding-block: 12px !important;
    }

    .elementor-1782 .elementor-element.elementor-element-18c1fda .pxl-image-carousel {
        min-height: 0 !important;
        height: auto !important;
        padding-block: 0 !important;
    }
}

/* ============================ Mega-Menü in der mobilen Schublade */
/*
 * In der Schublade stehen die vier Karten untereinander. Mit 150px hohen
 * Bildern ergibt das rund 900px, die man durchscrollen muss, bevor die
 * übrigen Menüpunkte kommen. Deshalb hier kompakte Zeilen: kleines Bild
 * links, Titel rechts.
 */
@media (max-width: 1024px) {
    .pxl-header-menu .pxl-megamenu .pxl-mega-menu-elementor > .e-con,
    .pxl-header-menu .pxl-megamenu .pxl-mega-menu-elementor .e-con.e-parent {
        padding-block: 8px !important;
        padding-inline: 0 !important;
        flex-direction: column !important;
        gap: 8px;
    }

    .pxl-header-menu .pxl-megamenu .e-con.e-child {
        width: 100% !important;
    }

    .pxl-header-menu .pxl-megamenu .pxl-showcase2 .pxl-item--inner {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 8px 12px;
        text-align: left;
        border-width: 2px;
        border-radius: 12px;
    }

    .pxl-header-menu .pxl-megamenu .pxl-showcase2 .pxl-item--image {
        flex: 0 0 auto;
        width: 46px;
    }

    .pxl-header-menu .pxl-megamenu .pxl-showcase2 .pxl-item--image img {
        height: 46px !important;
        width: 46px !important;
        object-fit: contain;
    }

    /* Die eingeblendete Schaltfläche hat in einer Zeile keinen Platz. */
    .pxl-header-menu .pxl-megamenu .pxl-showcase2 .pxl-item--readmore,
    .pxl-header-menu .pxl-megamenu .pxl-showcase2 .pxl-item--overlay {
        display: none !important;
    }

    .pxl-header-menu .pxl-megamenu .pxl-showcase2 .pxl-item--title {
        margin: 0 !important;
        text-align: left;
    }

    .pxl-header-menu .pxl-megamenu .pxl-showcase2 .pxl-item--title a {
        font-size: .625rem !important;
        line-height: 1.5;
    }
}

/* ------------------------------------- Punkte unter dem Bilder-Karussell */
/*
 * Der Behälter der Punkte war 145px breit und begann bei x0 – die Punkte
 * standen also linksbündig statt mittig. Ausserdem lagen 67px zwischen
 * Bildunterkante und Punkten.
 */
.elementor-1782 .elementor-element.elementor-element-18c1fda .pxl-swiper-dots {
    display: flex !important;
    justify-content: center !important;
    align-items: center;
    gap: 10px;
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    /* -44px zogen die Punkte über das Bild; -16px lassen rund 20px Abstand. */
    margin-top: -16px;
}

/* Das Karussell hat auf dem Handy 15px Aussenabstand rechts – dadurch lag
   die Mitte der Punkte 7px neben der Bildschirmmitte. */
@media (max-width: 767px) {
    .elementor-1782 .elementor-element.elementor-element-18c1fda > .elementor-widget-container {
        margin-right: 0 !important;
    }
}

.elementor-1782 .elementor-element.elementor-element-18c1fda .pxl-swiper-pagination-bullet {
    margin: 0 !important;
}

/* ---------- Offene Stellen in den Vertragstexten ----------
   Kommen auf den Entwurfsseiten zu Teilnahmebedingungen, Fotoeinwilligung
   und Datenschutz vor. Sie sollen beim Lesen ins Auge springen, damit vor
   der Veröffentlichung niemand eine übersieht. */

mark.emd-offen {
    background: #FFE9A8;
    border: 2px dashed #b3261e;
    border-radius: 6px;
    padding: 1px 7px 2px;
    color: #7a1c14;
    font-weight: 600;
    font-size: 0.94em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

mark.emd-offen::before {
    content: 'offen: ';
    text-transform: uppercase;
    font-size: 0.82em;
    letter-spacing: 0.06em;
    opacity: 0.75;
}

/* ---------- Bewerbungsseiten: Abstand unter dem Seitenkopf ----------
   Conferio polstert #pxl-main pauschal mit 150px oben (90px ab 1200px,
   70px ab 1024px). Zusammen mit der Luft, die der Seitenkopf mit Titel und
   Wimpeln ohnehin mitbringt, klaffte ueber dem Einleitungstext ein halber
   Bildschirm. Nur auf den beiden Bewerbungsseiten zusammengezogen, damit
   der Rest der Website unveraendert bleibt.
   Die Auswahl braucht die Body-Klasse: das Elterntheme adressiert #pxl-main
   ueber die ID, ein blosses "#pxl-main" waere nicht spezifischer. */

body.page-id-6044 #pxl-main,
body.page-id-6045 #pxl-main {
    padding-top: 64px;
}

@media screen and (max-width: 1200px) {
    body.page-id-6044 #pxl-main,
    body.page-id-6045 #pxl-main {
        padding-top: 48px;
    }
}

@media screen and (max-width: 1024px) {
    body.page-id-6044 #pxl-main,
    body.page-id-6045 #pxl-main {
        padding-top: 36px;
    }
}