/* =============================================================================
   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);
  --wl-fokus: 0 0 0 3px rgba(var(--m-akzent-rgb), .18);
  --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); }
.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; }
.wl-anmelden-fuss { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--wl-abstand-1) var(--wl-abstand-4);
  margin-top: var(--wl-abstand-6); font-size: .8rem; }
.wl-anmelden-fuss a { color: var(--m-text-leise); text-decoration: none; }
.wl-anmelden-fuss a:hover { color: var(--m-text); text-decoration: underline; text-underline-offset: 3px; }

.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); }
.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. */
.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; }
.app-shell .page-header p { color: var(--m-text-leise); font-size: .95rem; }

/* 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; }
.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) ─────────────────────────────────────────────────────────────── */
/* Bis 06.10.2026 setzte wl/start.js diese Regeln als eigenes \3c style>-Element zur Laufzeit; jetzt steht die Gestalt der
   Startseite hier, an der einen Stelle für die Gestalt der Instanz (start.js vergibt nur die Klassen). */
.wl-start { max-width: 1100px; margin: 0 auto; }
.wl-start-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; align-items: start; }
.wl-start-kachel { margin: 0; }
.wl-start-kachel .section-card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wl-start-zahl {
  min-width: 28px; padding: 2px 10px; border-radius: var(--wl-radius-voll); background: var(--m-akzent-50);
  color: var(--m-akzent-schrift); font-weight: 600; font-size: .85rem; text-align: center;
}
.wl-start-liste { list-style: none; margin: 0; padding: 0; }
.wl-start-zeile { display: flex; gap: 14px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--m-rand); }
.wl-start-zeile:last-child { border-bottom: 0; }
.wl-start-wann { flex: 0 0 auto; min-width: 96px; font-weight: 600; color: var(--m-text); font-variant-numeric: tabular-nums; }
.wl-start-was { flex: 1 1 auto; min-width: 0; }
.wl-start-name { font-weight: 600; color: var(--m-text); overflow-wrap: anywhere; }
.wl-start-leise { color: var(--m-text-leise); font-size: .85rem; margin: 0; }
.wl-start-fehler { color: var(--m-fehler-700); font-size: .9rem; margin: 0; white-space: pre-wrap; }
.wl-start-mehr { color: var(--m-text-leise); font-size: .85rem; margin: 8px 0 0; }
.wl-start-fuss { margin-top: 14px; }
.wl-start-aktion { flex: 0 0 auto; align-self: center; }

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

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