/* Gemeinsame Basis-Styles für alle Apps unter dem Dach.
   Helles, klares Weiß-Design mit rotem Marken-Akzent und Inter.
   Karten auf weißem Grund, weiche Schatten, runde Ecken, sanfte
   Micro-Interactions. Einzelne Apps können hier aufsetzen. */

/* Inter selbst gehostet (kein CDN) – Latin-Subset, 5 Schnitte, ~120 KB.
   Quelle: @fontsource/inter@5 (SIL OFL), Dateien in /vendor/inter/. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/vendor/inter/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("/vendor/inter/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("/vendor/inter/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("/vendor/inter/inter-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap; src: url("/vendor/inter/inter-latin-800-normal.woff2") format("woff2"); }

:root {
  --farbe-bg: #ffffff;        /* reines Weiß */
  --farbe-karte: #ffffff;     /* Karten / Flächen */
  --farbe-text: #111827;      /* fast Schwarz */
  --farbe-muted: #6b7280;     /* gedämpfter Text */
  --farbe-akzent: #fe0000;    /* Marke Rot */
  --farbe-akzent-hover: #d40000;
  --farbe-akzent-soft: #fde8e8;   /* heller Rot-Ton für Badges */
  --farbe-akzent-tief: #b91c1c;   /* dunkelroter Badge-Text */
  --farbe-rand: #e5e7eb;      /* hauchdünner Hellgrau-Rand */
  --schatten: 0 1px 3px rgba(17, 24, 39, .06), 0 1px 2px rgba(17, 24, 39, .04);
  --schatten-hover: 0 10px 24px rgba(17, 24, 39, .10), 0 4px 8px rgba(17, 24, 39, .06);
  --radius: 8px;
  --uebergang: all .2s ease-in-out;
  --schrift: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* === Ergänzende Design-Tokens (DESIGN_GUIDELINES.md §5) =================
     Additiv – bestehende Werte oben bleiben unangetastet. Neue UI baut auf
     diesen Skalen auf statt auf Magic Numbers. */

  /* Abstandsskala (4px-Basis) */
  --abstand-1: 4px;  --abstand-2: 8px;   --abstand-3: 12px; --abstand-4: 16px;
  --abstand-6: 24px; --abstand-8: 32px;  --abstand-12: 48px; --abstand-16: 64px;

  /* Typo-Skala (Major Third 1.25, Basis 16px) */
  --text-xs: .75rem; --text-sm: .875rem; --text-base: 1rem; --text-lg: 1.25rem;
  --text-xl: 1.563rem; --text-2xl: 1.953rem; --text-3xl: 2.441rem;

  /* Radius-Ergänzungen (zu --radius:8px) */
  --radius-klein: 4px; --radius-gross: 16px; --radius-voll: 9999px;

  /* Zentraler Fokusring (statt inline verstreuter rgba-Werte) */
  --fokus-ring: 0 0 0 3px rgba(254, 0, 0, .35);

  /* Fläche/Surface exakt wie die Marken-Website hundertzwölf
     (dort --color-surface: #f3f4f6). Der Seitengrund bleibt WEISS wie auf der
     Website (--color-bg:#fff); dieses Grau ist nur die Hover-/Chip-Fläche der
     Kacheln. */
  --farbe-surface: #f3f4f6;

  /* Breite der Inhaltsspalte der Seitengerüst-Seiten (Kopfzeile, Reiter,
     Panels, Abschnitte). Der Rand ist KEIN fester Wert, sondern wächst ab
     1280px so mit, dass die Spalte mittig steht - linksbündig blieb auf
     breiten Bildschirmen rechts eine grosse leere Flaeche.
     Unterhalb von 1280px bleiben die gewohnten 3rem stehen. */
  --seite-spalte: 1280px;
  --seite-rand: max(3rem, (100% - var(--seite-spalte)) / 2);
}

* { box-sizing: border-box; }

/* Spur des Rollbalkens immer reservieren. Seit der Inhalt mittig steht, wuerde
   die ganze Spalte sonst bei jedem Reiterwechsel um die Rollbalkenbreite zur
   Seite springen, sobald ein kuerzeres Panel keinen Rollbalken mehr braucht. */
html { scrollbar-gutter: stable; }

body {
  margin: 0;
  font-family: var(--schrift);
  background: var(--farbe-bg);
  color: var(--farbe-text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Seitengrund bleibt WEISS wie die Marken-Website hundertzwölf (--color-bg:#fff).
   Die Klasse .start-seite bleibt als Scoping-Haken erhalten, setzt aber bewusst
   keinen Grauwert. */

/* ---- Kopfbereich ------------------------------------------------------- */
.kopf {
  padding: var(--abstand-12) var(--abstand-12) var(--abstand-8);
  width: 100%;
  border-bottom: 1px solid var(--farbe-rand);
}

.kopf-zeile {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--abstand-6);
  flex-wrap: wrap;
}

.begruessung {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  /* akzent-tief statt akzent: #fe0000 auf Weiß ≈ 4:1 (unter AA 4.5:1),
     akzent-tief ≈ 6.5:1 (DESIGN_GUIDELINES.md §2 Kontrast). */
  color: var(--farbe-akzent-tief);
}

.kopf h1 { margin: var(--abstand-2) 0 0; font-size: var(--text-3xl); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.kopf-intro { margin: var(--abstand-4) 0 0; color: var(--farbe-muted); max-width: 70ch; }

/* Intro (links) + Uhr/Wetter (rechts) in einer Zeile, unten ausgerichtet –
   Uhr/Wetter sitzt so auf Höhe der letzten Intro-Zeile und verlängert den
   Header nicht. Bricht auf schmalen Screens sauber um (flex-wrap). */
.kopf-unterzeile {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--abstand-2) var(--abstand-8);
  flex-wrap: wrap;
}

/* Uhr + Wetter: eine dezente, linksbündige Zeile unter der Intro – ohne Kasten,
   ohne Konkurrenz zu den Kopf-Aktionen. Segmente durch Mittelpunkte getrennt. */
.info-box {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--abstand-1) var(--abstand-3);
  /* keine eigene margin-top: Ausrichtung übernimmt .kopf-unterzeile (flex-end).
     flex-shrink:0, damit die Zeile rechts nicht zerquetscht wird. */
  flex-shrink: 0;
  color: var(--farbe-muted);
  font-size: var(--text-sm);
}
.info-box > * + *::before {
  content: "·";
  margin-right: var(--abstand-3);
}
.uhr-zeit {
  font-weight: 600;
  color: var(--farbe-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.uhr-datum,
.wetter { color: var(--farbe-muted); }

/* ---- Inhalt ------------------------------------------------------------ */
.inhalt {
  width: 100%;
  margin: var(--abstand-12) 0;
  padding: 0 var(--abstand-12) var(--abstand-4);
}

.abschnitt-titel {
  font-size: .9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--farbe-muted);
  margin: 0;
}

/* ---- Suche + Filter ---------------------------------------------------- */
.apps-kopf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.apps-tools {
  display: flex;
  align-items: stretch;
  gap: .75rem;
  flex-wrap: wrap;
}

.suche {
  position: relative;
  display: flex;
  align-items: center;
}
.suche-icon {
  position: absolute;
  left: .7rem;
  width: 1rem;
  height: 1rem;
  color: var(--farbe-muted);
  pointer-events: none;
}
.suche-feld {
  font: inherit;
  font-size: var(--text-sm);
  color: var(--farbe-text);
  background: var(--farbe-karte);
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius);
  padding: 0 var(--abstand-3) 0 2.25rem;
  width: 240px;
  max-width: 100%;
  min-height: 44px;
  height: 44px;
  transition: var(--uebergang);
}
.suche-feld::placeholder { color: var(--farbe-muted); }
.suche-feld:focus-visible {
  outline: none;
  border-color: var(--farbe-akzent);
  box-shadow: var(--fokus-ring);
}

.filter-tabs {
  display: inline-flex;
  align-items: stretch;
  gap: .25rem;
  background: #f3f4f6;
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius);
  padding: .2rem;
}
.filter-tab {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--farbe-muted);
  background: transparent;
  border: none;
  border-radius: calc(var(--radius) - 3px);
  padding: var(--abstand-2) var(--abstand-4);
  cursor: pointer;
  transition: var(--uebergang);
}
.filter-tab:hover { color: var(--farbe-text); }
.filter-tab:focus-visible { outline: none; box-shadow: var(--fokus-ring); }
.filter-tab.ist-aktiv {
  background: var(--farbe-karte);
  /* akzent-tief statt akzent für AA-Kontrast auf hellem Grund */
  color: var(--farbe-akzent-tief);
  box-shadow: var(--schatten);
}

/* ---- App-Karten -------------------------------------------------------- */
.raster {
  display: grid;
  /* Fest 2-spaltig auf Desktop (mehr Breite pro Kachel fuer laengere
     Beschreibungen), einspaltig unter der 768px-Bruchstelle (siehe unten). */
  grid-template-columns: repeat(2, 1fr);
  align-items: stretch;
  gap: var(--abstand-6);
  margin-bottom: var(--abstand-12);
}

.karte {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
  background: var(--farbe-karte);
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius);
  /* flach wie die Marken-Website (.card-hover hat keinen Schatten) */
  box-shadow: none;
  padding: var(--abstand-6);
  transition: var(--uebergang);
}

/* .karte{display:flex} hat dieselbe Spezifitaet wie das UA-Standardregel
   [hidden]{display:none} und gewinnt per Reihenfolge - ohne diese Regel
   blieb eine ausgefilterte Karte trotz hidden=true sichtbar (Bug: Suche/
   Filter setzten das Attribut korrekt, zeigten aber keine Wirkung). */
.karte[hidden] { display: none; }

/* Hover exakt wie .card-hover der Website: graue Surface-Fläche erscheint,
   Titel wird rot – statt Schweben/Schatten. */
.karte:not(.platzhalter):hover {
  background: var(--farbe-surface);
  border-color: var(--farbe-rand);
}
.karte:not(.platzhalter):hover h3 { color: var(--farbe-akzent-hover); }
/* Fokus über den Stretched-Link (.karte-btn) sichtbar an der ganzen Karte */
.karte:focus-within {
  border-color: var(--farbe-akzent);
  box-shadow: var(--fokus-ring);
}
.karte h3 { margin: 0 0 var(--abstand-2); font-size: var(--text-lg); font-weight: 600; letter-spacing: -.01em; transition: color .15s ease; }
.karte p { margin: 0 0 var(--abstand-4); color: var(--farbe-muted); font-size: var(--text-sm); line-height: 1.55; }

/* Öffnen-Button am unteren Kartenrand - margin-top:auto in Kombination mit
   .karte{display:flex;flex-direction:column} sorgt dafuer, dass der Button
   unabhaengig von der Textlaenge darueber immer an der Unterkante der Karte
   fluchtet (siehe .raster{align-items:stretch} + .karte{height:100%}). */
.karte-btn {
  align-self: flex-start;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  /* Editoriale Text-Aktion statt gefülltem Block – wie die Marken-Website, die
     in den Kacheln keine Buttons, sondern rote Textlinks nutzt. akzent-hover
     (#d40000) ist AA-konform auf Weiß (5.5:1) und auf der Hover-Fläche
     #f3f4f6 (5:1). */
  color: var(--farbe-akzent-hover);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: var(--uebergang);
}
.karte-btn:hover { color: var(--farbe-akzent-tief); text-decoration: underline; }
/* Fokusindikator sitzt an der ganzen Karte (.karte:focus-within), daher hier
   nur outline entfernen – kein doppelter Ring. */
.karte-btn:focus-visible { outline: none; }

/* Ganze Karte klickbar (Fitts): der Link deckt via ::after die komplette
   Karte ab, ohne DOM/JS zu ändern. Nur für echte Links (a) – nicht für die
   deaktivierten <button>-Kacheln ("Demnächst verfügbar"). Sperrt start.js den
   Zugriff, entfernt es das href → der Stretched-Link wird automatisch inert. */
a.karte-btn::after {
  content: "";
  position: absolute;
  inset: 0;
}
.karte.ist-gesperrt a.karte-btn::after { cursor: not-allowed; }

/* Deaktivierter Button ("Demnächst verfügbar") fuer Apps im Status "geplant" -
   ueber das native :disabled statt einer eigenen Klasse, damit der Button
   auch tatsaechlich nicht fokussierbar/klickbar ist (nicht nur optisch). */
.karte-btn:disabled {
  color: var(--farbe-muted);
  cursor: not-allowed;
}
.karte-btn:disabled:hover { color: var(--farbe-muted); text-decoration: none; }
/* Gesperrtes Modul: neutrale (muted) Text-Aktion statt fadem Rot */
.karte.ist-gesperrt .karte-btn { color: var(--farbe-muted); }

.karte-badge {
  align-self: flex-start;
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: .2rem .55rem;
  border-radius: 999px;
  margin-bottom: .75rem;
}
.karte-badge.aktiv { background: var(--farbe-akzent); color: #fff; }
.karte-badge.geplant { background: var(--farbe-surface); color: var(--farbe-muted); }

/* Kategorie-Tag (Ober-Reiter): identisches Design wie .projekt-tag auf der
   Über-mich-Seite (kontakt.html) - beide teilen sich diese eine Regel, damit
   es keine zwei gepflegten Kopien des gleichen visuellen Musters gibt. */
.karte-tag,
.projekt-tag {
  display: inline-block;
  margin: 0 0 .6rem;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--farbe-akzent-tief);
  background: var(--farbe-akzent-soft);
  padding: .25rem .65rem;
  border-radius: 999px;
}

/* Bestandszahl der aktiven Firma, gesetzt von start.js (kachelZaehlerSetzen):
   auf Hoehe des Oeffnen-Knopfes an der rechten Kartenkante.

   Bewusst ABSOLUT positioniert (Anker ist .karte{position:relative}): als
   normales Flex-Kind wuerde die Pille Titel und Text der Kachel nach unten
   schieben - und da nur manche Kacheln eine Zahl tragen, fluchteten die
   Kacheln einer Zeile dann nicht mehr miteinander. So kostet sie keinen
   Platz und aendert an den uebrigen Kacheln nichts.

   Die Hoehe entspricht der des Knopfes (.karte-btn{min-height:44px}), damit
   beide auf einer Grundlinie sitzen. Gedeckt statt in der Akzentfarbe: der
   Kategorie-Reiter fuehrt, die Zahl ergaenzt. */
.karte-anzahl {
  position: absolute;
  right: var(--abstand-6);
  bottom: var(--abstand-6);
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 .6rem;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
  color: var(--farbe-muted);
  background: var(--farbe-surface);
  border: 1px solid var(--farbe-rand);
  border-radius: 999px;
  /* Die ganze Kachel ist klickbar (a.karte-btn::after deckt sie ab). Die
     Pille liegt als spaeteres Element darueber und wuerde den Klick genau an
     dieser Stelle schlucken - ein totes Eck in einer sonst klickbaren
     Flaeche. Sie zeigt nur an, sie bedient nichts. */
  pointer-events: none;
}

.karte.platzhalter {
  opacity: .75;
  border-style: dashed;
  box-shadow: none;
}

.raster-leer {
  color: var(--farbe-muted);
  font-size: .9rem;
  margin: 0 0 2.5rem;
}

/* ---- Einheitliche Coming-Soon-Seite (Module in Planung) ---------------- */
.platzhalter-seite {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--abstand-8);
  /* weiße Karte auf dezenter Surface-Fläche wie die Auth-Seiten */
  background: var(--farbe-surface);
}

.platzhalter-karte {
  max-width: 560px;
  width: 100%;
  text-align: center;
  background: var(--farbe-karte);
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius);
  box-shadow: none;
  padding: var(--abstand-12);
}

.platzhalter-karte .karte-badge { display: inline-block; margin-bottom: 1rem; }
.platzhalter-karte h1 { margin: 0 0 .75rem; font-size: 1.5rem; font-weight: 700; letter-spacing: -.01em; }
.platzhalter-karte p { margin: 0 0 1.5rem; color: var(--farbe-muted); }

/* Einheitlicher "Zur App-Übersicht"-Zurück-Button (Pill), projektweit.
   Vorlage: .backlink in apps/risikoanalyse/styles.css. Gilt überall, wo
   <a class="backlink"> vorkommt (Header-Seiten wie cockpit/benutzer und die
   Platzhalter-Karten). Einzelne Seiten definieren .backlink daher nicht mehr
   selbst – hier ist die einzige Quelle. */
.backlink {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--farbe-muted);
  text-decoration: none;
  padding: 5px 9px;
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius);
  transition: .12s;
}
.backlink:hover { border-color: var(--farbe-akzent); color: var(--farbe-akzent-hover); }

/* ---- Seitengerüst: Kopfzeile + Reiter + Panels ------------------------- */
/* Volle Breite, Kopfzeile, darunter Reiter und je Reiter ein Panel - das
   Muster der Verwaltungs- und Selbstverwaltungs-Seiten (benutzer.html,
   konto.html), abgeleitet von den Modul-Apps. Stand hier zuerst wortgleich
   im <style> von benutzer.html; mit der zweiten Seite gehört es hierher,
   sonst laufen zwei Kopien auseinander.
   Umschalten der Reiter macht jede Seite selbst (drei Zeilen classList) -
   die Zustandsklasse heisst ueberall .ist-aktiv. */
.seite-kopf {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1.5rem; flex-wrap: wrap;
  padding: 1.5rem var(--seite-rand) 1rem;
  border-bottom: 1px solid var(--farbe-rand);
  background: #fff;
}
.seite-dachzeile { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--farbe-muted); }
.seite-kopf h1 { margin: .2rem 0 .3rem; font-size: 1.5rem; }
.seite-beschreibung { margin: 0; color: var(--farbe-muted); max-width: 70ch; font-size: .9rem; }
.seite-kopf-rechts { display: flex; align-items: flex-end; gap: 1rem; }
/* Abmelden-Button (shared/logout.js) im Kopf einreihen statt fixiert. */
.seite-kopf-rechts #global-logout-slot #global-logout-button { position: static; top: auto; right: auto; height: 34px; box-sizing: border-box; }

.seite-tabs { display: flex; gap: .25rem; padding: 0 var(--seite-rand); border-bottom: 1px solid var(--farbe-rand); flex-wrap: wrap; background: #fff; }
.seite-tab {
  font: inherit; font-size: .9rem; font-weight: 500;
  color: var(--farbe-muted); background: transparent;
  border: none; border-bottom: 2px solid transparent;
  padding: .7rem 1rem; cursor: pointer; transition: var(--uebergang);
}
.seite-tab:hover { color: var(--farbe-text); }
.seite-tab:focus-visible { outline: none; box-shadow: var(--fokus-ring); }
.seite-tab.ist-aktiv { color: var(--farbe-akzent-hover); border-bottom-color: var(--farbe-akzent); }

.seite-panel { display: none; padding: 1.5rem var(--seite-rand) 3rem; }
.seite-panel.ist-aktiv { display: block; }

/* Flache Karte innerhalb eines Panels (hundertzwölf-Look: kein Schatten). */
.seite-karte { background: var(--farbe-karte); border: 1px solid var(--farbe-rand); border-radius: var(--radius); box-shadow: none; padding: 1.5rem; }
.seite-karte h2 { margin: 0 0 1rem; font-size: 1.15rem; }
/* Textspalten nicht ueber die ganze Breite laufen lassen - Lesbarkeit. */
.seite-stapel { display: flex; flex-direction: column; gap: 1.5rem; max-width: 720px; }

@media (max-width: 768px) {
  .seite-kopf, .seite-tabs, .seite-panel { padding-left: 1.25rem; padding-right: 1.25rem; }
  /* Schmale Geraete: die Kopf-Schaltflaechen brechen unter die Ueberschrift
     um und saessen dann linksbuendig. Das Klappmenue oeffnet rechtsbuendig
     zu seinem Ausloeser - stuende der links, haenge es zur Haelfte
     ausserhalb des Bildschirms. margin-left:auto haelt die Zeile rechts. */
  .seite-kopf-rechts { margin-left: auto; }
}

/* ---- Kopfmenü (☰ Menü, shared/kopfmenu.js) ----------------------------- */
/* Stand bis 2026-07-24 im <style> von index.html; seit das Menü auf drei
   Seiten steht, gehört es hierher.
   ALLES unterhalb des Auslösers ist bewusst unter .kopf-dropdown gescopet:
   Namen wie .mail, .firma oder .rolle-zeile gibt es in benutzer.html und
   konto.html bereits mit anderer Bedeutung - ungescopet würden die Regeln
   sich gegenseitig verbiegen. */
.kopf-menu { position: relative; }
.kopf-menu .menu-btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 1rem;
  font: inherit; font-size: .85rem; font-weight: 500;
  color: var(--farbe-muted); background: transparent;
  border: 1px solid var(--farbe-rand); border-radius: 6px;
  cursor: pointer; transition: var(--uebergang);
}
.kopf-menu .menu-btn:hover { color: var(--farbe-akzent-tief); border-color: var(--farbe-akzent); }
.kopf-menu .menu-btn:focus-visible { outline: none; box-shadow: var(--fokus-ring); }
.kopf-menu .caret { font-size: 11px; }

.kopf-dropdown {
  /* max-width als Fangnetz: auf sehr schmalen Geraeten lieber schmaler als
     ueber den Bildschirmrand hinaus. */
  position: absolute; top: calc(100% + 6px); right: 0; width: 268px; max-width: calc(100vw - 2rem);
  background: #fff; border: 1px solid var(--farbe-rand); border-radius: var(--radius);
  box-shadow: var(--schatten-hover);
  padding: 10px; display: flex; flex-direction: column; gap: 8px; z-index: 1100;
}
.kopf-dropdown[hidden] { display: none; }
.kopf-dropdown .menu-item {
  display: block; text-decoration: none; color: var(--farbe-text);
  font-size: .9rem; font-weight: 500; padding: 8px 10px;
  border-radius: var(--radius); border: 1px solid var(--farbe-rand);
  background: #fff; transition: var(--uebergang);
}
.kopf-dropdown a.menu-item:hover { background: rgba(0, 0, 0, .04); }
/* Die Seite, auf der man schon steht: sichtbar zur Orientierung, aber als
   Zustand erkennbar statt als Klickziel (kein Hover, kein Zeiger). */
.kopf-dropdown .menu-item.ist-hier { color: var(--farbe-muted); background: var(--farbe-surface); cursor: default; }
.kopf-dropdown .profil { border: 1px solid var(--farbe-rand); border-radius: var(--radius); background: var(--farbe-bg); padding: 10px 11px; }
.kopf-dropdown .pl-label { font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; color: var(--farbe-muted); }
.kopf-dropdown .mail { font-weight: 600; font-size: .9rem; word-break: break-all; margin-top: 1px; }
.kopf-dropdown .firma { font-size: .85rem; font-weight: 600; color: var(--farbe-text); margin-top: .3rem; }
.kopf-dropdown .firma-switch { width: 100%; font: inherit; font-size: .85rem; font-weight: 600; padding: .4rem .5rem; border: 1px solid var(--farbe-rand); border-radius: var(--radius); background: #fff; margin-top: .3rem; cursor: pointer; }
.kopf-dropdown .rollen-titel { font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; color: var(--farbe-muted); margin: .7rem 0 .35rem; }
/* display:block gegen ein .rolle-zeile{display:flex} der Seite (konto.html). */
.kopf-dropdown .rolle-zeile { display: block; margin-bottom: .4rem; }
.kopf-dropdown .rolle-name { font-weight: 600; font-size: .8rem; }
.kopf-dropdown .rolle-was { font-size: .76rem; color: var(--farbe-muted); line-height: 1.3; }
.kopf-foot { border-top: 1px solid var(--farbe-rand); padding-top: 8px; }
.kopf-foot #global-logout-slot { display: block; }
/* Der Abmelden-Button ist von Haus aus absolut oben rechts positioniert
   (shared/logout.js). Steckt er in einem Slot, gilt der Platz des Slots. */
#global-logout-slot #global-logout-button { position: static; top: auto; right: auto; }
.kopf-foot #global-logout-slot #global-logout-button { width: 100%; justify-content: center; }

/* ---- Gesetzliche Änderungen & Hinweise --------------------------------- */
.recht { margin-top: var(--abstand-12); }
.recht .abschnitt-titel { margin-bottom: 1.25rem; }
.recht-box {
  background: var(--farbe-karte);
  border: 1px solid var(--farbe-rand);
  border-left: 4px solid var(--farbe-akzent);
  border-radius: var(--radius);
  box-shadow: none;
  padding: 1.5rem 1.75rem;
}
.recht-liste { list-style: none; margin: 0; padding: 0; }
.recht-eintrag {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 1.25rem;
  align-items: baseline;
  padding: 1rem 0;
  border-top: 1px solid var(--farbe-rand);
}
.recht-eintrag:first-child { padding-top: 0; border-top: none; }
.recht-eintrag:last-child { padding-bottom: 0; }
.recht-datum {
  font-size: .8rem;
  font-weight: 600;
  color: var(--farbe-akzent-tief);
  font-variant-numeric: tabular-nums;
}
.recht-text { font-size: .92rem; color: var(--farbe-text); }
.recht-text strong { font-weight: 600; }

/* ---- Änderungsverlauf (vertikale Timeline) ------------------------------ */
.changelog { margin-top: var(--abstand-12); }
.changelog .abschnitt-titel { margin-bottom: 1.25rem; }

/* Eigenstaendige Karte, gleiche Design-Sprache wie .karte/.recht-box
   (Hintergrund/Rand/Radius/Schatten aus denselben Tokens). */
.changelog-karte {
  background: var(--farbe-karte);
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius);
  box-shadow: none;
  padding: 1.75rem 2rem;
}

/* Immer scrollbarer Container statt Aufklapp-Button: feste Maximalhoehe,
   rechtes Padding haelt die Scrollbar auf Abstand vom Text der Eintraege. */
.log-scroll {
  max-height: 24rem;
  overflow-y: auto;
  overflow-x: auto;
  padding-right: 1rem;
}
.log {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Durchgehende Linie: jeder Eintrag traegt sein eigenes border-left ueber die
   volle Hoehe (inkl. Padding) - da die Eintraege ohne Abstand aneinander
   stossen, ergibt das optisch eine einzige ununterbrochene Linie. */
.log-eintrag {
  position: relative;
  margin-left: .4rem;
  padding: 0 0 1.5rem 1.75rem;
  border-left: 2px solid var(--farbe-rand);
  font-size: .9rem;
}
.log-eintrag:last-child {
  padding-bottom: 0;
  border-left-color: transparent;
}

/* Punkt auf der Linie, vertikal auf Hoehe des Datums (log-kopf) zentriert */
.log-eintrag::before {
  content: "";
  position: absolute;
  left: -6px;
  top: .3rem;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--farbe-akzent);
  border: 2px solid var(--farbe-karte);
  box-shadow: 0 0 0 1px var(--farbe-rand);
}

.log-kopf { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; margin-bottom: .35rem; }
.log-datum {
  font-size: .78rem;
  font-weight: 600;
  color: var(--farbe-muted);
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
.log-app {
  font-size: .72rem;
  font-weight: 600;
  color: var(--farbe-akzent-tief);
  background: var(--farbe-akzent-soft);
  padding: .2rem .6rem;
  border-radius: 999px;
}
.log-text { margin: 0; color: var(--farbe-text); }

/* ---- Ladezustand (Skeleton) + Fehlerzeile mit Retry -------------------- */
/* Bildet das Layout grob ab, statt statischem "wird geladen …"-Text
   (DESIGN_GUIDELINES.md §4 UI-Zustände). */
.skeleton-zeile {
  height: 12px;
  border-radius: var(--radius-klein);
  margin: var(--abstand-2) 0;
  background: linear-gradient(90deg, var(--farbe-rand) 25%, #eef1f5 50%, var(--farbe-rand) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
}
@keyframes skeleton-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  .skeleton-zeile { animation: none; }
}

.laden-fehler {
  display: flex;
  align-items: center;
  gap: var(--abstand-3);
  flex-wrap: wrap;
  color: var(--farbe-muted);
  font-size: var(--text-sm);
}
.laden-fehler .retry-btn {
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--farbe-akzent-tief);
  background: var(--farbe-karte);
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius);
  padding: var(--abstand-2) var(--abstand-3);
  min-height: 36px;
  cursor: pointer;
  transition: var(--uebergang);
}
.laden-fehler .retry-btn:hover { border-color: var(--farbe-akzent); color: var(--farbe-akzent-hover); }
.laden-fehler .retry-btn:focus-visible { outline: none; box-shadow: var(--fokus-ring); }

@media (max-width: 768px) {
  .kopf { padding: var(--abstand-8) var(--abstand-6) var(--abstand-6); }
  .inhalt { padding: 0 var(--abstand-6) var(--abstand-4); }
  .raster { grid-template-columns: 1fr; }
  .kopf h1 { font-size: var(--text-2xl); }
}

@media (max-width: 560px) {
  .apps-kopf { align-items: flex-start; }
  .apps-tools { width: 100%; }
  .suche, .suche-feld { width: 100%; flex: 1; }
  .recht-eintrag { grid-template-columns: 1fr; gap: .35rem; }
}

/* ---- Rechts-/Textseiten (Datenschutz, Impressum) ----------------------- */
/* Schmale, gut lesbare Fließtext-Spalte. Gemeinsame Quelle fuer alle reinen
   Textseiten, damit datenschutz.html und impressum.html nicht je einen eigenen
   Style-Block pflegen (keine stille Duplikation). */
.rechtsseite { max-width: 780px; margin: 0 auto; padding: var(--abstand-8) var(--abstand-6) var(--abstand-16); }
.rechtsseite .backlink { margin-bottom: var(--abstand-6); }
/* .rechtstext traegt dieselbe Lese-Typografie wie .rechtsseite, aber INNERHALB
   des Seiten-Geruests (.seite-kopf/.seite-panel/.seite-karte) - so sehen die
   oeffentlichen Rechtsseiten (Impressum/Datenschutz) aus wie "Mein Konto" /
   "Firmen & Benutzer". Reine Wiederverwendung der Regeln unten, kein Duplikat.
   KEINE eigene Breitenbegrenzung: die Karte fuellt die zentrierte Spalte
   (--seite-spalte, gedeckelt ueber --seite-rand) - genauso breit wie die
   Kachel-Reihe in "Mein Konto", damit die Seite nicht linkslastig wirkt. */
.rechtsseite h1 { font-size: var(--text-2xl); font-weight: 700; letter-spacing: -.02em; margin: 0 0 var(--abstand-2); }
.rechtsseite .stand { color: var(--farbe-muted); font-size: var(--text-sm); margin: 0 0 var(--abstand-8); }
.rechtsseite h2, .rechtstext h2 { font-size: var(--text-lg); font-weight: 600; margin: var(--abstand-8) 0 var(--abstand-3); }
.rechtsseite h3, .rechtstext h3 { font-size: var(--text-base); font-weight: 600; margin: var(--abstand-4) 0 var(--abstand-1); }
.rechtsseite p, .rechtsseite li, .rechtstext p, .rechtstext li { color: var(--farbe-text); font-size: var(--text-base); line-height: 1.7; }
.rechtsseite p, .rechtstext p { margin: 0 0 var(--abstand-3); }
.rechtsseite ul, .rechtstext ul { margin: 0 0 var(--abstand-4); padding-left: 1.25rem; }
.rechtsseite li, .rechtstext li { margin-bottom: var(--abstand-1); }
.rechtsseite a, .rechtstext a { color: var(--farbe-akzent-hover); }
.rechtsseite address, .rechtstext address { font-style: normal; line-height: 1.7; }
.rechtsseite .hinweis-box, .rechtstext .hinweis-box {
  background: var(--farbe-surface); border: 1px solid var(--farbe-rand);
  border-left: 4px solid var(--farbe-akzent); border-radius: var(--radius);
  padding: var(--abstand-4) var(--abstand-6); margin: var(--abstand-4) 0;
}
/* Deutlich sichtbarer Platzhalter fuer Angaben, die vor Live-Gang von Hand
   ausgefuellt werden muessen (Anschrift, Aufsichtsbehoerde). */
.rechtsseite .platzhalter-feld, .rechtstext .platzhalter-feld {
  background: var(--farbe-akzent-soft); color: var(--farbe-akzent-tief);
  font-weight: 600; padding: 1px .35em; border-radius: var(--radius-klein);
}
/* Erstes Element in der Karte ohne Vorabstand - der Karten-Innenabstand genuegt.
   Steht bewusst NACH den Regeln oben, damit es bei Gleichstand (z. B. .hinweis-box)
   gewinnt. */
.rechtstext > :first-child { margin-top: 0; }

/* ---- Auth-Seiten: Glasmorphismus über Vollbild-Hintergrund ------------- */
/* EINE Quelle für login.html + registrieren.html (CLAUDE.md §1). Vollbild-
   Foto-Hintergrund, links ein Hero-Text hinter weichem Lese-Schleier, rechts
   eine Milchglas-Karte mit Formular. Marken-Logo (oben links), Hero-Text und
   Wippschalter injiziert shared/auth-marke.js. Optik nach Design-Vorlage
   assets/design/planwerk-login-final.html; das Rot ist bewusst auf das
   Marken-Token (--farbe-akzent-hover, #d40000) gesetzt statt auf das
   Vorlagen-#CB1E15. Alles unter .auth gescopet, weil .feld/.text-btn auf
   anderen Seiten (konto/benutzer/avv/brandschutz) eigene Bedeutung haben. */
.auth {
  position: relative; min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 6.5rem 6vw 3.5rem;
  background: var(--farbe-surface) url("/assets/design/planwerk-hintergrund.webp") center center / cover no-repeat fixed;
}
/* Hero-Text + Karte als Paar: oben buendig zueinander, das Paar als Ganzes
   vertikal in der Seite zentriert (Brief §4 "Hero-Paar oben buendig"). */
.auth-row {
  display: flex; align-items: flex-start; justify-content: center;
  gap: clamp(2rem, 4vw, 5rem); width: 100%; max-width: 1240px;
}

/* Marken-Logo oben links (Rundschild + P), von auth-marke.js injiziert. */
.brandmark {
  position: fixed; top: 34px; left: 46px; z-index: 3;
  display: flex; align-items: center; gap: 12px;
  font-weight: 700; font-size: 1.375rem; letter-spacing: -.01em; color: var(--farbe-text);
}
.brandmark svg { width: 34px; height: 34px; flex-shrink: 0; }

/* Linke Seite: Hero-Text hinter weichem, nach unten auslaufendem Lese-Schleier. */
.auth-marke {
  position: relative; z-index: 2; isolation: isolate;
  flex: 0 1 680px; max-width: 680px;
  padding: 2.25rem 2.25rem 2.75rem;
  animation: auth-rise .8s .2s ease both;
}
.auth-marke::before {
  content: ""; position: absolute; inset: 0 0 -50px 0; z-index: -1; border-radius: 26px;
  background: linear-gradient(180deg, rgba(246,244,243,.95) 0%, rgba(246,244,243,.9) 46%, rgba(246,244,243,.5) 82%, rgba(246,244,243,0) 100%);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  -webkit-mask-image: linear-gradient(162deg, #000 56%, transparent 100%);
          mask-image: linear-gradient(162deg, #000 56%, transparent 100%);
}
.auth-headline {
  margin: 0; font-weight: 800; font-size: clamp(1.9rem, 3vw, 2.375rem);
  line-height: 1.12; letter-spacing: -.025em; color: var(--farbe-text);
}
.auth-headline .betont { color: var(--farbe-akzent-hover); }
.auth-tagline { margin: 1.125rem 0 0; max-width: 48ch; font-size: .97rem; line-height: 1.62; color: #3a4152; }

/* "Was ist Planwerk?" unter der Anmeldekarte (auth-marke.js injiziert es in
   .auth-panel). In der Karte statt in der Hero-Spalte, damit der Rueckweg zur
   oeffentlichen Startseite auf Desktop UND Mobil sichtbar ist. */
.auth-info-foot { margin: var(--abstand-6) 0 0; text-align: center; font-size: .9rem; }
.auth-info-foot a { color: var(--farbe-muted); font-weight: 600; text-decoration: none; }
.auth-info-foot a:hover { color: var(--farbe-akzent-hover); text-decoration: underline; }
.auth-info-foot a:focus-visible { outline: none; box-shadow: var(--fokus-ring); border-radius: var(--radius-klein); }

/* Rechte Seite: Milchglas-Karte. */
.auth-form { position: relative; z-index: 2; flex: 0 0 auto; }
.auth-panel {
  width: 430px; max-width: 100%; padding: 2.5rem 2.5rem 2.125rem;
  border-radius: 26px; text-align: center;
  background: rgba(255,255,255,.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.2); backdrop-filter: blur(20px) saturate(1.2);
  border: 1px solid rgba(255,255,255,.75);
  box-shadow: 0 30px 70px rgba(18,24,39,.18);
  animation: auth-card .8s .3s cubic-bezier(.2,.7,.2,1) both;
}
.auth-panel h1 { margin: 0 0 var(--abstand-6); font-size: 1.875rem; font-weight: 700; letter-spacing: -.01em; color: var(--farbe-text); }
.auth-intro { margin: -.75rem 0 var(--abstand-6); color: var(--farbe-muted); font-size: var(--text-sm); line-height: 1.5; }
.auth-sub { margin: 0 0 var(--abstand-6); color: var(--farbe-muted); font-size: var(--text-sm); }

/* Wippschalter Anmelden/Registrieren – zwei Links (Seitenwechsel), aktives
   Segment als weiße Pille. Das aktive Segment ist die aktuelle Seite. */
.auth-switch {
  display: grid; grid-template-columns: 1fr 1fr; gap: .25rem;
  background: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.7);
  border-radius: var(--radius-voll); padding: .25rem; margin-bottom: var(--abstand-6);
}
.auth-switch-opt {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; font: inherit; font-size: var(--text-sm); font-weight: 600;
  color: var(--farbe-muted); text-decoration: none;
  border-radius: var(--radius-voll); transition: var(--uebergang);
}
.auth-switch-opt:hover { color: var(--farbe-text); }
.auth-switch-opt:focus-visible { outline: none; box-shadow: var(--fokus-ring); }
.auth-switch-opt.ist-aktiv { background: #fff; color: var(--farbe-akzent-tief); box-shadow: var(--schatten); cursor: default; }

/* Felder: Pillen mit führendem Icon. Labels sind vorhanden, aber visuell
   versteckt (der Platzhalter übernimmt die sichtbare Beschriftung) – so bleibt
   die Optik der Vorlage bei erhaltener Zugänglichkeit (Brief §3.6). */
.auth .feld { position: relative; margin-bottom: var(--abstand-3); text-align: left; }
.auth .feld label {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.auth .feld input {
  width: 100%; font: inherit; font-size: .94rem; height: 52px;
  padding: 0 20px 0 52px; color: var(--farbe-text);
  background: rgba(255,255,255,.7) no-repeat left 18px center / 20px 20px;
  border: 1px solid rgba(255,255,255,.9); border-radius: var(--radius-voll);
  transition: border-color .15s, box-shadow .15s;
}
.auth .feld input::placeholder { color: #8a90a0; }
.auth .feld input:focus-visible { outline: none; border-color: var(--farbe-akzent); box-shadow: var(--fokus-ring); }
.auth .feld input[type="email"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%238a90a0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E"); }
.auth .feld input[type="password"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%238a90a0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E"); }
.auth .code-input {
  padding-left: 20px; background-image: none;
  letter-spacing: .35em; text-align: center; font-size: var(--text-lg) !important; font-variant-numeric: tabular-nums;
}

/* akzent-hover (#d40000): Weiß darauf ~5.5:1 (AA); reines #fe0000 nur ~4:1. */
.auth-btn {
  width: 100%; font: inherit; font-size: 1rem; font-weight: 700; height: 52px; margin-top: .625rem;
  color: #fff; background: var(--farbe-akzent-hover); border: none; border-radius: var(--radius-voll);
  cursor: pointer; box-shadow: 0 8px 20px rgba(212,0,0,.3);
  transition: background .15s, transform .06s, box-shadow .15s;
}
.auth-btn:hover { background: var(--farbe-akzent-tief); }
.auth-btn:active { transform: translateY(1px); }
.auth-btn:disabled { opacity: .6; cursor: default; }
.auth-btn:focus-visible { outline: none; box-shadow: var(--fokus-ring); }
.auth .text-btn { background: none; border: none; color: var(--farbe-muted); font: inherit; font-size: var(--text-sm); text-decoration: underline; cursor: pointer; padding: 0; margin-top: var(--abstand-4); }
.auth-fuss { margin-top: var(--abstand-6); font-size: var(--text-sm); color: var(--farbe-muted); text-align: center; }
.auth-fuss a { color: var(--farbe-akzent-hover); text-decoration: none; }
.auth-recht { margin-top: var(--abstand-4); font-size: var(--text-xs); color: var(--farbe-muted); text-align: center; }
.auth-recht a { color: var(--farbe-muted); text-decoration: underline; }
.auth .hidden { display: none; }

@keyframes auth-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes auth-card { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

/* Fallback ohne backdrop-filter (ältere Browser): Karte + Schleier stärker
   deckend, damit der Text lesbar bleibt (Brief §4). */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .auth-panel { background: rgba(255,255,255,.92); }
  .auth-marke::before { background: rgba(246,244,243,.94); }
}

/* Unter 860px: Hero-Text aus, nur die zentrierte Karte (Brief §3.6). Die Karte
   darf jetzt schrumpfen und die Spaltenbreite fuellen, damit sie auf schmalen
   Viewports nicht ueber den Rand laeuft (sonst horizontaler Ueberlauf). */
@media (max-width: 860px) {
  .auth { padding: 6rem 1.5rem 3rem; }
  .auth-marke { display: none; }
  .auth-form { flex: 1 1 auto; width: 100%; max-width: 430px; }
  .auth-panel { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .auth-marke, .auth-panel { animation: none; opacity: 1; transform: none; }
}