/* ---------------------------------------------------------------------
   Grid-Ausgabe: [kurse cat="..."]
   Desktop 3 Spalten, Tablet 2 Spalten, Mobile 1 Spalte.
--------------------------------------------------------------------- */
.stk-kurs-archive {
	max-width: 1200px;
	margin: 0 auto;
	padding: 40px 20px 80px;
}

.stk-archive-title {
	margin-bottom: 24px;
}

.stk-kurse-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin: 24px 0;
}

@media (max-width: 1024px) {
	.stk-kurse-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.stk-kurse-grid {
		grid-template-columns: 1fr;
	}
}

.stk-kurs-card {
	display: block;
	text-decoration: none;
	color: inherit;
	border: 1px solid #e2e2e2;
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.stk-kurs-card:hover {
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
}

.stk-kurs-card-media {
	aspect-ratio: 16 / 10;
	background: #f3f4f4;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.stk-kurs-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.stk-kurs-card-icon {
	font-size: 48px;
	width: 48px;
	height: 48px;
	color: #b7bcbf;
}

.stk-kurs-card-body {
	padding: 16px 18px 20px;
}

.stk-kurs-card-title {
	margin: 0 0 8px;
	font-size: 1.1em;
	line-height: 1.3;
}

.stk-kurs-card-desc {
	margin: 0 0 10px;
	font-size: 0.92em;
	line-height: 1.4;
	color: #555;
}

.stk-kurs-card-termin {
	margin: 0;
	font-size: 0.9em;
	color: #6a7a7c;
}

.stk-kurse-empty {
	opacity: 0.7;
}

/* ---------------------------------------------------------------------
   Detailseite
--------------------------------------------------------------------- */
.stk-single-kurs {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	grid-template-areas:
		"content sidebar"
		"form    sidebar";
	gap: 48px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 40px 20px 80px;
	align-items: start;
}

.stk-kurs-content {
	grid-area: content;
}

.stk-kurs-sidebar {
	grid-area: sidebar;
}

.stk-kurs-form {
	grid-area: form;
}

/* Ab hier (Tablet/Mobile): 1 Spalte, Reihenfolge Inhalt -> Sidebar
   (Termine/Ansprechpartner) -> Formular. Die Sidebar "springt" damit
   vor das Anmeldeformular, statt danach zu stehen. */
@media (max-width: 900px) {
	.stk-single-kurs {
		grid-template-columns: 1fr;
		grid-template-areas:
			"content"
			"sidebar"
			"form";
	}
}

.stk-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.85em;
	color: #4a4a4a;
	margin-bottom: 8px;
}

.stk-kurs-title {
	margin-top: 0;
	line-height: 1.15;
}

.stk-kurs-intro {
	font-size: 1.05em;
	margin-bottom: 32px;
}

.stk-kurs-details {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 32px;
}

.stk-kurs-details th,
.stk-kurs-details td {
	text-align: left;
	vertical-align: top;
	padding: 14px 12px;
	border-bottom: 1px solid #e2e2e2;
}

.stk-kurs-details th {
	width: 180px;
	color: var(--stk-color-table-label, #7a8a3a);
	font-weight: 600;
	white-space: nowrap;
}

/* Accordion */
.stk-accordion-item {
	border-bottom: 1px solid #e2e2e2;
}

.stk-accordion-toggle {
	width: 100%;
	text-align: left;
	background: none;
	border: none;
	cursor: pointer;
	padding: 14px 4px;
	font-weight: 600;
	font-size: 1em;
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--stk-color-accordion-title, #222222);
}

/* Kein Hover-Effekt auf dem Titel/Button selbst */
.stk-accordion-toggle:hover {
	background: none;
	color: var(--stk-color-accordion-title, #222222);
}

.stk-accordion-icon {
	position: relative;
	display: inline-flex;
	width: 20px;
	height: 20px;
	border-radius: 4px;
	background: var(--stk-color-accordion, #7cb342);
	flex: none;
	transition: filter 0.15s ease, transform 0.15s ease;
}

/* Plus/Minus als exakt zentrierte Balken statt Text-Zeichen (verhindert
   unsauberes Vertical-Alignment durch Schrift-Rendering). */
.stk-accordion-icon::before,
.stk-accordion-icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background: #fff;
	transform: translate(-50%, -50%);
}

.stk-accordion-icon::before {
	width: 10px;
	height: 2px;
}

.stk-accordion-icon::after {
	width: 2px;
	height: 10px;
}

.stk-accordion-item.is-open .stk-accordion-icon::after {
	display: none; /* aus "+" wird "-", wenn geöffnet */
}

/* Hover-Effekt NUR auf dem Plus-Symbol, nicht auf dem Titeltext */
.stk-accordion-toggle:hover .stk-accordion-icon {
	filter: brightness(0.85);
	transform: scale(1.08);
}

.stk-accordion-item.is-open .stk-accordion-icon {
	filter: brightness(0.85);
}

.stk-accordion-panel {
	display: none;
	padding: 0 4px 18px 34px;
}

.stk-accordion-item.is-open .stk-accordion-panel {
	display: block;
}

/* Sidebar */
.stk-kurs-sidebar {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.stk-box {
	background: #f6f7f2;
	border-radius: 8px;
	padding: 24px;
}

.stk-box h3,
.stk-box h4 {
	margin-top: 0;
	text-align: center;
}

.stk-box-termine {
	background: var(--stk-color-terminbox-bg, #f6f7f2);
}

.stk-box-termine p {
	text-align: center;
	margin: 4px 0;
}

.stk-termin-entry {
	padding: 10px 0;
	border-top: 1px solid #dcdfd6;
}

.stk-termin-entry:first-child {
	border-top: none;
	padding-top: 0;
}

.stk-box-datum {
	margin-top: 2px !important;
}

.stk-box-preis {
	padding-top: 8px;
	border-top: 1px solid #dcdfd6;
	margin-top: 8px !important;
}

.stk-btn {
	display: block;
	text-align: center;
	background: var(--stk-color-terminbox-button, #7cb342);
	color: #fff !important;
	text-decoration: none;
	padding: 12px 16px;
	border-radius: 4px;
	font-weight: 600;
	margin-top: 16px;
}

.stk-btn:hover {
	filter: brightness(0.9);
}

.stk-box-ansprechpartner {
	text-align: center;
}

.stk-ansprechpartner-foto img {
	border-radius: 50%;
	width: 90px;
	height: 90px;
	object-fit: cover;
	margin: 0 auto 12px;
	display: block;
}

.stk-box-ansprechpartner p {
	margin: 4px 0;
}

/* ---------------------------------------------------------------------
   CF7-Formular: Input-Textfelder (Hintergrund/Rand/Text konfigurierbar
   über Kurse -> Farben)
--------------------------------------------------------------------- */
.stk-cf7-form input[type="text"],
.stk-cf7-form input[type="email"],
.stk-cf7-form input[type="tel"],
.stk-cf7-form input[type="date"],
.stk-cf7-form textarea {
	background: var(--stk-color-input-bg, #ffffff);
	border: 1px solid var(--stk-color-input-border, #c9cfc4);
	color: var(--stk-color-input-text, #333333);
	border-radius: 4px;
	padding: 10px 14px;
	width: 100%;
	font: inherit;
	margin-bottom: 8px !important;
	/* Kein :last-child-Reset hier: jedes CF7-Feld steckt in seiner
	   eigenen <span class="wpcf7-form-control-wrap">, ist darin also
	   IMMER "letztes Kind" – ein :last-child-Selektor auf dem Input
	   selbst würde die Regel dadurch für praktisch jedes Feld wieder
	   aufheben. Der minimale Rand am Block-Ende fällt daher bewusst
	   nicht weiter ins Gewicht. */
}

.stk-cf7-form textarea {
	min-height: 120px;
}

/* Eigenes Label-Element statt Verlass auf <br> – echtes Block-Element
   mit direkt steuerbarem Abstand zum Feld, unabhängig davon, was CF7
   selbst noch an Markup (z. B. .wpcf7-form-control-wrap) drumherum baut. */
.stk-cf7-form .stk-field-label,
.stk-cf7-form .stk-field-hint {
	display: block !important;
	margin: 0 0 6px !important;
	line-height: 1.3 !important;
}

.stk-cf7-form .stk-field-hint {
	font-size: 0.9em;
	color: var(--stk-color-input-text, #555555);
	opacity: 0.8;
}

/* Sicherheitsnetz: falls CF7 nach dem Label trotzdem automatisch ein
   <br> einfügt (Zeilenumbrüche im Formularinhalt werden von CF7
   selbst in <br> umgewandelt), dieses zusätzliche <br> ausblenden –
   sonst summiert sich Label-Margin + <br>-Zeilenhöhe zu einem zu
   großen Abstand. */
.stk-cf7-form .stk-field-label + br,
.stk-cf7-form .stk-field-hint + br {
	display: none !important;
}

/* ---------------------------------------------------------------------
   Schickere Radiobuttons (Anrede + Termin-Auswahl)
   Nutzt die native CF7-Markup-Struktur:
   <span class="wpcf7-list-item"><label><input><span class="wpcf7-list-item-label">
--------------------------------------------------------------------- */
.stk-cf7-form .wpcf7-list-item {
	margin: 0 16px 8px 0;
}

.stk-cf7-form .wpcf7-list-item label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	position: relative;
}

.stk-cf7-form .wpcf7-list-item input[type="radio"],
.stk-cf7-form .wpcf7-list-item input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.stk-cf7-form .wpcf7-list-item-label {
	position: relative;
	padding-left: 28px;
	line-height: 20px;
}

/* Radiobuttons: Kreis, gefüllt bei Auswahl (Anrede + Termin-Auswahl) */
.stk-cf7-form .wpcf7-list-item input[type="radio"] + .wpcf7-list-item-label::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 18px;
	height: 18px;
	border: 2px solid var(--stk-color-input-border, #c9cfc4);
	border-radius: 50%;
	background: var(--stk-color-input-bg, #fff);
	box-sizing: border-box;
}

.stk-cf7-form .wpcf7-list-item input[type="radio"]:checked + .wpcf7-list-item-label::before {
	border-color: var(--stk-color-accordion, #7cb342);
	box-shadow: inset 0 0 0 4px var(--stk-color-input-bg, #fff), inset 0 0 0 100px var(--stk-color-accordion, #7cb342);
}

/* Checkboxen: Quadrat mit Häkchen bei Auswahl (Zusatzfragen) */
.stk-cf7-form .wpcf7-list-item input[type="checkbox"] + .wpcf7-list-item-label::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 18px;
	height: 18px;
	border: 2px solid var(--stk-color-input-border, #c9cfc4);
	border-radius: 4px;
	background: var(--stk-color-input-bg, #fff);
	box-sizing: border-box;
}

.stk-cf7-form .wpcf7-list-item input[type="checkbox"]:checked + .wpcf7-list-item-label::before {
	border-color: var(--stk-color-accordion, #7cb342);
	background-color: var(--stk-color-accordion, #7cb342);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 8.5l3 3 7-7'/></svg>");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 12px 12px;
}

/* Termin-Auswahl als eigene "Karten" statt schmaler Inline-Liste */
.stk-termin-wrap {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 4px;
}

.stk-termin-wrap .stk-radio-item {
	margin: 0;
}

.stk-termin-wrap .stk-radio-item label {
	display: flex;
	width: 100%;
	border: 1px solid var(--stk-color-input-border, #c9cfc4);
	border-radius: 6px;
	padding: 12px 16px;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.stk-termin-wrap .stk-radio-item label:has(input:checked) {
	border-color: var(--stk-color-accordion, #7cb342);
	background: color-mix(in srgb, var(--stk-color-accordion, #7cb342) 8%, transparent);
}

/* ---------------------------------------------------------------------
   Eigenes, schlankes Dropdown statt nativer <select> (siehe frontend.js)
--------------------------------------------------------------------- */
.stk-select {
	position: relative;
}

.stk-select-native {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	width: 1px;
	height: 1px;
}

.stk-select-trigger {
	width: 100%;
	text-align: left;
	background: var(--stk-color-input-bg, #ffffff);
	border: 1px solid var(--stk-color-input-border, #c9cfc4);
	color: var(--stk-color-input-text, #333333);
	padding: 10px 32px 10px 14px;
	border-radius: 4px;
	cursor: pointer;
	position: relative;
	font: inherit;
}

.stk-select-trigger::after {
	content: "▾";
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	opacity: 0.6;
}

.stk-select-list {
	display: none;
	position: absolute;
	z-index: 20;
	left: 0;
	right: 0;
	top: calc(100% + 4px);
	margin: 0;
	padding: 4px 0;
	list-style: none;
	background: var(--stk-color-input-bg, #ffffff);
	border: 1px solid var(--stk-color-input-border, #c9cfc4);
	border-radius: 4px;
	max-height: 220px;
	overflow-y: auto;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.stk-select.is-open .stk-select-list {
	display: block;
}

.stk-select-list li {
	padding: 8px 14px;
	cursor: pointer;
	color: var(--stk-color-input-text, #333333);
}

.stk-select-list li:hover,
.stk-select-list li.is-selected {
	background: color-mix(in srgb, var(--stk-color-accordion, #7cb342) 12%, transparent);
}

/* ---------------------------------------------------------------------
   Datei-Upload-Block + Zusatzfragen nur anzeigen, wenn im Kurs aktiviert
   (siehe templates/single-kurs.php: data-datei-upload / data-frage-* )
--------------------------------------------------------------------- */
.stk-cf7-form[data-datei-upload="0"] .stk-datei-upload-block,
.stk-cf7-form[data-frage-1223="0"] .stk-frage-1223-block,
.stk-cf7-form[data-frage-zuep="0"] .stk-frage-zuep-block,
.stk-cf7-form[data-frage-zuep-datum="0"] .stk-frage-zuep-datum-block {
	display: none;
}

.stk-datei-upload-block input[type="file"] {
	display: block;
	margin-bottom: 8px;
}

/* Preis-Hinweis über dem Absenden-Button (nur sichtbar, wenn befüllt) */
.stk-preis-hinweis-wrap:empty {
	display: none;
}

.stk-preis-hinweis {
	display: block;
	margin-bottom: 8px;
	font-weight: 600;
}

.stk-spamschutz-block input[type="text"] {
	max-width: 220px;
}

.stk-submit {
	background: var(--stk-color-terminbox-button, #7cb342);
	color: #fff;
	border: none;
	border-radius: 4px;
	padding: 12px 24px;
	font-weight: 600;
	cursor: pointer;
	font: inherit;
}

.stk-submit:hover {
	filter: brightness(0.9);
}

.stk-submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	filter: none;
}

/* Preloader neben dem Absenden-Button, rein per CSS (kein Bild nötig).
   Standardmäßig unsichtbar, wird per JS mit .is-active eingeblendet. */
.stk-preloader {
	display: none;
	width: 20px;
	height: 20px;
	margin-left: 12px;
	vertical-align: middle;
	border: 3px solid rgba(0, 0, 0, 0.15);
	border-top-color: var(--stk-color-terminbox-button, #7cb342);
	border-radius: 50%;
	animation: stk-spin 0.8s linear infinite;
}

.stk-preloader.is-active {
	display: inline-block;
}

@keyframes stk-spin {
	to {
		transform: rotate(360deg);
	}
}