/*
Theme Name: Hello Elementor Child
*/

/* =======================================
   GLOBAL BASICS
======================================= */
:root{
  /* KLEINSTE SCHRIFT IN EINER KARTE (13.08.2026 eingefuehrt): Die Karten
     skalieren als Ganzes ueber --cod-card-ui-scale; jede Schriftangabe darin
     hat eine eigene Untergrenze, damit die Verkleinerung nicht ins Bodenlose
     laeuft. Diese Untergrenzen waren einzeln gewachsen - 9, 10, 11 und 13 px an
     18 Stellen - und gemessen kamen auf einem 360-px-Handy 9,07 px an. Ein
     Wert, EINE Stelle. Bewusst 13 px: Das ist zugleich die Untergrenze des
     gemeinsamen Info-Chips, und unter 13 px liest niemand mehr eine
     Kartenbeschriftung. */
  --cod-card-min-font: 13px;

  /* Karten mobil */
  --cp-card-w-mobile: 78%;
  --cp-card-max-mobile: 320px;

  /* Standort-UI */
  --loc-max: 860px;          /* max. Breite der Location-Zeile */
  --loc-pad-x: 8px;          /* horizontales Padding des Wrappers */
  --loc-input-pad-v: 12px;   /* vertikales Padding im Input (für Button-Höhe) */

  /* Farben */
  --btn-bg: var(--cod-color-accent-blue, #3598DB);
  --btn-fg: #fff;

  /* Shadows */
  --cod-shadow-sm:            0 2px 6px rgba(0,0,0,.08);
  --cod-shadow-soft:          0 0 10px rgba(0,0,0,.2);
  /* --- Karten-Schatten: EINE Festlegung je Zweck ------------------------------
     Sonst hat jede Kartenart einen anderen Schatten (gemessen am 01.08.2026:
     Partner 0 5px 20px, Angebote 0 5px 5px, Events 0 4px 24px).

     Einstellbar ist seit 03.08.2026 die WEITE, über Design → Variablen →
     Effekte → "Schatten (Weite)". Der senkrechte Versatz folgt ihr im festen
     Verhältnis, damit der Schatten in jeder Stärke dieselbe Form behält — ein
     eigener Regler dafür wäre eine zweite Stellschraube für dieselbe Sache.
     Die Standardwerte 20/30/16 ergeben rechnerisch exakt die früheren Werte
     0 6px 20px, 0 12px 30px und 0 6px 16px; ohne Zutun sieht also nichts anders
     aus als vorher.

     Die FARBE kommt weiterhin allein aus dem Dashboard (--cod-shadow-color);
     die Deckkraft setzen die Mix-Token, damit ein eingetragener Hex-Wert nicht
     volldeckend als Klotz unter der Karte liegt. */
  --cod-shadow-card:          0 calc(var(--cod-shadow-card-blur, 20px) * .3) var(--cod-shadow-card-blur, 20px) var(--cod-mix-shadow-18);
  --cod-shadow-card-hover:    0 calc(var(--cod-shadow-card-hover-blur, 30px) * .4) var(--cod-shadow-card-hover-blur, 30px) var(--cod-mix-shadow-28);
  --cod-shadow-icon:          0 calc(var(--cod-shadow-icon-blur, 16px) * .375) var(--cod-shadow-icon-blur, 16px) var(--cod-mix-shadow-28);
  --cod-shadow-md:            0 8px 20px var(--cod-mix-shadow-18);
  --cod-shadow-input:         0 0 10px rgba(0,0,0,.5);
  --cod-shadow-strong:        0 8px 20px rgba(0,0,0,.5);
  --cod-shadow-strong-grow:   0 10px 24px rgba(0,0,0,.5);
  --cod-shadow-strong-press:  0 6px 16px rgba(0,0,0,.5);
  --cod-shadow-dropdown:      0 8px 22px rgba(0,0,0,.12);
  --cod-shadow-popup:         0 20px 60px rgba(0,0,0,.5);
  --cod-shadow-deep:          0 24px 54px rgba(12,35,77,.24);
  --cod-shadow-icon-vw:       0 0.9vw 1.8vw var(--cod-mix-shadow-32),0 0.2vw 0.6vw var(--cod-mix-shadow-16);
  --cod-shadow-icon-vw-hover: 0 1.2vw 2vw var(--cod-mix-shadow-40),0 0.3vw 0.8vw var(--cod-mix-shadow-20);
  --cod-shadow-btn:           0 8px 20px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.25);
  --cod-shadow-btn-press:     0 6px 14px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.2);
  --cod-shadow-inset-light:   inset 0 1px 0 rgba(255,255,255,.66);
  --cod-shadow-focus-ring:    0 0 0 4px rgba(43,134,197,.12);

  /* Misch-Farben zentral: Basis = statisches rgba (Safari < 16.2, Firefox < 113,
     Chrome < 111 — dort ist color-mix() unbekannt und eine Deklaration mit var()
     wird erst "at computed-value time" ungültig, d. h. Rahmen/Schatten fallen
     KOMPLETT weg). Moderne Browser bekommen im @supports-Block darunter die
     color-mix-Variante mit Live-Branding-Farbe. */
  --cod-mix-shadow-12: rgba(31,65,102,.12);
  --cod-mix-shadow-16: rgba(31,65,102,.16);
  --cod-mix-shadow-18: rgba(31,65,102,.18);
  --cod-mix-shadow-20: rgba(31,65,102,.2);
  --cod-mix-shadow-28: rgba(31,65,102,.28);
  --cod-mix-shadow-32: rgba(31,65,102,.32);
  --cod-mix-shadow-40: rgba(31,65,102,.4);
  --cod-mix-secondary-12: rgba(31,65,102,.12);
  --cod-mix-text-08: rgba(77,77,77,.08);
  --cod-mix-border-15: rgba(31,65,102,.15);
  --cod-mix-border-25: rgba(31,65,102,.25);
  --cod-mix-info-12: rgba(43,134,197,.12);
}

@supports (color: color-mix(in srgb, red 50%, transparent)) {
  :root{
    --cod-mix-shadow-12: color-mix(in srgb,var(--cod-shadow-color,#1f4166) 12%,transparent);
    --cod-mix-shadow-16: color-mix(in srgb,var(--cod-shadow-color,#1f4166) 16%,transparent);
    --cod-mix-shadow-18: color-mix(in srgb,var(--cod-shadow-color,#1f4166) 18%,transparent);
    --cod-mix-shadow-20: color-mix(in srgb,var(--cod-shadow-color,#1f4166) 20%,transparent);
    --cod-mix-shadow-28: color-mix(in srgb,var(--cod-shadow-color,#1f4166) 28%,transparent);
    --cod-mix-shadow-32: color-mix(in srgb,var(--cod-shadow-color,#1f4166) 32%,transparent);
    --cod-mix-shadow-40: color-mix(in srgb,var(--cod-shadow-color,#1f4166) 40%,transparent);
    --cod-mix-secondary-12: color-mix(in srgb,var(--cod-color-secondary,#1f4166) 12%,transparent);
    --cod-mix-text-08: color-mix(in srgb,var(--cod-color-text,#4d4d4d) 8%,transparent);
    --cod-mix-border-15: color-mix(in srgb,var(--cod-border,#1f4166) 15%,transparent);
    --cod-mix-border-25: color-mix(in srgb,var(--cod-border,#1f4166) 25%,transparent);
    --cod-mix-info-12: color-mix(in srgb,var(--cod-info,#2b86c5) 12%,transparent);
  }
}





.hidden { display: none !important; }



.centerContent { text-align: center; }

html, body { overflow-x: hidden; }
* { box-sizing: border-box; }

/* =======================================
   SHORTCODE-CONTAINER
======================================= */
.comPartnerMainWrap,
#commCreatorWrap{
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.comPartnerWrap{
  width:100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
}

/* =======================================
   STANDORT-UI – EINHEITLICH (Creator & Partner)
   Wrapper: gleiche Breite, Input 100%, Button einheitlich
======================================= */

/* Gleiche Wrapper-Breite für beide Shortcodes (Elementor-Schutz) */
#commCreatorWrap .locationInputWrap,
.comPartnerMainWrap .locationInputWrap{
  position: relative;
  margin: 0 auto 1rem !important;
  padding: 0 var(--loc-pad-x) !important;
  width: 100% !important;
  max-width: var(--loc-max) !important;
}

/* Input: identisch bei beiden */
#commCreatorWrap #location-input,
.comPartnerMainWrap #partner-location-input{
  width: 100%;
  display: block;
  margin: 0 auto;
  padding: var(--loc-input-pad-v) 44px;
  border: none;
  border-radius: 5px;
  box-shadow: var(--cod-shadow-input);
  outline: none;
  background: var(--cod-card-bg, #fff);
  font-family: var(--e-global-typography-44ebb6b-font-family, system-ui, sans-serif);
  font-size: 1rem;
  line-height: 1.3;
}

/* Button (Grundstil) – gleiche Optik */
#commCreatorWrap #detect-location,
.comPartnerMainWrap #partner-detect-location{
  border: 0;
  border-radius: 5px;
  padding: 10px 14px;
  cursor: pointer;
  box-shadow: var(--cod-shadow-soft);
  background: var(--btn-bg);
  color: var(--btn-fg) !important;
  line-height: 1.1;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  white-space: nowrap;
}

/* Button – Textfarbe konstant */
#commCreatorWrap #detect-location,
#commCreatorWrap #detect-location:hover,
#commCreatorWrap #detect-location:focus,
#commCreatorWrap #detect-location:active,
.comPartnerMainWrap #partner-detect-location,
.comPartnerMainWrap #partner-detect-location:hover,
.comPartnerMainWrap #partner-detect-location:focus,
.comPartnerMainWrap #partner-detect-location:active{
  color:#fff !important;
}

/* Standort-Text (identisch) – wird per JS sichtbar gemacht */
#commCreatorWrap #selected-location,
.comPartnerMainWrap #partner-selected-location{
  display:none;
  margin: 8px 0 12px;
  text-align: center;
  color: var(--e-global-color-secondary);
  font-family: var(--e-global-typography-44ebb6b-font-family, system-ui, sans-serif);
  font-size: var(--e-global-typography-44ebb6b-font-size, 1rem);
  line-height: var(--e-global-typography-44ebb6b-line-height, 1.4);
  font-weight:400;
}
#commCreatorWrap #selected-location p,
.comPartnerMainWrap #partner-selected-location p{
  margin:.2rem 0;
  color: var(--e-global-color-secondary);
}

/* =======================================
   LOCATION-BUTTON FINAL
   - Mobile/Tablet: zwischen Input & Text, mittig
   - Desktop: rechts im Input, vertikal zentriert und gleiche Höhe
======================================= */

/* Mobile & Tablet ≤ 1024px */
@media (max-width:1024px){
  /* Wrapper voll breit und Kinder stretchen */
  #commCreatorWrap .locationInputWrap,
  .comPartnerMainWrap .locationInputWrap{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;           /* WICHTIG: statt center */
  }

  /* Das Feld selbst auf 100% Breite ziehen */
  #commCreatorWrap .locationInputWrap .cod-loc-field,
  .comPartnerMainWrap .locationInputWrap .cod-loc-field{
    width: 100%;
  }

  /* Button mittig unter dem Input lassen */
  #commCreatorWrap #detect-location,
  .comPartnerMainWrap #partner-detect-location{
    position: static !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin: .75rem auto 0 !important;
    transform: none !important;
    left: auto !important; right: auto !important; top: auto !important;
    width: auto;
    height: auto;
  }
}


/* Desktop ≥ 1025px – Button OBERHALB des Inputs, mittig */
@media (min-width:1025px){
  #commCreatorWrap .locationInputWrap,
  .comPartnerMainWrap .locationInputWrap{
    display:flex; flex-direction:column;
  }

  /* Reihenfolge: 1) Button, 2) Input */
  #commCreatorWrap .locationInputWrap .btn-row,
  .comPartnerMainWrap .locationInputWrap .btn-row{
    order:1;
    display:flex;
    justify-content:center;
  }
  #commCreatorWrap .locationInputWrap .cod-loc-field,
  .comPartnerMainWrap .locationInputWrap .cod-loc-field{
    order:2;
  }

  /* Button zentriert, nicht absolut positionieren */
  #commCreatorWrap #detect-location,
  .comPartnerMainWrap #partner-detect-location{
    position: static !important;
    transform: none !important;
    margin: 0 auto .75rem !important; /* oben Abstand nach unten */
    height: var(--cod-field-h);
    padding-top: 0; padding-bottom: 0;
    float: none;
  }

  /* Input braucht rechts keinen Extra-Platz */
  #commCreatorWrap #location-input,
  .comPartnerMainWrap #partner-location-input{
    padding-right: 14px;
    padding-left: 44px;
  }
}




/* Tablet-Wrapper etwas schmaler */
@media (min-width:768px) and (max-width:1024px){
  #commCreatorWrap .locationInputWrap,
  .comPartnerMainWrap .locationInputWrap{ width: 100% !important; }
}

/* =======================================
   COMMUNITY CREATORS – ITEMS
======================================= */
#creators-results .partner-item { text-align: center; transition: transform .2s ease; margin: 0 auto; }
#creators-results .partner-item img {
  width: 100%; max-width: 200px; margin: 0 auto 5px; aspect-ratio: 1/1; object-fit: cover;
  border: 4px solid var(--cod-border, rgb(213,216,218)); border-radius: 30px;
}
#creators-results .partner-item.allEvents img { padding: .5rem; background: var(--cod-card-bg, #fff); }
#creators-results .partner-item.active img { border: 4px solid var(--cod-color-star, #FFCD02); }

/* Carousel-Nav (Creators) */
.owl-nav { display: block !important; }
.owl-carousel .owl-nav .owl-next,
.owl-carousel .owl-nav .owl-prev { position: absolute; }
button.owl-prev, button.owl-next { left: auto !important; right: auto !important; }

#creators-results{
  position: relative;
  overflow: visible;
  padding: 0 22px !important;
  --navY: 110px;
  --navInset: 0px;
}
#creators-results .owl-stage-outer{ overflow: hidden !important; }
#creators-results .owl-nav{ display: block !important; z-index: 20; pointer-events:auto; }
#creators-results .owl-nav button{
  position: absolute;
  top: var(--navY) !important;
  transform: translateY(-50%);
  width:56px; height:56px; border:0; border-radius:50%;
  background:transparent !important; line-height:56px; cursor:pointer;
}
#creators-results .owl-nav .owl-prev{ left:  var(--navInset) !important; right:auto !important; }
#creators-results .owl-nav .owl-next{ right: var(--navInset) !important; left:auto !important; }
#creators-results .owl-nav .owl-prev::before,
#creators-results .owl-nav .owl-next::before{
  content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-size:4rem; line-height:1; color:var(--cod-color-text); pointer-events:none;
}
#creators-results .owl-nav .owl-prev::before{ content:'\2039'; }
#creators-results .owl-nav .owl-next::before{ content:'\203A'; }
#creators-results .owl-nav button:hover{ background: var(--cod-mix-text-08); }

@media (max-width:767px){
  #creators-results{ --navInset: -18px; padding: 0 18px !important; }
}
@media (min-width:768px) and (max-width:1024px){
  #creators-results{ --navInset: -26px;  padding: 0 24px !important; }
}
@media (min-width:1025px){
  #creators-results{ --navInset:  -20px;  padding: 0 28px !important; }
}

/* Community Creator Texte & Intro */
#commCreatorWrap #selected-location{ margin: 8px 0 12px; text-align: center; }
#commCreatorWrap #selected-location p{ margin: .2rem 0; color: var(--e-global-color-secondary); }
#creators-results .partner-item .creator-title{
  font-family: var(--e-global-typography-dbdb71b-font-family, var(--e-global-typography-44ebb6b-font-family, system-ui, sans-serif));
  font-size:   var(--e-global-typography-dbdb71b-font-size, 1.05rem);
  font-weight: var(--e-global-typography-dbdb71b-font-weight, 700);
  line-height: var(--e-global-typography-dbdb71b-line-height, 1.2);
  margin: .5rem 0 .25rem;
  color: var(--e-global-color-secondary);
  -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; word-break: break-word;
}
#creators-results .partner-item .creator-distance{
  font-size:   var(--e-global-typography-887c3e7-font-size, 1.05rem);
  line-height: var(--e-global-typography-887c3e7-line-height, 1.2);
  margin: .3rem 0 .4rem;
  color: var(--e-global-color-secondary);
}
@media (max-width: 767px){
  #creators-results .partner-item .creator-distance{ line-height: 1.15; }
}
#creators-results .trigger-detect-location,
#creators-results .trigger-detect-location:visited{
  font-size: inherit;
  line-height: inherit;
  color: var(--e-global-color-d49ac81) !important;
  text-decoration: underline;
  font-weight: 600;
}
#creators-results .trigger-detect-location:hover{ text-decoration: underline; }

/* Intro Text oben + gleicher Stil unten */
#creator-intro-text,
.intro-like{
  width: 70%;
  max-width: none;
  margin: 20px auto;
  padding: 0 16px;
  text-align: center;
  color: var(--e-global-color-secondary);
}
#creator-intro-text b, #creator-intro-text strong,
.intro-like b, .intro-like strong{
  color: var(--e-global-color-secondary);
}
@media (max-width:1024px){
  #creator-intro-text,
  .intro-like{ width: 85%; }
}
@media (max-width:767px){
  #creator-intro-text,
  .intro-like{ width: 90%; }
}


#commCreatorWrap :where(p, a, li, span, small, button, input, label):not(.creator-title):not(.creator-distance):not(.trigger-detect-location),
#commCreatorWrap #selected-location,
#commCreatorWrap #creator-intro-text,
#commCreatorWrap #creators-results .partner-item :where(p, a, span):not(.creator-title):not(.creator-distance):not(.trigger-detect-location){
  font-family: var(--e-global-typography-44ebb6b-font-family), Sans-serif;
  font-size: var(--e-global-typography-44ebb6b-font-size);
  line-height: var(--e-global-typography-44ebb6b-line-height);
  font-weight: var(--e-global-typography-44ebb6b-font-weight, 500);
}

#cod-creators-results .owl-nav button,
#cod-creators-results .owl-prev,
#cod-creators-results .owl-next,
#cod-creators-results .owl-dot{
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* =======================================
   COMMUNITY PARTNER – KARUSSELL
======================================= */
#com-partner-results{
  position: relative; width:100%; overflow: visible; padding: 0 !important;
  --navY: 230px; --navOutside: 80px;
}
#com-partner-results .owl-stage-outer{
  overflow: hidden !important;
  padding: 0 0 20px 0;
  margin: 0 auto;
}




/* vidjet sicher oben halten */
.partnerImageWrap .vidjetEmbed{ z-index: 9999 !important; }
[id*="vidjet"], [class*="vidjet"]{ z-index: 99999 !important; }

/* Standard von Owl belassen, nur das Bild-Overlay darf „überstehen“ */
#com-partner-results .owl-stage-outer{ overflow: hidden !important; }
#com-partner-results .partner-card{ overflow: visible; }
#com-partner-results .partnerImageWrap{ overflow: visible; }

/* Vidjet sicher oben halten */
.partnerImageWrap .vidjetEmbed{ z-index: 9999 !important; }



/* Karten */
.partner-card.item{
  background:var(--cod-card-bg, #fff); text-align:center; border-radius:5px;
  box-shadow:var(--cod-shadow-card); border:none;
}
/* 365/256 = 1,4258, praktisch 10:7 - DASSELBE Format wie Events, Angebote,
   Gewinnspiele und Academy (cod_bild_standard_ratio). Bis zum 17.08.2026 stand
   hier 4/3, und der Zuschnitt rechnete laengst mit 1,4258: Wer im
   Ausschnitt-Fenster positionierte, sah danach einen anderen Ausschnitt in der
   Karte - gemeldet als "stimmt noch nicht 100% mit dem angezeigten
   Bildausschnitt ueberein". Der Zweck 'partner' traegt die Absicht seit dem
   13.08.2026, nur das CSS wurde nie mitgezogen.

   WER DIESE ZAHL AENDERT, aendert sie in BEIDEN Bundles (Plugin und cod-embed)
   und bringt cod_bild_standard_ratio() mit - sonst schneidet die Maske wieder
   anders zu, als die Karte zeigt. */
.partner-card.item img{
  display:block; width:100%; height:auto; aspect-ratio: 365/256; object-fit:cover;
  border-top-left-radius:5px; border-top-right-radius:5px;
  opacity:0; transition:opacity .2s ease;
}
.partner-card.item img[src]{ opacity:1; }

.partner-card .partnerContent{ padding:15px; display:flex; flex-direction:column; justify-content:flex-start; gap:0; color:var(--cod-color-text); }
.partner-card h4{ font-size:1.3rem; margin:0; color:var(--cod-color-text); }
.partner-card p.partnerRolle{ color:var(--cod-color-pink, #fb4c95); }

/* Partner-Pfeile */
#com-partner-results .owl-nav{ display:block !important; z-index:20; pointer-events:auto; }
#com-partner-results .owl-nav button{
  position:absolute; top: var(--navY); transform: translateY(-50%);
  width:56px; height:56px; border:0; border-radius:50%; background:transparent !important; line-height:56px; cursor:pointer;
}
#com-partner-results .owl-nav .owl-prev{ left: 0 !important; transform: translate(calc(-1 * var(--navOutside)), -50%); }
#com-partner-results .owl-nav .owl-next{ right: 0 !important; transform: translate(var(--navOutside), -50%); }
#com-partner-results .owl-nav .owl-prev::before,
#com-partner-results .owl-nav .owl-next::before{
  content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-size:4rem; line-height:1; color:var(--cod-color-text); pointer-events:none;
}
#com-partner-results .owl-nav .owl-prev::before{ content:'\2039'; }
#com-partner-results .owl-nav .owl-next::before{ content:'\203A'; }
#com-partner-results .owl-nav button:hover{ background: var(--cod-mix-text-08); }

/* Mobil – Partnerkarten mittig */
@media (max-width:767px){
  #com-partner-results{ --navOutside: 12px; --navY: 230px; }
  #com-partner-results .owl-item{ display:flex !important; justify-content:center !important; }

  #com-partner-results .partner-card.item{
    width: var(--cp-card-w-mobile) !important;
    max-width: var(--cp-card-max-mobile) !important;
    margin: 0 auto !important;
    margin-top: 12px !important;
  }
}
@media (min-width:768px) and (max-width:1024px){
  #com-partner-results{ --navOutside: 50px; --navY: 230px; }
}
@media (min-width:1025px){
  #com-partner-results{ --navOutside: 80px; --navY: 230px; }
}

/* =======================================
   SOCIAL ICONS
======================================= */
.partner-card .partnerSMWrap{ display:flex; flex-wrap:wrap; justify-content:center; }
.partner-card .partnerSM{ margin:0; }
.partner-card .partnerSM a{
  display:flex; align-items:center; justify-content:center;
  border-radius:10%; background:var(--cod-color-accent-blue); text-decoration:none;
  box-shadow:var(--cod-shadow-icon-vw);
  transition:transform .15s, box-shadow .15s, background .15s, outline-color .15s;
}
.partner-card .partnerSM a svg{ fill:var(--cod-icon-fill,#fff); display:block; flex:0 0 auto; }
.partner-card .partnerSM a:hover{
  background:var(--cod-color-accent-blue); transform:translateY(-0.3vw);
  box-shadow:var(--cod-shadow-icon-vw-hover);
}

/* Desktop- / Tablet- / Mobile-Größen für Icons */
@media (min-width:1025px){
  .partner-card .partnerSMWrap{ gap:0.8vw; margin-top:1.2vw; }
  .partner-card .partnerSM a{ width:2.0vw; height:2.0vw; }
  .partner-card .partnerSM a svg{ width:1.2vw; height:1.2vw; }
}
@media (min-width:768px) and (max-width:1024px){
  .partner-card .partnerSMWrap{ gap:2.0vw; margin-top:2vw; }
  .partner-card .partnerSM a{ width:5.2vw; height:5.2vw; }
  .partner-card .partnerSM a svg{ width:3.2vw; height:3.2vw; }
}
@media (max-width:767px){
  .partner-card .partnerSMWrap{ gap:3.1vw; margin-top:3vw; }
  .partner-card .partnerSM a{ width:10vw; height:10vw; }
  .partner-card .partnerSM a svg{ width:6vw; height:6vw; }
}

/* harte Farb-Overrides */
#com-partner-results .partner-card .partnerSMWrap .partnerSM a,
#all-partners-grid     .partner-card .partnerSMWrap .partnerSM a{ background:var(--cod-color-accent-blue) !important; }
#com-partner-results .partner-card .partnerSMWrap .partnerSM a svg,
#all-partners-grid     .partner-card .partnerSMWrap .partnerSM a svg{ fill:var(--cod-icon-fill,#fff) !important; }



/* TELEGRAM */
.telegram-browser .owl-carousel .owl-stage{ display:flex !important; flex-wrap:nowrap !important; gap:20px; }
.telegram-browser .owl-carousel .owl-item{ min-width:210px !important; }

.el-overlay-dialog .el-dialog__headerbtn,
.el-overlay-dialog .el-dialog__headerbtn:hover,
.el-overlay-dialog .el-dialog__headerbtn:focus{ background-color:transparent !important; border:none !important; box-shadow:none !important; padding:.25rem; }
.elementor-kit-104 .el-overlay-dialog .el-dialog__headerbtn{ background-color:transparent !important; }

/* TYPO & Sonstiges */
.moreEventInfosWrap{
  margin-top:2rem;
  font-size:var(--e-global-typography-text-font-size);
  line-height:var(--e-global-typography-text-line-height);
  font-family:var(--e-global-typography-text-font-family), Sans-serif;
}
.cod-title{ text-align:center; }
.word-with-counter{ position:relative; display:inline-block; white-space:nowrap; }
.word-with-counter .booking-counter{
  position:absolute; left:100%; margin-left:.2em; top:.3em; transform:translateY(-35%);
  font-size:.95em; font-weight:600; line-height:1; color: var(--e-global-color-d49ac81);
}

/* Kleine Fixes */
#creators-results .allEvents .creator-distance{ margin-top:-1em; }



/* === Fix: Tablet-Schatten für Location-Input erzwingen (Creator & Partner) === */
#commCreatorWrap .locationInputWrap,
.comPartnerMainWrap .locationInputWrap{
  overflow: visible !important; /* falls ein Parent clippt */
}

#commCreatorWrap .locationInputWrap input,
.comPartnerMainWrap .locationInputWrap input{
  -webkit-appearance: none;
  appearance: none;
  background-clip: padding-box;
  box-shadow: var(--cod-shadow-input) !important;
  border: none;                                    /* saubere Kante */
}

/* optional: falls Elementor im Tablet gezielt überschreibt, hier noch mal extra */
@media (min-width:768px) and (max-width:1024px){
  #commCreatorWrap .locationInputWrap input,
  .comPartnerMainWrap .locationInputWrap input{
    box-shadow: var(--cod-shadow-input) !important;
  }
}


/* ===== Autocomplete-Dropdown: korrekt unter dem Input, klickbar ===== */
#commCreatorWrap .locationInputWrap,
.comPartnerMainWrap .locationInputWrap{
  position: relative !important;   /* Anker für absolute Positionierung */
  overflow: visible !important;
}

#commCreatorWrap #autocomplete-results,
.comPartnerMainWrap #partner-autocomplete-results{
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: calc(100% + 6px) !important; /* UNTER dem Input */
  z-index: 100000 !important;       /* sicher über allem */
  background: var(--cod-card-bg, #fff);
  border: 1px solid var(--cod-mix-border-15);
  border-radius: 8px;
  box-shadow: var(--cod-shadow-dropdown);
  max-height: 280px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#commCreatorWrap #autocomplete-results li,
.comPartnerMainWrap #partner-autocomplete-results li{
  padding: 10px 12px;
  cursor: pointer;
}

#commCreatorWrap #autocomplete-results li:hover,
.comPartnerMainWrap #partner-autocomplete-results li:hover{
  background: var(--cod-color-bg-soft, #f3f6f9);
}


#eventWrap .intro-like{
  width: 70%;
  max-width: none;
  margin: 20px auto;
  padding: 0 16px;
  text-align: center;
  color: var(--e-global-color-secondary);
}

#eventWrap .intro-like,
#eventWrap .intro-like :where(p, a, li, span, small, strong){
  font-family: var(--e-global-typography-44ebb6b-font-family), Sans-serif;
  font-size: var(--e-global-typography-44ebb6b-font-size);
  line-height: var(--e-global-typography-44ebb6b-line-height);
  font-weight: var(--e-global-typography-44ebb6b-font-weight, 500);
}

#eventWrap .intro-like b,
#eventWrap .intro-like strong{
  color: var(--e-global-color-secondary);
}

@media (max-width:1024px){
  #eventWrap .intro-like{ width: 85%; }
}
@media (max-width:767px){
  #eventWrap .intro-like{ width: 90%; }
}


/* BUTTON STYLING GLEICH WIE ELEMENTOR STANDARD BUTTON*/
/* eigener Button Alle Community Partner anzeigen */
.cod-all-partners-btn{
  display: block;
  width: max-content;
  margin: 20px auto;          /* mittig */
  padding: 10px 20px;
  background: var(--cod-color-accent-blue);        /* basis wie deine blauen buttons */
  color: #fff;
  font-family: var(--e-global-typography-4778b4e-font-family), Sans-serif;
  font-size: var(--e-global-typography-4778b4e-font-size);
  font-weight: 700;
  border: 1px solid transparent;
  border-radius: 4px;
  box-shadow: var(--cod-shadow-soft);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

/* hover nach elementor vorlage */
.cod-all-partners-btn:hover,
.cod-all-partners-btn:focus{
  background-color: var(--e-global-color-d49ac81);
  color: var(--e-global-color-text);
  border-color: var(--e-global-color-d49ac81);
  outline: none;
}

/* optional icon im button */
.cod-all-partners-btn svg{ fill: currentColor; }

/* responsive platzhalter */
@media (max-width:767px){ /* mobile */ }
@media (min-width:768px) and (max-width:1024px){ /* tablet */ }
@media (min-width:1025px){ /* desktop */ }



/*VIDJET VIDEO IN PARTNER PROFIL */
/* overlay für vidjet */
.partner-card{ position:relative; }
.partnerImageWrap{ position:relative; overflow:visible; }
.partnerImageWrap img{ position:relative; z-index:1; display:block; width:100%; height:auto; }
.partnerImageWrap .vidjetEmbed{
  position:absolute; right:10px; bottom:10px;
  width:180px; max-width:45%;
  z-index:9999; pointer-events:auto;
}
.partnerImageWrap .vidjetEmbed iframe{ display:block !important; opacity:1 !important; visibility:visible !important; }
[id*="vidjet"], [class*="vidjet"]{ z-index:100000 !important; }





/* Owl clippt normal, das Bild Overlay darf überstehen */
#com-partner-results .owl-stage-outer{ overflow: hidden !important; }
#com-partner-results .partner-card{ overflow: visible; }
#com-partner-results .partnerImageWrap{ overflow: visible; }

/* Vidjet Badge unten rechts sichtbar und ganz oben */
.partnerImageWrap .vidjetEmbed{ position:absolute; right:10px; bottom:10px; width:180px; max-width:45%; z-index:9999; pointer-events:auto; }
.partnerImageWrap .vidjetEmbed .vidjet-carousel-wrapper{ height:140px !important; }
[id*="vidjet"], [class*="vidjet"]{ z-index:100000 !important; }

/* Portal für großes Video */
.cod-vj-portal{ position:fixed; inset:0; z-index:100000; display:flex; align-items:center; justify-content:center; }
.cod-vj-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.6); }
.cod-vj-frame{ position:relative; width:min(960px, 92vw); height:min(540px, 58vh); box-shadow:var(--cod-shadow-popup); border-radius:10px; overflow:hidden; background:#000; }
.cod-vj-frame iframe{ width:100%; height:100%; display:block; border:0; }
.cod-vj-close{ position:absolute; top:6px; right:8px; font-size:1.75rem; line-height:1; background:#fff; border:0; border-radius:8px; padding:2px 10px; cursor:pointer; }
@media (max-width:768px){ .cod-vj-frame{ width:94vw; height:56vh; } }




/* Wenn Vidjet-Overlay offen ist: Owl-Transforms neutralisieren,
   sonst "springen" fixed-Overlays in transformierten Eltern */
body.vj-open #com-partner-results .owl-stage,
body.vj-open #com-partner-results .owl-item{
  transform: none !important;
}
body.vj-open { overflow: hidden; } /* Scroll unter Overlay sperren */

/* Sicherheitsnetz: Vidjet wirklich über allem */
[id*="vidjet"], [class*="vidjet"]{ z-index: 100000 !important; }
.partnerImageWrap .vidjetEmbed{ z-index: 9999 !important; }


/* COMMUNITY CREATOR*/

  #Freizeitaktivitaeten{
    --cod-text:var(--cod-color-text, #4d4d4d);
    --cod-meta:var(--cod-color-muted, #5a7a99);
    --cod-title-color:var(--cod-color-secondary, var(--e-global-color-secondary, #1f4166));
    --cod-cta:var(--cod-info, #2b86c5);
    --cod-cta2:var(--cod-color-accent-blue, #0ea5e9);
    --cod-soft:#eef6ff;
    --cod-blue:var(--cod-color-accent-blue, #1e90ff);
    --cod-border:var(--cod-mix-secondary-12);
    --cod-card-bg:#fff;
    --cod-accent:var(--cod-color-accent-blue, #0a84ff);
    --cod-price-date-color:var(--cod-info, #2b86c5);
    /* --cod-color-pink/-star/-bg-soft und --cod-danger/-success/-warning hier NICHT
       lokal re-deklarieren: gleichnamige Live-Tokens erben von :root; eine
       Deklaration --x: var(--x, ...) ist ein CSS-Zyklus und macht die Variable
       ungueltig. Fallbacks stehen an den Nutzungsstellen. */
    --cod-card-radius:18px;
    --cod-button-radius:12px;
    --cod-pill-radius:999px;
    --cod-badge-radius:16px;
    --cod-shadow-input:0 12px 28px rgba(21,58,99,.12);
    --cod-shadow-action:0 12px 28px rgba(21,58,99,.18);
    --cod-shadow-action-hover:0 18px 34px rgba(21,58,99,.22);
    --cod-debug-border:rgba(43,134,197,.24);
    --cod-debug-soft:#edf5ff;
    --cod-badge-desktop: 96px;
    --cod-badge-tablet: 80px;
    --cod-badge-mobile: 55px;
    --cod-field-h: 48px;
    --cod-card-pad-x: 14px;
    --cod-surface-soft:#f7fbff;
    --cod-notice-success-bg:linear-gradient(135deg,rgba(236,253,245,.98) 0%,rgba(214,250,235,.96) 100%);
    --cod-notice-success-border:rgba(31,157,103,.22);
    --cod-notice-error-bg:linear-gradient(135deg,rgba(254,242,242,.98) 0%,rgba(255,235,235,.96) 100%);
    --cod-notice-error-border:rgba(193,58,43,.18);
    --cod-notice-info-bg:linear-gradient(135deg,rgba(237,245,255,.98) 0%,rgba(228,241,255,.96) 100%);
    --cod-notice-info-border:rgba(43,134,197,.18);
    --cod-text-lh: 35px; /* Zeilenhöhe des Textes/Placeholders im Feld */
    --cod-events-stage-bg:var(--cod-color-gruen-logo, var(--e-global-color-d7d34cf, #2CCB71));
    position:relative;
    isolation:isolate;
    background:transparent;
  }

  #Freizeitaktivitaeten::before{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:calc(50% - 50vw);
    right:calc(50% - 50vw);
    background:var(--cod-events-stage-bg);
    z-index:-1;
    pointer-events:none;
  }

  /* Icon (bleibt wie bei dir) */
  .cod-loc-field{
    position:relative;
  }
  .cod-loc-field::before{
    content:"";
    position:absolute;
    left:12px;
    top:50%;
    transform:translateY(-50%);
    width:25px;
    height:25px;
    background-color:var(--cod-color-text);
    -webkit-mask: url("../svg/location-dot-solid-full.svg") no-repeat center / contain;
    mask: url("../svg/location-dot-solid-full.svg") no-repeat center / contain;
    pointer-events:none;
  }

  /* placeholder gleich mit ausrichten (sicher für diverse Browser) */
  #location-input::placeholder{
    line-height: var(--cod-text-lh);
  }

  .cod-wrap{
    max-width:1200px;
    margin:0 auto;
    padding:0 28px
  }

  @media (max-width:767px){
    .cod-wrap{
      padding-left:5vw;
      padding-right:5vw;
    }
  }

  /* Location */

  /* Icon im Ortsfeld — 25x25, Farbe #4d4d4d, mit deinem SVG */
  .cod-loc-field{
    position:relative;
  }
  .cod-loc-field::before{
    content:””;
    position:absolute;
    left:12px;
    top:50%;
    transform:translateY(-50%);
    width:25px;
    height:25px;
    background-color:var(--cod-color-text); /* Farbe des Icons */
    -webkit-mask: url("../svg/location-dot-solid-full.svg") no-repeat center / contain;
    mask: url("../svg/location-dot-solid-full.svg") no-repeat center / contain;
    pointer-events:none;
  }

  /* Input selbst ohne Hintergrundbild, mit mehr Platz links fürs Icon
  #location-input{
    background:none !important;
    padding-left:54px;
    padding-top:0;
    padding-bottom:0;
    height:48px;
    line-height:48px;
    display:block;
  } */

  .cod-inner-location{
    display:flex;
    flex-direction:column;
    gap:14px;
    margin:0 ;
    padding:0px 0 60px 0;
    color:var(--cod-text)
  }

  .cod-loc-btnrow{
    display:flex;
    justify-content:center
  }

  .cod-loc-slab{
    position:relative;
    margin:0;
    padding:20px;
  }
  .cod-loc-slab::before{
    content:"";
    position:absolute;
    left:0;
    right:0; /* nicht mehr überstehen */
    top:-2px;
    bottom:-2px;
    background:var(--cod-card-bg, #fff);
    border-radius:12px;
    pointer-events:none;
    z-index:-1;
  }

  .cod-locbar{
    background:var(--cod-card-bg, #fff);
    border:1px solid var(--cod-border);
    border-radius:12px;
    /* etwas kräftigerer shadow */
    box-shadow:var(--cod-shadow-strong);
    padding:16px;
  }

  .cod-btn{
    flex:0 0 auto;
    min-width:240px;
    appearance:none;
    border:0;
    border-radius:8px;
    min-height:56px; /* höher */
    padding:0 22px; /* breiter innenabstand */
    font-size:1.125rem; /* größerer text */
    background:var(--cod-cta);
    color:#fff;
    font-weight:800;
    box-shadow:var(--cod-shadow-strong);
    cursor:pointer;
    text-decoration:none;
    -webkit-tap-highlight-color:transparent;
  }
  .cod-btn:hover,
  .cod-btn:focus,
  .cod-btn:active,
  .cod-btn:visited{
    background:var(--cod-cta);
    color:#fff;
    box-shadow:var(--cod-shadow-strong);
    transform:none;
    filter:none;
    outline:none;
  }

  /* ===== Button-State fix: Farbe bleibt identisch bei Hover/Active/Focus ===== */
  /* ===== Button-State: Farbe fix + sanftes Grow ===== */
  #Freizeitaktivitaeten .cod-btn{
    background-color: var(--cod-cta);
    color:#fff;
    box-shadow:var(--cod-shadow-strong);
    outline:none;
    text-decoration:none;
    -webkit-appearance:none;
    appearance:none;
    -webkit-tap-highlight-color:transparent;
    /* Animation */
    transition: transform .16s ease, box-shadow .16s ease;
    transform: translateZ(0); /* gegen Blurring */
    will-change: transform;
  }

  /* Hover/Focus: leicht wachsen (nur auf Geräten mit Hover) */
  @media (hover:hover){
    #Freizeitaktivitaeten .cod-btn:hover,
    #Freizeitaktivitaeten .cod-btn:focus,
    #Freizeitaktivitaeten .cod-btn:focus-visible{
      background-color: var(--cod-cta) !important;
      color:#fff !important;
      transform: scale(1.03);
      box-shadow:var(--cod-shadow-strong-grow) !important;
    }
  }

  /* Active/Pressed: minimal „press“ */
  #Freizeitaktivitaeten .cod-btn:active{
    background-color: var(--cod-cta) !important;
    color:#fff !important;
    transform: scale(0.98);
    box-shadow:var(--cod-shadow-strong-press) !important;
  }

  /* Firefox Innenrahmen entfernen */
  #Freizeitaktivitaeten .cod-btn::-moz-focus-inner{
    border:0;
  }

  /* Disabled bleibt gleich (keine Farbänderung) */
  #Freizeitaktivitaeten .cod-btn:disabled{
    opacity:1 !important;
    background-color: var(--cod-cta) !important;
    color:#fff !important;
    transform:none !important;
  }

  /* Firefox Innenrahmen entfernen */
  #Freizeitaktivitaeten .cod-btn::-moz-focus-inner {
    border: 0;
  }

  /* selbst wenn disabled: keine Farbänderung */
  #Freizeitaktivitaeten .cod-btn:disabled {
    opacity: 1 !important;
    background-color: var(--cod-cta) !important;
    color: #fff !important;
  }

  @media (max-width:767px){
    /* Button-Reihe: volle Breite, Rand 5% */
    .cod-loc-btnrow{
      padding:0 5vw;
    }
    .cod-loc-btnrow .cod-btn{
      width:100%;
    }
    /* Weißes Panel (hinter Ort + Radius) bis 5% vom Rand */
    .cod-loc-slab{
      padding-left:0;
      padding-right:0;
    }
    .cod-locbar{
      margin:0 ;
    }
  }

  .cod-loc-grid{
    display:grid;
    grid-template-columns: 1fr max-content; /* rechts nur so breit wie nötig */
    gap:12px;
    align-items:center;
  }
  @media (max-width:767px){
    .cod-loc-grid{
      grid-template-columns:1fr;
      align-items:start
    }
  }

  .cod-loc-field{
    position:relative
  }

  .cod-input{
    width:100%;
    min-height:var(--cod-field-h);
    padding:12px 1rem;
    border:1px solid var(--cod-border);
    border-radius:5px;
    font-size:1.125rem;
    box-shadow:var(--cod-shadow-input);
    background:var(--cod-card-bg, #fff)
  }

  /* Ortsfeld: vertikale Zentrierung unabhängig vom .cod-input-Padding */
  #Freizeitaktivitaeten #location-input{
    background:none !important;
    height: var(--cod-field-h); /* 48px */
    line-height: var(--cod-text-lh); /* z.B. 35px */
    padding-top: calc((var(--cod-field-h) - var(--cod-text-lh)) / 2) !important;
    padding-bottom: calc((var(--cod-field-h) - var(--cod-text-lh)) / 2) !important;
    /* horizontal wie gehabt */
    padding-left: 44px;
    padding-right: 14px;
    border: 1px solid var(--cod-border);
    border-radius: 5px;
    box-sizing: border-box;
    display: block; /* kein Flex auf Inputs */
  }

  /* Placeholder ebenfalls mittig */
  #Freizeitaktivitaeten #location-input::placeholder{
    line-height: var(--cod-text-lh);
  }

  .cod-radius-row{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:nowrap
  }
  @media (max-width:767px){
    .cod-radius-row{
      margin-top:6px
    }
  }

 .cod-radius-input{
  width: 4ch; /* Breite anpassen (z.B. 3.5ch–5ch) */
  height: var(--cod-field-h); /* NICHT höher werden */
  padding: 0 .5rem; /* nur seitlich Padding */
  line-height: var(--cod-field-h);
  box-sizing: border-box; /* Breite inkl. Padding/Border */
  text-align: center;
  border: 1px solid var(--cod-border);
  border-radius: 5px;
  box-shadow: var(--cod-shadow-input);
  font-size: 1.125rem;
  -moz-appearance: textfield; /* Firefox: keine Pfeile */
  appearance: textfield;
}

  /* Chrome / Safari: native Pfeile ausblenden */
  #Freizeitaktivitaeten input[type="number"]::-webkit-outer-spin-button,
  #Freizeitaktivitaeten input[type="number"]::-webkit-inner-spin-button{
    -webkit-appearance: none;
    margin: 0;
  }

  /* Einheitlich als Textfeld rendern (auch für WebKit) */
  #Freizeitaktivitaeten input[type="number"]{
    appearance: textfield;
  }

  /* Pfeil-Steuerung neben dem Radius-Feld */
  /* Wrapper jetzt relativ, damit die Pfeile ins Feld positioniert werden */
  .cod-radius-wrapper{
    position: relative;
    display: inline-block;
  }

  /* Pfeile sitzen innerhalb des Inputs, rechts zentriert */
  .cod-radius-controls{
    position:absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 1; /* über dem Input */
    pointer-events: auto;
  }

  /* Buttons ohne Rahmen/Shadow – nur die Pfeile (#4d4d4d) */
  .cod-radius-controls button{
    width: 18px;
    height: 14px;
    padding: 0;
    line-height: 1;
    border: 0;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
    color: var(--cod-color-text); /* Pfeilfarbe */
    font-size: 0.75rem; /* Größe der Pfeile ▲ ▼ */
  }
  .cod-radius-controls button:hover{
    filter: brightness(0.85);
  }
  .cod-radius-controls button:hover{
    background:var(--cod-color-bg-soft, #f3f6fb);
  }

  .cod-umk{
    white-space:nowrap;
  }

  #autocomplete-results{
    position:absolute;
    left:0;
    top:100%;
    margin-top:6px;
    z-index:400000;
    background:var(--cod-card-bg, #fff);
    border:1px solid var(--cod-mix-border-25);
    border-radius:8px;
    display:none;
    box-shadow:var(--cod-shadow-input);
    max-height:260px;
    overflow:auto;
    width:100%
  }
  #autocomplete-results li{
    list-style:none;
    padding:10px 12px;
    cursor:pointer
  }
  #autocomplete-results li:hover{
    background:var(--cod-color-bg-soft, #f3f6fb)
  }

  #Freizeitaktivitaeten input[type="text"]:focus,
  #Freizeitaktivitaeten input[type="number"]:focus,
  #Freizeitaktivitaeten input[type="search"]:focus{
    outline:none !important;
    border-color:var(--cod-border) !important;
    box-shadow:var(--cod-shadow-input) !important;
  }

  /* Creators Karussell */
  .cod-creators-wrap{
    max-width:1200px;
    margin:0 auto 10px auto;
  }

  .cod-creators-intro{
    width:70%;
    margin:12px auto 14px;
    padding:0 16px;
    text-align:center;
    color:var(--e-global-color-secondary);
  }
  @media (max-width:1024px){
    .cod-creators-intro{
      width:85%;
    }
  }
  @media (max-width:767px){
    .cod-creators-intro{
      width:90%;
    }
  }

  #cod-creators-results{
    position:relative;
    overflow:visible;
    padding:0 22px !important;
    --navY:110px;
    --navInset:0px;
    min-height:120px;
  }
  #cod-creators-results .owl-stage-outer{
    overflow:hidden !important;
  }
  #cod-creators-results .owl-nav{
    display:block !important;
    z-index:20;
    pointer-events:auto;
  }
  #cod-creators-results .owl-nav button{
    position:absolute;
    top:var(--navY) !important;
    transform:translateY(-50%);
    width:56px;
    height:56px;
    border:0;
    border-radius:50%;
    background:transparent !important;
    line-height:56px;
    cursor:pointer;
  }
  #cod-creators-results .owl-nav .owl-prev{
    left:var(--navInset) !important;
    right:auto !important;
  }
  #cod-creators-results .owl-nav .owl-next{
    right:var(--navInset) !important;
    left:auto !important;
  }
  #cod-creators-results .owl-nav .owl-prev::before,
  #cod-creators-results .owl-nav .owl-next::before{
    content:'';
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
    font-size:4rem;
    line-height:1;
    color:var(--cod-color-text);
    pointer-events:none;
  }
  #cod-creators-results .owl-nav .owl-prev::before{
    content:'\2039';
  }
  #cod-creators-results .owl-nav .owl-next::before{
    content:'\203A';
  }
  #cod-creators-results .owl-nav button:hover{
    background: var(--cod-mix-text-08);
  }

  @media (max-width:767px){
    /* keine Innenabstände im Karussell-Container */
    #cod-creators-results{
      padding:0 !important;
    }

    /* Pfeile leicht außerhalb des Carousels platzieren */
    #cod-creators-results .owl-nav {
      display:block !important;
    }
    #cod-creators-results .owl-nav .owl-prev{
      left: calc(-5vw - 20px) !important;
      transform: translateY(-50%) !important;
    }
    #cod-creators-results .owl-nav .owl-next{
      right: calc(-5vw - 20px) !important;
      transform: translateY(-50%) !important;
    }

    /* Location-Panel über die 5vw-Ränder hinausziehen */
    .cod-loc-slab{
      margin-left:-5vw;
      margin-right:-5vw;
    }
    /* Weißer Hintergrund dann bündig bis zum Rand */
    .cod-loc-slab::before{
      left:0;
      right:0;
    }

    /* Pfeile etwas kompakter */
    #cod-creators-results .owl-nav button{
      width:44px;
      height:44px;
    }
  }

  @media (min-width:768px) and (max-width:1024px){
    /* Location-Slab über volle Breite ziehen */
    .cod-loc-slab {
      margin-left: -26px;
      margin-right: -26px;
    }
    .cod-loc-slab::before {
      left: 0;
      right: 0;
    }
  }

  @media (min-width:768px) and (max-width:1024px){
    #cod-creators-results{
      --navInset:-46px; /* Pfeile wieder 20px weiter nach außen */
      padding:0 24px !important;
    }

    .cod-loc-slab {
      margin-left: -55px;
      margin-right: -55px;
    }
    .cod-loc-slab::before {
      left: 0;
      right: 0;
    }
  }

  /* Desktop: Pfeile wieder nach außen */
  @media (min-width:1025px){
    #cod-creators-results{
      --navInset:-46px; /* bei Bedarf -50px oder -56px testen */
      padding:0 28px !important; /* dein bisheriger Desktop-Innenabstand */
    }
  }

  .cod-creator-item{
    text-align:center;
    transition:transform .2s ease;
    margin:0 auto;
  }


  .cod-creator-item img{
    display:block;
    width:100%;
    max-width:200px;
    margin:0 auto 5px;
    aspect-ratio:1/1;
    object-fit:cover;
    object-position:center top;
    border:4px solid var(--cod-border, rgb(213,216,218));
    border-radius:30px; /* standard für desktop */
  }



  /* mobile kleiner radius */
  @media (max-width:767px){
    .cod-creator-item img{
      border-radius:22px;
    }
  }

/* Basis (falls ein Breakpoint mal nicht greift) */
#cod-creators-results .cod-creator-item img{
  box-sizing: border-box;
  border:4px solid var(--cod-border, rgb(213,216,218));
}
#cod-creators-results .cod-creator-item.active img{
  border-color:var(--cod-color-star, #FFCD02);
}

/* Handy (0–767px) */
@media (max-width:767px){
  #cod-creators-results .cod-creator-item img{ border-width:4px; }
  #cod-creators-results .cod-creator-item.active img{ border-width:4px; }
}

/* Tablet (768–1024px) */
@media (min-width:768px) and (max-width:1024px){
  #cod-creators-results .cod-creator-item img{ border-width:5px; }
  #cod-creators-results .cod-creator-item.active img{ border-width:6px; }
}

/* Desktop (ab 1025px) */
@media (min-width:1025px){
  #cod-creators-results .cod-creator-item img{ border-width:6px; }
  #cod-creators-results .cod-creator-item.active img{ border-width:8px; }
}




  .cod-creator-item.cod-all img,
  .cod-creator-item.cod-online img,
  .cod-creator-item.cod-become img{
    padding:.5rem;
    background:var(--cod-card-bg, #fff);
    object-position:center center;
  }

  .cod-creator-item .creator-title{
    font-family: var(--e-global-typography-dbdb71b-font-family, var(--e-global-typography-44ebb6b-font-family, system-ui, sans-serif));
    font-size: var(--e-global-typography-dbdb71b-font-size, 1.05rem);
    font-weight: var(--e-global-typography-dbdb71b-font-weight, 700);
    line-height: var(--e-global-typography-dbdb71b-line-height, 1.2);
    margin:.5rem 0 .25rem;
    color:var(--e-global-color-secondary);
    -webkit-hyphens:auto;
    hyphens:auto;
    overflow-wrap:break-word;
    word-break:break-word;
  }
  .cod-creator-item .creator-distance{
    font-size: var(--e-global-typography-887c3e7-font-size, 1.05rem);
    line-height: var(--e-global-typography-887c3e7-line-height, 1.2);
    margin:.3rem 0 .4rem;
    color:var(--e-global-color-secondary);
  }
  .cod-trigger-detect-location{
    color:var(--e-global-color-d49ac81) !important;
    text-decoration:underline;
    font-weight:600;
  }

  /* Suche und Events */
  .cod-inner-events{
    display:flex;
    flex-direction:column;
    gap:14px;
    color:var(--cod-text)
  }

  .cod-area{
    position:relative
  }
  .cod-area::before{
    content:"";
    position:absolute;
    left:-20px;
    right:-20px;
    top:-20px;
    bottom:-20px;
    background:var(--cod-card-bg, #fff);
    border-radius:12px;
    box-shadow:var(--cod-shadow-input);
    pointer-events:none
  }

  /* Zähler Zeile über der Suche */
  .cod-field-caption{
    margin:0 0 6px 0;
    color:var(--e-global-color-secondary);
    font-weight:600;
  }
  .cod-field-caption .cod-caption-count{
    font-weight:800;
  }

  /* Suche grid */
  .cod-search-wrap{
    position:relative;
    margin-bottom:14px;
    z-index:1;
  }
  .cod-search-grid{
    display:grid;
    grid-template-columns: 1fr auto;
    gap:12px;
    align-items:center;
  }
  .cod-search-box{
    position:relative;
  }
  .cod-search-box .ico{
    position:absolute;
    left:16px;
    top:50%;
    transform:translateY(-50%);
    width:24px;
    height:24px;
    opacity:.65;
    pointer-events:none;
    z-index:1;
  }
  .cod-search{
    width:100%;
    min-height:var(--cod-field-h);
    padding:12px 14px 12px 1rem;
    border:1px solid var(--cod-border);
    border-radius:10px;
    font-size:1.125rem;
    background:var(--cod-card-bg, #fff);
    box-shadow:var(--cod-shadow-input)
  }
  @media (min-width:768px){
    #Freizeitaktivitaeten input.cod-search[type="search"]{
      padding-left:45px !important;
    }
  }

  .cod-search-actions{
    display:flex;
    gap:10px;
    align-items:center;
  }

  .cod-calendar-btn,
  .cod-clear-btn{
    height:var(--cod-field-h);
    display:inline-flex;
    align-items:center;
    gap:10px;
    border:1px solid var(--cod-border);
    border-radius:10px;
    box-shadow:var(--cod-shadow-input);
    padding:0 14px;
    color:#fff;
    font-weight:700;
    cursor:pointer;
    background:var(--cod-cta);
  }
  .cod-calendar-btn img,
  .cod-clear-btn img{
    width:30px;
    height:30px;
    display:block;
    filter:brightness(0) invert(1);
  }
  .cod-calendar-btn .lbl{
    white-space:nowrap
  }

  /* Müllkübel mittig und kompakt */
  #Freizeitaktivitaeten .cod-clear-btn{
    background:var(--cod-danger, #C13A2B) !important;
    padding:0 !important;
    width:var(--cod-field-h);
    min-width:var(--cod-field-h);
    height:var(--cod-field-h);
    display:flex;
    align-items:center;
    justify-content:center;
    line-height:0;
  }
  #Freizeitaktivitaeten .cod-clear-btn img{
    width:22px;
    height:22px;
    display:block;
    filter:brightness(0) invert(1);
  }
  #Freizeitaktivitaeten .cod-clear-btn:hover,
  #Freizeitaktivitaeten .cod-clear-btn:focus{
    background:var(--cod-danger, #C13A2B) !important;
    color:#fff !important;
  }

  /* Popover */
  .cod-date-popover{
    position:absolute;
    right:0;
    top:calc(100% + 8px);
    z-index:10001;
    width:340px;
    padding:12px;
    background:var(--cod-card-bg, #fff);
    border:1px solid var(--cod-border);
    border-radius:10px;
    box-shadow:var(--cod-shadow-input);
    display:none
  }
  .cod-date-popover.open{
    display:block
  }
  .cod-date-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:10px
  }

  /* === Date-Inputs: nur EIN Kalender-Icon === */
  .cod-date-popover .date-field{
    position:relative;
  }

  /* input selbst: kein background icon, nur platz fürs icon rechts */
  .cod-date-popover .date-field input[type="date"]{
    width:100%;
    min-height:48px;
    padding:10px 44px 10px 12px; /* rechts platz für unser icon */
    border:1px solid var(--cod-border);
    border-radius:8px;
    font-size:1rem;
    box-shadow:var(--cod-shadow-input);
    text-align:left;
    background:none; /* wichtig: kein zweites icon */
    -webkit-appearance:none;
    appearance:none;
  }

  /* unser einziges icon rechts */
  .cod-date-popover .date-field::after{
    content:"";
    position:absolute;
    right:10px;
    top:50%;
    transform:translateY(-50%);
    width:20px;
    height:20px;
    background-color:var(--cod-color-text);
    -webkit-mask:url("../svg/calendar-days-solid-full.svg") no-repeat center/contain;
    mask:url("../svg/calendar-days-solid-full.svg") no-repeat center/contain;
    pointer-events:none;
  }

  /* chrome edge safari: natives picker icon komplett ausblenden */
  .cod-date-popover .date-field input[type="date"]::-webkit-calendar-picker-indicator{
    opacity:0 !important;
    display:none !important;
  }

  /* ios sonderfall: picker klickbar lassen, aber unsichtbar
  @supports (-webkit-touch-callout: none){
    .cod-date-popover .date-field input[type="date"]{
      -webkit-appearance: menulist;
      appearance:auto;
      background:none;
    }
    .cod-date-popover .date-field input[type="date"]::-webkit-calendar-picker-indicator{
      opacity:0 !important;
      display:block !important;
      position:absolute;
      right:0;
      top:0;
      width:44px;
      height:100%;
      cursor:pointer;
    }
  }*/

  /* du hast unten schon tablet und mobile höhen angepasst – die bleiben bestehen */

  /* Unser einziges Icon (per Mask, dadurch frei einfärbbar) */
  /* === Date-Inputs: EIN Icon (#4d4d4d) + iOS-kompatibel === */
  .cod-date-popover .date-field::after{
    content:"";
    position:absolute;
    right:10px;
    top:50%;
    transform:translateY(-50%);
    width:20px;
    height:20px;
    background-color:var(--cod-color-text);
    -webkit-mask:url("../svg/calendar-days-solid-full.svg") no-repeat center/contain;
    mask:url("../svg/calendar-days-solid-full.svg") no-repeat center/contain;
    pointer-events:none; /* blockiert keine Klicks */
  }

  /* iPhone/iPad: native Picker aktiv lassen */
  @supports (-webkit-touch-callout: none) {
    .cod-date-popover .date-field input[type="date"]{
      -webkit-appearance: menulist; /* iOS-Picker wieder aktiv */
      appearance: auto;
      background:none;
    }
    .cod-date-popover .date-field input[type="date"]::-webkit-calendar-picker-indicator{
      opacity:0;
      display:block;
      position:absolute;
      right:0;
      top:0;
      width:44px;
      height:100%; /* große Hit-Area für Finger */
      cursor:pointer;
    }
  }

  /* Tablet: niedriger machen */
  @media (max-width:1024px){
    .cod-date-popover .date-field input[type="date"]{
      min-height:50px;
      font-size:1.0625rem;
      padding:10px 46px 10px 14px;
    }
  }

  /* Mobile: noch niedriger + Popover-Breite */
  @media (max-width:767px){
    .cod-date-popover{
      left:50%;
      right:auto;
      transform:translateX(-50%);
      width:calc(100vw - 32px);
      max-width:480px;
    }
    .cod-date-popover .date-field input[type="date"]{
      min-height:46px;
      font-size:1rem;
      padding:9px 48px 9px 14px;
    }
    .cod-date-popover .date-field::after{
      width:22px;
      height:22px;
    }
  }

  .cod-presets{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin:0 0 15px 0
  }
  .cod-preset{
    appearance:none;
    border:0;
    border-radius:999px;
    padding:6px 10px;
    background:var(--cod-success, #1f9d67);
    color:#fff;
    font-weight:700;
    font-size:0.8125rem;
    cursor:pointer
  }
  .cod-date-actions{
    display:flex;
    gap:8px;
    justify-content:flex-end;
    margin-top:8px
  }
  .cod-date-apply,
  .cod-date-clear{
    appearance:none;
    border:0;
    border-radius:8px;
    padding:10px 14px;
    font-weight:700;
    cursor:pointer;
    box-shadow:var(--cod-shadow-input)
  }
  .cod-date-apply{
    background:var(--cod-cta);
    color:#fff
  }
  .cod-date-clear{
    background:var(--cod-soft)
  }

  /* Karten */
  .cod-card{
    position:relative;
    background:linear-gradient(180deg,rgba(255,255,255,.99) 0%,rgba(247,250,255,.96) 100%);
    border:1px solid var(--cod-border);
    border-radius:var(--cod-card-radius);
    padding:12px var(--cod-card-pad-x) 14px 14px;
    box-shadow:var(--cod-shadow-card);
    overflow:hidden;
    margin-bottom:20px
  }
  .cod-leftbar{
    position:relative;
    left:0;
    top:0;
    bottom:auto;
    width:8px;
    background:var(--cod-blue);
    border-radius:12px
  }
  .cod-bottombar{
    display:none;
    height:8px;
    background:var(--cod-blue);
    border-radius:8px;
    margin-top:10px
  }
  .cod-date{
    position:relative;
    display:flex;
    align-items:center;
    gap:10px;
    margin:0 84px 10px 22px;
    font-weight:700;
    font-size:0.875rem;
    color:var(--cod-accent)
  }
  .cod-date .row{
    display:flex;
    gap:8px;
    flex-wrap:wrap
  }
  .cod-date .t .end::before{
    content:" - ";
  }
  .cod-date .cod-badge{
    position:absolute;
    top:0;
    right:-23px;
    cursor:pointer;
  }
  .cod-date .cod-price-chip{
    position:absolute;
    top:-5px;
    right:calc(var(--cod-badge-mobile) + 5px);
  }

  /* ENTFERNT am 06.08.2026: Das komplette Chip-Aussehen stand hier ein zweites
     Mal - und zwar mit var(--cod-soft) statt der Dashboard-Farbe. Der Block war
     bereits wirkungslos, weil .cod-info-chip weiter unten in derselben Datei
     steht und bei gleicher Spezifitaet die spaetere Regel gewinnt (ein @media
     aendert daran nichts). Gemessen: An allen vier Breiten dieselben Werte vor
     und nach dem Entfernen.
     Die Regeln fuer POSITION (.cod-date .cod-price-chip) und die
     Schriftstaffelung je Breite bleiben - das ist Karten-Layout, nicht
     Chip-Aussehen, und die Staffelung traegt !important. */

  .cod-badge{
    width:var(--cod-badge-desktop);
    height:var(--cod-badge-desktop);
    border:2px solid var(--cod-color-star, #FFCD02);
    border-radius:var(--cod-badge-radius);
    overflow:hidden;
    background:var(--cod-card-bg, #fff);
    box-shadow:var(--cod-shadow-input)
  }
  .cod-badge img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center
  }

  .cod-media{
    position:relative;
    border-radius:10px;
    overflow:hidden;
    margin-left:22px;
    width:calc(100% - 22px)
  }
  .cod-media::before{
    content:"";
    display:block;
    padding-top:70%
  }
  .cod-media img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center
  }

 .cod-card .cod-title{
  font-size:0.875rem !important;
  line-height:1.25 !important;
  font-weight:700 !important;
  margin:10px 0 6px 22px;
  color:var(--cod-title-color);
  text-align:left;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  line-clamp:3;
  -webkit-line-clamp:3;
  overflow:hidden;
  text-overflow:ellipsis;
  max-height:calc(1.25em * 3);
  text-transform:none !important;
}

  .cod-place,
  .cod-dist{
    /* Mit der Kartenbreite skaliert (--cod-card-ui-scale, ohne Nachführung 1). */
    font-size: max(var(--cod-card-min-font, 13px), calc(1rem * var(--cod-card-ui-scale, 1))) !important;
    line-height:1.35 !important
  }
  .cod-info-line{
    display:block
  }
  .cod-place{
    display:block;
    margin:3px 0 2px -0px
  }
  .cod-dist{
    display:block;
    margin:0 0 10px -0px
  }

  .cod-actions{
    display:flex;
    flex-wrap:nowrap;
    gap:12px;
    z-index:3;
    margin-left:22px;
    justify-content:flex-end;
    padding-right:var(--cod-card-pad-x)
  }

  .cod-cta,
  .cod-cta.secondary{
    appearance:none;
    border:0;
    border-radius:var(--cod-button-radius);
    padding:12px 16px;
    color:#fff !important;
    font-weight:700;
    text-decoration:none;
    font-size:0.875rem;
    white-space:nowrap;
    box-shadow:var(--cod-shadow-action);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:46px;
    box-sizing:border-box;
    transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
  }
  .cod-cta{
    background:linear-gradient(135deg,var(--cod-cta) 0%, var(--cod-info) 100%)
  }
  .cod-cta.secondary{
    background:linear-gradient(135deg,var(--cod-cta2,var(--cod-color-accent-blue,#0ea5e9)) 0%, var(--cod-cta,var(--cod-info,#2b86c5)) 100%)
  }
  .cod-cta span{
    display:inline-block;
    line-height:1
  }
  .cod-cta:hover,
  .cod-cta:focus,
  .cod-cta.secondary:hover,
  .cod-cta.secondary:focus{
    transform:translateY(-1px);
    box-shadow:var(--cod-shadow-action-hover);
    filter:brightness(1.02);
  }

  #Freizeitaktivitaeten .cod-actions .cod-cta.cod-info,
  #Freizeitaktivitaeten .cod-actions .cod-cta.cod-info:visited{
    background:var(--cod-info, #2b86c5) !important;
    color:#fff !important;
    opacity:1 !important;
    filter:none;
  }

  #Freizeitaktivitaeten .cod-actions .cod-cta.cod-info:hover,
  #Freizeitaktivitaeten .cod-actions .cod-cta.cod-info:focus{
    background:var(--cod-info, #2b86c5) !important;
    color:#fff !important;
    opacity:1 !important;
    filter:brightness(1.04);
  }

  .cod-debug-panel{
    position:relative;
    padding:18px 20px;
    border:1px dashed var(--cod-debug-border);
    border-radius:var(--cod-card-radius);
    background:linear-gradient(180deg,rgba(255,255,255,.99) 0%,rgba(247,250,255,.96) 100%);
    box-shadow:var(--cod-shadow-card);
  }
  .cod-debug-title{
    margin:0 0 12px 0;
    font-size:0.9375rem;
    font-weight:700;
    color:var(--cod-title-color);
  }
  .cod-debug-grid{
    display:grid;
    grid-template-columns:repeat(6, minmax(0, 1fr));
    gap:12px;
  }
  .cod-debug-card{
    background:var(--cod-debug-soft);
    border-radius:16px;
    padding:12px 14px;
    box-shadow:var(--cod-shadow-inset-light);
  }
  .cod-debug-label{
    display:block;
    font-size:0.75rem;
    font-weight:700;
    letter-spacing:.02em;
    text-transform:uppercase;
    color:var(--cod-meta);
    margin-bottom:6px;
  }
  .cod-debug-value{
    display:block;
    font-size:1rem;
    font-weight:700;
    color:var(--cod-title-color);
  }
  .cod-debug-status{
    margin-top:12px;
    font-size:0.875rem;
    color:var(--cod-meta);
  }

  .cod-form-field,
  .cod-form-field[type="text"],
  .cod-form-field[type="email"],
  .cod-form-field[type="password"],
  .cod-form-field[type="search"],
  .cod-form-field[type="number"],
  .cod-form-field[type="url"],
  .cod-form-field select,
  select.cod-form-field,
  textarea.cod-form-field{
    width:100%;
    min-height:var(--cod-field-h);
    padding:12px 14px;
    border:1px solid var(--cod-border);
    border-radius:12px;
    background:rgba(255,255,255,.96);
    color:var(--cod-text);
    box-shadow:var(--cod-shadow-input);
    box-sizing:border-box;
    transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease;
  }

  .cod-form-field:focus,
  .cod-form-field:focus-visible,
  select.cod-form-field:focus,
  textarea.cod-form-field:focus{
    outline:none;
    border-color:rgba(43,134,197,.34);
    box-shadow:var(--cod-shadow-focus-ring), var(--cod-shadow-input);
  }

  .cod-notice{
    padding:14px 16px;
    border-radius:12px;
    border:1px solid transparent;
    box-shadow:var(--cod-shadow-input);
    color:var(--cod-text);
  }
  .cod-notice--success{
    background:var(--cod-notice-success-bg);
    border-color:var(--cod-notice-success-border);
    color:var(--cod-success, #1f9d67);
  }
  .cod-notice--error{
    background:var(--cod-notice-error-bg);
    border-color:var(--cod-notice-error-border);
    color:var(--cod-danger, #C13A2B);
  }
  .cod-notice--info{
    background:var(--cod-notice-info-bg);
    border-color:var(--cod-notice-info-border);
    color:var(--cod-title-color);
  }

  .cod-empty-state{
    padding:18px 20px;
    border:1px solid var(--cod-border);
    border-radius:var(--cod-card-radius);
    background:linear-gradient(180deg,#fff 0%,var(--cod-surface-soft) 100%);
    box-shadow:var(--cod-shadow-card);
    color:var(--cod-meta);
    text-align:center;
  }

  .cod-modal-shell{
    background:linear-gradient(180deg,rgba(255,255,255,.99) 0%,rgba(247,250,255,.96) 100%);
    border:1px solid rgba(255,255,255,.42);
    border-radius:22px;
    box-shadow:var(--cod-shadow-deep);
  }

  @media (prefers-reduced-motion:reduce){
    .cod-cta,
    .cod-form-field,
    .cod-notice,
    .cod-empty-state,
    .cod-modal-shell{
      transition:none!important;
      animation:none!important;
    }
  }

  @media (max-width:767px){
    .cod-leftbar{
      display:none
    }
    .cod-bottombar{
      display:block
    }

    .cod-search-box .ico{
      display:none;
    }
    .cod-search-grid{
      grid-template-columns: 1fr auto;
    }
    .cod-search-wrap.has-date .cod-search-grid{
      grid-template-columns: 1fr;
    }
    .cod-search-wrap.has-date .cod-search-actions{
      margin-top:8px;
    }
    .cod-calendar-btn .lbl{
      display:none;
    }
    .cod-search-wrap.has-date .cod-calendar-btn .lbl{
      display:inline;
    }

    .cod-card{
      position:relative;
    }
    /* Beide Selektoren gemeinsam: Das Abzeichen liegt im Datumsbereich, dort
       greift sonst die Grundregel mit right:-23px und schiebt es aus der Karte. */
    .cod-card .cod-badge,
    .cod-date .cod-badge{
      position:absolute !important;
      top:5px;
      right:12px;
      bottom:auto;
      left:auto;
      width:var(--cod-badge-mobile);
      height:var(--cod-badge-mobile);
      margin:0;
      z-index:10;
    }
    .cod-date .cod-price-chip{
      right: calc(var(--cod-badge-mobile) + 11px) !important;
    }

    .cod-media{
      margin:5px 0 0 0;
      width:100%;
    }

    .cod-date{
      /* Rechts Platz für das Creator-Abzeichen freihalten. Es liegt hier
         absolut in der Karte (top:5px, right:12px) und legte sich sonst über
         Datum und Preis. Am Desktop passiert das nicht, dort sitzt es in einer
         eigenen Rasterspalte. */
      margin:0 calc(var(--cod-badge-mobile) + 20px) 8px 0;
      --cod-date-lh: 20px;
      --cod-date-gap: 6px;
    }
    .cod-date,
    .cod-date .row,
    .cod-date .t,
    .cod-date .only-date,
    .cod-date .only-time,
    .cod-date .start,
    .cod-date .end{
      line-height: var(--cod-date-lh) !important;
    }
    .cod-date .row{
      display:flex;
      flex-direction:column;
      gap:var(--cod-date-gap);
    }
    .cod-date .only-date{
      display:block;
      margin:0;
    }
    .cod-date .only-time{
      display:block;
      margin:0;
    }
    .cod-date .t{
      position:relative;
      display:flex;
      flex-direction:column;
      gap:var(--cod-date-gap);
    }
    .cod-date .t .start,
    .cod-date .t .end{
      display:block;
      margin:0;
    }
    .cod-date .t .end::before{
      content:"";
    }
    .cod-date .t::after{
      content:"";
      position:absolute;
      left:50%;
      top: calc(var(--cod-date-lh) + (var(--cod-date-gap) / 2));
      transform: translate(-50%, -50%);
      width:15%;
      height:2px;
      background: var(--cod-accent);
      border-radius:2px;
      pointer-events:none;
    }

    .cod-card .cod-title,
    .cod-place,
    .cod-dist,
    .cod-actions{
      margin-left:0;
    }

    .cod-actions{
      display:flex;
      gap:10px;
      padding:0 0;
      justify-content:flex-start;
      flex-wrap:nowrap;
    }

    .cod-cta,
    .cod-cta.secondary{
      min-height:44px;
      padding:12px 14px;
    }

    .cod-price-chip{
      font-size:0.875rem;
    }
  }

  @media (min-width:768px) and (max-width:1024px){
    .cod-card{
      position:relative;
      padding-bottom:20px;
    }

    .cod-row{
      display:grid;
      /* minmax(0, 1fr): Eine 1fr-Spalte hat als Untergrenze ihre min-content-Breite
         und sprengt sonst die Karte. Gemessen am 02.08.2026 bei 820 px: 931 px
         Raster in einer 679 px breiten Karte. */
      grid-template-columns: 18px 180px minmax(0, 1fr) 240px;
      grid-template-rows: auto 1fr auto auto;
      grid-column-gap:20px;
      align-items:start;
    }

    .cod-row > *{
      min-width:0;
    }

    .cod-media{
      grid-column:2/3;
      grid-row:2/4;
      margin:0;
      width:100%;
      transform:translateX(-23px);
      align-self:stretch;
    }

    .cod-date{
      grid-column:2/5;
      grid-row:1/2;
      /* Platz für das Creator-Abzeichen: Es liegt absolut und ragt mit
         right:-23px nach rechts heraus, überlagerte hier also den Preis. */
      margin:0 calc(var(--cod-badge-tablet) + 10px) 8px 0;
      gap:14px;
      font-size:1.125rem;
      color:var(--cod-color-text);
      transform:translateX(-23px);
      position:static !important;
    }
    .cod-card .cod-price-chip{
      position:absolute !important;
      top:7px !important;
      right:12px !important;
      z-index:5;
      font-size:1.125rem !important;
    }

   .cod-card .cod-title{
  grid-column:3/5;
  grid-row:2/3;
  margin:0 0 10px 0;
  margin-left:-20px !important;
  font-size:1.125rem !important;
  max-width:none !important;
  padding-right:140px;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  line-clamp:2;
  -webkit-line-clamp:2;
  overflow:hidden;
}

    .cod-info-line{
      grid-column:3/4;
      grid-row:3/4;
      display:flex;
      flex-direction:column;
      gap:6px;
      align-self:end;
      margin-left:-20px !important;
      transform:translateY(14px);
    }
    .cod-place,
    .cod-dist{
      margin-left:0 !important;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .cod-actions{
      grid-column:2/5;
      grid-row:4/5;
      display:flex;
      gap:12px;
      align-items:center;
      justify-content:flex-start;
      align-self:end;
      margin:16px 0 -3px 0 !important;
      padding-right:calc(var(--cod-badge-tablet) + 16px);
      transform:translateX(-23px);
    }

    /* Abzeichen des Community Creators: oben rechts in der Karte.
       Vorher stand hier bottom:12px (also unten) UND eine zweite Regel setzte
       es bei .cod-date wieder auf static. Da das Abzeichen im Datumsbereich
       liegt, gewann die zweite Regel - es landete mitten im Textfluss zwischen
       Datum und Preis. */
    .cod-card .cod-badge,
    .cod-date .cod-badge{
      position:absolute !important;
      top:12px;
      right:12px;
      bottom:auto;
      left:auto;
      width:var(--cod-badge-tablet);
      height:var(--cod-badge-tablet);
      margin:0;
      z-index:3;
    }
  }

  @media (min-width:1025px){
    .cod-card{
      padding:12px var(--cod-card-pad-x) 14px 14px
    }

    .cod-row{
      display:grid;
      /* minmax(0, 1fr) - Begründung im Tablet-Block darüber. */
      grid-template-columns: 18px 190px minmax(0, 1fr) 260px;
      grid-template-rows: auto 1fr auto;
      grid-column-gap:20px;
      align-items:start;
    }

    .cod-row > *{
      min-width:0;
    }

    .cod-media{
      grid-column:2/3;
      grid-row:2/4;
      margin:0;
      width:100%;
      transform:translateX(-23px);
      align-self:stretch;
    }

    .cod-date{
      grid-column:2/5;
      grid-row:1/2;
      margin:0 0 8px 0;
      gap:16px;
      font-size:1.25rem;
      color:var(--cod-color-text);
      transform:translateX(-23px)
    }
    .cod-date .row .only-date{
      display:inline !important;
      margin-right:8px;
    }
    .cod-date .row .only-time{
      display:inline !important;
    }

    .cod-card .cod-title{
      grid-column:3/5;
      grid-row:2/3;
      margin:0 0 12px 0;
      max-width:calc(100% - 260px);
      align-self:start;
      margin-left:-20px !important;
      font-size:1.25rem !important;
    }

    .cod-price-chip{
      font-size:1.25rem !important;
    }
    .cod-date .cod-price-chip{
      right: calc(var(--cod-badge-mobile) + 35px) !important;
    }

    .cod-info-line{
      grid-column:3/4;
      grid-row:3/4;
      margin-left:0 !important;
      transform:translateX(-20px);
    }

    .cod-actions{
      grid-column:4/5;
      grid-row:3/4;
      justify-content:flex-end;
      align-items:center;
      align-self:end;
      padding-right:0;
    }
  }

  @media (min-width:1025px) and (max-width:1240px){
    .cod-card .cod-badge{
      position:absolute !important;
      right:12px;
      bottom:12px;
      width:var(--cod-badge-tablet);
      height:var(--cod-badge-tablet);
      margin:0;
      z-index:3;
    }
    .cod-date .cod-badge{
      position:static !important;
    }
    .cod-actions{
      padding-right: calc(var(--cod-badge-tablet) + 16px);
    }
    .cod-card .cod-title{
      padding-right: calc(var(--cod-badge-tablet) + 28px);
    }
  }

  @media (max-width:900px){
    .cod-debug-grid{
      grid-template-columns:repeat(3, minmax(0, 1fr));
    }
  }
  @media (max-width:560px){
    .cod-debug-grid{
      grid-template-columns:repeat(2, minmax(0, 1fr));
    }
  }

  /* === Load More Button === */
  .cod-load-more-wrap{
    display:flex;
    justify-content:center;
    align-items:center;
    padding:10px 0 22px;
    position:relative;
    z-index:1;
    display:flex !important;
    opacity:1 !important;
    visibility:visible !important;
  }
  .cod-load-more{
    appearance:none;
    border:0;
    border-radius:999px;
    padding:12px 22px;
    font-weight:800;
    font-size:1rem;
    cursor:pointer;
    background:var(--e-global-color-d7d34cf) !important;
    color:#fff !important;
    box-shadow:var(--cod-shadow-btn);
    transition:transform .05s ease, box-shadow .15s ease, filter .15s ease;
    display:inline-flex;
    align-items:center;
    gap:10px;
  }
  .cod-load-more:hover{
    filter:brightness(1.05);
  }
  .cod-load-more:active{
    transform:translateY(1px);
    box-shadow:var(--cod-shadow-btn-press);
  }

  /* ==== Radiusfeld fix: überall schmal halten ==== */
  /* Zweite Spalte soll nur so breit wie der Inhalt sein */
  .cod-loc-grid{
    grid-template-columns: 1fr auto !important;
  }
  /* Labels nicht umbrechen */
  .cod-umk,
  .cod-km {
    white-space: nowrap;
  }
  /* Das Number-Feld wirklich schmal machen */
  .cod-radius-row .cod-radius-input,
  #codRadius {
    width: 8.5ch !important; /* Breite: ca. 4 Ziffern */
    max-width: 8.5ch !important; /* Sicherheitsgrenze */
    flex: 0 0 auto !important; /* Flex darf es nicht strecken */
    box-sizing: border-box;
    height: var(--cod-field-h); /* gleiche Höhe wie Ort */
    line-height: var(--cod-field-h);
    padding: 0 .5rem; /* nur seitlich etwas Luft */
    padding-right: 34px;
  }
  /* Falls irgendein Globalstil number-Inputs auf 100% setzt, neutralisieren */
  .cod-loc-grid input[type="number"]{
    width: auto !important;
  }

  /* === Mobile: Ort oben, Radius-Zeile darunter === */
  @media (max-width: 767px){
    .cod-loc-grid{
      grid-template-columns: 1fr !important; /* wieder einspaltig */
      align-items: start;
    }
    .cod-radius-row{
      margin-top: 6px;
      justify-content: flex-start;
    }
  }
  @media (max-width: 767px){
    .cod-radius-row{
      margin-top: 6px;
      justify-content: flex-start; /* Inhalte linksbündig */
      text-align: left; /* Text links */
      width: 100%; /* volle Breite */
      padding-left: 2px;
    }
  }

  /* Desktop: bündig mit Karussell */
  @media (min-width:1025px){
    .cod-loc-slab{
      padding-left:28px;
      padding-right:28px;
    }
  }
  /* Tablet: bündig mit Karussell */
  @media (min-width:768px) and (max-width:1024px){
    .cod-loc-slab{
      padding-left:24px;
      padding-right:24px;
    }
  }

  /* Fixe Schriftgröße für Labels im Radiusbereich */
  #Freizeitaktivitaeten .cod-umk,
  #Freizeitaktivitaeten .cod-km {
    font-size: 1.0625rem; /* gleiche Größe wie Ort-Eingabe */
    line-height: var(--cod-field-h);
    flex-shrink: 0; /* verhindert kleiner werden bei engem Platz */
  }
  /* Mobile: "km anzeigen" zweizeilig erzwingen */
  @media (max-width:767px){
    #Freizeitaktivitaeten .cod-radius-row{
      display:flex;
      align-items:center;
      gap:10px;
      flex-wrap: nowrap; /* <- wichtig: nicht umbrechen */
    }
  }
  /* Standard: bleibt einzeilig neben dem Input */
  #Freizeitaktivitaeten .cod-km{
    display:inline-block;
    white-space: nowrap;
    line-height: var(--cod-field-h);
    margin-left: 0px;
  }

  #cod-creator-intro {
    width: 100%;
    padding-left: 2vw;
    padding-right: 2vw;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
    margin-bottom: 50px; /* Abstand nach unten */
  }
  /* Tablet */
  @media (min-width:768px) and (max-width:1024px){
    #cod-creator-intro{
      padding-top: 30px; /* anpassen wie du willst */
    }
  }
  /* Desktop */
  @media (min-width:1025px){
    #cod-creator-intro{
      padding-top: 50px; /* anpassen wie du willst */
    }
  }

  #Freizeitaktivitaeten .cod-creators-intro,
  #Freizeitaktivitaeten .cod-field-caption,
  #Freizeitaktivitaeten .cod-umk,
  #Freizeitaktivitaeten .cod-km {
    font-family: var(--e-global-typography-44ebb6b-font-family, system-ui, sans-serif);
    font-size: var(--e-global-typography-44ebb6b-font-size, 1rem);
    font-weight: var(--e-global-typography-44ebb6b-font-weight, 400);
    line-height: var(--e-global-typography-44ebb6b-line-height, 1.4);
    color: var(--e-global-color-secondary);
  }

  /* Zahl in der Zählerzeile größer und fett */
  #Freizeitaktivitaeten .cod-field-caption .cod-caption-count{
    font-weight: 900;
    font-size: clamp(1.15rem, 1.6vw, 1.35rem);
  }

  /* ans Ende deines <style> Blocks setzen */
  #Freizeitaktivitaeten .cod-area{
    margin-bottom:20px; /* gewünschter Außenabstand */
  }
  #Freizeitaktivitaeten .cod-area::before{
    bottom:0; /* Weißfläche NICHT über das Ende hinausziehen */
  }
  #Freizeitaktivitaeten .cod-load-more-wrap{
    padding-bottom:20px; /* Buttonbereich sauber auf 20px begrenzen */
  }

  /* Klickbare Fläche über dem Icon */
  .cod-date-popover .date-field .picker-hit {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 44px; /* breiter, damit Finger gut trifft */
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    z-index: 3;
  }

  /* Datum/Zeit/Strich einfärben wie Preistext */
  /* Datum/Zeit/Strich einfärben wie Preistext */
  #Freizeitaktivitaeten .cod-date .only-date,
  #Freizeitaktivitaeten .cod-date .only-time,
  #Freizeitaktivitaeten .cod-date .start.multi,
  #Freizeitaktivitaeten .cod-date .end {
    color: var(--cod-price-date-color);
  }
  /* Bindestrich zwischen Start und Ende: nur Textfarbe, KEIN Hintergrund */
  #Freizeitaktivitaeten .cod-date .end::before {
    color: var(--cod-price-date-color);
    background: none !important;
  }
  /* Mobile-Trenner-Linie (wird nur im Mobile-Layout sichtbar, weil dort content gesetzt wird) */
  #Freizeitaktivitaeten .cod-date .t::after {
    background: var(--cod-price-date-color);
  }

  /* Nur Mobile: Buttons in den Karten */
  @media (max-width:767px){
    #Freizeitaktivitaeten .cod-actions .cod-cta,
    #Freizeitaktivitaeten .cod-actions .cod-cta.secondary{
      font-size: 0.875rem; /* kleinerer Text */
      padding: 14px 10px; /* weniger Innenabstand */
      min-width: auto; /* fixe Mindestbreite entfernen */
      min-height: auto; /* fixe Mindesthöhe entfernen */
      line-height: 1.2; /* Texthöhe anpassen */
    }
  }

  #Freizeitaktivitaeten .cod-search-wrap{
    z-index: 20;
  }

  /* === Fix für Kalender Popover === */
  #Freizeitaktivitaeten .cod-search-wrap{
    z-index: auto !important; /* verhindert eigenen Stacking-Context */
  }
  .cod-date-popover{
    z-index: 1001 !important; /* liegt sicher über dem Overlay (1000) */
  }

  /* nur mobile: titel etwas größer */
  @media (max-width:767px){
    #Freizeitaktivitaeten .cod-card .cod-title{
      font-size:1rem !important; /* vorher 0.875rem */
      line-height:1.28 !important;
      max-height:calc(1.28em * 3); /* drei zeilen clamp beibehalten */
    }
  }

  /* Schwarze Standard-Pfeile im Owl Carousel ausblenden */
  #cod-creators-results .owl-nav .owl-prev span,
  #cod-creators-results .owl-nav .owl-next span {
    display: none !important;
  }

/* =======================================
   ELEMENTOR GLOBAL TYPO + FARBEN
======================================= */

/* Text unter H1.
   GRÖSSE UND GEWICHT SIND SEIT 02.09.2026 VOM ACCENT-SLOT ENTKOPPELT
   (Nutzerentscheidung): "accent" ist laut Schrift-Registry der Slot für
   kleine Labels/Tags/Eyebrows (11 px, 700) - ein Untertext, der ihn las,
   war unlesbar klein. Die Größe kommt jetzt aus der Klein-Stufe der
   Schriftskala (live 20 px, einstellbar unter cod-design-schriftskala),
   das Gewicht ist Fließtext-400. Familie/Zeilenabstand lesen weiter den
   Slot. ZWILLING: dieselbe Regel steht im anderen Repo
   (cod-plugin-frontend-bundle.css) - immer beide ändern und deployen. */
.global-text-elementor-text-unter-h1{
  font-family: var(--e-global-typography-accent-font-family, var(--e-global-typography-44ebb6b-font-family, system-ui, sans-serif)) !important;
  font-size: var(--cod-size-font-klein, 1.25rem) !important;
  font-weight: 400 !important;
  line-height: var(--e-global-typography-accent-line-height, 1.4) !important;
  letter-spacing: var(--e-global-typography-accent-letter-spacing, 0) !important;
  text-transform: var(--e-global-typography-accent-text-transform, none) !important;
  font-style: var(--e-global-typography-accent-font-style, normal) !important;
  color: var(--e-global-color-secondary) !important;
}

/* H1 Hauptüberschrift */
.global-text-elementor-h1-ueberschrift{
  font-family: var(--e-global-typography-583e54c-font-family, var(--e-global-typography-44ebb6b-font-family, system-ui, sans-serif)) !important;
  font-size: var(--e-global-typography-583e54c-font-size, 2.5rem) !important;
  font-weight: var(--e-global-typography-583e54c-font-weight, 700) !important;
  line-height: var(--e-global-typography-583e54c-line-height, 1.2) !important;
  letter-spacing: var(--e-global-typography-583e54c-letter-spacing, 0) !important;
  text-transform: var(--e-global-typography-583e54c-text-transform, none) !important;
  font-style: var(--e-global-typography-583e54c-font-style, normal) !important;
  color: var(--cod-h1-color, var(--e-global-color-secondary)) !important;
}

/* H2 Unterüberschrift */
.global-text-elementor-h2-unterueberschrift{
  font-family: var(--e-global-typography-5d167aa-font-family, var(--e-global-typography-44ebb6b-font-family, system-ui, sans-serif)) !important;
  font-size: var(--e-global-typography-5d167aa-font-size, 2rem) !important;
  font-weight: var(--e-global-typography-5d167aa-font-weight, 600) !important;
  line-height: var(--e-global-typography-5d167aa-line-height, 1.3) !important;
  letter-spacing: var(--e-global-typography-5d167aa-letter-spacing, 0) !important;
  text-transform: var(--e-global-typography-5d167aa-text-transform, none) !important;
  font-style: var(--e-global-typography-5d167aa-font-style, normal) !important;
  color: var(--cod-h2-color, var(--e-global-color-secondary)) !important;
}

/* H3 Spruch */
.global-text-elementor-h3-spruch{
  font-family: var(--e-global-typography-d3dae9a-font-family, var(--e-global-typography-44ebb6b-font-family, system-ui, sans-serif)) !important;
  font-size: var(--e-global-typography-d3dae9a-font-size, 1.3rem) !important;
  font-weight: var(--e-global-typography-d3dae9a-font-weight, 500) !important;
  line-height: var(--e-global-typography-d3dae9a-line-height, 1.3) !important;
  letter-spacing: var(--e-global-typography-d3dae9a-letter-spacing, 0) !important;
  text-transform: var(--e-global-typography-d3dae9a-text-transform, none) !important;
  font-style: var(--e-global-typography-d3dae9a-font-style, normal) !important;
  color: var(--e-global-color-d49ac81) !important;
}

/* Spruch/Eyebrow-Zeile über der Überschrift: eigene, vom Betreiber steuerbare
   Farbe (Brand-Rolle "eyebrow" -> --cod-eyebrow-color). Steht nach der H2-Regel,
   gewinnt daher bei gleicher Spezifität. Standard = secondary -> optisch
   unverändert, bis der Betreiber eine Farbe setzt. Die header-spezifische Regel
   (data-cod-design-text-module="header") bleibt spezifischer und gewinnt dort. */
.cod-design-heading__eyebrow{
  color: var(--cod-eyebrow-color, var(--e-global-color-secondary)) !important;
}

/* Normaler Text */
.global-text-elementor-text{
  font-family: var(--e-global-typography-text-font-family, system-ui, sans-serif) !important;
  font-size: var(--e-global-typography-text-font-size, 1rem) !important;
  font-weight: var(--e-global-typography-text-font-weight, 400) !important;
  line-height: var(--e-global-typography-text-line-height, 1.4) !important;
  letter-spacing: var(--e-global-typography-text-letter-spacing, 0) !important;
  text-transform: var(--e-global-typography-text-text-transform, none) !important;
  font-style: var(--e-global-typography-text-font-style, normal) !important;
  color: var(--e-global-color-secondary) !important;
}

/* Buttons */
.global-text-elementor-button{
  font-family: var(--e-global-typography-4778b4e-font-family, var(--e-global-typography-44ebb6b-font-family, system-ui, sans-serif)) !important;
  font-size: var(--e-global-typography-4778b4e-font-size, 1rem) !important;
  font-weight: var(--e-global-typography-4778b4e-font-weight, 700) !important;
  line-height: var(--e-global-typography-4778b4e-line-height, 1.2) !important;
  letter-spacing: var(--e-global-typography-4778b4e-letter-spacing, 0) !important;
  text-transform: var(--e-global-typography-4778b4e-text-transform, none) !important;
  font-style: var(--e-global-typography-4778b4e-font-style, normal) !important;
  color: var(--e-global-color-text) !important;
}

/*Container wie bei Elementor auf die gesamte Breite in %*/
.cod-container{
  width:70%;
  margin:0 auto;
}

/* Tablet */
@media (max-width:1024px){
  .cod-container{
    width:80%;
  }
}

/* Mobile */
@media (max-width:767px){
  .cod-container{
    width:90%;
  }
}

/* ===========================================================
   iOS-Auto-Zoom verhindern: Safari zoomt beim Fokus in Felder
   mit weniger als 16px Schriftgröße die ganze Seite. Nur auf
   Touch-Geräten anheben — die Desktop-Optik bleibt unverändert.
   !important gewinnt bewusst auch gegen Inline-Styles.
   =========================================================== */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="button"]):not([type="submit"]),
  select,
  textarea {
    font-size: max(16px, 1em) !important;
  }
}

/* ===========================================================
   Druck: Bedien-Elemente ausblenden — gedruckt wird nur der
   Inhalt (Chat-Button, Video-Popup, Cookie-Elemente, Hinweise).
   =========================================================== */
@media print {
  #cod-dm-btn,
  #cod-dm-panel,
  #cod-video-popup,
  .cod-privacy-banner,
  .cod-cookie-settings-fab,
  .cod-embed-app-fallback {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   INFO-CHIP — der gemeinsame Baustein (seit 06.08.2026)

   Die kleinen Pillen mit Preis, Dauer, Anzahl, Entfernung, Kategorie oder
   Anbieter. Es gab sie bisher ZEHNMAL: in events.css, academy.css,
   gewinnspiele.css, angebote.css, credits.css, partner-card.css und zentral.
   Am 06.08.2026 alle gemessen — Radius 8 bis 999 px, Innenabstand 0/0 bis
   9/14, Schrift 12 bis 20 px, Höhe 20 bis 62 px. Ein Baustein, der an zehn
   Stellen sein Aussehen bekommt, hat kein Aussehen.

   HIER STEHT ER EINMAL. Wer eine neue Stelle baut, nimmt diese Klasse und legt
   keine elfte an.

   Zwei der zehn gemessenen Muster gehören ausdrücklich NICHT dazu: der
   Partner-Reiter (8px, verhält sich wie ein Reiter — auswählen, aktiv bleiben)
   und der "Partner-Badge Academy" (62 × 62 px Bildrahmen mit 3 px Rand, also
   ein Porträt-Kästchen). Beide sind über ihren Namen in die Liste geraten,
   nicht über ihr Aussehen.

   VARIANTEN NACH BEDEUTUNG, NICHT NACH ORT. Wer einen Chip "Events-Chip"
   nennt, bekommt beim nächsten Bereich wieder einen neuen.

   NOCH KEIN ZWEITNAME: .cod-price-chip bleibt vorerst unberührt. Würde diese
   Regel ihn gleich mitfassen, änderte sich das Aussehen aller bestehenden
   Chips auf einen Schlag — und zwar bevor irgendjemand gemessen hat, ob das
   an jeder Stelle richtig aussieht. Die Stellen werden einzeln umgestellt,
   jede mit eigener Messung.

   Zwilling: die zweite cod-plugin-frontend-bundle.css (Plugin bzw. cod-embed).
   Immer gemeinsam ändern und deployen.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Basis = neutrale Angabe auf einer hellen Fläche (Dauer, Anzahl, Entfernung).
   Alle Werte kommen aus dem Betreiber-Dashboard (Branding & Design), die
   Rückfallwerte sind die am 06.08.2026 gemessenen Ist-Werte der Events-Karte. */
.cod-info-chip {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  box-sizing: border-box;
  max-width: 100%;
  border-radius: var(--cod-chip-radius, 999px);
  padding: var(--cod-chip-pad-y, 5px) var(--cod-chip-pad-x, 10px);
  background: var(--cod-chip-surface-bg, #eef6ff);
  color: var(--cod-chip-surface-color, #2b86c5);
  /* Die Rahmenbreite folgt der Rahmenfarbe: Der Token-Endpunkt setzt sie auf
     1px, sobald der Betreiber eine Farbe wählt. Ohne Farbe bleibt der zarte
     Standardrahmen — als --cod-mix-*-Token, NIE als color-mix() direkt in der
     Deklaration (Baseline Safari/iOS 15.4+, sonst fällt der Rahmen komplett
     weg statt auf einen Ersatzwert). */
  border: var(--cod-chip-surface-border-width, 1px) solid
          var(--cod-chip-surface-border, var(--cod-mix-info-12, rgba(43, 134, 197, .12)));
  font: inherit;
  /* DER CHIP ERBT SEINE GROESSE, ABER NICHT BELIEBIG WEIT NACH UNTEN
     (13.08.2026 gemessen): "font: inherit" ist Absicht - der Chip fuegt sich in
     seinen Kontext ein und waechst mit der Schriftskala des Betreibers. Gemessen
     kam derselbe Chip dadurch auf einer einzigen Seite in DREI Groessen vor:
     20 px im Angebot, 16 px in der Academy und 11,8 px im Gewinnspiel, wo er
     von einer verkleinerten Umgebung erbt. Unter rund 13 px ist ein Chip mit
     Text nicht mehr lesbar, und niemand misst nach. Die Untergrenze aendert
     nichts an der Absicht - sie verhindert nur, dass die Vererbung den Chip
     unter das Lesbare zieht. clamp() gibt es seit Safari 13.4, unsere Baseline
     ist 15.4. */
  font-size: max(var(--cod-card-min-font, 13px), 1em);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

/* Auf einem BILD statt auf einer Karte: dunkel und durchscheinend.
   Eigene Rolle und kein gemeinsamer Grund — gemessen am 06.08.2026 stehen die
   beiden Bild-Chips (Anbieter, Sponsor) unabhängig voneinander auf
   rgba(0,0,0,.55), während die Flächen-Chips hell sind. Eine gemeinsame Farbe
   macht zwangsläufig einen von beiden unlesbar. */
.cod-info-chip--bild {
  background: var(--cod-chip-bg, rgba(0, 0, 0, .55));
  color: var(--cod-chip-color, #ffffff);
  border-color: transparent;
}

/* MIT BILD (Anbieter der Angebote, Sponsor der Gewinnspiele): Pille mit rundem
   Bild links, Text rechts.

   Das ist keine Kosmetik-Variante, sondern ein eigener Bautyp — und er wurde
   am 06.08.2026 erst beim Umstellen entdeckt. Beide Stellen, die "auf einem
   Bild" liegen, tragen selbst eines: ein 32-px-Rund mit weissem Ring.

   SENKRECHT KEIN INNENABSTAND, und das ist gemessen, nicht geschmackvoll: Der
   Chip ist genau so hoch wie das Bild darin, dadurch deckt sich die linke
   Halbkugel des Kreises mit der Rundung der Pille und der Kreis sitzt bündig
   im Rahmen. Am 02.08.2026 an der Angebote-Karte belegt — mit Innenabstand
   mass der Chip 44 px gegen 32 px Kreis, also 12 px zu hoch.
   Wer diese Variante wegnimmt und die Stelle auf die Basis stellt, macht genau
   diese Reparatur wieder zunichte.

   Links ebenfalls kein Abstand (das Bild bildet die Kante), rechts der normale
   Wert aus dem Dashboard. */
.cod-info-chip--medien {
  gap: calc(var(--cod-chip-pad-x, 10px) * .8);
  padding: 0 var(--cod-chip-pad-x, 10px) 0 0;
  /* KEIN Rahmen - und das ist gemessen, nicht Geschmack.
     Die Basis hält die Rahmenbreite auch bei den farblosen Varianten auf 1px
     und macht nur die Farbe durchsichtig, damit die Grösse beim Wechsel nicht
     springt. Bei einem Medien-Chip stimmt diese Rechnung nicht: Dort bestimmt
     das BILD die Höhe, und die zwei Rahmenlinien addieren sich obendrauf.
     Am 06.08.2026 beim Umstellen des Anbieter-Chips gemessen - an allen vier
     Breiten exakt 2 px zu hoch, der Kreis sass nicht mehr bündig in der Pille.
     Also genau der Zustand, der am 02.08.2026 schon einmal behoben wurde. */
  border-width: 0;
}

/* EIN KIND-SELEKTOR AUF img GREIFT NICHT DURCH EIN <picture> (13.08.2026 am
   Angebot gemessen): Der Anbieter-Chip dort wickelt sein Bild in ein <picture>
   - unser Normalfall, seit die WebP-Auslieferung laeuft. Der Selektor "> img"
   passte damit auf nichts, das Bild kam in Originalgroesse, und aus einem
   32-px-Chip wurde eine 344 x 294 px grosse Kachel, die die ganze Bildflaeche
   des Angebots ueberdeckte. Kein Fehler, keine Meldung - der Chip sah auf jeder
   anderen Seite richtig aus. Deshalb ALLE drei Formen ansprechen. */
.cod-info-chip--medien > picture,
.cod-info-chip--medien > picture > img,
.cod-info-chip--medien > img {
  width: var(--cod-chip-medien-size, 32px);
  height: var(--cod-chip-medien-size, 32px);
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, .9);
  flex: 0 0 auto;
}

/* PREIS: kräftiger, weil es um Geld geht. Nur das Gewicht — Farbe und Form
   bleiben, sonst wäre es wieder eine eigene Chip-Art. */
.cod-info-chip--preis {
  font-weight: 800;
}

/* EIGENE FARBE: Form und Masse vom Baustein, Farbe von der Stelle.

   Beim Umstellen der Text-Chips am 06.08.2026 zeigte sich, dass die restlichen
   Muster sich gar nicht in der FORM unterscheiden — die ist überall dieselbe
   Pille mit kleinem Innenabstand. Sie unterscheiden sich in der HERKUNFT ihrer
   Farbe, und das sind drei verschiedene Dinge:

     Dashboard-Rolle   Events, Academy, Anbieter, Sponsor
                       -> Basis bzw. --bild, folgt dem Betreiber
     Design-Bedeutung  Bonus = Erfolgsgrün (--cod-color-accent-green)
                       -> hier, mit fester Bedeutung
     Datenfarbe        Kategoriefarbe eines Gewinnspiels (--cod-tag-color)
                       -> hier, je Eintrag verschieden

   Die letzten beiden DÜRFEN nicht auf die Dashboard-Farbe gezogen werden: Ein
   Bonus, der nicht mehr grün ist, sagt nichts mehr aus, und eine Kategorie ohne
   ihre Farbe verliert genau die Information, für die es sie gibt.

   Diese Variante nimmt deshalb nur Form und Masse und lässt die Farbe von
   aussen setzen. Die Stelle schreibt --cod-chip-eigen-* auf sich selbst. */
.cod-info-chip--eigen {
  background: var(--cod-chip-eigen-bg, transparent);
  color: var(--cod-chip-eigen-color, inherit);
  border-color: var(--cod-chip-eigen-border, transparent);
}

/* WARNUNG: vergriffen, geschlossen, abgelaufen. Bewusst OHNE eigenen Regler im
   Dashboard: Eine Warnfarbe, die der Betreiber frei wählt, kann er auch
   unauffällig machen — und dann sieht niemand mehr, dass etwas vergriffen ist. */
.cod-info-chip--warnung {
  background: var(--cod-chip-warn-bg, rgba(176, 58, 74, .12));
  color: var(--cod-chip-warn-color, #b03a4a);
  border-color: transparent;
}

/* ANKLICKBAR (Kauf-Knopf der Academy, Anbieter-Verweis der Angebote).
   Gemessen am 06.08.2026: Derselbe Klassenname trug bisher drei Elementarten —
   span, button und a. Diese Variante ist für die beiden bedienbaren gedacht
   und bringt mit, was ein span nicht hat: sichtbarer Fokus, Rückmeldung beim
   Zeigen und Antippen, Trefferfläche.

   Der Effekt ist farbneutral (Helligkeit + Bewegung) und wandert deshalb mit
   jeder Farbe aus dem Dashboard mit — Hausstandard seit 29.07.2026. Die
   Bewegung steht in (hover: hover), weil es auf Touchgeräten kein Zeigen gibt;
   :active ist dort die einzige Rückmeldung und steht bewusst ausserhalb. */
.cod-info-chip--aktion {
  cursor: pointer;
  transition: transform .15s ease, filter .15s ease, background-color .15s ease;
}

@media (hover: hover) {
  .cod-info-chip--aktion:hover,
  .cod-info-chip--aktion:focus-visible {
    background: var(--cod-chip-surface-hover-bg, var(--cod-chip-surface-bg, #eef6ff));
    color: var(--cod-chip-surface-hover-color, var(--cod-chip-surface-color, #2b86c5));
    border-color: var(--cod-chip-surface-hover-border, var(--cod-chip-surface-border, transparent));
    filter: brightness(1.05);
  }

  .cod-info-chip--bild.cod-info-chip--aktion:hover,
  .cod-info-chip--bild.cod-info-chip--aktion:focus-visible {
    background: var(--cod-chip-hover-bg, var(--cod-chip-bg, rgba(0, 0, 0, .55)));
    color: var(--cod-chip-hover-color, var(--cod-chip-color, #ffffff));
  }
}

.cod-info-chip--aktion:active {
  transform: scale(.97);
}

@media (prefers-reduced-motion: reduce) {
  .cod-info-chip--aktion { transition: none !important; }
  .cod-info-chip--aktion:active { transform: none !important; }
}

/* Trefferfläche auf 44 px — nur bei der anklickbaren Variante. Ein Chip, der
   nur etwas anzeigt, ist kein Ziel und braucht keine.
   Aufgerechnet über min-width/min-height statt über ein festes inset: Karten
   skalieren auf schmalen Bildschirmen, ein fester Wert träfe mal 44 und mal 36.
   ::after ist hier frei — anders als beim Aufklapp-Pfeil, der es schon belegt. */
@media (pointer: coarse) {
  .cod-info-chip--aktion { position: relative; }
  .cod-info-chip--aktion::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    min-width: 44px;
    min-height: 44px;
    z-index: 0;
  }
}

/* ── KEIN DOPPELTIPP-ZOOM AUF DEM IPHONE (13.08.2026) ──────────────────────
   Vom Nutzer am Partner-Karussell gemeldet: "wenn man schnell auf den
   Weiter-Pfeil klickt, macht es diesen Zoom". Safari wertet zwei schnelle
   Tipps auf dieselbe Stelle als Doppeltipp und zoomt - beim Durchblaettern
   tippt man aber genau so.

   Die Regel gab es bereits an zwei Stellen (Partner-Verzeichnis der Zentrale,
   Creator-Karussell), aber jeweils an eine ID gebunden: #Community-Partner
   bzw. #cod-creators-results. Jedes neue Karussell fing damit wieder von
   vorne an - Angebote und Creators auf den Community-Seiten hatten den Schutz
   nie. Deshalb hier EINMAL fuer alle Owl-Bedienelemente statt einer vierten
   Kopie; die aelteren Regeln bleiben unangetastet, sie sagen dasselbe.

   `manipulation` erlaubt Tippen und Wischen weiter - es nimmt dem Browser nur
   die Doppeltipp-Deutung. */
.owl-carousel .owl-nav button,
.owl-carousel .owl-prev,
.owl-carousel .owl-next,
.owl-carousel .owl-dot {
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}