/* =========================================================================
   Portal · VOLPINA Haus- und Grundbesitz Verwaltungs GmbH
   Entwurf S1 — "Seitenleiste mit Beschriftung"

   Grundsaetze, die sich aus Regel 7 ergeben und hier nicht verhandelt werden:
   kein JavaScript, keine fremde Schrift, kein url(), kein data:-URI.
   Jede Flaeche ist Farbe, Verlauf oder Pseudoelement. Symbole stehen als
   Inline-SVG im Markup und werden hier nur ueber color/stroke gefaerbt.

   Aufbau der Seite (Markup siehe Uebergabe):
     body > .rahmen > .kopf (Seitenleiste)  +  .blatt (main.innen + .fuss)
     Anmeldung: body > .rahmen.anmelde > .buehne + .blatt

   Reihenfolge der Abschnitte
     1  Farben, Masse, dunkle Fassung
     2  Grundgeruest
     3  Seitenleiste, Blatt, Fuss
     4  Anmeldebuehne
     5  Typografie und Seitenkopf
     6  Karten: karte, gruppe, huelle
     7  Formulare und Knoepfe
     8  Suche, Filter, Pillen
     9  Aktenliste
    10  Meldungen und Marker
    11  Tabellen
    12  Leerzustaende, Code, Kleinkram
    13  Schmale Bildschirme
    14  Bewegung, Druck
   ========================================================================= */


/* -------------------------------------------------------------------------
   1  Farben und Masse
   -------------------------------------------------------------------------
   Die Marke gibt Dunkelgruen, Tiefgruen, Blassgruen, Limette, Creme, Papier,
   Tinte und Leise vor. Ergaenzt wurden nur Werte, die ohne Not fehlen wuerden;
   jede Ergaenzung steht mit Begruendung daneben.
   ------------------------------------------------------------------------- */

:root {
  /* --- Marke, unveraendert ------------------------------------------- */
  /* Am Bildschirm von volpina.eu abgetastet: Hauptknopf und Ueberschrift
     sind #083C08, nicht #096109. Letzteres steht zwar in der Palette der
     Seite, wird dort aber nirgends gezeigt. */
  --gruen:        #083C08;   /* 12,65:1 auf Papier - wie der Knopf der Seite */
  --logo:         #007C52;   /* NUR fuer das Wortzeichen, sonst nirgends     */
  --gruen-tief:   #062E06;   /* tief         – Fuss der Verlaufsflaeche    */
  --gruen-blass:  #EAF1E7;   /* blass        – Bett fuer Marker und Zaehler*/
  /* Frueher Limette #B4E717. Abgetastet: die kommt auf volpina.eu in
     NULL Pixeln vor - sie steht nur in der Palette. Als Akzent trug sie
     hier jede Schrittnummer und jeden Marker und war damit genau das,
     was nicht nach der Marke aussah. Jetzt das Blattgruen der Seite,
     das dort "gemeinsam" in der Ueberschrift traegt. */
  --limette:      #3F9A3A;   /* Akzent - Flaeche, nie Fliesstext           */
  --creme:        #F6F5F2;
  --papier:       #FFFFFF;
  --tinte:        #1F2621;

  /* --- Ergaenzungen mit Begruendung ---------------------------------- */

  /* Zwischenton fuer den Zeigerwechsel auf gefuellten Flaechen.           */
  --gruen-dunkel: #052605;
  /* Hellgruen fuer Linien, die gruen wirken sollen, ohne Text zu sein.    */
  --gruen-rand:   #C6DAC0;
  /* Sehr blasser Gruenton fuer Zeilenwechsel in Tabellen. gruen-blass ist
     dafuer schon zu kraeftig und laesst die Tabelle gestreift wirken.     */
  --gruen-zart:   #F3F7F1;
  /* Limette ist auf Papier mit 1,5:1 als Text unbrauchbar. Fuer die selten
     noetigen limettefarbenen Schriftzeichen dient dieser abgedunkelte Ton. */
  --limette-tief: #2F7A2B;

  /* Der Grund liegt einen Hauch unter Creme und hat einen Gruenstich.
     Damit heben sich weisse Kacheln ab, ohne dass Schatten noetig waeren.  */
  --grund:        #F1F3EE;

  /* Leise aus der Marke ist #6B7069. Auf dem Grund ergibt das 4,58:1 -
     rechnerisch bestanden, praktisch zu knapp fuer 17px Flaechentext.
     Deshalb ist --leise um eine Stufe abgedunkelt (5,5:1 auf dem Grund,
     6,1:1 auf Papier). Der Originalton bleibt als --leise-zart fuer
     Symbolstriche und Trennzeichen, die keinen Textkontrast brauchen.     */
  --leise:        #5E6459;
  --leise-zart:   #6B7069;

  --linie:        #E5E7DF;   /* Hauchlinie zwischen Zeilen und Kacheln     */
  --linie-stark:  #8E968A;   /* Rand von Bedienelementen: 3,05:1, WCAG 1.4.11 */

  /* --- Gefuellte Flaechen: Knopf, aktives Menue, aktive Pille ---------- */
  --fuell:       var(--gruen);
  --fuell-stark: var(--gruen-dunkel);
  --fuell-tief:  var(--gruen-tief);
  --fuell-ink:   #FFFFFF;
  --fuell-leise: rgba(255, 255, 255, .78);

  /* --- Zustandsfarben ------------------------------------------------- */
  --gut:        #1F6B3A;  --gut-bett:    #E4F1E7;  --gut-rand:    #BCDCC6;
  --warn:       #8A5A10;  --warn-bett:   #FBF1E0;  --warn-rand:   #EBD9B4;
  --fehler:     #8F2622;  --fehler-bett: #FBECEB;  --fehler-rand: #EFC9C6;

  /* --- Eingabefelder --------------------------------------------------- */
  --feld-bett:  #F4F6F1;   /* weiches Grau-Gruen wie in der Vorlage        */
  --feld-rand:  #8E968A;   /* 3,05:1 auf Papier - Bedienelemente brauchen 3:1 */

  /* --- Verlaufsflaeche der Anmeldung ----------------------------------- */
  --buehne:
    radial-gradient(60rem 45rem at 115% 108%, rgba(180, 231, 23, .16), transparent 62%),
    radial-gradient(52rem 42rem at -12% -22%, rgba(255, 255, 255, .07), transparent 60%),
    linear-gradient(158deg, #0C4A0C 0%, #083C08 45%, #052705 100%);
  --glas:      rgba(255, 255, 255, .09);
  --glas-rand: rgba(255, 255, 255, .17);

  /* --- Fokus ----------------------------------------------------------- */
  --ring: #0A6B0A;

  /* --- Schrift, Masse, Schatten ---------------------------------------- */
  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
             Arial, "Noto Sans", sans-serif;
  --schrift-fest: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                  "Liberation Mono", monospace;

  --rund:        20px;   /* Kacheln                                        */
  --rund-klein:  14px;   /* Eingaben, Symbolflaechen                       */
  --rund-knopf:  12px;
  --rund-pille:  999px;

  --schatten:      0 1px 2px rgba(15, 42, 15, .045),
                   0 6px 18px -6px rgba(15, 42, 15, .075);
  --schatten-hoch: 0 2px 4px rgba(15, 42, 15, .06),
                   0 14px 34px -12px rgba(15, 42, 15, .16);

  --leiste: 17rem;   /* Breite der Seitenleiste ab 961px                   */
  --breite: 68rem;   /* Textbreite im Blatt; bei 1440px bleibt Luft        */

  color-scheme: light dark;
}

/* --- Dunkle Fassung. Vollstaendig, nicht nur invertiert. ---------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --gruen:        #86CE82;   /* 8,7:1 auf Papier-dunkel                  */
    --logo:         #3FB98B;   /* Logoton aufgehellt, sonst saeuft er ab   */
    --gruen-dunkel: #9DDB99;
    --gruen-tief:   #061F06;
    --gruen-blass:  #1B2819;
    --gruen-rand:   #33472F;
    --gruen-zart:   #18231A;
    --limette:      #7FBF79;
    --limette-tief: #7FBF79;

    --creme:  #141A13;
    --papier: #1A211A;
    --grund:  #0F140E;
    --tinte:  #E7EDE4;

    --leise:      #9DA69A;
    --leise-zart: #8A9388;
    --linie:       #2A342A;
    --linie-stark: #6E7C6C;  /* 3,12:1 auf dunklem Grund */

    --fuell:       #8BD186;
    --fuell-stark: #9FDC9A;
    --fuell-tief:  #75C270;
    --fuell-ink:   #07200A;
    --fuell-leise: rgba(7, 32, 10, .72);

    --gut:    #85D0A5;  --gut-bett:    #13271B;  --gut-rand:    #26492F;
    --warn:   #E2AE68;  --warn-bett:   #2A2116;  --warn-rand:   #4A3A20;
    --fehler: #F0A5A1;  --fehler-bett: #2C1A19;  --fehler-rand: #4E2B29;

    --feld-bett: #202821;
    --feld-rand: #6E7C6C;  /* 3,12:1 auf dunklem Papier */

    --buehne:
      radial-gradient(60rem 45rem at 115% 108%, rgba(180, 231, 23, .12), transparent 62%),
      radial-gradient(52rem 42rem at -12% -22%, rgba(255, 255, 255, .05), transparent 60%),
      linear-gradient(158deg, #0A5C0A 0%, #073A07 45%, #051F05 100%);
    --glas:      rgba(255, 255, 255, .07);
    --glas-rand: rgba(255, 255, 255, .13);

    --ring: #C7F23C;

    --schatten:      0 1px 2px rgba(0, 0, 0, .40), 0 6px 18px -6px rgba(0, 0, 0, .45);
    --schatten-hoch: 0 2px 6px rgba(0, 0, 0, .45), 0 16px 36px -12px rgba(0, 0, 0, .60);
  }
}


/* -------------------------------------------------------------------------
   2  Grundgeruest
   ------------------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--grund);
  color: var(--tinte);
  font: 17px/1.6 var(--schrift);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

::selection { background: var(--gruen-blass); color: var(--tinte); }

/* Inline-SVG ohne width/height waere sonst 300x150 gross. Diese Grundgroesse
   gilt ueberall dort, wo weiter unten nichts Genaueres steht. */
svg { width: 1.25rem; height: 1.25rem; flex: none; }

/* Der Fokusring liegt ausserhalb des Elements. Dadurch ist er auch auf
   gefuellten gruenen Flaechen sichtbar, weil er den hellen Grund trifft. */
:focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: 3px;
  border-radius: 4px;
}
.kopf nav a:focus-visible,
.knopf:focus-visible,
button:focus-visible { border-radius: var(--rund-knopf); }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline-offset: 2px;
  border-radius: var(--rund-klein);
}

.nursprachausgabe {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Das Geruest: Seitenleiste links, Blatt rechts. Ohne JavaScript, ohne
   feste Positionierung - eine einzige Flexzeile. */
.rahmen {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
}

.blatt {
  flex: 1 1 auto;
  min-width: 0;               /* sonst schieben breite Tabellen die Leiste weg */
  display: flex;
  flex-direction: column;
  background: var(--grund);
}

.innen { width: 100%; }

main.innen {
  flex: 1 1 auto;
  max-width: var(--breite);
  margin: 0 auto;
  padding: 2.6rem 2.5rem 3.75rem;
}


/* -------------------------------------------------------------------------
   3  Seitenleiste (.kopf), Fuss
   -------------------------------------------------------------------------
   Symbol plus Beschriftung, Logo oben, aktives Element flaechig hinterlegt,
   Name und Abmelden ganz unten. Sie klappt nicht auf und nicht zu - dafuer
   braeuchte es JavaScript. Auf schmalen Bildschirmen wird sie zur waagerechten
   Leiste (Abschnitt 13).
   ------------------------------------------------------------------------- */

.kopf {
  flex: 0 0 var(--leiste);
  background: var(--papier);
  border-right: 1px solid var(--linie);
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 4;
  display: flex;              /* damit .innen die volle Hoehe fuellt und     */
  flex-direction: column;     /* das Konto unten haengen bleibt              */
}

.kopf .innen {
  max-width: none;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  padding: 1.5rem 1rem 1.25rem;
}

/* --- Wortmarke ------------------------------------------------------- */

.marke {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .35rem .6rem;
  color: var(--logo);           /* das Wortzeichen behaelt seinen Ton */
  text-decoration: none;
  border-radius: var(--rund-knopf);
}
.marke svg { width: 2.1rem; height: 2.1rem; flex: none; display: block; }
/* Das echte Wortzeichen ist breit (730:104), nicht quadratisch wie das
   frueher hier stehende Platzhalterzeichen. Also Hoehe vorgeben, Breite folgt.
   Die Regel steht nach .marke svg und schlaegt sie ueber die Klasse. */
.marke .wortmarke { width: auto; height: 1.2rem; flex: none; display: block; }
.marke.voll { flex-direction: column; align-items: flex-start; gap: .45rem; }
.marke.voll .wortmarke { height: 2.9rem; }
.marke span {
  display: flex;
  flex-direction: column;
  line-height: 1.18;
  color: var(--tinte);
  font-weight: 700;
  font-size: 1.06rem;
  letter-spacing: -.005em;
}
.marke span b {
  order: -1;                    /* VOLPINA steht ueber dem Wort "Portal"  */
  font-size: .63rem;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--leise);
}
.marke:hover span { color: var(--gruen); }

/* --- Menue ------------------------------------------------------------ */

.kopf nav {
  display: flex;
  flex-direction: column;
  gap: .2rem;
}

.kopf nav a {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .72rem .8rem;
  border-radius: var(--rund-knopf);
  color: var(--tinte);
  text-decoration: none;
  font-weight: 500;
  font-size: .97rem;
  line-height: 1.3;
  transition: background .12s ease, color .12s ease;
}
.kopf nav a svg {
  width: 1.32rem; height: 1.32rem;
  flex: none;
  color: var(--leise-zart);
  transition: color .12s ease;
}
.kopf nav a:hover {
  background: var(--gruen-zart);
  color: var(--gruen);
}
.kopf nav a:hover svg { color: var(--gruen); }
.kopf nav a:active { background: var(--gruen-blass); }

/* Aktiv: flaechig gefuellt und mit Limettenpunkt. Zwei Merkmale, nicht nur
   Farbe - wer Gruen schlecht unterscheidet, sieht immer noch den Punkt. */
.kopf nav a[aria-current="page"],
.kopf nav a.aktiv {
  background: var(--fuell);
  color: var(--fuell-ink);
  font-weight: 600;
  box-shadow: 0 2px 8px -3px rgba(8, 60, 8, .5);
}
.kopf nav a[aria-current="page"] svg,
.kopf nav a.aktiv svg { color: var(--fuell-ink); }
.kopf nav a[aria-current="page"]::after,
.kopf nav a.aktiv::after {
  content: "";
  margin-left: auto;
  width: .45rem; height: .45rem;
  border-radius: 50%;
  background: var(--limette);
  flex: none;
}

/* --- Beistandskasten (freiwillig, siehe Uebergabe) -------------------- */

.beistand {
  margin: 0;
  padding: .9rem 1rem;
  border-radius: var(--rund-klein);
  background: var(--gruen-blass);
  border: 1px solid var(--gruen-rand);
  color: var(--tinte);
  font-size: .87rem;
  line-height: 1.5;
}
.beistand strong { display: block; margin-bottom: .15rem; }
.beistand a { color: var(--gruen); }

/* --- Konto und Abmelden ---------------------------------------------- */

.kopf .konto {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--linie);
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
/* Auch ohne .konto-Huelle richtig - falls das Markup unveraendert bleibt. */
.kopf .wer {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .25rem .3rem;
  color: var(--tinte);
  font-weight: 600;
  font-size: .93rem;
  line-height: 1.25;
}
.kopf .wer::before {                       /* Profilscheibe, reine Farbe */
  content: "";
  flex: none;
  width: 2.15rem; height: 2.15rem;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--gruen) 0%, var(--gruen-tief) 100%);
  box-shadow: inset 0 0 0 2px var(--limette);
}
.kopf .raus {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem .8rem;
  border-radius: var(--rund-knopf);
  color: var(--leise);
  text-decoration: none;
  font-weight: 500;
  font-size: .92rem;
}
.kopf .raus svg { width: 1.2rem; height: 1.2rem; flex: none; }
.kopf .raus:hover { background: var(--fehler-bett); color: var(--fehler); }

/* --- Fuss ------------------------------------------------------------- */

.fuss {
  border-top: 1px solid var(--linie);
  color: var(--leise);
  font-size: .85rem;
}
.fuss .innen {
  max-width: var(--breite);
  margin: 0 auto;
  padding: 1.4rem 2.5rem 2.2rem;
}


/* -------------------------------------------------------------------------
   4  Anmeldung: geteilter Bildschirm mit Verlaufsflaeche
   -------------------------------------------------------------------------
   Links bildschirmhoch die tief gesaettigte Gruenflaeche mit Marke, grosser
   Ueberschrift, Satz und drei nummerierten Glaskacheln. Rechts auf Papier
   das Formular. Die Nummern kommen aus einem CSS-Zaehler, nicht aus dem Text.
   ------------------------------------------------------------------------- */

.buehne {
  flex: 0 0 46%;
  max-width: 44rem;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 3rem 3.25rem 2.5rem;
  background: var(--buehne);
  color: #fff;
}
.buehne > * { position: relative; z-index: 1; }

.buehne::before {                      /* weicher Limettenschein oben rechts */
  content: "";
  position: absolute;
  right: -13rem; top: -11rem;
  width: 34rem; height: 34rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(180, 231, 23, .17), transparent 62%);
  pointer-events: none;
  z-index: 0;
}
.buehne::after {                       /* feiner Ring unten links            */
  content: "";
  position: absolute;
  left: -9rem; bottom: -15rem;
  width: 31rem; height: 31rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .11);
  pointer-events: none;
  z-index: 0;
}

/* Auf der Verlaufsflaeche traegt das Wortzeichen die Umgebungsfarbe - also
   Weiss. Die Zusatzzeile ist im SVG selbst auf 62 % zurueckgenommen. */
.buehne .marke { padding: 0; color: #fff; }
.buehne .marke span {
  color: rgba(255, 255, 255, .82);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.buehne-pille {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  padding: .4rem .95rem .4rem .8rem;
  border-radius: var(--rund-pille);
  background: var(--glas);
  border: 1px solid var(--glas-rand);
  color: #fff;
  font-size: .81rem;
  font-weight: 600;
  letter-spacing: .01em;
}
.buehne-pille::before {
  content: "";
  width: .45rem; height: .45rem;
  border-radius: 50%;
  background: var(--limette);
}

.buehne-titel {
  margin: .4rem 0 0;
  font-size: clamp(2.1rem, 3.2vw, 3.05rem);
  line-height: 1.06;
  letter-spacing: -.032em;
  font-weight: 700;
  color: #fff;
  text-wrap: balance;
}

.buehne-satz {
  margin: 0;
  max-width: 30rem;
  font-size: 1.02rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .88);
}

.schritte {
  counter-reset: schritt;
  list-style: none;
  margin: .5rem 0 0;
  padding: 0;
  display: grid;
  gap: .7rem;
}
.schritt {
  display: grid;
  grid-template-columns: 2.1rem 1fr;
  column-gap: .95rem;
  row-gap: .15rem;
  align-items: center;
  padding: .95rem 1.15rem;
  border-radius: 18px;
  background: var(--glas);
  border: 1px solid var(--glas-rand);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09);
}
.schritt::before {
  counter-increment: schritt;
  content: counter(schritt);
  grid-row: 1 / span 2;
  width: 2.1rem; height: 2.1rem;
  border-radius: 50%;
  background: var(--limette);
  color: #0A140A;   /* 5,3:1 auf dem Akzent */
  font-size: .95rem;
  font-weight: 700;
  display: grid;
  place-items: center;
}
.schritt strong {
  grid-column: 2;
  font-size: .98rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.3;
}
.schritt em {
  grid-column: 2;
  font-style: normal;
  font-size: .87rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, .86);
}

.buehne-fuss {
  margin: auto 0 0;
  font-size: .8rem;
  color: rgba(255, 255, 255, .74);
}

/* --- rechte Haelfte --------------------------------------------------- */

.rahmen.anmelde .blatt { background: var(--papier); }
.rahmen.anmelde main.innen {
  max-width: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 2.5rem 1.5rem;
}
.rahmen.anmelde .fuss {
  border-top: 0;
  text-align: center;
}
.rahmen.anmelde .fuss .innen {
  max-width: 30rem;
  padding: 0 2.5rem 2.75rem;
  font-size: .8rem;
}


/* -------------------------------------------------------------------------
   5  Typografie und Seitenkopf
   ------------------------------------------------------------------------- */

h1 {
  margin: 0 0 .35rem;
  font-size: clamp(1.65rem, 2.6vw, 2.05rem);
  line-height: 1.15;
  letter-spacing: -.025em;
  font-weight: 700;
}
h2 {
  margin: 2.5rem 0 1rem;
  font-size: 1.2rem;
  line-height: 1.3;
  letter-spacing: -.012em;
  font-weight: 650;
}
h3 { margin: 0 0 .15rem; font-size: 1.03rem; line-height: 1.35; font-weight: 600; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

p.unter {
  margin: 0 0 1.75rem;
  max-width: 46rem;
  color: var(--leise);
  font-size: .98rem;
}
p.unter strong { color: var(--tinte); }

a { color: var(--gruen); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

.wer { color: var(--leise); font-size: .86rem; font-weight: 500; }
/* Der Trennpunkt ist echter Text, kein Rahmen: --linie-stark waere 1,57:1.
   Mit --leise sind es 5,46:1 hell und 6,55:1 dunkel. */
.trenner { color: var(--leise); padding: 0 .2rem; }
.rechts { text-align: right; }

/* Kopfzeile einer Seite: Titel links, Kennzahl als Pille rechts. */
.seitenkopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  flex-wrap: wrap;
  margin-bottom: 1.9rem;
}
.seitenkopf > div { min-width: 0; flex: 1 1 22rem; }
.seitenkopf .unter { margin-bottom: 0; }

.zaehler {
  margin: .2rem 0 0;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem 1.15rem .6rem .85rem;
  border-radius: var(--rund-pille);
  background: var(--papier);
  border: 1px solid var(--linie);
  box-shadow: var(--schatten);
  white-space: nowrap;
}
.zaehler strong {
  display: grid;
  place-items: center;
  min-width: 2.1rem; height: 2.1rem;
  padding: 0 .45rem;
  border-radius: var(--rund-pille);
  background: var(--gruen-blass);
  color: var(--gruen);
  font-size: 1.05rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.zaehler span { font-size: .85rem; color: var(--leise); font-weight: 500; }


/* -------------------------------------------------------------------------
   6  Karten: .karte, .gruppe, .huelle
   ------------------------------------------------------------------------- */

/* .karte traegt das Anmeldeformular. Innerhalb der Buehne ist sie nur ein
   Behaelter ohne eigene Kante - die Haelfte selbst ist schon die Kachel.
   Ausserhalb (falls sie je allein steht) bleibt sie eine richtige Kachel.   */
.karte {
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  box-shadow: var(--schatten);
  padding: 2.25rem;
  max-width: 27rem;
  margin: 3.5rem auto;
}
.rahmen.anmelde .karte {
  width: 100%;
  max-width: 25rem;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}
.karte h1 {
  font-size: 1.55rem;
  text-align: center;
  margin-bottom: .6rem;
}
.karte > .unter {
  text-align: center;
  margin: 0 auto 1.9rem;
  max-width: 24rem;
  font-size: .94rem;
}
.karte form > .feld:first-of-type { margin-top: 0; }
/* Der Hauptknopf des Anmeldeformulars laeuft ueber die volle Breite. */
.karte form > button,
.karte .breit { width: 100%; justify-content: center; }
.karte form > .unter { text-align: center; margin: 1.4rem 0 0; }

/* "Oder"-Trenner zwischen Haupt- und Zweitknopf. */
.oder {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin: 1.5rem 0;
  color: var(--leise);
  font-size: .84rem;
}
.oder::before, .oder::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--linie);
}

/* .gruppe ist die Arbeitskachel: Abschnitt mit Ueberschrift und Inhalt. */
.gruppe {
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  box-shadow: var(--schatten);
  padding: 1.6rem 1.75rem;
  margin-bottom: 1.25rem;
}
.gruppe > h2 {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 0 0 .9rem;
  font-size: 1.12rem;
  overflow-wrap: anywhere;
}
/* Symbolmarke vor der Abschnittsueberschrift - ein Verlaufsbalken, kein Bild. */
.gruppe > h2::before {
  content: "";
  flex: none;
  width: .5rem; height: 1.35rem;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--limette) 0%, var(--gruen) 85%);
}
.gruppe > h2 svg {
  flex: none;
  width: 1.25rem; height: 1.25rem;
  color: var(--gruen);
}
.gruppe > h2 .wer { font-weight: 500; font-size: .88rem; }

/* Auch die freistehenden Abschnittsueberschriften im Blatt bekommen die
   Symbolmarke - sonst wirken "Letzte Vorgaenge" und "Bestehende Zuordnungen"
   wie ein anderer Seitentyp als die Kacheln darueber. */
main.innen > h2 { display: flex; align-items: center; gap: .7rem; }
main.innen > h2::before {
  content: "";
  flex: none;
  width: .5rem; height: 1.35rem;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--limette) 0%, var(--gruen) 85%);
}
.gruppe > .unter { margin-bottom: 1.2rem; }
.gruppe > form:last-child > *:last-child,
.gruppe > *:last-child { margin-bottom: 0; }

/* .huelle haelt Tabellen. Frei stehend ist sie selbst die Kachel, in einer
   .gruppe nur ein gerahmter Kasten - sonst laege Kachel in Kachel.         */
.huelle {
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  box-shadow: var(--schatten);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  margin-bottom: 1.5rem;
}
.gruppe .huelle {
  background: none;
  border-radius: var(--rund-klein);
  box-shadow: none;
  margin-bottom: 0;
}


/* -------------------------------------------------------------------------
   7  Formulare und Knoepfe
   ------------------------------------------------------------------------- */

.feld { margin-bottom: 1.2rem; }

label {
  display: block;
  margin-bottom: .4rem;
  font-weight: 600;
  font-size: .87rem;
  letter-spacing: .005em;
  color: var(--tinte);
}
/* Ankreuzfelder stehen neben ihrem Text, nicht darueber. */
p > label,
label:has(> input[type="checkbox"]) {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: 0;
  font-weight: 500;
  font-size: .97rem;
  cursor: pointer;
}
input[type="checkbox"] {
  width: 1.15rem; height: 1.15rem;
  accent-color: var(--fuell);
  flex: none;
  cursor: pointer;
}

input[type="email"], input[type="text"], input[type="date"],
input[type="search"], input[type="file"], input[type="number"],
input[type="tel"], select, textarea {
  width: 100%;
  font: inherit;
  padding: .78rem .95rem;
  color: var(--tinte);
  background: var(--feld-bett);
  border: 1px solid var(--feld-rand);
  border-radius: var(--rund-klein);
  transition: border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
/* Aufklapplisten behalten ihren Systempfeil. Ein selbstgebauter Pfeil waere
   ohne Bildquelle nur ein Pseudoelement an geratener Stelle - und die
   Zielgruppe erkennt das Systemfeld sofort wieder. */
select { padding-right: .6rem; cursor: pointer; }

input::placeholder, textarea::placeholder { color: var(--leise); opacity: 1; }

input:hover:not(:disabled), select:hover:not(:disabled) { border-color: var(--linie-stark); }
input:focus, select:focus, textarea:focus {
  background: var(--papier);
  border-color: var(--gruen);
  box-shadow: 0 0 0 3px var(--gruen-blass);
  outline: none;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--ring);
}
input:disabled, select:disabled { opacity: .55; cursor: not-allowed; }
input:user-invalid { border-color: var(--fehler); }

input[type="file"] { padding: .5rem .6rem; cursor: pointer; }
input[type="file"]::file-selector-button {
  font: inherit;
  font-weight: 600;
  font-size: .88rem;
  margin-right: .85rem;
  padding: .5rem .95rem;
  border: 1px solid var(--linie-stark);
  border-radius: 10px;
  background: var(--papier);
  color: var(--gruen);
  cursor: pointer;
}
input[type="file"]::file-selector-button:hover {
  background: var(--gruen-blass);
  border-color: var(--gruen);
}

/* Der grosse Codeeingabe-Kasten. */
input.code {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: .38em;
  text-indent: .38em;          /* gleicht den Abstand hinter der letzten Ziffer aus */
  text-align: center;
  font-variant-numeric: tabular-nums;
  padding: .95rem .5rem;
  border-radius: 18px;
}

/* Mehrere Felder nebeneinander. Grid statt Flex: gleich breite Spalten,
   und die Eingaben stehen auf einer Linie, auch wenn ein Etikett umbricht. */
.reihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1.1rem 1.25rem;
  align-items: end;
  margin-bottom: 1.2rem;
}
.reihe .feld { margin-bottom: 0; }
.reihe > * { min-width: 0; }

/* --- Knoepfe ---------------------------------------------------------- */

button, .knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  font: inherit;
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.25;
  padding: .8rem 1.35rem;
  border: 1px solid transparent;
  border-radius: var(--rund-knopf);
  background: var(--fuell);
  color: var(--fuell-ink);
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(8, 60, 8, .18);
  transition: background .12s ease, box-shadow .12s ease, transform .08s ease;
}
button:hover, .knopf:hover {
  background: var(--fuell-stark);
  box-shadow: 0 3px 10px -2px rgba(8, 60, 8, .35);
}
button:active, .knopf:active {
  background: var(--fuell-tief);
  transform: translateY(1px);
  box-shadow: none;
}
button svg, .knopf svg { width: 1.15rem; height: 1.15rem; flex: none; }
.knopf .wer { color: var(--fuell-leise); font-size: .81rem; font-weight: 500; }

button.leise, .knopf.leise {
  background: var(--papier);
  color: var(--gruen);
  border-color: var(--linie-stark);
  box-shadow: none;
}
button.leise:hover, .knopf.leise:hover {
  background: var(--gruen-blass);
  border-color: var(--gruen);
  box-shadow: none;
}
button.leise:active, .knopf.leise:active { background: var(--gruen-rand); }

button.gefahr, .knopf.gefahr {
  background: var(--papier);
  color: var(--fehler);
  border-color: var(--fehler-rand);
  box-shadow: none;
}
button.gefahr:hover, .knopf.gefahr:hover {
  background: var(--fehler-bett);
  border-color: var(--fehler);
}

button:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* Mehrere Knoepfe in einem Absatz bekommen Abstand, ohne dass das Markup
   eine Huelle braucht. */
p > button + button, p > .knopf + .knopf,
p > button + .knopf, p > .knopf + button,
form > button + .knopf, form > .knopf + button, form > button + button {
  margin-left: .6rem;
}
/* Ein Absatz, der nur Knoepfe enthaelt, wird zur Knopfzeile. Absaetze mit
   Flietext (.unter) bleiben ausgenommen - sonst zerfaellt der Satz. */
p:not(.unter):has(> .knopf),
p:not(.unter):has(> button) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
}
p:not(.unter):has(> .knopf) > .knopf + .knopf,
p:not(.unter):has(> button) > button + button { margin-left: 0; }
/* Erklaerender Nebensatz neben einem Knopf bricht in die eigene Zeile um. */
p:not(.unter):has(> button) > .wer { flex: 1 1 20rem; margin-left: 0; }
/* Im Leerzustand steht der Knopf mittig, weil der ganze Kasten mittig steht. */
.leerzustand p:has(> .knopf) { justify-content: center; }

/* Kleiner Knopf mitten im Fliesstext ("Diesen Stapel verwerfen"). */
.unter button, .unter .knopf {
  font-size: .88rem;
  padding: .35rem .8rem;
  vertical-align: baseline;
}

/* Formular als Zeile: Absenden plus erklaerender Nebensatz. */
form > .wer { display: inline-block; margin-left: .75rem; max-width: 32rem; }


/* -------------------------------------------------------------------------
   8  Suche, Filter, Pillen
   ------------------------------------------------------------------------- */

.suchleiste { margin: 0 0 1.1rem; }

.suchfeld {
  position: relative;
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
}
/* Lupe aus zwei Pseudoelementen: Ring und Griff. Kein Bild noetig. */
.suchfeld::before {
  content: "";
  position: absolute;
  left: 1.1rem;
  top: 1.33rem;              /* Mitte der Eingabe, nicht Mitte der Leiste -  */
  width: .72rem; height: .72rem;   /* sonst rutscht die Lupe, sobald der    */
  border: 2px solid var(--leise);  /* Knopf umbricht                        */
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}
.suchfeld::after {
  content: "";
  position: absolute;
  left: 1.78rem;
  top: 1.85rem;
  width: .42rem; height: 2px;
  background: var(--leise);
  border-radius: 2px;
  transform: rotate(45deg);
  transform-origin: left center;
  pointer-events: none;
  z-index: 1;
}
.suchfeld input {
  flex: 1 1 24rem;
  min-width: 0;
  padding-left: 2.75rem;
}
.suchfeld button { flex: none; }

.filterleiste {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin: 0 0 2rem;
}
.pille {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem 1rem;
  border-radius: var(--rund-pille);
  border: 1px solid var(--linie-stark);
  background: var(--papier);
  color: var(--tinte);
  text-decoration: none;
  font-size: .89rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.pille:hover { background: var(--gruen-blass); border-color: var(--gruen-rand); color: var(--gruen); }
.pille.aktiv {
  background: var(--fuell);
  border-color: var(--fuell);
  color: var(--fuell-ink);
  font-weight: 600;
}
.pille.aktiv::before {
  content: "";
  width: .4rem; height: .4rem;
  border-radius: 50%;
  background: var(--limette);
}


/* -------------------------------------------------------------------------
   9  Aktenliste
   ------------------------------------------------------------------------- */

.jahrgang { margin-bottom: 2.25rem; }
.jahrgang > h2 {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 0 0 .85rem;
  font-size: 1.05rem;
  letter-spacing: .01em;
}
.anzahl {
  padding: .12rem .6rem;
  border-radius: var(--rund-pille);
  background: var(--gruen-blass);
  color: var(--gruen);
  font-size: .78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

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

.akte {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem 1.35rem;
  flex-wrap: wrap;
  padding: 1.05rem 1.35rem;
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  box-shadow: var(--schatten);
  overflow: hidden;
  transition: box-shadow .14s ease, border-color .14s ease;
}
.akte:hover { box-shadow: var(--schatten-hoch); border-color: var(--gruen-rand); }

/* Ungelesene Unterlagen bekommen einen Farbstreifen an der Kante. */
.akte.neu::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(180deg, var(--limette) 0%, var(--gruen) 100%);
}
.akte.neu { padding-left: 1.6rem; }

/* Symbolflaeche links - tritt an die Stelle des Miniaturbildes der Vorlage. */
.akte-sinnbild {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.85rem; height: 2.85rem;
  border-radius: var(--rund-klein);
  background: var(--gruen-blass);
  border: 1px solid var(--gruen-rand);
  color: var(--gruen);
}
.akte-sinnbild svg { width: 1.4rem; height: 1.4rem; }

.akte-text { flex: 1 1 20rem; min-width: 0; }
.akte-art {
  margin: 0 0 .2rem;
  font-size: .71rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--gruen);
}
.akte-text h3 { overflow-wrap: anywhere; }
.akte-ort {
  margin: .3rem 0 0;
  font-size: .88rem;
  color: var(--leise);
}
.akte-tat {
  display: flex;
  align-items: center;
  gap: .9rem;
  flex-wrap: wrap;
  margin-left: auto;
}


/* -------------------------------------------------------------------------
   10  Meldungen und Marker
   -------------------------------------------------------------------------
   .hinweis nimmt wahlweise ein Inline-SVG als erstes Kind. Fehlt es, setzt
   die Regel darunter eine farbige Scheibe an dieselbe Stelle, damit die
   Meldung nie nur ueber ihre Hintergrundfarbe spricht.
   ------------------------------------------------------------------------- */

.hinweis {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  margin: 0 0 1.25rem;
  padding: .95rem 1.15rem;
  border-radius: var(--rund-klein);
  background: var(--gruen-blass);
  border: 1px solid var(--gruen-rand);
  color: var(--tinte);
  font-size: .95rem;
  line-height: 1.55;
}
.hinweis > svg {
  flex: none;
  width: 1.3rem; height: 1.3rem;
  margin-top: .1rem;
  color: var(--gruen);
}
.hinweis:not(:has(> svg))::before {
  content: "";
  flex: none;
  width: 1.05rem; height: 1.05rem;
  margin-top: .28rem;
  border-radius: 50%;
  background: var(--gruen);
}
.hinweis strong { font-weight: 700; }
.hinweis p:last-child { margin-bottom: 0; }

.hinweis.gut    { background: var(--gut-bett);    border-color: var(--gut-rand); }
.hinweis.warn   { background: var(--warn-bett);   border-color: var(--warn-rand); }
.hinweis.fehler { background: var(--fehler-bett); border-color: var(--fehler-rand); }

.hinweis.gut    > svg { color: var(--gut); }
.hinweis.warn   > svg { color: var(--warn); }
.hinweis.fehler > svg { color: var(--fehler); }

.hinweis.gut:not(:has(> svg))::before    { background: var(--gut); }
.hinweis.warn:not(:has(> svg))::before   { background: var(--warn); }
.hinweis.fehler:not(:has(> svg))::before { background: var(--fehler); }

/* Zustandspille. Der Punkt davor traegt die Aussage mit, nicht nur die Farbe. */
.marker {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .24rem .7rem;
  border-radius: var(--rund-pille);
  background: var(--gruen-blass);
  border: 1px solid var(--gruen-rand);
  color: var(--gruen);
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap;
  vertical-align: baseline;
}
.marker::before {
  content: "";
  width: .42rem; height: .42rem;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.marker.gut    { background: var(--gut-bett);    border-color: var(--gut-rand);    color: var(--gut); }
.marker.warn   { background: var(--warn-bett);   border-color: var(--warn-rand);   color: var(--warn); }
.marker.offen  { background: var(--warn-bett);   border-color: var(--warn-rand);   color: var(--warn); }
/* "offen" pulst nicht, blinkt nicht - es ist einfach die einzige Pille mit
   einem Ring, damit sie sich auch in Graustufen abhebt. */
.marker.offen::before { box-shadow: 0 0 0 2px var(--warn-bett), 0 0 0 3px currentColor; }


/* -------------------------------------------------------------------------
   11  Tabellen
   -------------------------------------------------------------------------
   Kopfzeile klein, in Grossbuchstaben und gesperrt; Zeilen mit ruhiger
   Trennlinie; rechte Spalte fuer Zahlen und Knoepfe.
   ------------------------------------------------------------------------- */

table {
  width: 100%;
  border-collapse: collapse;
  font-size: .94rem;
}
thead th {
  text-align: left;
  padding: .85rem 1.1rem;
  background: var(--creme);
  border-bottom: 1px solid var(--linie-stark);
  color: var(--leise);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  white-space: nowrap;
}
.gruppe thead th { background: var(--gruen-zart); }

td {
  padding: .9rem 1.1rem;
  border-bottom: 1px solid var(--linie);
  vertical-align: top;
}
td:first-child, th:first-child { padding-left: 1.4rem; }
td:last-child,  th:last-child  { padding-right: 1.4rem; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background .1s ease; }
tbody tr:hover td { background: var(--gruen-zart); }

th.rechts, td.rechts { text-align: right; font-variant-numeric: tabular-nums; }
td .wer { display: inline-block; margin-top: .15rem; }
td form { margin: 0; }
td .marker, td .knopf, td button { vertical-align: middle; }
/* Knoepfe in Tabellenzeilen sind kleiner - sie sollen die Zeile nicht dehnen. */
td .knopf, td button { padding: .45rem .9rem; font-size: .87rem; }

/* Tabellen ohne Kopfzeile sind Kennzahlenlisten (Verwaltung, "Bestand"):
   Bezeichnung links, Wert rechts und deutlich. */
table:not(:has(thead)) td:first-child { font-weight: 500; }
table:not(:has(thead)) td.rechts {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--gruen);
}


/* -------------------------------------------------------------------------
   12  Leerzustaende, Code, Kleinkram
   ------------------------------------------------------------------------- */

.leerzustand {
  position: relative;
  padding: 3.5rem 2rem;
  text-align: center;
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  box-shadow: var(--schatten);
  color: var(--leise);
}
/* Zwei uebereinanderliegende Blaetter, nur aus Rand und Schatten gebaut. */
.leerzustand::before {
  content: "";
  display: block;
  width: 3.6rem; height: 4.4rem;
  margin: 0 auto 1.5rem;
  border-radius: 10px;
  background: linear-gradient(170deg, var(--gruen-blass) 0%, var(--papier) 100%);
  border: 1px solid var(--gruen-rand);
  transform: rotate(-5deg);
  box-shadow: .55rem .5rem 0 -1px var(--papier), .6rem .55rem 0 0 var(--linie-stark);
}
.leerzustand h2 { margin: 0 0 .55rem; color: var(--tinte); font-size: 1.2rem; }
.leerzustand p { margin: 0 auto .9rem; max-width: 32rem; }
.leerzustand p:last-child { margin-bottom: 0; }

.leer {
  margin: 0;
  padding: 2.75rem 1.5rem;
  text-align: center;
  color: var(--leise);
  background: var(--papier);
  border: 1px dashed var(--linie-stark);
  border-radius: var(--rund);
}

pre {
  margin: 0 0 1.1rem;
  padding: 1rem 1.15rem;
  background: var(--feld-bett);
  border: 1px solid var(--linie);
  border-radius: var(--rund-klein);
  overflow-x: auto;
  font: .84rem/1.65 var(--schrift-fest);
  color: var(--tinte);
}
code {
  padding: .12rem .4rem;
  border-radius: 6px;
  background: var(--gruen-blass);
  color: var(--tinte);
  font: .87em var(--schrift-fest);
  overflow-wrap: anywhere;
}
pre code { padding: 0; background: none; }

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


/* -------------------------------------------------------------------------
   13  Schmale Bildschirme
   -------------------------------------------------------------------------
   Ohne JavaScript gibt es kein Auf- und Zuklappen. Die Seitenleiste wird
   deshalb zur waagerechten Leiste, deren Eintraege umbrechen statt zu
   verschwinden - es bleibt nichts hinter einem Knopf verborgen.
   ------------------------------------------------------------------------- */

@media (max-width: 1180px) {
  :root { --leiste: 15.5rem; }
  main.innen { padding: 2.25rem 2rem 3rem; }
  .fuss .innen { padding: 1.25rem 2rem 2rem; }
}

@media (max-width: 960px) {
  .rahmen { flex-direction: column; min-height: 0; }

  .kopf {
    flex: none;
    width: auto;
    height: auto;
    position: sticky;
    top: 0;
    overflow: visible;
    border-right: 0;
    border-bottom: 1px solid var(--linie);
    box-shadow: 0 2px 10px -6px rgba(15, 42, 15, .3);
  }
  .kopf .innen {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem .9rem;
    min-height: 0;
    padding: .7rem 1.25rem .8rem;
  }
  .kopf nav {
    order: 3;
    flex: 1 1 100%;
    flex-direction: row;
    flex-wrap: wrap;
    gap: .35rem;
  }
  .kopf nav a { padding: .55rem .8rem; font-size: .92rem; }
  .kopf nav a svg { width: 1.2rem; height: 1.2rem; }
  .kopf nav a[aria-current="page"]::after,
  .kopf nav a.aktiv::after { margin-left: .15rem; }

  .beistand {
    order: 4;
    flex: 1 1 100%;
    padding: .6rem .85rem;
    font-size: .84rem;
  }

  .kopf .konto {
    order: 2;
    margin: 0 0 0 auto;
    padding-top: 0;
    border-top: 0;
    flex-direction: row;
    align-items: center;
    gap: .5rem;
  }
  .kopf .wer::before { width: 1.9rem; height: 1.9rem; }
  .kopf .raus { padding: .5rem .7rem; }

  main.innen { padding: 1.9rem 1.5rem 2.75rem; }
  .fuss .innen { padding: 1.2rem 1.5rem 1.9rem; }

  /* Anmeldung: Buehne wird zum kompakten Kopfband ueber dem Formular. */
  .rahmen.anmelde { flex-direction: column; }
  .buehne {
    flex: none;
    max-width: none;
    gap: 1rem;
    padding: 1.75rem 1.75rem 1.9rem;
  }
  .buehne::before { right: -16rem; top: -16rem; }
  .buehne::after { display: none; }
  /* NICHT ausblenden: am Telefon blieb sonst nur die Ueberschrift stehen,
     und die drei Schritte sind genau das, was ein Erstbenutzer braucht. */
  .buehne-fuss { display: none; }
  .buehne-satz { font-size: .95rem; }
  .buehne-titel { font-size: clamp(1.55rem, 5vw, 2.1rem); }
  .schritte {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: .5rem;
    margin-top: .25rem;
  }
  .schritt {
    grid-template-columns: 1.75rem 1fr;
    column-gap: .6rem;
    padding: .7rem .8rem;
  }
  .schritt::before { width: 1.75rem; height: 1.75rem; font-size: .85rem; grid-row: 1; }
  .schritt strong { font-size: .87rem; }
  .schritt em { font-size: .84rem; }
  .rahmen.anmelde main.innen { padding: 2.25rem 1.5rem 1rem; }
  .rahmen.anmelde .fuss .innen { padding: 0 1.5rem 2rem; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  main.innen { padding: 1.5rem 1.1rem 2.5rem; }
  .fuss .innen { padding: 1.1rem 1.1rem 1.75rem; }
  .kopf .innen { padding: .65rem 1.1rem .75rem; }

  .gruppe { padding: 1.25rem 1.15rem; border-radius: var(--rund-klein); }
  .karte { padding: 1.5rem; border-radius: var(--rund-klein); }
  .huelle { border-radius: var(--rund-klein); }

  .akte { align-items: flex-start; padding: 1rem 1.1rem; }
  .akte.neu { padding-left: 1.35rem; }
  .akte-tat { width: 100%; margin-left: 0; justify-content: space-between; }
  .akte-tat .knopf { flex: 1 1 auto; }

  /* In der Spaltenrichtung waere flex-basis eine HOEHE - deshalb hier auf
     auto zuruecksetzen, sonst klafft ueber dem Zaehler eine Luecke. */
  .seitenkopf { flex-direction: column; gap: 1rem; }
  .seitenkopf > div { flex: 0 0 auto; width: 100%; }
  .zaehler { margin-top: 0; align-self: flex-start; }

  .suchfeld input { flex: 1 1 100%; }
  .suchfeld button { width: 100%; }

  .reihe { grid-template-columns: 1fr; gap: .9rem; }

  td:first-child, th:first-child { padding-left: 1rem; }
  td:last-child,  th:last-child  { padding-right: 1rem; }
  td, thead th { padding-left: .8rem; padding-right: .8rem; }

  .schritte { grid-auto-flow: row; }
  .schritt::before { grid-row: 1 / span 2; }
  .buehne { padding: 1.4rem 1.15rem 1.5rem; }
}

@media (max-width: 420px) {
  .kopf nav a { flex: 1 1 calc(50% - .2rem); }
  .kopf .wer { font-size: .86rem; }
  .leerzustand { padding: 2.5rem 1.1rem; }
  input.code { font-size: 1.6rem; letter-spacing: .26em; text-indent: .26em; }
}


/* -------------------------------------------------------------------------
   14  Bewegung und Druck
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
  button:active, .knopf:active { transform: none; }
}

@media (forced-colors: active) {
  .kopf nav a[aria-current="page"], .pille.aktiv, button, .knopf { forced-color-adjust: none; }
  .akte, .gruppe, .huelle, .karte, .marker, .hinweis { border: 1px solid CanvasText; }
}

@media print {
  .kopf, .buehne, .filterleiste, .suchleiste, .akte-tat, .fuss { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .rahmen { display: block; }
  main.innen { max-width: none; padding: 0; }
  .gruppe, .huelle, .akte, .karte { box-shadow: none; border: 1px solid #999; break-inside: avoid; }
}

/* ------------------------------------------------- Nachtrag: Stammdaten
   Drei Bausteine, die die Listen und die Bearbeitung brauchen und die im
   ersten Wurf fehlten, weil es damals weder Listen noch Bearbeitung gab. */

/* Gedankenstrich fuer leere Felder - leise, aber lesbar (5,46:1). */
.leise { color: var(--leise); }

/* Der Leerzustand kann auch als h3 auftreten, wenn er unter einer h2 steht. */
.leerzustand h3 {
  margin: 0 0 .55rem;
  color: var(--tinte);
  font-size: 1.2rem;
}

/* Aufklappen ohne JavaScript. Die Zusammenfassung ist ein ruhiger Knopf,
   der geoeffnete Teil ein eingerueckter Kasten - damit die Zeile darunter
   nicht wie ein neuer Tabelleninhalt wirkt. */
details > summary {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  cursor: pointer;
  list-style: none;
  padding: .3rem .7rem;
  border: 1px solid var(--linie-stark);
  border-radius: var(--rund-knopf);
  background: var(--papier);
  color: var(--gruen);
  font-size: .88rem;
  font-weight: 600;
  white-space: nowrap;
}
details > summary::-webkit-details-marker { display: none; }
details > summary::before {
  content: "";
  width: .42rem; height: .42rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg) translate(-1px, -1px);
  transition: transform .12s ease;
}
details[open] > summary::before { transform: rotate(45deg) translate(-1px, -1px); }
details > summary:hover { background: var(--gruen-zart); }
details > summary:focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: 2px;
}
details[open] > summary { margin-bottom: .7rem; }
details > form {
  text-align: left;
  padding: .9rem 1rem 1rem;
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  background: var(--gruen-zart);
}

/* ==================================================== Nachtrag: Übersicht
   Bausteine für die Objekt-Detailseite und die Unterlagen-Übersicht.

   Dazu eine Abstandsskala. Das übrige Stylesheet trägt die Abstände noch
   einzeln; neue Bausteine greifen auf diese Werte zu, damit nicht die
   nächste Seite wieder eigene Zahlen erfindet. Die Stufen sind eine
   Vierer-Reihe - genug Auswahl, um Rhythmus zu haben, wenig genug, um sich
   nicht zu verlaufen. */
:root {
  --luft-1: .45rem;    /* innerhalb einer Zeile                  */
  --luft-2: .9rem;     /* zwischen verwandten Zeilen             */
  --luft-3: 1.6rem;    /* zwischen Bausteinen                    */
  --luft-4: 2.6rem;    /* zwischen Abschnitten einer Seite       */
}

/* Brotkrume: sagt, wo man ist, und führt einen Schritt zurück. */
.brotkrume {
  margin: 0 0 var(--luft-2);
  display: flex;
  align-items: center;
  gap: var(--luft-1);
  font-size: .88rem;
  color: var(--leise);
}
.brotkrume a { color: var(--gruen); text-decoration: none; font-weight: 600; }
.brotkrume a:hover { text-decoration: underline; text-underline-offset: 3px; }
.brotkrume span { color: var(--linie-stark); }

/* Kennzahlenreihe: mehrere .zaehler nebeneinander, die auf schmalem Bild
   umbrechen statt zu schrumpfen. */
.kennzahlen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--luft-2);
  margin: 0 0 var(--luft-4);
}
.kennzahlen .zaehler { margin: 0; }

/* Zwischenüberschrift innerhalb eines Kastens. Sie muss sich deutlich von
   der h2 darüber unterscheiden, sonst liest sich der Kasten als Liste
   gleichrangiger Dinge. */
.gruppe > h3,
h3 {
  display: flex;
  align-items: center;
  gap: var(--luft-1);
  margin: var(--luft-3) 0 var(--luft-2);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.005em;
  color: var(--tinte);
}
.gruppe > h3:first-of-type { margin-top: var(--luft-2); }
.leerzustand h3 { display: block; margin: 0 0 .55rem; font-size: 1.2rem; }

/* Ein Marker darf in einer Überschrift stehen, ohne sie mitzuvergrößern. */
h1 .marker, h2 .marker { font-size: .7rem; vertical-align: middle; }

/* Kürzel und Dateinamen im Fließtext. */
code {
  padding: .1rem .4rem;
  border-radius: var(--rund-knopf);
  background: var(--gruen-zart);
  border: 1px solid var(--linie);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .86em;
  color: var(--gruen);
}

/* Mehrere Filterleisten untereinander brauchen weniger Luft als eine
   einzelne, sonst zerfällt der Kopf der Seite in lauter Streifen. */
.filterleiste + .filterleiste { margin-top: calc(var(--luft-2) * -.35); }

/* Tabellen folgen direkt auf ihre Überschrift, Absätze darunter bekommen
   Abstand - sonst klebt der Hinweistext an der letzten Zeile. */
.huelle + .unter { margin-top: var(--luft-2); }

/* Bearbeitungszeile: hängt unter ihrer Tabellenzeile und gehört sichtbar
   dazu. Ein Formular in einer Tabellenzelle wird auf Spaltenbreite
   gequetscht - deshalb eine eigene Zeile über alle Spalten. */
tr.zeile-bearbeiten > td {
  padding-top: 0;
  border-top: 0;
}
tr.zeile-bearbeiten details > form { margin-bottom: var(--luft-2); }
tr.zeile-bearbeiten details > form:last-of-type { margin-bottom: 0; }
tr.zeile-bearbeiten .reihe { max-width: 62rem; }