/*
 * Kurse als Kursreihen – Übersicht /akademie/kurse/ und Kursseiten (inc/kurse-website.php)
 * Farben und Abstände aus style.css (--primary-color, --gray-color, --cta-color, --alert-yellow …)
 */

.kurs-sr {position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;}
.kurs-uebersicht [hidden], .kurs-reihe [hidden] {display: none !important;}

/* ── Status-Marken ── */
.kurs-marke {display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; line-height: 1; padding: 5px 8px; border-radius: 6px; border: 1px solid; white-space: nowrap;}
.kurs-marke::before {content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor;}
.kurs-marke-wenig {background: var(--alert-yellow); color: #5c4400; border-color: #d9b64a;}
.kurs-marke-aus {background: #fde8e8; color: #8a1f1f; border-color: var(--alert-red);}
.kurs-marke-aus::before {border-radius: 1px; transform: rotate(45deg);}

/* ── Übersicht: Filter (eine Zeile) ── */
.kurs-filter {display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; background: var(--gray-color); border-radius: var(--border-radius); padding: 16px 20px; margin-bottom: 30px;}
.kurs-filter-label {font-weight: 700; color: var(--primary-color);}
.kurs-filter-knoepfe {display: flex; flex-wrap: wrap; gap: 8px;}
.kurs-filter-knopf {display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 9px 12px 9px 14px; box-sizing: border-box; border-radius: 15px; background: #fff; color: var(--primary-color); box-shadow: var(--box-shadow); font-size: 14px; font-weight: 600; line-height: 1; text-decoration: none;}
.kurs-filter-knopf:hover {background: #e3eff7;}
.kurs-filter-knopf[aria-current="true"] {background: var(--primary-color); color: #fff;}
.kurs-filter-n {font-size: 12px; background: var(--gray-color); color: var(--primary-color); border-radius: 10px; padding: 3px 7px;}
.kurs-filter-knopf[aria-current="true"] .kurs-filter-n {background: #fff; color: var(--primary-color);}
.kurs-filter-anzahl {margin: 0 0 0 auto; font-size: 14px; color: #5f5f5f;}  /* sichtbar ausgeblendet (kurs-sr), Ansage bleibt */

/* ── Übersicht: Karte je Kursreihe ── */
.kurs-liste {display: grid; gap: 30px;}
.kurs-karte {display: grid; grid-template-columns: minmax(280px, 38%) 1fr; background: #fff; border-radius: var(--border-radius); box-shadow: var(--box-shadow); overflow: hidden;}
.kurs-karte-bild {position: relative; min-height: 320px; background: var(--gray-color);}
.kurs-karte-bildlink {position: absolute; inset: 0; display: block;}
.kurs-karte-bildlink img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;}
.kurs-karte-verlauf {position: absolute; inset: 0; z-index: 1; pointer-events: none;}
.kurs-karte-mehr {position: absolute; left: 30px; bottom: 70px; z-index: 3; text-decoration: none;}   /* 40 px höher (Kundin 05.11.2026) */
.kurs-karte-bild:hover .kurs-karte-mehr:before, .kurs-karte-bild:hover .kurs-karte-mehr:after {width: calc(100% + 10px);}
.kurs-stoerer {position: absolute; top: 24px; left: 0; z-index: 3; background: var(--cta-color); color: var(--primary-color); padding: 10px 14px; font-size: 14px; line-height: 14px; font-weight: 700; border-radius: 0 var(--border-radius) var(--border-radius) 0;}
.kurs-karte-referent {position: absolute; right: 30px; top: 30px; z-index: 2; width: 200px; height: 200px; border-radius: 50%; border: 5px solid #fff; overflow: hidden; background: #d9d9d9; box-shadow: var(--box-shadow); box-sizing: border-box;}
.kurs-karte-referent img {width: 100%; height: 100%; object-fit: cover; object-position: top; display: block;}
.kurs-karte-inhalt {padding: 28px 32px 26px; min-width: 0;}
.kurs-karte .kurs-pills .pill {margin: 0 6px 12px 0;}
.kurs-karte-titel {font-size: 24px; line-height: 1.25; color: var(--primary-color); margin-bottom: 6px; text-wrap: balance;}
.kurs-karte-titel a {color: inherit; text-decoration: none;}
.kurs-karte-titel a:hover {text-decoration: none;}
.kurs-karte-name {font-weight: 600; font-size: 15px; margin-bottom: 10px;}
.kurs-karte-text {display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 10px;}
.kurs-karte-meta {font-weight: 700; color: var(--primary-color); margin-bottom: 18px;}
.kurs-karte-th {font-size: 15px; color: #5f5f5f; font-weight: 700; margin-bottom: 4px;}
.kurs-karte-termine {list-style: none; padding: 0; margin: 0; border-top: 1px solid #e0e0e0; display: grid; grid-template-columns: max-content max-content 1fr auto; column-gap: 22px;}
.kurs-t {margin: 0; grid-column: 1 / -1; display: grid; grid-template-columns: 10.5em 5.5em 1fr auto; column-gap: 22px; row-gap: 4px; align-items: center; padding: 9px 0; border-bottom: 1px solid #e0e0e0; list-style: none;}
@supports (grid-template-columns: subgrid) {.kurs-t {grid-template-columns: subgrid;}}
.kurs-t-datum time {font-weight: 700; color: var(--text-color); white-space: nowrap; font-variant-numeric: tabular-nums;}
.kurs-t-wt {font-weight: 500; color: #5f5f5f; font-size: 14px; white-space: nowrap;}
.kurs-t-aktion {justify-self: end; display: flex; flex-direction: column; align-items: flex-end; gap: 6px;}
.kurs-t-link {display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: 15px; color: var(--primary-color); text-decoration: none; border: 2px solid var(--primary-color); border-radius: var(--border-radius); padding: 5px 12px; line-height: 1.2; white-space: nowrap;}
.kurs-t-link:hover, .kurs-t-link:focus-visible {background: var(--cta-color); border-color: var(--cta-color);}
.kurs-t.ist-voll time {color: #5f5f5f;}
.kurs-leer {background: var(--gray-color); border-radius: var(--border-radius); padding: 30px; text-align: center;}
.kurs-leer h2 {color: var(--primary-color); font-size: 22px; margin-bottom: 8px;}

@media (max-width: 1200px) {
    .kurs-karte-referent {width: 160px; height: 160px; top: 20px; right: 20px;}
}
@media (max-width: 820px) {
    .kurs-karte {grid-template-columns: 1fr;}
    .kurs-karte-bild {min-height: 0; aspect-ratio: 16 / 9;}
    .kurs-karte-referent {width: 110px; height: 110px; border-width: 4px; right: 12px; top: 12px;}
    .kurs-karte-mehr {left: 20px; bottom: 60px;}
    .kurs-karte-inhalt {padding: 20px 18px;}
    .kurs-karte-titel {font-size: 20px;}
    .kurs-karte-termine {display: block;}
    .kurs-t {grid-template-columns: auto 1fr auto; grid-template-areas: "d w a" "o o a"; column-gap: 10px;}
    .kurs-t-datum {grid-area: d;} .kurs-t-wt {grid-area: w;} .kurs-t-ort {grid-area: o;} .kurs-t-aktion {grid-area: a;}
    .kurs-filter {padding: 14px;}
    .kurs-filter-label {width: 100%;}
    .kurs-filter-anzahl {margin-left: 0;}
}

/* ── Kursseite: Kopf (header.php, Zweig is_single) – Höhe passt sich langen Titeln an ── */
.single-kurse .small-stage {height: auto; min-height: 120px; padding: 24px 0; box-sizing: border-box;}
.single-kurse .small-stage h1 {line-height: 1.2; text-wrap: balance;}

/* ── Kursseite: Raster ── */
.kurs-raster {display: grid; grid-template-columns: 26% 70%; justify-content: space-between; grid-template-areas: "info bild" "info pills" "info inhalt"; align-items: start; margin-top: 50px; margin-bottom: 80px;}
.kurs-raster .kurs-kopfbild {grid-area: bild; margin-bottom: 45px;}
/* Pills Labor/Praxis unter dem Kopfbild, über „Thematik“ (Roman 29.10.2026) */
.kurs-pills-zeile {grid-area: pills; margin-bottom: 15px;}
.kurs-pills-zeile .pill {margin: 0 6px 10px 0;}
.kurs-raster:has(.kurs-pills-zeile) .kurs-kopfbild {margin-bottom: 20px;}
.kurs-info {grid-area: info; background: var(--gray-color); border-radius: var(--border-radius); padding: 20px 22px; box-sizing: border-box;}
.kurs-inhalt {grid-area: inhalt; min-width: 0;}
/* Seitenleiste bleibt beim Scrollen stehen (wie .sidebar in style.css). Ist sie höher als das Fenster, klebt sie mit
   der Unterkante statt unten abgeschnitten zu sein (Kundin 05.11.2026). --kurs-info-hoehe setzt kurse.js; ohne
   JavaScript ist top so klein, dass sie normal mitscrollt. */
@media (min-width: 1025px) {
    .kurs-info {position: sticky; top: min(180px, calc(100vh - var(--kurs-info-hoehe, 200vh) - 20px));}
}
@media (max-width: 1024px) {
    .kurs-raster {grid-template-columns: 100%; grid-template-areas: "bild" "pills" "info" "inhalt"; margin-top: 30px;}
    .kurs-raster .kurs-kopfbild {margin-bottom: 30px;}
    .kurs-info {margin-bottom: 40px;}
}

/* Auf einen Blick – kompakter (Kundin 05.11.2026): Schriftgröße bleibt, Zeilenhöhe und Abstände kleiner */
.kurs-info h2 {font-size: 20px; color: var(--primary-color); margin-bottom: 6px;}
.kurs-info dl {margin: 0;}
.kurs-info dl > div {padding: 8px 0; border-top: 1px solid #d6d6d6;}
.kurs-info dt {font-weight: 700; color: var(--primary-color); font-size: var(--font-size); line-height: 1.45;}
.kurs-info dd {margin: 0; font-size: var(--font-size); line-height: 1.45;}
.kurs-info-referent {display: flex; flex-direction: column; align-items: flex-start; gap: 10px;}
.kurs-info-foto {width: 112px; height: 112px; flex: none; border-radius: 50%; overflow: hidden; background: #d9d9d9; border: 3px solid #fff;}
.kurs-info-foto img {width: 100%; height: 100%; object-fit: cover; object-position: top; display: block;}
.kurs-info-kontakt {margin-top: 0; padding-top: 8px; border-top: 1px solid #d6d6d6; font-size: var(--font-size); line-height: 1.45;}
.kurs-info-kontakt h3 {font-size: var(--font-size); line-height: 1.45; font-weight: 700; color: var(--primary-color); margin-bottom: 2px;}   /* wie die übrigen Bezeichnungen (Kundin 09.11.2026) */
.kurs-info-orte {color: inherit;}
.kurs-info-kontakt p {margin: 0;}
.kurs-info a {overflow-wrap: anywhere;}

/* Inhalt */
.kurs-abschnitt {margin-bottom: 50px; scroll-margin-top: 200px;}
.kurs-abschnitt > h2, .kurs-anmeldung-kopf h2 {font-size: 26px; line-height: 1.25; color: var(--primary-color); margin-bottom: 14px;}
.kurs-text ul {padding-left: 20px; margin-bottom: var(--line-height);}
.kurs-text li {list-style-type: disc; margin: 0 0 4px;}
.kurs-details h3, .kurs-details h4, .kurs-details strong {color: var(--primary-color);}
.kurs-hinweis {background: var(--gray-color); border-radius: var(--border-radius); padding: 20px;}
.kurs-hinweis p:last-child {margin-bottom: 0;}

/* Terminliste */
.kurs-terminliste {list-style: none; padding: 0; margin: 0; display: grid; gap: 12px;}
/* Veranstaltungsorte als Cards über den Terminen, gleiche Optik wie die Terminzeilen; die Card zum gewählten Termin
   wird hervorgehoben (Kundin 09.11.2026) */
.kurs-orte {list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px;}
.kurs-ort {position: relative; margin: 0; list-style: none; display: flex; flex-direction: column; background: var(--gray-color); border: 2px solid transparent; border-radius: var(--border-radius); padding: 16px 20px; transition: var(--transition);}
.kurs-ort-name {margin: 0 0 4px; padding-right: 86px; font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--primary-color);}
.kurs-ort address {font-style: normal; line-height: 1.45; margin: 0 0 10px;}
.kurs-ort-route {margin-top: auto; align-self: flex-start; font-weight: 700; font-size: 15px; color: var(--primary-color);}
.kurs-ort-marke {display: none; position: absolute; top: 14px; right: 14px; font-size: 12px; font-weight: 700; line-height: 1; background: var(--primary-color); color: #fff; border-radius: 6px; padding: 5px 8px;}
.kurs-ort.ist-gewaehlt {border-color: var(--primary-color); background: #e6f1f8;}
.kurs-ort.ist-gewaehlt .kurs-ort-marke {display: block;}

.kurs-tl {margin: 0; list-style: none; display: grid; grid-template-columns: minmax(170px, 1fr) minmax(140px, 1.2fr) minmax(200px, auto); gap: 10px 22px; align-items: center; background: var(--gray-color); border-radius: var(--border-radius); padding: 16px 20px; border: 2px solid transparent;}
.kurs-tl.ist-gewaehlt {border-color: var(--primary-color); background: #e6f1f8;}
.kurs-tl-datum strong {display: block; font-size: 18px; color: var(--primary-color); line-height: 1.3;}
.kurs-tl-datum span {font-size: 14px; color: #5f5f5f;}
.kurs-tl-ort {font-weight: 700;}
.kurs-tl-aktion {display: flex; flex-direction: column; align-items: flex-end; gap: 8px;}
.kurs-tl-knopf {display: inline-block; font-weight: 700; font-size: 15px; background: #fff; color: var(--primary-color); border: 2px solid var(--primary-color); border-radius: var(--border-radius); padding: 9px 14px; text-decoration: none; white-space: nowrap;}
.kurs-tl-knopf:hover, .kurs-tl-knopf:focus-visible {background: var(--cta-color); border-color: var(--cta-color);}
.kurs-tl.ist-gewaehlt .kurs-tl-knopf {background: var(--primary-color); color: #fff;}
.kurs-tl.ist-gewaehlt .kurs-tl-knopf-text::before {content: "✓ ";}
.kurs-tl-voll {font-size: 14px; color: #5f5f5f; font-weight: 600;}
@media (max-width: 820px) {
    .kurs-tl {grid-template-columns: 1fr auto; padding: 14px;}
    .kurs-tl-aktion {grid-column: 1 / -1; align-items: stretch;}
    .kurs-tl-knopf {text-align: center;}
}

/* ── Anmeldung: deutlich abgesetzt ── */
.kurs-anmeldung {margin-bottom: 50px; border: 2px solid var(--primary-color); border-radius: var(--border-radius); overflow: hidden; scroll-margin-top: 200px; box-shadow: var(--box-shadow);}
.kurs-anmeldung-kopf {background: var(--primary-color); color: #fff; padding: 24px 30px;}
.kurs-anmeldung-kopf h2 {color: #fff; margin-bottom: 10px;}
.kurs-schritte {display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; padding: 0; list-style: none; counter-reset: kurs-schritt; font-weight: 600; font-size: 15px;}
.kurs-schritte li {counter-increment: kurs-schritt; display: flex; align-items: center; gap: 8px; list-style: none;}
.kurs-schritte li::before {content: counter(kurs-schritt); display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--cta-color); color: var(--primary-color); font-weight: 700; font-size: 14px;}
.kurs-anmeldung-inhalt {padding: 30px; background: #fff;}
.kurs-admin-hinweis {background: #fde8e8; border-left: 4px solid var(--alert-red); padding: 10px 14px;}
@media (max-width: 820px) {
    .kurs-anmeldung-kopf, .kurs-anmeldung-inhalt {padding: 20px 16px;}
}

/* Formular: Auswahlfeld „Termin“ ausgeblendet – gewählt wird in der Terminliste, angezeigt in „Ihr Termin“ (Kundin
   05.11.2026). Das Feld bleibt im Formular (Wert = Termin-ID für Mail und Prüfung). */
.kurs-anmeldung .wpforms-field.kurs-termin {display: none !important;}
.kurs-gewaehlt {display: grid; grid-template-columns: 1fr auto; column-gap: 16px; align-items: center; background: #e6f1f8; border: 2px solid transparent; border-radius: var(--border-radius); padding: 14px 18px; margin-bottom: 20px;}
.kurs-gewaehlt-titel {grid-column: 1; margin: 0; font-size: 14px; font-weight: 700; color: var(--primary-color); line-height: 1.4;}
.kurs-gewaehlt-text {grid-column: 1; margin: 0; font-size: 17px; font-weight: 700; color: var(--text-color); line-height: 1.4;}
.kurs-gewaehlt:not(.ist-gesetzt) .kurs-gewaehlt-text {font-size: var(--font-size); font-weight: 500;}
.kurs-gewaehlt-link {grid-column: 2; grid-row: 1 / span 2; font-weight: 700; font-size: 15px; color: var(--primary-color); white-space: nowrap;}
.kurs-gewaehlt.ist-fehler {border-color: var(--alert-red); background: #fde8e8;}
.kurs-gewaehlt.ist-fehler .kurs-gewaehlt-text {color: #8a1f1f; font-weight: 700;}
@media (max-width: 560px) {
    .kurs-gewaehlt {grid-template-columns: 1fr;}
    .kurs-gewaehlt-link {grid-column: 1; grid-row: auto; margin-top: 6px;}
}

/* Verpflegung: schlichte graue Hinweisbox ohne Warnzeichen (Kundin 05.11.2026, vorher gelb mit „⚠“). Alles bündig
   am Innenabstand der Box: die Layout-Spalten von WPForms bringen eigene Abstände mit, die hier entfallen. */
.kurs-anmeldung .wpforms-field.kurs-verpflegung-box,
.kurs-anmeldung .wpforms-field.kurs-verpflegung:not(.kurs-verpflegung-box .kurs-verpflegung) {background: var(--gray-color); border: 0; border-radius: var(--border-radius); padding: 18px 20px !important; margin: 20px 0 !important;}
.kurs-anmeldung .kurs-verpflegung-box .wpforms-field-layout-rows,
.kurs-anmeldung .kurs-verpflegung-box .wpforms-layout-row,
.kurs-anmeldung .kurs-verpflegung-box .wpforms-layout-column {margin: 0 !important; padding: 0 !important; width: 100% !important;}
.kurs-anmeldung .kurs-verpflegung-box .wpforms-layout-row + .wpforms-layout-row {margin-top: 14px !important;}
.kurs-anmeldung .kurs-verpflegung-box .wpforms-field.kurs-verpflegung {background: transparent; border: 0; padding: 0 !important; margin: 0 !important;}
.kurs-anmeldung .wpforms-field.kurs-verpflegung .wpforms-field-label {font-size: 16px; font-weight: 700; color: var(--primary-color); margin: 0 0 6px !important; padding: 0 !important;}
.kurs-anmeldung .wpforms-field.kurs-verpflegung ul {margin: 0 !important; padding: 0 !important;}
.kurs-anmeldung .wpforms-field.kurs-verpflegung ul li {margin: 0 !important; padding: 0 !important; display: flex; align-items: flex-start; gap: 10px;}
.kurs-anmeldung .wpforms-field.kurs-verpflegung ul li input {margin: 3px 0 0 !important; flex: none;}
.kurs-anmeldung .wpforms-field.kurs-verpflegung .wpforms-field-label-inline {font-size: 15px; font-weight: 500; line-height: 1.45; color: var(--text-color); margin: 0 !important;}
.kurs-anmeldung .wpforms-field.kurs-verpflegung .wpforms-field-description {font-size: 14px; font-weight: 500; line-height: 1.5; color: #5f5f5f; margin: 8px 0 0 !important; padding: 0 !important;}
.kurs-anmeldung .wpforms-container-full .wpforms-form .wpforms-field.kurs-verpflegung textarea {background: #fff !important;}

/* Teilnehmer: „+“ (weiteren Teilnehmer hinzufügen) als dunkelblauer Kreis mit weißem Plus (Wunsch der Kundin/Roman
   04.11.2026). WPForms setzt die Knöpfe mit hoher Spezifität auf 16 × 40 px – daher !important. Das Plus sind zwei
   Balken (sauber mittig statt Schriftzeichen). Platz zum Eingabefeld: 26 + 6 + 16 px passen in die Lücke von WPForms.
   translateY: WPForms schiebt die erste Zeile um 7 px nach unten, bei unseren Feldern sitzt sie mit 3 px mittig. */
.kurs-anmeldung .wpforms-field-repeater-display-rows-buttons {align-items: center; gap: 6px !important;}
.kurs-anmeldung .wpforms-field-repeater > .wpforms-field-layout-rows .wpforms-field-repeater-display-rows-buttons {transform: translateY(3px) !important;}
.kurs-anmeldung .wpforms-field-repeater-button-add {position: relative !important; display: inline-block !important; flex: 0 0 26px !important; width: 26px !important; min-width: 26px !important; height: 26px !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: var(--primary-color) !important; color: #fff !important; opacity: 1 !important; box-shadow: var(--box-shadow); cursor: pointer; transition: var(--transition);}
.kurs-anmeldung .wpforms-field-repeater-button-add svg {display: none !important;}
.kurs-anmeldung .wpforms-field-repeater-button-add::before, .kurs-anmeldung .wpforms-field-repeater-button-add::after {content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 1px; background: currentColor;}
.kurs-anmeldung .wpforms-field-repeater-button-add::after {transform: rotate(90deg);}
.kurs-anmeldung .wpforms-field-repeater-button-add:hover, .kurs-anmeldung .wpforms-field-repeater-button-add:focus-visible {background: var(--cta-color) !important; color: var(--primary-color) !important;}