/**
 * CIVITAS - modernes Overlay-Theme
 *
 * Diese Datei wird auf jeder Seite als letztes CSS geladen und überschreibt
 * gezielt die Farben, Typografie und Abstände des alten Bootstrap-3/"Neon"-
 * Themes. Die Struktur/Klassen des Themes selbst bleiben unverändert, es
 * werden nur Optik-Eigenschaften (Farbe, Radius, Schatten, Abstand)
 * überschrieben - dadurch ist das Risiko für Layout-Brüche gering.
 */

/* Schriften kommen DSGVO-konform vom eigenen Server (assets/css/fonts.css,
   in jeder Seite vor dieser Datei eingebunden) - nicht mehr von Google. */

:root {
	--c-primary: #2A6F8F;
	--c-primary-dark: #1F5570;
	--c-primary-light: #EAF3F7;
	--c-accent: #E0A32E;
	--c-accent-2: #FF6B6B;
	--c-success: #2F9E5B;
	--c-danger: #D6534A;
	--c-warning: #E0A32E;
	--c-info: #2A6F8F;
	--c-text: #2B2E33;
	--c-text-muted: #6B7280;
	--c-bg: #F4F6F8;
	--c-surface: #FFFFFF;
	--c-border: #E2E5EA;
	--c-radius: 16px;
	--c-radius-sm: 8px;
	--c-shadow: 0 2px 10px rgba(20, 30, 40, 0.07);
	--c-font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Helvetica, Arial, sans-serif;
}

/* ---------- Grundlagen ---------- */

/* Bootstrap 3 macht Bilder nur mit .img-responsive automatisch responsiv;
   ohne dieses Netz könnte z.B. das 250px breite Logo auf sehr schmalen
   Bildschirmen (schmaler als ~290px Inhaltsbreite) horizontales Scrollen
   auslösen. */
img {
	max-width: 100%;
	height: auto;
}

body,
.page-body {
	font-family: var(--c-font);
	color: var(--c-text);
	background: var(--c-bg);
	-webkit-font-smoothing: antialiased;
}

a {
	color: var(--c-primary);
}

a:hover,
a:focus {
	color: var(--c-primary-dark);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--c-font);
	font-weight: 600;
	color: var(--c-text);
}

hr {
	border-color: var(--c-border);
}

/* bootstrap.css setzt .help-block auf ein kaum lesbares #d4d4d4 (Kontrast
   auf weißem Grund weit unter dem WCAG-AA-Minimum) und definiert diese
   Regel dabei sogar NACH den .text-warning/.text-danger/...-Klassen -
   ein zusätzlich gesetztes .text-warning auf einem .help-block (z.B. der
   "Anmeldeart kann nicht mehr geändert werden"-Hinweis in der
   Modulverwaltung) wurde dadurch bislang komplett von diesem viel zu
   hellen Grauton überschrieben statt in seiner eigentlichen Warnfarbe zu
   erscheinen. Hier global auf gut lesbare Farben umgestellt, statt das
   pro Seite einzeln zu flicken. */
.help-block {
	color: var(--c-text-muted);
}

.help-block.text-warning {
	color: #574802;
}

.help-block.text-danger {
	color: #ac1818;
}

.help-block.text-success {
	color: #045702;
}

.help-block.text-info {
	color: #2c7ea1;
}

/* ---------- Sidebar / Hauptnavigation ---------- */

.page-container .sidebar-menu {
	background: #22303B;
}

.sidebar-menu .main-menu > li > a {
	color: #C7D2D9;
}

.sidebar-menu .main-menu > li.active > a,
.sidebar-menu .main-menu > li > a:hover,
.sidebar-menu .main-menu > li.active > a i,
.sidebar-menu .main-menu > li:hover > a {
	color: #FFFFFF;
	background: rgba(255, 255, 255, 0.06);
}

.sidebar-menu .main-menu > li.active > a {
	border-left: 3px solid var(--c-accent);
}

.sidebar-menu .main-menu > li ul {
	background: rgba(0, 0, 0, 0.12);
}

.sidebar-menu .badge-success {
	background: var(--c-accent);
	border-color: var(--c-accent);
}

/* Die Logo-Box hatte hier bisher ein separates, fast schwarzes Eigen-Grau
   (#1B262F) statt des Sidebar-Grundtons (#22303B) - dadurch entstand oben
   links eine harte Kante zwischen zwei unterschiedlich dunklen Flächen.
   Ohne eigenen Hintergrund scheint stattdessen einfach die Sidebar-Farbe
   durch, wodurch die linke Spalte als eine durchgehende Fläche wirkt. */

/* ---------- Kopfzeile / Breadcrumb ---------- */

.main-content .user-info h3 {
	color: var(--c-text);
	font-weight: 600;
}

/* Lange E-Mail-Adresse rechts im Kopf: kürzt sich mit „…“, statt sich über
   den Namen der Gemeinde zu legen (.links-list bricht nicht um; auf
   Tabletbreite lag die Adresse sonst über dem Titel). */
.main-content .links-list {
	max-width: 100%;
}
.main-content .links-list > li:first-child {
	max-width: calc(100% - 8.5em);
	vertical-align: top;
}
.main-content .links-list > li:first-child > a {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
}

.breadcrumb {
	background: transparent;
	padding-left: 0;
}

.breadcrumb > li + li:before {
	color: var(--c-text-muted);
}

/* ---------- Panels / Karten ---------- */

.panel {
	border: 1px solid var(--c-border);
	border-radius: var(--c-radius);
	box-shadow: var(--c-shadow);
}

.panel-heading {
	background: var(--c-surface);
	border-bottom: 1px solid var(--c-border);
	border-radius: var(--c-radius) var(--c-radius) 0 0;
	overflow: hidden;
}

.panel-primary > .panel-heading,
.panel.panel-primary > .panel-heading {
	background: var(--c-primary);
	border-color: var(--c-primary);
}

.panel-primary > .panel-heading .panel-title,
.panel-primary > .panel-heading .panel-title * {
	color: #FFFFFF;
}

/* Bootstrap färbt Badges in einer .panel-primary-Kopfzeile hart auf
   Hintergrund #fff um (für sein eigenes, längst überschriebenes Grau-Theme
   kalibriert - assets/css/bootstrap.css, ".panel-primary > .panel-heading
   .badge"). Zusammen mit der weißen Titel-Schrift direkt darüber ergab das
   "weiß auf weiß" und machte z.B. den "Mehrtägig"-Hinweis auf "Abwesenheit
   melden" komplett unleserlich. Higher-specificity-Override, damit Badges
   ihre eigene, für sich passende Farbe (badge-info, badge-success, ...)
   behalten - betrifft jede Badge in jedem .panel-primary-Titel, nicht nur
   diese eine Stelle. */
.panel-primary > .panel-heading .badge.badge-info    { background-color: #21a9e1; color: #fff; }
.panel-primary > .panel-heading .badge.badge-success { background-color: var(--c-success); color: #fff; }
.panel-primary > .panel-heading .badge.badge-danger  { background-color: var(--c-danger); color: #fff; }
.panel-primary > .panel-heading .badge.badge-warning { background-color: var(--c-warning); color: #fff; }
/* Gleiches Problem bei der Fragetyp-Pille im Titel (admin_umfrageergebnisse.php):
   Sie erbte die weiße Titelschrift auf ihrem hellen Grund. */
.panel-primary > .panel-heading .panel-title .umfrage-typ-pill { color: var(--c-primary-dark); }

.panel-title {
	font-weight: 600;
}

.panel-title > i {
	margin-right: 6px;
}

.panel-title .panel-subtitle {
	display: block;
	font-size: 12px;
	font-weight: 400;
	opacity: .85;
	margin-top: 3px;
}

/* Trennzeile innerhalb eines Panels, um mehrere Themen (z.B. "Mutter" /
   "Vater", oder "Taufe" / "Schule" / "Konfirmationsspruch") sauber
   voneinander abzugrenzen, ohne dafür ein eigenes Panel zu brauchen. */
.form-subsection-label {
	margin: 20px 0 15px;
	padding-top: 20px;
	border-top: 1px dashed var(--c-border);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--c-text-muted);
}

.form-subsection-label:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}

.panel-body {
	background: var(--c-surface);
}

.panel-danger > .panel-heading {
	background: var(--c-danger);
	border-color: var(--c-danger);
	color: #FFFFFF;
}

.panel-success > .panel-heading {
	background: var(--c-success);
	border-color: var(--c-success);
	color: #FFFFFF;
}

/* ---------- Kachel-Statistiken (Admin-Dashboard) ---------- */

.tile-stats {
	border-radius: var(--c-radius);
	background: var(--c-primary-dark);
	box-shadow: var(--c-shadow);
}

.tile-stats:hover {
	background: var(--c-primary-dark);
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(20, 30, 40, 0.12);
}

.tile-stats.tile-red,
.tile-stats.tile-red:hover {
	background: var(--c-danger);
}

.tile-stats.tile-green,
.tile-stats.tile-green:hover {
	background: var(--c-success);
}

.tile-stats.tile-blue,
.tile-stats.tile-blue:hover {
	background: var(--c-primary);
}

.tile-stats.tile-pink,
.tile-stats.tile-pink:hover {
	background: var(--c-accent-2);
}

/* ---------- Fortschritts-Kacheln (Konfi-Startseite / Gamification) ---------- */

.tile-progress {
	border-radius: var(--c-radius);
	box-shadow: var(--c-shadow);
	transition: transform .15s ease, box-shadow .15s ease;
}

.tile-progress:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(20, 30, 40, 0.14);
}

.tile-progress.tile-red {
	background: linear-gradient(135deg, #C24C3F 0%, #96342A 100%);
}

.tile-progress.tile-orange {
	background: linear-gradient(135deg, #A85A18 0%, #7E4310 100%);
}

.tile-progress.tile-green {
	background: linear-gradient(135deg, #268049 0%, #1C6636 100%);
}

/* Noch nicht begonnen: ruhig statt rot - am Anfang des Jahres ist 0 % normal. */
.tile-progress.tile-neutral {
	background: linear-gradient(135deg, #4A5968 0%, #394551 100%);
}

.tile-progress .tile-footer {
	background: rgba(0, 0, 0, 0.15);
	border-radius: 0 0 var(--c-radius) var(--c-radius);
}

/* Die im Theme vorgegebene 70%-Deckkraft für Untertitel ergibt auf diesen
   dunkleren Verlaufsfarben zu wenig Kontrast zum Hintergrund (v.a. am
   helleren Ende des Gradients) - deshalb hier angehoben und zusätzlich mit
   einem dezenten Schlagschatten abgesichert. */
.tile-progress .tile-header h3,
.tile-progress .tile-footer h4,
.tile-progress .pct-counter {
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.tile-progress .tile-header span,
.tile-progress .tile-footer > span {
	color: rgba(255, 255, 255, 0.92);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.tile-progress .pct-counter {
	font-size: 15px;
	font-weight: 800;
}

/* Themenblock-Seite: Die Zahl steht in der Überschrift des Kopfs. Das Theme
   macht jeden span im Kopf zur kleinen Unterzeile - hier nicht. Das „%“ steht
   hinter dem span, weil die Zähl-Animation nur die Zahl schreibt. */
.tile-progress .tile-header h3 .pct-counter {
	display: inline;
	margin: 0;
	font-size: inherit;
	color: inherit;
}

/* Kleines Erfolgserlebnis: Trophäe, sobald ein Modul (fast) geschafft ist */
.tile-progress.tile-green .tile-header h3:after {
	content: " 🏆";
}

/* Leerzustand, falls (noch) keine Module für die eigene KU-Gruppe hinterlegt
   sind - sonst bliebe die Übersicht ein unerklärt leeres, weißes Feld. */
.module-leer {
	text-align: center;
	padding: 48px 20px;
	color: var(--c-text-muted);
	background: var(--c-surface);
	border-radius: var(--c-radius);
	border: 1px solid var(--c-border);
}

.module-leer i {
	font-size: 36px;
	display: block;
	margin-bottom: 12px;
	color: var(--c-border);
}

/* ---------- Buttons ---------- */

.btn {
	border-radius: var(--c-radius-sm);
	font-weight: 500;
	transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.btn-primary,
.btn-blue {
	background: var(--c-primary);
	border-color: var(--c-primary);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-blue:hover,
.btn-blue:focus {
	background: var(--c-primary-dark);
	border-color: var(--c-primary-dark);
}

.btn-success {
	background: var(--c-success);
	border-color: var(--c-success);
}

.btn-danger {
	background: var(--c-danger);
	border-color: var(--c-danger);
}

.btn-warning {
	background: var(--c-warning);
	border-color: var(--c-warning);
}

/* ---------- Formulare ---------- */

.form-control {
	border-radius: var(--c-radius-sm);
	border-color: var(--c-border);
	box-shadow: none;
}

.form-control:focus {
	border-color: var(--c-primary);
	box-shadow: 0 0 0 3px var(--c-primary-light);
}

.input-group-addon {
	background: var(--c-surface);
	border-color: var(--c-border);
	color: var(--c-text-muted);
	border-radius: var(--c-radius-sm);
}

label {
	font-weight: 500;
	color: var(--c-text);
}

/* ---------- Tabellen ---------- */

.table > thead > tr > th {
	background: var(--c-primary-light);
	color: var(--c-primary-dark);
	border-bottom: 2px solid var(--c-border);
	font-weight: 600;
}

.table > tbody > tr:hover > td {
	background: var(--c-primary-light);
}

.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td {
	border-color: var(--c-border);
}

/* ---------- Badges ---------- */

.badge {
	border-radius: 999px;
	font-weight: 600;
}

.badge-success {
	background: var(--c-success);
}

.badge-danger {
	background: var(--c-danger);
}

/* ---------- Login / Registrierung (zentrierte Karten-Ansicht) ---------- */

/* Der blaue "Hero"-Banner oben auf Login-/Registrierungsseiten wird bewusst
   NICHT als Gradient auf body selbst gemalt: body wächst bei mehrstufigen
   Formularen (z.B. register.php) per JavaScript nachträglich in der Höhe
   (Schritte werden ein-/ausgeblendet), und ein Gradient mit einem festen
   px-Farbwechsel relativ zur (sich ändernden) Body-Höhe wird von manchen
   Browsern (u.a. Safari) nach so einer Höhenänderung nicht sauber neu
   berechnet - das Ergebnis war ein zweites, fälschlich erneut blaues Band
   weiter unten auf der Seite. Stattdessen: body bekommt einen einfachen,
   flachen Hintergrund, und der Banner ist ein eigenes Element mit fixer
   Höhe, das unabhängig vom Seiteninhalt immer exakt gleich hoch bleibt. */
body.page-body:not(.skin-white) {
	position: relative;
	background: var(--c-bg);
	min-height: 100vh;
}

body.page-body:not(.skin-white):before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 340px;
	background: linear-gradient(180deg, var(--c-primary-dark) 0%, var(--c-primary) 100%);
	z-index: -1;
}

body.page-body:not(.skin-white) .panel {
	margin-top: 20px;
}

/* ---------- Registrierungs-Wizard ---------- */

.reg-steps {
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: 260px;
	margin: 0 auto 28px;
}

.reg-step-dot {
	width: 30px;
	height: 30px;
	border-radius: 999px;
	background: var(--c-border);
	color: var(--c-text-muted);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 700;
	flex: none;
	transition: background-color .15s ease, color .15s ease;
}

.reg-step-dot.is-active {
	background: var(--c-primary);
	color: #fff;
}

.reg-step-dot.is-done {
	background: var(--c-success);
	color: #fff;
}

.reg-step-line {
	flex: 1;
	height: 2px;
	background: var(--c-border);
	transition: background-color .15s ease;
}

.reg-step-line.is-done {
	background: var(--c-success);
}

/* Abschnitt innerhalb eines Registrierungsschritts (Anschrift, Schule …). */
.reg-abschnitt {
	margin: 18px 0 6px;
	font-weight: 700;
	color: var(--c-text);
}
.reg-freiwillig {
	font-weight: 400;
	color: var(--c-text-muted, #6B7280);
	font-size: 12px;
}

.reg-step-actions {
	margin-top: 10px;
	margin-bottom: 10px;
}

.reg-step-actions:after {
	content: "";
	display: table;
	clear: both;
}

/* ---------- Meilensteine (Gamification) ---------- */

/* Kurzangabe ("3 von 6 erreicht") im dunklen Panel-Header - Farbe explizit
   gesetzt statt auf Vererbung zu vertrauen, da .panel-heading > .panel-options
   im Basistheme (neon-core.css) nur die Position (float: right), aber keine
   Textfarbe festlegt. */
.achievements-zaehler {
	color: rgba(255, 255, 255, 0.85);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1;
	display: inline-block;
	margin-top: 12px;
}

.group-stat {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--c-primary-light);
	color: var(--c-primary-dark);
	border-radius: var(--c-radius-sm);
	padding: 12px 16px;
	margin-bottom: 16px;
	font-size: 14px;
}

.group-stat-icon {
	font-size: 22px;
	line-height: 1;
}

.badge-shelf {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.badge-item {
	position: relative;
	flex: 1 1 150px;
	max-width: 190px;
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--c-radius);
	padding: 14px 14px;
	text-align: center;
	transition: transform .15s ease, box-shadow .15s ease;
}

/* Erreicht = Gold/Akzentfarbe statt der bisherigen Signalfarbe --c-accent-2
   (#FF6B6B, sonst ausschließlich für "dringend/ungelesen"-Badges verwendet,
   z.B. .bottom-tab-bar__badge) - Rot an einem GESCHAFFTEN Meilenstein las
   sich wie eine Fehler-/Warnmarkierung statt wie eine Auszeichnung. */
.badge-item.is-earned {
	border-color: var(--c-accent);
	background: rgba(224, 163, 46, 0.06);
	box-shadow: 0 4px 14px rgba(224, 163, 46, 0.18);
}

.badge-item.is-earned:hover {
	transform: translateY(-2px);
}

.badge-item.is-locked {
	opacity: .55;
}

/* Zustand nicht nur über Farbe/Transparenz vermitteln (WCAG "Use of
   Color") - ein kleines Haken-Icon macht "erreicht" auch bei
   Farbfehlsichtigkeit oder auf einen flüchtigen Blick eindeutig. */
.badge-erreicht-marker {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: var(--c-accent);
	color: #fff;
	font-size: 11px;
}

.badge-item .badge-icon {
	font-size: 32px;
	line-height: 1;
	margin-bottom: 8px;
	filter: none;
}

.badge-item.is-locked .badge-icon {
	filter: grayscale(1);
}

.badge-item .badge-title {
	font-weight: 700;
	font-size: 14px;
	margin-bottom: 4px;
}

.badge-item .badge-desc {
	font-size: 12px;
	color: var(--c-text-muted);
	line-height: 1.4;
}

/* ---------- Feier-Modal bei neuem Abzeichen ---------- */

.achievement-modal-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(20, 30, 40, 0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	z-index: 2000;
}

.achievement-modal-backdrop.is-hidden {
	display: none;
}

.achievement-modal {
	position: relative;
	background: var(--c-surface);
	border-radius: var(--c-radius);
	box-shadow: 0 24px 60px rgba(20, 30, 40, 0.3);
	padding: 32px 28px 28px;
	max-width: 420px;
	width: 100%;
}

.achievement-modal-close {
	position: absolute;
	top: 12px;
	right: 14px;
	border: none;
	background: none;
	font-size: 22px;
	line-height: 1;
	color: var(--c-text-muted);
	cursor: pointer;
}

.achievement-modal-heading {
	font-size: 19px;
	font-weight: 800;
	margin-bottom: 18px;
	text-align: center;
}

.achievement-modal-item {
	display: flex;
	align-items: center;
	gap: 14px;
	background: var(--c-primary-light);
	border-radius: var(--c-radius-sm);
	padding: 14px 16px;
	margin-bottom: 12px;
}

.achievement-modal-icon {
	font-size: 30px;
	line-height: 1;
	flex: none;
}

.achievement-modal-title {
	font-weight: 700;
	font-size: 14px;
}

.achievement-modal-desc {
	font-size: 12px;
	color: var(--c-text-muted);
}

/* Rückmeldung zum Konfirmationsspruch (home.php, einmalig) - im Rahmen der
   Abzeichen-Feier; langer Spruch und Hinweis scrollen auf kleinen Handys. */
.spruch-rueckmeldung .achievement-modal {
	max-height: calc(100vh - 40px);
	max-height: calc(100dvh - 40px);
	overflow-y: auto;
}

/* Der Fokus liegt beim Öffnen auf dem ganzen Dialog - ohne Rahmen. */
.spruch-rueckmeldung .achievement-modal:focus {
	outline: none;
}

.spruch-rueckmeldung .achievement-modal-heading {
	margin-bottom: 10px;
}

.spruch-rueckmeldung__text {
	text-align: center;
	color: var(--c-text-muted);
	margin: 0 0 16px;
}

.spruch-rueckmeldung__spruch {
	margin: 0 0 14px;
	padding: 12px 16px;
	border-left: 4px solid var(--c-primary);
	background: var(--c-primary-light);
	border-radius: var(--c-radius-sm);
	font-size: 15px;
	font-style: italic;
	overflow-wrap: anywhere;
}

.spruch-rueckmeldung__spruch footer {
	margin-top: 6px;
	font-size: 12px;
	font-style: normal;
	color: var(--c-text-muted);
}

.spruch-rueckmeldung__hinweis {
	margin: 0 0 18px;
	padding: 12px 16px;
	border: 1px solid var(--c-border);
	border-radius: var(--c-radius-sm);
	font-size: 14px;
	overflow-wrap: anywhere;
}

.spruch-rueckmeldung__hinweis-titel {
	margin-bottom: 4px;
	font-size: 12px;
	font-weight: 700;
	color: var(--c-text-muted);
}

.spruch-rueckmeldung__spaeter {
	margin-top: 6px;
}

/* ---------- Ankündigungsfeed ---------- */

.announcement-feed {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.announcement-card {
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-left: 4px solid var(--c-primary);
	border-radius: var(--c-radius);
	box-shadow: var(--c-shadow);
	padding: 20px 22px;
}

.announcement-date {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 600;
	color: var(--c-text-muted);
	text-transform: uppercase;
	letter-spacing: .04em;
	margin-bottom: 6px;
}

.announcement-date i {
	color: var(--c-primary);
	font-size: 13px;
}

.announcement-title {
	margin: 0 0 8px;
	font-size: 18px;
	font-weight: 800;
}

.announcement-text {
	margin: 0;
	color: var(--c-text);
	line-height: 1.6;
}

/* ---------- Responsive Feinschliff ---------- */

@media (max-width: 767px) {
	.main-content {
		padding: 15px;
	}

	.panel-body {
		padding: 15px;
	}

	h1.margin-bottom {
		font-size: 22px;
	}

	.table-responsive .table {
		margin-bottom: 0;
	}

	.badge-item {
		flex: 1 1 120px;
	}
}

@media (max-width: 480px) {
	.btn {
		white-space: normal;
	}
}

/* ---------- Tabellen / DataTables auf dem Handy ---------- */
/* Die DataTables-Steuerelemente (Einträge pro Seite, Suche) sind von Haus
   aus schwebende, schmale Elemente ohne feste Breite (die Theme-Klasse
   "form-control" wird auf sie nie angewendet, u.a. weil der Aufruf von
   .select2() auf Seiten ohne eingebundenes select2 sang- und klanglos
   fehlschlägt). Auf schmalen Bildschirmen wirkte das dadurch abgeschnitten
   und ließ viel Leerraum stehen. Hier werden sie gestapelt und auf volle,
   fingerfreundliche Breite gebracht. Die Tabelle selbst bleibt seitlich
   wischbar (Bootstraps eingebautes .table-responsive-Verhalten) statt
   Spalten zu verstecken - dadurch bleiben auch breite Tabellen bedienbar. */
@media (max-width: 767px) {
	.dataTables_wrapper .dataTables_length,
	.dataTables_wrapper .dataTables_filter {
		float: none;
		width: 100%;
		text-align: left;
		margin-bottom: 10px;
	}

	.dataTables_wrapper .dataTables_length select,
	.dataTables_wrapper .dataTables_filter input {
		display: block;
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
		margin-left: 0;
		margin-top: 4px;
		padding: 8px 10px;
		border: 1px solid var(--c-border);
		border-radius: var(--c-radius-sm);
		font-size: 16px;
	}

	.dataTables_wrapper .dataTables_info,
	.dataTables_wrapper .dataTables_paginate {
		width: 100%;
		text-align: center;
	}

	.dataTables_wrapper .dataTables_paginate .paginate_button {
		padding: 8px 12px;
	}

	.table-responsive {
		-webkit-overflow-scrolling: touch;
	}
}

/* Wortfilter: Auf dem Handy stehen Eingabe, Checkbox und Knopf
   untereinander - ohne Abstand ragte die Checkbox in den Knopf. */
@media (max-width: 767px) {
	.form-inline .checkbox.wortfilter-option {
		margin-top: 10px;
		margin-bottom: 14px;
	}
}

/* ---------- Mobile Bottom-Tab-Navigation (Konfi-Bereich) ---------- */
/* Stellt auf kleinen Bildschirmen die vier Hauptziele ohne Aufklappen direkt
   bereit und ersetzt dort die alte Sidebar/Hamburger-Navigation komplett
   (siehe weiter unten). Seltener genutzte Punkte (Telefonnummern, Kirchen,
   Kennwort etc.) bleiben über das "Mehr"-Sheet erreichbar. Auf
   Desktop-Breiten bleibt die Bottom-Bar unsichtbar, dort bleibt die Sidebar
   die primäre Navigation. */

.bottom-tab-bar {
	display: none;
}

@media (max-width: 767px) {
	.bottom-tab-bar {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1030;
		background: var(--c-surface);
		border-top: 1px solid var(--c-border);
		box-shadow: 0 -2px 14px rgba(20, 30, 40, 0.08);
		padding-bottom: env(safe-area-inset-bottom, 0px);
	}

	.bottom-tab-bar__item {
		position: relative;
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		padding: 9px 4px 7px;
		color: var(--c-text-muted);
		font-size: 11px;
		font-weight: 600;
		text-decoration: none;
	}

	.bottom-tab-bar__item:hover,
	.bottom-tab-bar__item:focus {
		color: var(--c-primary);
		text-decoration: none;
	}

	.bottom-tab-bar__item i {
		font-size: 21px;
		line-height: 1;
	}

	.bottom-tab-bar__item.is-active {
		color: var(--c-primary);
	}

	.bottom-tab-bar__badge {
		position: absolute;
		top: 4px;
		right: calc(50% - 22px);
		min-width: 16px;
		height: 16px;
		padding: 0 4px;
		border-radius: 999px;
		background: var(--c-accent-2);
		color: #fff;
		font-size: 10px;
		font-weight: 700;
		line-height: 16px;
		text-align: center;
	}

	/* Platz für die fixierte Bottom-Bar lassen, damit Inhalt/Footer nicht
	   dahinter verschwinden - nur auf Seiten, die die Bottom-Bar tatsächlich
	   einbinden (Konfi-Bereich), nicht in der Administration. */
	.page-container:has(.bottom-tab-bar) .main-content {
		padding-bottom: 78px;
	}

	/* Das Theme wechselt .main-content hier von display:table-cell (füllt
	   dank Tabellen-Layout immer automatisch die volle Höhe) zu display:block
	   (nur so hoch wie der Inhalt) - bei kurzen Seiten blieb darunter eine
	   Lücke, durch die der graue Seitenhintergrund durchschien ("zweifarbiger"
	   Hintergrund). min-height:100vh auf .main-content allein reichte dafür
	   nicht zuverlässig (abhängig von der sich dynamisch ein-/ausblendenden
	   Safari-Symbolleiste). Robuster: der Seitenhintergrund wird auf diesen
	   Seiten direkt auf Weiß gesetzt, damit gar nichts Graues mehr
	   durchscheinen kann, unabhängig davon, wie hoch .main-content tatsächlich
	   gerendert wird. */
	body.page-body:has(.bottom-tab-bar) {
		background: var(--c-surface);
	}

	/* Die Bottom-Bar ersetzt auf dem Handy die komplette bisherige Kopfzeile
	   (Logo/Hamburger-Leiste der Sidebar sowie die redundante Titelzeile im
	   Content), statt parallel dazu zu existieren - die Bedienung läuft
	   vollständig über die Bottom-Bar bzw. das "Mehr"-Sheet. Die Bottom-Bar
	   selbst (samt "Mehr"-Sheet) wird von navbarUser.php innerhalb der
	   .sidebar-menu eingebunden, darum hier gezielt nur Logo-Leiste und
	   Hauptmenü ausblenden statt der ganzen .sidebar-menu - sonst
	   verschwindet die Bottom-Bar mit. */
	.page-container:has(.bottom-tab-bar) .sidebar-menu .logo-env,
	.page-container:has(.bottom-tab-bar) .sidebar-menu #main-menu {
		display: none;
	}

	.page-container:has(.bottom-tab-bar) .main-content > .row:has(.user-info),
	.page-container:has(.bottom-tab-bar) .main-content > hr {
		display: none;
	}

	/* Copyright-/Impressum-Zeile im Footer bringt auf dem Handy keinen Mehrwert
	   und kostet nur Platz - der Link lebt stattdessen im "Mehr"-Sheet. */
	.page-container:has(.bottom-tab-bar) footer.main {
		display: none;
	}

	/* Trifft sowohl den "Mehr"- als auch den "Mein Weg"-Tab - beide sind
	   <button>-Elemente (öffnen ein Sheet statt direkt zu verlinken) statt
	   <a>-Links wie die übrigen drei Tabs. Browser geben <button> von sich
	   aus ein eigenes Aussehen (u.a. grauer Hintergrund, Rahmen, Schatten,
	   iOS/Android-Tap-Highlight) - ohne vollständige Zurücksetzung sahen
	   beide dauerhaft "gedrückt"/hervorgehoben aus, unabhängig vom
	   tatsächlich aktiven Tab. Deckt bewusst auch :hover/:focus/:active ab,
	   da einzelne Browser dort eigene Hintergründe nachschieben. */
	.bottom-tab-bar__item--button {
		background: none;
		background-color: transparent;
		border: none;
		border-radius: 0;
		box-shadow: none;
		-webkit-appearance: none;
		appearance: none;
		-webkit-tap-highlight-color: transparent;
	}

	.bottom-tab-bar__item--button:hover,
	.bottom-tab-bar__item--button:focus,
	.bottom-tab-bar__item--button:active {
		background: none;
		background-color: transparent;
		box-shadow: none;
	}

	.bottom-tab-bar__item--button:focus-visible {
		outline: 2px solid var(--c-primary);
		outline-offset: -2px;
	}

	/* Primäre Tab-Seiten (Start/Termine/News/Profil): H1 und der aktive Tab in
	   der Bottom-Bar sagen bereits eindeutig, wo man ist - der Breadcrumb
	   würde dort nur denselben Titel ein zweites Mal zeigen. */
	.page-container:has(.bottom-tab-bar) .breadcrumb--primary {
		display: none;
	}

	/* Auf tieferen Unterseiten bleibt der Breadcrumb als reine "Wo bin ich"-
	   Orientierung sichtbar, aber ohne Rahmen/Kasten und ohne Link-Optik - die
	   eigentliche Navigation läuft über Bottom-Bar bzw. "Mehr"-Sheet. Das
	   Home-Icon-Element wird entfernt; das "/" davor kommt automatisch aus der
	   bestehenden li+li-Regel des Themes, das Ergebnis liest sich z.B. als
	   "/ Kennwort ändern". */
	.page-container:has(.bottom-tab-bar) .breadcrumb.bc-2 {
		background: none;
		border: none;
		padding: 0;
		margin: 0 0 10px 0;
		font-size: 13px;
	}

	.page-container:has(.bottom-tab-bar) .breadcrumb.bc-2 li:first-child {
		display: none;
	}

	.page-container:has(.bottom-tab-bar) .breadcrumb.bc-2 a {
		color: var(--c-text-muted);
		pointer-events: none;
		text-decoration: none;
	}
}

/* ---------- "Mehr"-Sheet (Bottom-Bar) ---------- */

.bottom-sheet-backdrop,
.bottom-sheet {
	display: none;
}

@media (max-width: 767px) {
	.bottom-sheet-backdrop:not([hidden]) {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(20, 30, 40, .35);
		z-index: 1035;
	}

	.bottom-sheet:not([hidden]) {
		display: flex;
		flex-direction: column;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		max-height: 75vh;
		background: var(--c-surface);
		border-radius: 20px 20px 0 0;
		box-shadow: 0 -4px 24px rgba(20, 30, 40, .16);
		z-index: 1040;
		padding-bottom: env(safe-area-inset-bottom, 0px);
		animation: bottomSheetIn .18s ease-out;
	}

	@keyframes bottomSheetIn {
		from { transform: translateY(16px); opacity: 0; }
		to { transform: translateY(0); opacity: 1; }
	}

	.bottom-sheet__handle {
		flex: none;
		width: 40px;
		height: 4px;
		margin: 10px auto 2px;
		border-radius: 999px;
		background: var(--c-border);
	}

	.bottom-sheet__header {
		flex: none;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px 18px 6px;
	}

	.bottom-sheet__header h2 {
		margin: 0;
		font-size: 17px;
		font-weight: 800;
	}

	.bottom-sheet__close {
		width: 32px;
		height: 32px;
		border: none;
		border-radius: 999px;
		background: var(--c-bg);
		color: var(--c-text-muted);
		font-size: 13px;
	}

	.bottom-sheet__content {
		overflow-y: auto;
		padding: 4px 12px 16px;
	}

	.bottom-sheet__group {
		padding: 8px 6px 14px;
		border-bottom: 1px solid var(--c-border);
	}

	.bottom-sheet__group:last-child {
		border-bottom: none;
		padding-bottom: 4px;
	}

	.bottom-sheet__group-title {
		margin: 4px 10px 6px;
		font-size: 11px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: .04em;
		color: var(--c-text-muted);
	}

	.bottom-sheet__link {
		position: relative;
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 12px 10px;
		border-radius: var(--c-radius-sm);
		color: var(--c-text);
		font-size: 15px;
		font-weight: 500;
		text-decoration: none;
	}

	.bottom-sheet__link:hover,
	.bottom-sheet__link:focus,
	.bottom-sheet__link:active {
		background: var(--c-primary-light);
		color: var(--c-text);
		text-decoration: none;
	}

	.bottom-sheet__link i {
		flex: none;
		width: 22px;
		font-size: 18px;
		text-align: center;
		color: var(--c-primary);
	}

	/* Zähler im Menü rechtsbündig in der Zeile statt (wie in der Tab-Leiste)
	   absolut über dem Symbol. */
	.bottom-sheet__link .bottom-tab-bar__badge {
		position: static;
		margin-left: auto;
	}

	.bottom-sheet__link--danger {
		color: var(--c-danger);
	}

	.bottom-sheet__link--danger i {
		color: var(--c-danger);
	}

	/* Zeitlich begrenzte Aktion (offene Anmeldung) hervorheben, damit sie
	   im "Mein Weg"-Sheet nicht zwischen den übrigen, jederzeit gültigen
	   Links untergeht. */
	.bottom-sheet__link--akzent {
		background: rgba(224, 163, 46, 0.12);
		font-weight: 700;
	}

	.bottom-sheet__link--akzent i {
		color: var(--c-accent);
	}

	.bottom-sheet__badge {
		margin-left: auto;
		min-width: 20px;
		padding: 2px 6px;
		border-radius: 999px;
		background: var(--c-accent-2);
		color: #fff;
		font-size: 11px;
		font-weight: 700;
		text-align: center;
	}

	body.bottom-sheet-open {
		overflow: hidden;
	}
}

/* ---------- Termin-/Verlaufs-Karten (Konfi-Bereich) ---------- */
/* Gemeinsame Kartenoptik für Listen von Modul-Terminen - ursprünglich nur auf
   "Bevorstehende Module" (modulBevorstehend.php), jetzt hier zentral, damit
   auch andere Listenansichten (z.B. "Modulverlauf") dieselbe, bereits
   abgestimmte Optik ohne Kopie der ganzen Regeln nutzen können. */

.termine-liste {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 720px;
}
.termin-karte {
	background: #fff;
	border: 1px solid #eaeaea;
	border-radius: 14px;
	box-shadow: 0 2px 6px rgba(20, 20, 20, 0.05);
	padding: 20px 22px;
}
.termin-karte__kopf {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 12px;
}
.termin-karte__kopf > div:first-child {
	min-width: 0;
}
/* Fortschritt eines Themas (modulInfo.php): "3 von 25 Terminen" mit Balken */
.termin-karte .thema-stand {
	margin: 2px 0 4px;
}
.thema-balken {
	width: 220px;
	max-width: 100%;
	height: 6px;
	margin: 0 0 4px;
	background: #e6eaef;
	border-radius: 3px;
	overflow: hidden;
}
.thema-balken > span {
	display: block;
	height: 100%;
	background: var(--c-primary, #2A6F8F);
	border-radius: 3px;
}
.termin-karte__block {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #8a94a6;
	margin: 0 0 2px 0;
}
.termin-karte__titel {
	font-size: 19px;
	font-weight: 700;
	margin: 0;
	color: #2c3138;
}
.termin-karte__mehrtaegig {
	display: inline-block;
	margin-left: 8px;
	font-size: 11px;
	font-weight: 600;
	color: #2f6fed;
	background: #eaf1ff;
	border-radius: 20px;
	padding: 2px 9px;
	vertical-align: middle;
}
.status-badge {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
}
.status-badge--findet-statt { background: #e5f7ea; color: #1c8a44; }
.status-badge--verschoben  { background: #fff2df; color: #b5690a; }
.status-badge--abgesagt    { background: #fde9e9; color: #c0392b; }
/* Anwesenheitsstatus im Modulverlauf: bewusst neutral statt alarmierend rot,
   ein Fehlen ist Fakt, kein Fehlverhalten (dafür gibt es "Abwesenheit
   melden"/Entschuldigung als eigenen, konstruktiven Weg). */
.status-badge--anwesend     { background: #e5f7ea; color: #1c8a44; }
.status-badge--nicht-anwesend { background: #eef0f3; color: #5b6472; }
/* Entschuldigt gefehlt: eigener, ruhiger Ton - weder "da" noch "gefehlt". */
.status-badge--entschuldigt { background: #eaf3f7; color: #1f5570; }

/* Mein Verlauf: Zusammenfassung und Gliederung nach Monaten. */
.verlauf-summe { margin: 4px 0 8px; font-size: 15px; color: #4b5563; }
.verlauf-summe strong { color: #2b2e33; }
.verlauf-monat {
	margin: 22px 0 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #6b7280;
}

.termin-karte--naechste {
	border-color: #2f6fed;
	box-shadow: 0 2px 10px rgba(47, 111, 237, 0.14);
}
.termin-karte--abgesagt {
	background: #fafafa;
	border-color: #ececec;
}
.termin-karte--abgesagt .termin-karte__block,
.termin-karte--abgesagt .termin-karte__titel {
	color: #a7adb8;
}

/* Besondere (gemeindeweite) Termine innerhalb der zusammengeführten
   Termine-Liste: dezent per Akzentfarbe statt Primärfarbe abgesetzt, da
   sie - anders als persönliche Modul-Termine - keinen Status/keine
   Abmelden-Aktion haben und rein informativ sind. */
.termin-karte--besonderer {
	border-left: 3px solid var(--c-accent);
}

/* Kleine Info-Pille für relative Zeitangabe / Hinweis "Nächster Termin" -
   bewusst zu EINER Pille zusammengefasst statt zwei, damit eine Zeile
   nicht mit Badges überladen wirkt. */
.chip {
	display: inline-flex;
	align-items: center;
	font-size: 12px;
	font-weight: 600;
	border-radius: 20px;
	padding: 3px 10px;
	white-space: nowrap;
}
.chip--relativ { color: #565f6c; background: #eef0f3; }
.chip--next    { color: #2f6fed; background: #dfe9ff; }
.chip--gemeinde { color: #8a5a00; background: rgba(224, 163, 46, 0.18); }
/* Pflichttermin: eingeplant, ohne Abmelden (modulBevorstehend.php, viewtermin.php) */
.chip--pflicht { color: var(--c-primary-dark); background: var(--c-primary-light); white-space: normal; }
.chip--pflicht i { margin-right: 4px; }
/* Stand einer Entschuldigung (EntschuldigungPille in func/auth.php) -
   dieselben Worte und Farben wie in der Team-App. */
.chip--geprueft     { color: var(--c-primary-dark); background: var(--c-primary-light); }
.chip--entschuldigt { color: #1E7443; background: #E3F4EA; }
.chip--abgelehnt    { color: #565f6c; background: #eef0f3; }
.anmeldung-stand { white-space: normal; }
.anmeldung-stand .chip { margin-top: 4px; white-space: normal; }

.termin-karte__zeile {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14.5px;
	color: #454c56;
	margin-bottom: 8px;
}
.termin-karte__zeile i {
	color: #9aa3b1;
	width: 18px;
	text-align: center;
	margin-top: 2px;
	flex-shrink: 0;
}
.termin-karte__chipzeile {
	margin: -2px 0 10px 28px;
}
.termin-karte--abgesagt .termin-karte__zeile { color: #a7adb8; }
.termin-karte--abgesagt .termin-karte__zeile i { color: #c4cad3; }

/* Notizen/Beschreibungen bekommen einen eigenen, klar abgegrenzten Kasten
   mit dunklerer Schrift - reines "helles Fließtext"-Grau wurde zu leicht übersehen. */
.termin-karte__notiz {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-top: 12px;
	padding: 12px 14px;
	background: #f5f6f8;
	border-radius: 10px;
	font-size: 14px;
	color: #3d4450;
	line-height: 1.5;
}
.termin-karte__notiz i {
	color: #848d9c;
	margin-top: 2px;
	flex-shrink: 0;
}
.termin-karte__notiz b { color: #262b33; }
.termin-karte__notiz p { margin: 6px 0 0 0; }
.termin-karte__notiz p:first-child { margin-top: 0; }

.termin-karte__tage {
	margin-top: 14px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.termin-karte__tag {
	background: #f5f6f8;
	border-radius: 10px;
	padding: 14px 16px;
}
.termin-karte__tag--naechste { background: #dfe9ff; }
.termin-karte__tag--abgesagt { background: #f1f1f2; }

.termin-karte__tag-kopf {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
}
.termin-karte__tag-datum { font-weight: 600; color: #262b33; font-size: 14.5px; min-width: 0; }
.termin-karte__tag--abgesagt .termin-karte__tag-datum { color: #999fa9; }
.termin-karte__tag-chip { margin-top: 8px; }

.termin-karte__tag-details {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	color: #565f6c;
	font-size: 13.5px;
	margin-top: 8px;
}
.termin-karte__tag-details i {
	color: #9aa3b1;
	margin-top: 1px;
	flex-shrink: 0;
}
.termin-karte__tag--abgesagt .termin-karte__tag-details { color: #9da3ac; }
.termin-karte__tag-notiz { color: #3d4450; font-weight: 500; }

.termin-karte__aktion {
	margin-top: 16px;
	display: flex;
	justify-content: flex-end;
}
.termin-karte__aktion .btn {
	border-radius: 8px;
}
.termin-karte__pflicht {
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
}

@media (max-width: 420px) {
	.termin-karte { padding: 16px; }
	.termin-karte__titel { font-size: 17.5px; }
	.termin-karte__tag { padding: 12px; }
	.termin-karte__aktion { justify-content: stretch; }
	.termin-karte__aktion .btn { width: 100%; }
}

.termine-leer {
	text-align: center;
	padding: 60px 20px;
	color: #8a94a6;
	background: #fff;
	border-radius: 14px;
	border: 1px solid #eaeaea;
}
.termine-leer i {
	font-size: 42px;
	display: block;
	margin-bottom: 12px;
	color: #d5dae2;
}

/* ---------- Profil-Übersicht (Konfi-Bereich) ---------- */
/* Ersetzt die alte, mit Bootstrap-Formularklassen nachgebaute "Formular"-
   Optik (obwohl es sich nur um reine Anzeige ohne Submit handelte) durch
   klar gruppierte, auf dem Handy lesbare Karten - eine pro Themenbereich. */

.profil-gruppe {
	background: #fff;
	border: 1px solid var(--c-border);
	border-radius: var(--c-radius);
	box-shadow: var(--c-shadow);
	padding: 0 20px;
	margin-bottom: 16px;
}

.profil-gruppe__titel {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--c-text-muted);
	padding: 16px 0 6px;
}

.profil-zeile {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 0;
	border-top: 1px solid var(--c-border);
}

.profil-gruppe__titel + .profil-zeile {
	border-top: none;
}

.profil-zeile__inhalt {
	min-width: 0;
}

.profil-zeile__label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	color: var(--c-text-muted);
	margin-bottom: 3px;
}

.profil-zeile__wert {
	font-size: 15px;
	color: var(--c-text);
	line-height: 1.45;
	/* Lange E-Mail-Adressen ohne Trennstelle brechen um, statt über die Karte zu ragen. */
	overflow-wrap: anywhere;
}

.profil-zeile__wert--leer {
	color: var(--c-text-muted);
	font-style: italic;
}

.profil-zeile__bearbeiten {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 13px;
	font-weight: 600;
	color: var(--c-primary);
	white-space: nowrap;
	text-decoration: none;
	padding: 4px 0;
}

.profil-zeile__bearbeiten:hover,
.profil-zeile__bearbeiten:focus {
	color: var(--c-primary-dark);
	text-decoration: underline;
}

.profil-status {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 9px;
	border-radius: 20px;
	font-size: 11px;
	font-weight: 700;
	vertical-align: middle;
}
.profil-status--entwurf   { background: #eef0f3; color: #5b6472; }
.profil-status--prueft    { background: #fff2df; color: #b5690a; }
.profil-status--freigegeben { background: #e5f7ea; color: #1c8a44; }
.profil-status--zurueck  { background: var(--c-primary-light); color: var(--c-primary); }

@media (max-width: 420px) {
	.profil-gruppe { padding: 0 16px; }
}

/* ---------- Kontaktliste (z.B. Telefonnummern) ---------- */

.kontakt-liste {
	background: #fff;
	border: 1px solid var(--c-border);
	border-radius: var(--c-radius);
	box-shadow: var(--c-shadow);
	overflow: hidden;
}

.kontakt-zeile {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 20px;
	border-bottom: 1px solid var(--c-border);
}

.kontakt-zeile:last-child {
	border-bottom: none;
}

.kontakt-zeile__icon {
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	background: var(--c-primary-light);
	color: var(--c-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
}

.kontakt-zeile__info {
	min-width: 0;
}

.kontakt-zeile__anliegen {
	font-weight: 600;
	color: var(--c-text);
	margin-bottom: 2px;
}

.kontakt-zeile__nummer {
	color: var(--c-primary);
	font-weight: 600;
	text-decoration: none;
}

.kontakt-zeile__nummer:hover,
.kontakt-zeile__nummer:focus {
	text-decoration: underline;
}

/* ---------------------------------------------------------------------
   Dateien-Modul (Upload-Widget, siehe assets/js/dateien.js)
   --------------------------------------------------------------------- */
/* Bootstrap setzt input[type="file"] { display: block; } (bootstrap.css)
   - das schlägt das hidden-Attribut per CSS-Spezifität. Eigene, bewusst
   spezifischere Regel statt sich auf [hidden] allein zu verlassen. */
.dateien-uploader input.dateien-file-input[type="file"] {
	display: none !important;
}

.dateien-drop-area {
	border: 2px dashed var(--c-border);
	border-radius: var(--c-radius-sm);
	padding: 20px;
	text-align: center;
	background: var(--c-bg);
	margin-bottom: 10px;
	transition: border-color 150ms ease, background 150ms ease;
}

.dateien-drop-area.dateien-drop-aktiv {
	border-color: var(--c-primary);
	background: var(--c-primary-light);
}

.dateien-drop-area p {
	margin: 0;
	color: var(--c-text-muted);
}

.dateien-drop-area .dateien-datei-waehlen {
	min-height: 40px;
	margin-left: 4px;
	border-radius: 20px;
	padding: 0 18px;
}

/* Auf dem Handy und Tablet gibt es nichts zu ziehen: nur ein großer Knopf. */
@media (hover: none), (max-width: 600px) {
	.dateien-drop-text {
		display: none;
	}

	.dateien-drop-area {
		padding: 0;
		border: 0;
		background: none;
	}

	.dateien-drop-area .dateien-datei-waehlen {
		width: 100%;
		min-height: 48px;
		margin-left: 0;
		font-size: 15px;
	}
}

.dateien-upload-queue {
	margin: 0 0 10px;
	padding: 0;
}

.dateien-upload-item {
	list-style: none;
	border: 1px solid var(--c-border);
	border-radius: var(--c-radius-sm);
	padding: 8px 12px;
	margin-bottom: 6px;
	background: var(--c-surface);
}

.dateien-upload-kopf {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	font-size: 13px;
}

.dateien-upload-name {
	font-weight: 600;
	color: var(--c-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dateien-upload-size {
	color: var(--c-text-muted);
	flex-shrink: 0;
}

.dateien-upload-bar {
	height: 6px;
	border-radius: 3px;
	background: var(--c-border);
	overflow: hidden;
	margin: 6px 0 4px;
}

.dateien-upload-bar-fill {
	height: 100%;
	width: 0;
	background: var(--c-primary);
	transition: width 150ms ease;
}

.dateien-upload-item.dateien-upload-fertig .dateien-upload-bar-fill {
	background: var(--c-success);
}

.dateien-upload-item.dateien-upload-fehler .dateien-upload-bar-fill {
	background: var(--c-danger);
}

.dateien-upload-status {
	font-size: 12px;
	color: var(--c-text-muted);
}

.dateien-upload-item.dateien-upload-fehler .dateien-upload-status {
	color: var(--c-danger);
}

/* ---------------------------------------------------------------------
   „Dateien“ (func/dateien_ui.php, Konzept_Dateien.md): Werkzeuge,
   Ordner, Fotoraster, Dateizeilen, Menüs, Schalter und Leuchtkasten –
   dieselben Bausteine auf „Dateien“ und den Themen- und Terminseiten.
   --------------------------------------------------------------------- */
.dateien-leer {
	margin: 0;
}

.dw {
	max-width: 920px;
}

.dw-werkzeuge {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 22px;
}

.dw-suche {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
}

.dw-suche__feld {
	position: relative;
	flex: 1 1 240px;
	min-width: 0;
}

.dw-suche__feld i {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--c-text-muted);
	pointer-events: none;
}

.dw-suche__feld input {
	width: 100%;
	height: 44px;
	padding: 0 14px 0 38px;
	border: 1px solid var(--c-border);
	border-radius: 22px;
	background: var(--c-surface);
	font-size: 15px;
	color: var(--c-text);
}

.dw-suche__feld input:focus {
	outline: 2px solid var(--c-primary);
	outline-offset: 1px;
	border-color: var(--c-primary);
}

.dw-suche__knopf {
	height: 44px;
	padding: 0 18px;
	border-radius: 22px;
}

.dw-suche__leeren {
	font-size: 13px;
	font-weight: 600;
}

.dw-bereiche {
	display: flex;
	max-width: 440px;
	padding: 3px;
	border-radius: 22px;
	background: #E9EBEF;
}

.dw .dw-bereich,
.dw-bereich {
	flex: 1;
	padding: 8px 12px;
	border-radius: 19px;
	text-align: center;
	font-weight: 600;
	color: var(--c-text);
	text-decoration: none !important;
}

.dw-bereich:hover,
.dw-bereich:focus {
	color: var(--c-text);
}

.dw-bereich.is-aktiv {
	background: var(--c-surface);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.dw-leiste {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 16px;
	margin-bottom: 14px;
}

.dw-werkzeuge .dw-leiste {
	margin-bottom: 0;
}

.dw-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.dw-filter--ordner {
	margin: 4px 0 14px;
}

.dw .dw-filter__chip,
.dw-filter__chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 40px;
	padding: 0 16px;
	border: 1px solid var(--c-border);
	border-radius: 20px;
	background: var(--c-surface);
	font-size: 14px;
	font-weight: 600;
	color: var(--c-text);
	text-decoration: none !important;
}

.dw .dw-filter__chip:hover,
.dw .dw-filter__chip:focus {
	color: var(--c-text);
	border-color: var(--c-primary);
}

.dw .dw-filter__chip.is-aktiv,
.dw-filter__chip.is-aktiv {
	border-color: var(--c-primary);
	background: var(--c-primary);
	color: #fff;
}

.dw-filter__zahl {
	font-weight: 500;
	opacity: 0.8;
}

.dw-sortieren {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}

.dw-sortieren label {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--c-text-muted);
}

.dw .dw-sortieren select.form-control {
	display: inline-block;
	width: auto;
	max-width: 100%;
	height: 36px;
	padding-right: 34px;
	border-radius: 18px;
}

/* Handy: Filter in einer Zeile, Sortierung und Gruppe darunter
   nebeneinander. Die Auswahl zeigt, worum es geht („Neueste zuerst“,
   „Alle meine Gruppen“) - die Beschriftung bleibt für Screenreader. */
@media (max-width: 600px) {
	.dw-werkzeuge .dw-leiste {
		gap: 10px 8px;
	}

	.dw-werkzeuge .dw-filter {
		flex: 1 0 100%;
	}

	.dw-werkzeuge .dw-sortieren {
		min-width: 0;
	}

	/* Zwei Auswahlfelder (Team: Sortierung und Gruppe) teilen sich die Zeile. */
	.dw-werkzeuge .dw-leiste:has(.dw-sortieren + .dw-sortieren) .dw-sortieren {
		flex: 1 1 0;
	}

	.dw-werkzeuge .dw-sortieren label {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	.dw .dw-werkzeuge .dw-leiste:has(.dw-sortieren + .dw-sortieren) .dw-sortieren select.form-control {
		width: 100%;
	}
}

.dw-abschnitt {
	margin: 0 0 24px;
}

.dw .dw-ueberschrift,
.dw-ueberschrift {
	margin: 6px 0 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--c-text-muted);
}

.dw-ueberschrift__zusatz {
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
}

/* Ordner (Themen, Unterhaltungen) */
.dw-ordner {
	margin: 0;
	padding: 0;
	list-style: none;
	overflow: hidden;
	border: 1px solid var(--c-border);
	border-radius: var(--c-radius);
	background: var(--c-surface);
}

.dw-ordner--einzeln {
	margin-bottom: 24px;
}

.dw-ordner > li + li {
	border-top: 1px solid var(--c-border);
}

.dw .dw-ordner__zeile,
.dw-ordner__zeile {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 64px;
	padding: 12px 14px;
	color: var(--c-text);
	text-decoration: none !important;
}

.dw .dw-ordner__zeile:hover,
.dw .dw-ordner__zeile:focus {
	background: var(--c-primary-light);
	color: var(--c-text);
}

.dw-ordner__bild {
	display: flex;
	flex: 0 0 42px;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 11px;
	background: var(--c-primary-light);
	font-size: 20px;
	color: var(--c-primary);
}

.dw-ordner__text {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.dw-ordner__titel {
	font-size: 16px;
	font-weight: 700;
	overflow-wrap: anywhere;
}

.dw-ordner__zeile.is-leer .dw-ordner__titel {
	color: var(--c-text-muted);
}

.dw-ordner__unter {
	font-size: 13px;
	color: var(--c-text-muted);
}

.dw-ordner__pfeil {
	flex: 0 0 auto;
	color: var(--c-text-muted);
}

.dw-avatar {
	display: flex;
	flex: 0 0 42px;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	font-size: 14px;
	font-weight: 700;
	color: #fff;
}

.dw-avatar--gruppe {
	border-radius: 13px;
}

.dw-avatar--farbe-0 { background: #2A6F8F; }
.dw-avatar--farbe-1 { background: #7A4FB5; }
.dw-avatar--farbe-2 { background: #267A5B; }
.dw-avatar--farbe-3 { background: #B04E2B; }
.dw-avatar--farbe-4 { background: #3A5BA0; }
.dw-avatar--farbe-5 { background: #A03A6A; }
.dw-avatar--farbe-6 { background: #5F6F2F; }
.dw-avatar--farbe-7 { background: #8A4F1D; }

/* Etiketten (wie die Chips der Apps) */
.dw-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 4px;
}

.dw-chip {
	display: inline-block;
	padding: 3px 8px;
	border-radius: 10px;
	background: #E9EBEF;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--c-text-muted);
}

.dw-chip--primaer {
	background: var(--c-primary-light);
	color: var(--c-primary-dark);
}

.dw-chip--team {
	background: #FDF1DC;
	color: #8A5A00;
}

.dw-chip--erfolg {
	background: #E3F4EA;
	color: #1E7A43;
}

/* Fotoraster: 4 Spalten, ab 600px Breite des Rasters selbst 8 - „7 Fotos
   und +N“ füllen so genau zwei Reihen bzw. eine, wie in den Apps. Die
   Breite des Rasters zählt (nicht die des Fensters): Termin- und
   Themenseiten zeigen es auch in schmalen Spalten. clamp() wählt die
   Mindestbreite einer Spalte: ein Achtel (breit) oder ein Viertel. */
.dw-raster {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-template-columns: repeat(auto-fill, minmax(clamp(calc((100% - 42px) / 8 - 0.1px), calc((600px - 100%) * 999), calc((100% - 18px) / 4 - 0.1px)), 1fr));
	gap: 6px;
	margin: 0 0 10px;
	padding: 0;
	list-style: none;
}

/* Eine Kachel: das quadratische Bild (abgerundet, darin Abzeichen und Menü)
   und darunter der Name. Abgeschnitten wird nur das Bild selbst – das Menü
   „…“ klappt über die Kachel hinaus auf. */
.dw-foto {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.dw-foto__bild {
	position: relative;
	aspect-ratio: 1 / 1;
	border-radius: 10px;
	background: var(--c-primary-light);
}

.dw-foto__link {
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: 10px;
}

/* Name, in der Mitte gekürzt: der Anfang weicht, das Ende mit Nummer und
   Endung bleibt (DateienWebFotoName). */
.dw-foto__name {
	display: flex;
	min-width: 0;
	overflow: hidden;
	font-size: 12px;
	line-height: 1.35;
	color: var(--c-text-muted);
}

.dw-foto__name-anfang {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: pre;
}

.dw-foto__name-ende {
	flex-shrink: 0;
	white-space: pre;
}

.dw-foto__link:focus-visible {
	outline: 3px solid var(--c-primary);
	outline-offset: -3px;
}

.dw-foto__link img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dw-foto__ohne {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: 26px;
	color: var(--c-primary);
}

.dw-foto--rest .dw-foto__link {
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.55);
	font-size: 22px;
	font-weight: 700;
	color: #fff;
	text-decoration: none !important;
}

.dw-foto__abzeichen {
	position: absolute;
	top: 5px;
	right: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.5);
	font-size: 11px;
	color: #fff;
	pointer-events: none;
}

.dw-foto .dw-menue {
	position: absolute;
	right: 4px;
	bottom: 4px;
	margin: 0;
}

.dw-foto .dw-menue > summary {
	width: 32px;
	height: 32px;
	background: rgba(255, 255, 255, 0.92);
	color: var(--c-text);
}

/* Dateizeilen */
.dw-dateien {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0 0 10px;
	padding: 0;
	list-style: none;
}

.dw-datei {
	position: relative;
	display: flex;
	align-items: center;
	border: 1px solid var(--c-border);
	border-radius: 10px;
	background: var(--c-surface);
}

.dw .dw-datei__haupt,
.dw-datei__haupt {
	display: flex;
	flex: 1;
	align-items: center;
	gap: 12px;
	min-width: 0;
	padding: 10px 12px;
	color: var(--c-text);
	text-decoration: none !important;
}

a.dw-datei__haupt:hover .dw-datei__name,
a.dw-datei__haupt:focus .dw-datei__name {
	color: var(--c-primary);
	text-decoration: underline;
}

.dw-datei__bild {
	display: flex;
	flex: 0 0 44px;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	overflow: hidden;
	border-radius: 10px;
	background: var(--c-primary-light);
	font-size: 20px;
	color: var(--c-primary);
}

.dw-datei__bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dw-datei__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.dw-datei__name {
	display: -webkit-box;
	overflow: hidden;
	font-size: 15px;
	font-weight: 600;
	overflow-wrap: anywhere;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.dw-datei__ort {
	font-size: 12px;
	color: var(--c-primary-dark);
}

.dw-datei__unter {
	font-size: 12px;
	color: var(--c-text-muted);
}

.dw-neu {
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: 6px;
	border-radius: 50%;
	background: var(--c-accent);
	vertical-align: 2px;
}

/* Menü einer Datei (Teilen, Nur fürs Team, Löschen) */
.dw-menue {
	position: relative;
	flex: 0 0 auto;
	margin-right: 6px;
}

.dw-menue > summary {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 22px;
	color: var(--c-text-muted);
	cursor: pointer;
	list-style: none;
}

.dw-menue > summary::-webkit-details-marker {
	display: none;
}

.dw-menue > summary:hover,
.dw-menue > summary:focus-visible {
	background: var(--c-bg);
	outline: none;
}

.dw-menue__liste {
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 30;
	min-width: 230px;
	padding: 6px;
	border: 1px solid var(--c-border);
	border-radius: 12px;
	background: var(--c-surface);
	box-shadow: 0 8px 24px rgba(20, 30, 40, 0.16);
}

.dw-menue.is-links .dw-menue__liste {
	right: auto;
	left: 0;
}

.dw-menue.is-oben .dw-menue__liste {
	top: auto;
	bottom: 100%;
}

.dw-menue__liste form {
	margin: 0;
}

.dw-menue__liste button {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	min-height: 44px;
	padding: 10px 12px;
	border: 0;
	border-radius: 8px;
	background: none;
	text-align: left;
	font-size: 14px;
	color: var(--c-text);
}

.dw-menue__liste button:hover,
.dw-menue__liste button:focus {
	background: var(--c-bg);
}

.dw-menue__liste button.is-gefahr {
	color: var(--c-danger);
}

/* Ordnerseite */
.dw-zurueck {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	margin-bottom: 12px;
	font-weight: 600;
}

.dw-ordnerkopf {
	margin: 0 0 16px;
}

.dw .dw-ordnerkopf h2,
.dw-ordnerkopf h2 {
	margin: 0;
	font-size: 24px;
	font-weight: 700;
	overflow-wrap: anywhere;
}

.dw-ordnerkopf p {
	margin: 4px 0 0;
	color: var(--c-text-muted);
}

.dw-ordnerkopf--chat {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.dw-ordnerkopf--chat > div {
	flex: 1;
	min-width: 0;
}

.dw-karte {
	margin-bottom: 14px;
	border: 1px solid var(--c-border);
	border-radius: 12px;
	background: var(--c-surface);
}

.dw-karte > summary {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 56px;
	padding: 12px 14px;
	cursor: pointer;
	list-style: none;
}

.dw-karte > summary::-webkit-details-marker {
	display: none;
}

.dw-karte > summary::after {
	margin-left: auto;
	font-family: "entypo";
	content: "\e873";
	color: var(--c-text-muted);
}

.dw-karte[open] > summary {
	border-bottom: 1px solid var(--c-border);
}

.dw-karte[open] > summary::after {
	content: "\e876";
}

.dw-karte > summary > i {
	font-size: 20px;
	color: var(--c-primary);
}

.dw-karte > :not(summary) {
	margin: 12px 14px;
	min-width: 0;
}

.dw-karte select.form-control {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	/* WebKit schneidet den Text eines Auswahlfelds ohne Systemaussehen
	   (Verwaltung) sonst nicht ab: ein langer Termin („Termin Mo., 19.10. ·
	   Konfirmandenjahrgang …“) ragte über den Rand, die Seite war auf dem
	   Handy 7 px zu breit. */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dw-sichtbar label {
	overflow-wrap: anywhere;
}

.dw-schalter__stand {
	display: block;
	font-size: 13px;
	font-weight: 400;
	color: var(--c-text-muted);
}

.dw-schalter__liste {
	padding: 0;
	list-style: none;
}

.dw-schalter__liste li + li {
	border-top: 1px solid var(--c-border);
}

.dw-schalter__liste form,
.dw-schalter-einzeln {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 10px 0;
}

.dw-schalter-einzeln {
	margin-bottom: 12px;
	padding-top: 0;
	border-bottom: 1px solid var(--c-border);
}

.dw-schalter__titel {
	flex: 1;
	min-width: 0;
}

.dw-schalter__knopf {
	position: relative;
	flex: 0 0 51px;
	width: 51px;
	height: 31px;
	padding: 0;
	border: 0;
	border-radius: 16px;
	background: #D9DCE1;
	transition: background 150ms ease;
}

.dw-schalter__knopf span {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 27px;
	height: 27px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	transition: left 150ms ease;
}

.dw-schalter__knopf.is-an {
	background: var(--c-primary);
}

.dw-schalter__knopf.is-an span {
	left: 22px;
}

.dw-schalter__knopf:focus-visible {
	outline: 2px solid var(--c-primary);
	outline-offset: 2px;
}

.dw-sichtbar {
	margin: 0 0 12px;
	padding: 0;
	border: 0;
}

.dw-sichtbar legend {
	margin-bottom: 6px;
	border: 0;
	font-size: 14px;
	font-weight: 700;
	color: var(--c-text);
}

.dw-sichtbar label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 6px;
	font-weight: 500;
}

.dw-hinweis {
	margin: 6px 0 0;
	font-size: 13px;
	color: var(--c-text-muted);
}

.dw-einreichen {
	margin-top: 10px;
}

.dw-anzahl {
	margin: 0 0 8px;
	font-size: 13px;
	color: var(--c-text-muted);
}

.dw-mehr {
	margin: 2px 0 0;
	font-size: 14px;
	font-weight: 600;
}

.dw-seiten {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin: 18px 0;
}

.dw-leer {
	padding: 32px 16px;
	text-align: center;
	color: var(--c-text-muted);
}

.dw-leer__symbol {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 88px;
	height: 88px;
	margin-bottom: 12px;
	border-radius: 50%;
	background: var(--c-primary-light);
	font-size: 38px;
	color: var(--c-primary);
}

.dw-leer h3 {
	margin: 0 0 6px;
	font-weight: 700;
	color: var(--c-text);
}

.dw-im-ordner {
	margin: 12px 0 0;
	text-align: right;
	font-weight: 600;
}

/* Leuchtkasten: Fotos groß, blättern mit Pfeilen, Tasten und Wischen */
body.dw-leuchtkasten-offen {
	overflow: hidden;
}

.dw-leuchtkasten {
	position: fixed;
	inset: 0;
	z-index: 3000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.94);
}

.dw-leuchtkasten[hidden],
.dw-leuchtkasten__blaettern[hidden] {
	display: none;
}

.dw-leuchtkasten__bild {
	max-width: 100vw;
	max-height: calc(100vh - 150px);
	object-fit: contain;
}

.dw-leuchtkasten__kopf {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: max(12px, env(safe-area-inset-top)) 16px 12px;
	color: #fff;
}

.dw-leuchtkasten__knopf {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 22px;
	background: rgba(255, 255, 255, 0.16);
	font-size: 18px;
	color: #fff;
}

.dw-leuchtkasten__knopf:hover,
.dw-leuchtkasten__knopf:focus {
	background: rgba(255, 255, 255, 0.28);
	color: #fff;
}

.dw-leuchtkasten__zaehler {
	font-weight: 700;
}

.dw-leuchtkasten__blaettern {
	position: absolute;
	top: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: 0;
	border-radius: 24px;
	background: rgba(255, 255, 255, 0.16);
	font-size: 22px;
	color: #fff;
	transform: translateY(-50%);
}

.dw-leuchtkasten__blaettern--zurueck {
	left: 12px;
}

.dw-leuchtkasten__blaettern--weiter {
	right: 12px;
}

.dw-leuchtkasten__fuss {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
}

.dw-leuchtkasten__zeile {
	display: block;
	font-size: 12px;
	opacity: 0.85;
}

/* ---------- Kirchen & Gemeindehäuser ---------- */

/* Detailseite (viewkirche.php/viewgemeindehaus.php): kleine, feste
   Vorschaugröße statt auf volle Kartenbreite gestreckt - bei nur einem
   Foto wirkte ein volles Grid ("auto-fit, 1fr") sonst wie eine
   ungewollte Vollbildanzeige. Ein Klick öffnet das Bootstrap-Modal
   darunter mit dem Foto in Originalgröße. */
.standort-bild-reihe {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 16px;
}

.standort-bild-thumb {
	display: block;
	flex: 0 0 auto;
	width: 92px;
	height: 92px;
	border-radius: var(--c-radius-sm);
	overflow: hidden;
	border: 1px solid var(--c-border);
}

.standort-bild-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 180ms ease;
}

.standort-bild-thumb:hover img,
.standort-bild-thumb:focus img {
	transform: scale(1.06);
}

/* Vollbild-Modal: transparenter statt weißer .modal-content, damit das
   Foto selbst die Bühne bekommt statt in einer weißen Dialogbox mit
   Rand zu stecken. Schließen-Button liegt als abgedunkelter Kreis auf
   dem Bild (nicht oberhalb davon), damit er auf jeder Bildschirmhöhe
   sichtbar bleibt statt bei kleinen Viewports über den Rand zu ragen. */
.standort-bild-modal .modal-content {
	background: transparent;
	border: none;
	box-shadow: none;
	position: relative;
}

.standort-bild-modal .modal-content img {
	width: 100%;
	height: auto;
	border-radius: var(--c-radius);
	display: block;
}

.standort-bild-modal .close {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 36px;
	height: 36px;
	line-height: 34px;
	text-align: center;
	background: rgba(0, 0, 0, 0.55);
	border-radius: 999px;
	color: #fff;
	opacity: 1;
	font-size: 22px;
	text-shadow: none;
	z-index: 1;
}

.standort-bild-modal .close:hover,
.standort-bild-modal .close:focus {
	color: #fff;
	background: rgba(0, 0, 0, 0.75);
}

.standort-ort {
	color: var(--c-text-muted);
	font-size: 15px;
	margin-bottom: 14px;
}

.standort-ort i {
	color: var(--c-primary);
	margin-right: 4px;
}

.standort-beschreibung {
	font-size: 16px;
	line-height: 1.6;
}

/* Admin-Bearbeitung (admin_editKirche.php/admin_editGemeindehaus.php):
   bis zu 3 Bilder, daher bewusst mit fester Obergrenze je Kachel
   (minmax(140px, 220px)) statt auf volle Panel-Breite gestreckt - ein
   einzelnes Bild soll nicht zu einem übermäßig breiten Streifen werden. */
.standort-bild-admin-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 220px));
	gap: 12px;
	margin-bottom: 4px;
}

.standort-bild-admin-kachel {
	position: relative;
	border: 1px solid var(--c-border);
	border-radius: var(--c-radius-sm);
	overflow: hidden;
}

.standort-bild-admin-kachel img {
	width: 100%;
	height: 130px;
	object-fit: cover;
	display: block;
}

.standort-bild-admin-kachel form {
	position: absolute;
	top: 6px;
	right: 6px;
	margin: 0;
}

/* ---------- Startseite: "Das Wichtigste zuerst" ---------- */

/* Bis zu vier knappe Prioritätskarten über den bestehenden Fortschritts-
   Panels (Meilensteine/Übersicht bleiben unverändert darunter) - zeigen
   auf einen Blick, was gerade relevant ist, statt dass man sich das aus
   Sidebar-Badges zusammensuchen muss. auto-fit sorgt für 1 Spalte auf
   dem Handy, bis zu 4 nebeneinander auf breiten Bildschirmen. */
.prioritaet-karten {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 12px;
	margin-bottom: 24px;
}

.prioritaet-karte {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px;
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--c-radius);
	box-shadow: var(--c-shadow);
	color: var(--c-text);
	text-decoration: none;
	transition: transform 150ms ease, box-shadow 150ms ease;
}

.prioritaet-karte:hover,
.prioritaet-karte:focus {
	color: var(--c-text);
	text-decoration: none;
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(20, 30, 40, 0.12);
}

.prioritaet-karte__icon {
	flex: none;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: var(--c-primary-light);
	color: var(--c-primary);
	font-size: 19px;
}

/* Zeitlich begrenzte Aktion (offene Anmeldung) - Akzentfarbe statt
   Primärfarbe, damit sie unter mehreren Karten als "das Dringende"
   auffällt, ohne mit einer Warnfarbe (Rot) fälschlich ein Problem zu
   signalisieren - eine offene Anmeldung ist eine Gelegenheit, kein Fehler. */
.prioritaet-karte--akzent {
	border-color: var(--c-accent);
	background: rgba(224, 163, 46, 0.06);
}

.prioritaet-karte--akzent .prioritaet-karte__icon {
	background: rgba(224, 163, 46, 0.18);
	color: var(--c-accent);
}

.prioritaet-karte__inhalt {
	flex: 1 1 auto;
	min-width: 0;
}

.prioritaet-karte__eyebrow {
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--c-text-muted);
	margin-bottom: 2px;
}

.prioritaet-karte__titel {
	font-size: 16px;
	font-weight: 700;
	color: var(--c-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.prioritaet-karte__text {
	font-size: 13.5px;
	color: var(--c-text-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.prioritaet-karte__chevron {
	flex: none;
	color: var(--c-text-muted);
	font-size: 18px;
}

/* ---------- Admin: Anwesenheit - Terminauswahl ---------- */

.anwesenheit-auswahl-liste {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 16px;
}

.anwesenheit-auswahl-karte {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 16px;
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--c-radius);
	box-shadow: var(--c-shadow);
	color: var(--c-text);
	text-decoration: none;
	transition: transform 150ms ease, box-shadow 150ms ease;
}

.anwesenheit-auswahl-karte:hover,
.anwesenheit-auswahl-karte:focus {
	color: var(--c-text);
	text-decoration: none;
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(20, 30, 40, 0.12);
}

.anwesenheit-auswahl-datum {
	flex: none;
	width: 56px;
	text-align: center;
	padding: 8px 4px;
	border-radius: var(--c-radius-sm);
	background: var(--c-primary-light);
	color: var(--c-primary-dark);
}

.anwesenheit-auswahl-tag {
	display: block;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.1;
}

.anwesenheit-auswahl-jahr {
	display: block;
	font-size: 11px;
}

.anwesenheit-auswahl-inhalt {
	flex: 1 1 auto;
	min-width: 0;
}

.anwesenheit-auswahl-titel {
	font-weight: 700;
	font-size: 15.5px;
}

.anwesenheit-auswahl-meta {
	margin-top: 4px;
	font-size: 13px;
	color: var(--c-text-muted);
}

.anwesenheit-auswahl-meta i {
	color: var(--c-text-muted);
}

.anwesenheit-auswahl-status {
	flex: none;
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--c-text-muted);
	font-size: 20px;
}

@media (max-width: 480px) {
	.anwesenheit-auswahl-karte {
		flex-wrap: wrap;
	}
	.anwesenheit-auswahl-status {
		width: 100%;
		justify-content: space-between;
		margin-top: 6px;
		padding-left: 72px;
	}
}

.anwesenheit-heute-pill {
	display: inline-block;
	background: var(--c-accent);
	color: #fff;
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	padding: 2px 7px;
	border-radius: 999px;
	margin-right: 6px;
	vertical-align: middle;
}

/* Archiv (vergangene Termine): gedimmt, damit auf den ersten Blick klar
   bleibt, dass diese Karten nicht zu den anstehenden Terminen gehören -
   gleiches Abdunkeln wie bei bereits erledigten Umfragen (.umfrage-card). */
.anwesenheit-auswahl-karte--archiv {
	opacity: .7;
}

.anwesenheit-auswahl-karte--archiv:hover,
.anwesenheit-auswahl-karte--archiv:focus {
	opacity: 1;
}

.anwesenheit-archiv-umschalter {
	margin-top: 18px;
}

/* Fortschrittsbalken beim Umfragen-Bild-Upload (admin_umfragecreate.php) -
   erzwingt eine eigene Zeile unterhalb des Formulars, da das umgebende
   .form-inline sonst versuchen würde, ihn neben Button/Dateiauswahl zu
   quetschen. */
.umfrage-bild-upload-fortschritt {
	display: block;
	width: 100%;
	max-width: 260px;
	margin-top: 8px;
}

.umfrage-bild-upload-fortschritt .progress {
	margin-bottom: 0;
	height: 8px;
}

/* ---------- Admin: Anwesenheit erfassen ---------- */

.termin-info-zeile {
	margin: 0 0 8px;
}

.termin-info-zeile i {
	color: var(--c-primary);
	width: 18px;
	text-align: center;
}

.termin-aktionen {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.anwesenheit-liste {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.anwesenheit-zeile {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 4px;
	border-bottom: 1px solid var(--c-border);
}

.anwesenheit-zeile:last-child {
	border-bottom: none;
}

.anwesenheit-zeile__name {
	font-weight: 600;
	font-size: 15px;
}

.anwesenheit-zeile__email {
	display: block;
	font-weight: 400;
	font-size: 12.5px;
	color: var(--c-text-muted);
}

/* Mindestens 44px hoch (Touch-Ziel-Empfehlung aus dem Produktkonzept) -
   zeigt den Zustand über Farbe UND Text/Icon, nicht nur Farbe (WCAG "Use
   of Color", gleiches Prinzip wie bei den Konfi-Meilensteinen). */
.anwesenheit-toggle {
	flex: none;
	min-width: 150px;
	min-height: 44px;
	padding: 10px 16px;
	border-radius: var(--c-radius-sm);
	border: 1px solid var(--c-border);
	background: var(--c-surface);
	color: var(--c-text-muted);
	font-weight: 600;
	font-size: 14px;
}

.anwesenheit-toggle.is-anwesend {
	background: var(--c-success);
	border-color: var(--c-success);
	color: #fff;
}

@media (max-width: 480px) {
	.anwesenheit-zeile {
		flex-wrap: wrap;
	}
	.anwesenheit-toggle {
		width: 100%;
	}
}

/* Filter der Anwesenheitsliste - wie der Segment-Filter der Team-App
   (Alle / Noch nicht da / Da / Entschuldigt) plus Namenssuche. */
.anwesenheit-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}

/* Ausgeblendete Zeilen und der Filter vor dem Laden: "display: flex"
   oben schlägt sonst das hidden-Attribut (die Regel war durch die
   Einschübe unten zerbrochen - der Filter blendete nichts aus). */
.anwesenheit-filter[hidden],
.anwesenheit-zeile[hidden],
.anwesenheit-leer[hidden] {
	display: none;
}

/* "Alle da" und "Konfi hinzufügen" unter der Liste (wie in der Team-App). */
.anwesenheit-aktion { margin: 14px 0 0; }
.anwesenheit-hinzufuegen { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid #e5e7eb; }
.anwesenheit-hinzufuegen label { font-weight: 600; }
.anwesenheit-hinzufuegen__zeile { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.anwesenheit-hinzufuegen__zeile select { flex: 1 1 220px; min-width: 0; }
.anwesenheit-hinzufuegen__da { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 400 !important; }

/* Hilfetexte je Anmeldeart im Thema (nur der passende ist sichtbar). */
.help-block[hidden] {
	display: none;
}

.anwesenheit-filter__knoepfe {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 4px;
	padding: 3px;
	border-radius: 10px;
	background: var(--c-bg);
	border: 1px solid var(--c-border);
}

.anwesenheit-filter__knopf {
	min-height: 38px;
	padding: 6px 12px;
	border: none;
	border-radius: 8px;
	background: transparent;
	color: var(--c-text);
	font-weight: 600;
	font-size: 13.5px;
}

.anwesenheit-filter__knopf span {
	color: var(--c-text-muted);
	font-weight: 500;
}

.anwesenheit-filter__knopf.is-aktiv {
	background: var(--c-surface);
	color: var(--c-primary-dark);
	box-shadow: 0 1px 3px rgba(20, 30, 40, 0.18);
}

.anwesenheit-filter__knopf:focus-visible {
	outline: 2px solid var(--c-primary);
	outline-offset: 1px;
}

.anwesenheit-filter__suche {
	flex: 1 1 180px;
	max-width: 280px;
	min-height: 40px;
}

.anwesenheit-zeile__entschuldigung {
	display: block;
	margin-top: 5px;
}

.anwesenheit-leer {
	margin: 0;
	padding: 18px 4px;
	text-align: center;
}

.anwesenheit-hinweis a {
	font-weight: 600;
}

@media (max-width: 480px) {
	/* 2 × 2 statt drei Knöpfe oben und einer allein darunter */
	.anwesenheit-filter__knoepfe {
		display: grid;
		grid-template-columns: 1fr 1fr;
		width: 100%;
	}
	.anwesenheit-filter__knopf {
		padding: 6px 8px;
	}
	.anwesenheit-filter__suche {
		max-width: none;
	}
}

/* ---------- Admin: Entscheidungs-Karten (Entschuldigungen/Konfisprüche) ---------- */

.entscheidung-karte {
	border: 1px solid var(--c-border);
	border-radius: var(--c-radius-sm);
	margin-bottom: 10px;
}

.entscheidung-karte .panel-body {
	padding: 16px;
}

.entscheidung-karte form {
	display: inline-block;
	margin-right: 8px;
	margin-top: 8px;
}

.entscheidung-karte .btn {
	min-height: 40px;
}

/* ---------- Admin: Druck-/Export-Auswahl (z.B. admin_benutzer.php) ---------- */

/* Vorher: drei rote (btn-danger) Buttons untereinander mit <br><br> -
   Rot signalisiert normalerweise "kritisch/löschen", nicht "drucken".
   Jetzt eine neutrale Liste mit Icon, Titel und einer kurzen Erklärung,
   was der jeweilige Export enthält. */
.druck-auswahl-liste {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.druck-auswahl-eintrag {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 14px;
	border: 1px solid var(--c-border);
	border-radius: var(--c-radius-sm);
	color: var(--c-text);
	text-decoration: none;
	min-height: 44px;
}

.druck-auswahl-eintrag:hover,
.druck-auswahl-eintrag:focus {
	background: var(--c-primary-light);
	color: var(--c-text);
	text-decoration: none;
}

.druck-auswahl-eintrag i {
	flex: none;
	font-size: 22px;
	color: var(--c-primary);
	width: 26px;
	text-align: center;
}

.druck-auswahl-eintrag span {
	display: flex;
	flex-direction: column;
}

.druck-auswahl-eintrag small {
	font-size: 12px;
}

/* ---------- Umfragen ---------- */

.umfrage-card {
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--c-radius);
	padding: 18px 20px;
	margin-bottom: 14px;
	transition: transform .15s ease, box-shadow .15s ease;
}

.umfrage-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(42, 111, 143, .12);
}

.umfrage-card--offen {
	border-left: 4px solid var(--c-accent);
}

.umfrage-card-kopf {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 6px;
}

.umfrage-typ-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--c-primary-light);
	color: var(--c-primary-dark);
	white-space: nowrap;
	flex: none;
}

.umfrage-titel {
	font-size: 17px;
	font-weight: 700;
	color: var(--c-text);
	margin: 0 0 4px;
}

.umfrage-beschreibung {
	color: var(--c-text-muted);
	font-size: 14px;
	margin: 0 0 10px;
}

.umfrage-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	font-size: 13px;
	color: var(--c-text-muted);
}

.umfrage-meta i {
	margin-right: 4px;
}

.umfrage-leer {
	text-align: center;
	padding: 48px 20px;
	color: var(--c-text-muted);
}

.umfrage-leer i {
	font-size: 40px;
	color: var(--c-border);
	display: block;
	margin-bottom: 12px;
}

/* Single-/Multi-Choice beim Beantworten als tippbare Karten statt
   nativer Radio-/Checkbox-Kreise - besser antippbar auf dem Handy und
   optisch näher am Rest der App. */

.umfrage-choice-liste {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 18px 0;
}

.umfrage-choice {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	border: 2px solid var(--c-border);
	border-radius: 14px;
	background: var(--c-surface);
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease, transform .1s ease;
	-webkit-tap-highlight-color: transparent;
}

.umfrage-choice:active {
	transform: scale(.98);
}

.umfrage-choice input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.umfrage-choice-marker {
	flex: none;
	width: 22px;
	height: 22px;
	border: 2px solid var(--c-border);
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-color .15s ease, background-color .15s ease;
}

.umfrage-choice[data-typ="multi"] .umfrage-choice-marker {
	border-radius: 6px;
}

.umfrage-choice-marker i {
	font-size: 12px;
	color: #fff;
	opacity: 0;
	transform: scale(.5);
	transition: opacity .12s ease, transform .12s ease;
}

.umfrage-choice.is-selected {
	border-color: var(--c-primary);
	background: var(--c-primary-light);
}

.umfrage-choice.is-selected .umfrage-choice-marker {
	border-color: var(--c-primary);
	background: var(--c-primary);
}

.umfrage-choice.is-selected .umfrage-choice-marker i {
	opacity: 1;
	transform: scale(1);
}

/* .umfrage-choice-bild-oeffnen ist ein <button> (Vollbild-Trigger, siehe
   umfrage_beantworten.php) statt eines reinen <img> - hier auf reinen
   Bild-Rahmen zurückgesetzt, damit vom Button selbst nichts sichtbar bleibt
   und nur das .umfrage-choice-bild-Foto in gewohnter Größe erscheint. */
.umfrage-choice-bild-oeffnen {
	flex: none;
	display: block;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.umfrage-choice-bild {
	display: block;
	width: 44px;
	height: 44px;
	border-radius: 10px;
	object-fit: cover;
	background: var(--c-bg);
}

.umfrage-choice-text {
	flex: 1;
	font-size: 15px;
	color: var(--c-text);
	font-weight: 600;
}

.umfrage-freitext-feld {
	width: 100%;
	min-height: 120px;
	border: 2px solid var(--c-border);
	border-radius: 14px;
	padding: 14px 16px;
	font-size: 15px;
	color: var(--c-text);
	resize: vertical;
	transition: border-color .15s ease;
}

.umfrage-freitext-feld:focus {
	outline: none;
	border-color: var(--c-primary);
}

.umfrage-anonym-hinweis {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	background: var(--c-primary-light);
	color: var(--c-primary-dark);
	border-radius: 12px;
	padding: 12px 14px;
	font-size: 13px;
	margin-bottom: 18px;
}

.umfrage-anonym-hinweis i {
	margin-top: 1px;
}

/* Ergebnisse: animierte Balken */

.umfrage-ergebnis-zeile {
	margin-bottom: 16px;
	animation: umfrageFadeInUp .35s ease both;
}

.umfrage-ergebnis-kopf {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-size: 14px;
	margin-bottom: 6px;
}

.umfrage-ergebnis-kopf strong {
	color: var(--c-text);
	font-weight: 600;
}

.umfrage-ergebnis-kopf span {
	color: var(--c-text-muted);
}

.umfrage-ergebnis-balken-spur {
	height: 12px;
	background: var(--c-bg);
	border-radius: 999px;
	overflow: hidden;
}

.umfrage-ergebnis-balken-fuellung {
	height: 100%;
	background: linear-gradient(90deg, var(--c-primary), var(--c-primary-dark));
	border-radius: 999px;
	width: 0;
	transition: width .6s cubic-bezier(.22, 1, .36, 1);
}

.umfrage-teilnahmequote {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	color: var(--c-text-muted);
	margin-bottom: 20px;
}

/* Begriffsübersicht: gewichtete Begriffe aus Freitext-Antworten (Größe
   wird inline je nach Häufigkeit gesetzt, siehe admin_umfrageergebnisse.php) */

.umfrage-begriffe {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px 16px;
	padding: 24px 12px;
}

.umfrage-begriff {
	color: var(--c-primary-dark);
	font-weight: 700;
	line-height: 1;
	opacity: 0;
	animation: umfrageBegriffEin .5s ease forwards;
	white-space: nowrap;
}

.umfrage-begriff:nth-child(odd) {
	color: var(--c-primary);
}

.umfrage-begriff:nth-child(3n) {
	color: var(--c-accent-2);
}

@keyframes umfrageBegriffEin {
	from { opacity: 0; transform: translateY(6px) scale(.9); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes umfrageFadeInUp {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}

/* Vollbild-Live-Ansicht (Beamer-Modus) - zeigt laut Konzeptentscheidung
   ausschließlich aggregierte Zahlen, nie Namen (siehe UmfrageService). */

.umfrage-present {
	min-height: 100vh;
	background: var(--c-bg);
	display: flex;
	flex-direction: column;
	padding: 40px;
}

.umfrage-present-kopf {
	text-align: center;
	margin-bottom: 40px;
}

.umfrage-present-titel {
	font-size: clamp(28px, 4vw, 48px);
	font-weight: 800;
	color: var(--c-text);
	margin: 0 0 8px;
}

.umfrage-present-quote {
	font-size: 18px;
	color: var(--c-text-muted);
}

.umfrage-present-inhalt {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.umfrage-present-balken-liste {
	width: 100%;
	max-width: 900px;
}

.umfrage-present-frage-block {
	margin-bottom: 48px;
}

.umfrage-present-frage-block:last-child {
	margin-bottom: 0;
}

.umfrage-present-frage-titel {
	font-size: clamp(16px, 2vw, 22px);
	font-weight: 600;
	color: var(--c-text-muted);
	text-transform: uppercase;
	letter-spacing: .03em;
	margin: 0 0 16px;
	text-align: center;
}

.umfrage-present-zeile {
	margin-bottom: 28px;
}

.umfrage-present-zeile-kopf {
	display: flex;
	justify-content: space-between;
	font-size: clamp(18px, 2.4vw, 26px);
	font-weight: 700;
	color: var(--c-text);
	margin-bottom: 10px;
}

.umfrage-present-balken-spur {
	height: 28px;
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: 999px;
	overflow: hidden;
}

.umfrage-present-balken-fuellung {
	height: 100%;
	background: linear-gradient(90deg, var(--c-primary), var(--c-primary-dark));
	border-radius: 999px;
	width: 0;
	transition: width .8s cubic-bezier(.22, 1, .36, 1);
}

.umfrage-present-exit {
	position: fixed;
	top: 20px;
	right: 20px;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--c-text-muted);
	text-decoration: none;
	transition: background-color .15s ease;
}

.umfrage-present-exit:hover {
	background: var(--c-bg);
	color: var(--c-text);
	text-decoration: none;
}

@media (max-width: 600px) {
	.umfrage-present {
		padding: 20px;
	}
}

/* Bild je Frage: prominent statt der kleinen 92px-Verwaltungs-Vorschau
   (.standort-bild-thumb), da hier - anders als bei der Bildverwaltung in
   admin_umfragecreate.php - das Foto selbst Teil der Frage ist. Auf allen
   Bildschirmgrößen volle Breite mit fester Maximalhöhe (object-fit: cover
   statt Verzerrung), Klick/Tap öffnet dasselbe Vollbild-Modal wie an den
   übrigen Stellen der Anwendung (.standort-bild-modal). */

.umfrage-frage-bild-wrapper {
	margin: 12px 0 18px;
}

.umfrage-frage-bild-link {
	display: block;
	width: 100%;
	padding: 0;
	border: 1px solid var(--c-border);
	border-radius: var(--c-radius);
	overflow: hidden;
	background: none;
	cursor: pointer;
}

.umfrage-frage-bild-link .umfrage-frage-bild {
	width: 100%;
	height: auto;
	max-height: 320px;
	object-fit: cover;
	display: block;
	transition: transform 180ms ease;
}

.umfrage-frage-bild-link:hover .umfrage-frage-bild,
.umfrage-frage-bild-link:focus .umfrage-frage-bild {
	transform: scale(1.03);
}

/* Dieselbe Frage-Bild-Idee für die Vollbild-Live-Ansicht (Beamer-Modus) -
   dort bewusst OHNE Klick-Wrapper: die Ansicht ist bereits Vollbild, ein
   zusätzliches Modal wäre auf einer projizierten Fläche ohne Maus/Touch
   ohnehin nicht bedienbar. */

.umfrage-present-frage-bild {
	display: block;
	width: 100%;
	max-width: 520px;
	max-height: 300px;
	object-fit: cover;
	border-radius: 20px;
	margin: 0 auto 24px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, .12);
}

/* Eigenes Vollbild-Overlay für Frage-/Options-Bilder auf der Konfi-
   Antwortseite (umfrage_beantworten.php) - bewusst NICHT das
   Bootstrap-Modal (.standort-bild-modal), da dessen Schließen-Button bei
   hohen Bildern auf Mobilgeräten nicht zuverlässig erreichbar war (er
   scrollte mit dem Bildinhalt statt am Viewport zu kleben). Sowohl das
   Overlay als auch der Schließen-Button sind deshalb hier "fixed" statt
   "absolute" positioniert. */
.umfrage-lightbox {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(17, 20, 24, 0.94);
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 44px 16px 16px;
}

.umfrage-lightbox[hidden] {
	display: none;
}

.umfrage-lightbox-bild {
	max-width: 100%;
	max-height: 100%;
	border-radius: 12px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
	object-fit: contain;
}

.umfrage-lightbox-schliessen {
	position: fixed;
	top: 14px;
	right: 14px;
	width: 44px;
	height: 44px;
	line-height: 40px;
	text-align: center;
	background: rgba(255, 255, 255, 0.12);
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-radius: 999px;
	color: #fff;
	font-size: 20px;
	z-index: 10001;
	cursor: pointer;
}

.umfrage-lightbox-schliessen:hover,
.umfrage-lightbox-schliessen:focus {
	background: rgba(255, 255, 255, 0.24);
}

/* Verhindert Hintergrund-Scroll, während die Lightbox offen ist - sonst
   liess sich auf Touch-Geräten hinter dem Overlay weiterscrollen. */
body.umfrage-lightbox-offen {
	overflow: hidden;
}

@media (max-width: 600px) {
	.umfrage-frage-bild-link .umfrage-frage-bild {
		max-height: 220px;
	}

	.umfrage-present-frage-bild {
		max-height: 200px;
		margin-bottom: 16px;
	}
}

/* ---------- Datenschutzerklärung: Abschnitt Chat ---------- */
/* Jugendgerechte Kurzfassung vor der ausführlichen Fassung (impressum.php#chat). */
.datenschutz-kurz {
	background: var(--c-primary-light);
	border-radius: var(--c-radius-sm);
	padding: 12px 16px;
	margin: 8px 0 16px;
}

.datenschutz-chat-titel {
	margin-top: 28px;
	scroll-margin-top: 16px;
}

/* neon-core.css blendet #chat aus (Chat-Seitenleiste des Themes); die
   Überschrift heißt aber so, weil App und Web auf impressum.php#chat
   verlinken. */
h4#chat.datenschutz-chat-titel {
	display: block;
	position: static;
	width: auto;
	background: none;
	z-index: auto;
	padding: 0;
}

.datenschutz-inhalt ol {
	padding-left: 22px;
}

/* Tabelle "Welche Daten, wofür und wie lange": auf dem Handy als Karten
   untereinander statt seitlich zu scrollen. */
@media (max-width: 767px) {
	.datenschutz-tabelle,
	.datenschutz-tabelle tbody,
	.datenschutz-tabelle tr,
	.datenschutz-tabelle td {
		display: block;
		width: 100%;
	}
	.datenschutz-tabelle thead {
		display: none;
	}
	.datenschutz-tabelle.table-bordered {
		border: 0;
	}
	.datenschutz-tabelle tr {
		border: 1px solid var(--c-border, #dde3e8);
		border-radius: var(--c-radius-sm, 8px);
		margin-bottom: 12px;
		padding: 4px 0;
	}
	.datenschutz-tabelle.table-bordered > tbody > tr > td {
		border: 0;
		padding: 4px 12px;
		white-space: normal;
	}
	.datenschutz-tabelle td:first-child {
		font-weight: 700;
		padding-top: 8px;
	}
	.datenschutz-tabelle td[data-label]::before {
		content: attr(data-label) ": ";
		font-weight: 600;
	}
}

/* ---------- Offline-Modus (assets/js/pwa-register.js) ---------- */
/* Hinweis unten (auf dem Handy über der Tab-Leiste), Meldungen oben. */
.civitas-offline {
	position: fixed;
	z-index: 1060;
	left: 50%;
	bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	transform: translateX(-50%);
	width: calc(100% - 24px);
	max-width: 560px;
	padding: 10px 14px;
	border-radius: 12px;
	background: #2B2E33;
	color: #FFFFFF;
	font-size: 14px;
	line-height: 1.45;
	box-shadow: 0 6px 24px rgba(20, 30, 40, 0.25);
}

.civitas-offline[hidden],
.civitas-toast[hidden] {
	display: none;
}

@media (max-width: 767px) {
	.page-container:has(.bottom-tab-bar) ~ .civitas-offline {
		bottom: calc(80px + env(safe-area-inset-bottom, 0px));
	}
}

html.ist-offline [data-offline-gesperrt] {
	cursor: not-allowed;
}

.civitas-toast {
	position: fixed;
	z-index: 1070;
	left: 50%;
	top: calc(12px + env(safe-area-inset-top, 0px));
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 12px;
	width: max-content;
	max-width: calc(100% - 24px);
	padding: 10px 14px;
	border-radius: 12px;
	background: #2B2E33;
	color: #FFFFFF;
	font-size: 14px;
	line-height: 1.4;
	box-shadow: 0 6px 24px rgba(20, 30, 40, 0.25);
}

.civitas-toast button {
	flex: none;
	padding: 4px 6px;
	border: 0;
	background: transparent;
	color: #9FD3EA;
	font-weight: 700;
	cursor: pointer;
}

/* ---------- Push-Benachrichtigungen (assets/js/push.js) ---------- */

.push-karte {
	margin-bottom: 16px;
	padding: 16px 20px;
	border: 1px solid var(--c-border);
	border-radius: var(--c-radius);
	background: #FFFFFF;
	box-shadow: var(--c-shadow);
}

.push-karte--dialog {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
}

/* wie .profil-gruppe__titel */
.push-karte__titel {
	margin: 0 0 10px;
	color: var(--c-text-muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.push-karte__untertitel {
	margin: 16px 0 4px;
	color: var(--c-text-muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.push-karte p {
	margin: 0 0 10px;
	line-height: 1.5;
}

.push-karte .push-karte__klein {
	color: var(--c-text-muted);
	font-size: 13px;
}

.push-karte .push-karte__an {
	color: var(--c-success);
	font-weight: 700;
}

.push-karte .push-karte__fehler {
	margin-top: 8px;
	color: #B42318;
	font-size: 13.5px;
}

.push-karte__knopf {
	margin: 4px 8px 4px 0;
}

.push-karte__knoepfe {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 8px;
}

.push-karte__knoepfe .push-karte__knopf {
	margin: 0;
}

.push-karte__schalter {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 12px 0;
}

.push-schalter {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	font-weight: 400;
	cursor: pointer;
}

.push-schalter input {
	flex: none;
	width: 20px;
	height: 20px;
	margin: 1px 0 0;
	accent-color: var(--c-primary);
}

.push-schalter span {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.push-schalter small {
	color: var(--c-text-muted);
	font-size: 12.5px;
	line-height: 1.4;
}

.push-anleitung {
	margin: 8px 0 12px;
	padding-left: 20px;
	line-height: 1.6;
}

.push-anleitung[hidden] {
	display: none;
}

.push-anleitung__symbol {
	display: inline-block;
	padding: 0 5px;
	border: 1px solid var(--c-border);
	border-radius: 6px;
	font-size: 12px;
	line-height: 1.5;
}

.push-karte__geraete {
	margin: 0;
	padding: 0;
	list-style: none;
}

.push-karte__geraete li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0;
	border-top: 1px solid var(--c-border);
}

.push-karte__geraete small {
	color: var(--c-text-muted);
}

/* Hinweiskarte auf der Startseite */
.push-hinweis {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin: 0 0 16px;
	padding: 16px 18px;
	border: 1px solid #CFE3EC;
	border-radius: var(--c-radius);
	background: var(--c-primary-light);
}

.push-hinweis[hidden] {
	display: none;
}

/* Knöpfe (.btn) & Co. innerhalb von Karte/Hinweis: hidden muss gewinnen. */
.push-karte [hidden],
.push-hinweis [hidden] {
	display: none !important;
}

.push-hinweis__icon {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--c-primary);
	color: #FFFFFF;
	font-size: 18px;
}

.push-hinweis__inhalt {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.push-hinweis__titel {
	font-size: 15px;
}

.push-hinweis__text {
	line-height: 1.45;
}

.push-hinweis__knoepfe {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 8px;
}

/* ---------- Einstellungen der Gemeinde (admin_einstellungen.php) ---------- */
.kacheln {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 16px;
	margin: 16px 0 24px;
}
.kachel-einstellung {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 18px 20px;
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--c-radius);
	box-shadow: var(--c-shadow);
	color: var(--c-text);
	text-decoration: none;
	transition: transform .15s ease, box-shadow .15s ease;
}
.kachel-einstellung:hover,
.kachel-einstellung:focus {
	color: var(--c-text);
	text-decoration: none;
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(20, 30, 40, 0.12);
}
.kachel-einstellung__symbol {
	font-size: 22px;
	color: var(--c-primary);
}
.kachel-einstellung__titel {
	font-size: 16px;
	font-weight: 700;
}
.kachel-einstellung__text {
	color: var(--c-text-muted);
	font-size: 13px;
	line-height: 1.45;
}
.kachel-einstellung--warnung {
	border-color: var(--c-warning);
}
.kachel-einstellung__punkt {
	display: inline-block;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--c-warning);
	vertical-align: middle;
}
.einrichtung-hinweis {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding: 16px 20px;
	margin-bottom: 16px;
	border-radius: var(--c-radius);
	background: #EAF3F7;
	border: 1px solid #C9E0EA;
}
.einstellung {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 24px;
	padding: 14px 0;
	border-bottom: 1px solid var(--c-border);
}
.einstellung:last-of-type {
	border-bottom: 0;
}
.einstellung__text {
	flex: 1 1 280px;
	min-width: 0;
}
.einstellung__titel {
	display: block;
	margin: 0;
	font-weight: 700;
}
.einstellung__hilfe,
.einstellung__herkunft {
	color: var(--c-text-muted);
	font-size: 13px;
	line-height: 1.45;
	margin-top: 2px;
}
.einstellung__herkunft {
	font-style: italic;
}
.einstellung__wert {
	flex: 0 1 320px;
	min-width: 0;
}
.einstellung__wert textarea,
.einstellung__wert input[type="text"] {
	width: 100%;
}
.einstellung__knopf {
	padding-top: 16px;
}
/* Pflicht / freiwillig / nicht abfragen */
.knopfleiste {
	display: inline-flex;
	flex-wrap: wrap;
	border: 1px solid var(--c-border);
	border-radius: 999px;
	overflow: hidden;
}
.knopfleiste input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.knopfleiste label {
	margin: 0;
	padding: 7px 14px;
	font-weight: 600;
	font-size: 13px;
	cursor: pointer;
	color: var(--c-text-muted);
	background: var(--c-surface);
}
.knopfleiste label + input + label,
.knopfleiste input + label ~ label {
	border-left: 1px solid var(--c-border);
}
.knopfleiste input:checked + label {
	background: var(--c-primary);
	color: #FFFFFF;
}
.knopfleiste input:focus-visible + label {
	outline: 2px solid var(--c-primary-dark);
	outline-offset: -2px;
}
.knopfleiste input:disabled + label {
	cursor: default;
}
/* Ein-/Aus-Schalter */
.schalter {
	position: relative;
	display: inline-block;
	width: 48px;
	height: 28px;
	margin: 0;
}
.schalter input {
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	cursor: pointer;
	z-index: 1;
}
.schalter__bahn {
	position: absolute;
	inset: 0;
	border-radius: 999px;
	background: #C7CDD4;
	transition: background .15s ease;
}
.schalter__bahn::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #FFFFFF;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
	transition: transform .15s ease;
}
.schalter input:checked + .schalter__bahn {
	background: var(--c-primary);
}
.schalter input:checked + .schalter__bahn::after {
	transform: translateX(20px);
}
.schalter input:focus-visible + .schalter__bahn {
	outline: 2px solid var(--c-primary-dark);
	outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
	.kachel-einstellung, .schalter__bahn, .schalter__bahn::after { transition: none; }
}
.pakete {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 12px;
}
.paket {
	position: relative;
	margin: 0;
}
/* Fragezeichen oben rechts neben dem Knopf (AdminHilfe()) */
.paket > .vw-hilfe-knopf {
	position: absolute;
	top: 12px;
	right: 12px;
}
.paket__knopf {
	display: flex;
	flex-direction: column;
	gap: 4px;
	width: 100%;
	height: 100%;
	padding: 14px 44px 14px 16px;
	text-align: left;
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--c-radius-sm);
	cursor: pointer;
}
.paket__knopf:hover,
.paket__knopf:focus {
	border-color: var(--c-primary);
}
.paket__knopf span {
	color: var(--c-text-muted);
	font-size: 13px;
}
.vorschau-liste__zeile {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0;
	border-bottom: 1px solid var(--c-border);
}
.vorschau-liste__zeile:last-child {
	border-bottom: 0;
}
.etikett {
	display: inline-block;
	padding: 2px 9px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
	background: #EEF1F4;
	color: var(--c-text-muted);
}
.etikett--pflicht {
	background: #E4F0F5;
	color: #1F5570;
}
.etikett--freiwillig {
	background: #EEF1F4;
	color: #4A5968;
}
.frage-karte {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--c-border);
}
.frage-formular {
	margin-top: 18px;
	padding: 16px;
	border-radius: var(--c-radius-sm);
	background: var(--c-bg);
}
.liste-schlicht {
	list-style: none;
	padding: 0;
	margin: 0 0 12px;
}
.liste-schlicht li {
	padding: 6px 0;
}
.mail-vorschau {
	font-family: Helvetica, Arial, sans-serif;
}
.mail-vorschau__von {
	color: var(--c-text-muted);
	font-size: 13px;
	margin-bottom: 12px;
}
.farbwahl {
	display: flex;
	gap: 8px;
	margin-bottom: 8px;
}
.farbwahl__punkt {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 3px solid transparent;
}
.farbwahl__punkt.is-aktiv {
	border-color: var(--c-text);
}
.begruessung-vorschau {
	padding: 14px 16px;
	border-left: 4px solid var(--c-primary);
	border-radius: var(--c-radius-sm);
	background: var(--c-bg);
}
.begruessung-vorschau p:last-child {
	margin-bottom: 0;
}
.rechte-tabelle td:not(:first-child),
.rechte-tabelle th:not(:first-child) {
	text-align: center;
}
.terminart-aktionen {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--c-border);
}
/* Begrüßung der Gemeinde auf der Startseite der Konfis */
.gemeinde-begruessung {
	margin: 0 0 18px;
	padding: 14px 18px;
	border-left: 4px solid var(--c-primary);
	border-radius: var(--c-radius-sm);
	background: var(--c-surface);
	box-shadow: var(--c-shadow);
}
.gemeinde-begruessung p:last-child {
	margin-bottom: 0;
}
.gemeinde-begruessung__person {
	color: var(--c-text-muted);
}
/* Einrichtungsassistent (admin_einrichtung.php) */
/* Auf großen Bildschirmen mittig: Seitenkopf, Assistent und Fußzeile
   stehen in einer gemeinsamen Spalte. */
body.vw.assistent-seite .vw-inhalt,
body.vw.assistent-seite .vw-fuss {
	max-width: 944px;
}
.assistent {
	padding: 24px;
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--c-radius);
	box-shadow: var(--c-shadow);
}
@media (min-width: 768px) {
	.assistent {
		padding: 28px 32px 32px;
	}
}
.assistent h2 {
	margin-top: 8px;
	font-size: 24px;
	font-weight: 700;
}
.assistent__schritte {
	display: flex;
	gap: 8px;
	margin-bottom: 8px;
}
.assistent__punkt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--c-bg);
	color: var(--c-text-muted);
	font-weight: 700;
	font-size: 13px;
}
.assistent__punkt.is-aktiv {
	background: var(--c-primary);
	color: #FFFFFF;
}
.assistent__punkt.is-fertig {
	background: #D7E8EF;
	background: color-mix(in srgb, var(--c-primary) 18%, #FFFFFF);
	color: var(--c-primary-dark);
}
.assistent__knoepfe {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-top: 24px;
}
.assistent__knoepfe [data-weiter],
.assistent__knoepfe [data-fertig] {
	margin-left: auto;
}
.auswahl-karten {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 12px;
}
/* Karte = Auswahl (label) + Fragezeichen oben rechts (AdminHilfe()) */
.auswahl-karte {
	position: relative;
}
.auswahl-karte > .auswahl-karte__wahl {
	display: block;
	height: 100%;
	margin: 0;
	cursor: pointer;
}
.auswahl-karte__wahl input {
	position: absolute;
	opacity: 0;
}
.auswahl-karte__wahl > span {
	display: flex;
	flex-direction: column;
	gap: 4px;
	height: 100%;
	padding: 14px 44px 14px 16px;
	border: 2px solid var(--c-border);
	border-radius: var(--c-radius-sm);
	color: var(--c-text-muted);
}
.auswahl-karte__wahl strong {
	color: var(--c-text);
}
.auswahl-karte__wahl input:checked + span {
	border-color: var(--c-primary);
	background: #EEF6F9;
	background: color-mix(in srgb, var(--c-primary) 8%, #FFFFFF);
}
.auswahl-karte__wahl input:focus-visible + span {
	outline: 2px solid var(--c-primary-dark);
	outline-offset: 2px;
}
.auswahl-karte > .vw-hilfe-knopf {
	position: absolute;
	top: 13px;
	right: 13px;
}
.farbwahl--waehlbar label {
	margin: 0;
	cursor: pointer;
}
.farbwahl--waehlbar input {
	position: absolute;
	opacity: 0;
}
.farbwahl--waehlbar input:checked + .farbwahl__punkt {
	border-color: var(--c-text);
}
.farbwahl--waehlbar input:focus-visible + .farbwahl__punkt {
	outline: 2px solid var(--c-primary-dark);
	outline-offset: 2px;
}
.farbwahl--waehlbar .farbwahl__punkt {
	display: inline-block;
	width: 34px;
	height: 34px;
}
.zusammenfassung li {
	padding: 4px 0;
}
.vorschau-satz {
	font-style: italic;
	color: var(--c-primary-dark);
}
/* ----- Druckdialog Datenblatt (admin_datenblatt.php) ----- */
body.vw .datenblatt-dialog__gruppe {
	margin: 24px 0 0;
}
body.vw .datenblatt-dialog__gruppe legend {
	width: 100%;
	margin: 0 0 6px;
	padding: 0;
	border: 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--c-text);
}
body.vw .datenblatt-dialog__gruppe .radio,
body.vw .datenblatt-dialog__gruppe .checkbox {
	margin: 6px 0;
}
.datenblatt-dialog__zahl {
	white-space: nowrap;
}
/* Spaltenwahl der Personenliste (admin_liste.php) */
.liste-spalten {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 0 16px;
}
body.vw .liste-spalten .checkbox {
	margin: 4px 0;
}
.datenblatt-dialog__hinweis {
	margin: 14px 0 0;
}
.datenblatt-ruecklauf {
	margin-top: 16px;
}
.datenblatt-ruecklauf h3 {
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 700;
}
.datenblatt-ruecklauf p:last-child {
	margin-bottom: 0;
}

/* Personenliste: Rücklauf des Anmeldebogens in den Zeilenaktionen */
.anmeldebogen-form {
	display: inline-flex;
	margin: 0;
}
body.vw .anmeldebogen-form .btn {
	white-space: nowrap;
}
body.vw .btn.anmeldebogen-zurueck,
body.vw .btn.anmeldebogen-zurueck:hover {
	border-color: #BFE3CB;
	background: #E5F5EA;
	color: #1C7D44;
	cursor: default;
}

/* Das hidden-Attribut gilt immer - auch für .btn und andere Klassen mit display. */
[hidden] {
	display: none !important;
}

/* ----- Gottesdienst-Nachweis (admin_gottesdienste.php, gottesdienst.php) ----- */
.gd-zeile { border-bottom: 1px solid #e2e5ea; padding: 12px 0; }
.gd-zeile:last-child { border-bottom: 0; }
.gd-zeile__kopf { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center; }
.gd-zeile__knoepfe { display: flex; gap: 6px; flex-wrap: wrap; }
.gd-zeile__details { margin-top: 10px; padding: 10px 12px; background: #f7f9fa; border-radius: 6px; }
.gd-zeile__details .form-inline { margin: 8px 0; }
.gd-zeile__weitere { display: flex; gap: 8px; justify-content: flex-end; margin-top: 6px; }
.gd-bestaetigen h3 { margin: 4px 0 6px; }
.gd-bestaetigen .btn-lg { min-width: 220px; margin-top: 8px; }
.gd-kamera { margin: 10px 0; text-align: center; }
.gd-kamera video { width: 100%; max-height: 320px; border-radius: 8px; background: #000; object-fit: cover; }
.gd-code { margin-top: 12px; }
.gd-code input { text-transform: uppercase; letter-spacing: .08em; font-family: Menlo, Consolas, monospace; }
.gd-stand { font-size: 16px; }
.gd-stand strong { font-size: 22px; color: var(--c-primary, #2A6F8F); }
.gd-verlauf { display: inline-block; margin-top: 4px; padding: 8px 12px; border: 1px solid #e2e5ea; border-radius: 8px; color: inherit; }
.gd-verlauf:hover, .gd-verlauf:focus { text-decoration: none; border-color: var(--c-primary, #2A6F8F); }

/* ----- Native Datums-/Zeitfelder (type="date"/"time") -----
   bootstrap.css setzt für WebKit line-height: 31px zusätzlich zum Padding,
   dadurch rutscht der Wert nach unten und wird abgeschnitten. Hier an die
   normalen .form-control-Textfelder angleichen. */
input[type="date"].form-control,
input[type="time"].form-control,
input[type="datetime-local"].form-control,
input[type="month"].form-control {
  line-height: 1.42857143;
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;
  text-align: left;
}
input.form-control::-webkit-date-and-time-value { text-align: left; margin: 0; }
input.form-control::-webkit-datetime-edit { padding: 0; line-height: inherit; }
input.form-control::-webkit-datetime-edit-fields-wrapper { padding: 0; }
input.form-control::-webkit-calendar-picker-indicator { margin: 0 0 0 4px; opacity: .6; cursor: pointer; }
input.form-control::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* Jahrgangswechsel-Assistent (admin_jahrgangswechsel.php). Aufbau wie der
   Einrichtungsassistent (.assistent, .assistent__punkt, .auswahl-karte,
   mittige Spalte über body.assistent-seite); hier steht nur, was dort
   fehlt: Schrittpunkte als Links, Listen mit einer Wahl je Zeile,
   Möglichkeiten mit eigenen Feldern, Zusammenfassung und Ergebnis. */
.assistent__knoepfe .assistent__weiter {
	margin-left: auto;
}
.jw-schritte {
	flex-wrap: wrap;
	margin-top: 0;
	padding: 0;
	list-style: none;
}
body.vw a.assistent__punkt,
body.vw a.assistent__punkt:focus {
	text-decoration: none;
}
body.vw a.assistent__punkt:hover {
	color: var(--c-primary-dark);
	text-decoration: none;
	background: #BCD6E2;
	background: color-mix(in srgb, var(--c-primary) 34%, #FFFFFF);
}
.jw-schritt {
	margin: 18px 0 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--c-text-muted);
}
body.vw .jw .jw-schritt + h2 {
	margin-top: 4px;
}
/* Auf schmalen Handys bleiben alle acht Punkte in einer Zeile. */
@media (max-width: 400px) {
	.jw-schritte {
		gap: 5px;
	}
	.jw-schritte .assistent__punkt {
		width: 28px;
		height: 28px;
	}
}
@media (max-width: 350px) {
	.jw-schritte {
		gap: 3px;
	}
	.jw-schritte .assistent__punkt {
		width: 26px;
		height: 26px;
		font-size: 12px;
	}
}
body.vw .jw .jw-zwischentitel {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 28px 0 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--c-text-muted);
}
.jw .jw-abstand {
	margin-top: 14px;
}
.jw-leer {
	margin-top: 18px;
	border: 1px dashed var(--c-border);
	border-radius: var(--c-radius-sm);
}
/* Übersicht: drei Zusagen, Gruppen als große Knöpfe */
.jw-zusagen {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 10px;
	margin: 18px 0 24px;
	padding: 0;
	list-style: none;
}
@media (min-width: 700px) {
	.jw-zusagen {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
.jw-zusagen li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 14px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--c-text-muted);
	background: var(--c-bg);
	border-radius: var(--c-radius-sm);
}
.jw-zusagen i,
.jw-folgen--symbole > li > i {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	font-size: 14px;
	color: var(--c-primary-dark);
	background: #D7E8EF;
	background: color-mix(in srgb, var(--c-primary) 16%, #FFFFFF);
	border-radius: 50%;
}
.jw-zusagen i::before,
.jw-folgen--symbole > li > i::before,
.jw-gruppe__symbol i::before,
.jw-ergebnis__symbol i::before {
	margin: 0;
}
.jw-zusagen strong {
	display: block;
	margin-bottom: 1px;
	font-size: 13.5px;
	color: var(--c-text);
}
.jw-gruppen {
	display: grid;
	gap: 10px;
}
.jw-gruppe {
	margin: 0;
}
body.vw .jw-gruppe__knopf {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	padding: 14px 16px;
	font: inherit;
	color: var(--c-text);
	text-align: left;
	background: var(--c-surface);
	border: 2px solid var(--c-border);
	border-radius: var(--c-radius-sm);
	cursor: pointer;
	transition: border-color .12s, background-color .12s;
}
body.vw .jw-gruppe__knopf:hover {
	background: #EEF6F9;
	background: color-mix(in srgb, var(--c-primary) 6%, #FFFFFF);
	border-color: var(--c-primary);
}
body.vw .jw-gruppe__knopf:focus-visible {
	outline: 2px solid var(--c-primary-dark);
	outline-offset: 2px;
}
.jw-gruppe__symbol {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	font-size: 19px;
	color: var(--c-primary-dark);
	background: #D7E8EF;
	background: color-mix(in srgb, var(--c-primary) 14%, #FFFFFF);
	border-radius: 12px;
}
.jw-gruppe__text {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.jw-gruppe__name {
	font-size: 15.5px;
	font-weight: 700;
	overflow-wrap: anywhere;
}
.jw-gruppe__zahlen {
	font-size: 13px;
	color: var(--c-text-muted);
}
.jw-gruppe__aktion {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 4px;
	font-weight: 700;
	color: var(--c-primary);
}
.jw-verlauf {
	margin-top: 24px;
}
@media (max-width: 599px) {
	body.vw .jw-gruppe__knopf {
		flex-wrap: wrap;
		gap: 8px 12px;
	}
	.jw-gruppe__symbol,
	.jw-verlauf .vw-liste__pfeil {
		display: none;
	}
	.jw-gruppe__text {
		flex-basis: 100%;
	}
	.jw-gruppe__aktion {
		margin-left: auto;
	}
	/* Knöpfe umbrechen als Ganzes; die Hauptaktion steht dann oben. */
	.jw .assistent__knoepfe {
		flex-wrap: wrap-reverse;
	}
	body.vw .jw .assistent__knoepfe > .btn {
		white-space: nowrap;
	}
	.jw-bestaetigen .assistent__knoepfe > .btn,
	.jw-ergebnis .assistent__knoepfe > .btn {
		flex: 1 1 auto;
	}
}
/* Schritt 2: Liste zum Abhaken */
.jw-check,
.jw-personen,
.jw-folgen {
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--c-border);
	border-radius: var(--c-radius-sm);
}
.jw-zwischentitel + .jw-check {
	margin-top: 0;
}
.jw-check__punkt {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 16px;
	padding: 12px 14px;
}
.jw-check__punkt + .jw-check__punkt,
.jw-person + .jw-person,
.jw-folgen > li + li {
	border-top: 1px solid var(--c-border);
}
body.vw .jw-check__wahl {
	display: flex;
	flex: 1 1 280px;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	font-weight: 600;
	color: var(--c-text);
	cursor: pointer;
}
body.vw .jw-check__wahl input {
	flex: none;
	margin: 2px 0 0;
}
.jw-check__punkt.is-erledigt .jw-check__wahl {
	font-weight: 500;
	color: var(--c-text-muted);
}
.jw-check__stand {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	margin-left: auto;
	font-size: 13.5px;
}
.jw-check__stand a {
	font-weight: 600;
	white-space: nowrap;
}
@media (max-width: 599px) {
	.jw-check__stand {
		margin-left: 27px;
	}
}
/* Schritt 3: eine Wahl je Person (Schalter mit drei Feldern) */
.jw-liste-kopf {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	margin: 18px 0 10px;
}
.jw-liste-kopf + .jw-personen {
	margin-top: 0;
}
.jw-liste-kopf__titel {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-weight: 700;
}
.jw-alle {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0;
	font-size: 13px;
	color: var(--c-text-muted);
}
.jw-person {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	padding: 9px 10px 9px 14px;
}
.jw-person__name {
	flex: 1 1 180px;
	min-width: 0;
	font-weight: 600;
	overflow-wrap: anywhere;
}
.jw-wahl {
	display: inline-flex;
	flex: none;
	gap: 2px;
	padding: 3px;
	background: var(--c-bg);
	border-radius: 10px;
}
body.vw .jw-wahl__option {
	position: relative;
	display: flex;
	margin: 0;
	font-weight: 600;
	cursor: pointer;
}
.jw-wahl__option input,
.jw-option__wahl input {
	position: absolute;
	opacity: 0;
}
.jw-wahl__option span {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 6px 12px;
	font-size: 13px;
	line-height: 1.3;
	text-align: center;
	color: var(--c-text-muted);
	border-radius: 8px;
	transition: background-color .12s, color .12s, box-shadow .12s;
}
.jw-wahl__option:hover span {
	color: var(--c-text);
}
.jw-wahl__option input:checked + span {
	color: var(--c-text);
	background: #FFFFFF;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.10), 0 0 0 1px var(--c-border);
}
.jw-wahl__option--uebernehmen input:checked + span {
	color: var(--c-primary-dark);
	background: #EAF3F7;
	background: color-mix(in srgb, var(--c-primary) 12%, #FFFFFF);
	box-shadow: 0 0 0 1px #BCD6E2;
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-primary) 45%, #FFFFFF);
}
.jw-wahl__option--teamer input:checked + span {
	color: #1E7A45;
	background: #E8F5EE;
	box-shadow: 0 0 0 1px #B9E0C8;
}
.jw-wahl__option input:focus-visible + span,
.jw-option__wahl input:focus-visible + span {
	outline: 2px solid var(--c-primary-dark);
	outline-offset: 2px;
}
.jw-zaehler {
	margin: 10px 0 4px;
}
@media (max-width: 599px) {
	.jw-alle {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		width: 100%;
	}
	.jw-alle__titel {
		grid-column: 1 / -1;
	}
	.jw-person {
		padding: 12px;
	}
	.jw-wahl {
		display: flex;
		width: 100%;
	}
	body.vw .jw-wahl__option {
		flex: 1 1 0;
	}
	.jw-wahl__option span {
		width: 100%;
		padding: 7px 6px;
		font-size: 12.5px;
	}
}
/* Schritt 4: Löschdatum, Abschiedshinweis und Vorschau */
body.vw .jw .jw-feld-datum {
	max-width: 220px;
}
body.vw .jw .jw-feld-zahl {
	max-width: 140px;
}
.jw-abschied {
	max-width: 560px;
}
.jw-abschied__text {
	white-space: pre-line;
	overflow-wrap: anywhere;
}
body.vw .jw-attrappe {
	pointer-events: none;
}
/* Schritte 5 und 6: Fragen mit Auswahlkarten */
.jw-frage {
	min-width: 0;
	margin: 22px 0 0;
	padding: 0;
	border: 0;
}
body.vw .jw legend.jw-frage__titel {
	display: block;
	width: 100%;
	margin: 0 0 10px;
	padding: 0;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--c-text);
	border: 0;
}
body.vw .jw .jw-frage__meta {
	margin: -6px 0 10px;
	font-size: 13px;
	color: var(--c-text-muted);
}
.jw .auswahl-karten {
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.jw .auswahl-karte > .auswahl-karte__wahl:only-child > span {
	padding-right: 16px;
}
/* Schritt 7: Möglichkeiten mit eigenen Angaben */
.jw-optionen {
	display: grid;
	gap: 10px;
	margin-top: 18px;
}
.jw-option {
	background: var(--c-surface);
	border: 2px solid var(--c-border);
	border-radius: var(--c-radius-sm);
	transition: border-color .12s, background-color .12s;
}
.jw-option.is-gewaehlt {
	background: #EEF6F9;
	background: color-mix(in srgb, var(--c-primary) 6%, #FFFFFF);
	border-color: var(--c-primary);
}
body.vw .jw-option__wahl {
	position: relative;
	display: block;
	margin: 0;
	padding: 14px 16px;
	font-weight: 400;
	cursor: pointer;
}
.jw-option__wahl > span {
	display: flex;
	flex-direction: column;
	gap: 2px;
	color: var(--c-text-muted);
	border-radius: 4px;
}
.jw-option__wahl strong {
	font-size: 14.5px;
	color: var(--c-text);
}
.jw-option__felder {
	padding: 0 16px 14px;
}
body.vw .jw-option__felder .form-control {
	max-width: 420px;
}
.jw-option__felder .form-group {
	margin-bottom: 8px;
}
.jw-codes {
	margin-top: 22px;
}
/* Schritt 7: ein oder zwei Jahre später, Grund des Vorschlags, Ferienhinweis,
   Gruppe für übernommene Konfis */
body.vw .jw .jw-frage__grund {
	margin: 8px 0 0;
	font-size: 13px;
}
body.vw .jw .jw-frage + .alert-info {
	margin-top: 18px;
}
body.vw .jw-ferienhinweis {
	max-width: 640px;
	margin: 10px 0 0;
	padding: 10px 12px;
	font-size: 13px;
}
body.vw .jw-ferienhinweis[hidden] {
	display: none;
}
.jw-ziel {
	margin-top: 22px;
}
body.vw .jw-ziel .form-control {
	max-width: 420px;
}
/* Schritt 8: Zusammenfassung und Bestätigung */
.jw-folgen > li {
	position: relative;
	padding: 11px 14px 11px 36px;
	line-height: 1.5;
}
.jw-folgen > li::before {
	content: "";
	position: absolute;
	top: 19px;
	left: 16px;
	width: 7px;
	height: 7px;
	background: var(--c-primary);
	border-radius: 50%;
}
.jw-folgen--symbole > li {
	padding: 13px 14px 13px 56px;
}
.jw-folgen--symbole > li::before {
	display: none;
}
.jw-folgen--symbole > li > i {
	position: absolute;
	top: 10px;
	left: 14px;
}
.jw-folgen > li.is-wichtig {
	background: var(--c-bg);
}
.jw-offen {
	margin-top: 16px;
}
.jw-offen ul {
	margin: 6px 0 0;
	padding-left: 20px;
}
.jw-bestaetigen {
	margin-top: 8px;
}
.jw-bestaetigen__felder {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 0 16px;
	padding: 16px 16px 2px;
	background: var(--c-bg);
	border-radius: var(--c-radius-sm);
}
.jw-verwerfen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0 4px;
	margin: 14px 0 0;
	font-size: 13px;
	color: var(--c-text-muted);
}
/* Ergebnis */
.jw-ergebnis__kopf {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}
.jw-ergebnis__symbol {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	font-size: 24px;
	border-radius: 50%;
}
.jw-ergebnis__symbol--erfolg {
	color: #1E7A45;
	background: #E8F5EE;
}
.jw-ergebnis__symbol--warnung {
	color: #8A5A00;
	background: #FEF5E1;
}
.jw-ergebnis__symbol--neutral {
	color: var(--c-text-muted);
	background: var(--c-bg);
}
.jw-ergebnis__text {
	min-width: 0;
}
.jw-ergebnis__status {
	margin: 4px 0 0;
}
body.vw .jw .jw-ergebnis__text h2 {
	margin-top: 6px;
}
.jw-ergebnis__text .text-muted {
	margin-bottom: 0;
}
.jw-ergebnis__kopf + .alert {
	margin-top: 18px;
}
.jw-aenderbar__teile {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 12px;
}
.jw-aenderbar__teil {
	margin: 0;
	padding: 14px 16px;
	background: var(--c-bg);
	border-radius: var(--c-radius-sm);
}
body.vw .jw-aenderbar__teil label,
.jw-aenderbar__titel {
	display: block;
	margin: 0 0 8px;
	font-weight: 600;
	color: var(--c-text);
}
.jw-zeile {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}
.jw-aenderbar__teil .help-block {
	margin-bottom: 0;
}
/* Fehler an einem Feld */
body.vw .jw .is-fehler .form-control {
	border-color: #B42318;
}
body.vw .jw-feldfehler {
	display: flex;
	align-items: flex-start;
	gap: 4px;
	margin: 6px 0 0;
	font-size: 13px;
	font-weight: 600;
	color: #B42318;
}
@media print {
	.jw .jw-schritte,
	.jw .assistent__knoepfe,
	.jw-aenderbar,
	.jw-verwerfen {
		display: none !important;
	}
	body.vw .assistent.jw {
		padding: 0;
		border: 0;
		box-shadow: none;
	}
	/* Das Protokoll ohne Link-Adressen hinter den Texten (Bootstrap-Druckstil) */
	.jw a[href]::after,
	body.assistent-seite .vw-seitenkopf a[href]::after {
		content: none !important;
	}
}

/* ---------- Speicherplatz (admin_home.php, func/speicher_ui.php) ----------
   Gleiche Farben und Reihenfolge wie in der Plattformverwaltung
   (plattform.css): Kategorienpalette, auf Farbsehschwäche geprüft. Die
   Werte stehen immer als Text in der Legende. */
.speicher-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0 0 10px; }
.speicher-kopf__wert { font-size: 22px; font-weight: 700; line-height: 1.2; }
.speicher-zustand { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; border: 1px solid transparent; }
.speicher-zustand--fast_voll { background: #FDF3DC; border-color: #E9C46A; color: #6B4600; }
.speicher-zustand--voll { background: #FBEAE8; border-color: #E3A39D; color: #7D241D; }
.speicher-diagramm svg.speicher-balken { display: block; width: 100%; height: 14px; overflow: hidden; }
.speicher-spur { fill: #E5E8EC; }
.speicher-fuge { fill: #FFFFFF; }
.speicher-teil--1 { fill: #2a78d6; }
.speicher-teil--2 { fill: #eb6834; }
.speicher-teil--3 { fill: #1baf7a; }
.speicher-teil--4 { fill: #eda100; }
.speicher-legende { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px 16px; list-style: none; margin: 12px 0 0; padding: 0; font-size: 13px; color: var(--c-text); }
.speicher-legende li { display: grid; grid-template-columns: 12px auto 1fr; column-gap: 8px; align-items: baseline; }
.speicher-legende svg { width: 12px; height: 12px; align-self: center; }
.speicher-legende__wert { font-weight: 700; font-variant-numeric: tabular-nums; }
.speicher-legende__info { grid-column: 2 / -1; font-size: 12px; color: var(--c-text-muted); }
.speicher-tipps { margin: 14px 0 0; padding-left: 18px; color: var(--c-text-muted); font-size: 13px; }
.speicher-tipps li { margin-bottom: 4px; }
.speicher-tabelle { margin-top: 10px; font-size: 13px; }
.speicher-tabelle summary { display: list-item; cursor: pointer; color: var(--c-primary); }
.speicher-tabelle table { margin: 8px 0 0; }
.speicher-zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.speicher-leise { color: var(--c-text-muted); font-weight: 400; }
.speicher-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Jahrgänge (admin_jahrgang.php) und Konfis einteilen (admin_gruppen_einteilen.php) */
.jahrgang-formular fieldset { margin: 0 0 12px; }
.jahrgang-formular legend { font-size: 14px; font-weight: 600; border: 0; margin-bottom: 6px; }
.jahrgang-werte { border-top: 1px solid var(--c-border); padding-top: 12px; }
.jahrgang-werte > summary { cursor: pointer; font-weight: 600; color: var(--c-primary-dark); }
.jahrgang-werte[open] > summary { margin-bottom: 10px; }
.jahrgang-fuss { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; border-top: 1px solid var(--c-border); padding-top: 12px; }
.jahrgang-umbenennen { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.jahrgang-umbenennen .form-control { width: auto; min-width: 220px; flex: 1 1 220px; }
.einteilen-auswahl { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.einteilen-auswahl label { margin: 0; font-weight: 600; }
.einteilen-auswahl .form-control { width: auto; min-width: 240px; flex: 1 1 260px; max-width: 520px; }
.einteilen-ziel { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; border-top: 1px solid var(--c-border); }
.einteilen-ziel label { margin: 0; font-weight: 600; }
.einteilen-ziel .form-control { width: auto; min-width: 220px; flex: 1 1 240px; max-width: 420px; }
.einteilen-ziel .help-block { flex-basis: 100%; margin: 0; }


/* Konfirmation: Konfi-Seite (konfirmation.php) und Verwaltung (admin_konfirmation.php) */
.konfirmation-karte { border-color: var(--c-primary); }
.konfirmation-karte .panel-body { padding: 18px 20px; }
.konfirmation-karte__eyebrow { margin: 0 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-primary); }
.konfirmation-karte__titel { margin: 0 0 12px; font-size: 22px; line-height: 1.25; overflow-wrap: anywhere; }
.konfirmation-karte__zeile { margin: 0 0 6px; display: flex; gap: 6px; align-items: baseline; overflow-wrap: anywhere; }
.konfirmation-karte__zeile i { color: var(--c-primary); flex: 0 0 auto; }
.konfirmation-karte__hinweis { margin-top: 12px; padding: 10px 12px; border-radius: var(--c-radius-sm); background: var(--c-primary-light); overflow-wrap: anywhere; }
.konfirmation-gaeste { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.konfirmation-gaeste label { margin: 0; font-weight: 600; }
.konfirmation-gaeste .form-control { width: 110px; }
.konfirmation-option { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--c-border); }
.konfirmation-option:first-child { border-top: 0; padding-top: 0; }
.konfirmation-option > div { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
.konfirmation-angaben { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
.konfirmation-angaben dt { font-weight: 600; color: var(--c-text-muted); }
.konfirmation-angaben dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 480px) {
	.konfirmation-angaben { grid-template-columns: 1fr; gap: 2px; }
	.konfirmation-angaben dd { margin-bottom: 8px; }
}
.konfirmation-nr { width: 64px; text-align: center; }

/* Entschuldigungen: Sammelentscheidung und "doch ablehnen" (admin_entschuldigungen.php) */
.entschuldigung-sammel { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 12px; }
.entschuldigung-sammel [data-sammel-knopf][disabled] { opacity: .55; }
.entschuldigung-auswahl { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: -8px 4px -8px -8px; cursor: pointer; }
.entschuldigung-auswahl input { width: 20px; height: 20px; margin: 0; cursor: pointer; }
.entschuldigung-doch { display: inline-block; margin-left: 6px; }

/* Startseite der Verwaltung: Stand je Gruppe, Unterstützung, vor der Konfirmation (UebersichtService) */
@media (min-width: 1100px) {
	.vw-raster > .vw-sp-12 { grid-column: span 12; }
}
.uebersicht-gruppen td, .uebersicht-gruppen th { white-space: nowrap; }
.uebersicht-gruppen td:first-child { white-space: normal; }
.uebersicht-hinweis { padding: 0 18px; margin: 0 0 8px; font-size: 12.5px; color: var(--vw-text-3, #6b7280); }

/* Anmeldefenster im Themen-Editor (admin_modulteilcreate.php) */
.thema-fenster .control-label-text { display: block; margin-bottom: 6px; }
.thema-fenster__zeile { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 6px; }
.thema-fenster__zeile > label { margin: 0; min-width: 2.2em; font-weight: 600; }
.thema-fenster__zeile .form-control { width: auto; flex: 0 1 150px; }
.thema-fenster__zeile .thema-fenster__zeit { flex-basis: 90px; }
.thema-fenster[hidden] { display: none; }
.termin-warteliste { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font-weight: 400; font-size: 13px; white-space: nowrap; }
.termin-warteliste input { margin: 0; }
.anmeldung-bald ul { margin: 6px 0 0; padding-left: 20px; }
.termin-warteliste-liste { margin: 0 18px 18px; padding-left: 22px; }
.termin-warteliste-liste li { margin: 4px 0; }

/* Einwilligungen: Übersicht und Eintragen (admin_einwilligungen.php), Karte bei der Person */
.einwilligung-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-bottom: 14px; }
.einwilligung-kachel p { margin: 6px 0 0; overflow-wrap: anywhere; }
.einwilligung-kachel__zahlen { display: flex; flex-wrap: wrap; gap: 6px; }
.einwilligung-filter { margin-bottom: 14px; }
.einwilligung-filter__inhalt { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.einwilligung-filter__inhalt .form-group { flex: 1 1 180px; margin: 0; }
.einwilligung-filter__knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.einwilligung-tabelle th { white-space: normal; min-width: 120px; }
.einwilligung-tabelle select.einwilligung-wahl { min-width: 140px; min-height: 36px; }
body.vw select.form-control.einwilligung-wahl--ja { border-color: var(--vw-erfolg-rand, #B9E0C8); background-color: var(--vw-erfolg-weich, #E8F5EE); color: var(--vw-erfolg, #1E7A45); }
body.vw select.form-control.einwilligung-wahl--nein { border-color: var(--vw-gefahr-rand, #F5C2BC); background-color: var(--vw-gefahr-weich, #FDEDEB); color: var(--vw-gefahr, #B42318); }
.einwilligung-speichern { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: flex-end; padding: 12px 0; background: var(--vw-flaeche, #fff); border-top: 1px solid var(--vw-rand, #e5e7eb); }
.einwilligung-speichern__text { color: var(--vw-text-3, #6b7280); font-size: 13px; }
.einwilligung-person { margin: 0; padding: 0; list-style: none; }
.einwilligung-person li { padding: 10px 0; border-top: 1px solid var(--vw-rand, #e5e7eb); }
.einwilligung-person li:first-child { border-top: 0; padding-top: 0; }
.einwilligung-person__wahl { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; }
.einwilligung-person__wahl label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 400; min-height: 32px; }
.einwilligung-person__zweck { display: block; font-size: 12.5px; color: var(--vw-text-3, #6b7280); overflow-wrap: anywhere; }
@media (max-width: 767px) {
	.einwilligung-tabelle select.einwilligung-wahl { min-width: 0; width: auto; }
}
.profil-status--nein { background: #fdeceb; color: #b42318; }
.einwilligung-hinweis { margin: 8px 0 0; }

/* Kalender-Abo im Profil (func/kalender_ui.php) */
.kalender-link { margin: 0 0 12px; padding: 12px; border-radius: 8px; background: #f4f8fa; }
.kalender-link__zeile { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.kalender-link__zeile .form-control { flex: 1 1 260px; min-width: 0; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; }
.kalender-knoepfe { flex-wrap: wrap; gap: 4px 12px; }

/* Gottesdienst anderswo (gottesdienst.php) */
.gd-anderswo-liste { margin-top: 14px; }
.gd-anderswo-liste li { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding: 6px 0; border-top: 1px solid #eef0f3; }
.gd-anderswo-liste li:first-child { border-top: 0; }
.gd-anderswo-liste li > span:first-child { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
.gd-anderswo-zurueck { display: inline; margin: 0; }

/* Konfispruch-Formular: Hinweis auf die Bibel (bibel.php) */
.konfispruch-bibel {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 6px;
	margin: 0 0 18px;
	padding: 12px 14px;
	border-radius: var(--c-radius-sm);
	background: var(--c-primary-light);
	color: var(--c-text);
	font-size: 14px;
	line-height: 1.5;
}

.konfispruch-bibel a {
	font-weight: 700;
}

/* Rückmeldung des Teams (changespruch.php), bis zum erneuten Einreichen. */
.konfispruch-zurueck__hinweis {
	margin: 8px 0;
	padding: 10px 12px;
	border-radius: var(--c-radius-sm);
	background: rgba(255, 255, 255, 0.75);
	overflow-wrap: anywhere;
}

.konfispruch-zurueck__titel {
	display: block;
	margin-bottom: 2px;
	font-size: 12px;
	font-weight: 700;
}