/* ============================================================================
   aemter.info - Bausteine und Raster.
   Die Farben stehen in farben.css - dort auch, warum sie so gewaehlt sind.
   UIkit traegt Raster und Grundkomponenten; hier steht, was den amtlichen
   Charakter ausmacht: ruhige Farben, klare Hierarchie, Statusfarben fuer
   Oeffnungszeiten, gut lesbare Datenblocke.
   ========================================================================= */


*{box-sizing:border-box}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--ae-text);line-height:1.62;margin:0;background:#fff;
  -webkit-font-smoothing:antialiased;
}

/* ------------------------------------------------------------------ Kopf */
.ae-kopf{background:var(--ae-blau);color:#fff;border-bottom:3px solid var(--ae-blau-dunkel)}
.ae-kopf-innen{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0}
.ae-marke{font-size:1.15rem;font-weight:700;color:#fff;text-decoration:none;letter-spacing:-.01em}
/* ⚠️ Hier stand font-weight:400 und opacity:.85 - eine Regel aus der Zeit,
   als neben dem Namen noch ein kleingesetzter Zusatz stand. Sie traf jetzt den
   Markennamen selbst und machte ihn dünn und blass; im ausgewählten Entwurf
   steht er fett und voll deckend. */
.ae-marke > span{font-weight:700;opacity:1;font-size:1.24em}
.ae-nav{display:flex;gap:18px;flex-wrap:wrap}
.ae-nav a{color:#fff;text-decoration:none;font-size:.92rem;opacity:.92;padding:4px 0;
  border-bottom:2px solid transparent}
.ae-nav a:hover{opacity:1;border-bottom-color:rgba(255,255,255,.6)}

/* --------------------------------------------------------------- Struktur */
.ae-pfad{font-size:.84rem;color:var(--ae-grau);padding:16px 0 0}
.ae-pfad a{color:var(--ae-grau);text-decoration:none}
.ae-pfad a:hover{text-decoration:underline}

h1{font-size:2rem;line-height:1.22;margin:.35em 0 .25em;color:var(--ae-tinte);letter-spacing:-.02em}
h2{font-size:1.28rem;margin:0 0 .7em;color:var(--ae-tinte);
  padding-bottom:.35em;border-bottom:2px solid var(--ae-linie)}
h3{font-size:1.03rem;margin:0 0 .45em;color:var(--ae-tinte)}
a{color:var(--ae-blau)}
.ae-block{margin:0 0 2.4rem}

/* Kennzeichnungen unter der Ueberschrift */
.ae-marken{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 1.1rem}
.ae-marke-chip{background:var(--ae-blau-hell);color:var(--ae-blau-dunkel);border-radius:4px;
  padding:3px 10px;font-size:.83rem;font-weight:600}

/* Direktantwort - beantwortet die Suchanfrage im ersten Satz */
.ae-antwort{background:var(--ae-papier);border-left:4px solid var(--ae-blau);
  border-radius:0 var(--ae-radius-gross) var(--ae-radius-gross) 0;padding:16px 20px;margin:0 0 2rem}
.ae-antwort p{margin:0;font-size:1.04rem}
.ae-antwort strong{color:var(--ae-blau-dunkel)}
.ae-antwort .ae-frage{display:block;font-size:.82rem;text-transform:uppercase;
  letter-spacing:.06em;color:var(--ae-grau);margin:0 0 .4rem;font-weight:700}

/* --------------------------------------------------------- Oeffnungszeiten */
.ae-status{display:inline-flex;align-items:center;gap:7px;border-radius:99px;
  padding:4px 13px;font-size:.88rem;font-weight:600;margin:0 0 .9rem}
.ae-status::before{content:"";width:9px;height:9px;border-radius:50%;display:inline-block}
.ae-status-offen{background:var(--ae-offen-hell);color:var(--ae-offen)}
.ae-status-offen::before{background:var(--ae-offen)}
.ae-status-zu{background:var(--ae-zu-hell);color:var(--ae-zu)}
.ae-status-zu::before{background:var(--ae-zu)}
.ae-zeiten{margin:0}
.ae-zeiten th{width:8.5rem;font-weight:600;text-align:left;color:var(--ae-text)}
.ae-zeiten td{font-variant-numeric:tabular-nums}
.ae-zeiten tr.ae-heute{background:var(--ae-blau-hell)}
/* "heute" als eigene Zeile unter dem Tag statt als Anhaengsel - sonst bricht
   die Spalte auf schmalen Fenstern mitten im Wort um. */
.ae-zeiten tr.ae-heute th::after{content:"heute";display:block;color:var(--ae-blau);
  font-weight:600;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;
  margin-top:1px}
.ae-geschlossen{color:var(--ae-grau)}

/* ------------------------------------------------------------------ Hinweis */
.ae-hinweis{background:var(--ae-warn-hell);border-left:4px solid #d9a441;
  border-radius:0 var(--ae-radius-gross) var(--ae-radius-gross) 0;padding:13px 17px;
  font-size:.94rem;margin:1rem 0 0}
.ae-quelle{font-size:.81rem;color:var(--ae-grau);margin:.9rem 0 0}

/* ------------------------------------------------------------------ Kontakt */
.ae-karte-box{border:1px solid var(--ae-linie);border-radius:var(--ae-radius-gross);overflow:hidden}
.ae-adresse{font-size:1.06rem;margin:0 0 .55rem;line-height:1.5}
.ae-adresse strong{display:block;color:var(--ae-tinte)}
.ae-traeger{font-size:.9rem;color:var(--ae-grau);margin:0 0 .8rem}
.ae-kontakt{margin:0}
.ae-kontakt li{padding:9px 0;border-bottom:1px solid var(--ae-linie);display:flex;
  gap:10px;align-items:baseline}
.ae-kontakt li:last-child{border-bottom:0}
.ae-kontakt .ae-label{flex:0 0 6.5rem;color:var(--ae-grau);font-size:.87rem}
.ae-kontakt a{color:var(--ae-blau);font-weight:600;text-decoration:none}
.ae-kontakt a:hover{text-decoration:underline}

/* -------------------------------------------------------------------- Karte */
.ae-karte{height:320px;background:var(--ae-papier);border-radius:var(--ae-radius-gross);
  position:relative;overflow:hidden}
.ae-karte-platzhalter{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:12px;text-align:center;padding:24px;
  background:var(--ae-papier);border:1px dashed var(--ae-linie);border-radius:var(--ae-radius-gross)}
.ae-karte-platzhalter p{margin:0;font-size:.9rem;color:var(--ae-grau);max-width:34rem}
.ae-karte-knopf{background:var(--ae-blau);color:#fff;border:0;border-radius:6px;
  padding:9px 18px;font-size:.93rem;font-weight:600;cursor:pointer;font-family:inherit}
.ae-karte-knopf:hover{background:var(--ae-blau-dunkel)}
.ae-karte .leaflet-container{border-radius:var(--ae-radius-gross)}

/* --------------------------------------------------------------- Leistungen */
.ae-leistung{border:1px solid var(--ae-linie);border-radius:var(--ae-radius-gross);box-shadow:none}
.ae-meta{display:grid;grid-template-columns:7.5rem 1fr;gap:5px 14px;margin:.7rem 0 0;font-size:.94rem}
.ae-meta dt{color:var(--ae-grau)}
.ae-meta dd{margin:0}

/* Praktische Hinweise vor dem Besuch */
.ae-tipps{margin:0;padding:0;list-style:none}
.ae-tipps li{position:relative;padding:0 0 .7rem 1.7rem;font-size:.96rem}
.ae-tipps li::before{content:"";position:absolute;left:.3rem;top:.62em;width:7px;height:7px;
  border-radius:50%;background:var(--ae-blau)}

/* ---------------------------------------------------------------- Nachbarn */
.ae-nachbarn li{padding:11px 0}
.ae-km{background:var(--ae-blau-hell);color:var(--ae-blau-dunkel);border-radius:4px;
  padding:2px 9px;font-size:.83rem;font-weight:600;white-space:nowrap}
.ae-klein{font-size:.89rem;color:var(--ae-grau)}
.ae-mehr{display:inline-block;margin:.6rem 0 0;font-weight:600;text-decoration:none}
.ae-mehr::after{content:" →"}

/* Ämter am Ort, nach Kategorie */
.ae-kacheln{display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:10px}
/* ⚠️ Diese Kachel war **zeichengenau ein Eingabefeld**: derselbe Rahmen
   (1px var(--ae-linie)), dieselbe Polsterung (11px 14px), derselbe weisse
   Grund, dieselbe schwarze Schrift wie `.ae-suche input`. Auf den
   Lebenslagen-Seiten stehen beide untereinander - dort war schlicht nicht zu
   sehen, welcher Kasten ein Ziel ist und welcher ein Feld zum Hineinschreiben.

   Drei Unterschiede beheben das, und **zwei davon sind keine Farbe**: die
   Schrift steht halbfett, rechts steht ein Winkel als Richtungszeichen, und
   der Text trägt das Blau der Links. Der Winkel ist der wichtigste - er
   trägt auch dann, wenn jemand Blau nicht von Schwarz unterscheidet. */
.ae-kachel{display:flex;justify-content:space-between;align-items:center;gap:10px;
  border:1px solid var(--ae-linie);border-radius:var(--ae-radius-gross);padding:11px 14px;
  text-decoration:none;color:var(--ae-blau);font-weight:600;background:#fff;
  transition:border-color .12s,background .12s}
.ae-kachel::after{content:"\203A";color:var(--ae-gold-text);font-weight:700;
  font-size:1.15em;line-height:1;margin-left:auto;padding-left:.4rem;flex:0 0 auto}
.ae-kachel:hover,.ae-kachel:focus-visible{border-color:var(--ae-blau);
  background:var(--ae-blau-hell)}
.ae-kachel:hover::after{color:var(--ae-blau)}
/* Die Zahl steht vor dem Winkel, nicht am rechten Rand - sonst schiebt der
   Winkel sie in die Mitte und die Kacheln fluchten nicht mehr.

   ⚠️ `min-width:0` ist keine Feinheit, sondern nötig: Ein Flex-Element
   schrumpft nie unter seine Inhaltsbreite, solange `min-width:auto` gilt.
   Ohne die Zeile drückten lange Namen wie "Kfz-Zulassungsstelle" und
   "Gesundheitsamt" den Winkel aus dem Rahmen heraus. */
.ae-kachel > span:first-child{margin-right:auto;min-width:0;overflow-wrap:break-word}
.ae-kachel-zahl{background:var(--ae-papier);border-radius:4px;padding:1px 8px;
  font-size:.83rem;color:var(--ae-grau);font-weight:600}

/* --------------------------------------------------------------------- FAQ */
.ae-faq dt{font-weight:600;margin:1.1rem 0 .25rem;color:var(--ae-tinte)}
.ae-faq dd{margin:0}

/* ------------------------------------------------------- Listen und Spalten */
.ae-spalten{column-count:3;column-gap:26px}
.ae-spalten a{display:block;padding:3px 0;text-decoration:none;font-size:.95rem;
  break-inside:avoid}
.ae-spalten a:hover{text-decoration:underline}

/* -------------------------------------------------------------------- Fuss */
.ae-fuss{background:var(--ae-papier);margin-top:3rem;padding:26px 0;font-size:.87rem;
  color:var(--ae-grau);border-top:1px solid var(--ae-linie)}
.ae-fuss a{color:var(--ae-grau)}
.ae-fuss-nav{margin:0 0 .9rem;display:flex;gap:16px;flex-wrap:wrap}
.ae-fuss-nav a{font-weight:600;color:var(--ae-blau)}

/* ------------------------------------------------------------------- Mobil */
@media(max-width:900px){ .ae-spalten{column-count:2} }
@media(max-width:640px){
  h1{font-size:1.55rem}
  h2{font-size:1.15rem}
  .ae-spalten{column-count:1}
  .ae-meta{grid-template-columns:1fr}
  .ae-meta dt{margin-top:.45rem}
  .ae-kontakt li{flex-direction:column;gap:2px}
  .ae-kontakt .ae-label{flex:none}
  .ae-zeiten th{width:7.5rem}
  .ae-kopf-innen{flex-direction:column;align-items:flex-start;gap:8px}
}

/* ------------------------------------------------------- Gut zu wissen */
.ae-meta-breit{grid-template-columns:9rem 1fr}

/* ---------------------------------------------------------- Stosszeiten */
.ae-andrang{display:flex;gap:14px;flex-wrap:wrap;margin:0 0 .8rem}
.ae-andrang-tag{flex:1 1 90px;min-width:80px}
.ae-andrang-name{display:block;font-size:.83rem;color:var(--ae-grau);margin:0 0 .35rem;font-weight:600}
.ae-balken-reihe{display:flex;align-items:flex-end;gap:2px;height:56px;
  background:var(--ae-papier);border-radius:4px;padding:3px}
.ae-balken{flex:1;border-radius:2px 2px 0 0;background:var(--ae-linie);min-height:3px}
.ae-balken-wenig{background:#9ec7ab}
.ae-balken-mittel{background:#e0b96a}
.ae-balken-viel{background:#c98b8b}

/* ------------------------------------------------------ Fristen-Rechner */
.ae-rechner{background:var(--ae-papier);border:1px solid var(--ae-linie);
  border-radius:var(--ae-radius-gross);padding:18px 20px}
.ae-rechner-feld{margin:0 0 .9rem}
.ae-rechner label{display:block;font-size:.9rem;color:var(--ae-grau);margin:0 0 .3rem}
.ae-rechner select,.ae-rechner input{width:100%;max-width:26rem;padding:9px 11px;
  border:1px solid var(--ae-linie);border-radius:6px;font-size:1rem;font-family:inherit;
  background:#fff;color:var(--ae-text)}
.ae-rechner select:focus,.ae-rechner input:focus{outline:2px solid var(--ae-blau);
  outline-offset:1px;border-color:var(--ae-blau)}
.ae-rechner-ergebnis{margin:.6rem 0 0;font-weight:600;font-size:1.02rem}
.ae-rechner-ergebnis.ae-offen{color:var(--ae-offen)}
.ae-rechner-ergebnis.ae-abgelaufen{color:var(--ae-zu)}

/* Gemeinden ohne eigene Seite */
.ae-ort-ohne{display:block;padding:3px 0;font-size:.95rem;color:var(--ae-grau)}

/* ------------------------------------------------------- Karte (MapLibre) */
.ae-karte{height:340px}
.ae-karte-fehlt{display:flex;align-items:center;justify-content:center;color:var(--ae-grau);
  font-size:.9rem;border:1px dashed var(--ae-linie)}
.ae-karte-fehlt::after{content:"Für diese Stelle liegen keine Koordinaten vor."}
/* ⚠️ Dieselben Farben wie der Kreis-Layer, der ab 40 Punkten übernimmt:
   blaue Fläche, goldener Rand. Vorher waren die Marker grau und die Karte sah
   je nach Anzahl der Standorte anders aus. */
.ae-marker{width:18px;height:18px;border-radius:50%;background:var(--ae-blau);
  border:2px solid var(--ae-gold);box-shadow:0 1px 4px rgba(16,28,40,.35);cursor:pointer}
.ae-marker-haupt{width:26px;height:26px;background:var(--ae-gold);
  border-color:var(--ae-blau);border-width:3px}
.ae-popup{font-size:.92rem;line-height:1.45}
.ae-popup strong{color:var(--ae-tinte)}
.maplibregl-ctrl-attrib{font-size:.72rem}

/* ------------------------------------------------- Redaktionelle Inhalte */
.ae-inhalt{font-size:1.02rem}
.ae-inhalt h2{font-size:1.28rem;margin:2rem 0 .7em}
.ae-inhalt h3{font-size:1.05rem;margin:1.4rem 0 .4em}
.ae-inhalt p{margin:0 0 1rem}
.ae-inhalt ul,.ae-inhalt ol{margin:0 0 1.2rem;padding-left:1.3rem}
.ae-inhalt li{margin:0 0 .4rem}
.ae-kasten{background:var(--ae-papier);border-left:4px solid var(--ae-blau);
  border-radius:0 var(--ae-radius-gross) var(--ae-radius-gross) 0;padding:14px 18px;margin:0 0 1.4rem}
.ae-kasten h3{margin-top:0}
.ae-bild{max-width:100%;height:auto;border-radius:var(--ae-radius-gross);margin:0 0 1.2rem}

/* --------------------------------------------------- Abgrenzungsband
   Direkt unter der Kopfleiste: macht sofort klar, dass hier kein Amt
   spricht. Zurueckhaltend, aber vor dem ersten Inhalt. */
.ae-band{background:var(--ae-blau-dunkel);color:rgba(255,255,255,.88);
  font-size:.79rem;letter-spacing:.02em;padding:5px 0}

/* --------------------------------------------------------------- Symbole
   Ein Sprite, per <use> eingebunden. Die Symbole zeichnen mit currentColor
   und uebernehmen so die Farbe ihrer Umgebung - im Status gruen oder rot,
   im Hinweis ocker, sonst blau. */
.ae-symbol{width:1.15em;height:1.15em;vertical-align:-.18em;margin-right:.45em;
  color:var(--ae-blau);flex:0 0 auto}
h2 .ae-symbol{color:var(--ae-blau)}
.ae-status .ae-symbol{margin-right:.3em;color:inherit}
.ae-hinweis .ae-symbol{color:var(--ae-warn)}

/* Marke im Kopf: Symbol und Wortmarke auf einer Grundlinie */
.ae-marke{display:inline-flex;align-items:center;gap:.5rem}
.ae-marke-bild{width:2.2em;height:2.2em;flex:0 0 auto}
.ae-marke-tld{font-weight:600;letter-spacing:.02em}

/* ------------------------------------------------------ Anliegen-Kacheln
   Direkt unter der Direktantwort: der Einstieg fuer Leute, die schon wissen,
   was sie wollen. Zwei Spalten ab Tablet, drei ab Desktop. */
.ae-anliegen{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.ae-anliegen-kachel{display:flex;gap:12px;align-items:flex-start;
  border:1px solid var(--ae-linie);border-radius:var(--ae-radius);padding:14px 16px;
  text-decoration:none;color:var(--ae-text);background:#fff;transition:border-color .12s}
.ae-anliegen-kachel:hover{border-color:var(--ae-blau);background:var(--ae-blau-hell)}
.ae-anliegen-sym{display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;flex:0 0 38px;border-radius:var(--ae-radius);
  background:var(--ae-blau-hell);color:var(--ae-blau)}
.ae-anliegen-kachel:hover .ae-anliegen-sym{background:var(--ae-weiss)}
.ae-symbol-gross{width:20px;height:20px;margin:0}
.ae-anliegen-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.ae-anliegen-text strong{color:var(--ae-tinte);font-size:1rem;line-height:1.35}
.ae-anliegen-lead{font-size:.88rem;color:var(--ae-grau);line-height:1.45}
.ae-anliegen-meta{font-size:.82rem;color:var(--ae-blau);font-weight:600;margin-top:2px}
@media(max-width:520px){
  .ae-anliegen{grid-template-columns:1fr}
  .ae-anliegen-sym{width:32px;height:32px;flex-basis:32px}
}

/* Kontaktzeilen: Symbol, Beschriftung, Wert - Telefon bekommt Gewicht,
   weil es die meistgesuchte Angabe ueberhaupt ist. */
.ae-kontakt li{align-items:center}
.ae-kontakt .ae-symbol{color:var(--ae-grau);margin-right:0}
.ae-kontakt .ae-label{flex:0 0 5.5rem}
.ae-tel{font-size:1.08rem;letter-spacing:.01em}
.ae-kein{color:var(--ae-grau);font-size:.92rem}

/* ------------------------------------------------------------------ Suche */
.ae-kopf-suche{background:var(--ae-blau);padding:0 0 12px}
.ae-suche-label{display:block;font-size:.82rem;color:var(--ae-grau);margin:0 0 .35rem}
.ae-suche-kopf .ae-suche-label{display:none}
.ae-suche-zeile{display:flex;gap:8px}
.ae-suche input{flex:1;min-width:0;padding:11px 14px;font-size:1rem;font-family:inherit;
  border:1px solid var(--ae-linie);border-radius:var(--ae-radius);background:#fff;color:var(--ae-text)}
.ae-suche input:focus{outline:2px solid var(--ae-blau);outline-offset:1px}
.ae-suche-kopf input{border-color:transparent}
.ae-suche-kopf input:focus{outline:2px solid #fff;outline-offset:1px}
.ae-suche button{background:var(--ae-blau);color:#fff;border:0;border-radius:var(--ae-radius);
  padding:11px 20px;font-size:.98rem;font-weight:600;font-family:inherit;cursor:pointer;white-space:nowrap}
.ae-suche button:hover{background:var(--ae-blau-dunkel)}
.ae-suche-kopf button{background:var(--ae-blau-dunkel)}
.ae-suche-kopf button:hover{background:#082a45}
.ae-suche-gross{background:var(--ae-papier);border:1px solid var(--ae-linie);
  border-radius:var(--ae-radius-gross);padding:18px 20px}
.ae-suche-gross .ae-suche-label{font-size:.92rem;color:var(--ae-tinte);font-weight:600}
@media(max-width:520px){ .ae-suche-zeile{flex-direction:column} .ae-suche button{width:100%} }

/* ------------------------------------------------------- Zweispaltig
   Die Seitenspalte steht im Quelltext NACH dem Hauptinhalt (Vorleseprogramme
   und Suchmaschinen bekommen zuerst die Antwort) und wandert per Raster
   nach rechts. Unter 900 px rutscht sie wieder darunter. */
.ae-zweispaltig{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:36px;align-items:start}
/* Mitlaufende Spalte - aber nur, wenn sie ganz in den Bildschirm passt.
   Eine klebende Spalte, die höher ist als das Fenster, schneidet ihr eigenes
   Ende ab: Man scrollt und kommt an die unteren Einträge nie heran. Die
   längste Spalte (2 Ämter + 6 Nachbarorte + Suchfeld) misst gemessene 700px. */
.ae-seitenspalte{position:static}
@media(min-height:760px){ .ae-seitenspalte{position:sticky;top:16px} }
.ae-spalte-block{margin:0 0 1.8rem}
.ae-spalte-block h2{font-size:1rem;padding-bottom:.3em;border-bottom:1px solid var(--ae-linie);
  margin:0 0 .7em}
.ae-spalte-block h2 .ae-symbol{width:1em;height:1em}
.ae-spalte-liste{list-style:none;margin:0;padding:0}
.ae-spalte-liste li{padding:8px 0;border-bottom:1px solid var(--ae-linie);font-size:.94rem}
.ae-spalte-liste li:last-child{border-bottom:0}
.ae-spalte-liste a{text-decoration:none;font-weight:600}
.ae-spalte-liste a:hover{text-decoration:underline}
.ae-spalte-liste .ae-hier{background:var(--ae-blau-hell);margin:0 -10px;padding:8px 10px;
  border-radius:var(--ae-radius)}
.ae-spalte-liste .ae-hier span:first-child{font-weight:700;color:var(--ae-blau-dunkel)}
.ae-spalte-kurz li{padding:5px 0}
.ae-suche-spalte .ae-suche-zeile{flex-direction:column;gap:6px}
.ae-suche-spalte button{width:100%}
.ae-suche-spalte .ae-suche-label{font-size:.85rem}
@media(max-width:900px){
  .ae-zweispaltig{grid-template-columns:1fr;gap:0}
  .ae-seitenspalte{position:static;border-top:2px solid var(--ae-linie);padding-top:1.6rem;
    margin-top:1rem}
}

/* ---- Anzeigen ----------------------------------------------------------
   Deutlich vom Inhalt abgesetzt: eine Auskunftsseite darf nicht den Eindruck
   erwecken, die Werbung gehoere zur Antwort. Kein Rahmen um den Block selbst,
   aber Luft darueber und darunter und eine kleine Beschriftung. */
.ae-anzeige{margin:2.4rem 0;padding-top:.4rem;border-top:1px solid var(--ae-linie)}
.ae-anzeige-marke{display:block;font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ae-grau);margin-bottom:.5rem}
.ae-anzeige-probe{padding:1.4rem;text-align:center;color:var(--ae-grau);
  background:var(--ae-papier);border:1px dashed var(--ae-linie);font-size:.9rem}
.ae-fuss-knopf{background:none;border:0;padding:0;font:inherit;color:inherit;
  text-decoration:underline;cursor:pointer}

/* ---- Motivbilder --------------------------------------------------------
   Volle Spaltenbreite, fester Seitenrahmen gegen Umbruchsprünge beim Laden.
   `aspect-ratio` statt fester Höhe: Das Bild behält sein Verhältnis, egal wie
   breit die Spalte gerade ist. */
.ae-bild-figur{margin:1.6rem 0}
.ae-bild{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;
  border-radius:var(--ae-radius);display:block}
.ae-svg-grafik{width:100%;height:auto;display:block;border:1px solid var(--ae-linie);
  border-radius:var(--ae-radius)}

/* ---- Lebenslagen --------------------------------------------------------
   Nummerierte Schrittfolge: Die Ziffer trägt die Reihenfolge, deshalb steht
   sie sichtbar und nicht nur als Listenpunkt. */
.ae-block-lead{color:var(--ae-grau);margin:-.4rem 0 1rem}
.ae-schritte{list-style:none;counter-reset:schritt;margin:0;padding:0}
.ae-schritt{counter-increment:schritt;position:relative;padding:0 0 1.4rem 3rem;
  border-left:2px solid var(--ae-blau-rand);margin-left:1rem}
.ae-schritt:last-child{border-left-color:transparent;padding-bottom:0}
.ae-schritt::before{content:counter(schritt);position:absolute;left:-1.05rem;top:0;
  width:2rem;height:2rem;border-radius:50%;background:var(--ae-blau);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.95rem}
.ae-schritt h3{margin:.1rem 0 .3rem;font-size:1.05rem}
.ae-schritt p{margin:.3rem 0}
.ae-schritt-frist{display:inline-flex;align-items:center;gap:.4em;font-size:.85rem;
  font-weight:600;color:var(--ae-warn);background:var(--ae-warn-hell);
  border:1px solid var(--ae-warn-rand);border-radius:0 6px 6px 0;
  border-left:3px solid var(--ae-warn);padding:.2em .6em}
.ae-schritt-frist .ae-symbol{width:1em;height:1em}
.ae-schritte-klein .ae-schritt{padding-bottom:1rem}
.ae-schritte-klein .ae-schritt::before{width:1.7rem;height:1.7rem;font-size:.85rem;left:-.9rem}
.ae-schritte-klein .ae-schritt h3{font-size:1rem}

/* ---- Goldakzent ---------------------------------------------------------
   Gold trägt die Aufmerksamkeit, Blau die Struktur. Eingesetzt an wenigen,
   tragenden Stellen - flächig verteilt würde es das ruhige Bild zerstören,
   das die Seite als Auskunftsangebot braucht.

   ⚠️ Nie als Textfarbe auf hellem Grund: #f7ac12 erreicht auf Weiß nur
   1,93:1. Wo Gold schreibt, steht --ae-gold-text (5,5:1). */

/* Der Akzentbalken der Direktantwort - die wichtigste Stelle jeder Seite */
.ae-antwort{border-left-color:var(--ae-gold)}

/* Ziffern der Schrittfolge: Gold als Fläche, dunkler Text darauf (8,9:1) */
.ae-schritt::before{background:var(--ae-gold);color:var(--ae-tinte)}
.ae-schritt{border-left-color:var(--ae-gold-rand)}

/* Symbole in Abschnittsüberschriften */
/* ⚠️ Symbole in Überschriften tragen **Blau**, nicht Gold. Der abgedunkelte
   Goldton #8c6004 ist als Schriftfarbe lesbar, wirkt als Fläche aber bräunlich
   und schmutzig - neben blauem Text erst recht. Gold bleibt den Akzenten
   vorbehalten: Balken, Ziffern, Fristen, Marken. */
.ae-block > h2 > .ae-symbol{color:var(--ae-blau)}

/* Kacheln: der Rand wechselt beim Überfahren auf Gold */
.ae-anliegen-kachel:hover{border-color:var(--ae-gold);background:var(--ae-gold-hell)}
.ae-anliegen-kachel:hover .ae-anliegen-sym{background:var(--ae-weiss);color:var(--ae-gold-text)}
.ae-kachel:hover{border-color:var(--ae-gold);background:var(--ae-gold-hell)}

/* Links im Fließtext bekommen eine goldene Unterstreichung beim Überfahren -
   die Schriftfarbe bleibt blau und damit lesbar. */
main a:not(.ae-kachel):not(.ae-anliegen-kachel):hover{
  text-decoration-color:var(--ae-gold);text-decoration-thickness:2px}

/* Im blauen Kopf darf das helle Gold selbst schreiben: 4,8:1 auf dem Blau */
.ae-nav a:hover{border-bottom-color:var(--ae-gold)}
.ae-marke-tld{color:var(--ae-gold)}

/* Hervorgehobene Zeile in der Seitenspalte */
.ae-spalte-liste .ae-hier{border-left:3px solid var(--ae-gold)}
.ae-tabelle-rahmen{overflow-x:auto}
.ae-rechts{text-align:right}

/* ---- Fehlerseite --------------------------------------------------------
   Ein eigener Kopf statt der üblichen Überschrift: großes Zeichen, ein Satz,
   das Suchfeld. Bewusst kein "Oops" und keine Riesenziffer - die Seite bleibt
   eine Auskunft, auch wenn sie gerade nichts gefunden hat. */
.ae-fehlerkopf{background:var(--ae-papier);border:1px solid var(--ae-linie);
  border-radius:var(--ae-radius-gross);padding:2.4rem 1.6rem;text-align:center;
  margin:0 0 2rem}
.ae-fehlerkopf-zeichen{display:inline-flex;align-items:center;justify-content:center;
  width:4.5rem;height:4.5rem;border-radius:50%;background:var(--ae-gold);
  color:var(--ae-tinte);margin-bottom:1rem}
.ae-fehlerkopf-zeichen .ae-symbol{width:2.4rem;height:2.4rem}
.ae-fehlerkopf h1{margin:0 0 .5rem;font-size:1.65rem}
.ae-fehlerkopf-lead{margin:0 auto 1.4rem;max-width:34rem;color:var(--ae-text)}
/* Das Suchfeld im Kopf trägt hier die Hauptlast - deshalb breiter und zentriert. */
.ae-suche-fehler{max-width:34rem;margin:0 auto}
.ae-suche-fehler .ae-suche-label{text-align:left}
.ae-fehler-mehr{margin-top:1rem}
.ae-fehler-code{margin-top:2.5rem;font-size:.82rem;color:var(--ae-grau);text-align:center}

@media(max-width:600px){
  .ae-fehlerkopf{padding:1.8rem 1rem}
  .ae-fehlerkopf h1{font-size:1.35rem}
}
.ae-marke-vorort{display:inline-block;background:var(--ae-gold-hell);color:var(--ae-gold-text);
  border:1px solid var(--ae-gold-rand);border-radius:0 4px 4px 0;border-left:3px solid var(--ae-gold);
  padding:.1em .5em;font-size:.8rem;font-weight:600;white-space:nowrap}
.ae-plz-tabelle td{vertical-align:top}

/* ---- Autovervollständigung ---------------------------------------------
   Die Liste liegt über dem Inhalt, deshalb braucht der Behälter position und
   die Liste einen Stapelwert - sonst verschwindet sie hinter der Karte oder
   dem nächsten Abschnitt. */
.ae-suche-zeile{position:relative}
.ae-vorschlaege{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:40;
  margin:0;padding:.25rem 0;list-style:none;background:var(--ae-weiss);
  border:1px solid var(--ae-linie);border-radius:var(--ae-radius);
  box-shadow:0 6px 18px rgba(16,28,40,.12);max-height:22rem;overflow-y:auto}
.ae-vorschlag{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.5rem .8rem;cursor:pointer}
.ae-vorschlag-aktiv,.ae-vorschlag:hover{background:var(--ae-gold-hell)}
.ae-vorschlag-text{font-weight:600;color:var(--ae-tinte)}
.ae-vorschlag-art{font-size:.78rem;color:var(--ae-grau);white-space:nowrap}
.ae-vorschlag-anliegen .ae-vorschlag-text{color:var(--ae-blau)}

/* ---- Balkenbild der Besucherstatistik -----------------------------------
   Ohne Diagrammbibliothek: ein paar div mit Höhenangabe reichen für die
   Frage "wie verteilt sich der Monat" - und müssen nicht gepflegt werden. */
.ae-balken{display:flex;align-items:flex-end;gap:2px;height:9rem;
  border-bottom:2px solid var(--ae-linie);padding-top:.5rem}
.ae-balken-tag{flex:1 1 0;display:flex;flex-direction:column;justify-content:flex-end;
  align-items:center;height:100%;min-width:0}
.ae-balken-saeule{width:100%;background:var(--ae-blau);border-radius:2px 2px 0 0;
  min-height:2px}
.ae-balken-tag:hover .ae-balken-saeule{background:var(--ae-gold)}
.ae-balken-schrift{font-size:.62rem;color:var(--ae-grau);margin-top:.2rem;
  overflow:hidden;text-overflow:clip;white-space:nowrap}
@media(max-width:600px){ .ae-balken-schrift{display:none} }
/* Amt-Karte: höher als die Ortskarte, weil sie ganz Deutschland zeigt. */
.ae-karte-gross{height:min(70vh,560px)}

/* ---------------------------------------------------------------------------
   Schematische Deutschlandkarte (block_landkarte)

   ⚠️ Die Farbstufen sind **eine** Farbe in fünf Helligkeiten, nicht fünf
   Farben. Eine Ampelskala (grün-gelb-rot) würde hier Wertung behaupten, wo
   nur Anzahl steht: Ein Land mit wenigen Standorten ist nicht "schlecht",
   es ist kleiner. Aus demselben Grund trägt jede Fläche ihre Zahl als Text -
   Farbe allein ist nie Bedeutungsträger.

   Die Stufen sind so gewählt, dass benachbarte sich auch bei Farbsehschwäche
   und im Graustufendruck unterscheiden (Helligkeitsabstand je Schritt
   mindestens 12 Prozentpunkte).
   ------------------------------------------------------------------------ */
.ae-landkarte-feld{display:flex;flex-direction:column;align-items:center;gap:.6rem}
.ae-landkarte-svg{width:100%;max-width:540px;height:auto;display:block}

.ae-land{fill:var(--ae-blau-hell);stroke:#fff;stroke-width:1;stroke-linejoin:round;
  transition:fill .12s}
.ae-land-0{fill:#dce8f2}
.ae-land-1{fill:#b7cfe3}
.ae-land-2{fill:#7fa8c8}
.ae-land-3{fill:#3d7aa8}
.ae-land-4{fill:var(--ae-blau)}
.ae-land-leer{fill:#f0f2f4}

/* Gold als Hover: die Akzentfarbe zeigt an, was gerade angefasst wird -
   dieselbe Rolle wie beim Kartenmarker und beim aktiven Menüpunkt. */
.ae-landkarte-svg a:hover .ae-land,
.ae-landkarte-svg a:focus .ae-land{fill:var(--ae-gold)}
/* ⚠️ Der Fokusrahmen gehört an den Link, nicht an die Fläche: Ein
   outline auf einem SVG-Pfad zeichnet dessen Bounding-Box, nicht den Umriss. */
.ae-landkarte-svg a{outline-offset:2px}
.ae-landkarte-svg a:focus-visible{outline:3px solid var(--ae-gold-text)}

.ae-land-schrift{font-size:11px;font-weight:600;fill:#12263a;pointer-events:none;
  paint-order:stroke;stroke:rgba(255,255,255,.85);stroke-width:2.5px;stroke-linejoin:round}
.ae-land-schrift-hell{fill:#fff;stroke:rgba(12,40,64,.55)}
.ae-land-zahl{font-size:12px;font-weight:700}
.ae-land-schrift-aussen{font-size:11px;stroke:none;fill:#12263a}
.ae-land-zahl-aussen{font-weight:700}
.ae-land-linie{stroke:#8ba3b8;stroke-width:1}
.ae-land-punkt{fill:#8ba3b8}

.ae-landkarte-legende{display:flex;flex-wrap:wrap;justify-content:center;gap:.35rem .9rem;
  list-style:none;margin:0;padding:0;font-size:.85rem;color:#4a5b6b}
.ae-landkarte-legende li{display:flex;align-items:center;gap:.35rem}
.ae-legende-farbe{width:16px;height:12px;border-radius:2px;border:1px solid rgba(0,0,0,.08)}
.ae-legende-farbe.ae-land-0{background:#dce8f2}
.ae-legende-farbe.ae-land-1{background:#b7cfe3}
.ae-legende-farbe.ae-land-2{background:#7fa8c8}
.ae-legende-farbe.ae-land-3{background:#3d7aa8}
.ae-legende-farbe.ae-land-4{background:var(--ae-blau)}

.ae-landkarte-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:.15rem .9rem;list-style:none;margin:1.1rem 0 0;padding:0}
.ae-landkarte-liste li{display:flex;justify-content:space-between;align-items:baseline;
  gap:.5rem;padding:.3rem 0;border-bottom:1px solid var(--ae-blau-rand)}
.ae-landkarte-zahl{font-variant-numeric:tabular-nums;color:#4a5b6b;font-size:.9rem}

/* ⚠️ Auf schmalen Geräten ist die Karte Zierde, nicht Bedienung: Bremen wäre
   dort vier Pixel breit und mit dem Daumen nicht zu treffen. Sie bleibt als
   Übersicht stehen, geklickt wird in der Liste darunter. */
@media (max-width:560px){
  .ae-landkarte-svg{max-width:100%}
  .ae-land-schrift{font-size:13px}
  .ae-land-zahl{font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  .ae-land{transition:none}
}

/* ---------------------------------------------------------------------------
   Suchergebnisse

   ⚠️ Das Suchformular hatte keinen Abstand nach unten, .ae-block keinen nach
   oben - auf der Ergebnisseite klebte die erste Überschrift damit direkt am
   Eingabefeld und wirkte wie dessen Beschriftung.
   ------------------------------------------------------------------------ */
.ae-suche{margin:0 0 2.2rem}
.ae-block > .ae-suche:last-child{margin-bottom:0}   /* im Block trägt der Block den Abstand */

/* Steckbrief des gefundenen Ortes - beantwortet "meint ihr mein Ilmenau?" */
.ae-ortskopf{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .8rem;
  margin:0 0 1.4rem;padding:.7rem 0 .8rem;border-bottom:3px solid var(--ae-gold)}
.ae-ortskopf-name{font-size:1.45rem;font-weight:700;color:var(--ae-blau-dunkel);
  line-height:1.2}
.ae-ortskopf-daten{color:#4a5b6b;font-size:.95rem}

/* Behördengänge als Reihe: kein Kachelraster, sondern eine Zeile Stichworte -
   sie sind hier ein Nebenangebot, nicht das Ergebnis. */
.ae-lagen-reihe{display:flex;flex-wrap:wrap;gap:.5rem}
.ae-lagen-chip{display:inline-block;padding:.42rem .8rem;border-radius:999px;
  background:var(--ae-blau-hell);border:1px solid var(--ae-blau-rand);
  color:var(--ae-blau-dunkel);text-decoration:none;font-size:.93rem;line-height:1.3}
.ae-lagen-chip:hover,.ae-lagen-chip:focus-visible{background:var(--ae-gold-hell);
  border-color:var(--ae-gold-rand);color:#3a2a00}
.ae-mehr{margin:.9rem 0 0;font-size:.95rem}

/* ---------------------------------------------------------------------------
   Meldeformular "Angaben ändern oder ergänzen"
   ------------------------------------------------------------------------ */

/* Aufruf am Ende der Amtsseiten - abgesetzt, aber nicht als Warnung gestaltet.
   ⚠️ Der Akzentstreifen läuft an der Goldseite **gerade** aus: Bögen an einer
   farbigen Kante erzeugen einen Rundungs-Schatten, der plastisch wirkt. */
.ae-meldblock{background:var(--ae-gold-hell);border-left:4px solid var(--ae-gold);
  border-radius:0 6px 6px 0;padding:1.2rem 1.4rem}
.ae-meldblock h2{margin-top:0}
.ae-meldblock p{margin-bottom:1rem}

.ae-knopf-gold{background:var(--ae-gold);color:#3a2a00;border:0;
  border-radius:var(--ae-radius);padding:11px 20px;font-size:1rem;font-weight:600;
  text-decoration:none;display:inline-block;cursor:pointer}
.ae-knopf-gold:hover,.ae-knopf-gold:focus-visible{background:#e09a05;color:#2b1f00}

/* Link in der Fusszeile - erbt dort die Fussgestaltung, braucht nur das Symbol
   auf Linie zu bringen. */
.ae-meldlink .ae-symbol{vertical-align:-.16em;margin-right:.25rem}

.ae-meldform{max-width:44rem}
.ae-feld{margin:0 0 1.3rem;border:0;padding:0}
.ae-feld > label,.ae-feld legend{display:block;font-weight:600;margin:0 0 .35rem;
  color:var(--ae-blau-dunkel)}
.ae-feld input[type=text],.ae-feld input[type=email],.ae-feld select,.ae-feld textarea{
  width:100%;padding:11px 13px;font-size:1rem;font-family:inherit;line-height:1.45;
  border:1px solid #9fb3c4;border-radius:var(--ae-radius);background:#fff;color:#12263a}
.ae-feld textarea{resize:vertical;min-height:8rem}
.ae-feld input:focus,.ae-feld select:focus,.ae-feld textarea:focus{
  outline:2px solid var(--ae-blau);outline-offset:1px;border-color:var(--ae-blau)}
.ae-feld-hilfe{display:block;margin:.35rem 0 0;font-size:.88rem;color:#4a5b6b}
.ae-optional{font-weight:400;color:#4a5b6b;font-size:.9rem}
.ae-radio{display:block;font-weight:400;margin:.3rem 0;cursor:pointer}
.ae-radio input{margin-right:.5rem}
.ae-feld-paar{display:grid;grid-template-columns:1fr 1fr;gap:0 1.2rem}
@media(max-width:560px){ .ae-feld-paar{grid-template-columns:1fr} }

.ae-meldform-bezug{background:var(--ae-blau-hell);border-radius:var(--ae-radius);
  padding:.6rem .9rem;font-size:.92rem;margin:0 0 1.3rem}
.ae-meldform-bezug code{background:transparent;color:var(--ae-blau-dunkel);word-break:break-all}
.ae-meldform-datenschutz{font-size:.88rem;color:#4a5b6b;margin:0 0 1.3rem}
.ae-hinweis-fehler{border-left:4px solid #b3261e;background:#fdecea;color:#5f1a15;
  border-radius:0 6px 6px 0;padding:.8rem 1rem}

/* ⚠️ Das unsichtbare Feld darf **nicht** display:none tragen: Manche Bots
   überspringen ausgeblendete Felder gezielt, und dann fängt die Falle nichts.
   Es wird deshalb aus dem sichtbaren Bereich geschoben. */
.ae-honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------------------------------------------------------------------------
   Links im Inhalt sichtbar machen

   ⚠️ **UIkit setzt global `a{text-decoration:none}`.** Unsere Regel
   `a{color:var(--ae-blau)}` überschrieb nur die Farbe - damit war jeder
   Inhaltslink allein am Blau erkennbar. Auf den Lebenslagen-Seiten sah man
   den Überschriften „Eheschließung anmelden" nicht an, dass eine Seite
   dahintersteht; ebenso wenig dem „Standesamt" hinter „Zuständig:".

   Das verstösst gegen die erste Regel des Farbsystems: **Farbe ist nie
   alleiniger Bedeutungsträger.** Wer Blau und Schwarz nicht sicher
   unterscheidet - rund acht Prozent der Männer -, sieht hier gar keinen Link.
   Ein Behördenwegweiser lebt davon, dass man den nächsten Schritt findet.

   Unterstrichen wird deshalb alles im Inhalt. Ausgenommen sind nur
   Bausteine, die **schon eine andere Form tragen**: Kacheln und Chips haben
   Rahmen und Fläche, Knöpfe sind Knöpfe, Listen bestehen ausschliesslich aus
   Links. Dort wäre der Strich Lärm, kein Hinweis.
   ------------------------------------------------------------------------ */
main a,
.ae-zweispaltig a{
  text-decoration:underline;
  /* Der Strich sitzt unter den Unterlängen, nicht mitten durch das g und p. */
  text-underline-offset:.16em;
  text-decoration-thickness:1px;
  /* ⚠️ Ohne diese Zeile wächst der Strich bei fetter Schrift mit und wirkt
     an Überschriften wie eine Markierung. */
  text-decoration-skip-ink:auto;
}
main a:hover,
main a:focus-visible,
.ae-zweispaltig a:hover,
.ae-zweispaltig a:focus-visible{
  text-decoration-thickness:2px;
  text-decoration-color:var(--ae-gold);
}

/* Bausteine mit eigener Form - dort ist der Strich überflüssig. */
main .ae-kachel,        .ae-zweispaltig .ae-kachel,
main .ae-anliegen-kachel, .ae-zweispaltig .ae-anliegen-kachel,
main .ae-lagen-chip,    .ae-zweispaltig .ae-lagen-chip,
main .ae-knopf,         .ae-zweispaltig .ae-knopf,
main .ae-pfad a,        .ae-zweispaltig .ae-pfad a,
main .ae-spalten a,     .ae-zweispaltig .ae-spalten a,
main .ae-spalte-liste a,.ae-zweispaltig .ae-spalte-liste a,
main .ae-landkarte-svg a,
main .ae-landkarte-liste a,
main .ae-vorschlag,
main .ae-mehr{text-decoration:none}

/* ⚠️ Diese vier tragen den Strich erst beim Überfahren - sie stehen in
   Listen, in denen ohnehin jede Zeile ein Link ist. Ein durchgehend
   unterstrichener Block aus 500 Ortsnamen liest sich schlechter, nicht
   besser. */
main .ae-spalten a:hover,      main .ae-spalten a:focus-visible,
main .ae-spalte-liste a:hover, main .ae-spalte-liste a:focus-visible,
main .ae-landkarte-liste a:hover, main .ae-landkarte-liste a:focus-visible,
main .ae-pfad a:hover,         main .ae-pfad a:focus-visible{
  text-decoration:underline;
  text-underline-offset:.16em;
}

/* Überschriften, hinter denen eine Seite steht: dünnerer Strich, damit die
   fette Schrift nicht unterstrichen wirkt wie eine Hervorhebung. */
main h2 > a, main h3 > a,
.ae-zweispaltig h2 > a, .ae-zweispaltig h3 > a{
  text-decoration-thickness:1px;
  text-underline-offset:.2em;
  text-decoration-color:var(--ae-gold-rand);
}
main h2 > a:hover, main h3 > a:hover,
main h2 > a:focus-visible, main h3 > a:focus-visible{
  text-decoration-color:var(--ae-gold);
  text-decoration-thickness:2px;
}

/* ---------------------------------------------------------------------------
   Gegenüberstellung Amt / Behörde (aus dem Text der alten Startseite)

   Im Original standen die beiden Definitionen in einem zweispaltigen Raster
   mit blauem Kopf - der Export hat das Raster verloren, der Text stand
   danach untereinander. Hier ist es wiederhergestellt, aber mit unseren
   Mitteln statt mit den Baukasten-Klassen von damals.

   ⚠️ `align-items:start` ist nötig: Die beiden Texte sind ungleich lang
   (216 gegen 1.311 Zeichen). Ohne die Zeile zieht das Raster die kurze Karte
   auf die Höhe der langen und lässt darin eine leere Fläche stehen.
   ------------------------------------------------------------------------ */
.ae-definitionen{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1.1rem;align-items:start;margin:1.2rem 0}
.ae-definition{border:1px solid var(--ae-blau-rand);border-radius:var(--ae-radius-gross);
  overflow:hidden;background:#fff}
.ae-definition > h4{margin:0;padding:.7rem 1.1rem;background:var(--ae-blau);color:#fff;
  font-size:1.02rem;font-weight:600}
.ae-definition > p{margin:0;padding:1rem 1.1rem}
.ae-definition > p + p{padding-top:0}

/* Siegel „0 % Behörde, 100 % Information" neben der Klarstellung im Fuß.

   ⚠️ `flex:0 0 auto` verhindert, dass das Siegel gestaucht wird: Ein
   Flex-Element mit Bild schrumpft sonst in der Breite und der Kreis wird zur
   Ellipse. Auf schmalen Geräten steht es über dem Text statt daneben - bei
   340 Pixeln blieben dem Absatz sonst 240. */
.ae-fuss-hinweis{display:flex;gap:1.1rem;align-items:flex-start;margin:0 0 1rem}
.ae-fuss-hinweis p{margin:0}
.ae-siegel{flex:0 0 auto;width:76px;height:76px}
@media(max-width:520px){
  .ae-fuss-hinweis{flex-direction:column;align-items:center;text-align:left;gap:.8rem}
  .ae-siegel{width:64px;height:64px}
}

/* Marke am Fuß der Seite, rechts unten.

   ⚠️ `.INFO` steht hier in `--ae-gold-text`, nicht im hellen Gold der
   Kopfzeile. Auf dem hellen Papierton des Fußes erreicht #F7AC12 nur 1,9:1 -
   für Schrift unbrauchbar. Der abgedunkelte Verwandte kommt auf 5,5:1 und
   sieht neben dem Blau noch nach derselben Marke aus. */
/* ⚠️ Mit `.ae-fuss` davor. `.ae-fuss a{color:var(--ae-grau)}` weiter oben ist
   spezifischer als eine einzelne Klasse - ohne den Vorsatz stand "Ämter" grau
   statt blau, und die Marke sah aus wie ein gewöhnlicher Fußzeilenlink. */
.ae-fuss .ae-fuss-marke{display:inline-flex;align-items:center;gap:.45rem;float:right;
  margin:.4rem 0 0 1.2rem;text-decoration:none;font-weight:700;font-size:1.05rem;
  color:var(--ae-blau);line-height:1}
.ae-fuss .ae-fuss-marke img{display:block;flex:0 0 auto}
.ae-fuss .ae-fuss-tld{color:var(--ae-gold-text);font-weight:600}
.ae-fuss .ae-fuss-marke:hover,.ae-fuss .ae-fuss-marke:focus-visible{color:var(--ae-blau-dunkel)}

/* ⚠️ Ohne diese Zeile läuft der letzte Absatz um die schwebende Marke herum
   und der Fuß endet auf ungleicher Höhe. */
.ae-fuss > .uk-container::after{content:"";display:block;clear:both}

@media(max-width:520px){
  .ae-fuss .ae-fuss-marke{float:none;display:flex;justify-content:center;margin:1.2rem 0 0}
}

/* ---------------------------------------------------------------------------
   ENTWURF der Startseite - Bausteine

   ⚠️ Nur auf dem Staging in Gebrauch (`/entwurf/`). Wird der Entwurf
   übernommen, bleibt das CSS; wird er verworfen, kann dieser Block weg.
   ------------------------------------------------------------------------ */

/* Zahlen zum Bestand. Bewusst nüchtern gesetzt - keine Kreise, keine Icons,
   keine hochzählende Animation. Es sind Auskünfte, keine Erfolgsmeldungen. */
.ae-bestand{background:var(--ae-papier);border-radius:var(--ae-radius-gross);
  padding:1.3rem 1.4rem}
.ae-bestand > h2{margin-top:0}
.ae-bestand-zahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1rem 1.4rem;margin:0 0 .9rem}
.ae-bestand-zahl{display:flex;flex-direction:column;gap:.1rem}
.ae-bestand-wert{font-size:1.75rem;font-weight:700;color:var(--ae-blau);line-height:1.1;
  font-variant-numeric:tabular-nums}
.ae-bestand-was{font-weight:600;color:var(--ae-tinte)}
.ae-bestand-zusatz{font-size:.86rem;color:var(--ae-grau)}

/* Alle 23 Ämter als Karten mit Beschreibung und Zahl.
   ⚠️ `align-content:start` und feste Zeilenhöhe für den Lead: Ohne das
   bestimmt die längste Beschreibung die Höhe aller Karten in der Zeile. */
.ae-amtsliste{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.ae-amtskarte{display:flex;flex-direction:column;gap:.35rem;padding:.9rem 1rem;
  border:1px solid var(--ae-linie);border-radius:var(--ae-radius-gross);background:#fff;
  text-decoration:none;color:var(--ae-text);transition:border-color .12s,background .12s}
.ae-amtskarte:hover,.ae-amtskarte:focus-visible{border-color:var(--ae-blau);
  background:var(--ae-blau-hell)}
.ae-amtskarte-kopf{display:flex;align-items:center;gap:.45rem;color:var(--ae-blau);
  font-size:1.02rem}
.ae-amtskarte-kopf .ae-symbol{color:var(--ae-blau);flex:0 0 auto}
.ae-amtskarte-lead{font-size:.88rem;color:var(--ae-grau);line-height:1.45}
.ae-amtskarte-zahl{margin-top:auto;padding-top:.3rem;font-size:.85rem;font-weight:600;
  color:var(--ae-gold-text);font-variant-numeric:tabular-nums}

/* Städte-Einstieg */
.ae-staedte{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:8px}
.ae-stadt{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;
  padding:.55rem .8rem;border:1px solid var(--ae-linie);border-radius:var(--ae-radius);
  background:#fff;text-decoration:none;color:var(--ae-blau);font-weight:600}
.ae-stadt:hover,.ae-stadt:focus-visible{border-color:var(--ae-blau);background:var(--ae-blau-hell)}
.ae-stadt-zahl{font-size:.82rem;font-weight:400;color:var(--ae-grau);
  font-variant-numeric:tabular-nums}

/* Größeres Suchfeld auf der Startseite */
.ae-suche-gross input{padding:15px 16px;font-size:1.08rem}
.ae-suche-gross button{padding:15px 26px;font-size:1.05rem}

/* Steckbrief oben auf den Schritt-Seiten: das Wichtigste auf einen Blick.

   ⚠️ Als echte Tabelle mit <th scope="row">, nicht als Liste von Kästchen.
   Eine Sprachausgabe liest dann „Gebühr: gebührenfrei" statt zweier
   zusammenhangloser Wörter, und die Zuordnung bleibt auch dann klar, wenn die
   Zeilen auf dem Telefon umbrechen. */
.ae-steckbrief{width:100%;border-collapse:collapse;margin:0 0 1.6rem;
  border:1px solid var(--ae-blau-rand);border-radius:var(--ae-radius-gross);overflow:hidden}
.ae-steckbrief th,.ae-steckbrief td{padding:.6rem .9rem;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--ae-blau-rand);font-size:.95rem}
.ae-steckbrief tr:last-child th,.ae-steckbrief tr:last-child td{border-bottom:0}
.ae-steckbrief th{width:11rem;background:var(--ae-papier);font-weight:600;
  color:var(--ae-blau-dunkel)}
@media(max-width:520px){
  .ae-steckbrief th{width:8.5rem}
  .ae-steckbrief th,.ae-steckbrief td{padding:.5rem .7rem;font-size:.9rem}
}
/* Nur für Sprachausgaben - die Tabelle braucht eine Beschriftung, sichtbar
   wäre sie eine Überschrift zu viel. */
.ae-versteckt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap}

/* --- Inhaltsverzeichnis, eingeklappt ------------------------------------- */
/* ⚠️ Die erste Fassung war ein aufgeklappter Kasten ueber die volle Breite:
   sieben Eintraege ergaben 396 px Hoehe, jede Zeile 785 px breit fuer drei
   Woerter. Jetzt eine Zeile, die sich auf Wunsch oeffnet - und im offenen
   Zustand zweispaltig, damit kurze Titel keine leeren Zeilen erzeugen.
   Kein Akzentstreifen: Der Antwortkasten darueber hat schon einen. */
.ae-toc{margin:1.6rem 0;border:1px solid var(--ae-linie,#e3e8ee);border-radius:6px;
        background:var(--ae-flaeche,#f6f8fa);max-width:44rem}
/* ⚠️ `display:flex` auf <summary> entfernt in Chrome das Dreieck. Ein
   eingeklapptes Element, das nicht aufklappbar aussieht, wird nicht angeklickt -
   deshalb ein eigener Winkel, der sich beim Oeffnen dreht. */
.ae-toc summary{cursor:pointer;padding:11px 14px;font-weight:600;font-size:.95rem;
                color:var(--ae-akzent,#0f4a7a);display:flex;align-items:center;
                gap:10px;list-style:none}
.ae-toc summary::-webkit-details-marker{display:none}
.ae-toc summary::before{content:"";flex:none;width:.5em;height:.5em;
                        border-right:2px solid currentColor;border-bottom:2px solid currentColor;
                        transform:rotate(-45deg);transition:transform .15s;
                        margin-left:2px}
.ae-toc[open] summary::before{transform:rotate(45deg)}
.ae-toc-zahl{margin-left:auto}
.ae-toc summary:hover{background:rgba(15,74,122,.05)}
.ae-toc-zahl{font-weight:400;font-size:.85rem;color:var(--ae-text-leise,#5a6672);
             white-space:nowrap;margin-left:auto}
.ae-toc ul{list-style:none;margin:0;padding:4px 14px 12px}
.ae-toc li{margin:0}
.ae-toc a{display:block;padding:7px 0;text-decoration:underline;text-underline-offset:2px;
          font-size:.95rem}
@media(min-width:640px){
  .ae-toc ul{display:grid;grid-template-columns:1fr 1fr;column-gap:24px}
}

/* Sprungziele nicht direkt an die Fensterkante setzen. Eine klebende
   Kopfleiste gibt es hier nicht (nur eine klebende Seitenspalte), deshalb
   genuegt ein kleiner Abstand - er ist Bequemlichkeit, keine Reparatur. */
.ae-inhalt h2[id],.ae-inhalt h3[id],section[id]{scroll-margin-top:14px}

/* Buchstabenleiste des Ratgeber-Verzeichnisses */
.ae-abc{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.ae-abc li{border:0;margin:0}
.ae-abc a{display:block;min-width:2.1rem;text-align:center;padding:7px 6px;
          text-decoration:none;font-weight:600;border-radius:4px;
          background:#fff;border:1px solid var(--ae-linie,#e3e8ee)}
.ae-abc a:hover{background:rgba(15,74,122,.07)}

/* --- UIkit-Vorgaben zurücknehmen ----------------------------------------- */
/* ⚠️ **UIkit färbt `<em>` rot** (`em{color:#f0506e}`) - dieselbe Farbe, die es
   für Fehlermeldungen benutzt. Eine betonte Stelle im Fließtext sieht damit
   aus wie eine Warnung: „die Angabe, *wann* es zugegangen ist" stand rot im
   Text. Betonung ist Kursivschrift, keine Farbe.
   Ebenso `ins` und `mark` mit gelbem Grund - auf einer Auskunftsseite wirkt
   das wie eine Hervorhebung, die niemand gesetzt hat. */
.ae-inhalt em,.ae-antwort em,main em{color:inherit}
.ae-inhalt ins,main ins{background:none;color:inherit;text-decoration:underline}
.ae-inhalt mark,main mark{background:rgba(15,74,122,.12);color:inherit}