:root {

  /* Hypertegrity Farben */
  --hyper-black: #1e293b;
  --hyper-white: #ffffff;
  --hyper-dark: #0d2342;
  --hyper-dark-light: #8895a5;
  --hyper-green: #85bc2e;
  --hyper-gray-light: #e3e3e3;
  --hyper-cyan: #4ed2e0;
  --hyper-darkblue: #002f58;
  --hyper-green2: #769e34;
  --hyper-green3: #beda8c;
  --hyper-green4: #e8f2d7;
  
  /* Allgemein */
  --color-text-primary: #1e293b;
  --border-radius: 24px;
  --font-family: 'Inter', sans-serif;/*'Segoe UI', Arial, sans-serif;*/

  /* Panel */
  --bg-panel: #f9fafb;
  --color-panel: #1e293b;
  --color-panel-border: #F3F4F6;

  /* Widget */
  --bg-widget: #f3f4f6;

  /* Chart General */
  --chart-bg: var(--hyper-dark);
  --chart-text: var(--color-text-primary);
  --chart-title: var(--color-text-primary);

  /* Chart Verbrauch */
  --color-bio: #65892B;
  --color-pv: #EAB308;
  --color-wind: #38BDF8;
  --color-verbrauch: #B91C1C;
  --color-verbrauch-bg: rgba(231,76,60,0.2);
  --color-verbrauch-fc: #FFB8B8;     
  --color-verbrauch-fc-bg: rgba(231,76,60,0.08);
  --color-bio-fc: #D4E9B1;           
  --color-pv-fc: #FFF6D1;             
  --color-wind-fc: #D3F1FD; 

  /* Chart - Strom */
  --dynamic-tariff: #E11D48;
  --smart_tariff: #2563EB;
  --dynamic-tariff-forecast: #fdb0c7;
  --smart-tariff-forecast: #b5d3fb;
  --chart-accent: var(--hyper-green);
  
  /* Sankey */
  --sankey-flow-color: var(--hyper-green);
  --sankey-flow-inner: var(--hyper-green3);
  --sankey-flow-outer: var(--hyper-green4);
  --sankey-text-color: var(--color-text-primary);
  --sankey-highlight-label: var(--hyper-green);
  --sankey-accent: var(--hyper-green);
  --sankey-info-color: var(--hyper-dark-light);
  --sankey-inner-circle-text: var(--color-text-primary);
  --icon-color: var(--hyper-green);
  --icon-size: 2.3rem;

  /* Info Box */
  --infobox-text-color-desc : var(--color-text-primary);
  --infobox-bg : var(--bg-widget);

  /* Jahresverlauf */
  --year-color-generation: #22C55E;
  --year-color-consumption: #1E3A8A;

  /* Sonstige */
  --brand: var(--hyper-green);
  --brand-light: var(--hyper-green2);
  --accent: var(--hyper-white);
  --card-shadow: 0 2px 24px var(--color-panel-border);
  --button-bg: var(--hyper-green3);
  
}

body {
  background: var(--bg-main);
  color: var(--color-text-primary);
  font-family: var(--font-family);
  letter-spacing: -0.01em;
  font-feature-settings: "tabular-nums";
}

.card, .sankey-card, .chart-card {
  border-radius: var(--border-radius);
  box-shadow: var(--card-shadow);
}

.header, .navbar, header {
  background: var(--hyper-dark) !important;
  color: var(--color-text-primary);
  /*border-radius: 0 0 var(--border-radius) var(--border-radius);*/
  box-shadow: var(--card-shadow);
}

h1, h2, .chart-title, .sankey-side-title {
  color: var(--color-text-primary);
  font-family: var(--font-family);
  font-weight: 600;
  letter-spacing: -0.015em;
}

/*a, .link-light {
  color: var(--accent);
  text-decoration: underline;
}*/

.dashboard-section {
    width: 100vw;
    max-width: 1920px;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}

.energy-icon {
    font-size: 1.8rem; 
    vertical-align: middle; 
    color: var(--hyper-green); 
    margin-right: 0.5em;
}

.energy-title{
    font-weight: bold; 
    color: var(--hyper-green); 
}

.energy-desc{
    font-size: 1.1rem; 
}


.strom-box{
    font-size:1.4rem; 
    font-weight:600;
}


#main-content {
  padding-top: 0px !important;
}

.widget{
  background: var(--bg-widget);
}

.card-body{
  color: var(--color-text-primary);
}

.dynamic-tariff { color: var(--dynamic-tariff); font-weight: 600; }
.smart-tariff { color: var(--smart_tariff); font-weight: 600; }
.tariff-time { display: block; font-size: 1rem; color: #aaa; }

.tariff-label,
#smart-wert-avg {
  display: inline !important;
}

.tariff-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px 0 rgba(100,120,120,.10);
  font-size: 1.6rem;
  margin-right: 6px;
}

.widget-title {
  font-size: 1.23rem;
  font-weight: 600;
  min-height: 2.8rem;
  display: flex;
  align-items: center;
  justify-content: center; 
  text-align: center;
  margin-bottom: 0px !important;
}

#stunden-unterdeckung{
  font-size: 2.2rem;
}