/* --- 00-tokens.css --- */
/* Gestaltungs-Tokens — geliefert aus dem Design-Projekt (Asset-Kit, Stand 25.08.2026).
   Einzige Quelle fuer Farbe, Schrift, Abstand und Form. Wenn spaeter ein gekauftes
   Template als Vorlage dient, werden ausschliesslich diese Variablen angepasst —
   kein fremdes CSS ins Projekt. */
:root {
  /* Farbe — Marke */
  --hsg-koralle: #EE6A55;
  --hsg-koralle-dunkel: #D4503C;
  --hsg-koralle-text: #C4472F;
  --hsg-koralle-10: #FDEAE5;
  --hsg-petrol: #2E9299;
  --hsg-petrol-text: #1F6F6B;
  --hsg-petrol-10: #E2F0EE;
  --hsg-butter: #F1C46B;
  --hsg-butter-text: #8A6A22;
  --hsg-butter-20: #FBF0DA;

  /* Farbe — neutral */
  --hsg-tinte: #23201D;
  --hsg-tinte-weich: #3D372F;
  --hsg-text-2: #7A716A;
  --hsg-text-3: #A69D94;
  --hsg-papier: #FFFCF7;
  --hsg-papier-2: #FDFBF7;
  --hsg-flaeche: #F3EFE9;
  --hsg-weiss: #FFFFFF;
  --hsg-linie: #EBE4DB;
  --hsg-linie-stark: #DDD5CA;
  /* Eigener Ton fuer Feldraender. Er ist waermer als --hsg-linie-stark und kommt so
     aus dem Styleguide; ein Eingabefeld soll sich vom Kartenrand unterscheiden. */
  --hsg-feld-linie: #E3D9CD;

  /* Eine Hoehe fuer ALLE Felder - Text, Auswahl, Datum, Zahl.
     Ohne festen Wert bestimmt jeder Feldtyp seine Hoehe selbst aus Schrift und
     Innenabstand, und ein <select> kommt dabei auf etwas anderes als ein <input>.
     Nebeneinander sieht man das sofort. */
  --hsg-feld-hoehe: 44px;

  /* Semantik — Bedeutung nie umdrehen */
  --hsg-status-zugesagt: var(--hsg-petrol-text);
  --hsg-status-zugesagt-bg: var(--hsg-petrol-10);
  --hsg-status-offen: var(--hsg-butter-text);
  --hsg-status-offen-bg: var(--hsg-butter-20);
  --hsg-status-abgesagt: var(--hsg-text-2);
  --hsg-status-abgesagt-bg: var(--hsg-flaeche);
  --hsg-status-hinweis: var(--hsg-koralle-text);
  --hsg-status-hinweis-bg: var(--hsg-koralle-10);

  /* Schrift */
  --hsg-font-display: "Bricolage Grotesque", "DM Sans", system-ui, sans-serif;
  --hsg-font-text: "DM Sans", system-ui, sans-serif;
  --hsg-font-mono: "DM Mono", ui-monospace, monospace;
  --hsg-font-deko: "Caveat", cursive;

  --hsg-size-display: 4rem;   /* 64 · 0.95 · -0.04em */
  --hsg-size-h1: 2.125rem;    /* 34 · 1.15 · -0.025em */
  --hsg-size-h2: 1.3125rem;   /* 21 · 1.30 · -0.02em */
  --hsg-size-body: 1rem;      /* 16 · 1.70 */
  --hsg-size-ui: 0.875rem;    /* 14 · 500 */
  --hsg-size-label: 0.6875rem;/* 11 · mono · 0.14em · uppercase */
  --hsg-track-display: -0.04em;
  --hsg-track-head: -0.02em;
  --hsg-track-label: 0.14em;

  /* Abstände — 4er-Raster */
  --hsg-s1: 4px;  --hsg-s2: 8px;  --hsg-s3: 12px; --hsg-s4: 16px;
  --hsg-s5: 20px; --hsg-s6: 24px; --hsg-s8: 32px; --hsg-s10: 40px;
  --hsg-s12: 48px; --hsg-s16: 64px;

  /* Radien */
  --hsg-r-input: 8px;
  --hsg-r-kachel: 12px;
  --hsg-r-karte: 16px;
  --hsg-r-flaeche: 20px;
  --hsg-r-pill: 999px;

  /* Icons */
  --hsg-icon-size: 24px;
  --hsg-icon-stroke: 1.75;

  /* Layout */
  --hsg-max-inhalt: 1140px;
  --hsg-spalten: 12;

  /* --- Ergänzungen, die das Kit offen lässt ---------------------------------
     Schatten, Bewegung und Kopf-/Navigationsmaße stehen nicht im Asset-Kit.
     Sie liegen hier bewusst getrennt, damit eine spätere Lieferung den Block
     oben eins zu eins ersetzen kann, ohne diese Werte mitzunehmen. */
  --hsg-lh-tight: 1.15;
  --hsg-lh-normal: 1.7;

  --hsg-schatten-1: 0 1px 2px rgba(35,32,29,.06);
  --hsg-schatten-2: 0 6px 24px rgba(35,32,29,.08);
  --hsg-schatten-3: 0 18px 50px rgba(35,32,29,.14);

  --hsg-kopf-hoehe: 62px;
  --hsg-nav-breite: 244px;

  --hsg-dauer-flink: .14s;
  --hsg-dauer-normal: .24s;
  --hsg-easing: cubic-bezier(.2,.7,.3,1);

  --hsg-fokus: #2E9299;
}

@media (prefers-reduced-motion: reduce) {
  :root { --hsg-dauer-flink: 0s; --hsg-dauer-normal: 0s; }
}

/* --- 01-fonts.css --- */
/* Schriftbindung — selbst gehostet.
   Bricolage Grotesque, DM Sans und DM Mono stehen unter der SIL Open Font License 1.1:
   Selbsthosting und Weitergabe sind erlaubt, es fallen keine Lizenzkosten an.
   Bezogen als WOFF2 (latin und latin-ext) am 25.08.2026 — siehe VENDOR.md.

   Kein Einbinden von externen Schriftservern: Das wäre eine Übermittlung der
   IP-Adresse jedes Besuchers an einen Dritten und ohne Einwilligung nicht zulässig.

   font-display: swap — der Text ist sofort lesbar und wird nachträglich umgestellt,
   statt bei langsamer Verbindung unsichtbar zu bleiben. */

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/BricolageGrotesque-400-800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/BricolageGrotesque-400-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/DMSans-400-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/DMSans-400-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/DMMono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/DMMono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/DMMono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/DMMono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Caveat — der handschriftliche Akzent („bereit?" auf den oeffentlichen Seiten).
   Ebenfalls SIL Open Font License 1.1, also auch kommerziell frei nutzbar.
   Variable Schrift: EINE Datei je Zeichensatz deckt 400 bis 700 ab. Bezogen als
   WOFF2 am 28.08.2026 — siehe VENDOR.md.

   Vorher fehlte die Datei, waehrend --hsg-font-deko sie schon nannte. Der Browser
   fiel dann auf "cursive" zurueck: auf dem Mac eine Zierschrift, unter Windows
   Comic Sans. Ein Schriftzug, der auf jedem Geraet anders aussieht, ist kein
   Markenelement mehr. */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/Caveat-400-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/Caveat-400-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- 05-reset.css --- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; line-height: var(--hsg-lh-normal); -webkit-font-smoothing: antialiased; }
img, picture, svg, video, canvas { display: block; max-width: 100%; }
svg { flex: none; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
p, h1, h2, h3, h4 { overflow-wrap: break-word; }
ul, ol { padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }
:where(a) { color: inherit; }
:focus-visible { outline: 2px solid var(--hsg-fokus); outline-offset: 2px; border-radius: var(--hsg-r-input); }

/* --- 10-base.css --- */
body {
  background: var(--hsg-papier);
  color: var(--hsg-tinte);
  font-family: var(--hsg-font-text);
  font-size: var(--hsg-size-body);
}

h1, h2, h3 { font-family: var(--hsg-font-display); font-weight: 600; line-height: var(--hsg-lh-tight); }
h1 { font-size: var(--hsg-size-h1); letter-spacing: -0.025em; }
h2 { font-size: var(--hsg-size-h2); letter-spacing: var(--hsg-track-head); }
h3 { font-size: var(--hsg-size-body); letter-spacing: var(--hsg-track-head); }

/* Beschriftungen: Mono, gesperrt, Versalien - die Auszeichnung des Kits. */
.label {
  font-family: var(--hsg-font-mono);
  font-size: var(--hsg-size-label);
  letter-spacing: var(--hsg-track-label);
  text-transform: uppercase;
  color: var(--hsg-text-2);
}

a { color: var(--hsg-koralle-dunkel); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--hsg-tinte); }

.muted      { color: var(--hsg-text-2); }
.small      { font-size: var(--hsg-size-ui); }
.ui         { font-size: var(--hsg-size-ui); font-weight: 500; }
.strong     { font-weight: 600; }
.numeric    { font-variant-numeric: tabular-nums; }
.mono       { font-family: var(--hsg-font-mono); font-size: var(--hsg-size-ui); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--hsg-weiss); padding: var(--hsg-s3) var(--hsg-s4);
  border-radius: 0 0 var(--hsg-r-kachel) 0; box-shadow: var(--hsg-schatten-2);
}
.skip-link:focus { left: 0; }

.ico { vertical-align: -.15em; }

/* --- 20-layout.css --- */
/* --- Kopfzeile ----------------------------------------------------------- */
.top {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--hsg-s3);
  height: var(--hsg-kopf-hoehe); padding: 0 var(--hsg-s4);
  background: var(--hsg-weiss);
  border-bottom: 1px solid var(--hsg-linie);
}
.top-brand {
  display: inline-flex; align-items: center; gap: var(--hsg-s2);
  font-family: var(--hsg-font-display); font-size: var(--hsg-size-h2); font-weight: 600;
  color: var(--hsg-tinte); text-decoration: none;
}
.top-brand .ico { color: var(--hsg-koralle); }
.top-context { margin-left: var(--hsg-s3); min-width: 0; }
.top-wedding { color: var(--hsg-text-2); font-size: var(--hsg-size-ui); }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: var(--hsg-s2); }
.top-burger { display: none; padding: var(--hsg-s2); border-radius: var(--hsg-r-input); color: var(--hsg-text-2); }

/* --- Grundraster --------------------------------------------------------- */
.layout { display: grid; grid-template-columns: var(--hsg-nav-breite) minmax(0, 1fr); align-items: start; }

.nav {
  position: sticky; top: var(--hsg-kopf-hoehe);
  display: flex; flex-direction: column; gap: 2px;
  height: calc(100vh - var(--hsg-kopf-hoehe));
  padding: var(--hsg-s4) var(--hsg-s3);
  background: var(--hsg-weiss);
  border-right: 1px solid var(--hsg-linie);
  overflow-y: auto;
}
.nav-link {
  display: flex; align-items: center; gap: var(--hsg-s3);
  padding: var(--hsg-s3); border-radius: var(--hsg-r-kachel);
  color: var(--hsg-tinte); text-decoration: none;
  transition: background var(--hsg-dauer-flink) var(--hsg-easing);
}
.nav-link:hover    { background: var(--hsg-flaeche); }
.nav-link.is-active{ background: var(--hsg-koralle-10); color: var(--hsg-koralle-dunkel); font-weight: 600; }
.nav-link.is-locked{ color: var(--hsg-text-2); }
.nav-lock { margin-left: auto; opacity: .7; }

/* Volle Breite am Rechner - Wunsch des Auftraggebers (28.08.2026). Die
   Kit-Breite --hsg-max-inhalt bleibt als Token erhalten; Module mit bewusst
   schmaler Form (z. B. .wz-shell) begrenzen und zentrieren sich selbst. */
.main { min-width: 0; padding: var(--hsg-s6); }
.main > * + * { margin-top: var(--hsg-s6); }

/* --- Schmale Bildschirme -------------------------------------------------- */
@media (max-width: 900px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .top-burger { display: inline-flex; }
  .nav {
    position: fixed; inset: var(--hsg-kopf-hoehe) auto 0 0; z-index: 40;
    width: min(280px, 84vw); height: auto;
    transform: translateX(-100%);
    transition: transform var(--hsg-dauer-normal) var(--hsg-easing);
    box-shadow: var(--hsg-schatten-3);
  }
  .nav.is-open { transform: none; }
  /* Schleier hinter dem offenen Menü. Er faengt den Tipp daneben ab (JS
     schliesst dann) und sagt sichtbar: Der Inhalt dahinter ist gerade nicht
     dran. Nur auf schmalen Bildschirmen - am Schreibtisch steht das Menü fest. */
  body.nav-offen::after {
    content: ""; position: fixed;
    inset: var(--hsg-kopf-hoehe) 0 0 0; z-index: 39;
    background: rgba(35, 32, 29, .35);
  }
  .main { padding: var(--hsg-s4); }
  .top-context { display: none; }
}

/* --- Seitenkopf ----------------------------------------------------------- */
.page-head {
  display: flex; align-items: flex-start; gap: var(--hsg-s4);
  flex-wrap: wrap; justify-content: space-between;
}
.page-head h1 { margin: 0; }
.page-head .page-sub { color: var(--hsg-text-2); font-size: var(--hsg-size-ui); }

/* --- Anmeldeseiten -------------------------------------------------------- */
.plain-main { display: grid; place-items: center; min-height: 100vh; padding: var(--hsg-s6); }
.plain-card {
  width: min(440px, 100%);
  background: var(--hsg-weiss); border: 1px solid var(--hsg-linie);
  border-radius: var(--hsg-r-karte); box-shadow: var(--hsg-schatten-2);
  padding: var(--hsg-s8);
}
.plain-card > * + * { margin-top: var(--hsg-s4); }
.plain-brand {
  display: inline-flex; align-items: center; gap: var(--hsg-s2);
  font-family: var(--hsg-font-display); font-size: var(--hsg-size-h2); font-weight: 600;
  text-decoration: none; color: var(--hsg-tinte);
}
.plain-brand .ico { color: var(--hsg-koralle); }

/* Noch nicht gebaute Bereiche: sichtbar, aber kein Link - man soll sehen, was kommt,
   ohne in einen Fehler zu laufen. */
.nav-link.is-planned { color: var(--hsg-text-3); cursor: default; }
.nav-link.is-planned:hover { background: none; }
.nav-note {
  margin-left: auto;
  font-family: var(--hsg-font-mono);
  font-size: var(--hsg-size-label);
  letter-spacing: var(--hsg-track-label);
  text-transform: uppercase;
  color: var(--hsg-text-3);
}

.nav-sep { border: 0; border-top: 1px solid var(--hsg-linie); margin: var(--hsg-s3) var(--hsg-s3); }

/* Überschrift über einer Menügruppe. Sagt, in welcher Welt man gerade ist -
   Hochzeitsplanung oder Seitenverwaltung. */
.nav-caption {
  /* Ab der zweiten Gruppe braucht es Luft darueber - sonst klebt die Ueberschrift
     am letzten Eintrag der Gruppe davor und die Gliederung geht verloren. */
  margin: 0 0 var(--hsg-s2) var(--hsg-s3);
  font-family: var(--hsg-font-mono);
  font-size: var(--hsg-size-label);
  letter-spacing: var(--hsg-track-label);
  text-transform: uppercase;
  color: var(--hsg-text-3);
}

.nav-caption + .nav-link { margin-top: 0; }
.nav-link + .nav-caption { margin-top: var(--hsg-s5); }

/* Zähler am Menüpunkt. Der ruhige Ton zählt nur (Gäste), der warnende verlangt
   etwas (überfällige Aufgaben, ungelesene Nachrichten, wartende Fotos). Zwei
   Töne statt einem, weil eine Zahl sonst entweder immer oder nie alarmiert. */
.nav-zahl {
  margin-left: auto; flex: 0 0 auto;
  padding: 2px var(--hsg-s2); border-radius: var(--hsg-r-pill);
  font-family: var(--hsg-font-mono); font-size: var(--hsg-size-label);
  background: var(--hsg-butter-20); color: var(--hsg-butter-text);
}
.nav-zahl.is-warn { background: var(--hsg-koralle-10); color: var(--hsg-koralle-text); }
.nav-link.is-active .nav-zahl { background: var(--hsg-weiss); }

/* --- Übersicht (Dashboard) ------------------------------------------------- */
.ueb-raster {
  display: grid; gap: var(--hsg-s5);
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 900px) { .ueb-raster { grid-template-columns: 1fr; } }

.ueb-aufgaben { list-style: none; margin: 0; padding: 0; }
.ueb-aufgaben li {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--hsg-s3);
  padding: var(--hsg-s3) 0; border-bottom: 1px solid var(--hsg-flaeche);
}
.ueb-aufgaben li:last-child { border-bottom: 0; }
.ueb-aufgaben a { color: inherit; font-weight: 500; text-decoration: none; min-width: 0; }
.ueb-aufgaben a:hover { color: var(--hsg-koralle-text); text-decoration: none; }
.ueb-frist { flex: 0 0 auto; font-size: var(--hsg-size-ui); color: var(--hsg-text-2); white-space: nowrap; }
.ueb-frist.is-spaet { color: var(--hsg-koralle-text); font-weight: 500; }

.ueb-vendors { list-style: none; margin: 0; padding: 0; }
.ueb-vendors li {
  display: flex; align-items: center; gap: var(--hsg-s3);
  padding: var(--hsg-s3) 0; border-bottom: 1px solid var(--hsg-flaeche);
}
.ueb-vendors li:last-child { border-bottom: 0; }
.ueb-vendors a { flex: 1; min-width: 0; color: inherit; font-weight: 500; text-decoration: none;
                 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ueb-vendors a:hover { color: var(--hsg-koralle-text); text-decoration: none; }
.ueb-vendor-rechts { display: flex; align-items: center; gap: var(--hsg-s3); flex: 0 0 auto; }
.ueb-mehr { margin: var(--hsg-s3) 0 0; }
.ueb-mehr a { font-size: var(--hsg-size-ui); font-weight: 500; }

/* Tische als kleine Kacheln - der Blick sagt schneller "Tisch 5 ist halb leer"
   als jede Zahl. */
.ueb-tische { display: flex; gap: var(--hsg-s2); flex-wrap: wrap; }
.ueb-tisch {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  width: 56px; height: 56px; border-radius: var(--hsg-r-kachel);
  background: var(--hsg-flaeche); text-decoration: none; color: var(--hsg-tinte);
}
.ueb-tisch:hover { text-decoration: none; background: var(--hsg-koralle-10); }
.ueb-tisch strong { font-size: 15px; }
.ueb-tisch span { font-family: var(--hsg-font-mono); font-size: 10.5px; color: var(--hsg-text-2); }
.ueb-tisch.is-voll { background: var(--hsg-petrol-10); }
.ueb-tisch.is-voll span { color: var(--hsg-petrol-text); }
.ueb-tisch.is-neu { border: 1px dashed var(--hsg-linie-stark); background: none; color: var(--hsg-text-3); font-size: 18px; }
.ueb-tisch.is-neu:hover { border-color: var(--hsg-koralle); color: var(--hsg-koralle-text); }

/* Kennzahl-Karten rechts: ganze Karte ist der Link. */
.ueb-karte { display: block; color: inherit; text-decoration: none; }
.ueb-karte:hover { text-decoration: none; border-color: var(--hsg-koralle); }
.ueb-gross {
  margin: var(--hsg-s1) 0 0;
  font-family: var(--hsg-font-display); font-weight: 600;
  font-size: 34px; line-height: 1.05; letter-spacing: var(--hsg-track-head);
}
.ueb-zahlen { margin: var(--hsg-s3) 0 0; }
.ueb-zahlen div {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: var(--hsg-s1) 0; border-top: 1px solid var(--hsg-flaeche);
}
.ueb-zahlen dt { font-size: var(--hsg-size-ui); color: var(--hsg-text-2); }
.ueb-zahlen dd { margin: 0; font-family: var(--hsg-font-mono); font-size: 13px; }
.ueb-zahlen dd.is-gut { color: var(--hsg-petrol-text); }
.ueb-zahlen dd.is-still { color: var(--hsg-text-3); }

/* --- 30-components.css --- */
/* --- Karte ---------------------------------------------------------------- */
.card {
  background: var(--hsg-weiss);
  border: 1px solid var(--hsg-linie);
  border-radius: var(--hsg-r-karte);
  box-shadow: var(--hsg-schatten-1);
  padding: var(--hsg-s6);
}
.card > * + * { margin-top: var(--hsg-s4); }
.card-head { display: flex; align-items: center; gap: var(--hsg-s3); justify-content: space-between; flex-wrap: wrap; }
.card-head h2 { margin: 0; }
.card-centered { max-width: 560px; margin-inline: auto; text-align: center; }
.card-sunk { background: var(--hsg-flaeche); box-shadow: none; }

/* --- Knoepfe -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--hsg-s2);
  min-height: 40px; padding: 0 var(--hsg-s4);
  border: 1px solid transparent; border-radius: var(--hsg-r-kachel);
  font-size: var(--hsg-size-body); font-weight: 500; text-decoration: none; white-space: nowrap;
  transition: background var(--hsg-dauer-flink) var(--hsg-easing), border-color var(--hsg-dauer-flink) var(--hsg-easing);
}
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.btn-primary { background: var(--hsg-koralle); color: var(--hsg-weiss); }
.btn-primary:hover:not(:disabled) { background: var(--hsg-koralle-dunkel); color: var(--hsg-weiss); }
.btn-secondary { background: var(--hsg-weiss); border-color: var(--hsg-linie-stark); color: var(--hsg-tinte); }
.btn-secondary:hover:not(:disabled) { background: var(--hsg-flaeche); }
.btn-ghost { color: var(--hsg-text-2); }
.btn-ghost:hover:not(:disabled) { background: var(--hsg-flaeche); color: var(--hsg-tinte); }
.btn-danger { background: var(--hsg-status-hinweis); color: #fff; }
.btn-danger:hover:not(:disabled) { filter: brightness(.92); }
.btn-icon { padding: 0; width: 40px; }
.btn-sm { min-height: 32px; padding: 0 var(--hsg-s3); font-size: var(--hsg-size-ui); }
.btn-block { width: 100%; }
.btn-row { display: flex; gap: var(--hsg-s3); flex-wrap: wrap; align-items: center; }

/* Runde Knoepfe. Im Werkzeug sind sie eckig, auf den oeffentlichen Seiten und in
   der Anmeldung rund - der Auftritt darf einladender wirken als das Werkzeug.
   Die Varianten stehen hier und nicht bei den Werbeseiten, weil die Anmeldung
   sie ebenfalls braucht und ihr Buendel 75-marketing.css nicht laedt. */
.btn-pill  { border-radius: var(--hsg-r-pill); font-weight: 700; padding-inline: var(--hsg-s5); }
.btn-gross { min-height: 48px; padding-inline: var(--hsg-s6); font-size: 15px; }
.btn-hell  { background: var(--hsg-weiss); border-color: var(--hsg-linie-stark); color: var(--hsg-tinte); }
.btn-hell:hover:not(:disabled) { border-color: var(--hsg-tinte); background: var(--hsg-weiss); }
.btn-dunkel { background: var(--hsg-tinte); color: var(--hsg-papier); }
.btn-dunkel:hover:not(:disabled) { background: var(--hsg-tinte-weich); color: var(--hsg-papier); }
.btn-rand-hell { border-color: var(--hsg-tinte-weich); color: var(--hsg-papier); background: transparent; }
.btn-rand-hell:hover:not(:disabled) { border-color: var(--hsg-papier); background: transparent; color: var(--hsg-papier); }

/* --- Abzeichen ------------------------------------------------------------ */
.badge {
  display: inline-flex; align-items: center; gap: var(--hsg-s1);
  padding: 2px var(--hsg-s2); border-radius: var(--hsg-r-pill);
  font-size: var(--hsg-size-ui); font-weight: 500; line-height: 1.6;
  background: var(--hsg-flaeche); color: var(--hsg-text-2);
}
.badge-ok   { background: var(--hsg-status-zugesagt-bg);   color: var(--hsg-status-zugesagt); }
.badge-warn { background: var(--hsg-status-offen-bg); color: var(--hsg-status-offen); }
.badge-bad  { background: var(--hsg-status-hinweis-bg);  color: var(--hsg-status-hinweis); }
.badge-info { background: var(--hsg-petrol-10); color: var(--hsg-petrol-text); }

/* --- Hinweise ------------------------------------------------------------- */
.flashes > * + * { margin-top: var(--hsg-s2); }
.alert {
  display: flex; align-items: flex-start; gap: var(--hsg-s3);
  padding: var(--hsg-s3) var(--hsg-s4);
  border-radius: var(--hsg-r-kachel); border: 1px solid transparent;
}
.alert-ok    { background: var(--hsg-status-zugesagt-bg);   border-color: color-mix(in srgb, var(--hsg-status-zugesagt) 25%, transparent);   color: var(--hsg-status-zugesagt); }
.alert-info  { background: var(--hsg-petrol-10); border-color: color-mix(in srgb, var(--hsg-petrol-text) 25%, transparent); color: var(--hsg-petrol-text); }
.alert-warn  { background: var(--hsg-status-offen-bg); border-color: color-mix(in srgb, var(--hsg-status-offen) 25%, transparent); color: var(--hsg-status-offen); }
.alert-error { background: var(--hsg-status-hinweis-bg);  border-color: color-mix(in srgb, var(--hsg-status-hinweis) 25%, transparent);  color: var(--hsg-status-hinweis); }

/* --- Leerzustand ---------------------------------------------------------- */
.empty { text-align: center; padding-block: var(--hsg-s8); }
.empty-icon { color: var(--hsg-text-2); display: grid; place-items: center; margin-bottom: var(--hsg-s3); }
.empty h1, .empty h2 { margin-bottom: var(--hsg-s2); }
.feature-usage { font-variant-numeric: tabular-nums; color: var(--hsg-text-2); }

/* --- Kennzahlen ----------------------------------------------------------- */
.stats { display: grid; gap: var(--hsg-s4); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.stat {
  background: var(--hsg-weiss); border: 1px solid var(--hsg-linie);
  border-radius: var(--hsg-r-karte); padding: var(--hsg-s4);
  display: flex; flex-direction: column; gap: var(--hsg-s1);
  text-decoration: none; color: inherit;
}
a.stat:hover { border-color: var(--hsg-linie-stark); box-shadow: var(--hsg-schatten-1); }
.stat-value { font-size: var(--hsg-size-h1); font-family: var(--hsg-font-display); font-variant-numeric: tabular-nums; line-height: 1; }
.stat-label { color: var(--hsg-text-2); font-size: var(--hsg-size-ui); }

/* --- Fortschritt ---------------------------------------------------------- */
.meter { height: 8px; border-radius: var(--hsg-r-pill); background: var(--hsg-flaeche); overflow: hidden; }
.meter > span { display: block; height: 100%; background: var(--hsg-koralle); border-radius: inherit; }
.meter.is-over > span { background: var(--hsg-status-hinweis); }

/* --- Kurzmeldungen -------------------------------------------------------- */
.toasts {
  position: fixed; right: var(--hsg-s4); bottom: var(--hsg-s4); z-index: 60;
  display: flex; flex-direction: column; gap: var(--hsg-s2); max-width: min(420px, 90vw);
}
.toast {
  display: flex; align-items: flex-start; gap: var(--hsg-s3);
  padding: var(--hsg-s3) var(--hsg-s4);
  background: var(--hsg-weiss); border: 1px solid var(--hsg-linie);
  border-left: 4px solid var(--hsg-koralle);
  border-radius: var(--hsg-r-kachel); box-shadow: var(--hsg-schatten-2);
  animation: toast-in var(--hsg-dauer-normal) var(--hsg-easing);
}
.toast-ok    { border-left-color: var(--hsg-status-zugesagt); }
.toast-error { border-left-color: var(--hsg-status-hinweis); }
.toast-warn  { border-left-color: var(--hsg-status-offen); }
.toast-close { margin-left: auto; color: var(--hsg-text-2); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* --- Dialog --------------------------------------------------------------- */
dialog.modal {
  border: 0; border-radius: var(--hsg-r-karte); padding: var(--hsg-s6);
  width: min(480px, calc(100vw - 2rem));
  box-shadow: var(--hsg-schatten-3); background: var(--hsg-weiss); color: var(--hsg-tinte);
}
dialog.modal::backdrop { background: rgba(42,35,32,.42); }
dialog.modal > * + * { margin-top: var(--hsg-s4); }

/* --- Marke und gelieferte Grafiken ---------------------------------------- */
.signet { border-radius: var(--hsg-r-input); flex: none; }
.top-brand .signet { border-radius: 9px; }

/* Leerzustände sind reine Linienzeichnungen ohne Text - sie tragen nie die
   Aussage, sondern stehen über der Überschrift. */
.empty-art {
  width: min(360px, 70%); height: auto;
  margin: 0 auto var(--hsg-s4);
  opacity: .95;
}
@media (max-width: 600px) { .empty-art { width: min(260px, 80%); } }

/* QR-Code in der Zwei-Faktor-Einrichtung */
.qr-frame {
  padding: var(--hsg-s3);
  background: var(--hsg-weiss);
  border: 1px solid var(--hsg-linie);
  border-radius: var(--hsg-r-kachel);
  line-height: 0;
}
.qr-frame svg { width: 180px; height: 180px; }

.legal-text { max-width: 62ch; }
.legal-text p + p { margin-top: var(--hsg-s4); }

.stat.is-planned { opacity: .62; }
/* Die Zusatzzeile ist eine Fussnote zur Zahl, keine Ueberschrift - sie muss
   kleiner sein als die Beschriftung darueber, sonst zieht sie den Blick auf sich
   und bricht in schmalen Kacheln ueber drei Zeilen um. */
.stat-limit { color: var(--hsg-text-3); font-size: var(--hsg-size-ui); }

/* --- Schrittanzeige des Einrichtungsassistenten --------------------------- */
.steps {
  display: flex; flex-wrap: wrap; gap: var(--hsg-s2);
  list-style: none; padding: 0;
}
.step {
  display: flex; align-items: center; gap: var(--hsg-s2);
  padding: var(--hsg-s2) var(--hsg-s4);
  background: var(--hsg-weiss);
  border: 1px solid var(--hsg-linie);
  border-radius: var(--hsg-r-pill);
  font-size: var(--hsg-size-ui);
}
.step a { text-decoration: none; color: var(--hsg-text-2); }
.step.is-current { border-color: var(--hsg-koralle); }
.step.is-current a { color: var(--hsg-tinte); font-weight: 600; }
.step.is-done a { color: var(--hsg-tinte); }
.step-mark {
  display: grid; place-items: center;
  width: 20px; height: 20px; border-radius: var(--hsg-r-pill);
  background: var(--hsg-flaeche); color: var(--hsg-text-3);
}
.step.is-done .step-mark { background: var(--hsg-status-zugesagt-bg); color: var(--hsg-status-zugesagt); }
.step.is-current .step-mark { background: var(--hsg-koralle-10); color: var(--hsg-koralle-text); }

/* Ein gesperrter Knopf bleibt sichtbar und anklickbar - er führt zu den Paketen.
   Verstecken wäre bequemer, aber dann weiss niemand, dass es die Leistung gibt. */
.btn.is-locked { opacity: .65; }
.btn.is-locked .ico { color: var(--hsg-text-3); }

/* --- Reiter innerhalb einer Seite ----------------------------------------
   Wechselt zwischen Ausschnitten derselben Seite (z. B. Fotos/Musik/Neuigkeiten).
   Nicht zu verwechseln mit der Hauptnavigation: Wer hier klickt, bleibt auf
   derselben Seite. */
.subnav { display: flex; flex-wrap: wrap; gap: var(--hsg-s2); margin: var(--hsg-s4) 0 var(--hsg-s6); }
.subnav-link {
  display: inline-flex; align-items: center; gap: var(--hsg-s2);
  min-height: 40px; padding: 0 var(--hsg-s4);
  border: 1px solid var(--hsg-linie-stark);
  border-radius: var(--hsg-r-pill);
  background: var(--hsg-weiss); color: var(--hsg-tinte);
  text-decoration: none; font-size: var(--hsg-size-ui);
  transition: border-color var(--hsg-dauer-flink) var(--hsg-easing),
              background var(--hsg-dauer-flink) var(--hsg-easing);
}
.subnav-link:hover { border-color: var(--hsg-koralle); }
.subnav-link.is-active {
  background: var(--hsg-koralle-10);
  border-color: var(--hsg-koralle);
  color: var(--hsg-koralle-text);
  font-weight: 600;
}

/* --- 40-forms.css --- */
/* Formulare.
   Eine Hoehe, ein Rahmen, ein Radius - fuer jeden Feldtyp. Der haeufigste Grund
   dafuer, dass ein Formular unfertig wirkt, sind nicht falsche Regeln, sondern
   Felder, die sich um zwei Pixel unterscheiden. */

.field { display: flex; flex-direction: column; gap: var(--hsg-s2); }
.field + .field, .field + .field-row, .field-row + .field, .field-row + .field-row,
.form > * + * { margin-top: var(--hsg-s4); }

/* INNERHALB einer Feldzeile gilt der Abstand nicht.
   Er ist als Abstand ZWISCHEN Zeilen gedacht - weil die Felder darin aber
   ebenfalls Geschwister vom Typ .field sind, griff er auch dort und schob jedes
   Feld ausser dem ersten um 16 Pixel nach unten. Nebeneinander standen sie damit
   auf verschiedenen Hoehen: "Hauptfarbe" oben, "Akzent" und "Untergrund" tiefer.
   Es sah nach einem Rasterfehler aus und war ein vererbter Aussenabstand.
   Die Ausnahme nennt .field ausdruecklich zweimal: Mit ".field-row > * + *" waere
   sie unspezifischer als ".field + .field" und haette schlicht verloren. */
.field-row > .field + .field,
.field-row > * + * { margin-top: 0; }

/* --- Felder nebeneinander -------------------------------------------------
   Feste Spaltenzahl statt auto-fit.

   Vorher stand hier "repeat(auto-fit, minmax(220px, 1fr))". Das klingt
   nachgiebig, heisst aber: Sobald der Platz unter 2 × 220 px plus Abstand
   faellt, springt die zweite Spalte nach unten. In einer Karte in der rechten
   Spalte ist das staendig der Fall - zwei Felder, die nebeneinander gehoeren,
   standen dort untereinander, und zwar ohne erkennbares Muster.

   Jetzt entscheidet die Anzahl der Felder, nicht die zufaellige Breite des
   Behaelters. Umbrochen wird erst am Telefon, und dann ausdruecklich. */
.field-row { display: grid; gap: var(--hsg-s4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field-row:has(> :nth-child(3)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.field-row:has(> :nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Ein schmales Feld neben einem breiten: <div class="field-row is-2-1"> */
.field-row.is-2-1 { grid-template-columns: 2fr 1fr; }
.field-row.is-1-2 { grid-template-columns: 1fr 2fr; }
@media (max-width: 640px) {
  .field-row, .field-row:has(> :nth-child(3)), .field-row:has(> :nth-child(4)),
  .field-row.is-2-1, .field-row.is-1-2 { grid-template-columns: 1fr; }
}

label { font-size: var(--hsg-size-ui); font-weight: 500; color: var(--hsg-tinte); }
.label-hint { font-weight: 400; color: var(--hsg-text-2); }

/* --- Der gemeinsame Feldkoerper ------------------------------------------- */
.input, .select, .textarea {
  width: 100%;
  min-height: var(--hsg-feld-hoehe);
  padding: 0 var(--hsg-s3);
  font: inherit;
  font-size: var(--hsg-size-ui);
  line-height: 1.4;
  color: var(--hsg-tinte);
  background: var(--hsg-weiss);
  border: 1px solid var(--hsg-feld-linie);
  border-radius: var(--hsg-r-input);
  /* Ohne das rechnet der Browser den Rahmen ZUSAETZLICH zur Breite - ein Feld in
     einer Rasterspalte waere dann zwei Pixel breiter als die Spalte. */
  box-sizing: border-box;
  transition: border-color var(--hsg-dauer-flink) var(--hsg-easing);
}
/* Mehrzeilige Felder brauchen einen senkrechten Innenabstand, einzeilige nicht:
   dort zentriert die Zeilenhoehe den Text schon. */
.textarea { min-height: 96px; padding: var(--hsg-s3); resize: vertical; line-height: 1.6; }
/* Fuer JSON und andere maschinennahe Eingaben (Regel-Editor). */
.textarea.code { font-family: var(--hsg-font-mono); font-size: var(--hsg-size-ui); }

.input::placeholder, .textarea::placeholder { color: var(--hsg-text-3); }

.input:hover, .select:hover, .textarea:hover { border-color: var(--hsg-linie-stark); }

/* Fokus als Kontur nach innen, nicht als dickerer Rahmen.
   Der Styleguide zeigt 1,5 px Koralle. Waere das ein Rahmen, wuechse das Feld
   beim Anklicken um einen halben Pixel und alles daneben ruckelte mit. */
.input:focus, .select:focus, .textarea:focus {
  outline: 1.5px solid var(--hsg-koralle);
  outline-offset: -1.5px;
  border-color: var(--hsg-koralle);
}

.input:disabled, .select:disabled, .textarea:disabled {
  background: var(--hsg-papier-2);
  color: var(--hsg-text-3);
  cursor: not-allowed;
}
.input[readonly] { background: var(--hsg-papier-2); color: var(--hsg-text-2); }

.input[aria-invalid="true"], .textarea[aria-invalid="true"], .select[aria-invalid="true"],
.input.is-error, .select.is-error, .textarea.is-error { border-color: var(--hsg-status-hinweis); }

/* --- Auswahlfelder --------------------------------------------------------
   appearance:none ist der eigentliche Punkt. Ohne das zeichnet jedes System sein
   eigenes Auswahlfeld - andere Hoehe, anderer Innenabstand, anderer Rahmen. Auf
   demselben Formular stand ein <select> damit sichtbar neben einem <input>, und
   keine gemeinsame Regel konnte das beheben, weil der Browser sie gar nicht erst
   anwendete. Der Pfeil ist danach weg und muss selbst gezeichnet werden. */
.select {
  appearance: none; -webkit-appearance: none;
  padding-right: var(--hsg-s10);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237A716A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--hsg-s3) center;
  cursor: pointer;
}
.select:disabled { cursor: not-allowed; opacity: .75; }
/* Mehrfachauswahl hat keinen Pfeil und keine feste Hoehe. */
.select[multiple] {
  appearance: auto; -webkit-appearance: auto;
  background-image: none; padding: var(--hsg-s2); height: auto;
}

/* Datums- und Zeitfelder holen sich sonst eine eigene Hoehe. */
.input[type="date"], .input[type="time"], .input[type="datetime-local"],
.input[type="month"], .input[type="number"] { min-height: var(--hsg-feld-hoehe); }
.input[type="color"] { padding: var(--hsg-s1); cursor: pointer; }
.input[type="file"] { padding: var(--hsg-s2) var(--hsg-s3); line-height: 1.8; }

/* Kurzes Feld in einer Filterleiste - Hoehe bleibt, nur die Breite geht zurueck. */
.select-inline, .input-narrow { max-width: 260px; }

.field-error { color: var(--hsg-status-hinweis); font-size: var(--hsg-size-ui); }
.field-help  { color: var(--hsg-text-2); font-size: var(--hsg-size-ui); }

.check { display: flex; align-items: flex-start; gap: var(--hsg-s3); cursor: pointer; font-weight: 400; }
.check input { margin-top: .2em; width: 18px; height: 18px; accent-color: var(--hsg-koralle); flex: 0 0 auto; }
.check-list { display: flex; flex-direction: column; gap: var(--hsg-s3); }

.inline { display: inline; }
.form-actions {
  display: flex; gap: var(--hsg-s3); flex-wrap: wrap; align-items: center;
  padding-top: var(--hsg-s4); border-top: 1px solid var(--hsg-linie);
}
/* Die Filterleiste richtet an der Unterkante aus, damit Feld und Knopf auf einer
   Linie stehen - auch wenn ueber dem Feld noch eine Beschriftung sitzt. */
.filterbar { display: flex; gap: var(--hsg-s3); flex-wrap: wrap; align-items: flex-end; }
.filterbar .field { flex: 0 1 220px; }

/* --- Rahmen der Anmeldeseiten --------------------------------------------
   Steht hier und nicht in einer eigenen Datei, weil es fast nur Formular ist -
   und weil das Buendel "auth" bewusst schlank bleiben soll: Die Anmeldung ist
   die erste Seite, die jemand sieht, und sie soll sofort da sein. */
.auth-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); min-height: 100vh; }
@media (max-width: 900px) { .auth-raster { grid-template-columns: 1fr; min-height: 0; } }

.auth-spalte {
  padding: var(--hsg-s16) var(--hsg-s12);
  display: flex; flex-direction: column; justify-content: space-between; gap: 44px;
  background: var(--hsg-papier);
}
@media (max-width: 720px) { .auth-spalte { padding: var(--hsg-s8) var(--hsg-s5); gap: var(--hsg-s8); } }

.auth-marke { display: flex; align-items: center; gap: var(--hsg-s2); text-decoration: none; }
.auth-marke span {
  font-family: var(--hsg-font-display); font-weight: 600; font-size: 17px;
  letter-spacing: -0.03em; color: var(--hsg-tinte);
}
.auth-punkt { color: var(--hsg-koralle); }

.auth-inhalt { max-width: 400px; width: 100%; }
.auth-inhalt h1 {
  font-family: var(--hsg-font-display); font-weight: 600; font-size: 34px;
  line-height: 1.05; letter-spacing: -0.03em; margin: 0;
}
.auth-inhalt .auth-vorspann { font-size: var(--hsg-size-ui); color: var(--hsg-text-2); margin: var(--hsg-s2) 0 0; line-height: 1.6; }
.auth-inhalt form { margin-top: var(--hsg-s8); }

/* „Vergessen?" sitzt auf einer Linie mit der Feldbeschriftung - dort sucht man
   danach, nicht unter dem Formular. */
.auth-label-zeile { display: flex; justify-content: space-between; align-items: baseline; gap: var(--hsg-s3); }
.auth-label-zeile a { font-size: 12.5px; font-weight: 500; }

.auth-oder { display: flex; align-items: center; gap: 14px; margin: var(--hsg-s4) 0; }
.auth-oder::before, .auth-oder::after { content: ""; flex: 1; height: 1px; background: var(--hsg-linie); }
.auth-oder span {
  font-family: var(--hsg-font-mono); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--hsg-text-3);
}

.auth-wechsel { font-size: 13.5px; color: var(--hsg-text-2); margin-top: var(--hsg-s6); }
.auth-klein { font-size: 12.5px; color: var(--hsg-text-3); line-height: 1.6; max-width: 400px; margin: 0; }

.auth-fuss { display: flex; gap: var(--hsg-s5); font-size: 12.5px; }
.auth-fuss a { color: var(--hsg-text-3); text-decoration: none; }
.auth-fuss a:hover { color: var(--hsg-tinte); text-decoration: underline; }

.auth-seite {
  background-image: repeating-linear-gradient(135deg, var(--hsg-flaeche) 0 12px, #FBF7F1 12px 24px);
  display: flex; align-items: flex-end; padding: 44px;
}
.auth-seite-dunkel {
  background-image: none; background: var(--hsg-tinte); color: var(--hsg-papier);
  align-items: center; padding: 56px 48px;
}
@media (max-width: 900px) { .auth-seite { display: none; } }

.auth-bildhinweis { background: var(--hsg-papier); border-radius: var(--hsg-r-karte); padding: 22px 24px; max-width: 340px; }
.auth-bildhinweis p { font-size: 13.5px; line-height: 1.6; color: var(--hsg-text-2); margin: var(--hsg-s2) 0 0; }
.auth-mono {
  font-family: var(--hsg-font-mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: #8B8279; margin: 0;
}

/* Rechte Spalte der Registrierung: was nach dem Anlegen passiert. */
.auth-schritte { display: flex; flex-direction: column; gap: 22px; }
.auth-hand { font-family: var(--hsg-font-deko); font-weight: 600; font-size: 30px; color: var(--hsg-koralle); margin: 0; }
.auth-schritt { display: flex; gap: var(--hsg-s4); align-items: flex-start; }
.auth-schritt-nr {
  width: 26px; height: 26px; border-radius: var(--hsg-r-pill); flex: 0 0 auto;
  background: var(--hsg-tinte-weich); color: var(--hsg-papier);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--hsg-font-mono); font-size: 11px;
}
.auth-schritt strong { display: block; font-size: 15px; font-weight: 500; color: var(--hsg-papier); }
.auth-schritt span { display: block; font-size: 13.5px; color: #B8AFA6; margin-top: var(--hsg-s1); line-height: 1.6; }

/* Fortschritt des Anlegen-Assistenten. */
.auth-fortschritt { display: flex; align-items: center; gap: var(--hsg-s2); }
.auth-fortschritt i { width: 24px; height: 4px; border-radius: var(--hsg-r-pill); background: var(--hsg-flaeche); }
.auth-fortschritt i.is-da { background: var(--hsg-koralle); }
.auth-fortschritt span {
  font-family: var(--hsg-font-mono); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--hsg-text-3); margin-left: var(--hsg-s1);
}

/* Auswahl als Pillen statt als Auswahlfeld - bei vier kurzen Antworten ist ein
   Dropdown ein Klick zu viel. */
.wahlpillen { display: flex; gap: var(--hsg-s2); flex-wrap: wrap; }
.wahlpille { position: relative; }
.wahlpille input { position: absolute; opacity: 0; width: 0; height: 0; }
.wahlpille span {
  display: inline-block; cursor: pointer;
  border: 1px solid var(--hsg-feld-linie); border-radius: var(--hsg-r-pill);
  padding: 8px 15px; font-size: 13px; color: var(--hsg-tinte-weich); background: var(--hsg-weiss);
}
.wahlpille span:hover { border-color: var(--hsg-koralle); color: var(--hsg-koralle-text); }
.wahlpille input:checked + span {
  border-color: var(--hsg-koralle); background: var(--hsg-koralle-10);
  color: var(--hsg-koralle-text); font-weight: 500;
}
.wahlpille input:focus-visible + span { outline: 2px solid var(--hsg-fokus); outline-offset: 2px; }

/* --- Mehrfachauswahl -------------------------------------------------------
   Sieht aus wie ein Auswahlfeld und ist genauso hoch - das ist der ganze Punkt.
   Ein Bauteil, das sich neben den anderen Feldern um zwei Pixel unterscheidet,
   faellt sofort auf. */
.mehrfachwahl { position: relative; }

.mw-knopf {
  display: flex; align-items: center; gap: var(--hsg-s1); flex-wrap: wrap;
  width: 100%; min-height: var(--hsg-feld-hoehe);
  padding: var(--hsg-s1) var(--hsg-s10) var(--hsg-s1) var(--hsg-s3);
  font: inherit; font-size: var(--hsg-size-ui); text-align: left; color: var(--hsg-tinte);
  background: var(--hsg-weiss);
  border: 1px solid var(--hsg-feld-linie); border-radius: var(--hsg-r-input);
  box-sizing: border-box; cursor: pointer;
  /* Derselbe Pfeil wie beim Auswahlfeld - es ist dieselbe Geste. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237A716A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--hsg-s3) center;
}
.mw-knopf:hover { border-color: var(--hsg-linie-stark); }
.mw-knopf:focus-visible { outline: 1.5px solid var(--hsg-koralle); outline-offset: -1.5px; border-color: var(--hsg-koralle); }
.mw-platzhalter { color: var(--hsg-text-3); }

.mw-marke {
  display: inline-flex; align-items: center; gap: var(--hsg-s1);
  background: var(--hsg-koralle-10); color: var(--hsg-koralle-text);
  border-radius: var(--hsg-r-pill); padding: 3px var(--hsg-s2);
  font-size: 12.5px; font-weight: 500; line-height: 1.4;
}
.mw-weg { cursor: pointer; font-size: 14px; line-height: 1; opacity: .7; }
.mw-weg:hover, .mw-weg:focus-visible { opacity: 1; }

/* Die Liste ist ohne JavaScript sichtbar und ein ganz normaler Satz
   Ankreuzfelder. Erst das Skript klappt sie ein - so bleibt das Formular
   bedienbar, wenn das Skript nicht laedt. */
.mw-liste {
  display: flex; flex-direction: column;
  margin-top: var(--hsg-s2); padding: var(--hsg-s2);
  border: 1px solid var(--hsg-linie); border-radius: var(--hsg-r-input);
  background: var(--hsg-weiss); max-height: 17rem; overflow-y: auto;
}
.mehrfachwahl[data-bereit="1"] .mw-liste {
  position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; right: 0;
  margin-top: 0; display: none; box-shadow: var(--hsg-schatten-2); min-width: 15rem;
}
.mehrfachwahl.is-offen .mw-liste { display: flex; }

.mw-zeile {
  display: flex; align-items: center; gap: var(--hsg-s3);
  padding: var(--hsg-s2) var(--hsg-s2); border-radius: var(--hsg-r-input);
  font-weight: 400; cursor: pointer;
}
.mw-zeile:hover { background: var(--hsg-flaeche); }
.mw-zeile input { width: 17px; height: 17px; accent-color: var(--hsg-koralle); flex: 0 0 auto; }
.mw-leer { color: var(--hsg-text-3); font-size: var(--hsg-size-ui); margin: 0; padding: var(--hsg-s2); }

/* --- Suchfeld mit Trefferanzeige ------------------------------------------ */
.suchfeld { flex: 1 1 18rem; }
.sf-huelle { position: relative; }

/* "right: auto" statt "right: 0": In einer Filterleiste ist das Feld schmal,
   und ein Aufklappfeld in Feldbreite bricht jeden Namen um. Es darf breiter
   werden als das Feld darueber - es liegt ohnehin darueber. */
.sf-treffer {
  position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; right: auto;
  min-width: max(100%, 22rem); max-width: min(30rem, 90vw);
  background: var(--hsg-weiss); border: 1px solid var(--hsg-linie);
  border-radius: var(--hsg-r-input); box-shadow: var(--hsg-schatten-2);
  max-height: 22rem; overflow-y: auto;
}

.sf-treffer-zeile {
  display: flex; align-items: center; gap: var(--hsg-s3);
  padding: var(--hsg-s3); text-decoration: none; color: var(--hsg-tinte);
  border-bottom: 1px solid var(--hsg-flaeche);
}
.sf-text { display: flex; flex-direction: column; min-width: 0; }
.sf-text b, .sf-text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-treffer-zeile:last-child { border-bottom: 0; }
.sf-treffer-zeile:hover, .sf-treffer-zeile.is-aktiv { background: var(--hsg-flaeche); text-decoration: none; }
.sf-treffer-zeile b { font-weight: 500; }
.sf-treffer-zeile small { color: var(--hsg-text-2); font-size: var(--hsg-size-ui); }
.sf-rechts { margin-left: auto; color: var(--hsg-text-2); font-size: var(--hsg-size-ui); white-space: nowrap; }
.sf-leer { margin: 0; padding: var(--hsg-s4); color: var(--hsg-text-2); font-size: var(--hsg-size-ui); }

/* --- Schalter (an/aus) -----------------------------------------------------
   Ein echtes Ankreuzfeld darunter, nur anders gezeichnet. Kein <div> mit
   Klick-Handler: So funktioniert Tabulator, Leertaste und jedes Vorleseprogramm
   von selbst, und ohne JavaScript bleibt es bedienbar. */
.schalter { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.schalter input { position: absolute; opacity: 0; width: 0; height: 0; }
.schalter-bahn {
  width: 40px; height: 22px; border-radius: var(--hsg-r-pill);
  background: var(--hsg-feld-linie); position: relative;
  transition: background var(--hsg-dauer-flink) var(--hsg-easing);
}
.schalter-bahn::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: var(--hsg-r-pill);
  background: var(--hsg-weiss); box-shadow: var(--hsg-schatten-1);
  transition: transform var(--hsg-dauer-flink) var(--hsg-easing);
}
.schalter input:checked + .schalter-bahn { background: var(--hsg-koralle); }
.schalter input:checked + .schalter-bahn::after { transform: translateX(18px); }
.schalter input:focus-visible + .schalter-bahn { outline: 2px solid var(--hsg-fokus); outline-offset: 2px; }
.schalter input:disabled + .schalter-bahn { opacity: .5; cursor: not-allowed; }

/* --- Tabelle der Ereignisse ------------------------------------------------ */
.melde-kopf, .melde-zeile {
  display: grid; grid-template-columns: minmax(0, 1fr) 56px 56px;
  gap: var(--hsg-s3); align-items: center;
}
.melde-kopf { padding-bottom: var(--hsg-s2); border-bottom: 1px solid var(--hsg-linie); }
.melde-kopf .label:not(:first-child) { justify-self: center; }
.melde-zeile { padding: var(--hsg-s3) 0; border-bottom: 1px solid var(--hsg-flaeche); }
.melde-zeile:last-of-type { border-bottom: 0; }
.melde-zeile .schalter { justify-self: center; }
.melde-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.melde-text span { font-size: var(--hsg-size-ui); color: var(--hsg-text-2); }
/* Pflichtereignisse sind sichtbar festgestellt, nicht ausgegraut: Sie sind
   wichtig, nicht kaputt. */
.melde-zeile.is-pflicht .melde-text strong::after {
  content: "Pflicht"; margin-left: var(--hsg-s2);
  font-family: var(--hsg-font-mono); font-size: var(--hsg-size-label);
  letter-spacing: var(--hsg-track-label); text-transform: uppercase;
  color: var(--hsg-koralle-text);
}
@media (max-width: 560px) {
  .melde-kopf, .melde-zeile { grid-template-columns: minmax(0, 1fr) 44px 44px; }
}

/* --- 90-utilities.css --- */
/* Einzige erlaubte !important-Ausnahme ausserhalb von 80-print.css: ohne sie
   koennen einzelne Komponenten die Regel ueberschreiben und Inhalte, die nur
   Screenreader hoeren sollen, wuerden sichtbar. Marker: visually-hidden */
.visually-hidden {
  position: absolute !important; /* visually-hidden */ width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.stack   { display: flex; flex-direction: column; gap: var(--hsg-s4); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--hsg-s3); align-items: center; }
.grid-2  { display: grid; gap: var(--hsg-s6); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.spread  { display: flex; justify-content: space-between; align-items: center; gap: var(--hsg-s3); }
.right   { margin-left: auto; }
.nowrap  { white-space: nowrap; }