/* =============================================================================
   wl/wl.css — DESIGN-GRUNDLAGE DER INSTANZ (White-Label, ENTWURF-2 §2/§6; Cyrill 06.10.2026: «Dashboard und
   Empfehlungen sind richtig schlecht designt → modern. Für die Designgrundlagen in die Haus-App gehen.»)
   =============================================================================
   WARUM EINE DATEI MIT ZWEI AUFGABEN:
   1. GRUNDLAGE der eigenen wl/-Bilder (Login, Rechtliches, Einstellungen, Verträge, Start): Masse (Abstände, Radien,
      Schatten, Bewegung) als --wl-…-Grössen und wenige Bausteine (.wl-karte, .wl-knopf, .wl-eingabe …). Wer ein
      wl/-Bild baut, nimmt diese — kein zweiter Satz Masse je Bild.
   2. MODERNISIERUNG der Berater-Schale (style.css + app.js), NUR über deren vorhandene Klassen. Keine Vorlage wird
      geändert: die Quell-Auslieferung bleibt bildgleich (sie lädt diese Datei nicht).
   HERKUNFT DER MASSE: die Haus-App (app/style.css, app/buero.css, app/animations.css) — Abstands-Leiter 4/8/12/16/20/
   24/32/40/56, Radien 9/12/16/20, «Haarlinie» statt grauer Rahmen, leise Schatten mit dem Ton der Hauptfarbe statt
   Schwarz, Bewegung mit sanftem Auslauf (cubic-bezier(.16,1,.3,1)), Glas nur für die schwebende Kopfleiste.
   NICHT übernommen: die Hausfarben, deren Farb-Regeln, Verläufe — Farbe kommt hier AUSSCHLIESSLICH aus den Marken-Tokens
   (var(--m-…), Transparenz über die Kanal-Tokens rgba(var(--m-…-rgb), a)). Kein fester Farbwert, kein Verlauf.
   REIHENFOLGE: Der Bau setzt diese Datei als LETZTES Stylesheet vor </head> (nach style.css); der Server setzt danach nur
   noch das Marken-Stil-Element «marke-stil» (Tokens). Schalen-Regeln stehen unter .app-shell — so schlagen sie gleich spezifische
   Regeln aus style.css UND die Stile, die app.js zur Laufzeit anhängt (b3a-, emp-u-), ohne !important. Inline-Stile
   der Vorlagen gewinnen weiterhin (gewollt: hier wird nichts erzwungen, was eine Vorlage ausdrücklich setzt).
   Dunkelmodus: in dieser Lieferung aus (ENTWURF-2 §3.2) — keine dark-mode-Regeln.
   ============================================================================= */

:root {
  --wl-abstand-1: 4px; --wl-abstand-2: 8px; --wl-abstand-3: 12px; --wl-abstand-4: 16px; --wl-abstand-5: 20px;
  --wl-abstand-6: 24px; --wl-abstand-7: 32px; --wl-abstand-8: 40px; --wl-abstand-9: 56px;
  --wl-radius-s: 9px; --wl-radius-m: 12px; --wl-radius-l: 16px; --wl-radius-xl: 20px; --wl-radius-voll: 999px;
  /* Haarlinie und Schatten im Ton der Hauptfarbe: wirkt ruhiger als Grau/Schwarz und passt zu jeder Marke. */
  --wl-haar: 1px solid rgba(var(--m-haupt-rgb), .09);
  --wl-haar-leise: 1px solid rgba(var(--m-haupt-rgb), .06);
  --wl-haar-fest: 1px solid rgba(var(--m-haupt-rgb), .16);
  --wl-schatten-1: 0 1px 2px rgba(var(--m-haupt-rgb), .05);
  --wl-schatten-2: 0 1px 2px rgba(var(--m-haupt-rgb), .04), 0 6px 16px -8px rgba(var(--m-haupt-rgb), .10);
  --wl-schatten-3: 0 2px 4px rgba(var(--m-haupt-rgb), .05), 0 16px 32px -16px rgba(var(--m-haupt-rgb), .16);
  /* Fokus-Ring: 2 px in der Akzent-SCHRIFT — die ist gegen Fläche, Hintergrund, grau-50/-100 gerechnet (≥ 4.5:1), also
     sichtbar auf jedem Grund der Schale (Gegner Start-Design R1, SOLL 3: vorher Akzent mit 18 % Deckkraft ≈ 1.3:1). */
  --wl-fokus: 0 0 0 2px var(--m-akzent-schrift);
  --wl-glas: rgba(var(--m-hintergrund-rgb), .78);
  --wl-gleiten: cubic-bezier(.16, 1, .3, 1);
  --wl-dauer: 160ms; --wl-dauer-lang: 280ms;
  /* Dieselbe Schrift wie die Schale (style.css lädt sie, die Instanz spiegelt sie lokal). */
  --wl-schrift: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* ── 1. BAUSTEINE der wl/-Bilder ─────────────────────────────────────────────────────────────────────────── */
.wl-karte {
  background: var(--m-flaeche); border: var(--wl-haar); border-radius: var(--wl-radius-l);
  box-shadow: var(--wl-schatten-2); padding: var(--wl-abstand-6);
}
.wl-titel { font-size: 1.35rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; margin: 0; color: var(--m-text); }
.wl-leise { color: var(--m-text-leise); font-size: .9rem; line-height: 1.55; margin: 0; }
.wl-label { display: block; font-size: .82rem; font-weight: 500; color: var(--m-text); margin: 0 0 var(--wl-abstand-2); }
.wl-feld { margin-top: var(--wl-abstand-4); }
/* FELDER NEBENEINANDER — DIE EINE REGEL (Cyrill 22.10.2026: «Felder immer auf gleicher Höhe — falls das nicht geht, halt
   Dinge kürzen. … Im Titel, das sehe ich oft und ist gar nicht hübsch»). Jede Reihe mit Feldern ist ein .wl-felder; jedes
   Kind ist eine ZELLE mit vier Zeilen, die es mit seinen Nachbarn TEILT (subgrid): Titel | Eingabe | Hinweis | Rest. Bricht
   ein Titel um, wächst die Titel-Zeile für die ganze Reihe und jeder Titel sitzt unten an seiner Eingabe — alle Eingaben
   einer Reihe beginnen auf derselben Linie, ebenso ihre Hinweise, egal wie lang ein Titel oder Hinweis ist. Eine Zelle
   ohne Titel (Knopf, Ankreuzen: .wl-felder-ohne-titel) stellt ihren Inhalt mitten auf die Zeile der Eingaben. Spalten: so
   viele, wie mit mindestens --wl-feld-min Platz haben (am Handy eine); .wl-felder--eng für Reihen mit vielen kurzen
   Feldern. Abstand zwischen zwei Reihen = Rand unten jeder Zelle (ein Zeilen-Abstand des Rasters stünde auch zwischen
   Titel und Eingabe); den Rand der letzten Reihe nimmt das Raster zurück. Wer Felder nebeneinander stellt, nimmt DIESE
   Regel (Einstellungen: ctx.hilfe.felder / ohneTitel) — keine zweite; die Browser-Wand misst jede Reihe jeder Seite
   (app/tests/lib/feld-reihen.mjs). Titel bleiben trotzdem kurz: Erklärungen gehören in den Hinweis unter dem Feld. */
.wl-felder { --wl-feld-min: 200px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--wl-feld-min), 100%), 1fr));
  column-gap: var(--wl-abstand-4); row-gap: 0; align-items: start; margin-bottom: -18px; }
.wl-felder--eng { --wl-feld-min: 140px; }
.wl-felder > * { grid-row: span 4; display: grid; grid-template-rows: subgrid; row-gap: 0; align-content: start; min-width: 0;
  margin: 0 0 18px; }
/* Eingabe und Hinweis oben an ihrer Zeile (sonst zöge eine Eingabe neben einem höheren Textfeld mit in die Höhe). */
.wl-felder > * > * { align-self: start; }
.wl-felder > * > :first-child { align-self: end; }
.wl-felder > .wl-felder-ohne-titel > * { grid-row: 2; align-self: center; justify-self: start; margin: 0; }
.wl-eingabe {
  display: block; width: 100%; box-sizing: border-box; padding: 11px 14px; font: inherit; font-size: .95rem;
  color: var(--m-text); background: var(--m-flaeche); border: var(--wl-haar-fest); border-radius: var(--wl-radius-m);
  transition: border-color var(--wl-dauer) var(--wl-gleiten), box-shadow var(--wl-dauer) var(--wl-gleiten);
}
.wl-eingabe::placeholder { color: var(--m-text-leise); }
.wl-eingabe:hover { border-color: rgba(var(--m-haupt-rgb), .28); }
.wl-eingabe:focus { outline: none; border-color: var(--m-akzent); box-shadow: var(--wl-fokus); }
.wl-knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--wl-abstand-2);
  padding: 11px 18px; font: inherit; font-size: .92rem; font-weight: 600; line-height: 1.3; cursor: pointer;
  background: var(--m-akzent); color: var(--m-auf-akzent); border: 1px solid transparent; border-radius: var(--wl-radius-m);
  box-shadow: var(--wl-schatten-1); text-decoration: none;
  transition: background-color var(--wl-dauer) var(--wl-gleiten), transform var(--wl-dauer) var(--wl-gleiten),
    box-shadow var(--wl-dauer) var(--wl-gleiten), border-color var(--wl-dauer) var(--wl-gleiten);
}
.wl-knopf:hover { background: var(--m-akzent-hover); transform: translateY(-1px); box-shadow: var(--wl-schatten-2); }
.wl-knopf:active { transform: translateY(0); box-shadow: var(--wl-schatten-1); }
.wl-knopf:focus-visible { outline: none; box-shadow: var(--wl-fokus); }
.wl-knopf:disabled { opacity: .55; cursor: default; transform: none; box-shadow: none; }
.wl-knopf--breit { width: 100%; }
.wl-knopf--leise { background: var(--m-flaeche); color: var(--m-text); border: var(--wl-haar-fest); box-shadow: none; }
.wl-knopf--leise:hover { background: var(--m-grau-50); border-color: rgba(var(--m-haupt-rgb), .28); box-shadow: none; }
.wl-knopf--gefahr { background: var(--m-flaeche); color: var(--m-fehler-700); border: 1px solid var(--m-fehler-200); box-shadow: none; }
.wl-knopf--gefahr:hover { background: var(--m-fehler-50); box-shadow: none; }
.wl-knopf--klein { padding: 7px 12px; font-size: .82rem; border-radius: var(--wl-radius-s); }
.wl-verweis {
  padding: 0; background: none; border: 0; font: inherit; font-size: .88rem; font-weight: 500; cursor: pointer;
  color: var(--m-akzent-schrift); text-decoration: underline; text-decoration-color: rgba(var(--m-akzent-schrift-rgb), .35);
  text-underline-offset: 3px; transition: text-decoration-color var(--wl-dauer) var(--wl-gleiten);
}
.wl-verweis:hover { text-decoration-color: currentColor; }
.wl-verweis:focus-visible { outline: none; box-shadow: var(--wl-fokus); border-radius: 4px; }
.wl-meldung {
  margin: var(--wl-abstand-4) 0 0; padding: 11px 14px; border-radius: var(--wl-radius-m); font-size: .88rem;
  line-height: 1.5; white-space: pre-wrap; border: 1px solid transparent;
}
.wl-meldung--fehler { background: var(--m-fehler-50); color: var(--m-fehler-800); border-color: var(--m-fehler-200); }
.wl-meldung--gut { background: var(--m-erfolg-50); color: var(--m-erfolg-800); border-color: var(--m-erfolg-200); }
.wl-meldung--info { background: var(--m-info-50); color: var(--m-info-800); border-color: var(--m-info-200); }
.wl-pille {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--wl-radius-voll);
  font-size: .78rem; font-weight: 600; background: var(--m-akzent-50); color: var(--m-akzent-schrift);
}
/* Reiter als ruhiger Segment-Schalter (wie die Reiter der Beratung): der gewählte trägt aria-selected bzw. aria-current. */
.wl-reiter {
  display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: rgba(var(--m-haupt-rgb), .05);
  border-radius: var(--wl-radius-m);
}
.wl-reiter > a, .wl-reiter > button {
  padding: 8px 14px; border: 0; border-radius: var(--wl-radius-s); background: transparent; font: inherit;
  font-size: .86rem; font-weight: 500; color: var(--m-text-leise); text-decoration: none; cursor: pointer;
  transition: background-color var(--wl-dauer) var(--wl-gleiten), color var(--wl-dauer) var(--wl-gleiten);
}
.wl-reiter > a:hover, .wl-reiter > button:hover { color: var(--m-text); }
.wl-reiter > [aria-selected="true"], .wl-reiter > [aria-current="page"] {
  background: var(--m-flaeche); color: var(--m-text); font-weight: 600; box-shadow: var(--wl-schatten-1);
}
.wl-reiter > a:focus-visible, .wl-reiter > button:focus-visible { outline: none; box-shadow: var(--wl-fokus); }
.wl-trenner { height: 0; border: 0; border-top: var(--wl-haar); margin: var(--wl-abstand-6) 0; }
@keyframes wl-auftauchen { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.wl-auftauchen { animation: wl-auftauchen var(--wl-dauer-lang) var(--wl-gleiten) both; }

/* ── 2. EIGENE SEITEN: Login (wl/anmelden.html) und Rechtliches (wl/rechtliches.html) ───────────────────── */
.wl-eigen {
  margin: 0; min-height: 100vh; font-family: var(--wl-schrift); color: var(--m-text); background: var(--m-hintergrund);
  -webkit-font-smoothing: antialiased; line-height: 1.55;
}
.wl-eigen *, .wl-eigen *::before, .wl-eigen *::after { box-sizing: border-box; }

.wl-anmelden { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--wl-abstand-7) var(--wl-abstand-4); }
.wl-anmelden-kopf { text-align: center; margin-bottom: var(--wl-abstand-6); }
.wl-anmelden-kopf .marke-logo { font-size: 1.6rem; color: var(--m-haupt); }
.wl-anmelden-karte { width: 100%; max-width: 408px; padding: var(--wl-abstand-7); }
.wl-anmelden-karte .wl-titel { margin-bottom: var(--wl-abstand-1); }
.wl-anmelden-karte form { margin-top: var(--wl-abstand-2); }
.wl-anmelden-karte .wl-knopf--breit { margin-top: var(--wl-abstand-6); }
.wl-passwort { position: relative; }
.wl-passwort .wl-eingabe { padding-right: 92px; }
.wl-passwort-zeigen {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%); padding: 6px 10px; border: 0;
  border-radius: var(--wl-radius-s); background: transparent; font: inherit; font-size: .8rem; font-weight: 500;
  color: var(--m-text-leise); cursor: pointer;
}
.wl-passwort-zeigen:hover { color: var(--m-text); background: rgba(var(--m-haupt-rgb), .05); }
.wl-passwort-zeigen:focus-visible { outline: none; box-shadow: var(--wl-fokus); }
.wl-anmelden-unter { margin-top: var(--wl-abstand-4); text-align: center; }
/* Lage der Fusszeile der Plattform (Satz + Rechtstext-Links, Kern BAUSTEIN_CSS) unter der Karte. */
.wl-anmelden > [data-wl-fuss] { margin-top: var(--wl-abstand-6); }

.wl-recht { max-width: 780px; margin: 0 auto; padding: var(--wl-abstand-7) var(--wl-abstand-4) var(--wl-abstand-9); }
.wl-recht-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--wl-abstand-4);
  flex-wrap: wrap; margin-bottom: var(--wl-abstand-7); }
.wl-recht-kopf .marke-logo { font-size: 1.4rem; color: var(--m-haupt); }
.wl-recht-kopf > a { text-decoration: none; color: inherit; }
.wl-recht .wl-reiter { margin-bottom: var(--wl-abstand-6); }
.wl-recht h1 { font-size: 1.75rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; margin: 0 0 var(--wl-abstand-5); }
.wl-recht-fassung { margin: calc(-1 * var(--wl-abstand-3)) 0 var(--wl-abstand-5); }
.wl-recht-teil + .wl-recht-teil { margin-top: var(--wl-abstand-5); }
.wl-recht-teil h2 { font-size: 1rem; font-weight: 600; margin: 0 0 var(--wl-abstand-3); color: var(--m-text); }
.wl-recht-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .93rem; line-height: 1.7; color: var(--m-text); }
.wl-recht-text a { color: var(--m-akzent-schrift); }

/* ── 3. MODERNISIERUNG DER BERATER-SCHALE (nur Klassen aus style.css/app.js; Vorlagen unverändert) ──────── */
body:has(> .app-shell), body:has(#appShell) { -webkit-font-smoothing: antialiased; }
.app-shell { background: var(--m-hintergrund); }
.app-shell ::selection { background: rgba(var(--m-akzent-rgb), .18); }

/* Seitenleiste: Fläche mit Haarlinie, aktiver Eintrag mit Markenton und Anzeige-Strich statt grauem Block. */
.app-shell .sidebar { background: var(--m-flaeche); border-right: var(--wl-haar); }
.app-shell .sidebar-header { padding: 22px 22px 14px; border-bottom: 0; }
.app-shell .sidebar-nav { padding: var(--wl-abstand-2) var(--wl-abstand-3) var(--wl-abstand-4); }
.app-shell .sidebar-nav-group { margin-bottom: var(--wl-abstand-3); }
.app-shell .sidebar-nav-label { padding: 10px 12px 6px; font-size: .68rem; font-weight: 600; letter-spacing: .07em;
  color: var(--m-text-leise); opacity: .8; }
.app-shell .sidebar-link {
  position: relative; gap: 11px; padding: 9px 12px; margin: 1px 0; border-radius: var(--wl-radius-s);
  color: var(--m-grau-600); font-size: .875rem; font-weight: 500;
  transition: background-color var(--wl-dauer) var(--wl-gleiten), color var(--wl-dauer) var(--wl-gleiten);
}
.app-shell .sidebar-link svg { width: 18px; height: 18px; stroke: var(--m-grau-400);
  transition: stroke var(--wl-dauer) var(--wl-gleiten); }
.app-shell .sidebar-link:hover { background: rgba(var(--m-haupt-rgb), .045); color: var(--m-text); }
.app-shell .sidebar-link:hover svg { stroke: var(--m-grau-600); }
.app-shell .sidebar-link.active { background: rgba(var(--m-akzent-rgb), .10); color: var(--m-akzent-schrift); font-weight: 600; }
.app-shell .sidebar-link.active svg { stroke: var(--m-akzent-schrift); }
.app-shell .sidebar-link:focus-visible { outline: none; box-shadow: var(--wl-fokus); }
.app-shell .sidebar-link .badge { background: var(--m-akzent); color: var(--m-auf-akzent); }
.app-shell .sidebar-footer { padding: var(--wl-abstand-3); border-top: var(--wl-haar-leise); }
.app-shell .sidebar-user { border-radius: var(--wl-radius-m); }
.app-shell .sidebar-user:hover { background: rgba(var(--m-haupt-rgb), .045); }
/* Name des Angemeldeten in der Schrift-Farbe (sonst erbte er die Hauptfarbe: bei einer hellen Hauptfarbe unlesbar). */
.app-shell .sidebar-user-info strong { color: var(--m-text); }
.app-shell .sidebar-user-avatar, .app-shell .topbar-avatar {
  background-color: var(--m-akzent-100); color: var(--m-akzent-800); border: 0; box-shadow: 0 0 0 1px rgba(var(--m-haupt-rgb), .08);
}
.app-shell .sidebar-logout { border-radius: var(--wl-radius-s); }

/* Kopfleiste: Glas — schwebt über dem Inhalt, der darunter durchscheint (die eine Glas-Fläche der Haus-App). */
.app-shell .topbar {
  background: var(--wl-glas); border-bottom: var(--wl-haar-leise);
  -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
}
.app-shell .topbar-notif { border-radius: var(--wl-radius-s); color: var(--m-grau-500); }
.app-shell .topbar-notif:hover { background: rgba(var(--m-haupt-rgb), .06); color: var(--m-text); }
.app-shell .notif-dropdown { border: var(--wl-haar); border-radius: var(--wl-radius-l); box-shadow: var(--wl-schatten-3); }

/* Inhalt: mehr Luft, ruhige Überschrift, sanftes Auftauchen beim Seitenwechsel. Überschriften in der Schrift-Farbe (wie die
   grossen Titel der App), nicht in der Hauptfarbe: die Schale färbte sie über --dark → --m-haupt, und eine helle Hauptfarbe
   (Gelb, Hellblau) stünde dann als Überschrift auf hellem Grund — text ist gegen Fläche und Hintergrund gerechnet. */
.app-shell .page-content { padding: var(--wl-abstand-7) var(--wl-abstand-8) var(--wl-abstand-9); }
.app-shell .page-content > * { animation: wl-auftauchen var(--wl-dauer-lang) var(--wl-gleiten) both; }
.app-shell .page-header { margin-bottom: var(--wl-abstand-7); }
.app-shell .page-header h1 { font-size: 1.75rem; font-weight: 600; letter-spacing: -0.025em; line-height: 1.2; margin-bottom: 6px;
  color: var(--m-text); }
.app-shell .page-header p { color: var(--m-text-leise); font-size: .95rem; }
@media (max-width: 768px) { .app-shell .page-content { padding: var(--wl-abstand-5) var(--wl-abstand-4) var(--wl-abstand-8); } }

/* Karten: eine Sprache für alle — Fläche, Haarlinie, Radius 16, leiser Schatten. */
.app-shell .section-card, .app-shell .card, .app-shell .stat-card, .app-shell .emp-u-karte, .app-shell .crm-dash-card {
  background: var(--m-flaeche); border: var(--wl-haar); border-radius: var(--wl-radius-l); box-shadow: var(--wl-schatten-2);
}
.app-shell .section-card-header { padding: 18px 22px; border-bottom: var(--wl-haar-leise); }
.app-shell .section-card-header h3 { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; color: var(--m-text); }
.app-shell .section-card-body { padding: 18px 22px 22px; }
.app-shell .stat-card { transition: box-shadow var(--wl-dauer-lang) var(--wl-gleiten), transform var(--wl-dauer-lang) var(--wl-gleiten); }
.app-shell .stat-card:hover { box-shadow: var(--wl-schatten-3); transform: translateY(-2px); }
.app-shell .stat-card h3 { font-weight: 600; letter-spacing: -0.02em; }

/* Knöpfe: einfarbig in der Akzentfarbe (der Verlauf aus style.css fällt weg), Schrift nach Kontrast der Marke. */
.app-shell .btn {
  border-radius: 10px; font-weight: 600; letter-spacing: -0.005em;
  transition: background-color var(--wl-dauer) var(--wl-gleiten), border-color var(--wl-dauer) var(--wl-gleiten),
    color var(--wl-dauer) var(--wl-gleiten), transform var(--wl-dauer) var(--wl-gleiten), box-shadow var(--wl-dauer) var(--wl-gleiten);
}
.app-shell .btn:focus-visible { outline: none; box-shadow: var(--wl-fokus); }
.app-shell .btn-primary { background: var(--m-akzent); background-image: none; color: var(--m-auf-akzent); box-shadow: var(--wl-schatten-1); }
.app-shell .btn-primary:hover { background: var(--m-akzent-hover); background-image: none; transform: translateY(-1px); box-shadow: var(--wl-schatten-2); }
.app-shell .btn-outline { background: var(--m-flaeche); color: var(--m-text); border: var(--wl-haar-fest); }
.app-shell .btn-outline:hover { background: var(--m-grau-50); border-color: rgba(var(--m-haupt-rgb), .28); }
.app-shell .btn-secondary { background: rgba(var(--m-haupt-rgb), .06); color: var(--m-text); }
.app-shell .btn-secondary:hover { background: rgba(var(--m-haupt-rgb), .10); }
.app-shell .btn-ghost { color: var(--m-grau-600); border-radius: var(--wl-radius-s); }
.app-shell .btn-ghost:hover { background: rgba(var(--m-haupt-rgb), .06); color: var(--m-text); }
.app-shell .btn-sm { border-radius: var(--wl-radius-s); }
.app-shell .btn .ripple-effect { display: none; }

/* Formulare: Haarlinie, Radius 12, Fokus-Ring in der Akzentfarbe. */
.app-shell .form-group label, .app-shell .crm-form-label, .app-shell .ap-form-label { font-weight: 500; color: var(--m-text); }
.app-shell .form-group input, .app-shell .form-group select, .app-shell .form-group textarea,
.app-shell .crm-form-input, .app-shell .ap-form-input {
  border: var(--wl-haar-fest); border-radius: var(--wl-radius-m); background: var(--m-flaeche); color: var(--m-text);
  transition: border-color var(--wl-dauer) var(--wl-gleiten), box-shadow var(--wl-dauer) var(--wl-gleiten);
}
.app-shell .form-group input:focus, .app-shell .form-group select:focus, .app-shell .form-group textarea:focus,
.app-shell .crm-form-input:focus, .app-shell .ap-form-input:focus {
  outline: none; border-color: var(--m-akzent); box-shadow: var(--wl-fokus);
}
.app-shell input[type="checkbox"], .app-shell input[type="radio"] { accent-color: var(--m-akzent); }

/* Tabellen: leise Kopfzeile, Zeilen mit Haarlinie und Hover. */
.app-shell .admin-table th, .app-shell .data-table th {
  font-size: .72rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--m-text-leise);
  background: transparent; border-bottom: var(--wl-haar);
}
.app-shell .admin-table td, .app-shell .data-table td { border-bottom: var(--wl-haar-leise); }
.app-shell .admin-table tbody tr, .app-shell .data-table tbody tr { transition: background-color var(--wl-dauer) var(--wl-gleiten); }
.app-shell .admin-table tbody tr:hover, .app-shell .data-table tbody tr:hover { background: rgba(var(--m-haupt-rgb), .025); }

/* Leere Zustände und Reiter (Beratung, CRM). */
.app-shell .empty-state h3 { font-weight: 600; color: var(--m-text); }
.app-shell .b3a-empty { border: 1px dashed rgba(var(--m-haupt-rgb), .16); border-radius: var(--wl-radius-l); background: rgba(var(--m-flaeche-rgb), .6); }
.app-shell .b3a-tabs, .app-shell .crm-tabs { background: rgba(var(--m-haupt-rgb), .05); border-radius: var(--wl-radius-m); }
.app-shell .b3a-tab, .app-shell .crm-tab { border-radius: var(--wl-radius-s); font-weight: 500;
  transition: background-color var(--wl-dauer) var(--wl-gleiten), color var(--wl-dauer) var(--wl-gleiten); }
.app-shell .b3a-tab.active, .app-shell .crm-tab.active { font-weight: 600; box-shadow: var(--wl-schatten-1); }
.app-shell .crm-btn { border-radius: 10px; }

/* Empfehlungen: die Zahlenreihe als vier Kacheln, Knöpfe und Felder in der Sprache der Schale. */
.app-shell .emp-u-geben { padding: var(--wl-abstand-6); }
.app-shell .emp-u-geben-titel { font-size: 1rem; letter-spacing: -0.01em; }
.app-shell .emp-u-feld { border: var(--wl-haar-fest); border-radius: var(--wl-radius-m); background: var(--m-flaeche); }
.app-shell .emp-u-feld:focus-within { border-color: var(--m-akzent); box-shadow: var(--wl-fokus); }
.app-shell .emp-u-knopf { border-radius: var(--wl-radius-m); background: var(--m-akzent); color: var(--m-auf-akzent);
  box-shadow: var(--wl-schatten-1); transition: background-color var(--wl-dauer) var(--wl-gleiten), transform var(--wl-dauer) var(--wl-gleiten), box-shadow var(--wl-dauer) var(--wl-gleiten); }
.app-shell .emp-u-knopf:hover { background: var(--m-akzent-hover); box-shadow: var(--wl-schatten-2); }
.app-shell .emp-u-leise { border: var(--wl-haar-fest); border-radius: var(--wl-radius-s); background: var(--m-flaeche);
  transition: border-color var(--wl-dauer) var(--wl-gleiten), background-color var(--wl-dauer) var(--wl-gleiten); }
.app-shell .emp-u-leise:hover { border-color: rgba(var(--m-haupt-rgb), .28); background: var(--m-grau-50); }
.app-shell .emp-u-kopf h3 { font-size: 1.02rem; letter-spacing: -0.01em; }
.app-shell .emp-u-kette { gap: var(--wl-abstand-3); }
.app-shell .emp-u-stufe, .app-shell .emp-u-stufe + .emp-u-stufe {
  padding: 18px 20px; background: var(--m-flaeche); border: var(--wl-haar); border-radius: var(--wl-radius-l);
  box-shadow: var(--wl-schatten-1);
}
.app-shell .emp-u-zahl { font-size: 1.9rem; letter-spacing: -0.03em; }
.app-shell .emp-u-stufe.ziel { border-color: rgba(var(--m-akzent-rgb), .35); box-shadow: var(--wl-schatten-2); }
.app-shell .emp-u-neu-zeile + .emp-u-neu-zeile { border-top: var(--wl-haar-leise); }
.app-shell .emp-u-kuerzel { background: var(--m-akzent-50); color: var(--m-akzent-schrift); }
.app-shell .emp-u-fertig code { border-radius: var(--wl-radius-s); background: rgba(var(--m-haupt-rgb), .04); }

/* ── 4. STARTSEITE (wl/start.js, Modul start) ─────────────────────────────────────────────────────────────── */
/* Die Ordnung der Startseite der Haus-App (vemo-reclaim-ios, DashboardView + Startseitenmasse.swift), übersetzt ins Web:
   ruhiger Gruss (Datum klein darüber, Titel gross, Schrift-Enge -0.021em wie der grosse Titel der App), darunter EINE
   Anker-Fläche in der Hauptfarbe mit den Zahlen auf einen Blick, darunter je Bereich eine helle Karte als Liste wie
   «Nächste Ereignisse» (Tag-Block 40 px breit, 12 px Abstand zum Text, Trennlinie zwischen den Zeilen). Ecken 20 px an
   allen Karten (kartenRadius), Abstand zwischen Blöcken 12 px am Handy (blockAbstand), 20 px am Desktop. Eine Zahl, die
   (noch) nicht gemessen ist, steht als Strich. Farbe NUR über die Tokens der Marke: auf der Hauptfarbe ihre Schrift
   (auf-haupt), auf den hellen Karten text / text-leise / akzent-schrift — jede Rolle auf den Gründen, gegen die der Kern
   sie rechnet (heute-Block und «Fortsetzen» auf akzent-50/-100). Bis 06.10.2026 setzte wl/start.js die Regeln als eigenes
   \3c style>-Element; die Gestalt der Startseite steht hier (start.js vergibt nur die Klassen). */
.wl-start { max-width: 1100px; margin: 0 auto; }

.wl-start-kopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--wl-abstand-4); margin: 0 0 var(--wl-abstand-6); }
.wl-start-gruss { min-width: 0; }
.wl-start-datum { margin: 0 0 var(--wl-abstand-1); font-size: .875rem; font-weight: 500; color: var(--m-text-leise); }
.wl-start-titel { margin: 0; font-size: 2rem; font-weight: 600; letter-spacing: -0.021em; line-height: 1.15; color: var(--m-text);
  overflow-wrap: anywhere; }
.app-shell .wl-start-neu { flex: 0 0 auto; padding: 11px 20px; border-radius: var(--wl-radius-m); font-size: .92rem; }

/* Erste Schritte (Modul google): die Karte «Kalender verbinden» des Knopf-Bausteins (wl/google.js ersteSchritte) steht
   zwischen Kopf und Zahlen; leer (verbunden, «Später» oder Modul aus) nimmt der Platz nichts ein. */
.wl-start-schritte { margin: 0 0 var(--wl-abstand-5); }
.wl-start-schritte:empty { display: none; }

/* Anker: die Zahlen auf einen Blick, je Zahl ein Weg zur Fachseite (Zellen nebeneinander, am Handy 2 × 2). */
.wl-start-anker {
  margin: 0 0 var(--wl-abstand-5); overflow: hidden; border-radius: var(--wl-radius-xl);
  background: var(--m-haupt); color: var(--m-auf-haupt); box-shadow: var(--wl-schatten-3);
}
.wl-start-kennzahlen { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.wl-start-kennzahl {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--wl-abstand-2); min-width: 0;
  padding: 22px 24px 20px; margin: 0; border: 0; border-radius: 0; font: inherit; text-align: left; cursor: pointer;
  background: transparent; color: inherit;
  transition: background-color var(--wl-dauer) var(--wl-gleiten);
}
.wl-start-kennzahl + .wl-start-kennzahl { box-shadow: inset 1px 0 0 rgba(var(--m-auf-haupt-rgb), .16); }
.wl-start-kennzahl:hover { background-color: rgba(var(--m-auf-haupt-rgb), .07); }
.wl-start-kennzahl:focus-visible { outline: 2px solid var(--m-auf-haupt); outline-offset: -4px; }
.wl-start-kennzahl-zahl { font-size: 2.25rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1;
  font-variant-numeric: tabular-nums; }
.wl-start-kennzahl-name { font-size: .8125rem; font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; }

/* Karten der Bereiche: Fläche, Haarlinie, Ecke 20, zwei Spalten ab genug Breite. Spalten statt Raster: eine kurze Karte
   (keine Termine) lässt unter sich keine Lücke bis zur Höhe ihrer Nachbarin — die nächste rückt nach (Lesefolge spaltenweise). */
.wl-start-raster { columns: 2 380px; column-gap: var(--wl-abstand-5); }
.wl-start-karte {
  display: block; break-inside: avoid; margin: 0 0 var(--wl-abstand-5); min-width: 0; padding: 18px 22px 10px; background: var(--m-flaeche); border: var(--wl-haar);
  border-radius: var(--wl-radius-xl); box-shadow: var(--wl-schatten-2);
}
.wl-start-karte-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: var(--wl-abstand-3);
  margin: 0 0 var(--wl-abstand-1); }
.wl-start-karte-titel { margin: 0; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  line-height: 1.4; color: var(--m-text-leise); }
.wl-start-alle {
  flex: 0 0 auto; padding: 4px 0; margin: 0; border: 0; background: none; font: inherit; font-size: .8125rem;
  font-weight: 600; color: var(--m-akzent-schrift); cursor: pointer; text-decoration: none;
}
.wl-start-alle:hover { text-decoration: underline; text-underline-offset: 3px; }
.wl-start-alle:focus-visible { outline: none; box-shadow: var(--wl-fokus); border-radius: 4px; }

.wl-start-liste { list-style: none; margin: 0; padding: 0; }
.wl-start-zeile { display: flex; align-items: center; gap: var(--wl-abstand-3); padding: 12px 0; }
.wl-start-zeile + .wl-start-zeile { border-top: var(--wl-haar-leise); }
.wl-start-tag { flex: 0 0 40px; display: flex; flex-direction: column; align-items: center; padding: 3px 0;
  border-radius: 10px; line-height: 1.1; }
.wl-start-tag-zahl { font-size: 1.0625rem; font-weight: 700; color: var(--m-text); font-variant-numeric: tabular-nums; }
.wl-start-tag-monat { font-size: .6875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--m-text-leise); }
.wl-start-tag--heute { background: var(--m-akzent-50); color: var(--m-akzent-schrift); }
.wl-start-tag--heute .wl-start-tag-zahl, .wl-start-tag--heute .wl-start-tag-monat { color: inherit; }
.wl-start-was { flex: 1 1 auto; min-width: 0; }
.wl-start-name { font-size: .9375rem; font-weight: 600; line-height: 1.35; color: var(--m-text); overflow-wrap: anywhere; }
.wl-start-info { margin: 2px 0 0; font-size: .8125rem; line-height: 1.4; color: var(--m-text-leise); overflow-wrap: anywhere; }
.wl-start-rechts { flex: 0 0 auto; font-size: .875rem; font-weight: 600; color: var(--m-text); font-variant-numeric: tabular-nums; }
.wl-start-aktion {
  flex: 0 0 auto; padding: 6px 14px; border-radius: var(--wl-radius-voll); font-size: .8125rem; font-weight: 600;
  line-height: 1.3; text-decoration: none; background: var(--m-akzent-50); color: var(--m-akzent-schrift);
  transition: background-color var(--wl-dauer) var(--wl-gleiten);
}
.wl-start-aktion:hover { background-color: var(--m-akzent-100); }
.wl-start-aktion:focus-visible { outline: none; box-shadow: var(--wl-fokus); }
.wl-start-leer { margin: 0; padding: 6px 0 14px; font-size: .875rem; line-height: 1.5; color: var(--m-text-leise); }
.wl-start-fehler { margin: 0; padding: 6px 0 14px; font-size: .875rem; color: var(--m-fehler-700); white-space: pre-wrap; }
.wl-start-mehr { margin: 0; padding: 4px 0 12px; font-size: .8125rem; color: var(--m-text-leise); }
.wl-start-inhalt { min-width: 0; }

/* Handy zuerst gedacht, hier die schmale Fassung: Masse der App (Rand 16/15 in den Karten, Blöcke 12 auseinander). */
@media (max-width: 720px) {
  .wl-start-kopf { margin-bottom: var(--wl-abstand-5); }
  .wl-start-titel { font-size: 1.75rem; }
  .wl-start-kennzahlen { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wl-start-kennzahl { padding: 18px 18px 16px; }
  .wl-start-kennzahl + .wl-start-kennzahl { box-shadow: none; }
  .wl-start-kennzahl:nth-child(even) { box-shadow: inset 1px 0 0 rgba(var(--m-auf-haupt-rgb), .16); }
  .wl-start-kennzahl:nth-child(n+3) { box-shadow: inset 0 1px 0 rgba(var(--m-auf-haupt-rgb), .16); }
  .wl-start-kennzahl:nth-child(n+3):nth-child(even) { box-shadow: inset 1px 0 0 rgba(var(--m-auf-haupt-rgb), .16), inset 0 1px 0 rgba(var(--m-auf-haupt-rgb), .16); }
  .wl-start-kennzahl-zahl { font-size: 1.875rem; }
  .wl-start-anker { margin-bottom: var(--wl-abstand-3); }
  .wl-start-karte { margin-bottom: var(--wl-abstand-3); padding: 15px 16px 6px; }
}

/* ── 5. SYMBOLE (Katalog app.symbol.*, Fassung allgemein) ──────────────────────────────────────────────────── */
/* Strich-Symbole statt Emoji: Farbe = Schrift des Ortes (currentColor), Grösse = 1em. Hier nur die Lage auf der Textzeile —
   wie ein Schriftzeichen auf der Grundlinie statt an der Unterkante der Zeile. */
.wl-symbol { display: inline-block; vertical-align: -0.125em; flex: 0 0 auto; }

/* ── 6. FUSSZEILE (© und Rechtstext-Links) im Dashboard (Gestalt: Kern BAUSTEIN_CSS · Platz: Flicken grow__index.html fuss-*) */
/* Die Vorlage trägt zwei Plätze: im Hauptbereich der App (unter #pageContent) und nach der öffentlichen Ansicht #publicView
   (Empfehlungs-Seiten). Sobald app.js die öffentliche Ansicht verbirgt (display none, wenn die App steht), gilt nur die Zeile
   im Hauptbereich — es ist immer genau eine sichtbar. */
#publicView[style*="none"] ~ [data-wl-fuss] { display: none; }

/* ── 7. GOOGLE (wl/google.js, Modul google): der eine Knopf-Baustein «Mit Google verbinden / Trennen» ─────────────── */
/* Vier Orte, ein Baustein (Startseite «Erste Schritte», Profil, Kalender-Karte der Terminbuchung, Reiter Team). */
.wl-google { display: flex; align-items: center; flex-wrap: wrap; gap: var(--wl-abstand-3); }
.wl-google-status { margin: 0; font-size: .9rem; color: var(--m-text); }
.wl-google-status[data-zustand="verbunden"] { color: var(--m-erfolg-schrift); font-weight: 600; }
.wl-google-status[data-zustand="gestoert"], .wl-google-status[data-zustand="unbekannt"] { color: var(--m-fehler-schrift); }
.wl-google-aktion { display: flex; gap: var(--wl-abstand-2); }
.wl-google .wl-meldung { flex-basis: 100%; margin: 0; }
.wl-google-karte .wl-google { margin: var(--wl-abstand-3) 0 var(--wl-abstand-3); }
.wl-google-profil { margin-top: var(--wl-abstand-6); }
.wl-google-titel { margin: 0 0 4px; font-size: 1.05rem; font-weight: 600; }
.wl-google-profil .wl-google { margin-top: var(--wl-abstand-3); }
.wl-google-anmeldung { margin: var(--wl-abstand-3) 0 0; }
.wl-anmelden-google { margin-top: var(--wl-abstand-4); }
.wl-anmelden-oder { display: flex; align-items: center; gap: var(--wl-abstand-3); margin: var(--wl-abstand-4) 0 0; color: var(--m-text-leise); font-size: .85rem; }
.wl-anmelden-oder::before, .wl-anmelden-oder::after { content: ''; flex: 1; border-top: var(--wl-haar-fest); }

/* Wer Bewegung abgestellt hat, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
  .wl-auftauchen, .app-shell .page-content > * { animation: none; }
  .wl-knopf, .wl-knopf:hover, .app-shell .btn-primary:hover, .app-shell .stat-card:hover { transform: none; }
  .wl-start-kennzahl, .wl-start-aktion { transition: none; }
}