/*!
 * Musterstadt-Theme · Template-Probe v1.0.0 · 28.10.2026
 * Muster von Core Guard Karaman. Musterstadt ist eine fiktive Kommune.
 *
 * Aufbau: Bootstrap 5.3.8 bleibt unverändert (assets/bootstrap/).
 * Das Aussehen steckt nur in dieser Datei, über Design-Token und
 * Bootstrap-CSS-Variablen. Bootstrap-Updates = Dateien austauschen.
 *
 * Kontraste (WCAG 2.1, nachgerechnet):
 *   --ms-text     #1a1d21 auf Weiß 16,9 : 1
 *   --ms-text-2   #47505b auf Weiß  8,2 : 1
 *   --ms-blau-700 #0b5394 auf Weiß  7,8 : 1
 *   --ms-fehler   #b42318 auf Weiß  6,6 : 1
 *   --ms-feld     #68727d auf Weiß  4,9 : 1 (Rahmen, WCAG 1.4.11 verlangt 3 : 1)
 */

/* ---------- 1. Schrift ---------- */
@font-face {
	font-family: "Inter";
	src: url("../schrift/inter.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

/* ---------- 2. Design-Token ---------- */
:root {
	/* Farben */
	--ms-text: #1a1d21;
	--ms-text-2: #47505b;
	--ms-weiss: #ffffff;
	--ms-grau-50: #f3f5f7;
	--ms-grau-100: #e7ebef;
	--ms-linie: #d3d9df;
	--ms-feld: #68727d;
	--ms-blau-900: #0b2a4a;
	--ms-blau-800: #0a3a66;
	--ms-blau-700: #0b5394;
	--ms-blau-50: #eaf1f8;
	--ms-fehler: #b42318;
	--ms-erfolg: #1d6b3d;
	--ms-erfolg-bg: #ecf6f0;
	--ms-gelb: #ffd400;
	--ms-fokus-dunkel: #0b0c0c;
	--ms-muster-bg: #fff4c2;
	--ms-muster-text: #3d3200;

	/* Abstände: 4er-Raster */
	--ms-a1: 0.25rem;  /*  4 px */
	--ms-a2: 0.5rem;   /*  8 px */
	--ms-a3: 1rem;     /* 16 px */
	--ms-a4: 1.5rem;   /* 24 px */
	--ms-a5: 2rem;     /* 32 px */
	--ms-a6: 3rem;     /* 48 px */
	--ms-a7: 4rem;     /* 64 px */

	/* Form */
	--ms-radius: 6px;
	--ms-schatten: 0 1px 2px rgba(11, 42, 74, .06), 0 8px 24px -12px rgba(11, 42, 74, .18);

	/* Fokus: zweifarbig, wirkt auf hellem und dunklem Grund */
	--ms-fokus: 0 0 0 3px var(--ms-gelb), 0 0 0 6px var(--ms-fokus-dunkel);
	--ms-fokus-innen: inset 0 0 0 3px var(--ms-gelb), inset 0 0 0 6px var(--ms-fokus-dunkel);

	/* ---------- 3. Bootstrap auf die Token abbilden ---------- */
	--bs-font-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--bs-body-font-family: var(--bs-font-sans-serif);
	--bs-body-font-size: 1.125rem;
	--bs-body-line-height: 1.6;
	--bs-body-color: var(--ms-text);
	--bs-body-color-rgb: 26, 29, 33;
	--bs-emphasis-color: var(--ms-text);
	--bs-secondary-color: var(--ms-text-2);
	--bs-secondary-color-rgb: 71, 80, 91;
	--bs-tertiary-bg: var(--ms-grau-50);
	--bs-border-color: var(--ms-linie);
	--bs-border-radius: var(--ms-radius);
	--bs-primary: var(--ms-blau-700);
	--bs-primary-rgb: 11, 83, 148;
	--bs-link-color: var(--ms-blau-700);
	--bs-link-color-rgb: 11, 83, 148;
	--bs-link-hover-color: var(--ms-blau-900);
	--bs-link-hover-color-rgb: 11, 42, 74;
	--bs-heading-color: var(--ms-text);
	--bs-form-invalid-color: var(--ms-fehler);
	--bs-form-invalid-border-color: var(--ms-fehler);
	--bs-form-valid-color: var(--ms-erfolg);
	--bs-form-valid-border-color: var(--ms-erfolg);
	--bs-focus-ring-width: 0;
}

/* ---------- 4. Grundlagen ---------- */
body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
h1, h2, h3, .h1, .h2, .h3 {
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.2;
	text-wrap: balance;
}
h1, .h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 2.75rem); }   /* 32–44 px */
h2, .h2 { font-size: clamp(1.5rem, 1.25rem + 1vw, 1.875rem); }  /* 24–30 px */
h3, .h3 { font-size: 1.25rem; }                                   /* 20 px */
p, li { max-width: 68ch; }
a { text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

/* Sichtbarer Fokus für alles, was bedienbar ist (WCAG 2.4.7).
   Transparenter outline bleibt für den Windows-Kontrastmodus erhalten. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid transparent;
	box-shadow: var(--ms-fokus);
	border-radius: 2px;
}
a:focus-visible {
	background-color: var(--ms-gelb);
	color: var(--ms-fokus-dunkel) !important;
	text-decoration: none;
	box-shadow: 0 -2px var(--ms-gelb), 0 4px var(--ms-fokus-dunkel);
	border-radius: 0;
}
main:focus { outline: none; }

/* Fokus ohne Überblendung: Bootstrap blendet Rahmen und Schatten sonst in 0,15 s ein */
.btn, .form-control, .form-select, .form-check-input, .accordion-button, .nav-link, .navbar-toggler { transition: none; }

/* ---------- 5. Sprunglink (WCAG 2.4.1) ---------- */
.ms-sprunglink:focus,
.ms-sprunglink:focus-visible {
	position: absolute !important;
	top: var(--ms-a2);
	left: var(--ms-a2);
	z-index: 1100;
	padding: var(--ms-a2) var(--ms-a3);
	background: var(--ms-gelb);
	color: var(--ms-fokus-dunkel) !important;
	font-weight: 600;
	text-decoration: underline;
	box-shadow: 0 0 0 3px var(--ms-fokus-dunkel);
}

/* ---------- 6. Musterband ---------- */
.ms-musterband {
	background: var(--ms-muster-bg);
	color: var(--ms-muster-text);
	font-size: 0.875rem;
	line-height: 1.4;
	padding: 6px 0;
	border-bottom: 1px solid #e8d77a;
}
.ms-musterband strong { font-weight: 650; }

/* ---------- 7. Kopf ---------- */
.ms-servicezeile {
	background: var(--ms-grau-50);
	border-bottom: 1px solid var(--ms-grau-100);
	font-size: 0.9375rem;
}
.ms-servicezeile ul { display: flex; flex-wrap: wrap; gap: var(--ms-a1) var(--ms-a4); margin: 0; padding: var(--ms-a2) 0; list-style: none; }
.ms-servicezeile a { display: inline-flex; align-items: center; gap: var(--ms-a2); color: var(--ms-text); text-decoration: none; padding: 2px 0; }
.ms-servicezeile a:hover { text-decoration: underline; }
.ms-servicezeile svg { width: 20px; height: 20px; flex: none; color: var(--ms-blau-700); }
.ms-servicezeile a:focus-visible svg { color: var(--ms-fokus-dunkel); }

.ms-kopf { background: var(--ms-weiss); }
.ms-kopf-innen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ms-a3) var(--ms-a5); padding-top: var(--ms-a4); padding-bottom: var(--ms-a4); }
.ms-marke { display: inline-flex; align-items: center; gap: 14px; color: var(--ms-text); text-decoration: none; }
.ms-marke:hover { color: var(--ms-text); }
.ms-marke-zeichen { width: 44px; height: 44px; flex: none; border-radius: 8px; background: var(--ms-blau-900); display: grid; place-items: center; }
.ms-marke-zeichen svg { width: 26px; height: 26px; }
.ms-marke-text { display: flex; flex-direction: column; line-height: 1.15; }
.ms-marke-text b { font-size: 1.375rem; font-weight: 750; letter-spacing: -0.02em; }
.ms-marke-text span { font-size: 0.9375rem; color: var(--ms-text-2); }

.ms-suche { flex: 1 1 320px; max-width: 460px; }
.ms-suche .form-control { border-right: 0; }
.ms-suche .btn { display: inline-flex; align-items: center; gap: var(--ms-a2); }
.ms-suche .btn svg { width: 18px; height: 18px; }

/* Hauptnavigation */
.ms-nav { background: var(--ms-blau-900); padding: 0; }
.ms-nav .navbar-nav .nav-link {
	color: #dfe8f2;
	font-weight: 550;
	padding: 14px 16px;
	border-bottom: 4px solid transparent;
	transition: none; /* Fokus erscheint sofort, ohne Überblendung */
}
.ms-nav .navbar-nav .nav-link:hover { color: #ffffff; text-decoration: underline; }
.ms-nav .navbar-nav .nav-link.active,
.ms-nav .navbar-nav .nav-link[aria-current] { color: #ffffff; border-bottom-color: var(--ms-gelb); }
.ms-nav .nav-link:focus-visible { background: var(--ms-gelb); color: var(--ms-fokus-dunkel) !important; box-shadow: inset 0 -4px 0 var(--ms-fokus-dunkel); }
.ms-nav .navbar-toggler {
	color: #ffffff;
	border: 2px solid #dfe8f2;
	border-radius: var(--ms-radius);
	margin: 10px 0;
	padding: 6px 12px;
	align-items: center; gap: var(--ms-a2);
	font-size: 1rem; font-weight: 600;
}
@media (max-width: 991.98px) { .ms-nav .navbar-toggler { display: inline-flex; } }
.ms-nav .navbar-toggler:focus { box-shadow: none; }
.ms-nav .navbar-toggler:focus-visible { box-shadow: 0 0 0 3px var(--ms-gelb); }
.ms-nav .navbar-toggler svg { width: 20px; height: 20px; }

/* ---------- 8. Brotkrumen ---------- */
.ms-pfad { background: var(--ms-grau-50); border-bottom: 1px solid var(--ms-grau-100); }
.ms-pfad .breadcrumb { margin: 0; padding: 12px 0; font-size: 0.9375rem; --bs-breadcrumb-divider-color: var(--ms-text-2); --bs-breadcrumb-item-active-color: var(--ms-text-2); }

/* ---------- 9. Inhalt ---------- */
.ms-inhalt { padding-top: var(--ms-a6); padding-bottom: var(--ms-a7); }
.ms-rubrik { display: inline-block; font-size: 0.875rem; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ms-blau-700); margin-bottom: var(--ms-a2); }
.ms-einleitung { font-size: 1.25rem; line-height: 1.55; color: var(--ms-text); margin-top: var(--ms-a3); }
.ms-abschnitt { margin-top: var(--ms-a6); }
.ms-abschnitt > h2 { margin-bottom: var(--ms-a4); }

/* Auf einen Blick */
.ms-blick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: var(--ms-a5) 0 0; background: var(--ms-grau-100); border: 1px solid var(--ms-grau-100); border-radius: var(--ms-radius); overflow: hidden; }
.ms-blick > div { background: var(--ms-weiss); padding: var(--ms-a3) var(--ms-a4); }
.ms-blick dt { font-size: 0.875rem; font-weight: 600; color: var(--ms-text-2); margin-bottom: 2px; }
.ms-blick dd { margin: 0; font-size: 1.125rem; font-weight: 600; }

/* Hinweis Leichte Sprache */
.ms-hinweis { display: flex; gap: var(--ms-a3); align-items: flex-start; margin-top: var(--ms-a4); padding: var(--ms-a3) var(--ms-a4); background: var(--ms-blau-50); border-left: 4px solid var(--ms-blau-700); border-radius: 0 var(--ms-radius) var(--ms-radius) 0; }
.ms-hinweis svg { width: 24px; height: 24px; flex: none; margin-top: 2px; color: var(--ms-blau-700); }
.ms-hinweis p { margin: 0; }

/* Schritte */
.ms-schritte { list-style: none; margin: 0; padding: 0; }
.ms-schritte li { position: relative; padding: 0 0 var(--ms-a4) 56px; max-width: none; }
.ms-schritte li:last-child { padding-bottom: 0; }
.ms-schritt-nr {
	position: absolute; left: 0; top: 0;
	width: 36px; height: 36px; border-radius: 50%;
	display: grid; place-items: center;
	background: var(--ms-blau-900); color: #fff;
	font-weight: 700; font-size: 1rem; line-height: 1;
}
.ms-schritt-linie { position: absolute; left: 17px; top: 40px; bottom: 4px; width: 2px; background: var(--ms-grau-100); }
.ms-schritte li:last-child .ms-schritt-linie { display: none; }
.ms-schritte h3 { font-size: 1.125rem; margin: 5px 0 4px; }
.ms-schritte p { margin: 0; color: var(--ms-text-2); }

/* Akkordeon */
.accordion {
	--bs-accordion-border-color: var(--ms-linie);
	--bs-accordion-border-radius: var(--ms-radius);
	--bs-accordion-inner-border-radius: calc(var(--ms-radius) - 1px);
	--bs-accordion-btn-padding-y: 1.1rem;
	--bs-accordion-btn-color: var(--ms-text);
	--bs-accordion-active-color: var(--ms-blau-900);
	--bs-accordion-active-bg: var(--ms-blau-50);
	--bs-accordion-btn-focus-box-shadow: var(--ms-fokus-innen);
	--bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231a1d21' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
	--bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230b2a4a' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
}
.accordion-button { font-weight: 600; font-size: 1.0625rem; }
.accordion-button:focus { box-shadow: none; }
.accordion-button:focus-visible { box-shadow: var(--ms-fokus-innen); }
.accordion-body p:last-child, .accordion-body ul:last-child { margin-bottom: 0; }

/* Formular */
.ms-formular { padding: var(--ms-a5); background: var(--ms-grau-50); border: 1px solid var(--ms-grau-100); border-radius: var(--ms-radius); }
.form-label, .ms-formular legend { font-weight: 600; margin-bottom: 6px; }
.ms-formular legend { font-size: 1.125rem; }
.form-text { color: var(--ms-text-2); font-size: 0.9375rem; margin-top: 0; margin-bottom: 8px; }
.form-control, .form-select {
	border: 2px solid var(--ms-feld);
	border-radius: var(--ms-radius);
	padding: 0.625rem 0.875rem;
	font-size: 1.125rem;
	background-color: #fff;
}
.form-control:focus, .form-select:focus { border-color: var(--ms-fokus-dunkel); box-shadow: var(--ms-fokus); }
.form-check-input { width: 1.375rem; height: 1.375rem; margin-top: 0.15rem; border: 2px solid var(--ms-feld); }
.form-check-input:checked { background-color: var(--ms-blau-700); border-color: var(--ms-blau-700); }
.form-check-input:focus { border-color: var(--ms-fokus-dunkel); box-shadow: var(--ms-fokus); }
.form-check { padding-left: 2.125rem; margin-bottom: 6px; }
.form-check .form-check-input { margin-left: -2.125rem; }
.form-check-label { padding-top: 1px; }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--ms-fehler); background-image: none; padding-right: 0.875rem; border-width: 3px; }
.form-control.is-invalid:focus, .form-select.is-invalid:focus { border-color: var(--ms-fehler); box-shadow: var(--ms-fokus); }
.form-check-input.is-invalid { border-color: var(--ms-fehler); }
.form-check-input.is-invalid ~ .form-check-label { color: var(--ms-text); }
.invalid-feedback { color: var(--ms-fehler); font-weight: 600; font-size: 1rem; margin-top: 6px; }
.invalid-feedback::before { content: ""; display: inline-block; width: 4px; height: 1em; background: var(--ms-fehler); margin-right: 8px; vertical-align: -2px; border-radius: 1px; }
.ms-feld-fehler { border-left: 4px solid var(--ms-fehler); padding-left: var(--ms-a3); margin-left: calc(-1 * var(--ms-a3) - 4px); }
fieldset.ms-feld-fehler { padding-left: var(--ms-a3); }

.ms-fehlerliste { margin-bottom: var(--ms-a4); padding: var(--ms-a4); border: 3px solid var(--ms-fehler); border-radius: var(--ms-radius); background: #fff; }
.ms-fehlerliste:focus { outline: none; box-shadow: var(--ms-fokus); }
.ms-fehlerliste h3 { font-size: 1.125rem; margin: 0 0 var(--ms-a2); }
.ms-fehlerliste ul { margin: 0; padding-left: 1.25rem; }
.ms-fehlerliste a { color: var(--ms-fehler); font-weight: 600; }

.ms-erfolg { margin-bottom: var(--ms-a4); padding: var(--ms-a3) var(--ms-a4); border-left: 4px solid var(--ms-erfolg); background: var(--ms-erfolg-bg); color: var(--ms-text); border-radius: 0 var(--ms-radius) var(--ms-radius) 0; }
.ms-erfolg:focus { outline: none; box-shadow: var(--ms-fokus); }

/* Knöpfe */
.btn { font-weight: 600; border-radius: var(--ms-radius); padding: 0.625rem 1.25rem; font-size: 1.0625rem; }
.btn-primary {
	--bs-btn-bg: var(--ms-blau-700);
	--bs-btn-border-color: var(--ms-blau-700);
	--bs-btn-hover-bg: var(--ms-blau-900);
	--bs-btn-hover-border-color: var(--ms-blau-900);
	--bs-btn-active-bg: var(--ms-blau-900);
	--bs-btn-active-border-color: var(--ms-blau-900);
	--bs-btn-disabled-bg: var(--ms-feld);
	--bs-btn-disabled-border-color: var(--ms-feld);
}
.btn-outline-primary {
	--bs-btn-color: var(--ms-blau-700);
	--bs-btn-border-color: var(--ms-blau-700);
	--bs-btn-hover-bg: var(--ms-blau-700);
	--bs-btn-hover-border-color: var(--ms-blau-700);
	--bs-btn-active-bg: var(--ms-blau-900);
	--bs-btn-active-border-color: var(--ms-blau-900);
	border-width: 2px;
}
.btn:focus-visible, .btn-check:focus-visible + .btn { box-shadow: var(--ms-fokus) !important; outline: 3px solid transparent; }

/* Seitenleiste */
.ms-karte { background: #fff; border: 1px solid var(--ms-grau-100); border-radius: var(--ms-radius); box-shadow: var(--ms-schatten); padding: var(--ms-a4); }
.ms-karte + .ms-karte { margin-top: var(--ms-a4); }
.ms-karte h2 { font-size: 1.125rem; margin-bottom: var(--ms-a3); }
.ms-karte address { margin: 0 0 var(--ms-a3); font-style: normal; }
.ms-zeiten { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; margin: 0; font-size: 1rem; }
.ms-zeiten dt { font-weight: 600; }
.ms-zeiten dd { margin: 0; color: var(--ms-text-2); }
.ms-stand { max-width: none; margin-top: var(--ms-a6); padding-top: var(--ms-a3); border-top: 1px solid var(--ms-grau-100); font-size: 0.9375rem; color: var(--ms-text-2); }

/* ---------- 10. Fuß ---------- */
.ms-fuss { background: var(--ms-blau-900); color: #dfe8f2; padding: var(--ms-a6) 0 var(--ms-a4); font-size: 1rem; }
.ms-fuss h2 { color: #fff; font-size: 1rem; font-weight: 650; margin-bottom: var(--ms-a3); }
.ms-fuss ul { list-style: none; margin: 0; padding: 0; }
.ms-fuss li { margin-bottom: 6px; }
.ms-fuss a { color: #ffffff; }
.ms-fuss a:hover { text-decoration-thickness: 2px; }
.ms-fuss-unten { max-width: none; margin-top: var(--ms-a5); padding-top: var(--ms-a3); border-top: 1px solid rgba(223, 232, 242, .25); font-size: 0.9375rem; }

/* ---------- 11. Kleine Bildschirme ---------- */
@media (max-width: 991.98px) {
	.ms-nav .navbar-nav .nav-link { border-bottom: 0; border-left: 4px solid transparent; padding: 12px 14px; }
	.ms-nav .navbar-nav .nav-link[aria-current] { border-left-color: var(--ms-gelb); }
	.ms-nav .navbar-collapse { padding-bottom: 12px; }
	.ms-seite { margin-top: var(--ms-a6); }
}
@media (max-width: 575.98px) {
	.ms-blick { grid-template-columns: minmax(0, 1fr); }
	.ms-formular { padding: var(--ms-a4) var(--ms-a3); }
	.ms-kopf-innen { padding-top: var(--ms-a3); padding-bottom: var(--ms-a3); }
	.ms-suche { flex-basis: 100%; max-width: none; }
	.ms-feld-fehler { margin-left: calc(-1 * var(--ms-a2) - 4px); padding-left: var(--ms-a2); }
}

/* ---------- 12. Bewegung nur, wenn erwünscht ---------- */
@media (prefers-reduced-motion: reduce) {
	.collapsing, .accordion-button::after { transition: none !important; }
}