/*
 * CCL Backoffice – gemeinsame Gestaltung aller internen Seiten im Vereinsdesign.
 * Gilt nur innerhalb von body.ccl-bo (siehe includes/backoffice.php).
 */
.ccl-bo {
	--bo-blau: #01488C;
	--bo-navy: #0B2D55;
	--bo-hell: #8EADCB;
	--bo-flaeche: #EEF3F8;
	--bo-linie: #D2DDE8;
	--bo-text: #1C1D1B;
	--bo-leise: #5B6673;
	--bo-gold: #F5A623;
	--bo-gruen: #2E7D4F;
	--bo-rot: #B3261E;
	--bo-radius: 14px;
	--bo-radius-klein: 10px;
	--bo-schatten: 0 1px 2px rgba(11, 45, 85, .06), 0 8px 24px rgba(11, 45, 85, .07);
	--bo-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
	--bo-schrift: Barlow, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	background: linear-gradient(180deg, #F3F7FB 0, #FFFFFF 420px) fixed;
}
.ccl-bo main { font-family: var(--bo-schrift); color: var(--bo-text); font-size: 1.04rem; }
.ccl-bo main h1, .ccl-bo main .wp-block-post-title { font-family: var(--bo-display); color: var(--bo-blau); letter-spacing: .01em; }
.ccl-bo main h2, .ccl-bo main h3, .ccl-bo main h4 { font-family: var(--bo-display); color: var(--bo-navy); letter-spacing: .01em; }
.ccl-bo main .ccl-leise { color: var(--bo-leise); }

/* ---------- Kopfbereich: blaues Band mit Reitern ---------- */
.ccl-bo .ccl-kopf {
	display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; align-items: center; justify-content: space-between;
	background: linear-gradient(120deg, var(--bo-blau) 0%, var(--bo-navy) 100%);
	color: #fff; border-radius: 20px; padding: 1.1rem 1.3rem; margin: 0 0 1.4rem; box-shadow: var(--bo-schatten);
	position: relative; overflow: hidden;
}
.ccl-bo .ccl-kopf::after { content: ""; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 50%; background: rgba(142, 173, 203, .18); pointer-events: none; }
.ccl-bo .ccl-kopf h2 { color: #fff; margin: 0; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); }
.ccl-bo .ccl-kopf .ccl-leise { color: rgba(255, 255, 255, .78); margin: .15rem 0 0; }
.ccl-bo .ccl-kopf nav, .ccl-bo .ccl-konto { display: flex; flex-wrap: wrap; gap: .4rem; position: relative; z-index: 1; }
.ccl-bo .ccl-kopf nav a, .ccl-bo .ccl-konto a {
	font-family: var(--bo-display); font-weight: 700; font-size: 1.02rem; letter-spacing: .02em; text-decoration: none;
	color: #fff; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px; padding: .38rem .9rem; transition: background .15s, color .15s;
}
.ccl-bo .ccl-kopf nav a:hover, .ccl-bo .ccl-kopf nav a:focus-visible, .ccl-bo .ccl-konto a:hover { background: #fff; color: var(--bo-blau); }

/* Reiter innerhalb der Seiten (Coach-Abrechnung, Monate, Filter) */
.ccl-bo .ccl-ab-nav { display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 0 1.2rem; }
.ccl-bo .ccl-ab-nav a {
	font-family: var(--bo-display); font-weight: 700; font-size: 1.02rem; text-decoration: none; color: var(--bo-blau);
	background: #fff; border: 1.5px solid var(--bo-linie); border-radius: 999px; padding: .35rem .95rem;
}
.ccl-bo .ccl-ab-nav a.is-aktiv, .ccl-bo .ccl-ab-nav a:hover { background: var(--bo-blau); border-color: var(--bo-blau); color: #fff; }

/* ---------- Eingabefelder ---------- */
.ccl-bo main input[type="text"], .ccl-bo main input[type="email"], .ccl-bo main input[type="url"], .ccl-bo main input[type="tel"],
.ccl-bo main input[type="number"], .ccl-bo main input[type="date"], .ccl-bo main input[type="datetime-local"], .ccl-bo main input[type="time"],
.ccl-bo main input[type="password"], .ccl-bo main input[type="search"], .ccl-bo main input:not([type]), .ccl-bo main select, .ccl-bo main textarea {
	font-family: var(--bo-schrift); font-size: 1.05rem; line-height: 1.35; color: var(--bo-text);
	background: #fff; border: 1.5px solid var(--bo-linie); border-radius: var(--bo-radius-klein); padding: .62rem .8rem; min-height: 2.75rem; box-sizing: border-box;
	transition: border-color .15s, box-shadow .15s; box-shadow: inset 0 1px 2px rgba(11, 45, 85, .04);
}
.ccl-bo main textarea { min-height: 6rem; }
.ccl-bo main input:focus, .ccl-bo main select:focus, .ccl-bo main textarea:focus { outline: none; border-color: var(--bo-blau); box-shadow: 0 0 0 4px rgba(1, 72, 140, .16); }
.ccl-bo main input:disabled, .ccl-bo main select:disabled, .ccl-bo main textarea:disabled { background: #F4F6F8; color: #7A8591; }
.ccl-bo main input[type="checkbox"], .ccl-bo main input[type="radio"] { accent-color: var(--bo-blau); width: 1.2rem; height: 1.2rem; }
.ccl-bo main label { font-weight: 600; color: var(--bo-navy); }
.ccl-bo main ::placeholder { color: #9AA6B2; }

/* ---------- Knöpfe ---------- */
.ccl-bo main .ccl-btn, .ccl-bo main button[type="submit"]:not(.ccl-fn-klein), .ccl-bo main .wp-element-button {
	font-family: var(--bo-display); font-weight: 700; font-size: 1.12rem; letter-spacing: .02em; line-height: 1.1;
	color: #fff; background: var(--bo-blau); border: 2px solid var(--bo-blau); border-radius: 12px; padding: .7rem 1.25rem; cursor: pointer; text-decoration: none; display: inline-block;
	box-shadow: 0 2px 0 rgba(11, 45, 85, .25), 0 6px 14px rgba(1, 72, 140, .18); transition: transform .12s, box-shadow .12s, background .12s;
}
.ccl-bo main .ccl-btn:hover, .ccl-bo main button[type="submit"]:not(.ccl-fn-klein):hover, .ccl-bo main .wp-element-button:hover { background: var(--bo-navy); border-color: var(--bo-navy); transform: translateY(-1px); color: #fff; }
.ccl-bo main .ccl-btn:active, .ccl-bo main button[type="submit"]:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(11, 45, 85, .25); }
.ccl-bo main .ccl-btn--leise, .ccl-bo main button.ccl-btn--leise { background: #fff; color: var(--bo-blau); border-color: var(--bo-hell); box-shadow: none; }
.ccl-bo main .ccl-btn--leise:hover { background: var(--bo-flaeche); color: var(--bo-navy); }
.ccl-bo main .ccl-btn:disabled, .ccl-bo main button:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.ccl-bo main .ccl-fn-klein { font-size: .9rem; border-radius: 8px; padding: .3rem .7rem; border: 1px solid var(--bo-linie); background: #fff; color: var(--bo-leise); cursor: pointer; }
.ccl-bo main .ccl-fn-klein:hover { border-color: var(--bo-rot); color: var(--bo-rot); }

/* ---------- Karten, Kästen, aufklappbare Bereiche ---------- */
.ccl-bo main .ccl-ab-karte, .ccl-bo main .ccl-tk-t, .ccl-bo main .ccl-tk-abo, .ccl-bo main .abc-team, .ccl-bo main .abc-extra, .ccl-bo main .abc-monat,
.ccl-bo main .ccl-cu-doc, .ccl-bo main .ccl-bo-karte {
	border-radius: var(--bo-radius) !important; border-color: var(--bo-linie); box-shadow: var(--bo-schatten);
}
.ccl-bo main details > summary { cursor: pointer; font-weight: 700; color: var(--bo-blau); list-style: none; }
.ccl-bo main details > summary::-webkit-details-marker { display: none; }
.ccl-bo main details > summary::before { content: "▸"; display: inline-block; margin-right: .4rem; transition: transform .15s; }
.ccl-bo main details[open] > summary::before { transform: rotate(90deg); }

/* ---------- Tabellen ---------- */
.ccl-bo main .ccl-ab-tab, .ccl-bo main .abc-tab { border-radius: var(--bo-radius); }
.ccl-bo main .ccl-ab-tab { overflow-x: auto; border: 1px solid var(--bo-linie); background: #fff; box-shadow: var(--bo-schatten); }
.ccl-bo main .ccl-ab-tab table, .ccl-bo main table.abc-tab { border-collapse: separate; border-spacing: 0; width: 100%; }
.ccl-bo main .ccl-ab-tab th, .ccl-bo main table.abc-tab th {
	font-family: var(--bo-display); font-weight: 700; font-size: .95rem; letter-spacing: .03em; text-transform: uppercase; color: var(--bo-navy);
	background: var(--bo-flaeche); padding: .55rem .6rem; border-bottom: 1px solid var(--bo-linie);
}
.ccl-bo main .ccl-ab-tab td { padding: .55rem .6rem; border-bottom: 1px solid #EDF1F5; }
.ccl-bo main .ccl-ab-tab tbody tr:nth-child(even) td { background: #FAFCFE; }
.ccl-bo main .ccl-ab-tab tbody tr:hover td { background: #F3F7FB; }

/* ---------- Meldungen und Status ---------- */
.ccl-bo main .ccl-meldung { border-radius: var(--bo-radius-klein); border: 0; border-left: 5px solid var(--bo-gruen); background: #E9F5EE; color: #1E5A38; padding: .75rem 1rem; font-weight: 600; }
.ccl-bo main .ccl-ab-warn { color: var(--bo-rot); font-weight: 600; }
.ccl-bo main .ccl-ab-st, .ccl-bo main .abc-chip, .ccl-bo main .ccl-tk-chip { border-radius: 999px; font-family: var(--bo-display); letter-spacing: .02em; font-size: .82rem; }

/* ---------- Terminformular ---------- */
.ccl-bo main .ccl-tk-form { max-width: 46rem; gap: 1rem; }
.ccl-bo main .ccl-tk-form .ccl-tk-abschnitt { background: #fff; border: 1px solid var(--bo-linie); border-radius: 18px; padding: 1rem 1.1rem 1.1rem; box-shadow: var(--bo-schatten); display: grid; gap: .75rem; margin: 0; }
.ccl-bo main .ccl-tk-form .ccl-tk-abschnitt > legend, .ccl-bo main .ccl-tk-form .ccl-tk-abschnitt > h3 {
	font-family: var(--bo-display); font-weight: 700; font-size: 1.25rem; color: var(--bo-blau); padding: 0 .3rem; margin: 0;
}
.ccl-bo main .ccl-tk-form label { font-size: 1rem; gap: .3rem; }
.ccl-bo main .ccl-tk-form input, .ccl-bo main .ccl-tk-form select, .ccl-bo main .ccl-tk-form textarea { font-size: 1.1rem; width: 100%; }
/* Teams als antippbare Kacheln */
.ccl-bo main .ccl-tk-kreuze { gap: .5rem; border: 0; padding: 0; }
.ccl-bo main .ccl-tk-kreuze label {
	position: relative; display: inline-flex; align-items: center; gap: .45rem; border: 1.5px solid var(--bo-linie); border-radius: 999px; padding: .45rem .9rem .45rem .7rem;
	background: #fff; font-weight: 600; color: var(--bo-navy); cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.ccl-bo main .ccl-tk-kreuze label:has(input:checked) { background: var(--bo-blau); border-color: var(--bo-blau); color: #fff; }
.ccl-bo main .ccl-tk-kreuze label:has(input:focus-visible) { box-shadow: 0 0 0 4px rgba(1, 72, 140, .2); }
.ccl-bo main .ccl-tk-kreuze input { accent-color: #fff; }
/* Schalter „ganztägig“ */
.ccl-bo main .ccl-tk-schalter { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: .6rem; cursor: pointer; font-weight: 600; }
.ccl-bo main .ccl-tk-schalter input { appearance: none; -webkit-appearance: none; width: 2.9rem !important; height: 1.65rem !important; border-radius: 999px; background: #C9D5E2; position: relative; cursor: pointer; transition: background .15s; margin: 0; flex: 0 0 auto; }
.ccl-bo main .ccl-tk-schalter input::after { content: ""; position: absolute; top: .18rem; left: .2rem; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .15s; }
.ccl-bo main .ccl-tk-schalter input:checked { background: var(--bo-blau); }
.ccl-bo main .ccl-tk-schalter input:checked::after { transform: translateX(1.22rem); }
.ccl-bo main .ccl-tk-aktionen { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }

/* Terminliste */
.ccl-bo main .ccl-tk-dat { align-self: flex-start; padding: .45rem 0; border-radius: 12px; background: linear-gradient(160deg, var(--bo-blau), var(--bo-navy)); color: #fff; }
.ccl-bo main .ccl-tk-dat b { color: #fff; font-family: var(--bo-display); font-size: 1.6rem; }
.ccl-bo main .ccl-tk-dat small { color: rgba(255, 255, 255, .8); }
.ccl-bo main .ccl-tk-inh h3 { font-size: 1.2rem; }
.ccl-bo main .ccl-tk-monat { font-family: var(--bo-display); font-size: 1.45rem; color: var(--bo-blau); border-bottom: 3px solid var(--bo-hell); }

/* Kleine Bildschirme */
@media (max-width: 600px) {
	.ccl-bo .ccl-kopf { border-radius: 16px; padding: 1rem; }
	.ccl-bo main .ccl-btn, .ccl-bo main button[type="submit"]:not(.ccl-fn-klein) { padding: .75rem 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
	.ccl-bo main * { transition: none !important; }
}

/* Coach-Abrechnung: Stundenfeld breit genug für Zahl und Pfeile */
.ccl-bo main .abc-tab input.abc-std { width: 6.2rem; min-width: 6.2rem; padding: .45rem .35rem .45rem .6rem; text-align: right; }
.ccl-bo main .abc-tab th.z, .ccl-bo main .abc-tab td.z { width: 6.8rem; }
.ccl-bo main .abc-stepper input { width: 4.6rem; padding-left: .5rem; padding-right: .3rem; text-align: center; }