/* TC Platzbuchung – Frontend */

.tcb-app {
	max-width: 760px;
	margin: 0 auto;
	font-size: 16px;
	line-height: 1.5;
}

.tcb-notice {
	padding: 12px 16px;
	border-radius: 6px;
	margin: 0 0 16px;
	font-weight: 500;
}
.tcb-notice.tcb-ok { background: #e6f4ea; color: #1e4620; border: 1px solid #b7dfc0; }
.tcb-notice.tcb-error { background: #fce8e6; color: #611a15; border: 1px solid #f3b7b1; }

.tcb-info {
	padding: 12px 16px;
	background: #f2f4f6;
	border-radius: 6px;
}

.tcb-userbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin: 0 0 16px;
	padding: 8px 14px;
	background: #f2f4f6;
	border-radius: 6px;
	font-size: 15px;
}
.tcb-userbar .tcb-user { color: #444; }
.tcb-userbar .tcb-logout {
	color: #2f6f3e;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}
.tcb-userbar .tcb-logout:hover { text-decoration: underline; }

/* Reiter im Mitgliederbereich */
.tcb-tabs {
	display: flex;
	gap: 4px;
	margin: 0 0 16px;
	border-bottom: 2px solid #dfe3e6;
}
.tcb-tab {
	padding: 10px 18px;
	text-decoration: none;
	color: #444;
	font-weight: 600;
	border: 2px solid transparent;
	border-bottom: none;
	border-radius: 6px 6px 0 0;
	margin-bottom: -2px;
}
.tcb-tab:hover { background: #f2f4f6; }
.tcb-tab.is-active {
	color: #2f6f3e;
	border-color: #dfe3e6;
	border-bottom: 2px solid #fff;
	background: #fff;
}

.tcb-datebar {
	margin: 0 0 16px;
	display: flex;
	align-items: center;
	gap: 8px;
}
.tcb-datebar input[type="date"] {
	padding: 6px 10px;
	font-size: 16px;
}

/* Gitter */
.tcb-grid {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}
.tcb-grid caption {
	text-align: left;
	font-weight: 600;
	padding: 8px 0;
	text-transform: capitalize;
}
.tcb-grid th,
.tcb-grid td {
	border: 1px solid #dfe3e6;
	padding: 0;
	text-align: center;
}
.tcb-grid thead th {
	background: #2f6f3e;
	color: #fff;
	padding: 8px 4px;
	font-size: 14px;
}
.tcb-grid .tcb-time {
	background: #f2f4f6;
	font-weight: 600;
	width: 68px;
	font-size: 14px;
}
.tcb-cell {
	height: 44px;
	font-size: 13px;
}
.tcb-cell span { display: block; padding: 4px; }

.tcb-free { background: #eafaef; cursor: pointer; color: #2f6f3e; }
.tcb-free:hover,
.tcb-free:focus { background: #cdeed7; outline: 2px solid #2f6f3e; }
.tcb-busy { background: #f2f4f6; color: #7a838a; }
.tcb-mine { background: #dbeafe; color: #1e40af; font-weight: 600; }
.tcb-block { background: #fff3d6; color: #8a5a00; font-weight: 600; }
.tcb-past { background: #f7f8f9; }

/* Formular */
.tcb-form {
	margin: 20px 0 0;
	padding: 16px 20px;
	border: 1px solid #dfe3e6;
	border-radius: 8px;
	background: #fff;
}
.tcb-form h3 { margin-top: 0; }
.tcb-form label { display: block; font-weight: 600; margin-bottom: 4px; }
.tcb-form select,
.tcb-form input[type="text"],
.tcb-form input[type="email"],
.tcb-form textarea {
	width: 100%;
	max-width: 360px;
	padding: 8px 10px;
	font-size: 16px;
	box-sizing: border-box;
}
.tcb-form-slot { font-weight: 600; color: #2f6f3e; }

/* Mitspieler */
.tcb-players { margin: 8px 0 4px; }
.tcb-players-label { font-weight: 600; margin: 0 0 6px; }
.tcb-player-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
}
.tcb-player-no {
	min-width: 92px;
	color: #555;
	font-size: 14px;
}
.tcb-player-row .tcb-p-type { max-width: 150px; flex: 0 0 auto; }
.tcb-player-row .tcb-p-member,
.tcb-player-row .tcb-p-guest { flex: 1 1 200px; min-width: 180px; }

.tcb-btn {
	display: inline-block;
	background: #2f6f3e;
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 10px 18px;
	font-size: 15px;
	cursor: pointer;
}
.tcb-btn:hover { background: #285e35; }
.tcb-btn-ghost {
	background: transparent;
	color: #2f6f3e;
	border: 1px solid #2f6f3e;
}
.tcb-btn-ghost:hover { background: #eafaef; }

.tcb-form-actions { display: flex; gap: 10px; }
.tcb-form-msg { margin-top: 10px; font-weight: 500; }
.tcb-form-msg.tcb-error { color: #b32b21; }
.tcb-form-msg.tcb-ok { color: #1e4620; }

/* Meine Buchungen */
.tcb-mylist { list-style: none; margin: 0; padding: 0; }
.tcb-myitem {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid #e5e8ea;
}
.tcb-myitem:last-child { border-bottom: none; }
.tcb-myactions { display: flex; gap: 8px; flex-shrink: 0; }
.tcb-cal { text-decoration: none; }

@media (max-width: 560px) {
	.tcb-grid thead th, .tcb-cell { font-size: 12px; }
	.tcb-myitem { flex-direction: column; align-items: flex-start; }
}

/* Heimspiel-Teaser */
.tcb-matches {
	/* Nimmt die Breite, die der Container hergibt – in einer schmalen Spalte
	   ebenso wie in einer vollbreiten Zeile. */
	max-width: 100%;
	border: 1px solid #dfe3e6;
	border-radius: 10px;
	padding: 20px 24px;
	background: #fff;
}
.tcb-matches-title { margin: 0 0 8px; font-size: 22px; }
.tcb-matches-teaser { margin: 0 0 16px; color: #444; max-width: 70ch; }
.tcb-matches-subtitle { margin: 20px 0 8px; font-size: 16px; color: #2f6f3e; }

/* Termine als Karten: einspaltig wenn wenig Platz ist, sonst nebeneinander.
   Das füllt breite Container, ohne dass eine Medienabfrage nötig wäre. */
.tcb-matchlist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	/* min() verhindert, dass eine Spalte breiter wird als der verfügbare Platz –
	   ohne das ragen die Karten auf schmalen Handys aus dem Kasten heraus. */
	grid-template-columns: repeat(auto-fit, minmax(min(265px, 100%), 1fr));
	gap: 12px;
}
.tcb-match {
	padding: 12px 14px;
	border: 1px solid #eef1f2;
	border-radius: 8px;
	background: #fbfcfc;
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.tcb-match-date { color: #2f6f3e; font-size: 14px; }
.tcb-match-teams { font-size: 16px; }

/* Wettbewerbs-Vermerk, nur sichtbar wenn mehrere Wettbewerbe laufen. */
.tcb-comp {
	display: inline-block;
	padding: 1px 7px;
	border-radius: 10px;
	background: #eef4ef;
	color: #2f6f3e;
	font-size: 12px;
	font-weight: 600;
	vertical-align: middle;
	white-space: nowrap;
}

.tcb-records { list-style: none; margin: 0; padding: 0; }
.tcb-record {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	padding: 8px 0;
	border-bottom: 1px solid #eef1f2;
}
.tcb-record:last-child { border-bottom: none; }
.tcb-record-team { min-width: 130px; }
.tcb-record-stats { color: #555; font-size: 14px; flex: 1 1 auto; }
/* Ohne Bilanzzahlen (Pokal) schiebt der Name die Formpunkte nach rechts. */
.tcb-record-nostats .tcb-record-team { flex: 1 1 auto; }
.tcb-formdots { display: inline-flex; gap: 3px; }
.tcb-form-dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	font-size: 11px;
	font-weight: 700;
	color: #fff;
}
.tcb-form-win { background: #2f6f3e; }
.tcb-form-loss { background: #b32b21; }
.tcb-form-draw { background: #8a8f94; }
.tcb-record-text { flex: 1 1 100%; margin: 6px 0 0; color: #444; font-size: 14px; line-height: 1.5; }

/* Link auf die nuLiga-Mannschaftsseite, abgesetzt unter dem Text. */
.tcb-record-link { flex: 1 1 100%; margin: 10px 0 2px; font-size: 13px; }
.tcb-record-link a {
	color: #2f6f3e;
	text-decoration: none;
	border-bottom: 1px solid rgba(47, 111, 62, 0.3);
	padding-bottom: 1px;
}
.tcb-record-link a:hover,
.tcb-record-link a:focus { border-bottom-color: #2f6f3e; }
/* Pfeil als Hinweis, dass der Link die Seite verlässt. */
.tcb-record-link a::after { content: " \2197"; border-bottom: none; }
.tcb-matches-src { margin: 14px 0 0; font-size: 12px; color: #99a0a6; }
/* Der Quellenlink bleibt so unauffällig wie der Hinweis selbst. */
.tcb-matches-src a { color: inherit; text-decoration: none; }
.tcb-matches-src a:hover,
.tcb-matches-src a:focus { color: #2f6f3e; text-decoration: underline; }

/* --------------------------------------------------------------------- */
/* Wetter auf der Anlage – [tcb_wetter]                                   */
/* --------------------------------------------------------------------- */

.tcb-weather {
	max-width: 760px;
	margin: 0 auto 20px;
	padding: 18px 20px;
	background: #fff;
	border: 1px solid #dfe3e6;
	/* Die Ampelstufe steckt in der linken Kante: sichtbar genug, um sie beim
	   Überfliegen zu erfassen, ohne die Karte einzufärben. */
	border-left: 5px solid #8a8f94;
	border-radius: 8px;
	font-size: 16px;
	line-height: 1.5;
}
.tcb-weather-gut { border-left-color: #2f6f3e; }
.tcb-weather-bedingt { border-left-color: #d18700; }
.tcb-weather-schlecht,
.tcb-weather-gesperrt { border-left-color: #b32b21; }

.tcb-weather-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin: 0 0 14px;
	padding-bottom: 10px;
	border-bottom: 1px solid #eef1f2;
}
.tcb-weather-title { margin: 0; font-size: 19px; font-weight: 600; color: #2f6f3e; }
.tcb-weather-place { font-size: 14px; color: #8a8f94; }

.tcb-weather-cols {
	display: grid;
	/* Die mittlere Spalte trägt die längsten Werte ("deutlich (Taupunkt
	   19 °C)") und bekommt deshalb den größten Anteil. Die linke braucht nur
	   Platz für Icon und Temperatur. */
	grid-template-columns: minmax(96px, 0.65fr) minmax(215px, 1.35fr) minmax(185px, 1.2fr);
	gap: 18px;
	align-items: start;
}

/* Linke Spalte: aktuelles Wetter */
.tcb-weather-now { text-align: center; }
.tcb-weather-icon { display: block; width: 72px; height: auto; margin: 0 auto 6px; }
.tcb-weather-temp { display: block; font-size: 30px; font-weight: 700; color: #333; line-height: 1.2; }
.tcb-weather-cond { display: block; font-size: 14px; color: #555; }
/* Gefühlte Temperatur steht nur da, wenn sie von der gemessenen abweicht.
   Ohne Inhalt darf die Zeile keinen Platz beanspruchen. */
.tcb-weather-felt { display: block; font-size: 13px; color: #8a8f94; margin-top: 2px; }
.tcb-weather-felt:empty { display: none; }

/* Mittlere Spalte: Einzelwerte */
.tcb-weather-details { margin: 0; font-size: 14px; }
.tcb-weather-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	padding: 5px 0;
	border-bottom: 1px solid #f2f4f6;
}
.tcb-weather-row:last-child { border-bottom: none; }
/* dt bewusst NICHT als Flex-Container: Ein Flex-Element leitet seine
   Grundlinie vom ersten Kind ab – hier vom Icon, das gar keine hat. Die
   Beschriftung stand dadurch neben ihrem Wert aus der Linie. Als normaler
   Textfluss mit ausgerichtetem Icon greift das baseline-Alignment der Zeile. */
.tcb-weather-row dt {
	margin: 0;
	color: #666;
	font-weight: 400;
	white-space: nowrap;
}
.tcb-weather-row dt img {
	width: 18px;
	height: auto;
	margin-right: 7px;
	vertical-align: -4px;
}
.tcb-weather-row dd { margin: 0; text-align: right; color: #333; font-weight: 600; }

/* Rechte Spalte: Einschätzung */
.tcb-weather-verdict {
	padding: 14px 16px;
	background: #f7f8f9;
	border-radius: 6px;
	text-align: center;
}
.tcb-weather-gut .tcb-weather-verdict { background: #eafaef; }
.tcb-weather-bedingt .tcb-weather-verdict { background: #fff3d6; }
.tcb-weather-schlecht .tcb-weather-verdict,
.tcb-weather-gesperrt .tcb-weather-verdict { background: #fce8e6; }

.tcb-weather-status-icon { display: block; width: 52px; height: auto; margin: 0 auto 8px; }
.tcb-weather-status { display: block; font-size: 15px; line-height: 1.35; color: #333; }
.tcb-weather-text { margin: 8px 0 0; font-size: 14px; color: #555; line-height: 1.5; }

/* Fußzeile: Stand der Daten und der Hinweis, wer wirklich entscheidet */
.tcb-weather-foot {
	margin: 14px 0 0;
	padding-top: 10px;
	border-top: 1px solid #eef1f2;
	font-size: 12px;
	color: #99a0a6;
}
.tcb-weather-foot span { display: block; }
.tcb-weather-disclaimer { margin-top: 3px; }

/* Von den beiden Fußnoten ist immer nur eine sichtbar. Die Auswahl läuft über
   die Statusklasse und nicht über PHP, damit sie auch stimmt, wenn das
   Nachladen per JavaScript den Status nachträglich ändert.
   Die Selektoren sind bewusst zweistufig – ".tcb-weather-foot span" oben ist
   sonst spezifischer und das display:block würde gewinnen. */
.tcb-weather-foot .tcb-weather-note-sperre { display: none; }
.tcb-weather-gesperrt .tcb-weather-foot .tcb-weather-note-wetter { display: none; }
.tcb-weather-gesperrt .tcb-weather-foot .tcb-weather-note-sperre { display: block; }

@media (max-width: 700px) {
	.tcb-weather-cols { grid-template-columns: 1fr; gap: 16px; }
	/* Auf dem Handy zuerst die Einschätzung – deswegen schaut man nach. */
	.tcb-weather-verdict { order: -1; }
	.tcb-weather-now { display: flex; align-items: center; justify-content: center; gap: 14px; text-align: left; }
	.tcb-weather-icon { margin: 0; width: 56px; }
}