@media screen and (max-width: 820px) and (hover: none) and (pointer: coarse) and (min-aspect-ratio: 13/9) {
    html,
    body {
        height: 100%;
        overflow: hidden;
    }

    body::before {
        content: "Bitte die Webseite im Hochformat verwenden Handy drehen";
        position: fixed;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 2rem;
        background: rgba(0, 0, 0, 0.85);
        color: #fff;
        font-size: 1.125rem;
        text-align: center;
        z-index: 999999;
    }
}

.elementor-location-header,
header.site-header,
header {
    position: relative;
    z-index: 10020;
}

.elementor-location-header .elementor-nav-menu--dropdown,
.elementor-location-header .elementor-nav-menu__container,
.elementor-location-header .elementor-menu-toggle {
    position: relative;
    z-index: 10010;
}

/* Das Untermenü-Fix fürs mobile Klapp-Menü sitzt bewusst NICHT hier, sondern
   als unconditional wp_head-Ausgabe in cod-embed-ios-viewport.php
   (cod_embed_nav_dropdown_submenu_fix): Diese Datei wird nur auf Seiten mit
   bestimmten cod-embed-Widgets geladen (Header-Widget, Partner-Karussell,
   Events, Gewinnspiele) - eine reine Unterseite wie /ueber-uns/ ohne diese
   Widgets bekam den Fix dadurch nie, obwohl der Header (Elementor-Template)
   dort genauso erscheint. Der Header läuft auf JEDER Seite, der Fix muss also
   auch auf jeder Seite laufen. */

.menu-overlay {
    position: fixed;
    top: var(--cod-header-h, 80px);
    right: 0;
    bottom: 0;
    left: 0;
    display: none;
    background: rgba(0, 0, 0, 0.6);
    z-index: 10000;
}

.elementor-widget-nav-menu .elementor-nav-menu > li:first-child {
    margin-top: 25px;
}

.elementor-widget-nav-menu .elementor-nav-menu > li:last-child {
    margin-bottom: 25px;
}

/* ── Kachel Geometrie: CSS Custom Property Kontrolle ─────────────────────── */
.partner-card.item {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    width: var(--cod-card-width, auto);
    height: var(--cod-card-lock-height, var(--cod-card-height, auto));
    aspect-ratio: var(--cod-card-lock-ratio);
    border-radius:
        var(--cod-card-border-radius-top-left, var(--cod-card-border-radius, 5px))
        var(--cod-card-border-radius-top-right, var(--cod-card-border-radius, 5px))
        var(--cod-card-border-radius-bottom-right, var(--cod-card-border-radius, 5px))
        var(--cod-card-border-radius-bottom-left, var(--cod-card-border-radius, 5px));
    box-shadow: var(--cod-shadow-card);
    border: none;
    opacity: var(--cod-card-opacity, 1);
    transition: all var(--cod-card-transition, 300ms) var(--cod-card-ease, ease);
}

/* Bildbereich: fixe 4:3 Höhe (= card-width × 0.75), wächst/schrumpft nicht */
.partner-card.item .partnerImageWrap {
    position: relative;
    overflow: hidden !important;
    flex: 0 0 auto;
    width: 100%;
    /* Rückfallwert auf das Standardformat der Plattform gebracht (13.08.2026):
       1,426 = 365/256, praktisch 10:7. Vorher 4:3 - und weil das Token global
       auf 'auto' steht, war dieser Rückfall in der Praxis der wirksame Wert.
       Damit hatten Partner- und Angebots-Kachel ein anderes Bildformat als
       Academy, Gewinnspiel und Event. */
    aspect-ratio: 365 / 256;
    border-radius:
        var(--cod-card-image-radius-top-left, var(--cod-card-border-radius-top-left, var(--cod-card-border-radius, 5px)))
        var(--cod-card-image-radius-top-right, var(--cod-card-border-radius-top-right, var(--cod-card-border-radius, 5px)))
        var(--cod-card-image-radius-bottom-right, var(--cod-card-border-radius-bottom-right, var(--cod-card-border-radius, 5px)))
        var(--cod-card-image-radius-bottom-left, var(--cod-card-border-radius-bottom-left, var(--cod-card-border-radius, 5px)));
}

#Community-Partner .partnerImageWrap img,
.partner-card.item .partnerImageWrap img {
    position: absolute !important;
    inset: 0;
    width: 100%;
    height: 100% !important;
    display: block;
    object-fit: cover;
    object-position: center center;
    aspect-ratio: unset !important;
    border-radius: inherit;
}

.partner-card.item .partnerImageWrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--cod-card-overlay-color, #000000);
    display: var(--cod-card-overlay, none);
    opacity: 0.4;
    pointer-events: none;
    z-index: 1;
}

.partner-card.item .partnerContent {
    flex: 1 1 auto;
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0;
    text-align: center;
}

/* Das Overlay deckt die GANZE Karte, nicht nur den Bildbereich.

   Der Selektor braucht dafür .partner-card davor, und aspect-ratio/height
   brauchen !important. Grund ist eine allgemeine Bild-Regel derselben Karte:

     .partner-card.item img { height: auto; aspect-ratio: 365/256; }

   (Die Zahl stand bis zum 17.08.2026 auf 4/3 und wurde auf das Standardformat
   der Plattform gebracht - an der Wirkung hier aendert das nichts, das Overlay
   braucht sein !important gegen JEDE Zahl an dieser Stelle.)

   Zwei Klassen plus Elementtyp - spezifischer als ein blosses
   .partnerOverlayImg. Sie hat height:100% ausgehebelt und dem Overlay das
   Bild-Verhältnis 4:3 aufgezwungen. Ergebnis: Die aufgelegte Fassung deckte
   nur die oberen 270 von 540 px, darunter stand die Karte normal weiter -
   im Browser sah es aus, als läge sie nur über dem Profilbild.

   aspect-ratio: auto ist der eigentliche Schlüssel: Ohne das gewinnt das
   Verhältnis gegen top/bottom, egal wie hoch der Rest gesetzt wird. */
.partnerOverlayImg,
.partner-card .partnerOverlayImg,
.partner-card.item .partnerOverlayImg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100% !important;
    aspect-ratio: auto !important;
    object-fit: cover;
    object-position: center center;
    /* EBENE 12 - der Wert ist eingeklemmt, nicht frei gesetzt:
         11 = alle Bedienelemente (Teilen, Chat, Video, Termin, Reiter, Buchen)
         12 = dieses Overlay
         15 = die KI-Kennzeichnung
         20 = die Sprechblasen beim Zeigen

       ÜBER 11, damit das aufgelegte Bild GANZ zu sehen ist. Mit dem früheren
       Wert 10 stanzten sich die Knöpfe sichtbar durch das Bild - es sah
       zerschnitten aus, obwohl es die ganze Karte deckte.

       UNTER 15, weil die KI-Kennzeichnung sichtbar bleiben MUSS: Eine
       KI-veränderte Darstellung eines echten Menschen ohne Hinweis
       auszulegen, ist genau das, was Art. 50 Abs. 4 KI-VO verbietet. Wer
       diesen Wert erhöht, verdeckt sie.

       Bedienbar bleibt trotzdem alles: pointer-events:none lässt jeden Klick
       zu dem durch, was darunter liegt. Die Knöpfe sitzen an derselben Stelle,
       an der das aufgelegte Bild sie zeigt. */
    z-index: 12;
    pointer-events: none;
    /* Dieselbe Rundung wie die Karte darunter. Ohne diese Zeile lagen die vier
       Ecken des aufgelegten Bildes RECHTECKIG über den abgerundeten
       Kartenecken - und bei KI-Fassungen sind sie schwarz: Die Vorlage aus der
       Engine hat dort transparente Pixel (die Rundung entsteht per Maske), und
       ein Bildmodell sieht in Transparenz kein Bild und füllt sie mit Schwarz.
       Gemessen am 04.08.2026 an allen Fassungen von Profil 463: (0,1,2) bei
       voller Deckkraft, also vier schwarze Zipfel auf heller Karte.

       inherit statt einer festen Zahl, weil das Overlay mit inset:0 exakt auf
       der Karte liegt und deren Radius aus dem Betreiber-Design kommt - eine
       eigene Zahl hier liefe beim nächsten Design-Wechsel auseinander. */
    border-radius: inherit;
}

/* Hinweis fürs nächste Mal: Die Bild-Optimierung packt das Overlay in ein
   <picture>. Das ist inline und 0 px hoch, stört aber nicht - das Bild darin
   ist absolut gesetzt und hängt am Karten-Rahmen, nicht am <picture>. Eine
   Sonderregel dafür braucht es also nicht. */

/* Der Knopf-Stapel auf dem Bild bleibt UNTER dem Overlay (12).
   Die frühere 20 stammt aus der Zeit, als die Knöpfe sichtbar über einer
   aufgelegten Fassung stehen sollten. Gewollt ist das Gegenteil: Das Bild
   deckt die ganze Karte, die Knöpfe liegen unsichtbar an ihrer Stelle
   darunter und bleiben über pointer-events:none des Overlays bedienbar.
   Wirksam war die 20 ohnehin nie - die Karten-CSS setzt den Stapel auf 3. */
.partnerActionStack {
    z-index: 3;
}

#Community-Partner .partner-card h4,
.partner-card.item h4 {
    font-size: var(--cod-font-card-title-size, 1.3rem);
    font-weight: var(--cod-font-card-title-wt, 700);
    line-height: var(--cod-font-card-title-lh, 1.3);
    color: var(--cod-name-color, var(--cod-title-color, var(--cod-color-text, #4d4d4d)));
    font-family: var(--cod-font-card-title, inherit);
    background: var(--cod-name-bg, transparent);
    padding: var(--cod-name-pad, 0);
    border: var(--cod-name-border-width, 0px) solid var(--cod-name-border-color, transparent);
    border-radius: var(--cod-name-border-radius, 0px);
    box-shadow: 0 var(--cod-name-shadow, 0px) var(--cod-name-shadow, 0px) var(--cod-name-shadow-color, var(--cod-shadow-color, rgba(31, 65, 102, 0.12)));
    opacity: max(1, var(--cod-name-opacity, 1));
    transition: all var(--cod-name-transition, 300ms) var(--cod-name-ease, ease);
    text-transform: var(--cod-name-text-transform, none);
    margin: 0;
}

#Community-Partner .partner-card.item:hover,
.partner-card.item:hover {
    box-shadow: var(--cod-shadow-card-hover);
    transform: translateY(var(--cod-card-hover-translate, 0px));
}

#Community-Partner .partner-card h4:hover,
.partner-card.item h4:hover {
    color: var(--cod-name-hover-color, currentColor);
    background: var(--cod-name-hover-bg, var(--cod-name-bg, transparent));
    transform: translateY(var(--cod-name-hover-translate, 0px)) scale(var(--cod-name-hover-scale, 1));
    opacity: var(--cod-name-hover-opacity, 1);
}

.partner-card.item .partnerRolle:hover {
    color: var(--cod-rolle-hover-color, currentColor);
    background: var(--cod-rolle-hover-bg, var(--cod-rolle-bg, transparent));
    transform: translateY(var(--cod-rolle-hover-translate, 0px)) scale(var(--cod-rolle-hover-scale, 1));
    opacity: var(--cod-rolle-hover-opacity, 1);
}

#Community-Partner .partner-card.item:active,
.partner-card.item:active {
    box-shadow: var(--cod-shadow-card);
    transform: translateY(var(--cod-card-active-translate, 0px)) scale(var(--cod-card-active-scale, 1));
    opacity: var(--cod-card-active-opacity, 1);
}

#Community-Partner .partner-card h4:active,
.partner-card.item h4:active {
    color: var(--cod-name-active-color, currentColor);
    background: var(--cod-name-active-bg, var(--cod-name-bg, transparent));
    transform: translateY(var(--cod-name-active-translate, 0px)) scale(var(--cod-name-active-scale, 1));
    opacity: var(--cod-name-active-opacity, 1);
}

.partner-card.item .partnerRolle:active {
    color: var(--cod-rolle-active-color, currentColor);
    background: var(--cod-rolle-active-bg, var(--cod-rolle-bg, transparent));
    transform: translateY(var(--cod-rolle-active-translate, 0px)) scale(var(--cod-rolle-active-scale, 1));
    opacity: var(--cod-rolle-active-opacity, 1);
}

.partner-card.item .partnerRolle {
    color: var(--cod-rolle-color, var(--cod-color-pink, #fb4c95));
    background: var(--cod-rolle-bg, transparent);
    font-size: var(--cod-font-accent-size, var(--cod-font-body-size, inherit));
    font-size: var(--cod-font-card-rolle-size, var(--cod-font-accent-size, var(--cod-font-body-size, inherit)));
    font-family: var(--cod-font-accent, var(--cod-font-body, inherit));
    font-family: var(--cod-font-card-rolle);
    padding: var(--cod-rolle-pad, 0);
    border: var(--cod-rolle-border-width, 0px) solid var(--cod-rolle-border-color, transparent);
    border-radius: var(--cod-rolle-border-radius, 0px);
    box-shadow: 0 var(--cod-rolle-shadow, 0px) var(--cod-rolle-shadow, 0px) var(--cod-shadow-color, rgba(31, 65, 102, 0.12));
    opacity: var(--cod-rolle-opacity, 1);
    transition: all var(--cod-rolle-transition, 300ms) var(--cod-rolle-ease, ease);
    margin: 0;
}

.partner-card.item .creator-distance {
    background: var(--cod-location-bg, transparent);
    font-size: var(--cod-font-creator-distance-size, var(--cod-font-body-size, inherit));
    font-size: var(--cod-font-card-location-size, var(--cod-font-creator-distance-size, var(--cod-font-body-size, inherit)));
    font-family: var(--cod-font-creator-distance, var(--cod-font-body, inherit));
    font-family: var(--cod-font-card-location);
    padding: var(--cod-location-pad, 0);
    border: var(--cod-location-border-width, 0px) solid var(--cod-location-border-color, transparent);
    border-radius: var(--cod-location-border-radius, 0px);
    box-shadow: 0 var(--cod-location-shadow, 0px) var(--cod-location-shadow, 0px) var(--cod-shadow-color, rgba(31, 65, 102, 0.12));
    opacity: var(--cod-location-opacity, 1);
    transition: all var(--cod-location-transition, 300ms) var(--cod-location-ease, ease);
    margin: 0;
}

.partner-card.item .creator-distance:hover {
    color: var(--cod-location-hover-color, currentColor);
    background: var(--cod-location-hover-bg, var(--cod-location-bg, transparent));
    transform: translateY(var(--cod-location-hover-translate, 0px)) scale(var(--cod-location-hover-scale, 1));
    opacity: var(--cod-location-hover-opacity, 1);
}

.partner-card.item .creator-distance:active {
    color: var(--cod-location-active-color, currentColor);
    background: var(--cod-location-active-bg, var(--cod-location-bg, transparent));
    transform: translateY(var(--cod-location-active-translate, 0px)) scale(var(--cod-location-active-scale, 1));
    opacity: var(--cod-location-active-opacity, 1);
}

.partner-card.item .partnerSMWrap {
    margin-top: auto;
}