/* Elementor-steuerbar: die --cod-ac-*-Variablen setzt das Academy-Widget auf den
   Widget-Wrapper. Nicht gesetzt -> Fallback = bisheriger Standard (Optik unveraendert). */
.cod-kurse-wrap {
  --cod-kurse-surface: var(--cod-ac-surface, #fff);
  --cod-kurse-soft-surface: var(--cod-ac-soft-surface, #eef7ff);
  --cod-kurse-soft-surface-hover: var(--cod-ac-soft-surface-hover, #dff1fc);
  --cod-kurse-highlight-surface: var(--cod-ac-highlight-surface, #fff6e0);
  --cod-kurse-border: var(--cod-ac-border, #dbeaf3);
  --cod-kurse-title-color: var(--cod-ac-title-color, var(--cod-title-color, #444));
  --cod-kurse-text-color: var(--cod-ac-text-color, var(--cod-text, #111));
  --cod-kurse-meta-color: var(--cod-meta, #56779a);
  --cod-kurse-link-color: var(--cod-ac-link-color, var(--cod-cta, #2d9cdb));
  --cod-kurse-button-bg: var(--cod-ac-button-bg, var(--cod-cta, #2d9cdb));
  --cod-kurse-button-bg-hover: var(--cod-ac-button-bg-hover, #248cca);
  --cod-kurse-button-text: var(--cod-ac-button-text, #fff);
  /* Radien kommen aus dem Design-Token, nicht aus einer eigenen Zahl
     (Academy-Durchgang 12.08.2026). Gemessen standen hier 24 px neben
     Angebot, Gewinnspiel und Partner mit 10 px - alle drei holen sich den
     Wert aus --cod-card-radius. Eine eigene Zahl an einer Stelle, an der es
     ein Token gibt, läuft mit dem nächsten Design-Wechsel auseinander. */
  --cod-kurse-card-radius: var(--cod-ac-card-radius, var(--cod-card-radius, 10px));
  --cod-kurse-card-radius-sm: var(--cod-ac-card-radius-sm, var(--cod-card-radius, 10px));
  --cod-kurse-card-radius-xs: 8px;
  --cod-kurse-button-radius: var(--cod-ac-button-radius, var(--cod-button-radius, 8px));
  --cod-kurse-pill-radius: var(--cod-ac-pill-radius, var(--cod-pill-radius, 999px));
  --cod-kurse-shadow-card: var(--cod-shadow-card, 0 16px 40px rgba(30, 93, 132, 0.08));
  --cod-kurse-shadow-highlight: 0 0 0 4px rgba(45, 156, 219, 0.24), 0 16px 40px rgba(30, 93, 132, 0.08);
  --cod-kurse-shadow-modal: 0 24px 70px rgba(0, 0, 0, 0.24);
  --cod-kurse-debug-border: var(--cod-debug-border, rgba(45, 156, 219, 0.35));
  --cod-kurse-debug-soft: var(--cod-debug-soft, #edf5ff);
  font-family: inherit;
  display: grid;
  gap: var(--cod-ac-list-gap, 24px);
}

.cod-kurse-list {
  display: grid;
  grid-template-columns: repeat(var(--cod-ac-list-cols, 1), minmax(0, 1fr));
  gap: var(--cod-ac-list-gap, 24px);
}

.cod-kurse-load-sentinel {
  width: 100%;
  height: 1px;
}

.cod-kurse-debug {
  padding: 18px 20px;
  border: 1px dashed var(--cod-kurse-debug-border);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.92);
}

.cod-kurse-debug-title {
  font-size: 15px;
  font-weight: 700;
  color: #17324d;
  margin-bottom: 14px;
}

.cod-kurse-debug-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}

.cod-kurse-debug-card {
  background: var(--cod-kurse-debug-soft);
  border-radius: 18px;
  padding: 14px 16px;
}

.cod-kurse-debug-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--cod-kurse-meta-color);
}

.cod-kurse-debug-value {
  margin-top: 8px;
  font-size: 18px;
  font-weight: 800;
  color: #16324a;
}

.cod-kurse-debug-status {
  margin-top: 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--cod-kurse-meta-color);
}

/* ── Kurs-Karte ───────────────────────────────────────────────────────────────
   Academy-Durchgang 12.08.2026, neu aufgebaut nach dem Frontend-Widget-Standard
   (docs/frontend-widget-standard.md).

   ZWEI DARSTELLUNGEN, wie bei den Events - und aus demselben Grund: Die
   Kurs-Karte ist bei einer Spalte volle Seitenbreite (gemessen 1140 px am
   Schreibtisch, 340 px auf dem Handy). Ein Zeilenlayout mit Bild links ist auf
   1140 px richtig und auf 340 px unmöglich.
     schmal : gestapelt - Bild oben über die volle Breite
     breit  : Zeile - Bild links, Inhalt rechts, Knopfreihe darunter

   UMGESCHALTET WIRD ÜBER flex-wrap, NICHT ÜBER EINE MEDIA-QUERY. Das ist hier
   kein Geschmack: Der Betreiber darf die Liste auf 2 oder 3 Spalten stellen
   (--cod-ac-list-cols). Eine Media-Query fragt die FENSTERbreite und wüsste
   davon nichts - bei drei Spalten auf 1440 px ist jede Karte 360 px breit und
   bekäme trotzdem das Zeilenlayout. Container-Queries wären die saubere
   Antwort, brauchen aber Safari 16; unsere Baseline ist 15.4. flex-wrap
   entscheidet dagegen nach dem PLATZ, den die Karte wirklich hat.

   Das Bildformat kommt von den Nachbarn, nicht aus dem Gefühl: Gewinnspiel
   1,426 - Event 10:7 = 1,4286 - Angebot 1,358 (alle am 12.08.2026 gemessen).
   Die Academy stand auf 1,096 am Schreibtisch und 1,789 auf dem Handy, also
   auf zwei Formaten, von denen keines zu den Nachbarn passte. */
.cod-course-card {
  background: var(--cod-kurse-surface);
  border: var(--cod-ac-card-border-width, 1px) solid var(--cod-kurse-border);
  border-radius: var(--cod-kurse-card-radius);
  padding: var(--cod-ac-card-pad, 14px);
  box-shadow: var(--cod-kurse-shadow-card);
  overflow: hidden;
}

.cod-course-head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: stretch;
}

/* flex-grow 1 gegen 999: Liegen Bild und Inhalt in einer Zeile, bekommt das
   Bild praktisch nichts vom freien Platz und bleibt bei seiner Breite. Liegt
   es allein auf seiner Zeile (gestapelt), wächst es auf die volle Breite. */
.cod-course-image {
  flex: 1 1 var(--cod-ac-image-width, 240px);
  align-self: flex-start;
  aspect-ratio: var(--cod-ac-image-ratio, 1.426);
  min-height: var(--cod-ac-image-minheight, 0px);
  border-radius: var(--cod-ac-image-radius, var(--cod-card-radius, 10px));
  background-size: cover;
  background-position: center;
  background-color: var(--cod-kurse-soft-surface);
}

/* Inhalt UND Knopfreihe in einer Spalte neben dem Bild. Die Spalte wird über
   align-items:stretch so hoch wie die Zeile - also wie das Bild, wenn der Text
   kurz ist -, und margin-top:auto an der Knopfreihe legt die Knöpfe auf die
   Unterkante des Bildes. Ohne das stand bei einem Kurs ohne Beschreibung über
   100 px Leerfläche rechts neben dem Bild; gesehen hat man das nur am
   Bildschirmfoto, gemessen war jede einzelne Zahl richtig. */
.cod-course-body {
  flex: 999 1 var(--cod-ac-info-min, 300px);
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.cod-course-info {
  flex: 0 1 auto;
}

.cod-course-info h2 {
  /* 20 px / 700 - genau das, was der Angebots-Titel daneben misst. Vorher
     standen hier 34 px in einer anderen Schrift und mit Gewicht 500. */
  font-size: var(--cod-ac-title-size, var(--cod-size-font-klein, 1.25rem));
  font-family: var(--cod-ac-title-font, var(--cod-font-card-title, inherit));
  font-weight: var(--cod-ac-title-weight, 700);
  line-height: 1.2;
  margin: 0 0 8px;
  color: var(--cod-kurse-title-color);
  text-transform: var(--cod-ac-title-transform, none);
}

.cod-course-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 8px;
}

/* GESCHICHTE, mit dem DAMALIGEN Namen: Der Chip hiess bis zum 12.08.2026
   .cod-price-chip - genau wie der Preis-Chip der Events-Karte. Seitdem heisst
   er .cod-course-price-chip; die Einschränkung auf .cod-kurse-wrap bleibt
   trotzdem stehen, sie kostet nichts und schützt gegen den nächsten
   gleichnamigen Selektor.

   .cod-price-chip ist am 05.08.2026 auf .cod-kurse-wrap eingeschränkt worden.
   Vorher stand hier der nackte Klassenname - und weil academy.css in der
   Kaskade NACH events.css kommt, hat diese Regel den Preis-Chip der
   Events-Karte gekapert. Dort sind die --cod-kurse-*-Variablen nicht
   definiert (sie hängen an .cod-kurse-wrap), also wurden die Deklarationen
   ungültig und fielen auf ihre Startwerte zurück:
     border-radius -> 0     (eckig statt Pille)
     background    -> keiner (deshalb griff der Betreiber zur vollen Farbe)
   Die festen Werte border:0 und padding:9px 14px wirkten dagegen sehr wohl
   und haben den zarten blauen Rahmen der Events-Karte entfernt.
   Gemessen mit community-e2e/gewinnende-regel.mjs ".cod-price-chip".

   Die Academy behält ihr Aussehen unverändert: Ihre Karten liegen in
   .cod-kurse-wrap (widget-academy.php), und die höhere Spezifität gewinnt
   dort weiterhin gegen events.css. */
/* Seit 06.08.2026 auf dem gemeinsamen Info-Chip (Etappe 7). Das Markup traegt
   zusaetzlich .cod-info-chip - beim Kauf-Knopf dazu --aktion.

   BEIDE Geschwister zusammen umgestellt: Diese Regel deckte den Kauf-Knopf UND
   die Meta-Angaben ("3 Minuten", "3 Lektionen") ab. Haette man nur den Knopf
   umgestellt, waeren sie auseinandergelaufen - und zwar innerhalb EINER Zeile,
   wo man es sofort sieht.

   WAS SICH DAMIT AENDERT, und das ist der Zweck: Die Rueckfallwerte hier waren
   die Academy-eigenen (9/14 Innenabstand, Gewicht 400). Ohne Dashboard-Angabe
   sah die Academy deshalb anders aus als Events (5/10, Gewicht 700) - gemessen
   am 06.08.2026: 39 px hoch gegen 32. Ab jetzt gelten fuer beide dieselben
   Rueckfallwerte. Der Kauf-Knopf wird dadurch flacher; seine Trefferflaeche
   bleibt ueber --aktion bei 44 px.

   Was bleibt, ist die Schriftgroesse: Sie haengt an --cod-ac-chip-size, einem
   eigenen Regler der Academy. */
.cod-course-meta span,
.cod-kurse-wrap .cod-course-price-chip {
  font-size: var(--cod-ac-chip-size, 14px);
  /* DIESELBE Quelle wie beim Aktions-Chip daneben: Der span holte seine Farbe
     aus --cod-kurse-text-color (#4d4d4d), die beiden Knopf-Chips aus
     --cod-chip-surface-color (#3598DB) - in einer Zeile, drei Chips, zwei
     Schriftfarben. Am Bildschirmfoto sofort zu sehen, in keiner Zahl. */
  color: var(--cod-chip-surface-color, var(--cod-kurse-text-color));
}

.cod-course-price-chip {
  cursor: pointer;
}

/* Preis-Chip ist ein <button>: globale Theme-/Elementor-Button-Stile (Schriftart,
   Gewicht, Größe, Transform) überschreiben sonst die Chip-Optik — hart auf
   exakt dieselbe Schrift wie die Meta-Chips (span) festnageln.

   ACHTUNG, hier stand bis zum 12.08.2026 Gewicht 400 - genau das, was diese
   Regel verhindern sollte: Der gemeinsame Info-Chip steht auf 700, also trug
   der Preis-Chip als EINZIGER seiner Zeile ein anderes Gewicht. Gemessen
   "3 Minuten" 700 neben "Preis 0€" 400, direkt nebeneinander. Der Wert folgt
   jetzt dem Chip-Token, nicht mehr einer eigenen Zahl. */
button.cod-course-price-chip {
  font-family: inherit !important;
  font-size: var(--cod-ac-chip-size, 14px) !important;
  font-weight: var(--cod-chip-surface-weight, 700) !important;
  line-height: 1.2 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: var(--cod-chip-surface-color, var(--cod-kurse-text-color)) !important;
  /* Rahmen darf der Betreiber setzen (Branding & Design -> Info-Chips 1).
     Vorher stand hier border: 0 !important - damit war das Rahmen-Feld für
     Academy-Chips wirkungslos, der Betreiber hätte eine Farbe eingestellt und
     nichts gesehen. Ohne Einstellung bleibt es bei 0, also unverändert. */
  border: var(--cod-chip-surface-border-width, 0) solid
          var(--cod-chip-surface-border, transparent) !important;
  box-shadow: none !important;
}

/* Hover kommt aus DENSELBEN Rückfallwerten wie beim gemeinsamen Aktions-Chip
   (.cod-info-chip--aktion im Bundle) - seit 12.08.2026. Vorher standen hier
   Academy-eigene Rückfälle (--cod-kurse-soft-surface-hover, --cod-kurse-text-color).
   Solange der Betreiber die Chip-Farben gesetzt hat, sah man keinen Unterschied;
   ohne seine Einstellung wäre der Preis-Chip beim Zeigen zartblau geworden und
   der Status-Chip daneben kräftig blau - zwei Chips derselben Zeile mit zwei
   Verhalten, und niemand hätte gewusst, warum.

   Das !important ist hier keine Bequemlichkeit: Der Block button.… weiter oben
   setzt color und border mit !important, um Theme- und Elementor-Button-Stile
   abzuwehren. Ohne !important käme der Hover-Wert nicht an. */
.cod-kurse-wrap .cod-course-price-chip:hover,
.cod-kurse-wrap .cod-course-price-chip:focus-visible {
  background: var(--cod-chip-surface-hover-bg, var(--cod-chip-surface-bg, #eef6ff)) !important;
  color: var(--cod-chip-surface-hover-color, var(--cod-chip-surface-color, #2b86c5)) !important;
  border-color: var(--cod-chip-surface-hover-border, var(--cod-chip-surface-border, transparent)) !important;
}

.cod-course-member-price {
  font-size: var(--cod-ac-meta-size, var(--cod-size-font-winzig, 1rem));
  margin: 0 0 6px;
  color: var(--cod-kurse-text-color);
}

.cod-course-member-price a {
  color: var(--cod-kurse-link-color);
  text-decoration: none;
}

.cod-course-member-price a:hover {
  text-decoration: underline;
}

/* Kleiner als die Preiszeile, aber dieselbe (einzige) Schriftfarbe der
   Plattform - Abstufung kommt über die Größe, nicht über Opazität oder eine
   zweite Farbe. Zwilling der Zentrale (includes/academy/assets/frontend.css). */
.cod-course-member-hinweis {
  font-size: 12px;
  margin: -4px 0 8px;
  color: var(--cod-kurse-text-color);
}

.cod-course-member-hinweis a {
  color: var(--cod-kurse-link-color);
  text-decoration: underline;
}

/* Der Freischalt-Status ist seit dem 12.08.2026 ein CHIP in der Meta-Zeile und
   keine eigene Zeile mehr neben der Knopfreihe. Form, Groesse und Farbe kommen
   damit vom gemeinsamen Info-Chip - hier bleibt nur, was ihn von seinen
   Nachbarn unterscheidet: gar nichts. Die Klasse bleibt als Anker fuer das
   Skript stehen (es schreibt den Fortschritt in .cod-progress-percent). */
.cod-course-status {
  white-space: normal;
}

/* Zwei Zeilen genügen für den Anriss. Wer mehr lesen will, klappt den Kurs auf
   - eine ungekürzte Beschreibung hat die Karte vorher beliebig hoch gemacht.
   -webkit-line-clamp ist seit Safari 5 da und in allen Baseline-Browsern. */
.cod-course-desc {
  font-size: var(--cod-ac-text-size, var(--cod-size-font-winzig, 1rem));
  margin: 0;
  color: var(--cod-kurse-text-color);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--cod-ac-desc-lines, 2);
  overflow: hidden;
}

/* wpautop() liefert <p> - deren Außenabstand zöge den Anriss auseinander und
   würde die Zeilenbegrenzung übersteuern. */
.cod-course-desc p {
  margin: 0;
}

.cod-course-desc p + p {
  margin-top: 4px;
}

.cod-course-partners {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.cod-partner-badge {
  /* Erbt Form, Innenabstand und Radius vom Info-Chip (.cod-info-chip im
     Bundle) - hier steht nur noch, was dieses Abzeichen BESONDERS macht.

     Vorher stand hier eine 62x62-Kachel mit overflow:hidden. Das Markup
     lieferte aber Text, kein Bild: "Anna Mustermann" brauchte 91 px, bekam 56
     und brach mitten im Wort ab (gemessen 07.08.2026 im Showcase). Die Regel
     ".cod-partner-badge img" war toter Code - ein img gab es nirgends.

     Der gelbe Rahmen bleibt das Erkennungszeichen. Er muss hier ausdrücklich
     stehen, weil die Medien-Fassung des Chips die Rahmenbreite bewusst auf 0
     setzt (sonst addieren sich die Linien zur Bildhöhe). */
  --cod-chip-surface-border: var(--cod-ac-partner-border, #f2d400);
  --cod-chip-surface-border-width: 2px;
  border: 2px solid var(--cod-ac-partner-border, #f2d400);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);
  background: var(--cod-kurse-surface, var(--cod-chip-surface-bg, #eef6ff));
  max-width: 100%;
}

/* Lange Namen kürzen statt die Kachel sprengen - drei Punkte statt eines
   harten Schnitts, damit erkennbar bleibt, dass da noch etwas steht. Der
   vollständige Name hängt am title-Attribut. */
.cod-partner-badge-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
/* Volle Kartenbreite als eigene Zeile - dadurch stehen die Knöpfe in BEIDEN
   Darstellungen an derselben Stelle. Vorher war das eine dritte Rasterspalte
   mit min-width:245px, die am Schreibtisch 356 x 228 px belegte und darin nur
   102 px Inhalt trug: 126 px leere Fläche in jeder Karte. */
.cod-course-actions {
  margin-top: auto;
  padding-top: 8px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
}

.cod-course-buttons {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

/* Form, Höhe und Schriftgewicht wie bei den Karten-Knöpfen (12.08.2026).
   Gemessen standen hier 54 px Höhe, Radius 10 und Schriftgewicht 700 neben
   Karten-Knöpfen mit 40 px, Radius 8 und Gewicht 400 - direkt untereinander auf
   derselben Seite. Die FARBE bleibt an den Academy-Variablen: Sie ist ohnehin
   schon dieselbe, und der Academy-Bereich soll seine eigenen Farbregler
   behalten. Angeglichen wird nur, was ins Auge fällt.
   Die Regler-Variablen (--cod-ac-*) stehen weiter vorn und behalten Vorrang. */
.cod-lessons-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--cod-btn-angebot-border-radius, var(--cod-button-radius, 8px));
  height: var(--cod-ac-button-height, var(--cod-btn-angebot-height, 40px));
  min-height: var(--cod-ac-button-height, var(--cod-btn-angebot-height, 40px));
  padding: 0 16px;
  background: var(--cod-kurse-button-bg);
  color: var(--cod-kurse-button-text);
  /* Schriftart aus dem Regler, nicht aus dem Erben. Gemessen am 12.08.2026
     trugen die Academy-Knöpfe Lato Semibold, während JEDER Knopf daneben
     (Angebot, Gewinnspiel, Partner) Arial Rounded MT trägt - der Unterschied
     kam allein daher, dass hier keine font-family stand und die Karte ihre
     Fliesstext-Schrift durchreichte. */
  font-family: var(--cod-font-btn-angebot, inherit);
  font-size: var(--cod-ac-button-size, var(--cod-size-font-winzig, 1rem));
  font-weight: var(--cod-font-btn-angebot-weight, 400);
  line-height: 1.2;
  cursor: pointer;
  margin: 0;
  box-shadow: none;
}

.cod-lessons-toggle:hover {
  background: var(--cod-kurse-button-bg-hover);
}

/* Trefferfläche auf Berührgeräten: Die Knöpfe sind 40 px hoch (so wie überall),
   auf dem Finger sollen es 44 sein. Gelöst wie beim Partner-Karussell und im
   Chat - eine unsichtbare Fläche im Knopf, die bis auf 44 px hochrechnet.
   Nur bei (pointer: coarse), damit die Maus-Bedienung unverändert bleibt. */
@media (pointer: coarse) {
  .cod-course-buttons > * {
    position: relative;
  }

  .cod-course-buttons > *::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    min-width: 44px;
    min-height: 44px;
  }
}

/* Quadratisch und genau so hoch wie der Knopf daneben - sonst stehen zwei
   verschieden hohe Flächen nebeneinander in einer Reihe.

   DAS SYMBOL KOMMT AUS DERSELBEN DATEI WIE BEI EVENTS UND ANGEBOTEN
   (12.08.2026): share-solid-full.svg, gezeichnet als Maske in der Farbe des
   Knopfes. Vorher stand hier ein Textzeichen (↗) in 24 px - dieselbe Familie
   wie das Text-Kreuz im Schliessen-Knopf: Ein Glyph sitzt wegen der
   Schrift-Grundlinie nie mittig, er folgt der Textfarbe nicht zuverlässig, und
   er sieht auf jedem Gerät ein bisschen anders aus. */
.cod-share-course {
  width: var(--cod-ac-share-size, var(--cod-btn-angebot-height, 40px));
  height: var(--cod-ac-share-size, var(--cod-btn-angebot-height, 40px));
  border: 0;
  border-radius: var(--cod-btn-angebot-border-radius, var(--cod-button-radius, 8px));
  background: var(--cod-ac-share-bg, var(--cod-kurse-soft-surface));
  color: var(--cod-ac-share-color, var(--cod-kurse-link-color, #3598DB));
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  /* font-size 0 blendet alles aus, was im Knopf STEHT - das Symbol daneben
     kommt aus ::before und hat seine eigene Groesse.
     Das ist kein Schoenheitsgriff, sondern der Schutz gegen ein bekanntes
     Zeitfenster: Markup und CSS liegen in verschiedenen Repos und werden
     nacheinander hochgeladen. In der Zeit dazwischen - und danach so lange,
     wie ein Browser die alte Seite zwischengespeichert hat - traegt der Knopf
     noch das alte Textzeichen und bekommt vom neuen CSS zusaetzlich das
     Symbol: zwei Zeichen in einem Knopf. Genau so ist es am 12.08.2026 auf
     einem Handy aufgetaucht, obwohl der Server laengst das Richtige
     auslieferte. */
  font-size: 0;
}

.cod-share-course::before {
  content: "";
  display: block;
  width: var(--cod-ac-share-glyph-size, var(--cod-angebot-share-glyph-size, 22px));
  height: var(--cod-ac-share-glyph-size, var(--cod-angebot-share-glyph-size, 22px));
  background-color: currentColor;
  -webkit-mask: url(../svg/share-solid-full.svg) center/contain no-repeat;
  mask: url(../svg/share-solid-full.svg) center/contain no-repeat;
}

.cod-share-course:hover {
  background: var(--cod-ac-share-bg-hover, var(--cod-kurse-soft-surface-hover));
}

/* Die Kurs-Ansicht (aufgeklappte Lektionen) ist beim Durchgang am 12.08.2026
   mit derselben Frage kompakter geworden wie die Karte: Sitzt der Block dort
   noch richtig, und ist seine Höhe gerechtfertigt? Gemessen brauchte eine
   Lektion 145 px, davon 32 px reiner Innenabstand. */
/* ── Der rote Zustand nach dem Klicken ───────────────────────────────────────
   Gefunden am 12.08.2026 mit einem Bildschirmfoto des Betreibers: "3 Lektionen
   anzeigen" war dunkelrot. Im Hover war er es nicht - gemessen wurde er erst im
   Zustand "Fokus, aber Maus weg": Nach einem Klick behaelt der Knopf den Fokus,
   und dort setzt das Theme seine eigene Farbe (#CC3366 bzw. #BF3A6E). Betroffen
   war JEDES Bedienelement der Karte, auch die Chips und der Teilen-Knopf.

   Dieselbe Immunisierung gibt es beim Lektions-Play-Knopf schon; sie fehlte
   hier. :focus:not(:hover) statt :focus, damit der Hover-Ton weiter gewinnt,
   solange die Maus wirklich darauf steht.

   Der sichtbare Fokusring bleibt - er ist fuer die Tastaturbedienung da und
   hat mit der Theme-Farbe nichts zu tun. */
.cod-kurse-wrap .cod-lessons-toggle:focus:not(:hover),
.cod-kurse-wrap .cod-buy-btn:focus:not(:hover) {
  background: var(--cod-kurse-button-bg) !important;
  color: var(--cod-kurse-button-text) !important;
}

.cod-kurse-wrap .cod-share-course:focus:not(:hover) {
  background: var(--cod-ac-share-bg, var(--cod-kurse-soft-surface)) !important;
  /* Die Farbe MUSS mit: Das Symbol ist eine Maske in currentColor. Das Theme
     setzt im Fokus color:#fff - das Symbol waere dann weiss auf hellblauem
     Grund, also unsichtbar. Beim ersten Anlauf war nur der Hintergrund
     festgehalten, und genau das ist passiert. */
  color: var(--cod-ac-share-color, var(--cod-kurse-link-color, #3598DB)) !important;
}

.cod-kurse-wrap .cod-info-chip:focus:not(:hover) {
  background: var(--cod-chip-surface-bg, var(--cod-kurse-soft-surface)) !important;
  color: var(--cod-chip-surface-color, var(--cod-kurse-text-color)) !important;
}

.cod-kurse-wrap .cod-lessons-toggle:focus-visible,
.cod-kurse-wrap .cod-buy-btn:focus-visible,
.cod-kurse-wrap .cod-share-course:focus-visible,
.cod-kurse-wrap .cod-info-chip:focus-visible {
  outline: 2px solid var(--cod-kurse-link-color, #3598DB);
  outline-offset: 2px;
}

.cod-lessons {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.cod-lesson {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 14px;
  align-items: center;
  border: var(--cod-ac-card-border-width, 1px) solid var(--cod-kurse-border);
  border-radius: var(--cod-kurse-card-radius-sm);
  background: var(--cod-kurse-surface);
  padding: 12px;
}

/* Play-Button gegen globale Site-Button-Stile (Theme/Elementor-Kit) immunisieren:
   ohne !important schlaegt z. B. ein roter button:hover-Hintergrund an den Ecken
   durch, wo der Thumb-Radius den Button nicht abdeckt. */
.cod-lesson-video,
.cod-lesson-video:hover,
.cod-lesson-video:focus,
.cod-lesson-video:active {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
}

/* Ohne Vorschaubild UND ohne abspielbares Video ist der Kasten links reine
   Dekoration. Auf 390 px war er 177 px hoch und leer - die Lektion kam damit
   auf 339 px fuer zwei Zeilen Text. Die Klasse setzt der Server: :has() waere
   der naheliegende Weg, kommt aber erst nach unserer Baseline (Safari 15.4). */
/* ZWEI Klassen, nicht eine: Die Media-Query fuer schmale Karten steht am
   Dateiende und setzt .cod-lesson auf zwei Spalten. Bei gleicher Spezifitaet
   gewinnt die spaetere Regel - mit nur einer Klasse blieb die 116-px-Spalte
   stehen, obwohl der Kasten darin ausgeblendet war, und der Text quetschte
   sich auf 116 px (gemessen: Titel 96 px hoch statt 38). Wer Werte einer
   gemeinsamen Mechanik-Klasse ueberschreibt, gewinnt ueber SPEZIFITAET, nie
   ueber Reihenfolge. */
.cod-lesson.cod-lesson--ohne-bild {
  grid-template-columns: 1fr;
}

.cod-lesson--ohne-bild .cod-lesson-video {
  display: none;
}

.cod-lesson-video {
  padding: 0;
  cursor: pointer;
  text-align: left;
  border-radius: var(--cod-kurse-card-radius-xs); /* wie .cod-lesson-thumb — Reststile folgen dem Radius */
  overflow: hidden;
}

.cod-lesson-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 132px;
  aspect-ratio: 16/9;
  border-radius: var(--cod-kurse-card-radius-xs);
  background-size: cover;
  background-position: center;
  background-color: var(--cod-kurse-soft-surface);
  overflow: hidden;
}

.cod-lesson-thumb span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--cod-kurse-link-color);
  font-weight: 700;
}

.cod-lesson-thumb.is-empty {
  background: var(--cod-kurse-soft-surface);
}

.cod-lesson-main h3 {
  font-size: var(--cod-ac-lesson-title-size, var(--cod-size-font-klein, 1.25rem));
  font-family: var(--cod-ac-title-font, var(--cod-font-card-title, inherit));
  font-weight: var(--cod-ac-title-weight, 700);
  line-height: 1.2;
  margin: 0 0 4px;
  color: var(--cod-kurse-title-color);
  text-transform: none;
  letter-spacing: 0;
}

.cod-lesson-meta {
  font-size: var(--cod-ac-meta-size, var(--cod-size-font-winzig, 1rem));
  opacity: 0.72;
  margin-bottom: 4px;
}

.cod-lesson-content {
  font-size: var(--cod-ac-meta-size, var(--cod-size-font-winzig, 1rem));
  margin: 6px 0 0;
}

.cod-done-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-weight: 700;
}

.cod-done-check input {
  width: 20px;
  height: 20px;
}

/* Ohne abspielbares Video (kein data-video, z. B. deaktivierte YouTube/Vimeo-
   Lektionen): Play-Symbol aus + kein Klick-Cursor. */
.cod-lesson-video:not([data-video]) {
  cursor: default;
}

.cod-lesson-video:not([data-video]) .cod-lesson-thumb span {
  display: none;
}

/* Kompakte Unterzeile: Dauer + Gesehen-Balken in EINER Zeile (Lektion bleibt flach) */
.cod-lesson-subline {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.cod-lesson-subline .cod-lesson-meta {
  margin-bottom: 0;
}

/* Gesehen-Fortschritt je Lektion (Balken + Prozent, wie im Affiliate-Chat) */
.cod-lesson-progress {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  flex: 1 1 160px;
  min-width: 120px;
  max-width: 420px;
}

.cod-lesson-progress-track {
  flex: 1 1 auto;
  height: 4px;
  background: #e5e7eb;
  border-radius: 2px;
  overflow: hidden;
}

.cod-lesson-progress-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: #3b82f6;
  border-radius: 2px;
  transition: width 0.3s;
}

.cod-lesson-progress-fill.is-done {
  background: #10b981;
}

.cod-lesson-progress-txt {
  font-size: 11px;
  color: #9ca3af;
  white-space: nowrap;
  min-width: 32px;
  text-align: right;
}

.cod-lesson-progress-txt.is-done {
  color: #10b981;
}

/* Auto-Abschluss-Hinweis (kein Hand-Toggle bei trackbaren Videos):
   dezent solange offen, kräftig sobald erledigt. */
.cod-done-check.cod-done-auto {
  font-weight: 400;
  opacity: 0.75;
  font-size: 14px;
}

.cod-lesson.is-done .cod-done-check.cod-done-auto {
  font-weight: 700;
  opacity: 1;
}

.cod-lesson.is-done {
  background: #f4fff8;
  border-color: #c6efd8;
}

/* Der gelbe Block trägt nur noch den EINEN Fall, für den er gebaut wurde:
   bezahlt, aber bis zum Ende der Widerrufsfrist zurückgestellt. Der normale
   Kauf-Knopf steht seit dem 12.08.2026 in der Knopfreihe der Karte - im Block
   stand der Preis ein zweites Mal, und er allein kostete 136 px Kartenhöhe. */
.cod-buy-area {
  margin: 12px 0 0;
  background: var(--cod-kurse-highlight-surface);
  border-radius: var(--cod-kurse-card-radius-sm);
  padding: 12px;
}

/* Form, Höhe und Schriftgewicht wie bei den Karten-Knöpfen (12.08.2026).
   Gemessen standen hier 48 px Höhe, Radius 14 und Gewicht 700 neben
   Karten-Knöpfen mit 40 px, Radius 8 und Gewicht 400 - in derselben Karte.
   Die FARBE bleibt an den Academy-Variablen, wie beim Lektionen-Knopf. */
.cod-buy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--cod-ac-button-radius, var(--cod-btn-angebot-border-radius, var(--cod-button-radius, 8px)));
  height: var(--cod-ac-button-height, var(--cod-btn-angebot-height, 40px));
  min-height: var(--cod-ac-button-height, var(--cod-btn-angebot-height, 40px));
  padding: 0 16px;
  background: var(--cod-kurse-button-bg);
  color: var(--cod-kurse-button-text);
  text-decoration: none;
  font-family: var(--cod-font-btn-angebot, inherit);
  font-size: var(--cod-ac-button-size, var(--cod-size-font-winzig, 1rem));
  font-weight: var(--cod-font-btn-angebot-weight, 400);
  line-height: 1.2;
  cursor: pointer;
  margin: 0;
  box-shadow: none;
}

.cod-buy-btn:hover {
  background: var(--cod-kurse-button-bg-hover);
}

/* Im gelben Block und im Kauf-Fenster steht der Knopf allein untereinander -
   dort braucht er wieder etwas Luft nach oben. */
.cod-buy-area .cod-buy-btn,
.cod-buy-modal .cod-buy-btn {
  margin-top: 8px;
}

.cod-buy-btn.is-paypal {
  background: #ffc439;
  color: var(--cod-kurse-text-color);
}

.cod-locked-box {
  background: var(--cod-kurse-highlight-surface);
  border-radius: var(--cod-kurse-card-radius-xs);
  font-size: var(--cod-ac-meta-size, var(--cod-size-font-winzig, 1rem));
  padding: 8px 12px;
  margin-top: 6px;
}

.cod-kurse-note {
  font-size: 12px;
  opacity: 0.7;
  margin-top: 8px;
}

.cod-video-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: rgba(0, 0, 0, 0.78);
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.cod-video-lightbox.is-open {
  display: flex;
}

.cod-video-lightbox > div {
  position: relative;
  width: min(1000px, 96vw);
  aspect-ratio: 16/9;
  background: #000;
  border-radius: var(--cod-kurse-card-radius-sm);
}

.cod-video-lightbox iframe {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: var(--cod-kurse-card-radius-sm);
}

/* Das Schliessen-X kommt seit dem 12.08.2026 aus dem gemeinsamen Baustein
   (cod-modal-close.php): 44 px, rundes Feld, SVG-Kreuz, oben rechts. Hier steht
   nur noch, was in DIESEM Fenster anders sein muss.

   Und das ist die Farbe: Der Rahmen der Lightbox ist schwarz, die Vorgabe des
   Bausteins ist ein blasses Blau mit dunkelblauem Kreuz - darauf waere das X
   praktisch unsichtbar. Gesetzt wird es ueber die Token des Bausteins, nicht
   ueber eine eigene Regel; so bleibt Form und Groesse an einer Stelle. */
.cod-video-lightbox {
  --cod-modal-close-bg: rgba(255, 255, 255, 0.92);
  --cod-modal-close-bg-hover: #fff;
  --cod-color-heading: #1f4d86;
}

.cod-buy-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999998;
  background: rgba(0, 0, 0, 0.58);
  align-items: center;
  justify-content: center;
  padding: 22px;
}

.cod-buy-modal.is-open {
  display: flex;
}

.cod-buy-modal-inner {
  position: relative;
  width: min(520px, 94vw);
  background: var(--cod-kurse-surface);
  border-radius: var(--cod-kurse-card-radius);
  padding: 26px;
  box-shadow: var(--cod-kurse-shadow-modal);
}

.cod-buy-modal-inner h3 {
  margin: 0 46px 10px 0;
  font-size: 26px;
  color: var(--cod-kurse-title-color);
}


.cod-buy-modal-price {
  font-size: 18px;
  margin: 10px 0 18px;
}

/* "(inkl. MwSt.)" bleibt an der Preiszeile, kleiner und mit normalem
   Gewicht - <strong> daneben soll nicht mitgezogen werden. */
.cod-buy-modal-price-hinweis {
  font-size: 13px;
  font-weight: 400;
}

/* Der Mitglieder-Hinweis folgt direkt auf den Preis - negativer Top-Rand
   kollabiert mit dem margin-bottom des Preises (18px) zu einem knappen
   Abstand (18 + -10 = 8px), statt sich zu den vollen 18px zu addieren.
   Zwilling der Zentrale (includes/academy/assets/frontend.css). */
.cod-buy-modal-member {
  font-size: 15px;
  margin: -10px 0 4px;
  color: var(--cod-kurse-text-color);
}

/* Zweite, kleinere Zeile direkt darunter - dieselbe einzige Schriftfarbe,
   Abstufung über die Größe. */
.cod-buy-modal-member-hinweis {
  font-size: 12px;
  margin: 0 0 18px;
  color: var(--cod-kurse-text-color);
}

.cod-buy-modal-member-hinweis a {
  color: var(--cod-kurse-link-color);
  text-decoration: underline;
}

.cod-buy-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Die Karte selbst braucht keine Media-Query mehr - sie schaltet über
   flex-wrap nach ihrem eigenen Platz um (siehe Kommentar bei .cod-course-head).
   Was hier bleibt, hängt wirklich an der Fensterbreite: die Debug-Tafel und
   die Lektionszeile, deren Vorschaubild sonst keinen Text mehr neben sich
   lässt. */
@media (max-width: 1000px) {
  .cod-kurse-debug-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 800px) {
  .cod-kurse-debug {
    padding: 16px;
  }

  .cod-kurse-debug-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  /* Das Vorschaubild bleibt NEBEN dem Text, es wird nur schmaler. Vorher
     rutschte es hier auf volle Breite und war 177 px hoch - fuer eine
     Lektionszeile mit Titel, Dauer und einem Hinweis ist das die Haelfte der
     Hoehe fuer das kleinste Stueck Information. */
  .cod-lesson {
    grid-template-columns: 116px 1fr;
    gap: 12px;
  }

  .cod-lesson-thumb {
    width: 116px;
  }

  /* Der Lektionstitel ist eine Unterzeile, keine Kartenueberschrift - auf
     schmalen Karten bleibt sonst kaum Platz fuer den Text daneben. */
  .cod-lesson-main h3 {
    font-size: var(--cod-ac-lesson-title-size, var(--cod-size-font-winzig, 1rem));
  }
}

.cod-course-highlight {
  box-shadow: var(--cod-kurse-shadow-highlight);
}