/* Kazu 2026 — helles Finanz-Studio.
   Diese Ebene modernisiert Shell und Tagesmodus, ohne die Fachlogik anzufassen. */
:root {
  --billie-bg-deep: #edf4eb;
  --billie-bg-panel: #ffffff;
  --billie-bg-elevated: #f7faf5;
  --billie-bg-overlay: rgba(28, 49, 35, .32);
  --billie-border-subtle: rgba(42, 79, 53, .11);
  --billie-border-active: rgba(50, 122, 73, .42);
  --billie-text-primary: #183021;
  --billie-text-secondary: #4f6656;
  --billie-text-muted: #7b8f80;
  --billie-accent-cyan: #2f7b4c;
  --billie-accent-blue: #3d8b59;
  --billie-success: #2d8a50;
  --billie-warning: #b87820;
  --billie-danger: #c94c5d;

  --bg-deep: #edf4eb;
  --bg-panel: #ffffff;
  --bg-elevated: #f7faf5;
  --bg-inset: #eef5ec;
  --bg-hover: #e6f0e3;
  --bg-scrim: rgba(28, 49, 35, .38);
  --border-soft: rgba(42, 79, 53, .11);
  --border-mid: rgba(42, 79, 53, .2);
  --border-active: rgba(50, 122, 73, .42);
  --text-primary: #183021;
  --text-secondary: #4f6656;
  --text-muted: #7b8f80;
  --text-inverse: #f8fbf7;
  --accent-ice: #2f7b4c;
  --accent-blue: #3d8b59;
  --accent-deep: #28643f;
  --success: #2d8a50;
  --warning: #b87820;
  --danger: #c94c5d;
  --accent-ice-dim: rgba(47, 123, 76, .1);
  --accent-blue-dim: rgba(61, 139, 89, .11);
  --success-dim: rgba(45, 138, 80, .1);
  --warning-dim: rgba(184, 120, 32, .11);
  --danger-dim: rgba(201, 76, 93, .1);
  --shadow-panel: 0 1px 0 rgba(255,255,255,.9) inset, 0 12px 34px rgba(39, 70, 47, .08);
  --shadow-overlay: 0 28px 80px rgba(26, 52, 34, .2);
  --glow-ice: 0 0 0 3px rgba(47, 123, 76, .11);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --ink: var(--text-primary);
  --muted: var(--text-muted);
  --lime: var(--accent-ice);
  --mono: var(--font-mono);
}

html { color-scheme: light; }
.app[hidden] { display: none !important; }
body {
  background:
    radial-gradient(850px 520px at 82% -8%, rgba(157, 209, 150, .32), transparent 64%),
    radial-gradient(650px 470px at 4% 34%, rgba(242, 209, 125, .14), transparent 66%),
    #edf4eb;
  color: var(--text-primary);
}
body::before {
  background:
    linear-gradient(rgba(47,123,76,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47,123,76,.018) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, #000, transparent 72%);
}

/* Login */
.gate {
  background:
    radial-gradient(680px 430px at 78% 12%, rgba(119,183,117,.31), transparent 64%),
    linear-gradient(145deg, #edf5ea, #f9f4e8);
  backdrop-filter: none;
}
.gate-card {
  width: min(440px, 100%); padding: 34px;
  border: 1px solid rgba(47,123,76,.13); border-radius: 30px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 30px 90px rgba(38,77,47,.16), inset 0 1px rgba(255,255,255,.95);
}
.gate-kazu {
  display: block; width: 94px; height: 94px; margin: -82px auto 18px;
  object-fit: contain; border-radius: 28px;
  box-shadow: 0 16px 35px rgba(42,94,57,.16);
}
.gate-card h2 { font-size: 1.8rem; letter-spacing: -.035em; text-align: center; }
.gate-card .eyebrow, .gate-card .sub { text-align: center; }
.gate-card input {
  min-height: 50px; border-radius: 14px; color: var(--text-primary);
  background: #f3f7f1; border-color: rgba(42,79,53,.15);
}
.gate-card .btn.primary { min-height: 50px; border-radius: 14px; }

/* App-Rahmen */
.app { grid-template-columns: 248px minmax(0, 1fr); gap: 0; }
body.schmal .app { grid-template-columns: 76px minmax(0, 1fr); }
.sb {
  top: 12px; height: calc(100vh - 24px); margin: 12px 0 12px 12px;
  padding: 18px 12px; border: 1px solid rgba(42,79,53,.11);
  border-radius: 28px; background: rgba(255,255,255,.84);
  backdrop-filter: blur(22px) saturate(130%);
  box-shadow: 0 18px 50px rgba(39,70,47,.09);
}
.sb-brand { padding: .25rem .45rem 1.2rem; }
.sb-brand::after { background: linear-gradient(90deg, #68a878, transparent); opacity: .35; }
.sb-avatar {
  width: 42px; height: 42px; padding: 2px; border: 0; border-radius: 14px;
  background: #eaf5e7; box-shadow: 0 9px 22px rgba(47,123,76,.13);
}
.sb-logo b { color: #21462f; }
.sb-brand small, .sb-g, .sb-deck-t { color: #849588; }
.sb-i {
  min-height: 44px; margin: 1px 0; padding: .65rem .7rem;
  color: #5c7061; border-radius: 14px;
}
.sb-i:hover:not(:disabled) { color: #1d4a2d; background: #edf5eb; }
.sb-i[aria-current="true"] {
  color: #245d39; background: linear-gradient(90deg, #dcefd9, #edf7ea);
  box-shadow: none;
}
.sb-i[aria-current="true"]::before {
  left: 2px; top: 25%; bottom: 25%; width: 3px;
  background: #3b8b56; box-shadow: none;
}
.sb-deck {
  border-color: rgba(42,79,53,.1); background: #f4f8f2;
}
.sb-deck-a { color: #315d40; }

.hd {
  top: 12px; margin: 12px 14px 0; padding: 13px 16px;
  border: 1px solid rgba(42,79,53,.1); border-radius: 22px;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(22px) saturate(130%);
  box-shadow: 0 12px 34px rgba(39,70,47,.07);
}
.hd-greet h1 { color: #183021; font-weight: 700; letter-spacing: -.035em; }
.hd-greet .sub, .hd-m, .hd-sys-l, .hd-user span:last-child { color: #7b8f80; }
.hd-date, .hd-sys, .hd-tool, .hd-user {
  border-color: rgba(42,79,53,.11); background: rgba(246,250,244,.9);
  box-shadow: none;
}
.hd-d, .hd-sys-v, .hd-user b { color: #203c29; }
.hd-tool { color: #5d7462; }
.hd-tool:hover { color: #26633d; background: #edf5eb; }
.hd-new {
  color: #fff; border-color: #33764b; background: #367e4f;
  box-shadow: 0 8px 18px rgba(47,123,76,.2);
}
.hd-kazu { background: #eaf5e7; }
.hd-kazu img { object-fit: contain; }
.hd-av { color: #fff; background: linear-gradient(145deg,#4b9562,#2e6e45); }

.wrap { padding-top: 1rem; }
.wrap::before { display: none; }

/* Allgemeine Fachflächen */
.panel, .kpi, .stat, .ents, .schnell, .card, .dec, .klausur, .ha {
  color: var(--text-primary); border-color: rgba(42,79,53,.11);
  background: rgba(255,255,255,.91);
  box-shadow: var(--shadow-panel);
}
.panel::after { background: linear-gradient(90deg, transparent, rgba(47,123,76,.24)); }
table.grid th { color: #6f8374; background: #f1f6ef; }
table.grid td { border-color: rgba(42,79,53,.09); }
table.grid tbody tr:hover { background: #f1f7ef; }
.chip, .opt, .block, .drop, .korb, .vl-i, .lf-i, .stufe {
  color: var(--text-secondary); background: #f3f7f1;
}
.btn {
  min-height: 42px; border-radius: 12px; color: #31543b;
  border-color: rgba(42,79,53,.15); background: #f5f8f3;
}
.btn:hover { color: #1c4a2c; background: #e9f2e6; }
.btn.primary {
  color: #fff; border-color: #2e7045;
  background: linear-gradient(180deg, #448b5b, #2f7047);
  box-shadow: 0 9px 20px rgba(47,112,71,.2);
}
.field input[type="text"], .field input[type="number"], .field input[type="date"],
.field input[type="month"], .field textarea, .field select,
.kazu-field input, .kazu-field textarea, .kazu-field select {
  color: var(--text-primary); background: #f4f8f2; border-color: rgba(42,79,53,.17);
}
input::placeholder, textarea::placeholder { color: #91a095; }

/* Dashboard-Hero */
.kazu-kicker { color: #33784b; font-family: var(--font-ui); font-weight: 750; letter-spacing: .11em; }
.kazu-hero {
  min-height: 380px; padding: clamp(1.5rem, 3.2vw, 3.4rem);
  border: 1px solid rgba(47,123,76,.12); border-radius: 32px;
  background:
    radial-gradient(circle at 82% 28%, rgba(255,255,255,.82), transparent 31%),
    radial-gradient(circle at 93% 86%, rgba(236,195,95,.16), transparent 25%),
    linear-gradient(135deg, #e3f1df 0%, #f6f8e9 58%, #edf5e9 100%);
  box-shadow: 0 26px 70px rgba(39,70,47,.11), inset 0 1px rgba(255,255,255,.9);
}
.kazu-hero::before {
  width: 430px; height: 300px; inset: auto auto -150px -80px;
  background: rgba(107,166,108,.09);
}
.kazu-hero h1 {
  color: #173622; max-width: 600px; font-weight: 760;
  font-size: clamp(2.45rem, 4.25vw, 4.8rem);
}
.kazu-hero-text { color: #526b58; max-width: 570px; }
.kazu-action {
  min-height: 78px; color: #24442f; border-color: rgba(47,123,76,.12);
  background: rgba(255,255,255,.68);
  box-shadow: 0 8px 20px rgba(50,89,58,.055);
}
.kazu-action:hover {
  transform: translateY(-3px); color: #183d27;
  border-color: rgba(47,123,76,.28); background: rgba(255,255,255,.96);
  box-shadow: 0 12px 26px rgba(48,87,56,.09);
}
.kazu-action.primary {
  color: #fff; border-color: #367d4f; background: linear-gradient(145deg,#4b9361,#32764b);
}
.kazu-action.primary svg { color: #fff; }
.kazu-action.primary small { color: rgba(255,255,255,.75); }
.kazu-action svg { color: #347a4c; }
.kazu-action small { color: #738778; }
.kazu-avatar {
  filter: saturate(.98) drop-shadow(0 24px 22px rgba(44,85,52,.17));
}
.kazu-bubble {
  color: #173421; border: 1px solid rgba(47,123,76,.1);
  background: rgba(255,255,255,.94);
  box-shadow: 0 14px 30px rgba(45,81,52,.12);
}
.kazu-bubble span { color: #607365; }

/* Übersicht */
.kazu-briefing { margin: 1.35rem 0; }
.kazu-live {
  color: #2f7747; border-color: rgba(47,123,76,.17); background: #e7f3e5;
}
.kazu-metrics { gap: .85rem; }
.kazu-metric {
  min-height: 112px; padding: 1.05rem 1.15rem;
  border-color: rgba(42,79,53,.1); background: rgba(255,255,255,.9);
  box-shadow: 0 10px 28px rgba(39,70,47,.065);
}
.kazu-metric-label { color: #738678; }
.kazu-metric-value { color: #213f2b; }
.kazu-metric-hint { color: #6e8172; }
.kazu-metric.good { background: linear-gradient(145deg,#fff,#f1f8ef); }
.kazu-metric.attention { background: linear-gradient(145deg,#fff,#fff8e8); }
.kazu-metric.danger { background: linear-gradient(145deg,#fff,#fff0f2); }

.kazu-work-grid { gap: 1.15rem; }
.kazu-card {
  border-color: rgba(42,79,53,.1); background: rgba(255,255,255,.92);
  box-shadow: 0 16px 42px rgba(39,70,47,.075);
}
.kazu-card h2 { color: #203e2a; }
.kazu-side-copy, .kazu-customer, .kazu-proposal p,
.kazu-proposal-foot, .kazu-empty p { color: #718477; }
.kazu-proposal {
  color: #203c29; border-color: rgba(42,79,53,.1); background: #f7faf5;
}
.kazu-proposal:hover {
  border-color: rgba(47,123,76,.28); background: #f0f7ed;
  transform: translateX(3px);
}
.kazu-proposal-foot { border-color: rgba(42,79,53,.09); }
.kazu-source { color: #2f7747; background: #e4f1e1; }
.kazu-source.fumi { color: #aa4f72; background: #fceaf0; }
.kazu-source.sensei { color: #3d6f9b; background: #e7f1fb; }
.kazu-empty {
  border-color: rgba(47,123,76,.17); background: linear-gradient(145deg,#f8fbf7,#eef6ec);
}
.kazu-empty-art { width: 126px; height: 106px; object-fit: contain; margin: -8px 0 3px; }
.kazu-connection { border-color: rgba(42,79,53,.09); }
.kazu-connection b { color: #294933; }
.kazu-connection span:last-child { color: #7a8c7e; }

/* Dialoge */
.kazu-modal-back { background: rgba(31,55,38,.34); backdrop-filter: blur(13px); }
.kazu-modal {
  color: #1d3826; border-color: rgba(47,123,76,.13);
  background: #fff; box-shadow: 0 38px 100px rgba(28,55,36,.24);
}
.kazu-close { color: #617568; background: #f1f6ef; border-color: rgba(42,79,53,.11); }
.kazu-modal-intro, .kazu-field > span, .kazu-origin > span:nth-child(2),
.kazu-success p { color: #65796b; }
.kazu-position, .kazu-origin {
  border-color: rgba(42,79,53,.1); background: #f5f9f3;
}
.kazu-safety { color: #45614d; border-color: rgba(47,123,76,.14); background: #edf6ea; }
.kazu-modal-actions { border-color: rgba(42,79,53,.09); }
.kazu-contact-option, .kazu-part-option {
  color: #24432f; border-color: rgba(42,79,53,.12); background: #f6f9f4;
}

/* PWA-Hinweis */
.pwa-guide { background: rgba(31,55,38,.38); }
.pwa-guide-card {
  color: #1d3826; border-color: rgba(47,123,76,.13);
  background: #fff; box-shadow: 0 28px 90px rgba(28,55,36,.22);
}
.pwa-guide-card li { color: #425c49; background: #f3f7f1; border-color: rgba(42,79,53,.1); }
.pwa-guide-card > img { object-fit: contain; background: #eaf5e7; box-shadow: 0 12px 28px rgba(47,123,76,.13); }

@media (max-width: 900px) {
  .app, body.schmal .app { grid-template-columns: 1fr; }
  .hd {
    top: 8px; margin: 8px 10px 0; border-radius: 19px;
    background: rgba(255,255,255,.88);
  }
  .sb {
    position: fixed; z-index: 80; top: auto; left: 10px; right: 10px;
    bottom: calc(8px + env(safe-area-inset-bottom)); width: auto;
    height: 70px; margin: 0; padding: 6px;
    border: 1px solid rgba(42,79,53,.13); border-radius: 23px;
    background: rgba(255,255,255,.9);
    box-shadow: 0 18px 48px rgba(30,63,39,.17);
  }
  .sb-i[data-route="heute"], .sb-i[data-route="entwuerfe"],
  .sb-i[data-route="chat"], .sb-i[data-route="belegkorb"],
  .sb-i[data-route="erweitert"] {
    color: #718376; border-radius: 17px;
  }
  .sb-i[aria-current="true"] { color: #28643f; background: #e2f0df; }
  .wrap { padding-bottom: calc(94px + env(safe-area-inset-bottom)); }
  .kazu-hero { grid-template-columns: 1fr; }
  .kazu-visual { order: -1; }
}
@media (max-width: 620px) {
  .wrap { padding-inline: 10px; }
  .hd { padding: .55rem .65rem; }
  .kazu-hero {
    padding: 1rem; border-radius: 26px;
    background: linear-gradient(145deg,#e0f0dc,#f8f7e9);
  }
  .kazu-visual { min-height: 172px; justify-items: start; }
  .kazu-avatar { width: min(53vw, 202px); }
  .kazu-bubble { max-width: 172px; right: 0; }
  .kazu-hero h1 { font-size: clamp(2.15rem, 11vw, 2.8rem); line-height: .96; }
  .kazu-actions { gap: .55rem; }
  .kazu-action { min-height: 72px; border-radius: 17px; }
  .kazu-metrics { gap: .55rem; }
  .kazu-metric { min-height: 100px; border-radius: 19px; }
  .kazu-card { border-radius: 22px; }
  .kazu-modal-actions { background: #fff; }
}