/*
 * partner-card.css
 * Kanonische Partner-Karten-CSS fuer das Stufe-B-Karussell (cod-embed).
 *
 * Quelle der Wahrheit: cod-partner-directory.php (Inline-<style>).
 * Umscoping: #Community-Partner -> .cod-pkrs-owl (Karussell-Wrapper).
 * Grid-/Container-Layoutregeln der Directory werden NICHT uebernommen
 * (das Karussell-Layout macht Owl). Nur die interne Karten-Optik.
 *
 * Farb-/Schrift-Tokens kommen aus embed-design.css (--cod-*).
 */

/* ── CSS-Variablen lokal definieren (analog Directory) ── */
.cod-pkrs-owl {
    --cod-blue:     var(--cod-color-accent-blue, #3598DB);
    --cod-blue-dark: var(--cod-info, #2b86c5);
}

/* ── Karte aussen ── */
.cod-pkrs-owl .partner-card.item {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--cod-card-bg, #fff);
    text-align: center;
    border-radius:
        var(--cod-card-border-radius-top-left,    var(--cod-card-border-radius, var(--cod-card-radius, 5px)))
        var(--cod-card-border-radius-top-right,   var(--cod-card-border-radius, var(--cod-card-radius, 5px)))
        var(--cod-card-border-radius-bottom-right, var(--cod-card-border-radius, var(--cod-card-radius, 5px)))
        var(--cod-card-border-radius-bottom-left,  var(--cod-card-border-radius, var(--cod-card-radius, 5px)));
    /* Einheitlicher Karten-Schatten (siehe cod-plugin-frontend-bundle.css).
       Bewusst KEINE eigene Formel mehr: Die alte rechnete den Wert aus
       --cod-card-shadow und nahm die Dashboard-Farbe volldeckend - das war
       der graue Klotz unter der Karte. */
    box-shadow: var(--cod-shadow-card);
    transition: box-shadow .22s ease;
    /* Rahmen-Kette wie bei der Angebote-Karte (02.08.2026). Vorher stand hier
       border:none - ein Rahmen-Regler wäre damit wirkungslos gewesen
       (Fehlerklasse D: der Wert stimmt, nur trägt er nicht). Standard bleibt
       0px/transparent, optisch bleibt also alles gleich, solange der Betreiber
       nichts einstellt. */
    border: var(--cod-card-border-width, 0px) solid var(--cod-card-border-color, transparent);
    /* Festes Karten-Seitenverhaeltnis 3:2 (Hochformat) -> Hoehe = Breite x 1.5.
       Inhalt verteilt sich (Texte oben, Social-Icons + Buttons unten, s. .partnerContent). */
    height: auto !important;
    aspect-ratio: 2 / 3 !important;
    overflow: hidden;
}

/* ── Bild-Bereich ── */
.cod-pkrs-owl .partnerImageWrap {
    position: relative;
    flex: 0 0 auto;
    width: 100%;
    overflow: hidden !important;
    /* Feste Ratio: das Karussell-Bild ist owl-lazy (data-src) und hat vor dem
       Laden keine Hoehe. --cod-card-ratio ist global 'auto' -> wuerde die
       Huelle kollabieren (Bild verschwindet). 4:3 = Profilbild 800x600.
       !important noetig: das mitgeladene cod-plugin-frontend-bundle.css hat
       .partner-card.item .partnerImageWrap{aspect-ratio:var(--cod-card-ratio,4/3)}
       (3 Klassen = hoehere Spezifitaet als unser .cod-pkrs-owl .partnerImageWrap)
       und wuerde sonst mit --cod-card-ratio:auto die Huelle kollabieren. */
    /* Standardformat der Plattform seit 13.08.2026: 1,426 statt 4:3. Auf
       diesen Bildern sind Gesichter - deshalb ist der Bereich im selben Schritt
       ans Ausschnitt-System gekommen (Zweck 'partner'), damit der Betreiber die
       Bildmitte selbst setzen kann statt sie zu erleiden. */
    /* DIE ZAHL STEHT HIER DIREKT, NICHT ALS var(--cod-card-ratio, ...) - das war am
       13.08.2026 ein Live-Schaden von wenigen Minuten: Das Token ist global auf
       'auto' gesetzt. var() nimmt dann diesen Wert und den Rueckfall NIE, die
       Huelle kollabiert auf Hoehe 0 und das Bild verschwindet. Ein Rueckfallwert
       greift nur, wenn die Variable GAR NICHT gesetzt ist - nicht, wenn sie auf
       etwas Unbrauchbares gesetzt ist. */
    aspect-ratio: 365 / 256 !important;
    border-radius:
        var(--cod-card-border-radius-top-left,    var(--cod-card-border-radius, var(--cod-card-radius, 5px)))
        var(--cod-card-border-radius-top-right,   var(--cod-card-border-radius, var(--cod-card-radius, 5px)))
        var(--cod-card-image-radius-bottom-right,  var(--cod-card-border-radius-bottom-right, var(--cod-card-border-radius, var(--cod-card-radius, 5px))))
        var(--cod-card-image-radius-bottom-left,   var(--cod-card-border-radius-bottom-left,  var(--cod-card-border-radius, var(--cod-card-radius, 5px))));
}

.cod-pkrs-owl .partnerImageWrap img {
    border-radius: inherit;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    /* Das cod-plugin-frontend-bundle.css setzt global:
         .partner-card.item img { opacity:0; transition:opacity .2s ease; }
       und erst .partner-card.item img[src] { opacity:1; }.
       Diese Regel greift auch auf owl-lazy-Bilder, die ihr src erst nach dem
       Eager-Load erhalten. Owl klont die Karten VOR dem Eager-Load, sodass
       geklonte Items ggf. kein src-Attribut bekommen und bei opacity:0 bleiben.
       Hier explizit opacity:1 forcieren, damit das Bild immer sichtbar ist
       (das Eager-Load-Script setzt src zuverlaessig, Transition ist nicht noetig). */
    opacity: 1 !important;
    transition: none !important;
}

/* ── Action-Stack (Video/Chat/Teilen-Buttons auf dem Bild) ── */
.cod-pkrs-owl .partnerActionStack {
    position: absolute;
    right: calc(10px * var(--cod-card-ui-scale, 1));
    bottom: calc(10px * var(--cod-card-ui-scale, 1));
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: calc(var(--cod-title-icon-gap, 10px) * var(--cod-card-ui-scale, 1));
}

.cod-pkrs-owl .partnerActionStack .partnerSM a {
    /* Solide Fuellung (wie die Social-Icons unten) — KEIN color-mix: aelteres bzw.
       teils fehlerhaftes iPad-Safari rendert color-mix transparent. So ist der
       Hintergrund auf allen Geraeten einheitlich blau. */
    background-color: var(--cod-title-icon-bg, var(--cod-color-accent-blue, #3598DB)) !important;
    border-radius: calc(8px * var(--cod-card-ui-scale, 1)) !important;
    width:  calc(var(--cod-title-icon-box-size, var(--cod-social-icon-box-size, 40px)) * var(--cod-card-ui-scale, 1));
    height: calc(var(--cod-title-icon-box-size, var(--cod-social-icon-box-size, 40px)) * var(--cod-card-ui-scale, 1));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    opacity: var(--cod-partner-action-opacity, 1);
    transition: transform .15s ease, box-shadow .15s ease, background .2s ease, opacity .2s ease;
    /* Der Knopf ist technisch ein Link - ohne diese Zeile erbt er die
       Link-Optik der Community-Seite und bekommt beim Zeigen eine farbige
       Unterstreichung quer durch die Entfernungszahl. */
    text-decoration: none !important;
}

.cod-pkrs-owl .partnerActionStack .partnerSM a:hover,
.cod-pkrs-owl .partnerActionStack .partnerSM a:focus-visible {
    background-color: var(--cod-title-icon-bg, var(--cod-color-accent-blue, #3598DB)) !important;
    text-decoration: none !important;
    /* Wert und Schatten identisch zu den Icons der unteren Leiste
       (.partnerSMWrap) — beide Gruppen sind für den Betrachter eine Einheit.
       ACHTUNG: 1.03 ist hier der Fallback, weil für die untere Gruppe in den
       Widget-Einstellungen 1.03 hinterlegt ist und die Einstellung den Fallback
       im CSS immer schlägt. Wer den Wert ändern will, ändert ihn in den
       Widget-Einstellungen für BEIDE Gruppen — sonst driften sie wieder
       auseinander (genau das ist beim ersten Angleichversuch passiert). */
    transform: scale(var(--cod-title-icon-hover-scale, 1.03)) !important;
    box-shadow: var(--cod-shadow-icon);
    /* Ring mit DURCHSICHTIGER Luecke (outline-offset). */
    outline: var(--cod-title-icon-hover-ring-width, 3px) solid var(--cod-title-icon-hover-ring, rgba(53,152,219,.65));
    outline-offset: var(--cod-title-icon-hover-gap, 2px);
}

/* Antippen: die einzige Rückmeldung auf Geräten ohne Zeiger — dort gibt es kein
   :hover, das Icon reagierte bisher also beim Tippen sichtbar gar nicht. */
.cod-pkrs-owl .partnerActionStack .partnerSM a:active {
    transform: scale(var(--cod-title-icon-active-scale, 0.97)) !important;
}

.cod-pkrs-owl .partnerActionStack .partnerSM svg,
.cod-pkrs-owl .partnerActionStack .partnerSM .svg-inline--fa {
    width:      calc(var(--cod-title-icon-glyph-size, calc(var(--cod-title-icon-box-size, var(--cod-social-icon-box-size, 40px)) * 0.5)) * var(--cod-card-ui-scale, 1)) !important;
    height:     calc(var(--cod-title-icon-glyph-size, calc(var(--cod-title-icon-box-size, var(--cod-social-icon-box-size, 40px)) * 0.5)) * var(--cod-card-ui-scale, 1)) !important;
    min-width:  calc(var(--cod-title-icon-glyph-size, calc(var(--cod-title-icon-box-size, var(--cod-social-icon-box-size, 40px)) * 0.5)) * var(--cod-card-ui-scale, 1)) !important;
    min-height: calc(var(--cod-title-icon-glyph-size, calc(var(--cod-title-icon-box-size, var(--cod-social-icon-box-size, 40px)) * 0.5)) * var(--cod-card-ui-scale, 1)) !important;
    max-width: none !important;
    max-height: none !important;
    flex: 0 0 auto;
    display: block;
}

.cod-pkrs-owl .partnerActionStack .partnerSM svg *,
.cod-pkrs-owl .partnerActionStack .partnerSM .svg-inline--fa * {
    fill:   var(--cod-title-icon-fill, var(--cod-icon-fill, #fff)) !important;
    stroke: var(--cod-title-icon-fill, var(--cod-icon-fill, #fff)) !important;
}

/* ── Text-Inhalt ── */
.cod-pkrs-owl .partner-card .partnerContent {
    flex: 1 1 auto;
    min-height: 0;
    /* Unten mehr Luft als oben/seitlich: Die Reiter standen sonst zu dicht
       an der Kartenkante (Nutzerentscheidung 01.08.2026). */
    padding: calc(15px * var(--cod-card-ui-scale, 1)) calc(15px * var(--cod-card-ui-scale, 1)) calc(13px * var(--cod-card-ui-scale, 1));
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0;
    text-align: center;
}

/* Name */
.cod-pkrs-owl .partner-card h4 {
    font-size:   max(var(--cod-card-min-font, 13px), calc(var(--cod-font-card-title-size, 1.3rem) * var(--cod-card-ui-scale, 1)));
    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-shadow-color, rgba(31,65,102,0.12));
    opacity:     var(--cod-name-opacity, 1);
    transition:  all var(--cod-name-transition, 300ms) var(--cod-name-ease, ease);
    margin: 0;
    /* Höchstens zwei Zeilen, dann Auslassung. Vorname und Nachname erlauben
       zusammen 61 Zeichen, in eine Zeile passen bei 360 px aber nur rund 21 —
       ohne Begrenzung wären es drei bis vier Zeilen und die Karte platzt.
       flex-shrink: 0 ist der wichtigere Teil: Die Karte hat feste Höhe
       (Verhältnis 2:3) und ist ein Flex-Container; ohne das quetscht Flexbox die
       Zeile zusammen, statt sie abzuschneiden — gemessen 9 px Höhe bei 26,4 px
       Zeilenhöhe, und zwar schon mit normalem Text. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    flex-shrink: 0;
    /* ÜBERLANGE WÖRTER UMBRECHEN (16.08.2026, am Bild gefunden).
       line-clamp begrenzt die ZEILENZAHL, nicht die Zeilenbreite. Ein Name ohne
       Leerzeichen — "Donaudampfschifffahrtsgesellschaft" — hat keine Stelle zum
       Umbrechen und läuft deshalb seitlich aus der Karte; beschnitten wird er
       dann hart von overflow:hidden, ohne Auslassungspunkte, und zwar auf
       BEIDEN Seiten, weil der Text zentriert ist.
       Sichtbar wurde das erst, als der Kontoname im User-Modus 80 statt 24
       Zeichen tragen darf. Jede Messung am h4-Rechteck meldete dabei "kein
       Überstand" — richtig, denn das Rechteck ist ja bereits beschnitten; über
       die Karte lief der TEXT darin. Gefunden allein auf dem Bild.
       anywhere statt break-word: break-word bricht ein langes Wort nur, wenn es
       allein auf einer Zeile steht — hier stehen Vor- und Nachname zusammen. */
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* KURZE NAMEN WERDEN GRÖSSER GESETZT (16.08.2026).
   Der Namensblock ist immer zwei Zeilen hoch, damit die Karten einer Reihe
   fluchten - ein kurzer Name sass darin als schmale Zeile in doppelt so viel
   Platz. Die Stufe berechnet der Server aus dem Namen (cod_name_html) und legt
   ihn dafür in diese Hülle.
   Das "1em" ist der Kern: Es bezieht sich auf die WIRKLICHE Grösse des h4 -
   und die kommt nicht aus dieser Datei, sondern aus dem Elementor-Regler des
   Betreibers, dessen Selektor spezifischer ist als jeder von uns (gemessen:
   unsere Rechnung 32 px, auf dem Bildschirm 23 px). Ein Faktor auf unsere
   eigene Grösse wäre wirkungslos gewesen, ein em ist es nie.
   Nebeneffekt und zweiter Grund: Die Höhe des Blocks rechnet weiterhin in em
   des h4 und bleibt deshalb von der Stufe unberührt. */
.cod-name-stufe {
    font-size: calc(1em * var(--cod-name-scale, 1));
    /* HIER SITZT SEIT 16.08.2026 DIE ZEILEN-KLAMMER, nicht mehr am h4.
       Vorher stand hier display:block - richtig, solange die Hülle nur die
       Schriftgrösse trug.
       Die Klammerung musste vom h4 hierher wandern: Das h4 ist seit dem
       13.08.2026 ein Flex-Container (der Name sitzt mittig in seinem
       zweizeiligen Block), und -webkit-line-clamp wirkt allein mit
       display:-webkit-box. Am h4 war es damit wirkungslos, und ein
       dreizeiliger Name lief oben und unten aus dem Block heraus - am
       Bildschirm fehlte ausgerechnet der Vorname.
       ZWILLING: Dieselbe Regel steht im Plugin in cod_name_stufe_css()
       (includes/general/cod-name-stufen.php) und wird von dort für die
       Zentrale ausgegeben. Beide immer gemeinsam ändern. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    line-height: inherit;
}

/* Rolle */
.cod-pkrs-owl .partner-card .partnerRolle {
    color:       var(--cod-rolle-color, var(--cod-color-pink, #fb4c95));
    font-size:   max(var(--cod-card-min-font, 13px), calc(var(--cod-font-card-rolle-size, var(--cod-font-accent-size, var(--cod-font-body-size, 1rem))) * var(--cod-card-ui-scale, 1)));
    font-family: var(--cod-font-card-rolle, var(--cod-font-accent, var(--cod-font-body, inherit)));
    line-height: var(--cod-font-body-lh, 1.6);
    /* Gleicher Abstand nach oben wie die Beschreibung nach der Rolle (je 6px,
       Nutzerentscheidung 29.07.2026) - vorher 0 gegen 2px, was ungleich wirkte. */
    margin: -1px 0 0;
    /* IMMER einzeilig. Das Eingabefeld erlaubt 60 Zeichen, in eine Zeile passen je
       nach Buchstabenbreite 22 bis 34 — ein Zeichenlimit könnte das nie sauber
       treffen. Gemessen wurden bei voller Ausnutzung 3,7 Zeilen, was die Karte
       sprengt (Flexbox staucht dann Name und Bild). Der volle Text steht im
       Profil-Popup. flex-shrink: 0 verhindert, dass die Zeile gequetscht wird. */
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
    max-width:     100%;
    flex-shrink:   0;
}

/* Rollenbeschreibung (mehrzeilig, abgeschnitten + "Mehr anzeigen") */
.cod-pkrs-owl .partner-card .partnerRoleDescription {
    color:        var(--cod-rolle-beschreibung-color, var(--cod-color-muted, #657085));
    background:   var(--cod-rolle-beschreibung-bg, transparent);
    font-size:    max(var(--cod-card-min-font, 13px), calc(var(--cod-font-card-rolle-beschreibung-size, var(--cod-font-body-size, .875rem)) * var(--cod-card-ui-scale, 1)));
    font-family:  var(--cod-font-card-rolle-beschreibung, var(--cod-font-body, inherit));
    line-height:  1.55;
    padding:      var(--cod-rolle-beschreibung-pad, 0);
    border:       var(--cod-rolle-beschreibung-border-width, 0px) solid var(--cod-rolle-beschreibung-border-color, transparent);
    border-radius: var(--cod-rolle-beschreibung-border-radius, 0px);
    box-shadow:   0 var(--cod-rolle-beschreibung-shadow, 0px) var(--cod-rolle-beschreibung-shadow, 0px) var(--cod-shadow-color, rgba(31,65,102,.12));
    opacity:      var(--cod-rolle-beschreibung-opacity, 1);
    white-space:  normal;
    text-align:   center;
    margin:       4px 0 0;
}

.cod-pkrs-owl .partner-card .partnerRoleDescriptionText {
    overflow:         hidden;
    text-overflow:    ellipsis;
    display:          -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp:       2;
    /* Immer GENAU zwei Zeilen hoch — min und max zusammen.
       Die Kappung allein war eine Obergrenze: Ein Partner mit einer Zeile
       Beschreibung ergab eine niedrigere Karte als einer mit zweien. Nebeneinander
       waren die beiden Karten dadurch unterschiedlich hoch und die Knöpfe unten
       hatten verschiedenen Abstand zur Kante (gemessen am 02.08.2026 auf der
       Startseite). Das feste Seitenverhältnis 2:3 kann das nicht auffangen:
       Bei einem Flex-Element gilt min-height:auto, der Inhalt überstimmt also
       aspect-ratio. Zwei reservierte Zeilen sind der schonende Weg — die Alternative
       (min-height:0 auf der Karte) würde den Inhalt am unteren Rand abschneiden,
       und zuerst trifft es die Knöpfe. */
    min-height:       calc(1.55em * 2);
    max-height:       calc(1.55em * 2);
}
/* Aufgeklappt darf der Text wachsen — dort gilt die Reservierung nicht. */
.cod-pkrs-owl .partner-card.cod-pkrs-expanded .partnerRoleDescriptionText {
    min-height: 0;
}
/* Zentriert sieht bei der zweizeiligen Vorschau gut aus (Zeile 300) - beim
   Ausklappen macht dieselbe Regel aus langem Fließtext eine Wand aus
   zentrierten Zeilen (30.08.2026 gemeldet). Nur der Text-Container, nicht
   die äußere .partnerRoleDescription: Der Zuklapp-Pfeil daneben bleibt
   dadurch mittig. Aufzählung und Zitat sind bereits über ihre eigenen
   text-align:left-Regeln weiter unten unberührt. */
.cod-pkrs-owl .partner-card.cod-pkrs-expanded .partnerRoleDescriptionText {
    text-align: left;
}

/* ── Formatierte Rollenbeschreibung: Links, Aufzählungen, Zitate ─────────────
   ZWILLING zu cod_role_description_css() in
   community-of-dreams/includes/general/cod-textformat.php, ausgegeben im
   CSS-Block von cod-partner-karusell.php. Beide immer gemeinsam ändern.

   WARUM DIE FARBE GEERBT WIRD statt aus einer Akzent-Variablen: Der Betreiber
   stellt die Akzentfarbe selbst ein; auf dieser Community ist
   --cod-color-accent-blue = #fb4c95 (2,9:1 auf Weiss). Ein Link, dessen
   Erkennbarkeit an einer frei wählbaren Farbe hängt, ist bei der nächsten Marke
   unsichtbar — deshalb WCAG 1.4.1: unterstrichen statt eingefärbt. Dieselbe
   Entscheidung wie bei der Anbieterzeile in cod-embed-partner-popup.php.

   WAS ES BEHEBT (29.08.2026 gemeldet: "Links sollen auch funktionieren"): Das
   Theme der Community-Seiten setzt a { text-decoration: none }. Ein Link in der
   Rollenbeschreibung stand deshalb genau so da wie der Text daneben — man sah
   ihn nicht, also klickte ihn niemand. Und eine Aufzählung hatte weder Einzug
   noch Punkte, weil das Theme-Reset list-style entfernt. */
.cod-pkrs-owl .partner-card .partnerRoleDescriptionText a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.cod-pkrs-owl .partner-card .partnerRoleDescriptionText a:hover,
.cod-pkrs-owl .partner-card .partnerRoleDescriptionText a:focus-visible {
    text-decoration: none;
}
.cod-pkrs-owl .partner-card .partnerRoleDescriptionText ul,
.cod-pkrs-owl .partner-card .partnerRoleDescriptionText ol {
    margin: .35em 0;
    padding-left: 1.2em;
    text-align: left;
}
.cod-pkrs-owl .partner-card .partnerRoleDescriptionText ul { list-style: disc; }
.cod-pkrs-owl .partner-card .partnerRoleDescriptionText ol { list-style: decimal; }
.cod-pkrs-owl .partner-card .partnerRoleDescriptionText li { margin: .12em 0; }
.cod-pkrs-owl .partner-card .partnerRoleDescriptionText blockquote {
    margin: .35em 0;
    padding-left: .6em;
    text-align: left;
    border-left: 2px solid currentColor;
    opacity: .9;
}

/* "Mehr anzeigen"-Button */
.cod-pkrs-owl .partner-card .partnerRoleDescriptionMore {
    margin:       8px auto 0;
    padding:      var(--cod-mehr-anzeigen-pad, 0);
    border:       var(--cod-mehr-anzeigen-border-width, 0px) solid var(--cod-mehr-anzeigen-border-color, transparent);
    border-radius: var(--cod-mehr-anzeigen-border-radius, 0px);
    background:   var(--cod-mehr-anzeigen-bg, transparent);
    color:        var(--cod-mehr-anzeigen-color, var(--cod-color-accent-blue, #3598DB));
    display:      inline-flex;
    align-items:  center;
    justify-content: center;
    gap: 8px;
    font-family:  var(--cod-font-mehr-anzeigen, inherit);
    font-size:    max(var(--cod-card-min-font, 13px), var(--cod-font-mehr-anzeigen-size, calc(.92em * var(--cod-card-ui-scale, 1))));
    font-weight:  var(--cod-font-mehr-anzeigen-weight, 600);
    cursor:       pointer;
    text-decoration: none;
    box-shadow:   0 var(--cod-mehr-anzeigen-shadow, 0px) var(--cod-mehr-anzeigen-shadow, 0px) var(--cod-shadow-color, rgba(31,65,102,0.12));
    opacity:      var(--cod-mehr-anzeigen-opacity, 1);
    transition:   all var(--cod-mehr-anzeigen-transition, 300ms) var(--cod-mehr-anzeigen-ease, ease);
}

.cod-pkrs-owl .partner-card .partnerRoleDescriptionMore:hover,
.cod-pkrs-owl .partner-card .partnerRoleDescriptionMore:focus {
    color:      var(--cod-mehr-anzeigen-hover-color, var(--cod-blue-dark, #2b86c5));
    background: var(--cod-mehr-anzeigen-hover-bg, var(--cod-mehr-anzeigen-bg, transparent));
    transform:  translateY(var(--cod-mehr-anzeigen-hover-translate, 0px)) scale(var(--cod-mehr-anzeigen-hover-scale, 1));
    opacity:    var(--cod-mehr-anzeigen-hover-opacity, 1);
    outline:    none;
}

.cod-pkrs-owl .partner-card .partnerRoleDescriptionMoreIcon {
    display:      inline-flex;
    align-items:  center;
    justify-content: center;
    width:  16px;
    height: 16px;
    flex: 0 0 16px;
}

.cod-pkrs-owl .partner-card .partnerRoleDescriptionMoreIcon svg,
.cod-pkrs-owl .partner-card .partnerRoleDescriptionMoreIcon .svg-inline--fa {
    width: 16px;
    height: 16px;
    display: block;
}

.cod-pkrs-owl .partner-card .partnerRoleDescriptionMoreIcon svg *,
.cod-pkrs-owl .partner-card .partnerRoleDescriptionMoreIcon .svg-inline--fa * {
    fill:   currentColor !important;
    stroke: currentColor !important;
}

/* Standort-Zeile */
.cod-pkrs-owl .partner-card .creator-distance {
    color:       var(--cod-location-color, var(--cod-color-muted, #657085));
    font-size:   max(var(--cod-card-min-font, 13px), calc(var(--cod-font-card-location-size, var(--cod-font-creator-distance-size, var(--cod-font-body-size, 1rem))) * var(--cod-card-ui-scale, 1)));
    font-family: var(--cod-font-card-location, var(--cod-font-creator-distance, var(--cod-font-body, inherit)));
    line-height: var(--cod-font-body-lh, 1.6);
    margin: 0;
}

.cod-pkrs-owl .creator-distance-link {
    color:           var(--cod-location-color, var(--cod-color-accent-blue, #3598DB)) !important;
    cursor:          pointer;
    text-decoration: none;
    font-weight:     600;
}

.cod-pkrs-owl .creator-distance-link:hover,
.cod-pkrs-owl .creator-distance-link:focus-visible {
    text-decoration: underline;
    color: var(--cod-location-hover-color, var(--cod-location-color, var(--cod-color-accent-blue, #3598DB))) !important;
}

/* ── Social / Standort-Icons (untere Leiste) ── */
.cod-pkrs-owl .partnerSMWrap {
    display:      flex;
    flex-wrap:    wrap;
    justify-content: center;
    align-items:  center;
    gap:          calc(var(--cod-social-icon-gap, 12px) * var(--cod-card-ui-scale, 1));
    margin:       calc(6px * var(--cod-card-ui-scale, 1)) 0 0;
    margin-top:   auto;
}

.cod-pkrs-owl .partnerSMWrap .partnerSM {
    margin: 0;
    flex: 0 0 auto;
}

.cod-pkrs-owl .partnerSMWrap .partnerSM a {
    width:          calc(var(--cod-social-icon-box-size, var(--cod-social-icon-size, 40px)) * var(--cod-card-ui-scale, 1));
    height:         calc(var(--cod-social-icon-box-size, var(--cod-social-icon-size, 40px)) * var(--cod-card-ui-scale, 1));
    border-radius:  calc(var(--cod-social-icon-radius, 8px) * var(--cod-card-ui-scale, 1));
    display:        inline-flex;
    align-items:    center;
    justify-content: center;
    box-shadow:     var(--cod-shadow-icon);
    position:       relative;
    /* Ruhiger Grundzustand: Die Fläche ist nur zart getönt (::before mit
       niedriger Deckkraft), das Zeichen trägt die Markenfarbe. Gefüllt wird
       erst beim Zeigen oder Antippen. Vier gefüllte Quadrate nebeneinander
       wogen sonst schwerer als alles andere in der unteren Kartenhälfte.
       Die Tönung läuft über ein Pseudo-Element statt über color-mix() —
       color-mix mit var() macht die Deklaration in Safari unter 16.2 zur
       Laufzeit ungültig (siehe Browser-Baseline). */
    background-color: transparent;
    opacity:        var(--cod-social-icon-opacity, 1);
    transition:     transform .15s ease, box-shadow .2s ease, background .2s ease, border-radius .2s ease;
}

.cod-pkrs-owl .partnerSMWrap .partnerSM svg,
.cod-pkrs-owl .partnerSMWrap .partnerSM .svg-inline--fa {
    width:      calc(var(--cod-social-icon-glyph-size, calc(var(--cod-social-icon-box-size, var(--cod-social-icon-size, 40px)) * 0.5)) * var(--cod-card-ui-scale, 1)) !important;
    height:     calc(var(--cod-social-icon-glyph-size, calc(var(--cod-social-icon-box-size, var(--cod-social-icon-size, 40px)) * 0.5)) * var(--cod-card-ui-scale, 1)) !important;
    min-width:  calc(var(--cod-social-icon-glyph-size, calc(var(--cod-social-icon-box-size, var(--cod-social-icon-size, 40px)) * 0.5)) * var(--cod-card-ui-scale, 1)) !important;
    min-height: calc(var(--cod-social-icon-glyph-size, calc(var(--cod-social-icon-box-size, var(--cod-social-icon-size, 40px)) * 0.5)) * var(--cod-card-ui-scale, 1)) !important;
    max-width:  none !important;
    max-height: none !important;
    flex: 0 0 auto;
    display: block;
}

/* Getönte Fläche hinter dem Zeichen. ::after ist fuer die Trefferfläche belegt. */
.cod-pkrs-owl .partnerSMWrap .partnerSM a::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--cod-social-icon-bg, var(--cod-color-accent-blue, #3598DB));
    /* Deckkraft der Tönung, einstellbar über --cod-social-icon-rest-tint.
       Sie entscheidet zusammen mit der Zeichenfarbe darüber, ob die Gruppe
       lesbar ist — bei 13 % und blauem Zeichen lag der Kontrast bei 2,7:1
       und damit unter der Grenze von 3:1 für grafische Elemente. */
    opacity: var(--cod-social-icon-rest-tint, .16);
    transition: opacity .2s ease;
}

.cod-pkrs-owl .partnerSMWrap .partnerSM svg,
.cod-pkrs-owl .partnerSMWrap .partnerSM .svg-inline--fa {
    position: relative;
    z-index: 1;
}

/* Zeichenfarbe im Ruhezustand — kommt aus dem Betreiber-Dashboard.
   Feld: Icons 2 (unter dem Inhalt) → "Symbol". Rolle icon2RestFill, die
   --cod-social-icon-rest-fill speist.

   Warum es dieses Feld überhaupt gibt: Vorher war das Zeichen fest an die
   FLÄCHENfarbe gekoppelt — hellblau auf einer 13 % hellblauen Fläche, gemessen
   2,7:1 und damit unter der Grenze von 3:1 für grafische Elemente. Die Icons
   oben auf dem Bild (.partnerActionStack) sind dagegen solide gefüllt mit
   weissem Zeichen und wirken deshalb schärfer; genau dieser Unterschied fiel
   auf der Karte auf.

   Letztes Glied ist bewusst die Flächenfarbe und KEINE fremde Rolle: Ein
   Zwischenstand hing hier an --cod-color-secondary, also an der Farbe der
   Hauptüberschrift — dann wandert die Icon-Farbe mit, sobald der Betreiber
   seine Überschrift umfärbt, und im Dashboard ist davon nichts zu sehen.
   Solange das Feld leer ist, sieht es aus wie vorher; die Verbesserung stellt
   der Betreiber selbst ein.

   Beim Zeigen und Antippen bleibt alles wie gehabt: volle Fläche, Zeichen aus
   dem Feld "Symbol beim Zeigen". */
.cod-pkrs-owl .partnerSMWrap .partnerSM svg *,
.cod-pkrs-owl .partnerSMWrap .partnerSM .svg-inline--fa * {
    fill:   var(--cod-social-icon-rest-fill, var(--cod-social-icon-bg, var(--cod-color-accent-blue, #3598DB)));
    stroke: var(--cod-social-icon-rest-fill, var(--cod-social-icon-bg, var(--cod-color-accent-blue, #3598DB)));
    transition: fill .2s ease, stroke .2s ease;
}

/* Zeigen und Antippen: volle Fläche, weisses Zeichen. */
.cod-pkrs-owl .partnerSMWrap .partnerSM a:hover::before,
.cod-pkrs-owl .partnerSMWrap .partnerSM a:focus-visible::before,
.cod-pkrs-owl .partnerSMWrap .partnerSM a:active::before {
    opacity: 1;
}

.cod-pkrs-owl .partnerSMWrap .partnerSM a:hover svg *,
.cod-pkrs-owl .partnerSMWrap .partnerSM a:focus-visible svg *,
.cod-pkrs-owl .partnerSMWrap .partnerSM a:active svg * {
    fill:   var(--cod-social-icon-fill, var(--cod-icon-fill, #fff));
    stroke: var(--cod-social-icon-fill, var(--cod-icon-fill, #fff));
}

.cod-pkrs-owl .partnerSMWrap .partnerSM a:hover,
.cod-pkrs-owl .partnerSMWrap .partnerSM a:focus-visible {
    transform: scale(var(--cod-social-icon-hover-scale, 1.12));
    background-color: var(--cod-social-icon-hover-bg, var(--cod-social-icon-bg, var(--cod-color-accent-blue, #3598DB)));
    /* Eigenstaendiger Ring mit DURCHSICHTIGER Luecke: outline-offset laesst den
       Hintergrund zwischen Icon und Ring durchscheinen (kein weisser Ring). */
    box-shadow: var(--cod-shadow-icon);
    outline: var(--cod-social-icon-hover-ring-width, 3px) solid var(--cod-social-icon-hover-ring, rgba(53,152,219,.65));
    outline-offset: var(--cod-social-icon-hover-gap, 2px);
}
.cod-pkrs-owl .partnerSMWrap .partnerSM a:hover svg *,
.cod-pkrs-owl .partnerSMWrap .partnerSM a:focus-visible svg * {
    fill:   var(--cod-social-icon-hover-fill, var(--cod-social-icon-fill, var(--cod-icon-fill, #fff)));
    stroke: var(--cod-social-icon-hover-fill, var(--cod-social-icon-fill, var(--cod-icon-fill, #fff)));
}

/* Antippen: siehe Kommentar bei .partnerActionStack — ohne Zeiger ist das die
   einzige sichtbare Rückmeldung. Gleicher Wert wie bei den Reitern unten. */
.cod-pkrs-owl .partnerSMWrap .partnerSM a:active {
    transform: scale(var(--cod-social-icon-active-scale, 0.97));
}

/* Standort-Kästchen mit Entfernung (Zahl + km gestapelt) statt Pin.

   ENTFERNT am 02.08.2026: Hier stand ein zweiter Satz Regeln für
   .partner-distance-box. Diese Klasse hat der Karten-Renderer nie vergeben -
   er schreibt .partner-loc-dist; erzeugt wurde sie einzig vom Demo-Markup der
   Design-Showcase. Dadurch lagen dieselben Angaben an fünf Stellen, und die
   Showcase zeigte einen Chip, den es nirgends gibt: gemessen 14/9 px in Blau
   und Lato statt 19/13 px in Weiss und Arial Rounded.

   WARUM DIE REGELN JETZT HIER STEHEN und nicht mehr im Inline-CSS des
   Widgets: Die Showcase rendert kein Widget, sie zeigt statisches Markup und
   lädt dazu nur CSS-DATEIEN. Alles, was allein im Inline-Block des Shortcodes
   steht, erreicht sie deshalb nie. Beim ersten Anlauf war genau das die Folge:
   Das Markup war richtig, die Gestaltung fehlte - der Chip wäre blau und
   nebeneinander erschienen statt weiss und gestapelt.

   ZWILLING: dieselben Werte stehen in cod-partner-karusell.php der Zentrale
   (die kann diese Datei nicht laden). Immer gemeinsam ändern - ein
   Software-Check vergleicht die beiden Zeilen. */
.cod-pkrs-owl .partner-loc-dist {
    flex-direction: column !important;
    line-height: 1 !important;
    gap: 0 !important;
}
.cod-pkrs-owl .partner-loc-dist .pdb-num {
    font-family: var(--cod-font-card-title, inherit);
    font-size: max(var(--cod-card-min-font, 13px), calc(19px * var(--cod-card-ui-scale, 1)));
    font-weight: 600;
    /* Zahl einen Pixel höher: Bei line-height 1 stehen die beiden Zeilen sehr
       dicht, die Zahl wirkte dadurch nach unten gedrückt. */
    margin-top: -1px;
    color: var(--cod-title-icon-fill, var(--cod-icon-fill, #fff));
}
.cod-pkrs-owl .partner-loc-dist .pdb-unit {
    font-family: var(--cod-font-card-title, inherit);
    font-size: max(var(--cod-card-min-font, 13px), calc(13px * var(--cod-card-ui-scale, 1)));
    font-weight: 600;
    margin-top: 0;
    opacity: .95;
    color: var(--cod-title-icon-fill, var(--cod-icon-fill, #fff));
}

/* ── Standort-Tooltip (standardmaessig versteckt, nur on hover/focus sichtbar) ── */
.partner-loc-tooltip {
    position:   absolute;
    left:       50%;
    bottom:     calc(100% + 8px);
    transform:  translateX(-50%);
    /* Eigene Regler im Widget (--cod-tooltip-*), danach die Dashboard-Rollen.
       Kein Rahmen, kein Hover, kein Aktiv-Zustand: Die Blase ist eine Erklaerung,
       kein Bedienelement. */
    background: var(--cod-tooltip-bg, var(--cod-color-secondary, rgba(34,34,34,.96)));
    color:      var(--cod-tooltip-color, var(--cod-text-on-dark, #fff));
    /* Eigene Schriftart statt geerbter: Der Tooltip haengt sonst an der Schrift
       des body, und die ist je nach Umgebung eine andere - in der Vorschau war
       es der Browser-Standard, also eine Serifenschrift. */
    font-family: var(--cod-font-tooltip, var(--cod-font-card-rolle-beschreibung, var(--cod-font-body, inherit)));
    font-size:  var(--cod-font-tooltip-size, 13px);
    font-weight: var(--cod-font-tooltip-weight, inherit);
    line-height: 1.35;
    padding:    8px 10px;
    /* Radius kommt aus dem Dashboard (Kachel -> Ecken-Radius), nicht aus dem Widget. */
    border-radius: var(--cod-button-radius, 8px);
    white-space: normal;
    /* fit-content statt max-content: max-content berechnet die Wunschbreite OHNE
       Umbruch, max-width kappt sie danach hart — der Text wurde dadurch um 6 px
       beschnitten, statt neu umzubrechen. */
    /* max-content statt fit-content: Bei einem absolut positionierten Element
       bezieht sich fit-content auf den Container - und das ist hier das 40px
       breite Symbol. Die Blase brach dadurch nach zwei, drei Wörtern um, und
       die max-width kam nie zum Tragen. max-content nimmt die Textbreite, die
       max-width kappt sie danach. */
    width:      max-content;
    max-width:  240px;
    text-align: center;
    /* Standardmaessig versteckt -- verhindert Ueberlappung im Karussell.
       pointer-events:auto -> die Blase ist erreichbar/anklickbar; da sie im DOM IM
       Icon-<a> liegt, macht ein Klick darauf dasselbe wie ein Klick aufs Icon
       (Webseite/Chat/Termin/Standort). Im versteckten Zustand (visibility:hidden)
       faengt sie keine Klicks ab. */
    opacity:    0;
    visibility: hidden;
    pointer-events: auto;
    cursor:     pointer;
    transition: opacity .18s ease, visibility .18s ease, transform .18s ease;
    z-index:    20;
    box-shadow: var(--cod-shadow-md);
}

.partner-loc-tooltip::after {
    content:   "";
    position:  absolute;
    left:      50%;
    top:       100%;
    transform: translateX(-50%);
    border:    6px solid transparent;
    border-top-color: var(--cod-tooltip-bg, var(--cod-color-secondary, rgba(34,34,34,.96)));
}

/* Unsichtbare Bruecke ueber die Luecke zwischen Icon und Sprechblase, damit die
   Maus von unten in die Blase wandern kann, ohne den Hover (und damit die Blase)
   zu verlieren. Gilt fuer ALLE Sprechblasen. */
.partner-loc-tooltip::before {
    content:  "";
    position: absolute;
    left:     -6px;
    right:    -6px;
    top:      100%;
    height:   18px;
}

/* Die Blase sitzt mittig über ihrem Icon. Bei den beiden ÄUSSEREN Icons der
   unteren Leiste ragt sie dadurch über die Kartenkante und wird vom
   overflow:hidden der Karte abgeschnitten — auf einer 290 px breiten Karte
   gemessen: links 13 px beim Globus, rechts 30 px beim Kalender ("Termin buchen
   (bald verfügb"). Deshalb richten sich genau diese beiden an ihrer Icon-Kante
   aus; der Zeiger wandert mit, damit er weiter aufs Icon zeigt. */
.cod-pkrs-owl .partnerSMWrap .partnerSM:first-of-type .partner-loc-tooltip {
    left:      0;
    transform: none;
}
.cod-pkrs-owl .partnerSMWrap .partnerSM:first-of-type .partner-loc-tooltip::after {
    left: calc(17px * var(--cod-card-ui-scale, 1));
}
.cod-pkrs-owl .partnerSMWrap .partnerSM:last-of-type .partner-loc-tooltip {
    left:      auto;
    right:     0;
    transform: none;
}
.cod-pkrs-owl .partnerSMWrap .partnerSM:last-of-type .partner-loc-tooltip::after {
    left:  auto;
    right: calc(17px * var(--cod-card-ui-scale, 1));
    transform: translateX(50%);
}

/* Tooltip bei Hover/Focus sichtbar */
.cod-pkrs-owl .partnerSM a:hover .partner-loc-tooltip,
.cod-pkrs-owl .partnerSM a:focus-visible .partner-loc-tooltip {
    opacity:    1;
    visibility: visible;
    transform:  translateX(-50%) translateY(-2px);
}

/* Editierbarer Standort-Teil im Tooltip (Link-Optik). Die Blase ist anklickbar; ein
   Klick darauf landet im umschliessenden Icon-<a> und oeffnet das Standort-Popup. */
.partner-loc-tooltip .loc-tip-link {
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 700;
    /* Link-Farbe aus dem Betreiber-Dashboard (Feld Akzent → Link, Rolle "link").
       Vorher stand hier die AKZENT-Farbe: Das ist eine andere Rolle, und wer im
       Dashboard seine Linkfarbe ändert, sah hier nichts davon. */
    color: var(--cod-color-link, var(--cod-text-link, var(--cod-color-accent-blue, #6db3e8)));
    /* Die Adresse darf umbrechen und wird NICHT gekürzt — sie ist der Inhalt der
       Zeile, nicht ihre Beschriftung. Mit nowrap lief sie aus der Blase und
       endete als "Vorarlberg,…". */
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Action-Stack-Icons (Teilen + Pin, oben rechts am Bild): Tooltip rechtsbuendig
   ankern, damit der breite Standort-Tooltip nicht ueber den rechten Kartenrand
   laeuft (Karte hat overflow:hidden). */
.cod-pkrs-owl .partnerActionStack .partner-loc-tooltip {
    left:      auto;
    right:     0;
    transform: translateX(0);
}
.cod-pkrs-owl .partnerActionStack .partner-loc-tooltip::after {
    left:      auto;
    right:     16px;
    transform: translateX(0);
}
.cod-pkrs-owl .partnerActionStack .partnerSM a:hover .partner-loc-tooltip,
.cod-pkrs-owl .partnerActionStack .partnerSM a:focus-visible .partner-loc-tooltip {
    transform: translateX(0) translateY(-2px);
}

/* ── Event/Angebot-Badges (partnerTabs) ── */
.cod-pkrs-owl .partnerTabs {
    padding-top: calc(13px * var(--cod-card-ui-scale, 1));
    display:     flex;
    justify-content: center;
    align-items: center;
    gap:         calc(12px * var(--cod-card-ui-scale, 1));
    border-top:  0;
}

.cod-pkrs-owl .partner-tab-btn {
    display:      inline-flex;
    align-items:  center;
    justify-content: center;
    min-width:    calc(120px * var(--cod-card-ui-scale, 1));
    padding:      0 calc(18px * var(--cod-card-ui-scale, 1));
    cursor:       pointer;
}

/* Events-Badge (blau umrandet) */
.cod-pkrs-owl .partner-tab-btn.partner-tab-events {
    height:       calc(var(--cod-btn-event-height, 40px) * var(--cod-card-ui-scale, 1));
    /* Reihenfolge: Elementor-Regler → Dashboard "Button 2 (sekundär)" → Notnagel.
       Der umrandete Reiter ist das sekundäre Bedienelement der Karte, der gefüllte
       daneben das primäre. Ohne die mittlere Stufe wirkte im Dashboard eingestellte
       Farbe hier nicht — genau das war die Lücke. */
    /* Jede Kette endet in einem Dashboard-Wert, nie in einem festen Farbwert:
       Elementor-Regler → Dashboard (Button 2) → --cod-blue aus den Design-Tokens. */
    color:        var(--cod-btn-event-color, var(--cod-btn-secondary-text, var(--cod-blue)));
    background:   var(--cod-btn-event-bg, var(--cod-btn-secondary-bg, #f3f6fb));
    border:       var(--cod-btn-event-border-width, 2px) solid var(--cod-btn-event-border-color, var(--cod-btn-secondary-border, var(--cod-btn-secondary-text, var(--cod-blue))));
    border-radius: var(--cod-btn-event-border-radius, var(--cod-button-radius, 6px));
    font-family:  var(--cod-font-btn-event, inherit);
    font-size:    max(var(--cod-card-min-font, 13px), calc(var(--cod-font-btn-event-size, 0.875rem) * var(--cod-card-ui-scale, 1)));
    font-weight:  var(--cod-font-btn-event-weight, 700);
    opacity:      var(--cod-btn-event-opacity, 1);
    transition:   all var(--cod-btn-event-transition, 160ms) var(--cod-btn-event-ease, ease);
    box-shadow:   0 var(--cod-btn-event-shadow, 0px) calc(var(--cod-btn-event-shadow, 0px) * 2) var(--cod-shadow-color, rgba(31,65,102,0.12));
}

.cod-pkrs-owl .partner-tab-btn.partner-tab-events:hover,
.cod-pkrs-owl .partner-tab-btn.partner-tab-events:focus {
    /* Hover: Der Wechsel von umrandet zu gefuellt ist die Rueckmeldung - dafuer
       braucht es keinen zweiten Farbton. ALLE Werte kommen aus dem Dashboard
       (Button 2 · Hover-Hintergrund / Hover-Schrift / Rahmen); die Literale am
       Ende der Kette greifen nur, wenn dort nichts gesetzt ist. */
    color:         var(--cod-btn-event-hover-color, var(--cod-btn-secondary-hover-text, var(--cod-text-on-dark, #ffffff))) !important;
    background:    var(--cod-btn-event-hover-bg, var(--cod-btn-secondary-hover-bg, var(--cod-blue))) !important;
    border-color:  var(--cod-btn-event-hover-border-color, var(--cod-btn-secondary-border-hover, var(--cod-btn-secondary-border, var(--cod-btn-secondary-hover-bg, var(--cod-blue))))) !important;
    transform:     translateY(var(--cod-btn-event-hover-translate, 0px)) scale(var(--cod-btn-event-hover-scale, 1.03));
    opacity:       var(--cod-btn-event-hover-opacity, 1);
}

/* Aktiv (gedrueckt). Fallback: aktiv -> hover -> Standard, damit ohne gesetzte
   Werte der Hover-Look beim Klick erhalten bleibt (nur leichtes Eindruecken). */
.cod-pkrs-owl .partner-tab-btn.partner-tab-events:active {
    color:        var(--cod-btn-event-active-color, var(--cod-btn-event-hover-color, var(--cod-btn-secondary-hover-text, var(--cod-text-on-dark, #fff)))) !important;
    background:   var(--cod-btn-event-active-bg, var(--cod-btn-event-hover-bg, var(--cod-btn-secondary-hover-bg, var(--cod-blue)))) !important;
    border-color: var(--cod-btn-event-active-border-color, var(--cod-btn-event-hover-border-color, var(--cod-btn-secondary-border-hover, var(--cod-btn-secondary-border, var(--cod-blue))))) !important;
    transform:    scale(var(--cod-btn-event-active-scale, 0.97));
}

/* Angebote-Badge (lila gefuellt) */
.cod-pkrs-owl .partner-tab-btn.partner-tab-offers {
    height:       calc(var(--cod-btn-angebot-height, 40px) * var(--cod-card-ui-scale, 1));
    /* Siehe Reiter "Events": hier die primäre Stufe (Dashboard "Button 1"). */
    color:        var(--cod-btn-angebot-color, var(--cod-btn-primary-text, var(--cod-text-on-dark, #ffffff)));
    background:   var(--cod-btn-angebot-bg, var(--cod-btn-primary-bg, var(--cod-blue)));
    border:       var(--cod-btn-angebot-border-width, 0px) solid var(--cod-btn-angebot-border-color, var(--cod-btn-primary-border, transparent));
    border-radius: var(--cod-btn-angebot-border-radius, var(--cod-button-radius, 6px));
    font-family:  var(--cod-font-btn-angebot, inherit);
    font-size:    max(var(--cod-card-min-font, 13px), calc(var(--cod-font-btn-angebot-size, 0.875rem) * var(--cod-card-ui-scale, 1)));
    font-weight:  var(--cod-font-btn-angebot-weight, 700);
    opacity:      var(--cod-btn-angebot-opacity, 1);
    transition:   all var(--cod-btn-angebot-transition, 160ms) var(--cod-btn-angebot-ease, ease);
    box-shadow:   0 var(--cod-btn-angebot-shadow, 0px) calc(var(--cod-btn-angebot-shadow, 0px) * 2) var(--cod-shadow-color, rgba(31,65,102,0.12));
}

.cod-pkrs-owl .partner-tab-btn.partner-tab-offers:hover,
.cod-pkrs-owl .partner-tab-btn.partner-tab-offers:focus {
    /* Hover: Der Knopf ist bereits gefuellt, die Rueckmeldung kommt aus der
       leichten Vergroesserung. Werte aus dem Dashboard (Button 1 · Hover-*). */
    color:        var(--cod-btn-angebot-hover-color, var(--cod-btn-primary-hover-text, var(--cod-text-on-dark, #ffffff))) !important;
    background:   var(--cod-btn-angebot-hover-bg, var(--cod-btn-primary-hover-bg, var(--cod-blue))) !important;
    border-color: var(--cod-btn-angebot-hover-border-color, var(--cod-btn-primary-border-hover, var(--cod-btn-primary-border, transparent))) !important;
    transform:    translateY(var(--cod-btn-angebot-hover-translate, 0px)) scale(var(--cod-btn-angebot-hover-scale, 1.03));
    opacity:      var(--cod-btn-angebot-hover-opacity, 1);
}

/* Aktiv (gedrueckt). Fallback: aktiv -> hover -> Standard. */
.cod-pkrs-owl .partner-tab-btn.partner-tab-offers:active {
    color:        var(--cod-btn-angebot-active-color, var(--cod-btn-angebot-hover-color, var(--cod-btn-primary-hover-text, var(--cod-text-on-dark, #fff)))) !important;
    background:   var(--cod-btn-angebot-active-bg, var(--cod-btn-angebot-hover-bg, var(--cod-btn-primary-hover-bg, var(--cod-blue)))) !important;
    border-color: var(--cod-btn-angebot-active-border-color, var(--cod-btn-angebot-hover-border-color, var(--cod-btn-primary-border-hover, var(--cod-btn-primary-border, transparent)))) !important;
    transform:    scale(var(--cod-btn-angebot-active-scale, 0.97));
}

/* ── Overlay-Bild ── */
/* Karte beim Zeigen: nur der Schatten waechst, sonst nichts. Die Karte selbst
   bleibt stehen - im Karussell wuerde ein Anheben die Nachbarn anschneiden.
   Wert kommt aus derselben plattformweiten Festlegung wie der Ruhezustand. */
.cod-pkrs-owl .partner-card.item:hover,
.cod-pkrs-owl .partner-card.item:focus-within {
    box-shadow: var(--cod-shadow-card-hover);
}

/* DIE AUFGELEGTE KARTENFASSUNG MUSS DIE KARTE DECKEN (13.08.2026).

   Hier stand nur display:block und width:100%. Damit lag das Bild NICHT ueber
   der Karte, sondern lief im Fluss mit - zwischen Bild und Inhalt. Sichtbar
   war dadurch beides untereinander: erst die aufgelegte Fassung (in die Name
   und Rolle hineingerendert sind), darunter noch einmal die echte Karte mit
   denselben Angaben. Genau das war die Meldung "im Creator ist Name und Rolle
   doppelt drin".

   Das Vorschau-Dokument (cod-partner-preview-document.php) macht es seit jeher
   richtig - dort deckt das Overlay mit inset:0. Die beiden Stellen sind damit
   auseinandergelaufen.

   pointer-events: none, damit Teilen, Standort und die Knoepfe darunter
   bedienbar bleiben; sie liegen mit hoeherem z-index ohnehin darueber.
   border-radius: inherit, damit die Ecken der Karte nicht ueberdeckt werden.

   Passt nur, wenn das Bild dasselbe Format hat wie die Karte: profilkarte-*
   ist 720x1080, also exakt 1:1,5 wie die Kachel. Die userkarte-* (720x870,
   1:1,208) ist die Karte des CHATS und gehoert hier nicht her - object-fit
   faengt einen falschen Zuschnitt zwar ab, richtig wird das Bild davon nicht. */
.cod-pkrs-owl .partnerOverlayImg {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    pointer-events: none;
    z-index: 4;
}

/* ── OWL-Item: Padding unten fuer Box-Shadow + Badges ── */
/* Kein harter Reset auf 0 — stattdessen gezieltes Padding damit der
   Box-Shadow und die unteren Badge-Zeilen nicht am Karussell-Clip abgeschnitten
   werden. .owl-stage-outer hat Owls Standard overflow:hidden; das Padding
   schiebt den sichtbaren Inhalt nach innen und gibt Schatten/Badges Platz. */
.cod-pkrs-owl.owl-carousel .owl-item {
    padding-bottom: 12px;
}

/* owl-stage-outer: NUR SENKRECHT durchlässig, waagerecht beschnitten
   (12.08.2026 korrigiert).

   Hier stand `overflow: visible !important` - damit der Kartenschatten unten
   sichtbar bleibt. Der Nebeneffekt war ungewollt: Owls Bahn ist ein Vielfaches
   des Rahmens breit (gemessen bei 1920 px: 8099 px Bahn in einem 1696 px
   breiten Rahmen), und ohne Beschneidung liefen die wartenden Kacheln bis an
   den Fensterrand.

   Repariert wurde das zuerst eine Ebene HÖHER, am .cod-pkrs-wrap - und der
   trägt die Pfeile. Die stehen absichtlich 44 px ausserhalb der Bahn und waren
   damit weg: gemessen 68 px breite Knöpfe bei x=42, während der Rahmen erst
   bei x=86 beginnt. Kein Fehler, keine Meldung - der Knopf war im DOM, hatte
   display:flex und wurde schlicht abgeschnitten.

   Richtig ist die Beschneidung genau hier: .owl-stage-outer umfasst NUR
   die Bahn, .owl-nav ist sein Geschwister und bleibt unangetastet.
   `clip` statt `hidden`, weil hidden auf einer Achse die andere zu `auto`
   macht - dann wäre aus dem Element ein Scrollbereich geworden und ein
   angeklickter Knopf hätte die Bahn seitlich weggeschoben.

   Im @supports, weil `overflow: clip` erst ab Safari 16 kann und unsere
   Baseline 15.4 ist. Dort greift Owls eigenes `overflow: hidden` weiter - die
   Bahn ist also auch dann beschnitten, nur der Schatten unten wird knapper.
   Ohne diese Klammer wäre auf Safari 15.4 die gemischte Angabe (x ungültig,
   y: visible) genau der Scrollbereich, den wir vermeiden wollen. */
.cod-pkrs-owl.owl-carousel .owl-stage-outer {
    padding-bottom: 4px; /* verhindert, dass Shadow am Container-Edge clippt */
}
@supports (overflow: clip) {
    .cod-pkrs-owl.owl-carousel .owl-stage-outer {
        overflow-x: clip;
        overflow-y: visible;
        /* Gibt dem Schatten links/rechts Luft, ohne dass die Nachbarkachel
           sichtbar wird: clip schneidet erst am Rand DIESES Kastens. */
        overflow-clip-margin: 8px;
    }
}

/* ── Mobil ── */
@media (max-width: 767px) {
    .cod-pkrs-owl .partnerSMWrap {
        gap: var(--cod-social-icon-gap, 10px);
    }

    .cod-pkrs-owl .partnerTabs {
        gap: 10px;
    }

    .cod-pkrs-owl .partner-tab-btn {
        flex: 1 1 0;
        min-width: 0;
    }
}

/* ── Trefferflächen auf Touchgeräten ──────────────────────────────────────
   Die Symbolflächen sind je nach Einstellung 34 bis 40 px gross, antippbar
   sein sollten mindestens 44. Vergrössert wird deshalb NUR die unsichtbare
   Trefferfläche über ein ::after — das blaue Quadrat bleibt optisch exakt
   gleich. Das sichtbare Element aufzublasen wäre eine Design-Änderung und
   ist ausdrücklich nicht gewollt.

   Reicht bis 44 px: 34 + 2x5 = 44. Bei 40 px sind es 50.
   Keine Überlappung: Der Abstand zwischen den Symbolen ist 10 bis 15 px, die
   beiden Flächen greifen je 5 px hinein — es bleibt immer ein Rest.

   Nur bei (pointer: coarse), damit die Maus-Bedienung unverändert bleibt.
   Dasselbe Muster nutzt bereits der Chat. */
@media (pointer: coarse) {
    .cod-pkrs-owl .partnerSM a {
        position: relative;
    }

    /* Trefferflaeche EXAKT 44px, unabhaengig von der Kartenskalierung.
       Eine feste inset-Angabe reicht nicht: Das Symbol misst je nach Fensterbreite
       zwischen 30 und 44px, ein starres -6px traf mal 44 und mal 36. min-width /
       min-height rechnen dagegen immer bis auf die Vorgabe hoch. */
    .cod-pkrs-owl .partnerSM a::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: 100%;
        min-width: 44px;
        min-height: 44px;
        /* Unter dem Tooltip bleiben, der im selben <a> sitzt. */
        z-index: 0;
    }

    /* Die beiden Reiter hatten ueberhaupt keine Vergroesserung: bei 360px messen
       sie 122x31 - breit genug, aber 13px zu flach. Nur senkrecht aufweiten,
       waagerecht sind sie ohnehin ueber 44px und sollen sich nicht ueberlappen. */
    .cod-pkrs-owl .partner-tab-btn {
        position: relative;
    }

    /* NACH UNTEN aufweiten, nicht mittig. Mittig gerechnet wächst die Fläche zur
       Hälfte nach OBEN - und dort steht direkt die Symbolreihe. Gemessen am
       04.08.2026 bei 390 px: Die Reiter kamen getastet auf 81 x 57, die vier
       Symbole darüber nur noch auf 36 x 29.
       Unter den Reitern ist dagegen der Kartenrand, dort kostet Platz nichts.
       Grundsatz: Die senkrechte Reserve gehört den KLEINEN Zielen. Die Reiter
       sind 133 px breit und werden auch so mühelos getroffen. */
    .cod-pkrs-owl .partner-tab-btn::after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        min-height: 44px;
        z-index: 0;
    }

    /* "Mehr anzeigen" ist eine flache Textzeile (22px hoch bei 360px).
       Waagerecht ist sie breit genug, senkrecht braucht sie Luft.
       ::before statt ::after: Das ::after traegt hier bereits den Chevron
       (widget-partner-karusell.php) - eine zweite Regel darauf wuerde den Pfeil
       ersetzen statt die Flaeche zu vergroessern. */
    .cod-pkrs-owl .partnerRoleDescriptionMore {
        position: relative;
        /* Über die Symbolreihe heben. Ohne diese Zeile verliert der Pfeil JEDEN
           Tipp an das Video-Symbol darunter: Das trägt z-index 11 auf einem
           positionierten Element, der Pfeil hatte hier nur position: relative
           ohne eigenen z-index - also "auto", und damit steht er in der
           Stapelung unter allem, was eine Zahl hat.
           Am 04.08.2026 auf dem iPhone bestätigt: Ein Tipp auf das Häkchen
           unter der Beschreibung öffnete das Video, statt aufzuklappen.
           Eingegrenzt durch Abschalten: Erst wenn das Video-Symbol ganz
           verschwand, wurde der Pfeil erreichbar - klickdurchlässig machen
           reichte nicht, das war also keine Frage der Trefferfläche, sondern
           der Stapelreihenfolge. */
        z-index: 12;
    }

    /* KEINE senkrechte Aufweitung mehr auf 44 px. Der Pfeil ist rund 276 px
       BREIT - er wird auch mit seinen 24 px Höhe mühelos getroffen. Seine
       Aufweitung ging dagegen voll zulasten der Symbolreihe direkt darunter:
       Seit der Pfeil (z-index 12) über den Symbolen steht, nahm sein 44er-Band
       ihnen die obere Hälfte. Gemessen am 04.08.2026 bei 390 px: Symbole nur
       noch 36 x 19 statt 44 x 44, während der Pfeil 81 x 44 hatte.
       Die senkrechte Reserve gehört dorthin, wo die Ziele KLEIN sind. Ein
       breites Ziel braucht sie nicht - deshalb behält der Pfeil hier nur seine
       eigene Höhe. Die Fläche bleibt bestehen (der Kasten trägt die
       Klickfläche), sie wächst nur nicht mehr in die Nachbarreihe hinein. */
    .cod-pkrs-owl .partnerRoleDescriptionMore::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 100%;
        height: 100%;
        z-index: 0;
    }
}

/* Die Schaltflaeche "Entfernung anzeigen" wird ausgeblendet (Nutzerentscheidung
   01.08.2026 - sie soll ohnehin entfallen). Den Standort setzt man weiterhin
   ueber die Nadel daneben, es geht also keine Funktion verloren. */
.cod-pkrs-owl .partner-distance-badge {
    display: none !important;
}

/* ── Die User-Ausprägung der Karte ──────────────────────────────────────────
   Dieselbe Karte, nur kleiner und ohne die Zusätze: kein Webseiten- und
   Video-Symbol, keine Events-/Angebote-Reiter, kein Teilen. Getragen wird sie
   von .ist-user am Rahmen.

   Diese Regeln stehen hier und nicht im Profil-Editor, weil sie Karten-Optik
   sind - im Editor entstünde daraus binnen Wochen eine zweite Karte, die vom
   Frontend wegläuft. Genau das verhindert der Software-Check.

   Was sie tun: Fallen die unteren Zeilen weg, bleibt in der 2:3-Kachel eine
   leere untere Hälfte zurück - der Text klebte oben, darunter kam nichts mehr.
   Der Inhalt rückte deshalb in die Mitte des freien Raums.

   SEIT 18.08.2026 NICHT MEHR: Gewünscht ist, dass Name, Rolle, Beschreibung und
   Aufklapp-Pfeil auf DERSELBEN Höhe sitzen wie beim Partner - beim Umschalten
   zwischen den Stufen sprang sonst jede Zeile ein Stück nach unten, obwohl sich
   inhaltlich nichts geändert hat. Die Zentrierung war genau diese Verschiebung:
   Sie hängt an der Menge des Inhalts, und der ist bei User und Partner
   verschieden.

   Der gewonnene Platz bleibt damit unten statt sich zu verteilen. Das ist
   gewollt: Die Höhe der Karte regelt das Seitenverhältnis darunter, nicht die
   Verteilung der Textzeilen. */

/* Eigenes Seitenverhältnis 4:5 statt der 2:3 der Partner-Karte.
   Gemessen bei 360 px Breite: Das Bild nimmt 270 px (4:3), der Textblock aus
   Name, Rolle und Beschreibung 134 px. In der 2:3-Kachel (540 px) blieben
   dadurch oben 69 und unten 67 px leer - der Inhalt stand zwar mittig, die
   Karte wirkte aber halb gefüllt.

   4:5 ergibt 450 px: 270 Bild + 180 Inhaltsfläche, davon 134 Text und je
   rund 23 px Luft oben wie unten. Ein Verhältnis, keine feste Höhe - die
   Rechnung stimmt damit bei jeder Kartenbreite.

   Warum die Partner-Karte ihre 2:3 behält: Aus ihr werden die Sharing-Bilder
   erzeugt, die alle dasselbe Format brauchen. Aus der User-Karte nicht.

   SPEZIFITÄT: Der Selektor braucht das .item mit. Das Karussell-Widget gibt
   inline ".cod-pkrs-owl .partner-card.item { aspect-ratio: 2/3 !important }"
   aus - drei Klassen, genau so viele wie ohne .item hier. Bei Gleichstand
   gewinnt die später geladene Regel, und Inline im HTML kommt nach dieser
   Datei. Ohne das vierte Stück blieb die Karte deshalb bei 2:3, obwohl die
   Regel live war und im Test allein einwandfrei griff. */
.cod-pkrs-owl.ist-user .partner-card.item {
    aspect-ratio: 4 / 5 !important;
}

/* Der eigene Abstand über der Beschreibung ist am 18.08.2026 entfallen: 6 px
   hier gegen 2 px beim Partner - genau die 4 px, um die Beschreibung und Pfeil
   beim Umschalten nach unten sprangen. Es gilt jetzt derselbe Wert wie beim
   Partner (.cod-pkrs-owl .partner-card .partnerRoleDescription), also keine
   eigene Regel mehr. */

/* Der Teilen-Knopf stand hier bis 18.08.2026 auf display:none, mit der
   Begründung "ein User-Profil wird nicht beworben". Das ist zurückgenommen: Ein
   User darf sein Profil genauso weitergeben wie ein Partner (Wunsch 18.08.2026).

   Die Zeile hat gekostet, was sie sollte: Im Profil-Editor wurde dieselbe
   Ausblendung ein zweites Mal geschrieben, und als sie DORT fiel, blieb der
   Knopf trotzdem weg - weil diese hier in einem anderen Repo steht und mit
   einem anderen Rahmen-Selektor (.cod-pkrs-owl.ist-user statt
   .cod-partner-editor-card.ist-user) arbeitet. Wer die eine sucht, findet die
   andere nicht.

   Was ein User wirklich nicht hat, wird weiterhin ausgeblendet - aber im
   Editor, wo es hingehört: die Symbolreihe und die Zähler-Reiter. */