/* Neue Optik der Demo (Portal U1–U4 + #465, Stand 26.10.2026): Inter, vier Darstellungen, neuer Rahmen, Berater-Startseite.
 * Farben kommen aus css/ansicht.css (Variablen des Portals). Dieses Blatt legt sie über die bestehenden Ansichten:
 * die Inhalte der Demo-Seiten sind noch die der alten Optik (Tailwind-Klassen), werden hier auf die Variablen umgelegt.
 * GRENZE: Gesundheitsstand, Monatslauf und Nachtlauf sind im Portal teils schon auf den neuen Baukasten umgestellt; hier sind es die
 * bisherigen Inhalte in neuer Farbgebung — nicht 1:1 derselbe Bildschirm. Die Mandantenansicht (mandant.html) ist wie im Portal noch alt (U8). */

html[data-ansicht] {
  --bop-navy: var(--primary);
  --bop-cloud: var(--surface-soft);
  --bop-slate: var(--text-muted);
  font-family: 'InterDemo', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  color-scheme: light;
}
html[data-ansicht='nacht'], html[data-ansicht='glas-nacht'] { color-scheme: dark; }
html[data-ansicht] body, html[data-ansicht] button, html[data-ansicht] input, html[data-ansicht] select, html[data-ansicht] textarea {
  font-family: 'InterDemo', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}
html[data-ansicht] body { background: var(--background); color: var(--text-default); }
html[data-ansicht] body::before { content: ''; position: fixed; inset: 0; z-index: -1; background: var(--page-glow); pointer-events: none; }
html[data-ansicht] #app { background: transparent; }
html[data-ansicht] .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---------- Seitenleiste ---------- */
html[data-ansicht] .n-aside { background: var(--nav-bg); color: var(--nav-text); -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter); border-right: 1px solid color-mix(in srgb, var(--nav-text) 10%, transparent); }
html[data-ansicht] .n-kopf { padding: 28px 24px 20px; border-bottom: 1px solid color-mix(in srgb, var(--nav-text) 10%, transparent); }
html[data-ansicht] .n-aside .n-kopf h1 { color: var(--nav-text); font-size: 13px; letter-spacing: .02em; }
html[data-ansicht] .n-aside .n-kopf [class*='text-white'] { color: var(--nav-text-muted); }
html[data-ansicht] .n-aside .n-kopf .border-white\/10 { border-color: color-mix(in srgb, var(--nav-text) 10%, transparent); }
html[data-ansicht] .n-nav { padding: 14px 12px 8px; display: flex; flex-direction: column; gap: 10px; }
html[data-ansicht] .n-sec { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 8px 12px 4px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--nav-text-muted); background: none; border: 0; cursor: pointer; }
html[data-ansicht] .n-sec .chev { display: inline-flex; transition: transform .15s; }
html[data-ansicht] .n-sec .chev.-rotate-90 { transform: rotate(-90deg); }
html[data-ansicht] .nav-items { display: flex; flex-direction: column; gap: 2px; }
html[data-ansicht] .n-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 14px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--nav-text); background: none; border: 0; text-align: left; cursor: pointer; text-decoration: none; transition: background .12s; }
html[data-ansicht] .n-item svg { flex: none; opacity: .9; }
html[data-ansicht] .n-item:hover { background: color-mix(in srgb, var(--nav-text) 9%, transparent); }
html[data-ansicht] .n-item.nav-on { background: var(--nav-active-bg); color: var(--nav-active-text); font-weight: 600; }
html[data-ansicht] .n-item:focus-visible, html[data-ansicht] .n-sec:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
html[data-ansicht] .n-foot { flex: none; padding: 10px 12px 14px; border-top: 1px solid color-mix(in srgb, var(--nav-text) 10%, transparent); display: flex; flex-direction: column; gap: 2px; }
html[data-ansicht] .n-aside a[href^='https://blueoceanprivacy.io'] { margin: 4px 12px 10px; background: color-mix(in srgb, var(--nav-text) 6%, transparent); border-color: color-mix(in srgb, var(--nav-text) 12%, transparent); border-radius: 16px; }
html[data-ansicht] .n-aside a[href^='https://blueoceanprivacy.io'] [class*='text-white'] { color: var(--nav-text-muted); }
html[data-ansicht] .n-aside a[href^='https://blueoceanprivacy.io'] .text-white\/90 { color: var(--nav-text); }

/* ---------- Kopfleiste + Schalter ---------- */
html[data-ansicht] #app header { background: color-mix(in srgb, var(--surface) 82%, transparent); -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter); border-color: var(--border); }
html[data-ansicht] #demo-ribbon { background: var(--surface-soft); color: var(--text-muted); border-bottom: 1px solid var(--border); }
html[data-ansicht] #statusline { background: color-mix(in srgb, var(--surface) 92%, transparent); border-color: var(--border); color: var(--text-muted); }
html[data-ansicht] .n-sw { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--surface-soft); border: 1px solid var(--border); margin-left: auto; margin-right: 8px; }
html[data-ansicht] .n-sw button { width: 32px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 0; background: none; color: var(--text-muted); cursor: pointer; }
html[data-ansicht] .n-sw button:hover { color: var(--text-strong); }
html[data-ansicht] .n-sw button[aria-pressed='true'] { background: var(--surface); color: var(--text-strong); box-shadow: var(--card-shadow); }
html[data-ansicht] .n-sw button:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

/* ---------- Startseite ---------- */
html[data-ansicht] .st-wrap { max-width: 1180px; margin: 0 auto; padding: 8px 0 32px; }
html[data-ansicht] .st-stand { margin: 8px 0 4px; font-size: 14px; color: var(--text-muted); }
html[data-ansicht] .st-gruss { margin: 0; font-size: clamp(1.6rem, 4vw, 2.1rem); font-weight: 700; letter-spacing: -.02em; color: var(--text-strong); }
html[data-ansicht] .st-lead { margin: 4px 0 22px; font-size: 16px; color: var(--text-muted); }
html[data-ansicht] .st-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1100px) { html[data-ansicht] .st-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { html[data-ansicht] .st-grid { grid-template-columns: 1fr; } }
html[data-ansicht] .st-kachel { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 20px; min-height: 200px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--card-shadow); -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter); color: inherit; text-decoration: none; transition: transform .12s, border-color .12s; }
html[data-ansicht] .st-kachel:hover { border-color: var(--border-strong); transform: translateY(-1px); }
html[data-ansicht] .st-kachel:focus-visible, html[data-ansicht] .st-zeile:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
html[data-ansicht] .st-ic { width: 40px; height: 40px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 10px; }
html[data-ansicht] .st-ok { background: var(--ok-bg); color: var(--ok-fg); }
html[data-ansicht] .st-info { background: var(--info-bg); color: var(--info-fg); }
html[data-ansicht] .st-ai { background: var(--ai-bg); color: var(--ai-fg); }
html[data-ansicht] .st-warn { background: var(--warn-bg); color: var(--warn-fg); }
html[data-ansicht] .st-pill { position: absolute; top: 14px; right: 14px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--ok-bg); color: var(--ok-fg); border: 1px solid color-mix(in srgb, var(--ok-fg) 30%, transparent); }
html[data-ansicht] .st-titel { font-size: 16px; font-weight: 700; color: var(--text-strong); }
html[data-ansicht] .st-zahl { font-size: 32px; font-weight: 700; letter-spacing: -.02em; color: var(--text-strong); line-height: 1.1; font-variant-numeric: tabular-nums; }
html[data-ansicht] .st-sub { font-size: 14px; color: var(--text-muted); line-height: 1.4; }
html[data-ansicht] .st-pfeil { margin-top: auto; align-self: flex-end; color: var(--text-muted); display: inline-flex; }
html[data-ansicht] .st-liste { margin-top: 20px; padding: 22px 24px 12px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--card-shadow); -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter); }
html[data-ansicht] .st-liste h2 { margin: 0 0 8px; font-size: 16px; font-weight: 700; color: var(--text-strong); }
html[data-ansicht] .st-zeile { display: flex; align-items: center; gap: 14px; padding: 12px 0; color: var(--text-muted); text-decoration: none; border-top: 1px solid transparent; }
html[data-ansicht] .st-zeile + .st-zeile { border-top-color: var(--border); }
html[data-ansicht] .st-zeile:hover .st-zname b { text-decoration: underline; }
html[data-ansicht] .st-zname { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 14px; }
html[data-ansicht] .st-zname b { font-weight: 600; color: var(--text-strong); font-size: 15px; }
html[data-ansicht] .st-zn { font-weight: 700; color: var(--text-strong); font-variant-numeric: tabular-nums; }

/* ---------- bestehende Ansichten: alte Farben auf die Variablen des Portals ---------- */
html[data-ansicht] .bg-white, html[data-ansicht] [class*='bg-white\/'], html[data-ansicht] .bg-\[\#F8F9FA\] { background-color: var(--surface); }
html[data-ansicht] .bg-zinc-50, html[data-ansicht] .bg-zinc-100, html[data-ansicht] .bg-slate-50, html[data-ansicht] .bg-slate-100, html[data-ansicht] .bg-gray-50, html[data-ansicht] .bg-gray-100 { background-color: var(--surface-soft); }
html[data-ansicht] .bg-zinc-200, html[data-ansicht] .bg-slate-200 { background-color: var(--border-strong); }
html[data-ansicht] .text-zinc-900, html[data-ansicht] .text-zinc-800, html[data-ansicht] .text-slate-900, html[data-ansicht] .text-slate-800, html[data-ansicht] .text-black { color: var(--text-strong); }
html[data-ansicht] .text-zinc-700, html[data-ansicht] .text-slate-700 { color: var(--text-default); }
html[data-ansicht] .text-zinc-600, html[data-ansicht] .text-zinc-500, html[data-ansicht] .text-slate-600, html[data-ansicht] .text-slate-500 { color: var(--text-muted); }
html[data-ansicht] .text-zinc-400, html[data-ansicht] .text-slate-400, html[data-ansicht] .text-zinc-300 { color: var(--text-disabled); }
html[data-ansicht] [class*='border-zinc-'], html[data-ansicht] [class*='border-slate-'], html[data-ansicht] [class*='border-gray-'] { border-color: var(--border); }
html[data-ansicht] [class*='divide-zinc-'] > * + * { border-color: var(--border); }
html[data-ansicht] [class*='bg-teal-50'], html[data-ansicht] [class*='bg-emerald-50'], html[data-ansicht] [class*='bg-green-50'] { background-color: var(--ok-bg); }
html[data-ansicht] [class*='text-teal-'], html[data-ansicht] [class*='text-emerald-'], html[data-ansicht] [class*='text-green-'] { color: var(--ok-fg); }
html[data-ansicht] [class*='bg-amber-50'], html[data-ansicht] [class*='bg-yellow-50'], html[data-ansicht] [class*='bg-orange-50'] { background-color: var(--warn-bg); }
html[data-ansicht] [class*='text-amber-'], html[data-ansicht] [class*='text-orange-'], html[data-ansicht] [class*='text-yellow-'] { color: var(--warn-fg); }
html[data-ansicht] [class*='bg-red-50'], html[data-ansicht] [class*='bg-rose-50'] { background-color: var(--danger-bg); }
html[data-ansicht] [class*='text-red-'], html[data-ansicht] [class*='text-rose-'] { color: var(--danger-fg); }
html[data-ansicht] [class*='bg-sky-50'], html[data-ansicht] [class*='bg-blue-50'], html[data-ansicht] [class*='bg-cyan-50'] { background-color: var(--info-bg); }
html[data-ansicht] [class*='text-sky-7'], html[data-ansicht] [class*='text-blue-7'], html[data-ansicht] [class*='text-cyan-7'] { color: var(--info-fg); }
html[data-ansicht] [class*='bg-violet-50'], html[data-ansicht] [class*='bg-purple-50'], html[data-ansicht] [class*='bg-indigo-50'] { background-color: var(--ai-bg); }
html[data-ansicht] [class*='text-violet-7'], html[data-ansicht] [class*='text-purple-7'], html[data-ansicht] [class*='text-indigo-7'] { color: var(--ai-fg); }
html[data-ansicht] [class*='border-teal-'], html[data-ansicht] [class*='border-emerald-'], html[data-ansicht] [class*='border-amber-'], html[data-ansicht] [class*='border-red-'], html[data-ansicht] [class*='border-sky-'] { border-color: var(--border); }
html[data-ansicht] [class*='bg-gradient-to-'] { background-image: none; background-color: var(--surface); }
html[data-ansicht] .bg-\[var\(--bop-navy\)\] { color: var(--on-primary); }
html[data-ansicht] .text-\[var\(--bop-navy\)\] { color: var(--text-strong); }
html[data-ansicht] .shadow-sm, html[data-ansicht] .shadow-md { box-shadow: var(--card-shadow); }
html[data-ansicht] input, html[data-ansicht] select, html[data-ansicht] textarea { background-color: var(--surface-soft); color: var(--text-default); border-color: var(--border-strong); }
html[data-ansicht] input::placeholder, html[data-ansicht] textarea::placeholder { color: var(--text-disabled); }
html[data-ansicht] table { color: var(--text-default); }
html[data-ansicht] [role='dialog'] > div { background-color: var(--surface); color: var(--text-default); }
html[data-ansicht] a { text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
/* Beschriftungen in Diagrammen (SVG-Text mit festem dunklem Fill) in den dunklen Darstellungen lesbar machen. */
html[data-ansicht='nacht'] svg text, html[data-ansicht='glas-nacht'] svg text { fill: var(--text-strong); }
@media (prefers-reduced-motion: reduce) { html[data-ansicht] .st-kachel { transition: none; } }