/* GesundPass – Portale (privat und Pflegedienst)
   Warme Creme-Grundfläche, Salbeigrün als Primärfarbe, Koralle nur für echte
   Warnungen. Systemschrift, keine externen Ressourcen. */

:root {
  color-scheme: light dark;

  /* ---- Referenzpalette GesundPass ----
     Beige   #EDE3D1   Creme  #F6F2EA   Weiß   #FFFFFF
     Salbei  #A7C9AB   Grün   #7BA37F   Apricot #F2815E
     Salbei, Grün und Apricot tragen als Textfarbe zu wenig Kontrast und
     werden daher nur für Flächen, Symbole und Akzente eingesetzt.
     Für Text und Bedienelemente dient das dunklere Markengrün aus dem
     Logo (#50745C). */

  --beige: #EDE3D1;
  --creme: #F6F2EA;
  --salbei: #A7C9AB;
  --apricot: #F2815E;

  --grund: var(--creme);
  --grund-tief: var(--beige);
  --karte: #FFFFFF;
  --text: #2C3A33;
  --sek: #6B6B6B;
  --gruen: #7BA37F;
  --dunkel: #50745C;
  --linie: #DDD2BD;
  --koralle: #AC4227;
  --koralle-flaeche: #FCE2DA;
  --gruen-flaeche: #DCE9DD;
  /* Gedecktes Blau, ausschließlich als Symbolfläche für amtliche Unterlagen
     (Gutachten, Bescheide). Es trägt keine Bedeutung allein: Die Art steht
     zusätzlich als Text und als eigene Symbolform daneben. */
  --blau: #3C5A78;
  --blau-flaeche: #E1E9F1;
  --radius: 24px;
  --radius-klein: 16px;
  --leiste: 268px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund: #16201B; --grund-tief: #1E2A24; --karte: #232F28;
    --text: #F3EFE6; --sek: #C3CBC5; --gruen: #A7C9AB; --dunkel: #A7C9AB;
    --linie: #45534B; --koralle: #F0A092;
    --koralle-flaeche: #4F2E27; --gruen-flaeche: #33493C;
    --blau: #A9C4DD; --blau-flaeche: #2A3A49;
  }
}

* { box-sizing: border-box; }
/* Das hidden-Attribut muss verlässlich wirken.
   Ohne diese Zeile gewinnt jede Klasse mit eigenem display gegen die
   Vorgabe des Browsers – .dateiliste (display: flex) etwa blieb trotz
   hidden als leerer Kasten stehen, und ein per Skript versteckter Bereich
   verschwand nicht. */
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

html, body { overflow-x: clip; }
body {
  margin: 0; background-color: var(--grund); color: var(--text);
  background-image:
    radial-gradient(circle at 8% 8%, rgba(167, 201, 171, .25), transparent 31rem),
    radial-gradient(circle at 92% 28%, rgba(242, 129, 94, .09), transparent 28rem),
    linear-gradient(145deg, var(--grund) 0%, color-mix(in srgb, var(--grund) 91%, var(--grund-tief)) 55%, var(--grund) 100%);
  background-attachment: fixed;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem; line-height: 1.6; -webkit-text-size-adjust: 100%;
}

@media (prefers-color-scheme: dark) {
  body {
    background-image:
      radial-gradient(circle at 10% 6%, rgba(123, 163, 127, .21), transparent 33rem),
      radial-gradient(circle at 88% 32%, rgba(167, 201, 171, .10), transparent 30rem),
      linear-gradient(145deg, #13231A 0%, var(--grund) 48%, #18271F 100%);
  }
}

h1, h2, h3 { line-height: 1.15; letter-spacing: -.015em; text-wrap: balance; }
h1 { font-size: clamp(1.9rem, 4.2vw, 2.9rem); margin: .1em 0 .3em; }
h2 { font-size: 1.4rem; margin: 0 0 .5em; }
h3 { font-size: 1.1rem; margin: 0; }
p { max-width: 68ch; text-wrap: pretty; }
a { color: var(--dunkel); }

:focus-visible { outline: 3px solid var(--dunkel); outline-offset: 3px; border-radius: 6px; }
@media (prefers-color-scheme: dark) { :focus-visible { outline-color: #e8dfcd; } }

.ueberspringen {
  position: absolute; left: -9999px; top: 0; z-index: 30; background: var(--karte);
  color: var(--text); padding: 14px 20px; border-radius: 0 0 var(--radius-klein) 0;
  text-decoration: none; font-weight: 700;
}
.ueberspringen:focus { left: 0; }

.marke {
  display: inline-flex; align-items: center; min-height: 52px; text-decoration: none;
}
/* Originalasset statt Nachbau: Die Wortmarke ist serifenbetont. */
.marke-bild { height: 34px; width: auto; display: block; }
/* Logofassung nach Farbschema. Die dunkelgruene Wortmarke traegt auf dunklem
   Grund zu wenig Kontrast, deshalb eine helle Zweitfassung. */
.marke-bild.dunkel-modus { display: none; }
@media (prefers-color-scheme: dark) {
  .marke-bild.hell-modus { display: none; }
  .marke-bild.dunkel-modus { display: block; }
}
.bereichsname {
  color: var(--sek); padding-left: 18px; border-left: 1px solid var(--linie);
  font-size: .98rem;
}

/* --- Schlichte Hülle (Anmeldung, Rechtstexte) --- */
.kopf {
  max-width: 1120px; margin: auto; padding: 16px 22px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
main.schlicht { max-width: 1120px; margin: auto; padding: 18px 22px 56px; }

/* --- Angemeldete Hülle mit kompaktem Aufklappmenü --- */
.app-kopf {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 18px;
  min-height: 76px; padding: 11px clamp(16px, 4vw, 42px); border-bottom: 1px solid var(--linie);
  background: color-mix(in srgb, var(--karte) 88%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(115%);
  backdrop-filter: blur(18px) saturate(115%);
}
.app-kopf .marke { cursor: default; }
.app-menue { position: relative; margin-left: auto; }
.app-menue summary {
  display: flex; align-items: center; gap: 12px; min-height: 52px;
  padding: 8px 18px; border: 1px solid var(--linie); border-radius: var(--radius-klein);
  background: var(--karte); color: var(--text); font-weight: 750; cursor: pointer;
  list-style: none; user-select: none;
}
.app-menue summary::-webkit-details-marker { display: none; }
.app-menue .balken {
  width: 20px; height: 2px; background: currentColor; position: relative; flex: none;
}
.app-menue .balken::before, .app-menue .balken::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px;
  background: currentColor; transition: rotate .15s, top .15s;
}
.app-menue .balken::before { top: -6px; }
.app-menue .balken::after { top: 6px; }
.app-menue summary:hover, .app-menue[open] summary { background: var(--gruen-flaeche); }
.app-menue[open] summary .balken { background: transparent; }
.app-menue[open] summary .balken::before { top: 0; rotate: 45deg; }
.app-menue[open] summary .balken::after { top: 0; rotate: -45deg; }
.app-menue > nav {
  position: absolute; top: calc(100% + 10px); right: 0; width: min(350px, calc(100vw - 24px));
  max-height: calc(100dvh - 96px); overflow-y: auto; padding: 12px;
  border: 1px solid var(--linie); border-radius: 22px;
  background: color-mix(in srgb, var(--karte) 96%, var(--grund));
  box-shadow: 0 22px 60px rgba(35, 51, 42, .18);
}
.app-menue-gruppe { padding: 5px 0 10px; }
.app-menue-gruppe + .app-menue-gruppe { border-top: 1px solid var(--linie); padding-top: 13px; }
.app-menue-gruppe h2 {
  margin: 0; padding: 0 12px 5px; color: var(--sek); font-size: .78rem;
  line-height: 1.35; letter-spacing: .08em; text-transform: uppercase;
}
.app-menue ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.app-menue a {
  display: flex; align-items: center; gap: 13px; min-height: 52px; padding: 8px 12px;
  border-radius: 13px; color: var(--text); text-decoration: none; font-weight: 650;
}
.app-menue a:hover { background: var(--grund-tief); }
.app-menue a[aria-current="page"] { background: var(--gruen-flaeche); color: var(--dunkel); }
.app-menue a svg { flex: none; }
.app-menue-abmelden { margin-top: 3px; border-top: 1px solid var(--linie); border-radius: 0 0 13px 13px !important; }

.app-rahmen { display: block; }
.app-rahmen > * { min-width: 0; }
main#inhalt { width: min(100%, 1120px); margin: 0 auto; padding: 34px clamp(18px, 4vw, 42px) 60px; }
.kicker {
  text-transform: uppercase; letter-spacing: .1em; font-size: .8rem;
  font-weight: 800; color: var(--gruen); margin: 0;
}
.einleitung { color: var(--sek); font-size: 1.08rem; }

/* --- Karten --- */
.karte {
  background: linear-gradient(145deg, var(--karte), color-mix(in srgb, var(--karte) 94%, var(--grund-tief)));
  border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 26px; margin: 0 0 20px;
}
.karte > h2:first-child, .karte > h3:first-child { margin-top: 0; }

.statusband {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  background: linear-gradient(145deg, var(--karte), color-mix(in srgb, var(--karte) 94%, var(--gruen-flaeche)));
  border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 22px 26px; margin-bottom: 22px;
}
.statusband .kreis { flex: none; }
.statusband .text { flex: 1 1 260px; }
.statusband p { margin: .2em 0 0; color: var(--sek); }

.kreis {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: var(--gruen-flaeche); color: var(--dunkel);
}
.kreis.warn { background: var(--koralle-flaeche); color: var(--koralle); }

.kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-bottom: 22px; }
.kachel {
  background: linear-gradient(145deg, var(--karte), color-mix(in srgb, var(--karte) 94%, var(--grund-tief)));
  border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 24px; display: flex; flex-direction: column; gap: 6px;
}
.kachel-kopf { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.kachel h3 { font-size: 1.05rem; }
.kachel .zahl { font-size: 2rem; font-weight: 800; line-height: 1.1; color: var(--dunkel); }
.kachel p { color: var(--sek); margin: 0; flex-grow: 1; font-size: .98rem; }

.pille {
  display: inline-block; border-radius: 999px; padding: 5px 16px;
  font-weight: 750; font-size: .95rem;
}
.pille.aus { background: var(--koralle-flaeche); color: var(--koralle); }
.pille.an { background: var(--gruen-flaeche); color: var(--dunkel); }

/* --- Aktionen --- */
.hauptaktion, .nebenaktion, .warnaktion, button.hauptaktion, button.nebenaktion, button.warnaktion {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 13px 22px; border-radius: var(--radius-klein);
  font-weight: 700; font-size: 1rem; font-family: inherit; text-decoration: none;
  border: 2px solid transparent; cursor: pointer;
}
.hauptaktion { background: var(--dunkel); color: var(--grund); }
.hauptaktion:hover { background: var(--gruen); }
@media (prefers-color-scheme: dark) { .hauptaktion { color: #16201B; } }
/* button. muss hier mitstehen - und zwar an der Ursache.
   Die Basisregel darueber nennt in ihrer Selektorliste auch
   `button.nebenaktion`. Eine Selektorliste wird je Selektor einzeln
   gewichtet: Fuer ein <button> gewinnt also (0,1,1) gegen die reine Klasse
   (0,1,0) - und damit setzte sich `border: 2px solid transparent` gegen die
   Randfarbe hier durch. Folge: Jeder <button class="nebenaktion"> war eine
   weisse Flaeche ohne Umriss auf weissem Grund, und jeder
   <button class="warnaktion"> war reiner Text ohne Rahmen. Bei <a> fiel es
   nie auf, weil dort die reine Klasse gewinnt.
   Das wurde bisher zweimal einzeln nachgebessert (fuer .zeilenaktion und
   .unterlagen-kopfaktion). Ein drittes Pflaster waere das falsche Mittel -
   die beiden Regeln unten sind mit dieser Korrektur ueberfluessig. */
.nebenaktion, button.nebenaktion {
  border-color: var(--linie); color: var(--dunkel); background: var(--karte);
}
.nebenaktion:hover, button.nebenaktion:hover { border-color: var(--gruen); }
.warnaktion, button.warnaktion {
  border-color: var(--koralle); color: var(--koralle); background: transparent;
}
.aktionslink { margin: 8px 0 22px; }
.aktionsgruppe { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.aktionsgruppe form { margin: 0; }
.postfachkarte, .codekarte { margin-bottom: 0; }
.auswahlgruppe { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 8px 0 16px; }
.kontrollfeld { display: flex; flex-direction: row; gap: 10px; align-items: center; margin: 0; }
.kontrollfeld input { width: 22px; min-height: 22px; }
.warnbereich { border-color: color-mix(in srgb, var(--koralle) 55%, var(--linie)); }
.pfeil-link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px;
  font-weight: 700; color: var(--dunkel); text-decoration: none; margin-top: 4px;
}
.pfeil-link:hover { gap: 14px; }
@media (prefers-reduced-motion: no-preference) { .pfeil-link { transition: gap .15s; } }
.zurueck { display: inline-flex; align-items: center; min-height: 48px; color: var(--dunkel); }

/* --- Formulare --- */
.formularseite, .textseite {
  max-width: 640px; margin: 30px auto;
  background: linear-gradient(145deg, var(--karte), color-mix(in srgb, var(--karte) 94%, var(--grund-tief)));
  padding: 34px;
  border: 1px solid var(--linie); border-radius: var(--radius);
}
form { display: grid; gap: 18px; margin-top: 24px; }
label { display: grid; gap: 7px; font-weight: 700; }
input[type="email"], input[type="password"], input[type="text"], input[type="number"] {
  font: inherit; min-height: 54px; border: 1px solid var(--linie); border-radius: 14px;
  background: var(--grund); color: var(--text); padding: 12px 15px; width: 100%;
}

/* --- Ruhige Anmeldung und Registrierung --- */
.auth-bereich {
  width: min(100%, 760px); margin: 24px auto 42px;
}
.auth-karte {
  width: min(100%, 590px); margin: 0 auto; padding: clamp(26px, 5vw, 46px);
  border: 1px solid color-mix(in srgb, var(--linie) 78%, transparent);
  border-radius: 32px;
  background: color-mix(in srgb, var(--karte) 94%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(110%);
  backdrop-filter: blur(20px) saturate(110%);
  box-shadow: 0 24px 70px rgba(47, 69, 56, .09);
}
.auth-karte-breit { width: min(100%, 680px); }
.auth-einleitung { text-align: center; }
.auth-einleitung h1 { margin-top: .16em; }
.auth-einleitung p:not(.kicker) { margin: .45rem auto 0; color: var(--sek); }
.auth-wechsel {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px;
  width: min(100%, 370px); margin: 24px auto; padding: 4px; border-radius: 999px;
  background: color-mix(in srgb, var(--grund-tief) 66%, var(--karte));
}
.auth-wechsel a, .auth-wechsel span {
  min-height: 44px; display: grid; place-items: center; padding: 6px 12px;
  border-radius: 999px; color: var(--sek); text-decoration: none; font-size: .9rem; font-weight: 700;
}
.auth-wechsel a[aria-current="page"] {
  color: var(--text); background: var(--karte);
  box-shadow: 0 3px 12px rgba(45, 63, 52, .08);
}
.auth-wechsel a:not([aria-current="page"]):hover { color: var(--dunkel); }
.auth-wechsel span[aria-disabled="true"] { opacity: .55; }
.auth-formular { gap: 20px; margin-top: 0; }
.auth-formular label { gap: 8px; }
.auth-formular input[type="email"],
.auth-formular input[type="password"],
.auth-formular input[type="text"],
.auth-formular input:not([type]),
.auth-formular input[type="date"] {
  min-height: 60px; padding: 14px 18px; border: 1px solid var(--linie);
  border-radius: 18px; background: color-mix(in srgb, var(--karte) 64%, var(--grund));
  color: var(--text); font: inherit; width: 100%;
}
.auth-formular input::placeholder { color: color-mix(in srgb, var(--sek) 80%, transparent); opacity: 1; }
.auth-formular input:hover { border-color: color-mix(in srgb, var(--dunkel) 58%, var(--linie)); }
.auth-formular input:focus { border-color: var(--dunkel); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gruen-flaeche) 72%, transparent); outline: 0; }
.passwort-feld { position: relative; display: block; font-weight: 400; }
.passwort-feld input { padding-right: 102px !important; }
.passwort-feld button {
  position: absolute; top: 50%; right: 9px; translate: 0 -50%;
  min-height: 44px; padding: 7px 12px; border: 0; border-radius: 999px;
  background: transparent; color: var(--dunkel); font: inherit; font-size: .86rem;
  font-weight: 750; cursor: pointer;
}
.passwort-feld button:hover { background: var(--gruen-flaeche); }
.auth-hauptaktion { width: 100%; min-height: 58px; margin-top: 4px; border-radius: 999px; }
.auth-datenschutzhinweis { margin: 20px auto 0; text-align: center; }
.auth-datenschutzhinweis { color: var(--sek); font-size: .88rem; }
/* „Passwort vergessen?" unter dem Passwortfeld.
   Bewusst ein schlichter Verweis und keine Karte: Er erscheint erst nach
   einem Fehlversuch und soll dann auffindbar sein, nicht laut. Die
   Trefffläche bleibt trotzdem groß genug für eine unruhige Hand. */
.auth-nebenlink {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: -4px;
  color: var(--dunkel);
  font-size: .95rem;
  font-weight: 600;
}
.auth-datenschutz {
  margin-top: 24px; padding: 18px 20px; border-left: 4px solid var(--gruen);
  border-radius: 0 var(--radius-klein) var(--radius-klein) 0;
  background: color-mix(in srgb, var(--gruen-flaeche) 48%, var(--karte));
}
.auth-datenschutz strong { color: var(--dunkel); }
.auth-datenschutz p { margin: 5px 0 0; color: var(--sek); font-size: .9rem; }

/* Eigene, moderne Datumswahl. Das native Feld bleibt ohne JavaScript sichtbar. */
.datum-eingabe {
  display: grid; grid-template-columns: minmax(0, 1fr) 60px;
  gap: 10px; align-items: center; font-weight: 400;
}
.datum-ausloeser {
  width: 60px; height: 60px; display: grid; place-items: center; padding: 0;
  border: 1px solid var(--linie); border-radius: 18px;
  background: color-mix(in srgb, var(--karte) 64%, var(--grund));
  color: var(--text); font: inherit; cursor: pointer;
}
.datum-ausloeser:hover { border-color: color-mix(in srgb, var(--dunkel) 58%, var(--linie)); }
.datum-ausloeser:focus-visible {
  border-color: var(--dunkel); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gruen-flaeche) 72%, transparent);
  outline: 0;
}
.datum-kalendersymbol {
  width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 12px; background: var(--gruen-flaeche); color: var(--dunkel);
  font-size: 1.25rem; font-weight: 800;
}
.feldhinweis { color: var(--sek); font-size: .82rem; font-weight: 400; }
.datum-dialog {
  width: min(450px, calc(100% - 32px)); max-height: calc(100dvh - 32px);
  padding: 0; overflow: auto; border: 1px solid var(--linie); border-radius: 30px;
  color: var(--text); background: var(--karte);
  box-shadow: 0 32px 100px rgba(11, 24, 17, .34);
}
.datum-dialog::backdrop {
  background: rgba(9, 19, 13, .66); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.datum-dialog-inhalt { padding: clamp(20px, 4vw, 28px); }
.datum-dialog-kopf { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; }
.datum-dialog-kopf h2 { margin: 5px 0 0; font-size: clamp(1.45rem, 5vw, 2rem); }
.datum-schliessen {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center;
  border: 1px solid var(--linie); border-radius: 50%; background: var(--grund);
  color: var(--text); font: inherit; font-size: 1.65rem; line-height: 1; cursor: pointer;
}
.datum-monatswahl {
  display: grid; grid-template-columns: 54px minmax(0, 1fr) minmax(112px, .8fr) 54px;
  gap: 10px; align-items: end; margin: 28px 0 22px;
}
.datum-monatswahl > button {
  width: 54px; height: 60px; display: grid; place-items: center;
  border: 2px solid var(--linie); border-radius: 18px; background: var(--grund);
  color: var(--dunkel); font: inherit; font-size: 1.85rem; font-weight: 750; cursor: pointer;
}
.datum-monatswahl label { position: relative; gap: 6px; color: var(--sek); font-size: .82rem; }
.datum-monatswahl label::after {
  content: "⌄"; position: absolute; right: 16px; top: calc(100% - 30px);
  transform: translateY(-50%);
  color: var(--dunkel); font-size: 1.25rem; font-weight: 850; line-height: 1;
  pointer-events: none;
}
.datum-monatswahl select {
  -webkit-appearance: none; appearance: none;
  width: 100%; min-height: 60px; padding: 13px 44px 13px 16px;
  border: 2px solid var(--linie); border-radius: 18px;
  background: color-mix(in srgb, var(--karte) 58%, var(--grund));
  color: var(--text); font: inherit; font-size: 1rem; font-weight: 750; cursor: pointer;
}
.datum-monatswahl select:hover, .datum-monatswahl > button:hover { border-color: var(--gruen); }
.datum-monatswahl select:focus-visible, .datum-monatswahl > button:focus-visible {
  border-color: var(--dunkel); outline: 0;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gruen-flaeche) 72%, transparent);
}
.datum-wochentage, .datum-tage { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.datum-wochentage { margin-bottom: 7px; }
.datum-wochentage span { text-align: center; color: var(--sek); font-size: .76rem; font-weight: 750; }
.datum-tage button, .datum-tag-leer {
  aspect-ratio: 1; min-width: 0; display: grid; place-items: center;
}
.datum-tage button {
  border: 0; border-radius: 50%; background: transparent; color: var(--text);
  font: inherit; font-weight: 650; cursor: pointer;
}
.datum-tage button:hover { background: var(--gruen-flaeche); color: var(--dunkel); }
.datum-tage button[aria-selected="true"] { background: var(--dunkel); color: var(--grund); }
.datum-tage button:disabled { color: color-mix(in srgb, var(--sek) 42%, transparent); cursor: not-allowed; }
.datum-dialog-fuss {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: 14px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--linie);
}
.datum-dialog-fuss p { margin: 0; color: var(--sek); font-size: .9rem; }
.datum-dialog-fuss > div { display: flex; flex-wrap: wrap; gap: 8px; }
.datum-dialog-fuss .hauptaktion, .datum-dialog-fuss .nebenaktion { min-height: 48px; border-radius: 999px; }
.datum-dialog-fuss button:disabled { opacity: .5; cursor: not-allowed; }
.passwort-regeln {
  display: flex; flex-wrap: wrap; gap: 8px 18px; margin: -3px 0 1px; padding: 0;
  list-style: none; color: var(--sek); font-size: .86rem;
}
.passwort-regeln li { position: relative; padding-left: 19px; }
.passwort-regeln li::before { content: "○"; position: absolute; left: 0; color: var(--sek); font-weight: 800; }
.passwort-regeln li.erfuellt { color: var(--dunkel); }
.passwort-regeln li.erfuellt::before { content: "✓"; color: var(--dunkel); }
.auth-bereich + .sicherheit {
  width: min(100%, 680px); margin: -18px auto 36px; padding: 18px 20px;
  color: var(--sek); font-size: .9rem; text-align: center;
}
.auth-bereich + .sicherheit strong { display: block; color: var(--text); }

@media (prefers-color-scheme: dark) {
  .auth-karte { box-shadow: 0 28px 80px rgba(0, 0, 0, .22); }
}

@media (max-width: 620px) {
  .kopf { padding: 12px 16px; }
  main.schlicht { padding: 8px 14px 38px; }
  .auth-bereich { margin-top: 12px; }
  .auth-karte { padding: 24px 18px; border-radius: 24px; }
  .auth-wechsel { margin: 22px 0; }
  .auth-formular input[type="email"],
  .auth-formular input[type="password"],
  .auth-formular input[type="text"],
  .auth-formular input:not([type]),
  .auth-formular input[type="date"] { min-height: 56px; }
  .passwort-regeln { display: grid; gap: 5px; }
  .datum-dialog {
    width: min(450px, calc(100% - 20px)); max-width: none;
    max-height: calc(100dvh - 20px); margin: auto;
    border-radius: 26px; border-bottom: 1px solid var(--linie);
  }
  .datum-dialog-inhalt { padding: 22px 16px calc(22px + env(safe-area-inset-bottom)); }
  .datum-monatswahl { grid-template-columns: 52px minmax(0, 1fr) minmax(104px, .78fr) 52px; gap: 8px; }
  .datum-monatswahl > button { width: 52px; }
  .datum-wochentage, .datum-tage { gap: 4px; }
  .datum-dialog-fuss { align-items: stretch; }
  .datum-dialog-fuss > div { width: 100%; }
  .datum-dialog-fuss button { flex: 1; }
}

/* --- Interne Administration --- */
.verwaltungsraster { margin-top: 28px; }
.verwaltungsraster .kachel h2 { margin: 0; font-size: 1.15rem; }
/* display und gap gehoeren in die Klasse selbst.
   Bisher standen hier nur die Spalten; das Raster kam von der Regel
   `form { display: grid }`. Die Klasse funktionierte damit ausschliesslich
   direkt auf einem <form>. Auf einer <div> innerhalb eines Formulars - etwa
   um nur die Namensfelder nebeneinanderzustellen - blieb sie wirkungslos
   und alle Felder standen untereinander. */
.formular-zweispaltig {
  display: grid; gap: 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end;
}
.formular-zweispaltig .hauptaktion { grid-column: 1 / -1; justify-self: start; }
.zugang-einmal {
  border: 2px solid var(--dunkel);
  background: linear-gradient(145deg, var(--karte), color-mix(in srgb, var(--karte) 82%, var(--gruen-flaeche)));
}
.einmalpasswort, .aktionscode {
  display: inline-block; padding: 8px 12px; border-radius: 10px;
  background: var(--grund-tief); color: var(--text); font-size: 1.08rem;
  letter-spacing: .04em; overflow-wrap: anywhere;
}
.aktionscode { font-size: clamp(1rem, 4vw, 1.35rem); }
.mitarbeiterliste { display: grid; gap: 16px; }
.mitarbeiterkarte {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center;
  gap: 18px; margin-bottom: 0;
}
.mitarbeitername { margin: 0 0 4px; }
.mitarbeiterstatus { display: grid; justify-items: start; gap: 6px; }
.kompaktformular { margin: 0; }
.protokollzeile { grid-column: 1 / -1; margin: -4px 0 0; padding-top: 12px; border-top: 1px solid var(--linie); }

@media (max-width: 760px) {
  .formular-zweispaltig { grid-template-columns: 1fr; }
  .mitarbeiterkarte { grid-template-columns: 1fr; align-items: start; }
  .mitarbeiterkarte .kompaktformular button { width: 100%; }
}
input:focus-visible { border-color: var(--dunkel); }
.haken { grid-template-columns: 28px 1fr; align-items: start; }
.haken input { min-height: 24px; width: 24px; }

/* --- Meldungen --- */
.fehler, .erfolg, .hinweis, .warnung {
  border-radius: var(--radius-klein); padding: 16px 20px; margin: 0 0 20px;
}
.fehler { background: var(--koralle-flaeche); color: var(--koralle); font-weight: 600; }
.erfolg { background: var(--gruen-flaeche); color: var(--dunkel); font-weight: 600; }
.hinweis { background: var(--karte); border-left: 5px solid var(--gruen); border-radius: 0 var(--radius-klein) var(--radius-klein) 0; }
.warnung { background: var(--karte); border-left: 5px solid var(--koralle); border-radius: 0 var(--radius-klein) var(--radius-klein) 0; }
.hinweis p, .warnung p { margin: .4em 0 0; color: var(--sek); }
.klein { font-size: .93rem; color: var(--sek); }

/* --- Angaben und Listen --- */
.angaben { display: grid; grid-template-columns: minmax(150px, auto) 1fr; gap: 12px 26px; margin: 0; }
.angaben dt { font-weight: 700; }
.angaben dd { margin: 0; color: var(--sek); }
.konto-aktionsliste { list-style: none; margin: 0; padding: 0; }
.konto-aktionsliste li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px;
  align-items: center; padding: 18px 0; border-bottom: 1px solid var(--linie);
}
.konto-aktionsliste li:first-child { padding-top: 0; }
.konto-aktionsliste li:last-child { padding-bottom: 0; border-bottom: 0; }
.konto-aktionsliste li > div { display: grid; gap: 3px; }
.konto-aktionsliste li span { color: var(--sek); }
.konto-aktionsliste li > a {
  display: inline-flex; align-items: center; min-height: 52px; padding: 0 8px;
  color: var(--dunkel); font-weight: 750; text-decoration: none;
}
.konto-rechtliches summary {
  min-height: 52px; display: flex; align-items: center; cursor: pointer;
  color: var(--dunkel); font-size: 1.15rem; font-weight: 800;
}
.konto-rechtliches[open] summary { margin-bottom: 24px; }
.formular-zweispaltig .formular-breit,
.formular-zweispaltig .volle-breite { grid-column: 1 / -1; }

.punkte { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.punkte li { position: relative; padding-left: 32px; }
.punkte li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 22px; text-align: center; color: var(--dunkel); font-weight: 800; }
.punkte.minus li::before { content: "✕"; color: var(--koralle); }
/* Anleitungen bekommen Nummern, keine Häkchen. Ein Häkchen vor einem Schritt
   liest sich wie „schon erledigt" – genau die Verwirrung, die wir bei einer
   Schritt-für-Schritt-Anleitung nicht brauchen. */
.schritte { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; counter-reset: schritt; }
.schritte li { position: relative; padding-left: 38px; counter-increment: schritt; }
.schritte li::before {
  content: counter(schritt);
  position: absolute; left: 0; top: .1em;
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--gruen-flaeche);
  color: var(--dunkel);
  font-size: .88rem; font-weight: 800;
}

/* --- Planübersicht nach Anmeldung --- */
.plan-raster {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px; margin: 28px 0 20px; align-items: stretch;
}
.plan-karte {
  display: flex; flex-direction: column; min-width: 0;
  padding: 28px; border: 1px solid var(--linie); border-radius: var(--radius);
  background: linear-gradient(145deg, var(--karte), color-mix(in srgb, var(--karte) 94%, var(--grund-tief)));
}
.plan-karte.plan-aktiv { border: 2px solid var(--dunkel); }
.plan-premium { background: color-mix(in srgb, var(--karte) 88%, var(--gruen-flaeche)); }
.plan-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.plan-name { margin: 0 0 5px; color: var(--dunkel); font-weight: 800; }
.plan-kopf h2 { margin: 0; font-size: clamp(2.2rem, 5vw, 3.2rem); letter-spacing: -.045em; }
.plan-zeit { margin: 4px 0 0; color: var(--sek); }
.plan-lead { color: var(--sek); }
.plan-karte h3 { margin: 12px 0; }
.plan-karte .punkte { margin-bottom: 24px; }
.plan-karte .hauptaktion { align-self: flex-start; margin-top: auto; }
.plan-lange-liste { gap: 10px; }
.plan-datenschutz { margin-bottom: 20px; }

/* --- Ruhige Abo-Übersicht nach einer klaren, einspaltigen Planlogik --- */
.abo-seitenkopf { max-width: 780px; margin-bottom: 34px; }
.abo-seitenkopf h1 { margin-top: .16em; }
.abo-seitenkopf .einleitung { max-width: 58ch; }
.abo-planansicht {
  max-width: 860px; padding: clamp(28px, 5vw, 52px);
  border: 1px solid var(--linie); border-radius: 30px;
  background: linear-gradient(145deg, var(--karte), color-mix(in srgb, var(--karte) 91%, var(--grund-tief)));
  box-shadow: 0 24px 70px rgba(33, 53, 42, .09);
}
.abo-planansicht { margin-bottom: 24px; }
.abo-plan-kopf {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px; margin-bottom: 34px;
}
.abo-plan-kopf h2,
.abo-upgrade-kopf h2 { margin: 0; font-size: clamp(1.8rem, 4vw, 2.65rem); }
.abo-ueberzeile {
  margin: 0 0 7px; color: var(--dunkel); font-size: .82rem;
  font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.abo-preis { margin: 6px 0 0; color: var(--sek); font-size: 1.15rem; }
.abo-statuszeile {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; margin: 0 0 34px; overflow: hidden;
  border: 1px solid var(--linie); border-radius: var(--radius-klein);
  background: var(--linie);
}
.abo-statuszeile > div { padding: 16px 18px; background: var(--grund); }
.abo-statuszeile dt { color: var(--sek); font-size: .88rem; }
.abo-statuszeile dd { margin: 2px 0 0; font-weight: 750; }
.abo-enthalten { border-top: 1px solid var(--linie); padding-top: 30px; }
.abo-enthalten > h3 { margin: 0 0 22px; font-size: 1.25rem; }
.abo-gruppenname { margin: 25px 0 10px; color: var(--sek); font-size: .95rem; font-weight: 700; }
.abo-leistungsliste {
  list-style: none; display: grid; gap: 11px; margin: 0; padding: 0;
}
.abo-leistungsliste li {
  position: relative; padding-left: 28px; line-height: 1.5;
}
.abo-leistungsliste li::before {
  content: ""; position: absolute; left: 2px; top: .68em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--dunkel);
}
.abo-planansicht > .klein { margin: 30px 0 0; }
.abo-stern {
  width: 62px; height: 62px; flex: none; display: grid; place-items: center;
  border-radius: 18px; background: var(--gruen-flaeche); color: var(--dunkel);
}
.abo-auswahl {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 16px; align-items: center; padding: 22px;
  border: 3px solid var(--dunkel); border-radius: 22px;
  background: color-mix(in srgb, var(--karte) 84%, var(--gruen-flaeche));
  box-shadow: 0 14px 34px rgba(43, 77, 57, .10);
}
.abo-auswahlpunkt {
  width: 25px; height: 25px; display: grid; place-items: center;
  border-radius: 50%; background: var(--dunkel); color: var(--grund);
  font-size: .85rem; font-weight: 900;
}
.abo-auswahl > div { display: grid; gap: 2px; }
.abo-auswahl > div > strong { font-size: 1.15rem; }
.abo-auswahl > div > span { color: var(--sek); font-size: .94rem; }
.abo-auswahl > p { margin: 0; text-align: right; }
.abo-auswahl > p strong { display: block; font-size: 1.35rem; }
.abo-auswahl > p span { display: block; color: var(--sek); font-size: .86rem; }
.abo-premiumliste { margin: 28px 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; }
.abo-upgrade-aktion { width: 100%; }
.abo-datenschutz { max-width: 860px; margin: 0 0 28px; }
.abo-kurzlinks {
  display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center;
  margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--linie);
}
.abo-kurzlinks a, .abo-textlink, .abo-verwaltung-link a {
  color: var(--dunkel); font: inherit; font-weight: 750; text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 4px;
}
.abo-textlink { min-height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.abo-verwaltung-link { max-width: 860px; margin: 18px 0 0; font-size: .9rem; }
.abo-fussnotiz { max-width: 78ch; margin: 24px 0 8px; color: var(--sek); font-size: .9rem; }
.abo-dialog {
  width: min(760px, calc(100% - 32px)); max-height: calc(100dvh - 32px); overflow: auto;
  padding: 0; border: 1px solid var(--linie); border-radius: 28px;
  color: var(--text); background: var(--karte); box-shadow: 0 30px 100px rgba(0, 0, 0, .32);
}
.abo-dialog::backdrop { background: rgba(10, 18, 14, .64); backdrop-filter: blur(5px); }
.abo-dialog > form { position: sticky; top: 0; z-index: 2; height: 0; margin: 0; }
.abo-dialog-schliessen {
  position: absolute; top: 16px; right: 16px; width: 44px; height: 44px;
  display: grid; place-items: center; border: 1px solid var(--linie); border-radius: 50%;
  color: var(--text); background: color-mix(in srgb, var(--karte) 92%, transparent);
  font-size: 1.8rem; line-height: 1; cursor: pointer;
}
.abo-dialog-inhalt { padding: clamp(30px, 6vw, 58px); }
.abo-dialog-inhalt .abo-stern { margin-bottom: 20px; }
.abo-dialog-inhalt h2 { margin: 6px 56px 10px 0; font-size: clamp(1.8rem, 5vw, 2.7rem); }
.abo-dialog-inhalt > p:not(.klein, .abo-ueberzeile) { color: var(--sek); }
.abo-dialog-inhalt > .klein { margin: 16px auto 0; text-align: center; }
.abo-dialog-code { margin-top: 12px; text-align: center; }
.abo-dialog-code summary {
  display: inline-flex; min-height: 44px; align-items: center; cursor: pointer;
  color: var(--sek); font-size: .86rem; text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.abo-dialog-code > div {
  max-width: 480px; margin: 4px auto 0; padding: 18px;
  border: 1px solid var(--linie); border-radius: var(--radius-klein);
  background: var(--grund); text-align: left;
}
.abo-dialog-code form { margin: 0; gap: 12px; }
.abo-dialog-code label { font-size: .9rem; }
.abo-dialog-code .nebenaktion { width: 100%; }
.abo-dialog-code .fehler { margin-bottom: 12px; font-size: .9rem; }
.abo-dialog-code .klein { margin: 8px 0 0; }

@media (prefers-color-scheme: dark) {
  .abo-planansicht {
    box-shadow: 0 26px 70px rgba(0, 0, 0, .18);
  }
  .abo-auswahlpunkt { color: #16201B; }
}

@media (max-width: 760px) {
  .plan-raster { grid-template-columns: 1fr; }
  .plan-karte { padding: 24px 21px; }
  .plan-kopf { flex-wrap: wrap; }
  .abo-planansicht { padding: 25px 21px; border-radius: 24px; }
  .abo-plan-kopf { flex-direction: column; margin-bottom: 26px; }
  .abo-statuszeile, .abo-premiumliste { grid-template-columns: 1fr; }
  .abo-auswahl { grid-template-columns: auto 1fr; padding: 19px 17px; }
  .abo-auswahl > p { grid-column: 2; text-align: left; }
  .abo-datenschutz { margin-bottom: 26px; }
  .abo-dialog-inhalt { padding: 28px 21px; }
}

.sitzungsliste { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 12px; }
.sitzungsliste li {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
  border: 1px solid var(--linie); border-radius: var(--radius-klein); padding: 16px 18px;
}
.sitzungsliste span { display: block; color: var(--sek); font-size: .95rem; }
.sitzungsliste form { margin: 0; }

.grundsaetze { display: flex; flex-wrap: wrap; gap: 26px; }
.grundsaetze > div { display: grid; justify-items: center; text-align: center; gap: 6px; min-width: 130px; }
.grundsaetze span { font-size: .93rem; color: var(--sek); }

/* --- Fußzeile --- */
.fuss {
  border-top: 1px solid var(--linie); padding: 24px 34px; display: flex;
  flex-wrap: wrap; gap: 12px 28px; align-items: center;
}
.fuss nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.fuss a { display: inline-flex; align-items: center; min-height: 44px; font-size: .95rem; }
.fuss .notruf { margin: 0 0 0 auto; color: var(--koralle); font-size: .95rem; }
.fuss-abmelden { margin-left: auto; color: var(--text); font-weight: 650; }

/* --- Schmale Displays --- */
@media (max-width: 900px) {
  .app-kopf {
    flex-wrap: nowrap; gap: 10px; padding: 8px 14px;
  }
  .app-kopf .marke { min-height: 44px; }
  .app-kopf .marke-bild { height: 27px; }
  .app-kopf .bereichsname {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: .82rem;
  }
  .app-menue summary { min-height: 48px; padding: 6px 13px; }
  .kacheln { grid-template-columns: 1fr; }
  main#inhalt { padding: 24px 20px 48px; max-width: 100%; }
  .statusband, .karte, .kachel { padding: 20px; }
  .statusband { flex-direction: column; align-items: flex-start; }
  .grundsaetze { gap: 18px; }
  .grundsaetze > div { min-width: 96px; }
  .angaben { grid-template-columns: 1fr; gap: 2px 0; }
  .angaben dd { margin-bottom: 14px; }
  .konto-aktionsliste li { grid-template-columns: 1fr; gap: 4px; }
  .konto-aktionsliste li > a { padding: 0; }
  .fuss { padding: 20px; }
  .fuss-abmelden { margin-left: 0; width: 100%; }
  .fuss .notruf { margin-left: 0; width: 100%; }
  .bereichsname { padding-left: 0; border-left: 0; }
}

@media (max-width: 560px) {
  body { font-size: 1rem; }
  .app-kopf .bereichsname { display: none; }
  .app-menue > nav { right: -2px; }
  main#inhalt { padding: 18px 14px 38px; }
  .abo-seitenkopf { margin-bottom: 20px; }
  .abo-seitenkopf .einleitung { margin-bottom: 0; font-size: 1rem; }
  .abo-planansicht { padding: 23px 19px; border-radius: 22px; }
  .abo-plan-kopf { gap: 14px; margin-bottom: 20px; }
  .abo-plan-kopf h2 { font-size: 1.75rem; }
  .abo-enthalten { padding-top: 22px; }
  .abo-enthalten > h3 { margin-bottom: 15px; }
  .abo-gruppenname { margin-top: 18px; }
  .abo-leistungsliste { gap: 9px; }
  .abo-leistungsliste li { padding-left: 24px; line-height: 1.42; }
  .abo-planansicht > .klein { margin-top: 22px; }
  .abo-kurzlinks { margin-top: 20px; padding-top: 14px; }
  .abo-datenschutz { padding: 16px 18px; font-size: .94rem; }
  .abo-dialog { width: calc(100% - 16px); max-height: calc(100dvh - 16px); border-radius: 22px; }
  .abo-dialog-inhalt { padding: 24px 18px; }
  .abo-dialog-inhalt h2 { margin-right: 42px; font-size: 1.75rem; }
  .abo-dialog-schliessen { top: 10px; right: 10px; }
  .abo-auswahl { gap: 10px; padding: 15px 13px; }
  .abo-auswahl > div > strong { font-size: 1rem; }
  .abo-auswahl > div > span { font-size: .82rem; }
  .abo-premiumliste { margin: 22px 0; }
  .abo-dialog-code > div { padding: 14px; }
  .fuss { padding: 18px 14px; }
}

@media (prefers-contrast: more) {
  :root { --linie: #55645E; --sek: #3C4A45; }
  .karte, .kachel, .statusband { border-width: 2px; }
}

/* Aktivierungscode: gut ablesbar, klar als Einmalgeheimnis erkennbar. */
.code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.15rem; font-weight: 700; letter-spacing: .06em;
  background: var(--grund-tief); padding: 6px 12px; border-radius: 10px;
  display: inline-block;
}

/* QR-Code: heller Träger, damit er auch im Dunkelmodus scannbar bleibt. */
.qr {
  display: block; background: #FFFFFF; padding: 10px;
  border-radius: var(--radius-klein); border: 1px solid var(--linie);
  width: 220px; height: 220px;
}

/* =====================================================================
   Supportbereich
   ===================================================================== */

.bereich-support {
  --grund: #F3F6F3; --grund-tief: #E7EEE9; --karte: #FFFFFF;
  --text: #20352A; --sek: #617068; --gruen: #668F76; --dunkel: #35634B;
  --linie: #CCD9D0; --gruen-flaeche: #E1EEE5;
  --koralle: #A7432F; --koralle-flaeche: #F9E4DE;
  --radius: 18px; --radius-klein: 12px;
  background-image: linear-gradient(145deg, #F1F6F2 0%, #F8F7F2 56%, #F4EEE8 100%);
}
@media (prefers-color-scheme: dark) {
  .bereich-support {
    --grund: #15201A; --grund-tief: #202D25; --karte: #253129;
    --text: #F2F5F2; --sek: #BEC9C1; --gruen: #9FC6AA; --dunkel: #B1D5BA;
    --linie: #46584D; --gruen-flaeche: #304A39;
    --koralle: #F1A08D; --koralle-flaeche: #503128;
    background-image: linear-gradient(145deg, #132019, #18231D 55%, #20231F);
  }
}
.bereich-support .karte { box-shadow: 0 8px 26px rgba(33, 58, 44, .045); }
.bereich-support label { color: var(--text); font-size: .94rem; gap: 6px; }
.bereich-support input:not([type]), .bereich-support input[type="email"], .bereich-support input[type="password"],
.bereich-support input[type="text"], .bereich-support input[type="number"],
.bereich-support input[type="date"], .bereich-support input[type="search"],
.bereich-support input[type="tel"], .bereich-support input[type="url"],
.bereich-support select, .bereich-support textarea {
  width: 100%; min-height: 52px; padding: 11px 14px;
  border: 2px solid color-mix(in srgb, var(--linie) 88%, var(--dunkel)); border-radius: 11px;
  background-color: color-mix(in srgb, var(--karte) 82%, var(--grund-tief));
  color: var(--text); font: inherit; line-height: 1.35;
  box-shadow: inset 0 1px 1px rgba(28, 53, 39, .035);
}
.bereich-support select {
  -webkit-appearance: none; appearance: none; padding-right: 44px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--dunkel) 50%),
    linear-gradient(135deg, var(--dunkel) 50%, transparent 50%);
  background-position: calc(100% - 21px) 23px, calc(100% - 15px) 23px;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
.bereich-support input::placeholder, .bereich-support textarea::placeholder {
  color: color-mix(in srgb, var(--sek) 78%, transparent); opacity: 1;
}
.bereich-support textarea { min-height: 126px; resize: vertical; line-height: 1.5; }
.bereich-support input:hover, .bereich-support select:hover, .bereich-support textarea:hover {
  border-color: color-mix(in srgb, var(--dunkel) 58%, var(--linie));
}
.bereich-support input:focus, .bereich-support select:focus, .bereich-support textarea:focus {
  border-color: var(--dunkel); outline: 0;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gruen-flaeche) 82%, transparent);
}
.bereich-support .hauptaktion, .bereich-support .nebenaktion, .bereich-support .warnaktion {
  min-height: 50px; border-radius: 11px; padding: 11px 18px;
}
.feldhinweis { color: var(--sek); font-size: .8rem; font-weight: 500; line-height: 1.35; }

/* Der interne Bereich ist eine Arbeitsoberflaeche: auf grossen Displays
   bleibt die Navigation sichtbar, waehrend nur der Inhalt scrollt. */
@media (min-width: 1050px) {
  .bereich-support .app-kopf { min-height: 68px; padding-block: 8px; }
  .bereich-support .app-menue { display: none; }
  .support-rahmen {
    display: grid; grid-template-columns: 228px minmax(0, 1fr);
    width: min(100%, 1520px); margin: 0 auto;
  }
  .support-seitenleiste {
    position: sticky; top: 68px; align-self: start; height: calc(100dvh - 68px);
    overflow-y: auto; padding: 24px 14px 28px;
    border-right: 1px solid var(--linie);
    background: color-mix(in srgb, var(--karte) 52%, transparent);
  }
  .support-seitenleiste .app-menue-gruppe { padding: 3px 0 12px; }
  .support-seitenleiste .app-menue-gruppe + .app-menue-gruppe { border-top: 1px solid var(--linie); padding-top: 12px; }
  .support-seitenleiste h2 {
    margin: 0; padding: 0 12px 5px; color: var(--sek); font-size: .73rem;
    letter-spacing: .09em; text-transform: uppercase;
  }
  .support-seitenleiste ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
  .support-seitenleiste a {
    display: flex; align-items: center; gap: 11px; min-height: 46px; padding: 7px 11px;
    border-radius: 13px; color: var(--text); text-decoration: none; font-size: .94rem; font-weight: 680;
  }
  .support-seitenleiste a:hover { background: var(--grund-tief); }
  .support-seitenleiste a[aria-current="page"] { background: var(--gruen-flaeche); color: var(--dunkel); }
  .support-seitenleiste svg { width: 21px; height: 21px; flex: none; }
  .support-seitenleiste .app-menue-abmelden { margin-top: 10px; border-top: 1px solid var(--linie); border-radius: 0; }
  .bereich-support main#inhalt { width: 100%; max-width: 1320px; padding: 26px 32px 48px; }
}
@media (max-width: 1049px) { .support-seitenleiste { display: none; } }

.bereich-support h1 { font-size: clamp(1.8rem, 3vw, 2.5rem); }
.support-seitenkopf {
  display: flex; align-items: end; justify-content: space-between; gap: 18px;
  margin-bottom: 8px;
}
.support-seitenkopf h1, .support-seitenkopf p { margin-bottom: 0; }
.support-seitenkopf .hauptaktion { flex: none; }
.support-schnellwahl { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 22px; }
.support-schnellwahl .kachel { min-height: 190px; padding: 21px; }
.support-schnellwahl .kachel-primaer { border-color: color-mix(in srgb, var(--gruen) 65%, var(--linie)); }
.support-hinweise {
  margin-top: 6px; border: 1px solid var(--linie); border-radius: var(--radius-klein);
  background: color-mix(in srgb, var(--karte) 76%, transparent);
}
.support-hinweise summary, .support-abschnitt > summary, .mitarbeiter-aktionen > summary {
  min-height: 52px; display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 12px 18px; cursor: pointer; color: var(--text); font-weight: 760;
}
.support-hinweise > div { padding: 0 18px 14px; }
.support-hinweise p { margin: .45rem 0; }

.konto-kompaktleiste {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px;
  margin: 0 0 14px;
}
.konto-verifizierung { max-width: 820px; margin-top: 20px; border-left: 5px solid var(--dunkel); }
.konto-verifizierung-kopf { display: flex; align-items: start; justify-content: space-between; gap: 18px; }
.konto-verifizierung-kopf h2 { margin-top: 3px; }
.konto-verifizierung-kopf .aktionslink { margin: 0; }
.pruefform { grid-template-columns: minmax(220px, 1fr) auto; align-items: end; }
.kontotreffer-schutz { color: var(--sek); font-size: .9rem; }
.konto-kompaktleiste > div {
  min-width: 0; padding: 14px 16px; border: 1px solid var(--linie);
  border-radius: var(--radius-klein); background: var(--karte);
}
.konto-kompaktleiste span, .konto-kompaktleiste strong { display: block; overflow-wrap: anywhere; }
.konto-kompaktleiste span { color: var(--sek); font-size: .78rem; }
.konto-kompaktleiste strong { margin-top: 3px; font-size: .96rem; }
@media (max-width: 1380px) and (min-width: 621px) {
  .konto-kompaktleiste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.support-abschnitt { padding: 0; margin-bottom: 12px; overflow: clip; }
.support-abschnitt > summary { list-style: none; font-size: 1.08rem; }
.support-abschnitt > summary::-webkit-details-marker { display: none; }
/* Plus und Minus als Form, nicht als Schriftzeichen.
   Vorher stand hier content: "+" in einem zentrierten Raster. Das Zeichen
   sass trotzdem sichtbar zu hoch im Kreis: Ein Pluszeichen liegt in fast
   jeder Schrift auf der mathematischen Achse, also oberhalb der optischen
   Mitte, und das Minuszeichen noch weiter oben. Zwei gezeichnete Balken
   sitzen dagegen exakt mittig - und der waagerechte Balken bleibt beim
   Aufklappen an genau derselben Stelle stehen, statt zu springen.
   Nebenbei liest eine Sprachausgabe jetzt kein "Plus" mehr vor; die
   Bedeutung steht ohnehin im Text daneben. */
.support-abschnitt > summary::before {
  content: ""; width: 28px; height: 28px; flex: none; border-radius: 50%;
  background:
    linear-gradient(var(--dunkel), var(--dunkel)) center / 12px 2px no-repeat,
    linear-gradient(var(--dunkel), var(--dunkel)) center / 2px 12px no-repeat,
    var(--gruen-flaeche);
}
.support-abschnitt[open] > summary::before {
  background:
    linear-gradient(var(--dunkel), var(--dunkel)) center / 12px 2px no-repeat,
    var(--gruen-flaeche);
}
.support-abschnitt > summary > span:first-child { margin-right: auto; }
.summary-hinweis { color: var(--sek); font-size: .82rem; font-weight: 560; }
.support-abschnitt-inhalt { padding: 4px 20px 20px; border-top: 1px solid var(--linie); }
/* Kopfzeile eines Abschnitts: Titel links, Aendern-Knopf rechts.
   align-items: center haelt den Knopf auf der Grundlinie der Ueberschrift,
   auch wenn diese in zwei Zeilen laeuft. */
.abschnitt-kopfzeile {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin: 18px 0 4px;
}
.abschnitt-kopfzeile h3 { margin: 0; font-size: 1.05rem; }
/* Der Aendern-Knopf ist eine Nebenhandlung und soll die Ueberschrift
   daneben nicht ueberragen. Der Bereichsselektor muss mit, sonst gewinnt
   `.bereich-support .nebenaktion` (0,2,0) gegen die reine Klasse. */
.aktion-klein, .bereich-support .aktion-klein {
  min-height: 42px; padding: 9px 16px; font-size: .92rem;
}
.bearbeitungsformular {
  margin-top: 18px; padding: 20px; border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  background: color-mix(in srgb, var(--grund-tief) 45%, var(--karte));
}
.bearbeitungsformular > .klein:first-of-type { margin-top: 0; }
.bearbeitung-fuss {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--linie);
}
.bearbeitung-fuss .klein { margin: 0; }
.zeichenzaehler { display: block; margin-top: 6px; color: var(--sek); font-size: .82rem; }
/* Nie allein ueber die Farbe: Der Text sagt selbst, wie viel noch fehlt. */
.zeichenzaehler-fehlt { color: var(--koralle); }
.support-abschnitt-inhalt > h2:first-child { margin-top: 18px; }
.support-abschnitt-inhalt form { margin-top: 16px; }
.support-formular-abschnitt { margin-top: 22px; }
.mitarbeiter-aktionen { width: 100%; border-top: 1px solid var(--linie); }
.mitarbeiter-aktionen > summary { padding-inline: 0; color: var(--dunkel); }
.mitarbeiter-aktionen .aktionsgruppe { padding-bottom: 4px; }

.bereich-support .vorgangsliste { gap: 7px; }
.bereich-support .vorgangsliste a { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 3px 14px; padding: 12px 16px; }
.bereich-support .vorgangsliste .status-marke { grid-row: 1 / span 3; }
.bereich-support .vorgangsliste .vorgang-kopf,
.bereich-support .vorgangsliste > li > a > strong { grid-column: 2 / -1; }
.bereich-support .vorgangsliste .absender { grid-column: 2; }
.bereich-support .vorgangsliste .zeit { grid-column: 3; white-space: nowrap; }

.unterzeile { color: var(--sek); margin-top: -.4rem; }

.filterleiste {
  display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.25rem 0;
}
.filterleiste a {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .45rem .9rem; border-radius: 999px;
  border: 1px solid var(--linie); color: var(--text);
  text-decoration: none; font-size: .95rem;
}
.filterleiste a[aria-current="page"] {
  background: var(--dunkel); border-color: var(--dunkel); color: var(--karte);
}
.filterleiste .zahl {
  min-width: 1.4em; padding: 0 .35em; border-radius: 999px;
  background: var(--gruen-flaeche); color: var(--text);
  font-size: .8rem; text-align: center;
}
.filterleiste a[aria-current="page"] .zahl { background: rgba(255,255,255,.25); color: inherit; }

.status-marke {
  display: inline-block; padding: .15rem .6rem; border-radius: 999px;
  font-size: .78rem; letter-spacing: .02em;
  background: var(--gruen-flaeche); color: var(--text);
}
.status-neu { background: var(--koralle-flaeche); color: var(--koralle); }
.status-in_arbeit { background: var(--beige); color: var(--text); }
.status-beantwortet { background: var(--gruen-flaeche); color: var(--dunkel); }
.status-geschlossen { background: transparent; border: 1px solid var(--linie); color: var(--sek); }

.vorgangsliste { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.vorgangsliste .karte { padding: 0; }
.vorgangsliste a {
  display: grid; gap: .3rem; padding: 1rem 1.25rem;
  text-decoration: none; color: inherit; border-radius: inherit;
}
.vorgangsliste a:hover { background: var(--grund-tief); }
.vorgangsliste strong { font-size: 1.05rem; }
.vorgangsliste .absender { color: var(--text); font-size: .95rem; }
.vorgangsliste .hat-konto { color: var(--dunkel); }
.vorgangsliste .zeit, .antwort .zeit { color: var(--sek); font-size: .85rem; }
.vorgangsliste .status-marke { justify-self: start; }

.karte.leer { color: var(--sek); text-align: center; padding: 2rem 1.25rem; }

/* Fremder Text: Umbruch erzwingen, damit eine lange Zeichenkette das
   Layout nicht aufreisst. */
.nachrichtentext {
  white-space: pre-wrap; overflow-wrap: anywhere;
  line-height: 1.6; margin: 0;
}

.werte { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1.25rem; margin: 0; }
.werte dt { color: var(--sek); }
.werte dd { margin: 0; overflow-wrap: anywhere; }

.antwort {
  border-top: 1px solid var(--linie); padding-top: 1rem; margin-top: 1rem;
}
.antwort:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }

.suchform, .statusform { display: flex; flex-wrap: wrap; gap: .75rem; align-items: end; }
.suchform label, .statusform label { flex: 1 1 16rem; margin: 0; }

.schluessel code {
  font-size: 1.1rem; letter-spacing: .12em; overflow-wrap: anywhere;
}
img.qr {
  display: block; margin: 1.25rem 0; background: #FFFFFF;
  padding: .75rem; border-radius: var(--radius-klein);
  max-width: 100%; height: auto;
}

@media (max-width: 620px) {
  .werte { grid-template-columns: 1fr; gap: .1rem .5rem; }
  .werte dd { margin-bottom: .6rem; }
  .support-seitenkopf { align-items: stretch; flex-direction: column; }
  .support-seitenkopf .hauptaktion { width: 100%; }
  .support-schnellwahl, .konto-kompaktleiste { grid-template-columns: 1fr; }
  .support-schnellwahl .kachel { min-height: 0; }
  .summary-hinweis { display: none; }
  .bereich-support .vorgangsliste a { grid-template-columns: auto minmax(0, 1fr); }
  .bereich-support .vorgangsliste .zeit { grid-column: 2; white-space: normal; }
}

@media print {
  body.druckt-zugang * { visibility: hidden !important; }
  body.druckt-zugang .druckbereich,
  body.druckt-zugang .druckbereich * { visibility: visible !important; }
  body.druckt-zugang .druckbereich {
    position: absolute; inset: 0 auto auto 0; width: 100%;
    color: #17261f; background: #fff; border: 0; box-shadow: none;
    padding: 28mm 22mm;
  }
  body.druckt-zugang .nicht-drucken { display: none !important; }
  body.druckt-zugang .druckbereich::before {
    content: 'GesundPass · Persönliche Zugangsdaten';
    display: block; margin-bottom: 12mm; color: #315d48;
    font-size: 18pt; font-weight: 750;
  }
}

/* ---- Einladungen und Ereignisse ---- */
.einladungsliste, .ereignisliste {
  list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .55rem;
}
.einladungsliste li, .ereignisliste li {
  display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: baseline;
  padding-bottom: .55rem; border-bottom: 1px solid var(--linie);
}
.einladungsliste li:last-child, .ereignisliste li:last-child {
  border-bottom: 0; padding-bottom: 0;
}
.ereignisliste .zeit { min-width: 11rem; color: var(--sek); font-size: .9rem; }
.ereignisliste .ereignis { overflow-wrap: anywhere; }
.status-pending { background: var(--beige); color: var(--text); }
.status-accepted { background: var(--gruen-flaeche); color: var(--dunkel); }
.status-declined, .status-revoked, .status-expired {
  background: transparent; border: 1px solid var(--linie); color: var(--sek);
}

@media (max-width: 620px) {
  .ereignisliste .zeit { min-width: 100%; }
}

/* ---- Arbeitskopien ---- */
.kopie { display: grid; gap: .35rem; padding: 1rem 1.25rem; }
.kopie strong { font-size: 1.05rem; }
.kopie .status-marke { justify-self: start; }
.kopie-aktionen { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .5rem; }
.inline-form { display: inline; }
.abstand-oben { margin-top: 1.25rem; }

/* ---- Ruhige Postfach- und Kontoverwaltung ---- */
.seitenaktionen { display: flex; justify-content: flex-start; margin: 1rem 0 1.25rem; }
.postfach-filter {
  margin: 1.25rem 0 .75rem; padding: 1rem 1.1rem;
  border: 1px solid var(--linie); border-radius: var(--radius-klein);
  background: color-mix(in srgb, var(--karte) 88%, transparent);
}
.postfach-werkzeugleiste {
  margin: 20px 0 10px; padding: 14px 16px;
  border: 1px solid var(--linie); border-radius: var(--radius-klein);
  background: color-mix(in srgb, var(--karte) 90%, transparent);
}
.postfach-werkzeugleiste form { margin: 0; }
.bereich-support .postfach-werkzeugleiste .filterformular {
  display: grid; grid-template-columns: minmax(240px, 1.25fr) minmax(260px, 1fr) auto;
  gap: 12px; align-items: end;
}
.postfach-statusfilter { margin: 10px 0 16px; }
.postfach-listenkopf {
  display: grid; grid-template-columns: 112px minmax(260px, 1.6fr) minmax(180px, .8fr) minmax(180px, .8fr) 28px;
  gap: 14px; padding: 0 16px 7px; color: var(--sek); font-size: .75rem;
  font-weight: 750; letter-spacing: .055em; text-transform: uppercase;
}
.bereich-support .postfachliste { gap: 5px; }
.bereich-support .postfachliste > li { border-radius: 13px; box-shadow: none; }
.bereich-support .postfachliste a {
  display: grid; grid-template-columns: 112px minmax(260px, 1.6fr) minmax(180px, .8fr) minmax(180px, .8fr) 28px;
  gap: 14px; align-items: center; min-height: 72px; padding: 10px 16px;
}
.bereich-support .postfachliste .status-marke { grid-row: auto; justify-self: start; }
.postfachliste .vorgang-inhalt, .postfach-spalte { min-width: 0; display: grid; gap: 2px; }
.postfachliste .vorgang-inhalt strong, .postfach-spalte strong,
.postfachliste .vorgang-inhalt span, .postfach-spalte span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.postfachliste .vorgang-inhalt strong { font-size: .98rem; }
.postfachliste .absender, .postfach-spalte { color: var(--sek); font-size: .82rem; }
.postfach-spalte strong { color: var(--text); font-size: .86rem; font-weight: 680; }
.postfach-pfeil { color: var(--dunkel); font-size: 1.2rem; text-align: right; }
.postfach-anzahl { margin: 10px 2px 0; color: var(--sek); font-size: .85rem; }
.seitennavigation {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin-top: 16px; color: var(--sek); font-size: .9rem;
}
.seitennavigation .aktionslink { margin: 0; }

.vorgang-arbeitsflaeche {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start;
}
.vorgang-hauptspalte { min-width: 0; }
.vorgang-seitenspalte { display: grid; gap: 14px; position: sticky; top: 92px; }
.vorgang-seitenspalte .karte { margin: 0; padding: 20px; }
.vorgang-seitenspalte .werte { grid-template-columns: 92px minmax(0, 1fr); font-size: .91rem; }
.vorgang-seitenspalte form { margin-top: 12px; gap: 12px; }
.vorgang-nachricht { min-height: 180px; }
.antwort-verfassen textarea { min-height: 180px; }
.breite-aktion { width: 100%; margin: 16px 0 0; }
.filterformular { display: flex; gap: .75rem; align-items: end; }
.filterformular label { flex: 1; margin: 0; }
.vorgang-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.richtung { color: var(--sek); font-size: .8rem; font-weight: 650; white-space: nowrap; }

.erklaerschritte {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem;
  margin: 1.5rem 0 1rem;
}
.erklaerschritte > div {
  display: grid; grid-template-columns: 2rem 1fr; gap: .2rem .65rem;
  padding: 1rem; border: 1px solid var(--linie); border-radius: var(--radius-klein);
  background: var(--karte);
}
.erklaerschritte > div > span {
  grid-row: 1 / span 2; display: grid; place-items: center; align-self: start;
  width: 2rem; height: 2rem; border-radius: 50%; background: var(--gruen-flaeche);
  color: var(--dunkel); font-weight: 800;
}
.erklaerschritte p { margin: .25rem 0 0; color: var(--sek); font-size: .9rem; }
.postfachkarte { display: grid; gap: 1rem; }
.postfachkarte-kopf { display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.postfachkarte-kopf > div { display: grid; gap: .2rem; min-width: 0; }
.postfachkarte-kopf span:not(.status-marke) { color: var(--sek); overflow-wrap: anywhere; }
.postfachkarte details { border-top: 1px solid var(--linie); padding-top: .8rem; }
.postfachkarte summary, .profil-bearbeiten summary {
  cursor: pointer; color: var(--dunkel); font-weight: 700; min-height: 44px;
  display: flex; align-items: center;
}
.postfach-einstellungen { display: grid; gap: .9rem; padding-top: .8rem; }

.suchtreffer { margin: 1.5rem 0; }
.kontotrefferliste { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.kontotrefferliste .karte { padding: 0; }
.kontotrefferliste a {
  display: grid; grid-template-columns: minmax(10rem, 1.25fr) minmax(12rem, 1.5fr) minmax(10rem, 1fr) auto;
  gap: .55rem 1rem; align-items: center; padding: 1rem 1.2rem; color: inherit; text-decoration: none;
}
.kontotrefferliste a:hover { background: var(--grund-tief); }
.kontotreffer-name { font-weight: 780; font-size: 1.05rem; }
.kontotrefferliste .pfeil { color: var(--dunkel); font-weight: 720; white-space: nowrap; }
.detailkopf { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin: 2rem 0 1rem; }
.detailkopf h2 { margin: .15rem 0 0; font-size: clamp(1.5rem, 4vw, 2.25rem); }
.profil-bearbeiten { margin-top: 1.25rem; border-top: 1px solid var(--linie); padding-top: .7rem; }

.mitarbeiter-kennzahlen {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px;
  margin: 18px 0;
}
.mitarbeiter-kennzahlen > div {
  min-width: 0; padding: 14px 16px; border: 1px solid var(--linie);
  border-radius: var(--radius-klein); background: var(--karte);
}
.mitarbeiter-kennzahlen span, .mitarbeiter-kennzahlen strong { display: block; overflow-wrap: anywhere; }
.mitarbeiter-kennzahlen span { color: var(--sek); font-size: .8rem; }
.mitarbeiter-kennzahlen strong { margin-top: 3px; font-size: 1rem; }
.mitarbeiter-listenkopf,
.mitarbeiter-uebersicht a {
  display: grid; grid-template-columns: minmax(280px, 1.6fr) minmax(145px, .7fr) 110px 120px 28px;
  gap: 14px; align-items: center;
}
.mitarbeiter-listenkopf {
  padding: 0 16px 7px; color: var(--sek); font-size: .75rem;
  font-weight: 750; letter-spacing: .055em; text-transform: uppercase;
}
.mitarbeiter-uebersicht { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mitarbeiter-uebersicht > li { padding: 0; border-radius: 13px; box-shadow: none; }
.mitarbeiter-uebersicht a { min-height: 72px; padding: 10px 16px; color: inherit; text-decoration: none; }
.mitarbeiter-uebersicht a:hover { background: var(--grund-tief); }
.mitarbeiter-identitaet { min-width: 0; display: grid; gap: 2px; }
.mitarbeiter-identitaet strong, .mitarbeiter-identitaet small {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mitarbeiter-identitaet small { color: var(--sek); font-size: .82rem; }
.mitarbeiter-aktionsraster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mitarbeiter-aktionsraster > div {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 18px; border: 1px solid var(--linie); border-radius: var(--radius-klein);
  background: color-mix(in srgb, var(--karte) 86%, var(--grund-tief));
}
.mitarbeiter-aktionsraster h3 { margin: 0 0 5px; }
.mitarbeiter-aktionsraster p { flex: 1; margin: 0 0 16px; color: var(--sek); }
.mitarbeiter-aktionsraster form { margin: 0; }
.mitarbeiter-protokoll { max-height: min(520px, 55vh); overflow: auto; padding-right: 8px; }

@media (max-width: 900px) {
  .mitarbeiter-listenkopf { display: none; }
  .mitarbeiter-uebersicht a { grid-template-columns: minmax(0, 1fr) auto 24px; gap: 7px 12px; }
  .mitarbeiter-identitaet { grid-column: 1 / 3; }
  .mitarbeiter-uebersicht .postfach-pfeil { grid-column: 3; grid-row: 1 / 3; }
}
@media (max-width: 620px) {
  .mitarbeiter-aktionsraster { grid-template-columns: 1fr; }
  .mitarbeiter-kennzahlen { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .erklaerschritte { grid-template-columns: 1fr; }
  .kontotrefferliste a { grid-template-columns: 1fr; }
  .kontotrefferliste .pfeil { margin-top: .25rem; }
  .postfach-listenkopf { display: none; }
  .bereich-support .postfachliste a {
    grid-template-columns: auto minmax(0, 1fr) 24px; gap: 6px 12px; min-height: 0; padding: 14px;
  }
  .bereich-support .postfachliste .status-marke { grid-column: 1; grid-row: 1; }
  .postfachliste .vorgang-inhalt { grid-column: 2; grid-row: 1 / span 2; }
  .postfachliste .postfach-spalte { grid-column: 2; }
  .postfachliste .postfach-aktivitaet { grid-column: 2; }
  .postfach-pfeil { grid-column: 3; grid-row: 1 / span 4; align-self: center; }
  .vorgang-arbeitsflaeche { grid-template-columns: 1fr; }
  .vorgang-seitenspalte { position: static; grid-row: 1; }
  .bereich-support .postfach-werkzeugleiste .filterformular { grid-template-columns: 1fr 1fr; }
  .bereich-support .postfach-werkzeugleiste .filterformular button { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .postfachkarte-kopf, .vorgang-kopf, .detailkopf { align-items: flex-start; flex-direction: column; }
  .postfach-filter { padding: .85rem; }
  .konto-verifizierung-kopf, .seitennavigation { align-items: stretch; flex-direction: column; }
  .pruefform { grid-template-columns: 1fr; }
  .postfach-werkzeugleiste { padding: 12px; }
  .bereich-support .postfach-werkzeugleiste .filterformular { grid-template-columns: 1fr; }
  .bereich-support .postfach-werkzeugleiste .filterformular button { grid-column: auto; }
}


/* Temporär in persönlichen/supportnahen Oberflächen ausgeblendet. */
.pflege-zukunft { display: none !important; }

/* --- Dokumentenpostfach --- */
.fussnote {
  font-size: .92rem;
  color: var(--sek);
  margin: 6px 0 0;
}
/* Die Ausgabe des Freigabecodes nach dem Ablegen.
   Das ist die einzige Stelle, an der dieser Code je erscheint – der Server
   speichert ihn nicht. Deshalb auffällig, mit Abstand und in Ziffernbreite,
   damit 0 und O unterscheidbar bleiben. Die frühere Auswahl zwischen neuem
   und vorhandenem Code (.codewahl) ist entfallen. */
.codeausgabe {
  margin-top: 1.4rem;
  padding: 1.1rem 1.2rem;
  border: 2px solid var(--gruen);
  border-radius: var(--radius-klein);
  background: var(--gruen-flaeche);
}
.codeausgabe h3 { margin: 0 0 .5rem; font-size: 1.05rem; }
.codeausgabe .aktionscode {
  margin: 0 0 .6rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(1.6rem, 6vw, 2.2rem);
  font-weight: 700;
  letter-spacing: .14em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  user-select: all;
}
.codeausgabe .fussnote { margin: 0; }
.angaben input[type="text"],
.angaben input[type="file"],
.sendeformular input[type="text"],
.sendeformular input[type="file"] {
  display: block;
  width: 100%;
  max-width: 420px;
  margin: 6px 0 14px;
  padding: 12px 14px;
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  background: var(--karte);
  color: var(--text);
  font: inherit;
}
.angaben input[type="text"],
.sendeformular input[type="text"] { letter-spacing: .12em; text-transform: uppercase; }

/* Das Formular des Sendefensters: eine Spalte, von oben nach unten zu lesen.
   Vorher borgte es sich .angaben – ein Raster für Definitionslisten – und
   verteilte Beschriftung und Feld auf zwei Spalten. */
.sendeformular {
  display: grid;
  gap: .15rem;
  margin: 0;
}
.sendeformular > label { font-weight: 700; }
/* Die wartenden Uploads bleiben als Kästchenliste. Das Übernehmen mit
   achtstelligem Code gibt es nicht mehr; seine Regeln sind entfallen. */
.einladungsliste label {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  cursor: pointer;
  min-height: 44px;
}

/* Die Postfachliste (Computer zur App) behält ihre Zeilenform: Kästchen,
   Angaben, Aktion. Die Unterlagenliste des Webzugriffs hat ein eigenes
   Raster weiter unten und gehört ausdrücklich nicht mehr hierher. */
.einladungsliste li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
}
.einladungsliste li.offen {
  border-color: color-mix(in srgb, var(--gruen) 45%, var(--linie));
}
/* ---------- Unterlagen im Webzugriff ----------
   Eine Karte, eine Liste, ruhig. Der Name trägt das Gewicht: Wer seine
   Unterlage sucht, sucht nach dem Namen, nicht nach Größe oder Datum.
   Die Bedienelemente sind bewusst zurückgenommen – bei drei Zeilen mit je
   zwei Knöpfen dominieren sonst die Knöpfe die Seite statt der Inhalte. */
.unterlagen-karte {
  padding-top: 1.4rem;
}
.unterlagen-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: .8rem 1.2rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--linie);
}
.unterlagen-kopf h1 {
  margin: 0;
  font-size: 1.85rem;
  line-height: 1.2;
}
.unterlagen-anzahl {
  margin: .25rem 0 0;
  color: var(--sek);
  font-size: .98rem;
}
/* Sekundär und klein: Das Senden an die App ist der seltenere Weg. */
.unterlagen-kopfaktion,
button.unterlagen-kopfaktion {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 9px 16px;
  /* Gleicher Radius wie die Zeilenknöpfe: Es ist dieselbe Art von
     Bedienelement und soll nicht wie ein zweites System aussehen. */
  border-radius: 10px;
  font-size: .95rem;
  white-space: nowrap;
}

.unterlagenliste {
  list-style: none;
  margin: 0;
  padding: 0;
}
.unterlagenliste li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .2rem 1rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--linie);
}
.unterlagenliste li:last-child {
  border-bottom: 0;
}
/* Farbige Fläche mit Symbol. Die Form unterscheidet die Art zusätzlich zur
   Farbe – Vorgabe des Designsystems: keine rein farbliche Bedeutung. */
.unterlage-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--grund-tief);
  color: var(--sek);
}
.unterlage-symbol-notfall { background: var(--koralle-flaeche); color: var(--koralle); }
.unterlage-symbol-amtlich { background: var(--blau-flaeche); color: var(--blau); }
.unterlage-symbol-medizin { background: var(--gruen-flaeche); color: var(--dunkel); }

.unterlage-name {
  display: block;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.unterlage-meta {
  display: block;
  margin-top: .1rem;
  color: var(--sek);
  font-size: .92rem;
}
.unterlage-aktionen {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

/* Klein und ruhig, aber noch sicher zu treffen. Unter 38 px wird das Paar
   „Ansehen“ / „Herunterladen“ auf einem Tablet zur Zumutung, denn ein
   Fehlgriff lädt eine Gesundheitsakte herunter. */
/* button. mit im Selektor: Die Basisregel oben nennt button.nebenaktion und
   ist damit spezifischer als eine reine Klasse. Ohne diesen Zusatz blieb ein
   <button> bei 52 px und 16 px Radius, während die <a>-Knöpfe daneben klein
   waren – zwei Größen für dieselbe Aktion. */
.zeilenaktion,
button.zeilenaktion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: 38px;
  /* Abgerundetes Rechteck wie die übrigen Bedienelemente, nur kleiner.
     Eine Pillenform sah nach Etikett aus und nicht nach Knopf. */
  padding: 7px 17px;
  border-radius: 10px;
  font-size: .92rem;
  white-space: nowrap;
}
.zeilenaktion svg { flex: 0 0 auto; }
/* Hier standen zwei Einzelkorrekturen der Randfarbe fuer
   button.nebenaktion.zeilenaktion und .unterlagen-kopfaktion. Die Ursache
   ist jetzt oben an der Regel `.nebenaktion, button.nebenaktion` behoben;
   die Nachbesserungen sagten dasselbe noch einmal. */

/* Schmale Hinweisbox. Neutraler Grund, kein Warnton: Das ist eine
   Sachauskunft, keine Warnung. */
.unterlagen-hinweis {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: .3rem .85rem;
  margin-top: 1.3rem;
  padding: .95rem 1.05rem;
  border-radius: var(--radius-klein);
  background: color-mix(in srgb, var(--grund-tief) 45%, var(--karte));
}
.unterlagen-hinweis > svg { color: var(--dunkel); margin-top: .1rem; }
.unterlagen-hinweis-titel {
  margin: 0 0 .15rem;
  font-size: .95rem;
  font-weight: 600;
  color: var(--dunkel);
}
.unterlagen-hinweis p {
  margin: 0;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--sek);
}
/* Kein Unterstrich: Der Winkel daneben macht den Verweis erkennbar, und in
   einer ruhigen Hinweisbox zieht eine unterstrichene Zeile zu viel Blick. */
.unterlagen-hinweis-mehr {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  align-self: center;
  font-size: .92rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}
.unterlagen-hinweis-mehr:hover,
.unterlagen-hinweis-mehr:focus-visible { text-decoration: underline; }

/* ---------- Browser mit der App verbinden ----------
   Eine Aufgabe, ein Weg von oben nach unten. Das Formular hatte sich .angaben
   geborgt – ein zweispaltiges Raster für Definitionslisten – und stellte den
   Bestätigungsknopf neben das Eingabefeld, über die halbe Karte breit. */
/* Auf einem großen Bildschirm wirkte die über die ganze Breite gezogene
   Karte verloren: ein schmales Formular links, daneben zwei Drittel leere
   Fläche. Die Kopplung ist eine einzige Aufgabe und bekommt deshalb eine
   mittige Spalte in Lesebreite. Die Unterlagenliste danach darf weiterhin
   die volle Breite nutzen – dort trägt sie Inhalt. */
.kopplung-karte,
.serverhinweis {
  width: 100%;
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
}
.kopplung-karte h1 { margin: 0; font-size: 1.7rem; line-height: 1.25; }
.kopplung-einleitung { margin: .4rem 0 1.3rem; color: var(--sek); }
.kopplung-schritte { margin-bottom: 1.5rem; }

.kopplung-formular {
  display: grid;
  gap: .45rem;
  /* Feld und Knopf füllen die Karte und bilden einen Block. Vorher standen
     sie in einer eigenen, schmaleren Spalte und wirkten angeschnitten. */
  margin: 0;
}
.kopplung-formular label { font-weight: 700; }
/* Der Code ist sechs Ziffern und wird abgetippt: groß, mit Abstand zwischen
   den Zeichen und in Ziffernbreite, damit man beim Vergleichen nicht die
   Stelle verliert. */
.kopplung-formular input {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid var(--linie);
  border-radius: var(--radius-klein);
  background: var(--karte);
  color: var(--text);
  font: inherit;
  font-size: 1.6rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: .3em;
  text-align: center;
}
.kopplung-formular input:focus-visible {
  outline: 3px solid var(--gruen);
  outline-offset: 2px;
  border-color: var(--gruen);
}
.kopplung-formular button { width: 100%; margin-top: .4rem; }
.kopplung-formular .fussnote { margin: .3rem 0 0; }

/* Die Aufklärung vor der Kopplung. Kein Warnton – es ist eine Auskunft,
   aber sie soll gelesen werden, bevor der Code eingegeben wird. */
.serverhinweis h2 {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-top: 0;
  font-size: 1.15rem;
}
.serverhinweis h2 svg { flex: 0 0 auto; color: var(--dunkel); }
.serverhinweis .punkte { margin-bottom: 1rem; }
.serverhinweis .punkte li { color: var(--text); }

/* Hinweis auf hochgeladene Dateien, die die App noch nicht abgeholt hat.
   Steht unter der Hinweisbox und nur, wenn es etwas zu tun gibt. */
.wartend-notiz {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3rem .6rem;
  margin: .9rem 0 0;
  font-size: .95rem;
  color: var(--sek);
}
.nurtext-aktion {
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--dunkel);
  text-decoration: underline;
  cursor: pointer;
}
.nurtext-aktion:focus-visible { outline: 3px solid var(--gruen); outline-offset: 3px; }

/* ---------- Fenster „An die App senden" ----------
   Der seltenere Weg liegt über der Seite, nicht in ihr. Escape schließt,
   der Schließen-Knopf sitzt in einem method="dialog"-Formular. */
.sendefenster {
  width: min(41rem, calc(100vw - 2rem));
  max-height: calc(100vh - 3rem);
  padding: 0;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--karte);
  color: var(--text);
  overflow: hidden;
}
.sendefenster::backdrop {
  background: rgba(28, 38, 32, .55);
}
/* Der Kopf bleibt stehen, damit der Schließen-Knopf beim Blättern durch das
   Formular nicht nach oben aus dem Bild wandert. */
.sendefenster-kopf {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  padding: 1.1rem 1.4rem;
  border-bottom: 1px solid var(--linie);
  background: var(--karte);
}
.sendefenster-kopf h2 {
  margin: 0;
  font-size: 1.3rem;
}
/* Groß genug, um ihn auch mit unruhiger Hand zu treffen. */
.sendefenster-zu {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border: 1px solid var(--linie);
  border-radius: 12px;
  background: var(--karte);
  color: var(--text);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.sendefenster-zu:hover { border-color: var(--gruen); }
.sendefenster-zu:focus-visible { outline: 3px solid var(--gruen); outline-offset: 2px; }
.sendefenster-inhalt {
  padding: 1.2rem 1.4rem 1.6rem;
  overflow-y: auto;
  max-height: calc(100vh - 3rem - 70px);
}

/* Die noch nicht abgeholten Uploads. Kein Dateiname, weil er verschlüsselt
   ist – deshalb trägt das Datum die Zeile und der Grund steht daneben. */
.wartend {
  margin-top: 1.8rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--linie);
}
.wartend h3 { margin: 0 0 .5rem; font-size: 1.08rem; }
.wartendliste {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}
.wartendliste li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .6rem 1rem;
  padding: .8rem 0;
  border-bottom: 1px solid var(--linie);
}
.wartendliste li:last-child { border-bottom: 0; }

/* Schmale Fenster: Erst wandern die Knöpfe unter den Namen, dann bekommt
   der Hinweis seinen Verweis in eine eigene Zeile. */
@media (max-width: 640px) {
  .unterlagenliste li {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .unterlage-aktionen {
    grid-column: 1 / -1;
    margin-top: .45rem;
  }
  .zeilenaktion { flex: 1 1 0; justify-content: center; }
  .unterlagen-hinweis { grid-template-columns: auto minmax(0, 1fr); }
  .unterlagen-hinweis-mehr { grid-column: 2; margin-top: .35rem; }
}

.eintragsaktionen {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
/* Ablegefläche und gesammelte Dateien vor dem Hochladen. */
.ablegeflaeche {
  border: 2px dashed var(--linie);
  border-radius: var(--radius-klein);
  padding: 16px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.ablegeflaeche.bereit {
  border-color: var(--gruen);
  background: color-mix(in srgb, var(--gruen) 8%, transparent);
}
.ablegeflaeche .fussnote { margin: 8px 0 0; }
.dateiliste {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dateiliste li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  background: var(--karte);
}