/**
 * BSZ Training Calendar – gemeinsames Stylesheet.
 * Optik angelehnt an die BSZ-Kalkulatoren (Teal/Gold, Karten).
 * Farben als CSS-Variablen – bei Bedarf zentral anpassen.
 */

:root {
	--bsz-teal: #2b6777;
	--bsz-teal-dark: #235663;
	--bsz-gold: #8a6a1f;
	--bsz-gold-dark: #6f551a;
	--bsz-card-bg: #ffffff;
	--bsz-card-border: #e4e4e4;
	--bsz-cream: #f7f3e8;
	--bsz-text: #333333;
	--bsz-muted: #6b6b6b;
	--bsz-radius: 12px;
	--bsz-radius-sm: 8px;
	--bsz-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}

.bsz-tc-card {
	background: var(--bsz-card-bg);
	border: 1px solid var(--bsz-card-border);
	border-radius: var(--bsz-radius);
	box-shadow: var(--bsz-shadow);
	padding: 1.5em 1.75em;
	margin-bottom: 1.5em;
}

/* ===== TEIL 2 – KALENDER ===== */
.bsz-training-calendar-form .btc-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25em 2em; }
@media (max-width: 640px) { .bsz-training-calendar-form .btc-form-grid { grid-template-columns: 1fr; } }
.bsz-training-calendar-form .btc-row { display: flex; flex-direction: column; margin-bottom: 1em; }
.bsz-training-calendar-form label { font-size: .9em; font-weight: 600; color: var(--bsz-teal); margin-bottom: .4em; }
.bsz-training-calendar-form .btc-select,
.bsz-training-calendar-form .btc-input {
	width: 100%; padding: .7em .9em; border: 1px solid var(--bsz-card-border);
	border-radius: var(--bsz-radius-sm); font-size: 1em; background: #fff; color: var(--bsz-text); box-sizing: border-box;
}
.bsz-training-calendar-form .btc-select:focus,
.bsz-training-calendar-form .btc-input:focus { outline: none; border-color: var(--bsz-teal); box-shadow: 0 0 0 2px rgba(43, 103, 119, .15); }
.bsz-training-calendar-form .btc-submit,
.bsz-tc-search-submit {
	display: inline-block; width: 100%; margin-top: .5em; padding: .85em 1.5em;
	background: var(--bsz-gold); color: #fff; border: none; border-radius: var(--bsz-radius-sm);
	font-size: 1.05em; font-weight: 700; cursor: pointer; transition: background .15s ease;
}
.bsz-training-calendar-form .btc-submit:hover,
.bsz-tc-search-submit:hover { background: var(--bsz-gold-dark); }

.btc-calendar-wrapper { background: var(--bsz-card-bg); border: 1px solid var(--bsz-card-border); border-radius: var(--bsz-radius); box-shadow: var(--bsz-shadow); padding: 1.25em; overflow-x: auto; }
.btc-month-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1em; }
.btc-month-title { font-size: 1.2em; font-weight: 700; color: var(--bsz-teal); }
.btc-nav-prev, .btc-nav-next {
	display: inline-flex; align-items: center; justify-content: center; width: 2.2em; height: 2.2em;
	border-radius: 50%; background: var(--bsz-cream); color: var(--bsz-gold); text-decoration: none; font-size: 1.1em;
	transition: background .15s ease, color .15s ease;
}
.btc-nav-prev:hover, .btc-nav-next:hover { background: var(--bsz-gold); color: #fff; }

table.btc-calendar { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 640px; }
table.btc-calendar th { background: var(--bsz-teal); color: #fff; font-weight: 600; font-size: .82em; padding: .6em .3em; text-align: center; border: 1px solid var(--bsz-teal); }
table.btc-calendar td { border: 1px solid var(--bsz-card-border); vertical-align: top; height: 92px; padding: .35em; font-size: .82em; }
.btc-calendar-day-number { display: block; font-weight: 700; color: var(--bsz-muted); margin-bottom: .25em; }
ul.btc-event-list { list-style: none; margin: 0; padding: 0; }
ul.btc-event-list li { margin-bottom: .3em; line-height: 1.3; }
ul.btc-event-list a { color: var(--bsz-gold); text-decoration: none; }
ul.btc-event-list a:hover { text-decoration: underline; }

/* Wochenend-Spalten (Sa/So) schmal. table-layout:fixed → 5 breite + 2 schmale Spalten. */
table.btc-calendar th:nth-child(6), table.btc-calendar td:nth-child(6),
table.btc-calendar th:nth-child(7), table.btc-calendar td:nth-child(7) { width: 5.5%; }
table.btc-calendar td:nth-child(6), table.btc-calendar td:nth-child(7) { background: #fbfbfa; }

/* Individuelle Ausbildung: dezente feste Info-Zeile (jeden Tag). */
ul.btc-event-list.btc-individuell li { margin-top: .2em; }
ul.btc-event-list.btc-individuell a { color: var(--bsz-muted); font-size: .92em; font-style: italic; }
ul.btc-event-list.btc-individuell a:hover { color: var(--bsz-gold); }

.btc-theorie-info { background: none; border: none; padding: 0; cursor: pointer; color: var(--bsz-teal); text-decoration: underline; font: inherit; text-align: left; line-height: inherit; }
.btc-theorie-info:hover { color: var(--bsz-teal-dark); }
#btc-theorie-modal { position: fixed; inset: 0; background: rgba(0, 0, 0, .55); z-index: 99999; display: none; align-items: center; justify-content: center; }
#btc-theorie-modal.btc-open { display: flex; }
#btc-theorie-modal-inner { background: #fff; padding: 1.5em 2em; border-radius: var(--bsz-radius-sm); max-width: 400px; width: 90%; box-shadow: 0 4px 24px rgba(0, 0, 0, .2); }
#btc-theorie-modal-inner p { margin: 0 0 1.2em; line-height: 1.6; }
#btc-theorie-modal-close { background: var(--bsz-gold); color: #fff; border: none; padding: .55em 1.6em; border-radius: var(--bsz-radius-sm); cursor: pointer; font-size: 1em; }
#btc-theorie-modal-close:hover { background: var(--bsz-gold-dark); }

/* ===== TEIL 3 – SCHNELLSUCHE ===== */
.bsz-tc-search-heading { margin: 0 0 1em; color: var(--bsz-teal); font-size: 1.25em; font-weight: 700; }

/* Zwei Feldgruppen nebeneinander: „Wunschtermin + Zeitraum" und „Postleitzahl + Umkreis". */
.bsz-tc-search-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1em 1.5em; margin-bottom: 1em; }
@media (max-width: 560px) { .bsz-tc-search-fields { grid-template-columns: 1fr; } }

/* Jede Gruppe: kleines Feld (1/3) links, großes Feld (2/3) rechts, je mit eigener Überschrift.
   align-items: stretch → alle Überschriften auf gleicher Höhe (oben). */
.bsz-tc-field-group { display: grid; grid-template-columns: 1fr 2fr; gap: .75em; align-items: stretch; }

.bsz-tc-field { display: flex; flex-direction: column; min-width: 0; }
.bsz-tc-field label { font-size: .9em; font-weight: 600; color: var(--bsz-teal); margin-bottom: .4em; }
.bsz-tc-input { width: 100%; padding: .7em .9em; border: 1px solid var(--bsz-card-border); border-radius: var(--bsz-radius-sm); font-size: 1em; background: #fff; color: var(--bsz-text); box-sizing: border-box; }
.bsz-tc-input:focus { outline: none; border-color: var(--bsz-teal); box-shadow: 0 0 0 2px rgba(43, 103, 119, .15); }

/* Zeitraum-Auswahl füllt die 2/3-Spalte. */
.bsz-tc-subselect, .bsz-tc-subnum {
	width: 100%; padding: .7em .6em; border: 1px solid var(--bsz-card-border);
	border-radius: var(--bsz-radius-sm); font-size: .95em; background: #fff; color: var(--bsz-text);
	box-sizing: border-box;
}
.bsz-tc-subnum { text-align: right; }
.bsz-tc-subselect:focus, .bsz-tc-subnum:focus { outline: none; border-color: var(--bsz-teal); box-shadow: 0 0 0 2px rgba(43, 103, 119, .15); }
.bsz-tc-unit { flex: 0 0 auto; color: var(--bsz-muted); font-size: .9em; }

/* Umkreis als horizontaler Schieberegler mit Live-Wert – füllt die 2/3-Spalte.
   flex: 1 → füllt die Höhe unter der Überschrift, Slider vertikal mittig zum Nachbarfeld. */
.bsz-tc-range-wrap { flex: 1 1 auto; display: flex; align-items: center; gap: .6em; }
.bsz-tc-range { flex: 1 1 auto; width: auto; min-width: 0; accent-color: var(--bsz-teal); cursor: pointer; }
.bsz-tc-range-val { flex: 0 0 auto; min-width: 3.8em; text-align: right; color: var(--bsz-text); font-weight: 600; font-size: .9em; }

/* Ergebnisliste als Karte – bündig zum Suchformular (oben/unten ausgerichtet). */
.bsz-tc-search-results { margin-top: 1.25em; background: var(--bsz-card-bg); border: 1px solid var(--bsz-card-border); border-radius: var(--bsz-radius); box-shadow: var(--bsz-shadow); padding: 1.25em 1.5em; }
.bsz-tc-search-count { font-size: .9em; color: var(--bsz-muted); margin: 0 0 .6em; }
.bsz-tc-search-notice { background: var(--bsz-cream); border: 1px solid var(--bsz-card-border); border-radius: var(--bsz-radius-sm); padding: 1em 1.2em; color: var(--bsz-text); margin: 0; }

/* Tabelle innerhalb der Karte ohne eigenen Außenrahmen (kein Doppelrahmen). */
table.bsz-tc-search-table { width: 100%; border-collapse: collapse; background: #fff; border: 0; border-radius: 0; overflow: hidden; }
table.bsz-tc-search-table th { background: var(--bsz-teal); color: #fff; font-weight: 600; font-size: .85em; text-align: left; padding: .7em .9em; }
table.bsz-tc-search-table td { padding: .7em .9em; border-top: 1px solid var(--bsz-card-border); font-size: .92em; vertical-align: top; }
.bsz-tc-search-row { cursor: pointer; transition: background .12s ease; }
.bsz-tc-search-row:hover { background: var(--bsz-cream); }
.bsz-tc-col-date { white-space: nowrap; font-weight: 600; color: var(--bsz-text); }
.bsz-tc-time { display: block; font-weight: 400; font-size: .85em; color: var(--bsz-muted); }
.bsz-tc-col-typ { color: var(--bsz-teal); font-weight: 600; white-space: nowrap; }
.bsz-tc-col-schulung a { color: var(--bsz-gold); text-decoration: none; font-weight: 600; }
.bsz-tc-col-schulung a:hover { text-decoration: underline; }
.bsz-tc-dist { color: var(--bsz-muted); font-size: .85em; white-space: nowrap; }

@media (max-width: 560px) {
	table.bsz-tc-search-table th, table.bsz-tc-search-table td { padding: .55em .5em; font-size: .85em; }
}