/* ==========================================================================
   Design Tokens · GridFlex Website
   Automatisch erzeugt aus src/_data/farben.js. Nicht von Hand bearbeiten.

   Zwei Faelle derselben Rollen:
     :root                       dunkel, die Startfassung
     [data-modus="hell"]         hell, beige statt weiss
     .auf-hell / .auf-dunkel     Inseln, die unabhaengig vom Modus gelten

   Alle Bausteine und alle Effekte kennen nur Rollen, nie feste Werte.
   ========================================================================== */

:root, [data-modus="dunkel"] {
  --primary: #63B184;
  --primary-dark: #235A3E;
  --primary-light: #97D3B0;
  --primary-tint: #23282A;
  --secondary: #9BA3A4;
  --accent: #C9855A;
  --accent-light: #E3AC82;
  --bg: #191B1C;
  --bg-alt: #151718;
  --surface: #202324;
  --surface-elevated: #272A2B;
  --inverse: #0F1011;
  --text: #ECEDEA;
  --text-2: #A8ACA9;
  --text-inverse: #ECEDEA;
  --border: #343839;
  --muted: #7A7E7C;
  --success: #63B184;
  --verlauf: linear-gradient(180deg, #191B1C 0%, #23282A 100%);
  --lg-sym: #D08F65;
  --lg-grid: #D08F65;
  --lg-flex: #8CC1A6;
  --lg-sub: #A7C4B4;
  --lg-punkt: #7FB99C;
  --fx-nacht: 1;
  color-scheme: dark;
}

[data-modus="hell"] {
  --primary: #1E513C;
  --primary-dark: #143A2A;
  --primary-light: #6C9C83;
  --primary-tint: #E4EAE3;
  --secondary: #2C3431;
  --accent: #A8633A;
  --accent-light: #C98B5C;
  --bg: #F2EEE4;
  --bg-alt: #EAE5D8;
  --surface: #F8F5EE;
  --surface-elevated: #FFFCF6;
  --inverse: #182220;
  --text: #1A211D;
  --text-2: #59635C;
  --text-inverse: #F2EEE4;
  --border: #D9D2C2;
  --muted: #8B8577;
  --success: #2E7D4F;
  --verlauf: linear-gradient(180deg, #F2EEE4 0%, #E4EAE3 100%);
  --lg-sym: #A8633A;
  --lg-grid: #A8633A;
  --lg-flex: #1E513C;
  --lg-sub: #1E513C;
  --lg-punkt: #1E513C;
  --fx-nacht: 0;
  color-scheme: light;
}

/* Inseln: ein heller Block im dunklen Modus und umgekehrt */
.auf-hell {
  --primary: #1E513C;
  --primary-dark: #143A2A;
  --primary-light: #6C9C83;
  --primary-tint: #E4EAE3;
  --secondary: #2C3431;
  --accent: #A8633A;
  --accent-light: #C98B5C;
  --bg: #F2EEE4;
  --bg-alt: #EAE5D8;
  --surface: #F8F5EE;
  --surface-elevated: #FFFCF6;
  --inverse: #182220;
  --text: #1A211D;
  --text-2: #59635C;
  --text-inverse: #F2EEE4;
  --border: #D9D2C2;
  --muted: #8B8577;
  --success: #2E7D4F;
  --lg-sym: #A8633A;
  --lg-grid: #A8633A;
  --lg-flex: #1E513C;
  --lg-sub: #1E513C;
  --lg-punkt: #1E513C;
  --fx-nacht: 0;
}
.auf-dunkel {
  --primary: #63B184;
  --primary-dark: #235A3E;
  --primary-light: #97D3B0;
  --primary-tint: #23282A;
  --secondary: #9BA3A4;
  --accent: #C9855A;
  --accent-light: #E3AC82;
  --bg: #191B1C;
  --bg-alt: #151718;
  --surface: #202324;
  --surface-elevated: #272A2B;
  --inverse: #0F1011;
  --text: #ECEDEA;
  --text-2: #A8ACA9;
  --text-inverse: #ECEDEA;
  --border: #343839;
  --muted: #7A7E7C;
  --success: #63B184;
  --lg-sym: #D08F65;
  --lg-grid: #D08F65;
  --lg-flex: #8CC1A6;
  --lg-sub: #A7C4B4;
  --lg-punkt: #7FB99C;
  --fx-nacht: 1;
}

/* ==========================================================================
   Fassung 07 · Entwurf "GFG Energy"

   Dieselben Rollen, andere Marke. Steht bewusst am Ende des Blattes und
   haengt an zwei Attributen ([data-fassung][data-modus]), damit es die
   Grundfassungen nicht anfasst: V1 bis V6 bleiben unveraendert.
   ========================================================================== */
[data-fassung="7"][data-modus="dunkel"],
[data-fassung="8"][data-modus="dunkel"],
[data-fassung="9"][data-modus="dunkel"],
[data-fassung="10"][data-modus="dunkel"],
[data-fassung="11"][data-modus="dunkel"],
[data-fassung="12"][data-modus="dunkel"] {
  --primary: #39A9DC;
  --primary-dark: #1E6E94;
  --primary-light: #7CC9EC;
  --primary-tint: #1E2228;
  --secondary: #9AA0A8;
  --accent: #6FC3EA;
  --accent-light: #9BD8F5;
  --bg: #18191D;
  --bg-alt: #141519;
  --surface: #1F2126;
  --surface-elevated: #262930;
  --inverse: #0E0F12;
  --text: #ECEDF0;
  --text-2: #A6A9B0;
  --text-inverse: #ECEDF0;
  --border: #33363D;
  --muted: #797C84;
  --success: #4FB183;
  --verlauf: linear-gradient(180deg, #18191D 0%, #1E2228 100%);
  --lg-marke: #ECEDF0;
  --lg-akzent: #4FB6E6;
  --fx-nacht: 1;
  color-scheme: dark;
}

[data-fassung="7"][data-modus="hell"],
[data-fassung="8"][data-modus="hell"],
[data-fassung="9"][data-modus="hell"],
[data-fassung="10"][data-modus="hell"],
[data-fassung="11"][data-modus="hell"],
[data-fassung="12"][data-modus="hell"] {
  --primary: #15719A;
  --primary-dark: #0E5273;
  --primary-light: #6BB8D8;
  --primary-tint: #E3EDF2;
  --secondary: #2A3036;
  --accent: #106C92;
  --accent-light: #39A9DC;
  --bg: #EFEEEC;
  --bg-alt: #E7E5E2;
  --surface: #F6F5F3;
  --surface-elevated: #FFFFFF;
  --inverse: #19171C;
  --text: #19171C;
  --text-2: #56545C;
  --text-inverse: #EFEEEC;
  --border: #D8D6D2;
  --muted: #8A888F;
  --success: #1F7A4F;
  --verlauf: linear-gradient(180deg, #EFEEEC 0%, #E3EDF2 100%);
  --lg-marke: #19171C;
  --lg-akzent: #39A9DC;
  --fx-nacht: 0;
  color-scheme: light;
}

/* Inseln innerhalb der Fassung 07 */
[data-fassung="7"] .auf-hell,
[data-fassung="8"] .auf-hell,
[data-fassung="9"] .auf-hell,
[data-fassung="10"] .auf-hell,
[data-fassung="11"] .auf-hell,
[data-fassung="12"] .auf-hell {
  --primary: #15719A;
  --primary-dark: #0E5273;
  --primary-light: #6BB8D8;
  --primary-tint: #E3EDF2;
  --secondary: #2A3036;
  --accent: #106C92;
  --accent-light: #39A9DC;
  --bg: #EFEEEC;
  --bg-alt: #E7E5E2;
  --surface: #F6F5F3;
  --surface-elevated: #FFFFFF;
  --inverse: #19171C;
  --text: #19171C;
  --text-2: #56545C;
  --text-inverse: #EFEEEC;
  --border: #D8D6D2;
  --muted: #8A888F;
  --success: #1F7A4F;
  --lg-marke: #19171C;
  --lg-akzent: #39A9DC;
  --fx-nacht: 0;
}
[data-fassung="7"] .auf-dunkel,
[data-fassung="8"] .auf-dunkel,
[data-fassung="9"] .auf-dunkel,
[data-fassung="10"] .auf-dunkel,
[data-fassung="11"] .auf-dunkel,
[data-fassung="12"] .auf-dunkel {
  --primary: #39A9DC;
  --primary-dark: #1E6E94;
  --primary-light: #7CC9EC;
  --primary-tint: #1E2228;
  --secondary: #9AA0A8;
  --accent: #6FC3EA;
  --accent-light: #9BD8F5;
  --bg: #18191D;
  --bg-alt: #141519;
  --surface: #1F2126;
  --surface-elevated: #262930;
  --inverse: #0E0F12;
  --text: #ECEDF0;
  --text-2: #A6A9B0;
  --text-inverse: #ECEDF0;
  --border: #33363D;
  --muted: #797C84;
  --success: #4FB183;
  --lg-marke: #ECEDF0;
  --lg-akzent: #4FB6E6;
  --fx-nacht: 1;
}

/* ==========================================================================
   Fassungen 08 und 09 · helle Ansicht in Beige

   Steht nach dem Block oben und ueberschreibt ihn fuer genau zwei Fassungen.
   07 behaelt die kuehle helle Ansicht, 01 bis 06 bleiben ohnehin unberuehrt.
   Die dunkle Ansicht ist hier nicht aufgefuehrt und aendert sich nicht.
   ========================================================================== */
[data-fassung="8"][data-modus="hell"],
[data-fassung="9"][data-modus="hell"],
[data-fassung="10"][data-modus="hell"],
[data-fassung="11"][data-modus="hell"],
[data-fassung="12"][data-modus="hell"] {
  --primary: #15719A;
  --primary-dark: #0E5273;
  --primary-light: #6BB8D8;
  --primary-tint: #E4EAEA;
  --secondary: #2A302F;
  --accent: #106C92;
  --accent-light: #39A9DC;
  --bg: #F1ECE2;
  --bg-alt: #E8E1D3;
  --surface: #F7F3EB;
  --surface-elevated: #FCFAF4;
  --inverse: #1B1915;
  --text: #1B1915;
  --text-2: #585348;
  --text-inverse: #F7F3EB;
  --border: #D6CDBB;
  --muted: #8C8575;
  --success: #1F7A4F;
  --verlauf: linear-gradient(180deg, #F1ECE2 0%, #E8E1D3 100%);
  --lg-marke: #19171C;
  --lg-akzent: #39A9DC;
  --fx-nacht: 0;
  color-scheme: light;
}

/* Helle Insel im dunklen Modus: ebenfalls warm, damit beide Ansichten
   dieselbe helle Reihe benutzen */
[data-fassung="8"] .auf-hell,
[data-fassung="9"] .auf-hell,
[data-fassung="10"] .auf-hell,
[data-fassung="11"] .auf-hell,
[data-fassung="12"] .auf-hell {
  --primary: #15719A;
  --primary-dark: #0E5273;
  --primary-light: #6BB8D8;
  --primary-tint: #E4EAEA;
  --secondary: #2A302F;
  --accent: #106C92;
  --accent-light: #39A9DC;
  --bg: #F1ECE2;
  --bg-alt: #E8E1D3;
  --surface: #F7F3EB;
  --surface-elevated: #FCFAF4;
  --inverse: #1B1915;
  --text: #1B1915;
  --text-2: #585348;
  --text-inverse: #F7F3EB;
  --border: #D6CDBB;
  --muted: #8C8575;
  --success: #1F7A4F;
  --lg-marke: #19171C;
  --lg-akzent: #39A9DC;
  --fx-nacht: 0;
}