/* ==========================================================================
   Landespolizei Thüringen · Roleplay Erfurt
   Designsystem & Stylesheet
   ========================================================================== */

:root {
  --navy-950: #040e20;
  --navy-900: #06172f;
  --navy: #0a2447;
  --blue-900: #0b2f60;
  --blue: #0d3a78;
  --blue-700: #114887;
  --blue-600: #15539b;
  --blue-500: #2c70c5;
  --blue-100: #e8eef9;
  --blue-50: #f4f7fc;
  --red: #c8102e;
  --red-dark: #9f0b23;
  --red-100: #fbe8ec;
  --gold: #f2c14e;
  --gold-soft: #fdf3d8;
  --ink: #161f30;
  --muted: #58647a;
  --muted-light: #7b879c;
  --line: #d9e1ee;
  --line-strong: #c5d1e3;
  --soft: #f5f8fc;
  --white: #fff;
  --green: #177245;
  --green-100: #e7f5ed;
  --shadow-sm: 0 2px 8px rgba(9, 27, 55, .07);
  --shadow-md: 0 12px 30px rgba(9, 27, 55, .12);
  --shadow-lg: 0 26px 60px rgba(4, 14, 32, .22);
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --radius-xl: 26px;
  --container: 1220px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font: 400 16.5px/1.65 "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.no-scroll { overflow: hidden; }

h1, h2, h3, h4, h5 {
  margin: 0;
  font-weight: 800;
  line-height: 1.12;
  color: var(--navy);
  letter-spacing: -.018em;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
img, svg { max-width: 100%; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-600); }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
ul, ol { margin-top: 0; }
figure { margin: 0; }
strong, b { font-weight: 700; }
::selection { background: var(--gold); color: var(--navy-950); }

[hidden] { display: none !important; }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 3px;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  left: 16px;
  top: -100px;
  z-index: 200;
  background: var(--gold);
  color: var(--navy-950);
  font-weight: 800;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  transition: top .2s;
}
.skip-link:focus { top: 12px; color: var(--navy-950); }

.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue);
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 3px;
  border-radius: 2px;
  background: var(--red);
}
.eyebrow-light { color: var(--gold); }
.eyebrow-light::before { background: var(--gold); }

.lead {
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.6;
  color: var(--muted);
}

.section { padding: clamp(56px, 7vw, 92px) 0; }
.section-soft { background: var(--soft); }
.section-navy { background: var(--navy); color: #cbd8ec; }
.section-navy h2, .section-navy h3 { color: #fff; }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 34px;
}
.section-head h2 {
  font-size: clamp(28px, 3.4vw, 42px);
  margin-top: 9px;
}
.section-head p {
  max-width: 620px;
  margin: 9px 0 0;
  color: var(--muted);
}
.section-head-side { flex: none; padding-bottom: 4px; }
.section-head-center {
  display: block;
  text-align: center;
  max-width: 760px;
  margin: 0 auto 40px;
}
.section-head-center .eyebrow { justify-content: center; }
.section-head-center p { margin-left: auto; margin-right: auto; }

/* ---------- Buttons & links ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 0 22px;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--blue);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background .18s, color .18s, border-color .18s, transform .18s, box-shadow .18s;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(9, 27, 55, .18); }
.btn:active { transform: translateY(0); }
.btn .icon { width: 18px; height: 18px; }
.btn-red { background: var(--red); color: #fff; }
.btn-red:hover { background: var(--red-dark); color: #fff; }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-950); color: #fff; }
.btn-blue { background: var(--blue); color: #fff; }
.btn-blue:hover { background: var(--blue-900); color: #fff; }
.btn-white { background: #fff; color: var(--blue); }
.btn-white:hover { background: var(--blue-50); color: var(--blue); }
.btn-gold { background: var(--gold); color: var(--navy-950); }
.btn-gold:hover { background: #ffd36f; color: var(--navy-950); }
.btn-outline {
  background: transparent;
  border-color: var(--blue);
  color: var(--blue);
}
.btn-outline:hover { background: var(--blue); color: #fff; }
.btn-outline-light {
  background: transparent;
  border-color: rgba(255, 255, 255, .45);
  color: #fff;
}
.btn-outline-light:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.btn-ghost {
  background: transparent;
  color: var(--blue);
  border-color: var(--line);
}
.btn-ghost:hover { background: var(--blue-50); color: var(--blue); }
.btn-sm { min-height: 38px; padding: 0 15px; font-size: 13.5px; }
.btn-lg { min-height: 56px; padding: 0 30px; font-size: 16.5px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--blue);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  text-align: left;
}
.text-link .icon { width: 17px; height: 17px; transition: transform .18s; }
.text-link:hover { color: var(--blue-600); text-decoration: underline; text-underline-offset: 4px; }
.text-link:hover .icon { transform: translateX(3px); }
.text-link-light { color: #fff; }
.text-link-light:hover { color: var(--gold); }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  transition: background .18s, border-color .18s;
}
.icon-btn:hover { background: var(--blue-50); border-color: var(--line-strong); }
.icon-btn .icon { width: 20px; height: 20px; }
.icon-btn-light {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .2);
  color: #fff;
}
.icon-btn-light:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .35); }

/* ---------- Roleplay strip ---------- */
.rp-strip {
  background: linear-gradient(90deg, #f6c343, #f8d36f 55%, #f2c14e);
  color: #241a05;
  font-size: 13.5px;
  line-height: 1.35;
  border-bottom: 1px solid rgba(0, 0, 0, .12);
}
.rp-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 38px;
  padding-top: 6px;
  padding-bottom: 6px;
  text-align: center;
}
.rp-inner > span {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
}
.rp-inner .icon { width: 16px; height: 16px; }
.rp-inner a { color: #241a05; font-weight: 800; text-decoration: underline; text-underline-offset: 2px; }
.rp-close {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .08);
  color: #241a05;
  cursor: pointer;
}
.rp-close:hover { background: rgba(0, 0, 0, .16); }
.rp-close .icon { width: 15px; height: 15px; }

/* ---------- Service bar ---------- */
.servicebar {
  background: var(--navy-950);
  color: #b6c5dc;
  font-size: 13px;
  border-top: 2px solid var(--gold);
}
.servicebar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 40px;
}
.sb-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.notruf-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--red);
  color: #fff;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 4px;
  white-space: nowrap;
}
.notruf-pill:hover { background: var(--red-dark); color: #fff; }
.notruf-pill .icon { width: 14px; height: 14px; }
.notruf-pill b { font-weight: 900; letter-spacing: .04em; }
.sb-hint { color: #8fa3c2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-links { display: flex; align-items: center; gap: 20px; flex: none; }
.sb-links a { display: inline-flex; align-items: center; gap: 5px; color: #b6c5dc; }
.sb-links a:hover { color: #fff; }
.sb-links .icon { width: 13px; height: 13px; }
.sb-intranet { font-weight: 600; color: var(--gold) !important; }
.sb-intranet:hover { color: #ffe3a1 !important; }

/* ---------- Masthead ---------- */
.masthead {
  background: #fff;
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 30;
}
.masthead-inner {
  display: flex;
  align-items: center;
  gap: 26px;
  min-height: 92px;
  padding-top: 12px;
  padding-bottom: 12px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  flex: none;
  color: var(--blue);
}
.brand:hover { color: var(--blue); }
.brand-mark { width: 62px; height: 62px; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(10, 36, 71, .18)); }
.brand-copy { display: flex; flex-direction: column; line-height: 1; }
.brand-copy strong {
  color: var(--blue);
  font-size: 27px;
  font-weight: 900;
  letter-spacing: .13em;
}
.brand-copy > span {
  margin-top: 5px;
  color: #46536a;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .31em;
}
.brand-copy em {
  margin-top: 7px;
  color: var(--red);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.masthead-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}
.search-trigger {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
  transition: border-color .18s, background .18s;
}
.search-trigger:hover { border-color: var(--blue-500); background: var(--blue-50); }
.search-trigger .icon { width: 18px; height: 18px; color: var(--blue); }
.search-trigger kbd {
  font: 600 10.5px/1 "Source Sans 3", sans-serif;
  color: var(--muted-light);
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 4px 5px;
}
.btn-onlinewache {
  min-height: 52px;
  padding: 0 17px;
  gap: 11px;
  border-radius: var(--radius-sm);
  text-align: left;
}
.btn-onlinewache > .icon { width: 22px; height: 22px; }
.btn-onlinewache span { display: flex; flex-direction: column; line-height: 1.1; }
.btn-onlinewache small {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .85;
}
.btn-onlinewache span { font-size: 17px; font-weight: 800; }
.menu-toggle {
  display: none;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--blue);
  cursor: pointer;
}
.menu-toggle .icon { width: 24px; height: 24px; }

/* ---------- Main navigation ---------- */
.mainnav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--blue);
  box-shadow: 0 3px 14px rgba(4, 14, 32, .2);
}
.mainnav::after {
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), #e2a92e 45%, transparent 92%);
}
.mainnav-inner { display: flex; align-items: stretch; }
.nav-list {
  display: flex;
  align-items: stretch;
  flex: 1;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-item { position: relative; display: flex; }
.nav-item > a,
.nav-drop-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 16px 17px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: none;
  color: #eaf0fa;
  font: 600 14.5px/1 "Source Sans 3", sans-serif;
  white-space: nowrap;
  cursor: pointer;
  transition: background .18s, color .18s, border-color .18s;
}
.nav-item > a:hover,
.nav-drop-toggle:hover,
.nav-item.open > .nav-drop-toggle,
.nav-item.is-active > a,
.nav-item.is-active > .nav-drop-toggle {
  background: rgba(255, 255, 255, .09);
  color: #fff;
}
.nav-item.is-active > a,
.nav-item.is-active > .nav-drop-toggle {
  border-bottom-color: var(--gold);
  background: rgba(0, 0, 0, .16);
}
.nav-chevron { width: 14px; height: 14px; transition: transform .2s; }
.nav-item.open .nav-chevron { transform: rotate(180deg); }
.nav-intranet {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  padding: 0 2px 0 20px;
  border-left: 1px solid rgba(255, 255, 255, .16);
  color: var(--gold);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
}
.nav-intranet:hover { color: #ffe3a1; }
.nav-intranet .icon { width: 15px; height: 15px; }
.nav-mobile-head { display: none; }

/* Dropdown */
.dropdown {
  position: absolute;
  top: calc(100% + 3px);
  left: 0;
  width: 690px;
  padding-top: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .18s, transform .18s, visibility .18s;
  z-index: 60;
}
.nav-item.open > .dropdown,
.nav-item:focus-within > .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-item:nth-last-child(2) .dropdown { left: auto; right: 0; }
.dropdown-inner {
  display: grid;
  grid-template-columns: .92fr 1.35fr;
  overflow: hidden;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line);
}
.drop-intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 27px 25px;
  background:
    radial-gradient(circle at 15% 110%, rgba(44, 112, 197, .5), transparent 55%),
    var(--navy);
  color: #cbd8ec;
}
.drop-intro strong {
  margin: 13px 0 8px;
  color: #fff;
  font-size: 20px;
  line-height: 1.2;
}
.drop-intro p { font-size: 14px; line-height: 1.55; margin-bottom: 18px; }
.drop-intro .text-link { margin-top: auto; font-size: 14px; }
.drop-links { padding: 12px; }
.drop-link {
  display: grid;
  grid-template-columns: 42px 1fr 18px;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: var(--radius-sm);
  color: var(--ink);
}
.drop-link:hover { background: var(--blue-50); color: var(--ink); }
.drop-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--blue-100);
  color: var(--blue);
}
.drop-icon .icon { width: 20px; height: 20px; }
.drop-link strong { display: block; font-size: 15px; color: var(--navy); line-height: 1.25; }
.drop-link small { display: block; margin-top: 2px; color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.drop-arrow { width: 16px; height: 16px; color: var(--blue); opacity: 0; transform: translateX(-4px); transition: .18s; }
.drop-link:hover .drop-arrow { opacity: 1; transform: translateX(0); }

.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: rgba(4, 14, 32, .55);
  backdrop-filter: blur(2px);
}

/* ---------- Global search ---------- */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  padding: 7vh 24px 24px;
  overflow-y: auto;
  background:
    radial-gradient(circle at 80% 0%, rgba(44, 112, 197, .3), transparent 45%),
    rgba(4, 14, 32, .94);
  backdrop-filter: blur(8px);
}
.search-panel {
  width: min(880px, 100%);
  margin: 0 auto;
  padding: 30px;
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: 0 40px 100px rgba(0, 0, 0, .45);
  animation: searchIn .22s ease-out;
}
@keyframes searchIn { from { opacity: 0; transform: translateY(12px); } }
.search-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.search-panel-head .eyebrow { color: var(--blue); }
.search-panel-head .eyebrow::before { background: var(--red); }
.search-panel h2 { font-size: clamp(26px, 3.5vw, 36px); margin-bottom: 18px; }
.global-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 7px 7px 16px;
  border: 2px solid var(--blue);
  border-radius: 10px;
  background: #fff;
}
.global-search > .icon { width: 22px; height: 22px; color: var(--blue); }
.global-search input {
  flex: 1;
  min-width: 0;
  height: 46px;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 17px;
  color: var(--ink);
}
.global-search .btn { min-height: 46px; }
.search-suggestions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  font-size: 13px;
  color: var(--muted);
}
.search-suggestions button {
  padding: 4px 11px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--soft);
  color: var(--blue);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.search-suggestions button:hover { background: var(--blue-100); border-color: var(--blue-100); }
.search-results { margin-top: 20px; }
.search-group-title {
  margin: 14px 0 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted-light);
}
.search-result {
  display: grid;
  grid-template-columns: 38px 1fr 18px;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--ink);
}
.search-result:hover { background: var(--blue-50); color: var(--ink); }
.search-result-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--blue-100);
  color: var(--blue);
}
.search-result-icon .icon { width: 18px; height: 18px; }
.search-result strong { display: block; color: var(--navy); font-size: 15px; line-height: 1.3; }
.search-result small { display: block; color: var(--muted); font-size: 12.5px; }
.search-result > .icon { width: 16px; height: 16px; color: var(--blue); }
.search-empty { padding: 26px 0; color: var(--muted); }
.search-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--muted);
}
.search-foot span { display: inline-flex; align-items: center; gap: 6px; }
.search-foot .icon { width: 15px; height: 15px; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(ellipse at 78% 25%, #1a4b92 0, #0a2a58 42%, #06172f 78%),
    var(--navy);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/skyline-erfurt.svg") no-repeat bottom center / cover;
  opacity: .42;
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(4, 14, 32, .55), transparent 55%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .028) 0 1px, transparent 1px 42px);
  pointer-events: none;
}
.hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, .72fr);
  align-items: center;
  gap: 56px;
  min-height: 560px;
  padding-top: 64px;
  padding-bottom: 88px;
}
.hero-slides { display: grid; min-width: 0; }
.hero-slide {
  grid-area: 1 / 1;
  align-self: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .5s ease, transform .5s ease, visibility .5s;
}
.hero-slide.is-active { opacity: 1; visibility: visible; transform: none; }
.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 11px;
  border-radius: 4px;
  background: var(--red);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.hero-kicker .icon { width: 13px; height: 13px; }
.hero-title {
  max-width: 690px;
  margin: 20px 0 18px;
  color: #fff;
  font-size: clamp(40px, 5.4vw, 68px);
  font-weight: 900;
  line-height: .99;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.hero-title .accent { color: var(--gold); }
.hero-lead {
  max-width: 590px;
  margin-bottom: 28px;
  color: #c8d7ed;
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.55;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 26px;
  color: #9fb3d2;
  font-size: 12.5px;
}
.hero-meta span { display: inline-flex; align-items: center; gap: 6px; }
.hero-meta .icon { width: 14px; height: 14px; color: var(--gold); }

.hero-aside {
  position: relative;
  align-self: center;
  padding: 26px;
  border: 1px solid rgba(255, 255, 255, .17);
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .035));
  box-shadow: 0 30px 60px rgba(0, 0, 0, .22);
  backdrop-filter: blur(12px);
}
.hero-aside::before {
  content: "";
  position: absolute;
  top: 0;
  left: 26px;
  right: 26px;
  height: 3px;
  background: linear-gradient(90deg, var(--red), var(--gold));
  border-radius: 0 0 3px 3px;
}
.hero-aside-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #b9cce8;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.hero-aside-label .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 4px rgba(74, 222, 128, .13);
}
.hero-emergency {
  display: flex;
  align-items: center;
  gap: 17px;
  margin: 10px 0 6px;
}
.hero-emergency b {
  color: #fff;
  font-size: clamp(56px, 5.6vw, 70px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.045em;
}
.hero-emergency span { padding-bottom: 0; color: #d9e4f5; font-size: 13px; line-height: 1.35; }
.hero-emergency span small { display: block; color: #94aacb; font-size: 11.5px; }
.hero-aside hr { margin: 18px 0; border: 0; border-top: 1px solid rgba(255, 255, 255, .14); }
.hero-aside-links { display: grid; gap: 9px; }
.hero-aside-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .06);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
}
.hero-aside-link:hover { background: rgba(255, 255, 255, .13); color: #fff; }
.hero-aside-link .icon:first-child { width: 17px; height: 17px; color: var(--gold); }
.hero-aside-link .icon:last-child { width: 13px; height: 13px; margin-left: auto; opacity: .65; }
.hero-aside-link small { display: block; color: #a9bddb; font-size: 11px; font-weight: 400; }
.hero-aside-foot {
  margin-top: 14px;
  color: #93a9c9;
  font-size: 11.5px;
  line-height: 1.45;
}

.hero-controls {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 18px;
  padding-bottom: 54px;
  margin-top: 0;
}
.hero-dots { display: flex; align-items: center; gap: 7px; }
.hero-dots button {
  width: 30px;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: rgba(255, 255, 255, .3);
  cursor: pointer;
  transition: background .2s, width .2s;
}
.hero-dots button.is-active { width: 46px; background: var(--gold); }
.hero-pause {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-left: auto;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  cursor: pointer;
}
.hero-pause:hover { background: rgba(255, 255, 255, .16); }
.hero-pause .icon { width: 11px; height: 11px; }
.hero-count {
  color: #8fa7c8;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
}

/* ---------- Quick access ---------- */
.quick { position: relative; z-index: 6; margin-top: -34px; }
.quick-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  overflow: hidden;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 40px rgba(4, 14, 32, .16);
}
.quick-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  padding: 23px 12px 21px;
  background: #fff;
  color: var(--navy);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  border: 0;
  cursor: pointer;
  transition: background .18s;
}
.quick-item:hover { background: var(--blue-50); color: var(--navy); }
.quick-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--blue-100);
  color: var(--blue);
  transition: transform .18s;
}
.quick-item:hover .quick-icon { transform: translateY(-2px); }
.quick-icon .icon { width: 22px; height: 22px; }
.quick-item.is-red .quick-icon { background: var(--red-100); color: var(--red); }
.quick-item.is-red:hover { background: #fff6f7; }

/* ---------- Cards / news ---------- */
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.news-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.news-card:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: var(--shadow-md); }
.news-card.is-featured { grid-column: span 2; }
.news-visual {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 160px;
  padding: 16px;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(135deg, #123d75, #0a2447);
}
.news-card.is-featured .news-visual { min-height: 210px; }
.news-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 85% 15%, rgba(255, 255, 255, .18), transparent 38%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 26px);
}
.news-visual::after {
  content: "";
  position: absolute;
  right: -26px;
  bottom: -46px;
  width: 190px;
  height: 190px;
  border: 34px solid rgba(255, 255, 255, .07);
  border-radius: 50%;
}
.news-visual .visual-icon {
  position: absolute;
  right: 18px;
  top: 16px;
  width: 54px;
  height: 54px;
  opacity: .5;
}
.news-visual .visual-icon .icon { width: 54px; height: 54px; stroke-width: 1.2; }
.news-visual.v-warnung { background: linear-gradient(135deg, #a30d27, #5f0717); }
.news-visual.v-fahndung { background: linear-gradient(135deg, #8f1029, #3c0a18); }
.news-visual.v-presse { background: linear-gradient(135deg, #15539b, #0a2447); }
.news-visual.v-verkehr { background: linear-gradient(135deg, #9a6b13, #4a3006); }
.news-visual.v-service { background: linear-gradient(135deg, #0b5d64, #06343a); }
.news-visual.v-karriere { background: linear-gradient(135deg, #114887, #071a35); }
.news-tag {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .94);
  color: var(--navy);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.news-tag .icon { width: 12px; height: 12px; }
.news-body { display: flex; flex-direction: column; flex: 1; padding: 20px 21px 21px; }
.news-meta {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--muted-light);
  font-size: 12.5px;
}
.news-meta span { display: inline-flex; align-items: center; gap: 4px; }
.news-meta .icon { width: 13px; height: 13px; }
.news-body h3 {
  margin: 8px 0 8px;
  font-size: 19px;
  line-height: 1.26;
}
.news-card.is-featured .news-body h3 { font-size: 25px; }
.news-body h3 a:hover { color: var(--blue-600); }
.news-body p { margin-bottom: 16px; color: var(--muted); font-size: 14.5px; line-height: 1.55; }
.news-body .text-link { margin-top: auto; font-size: 14px; }

/* ---------- Service feature band (Führungszeugnis) ---------- */
.feature-band {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 85% 20%, rgba(44, 112, 197, .13), transparent 42%),
    linear-gradient(#eef3fb, #fff);
  border-top: 4px solid var(--blue);
}
.feature-band-inner {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  align-items: center;
  gap: 50px;
  padding-top: clamp(50px, 6vw, 82px);
  padding-bottom: clamp(50px, 6vw, 82px);
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border-radius: 3px;
  background: var(--navy);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.feature-band h2 {
  margin: 18px 0 16px;
  font-size: clamp(38px, 5.6vw, 62px);
  font-weight: 900;
  line-height: .98;
  letter-spacing: -.03em;
}
.feature-band h2 span { display: block; color: var(--red); }
.feature-band p { max-width: 540px; color: var(--muted); }
.steps-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin: 20px 0 26px;
  padding: 0;
  list-style: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
}
.steps-inline li { display: flex; align-items: center; }
.steps-inline b {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: 12px;
}
.doc-mock {
  position: relative;
  justify-self: center;
  width: min(270px, 100%);
  padding-bottom: 12px;
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 26px 55px rgba(10, 36, 71, .28);
  transform: rotate(4deg);
}
.doc-mock::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(10, 36, 71, .08);
  border-radius: 7px;
  pointer-events: none;
}
.doc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 17px;
  border-radius: 6px 6px 0 0;
  background: var(--blue);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.doc-head .icon { width: 18px; height: 18px; color: var(--gold); }
.doc-line {
  height: 7px;
  margin: 13px 17px 0;
  border-radius: 4px;
  background: #dae3f1;
}
.doc-line.w-70 { width: 70%; }
.doc-line.w-45 { width: 45%; }
.doc-stamp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 20px 17px 8px;
  padding: 10px;
  border: 2px solid #79c397;
  border-radius: 4px;
  background: #eaf7ef;
  color: #186c40;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.doc-stamp .icon { width: 17px; height: 17px; }
.doc-sign { margin: 18px 17px 4px; font-size: 9px; color: #9aa5b8; letter-spacing: .08em; text-transform: uppercase; }

/* ---------- Stats strip ---------- */
.stats-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stat {
  padding: 27px 24px;
  background: #fff;
  text-align: center;
}
.stat b {
  display: block;
  color: var(--navy);
  font-size: clamp(30px, 3.6vw, 44px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.03em;
}
.stat span { display: block; margin-top: 6px; color: var(--muted); font-size: 13px; }
.stat small { display: block; margin-top: 2px; color: var(--muted-light); font-size: 10.5px; }

/* ---------- Wanted spotlight ---------- */
.wanted-band {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 50%, rgba(200, 16, 46, .3), transparent 45%),
    linear-gradient(115deg, #071a35, #0b2f60);
  color: #c8d7ed;
}
.wanted-band-inner {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  align-items: center;
  gap: 48px;
  padding-top: clamp(52px, 6vw, 78px);
  padding-bottom: clamp(52px, 6vw, 78px);
}
.wanted-band .eyebrow { color: var(--gold); }
.wanted-band .eyebrow::before { background: var(--red); }
.wanted-band h2 {
  max-width: 620px;
  margin: 14px 0 14px;
  color: #fff;
  font-size: clamp(30px, 4vw, 46px);
}
.wanted-band p { max-width: 560px; color: #b9cce7; }
.wanted-facts { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 20px 0 25px; font-size: 13.5px; }
.wanted-facts span { display: flex; align-items: center; gap: 7px; }
.wanted-facts .icon { width: 15px; height: 15px; color: var(--gold); }
.wanted-visual {
  position: relative;
  min-height: 300px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--radius-lg);
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 25px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 25px),
    #0a1c38;
}
.wanted-visual .wanted-silhouette {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, .15);
}
.wanted-visual .wanted-silhouette .icon { width: 150px; height: 150px; stroke-width: .9; }
.wanted-visual .wanted-flag {
  position: absolute;
  top: 18px;
  left: 18px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border-radius: 4px;
  background: var(--red);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.wanted-visual .wanted-case {
  position: absolute;
  left: 20px;
  bottom: 20px;
  color: #9db3d4;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.wanted-visual .wanted-case b { display: block; color: #fff; font-size: 18px; letter-spacing: .02em; text-transform: none; }
.wanted-visual .scanline {
  position: absolute;
  left: 0;
  right: 0;
  top: 48%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(242, 193, 78, .8), transparent);
  box-shadow: 0 0 20px rgba(242, 193, 78, .6);
}

/* ---------- Career band ---------- */
.career-band {
  position: relative;
  overflow: hidden;
  padding: clamp(56px, 7vw, 92px) 0;
  background:
    radial-gradient(circle at 10% 15%, rgba(44, 112, 197, .45), transparent 38%),
    radial-gradient(circle at 88% 80%, rgba(200, 16, 46, .22), transparent 38%),
    linear-gradient(120deg, #071a35, #0a2447 55%, #0b2f60);
  color: #c8d7ed;
}
.career-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 46px);
  pointer-events: none;
}
.career-band .container { position: relative; z-index: 1; }
.career-grid {
  display: grid;
  grid-template-columns: 1fr .9fr;
  align-items: start;
  gap: 50px;
}
.career-band h2 {
  margin: 13px 0 16px;
  color: #fff;
  font-size: clamp(32px, 4.4vw, 50px);
}
.career-band p { color: #b9cce7; }
.tag-red {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border-radius: 3px;
  background: var(--red);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.career-list {
  margin: 22px 0 26px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 11px;
}
.career-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; }
.career-list .icon { width: 18px; height: 18px; margin-top: 2px; color: var(--gold); }
.career-note { margin-top: 18px; color: #93a9c9 !important; font-size: 13px; }

.quiz-card {
  padding: clamp(22px, 3vw, 30px);
  border-radius: var(--radius-lg);
  background: #fff;
  color: var(--ink);
  box-shadow: 0 26px 60px rgba(0, 0, 0, .28);
}
.quiz-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.quiz-head h3 { color: var(--navy); font-size: 22px; }
.quiz-head .badge { flex: none; }
.quiz-progress-label {
  display: flex;
  justify-content: space-between;
  margin: 16px 0 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}
.progress-track { height: 7px; overflow: hidden; border-radius: 4px; background: #e2e8f2; }
.progress-track > div { height: 100%; border-radius: 4px; background: var(--red); transition: width .3s; }
.quiz-question { margin: 16px 0 10px; font-size: 17px; font-weight: 700; color: var(--navy); }
.quiz-options { display: grid; gap: 8px; }
.quiz-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 13px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 14.5px;
  transition: border-color .15s, background .15s;
}
.quiz-option:hover { border-color: var(--blue-500); background: var(--blue-50); }
.quiz-option:has(input:checked) { border-color: var(--blue); background: var(--blue-100); }
.quiz-option input { width: 17px; height: 17px; accent-color: var(--blue); }
.quiz-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.quiz-result-score { margin: 8px 0 2px; color: var(--navy); font-size: 46px; font-weight: 900; line-height: 1; letter-spacing: -.04em; }
.quiz-result-score small { color: var(--muted); font-size: 20px; font-weight: 600; }
.quiz-answer {
  margin-top: 8px;
  padding: 9px 12px;
  border-left: 4px solid;
  border-radius: 4px;
  font-size: 12.5px;
  line-height: 1.45;
}
.quiz-answer.ok { border-color: var(--green); background: var(--green-100); }
.quiz-answer.no { border-color: var(--red); background: var(--red-100); }
.quiz-tips { margin-top: 14px; padding: 12px 15px; border-radius: var(--radius-sm); background: var(--soft); font-size: 13px; }
.quiz-tips ul { margin: 5px 0 0; padding-left: 18px; }

/* ---------- Station / contact teaser ---------- */
.station-teaser {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.station-teaser h2 { margin: 10px 0 14px; font-size: clamp(30px, 3.6vw, 42px); }
.station-teaser p { color: var(--muted); }
.station-mini-list { display: grid; gap: 10px; margin: 22px 0 26px; }
.station-mini {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
}
.station-mini:hover { border-color: var(--blue-500); color: var(--ink); }
.station-mini > .icon { width: 19px; height: 19px; color: var(--blue); }
.station-mini strong { display: block; color: var(--navy); font-size: 14.5px; line-height: 1.3; }
.station-mini small { display: block; color: var(--muted); font-size: 12px; }
.station-mini > .icon:last-child { margin-left: auto; color: var(--muted-light); width: 15px; height: 15px; }
.map-card {
  position: relative;
  min-height: 390px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 65% 40%, rgba(44, 112, 197, .28), transparent 45%),
    #0a1c38;
  box-shadow: var(--shadow-md);
}
.map-card svg.map-illustration { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-card .map-caption {
  position: absolute;
  left: 20px;
  bottom: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 15px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius-sm);
  background: rgba(6, 23, 47, .82);
  backdrop-filter: blur(6px);
  color: #c8d7ed;
  font-size: 12.5px;
}
.map-caption strong { display: block; color: #fff; font-size: 14px; }

/* ---------- Footer ---------- */
.site-footer {
  background:
    radial-gradient(circle at 10% 0%, rgba(21, 83, 155, .28), transparent 40%),
    #040e20;
  color: #98aac4;
}
.footer-cta {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  align-items: center;
  gap: 46px;
  padding: clamp(38px, 5vw, 58px) 0;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.footer-cta h2 { max-width: 620px; margin: 10px 0 8px; color: #fff; font-size: clamp(26px, 3.4vw, 38px); }
.footer-cta p { color: #93a7c3; font-size: 14.5px; }
.newsletter-form { display: grid; grid-template-columns: 1fr auto; gap: 9px; }
.newsletter-form input {
  min-width: 0;
  height: 52px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .07);
  color: #fff;
  font-size: 15px;
}
.newsletter-form input::placeholder { color: #7f95b4; }
.newsletter-form input:focus { outline: 2px solid var(--gold); border-color: transparent; }
.newsletter-form .btn { min-height: 52px; }
.newsletter-form small { grid-column: 1 / -1; color: #7186a5; font-size: 11.5px; }
.footer-main {
  display: grid;
  grid-template-columns: 1.45fr .8fr .8fr .9fr;
  gap: 42px;
  padding: 48px 0 40px;
}
.footer-brand > div { display: flex; flex-direction: column; margin: 4px 0 12px; }
.footer-brand .brand-mark { width: 54px; height: 54px; margin-bottom: 10px; }
.footer-brand strong { color: #fff; font-size: 17px; letter-spacing: .12em; }
.footer-brand span { color: var(--gold); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; }
.footer-brand p { margin: 12px 0 18px; font-size: 13px; line-height: 1.6; color: #8196b4; }
.footer-emergency { display: flex; gap: 10px; }
.footer-emergency a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 11px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius-sm);
  color: #c8d7ed;
}
.footer-emergency a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.footer-emergency b { color: #fff; font-size: 19px; font-weight: 900; line-height: 1; }
.footer-emergency span { font-size: 11px; line-height: 1.3; }
.footer-emergency small { color: #7f95b4; font-size: 10px; }
.footer-col h3 { margin: 4px 0 14px; color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.footer-col a {
  display: block;
  padding: 4px 0;
  color: #98aac4;
  font-size: 13.5px;
}
.footer-col a:hover { color: #fff; }
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 0 22px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  color: #7186a5;
  font-size: 12px;
}
.footer-bottom-links { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.footer-bottom-links a { color: #98aac4; }
.footer-bottom-links a:hover { color: #fff; }
.to-top { display: inline-flex; align-items: center; gap: 5px; color: var(--gold) !important; }
.to-top .icon { width: 13px; height: 13px; }

/* ---------- Toasts & cookie ---------- */
.toast-stack {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 140;
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: min(370px, calc(100vw - 40px));
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--green);
  border-radius: var(--radius-sm);
  background: #fff;
  box-shadow: var(--shadow-md);
  color: var(--ink);
  font-size: 13.5px;
  line-height: 1.45;
  animation: toastIn .22s ease-out;
}
.toast.is-error { border-left-color: var(--red); }
.toast .icon { width: 19px; height: 19px; color: var(--green); margin-top: 1px; }
.toast.is-error .icon { color: var(--red); }
.toast strong { display: block; color: var(--navy); font-size: 14px; }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } }
.cookie-note {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 18px;
  width: min(620px, calc(100vw - 40px));
  padding: 15px 18px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--gold);
  border-radius: var(--radius-sm);
  background: #fff;
  box-shadow: var(--shadow-md);
  font-size: 12.5px;
  line-height: 1.45;
}
.cookie-note > div { display: flex; align-items: flex-start; gap: 11px; }
.cookie-note .icon { width: 20px; height: 20px; color: var(--blue); margin-top: 1px; }
.cookie-note p { margin: 0; color: var(--muted); }
.cookie-note strong { color: var(--navy); }
.cookie-note .btn { flex: none; }

/* ---------- Page hero / breadcrumbs ---------- */
.page-hero {
  position: relative;
  overflow: hidden;
  padding: 34px 0 58px;
  color: #fff;
  background:
    radial-gradient(ellipse at 82% 15%, #17498e 0, #0a2a58 45%, #06172f 80%),
    var(--navy);
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/skyline-erfurt.svg") no-repeat bottom center / cover;
  opacity: .18;
  pointer-events: none;
}
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 44px);
  pointer-events: none;
}
.page-hero .container { position: relative; z-index: 1; }
.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 30px;
  color: #9fb3d2;
  font-size: 12.5px;
  list-style: none;
  padding: 0;
}
.breadcrumb a { color: #b9cce7; }
.breadcrumb a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.breadcrumb .icon { width: 12px; height: 12px; opacity: .55; }
.breadcrumb [aria-current="page"] { color: var(--gold); }
.page-hero h1 {
  max-width: 860px;
  color: #fff;
  font-size: clamp(38px, 5.2vw, 62px);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.page-hero-lead {
  max-width: 700px;
  margin: 18px 0 0;
  color: #c4d4ea;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.58;
}
.page-hero-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.page-hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 99px;
  color: #d6e2f2;
  font-size: 11.5px;
}
.page-hero-meta .icon { width: 13px; height: 13px; color: var(--gold); }
.page-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  align-items: center;
  gap: 52px;
}
.page-hero-card {
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, .17);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .07);
  backdrop-filter: blur(10px);
}
.page-hero-card h2 { color: #fff; font-size: 19px; margin-bottom: 8px; }
.page-hero-card p { color: #b9cce7; font-size: 13.5px; }
.page-hero-card .hero-emergency b { font-size: 56px; }

/* ---------- Layout helpers ---------- */
.content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 44px;
  align-items: start;
}
.content-grid-wide { grid-template-columns: minmax(0, 1fr) 380px; }
.sidebar { position: sticky; top: 94px; display: grid; gap: 18px; }
.sidebar-card {
  padding: 23px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.sidebar-card h3 { font-size: 17px; margin-bottom: 8px; }
.sidebar-card p, .sidebar-card li { color: var(--muted); font-size: 13.5px; }
.sidebar-card-dark {
  border-color: transparent;
  background:
    radial-gradient(circle at 90% 0%, rgba(200, 16, 46, .3), transparent 48%),
    var(--navy);
  color: #c8d7ed;
}
.sidebar-card-dark h3 { color: #fff; }
.sidebar-card-dark p { color: #aebfda; }
.sidebar-card-accent { border-top: 4px solid var(--red); }
.sidebar-list { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.sidebar-list li { display: flex; align-items: flex-start; gap: 8px; }
.sidebar-list .icon { width: 15px; height: 15px; margin-top: 3px; color: var(--green); flex: none; }
.sidebar-links { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.sidebar-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  color: var(--blue);
  font-size: 13.5px;
  font-weight: 600;
}
.sidebar-links a:last-child { border-bottom: 0; }
.sidebar-links .icon { width: 14px; height: 14px; }
.contact-mini { display: grid; gap: 10px; margin-top: 12px; }
.contact-mini a, .contact-mini span { display: flex; align-items: flex-start; gap: 9px; color: #d6e2f2; font-size: 13px; }
.contact-mini .icon { width: 16px; height: 16px; margin-top: 2px; color: var(--gold); flex: none; }
.contact-mini small { display: block; color: #8fa3c2; }

/* ---------- Prose ---------- */
.prose { color: #2d384b; font-size: 16.5px; line-height: 1.72; }
.prose > *:first-child { margin-top: 0; }
.prose h2 { margin: 40px 0 14px; font-size: clamp(25px, 3vw, 32px); }
.prose h3 { margin: 30px 0 10px; font-size: 21px; }
.prose h4 { margin: 22px 0 8px; font-size: 17px; }
.prose p { margin-bottom: 16px; }

/* ---------- Intranet Login ---------- */
.intranet-login-section {
  min-height: calc(100vh - 40px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  background:
    radial-gradient(ellipse at 80% 10%, #17498e 0, #0a2a58 45%, #06172f 80%),
    var(--navy);
}
.intranet-login {
  width: min(440px, 100%);
  padding: 36px 34px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .35);
}
.intranet-login .brand { margin-bottom: 22px; }
.intranet-login h1 { font-size: 26px; margin-bottom: 6px; }
.intranet-login > p { color: var(--muted); font-size: 14px; }
.demo-creds {
  margin: 16px 0;
  padding: 12px 14px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--blue-50);
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}
.demo-creds strong { color: var(--navy); }

.field { display: grid; gap: 6px; }
.field label { font-size: 13.5px; font-weight: 700; color: var(--navy); }
.field .req { color: var(--red); }
.field input, .field select, .field textarea {
  min-height: 48px;
  padding: 0 14px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
  font-size: 15px;
  transition: border-color .15s, box-shadow .15s;
}
.field textarea { padding: 12px 14px; min-height: 100px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-100);
}

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
}
.checkbox input { width: 17px; height: 17px; margin-top: 1px; accent-color: var(--blue); }

.notice {
  display: flex;
  gap: 11px;
  padding: 13px 15px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  line-height: 1.45;
}
.notice .icon { width: 19px; height: 19px; margin-top: 1px; flex: none; }
.notice strong { display: block; }
.notice p { margin: 2px 0 0; }
.notice-warning { background: var(--red-100); color: var(--red-dark); border-left: 4px solid var(--red); }
.notice-warning .icon { color: var(--red); }

/* ---------- Intranet Dashboard ---------- */
.dashboard {
  background: var(--navy);
  color: #c8d7ed;
  border-radius: var(--radius-lg);
  padding: 26px 28px 34px;
  box-shadow: 0 24px 60px rgba(4, 14, 32, .28);
}
.dash-user { display: flex; align-items: center; gap: 12px; }
.dash-avatar {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy-950);
  font-weight: 900;
  font-size: 15px;
}
.dash-main { margin-top: 20px; }
.dash-panel { display: none; }
.dash-panel.is-active { display: block; }
.dash-hero-title { font-size: 32px; color: #fff; }
.dash-hero-sub { color: #9fb3d2; font-size: 15px; margin: 4px 0 22px; }

.dash-search-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 16px;
  margin-bottom: 18px;
}
.dash-search-box, .dash-links-box {
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .05);
}
.dash-search-box h3, .dash-links-box h3 { color: #fff; font-size: 15px; margin-bottom: 12px; }
.dash-search-input { display: flex; gap: 8px; }
.dash-search-input input {
  flex: 1;
  min-width: 0;
  height: 42px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .06);
  color: #fff;
  font-size: 13.5px;
}
.dash-search-input input::placeholder { color: #8fa3c2; }
.dash-filter-tabs { display: flex; gap: 6px; margin-top: 12px; }
.dash-filter-tabs button {
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 99px;
  background: transparent;
  color: #b9cce7;
  font-size: 12px;
  cursor: pointer;
}
.dash-filter-tabs button.is-active { background: var(--gold); color: var(--navy-950); border-color: var(--gold); }

.dash-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}
.dash-stat-card {
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .05);
}
.dash-stat-card .label { color: #9fb3d2; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.dash-stat-card .value { color: #fff; font-size: 30px; font-weight: 900; line-height: 1.2; }
.dash-stat-card .trend { color: var(--gold); font-size: 11px; }

.dash-tile-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
.dash-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 18px 10px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .05);
  color: #d9e4f5;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .18s, transform .18s, border-color .18s;
}
.dash-tile:hover { background: rgba(255, 255, 255, .1); transform: translateY(-2px); border-color: rgba(255, 255, 255, .22); }
.dash-tile-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 10px;
}
.dash-tile-icon .icon { width: 22px; height: 22px; }
.tile-green { background: rgba(23, 114, 69, .25); color: #4ade80; }
.tile-magenta { background: rgba(169, 0, 233, .22); color: #e879f9; }
.tile-blue { background: rgba(44, 112, 197, .28); color: #7ab3ff; }
.tile-red { background: rgba(200, 16, 46, .22); color: #ff7b92; }
.tile-white { background: rgba(255, 255, 255, .12); color: #fff; }
.tile-purple { background: rgba(124, 58, 237, .28); color: #c4b5fd; }
.tile-orange { background: rgba(234, 88, 12, .22); color: #fdba74; }
.tile-yellow { background: rgba(242, 193, 78, .22); color: #fde68a; }

.dash-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.dash-box {
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .05);
  overflow: hidden;
}
.dash-box-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.dash-box-head h2 { color: #fff; font-size: 15px; }
.dash-box-head a { color: var(--gold); font-size: 12px; }
.dash-box-body { padding: 8px 0; }

.shift-row {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 18px;
}
.shift-row + .shift-row { border-top: 1px solid rgba(255, 255, 255, .07); }
.shift-date {
  width: 46px;
  height: 46px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .08);
  color: #9fb3d2;
  font-size: 11px;
  line-height: 1.1;
}
.shift-date b { color: #fff; font-size: 17px; }
.shift-info { flex: 1; }
.shift-info strong { display: block; color: #fff; font-size: 13.5px; }
.shift-info span { display: block; color: #9fb3d2; font-size: 12px; }
.shift-badge {
  padding: 4px 9px;
  border-radius: 99px;
  background: rgba(74, 222, 128, .16);
  color: #4ade80;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.message-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 18px;
}
.message-item + .message-item { border-top: 1px solid rgba(255, 255, 255, .07); }
.message-dot {
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--green);
  flex: none;
}
.message-item strong { display: block; color: #fff; font-size: 13.5px; }
.message-item span { display: block; color: #9fb3d2; font-size: 12px; }
.message-item small {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 7px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .1);
  color: #c8d7ed;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr; gap: 32px; }
  .dash-tile-grid { grid-template-columns: repeat(3, 1fr); }
  .dash-columns { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .menu-toggle { display: grid; }
  .mainnav-inner { flex-direction: column; }
  .nav-list { flex-direction: column; }
  .nav-item > a, .nav-drop-toggle { padding: 13px 16px; }
  .dropdown { position: static; width: 100%; }
  .nav-mobile-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; color: #fff; }
  .dash-stats-row { grid-template-columns: repeat(2, 1fr); }
  .dash-search-row { grid-template-columns: 1fr; }
  .footer-main { grid-template-columns: 1fr; }
  .footer-cta { grid-template-columns: 1fr; }
  .news-grid { grid-template-columns: 1fr; }
  .quick-grid { grid-template-columns: repeat(3, 1fr); }
  .station-teaser { grid-template-columns: 1fr; }
  .career-grid { grid-template-columns: 1fr; }
  .wanted-band-inner { grid-template-columns: 1fr; }
  .content-grid, .content-grid-wide { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .dash-tile-grid { grid-template-columns: repeat(2, 1fr); }
  .dash-stats-row { grid-template-columns: 1fr; }
  .quick-grid { grid-template-columns: repeat(2, 1fr); }
  .intranet-login { padding: 28px 22px; }
}


/* ==========================================================================
   Zusatz-Komponenten: Formulare, Service, Tabellen, Status, Presse, etc.
   ========================================================================== */

/* ---------- Badges ---------- */
.badge-soft { background: var(--blue-100); color: var(--blue); }
.badge-green { background: var(--green-100); color: var(--green); }
.badge-red { background: var(--red-100); color: var(--red); }
.badge-gold { background: var(--gold-soft); color: #8b6212; }
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 99px; font-size: 11.5px; font-weight: 800; letter-spacing: .04em; white-space: nowrap; }

/* ---------- Formulare ---------- */
.form-card {
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.form-card h2 { margin-top: 8px; }
.form-intro { color: var(--muted); font-size: 14.5px; margin-bottom: 22px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-grid .span-2 { grid-column: 1 / -1; }
.form-grid .field { display: grid; gap: 6px; }
.form-grid label { font-size: 13.5px; font-weight: 700; color: var(--navy); }
.form-grid input, .form-grid select, .form-grid textarea {
  width: 100%;
  min-height: 46px;
  padding: 10px 13px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
  font-size: 15px;
  transition: border-color .15s, box-shadow .15s;
}
.form-grid textarea { min-height: 104px; resize: vertical; }
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-100);
}
.form-grid .field .req { color: var(--red); }
.form-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 22px; }
.form-note { color: var(--muted-light); font-size: 12.5px; }
.legal-check { margin-top: 16px; }
.check-list { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.check-list li { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; color: inherit; }
.check-list .icon { width: 16px; height: 16px; margin-top: 2px; color: var(--gold); flex: none; }

.form-success, .success-box {
  padding: 26px;
  border: 1px solid #b9e3ca;
  border-radius: var(--radius-lg);
  background: #f2fbf6;
  text-align: center;
}
.form-success > .icon, .success-box > .icon { width: 46px; height: 46px; color: var(--green); }
.form-success h2, .success-box h2 { margin: 12px 0 8px; font-size: 24px; }
.form-success p, .success-box p { color: var(--muted); font-size: 14.5px; }
.ref-box {
  margin: 18px auto;
  padding: 14px 18px;
  max-width: 420px;
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  background: #fff;
}
.ref-box span { display: block; color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; }
.ref-box strong { display: block; margin-top: 4px; color: var(--navy); font-family: "Consolas", monospace; font-size: 20px; letter-spacing: .03em; }
.ref-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 8px; }

/* ---------- Service cards ---------- */
.service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.service-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.service-card-icon {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: var(--blue-100);
  color: var(--blue);
}
.service-card-icon .icon { width: 24px; height: 24px; }
.service-card h3 { margin: 4px 0 0; font-size: 19px; }
.service-card p { margin: 0; color: var(--muted); font-size: 14px; flex: 1; }
.service-card.is-red .service-card-icon { background: var(--red-100); color: var(--red); }
.service-card.is-gold .service-card-icon { background: var(--gold-soft); color: #8b6212; }
.service-card .text-link { margin-top: 6px; }

/* ---------- Filterleiste ---------- */
.filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 18px;
}
.filter-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip-btn {
  padding: 7px 15px;
  border: 1px solid var(--line-strong);
  border-radius: 99px;
  background: #fff;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}
.chip-btn:hover { border-color: var(--blue-500); color: var(--blue); }
.chip-btn[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }
.filter-search { display: flex; align-items: center; gap: 8px; padding: 0 13px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: #fff; }
.filter-search .icon { width: 17px; height: 17px; color: var(--muted); }
.filter-search input { min-height: 42px; border: 0; outline: 0; background: transparent; font-size: 14px; width: 220px; }
.filter-count { color: var(--muted); font-size: 13px; font-weight: 600; }

/* ---------- Tabellen ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); }
.data-table { width: 100%; border-collapse: collapse; min-width: 620px; }
.data-table th {
  padding: 13px 16px;
  background: var(--soft);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
.data-table td { padding: 13px 16px; border-bottom: 1px solid var(--line); font-size: 14px; color: #2d384b; vertical-align: middle; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover td { background: var(--blue-50); }
.data-table .text-link { font-size: 13.5px; }

/* ---------- Leere Zustände ---------- */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 44px 24px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  color: var(--muted);
  text-align: center;
}
.empty-state .icon { width: 40px; height: 40px; color: var(--muted-light); }

/* ---------- Statusabfrage ---------- */
.status-result {
  margin-top: 20px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.status-result.is-error { border-left: 4px solid var(--red); }
.status-result-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.status-result-head small { color: var(--muted-light); font-size: 12px; }
.status-result h3 { margin: 0 0 6px; font-family: "Consolas", monospace; font-size: 20px; letter-spacing: .02em; }
.status-result > p { color: var(--muted); font-size: 14.5px; }
.status-result-note { margin-top: 16px !important; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted-light) !important; font-size: 12px !important; }
.status-timeline { margin: 20px 0 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.status-timeline li { position: relative; display: flex; gap: 14px; padding: 0 0 22px 4px; }
.status-timeline li::before { content: ""; position: absolute; left: 11px; top: 16px; bottom: 0; width: 2px; background: var(--line); }
.status-timeline li:last-child::before { display: none; }
.status-timeline-dot { flex: none; width: 16px; height: 16px; margin-top: 3px; border: 3px solid var(--line-strong); border-radius: 50%; background: #fff; }
.status-timeline .is-done .status-timeline-dot { border-color: var(--green); background: var(--green); }
.status-timeline .is-active .status-timeline-dot { border-color: var(--blue); background: var(--blue); box-shadow: 0 0 0 4px var(--blue-100); }
.status-timeline strong { display: block; font-size: 14px; color: var(--navy); }
.status-timeline small { color: var(--muted); font-size: 12.5px; }
.status-timeline .is-done::before { background: var(--green); }

/* ---------- Fahndungskarten ---------- */
.wanted-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.wanted-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform .2s, box-shadow .2s;
}
.wanted-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.wanted-card-visual {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 170px;
  padding: 14px;
  background:
    radial-gradient(circle at 80% 20%, rgba(255,255,255,.16), transparent 40%),
    linear-gradient(135deg, #0b2f60, #06172f);
}
.wanted-card-visual.is-person { background:
    radial-gradient(circle at 80% 20%, rgba(200,16,46,.35), transparent 45%),
    linear-gradient(135deg, #3c0a18, #0a1c38); }
.wanted-card-visual .tag {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 4px 9px;
  border-radius: 3px;
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.wanted-card-visual .case { color: #9db3d4; font-family: "Consolas", monospace; font-size: 13px; }
.wanted-card-body { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; flex: 1; }
.wanted-card-body h3 { margin: 0; font-size: 19px; }
.wanted-card-body p { margin: 0; color: var(--muted); font-size: 14px; }
.wanted-facts-list { margin: 4px 0 12px; padding: 0; list-style: none; display: grid; gap: 5px; font-size: 13px; color: var(--muted); }
.wanted-facts-list li { display: flex; align-items: center; gap: 7px; }
.wanted-card-actions { display: flex; gap: 8px; margin-top: auto; }

/* ---------- Artikel / Meldung ---------- */
.article-hero { padding: 46px 0 40px; }
.article-tag { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 3px; background: var(--red); color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.article-lead { max-width: 760px; margin: 16px 0 0; color: #c4d4ea; font-size: clamp(17px, 1.7vw, 21px); line-height: 1.55; }
.article-meta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 18px; font-size: 12.5px; }
.article-meta span { display: inline-flex; align-items: center; gap: 6px; }
.article-footer { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--line); }
.share-row { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.share-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: #fff; color: var(--muted); font-size: 13px; font-weight: 600; cursor: pointer; }
.share-btn:hover { border-color: var(--blue-500); color: var(--blue); }
.share-btn .icon { width: 16px; height: 16px; }
.related-block { margin-top: 40px; }
.related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }

/* ---------- Presse ---------- */
.press-layout { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 40px; align-items: start; }
.news-list { display: grid; gap: 18px; }
.load-more-wrap { display: flex; justify-content: center; margin-top: 26px; }

/* ---------- Dienststellen ---------- */
.station-layout { display: grid; grid-template-columns: 360px minmax(0,1fr); gap: 24px; align-items: start; }
.station-toolbar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.station-search { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 200px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: #fff; }
.station-search .icon { width: 17px; height: 17px; color: var(--muted); }
.station-search input { min-height: 42px; width: 100%; border: 0; outline: 0; background: transparent; font-size: 14px; }
.station-select { min-height: 42px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: #fff; font-size: 14px; }
.station-list { display: grid; gap: 10px; max-height: 640px; overflow-y: auto; padding-right: 4px; }
.station-card { padding: 15px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.station-card:hover, .station-card.is-active { border-color: var(--blue-500); box-shadow: var(--shadow-sm); }
.station-card strong { display: block; color: var(--navy); font-size: 14.5px; }
.station-card small { color: var(--muted); font-size: 12.5px; }
.station-map { min-height: 380px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: linear-gradient(135deg, #0b2f60, #06172f); position: relative; overflow: hidden; }
.station-detail { margin-top: 18px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.station-detail h3 { font-size: 19px; margin-bottom: 6px; }
.station-detail-body p { color: var(--muted); font-size: 14px; }
.station-address { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 13.5px; }
.station-address .icon { width: 15px; height: 15px; color: var(--blue); }
.station-tags, .station-services { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.station-tags span, .station-services span { padding: 3px 9px; border-radius: 99px; background: var(--blue-100); color: var(--blue); font-size: 11.5px; font-weight: 600; }
.contact-card { padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.contact-split { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }

/* ---------- Accordion ---------- */
.accordion { display: grid; gap: 10px; }
.accordion-item { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; overflow: hidden; }
.accordion-item summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 20px; font-weight: 700; color: var(--navy); cursor: pointer; list-style: none; }
.accordion-item summary::-webkit-details-marker { display: none; }
.accordion-item summary .icon { width: 18px; height: 18px; color: var(--blue); transition: transform .2s; flex: none; }
.accordion-item[open] summary .icon { transform: rotate(45deg); }
.accordion-body { padding: 0 20px 18px; color: var(--muted); font-size: 14.5px; }

/* ---------- Karriere ---------- */
.career-hero { position: relative; overflow: hidden; padding: clamp(46px, 6vw, 76px) 0; color: #fff; background: radial-gradient(ellipse at 80% 20%, #1a4b92, #0a2a58 45%, #06172f 80%), var(--navy); }
.career-hero h1 { color: #fff; font-size: clamp(34px, 4.6vw, 54px); max-width: 780px; }
.career-hero p { max-width: 640px; color: #c4d4ea; font-size: 16.5px; margin-top: 14px; }
.career-hero-stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin-top: 28px; }
.career-hero-stats .stat { border-radius: var(--radius); background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); padding: 16px; }
.career-hero-stats .stat b { color: #fff; }
.career-hero-stats .stat span { color: #b9cce7; }
.career-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 26px; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-md); }
.career-cta-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.career-quiz-layout { display: grid; grid-template-columns: minmax(0,1fr) 400px; gap: 40px; align-items: start; }

/* ---------- Wert-/Vorteilskarten ---------- */
.value-grid, .prev-grid, .benefit-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
.value-card, .prev-card, .benefit {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.value-card h3, .prev-card h3, .benefit h3 { font-size: 18px; margin: 4px 0 8px; }
.value-card p, .prev-card p, .benefit p { color: var(--muted); font-size: 14px; }
.benefit-icon, .prev-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--blue-100); color: var(--blue); }
.benefit-icon .icon, .prev-icon .icon { width: 22px; height: 22px; }
.prev-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.prev-head strong { color: var(--navy); font-size: 15px; }

/* ---------- Über uns / Organisation ---------- */
.about-split { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); gap: 44px; align-items: center; }
.about-emblem { display: grid; place-items: center; padding: 26px; border-radius: var(--radius-lg); background: linear-gradient(160deg, #0b2f60, #06172f); box-shadow: var(--shadow-lg); }
.about-emblem svg { max-height: 320px; }
.emblem-caption { margin-top: 12px; text-align: center; color: #9fb3d2; font-size: 12px; }
.org-chart { display: grid; gap: 18px; margin-top: 26px; }
.org-level { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.org-box { min-width: 190px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); text-align: center; }
.org-box strong { display: block; font-size: 14px; color: var(--navy); }
.org-box small { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; }
.org-connector { justify-self: center; width: 2px; height: 22px; background: var(--line-strong); }
.timeline { display: grid; gap: 18px; margin-top: 24px; }
.timeline-item { display: grid; grid-template-columns: 92px 1fr; gap: 18px; align-items: start; }
.timeline-year { padding: 4px 10px; border-radius: 3px; background: var(--blue); color: #fff; font-weight: 800; font-size: 13px; text-align: center; }
.timeline-item p { color: var(--muted); font-size: 14px; margin: 0; }
.kart-card { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 34px; align-items: center; margin-top: 26px; padding: 26px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--soft); }
.kart-copy h3 { font-size: 24px; margin-bottom: 10px; }
.kart-copy p { color: var(--muted); font-size: 14.5px; }
.kart-visual { display: grid; place-items: center; min-height: 200px; border-radius: var(--radius); background: linear-gradient(135deg, #0b2f60, #06172f); color: #9fb3d2; }

/* ---------- Barrierefreiheit / Leichte Sprache ---------- */
.a11y-grid, .easy-language { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.a11y-card, .easy-card { padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); }
.a11y-card h3, .easy-card h3 { font-size: 18px; margin-bottom: 6px; }
.a11y-card p, .easy-card p { color: var(--muted); font-size: 14px; }

/* ---------- Rechtstexte ---------- */
.legal-layout { display: grid; grid-template-columns: 260px minmax(0,1fr); gap: 40px; align-items: start; }
.legal-toc { position: sticky; top: 94px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.legal-toc h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 10px; }
.legal-toc a { display: block; padding: 5px 0; color: var(--muted); font-size: 13.5px; }
.legal-toc a:hover { color: var(--blue); }
.legal-prose { max-width: 780px; }
.legal-prose h2 { font-size: 24px; margin: 32px 0 10px; }
.legal-prose h3 { font-size: 18px; margin: 22px 0 8px; }
.legal-prose p, .legal-prose li { color: #2d384b; font-size: 15px; }
.legal-meta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted-light); font-size: 12.5px; }

/* ---------- 404 ---------- */
.error-page { min-height: 54vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 60px 20px; }
.error-code { font-size: clamp(72px, 14vw, 150px); font-weight: 900; line-height: 1; letter-spacing: -.05em; color: var(--blue); }
.error-page h1 { margin: 10px 0; }
.error-page p { max-width: 540px; color: var(--muted); }
.error-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }
.error-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin-top: 26px; font-size: 13.5px; }

/* ---------- Onlinewache ---------- */
.ow-layout { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 32px; align-items: start; }
.ow-form-card { padding: clamp(22px, 3vw, 32px); border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-sm); }
.ow-info-strip { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; margin-bottom: 24px; }
.ow-info-strip > div { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; font-size: 13px; color: var(--muted); }
.ow-info-strip strong { display: block; color: var(--navy); font-size: 14px; margin-bottom: 3px; }
.ow-sidebar { display: grid; gap: 16px; }

/* ---------- Öffnungszeiten ---------- */
.service-hours { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin-top: 14px; }
.hours-card { padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; }
.hours-card .icon { width: 18px; height: 18px; color: var(--blue); }
.hours-card h4 { margin: 6px 0 3px; font-size: 14px; }
.hours-card p { margin: 0; color: var(--muted); font-size: 12.5px; }

/* ---------- Modals ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(4, 14, 32, .62);
  backdrop-filter: blur(4px);
}
.modal[hidden] { display: none !important; }
.modal-card {
  width: min(640px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  padding: 26px;
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: 0 40px 100px rgba(0,0,0,.4);
}
.modal-card-lg { width: min(880px, 100%); }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 8px; }
.modal-head h2 { font-size: 24px; }
.modal-sub { color: var(--muted); font-size: 14px; margin-bottom: 18px; }
.modal-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.modal .field { display: grid; gap: 6px; }
.modal .field label { font-size: 13.5px; font-weight: 700; color: var(--navy); }
.modal .field input, .modal .field select, .modal .field textarea {
  width: 100%; min-height: 44px; padding: 9px 12px;
  border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm);
  background: #fff; color: var(--ink); font-size: 14.5px;
}
.modal .field textarea { min-height: 96px; resize: vertical; }
.modal .form-grid { gap: 14px; }

/* ---------- Karten / Sonstiges ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.callout { padding: 16px 18px; border-left: 4px solid var(--blue); border-radius: var(--radius-sm); background: var(--blue-50); color: #2d384b; font-size: 14px; }
.note { color: var(--muted); font-size: 13px; }
.process { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; margin-top: 26px; }
.process-step { padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.process-step b { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--blue); color: #fff; font-size: 12px; margin-bottom: 8px; }
.process-step strong { display: block; color: var(--navy); font-size: 14.5px; }
.process-step small { color: var(--muted); font-size: 12.5px; }
.step-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 20px; }
.step-hint { color: var(--muted); font-size: 13px; }
.safety-check { display: grid; gap: 14px; }
.safety-question { padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.safety-question strong { display: block; margin-bottom: 8px; font-size: 14.5px; }
.safety-options { display: flex; flex-wrap: wrap; gap: 8px; }
.safety-result { margin-top: 18px; padding: 16px; border-radius: var(--radius); background: var(--blue-50); font-size: 14px; }
.equipment-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.equipment { padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; text-align: center; }
.equipment strong { display: block; color: var(--navy); font-size: 14px; }
.timeline-year { white-space: nowrap; }
.map-illustration { width: 100%; height: 100%; }
.hero-caption { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 3px; padding: 10px 14px; border-radius: var(--radius-sm); background: rgba(4,14,32,.55); backdrop-filter: blur(4px); color: #eaf0fa; font-size: 12px; }
.hero-caption small { color: #9fb3d2; font-size: 10.5px; }

/* ---------- Reveal-Animation ---------- */
.reveal-pending { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.reveal-pending.is-visible { opacity: 1; transform: none; }

/* ---------- Responsive Ergänzungen ---------- */
@media (max-width: 1024px) {
  .service-grid, .wanted-grid, .related-grid, .value-grid, .prev-grid, .benefit-grid, .equipment-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .press-layout, .ow-layout, .legal-layout, .station-layout, .career-quiz-layout { grid-template-columns: 1fr; }
  .legal-toc { position: static; }
  .station-list { max-height: none; }
  .about-split { grid-template-columns: 1fr; }
  .kart-card { grid-template-columns: 1fr; }
  .process { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .stat-grid, .career-hero-stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ow-info-strip { grid-template-columns: 1fr; }
  .a11y-grid, .easy-language { grid-template-columns: 1fr; }
  .service-hours { grid-template-columns: 1fr; }
  .contact-split { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .service-grid, .wanted-grid, .related-grid, .value-grid, .prev-grid, .benefit-grid, .equipment-grid, .process, .stat-grid, .career-hero-stats, .form-grid { grid-template-columns: 1fr; }
  .filter-bar { align-items: stretch; }
  .filter-search input { width: 100%; }
}

/* ---------- Feinjustierung Formulare ---------- */
.form-grid input[type="checkbox"],
.form-grid input[type="radio"],
.legal-check input[type="checkbox"],
.legal-check input[type="radio"],
.form-card .checkbox input {
  width: 18px;
  height: 18px;
  min-height: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
  accent-color: var(--blue);
  flex: none;
}
.checkbox { align-items: flex-start; }

/* ---------- Artikel-Hero (Meldungsdetail) ---------- */
.article-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 300px;
  margin: 0 0 30px;
  padding: 24px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 85% 15%, rgba(255, 255, 255, .18), transparent 40%),
    linear-gradient(135deg, #15539b, #0a2447);
  color: #fff;
  box-shadow: var(--shadow-md);
}
.article-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 26px);
}
.article-hero.v-warnung { background: radial-gradient(circle at 85% 15%, rgba(255,255,255,.16), transparent 40%), linear-gradient(135deg, #a30d27, #5f0717); }
.article-hero.v-fahndung { background: radial-gradient(circle at 85% 15%, rgba(255,255,255,.16), transparent 40%), linear-gradient(135deg, #8f1029, #3c0a18); }
.article-hero.v-verkehr { background: radial-gradient(circle at 85% 15%, rgba(255,255,255,.16), transparent 40%), linear-gradient(135deg, #9a6b13, #4a3006); }
.article-hero.v-service { background: radial-gradient(circle at 85% 15%, rgba(255,255,255,.16), transparent 40%), linear-gradient(135deg, #0b5d64, #06343a); }
.article-hero.v-karriere { background: radial-gradient(circle at 85% 15%, rgba(255,255,255,.16), transparent 40%), linear-gradient(135deg, #114887, #071a35); }
.article-hero .visual-icon {
  position: absolute;
  right: 24px;
  top: 20px;
  width: 84px;
  height: 84px;
  opacity: .3;
}
.article-hero .visual-icon .icon { width: 84px; height: 84px; stroke-width: 1; }
.article-hero .hero-caption {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0;
  background: transparent;
  backdrop-filter: none;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}
.article-hero .hero-caption small { color: #c4d4ea; font-size: 11px; font-weight: 400; }

/* ---------- Onlinewache: mehrstufiges Formular ---------- */
.stepper {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}
.stepper-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  border-radius: 99px;
  background: var(--soft);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
}
.stepper-item span {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  color: var(--muted);
  border: 1px solid var(--line-strong);
  font-size: 10px;
}
.stepper-item.is-active { background: var(--blue); color: #fff; }
.stepper-item.is-active span { background: #fff; color: var(--blue); border-color: #fff; }
.stepper-item.is-done { background: var(--green-100); color: var(--green); }

.step-panel { display: none; }
.step-panel.is-active { display: block; }
.step-panel h3 { font-size: 19px; margin-bottom: 14px; }

.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.choice {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 15px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius);
  background: #fff;
  cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.choice input { position: absolute; opacity: 0; }
.choice:has(input:checked) {
  border-color: var(--blue);
  background: var(--blue-50);
  box-shadow: 0 0 0 3px var(--blue-100);
}
.choice strong { color: var(--navy); font-size: 14px; }
.choice small { color: var(--muted); font-size: 12px; line-height: 1.45; }

.summary-list {
  display: grid;
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--line);
  margin-bottom: 14px;
}
.summary-row {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 12px;
  padding: 10px 13px;
  background: #fff;
  font-size: 13px;
}
.summary-row dt { color: var(--muted); font-weight: 600; }
.summary-row dd { margin: 0; color: var(--ink); word-break: break-word; }
.help { display: block; margin-top: 4px; color: var(--muted-light); font-size: 12px; }

@media (max-width: 640px) {
  .choice-grid { grid-template-columns: 1fr; }
  .summary-row { grid-template-columns: 1fr; gap: 2px; }
}

/* ---------- Status: Nachrichten der Dienststelle ---------- */
.status-messages {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.status-messages h4 {
  margin: 0 0 10px;
  font-size: 14px;
  color: var(--navy);
}
.status-message {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--blue);
  border-radius: var(--radius-sm);
  background: var(--blue-50);
  margin-bottom: 8px;
}
.status-message strong { display: block; font-size: 12.5px; color: var(--navy); }
.status-message small { color: var(--muted-light); font-size: 11px; }
.status-message p { margin: 6px 0 0; font-size: 13px; color: var(--ink); }

.about-emblem img.brand-mark { width: min(320px, 80%); height: auto; }

/* ---------- Bürgerkonto & Ticket-Chat ---------- */
.badge-blue { background: var(--blue-100); color: var(--blue); }

.account-gate {
  display: grid;
  place-items: center;
  padding: 12px 0 30px;
}
.account-gate-card {
  width: min(640px, 100%);
  padding: clamp(26px, 5vw, 46px);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 85% 10%, rgba(44, 112, 197, .12), transparent 38%),
    #fff;
  box-shadow: var(--shadow-md);
  text-align: center;
}
.account-gate-card .eyebrow { margin-bottom: 8px; }
.account-gate-card h2 { margin-bottom: 12px; }
.account-gate-card p { color: var(--muted); }
.account-gate-card .btn { margin-top: 18px; }
.account-gate-card .form-note { margin: 14px auto 0; max-width: 460px; }
.account-gate-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border-radius: 20px;
  background: var(--blue-100);
  color: var(--blue);
}
.account-gate-icon .icon { width: 30px; height: 30px; }
.account-gate-card .notice { text-align: left; margin: 16px 0 0; }

.account-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
}
.account-identity { display: flex; align-items: center; gap: 13px; min-width: 0; }
.account-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--blue-50);
  border: 2px solid var(--blue-100);
  flex: none;
}
.account-identity strong { display: block; color: var(--navy); font-size: 15px; line-height: 1.25; }
.account-identity span { display: block; color: var(--muted-light); font-size: 12px; }
.account-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.ticket-workspace {
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.ticket-sidebar {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 92px;
}
.ticket-sidebar-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.ticket-sidebar-head .eyebrow { margin-bottom: 3px; }
.ticket-sidebar-head h2 { font-size: 20px; }
.ticket-sidebar-note { margin: 14px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--muted-light); }
.my-ticket-list { display: grid; gap: 8px; max-height: 560px; overflow-y: auto; padding-right: 2px; }
.my-ticket-item {
  width: 100%;
  display: grid;
  gap: 5px;
  padding: 12px 13px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--soft);
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.my-ticket-item:hover { border-color: var(--blue-500); background: var(--blue-50); }
.my-ticket-item.is-active { border-color: var(--blue); background: var(--blue-50); box-shadow: 0 0 0 3px var(--blue-100); }
.my-ticket-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.my-ticket-ref { font: 700 11px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; color: var(--blue); letter-spacing: .03em; }
.my-ticket-item strong { color: var(--navy); font-size: 13px; line-height: 1.35; }
.my-ticket-preview { color: var(--muted); font-size: 12px; line-height: 1.4; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.my-ticket-meta { color: var(--muted-light); font-size: 10.5px; }
.my-ticket-empty { padding: 18px 8px; text-align: center; color: var(--muted); font-size: 13px; }
.my-ticket-empty .btn { margin-top: 12px; }

.ticket-chat {
  min-height: 520px;
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.ticket-chat-empty { min-height: 430px; display: grid; place-items: center; align-content: center; text-align: center; color: var(--muted); }
.ticket-chat-empty h2 { margin: 4px 0 8px; font-size: 22px; }
.ticket-chat-empty p { max-width: 380px; font-size: 14px; }
.ticket-chat-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.ticket-chat-head h2 { font-size: 20px; margin: 6px 0 3px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .01em; }
.ticket-chat-head p { margin: 0; color: var(--muted); font-size: 13px; }
.ticket-chat-thread {
  display: grid;
  gap: 9px;
  align-content: start;
  min-height: 240px;
  max-height: 430px;
  overflow-y: auto;
  padding: 4px 4px 8px;
  scroll-behavior: smooth;
}
.chat-message {
  max-width: 82%;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: 14px 14px 14px 4px;
  background: var(--soft);
  justify-self: start;
}
.chat-message.is-mine {
  justify-self: end;
  border-radius: 14px 14px 4px 14px;
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}
.chat-message.is-police { border-left: 3px solid var(--gold); background: var(--gold-soft); }
.chat-message-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.chat-message-head strong { font-size: 11.5px; color: var(--navy); }
.chat-message-head small { font-size: 10px; color: var(--muted-light); white-space: nowrap; }
.chat-message.is-mine .chat-message-head strong { color: #fff; }
.chat-message.is-mine .chat-message-head small { color: rgba(255,255,255,.7); }
.chat-message p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.ticket-chat-form { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.ticket-chat-form textarea { min-height: 92px; resize: vertical; }
.ticket-chat-form-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 10px; }
.ticket-chat-form-actions .form-note { margin: 0; max-width: 430px; }
.ticket-chat .notice { margin-top: 16px; }

.btn.is-disabled { opacity: .55; cursor: not-allowed; pointer-events: none; }

@media (max-width: 900px) {
  .ticket-workspace { grid-template-columns: 1fr; }
  .ticket-sidebar { position: static; }
  .my-ticket-list { max-height: none; }
  .ticket-chat { min-height: 420px; }
}
@media (max-width: 560px) {
  .account-bar { align-items: flex-start; }
  .account-actions { width: 100%; }
  .chat-message { max-width: 94%; }
  .ticket-chat-form-actions { align-items: stretch; }
  .ticket-chat-form-actions .btn { width: 100%; }
}

/* ---------- Bewerbungsphasen (öffentlich) ---------- */
.recruitment-banner { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 22px; }
.recruitment-phase { display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border: 1px solid var(--line); border-radius: 99px; background: #fff; color: var(--muted); font-size: 12px; }
.recruitment-phase strong { color: var(--navy); }
.recruitment-phase.is-open { border-color: #b7e3c8; background: var(--green-100); color: var(--green); }
.recruitment-phase.is-closed { border-color: #f0c0ca; background: var(--red-100); color: var(--red); }
.recruitment-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.recruitment-loading { color: var(--muted); font-size: 12.5px; }
.recruitment-home-status { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0 0; }
.recruitment-home-status .recruitment-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid rgba(255,255,255,.2); border-radius: 99px; background: rgba(255,255,255,.08); color: #dbe7f7; font-size: 11px; font-weight: 600; }
.recruitment-home-status .recruitment-chip.is-open { color: #bff5d5; border-color: rgba(191,245,213,.35); }
.recruitment-home-status .recruitment-chip.is-closed { color: #ffc5ce; border-color: rgba(255,197,206,.35); }
.path-phase { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; padding: 4px 9px; border-radius: 99px; font-size: 10.5px; font-weight: 700; }
.path-phase.is-open { background: var(--green-100); color: var(--green); }
.path-phase.is-closed { background: var(--red-100); color: var(--red); }
.path-card .btn.is-closed,
.path-card .btn:disabled { opacity: .55; cursor: not-allowed; }

.career-hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.career-hero-stats .stat span { line-height: 1.35; }

/* ---------- Bewerbertest (öffentlich) ---------- */
.test-public-wrap { max-width: 820px; margin: 0 auto; }
.test-loading { padding: 40px 0; text-align: center; }
.test-start { margin-bottom: 24px; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-md); }
.test-start h2 { margin-bottom: 8px; }
.test-start > p { margin-bottom: 18px; color: var(--muted); }
.test-start-form .form-actions { margin-top: 16px; }
.test-public-head { margin-bottom: 20px; }
.test-public-head h2 { margin: 10px 0 8px; font-size: 30px; }
.test-public-head p { color: var(--muted); }
.test-public-form { display: block; }
.test-public-list { display: grid; gap: 14px; margin: 22px 0; }
.test-public-question { padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); }
.test-public-number { color: var(--blue); font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px; }
.test-public-question h3 { margin: 0 0 12px; font-size: 17px; line-height: 1.35; }
.test-public-options { display: grid; gap: 7px; }
.test-public-option { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; transition: border-color .15s, background .15s; }
.test-public-option:has(input:checked) { border-color: var(--blue); background: var(--blue-50); box-shadow: 0 0 0 3px var(--blue-100); }
.test-public-option input { position: absolute; opacity: 0; }
.test-public-option-index { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--blue-100); color: var(--blue); font-size: 11px; font-weight: 800; }
.test-public-option span:last-child { font-size: 13.5px; color: var(--ink); }
.test-public-consent { margin: 8px 0 18px; }
.test-result { max-width: 560px; margin: 0 auto; padding: 34px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-md); text-align: center; }
.test-result-icon { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; background: var(--green-100); color: var(--green); }
.test-result.is-failed .test-result-icon { background: var(--red-100); color: var(--red); }
.test-result-icon .icon { width: 32px; height: 32px; }
.test-result h2 { margin-bottom: 8px; }
.test-result p { color: var(--muted); }
.test-score { margin: 18px auto; color: var(--navy); font-size: 54px; font-weight: 900; letter-spacing: -.04em; }
.test-result.is-passed .test-score { color: var(--green); }
.test-result.is-failed .test-score { color: var(--red); }
@media (max-width: 560px) {
  .test-result { padding: 24px 18px; }
  .test-score { font-size: 42px; }
}