/* ==========================================================================
   OHNE-OASIS — Behördenportal
   Nüchtern, dicht, flächig. Keine Rundungen, keine Schatten, kein Weißraum
   um seiner selbst willen. Der Inhalt trägt die Seite.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Farben */
  --blau:        #1f4e79;   /* Überschriften, Navigation, Flächen */
  --blau-hell:   #587893;   /* Sekundärflächen */
  --blau-hover:  #6283a1;
  --blau-dunkel: #163a5c;

  /* Akzent: Markenfarbe aus der Wortmarke.
     --akzent      dekorativ (Linien, Rahmen, Fokusring, große Flächen)
     --akzent-text Text und Füllungen mit weißer Schrift — #1d8a7e erreicht
                   auf Weiß nur 4,21:1 und bleibt damit unter AA (4,5:1)
     --akzent-hell auf dunklem Untergrund, wo die Marke sonst untergeht
     --fehler      bleibt rot: Warnungen, Formularfehler, Pflichtfelder */
  --akzent:        #1d8a7e;
  --akzent-text:   #19776d;
  --akzent-dunkel: #145f57;
  --akzent-hell:   #3fb9a9;

  --fehler:        #c11515;
  --fehler-dunkel: #a01010;

  --text:        #4f5260;
  --text-stark:  #212529;
  --text-leise:  #5f646e;

  --linie:       #d7d5d5;
  --linie-fein:  #ebebed;
  --flaeche:     #f4f4f6;
  --flaeche-2:   #ebebed;
  --weiss:       #ffffff;

  /* Typografie */
  --schrift:  'Roboto', 'Helvetica Neue', Arial, sans-serif;
  --schrift-eng: 'Roboto Condensed', 'Roboto', Arial, sans-serif;

  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;   /* Grundgröße */
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;

  --fs-h1: clamp(26px, 22px + 1.1vw, 36px);
  --fs-h2: clamp(21px, 19px + 0.6vw, 26px);
  --fs-h3: clamp(17px, 16px + 0.3vw, 19px);
  --fs-hero: clamp(24px, 19px + 1.7vw, 38px);

  /* Maße */
  --breite:        1200px;
  --breite-schmal: 900px;
  --lesebreite:    46em;
  --spalte-neben:  270px;
  --kopf-hoehe:    92px;

  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;
  --e5: 20px; --e6: 24px; --e8: 32px; --e10: 40px;
  --e12: 48px; --e16: 64px;

  --radius: 0;
}

/* --------------------------------------------------------------------------
   2. Grundlagen
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--kopf-hoehe) + 16px);
}

body {
  margin: 0;
  background: var(--weiss);
  color: var(--text);
  font-family: var(--schrift);
  font-size: var(--fs-15);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--e5);
  color: var(--blau);
  font-family: var(--schrift);
  text-transform: none;
}
h1 { font-size: var(--fs-h1); font-weight: 300; line-height: 1.2; }
h2 { font-size: var(--fs-h2); font-weight: 500; line-height: 1.35; }
h3 { font-size: var(--fs-h3); font-weight: 500; line-height: 1.4; }
h4 { font-size: var(--fs-16); font-weight: 700; line-height: 1.4; }

p { margin: 0 0 var(--e4); }
p:last-child { margin-bottom: 0; }

a { color: var(--akzent-text); text-decoration: none; }
a:hover { color: var(--akzent-dunkel); text-decoration: underline; }

img, svg, video { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0 0 var(--e4); padding-left: 20px; }
li { margin-bottom: var(--e1); }

figure { margin: 0; }
hr { border: 0; border-top: 1px solid var(--linie); margin: var(--e8) 0; }
table { border-collapse: collapse; width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

code {
  font-family: Consolas, Menlo, monospace;
  font-size: 0.92em;
  background: var(--flaeche);
  border: 1px solid var(--linie-fein);
  padding: 1px 4px;
}

:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }
.oa-topbar :focus-visible,
.oa-footer :focus-visible,
.oa-hero :focus-visible,
.oa-tiles :focus-visible { outline-color: #ffd24a; }

::selection { background: var(--blau); color: #fff; }

/* --------------------------------------------------------------------------
   3. Hilfsklassen
   -------------------------------------------------------------------------- */
.oa-container {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--e5);
}
.oa-container--narrow { max-width: var(--breite-schmal); }

.screen-reader-text, .oa-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.oa-skip-link {
  position: absolute; left: 0; top: -60px; z-index: 1000;
  background: var(--akzent-text); color: #fff;
  padding: 10px 18px; font-size: var(--fs-14); font-weight: 500;
  text-decoration: none;
}
.oa-skip-link:focus { top: 0; color: #fff; }

.oa-section { padding-block: var(--e10); }
.oa-section--tight { padding-block: var(--e8); }
.oa-section--alt { background: var(--flaeche); }
.oa-section--navy { background: var(--blau); color: rgba(255,255,255,0.88); }
.oa-section--navy h2, .oa-section--navy h3 { color: #fff; }
.oa-section--navy a:not(.oa-btn) { color: #fff; text-decoration: underline; }

/* Abschnittsüberschrift: Balken links, wie in Verwaltungspublikationen */
.oa-section-head { margin-bottom: var(--e6); }
.oa-section-head__title {
  font-size: var(--fs-h2);
  margin: 0;
  padding-bottom: var(--e2);
  border-bottom: 2px solid var(--blau);
  display: block;
}
.oa-section-head__intro { margin-top: var(--e3); color: var(--text); max-width: 60em; }
.oa-section-head--split { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--e5); flex-wrap: wrap; }
.oa-section-head--split .oa-section-head__title { flex: 1; }

.oa-eyebrow {
  display: block;
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blau-hell);
  margin-bottom: var(--e2);
}

/* --------------------------------------------------------------------------
   4. Schaltflächen
   -------------------------------------------------------------------------- */
.oa-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  padding: 9px 18px;
  min-height: 38px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: var(--fs-13);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.3;
  text-decoration: none;
  transition: background-color 0.12s, border-color 0.12s, color 0.12s;
}
.oa-btn:hover { text-decoration: none; }
.oa-btn svg { flex: none; }

.oa-btn--primary { background: var(--akzent-text); border-color: var(--akzent-text); color: #fff; }
.oa-btn--primary:hover { background: var(--blau); border-color: var(--blau); color: #fff; }

.oa-btn--secondary { background: var(--weiss); border-color: var(--blau); color: var(--blau); }
.oa-btn--secondary:hover { background: var(--blau); color: #fff; }

.oa-btn--accent { background: var(--blau); border-color: var(--blau); color: #fff; }
.oa-btn--accent:hover { background: var(--blau-hover); border-color: var(--blau-hover); color: #fff; }

.oa-btn--ghost { background: transparent; border-color: rgba(255,255,255,0.6); color: #fff; }
.oa-btn--ghost:hover { background: rgba(255,255,255,0.12); border-color: #fff; color: #fff; }

.oa-btn--sm { min-height: 30px; padding: 5px 12px; font-size: var(--fs-11); }

/* Pfeilverweis „→ Mehr Informationen“ */
.oa-link-arrow {
  display: inline-block;
  font-size: var(--fs-14);
  font-weight: 700;
  color: var(--akzent-text);
  text-decoration: underline;
}
.oa-link-arrow::before { content: '→ '; text-decoration: none; }
.oa-link-arrow:hover { color: var(--akzent-dunkel); }

/* --------------------------------------------------------------------------
   5. Kopfleiste und Kopfbereich
   -------------------------------------------------------------------------- */
.oa-topbar {
  background: var(--blau-dunkel);
  color: rgba(255,255,255,0.85);
  font-size: var(--fs-12);
}
.oa-topbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e4); min-height: 32px;
}
.oa-topbar__claim {
  margin: 0;
  font-family: var(--schrift-eng);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.oa-topbar__links {
  display: flex; align-items: center; gap: var(--e5);
  list-style: none; margin: 0; padding: 0; flex: none;
}
.oa-topbar__links li { margin: 0; }
.oa-topbar__links a {
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: var(--fs-11);
  font-weight: 500;
  padding-block: 8px;
  display: inline-block;
}
.oa-topbar__links a:hover { color: #fff; text-decoration: underline; }
.oa-topbar__lang {
  font-weight: 700; color: #fff !important;
  border: 1px solid rgba(255,255,255,0.4);
  padding: 1px 6px !important; font-size: var(--fs-11);
}

.oa-header {
  background: var(--weiss);
  border-bottom: 3px solid var(--blau);
  position: sticky; top: 0; z-index: 100;
}
.oa-header__inner { display: flex; align-items: stretch; gap: var(--e5); min-height: var(--kopf-hoehe); }

.oa-brand {
  display: inline-flex; align-items: center; gap: var(--e3);
  text-decoration: none; flex: none; margin-right: auto;
  padding-block: var(--e2);
}
.oa-brand:hover { text-decoration: none; }
.oa-brand__mark { flex: none; width: 42px; height: 42px; }
.oa-brand--bild { gap: 0; }
.oa-brand__logo { display: block; height: 64px; width: auto; max-width: 100%; }
.oa-brand--invers .oa-brand__logo { filter: brightness(0) invert(1); }
.oa-footer__brand .oa-brand__logo { height: 56px; }
.oa-brand__text { display: flex; flex-direction: column; }
.oa-brand__name {
  font-family: var(--schrift-eng);
  font-size: 22px; font-weight: 700; letter-spacing: 0.02em;
  color: var(--blau); line-height: 1.1; white-space: nowrap;
}
.oa-brand__sub {
  font-size: var(--fs-11); font-weight: 400; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-leise);
  line-height: 1.3; white-space: nowrap;
}

.oa-header__actions { display: flex; align-items: center; gap: var(--e1); flex: none; }

.oa-icon-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  width: 44px; height: 44px;
  background: transparent; border: 1px solid transparent;
  color: var(--blau);
}
.oa-icon-btn:hover { background: var(--flaeche); border-color: var(--linie); }
.oa-icon-btn[aria-expanded="true"] { background: var(--blau); border-color: var(--blau); color: #fff; }

.oa-burger { display: none; width: auto; padding-inline: var(--e3); font-size: var(--fs-13); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; }
.oa-burger__lines { position: relative; width: 18px; height: 12px; flex: none; }
.oa-burger__lines span,
.oa-burger__lines::before,
.oa-burger__lines::after {
  content: ''; position: absolute; left: 0; right: 0; height: 2px;
  background: currentColor; transition: transform 0.18s, opacity 0.12s;
}
.oa-burger__lines::before { top: 0; }
.oa-burger__lines span { top: 5px; }
.oa-burger__lines::after { bottom: 0; }
.oa-burger[aria-expanded="true"] .oa-burger__lines::before { transform: translateY(5px) rotate(45deg); }
.oa-burger[aria-expanded="true"] .oa-burger__lines span { opacity: 0; }
.oa-burger[aria-expanded="true"] .oa-burger__lines::after { transform: translateY(-5px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   6. Hauptnavigation
   -------------------------------------------------------------------------- */
.oa-nav { flex: none; display: flex; align-items: stretch; }
.oa-nav__list { display: flex; align-items: stretch; list-style: none; margin: 0; padding: 0; }
.oa-nav__item { margin: 0; position: relative; display: flex; align-items: stretch; }

.oa-nav__link, .oa-nav__toggle {
  display: inline-flex; align-items: center;
  min-height: var(--kopf-hoehe);
  font-size: var(--fs-15); font-weight: 500; letter-spacing: 0.01em;
  color: var(--blau); text-decoration: none;
  background: none; border: 0;
  white-space: nowrap;
  transition: background-color 0.12s, color 0.12s;
}
.oa-nav__link { padding-inline: var(--e3); }
.oa-nav__item.has-children > .oa-nav__link { padding-right: 2px; }
.oa-nav__toggle { padding: 0 10px 0 2px; }

.oa-nav__item:hover > .oa-nav__link,
.oa-nav__item:hover > .oa-nav__toggle,
.oa-nav__item.is-open > .oa-nav__link,
.oa-nav__item.is-open > .oa-nav__toggle { background: var(--flaeche); color: var(--akzent-text); }

.oa-nav__item.is-current > .oa-nav__link,
.oa-nav__item.current-menu-item > .oa-nav__link,
.oa-nav__item.current-menu-ancestor > .oa-nav__link,
.oa-nav__item.current-menu-parent > .oa-nav__link { color: var(--akzent-text); font-weight: 700; }

.oa-nav__chevron { width: 10px; height: 10px; opacity: 0.7; transition: transform 0.15s; }
.oa-nav__toggle[aria-expanded="true"] .oa-nav__chevron { transform: rotate(180deg); }

.oa-nav__panel {
  position: absolute; top: 100%; left: 0;
  min-width: 300px; max-width: 380px;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-top: 3px solid var(--blau);
  padding: 0; z-index: 110;
}
.oa-nav__panel[hidden] { display: none; }
.oa-nav__item:nth-last-child(-n+3) .oa-nav__panel { left: auto; right: 0; }

.oa-nav__panel-head {
  padding: var(--e3) var(--e4);
  background: var(--flaeche);
  border-bottom: 1px solid var(--linie);
}
.oa-nav__panel-head a {
  font-family: var(--schrift-eng);
  font-size: var(--fs-12); font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--blau); text-decoration: none;
}
.oa-nav__panel-head a:hover { color: var(--akzent-text); text-decoration: underline; }

.oa-nav__sub { list-style: none; margin: 0; padding: 0; }
.oa-nav__sub li { margin: 0; border-bottom: 1px solid var(--linie-fein); position: relative; }
.oa-nav__sub li:last-child { border-bottom: 0; }
.oa-nav__sub a, .oa-nav__sub span {
  display: block; padding: 9px var(--e4);
  font-size: var(--fs-14); color: var(--text); text-decoration: none;
  white-space: normal;
}
.oa-nav__sub a:hover, .oa-nav__sub a:focus-visible,
.oa-nav__sub .has-children:hover > a,
.oa-nav__sub .menu-item-has-children:hover > a { background: var(--flaeche); color: var(--akzent-text); }
.oa-nav__sub .current-menu-item > a, .oa-nav__sub .is-current > a { color: var(--akzent-text); font-weight: 700; }

.oa-nav__sub > .has-children > a,
.oa-nav__sub > .menu-item-has-children > a,
.oa-nav__sub > .has-children > span,
.oa-nav__sub > .menu-item-has-children > span {
  position: relative;
  padding-right: 28px;
}
.oa-nav__sub > .has-children > a::after,
.oa-nav__sub > .menu-item-has-children > a::after,
.oa-nav__sub > .has-children > span::after,
.oa-nav__sub > .menu-item-has-children > span::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-top: 1.5px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
  opacity: 0.7;
}

.oa-nav__sub--deep {
  display: none;
  position: absolute;
  left: calc(100% - 1px);
  top: -1px;
  min-width: 280px;
  max-width: 360px;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-top: 3px solid var(--blau);
  z-index: 112;
}
.oa-nav__sub > .has-children:hover > .oa-nav__sub--deep,
.oa-nav__sub > .menu-item-has-children:hover > .oa-nav__sub--deep,
.oa-nav__sub > .has-children:focus-within > .oa-nav__sub--deep,
.oa-nav__sub > .menu-item-has-children:focus-within > .oa-nav__sub--deep {
  display: block;
}

.oa-nav__item:nth-last-child(-n+3) .oa-nav__sub--deep {
  left: auto;
  right: calc(100% - 1px);
}
.oa-nav__item:nth-last-child(-n+3) .oa-nav__sub > .has-children > a::after,
.oa-nav__item:nth-last-child(-n+3) .oa-nav__sub > .menu-item-has-children > a::after,
.oa-nav__item:nth-last-child(-n+3) .oa-nav__sub > .has-children > span::after,
.oa-nav__item:nth-last-child(-n+3) .oa-nav__sub > .menu-item-has-children > span::after {
  right: auto;
  left: 12px;
  transform: translateY(-50%) rotate(-135deg);
}
.oa-nav__item:nth-last-child(-n+3) .oa-nav__sub > .has-children > a,
.oa-nav__item:nth-last-child(-n+3) .oa-nav__sub > .menu-item-has-children > a,
.oa-nav__item:nth-last-child(-n+3) .oa-nav__sub > .has-children > span,
.oa-nav__item:nth-last-child(-n+3) .oa-nav__sub > .menu-item-has-children > span {
  padding-right: var(--e4);
  padding-left: 28px;
}

/* --------------------------------------------------------------------------
   7. Suche
   -------------------------------------------------------------------------- */
.oa-header-search {
  border-bottom: 1px solid var(--linie);
  background: var(--flaeche);
  padding-block: var(--e4);
}
.oa-header-search[hidden] { display: none; }

.oa-searchform { display: flex; gap: var(--e2); width: 100%; }
.oa-searchform__field {
  flex: 1; min-width: 0;
  padding: 8px 12px; min-height: 38px;
  font-size: var(--fs-14);
  background: var(--weiss); color: var(--text);
  border: 1px solid var(--linie); border-radius: var(--radius);
}
.oa-searchform__field::placeholder { color: var(--text-leise); }
.oa-searchform__field:focus-visible { border-color: var(--blau); }
.oa-searchform__submit { min-height: 38px; }
.oa-searchform--lg .oa-searchform__field { min-height: 46px; font-size: var(--fs-16); }
.oa-searchform--lg .oa-searchform__submit { min-height: 46px; padding-inline: var(--e6); }

/* --------------------------------------------------------------------------
   8. Mobile Navigation
   -------------------------------------------------------------------------- */
.oa-mobile-nav {
  position: fixed; inset: 0; z-index: 200;
  background: var(--weiss); display: flex; flex-direction: column;
  overscroll-behavior: contain;
}
.oa-mobile-nav[hidden] { display: none; }
.oa-mobile-nav__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e4);
  padding: var(--e3) var(--e5);
  border-bottom: 3px solid var(--blau); flex: none;
}
.oa-mobile-nav__body { flex: 1; overflow-y: auto; padding: var(--e5) var(--e5) var(--e16); }
.oa-mobile-nav__search { margin-bottom: var(--e5); }
.oa-mobile-nav__list { list-style: none; margin: 0; padding: 0; }
.oa-mobile-nav__list > li { border-bottom: 1px solid var(--linie); margin: 0; }
.oa-mobile-nav__row { display: flex; align-items: stretch; }
.oa-mobile-nav__row > a, .oa-mobile-nav__row > span {
  flex: 1; display: flex; align-items: center; min-height: 48px;
  font-size: var(--fs-16); font-weight: 500; color: var(--blau); text-decoration: none;
}
.oa-mobile-nav__toggle {
  flex: none; width: 48px; background: none; border: 0;
  border-left: 1px solid var(--linie-fein); color: var(--blau);
  display: flex; align-items: center; justify-content: center;
}
.oa-mobile-nav__toggle svg { width: 12px; height: 12px; transition: transform 0.18s; }
.oa-mobile-nav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.oa-mobile-nav__sub { list-style: none; margin: 0; padding: 0 0 var(--e3); }
.oa-mobile-nav__sub[hidden] { display: none; }
.oa-mobile-nav__sub a {
  display: flex; align-items: center; min-height: 42px;
  padding: 4px var(--e4); font-size: var(--fs-14);
  color: var(--text); text-decoration: none;
  border-left: 3px solid var(--linie);
}
.oa-mobile-nav__sub a:hover { border-left-color: var(--akzent); color: var(--akzent-text); background: var(--flaeche); }
.oa-mobile-nav__sub .oa-mobile-nav__sub { padding-left: var(--e4); }
.oa-mobile-nav__meta {
  margin-top: var(--e6); padding-top: var(--e5);
  border-top: 1px solid var(--linie);
  display: flex; flex-wrap: wrap; gap: var(--e2) var(--e5);
  list-style: none; padding-left: 0;
}
.oa-mobile-nav__meta a { font-size: var(--fs-13); color: var(--text-leise); }
body.oa-nav-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   9. Titelband der Startseite
   -------------------------------------------------------------------------- */
.oa-hero {
  background: var(--blau);
  color: #fff;
  border-bottom: 4px solid var(--akzent);
  position: relative;
  overflow: hidden;
}

/* Mit Motiv: Bild rechts, Textseite durch einen Verlauf abgedeckt, damit
   weißer Text unabhängig vom Bildinhalt über 4,5:1 bleibt. */
.oa-hero--bild {
  background-image: var(--hero-bild);
  background-size: cover;
  background-position: var(--hero-fokus, 78% center);
  background-repeat: no-repeat;
}
.oa-hero--bild::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(10, 42, 68, 0.97) 0%,
    rgba(10, 42, 68, 0.94) 40%,
    rgba(10, 42, 68, 0.72) 62%,
    rgba(10, 42, 68, 0.34) 100%
  );
  pointer-events: none;
}

.oa-hero__inner {
  position: relative;
  z-index: 1;
  padding-block: var(--e12);
  max-width: 700px;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.oa-hero__eyebrow {
  display: block;
  font-family: var(--schrift-eng);
  font-size: var(--fs-12); font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(255,255,255,0.72); margin-bottom: var(--e3);
}
.oa-hero__title { font-size: var(--fs-hero); font-weight: 300; line-height: 1.2; color: #fff; margin-bottom: var(--e4); }
.oa-hero__lede { font-size: var(--fs-18); font-weight: 300; line-height: 1.5; color: rgba(255,255,255,0.9); margin-bottom: var(--e6); max-width: 46em; }
.oa-hero__actions { display: flex; flex-wrap: wrap; gap: var(--e3); }
.oa-hero__figure { display: none; }

/* Seitenkopf der Unterseiten — schmales Band, kein Aufmacher */
.oa-pagehead { background: var(--flaeche); border-bottom: 1px solid var(--linie); padding-block: var(--e6); }
.oa-pagehead h1 { margin-bottom: 0; }
.oa-pagehead__lede { margin-top: var(--e3); font-size: var(--fs-16); color: var(--text); max-width: 60em; }

/* --------------------------------------------------------------------------
   10. Brotkrumen
   -------------------------------------------------------------------------- */
.oa-crumbbar { background: var(--weiss); border-bottom: 1px solid var(--linie); padding-block: var(--e2); }
.oa-breadcrumbs { font-size: var(--fs-12); color: var(--text-leise); }
.oa-breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; }
.oa-breadcrumbs li { margin: 0; display: inline-flex; align-items: center; gap: 6px; }
.oa-breadcrumbs li + li::before { content: '›'; color: var(--text-leise); }
.oa-breadcrumbs a { color: var(--text-leise); text-decoration: none; }
.oa-breadcrumbs a:hover { color: var(--akzent-text); text-decoration: underline; }
.oa-breadcrumbs [aria-current="page"] { color: var(--text); }

/* --------------------------------------------------------------------------
   11. Kennzeichnungen und Metazeilen
   -------------------------------------------------------------------------- */
.oa-badge {
  display: inline-block;
  font-family: var(--schrift-eng);
  font-size: var(--fs-11); font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff; background: var(--blau);
  padding: 2px 7px; text-decoration: none; line-height: 1.6;
}
a.oa-badge:hover { background: var(--akzent-text); color: #fff; text-decoration: none; }
.oa-badge--accent { background: var(--akzent-text); }

.oa-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e3); font-size: var(--fs-13); color: var(--text-leise); }
.oa-meta time { font-variant-numeric: tabular-nums; }

.oa-updated {
  text-align: center;
  font-size: var(--fs-12);
  color: var(--text-leise);
  padding-block: var(--e6);
  border-top: 1px solid var(--linie-fein);
}

/* --------------------------------------------------------------------------
   12. Hinweiskästen
   -------------------------------------------------------------------------- */
.oa-notice {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-left: 5px solid var(--blau);
  padding: var(--e4) var(--e5);
  margin-block: var(--e6);
}
.oa-notice__title {
  display: flex; align-items: center; gap: var(--e2);
  font-size: var(--fs-15); font-weight: 700; color: var(--blau);
  margin: 0 0 var(--e2);
}
.oa-notice__title svg { width: 16px; height: 16px; flex: none; }
.oa-notice > p { font-size: var(--fs-14); }
.oa-notice > p:last-child { margin-bottom: 0; }

.oa-notice--info { border-left-color: var(--blau-hell); }
.oa-notice--warning { border-left-color: var(--fehler); background: #fdf3f3; border-color: #eed6d6; }
.oa-notice--warning .oa-notice__title { color: var(--fehler); }
.oa-notice--legal { border-left-color: var(--linie); background: var(--flaeche); font-size: var(--fs-14); }
.oa-notice--legal .oa-notice__title { color: var(--text-stark); font-size: var(--fs-12); letter-spacing: 0.1em; text-transform: uppercase; }
.oa-notice--critical { border: 3px solid var(--fehler); border-left-width: 3px; background: var(--weiss); padding: var(--e5) var(--e6); }
.oa-notice--critical .oa-notice__title { color: var(--fehler); font-size: var(--fs-h3); }

/* Rot gerahmter Hilfekasten der Startseite */
.oa-hilfe {
  border: 3px solid var(--akzent);
  padding: var(--e6);
  margin-block: var(--e8);
}
.oa-hilfe h2 { color: var(--blau); margin-bottom: var(--e4); }
.oa-hilfe p { font-size: var(--fs-14); }
.oa-hilfe a { font-weight: 700; }

/* Graue Kachel („Hinweisportal“-Muster) */
.oa-tafel {
  background: var(--flaeche);
  padding: var(--e8) var(--e6);
  margin-block: var(--e8);
  text-align: center;
}
.oa-tafel__title {
  font-family: var(--schrift-eng);
  font-size: var(--fs-24); font-weight: 700;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--blau); margin-bottom: var(--e5);
}
.oa-tafel__body { text-align: left; max-width: 34em; margin-inline: auto; }
.oa-tafel__body ul { margin-bottom: var(--e4); }
.oa-tafel__body li { font-size: var(--fs-14); }
.oa-tafel__actions { margin-top: var(--e5); }

/* Begriffsdefinition */
.oa-definition { border: 1px solid var(--linie); border-top: 4px solid var(--blau-hell); background: var(--weiss); padding: var(--e4) var(--e5); margin-block: var(--e6); }
.oa-definition__label { font-size: var(--fs-11); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-leise); margin-bottom: var(--e1); }
.oa-definition__term { font-size: var(--fs-18); font-weight: 700; color: var(--blau); margin: 0 0 var(--e2); }
.oa-definition__body { font-size: var(--fs-14); margin: 0; }

.oa-article blockquote, .oa-quote {
  margin: var(--e6) 0; padding: var(--e2) 0 var(--e2) var(--e5);
  border-left: 4px solid var(--blau-hell);
  font-size: var(--fs-16); color: var(--blau);
}
.oa-article blockquote cite, .oa-quote cite { display: block; margin-top: var(--e2); font-style: normal; font-size: var(--fs-13); color: var(--text-leise); }

/* --------------------------------------------------------------------------
   13. Tabellen
   -------------------------------------------------------------------------- */
.oa-table-wrap { margin-block: var(--e6); overflow-x: auto; border: 1px solid var(--linie); }
.oa-table { width: 100%; min-width: 30rem; font-size: var(--fs-14); background: var(--weiss); }
.oa-table caption {
  caption-side: top; text-align: left;
  padding: var(--e3) var(--e4);
  font-size: var(--fs-12); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: #fff; background: var(--blau);
}
.oa-table th, .oa-table td { padding: 8px var(--e4); text-align: left; vertical-align: top; border-bottom: 1px solid var(--linie-fein); }
.oa-table thead th {
  background: var(--flaeche-2); color: var(--blau);
  font-weight: 700; font-size: var(--fs-13);
  border-bottom: 2px solid var(--linie); white-space: nowrap;
}
.oa-table tbody tr:nth-child(even) { background: #fafafb; }
.oa-table tbody tr:last-child th, .oa-table tbody tr:last-child td { border-bottom: 0; }
.oa-table th[scope="row"] { font-weight: 700; color: var(--text-stark); }
.oa-table-caption { margin-top: -18px; margin-bottom: var(--e6); font-size: var(--fs-12); color: var(--text-leise); }

/* --------------------------------------------------------------------------
   14. Akkordeon
   -------------------------------------------------------------------------- */
.oa-accordion { border-top: 1px solid var(--linie); margin-block: var(--e4); }
.oa-accordion__item { border-bottom: 1px solid var(--linie); }
.oa-accordion__trigger {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e4);
  width: 100%; padding: var(--e3) 0;
  background: none; border: 0; text-align: left;
  font-size: var(--fs-15); font-weight: 500; line-height: 1.4; color: var(--blau);
}
.oa-accordion__trigger:hover { color: var(--akzent-text); }
.oa-accordion__icon {
  flex: none; position: relative; width: 18px; height: 18px; margin-top: 2px;
  background: var(--blau);
}
.oa-accordion__icon::before, .oa-accordion__icon::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  background: #fff; transform: translate(-50%, -50%); transition: opacity 0.15s;
}
.oa-accordion__icon::before { width: 9px; height: 2px; }
.oa-accordion__icon::after  { width: 2px; height: 9px; }
.oa-accordion__trigger:hover .oa-accordion__icon { background: var(--akzent-text); }
.oa-accordion__trigger[aria-expanded="true"] .oa-accordion__icon::after { opacity: 0; }
.oa-accordion__panel { padding: 0 var(--e8) var(--e4) 0; }
.oa-accordion__panel[hidden] { display: none; }
.oa-accordion__panel > *:first-child { margin-top: 0; }
.oa-accordion__panel p, .oa-accordion__panel li { font-size: var(--fs-14); }
.oa-accordion-controls { display: flex; justify-content: flex-end; margin-bottom: var(--e1); }

/* --------------------------------------------------------------------------
   15. Startseite: Meldungsreihe, Schnellfinder, Kacheln
   -------------------------------------------------------------------------- */
.oa-newsrow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
}
.oa-newsrow__item { padding: var(--e5) var(--e5) var(--e5) 0; border-right: 1px solid var(--linie-fein); }
.oa-newsrow__item:last-child { border-right: 0; }
.oa-newsrow__item + .oa-newsrow__item { padding-left: var(--e5); }
.oa-newsrow__date { display: block; font-size: var(--fs-12); color: var(--text-leise); margin-bottom: var(--e2); font-variant-numeric: tabular-nums; }
.oa-newsrow__title { font-size: var(--fs-14); font-weight: 500; line-height: 1.4; margin: 0; }
.oa-newsrow__title a { color: var(--blau); text-decoration: none; }
.oa-newsrow__title a:hover { color: var(--akzent-text); text-decoration: underline; }

/* Seitenkasten mit blauer Titelleiste */
.oa-box { border: 1px solid var(--linie); background: var(--weiss); margin-bottom: var(--e5); }
.oa-box__title {
  margin: 0;
  background: var(--blau); color: #fff;
  font-family: var(--schrift-eng);
  font-size: var(--fs-14); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 9px var(--e4);
}
.oa-box__body { padding: var(--e4); }
.oa-box__list { list-style: none; margin: 0; padding: 0; }
.oa-box__list li { margin: 0; border-bottom: 1px solid var(--linie-fein); }
.oa-box__list li:last-child { border-bottom: 0; }
.oa-box__list a {
  display: block; padding: 10px var(--e4);
  font-size: var(--fs-14); color: var(--blau); text-decoration: none;
}
.oa-box__list a:hover { background: var(--flaeche); color: var(--akzent-text); text-decoration: underline; }

/* Kachelreihe */
.oa-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; }
.oa-tile {
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 130px; padding: var(--e5);
  background: var(--blau); color: #fff; text-decoration: none;
  transition: background-color 0.12s;
}
.oa-tile:hover { background: var(--blau-dunkel); color: #fff; text-decoration: none; }
.oa-tile__title { font-family: var(--schrift-eng); font-size: var(--fs-18); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.oa-tile__desc { font-size: var(--fs-13); color: rgba(255,255,255,0.94); margin-top: var(--e1); }

/* Themenliste (Textreihen mit Trennlinien) */
.oa-topics { border-top: 1px solid var(--linie); }
.oa-topics__item { border-bottom: 1px solid var(--linie-fein); }
.oa-topics__link {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e4);
  padding: 10px 0; text-decoration: none; color: var(--blau); font-size: var(--fs-15);
}
.oa-topics__link:hover { color: var(--akzent-text); text-decoration: underline; }
.oa-topics__link::after { content: '›'; flex: none; color: var(--text-leise); }
.oa-topics__desc { display: block; font-size: var(--fs-13); color: var(--text-leise); }

.oa-infogrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--e6); }
.oa-infogrid__item { border-top: 3px solid var(--blau); padding-top: var(--e3); }
.oa-infogrid__title { font-size: var(--fs-16); margin-bottom: var(--e2); }
.oa-infogrid__item p, .oa-infogrid__item address { font-size: var(--fs-14); font-style: normal; }
.oa-infogrid__icon { display: none; }

.oa-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e6); }
.oa-cta__text { max-width: 46em; }
.oa-cta__text h2 { margin-bottom: var(--e2); }
.oa-cta__text p { color: rgba(255,255,255,0.88); }
.oa-cta__actions { display: flex; flex-wrap: wrap; gap: var(--e3); }

/* --------------------------------------------------------------------------
   16. Beitragslisten
   -------------------------------------------------------------------------- */
.oa-postlist { border-top: 1px solid var(--linie); }
.oa-postlist__item {
  display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: var(--e5);
  padding-block: var(--e5); border-bottom: 1px solid var(--linie-fein);
}
.oa-postlist__item--nothumb { grid-template-columns: minmax(0, 1fr); }
.oa-postlist__media { border: 1px solid var(--linie); background: var(--flaeche); aspect-ratio: 3 / 2; overflow: hidden; }
.oa-postlist__media img { width: 100%; height: 100%; object-fit: cover; }
.oa-postlist__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); margin-bottom: var(--e2); }
.oa-postlist__date { font-size: var(--fs-12); color: var(--text-leise); font-variant-numeric: tabular-nums; }
.oa-postlist__title { font-size: var(--fs-18); font-weight: 500; line-height: 1.35; margin-bottom: var(--e2); }
.oa-postlist__title a { color: var(--blau); text-decoration: none; }
.oa-postlist__title a:hover { color: var(--akzent-text); text-decoration: underline; }
.oa-postlist__excerpt { font-size: var(--fs-14); margin-bottom: var(--e2); }

.oa-newsgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e6); }
.oa-newscard { display: flex; flex-direction: column; border-top: 3px solid var(--blau); padding-top: var(--e3); }
.oa-newscard__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); margin-bottom: var(--e2); }
.oa-newscard__date { font-size: var(--fs-12); color: var(--text-leise); font-variant-numeric: tabular-nums; }
.oa-newscard__title { font-size: var(--fs-16); font-weight: 500; line-height: 1.4; margin-bottom: var(--e2); }
.oa-newscard__title a { color: var(--blau); text-decoration: none; }
.oa-newscard__title a:hover { color: var(--akzent-text); text-decoration: underline; }
.oa-newscard__excerpt { font-size: var(--fs-14); margin-bottom: var(--e3); flex: 1; }
.oa-newscard__more { margin-top: auto; }

.oa-filters { display: flex; flex-wrap: wrap; gap: 1px; margin-bottom: var(--e5); }
.oa-filters__link {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--e3);
  font-size: var(--fs-13); font-weight: 500; color: var(--blau); text-decoration: none;
  background: var(--flaeche); border: 1px solid var(--linie);
}
.oa-filters__link:hover { background: var(--flaeche-2); color: var(--akzent-text); text-decoration: none; }
.oa-filters__link.is-active { background: var(--blau); border-color: var(--blau); color: #fff; font-weight: 700; }

.oa-pagination { margin-top: var(--e6); }
.oa-pagination .nav-links, .oa-pagination__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.oa-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; min-height: 34px; padding: 0 var(--e2);
  font-size: var(--fs-14); color: var(--blau); text-decoration: none;
  background: var(--weiss); border: 1px solid var(--linie);
  font-variant-numeric: tabular-nums;
}
.oa-pagination a.page-numbers:hover { background: var(--flaeche); color: var(--akzent-text); text-decoration: none; }
.oa-pagination .page-numbers.current { background: var(--blau); border-color: var(--blau); color: #fff; font-weight: 700; }
.oa-pagination .page-numbers.dots { border-color: transparent; background: none; }

/* --------------------------------------------------------------------------
   17. Inhaltslayout
   -------------------------------------------------------------------------- */
.oa-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--spalte-neben);
  gap: var(--e10);
  align-items: start;
  padding-block: var(--e8) var(--e12);
}
.oa-layout__main { min-width: 0; }
.oa-layout__aside { min-width: 0; position: sticky; top: calc(var(--kopf-hoehe) + 16px); }
.oa-layout--single { grid-template-columns: minmax(0, 1fr); }
.oa-archive { max-width: 56rem; padding-block: var(--e8) var(--e12); }

.oa-article__header { margin-bottom: var(--e5); }
.oa-article__title { margin-block: var(--e2) var(--e4); }
.oa-article__lede {
  font-size: var(--fs-18); font-weight: 300; line-height: 1.5;
  color: var(--text-stark); margin-bottom: var(--e4);
}
.oa-article__meta {
  display: flex; flex-wrap: wrap; gap: var(--e2) var(--e5);
  padding-block: var(--e2);
  border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie);
  font-size: var(--fs-12); color: var(--text-leise);
}
.oa-article__meta dl { display: flex; gap: 4px; margin: 0; }
.oa-article__meta dt { font-weight: 400; }
.oa-article__meta dd { margin: 0; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }

.oa-article__figure { margin-block: var(--e5); }
.oa-article__figure img { width: 100%; border: 1px solid var(--linie); }
.oa-article__figure figcaption { margin-top: var(--e2); font-size: var(--fs-12); color: var(--text-leise); }

/* Fließtext */
.oa-prose { font-size: var(--fs-16); line-height: 1.6; }
.oa-prose > * { max-width: var(--lesebreite); }
.oa-prose > p,
.oa-prose > .oa-table-wrap, .oa-prose > figure, .oa-prose > .alignwide { max-width: none; }
.oa-prose h2 { margin-top: var(--e8); margin-bottom: var(--e3); padding-bottom: var(--e2); border-bottom: 1px solid var(--linie); scroll-margin-top: calc(var(--kopf-hoehe) + 16px); }
.oa-prose h3 { margin-top: var(--e6); margin-bottom: var(--e2); scroll-margin-top: calc(var(--kopf-hoehe) + 16px); }
.oa-prose h4 { margin-top: var(--e5); margin-bottom: var(--e2); }
.oa-prose > *:first-child { margin-top: 0; }
.oa-prose p { margin-bottom: var(--e4); }
.oa-prose .wp-block-image,
.oa-prose > figure { text-align: center; }
.oa-prose .wp-block-image img,
.oa-prose figure img {
  margin-inline: auto;
  border-radius: 5px;
}
.oa-prose ul, .oa-prose ol { margin-bottom: var(--e4); padding-left: 22px; }
.oa-prose li { margin-bottom: 6px; }
.oa-prose li::marker { color: var(--blau-hell); }
.oa-prose strong { font-weight: 700; color: var(--text-stark); }
.oa-prose a { font-weight: 500; text-decoration: underline; }

/* Initial im ersten Absatz — Merkmal klassischer Behördenseiten */
.oa-dropcap > p:first-of-type::first-letter,
.oa-prose.has-dropcap > p:first-of-type::first-letter {
  float: left;
  font-size: 3.4em;
  line-height: 0.86;
  font-weight: 300;
  color: var(--blau);
  padding-right: 8px;
  margin-top: 4px;
}

.oa-anchor { float: left; margin-left: -0.9em; padding-right: 0.25em; opacity: 0; text-decoration: none; color: var(--blau-hell); font-weight: 400; }
h2:hover > .oa-anchor, h3:hover > .oa-anchor, .oa-anchor:focus-visible { opacity: 1; }
@media (max-width: 1100px) { .oa-anchor { display: none; } }

/* --------------------------------------------------------------------------
   18. Inhaltsverzeichnis und Seitenspalte
   -------------------------------------------------------------------------- */
.oa-toc { border: 1px solid var(--linie); background: var(--weiss); margin-bottom: var(--e5); }
.oa-toc__title {
  margin: 0; background: var(--blau); color: #fff;
  font-family: var(--schrift-eng); font-size: var(--fs-13); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; padding: 8px var(--e4);
}
.oa-toc__list { list-style: none; margin: 0; padding: 0; }
.oa-toc__list li { margin: 0; }
.oa-toc__list a {
  display: block; padding: 8px var(--e4);
  font-size: var(--fs-13); line-height: 1.4; color: var(--text); text-decoration: none;
  border-bottom: 1px solid var(--linie-fein); border-left: 3px solid transparent;
}
.oa-toc__list a:hover { background: var(--flaeche); color: var(--akzent-text); }
.oa-toc__list a.is-active { border-left-color: var(--akzent); color: var(--blau); font-weight: 700; background: var(--flaeche); }
.oa-toc__sub { list-style: none; margin: 0; padding-left: var(--e4); }
.oa-toc__sub li { list-style: none; }
.oa-toc__sub li::marker { content: none; }
.oa-toc__list li:last-child > a { border-bottom: 0; }

.oa-toc-mobile { display: none; border: 1px solid var(--linie); margin-bottom: var(--e5); }
.oa-toc-mobile > summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e4);
  padding: 10px var(--e4); min-height: 44px;
  background: var(--blau); color: #fff;
  font-family: var(--schrift-eng); font-size: var(--fs-13); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; list-style: none;
}
.oa-toc-mobile > summary::-webkit-details-marker { display: none; }
.oa-toc-mobile > summary::after {
  content: ''; width: 9px; height: 9px; flex: none;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px); transition: transform 0.18s;
}
.oa-toc-mobile[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }

.oa-aside-block { margin-bottom: var(--e5); border: 1px solid var(--linie); }
.oa-aside-block__title {
  margin: 0; background: var(--blau-hell); color: #fff;
  font-family: var(--schrift-eng); font-size: var(--fs-13); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; padding: 8px var(--e4);
}
.oa-aside-list { list-style: none; margin: 0; padding: 0; }
.oa-aside-list li { margin: 0; border-bottom: 1px solid var(--linie-fein); }
.oa-aside-list li:last-child { border-bottom: 0; }
.oa-aside-list a { display: block; padding: 9px var(--e4); font-size: var(--fs-14); color: var(--blau); text-decoration: none; }
.oa-aside-list a:hover { background: var(--flaeche); color: var(--akzent-text); text-decoration: underline; }
.oa-aside-list span { display: block; font-size: var(--fs-12); color: var(--text-leise); padding: 0 var(--e4) 8px; }

.oa-aside-help { padding: var(--e4); }
.oa-aside-help p { font-size: var(--fs-13); }
.oa-aside-help__phone {
  display: block; font-size: var(--fs-20); font-weight: 700; color: var(--akzent-text);
  text-decoration: none; font-variant-numeric: tabular-nums; margin-bottom: var(--e1);
}

/* --------------------------------------------------------------------------
   19. Artikelabschluss
   -------------------------------------------------------------------------- */
.oa-related { padding-block: var(--e8); border-top: 1px solid var(--linie); background: var(--flaeche); }
.oa-related__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e6); }
.oa-related .oa-newscard { background: var(--weiss); border-top-color: var(--blau-hell); padding: var(--e3) var(--e4) var(--e4); border-top-width: 3px; }

.oa-article__footer { margin-top: var(--e8); padding-top: var(--e4); border-top: 1px solid var(--linie); }
.oa-tags { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; }
.oa-tags__label { font-size: var(--fs-13); color: var(--text-leise); }

.oa-postnav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: var(--e8); }
.oa-postnav__link { display: block; text-decoration: none; padding: var(--e3) var(--e4); border: 1px solid var(--linie); background: var(--weiss); }
.oa-postnav__link:hover { background: var(--flaeche); text-decoration: none; }
.oa-postnav__label { display: block; font-size: var(--fs-11); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-leise); margin-bottom: 2px; }
.oa-postnav__title { font-size: var(--fs-14); font-weight: 500; color: var(--blau); line-height: 1.4; }
.oa-postnav__link--next { text-align: right; grid-column: 2; }

/* --------------------------------------------------------------------------
   20. Formulare
   -------------------------------------------------------------------------- */
.oa-form { display: grid; gap: var(--e4); max-width: 40em; }
.oa-field { display: grid; gap: var(--e1); }
.oa-field__label { font-size: var(--fs-14); font-weight: 700; color: var(--text-stark); }
.oa-field__label .oa-req { color: var(--fehler); margin-left: 2px; }
.oa-field__hint { font-size: var(--fs-12); color: var(--text-leise); }
.oa-input, .oa-textarea, .oa-select {
  width: 100%; padding: 8px 12px; min-height: 38px;
  font-size: var(--fs-14); color: var(--text);
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius);
}
.oa-textarea { min-height: 140px; resize: vertical; line-height: 1.5; }
.oa-input:focus-visible, .oa-textarea:focus-visible, .oa-select:focus-visible { border-color: var(--blau); }
.oa-checkbox { display: flex; gap: var(--e2); align-items: flex-start; font-size: var(--fs-14); }
.oa-checkbox input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--blau); }

.oa-contact { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--e10); align-items: start; }
.oa-contact__side { border: 1px solid var(--linie); padding: var(--e5); background: var(--flaeche); }
.oa-contact__side h2 { font-size: var(--fs-16); margin-bottom: var(--e3); }
.oa-formnotice { padding: var(--e3) var(--e4); margin-bottom: var(--e5); font-size: var(--fs-14); border: 1px solid; }
.oa-formnotice--ok { background: #f0f6f2; border-color: #bfd9c9; color: #1b5e3a; }
.oa-formnotice--error { background: #fdf3f3; border-color: #eed6d6; color: var(--fehler); }
.oa-honeypot { position: absolute; left: -9999px; }

.oa-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px var(--e4); margin: 0; font-size: var(--fs-14); }
.oa-dl dt { font-weight: 700; color: var(--text-stark); }
.oa-dl dd { margin: 0; }

/* --------------------------------------------------------------------------
   21. Suche, Fehlerseite, Sonstiges
   -------------------------------------------------------------------------- */
.oa-results { border-top: 1px solid var(--linie); margin-top: var(--e5); }
.oa-results__item { padding-block: var(--e4); border-bottom: 1px solid var(--linie-fein); }
.oa-results__url { font-size: var(--fs-12); color: var(--text-leise); margin-bottom: 2px; word-break: break-all; }
.oa-results__title { font-size: var(--fs-18); font-weight: 500; margin-bottom: var(--e1); }
.oa-results__title a { color: var(--blau); text-decoration: none; }
.oa-results__title a:hover { color: var(--akzent-text); text-decoration: underline; }
.oa-results__excerpt { font-size: var(--fs-14); margin: 0; }
.oa-results mark { background: #ffeeba; color: var(--text-stark); font-weight: 700; }
.oa-results__count { font-size: var(--fs-14); color: var(--text-leise); }

.oa-404 { padding-block: var(--e12); }
.oa-404__code { font-size: 64px; font-weight: 300; color: var(--blau-hell); line-height: 1; }
.oa-empty { padding: var(--e6); border: 1px solid var(--linie); background: var(--flaeche); font-size: var(--fs-14); }
.oa-downloads { list-style: none; margin: var(--e5) 0; padding: 0; border-top: 1px solid var(--linie); }
.oa-downloads li { margin: 0; border-bottom: 1px solid var(--linie-fein); }
.oa-downloads a { display: flex; align-items: center; gap: var(--e3); padding: var(--e3) 0; text-decoration: none; color: var(--blau); font-weight: 500; }
.oa-downloads a:hover { color: var(--akzent-text); }

.oa-faq-group { margin-bottom: var(--e10); }
.oa-faq-group__title { font-size: var(--fs-h2); padding-bottom: var(--e2); border-bottom: 2px solid var(--blau); margin-bottom: var(--e2); scroll-margin-top: calc(var(--kopf-hoehe) + 16px); }
.oa-faq-group__desc { color: var(--text-leise); font-size: var(--fs-14); margin-bottom: var(--e2); }
.oa-faq-jump { display: flex; flex-wrap: wrap; gap: 1px; padding: var(--e4); background: var(--flaeche); border: 1px solid var(--linie); margin-bottom: var(--e8); }
.oa-faq-jump__title { width: 100%; font-family: var(--schrift-eng); font-size: var(--fs-12); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blau); margin: 0 0 var(--e2); }

/* Blockeditor: <details> */
.wp-block-details.oa-details, .oa-prose > details { border-bottom: 1px solid var(--linie); padding: 0; margin: 0; }
.oa-prose > details:first-of-type, .wp-block-details.oa-details:first-of-type { border-top: 1px solid var(--linie); }
.wp-block-details.oa-details > summary, .oa-prose > details > summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e4);
  padding: var(--e3) 0; font-size: var(--fs-15); font-weight: 500; line-height: 1.4;
  color: var(--blau); cursor: pointer; list-style: none;
}
.wp-block-details.oa-details > summary::-webkit-details-marker, .oa-prose > details > summary::-webkit-details-marker { display: none; }
.wp-block-details.oa-details > summary::after, .oa-prose > details > summary::after {
  content: '+'; flex: none; width: 18px; height: 18px; margin-top: 2px;
  background: var(--blau); color: #fff; font-size: 14px; line-height: 18px; text-align: center; font-weight: 700;
}
.wp-block-details.oa-details[open] > summary::after, .oa-prose > details[open] > summary::after { content: '–'; }
.wp-block-details.oa-details > *:not(summary), .oa-prose > details > *:not(summary) { font-size: var(--fs-14); margin-bottom: var(--e3); padding-right: var(--e8); }
.wp-block-details.oa-details > *:last-child, .oa-prose > details > *:last-child { margin-bottom: var(--e4); }

.oa-legal-source { margin-top: var(--e2) !important; font-size: var(--fs-12) !important; color: var(--text-leise) !important; }
.oa-prose .wp-block-group.oa-notice > p:first-child, .oa-prose .wp-block-group.oa-definition > p:first-child { margin-top: 0; }
.oa-prose .oa-notice p, .oa-prose .oa-definition p { font-size: var(--fs-14); line-height: 1.5; }
.oa-prose .oa-notice p:last-child, .oa-prose .oa-definition p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   22. Fußbereich
   -------------------------------------------------------------------------- */
.oa-footer { background: var(--blau); color: rgba(255,255,255,0.82); font-size: var(--fs-14); }
.oa-footer__top { padding-block: var(--e10) var(--e8); }
.oa-footer__grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: var(--e8) var(--e6); }
.oa-footer__brand { max-width: 24em; }
.oa-footer__brand .oa-brand { color: #fff; }
.oa-footer__brand .oa-brand__name { color: #fff; }
.oa-footer__brand .oa-brand__sub { color: rgba(255,255,255,0.78); }
.oa-footer__desc { margin-top: var(--e4); font-size: var(--fs-13); line-height: 1.6; color: rgba(255,255,255,0.8); }
.oa-footer__title {
  font-family: var(--schrift-eng);
  font-size: var(--fs-12); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: #fff; margin: 0 0 var(--e3); padding-bottom: var(--e2);
  border-bottom: 1px solid rgba(255,255,255,0.25);
}
.oa-footer__list { list-style: none; margin: 0; padding: 0; }
.oa-footer__list li { margin-bottom: 6px; }
.oa-footer__list a, .oa-footer__desc a { color: rgba(255,255,255,0.85); text-decoration: none; font-size: var(--fs-13); }
.oa-footer__list a:hover, .oa-footer__desc a:hover { color: #fff; text-decoration: underline; }

.oa-footer__help {
  margin-top: var(--e8); padding: var(--e4) var(--e5);
  border: 1px solid rgba(255,255,255,0.25); border-left: 5px solid var(--akzent-hell);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e5);
  font-size: var(--fs-14);
}
.oa-footer__help strong { color: #fff; }
.oa-footer__help a { color: #fff; font-weight: 700; text-decoration: underline; font-variant-numeric: tabular-nums; }

.oa-footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.2);
  padding-block: var(--e4);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--e2) var(--e4);
  font-size: var(--fs-11); color: rgba(255,255,255,0.65);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.oa-footer__legal { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e4); list-style: none; margin: 0; padding: 0; }
.oa-footer__legal li + li::before { content: '|'; margin-right: var(--e4); color: rgba(255,255,255,0.35); }
.oa-footer__legal a { color: rgba(255,255,255,0.8); text-decoration: none; }
.oa-footer__legal a:hover { color: #fff; text-decoration: underline; }

.oa-totop {
  position: fixed; right: var(--e5); bottom: var(--e5); z-index: 90;
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--blau); border: 0; color: #fff;
  opacity: 0; visibility: hidden; transition: opacity 0.18s, visibility 0.18s;
}
.oa-totop.is-visible { opacity: 1; visibility: visible; }
.oa-totop:hover { background: var(--akzent-text); }

/* WordPress-Standardklassen */
.alignleft { float: left; margin: 0 var(--e5) var(--e3) 0; }
.alignright { float: right; margin: 0 0 var(--e3) var(--e5); }
.aligncenter { margin-inline: auto; }
.wp-caption-text, .wp-block-image figcaption { font-size: var(--fs-12); color: var(--text-leise); margin-top: var(--e2); }

/* --------------------------------------------------------------------------
   23. Responsiv
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .oa-nav__link { padding-inline: 10px; font-size: var(--fs-14); }
  .oa-layout { gap: var(--e6); }
}

@media (max-width: 1024px) {
  :root { --kopf-hoehe: 64px; }
  .oa-brand__logo { height: 44px; }
  .oa-footer__brand .oa-brand__logo { height: 44px; }
  .oa-brand__sub { display: none; }
  .oa-nav, .oa-header__search-toggle { display: none; }
  .oa-burger { display: inline-flex; }
  .oa-layout { grid-template-columns: minmax(0, 1fr); }
  .oa-layout__aside { position: static; }
  .oa-layout__aside .oa-toc { display: none; }
  .oa-toc-mobile { display: block; }
  .oa-newsrow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oa-newsrow__item { border-right: 0; }
  .oa-newsrow__item:nth-child(odd) { padding-left: 0; padding-right: var(--e5); border-right: 1px solid var(--linie-fein); }
  .oa-newsrow__item:nth-child(even) { padding-left: var(--e5); }
  .oa-newsgrid, .oa-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oa-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oa-contact { grid-template-columns: minmax(0, 1fr); gap: var(--e8); }
  .oa-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oa-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 782px) {
  .oa-container { padding-inline: var(--e4); }
  .oa-topbar__claim { display: none; }
  .oa-topbar__inner { justify-content: flex-end; }
  .oa-newsrow { grid-template-columns: minmax(0, 1fr); }
  .oa-newsrow__item, .oa-newsrow__item:nth-child(odd), .oa-newsrow__item:nth-child(even) {
    padding: var(--e4) 0; border-right: 0; border-bottom: 1px solid var(--linie-fein);
  }
  .oa-newsrow__item:last-child { border-bottom: 0; }
  .oa-newsgrid, .oa-related__grid { grid-template-columns: minmax(0, 1fr); gap: var(--e5); }
  .oa-postlist__item { grid-template-columns: minmax(0, 1fr); gap: var(--e3); }
  .oa-postnav { grid-template-columns: minmax(0, 1fr); }
  .oa-postnav__link--next { grid-column: 1; text-align: left; }
  .oa-tafel { padding: var(--e5) var(--e4); }
  .oa-tafel__title { font-size: var(--fs-18); letter-spacing: 0.18em; }
  .oa-hilfe { padding: var(--e4); border-width: 2px; }
  .oa-prose { font-size: var(--fs-15); }
  .oa-dl { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
  .oa-dl dd { margin-bottom: var(--e2); }
  .oa-footer__grid { grid-template-columns: minmax(0, 1fr); gap: var(--e6); }
  .oa-hero__inner { padding-block: var(--e8); min-height: 0; }
  .oa-brand__logo { height: 38px; }
  .oa-hero--bild {
    background-image: var(--hero-bild-klein, var(--hero-bild));
    background-position: 72% center;
  }
  .oa-hero--bild::before { background: rgba(10, 42, 68, 0.93); }
  .oa-totop { display: none; }
  .oa-section { padding-block: var(--e8); }
  .oa-tiles { grid-template-columns: minmax(0, 1fr); }
  .oa-tile { min-height: 0; }
}

@media (max-width: 480px) {
  .oa-hero__actions .oa-btn, .oa-cta__actions .oa-btn { width: 100%; justify-content: center; }
  .oa-searchform { flex-direction: column; }
  .oa-searchform__submit { width: 100%; justify-content: center; }
  .oa-dropcap > p:first-of-type::first-letter, .oa-prose.has-dropcap > p:first-of-type::first-letter { font-size: 2.8em; }
}

/* --------------------------------------------------------------------------
   24. Bewegungsreduktion, Kontrast, Druck
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

@media (prefers-contrast: more) {
  :root { --linie: #8a8f96; --text: #33363f; --text-leise: #4a4e58; }
  a { text-decoration: underline; }
}

@media print {
  .oa-topbar, .oa-header, .oa-footer, .oa-toc, .oa-toc-mobile, .oa-related,
  .oa-totop, .oa-filters, .oa-pagination, .oa-postnav, .oa-mobile-nav,
  .oa-skip-link, .oa-tiles, .oa-newsrow { display: none !important; }
  body { font-size: 10pt; color: #000; background: #fff; }
  .oa-layout { grid-template-columns: 1fr; padding: 0; }
  a { text-decoration: underline; color: #000; }
  .oa-prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #444; }
  h1, h2, h3 { page-break-after: avoid; color: #000; }
  p, li, table { page-break-inside: avoid; }
}

/* Fußraster passt sich der Zahl gefüllter Spalten an — leere Menüs sollen
   keine Lücken hinterlassen. */
.oa-footer__grid--0 { grid-template-columns: minmax(0, 1fr); }
.oa-footer__grid--0 .oa-footer__brand { max-width: 46em; }
.oa-footer__grid--1 { grid-template-columns: 1.5fr 1fr; }
.oa-footer__grid--2 { grid-template-columns: 1.5fr repeat(2, 1fr); }

@media (max-width: 1024px) {
  .oa-footer__grid--1, .oa-footer__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 782px) {
  .oa-footer__grid--1, .oa-footer__grid--2 { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   25. Startseite: Inhaltsblöcke
   -------------------------------------------------------------------------- */
.oa-abschnitt { margin-top: var(--e12); scroll-margin-top: calc(var(--kopf-hoehe) + 16px); }
.oa-abschnitt > h2 {
  font-size: var(--fs-h2);
  margin: 0 0 var(--e5);
  padding-bottom: var(--e2);
  border-bottom: 2px solid var(--blau);
  scroll-margin-top: calc(var(--kopf-hoehe) + 16px);
}

/* Themenraster — Haarlinien über die Rasterlücke, wie in Verwaltungsdrucksachen */
.oa-themen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--linie);
  border: 1px solid var(--linie);
}
.oa-thema { background: var(--weiss); padding: var(--e5); }
.oa-thema__title {
  display: inline-block;
  font-size: var(--fs-h3);
  font-weight: 500;
  color: var(--blau);
  margin: 0 0 var(--e3);
  padding-bottom: var(--e2);
  border-bottom: 2px solid var(--akzent);
}
.oa-thema p { font-size: var(--fs-14); margin: 0; }

/* Zielgruppen */
.oa-zielgruppen { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--e5); }
.oa-zielgruppe { border-top: 3px solid var(--blau); padding-top: var(--e3); }
.oa-zielgruppe p { font-size: var(--fs-14); margin: 0; }

/* Arbeitsgrundsätze */
.oa-grundsaetze { border: 1px solid var(--linie); background: var(--flaeche); padding: var(--e6); }
.oa-grundsaetze p { font-size: var(--fs-15); }
.oa-grundsaetze__betont {
  margin: var(--e4) 0 0;
  padding-left: var(--e4);
  border-left: 4px solid var(--akzent);
  color: var(--text-stark);
  font-weight: 500;
}

/* Hilfekasten in der Seitenspalte */
.oa-box--hilfe .oa-box__title { background: var(--akzent-text); }
.oa-box__telefon {
  display: block;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--akzent-text);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  margin: 2px 0 var(--e2);
}
.oa-box__telefon:hover { color: var(--akzent-dunkel); text-decoration: underline; }
.oa-box__body p { font-size: var(--fs-13); }
.oa-box__body p + p { margin-top: var(--e3); }

/* Einspaltig stehen die Sprungmarken hinter dem Inhalt und helfen nicht mehr. */
@media (max-width: 1024px) {
  .oa-box--sprungmarken { display: none; }
}

@media (max-width: 782px) {
  .oa-abschnitt { margin-top: var(--e10); }
  .oa-themen { grid-template-columns: minmax(0, 1fr); }
  .oa-grundsaetze { padding: var(--e4); }
  .oa-box__telefon { font-size: 24px; }
}

/* Externe Verweise kennzeichnen — auf Behördenseiten üblich und erwartet. */
.oa-extern::after {
  content: '\2197';
  display: inline-block;
  margin-left: 0.15em;
  font-size: 0.82em;
  line-height: 1;
  text-decoration: none;
  vertical-align: baseline;
}
.oa-box__list .oa-extern { padding-right: 0; }

/* Klebende Seitenspalte: auf niedrigen Fenstern wäre der untere Teil sonst
   dauerhaft unerreichbar. Der Scrollbalken erscheint nur, wenn nötig. */
@media (min-width: 1025px) {
  .oa-layout__aside {
    max-height: calc(100vh - var(--kopf-hoehe) - 32px);
    overflow-y: auto;
    scrollbar-width: thin;
  }
}

/* --------------------------------------------------------------------------
   26. Selbsttests
   -------------------------------------------------------------------------- */
.oa-test__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  list-style: none;
  margin: 0 0 var(--e6);
  padding: 0;
}
.oa-test__meta li {
  margin: 0;
  padding: var(--e2) var(--e4);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  font-size: var(--fs-13);
}
.oa-test__meta strong {
  display: block;
  font-size: var(--fs-11);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-leise);
}

.oa-test__einleitung {
  font-size: var(--fs-16);
  line-height: 1.6;
  max-width: var(--lesebreite);
  margin-bottom: var(--e6);
}

/* Testformular */
.oa-test { margin-top: var(--e8); }

.oa-frage {
  border: 1px solid var(--linie);
  border-left: 4px solid var(--blau);
  padding: var(--e5);
  margin: 0 0 var(--e4);
  transition: border-color 0.15s;
}
.oa-frage.is-offen { border-left-color: var(--fehler); background: #fdf3f3; }
.oa-frage.is-richtig { border-left-color: var(--akzent); }
.oa-frage.is-falsch { border-left-color: var(--fehler); }

/* Ein <legend> sitzt normalerweise in der Rahmenlinie und unterbricht sie.
   Als Float wird es zu einem regulären Block innerhalb des Kastens. */
.oa-frage__legende { float: left; width: 100%; padding: 0; margin-bottom: var(--e4); }
.oa-antworten { clear: both; }
.oa-frage__nummer {
  display: block;
  font-size: var(--fs-11);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-leise);
  margin-bottom: var(--e2);
}
.oa-frage__text {
  display: block;
  font-size: var(--fs-16);
  font-weight: 500;
  line-height: 1.45;
  color: var(--blau);
}

.oa-antworten { display: grid; gap: 1px; clear: both; }
.oa-antwort {
  display: flex;
  align-items: flex-start;
  gap: var(--e3);
  padding: 10px var(--e4);
  border: 1px solid var(--linie);
  background: var(--weiss);
  font-size: var(--fs-15);
  cursor: pointer;
  transition: background-color 0.12s, border-color 0.12s;
}
.oa-antwort:hover { background: var(--flaeche); border-color: var(--blau-hell); }
.oa-antwort input {
  width: 18px; height: 18px; flex: none; margin: 2px 0 0;
  accent-color: var(--blau);
}
.oa-antwort:has(input:checked) {
  background: var(--flaeche);
  border-color: var(--blau);
  font-weight: 500;
}
.oa-antwort:has(input:focus-visible) { outline: 2px solid var(--akzent); outline-offset: 1px; }

/* Auflösung im Wissenstest */
.oa-aufloesung {
  margin-top: var(--e4);
  padding: var(--e4);
  background: var(--flaeche);
  border-left: 4px solid var(--blau-hell);
  font-size: var(--fs-14);
}
.oa-aufloesung[hidden] { display: none; }
.oa-aufloesung__urteil { font-weight: 700; color: var(--blau); margin-bottom: var(--e2); }
.oa-frage.is-richtig .oa-aufloesung { border-left-color: var(--akzent); }
.oa-frage.is-richtig .oa-aufloesung__urteil { color: var(--akzent-text); }
.oa-frage.is-falsch .oa-aufloesung { border-left-color: var(--fehler); }
.oa-frage.is-falsch .oa-aufloesung__urteil { color: var(--fehler); }

.oa-test__fehler {
  margin: var(--e4) 0 0;
  padding: var(--e3) var(--e4);
  background: #fdf3f3;
  border: 1px solid #eed6d6;
  color: var(--fehler);
  font-size: var(--fs-14);
  font-weight: 500;
}
.oa-test__fehler[hidden] { display: none; }

.oa-test__aktionen { display: flex; flex-wrap: wrap; gap: var(--e3); margin-top: var(--e6); }

/* Auswertung */
.oa-ergebnisse { margin-top: var(--e10); border-top: 3px solid var(--blau); padding-top: var(--e6); }
.oa-ergebnisse[hidden] { display: none; }
.oa-ergebnisse:focus-visible { outline: 2px solid var(--akzent); outline-offset: 4px; }
.oa-ergebnisse__titel { font-size: var(--fs-h2); margin-bottom: var(--e2); }
.oa-ergebnisse__punkte {
  font-size: var(--fs-16);
  color: var(--text-leise);
  margin-bottom: var(--e5);
  font-variant-numeric: tabular-nums;
}
.oa-ergebnisse__punkte strong { color: var(--blau); font-size: var(--fs-20); }

.oa-ergebnis { border: 1px solid var(--linie); border-left: 5px solid var(--blau-hell); padding: var(--e5); }
.oa-ergebnis[hidden] { display: none; }
.oa-ergebnis__titel { font-size: var(--fs-h3); margin-bottom: var(--e2); }
.oa-ergebnis p { font-size: var(--fs-15); }
.oa-ergebnis--ruhig { border-left-color: var(--akzent); background: #f2f8f7; }
.oa-ergebnis--hinweis { border-left-color: var(--blau); background: var(--flaeche); }
.oa-ergebnis--warnung { border-left-color: var(--fehler); background: #fdf3f3; }
.oa-ergebnis--kritisch { border: 3px solid var(--fehler); background: var(--weiss); }
.oa-ergebnis--kritisch .oa-ergebnis__titel { color: var(--fehler); }

/* Testübersicht */
.oa-testliste { border-top: 1px solid var(--linie); margin-top: var(--e6); }
.oa-testkarte {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: var(--e5);
  align-items: center;
  padding: var(--e5) 0;
  border-bottom: 1px solid var(--linie);
}
.oa-testkarte__nummer {
  margin: 0;
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
  color: var(--blau-hell);
  font-variant-numeric: tabular-nums;
}
.oa-testkarte__titel { font-size: var(--fs-h3); margin-bottom: var(--e1); }
.oa-testkarte__titel a { color: var(--blau); text-decoration: none; }
.oa-testkarte__titel a:hover { color: var(--akzent-text); text-decoration: underline; }
.oa-testkarte__kurz { font-size: var(--fs-14); margin-bottom: var(--e2); }
.oa-testkarte__meta {
  display: flex; flex-wrap: wrap; gap: var(--e1) var(--e4);
  list-style: none; margin: 0; padding: 0;
  font-size: var(--fs-12); color: var(--text-leise);
}
.oa-testkarte__meta li { margin: 0; }
.oa-testkarte__meta li + li::before { content: '· '; }
.oa-zielgruppe h3 { font-size: var(--fs-16); margin-bottom: var(--e2); }

@media (max-width: 782px) {
  .oa-frage { padding: var(--e4); }
  .oa-test__meta { flex-direction: column; }
  .oa-testkarte { grid-template-columns: minmax(0, 1fr); gap: var(--e3); align-items: start; }
  .oa-testkarte__nummer { font-size: 20px; }
  .oa-testkarte__aktion .oa-btn { width: 100%; justify-content: center; }
  .oa-test__aktionen .oa-btn { width: 100%; justify-content: center; }
}