/* KS Marktplatz – Frontend
 * Optik gemäß KS-CI (SCHNITTSTELLEN.md / Design-Tokens).
 * CI-Blau #253d54 · CI-Grün #326569 · Beige #e9e4d9 · Cinzel + Yantramanav
 */

.ks-marktplatz{
	/* Farben zentral vom Darkmode-Plugin (KS Theme) mit literalem Light-Fallback
	 * = bisheriger Wert → Light Mode unverändert; Dark Mode überschreibt --ks-*.
	 * CI-Blau/-Grün bleiben Marke (konstant); Flächen/Text nutzen semantische Rollen.
	 * Token-Quelle: knigge-spirit-darkmode css_property_map(). Badge-Töne (unten)
	 * haben noch KEIN kanonisches Token → literal (an Chefkoch gemeldet). */
	--ci-blau:var(--ks-blau,#253d54); --ci-gruen:var(--ks-gruen,#326569); --beige:var(--ks-section,#e9e4d9);
	--mp-card:var(--ks-surface,#ffffff); --mp-line:var(--ks-border,#e2dccf); --mp-muted:var(--ks-text-muted,#6f7c86);
	--mp-serif:'Cinzel','Cormorant Garamond',Georgia,serif;
	/* Die Live-Site liefert Yantramanav LOKAL aus, aber unter den Familiennamen
	 * „Yantramanav Light/Regular/Thin". Eine Familie „Yantramanav" OHNE Zusatz
	 * existiert dort NICHT — bis 0.14.3 fiel jede Regel still auf system-ui
	 * zurück. Stack identisch zum Cockpit (dort seit 0.90.0 im Einsatz).
	 * Zweiter Fallstrick: Alle Schnitte sind mit font-weight:100 deklariert.
	 * `font-weight:500` findet daher keine Face und wird synthetisch fett
	 * gerechnet → Gewicht IMMER über die Familie steuern, nie über font-weight. */
	--mp-sans:'Yantramanav Light','Yantramanav Regular','Yantramanav',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
	--mp-sans-m:'Yantramanav Regular','Yantramanav Light','Yantramanav',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
	--badge-kurs-bg:#e5ecf2; --badge-kurs-fg:#253d54;
	--badge-gut-bg:#e2ecec;  --badge-gut-fg:#2c565a;
	--badge-emp-bg:#f3ebd7;  --badge-emp-fg:#8a6314;
	--badge-kae-bg:#f4e5de;  --badge-kae-fg:#9c4a30;
	--badge-gh-bg:#e7e9ee;   --badge-gh-fg:#3a4a63;
	--badge-ter-bg:#eae6f0;  --badge-ter-fg:#5a4a78;
	font-family:var(--mp-sans);
	color:var(--ks-text,#253d54);
}
.ks-marktplatz *{box-sizing:border-box}

/* Nur für Screenreader: visuell weg, im Dokument erhalten.
 * Genutzt beim Ausblenden von Titeln (Betrags-Gutscheine, deren Titel bereits
 * der Preis ist). Die Überschrift MUSS bleiben — sonst verlöre die Produktseite
 * ihre H1 und Screenreader die Bezeichnung der Karte. */
.ksshop-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
	overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* Zentrierter Container für Toolbar + Grid (Hero bleibt vollbreit). */
.ks-marktplatz .ks-mp-container{max-width:var(--ksshop-max,1160px);margin:0 auto;
	padding:var(--ksshop-topgap,28px) 22px var(--ksshop-bottom,40px)}

/* Übernommene WooCommerce-Shop-Seite: volle Breite, Theme-Einengung aufheben. */
.ksshop-native-shop-page{width:100%;max-width:100%;margin:0;padding:0}
.ksshop-native-shop-page>main{width:100%;max-width:100%;margin:0;padding:0}

/* ---- Hero-Position gegenüber dem fixen Site-Header ------------------------
 * BuddyBoss rendert #masthead mit position:fixed und gleicht das über
 * `#content{padding-top:var(--bb-header-height)}` aus (live gemessen: 90px).
 *
 * BIS 0.14.0 hat das Plugin genau diesen Ausgleich mit `padding-top:0!important`
 * aufgehoben — die Regel kam in 0.7.2 dazu, um „Freiraum über dem Hero" zu
 * entfernen. Dieser Freiraum WAR aber der Header-Ausgleich. Folge: die oberen
 * ~90px des Heros lagen hinter dem Header (500px eingestellt → 349px sichtbar).
 *
 * STANDARD (a): Theme-Ausgleich bleibt stehen — der Hero beginnt unter dem
 * Header, exakt wie auf /kurse/. Nur zusätzliche Innenabstände der Shop-Hülle
 * werden entfernt, damit kein doppelter Freiraum entsteht. #content wird
 * bewusst NICHT angefasst: Adminleiste, mobile Höhe und seitentypspezifische
 * Theme-Overrides rechnet so weiterhin das Theme aus, nicht dieses Plugin. */
body.ksshop-native #primary.content-area,
body.ksshop-native .ksshop-native-shop-page,
body.ksshop-native .ksshop-native-shop-page>main{padding-top:0!important;margin-top:0!important}

/* VARIANTE (b), Backend-Option „Hero bis ganz nach oben":
 * Der Header schwebt über dem Hero. Damit die eingestellte Höhe die SICHTBARE
 * Höhe bleibt, wird die Header-Höhe (und bei überlappender Toolbar deren 46px)
 * aufgeschlagen; der Innenabstand oben wächst mit, damit die Überschrift nicht
 * unter dem Header klebt. Immer über die Theme-Variable, nie hartcodiert.
 * Hinweis: Der Site-Header ist deckend (#253d54) — die obersten
 * var(--bb-header-height) Pixel des Heros sind dauerhaft verdeckt. */
body.ksshop-hero-fulltop #content,
body.ksshop-hero-fulltop .site-content,
body.ksshop-hero-fulltop #primary.content-area,
body.ksshop-hero-fulltop .ksshop-native-shop-page{padding-top:0!important;margin-top:0!important}
body.ksshop-hero-fulltop .ks-marktplatz .ks-mp-hero{
	padding-top:calc(52px + var(--bb-header-height,90px))}

/* ---- Höhen-Ausgleich: „eingestellte Höhe = SICHTBARE Höhe" -----------------
 * Verbindlich laut CLAUDE.md („Hero-Höhe & Header-Ausgleich", 20.07.2026):
 * Trägt Frank 500px ein, müssen 500px Hero zu sehen sein — auf jedem Seitentyp.
 *
 * Zwei Dinge können von der eingestellten Höhe abgehen:
 *   1. der fixe Site-Header  → nur im fulltop-Modus (im below-Modus schiebt
 *      der Theme-Ausgleich den Hero darunter, es geht nichts verloren)
 *   2. die überlappende Toolbar bzw. der Mitglieder-Bereich → in BEIDEN Modi
 *      (−46px am unteren Rand)
 *
 * Punkt 2 fehlte in 0.14.1 im below-Modus: 500 eingestellt → 454 sichtbar.
 * Die Überlappung steckt jetzt in einer eigenen Variablen, damit beide Modi
 * dieselbe Formel benutzen und nicht auseinanderlaufen können. */
/* EINE Quelle für die Überlappung (Entscheidung Frank 21.07.2026, CLAUDE.md
 * „Hero-Höhe & Header-Ausgleich" Punkt 2b): einheitlich 48px, Referenz ist die
 * Kursseite. Aus dieser Variablen wird BEIDES gespeist — das negative
 * margin-top des überlappenden Elements UND der Aufschlag in der min-height.
 * Dadurch können sie nicht auseinanderlaufen; genau das war 2026 der Fehler
 * (Marktplatz rechnete 46px auf, Kurse/Kalender kompensierten gar nicht).
 * Überlappen tut immer das Element DIREKT unter dem Hero: normalerweise die
 * Toolbar, bei aktivem Mitglieder-Bereich dieser. */
.ks-marktplatz{--ksshop-overlap:0px}
.ks-marktplatz.ks-mp-overlap,
.ks-marktplatz.has-hero.has-member{--ksshop-overlap:48px}

/* Nur bei fest eingestellter Höhe rechnen — bei „automatisch" steht in
 * --ksshop-hero-h der Wert `auto`, und calc(auto + …) wäre ungültig
 * (die ganze Deklaration würde still verworfen). */
.ks-marktplatz.has-hero-h .ks-mp-hero{
	min-height:calc(var(--ksshop-hero-h) + var(--ksshop-overlap,0px))}
body.ksshop-hero-fulltop .ks-marktplatz.has-hero-h .ks-mp-hero{
	min-height:calc(var(--ksshop-hero-h) + var(--bb-header-height,90px) + var(--ksshop-overlap,0px))}

/* ---- Hero (vollbreit, feste Höhe – analog LearnDash-Übersicht) ---- */
.ks-marktplatz .ks-mp-hero{position:relative;overflow:hidden;text-align:center;color:#fff;
	margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);min-height:var(--ksshop-hero-h,320px);
	padding:52px 22px;display:flex;flex-direction:column;justify-content:center;align-items:center;
	background:
		radial-gradient(120% 140% at 12% 0%,rgba(80,120,120,.5),transparent 55%),
		radial-gradient(120% 130% at 90% 20%,rgba(60,90,110,.5),transparent 50%),
		linear-gradient(180deg,#8ea3a0 0%,#7d938f 45%,#6f857f 100%)}
.ks-marktplatz .ks-mp-hero.has-image{background-size:cover;background-position:center}
.ks-marktplatz .ks-mp-hero.has-image::before{content:"";position:absolute;inset:0;
	background:linear-gradient(180deg,rgba(37,61,84,.30),rgba(37,61,84,.62))}
.ks-marktplatz .ks-mp-hero>*{position:relative;z-index:1}

/* Schwebende Toolbar (überlappt Hero) – Optik wie Kurse-/Kalender-Seite.
 * Robust über hohen z-index; abschaltbar via Setting „toolbar_overlap". */
.ks-marktplatz.ks-mp-overlap .ks-mp-hero{padding-bottom:96px}
.ks-marktplatz.ks-mp-overlap .ks-mp-container{padding-top:0}
/* margin-top aus DERSELBEN Variablen wie der min-height-Aufschlag — nie eine
 * feste Zahl hier eintragen, sonst laufen beide auseinander. */
.ks-marktplatz.ks-mp-overlap .ks-mp-toolbar{
	margin-top:calc(var(--ksshop-overlap,48px) * -1);z-index:10}
/* ---- Hero-Standard (verbindlich, CLAUDE.md „Hero-Sektion", Frank 22.07.2026)
 * Eyebrow gesperrt/Großbuchstaben · Überschrift Cinzel font-weight:500 ·
 * Intro 20px in Yantramanav Light · Ausrichtung über die Backend-Option
 * (Klassen .hero-left / .hero-center am Hero selbst).
 * ⚠️ Die 500 NICHT auf 400 „zurückkorrigieren": Lokal installiert sind nur
 * Cinzel 100 und 400, die 500 wird daraus synthetisiert — das ist gewollt
 * (Franks Wahl 22.07.2026). */
.ks-marktplatz .ks-mp-hero-eyebrow{font-family:var(--mp-sans-m);text-transform:uppercase;
	letter-spacing:.22em;font-size:12px;color:rgba(255,255,255,.82)}
.ks-marktplatz .ks-mp-hero-title{font-family:var(--mp-serif);font-weight:500;color:#fff;
	letter-spacing:.02em;font-size:clamp(30px,5vw,52px);margin:.2em 0 .12em;line-height:1.08}
.ks-marktplatz .ks-mp-hero-sub{max-width:56ch;margin:0 auto;color:rgba(255,255,255,.94);
	font-size:20px;font-family:var(--mp-sans)}

/* Ausrichtung: gilt für Eyebrow, Überschrift und Intro gemeinsam. */
.ks-marktplatz .ks-mp-hero.hero-left{text-align:left;align-items:flex-start}
.ks-marktplatz .ks-mp-hero.hero-left .ks-mp-hero-sub{margin-left:0;margin-right:0}
.ks-marktplatz .ks-mp-hero.hero-left .ks-mp-search{margin-left:0}

/* ---- Suchfeld ---- */
.ks-marktplatz .ks-mp-search{max-width:460px;margin:20px auto 0;display:flex;align-items:center;
	gap:9px;background:var(--mp-card);border:1px solid var(--mp-line);border-radius:999px;
	padding:12px 20px;color:var(--mp-muted);box-shadow:0 1px 2px rgba(37,61,84,.06)}
.ks-marktplatz .ks-mp-hero.has-image .ks-mp-search{background:rgba(255,255,255,.92)}
.ks-marktplatz .ks-mp-searchrow{display:flex;justify-content:center;margin:0 0 22px}
.ks-marktplatz .ks-mp-searchrow .ks-mp-search{margin:0}
.ks-marktplatz .ks-mp-search-input{border:0;background:transparent;color:var(--ks-text,#253d54);
	font:15px var(--mp-sans);outline:none;width:100%}

/* ---- Toolbar (analog LearnDash-Übersicht): Tabs + Steuerung ---- */
.ks-marktplatz .ks-mp-toolbar{position:relative;z-index:2;display:flex;flex-wrap:wrap;
	align-items:center;justify-content:space-between;gap:14px 22px;background:var(--mp-card);
	border:1px solid var(--mp-line);border-radius:14px;padding:13px 18px;
	box-shadow:0 1px 2px rgba(37,61,84,.06),0 10px 30px rgba(37,61,84,.10);margin:0 0 26px}
/* Ausrichtung (Backend-Option) */
.ks-marktplatz .ks-mp-toolbar.align-center{justify-content:center}
.ks-marktplatz .ks-mp-toolbar.align-left{justify-content:flex-start}
.ks-marktplatz .ks-mp-toolbar.align-right{justify-content:flex-end}

/* Filter-Tabs (Segmented Pill, verbindliche KS-Optik) */
.ks-marktplatz .ks-tabs{display:inline-flex;flex-wrap:wrap;gap:6px;background:var(--beige);
	border-radius:11px;padding:5px}
.ks-marktplatz .ks-tab{border:0;background:transparent;font:15px/1 var(--mp-sans-m);
	color:var(--mp-muted);padding:8px 18px;border-radius:8px;cursor:pointer;
	transition:background-color .2s ease,color .2s ease}
/* Hover = CI-Grün-Fläche (verbindliche KS-Pill-Optik, CLAUDE.md/SCHNITTSTELLEN.md).
 * Die is-active-Hover-Regel MUSS bleiben: sonst hinge die Darstellung des
 * aktiven Tabs allein an der Reihenfolge dieser beiden Regeln. */
.ks-marktplatz .ks-tab:hover{background:var(--ks-accent,#326569);color:#fff}
.ks-marktplatz .ks-tab.is-active{background:var(--ks-button,#253d54);color:#fff}
.ks-marktplatz .ks-tab.is-active:hover{background:var(--ks-button,#253d54);color:#fff}

/* Pflicht laut CLAUDE.md: Autoren-CSS schlägt das UA-Stylesheet — ohne diese
 * Regel bliebe ein per JS mit [hidden] ausgeblendetes Element sichtbar, sobald
 * irgendeine Basisregel ein `display` setzt (Fehler trat 2026 in Kalender 1.43.0
 * UND Kurse 0.6.1 unabhängig auf). */
.ks-marktplatz [hidden],
.ksshop-product [hidden]{display:none!important}

.ks-marktplatz .ks-mp-toolbar-right{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.ks-marktplatz .ks-mp-field{display:flex;flex-direction:column;gap:5px}
.ks-marktplatz .ks-mp-lbl{font:11px var(--mp-sans-m);letter-spacing:.14em;
	text-transform:uppercase;color:var(--mp-muted)}
.ks-marktplatz .ks-mp-field select{appearance:none;-webkit-appearance:none;-moz-appearance:none;
	border:1px solid var(--mp-line);color:var(--ks-text,#253d54);border-radius:9px;
	padding:10px 34px 10px 13px;font:14px var(--mp-sans);min-width:158px;cursor:pointer;
	background-color:var(--mp-card);
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236f7c86' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");
	background-repeat:no-repeat;background-position:right 13px center;background-size:11px 7px}
/* „Eigene Dropdown-Pfeile" aus → Browser-Standardpfeil. */
.ks-marktplatz .no-custom-arrows .ks-mp-field select{appearance:auto;-webkit-appearance:auto;
	-moz-appearance:auto;background-image:none;padding-right:13px}
.ks-marktplatz .ks-mp-view{display:inline-flex;gap:4px;border:1px solid var(--mp-line);
	border-radius:9px;padding:3px;align-self:center}
/* Suchfeld-Lupe als monochrome CSS-Maske (Aktions-Icon-Standard, 28.07.2026):
 * ersetzt das frühere Emoji 🔍, das auf Android/im App-WebView farbig rendert.
 * `currentColor` → folgt automatisch der Textfarbe des Feldes. */
.ks-marktplatz .ks-mp-search-ico{width:16px;height:16px;flex:0 0 auto;
	background-color:currentColor;opacity:.7;
	-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
	-webkit-mask-position:center;mask-position:center;
	-webkit-mask-size:contain;mask-size:contain;
	-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' d='M10.5 3a7.5 7.5 0 105.3 12.8 7.5 7.5 0 00-5.3-12.8zm5.3 12.8L21 21'/%3E%3C/svg%3E");
	mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' d='M10.5 3a7.5 7.5 0 105.3 12.8 7.5 7.5 0 00-5.3-12.8zm5.3 12.8L21 21'/%3E%3C/svg%3E")}

/* Geschenk-Symbol im Button „Als Geschenk verschenken" — ebenfalls Maske
 * statt Emoji, damit es beim Hover auf Weiß mitwechselt. */
.ksshop-product .ksp-btn-gift::before{content:"";width:17px;height:17px;flex:0 0 auto;
	background-color:currentColor;
	-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
	-webkit-mask-position:center;mask-position:center;
	-webkit-mask-size:contain;mask-size:contain;
	-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 7h-2.2a3 3 0 00-.8-3.6A3 3 0 0012 4a3 3 0 00-5-.6A3 3 0 006.2 7H4a1 1 0 00-1 1v3h9V7h0v4h9V8a1 1 0 00-1-1zM9 4.5a1.2 1.2 0 011.9 0L12 6h-2c-.8 0-1.4-.7-1-1.5zm5.1 0c.6.8 0 1.5-.8 1.5h-1.2l1-1.5a1.2 1.2 0 011 0zM4 13v7a1 1 0 001 1h6v-8H4zm9 8h6a1 1 0 001-1v-7h-7v8z'/%3E%3C/svg%3E");
	mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 7h-2.2a3 3 0 00-.8-3.6A3 3 0 0012 4a3 3 0 00-5-.6A3 3 0 006.2 7H4a1 1 0 00-1 1v3h9V7h0v4h9V8a1 1 0 00-1-1zM9 4.5a1.2 1.2 0 011.9 0L12 6h-2c-.8 0-1.4-.7-1-1.5zm5.1 0c.6.8 0 1.5-.8 1.5h-1.2l1-1.5a1.2 1.2 0 011 0zM4 13v7a1 1 0 001 1h6v-8H4zm9 8h6a1 1 0 001-1v-7h-7v8z'/%3E%3C/svg%3E")}

.ks-marktplatz .ks-mp-view-btn{border:0;background:transparent;border-radius:7px;
	padding:9px 12px;cursor:pointer;color:var(--mp-muted);font-size:15px;line-height:1}
/* Fläche/Farbe erst bei Hover (Aktions-Icon-Standard) — fehlte bis 0.17.0
 * ganz, obwohl der Umschalter die einzige echte Icon-Leiste des Plugins ist. */
.ks-marktplatz .ks-mp-view-btn:hover{background:var(--ks-accent,#326569);color:#fff}
.ks-marktplatz .ks-mp-view-btn.is-active{background:var(--ks-button,#253d54);color:#fff}
.ks-marktplatz .ks-mp-view-btn.is-active:hover{background:var(--ks-button,#253d54);color:#fff}

.ks-marktplatz .ks-mp-noresult{text-align:center;color:var(--mp-muted);padding:30px 0}

/* Ergebniszahl (wird beim Filtern live aktualisiert) */
.ks-marktplatz .ks-mp-count{text-align:center;color:var(--mp-muted);font-size:13.5px;
	letter-spacing:.04em;margin:-10px 0 16px}
.ks-marktplatz .ks-mp-count-num{font-family:var(--mp-sans-m);color:var(--ks-text,#253d54)}

/* Sichtbarer Tastatur-Fokus (Barrierefreiheit) */
.ks-marktplatz .ks-tab:focus-visible,
.ks-marktplatz .ks-mp-view-btn:focus-visible,
.ks-marktplatz .ks-mp-chip:focus-visible,
.ks-marktplatz .ks-btn:focus-visible{outline:2px solid var(--ks-accent,#326569);outline-offset:2px}

/* ---- Startansicht: zweistufiger Einstieg (0.24.0) ------------------------
 * Stufe 1 zeigt nur die Bereiche, Stufe 2 Filterleiste und Angebote. Vorbild
 * ist der Ablauf des Workshops-Plugins.
 * (Die Absicherung von `[hidden]` steht bereits weiter oben bei der Toolbar und
 * gilt fuer den ganzen Block mit.) */
.ks-marktplatz .ks-mp-tiles{display:grid;gap:20px;margin-bottom:var(--ksshop-topgap,28px);
	grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
	transition:opacity .28s ease,transform .28s ease}
.ks-marktplatz .ks-mp-tiles.is-leaving{opacity:0;transform:translateY(-12px) scale(.99)}
/* Ohne Hero braucht die Kachelreihe oben etwas Luft. */
.ks-marktplatz:not(.has-hero) .ks-mp-tiles{margin-top:var(--ksshop-topgap,28px)}

/* Die Kachel ist ein Link (Ohne-JS-Fall) oder, bei virtuellen Kategorien ohne
 * eigene Seite, ein Knopf. Beide bekommen dieselbe Optik. */
.ks-marktplatz .ks-mp-tile{display:flex;flex-direction:column;text-align:center;width:100%;
	padding:26px 20px 20px;border:1px solid var(--ks-border,#efeae0);border-radius:12px;
	background:var(--ks-surface,#fff);color:var(--ks-text,#253d54);text-decoration:none;cursor:pointer;
	font-family:var(--mp-sans);font-size:16px;box-shadow:0 16px 40px -32px rgba(0,0,0,.55);
	transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.ks-marktplatz .ks-mp-tile:hover{transform:translateY(-4px);border-color:#ded8ca;
	box-shadow:0 26px 50px -30px rgba(0,0,0,.55)}
.ks-marktplatz .ks-mp-tile:focus-visible{outline:2px solid var(--ks-accent,#326569);outline-offset:3px}
.ks-marktplatz .ks-mp-tile-icon{display:flex;align-items:center;justify-content:center;height:74px;
	color:var(--ks-accent,#326569);background-size:cover;background-position:center}
.ks-marktplatz .ks-mp-tile-icon svg{width:44px;height:44px}
.ks-marktplatz .ks-mp-tile-title{font-family:'Cinzel',Georgia,serif;font-weight:400;font-size:19px;
	line-height:1.3;letter-spacing:.03em;margin-top:6px;color:var(--ks-heading,#253d54)}
.ks-marktplatz .ks-mp-tile-sep{height:1px;background:var(--ks-border,#efeae0);margin:15px 10px}
.ks-marktplatz .ks-mp-tile-text{flex:1;font-size:15px;line-height:1.5;color:var(--mp-muted);margin-bottom:16px}
.ks-marktplatz .ks-mp-tile-count{font-family:var(--mp-sans-m);font-size:12.5px;letter-spacing:.12em;
	text-transform:uppercase;color:var(--mp-muted);margin-bottom:14px}
.ks-marktplatz .ks-mp-tile-cta{display:flex;align-items:center;justify-content:center;gap:8px;
	background:var(--ks-button,#253d54);color:#fff;border-radius:8px;padding:11px 16px;
	font-family:var(--mp-sans-m);font-size:15px;transition:background-color .25s ease}
.ks-marktplatz .ks-mp-tile:hover .ks-mp-tile-cta{background:var(--ks-accent,#326569)}
.ks-marktplatz .ks-mp-tile-cta svg{width:15px;height:15px;flex:0 0 auto}
.ks-marktplatz .ks-mp-tiles-hint{grid-column:1/-1;text-align:center;color:var(--mp-muted);
	font-size:13.5px;letter-spacing:.04em;margin:6px 0 0}

/* Variante B: Bild der WooCommerce-Kategorie statt Icon, Text linksbuendig. */
.ks-marktplatz.ks-mp-var-b .ks-mp-tile{padding:0;overflow:hidden;text-align:left}
.ks-marktplatz.ks-mp-var-b .ks-mp-tile-icon{height:150px;border-radius:0;
	background-color:var(--ks-section,#e9e4d9);color:var(--ks-accent,#326569)}
.ks-marktplatz.ks-mp-var-b .ks-mp-tile-icon svg{width:52px;height:52px}
.ks-marktplatz.ks-mp-var-b .ks-mp-tile-title{margin:18px 20px 0;font-size:20px}
.ks-marktplatz.ks-mp-var-b .ks-mp-tile-sep{display:none}
.ks-marktplatz.ks-mp-var-b .ks-mp-tile-text{margin:10px 20px 14px}
.ks-marktplatz.ks-mp-var-b .ks-mp-tile-count{margin:0 20px 14px}
.ks-marktplatz.ks-mp-var-b .ks-mp-tile-cta{margin:0 20px 20px;justify-content:space-between}

/* Stufe 2 blendet sanft ein. Der Startzustand wird bewusst NUR per Klasse
 * gesetzt, die das Skript vergibt: Ohne JavaScript ist Stufe 2 einfach sichtbar
 * und voll bedienbar (sonst stünde dort eine unsichtbare, aber Platz nehmende
 * Fläche). */
.ks-marktplatz.ks-mp-2stage .ks-mp-stage2{transition:opacity .32s ease,transform .32s ease}
.ks-marktplatz.ks-mp-2stage .ks-mp-stage2.is-fresh{opacity:0;transform:translateY(12px)}

/* Überlappung mit dem Hero: In Stufe 1 übernimmt sie die Kachelreihe, in Stufe 2
 * wieder die Toolbar (die Kacheln sind dann ausgeblendet). Beide holen den Wert
 * aus derselben Variablen wie die Höhenkompensation des Hero, damit sichtbare
 * Hero-Höhe und Überlappung nicht auseinanderlaufen (CLAUDE.md, Punkt 2b). */
.ks-marktplatz.ks-mp-2stage.ks-mp-overlap .ks-mp-tiles{position:relative;z-index:10;
	margin-top:calc(var(--ksshop-overlap,48px) * -1)}

/* „Uebersicht": Rueckweg in der Filterleiste. */
.ks-marktplatz .ks-mp-tostart{display:inline-flex;align-items:center;gap:7px;
	border:1.5px solid var(--ks-border,#efeae0);background:transparent;color:var(--ks-text,#253d54);
	font-family:var(--mp-sans-m);font-size:14.5px;padding:8px 15px;border-radius:8px;cursor:pointer;
	transition:border-color .2s ease,background-color .2s ease}
.ks-marktplatz .ks-mp-tostart:hover{border-color:var(--ks-button,#253d54);background:rgba(37,61,84,.06)}
.ks-marktplatz .ks-mp-tostart:focus-visible{outline:2px solid var(--ks-accent,#326569);outline-offset:2px}
.ks-marktplatz .ks-mp-tostart svg{width:15px;height:15px;flex:0 0 auto}

/* ---- Weitersagen: KS-Teilen-Standard (0.27.0) -------------------------------
 * EIN Knopf „Teilen", darunter klappt die beschriftete Liste auf. Gleiche Liste
 * auf der Detailseite und in der Karte, nur die Positionierung unterscheidet
 * eine Modifier-Klasse. Vorgabe des Mediathek-Chats, von Frank am 26.08.2026 zum
 * Standard erklaert.
 *
 * ⚠️ `[hidden]` ausdruecklich absichern: `display:flex` weiter unten wuerde das
 * Attribut sonst schlagen und die Liste bliebe offen (derselbe Fehler wie in
 * Kalender 1.43.0 und Kurse 0.6.1). */
.ksshop-share{position:relative;display:inline-block}
.ksshop-share-list[hidden]{display:none !important}

/* Auf der Produktseite sitzt das Menue im Kauf-Formular (dort feuert der Hook),
 * deshalb eine eigene Zeile unter der Kaufzeile. */
.ksshop-share--detail{flex-basis:100%;width:100%;margin:14px 0 0;padding-top:13px;
	border-top:1px solid var(--ks-border,#efeae0)}

/* Nur Symbol, kein Wort (Frank 26.08.2026): rundes Knopfmass statt Pille mit Text. */
.ksshop-share-toggle{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
	width:42px;height:42px;padding:0;
	border:1px solid var(--ks-border,#efeae0);background:var(--ks-surface,#fff);
	color:var(--mp-muted);border-radius:999px;
	transition:background-color .2s ease,border-color .2s ease,color .2s ease}
.ksshop-share-toggle:hover,
.ksshop-share-toggle[aria-expanded="true"]{background:var(--ks-accent,#326569);
	border-color:var(--ks-accent,#326569);color:#fff}
.ksshop-share-toggle:focus-visible{outline:2px solid var(--ks-accent,#326569);outline-offset:2px}
.ksshop-share-toggle svg{width:16px;height:16px;flex:0 0 auto}

.ksshop-share-list{position:absolute;z-index:40;top:calc(100% + 7px);left:0;min-width:232px;
	display:flex;flex-direction:column;padding:7px;border:1px solid var(--ks-border,#efeae0);
	border-radius:12px;background:var(--ks-surface,#fff);
	box-shadow:0 18px 44px -18px rgba(37,61,84,.34)}
/* In der Karte oeffnet die Liste nach links UND nach oben. Nach unten liefe sie
 * bei Karten in der letzten Rasterzeile aus dem Bild (Loesung von der Mediathek
 * uebernommen, dort aus demselben Grund). */
.ksshop-share--card .ksshop-share-list{left:auto;right:0;top:auto;bottom:calc(100% + 7px)}

.ksshop-share-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
	border:0;background:transparent;cursor:pointer;border-radius:8px;padding:10px 12px;
	font:15px var(--mp-sans);color:var(--ks-text,#253d54) !important;text-decoration:none !important;
	transition:background-color .18s ease,color .18s ease}
.ksshop-share-item:hover{background:var(--ks-accent,#326569);color:#fff !important}
.ksshop-share-item:focus-visible{outline:2px solid var(--ks-accent,#326569);outline-offset:-2px}
.ksshop-share-item svg{width:17px;height:17px;flex:0 0 auto;opacity:.9}
.ksshop-share-item.is-done{background:var(--ks-button,#253d54);color:#fff !important}

/* Trennlinie fuer den Fall, dass spaeter ein interner Punkt darueber steht. */
.ksshop-share-sep{height:1px;background:var(--ks-border,#efeae0);margin:5px 8px}

/* Karte: der Knopf sitzt in der Fusszeile neben den Kauf-Knoepfen. */
.ks-marktplatz .ks-mp-card .ksshop-share{align-self:flex-start;margin-top:8px}

/* ---- Mobil-Kanon (Chefkoch-Broadcast 24.08.2026, jetzt in CLAUDE.md) --------
 * Touch-Ziele mindestens 44px, Eingabefelder mindestens 16px. Die 16px sind
 * kein Geschmack, sondern Technik: iOS zoomt beim Fokus in JEDES Feld mit
 * kleinerer Schrift hinein, und der Nutzer sitzt danach in einer verschobenen
 * Seite fest. Gilt fuer alle anfassbaren Elemente von Marktplatz und
 * Produktseite.
 *
 * ⚠️ Die Abfrage ist bewusst DOPPELT (Begruendung von Kurse, ueber die Mediathek
 * weitergereicht): `pointer:coarse` allein verpasst das Tablet mit Maus (das
 * meldet `fine`), `max-width:768px` allein verpasst das Tablet im Querformat
 * (1024px breit, aber mit dem Finger bedient). Der Chefkoch-Broadcast verlangt
 * ausdruecklich „Tablet hoch UND quer", also brauchen wir beide Bedingungen. */
@media (hover:none) and (pointer:coarse), (max-width:768px){
	.ks-marktplatz .ks-tab{min-height:44px;padding-block:12px}
	.ks-marktplatz .ks-btn,
	.ks-marktplatz .ks-btn-sm,
	.ks-marktplatz .ks-mp-tostart,
	.ks-marktplatz .added_to_cart{min-height:44px}
	.ks-marktplatz .ks-mp-view-btn{min-height:44px;min-width:44px}
	.ks-marktplatz .ks-mp-chip{min-height:44px;padding-block:11px}
	.ks-marktplatz .ks-mp-field select{min-height:44px;font-size:16px}
	.ks-marktplatz .ks-mp-search{min-height:44px}
	.ks-marktplatz .ks-mp-search-input{font-size:16px}
	.ksshop-product .ksp-buy .quantity{min-height:44px}
	.ksshop-product .ksp-buy .quantity .qty{font-size:16px}
	.ksshop-product .ksp-buy button[type=submit],
	.ksshop-product .ksp-buy .single_add_to_cart_button,
	.ksshop-product .ksp-btn-gift{min-height:44px}
	.ksshop-share-toggle{width:44px;height:44px}
	.ksshop-share-item{min-height:44px}
}

/* ---- Grid ---- */
/* Auto-Modus (Spalten = 0): feste Kartenbreite, zentriert. */
.ks-marktplatz .ks-mp-grid{display:grid;gap:22px;justify-content:center;
	grid-template-columns:repeat(auto-fill,var(--ksshop-cardw,300px))}
@media(max-width:560px){.ks-marktplatz .ks-mp-grid{grid-template-columns:1fr}}
/* Feste Spaltenanzahl (Spalten ≥ 1): gleichmäßig verteilt. */
.ks-marktplatz .ks-mp-grid.has-cols{justify-content:stretch;
	grid-template-columns:repeat(var(--ksshop-cols,3),minmax(0,1fr))}
@media(max-width:900px){.ks-marktplatz .ks-mp-grid.has-cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.ks-marktplatz .ks-mp-grid.has-cols{grid-template-columns:1fr}}
.ks-marktplatz .ks-mp-empty{text-align:center;color:var(--mp-muted);padding:30px 0}

/* ---- Karte ----
 * ⚠️ KEIN `overflow:hidden` auf der Karte (Frank 26.08.2026, 0.27.1): Das
 * beschnitt das aufgeklappte Teilen-Menue, es endete an der Kartenkante. Die
 * runden Ecken kommen deshalb direkt vom Bild, nicht ueber einen Beschnitt der
 * ganzen Karte. Wer hier wieder `overflow:hidden` setzt, macht das Menue erneut
 * kaputt, und zwar ohne Fehlermeldung. */
.ks-marktplatz .ks-mp-card{background:var(--mp-card);border:1px solid var(--mp-line);
	border-radius:14px;display:flex;flex-direction:column;
	box-shadow:0 1px 2px rgba(37,61,84,.06),0 8px 24px rgba(37,61,84,.07);
	transition:transform .18s ease,box-shadow .18s ease}
/* Bild traegt die oberen Ecken jetzt selbst (1px weniger wegen des Rahmens). */
.ks-marktplatz .ks-mp-card>.ks-mp-thumb{border-radius:13px 13px 0 0}
.ks-marktplatz .ks-mp-grid.is-list .ks-mp-card>.ks-mp-thumb{border-radius:13px 0 0 13px}
@media(max-width:768px){
	.ks-marktplatz .ks-mp-grid.is-list .ks-mp-card>.ks-mp-thumb{border-radius:13px 13px 0 0}
}
/* Karte mit offenem Menue nach vorn holen, damit die Liste ueber der Nachbarkarte liegt. */
.ks-marktplatz .ks-mp-card.is-share-open{position:relative;z-index:30}
/* Karten-Hintergrundfarbe je Typ (Backend-Farbe überschreibt, sonst Standard). */
.ks-marktplatz .ks-mp-card.ks-typ-kurs{background:var(--ksshop-cbg-kurs,var(--mp-card))}
.ks-marktplatz .ks-mp-card.ks-typ-gutschein{background:var(--ksshop-cbg-gutschein,var(--mp-card))}
.ks-marktplatz .ks-mp-card.ks-typ-guthaben{background:var(--ksshop-cbg-guthaben,var(--mp-card))}
.ks-marktplatz .ks-mp-card.ks-typ-termin{background:var(--ksshop-cbg-termin,var(--mp-card))}
.ks-marktplatz .ks-mp-card.ks-typ-empfehlung{background:var(--ksshop-cbg-empfehlung,var(--mp-card))}
.ks-marktplatz .ks-mp-card.ks-typ-kaessle{background:var(--ksshop-cbg-kaessle,var(--mp-card))}
.ks-marktplatz .ks-mp-card:hover{transform:translateY(-3px);
	box-shadow:0 4px 10px rgba(37,61,84,.1),0 18px 40px rgba(37,61,84,.13)}
.ks-marktplatz .ks-mp-card.ks-mp-hidden{display:none}

/* ---- Listenansicht ---- */
.ks-marktplatz .ks-mp-grid.is-list{grid-template-columns:1fr}
.ks-marktplatz .ks-mp-grid.is-list .ks-mp-card{flex-direction:row;align-items:stretch}
.ks-marktplatz .ks-mp-grid.is-list .ks-mp-thumb{width:230px;flex:0 0 230px;aspect-ratio:auto}
.ks-marktplatz .ks-mp-grid.is-list .ks-mp-body{flex:1}
@media(max-width:560px){
	.ks-marktplatz .ks-mp-grid.is-list .ks-mp-card{flex-direction:column}
	.ks-marktplatz .ks-mp-grid.is-list .ks-mp-thumb{width:auto;flex:none;aspect-ratio:4/3}
}

/* Bildbereich: ganzes Produktbild sichtbar (contain), nichts wird beschnitten.
 * Hintergrund = Typ-Farbe (Backend) mit neutralem Fallback – KEIN Verlauf,
 * damit die eingestellte Farbe die ganze Kachel einfärbt. */
.ks-marktplatz .ks-mp-thumb{aspect-ratio:4/3;position:relative;display:flex;
	align-items:flex-end;padding:12px;overflow:hidden;background:var(--ks-section,#f1ede4)}
.ks-marktplatz .ks-mp-thumb img{position:absolute;inset:0;width:100%;height:100%;
	object-fit:contain;padding:16px;z-index:0}
.ks-marktplatz .thumb-kurs{background:var(--ksshop-cbg-kurs,var(--ks-section,#f1ede4))}
.ks-marktplatz .thumb-gutschein{background:var(--ksshop-cbg-gutschein,var(--ks-section,#f1ede4))}
.ks-marktplatz .thumb-empfehlung{background:var(--ksshop-cbg-empfehlung,var(--ks-section,#f1ede4))}
.ks-marktplatz .thumb-guthaben{background:var(--ksshop-cbg-guthaben,var(--ks-section,#f1ede4))}
.ks-marktplatz .thumb-termin{background:var(--ksshop-cbg-termin,var(--ks-section,#f1ede4))}
.ks-marktplatz .thumb-kaessle{background:var(--ksshop-cbg-kaessle,var(--ks-section,#f1ede4))}

.ks-marktplatz .ks-mp-badge{position:relative;z-index:1;font-family:var(--mp-sans);
	text-transform:uppercase;letter-spacing:.1em;font-size:11px;font-family:var(--mp-sans-m);
	padding:5px 10px;border-radius:999px;background:var(--badge-kurs-bg);color:var(--badge-kurs-fg)}
.ks-marktplatz .ks-mp-badge.b-gut{background:var(--badge-gut-bg);color:var(--badge-gut-fg)}
.ks-marktplatz .ks-mp-badge.b-emp{background:var(--badge-emp-bg);color:var(--badge-emp-fg)}
.ks-marktplatz .ks-mp-badge.b-kae{background:var(--badge-kae-bg);color:var(--badge-kae-fg)}
.ks-marktplatz .ks-mp-badge.b-gh{background:var(--badge-gh-bg);color:var(--badge-gh-fg)}
.ks-marktplatz .ks-mp-badge.b-ter{background:var(--badge-ter-bg);color:var(--badge-ter-fg)}

.ks-marktplatz .ks-mp-body{padding:16px 17px 18px;display:flex;flex-direction:column;gap:9px;flex:1}
.ks-marktplatz .ks-mp-cat{font-size:12px;letter-spacing:.04em;color:var(--mp-muted);
	text-transform:uppercase;font-family:var(--mp-sans-m)}
.ks-marktplatz .ks-mp-title{font-family:var(--mp-serif);font-weight:400;font-size:20px;
	margin:0;line-height:1.2;color:var(--ks-heading,#253d54)}
.ks-marktplatz .ks-mp-desc{font-size:14.5px;color:var(--mp-muted);margin:0;flex:1}

.ks-marktplatz .ks-mp-foot{display:flex;align-items:center;justify-content:flex-start;
	gap:10px;margin-top:6px}
/* Gestapelte Aktions-Buttons (analog Kurse-Karten: primär + Ghost, block) */
.ks-marktplatz .ks-mp-actions{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.ks-marktplatz .ks-mp-price{font-family:var(--mp-serif);font-size:20px;color:var(--ks-text,#253d54);
	font-variant-numeric:tabular-nums}
.ks-marktplatz .ks-mp-price small{font-family:var(--mp-sans);font-size:12.5px;color:var(--mp-muted);
	display:block;letter-spacing:.03em}

/* ---- Buttons (KS-Standard) ---- */
/* Rahmenstärke einheitlich 1.5px — auch beim gefüllten Button (transparent),
 * damit gestapelte Primär-/Ghost-Buttons exakt gleich hoch bleiben. */
.ks-marktplatz .ks-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
	font:15px var(--mp-sans-m);border-radius:8px;padding:11px 16px;cursor:pointer;
	border:1.5px solid transparent;text-decoration:none;white-space:nowrap;
	transition:background-color .25s ease,color .2s ease,border-color .2s ease}
.ks-marktplatz .ks-btn-primary{background:var(--ks-button,#253d54);color:#fff}
.ks-marktplatz .ks-btn-primary:hover{background:var(--ks-accent,#326569);color:#fff}
/* Ghost = 1.5px CI-Blau (Freigabe Frank 20.07.2026, analog Produktseite B3).
 * VORHER: border-color #e2dccf — auf dem beigen Seitengrund (#e1ddd4) praktisch
 * unsichtbar, die Buttons sahen aus wie Fließtext. Betrifft „Details ansehen"
 * auf den Karten, „← Zum Marktplatz" und die Buttons im Mitglieder-Bereich. */
.ks-marktplatz .ks-btn-ghost{background:transparent;color:var(--ks-button,#253d54);
	border-color:var(--ks-button,#253d54)}
.ks-marktplatz .ks-btn-ghost:hover{background:var(--ks-button,#253d54);color:#fff}
.ks-marktplatz .ks-btn-block{width:100%}
/* WooCommerce „Warenkorb anzeigen" (nach AJAX-Hinzufügen) als grüner Button. */
.ks-marktplatz .added_to_cart,
.ks-marktplatz .added_to_cart.wc-forward{display:flex;align-items:center;justify-content:center;
	width:100%;background:var(--ks-accent,#326569);color:#fff;border-radius:8px;padding:11px 16px;
	font:15px var(--mp-sans-m);text-decoration:none;border:1.5px solid transparent;
	transition:background-color .25s ease}
.ks-marktplatz .added_to_cart:hover{background:var(--ks-button,#253d54);color:#fff}

/* ---- Schriftfarbe auf Buttons hart festnageln (Frank, 18.08.2026) ---------
 * Problem am Live-System: Unsere Buttons sind <a>-Elemente, und zwei fremde
 * Regeln fassen jeden Link im Seiteninhalt an:
 *   1) BuddyBoss-Theme `theme.css`: a{color:var(--bb-primary-color)}
 *      Live steht dort CI-Gruen #326569.
 *   2) Divi-Builder: `.et-db #et-boc .et-l .et_pb_module a{color:#2ea3f2}`
 *      ID-Selektor, schlaegt jede Klassenregel von uns.
 * Folge: gruene Schrift auf blauem Button, beim Hover gruen auf gruen und damit
 * voellig unlesbar. Die Farbe wird deshalb hier fuer alle Link-Zustaende
 * erzwungen. Bitte NICHT "aufraeumen": ohne !important gewinnt der ID-Selektor.
 * Reihenfolge beachten: erst die Outline-Buttons (Text = CI-Blau bzw. CI-Gruen
 * auf transparentem Grund), danach der Weiss-Block fuer alle gefuellten
 * Zustaende inklusive Outline-Hover. */
.ks-marktplatz .ks-btn-ghost,
.ks-marktplatz .ks-btn-ghost:link,
.ks-marktplatz .ks-btn-ghost:visited{color:var(--ks-button,#253d54) !important}
.ksshop-product .ksp-btn-gift,
.ksshop-product .ksp-btn-gift:link,
.ksshop-product .ksp-btn-gift:visited{color:var(--ks-accent,#326569) !important}

.ks-marktplatz .ks-btn-primary,
.ks-marktplatz .ks-btn-primary:link,
.ks-marktplatz .ks-btn-primary:visited,
.ks-marktplatz .ks-btn-primary:hover,
.ks-marktplatz .ks-btn-primary:focus,
.ks-marktplatz .ks-btn-primary:active,
.ks-marktplatz .ks-btn-green,
.ks-marktplatz .ks-btn-green:link,
.ks-marktplatz .ks-btn-green:visited,
.ks-marktplatz .ks-btn-green:hover,
.ks-marktplatz .ks-btn-green:focus,
.ks-marktplatz .ks-btn-green:active,
.ks-marktplatz .ks-btn-ghost:hover,
.ks-marktplatz .ks-btn-ghost:active,
.ks-marktplatz .ks-btn.is-disabled,
.ks-marktplatz .added_to_cart,
.ks-marktplatz .added_to_cart:link,
.ks-marktplatz .added_to_cart:visited,
.ks-marktplatz .added_to_cart:hover,
.ks-marktplatz .added_to_cart:focus,
.ks-marktplatz .added_to_cart:active,
.ksshop-product .ksp-btn-gift:hover,
.ksshop-product .ksp-btn-gift:active{color:#fff !important}

/* Gleiche Falle bei den Bereichs-Kacheln der Startansicht: Sie sind Links,
 * damit sie ohne JavaScript funktionieren, und wuerden sonst komplett in der
 * Theme-Linkfarbe erscheinen. Die Beschriftung im gefuellten Knopf bleibt weiss,
 * dort greift keine Fremdregel (es ist ein <span>, kein <a>). */
.ks-marktplatz a.ks-mp-tile,
.ks-marktplatz a.ks-mp-tile:link,
.ks-marktplatz a.ks-mp-tile:visited,
.ks-marktplatz a.ks-mp-tile:hover,
.ks-marktplatz a.ks-mp-tile:focus,
.ks-marktplatz a.ks-mp-tile:active{color:var(--ks-text,#253d54) !important;text-decoration:none !important}
/* ---- Lade- und Erfolgs-Anzeige, einheitlich ------------------------------
 * WooCommerce setzt bei `.loading` und `.added` ein ::after-Zeichen aus seiner
 * eigenen Icon-Schrift. Die wird auf den übernommenen Seiten NICHT geladen —
 * dadurch erschien ein leeres Kästchen statt eines Spinners (dasselbe Problem
 * wie beim Icon der Warenkorb-Meldung, siehe .ksp-notices).
 * Ersetzt durch einen reinen CSS-Ring in `currentColor`: funktioniert auf
 * gefüllten wie auf Outline-Buttons und braucht keine Schrift und kein Bild. */
@keyframes ksshop-spin{to{transform:rotate(360deg)}}

.ks-marktplatz .add_to_cart_button.loading{opacity:.75;pointer-events:none}
.ks-marktplatz a.add_to_cart_button.loading::after,
.ksshop-product .ksp-buy button[type=submit].loading::after,
.ksshop-product .ksp-buy .single_add_to_cart_button.loading::after{
	content:"";display:inline-block;width:15px;height:15px;margin-left:9px;
	border:2px solid currentColor;border-right-color:transparent;border-radius:50%;
	background:none;font-family:inherit;opacity:.85;vertical-align:middle;
	animation:ksshop-spin .7s linear infinite}

/* Erfolgszustand: echtes Häkchen statt des fehlenden Icon-Glyphs. */
.ks-marktplatz .add_to_cart_button.added{position:relative}
.ks-marktplatz a.add_to_cart_button.added::after{
	content:"\2713";font-family:inherit;border:0;background:none;width:auto;height:auto;
	margin-left:7px;animation:none;vertical-align:baseline}
/* Ausverkauft: deaktivierter Primär-Button */
.ks-marktplatz .ks-btn.is-disabled{background:var(--mp-muted);color:#fff;cursor:default;
	pointer-events:none;opacity:.75}

.ks-marktplatz .ks-mp-aff{display:flex;align-items:center;gap:6px;font-size:11.5px;
	color:var(--mp-muted);letter-spacing:.02em;margin-top:2px}

/* ---- s´Kässle ---- */
.ks-marktplatz .ks-mp-kaessle{border-color:var(--badge-kae-fg)}
.ks-marktplatz .ks-mp-chips{display:flex;flex-wrap:wrap;gap:7px;margin:2px 0 6px}
.ks-marktplatz .ks-mp-chip{border:1px solid var(--mp-line);background:transparent;border-radius:999px;
	padding:7px 13px;font:14px var(--mp-sans-m);color:var(--ks-text,#253d54);cursor:pointer;
	font-variant-numeric:tabular-nums;transition:.18s}
.ks-marktplatz .ks-mp-chip.on,.ks-marktplatz .ks-mp-chip:hover{background:var(--badge-kae-bg);
	border-color:var(--badge-kae-fg);color:var(--badge-kae-fg)}

/* ==================================================================== */
/*  Produktseite (Phase 3, .ksshop-product)                             */
/* ==================================================================== */
.ksshop-product .ks-mp-container{padding-top:40px}
.ksshop-product .ksp-crumbs{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
	color:var(--mp-muted);margin:0 0 20px}
.ksshop-product .ksp-crumbs a{color:var(--mp-muted);text-decoration:none}
.ksshop-product .ksp-crumbs a:hover{color:var(--ks-text,#253d54)}
.ksshop-product .ksp-crumbs b{color:var(--ks-text,#253d54);font-family:var(--mp-sans-m)}

/* Spaltenaufteilung Bild : Text — EINE Variable für beide Raster (oben und
 * Beschreibung darunter). Dadurch sind die Kästen garantiert gleich breit und
 * können nicht auseinanderlaufen. 4:7 seit 0.14.4 (vorher 5:6 → Bild zu breit). */
.ksshop-product{--ksp-cols:minmax(0,4fr) minmax(0,7fr); --ksp-gap:34px;
	--ksp-btnw:400px; --ksp-qtyw:96px; --ksp-ctrlh:46px}
.ksshop-product .ksp-grid,
.ksshop-product .ksp-lower{display:grid;grid-template-columns:var(--ksp-cols);
	gap:var(--ksp-gap);align-items:start}
.ksshop-product .ksp-grid{margin:0 0 26px}
@media(max-width:820px){
	.ksshop-product .ksp-grid,
	.ksshop-product .ksp-lower{grid-template-columns:1fr}
	/* Leere Platzhalterzelle darf mobil keine Lücke erzeugen. */
	.ksshop-product .ksp-lower-empty{display:none}
}

.ksshop-product .ksp-media{background:var(--mp-card);border:1px solid var(--mp-line);
	border-radius:14px;box-shadow:0 1px 2px rgba(37,61,84,.06),0 8px 24px rgba(37,61,84,.07);
	padding:26px;position:sticky;top:90px}
.ksshop-product .ksp-media img{width:100%;height:auto;border-radius:10px;display:block}

.ksshop-product .ksp-info{display:flex;flex-direction:column;gap:14px}
.ksshop-product .ksp-title{font-family:var(--mp-serif);font-weight:400;
	font-size:clamp(26px,3.4vw,38px);line-height:1.14;margin:0;letter-spacing:.01em;color:var(--ks-heading,#253d54)}
.ksshop-product .ksp-price{font-family:var(--mp-serif);font-size:30px;color:var(--ks-text,#253d54);
	font-variant-numeric:tabular-nums}
.ksshop-product .ksp-price del{opacity:.55;font-size:.7em;margin-right:8px}
.ksshop-product .ksp-lede{font-size:16.5px;color:var(--mp-muted);max-width:58ch}
.ksshop-product .ksp-lede p{margin:0 0 .6em}

/* (Die frühere „Enthält"-Box `.ksp-features` wurde in 0.13.0 durch die
 *  Produkt-Kurzbeschreibung `.ksp-summary` ersetzt; ihr CSS ist in 0.14.0
 *  entfernt worden — es erzeugte kein Markup mehr.) */

/* WooCommerce-Kauf-Formular im KS-Stil (Menge + Button, inkl. Fremd-Formularfelder)
 *
 * ⚠️ `background`/`border` hier ausdruecklich zuruecksetzen (Frank 19.08.2026):
 * Das Darkmode-Plugin faerbt mit `body.ksdm-active :where(.woocommerce form, …)`
 * JEDES WooCommerce-Formular flaechig ein. Auf der Produktseite traf das auch
 * `form.cart` und legte einen weissen, eckigen Kasten hinter Mengenwahl und
 * Kauf-Button. Weil die Regel in `:where()` steht, hat sie Spezifitaet 0 und
 * wird hier schon durch die einfache Deklaration geschlagen, ohne !important.
 * Gilt fuer Light und Dark gleichermassen: der Kaufblock steht direkt auf dem
 * Seitenhintergrund, nicht auf einer eigenen Flaeche. */
.ksshop-product .ksp-buy form.cart{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch;margin:0;
	background:transparent;border:0;padding:0;box-shadow:none}
.ksshop-product .ksp-buy .quantity{display:inline-flex;border:1px solid var(--mp-line);
	border-radius:8px;overflow:hidden;background:var(--mp-card)}
.ksshop-product .ksp-buy .quantity .qty{border:0;width:64px;text-align:center;
	font:16px var(--mp-sans-m);color:var(--ks-text,#253d54);background:transparent;-moz-appearance:textfield}
.ksshop-product .ksp-buy button[type=submit],
.ksshop-product .ksp-buy .single_add_to_cart_button{flex:1;min-width:200px;border:0;cursor:pointer;
	background:var(--ks-button,#253d54);color:#fff;border-radius:8px;padding:12px 18px;
	font:16px var(--mp-sans-m);transition:background-color .25s ease}
.ksshop-product .ksp-buy button[type=submit]:hover{background:var(--ks-accent,#326569)}
/* Fremd-Felder (z. B. Gutschein-Formular) vollbreit über den Buttons */
.ksshop-product .ksp-buy form.cart>*:not(.quantity):not(button){flex-basis:100%}

/* ---- Kaufblock: rechtsbündig, gestapelt, identische Breite ----------------
 * Freigabe Frank 20.07.2026. Warenkorb-Zeile (Menge + Button) und
 * Geschenk-Button sind exakt gleich breit (--ksp-btnw), weil beide Kinder
 * dieselbe max-width bekommen. Der Kauf-Button füllt mit flex:1 den Rest der
 * Zeile — dadurch stimmt die Gesamtbreite unabhängig davon, wie breit
 * WooCommerce den Mengen-Wähler rendert. */
/* Der Block selbst bekommt die Zielbreite — dadurch ist `100%` bei den Kindern
 * genau diese Breite und lässt sich verrechnen. (Vorher trugen die Kinder die
 * max-width, `100%` meinte die volle Spalte → jede calc() wäre falsch gewesen.) */
.ksshop-product .ksp-actions{display:flex;flex-direction:column;align-items:flex-end;
	gap:9px;margin-top:2px;width:100%;max-width:var(--ksp-btnw,400px);margin-left:auto}
.ksshop-product .ksp-actions>*{width:100%}
.ksshop-product .ksp-actions .ksp-trust{justify-content:flex-end}
/* min-width des Kauf-Buttons zurücknehmen — sonst sprengt er die Zielbreite. */
.ksshop-product .ksp-actions .ksp-buy button[type=submit],
.ksshop-product .ksp-actions .ksp-buy .single_add_to_cart_button{min-width:0}

/* Kauf-Button und Geschenk-Button EXAKT gleich breit (Frank 20.07.2026).
 * Dafür braucht die Mengenauswahl eine feste Spaltenbreite: Wie breit sie
 * tatsächlich rendert, bestimmt sonst das Theme (BuddyBoss ergänzt −/+-Tasten),
 * und die Restbreite wäre nicht berechenbar. Beide Buttons stehen dadurch
 * links wie rechts auf derselben Kante. */
/* KEIN Grid! Das Kauf-Formular enthält Fremd-Elemente: Das Gutschein-Plugin
 * (WooCommerce PDF Vouchers) hängt als ERSTES Kind einen
 * `.woo-vou-fields-main-wrapper` ein — auf Nicht-Gutschein-Produkten ohne
 * jedes Eingabefeld, nur mit einem versteckten Lade-Spinner. In einem
 * 2-Spalten-Raster belegte der Spalte 1, die Menge rutschte in Spalte 2 und
 * der Kauf-Button in die nächste Zeile (0.14.5).
 * Deshalb Flexbox + `order`: Menge und Button werden explizit positioniert,
 * beliebige Fremd-Container gehen als eigene Zeile darüber. */
.ksshop-product .ksp-actions:not(.has-extra) .ksp-buy form.cart{
	display:flex;flex-wrap:wrap;gap:10px;align-items:stretch}
.ksshop-product .ksp-actions:not(.has-extra) .ksp-buy form.cart>*:not(.quantity):not(button){
	flex-basis:100%;order:0}
.ksshop-product .ksp-actions:not(.has-extra) .ksp-buy .quantity{
	flex:0 0 var(--ksp-qtyw,96px);width:var(--ksp-qtyw,96px);order:1}
.ksshop-product .ksp-actions:not(.has-extra) .ksp-buy button[type=submit],
.ksshop-product .ksp-actions:not(.has-extra) .ksp-buy .single_add_to_cart_button{
	flex:1 1 auto;order:2}

/* Einheitliche Höhe für Mengenauswahl, Kauf- und Geschenk-Button.
 * Live gemessen (20.07.2026): 44 / 40 / 45 px — drei Elemente, drei Höhen.
 * `align-items:stretch` allein reicht nicht: Das Theme gibt dem Kauf-Button
 * eine feste Höhe, die eine Dehnung verhindert. Deshalb eine gemeinsame
 * min-height plus `height:auto`, das die Theme-Vorgabe aufhebt. */
.ksshop-product .ksp-actions .ksp-buy .quantity{min-height:var(--ksp-ctrlh,46px);
	align-items:stretch}
.ksshop-product .ksp-actions .ksp-buy .quantity>div{display:flex;align-items:center;flex:1}
.ksshop-product .ksp-actions .ksp-buy button[type=submit],
.ksshop-product .ksp-actions .ksp-buy .single_add_to_cart_button{
	min-height:var(--ksp-ctrlh,46px);height:auto;padding:0 18px;
	display:inline-flex;align-items:center;justify-content:center}
.ksshop-product .ksp-actions .ksp-btn-gift,
.ksshop-product .ksp-actions .added_to_cart{min-height:var(--ksp-ctrlh,46px)}
.ksshop-product .ksp-actions:not(.has-extra) .ksp-btn-gift,
.ksshop-product .ksp-actions:not(.has-extra) .added_to_cart{
	width:calc(100% - var(--ksp-qtyw,96px) - 10px);margin-left:auto}

/* Formulare MIT Fremdfeldern (Gutschein-Beschenkten-Formular, Varianten)
 * behalten die volle Breite — sonst würden Eingabefelder in 400px gequetscht.
 * Nur Geschenk-Button und Vertrauenszeile bleiben rechtsbündig. */
.ksshop-product .ksp-actions.has-extra{max-width:none;align-items:stretch}
.ksshop-product .ksp-actions.has-extra .ksp-btn-gift,
.ksshop-product .ksp-actions.has-extra .ksp-trust{align-self:flex-end;
	max-width:var(--ksp-btnw,400px)}

/* ==================================================================== */
/*  Gutschein-Formular (WooCommerce PDF Vouchers) — nur bei .ksp-voucher */
/*  Markup am Live-DOM abgelesen (20.07.2026), NICHT geraten:            */
/*    table.woo-vou-recipient-fields                                     */
/*      tr > td.label  > label + span.woo-vou-gift-field-required        */
/*      tr > td.value  > div.woo-vou-preview-template-img-wrap           */
/*                         > div.woo-vou-image-wrap (×15)               */
/*                             > img.woo-vou-preview-template-img       */
/*                             > span.woo-vou-view-preview-template-img */
/*      tr > td.label + td.value > input/textarea.woo-vou-recipient-details */
/*    div.woo-vou-preview-pdf-wrap > a.woo_vou_preview_pdf              */
/*  Ausgewählte Vorlage = Klasse `woo-vou-preview-template-img-border`   */
/*  am <img> (vom Plugin gesetzt).                                       */
/*  Es wird ausschließlich umgestylt — keine Änderung an der Mechanik.   */
/* ==================================================================== */
/* Einleitung: eine schlanke Zeile in Fließtext-Optik (Variante B). */
.ksshop-product .ksp-voucher .ksp-vou-intro{font-family:var(--mp-sans-m);font-size:16px;
	color:var(--ks-text,#253d54);margin:0 0 16px}

/* Lagerzeile ausblenden — „10000 vorrätig" ist auf einer Verkaufsseite Lärm.
 * Kommt von WooCommerce (`wc_get_stock_html`), NICHT vom Gutschein-Plugin;
 * global abschaltbar unter WooCommerce → Einstellungen → Produkte → Lagerbestand.
 * Hier nur fürs Marktplatz-Layout. WICHTIG: nur `in-stock` — „nicht vorrätig"
 * und Lieferrückstand bleiben sichtbar, das ist Kaufinformation. */
.ksshop-product .stock.in-stock{display:none}

/* Plugin-Tabelle auflösen: Label über dem Feld statt daneben.
 * Als Tabelle wäre die Beschriftungsspalte auf dem Handy unbrauchbar schmal. */
.ksshop-product .ksp-voucher .woo-vou-recipient-fields,
.ksshop-product .ksp-voucher .woo-vou-recipient-fields tbody,
.ksshop-product .ksp-voucher .woo-vou-recipient-fields tr,
.ksshop-product .ksp-voucher .woo-vou-recipient-fields td{display:block;width:auto;
	border:0;padding:0;margin:0}
.ksshop-product .ksp-voucher .woo-vou-recipient-fields td.label{margin:0 0 9px}
.ksshop-product .ksp-voucher .woo-vou-recipient-fields td.value{margin:0 0 20px}
.ksshop-product .ksp-voucher .woo-vou-recipient-fields label{font-family:var(--mp-sans-m);
	font-size:15px;color:var(--ks-text,#253d54);display:inline-flex;align-items:center}
.ksshop-product .ksp-voucher .woo-vou-gift-field-required{color:var(--ks-danger,#931204);margin-left:2px}

/* Schritt-Nummern über CSS-Zähler: gezählt werden nur Zeilen MIT Beschriftung
 * (die Vorlagen-Auswahl steht in einer eigenen wertlosen Zeile darunter).
 * Fehlt :has() im Browser, entfallen einfach die Nummern. */
.ksshop-product .ksp-voucher .woo-vou-recipient-fields tbody{counter-reset:ksvou}
.ksshop-product .ksp-voucher .woo-vou-recipient-fields tr:has(> td.label){counter-increment:ksvou}
.ksshop-product .ksp-voucher .woo-vou-recipient-fields tr:has(> td.label) label::before{
	content:counter(ksvou);display:inline-flex;align-items:center;justify-content:center;
	width:22px;height:22px;border-radius:999px;background:var(--ks-button,#253d54);color:#fff;
	font-size:12px;font-family:var(--mp-sans-m);margin-right:9px;flex:0 0 auto}

/* Vorlagen als Raster — ALLE gleichzeitig sichtbar (Wunsch Frank).
 * Die Thumbnails sind 181×60 (Querformat), daher breite Kacheln. */
/* Das Plugin steckt das Raster in ein Rollfenster: live gemessen
 * `max-height:140px; height:140px; overflow-y:auto` bei 1050px Inhalt —
 * von 15 Vorlagen waren zwei Reihen sichtbar. Frank will alle zur Auswahl,
 * also Rollfenster auflösen. */
.ksshop-product .ksp-voucher .woo-vou-preview-template-img-wrap{display:grid;
	grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;
	max-height:none;height:auto;overflow:visible}
.ksshop-product .ksp-voucher .woo-vou-image-wrap{position:relative;margin:0;padding:0;
	float:none;width:auto}
.ksshop-product .ksp-voucher .woo-vou-image-wrap img.woo-vou-preview-template-img{
	width:100%;height:auto;display:block;border-radius:8px;cursor:pointer;
	border:2px solid var(--mp-line);transition:border-color .18s ease,box-shadow .18s ease}
.ksshop-product .ksp-voucher .woo-vou-image-wrap img.woo-vou-preview-template-img:hover{
	border-color:var(--ks-accent,#326569)}
/* Ausgewählte Vorlage (Klasse kommt vom Plugin). */
.ksshop-product .ksp-voucher .woo-vou-image-wrap img.woo-vou-preview-template-img-border{
	border-color:var(--ks-button,#253d54);box-shadow:0 0 0 3px rgba(37,61,84,.12)}
/* Lupe des Plugins als kleines Overlay statt danebenliegend. */
.ksshop-product .ksp-voucher .woo-vou-view-preview-template-img{position:absolute;
	top:6px;left:6px;width:22px;height:22px;border-radius:6px;background:rgba(255,255,255,.92);
	display:flex;align-items:center;justify-content:center;cursor:pointer;
	box-shadow:0 1px 2px rgba(37,61,84,.18)}
.ksshop-product .ksp-voucher .woo-vou-view-preview-template-img img{width:13px;height:auto;display:block}

/* Eingabefelder im KS-Stil */
.ksshop-product .ksp-voucher .woo-vou-recipient-details{width:100%;
	border:1.5px solid var(--mp-line);border-radius:8px;padding:11px 13px;
	font:15px var(--mp-sans);color:var(--ks-text,#253d54);background:var(--mp-card)}
.ksshop-product .ksp-voucher textarea.woo-vou-recipient-details{min-height:86px;resize:vertical}
.ksshop-product .ksp-voucher .woo-vou-recipient-details:focus{outline:0;
	border-color:var(--ks-accent,#326569);box-shadow:0 0 0 3px rgba(50,101,105,.12)}

/* PDF-Vorschau: das Plugin liefert bereits `a.woo_vou_preview_pdf` —
 * hier nur als CI-Button gestaltet (Grün-Outline, damit der Kauf-Button
 * das einzige gefüllte Element der Seite bleibt). */
.ksshop-product .ksp-voucher .woo-vou-preview-pdf-wrap{margin:4px 0 18px}
.ksshop-product .ksp-voucher a.woo_vou_preview_pdf{display:inline-flex;
	align-items:center;justify-content:center;gap:9px;width:100%;
	min-height:var(--ksp-ctrlh,46px);
	font:15px var(--mp-sans-m);border-radius:8px;padding:0 18px;text-decoration:none;
	background:transparent;color:var(--ks-accent,#326569);border:1.5px solid var(--ks-accent,#326569);
	transition:background-color .25s ease,color .2s ease}
.ksshop-product .ksp-voucher a.woo_vou_preview_pdf:hover{background:var(--ks-accent,#326569);color:#fff}
/* Dokument-Symbol als CSS-Maske: eingebettete SVG-Zeichnung, kein Bild und
 * keine Icon-Schrift (DSGVO: kein externer Abruf). `currentColor` sorgt dafür,
 * dass es beim Hover automatisch mit auf Weiß wechselt. */
.ksshop-product .ksp-voucher a.woo_vou_preview_pdf::before{content:"";width:18px;height:18px;
	flex:0 0 auto;background-color:currentColor;
	-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
	-webkit-mask-position:center;mask-position:center;
	-webkit-mask-size:contain;mask-size:contain;
	-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6zm0 2.5L17.5 8H14V4.5zM8 13h8v1.5H8V13zm0 3.5h8V18H8v-1.5zM8 9.5h4V11H8V9.5z'/%3E%3C/svg%3E");
	mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6zm0 2.5L17.5 8H14V4.5zM8 13h8v1.5H8V13zm0 3.5h8V18H8v-1.5zM8 9.5h4V11H8V9.5z'/%3E%3C/svg%3E")}

/* s´Kässle-Chips im Kauf-Formular der Produktseite (seit 0.16.4).
 * Sie sitzen als eigene Zeile über Menge + Kauf-Button. */
.ksshop-product .ksp-buy .ksp-chips{margin:0 0 4px}

/* Kategorie-Zeile UNTER dem Titel (E2) – etwas Luft nach oben, damit sie sich
 * vom Titel löst und nicht wie eine zweite Überschriftenzeile wirkt. */
.ksshop-product .ksp-cat{margin-top:2px}

/* Geschenk-Button als Outline in CI-Grün (Variante B3).
 * Der frühere `.ks-btn-ghost`-Rahmen (#e2dccf) hatte auf dem beigen
 * Seitengrund (#e1ddd4) praktisch keinen Kontrast — der Button sah aus
 * wie Fließtext.
 * (`.ksp-btn-desc` ist in 0.14.4 entfallen: „Zur Kurs-Beschreibung" steht
 *  jetzt in der Beschreibungs-Box und nutzt dort `.ks-btn-primary`.) */
.ksshop-product .ksp-btn-gift{background:transparent;color:var(--ks-accent,#326569);
	border:1.5px solid var(--ks-accent,#326569)}
.ksshop-product .ksp-btn-gift:hover{background:var(--ks-accent,#326569);color:#fff}
.ksshop-product .ksp-trust{display:flex;gap:18px;flex-wrap:wrap;font-size:12.5px;
	color:var(--mp-muted);letter-spacing:.03em}

/* Beschreibungs-Block (seit 0.14.4 im GLEICHEN Raster wie der obere Bereich,
 * siehe `.ksp-lower`). Dadurch exakt so breit wie die Info-Box darüber — die
 * frühere eigene Lesebreite (76ch) entfällt, sonst sprangen die Kanten.
 * Der Reiter sitzt links über der Box, wie ein Karteireiter. */
.ksshop-product .ksp-tabs{margin:0 0 10px}
/* Reiterleiste OHNE beigen Sammel-Container (Frank 20.07.2026): Der
 * `background:var(--beige)` + 5px Padding erzeugte auf dem beigen Seitengrund
 * einen hellen Rahmen um die blaue Lasche. Jetzt sitzt der Reiter direkt auf
 * der Box — nur blau, kein Rand. */
.ksshop-product .ksp-tabbar{display:flex;gap:4px;background:transparent;padding:0}
.ksshop-product .ksp-tabbar .ks-tab{border-radius:8px 8px 0 0;cursor:default;
	background:var(--ks-button,#253d54);color:#fff}
/* Hover CI-Grün wie das kanonische .ks-tab-Referenz-CSS (CLAUDE.md
 * „Filter-/Tab-Optik") — stand hier fälschlich auf CI-Blau. */
.ksshop-product .ksp-tabbar .ks-tab:hover{background:var(--ks-accent,#326569);color:#fff}
.ksshop-product .ksp-tabbar .ks-tab.is-active:hover{background:var(--ks-button,#253d54);color:#fff}
.ksshop-product .ksp-body{background:var(--mp-card);border:1px solid var(--mp-line);
	border-radius:0 14px 14px 14px;box-shadow:0 1px 2px rgba(37,61,84,.06);
	padding:28px 30px;font-size:16px;color:var(--ks-text,#253d54)}
/* Ohne Beschreibungstext (nur der Kurs-Button) alle Ecken rund. */
.ksshop-product .ksp-body.is-bare{border-radius:14px;padding:22px 30px}

/* „Zur ausführlichen Kurs-Beschreibung" am Ende der Box, abgesetzt. */
.ksshop-product .ksp-descfoot{margin-top:20px;padding-top:18px;
	border-top:1px solid var(--ks-border,#efeae0)}
.ksshop-product .ksp-body.is-bare .ksp-descfoot{margin-top:0;padding-top:0;border-top:0}
.ksshop-product .ksp-body p{margin:0 0 1em}
.ksshop-product .ksp-body p:last-child{margin-bottom:0}

.ksshop-product .ksp-related{padding:40px 0 20px}
.ksshop-product .ksp-related h2{font-family:var(--mp-serif);font-weight:400;font-size:26px;
	text-align:center;margin:0 0 22px;color:var(--ks-heading,#253d54)}

/* Kurzbeschreibung als Info-Box (ersetzt die frühere „Enthält"-Box).
 * Listenpunkte bekommen automatisch Häkchen. */
.ksshop-product .ksp-summary{background:var(--mp-card);border:1px solid var(--mp-line);
	border-radius:14px;padding:20px 22px;box-shadow:0 1px 2px rgba(37,61,84,.06);
	font-size:15.5px;color:var(--ks-text,#253d54)}
.ksshop-product .ksp-summary p{margin:0 0 .8em}
.ksshop-product .ksp-summary p:last-child{margin-bottom:0}
.ksshop-product .ksp-summary ul{margin:0 0 .8em;padding:0;list-style:none;display:grid;gap:8px}
.ksshop-product .ksp-summary ul:last-child{margin-bottom:0}
.ksshop-product .ksp-summary li{display:flex;gap:10px;align-items:baseline}
.ksshop-product .ksp-summary li::before{content:"\2713";color:var(--ks-accent,#326569);font-family:var(--mp-sans-m);flex:0 0 auto}
.ksshop-product .ksp-summary a{color:var(--ks-link,#326569)}

/* „Zum Marktplatz"-Button in der Toolbar (Kategorie-Seite) */
.ks-marktplatz .ks-mp-back{width:auto;align-self:center;white-space:nowrap}

/* Grüner Button (u. a. [ks_kaufen style="gruen"]) */
.ks-marktplatz .ks-btn-green{background:var(--ks-accent,#326569);color:#fff}
.ks-marktplatz .ks-btn-green:hover{background:var(--ks-button,#253d54);color:#fff}

/* Inline-Wrapper für [ks_kaufen] (Shortcode außerhalb des Marktplatzes) */
.ks-marktplatz.ks-mp-inline{display:inline-block}
.ks-marktplatz.ks-mp-inline .ks-btn{width:auto}
.ks-marktplatz.ks-mp-inline .added_to_cart{display:inline-flex;width:auto;margin-left:8px}

/* WooCommerce-Meldungen auf der Produktseite (Bestätigung/Fehler) */
.ksshop-product .ksp-notices .woocommerce-message,
.ksshop-product .ksp-notices .woocommerce-error,
.ksshop-product .ksp-notices .woocommerce-info{margin:0 0 12px;padding:12px 16px;
	border-radius:8px;font-size:14.5px;list-style:none;border:1px solid var(--mp-line);
	background:var(--mp-card);color:var(--ks-text,#253d54)}
.ksshop-product .ksp-notices .woocommerce-message{border-color:var(--ks-accent,#326569)}
.ksshop-product .ksp-notices .woocommerce-error{border-color:var(--ks-danger,#931204);color:var(--ks-danger,#931204)}
.ksshop-product .ksp-notices .button{display:none} /* WC-„Warenkorb anzeigen" doppelt */
/* WooCommerce setzt auf diese Meldungen ein ::before-Icon aus seiner eigenen
 * Icon-Schrift und hält dafür mit `padding-left:3.5em` Platz frei. Unser
 * schlankeres Padding (16px) nimmt diesen Platz weg — das absolut positionierte
 * Icon landete dadurch AUF dem Text (sichtbar als kleines Kästchen, weil die
 * WooCommerce-Icon-Schrift auf dieser Seite nicht geladen wird). Icon aus. */
.ksshop-product .ksp-notices .woocommerce-message::before,
.ksshop-product .ksp-notices .woocommerce-error::before,
.ksshop-product .ksp-notices .woocommerce-info::before{display:none;content:none}

/* Kurz-Feedback nach AJAX-Kauf */
.ksshop-product .ksp-buy .single_add_to_cart_button.is-added{background:var(--ks-accent,#326569)}

/* ==================================================================== */
/*  Mitglieder-Bereich (0.14.0)                                         */
/*  Eingeloggt: Guthaben + Bestellungen · Gast: Einladung               */
/* ==================================================================== */
.ks-marktplatz .ks-mp-member{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
	gap:20px;margin:0 0 26px}
.ks-marktplatz .ks-mp-member.is-single{grid-template-columns:minmax(0,1fr)}
.ks-marktplatz .ks-mp-member.is-slim{display:block}
@media(max-width:880px){.ks-marktplatz .ks-mp-member{grid-template-columns:1fr}}
/* Der Bereich rückt unter den Hero und übernimmt dessen Überlappung
 * (analog `.ks-mp-overlap` bei der Toolbar: Container-Padding raus, dann
 * negativer Rand — sonst bliebe der Topgap zusätzlich stehen). */
.ks-marktplatz.has-hero.has-member .ks-mp-container{padding-top:0}
.ks-marktplatz.has-hero.has-member .ks-mp-member{
	margin-top:calc(var(--ksshop-overlap,48px) * -1);position:relative;z-index:11}

.ks-marktplatz .ks-mp-box{background:var(--mp-card);border:1px solid var(--mp-line);
	border-radius:14px;padding:22px 24px;
	box-shadow:0 1px 2px rgba(37,61,84,.06),0 10px 30px rgba(37,61,84,.10)}
.ks-marktplatz .ks-mp-box h3{font-family:var(--mp-serif);font-weight:400;font-size:14px;
	letter-spacing:.12em;text-transform:uppercase;color:var(--mp-muted);margin:0 0 16px}
.ks-marktplatz .ks-mp-mempty{font-size:15px;color:var(--mp-muted);margin:0 0 16px;line-height:1.55}
.ks-marktplatz .ks-mp-mfoot{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--ks-border,#efeae0);
	display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.ks-marktplatz .ks-mp-more{color:var(--ks-link,#326569);text-decoration:none;font-size:14.5px}
.ks-marktplatz .ks-mp-more:hover{text-decoration:underline}
.ks-marktplatz .ks-btn-sm{padding:9px 14px;font-size:14px}

/* Guthabenkonten (ein Eintrag je Karte) */
.ks-marktplatz .ks-mp-accts{list-style:none;margin:0;padding:0}
.ks-marktplatz .ks-mp-accts li{border-top:1px solid var(--ks-border,#efeae0)}
.ks-marktplatz .ks-mp-accts li:first-child{border-top:0}
.ks-marktplatz .ks-mp-acct-link,
.ks-marktplatz .ks-mp-accts li>.ks-mp-acct-num{text-decoration:none;color:inherit}
.ks-marktplatz .ks-mp-acct-link{display:flex;align-items:center;gap:13px;padding:12px 0;
	border-radius:8px;transition:background-color .18s ease}
.ks-marktplatz .ks-mp-acct-link:hover{background:var(--ks-surface-raised,#f7f4ee)}
.ks-marktplatz .ks-mp-accts li:first-child .ks-mp-acct-link{padding-top:0}
.ks-marktplatz .ks-mp-acct-num{font-family:var(--mp-serif);font-size:30px;line-height:1;
	min-width:42px;text-align:center;font-variant-numeric:tabular-nums;color:var(--ks-text,#253d54)}
.ks-marktplatz .ks-mp-acct.is-expiring .ks-mp-acct-num,
.ks-marktplatz .ks-mp-acct.is-low .ks-mp-acct-num{color:var(--ks-danger,#931204)}
.ks-marktplatz .ks-mp-acct-meta{display:flex;flex-direction:column;gap:3px;line-height:1.25}
.ks-marktplatz .ks-mp-acct-nm{font-size:15px;font-family:var(--mp-sans-m)}
.ks-marktplatz .ks-mp-acct-sub{font-size:12.5px;color:var(--mp-muted)}
.ks-marktplatz .ks-mp-bound{color:#8a6314}
.ks-marktplatz .ks-mp-soon{color:var(--ks-danger,#931204)}

/* Bestellungen */
.ks-marktplatz .ks-mp-orders{list-style:none;margin:0;padding:0}
.ks-marktplatz .ks-mp-orders li{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;
	padding:12px 0;border-top:1px solid var(--ks-border,#efeae0)}
.ks-marktplatz .ks-mp-orders li:first-child{border-top:0;padding-top:0}
.ks-marktplatz .ks-mp-odate{font-size:13px;color:var(--mp-muted);min-width:78px;
	font-variant-numeric:tabular-nums}
.ks-marktplatz .ks-mp-owhat{flex:1;min-width:170px;font-size:15px}
.ks-marktplatz .ks-mp-owhat small{display:block;color:var(--mp-muted);font-size:12.5px;
	letter-spacing:.04em}
.ks-marktplatz .ks-mp-osum{font-family:var(--mp-serif);font-size:17px;
	font-variant-numeric:tabular-nums}
.ks-marktplatz .ks-mp-osum del{display:none} /* WC-Durchstreichung im Kompaktformat */
.ks-marktplatz .ks-mp-pill{font-size:11.5px;text-transform:uppercase;letter-spacing:.1em;
	font-family:var(--mp-sans-m);padding:4px 10px;border-radius:999px;background:#e2ecec;color:#2c565a}
.ks-marktplatz .ks-mp-pill.is-wait{background:#f3ebd7;color:#8a6314}
.ks-marktplatz .ks-mp-pill.is-bad{background:#f7e3e0;color:var(--ks-danger,#931204)}

/* Gast: schlanke Einladungs-Leiste (L1, Standard) */
.ks-marktplatz .ks-mp-member.is-slim .ks-mp-box{display:flex;flex-wrap:wrap;align-items:center;
	gap:14px 20px;border-left:4px solid var(--ks-accent,#326569);padding:16px 22px}
.ks-marktplatz .ks-mp-gtxt{font-size:16px;font-family:var(--mp-sans-m)}
.ks-marktplatz .ks-mp-gtxt small{display:block;font-size:13.5px;color:var(--mp-muted);
	margin-top:2px;font-family:var(--mp-sans)}
.ks-marktplatz .ks-mp-gacts{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto}

/* Gast: Panel-Variante (L2) */
.ks-marktplatz .ks-mp-gsub{font-size:14px;color:var(--mp-muted);margin:0 0 18px;line-height:1.5}
.ks-marktplatz .ks-mp-loginbox .ks-btn{margin-bottom:9px}
.ks-marktplatz .ks-mp-fine{font-size:12.5px;color:var(--mp-muted);margin:8px 0 0;line-height:1.5}
.ks-marktplatz .ks-mp-perks{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.ks-marktplatz .ks-mp-perks li{display:flex;gap:11px;align-items:baseline;font-size:15px}
.ks-marktplatz .ks-mp-perks li::before{content:"\2713";color:var(--ks-accent,#326569);
	font-family:var(--mp-sans-m);flex:0 0 auto}

@media(max-width:560px){
	.ks-marktplatz .ks-mp-gacts{margin-left:0;width:100%}
	.ks-marktplatz .ks-mp-gacts .ks-btn{flex:1}
}

/* ============================================================
   DARK MODE — gezielte Overrides
   Nur fuer Stellen, deren Light-Farbe NICHT dem Rollen-Token-Wert
   entspricht (pastellige Typ-Badges/Pills, Amber-Marker) sowie fuer
   Kontrast-Fallen. Greift ausschliesslich unter der Darkmode-Klasse
   (html.ks-theme-dark / html.ksom-dark-mode) — der Light-Modus bleibt
   damit exakt unveraendert.
   ============================================================ */
html.ks-theme-dark .ks-marktplatz,
html.ksom-dark-mode .ks-marktplatz{
	--badge-kurs-bg:#1d2c37; --badge-kurs-fg:#f3efe6;
	--badge-gut-bg:#1d2c37;  --badge-gut-fg:#f3efe6;
	--badge-emp-bg:#1d2c37;  --badge-emp-fg:#f3efe6;
	--badge-kae-bg:#1d2c37;  --badge-kae-fg:#f3efe6;
	--badge-gh-bg:#1d2c37;   --badge-gh-fg:#f3efe6;
	--badge-ter-bg:#1d2c37;  --badge-ter-fg:#f3efe6;
}
html.ks-theme-dark .ks-marktplatz .ks-mp-pill,
html.ksom-dark-mode .ks-marktplatz .ks-mp-pill,
html.ks-theme-dark .ks-marktplatz .ks-mp-pill.is-wait,
html.ksom-dark-mode .ks-marktplatz .ks-mp-pill.is-wait{background:#1d2c37;color:#f3efe6}
html.ks-theme-dark .ks-marktplatz .ks-mp-pill.is-bad,
html.ksom-dark-mode .ks-marktplatz .ks-mp-pill.is-bad{background:#2a1c1a}
html.ks-theme-dark .ks-marktplatz .ks-mp-bound,
html.ksom-dark-mode .ks-marktplatz .ks-mp-bound{color:#d3a24a}
html.ks-theme-dark .ks-marktplatz .ks-btn.is-disabled,
html.ksom-dark-mode .ks-marktplatz .ks-btn.is-disabled{background:#344650}
html.ks-theme-dark .ks-marktplatz .ks-mp-hero.has-image .ks-mp-search,
html.ksom-dark-mode .ks-marktplatz .ks-mp-hero.has-image .ks-mp-search{background:rgba(23,35,45,.92)}