:root {
  

  --app-vh: 100vh;
  --app-svh: 100vh;
  --app-dvh: 100vh;
  --app-min-h: var(--app-vh);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  
  --v4-espresso:       #18110D;   
  --v4-waldgruen:      #173328;   
  --v4-parchment:      #F4EFE5;   
  --v4-ivory:          #FFFDF8;   
  --v4-kupfer:         #C98545;   
  --v4-messing:        #CBA35A;   
  --v4-alarmrot:       #A83D35;   

  
  --v4-bg-main:        #F4EFE5;   
  --v4-bg-sidebar:     #18110D;   
  --v4-bg-topbar:      #241810;   
  --v4-bg-card:        #FFFDF8;   
  --v4-bg-dark-card:   #18110D;   
  --v4-bg-subtle:      rgba(201,133,69,0.10);  
  --v4-bg-row-hover:    #FDFAF6;                 
  --v4-parchment-90:    rgba(244,239,229,0.90);  

  
  --v4-border:         #D6C9B0;
  --v4-border-dark:    rgba(255,255,255,0.08);
  --v4-row-divider:    #EDE6DA;

  
  --v4-text-primary:   #18110D;   
  --v4-text-secondary: #5C4A38;   
  --v4-text-light:     #F4EFE5;   
  --v4-text-muted:     #8C7B6A;
  --v4-text-dim:       rgba(244,239,229,0.40);
  --v4-text-very-dim:  rgba(244,239,229,0.28);

  
  --v4-accent:         #C98545;   
  --v4-accent-bg:      rgba(201,133,69,0.10);
  --v4-accent-bg-med:  rgba(201,133,69,0.18);
  --v4-accent-bg-soft:  rgba(201,133,69,0.12);   
  --v4-accent-bg-strong:rgba(201,133,69,0.28);   
  --v4-accent-border:   rgba(201,133,69,0.52);   
  --v4-on-accent:       #FFFDF8;                 

  
  --v4-success:        #5CB87A;   
  --v4-success-bg:     #EAF3DE;
  --v4-success-text:   #204D10;   
  --v4-warning:        #C98545;   
  --v4-warning-bg:     #F5E9D6;
  --v4-warning-text:   #7A4E18;
  --v4-danger:         #A83D35;   /* = --v4-alarmrot  NUR echte Alarme!     */
  --v4-danger-bg:      #F5E5E4;
  --v4-danger-text:    #A83D35;
  --v4-danger-dark:    #7E2C26;   
  --v4-ok:             #6BBF87;   
  --v4-warn:           #D97B5A;   
  --v4-danger-border:  color-mix(in srgb, var(--v4-danger) 30%, transparent);
  --v4-success-border: color-mix(in srgb, var(--v4-success) 30%, transparent);
  --v4-warning-border: color-mix(in srgb, var(--v4-warning) 30%, transparent);

  
  --v4-chart-weight:   #C98545;   
  --v4-chart-food:     #5C9BD4;
  --v4-chart-food-bg:  rgba(92,155,212,0.18);
  --v4-chart-food-fill:rgba(92,155,212,0.55);
  --v4-chart-food-bord:rgba(92,155,212,0.85);
  --v4-zone-target:    #5CB87A;   
  --v4-zone-alarm:     #A83D35;   
  --v4-zone-target-bg: rgba(92,184,122,0.09);
  --v4-zone-alarm-bg:  rgba(168,61,53,0.06);
  --v4-zone-target-lbl:rgba(32,77,16,0.65);
  --v4-zone-alarm-lbl: rgba(168,61,53,0.65);

  
  --v4-radius-shell:   14px;
  --v4-radius-card:    10px;
  --v4-radius-card-sm: 9px;
  --v4-radius-widget:  9px;
  --v4-radius-btn:     7px;
  --v4-radius-input:   7px;
  --v4-radius-badge:   5px;

  
  --v4-font-display:   'Playfair Display', Georgia, serif;
  --v4-font-body:      'DM Sans', system-ui, -apple-system, sans-serif;

  
  --v4-fs-app-title:   17px;
  --v4-fs-page-title:  16px;
  --v4-fs-kpi:         25px;
  --v4-fs-value:       22px;
  --v4-fs-value-sm:    17px;
  --v4-fs-body:        14px;   
  --v4-fs-sub:         12px;   
  --v4-fs-sub-sm:      11px;   
  --v4-fs-badge:       11px;   
  --v4-fs-label:       11px;   
  --v4-fs-label-sm:    10px;   

  
  --fs-display: 25px;  
  --fs-value:   22px;  
  --fs-h2:      17px;  
  --fs-h1:      16px;  
  --fs-body:    14px;  
  --fs-caption: 12px;  
  --fs-label:   11px;  
  --fs-micro:   10px;  
  --fs-small:   13px;  
  --fs-body-lg: 15px;  

  
  --v4-nav-hover-bg:    rgba(255,255,255,0.03);  
  --v4-text-light-muted:rgba(244,239,229,0.80);  
  --v4-overlay-dim:     rgba(0,0,0,0.05);        
  --v4-shadow-hover-kupfer: 0 8px 22px rgba(201,133,69,0.36), 0 2px 4px rgba(0,0,0,0.22);
  --v4-shadow-card-hover:   0 10px 26px rgba(0,0,0,0.10);
  --v4-shadow-tab-active:   0 4px 14px rgba(201,133,69,0.22);
  --v4-shadow-tab-hover:    0 4px 14px rgba(201,133,69,0.30);

  
  --v4-glass-card:    rgba(18,17,15,0.92);    
  --v4-glass-fill:    rgba(255,255,255,0.03); 
  --v4-glass-edge:    rgba(255,255,255,0.07); 
  --v4-glass-divider: rgba(255,255,255,0.06); 

  
  --v4-t-fast:         0.15s ease;
  --v4-t-smooth:       0.22s ease;
}

@supports (height: 100svh) {
  :root {
    --app-svh: 100svh;
    --app-vh: 100svh;
    --app-min-h: 100svh;
  }
}

@supports (height: 100dvh) {
  :root {
    --app-dvh: 100dvh;
    --app-vh: 100dvh;
    --app-min-h: 100dvh;
  }
}


:root {
  --copper:#C98545; --copper-deep:#A8632A; --copper-bright:#D89A57;
  

  --r-card:16px; --r-doc:5px; --r-ctrl:11px; --r-btn:7px; --r-input:7px; --r-badge:5px; --r-pill:999px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --touch-min: 44px;   
  
  --blur-sm:saturate(115%) blur(10px);
  --blur:saturate(135%) blur(20px);
  --blur-lg:saturate(145%) blur(28px);
  --ease:cubic-bezier(.22,.61,.36,1);
  --font-display:'Fraunces',Georgia,serif;   
  --font-body:'DM Sans',system-ui,sans-serif;
}


:root,
[data-theme="light"] {
  

  color-scheme: light;
  --photo-veil:linear-gradient(180deg,rgba(244,239,229,.60) 0%,rgba(244,239,229,.48) 42%,rgba(244,239,229,.66) 100%);
  --vignette:radial-gradient(120% 90% at 50% 30%,transparent 55%,rgba(60,40,20,.16) 100%);
  --bg:#F4EFE5;
  --surface:rgba(255,253,248,.58); --surface-2:rgba(255,253,248,.44); --surface-3:rgba(244,238,226,.62); 
  --border:rgba(255,255,255,.60); --border-strong:rgba(170,150,120,.55); --edge:rgba(255,255,255,.55);
  --text:#1A1410; --text-muted:#5E5346; --text-dim:#857868;
  --accent:#A8632A; --accent-fill:#A8632A; --on-accent:#FFFDF8;
  --danger:#B0322A; --danger-bg:rgba(176,50,42,.14);
  --warning:#8A5E00; --warning-bg:rgba(224,160,0,.18);
  --success:#3B6D2E; --success-bg:rgba(63,122,46,.16);
  --info:#3E7CB1; --info-bg:rgba(62,124,177,.14);   
  --shadow:0 1px 2px rgba(26,20,16,.10),0 18px 40px -22px rgba(26,20,16,.45);
  --ring:rgba(168,99,42,.45);
}


[data-theme="dark"] {
  
  color-scheme: dark;
  --photo-veil:linear-gradient(180deg,rgba(12,14,17,.52) 0%,rgba(12,14,17,.40) 40%,rgba(12,14,17,.68) 100%);
  --vignette:radial-gradient(120% 90% at 50% 26%,transparent 52%,rgba(0,0,0,.40) 100%);
  --bg:#14110D;
  --surface:rgba(22,25,29,.52); --surface-2:rgba(27,30,35,.46); --surface-3:rgba(32,35,40,.62); 
  --border:rgba(255,255,255,.12); --border-strong:rgba(255,255,255,.20); --edge:rgba(255,255,255,.12);
  --text:#F2EADC; --text-muted:#C3B7A4; --text-dim:#9A8E7C;
  --accent:#D89A57; --accent-fill:#C98545; --on-accent:#14110D;
  --danger:#F0837A; --danger-bg:rgba(240,131,122,.18);
  --warning:#EFC366; --warning-bg:rgba(239,195,102,.16);
  --success:#86CE80; --success-bg:rgba(134,206,128,.16);
  --info:#5C9BD4; --info-bg:rgba(92,155,212,.18);   
  --shadow:0 1px 2px rgba(0,0,0,.5),0 18px 44px -20px rgba(0,0,0,.8);
  --ring:rgba(216,154,87,.55);

  
  --v4-bg-main:#14110D;
  --v4-bg-card:#1F1A14;            
  --v4-bg-dark-card:#0F0C09;
  --v4-bg-topbar:#1C1813;
  --v4-bg-subtle:rgba(216,154,87,0.12);
  --v4-border:rgba(255,255,255,0.14);
  --v4-border-dark:rgba(255,255,255,0.10);
  --v4-row-divider:rgba(255,255,255,0.10);
  --v4-text-primary:#F2EADC;
  --v4-text-secondary:#C3B7A4;
  --v4-text-muted:#9A8E7C;
  --v4-text-light:#F2EADC;
  --v4-accent:#D89A57;
  --v4-accent-bg:rgba(216,154,87,0.12);
  --v4-accent-bg-med:rgba(216,154,87,0.20);
  --v4-kupfer:#D89A57;
  --v4-messing:#D8B57A;
  --v4-success:#86CE80; --v4-success-text:#86CE80; --v4-success-bg:rgba(134,206,128,0.16);
  --v4-warning:#EFC366; --v4-warning-text:#EFC366; --v4-warning-bg:rgba(239,195,102,0.16);
  --v4-danger:#F0837A; --v4-danger-text:#F0837A; --v4-danger-bg:rgba(240,131,122,0.18); --v4-danger-dark:#C25A52;
  --v4-bg-row-hover:    rgba(255,255,255,0.07);
  --v4-overlay-dim:     rgba(255,255,255,0.06);
  --v4-parchment-90:    rgba(255,255,255,0.12);
  --v4-accent-bg-soft:  rgba(216,154,87,0.14);
  --v4-accent-bg-strong:rgba(216,154,87,0.32);
  --v4-accent-border:   rgba(216,154,87,0.55);
  

  --v4-on-accent:       #14110D;
}


.glass {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-card);
  box-shadow:var(--shadow),inset 0 1px 0 var(--edge);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
}
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:6px; }
@media (prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important} }


@media (pointer: coarse) {
  button,
  select,
  [role="button"],
  [role="tab"],
  [role="switch"],
  [class*="btn"],
  [class*="button"],
  [class*="submit"],
  [class*="action"],
  [class*="cta"],
  [class*="toggle"],
  [class*="close"],
  [class*="switch"],
  [class*="nav-link"],
  [class*="nav-item"],
  [class*="cockpit-link"],
  .hb-aufg-tab,
  .header-auth-tab,
  .v4-chart-tab,
  .v4-enzy-tab,
  .v4-tab {
    min-height: var(--touch-min);
    min-width: var(--touch-min);
  }
}