/* ==========================================================================
   Gestaltungssystem der Plattform
   --------------------------------------------------------------------------
   Eine Datei für alle Werkzeuge. Weil sie unter derselben Herkunft liegen,
   binden sie dieselbe Datei ein - das einheitliche Erscheinungsbild ist damit
   keine Absichtserklärung, sondern eine technische Tatsache.

   MOBIL ZUERST. Jede Regel gilt zunächst für das schmale Gerät; die
   Medienabfragen weiter unten bauen daraus die grosse Ansicht. Andersherum
   entstehen die Oberflächen, bei denen man auf dem Telefon quer scrollen muss.

   Farbrollen - ein Element trägt genau eine:

   --recht-*   Fachliche Aussage der Werkzeuge (Recht, Last, gegenseitig).
   --zustand-* Zustand: in Ordnung, prüfen, fehlt. Auch Kontozustände.
   --marke     Marke. Kopfbalken und genau *eine* primäre Aktion je Ansicht.
   ========================================================================== */

:root {
  /* ----------------------------------------------------------- Farbe ---
     Neutral warm gehalten (Stein statt Blaugrau). Ein kühles Grau neben
     diesem Orange sieht aus, als wären zwei Entwürfe zusammengeklebt. */
  --ink:        #1C1917;
  --ink-2:      #44403C;
  --ink-3:      #57534E;
  --muted:      #79716B;
  --rule:       #E7E5E4;
  --rule-soft:  #F2F1F0;
  --surface:    #FFFFFF;
  --surface-2:  #FAFAF9;
  --surface-3:  #F5F5F4;
  --ground:     #F7F7F6;

  /* Marke. Unverändert aus grundbuch-gis übernommen - die Farbe ist
     gesetzt, die Art sie einzusetzen ist es, was hier neu ist. */
  --marke:      #E35205;
  --marke-tief: #C24406;
  --marke-hell: #FB8B3C;
  --marke-weich:#FEF3EC;
  --marke-rand: #F8D9C4;

  /* Zustand */
  --zustand-ok:      #15803D;
  --zustand-warn:    #B45309;
  --zustand-bad:     #B4231C;
  --zustand-neutral: #57534E;
  --zustand-ok-weich:      #ECF7F0;
  --zustand-warn-weich:    #FDF5E7;
  --zustand-bad-weich:     #FCEEED;
  --zustand-neutral-weich: #F2F1F0;

  /* Fachliche Aussagen der Werkzeuge */
  --recht:        #15803D;
  --last:         #B4231C;
  --gegenseitig:  #1D4ED8;
  --stamm:        #4338CA;
  --unbekannt:    #79716B;

  /* ------------------------------------------------------- Typografie ---
     Die Schriftgrössen wachsen mit dem Fenster. Auf dem Telefon ist eine
     Überschrift von 2,3 rem eine Wand, auf dem Bildschirm ist eine von
     1,3 rem kleinlaut. */
  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --schrift-fest: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --gr-anzeige: clamp(1.55rem, 1.25rem + 1.5vw, 2.15rem);
  --gr-titel:   clamp(1.2rem,  1.08rem + 0.6vw, 1.5rem);
  --gr-teil:    1.0625rem;
  --gr-text:    0.9375rem;
  --gr-klein:   0.8125rem;
  --gr-etikett: 0.6875rem;

  /* --------------------------------------------------------- Raster --- */
  --raum-1: 4px;
  --raum-2: 8px;
  --raum-3: 12px;
  --raum-4: 16px;
  --raum-5: 24px;
  --raum-6: 32px;
  --raum-7: 48px;

  --rund-s: 8px;
  --rund:   12px;
  --rund-l: 16px;
  --rund-voll: 999px;

  /* Geschichtet statt einer harten Kante. Ein einzelner Schlagschatten
     wirkt aufgeklebt; zwei übereinander lassen die Fläche schweben. */
  --schatten-1: 0 1px 2px rgba(28,25,23,.04), 0 1px 3px rgba(28,25,23,.05);
  --schatten-2: 0 2px 4px rgba(28,25,23,.03), 0 8px 22px -8px rgba(28,25,23,.13);
  --schatten-3: 0 4px 8px rgba(28,25,23,.04), 0 18px 44px -14px rgba(28,25,23,.20);

  --kopfhoehe: 56px;

  /* Fingerkuppe. Alles, was angetippt wird, ist mindestens so gross -
     44 px ist die Untergrenze, unter der Bedienfehler häufig werden. */
  --tippziel: 44px;
}

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

html {
  -webkit-text-size-adjust: 100%;   /* iOS skaliert Text im Querformat sonst */
  scroll-behavior: smooth;
}

body {
  font-family: var(--schrift);
  background: var(--ground);
  color: var(--ink);
  font-size: var(--gr-text);
  line-height: 1.55;
  min-height: 100dvh;               /* dvh: nicht unter der Adressleiste durch */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}

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

h1, h2, h3 { line-height: 1.25; letter-spacing: -0.017em; font-weight: 600; }
h1 { font-size: var(--gr-titel); }
h2 { font-size: var(--gr-teil); }
h3 { font-size: var(--gr-text); }

::selection { background: var(--marke-weich); color: var(--marke-tief); }

:focus-visible {
  outline: 2px solid var(--marke);
  outline-offset: 2px;
  border-radius: var(--rund-s);
}

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

/* ============================================================ Kopfbalken ===
   Auf dem Telefon zwei Zeilen: Marke und Konto oben, die Werkzeuge darunter
   als scrollbare Leiste. Ab 860 px passt alles in eine Zeile.

   Der Balken ist derselbe über jedem Werkzeug. Er ist der sichtbarste Teil
   der Vereinheitlichung: wer vom Grundbuch zum Neubau-Radar wechselt, soll
   merken, dass er dieselbe Anwendung nicht verlassen hat. */

.plattform-kopf {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255,255,255,.85);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--rule);
  /* Der Markenstrich sitzt oben und ist das einzige grossflächige Orange
     der Seite. Alles Weitere trägt die Farbe nur punktuell. */
  box-shadow: inset 0 3px 0 0 var(--marke);
}

@supports not (backdrop-filter: blur(1px)) {
  .plattform-kopf { background: var(--surface); }
}

/* Umbrechend: auf dem Telefon rutscht die Reiterleiste per order/flex-basis
   in eine zweite Zeile. So gibt es trotzdem nur *eine* Navigation im
   Markup - zwei wären für Vorleseprogramme zwei, und die zweite wäre immer
   die veraltete. */
.kopf-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--raum-3);
  min-height: var(--kopfhoehe);
  padding: var(--raum-2) var(--raum-4) 0;
  max-width: 1240px;
  margin: 0 auto;
}

.plattform-marke {
  display: inline-flex;
  align-items: center;
  gap: var(--raum-2);
  font-weight: 640;
  font-size: 0.98rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  flex-shrink: 0;
  margin-right: auto;
}
.plattform-marke:hover { color: var(--ink); }
.marken-zeichen {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: var(--rund-s);
  background: linear-gradient(140deg, var(--marke-hell), var(--marke));
  color: #fff;
  box-shadow: 0 1px 2px rgba(226,82,5,.35);
}

/* Werkzeugwechsel. Nur freigegebene Bereiche stehen hier - ein Reiter, der
   beim Anklicken abweist, ist eine Falle. */
.plattform-reiter {
  order: 3;
  flex-basis: 100%;
  display: flex;
  gap: var(--raum-1);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* Bis an den Rand scrollen: eine Leiste, die vor dem Seitenrand aufhört,
     sieht aus, als wäre sie zu Ende. */
  margin: 0 calc(-1 * var(--raum-4));
  padding: 0 var(--raum-4) var(--raum-3);
}
.plattform-reiter::-webkit-scrollbar { display: none; }

.plattform-reiter a {
  display: inline-flex;
  align-items: center;
  gap: var(--raum-2);
  padding: 7px 13px;
  border-radius: var(--rund-voll);
  font-size: var(--gr-klein);
  font-weight: 520;
  color: var(--ink-3);
  text-decoration: none;
  white-space: nowrap;
  background: var(--surface-3);
  border: 1px solid transparent;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.plattform-reiter a:hover { background: var(--rule-soft); color: var(--ink); border-color: var(--rule); }
.plattform-reiter a[aria-current="page"] {
  background: var(--marke-weich);
  color: var(--marke-tief);
  border-color: var(--marke-rand);
}

/* ------------------------------------------------------- Kontomenü ---
   Ein <details>-Element statt eines Skripts: es klappt ohne JavaScript auf,
   ist von der Tastatur bedienbar und braucht keine Bibliothek. Die paar
   Zeilen Skript im Grundgerüst schliessen es nur beim Klick daneben. */

.konto-menue { position: relative; flex-shrink: 0; }

.konto-menue > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--raum-2);
  min-height: var(--tippziel);
  padding: 4px 6px 4px 4px;
  border-radius: var(--rund-voll);
  border: 1px solid transparent;
  transition: background .16s ease, border-color .16s ease;
}
.konto-menue > summary::-webkit-details-marker { display: none; }
.konto-menue > summary:hover { background: var(--surface-3); border-color: var(--rule); }
.konto-menue[open] > summary { background: var(--surface-3); border-color: var(--rule); }

.kuerzel {
  width: 32px; height: 32px;
  flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: var(--rund-voll);
  background: linear-gradient(140deg, var(--ink-2), var(--ink));
  color: #fff;
  font-size: var(--gr-etikett);
  font-weight: 700;
  letter-spacing: .02em;
}

.konto-namen { display: none; }

.menue-blatt {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 232px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--rund);
  box-shadow: var(--schatten-3);
  padding: var(--raum-2);
  z-index: 50;
}
.menue-kopf {
  padding: var(--raum-2) var(--raum-3) var(--raum-3);
  border-bottom: 1px solid var(--rule-soft);
  margin-bottom: var(--raum-2);
}
.menue-kopf strong { display: block; font-size: var(--gr-text); font-weight: 600; }
.menue-kopf span { font-size: var(--gr-klein); color: var(--muted); overflow-wrap: anywhere; }

.menue-blatt a,
.menue-blatt button {
  display: flex;
  align-items: center;
  gap: var(--raum-2);
  width: 100%;
  min-height: var(--tippziel);
  padding: 0 var(--raum-3);
  border: none;
  background: none;
  border-radius: var(--rund-s);
  font: inherit;
  font-size: var(--gr-klein);
  color: var(--ink-2);
  text-decoration: none;
  cursor: pointer;
  text-align: left;
}
.menue-blatt a:hover, .menue-blatt button:hover { background: var(--surface-3); color: var(--ink); }
.menue-blatt form { margin: 0; }
.menue-blatt hr { border: none; border-top: 1px solid var(--rule-soft); margin: var(--raum-2) 0; }

.merkzeichen {
  margin-left: auto;
  min-width: 20px;
  padding: 1px 7px;
  border-radius: var(--rund-voll);
  background: var(--marke);
  color: #fff;
  font-size: var(--gr-etikett);
  font-weight: 700;
  text-align: center;
  line-height: 1.5;
}

/* ================================================================= Raum === */

.blatt        { max-width: 1240px; margin: 0 auto; padding: var(--raum-5) var(--raum-4) var(--raum-7); }
.blatt-schmal { max-width: 440px;  margin: 0 auto; padding: var(--raum-6) var(--raum-4) var(--raum-7); }

.blatt-kopf { margin-bottom: var(--raum-5); }
.blatt-kopf h1 { font-size: var(--gr-anzeige); letter-spacing: -0.025em; }
.blatt-kopf p  { color: var(--muted); margin-top: var(--raum-2); max-width: 64ch; }

/* ================================================================ Karte === */

.karte {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--rund-l);
  padding: var(--raum-4);
  box-shadow: var(--schatten-1);
}
.karte + .karte { margin-top: var(--raum-4); }
.karte-kopf { margin-bottom: var(--raum-4); }
.karte-kopf h2 { display: flex; align-items: center; gap: var(--raum-2); flex-wrap: wrap; }
.karte-kopf p  { color: var(--muted); font-size: var(--gr-klein); margin-top: var(--raum-1); max-width: 70ch; }

/* ======================================================= Werkzeugkacheln ===
   Freigegebene und gesperrte stehen bewusst nebeneinander. Ein Werkzeug zu
   verbergen, das es gibt, erzeugt nur die Frage, warum ein Kollege etwas
   sieht, das man selbst nicht sieht. */

.werkzeuge {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--raum-3);
}

.werkzeug {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--raum-3);
  padding: var(--raum-4);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--rund-l);
  box-shadow: var(--schatten-1);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform .2s cubic-bezier(.2,.7,.4,1), box-shadow .2s ease, border-color .2s ease;
}

/* Ein sehr leiser Verlauf von oben. Er ist einzeln kaum wahrnehmbar und
   nimmt der Kachelfläche trotzdem das Papierartige. */
.werkzeug::before {
  content: "";
  position: absolute; inset: 0 0 auto;
  height: 96px;
  background: linear-gradient(180deg, var(--marke-weich), transparent);
  opacity: 0;
  transition: opacity .22s ease;
  pointer-events: none;
}
a.werkzeug:hover {
  transform: translateY(-2px);
  box-shadow: var(--schatten-2);
  border-color: var(--marke-rand);
}
a.werkzeug:hover::before { opacity: .85; }
a.werkzeug:active { transform: translateY(0); }
.werkzeug > * { position: relative; }

.werkzeug-zeichen {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: var(--rund);
  background: var(--marke-weich);
  color: var(--marke-tief);
  border: 1px solid var(--marke-rand);
}
.werkzeug h2 { font-size: var(--gr-teil); }
.werkzeug p  { color: var(--ink-3); font-size: var(--gr-klein); flex: 1; }

.werkzeug-fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum-3);
  padding-top: var(--raum-3);
  border-top: 1px solid var(--rule-soft);
  font-size: var(--gr-etikett);
  color: var(--muted);
  letter-spacing: .02em;
}
.werkzeug-oeffnen {
  display: inline-flex; align-items: center; gap: var(--raum-1);
  color: var(--marke-tief); font-weight: 620; white-space: nowrap;
}
.werkzeug-oeffnen svg { transition: transform .2s ease; }
a.werkzeug:hover .werkzeug-oeffnen svg { transform: translateX(3px); }

.werkzeug.zu { background: var(--surface-2); box-shadow: none; border-style: dashed; }
.werkzeug.zu .werkzeug-zeichen {
  background: var(--zustand-neutral-weich); color: var(--muted); border-color: var(--rule);
}
.werkzeug.zu h2, .werkzeug.zu p { color: var(--muted); }

/* =============================================================== Marken === */

.marke-schild {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  border-radius: var(--rund-voll);
  font-size: var(--gr-etikett);
  font-weight: 650;
  letter-spacing: .015em;
  white-space: nowrap;
  border: 1px solid transparent;
}
.schild-frei     { background: var(--zustand-ok-weich);      color: var(--zustand-ok);      border-color: #C8E6D3; }
.schild-wartet   { background: var(--zustand-warn-weich);    color: var(--zustand-warn);    border-color: #EEDBB6; }
.schild-gesperrt { background: var(--zustand-bad-weich);     color: var(--zustand-bad);     border-color: #EFCCC9; }
.schild-still    { background: var(--zustand-neutral-weich); color: var(--zustand-neutral); border-color: var(--rule); }
.schild-admin    { background: var(--marke-weich);           color: var(--marke-tief);      border-color: var(--marke-rand); }

/* ============================================================= Aktionen === */

.aktion-primaer, .aktion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--raum-2);
  min-height: var(--tippziel);
  padding: 0 var(--raum-4);
  border-radius: var(--rund-s);
  font-family: inherit;
  font-size: var(--gr-text);
  font-weight: 560;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .1s ease;
}
.aktion-primaer:active, .aktion:active { transform: translateY(1px); }

.aktion-primaer {
  background: linear-gradient(180deg, var(--marke), var(--marke-tief));
  color: #fff;
  border: 1px solid var(--marke-tief);
  box-shadow: 0 1px 2px rgba(194,68,6,.28);
}
.aktion-primaer:hover { background: var(--marke-tief); color: #fff; }
.aktion-primaer:disabled { background: var(--muted); border-color: var(--muted); box-shadow: none; cursor: not-allowed; }

.aktion {
  background: var(--surface);
  color: var(--ink-2);
  border: 1px solid var(--rule);
  font-size: var(--gr-klein);
  box-shadow: var(--schatten-1);
}
.aktion:hover { background: var(--surface-3); color: var(--ink); border-color: #D6D3D1; }
.aktion-warnend { color: var(--zustand-bad); border-color: #EFCCC9; }
.aktion-warnend:hover { background: var(--zustand-bad-weich); color: var(--zustand-bad); }

.aktion-breit { width: 100%; }
.aktionsreihe { display: flex; gap: var(--raum-2); flex-wrap: wrap; align-items: center; }

/* ============================================================= Formular === */

.feld { margin-bottom: var(--raum-4); }
.feld > label {
  display: block;
  font-size: var(--gr-klein);
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 6px;
}
.feld input, .feld textarea, .feld select, .eingabe {
  width: 100%;
  font-family: inherit;
  /* 16 px: darunter zoomt iOS beim Antippen in das Feld hinein und der
     Benutzer landet in einer verschobenen Ansicht. */
  font-size: 16px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--rund-s);
  padding: 11px 13px;
  min-height: var(--tippziel);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.feld textarea { resize: vertical; min-height: 88px; line-height: 1.5; }
.feld input::placeholder, .feld textarea::placeholder, .eingabe::placeholder { color: #A8A29E; }
.feld input:focus, .feld textarea:focus, .eingabe:focus {
  outline: none;
  border-color: var(--marke);
  box-shadow: 0 0 0 3px var(--marke-weich);
}
.feld-hinweis { font-size: var(--gr-klein); color: var(--muted); margin-top: 6px; }

/* Haken. Die ganze Zeile ist Tippfläche, nicht nur das Kästchen. */
.haken-liste { display: flex; flex-direction: column; gap: var(--raum-1); }
.haken {
  display: flex;
  align-items: flex-start;
  gap: var(--raum-3);
  padding: var(--raum-3);
  border: 1px solid var(--rule);
  border-radius: var(--rund-s);
  background: var(--surface);
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease;
}
.haken:hover { background: var(--surface-2); border-color: #D6D3D1; }
.haken:has(input:checked) { background: var(--marke-weich); border-color: var(--marke-rand); }
.haken input {
  width: 18px; height: 18px;
  margin-top: 1px;
  flex-shrink: 0;
  accent-color: var(--marke);
}
.haken > span { font-size: var(--gr-text); font-weight: 520; }
.haken small { display: block; color: var(--muted); font-size: var(--gr-klein); font-weight: 400; margin-top: 1px; }

/* ============================================================= Meldungen === */

.meldung {
  display: flex;
  gap: var(--raum-3);
  border-radius: var(--rund);
  padding: var(--raum-3) var(--raum-4);
  margin-bottom: var(--raum-4);
  border: 1px solid transparent;
  font-size: var(--gr-klein);
}
.meldung strong { display: block; margin-bottom: 2px; font-size: var(--gr-text); }
.meldung-schlecht { background: var(--zustand-bad-weich);     border-color: #EFCCC9; color: #7F1A15; }
.meldung-gut      { background: var(--zustand-ok-weich);      border-color: #C8E6D3; color: #0F5C2D; }
.meldung-warnend  { background: var(--zustand-warn-weich);    border-color: #EEDBB6; color: #7A3B06; }
.meldung-still    { background: var(--zustand-neutral-weich); border-color: var(--rule); color: var(--ink-2); }
.meldung a { color: inherit; font-weight: 600; }

/* =============================================================== Tabelle ===
   Auf schmalen Geräten wird jede Zeile zu einer kleinen Karte. Eine Tabelle
   mit fünf Spalten auf 375 px ist entweder unlesbar klein oder erzwingt
   Querscrollen; beides ist schlechter als gestapelte Wertepaare.
   Die Beschriftung kommt aus data-spalte am <td>. */

.tabelle-rahmen { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabelle { width: 100%; border-collapse: collapse; font-size: var(--gr-klein); }
.tabelle th {
  text-align: left;
  font-size: var(--gr-etikett);
  font-weight: 650;
  letter-spacing: .02em;
  color: var(--muted);
  padding: var(--raum-2) var(--raum-3);
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
.tabelle td { padding: var(--raum-3); border-bottom: 1px solid var(--rule-soft); vertical-align: middle; }
.tabelle tr:last-child td { border-bottom: none; }

@media (max-width: 719px) {
  .tabelle, .tabelle tbody, .tabelle tr, .tabelle td { display: block; width: 100%; }
  .tabelle thead { display: none; }
  .tabelle tr {
    border: 1px solid var(--rule);
    border-radius: var(--rund);
    padding: var(--raum-2);
    margin-bottom: var(--raum-2);
    background: var(--surface-2);
  }
  .tabelle td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--raum-4);
    padding: 7px var(--raum-2);
    border-bottom: none;
  }
  .tabelle td::before {
    content: attr(data-spalte);
    font-size: var(--gr-etikett);
    font-weight: 650;
    color: var(--muted);
    letter-spacing: .02em;
    flex-shrink: 0;
  }
  .tabelle td:empty { display: none; }
  .tabelle td[data-spalte=""] { justify-content: flex-end; }
}

.fest  { font-family: var(--schrift-fest); font-size: .8125rem; }
.leise { color: var(--muted); }
.klein { font-size: var(--gr-klein); }

/* ======================================================= Hinweisseiten ===
   Warten, gesperrt, kein Zugriff, Antrag eingegangen. Alle gleich gebaut:
   ein Zeichen, ein Satz, ein Weg hinaus. Vier Seiten, die dem Benutzer
   sagen "hier geht es nicht weiter", sollen nicht vier Entwürfe sein. */

.hinweis-karte { text-align: center; padding: var(--raum-6) var(--raum-4); }
.hinweis-zeichen {
  width: 52px; height: 52px;
  margin: 0 auto var(--raum-4);
  display: grid; place-items: center;
  border-radius: var(--rund);
  background: var(--marke-weich);
  color: var(--marke-tief);
  border: 1px solid var(--marke-rand);
}
.hinweis-zeichen.warnend  { background: var(--zustand-warn-weich); color: var(--zustand-warn); border-color: #EEDBB6; }
.hinweis-zeichen.schlecht { background: var(--zustand-bad-weich);  color: var(--zustand-bad);  border-color: #EFCCC9; }
.hinweis-karte h1 { font-size: var(--gr-titel); margin-bottom: var(--raum-3); }
.hinweis-karte p  { color: var(--muted); font-size: var(--gr-klein); max-width: 46ch; margin-inline: auto; }
.hinweis-karte p + p { margin-top: var(--raum-3); }
.hinweis-karte .aktionsreihe { justify-content: center; margin-top: var(--raum-5); }

/* ============================================================== Antrag === */

.antrag {
  border: 1px solid var(--rule);
  border-radius: var(--rund);
  padding: var(--raum-4);
  background: var(--surface);
}
.antrag + .antrag { margin-top: var(--raum-3); }
.antrag.offen {
  border-color: var(--marke-rand);
  background: linear-gradient(180deg, var(--marke-weich) 0%, var(--surface) 88px);
}
.antrag-kopf {
  display: flex;
  flex-direction: column;
  gap: var(--raum-2);
  margin-bottom: var(--raum-3);
}
.antrag-wer strong { font-size: var(--gr-teil); font-weight: 620; }
.antrag-wer div { overflow-wrap: anywhere; }
.antrag-anliegen {
  background: var(--surface-3);
  border-left: 2px solid var(--rule);
  border-radius: 0 var(--rund-s) var(--rund-s) 0;
  padding: var(--raum-3);
  font-size: var(--gr-klein);
  color: var(--ink-3);
  margin-bottom: var(--raum-4);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.antrag-fuss {
  display: flex; flex-wrap: wrap; gap: var(--raum-2); align-items: center;
  margin-top: var(--raum-4);
  padding-top: var(--raum-4);
  border-top: 1px solid var(--rule-soft);
}

/* ============================================================ Geheimnis ===
   Einmalige Anzeige eines Zugangstokens. Bewusst auffällig: es ist der
   einzige Moment, in dem der Wert lesbar ist. */

.geheimnis {
  background: var(--ink);
  color: #FAFAF9;
  border-radius: var(--rund-s);
  padding: var(--raum-4);
  font-family: var(--schrift-fest);
  font-size: .8125rem;
  line-height: 1.7;
  overflow-wrap: anywhere;
  user-select: all;
  -webkit-user-select: all;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

/* ================================================================ Fuss === */

.plattform-fuss {
  margin-top: var(--raum-6);
  padding-top: var(--raum-4);
  border-top: 1px solid var(--rule);
  font-size: var(--gr-klein);
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: var(--raum-1);
}

/* =============================================================== Mittel === */

@media (min-width: 560px) {
  .werkzeuge { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
  .karte { padding: var(--raum-5); }
  .antrag-kopf { flex-direction: row; justify-content: space-between; align-items: flex-start; gap: var(--raum-4); }
  .plattform-fuss { flex-direction: row; justify-content: space-between; }
  .aktion-breit { width: auto; min-width: 200px; }
}

/* ================================================================ Gross === */

@media (min-width: 860px) {
  :root { --kopfhoehe: 60px; }

  .kopf-zeile { gap: var(--raum-5); padding: 0 var(--raum-5); flex-wrap: nowrap; }
  .plattform-marke { margin-right: 0; font-size: 1.02rem; }

  /* Ab hier passt die Reiterleiste neben die Marke in dieselbe Zeile. */
  .plattform-reiter {
    order: 0;
    flex: 1;
    flex-basis: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    align-items: center;
  }
  .konto-namen {
    display: block;
    font-size: var(--gr-klein);
    font-weight: 560;
    color: var(--ink-2);
    max-width: 15ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .blatt        { padding: var(--raum-6) var(--raum-5) var(--raum-7); }
  .blatt-schmal { padding: var(--raum-7) var(--raum-5); }
}

/* ============================================================== Drucken === */

@media print {
  .plattform-kopf, .aktionsreihe, .antrag-fuss, .konto-menue { display: none !important; }
  body { background: #fff; }
  .karte, .antrag, .werkzeug { box-shadow: none; border-color: #CCC; break-inside: avoid; }
}