/* --- 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; }

/* --- 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; }
}

/* --- 75-marketing.css --- */
/* Öffentliche Seiten — Startseiten, Tarife, Fehlerseiten.
   Masse und Farben stammen aus dem Designdokument „Öffentliche Seiten"; wo dort
   feste Pixelwerte stehen, sind sie hier auf die vorhandenen Tokens abgebildet.
   Neue Farbliterale gibt es nicht: Was das Design nennt, steht bereits in
   00-tokens.css. */

.mkt { background: var(--hsg-papier); color: var(--hsg-tinte); }
.mkt-breite { max-width: 1240px; margin: 0 auto; padding-inline: var(--hsg-s10); }
@media (max-width: 720px) { .mkt-breite { padding-inline: var(--hsg-s5); } }

/* --- Kopf ----------------------------------------------------------------- */
.mkt-kopf { background: var(--hsg-weiss); border-bottom: 1px solid var(--hsg-linie); }
.mkt-dunkel .mkt-kopf { background: var(--hsg-tinte); border-bottom-color: var(--hsg-tinte-weich); }

.mkt-kopf-inner { height: 72px; display: flex; align-items: center; justify-content: space-between; gap: var(--hsg-s6); }

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

.mkt-kennzeichen {
  font-family: var(--hsg-font-mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: #8B8279;
  border: 1px solid var(--hsg-tinte-weich); border-radius: var(--hsg-r-pill);
  padding: 4px 9px; margin-left: var(--hsg-s1);
}

.mkt-nav { display: flex; align-items: center; gap: var(--hsg-s6); font-size: var(--hsg-size-ui); }
.mkt-nav a { color: var(--hsg-text-2); text-decoration: none; }
.mkt-nav a:hover { color: var(--hsg-tinte); text-decoration: none; }
.mkt-dunkel .mkt-nav a { color: #B8AFA6; }
.mkt-dunkel .mkt-nav a:hover { color: var(--hsg-papier); }
/* Genauer geschrieben statt mit !important durchgesetzt: ".mkt-nav a" traegt
   schon eine Klasse und ein Element, also braucht die Ausnahme eine Klasse mehr.
   Ein !important hier haette jede spaetere Anpassung dieser Verweise blockiert. */
.mkt-nav a.mkt-nav-stark { font-weight: 500; color: var(--hsg-tinte); }
.mkt-nav a.mkt-nav-stark:hover { color: var(--hsg-koralle-text); }
.mkt-dunkel .mkt-nav a.mkt-nav-stark { color: var(--hsg-papier); }
.mkt-nav a.btn, .mkt-nav a.btn:hover { color: var(--hsg-weiss); }

.mkt-menue { display: none; background: none; border: 0; padding: var(--hsg-s2); color: inherit; cursor: pointer; }
.mkt-nav-klein { display: none; flex-direction: column; border-top: 1px solid var(--hsg-linie); }
.mkt-nav-klein a { padding: var(--hsg-s3) var(--hsg-s5); color: var(--hsg-tinte); text-decoration: none; border-bottom: 1px solid var(--hsg-linie); }
.mkt-nav-klein.is-open { display: flex; }
@media (max-width: 860px) {
  .mkt-nav { display: none; }
  .mkt-menue { display: block; }
}

/* Ganzflaechig dunkler Kopfbereich der Dienstleisterseite - laeuft ueber die
   volle Breite, nicht nur ueber den Inhaltsbereich. */
.mkt-dunkel-flaeche { background: var(--hsg-tinte); color: var(--hsg-papier); }
.mkt-dunkel-flaeche .mkt-titel { color: var(--hsg-papier); }
.mkt-dunkel-flaeche .mkt-vorspann { color: #B8AFA6; }

/* --- Abschnitte ----------------------------------------------------------- */
.mkt-abschnitt { padding-block: var(--hsg-s16); }
.mkt-abschnitt-eng { padding-block: var(--hsg-s12); }

.mkt-held { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: center; }
@media (max-width: 900px) { .mkt-held { grid-template-columns: 1fr; gap: var(--hsg-s8); } }

.mkt-marke-zeile {
  display: inline-flex; align-items: center; gap: var(--hsg-s2);
  background: var(--hsg-koralle-10); border-radius: var(--hsg-r-pill);
  padding: 7px 14px; font-size: 12.5px; font-weight: 500; color: var(--hsg-koralle-text);
}

.mkt-titel {
  font-family: var(--hsg-font-display); font-weight: 600; font-size: clamp(38px, 5vw, 62px);
  line-height: 0.98; letter-spacing: -0.04em; margin: var(--hsg-s5) 0 0; text-wrap: balance;
}
.mkt-titel-klein { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.02; letter-spacing: -0.035em; }
.mkt-vorspann { font-size: 17px; line-height: 1.65; color: #6B635C; margin-top: var(--hsg-s5); max-width: 46ch; text-wrap: pretty; }
.mkt-dunkel-block .mkt-vorspann { color: #B8AFA6; }

.mkt-knopfreihe { display: flex; gap: var(--hsg-s3); margin-top: var(--hsg-s8); flex-wrap: wrap; }
.mkt-knopfreihe-mitte { justify-content: center; }

.mkt-vertrauen { display: flex; align-items: center; gap: var(--hsg-s3); margin-top: var(--hsg-s6); }
.mkt-punkte { display: flex; }
.mkt-punkte span { width: 30px; height: 30px; border-radius: var(--hsg-r-pill); border: 2px solid var(--hsg-papier); }
.mkt-punkte span + span { margin-left: -9px; }
.mkt-punkt-1 { background: var(--hsg-koralle-10); }
.mkt-punkt-2 { background: var(--hsg-petrol-10); }
.mkt-punkt-3 { background: var(--hsg-butter-20); }
.mkt-vertrauen p { margin: 0; font-size: 13.5px; color: var(--hsg-text-2); }

/* Platzhalter fuer noch fehlende Fotos. Bewusst als sichtbares Muster mit
   Beschriftung: Ein grauer Kasten sieht aus wie ein Ladefehler, ein beschriftetes
   Feld sagt, welches Bild hier hingehoert. */
.mkt-bild {
  border-radius: var(--hsg-r-flaeche); aspect-ratio: 4 / 3;
  display: flex; align-items: center; justify-content: center;
  background-image: repeating-linear-gradient(135deg, var(--hsg-flaeche) 0 10px, #FBF7F1 10px 20px);
}
.mkt-bild-dunkel { background-image: repeating-linear-gradient(135deg, var(--hsg-tinte-weich) 0 10px, #2B2723 10px 20px); }
.mkt-bild span, .mkt-marke-mono {
  font-family: var(--hsg-font-mono); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: #8B8279;
}

/* --- Karten --------------------------------------------------------------- */
.mkt-drei { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--hsg-s5); }
@media (max-width: 900px) { .mkt-drei { grid-template-columns: 1fr; } }

.mkt-karte {
  background: var(--hsg-weiss); border: 1px solid var(--hsg-linie);
  border-radius: var(--hsg-r-karte); padding: var(--hsg-s8);
}
.mkt-karte h3 {
  font-family: var(--hsg-font-display); font-weight: 600; font-size: 21px;
  letter-spacing: -0.02em; margin: var(--hsg-s5) 0 0;
}
.mkt-karte p { font-size: 14.5px; line-height: 1.65; color: #6B635C; margin: var(--hsg-s2) 0 0; }
.mkt-karte-nr { font-family: var(--hsg-font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--hsg-koralle); }

/* Symbol als Maske: die Datei liefert die Form, die Farbe kommt aus dem Text.
   So passt dasselbe Symbol auf hellen und dunklen Grund. */
.mkt-symbol {
  width: 24px; height: 24px; display: inline-block; background: currentColor;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.mkt-symbol-klein { width: 18px; height: 18px; flex: 0 0 auto; }

/* --- Dunkle Flaeche ------------------------------------------------------- */
.mkt-dunkel-block {
  background: var(--hsg-tinte); border-radius: var(--hsg-r-flaeche);
  padding: var(--hsg-s12); color: var(--hsg-papier);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--hsg-s12); align-items: center;
}
@media (max-width: 900px) { .mkt-dunkel-block { grid-template-columns: 1fr; gap: var(--hsg-s8); padding: var(--hsg-s8); } }
.mkt-dunkel-block h2 {
  font-family: var(--hsg-font-display); font-weight: 600; font-size: clamp(26px, 3vw, 36px);
  line-height: 1.1; letter-spacing: -0.03em; margin: var(--hsg-s4) 0 0;
}

.mkt-liste { display: flex; flex-direction: column; gap: var(--hsg-s3); }
.mkt-zeile {
  background: var(--hsg-tinte-weich); border-radius: 14px; padding: var(--hsg-s5);
  display: flex; gap: 14px; align-items: center;
}
.mkt-zeile strong { display: block; font-size: 14.5px; font-weight: 500; }
.mkt-zeile span { display: block; font-size: 13px; color: #B8AFA6; margin-top: 3px; }

/* --- Abschluss ------------------------------------------------------------ */
.mkt-schluss { text-align: center; }
.mkt-hand { font-family: var(--hsg-font-deko); font-weight: 600; font-size: 32px; color: var(--hsg-koralle); }
.mkt-schluss h2 {
  font-family: var(--hsg-font-display); font-weight: 600; font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1.05; letter-spacing: -0.035em; margin: var(--hsg-s2) 0 0;
}

/* --- Tarife --------------------------------------------------------------- */
.mkt-mitte { text-align: center; max-width: 640px; margin-inline: auto; }
.mkt-vorspann-mitte { margin-inline: auto; }
.mkt-tarife { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--hsg-s5); margin-top: var(--hsg-s12); align-items: start; }
@media (max-width: 900px) { .mkt-tarife { grid-template-columns: 1fr; } }

.mkt-tarif {
  background: var(--hsg-weiss); border: 1px solid var(--hsg-linie);
  border-radius: var(--hsg-r-flaeche); padding: var(--hsg-s8); position: relative;
}
.mkt-tarif-hervor { background: var(--hsg-tinte); color: var(--hsg-papier); border-color: var(--hsg-tinte); }
.mkt-tarif h2 { font-family: var(--hsg-font-display); font-weight: 600; font-size: 22px; letter-spacing: -0.02em; margin: 0; }
.mkt-tarif-sub { font-size: 13.5px; color: var(--hsg-text-2); margin: var(--hsg-s1) 0 0; }
.mkt-tarif-hervor .mkt-tarif-sub { color: #B8AFA6; }
.mkt-tarif-preis { display: flex; align-items: baseline; gap: var(--hsg-s2); margin-top: var(--hsg-s6); }
.mkt-tarif-preis b { font-family: var(--hsg-font-display); font-weight: 600; font-size: 44px; line-height: 1; letter-spacing: -0.035em; }
.mkt-tarif-preis span { font-size: 13.5px; color: var(--hsg-text-2); }
.mkt-tarif-hervor .mkt-tarif-preis span { color: #B8AFA6; }
.mkt-tarif .btn { width: 100%; margin-top: var(--hsg-s6); }
.mkt-tarif-fahne {
  position: absolute; top: -11px; left: var(--hsg-s8);
  background: var(--hsg-koralle); color: var(--hsg-weiss); border-radius: var(--hsg-r-pill);
  padding: 5px 13px; font-size: 11.5px; font-weight: 700;
}
.mkt-tarif-punkte { display: flex; flex-direction: column; gap: 11px; margin-top: var(--hsg-s6); font-size: 14px; color: var(--hsg-tinte-weich); }
.mkt-tarif-hervor .mkt-tarif-punkte { color: var(--hsg-papier); }
.mkt-tarif-punkte li { display: flex; gap: var(--hsg-s3); align-items: flex-start; list-style: none; }
.mkt-tarif-punkte { padding: 0; margin-bottom: 0; }
.mkt-tarif-aus { color: var(--hsg-text-3); }

.mkt-hinweis-butter {
  background: var(--hsg-butter-20); border-radius: var(--hsg-r-flaeche); padding: var(--hsg-s8);
  margin-top: var(--hsg-s8); display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--hsg-s8); align-items: center;
}
@media (max-width: 720px) { .mkt-hinweis-butter { grid-template-columns: 1fr; } }
.mkt-hinweis-butter h2 { font-family: var(--hsg-font-display); font-weight: 600; font-size: 24px; letter-spacing: -0.025em; color: #6B4F14; margin: 0; }
.mkt-hinweis-butter p { font-size: 14.5px; line-height: 1.7; color: var(--hsg-butter-text); margin: var(--hsg-s2) 0 0; }

/* --- Rechenbeispiel Dienstleister ---------------------------------------- */
.mkt-koralle-block {
  background: var(--hsg-koralle-10); border-radius: var(--hsg-r-flaeche); padding: 44px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; align-items: center;
}
@media (max-width: 900px) { .mkt-koralle-block { grid-template-columns: 1fr; gap: var(--hsg-s8); padding: var(--hsg-s8); } }
.mkt-koralle-block h2 { font-family: var(--hsg-font-display); font-weight: 600; font-size: clamp(26px, 3vw, 34px); line-height: 1.1; letter-spacing: -0.03em; color: #8E3421; margin: var(--hsg-s3) 0 0; }
.mkt-koralle-block p { font-size: 15px; line-height: 1.7; color: #A8503A; margin: var(--hsg-s3) 0 0; }
.mkt-label { font-family: var(--hsg-font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hsg-koralle-text); }
.mkt-label-hell { color: #8B8279; }

.mkt-rechnung { background: var(--hsg-weiss); border-radius: var(--hsg-r-karte); padding: var(--hsg-s6); }
.mkt-rechnung div { display: flex; justify-content: space-between; align-items: baseline; }
.mkt-rechnung div + div { margin-top: var(--hsg-s3); }
.mkt-rechnung dt { font-size: 13.5px; color: var(--hsg-text-2); }
.mkt-rechnung dd { margin: 0; font-family: var(--hsg-font-mono); font-size: 13px; }
.mkt-rechnung .mkt-summe { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--hsg-flaeche); }
.mkt-rechnung .mkt-summe dd { font-family: var(--hsg-font-display); font-weight: 600; font-size: 22px; letter-spacing: -0.02em; }
.mkt-rechnung .mkt-gut { color: var(--hsg-petrol-text); }
.mkt-rechnung p { font-size: 12.5px; color: var(--hsg-text-3); margin: 14px 0 0; line-height: 1.5; }

/* --- Fehlerseiten --------------------------------------------------------- */
.mkt-fehler { min-height: 60vh; display: flex; align-items: center; justify-content: center; padding: var(--hsg-s16) var(--hsg-s10); }
.mkt-fehler-inner { max-width: 520px; text-align: center; }
.mkt-fehler-inner img { width: 100%; max-width: 300px; display: block; margin: 0 auto; }
.mkt-fehler-code { font-family: var(--hsg-font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--hsg-text-3); margin-top: var(--hsg-s8); }
.mkt-fehler-inner h1 { font-family: var(--hsg-font-display); font-weight: 600; font-size: 34px; line-height: 1.08; letter-spacing: -0.03em; margin: var(--hsg-s3) 0 0; }
.mkt-fehler-inner p { font-size: 15px; line-height: 1.7; color: #6B635C; margin: var(--hsg-s3) 0 0; }
.mkt-fehler-knoepfe { display: flex; gap: var(--hsg-s3); justify-content: center; margin-top: var(--hsg-s8); flex-wrap: wrap; }

/* --- Fuss ----------------------------------------------------------------- */
.mkt-fuss { background: var(--hsg-tinte); color: #B8AFA6; margin-top: var(--hsg-s16); }
.mkt-fuss-inner { padding-block: var(--hsg-s10); display: flex; flex-direction: column; gap: var(--hsg-s5); }
.mkt-fuss-marke { display: flex; align-items: center; gap: var(--hsg-s2); font-family: var(--hsg-font-display); font-weight: 600; font-size: 16px; letter-spacing: -0.03em; color: var(--hsg-papier); }
.mkt-fuss-nav { display: flex; flex-wrap: wrap; gap: var(--hsg-s5); font-size: var(--hsg-size-ui); }
.mkt-fuss-nav a { color: #B8AFA6; text-decoration: none; }
.mkt-fuss-nav a:hover { color: var(--hsg-papier); text-decoration: underline; }
.mkt-fuss-klein { font-size: 12.5px; color: #8B8279; margin: 0; max-width: 60ch; line-height: 1.6; }

/* --- 80-print.css --- */
@media print {
  .top, .nav, .toasts, .btn, .form-actions, .filterbar, .skip-link { display: none !important; }
  .layout { display: block !important; }
  .main   { padding: 0 !important; max-width: none !important; }
  .card   { border: 0 !important; box-shadow: none !important; padding: 0 !important; }
  body    { background: #fff !important; }
  a[href]::after { content: "" !important; }
  .table thead { display: table-header-group; }
  tr, .card { break-inside: avoid; }
  @page { size: A4; margin: 16mm 14mm; }
}

/* --- 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; }