/*
 * Kontaktimperium — Gestaltung
 *
 * Eigene Farbwelt, ausdrücklich NICHT die der Pflegeseiten
 * (Köln: Rot, Polen: Petrol, Familienperle: Grün).
 * Gewählt: tiefes Indigo mit warmem Bernstein als Akzent — sachlich genug
 * für eine Arbeitsanwendung, freundlicher als reines Grau.
 *
 * Handgeschrieben, kein Baukasten, kein Build-Schritt. Reihenfolge:
 * Variablen, Grundlagen, Bausteine, Hilfsklassen.
 */

/* --- Variablen ---------------------------------------------------------- */
:root {
  --ki-indigo-900: #1a1d3d;
  --ki-indigo-700: #2e3468;
  --ki-indigo-500: #4a52a3;
  --ki-indigo-100: #e8eaf6;
  --ki-indigo-50:  #f4f5fb;

  --ki-bernstein:      #c8860d;
  --ki-bernstein-hell: #fdf4e3;

  --ki-text:       #1c1c22;
  --ki-text-leise: #5a5a68;
  --ki-linie:      #dcdce6;
  --ki-flaeche:    #ffffff;
  --ki-flaeche-2:  #f7f7fb;

  --ki-erfolg:  #1f7a4d;
  --ki-warnung: #9a6700;
  --ki-fehler:  #b3261e;

  /* Akzent des jeweiligen Portals. Hier das Indigo von Kontaktimperium;
     .portal-familienperle überschreibt beide Werte mit seinem Grün. Bis
     jetzt gab es sie nur dort — jede Regel mit var(--ki-akzent) fiel auf
     den Hauptseiten still aus. */
  --ki-akzent:        #2e3468;
  --ki-akzent-dunkel: #1a1d3d;

  /* Farben des öffentlichen Mantels (Startseite, Kopfbereich). */
  --ki-mantel-schleier: #e8eaf6;
  --ki-mantel-grund:    #f4f5fb;
  --ki-mantel-linie:    #d7dae9;

  --ki-radius:   10px;
  --ki-radius-s: 6px;

  --ki-schatten:   0 1px 2px rgba(26, 29, 61, .06), 0 2px 8px rgba(26, 29, 61, .04);
  --ki-schatten-h: 0 2px 4px rgba(26, 29, 61, .08), 0 8px 24px rgba(26, 29, 61, .08);

  --ki-breite: 1100px;
  --ki-luft:   1.5rem;

  --ki-schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

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

body {
  margin: 0;
  font-family: var(--ki-schrift);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ki-text);
  background: var(--ki-flaeche);
  /* Polnische Diakritika brauchen etwas mehr Luft nach oben */
  text-rendering: optimizeLegibility;
}

body.portal-familienperle {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.portal-familienperle .inhalt { flex: 1 0 auto; }
.portal-familienperle .fuss { margin-top: auto; }

h1, h2, h3 {
  line-height: 1.25;
  margin: 0 0 .5em;
  color: var(--ki-indigo-900);
  font-weight: 650;
  letter-spacing: -.01em;
}

h1 { font-size: clamp(1.8rem, 1.2rem + 2.4vw, 2.6rem); }
h2 { font-size: clamp(1.3rem, 1.1rem + .9vw, 1.6rem); }
h3 { font-size: 1.1rem; }

p { margin: 0 0 1rem; }

a {
  color: var(--ki-indigo-700);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover { color: var(--ki-indigo-500); }

/* Tastaturbedienung muss immer sichtbar sein */
:focus-visible {
  outline: 3px solid var(--ki-bernstein);
  outline-offset: 2px;
  border-radius: 2px;
}

hr.trenner {
  border: 0;
  border-top: 1px solid var(--ki-linie);
  margin: 2rem 0;
}

/* --- Aufbau ------------------------------------------------------------- */
.behaelter {
  width: 100%;
  max-width: var(--ki-breite);
  margin-inline: auto;
  padding-inline: var(--ki-luft);
}

.inhalt { min-height: 60vh; }

.abschnitt { padding-block: clamp(2rem, 1rem + 3vw, 3.5rem); }
.abschnitt__titel { margin-bottom: 1rem; }
.mitteig { text-align: center; }

/* --- Kopf --------------------------------------------------------------- */
.kopf {
  border-bottom: 1px solid var(--ki-linie);
  background: var(--ki-flaeche);
  position: sticky;
  top: 0;
  z-index: 10;
}

.kopf__innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 62px;
}

.marke {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  color: var(--ki-indigo-900);
  font-weight: 680;
}

.marke__zeichen {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--ki-indigo-700);
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.marke__text { font-size: 1.05rem; }

/* Die Navigation darf umbrechen statt über den Rand zu laufen. Das
   Hauptsystem hat mehr Einträge als das Empfehlungsportal; ohne Umbruch schob
   sich der Kopf bei üblichen Fensterbreiten über die Seite hinaus. */
.kopf__nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5rem .75rem; min-width: 0; }
.kopf__innen { flex-wrap: wrap; }
.kopf__nav .portal-kontomenue__inhalt { max-width: min(20rem, calc(100vw - 2rem)); }

.sprachwahl {
  display: inline-grid;
  place-items: center;
  min-width: 42px;
  padding: .3rem .6rem;
  border: 1px solid var(--ki-linie);
  border-radius: var(--ki-radius-s);
  font-size: .82rem;
  font-weight: 640;
  letter-spacing: .03em;
  text-decoration: none;
  color: var(--ki-indigo-700);
  background: var(--ki-flaeche);
}
.sprachwahl:hover {
  background: var(--ki-indigo-50);
  border-color: var(--ki-indigo-500);
}

/* --- Held --------------------------------------------------------------- */
.held {
  background:
    radial-gradient(1000px 380px at 15% -30%, var(--ki-indigo-100), transparent 65%),
    var(--ki-indigo-50);
  border-bottom: 1px solid var(--ki-linie);
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
}

.held__oberzeile {
  margin: 0 0 .6rem;
  font-size: .82rem;
  font-weight: 660;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ki-bernstein);
}

.held__titel { max-width: 22ch; }

.held__text {
  max-width: 62ch;
  font-size: 1.1rem;
  color: var(--ki-text-leise);
  margin-bottom: 0;
}

/* --- Karten ------------------------------------------------------------- */
.karten {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.karte {
  padding: 1.4rem;
  border: 1px solid var(--ki-linie);
  border-radius: var(--ki-radius);
  background: var(--ki-flaeche);
  box-shadow: var(--ki-schatten);
}

.karte__titel {
  font-size: 1.05rem;
  margin-bottom: .4rem;
}

.karte__text {
  margin: 0;
  color: var(--ki-text-leise);
  font-size: .95rem;
}

/* --- Rollen ------------------------------------------------------------- */
.rollen {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}

.rolle {
  padding: 1.1rem 1.2rem;
  border-left: 3px solid var(--ki-indigo-500);
  background: var(--ki-flaeche-2);
  border-radius: 0 var(--ki-radius-s) var(--ki-radius-s) 0;
}

.rolle__titel { font-size: 1rem; margin-bottom: .3rem; }

.rolle__text {
  margin: 0;
  font-size: .92rem;
  color: var(--ki-text-leise);
}

/* --- Hinweiskasten ------------------------------------------------------ */
.hinweis {
  padding: 1.3rem 1.4rem;
  border: 1px solid #f0dcb4;
  border-left: 3px solid var(--ki-bernstein);
  border-radius: var(--ki-radius-s);
  background: var(--ki-bernstein-hell);
}

.hinweis__titel { font-size: 1.05rem; margin-bottom: .35rem; }
.hinweis__text  { margin: 0; color: #6b5316; font-size: .95rem; }

/* --- Knopf -------------------------------------------------------------- */
/* Ein Kaestchen fuer alle Schaltflaechen. Ausprägungen unterscheiden sich
   nur in Farbe und Rahmen, nie in Groesse — sonst koennen zwei nebeneinander
   gar nicht gleich aussehen. Siehe docs/schaltflaechen.md. */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: .55rem 1.3rem;
  border: 1px solid transparent;
  border-radius: var(--ki-radius-s);
  background: var(--ki-indigo-700);
  color: #fff;
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.knopf:hover {
  background: var(--ki-indigo-500);
  color: #fff;
  box-shadow: var(--ki-schatten-h);
}

/* --- Fehlerseiten ------------------------------------------------------- */
.fehler__code {
  font-size: clamp(3rem, 2rem + 6vw, 5rem);
  font-weight: 700;
  line-height: 1;
  color: var(--ki-indigo-100);
  margin: 0 0 .3rem;
}

.fehler__text {
  color: var(--ki-text-leise);
  max-width: 52ch;
  margin-inline: auto;
}

/* --- Fuß ---------------------------------------------------------------- */
.fuss {
  border-top: 1px solid var(--ki-linie);
  background: var(--ki-flaeche-2);
  margin-top: 3rem;
  padding-block: 1.6rem;
}

.fuss__innen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
}

.fuss__zeile {
  margin: 0;
  font-size: .87rem;
  color: var(--ki-text-leise);
}

.fuss__nav { display: flex; flex-wrap: wrap; gap: 1.1rem; }

.fuss__nav a {
  font-size: .87rem;
  color: var(--ki-text-leise);
  text-decoration: none;
}
.fuss__nav a:hover {
  color: var(--ki-indigo-700);
  text-decoration: underline;
}

/* --- Barrierefreiheit --------------------------------------------------- */
/* Sichtbar nur für Screenreader */
.nur-vorlesen {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Sprungmarke: erscheint erst bei Tastaturbedienung */
.sprungmarke {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: .7rem 1.1rem;
  background: var(--ki-indigo-900);
  color: #fff;
  text-decoration: none;
  border-radius: 0 0 var(--ki-radius-s) 0;
}
.sprungmarke:focus {
  left: 0;
  color: #fff;
}

/* --- Rücksicht auf Nutzereinstellungen ---------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* =========================================================================
 * Formulare und Meldungen (Block 3)
 * ====================================================================== */

.schmal { max-width: 520px; margin-inline: auto; }

.vorspann {
  color: var(--ki-text-leise);
  font-size: 1.02rem;
  margin-bottom: 1.6rem;
}

/* --- Formular ----------------------------------------------------------- */
.formular {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.portal-abschnitt { margin-top: clamp(2rem, 1.4rem + 2vw, 3.5rem); }
.portal-abschnitt > h2 { margin-bottom: 1rem; }
.partner-aktionen { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .65rem; margin-top: 1rem; }
.partner-aktionen form { margin: 0; }
.partner-bearbeiten { flex: 1 1 100%; margin-bottom: .25rem; }
.partner-bearbeiten summary { cursor: pointer; font-weight: 650; margin-bottom: .8rem; }
.partner-bearbeiten .formular { padding-top: .4rem; }
.abstand-oben { margin-top: 1.2rem; }
.code-eingabe { text-transform: uppercase; letter-spacing: .12em; font-weight: 650; }

.feld { display: flex; flex-direction: column; gap: .35rem; }

.feld__marke {
  font-size: .92rem;
  font-weight: 600;
  color: var(--ki-indigo-900);
}

.feld__eingabe {
  width: 100%;
  padding: .65rem .8rem;
  font: inherit;
  font-size: 1rem;   /* nicht kleiner: iOS zoomt sonst beim Fokus hinein */
  color: var(--ki-text);
  background: var(--ki-flaeche);
  border: 1px solid var(--ki-linie);
  border-radius: var(--ki-radius-s);
}

.feld__eingabe:focus {
  border-color: var(--ki-indigo-500);
  outline: 2px solid var(--ki-bernstein);
  outline-offset: 1px;
}

.feld__eingabe--fehler { border-color: var(--ki-fehler); }

.feld__hilfe {
  margin: 0;
  font-size: .85rem;
  color: var(--ki-text-leise);
}

.feld__fehler {
  margin: 0;
  font-size: .88rem;
  color: var(--ki-fehler);
  font-weight: 500;
}

.feld--kasten {
  padding: .9rem 1rem;
  background: var(--ki-flaeche-2);
  border: 1px solid var(--ki-linie);
  border-radius: var(--ki-radius-s);
}

.feld__ankreuz {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .92rem;
  line-height: 1.5;
  cursor: pointer;
}

.feld__ankreuz input {
  margin-top: .2rem;
  width: 1.05rem;
  height: 1.05rem;
  flex: none;
  accent-color: var(--ki-indigo-700);
}

.feldgruppe {
  border: 0;
  padding: 0;
  margin: 0;
}

.feldgruppe__marke {
  padding: 0;
  margin-bottom: .6rem;
  font-size: .92rem;
  font-weight: 600;
  color: var(--ki-indigo-900);
}

/* --- Rollenwahl --------------------------------------------------------- */
.rollenwahl { display: grid; gap: .55rem; }

.rollenwahl__option {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .8rem .9rem;
  border: 1px solid var(--ki-linie);
  border-radius: var(--ki-radius-s);
  background: var(--ki-flaeche);
  cursor: pointer;
}

.rollenwahl__option:hover { border-color: var(--ki-indigo-500); }

/* Die ganze Kachel hervorheben, nicht nur den Punkt — bei vier Optionen
   sonst schwer zu erkennen, was gewählt ist. */
.rollenwahl__option:has(input:checked) {
  border-color: var(--ki-indigo-700);
  background: var(--ki-indigo-50);
  box-shadow: inset 0 0 0 1px var(--ki-indigo-700);
}

.rollenwahl__option input {
  margin-top: .25rem;
  width: 1.05rem;
  height: 1.05rem;
  flex: none;
  accent-color: var(--ki-indigo-700);
}

.rollenwahl__inhalt { display: flex; flex-direction: column; gap: .15rem; }
.rollenwahl__titel  { font-weight: 620; font-size: .96rem; color: var(--ki-indigo-900); }
.rollenwahl__text   { font-size: .87rem; color: var(--ki-text-leise); line-height: 1.45; }

/* --- Knöpfe ------------------------------------------------------------- */
.knopf--voll {
  width: 100%;
  padding: .8rem 1.3rem;
  font-size: 1rem;
  border: 0;
}

.knopf--leise {
  background: transparent;
  color: var(--ki-text-leise);
  border: 1px solid var(--ki-linie);
}
.knopf--leise:hover {
  background: var(--ki-flaeche-2);
  color: var(--ki-indigo-700);
  box-shadow: none;
}

.formular__hinweis {
  margin: 0;
  font-size: .9rem;
  color: var(--ki-text-leise);
  text-align: center;
}

/* --- Meldungen ---------------------------------------------------------- */
.meldung {
  padding: .75rem 1rem;
  border-radius: var(--ki-radius-s);
  font-size: .93rem;
  margin: 0 0 1rem;
  border-left: 3px solid;
}

.meldung--fehler  { background: #fdeceb; border-color: var(--ki-fehler);  color: #7d1a15; }
.meldung--erfolg  { background: #e9f5ee; border-color: var(--ki-erfolg);  color: #145334; }
.meldung--hinweis { background: var(--ki-bernstein-hell); border-color: var(--ki-bernstein); color: #6b5316; }

.hinweis--erfolg {
  background: #e9f5ee;
  border-color: #b6dcc6;
  border-left-color: var(--ki-erfolg);
}
.hinweis--erfolg .hinweis__text,
.hinweis--erfolg .hinweis__titel { color: #145334; }

.hinweis--fehler {
  background: #fdeceb;
  border-color: #f2c4c0;
  border-left-color: var(--ki-fehler);
}
.hinweis--fehler .hinweis__text,
.hinweis--fehler .hinweis__titel { color: #7d1a15; }

/* --- Kopfzeile im angemeldeten Bereich ---------------------------------- */
.kopf__link {
  font-size: .92rem;
  font-weight: 550;
  text-decoration: none;
  color: var(--ki-indigo-700);
}
.kopf__link:hover { text-decoration: underline; }

.kopf__abmelden { margin: 0; }

/* --- Datenliste --------------------------------------------------------- */
.daten {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .4rem 1.2rem;
  margin: 0;
  font-size: .95rem;
}
.daten dt { color: var(--ki-text-leise); }
.daten dd { margin: 0; font-weight: 550; }

/* --- HTMX --------------------------------------------------------------- */
/* Während einer Anfrage abblenden, damit Doppelklicks sichtbar folgenlos sind */
.htmx-request.formular,
.htmx-request .knopf {
  opacity: .6;
  pointer-events: none;
}

/* =========================================================================
 * Organisationen und Mitglieder (Block 4)
 * ====================================================================== */

/* --- Hut-Umschalter ----------------------------------------------------- */
.hut { margin: 0; display: flex; align-items: center; gap: .4rem; }

.hut__wahl {
  max-width: 220px;
  padding: .3rem .5rem;
  font: inherit;
  font-size: .85rem;
  color: var(--ki-indigo-700);
  background: var(--ki-flaeche);
  border: 1px solid var(--ki-linie);
  border-radius: var(--ki-radius-s);
  cursor: pointer;
}
.hut__wahl:hover { border-color: var(--ki-indigo-500); }

/* --- Liste der Organisationen ------------------------------------------- */
.orgliste { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }

.orgliste__eintrag {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem 1.1rem;
  border: 1px solid var(--ki-linie);
  border-radius: var(--ki-radius-s);
  background: var(--ki-flaeche);
}

/* Die aktive Organisation deutlich hervorheben — sie bestimmt, welche
   Rechte gerade gelten. */
.orgliste__eintrag--aktiv {
  border-color: var(--ki-indigo-700);
  background: var(--ki-indigo-50);
  box-shadow: inset 3px 0 0 var(--ki-indigo-700);
}

.orgliste__text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }

.orgliste__name {
  font-weight: 620;
  color: var(--ki-indigo-900);
  text-decoration: none;
}
.orgliste__name:hover { text-decoration: underline; }

.orgliste__meta { font-size: .85rem; color: var(--ki-text-leise); }
.orgliste__form { margin: 0; flex: none; }

/* --- Mitgliederliste ---------------------------------------------------- */
.mitgliederliste { list-style: none; margin: 0 0 .8rem; padding: 0; display: grid; gap: .45rem; }

.mitglied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem 1rem;
  border: 1px solid var(--ki-linie);
  border-radius: var(--ki-radius-s);
  background: var(--ki-flaeche);
}

/* Ausgeschiedene bleiben sichtbar, treten aber zurück: Sie sind Verlauf,
   nicht Gegenwart. */
.mitglied--beendet {
  background: var(--ki-flaeche-2);
  border-style: dashed;
  opacity: .75;
}

.mitglied__text { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.mitglied__name { font-weight: 570; color: var(--ki-indigo-900); }
.mitglied__meta { font-size: .84rem; color: var(--ki-text-leise); }
.mitglied__form { margin: 0; flex: none; }

.marke-klein {
  display: inline-block;
  margin-left: .4rem;
  padding: .05rem .4rem;
  font-size: .74rem;
  font-weight: 600;
  color: var(--ki-indigo-700);
  background: var(--ki-indigo-100);
  border-radius: 3px;
  vertical-align: .1em;
}

/* --- Kleinigkeiten ------------------------------------------------------ */
.formular--zeile {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .8rem;
}
.formular--zeile .feld { flex: 1 1 200px; }

.feld__zusatz {
  font-weight: 400;
  font-size: .85rem;
  color: var(--ki-text-leise);
}

select.feld__eingabe { cursor: pointer; }

.abstand-oben { margin-top: 1.4rem; }
.klein { font-size: .85rem; }

/* =========================================================================
 * Dokumente (Block 5)
 * ====================================================================== */

.doksliste { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .5rem; }

.dok {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .7rem .9rem;
  border: 1px solid var(--ki-linie);
  border-radius: var(--ki-radius-s);
  background: var(--ki-flaeche);
}

/* Abgelaufenes Führungszeugnis muss auffallen, ohne wie ein Fehler zu wirken */
.dok--abgelaufen {
  border-left: 3px solid var(--ki-warnung);
  background: var(--ki-bernstein-hell);
}

.dok__vorschau {
  width: 56px;
  height: 56px;
  flex: none;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--ki-linie);
  background: var(--ki-flaeche-2);
}

/* Ausweichsymbol, wenn kein Vorschaubild erzeugt werden konnte */
.dok__symbol {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  flex: none;
  border-radius: 4px;
  background: var(--ki-indigo-50);
  border: 1px solid var(--ki-linie);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ki-indigo-700);
}

.dok__text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; flex: 1; }
.dok__name { font-weight: 570; color: var(--ki-indigo-900); }
.dok__meta { font-size: .84rem; color: var(--ki-text-leise); }

.dok__aktionen { display: flex; gap: .4rem; flex: none; align-items: center; }
.dok__form { margin: 0; }

/* Besonders geschützte Dokumente sichtbar kennzeichnen — die Betreuerin
   soll auf einen Blick sehen, was nie öffentlich wird. */
.marke-klein--warn {
  color: #6b5316;
  background: var(--ki-bernstein-hell);
  border: 1px solid #f0dcb4;
}

input[type="file"].feld__eingabe {
  padding: .5rem;
  background: var(--ki-flaeche-2);
  cursor: pointer;
}

/* =========================================================================
 * Freigaben und Zugriffsprotokoll (Block 6)
 * ====================================================================== */

.dok__freigaben {
  font-size: .8rem;
  color: var(--ki-indigo-700);
  font-weight: 550;
}

.freigabenliste { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .45rem; }

.freigabe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .65rem .9rem;
  border: 1px solid var(--ki-linie);
  border-radius: var(--ki-radius-s);
  background: var(--ki-flaeche);
}

/* Zurückgenommene Freigaben bleiben sichtbar, treten aber zurück — sie sind
   Verlauf und belegen, dass der Zugriff wirklich endete. */
.freigabe--weg {
  background: var(--ki-flaeche-2);
  border-style: dashed;
  opacity: .72;
}

.freigabe__text { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.freigabe__name { font-weight: 570; color: var(--ki-indigo-900); }
.freigabe__meta { font-size: .82rem; color: var(--ki-text-leise); }
.freigabe__form { margin: 0; flex: none; }

/* --- Zugriffsprotokoll --------------------------------------------------- */
.zugriffsliste { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .3rem; }

.zugriff {
  display: grid;
  grid-template-columns: 8.5rem 1fr auto;
  gap: .8rem;
  align-items: baseline;
  padding: .45rem .8rem;
  border-left: 2px solid var(--ki-indigo-100);
  background: var(--ki-flaeche-2);
  border-radius: 0 var(--ki-radius-s) var(--ki-radius-s) 0;
  font-size: .87rem;
}

.zugriff__zeit {
  color: var(--ki-text-leise);
  font-variant-numeric: tabular-nums;
}
.zugriff__wer  { color: var(--ki-text); min-width: 0; }
.zugriff__was  { color: var(--ki-text-leise); font-size: .82rem; }

@media (max-width: 560px) {
  .zugriff { grid-template-columns: 1fr; gap: .15rem; }
}

/* =========================================================================
 * Profil, Fähigkeiten, Werdegang (Block 7)
 * ====================================================================== */

/* --- Vollständigkeitsanzeige -------------------------------------------- */
.fortschritt {
  padding: 1rem 1.2rem;
  border: 1px solid var(--ki-linie);
  border-radius: var(--ki-radius);
  background: var(--ki-flaeche-2);
  margin-bottom: 1.8rem;
}

.fortschritt__kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: .5rem;
  font-size: .93rem;
  font-weight: 550;
  color: var(--ki-indigo-900);
}

.fortschritt__zahl { font-variant-numeric: tabular-nums; }

.fortschritt__bahn {
  height: 8px;
  border-radius: 4px;
  background: var(--ki-indigo-100);
  overflow: hidden;
}

.fortschritt__balken {
  height: 100%;
  background: var(--ki-indigo-700);
  border-radius: 4px;
  transition: width .3s ease;
}

.fortschritt__hilfe {
  margin: .5rem 0 0;
  font-size: .84rem;
  color: var(--ki-text-leise);
}

.offen { margin-top: .7rem; font-size: .88rem; }
.offen summary { cursor: pointer; color: var(--ki-indigo-700); font-weight: 550; }
.offen__liste { margin: .5rem 0 0; padding-left: 1.2rem; color: var(--ki-text-leise); }

/* --- Felderpaare (zweispaltig auf breiten Schirmen) ---------------------- */
.felderpaar {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  margin-bottom: 1.6rem;
}

.feld--inline { margin: 0; }

.feld__zeile {
  display: flex;
  align-items: center;
  gap: .7rem;
  flex-wrap: wrap;
}

/* Rückmeldung nach dem Speichern — verschwindet beim nächsten Tausch */
.feld__ok {
  font-size: .84rem;
  color: var(--ki-erfolg);
  font-weight: 550;
}

/* --- Fähigkeiten --------------------------------------------------------- */
.skills {
  display: grid;
  gap: .4rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  margin-bottom: 1.2rem;
}

.skill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  padding: .4rem .7rem;
  border: 1px solid var(--ki-linie);
  border-radius: var(--ki-radius-s);
  background: var(--ki-flaeche);
  font-size: .9rem;
}

.skill__name { min-width: 0; }

.skill__stufe {
  flex: none;
  width: 5.5rem;
  padding: .2rem .4rem;
  font: inherit;
  font-size: .85rem;
  border: 1px solid var(--ki-linie);
  border-radius: 4px;
  background: var(--ki-flaeche);
  cursor: pointer;
}

/* --- Werdegang ----------------------------------------------------------- */
.stationen { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: .5rem; }

.station {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem 1rem;
  border: 1px solid var(--ki-linie);
  border-radius: var(--ki-radius-s);
  background: var(--ki-flaeche);
}

/* Eine bestätigte Station ist der stärkste Nachweis im Profil — sie soll
   auch so aussehen. */
.station--bestaetigt {
  border-color: #b6dcc6;
  border-left: 3px solid var(--ki-erfolg);
  background: #f4faf6;
}

.station__text { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.station__name { font-weight: 570; color: var(--ki-indigo-900); }
.station__meta { font-size: .84rem; color: var(--ki-text-leise); }
.station__form { margin: 0; flex: none; }

.marke-klein--gut {
  color: #145334;
  background: #e9f5ee;
  border: 1px solid #b6dcc6;
}

/* --- Fotowahl ------------------------------------------------------------ */
.fotowahl {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.6rem;
}

.fotowahl__eintrag {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  margin: 0;
}

.fotowahl__bild {
  width: 90px;
  height: 90px;
  object-fit: cover;
  border-radius: var(--ki-radius-s);
  border: 1px solid var(--ki-linie);
}

/* =========================================================================
 * Prüfung und Verifizierung (Block 8)
 * ====================================================================== */

.stufe {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3rem 1rem;
  padding: 1rem 1.2rem;
  border: 1px solid var(--ki-linie);
  border-left: 4px solid var(--ki-linie);
  border-radius: var(--ki-radius);
  background: var(--ki-flaeche-2);
  margin-bottom: 1.6rem;
}

.stufe__marke {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ki-text-leise);
  width: 100%;
}

.stufe__wert { font-size: 1.25rem; font-weight: 650; color: var(--ki-indigo-900); }
.stufe__naechste { font-size: .87rem; color: var(--ki-text-leise); }

/* Die Stufe soll man auf einen Blick erfassen — ohne den Text zu lesen. */
.stufe--basic    { border-left-color: var(--ki-indigo-500); }
.stufe--verified { border-left-color: var(--ki-erfolg); background: #f4faf6; }
.stufe--trusted  { border-left-color: var(--ki-bernstein); background: var(--ki-bernstein-hell); }

/* --- Bedingungen (die Erklärung) ---------------------------------------- */
.bedingungen { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; gap: .3rem; }

.bedingung {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  padding: .4rem .7rem;
  border-radius: var(--ki-radius-s);
  background: var(--ki-flaeche-2);
  font-size: .9rem;
  color: var(--ki-text-leise);
}

.bedingung--ok { background: #f4faf6; color: var(--ki-text); }

.bedingung__zeichen {
  flex: none;
  width: 1.1rem;
  text-align: center;
  font-weight: 700;
  color: var(--ki-linie);
}
.bedingung--ok .bedingung__zeichen { color: var(--ki-erfolg); }

/* --- Eigene Prüfungen ---------------------------------------------------- */
.pruefliste { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .45rem; }

.pruefung {
  padding: .7rem 1rem;
  border: 1px solid var(--ki-linie);
  border-radius: var(--ki-radius-s);
  background: var(--ki-flaeche);
}

.pruefung--approved { border-left: 3px solid var(--ki-erfolg); }
.pruefung--rejected { border-left: 3px solid var(--ki-fehler); }
.pruefung--expired  { border-left: 3px solid var(--ki-warnung); }
.pruefung--pending  { border-left: 3px solid var(--ki-indigo-500); }

.pruefung__text { display: flex; flex-direction: column; gap: .15rem; }
.pruefung__name { font-weight: 570; color: var(--ki-indigo-900); }
.pruefung__meta { font-size: .84rem; color: var(--ki-text-leise); }

.pruefung__grund {
  margin-top: .3rem;
  font-size: .87rem;
  color: #7d1a15;
  background: #fdeceb;
  padding: .35rem .6rem;
  border-radius: 4px;
}

/* --- Prüfkarte (Ansicht der Vermittlung) --------------------------------- */
.pruefkarte {
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--ki-linie);
  border-radius: var(--ki-radius);
  background: var(--ki-flaeche);
  box-shadow: var(--ki-schatten);
  margin-bottom: 1rem;
}

.pruefkarte__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .4rem 1rem;
  margin-bottom: .8rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--ki-linie);
}

.pruefkarte__name { font-weight: 620; color: var(--ki-indigo-900); }
.pruefkarte__art {
  font-size: .85rem;
  padding: .1rem .5rem;
  background: var(--ki-indigo-100);
  color: var(--ki-indigo-700);
  border-radius: 3px;
}
.pruefkarte__datum { font-size: .84rem; color: var(--ki-text-leise); margin-left: auto; }

/* =========================================================================
 * Referenzen (Block 9)
 * ====================================================================== */

.bewertung {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3rem .8rem;
  padding: 1rem 1.2rem;
  border: 1px solid var(--ki-linie);
  border-left: 4px solid var(--ki-bernstein);
  border-radius: var(--ki-radius);
  background: var(--ki-bernstein-hell);
  margin-bottom: 1.6rem;
}

.bewertung__marke {
  width: 100%;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #6b5316;
}

.bewertung__wert {
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1;
  color: #6b5316;
  font-variant-numeric: tabular-nums;
}

.bewertung__von { font-size: .87rem; color: #6b5316; }

/* --- Einzelne Referenzen ------------------------------------------------- */
.referenzliste { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: .6rem; }

.referenz {
  padding: .8rem 1rem;
  border: 1px solid var(--ki-linie);
  border-radius: var(--ki-radius-s);
  background: var(--ki-flaeche);
}

/* Widerrufene bleiben sichtbar — die Note zählt weiter, nur Text und Name
   sind weg. Das soll man sehen können. */
.referenz--weg {
  background: var(--ki-flaeche-2);
  border-style: dashed;
  opacity: .8;
}

.referenz--versteckt { border-left: 3px solid var(--ki-warnung); }

.referenz__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3rem .7rem;
  margin-bottom: .4rem;
}

.referenz__sterne {
  color: var(--ki-bernstein);
  letter-spacing: .08em;
  font-size: 1rem;
}

.referenz__wer { font-weight: 570; color: var(--ki-indigo-900); }
.referenz__datum { font-size: .82rem; color: var(--ki-text-leise); margin-left: auto; }

.referenz__text {
  margin: 0 0 .5rem;
  font-size: .93rem;
  line-height: 1.55;
  color: var(--ki-text);
}

.referenz__form { margin: 0; }

/* --- Anfragen ------------------------------------------------------------ */
.anfrageliste { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .3rem; }

.anfrage {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3rem .7rem;
  padding: .4rem .8rem;
  background: var(--ki-flaeche-2);
  border-radius: var(--ki-radius-s);
  font-size: .87rem;
}

.anfrage__wer { color: var(--ki-text); }
.anfrage__datum { color: var(--ki-text-leise); margin-left: auto; font-size: .82rem; }

/* --- Notenwahl im öffentlichen Formular ---------------------------------- */
/* Große Klickflächen: Wer das ausfüllt, tut es oft am Telefon. */
.notenwahl { display: flex; gap: .5rem; flex-wrap: wrap; }

.note { cursor: pointer; }
.note input { position: absolute; opacity: 0; width: 0; height: 0; }

.note__zahl {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 2px solid var(--ki-linie);
  border-radius: var(--ki-radius-s);
  background: var(--ki-flaeche);
  font-size: 1.1rem;
  font-weight: 650;
  color: var(--ki-text-leise);
}

.note input:checked + .note__zahl {
  border-color: var(--ki-bernstein);
  background: var(--ki-bernstein-hell);
  color: #6b5316;
}

.note input:focus-visible + .note__zahl {
  outline: 3px solid var(--ki-bernstein);
  outline-offset: 2px;
}

/* =========================================================================
 * Nachrichten (Block 10)
 * ====================================================================== */

.verlaufliste { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: .45rem; }

.verlauf {
  border: 1px solid var(--ki-linie);
  border-radius: var(--ki-radius-s);
  background: var(--ki-flaeche);
}

/* Ungelesene Verläufe müssen auf einen Blick auffallen */
.verlauf--neu {
  border-left: 3px solid var(--ki-indigo-700);
  background: var(--ki-indigo-50);
}

.verlauf__link {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .75rem 1rem;
  text-decoration: none;
  color: inherit;
}
.verlauf__link:hover { background: var(--ki-flaeche-2); }

.verlauf__betreff { font-weight: 570; color: var(--ki-indigo-900); }
.verlauf__meta { font-size: .84rem; color: var(--ki-text-leise); }

.marke-klein--neu {
  color: #fff;
  background: var(--ki-indigo-700);
  border: 1px solid var(--ki-indigo-700);
}

/* --- Der Verlauf --------------------------------------------------------- */
.nachrichten { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .7rem; }

.nachricht {
  padding: .8rem 1rem;
  border: 1px solid var(--ki-linie);
  border-radius: var(--ki-radius-s);
  background: var(--ki-flaeche);
  max-width: 46rem;
}

/* Eigene Nachrichten rechts eingerückt — der übliche Lesecode für „von mir" */
.nachricht--eigene {
  margin-left: auto;
  background: var(--ki-indigo-50);
  border-color: var(--ki-indigo-100);
}

.nachricht__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3rem .7rem;
  margin-bottom: .35rem;
}

.nachricht__wer { font-weight: 570; color: var(--ki-indigo-900); font-size: .92rem; }

.nachricht__org {
  font-weight: 400;
  font-size: .82rem;
  color: var(--ki-text-leise);
  margin-left: .3rem;
}

.nachricht__zeit {
  font-size: .8rem;
  color: var(--ki-text-leise);
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

.nachricht__text { margin: 0; font-size: .94rem; line-height: 1.55; }
.nachricht__text--weg { color: var(--ki-text-leise); font-style: italic; }

.nachricht__anhaenge {
  margin-top: .5rem;
  padding-top: .45rem;
  border-top: 1px solid var(--ki-linie);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .4rem .6rem;
  font-size: .85rem;
}

.nachricht__anhaenge_marke { color: var(--ki-text-leise); }

.anhang {
  display: inline-block;
  padding: .12rem .5rem;
  background: var(--ki-flaeche-2);
  border: 1px solid var(--ki-linie);
  border-radius: 3px;
  text-decoration: none;
  color: var(--ki-indigo-700);
}
.anhang:hover { border-color: var(--ki-indigo-500); background: var(--ki-indigo-50); }

select[multiple].feld__eingabe { padding: .3rem; }

/* --- Block 11: Profillink ------------------------------------------------ */

/* Der Klartext-Token nach dem Anlegen. Absichtlich auffaellig und
   umbruchsicher — er wird nur dieses eine Mal gezeigt. */
.link-klartext {
  margin: .5rem 0 0;
  padding: .5rem .7rem;
  background: var(--ki-flaeche-2);
  border: 1px solid var(--ki-linie);
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .88rem;
  word-break: break-all;
  overflow-wrap: anywhere;
}

.linkliste { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: .6rem; }

.teillink {
  padding: .7rem .9rem;
  background: var(--ki-flaeche);
  border: 1px solid var(--ki-linie);
  border-left: 3px solid var(--ki-indigo-500);
  border-radius: 4px;
}
.teillink--abgelaufen,
.teillink--widerrufen { border-left-color: var(--ki-linie); opacity: .72; }

.teillink__kopf {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .6rem;
  margin-bottom: .25rem;
}
.teillink__name { font-weight: 570; color: var(--ki-indigo-900); }
.teillink__praefix {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .8rem; color: var(--ki-text-leise);
}

.teillink__zeile {
  display: flex; flex-wrap: wrap; gap: .3rem .9rem;
  color: var(--ki-text-leise);
}

.teillink__aktionen {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  margin-top: .5rem;
}
.reihe-form { margin: 0; }

/* Ankreuzfelder in den Umfangs-Gruppen */
.haken { display: flex; align-items: baseline; gap: .45rem; margin: .2rem 0; }
.haken input { flex: none; }

.merkmale {
  list-style: none; margin: .4rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .35rem;
}

.dokumentnennung {
  list-style: none; margin: 0 0 1rem; padding: 0;
  display: flex; flex-wrap: wrap; gap: .35rem;
}

.tabelle { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
.tabelle th, .tabelle td {
  padding: .4rem .5rem; text-align: left;
  border-bottom: 1px solid var(--ki-linie);
  vertical-align: top;
}
.tabelle th { font-weight: 570; color: var(--ki-text-leise); font-size: .85rem; }

.hinweis--leise { background: var(--ki-flaeche-2); border-color: var(--ki-linie); }

.knopf--warn { border-color: var(--ki-warnung); color: #8a3a12; }
.knopf--warn:hover { background: #fdf1e8; }

/* --- Das geteilte Profil (oeffentlich, ohne Anmeldung) ------------------- */

.geteilt__kopf { margin-bottom: .9rem; }
.geteilt__text { white-space: normal; margin-bottom: 1.2rem; }

/* Wasserzeichen: reine Deko hinter dem Text. Es ist eine Erinnerung an den
   Empfaenger, keine technische Schutzmassnahme — wer will, macht einen
   Bildschirmfoto. Deshalb steht der echte Schutz beim Ablauf und beim
   Widerruf, nicht hier. */
.geteilt--wasserzeichen { position: relative; overflow: hidden; }
.geteilt--wasserzeichen::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    -30deg,
    rgba(49, 46, 129, .035) 0 2px,
    transparent 2px 120px
  );
}

.siegel {
  display: inline-flex; align-items: baseline; gap: .5rem;
  padding: .45rem .8rem; margin-bottom: 1.1rem;
  background: var(--ki-flaeche-2);
  border: 1px solid var(--ki-linie);
  border-radius: 4px;
}
.siegel__marke { font-size: .82rem; color: var(--ki-text-leise); }
.siegel__wert { color: var(--ki-indigo-900); }
.siegel--verified { border-color: var(--ki-erfolg); background: #f0fbf4; }
.siegel--trusted  { border-color: var(--ki-indigo-500); background: var(--ki-indigo-50); }

@media print {
  .kopf, .fuss, .sprungmarke { display: none; }
  .geteilt--wasserzeichen::before { display: none; }
}

/* --- Block 12: Meine Daten ----------------------------------------------- */

.datenliste { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: .5rem; }

.dateneintrag {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .8rem;
  padding: .55rem .8rem;
  background: var(--ki-flaeche);
  border: 1px solid var(--ki-linie);
  border-radius: 4px;
}
/* Fuer Eintraege mit eigenem Textblock (Einwilligung, Sperre). */
.dateneintrag--block { display: block; }
.dateneintrag__kopf {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .6rem;
  margin-bottom: .3rem;
}

/* Warnung: ernster als ein Hinweis, aber kein Fehler. Wird fuer die
   Aufbewahrungssperren und den offenen Loeschantrag benutzt — beides
   Zustaende, die stimmen, aber Aufmerksamkeit verdienen. */
.hinweis--warn {
  background: #fdf6ec;
  border-color: var(--ki-warnung);
}

/* --- Block 13: Verwaltung und Einstieg ----------------------------------- */

.kacheln {
  list-style: none; margin: 0 0 1.4rem; padding: 0;
  display: grid; gap: .6rem;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
}

.kachel {
  padding: .7rem .9rem;
  background: var(--ki-flaeche);
  border: 1px solid var(--ki-linie);
  border-radius: 4px;
  display: flex; flex-direction: column; gap: .15rem;
}
.kachel--warn { border-color: var(--ki-warnung); background: #fdf6ec; }

.kachel__zahl {
  font-size: 1.6rem; font-weight: 600; line-height: 1.1;
  color: var(--ki-indigo-900);
}
.kachel__text { font-size: .82rem; color: var(--ki-text-leise); }

/* Abgeschaltete Frist-Regel: sichtbar, aber zurueckgenommen. */
.zeile--aus { opacity: .6; }

/* Einstiegshilfe auf der Uebersicht */
.einstieg {
  padding: .9rem 1.1rem;
  margin-bottom: 1.4rem;
  background: var(--ki-indigo-50);
  border: 1px solid var(--ki-indigo-500);
  border-radius: 5px;
}
.einstieg__titel { margin: 0 0 .3rem; font-size: 1.05rem; }
.einstieg__text { margin: 0 0 .7rem; font-size: .92rem; }

.schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }

.schritt {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem;
}
.schritt__haken { flex: none; color: var(--ki-indigo-700); font-weight: 600; }
.schritt--fertig .schritt__haken { color: var(--ki-erfolg); }
.schritt--fertig .schritt__text { color: var(--ki-text-leise); }
.portal-familienperle {
  --ki-akzent: #2f7652;
  --ki-akzent-dunkel: #20543a;
  --ki-mantel-schleier: #dcefe4;
  --ki-mantel-grund:    #f2f9f5;
  --ki-mantel-linie:    #d5e6dc;
}

/* Im Pilot gibt es genau drei Aktionsstufen: primär, sekundär und kritisch. */
.portal-familienperle .knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 2.75rem;
  padding: .65rem 1rem;
  border: 1px solid var(--ki-akzent);
  border-radius: 8px;
  background: var(--ki-akzent);
  color: #fff;
  font-size: .92rem;
  font-weight: 650;
  line-height: 1.2;
  text-align: center;
  box-shadow: none;
}
.portal-familienperle .knopf:hover {
  border-color: var(--ki-akzent-dunkel);
  background: var(--ki-akzent-dunkel);
  color: #fff;
  box-shadow: none;
}
.portal-familienperle .knopf--leise {
  border-color: #8db8a0;
  background: #fff;
  color: var(--ki-akzent-dunkel);
}
.portal-familienperle .knopf--leise:hover {
  border-color: var(--ki-akzent-dunkel);
  background: #edf7f1;
  color: var(--ki-akzent-dunkel);
}
.portal-familienperle .knopf--warn {
  border-color: #bd5b55;
  background: #fff;
  color: #8d2621;
}
.portal-familienperle .knopf--warn:hover {
  border-color: #8d2621;
  background: #faeeee;
  color: #761e1a;
}
.portal-familienperle .knopf:disabled {
  border-color: #cfd5d1;
  background: #edf0ee;
  color: #737b77;
  cursor: not-allowed;
}
.portal-familienperle .sprachwahl { border: 0; padding: 0; background: none; }

/* Zwei Sprachen nebeneinander, die aktive erkennbar. Sie ist bewusst kein
   toter Text, sondern bleibt anklickbar — das haelt die Bedienung gleich. */
.sprachwahl { display: inline-flex; gap: .25rem; align-items: stretch; }
.sprachwahl__wahl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  min-width: 2.75rem;
  padding: 0 .6rem;
  border: 1px solid #8db8a0;
  border-radius: 8px;
  color: var(--ki-akzent-dunkel);
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
}
.sprachwahl__wahl:hover { background: #eef5f1; }
.sprachwahl__wahl--aktiv {
  background: var(--ki-akzent-dunkel);
  border-color: var(--ki-akzent-dunkel);
  color: #fff;
  cursor: default;
}
.sprachwahl__lang { display: none; }

.portal-statuskarte { margin-bottom: 2rem; border-left: 4px solid var(--ki-akzent); }
.portal-statuskarte__link { display: grid; gap: .45rem; color: inherit; text-decoration: none; }
.portal-statuskarte__link strong { color: var(--ki-indigo-900); font-size: 1.35rem; }
.portal-statuskarte__link:hover strong { color: var(--ki-akzent-dunkel); text-decoration: underline; }
.portal-sektionen { display: grid; gap: 1.25rem; margin-top: 1.5rem; }
.portal-familienperle .abschnitt > h2 { margin-top: clamp(2.5rem, 2rem + 1vw, 3.5rem); }
.portal-familienperle .abschnitt > .karte { margin-block: 1.5rem; }
.portal-familienperle .kartenraster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: 1.5rem;
  margin-block: 1.5rem 2.5rem;
  align-items: start;
}
.portal-familienperle .kartenraster > .karte { height: 100%; }
.portal-familienperle .karte > :first-child { margin-top: 0; }
.portal-familienperle .karte > :last-child { margin-bottom: 0; }
/* Gruppen tragen den Abstand, nicht die einzelne Schaltflaeche. Gilt auch,
   wenn jede in einem eigenen Formular steckt — dort fehlte er bisher ganz. */
.aktionsleiste { display: flex; flex-wrap: wrap; align-items: stretch; gap: .75rem; }
.aktionsleiste > form { margin: 0; }
@media (max-width: 33.99rem) {
  .aktionsleiste { flex-direction: column; align-items: stretch; }
  .aktionsleiste > .knopf, .aktionsleiste > form, .aktionsleiste > form > .knopf { width: 100%; }
}
.empfehlung-erfolg { text-align: center; }
.erfolg-symbol { display: grid; place-items: center; width: 4rem; height: 4rem; margin: 0 auto 1rem; border-radius: 50%; background: #e7f5ec; color: var(--ki-akzent-dunkel); font-size: 2rem; font-weight: 750; }
.link-kopieren { text-align: left; margin-block: 1.5rem; }
.link-kopieren__zeile { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .75rem; margin-top: .5rem; align-items: stretch; }
.link-kopieren__feld { min-width: 0; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .85rem; }
.empfehlung-erfolg__aktionen { justify-content: center; margin-top: 1.5rem; }
.empfehlung-raster { grid-template-columns: minmax(0, 1fr) !important; }
.empfehlung-eintrag { padding: clamp(1.2rem, 1rem + 1vw, 1.8rem); }
.empfehlung-eintrag__kopf {
  display: grid;
  gap: .8rem;
  padding-bottom: 1.2rem;
  margin-bottom: 1.2rem;
  border-bottom: 2px solid #dce9e1;
}
.empfehlung-eintrag__kopf h3 { margin: 0; font-size: 1.2rem; }
.empfehlung-eintrag__zeit { margin: 0; color: var(--ki-text-leise); font-size: .88rem; }
.empfehlung-eintrag__naechster { margin: 0; padding: .75rem .9rem; border-radius: 8px; background: #f1f6f3; }

/* Führung: Wo stehe ich, was ist als Nächstes zu tun. Ruhig, solange der
   Betrachter nicht dran ist — deutlich hervorgehoben, sobald er es ist. */
.fuehrung {
  display: grid;
  gap: .45rem;
  margin-block: 1rem 1.4rem;
  padding: .95rem 1.1rem;
  border: 1px solid var(--ki-linie);
  border-left: 4px solid var(--ki-text-leise);
  border-radius: var(--ki-radius-s);
  background: var(--ki-flaeche-2);
}
.fuehrung--dran { border-left-color: var(--ki-akzent); background: #f1f6f3; }
.fuehrung__schritt {
  margin: 0;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ki-text-leise);
}
.fuehrung__lage, .fuehrung__naechster { margin: 0; }
.fuehrung__marke { font-weight: 650; color: var(--ki-text-leise); }
.fuehrung__aktion { margin: .35rem 0 0; }

/* Schlichte Auflistung ohne Aufzählungszeichen — für kurze Vorgangslisten. */
.liste-schlicht { margin: .5rem 0 0; padding: 0; list-style: none; display: grid; gap: .5rem; }
.liste-schlicht > li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem; }

/* Zugangsübersicht: Beschriftung und Wert bleiben auch schmal lesbar. */
.zugang-daten { display: grid; gap: .35rem .9rem; margin: 0 0 1rem; }
.zugang-daten dt { font-weight: 650; color: var(--ki-text-leise); font-size: .88rem; }
.zugang-daten dd { margin: 0 0 .5rem; }
.zugang-aktion { display: grid; gap: .4rem; }
@media (min-width: 34rem) {
  .zugang-daten { grid-template-columns: max-content minmax(0, 1fr); align-items: baseline; }
  .zugang-daten dt { grid-column: 1; }
  .zugang-daten dd { grid-column: 2; margin-bottom: 0; }
}
.versandstatus { margin: 0; font-size: .88rem; }
.versandstatus--ok { color: #175a39; }
.versandstatus--warn { color: #832b25; }
.statuszeile { display: flex; flex-wrap: wrap; gap: .55rem; }
.status-chip {
  display: grid;
  align-items: center;
  min-height: 2rem;
  padding: .3rem .65rem;
  border: 1px solid #d6ddd9;
  border-radius: 999px;
  background: #f7faf8;
  color: #3e5147;
  font-size: .84rem;
  font-weight: 650;
}
.status-chip small { color: inherit; opacity: .78; font-size: .7rem; font-weight: 550; line-height: 1.15; }
.status-chip--gruen { border-color: #8dc3a2; background: #eaf6ef; color: #175a39; }
.status-chip--gelb { border-color: #d7b764; background: #fff8df; color: #72520a; }
.status-chip--rot { border-color: #d3a09c; background: #faeeee; color: #832b25; }
.status-chip--grau { border-color: #cbd1ce; background: #f3f5f4; color: #4f5a55; }
.empfehlung-eintrag > dl {
  display: grid;
  grid-template-columns: minmax(9rem, .45fr) minmax(0, 1fr);
  gap: .35rem 1rem;
  margin: 1.25rem 0;
  padding: 1rem;
  border-radius: var(--ki-radius-s);
  background: var(--ki-flaeche-2);
}
.empfehlung-eintrag > dl dt { font-weight: 650; color: var(--ki-text-leise); }
.empfehlung-eintrag > dl dd { margin: 0; overflow-wrap: anywhere; }
.empfehlung-eintrag > form,
.empfehlung-eintrag > details {
  margin-top: 1.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--ki-linie);
}
.empfehlung-eintrag > details > summary,
.portal-familienperle details.karte > summary { cursor: pointer; font-weight: 650; }
.empfehlung-eintrag .formular .knopf { align-self: flex-start; }
.empfehlung-zeitleiste ol { display: grid; gap: .85rem; margin-bottom: 0; padding-left: 1.35rem; }
.empfehlung-zeitleiste li { padding-left: .25rem; }
/* Anlagen zu einem Vorgang. Die Liste steht bewusst ueber dem Formular:
   Zuerst sehen, was schon dabeiliegt, dann etwas hinzufuegen. */
.anlagenliste { display: grid; gap: .7rem; margin: 0 0 1.1rem; padding: 0; list-style: none; }
.anlagenliste li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .7rem;
  padding: .6rem .8rem; border: 1px solid var(--ki-linie); border-radius: .55rem;
  background: var(--ki-flaeche-2);
}
.anlagenliste a { font-weight: 600; }
/* Dateiname, Herkunft und Zeit brechen als Block um: Auf dem Telefon stand
   sonst der halbe Dateiname unter dem Entfernen-Knopf. */
.anlagenliste small { flex: 1 1 100%; color: var(--ki-text-leise); overflow-wrap: anywhere; }
.anlagenliste form { margin: 0; }
.anlagenliste .knopf { padding: .3rem .7rem; font-size: .85rem; }
/* Fertige Nachricht zum Weiterschicken. Das Feld ist nur zum Lesen und
   Kopieren da — deshalb ohne Schreibcursor, aber mit auswaehlbarem Text:
   Klappt die Zwischenablage nicht, markiert das Skript den Inhalt. */
.empfehlung-nachricht textarea {
  margin-bottom: .9rem; font-family: inherit; cursor: text; resize: vertical;
  background: var(--ki-flaeche-2);
}
.empfehlung-nachricht .aktionsleiste,
.empfehlung-selbstmeldung .aktionsleiste { flex-wrap: wrap; }
.portal-daten { padding: 0; overflow: hidden; }
.portal-daten > summary { display: flex; flex-direction: column; gap: .2rem; padding: 1.15rem 1.3rem; cursor: pointer; list-style-position: inside; }
.portal-daten > summary span { color: var(--ki-text-leise); font-size: .9rem; font-weight: 400; }
.portal-daten[open] > summary { border-bottom: 1px solid var(--ki-linie); background: var(--ki-flaeche-2); }
.portal-formular { padding: 1.3rem; }
.steuerkennung-eingabe { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: stretch; }
.steuerkennung-prefix { display: flex; align-items: center; padding: .7rem .8rem; border: 1px solid var(--ki-linie); border-right: 0; border-radius: var(--ki-radius-s) 0 0 var(--ki-radius-s); background: var(--ki-flaeche-2); font-weight: 700; }
.steuerkennung-eingabe .feld__eingabe { border-radius: 0 var(--ki-radius-s) var(--ki-radius-s) 0; }
.steuerkennung-feld[data-art="tax_number"] .steuerkennung-prefix { display: none; }
.steuerkennung-feld[data-art="tax_number"] .feld__eingabe { border-radius: var(--ki-radius-s); }
.nur-geschaeftlich[hidden] { display: none; }
.optionale-einladungsdaten { padding: 1rem; border: 1px solid var(--ki-linie); border-radius: var(--ki-radius-s); background: var(--ki-flaeche-2); }
.optionale-einladungsdaten > summary { cursor: pointer; font-weight: 650; }
.optionale-einladungsdaten[open] > summary { margin-bottom: 1rem; }
.portal-daten--auszahlung { border-color: #b9d9c6; }
.portal-weiter { margin: .25rem 0 0; }
.verbindungsanfragen { padding: 1.25rem; border: 2px solid var(--ki-akzent); border-radius: var(--ki-radius); background: #f1f8f4; }
.karte--aktion { box-shadow: none; }
.aktionsformular { margin-top: 1rem; }
.portal-menu-knopf { display: none !important; }
.portal-menu-symbol,
.portal-menu-symbol::before,
.portal-menu-symbol::after {
  display: block;
  width: 1.1rem;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.portal-menu-symbol { position: relative; }
.portal-menu-symbol::before,
.portal-menu-symbol::after { content: ""; position: absolute; left: 0; }
.portal-menu-symbol::before { top: -.35rem; }
.portal-menu-symbol::after { top: .35rem; }
.portal-kontomenue { position: relative; flex: 0 0 auto; }
.portal-kontomenue > summary { list-style: none; cursor: pointer; white-space: nowrap; }
.portal-kontomenue > summary::-webkit-details-marker { display: none; }
.portal-kontomenue > summary::after { content: "⌄"; margin-left: .1rem; font-size: 1rem; }
.portal-kontomenue[open] > summary { background: #edf7f1; }
.portal-kontomenue__inhalt {
  position: absolute;
  z-index: 20;
  top: calc(100% + .55rem);
  right: 0;
  width: min(19rem, calc(100vw - 2rem));
  padding: .65rem;
  border: 1px solid var(--ki-linie);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 .8rem 2rem rgba(23, 35, 29, .16);
}
.portal-kontomenue__inhalt p { display: grid; gap: .1rem; margin: 0 0 .5rem; padding: .45rem .55rem .7rem; border-bottom: 1px solid var(--ki-linie); font-size: .78rem; color: var(--ki-text-leise); }
.portal-kontomenue__inhalt strong { overflow-wrap: anywhere; color: var(--ki-text); font-size: .88rem; }
.portal-kontomenue__link { display: block; width: 100%; padding: .65rem .55rem; border: 0; border-radius: 6px; background: none; color: var(--ki-akzent-dunkel); font: inherit; font-weight: 650; text-align: left; text-decoration: none; cursor: pointer; }
.portal-kontomenue__link:hover { background: #edf7f1; text-decoration: none; }
.portal-kontomenue__inhalt form { margin: 0; }

.kopf--familienperle {
  border-bottom-color: #cfe4d7;
}

.marke__zeichen--familienperle {
  width: 42px;
  height: 42px;
  background: #2f7652;
  color: #fff;
  font-size: .9rem;
}
.kopf--familienperle .marke { flex: 0 0 auto; gap: .35rem; }
.kopf--familienperle .marke__text { font-size: 1.12rem; }
.kopf--familienperle .kopf__nav { min-width: 0; gap: .45rem; }
.kopf--familienperle .kopf__link { white-space: nowrap; font-size: .9rem; }

.portal-kennzahlen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 1.25rem 0 2.25rem; }
.portal-kennzahl { display: grid; gap: .25rem; min-width: 0; color: inherit; text-decoration: none; }
.portal-kennzahl:hover { border-color: #8db8a0; text-decoration: none; }
.portal-kennzahl strong { color: var(--ki-akzent-dunkel); font-size: clamp(1.6rem, 1.2rem + 1vw, 2.25rem); line-height: 1; }
.portal-kennzahl span { color: var(--ki-text-leise); font-size: .9rem; }
.kooperation-neu { margin-bottom: 2rem !important; }
.kooperation-kandidaten { display: grid; gap: .75rem; margin-bottom: 1.75rem; }
.kooperation-kandidat { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem; border: 1px solid var(--ki-linie); border-radius: 8px; background: var(--ki-flaeche-2); }
.kooperation-kandidat form { margin: 0; }
.vorgangsreferenz { display: flex; flex-wrap: wrap; gap: .45rem 1rem; margin: 0; color: var(--ki-text-leise); font-size: .85rem; }

.signaturbeleg__partei {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid #d8dedb;
}

.signaturbeleg__zeichnung {
  display: block;
  width: min(100%, 30rem);
  min-height: 6rem;
  object-fit: contain;
  border: 1px solid #d8dedb;
  background: #fff;
}

.signaturbeleg code { overflow-wrap: anywhere; }
.portal-familienperle code { white-space: normal; overflow-wrap: anywhere; word-break: break-all; }
.abschlussaktion { margin-block: 1.5rem; }
.verwaltungsdetails { margin-top: 2rem !important; }
.verwaltungsdetails[open] > summary { margin-bottom: 1rem; }
.vereinbarung-lesen { margin-block: 1.5rem 2rem; }
.vereinbarung-rahmen { display: block; width: 100%; height: min(70vh, 48rem); border: 1px solid var(--ki-linie); border-radius: var(--ki-radius); background: #f4f4f4; }

.pdf-unterzeichnung { margin-block: 1.5rem; border: 1px solid var(--ki-linie); border-radius: var(--ki-radius); background: #eef2ef; overflow: hidden; }
.pdf-unterzeichnung__kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; background: #fff; border-bottom: 1px solid var(--ki-linie); }
.pdf-unterzeichnung__kopf h2 { margin: .2rem 0 0; overflow-wrap: anywhere; }
.pdf-unterzeichnung__kopf p { margin: 0; }
.pdf-unterzeichnung__status { margin: 0; padding: .7rem 1.25rem; color: var(--ki-text-leise); background: #f8faf8; }
.pdf-unterzeichnung__status--fehler { color: #8c2f24; }
.pdf-seiten { display: grid; justify-items: center; gap: 1.25rem; padding: 1.25rem; max-height: 72vh; overflow: auto; overscroll-behavior: contain; }
.pdf-seite { position: relative; max-width: 100%; flex: none; background: #fff; box-shadow: 0 .25rem 1.2rem rgba(23, 35, 29, .15); }
.pdf-seite__canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.pdf-signaturfeld { position: absolute; z-index: 2; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: .1rem; padding: .15rem; border: 1px dashed #799486; border-radius: .25rem; background: rgba(239, 246, 241, .72); color: #245f43; font: inherit; font-size: clamp(.55rem, 1.7vw, .85rem); text-align: center; overflow: hidden; }
button.pdf-signaturfeld { cursor: pointer; }
.pdf-signaturfeld--aktiv { border: 2px solid #267d52; background: rgba(224, 246, 232, .86); box-shadow: 0 0 0 .2rem rgba(38, 125, 82, .18); }
.pdf-signaturfeld--signiert, .pdf-signaturfeld--eingesetzt { border-style: solid; background: rgba(255, 255, 255, .38); }
.pdf-signaturfeld img { display: block; max-width: 100%; max-height: 82%; object-fit: contain; }
.pdf-signaturfeld small { line-height: 1; color: #245f43; }
.pdf-unterzeichnung__fallback { margin: 0; padding: 1rem 1.25rem; background: #fff; border-top: 1px solid var(--ki-linie); }
.signatur-abschluss { display: grid; gap: 1rem; margin-top: 1.5rem; }
.signatur-abschluss h2, .signatur-abschluss p { margin: 0; }
.unterschrift-dialog { width: min(52rem, calc(100% - 1.5rem)); max-width: none; padding: 0; border: 0; border-radius: var(--ki-radius); box-shadow: 0 1.4rem 4rem rgba(0,0,0,.28); }
.unterschrift-dialog::backdrop { background: rgba(14, 28, 21, .68); }
.unterschrift-dialog__inhalt { display: grid; gap: 1rem; padding: 1.25rem; }
.unterschrift-dialog__inhalt h2, .unterschrift-dialog__inhalt p { margin: 0; }
/* Zeichenflaeche: feste Aufloesung im Attribut, Darstellung nach Geraet.
   Gilt fuer beide Stellen — Vertrag und Bestaetigung der empfohlenen Person. */
.unterschrift-flaeche {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  box-sizing: border-box;
  border: 2px solid #799486;
  border-radius: .4rem;
  background: #fff;
  touch-action: none;
}

.unterschrift-dialog canvas { display: block; width: 100%; max-width: 100%; height: auto; box-sizing: border-box; border: 2px solid #799486; border-radius: .4rem; background: #fff; touch-action: none; }
.unterschrift-dialog__aktionen { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .65rem; }

@media (max-width: 44rem) {
  .pdf-unterzeichnung__kopf { align-items: stretch; flex-direction: column; }
  .pdf-seiten { padding: .65rem; gap: .8rem; max-height: 68vh; }
  .unterschrift-dialog__aktionen { display: grid; }
  .unterschrift-dialog__aktionen .knopf { width: 100%; }
}
.pdf-seite--platzierbar { cursor: default; }
.pdf-signaturfeld--editor { pointer-events: none; }
.signaturfeld-form { margin-block: 1.5rem; }
.signaturfeld-liste { display: grid; gap: .75rem; padding: 0; list-style: none; }
.signaturfeld-liste > li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
@media (max-width: 36rem) { .signaturfeld-liste > li { align-items: stretch; flex-direction: column; } }
.signatur-formular { margin-top: 0 !important; }
.signatur-formular canvas { width: 100%; border: 2px solid #799989 !important; border-radius: 8px; background: #fff; }

.datenschutz-empfehlungen__druckkopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin: 1rem 0 1.5rem;
  padding: 1rem;
  border: 1px solid #d8dedb;
  background: #fff;
}

.datenschutz-empfehlungen__url { overflow-wrap: anywhere; }
.datenschutz-empfehlungen__qr { width: 11.25rem; height: 11.25rem; }

@media (min-width: 721px) and (max-width: 1200px) {
  .kopf--familienperle .marke__text { display: none; }
  .kopf--familienperle .kopf__innen { gap: .55rem; }
  .portal-navigation { gap: .25rem; }
  .portal-navigation .kopf__link { font-size: clamp(.76rem, 1.05vw, .86rem); }
  .portal-navigation .knopf { min-width: auto; padding-inline: .6rem; }
  .portal-navigation .sprachwahl__wahl { min-width: 2.45rem; padding-inline: .4rem; }
}

@media (max-width: 720px) {
  .kopf--familienperle { position: relative; }
  .kopf--familienperle .kopf__innen { flex-wrap: wrap; padding-block: .65rem; }
  .portal-menu-knopf { display: inline-flex !important; margin-left: auto; }
  .kopf--familienperle .marke { min-width: 0; max-width: calc(100% - 7.5rem); }
  .kopf--familienperle .marke__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .portal-navigation { display: none; width: 100%; align-items: stretch; flex-direction: column; gap: 0; padding: .4rem 0 .7rem; border-top: 1px solid var(--ki-linie); }
  .portal-navigation--offen { display: flex; }
  .portal-navigation .kopf__link { display: block; padding: .7rem .25rem; border-bottom: 1px solid #edf0ee; }
  .portal-navigation .sprachwahl { align-self: stretch; margin-top: .65rem; padding-inline: .75rem; }
  .portal-navigation .sprachwahl__wahl { flex: 1 1 0; }
  .portal-navigation .sprachwahl__kurz { display: none; }
  .portal-navigation .sprachwahl__lang { display: inline; }
  .portal-navigation .portal-kontomenue { align-self: stretch; margin-top: .65rem; }
  .portal-navigation .portal-kontomenue > summary { width: 100%; }
  .portal-navigation .portal-kontomenue__inhalt { position: static; width: 100%; margin-top: .35rem; box-shadow: none; }
  .portal-abschnitt { margin-top: 2.25rem; }
  .partner-aktionen { flex-direction: column; align-items: stretch; }
  .partner-aktionen > form, .partner-aktionen > form .knopf { width: 100%; }
  .portal-familienperle .kartenraster { gap: 1.1rem; margin-block: 1.25rem 2rem; }
  .empfehlung-eintrag > dl { grid-template-columns: 1fr; gap: .15rem; }
  .empfehlung-eintrag > dl dd + dt { margin-top: .65rem; }
  .empfehlung-eintrag .formular .knopf,
  .empfehlung-eintrag .knopf,
  .aktionsleiste .knopf { width: 100%; text-align: center; }
  .link-kopieren__zeile { grid-template-columns: 1fr; }
  .portal-kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
  .kooperation-kandidat { align-items: stretch; flex-direction: column; }
  .kooperation-kandidat .knopf { width: 100%; }
}

@media (max-width: 31rem) {
  .portal-kennzahlen { grid-template-columns: 1fr; }
}

@media print {
  .nur-bildschirm, .portal-familienperle form { display: none !important; }
  .signaturbeleg { break-inside: avoid; box-shadow: none; }
  .datenschutz-empfehlungen { max-width: none; font-size: 10.5pt; }
  .datenschutz-empfehlungen__druckkopf { break-inside: avoid; }
  .datenschutz-empfehlungen__qr { width: 3.5cm; height: 3.5cm; }
}

/* Die Ablehnung ist eine eigene Entscheidung, kein Anhaengsel des
   Bestaetigungsformulars. */
.entscheidung-alternative {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--ki-linie);
}
.entscheidung-alternative > p { margin: 0 0 .75rem; color: var(--ki-text-leise); }

/* Kein Kasten im Kasten: Steht die Fuehrung schon in einer Karte, verliert
   sie ihren eigenen Rahmen und behaelt nur den Akzentstrich. Zwei ineinander
   geschachtelte Rahmen lasen sich als zwei getrennte Dinge. */
.karte .fuehrung {
  margin: .75rem 0 1.1rem;
  padding: 0 0 0 .9rem;
  border: 0;
  border-left: 3px solid var(--ki-linie);
  border-radius: 0;
  background: none;
}
.karte .fuehrung--dran { border-left-color: var(--ki-akzent); }

/* Abrechnung: eine Empfehlung, ein Block. Die Monate als Folge, darunter
   die Zusammenfassung — nicht drei getrennte Bereiche wie vorher. */
.abrechnung-empfehlung { margin-block: 1.5rem; }
.abrechnung-empfehlung__kopf { padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 2px solid #dce9e1; }
.abrechnung-empfehlung__kopf h2 { margin: 0 0 .25rem; }
.abrechnung-anlegen { justify-content: space-between; margin-block: .75rem; }
.monatsliste { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.monatsliste__eintrag { padding: .85rem 1rem; border-radius: 8px; background: var(--ki-flaeche-2); border-left: 3px solid var(--ki-linie); }
.monatsliste__eintrag--eligible { border-left-color: var(--ki-akzent); }
.monatsliste__eintrag--paid { border-left-color: var(--ki-erfolg); }
.monatsliste__eintrag--cancelled { border-left-color: var(--ki-text-leise); opacity: .75; }
.monatsliste__kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .9rem; }
.monatsliste__zeitraum { color: var(--ki-text-leise); font-size: .9rem; }
.monatsliste__betrag { margin-left: auto; font-weight: 650; }
.monatsliste__stand { margin: .35rem 0 0; font-size: .92rem; }
.monatsliste__entscheidung { margin-top: .75rem; }
.abrechnung-summe { margin-top: 1.25rem; padding-top: 1rem; border-top: 2px solid #dce9e1; display: grid; gap: .4rem; }
.abrechnung-summe__zeile { display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin: 0; }
.abrechnung-summe__zeile strong { margin-left: auto; }
.abrechnung-gutschrift { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--ki-linie); }
@media (max-width: 33.99rem) {
  .monatsliste__betrag, .abrechnung-summe__zeile strong { margin-left: 0; }
}

/* Verschiebbare Unterschriftsfelder im Editor. */
.pdf-signaturfeld--beweglich { cursor: grab; touch-action: none; }
.pdf-signaturfeld--zieht { cursor: grabbing; outline: 2px dashed var(--ki-akzent); }

/* --- Oeffentlicher Mantel um die Anmeldung -------------------------------
   Ein Bauplan, zwei Portale: Kontaktimperium in Indigo, Familienperle in
   Gruen. Die Farbe kommt ausschliesslich aus --ki-akzent und den drei
   --ki-mantel-Toenen, deshalb ist hier nichts nach Portal verzweigt.
   Zuerst nur fuer familienperle.com gebaut (17.08.2026), am selben Tag
   fuer kontaktimperium.de mitbenutzt statt kopiert. */
.mantel-held {
  background:
    radial-gradient(900px 420px at 12% -25%, var(--ki-mantel-schleier), transparent 68%),
    linear-gradient(180deg, var(--ki-mantel-grund) 0%, var(--ki-flaeche) 100%);
  border-bottom: 1px solid var(--ki-mantel-linie);
  padding-block: clamp(2.25rem, 1.25rem + 4vw, 4rem);
}
.mantel-held__innen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.5rem, 1rem + 3vw, 3rem);
  align-items: center;
}
.mantel-held__oberzeile {
  margin: 0 0 .7rem;
  font-size: .8rem;
  font-weight: 660;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ki-akzent-dunkel);
}
.mantel-held__titel {
  max-width: 18ch;
  font-size: clamp(1.85rem, 1.3rem + 2.4vw, 3rem);
  margin-bottom: .6rem;
}
.mantel-held__vorspann {
  max-width: 56ch;
  margin: 0;
  font-size: clamp(1rem, .96rem + .25vw, 1.12rem);
  color: var(--ki-text-leise);
}
.mantel-held__aktionen { margin-top: 1.6rem; }
.mantel-held__hinweis {
  max-width: 52ch;
  margin: 1rem 0 0;
  font-size: .88rem;
  color: var(--ki-text-leise);
}
.mantel-zeichen { width: clamp(9rem, 18vw, 15rem); height: auto; color: var(--ki-akzent); }

/* Im Portal traegt die Zwischenueberschrift den Abstand zum Vorhergehenden.
   Auf der Startseite tut das schon der Abschnitt selbst — sonst klaffte
   zwischen zwei Bloecken eine handbreite Luecke. */
.mantel-block > h2 { margin-top: 0; }
/* Der Hinweiskasten unter den Karten klebte sonst an ihnen. */
.mantel-block > .karten + .hinweis,
.mantel-block > .karten + .mantel-vorspann { margin-top: 1.5rem; }

.mantel-vorspann {
  max-width: 68ch;
  margin-block: 0 1.75rem;
  color: var(--ki-text-leise);
  font-size: 1.02rem;
}

/* Ein Absatz, der allein einen Abschnitt trägt: etwas groesser gesetzt und
   mit Akzentstrich, damit er nicht wie ein vergessener Vorspann wirkt. */
.mantel-leitsatz {
  max-width: 62ch;
  margin: 0;
  padding-left: 1.1rem;
  border-left: 3px solid var(--ki-akzent);
  font-size: clamp(1.02rem, .98rem + .3vw, 1.15rem);
  color: var(--ki-text-leise);
}
/* Der zweite Vorspann steht unter den Karten und braucht Luft davor. */
.mantel-projekte + .mantel-vorspann { margin-top: 1.75rem; margin-bottom: 0; }

/* Ablaufschritte: die Zahl traegt die Reihenfolge, nicht die Einrueckung. */
.mantel-schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.4rem; }
.mantel-schritt { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: start; }
.mantel-schritt__nr {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--ki-akzent);
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
}
.mantel-schritt__titel { margin: .25rem 0 .3rem; font-size: 1.05rem; }
.mantel-schritt__text { margin: 0; color: var(--ki-text-leise); font-size: .96rem; }

/* Die Schwesterseiten: eine Kachel je Seite, ganzflaechig anklickbar. */
.mantel-projekte {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  /* 15rem, damit die vier Seiten auf dem Schreibtisch in eine Reihe passen
     und die letzte nicht allein in der zweiten Zeile steht. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.mantel-projekt {
  display: grid;
  gap: .3rem;
  align-content: start;
  height: 100%;
  padding: 1.2rem 1.3rem;
  border: 1px solid var(--ki-linie);
  border-left: 3px solid var(--ki-akzent);
  border-radius: var(--ki-radius);
  background: var(--ki-flaeche);
  box-shadow: var(--ki-schatten);
  color: inherit;
  text-decoration: none;
}
.mantel-projekt:hover { border-color: var(--ki-akzent); box-shadow: var(--ki-schatten-h); }
.mantel-projekt:hover .mantel-projekt__name { text-decoration: underline; }
/* Pfeil neben den Namen, nicht darunter: allein am Kartenfuss sah er aus
   wie ein vergessenes Zeichen. */
.mantel-projekt__kopf { display: flex; align-items: baseline; gap: .5rem; }
.mantel-projekt__name { font-weight: 650; color: var(--ki-indigo-900); }
.mantel-projekt__adresse {
  font-size: .82rem;
  color: var(--ki-akzent-dunkel);
  overflow-wrap: anywhere;
}
.mantel-projekt__text { margin-top: .35rem; font-size: .93rem; color: var(--ki-text-leise); }
.mantel-projekt__pfeil { margin-left: auto; color: var(--ki-akzent); font-weight: 700; }

.mantel-abschluss {
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border: 1px solid var(--ki-mantel-linie);
  border-radius: var(--ki-radius);
  background: linear-gradient(180deg, var(--ki-mantel-grund) 0%, var(--ki-flaeche) 100%);
}
.mantel-abschluss > h2 { margin-top: 0; }
.mantel-abschluss > p { max-width: 60ch; color: var(--ki-text-leise); }
.mantel-abschluss__kontakt { display: flex; flex-wrap: wrap; gap: .5rem .8rem; font-weight: 600; }
.mantel-abschluss__kontakt a { color: var(--ki-akzent-dunkel); }

/* Schmal: die Perle wandert unter den Text, sonst bleibt fuer beides zu
   wenig Platz und der Titel bricht nach jedem Wort um. */
@media (max-width: 47.99rem) {
  .mantel-held__innen { grid-template-columns: minmax(0, 1fr); }
  .mantel-zeichen { justify-self: center; width: clamp(7rem, 34vw, 11rem); }
  .mantel-held__titel { max-width: none; }
}

/* Gegenstand und Richtung einer Kooperation. */
.kooperation-gegenstand { margin: 0 0 1rem; display: grid; gap: .2rem; }
.kooperation-gegenstand .marke-klein { color: var(--ki-text-leise); }

/* Beschriftung nur fuer Vorleseprogramme: Das Rollen-Auswahlfeld in der
   Mitgliederliste steht neben dem Namen und braucht im Bild keine
   eigene Ueberschrift — ohne label waere es aber unbenannt. */
.feld__marke--versteckt {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* Der eigene Betrieb steht am Ende der Kooperationsseite und ist vom
   Rest abgesetzt: Es ist ein anderer Gedanke als die laufenden
   Kooperationen und soll nicht mit ihnen verschwimmen. */
.kooperation-liste__titel { margin-top: 2rem; }
.kooperation-eigenes {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--ki-linie, #d9d9e3);
  display: grid;
  gap: 1rem;
}
.karte--imaufbau { opacity: .85; }
.marke-imaufbau {
  display: inline-block;
  margin-left: .5rem;
  padding: .1rem .5rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  vertical-align: middle;
  white-space: nowrap;
}

/* --- Editor für Unterschriftsfelder ------------------------------------
   Beim Bearbeiten einer PDF zählt Fläche, nicht der gewohnte mittige
   Satzspiegel. Links das Dokument über etwa 70 Prozent der Breite und als
   einziges scrollbar, rechts die Bedienung. Damit bleibt beim Setzen eines
   Feldes alles gleichzeitig sichtbar, statt zwischen Seite und Formular hin
   und her zu springen. */
.feldeditor {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: .75rem;
  width: min(100% - 1.5rem, 110rem);
  margin-inline: auto;
  /* Die Seite selbst scrollt nicht — nur die PDF-Spalte. Abgezogen wird,
     was Kopf- und Fußbereich des Portals belegen. */
  height: calc(100vh - 11rem);
  min-height: 30rem;
}
.feldeditor__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem 1rem;
}
.feldeditor__titel { display: flex; flex-wrap: wrap; align-items: baseline; gap: .75rem; }
.feldeditor__titel h1 { margin: 0; font-size: 1.35rem; }
.feldeditor__zurueck { white-space: nowrap; }
.feldeditor__datei { margin: 0; color: var(--ki-text-leise); overflow-wrap: anywhere; }

.feldeditor__flaeche {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(18rem, 3fr);
  gap: 1rem;
  min-height: 0;                 /* sonst wächst das Raster über die Höhe */
}
.feldeditor__pdf {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  background: #fff;
  border: 1px solid var(--ki-linie);
  border-radius: var(--ki-radius);
  overflow: hidden;
}
.pdf-seiten--editor {
  max-height: none;              /* die Höhe gibt jetzt die Spalte vor */
  height: 100%;
  align-content: start;
}
.feldeditor__seite {
  display: grid;
  align-content: start;
  gap: .85rem;
  min-height: 0;
  overflow-y: auto;              /* Notausgang auf kleinen Bildschirmen */
  padding-right: .25rem;
}
.feldeditor__seite .signaturfeld-form { margin-block: 0; }
.feldeditor__seite h2 { margin: 0 0 .5rem; font-size: 1.05rem; }
.feldeditor__liste { min-width: 0; }

/* Das Abbild am Zeiger: zeigt in wahrer Größe, was gesetzt wird. Es darf
   den Klick nicht abfangen, sonst käme er nie auf der Seite an. */
.pdf-signaturfeld--geist {
  pointer-events: none;
  border: 2px dashed #267d52;
  background: rgba(224, 246, 232, .55);
  opacity: .9;
}

/* Anfassbar sind nur die Felder, die man auch bewegen darf. Ohne diese Regel
   greift `.pdf-signaturfeld--editor { pointer-events: none }` und kein Feld
   ließ sich ziehen — deshalb musste man zum Umsetzen den Knopf erneut
   drücken. */
.pdf-signaturfeld--beweglich,
.pdf-signaturfeld--ziehbar {
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
}
.pdf-signaturfeld--zieht { cursor: grabbing; }

@media (max-width: 62rem) {
  /* Nebeneinander lohnt sich erst ab einer gewissen Breite; darunter
     untereinander, dann scrollt die Seite wieder normal. */
  .feldeditor { height: auto; }
  .feldeditor__flaeche { grid-template-columns: minmax(0, 1fr); }
  .pdf-seiten--editor { max-height: 70vh; }
  .feldeditor__seite { overflow: visible; }
}

/* Knopfleiste des Feldeditors: am Ende der Bedienspalte, nebeneinander
   solange Platz ist. Sie stand vorher ganz oben — vor dem Formular, das
   sie eigentlich abschließt. */
.feldeditor__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
}
.feldeditor__knoepfe > * { flex: 1 1 9rem; text-align: center; }

/* Einstiegskarten der Empfehlungsseite: sagen vor dem Klick, was dahinter
   liegt, und springen hin. Die Seite trug vorher Filter, Formular, zwei
   Listen und das Archiv untereinander, ohne Gliederung. */
.empfehlung-einstieg {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  margin-bottom: 1.75rem;
}
.karte--einstieg {
  display: grid;
  align-content: start;
  gap: .4rem;
  text-decoration: none;
  color: inherit;
}
.karte--einstieg:hover, .karte--einstieg:focus-visible {
  border-color: var(--ki-akzent);
  box-shadow: 0 .2rem .8rem rgba(23, 35, 29, .12);
}
.karte--einstieg__titel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  font-weight: 600;
}
.karte--einstieg__zahl {
  flex: none;
  min-width: 1.9rem;
  padding: .05rem .5rem;
  border-radius: 999px;
  background: var(--ki-akzent);
  color: #fff;
  font-size: .85rem;
  text-align: center;
}
.karte--einstieg__text { color: var(--ki-text-leise); font-size: .95rem; }

/* Empfehlungsgeber-Karten: gleiche Höhe, gleiche Reihenfolge, Aktionen unten.
   Vorher endete jede Karte dort, wo ihr Text aufhörte, und die Knöpfe lagen
   auf unterschiedlicher Höhe nebeneinander — das las sich wie ein Haufen
   statt wie eine Liste. */
.kartenraster > .karte { display: flex; flex-direction: column; gap: .45rem; }
.kartenraster > .karte > h3 { margin: 0 0 .1rem; }
.kartenraster > .karte > p { margin: 0; }
.kartenraster > .karte > .partner-aktionen { margin-top: auto; padding-top: .9rem; }

/* Aktionen einer Karte: alles gleich breit und untereinander. Ein Knopf neben
   einer Klappe neben einem Formular ergab drei verschiedene Höhen. */
.partner-aktionen { flex-direction: column; align-items: stretch; }
.partner-aktionen > * { flex: none; width: 100%; }
.partner-aktionen .knopf { width: 100%; }
.partner-aktionen .verwaltungsdetails { margin-top: .35rem !important; }
.partner-bearbeiten { flex: none; margin-bottom: 0; }

/* Art und Verbindungsstand als Merkzeichen. */
.partner-merkmale { display: flex; flex-wrap: wrap; gap: .4rem; margin: .15rem 0 !important; }
.merkmal {
  padding: .1rem .55rem;
  border: 1px solid var(--ki-linie);
  border-radius: 999px;
  background: var(--ki-flaeche-2);
  color: var(--ki-text-leise);
  font-size: .8rem;
  white-space: nowrap;
}
.merkmal--connected { border-color: #267d52; color: #1d6342; background: rgba(224, 246, 232, .7); }
.merkmal--invited, .merkmal--connection_requested { border-color: #a67c1a; color: #7a5a11; background: rgba(253, 246, 227, .8); }
.merkmal--suspended, .merkmal--ended { border-color: #a3423a; color: #8c2f24; background: rgba(253, 234, 232, .8); }

/* Überschrift über einer Kennzahlenreihe. Seit es zwei Reihen gibt — was ich
   anbiete und was ich selbst empfehle — müssen sie benannt sein, sonst steht
   dort zweimal dieselbe Zahlenwand ohne Bezug. */
.portal-kennzahlen__titel {
  margin: 1.5rem 0 .6rem;
  font-size: 1rem;
  color: var(--ki-text-leise);
}
.portal-kennzahlen__titel:first-of-type { margin-top: .5rem; }

/* Bestätigungsseite der empfohlenen Person: erst ihre Daten, dann der Text.
   Die Zeichenfläche lag vorher offen im Formular und war auf dem Telefon
   höher als der Bildschirm. */
.bestaetigen-daten { margin-bottom: 1.25rem; }
.bestaetigen-daten h2 { margin: 0 0 .6rem; font-size: 1.05rem; }
.datenliste {
  display: grid;
  grid-template-columns: minmax(7rem, auto) 1fr;
  gap: .35rem .9rem;
  margin: 0 0 .75rem;
}
.datenliste dt { color: var(--ki-text-leise); }
.datenliste dd { margin: 0; overflow-wrap: anywhere; }

.unterschrift-kurz {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1rem;
}
.unterschrift-kurz__feld {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 12rem;
  min-height: 4.5rem;
  max-width: 22rem;
  padding: .4rem;
  border: 2px dashed #799486;
  border-radius: .4rem;
  background: #fff;
  color: #245f43;
  font: inherit;
  cursor: pointer;
}
.unterschrift-kurz__feld:hover, .unterschrift-kurz__feld:focus-visible { border-style: solid; }
.unterschrift-kurz__feld img { max-width: 100%; max-height: 4rem; object-fit: contain; }

/* Lange Zeichenketten in Karten: E-Mail-Adressen, Vorgangsnummern, Hashes.
   Zwei Fehler auf einmal — sie brachen am Bindestrich um, was eine überflüssige
   zweite Zeile erzeugte, und liefen trotzdem über den Kartenrand hinaus, weil
   der verbleibende Rest immer noch zu lang war.

   `anywhere` bricht notfalls an jeder Stelle, damit nichts mehr übersteht.
   `hyphens: none` verhindert zusätzliche Trennstriche, und `min-width: 0`
   erlaubt dem Element im Raster überhaupt erst, schmaler als sein Inhalt zu
   werden — ohne das hilft kein Umbruch. */
.kartenraster > .karte,
.karte--aktion {
  min-width: 0;
}
.kartenraster > .karte p,
.kartenraster > .karte h3,
.karte--aktion p,
.karte--aktion h3,
.karte--aktion small,
.vorgangsreferenz strong {
  overflow-wrap: anywhere;
  hyphens: none;
  min-width: 0;
}

/* Rückmeldung nach dem Bestätigen der Stammdaten: Sie klebte am Element
   darüber, weil `.meldung` selbst keinen oberen Abstand mitbringt und im
   Portal direkt hinter dem Formular steht. */
.portal-familienperle .meldung,
.portal-daten + .meldung,
.meldung--erfolg { margin-top: 1rem; }

/* Unterschriftsfenster auf dem Telefon: „Leeren" und „Abbrechen"
   nebeneinander, „In PDF übernehmen" darunter über die volle Breite. Vorher
   standen alle drei untereinander und die wichtigste Schaltfläche sah aus
   wie die unwichtigste. */
@media (max-width: 34rem) {
  .unterschrift-dialog__aktionen {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .6rem;
  }
  .unterschrift-dialog__aktionen .knopf { width: 100%; }
  .unterschrift-dialog__aktionen .knopf:last-child { grid-column: 1 / -1; }
}

/* Bestätigungsseite: Der Vorteil zuerst, der Einwilligungstext neutral.
   Er stand vorher in einem bernsteinfarbenen Kasten und sah damit aus wie
   eine Fehlermeldung — dabei ist er das, dem zugestimmt wird. */
.bestaetigen-vorteil {
  margin: 0 0 1rem;
  padding: .9rem 1.1rem;
  border-left: 3px solid #267d52;
  border-radius: var(--ki-radius-s);
  background: rgba(224, 246, 232, .55);
  font-weight: 600;
}
.bestaetigen-einwilligung { margin-bottom: 1.25rem; }
.bestaetigen-einwilligung p { margin: 0; }