/* smartEngin Courses – Verkaufsseite (Phase 0). Alles unter .seco namespaced. */

/*
 * WICHTIG (seit 1.4.8): In JEDEM Selektor dieser Datei steht die erste Klasse
 * ZWEIMAL, zum Beispiel `.seco-card.seco-card`. Das ist kein Versehen.
 *
 * Fremde Themes und Baukaesten legen globale Regeln an, die auf ALLES der Seite
 * wirken - `.elementor-kit-7 button`, `.elementor-kit-7 a`, `.elementor-kit-7 p`.
 * Solche Regeln wiegen 0-1-1. Eine eigene Regel aus EINER Klasse wiegt 0-1-0,
 * wiegt also weniger und verliert. Die Verdopplung hebt jede Regel auf 0-2-0.
 *
 * Das Verhaeltnis der Regeln DIESER Datei zueinander bleibt dabei unveraendert:
 * jede steigt um genau eine Klasse, was heute gewinnt, gewinnt weiter. Wer hier
 * eine neue Regel ergaenzt, schreibt die erste Klasse ebenfalls zweimal - sonst
 * faellt genau diese eine Stelle auf einer fremden Website auseinander.
 *
 * Dasselbe gilt fuer das CSS, das SECO_Design::css() zur Laufzeit dazuschreibt
 * (Reiter "Design"). Auch dort steht die erste Klasse zweimal, sonst verlieren
 * Pierres Einstellungen gegen diese Datei.
 *
 * Gemessen am 18.09.2026 gegen das CSS einer echten Astra/Elementor-Seite.
 * Begruendung und die beiden Zusatzmassnahmen: Block ganz am Ende der Datei.
 */

/*
 * `hidden` muss IMMER gewinnen — dieselbe Regel wie im Kundenbereich
 * (seco-member.css), die dort seit v0.31.0 steht. Die Browser-eigene Regel
 * [hidden]{display:none} kommt aus dem UA-Stylesheet und verliert gegen JEDE
 * Regel aus dieser Datei, die `display` setzt.
 *
 * Auf der Verkaufsseite traf es drei Blöcke, die deshalb IMMER offen standen,
 * obwohl das JavaScript sie per `hidden` zu- und aufmacht:
 *   - Gutscheinfeld und Partnercode-Feld (unter ihrem eigenen Aufklapp-Link),
 *   - die RECHNUNGSANSCHRIFT, die erst ab der Schwelle aus „Licence & buy"
 *     erscheinen soll. Firma/Straße/PLZ/Ort standen dadurch auch bei einem
 *     kleinen Kurs offen — Adressfelder schrecken beim Kaufen ab.
 * Die Prüf-Logik im JavaScript liest weiterhin `.hidden` und war nie falsch;
 * nur die Anzeige stimmte nicht.
 */
.seco.seco [hidden] {
	display: none !important;
}

.seco.seco {
	--seco-green: #37B971;
	--seco-green2: #4ED66F;
	/* Akzentfarbe als R,G,B-Liste – nur so lassen sich Tönungen wie
	   rgba(...,0.12) aus einer im Backend gewählten Farbe bilden. */
	--seco-green-rgb: 55, 185, 113;
	--seco-green-dark: #1f6b45;
	/* Mindestbreite einer Kurs-Kachel. Bestimmt, ab welcher Gesamtbreite die
	   gewünschte Kachelzahl noch in eine Zeile passt:
	   nötige Breite = N × Mindestbreite + (N−1) × 18px Abstand.
	   Bei 200px passen 5 Kacheln ab 1072px, 4 ab 854px, 3 ab 636px. */
	--seco-card-min: 200px;
	/* Eckenrundung der Verkaufsseite. EIN Wert aus dem Reiter "Design"
	   (--seco-radius) steuert Kacheln, Bezahlkachel und Bewertungsboxen.
	   Die beiden abgeleiteten Werte sind fuer kleinere Flaechen gedeckelt:
	   ein 30px-Radius auf einem 38px hohen Eingabefeld sieht aus wie eine
	   Pille. min() heisst zugleich: waehlt Pierre 0, wird ALLES eckig. */
	/* Die weisse FLAECHE der Verkaufsseite: Kacheln, Bezahlkachel und die drei
	   Bewertungskaesten. Der Schalter "Hintergrund transparent" (Reiter
	   "Design") setzt sie auf `transparent`, dann scheint das Design der
	   Website durch. NICHT betroffen sind Bedienelemente (Eingabefelder,
	   Kaestchen, der Knopf "Anwenden") und die beiden schwebenden Fenster
	   (Bewertungs-Popup, Bewertungsformular) - die muessen unabhaengig von
	   jeder Wahl lesbar bleiben, siehe die Kommentare dort. */
	--seco-white: #ffffff;
	--seco-radius: 14px;
	--seco-radius-m: min(var(--seco-radius, 14px), 10px);
	--seco-radius-s: min(var(--seco-radius, 14px), 8px);
	--seco-navy1: #102332;
	--seco-navy2: #11314A;
	--seco-neutral: #EAECE7;
	--seco-ink: #1c2b36;
	--seco-muted: #5f6b73;
	--seco-line: rgba(16, 35, 50, 0.12);
	max-width: 1000px;
	margin: 0 auto;
	color: var(--seco-ink);
	box-sizing: border-box;
}

.seco.seco *,
.seco.seco *::before,
.seco.seco *::after {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------------------
   Fremde Themes ausbremsen, Teil 2 (1.4.8)
   ---------------------------------------------------------------------------
   Die Verdopplung der ersten Klasse (siehe Kopf der Datei) holt nur zurueck,
   was diese Datei selbst setzt. Zwei Dinge holt sie NICHT zurueck, weil sie an
   Eigenschaften haengen, die wir gar nicht anfassen:

   1. Textschatten. Fremde Baukaesten schreiben ihn an den <body> (er wird dann
      vererbt) UND direkt an jeden Knopf. Gemessen: 28 Elemente der Kursbox
      standen dadurch mit verschwommener Schrift da.
   2. Schriftgroesse an Links. Ein Link erbt seine Groesse normalerweise vom
      Text, in dem er steht - eine Groesse AM Link schlaegt jedes Erben. Sie
      muss deshalb ausdruecklich zurueckgeholt werden, aber nur an FREMDEN
      Links: unsere eigenen (Klasse seco-...) haben ihre eigene Groesse.

   Der Block steht bewusst HIER OBEN und nicht am Dateiende: eigene Regeln
   weiter unten sollen ihn weiter schlagen koennen (im Kundenbereich setzen
   Wasserzeichen und Schloss-Symbol absichtlich einen Textschatten).

   `:where()` statt eines blanken `:not()` ist wichtig - ein blankes `:not()`
   wuerde das Gewicht der Regel mit anheben und dann die eigenen Regeln
   schlagen. `:where()` zaehlt beim Gewicht null.

   Alles mit `sels-`-Klasse bleibt ausgenommen: das ist die Kasse von
   "smartEngin Licence & buy", in die wir nicht hineinregieren.
   --------------------------------------------------------------------------- */

.seco.seco,
.seco.seco *:where(:not([class*="sels-"])) {
	text-shadow: none;
}

.seco.seco a:where(:not([class*="seco-"]):not([class*="sels-"])) {
	font-size: inherit;
	line-height: inherit;
}


.seco-sales__head.seco-sales__head {
	text-align: center;
	margin: 0 0 1.4rem;
}

.seco-sales__title.seco-sales__title {
	margin: 0 0 .35rem;
	font-weight: 600;
	/*
	 * Eigene Größe statt der des Themes (ab 1.3.5).
	 *
	 * Der Grund: Die Beschreibung darunter trägt die Schriftgröße, die im
	 * Editor gewählt wurde — eine FESTE Angabe in pt, die auf jedem Gerät
	 * gleich groß bleibt. Die Überschrift kam dagegen vom Theme und schrumpfte
	 * auf schmalen Schirmen mit. Gemessen (29.08.2026): bei 1280 px war die
	 * Überschrift 37,7 px gegen 24 px Untertitel (Faktor 1,57), bei 375 px nur
	 * noch 25,7 px gegen dieselben 24 px — Faktor 1,07, also praktisch gleich
	 * groß. Genau das hat Pierre auf dem Handy gesehen.
	 *
	 * `clamp` hält die Überschrift auf schmalen Schirmen bei 32 px und lässt
	 * sie bis 37,7 px wachsen — der Wert, den das Theme auf dem Desktop ohnehin
	 * vergibt. Am Desktop-Bild ändert sich damit nichts (gemessen: 37,7 → 37,1).
	 * 32 px gemessen als Kompromiss: 30 px ergaben nur Faktor 1,25, 34 px waren
	 * für eine dreizeilige Überschrift zu wuchtig; 32 px bringen Faktor 1,33
	 * ohne dass die Überschrift aus dem Fenster läuft.
	 *
	 * Grenze der Lösung: Wer die Beschreibung im Editor auf 24 pt oder größer
	 * stellt, überholt die Überschrift wieder. Eine feste Angabe schlägt jede
	 * mitwachsende — das lässt sich hier nicht abfangen, sondern nur im Editor
	 * entscheiden.
	 */
	font-size: clamp(2rem, 2.9vw, 2.36rem);
	line-height: 1.2;
}

.seco-sales__subtitle.seco-sales__subtitle {
	margin: 0;
	color: var(--seco-muted);
}

/* Sicherheitsnetz gegen Text, der rechts aus dem Bildschirm laeuft (1.3.7).
   Der Hauptgrund dafuer sind geschuetzte Leerzeichen, die TinyMCE beim Einfaerben
   von Woertern setzt; die loest seco_unstick_spaces() schon beim Ausgeben auf.
   Diese Regel faengt den Rest ab: sehr lange Einzelwoerter und Web-Adressen, die
   in keine Handy-Zeile passen. Sie bricht NUR, wenn es sonst hinauslaufen wuerde. */
.seco-sales__subtitle.seco-sales__subtitle,
.seco-card__desc.seco-card__desc,
.seco-course__intro.seco-course__intro,
.seco-vidbox__desc.seco-vidbox__desc {
	overflow-wrap: break-word;
}

/* Kachel-Raster. Die Höchstzahl der Kacheln nebeneinander kommt aus dem Reiter
   „Design" (--seco-cols). Rechnung: die Untergrenze eines Feldes ist genau so
   breit, dass höchstens N Felder in eine Zeile passen. Das max(…) gegen
   --seco-card-min verhindert, dass die Kacheln auf schmalen Bildschirmen zu dünn
   werden – es bestimmt damit auch, ab welcher Breite eine Kachel umbricht
   (siehe Rechnung oben bei --seco-card-min). `auto-fit` lässt wenige Kurse
   trotzdem die Breite füllen. */
.seco-grid.seco-grid {
	display: grid;
	gap: 18px;
	grid-template-columns: repeat(
		auto-fit,
		minmax(
			max(
				var(--seco-card-min, 200px),
				calc((100% - (var(--seco-cols, 4) - 1) * 18px) / var(--seco-cols, 4))
			),
			1fr
		)
	);
}

/* Hintergrund + Textfarbe der Kachel kommen aus dem Reiter „Design".
   Bei einer dunklen Wahl setzt PHP --seco-card-fg/-muted/--seco-line passend,
   damit die Kachel lesbar bleibt.
   Rahmenfarbe (seit 1.4.5): --seco-card-border aus „Design", auch `transparent`.
   Ohne eigene Wahl greift wie bisher --seco-line. Gewählte Kachel und
   „Beliebt" überschreiben die Farbe weiter unten mit der Akzentfarbe. */
.seco-card.seco-card {
	display: block;
	background: var(--seco-card-bg, var(--seco-white, #fff));
	color: var(--seco-card-fg, inherit);
	border: 2px solid var(--seco-card-border, var(--seco-line));
	border-radius: var(--seco-radius, 14px);
	overflow: hidden;
	cursor: pointer;
	/* Masse festgenagelt (1.4.8): fremde Themes setzen Abstaende mit
	   !important auf alles, was bedienbar ist. Dagegen hilft nur ein eigenes
	   !important. Die Regel weiter unten im @supports-Block ueberschreibt den
	   unteren Abstand mit hoeherer Spezifitaet und ebenfalls !important. */
	margin: 0 !important;
	padding: 0 !important;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.seco-card.seco-card:hover {
	box-shadow: 0 4px 18px rgba(16, 35, 50, 0.08);
}

.seco-card.seco-card.is-selected {
	border-color: var(--seco-green);
}

/* Höhe des Bildbereichs: einstellbar unter Design → Verkaufsseite
   („Höhe der Kachelbilder"), Standard 216px. Bei wenigen Kursen werden die
   Kacheln breit und ein niedriges Bild wirkt wie ein Streifen – dann hilft ein
   höherer Wert. */
.seco-card__media.seco-card__media {
	position: relative;
	display: flex;
	align-items: flex-end;
	height: var(--seco-card-img, 216px);
	/* KEIN Innenabstand: das Bild soll bis an die Kachelkante gehen (Pierre,
	   28.08.2026). Vorher standen hier 10px/12px - der dunkle Grund schaute
	   ringsum als Rahmen hervor. Die Farbe bleibt als Rueckfall stehen, sie
	   traegt die Kacheln ohne eigenes Bild. */
	padding: 0;
	background: var(--seco-navy2);
	color: #fff;
}

.seco-card__media.seco-card__media::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	/* 2px statt 4px (Pierre, 28.08.2026) - der Strich soll den Uebergang vom
	   Bild zum Text markieren, nicht als Band dazwischenliegen. */
	height: 2px;
	background: var(--seco-green);
}

.seco-card__icon.seco-card__icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 30px;
	height: 30px;
	color: rgba(255, 255, 255, 0.30);
}

/* Hervorgehobener Kurs ("Beliebt") */
.seco-card__badge.seco-card__badge {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	background: var(--seco-green);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	padding: 5px 10px;
	border-radius: 999px;
	box-shadow: 0 2px 6px rgba(16, 35, 50, 0.25);
}

.seco-card--highlight.seco-card--highlight {
	border-color: var(--seco-green);
	box-shadow: 0 0 0 2px var(--seco-green), 0 8px 22px rgba(16, 35, 50, 0.12);
}

.seco-card__caption.seco-card__caption {
	position: relative;
	font-size: 13px;
	font-weight: 600;
}

.seco-card__body.seco-card__body {
	display: block;
	padding: 14px 14px 16px;
}

/* Schriftgröße des Kurstitels: je Kurs einstellbar (seit 1.4.6), die Variable
   setzt SECO_Design::sales_overrides_css() an .seco-card--c<ID>. */
.seco-card__name.seco-card__name {
	display: block;
	font-weight: 600;
	font-size: var(--seco-name-size, 18px);
	margin-bottom: 5px;
}

.seco-card__desc.seco-card__desc {
	display: block;
	font-size: 14px;
	line-height: 1.5;
	color: var(--seco-card-muted, var(--seco-muted));
	margin-bottom: 14px;
}

.seco-card__foot.seco-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* Titel, Beschreibung und Preis stehen JE ZEILE auf einer Linie (1.4.6, Pierre
   16.09.2026). Bricht in einer Kachel der Titel zweizeilig um, rutschen
   Beschreibung und Preis der Nachbarkacheln derselben Zeile mit hinunter.

   Technik: CSS-Subgrid. Jede Kachel belegt VIER Zeilen des Rasters (Bild,
   Titel, Beschreibung, Fuß) und übernimmt deren Höhen; der Textkörper belegt
   davon die unteren drei und übernimmt sie ebenso. Das Raster macht jede
   dieser Zeilen so hoch wie ihr höchster Inhalt — über alle Kacheln der
   Kachelreihe. Eine neue Kachelreihe hat eigene Zeilen, rechnet also für sich.
   Die Plätze sind fest vergeben (grid-row), damit eine Kachel OHNE
   Beschreibung ihren Preis trotzdem in der Fußzeile hat.
   Der Abstand ZWISCHEN den Kachelreihen kommt hier nicht aus `gap`, sondern
   als Außenabstand unter jeder Kachel: Ein Zeilen-`gap` des Rasters stünde
   auch zwischen den vier Zeilen INNERHALB der Kachel. Bei einer Kachel ohne
   Beschreibung bliebe die leere Textzeile dann als 18 px Loch zwischen Titel
   und Preis stehen (auf dem Handy gemessen, 16.09.2026). Der negative
   Außenabstand am Raster gleicht den Abstand unter der letzten Reihe aus.
   Browser ohne Subgrid (vor 2023) überspringen den Block und zeigen die
   Kacheln wie bisher. */
@supports (grid-template-rows: subgrid) {
	.seco-grid.seco-grid {
		row-gap: 0;
		margin-bottom: calc(-1 * var(--seco-grid-gap, 18px));
	}

	.seco-grid.seco-grid > .seco-card {
		display: grid;
		grid-row: span 4;
		grid-template-rows: subgrid;
		row-gap: 0;
		margin-bottom: var(--seco-grid-gap, 18px) !important;
	}

	.seco-grid.seco-grid > .seco-card > .seco-card__media {
		grid-row: 1;
	}

	.seco-grid.seco-grid > .seco-card > .seco-card__body {
		grid-row: 2 / span 3;
		display: grid;
		grid-template-rows: subgrid;
		row-gap: 0;
		min-width: 0;
	}

	.seco-grid.seco-grid > .seco-card .seco-card__name {
		grid-row: 1;
	}

	.seco-grid.seco-grid > .seco-card .seco-card__desc {
		grid-row: 2;
		align-self: start;
	}

	.seco-grid.seco-grid > .seco-card .seco-card__foot {
		grid-row: 3;
		align-self: start;
	}
}

.seco-card__price.seco-card__price {
	font-size: 20px;
	font-weight: 600;
}

.seco-card__select.seco-card__select {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 14px;
	color: var(--seco-card-muted, var(--seco-muted));
}

.seco-card.seco-card.is-selected .seco-card__select {
	color: var(--seco-green);
}

.seco-card__cb.seco-card__cb {
	width: 18px !important;
	height: 18px !important;
	accent-color: var(--seco-green);
	margin: 0 !important;
	padding: 0 !important;
	cursor: pointer;
}

/* Bezahlkachel */
.seco-pay.seco-pay {
	margin-top: 20px;
	background: var(--seco-card-bg, var(--seco-white, #fff));
	color: var(--seco-card-fg, inherit);
	/* 1px statt 2px (Pierre, 28.08.2026): der Rahmen soll die Kachel abgrenzen,
	   nicht sie einrahmen. Die Kurskacheln behalten ihre 2px - dort traegt die
	   Staerke die Auswahl (gewaehlt = gruen). */
	border: 1px solid var(--seco-green);
	border-radius: var(--seco-radius, 14px);
	padding: 20px;
}

/* Die Kopfzeile ist zugleich der Auf-/Zuklapp-Schalter (<summary>). Der eigene
   Dreiecks-Marker der Browser wird abgeschaltet, dafür steht rechts ein Pfeil,
   der sich beim Öffnen dreht. In der Backend-Vorschau ist .seco-pay ein <div>
   ohne <summary> – dort greift nur die Flex-Zeile, alles bleibt sichtbar. */
.seco-pay__head.seco-pay__head {
	display: flex;
	align-items: center;
	gap: 9px;
	font-weight: 600;
	margin-bottom: 12px;
}

details.seco-pay.seco-pay > .seco-pay__head {
	cursor: pointer;
	list-style: none;
	margin-bottom: 0;
	padding: 2px 0;
	user-select: none;
}

details.seco-pay.seco-pay > .seco-pay__head::-webkit-details-marker {
	display: none;
}

details.seco-pay.seco-pay[open] > .seco-pay__head {
	margin-bottom: 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--seco-line);
}

/* Zugeklappt trägt die Kopfzeile die ganze Auskunft: „Deine Auswahl" und
   daneben, gedämpft, was gewählt ist. Auf schmalen Geräten darf der Text
   umbrechen, statt die Zeile zu sprengen. */
.seco-pay__headline.seco-pay__headline {
	flex: 0 0 auto;
}

.seco-pay__status.seco-pay__status {
	flex: 1 1 auto;
	min-width: 0;
	font-weight: 400;
	color: var(--seco-card-muted, #5f6b73);
}

.seco-pay__chev.seco-pay__chev {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	color: var(--seco-card-muted, #5f6b73);
	transition: transform .15s ease;
}

details.seco-pay.seco-pay[open] .seco-pay__chev {
	transform: rotate(180deg);
}

/* Der Pfeil gehört zum Aufklappen – in der Backend-Vorschau (immer offen,
   kein <summary>) wäre er irreführend. */
.seco-pay.seco-pay:not(details) .seco-pay__chev,
.seco-pay.seco-pay:not(details) .seco-pay__status {
	display: none;
}

.seco-pay__cart.seco-pay__cart {
	width: 20px;
	height: 20px;
	color: var(--seco-green);
}

.seco-pay__list.seco-pay__list {
	list-style: none;
	margin: 0 0 4px;
	padding: 0;
}

.seco-pay__list.seco-pay__list li {
	display: flex;
	justify-content: space-between;
	font-size: 15px;
	padding: 5px 0;
	border-bottom: 1px solid var(--seco-line);
}

.seco-pay__list.seco-pay__list li:last-child {
	border-bottom: 0;
}

.seco-pay__empty.seco-pay__empty {
	color: var(--seco-card-muted, var(--seco-muted));
	justify-content: flex-start !important;
}

.seco-pay__bundle.seco-pay__bundle {
	background: rgba(var(--seco-green-rgb), 0.12);
	color: var(--seco-green-dark);
	font-size: 17px;
	font-weight: 500;
	line-height: 1.5;
	border-radius: var(--seco-radius-m, 10px);
	padding: 13px 15px;
	margin: 14px 0;
}

.seco-pay__bundle.seco-pay__bundle b {
	font-weight: 700;
}

/* Abrechnungsart + Preis stehen zusammen rechts in der Summenzeile. */
.seco-pay__sum.seco-pay__sum {
	display: inline-flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
	justify-content: flex-end;
}

/* Nur eine Beschriftung ("Einmalzahlung" / "Monatsabo" / "Jahresabo"),
   ausdrücklich KEIN Knopf – Farbe im Backend einstellbar. */
.seco-pay__billing.seco-pay__billing {
	font-size: 15px;
	font-weight: 600;
	white-space: nowrap;
	color: var(--seco-billing-color, var(--seco-muted));
}

.seco-pay__total.seco-pay__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	border-top: 1px solid var(--seco-line);
	padding-top: 12px;
	margin-bottom: 14px;
}

.seco-pay__amount.seco-pay__amount {
	font-size: 26px;
	font-weight: 600;
}

/* Grundoptik ALLER Knöpfe. Lag früher in .seco-btn--buy, weil der Kauf-Knopf
   der einzige war; die später dazugekommenen Zahlwege (PayPal, Testkauf,
   "Jetzt bezahlen") erbten dadurch nichts und sahen wie Browser-Standard aus. */
.seco-btn.seco-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100% !important;
	border: 0;
	/* Pill-Form wie in der Theme-Spezifikation - ausser der Betreiber hat im
	   Reiter „Design" eine Knopfrundung gewaehlt (1.6.4, 0 = eckig). */
	border-radius: var(--seco-btn-radius, 999px);
	background: var(--seco-green);
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	/* Masse mit !important (1.4.8) - siehe Kopf der Datei. Der Aussenabstand
	   steht als volle Kurzschrift: fremdes CSS schreibt `margin: 1em auto`
	   und setzt damit alle vier Seiten auf einmal. */
	padding: 13px 18px !important;
	margin: 0 !important;
	line-height: 1.2 !important;
	text-align: center;
	cursor: pointer;
	/* Damit ein Knopf MIT Rahmen (Testkauf) nicht breiter als 100 % wird. */
	box-sizing: border-box;
	transition: filter .15s ease;
}

/* Icon im Knopf: folgt der Textfarbe, schrumpft nie weg. */
.seco-btn__icon.seco-btn__icon {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
}

.seco-btn__label.seco-btn__label {
	min-width: 0;
}

.seco-btn.seco-btn:hover {
	filter: brightness(0.94);
}

/* Je Zahlweg eigene Farbe (Reiter „Design"). Ohne Einstellung greift der
   Rückfall in der Klammer – die Datei bleibt allein lauffähig. */
.seco-btn--buy.seco-btn--buy,
.seco-btn--confirm.seco-btn--confirm {
	background: var(--seco-btn-card, var(--seco-green));
	color: var(--seco-btn-card-fg, #fff);
}

.seco-pay__note.seco-pay__note {
	text-align: center;
	font-size: 12px;
	color: var(--seco-card-muted, var(--seco-muted));
	margin: 12px 0 0;
}

.seco-pay__phase.seco-pay__phase {
	text-align: center;
	font-size: 13px;
	color: #9a6a00;
	background: rgba(255, 196, 117, 0.18);
	border-radius: var(--seco-radius-s, 8px);
	padding: 8px 10px;
	margin: 10px 0 0;
}

/* Handyansicht: Kachelanzahl kommt aus dem Reiter „Design" (1 oder 2). */
@media (max-width: 600px) {
	.seco-grid.seco-grid {
		grid-template-columns: repeat(var(--seco-cols-mobile, 1), 1fr);
	}

	/* Bei ZWEI Kacheln ist eine nur noch rund 165px breit. Ohne Anpassung würde
	   die Fußzeile überlaufen: Preis (77px) + „Auswählen" (102px) + Innenabstand
	   brauchen zusammen etwa 207px. Deshalb kleineres Bild, kleinere Schrift,
	   weniger Abstand – und die Fußzeile darf umbrechen, der Preis steht dann
	   über dem Kästchen. */
	.seco-m2.seco-m2 .seco-grid {
		gap: 10px;
		--seco-grid-gap: 10px;
	}

	/* Mit Subgrid kommt der Reihenabstand aus --seco-grid-gap (siehe oben) –
	   das `gap: 10px` darüber setzt row-gap sonst wieder auf 10 px. */
	@supports (grid-template-rows: subgrid) {
		.seco-m2.seco-m2 .seco-grid {
			row-gap: 0;
		}
	}

	/* Zwei Kacheln nebeneinander auf dem Handy: gut Dreiviertel der eingestellten
	   Höhe – so wirkt der eigene Wert mit, ohne dass das Bild die halbe
	   Handy-Seite einnimmt. */
	.seco-m2.seco-m2 .seco-card__media {
		height: calc(var(--seco-card-img, 216px) * 0.72);
	}

	.seco-m2.seco-m2 .seco-card__body {
		padding: 10px 10px 12px;
	}

	/* 5/6 der eingestellten Größe – ohne eigene Wahl genau die bisherigen 15 px. */
	.seco-m2.seco-m2 .seco-card__name {
		font-size: calc(var(--seco-name-size, 18px) * 5 / 6);
	}

	.seco-m2.seco-m2 .seco-card__desc {
		font-size: 12.5px;
		margin-bottom: 10px;
	}

	.seco-m2.seco-m2 .seco-card__price {
		font-size: 16px;
	}

	.seco-m2.seco-m2 .seco-card__foot {
		flex-wrap: wrap;
		gap: 4px;
	}

	.seco-m2.seco-m2 .seco-card__select {
		font-size: 12.5px;
	}

	.seco-m2.seco-m2 .seco-card__badge {
		font-size: 11px;
		padding: 4px 8px;
	}
}

/* =====================================================================
 * Maximale Breite (Reiter „Design")
 *
 * Das Theme steckt den Inhalt in eine Spalte (Block-Themes setzen per
 * `.is-layout-constrained > *` eine max-width). Das Hauptmenü nutzt aber eine
 * EIGENE, breitere Begrenzung – deshalb kann der Bereich nie breiter als der
 * Inhalt werden, solange man dieser Spalte folgt.
 *
 * Lösung ohne zweites Element: Begrenzung aufheben, eigene Breite setzen und
 * über einen berechneten linken Rand mittig stellen. `50%` bezieht sich auf die
 * umgebende Spalte, `-  Breite/2` schiebt den Bereich zurück – bei einer Breite
 * GRÖSSER als die Spalte wird der Rand negativ und der Bereich ragt beidseitig
 * gleich weit hinaus. Die Klemme gegen `100vw` verhindert Querscrollen.
 * ===================================================================== */
.seco.seco-w--max {
	--seco-w-eff: min(var(--seco-maxw, 1240px), calc(100vw - 32px));
	max-width: none !important;
	width: var(--seco-w-eff) !important;
	margin-left: calc(50% - var(--seco-w-eff) / 2) !important;
	margin-right: 0 !important;
	box-sizing: border-box;
}

/* Phase B: Checkout-Formular + Ergebnis */
.seco-card__img.seco-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: inherit;
}

.seco-pay__form.seco-pay__form {
	display: grid;
	gap: 8px;
	margin: 10px 0;
}

/* Widerrufsverzicht: sitzt direkt über den Bezahlknöpfen und bleibt sichtbar,
   wenn das Kartenfeld aufgeht – dann steht er unmittelbar über „Jetzt bezahlen".
   Bewusst abgesetzt, damit er gelesen und nicht überflogen wird. */
.seco-pay__withdrawal.seco-pay__withdrawal {
	margin: 0 0 12px;
	padding: 10px 12px;
	border: 1px solid var(--seco-line, rgba(16, 35, 50, 0.12));
	border-radius: var(--seco-radius-m, 10px);
	background: rgba(255, 196, 117, 0.14);
}

.seco-pay__wdr-label.seco-pay__wdr-label {
	display: flex;
	gap: 9px;
	align-items: flex-start;
	font-size: 13px;
	line-height: 1.5;
	color: #6b5220;
	cursor: pointer;
}

.seco-pay__wdr-box.seco-pay__wdr-box {
	flex: none;
	/* Volle Kurzschrift mit !important, sonst setzt ein fremdes Theme mit
	   `margin: 1em auto` alle vier Seiten neu. Die drei hinteren Werte sind
	   genau die, die der Browser von sich aus fuer ein Kaestchen vergibt -
	   sie stehen hier, damit sich am Aussehen NICHTS aendert. */
	margin: 2px 3px 3px 4px !important;
	padding: 0 !important;
	width: 17px !important;
	height: 17px !important;
	background: #fff;
}

/* Rechnungsanschrift: gleiches Raster wie das Formular darüber, PLZ und Ort
   in einer Zeile (PLZ schmal). Die Felder erben die Eingabe-Optik unten. */
.seco-pay__address.seco-pay__address {
	display: grid;
	gap: 8px;
	margin: 0 0 10px;
}

.seco-pay__address-note.seco-pay__address-note {
	margin: 0;
	font-size: 12px;
	color: var(--seco-card-muted, #5f6b73);
}

.seco-pay__addr-row.seco-pay__addr-row {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 8px;
}

/* Eingabefelder bleiben immer weiß mit dunkler Schrift – auch wenn die Kachel
   eine dunkle Hintergrundfarbe hat (Pierre-Vorgabe). Deshalb feste Werte statt
   Variablen, und `color` explizit, weil `font: inherit` die Farbe nicht mitbringt. */
.seco-pay__form.seco-pay__form input,
.seco-pay__address.seco-pay__address input {
	width: 100% !important;
	padding: 10px 12px !important;
	margin: 0 !important;
	border: 1px solid rgba(16, 35, 50, 0.25);
	border-radius: var(--seco-radius-m, 10px);
	font: inherit;
	background: #fff;
	color: #1c2b36;
	box-sizing: border-box;
}

.seco-pay__form.seco-pay__form input::placeholder,
.seco-pay__address.seco-pay__address input::placeholder {
	color: #5f6b73;
}

/* Auch die Auswahl-Kästchen bleiben in ihrer normalen Darstellung. */
.seco-card__cb.seco-card__cb {
	background: #fff;
}

.seco-pay__result.seco-pay__result {
	margin-top: 10px;
	padding: 10px 12px;
	border-radius: var(--seco-radius-m, 10px);
	font-size: 14px;
}

.seco-pay__result.seco-pay__result.is-ok {
	background: rgba(var(--seco-green-rgb), 0.12);
	color: var(--seco-green-dark);
}

.seco-pay__result.seco-pay__result.is-error {
	background: rgba(200, 40, 40, 0.10);
	color: #a01818;
}

/* Link "Zum Kursbereich" nach dem Kauf: bleibt schmal, nicht volle Breite. */
.seco-btn--member.seco-btn--member {
	display: inline-block;
	width: auto !important;
	margin: 8px 0 0 !important;
	text-decoration: none;
	background: var(--seco-btn-member, var(--seco-green));
	color: var(--seco-btn-member-fg, #fff);
}

.seco-btn.seco-btn[disabled] {
	opacity: 0.6;
	cursor: default;
}

/* =====================================================================
 * Bezahlwege auf der Verkaufsseite (D4-Frontend)
 * ===================================================================== */

/* Die beiden Zahlwege stehen NEBENEINANDER und rutschen auf schmalen
   Bildschirmen automatisch untereinander (flex-basis = Umbruchgrenze). */
.seco-pay__methods.seco-pay__methods {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.seco-pay__methods.seco-pay__methods > .seco-btn {
	flex: 1 1 240px;
	width: auto !important;
}

/* Auf dem Handy immer gestapelt – zwei Knöpfe nebeneinander sind dort zu eng
   für die längere Beschriftung. */
@media (max-width: 480px) {
	.seco-pay__methods.seco-pay__methods > .seco-btn {
		flex: 1 1 100%;
	}
}

.seco-btn--paypal.seco-btn--paypal {
	background: var(--seco-btn-paypal, #ffc439);
	color: var(--seco-btn-paypal-fg, #11314A);
	border-color: var(--seco-btn-paypal, #ffc439);
}

.seco-btn--paypal.seco-btn--paypal:hover {
	filter: brightness(0.95);
}

.seco-btn--test.seco-btn--test {
	background: transparent;
	border: 1px dashed rgba(16, 35, 50, 0.35);
	color: inherit;
	margin: 10px 0 0 !important;
}

/* Stripe-Kartenfeld */
.seco-pay__stripe.seco-pay__stripe {
	margin-top: 12px;
}

.seco-pay__card.seco-pay__card {
	margin-bottom: 12px;
	min-height: 40px;
}

.seco-btn--confirm.seco-btn--confirm {
	width: 100% !important;
}

.seco-pay__back.seco-pay__back {
	display: block;
	width: 100% !important;
	margin: 8px 0 0 !important;
	/* Ohne eigene Angabe stuende hier der Browser-Standard 1px 6px - und ein
	   fremdes Theme schreibt stattdessen 20px 36px hinein. Ein Textknopf
	   braucht keinen Innenabstand. */
	padding: 0 !important;
	background: none;
	border: none;
	/* Sonst macht ein fremdes Theme aus dem Textknopf eine Pille. */
	border-radius: 0;
	color: inherit;
	opacity: 0.7;
	font-size: 13px;
	text-decoration: underline;
	cursor: pointer;
}

.seco-pay__paypal.seco-pay__paypal {
	margin-top: 12px;
	min-height: 50px;
}

/* Beschreibung der Schulung (Feld „Beschreibung", mit Formatierung).
   Ist ein Block, damit mehrere Absätze möglich sind. */
.seco-sales__subtitle.seco-sales__subtitle > :first-child {
	margin-top: 0;
}

.seco-sales__subtitle.seco-sales__subtitle > :last-child {
	margin-bottom: 0;
}

.seco-sales__subtitle.seco-sales__subtitle p {
	margin: 0 0 8px;
}

/* Beschreibung auf der Kurskachel: echte Absätze + Ausrichtung (links/mittig/
   rechts) kommen aus dem Editor, deshalb hier nur die Abstände setzen. */
.seco-card__desc.seco-card__desc > :first-child {
	margin-top: 0;
}

.seco-card__desc.seco-card__desc > :last-child {
	margin-bottom: 0;
}

.seco-card__desc.seco-card__desc p {
	margin: 0 0 8px;
}

.seco-card__desc.seco-card__desc ul,
.seco-card__desc.seco-card__desc ol {
	margin: 0 0 8px;
	padding-left: 20px;
}

.seco-sales__subtitle.seco-sales__subtitle ul,
.seco-sales__subtitle.seco-sales__subtitle ol {
	margin: 0 0 8px;
	padding-left: 20px;
}

/* Kurs, den der angemeldete Kunde schon besitzt: sichtbar, aber nicht wählbar. */
.seco-card--owned.seco-card--owned {
	cursor: default;
	opacity: 0.82;
}

.seco-card--owned.seco-card--owned .seco-card__media {
	filter: grayscale(0.35);
}

.seco-card__owned.seco-card__owned {
	font-weight: 600;
	color: var(--seco-green-dark, #1f6b45);
}

.seco-card__tocourse.seco-card__tocourse {
	font-size: 13px;
	text-decoration: underline;
}

/* =====================================================================
 * Gutschein in der Bezahlkachel (Paket 1). Eigene Klassen, bewusst ohne
 * .seco-btn – "Anwenden" darf nie wie ein Kaufknopf aussehen oder zaehlen.
 * ===================================================================== */

.seco-pay__coupon.seco-pay__coupon {
	margin: -4px 0 14px;
}

.seco-coupon__toggle.seco-coupon__toggle {
	background: none;
	border: 0;
	/* Sonst macht ein fremdes Theme aus dem Textknopf eine Pille. */
	border-radius: 0;
	padding: 0 !important;
	margin: 0 !important;
	color: var(--seco-muted);
	text-decoration: underline;
	cursor: pointer;
	font-size: 13px;
	font-family: inherit;
}

.seco-coupon__row.seco-coupon__row {
	display: flex;
	gap: 8px;
}

.seco-coupon__input.seco-coupon__input {
	flex: 1 1 auto;
	min-width: 0 !important;
	padding: 9px 12px !important;
	margin: 0 !important;
	border: 1px solid var(--seco-line);
	border-radius: var(--seco-radius-s, 8px);
	font: inherit;
	text-transform: uppercase;
}

.seco-coupon__apply.seco-coupon__apply,
.seco-refcode__apply.seco-refcode__apply {
	flex: 0 0 auto;
	padding: 9px 16px !important;
	margin: 0 !important;
	border: 1px solid var(--seco-navy2);
	border-radius: 999px;
	background: #fff;
	color: var(--seco-navy2);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.seco-coupon__apply.seco-coupon__apply:hover,
.seco-refcode__apply.seco-refcode__apply:hover {
	background: var(--seco-neutral);
}

/* Partnercode (ohne Rabatt, 04.08.2026): gleiche Optik wie das Gutscheinfeld.
   Seit 05.08.2026 mit Pruefknopf und Rueckmeldung — er aendert zwar den Preis
   nicht, aber ein Tippfehler kostete vorher still die Provision. */
.seco-pay__refcode.seco-pay__refcode {
	margin: -4px 0 14px;
}

.seco-refcode__toggle.seco-refcode__toggle {
	background: none;
	border: 0;
	/* Sonst macht ein fremdes Theme aus dem Textknopf eine Pille. */
	border-radius: 0;
	padding: 0 !important;
	margin: 0 !important;
	color: var(--seco-muted);
	text-decoration: underline;
	cursor: pointer;
	font-size: 13px;
	font-family: inherit;
}

.seco-refcode__row.seco-refcode__row {
	display: flex;
	gap: 8px;
}

.seco-refcode__input.seco-refcode__input {
	flex: 1 1 auto;
	min-width: 0 !important;
	padding: 9px 12px !important;
	margin: 0 !important;
	border: 1px solid var(--seco-line);
	border-radius: var(--seco-radius-s, 8px);
	font: inherit;
	text-transform: uppercase;
}

.seco-coupon__msg.seco-coupon__msg,
.seco-refcode__msg.seco-refcode__msg {
	font-size: 13px;
	margin: 6px 0 0;
}

.seco-coupon__msg.seco-coupon__msg.is-ok,
.seco-refcode__msg.seco-refcode__msg.is-ok {
	color: var(--seco-green-dark);
}

.seco-coupon__msg.seco-coupon__msg.is-error,
.seco-refcode__msg.seco-refcode__msg.is-error {
	color: #b32d2e;
}

/* =====================================================================
 * Bewertungen (1.2.0)
 * ===================================================================== */

/* Kopfzeile über den Kacheln: „Bewerten · 5,0 ★★★★★ (4)". Bewusst höchstens
   320px breit und rechtsbündig — so ragt sie nie über die Kacheln hinaus,
   auch wenn eine Schulung nur EINEN Kurs (eine Kachel) anbietet. */
.seco-rev__bar.seco-rev__bar {
	max-width: 320px;
	margin: 0 0 14px auto;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 8px;
	position: relative;
}
.seco-rev__write.seco-rev__write {
	font-weight: 600;
	color: var(--seco-green, #37B971);
	text-decoration: underline;
	cursor: pointer;
}
.seco-rev__avg.seco-rev__avg { font-size: 15px; }

/* Sterne: fünf graue Zeichen, darüber ein farbiger Ausschnitt in
   Prozentbreite — reine Schrift, nichts zu laden. */
.seco-stars.seco-stars {
	position: relative;
	display: inline-block;
	color: #ccd4da;
	font-size: 16px;
	line-height: 1;
	letter-spacing: 2px;
	white-space: nowrap;
}
.seco-stars__fg.seco-stars__fg {
	position: absolute;
	left: 0;
	top: 0;
	overflow: hidden;
	white-space: nowrap;
	color: #f0a51e;
}

/* Klammer-Zahl als Aufklappfenster (natives <details>, geht ohne JS auf). */
.seco-rev__pop.seco-rev__pop { position: relative; display: inline-block; }
.seco-rev__count.seco-rev__count {
	list-style: none;
	cursor: pointer;
	color: var(--seco-green, #37B971);
	text-decoration: underline;
}
.seco-rev__count.seco-rev__count::-webkit-details-marker { display: none; }
/* Ohne Bewertungen: „– ☆☆☆☆☆ (0)" — die (0) ist nur ein Sprung nach unten,
   kein Aufklappfenster, und bleibt deshalb gedämpft. */
.seco-rev__count--zero.seco-rev__count--zero { color: #5f6b73; text-decoration: none; }
.seco-rev__popcard.seco-rev__popcard {
	position: absolute;
	right: 0;
	top: calc(100% + 8px);
	z-index: 60;
	width: min(320px, 88vw);
	background: #ffffff;
	color: #1c2b36;
	border: 1px solid rgba(16, 35, 50, 0.14);
	border-radius: var(--seco-radius-m, 10px);
	box-shadow: 0 10px 30px rgba(16, 35, 50, 0.18);
	padding: 14px 16px;
	text-decoration: none;
	display: block;
}
.seco-rev__popavg.seco-rev__popavg { font-size: 22px; font-weight: 700; margin-right: 6px; }
.seco-rev__popcount.seco-rev__popcount { display: block; margin: 4px 0 10px; color: #5f6b73; }

/* Verteilungsbalken 5★..1★ (Popup und Übersicht unten teilen die Bauform). */
.seco-rev__bars.seco-rev__bars { display: grid; gap: 6px; }
.seco-rev__barrow.seco-rev__barrow { display: flex; align-items: center; gap: 8px; }
.seco-rev__barlabel.seco-rev__barlabel { width: 26px; color: #5f6b73; font-size: 13px; white-space: nowrap; }
.seco-rev__bartrack.seco-rev__bartrack {
	flex: 1;
	height: 8px;
	border-radius: 999px;
	background: #e8edf1;
	overflow: hidden;
}
.seco-rev__barfill.seco-rev__barfill {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: #f0a51e;
}
.seco-rev__barpct.seco-rev__barpct { width: 52px; text-align: right; color: #5f6b73; font-size: 13px; white-space: nowrap; }

/* Der Bereich unten auf der Seite. */
.seco-rev.seco-rev { margin-top: 32px; }
.seco-rev__headrow.seco-rev__headrow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.seco-rev__title.seco-rev__title { margin: 0 0 12px; font-size: 26px; font-weight: 600; }
.seco-rev__total.seco-rev__total { color: #5f6b73; font-size: 14px; }
.seco-rev__notice.seco-rev__notice { border-radius: var(--seco-radius-s, 8px); padding: 10px 14px; margin: 0 0 14px; }
.seco-rev__notice--ok.seco-rev__notice--ok { background: rgba(var(--seco-green-rgb, 55, 185, 113), 0.12); color: #1c5c38; }
.seco-rev__notice--err.seco-rev__notice--err { background: rgba(214, 69, 69, 0.10); color: #8f2323; }

.seco-rev__summary.seco-rev__summary { display: flex; gap: 14px; align-items: stretch; margin-bottom: 14px; flex-wrap: wrap; }
.seco-rev__scorecard.seco-rev__scorecard {
	background: var(--seco-white, #ffffff);
	border: 1px solid rgba(16, 35, 50, 0.12);
	border-radius: var(--seco-radius, 14px);
	padding: 16px 20px;
	min-width: 150px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	justify-content: center;
}
.seco-rev__score.seco-rev__score { font-size: 30px; font-weight: 700; line-height: 1; }
.seco-rev__scorecount.seco-rev__scorecount { color: #5f6b73; }
.seco-rev__barscard.seco-rev__barscard {
	flex: 1;
	min-width: 260px;
	background: var(--seco-white, #ffffff);
	border: 1px solid rgba(16, 35, 50, 0.12);
	border-radius: var(--seco-radius, 14px);
	padding: 14px 16px;
}

/* Suche: normales GET-Formular — funktioniert auch ohne JavaScript.
   Die Knöpfe stehen KLEIN rechts neben dem Feld (Pierre, 28.08.2026) —
   .seco-btn ist von Haus aus 100 % breit (Kaufknöpfe), hier wird das
   zurückgenommen, sonst rutscht „Suchen" als Riesenbalken darunter. */
.seco-rev__search.seco-rev__search { display: flex; gap: 8px; margin: 0 0 6px; align-items: center; flex-wrap: nowrap; }
.seco-rev__search.seco-rev__search input[type="search"] {
	flex: 1;
	min-width: 0 !important;
	border: 1px solid rgba(16, 35, 50, 0.18);
	border-radius: var(--seco-radius-s, 8px);
	padding: 9px 12px !important;
	margin: 0 !important;
	font-size: 15px;
}
.seco-rev__search.seco-rev__search .seco-btn {
	width: auto !important;
	flex: 0 0 auto;
	font-size: 14px;
	padding: 9px 18px !important;
	white-space: nowrap;
}
.seco-rev__searchbtn.seco-rev__searchbtn { background: var(--seco-btn-card, var(--seco-green, #37B971)); color: var(--seco-btn-card-fg, #fff); }
.seco-rev__reset.seco-rev__reset { background: #eef2f5; color: #1c2b36; }
.seco-rev__found.seco-rev__found { color: var(--seco-green, #37B971); font-size: 14px; margin: 0 0 10px; }

.seco-rev__list.seco-rev__list { display: grid; gap: 12px; margin-top: 10px; }
.seco-rev__item.seco-rev__item {
	background: var(--seco-white, #ffffff);
	border: 1px solid rgba(16, 35, 50, 0.12);
	border-radius: var(--seco-radius, 14px);
	padding: 14px 18px;
}
.seco-rev__itemtop.seco-rev__itemtop { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.seco-rev__name.seco-rev__name { font-weight: 700; }
.seco-rev__verified.seco-rev__verified {
	font-weight: 600;
	font-size: 12px;
	color: var(--seco-green, #37B971);
	border: 1px solid rgba(var(--seco-green-rgb, 55, 185, 113), 0.5);
	border-radius: 999px;
	padding: 1px 8px;
	margin-left: 6px;
	white-space: nowrap;
}
.seco-rev__itemright.seco-rev__itemright { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.seco-rev__report.seco-rev__report {
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0 !important;
	margin: 0 !important;
	color: #5f6b73;
	font-size: 12px;
	text-decoration: underline;
	cursor: pointer;
}
.seco-rev__date.seco-rev__date { display: block; color: #5f6b73; font-size: 13px; margin-top: 2px; }
.seco-rev__text.seco-rev__text { margin: 10px 0 0; white-space: pre-line; }
.seco-rev__reply.seco-rev__reply {
	margin-top: 10px;
	padding: 10px 14px;
	background: #f3f8f5;
	border-left: 3px solid var(--seco-green, #37B971);
	border-radius: 0 var(--seco-radius-s, 8px) var(--seco-radius-s, 8px) 0;
}
.seco-rev__replyfrom.seco-rev__replyfrom { font-weight: 700; font-size: 13px; display: block; margin-bottom: 4px; }
.seco-rev__reply.seco-rev__reply p { margin: 0; white-space: pre-line; }
.seco-rev__morewrap.seco-rev__morewrap { text-align: center; margin: 14px 0 0; }
/* Auch „ältere anzeigen" kompakt statt als 100 %-Balken. */
.seco-rev__more.seco-rev__more { background: #eef2f5; color: #1c2b36; text-decoration: none; width: auto; font-size: 14px; padding: 9px 18px; }
.seco-rev__empty.seco-rev__empty { color: #5f6b73; }
.seco-rev__legal.seco-rev__legal { color: #7a858c; font-size: 12.5px; margin-top: 14px; }

/* Fenster „Bewertung absenden". Feste helle Farben — es liegt ÜBER der Seite
   und muss unabhängig von jeder Farbwahl lesbar bleiben. */
.seco-rev__overlay.seco-rev__overlay {
	position: fixed;
	inset: 0;
	z-index: 99990;
	background: rgba(16, 35, 50, 0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}
.seco-rev__overlay.seco-rev__overlay[hidden] { display: none; }
.seco-rev__modal.seco-rev__modal {
	position: relative;
	background: #ffffff;
	color: #1c2b36;
	border-radius: var(--seco-radius, 14px);
	box-shadow: 0 18px 50px rgba(16, 35, 50, 0.35);
	width: 100%;
	max-width: 620px;
	max-height: 90vh;
	overflow: auto;
	padding: 22px 24px;
}
.seco-rev__close.seco-rev__close {
	position: absolute;
	top: 10px;
	right: 12px;
	background: none;
	border: 0;
	border-radius: 0;
	font-size: 18px;
	color: #5f6b73;
	cursor: pointer;
	line-height: 1 !important;
	padding: 6px !important;
	margin: 0 !important;
}
.seco-rev__modaltitle.seco-rev__modaltitle { margin: 0 0 8px; font-size: 24px; }
.seco-rev__modalintro.seco-rev__modalintro { margin: 0 0 14px; color: #3d4b55; }
.seco-rev__starpick.seco-rev__starpick { display: flex; gap: 8px; margin: 0 0 14px; }
.seco-rev__star.seco-rev__star {
	width: 44px !important;
	height: 44px !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 1px solid rgba(16, 35, 50, 0.18);
	border-radius: var(--seco-radius-s, 8px);
	background: #ffffff;
	font-size: 22px;
	line-height: 1 !important;
	color: #ccd4da;
	cursor: pointer;
}
.seco-rev__star.seco-rev__star.is-on {
	color: #f0a51e;
	border-color: #f0a51e;
	background: rgba(240, 165, 30, 0.10);
}
.seco-rev__fields.seco-rev__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.seco-rev__field.seco-rev__field { display: block; margin: 0 0 12px; }
.seco-rev__field.seco-rev__field span { display: block; font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.seco-rev__field.seco-rev__field input,
.seco-rev__field.seco-rev__field textarea {
	width: 100%;
	border: 1px solid rgba(16, 35, 50, 0.18);
	border-radius: var(--seco-radius-s, 8px);
	padding: 9px 12px;
	font-size: 15px;
	box-sizing: border-box;
	background: #ffffff;
	color: #1c2b36;
}
.seco-rev__field.seco-rev__field input[readonly] { background: #f1f4f6; color: #5f6b73; }
.seco-rev__hint.seco-rev__hint { color: #7a858c; font-size: 13px; margin: 0 0 10px; }
/* Honigtopf: für Menschen unsichtbar (nicht display:none — manche Spam-
   Skripte lassen unsichtbare Felder dann aus). */
.seco-rev__hp.seco-rev__hp { position: absolute; left: -9999px; width: 1px !important; height: 1px !important; padding: 0 !important; margin: 0 !important; opacity: 0; }
.seco-rev__msg.seco-rev__msg { border-radius: var(--seco-radius-s, 8px); padding: 10px 14px; margin: 0 0 12px; }
.seco-rev__msg.seco-rev__msg.is-ok { background: rgba(var(--seco-green-rgb, 55, 185, 113), 0.12); color: #1c5c38; }
.seco-rev__msg.seco-rev__msg.is-err { background: rgba(214, 69, 69, 0.10); color: #8f2323; }

@media (max-width: 560px) {
	.seco-rev__fields.seco-rev__fields { grid-template-columns: 1fr; gap: 0; }
	.seco-rev__summary.seco-rev__summary { flex-direction: column; }
}

/* =====================================================================
 * Zwei Spalten im Bewertungsbereich (1.2.6, Pierre 29.08.2026)
 *
 * LINKS die Note und darunter die Prozentbalken, RECHTS Suche und die
 * Bewertungen. Bewusst NUR hier, ab 760px Fensterbreite: darunter bleibt
 * jede Regel von oben unveraendert gueltig, das Bild auf dem Handy und auf
 * schmalen Fenstern ist deshalb exakt das bisherige (Note und Balken
 * nebeneinander, Suche und Liste darunter ueber die volle Breite).
 * 760px = 260 (linke Spalte) + 18 (Abstand) + rund 480 fuer die Bewertungen.
 * ===================================================================== */
@media (min-width: 760px) {
	.seco-rev__cols.seco-rev__cols {
		display: flex;
		align-items: flex-start;
		gap: 18px;
	}

	/* Die linke Spalte waechst nicht mit - dadurch werden die Balken kurz,
	   statt wie bisher die ganze Seitenbreite auszufuellen. */
	.seco-rev__cols.seco-rev__cols > .seco-rev__summary {
		flex: 0 0 260px;
		flex-direction: column;
		gap: 0;
		margin-bottom: 0;
	}

	/* Note und Balken sollen als EIN Kasten wirken (Pierres Wahl): die
	   Rundung zwischen ihnen faellt weg und die beiden Rahmen liegen mit
	   -1px uebereinander, sodass genau EINE Trennlinie stehen bleibt. */
	.seco-rev__cols.seco-rev__cols > .seco-rev__summary > .seco-rev__scorecard {
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
		min-width: 0;
	}

	.seco-rev__cols.seco-rev__cols > .seco-rev__summary > .seco-rev__barscard {
		margin-top: -1px;
		border-top-left-radius: 0;
		border-top-right-radius: 0;
		/* Ohne das Zuruecknehmen der Mindestbreite (260px, gedacht fuer die
		   Zeile nebeneinander) waere die linke Spalte breiter als erlaubt. */
		min-width: 0;
		width: 100%;
		flex: none;
	}

	.seco-rev__main.seco-rev__main {
		flex: 1 1 auto;
		min-width: 0;
	}

	/* Die Liste steht jetzt direkt unter der Suche und braucht oben keinen
	   zusaetzlichen Abstand mehr. */
	.seco-rev__main.seco-rev__main > .seco-rev__list {
		margin-top: 8px;
	}
}

/* ---------------------------------------------------------------------------
   Spalten in der Beschreibung (Knopf „Zwei Spalten" im Editor, ab 1.3.0)

   Heisst bewusst `seco-split` und NICHT `seco-cols`: `--seco-cols` ist bereits
   die Design-Variable für die Anzahl der Kartenspalten. Zwei Dinge mit fast
   gleichem Namen laden zu Verwechslungen ein.

   Die Breite steckt in der Klasse und NICHT als Inline-Angabe im HTML: eine
   Inline-Breite schlägt jedes Stylesheet und liesse sich auf dem Handy nicht
   mehr aufheben – dort müssen die Spalten aber untereinander rutschen.

   Grundzustand ist deshalb „volle Breite, untereinander"; erst ab 600 px
   greifen die Prozentbreiten. Ein Kunde mit schmalem Fenster bekommt so nie
   zwei gequetschte Spalten nebeneinander.
   --------------------------------------------------------------------------- */
.seco-split.seco-split {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: flex-start;
}

.seco-split__col.seco-split__col {
	/* min-width:0 verhindert, dass ein langes Wort oder ein breites Bild die
	   Spalte über ihre Breite hinausdrückt – ohne das quillt die Zeile aus. */
	flex: 1 1 100%;
	min-width: 0;
}

.seco-split__col.seco-split__col img {
	max-width: 100%;
	height: auto;
}

.seco-split__col.seco-split__col > :first-child { margin-top: 0; }
.seco-split__col.seco-split__col > :last-child { margin-bottom: 0; }

@media (min-width: 600px) {
	.seco-split__col--10.seco-split__col--10 { flex: 0 1 calc(10% - 12px); }
	.seco-split__col--20.seco-split__col--20 { flex: 0 1 calc(20% - 12px); }
	.seco-split__col--30.seco-split__col--30 { flex: 0 1 calc(30% - 12px); }
	.seco-split__col--40.seco-split__col--40 { flex: 0 1 calc(40% - 12px); }
	.seco-split__col--50.seco-split__col--50 { flex: 0 1 calc(50% - 12px); }
	.seco-split__col--60.seco-split__col--60 { flex: 0 1 calc(60% - 12px); }
	.seco-split__col--70.seco-split__col--70 { flex: 0 1 calc(70% - 12px); }
	.seco-split__col--80.seco-split__col--80 { flex: 0 1 calc(80% - 12px); }
	.seco-split__col--90.seco-split__col--90 { flex: 0 1 calc(90% - 12px); }
}

/* ---------------------------------------------------------------------------
   Bild-Ausrichtung in Beschreibungstexten (ab 1.3.1)

   Der Editor kennt `alignleft` / `alignright` / `aligncenter` von Haus aus und
   zeigt den Umfluss auch an — im Frontend gab es dafuer aber KEINE Regel. Wer
   im Backend ein Bild rechts neben den Text stellte, sah auf der Verkaufsseite
   ein Bild UEBER dem Text (Pierre am 29.08.2026 genau so gemeldet). Der Editor
   log also, und das ist die schlimmere Sorte Fehler.

   Deshalb hier dieselben Klassennamen wie WordPress sie vergibt. Bewusst eng
   auf die Beschreibungs-Container begrenzt: eine allgemeine `.alignright`-Regel
   wuerde in fremde Themes hineinwirken.

   Unter 600 px wird der Umfluss AUFGEHOBEN: neben einem 200-px-Bild blieben auf
   einem Handy keine lesbaren 150 px Text uebrig. Gleiche Grenze wie bei den
   Spalten (.seco-split), damit sich beide Wege gleich verhalten.
   --------------------------------------------------------------------------- */
.seco-sales__subtitle.seco-sales__subtitle img,
.seco-card__desc.seco-card__desc img {
	max-width: 100%;
	height: auto;
}

.seco-sales__subtitle.seco-sales__subtitle .wp-caption,
.seco-card__desc.seco-card__desc .wp-caption {
	max-width: 100%;
}

.seco-sales__subtitle.seco-sales__subtitle .wp-caption-text,
.seco-card__desc.seco-card__desc .wp-caption-text {
	font-size: 0.875em;
	opacity: 0.8;
}

.seco-sales__subtitle.seco-sales__subtitle .alignleft,
.seco-card__desc.seco-card__desc .alignleft {
	float: left;
	/* Unten 18px statt 12px (1.3.8): Text klebte sichtbar an der Bildunterkante. */
	margin: 0 20px 18px 0;
}

.seco-sales__subtitle.seco-sales__subtitle .alignright,
.seco-card__desc.seco-card__desc .alignright {
	float: right;
	margin: 0 0 18px 20px;
}

.seco-sales__subtitle.seco-sales__subtitle .aligncenter,
.seco-card__desc.seco-card__desc .aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 18px;
}

/* Ohne das ragt ein umflossenes Bild unten aus seinem Kasten heraus, sobald es
   hoeher ist als der Text daneben lang. */
.seco-sales__subtitle.seco-sales__subtitle::after,
.seco-card__desc.seco-card__desc::after {
	content: "";
	display: table;
	clear: both;
}

@media (max-width: 599px) {
	/* `float: none` allein reicht NICHT: Ein <img> ist von Haus aus ein
	   Inline-Element und bleibt dann mitten im Textfluss stehen — das Bild
	   klebt links, und der folgende Text schmiegt sich rechts an seine
	   Unterkante. Genau so sah es auf Pierres Handy aus (29.08.2026).
	   Erst `display: block` macht daraus einen eigenen Block, unter dem der
	   Text wieder über die volle Breite beginnt. Zentriert, weil ein kleines
	   Bild linksbündig auf schmalem Schirm verloren wirkt. */
	.seco-sales__subtitle.seco-sales__subtitle .alignleft,
	.seco-sales__subtitle.seco-sales__subtitle .alignright,
	.seco-sales__subtitle.seco-sales__subtitle .aligncenter,
	.seco-card__desc.seco-card__desc .alignleft,
	.seco-card__desc.seco-card__desc .alignright,
	.seco-card__desc.seco-card__desc .aligncenter {
		float: none;
		display: block;
		/* Abstand unter dem Bild (Pierre, 03.09.2026, zweite Runde): Er soll
		   annaehernd so gross sein wie der ueber dem Bild, aber ein klein wenig
		   kleiner. Auf der Verkaufsseite gemessen (Chrome, 390px): ueber dem Bild
		   51px, darunter mit 24px Rand nur 23px. 44px Rand ergeben gemessen 43px —
		   also 8px weniger als oben. Vorgeschichte: 12px (bis 1.3.7) liessen den
		   Text sichtbar am Bild kleben, 24px (1.3.8) war Pierre noch zu wenig.
		   Merke: Der Abstand OBEN kommt aus Pierres Text (Leerzeile im Editor),
		   nicht aus dem Stylesheet — faellt die Leerzeile weg, ist unten mehr. */
		margin: 0 auto 44px;
	}
}

/* =====================================================================
 * Seitliches Bezahlfenster (1.4.3, Reiter „Design" → Bezahlfeld)
 *
 * Aus demselben <details class="seco-pay seco-pay--side"> wird ab 1024 px
 * Bildschirmbreite ein Fenster am rechten Rand, das die ganze Seite um seine
 * Breite (--seco-side-w, 15–40 vw) zur Seite rückt. Gestaltet nach Pierres
 * Vorlage (Warenkorb-Leiste mit Kopfzeile, Kreuz, Liste mit Vorschaubild),
 * Farben aber aus dem Reiter „Design" wie beim Aufklappfenster.
 *
 * Zwei Bedingungen, beide bewusst:
 *  - `html.seco-side-js`: setzt erst die JS, ganz am Ende ihres Starts. Ohne
 *    Skript läge das Fenster sonst unerreichbar außerhalb des Bildschirms –
 *    so bleibt es das Aufklappfenster darunter, das auch ohne JS bedienbar ist.
 *  - `min-width: 1024px`: auf Handy und Tablet hochkant bleibt alles wie
 *    bisher (Pierre, 14.09.2026). Dieselbe Zahl steht in seco-frontend.js
 *    und als SECO_Design::SIDE_MIN_SCREEN.
 * Offen ist das Fenster, solange `html.seco-side-open` gesetzt ist. Vorher
 * liegt es rechts neben dem Bildschirm und ist unsichtbar (visibility), also
 * weder zu sehen noch per Tab-Taste erreichbar.
 * ===================================================================== */

/* Nur fürs seitliche Fenster – überall sonst unsichtbar. */
.seco-pay__close.seco-pay__close,
.seco-pay__count.seco-pay__count,
.seco-pay__thumb.seco-pay__thumb,
.seco-pay__remove.seco-pay__remove,
.seco-paytab.seco-paytab {
	display: none;
}

@media (min-width: 1024px) {
	/* VOR dem Skript (1.4.7): Das Bezahlfeld stand bis 1.4.6 kurz unter den
	   Kacheln („Deine Auswahl") und verschwand dann – ein sichtbarer Sprung,
	   dazu rutschte alles darunter hoch. Jetzt liegt es bis zum Start des
	   Skripts außerhalb des Bildschirms und nimmt keinen Platz ein.
	   Sicherheitsnetz, falls das Skript NIE läuft (blockiert, Fehler): Die
	   Animation setzt es nach 3 Sekunden an seinen Platz unter den Kacheln
	   zurück – bedienbar wie bisher. Läuft das Skript, hebt die Regel darunter
	   (html.seco-side-js …) die Animation auf. `position`, `left` und
	   `visibility` sind in Animationen erlaubt; mit Dauer 0 und
	   `forwards` gilt der Endwert ab der dritten Sekunde. */
	html:not(.seco-side-js) details.seco-pay--side {
		position: absolute;
		left: -10000px;
		visibility: hidden;
		animation: seco-pay-nojs 0s linear 3s forwards;
	}

	/* Übergänge aus, solange das Skript umschaltet – siehe seco-frontend.js
	   (seco-side-init). !important, weil die Regeln für offen/zu weiter
	   unten eine höhere Spezifität haben. */
	html.seco-side-init.seco-side-init body,
	html.seco-side-init.seco-side-init details.seco-pay--side {
		transition: none !important;
	}

	html.seco-side-js.seco-side-js body {
		transition: margin-right .35s ease;
	}

	html.seco-side-js.seco-side-js.seco-side-open body {
		margin-right: var(--seco-side-w, 25vw);
	}

	/* Die eingestellte Höchstbreite rechnet mit 100vw – bei offenem Fenster
	   steht davon nur noch der Rest zur Verfügung, sonst ragten die Kacheln
	   unter das Fenster. */
	html.seco-side-js.seco-side-js.seco-side-open .seco.seco-w--max {
		--seco-w-eff: min(var(--seco-maxw, 1240px), calc(100vw - var(--seco-side-w, 25vw) - 32px));
	}

	html.seco-side-js.seco-side-js details.seco-pay--side {
		position: fixed;
		/* Unter der WordPress-Adminleiste, wenn sie da ist (WordPress setzt
		   die Variable selbst). */
		top: var(--wp-admin--admin-bar--height, 0px);
		right: 0;
		bottom: 0;
		width: var(--seco-side-w, 25vw);
		max-width: 100vw;
		margin: 0;
		padding: 0;
		border: 0;
		border-left: 1px solid var(--seco-line);
		border-radius: 0;
		/* Fest deckend: „Hintergrund transparent" gilt hier NICHT, sonst läge
		   das Formular durchsichtig über den Kacheln. Eine gewählte
		   Kachelfarbe gilt dagegen. */
		background: var(--seco-card-bg, #fff);
		box-shadow: -8px 0 28px rgba(16, 35, 50, 0.12);
		z-index: 99990;
		transform: translateX(100%);
		visibility: hidden;
		/* Das Sicherheitsnetz von oben darf hier nie greifen. */
		animation: none;
		transition: transform .35s ease, visibility 0s linear .35s;
		/* Für die Schmal-Regeln weiter unten (@container): die richten sich
		   nach der Breite des Fensters, nicht nach der des Bildschirms. */
		container-type: inline-size;
		container-name: seco-side;
	}

	html.seco-side-js.seco-side-js.seco-side-open details.seco-pay--side {
		transform: none;
		visibility: visible;
		transition: transform .35s ease;
	}

	/* Kopfzeile: feste Höhe, damit Liste und Felder darunter genau
	   anschließen (siehe .seco-pay__body). */
	html.seco-side-js.seco-side-js details.seco-pay--side > .seco-pay__head {
		position: relative;
		height: 64px;
		margin: 0;
		padding: 0 56px;
		justify-content: center;
		gap: 8px;
		border-bottom: 1px solid var(--seco-line);
		font-size: 16px;
		cursor: default;
		white-space: nowrap;
		overflow: hidden;
	}

	html.seco-side-js.seco-side-js details.seco-pay--side .seco-pay__status,
	html.seco-side-js.seco-side-js details.seco-pay--side .seco-pay__chev {
		display: none;
	}

	html.seco-side-js.seco-side-js details.seco-pay--side .seco-pay__count {
		display: inline;
	}

	html.seco-side-js.seco-side-js details.seco-pay--side .seco-pay__close {
		display: flex;
		position: absolute;
		top: 0;
		right: 4px;
		width: 52px !important;
		height: 64px !important;
		align-items: center;
		justify-content: center;
		padding: 0 !important;
		margin: 0 !important;
		border: 0;
		border-radius: 0;
		background: none;
		color: inherit;
		cursor: pointer;
		z-index: 2;
	}

	html.seco-side-js.seco-side-js details.seco-pay--side .seco-pay__close svg {
		width: 22px;
		height: 22px;
	}

	/* Alles unter der Kopfzeile rollt; der Fuß (Summe, Widerruf, Knöpfe)
	   bleibt dabei am unteren Rand stehen. Absolut statt Flexbox: ein
	   <details> lässt sich nicht in jedem Browser als Flex-Behälter nutzen. */
	html.seco-side-js.seco-side-js details.seco-pay--side > .seco-pay__body {
		position: absolute;
		top: 64px;
		left: 0;
		right: 0;
		bottom: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 0 20px;
	}

	html.seco-side-js.seco-side-js details.seco-pay--side .seco-pay__foot {
		position: sticky;
		bottom: 0;
		margin: 16px -20px 0;
		padding: 14px 20px 18px;
		background: var(--seco-card-bg, #fff);
		border-top: 1px solid var(--seco-line);
	}

	/* Braucht der Fuß mehr als die halbe Höhe (schmales oder niedriges
	   Fenster), setzt die JS seco-pay--flow: dann rollt er mit. */
	html.seco-side-js.seco-side-js details.seco-pay--side.seco-pay--flow .seco-pay__foot {
		position: static;
	}

	/* Liste: Vorschaubild | Titel über Preis | Entfernen */
	html.seco-side-js.seco-side-js details.seco-pay--side .seco-pay__list {
		margin: 0;
	}

	html.seco-side-js.seco-side-js details.seco-pay--side .seco-pay__list li {
		display: grid;
		grid-template-columns: 56px minmax(0, 1fr) 24px;
		column-gap: 12px;
		row-gap: 2px;
		align-items: start;
		padding: 14px 0;
		font-size: 14px;
	}

	html.seco-side-js.seco-side-js details.seco-pay--side .seco-pay__list li.seco-pay__empty {
		display: block;
	}

	html.seco-side-js.seco-side-js details.seco-pay--side .seco-pay__thumb {
		display: flex;
		align-items: center;
		justify-content: center;
		grid-column: 1;
		grid-row: 1 / span 2;
		width: 56px;
		height: 56px;
		overflow: hidden;
		border-radius: var(--seco-radius-s, 8px);
		background: var(--seco-navy2);
		color: #fff;
	}

	html.seco-side-js.seco-side-js details.seco-pay--side .seco-pay__thumb img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	html.seco-side-js.seco-side-js details.seco-pay--side .seco-pay__thumb svg {
		width: 24px;
		height: 24px;
	}

	html.seco-side-js.seco-side-js details.seco-pay--side .seco-pay__iname {
		grid-column: 2;
		color: var(--seco-green);
		font-weight: 500;
		line-height: 1.35;
		overflow-wrap: break-word;
	}

	html.seco-side-js.seco-side-js details.seco-pay--side .seco-pay__iprice {
		grid-column: 2;
	}

	html.seco-side-js.seco-side-js details.seco-pay--side .seco-pay__remove {
		display: flex;
		align-items: center;
		justify-content: center;
		grid-column: 3;
		grid-row: 1;
		width: 22px;
		height: 22px;
		margin-top: 1px;
		padding: 0;
		border: 1px solid var(--seco-line);
		border-radius: 50%;
		background: rgba(16, 35, 50, 0.05);
		color: inherit;
		cursor: pointer;
	}

	html.seco-side-js.seco-side-js details.seco-pay--side .seco-pay__remove svg {
		width: 10px;
		height: 10px;
	}

	html.seco-side-js.seco-side-js details.seco-pay--side .seco-pay__bundle {
		font-size: 14px;
		padding: 11px 13px;
		margin: 14px 0;
	}

	/* Summe im Fuß: ohne eigene Trennlinie, die trägt der Fuß selbst. */
	html.seco-side-js.seco-side-js details.seco-pay--side .seco-pay__foot .seco-pay__total {
		border-top: 0;
		padding-top: 0;
		margin-bottom: 12px;
		/* „Gesamt" bricht nie mitten im Wort; wird es eng, rutscht der
		   Betrag in die nächste Zeile. */
		flex-wrap: wrap;
		gap: 2px 10px;
	}

	html.seco-side-js.seco-side-js details.seco-pay--side .seco-pay__total > span:first-child {
		flex: 0 0 auto;
	}

	html.seco-side-js.seco-side-js details.seco-pay--side .seco-pay__total .seco-pay__sum {
		margin-left: auto;
	}

	html.seco-side-js.seco-side-js details.seco-pay--side .seco-pay__headline {
		overflow: hidden;
		text-overflow: ellipsis;
		min-width: 0;
		flex: 0 1 auto;
	}

	html.seco-side-js.seco-side-js details.seco-pay--side .seco-pay__amount {
		font-size: 22px;
	}

	html.seco-side-js.seco-side-js details.seco-pay--side .seco-pay__wdr-label {
		font-size: 12px;
	}

	/* Knöpfe immer untereinander – nebeneinander passt die Beschriftung
	   bei 15 % Breite nicht. */
	html.seco-side-js.seco-side-js details.seco-pay--side .seco-pay__methods > .seco-btn {
		flex: 1 1 100%;
		font-size: 15px;
		padding: 12px 16px !important;
	}

	/* „Deine Auswahl · 2 Kurse · 900,00 €" unten rechts, wenn der Kunde das
	   Fenster geschlossen hat, aber noch Kurse gewählt sind. */
	/* Abstand nach rechts aus „Design" (seit 1.4.6, Standard 100 px): unten
	   rechts sitzen oft Chat-Knöpfe, die Leiste soll sie nicht verdecken. */
	html.seco-side-js.seco-side-js .seco-paytab {
		display: flex;
		position: fixed;
		right: var(--seco-paytab-right, 100px);
		max-width: calc(100vw - var(--seco-paytab-right, 100px) - 20px);
		bottom: 20px;
		z-index: 99989;
		align-items: center;
		gap: 8px;
		padding: 11px 18px;
		border: 1px solid var(--seco-green);
		border-radius: 999px;
		background: var(--seco-card-bg, #fff);
		color: var(--seco-card-fg, var(--seco-ink));
		font: inherit;
		font-size: 15px;
		font-weight: 500;
		box-shadow: 0 6px 20px rgba(16, 35, 50, 0.16);
		cursor: pointer;
	}

	html.seco-side-js.seco-side-js .seco-paytab svg {
		width: 20px;
		height: 20px;
		color: var(--seco-green);
	}
}

/* Schmales Fenster (bei 15 % auf einem Laptop nur rund 200–290 px): Kopfzeile
   linksbündig, damit sie nicht unter das Kreuz läuft, weniger Rand, kleinere
   Bilder und Texte. Browser ohne @container zeigen einfach die normale Größe. */
@media (min-width: 1024px) {
	@container seco-side (max-width: 340px) {
		html.seco-side-js.seco-side-js details.seco-pay--side > .seco-pay__head {
			justify-content: flex-start;
			padding: 0 48px 0 14px;
			font-size: 15px;
			gap: 6px;
		}

		html.seco-side-js.seco-side-js details.seco-pay--side .seco-pay__close {
			right: 0;
			width: 46px !important;
		}

		html.seco-side-js.seco-side-js details.seco-pay--side > .seco-pay__body {
			padding: 0 14px;
		}

		html.seco-side-js.seco-side-js details.seco-pay--side .seco-pay__foot {
			margin: 14px -14px 0;
			padding: 12px 14px 14px;
		}

		html.seco-side-js.seco-side-js details.seco-pay--side .seco-pay__list li {
			grid-template-columns: 44px minmax(0, 1fr) 22px;
			column-gap: 10px;
			padding: 12px 0;
			font-size: 13px;
		}

		html.seco-side-js.seco-side-js details.seco-pay--side .seco-pay__thumb {
			width: 44px;
			height: 44px;
		}

		html.seco-side-js.seco-side-js details.seco-pay--side .seco-pay__bundle {
			font-size: 13px;
			padding: 9px 11px;
		}

		html.seco-side-js.seco-side-js details.seco-pay--side .seco-pay__amount {
			font-size: 20px;
		}

		html.seco-side-js.seco-side-js details.seco-pay--side .seco-pay__billing {
			font-size: 13px;
		}

		html.seco-side-js.seco-side-js details.seco-pay--side .seco-pay__wdr-label {
			font-size: 11px;
		}

		html.seco-side-js.seco-side-js details.seco-pay--side .seco-pay__withdrawal {
			padding: 8px 10px;
		}

		html.seco-side-js.seco-side-js details.seco-pay--side .seco-pay__methods > .seco-btn {
			font-size: 14px;
			padding: 11px 12px !important;
		}
	}
}

/* Sicherheitsnetz ohne Skript, siehe html:not(.seco-side-js) oben. */
@keyframes seco-pay-nojs {
	from,
	to {
		position: static;
		left: auto;
		visibility: visible;
	}
}

@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
	html.seco-side-js.seco-side-js body,
	html.seco-side-js.seco-side-js details.seco-pay--side,
	html.seco-side-js.seco-side-js.seco-side-open details.seco-pay--side {
		transition: none;
	}
}

/* =====================================================================
 * Verkauf über CopeCart (1.6.0): ein Kaufknopf je Kachel statt Auswahl
 * und Bezahlfeld. Die Knöpfe sind gewöhnliche Links.
 * ===================================================================== */

/* Die Kachel selbst ist hier nicht anklickbar – nur ihr Knopf. */
.seco-card--cc.seco-card--cc {
	cursor: default;
}

/* Preis und Abrechnungsart in einer Zeile, der Knopf darunter über die
   ganze Breite. */
.seco-card__foot--cc.seco-card__foot--cc {
	flex-wrap: wrap;
	gap: 6px 10px;
}

.seco-card__billing.seco-card__billing {
	font-size: 12.5px;
	color: var(--seco-card-muted, var(--seco-muted));
}

.seco-card__foot--cc.seco-card__foot--cc .seco-btn {
	flex: 1 1 100%;
	margin-top: 6px !important;
}

/* Ein Link als Knopf: Unterstreichung und Linkfarbe des Themes fernhalten. */
.seco-btn--cc.seco-btn--cc,
.seco-btn--cc.seco-btn--cc:hover,
.seco-btn--cc.seco-btn--cc:focus,
.seco-btn--cc.seco-btn--cc:visited {
	text-decoration: none !important;
	color: var(--seco-btn-card-fg, #fff);
}

.seco-cc__off.seco-cc__off {
	flex: 1 1 100%;
	font-size: 13px;
	color: var(--seco-card-muted, var(--seco-muted));
}

/* Nur der Betreiber sieht das – deshalb darf es auffallen. */
.seco-cc__admin.seco-cc__admin {
	display: block;
	flex: 1 1 100%;
	font-size: 12.5px;
	line-height: 1.4;
	padding: 8px 10px;
	border-radius: 8px;
	background: #fff6dd;
	color: #7a5200;
}

.seco-cc__note.seco-cc__note {
	text-align: center;
	font-size: 12.5px;
	color: var(--seco-muted);
	margin: 12px 0 0;
}

/* Bündel unter den Kacheln. */
.seco-ccbundle.seco-ccbundle {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 20px;
	margin-top: 20px;
	padding: 18px 20px;
	background: var(--seco-card-bg, var(--seco-white, #fff));
	color: var(--seco-card-fg, inherit);
	border: 1px solid var(--seco-card-border, var(--seco-line));
	border-radius: var(--seco-radius, 14px);
}

.seco-ccbundle--highlight.seco-ccbundle--highlight {
	border-color: var(--seco-green);
	box-shadow: 0 0 0 1px var(--seco-green);
}

.seco-ccbundle__text.seco-ccbundle__text {
	flex: 1 1 240px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.seco-ccbundle__title.seco-ccbundle__title {
	font-size: 18px;
}

.seco-ccbundle__price.seco-ccbundle__price {
	font-size: 20px;
	font-weight: 600;
}

.seco-ccbundle__old.seco-ccbundle__old {
	font-size: 14px;
	font-weight: 400;
	color: var(--seco-card-muted, var(--seco-muted));
	margin: 0 6px;
}

.seco-ccbundle.seco-ccbundle .seco-btn {
	flex: 0 1 280px;
	width: auto !important;
}

/* Einzeln stehender Knopf ([seco_kaufknopf]). Seit 1.6.5 ist er so breit wie
   seine Beschriftung (Pierre, 02.10.2026): Vorher fuellte er bis zu 360 px,
   und links und rechts der Schrift stand viel leere Flaeche. Die Regel fuer
   alle Knoepfe setzt width: 100% !important - deshalb hier ebenfalls mit
   !important und hoeherem Gewicht (zwei Klassen plus die des Knopfes).
   Wo der Knopf steht (links, mittig, rechts), bestimmt die Ausrichtung des
   Bereichs, in den der Betreiber ihn setzt - er ist ein Zeilen-Element. */

/* Der Rahmen selbst nimmt die ganze Breite seines Platzes und rueckt nichts
   ein. `.seco` begrenzt sonst auf 1000 px und stellt sich mittig: In einem
   breiteren Bereich stand der Knopf dadurch rund 96 px vom Text des
   Betreibers entfernt (im Chrome gemessen). Gleiches Gewicht wie `.seco.seco`,
   steht aber spaeter in der Datei - gewinnt also. */
.seco-ccbuy.seco-ccbuy {
	max-width: none;
	margin: 0;
}

.seco-ccbuy.seco-ccbuy .seco-btn {
	display: inline-flex;
	width: auto !important;
	max-width: 100%;
	padding: 13px 26px !important;
}

/* Der Satz darunter (nur mit hinweis="ja") richtet sich wie der Knopf aus
   statt mittig unter einer Flaeche, die es nicht mehr gibt. */
.seco-ccbuy.seco-ccbuy .seco-cc__note {
	text-align: inherit;
}

@media (max-width: 600px) {
	.seco-ccbundle.seco-ccbundle .seco-btn {
		flex: 1 1 100%;
	}
}