/* Backrausch Kurstermine
   Dunkel ist Standard (Kruste). In einer .br--flour-Sektion oder mit ton="hell" wird es hell (Mehl).
   Farben kommen aus den br-Tokens des Child-Themes, mit Rückfallwerten, falls das Theme fehlt. */
.bk-kt {
	--bk-akzent: var(--br-glut-500, #e1531c);
	--bk-akzent-hover: var(--br-glut-400, #f26b2a);
	--bk-akzent-text: var(--br-glut-300, #fb9244);
	--bk-auf-akzent: var(--br-on-accent, #2a1810);
	--bk-flaeche: var(--br-malt-850, #5f3f21);
	--bk-flaeche-2: var(--br-malt-800, #6b4827);
	--bk-text: var(--br-text-body, #f0e4cf);
	--bk-text-stark: var(--br-text-strong, #f7eedd);
	--bk-text-leise: var(--br-text-muted, #d8c09c);
	--bk-linie: rgba(231, 193, 114, .18);
	--bk-ok: #c9d483;
	--bk-warn: #f3c25f;
	--bk-gefahr: #f0a090;
	--bk-radius: var(--br-radius-lg, 16px);
	color: var(--bk-text);
	font-family: var(--br-font-body, 'Hanken Grotesk', system-ui, -apple-system, sans-serif);
	line-height: 1.55;
	white-space: normal;
	margin: 0 0 1.5em;
}
.br--flour .bk-kt,
.bk-kt.bk-kt--hell {
	--bk-akzent-text: var(--br-glut-600, #c23f14);
	--bk-flaeche: #fff;
	--bk-flaeche-2: var(--br-mehl-100, #f0e4cf);
	--bk-text: var(--br-crust-700, #5a3318);
	--bk-text-stark: var(--br-text-on-flour-strong, #2a1810);
	--bk-text-leise: var(--br-crust-500, #8a4e22);
	--bk-linie: var(--br-rahm-200, #e6d4b8);
	--bk-ok: #5f6b25;
	--bk-warn: #8a5a08;
	--bk-gefahr: #9a2f22;
}
.bk-kt.bk-kt--dunkel {
	--bk-akzent-text: var(--br-glut-300, #fb9244);
	--bk-flaeche: var(--br-malt-850, #5f3f21);
	--bk-flaeche-2: var(--br-malt-800, #6b4827);
	--bk-text: var(--br-text-body, #f0e4cf);
	--bk-text-stark: var(--br-text-strong, #f7eedd);
	--bk-text-leise: var(--br-text-muted, #d8c09c);
	--bk-linie: rgba(231, 193, 114, .18);
	--bk-ok: #c9d483;
	--bk-warn: #f3c25f;
	--bk-gefahr: #f0a090;
}
.bk-kt .bk-kt-nowrap { white-space: nowrap; }
.bk-kt .bk-kt-termin__kurs { display: block; font-size: .7em; font-weight: 600; color: var(--bk-akzent-text); letter-spacing: .02em; margin-bottom: .15em; }
/* Schrift erzwingen, auch wenn Divi (Code-Modul, pre, code) eine Monospace-Schrift vererbt */
html body .bk-kt,
html body .bk-kt * {
	font-family: var(--br-font-body, 'Hanken Grotesk', system-ui, -apple-system, sans-serif) !important;
	letter-spacing: normal;
}
html body pre .bk-kt, html body code .bk-kt { white-space: normal !important; background: none; padding: 0; border: 0; }
.bk-kt *, .bk-kt *::before, .bk-kt *::after { box-sizing: border-box; }
.bk-kt ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.bk-kt li { list-style: none !important; padding: 0; margin-left: 0 !important; }
.bk-kt li::before, .bk-kt li::marker { content: none; }

/* Badge (wie br-badge: Grossbuchstaben, weites Tracking) */
.bk-kt .bk-kt-badge {
	display: inline-block;
	font-size: .69rem;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: .08em !important;
	text-transform: uppercase;
	padding: .35em .75em;
	border-radius: var(--br-radius-sm, 6px);
	background: color-mix(in srgb, var(--bk-ok) 18%, transparent);
	color: var(--bk-ok);
	white-space: nowrap;
}
.bk-kt-status-wenige .bk-kt-badge { background: color-mix(in srgb, var(--bk-warn) 18%, transparent); color: var(--bk-warn); }
.bk-kt-status-ausgebucht .bk-kt-badge,
.bk-kt-status-abgesagt .bk-kt-badge { background: color-mix(in srgb, var(--bk-gefahr) 18%, transparent); color: var(--bk-gefahr); }

/* Terminbox (Kursseite) */
.bk-kt-box { display: grid; gap: 1em; }
.bk-kt-termin {
	border: 1px solid var(--bk-linie);
	border-radius: var(--bk-radius);
	padding: 1.25em 1.5em;
	background: var(--bk-flaeche);
}
.bk-kt-termin__kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5em 1em; margin-bottom: .7em; }
.bk-kt .bk-kt-termin__datum {
	font-family: var(--br-font-display, system-ui, -apple-system, sans-serif) !important;
	font-size: 1.3em; font-weight: 700; margin: 0; padding: 0; color: var(--bk-text-stark); line-height: 1.2;
}
.bk-kt-termin__meta li { margin: .2em 0; }
.bk-kt-label { display: inline-block; min-width: 5.5em; color: var(--bk-text-leise); font-size: .9em; }
.bk-kt .bk-kt-termin__hinweis { margin: .7em 0 0; padding: 0; font-style: italic; color: var(--bk-text-leise); }
.bk-kt-termin__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: .75em 1.4em; margin-top: 1.1em; }
.bk-kt a.bk-kt-btn {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	background: var(--bk-akzent);
	color: var(--bk-auf-akzent) !important;
	font-weight: 600;
	letter-spacing: .04em !important;
	padding: .7em 1.6em;
	border-radius: var(--br-radius-pill, 999px);
	text-decoration: none;
	box-shadow: var(--br-glow-sm, 0 0 0 1px rgba(225,83,28,.35), 0 6px 22px rgba(225,83,28,.3));
	transition: background .22s, box-shadow .22s;
}
.bk-kt a.bk-kt-btn:hover { background: var(--bk-akzent-hover); box-shadow: var(--br-glow-md, 0 8px 36px rgba(225,83,28,.42)); }
.bk-kt a.bk-kt-btn:focus-visible,
.bk-kt a:focus-visible { outline: 3px solid var(--bk-akzent-hover); outline-offset: 3px; }
.bk-kt a.bk-kt-ics { color: var(--bk-akzent-text); font-size: .95em; text-underline-offset: 3px; }
.bk-kt-status-abgesagt .bk-kt-termin__datum { text-decoration: line-through; }
.bk-kt-termin.bk-kt-status-abgesagt { opacity: .75; }
.bk-kt-termin.bk-kt-status-wenige { border-color: color-mix(in srgb, var(--bk-akzent) 50%, transparent); }

/* Liste (Übersicht, Kategorien) */
.bk-kt .bk-kt-liste__monat {
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .18em !important;
	text-transform: uppercase;
	color: var(--bk-akzent-text);
	margin: 1.6em 0 .4em;
	padding: 0 0 .4em;
	border-bottom: 1px solid var(--bk-linie);
}
.bk-kt .bk-kt-liste__monat:first-child { margin-top: 0; }
.bk-kt-liste { container-type: inline-size; }
.bk-kt-zeile {
	display: grid;
	grid-template-columns: 13em minmax(0, 1fr) auto auto auto;
	gap: .25em 1.25em;
	align-items: center;
	padding: .75em 0;
	border-bottom: 1px solid var(--bk-linie);
}
.bk-kt-zeile__datum { font-weight: 600; white-space: nowrap; color: var(--bk-text-stark); }
.bk-kt-zeile__titel { overflow-wrap: anywhere; }
.bk-kt-zeile__titel a { color: var(--bk-text-stark); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--bk-akzent); }
.bk-kt-zeile__titel a:hover { color: var(--bk-akzent-text); }
.bk-kt-zeile__zeit, .bk-kt-zeile__preis { color: var(--bk-text-leise); white-space: nowrap; font-size: .95em; }
.bk-kt-zeile__status { justify-self: end; }
.bk-kt-zeile.bk-kt-status-abgesagt .bk-kt-zeile__titel { text-decoration: line-through; }

/* Schmale Spalten: Datum + Status oben, Titel, dann Zeit und Preis */
@container (max-width: 720px) {
	.bk-kt-zeile { grid-template-columns: auto 1fr; gap: .2em .9em; padding: .9em 0; }
	.bk-kt-zeile__datum { grid-column: 1; grid-row: 1; }
	.bk-kt-zeile__status { grid-column: 2; grid-row: 1; }
	.bk-kt-zeile__titel { grid-column: 1 / -1; grid-row: 2; }
	.bk-kt-zeile__zeit { grid-column: 1; grid-row: 3; }
	.bk-kt-zeile__preis { grid-column: 2; grid-row: 3; justify-self: end; }
}

/* Karten (Startseite) */
.bk-kt-naechste { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1em; }
.bk-kt-karte {
	display: flex;
	gap: 1em;
	align-items: flex-start;
	border: 1px solid var(--bk-linie);
	border-radius: var(--bk-radius);
	padding: 1.1em;
	background: var(--bk-flaeche);
}
.bk-kt-karte__datum {
	flex: 0 0 auto;
	width: 3.8em;
	text-align: center;
	border-radius: var(--br-radius-md, 10px);
	background: var(--bk-akzent);
	color: var(--bk-auf-akzent);
	padding: .45em 0;
	line-height: 1.1;
}
.bk-kt .bk-kt-karte__tag { display: block; font-size: 1.55em; font-weight: 800; }
.bk-kt .bk-kt-karte__monat { display: block; font-size: .75em; font-weight: 700; text-transform: uppercase; letter-spacing: .08em !important; }
.bk-kt .bk-kt-karte__titel { font-size: 1.1em; margin: 0 0 .25em; padding: 0; line-height: 1.3; color: var(--bk-text-stark); }
.bk-kt .bk-kt-karte__titel a { color: inherit; text-decoration: none; }
.bk-kt .bk-kt-karte__titel a:hover { color: var(--bk-akzent-text); }
.bk-kt .bk-kt-karte__meta { margin: 0 0 .4em; padding: 0; font-size: .9em; color: var(--bk-text-leise); }

/* Leer und Fehler */
.bk-kt-leer { border: 1px dashed var(--bk-linie); border-radius: var(--bk-radius); padding: 1.1em 1.4em; background: var(--bk-flaeche); }
.bk-kt-leer p { margin: 0; padding: 0; }
.bk-kt .bk-kt-leer__kontakt { margin-top: .5em; }
.bk-kt-leer__kontakt a { color: var(--bk-akzent-text); }
.bk-kt-fehler { border: 2px solid #b23a2a; background: #fff5f5; color: #5c1010; border-radius: 8px; padding: .8em 1em; margin: 0 0 1em; font-size: .9em; }
.bk-kt-fehler ul { list-style: disc; margin: .4em 0 0 1.2em; padding: 0; }
.bk-kt .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Formular */
.bk-kt-form {
	border: 1px solid var(--bk-linie);
	border-radius: var(--bk-radius);
	padding: 1.5em;
	background: var(--bk-flaeche);
	scroll-margin-top: 120px;
}
.bk-kt .bk-kt-form__titel {
	font-family: var(--br-font-display, system-ui, -apple-system, sans-serif) !important;
	font-size: 1.4em; font-weight: 700; color: var(--bk-text-stark); margin: 0 0 .8em; padding: 0; line-height: 1.2;
}
.bk-kt-form__form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.25em; }
.bk-kt .bk-kt-feld { margin: 0 0 1em; padding: 0; grid-column: 1 / -1; border: 0; min-width: 0; }
.bk-kt .bk-kt-feld--klein { grid-column: auto; }
.bk-kt-feld > label, .bk-kt-feld legend { display: block; font-size: .9em; font-weight: 600; color: var(--bk-text-stark); margin: 0 0 .35em; padding: 0; }
.bk-kt input[type="text"], .bk-kt input[type="email"], .bk-kt input[type="tel"], .bk-kt select, .bk-kt textarea {
	width: 100%;
	min-height: 44px;
	padding: .6em .8em;
	font-size: 1rem;
	color: var(--bk-text-stark);
	background: var(--bk-flaeche-2);
	border: 1px solid var(--bk-linie);
	border-radius: var(--br-radius-md, 10px);
	box-shadow: none;
}
.bk-kt textarea { min-height: 7em; resize: vertical; }
.bk-kt input:focus-visible, .bk-kt select:focus-visible, .bk-kt textarea:focus-visible { outline: 3px solid var(--bk-akzent-hover); outline-offset: 1px; border-color: var(--bk-akzent); }
.bk-kt label.bk-kt-wahl { display: flex; gap: .6em; align-items: flex-start; font-weight: 400; color: var(--bk-text); margin: .3em 0; font-size: .95em; }
.bk-kt label.bk-kt-wahl input { margin-top: .25em; accent-color: var(--bk-akzent); width: 1.1em; height: 1.1em; flex: 0 0 auto; }
.bk-kt label.bk-kt-wahl a { color: var(--bk-akzent-text); }
.bk-kt button.bk-kt-btn {
	display: inline-flex; align-items: center; min-height: 44px; cursor: pointer;
	background: var(--bk-akzent); color: var(--bk-auf-akzent); border: 0;
	font-size: 1rem; font-weight: 600; letter-spacing: .04em !important;
	padding: .7em 1.8em; border-radius: var(--br-radius-pill, 999px);
	box-shadow: var(--br-glow-sm, 0 0 0 1px rgba(225,83,28,.35), 0 6px 22px rgba(225,83,28,.3));
}
.bk-kt button.bk-kt-btn:hover { background: var(--bk-akzent-hover); }
.bk-kt button.bk-kt-btn:focus-visible { outline: 3px solid var(--bk-akzent-hover); outline-offset: 3px; }
.bk-kt .bk-kt-form__hinweis { grid-column: 1 / -1; margin: 0 0 1em; color: var(--bk-text-leise); }
.bk-kt-form__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bk-kt-form__fehler { border: 1px solid var(--bk-gefahr); border-radius: var(--br-radius-md, 10px); padding: .7em 1em; margin: 0 0 1em; color: var(--bk-gefahr); }
.bk-kt-form__fehler p, .bk-kt-form__danke p { margin: 0 0 .4em; padding: 0; }
.bk-kt-form__danke p:last-child { margin-bottom: 0; }
@container (max-width: 520px) { .bk-kt .bk-kt-feld--klein { grid-column: 1 / -1; } }
.bk-kt-form { container-type: inline-size; }

@media (prefers-reduced-motion: reduce) {
	.bk-kt a.bk-kt-btn { transition: none; }
}

/* 1.0.2 (21.10.2026): Kontrast in Formularen. Divi setzt fuer select, option und Platzhalter eigene, dunkle
   Farben; auf dem Malz-Braun waren «Bitte wählen», die Termine in der Auswahlliste und die Platzhalter kaum
   lesbar. Darum hier mit !important auf die Plugin-Tokens. Gilt hell und dunkel. */
.bk-kt select,
.bk-kt select option,
.bk-kt select optgroup {
	color: var(--bk-text-stark) !important;
	background-color: var(--bk-flaeche-2) !important;
	opacity: 1 !important;
}
.bk-kt select option[value=""] { color: var(--bk-text-leise) !important; }
.bk-kt input::placeholder,
.bk-kt textarea::placeholder {
	color: var(--bk-text-leise) !important;
	opacity: 1 !important;
}
.bk-kt input[type="text"], .bk-kt input[type="email"], .bk-kt input[type="tel"], .bk-kt textarea {
	color: var(--bk-text-stark) !important;
	-webkit-text-fill-color: var(--bk-text-stark);
}