/* Nur Effekte und deren Bedienung: Layout, Bilder und Texte bleiben native Divi-Module. */
.raventex-atmosphaere.et_pb_section { position: relative; }
.raventex-partikel { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.raventex-motion-control { position: fixed; left: 14px; bottom: 14px; z-index: 90; padding: 8px 12px; border: 1px solid #70645C; border-radius: 5px; background: #111113; color: #E8E1D5; font: 13px/1.5 system-ui, sans-serif; cursor: pointer; min-height: 44px; }
.raventex-motion-control:hover { border-color: #BEDDD6; }
.raventex-motion-control:focus-visible { outline: 2px solid #BEDDD6; outline-offset: 3px; }
/* Eine laufende native Divi-Einblendung darf beim Pausieren keinen Text verbergen. */
.raventex-motion-off .et_animated { animation: none !important; opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
    .et_animated { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* Auf Telefonen gehört die optionale Effektsteuerung ans Seitenende.
 * So verdeckt sie weder Text noch die jederzeit erreichbare Datenschutz-Schaltfläche.
 * Der untere Abstand lässt auch bei Geräten mit Home-Indikator Platz zum Antippen.
 * Desktop: unverändert schwebend. Die DOM-/Tastaturreihenfolge bleibt erhalten.
 */
@media (max-width: 767px) {
    /* Divis Carousel-Track liegt absichtlich neben dem sichtbaren Ausschnitt.
     * Ohne Begrenzung kann er den Dokumentcontainer um wenige Pixel verbreitern
     * und auf manchen Telefonen ein horizontales Wischen auslösen. Der Track
     * selbst behält seine eigene Clip-Fläche; Inhalte werden nicht beschnitten.
     */
    body:not(.wp-admin) #page-container {
        overflow-x: clip;
    }

    .raventex-motion-control {
        position: static;
        display: block;
        width: max-content;
        max-width: 90%;
        margin: 16px 5% calc(76px + env(safe-area-inset-bottom, 0px));
        font-size: 13px;
    }
}

/*
 * Mobile Feinschliff 0.5.7
 *
 * Diese Regeln ergänzen Divis native Module nur an den Stellen, an denen die
 * verfügbaren Divi-Einstellungen keine viewportstabile Menüfläche oder eine
 * kompakte, gleich hohe Kartenbühne zulassen. Inhalte, Bilder und Links
 * bleiben in Divi editierbar; es gibt keine zweite Navigation und keine
 * JavaScript-Klicksimulation.
 */
@media (max-width: 980px) {
    /* Das Menü bleibt immer vollständig innerhalb des sichtbaren Bereichs.
     * Die CSS-Variable setzt mobiles-menue.js aus der echten Header-Unterkante.
     * Die 48px-Zeilen entsprechen Apples gut erreichbarer Touch-Zielgröße. */
    body:not(.wp-admin) #main-header .mobile_nav {
        position: static !important;
    }
    body:not(.wp-admin) #main-header .et_mobile_menu {
        position: fixed !important;
        top: var(--raventex-mobile-menu-top, 72px) !important;
        right: max(12px, env(safe-area-inset-right)) !important;
        left: max(12px, env(safe-area-inset-left)) !important;
        box-sizing: border-box !important;
        width: auto !important;
        max-width: none !important;
        max-height: min(72dvh, calc(100dvh - var(--raventex-mobile-menu-top, 72px) - 16px)) !important;
        margin: 0 !important;
        padding: 8px !important;
        overflow: auto !important;
        overscroll-behavior: contain;
        border: 1px solid rgba(112, 100, 92, .92) !important;
        border-top: 2px solid #a2293b !important;
        border-radius: 16px !important;
        background: rgba(17, 17, 19, .98) !important;
        box-shadow: 0 20px 52px rgba(0, 0, 0, .52) !important;
        transform-origin: top right;
    }
    body:not(.wp-admin) #main-header .et_mobile_menu li,
    body:not(.wp-admin) #main-header .et_mobile_menu li a {
        width: 100% !important;
    }
    body:not(.wp-admin) #main-header .et_mobile_menu li a {
        display: flex !important;
        align-items: center;
        min-height: 48px !important;
        padding: 12px 16px !important;
        text-align: left !important;
    }

    /* Zwischen 768 und 980px stapelt Divi bereits die Karten. Eine kleinere,
     * zentrierte Bildbühne verhindert große Leerflächen neben Portrait-Motiven.
     * Alle Karten bleiben bei gleicher Höhe und vollständig anklickbar. */
    body.page-id-356 .et_pb_row_2 > .et_pb_column,
    body.page-id-356 .et_pb_row_3 > .et_pb_column,
    body.page-id-356 .et_pb_row_4 > .et_pb_column,
    body.page-id-356 .et_pb_row_5 > .et_pb_column,
    body.page-id-356 .et_pb_row_7 > .et_pb_column,
    body.page-id-356 .et_pb_row_9 > .et_pb_column,
    body.page-id-356 .et_pb_row_10 > .et_pb_column,
    body.page-id-356 .et_pb_row_11 > .et_pb_column,
    body.page-id-356 .et_pb_row_12 > .et_pb_column {
        height: 400px !important;
        min-height: 400px !important;
        padding: 18px !important;
        margin-bottom: 14px !important;
    }
    body.page-id-356 .et_pb_row_2 > .et_pb_column > .et_pb_image,
    body.page-id-356 .et_pb_row_3 > .et_pb_column > .et_pb_image,
    body.page-id-356 .et_pb_row_4 > .et_pb_column > .et_pb_image,
    body.page-id-356 .et_pb_row_5 > .et_pb_column > .et_pb_image,
    body.page-id-356 .et_pb_row_7 > .et_pb_column > .et_pb_image,
    body.page-id-356 .et_pb_row_9 > .et_pb_column > .et_pb_image,
    body.page-id-356 .et_pb_row_10 > .et_pb_column > .et_pb_image,
    body.page-id-356 .et_pb_row_11 > .et_pb_column > .et_pb_image,
    body.page-id-356 .et_pb_row_12 > .et_pb_column > .et_pb_image {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }
    body.page-id-356 .et_pb_row_2 .et_pb_image_wrap,
    body.page-id-356 .et_pb_row_3 .et_pb_image_wrap,
    body.page-id-356 .et_pb_row_4 .et_pb_image_wrap,
    body.page-id-356 .et_pb_row_5 .et_pb_image_wrap,
    body.page-id-356 .et_pb_row_7 .et_pb_image_wrap,
    body.page-id-356 .et_pb_row_9 .et_pb_image_wrap,
    body.page-id-356 .et_pb_row_10 .et_pb_image_wrap,
    body.page-id-356 .et_pb_row_11 .et_pb_image_wrap,
    body.page-id-356 .et_pb_row_12 .et_pb_image_wrap {
        height: 260px !important;
    }
    body.page-id-356 .et_pb_row_2 .et_pb_image_wrap > img,
    body.page-id-356 .et_pb_row_3 .et_pb_image_wrap > img,
    body.page-id-356 .et_pb_row_4 .et_pb_image_wrap > img,
    body.page-id-356 .et_pb_row_5 .et_pb_image_wrap > img,
    body.page-id-356 .et_pb_row_7 .et_pb_image_wrap > img,
    body.page-id-356 .et_pb_row_9 .et_pb_image_wrap > img,
    body.page-id-356 .et_pb_row_10 .et_pb_image_wrap > img,
    body.page-id-356 .et_pb_row_11 .et_pb_image_wrap > img,
    body.page-id-356 .et_pb_row_12 .et_pb_image_wrap > img {
        width: auto !important;
        max-width: min(100%, 340px) !important;
        margin: 0 auto !important;
    }
    body.page-id-356 .et_pb_row_2 > .et_pb_column .et_pb_text a::after,
    body.page-id-356 .et_pb_row_3 > .et_pb_column .et_pb_text a::after,
    body.page-id-356 .et_pb_row_4 > .et_pb_column .et_pb_text a::after,
    body.page-id-356 .et_pb_row_5 > .et_pb_column .et_pb_text a::after,
    body.page-id-356 .et_pb_row_7 > .et_pb_column .et_pb_text a::after,
    body.page-id-356 .et_pb_row_9 > .et_pb_column .et_pb_text a::after,
    body.page-id-356 .et_pb_row_10 > .et_pb_column .et_pb_text a::after,
    body.page-id-356 .et_pb_row_11 > .et_pb_column .et_pb_text a::after,
    body.page-id-356 .et_pb_row_12 > .et_pb_column .et_pb_text a::after {
        right: auto !important;
        bottom: 16px !important;
        left: 18px !important;
    }
}

@media (max-width: 767px) {
    /* Auf Telefonen erhalten alle Motivkarten exakt dieselbe kompakte Bühne.
     * Damit bleibt die Bildhierarchie ruhig und die nächste Karte beginnt
     * sichtbar früher, ohne Motivteile zu beschneiden. */
    body.page-id-356 .et_pb_row_2 > .et_pb_column,
    body.page-id-356 .et_pb_row_3 > .et_pb_column,
    body.page-id-356 .et_pb_row_4 > .et_pb_column,
    body.page-id-356 .et_pb_row_5 > .et_pb_column,
    body.page-id-356 .et_pb_row_7 > .et_pb_column,
    body.page-id-356 .et_pb_row_9 > .et_pb_column,
    body.page-id-356 .et_pb_row_10 > .et_pb_column,
    body.page-id-356 .et_pb_row_11 > .et_pb_column,
    body.page-id-356 .et_pb_row_12 > .et_pb_column {
        height: 360px !important;
        min-height: 360px !important;
        padding: 16px !important;
        margin-bottom: 12px !important;
    }
    body.page-id-356 .et_pb_row_2 .et_pb_image_wrap,
    body.page-id-356 .et_pb_row_3 .et_pb_image_wrap,
    body.page-id-356 .et_pb_row_4 .et_pb_image_wrap,
    body.page-id-356 .et_pb_row_5 .et_pb_image_wrap,
    body.page-id-356 .et_pb_row_7 .et_pb_image_wrap,
    body.page-id-356 .et_pb_row_9 .et_pb_image_wrap,
    body.page-id-356 .et_pb_row_10 .et_pb_image_wrap,
    body.page-id-356 .et_pb_row_11 .et_pb_image_wrap,
    body.page-id-356 .et_pb_row_12 .et_pb_image_wrap {
        height: 224px !important;
    }
    body.page-id-356 .et_pb_row_2 .et_pb_image_wrap > img,
    body.page-id-356 .et_pb_row_3 .et_pb_image_wrap > img,
    body.page-id-356 .et_pb_row_4 .et_pb_image_wrap > img,
    body.page-id-356 .et_pb_row_5 .et_pb_image_wrap > img,
    body.page-id-356 .et_pb_row_7 .et_pb_image_wrap > img,
    body.page-id-356 .et_pb_row_9 .et_pb_image_wrap > img,
    body.page-id-356 .et_pb_row_10 .et_pb_image_wrap > img,
    body.page-id-356 .et_pb_row_11 .et_pb_image_wrap > img,
    body.page-id-356 .et_pb_row_12 .et_pb_image_wrap > img {
        max-width: min(100%, 280px) !important;
    }

    /* Der Startseiten-Hero bleibt Bild zuerst; dadurch wirkt die mobile
     * Reihenfolge wie ein ruhiger Einstieg statt wie ein abgeschnittener Banner. */
    body.home .et_pb_image_0 .et_pb_image_wrap > img {
        display: block;
        width: 100%;
        height: auto;
        object-position: center top;
        vertical-align: top;
    }
    body.home #kollektionen .et_pb_group {
        min-height: 0 !important;
        padding: 22px !important;
        border-radius: 16px !important;
    }
    body:not(.wp-admin) .et_pb_text_2_tb_footer .et_pb_text_inner > p:last-child {
        margin-bottom: 0 !important;
        font-size: clamp(.76rem, 3.3vw, .88rem) !important;
        line-height: 1.55 !important;
        letter-spacing: .01em;
    }
}

/* Das optionale Benachrichtigungszentrum gehört zu einem anderen Plugin.
 * Seine Kachel wird nur auf RAVENTEX als ruhiger, runder 44px-Button
 * dargestellt; Datenfluss und Funktionsumfang werden nicht verändert. */
body:not(.wp-admin) .mgd-notification-center--floating-bottom-right {
    right: max(14px, env(safe-area-inset-right)) !important;
    bottom: max(14px, env(safe-area-inset-bottom)) !important;
    left: auto !important;
    z-index: 95 !important;
}
body:not(.wp-admin) .mgd-notification-center--floating-bottom-right .mgd-notification-center__button {
    display: grid !important;
    place-items: center;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border: 1px solid rgba(232, 225, 213, .36) !important;
    border-radius: 50% !important;
    background: rgba(17, 17, 19, .94) !important;
    color: #e8e1d5 !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .36) !important;
}
body:not(.wp-admin) .mgd-notification-center--floating-bottom-right .mgd-notification-center__button:focus-visible {
    outline: 2px solid #beddd6;
    outline-offset: 3px;
}

/*
 * Absicherung der Kollektionskapitel: Die Reihen 6 und 8 sind redaktionelle
 * Einleitungen, keine Motivkarten. Sie können deshalb niemals die feste
 * Bildbühne oder den unsichtbaren Kartenlink der eigentlichen Motivreihen
 * erben. Das behebt die zuvor sichtbaren leeren Flächen, ohne Inhalte in
 * Divi umzuschreiben. Die Motivreihen behalten dagegen bewusst identische
 * Kartenhöhen und ihre vorhandenen, echten Ziel-Links.
 */
body.page-id-356 #fantasy > .et_pb_row_6 > .et_pb_column,
body.page-id-356 #nerd > .et_pb_row_8 > .et_pb_column {
    height: auto !important;
}
body.page-id-356 #fantasy > .et_pb_row_6 .et_pb_image_wrap,
body.page-id-356 #nerd > .et_pb_row_8 .et_pb_image_wrap {
    height: auto !important;
    overflow: visible;
}
body.page-id-356 #fantasy > .et_pb_row_6 .et_pb_text a,
body.page-id-356 #nerd > .et_pb_row_8 .et_pb_text a {
    position: static;
    display: inline;
    color: inherit !important;
    font-size: inherit !important;
    text-decoration: none !important;
}
body.page-id-356 #fantasy > .et_pb_row_6 .et_pb_text a::after,
body.page-id-356 #nerd > .et_pb_row_8 .et_pb_text a::after {
    content: none;
}

/* Ein leerer oder ungültiger Bildpfad soll nie mehr eine hohe, leere Bühne
 * erzeugen. Divi hält den Alt-Text sichtbar; die Karte selbst bleibt stabil
 * und der echte Link funktioniert weiter. Das ersetzt kein fehlendes Motiv,
 * verhindert aber die kaputte Darstellung bis ein Bild in Divi korrigiert ist.
 */
body.page-id-356 .et_pb_image_wrap > img[src=""] {
    display: none;
}
body.page-id-356 .et_pb_image_wrap:has(> img[src=""]) {
    min-height: 0;
}

/*
 * Kollektionen: Divi 5.1.1 speichert die native Bildhöhe zuverlässig, gibt
 * sie für diese vorhandenen transparenten Bildmodule jedoch nicht im
 * Frontend-CSS aus. Die ergänzende Regel ist deshalb bewusst sehr eng auf die
 * vorhandenen Motivreihen der Seite 356 beschränkt. Sie ersetzt weder Inhalte
 * noch Divi-Module und erzeugt eine gemeinsame Bildbühne, damit hochformatige,
 * quadratische und breite Motive als gleichwertige Karten wirken.
 */
body.page-id-356 .et_pb_row_2 > .et_pb_column,
body.page-id-356 .et_pb_row_3 > .et_pb_column,
body.page-id-356 .et_pb_row_4 > .et_pb_column,
body.page-id-356 .et_pb_row_5 > .et_pb_column,
body.page-id-356 .et_pb_row_7 > .et_pb_column,
body.page-id-356 .et_pb_row_9 > .et_pb_column,
body.page-id-356 .et_pb_row_10 > .et_pb_column,
body.page-id-356 .et_pb_row_11 > .et_pb_column,
body.page-id-356 .et_pb_row_12 > .et_pb_column {
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 520px !important;
    min-height: 520px !important;
    padding: 20px;
    border: 1px solid #2b3038;
    border-radius: 16px;
    background: #17191d;
    transition: border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}
body.page-id-356 .et_pb_row_2 > .et_pb_column:hover,
body.page-id-356 .et_pb_row_3 > .et_pb_column:hover,
body.page-id-356 .et_pb_row_4 > .et_pb_column:hover,
body.page-id-356 .et_pb_row_5 > .et_pb_column:hover,
body.page-id-356 .et_pb_row_7 > .et_pb_column:hover,
body.page-id-356 .et_pb_row_9 > .et_pb_column:hover,
body.page-id-356 .et_pb_row_10 > .et_pb_column:hover,
body.page-id-356 .et_pb_row_11 > .et_pb_column:hover,
body.page-id-356 .et_pb_row_12 > .et_pb_column:hover {
    border-color: #70645c;
    box-shadow: 0 16px 32px rgba(0, 0, 0, .18);
    transform: translateY(-3px);
}
body.page-id-356 .et_pb_row_2 .et_pb_image_wrap,
body.page-id-356 .et_pb_row_3 .et_pb_image_wrap,
body.page-id-356 .et_pb_row_4 .et_pb_image_wrap,
body.page-id-356 .et_pb_row_5 .et_pb_image_wrap,
body.page-id-356 .et_pb_row_7 .et_pb_image_wrap,
body.page-id-356 .et_pb_row_9 .et_pb_image_wrap,
body.page-id-356 .et_pb_row_10 .et_pb_image_wrap,
body.page-id-356 .et_pb_row_11 .et_pb_image_wrap,
body.page-id-356 .et_pb_row_12 .et_pb_image_wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 360px;
    overflow: hidden;
}
body.page-id-356 .et_pb_row_2 .et_pb_image_wrap > img,
body.page-id-356 .et_pb_row_3 .et_pb_image_wrap > img,
body.page-id-356 .et_pb_row_4 .et_pb_image_wrap > img,
body.page-id-356 .et_pb_row_5 .et_pb_image_wrap > img,
body.page-id-356 .et_pb_row_7 .et_pb_image_wrap > img,
body.page-id-356 .et_pb_row_9 .et_pb_image_wrap > img,
body.page-id-356 .et_pb_row_10 .et_pb_image_wrap > img,
body.page-id-356 .et_pb_row_11 .et_pb_image_wrap > img,
body.page-id-356 .et_pb_row_12 .et_pb_image_wrap > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}
/* Die vorhandene native Divi-Verlinkung wird zur vollständigen, echten
 * Kartenfläche. So ist Bild, Titel und Karte ohne JavaScript anklickbar;
 * Tastatur und Screenreader erhalten weiter den ursprünglichen Linktext.
 */
body.page-id-356 .et_pb_row_2 > .et_pb_column .et_pb_text,
body.page-id-356 .et_pb_row_3 > .et_pb_column .et_pb_text,
body.page-id-356 .et_pb_row_4 > .et_pb_column .et_pb_text,
body.page-id-356 .et_pb_row_5 > .et_pb_column .et_pb_text,
body.page-id-356 .et_pb_row_7 > .et_pb_column .et_pb_text,
body.page-id-356 .et_pb_row_9 > .et_pb_column .et_pb_text,
body.page-id-356 .et_pb_row_10 > .et_pb_column .et_pb_text,
body.page-id-356 .et_pb_row_11 > .et_pb_column .et_pb_text,
body.page-id-356 .et_pb_row_12 > .et_pb_column .et_pb_text {
    min-height: 30px;
    margin-top: auto;
}
/* Divi setzt für einzelne Textmodule und deren Absatz einen positionierten
 * Container. Der echte Link würde dadurch nur den leeren Absatz statt die
 * Karte ausfüllen. Die Karte selbst bleibt bewusst der einzige Bezugspunkt;
 * so sind Motiv, Titel und sichtbarer Link wirklich dieselbe Klickfläche.
 */
body.page-id-356 .et_pb_row_2 > .et_pb_column .et_pb_text,
body.page-id-356 .et_pb_row_3 > .et_pb_column .et_pb_text,
body.page-id-356 .et_pb_row_4 > .et_pb_column .et_pb_text,
body.page-id-356 .et_pb_row_5 > .et_pb_column .et_pb_text,
body.page-id-356 .et_pb_row_7 > .et_pb_column .et_pb_text,
body.page-id-356 .et_pb_row_9 > .et_pb_column .et_pb_text,
body.page-id-356 .et_pb_row_10 > .et_pb_column .et_pb_text,
body.page-id-356 .et_pb_row_11 > .et_pb_column .et_pb_text,
body.page-id-356 .et_pb_row_12 > .et_pb_column .et_pb_text,
body.page-id-356 .et_pb_row_2 > .et_pb_column .et_pb_text_inner,
body.page-id-356 .et_pb_row_3 > .et_pb_column .et_pb_text_inner,
body.page-id-356 .et_pb_row_4 > .et_pb_column .et_pb_text_inner,
body.page-id-356 .et_pb_row_5 > .et_pb_column .et_pb_text_inner,
body.page-id-356 .et_pb_row_7 > .et_pb_column .et_pb_text_inner,
body.page-id-356 .et_pb_row_9 > .et_pb_column .et_pb_text_inner,
body.page-id-356 .et_pb_row_10 > .et_pb_column .et_pb_text_inner,
body.page-id-356 .et_pb_row_11 > .et_pb_column .et_pb_text_inner,
body.page-id-356 .et_pb_row_12 > .et_pb_column .et_pb_text_inner,
body.page-id-356 .et_pb_row_2 > .et_pb_column .et_pb_text_inner > p,
body.page-id-356 .et_pb_row_3 > .et_pb_column .et_pb_text_inner > p,
body.page-id-356 .et_pb_row_4 > .et_pb_column .et_pb_text_inner > p,
body.page-id-356 .et_pb_row_5 > .et_pb_column .et_pb_text_inner > p,
body.page-id-356 .et_pb_row_7 > .et_pb_column .et_pb_text_inner > p,
body.page-id-356 .et_pb_row_9 > .et_pb_column .et_pb_text_inner > p,
body.page-id-356 .et_pb_row_10 > .et_pb_column .et_pb_text_inner > p,
body.page-id-356 .et_pb_row_11 > .et_pb_column .et_pb_text_inner > p,
body.page-id-356 .et_pb_row_12 > .et_pb_column .et_pb_text_inner > p {
    position: static !important;
}
body.page-id-356 .et_pb_row_2 > .et_pb_column .et_pb_text a,
body.page-id-356 .et_pb_row_3 > .et_pb_column .et_pb_text a,
body.page-id-356 .et_pb_row_4 > .et_pb_column .et_pb_text a,
body.page-id-356 .et_pb_row_5 > .et_pb_column .et_pb_text a,
body.page-id-356 .et_pb_row_7 > .et_pb_column .et_pb_text a,
body.page-id-356 .et_pb_row_9 > .et_pb_column .et_pb_text a,
body.page-id-356 .et_pb_row_10 > .et_pb_column .et_pb_text a,
body.page-id-356 .et_pb_row_11 > .et_pb_column .et_pb_text a,
body.page-id-356 .et_pb_row_12 > .et_pb_column .et_pb_text a {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: block;
    color: transparent !important;
    font-size: 0 !important;
    text-decoration: none !important;
    cursor: pointer;
}
body.page-id-356 .et_pb_row_2 > .et_pb_column .et_pb_text a::after,
body.page-id-356 .et_pb_row_3 > .et_pb_column .et_pb_text a::after,
body.page-id-356 .et_pb_row_4 > .et_pb_column .et_pb_text a::after,
body.page-id-356 .et_pb_row_5 > .et_pb_column .et_pb_text a::after,
body.page-id-356 .et_pb_row_7 > .et_pb_column .et_pb_text a::after,
body.page-id-356 .et_pb_row_9 > .et_pb_column .et_pb_text a::after,
body.page-id-356 .et_pb_row_10 > .et_pb_column .et_pb_text a::after,
body.page-id-356 .et_pb_row_11 > .et_pb_column .et_pb_text a::after,
body.page-id-356 .et_pb_row_12 > .et_pb_column .et_pb_text a::after {
    content: 'Geschichte lesen →';
    position: absolute;
    right: 20px;
    bottom: 20px;
    color: #beddd6;
    font-family: inherit;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.4;
}
body.page-id-356 .et_pb_row_2 > .et_pb_column:focus-within,
body.page-id-356 .et_pb_row_3 > .et_pb_column:focus-within,
body.page-id-356 .et_pb_row_4 > .et_pb_column:focus-within,
body.page-id-356 .et_pb_row_5 > .et_pb_column:focus-within,
body.page-id-356 .et_pb_row_7 > .et_pb_column:focus-within,
body.page-id-356 .et_pb_row_9 > .et_pb_column:focus-within,
body.page-id-356 .et_pb_row_10 > .et_pb_column:focus-within,
body.page-id-356 .et_pb_row_11 > .et_pb_column:focus-within,
body.page-id-356 .et_pb_row_12 > .et_pb_column:focus-within {
    border-color: #beddd6;
    outline: 2px solid #beddd6;
    outline-offset: 3px;
}
@media (max-width: 767px) {
    body.page-id-356 .et_pb_row_2 > .et_pb_column,
    body.page-id-356 .et_pb_row_3 > .et_pb_column,
    body.page-id-356 .et_pb_row_4 > .et_pb_column,
    body.page-id-356 .et_pb_row_5 > .et_pb_column,
    body.page-id-356 .et_pb_row_7 > .et_pb_column,
    body.page-id-356 .et_pb_row_9 > .et_pb_column,
    body.page-id-356 .et_pb_row_10 > .et_pb_column,
    body.page-id-356 .et_pb_row_11 > .et_pb_column,
    body.page-id-356 .et_pb_row_12 > .et_pb_column {
        height: 420px !important;
        min-height: 420px !important;
        padding: 16px;
        margin-bottom: 18px;
    }
    body.page-id-356 .et_pb_row_2 .et_pb_image_wrap,
    body.page-id-356 .et_pb_row_3 .et_pb_image_wrap,
    body.page-id-356 .et_pb_row_4 .et_pb_image_wrap,
    body.page-id-356 .et_pb_row_5 .et_pb_image_wrap,
    body.page-id-356 .et_pb_row_7 .et_pb_image_wrap,
    body.page-id-356 .et_pb_row_9 .et_pb_image_wrap,
    body.page-id-356 .et_pb_row_10 .et_pb_image_wrap,
    body.page-id-356 .et_pb_row_11 .et_pb_image_wrap,
    body.page-id-356 .et_pb_row_12 .et_pb_image_wrap {
        height: 280px;
    }
    body.page-id-356 .et_pb_row_2 > .et_pb_column .et_pb_text a::after,
    body.page-id-356 .et_pb_row_3 > .et_pb_column .et_pb_text a::after,
    body.page-id-356 .et_pb_row_4 > .et_pb_column .et_pb_text a::after,
    body.page-id-356 .et_pb_row_5 > .et_pb_column .et_pb_text a::after,
    body.page-id-356 .et_pb_row_7 > .et_pb_column .et_pb_text a::after,
    body.page-id-356 .et_pb_row_9 > .et_pb_column .et_pb_text a::after,
    body.page-id-356 .et_pb_row_10 > .et_pb_column .et_pb_text a::after,
    body.page-id-356 .et_pb_row_11 > .et_pb_column .et_pb_text a::after,
    body.page-id-356 .et_pb_row_12 > .et_pb_column .et_pb_text a::after {
        right: 16px;
        bottom: 16px;
        font-size: 17px;
    }
}

/*
 * Kollektionsseite: Die Introzeilen von Fantasy und Nerd enthalten bewusst
 * keine Motive. Früher trafen sie trotzdem die allgemeine Kartenregel oben
 * und erhielten dadurch eine leere, 520 Pixel hohe Bildbühne. Die folgenden
 * Regeln trennen Kapitel-Intro und Motivkarte wieder klar voneinander. Das
 * Divi-Layout, alle Texte und sämtliche Ziel-URLs bleiben unverändert.
 */
body.page-id-356 #originals,
body.page-id-356 #fantasy,
body.page-id-356 #nerd {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* Originals bekommt das bestehende Rabenmotiv aus der lokalen WordPress-
 * Mediathek. Die linke Bildhälfte bleibt bewusst dunkel, damit die Kapitel-
 * Einleitung lesbar ist. Es ist kein neues Motiv und keine externe Ressource. */
body.page-id-356 #originals {
    background-color: #9f0f0f !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    background-image:
        linear-gradient(90deg, rgba(10, 8, 10, .95) 0%, rgba(16, 8, 10, .82) 34%, rgba(31, 7, 10, .42) 61%, rgba(9, 7, 10, .56) 100%),
        url('https://raventex.de/wp-content/uploads/2026/10/grauhaven-rabe-roter-mond-v1.webp') !important;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
body.page-id-356 #originals::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: -18%;
    opacity: .72;
    background-image:
        radial-gradient(ellipse at 78% 40%, rgba(194, 33, 38, .17) 0, rgba(97, 10, 15, .06) 27%, transparent 55%),
        linear-gradient(110deg, rgba(159, 15, 15, .16), transparent 52%, rgba(2, 5, 11, .14));
    background-position: center;
    pointer-events: none;
}
body.page-id-356 #originals::after {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(90deg, rgba(10, 8, 10, .22), transparent 42%, rgba(10, 8, 10, .18));
    pointer-events: none;
}
body.page-id-356 #originals > .et_pb_row_1,
body.page-id-356 #fantasy > .et_pb_row_6,
body.page-id-356 #nerd > .et_pb_row_8 {
    position: relative;
    z-index: 1;
}
body.page-id-356 #originals > .et_pb_row_1 {
    padding-top: clamp(52px, 7vw, 104px) !important;
    padding-bottom: clamp(52px, 7vw, 104px) !important;
}
body.page-id-356 #originals > .et_pb_row_1 .et_pb_module_header,
body.page-id-356 #originals > .et_pb_row_1 p {
    text-shadow: 0 2px 22px rgba(9, 5, 8, .32);
}

/* Die beiden Einleitungen sind jetzt kompakte Kapitel-Panels mit einer
 * zurückhaltenden, CSS-basierten Kennung: Kartenkompass für Fantasy,
 * Werkstatt-Raster für Nerd. Auf kleinen Geräten bleibt die Deko statisch. */
body.page-id-356 #fantasy,
body.page-id-356 #nerd {
    background-color: #111113 !important;
    padding-top: 52px !important;
    padding-bottom: 52px !important;
}
body.page-id-356 #fantasy::before,
body.page-id-356 #nerd::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
}
body.page-id-356 #fantasy::before {
    opacity: .82;
    background:
        radial-gradient(circle at 82% 50%, transparent 0 112px, rgba(207, 166, 101, .12) 112px 114px, transparent 115px 175px, rgba(207, 166, 101, .06) 175px 177px, transparent 178px),
        repeating-conic-gradient(from 12deg at 82% 50%, rgba(207, 166, 101, .06) 0deg 1deg, transparent 1deg 14deg),
        linear-gradient(90deg, #111113 0%, rgba(17, 17, 19, .96) 43%, rgba(44, 31, 19, .88) 100%);
}
body.page-id-356 #nerd::before {
    opacity: .85;
    background:
        linear-gradient(90deg, #111113 0%, rgba(17, 17, 19, .96) 43%, rgba(12, 43, 48, .72) 100%),
        linear-gradient(rgba(132, 204, 197, .075) 1px, transparent 1px),
        linear-gradient(90deg, rgba(132, 204, 197, .075) 1px, transparent 1px),
        radial-gradient(circle at 83% 52%, rgba(132, 204, 197, .20) 0 3px, transparent 4px);
    background-size: auto, 26px 26px, 26px 26px, auto;
    background-position: center;
}
body.page-id-356 #fantasy > .et_pb_row_6 > .et_pb_column,
body.page-id-356 #nerd > .et_pb_row_8 > .et_pb_column {
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: clamp(250px, 28vw, 340px) !important;
    height: auto !important;
    margin: 0 !important;
    padding: clamp(34px, 6vw, 72px) !important;
    overflow: hidden;
    border: 1px solid rgba(232, 225, 213, .16);
    border-radius: 18px;
    background: linear-gradient(104deg, rgba(23, 25, 29, .96), rgba(23, 25, 29, .64)) !important;
    box-shadow: 0 22px 58px rgba(0, 0, 0, .18) !important;
    transform: none !important;
}
body.page-id-356 #fantasy > .et_pb_row_6 > .et_pb_column {
    border-left: 3px solid #b9975b;
}
body.page-id-356 #nerd > .et_pb_row_8 > .et_pb_column {
    border-left: 3px solid #78aaa3;
}
body.page-id-356 #fantasy > .et_pb_row_6 > .et_pb_column:hover,
body.page-id-356 #nerd > .et_pb_row_8 > .et_pb_column:hover {
    border-color: rgba(232, 225, 213, .26);
    box-shadow: 0 22px 58px rgba(0, 0, 0, .18) !important;
    transform: none !important;
}
body.page-id-356 #fantasy > .et_pb_row_6 .et_pb_text,
body.page-id-356 #nerd > .et_pb_row_8 .et_pb_text {
    min-height: 0;
    margin-top: 12px;
}

/* Echte Motivkarten erhalten drei ruhige, kollektionsspezifische Akzente.
 * Die gesamte Karte bleibt der vorhandene Link, der sichtbare Titel und CTA
 * haben aber immer denselben optischen Platz. */
body.page-id-356 .et_pb_row_2 > .et_pb_column::before,
body.page-id-356 .et_pb_row_3 > .et_pb_column::before,
body.page-id-356 .et_pb_row_4 > .et_pb_column::before,
body.page-id-356 .et_pb_row_5 > .et_pb_column::before,
body.page-id-356 .et_pb_row_7 > .et_pb_column::before,
body.page-id-356 .et_pb_row_9 > .et_pb_column::before,
body.page-id-356 .et_pb_row_10 > .et_pb_column::before,
body.page-id-356 .et_pb_row_11 > .et_pb_column::before,
body.page-id-356 .et_pb_row_12 > .et_pb_column::before {
    content: '';
    position: absolute;
    z-index: 1;
    top: 0;
    right: 24px;
    left: 24px;
    height: 2px;
    border-radius: 999px;
    background: #9f0f0f;
    opacity: .82;
}
body.page-id-356 .et_pb_row_7 > .et_pb_column::before { background: #b9975b; }
body.page-id-356 .et_pb_row_9 > .et_pb_column::before,
body.page-id-356 .et_pb_row_10 > .et_pb_column::before,
body.page-id-356 .et_pb_row_11 > .et_pb_column::before,
body.page-id-356 .et_pb_row_12 > .et_pb_column::before { background: #78aaa3; }
body.page-id-356 .et_pb_row_2 > .et_pb_column .et_pb_image_wrap,
body.page-id-356 .et_pb_row_3 > .et_pb_column .et_pb_image_wrap,
body.page-id-356 .et_pb_row_4 > .et_pb_column .et_pb_image_wrap,
body.page-id-356 .et_pb_row_5 > .et_pb_column .et_pb_image_wrap,
body.page-id-356 .et_pb_row_7 > .et_pb_column .et_pb_image_wrap,
body.page-id-356 .et_pb_row_9 > .et_pb_column .et_pb_image_wrap,
body.page-id-356 .et_pb_row_10 > .et_pb_column .et_pb_image_wrap,
body.page-id-356 .et_pb_row_11 > .et_pb_column .et_pb_image_wrap,
body.page-id-356 .et_pb_row_12 > .et_pb_column .et_pb_image_wrap {
    border-radius: 10px;
    background: radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .04), transparent 65%);
}
body.page-id-356 .et_pb_row_2 > .et_pb_column .et_pb_text a:focus-visible,
body.page-id-356 .et_pb_row_3 > .et_pb_column .et_pb_text a:focus-visible,
body.page-id-356 .et_pb_row_4 > .et_pb_column .et_pb_text a:focus-visible,
body.page-id-356 .et_pb_row_5 > .et_pb_column .et_pb_text a:focus-visible,
body.page-id-356 .et_pb_row_7 > .et_pb_column .et_pb_text a:focus-visible,
body.page-id-356 .et_pb_row_9 > .et_pb_column .et_pb_text a:focus-visible,
body.page-id-356 .et_pb_row_10 > .et_pb_column .et_pb_text a:focus-visible,
body.page-id-356 .et_pb_row_11 > .et_pb_column .et_pb_text a:focus-visible,
body.page-id-356 .et_pb_row_12 > .et_pb_column .et_pb_text a:focus-visible {
    outline: 2px solid #beddd6;
    outline-offset: -4px;
}

/* Der Abschluss wird als drei gleichgewichtige Richtungsentscheidung lesbar.
 * Die vorhandenen Links und Texte werden nicht umsortiert oder umgeschrieben. */
body.page-id-356 .et_pb_section_13 {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border-top: 1px solid rgba(159, 15, 15, .58);
    background:
        radial-gradient(circle at 82% 14%, rgba(159, 15, 15, .14), transparent 28%),
        linear-gradient(135deg, #17191e, #111113) !important;
}
body.page-id-356 .et_pb_section_13::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    opacity: .56;
    background: repeating-linear-gradient(90deg, transparent 0 84px, rgba(232, 225, 213, .03) 84px 85px);
    pointer-events: none;
}
body.page-id-356 .et_pb_section_13 .et_pb_row_14 {
    display: flex;
    align-items: stretch;
    gap: 22px;
}
body.page-id-356 .et_pb_section_13 .et_pb_row_14 > .et_pb_column {
    display: flex;
    flex-direction: column;
    min-height: 258px;
    padding: 28px;
    border: 1px solid rgba(232, 225, 213, .14);
    border-radius: 14px;
    background: rgba(17, 17, 19, .46);
}
body.page-id-356 .et_pb_section_13 .et_pb_row_14 .et_pb_button_module_wrapper {
    margin-top: auto;
}
body.page-id-356 .et_pb_section_13 .et_pb_row_15 {
    display: flex;
    justify-content: center;
}
body.page-id-356 .et_pb_section_13 .et_pb_row_15 > .et_pb_column {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}
body.page-id-356 .et_pb_section_13 .et_pb_row_15 .et_pb_button_module_wrapper {
    margin: 0 !important;
}

/* Der Footer bleibt inhaltlich unverändert, erhält aber eine klarere
 * Abschlusskante, ruhig gegliederte Bereiche und verlässliche Fokusflächen. */
body:not(.wp-admin) .et_pb_section_0_tb_footer {
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(232, 225, 213, .13);
    background:
        linear-gradient(90deg, rgba(159, 15, 15, .34), transparent 20% 78%, rgba(120, 170, 163, .18)),
        #0b0c0e !important;
}
body:not(.wp-admin) .et_pb_section_0_tb_footer::before {
    content: '';
    position: absolute;
    top: 4px;
    right: 0;
    left: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(232, 225, 213, .26), transparent);
}
body:not(.wp-admin) .et_pb_row_1_tb_footer {
    padding-top: 28px !important;
    border-top: 1px solid rgba(232, 225, 213, .11);
}
body:not(.wp-admin) .et_pb_section_0_tb_footer a {
    text-decoration: none !important;
}
body:not(.wp-admin) .et_pb_section_0_tb_footer a:hover {
    color: #beddd6 !important;
}
body:not(.wp-admin) .et_pb_section_0_tb_footer a:focus-visible,
body.page-id-356 .et_pb_section_13 a:focus-visible {
    outline: 2px solid #beddd6;
    outline-offset: 4px;
}

/* Tiefe statt hektischer Daueranimation: Auf Desktop bewegt sich nur die
 * abstrakte Originals-Textur sehr langsam. Mobil und reduzierte Bewegung
 * erhalten exakt dieselbe Gestaltung ohne Animation. */
@media (min-width: 981px) and (prefers-reduced-motion: no-preference) {
    body.page-id-356 #originals::before {
        animation: raventex-originals-textur 18s ease-in-out infinite alternate;
    }
    @keyframes raventex-originals-textur {
        from { transform: translate3d(-1.2%, -.8%, 0) scale(1.01); }
        to { transform: translate3d(1.2%, .8%, 0) scale(1.04); }
    }
}

@media (max-width: 980px) {
    body.page-id-356 #fantasy > .et_pb_row_6 > .et_pb_column,
    body.page-id-356 #nerd > .et_pb_row_8 > .et_pb_column {
        min-height: 250px !important;
    }
    body.page-id-356 .et_pb_section_13 .et_pb_row_14 {
        gap: 16px;
    }
}

@media (max-width: 767px) {
    body.page-id-356 #originals > .et_pb_row_1 {
        padding-top: 48px !important;
        padding-bottom: 48px !important;
    }
    body.page-id-356 #fantasy,
    body.page-id-356 #nerd {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }
    body.page-id-356 #fantasy::before,
    body.page-id-356 #nerd::before {
        opacity: .48;
        background-position: 72% center;
    }
    body.page-id-356 #fantasy > .et_pb_row_6 > .et_pb_column,
    body.page-id-356 #nerd > .et_pb_row_8 > .et_pb_column {
        min-height: 218px !important;
        padding: 30px 24px !important;
        border-radius: 14px;
    }
    body.page-id-356 .et_pb_section_13 .et_pb_row_14,
    body.page-id-356 .et_pb_section_13 .et_pb_row_15,
    body.page-id-356 .et_pb_section_13 .et_pb_row_15 > .et_pb_column {
        display: block;
    }
    body.page-id-356 .et_pb_section_13 .et_pb_row_14 > .et_pb_column {
        min-height: 0;
        margin-bottom: 14px;
        padding: 24px;
    }
    body.page-id-356 .et_pb_section_13 .et_pb_row_15 .et_pb_button_module_wrapper {
        margin: 12px 0 !important;
    }
    body:not(.wp-admin) .et_pb_section_0_tb_footer {
        background:
            linear-gradient(160deg, rgba(159, 15, 15, .18), transparent 46%),
            #0b0c0e !important;
    }
}

/*
 * Produktreihe auf der Startseite: Divi bringt die Karten und die vollständige
 * Sliderlogik selbst mit. Diese Regeln greifen ausschließlich dort, wo Divi
 * keine Einstellung für den optischen Abstand der Pfeile und eine gemeinsame
 * untere Buttonkante bietet. Produktdaten, Bilder, Ziel-URLs und Reihenfolge
 * bleiben unverändert in Divi gepflegt.
 */
body.home #raventex-produktkarussell .et_pb_group_1 {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}
body.home #raventex-produktkarussell .et_pb_button_module_wrapper {
    margin-top: auto !important;
}

@media (max-width: 767px) {
    /* Auf kleinen Displays würden Divis Standardpfeile je vier Pixel über den
     * sichtbaren Rand hinausragen. Die Touch-Fläche bleibt 48 Pixel groß,
     * rückt aber vollständig in den Viewport. */
    body.home #raventex-produktkarussell .et_pb_group_carousel_arrow_prev {
        transform: translate(-8px, -50%) !important;
    }
    body.home #raventex-produktkarussell .et_pb_group_carousel_arrow_next {
        transform: translate(8px, -50%) !important;
    }
}

@media (min-width: 768px) {
    /* Divis Standardposition legt die runden Pfeile halb über die äußeren
     * Karten. Ein zusätzlicher, bewusst kleiner Versatz lässt die Reihe
     * freier wirken, ohne den Sliderbereich oder die Trefferflächen zu ändern.
     */
    body.home #raventex-produktkarussell .et_pb_group_carousel_arrow_prev {
        transform: translate(-32px, -50%) !important;
    }
    body.home #raventex-produktkarussell .et_pb_group_carousel_arrow_next {
        transform: translate(32px, -50%) !important;
    }
}

/*
 * Gemeinsame Telefon-Optimierung. Divi steuert Inhalte, Reihenfolge und
 * Desktop-Gestaltung weiterhin nativ. Diese wenigen Regeln schließen nur
 * Lücken, die bei realen 390px-Tests sichtbar waren: das ausklappbare Menü
 * muss alle Einträge erreichen, der Produkt-Slider darf nicht unnötig hoch
 * werden und der Footer soll lesbar bleiben, ohne den halben Bildschirm zu
 * beanspruchen. Keine Bilddatei, kein Text und keine Shop-URL werden hier
 * verändert.
 */
@media (max-width: 767px) {
    /* Das native Divi-Menü bleibt vollständig tastaturbedienbar. Die
     * Maximalhöhe verhindert, dass Einträge auf niedrigen Displays außerhalb
     * des Viewports liegen; bei Bedarf kann innerhalb des Menüs gescrollt
     * werden.
     */
    body:not(.wp-admin) #main-header .et_mobile_menu {
        left: auto;
        right: 0;
        width: calc(100vw - 40px);
        max-height: calc(100vh - 118px);
        padding: 8px;
        overflow-y: auto;
        border: 1px solid #70645c;
        border-top: 2px solid #a2293b;
        border-radius: 0 0 12px 12px;
        background: #111113;
        box-shadow: 0 18px 42px rgba(0, 0, 0, .42);
    }
    body:not(.wp-admin) #main-header .et_mobile_menu li a {
        min-height: 48px;
        padding: 14px 16px;
        border-bottom: 1px solid rgba(112, 100, 92, .34);
        color: #e8e1d5;
        font-size: 16px;
        line-height: 20px;
    }
    body:not(.wp-admin) #main-header .et_mobile_menu li:last-child a {
        border-bottom: 0;
    }
    body:not(.wp-admin) #main-header .et_mobile_menu a:focus-visible {
        outline: 2px solid #beddd6;
        outline-offset: -2px;
    }

    /* Die Slide-Höhe orientiert sich an der tatsächlichen Bildbühne. Dadurch
     * bleibt die Produktwahl auf Telefonen kompakt, ohne Motive abzuschneiden.
     */
    body.home #raventex-produktkarussell .et_pb_image_wrap,
    body.home #raventex-produktkarussell .et_pb_image_wrap > img {
        height: 260px !important;
    }
    body.home #raventex-produktkarussell .et_pb_image_wrap > img {
        display: block;
        max-width: 100%;
        object-fit: contain;
    }
    /* Die von Divi erzeugten Pfeile bleiben native Bedienelemente. Wir
     * vergrößern ausschließlich ihre Trefferfläche für den Daumen und halten
     * den sichtbaren Fokusrahmen der bestehenden Erweiterung intakt.
     */
    body.home #raventex-produktkarussell .et_pb_group_carousel_arrow {
        min-width: 48px;
        min-height: 48px;
    }

    /* Der globale Footer ist auf Desktop als zwei Spalten gestaltet. Auf
     * Telefonen reduzieren wir nur Logo-, Zwischen- und Schriftabstände.
     * Die rechtlichen Links bleiben vollständig sichtbar und gut antippbar.
     */
    body:not(.wp-admin) .et_pb_section_0_tb_footer {
        padding-top: 28px !important;
        padding-bottom: 28px !important;
    }
    body:not(.wp-admin) .et_pb_row_0_tb_footer,
    body:not(.wp-admin) .et_pb_row_1_tb_footer {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }
    body:not(.wp-admin) .et_pb_image_0_tb_footer {
        width: 200px !important;
        margin-bottom: 18px !important;
    }
    body:not(.wp-admin) .et_pb_heading_0_tb_footer {
        margin-bottom: 16px !important;
    }
    body:not(.wp-admin) .et_pb_heading_0_tb_footer .et_pb_module_header {
        font-size: 25px !important;
        line-height: 1.2 !important;
    }
    body:not(.wp-admin) .et_pb_text_1_tb_footer a,
    body:not(.wp-admin) .et_pb_text_2_tb_footer a {
        display: inline-block;
        min-height: 44px;
        padding-top: 7px;
        padding-bottom: 7px;
        color: #e8e1d5;
        font-size: 16px;
        line-height: 24px;
    }
}

/* Tablets verwenden noch die Divi-Mobilnavigation, erhalten aber bei den
 * langen Kollektionsarchiven nicht mehr die Desktop-Zwischenräume von je
 * 80px. Bildgrößen, Reihenfolge, Texte und die eigentlichen Divi-Module
 * bleiben unverändert. Das hält den Lesefluss zwischen 768 und 980px ruhig,
 * ohne das bewusst luftigere Desktop-Layout anzutasten.
 */
@media (min-width: 768px) and (max-width: 980px) {
    body.page-id-356 #et-main-area .et_pb_section {
        padding-top: 56px !important;
        padding-bottom: 56px !important;
    }
}

/* Divi hat jede Motivzeile als eigenen Abschnitt angelegt. Mit den nativen
 * 80 Pixeln oben UND unten entstanden zwischen zwei Reihen 160 Pixel Leere.
 * Diese gezielte Ausnahme verdichtet ausschließlich die Motivbereiche; die
 * Kapitel-Einstiege für Originals, Fantasy und Nerd behalten ihren bewusst
 * großzügigeren Abstand. */
body.page-id-356 #et-main-area .et_pb_section_2,
body.page-id-356 #et-main-area .et_pb_section_3,
body.page-id-356 #et-main-area .et_pb_section_4,
body.page-id-356 #et-main-area .et_pb_section_5,
body.page-id-356 #et-main-area .et_pb_section_7,
body.page-id-356 #et-main-area .et_pb_section_9,
body.page-id-356 #et-main-area .et_pb_section_10,
body.page-id-356 #et-main-area .et_pb_section_11,
body.page-id-356 #et-main-area .et_pb_section_12 {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
}
@media (max-width: 767px) {
    body.page-id-356 #et-main-area .et_pb_section_2,
    body.page-id-356 #et-main-area .et_pb_section_3,
    body.page-id-356 #et-main-area .et_pb_section_4,
    body.page-id-356 #et-main-area .et_pb_section_5,
    body.page-id-356 #et-main-area .et_pb_section_7,
    body.page-id-356 #et-main-area .et_pb_section_9,
    body.page-id-356 #et-main-area .et_pb_section_10,
    body.page-id-356 #et-main-area .et_pb_section_11,
    body.page-id-356 #et-main-area .et_pb_section_12 {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }
}

/* Zugängliche Vollbildansicht der Charakterreferenzen. Das eigentliche Bild,
 * der Link und alle Seiteninhalte bleiben native WordPress-/Divi-Inhalte.
 */
.raventex-sheet-dialog {
    width: min(94vw, 1320px);
    max-width: none;
    max-height: 92vh;
    padding: 0;
    border: 1px solid #70645c;
    border-radius: 10px;
    background: #111113;
    color: #e8e1d5;
    box-shadow: 0 30px 90px rgba(0, 0, 0, .7);
}
.raventex-sheet-dialog::backdrop {
    background: rgba(5, 6, 8, .88);
    backdrop-filter: blur(4px);
}
.raventex-sheet-dialog__bar {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 58px;
    padding: 10px 14px 10px 20px;
    background: rgba(17, 17, 19, .97);
    border-bottom: 1px solid #343338;
}
.raventex-sheet-dialog__title {
    margin: 0;
    font: 600 16px/1.4 system-ui, sans-serif;
}
.raventex-sheet-dialog__close {
    min-width: 44px;
    min-height: 44px;
    border: 1px solid #70645c;
    border-radius: 6px;
    background: #191b1e;
    color: #e8e1d5;
    font: 24px/1 system-ui, sans-serif;
    cursor: pointer;
}
.raventex-sheet-dialog__close:hover,
.raventex-sheet-dialog__close:focus-visible {
    border-color: #beddd6;
    outline: 2px solid #beddd6;
    outline-offset: 2px;
}
.raventex-sheet-dialog__image {
    display: block;
    width: 100%;
    height: auto;
    background: #111113;
}
@media (max-width: 767px) {
    .raventex-sheet-dialog {
        width: 96vw;
        max-height: 94vh;
    }
    .raventex-sheet-dialog__bar {
        padding-left: 14px;
    }
}

/*
 * Fantasy-Motivwelt: Die Seite besitzt bewusst native Divi-Texte und Buttons.
 * Die beiden lokalen Bildwelten ergänzen sie ausschließlich als ruhige
 * Szenenflächen. Dadurch liegt kein Hinweistext auf einem Bild und die
 * vorhandenen, semantischen Divi-Links bleiben die einzigen Klickziele.
 *
 * Die Begrenzung auf Seite 878 verhindert Nebenwirkungen auf andere
 * Motivgeschichten. Beide Dateien liegen im Plugin und werden weder von einem
 * Drittanbieter geladen noch für Tracking verwendet.
 */
body.page-id-878 .et_pb_section_4,
body.page-id-878 .et_pb_section_5 {
    position: relative;
    isolation: isolate;
    overflow: clip;
}
body.page-id-878 .et_pb_section_4 > .et_pb_row,
body.page-id-878 .et_pb_section_5 > .et_pb_row {
    position: relative;
    z-index: 1;
}
/* Einstieg: Die drei Fantasy-Motive erscheinen in einer bewohnten,
 * warmen Grauhaven-Szene. Die linke Verlaufskante hält die Einleitung ohne
 * künstliche Textbox lesbar. */
body.page-id-878 .et_pb_section_4 {
    background-color: #111113 !important;
    background-image:
        linear-gradient(90deg, #111113 0%, #111113 36%, rgba(17, 17, 19, .93) 49%, rgba(17, 17, 19, .42) 78%, rgba(17, 17, 19, .24) 100%),
        url('story/fantasy-grauhaven-kueche.webp') !important;
    background-position: center, center !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100%, cover !important;
}
/* Der zugehörige Artikel erhält seine eigene Motivabbildung. Das Bild bleibt
 * als Bühne rechts neben der Erzählung statt als überdeckte Beschriftung. */
body.page-id-878 .et_pb_section_5 {
    background-color: #191b1e !important;
    background-image:
        linear-gradient(90deg, #191b1e 0%, #191b1e 43%, rgba(25, 27, 30, .94) 58%, rgba(25, 27, 30, .80) 100%),
        url('story/fantasy-legendaerer-muell.png') !important;
    background-position: center, right 7% center !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100%, min(33vw, 500px) auto !important;
}
@media (max-width: 980px) {
    body.page-id-878 .et_pb_section_4 {
        background-image:
            linear-gradient(90deg, #111113 0%, rgba(17, 17, 19, .94) 48%, rgba(17, 17, 19, .56) 100%),
            url('story/fantasy-grauhaven-kueche.webp') !important;
    }
    body.page-id-878 .et_pb_section_5 {
        background-size: 100% 100%, min(42vw, 420px) auto !important;
        background-position: center, right 3% bottom 4% !important;
    }
}

/*
 * Auf einspaltigen Tablet- und Telefonlayouts vergibt Divi einem Bildmodul
 * ohne feste Breite lediglich die intrinsische Breite der PNG-Datei. Das
 * erzeugt eine scheinbar leere rechte Kartenhälfte. Die Bühne erhält deshalb
 * die Kartenbreite; das transparente Motiv bleibt darin mittig und wird nicht
 * beschnitten. Diese Regel ergänzt nur die Motivkarten der Kollektionenseite.
 */
@media (max-width: 980px) {
    body.page-id-356 :is(.et_pb_row_2, .et_pb_row_3, .et_pb_row_4, .et_pb_row_5, .et_pb_row_7, .et_pb_row_9, .et_pb_row_10, .et_pb_row_11, .et_pb_row_12) > .et_pb_column > .et_pb_image,
    body.page-id-356 :is(.et_pb_row_2, .et_pb_row_3, .et_pb_row_4, .et_pb_row_5, .et_pb_row_7, .et_pb_row_9, .et_pb_row_10, .et_pb_row_11, .et_pb_row_12) > .et_pb_column .et_pb_image_wrap {
        width: 100% !important;
        max-width: none !important;
    }
}

/*
 * Kaskadenabschluss für die bestehenden Divi-Kartenregeln.
 *
 * Die Motivregeln stehen aus Kompatibilitätsgründen weiter oben in dieser
 * Datei. Diese abschließende, gleich spezifische Ebene stellt sicher, dass
 * die mobilen Maße auch nach den allgemeinen Desktopregeln gewinnen. Die
 * Bildbühne ist absichtlich kompakt, aber nicht beschnitten: transparente
 * Motive bleiben mit object-fit: contain vollständig sichtbar.
 */
@media (max-width: 980px) {
    body.page-id-356 :is(.et_pb_row_2, .et_pb_row_3, .et_pb_row_4, .et_pb_row_5, .et_pb_row_7, .et_pb_row_9, .et_pb_row_10, .et_pb_row_11, .et_pb_row_12) > .et_pb_column {
        height: 400px !important;
        min-height: 400px !important;
        padding: 18px !important;
        margin-bottom: 14px !important;
    }
    body.page-id-356 :is(.et_pb_row_2, .et_pb_row_3, .et_pb_row_4, .et_pb_row_5, .et_pb_row_7, .et_pb_row_9, .et_pb_row_10, .et_pb_row_11, .et_pb_row_12) .et_pb_image_wrap {
        height: 260px !important;
    }
    body.page-id-356 :is(.et_pb_row_2, .et_pb_row_3, .et_pb_row_4, .et_pb_row_5, .et_pb_row_7, .et_pb_row_9, .et_pb_row_10, .et_pb_row_11, .et_pb_row_12) .et_pb_image_wrap > img {
        width: auto !important;
        max-width: min(100%, 340px) !important;
        margin: 0 auto !important;
    }
    body.page-id-356 :is(.et_pb_row_2, .et_pb_row_3, .et_pb_row_4, .et_pb_row_5, .et_pb_row_7, .et_pb_row_9, .et_pb_row_10, .et_pb_row_11, .et_pb_row_12) > .et_pb_column .et_pb_text a::after {
        right: auto !important;
        bottom: 16px !important;
        left: 18px !important;
    }
}

@media (max-width: 767px) {
    body.page-id-356 :is(.et_pb_row_2, .et_pb_row_3, .et_pb_row_4, .et_pb_row_5, .et_pb_row_7, .et_pb_row_9, .et_pb_row_10, .et_pb_row_11, .et_pb_row_12) > .et_pb_column {
        height: 360px !important;
        min-height: 360px !important;
        padding: 16px !important;
        margin-bottom: 12px !important;
    }
    body.page-id-356 :is(.et_pb_row_2, .et_pb_row_3, .et_pb_row_4, .et_pb_row_5, .et_pb_row_7, .et_pb_row_9, .et_pb_row_10, .et_pb_row_11, .et_pb_row_12) .et_pb_image_wrap {
        height: 224px !important;
    }
    body.page-id-356 :is(.et_pb_row_2, .et_pb_row_3, .et_pb_row_4, .et_pb_row_5, .et_pb_row_7, .et_pb_row_9, .et_pb_row_10, .et_pb_row_11, .et_pb_row_12) .et_pb_image_wrap > img {
        max-width: min(100%, 280px) !important;
    }
}
@media (max-width: 767px) {
    /* Auf Telefonen wird die Szenenfläche nicht abgeschnitten. Ein vertikaler
     * Verlauf lässt Text und die bereits großen Touch-Buttons klar lesbar. */
    body.page-id-878 .et_pb_section_4 {
        background-image:
            linear-gradient(180deg, rgba(17, 17, 19, .88) 0%, rgba(17, 17, 19, .90) 50%, #111113 100%),
            url('story/fantasy-grauhaven-kueche.webp') !important;
        background-position: center top !important;
        background-size: 100% 100%, auto 100% !important;
    }
    body.page-id-878 .et_pb_section_5 {
        background-image:
            linear-gradient(180deg, #191b1e 0%, rgba(25, 27, 30, .92) 68%, #191b1e 100%),
            url('story/fantasy-legendaerer-muell.png') !important;
        background-position: center, right -30px bottom 16px !important;
        background-size: 100% 100%, 235px auto !important;
        padding-bottom: 260px !important;
    }
}

/*
 * 0.5.9 – Das geöffnete Divi-Menü bleibt ein kompaktes Glas-Panel statt
 * eines fast bildschirmbreiten Overlays. Die Regel steht bewusst am Ende:
 * ältere Mobilregeln aus dem selben Plugin dürfen auf kleinen Geräten weder
 * die Breite, Höhe noch die transparente Fläche wieder überschreiben.
 *
 * clamp(): mindestens 280 px für ruhige Zeilenumbrüche, maximal 420 px auf
 * Tablet/Querformat. max-width hat Vorrang auf sehr schmalen Telefonen.
 * Die dunkle Basis bleibt der lesbare Fallback für Browser ohne Blur.
 */
@media (max-width: 980px) {
    body:not(.wp-admin) #main-header .mobile_nav {
        position: static !important;
    }
    body:not(.wp-admin) #main-header .et_mobile_menu {
        position: fixed !important;
        top: var(--raventex-mobile-menu-top, 82px) !important;
        left: auto !important;
        right: max(12px, env(safe-area-inset-right)) !important;
        width: clamp(280px, 55vw, 420px) !important;
        max-width: 90vw !important;
        max-height: min(72dvh, calc(100dvh - var(--raventex-mobile-menu-top, 82px) - 12px)) !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 8px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        border: 1px solid rgba(184, 171, 153, .58) !important;
        border-top: 2px solid #a2293b !important;
        border-radius: 16px !important;
        background: rgba(14, 14, 17, .78) !important;
        -webkit-backdrop-filter: blur(22px) saturate(140%);
        backdrop-filter: blur(22px) saturate(140%);
        box-shadow: 0 22px 56px rgba(0, 0, 0, .58) !important;
        transform-origin: top right;
    }
    body:not(.wp-admin) #main-header .et_mobile_menu li,
    body:not(.wp-admin) #main-header .et_mobile_menu li a {
        width: 100% !important;
    }
    body:not(.wp-admin) #main-header .et_mobile_menu li a {
        display: flex !important;
        align-items: center;
        min-height: 48px !important;
        padding: 12px 16px !important;
        border-bottom: 1px solid rgba(232, 225, 213, .16) !important;
        color: #e8e1d5 !important;
        text-align: left !important;
    }
    body:not(.wp-admin) #main-header .et_mobile_menu li:last-child a {
        border-bottom: 0 !important;
    }
    body:not(.wp-admin) #main-header .et_mobile_menu a:focus-visible {
        outline: 2px solid #beddd6;
        outline-offset: -2px;
    }
}

/* Telefone behalten beidseitig mindestens 5 Prozent Rand. Auf breiteren
 * Geräten verhindert das 420-Pixel-Limit ein bildschirmbreites Panel. */
@media (max-width: 640px) {
    body:not(.wp-admin) #main-header .et_mobile_menu {
        width: min(420px, 90vw) !important;
        right: 5vw !important;
    }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    @media (max-width: 980px) {
        body:not(.wp-admin) #main-header .et_mobile_menu {
            background: rgba(14, 14, 17, .96) !important;
        }
    }
}

@media (prefers-reduced-transparency: reduce) {
    body:not(.wp-admin) #main-header .et_mobile_menu {
        background: rgba(14, 14, 17, .96) !important;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

/*
 * Karten auf breiten Telefonen: Bei rund 520 bis 767 Pixeln ist eine zweite
 * vollständige Kartenzeile unnötig lang. Das Motiv erhält deshalb rechts eine
 * feste, unbeschnittene Bühne; Titel und echter Kartenlink liegen links.
 * Unterhalb davon bleibt die Bild-oben-Variante bestehen, weil die Textspalte
 * sonst für lange deutsche Motive zu schmal würde. Desktop und Divi-Inhalte
 * bleiben unverändert.
 */
@media (min-width: 520px) and (max-width: 767px) {
    body.page-id-356 :is(.et_pb_row_2, .et_pb_row_3, .et_pb_row_4, .et_pb_row_5, .et_pb_row_7, .et_pb_row_9, .et_pb_row_10, .et_pb_row_11, .et_pb_row_12) > .et_pb_column {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(190px, 42%);
        grid-template-rows: minmax(0, 1fr) auto;
        column-gap: 12px;
        height: 252px !important;
        min-height: 252px !important;
        padding: 16px 18px !important;
    }
    body.page-id-356 :is(.et_pb_row_2, .et_pb_row_3, .et_pb_row_4, .et_pb_row_5, .et_pb_row_7, .et_pb_row_9, .et_pb_row_10, .et_pb_row_11, .et_pb_row_12) > .et_pb_column > .et_pb_image {
        grid-column: 2;
        grid-row: 1 / span 2;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100% !important;
        height: 100%;
        margin: 0 !important;
    }
    body.page-id-356 :is(.et_pb_row_2, .et_pb_row_3, .et_pb_row_4, .et_pb_row_5, .et_pb_row_7, .et_pb_row_9, .et_pb_row_10, .et_pb_row_11, .et_pb_row_12) > .et_pb_column .et_pb_image_wrap {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100% !important;
        height: 100% !important;
    }
    body.page-id-356 :is(.et_pb_row_2, .et_pb_row_3, .et_pb_row_4, .et_pb_row_5, .et_pb_row_7, .et_pb_row_9, .et_pb_row_10, .et_pb_row_11, .et_pb_row_12) > .et_pb_column .et_pb_image_wrap > img {
        width: 100% !important;
        max-width: 210px !important;
        max-height: 210px;
        height: auto !important;
        object-fit: contain;
    }
    body.page-id-356 :is(.et_pb_row_2, .et_pb_row_3, .et_pb_row_4, .et_pb_row_5, .et_pb_row_7, .et_pb_row_9, .et_pb_row_10, .et_pb_row_11, .et_pb_row_12) > .et_pb_column .et_pb_module_header {
        grid-column: 1;
        grid-row: 1;
        align-self: end;
        margin: 0 0 42px !important;
    }
    body.page-id-356 :is(.et_pb_row_2, .et_pb_row_3, .et_pb_row_4, .et_pb_row_5, .et_pb_row_7, .et_pb_row_9, .et_pb_row_10, .et_pb_row_11, .et_pb_row_12) > .et_pb_column .et_pb_text {
        grid-column: 1;
        grid-row: 2;
        min-height: 0;
        margin: 0 !important;
    }
    body.page-id-356 :is(.et_pb_row_2, .et_pb_row_3, .et_pb_row_4, .et_pb_row_5, .et_pb_row_7, .et_pb_row_9, .et_pb_row_10, .et_pb_row_11, .et_pb_row_12) > .et_pb_column .et_pb_text a::after {
        right: auto !important;
        bottom: 16px !important;
        left: 18px !important;
        font-size: 16px;
    }
}