/* clubseite.ch – App  |  Theme-Styles (lokale Schriften Barlow Condensed + Inter, keine externen Ressourcen)
   Ab 1.3.0: alle Farben aus den Farb-Tokens von clubseite-verein (Farbmuster). Die Werte unten (:where = Spezifitaet 0)
   sind nur der Ersatz, falls verein keine Tokens liefert – Muster 2 «clubseite Hell». Kein Gelb. */

:where(:root) {
	--cs-bg: #F3F5F2;
	--cs-card: #FFFFFF;
	--cs-ink: #0D1210;
	--cs-muted: #5D6862;
	--cs-line: #DDE3DC;
	--cs-primary: #0E7A3E;
	--cs-on-primary: #FFFFFF;
	--cs-accent: #3DDC84;
	--cs-head-bg: #0D1210;
	--cs-head-ink: #FFFFFF;
	--cs-tafel: #0D1210;
	--cs-tafel-ink: #FFFFFF;
	--cs-score: #3DDC84;
	--cs-chip: #E3F5EA;
	--cs-chip-ink: #0A5C2E;
	--cs-num: #0E7A3E;
	--cs-live: #E5484D;
	--cs-ok: #16A34A;
	--cs-warn: #D97706;
	--cs-danger: #DC2626;
	--cs-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--cs-font-head: "Barlow Condensed", "Inter", "Arial Narrow", sans-serif;
	--cs-dunkel: 0;
}
:root {
	--cs-radius: 12px;
	--cs-akzent: var(--cs-accent);
	/* Abgeleitete Flaechen (in beiden Modi lesbar) */
	--cs-sek: #eceeec;
	--cs-sek: color-mix(in srgb, var(--cs-ink) 7%, var(--cs-card));
	--cs-feld-rand: #8a948e;
	--cs-feld-rand: color-mix(in srgb, var(--cs-ink) 38%, var(--cs-card));
	--cs-kopf-hover: rgba(255,255,255,.14);
	--cs-kopf-hover: color-mix(in srgb, var(--cs-head-ink) 14%, transparent);
	--cs-kopf-flaeche: rgba(255,255,255,.08);
	--cs-kopf-flaeche: color-mix(in srgb, var(--cs-head-ink) 9%, transparent);
	--cs-schatten: 0 1px 2px rgba(0,0,0,.06);
	--cs-bottom-space: 0px;
	--cs-wrap: 720px;
	--cs-kopf-h: 60px;
	--cs-ab-h: 0px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--cs-font);
	font-size: 17px;
	line-height: 1.55;
	font-feature-settings: "cv11", "ss01";
	color: var(--cs-ink);
	background: var(--cs-bg);
	overflow-x: hidden;
	overflow-wrap: anywhere;
}
img, video, iframe, svg { max-width: 100%; height: auto; }
a { color: var(--cs-primary); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--cs-ink); }
:focus-visible { outline: 3px solid var(--cs-ink); outline-offset: 2px; }
h1, h2, h3, h4 { line-height: 1.1; margin: 1.2em 0 .5em; font-weight: 800; overflow-wrap: anywhere; font-family: var(--cs-font-head); text-transform: uppercase; letter-spacing: .01em; }
h1 { font-size: 2rem; } h2 { font-size: 1.6rem; } h3 { font-size: 1.3rem; } h4 { font-size: 1.1rem; }
p, ul, ol, table { margin: 0 0 1em; }
button, input, select, textarea { font: inherit; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=time], input[type=search], input[type=tel], input[type=url], select, textarea {
	width: 100%; max-width: 100%; min-height: 44px; padding: 10px 12px;
	border: 1px solid var(--cs-feld-rand); border-radius: 10px; background: var(--cs-card); color: var(--cs-ink);
}
input[type=checkbox], input[type=radio] { width: 20px; height: 20px; accent-color: var(--cs-primary); }
table { width: 100%; border-collapse: collapse; }
td, th { padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--cs-line); vertical-align: top; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); border: 0; word-wrap: normal !important; }
.screen-reader-text:focus { position: absolute !important; left: 8px; top: 8px; width: auto; height: auto; clip: auto; clip-path: none; z-index: 100001; padding: 10px 16px; background: var(--cs-card); color: var(--cs-ink); border-radius: 8px; }

/* ---------- Kopfleiste ---------- */
.cs-header {
	position: sticky; top: 0; z-index: 1000;
	background: var(--cs-head-bg); color: var(--cs-head-ink);
	padding-top: env(safe-area-inset-top, 0px);
	box-shadow: 0 1px 0 var(--cs-kopf-hover);
}
.admin-bar .cs-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .cs-header { top: 46px; } }
.cs-header-inner {
	max-width: var(--cs-wrap); margin: 0 auto; padding: 0 16px; min-height: 60px;
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.cs-brand { display: flex; align-items: center; gap: 10px; min-width: 0; color: inherit !important; text-decoration: none !important; font-weight: 800; font-size: 1.35rem; letter-spacing: .02em; text-transform: uppercase; line-height: 1.05; }
.cs-brand img { display: block; height: 40px; width: auto; max-width: 180px; }
.cs-brand-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-brand-name.cs-brand-sr { position: absolute; left: -9999px; }

/* Hamburger (Checkbox-Hack – funktioniert ohne JS); die Checkbox bleibt unsichtbar, Fokus wird auf dem Label gezeigt */
#cs-nav-toggle, #cs-nav-toggle:focus { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(1px,1px,1px,1px); clip-path: inset(50%); border: 0; }
.cs-nav-toggle-label {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-width: 48px; min-height: 48px; margin-right: -8px; padding: 0 8px; border-radius: 10px; cursor: pointer;
	color: inherit; font-weight: 700; font-size: .95rem; user-select: none;
}
.cs-nav-toggle-label:hover { background: var(--cs-kopf-hover); }
#cs-nav-toggle:focus-visible + .cs-header-inner .cs-nav-toggle-label { outline: 3px solid var(--cs-head-ink); outline-offset: 2px; }
#cs-nav-toggle:checked:focus-visible ~ .cs-overlay .cs-overlay-close { outline: 3px solid var(--cs-head-ink); outline-offset: 2px; }
.cs-burger { position: relative; display: block; width: 24px; height: 18px; }
.cs-burger span { position: absolute; left: 0; right: 0; height: 3px; border-radius: 2px; background: currentColor; transition: transform .2s, opacity .2s, top .2s; }
.cs-burger span:nth-child(1) { top: 0; } .cs-burger span:nth-child(2) { top: 7.5px; } .cs-burger span:nth-child(3) { top: 15px; }
.cs-nav-toggle-text { display: none; }
@media (min-width: 600px) { .cs-nav-toggle-text { display: inline; } }

/* Vollbild-Overlay */
.cs-overlay {
	position: fixed; inset: 0; z-index: 99990; display: none;
	background: var(--cs-head-bg); color: var(--cs-head-ink);
	overflow-y: auto; -webkit-overflow-scrolling: touch;
	padding: calc(16px + env(safe-area-inset-top, 0px)) 16px calc(32px + env(safe-area-inset-bottom, 0px));
}
#cs-nav-toggle:checked ~ .cs-overlay { display: block; }
.cs-overlay-inner { max-width: 720px; margin: 0 auto; }
.cs-overlay-top { display: flex; align-items: center; justify-content: space-between; min-height: 48px; margin-bottom: 20px; }
.cs-overlay-top .cs-brand { font-size: 1.1rem; }
.cs-overlay-close {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-width: 48px; min-height: 48px; margin-right: -8px; padding: 0 10px; border-radius: 10px; cursor: pointer; font-weight: 700;
	color: inherit; background: transparent; border: 0;
}
.cs-overlay-close:hover { background: var(--cs-kopf-hover); }
.cs-overlay-close svg { width: 26px; height: 26px; }
.cs-menu, .cs-menu ul { list-style: none; margin: 0; padding: 0; }
.cs-menu > li > a {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	min-height: 60px; padding: 12px 16px; margin-bottom: 8px; border-radius: var(--cs-radius);
	font-family: var(--cs-font-head); font-size: 1.5rem; font-weight: 700; line-height: 1.1; text-transform: uppercase; letter-spacing: .02em;
	color: var(--cs-head-ink) !important; text-decoration: none !important;
	background: var(--cs-kopf-flaeche);
}
.cs-menu > li > a:hover, .cs-menu > li > a:focus-visible { background: var(--cs-kopf-hover); outline-color: var(--cs-head-ink); }
.cs-menu > li.current-menu-item > a, .cs-menu > li.current_page_item > a { box-shadow: inset 4px 0 0 var(--cs-primary); }
.cs-menu .sub-menu { margin: -4px 0 12px 16px; }
.cs-menu .sub-menu a {
	display: flex; align-items: center; min-height: 48px; padding: 8px 16px; border-radius: 10px; margin-bottom: 4px;
	font-size: 1.05rem; font-weight: 600; color: var(--cs-head-ink) !important; text-decoration: none !important; opacity: .92;
}
.cs-menu .sub-menu a:hover { background: var(--cs-kopf-hover); }
.cs-menu li.cs-menu-login > a, .cs-menu li.cs-menu-dashboard > a { background: var(--cs-primary); color: var(--cs-on-primary) !important; }
.cs-menu li.cs-menu-logout > a { background: transparent; border: 2px solid var(--cs-kopf-hover); border-color: color-mix(in srgb, var(--cs-head-ink) 45%, transparent); }
.cs-overlay-hint { margin-top: 24px; font-size: .9rem; opacity: .8; }
.cs-overlay-hint a { color: inherit; }
/* Menue offen: Seite nicht scrollen (nur mit JS gesetzt) */
body.cs-nav-offen { overflow: hidden; }
@media (min-width: 900px) {
	.cs-overlay { padding-top: 24px; }
	.cs-menu > li > a { font-size: 1.45rem; min-height: 68px; }
}

/* ---------- Inhalt ---------- */
.cs-main { display: block; max-width: var(--cs-wrap); margin: 0 auto; padding: 16px 16px calc(32px + var(--cs-bottom-space)); min-height: 60vh; }
.cs-page-title { margin: 4px 0 14px; font-size: 1.15rem; font-weight: 700; color: var(--cs-muted); letter-spacing: .04em; }
.cs-page-title.cs-page-title-gross { font-size: 2.1rem; color: var(--cs-ink); font-weight: 800; letter-spacing: .01em; }
.entry-content > * { margin-top: 0; }
.entry-content > *:last-child { margin-bottom: 0; }
.entry-content > p:empty { display: none; }
.entry-content h2:first-child, .entry-content h3:first-child { margin-top: 0; }
.entry-content img.aligncenter, .entry-content .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.entry-content .alignwide, .entry-content .alignfull { max-width: 100%; margin-left: 0; margin-right: 0; }
.entry-content .wp-block-image figcaption { font-size: .9rem; color: var(--cs-muted); }
.entry-content .wp-block-button__link, .entry-content .wp-element-button { background: var(--cs-primary); color: var(--cs-on-primary); border-radius: 10px; padding: 12px 18px; font-weight: 700; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.entry-content > .wp-block-group, .entry-content .wp-block-columns { margin-bottom: 1em; }
.cs-card { background: var(--cs-card); border: 1px solid var(--cs-line); border-radius: var(--cs-radius); padding: 16px; margin: 0 0 16px; }
.cs-meta { color: var(--cs-muted); font-size: .9rem; margin: 0 0 12px; }
.cs-liste { list-style: none; margin: 0; padding: 0; }
.cs-liste li { margin: 0 0 10px; }
.cs-liste a { display: block; padding: 14px 16px; background: var(--cs-card); border: 1px solid var(--cs-line); border-radius: var(--cs-radius); color: var(--cs-ink); text-decoration: none; font-weight: 600; min-height: 52px; }
.cs-liste a:hover { border-color: var(--cs-primary); }
.cs-liste small { display: block; font-weight: 400; color: var(--cs-muted); }
.cs-404 { text-align: center; padding: 48px 0; }
.cs-404 .cs-404-zahl { font-size: 4rem; font-weight: 800; color: var(--cs-primary); line-height: 1; margin: 0 0 8px; }
.cs-pagination { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin: 24px 0 0; }
.cs-pagination a, .cs-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 12px; border-radius: 10px; background: var(--cs-card); border: 1px solid var(--cs-line); text-decoration: none; color: var(--cs-ink); }
.cs-pagination .current { background: var(--cs-primary); color: var(--cs-on-primary); border-color: var(--cs-primary); }
.post-password-form input[type=submit] { background: var(--cs-primary); color: var(--cs-on-primary); border: 0; border-radius: 10px; padding: 10px 16px; min-height: 44px; font-weight: 700; }


/* Platz unten: auf dem Handy setzt das verein-Plugin selbst padding-bottom am body (Bottom-Bar < 600 px). */

/* ---------- Harmonisierung der clubseite-Module ---------- */
.cs-btn, .cs-app .cs-btn, .cs-login .cs-btn, .wp-element-button.cs-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	background: var(--cs-primary); color: var(--cs-on-primary) !important;
	border: 0; border-radius: 10px; padding: 10px 16px; min-height: 44px;
	font-size: 15px; font-weight: 700; line-height: 1.2; text-decoration: none !important; cursor: pointer;
}
.cs-btn:hover { filter: brightness(1.08); }
.cs-btn.sec, .cs-app .cs-btn.sec { background: var(--cs-sek); color: var(--cs-ink) !important; }
.cs-tile, .cs-app .cs-tile { border-radius: var(--cs-radius); border: 1px solid var(--cs-line); border-top: 4px solid var(--cs-primary); background: var(--cs-card); box-shadow: var(--cs-schatten); }
.cs-tiles { gap: 12px; }
.cs-dash-gt { font-size: 1.15rem; margin: 0 0 10px; }
.cs-dash-gruppe { margin: 0 0 24px; }
.cs-app { max-width: 100%; }
.cs-app .cs-app-top h2 { font-size: 1.5rem; }
.cs-app .cs-rolle { background: var(--cs-chip); color: var(--cs-chip-ink); }
.cs-nav a.on, .cs-app .cs-nav a.on { background: var(--cs-primary); color: var(--cs-on-primary) !important; }
.cs-more[open] summary { background: var(--cs-ink); }
.cs-login-noetig { background: var(--cs-card); color: var(--cs-ink); border-color: var(--cs-primary); border-radius: var(--cs-radius); }
.cs-app-login, .cs-login { border-radius: var(--cs-radius); border-color: var(--cs-line); }
.cs-login .cs-btn, .cs-app-login .cs-btn { width: 100%; }
.cs-kz div { background: var(--cs-sek); }
.cs-kz b, .cs-kz strong { color: var(--cs-num); }
/* Admin-Leiste: Platz oben (WordPress setzt margin-top auf html) */
html { margin-top: 0 !important; }
#wpadminbar { position: fixed; }
body.admin-bar { padding-top: 32px; }
@media (max-width: 782px) { body.admin-bar { padding-top: 46px; } }

/* ---------- Fusszeile ---------- */
.cs-footer { max-width: var(--cs-wrap); margin: 0 auto; padding: 24px 16px calc(24px + var(--cs-bottom-space) + env(safe-area-inset-bottom, 0px)); color: var(--cs-muted); font-size: .9rem; border-top: 1px solid var(--cs-line); }
.cs-footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.cs-footer-name { font-weight: 700; color: var(--cs-ink); }
.cs-footer-links { display: flex; flex-wrap: wrap; gap: 4px 16px; list-style: none; margin: 0; padding: 0; }
.cs-footer-links a { color: var(--cs-muted); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.cs-footer-links a:hover { color: var(--cs-primary); text-decoration: underline; }

/* =====================================================================
   Ab 1.0.1: Tablet/Desktop-Layout, einheitliche Module, Navigation, Glocke
   ===================================================================== */

/* ---------- Breiten: Handy 100 %, Tablet 960 px, breite Module/Dashboard bis 1100 px ---------- */
@media (min-width: 768px) { :root { --cs-wrap: 960px; } }
@media (min-width: 1100px) { body.cs-app, body.cs-breit { --cs-wrap: 1100px; } }
body.admin-bar { --cs-ab-h: 32px; }
@media (max-width: 782px) { body.admin-bar { --cs-ab-h: 46px; } }

/* Das verein-Plugin setzt .cs-app{max-width:1100px;margin:0 auto} – das trifft auch <body class="cs-app">.
   Body bleibt volle Breite; Farben kommen immer aus den Tokens auf :root (Farbmuster), nie aus einem Modul-Standard. */
body.cs-app-theme.cs-app { max-width: none; margin: 0; }
body.cs-app-theme.cs-app, body.cs-app-theme .cs-app { --cs-primary: inherit; --cs-ink: inherit; --cs-on-primary: inherit; --cs-accent: inherit; --cs-akzent: inherit; --cs-card: inherit; --cs-bg: inherit; --cs-line: inherit; --cs-muted: inherit; }
body.cs-app-theme .cs-main .cs-app { max-width: 100%; margin: 0; }

/* ---------- Tabellen: nie zeichenweise umbrechen, eigener Scroll-Rahmen ---------- */
td, th, td *, th * { overflow-wrap: break-word; word-break: normal; }
th { font-size: .85rem; font-weight: 700; color: var(--cs-muted); white-space: nowrap; }
.cs-tabelle { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 1em; border-radius: var(--cs-radius); }
.cs-tabelle > table { margin: 0; }
.cs-tabelle:focus-visible { outline: 3px solid var(--cs-primary); outline-offset: 2px; }
@media (max-width: 767px) {
	.cs-tabelle > table, [class$="-scroll"] > table, [class*="-scroll "] > table { min-width: 100%; width: max-content; max-width: none; }
	.cs-tabelle td, .cs-tabelle th { white-space: nowrap; }
	.cs-tabelle td:last-child { white-space: normal; min-width: 140px; }
}

/* ---------- Formulare: grosse Felder, 16 px (kein iOS-Zoom) ---------- */
.cs-main input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]):not([type=button]):not([type=range]):not([type=color]):not([type=file]),
.cs-main select, .cs-main textarea {
	font-size: 16px !important; min-height: 44px; border-radius: 10px;
}
.cs-main textarea { min-height: 96px; }
.cs-main input[type=file] { font-size: 15px; max-width: 100%; }
.cs-main label { line-height: 1.35; }
.cs-main input:focus-visible, .cs-main select:focus-visible, .cs-main textarea:focus-visible { outline: 3px solid var(--cs-primary); outline-offset: 1px; border-color: var(--cs-primary); }

/* ---------- Knöpfe aller Module (cs-btn, csi-btn, csf-btn, csk-btn, csh-btn-sec, …): gleiche Form, 44 px ---------- */
.cs-main :is([class$="-btn"], [class*="-btn "], [class*="-btn-"], [class$="-linkbtn"], [class*="-linkbtn "]):is(a, button, label, summary),
.cs-main button[type=submit], .cs-main input[type=submit], .cs-main input[type=button] {
	min-height: 44px; border-radius: 10px; font-size: 15px; line-height: 1.2;
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	padding-left: max(14px, 1em); padding-right: max(14px, 1em); text-decoration: none;
}
.cs-main input[type=submit], .cs-main input[type=button] { display: inline-block; }
.cs-main :is([class$="-btn"], [class*="-btn "]):is(a, button):hover { filter: brightness(1.06); }

/* ---------- Karten/Boxen aller Module: gleiche Ecken, Linien, Abstände ---------- */
.cs-main :is([class$="-card"], [class*="-card "], [class$="-box"], [class*="-box "], .cs-tile, .cs-stile, .cs-mod) {
	border-radius: var(--cs-radius); border-color: var(--cs-line); min-width: 0;
}
.cs-main :is([class$="-card"], [class*="-card "], [class$="-box"], [class*="-box "]) { margin-bottom: 16px; }
.cs-main :is([class$="-grid"], [class*="-grid "]) > :is([class$="-card"], [class*="-card "], [class$="-box"], [class*="-box "]) { margin-bottom: 0; }
.cs-main :is([class$="-hint"], [class*="-hint "], .cs-muted, .csb-muted) { color: var(--cs-muted); }
.cs-main :is([class$="-msg"], [class*="-msg "]) { border-radius: 10px; }
.cs-main .entry-content h2 { font-size: 1.35rem; margin: 1.2em 0 .5em; }
.cs-main .entry-content h3 { font-size: 1.12rem; }

/* ---------- Dashboard «Mein Verein»: Tablet 3–4 Spalten ---------- */
@media (min-width: 600px) {
	.cs-main .cs-sgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
	.cs-main .cs-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cs-main .cs-modgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	.cs-main .cs-sgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.cs-main .cs-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.cs-main .cs-modgrid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.cs-main .cs-stile { min-height: 112px; padding: 16px 14px; }
.cs-main .cs-sprung a { min-height: 44px; padding: 8px 14px; background: var(--cs-card); }

/* ---------- Modul-Navigation (verein-Plugin: .cs-nav, .cs-nav-bar, .cs-nav-a, .cs-nav-i, .cs-nav-l) ---------- */
/* Tablet quer + Desktop (≥ 600 px, ausser Tablet hoch): feste Reiterleiste unter der Kopfleiste */
@media (min-width: 600px) {
	.cs-main .cs-nav {
		position: sticky; top: calc(var(--cs-kopf-h) + var(--cs-ab-h)); z-index: 900;
		margin: 0 -16px 16px; padding: 8px 16px; background: var(--cs-bg);
		box-shadow: 0 1px 0 var(--cs-line);
	}
	.cs-main .cs-nav-bar { gap: 8px; }
	.cs-main .cs-nav a.cs-nav-a, .cs-main .cs-more summary { min-height: 44px; padding: 8px 14px; font-size: 15px; background: var(--cs-card); border: 1px solid var(--cs-line); }
	.cs-main .cs-nav a.cs-nav-a.on { background: var(--cs-primary); border-color: var(--cs-primary); color: var(--cs-on-primary) !important; }
	.cs-main .cs-more { position: static; }
	.cs-main .cs-more[open] { flex-basis: auto; }
	.cs-main .cs-more-list {
		position: absolute; left: 16px; right: 16px; top: calc(100% + 4px); z-index: 901;
		max-height: min(70vh, 560px); overflow-y: auto; box-shadow: 0 12px 32px rgba(0,0,0,.18);
	}
	.cs-main .cs-more-zu { width: 44px; height: 44px; }
	.cs-main .cs-more-g { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* Tablet hoch (600–1023 px, Hochformat): App-Leiste unten mit allen Hauptbereichen + «Mehr»-Sheet */
@media (min-width: 600px) and (max-width: 1023px) and (orientation: portrait) {
	body.cs-app-theme:has(.cs-nav-bar) { --cs-bottom-space: 84px; }
	.cs-main .cs-nav { position: static; margin: 0; padding: 0; background: none; box-shadow: none; }
	.cs-main .cs-nav-bar {
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 999;
		display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0;
		padding: 0 max(12px, calc((100vw - 760px) / 2)) env(safe-area-inset-bottom, 0px);
		background: var(--cs-card); border-top: 1px solid var(--cs-line); box-shadow: 0 -4px 16px rgba(0,0,0,.06);
	}
	.cs-main .cs-nav a.cs-nav-a, .cs-main .cs-more summary {
		display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
		min-height: 66px; min-width: 0; padding: 8px 4px 7px; border: 0; border-radius: 0; background: transparent;
		font-size: 12.5px; font-weight: 600; white-space: nowrap;
	}
	.cs-main .cs-nav .cs-nav-i { font-size: 24px; line-height: 1.1; }
	.cs-main .cs-nav .cs-nav-l { display: block; max-width: 100%; }
	.cs-main .cs-nav .cs-nav-v { display: none; }
	.cs-main .cs-more summary .cs-nav-l { display: block; }
	.cs-main .cs-nav-bar > a.cs-nav-a.on { background: transparent; color: var(--cs-primary) !important; box-shadow: inset 0 3px 0 var(--cs-primary); }
	.cs-main .cs-nav-bar > a.cs-nav-a.on .cs-nav-l { text-decoration: underline; text-decoration-color: var(--cs-primary); text-decoration-thickness: 2px; text-underline-offset: 3px; }
	.cs-main .cs-more { display: block; min-width: 0; position: relative; }
	.cs-main .cs-more[open] summary { background: var(--cs-sek); color: var(--cs-ink) !important; }
	.cs-main .cs-more-n.cs-nav-d { position: absolute; top: 5px; left: 50%; margin-left: 8px; background: var(--cs-primary); color: var(--cs-on-primary); font-size: 11px; line-height: 17px; min-width: 18px; }
	.cs-main .cs-more[open]::before { content: ""; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 998; }
	.cs-main .cs-more-list {
		position: fixed; left: 50%; right: auto; top: auto; transform: translateX(-50%); width: min(760px, 100vw);
		bottom: calc(66px + env(safe-area-inset-bottom, 0px)); z-index: 1000; margin: 0;
		max-height: min(70vh, calc(100vh - 120px)); border-radius: 18px 18px 0 0; padding: 16px 18px 20px;
	}
	.cs-main .cs-more-g { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	html.cs-sheet-offen { overflow: hidden; }
}
/* Ab 1.0.2 – Tablet quer + Desktop (Querformat ≥ 1024 px): Modul-Navigation als feste linke Seitenleiste mit Icon + Text */
@media (min-width: 1024px) and (orientation: landscape) {
	body.cs-app-theme:has(.cs-nav-bar) { --cs-side-w: 232px; }
	body.cs-app-theme:has(.cs-nav-bar) .cs-main,
	body.cs-app-theme:has(.cs-nav-bar) .cs-footer { margin-left: calc(var(--cs-side-w) + max(0px, (100vw - var(--cs-side-w) - var(--cs-wrap)) / 2)); margin-right: auto; max-width: min(var(--cs-wrap), calc(100vw - var(--cs-side-w))); padding-left: 28px; padding-right: 28px; }
	.cs-main .cs-nav {
		position: fixed; left: 0; top: calc(var(--cs-kopf-h) + var(--cs-ab-h) + env(safe-area-inset-top, 0px)); bottom: 0; z-index: 900;
		width: var(--cs-side-w, 232px); margin: 0; padding: 16px 12px; overflow-y: auto;
		background: var(--cs-card); border-right: 1px solid var(--cs-line); box-shadow: none;
	}
	.cs-main .cs-nav-bar { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 4px; }
	.cs-main .cs-nav a.cs-nav-a, .cs-main .cs-more summary {
		display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 12px;
		width: 100%; min-height: 48px; padding: 10px 14px; border: 0; border-radius: 10px; background: transparent;
		font-size: 15.5px; font-weight: 600; white-space: normal; text-align: left;
	}
	.cs-main .cs-nav a.cs-nav-a:hover, .cs-main .cs-more summary:hover { background: var(--cs-sek); }
	.cs-main .cs-nav a.cs-nav-a.on { background: var(--cs-primary); color: var(--cs-on-primary) !important; }
	.cs-main .cs-nav .cs-nav-i { font-size: 22px; width: 26px; text-align: center; flex: 0 0 26px; }
	.cs-main .cs-nav .cs-nav-l { display: none; }
	.cs-main .cs-nav .cs-nav-v { display: inline; }
	.cs-main .cs-more summary .cs-nav-l { display: inline; }
	.cs-main .cs-more { display: block; margin-top: 8px; border-top: 1px solid var(--cs-line); padding-top: 8px; }
	.cs-main .cs-more-n.cs-nav-d { margin-left: auto; background: var(--cs-chip); color: var(--cs-chip-ink); }
	.cs-main .cs-more[open] summary { background: var(--cs-ink); color: var(--cs-bg) !important; }
	.cs-main .cs-more[open]::before { content: ""; position: fixed; inset: 0; left: var(--cs-side-w, 232px); background: rgba(0,0,0,.3); z-index: 998; }
	.cs-main .cs-more-list {
		position: fixed; left: calc(var(--cs-side-w, 232px) + 12px); right: auto; top: calc(var(--cs-kopf-h) + var(--cs-ab-h) + 12px); bottom: 16px;
		width: min(760px, calc(100vw - var(--cs-side-w, 232px) - 28px)); max-height: none; overflow-y: auto; z-index: 1000; margin: 0; padding: 18px 20px;
	}
	.cs-main .cs-more-g { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Handy: Bottom-Bar des Plugins – Ziele mind. 44 px, Sheet-Schliessen gross genug */
@media (max-width: 599px) {
	.cs-main .cs-more-zu { width: 44px; height: 44px; }
	.cs-main .cs-nav-bar > a.cs-nav-a, .cs-main .cs-more summary { min-height: 62px; }
}

/* ---------- Push-Glocke (Perfecty): oben in der Kopfleiste statt über dem Inhalt/der Bottom-Bar ---------- */
body.cs-app-theme .perfecty-push-settings-container {
	position: fixed; left: auto; bottom: auto !important;
	top: calc(env(safe-area-inset-top, 0px) + var(--cs-ab-h) + 8px);
	right: calc(max(0px, (100vw - var(--cs-wrap)) / 2) + 16px + 52px);
	z-index: 1001;
}
@media (min-width: 600px) {
	body.cs-app-theme .perfecty-push-settings-container { right: calc(max(0px, (100vw - var(--cs-wrap)) / 2) + 16px + 104px); }
}
body.cs-app-theme .perfecty-push-settings-container #perfecty-push-settings-open,
body.cs-app-theme .perfecty-push-settings-container #perfecty-push-settings-open svg { width: 44px; height: 44px; }
body.cs-app-theme .perfecty-push-settings-container #perfecty-push-settings-open svg { padding: 11px; background-color: var(--cs-kopf-hover); color: var(--cs-head-ink); fill: currentColor; box-shadow: none; }
body.cs-app-theme .perfecty-push-settings-container #perfecty-push-settings-open svg:hover { padding: 10px; background-color: var(--cs-kopf-flaeche); }
body.cs-app-theme .perfecty-push-settings-container #perfecty-push-settings-form {
	position: absolute; top: 52px; right: 0; width: min(320px, calc(100vw - 32px)); margin: 0; color: var(--cs-ink); background: var(--cs-card);
	box-shadow: 0 12px 32px rgba(0,0,0,.18);
}
body.cs-app-theme:has(.perfecty-push-settings-container) .cs-header-inner .cs-brand { margin-right: 52px; }
html.cs-sheet-offen .perfecty-push-settings-container, body.cs-nav-offen .perfecty-push-settings-container { display: none !important; }

/* ---------- Admin-Leiste (nur Admins): nie umbrechen ---------- */
#wpadminbar { height: 32px; overflow: hidden; }
@media (max-width: 782px) { #wpadminbar { height: 46px; } }
#wpadminbar #wp-admin-bar-top-secondary > li:not(#wp-admin-bar-my-account) { display: none; }
@media (max-width: 1023px) { #wpadminbar .ab-top-menu > li#wp-admin-bar-site-name ~ li:not(#wp-admin-bar-edit):not(#wp-admin-bar-new-content) { display: none; } }

@media print {
	.cs-header, .cs-overlay, .cs-footer, #wpadminbar, .csbr-fs { display: none !important; }
	body { background: #fff; color: #000; }
	.cs-main { max-width: 100%; padding: 0; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } html { scroll-behavior: auto; } }

/* =====================================================================
   Ab 1.1.0: oeffentliche Vereins-Startseite, News, Teams, Vorstand, Kontakt (Klassen cs-st-*)
   ===================================================================== */
.cs-start { display: block; }
.cs-st-sek { margin: 0 0 28px; }
.cs-st-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.cs-st-kopf h2 { margin: 0; font-size: 1.7rem; font-weight: 800; letter-spacing: .01em; }
.cs-st-alle { font-size: .95rem; font-weight: 700; white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; color: var(--cs-primary); }
html[data-cs-modus="hell"] .cs-st-alle { color: var(--cs-ink); }
.cs-st-alle:hover { text-decoration: underline; }
.cs-st-leer { color: var(--cs-muted); background: var(--cs-card); border: 1px dashed var(--cs-line); border-radius: var(--cs-radius); padding: 14px 16px; }
.cs-st-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 10px 20px; border-radius: 10px; border: 0; cursor: pointer;
	background: var(--cs-primary); color: var(--cs-on-primary) !important; font-family: var(--cs-font-head); font-size: 18px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; text-decoration: none !important; line-height: 1.1; }
.cs-st-btn:hover { filter: brightness(1.06); }
.cs-st-btn-sek { background: var(--cs-sek); color: var(--cs-ink) !important; }
.cs-st-plakette { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; background: var(--cs-live); color: #fff; }
.cs-st-plakette-team { background: var(--cs-chip); color: var(--cs-chip-ink); text-transform: none; letter-spacing: 0; flex-shrink: 0; }
.cs-st-msg { padding: 12px 16px; border-radius: var(--cs-radius); font-weight: 700; }
.cs-st-msg-ok { background: #e7f6ec; background: color-mix(in srgb, var(--cs-ok) 16%, var(--cs-card)); color: var(--cs-ink); border: 1px solid var(--cs-ok); }
.cs-st-msg-err { background: #fdecea; background: color-mix(in srgb, var(--cs-danger) 14%, var(--cs-card)); color: var(--cs-ink); border: 1px solid var(--cs-danger); }

/* Hero: dunkle Tafel mit schraeger Flaeche in der Hauptfarbe (wie auf clubseite.ch) */
.cs-st-hero { position: relative; overflow: hidden; margin: -16px -16px 24px; padding: 28px 20px 26px; color: var(--cs-tafel-ink);
	background: linear-gradient(120deg, var(--cs-tafel) 66%, var(--cs-primary) 66%); border-bottom: 4px solid var(--cs-primary); }
.cs-st-hero-in { position: relative; max-width: 640px; }
.cs-st-logo { display: block; width: auto; max-width: 140px; height: 64px; object-fit: contain; margin: 0 0 14px; }
.cs-st-logo-ini { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: var(--cs-tafel-ink); color: var(--cs-tafel); font-family: var(--cs-font-head); font-weight: 800; font-size: 1.3rem; border: 3px solid var(--cs-primary); }
.cs-st-titel { margin: 0; max-width: 78%; font-size: clamp(2.2rem, 9.6vw, 3.6rem); line-height: .92; font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: 0; color: inherit; }
.cs-st-titel em { display: block; font-style: italic; color: var(--cs-score); }
.cs-st-slogan { margin: 10px 0 0; max-width: 70%; font-weight: 600; opacity: .92; }
.cs-st-cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; }
.cs-st-hero .cs-st-btn { background: var(--cs-score); color: var(--cs-tafel) !important; }
.cs-st-hero .cs-st-btn-2 { background: transparent; color: var(--cs-tafel-ink) !important; box-shadow: inset 0 0 0 2px var(--cs-tafel-ink); text-transform: none; letter-spacing: 0; font-family: var(--cs-font); font-size: 16px; }
@media (min-width: 768px) {
	.cs-st-hero { margin: 0 0 28px; border-radius: 16px; padding: 40px 36px; }
	.cs-st-titel { max-width: 70%; }
}

/* Live/Resultate: dunkle Tafel */
.cs-st-res { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cs-st-resz { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px 10px; padding: 14px 16px; border-radius: var(--cs-radius); background: var(--cs-tafel); color: var(--cs-tafel-ink) !important; text-decoration: none !important; }
.cs-st-resz.ist-live { box-shadow: inset 4px 0 0 var(--cs-live); }
.cs-st-res-t { font-weight: 700; min-width: 0; }
.cs-st-res-g { text-align: right; }
.cs-st-res-s { font-family: var(--cs-font-head); font-size: 2rem; font-weight: 800; font-variant-numeric: tabular-nums; padding: 0 10px; border-radius: 8px; color: var(--cs-score); background: rgba(255,255,255,.08); }
.cs-st-res-m { grid-column: 1 / -1; text-align: center; color: var(--cs-tafel-ink); opacity: .78; font-size: .85rem; }

/* Termine: Datum-Kachel links, Text, Team-Plakette rechts */
.cs-st-term { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cs-st-termz { display: flex; align-items: center; gap: 14px; padding: 12px 14px; background: var(--cs-card); border: 1px solid var(--cs-line); border-radius: var(--cs-radius); color: var(--cs-ink) !important; text-decoration: none !important; min-height: 64px; }
a.cs-st-termz:hover { border-color: var(--cs-ink); }
.cs-st-datum { flex: 0 0 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 52px; border-radius: 10px; background: var(--cs-chip); color: var(--cs-chip-ink); font-size: .72rem; font-weight: 700; text-transform: uppercase; line-height: 1.05; }
.cs-st-datum b { font-family: var(--cs-font-head); font-size: 1.6rem; font-weight: 800; color: var(--cs-num); }
.cs-st-term-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.cs-st-term-t b { font-weight: 800; }
.cs-st-term-t small { color: var(--cs-muted); font-size: .9rem; }

/* News: Karten mit Bild (oben Vereinsfarbe) */
.cs-st-news-g { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 600px) { .cs-st-news-g { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 768px) { .cs-st-news-g { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cs-st-news-k { margin: 0; }
.cs-st-news-k a { display: flex; flex-direction: column; height: 100%; background: var(--cs-card); border: 1px solid var(--cs-line); border-top: 4px solid var(--cs-primary); border-radius: var(--cs-radius); overflow: hidden; color: var(--cs-ink) !important; text-decoration: none !important; }
.cs-st-news-k a:hover { box-shadow: 0 6px 18px rgba(0,0,0,.08); border-color: var(--cs-primary); }
.cs-st-bild { display: block; aspect-ratio: 16 / 9; background: var(--cs-sek); background: linear-gradient(135deg, var(--cs-sek), var(--cs-line)); overflow: hidden; }
.cs-st-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cs-st-bild-leer { display: block; width: 100%; height: 100%; }
.cs-st-news-txt { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px 14px; }
.cs-st-news-txt b { font-family: var(--cs-font-head); font-size: 1.3rem; font-weight: 700; line-height: 1.1; text-transform: uppercase; }
.cs-st-news-txt small { color: var(--cs-muted); }
.cs-st-bearb-hinweis { color: var(--cs-muted); font-size: .9rem; margin-top: 16px; }

/* Teams: Chips auf der Startseite, Liste mit Foto/Initialen auf der Teamseite */
.cs-st-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cs-st-chips a, .cs-st-chips span { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border-radius: 999px; background: var(--cs-chip); border: 1px solid var(--cs-line); color: var(--cs-chip-ink) !important; font-weight: 700; text-decoration: none !important; }
.cs-st-chips a:hover { background: var(--cs-primary); color: var(--cs-on-primary) !important; border-color: var(--cs-primary); }
.cs-st-gruppe { font-size: 1.1rem; margin: 20px 0 10px; }
.cs-st-teamliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 768px) { .cs-st-teamliste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cs-st-teamz { display: flex; align-items: center; gap: 14px; padding: 12px 14px; background: var(--cs-card); border: 1px solid var(--cs-line); border-radius: var(--cs-radius); color: var(--cs-ink) !important; text-decoration: none !important; min-height: 72px; }
.cs-st-teamz:hover { border-color: var(--cs-ink); }
.cs-st-teamz img, .cs-st-team-ini { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
/* 1.4.3: Kader mit Spielerfotos (Platzhalter bei Widerspruch) */
.cs-st-kader { margin: 22px 0; }
.cs-st-kader h3 { margin: 0 0 12px; }
.cs-st-kader-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 14px 10px; }
.cs-st-kader-liste li { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: 14px; font-weight: 600; color: var(--cs-ink); min-width: 0; overflow-wrap: anywhere; }
.cs-st-kader-liste img, .cs-st-kader-ph { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; background: var(--cs-chip, #E8EEF0); }
.cs-st-kader-ph { display: grid; place-items: center; color: var(--cs-chip-ink, #1A2B33); font-family: var(--cs-font-head, inherit); font-size: 28px; font-weight: 700; }
.cs-st-team-ini, .cs-st-kreis { display: flex; align-items: center; justify-content: center; background: var(--cs-primary); color: var(--cs-on-primary); font-weight: 900; }
.cs-st-teamz > span:not(.cs-st-team-ini):not(.cs-st-pfeil) { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.cs-st-teamz small { color: var(--cs-muted); }
.cs-st-pfeil { font-size: 1.6rem; color: var(--cs-muted); }
.cs-st-zurueck a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; text-decoration: none; color: var(--cs-ink); }
.cs-st-team-h { font-size: 2.1rem; font-weight: 800; margin: 0 0 12px; }
.cs-st-teamfoto { margin: 0 0 14px; }
.cs-st-teamfoto img { display: block; width: 100%; border-radius: var(--cs-radius); }
.cs-st-fakten { display: grid; gap: 10px; margin: 0 0 16px; }
@media (min-width: 600px) { .cs-st-fakten { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cs-st-fakten > div { background: var(--cs-card); border: 1px solid var(--cs-line); border-top: 4px solid var(--cs-primary); border-radius: var(--cs-radius); padding: 12px 14px; }
.cs-st-fakten dt { font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--cs-muted); }
.cs-st-fakten dd { margin: 2px 0 0; font-weight: 700; }

/* Personen (Vorstand, Ansprechpersonen) */
.cs-st-personen { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 10px; }
@media (min-width: 768px) { .cs-st-personen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cs-st-person { display: flex; align-items: flex-start; gap: 14px; padding: 14px; background: var(--cs-card); border: 1px solid var(--cs-line); border-radius: var(--cs-radius); }
.cs-st-kreis { flex: 0 0 52px; width: 52px; height: 52px; border-radius: 50%; font-size: 1.1rem; }
.cs-st-person > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.cs-st-person small { color: var(--cs-muted); }
.cs-st-person a { display: inline-flex; align-items: center; min-height: 36px; font-weight: 600; }

/* Kontakt */
.cs-st-kontakt-k { background: var(--cs-card); border: 1px solid var(--cs-line); border-left: 6px solid var(--cs-primary); border-radius: var(--cs-radius); padding: 16px 18px; margin: 0 0 20px; }
.cs-st-kontakt-k h2 { margin: 0 0 8px; font-size: 1.25rem; }
.cs-st-kontakt-l { display: flex; flex-direction: column; gap: 2px; }
.cs-st-kontakt-l a, .cs-st-person a { display: inline-flex; align-items: center; min-height: 40px; font-weight: 700; color: var(--cs-ink); text-decoration: underline; text-decoration-color: var(--cs-primary); text-decoration-thickness: 2px; }
.cs-st-login-noetig a:not(.cs-st-btn) { color: var(--cs-ink); font-weight: 700; text-decoration-color: var(--cs-primary); text-decoration-thickness: 2px; }
.cs-st-login-noetig { background: var(--cs-card); color: var(--cs-ink); border: 2px solid var(--cs-primary); border-radius: var(--cs-radius); padding: 16px; }

/* Formulare (Bearbeiten, Kontakt) */
.cs-st-form p { margin: 0 0 14px; }
.cs-st-form label { display: block; font-weight: 700; margin: 0 0 4px; }
.cs-st-form small { display: block; color: var(--cs-muted); font-size: .85rem; margin-top: 4px; }
.cs-st-form label input[type=checkbox] { vertical-align: middle; margin-right: 6px; }
.cs-st-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.cs-st-klein { color: var(--cs-muted); font-size: .85rem; }
.cs-st-bearb { margin: 24px 0 0; background: var(--cs-card); border: 1px solid var(--cs-line); border-radius: var(--cs-radius); }
.cs-st-bearb > summary { cursor: pointer; padding: 12px 16px; min-height: 48px; font-weight: 800; list-style: none; display: flex; align-items: center; }
.cs-st-bearb > summary::-webkit-details-marker { display: none; }
.cs-st-bearb[open] > summary { border-bottom: 1px solid var(--cs-line); }
.cs-st-bearb > form { padding: 16px; }

/* Galerie (WordPress-Galerie-Block) im App-Look */
.cs-main .wp-block-gallery.has-nested-images { gap: 8px; }
.cs-main .wp-block-gallery.has-nested-images figure.wp-block-image { border-radius: 12px; overflow: hidden; }
.cs-main .wp-block-gallery.has-nested-images figure.wp-block-image img { aspect-ratio: 1 / 1; object-fit: cover; height: 100%; }
.cs-main .wp-block-gallery.has-nested-images figure.wp-block-image figcaption { font-size: .8rem; padding: 18px 8px 6px; }
.cs-main .wp-block-gallery + h2, .cs-main .wp-block-gallery + h3 { margin-top: 28px; }

/* ================================================================== */
/* Ab 1.2.0: Schriften, Desktop-Menue mit Dropdowns, Redaktion, Alben  */
/* ================================================================== */
h1, h2, h3, h4, .cs-brand, .cs-page-title, .cs-page-title-gross { font-family: var(--cs-font-head, var(--cs-font)); }

/* Desktop-Menue: erst ab 1024 px, sonst Hamburger */
nav.cs-desk { display: none; }
@media (min-width: 1024px) {
	.cs-header-inner { max-width: 1100px; }
	nav.cs-desk { display: block; flex: 1 1 auto; min-width: 0; overflow: visible; }
	body:not(.cs-desk-voll) .cs-header .cs-nav-toggle-label { display: none; }
	body.cs-desk-voll nav.cs-desk { visibility: hidden; position: absolute; left: -9999px; }
	.cs-dmenu, .cs-dmenu ul { list-style: none; margin: 0; padding: 0; }
	.cs-dmenu { display: flex; align-items: center; justify-content: flex-end; gap: 2px; flex-wrap: nowrap; }
	.cs-dmenu > li { position: relative; display: flex; align-items: center; white-space: nowrap; }
	.cs-dmenu > li > a {
		display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 10px;
		color: var(--cs-head-ink) !important; text-decoration: none !important; font-family: var(--cs-font-head); font-weight: 700; font-size: 1.15rem; text-transform: uppercase; letter-spacing: .03em;
		}
		.cs-dmenu > li > a:hover, .cs-dmenu > li > a:focus-visible, .cs-dmenu > li.cs-auf > a { background: var(--cs-kopf-hover); }
		.cs-dmenu > li.current-menu-item > a, .cs-dmenu > li.current-menu-ancestor > a, .cs-dmenu > li.current_page_item > a { box-shadow: inset 0 -3px 0 var(--cs-primary); }
	.cs-dmenu > li.menu-item-has-children > a { padding-right: 4px; }
	.cs-dm-btn {
		display: inline-flex; align-items: center; justify-content: center; width: 28px; min-height: 44px; padding: 0; margin: 0 4px 0 0;
		border: 0; border-radius: 8px; background: transparent; color: var(--cs-head-ink); cursor: pointer;
	}
	.cs-dm-btn svg { width: 12px; height: 8px; transition: transform .15s; }
	.cs-dm-btn:hover, .cs-dm-btn:focus-visible { background: var(--cs-kopf-hover); }
	.cs-dmenu > li.cs-auf .cs-dm-btn svg { transform: rotate(180deg); }
	.cs-dmenu .sub-menu {
		display: none; position: absolute; top: 100%; left: 0; z-index: 1001; min-width: 220px; padding: 8px;
		background: var(--cs-card); color: var(--cs-ink); border: 1px solid var(--cs-line); border-radius: var(--cs-radius);
		box-shadow: 0 10px 30px rgba(0,0,0,.16);
	}
	.cs-dmenu > li:last-child .sub-menu, .cs-dmenu > li:nth-last-child(2) .sub-menu { left: auto; right: 0; }
	.cs-dmenu > li:hover > .sub-menu, .cs-dmenu > li:focus-within > .sub-menu, .cs-dmenu > li.cs-auf > .sub-menu { display: block; }
	.cs-dmenu .sub-menu a {
		display: flex; align-items: center; min-height: 44px; padding: 8px 12px; border-radius: 8px;
		color: var(--cs-ink) !important; text-decoration: none !important; font-weight: 600; white-space: normal;
	}
	.cs-dmenu .sub-menu a:hover, .cs-dmenu .sub-menu a:focus-visible { background: var(--cs-sek); color: var(--cs-ink) !important; }
	.cs-dmenu .sub-menu .current-menu-item > a { box-shadow: inset 3px 0 0 var(--cs-primary); }
	.cs-dmenu li.cs-menu-login > a, .cs-dmenu li.cs-menu-dashboard > a { background: var(--cs-primary); color: var(--cs-on-primary) !important; margin-left: 6px; }
	.cs-dmenu li.cs-menu-logout > a { border: 2px solid var(--cs-kopf-hover); border-color: color-mix(in srgb, var(--cs-head-ink) 45%, transparent); margin-left: 6px; }
}

/* Redaktion: Seite bearbeiten */
.cs-red .cs-red-tb { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; position: sticky; top: calc(var(--cs-kopf-h) + 4px); z-index: 5; background: var(--cs-card); padding: 4px 0; }
.cs-red .cs-red-tb[hidden], .cs-red .cs-red-ed[hidden], .cs-red textarea[hidden] { display: none; }
.cs-red .cs-red-tb button { min-height: 44px; min-width: 44px; padding: 0 12px; border: 1px solid var(--cs-line); border-radius: 10px; background: var(--cs-bg); color: var(--cs-ink); font-weight: 700; cursor: pointer; }
.cs-red .cs-red-tb button:hover { border-color: var(--cs-primary); }
.cs-red .cs-red-ed { min-height: 220px; max-height: 70vh; overflow-y: auto; padding: 12px 14px; margin: 0 0 6px; border: 1px solid var(--cs-feld-rand); border-radius: 10px; background: var(--cs-card); color: var(--cs-ink); line-height: 1.55; }
.cs-red .cs-red-ed:focus { outline: 3px solid var(--cs-primary); outline-offset: 1px; }
.cs-red .cs-red-ed img { max-width: 100%; height: auto; }
.cs-red .cs-red-ed h2:first-child, .cs-red .cs-red-ed p:first-child { margin-top: 0; }
.cs-red-sc { display: inline-block; margin: 4px 0; padding: 6px 12px; border-radius: 999px; background: var(--cs-sek); color: var(--cs-muted); font-size: .9rem; font-weight: 700; user-select: none; }
.cs-red-platz { padding: 10px 12px; border: 2px dashed var(--cs-primary); border-radius: 10px; color: var(--cs-primary); font-weight: 700; }
.cs-red fieldset { border: 1px solid var(--cs-line); border-radius: var(--cs-radius); padding: 12px 14px; margin: 0 0 14px; min-width: 0; }
.cs-red legend { font-weight: 800; padding: 0 6px; }
.cs-red-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-red-merk { margin: 0 0 8px; }
.cs-red-merk > summary { cursor: pointer; font-weight: 700; color: var(--cs-primary); min-height: 44px; display: flex; align-items: center; }
.cs-red-merk > div { font-size: .95rem; }

/* Fotoalben [cs_galerie] */
.cs-gal-alben { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.cs-gal-album a { display: block; height: 100%; background: var(--cs-card); border: 1px solid var(--cs-line); border-radius: var(--cs-radius); overflow: hidden; color: var(--cs-ink); text-decoration: none; }
.cs-gal-album a:hover { border-color: var(--cs-primary); }
.cs-gal-cover { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; background: var(--cs-sek); font-size: 2.4rem; overflow: hidden; }
.cs-gal-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-gal-info { display: block; padding: 10px 14px 12px; }
.cs-gal-info b { display: block; font-family: var(--cs-font-head); font-size: 1.3rem; font-weight: 700; text-transform: uppercase; line-height: 1.1; }
.cs-gal-info small { color: var(--cs-muted); }
.cs-gal-titel { margin-top: 0; }
.cs-gal-raster { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(46%, 180px), 1fr)); margin: 0 0 16px; }
.cs-gal-bild { margin: 0; }
.cs-gal-bild a { display: block; border-radius: 10px; overflow: hidden; aspect-ratio: 1 / 1; background: var(--cs-sek); border: 1px solid var(--cs-line); }
.cs-gal-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-gal-bild figcaption { font-size: .75rem; color: var(--cs-muted); margin-top: 2px; }
.cs-gal-zeile { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: start; padding: 8px 0; border-bottom: 1px solid var(--cs-line); }
.cs-gal-zeile img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; }
.cs-gal-zeile p { margin: 0; min-width: 0; }
.cs-gal-weg { font-weight: 400 !important; margin-top: 6px !important; }
.cs-gal-fehlt { display: inline-block; padding: 0 8px; border-radius: 999px; background: #fdeeee; background: color-mix(in srgb, var(--cs-danger) 16%, var(--cs-card)); color: var(--cs-ink); border: 1px solid var(--cs-danger); font-size: .8rem; }
.csbr-merkblatt ul { padding-left: 1.2em; } .csbr-merkblatt li { margin: 0 0 6px; }
.csbr-merkblatt h3 { font-size: 1rem; margin: .8em 0 .4em; }
.csbr-vorlage { margin: 0 0 12px; padding: 12px 16px; border-left: 4px solid var(--cs-primary); background: var(--cs-bg); border-radius: 0 10px 10px 0; }
@media (min-width: 1024px) {
	.cs-dmenu .sub-menu .sub-menu { display: block; position: static; min-width: 0; padding: 0 0 0 12px; border: 0; box-shadow: none; background: transparent; }
	.cs-dmenu .sub-menu .cs-dm-btn { display: none; }
	.cs-dmenu .sub-menu li.cs-menu-login > a, .cs-dmenu .sub-menu li.cs-menu-dashboard > a { background: transparent; margin: 0; }
	.cs-dm-mehr > .sub-menu { left: auto !important; right: 0; max-height: calc(100vh - 90px); overflow-y: auto; }
}
/* Push-Glocke am Computer: ganz rechts im breiten Kopf, das Menue macht Platz */
@media (min-width: 1024px) {
	body.cs-app-theme .perfecty-push-settings-container { right: calc(max(0px, (100vw - 1100px) / 2) + 16px); }
	body.cs-app-theme.cs-desk-voll .perfecty-push-settings-container { right: calc(max(0px, (100vw - 1100px) / 2) + 16px + 104px); }
	body.cs-app-theme:has(.perfecty-push-settings-container):not(.cs-desk-voll) nav.cs-desk { margin-right: 52px; }
}

/* ================================================================== */
/* Ab 1.3.0: Farbmuster (Tokens), Schriften wie clubseite.ch, Dunkelmodus */
/* ================================================================== */
/* Knoepfe: Barlow Condensed, Grossbuchstaben (wie clubseite.ch) */
.cs-btn, .cs-app .cs-btn, .cs-login .cs-btn { font-family: var(--cs-font-head); font-size: 17px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.cs-main .cs-btn.sec { font-weight: 700; }
.cs-brand-name { font-family: var(--cs-font-head); }
.cs-footer-name { font-family: var(--cs-font-head); text-transform: uppercase; letter-spacing: .03em; font-size: 1.05rem; }
.cs-footer { background: transparent; }
.cs-dash-gt { font-family: var(--cs-font-head); text-transform: uppercase; }
.cs-404 .cs-404-zahl { font-family: var(--cs-font-head); color: var(--cs-num); }
/* Kennzahlen/Zahlen in Kacheln */
.cs-main .cs-tile .n, .cs-main .cs-stile b, .cs-main .cs-stile strong { color: var(--cs-num); }
/* Hinweis-/Warnflaechen: dezente Variante von --cs-warn, kein Gelb */
.cs-main :is(.cs-hinweis, .cs-warn, .notice-warning) { background: color-mix(in srgb, var(--cs-warn) 14%, var(--cs-card)); border: 1px solid var(--cs-warn); color: var(--cs-ink); border-radius: 10px; }
/* Statusplaketten (ok / teilweise / offen) – lesbar in beiden Modi */
.cs-main :is(.cs-status-ok, .cs-ok) { background: color-mix(in srgb, var(--cs-ok) 18%, transparent); color: var(--cs-ink); }
.cs-main :is(.cs-status-teil, .cs-teil) { background: color-mix(in srgb, var(--cs-warn) 18%, transparent); color: var(--cs-ink); }
.cs-main :is(.cs-status-offen, .cs-offen) { background: color-mix(in srgb, var(--cs-danger) 16%, transparent); color: var(--cs-ink); }

/* Sprachumschalter (clubseite-sprachen) im Kopf/Menue */
.cs-overlay .csspr-switch a, .cs-header .csspr-switch a { background: var(--cs-kopf-flaeche) !important; color: var(--cs-head-ink) !important; }
.cs-overlay .csspr-switch a.on, .cs-header .csspr-switch a.on { background: var(--cs-primary) !important; color: var(--cs-on-primary) !important; }

/* Schriftgroesse «A A+ A++» (clubseite-branding): im Menue bzw. in der Fusszeile, nie schwebend ueber dem Inhalt */
.cs-overlay .csbr-fs, .cs-footer .csbr-fs { position: static !important; display: inline-flex; margin: 0; box-shadow: none; }
.cs-overlay-fs { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 20px 0 0; padding: 12px 16px; border-radius: var(--cs-radius); background: var(--cs-kopf-flaeche); }
.cs-overlay-fs > span { font-weight: 700; }
.cs-overlay .csbr-fs { background: transparent !important; border-color: color-mix(in srgb, var(--cs-head-ink) 40%, transparent) !important; }
.cs-overlay .csbr-fs button { color: var(--cs-head-ink) !important; }
.cs-overlay .csbr-fs button[aria-pressed="true"] { background: var(--cs-primary) !important; color: var(--cs-on-primary) !important; }
.cs-footer-fs { display: flex; align-items: center; gap: 10px; width: 100%; }

/* ---------- Dunkelmodus (data-cs-modus="dunkel" von clubseite-verein) ---------- */
html[data-cs-modus="dunkel"] { color-scheme: dark; }
html[data-cs-modus="hell"] { color-scheme: light; }
html[data-cs-modus="dunkel"] body { background: var(--cs-bg); color: var(--cs-ink); }
html[data-cs-modus="dunkel"] :is(input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=range]):not([type=color]), select, textarea) {
	background: var(--cs-card) !important; color: var(--cs-ink) !important; border-color: var(--cs-feld-rand) !important;
}
html[data-cs-modus="dunkel"] :is(input, textarea)::placeholder { color: var(--cs-muted); opacity: 1; }
html[data-cs-modus="dunkel"] select option { background: var(--cs-card); color: var(--cs-ink); }
html[data-cs-modus="dunkel"] :is(table, .cs-tabelle) { background: transparent; color: var(--cs-ink); }
html[data-cs-modus="dunkel"] :is(th, td) { border-color: var(--cs-line); }
html[data-cs-modus="dunkel"] thead th, html[data-cs-modus="dunkel"] tr:nth-child(even) td { background: color-mix(in srgb, var(--cs-ink) 4%, transparent); }
html[data-cs-modus="dunkel"] :is(code, kbd, pre) { background: var(--cs-sek); color: var(--cs-ink); border: 1px solid var(--cs-line); border-radius: 6px; }
html[data-cs-modus="dunkel"] code, html[data-cs-modus="dunkel"] kbd { padding: 1px 5px; }
html[data-cs-modus="dunkel"] pre { padding: 12px 14px; overflow-x: auto; }
html[data-cs-modus="dunkel"] pre code { border: 0; padding: 0; background: none; }
html[data-cs-modus="dunkel"] .cs-main :is(.wp-block-image img, .entry-content img, .cs-st-teamfoto img, .cs-gal-bild img) { outline: 1px solid var(--cs-line); outline-offset: -1px; }
html[data-cs-modus="dunkel"] .cs-main :is(hr, .wp-block-separator) { border-color: var(--cs-line); }
html[data-cs-modus="dunkel"] .cs-main blockquote { border-left: 4px solid var(--cs-primary); color: var(--cs-ink); }
html[data-cs-modus="dunkel"] .cs-main a:not([class]) { color: var(--cs-primary); }
html[data-cs-modus="dunkel"] .cs-tile, html[data-cs-modus="dunkel"] .cs-main [class$="-card"] { box-shadow: none; }
html[data-cs-modus="dunkel"] .cs-st-res-s { background: rgba(255,255,255,.06); }
html[data-cs-modus="dunkel"] .cs-st-resz { border: 1px solid var(--cs-line); }
html[data-cs-modus="dunkel"] .cs-st-hero { border-bottom-color: var(--cs-primary); }
html[data-cs-modus="dunkel"] .cs-st-chips a:hover { background: var(--cs-primary); color: var(--cs-on-primary) !important; }
html[data-cs-modus="dunkel"] a:hover { color: var(--cs-ink); }
html[data-cs-modus="dunkel"] .cs-red .cs-red-tb { background: var(--cs-card); }
html[data-cs-modus="dunkel"] #wpadminbar { color-scheme: light; }
/* Schalter in der Fusszeile nur am Computer (dort ist das Menue-Overlay nicht offen); Handy/Tablet: im Menue */
@media (max-width: 1023px) { .cs-footer-fs { display: none !important; } }
body.cs-desk-voll .cs-footer-fs { display: none !important; }
.cs-overlay-fs[hidden], .cs-footer-fs[hidden] { display: none !important; }
/* Menue offen: feste Leisten anderer Module (z. B. Live-Band oben) duerfen das Menue nicht ueberdecken */
body.cs-nav-offen :is(.cslt-band, .cslt-band-fix, .cslt-th), body:has(#cs-nav-toggle:checked) :is(.cslt-band, .cslt-band-fix, .cslt-th) { display: none !important; }
@media (min-width: 768px) { .cs-st-hero { background: linear-gradient(115deg, var(--cs-tafel) 76%, var(--cs-primary) 76%); } }
/* Handy-Leiste unten: aktiver Eintrag in der Hauptfarbe auf der Leistenfarbe (Muster-Vertrag: barbg/baron) */
@media (max-width: 599px) {
	.cs-main .cs-nav-bar > a.cs-nav-a.on, .cs-app .cs-nav-bar > a.cs-nav-a.on { background: transparent !important; color: var(--cs-primary) !important; box-shadow: inset 0 3px 0 var(--cs-primary); }
	.cs-main .cs-nav-bar > a.cs-nav-a.on .cs-nav-l { color: inherit; font-weight: 800; }
}

/* ================================================================== */
/* Ab 1.4.0: Desktop-Ansicht von clubseite-verein (body.cs-desk)       */
/* Nur ab 1100 px, nur angemeldet auf App-Seiten: Seitenleiste und      */
/* Kopfleiste kommen vom Plugin – der Theme-Kopf tritt zurück, der      */
/* Inhalt nutzt die volle Breite. Handy/Tablet und Gaeste unveraendert. */
/* ================================================================== */
@media (min-width: 1100px) {
	body.cs-app-theme.cs-desk .cs-header { display: none; }
	body.cs-app-theme.cs-desk { --cs-kopf-h: 64px; --cs-wrap: 100%; }
	body.cs-app-theme.cs-desk .cs-main,
	body.cs-app-theme.cs-desk:has(.cs-nav-bar) .cs-main { max-width: none; margin: 0; padding: 22px 28px 40px; }
	body.cs-app-theme.cs-desk .cs-footer,
	body.cs-app-theme.cs-desk:has(.cs-nav-bar) .cs-footer { max-width: none; margin: 0 28px; padding-left: 0; padding-right: 0; }
	body.cs-app-theme.cs-desk.cs-desk-dash .cs-page-title { display: none; }
	body.cs-app-theme.cs-desk .cs-main .cs-app { max-width: none; }
	/* Push-Glocke: unten rechts statt im (ausgeblendeten) Theme-Kopf */
	body.cs-app-theme.cs-desk .perfecty-push-settings-container { top: auto !important; bottom: 20px !important; right: 20px !important; }
	body.cs-app-theme.cs-desk .perfecty-push-settings-container #perfecty-push-settings-open svg { background-color: var(--cs-primary); color: var(--cs-on-primary); box-shadow: 0 4px 14px rgba(0,0,0,.25); }
	/* Ab 1.4.1 (Kundenwunsch 16.10.): Modulseiten nutzen am PC die Breite (bis 1280 px Inhalt, linksbuendig wie das Dashboard).
	   Die Module setzen fuer das Handy eigene schmale Rahmen (z. B. 760/900 px, mittig) – am PC aufgehoben. */
	body.cs-app-theme.cs-desk .cs-main,
	body.cs-app-theme.cs-desk:has(.cs-nav-bar) .cs-main { max-width: calc(1280px + 56px); }
	body.cs-app-theme.cs-desk .cs-footer,
	body.cs-app-theme.cs-desk:has(.cs-nav-bar) .cs-footer { max-width: 1280px; }
	body.cs-app-theme.cs-desk .cs-main .entry-content > :not(style):not(script):not(link),
	body.cs-app-theme.cs-desk .cs-main .entry-content > :not(style):not(script) > :is(div, section, form):is([class$="-wrap"], [class$="-app"], [class$="-inner"]) { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
	body.cs-app-theme.cs-desk .cs-main .entry-content > .cs-profil { max-width: 880px !important; }
	/* Ab 1.5.1 (W23): App-Modus Spieler & Eltern (body.cs-app-modus, clubseite-verein 1.11) – die Volle-Breite-Regel oben gilt dort NICHT.
	   Inhalt wie auf dem Handy als eine Spalte, max. 640 px, mittig; der Seitentitel steht in derselben Spalte. */
	/* Ab 1.5.2 (W24): gilt nur für die Familien-App; Verwaltungsrollen (body.cs-app-rolle) behalten die breiten Modulseiten. */
	body.cs-app-theme.cs-desk.cs-app-modus:not(.cs-app-rolle) .cs-main .entry-content > :not(style):not(script):not(link),
	body.cs-app-theme.cs-desk.cs-app-modus:not(.cs-app-rolle) .cs-main .entry-content > .cs-profil { max-width: 640px !important; margin-left: auto !important; margin-right: auto !important; }
	body.cs-app-theme.cs-desk.cs-app-modus:not(.cs-app-rolle) .cs-main .cs-page-title,
	body.cs-app-theme.cs-desk.cs-app-modus:not(.cs-app-rolle) .cs-main .cs-desk-titel { max-width: 640px; margin-left: auto; margin-right: auto; }
	/* Seitentitel als grosse Ueberschrift (wie «Dashboard») */
	body.cs-app-theme.cs-desk .cs-page-title { margin: 4px 0 18px; font-family: var(--cs-font-head, inherit); font-weight: 800; font-size: 34px; line-height: 1.05; text-transform: uppercase; letter-spacing: .01em; color: var(--cs-ink); opacity: 1; }
}

/* ================================================================== */
/* 1.4.2 (W17): Oeffentliche Seiten angemeldet am PC (body.cs-desk)     */
/* News, Teams, Galerie, Kontakt, Sponsoren, Vorstand, Mitglied werden: */
/* lesbare Zeilenlaenge, Formulare nicht ueber 1100 px gezogen,         */
/* Emojis (span.cs-emo aus den Modulen) am PC ausgeblendet.             */
/* ================================================================== */
@media (min-width: 1100px) {
	body.cs-app-theme.cs-desk .cs-emo { display: none; }
	html body.cs-app-theme.cs-desk .cs-main .entry-content > :is(p, h2, h3, ul, ol, blockquote):not(style):not(script):not(link) { max-width: 78ch !important; }
	body.cs-app-theme.cs-desk .cs-main .entry-content form:is(.csmg-form, .cs-st-form),
	body.cs-app-theme.cs-desk .cs-main .entry-content > .cs-st-kontakt-form,
	body.cs-app-theme.cs-desk .cs-main .entry-content .cs-st-form-wrap { max-width: 860px !important; }
	/* Bearbeiten-Leisten (Redaktion) unter dem Inhalt nicht ueber die ganze Breite */
	body.cs-app-theme.cs-desk .cs-main details.cs-red { max-width: 860px; }
	/* Bild-/Kachelraster: Karten nicht ueberbreit, bei wenigen Eintraegen nicht gestreckt */
	body.cs-app-theme.cs-desk .cs-main .entry-content img { max-width: 100%; height: auto; }
}

/* Ab 1.5.0: App-Hülle Spieler & Eltern (clubseite-verein 1.11, body.cs-app-modus) – auf dem Handy/Tablet übernimmt die untere Leiste, der Theme-Kopf entfällt wie in der Vorlage. */
@media (max-width:1099px){
	body.cs-app-modus .cs-header{display:none}
	body.cs-app-modus .cs-main{padding-top:max(12px,env(safe-area-inset-top,0px))}
	body.cs-app-modus .cs-footer{display:none}
	body.cs-app-modus .perfecty-push-settings-container{position:fixed!important;top:auto!important;left:auto!important;right:12px!important;bottom:calc(84px + env(safe-area-inset-bottom,0px))!important;transform:none!important;z-index:998}
}

/* Ab 1.5.2 (W24): App-Hülle für alle Rollen (clubseite-verein 1.12, body.cs-app-rolle) – Handy: Modulseiten bekommen unten Platz für die Leiste,
   Theme-Kopf/-Fuss entfallen wie bei Eltern/Spieler (Regel oben gilt für body.cs-app-modus). Breite Tabellen scrollen in sich statt die Seite. */
@media (max-width:1099px){
	body.cs-app-rolle .cs-main{overflow-x:clip}
}

/* ---------- Ab 1.6.0 (Welle 28): Öffentliche Seite hell nach Skizze Web/WebHandy ----------
   Gilt für Muster «Hell» und «Eigene Farben (hell)» ausserhalb der App-Hülle: weisser Kopf mit Rand,
   heller Bereich oben, helle Resultat-Karten, weisse Fusszeile. Nur Tokens – Hauptfarbe (auch Vereinsfarbe) bleibt Akzent. */
:is(html[data-cs-muster="hell"], html[data-cs-muster="eigen"][data-cs-modus="hell"]) body:not(.cs-app-modus) {
	--cs-head-bg: var(--cs-card); --cs-head-ink: var(--cs-ink);
	--cs-kopf-hover: color-mix(in srgb, var(--cs-ink) 8%, transparent);
	--cs-kopf-flaeche: color-mix(in srgb, var(--cs-ink) 6%, transparent);
}
:is(html[data-cs-muster="hell"], html[data-cs-muster="eigen"][data-cs-modus="hell"]) body:not(.cs-app-modus) .cs-header { background: var(--cs-card); color: var(--cs-ink); box-shadow: 0 1px 0 var(--cs-line); }
:is(html[data-cs-muster="hell"], html[data-cs-muster="eigen"][data-cs-modus="hell"]) body:not(.cs-app-modus) .cs-overlay { background: var(--cs-card); color: var(--cs-ink); }
:is(html[data-cs-muster="hell"], html[data-cs-muster="eigen"][data-cs-modus="hell"]) body:not(.cs-app-modus) .cs-brand-name { color: var(--cs-ink); }
:is(html[data-cs-muster="hell"], html[data-cs-muster="eigen"][data-cs-modus="hell"]) body:not(.cs-app-modus) .cs-st-hero {
	background: var(--cs-card); background: linear-gradient(120deg, var(--cs-card) 66%, color-mix(in srgb, var(--cs-primary) 12%, var(--cs-card)) 66%);
	color: var(--cs-ink); border: 1px solid var(--cs-line); border-bottom: 4px solid var(--cs-primary);
}
@media (min-width: 768px) {
	:is(html[data-cs-muster="hell"], html[data-cs-muster="eigen"][data-cs-modus="hell"]) body:not(.cs-app-modus) .cs-st-hero { background: linear-gradient(115deg, var(--cs-card) 76%, color-mix(in srgb, var(--cs-primary) 12%, var(--cs-card)) 76%); }
}
:is(html[data-cs-muster="hell"], html[data-cs-muster="eigen"][data-cs-modus="hell"]) body:not(.cs-app-modus) .cs-st-logo-ini { background: var(--cs-primary); color: var(--cs-on-primary); border-color: var(--cs-primary); }
:is(html[data-cs-muster="hell"], html[data-cs-muster="eigen"][data-cs-modus="hell"]) body:not(.cs-app-modus) .cs-st-titel em { color: var(--cs-primary); }
:is(html[data-cs-muster="hell"], html[data-cs-muster="eigen"][data-cs-modus="hell"]) body:not(.cs-app-modus) .cs-st-slogan { color: var(--cs-muted); opacity: 1; }
:is(html[data-cs-muster="hell"], html[data-cs-muster="eigen"][data-cs-modus="hell"]) body:not(.cs-app-modus) .cs-st-hero .cs-st-btn { background: var(--cs-primary); color: var(--cs-on-primary) !important; }
:is(html[data-cs-muster="hell"], html[data-cs-muster="eigen"][data-cs-modus="hell"]) body:not(.cs-app-modus) .cs-st-hero .cs-st-btn-2 { background: var(--cs-card); color: var(--cs-primary) !important; box-shadow: inset 0 0 0 2px var(--cs-primary); }
:is(html[data-cs-muster="hell"], html[data-cs-muster="eigen"][data-cs-modus="hell"]) body:not(.cs-app-modus) .cs-st-resz { background: var(--cs-card); color: var(--cs-ink) !important; border: 1px solid var(--cs-line); }
:is(html[data-cs-muster="hell"], html[data-cs-muster="eigen"][data-cs-modus="hell"]) body:not(.cs-app-modus) .cs-st-res-s { background: var(--cs-chip); color: var(--cs-chip-ink); }
:is(html[data-cs-muster="hell"], html[data-cs-muster="eigen"][data-cs-modus="hell"]) body:not(.cs-app-modus) .cs-st-res-m { color: var(--cs-muted); opacity: 1; }
:is(html[data-cs-muster="hell"], html[data-cs-muster="eigen"][data-cs-modus="hell"]) body:not(.cs-app-modus) .cs-footer { background: var(--cs-card); border-top: 0; box-shadow: 0 0 0 100vmax var(--cs-card), 0 -1px 0 100vmax var(--cs-line); clip-path: inset(-1px -100vmax 0); margin-top: 28px; }
:is(html[data-cs-muster="hell"], html[data-cs-muster="eigen"][data-cs-modus="hell"]) body:not(.cs-app-modus) .cs-footer-links a { color: var(--cs-muted); }