/* =====================================================================
   MeineBRD — Portal

   Wen bedient diese Seite? Menschen, die gerade Stress mit einer Behörde
   haben. Jemand ist umgezogen, hat den Job verloren, braucht einen
   Ausweis. Die Gestaltung hat genau eine Aufgabe: diesen Stress nicht
   zu vergrößern.

   Daraus folgen die Entscheidungen:

   - Viel Ruhe, wenig Fläche pro Bildschirm. Wer überfordert ist, liest
     keine Kachelwand.
   - Eine große Suche als Mittelpunkt. Alles andere ordnet sich unter.
   - Auf der Detailseite ist die zuständige Stelle nicht irgendein
     Abschnitt, sondern begleitet den Text im Seitenbereich mit.
   - Farbe bedeutet etwas: Petrol führt zu Handlungen, Bernstein warnt
     vor ungeprüften Angaben, Rot nur bei Fehlern.
   - Dunkelmodus wird unterstützt, weil viele Menschen abends am Handy
     lesen, wenn das Amt zu hat.
====================================================================== */

:root {
  /*
   * Nachgetragene Namen.
   *
   * Sechs Farbnamen wurden an 40 Stellen benutzt, ohne je definiert zu
   * sein. CSS meldet das nicht: Die Eigenschaft fällt still aus, eine
   * Fläche bleibt durchsichtig, eine Schrift erbt ihre Farbe von oben.
   * Aufgefallen ist es erst, als das Kontomenü leer aussah, obwohl zwölf
   * Punkte darin standen.
   *
   * Sie zeigen bewusst auf die vorhandenen Werte, statt neue Farben
   * einzuführen: Die Absicht war offenkundig dieselbe, nur unter anderem
   * Namen.
   */
  --paper:      #ffffff;
  --papier:     #ffffff;
  --tinte:      #12181a;
  --text-mute:  #5d686b;
  --accent:     #0f5c66;
  --warn:       #8a6410;
  --radius-m:   12px;

  color-scheme: light dark;

  --bg:            #f4f6f7;
  --surface:       #ffffff;
  --surface-2:     #eef1f1;
  --line:          #dfe4e4;
  --line-strong:   #c3cbcb;

  --ink:           #12181a;
  --text:          #2a3234;
  --text-soft:     #5d686b;

  --brand:         #0f5c66;
  --brand-strong:  #0a444c;
  --brand-soft:    #e4eff0;
  --brand-ring:    rgba(15, 92, 102, 0.25);

  --amber:         #8a6410;
  --amber-soft:    #fbf1dc;
  --alert:         #a32f2f;
  --alert-soft:    #fbeaea;
  --ok:            #23694a;
  --ok-soft:       #e6f2eb;

  --radius-s: 8px;
  --radius:   14px;
  --radius-l: 22px;

  --shadow-1: 0 1px 2px rgba(16, 30, 32, 0.05), 0 2px 8px rgba(16, 30, 32, 0.04);
  --shadow-2: 0 4px 12px rgba(16, 30, 32, 0.07), 0 16px 40px rgba(16, 30, 32, 0.07);

  --font: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Consolas, monospace;

  /*
   * Grundbreite des Portals. Von 1120 auf 1440 erhöht, damit Kopfzeile,
   * Inhalt und Fußzeile dieselben Kanten haben: Seit die Übersichten die
   * volle Breite nutzen, hing die Navigation sonst eingerückt darüber.
   * min() hält sie auf schmalen Geräten bei der Fensterbreite.
   */
  --wrap: min(1440px, 100%);
  --wrap-narrow: 760px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:          #0e1416;
    --surface:     #161e20;
    --surface-2:   #1d2729;
    --line:        #263133;
    --line-strong: #38474a;

    --ink:         #eef3f3;
    --text:        #d3dcdd;
    --text-soft:   #94a3a5;

    --brand:       #5cb3bd;
    --brand-strong:#7cc7d0;
    --brand-soft:  #14292d;
    --brand-ring:  rgba(92, 179, 189, 0.3);

    --amber:       #e0b567;
    --amber-soft:  #2b2314;
    --alert:       #e58b8b;
    --alert-soft:  #2c1818;
    --ok:          #74c39b;
    --ok-soft:     #142720;

    --shadow-1: 0 1px 2px rgba(0,0,0,0.4);
    --shadow-2: 0 8px 30px rgba(0,0,0,0.45);
  }
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--brand-strong); }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--brand-ring);
  outline-offset: 2px;
  border-radius: 4px;
}

.mono { font-family: var(--mono); font-size: 0.92em; }
.muted { color: var(--text-soft); font-size: 0.94em; }

/* Fließende Schriftgrößen: am Handy kompakt, am Schreibtisch großzügig,
   ohne Sprünge dazwischen. */
h1 {
  font-size: clamp(28px, 4.2vw, 42px);
  line-height: 1.15;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin: 0 0 14px;
  font-weight: 600;
}
h2 {
  font-size: clamp(19px, 2.2vw, 23px);
  line-height: 1.25;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0 0 14px;
  font-weight: 600;
}
h3 { font-size: 17px; font-weight: 600; color: var(--ink); margin: 0 0 8px; }

.lede { color: var(--text-soft); font-size: clamp(16px, 1.7vw, 19px); max-width: 62ch; margin: 0 0 8px; }

.container { max-width: var(--wrap); margin: 0 auto; padding: 0 22px; }
.container--narrow { max-width: var(--wrap-narrow); margin: 0 auto; padding: 34px 22px 80px; }
.container--form { max-width: 480px; margin: 0 auto; padding: 44px 22px 80px; }

/* ---------------------------------------------------------------------
   Kopfbereich
------------------------------------------------------------------------ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 11px 22px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.logo:hover { text-decoration: none; }
.logo__mark {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 9px;
  background: var(--brand);
  color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: -0.02em;
}
.logo__text { font-weight: 600; font-size: 17px; color: var(--ink); letter-spacing: -0.015em; }

.site-nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.site-nav a {
  color: var(--text-soft);
  text-decoration: none;
  font-size: 15px;
  padding: 7px 11px;
  border-radius: var(--radius-s);
}
.site-nav a:hover { background: var(--surface-2); color: var(--ink); }
.nav-cta {
  background: var(--brand) !important;
  color: #fff !important;
  font-weight: 500;
}
.nav-cta:hover { background: var(--brand-strong) !important; }
.nav-badge {
  display: inline-grid; place-items: center;
  min-width: 19px; height: 19px; padding: 0 5px;
  background: var(--alert); color: #fff;
  border-radius: 10px; font-size: 12px; font-weight: 600;
  margin-left: 5px;
}
.inline-form { display: inline; }
.link-button {
  background: none; border: none; cursor: pointer; padding: 7px 11px;
  color: var(--text-soft); font-size: 15px; border-radius: var(--radius-s);
}
.link-button:hover { background: var(--surface-2); color: var(--ink); }
.link-button--danger { color: var(--alert); font-size: 14px; }

.site-banner {
  background: var(--amber-soft); color: var(--amber);
  border-bottom: 1px solid color-mix(in srgb, var(--amber) 25%, transparent);
  padding: 10px 22px; font-size: 15px; text-align: center;
}

/* ---------------------------------------------------------------------
   Startseite
------------------------------------------------------------------------ */

.hero { padding: clamp(44px, 7vw, 84px) 0 0; }
.hero__inner { max-width: 820px; margin: 0 auto; padding: 0 22px; text-align: center; }
.hero h1 { max-width: 16ch; margin-inline: auto; }
.hero__lede { margin: 0 auto 30px; text-align: center; }

/* Die Suche ist der Mittelpunkt der Seite und wird als eigenständige
   Fläche gesetzt, die auf dem Hintergrund aufliegt. */
.searchbox {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-2);
  padding: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  text-align: left;
}
.searchbox input[type="search"] {
  flex: 1 1 300px;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 14px 12px;
  font-size: 17px;
}
.searchbox input[type="search"]::placeholder { color: var(--text-soft); }
.searchbox input[type="search"]:focus { outline: none; }
.searchbox__ort {
  flex: 0 1 190px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  border-radius: var(--radius-s);
  padding: 12px 13px;
  font-size: 15px;
}
.searchbox button {
  border: none;
  background: var(--brand);
  color: #fff;
  padding: 14px 26px;
  border-radius: var(--radius-s);
  font-size: 16px; font-weight: 600;
  cursor: pointer;
  flex: 0 0 auto;
}
.searchbox button:hover { background: var(--brand-strong); }

.searchbox--inline { box-shadow: var(--shadow-1); border-radius: var(--radius); margin-bottom: 26px; }
.searchbox--inline input[type="search"] { padding: 11px 10px; font-size: 16px; }
.searchbox--inline button { padding: 11px 20px; }

.examples { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin: 22px 0 0; padding: 0; list-style: none; }
.examples a {
  display: inline-block;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text-soft);
  text-decoration: none;
  font-size: 14.5px;
}
.examples a:hover { border-color: var(--brand); color: var(--brand); }

.section { padding: clamp(38px, 6vw, 66px) 0; }
.section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }

.tile-grid {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: 12px;
}
.tile {
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  text-decoration: none;
  height: 100%;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.tile:hover {
  border-color: var(--brand);
  box-shadow: var(--shadow-1);
  transform: translateY(-2px);
  text-decoration: none;
}
.tile__title { display: block; font-weight: 600; color: var(--ink); margin-bottom: 4px; font-size: 16.5px; }
.tile__desc { display: block; font-size: 14.5px; color: var(--text-soft); line-height: 1.5; }

.chip-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 9px; }
.chip {
  display: inline-block; padding: 9px 17px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; text-decoration: none; color: var(--text); font-size: 15px;
}
.chip:hover { background: var(--brand); border-color: var(--brand); color: #fff; text-decoration: none; }

/* ---------------------------------------------------------------------
   Ergebnisse
------------------------------------------------------------------------ */

.result-count { color: var(--text-soft); font-size: 15px; margin-bottom: 16px; }

.result-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.result {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px;
}
.result__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.result__head h2 { font-size: 18.5px; margin: 0 0 6px; }
.result__head h2 a { text-decoration: none; color: var(--ink); }
.result__head h2 a:hover { color: var(--brand); }
.result__desc { color: var(--text-soft); font-size: 15px; margin: 0 0 14px; }

/* Die zuständige Stelle ist die eigentliche Antwort. */
.responsible {
  background: var(--brand-soft);
  border-radius: var(--radius-s);
  padding: 13px 16px;
  font-size: 15px;
}
.responsible__label { display: block; font-size: 13px; font-weight: 600; color: var(--brand); margin-bottom: 3px; }
.responsible__name { font-weight: 600; color: var(--ink); }
.responsible__meta { display: block; color: var(--text-soft); font-size: 14px; }
.responsible--unknown { background: var(--surface-2); color: var(--text-soft); }

/* --- Datenstatus --- */

.data-status {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  font-size: 13px; font-weight: 600;
  padding: 4px 11px; border-radius: 999px;
}
.data-status__dot { width: 6px; height: 6px; border-radius: 50%; }
.data-status--verified { background: var(--ok-soft); color: var(--ok); }
.data-status--verified .data-status__dot { background: var(--ok); }
.data-status--demo { background: var(--amber-soft); color: var(--amber); }
.data-status--demo .data-status__dot { background: var(--amber); }

/* ---------------------------------------------------------------------
   Detailseite: Inhalt und zuständige Stelle nebeneinander
------------------------------------------------------------------------ */

.detail-layout { display: grid; gap: 26px; align-items: start; }
@media (min-width: 940px) {
  .detail-layout { grid-template-columns: minmax(0, 1fr) 322px; }
  .detail-aside { position: sticky; top: 78px; }
}

.breadcrumb { font-size: 14.5px; color: var(--text-soft); margin-bottom: 14px; display: flex; gap: 8px; flex-wrap: wrap; }
.breadcrumb a { color: var(--text-soft); }
.service-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin: 0 0 16px;
}
.card--brand { border-color: var(--brand); box-shadow: var(--shadow-1); }
.card--quiet { background: var(--surface-2); }

.authority-name { font-size: 17px; font-weight: 600; margin: 0 0 12px; }

.detail-list { display: grid; grid-template-columns: auto 1fr; gap: 7px 16px; margin: 0; font-size: 15px; }
.detail-list dt { color: var(--text-soft); }
.detail-list dd { margin: 0; }

.fact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 10px; margin: 0 0 16px; }
.fact { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 13px 15px; }
.fact__label { display: block; font-size: 13px; color: var(--text-soft); margin-bottom: 2px; }
.fact__value { display: block; font-weight: 600; color: var(--ink); font-size: 16px; }

.doc-list, .step-list { padding-left: 20px; margin: 0; font-size: 16px; }
.doc-list li, .step-list li { margin-bottom: 8px; }
.step-list li::marker { color: var(--brand); font-weight: 700; }

.button-row { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 16px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 11px 20px;
  border: 1px solid transparent;
  border-radius: var(--radius-s);
  font-size: 15.5px; font-weight: 600;
  cursor: pointer; text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-strong); color: #fff; }
.btn--secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn--secondary:hover { background: var(--surface-2); }
.btn--danger { background: transparent; color: var(--alert); border-color: var(--alert); }
.btn--danger:hover { background: var(--alert-soft); }
.btn--block { width: 100%; }

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

.form { margin-bottom: 18px; }
.field { margin-bottom: 17px; }
.field label { display: block; font-weight: 600; font-size: 15px; margin-bottom: 6px; color: var(--ink); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-s);
  background: var(--surface);
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--brand);
  outline: none;
  box-shadow: 0 0 0 3px var(--brand-ring);
}
.field textarea { min-height: 110px; resize: vertical; }
.field-hint { font-size: 14px; color: var(--text-soft); margin: 6px 0 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .field-row { grid-template-columns: 1fr; } }
.checkbox-row { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 400 !important; }
.inline-select-form { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 12px; }
.inline-select-form input, .inline-select-form select {
  padding: 11px 13px; border: 1px solid var(--line-strong); border-radius: var(--radius-s);
  background: var(--surface); flex: 1 1 170px;
}

.notice {
  padding: 14px 17px;
  border-radius: var(--radius-s);
  margin: 0 0 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong);
  font-size: 15.5px;
}
.notice p { margin: 0 0 8px; }
.notice p:last-child { margin-bottom: 0; }
.notice--error { background: var(--alert-soft); border-color: var(--alert); color: var(--alert); }
.notice--warn  { background: var(--amber-soft); border-color: var(--amber); color: var(--amber); }
.notice--ok    { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); }
.notice--info  { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-strong); }

/* ---------------------------------------------------------------------
   Community
------------------------------------------------------------------------ */

.cat-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.cat-list li { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.cat-list li:last-child { border-bottom: none; }
.cat-list a { text-decoration: none; flex-grow: 1; }
.cat-list__name { display: block; font-weight: 600; color: var(--ink); }
.cat-list__desc { display: block; font-size: 14.5px; color: var(--text-soft); }
.cat-list__count {
  font-family: var(--mono); font-size: 13px; color: var(--text-soft);
  background: var(--surface-2); padding: 3px 11px; border-radius: 999px;
}

.post-list { list-style: none; padding: 0; margin: 0; }
.post-list li { border-bottom: 1px solid var(--line); padding: 14px 0; }
.post-list li:last-child { border-bottom: none; }
.post-list__title { font-weight: 600; color: var(--ink); text-decoration: none; font-size: 16.5px; }
.post-list__title:hover { color: var(--brand); }
.post-list__meta { display: block; font-size: 14px; color: var(--text-soft); margin-top: 4px; }
.post-list--cards li {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 17px 19px; margin-bottom: 10px;
}

.post-meta { font-size: 14.5px; color: var(--text-soft); margin: 0 0 12px; }
.post-body { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 16.5px; line-height: 1.7; }

.comment {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 17px 19px; margin-bottom: 10px;
}

.vote-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.vote-btn {
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: 999px; padding: 7px 15px; font-size: 14.5px; cursor: pointer;
}
.vote-btn:hover { border-color: var(--brand); color: var(--brand); }
.vote-btn.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }
.vote-score { font-size: 14px; color: var(--text-soft); font-family: var(--mono); }

.report-box { margin-left: auto; font-size: 14px; }
.report-box summary { cursor: pointer; color: var(--text-soft); }
.report-form {
  margin-top: 12px; padding: 15px; background: var(--surface-2);
  border-radius: var(--radius-s); min-width: 260px;
}

.pager { display: flex; gap: 18px; align-items: center; justify-content: center; margin-top: 24px; font-size: 15px; }

.notif-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.notif-list li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.notif-list li.is-unread { border-left: 3px solid var(--brand); }
.notif-list a { display: block; padding: 15px 18px; text-decoration: none; }
.notif-list a:hover { background: var(--surface-2); }
.notif-list__title { display: block; font-weight: 600; color: var(--ink); }
.notif-list__body { display: block; font-size: 15px; color: var(--text-soft); margin-top: 3px; }
.notif-list__time { display: block; font-size: 13px; color: var(--text-soft); font-family: var(--mono); margin-top: 5px; }

/* ---------------------------------------------------------------------
   Jobbörse
------------------------------------------------------------------------ */

.filter-bar {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px 18px; margin-bottom: 22px;
}
.filter-bar__row { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 9px; }
.filter-bar__row:last-child { margin-bottom: 0; }
.filter-bar input[type="search"], .filter-bar input[type="text"] {
  flex: 1 1 220px; padding: 11px 13px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-s); background: var(--surface);
}
.filter-bar select {
  padding: 11px 13px; border: 1px solid var(--line-strong);
  border-radius: var(--radius-s); background: var(--surface); flex: 1 1 155px;
}

.job-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.job-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 19px 21px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.job-card:hover { border-color: var(--brand); box-shadow: var(--shadow-1); }
.job-card__title { font-size: 18px; font-weight: 600; color: var(--ink); text-decoration: none; }
.job-card__title:hover { color: var(--brand); }
.job-card__company { margin: 4px 0 11px; color: var(--text-soft); font-size: 15px; }
.job-card__tags { margin: 0; display: flex; gap: 7px; flex-wrap: wrap; }

.tag {
  display: inline-block; padding: 4px 11px; border-radius: 999px;
  background: var(--surface-2); color: var(--text-soft); font-size: 13.5px;
}
.tag--accent { background: var(--brand-soft); color: var(--brand); font-weight: 600; }

/* ---------------------------------------------------------------------
   Vorgänge
------------------------------------------------------------------------ */

.process { }
.process--overdue { border-left: 3px solid var(--alert); }
.overdue-flag { color: var(--alert); margin-left: 6px; }
.process__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.process__head h2 { margin: 0; font-size: 18px; }

.badge { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 13.5px; font-weight: 600; }
.badge--ok { background: var(--ok-soft); color: var(--ok); }
.badge--warn { background: var(--amber-soft); color: var(--amber); }
.badge--neutral { background: var(--surface-2); color: var(--text-soft); }

.task-list { list-style: none; padding: 0; margin: 14px 0; }
.task-list li { border-bottom: 1px solid var(--line); }
.task-list li:last-child { border-bottom: none; }
.task { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.task .task-form { flex: 1 1 250px; margin: 0; }
.task--overdue .task-toggle__label { color: var(--alert); }

.task-toggle {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: none; border: none; padding: 12px 2px; cursor: pointer; font-size: 16px;
}
.task-toggle:hover { color: var(--brand); }
.task-toggle__box {
  width: 21px; height: 21px; flex-shrink: 0;
  border: 1.5px solid var(--line-strong); border-radius: 6px;
  display: grid; place-items: center; font-size: 13px; color: #fff;
}
.task-toggle.is-done .task-toggle__box { background: var(--brand); border-color: var(--brand); }
.task-toggle.is-done .task-toggle__label { color: var(--text-soft); text-decoration: line-through; }

.task__side { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 0; }
.task__due {
  font-family: var(--mono); font-size: 13px; color: var(--text-soft);
  background: var(--surface-2); padding: 3px 10px; border-radius: 999px; white-space: nowrap;
}
.task__due.is-overdue { background: var(--alert-soft); color: var(--alert); }
.task__setup summary { cursor: pointer; font-size: 14px; color: var(--text-soft); }
.task__form-inline {
  margin-top: 11px; padding: 15px; background: var(--surface-2);
  border-radius: var(--radius-s); min-width: 240px;
}
.task__form-inline .field { margin-bottom: 11px; }

.add-task { display: flex; gap: 9px; margin: 16px 0; flex-wrap: wrap; }
.add-task input[type="text"] {
  flex: 1 1 220px; padding: 11px 14px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-s); background: var(--surface);
}
.process__more { margin: 14px 0; }
.process__more summary { cursor: pointer; font-size: 15px; color: var(--text-soft); }
.process__note {
  background: var(--surface-2); border-radius: var(--radius-s);
  padding: 13px 16px; margin: 14px 0; font-size: 15.5px; white-space: pre-wrap;
}

/* ---------------------------------------------------------------------
   Fußbereich
------------------------------------------------------------------------ */

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding: 34px 0;
  margin-top: 60px;
}
.site-footer__inner { max-width: var(--wrap); margin: 0 auto; padding: 0 22px; }
.disclaimer { font-size: 14.5px; color: var(--text-soft); max-width: 72ch; margin: 0 0 16px; }
.footer-nav { display: flex; gap: 20px; flex-wrap: wrap; font-size: 14.5px; }
.footer-nav a { color: var(--text-soft); text-decoration: none; }
.footer-nav a:hover { color: var(--brand); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .tile:hover { transform: none; }
}

/* --- Forum ---------------------------------------------------------------- */

.board-section { margin-bottom: 30px; }
.board-section h2 { font-size: 15px; text-transform: none; color: var(--text-soft); font-weight: 600;
  border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 4px; }

.board-list { list-style: none; padding: 0; margin: 0; }
.board {
  display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 18px;
  align-items: center; padding: 16px 4px; border-bottom: 1px solid var(--line);
}
.board:last-child { border-bottom: none; }
.board__name { font-weight: 600; color: var(--ink); text-decoration: none; font-size: 16.5px; }
.board__name:hover { color: var(--brand); }
.board__desc { display: block; font-size: 14.5px; color: var(--text-soft); margin-top: 2px; }
.board__figures { display: grid; gap: 2px; font-size: 13.5px; color: var(--text-soft); text-align: right; white-space: nowrap; }
.board__last { font-size: 13.5px; text-align: right; min-width: 170px; display: grid; gap: 2px; }
@media (max-width: 760px) {
  .board { grid-template-columns: 1fr; gap: 8px; }
  .board__figures, .board__last { text-align: left; }
}

.topic-list { list-style: none; padding: 0; margin: 0; }
.topic {
  display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 18px; align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 15px 18px; margin-bottom: 8px;
}
.topic--pinned { border-left: 3px solid var(--brand); }
.topic__title { font-weight: 600; color: var(--ink); text-decoration: none; font-size: 16.5px; }
.topic__title:hover { color: var(--brand); }
.topic__meta { display: block; font-size: 14px; color: var(--text-soft); margin-top: 3px; }
.topic__figures { display: grid; gap: 2px; font-size: 13.5px; color: var(--text-soft); text-align: right; white-space: nowrap; }
.topic__last { font-size: 13.5px; text-align: right; min-width: 160px; display: grid; gap: 2px; }
@media (max-width: 760px) {
  .topic { grid-template-columns: 1fr; gap: 8px; }
  .topic__figures, .topic__last { text-align: left; }
}

/* Beitrag mit Verfasserspalte, wie in klassischer Forensoftware. */
.fpost {
  display: grid; grid-template-columns: 190px minmax(0,1fr);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); margin-bottom: 12px; overflow: hidden;
}
.fpost__author {
  background: var(--surface-2); padding: 16px 18px; display: grid; gap: 3px; align-content: start;
  border-right: 1px solid var(--line);
}
.fpost__name { font-weight: 600; color: var(--ink); text-decoration: none; }
.fpost__body { padding: 16px 20px; min-width: 0; }
.fpost__head { display: flex; gap: 12px; justify-content: space-between; margin-bottom: 10px; flex-wrap: wrap; }
@media (max-width: 720px) {
  .fpost { grid-template-columns: 1fr; }
  .fpost__author { border-right: none; border-bottom: 1px solid var(--line);
    display: flex; gap: 12px; flex-wrap: wrap; align-items: baseline; }
}

/* --- Anfragen ------------------------------------------------------------- */

.ticket-msg {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong);
  border-radius: var(--radius); padding: 16px 19px; margin-bottom: 10px;
}
.ticket-msg--own { border-left-color: var(--brand); background: var(--brand-soft); }

/* =====================================================================
   Forum: eigene, breitere Bühne

   Das Forum lief bisher in der schmalen Lesespalte des Portals. Für eine
   Themenliste mit Zählern und letzten Beiträgen ist das zu eng: die
   Spalten quetschen sich, obwohl links und rechts Platz frei bleibt.
   Deshalb eine eigene Breite plus Seitenleiste.
====================================================================== */

.forum-wrap { max-width: 1360px; margin: 0 auto; padding: 30px 22px 80px; }
.forum-layout { display: grid; gap: 26px; align-items: start; }
@media (min-width: 1080px) {
  .forum-layout { grid-template-columns: minmax(0, 1fr) 310px; }
  .forum-side { position: sticky; top: 78px; }
}

.forum-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; margin-bottom: 22px;
}
.forum-head h1 { margin: 0 0 4px; }

/* --- Bereichsübersicht --- */

.board-section { margin-bottom: 26px; }
.board-section__title {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 14px; font-weight: 600; color: var(--text-soft);
  letter-spacing: 0.02em; text-transform: uppercase;
  padding: 0 4px 9px; margin: 0 0 2px; border-bottom: 2px solid var(--brand);
}

.board-list {
  list-style: none; padding: 0; margin: 0;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
.board {
  display: grid; grid-template-columns: 46px minmax(0,1fr) 132px 250px;
  gap: 16px; align-items: center;
  padding: 15px 18px; border-bottom: 1px solid var(--line);
}
.board:last-child { border-bottom: none; }
.board:hover { background: var(--surface-2); }

.board__icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand);
}
.board__icon .icon { display: block; }

.board__name { font-weight: 600; color: var(--ink); text-decoration: none; font-size: 16.5px; }
.board__name:hover { color: var(--brand); }
.board__desc { display: block; font-size: 14px; color: var(--text-soft); margin-top: 3px; line-height: 1.45; }

.board__figures { display: grid; gap: 2px; font-size: 13.5px; color: var(--text-soft); text-align: right; white-space: nowrap; }
.board__figures strong { color: var(--ink); font-variant-numeric: tabular-nums; }

.board__last { font-size: 13.5px; display: grid; gap: 2px; min-width: 0; }
.board__last a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 900px) {
  .board { grid-template-columns: 40px minmax(0,1fr); }
  .board__figures, .board__last { grid-column: 2; text-align: left; }
}

/* --- Seitenleiste --- */

.side-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); margin-bottom: 14px; overflow: hidden;
}
.side-card__head {
  padding: 12px 16px; border-bottom: 1px solid var(--line);
  font-size: 14.5px; font-weight: 600; color: var(--ink); background: var(--surface-2);
}
.side-card__body { padding: 6px 16px 12px; }
.side-list { list-style: none; padding: 0; margin: 0; }
.side-list li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.side-list li:last-child { border-bottom: none; }
.side-list a { font-size: 14.5px; color: var(--ink); text-decoration: none; display: block; line-height: 1.4; }
.side-list a:hover { color: var(--brand); }
.side-list__meta { display: block; font-size: 13px; color: var(--text-soft); margin-top: 3px; }

.side-figures { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); }
.side-figure { background: var(--surface); padding: 12px 14px; }
.side-figure__value { display: block; font-size: 19px; font-weight: 600; color: var(--brand); font-variant-numeric: tabular-nums; }
.side-figure__label { display: block; font-size: 12.5px; color: var(--text-soft); }

/* --- Themenliste --- */

.topic-list { list-style: none; padding: 0; margin: 0;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; }
.topic {
  display: grid; grid-template-columns: 40px minmax(0,1fr) 118px 210px;
  gap: 14px; align-items: center;
  padding: 14px 18px; margin: 0; border: none;
  border-bottom: 1px solid var(--line); border-radius: 0; background: none;
}
.topic:last-child { border-bottom: none; }
.topic:hover { background: var(--surface-2); border-color: var(--line); box-shadow: none; }
.topic--pinned { background: var(--brand-soft); border-left: 3px solid var(--brand); padding-left: 15px; }

.topic__avatar {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 700; color: #fff; letter-spacing: -0.02em;
}
@media (max-width: 900px) {
  .topic { grid-template-columns: 38px minmax(0,1fr); }
  .topic__figures, .topic__last { grid-column: 2; text-align: left; }
}

/* --- Beitrag --- */

.fpost__avatar {
  width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center; margin: 0 auto 10px;
  font-size: 22px; font-weight: 700; color: #fff;
}
.fpost__author { text-align: center; }
.fpost__badge {
  display: inline-block; margin-top: 5px; padding: 2px 9px; border-radius: 999px;
  background: var(--brand); color: #fff; font-size: 11.5px; font-weight: 600;
}
.fpost__num { font-family: var(--mono); font-size: 13px; color: var(--text-soft); }
@media (max-width: 720px) { .fpost__author { text-align: left; } .fpost__avatar { margin: 0; } }

/* Gerenderter Beitragstext */
.post-body { font-size: 16.5px; line-height: 1.7; overflow-wrap: anywhere; }
.post-body p { margin: 0 0 12px; }
.post-body p:last-child { margin-bottom: 0; }
.post-body h3 { font-size: 17px; margin: 18px 0 8px; }
.post-body ul, .post-body ol { margin: 0 0 12px; padding-left: 22px; }
.post-body li { margin-bottom: 5px; }
.post-body blockquote {
  margin: 0 0 12px; padding: 10px 15px;
  background: var(--surface-2); border-left: 3px solid var(--brand);
  border-radius: 0 var(--radius-s) var(--radius-s) 0; font-size: 15.5px;
}
.post-body blockquote p:last-child { margin-bottom: 0; }
.post-body code {
  font-family: var(--mono); font-size: 0.9em;
  background: var(--surface-2); padding: 1px 6px; border-radius: 4px;
}
.post-body pre {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-s); padding: 13px 15px;
  overflow-x: auto; margin: 0 0 12px;
}
.post-body pre code { background: none; padding: 0; font-size: 14px; }
.post-body hr { border: none; border-top: 1px solid var(--line); margin: 16px 0; }
.post-body a { overflow-wrap: anywhere; }

/* --- Editor --- */

.editor { border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.editor:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }

.editor__bar {
  display: flex; gap: 2px; flex-wrap: wrap; align-items: center;
  padding: 7px 9px; background: var(--surface-2); border-bottom: 1px solid var(--line);
}
.editor__btn {
  display: grid; place-items: center;
  min-width: 32px; height: 32px; padding: 0 8px;
  background: none; border: 1px solid transparent; border-radius: 7px;
  color: var(--text-soft); cursor: pointer; font-size: 14px;
}
.editor__btn:hover { background: var(--surface); border-color: var(--line); color: var(--brand); }
.editor__btn b, .editor__btn i { font-size: 15px; }
.editor__sep { width: 1px; height: 20px; background: var(--line-strong); margin: 0 5px; }

.editor textarea {
  width: 100%; border: none; padding: 14px 16px; resize: vertical;
  min-height: 190px; font-size: 16px; line-height: 1.65; background: var(--surface);
}
.editor textarea:focus { outline: none; }

.editor__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 8px 12px; background: var(--surface-2); border-top: 1px solid var(--line);
  font-size: 13px; color: var(--text-soft);
}
.editor__tabs { display: flex; gap: 2px; }
.editor__tab {
  background: none; border: none; padding: 6px 12px; border-radius: 7px;
  color: var(--text-soft); cursor: pointer; font-size: 13.5px;
}
.editor__tab:hover { background: var(--surface); color: var(--ink); }
.editor__tab.is-active { background: var(--surface); color: var(--brand); font-weight: 600; }

.editor__panel { padding: 12px 14px; border-top: 1px solid var(--line); background: var(--surface); }
.editor__panel[hidden] { display: none; }
.emoji-row { display: flex; flex-wrap: wrap; gap: 3px; }
.emoji-btn {
  background: none; border: none; font-size: 20px; line-height: 1;
  padding: 5px 6px; border-radius: 7px; cursor: pointer;
}
.emoji-btn:hover { background: var(--surface-2); }
.editor__help { font-size: 13.5px; color: var(--text-soft); line-height: 1.7; }
.editor__help code { font-family: var(--mono); background: var(--surface-2); padding: 1px 5px; border-radius: 4px; }
.editor__preview { min-height: 60px; }
.editor__count { font-variant-numeric: tabular-nums; }

/* Symbolauswahl im Adminpanel */
.icon-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
.icon-choice { position: relative; }
.icon-choice input { position: absolute; opacity: 0; pointer-events: none; }
.icon-choice span {
  display: grid; place-items: center; gap: 4px;
  padding: 9px 4px; border: 1px solid var(--line); border-radius: 8px;
  cursor: pointer; font-size: 11px; color: var(--text-soft); text-align: center;
}
.icon-choice input:checked + span { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.icon-choice input:focus-visible + span { outline: 3px solid var(--brand-ring); }

/* --- Profil, Avatare und Ränge ------------------------------------------- */

/* Abgerundetes Viereck statt Kreis: sachlicher, näher an einem Lichtbild
   im Ausweis als an einem Profilbild im sozialen Netzwerk. */
.avatar { border-radius: 8px; object-fit: cover; display: block; flex-shrink: 0; }
/*
 * Namenskürzel auf gedecktem Grund, nicht auf einer Buntfarbe je Name.
 * Die Farbe trug keine Information; sie war aus dem Namen abgeleitet.
 * Auf einer Seite, über die Behördenpost und Rechnungen laufen, wirken
 * bunte Kreise beiläufig.
 */
.avatar--initials {
  display: grid; place-items: center;
  background: var(--surface-2, #e7ebec);
  color: var(--text-soft); font-weight: 600; letter-spacing: 0;
  border: 1px solid var(--line);
}

.rank {
  display: inline-block; margin-left: 8px; padding: 2px 10px;
  border-radius: 999px; font-size: 12.5px; font-weight: 600;
  color: var(--rank-color); background: color-mix(in srgb, var(--rank-color) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--rank-color) 30%, transparent);
  vertical-align: middle;
}
/* Verwaltungsränge werden gefüllt dargestellt, damit sie sich klar von
   erreichten Rängen unterscheiden und nicht nachgeahmt wirken. */
.rank--staff { color: #fff; background: var(--rank-color); border-color: var(--rank-color); }

.profile-preview {
  display: flex; align-items: center; gap: 18px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px 20px; margin-bottom: 20px;
}

.color-picker { display: flex; gap: 8px; flex-wrap: wrap; }
.color-choice input { position: absolute; opacity: 0; pointer-events: none; }
.color-choice span {
  display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 50%; color: #fff; font-weight: 700; font-size: 14px;
  cursor: pointer; border: 3px solid transparent;
}
.color-choice input:checked + span { border-color: var(--ink); }
.color-choice input:focus-visible + span { outline: 3px solid var(--brand-ring); }

.fpost__signature {
  margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: 14px; color: var(--text-soft); line-height: 1.55;
}
.fpost__signature p { margin: 0 0 4px; }
.fpost__signature p:last-child { margin-bottom: 0; }

.fpost__author .avatar { margin: 0 auto 10px; }
@media (max-width: 720px) { .fpost__author .avatar { margin: 0; } }

/* --- Letzte Beiträge als Leiste über dem Forum -------------------------- */

.forum-single { display: block; }

.latest {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); margin-bottom: 24px; overflow: hidden;
}
.latest__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding: 12px 18px; background: var(--surface-2); border-bottom: 1px solid var(--line);
}
.latest__head h2 { margin: 0; font-size: 15px; }
.latest__stats { font-size: 13.5px; color: var(--text-soft); }

.latest__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1px; background: var(--line);
}
.latest__item { background: var(--surface); padding: 12px 18px; min-width: 0; }
.latest__item:hover { background: var(--surface-2); }
.latest__title {
  display: block; font-size: 15px; font-weight: 600; color: var(--ink);
  text-decoration: none; line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.latest__title:hover { color: var(--brand); }
.latest__meta { display: block; font-size: 13px; color: var(--text-soft); margin-top: 3px; }

/* --- Pakete --------------------------------------------------------------- */

.plan-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px; margin: 16px 0;
}
.plan {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px 22px 20px;
}
.plan--featured { border-color: var(--brand); box-shadow: var(--shadow-1); }
.plan--current { border-color: var(--ok); }
.plan__flag {
  position: absolute; top: -10px; left: 22px;
  background: var(--brand); color: #fff; font-size: 12px; font-weight: 600;
  padding: 3px 11px; border-radius: 999px;
}
.plan__name { font-size: 19px; margin: 0 0 2px; }
.plan__tagline { color: var(--text-soft); font-size: 14.5px; margin: 0 0 12px; }
.plan__price { font-size: 22px; font-weight: 600; color: var(--ink); margin: 0 0 12px; }
.plan__desc { font-size: 14.5px; color: var(--text-soft); margin: 0 0 14px; line-height: 1.55; }
.plan__list { list-style: none; padding: 0; margin: 0 0 18px; font-size: 15px; }
.plan__list li { padding: 6px 0 6px 24px; position: relative; }
.plan__list li::before {
  content: ""; position: absolute; left: 4px; top: 12px;
  width: 9px; height: 5px; border-left: 2px solid var(--brand); border-bottom: 2px solid var(--brand);
  transform: rotate(-45deg);
}
.plan__foot { margin-top: auto; }
.plan__foot details summary::-webkit-details-marker { display: none; }
.plan__foot details[open] summary { display: none; }

/* --- Werbefläche ---------------------------------------------------------
   Deutlich abgesetzt und beschriftet. Auf einem Portal mit Behördenauskünften
   darf nie ein Zweifel entstehen, was Anzeige ist und was Auskunft.        */

.ad {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: var(--surface-2);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  padding: 16px 18px; margin: 22px 0;
  position: relative;
}
.ad__label {
  position: absolute; top: -9px; left: 16px;
  background: var(--bg); padding: 0 8px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-soft);
}
.ad__body { flex: 1 1 260px; min-width: 0; }
.ad__title { display: block; font-size: 16px; color: var(--ink); }
.ad__text { margin: 4px 0 0; font-size: 14.5px; color: var(--text-soft); line-height: 1.5; }
.ad__from { margin: 6px 0 0; font-size: 12.5px; color: var(--text-soft); }

/* --- Profilwechsel -------------------------------------------------------- */

.profilwechsel { position: relative; }
.profilwechsel > summary { list-style: none; cursor: pointer; }
.profilwechsel > summary::-webkit-details-marker { display: none; }

.profilwechsel__aktuell {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 11px 5px 6px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface);
  font-size: 14.5px; color: var(--ink); max-width: 210px;
}
.profilwechsel__aktuell:hover { border-color: var(--brand); }
.profilwechsel__aktuell > span:last-child {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.profilwechsel__logo {
  width: 26px; height: 26px; border-radius: 7px; object-fit: cover; flex-shrink: 0;
}
.profilwechsel__logo--text {
  display: grid; place-items: center;
  color: #fff; font-size: 11px; font-weight: 700;
}

.profilwechsel__liste {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 40;
  min-width: 280px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-2); overflow: hidden;
}
.profilwechsel__eintrag {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 11px 14px; background: none; border: none; cursor: pointer;
  border-bottom: 1px solid var(--line);
}
.profilwechsel__eintrag:hover:not(:disabled) { background: var(--surface-2); }
.profilwechsel__eintrag:disabled { opacity: .5; cursor: not-allowed; }
.profilwechsel__eintrag.is-active { background: var(--brand-soft); }
.profilwechsel__eintrag strong { display: block; font-size: 14.5px; color: var(--ink); }
.profilwechsel__zusatz { display: block; font-size: 12.5px; color: var(--text-soft); }
.profilwechsel__fuss {
  display: block; padding: 10px 14px; font-size: 13.5px;
  text-decoration: none; background: var(--surface-2);
}

/* --- Unternehmensprofil als Visitenkarte --------------------------------- */

.vcard {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-l); overflow: hidden; margin-bottom: 26px;
}
.vcard__kopf {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 28px 30px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--brand-firma) 10%, var(--surface)) 0%, var(--surface) 100%);
  border-bottom: 3px solid var(--brand-firma);
}
.vcard__logo {
  width: 88px; height: 88px; border-radius: 18px; object-fit: cover;
  background: var(--surface); flex-shrink: 0;
  border: 1px solid var(--line);
}
.vcard__logo--text {
  display: grid; place-items: center;
  background: var(--brand-firma); color: #fff;
  font-size: 30px; font-weight: 700; border: none;
}
.vcard__titel h1 { margin: 0 0 4px; font-size: clamp(24px, 3.4vw, 32px); }
.vcard__tagline { margin: 0 0 10px; color: var(--text-soft); font-size: 17px; }
.vcard__meta { margin: 0; display: flex; gap: 6px; flex-wrap: wrap; }

.vcard__body { display: grid; gap: 20px; padding: 24px 26px; }
@media (min-width: 900px) {
  .vcard__body { grid-template-columns: minmax(0, 1fr) 330px; }
}
.vcard__haupt .card:first-child { margin-top: 0; }
.vcard__seite .card { margin-bottom: 14px; }

.vcard__fuss {
  padding: 14px 26px; background: var(--surface-2);
  border-top: 1px solid var(--line);
  font-size: 13.5px; color: var(--text-soft);
}

.leistungen { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.leistungen li { padding-left: 24px; position: relative; font-size: 16px; }
.leistungen li::before {
  content: ""; position: absolute; left: 4px; top: 9px;
  width: 9px; height: 5px;
  border-left: 2px solid var(--brand-firma); border-bottom: 2px solid var(--brand-firma);
  transform: rotate(-45deg);
}

/* Verzeichnis */
.firma-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; list-style: none; padding: 0; margin: 0; }
.firma {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px 18px; text-decoration: none;
}
.firma:hover { border-color: var(--brand); box-shadow: var(--shadow-1); }
.firma__logo { width: 46px; height: 46px; border-radius: 11px; object-fit: cover; flex-shrink: 0; }
.firma__logo--text { display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 15px; }
.firma__name { display: block; font-weight: 600; color: var(--ink); font-size: 16.5px; }
.firma__tagline { display: block; font-size: 14px; color: var(--text-soft); margin-top: 2px; }
.firma__ort { display: block; font-size: 13px; color: var(--text-soft); margin-top: 6px; }

.oeffnung {
  display: grid; grid-template-columns: 110px 1fr auto 1fr auto;
  gap: 8px; align-items: center; margin-bottom: 7px;
}
.oeffnung__tag { font-size: 14.5px; color: var(--text-soft); }
.oeffnung input[type="text"] {
  padding: 8px 11px; border: 1px solid var(--line-strong);
  border-radius: var(--radius-s); background: var(--surface); width: 100%;
}
@media (max-width: 620px) {
  .oeffnung { grid-template-columns: 1fr 1fr; }
  .oeffnung__tag { grid-column: 1 / -1; font-weight: 600; }
}

/* --- Unternehmensteam ----------------------------------------------------- */

.team-liste { list-style: none; padding: 0; margin: 0; }
.team-eintrag {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 13px 0; border-bottom: 1px solid var(--line);
}
.team-eintrag:last-child { border-bottom: none; }
.team-eintrag__daten { flex: 1 1 200px; min-width: 0; }
.team-eintrag__daten strong { display: block; color: var(--ink); }
.team-eintrag__daten .muted { display: block; font-size: 13.5px; }
.team-eintrag__rolle { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.team-eintrag__rolle select {
  padding: 7px 11px; border: 1px solid var(--line-strong);
  border-radius: var(--radius-s); background: var(--surface); font-size: 14px;
}

.rollen-tabelle { width: 100%; border-collapse: collapse; font-size: 14px; }
.rollen-tabelle th, .rollen-tabelle td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.rollen-tabelle th { font-size: 13px; color: var(--text-soft); font-weight: 600; }
.rollen-tabelle .mitte { text-align: center; color: var(--brand); font-weight: 700; }

/* --- Bewerbungsverwaltung ------------------------------------------------- */

.funnel {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; margin-bottom: 20px;
}
.funnel__stufe {
  background: var(--surface); padding: 14px 12px; text-decoration: none; text-align: center;
}
.funnel__stufe:hover { background: var(--surface-2); }
.funnel__stufe.is-active { background: var(--brand-soft); box-shadow: inset 0 -3px 0 var(--brand); }
.funnel__wert { display: block; font-size: 24px; font-weight: 600; color: var(--brand); font-variant-numeric: tabular-nums; }
.funnel__name { display: block; font-size: 12.5px; color: var(--text-soft); margin-top: 2px; }

.filter-bar { margin-bottom: 16px; }
.filter-bar__row { display: flex; gap: 8px; flex-wrap: wrap; }
.filter-bar__row input, .filter-bar__row select {
  padding: 9px 12px; border: 1px solid var(--line-strong);
  border-radius: var(--radius-s); background: var(--surface); font-size: 14.5px;
}
.filter-bar__row input[type="search"] { flex: 1 1 220px; }

.bewerbung-liste { list-style: none; padding: 0; margin: 0;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; }
.bewerbung {
  display: grid; grid-template-columns: 44px minmax(0,1fr) 100px 150px 140px;
  gap: 14px; align-items: center; padding: 13px 18px;
  border-bottom: 1px solid var(--line);
}
.bewerbung:last-child { border-bottom: none; }
.bewerbung:hover { background: var(--surface-2); }
.bewerbung__name { display: block; font-weight: 600; color: var(--ink); text-decoration: none; font-size: 16px; }
.bewerbung__name:hover { color: var(--brand); }
.bewerbung__stelle { display: block; font-size: 14px; color: var(--text-soft); }
.bewerbung__meta { display: block; font-size: 13px; color: var(--text-soft); margin-top: 2px; }
.bewerbung__bewertung { color: var(--accent); font-size: 14px; white-space: nowrap; }
@media (max-width: 900px) {
  .bewerbung { grid-template-columns: 44px minmax(0,1fr); }
  .bewerbung__bewertung, .bewerbung__zustaendig, .bewerbung .badge { grid-column: 2; }
}

.verlauf { list-style: none; padding: 0; margin: 0; }
.verlauf__eintrag {
  padding: 12px 0 12px 16px; border-left: 3px solid var(--line-strong);
  margin-bottom: 4px;
}
.verlauf__eintrag--nachricht { border-left-color: var(--brand); background: var(--brand-soft); border-radius: 0 var(--radius-s) var(--radius-s) 0; padding-right: 14px; }
.verlauf__eintrag--vermerk { border-left-color: var(--accent); }
.verlauf__eintrag--status { border-left-color: var(--ok); }
.verlauf__kopf { display: flex; gap: 9px; align-items: baseline; flex-wrap: wrap; font-size: 13.5px; }
.verlauf__text { margin: 5px 0 0; font-size: 15px; line-height: 1.6; white-space: pre-wrap; }

/* --- Lebenslauf und Unterlagen -------------------------------------------- */

.cv-block {
  border: 1px solid var(--line); border-radius: var(--radius-s);
  padding: 14px 16px 4px; margin-bottom: 12px; background: var(--surface-2);
}
.cv-block legend {
  padding: 0 8px; font-size: 13px; font-weight: 600; color: var(--text-soft);
}

/* --- Hilfebereich --------------------------------------------------------- */

.faq-gruppe { margin-bottom: 30px; }
.faq-gruppe h2 { margin: 0 0 4px; }
.faq-liste { list-style: none; padding: 0; margin: 12px 0 0;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; }
.faq-liste li { border-bottom: 1px solid var(--line); }
.faq-liste li:last-child { border-bottom: none; }
.faq-liste a {
  display: block; padding: 14px 18px; text-decoration: none;
  color: var(--ink); font-size: 16px;
}
.faq-liste a:hover { background: var(--surface-2); color: var(--brand); }

.faq-antwort { font-size: 17px; line-height: 1.7; }
.faq-rueckmeldung {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 16px 18px; margin-top: 24px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius);
}

/* --- Unterstützung -------------------------------------------------------- */

.fortschritt {
  height: 14px; border-radius: 999px; overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--line);
}
.fortschritt__balken {
  display: block; height: 100%; background: var(--brand);
  transition: width .3s ease;
}

.tag--support {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-color: color-mix(in srgb, var(--accent) 34%, transparent);
  color: var(--accent);
}

.deckung-zahlen { margin: 0 0 12px; font-size: 17px; }

/* --- Partnerverzeichnis --------------------------------------------------- */

.partnergruppe { margin: 28px 0 8px; }
.partnergruppe > h2 { margin-bottom: 4px; }
.partnergruppe > .muted { margin-top: 0; }

/*
   Karten in Spalten, die sich selbst einteilen. Feste Spaltenzahl
   hieße: auf einem Telefon eine Karte von 140 Pixeln Breite, und darin
   passt kein Firmenname.
*/
.partnerraster {
  display: grid; gap: 14px; margin-top: 14px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.partnerkarte {
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px 18px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius);
}
.partnerkarte__kopf { display: flex; align-items: flex-start; gap: 12px; }
.partnerkarte__kopf h3 { margin: 0; font-size: 16px; }

/*
   Das Logo steht in einem festen Rahmen und wird hineingerechnet, nicht
   zugeschnitten: Ein breites Wortbild neben einem quadratischen Signet
   soll beides ganz zu sehen sein, sonst fehlt einem Partner der halbe
   Name.
*/
.partnerkarte__logo {
  width: 56px; height: 56px; flex: none;
  object-fit: contain; background: #fff;
  border: 1px solid var(--line); border-radius: 10px; padding: 5px;
}
.partnerkarte__platzhalter {
  width: 56px; height: 56px; flex: none;
  display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px;
  font-weight: 700; color: var(--text-mute); letter-spacing: .05em;
}
.partnerkarte__kurz { margin: 3px 0 0; font-size: 13.5px; color: var(--text-mute); }
.partnerkarte__text { margin: 0; font-size: 14px; white-space: pre-line; }

.partnerkarte__daten {
  margin: 0; display: grid; grid-template-columns: 112px minmax(0, 1fr);
  gap: 4px 12px; font-size: 13.5px;
}
.partnerkarte__daten dt { color: var(--text-mute); }
.partnerkarte__daten dd { margin: 0; overflow-wrap: anywhere; }
.partnerkarte__fuss { margin: 2px 0 0; font-size: 14px; }

@media (max-width: 420px) {
  .partnerkarte__daten { grid-template-columns: 1fr; gap: 0 0; }
  .partnerkarte__daten dt { margin-top: 8px; }
}

/*
   Die Kennung groß und einzeln.

   Sie wird vom Bildschirm in ein Überweisungsformular abgetippt, oft vom
   Handy, und dabei hilft jeder Punkt Schriftgröße. Der Abstand zwischen
   den Zeichen ist Absicht: Zusammenstehende Großbuchstaben liest man als
   Wort und vertippt sich an den Stellen, an denen keines ist.
*/
.kennung-gross {
  margin: 4px 0 10px;
  font-size: 30px; font-weight: 700; letter-spacing: .16em;
  color: var(--ink); overflow-wrap: anywhere;
}

/*
   Bankverbindung als Beschreibungsliste, zweispaltig ab Tablet und
   einspaltig darunter. Untereinander statt in einer Tabelle, weil eine
   Tabelle auf einem Telefon seitlich rollt und die IBAN dann halb
   sichtbar ist.
*/
.zahldaten { margin: 0; display: grid; grid-template-columns: 1fr; gap: 2px 16px; }
.zahldaten dt {
  font-size: 13px; color: var(--text-mute); margin-top: 10px;
}
.zahldaten dd {
  margin: 0; color: var(--ink); font-weight: 600; overflow-wrap: anywhere;
}
.zahldaten dd .muted { font-weight: 400; }

@media (min-width: 620px) {
  .zahldaten { grid-template-columns: 190px minmax(0, 1fr); align-items: baseline; }
  .zahldaten dt { margin-top: 8px; }
  .zahldaten dd { margin-top: 8px; }
}



/* =====================================================================
   Startseite

   Eigene Gestaltungssprache, angelehnt an Papierverwaltung: laufende
   Nummern in Schreibmaschinenschrift, Haarlinien, Punktführung wie im
   Inhaltsverzeichnis, ein Stempel als Signet, Wechsel zwischen hellen,
   papierfarbenen und tiefdunklen Bahnen.

   Die Anleihen kommen bewusst aus Formularen und Merkblättern, nicht aus
   dem Auftritt einer Behörde. Wiedererkennbar, ohne amtlich zu wirken.
====================================================================== */

.startseite { --papier: #f7f5f1; --tinte: #10191b; }
@media (prefers-color-scheme: dark) {
  .startseite { --papier: #161d1f; --tinte: #0a1113; }
}

/* --------------------------------------------------------------- Kopf */

.kopf {
  position: relative;
  background: var(--tinte);
  color: #fff;
  padding: clamp(30px, 5vw, 60px) 0 0;
  overflow: hidden;
}

/* Feines Punktraster wie auf Millimeterpapier. Rein aus CSS, damit kein
   Bild geladen werden muss. */
.kopf__raster {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
  pointer-events: none;
}

.kopf__inner {
  position: relative;
  max-width: var(--wrap); margin: 0 auto; padding: 0 22px;
  display: grid; gap: 34px; align-items: start;
}
@media (min-width: 1000px) {
  .kopf__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 48px; }
}

.kennzeile {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 20px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255,255,255,.6);
}
.kennzeile__marke {
  display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 7px;
  background: var(--brand); color: #fff;
  font-family: var(--font); font-size: 11px; font-weight: 700; letter-spacing: 0;
}
.kennzeile__trenner { width: 26px; height: 1px; background: rgba(255,255,255,.28); }

.grosstitel {
  margin: 0 0 18px; color: #fff;
  font-size: clamp(38px, 6.4vw, 72px);
  line-height: 1.02; letter-spacing: -.035em; font-weight: 600;
}
.grosstitel em {
  font-style: normal; color: var(--brand);
  position: relative; white-space: nowrap;
}
/* Unterstreichung wie mit dem Lineal gezogen. */
.grosstitel em::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .07em;
  height: 3px; background: var(--brand); opacity: .55;
}

.kopf__lede {
  margin: 0 0 28px; max-width: 54ch;
  font-size: clamp(16px, 1.5vw, 18.5px); line-height: 1.62;
  color: rgba(255,255,255,.72);
}

/* ------------------------------------------------------------ Suchblatt */

.suchblatt {
  position: relative;
  background: var(--surface);
  border-radius: 3px;
  padding: 26px 22px 18px;
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
}
/* Reiter oben links wie an einer Registerkarte. */
.suchblatt__reiter {
  position: absolute; top: -13px; left: 22px;
  background: var(--brand); color: #fff;
  padding: 4px 14px; border-radius: 3px 3px 0 0;
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
}

.suchblatt__zeile { display: grid; gap: 12px; align-items: end; }
@media (min-width: 720px) {
  .suchblatt__zeile { grid-template-columns: minmax(0,1fr) 200px auto; }
}

.suchblatt__feld label {
  display: block; margin-bottom: 6px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-soft);
}
/* Eingabefelder wie Formularzeilen: nur eine Linie unten. */
.suchblatt input[type="search"], .suchblatt__ort {
  font-size: 17px;
  width: 100%; padding: 9px 2px 10px;
  border: none; border-bottom: 2px solid var(--line-strong);
  border-radius: 0; background: transparent; color: var(--ink);
  font: inherit; font-size: 18px;
  transition: border-color 160ms ease;
}
.suchblatt input[type="search"]:focus, .suchblatt__ort:focus {
  outline: none; border-bottom-color: var(--brand);
}
.suchblatt input::placeholder, .suchblatt__ort::placeholder { color: var(--line-strong); }

.suchblatt button {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 24px; border: none; border-radius: 3px;
  background: var(--tinte); color: #fff;
  font: inherit; font-size: 16px; font-weight: 600; cursor: pointer;
  transition: background 140ms ease;
}
.suchblatt button:hover { background: var(--brand); }
.suchblatt button .icon { width: 18px; height: 18px; }

.suchblatt__fuss {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: baseline;
  margin: 18px 0 0; padding-top: 14px;
  border-top: 1px dashed var(--line-strong);
  font-size: 14px; color: var(--text-soft);
}
.suchblatt__fuss span { font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; }
.suchblatt__fuss a { color: var(--brand); text-decoration: none; border-bottom: 1px solid currentColor; }
.suchblatt__fuss a:hover { color: var(--ink); text-decoration: none; }

/* ------------------------------------------------------------ Merkblatt */

.merkblatt {
  background: var(--surface);
  color: var(--text);
  border-radius: 3px;
  padding: 22px 24px 20px;
  box-shadow: 0 24px 60px rgba(0,0,0,.4);
  transform: rotate(-.7deg);
  position: relative;
}
.merkblatt::before {
  /* Angedeutete zweite Seite darunter. */
  content: ""; position: absolute; inset: 10px -8px -8px 10px;
  background: var(--surface-2); border-radius: 3px; z-index: -1;
  transform: rotate(1.4deg);
}
.merkblatt__kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-bottom: 12px; border-bottom: 2px solid var(--tinte);
}
.merkblatt__az {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  color: var(--text-soft);
}
/*
 * Früher ein schräg gestellter Rahmen in Stempeloptik. Ein Stempel steht
 * für eine amtliche Beglaubigung; genau diesen Eindruck darf ein privates
 * Portal nicht erwecken. Jetzt eine schlichte Markierung ohne Drehung und
 * ohne Rahmen.
 */
.merkblatt__stempel {
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-soft);
  background: var(--surface-2); border-radius: 3px;
  padding: 3px 9px;
}
.merkblatt__titel { margin: 16px 0 4px; font-size: 24px; letter-spacing: -.02em; }
.merkblatt__stelle { margin: 0 0 18px; color: var(--text-soft); font-size: 14.5px; }

.merkblatt__daten { display: grid; gap: 0; margin: 0 0 18px; }
.merkblatt__daten > div {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--line);
}
.merkblatt__daten dt { font-size: 14px; color: var(--text-soft); margin: 0; }
.merkblatt__daten dd { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--ink); }

.merkblatt__label {
  margin: 0 0 8px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-soft);
}
.merkblatt__liste { list-style: none; margin: 0 0 16px; padding: 0; }
.merkblatt__liste li {
  position: relative; padding: 4px 0 4px 26px; font-size: 15px;
}
.merkblatt__liste li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 13px; height: 13px; border: 1.5px solid var(--line-strong); border-radius: 2px;
}
.merkblatt__liste li::after {
  content: ""; position: absolute; left: 3px; top: 12px;
  width: 8px; height: 4px;
  border-left: 2px solid var(--brand); border-bottom: 2px solid var(--brand);
  transform: rotate(-45deg);
}
.merkblatt__hinweis {
  margin: 0; padding-top: 12px; border-top: 1px dashed var(--line-strong);
  font-size: 12.5px; color: var(--text-soft);
}

/* ------------------------------------------------------------- Zahlen */

.kopf__zahlen {
  position: relative;
  list-style: none; margin: clamp(32px, 5vw, 54px) 0 0; padding: 0;
  border-top: 1px solid rgba(255,255,255,.14);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  max-width: var(--wrap); margin-inline: auto;
}
.kopf__zahlen li {
  padding: 18px 22px;
  border-right: 1px solid rgba(255,255,255,.1);
  font-size: 13.5px; color: rgba(255,255,255,.55);
  font-family: var(--mono); letter-spacing: .06em;
}
.kopf__zahlen li:last-child { border-right: none; }
.kopf__zahlen span {
  display: block; margin-bottom: 2px;
  font-family: var(--font); font-size: 26px; font-weight: 600;
  letter-spacing: -.02em; color: #fff;
}

/* -------------------------------------------------------- Griffleiste */

.griffleiste { background: var(--brand); }
.griffleiste ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap;
}
.griffleiste a {
  display: flex; align-items: center; gap: 9px;
  padding: 15px 20px;
  color: rgba(255,255,255,.86); text-decoration: none;
  font-size: 15px; font-weight: 500;
  border-right: 1px solid rgba(255,255,255,.16);
  transition: background 140ms ease, color 140ms ease;
}
.griffleiste li:first-child a { border-left: 1px solid rgba(255,255,255,.16); }
.griffleiste a:hover { background: rgba(0,0,0,.18); color: #fff; text-decoration: none; }
.griffleiste .icon { width: 19px; height: 19px; }
@media (max-width: 720px) {
  .griffleiste ul { flex-direction: column; }
  .griffleiste a { border-right: none; border-bottom: 1px solid rgba(255,255,255,.16); }
  .griffleiste li:first-child a { border-left: none; }
}

/* ------------------------------------------------------------- Bahnen */

.bahn { padding: clamp(38px, 5.5vw, 68px) 0; }
.bahn--papier {
  background: var(--papier);
  border-block: 1px solid var(--line);
}
.bahn--dunkel { background: var(--tinte); color: rgba(255,255,255,.72); }

.bahn__kopf { margin-bottom: 26px; max-width: 70ch; }
.bahn__label {
  margin: 0 0 8px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--brand);
}
.bahn__kopf h2 {
  margin: 0; font-size: clamp(24px, 3.2vw, 34px);
  letter-spacing: -.025em; line-height: 1.14;
}
.bahn__lede { margin: 10px 0 0; color: var(--text-soft); font-size: 16.5px; }
.bahn__kopf--hell h2 { color: #fff; }
.bahn__kopf--hell .bahn__label { color: var(--brand-strong); }

/* ---------------------------------------------------------- Lebenslagen */

/*
 * Lebenslagen. auto-fill füllte die letzte Zeile mit leeren Spalten auf,
 * sodass das Raster rechts unten abbrach. Eine feste Spaltenzahl je Breite
 * und eine Kachel, die die letzte Zeile auffüllt, halten den Block
 * geschlossen.
 */
.lagen {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--line-strong);
  border-left: 1px solid var(--line-strong);
}
@media (min-width: 620px) { .lagen { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .lagen { grid-template-columns: repeat(4, 1fr); } }

/* Alle Zeilen gleich hoch. Ein Name, der umbricht, machte sonst seine
   ganze Zeile höher als die darüber, und das Raster wirkte schief. */
.lagen { grid-auto-rows: 1fr; }

/* Die letzte Kachel füllt den Rest der Zeile, statt eine Lücke zu lassen. */
@media (min-width: 1000px) {
  .lagen li:last-child:nth-child(4n + 3) { grid-column: span 2; }
  .lagen li:last-child:nth-child(4n + 2) { grid-column: span 3; }
  .lagen li:last-child:nth-child(4n + 1) { grid-column: span 4; }
}
.lagen li { border-right: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.lagen a {
  display: grid; grid-template-columns: auto auto 1fr auto;
  align-items: center; gap: 14px;
  /* Volle Höhe, damit Kacheln mit zweizeiligem Namen nicht kürzer
     erscheinen als ihre Nachbarn. */
  height: 100%;
  padding: 20px 18px;
  color: var(--ink); text-decoration: none;
  transition: background 160ms ease, color 160ms ease;
}
.lagen a:hover { background: var(--tinte); color: #fff; text-decoration: none; }
.lagen__nr {
  font-family: var(--mono); font-size: 12px; letter-spacing: .06em;
  color: var(--line-strong);
}
.lagen a:hover .lagen__nr { color: var(--brand-strong); }
.lagen__icon { color: var(--brand); display: flex; }
.lagen a:hover .lagen__icon { color: var(--brand-strong); }
.lagen__name { font-size: 17px; font-weight: 500; }
.lagen__pfeil { color: var(--line-strong); display: flex; transition: transform 160ms ease; }
.lagen a:hover .lagen__pfeil { color: #fff; transform: translateX(4px); }

/* -------------------------------------------------- Verzeichnis mit Punkten */

.verzeichnis { list-style: none; margin: 0; padding: 0; }
.verzeichnis li { border-bottom: 1px solid var(--line-strong); }
.verzeichnis li:first-child { border-top: 1px solid var(--line-strong); }
.verzeichnis a {
  display: grid;
  grid-template-columns: 42px auto 1fr auto 28px;
  align-items: baseline; gap: 12px;
  padding: 16px 6px;
  text-decoration: none; color: var(--ink);
  transition: background 140ms ease, padding 140ms ease;
}
.verzeichnis a:hover { background: var(--surface); padding-inline: 14px; text-decoration: none; }
.verzeichnis__nr {
  font-family: var(--mono); font-size: 12.5px; color: var(--brand); letter-spacing: .05em;
}
.verzeichnis__titel { font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
/* Punktführung wie im Inhaltsverzeichnis. */
.verzeichnis__fuehrung {
  border-bottom: 2px dotted var(--line-strong);
  transform: translateY(-4px);
  min-width: 24px;
}
.verzeichnis__text {
  font-size: 14.5px; color: var(--text-soft); text-align: right;
  max-width: 46ch;
}
.verzeichnis__pfeil { color: var(--line-strong); display: flex; transition: transform 140ms ease, color 140ms ease; }
.verzeichnis a:hover .verzeichnis__pfeil { color: var(--brand); transform: translateX(4px); }
@media (max-width: 820px) {
  .verzeichnis a { grid-template-columns: 34px 1fr auto; }
  .verzeichnis__fuehrung { display: none; }
  .verzeichnis__text { grid-column: 2; text-align: left; }
}

/* ------------------------------------------------------------- Laufweg */

.laufweg {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.laufweg li { position: relative; padding: 0 20px 0 0; }
/* Verbindende Linie zwischen den Punkten. */
.laufweg li::before {
  content: ""; position: absolute; left: 0; right: 0; top: 17px;
  height: 2px; background: var(--line-strong);
}
.laufweg li:first-child::before { left: 17px; }
.laufweg li:last-child::before { right: calc(100% - 36px); }
.laufweg__punkt {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 36px; height: 36px; margin-bottom: 16px;
  border-radius: 50%; background: var(--tinte); color: #fff;
  font-family: var(--mono); font-size: 14px; font-weight: 700;
}
.laufweg h3 { margin: 0 0 6px; font-size: 17px; letter-spacing: -.01em; }
.laufweg p { margin: 0; color: var(--text-soft); font-size: 14.5px; line-height: 1.55; }
@media (max-width: 640px) {
  .laufweg li::before { display: none; }
  .laufweg li { padding-bottom: 20px; }
}

/* --------------------------------------------------------- Grundsätze */

/*
 * Grundsätze auf hellem Grund, ohne Nummern: Sie zählten nichts, was in
 * einer Reihenfolge steht.
 */
.grundsaetze {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 26px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.grundsaetze li { padding-top: 18px; border-top: 2px solid var(--brand); }
.grundsaetze h3 { margin: 0 0 8px; font-size: 19px; letter-spacing: -.015em; }
.grundsaetze p { margin: 0; font-size: 15.5px; line-height: 1.62; color: var(--text-soft); }
.bahn--rand { border-top: 1px solid var(--line); }

/* ---------------------------------------------------------------- Felder */

.felder {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.feld {
  display: flex; flex-direction: column;
  padding: 22px 22px 20px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  text-decoration: none;
  transition: border-color 160ms ease, transform 160ms ease;
}
.feld:hover { border-color: var(--brand); transform: translateY(-3px); text-decoration: none; }
.feld--gross { grid-column: span 2; }
@media (max-width: 700px) { .feld--gross { grid-column: span 1; } }
.feld__icon {
  display: grid; place-items: center;
  width: 42px; height: 42px; margin-bottom: 14px;
  border-radius: 3px; background: var(--tinte); color: #fff;
}
.feld h3 { margin: 0 0 7px; font-size: 19px; letter-spacing: -.015em; }
.feld p { margin: 0; color: var(--text-soft); font-size: 15px; line-height: 1.55; }
.feld__mehr {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: auto; padding-top: 16px;
  color: var(--brand); font-weight: 600; font-size: 15px;
}
.feld__mehr .icon { width: 17px; height: 17px; transition: transform 140ms ease; }
.feld:hover .feld__mehr .icon { transform: translateX(4px); }

/* ------------------------------------------------------------ Meldeaufruf */

.meldeaufruf {
  display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap;
  background: var(--surface);
  border: 2px solid var(--tinte);
  border-radius: 3px;
  padding: 28px 30px;
}
/* Ebenfalls ohne Stempelanmutung, siehe oben. */
.meldeaufruf__stempel {
  font-family: var(--mono); font-size: 12px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--amber);
  background: var(--amber-soft); border-radius: 3px;
  padding: 6px 12px; flex-shrink: 0;
}
.meldeaufruf h2 { margin: 0 0 8px; font-size: 23px; letter-spacing: -.02em; }
.meldeaufruf p { margin: 0 0 16px; color: var(--text-soft); max-width: 62ch; font-size: 15.5px; }
.meldeaufruf__knoepfe { display: flex; gap: 10px; flex-wrap: wrap; }

/* ------------------------------------------ Kopfzeile am Handy nutzbar */

@media (max-width: 760px) {
  .site-header__inner {
    flex-direction: column; align-items: stretch; gap: 10px; padding: 10px 14px;
  }
  .logo { margin-right: 0; align-self: flex-start; }
  .site-nav {
    flex-wrap: nowrap; overflow-x: auto; gap: 2px; padding-bottom: 2px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a { white-space: nowrap; }
  .merkblatt { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* =====================================================================
   Kopfzeile

   Dunkel gehalten, damit sie auf der Startseite in die Kopfbahn übergeht
   statt als weißer Balken darüber zu liegen, und damit sie auf allen
   anderen Seiten denselben oberen Abschluss bildet.
====================================================================== */

.kopfzeile {
  --kopf-tinte: #10191b;
  position: sticky; top: 0; z-index: 60;
  background: var(--kopf-tinte);
  color: rgba(255,255,255,.8);
}
@media (prefers-color-scheme: dark) { .kopfzeile { --kopf-tinte: #0a1113; } }

.kopfzeile__breite {
  /* Dieselbe Breite wie der Inhalt darunter. Vorher war die Kopfzeile
     breiter, dadurch stand das Logo sichtbar links neben der Überschrift.
     Reicht der Platz nicht, rutscht die Navigation in eine eigene Zeile. */
  max-width: var(--wrap); margin: 0 auto; padding: 0 22px;
  display: flex; align-items: center; gap: 18px;
}

/* --- obere Leiste --- */

.kopfzeile__leiste {
  border-bottom: 1px solid rgba(255,255,255,.1);
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
}
.kopfzeile__leiste .kopfzeile__breite { min-height: 34px; }
.kopfzeile__einordnung {
  margin: 0; display: flex; align-items: center; gap: 10px;
  color: rgba(255,255,255,.5);
}
.kopfzeile__punkt { width: 4px; height: 4px; border-radius: 50%; background: var(--brand); }
.kopfzeile__neben { margin-left: auto; display: flex; gap: 18px; }
.kopfzeile__neben a { color: rgba(255,255,255,.55); text-decoration: none; }
.kopfzeile__neben a:hover { color: #fff; text-decoration: none; }

/* --- Hauptzeile --- */

.kopfzeile__haupt { border-bottom: 2px solid var(--brand); }
.kopfzeile__haupt .kopfzeile__breite { min-height: 62px; }

.kopfzeile__marke {
  display: flex; align-items: center; gap: 11px;
  color: #fff; text-decoration: none; flex-shrink: 0;
}
.kopfzeile__marke:hover { text-decoration: none; }
.kopfzeile__mark {
  display: grid; place-items: center; width: 32px; height: 32px;
  border-radius: 8px; background: var(--brand); color: #fff;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0;
}
.kopfzeile__wort { font-size: 18px; font-weight: 700; letter-spacing: -.02em; }

.kopfzeile__nav {
  display: flex; align-items: center; gap: 2px;
  margin-left: 14px; min-width: 0;
}
/* Kein Abschneiden: Wird es eng, rutscht die Navigation in eine eigene
   Zeile. Vorher verschwanden angemeldeten Nutzern Menüpunkte im
   unsichtbaren Überlauf. */
.kopfzeile__haupt .kopfzeile__breite { flex-wrap: wrap; }
/* Die Navigation steht grundsätzlich in einer eigenen Zeile.
   Vorher hing es von der Fensterbreite ab, ob sie oder der Kontobereich
   umbricht; angemeldet entstand dadurch eine große Lücke. Zwei feste
   Zeilen sind vorhersagbar und entsprechen dem Verwaltungsbereich:
   oben Marke und Konto, darunter die Bereiche. */
.kopfzeile__nav {
  order: 3; flex: 1 0 100%; margin-left: 0;
  border-top: 1px solid rgba(255,255,255,.1);
  overflow-x: auto; scrollbar-width: none;
}
.kopfzeile__nav::-webkit-scrollbar { display: none; }
.kopfzeile__nav a { padding: 13px 14px; }
.kopfzeile__nav a:first-child { padding-left: 0; }
.kopfzeile__nav a.is-active::after { bottom: 0; left: 14px; right: 14px; }
.kopfzeile__nav a:first-child.is-active::after { left: 0; }
.kopfzeile__haupt .kopfzeile__breite { min-height: 0; padding-top: 12px; }
.kopfzeile__nav a {
  position: relative;
  padding: 20px 12px; white-space: nowrap;
  color: rgba(255,255,255,.76); text-decoration: none;
  font-size: 15px;
  transition: color 140ms ease;
}
.kopfzeile__nav a:hover { color: #fff; text-decoration: none; }
.kopfzeile__nav a.is-active { color: #fff; font-weight: 600; }
.kopfzeile__nav a.is-active::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: -2px;
  height: 2px; background: #fff;
}
.kopfzeile__trenner {
  width: 1px; height: 20px; background: rgba(255,255,255,.16); margin: 0 8px;
  flex-shrink: 0;
}

/* --- Konto --- */

.kopfzeile__konto {
  margin-left: auto; display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}

.kopfzeile__glocke {
  position: relative; display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 8px;
  color: rgba(255,255,255,.75);
  transition: background 140ms ease, color 140ms ease;
}
.kopfzeile__glocke:hover { background: rgba(255,255,255,.09); color: #fff; }
.kopfzeile__zahl {
  position: absolute; top: 2px; right: 2px;
  min-width: 17px; padding: 0 4px; border-radius: 999px;
  background: var(--alert); color: #fff;
  font-size: 10.5px; font-weight: 700; line-height: 17px; text-align: center;
}

.kopfzeile__nutzer {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 5px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  color: #fff; text-decoration: none; font-size: 14.5px; font-weight: 500;
  transition: border-color 140ms ease, background 140ms ease;
}
.kopfzeile__nutzer:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.3); text-decoration: none; }
.kopfzeile__initialen {
  display: grid; place-items: center; width: 26px; height: 26px;
  border-radius: 50%; background: var(--brand); color: #fff;
  font-size: 11px; font-weight: 700;
}

.kopfzeile__abmelden { margin: 0; }
.kopfzeile__abmelden button {
  background: none; border: none; padding: 6px 8px;
  color: rgba(255,255,255,.55); font: inherit; font-size: 14px; cursor: pointer;
}
.kopfzeile__abmelden button:hover { color: #fff; text-decoration: underline; }

.kopfzeile__anmelden {
  padding: 9px 14px; border-radius: 8px;
  color: rgba(255,255,255,.85); text-decoration: none; font-size: 15px;
}
.kopfzeile__anmelden:hover { background: rgba(255,255,255,.09); color: #fff; text-decoration: none; }

.kopfzeile__cta {
  padding: 10px 18px; border-radius: 8px;
  background: var(--brand); color: #fff;
  text-decoration: none; font-size: 15px; font-weight: 600;
  transition: background 140ms ease;
}
.kopfzeile__cta:hover { background: var(--brand-strong); color: #fff; text-decoration: none; }

/* Der Profilwechsel steht im dunklen Kopf, nicht auf hellem Grund. */
.kopfzeile .profilwechsel__aktuell {
  background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); color: #fff;
}
.kopfzeile .profilwechsel__aktuell:hover { border-color: rgba(255,255,255,.34); }

/* Auf der Startseite geht die Kopfzeile ohne Kante in die Kopfbahn über. */
.startseite .kopfzeile__haupt { border-bottom-color: rgba(255,255,255,.12); }
.startseite .kopf { padding-top: clamp(24px, 4vw, 48px); }

/* --- schmale Geräte --- */

@media (max-width: 900px) {
  .kopfzeile__breite { padding: 0 14px; gap: 10px; }
  .kopfzeile__leiste .kopfzeile__einordnung { display: none; }
  .kopfzeile__neben { margin-left: 0; }
  .kopfzeile__haupt .kopfzeile__breite { flex-wrap: wrap; min-height: 0; padding-block: 10px; }
  .kopfzeile__nav { order: 3; width: 100%; margin-left: 0; }
  .kopfzeile__nav a { padding: 10px 10px; }
  .kopfzeile__nav a.is-active::after { bottom: 2px; }
  .kopfzeile__konto { margin-left: auto; }
  .kopfzeile__nutzer span:last-child { display: none; }
}

/* =====================================================================
   Bürgerprofil
====================================================================== */

.profil {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 20px;
}

/* Der Rahmen darf nicht abschneiden, sonst wird der überstehende Avatar
   halbiert. Stattdessen rundet das Titelbild seine eigenen Ecken. */
.profil__titel {
  height: clamp(140px, 22vw, 230px);
  background-size: cover; background-position: center;
  position: relative; overflow: hidden;
  border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
}
.profil__titel--leer {
  background:
    radial-gradient(700px 300px at 20% 0%, color-mix(in srgb, var(--brand) 42%, transparent), transparent 70%),
    linear-gradient(120deg, var(--brand-strong), var(--brand));
}
/* Feines Raster wie auf der Startseite, damit das Profil dazugehört. */
.profil__titel::after {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px);
  background-size: 20px 20px;
  mask-image: linear-gradient(180deg, #000, transparent 85%);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%);
}
.profil__bearbeiten {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 8px;
  background: rgba(0,0,0,.42); backdrop-filter: blur(6px);
  color: #fff; text-decoration: none; font-size: 14px; font-weight: 500;
}
.profil__bearbeiten:hover { background: rgba(0,0,0,.62); color: #fff; text-decoration: none; }
.profil__bearbeiten .icon { width: 16px; height: 16px; }

.profil__kopf {
  display: grid; gap: 18px;
  padding: 0 26px 22px;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 860px) {
  .profil__kopf { grid-template-columns: auto minmax(0, 1fr) auto; }
}

/* Das Titelbild ist positioniert und läge sonst über dem Avatar, der
   negativ nach oben ragt. */
.profil__avatar { margin-top: -54px; position: relative; z-index: 2; }
.profil__avatar .avatar {
  border: 5px solid var(--surface);
  box-shadow: var(--shadow-1);
}

.profil__angaben { padding-top: 12px; min-width: 0; }
.profil__name { margin: 0 0 8px; font-size: clamp(24px, 3vw, 31px); letter-spacing: -.02em; }

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

.abzeichen {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 999px;
  font-size: 13px; font-weight: 600; white-space: nowrap;
}
.abzeichen .icon { width: 15px; height: 15px; }
/* Das Mitarbeiterabzeichen ist absichtlich das auffälligste Element hier:
   Wer im Forum liest, soll ohne Nachdenken erkennen, wer zum Team gehört. */
.abzeichen--staff { background: var(--brand); color: #fff; }
.abzeichen--support {
  background: var(--amber-soft); color: var(--amber);
  border: 1px solid color-mix(in srgb, var(--amber) 34%, transparent);
}
.abzeichen--sperre { background: var(--alert-soft); color: var(--alert); }

.profil__fakten {
  display: grid; gap: 6px 26px; margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.profil__fakten dt {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; color: var(--text-soft); margin: 0;
}
.profil__fakten dt .icon { width: 15px; height: 15px; }
.profil__fakten dd { margin: 0 0 6px; font-size: 15px; color: var(--ink); }

.profil__zahlen {
  list-style: none; margin: 12px 0 0; padding: 0;
  display: flex; gap: 0;
  border: 1px solid var(--line); border-radius: var(--radius-s); overflow: hidden;
}
.profil__zahlen li {
  padding: 12px 20px; text-align: center;
  border-right: 1px solid var(--line);
  font-size: 13px; color: var(--text-soft);
}
.profil__zahlen li:last-child { border-right: none; }
.profil__zahlen span {
  display: block; font-size: 22px; font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.profil__reiter {
  display: flex; gap: 2px; flex-wrap: wrap;
  padding: 0 26px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
}
.profil__reiter a {
  padding: 14px 16px; font-size: 15.5px; color: var(--text-soft);
  text-decoration: none; border-bottom: 3px solid transparent;
}
.profil__reiter a:hover { color: var(--ink); text-decoration: none; }
.profil__reiter a.is-active { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; }

.profil__inhalt { display: grid; gap: 12px; }

.profil__beitrag {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px 20px;
}
.profil__beitragtitel { font-size: 17px; font-weight: 600; color: var(--ink); text-decoration: none; }
.profil__beitragtitel:hover { color: var(--brand); }
.profil__beitragmeta { display: block; font-size: 13.5px; color: var(--text-soft); margin-top: 3px; }
.profil__auszug {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: 15.5px;
  max-height: 190px; overflow: hidden;
  mask-image: linear-gradient(180deg, #000 70%, transparent);
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent);
}

.profil__themen { list-style: none; margin: 0; padding: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.profil__themen li { padding: 14px 18px; border-bottom: 1px solid var(--line); }
.profil__themen li:last-child { border-bottom: none; }
.profil__themen a { font-size: 16.5px; font-weight: 600; color: var(--ink); text-decoration: none; }
.profil__themen a:hover { color: var(--brand); }
.profil__themen span { display: block; font-size: 13.5px; color: var(--text-soft); margin-top: 3px; }

@media (max-width: 620px) {
  .profil__kopf { padding-inline: 16px; }
  .profil__reiter { padding-inline: 12px; }
  .profil__zahlen { width: 100%; }
  .profil__zahlen li { flex: 1; padding-inline: 8px; }
}

/* Mitarbeiterabzeichen im Forum */
.fpost__staff {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 6px; padding: 3px 10px; border-radius: 999px;
  background: var(--brand); color: #fff;
  font-size: 12px; font-weight: 600;
}
.fpost__staff .icon { width: 13px; height: 13px; }

/* --------------------------------------------------- Datenübersicht */

.kennung {
  font-family: var(--mono); font-size: clamp(20px, 3vw, 28px);
  letter-spacing: .12em; color: var(--brand);
  margin: 4px 0 12px; user-select: all;
}

.filterleiste {
  display: grid; gap: 12px; align-items: end;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  padding: 16px 18px; margin-bottom: 16px;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius-s);
}
.filterleiste .field { margin: 0; }
.filterleiste__knoepfe { display: flex; gap: 8px; }

.zuordnung {
  border: 1px solid var(--line); border-radius: var(--radius-s);
  padding: 14px 16px; margin: 0 0 14px;
}
.zuordnung legend { padding: 0 6px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.zuordnung__felder {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.nachrichten { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; }
.nachricht {
  padding: 12px 14px; border-radius: var(--radius-s);
  background: var(--surface-2); border: 1px solid var(--line);
}
.nachricht--buerger { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 24%, transparent); }
.nachricht__kopf { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; margin-bottom: 5px; }
.nachricht__text { margin: 0; white-space: pre-wrap; font-size: 15px; line-height: 1.55; }

/* --------------------------------------------------------- Forum */

.landwahl {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 16px; margin-bottom: 18px;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius-s);
}
.landwahl label { font-size: 14px; font-weight: 600; color: var(--ink); }
.landwahl select {
  padding: 8px 12px; border: 1px solid var(--line-strong);
  border-radius: var(--radius-s); background: var(--surface);
  font: inherit; font-size: 15px; min-width: 220px;
}
/*
 * Gruppenüberschrift im Forum.
 *
 * Eine frühere Regel setzte justify-content: space-between, eine spätere
 * ergänzte nur den Abstand. Ergebnis: Das Symbol stand links, der Name des
 * Bundeslands ganz rechts am anderen Ende der Zeile, und dazwischen lag
 * eine leere Fläche. Beides gehört zusammen, also flex-start.
 *
 * Gestaltet als Balken, damit die Gliederung beim Überfliegen sofort
 * erkennbar ist: Wo eine Gruppe beginnt und wo sie endet, sieht man dann
 * ohne zu lesen.
 */
.board-section { margin-bottom: 26px; }
.board-section__title {
  display: flex; align-items: center; justify-content: flex-start; gap: 10px;
  background: var(--ink); color: #fff;
  border-bottom: none; border-radius: var(--radius-m) var(--radius-m) 0 0;
  padding: 11px 16px; margin: 0;
  /* Farbe ausdrücklich: Eine frühere Regel setzte hier den gedämpften
     Textton, der auf dunklem Grund kaum zu lesen war. */
  color: #fff; font-size: 14.5px; font-weight: 600; letter-spacing: .02em;
  text-transform: none;
}
.board-section__title .icon { width: 18px; height: 18px; color: #fff; opacity: .75; }
.board-section__title a { color: #fff; text-decoration: none; }
.board-section__title a:hover { text-decoration: underline; }

.board-section .board-list { border-radius: 0 0 var(--radius-m) var(--radius-m); border-top: none; }
/* Entfernt: Diese Regel stand nach der neuen und färbte den Namen wieder
   in den gedämpften Textton, der auf dem dunklen Balken kaum zu lesen war.
   Drei Regeln für dasselbe Element sind ein Zeichen, dass beim Umbauen
   nicht aufgeräumt wurde. */

.unterbereiche {
  list-style: none; margin: 0 0 18px; padding: 0;
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.unterbereiche a {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-s);
  background: var(--surface); text-decoration: none; color: var(--ink); font-size: 15px;
}
.unterbereiche a:hover { border-color: var(--brand); text-decoration: none; }
.unterbereiche .icon { width: 19px; height: 19px; color: var(--brand); }
.unterbereiche span.muted { margin-left: auto; font-size: 13px; }

/* ------------------------------------------------------------- Werbekit */

.werbemittel {
  display: grid; gap: 16px; align-items: start;
  padding: 16px 0; border-top: 1px solid var(--line);
}
@media (min-width: 780px) { .werbemittel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.werbemittel__bild {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-s); padding: 14px;
  display: grid; place-items: center; overflow: auto;
}
.werbemittel__bild svg { max-width: 100%; height: auto; }
.werbemittel__bild p { margin: 10px 0 0; font-size: 13.5px; color: var(--text-soft); }
.werbemittel__daten strong { display: block; font-size: 16px; color: var(--ink); }
.werbemittel__daten .muted { display: block; font-size: 13.5px; margin-bottom: 8px; }

.logo-reihe { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* --------------------------------------------------------- Lebenslauf */

.cv-stand {
  background: var(--surface); border: 1px solid var(--line-strong);
  border-left: 4px solid var(--brand);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  padding: 22px 24px; margin-bottom: 20px;
}
.cv-stand__zahl { display: flex; align-items: baseline; gap: 14px; }
.cv-stand__zahl span {
  font-size: 44px; font-weight: 600; color: var(--brand);
  line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.cv-stand__zahl small { font-size: 20px; }
.cv-stand__zahl p { margin: 0; color: var(--text-soft); font-size: 15px; }
.cv-stand__balken {
  height: 10px; border-radius: 999px; background: var(--surface-2);
  border: 1px solid var(--line); overflow: hidden; margin: 14px 0 12px;
}
.cv-stand__balken span {
  display: block; height: 100%; background: var(--brand);
  transition: width 400ms cubic-bezier(.4,0,.2,1);
}
.cv-stand__text { margin: 0 0 14px; font-size: 15.5px; }

.cv-schritte { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 8px; }
.cv-schritt a {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius-s);
  transition: border-color 140ms ease, transform 140ms ease;
}
.cv-schritt a:hover { border-color: var(--brand); transform: translateX(3px); text-decoration: none; }
.cv-schritt__marke {
  display: grid; place-items: center; flex-shrink: 0;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--line-strong);
  color: var(--text-soft); font-family: var(--mono); font-size: 14px;
}
.cv-schritt.is-fertig .cv-schritt__marke {
  background: var(--brand); border-color: var(--brand); color: #fff;
}
.cv-schritt.is-fertig .cv-schritt__marke .icon { width: 18px; height: 18px; }
.cv-schritt__text { flex: 1; min-width: 0; }
.cv-schritt__text strong { display: block; color: var(--ink); font-size: 16.5px; }
.cv-schritt__text span { display: block; color: var(--text-soft); font-size: 14px; margin-top: 2px; }
.cv-schritt__stand { flex-shrink: 0; font-size: 13px; }
.tag--ok {
  background: var(--ok-soft); color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 30%, transparent);
}

/* Schrittleiste */
.cv-leiste {
  display: flex; gap: 4px; overflow-x: auto; padding-bottom: 6px;
  margin-bottom: 14px; scrollbar-width: none;
}
.cv-leiste::-webkit-scrollbar { display: none; }
.cv-leiste__punkt {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 8px 10px; min-width: 84px; text-decoration: none;
  border-radius: var(--radius-s);
}
.cv-leiste__punkt span {
  display: grid; place-items: center; width: 28px; height: 28px;
  border-radius: 50%; background: var(--surface-2);
  border: 1px solid var(--line-strong); color: var(--text-soft);
  font-family: var(--mono); font-size: 13px;
}
.cv-leiste__punkt em {
  font-style: normal; font-size: 12px; color: var(--text-soft); text-align: center;
}
.cv-leiste__punkt.is-fertig span { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }
.cv-leiste__punkt.is-aktiv span { background: var(--brand); border-color: var(--brand); color: #fff; }
.cv-leiste__punkt.is-aktiv em { color: var(--ink); font-weight: 600; }
.cv-leiste__punkt:hover { background: var(--surface-2); text-decoration: none; }

.cv-zaehler {
  margin: 0 0 6px; font-family: var(--mono); font-size: 11.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--brand);
}

.cv-form { margin-top: 18px; }
.cv-eintraege { display: grid; gap: 14px; }
.cv-eintrag {
  border: 1px solid var(--line); border-radius: var(--radius-s);
  padding: 14px 16px; margin: 0;
}
.cv-eintrag legend {
  padding: 0 8px; font-size: 12.5px; font-weight: 600; color: var(--brand);
  font-family: var(--mono); letter-spacing: .06em; text-transform: uppercase;
}
.cv-eintrag__felder {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.cv-eintrag__felder .field { margin: 0; }
.cv-eintrag__felder .field--schmal { grid-column: span 1; }
.cv-eintrag__felder .field--breit { grid-column: 1 / -1; }

.cv-navigation {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap;
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line);
}

.cv-beispiel {
  margin-top: 6px; padding: 12px 14px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-s);
}
.cv-beispiel summary { cursor: pointer; font-size: 14.5px; font-weight: 600; color: var(--brand); }
.cv-beispiel p { margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: var(--text-soft); }

/* Quelltextblöcke in der Anleitung */
.code-block {
  margin: 10px 0 14px; padding: 14px 16px;
  background: var(--tinte, #10191b); color: #e6edee;
  border-radius: var(--radius-s); overflow-x: auto;
  font-family: var(--mono); font-size: 13px; line-height: 1.55;
}
.code-block code { white-space: pre; }

/* ------------------------------------------------------ Nachrichten */

.gespraeche { list-style: none; margin: 0 0 20px; padding: 0;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius-s); overflow: hidden; }
.gespraech { border-bottom: 1px solid var(--line); }
.gespraech:last-child { border-bottom: none; }
.gespraech a {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; text-decoration: none; color: var(--ink);
  transition: background 140ms ease;
}
.gespraech a:hover { background: var(--surface-2); text-decoration: none; }
.gespraech__text { flex: 1; min-width: 0; }
.gespraech__text strong { display: block; font-size: 16px; }
.gespraech__vorschau {
  display: block; color: var(--text-soft); font-size: 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gespraech__rechts { display: flex; align-items: center; gap: 10px; flex-shrink: 0; font-size: 13px; }
.gespraech__zahl {
  min-width: 22px; padding: 2px 8px; border-radius: 999px;
  background: var(--brand); color: #fff; font-size: 12.5px; font-weight: 700; text-align: center;
}
.gespraech.is-neu .gespraech__text strong { color: var(--brand); }

.gespraech__kopf {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.gespraech__kopf h1 { margin: 0; font-size: 24px; }
.gespraech__werkzeuge { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }

/*
 * Die alte Kastenform der Nachrichten ist entfallen: Jede Nachricht war
 * ein eigener Rahmen mit Kopfzeile aus Name und vollem Zeitstempel. Das
 * las sich wie eine Akte, nicht wie ein Gespräch, und bei zwanzig
 * Nachrichten stand zwanzigmal derselbe Name. Die Gestaltung steht jetzt
 * weiter unten bei den Sprechblasen; hier bleibt nur der Abstand.
 */
.verlauf-liste { display: grid; gap: 2px; margin-bottom: 18px; }
@keyframes pnAuf { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.profil__aktionen { margin: 0 0 12px; }
.profil__aktionen .icon { width: 17px; height: 17px; }

/* ------------------------------------------------------- Immobilien */

.immo-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.immo {
  display: grid; gap: 0; align-items: stretch;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius-s); overflow: hidden;
  transition: border-color 140ms ease;
}
@media (min-width: 640px) { .immo { grid-template-columns: 260px minmax(0, 1fr); } }
.immo:hover { border-color: var(--brand); }
.immo__bild { display: block; background: var(--surface-2); min-height: 170px; position: relative; }
.immo__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.immo__kein-bild {
  position: absolute; inset: 0; display: grid; place-items: center; color: var(--line-strong);
}
.immo__kein-bild .icon { width: 44px; height: 44px; }
.immo__text { padding: 16px 18px; }
.immo__titel { font-size: 18px; font-weight: 600; color: var(--ink); text-decoration: none; }
.immo__titel:hover { color: var(--brand); }
.immo__ort { margin: 4px 0 10px; color: var(--text-soft); font-size: 14.5px; }
.immo__daten { display: flex; gap: 16px; flex-wrap: wrap; margin: 0 0 8px; font-size: 15px; }
.immo__daten strong { color: var(--ink); }
.immo__marken { display: flex; gap: 6px; flex-wrap: wrap; margin: 0; }

.immo-galerie {
  display: grid; gap: 8px; margin-bottom: 18px;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.immo-galerie img {
  width: 100%; height: 140px; object-fit: cover;
  border-radius: var(--radius-s); border: 1px solid var(--line);
}
.immo-galerie img.is-gross { grid-column: 1 / -1; height: clamp(220px, 40vw, 420px); }

.immo-bilder { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin-bottom: 14px; }
.immo-bild img { width: 100%; height: 110px; object-fit: cover; border-radius: var(--radius-s); border: 1px solid var(--line); }

/* Ankreuzfelder in der Filterleiste stehen untereinander und bündig. */
.filterleiste__haken { display: grid; gap: 6px; align-content: end; }
.filterleiste__haken label {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--text-soft); cursor: pointer;
  margin: 0; font-weight: 400;
}
.filterleiste__haken input { width: 17px; height: 17px; accent-color: var(--brand); margin: 0; }

/* =====================================================================
   Grundgerüst
   =====================================================================
   Bisher klebte die Fußzeile am Inhalt: Auf kurzen Seiten stand sie
   mitten im Bild, darunter leere Fläche. Ursache war, dass der Körper
   keine Höhe hatte, an der sich etwas ausrichten konnte.

   Jetzt ist die Seite eine Spalte über die volle Fensterhöhe, der
   Inhaltsbereich wächst, und die Fußzeile wird nach unten geschoben.
   Bei langen Seiten ändert sich nichts.
   ------------------------------------------------------------------ */

html { min-height: 100%; }

body {
  min-height: 100vh;
  min-height: 100svh; /* am Handy ohne die Adressleiste mitzurechnen */
  display: flex;
  flex-direction: column;
}

body > main,
body > .shell {
  flex: 1 0 auto;
  /*
   * Die Breite ausdrücklich setzen.
   *
   * body ist ein Flex-Container in Spaltenrichtung. Eigentlich dehnt der
   * seine Kinder auf die volle Breite, aber die Container-Klasse setzt
   * "margin: 0 auto" zum Zentrieren, und automatische Seitenränder heben
   * das Dehnen auf: Das Element schrumpft dann auf Inhaltsbreite.
   *
   * Sichtbar wurde das an der Stellenbörse, wo auf einem 1900 Pixel
   * breiten Bildschirm nur 742 Pixel genutzt wurden und alles gequetscht
   * in der Mitte klebte, obwohl 1440 erlaubt gewesen wären. Betroffen war
   * jede Seite mit der weiten Container-Klasse, nicht nur diese eine.
   *
   * width: 100% stellt die Dehnung wieder her; max-width und die
   * automatischen Ränder zentrieren weiterhin.
   */
  width: 100%;
}

body > footer,
.site-footer {
  margin-top: auto;
  flex-shrink: 0;
}

/* ---------------------------------------------------------------------
   Luft
   ---------------------------------------------------------------------
   Der zweite Punkt war das Gequetschte. Der Inhalt begann unmittelbar
   unter der Kopfzeile und endete unmittelbar über der Fußzeile, und die
   Abschnitte standen dicht aufeinander. Die Abstände wachsen jetzt mit
   der Fensterbreite, statt fest zu sein.
   ------------------------------------------------------------------- */

/*
 * Korrektur: Der großzügige Abstand galt für jeden .container, auch für
 * die, die nur als Breitenbegrenzer innerhalb eines farbigen Bandes oder
 * einer Navigationsleiste sitzen. Dort entstand dadurch eine leere Fläche
 * unter dem Inhalt: Die Griffleiste auf der Startseite war 182 Pixel hoch,
 * obwohl ihre Verweise nur 54 Pixel brauchen.
 *
 * Der senkrechte Abstand gehört deshalb nur an Container, die selbst den
 * Seiteninhalt tragen, also unmittelbar in <main> stehen. Der seitliche
 * Abstand bleibt überall, damit auf schmalen Geräten nichts am Rand klebt.
 */
.container {
  padding-inline: clamp(16px, 3vw, 26px);
}
/*
 * Beide Bauweisen abdecken: Manche Seiten setzen die Klasse auf <main>
 * selbst, andere legen einen Container hinein. Fehlt einer der beiden
 * Fälle, steht die betroffene Seite ohne senkrechten Abstand da und klebt
 * an Kopf- und Fußzeile.
 */
main.container,
main > .container {
  padding-block: clamp(24px, 4vw, 44px) clamp(48px, 7vw, 84px);
}
.container--narrow {
  padding: clamp(24px, 4vw, 44px) clamp(16px, 3vw, 26px) clamp(48px, 7vw, 84px);
}
.container--form {
  padding: clamp(32px, 6vw, 60px) clamp(16px, 3vw, 26px) clamp(48px, 7vw, 84px);
}

/* Erste Überschrift nicht doppelt absetzen. */
main > .container > h1:first-child,
main > .container--narrow > h1:first-child,
.container > h1:first-child { margin-top: 0; }

main h1 { margin-bottom: 10px; }
main .lede { margin-bottom: clamp(20px, 3vw, 30px); }

/* Karten und Abschnitte bekommen gleichmäßigen Abstand, statt dass jede
   Seite ihren eigenen erfindet. */
main .card,
main > .container > section,
main > .container--narrow > section {
  margin-bottom: clamp(16px, 2.5vw, 26px);
}
main .card { padding: clamp(18px, 3vw, 26px); }
main .card > h2:first-child,
main section > h2:first-child { margin-top: 0; }

.notice { margin-bottom: clamp(14px, 2vw, 20px); }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ---------------------------------------------------------------------
   Kleine Bildschirme
   ------------------------------------------------------------------- */

@media (max-width: 720px) {
  body { font-size: 16.5px; }

  /* Mehrspaltige Formularzeilen brechen um, statt sich zu quetschen. */
  .field-row { grid-template-columns: 1fr !important; display: grid; gap: 12px; }

  /* Tabellen laufen nicht mehr aus dem Bild, sondern rollen für sich. */
  main table { display: block; overflow-x: auto; white-space: nowrap; }

  /* Knöpfe nebeneinander sind auf schmalen Geräten schwer zu treffen. */
  .btn-row .btn { flex: 1 1 auto; justify-content: center; }

  .detail-list { grid-template-columns: 1fr; gap: 2px 0; }
  .detail-list dt { margin-top: 10px; }

  .immo__daten { gap: 10px; font-size: 14.5px; }
  .filterleiste { grid-template-columns: 1fr; }
  .cv-navigation { flex-direction: column; align-items: stretch; }
  .cv-navigation > div { display: flex; gap: 8px; }
  .cv-navigation .btn { flex: 1; justify-content: center; }
}

@media (max-width: 460px) {
  /* Eingabefelder mindestens 16px, sonst zoomt Safari beim Antippen. */
  input, select, textarea { font-size: 16px; }
  .werbemittel { grid-template-columns: 1fr; }
  .immo { grid-template-columns: 1fr; }
  .immo__bild { min-height: 200px; }
}

/* Bilder und eingebettete Inhalte sprengen nie ihren Rahmen. */
img, svg, video, iframe { max-width: 100%; height: auto; }
pre, .code-block { max-width: 100%; overflow-x: auto; }

/* Zertifikate */
.detail-liste { display: grid; gap: 10px; }
.zert {
  display: flex; gap: 14px; align-items: center; justify-content: space-between;
  flex-wrap: wrap;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-s);
  background: var(--surface);
}
.zert.is-aus { opacity: .6; }

/* =====================================================================
   Kontoseite
   =====================================================================
   Vorher: eine schmale Spalte gleich aussehender Kästen, in denen ein
   Formular, zwei Listen und acht Knöpfe ohne erkennbare Ordnung standen.
   Der wichtigste Teil, nämlich wie sicher das Konto ist, kam gar nicht vor.

   Jetzt: ein Kopf mit den Zahlen, links die Dinge zum Bearbeiten, rechts
   die Wege in andere Bereiche, und die Sicherheit als Zustandsliste mit
   Ampel statt als Knopfleiste.
   ------------------------------------------------------------------ */

.kontokopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  padding: clamp(20px, 3vw, 28px);
  margin-bottom: clamp(18px, 3vw, 26px);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-left: 4px solid var(--brand);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.kontokopf__person { display: flex; align-items: center; gap: 18px; min-width: 0; }
.kontokopf__person h1 { margin: 0; font-size: clamp(24px, 3vw, 30px); line-height: 1.2; }
.kontokopf__meta { margin: 5px 0 0; color: var(--text-soft); font-size: 14.5px; }

.kontokopf__zahlen { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.kontokopf__zahlen a {
  display: block; min-width: 92px; padding: 12px 14px;
  text-align: center; text-decoration: none;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-s);
  color: var(--text-soft); font-size: 12.5px;
  transition: border-color 140ms ease, transform 140ms ease;
}
.kontokopf__zahlen a:hover { border-color: var(--brand); transform: translateY(-2px); text-decoration: none; }
.kontokopf__zahlen span {
  display: block; font-size: 26px; font-weight: 600; line-height: 1.1;
  color: var(--ink); font-variant-numeric: tabular-nums; margin-bottom: 3px;
}
.kontokopf__zahlen span.is-neu { color: var(--brand); }

.kontoraster { display: grid; gap: clamp(16px, 2.5vw, 24px); align-items: start; }
@media (min-width: 940px) {
  .kontoraster { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
}
.kontoraster__seite { position: sticky; top: 20px; display: grid; gap: inherit; }
@media (max-width: 939px) { .kontoraster__seite { position: static; } }

.karte__kopf { margin-bottom: 16px; }
.karte__kopf h2 { margin: 0 0 4px; font-size: 19px; }
.karte__kopf .muted { margin: 0; font-size: 14.5px; }
.karte__fuss {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
  display: flex; gap: 10px; flex-wrap: wrap;
}

/* Sicherheit: Ampel links, Erklärung, Handlung rechts */
.statusliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.statusliste li {
  display: grid; grid-template-columns: 12px minmax(0, 1fr) auto;
  gap: 14px; align-items: center;
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.statusliste li:last-child { border-bottom: none; }
.statusliste__punkt {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--line-strong);
}
.statusliste .is-gut .statusliste__punkt { background: var(--ok); }
.statusliste .is-warnung .statusliste__punkt { background: var(--warn); }
.statusliste .is-offen .statusliste__punkt {
  background: transparent; border: 2px solid var(--line-strong);
}
.statusliste strong { display: block; color: var(--ink); font-size: 15.5px; }
.statusliste span:not(.statusliste__punkt) {
  display: block; color: var(--text-soft); font-size: 14px; line-height: 1.5; margin-top: 2px;
}
@media (max-width: 620px) {
  .statusliste li { grid-template-columns: 12px minmax(0, 1fr); }
  .statusliste li .btn { grid-column: 2; justify-self: start; }
}

/* Wege in andere Bereiche */
.kontowege { display: grid; gap: 2px; }
.kontowege a {
  display: flex; align-items: center; gap: 13px;
  padding: 12px 12px; margin: 0 -12px;
  border-radius: var(--radius-s);
  text-decoration: none; color: var(--ink);
  transition: background 140ms ease;
}
.kontowege a:hover { background: var(--surface-2); text-decoration: none; }
.kontowege .icon { width: 19px; height: 19px; color: var(--brand); flex-shrink: 0; }
.kontowege strong { display: block; font-size: 15px; font-weight: 600; }
.kontowege span { min-width: 0; }
.kontowege span span { display: block; }
.kontowege a > span { color: var(--text-soft); font-size: 13.5px; line-height: 1.45; }

.merkliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.merkliste a {
  display: block; padding: 11px 12px; margin: 0 -12px;
  border-radius: var(--radius-s); text-decoration: none; color: var(--ink); font-size: 15px;
}
.merkliste a:hover { background: var(--surface-2); color: var(--brand); text-decoration: none; }

/* Löschen sitzt hinter einer sichtbaren Grenze, nicht neben "Speichern" */
.gefahrenbereich { border-color: color-mix(in srgb, var(--danger, #a32f2f) 30%, var(--line)); }
.gefahrenbereich .karte__kopf h2 { color: var(--danger, #a32f2f); }

/* Finanzplaner */
.finanz-zahlen {
  display: grid; gap: 12px; margin-bottom: clamp(18px, 3vw, 26px);
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.finanz-zahlen > div {
  padding: 18px 20px; background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--radius-s);
  color: var(--text-soft); font-size: 13.5px;
}
.finanz-zahlen span {
  display: block; font-size: clamp(22px, 3vw, 28px); font-weight: 600;
  color: var(--ink); line-height: 1.15; margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}
.finanz-zahlen .is-achtung { border-left: 4px solid var(--warn); }

.kostenbalken { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.kostenbalken__kopf {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 14.5px; margin-bottom: 6px; color: var(--text-soft);
}
.kostenbalken__kopf strong { color: var(--ink); }
.kostenbalken__spur { height: 9px; background: var(--surface-2); border-radius: 5px; overflow: hidden; }
.kostenbalken__fuellung { height: 100%; background: var(--brand); border-radius: 5px; }

/* Hinweis unter dem Knopf auf den Paketkarten für Gäste */
.plan__hinweis { margin: 10px 0 0; font-size: 13.5px; color: var(--text-soft); text-align: center; }

/* Cloudspeicher: Tabellen im Portal füllen die Karte, sonst drängen sich
   die Spalten links zusammen und der Rest bleibt leer. */
.card table { width: 100%; border-collapse: collapse; }
.card table th,
.card table td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); }
.card table th { font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-soft); }
.card table td.num, .card table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.card table td.cell-actions { text-align: right; white-space: nowrap; }

/* Sammelpunkt "Mehr" in der Kopfleiste. Ohne Skript gebaut. */
.kopfzeile__mehr { position: relative; display: inline-block; }
.kopfzeile__mehr > summary {
  list-style: none; cursor: pointer; color: inherit;
}
.kopfzeile__mehr > summary::-webkit-details-marker { display: none; }
.kopfzeile__mehr > summary::after { content: " ▾"; font-size: 10px; }
.kopfzeile__mehrliste {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 40;
  display: grid; gap: 2px; padding: 8px;
  /* min-width allein ließ die Liste auf schmalen Geräten über den
     Fensterrand ragen; die Obergrenze fängt das ab. */
  min-width: min(230px, calc(100vw - 28px));
  max-width: calc(100vw - 28px);
  background: var(--tinte, #12181a); border: 1px solid rgba(255,255,255,.16);
  border-radius: 8px; box-shadow: 0 12px 28px rgba(0,0,0,.35);
}
.kopfzeile__mehrliste a { display: block; padding: 7px 10px; border-radius: 5px; }
.kopfzeile__mehrliste a:hover { background: rgba(255,255,255,.08); text-decoration: none; }
@media (max-width: 720px) {
  .kopfzeile__mehrliste {
    position: static; box-shadow: none; margin-top: 6px;
    min-width: 0; max-width: 100%;
    /*
     * Eine Spalte, die nicht unter null schrumpfen darf: Ohne
     * minmax(0, 1fr) richtet sich die Spaltenbreite nach dem längsten
     * Eintrag ("Anmeldedienst für Websites"), und die Liste ragte auf
     * schmalen Geräten über den Fensterrand.
     */
    grid-template-columns: minmax(0, 1fr);
  }
  .kopfzeile__mehrliste a { overflow-wrap: anywhere; }
}

/* Verlauf in der Vermittlung */
.verlaufseintrag { padding: 12px 14px; border-left: 3px solid var(--line-strong); margin-bottom: 12px; }
.verlaufseintrag--system { border-left-color: var(--text-soft); background: var(--surface-2); }
.verlaufseintrag--vermittlung { border-left-color: var(--brand); background: var(--brand-soft); }
.verlaufseintrag__kopf { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 6px; font-size: 13.5px; }
.verlaufseintrag p:last-child { margin: 0; }

/* Dauerhafte Klarstellung unter der Kopfzeile.
   Dezent, aber lesbar: eigener Hintergrund, ausreichender Kontrast,
   normale Schriftgröße, kein Ausblenden. Auf schmalen Geräten bricht sie
   um, statt zu verschwinden. */
.hinweiszeile {
  margin: 0;
  padding: 9px 22px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
}
@media (max-width: 640px) {
  .hinweiszeile { font-size: 13.5px; padding: 9px 14px; text-align: left; }
}

/* Herkunftshinweis auf Behörden- und Leistungsseiten. Dezent, aber
   oberhalb des Inhalts und ohne Ausblendmöglichkeit. */
.herkunftshinweis {
  margin: 0 0 18px;
  padding: 10px 14px;
  background: var(--surface-2);
  border-left: 3px solid var(--line-strong);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  color: var(--text-soft);
  font-size: 13.5px;
  line-height: 1.5;
}

/* Zusatzzeile in Tabellenzellen. Steht im Adminstil, fehlte im Portal:
   Ohne Umbruch klebte sie an den Text davor ("Stadtwerke GmbH6 Zahlungen"). */
.cell-sub {
  display: block; margin-top: 2px;
  font-size: 12.5px; color: var(--text-mute);
}

/* ---------------------------------------------------------------------
   Finanzplaner
   ------------------------------------------------------------------- */

.finanznav {
  display: flex; flex-wrap: wrap; gap: 2px;
  margin: 0 0 22px; padding: 4px;
  background: var(--surface-2); border-radius: var(--radius-m);
}
.finanznav__eintrag {
  padding: 8px 15px; border-radius: calc(var(--radius-m) - 4px);
  font-size: 14.5px; color: var(--text-soft); text-decoration: none;
}
.finanznav__eintrag:hover { background: var(--paper); text-decoration: none; }
.finanznav__eintrag.is-aktiv {
  background: var(--paper); color: var(--ink); font-weight: 600;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}

/* Kennzahlen des Finanzplaners */
.finanzkacheln {
  display: grid; gap: 14px; margin-bottom: 22px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.finanzkachel {
  padding: 18px 20px; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius-m);
}
.finanzkachel__wert {
  display: block; font-size: 27px; font-weight: 600; color: var(--ink);
  line-height: 1.1; margin-bottom: 4px; font-variant-numeric: tabular-nums;
}
.finanzkachel__name { font-size: 13.5px; color: var(--text-mute); }
.finanzkachel__zusatz { display: block; margin-top: 6px; font-size: 13px; color: var(--text-soft); }
.finanzkachel--achtung { border-left: 4px solid var(--warn); }
.finanzkachel--gut { border-left: 4px solid var(--ok); }

/* Bereichskarten auf der Übersicht */
.finanzbereiche {
  display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.finanzbereich {
  display: block; padding: 18px 20px; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius-m);
  text-decoration: none; color: inherit;
}
.finanzbereich:hover { border-color: var(--brand); text-decoration: none; }
.finanzbereich h3 { margin: 0 0 6px; font-size: 16px; display: flex; justify-content: space-between; gap: 10px; }
.finanzbereich p { margin: 0 0 8px; font-size: 13.5px; color: var(--text-soft); }
.finanzbereich__stand { font-size: 13.5px; color: var(--text-mute); font-weight: 400; }
.finanzbereich__leer { font-size: 13.5px; color: var(--brand); }

/* Fristenliste */
.fristliste { display: grid; gap: 10px; }
.fristzeile {
  display: flex; justify-content: space-between; gap: 14px; align-items: baseline;
  padding: 11px 14px; border: 1px solid var(--line); border-radius: var(--radius-s);
  background: var(--paper);
  /* Die ganze Zeile ist der Verweis; durchgehende Unterstreichung würde
     die Liste unruhig machen. Erkennbar bleibt sie durch den Zeiger und
     die Umrandung beim Überfahren. */
  text-decoration: none; color: inherit;
}
.fristzeile:hover { border-color: var(--brand); text-decoration: none; }
.fristzeile strong { color: var(--ink); }
.fristzeile--eilig { border-left: 4px solid var(--warn); }
.fristzeile__tage { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Breite Arbeitsfläche für Übersichten und Tabellen.
   Wächst mit dem Fenster, statt bei 1000 Pixeln aufzuhören, bleibt aber
   bei sehr breiten Bildschirmen lesbar begrenzt. Formulare behalten
   bewusst die schmale Fassung. */
.container--weit {
  /*
   * width: 100% ist hier nicht überflüssig: body ist ein Flex-Kasten, und
   * darin schrumpft ein Block auf seine Inhaltsbreite. Ohne die Angabe war
   * die Umsatzliste 1017 Pixel breit, während die Übersicht mit ihren
   * Kacheln die vollen 1440 nutzte. Zwei Seiten desselben Bereichs sahen
   * damit unterschiedlich breit aus.
   */
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
}

/*
 * Tabellen rollen in ihrer Karte, statt die Seite zu sprengen.
 *
 * Bewusst bei jeder Fensterbreite, nicht nur auf Mobilgeräten: Die
 * Umsatzliste lief bei 1280 und die Rechnungsliste bei 768 Pixeln über den
 * Rand, weil einzelne Zellen breiter wurden als der Platz. Eine Tabelle,
 * die in ihrem Kasten rollt, ist immer besser als eine Seite, die sich
 * seitlich verschieben lässt.
 */
.card table { display: block; overflow-x: auto; max-width: 100%; }
.card table tbody, .card table thead { display: table; width: 100%; }

/* Filterleisten und Knopfreihen brechen um, statt hinauszuragen. */
.filterleiste, .btn-row { flex-wrap: wrap; }
.filterleiste .btn, .btn-row .btn { flex: 0 0 auto; }

/* Rückweg statt Brotkrumenleiste */
.rueckweg { margin: 0 0 10px; font-size: 14px; }
.rueckweg a { color: var(--text-mute); }
.rueckweg a::before { content: "← "; }

/* Kategorie ändern in der Umsatzliste. Auswahlfeld, Haken und Knopf
   brechen um, statt die Zeile über den Rand zu schieben; bei mittlerer
   Fensterbreite lief die Seite sonst seitlich über. */
.kategorieform {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  max-width: 100%;
}
.kategorieform select { max-width: 100%; min-width: 150px; flex: 1 1 150px; }
.kategorieform .btn { flex: 0 0 auto; }

/*
 * Zwei Stellen, an denen sich die Seite bisher seitlich verschieben ließ.
 *
 * Erstens die Knopfreihe der Filterleiste: Ein Flex-Element darf nicht
 * unter seine Inhaltsbreite schrumpfen, solange min-width auto gilt.
 * Deshalb ragte "Zurücksetzen" bei 1280 Pixeln über den Rand.
 *
 * Zweitens die Navigationsleiste im Kopfbereich: Sie rollt zwar selbst,
 * war aber nicht auf die Fensterbreite begrenzt.
 */
.filterleiste > *, .filterleiste__knoepfe { min-width: 0; }
.filterleiste__knoepfe { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.kopfzeile__nav { max-width: 100%; }

/* Widerruf und Kündigung in der Fußzeile. Nach § 356a und § 312k BGB
   müssen beide leicht auffindbar sein; deshalb etwas kräftiger als die
   übrigen Verweise, ohne zu schreien. */
.footer-nav__hervor { font-weight: 600; color: var(--ink); }

.btn--gross { padding: 12px 22px; font-size: 15.5px; }

.daten { display: grid; gap: 0; margin: 0; }
.daten > div {
  display: flex; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--line);
}
.daten dt { flex: 0 0 190px; margin: 0; color: var(--text-soft); font-size: 14px; }
.daten dd { margin: 0; font-size: 14.5px; }
@media (max-width: 560px) {
  .daten > div { flex-direction: column; gap: 2px; }
  .daten dt { flex: none; }
}

/* Suche */
.suchleiste { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 8px; }
.suchleiste input[type="search"] { font-size: 16px; padding: 11px 14px; }

.trefferliste { display: grid; gap: 22px; margin-top: 18px; }
.treffer h2 { margin: 0 0 3px; font-size: 18px; color: var(--brand); font-weight: 600; }
.treffer a { text-decoration: none; }
.treffer a:hover h2 { text-decoration: underline; }
.treffer__quelle { margin: 0 0 5px; font-size: 13px; color: var(--text-mute); }
.treffer__auszug { margin: 0; font-size: 14.5px; color: var(--text-soft); line-height: 1.55; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Vorhaben als Karten.
   Vorher eine Aufzählung aus Verweisen, bei der jede Zeile unterstrichen
   war, auch der Beschreibungstext. Das sah nach Linksammlung aus. */
.vorhaben {
  display: grid; gap: 14px; margin: 22px 0 26px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.vorhaben__karte {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 18px 20px; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius-m);
  text-decoration: none; color: inherit;
  transition: border-color .12s ease, transform .12s ease;
}
.vorhaben__karte:hover {
  border-color: var(--brand); text-decoration: none; transform: translateY(-1px);
}
.vorhaben__icon {
  flex: 0 0 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); color: var(--brand);
}
.vorhaben__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.vorhaben__name { font-weight: 600; font-size: 16px; color: var(--ink); }
.vorhaben__kurz { font-size: 14px; color: var(--text-soft); line-height: 1.5; }
.vorhaben__fuss { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 2px; }
.vorhaben__stand { font-size: 12.5px; color: var(--text-mute); }

/* Fußzeile mit Symbolen */
.footer-nav a { display: inline-flex; align-items: center; gap: 6px; }
.footer-nav a .icon { width: 16px; height: 16px; opacity: .7; }

/* ---------------------------------------------------------------------
   Suchstartseite
   ------------------------------------------------------------------- */

.suchstart {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: clamp(40px, 9vh, 110px) 0 34px;
}
.suchstart--kompakt {
  padding: 18px 0 22px; align-items: stretch; text-align: left;
}

.suchstart__marke {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 14px; font-size: clamp(30px, 5vw, 44px);
  font-weight: 600; letter-spacing: -.02em; color: var(--ink);
}
/* Feste Größe statt em-Maß: Über die Schriftgröße gerechnet wurde das
   Kürzel schmaler als sein eigener Text und die Buchstaben liefen
   übereinander. */
.suchstart__zeichen {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: 14px;
  background: var(--brand); color: #fff;
  font-size: 20px; font-weight: 700; letter-spacing: .04em;
}
.suchstart__zeile {
  margin: 0 0 26px; max-width: 520px;
  font-size: 16px; line-height: 1.55; color: var(--text-soft);
}

/* Das Feld selbst: eine Leiste, in der Lupe, Anliegen, Ort und Knopf
   sitzen. Sichtbarer Rahmen, damit man erkennt, wo man tippt. */
.suchfeld {
  display: flex; align-items: center; gap: 6px;
  /* 780 statt 660: Ort und Knopf brauchen zusammen rund 300 Pixel, das
     Anliegen bekam sonst nur 224 und schnitt den Platzhalter mitten im
     Wort ab. */
  width: 100%; max-width: 780px; margin: 0 auto;
  padding: 6px 6px 6px 16px;
  background: var(--paper);
  border: 1px solid var(--line-strong, var(--line));
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
  transition: box-shadow .12s ease, border-color .12s ease;
}
.suchfeld:focus-within {
  border-color: var(--brand);
  box-shadow: 0 2px 10px rgba(0,0,0,.09);
}
.suchfeld__lupe { display: flex; color: var(--text-mute); flex: 0 0 auto; }
.suchfeld__lupe .icon { width: 19px; height: 19px; }

/* Das Anliegen bekommt den Platz, der Ort nur so viel wie nötig: Der
   Platzhalter wurde sonst mitten im Wort abgeschnitten. */
.suchfeld input[type="search"] {
  flex: 1 1 320px; min-width: 0;
  border: none; background: transparent;
  padding: 12px 6px; font-size: 16.5px; color: var(--ink);
}
.suchfeld input[type="search"]:focus { outline: none; }
.suchfeld input[type="search"]::placeholder { color: var(--text-mute); }

.suchfeld__trenner {
  width: 1px; align-self: stretch; margin: 8px 4px; background: var(--line);
}
.suchfeld__ort {
  flex: 0 0 150px; min-width: 0;
  border: none; background: transparent;
  padding: 12px 6px; font-size: 15.5px;
}
.suchfeld__ort:focus { outline: none; }

.suchfeld__knopf {
  flex: 0 0 auto; border: none; cursor: pointer;
  padding: 12px 24px; border-radius: 999px;
  background: var(--brand); color: #fff;
  font-size: 15.5px; font-weight: 600;
}
.suchfeld__knopf:hover { background: var(--brand-dark, var(--brand)); }

.suchstart__wege {
  display: flex; gap: 18px; flex-wrap: wrap; justify-content: center;
  margin: 20px 0 0; font-size: 14.5px;
}

@media (max-width: 620px) {
  /* Auf schmalen Geräten untereinander: Drei Elemente nebeneinander
     lassen für das Anliegen selbst keinen Platz mehr. */
  .suchfeld {
    flex-direction: column; align-items: stretch; gap: 8px;
    border-radius: var(--radius-m); padding: 12px;
  }
  .suchfeld__lupe { display: none; }
  .suchfeld__trenner { display: none; }
  .suchfeld input[type="search"], .suchfeld__ort {
    border: 1px solid var(--line); border-radius: var(--radius-s);
    background: var(--surface-2); padding: 12px 13px; flex: none;
  }
  .suchfeld__knopf { width: 100%; border-radius: var(--radius-s); }
}

/* Suchseite: breiter als ein Formular, schmaler als eine Tabelle. */
.suchseite { max-width: 900px; margin: 0 auto; width: 100%; }

/* Navigation im Webspace-Bereich */
.wslayout { display: grid; gap: 24px; align-items: start; }
@media (min-width: 900px) { .wslayout { grid-template-columns: 232px minmax(0, 1fr); } }

.wsnav {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-m); padding: 10px 8px; position: sticky; top: 16px;
}
.wsnav__titel {
  margin: 12px 10px 6px; font-size: 11.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-mute);
}
.wsnav__titel:first-child { margin-top: 4px; }
.wsnav__punkt {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px;
  color: var(--ink); text-decoration: none; font-size: 14.5px;
}
.wsnav__punkt:hover { background: var(--surface-2); text-decoration: none; }
.wsnav__punkt.is-aktiv { background: var(--surface-2); color: var(--brand); font-weight: 600; }
.wsnav__punkt .icon { width: 17px; height: 17px; opacity: .75; flex: 0 0 auto; }
.wsnav__punkt.is-aktiv .icon { opacity: 1; }

/* Reiter in den Webspace-Bereichen */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.tabs .tab {
  padding: 8px 14px; border-radius: 8px 8px 0 0; text-decoration: none;
  color: var(--text-soft); font-size: 14.5px; border: 1px solid transparent;
  border-bottom: none; margin-bottom: -1px;
}
.tabs .tab:hover { background: var(--surface-2); text-decoration: none; }
.tabs .tab.is-aktiv {
  background: var(--paper); border-color: var(--line);
  color: var(--brand); font-weight: 600;
}

/* =====================================================================
   Kopfzeile, neu geordnet
   ===================================================================== */

/*
 * Die Kopfzeile liegt über dem, was folgt. Ohne das legte sich das
 * Hinweisband darunter über das aufgeklappte Kontomenü, und von zwölf
 * Punkten war nur der erste zu sehen.
 */
/*
 * Eigener Name für die Kopfzeile.
 *
 * Sie hieß .kopf, genau wie der Aufmacher der Startseite. Dessen Regel
 * setzt overflow: hidden, und damit wurde jedes aufgeklappte Menü an der
 * Unterkante der Kopfzeile abgeschnitten: Von zwölf Punkten im Kontomenü
 * war einer zu sehen.
 *
 * Zwei Bauteile mit demselben Klassennamen sind eine Falle, die beim
 * nächsten Umbau erneut zuschnappt.
 */
.kopfleiste {
  background: #101719; color: #fff; position: relative; z-index: 60;
}
.leiste__breite {
  max-width: 1240px; margin: 0 auto; padding: 0 20px;
  display: flex; align-items: center; gap: 18px;
}

.leiste__oben { border-bottom: 1px solid rgba(255,255,255,.09); }
.leiste__oben .leiste__breite { min-height: 62px; }

.leiste__marke {
  display: flex; align-items: center; gap: 10px;
  color: #fff; text-decoration: none; flex: 0 0 auto;
}
.leiste__marke:hover { text-decoration: none; }
.leiste__zeichen {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 9px;
  background: var(--brand); color: #fff; font-weight: 700; font-size: 13px;
}
.leiste__wort { font-size: 18px; font-weight: 600; letter-spacing: -.01em; }

/* Suche mittig, damit sie nicht wie ein Anhängsel wirkt. */
.leiste__suche {
  flex: 1 1 auto; max-width: 420px; margin: 0 auto;
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px; padding: 0 14px;
}
.leiste__suche:focus-within { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); }
.leiste__lupe { display: flex; opacity: .7; }
.leiste__lupe .icon { width: 17px; height: 17px; }
.leiste__suche input {
  flex: 1 1 auto; min-width: 0; border: none; background: transparent;
  color: #fff; font-size: 14.5px; padding: 9px 0;
}
.leiste__suche input::placeholder { color: rgba(255,255,255,.55); }
.leiste__suche input:focus { outline: none; }

.leiste__konto { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.leiste__symbol {
  position: relative; display: flex; color: rgba(255,255,255,.8); padding: 6px;
}
.leiste__symbol:hover { color: #fff; }
.leiste__zahl {
  position: absolute; top: 0; right: 0; min-width: 16px; height: 16px;
  border-radius: 8px; background: var(--alert); color: #fff;
  font-size: 10.5px; line-height: 16px; text-align: center; padding: 0 4px;
}
.leiste__anmelden { color: rgba(255,255,255,.85); font-size: 14.5px; }
.leiste__cta {
  background: var(--brand); color: #fff; padding: 8px 16px;
  border-radius: 999px; font-size: 14.5px; font-weight: 600; text-decoration: none;
}
.leiste__cta:hover { text-decoration: none; opacity: .92; }

/* Konto als Klappliste: alles Persönliche an einer Stelle. */
.leiste__ich { position: relative; }
.leiste__ich > summary {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  list-style: none; padding: 5px 10px 5px 5px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16); font-size: 14px;
}
.leiste__ich > summary::-webkit-details-marker { display: none; }
.leiste__ich[open] > summary { background: rgba(255,255,255,.1); }
/* Kürzel in der Kopfleiste: abgerundetes Viereck in gedecktem Ton,
   passend zu den Kürzeln im übrigen Portal. */
.leiste__initialen {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 7px;
  background: rgba(255, 255, 255, .14); font-size: 11.5px; font-weight: 600;
}
.ichliste__kopf .leiste__initialen {
  width: 38px; height: 38px; border-radius: 9px; font-size: 14px;
  background: var(--surface-2, #e7ebec); color: var(--text-soft);
  border: 1px solid var(--line);
}
.leiste__name { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/*
 * Farbe: --surface, nicht --paper. Den Namen gibt es im Portal nicht, die
 * Fläche blieb deshalb durchsichtig, und dunkle Schrift stand auf dem
 * dunklen Kopf. Das Menü sah leer aus, obwohl zwölf Punkte darin standen.
 */
/*
 * Das Konto-Menü. Gruppiert, mit Kopf und Symbolen: Vorher standen
 * dreizehn gleich aussehende Zeilen untereinander, und wer einen Punkt
 * suchte, musste alle lesen. Höhe begrenzt und scrollbar, damit es auf
 * einem Laptopbildschirm nicht unten herausläuft.
 */
.leiste__ichliste {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 70;
  width: 292px; background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 18px 44px rgba(0,0,0,.22); padding: 6px;
  display: grid; gap: 1px;
  max-height: min(78vh, 620px); overflow-y: auto;
}
.ichliste__kopf {
  display: flex; align-items: center; gap: 11px; padding: 12px 12px 13px;
  border-bottom: 1px solid var(--line); margin-bottom: 4px;
}
.ichliste__kopf strong { display: block; font-size: 14.5px; }
.ichliste__zeile {
  display: block; font-size: 12.5px; color: var(--text-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 190px;
}
.ichliste__titel {
  margin: 10px 0 3px; padding: 0 12px;
  font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-soft);
}
.leiste__ichliste .icon { width: 16px; height: 16px; flex: none; opacity: .68; }
.leiste__ichliste a:hover .icon, .leiste__ichliste button:hover .icon { opacity: 1; }
.leiste__ichliste a, .leiste__ichliste button {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left; padding: 8px 12px;
  border-radius: 8px; color: var(--ink); text-decoration: none;
  font-size: 14.5px; background: none; border: none; cursor: pointer; font: inherit;
}
.leiste__ichliste a:hover, .leiste__ichliste button:hover {
  background: var(--surface-2); text-decoration: none;
}
.leiste__ichliste form { margin: 4px 0 0; border-top: 1px solid var(--line); padding-top: 4px; }


/* Ein Band statt zwei. */
.hinweisband { background: var(--surface-2); border-bottom: 1px solid var(--line); }
.hinweisband .leiste__breite {
  min-height: 34px; justify-content: space-between; flex-wrap: wrap; gap: 8px;
}
.hinweisband__einordnung { margin: 0; font-size: 12.5px; color: var(--text-soft); }
/*
 * Betriebshinweis als abgesetztes Schild. Vorher stand er in fetten
 * Großbuchstaben quer über die halbe Zeile; gerufene Sätze liest man nicht
 * besser, man liest sie schneller weg.
 */
.hinweisband__betrieb {
  margin: 0; display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 12px 4px 9px; border-radius: 999px;
  background: var(--amber-soft); border: 1px solid #e6cf9a; color: var(--amber);
  font-size: 12.5px; font-weight: 500; line-height: 1.35;
  max-width: 100%;
}
.hinweisband__zeichen { display: flex; flex: 0 0 auto; opacity: .8; }
.hinweisband__zeichen .icon { width: 14px; height: 14px; }

@media (max-width: 700px) {
  .hinweisband .leiste__breite { padding-top: 7px; padding-bottom: 7px; }
  .hinweisband__betrieb { font-size: 12px; }
}

@media (max-width: 900px) {
  .leiste__oben .leiste__breite { flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; gap: 10px; }
  .leiste__suche { order: 3; max-width: none; margin: 0; flex-basis: 100%; }
  .leiste__name { display: none; }

  /*
   * Marke und Konto bleiben in einer Zeile. Vorher rutschte das Konto in
   * eine eigene Zeile, und mit Suche und Menü lagen vier Bänder über der
   * Seite; die Überschrift begann erst bei über 400 Pixeln.
   */
  .leiste__marke { flex: 1 1 auto; min-width: 0; }
  .leiste__konto { flex: 0 0 auto; margin-left: auto; gap: 6px; }
  .leiste__cta { padding: 7px 12px; font-size: 13.5px; }
  .leiste__anmelden { font-size: 13.5px; }
  .leiste__wort { font-size: 16.5px; }
}

/* Häufig gesuchte Leistungen als Karten */
.leistungen {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 12px;
}
@media (min-width: 640px) { .leistungen { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .leistungen { grid-template-columns: repeat(3, 1fr); } }

.leistungen a {
  display: block; height: 100%; padding: 16px 18px;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-m); text-decoration: none;
  transition: border-color .12s ease, transform .12s ease;
}
.leistungen a:hover {
  border-color: var(--brand); text-decoration: none; transform: translateY(-1px);
}
.leistungen strong {
  display: block; color: var(--ink); font-size: 16px; font-weight: 600; line-height: 1.3;
}
.leistungen span {
  display: block; color: var(--text-soft); font-size: 14px; line-height: 1.5; margin-top: 6px;
}





/* =====================================================================
   Wegeleiste: sechs Punkte, keine Klapplisten
   ===================================================================== */

.leiste__wege { border-top: 1px solid rgba(255,255,255,.07); }
.leiste__wege .leiste__breite {
  min-height: 46px; gap: 4px; align-items: stretch;
  /* Auf schmalen Geräten wischbar statt umbrechend: Sechs kurze Wörter
     passen in eine Zeile, und das ist ein Griff weniger als ein Menü,
     das erst aufgehen muss. */
  overflow-x: auto; scrollbar-width: none;
}
.leiste__wege .leiste__breite::-webkit-scrollbar { display: none; }

.leiste__wege a {
  display: flex; align-items: center; padding: 0 14px; white-space: nowrap;
  color: rgba(255,255,255,.82); text-decoration: none; font-size: 15px;
  border-bottom: 2px solid transparent;
}
.leiste__wege a:hover { color: #fff; text-decoration: none; }
.leiste__wege a.is-hier { color: #fff; border-bottom-color: var(--brand); }

@media (max-width: 700px) {
  .leiste__wege .leiste__breite { padding: 0 12px; }
  .leiste__wege a { padding: 0 10px; font-size: 14.5px; }
}

/* Ärzteverzeichnis */
.notruf {
  background: var(--alert-soft); border: 1px solid #e8c9c9;
  border-radius: var(--radius-m); padding: 12px 16px; margin: 18px 0;
}
.notruf p { margin: 0; font-size: 14.5px; color: #7a2020; }
.notruf a { color: #7a2020; font-weight: 600; }
.notruf--schmal { margin: 14px 0; }

.suchkarte__zeile {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px;
}
.suchkarte__filter {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 14px;
  padding-top: 14px; border-top: 1px solid var(--line);
}
.suchkarte__filter .check-row { margin: 0; }
.suchkarte__filter button { margin-left: auto; }

.praxisliste { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }
.praxisliste a {
  display: block; padding: 16px 18px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-m); text-decoration: none;
}
.praxisliste a:hover { border-color: var(--brand); text-decoration: none; }
.praxisliste__kopf { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.praxisliste__kopf strong { color: var(--ink); font-size: 16.5px; }
.praxisliste__km { color: var(--text-soft); font-size: 13.5px; white-space: nowrap; }
.praxisliste__inhaber { display: block; color: var(--text); font-size: 14px; margin-top: 2px; }
.praxisliste__fach { display: block; color: var(--brand); font-size: 13.5px; margin-top: 4px; }
.praxisliste__ort { display: block; color: var(--text-soft); font-size: 13.5px; margin-top: 2px; }
.praxisliste__merkmale { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.merkmal {
  font-size: 12px; padding: 2px 9px; border-radius: 999px;
  background: var(--surface-2); color: var(--text-soft); border: 1px solid var(--line);
}
.merkmal--gut { background: #e7f3ec; color: var(--ok); border-color: #bfdccb; }
.merkmal--zu { background: var(--surface-2); color: var(--text-soft); }

/* =====================================================================
   Seitenkopf und Leerzustand
   ===================================================================== */

.seitenkopf { margin: 0 0 24px; }
.seitenkopf__zurueck { margin: 0 0 10px; font-size: 14px; }
.seitenkopf__zurueck a { color: var(--text-soft); text-decoration: none; }
.seitenkopf__zurueck a:hover { color: var(--brand); }

.seitenkopf__zeile {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  padding-bottom: 16px; border-bottom: 1px solid var(--line);
}
.seitenkopf h1 { margin: 0; }
.seitenkopf__lede { margin: 6px 0 0; color: var(--text-soft); font-size: 15.5px; max-width: 62ch; }
.seitenkopf__aktionen { display: flex; gap: 8px; flex-wrap: wrap; }

/* Der Leerzustand ist die erste Seite eines neuen Nutzers. Sie soll
   erklären, wofür der Bereich da ist, statt nur festzustellen, dass
   nichts da ist. */
.leerzustand {
  text-align: center; padding: 46px 24px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-m);
}
.leerzustand__zeichen {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; margin-bottom: 14px;
  border-radius: 50%; background: var(--brand-soft); color: var(--brand);
}
.leerzustand__zeichen .icon { width: 24px; height: 24px; }
.leerzustand h2 { margin: 0 0 8px; font-size: 19px; }
.leerzustand p { margin: 0 auto 16px; color: var(--text-soft); max-width: 46ch; }
.leerzustand__hinweis { font-size: 13.5px; }

/* Stufenleiter im Konto */
.stufenleiter { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 0; }
.stufenleiter li {
  position: relative; padding: 12px 0 12px 34px;
  border-left: 2px solid var(--line);
}
.stufenleiter li::before {
  content: ''; position: absolute; left: -8px; top: 16px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--line);
}
.stufenleiter li.is-erreicht { border-left-color: var(--brand); }
.stufenleiter li.is-erreicht::before { background: var(--brand); border-color: var(--brand); }
.stufenleiter li.is-hier { border-left-color: var(--brand); }
.stufenleiter li.is-hier::before {
  background: var(--surface); border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft);
}
.stufenleiter strong { display: block; color: var(--ink); font-size: 15.5px; }
.stufenleiter span { display: block; color: var(--text-soft); font-size: 14px; margin-top: 2px; }

/* =====================================================================
   Stellenbörse: Suchkopf
   ===================================================================== */

.jobkopf {
  background: var(--brand); color: #fff;
  border-radius: var(--radius-m); padding: 30px 26px; margin-bottom: 22px;
}
.jobkopf__inhalt { max-width: 900px; }
.jobkopf h1 { margin: 0 0 6px; color: #fff; font-size: 32px; }
.jobkopf p { margin: 0 0 20px; color: rgba(255,255,255,.85); font-size: 16px; }

.jobsuche { display: grid; gap: 12px; align-items: end; }
@media (min-width: 760px) {
  .jobsuche { grid-template-columns: 1fr 1fr auto; }
}
.jobsuche__feld { display: grid; gap: 6px; }
.jobsuche label { color: #fff; font-size: 14px; font-weight: 600; }
.jobsuche input {
  width: 100%; padding: 12px 14px; border-radius: var(--radius-m);
  border: 1px solid rgba(255,255,255,.25); background: #fff; color: var(--ink);
  font-size: 15.5px;
}
.jobsuche input:focus { outline: 3px solid rgba(255,255,255,.4); outline-offset: 1px; }
.jobsuche .btn { white-space: nowrap; }

/* =====================================================================
   Forum: zwei Spalten mit Seitenkarten
   ===================================================================== */

.forum-zwei { display: grid; gap: 22px; align-items: start; }
@media (min-width: 1040px) {
  .forum-zwei { grid-template-columns: minmax(0, 1fr) 300px; }
}
.forum-zwei__seite { display: grid; gap: 16px; }

.forumkarte {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-m); overflow: hidden;
}
.forumkarte h2 {
  margin: 0; padding: 11px 16px; background: var(--ink); color: #fff;
  font-size: 13.5px; font-weight: 600; letter-spacing: .02em;
}
.forumkarte > *:not(h2) { padding: 12px 16px; margin: 0; }

.forumkarte__liste { list-style: none; padding: 0 !important; margin: 0; }
.forumkarte__liste li { padding: 11px 16px; border-bottom: 1px solid var(--line); }
.forumkarte__liste li:last-child { border-bottom: none; }
.forumkarte__liste a {
  display: block; color: var(--ink); font-size: 14.5px; font-weight: 500;
  text-decoration: none; line-height: 1.35;
}
.forumkarte__liste a:hover { color: var(--brand); }
.forumkarte__liste span { display: block; color: var(--text-soft); font-size: 12.5px; margin-top: 3px; }

.forumkarte__zahlen { display: grid; gap: 8px; }
.forumkarte__zahlen div { display: flex; justify-content: space-between; font-size: 14px; }
.forumkarte__zahlen dt { color: var(--text-soft); }
.forumkarte__zahlen dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }

.forumkarte__hinweise { margin: 0; padding: 12px 16px 12px 32px; }
.forumkarte__hinweise li { font-size: 13.5px; color: var(--text-soft); margin-bottom: 7px; line-height: 1.45; }

/* Stellenbörse: Reiter, Wege, Berufsfelder */
.jobwege { display: flex; gap: 16px; justify-content: flex-end; flex-wrap: wrap; margin-bottom: 12px; }
.jobwege a { font-size: 14px; color: var(--text-soft); text-decoration: none; }
.jobwege a:hover { color: var(--brand); text-decoration: underline; }

.jobreiter { display: flex; gap: 6px; margin: 0 0 18px; }
.jobreiter a {
  padding: 8px 18px; border-radius: var(--radius-m) var(--radius-m) 0 0;
  color: rgba(255,255,255,.8); text-decoration: none; font-size: 15px; font-weight: 500;
}
.jobreiter a.is-hier { background: #fff; color: var(--brand); font-weight: 600; }
.jobreiter a:not(.is-hier):hover { background: rgba(255,255,255,.12); color: #fff; }

.feldgitter {
  display: grid; gap: 12px; margin-top: 14px;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.feldkachel {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 6px; padding: 18px 12px; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m);
}
.feldkachel:hover { border-color: var(--brand); text-decoration: none; }
.feldkachel__zeichen {
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 50%; background: var(--brand-soft); color: var(--brand);
}
.feldkachel__zeichen .icon { width: 22px; height: 22px; }
.feldkachel__name { color: var(--ink); font-weight: 600; font-size: 14.5px; line-height: 1.3; }
.feldkachel__zahl { color: var(--text-soft); font-size: 12.5px; }
.feldkachel.is-leer { opacity: .62; }

/*
 * Berufsfelder auf breiten Bildschirmen.
 *
 * Die Kacheln richten sich nach dem Platz: vier Spalten wirken auf einem
 * großen Schirm verloren, sechs sind bei 1200 Pixeln noch gut lesbar. Am
 * Telefon bleiben zwei, denn eine Spalte macht aus zwölf Feldern eine
 * lange Rolle.
 */
@media (min-width: 1100px) {
  .feldgitter { grid-template-columns: repeat(6, 1fr); }
}
@media (max-width: 560px) {
  .feldgitter { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .feldkachel { padding: 14px 8px; }
  .feldkachel__name { font-size: 13.5px; }
}

/* Suchkopf: das Suchen-Feld darf am Telefon nicht neben den Eingaben
   kleben, sondern bekommt eine eigene Zeile. */
@media (max-width: 759px) {
  .jobsuche .btn { width: 100%; }
  .jobreiter a { padding: 8px 14px; font-size: 14.5px; }
}

/* =====================================================================
   Stellenbörse, zweite Fassung
   Was vorher unfertig wirkte, und warum: Der Suchknopf war türkis auf
   türkis und damit unsichtbar. Die Kacheln waren blass und alle gleich,
   sodass das Auge nirgends Halt fand. Der Filterblock schwebte als
   eigener Kasten zwischen Kacheln und Liste, ohne zu etwas zu gehören.
   Die Trefferliste hatte keine Karten, nur Text.
   ===================================================================== */

.jobkopf {
  background: linear-gradient(135deg, var(--brand) 0%, #0b4f57 100%);
  border-radius: var(--radius-m) var(--radius-m) 0 0;
  padding: 36px 30px 92px; margin-bottom: 0;
  color: #fff;
}
.jobkopf__ueber {
  margin: 0 0 6px; font-size: 13px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(255,255,255,.7);
}
.jobkopf h1 { margin: 0 0 10px; color: #fff; font-size: clamp(26px, 3.2vw, 38px); line-height: 1.15; max-width: 22ch; }
.jobkopf__lede { margin: 0 0 22px; color: rgba(255,255,255,.85); font-size: 16px; max-width: 60ch; }

.jobreiter { display: flex; gap: 4px; margin: 0; }
.jobreiter a {
  padding: 9px 20px; border-radius: 999px;
  color: rgba(255,255,255,.85); text-decoration: none; font-size: 15px; font-weight: 500;
  border: 1px solid rgba(255,255,255,.3);
}
.jobreiter a.is-hier { background: #fff; color: var(--brand); font-weight: 600; border-color: #fff; }
.jobreiter a:not(.is-hier):hover { background: rgba(255,255,255,.14); color: #fff; text-decoration: none; }

/* Suchkarte, die in den Kopf hineinragt */
.jobsuche-karte {
  display: grid; gap: 14px; align-items: end;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-m); padding: 18px 20px;
  box-shadow: 0 14px 34px rgba(11, 37, 41, .14);
  margin: -60px 26px 30px;
}
@media (min-width: 900px) {
  .jobsuche-karte { grid-template-columns: 1.4fr 1fr .6fr auto; }
}
.jobsuche-karte__feld { display: grid; gap: 5px; }
.jobsuche-karte label {
  font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-soft);
}
.jobsuche-karte input, .jobsuche-karte select {
  width: 100%; padding: 12px 14px; font-size: 15.5px;
  border: 1px solid var(--line); border-radius: var(--radius-m); background: #fff; color: var(--ink);
}
.jobsuche-karte input:focus, .jobsuche-karte select:focus {
  outline: 3px solid var(--brand-soft); outline-offset: 0; border-color: var(--brand);
}
.jobsuche-karte__knopf { white-space: nowrap; height: 48px; }
@media (max-width: 899px) {
  .jobsuche-karte { margin-inline: 14px; }
  .jobsuche-karte__knopf { width: 100%; }
}

/* Berufsfelder: kräftig statt blass */
.feldgitter {
  display: grid; gap: 14px; margin-top: 16px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.feldkachel {
  display: flex; flex-direction: column; align-items: flex-start; text-align: left;
  gap: 10px; padding: 18px 18px 16px; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.feldkachel:hover {
  border-color: var(--brand); text-decoration: none;
  transform: translateY(-2px); box-shadow: 0 10px 24px rgba(11, 37, 41, .10);
}
.feldkachel__zeichen {
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 12px; background: var(--brand); color: #fff;
}
.feldkachel__zeichen .icon { width: 22px; height: 22px; }
.feldkachel__name { color: var(--ink); font-weight: 600; font-size: 15px; line-height: 1.3; }
.feldkachel__zahl {
  display: inline-block; margin-top: auto; padding: 3px 9px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; background: var(--brand-soft); color: var(--brand);
}
.feldkachel.is-leer { opacity: 1; }
.feldkachel.is-leer .feldkachel__zeichen { background: var(--surface-2); color: var(--text-soft); }
.feldkachel.is-leer .feldkachel__zahl { background: var(--surface-2); color: var(--text-soft); font-weight: 500; }

/* Filterleiste über der Trefferliste */
.jobfilter {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 12px 0; margin: 8px 0 4px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.jobfilter__wort { font-size: 13.5px; font-weight: 600; color: var(--text-soft); margin-right: 4px; }
.jobfilter select {
  padding: 8px 32px 8px 12px; font-size: 14px; border: 1px solid var(--line);
  border-radius: 999px; background: var(--surface); color: var(--ink);
}
.jobfilter__haken {
  display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--ink);
  padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
}

.trefferzeile { margin: 14px 0 12px; color: var(--text-soft); font-size: 15px; }
.trefferzeile strong { color: var(--ink); font-size: 17px; }

/* Stellenkarten */
.stellenliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.stelle {
  display: grid; grid-template-columns: 52px 1fr auto; gap: 16px; align-items: start;
  padding: 18px 20px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-m);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.stelle:hover { border-color: var(--brand); box-shadow: 0 8px 22px rgba(11, 37, 41, .08); }
.stelle__logo {
  width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand); font-weight: 700; font-size: 20px;
}
.stelle__inhalt { min-width: 0; }
.stelle__titel {
  display: block; color: var(--ink); font-weight: 600; font-size: 17px; line-height: 1.3;
  text-decoration: none;
}
.stelle__titel:hover { color: var(--brand); }
.stelle__firma { margin: 4px 0 8px; color: var(--text-soft); font-size: 14.5px; }
.stelle__merkmale { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.stelle__merken { align-self: center; }
@media (max-width: 600px) {
  .stelle { grid-template-columns: 44px 1fr; }
  .stelle__logo { width: 44px; height: 44px; font-size: 17px; }
  .stelle__merken { grid-column: 2; justify-self: start; margin-top: 8px; }
}

/* Anfragen: Verlauf */
.verlauf { display: grid; gap: 10px; }
.verlauf__eintrag { padding: 12px 14px; border-radius: var(--radius-m); border: 1px solid var(--line); background: var(--surface); }
.verlauf__eintrag--buerger { border-left: 3px solid var(--brand); }
.verlauf__eintrag--mitarbeiter { background: var(--brand-soft); border-color: transparent; }
.verlauf__eintrag--system { background: var(--surface-2); font-size: 14px; color: var(--text-soft); }
.verlauf__kopf { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--text-soft); margin-bottom: 6px; }
.verlauf__text { white-space: pre-wrap; margin: 0; }
.sternwahl { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.sternwahl label { display: inline-flex; gap: 5px; align-items: center; font-weight: 600; }

/* =====================================================================
   Anfrage stellen
   ===================================================================== */

.anfrage-raster { display: grid; gap: 24px; align-items: start; }
@media (min-width: 980px) {
  .anfrage-raster { grid-template-columns: minmax(0, 1fr) 320px; }
}

.anfrage-formular {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m);
  padding: 8px 28px 26px;
}
.anfrage-schritt { padding: 22px 0; border-bottom: 1px solid var(--line); }
.anfrage-schritt:last-of-type { border-bottom: none; }
.anfrage-schritt h2 {
  display: flex; align-items: center; gap: 12px; margin: 0 0 16px; font-size: 19px;
}
.anfrage-schritt__nr {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--brand); color: #fff; font-size: 14px; font-weight: 700; flex: none;
}

/* Anliegen als Karten statt Auswahlliste: Man sieht alle Möglichkeiten
   auf einmal und liest, was gemeint ist, statt zu raten. */
.anliegenwahl { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.anliegenwahl__karte { position: relative; display: block; cursor: pointer; }
.anliegenwahl__karte input { position: absolute; opacity: 0; pointer-events: none; }
.anliegenwahl__inhalt {
  display: grid; gap: 4px; padding: 14px 16px; height: 100%;
  border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.anliegenwahl__inhalt strong { color: var(--ink); font-size: 15px; }
.anliegenwahl__inhalt span { color: var(--text-soft); font-size: 13.5px; line-height: 1.4; }
.anliegenwahl__karte:hover .anliegenwahl__inhalt { border-color: var(--brand); }
.anliegenwahl__karte input:checked + .anliegenwahl__inhalt {
  border-color: var(--brand); box-shadow: inset 0 0 0 2px var(--brand); background: var(--brand-soft);
}
.anliegenwahl__karte input:focus-visible + .anliegenwahl__inhalt { outline: 3px solid var(--brand-soft); }

.anfrage-abschluss { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 22px; }

.anfrage-seite { display: grid; gap: 14px; }
.anfrage-karte {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m);
  padding: 18px 20px;
}
.anfrage-karte h3 { margin: 0 0 10px; font-size: 15.5px; }
.anfrage-karte p { margin: 0; font-size: 14.5px; color: var(--text-soft); line-height: 1.5; }
.anfrage-karte--still { background: var(--surface-2); }
.anfrage-ablauf { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.anfrage-ablauf li { font-size: 14.5px; color: var(--text-soft); line-height: 1.45; }
.anfrage-ablauf strong { color: var(--ink); }

/* Meine Anfragen: Liste */
.anfragenliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.anfrage-karte-liste a {
  display: block; padding: 16px 20px; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m);
}
.anfrage-karte-liste a:hover { border-color: var(--brand); text-decoration: none; }
.anfrage-karte-liste.is-handlung a { border-left: 4px solid var(--warn); }
.anfrage-karte-liste__kopf { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; }
.anfrage-karte-liste__kopf strong { color: var(--ink); font-size: 16.5px; }
.anfrage-karte-liste__meta { display: block; margin-top: 6px; color: var(--text-soft); font-size: 13.5px; }
.anfrage-karte-liste__hinweis { display: block; margin-top: 8px; color: var(--ink); font-size: 14px; }

/* =====================================================================
   Assistent im Chatfenster
   ===================================================================== */

.chatknopf {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 18px; border: none; border-radius: 999px; cursor: pointer;
  background: var(--brand); color: #fff; font: inherit; font-weight: 600; font-size: 15px;
  box-shadow: 0 10px 28px rgba(11, 37, 41, .28);
}
.chatknopf:hover { background: var(--brand-dark, #0b4f57); }
.chatknopf:focus-visible { outline: 3px solid var(--brand-soft); outline-offset: 3px; }
.chatknopf__zeichen { display: grid; place-items: center; }
.chatknopf__zeichen .icon { width: 20px; height: 20px; }

.chatfenster {
  position: fixed; right: 20px; bottom: 20px; z-index: 61;
  width: min(390px, calc(100vw - 32px)); max-height: min(620px, calc(100vh - 40px));
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 22px 54px rgba(11, 37, 41, .30); overflow: hidden;
}
.chatfenster[hidden] { display: none; }
.chatfenster__kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 16px; background: var(--brand); color: #fff;
}
.chatfenster__kopf strong { display: block; font-size: 15.5px; }
.chatfenster__kopf span { display: block; font-size: 13px; color: rgba(255,255,255,.8); }
.chatfenster__zu {
  background: none; border: none; color: #fff; font-size: 26px; line-height: 1;
  cursor: pointer; padding: 0 4px;
}

.chatfenster__verlauf {
  flex: 1; overflow-y: auto; padding: 14px; display: grid; gap: 10px;
  background: var(--bg);
}
.chatnachricht {
  padding: 11px 14px; border-radius: 14px; max-width: 92%;
  font-size: 14.5px; line-height: 1.5;
}
.chatnachricht p { margin: 0 0 7px; }
.chatnachricht p:last-child { margin-bottom: 0; }
.chatnachricht--assistent { background: var(--surface); border: 1px solid var(--line); justify-self: start; }
.chatnachricht--nutzer { background: var(--brand); color: #fff; justify-self: end; }
.chatnachricht.is-wartet { color: var(--text-soft); font-style: italic; }
.chatnachricht.is-grenze { background: #fff4e5; border-color: #f0d9a0; }
.chatnachricht__hinweis { font-size: 12.5px; color: var(--text-soft); }
.chatnachricht__quellen { display: grid; gap: 5px; margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--line); }
.chatnachricht__quellen a { font-size: 13.5px; font-weight: 600; color: var(--brand); text-decoration: none; }
.chatnachricht__quellen a:hover { text-decoration: underline; }

/*
   Fundstellen aus dem Netz sehen anders aus als Portalverweise, und
   zwar deutlich: gestrichelter Rahmen, gedämpfte Farbe, Überschrift
   darüber. Der Unterschied zwischen einer geprüften Angabe und
   irgendeiner Seite im Internet ist der ganze Punkt, und er darf nicht
   erst beim Lesen des Kleingedruckten auffallen.

   Der Hostname steht sichtbar daneben, weil "Antrag stellen" als
   Linktext nichts darüber sagt, wo man landet.
*/
.chatnachricht__netz {
  margin-top: 9px; padding: 9px 11px;
  border: 1px dashed var(--rule-strong, #c6ced1); border-radius: 10px;
  background: var(--surface-2);
}
.chatnachricht__netztitel {
  margin: 0 0 6px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--text-soft);
}
.chatnachricht__netzzeile { margin: 0 0 6px; display: grid; gap: 1px; }
.chatnachricht__netzzeile:last-child { margin-bottom: 0; }
.chatnachricht__netzzeile a {
  font-size: 13.5px; font-weight: 600; color: var(--text); text-decoration: underline;
  overflow-wrap: anywhere;
}
.chatnachricht__netzhost { font-size: 12px; color: var(--text-soft); }

/* =====================================================================
   Lena, das Gesicht des Assistenten
   ===================================================================== */

/*
   Die Farben kommen aus den Gestaltungsvariablen und nicht aus festen
   Werten im SVG: Sonst leuchtet das Gesicht beim Umschalten auf dunkel
   weiß umrandet aus der Leiste heraus.
*/
.lena { display: block; flex: none; }
.lena__grund { fill: var(--brand-soft, #e4eff0); }
.lena__haut { fill: #f4d9c6; }
.lena__haar { fill: #4a3728; }
.lena__schulter { fill: var(--brand, #0f5c66); }
.lena__auge { fill: #2f2a26; }
.lena__glanz { fill: #ffffff; }
.lena__strich { stroke: #5d4a38; }
.lena__rand { stroke: rgba(0, 0, 0, .12); stroke-width: 1.5; }

/* Auf dem Knopf steht sie vor dunklem Grund, da braucht sie einen hellen Rand. */
.lena--knopf .lena__rand { stroke: rgba(255, 255, 255, .55); }
.lena--kopf .lena__rand { stroke: rgba(255, 255, 255, .45); }

@media (prefers-color-scheme: dark) {
  .lena__grund { fill: #14343a; }
  .lena__rand { stroke: rgba(255, 255, 255, .18); }
}

.chatfenster__bild { display: grid; place-items: center; flex: none; }
/* Name, Rolle und Schließen: Das Gesicht links, der Text nimmt den Rest. */
.chatfenster__kopf > div { flex: 1; min-width: 0; }

.chatfenster__eingabe { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); }
.chatfenster__eingabe textarea {
  flex: 1; resize: none; padding: 10px 12px; font: inherit; font-size: 14.5px;
  border: 1px solid var(--line); border-radius: 10px; max-height: 120px;
}
.chatfenster__fuss {
  margin: 0; padding: 0 12px 12px; font-size: 12px; color: var(--text-soft);
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (max-width: 560px) {
  .chatknopf__text { display: none; }
  .chatknopf { padding: 14px; }
  .chatfenster { right: 12px; left: 12px; bottom: 12px; width: auto; }
}

/* =====================================================================
   Cloudspeicher
   ===================================================================== */

.speicher { padding-bottom: 60px; }
.speicher__kopf {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 18px;
  flex-wrap: wrap; padding: 26px 0 18px;
}
.speicher__kopf h1 { margin: 0 0 4px; }
.speicher__kopf p { margin: 0; }
.speicher__kopfaktionen { display: flex; gap: 10px; flex-wrap: wrap; }
.speicher__kopfaktionen .btn { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.speicher__kopfaktionen .icon { width: 18px; height: 18px; }

.speicher__raster { display: grid; gap: 20px; align-items: start; }
@media (min-width: 900px) { .speicher__raster { grid-template-columns: 260px minmax(0, 1fr); } }

.speicher__seite { display: grid; gap: 14px; position: sticky; top: 16px; }
@media (max-width: 899px) { .speicher__seite { position: static; } }

.ordnerliste {
  display: grid; gap: 2px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-m); padding: 8px;
}
.ordnerliste__eintrag {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border-radius: 8px; text-decoration: none; color: var(--ink); font-size: 15px;
}
.ordnerliste__eintrag:hover { background: var(--surface-2); text-decoration: none; }
.ordnerliste__eintrag.is-hier { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.ordnerliste__zeichen { display: grid; place-items: center; color: var(--text-soft); }
.ordnerliste__eintrag.is-hier .ordnerliste__zeichen { color: var(--brand); }
.ordnerliste__zeichen .icon { width: 18px; height: 18px; }
.ordnerliste__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.speicherstand {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m);
  padding: 14px 16px;
}
.speicherstand__balken {
  height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; margin-bottom: 10px;
}
.speicherstand__balken span { display: block; height: 100%; background: var(--brand); border-radius: 99px; }
.speicherstand__balken span.is-knapp { background: var(--warn, #b7791f); }
.speicherstand__balken span.is-voll { background: var(--alert, #c53030); }
.speicherstand__text { margin: 0 0 6px; font-size: 14px; color: var(--text-soft); }
.speicherstand__text strong { color: var(--ink); }

.ordnerneu { display: flex; gap: 6px; }
.ordnerneu input { flex: 1; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; }
.ordnerneu .btn { padding: 9px 14px; flex: none; }
.ordnerneu .icon { width: 16px; height: 16px; }
.ordnerpflege summary { cursor: pointer; font-size: 14px; color: var(--text-soft); padding: 6px 0; }
.ordnerpflege__zeile { display: flex; gap: 6px; margin: 8px 0; flex-wrap: wrap; }
.ordnerpflege__zeile input { flex: 1; min-width: 120px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; }

/* Ablagefläche */
.ablage {
  border: 2px dashed var(--line); border-radius: var(--radius-m); background: var(--surface);
  padding: 18px; margin-bottom: 18px; transition: border-color .12s ease, background .12s ease;
}
.ablage.is-dragover { border-color: var(--brand); background: var(--brand-soft); }
.ablage input[type="file"] {
  position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden;
}
.ablage__inhalt { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 14px 0; text-align: center; }
.ablage__zeichen {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: var(--brand-soft); color: var(--brand); flex: none;
}
.ablage__zeichen .icon { width: 20px; height: 20px; }
.ablage__text { color: var(--text-soft); font-size: 14.5px; }
.ablage__text strong { display: block; color: var(--ink); font-size: 16px; }
.ablage__zeile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--line); }
.ablage__zeile select { padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }

/* Dateiliste */
.dateikopf { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.dateikopf h2 { margin: 0; font-size: 19px; display: flex; align-items: center; gap: 10px; }
.dateikopf__zahl {
  font-size: 13px; font-weight: 600; padding: 2px 9px; border-radius: 99px;
  background: var(--surface-2); color: var(--text-soft);
}
.dateisuche { position: relative; }
.dateisuche__zeichen { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-soft); }
.dateisuche__zeichen .icon { width: 16px; height: 16px; }
.dateisuche input { padding: 9px 14px 9px 36px; border: 1px solid var(--line); border-radius: 99px; min-width: 240px; background: var(--surface); }

.dateiliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dateizeile {
  display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 12px 16px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-m);
}
.dateizeile:hover { border-color: var(--brand); }
.dateizeile__zeichen {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px;
  background: var(--surface-2); color: var(--text-soft);
}
.dateizeile__zeichen .icon { width: 20px; height: 20px; }
.dateizeile__zeichen.is-image { background: #eaf4ff; color: #2b6cb0; }
.dateizeile__zeichen.is-doc { background: #fdeaea; color: #c53030; }
.dateizeile__zeichen.is-chart { background: #e9f6ee; color: #2f855a; }
.dateizeile__zeichen.is-archive { background: #fdf3e2; color: #b7791f; }
.dateizeile__inhalt { min-width: 0; }
.dateizeile__name {
  display: block; color: var(--ink); font-weight: 600; font-size: 15.5px; text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dateizeile__name:hover { color: var(--brand); }
.dateizeile__meta { display: block; color: var(--text-soft); font-size: 13px; margin-top: 2px; }
.dateizeile__aktionen { display: flex; align-items: center; gap: 6px; }

.knopfsymbol {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--surface); color: var(--text-soft);
  cursor: pointer; list-style: none;
}
.knopfsymbol::-webkit-details-marker { display: none; }
.knopfsymbol:hover { border-color: var(--brand); color: var(--brand); }
.knopfsymbol .icon { width: 17px; height: 17px; }

.dateimenue { position: relative; }
.dateimenue__inhalt {
  position: absolute; right: 0; top: 42px; z-index: 20; width: min(360px, calc(100vw - 40px));
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m);
  box-shadow: 0 16px 40px rgba(11, 37, 41, .18); padding: 14px; display: grid; gap: 14px;
}
.dateimenue__inhalt label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; }
.dateimenue__zeile { display: flex; gap: 6px; flex-wrap: wrap; }
.dateimenue__zeile input, .dateimenue__zeile select {
  flex: 1; min-width: 90px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px;
}
.dateimenue__inhalt .field-hint { margin: 6px 0 0; }

.leer {
  display: grid; place-items: center; gap: 12px; padding: 48px 20px; text-align: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m);
}
.leer__zeichen {
  display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%;
  background: var(--surface-2); color: var(--text-soft);
}
.leer__zeichen .icon { width: 24px; height: 24px; }
.leer p { margin: 0; color: var(--text-soft); }

.freigabenblock { margin-top: 26px; }
.freigabenblock h2 { display: flex; align-items: center; gap: 8px; font-size: 18px; margin: 0 0 4px; }
.freigabenblock h2 .icon { width: 18px; height: 18px; color: var(--text-soft); }
.freigabenliste { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.freigabenliste li {
  display: grid; gap: 10px; align-items: center; padding: 12px 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m);
}
@media (min-width: 760px) { .freigabenliste li { grid-template-columns: minmax(0, 1fr) auto auto; } }
.freigabenliste li.is-abgelaufen { opacity: .6; }
.freigabe__inhalt { min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.freigabe__link { font-size: 12.5px; color: var(--text-soft); overflow-wrap: anywhere; }
.freigabe__zahlen { display: grid; font-size: 13px; color: var(--text-soft); }

@media (max-width: 600px) {
  .dateizeile { grid-template-columns: 42px minmax(0, 1fr); }
  .dateizeile__aktionen { grid-column: 2; justify-self: start; }
  .dateisuche input { min-width: 0; width: 100%; }
}

/* Verfahren mit Code */
.zweiwege { display: grid; gap: 14px; margin: 16px 0 20px; }
@media (min-width: 780px) { .zweiwege { grid-template-columns: 1fr 1fr; } }
.zweiweg {
  border: 1px solid var(--line); border-radius: var(--radius-m); padding: 16px 18px;
  background: var(--surface); display: grid; gap: 8px; align-content: start;
}
.zweiweg.is-an { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.zweiweg__kopf { display: flex; align-items: center; gap: 10px; }
.zweiweg__kopf strong { font-size: 16px; }
.zweiweg p { margin: 0; }
.zweiweg form { margin-top: 4px; }

/* Kontoauszug: nüchtern, Zahlen führen */
.auszug {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-m); padding: 22px 24px; margin: 18px 0;
}
.auszug__kopf { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; }
.auszug__marke {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-soft);
}
.auszug__summe {
  display: block; font-size: 38px; font-weight: 700; line-height: 1.1; margin: 4px 0 2px;
  font-variant-numeric: tabular-nums;
}
.auszug__stand { display: block; font-size: 13px; color: var(--text-soft); }
.auszug__teile { display: grid; gap: 10px; margin: 0; align-content: center; min-width: 220px; }
.auszug__teile > div { display: flex; justify-content: space-between; gap: 18px; }
.auszug__teile dt { color: var(--text-soft); font-size: 14px; margin: 0; }
.auszug__teile dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.auszug__teile dd.ist-faellig { color: var(--warn, #b7791f); }

.auszugtabelle { width: 100%; border-collapse: collapse; }
.auszugtabelle th {
  text-align: left; font-size: 12px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-soft);
  padding: 0 12px 10px 0; border-bottom: 1px solid var(--line);
}
.auszugtabelle th.num, .auszugtabelle td.num { text-align: right; padding-right: 0; }
.auszugtabelle td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--line-soft, #eceff0); vertical-align: top; }
.auszugtabelle tr:last-child td { border-bottom: none; }
.auszugtabelle__datum { white-space: nowrap; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.auszugtabelle__zweck { display: block; }
.auszugtabelle__zusatz { display: block; font-size: 13px; color: var(--text-soft); }
.auszugtabelle__beleg { font-size: 13px; }
.auszugtabelle__betrag { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.auszugtabelle__betrag.ist-haben { color: #1f7a4d; }
.auszugtabelle tr.ist-storniert .auszugtabelle__zweck,
.auszugtabelle tr.ist-storniert .auszugtabelle__betrag {
  text-decoration: line-through; opacity: .6;
}

/* Mehrere Felder nebeneinander, auf schmalen Bildschirmen untereinander */
.feldreihe { display: flex; gap: 14px; flex-wrap: wrap; }
.feldreihe > .field { flex: 1 1 200px; min-width: 0; }

/* Weg eines Briefs: geschrieben, abgeschickt, beantwortet, erledigt */
.briefweg { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.briefweg li {
  position: relative; padding-left: 28px; color: var(--text-soft);
}
.briefweg li::before {
  content: ""; position: absolute; left: 0; top: 4px; width: 14px; height: 14px;
  border-radius: 50%; border: 2px solid var(--line); background: #fff;
}
.briefweg li.is-erledigt { color: var(--text); }
.briefweg li.is-erledigt::before { background: var(--brand); border-color: var(--brand); }
.knopfreihe { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* Wegweiser zwischen Briefarchiv und Briefgenerator */
.briefwechsel {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  flex-wrap: wrap; margin: 0 0 22px;
  padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--radius-m);
  background: var(--surface);
}
.briefwechsel strong { display: block; margin-bottom: 2px; }
.briefwechsel span { display: block; font-size: 14px; }

/* ---------------------------------------------- Nachrichten, Übersicht */
.nk-kopf {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; margin-bottom: 18px;
}
.nk-kopf h1 { margin: 0 0 2px; }
.nk-kopf p { margin: 0; }
.nk-einstellung { position: relative; }
.nk-einstellung > summary { cursor: pointer; list-style: none; }
.nk-einstellung > summary::-webkit-details-marker { display: none; }
.nk-einstellung__inhalt {
  margin-top: 12px; padding: 18px 20px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m);
  width: min(520px, calc(100vw - 48px));
}
.nk-einstellung__inhalt h2 { margin: 0 0 10px; font-size: 17px; }
.nk-sperrliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.nk-sperrliste li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 0; border-top: 1px solid var(--line);
}
.nk-sperrliste .muted { display: block; font-size: 13px; }

.nk-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.nk-zeile {
  display: flex; align-items: center; gap: 14px; padding: 12px 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m);
  text-decoration: none; color: inherit; transition: border-color .15s, transform .15s;
}
.nk-zeile:hover { border-color: var(--brand); transform: translateY(-1px); }
.nk-zeile.ist-neu { border-left: 3px solid var(--brand); }
.nk-zeile__mitte { flex: 1; min-width: 0; }
.nk-zeile__oben { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.nk-zeile__zeit { font-size: 13px; color: var(--text-soft); white-space: nowrap; }
.nk-zeile__vorschau {
  display: block; color: var(--text-soft); font-size: 14px; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nk-zeile.ist-neu .nk-zeile__vorschau { color: var(--text); font-weight: 500; }
.nk-zeile__zahl {
  flex: none; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px;
  background: var(--brand); color: #fff; font-size: 12.5px; font-weight: 700;
  display: grid; place-items: center;
}
.nk-leer {
  display: grid; justify-items: center; gap: 6px; text-align: center;
  padding: 46px 24px; background: var(--surface);
  border: 1px dashed var(--line); border-radius: var(--radius-m);
}
.nk-leer__zeichen {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: var(--brand-soft); color: var(--brand); margin-bottom: 4px;
}
.nk-leer__zeichen .icon { width: 24px; height: 24px; }

/* ---------------------------------------------- Nachrichten, Verlauf */
.pn-tag { display: flex; align-items: center; gap: 12px; margin: 18px 0 10px; }
.pn-tag::before, .pn-tag::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.pn-tag span { font-size: 12.5px; color: var(--text-soft); white-space: nowrap; }
.pn { display: flex; margin: 0 0 8px; }
.pn--eigen { justify-content: flex-end; }
.pn__blase {
  position: relative; max-width: min(620px, 82%);
  padding: 10px 14px 20px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--line);
}
.pn--eigen .pn__blase {
  background: var(--brand-soft); border-color: transparent; border-bottom-right-radius: 4px;
}
.pn:not(.pn--eigen) .pn__blase { border-bottom-left-radius: 4px; }
.pn__text { margin: 0; font-size: 15.5px; line-height: 1.6; }
.pn__text > :first-child { margin-top: 0; }
.pn__text > :last-child { margin-bottom: 0; }
.pn__zeit {
  position: absolute; right: 12px; bottom: 6px;
  font-size: 11.5px; color: var(--text-soft); font-variant-numeric: tabular-nums;
}
.pn--neu { animation: pnNeu .4s ease-out; }
@keyframes pnNeu { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; } }

/* ------------------------------------------------ Assistent im Kopf
 *
 * Steht dort, wo vorher das Beispiel-Merkblatt stand. Das Merkblatt hat
 * gezeigt was man bekommt, aber nichts angeboten, was man tun kann; der
 * Assistent war nur über einen kleinen Knopf unten rechts zu finden, den
 * kaum jemand sieht.
 */
.kiblock {
  background: #fff; color: var(--text);
  border-radius: 14px; padding: 26px 28px 22px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .28);
}
.kiblock__marke {
  margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--brand);
}
.kiblock__titel { margin: 0 0 10px; font-size: 26px; letter-spacing: -.02em; line-height: 1.15; }
.kiblock__text { margin: 0 0 18px; font-size: 15.5px; line-height: 1.6; color: var(--text-soft); }

.kiblock__form { display: flex; gap: 8px; margin-bottom: 12px; }
.kiblock__form input {
  flex: 1; min-width: 0; padding: 13px 15px; font: inherit; font-size: 15.5px;
  border: 1px solid var(--line); border-radius: 9px; background: #fff;
}
.kiblock__form input:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft);
}
.kiblock__knopf {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 13px 22px; border: none; border-radius: 9px; cursor: pointer;
  background: var(--brand); color: #fff; font: inherit; font-weight: 600; font-size: 15.5px;
  text-decoration: none; white-space: nowrap;
}
.kiblock__knopf:hover { background: var(--brand-dark, #0b4f57); text-decoration: none; color: #fff; }

/* Beispielfragen: Wer nicht weiß, wie man fragt, klickt eine an. */
.kiblock__beispiele { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; }
.kiblock__beispiele button {
  padding: 7px 13px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface-2, #eef1f1); color: var(--text-soft);
  font: inherit; font-size: 13.5px; cursor: pointer;
}
.kiblock__beispiele button:hover { border-color: var(--brand); color: var(--brand); }

.kiblock__beispiel-frage {
  margin: 0 0 18px; padding: 12px 16px; border-left: 3px solid var(--brand);
  background: var(--surface-2, #eef1f1); font-size: 15.5px; font-style: italic;
}
.kiblock__knoepfe { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.kiblock__zweit { color: var(--brand); font-weight: 600; }
.kiblock__fuss {
  margin: 0; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--text-soft);
}

/* Der kleine Knopf unten rechts bleibt, wird aber deutlicher. */
.chatknopf { padding: 14px 22px; font-size: 16px; }

/* Fläche zum Unterschreiben */
.unterschrift { margin-top: 12px; }
.unterschrift canvas {
  width: 100%; max-width: 520px; height: auto; aspect-ratio: 3 / 1;
  background: #fff; border: 1px dashed var(--line); border-radius: 10px;
  touch-action: none; cursor: crosshair; display: block;
}
.unterschrift__leiste { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }

/* Ansprechpartner einer Behörde */
.kontaktliste { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }
.kontakt {
  padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: #fff;
}
.kontakt__kopf { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.kontakt__zustaendig { margin: 6px 0 0; font-size: 14.5px; }
.kontakt__wege { display: flex; gap: 16px; flex-wrap: wrap; margin: 10px 0 0; }
.kontakt__wege a { font-weight: 600; }
.kontakt__zitat {
  margin: 8px 0; padding: 10px 12px; background: var(--surface-2, #eef1f1);
  border-radius: 8px; font-size: 14px;
}

/* Verweis aufs Webmail */
.webmail-hinweis {
  display: flex; gap: 16px; align-items: center; justify-content: space-between;
  flex-wrap: wrap; margin-bottom: 20px;
  padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface-2, #eef1f1);
}
.webmail-hinweis .muted { display: block; margin-top: 4px; max-width: 620px; }

/* Brief über die Nummer finden */
.brf__suche {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 16px 18px; margin-bottom: 18px;
}
.brf__suche label { display: block; font-weight: 600; margin-bottom: 8px; }
.brf__sucheZeile { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.brf__praefix {
  font-family: ui-monospace, monospace; font-weight: 600; color: #4a5c66;
  background: #eef3f3; padding: 9px 10px; border-radius: 8px;
}
.brf__sucheZeile input { width: 120px; font-family: ui-monospace, monospace; }
.brf__suche .muted { margin: 10px 0 0; font-size: 13.5px; }

/* Gesperrte Knöpfe müssen gesperrt aussehen.
 * Ohne diese Regel sah ein Knopf mit disabled aus wie jeder andere, und
 * wer draufklickte, bei dem passierte scheinbar nichts. */
.btn:disabled,
.btn[disabled] {
  opacity: .45;
  cursor: not-allowed;
  filter: grayscale(.4);
}
.btn:disabled:hover,
.btn[disabled]:hover { filter: grayscale(.4); transform: none; }

/* --- Legende und Anwesenheit unter dem Forum ------------------ */
.forumfuss {
  display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  margin: 28px 0 12px; padding: 18px 20px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px;
}
.forumfuss h3 {
  margin: 0 0 8px; font-size: 14px; letter-spacing: .02em;
}
.forumfuss__zahl { margin: 0 0 6px; font-size: 14px; }
.forumfuss__namen { margin: 6px 0; font-size: 13.5px; line-height: 1.8; }
.forumfuss__name { font-weight: 600; }
.forumfuss__gruppe {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 8px;
}
.forumfuss__titel {
  font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); min-width: 84px;
}
.forumfuss__rang { font-weight: 600; font-size: 13.5px; cursor: help; }
.forumfuss__leise { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); }

/* ---------------------------------------------- Anmelden mit der App

   Der wartende Bildschirm. Der QR-Code steht gross und mittig, darunter
   ein Satz, der sagt, worauf gewartet wird. Die drei Punkte bewegen sich,
   damit man sieht, dass die Seite lebt und nicht haengt; wer Bewegung
   abgeschaltet hat, sieht sie ruhig stehen.
*/
.ausweis-warten {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 24px 18px; margin: 4px 0 18px;
  background: var(--surface, #fff); border: 1px solid var(--line, #e2e6e8);
  border-radius: 14px; text-align: center;
}
.ausweis-warten__code {
  width: 240px; max-width: 72vw; aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  padding: 12px; background: #fff; border-radius: 10px;
  transition: opacity .2s ease, filter .2s ease;
}
.ausweis-warten__code svg { width: 100%; height: 100%; display: block; }
/* Abgelaufen: sichtbar ungueltig, nicht nur ein Satz daneben. */
.ausweis-warten__code.ist-alt { opacity: .25; filter: grayscale(1); }
/* Knoepfe sind inline-flex; ohne das hier bliebe ein [hidden] sichtbar. */
.ausweis-warten [hidden] { display: none !important; }
.ausweis-warten__lage { margin: 0; font-weight: 600; }
.ausweis-warten__lage--ok { color: var(--ok, #23694a); }
.ausweis-warten__lage--aus { color: var(--muted, #626d71); }

.ausweis-punkte { display: inline-flex; gap: 3px; margin-left: 2px; vertical-align: middle; }
.ausweis-punkte span {
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; opacity: .3;
  animation: ausweisPunkt 1.2s infinite ease-in-out;
}
.ausweis-punkte span:nth-child(2) { animation-delay: .2s; }
.ausweis-punkte span:nth-child(3) { animation-delay: .4s; }
@keyframes ausweisPunkt {
  0%, 60%, 100% { opacity: .25; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

.ausweis-schritte { margin: 0 0 8px; padding-left: 20px; line-height: 1.7; }
.ausweis-schritte li { margin-bottom: 2px; }

.ausweis-liste { list-style: none; margin: 0; padding: 0; }
.ausweis-liste__zeile {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 0; border-bottom: 1px solid var(--line, #e2e6e8);
}
.ausweis-liste__zeile:last-child { border-bottom: 0; }
.ausweis-liste__zeile strong { display: block; }
.ausweis-liste__zeile .mono { display: block; font-size: 13px; }
.ausweis-liste__zeile .muted { display: block; font-size: 13px; }

@media (prefers-reduced-motion: reduce) {
  .ausweis-punkte span { animation: none; opacity: .5; }
}

/* ------------------------------------------ Postfach im Finanzplaner

   Zwei Listen: gefundene Belege, die auf eine Entscheidung warten, und
   die verbundenen Postfaecher. Beide haben links den Inhalt und rechts
   die Schaltflaechen; auf dem Telefon rutschen die Schaltflaechen unter
   den Text, statt sich zu quetschen.
*/
.fundliste, .postfachliste { list-style: none; margin: 0; padding: 0; }

.fundliste__zeile, .postfachliste__zeile {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line, #e2e6e8);
}
.fundliste__zeile:last-child, .postfachliste__zeile:last-child { border-bottom: 0; }

/* Eine Mahnung hat die kuerzere Frist. Das soll man sehen, ohne zu lesen. */
.fundliste__zeile--mahnung { border-left: 3px solid var(--alert, #a32f2f); padding-left: 12px; }

.fundliste__was, .postfachliste__zeile > div:first-child { min-width: 0; }
.fundliste__was strong, .postfachliste__zeile strong { display: block; margin-bottom: 2px; }
.fundliste__was .muted, .postfachliste__zeile .muted {
  display: block; font-size: 13px; line-height: 1.5;
}

.fundliste__tun, .postfachliste__tun {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; flex-shrink: 0;
}
.fundliste__tun form, .postfachliste__tun form { margin: 0; }
.postfachliste__schalter { margin-top: 8px; }

.marke {
  display: inline-block; padding: 1px 7px; border-radius: 999px;
  font-size: 12px; font-weight: 600; vertical-align: 2px;
  background: var(--surface-2, #f1f4f5); color: var(--text-mute, #626d71);
}
.marke--mahnung { background: var(--alert-soft, #fbeaea); color: var(--alert, #a32f2f); }
.marke--rechnung { background: var(--brand-soft, #e4eff0); color: var(--brand, #0f5c66); }

@media (max-width: 640px) {
  .fundliste__zeile, .postfachliste__zeile { flex-direction: column; gap: 10px; }
  .fundliste__tun, .postfachliste__tun { width: 100%; }
}