/* edvweber Design-System v0.5.0 (2026-09-10) – tokens.css + components.css. Quelle: Vorgang edvweber-0085, tokens\design-tokens.json. */
/* edvweber Design-System – Tokens v0.5.0, Stand 2026-09-10
   GENERIERT aus design-tokens.json (Build-DesignTokens.ps1) – nicht von Hand ändern. */

:root {
  /* Palette (Rohwerte – in Komponenten die semantischen --edv-* Rollen verwenden) */
  --edv-violett-50: #F3EFF6;
  --edv-violett-100: #E6DFEC;
  --edv-violett-300: #B59EC7;
  --edv-violett-500: #805B9E;
  --edv-violett-700: #60477D;
  --edv-violett-900: #382D4D;
  --edv-blau-50: #EFF3F6;
  --edv-blau-100: #DFE5EC;
  --edv-blau-300: #9EB3C7;
  --edv-blau-500: #5B7C9E;
  --edv-blau-700: #47627D;
  --edv-blau-900: #2D3D4D;
  --edv-gruen-50: #EFF6F1;
  --edv-gruen-100: #DFECE3;
  --edv-gruen-300: #9EC7AC;
  --edv-gruen-500: #5B9E71;
  --edv-gruen-700: #477D59;
  --edv-gruen-900: #2D4D38;
  --edv-gelb-50: #F6F5EF;
  --edv-gelb-100: #ECEADF;
  --edv-gelb-300: #C7C09E;
  --edv-gelb-500: #9E935B;
  --edv-gelb-700: #7D7447;
  --edv-gelb-900: #4D482D;
  --edv-amber-50: #F6F3EF;
  --edv-amber-100: #ECE6DF;
  --edv-amber-300: #C7B69E;
  --edv-amber-500: #9E825B;
  --edv-amber-700: #7D6647;
  --edv-amber-900: #4D4033;
  --edv-orange-50: #F6F1EF;
  --edv-orange-100: #ECE3DF;
  --edv-orange-300: #C7AC9E;
  --edv-orange-500: #9E715B;
  --edv-orange-700: #7D5947;
  --edv-orange-900: #4D382D;
  --edv-rot-50: #F6EFEF;
  --edv-rot-100: #ECDFDF;
  --edv-rot-300: #C79E9E;
  --edv-rot-500: #9E5B5B;
  --edv-rot-700: #7D4747;
  --edv-rot-900: #4D2D2D;
  --edv-signal-gruen-100: #DEF7E6;
  --edv-signal-gruen-300: #7BE09D;
  --edv-signal-gruen-500: #29AE55;
  --edv-signal-gruen-900: #19572E;
  --edv-signal-gelb-100: #F7F2DE;
  --edv-signal-gelb-300: #E7CA55;
  --edv-signal-gelb-500: #AE8809;
  --edv-signal-gelb-900: #574B19;
  --edv-signal-rot-100: #F7DEDE;
  --edv-signal-rot-300: #E07B7B;
  --edv-signal-rot-500: #AE2929;
  --edv-signal-rot-900: #571919;
  --edv-neutral-weiss: #FFFFFF;
  --edv-neutral-seite: #F7F6F9;
  --edv-neutral-kopf: #E8E6EC;
  --edv-neutral-balken: #E4E2E9;
  --edv-neutral-rahmen: #D6D3DC;
  --edv-neutral-rahmen-leise: #EAE9EE;
  --edv-neutral-text-leise: #78738A;
  --edv-neutral-text: #302C38;
  --edv-neutral-dunkel: #2C2839;
  --edv-neutral-nacht: #1E1A29;

  /* Schrift */
  --edv-font-text: "Segoe UI", -apple-system, BlinkMacSystemFont, "SF Pro Text", Roboto, "Helvetica Neue", Arial, sans-serif;
  --edv-font-leicht: "Segoe UI Light", "Segoe UI", -apple-system, BlinkMacSystemFont, "SF Pro Display", Roboto, "Helvetica Neue", Arial, sans-serif;
  --edv-font-mono: Consolas, "Cascadia Code", Menlo, "SF Mono", "Courier New", monospace;
  --edv-weight-leicht: 300;
  --edv-weight-normal: 400;
  --edv-weight-halbfett: 600;
  --edv-weight-fett: 700;
  --edv-size-fussnote: 0.75rem;
  --edv-line-fussnote: 1.4;
  --edv-size-klein: 0.875rem;
  --edv-line-klein: 1.5;
  --edv-size-text: 1rem;
  --edv-line-text: 1.6;
  --edv-size-gross: 1.125rem;
  --edv-line-gross: 1.5;
  --edv-size-h4: 1.125rem;
  --edv-line-h4: 1.35;
  --edv-size-h3: 1.25rem;
  --edv-line-h3: 1.3;
  --edv-size-h2: 1.5rem;
  --edv-line-h2: 1.25;
  --edv-size-h1: 2rem;
  --edv-line-h1: 1.2;
  --edv-size-display: 2.75rem;
  --edv-line-display: 1.1;
  --edv-size-claim: 1.75rem;
  --edv-line-claim: 1.2;
  --edv-tracking-claim: 0.08em;

  /* Abstände (4-px-Raster) */
  --edv-space-1: 4px;
  --edv-space-2: 8px;
  --edv-space-3: 12px;
  --edv-space-4: 16px;
  --edv-space-5: 24px;
  --edv-space-6: 32px;
  --edv-space-7: 48px;
  --edv-space-8: 64px;

  /* Radien, Rahmen, Schatten */
  --edv-radius-klein: 3px;
  --edv-radius-karte: 4px;
  --edv-radius-gross: 5px;
  --edv-radius-kreis: 9999px;
  --edv-border: 1px;
  --edv-haarlinie: 1px;
  --edv-akzentstreifen: 4px;
  --edv-shadow-karte: 0 1px 2px rgb(40 30 60 / 0.05), 0 2px 5px rgb(40 30 60 / 0.05), 0 5px 10px rgb(40 30 60 / 0.045);
  --edv-shadow-schwebend: 0 2px 4px rgb(40 30 60 / 0.06), 0 6px 14px rgb(40 30 60 / 0.08), 0 12px 28px rgb(40 30 60 / 0.07);
  --edv-fokus-breite: 2px;

  /* Motiv Datenfluss (Leitmotiv „Element“) – Standardwerte, je Element per Custom Property übersteuerbar */
  --edv-fluss-groesse: 5px;
  --edv-fluss-radius: 0px;
  --edv-fluss-dichte: 2.5;
  --edv-fluss-amplitude: 12px;
  --edv-fluss-periode: 2.1s;
  --edv-fluss-tempo-min: 30px;
  --edv-fluss-tempo-max: 210px;
  --edv-fluss-alpha-min: 0.25;
  --edv-fluss-alpha-max: 1;
  --edv-fluss-puls: 1.25s;
  --edv-fluss-richtung: rechts;
  --edv-fluss-zeichen: quadrat;
  --edv-fluss-farbe: var(--edv-motiv-zeichen);
  --edv-raster-teilung: 20px;
  --edv-raster-deckung: 0.05;
  --edv-raster-kreuz: 3px;
  --edv-raster-punkt: 3px;
  --edv-raster-kreuz-faktor: 1.25;
  --edv-fluss-hinter-farbe: #805B9E;
  --edv-fluss-hinter-alpha-min: 0.1;
  --edv-fluss-hinter-alpha-max: 0.5;
  --edv-fluss-hinter-tempo-min: 22px;
  --edv-fluss-hinter-tempo-max: 150px;
  --edv-fluss-hinter-periode: 2.5s;
  --edv-textzone-deckung: 0.85;
  --edv-textzone-kern: 30%;
  --edv-textzone-mitte-x: 28%;
  --edv-textzone-innen-rechts: 64px;
  --edv-netz-dichte: 0.6;
  --edv-netz-nachbarn: 2;
  --edv-netz-reichweite: 220;
  --edv-netz-radius: 110;
  --edv-netz-kraft: 26;
  --edv-netz-feder: 60;
  --edv-netz-daempfung: 9;
  --edv-netz-halo: zeiger;
  --edv-netz-halo-deckung: 0.144;
  --edv-netz-halo-tempo: 6;
  --edv-netz-perspektive: 0;
  --edv-netz-horizont: 0.3;
  --edv-netz-drift: 0;
  --edv-netz-drift-tempo: 5;
  --edv-netz-farbe: var(--edv-primaer);
  --edv-netz-linie: var(--edv-sekundaer);

  /* Bewegung */
  --edv-dauer-kurz: 120ms;
  --edv-dauer-mittel: 200ms;
  --edv-dauer-lang: 320ms;
  --edv-kurve: cubic-bezier(0.2, 0, 0, 1);
  --edv-kurve-aus: cubic-bezier(0.4, 0, 1, 1);

  /* Layout */
  --edv-inhalt-max: 1120px;
  --edv-text-max: 720px;
  --edv-kopf-hoehe: 72px;
  --edv-nav-hoehe: 44px;
  --edv-umbruch-schmal: 600px;
  --edv-umbruch-mittel: 900px;
  --edv-umbruch-breit: 1200px;
}

/* Semantische Rollen – hell (Standard) */
:root {
  color-scheme: light;
  --edv-hintergrund: #F7F6F9;
  --edv-flaeche: #FFFFFF;
  --edv-flaeche-kopf: #E8E6EC;
  --edv-flaeche-leise: #E4E2E9;
  --edv-rahmen: #D6D3DC;
  --edv-rahmen-leise: #EAE9EE;
  --edv-text: #302C38;
  --edv-text-leise: #78738A;
  --edv-text-titel: #382D4D;
  --edv-text-untertitel: #60477D;
  --edv-primaer: #805B9E;
  --edv-primaer-hover: #60477D;
  --edv-primaer-text: #FFFFFF;
  --edv-primaer-leise: #E6DFEC;
  --edv-sekundaer: #5B7C9E;
  --edv-sekundaer-dunkel: #2D3D4D;
  --edv-sekundaer-leise: #DFE5EC;
  --edv-erfolg: #29AE55;
  --edv-erfolg-dunkel: #19572E;
  --edv-erfolg-leise: #DEF7E6;
  --edv-warnung: #AE8809;
  --edv-warnung-dunkel: #574B19;
  --edv-warnung-leise: #F7F2DE;
  --edv-fehler: #AE2929;
  --edv-fehler-dunkel: #571919;
  --edv-fehler-leise: #F7DEDE;
  --edv-link: #805B9E;
  --edv-link-hover: #60477D;
  --edv-fokus: #B59EC7;
  --edv-text-auf-bild-hell: #FFFFFF;
  --edv-text-auf-bild-dunkel: #1E1A29;
  --edv-motiv-zeichen: #382D4D;
  --edv-akzentstreifen: #805B9E;
  --edv-akzentstreifen-farbe: #805B9E;
}

/* Dunkel: Systemeinstellung, sofern nicht ausdrücklich hell gewählt */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --edv-hintergrund: #1E1A29;
    --edv-flaeche: #2C2839;
    --edv-flaeche-kopf: #382D4D;
    --edv-flaeche-leise: #3A3549;
    --edv-rahmen: #443E55;
    --edv-rahmen-leise: #383347;
    --edv-text: #E9E6EF;
    --edv-text-leise: #A9A3B8;
    --edv-text-titel: #FFFFFF;
    --edv-text-untertitel: #B59EC7;
    --edv-primaer: #B59EC7;
    --edv-primaer-hover: #C9B6D8;
    --edv-primaer-text: #382D4D;
    --edv-primaer-leise: #4A3A5E;
    --edv-sekundaer: #9EB3C7;
    --edv-sekundaer-dunkel: #DFE5EC;
    --edv-sekundaer-leise: #33414F;
    --edv-erfolg: #7BE09D;
    --edv-erfolg-dunkel: #DEF7E6;
    --edv-erfolg-leise: #224034;
    --edv-warnung: #E7CA55;
    --edv-warnung-dunkel: #F7F2DE;
    --edv-warnung-leise: #423A29;
    --edv-fehler: #E07B7B;
    --edv-fehler-dunkel: #F7DEDE;
    --edv-fehler-leise: #422029;
    --edv-link: #B59EC7;
    --edv-link-hover: #C9B6D8;
    --edv-fokus: #805B9E;
    --edv-text-auf-bild-hell: #FFFFFF;
    --edv-text-auf-bild-dunkel: #1E1A29;
    --edv-motiv-zeichen: #B59EC7;
    --edv-akzentstreifen: #805B9E;
    --edv-akzentstreifen-farbe: #805B9E;
  }
}

/* Dunkel: ausdrücklich gewählt (data-theme) oder als Block (.edv-dunkel: Kopfbereich, Fußzeile) */
:root[data-theme="dark"], .edv-dunkel {
  color-scheme: dark;
  --edv-hintergrund: #1E1A29;
  --edv-flaeche: #2C2839;
  --edv-flaeche-kopf: #382D4D;
  --edv-flaeche-leise: #3A3549;
  --edv-rahmen: #443E55;
  --edv-rahmen-leise: #383347;
  --edv-text: #E9E6EF;
  --edv-text-leise: #A9A3B8;
  --edv-text-titel: #FFFFFF;
  --edv-text-untertitel: #B59EC7;
  --edv-primaer: #B59EC7;
  --edv-primaer-hover: #C9B6D8;
  --edv-primaer-text: #382D4D;
  --edv-primaer-leise: #4A3A5E;
  --edv-sekundaer: #9EB3C7;
  --edv-sekundaer-dunkel: #DFE5EC;
  --edv-sekundaer-leise: #33414F;
  --edv-erfolg: #7BE09D;
  --edv-erfolg-dunkel: #DEF7E6;
  --edv-erfolg-leise: #224034;
  --edv-warnung: #E7CA55;
  --edv-warnung-dunkel: #F7F2DE;
  --edv-warnung-leise: #423A29;
  --edv-fehler: #E07B7B;
  --edv-fehler-dunkel: #F7DEDE;
  --edv-fehler-leise: #422029;
  --edv-link: #B59EC7;
  --edv-link-hover: #C9B6D8;
  --edv-fokus: #805B9E;
  --edv-text-auf-bild-hell: #FFFFFF;
  --edv-text-auf-bild-dunkel: #1E1A29;
  --edv-motiv-zeichen: #B59EC7;
  --edv-akzentstreifen: #805B9E;
  --edv-akzentstreifen-farbe: #805B9E;
}

/* Hell als Block innerhalb dunkler Flächen */
.edv-hell {
  color-scheme: light;
  --edv-hintergrund: #F7F6F9;
  --edv-flaeche: #FFFFFF;
  --edv-flaeche-kopf: #E8E6EC;
  --edv-flaeche-leise: #E4E2E9;
  --edv-rahmen: #D6D3DC;
  --edv-rahmen-leise: #EAE9EE;
  --edv-text: #302C38;
  --edv-text-leise: #78738A;
  --edv-text-titel: #382D4D;
  --edv-text-untertitel: #60477D;
  --edv-primaer: #805B9E;
  --edv-primaer-hover: #60477D;
  --edv-primaer-text: #FFFFFF;
  --edv-primaer-leise: #E6DFEC;
  --edv-sekundaer: #5B7C9E;
  --edv-sekundaer-dunkel: #2D3D4D;
  --edv-sekundaer-leise: #DFE5EC;
  --edv-erfolg: #29AE55;
  --edv-erfolg-dunkel: #19572E;
  --edv-erfolg-leise: #DEF7E6;
  --edv-warnung: #AE8809;
  --edv-warnung-dunkel: #574B19;
  --edv-warnung-leise: #F7F2DE;
  --edv-fehler: #AE2929;
  --edv-fehler-dunkel: #571919;
  --edv-fehler-leise: #F7DEDE;
  --edv-link: #805B9E;
  --edv-link-hover: #60477D;
  --edv-fokus: #B59EC7;
  --edv-text-auf-bild-hell: #FFFFFF;
  --edv-text-auf-bild-dunkel: #1E1A29;
  --edv-motiv-zeichen: #382D4D;
  --edv-akzentstreifen: #805B9E;
  --edv-akzentstreifen-farbe: #805B9E;
}

/* Akzentschemata: data-akzent="blau|gruen|gelb|amber|orange|rot" auf <html>, <body> oder einem Container tauscht die
   akzentabhängigen Rollen (Primär, Link, Fokus, Titel, Kopffläche, Motivzeichen). Standard = violett (edvweber);
   ControlOne orange, Contact/CRM gruen, Administrator rot. Zustände (erfolg/warnung/fehler) bleiben unabhängig. */
[data-akzent="blau"] {
  --edv-text-titel: #2D3D4D;
  --edv-text-untertitel: #47627D;
  --edv-primaer: #5B7C9E;
  --edv-primaer-hover: #47627D;
  --edv-primaer-text: #FFFFFF;
  --edv-primaer-leise: #DFE5EC;
  --edv-link: #5B7C9E;
  --edv-link-hover: #47627D;
  --edv-fokus: #9EB3C7;
  --edv-motiv-zeichen: #2D3D4D;
  --edv-akzentstreifen-farbe: #5B7C9E;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) [data-akzent="blau"], :root:not([data-theme="light"])[data-akzent="blau"] {
    --edv-flaeche-kopf: #2D3D4D;
    --edv-text-untertitel: #9EB3C7;
    --edv-primaer: #9EB3C7;
    --edv-primaer-hover: #BBCAD8;
    --edv-primaer-text: #2D3D4D;
    --edv-primaer-leise: #2C3243;
    --edv-link: #9EB3C7;
    --edv-link-hover: #BBCAD8;
    --edv-fokus: #5B7C9E;
    --edv-motiv-zeichen: #9EB3C7;
    --edv-akzentstreifen-farbe: #5B7C9E;
  }
}
:root[data-theme="dark"] [data-akzent="blau"], :root[data-theme="dark"][data-akzent="blau"], [data-akzent="blau"] .edv-dunkel, [data-akzent="blau"].edv-dunkel {
  --edv-flaeche-kopf: #2D3D4D;
  --edv-text-untertitel: #9EB3C7;
  --edv-primaer: #9EB3C7;
  --edv-primaer-hover: #BBCAD8;
  --edv-primaer-text: #2D3D4D;
  --edv-primaer-leise: #2C3243;
  --edv-link: #9EB3C7;
  --edv-link-hover: #BBCAD8;
  --edv-fokus: #5B7C9E;
  --edv-motiv-zeichen: #9EB3C7;
  --edv-akzentstreifen-farbe: #5B7C9E;
}
[data-akzent="blau"] .edv-hell, [data-akzent="blau"].edv-hell {
  --edv-text-titel: #2D3D4D;
  --edv-text-untertitel: #47627D;
  --edv-primaer: #5B7C9E;
  --edv-primaer-hover: #47627D;
  --edv-primaer-text: #FFFFFF;
  --edv-primaer-leise: #DFE5EC;
  --edv-link: #5B7C9E;
  --edv-link-hover: #47627D;
  --edv-fokus: #9EB3C7;
  --edv-motiv-zeichen: #2D3D4D;
  --edv-akzentstreifen-farbe: #5B7C9E;
}
[data-akzent="gruen"] {
  --edv-text-titel: #2D4D38;
  --edv-text-untertitel: #477D59;
  --edv-primaer: #5B9E71;
  --edv-primaer-hover: #477D59;
  --edv-primaer-text: #FFFFFF;
  --edv-primaer-leise: #DFECE3;
  --edv-link: #5B9E71;
  --edv-link-hover: #477D59;
  --edv-fokus: #9EC7AC;
  --edv-motiv-zeichen: #2D4D38;
  --edv-akzentstreifen-farbe: #5B9E71;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) [data-akzent="gruen"], :root:not([data-theme="light"])[data-akzent="gruen"] {
    --edv-flaeche-kopf: #2D4D38;
    --edv-text-untertitel: #9EC7AC;
    --edv-primaer: #9EC7AC;
    --edv-primaer-hover: #BBD8C5;
    --edv-primaer-text: #2D4D38;
    --edv-primaer-leise: #2C3A38;
    --edv-link: #9EC7AC;
    --edv-link-hover: #BBD8C5;
    --edv-fokus: #5B9E71;
    --edv-motiv-zeichen: #9EC7AC;
    --edv-akzentstreifen-farbe: #5B9E71;
  }
}
:root[data-theme="dark"] [data-akzent="gruen"], :root[data-theme="dark"][data-akzent="gruen"], [data-akzent="gruen"] .edv-dunkel, [data-akzent="gruen"].edv-dunkel {
  --edv-flaeche-kopf: #2D4D38;
  --edv-text-untertitel: #9EC7AC;
  --edv-primaer: #9EC7AC;
  --edv-primaer-hover: #BBD8C5;
  --edv-primaer-text: #2D4D38;
  --edv-primaer-leise: #2C3A38;
  --edv-link: #9EC7AC;
  --edv-link-hover: #BBD8C5;
  --edv-fokus: #5B9E71;
  --edv-motiv-zeichen: #9EC7AC;
  --edv-akzentstreifen-farbe: #5B9E71;
}
[data-akzent="gruen"] .edv-hell, [data-akzent="gruen"].edv-hell {
  --edv-text-titel: #2D4D38;
  --edv-text-untertitel: #477D59;
  --edv-primaer: #5B9E71;
  --edv-primaer-hover: #477D59;
  --edv-primaer-text: #FFFFFF;
  --edv-primaer-leise: #DFECE3;
  --edv-link: #5B9E71;
  --edv-link-hover: #477D59;
  --edv-fokus: #9EC7AC;
  --edv-motiv-zeichen: #2D4D38;
  --edv-akzentstreifen-farbe: #5B9E71;
}
[data-akzent="gelb"] {
  --edv-text-titel: #4D482D;
  --edv-text-untertitel: #7D7447;
  --edv-primaer: #9E935B;
  --edv-primaer-hover: #7D7447;
  --edv-primaer-text: #FFFFFF;
  --edv-primaer-leise: #ECEADF;
  --edv-link: #9E935B;
  --edv-link-hover: #7D7447;
  --edv-fokus: #C7C09E;
  --edv-motiv-zeichen: #4D482D;
  --edv-akzentstreifen-farbe: #9E935B;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) [data-akzent="gelb"], :root:not([data-theme="light"])[data-akzent="gelb"] {
    --edv-flaeche-kopf: #4D482D;
    --edv-text-untertitel: #C7C09E;
    --edv-primaer: #C7C09E;
    --edv-primaer-hover: #D8D3BB;
    --edv-primaer-text: #4D482D;
    --edv-primaer-leise: #3C3833;
    --edv-link: #C7C09E;
    --edv-link-hover: #D8D3BB;
    --edv-fokus: #9E935B;
    --edv-motiv-zeichen: #C7C09E;
    --edv-akzentstreifen-farbe: #9E935B;
  }
}
:root[data-theme="dark"] [data-akzent="gelb"], :root[data-theme="dark"][data-akzent="gelb"], [data-akzent="gelb"] .edv-dunkel, [data-akzent="gelb"].edv-dunkel {
  --edv-flaeche-kopf: #4D482D;
  --edv-text-untertitel: #C7C09E;
  --edv-primaer: #C7C09E;
  --edv-primaer-hover: #D8D3BB;
  --edv-primaer-text: #4D482D;
  --edv-primaer-leise: #3C3833;
  --edv-link: #C7C09E;
  --edv-link-hover: #D8D3BB;
  --edv-fokus: #9E935B;
  --edv-motiv-zeichen: #C7C09E;
  --edv-akzentstreifen-farbe: #9E935B;
}
[data-akzent="gelb"] .edv-hell, [data-akzent="gelb"].edv-hell {
  --edv-text-titel: #4D482D;
  --edv-text-untertitel: #7D7447;
  --edv-primaer: #9E935B;
  --edv-primaer-hover: #7D7447;
  --edv-primaer-text: #FFFFFF;
  --edv-primaer-leise: #ECEADF;
  --edv-link: #9E935B;
  --edv-link-hover: #7D7447;
  --edv-fokus: #C7C09E;
  --edv-motiv-zeichen: #4D482D;
  --edv-akzentstreifen-farbe: #9E935B;
}
[data-akzent="amber"] {
  --edv-text-titel: #4D4033;
  --edv-text-untertitel: #7D6647;
  --edv-primaer: #9E825B;
  --edv-primaer-hover: #7D6647;
  --edv-primaer-text: #FFFFFF;
  --edv-primaer-leise: #ECE6DF;
  --edv-link: #9E825B;
  --edv-link-hover: #7D6647;
  --edv-fokus: #C7B69E;
  --edv-motiv-zeichen: #4D4033;
  --edv-akzentstreifen-farbe: #9E825B;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) [data-akzent="amber"], :root:not([data-theme="light"])[data-akzent="amber"] {
    --edv-flaeche-kopf: #4D4033;
    --edv-text-untertitel: #C7B69E;
    --edv-primaer: #C7B69E;
    --edv-primaer-hover: #D8CCBB;
    --edv-primaer-text: #4D4033;
    --edv-primaer-leise: #3C3436;
    --edv-link: #C7B69E;
    --edv-link-hover: #D8CCBB;
    --edv-fokus: #9E825B;
    --edv-motiv-zeichen: #C7B69E;
    --edv-akzentstreifen-farbe: #9E825B;
  }
}
:root[data-theme="dark"] [data-akzent="amber"], :root[data-theme="dark"][data-akzent="amber"], [data-akzent="amber"] .edv-dunkel, [data-akzent="amber"].edv-dunkel {
  --edv-flaeche-kopf: #4D4033;
  --edv-text-untertitel: #C7B69E;
  --edv-primaer: #C7B69E;
  --edv-primaer-hover: #D8CCBB;
  --edv-primaer-text: #4D4033;
  --edv-primaer-leise: #3C3436;
  --edv-link: #C7B69E;
  --edv-link-hover: #D8CCBB;
  --edv-fokus: #9E825B;
  --edv-motiv-zeichen: #C7B69E;
  --edv-akzentstreifen-farbe: #9E825B;
}
[data-akzent="amber"] .edv-hell, [data-akzent="amber"].edv-hell {
  --edv-text-titel: #4D4033;
  --edv-text-untertitel: #7D6647;
  --edv-primaer: #9E825B;
  --edv-primaer-hover: #7D6647;
  --edv-primaer-text: #FFFFFF;
  --edv-primaer-leise: #ECE6DF;
  --edv-link: #9E825B;
  --edv-link-hover: #7D6647;
  --edv-fokus: #C7B69E;
  --edv-motiv-zeichen: #4D4033;
  --edv-akzentstreifen-farbe: #9E825B;
}
[data-akzent="orange"] {
  --edv-text-titel: #4D382D;
  --edv-text-untertitel: #7D5947;
  --edv-primaer: #9E715B;
  --edv-primaer-hover: #7D5947;
  --edv-primaer-text: #FFFFFF;
  --edv-primaer-leise: #ECE3DF;
  --edv-link: #9E715B;
  --edv-link-hover: #7D5947;
  --edv-fokus: #C7AC9E;
  --edv-motiv-zeichen: #4D382D;
  --edv-akzentstreifen-farbe: #9E715B;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) [data-akzent="orange"], :root:not([data-theme="light"])[data-akzent="orange"] {
    --edv-flaeche-kopf: #4D382D;
    --edv-text-untertitel: #C7AC9E;
    --edv-primaer: #C7AC9E;
    --edv-primaer-hover: #D8C5BB;
    --edv-primaer-text: #4D382D;
    --edv-primaer-leise: #3C3033;
    --edv-link: #C7AC9E;
    --edv-link-hover: #D8C5BB;
    --edv-fokus: #9E715B;
    --edv-motiv-zeichen: #C7AC9E;
    --edv-akzentstreifen-farbe: #9E715B;
  }
}
:root[data-theme="dark"] [data-akzent="orange"], :root[data-theme="dark"][data-akzent="orange"], [data-akzent="orange"] .edv-dunkel, [data-akzent="orange"].edv-dunkel {
  --edv-flaeche-kopf: #4D382D;
  --edv-text-untertitel: #C7AC9E;
  --edv-primaer: #C7AC9E;
  --edv-primaer-hover: #D8C5BB;
  --edv-primaer-text: #4D382D;
  --edv-primaer-leise: #3C3033;
  --edv-link: #C7AC9E;
  --edv-link-hover: #D8C5BB;
  --edv-fokus: #9E715B;
  --edv-motiv-zeichen: #C7AC9E;
  --edv-akzentstreifen-farbe: #9E715B;
}
[data-akzent="orange"] .edv-hell, [data-akzent="orange"].edv-hell {
  --edv-text-titel: #4D382D;
  --edv-text-untertitel: #7D5947;
  --edv-primaer: #9E715B;
  --edv-primaer-hover: #7D5947;
  --edv-primaer-text: #FFFFFF;
  --edv-primaer-leise: #ECE3DF;
  --edv-link: #9E715B;
  --edv-link-hover: #7D5947;
  --edv-fokus: #C7AC9E;
  --edv-motiv-zeichen: #4D382D;
  --edv-akzentstreifen-farbe: #9E715B;
}
[data-akzent="rot"] {
  --edv-text-titel: #4D2D2D;
  --edv-text-untertitel: #7D4747;
  --edv-primaer: #9E5B5B;
  --edv-primaer-hover: #7D4747;
  --edv-primaer-text: #FFFFFF;
  --edv-primaer-leise: #ECDFDF;
  --edv-link: #9E5B5B;
  --edv-link-hover: #7D4747;
  --edv-fokus: #C79E9E;
  --edv-motiv-zeichen: #4D2D2D;
  --edv-akzentstreifen-farbe: #9E5B5B;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) [data-akzent="rot"], :root:not([data-theme="light"])[data-akzent="rot"] {
    --edv-flaeche-kopf: #4D2D2D;
    --edv-text-untertitel: #C79E9E;
    --edv-primaer: #C79E9E;
    --edv-primaer-hover: #D8BBBB;
    --edv-primaer-text: #4D2D2D;
    --edv-primaer-leise: #3C2A33;
    --edv-link: #C79E9E;
    --edv-link-hover: #D8BBBB;
    --edv-fokus: #9E5B5B;
    --edv-motiv-zeichen: #C79E9E;
    --edv-akzentstreifen-farbe: #9E5B5B;
  }
}
:root[data-theme="dark"] [data-akzent="rot"], :root[data-theme="dark"][data-akzent="rot"], [data-akzent="rot"] .edv-dunkel, [data-akzent="rot"].edv-dunkel {
  --edv-flaeche-kopf: #4D2D2D;
  --edv-text-untertitel: #C79E9E;
  --edv-primaer: #C79E9E;
  --edv-primaer-hover: #D8BBBB;
  --edv-primaer-text: #4D2D2D;
  --edv-primaer-leise: #3C2A33;
  --edv-link: #C79E9E;
  --edv-link-hover: #D8BBBB;
  --edv-fokus: #9E5B5B;
  --edv-motiv-zeichen: #C79E9E;
  --edv-akzentstreifen-farbe: #9E5B5B;
}
[data-akzent="rot"] .edv-hell, [data-akzent="rot"].edv-hell {
  --edv-text-titel: #4D2D2D;
  --edv-text-untertitel: #7D4747;
  --edv-primaer: #9E5B5B;
  --edv-primaer-hover: #7D4747;
  --edv-primaer-text: #FFFFFF;
  --edv-primaer-leise: #ECDFDF;
  --edv-link: #9E5B5B;
  --edv-link-hover: #7D4747;
  --edv-fokus: #C79E9E;
  --edv-motiv-zeichen: #4D2D2D;
  --edv-akzentstreifen-farbe: #9E5B5B;
}


/* edvweber Design-System – Web-Bausteine (edv-*), setzt tokens.css voraus.
   Stand 2026-09-10, v0.5.0. Klassen sind Rollen, keine Farbnamen. Alle Zahlenwerte kommen aus tokens.css (design-tokens.json);
   hier stehen nur Aufbau und Modifier. Anwendung: Website, kleine Webanwendungen, Single-Page-HTML-Werkzeuge (dist\).
   0.5.0: Zustände in Signalfarben (Rollen unverändert), Akzentschemata data-akzent (tokens.css), Datenfluss-Zeichen in
   der Rolle motiv-zeichen (Akzent 300 auf Dunkel), .edv-datenfluss--weiss für das Original.
   0.4.0: Motiv-/Textzonen-/Rasterwerte aus Tokens, Bewegungs-Token, Umbruchverhalten des Kopfes, Formular-Grundelemente.
   0.2.0: Pendants zu den Infografik-Bausteinen aus FL-0002 (Freigabe 09.09.2026): Karte mit leisem Rahmen,
   Kopfzeile ohne Linie + Kennung, Banderole, Fortschritt-Label in Balkenfarbe, Aufwandsbalken, Statusquadrat,
   Nummernliste mit Doppelquadrat, Legende mit Quadraten/Musterbalken/Spalten, Kennzahl, Abschnitt vertikal, Kopf-Haarlinie. */

/* ---------- Grundlagen ---------- */
.edv-body,
body.edv-body {
  margin: 0;
  background: var(--edv-hintergrund);
  color: var(--edv-text);
  font-family: var(--edv-font-text);
  font-size: var(--edv-size-text);
  line-height: var(--edv-line-text);
  -webkit-font-smoothing: antialiased;
}
.edv-body h1, .edv-body h2, .edv-body h3, .edv-body h4 { margin: 0; color: var(--edv-text-titel); text-wrap: balance; }
.edv-body h1 { font-size: var(--edv-size-h1); line-height: var(--edv-line-h1); font-weight: var(--edv-weight-fett); }
.edv-body h2 { font-size: var(--edv-size-h2); line-height: var(--edv-line-h2); font-weight: var(--edv-weight-fett); }
.edv-body h3 { font-size: var(--edv-size-h3); line-height: var(--edv-line-h3); font-weight: var(--edv-weight-halbfett); }
.edv-body h4 { font-size: var(--edv-size-h4); line-height: var(--edv-line-h4); font-weight: var(--edv-weight-halbfett); }
.edv-body p { margin: 0; max-width: var(--edv-text-max); }
.edv-body a { color: var(--edv-link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.edv-body a:hover { color: var(--edv-link-hover); }
.edv-body :focus-visible { outline: 2px solid var(--edv-fokus); outline-offset: 2px; border-radius: var(--edv-radius-klein); }
.edv-body code, .edv-body pre { font-family: var(--edv-font-mono); font-size: 0.9em; }
.edv-body pre { margin: 0; padding: var(--edv-space-4); background: var(--edv-flaeche-leise); border-radius: var(--edv-radius-karte); overflow-x: auto; line-height: 1.5; }

.edv-display { font-family: var(--edv-font-leicht); font-weight: var(--edv-weight-leicht); font-size: var(--edv-size-display); line-height: var(--edv-line-display); color: var(--edv-text-titel); }
/* Claim: Standardfarbe aus dem System (TextUntertitel); über Bildern Weiß oder Nacht – die Schwarz/Weiß-Töne des Systems
   (Regel 10.09.2026: solange der Grund aus Systemfarben besteht, Systemfarbe; liegt ein Bild darunter, --hell oder --dunkel). */
.edv-claim { font-family: var(--edv-font-leicht); font-weight: var(--edv-weight-leicht); font-size: var(--edv-size-claim); line-height: var(--edv-line-claim); letter-spacing: var(--edv-tracking-claim); color: var(--edv-claim-farbe, var(--edv-text-untertitel)); }
.edv-claim--hell { --edv-claim-farbe: var(--edv-text-auf-bild-hell); }
.edv-claim--dunkel { --edv-claim-farbe: var(--edv-text-auf-bild-dunkel); }
.edv-auf-bild--hell { color: var(--edv-text-auf-bild-hell); --edv-claim-farbe: var(--edv-text-auf-bild-hell); }     /* ganzer Textblock über dunklem Bild */
.edv-auf-bild--dunkel { color: var(--edv-text-auf-bild-dunkel); --edv-claim-farbe: var(--edv-text-auf-bild-dunkel); } /* ganzer Textblock über hellem Bild */
/* Automatik (edv-datenfluss.js, data-auf-bild="auto"): misst die Bildhelligkeit hinter dem Block und setzt --hell/--dunkel;
   die Textzone folgt der Wahl – dunkler Text bekommt eine helle Zone. */
.edv-auf-bild--dunkel.edv-datenfluss-textzone { --edv-textzone-farbe: var(--edv-text-auf-bild-hell); }
.edv-auf-bild--hell.edv-datenfluss-textzone { --edv-textzone-farbe: var(--edv-textzone-farbe-dunkel, var(--edv-flaeche)); }
.edv-leise { color: var(--edv-text-leise); }
.edv-klein { font-size: var(--edv-size-klein); line-height: var(--edv-line-klein); }
.edv-fussnote { font-size: var(--edv-size-fussnote); line-height: var(--edv-line-fussnote); color: var(--edv-text-leise); }
.edv-label { font-size: var(--edv-size-klein); font-weight: var(--edv-weight-halbfett); color: var(--edv-text-leise); }
.edv-zahl { font-variant-numeric: tabular-nums; }

.edv-inhalt { max-width: var(--edv-inhalt-max); margin-inline: auto; padding-inline: var(--edv-space-5); }

/* ---------- Kopfbereich ---------- */
.edv-kopf {
  background: var(--edv-flaeche-kopf);
  border-bottom: var(--edv-akzentstreifen) solid var(--edv-akzentstreifen-farbe);   /* Breite (Token) und Farbe (Rolle, folgt dem Akzent) */
}
.edv-kopf--haarlinie { border-bottom-width: var(--edv-haarlinie); }   /* Infografik-Regel: 1 px statt 4-px-Streifen */
/* Kopfinhalt (Logo, Navigation, Claim) steht immer links, nie zentriert – auch in breiten Fenstern (Regel 10.09.2026);
   die Breitenbegrenzung des Inhaltsblocks bleibt, nur die Zentrierung entfällt. */
.edv-kopf .edv-inhalt { margin-inline: 0; }
.edv-kopf__zeile { display: flex; align-items: center; gap: var(--edv-space-6); min-height: var(--edv-kopf-hoehe); }
.edv-kopf__logo { display: block; height: 40px; }
.edv-kopf__logo img, .edv-kopf__logo svg { height: 100%; width: auto; display: block; }
.edv-kopf__titel { padding-block: var(--edv-space-5) var(--edv-space-4); }
.edv-kopf__titel h1 { color: var(--edv-text-titel); }
.edv-kopf__untertitel { color: var(--edv-text-untertitel); font-size: var(--edv-size-gross); margin-top: var(--edv-space-1); }

/* dunkler Kopf (Website): Rollen kommen aus .edv-dunkel */
.edv-kopf.edv-dunkel { background-color: var(--edv-flaeche); border-bottom-color: var(--edv-akzentstreifen-farbe); }   /* background-color, damit .edv-raster (background-image) nicht überschrieben wird */

/* ---------- Motive (Leitmotiv „Element“, DESIGN-SYSTEM.md §8) ----------
   Blueprint-Raster: dezent, nur auf dunklen Flächen. Datenfluss: Canvas-Baustein (edv-datenfluss.js), Parameter aus
   --edv-fluss-* (tokens.css), je Element übersteuerbar; data-richtung rechts|unten|oben, data-zeichen quadrat|flocke|blase.
   Farbe = --edv-fluss-farbe (Rolle motiv-zeichen: auf Dunkel Akzent 300 – Entscheidung 10.09.2026 statt Weiß –, auf Hell
   Akzent 900; --weiss stellt das Original her, --schwarz Schatten im Fluss). Ohne JavaScript
   oder bei reduced-motion bleibt die Fläche leer bzw. zeigt ein Standbild – das Motiv ist nie Informationsträger. */
.edv-raster {
  background-image:
    linear-gradient(to right, rgb(255 255 255 / var(--edv-raster-deckung)) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(255 255 255 / var(--edv-raster-deckung)) 1px, transparent 1px);
  background-size: var(--edv-raster-teilung) var(--edv-raster-teilung);
}
/* Variante „Kreuze“ (Review 10.09.2026): an den Kreuzungen sind die Linien aufgehellt – kleine Kreuze im Linientyp,
   Schenkel --edv-raster-kreuz (3 px, anpassbar); die übrigen Linienabschnitte sind ein feines Punktraster (Punkt alle
   --edv-raster-punkt = 3 px). Aufbau aus sechs Lagen (oben → unten): Punktreihen waagerecht/senkrecht, zwei Abdeckungen in
   Flächenfarbe zwischen den Schenkeln, helle Vollinien. Setzt eine einfarbige Fläche voraus (--edv-raster-grund, Standard
   Flächenfarbe) – deshalb nur auf einfarbigen dunklen Flächen, nie über Bildern. */
.edv-raster--kreuze {
  --edv-raster-grund: var(--edv-flaeche);   /* Schenkel, Punktabstand und Aufhellung: Tokens --edv-raster-kreuz/-punkt/-kreuz-faktor (3 px, 3 px, 1,25) */
  background-image:
    /* Punktreihen: 1-px-Punkte (radial, damit sie nicht zu Streifen werden) alle --edv-raster-punkt auf jeder Rasterlinie */
    radial-gradient(circle at 0.5px 0.5px, rgb(255 255 255 / var(--edv-raster-deckung)) 0 0.55px, transparent 0.9px),
    radial-gradient(circle at 0.5px 0.5px, rgb(255 255 255 / var(--edv-raster-deckung)) 0 0.55px, transparent 0.9px),
    /* Abdeckungen in Flächenfarbe zwischen den Kreuzschenkeln */
    linear-gradient(to right, transparent 0 var(--edv-raster-kreuz), var(--edv-raster-grund) var(--edv-raster-kreuz) calc(var(--edv-raster-teilung) - var(--edv-raster-kreuz)), transparent calc(var(--edv-raster-teilung) - var(--edv-raster-kreuz))),
    linear-gradient(to bottom, transparent 0 var(--edv-raster-kreuz), var(--edv-raster-grund) var(--edv-raster-kreuz) calc(var(--edv-raster-teilung) - var(--edv-raster-kreuz)), transparent calc(var(--edv-raster-teilung) - var(--edv-raster-kreuz))),
    /* Vollinien im Linientyp, an den Kreuzungen sichtbar = Kreuze */
    linear-gradient(to bottom, rgb(255 255 255 / calc(var(--edv-raster-deckung) * var(--edv-raster-kreuz-faktor))) 0 1px, transparent 1px),
    linear-gradient(to right, rgb(255 255 255 / calc(var(--edv-raster-deckung) * var(--edv-raster-kreuz-faktor))) 0 1px, transparent 1px);
  background-size:
    var(--edv-raster-punkt) var(--edv-raster-teilung),
    var(--edv-raster-teilung) var(--edv-raster-punkt),
    var(--edv-raster-teilung) var(--edv-raster-teilung),
    var(--edv-raster-teilung) var(--edv-raster-teilung),
    var(--edv-raster-teilung) var(--edv-raster-teilung),
    var(--edv-raster-teilung) var(--edv-raster-teilung);
}
.edv-datenfluss {
  position: relative; display: block; min-height: 64px; overflow: hidden; color: var(--edv-fluss-farbe);
  /* data-farbe="auto": Farbe je Zeichen nach der Helligkeit des Hintergrunds darunter (Foto, Fläche) – beide frei wählbar */
  --edv-fluss-farbe-auf-dunkel: #FFFFFF; --edv-fluss-farbe-auf-hell: var(--edv-violett-900); --edv-fluss-schwelle: 0.5;
}
.edv-datenfluss canvas { display: block; position: absolute; inset: 0; pointer-events: none; }
/* Hinter Text (Review 10.09.2026): Zeichen dunkler (Primär = Violett 300 auf Dunkel statt Weiß), leiser und halb so
   schnell, damit der Kontrast des Textes nicht flackert; dazu optional .edv-datenfluss-textzone auf dem Inhaltsblock –
   ein weicher Verlauf in Flächenfarbe, der die Zone hinter dem Text beruhigt. */
.edv-datenfluss--hinter {
  position: absolute; inset: 0; min-height: 0; z-index: 0;
  --edv-fluss-farbe: var(--edv-fluss-hinter-farbe); --edv-fluss-alpha-min: var(--edv-fluss-hinter-alpha-min); --edv-fluss-alpha-max: var(--edv-fluss-hinter-alpha-max);
  --edv-fluss-tempo-min: var(--edv-fluss-hinter-tempo-min); --edv-fluss-tempo-max: var(--edv-fluss-hinter-tempo-max); --edv-fluss-periode: var(--edv-fluss-hinter-periode);
}
/* Schwarze Zeichen (Review 10.09.2026): dunkler als die Fläche, Deckung pulsiert wie sonst – wirkt wie Schatten im Fluss */
.edv-datenfluss--schwarz { --edv-fluss-farbe: #000000; --edv-fluss-alpha-min: 0.2; --edv-fluss-alpha-max: 0.8; }
.edv-datenfluss--hinter ~ * { position: relative; z-index: 1; }
/* Textzone: radialer Verlauf, der zu allen Kanten hin ausläuft – keine harte Linie am Blockrand (Review 10.09.2026) */
.edv-datenfluss-textzone {
  --edv-textzone-farbe: var(--edv-flaeche);   /* Zonenfarbe: Standard Flächenfarbe; bei Hintergrundgrafiken deren Grundton, z. B. var(--edv-blau-900) */
  /* Die Zone folgt der Textbreite (fit-content) und läuft kurz dahinter aus – nicht bis zum rechten Rand (Review 10.09.2026) */
  width: fit-content; max-width: 100%; box-sizing: border-box; padding-inline-end: var(--edv-textzone-innen-rechts);
  background: radial-gradient(farthest-side at var(--edv-textzone-mitte-x) 50%, color-mix(in srgb, var(--edv-textzone-farbe) calc(var(--edv-textzone-deckung) * 100%), transparent) 0 var(--edv-textzone-kern), transparent 100%);
}
.edv-datenfluss-textzone > * { text-shadow: 0 1px 2px color-mix(in srgb, var(--edv-textzone-farbe) 80%, transparent); }
.edv-datenfluss--violett { --edv-fluss-farbe: var(--edv-primaer); }   /* = Standard seit 0.5.0, bleibt als Alias */
.edv-datenfluss--weiss { --edv-fluss-farbe: #FFFFFF; }                /* Original 2005: Weiß auf Dunkel */
.edv-datenfluss--leise { --edv-fluss-alpha-max: 0.6; --edv-fluss-alpha-min: 0.15; }
/* Knotennetz (interaktiv, edv-knotennetz.js): gewichtete Knoten mit Verbindungen; Zeiger drückt sie leicht weg, sie
   federn zurück (Idee des Benutzers, erste Fassung 10.09.2026). Eigenes Motiv – nicht mit dem Datenfluss auf einer Fläche. */
.edv-knotennetz {
  position: relative; display: block; min-height: 120px; overflow: hidden; color: var(--edv-netz-farbe); touch-action: none;
  /* alle Parameter --edv-netz-* aus tokens.css (Halo nur im Zeigerumkreis = final 10.09.2026); je Element übersteuerbar */
}
.edv-knotennetz--perspektive { --edv-netz-perspektive: 0.6; }
.edv-knotennetz--drift { --edv-netz-drift: 3; }
.edv-knotennetz--ohne-halo { --edv-netz-halo: nie; }   /* statische Halos (erste Fassung) sind gestrichen, 10.09.2026 */
.edv-knotennetz canvas { display: block; position: absolute; inset: 0; }
.edv-knotennetz--hinter { position: absolute; inset: 0; min-height: 0; z-index: 0; }
.edv-knotennetz--hinter ~ * { position: relative; z-index: 1; pointer-events: none; }   /* Zeiger erreicht das Netz durch den Inhalt hindurch; Links darin brauchen pointer-events: auto */
/* Saison-Skins: Winter = Flocken fallend, Sommer = Blasen aufsteigend (Werte der Originale) */
.edv-datenfluss--winter { --edv-fluss-zeichen: flocke; --edv-fluss-richtung: unten; --edv-fluss-groesse: 4.5px; --edv-fluss-tempo-min: 20px; --edv-fluss-tempo-max: 70px; --edv-fluss-amplitude: 10px; --edv-fluss-periode: 3s; }
.edv-datenfluss--sommer { --edv-fluss-zeichen: blase; --edv-fluss-richtung: oben; --edv-fluss-groesse: 5.7px; --edv-fluss-tempo-min: 25px; --edv-fluss-tempo-max: 90px; --edv-fluss-amplitude: 6px; --edv-fluss-periode: 1.6s; }

/* ---------- Navigation ---------- */
.edv-nav { display: flex; gap: var(--edv-space-1); margin-left: auto; flex-wrap: wrap; }
.edv-nav a {
  display: inline-block; padding: var(--edv-space-2) var(--edv-space-3);
  color: var(--edv-text); text-decoration: none; font-weight: var(--edv-weight-halbfett); font-size: var(--edv-size-klein);
  border-radius: var(--edv-radius-klein); border-bottom: 2px solid transparent;
}
.edv-nav a:hover { color: var(--edv-link-hover); background: var(--edv-primaer-leise); }
.edv-nav a[aria-current="page"] { color: var(--edv-primaer); border-bottom-color: var(--edv-primaer); }

/* ---------- Karte ---------- */
.edv-karte {
  background: var(--edv-flaeche);
  border: var(--edv-border) solid var(--edv-rahmen-leise);   /* 50 % heller als Rahmen – der Schatten trennt vom Grund */
  border-radius: var(--edv-radius-karte);
  box-shadow: var(--edv-shadow-karte);
  padding: var(--edv-space-4);
}
.edv-karte--rahmen { border-color: var(--edv-rahmen); }
.edv-karte--erfolg { border-color: var(--edv-erfolg); }
.edv-karte--primaer { border-color: var(--edv-primaer); }
.edv-karte--sekundaer { border-color: var(--edv-sekundaer); }
.edv-karte__kopf { display: flex; align-items: center; gap: var(--edv-space-3); margin-bottom: var(--edv-space-3); }
.edv-karte__kopf h3, .edv-karte__kopf h4 { color: var(--edv-text); }
.edv-karte__kopfzeile {
  margin: calc(-1 * var(--edv-space-4)) calc(-1 * var(--edv-space-4)) var(--edv-space-4);
  padding: var(--edv-space-2) var(--edv-space-4);
  background: var(--edv-flaeche-kopf);   /* ohne Trennlinie (09.09.2026) */
  border-radius: var(--edv-radius-karte) var(--edv-radius-karte) 0 0;
  font-weight: var(--edv-weight-halbfett); color: var(--edv-text-titel);
  display: flex; align-items: baseline; gap: var(--edv-space-3);
}
.edv-karte__kennung { font-weight: var(--edv-weight-fett); color: var(--edv-text); }   /* A, B, … – Buchstabe ohne Form */

/* ---------- Banderole (Statuskennzeichen über der unteren rechten Kartenecke, 45°) ---------- */
.edv-karte--banderole { position: relative; overflow: hidden; }
.edv-banderole {
  position: absolute; right: -55px; bottom: 15px; width: 160px; height: 20px;   /* Bandmitte 25 px von beiden Kanten */
  transform: rotate(-45deg);
  background: var(--edv-erfolg); color: var(--edv-primaer-text);
  font-size: var(--edv-size-fussnote); font-weight: var(--edv-weight-fett); line-height: 20px; text-align: center;
  pointer-events: none;
}
.edv-banderole--primaer { background: var(--edv-primaer); }
.edv-banderole--warnung { background: var(--edv-warnung); }

/* ---------- Kennzahl (flache Karte: Label + Untertitel links, Wert rechts, alles in Rollenfarbe) ---------- */
.edv-kennzahl {
  display: flex; align-items: center; gap: var(--edv-space-5); min-height: 60px; box-sizing: border-box;
  padding: var(--edv-space-2) var(--edv-space-4);
  background: var(--edv-flaeche); border: var(--edv-border) solid var(--edv-primaer); border-radius: var(--edv-radius-karte);
  box-shadow: var(--edv-shadow-karte); color: var(--edv-primaer);
}
.edv-kennzahl--sekundaer { border-color: var(--edv-sekundaer); color: var(--edv-sekundaer); }
.edv-kennzahl--erfolg { border-color: var(--edv-erfolg); color: var(--edv-erfolg); }
.edv-kennzahl__label { font-size: var(--edv-size-klein); font-weight: var(--edv-weight-fett); line-height: 1.3; }
.edv-kennzahl__untertitel { font-size: var(--edv-size-fussnote); color: var(--edv-text-leise); }
.edv-kennzahl__wert { margin-left: auto; font-size: 1.375rem; font-weight: var(--edv-weight-fett); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Abschnittsbalken (Titel um 90° gedreht, liest von unten nach oben, links neben einer Kartenreihe) ----------
   Wie ein Header nur an der Außenseite gerundet (Review 10.09.2026): links stehend → rechte Ecken eckig;
   .edv-abschnitt--rechts (rechts stehend) → linke Ecken eckig. Die Radien sind vor der 180°-Drehung angegeben,
   deshalb stehen sie im Code seitenverkehrt. */
.edv-abschnitt--vertikal {
  writing-mode: vertical-rl; transform: rotate(180deg);
  display: grid; place-items: center; padding: var(--edv-space-2) 5px;
  background: var(--edv-flaeche-kopf); border-radius: 0 var(--edv-radius-karte) var(--edv-radius-karte) 0;
  color: var(--edv-text-titel); font-weight: var(--edv-weight-fett); font-size: var(--edv-size-gross); line-height: 1;
}
.edv-abschnitt--vertikal.edv-abschnitt--rechts { border-radius: var(--edv-radius-karte) 0 0 var(--edv-radius-karte); }

/* ---------- Sechseck mit Ziffer (Form des Logo-Kerns, Spitze oben) ---------- */
.edv-sechseck {
  display: inline-grid; place-items: center; flex: none;
  --edv-sechseck-h: 44px;
  height: var(--edv-sechseck-h); width: calc(var(--edv-sechseck-h) * 0.866);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: var(--edv-primaer); color: var(--edv-primaer-text);
  font-weight: var(--edv-weight-fett); font-size: 1.25rem; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.edv-sechseck--erfolg { background: var(--edv-erfolg); }
.edv-sechseck--sekundaer { background: var(--edv-sekundaer); }
.edv-sechseck--klein { --edv-sechseck-h: 28px; font-size: 0.875rem; }
.edv-sechseck--gross { --edv-sechseck-h: 64px; font-size: 1.75rem; }

/* ---------- Fortschritt ---------- */
.edv-fortschritt { display: grid; gap: 2px; }   /* Label → Balken 2 px (Review 09.09.2026) */
.edv-fortschritt__label { font-size: var(--edv-size-klein); font-weight: var(--edv-weight-fett); color: var(--edv-primaer); }   /* Label in der Balkenfarbe */
.edv-fortschritt--erfolg .edv-fortschritt__label { color: var(--edv-erfolg); }
.edv-fortschritt__balken {
  position: relative; height: 20px; border-radius: var(--edv-radius-klein);
  background: var(--edv-flaeche-leise); overflow: hidden;
}
.edv-fortschritt__fuellung { position: absolute; inset: 0 auto 0 0; background: var(--edv-primaer); border-radius: var(--edv-radius-klein); }
.edv-fortschritt--erfolg .edv-fortschritt__fuellung { background: var(--edv-erfolg); }
.edv-fortschritt__wert {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: var(--edv-size-fussnote); font-weight: var(--edv-weight-fett); color: var(--edv-primaer);   /* Prozent in der Balkenfarbe … */
  font-variant-numeric: tabular-nums;
}
.edv-fortschritt--erfolg .edv-fortschritt__wert { color: var(--edv-erfolg); }
.edv-fortschritt--voll .edv-fortschritt__wert { color: var(--edv-primaer-text); }   /* … ab 60 % Füllung weiß */

/* ---------- Wertzeile (Label – Aufwandsbalken oder Pfeil – Wert) ----------
   Aufwandsbalken (Standard seit 09.09.2026): Spur 8 px, Füllung bis --edv-min in Rollenfarbe, bis --edv-max in heller Stufe
   (Schätzspanne); beide als Prozent einer gemeinsamen Skala. Der Pfeil bleibt für Ablaufdarstellungen erhalten. */
/* Label → Balken dieselbe Luft wie beim Fortschritt (2 px): Wertzeile ohne Zeilenabstand, Wert mit Zeilenhöhe 1,
   Balken auf der Wertmitte, Zeile 2 px hochgezogen → Balkenoberkante ≈ 2 px unter dem Label (Review 09.09.2026). */
.edv-wertzeile { display: grid; gap: 0; color: var(--edv-primaer); }
.edv-wertzeile__zeile { margin-top: -2px; }
.edv-wertzeile--sekundaer { color: var(--edv-sekundaer); }
.edv-wertzeile__label { font-size: var(--edv-size-klein); font-weight: var(--edv-weight-fett); }
.edv-wertzeile__zeile { display: flex; align-items: center; gap: var(--edv-space-2); }
.edv-wertzeile__pfeil { flex: 1; height: 22px; }
.edv-wertzeile__pfeil svg { width: 100%; height: 100%; display: block; }
.edv-wertzeile__wert { min-width: 62px; text-align: right; font-weight: var(--edv-weight-fett); font-size: 1.0625rem; line-height: 1; font-variant-numeric: tabular-nums; }
.edv-wertzeile__balken {
  flex: 1; position: relative; height: 8px; border-radius: var(--edv-radius-klein); background: var(--edv-flaeche-leise); overflow: hidden;
  --edv-min: 0%; --edv-max: 0%;
}
.edv-wertzeile__balken::before, .edv-wertzeile__balken::after { content: ""; position: absolute; inset: 0 auto 0 0; border-radius: inherit; min-width: 6px; }
.edv-wertzeile__balken::before { width: var(--edv-max); background: color-mix(in srgb, currentColor 55%, var(--edv-flaeche)); }
.edv-wertzeile__balken::after { width: var(--edv-min); background: currentColor; }
.edv-wertzeile__balken--leer::before, .edv-wertzeile__balken--leer::after { display: none; }
.edv-wertzeile__hinweis { font-size: var(--edv-size-fussnote); color: var(--edv-text); }   /* Hinweis in Textfarbe, nicht leise */
.edv-wertzeile--leer { color: var(--edv-text-leise); }
.edv-wertzeile--leer .edv-wertzeile__pfeil { border-top: 2px solid var(--edv-rahmen); height: 0; align-self: center; }

/* ---------- Statusquadrat, Aufzählung, Legende ----------
   Quadrat 16 px, Radius 3, Inhalt weiß: Nummer (offen), Häkchen (ja/erledigt, Erfolg), Kreuz (nein, Fehler),
   Chevron (verschoben – separates Teilprojekt, Warnung). Platzhalter = weiß mit 2-px-Rahmen. Eine Bedeutung je Farbe je Seite. */
.edv-quadrat, .edv-liste--nummern li::before, .edv-liste--nummern li::after, .edv-legende i {
  box-sizing: border-box; width: 16px; height: 16px; border-radius: var(--edv-radius-klein); flex: none;
  background-color: var(--edv-sekundaer); background-size: 100% 100%; background-repeat: no-repeat;
  color: var(--edv-primaer-text); font-size: 10px; font-weight: var(--edv-weight-fett); line-height: 16px; text-align: center; font-style: normal;
}
.edv-quadrat { display: inline-block; vertical-align: -3px; }
.edv-quadrat--primaer, .edv-legende i.primaer { background-color: var(--edv-primaer); }
.edv-quadrat--offen { background-color: var(--edv-flaeche); box-shadow: inset 0 0 0 2px var(--edv-sekundaer); }
.edv-quadrat--offen.edv-quadrat--primaer { box-shadow: inset 0 0 0 2px var(--edv-primaer); }
.edv-quadrat--ja, .edv-liste--nummern li.ja::after, .edv-legende i.ja, .edv-legende i.erfolg {
  background-color: var(--edv-erfolg);
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpolyline points='3.84,8.32 6.88,11.36 12.32,4.96' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.edv-quadrat--nein, .edv-liste--nummern li.nein::after, .edv-legende i.nein {
  background-color: var(--edv-fehler);
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.8 4.8 11.2 11.2 M11.2 4.8 4.8 11.2' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}
.edv-quadrat--verschoben, .edv-liste--nummern li.verschoben::after, .edv-legende i.verschoben {
  background-color: var(--edv-warnung);
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpolyline points='6.08,4.16 10.24,8 6.08,11.84' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.edv-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--edv-space-1); }
.edv-liste li { position: relative; padding-left: var(--edv-space-4); font-size: var(--edv-size-klein); line-height: var(--edv-line-klein); }
.edv-liste li::before { content: ""; position: absolute; left: 2px; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: var(--edv-sekundaer); }
/* Nummernliste mit Doppelquadrat: links Zuständigkeit mit Nummer (FL = Sekundär, .edvweber = Primär – die Nummer bleibt
   immer sichtbar), rechts Platzhalter (2-px-Rahmen), der bei .ja/.nein/.verschoben zum Statusquadrat mit Symbol wird. */
.edv-liste--nummern { counter-reset: punkt; gap: 2px; }
/* Spalten 16 | 20 | Text mit 4 px Lücke: Quadrat zu Quadrat 4 px, zweites Quadrat zu Text 8 px (Review 09.09.2026) */
.edv-liste--nummern li { counter-increment: punkt; display: grid; grid-template-columns: 16px 20px minmax(0, 1fr); column-gap: 4px; align-items: start; padding-left: 0; }
.edv-liste--nummern li::before { content: counter(punkt); position: static; grid-column: 1; margin-top: 3px; border-radius: var(--edv-radius-klein); width: 16px; height: 16px; }
.edv-liste--nummern li::after { content: ""; grid-column: 2; grid-row: 1; justify-self: start; margin-top: 3px; background-color: var(--edv-flaeche); box-shadow: inset 0 0 0 2px var(--edv-sekundaer); }
.edv-liste--nummern li.ja::after, .edv-liste--nummern li.nein::after, .edv-liste--nummern li.verschoben::after { box-shadow: none; }
.edv-liste--nummern li.edvweber::before { background-color: var(--edv-primaer); }
.edv-liste--nummern li.edvweber::after { box-shadow: inset 0 0 0 2px var(--edv-primaer); }
.edv-liste--nummern li.edvweber.ja::after, .edv-liste--nummern li.edvweber.nein::after, .edv-liste--nummern li.edvweber.verschoben::after { box-shadow: none; }
.edv-legende { display: flex; flex-wrap: wrap; gap: var(--edv-space-5); font-size: var(--edv-size-klein); }
.edv-legende span { display: inline-flex; align-items: center; gap: var(--edv-space-2); }
.edv-legende i { background-color: var(--edv-primaer); }   /* Quadrat statt Kreis (09.09.2026) */
.edv-legende i.sekundaer { background-color: var(--edv-sekundaer); }
/* Musterbalken (36 × 8) als Legendensymbol: Aufwand = zweifarbig bis 60 %/85 %, Fortschritt = Teilfüllung 45 % */
.edv-legende i.balken { width: 36px; height: 8px; background-color: transparent; color: var(--edv-primaer);
  background-image: linear-gradient(to right, currentColor 60%, color-mix(in srgb, currentColor 55%, var(--edv-flaeche)) 60% 85%, var(--edv-flaeche-leise) 85%); }
.edv-legende i.balken--fortschritt { background-image: linear-gradient(to right, currentColor 45%, var(--edv-flaeche-leise) 45%); }
/* mehrspaltig: Einträge laufen spaltenweise (2 Zeilen), linksbündig */
.edv-legende--spalten { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); gap: var(--edv-space-1) var(--edv-space-6); justify-content: start; }

/* ---------- Schaltflächen ---------- */
/* Selektoren mit .edv-body a.edv-btn, damit die Link-Regel (.edv-body a) die Schaltflächenfarbe nicht überschreibt */
.edv-btn, .edv-body a.edv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--edv-space-2);
  padding: 10px var(--edv-space-5); min-height: 44px;
  font: inherit; font-weight: var(--edv-weight-halbfett); font-size: var(--edv-size-text); line-height: 1;
  color: var(--edv-primaer-text); background: var(--edv-primaer);
  border: var(--edv-border) solid var(--edv-primaer); border-radius: var(--edv-radius-klein);
  cursor: pointer; text-decoration: none; transition: background-color var(--edv-dauer-kurz) var(--edv-kurve), border-color var(--edv-dauer-kurz) var(--edv-kurve);
}
.edv-btn:hover, .edv-body a.edv-btn:hover { background: var(--edv-primaer-hover); border-color: var(--edv-primaer-hover); color: var(--edv-primaer-text); }
.edv-btn--sekundaer, .edv-body a.edv-btn--sekundaer { background: transparent; color: var(--edv-primaer); }
.edv-btn--sekundaer:hover, .edv-body a.edv-btn--sekundaer:hover { background: var(--edv-primaer-leise); color: var(--edv-primaer-hover); }
.edv-btn--gross { min-height: 56px; padding-inline: var(--edv-space-6); font-size: var(--edv-size-gross); }
.edv-btn--klein { min-height: 32px; padding: 4px var(--edv-space-3); font-size: var(--edv-size-klein); }
.edv-btn svg { width: 1.1em; height: 1.1em; }

/* ---------- Download-Zeile ---------- */
.edv-download {
  display: flex; align-items: center; gap: var(--edv-space-4);
  padding: var(--edv-space-2) var(--edv-space-2) var(--edv-space-2) var(--edv-space-4);
  background: var(--edv-flaeche); border: var(--edv-border) solid var(--edv-rahmen); border-radius: var(--edv-radius-karte);
}
.edv-download__name { font-family: var(--edv-font-mono); font-size: var(--edv-size-klein); overflow-wrap: anywhere; }
.edv-download__meta { color: var(--edv-text-leise); font-size: var(--edv-size-fussnote); font-variant-numeric: tabular-nums; }
.edv-download .edv-btn { margin-left: auto; flex: none; }

/* ---------- Hinweisboxen ----------
   Grundaufbau (Entscheidung 09.09.2026): links ein exakt 20 px breites, voll in Rollenfarbe eingefärbtes Band
   (ohne Symbol), kein Rahmen – der feine Kartenschatten trennt vom Grund. Fassungen:
   Standard = getönte Fläche in leiser Rollenfarbe · + .edv-hell = weiße Fläche, dunkle Schrift, kräftiges Band
   (auch innerhalb dunkler Umgebungen) · + .edv-hinweis--ton = Schrift in der dunklen Rollenfarbe.
   Die frühere Linien-Variante (4-px-Linie mit Rahmen) ist entfernt; .edv-hinweis--band bleibt als leerer Alias. */
.edv-hinweis {
  --edv-band: 20px;   /* 4-px-Raster; bei 150 % Anzeige = 30 px */
  display: grid; grid-template-columns: var(--edv-band) 1fr; gap: 0; padding: 0;
  background: var(--edv-flaeche); border: 0; border-radius: var(--edv-radius-karte);
  box-shadow: var(--edv-shadow-karte); overflow: hidden;
}
.edv-hinweis > div { padding: var(--edv-space-3) var(--edv-space-4); }
.edv-hinweis::before { content: ""; width: var(--edv-band); align-self: stretch; box-sizing: border-box; background: var(--edv-sekundaer); }
.edv-hinweis strong { display: block; margin-bottom: 2px; }
.edv-hinweis--band { }   /* Alias – Band ist Standard */
/* Standard: getönte Fläche, Schrift in derselben Rollenfarbe wie das Band */
.edv-hinweis--info { background: var(--edv-sekundaer-leise); color: var(--edv-sekundaer); }
.edv-hinweis--info::before { background: var(--edv-sekundaer); }
.edv-hinweis--erfolg { background: var(--edv-erfolg-leise); color: var(--edv-erfolg); }
.edv-hinweis--erfolg::before { background: var(--edv-erfolg); }
.edv-hinweis--warnung { background: var(--edv-warnung-leise); color: var(--edv-warnung); }
.edv-hinweis--warnung::before { background: var(--edv-warnung); }
.edv-hinweis--fehler { background: var(--edv-fehler-leise); color: var(--edv-fehler); }
.edv-hinweis--fehler::before { background: var(--edv-fehler); }
/* helle Fassung: Fläche weiß, Rollenfarbe kräftig, Schrift dunkel (Tokens aus .edv-hell) */
.edv-hinweis.edv-hell { background: var(--edv-flaeche); color: var(--edv-text); }
.edv-hinweis.edv-hell.edv-hinweis--info::before { background: var(--edv-sekundaer); }
.edv-hinweis.edv-hell.edv-hinweis--erfolg::before { background: var(--edv-erfolg); }
.edv-hinweis.edv-hell.edv-hinweis--warnung::before { background: var(--edv-warnung); }
.edv-hinweis.edv-hell.edv-hinweis--fehler::before { background: var(--edv-fehler); }
/* Ton-Variante: Schrift in der dunklen Rollenfarbe (900er-Stufe) statt Textfarbe – kombinierbar mit .edv-hell */
.edv-hinweis--ton.edv-hinweis--info { color: var(--edv-sekundaer-dunkel); }
.edv-hinweis--ton.edv-hinweis--erfolg { color: var(--edv-erfolg-dunkel); }
.edv-hinweis--ton.edv-hinweis--warnung { color: var(--edv-warnung-dunkel); }
.edv-hinweis--ton.edv-hinweis--fehler { color: var(--edv-fehler-dunkel); }

/* ---------- Formulare ----------
   Grundelemente für Webanwendungen und Werkzeuge (Entscheidung 10.09.2026: die Website bekommt vorerst kein Kontaktformular,
   Formulare müssen aber jederzeit möglich sein). Feld = Beschriftung + Eingabe + Hilfe/Fehler; Höhe 44 px wie Schaltflächen,
   Radius Klein, Rahmen 1 px, Fokus in Fokus-Farbe; Zustände --fehler / --erfolg über die Rollenfarben. */
.edv-feld { display: grid; gap: var(--edv-space-1); font-size: var(--edv-size-klein); }
.edv-feld__label { font-weight: var(--edv-weight-halbfett); color: var(--edv-text); }
.edv-feld__label small { font-weight: var(--edv-weight-normal); color: var(--edv-text-leise); }
.edv-feld__hilfe { color: var(--edv-text-leise); font-size: var(--edv-size-fussnote); }
.edv-eingabe, .edv-auswahl, .edv-textbereich {
  box-sizing: border-box; width: 100%; min-height: 44px; padding: 10px var(--edv-space-3);
  font: inherit; font-size: var(--edv-size-text); color: var(--edv-text); background: var(--edv-flaeche);
  border: var(--edv-border) solid var(--edv-rahmen); border-radius: var(--edv-radius-klein);
  transition: border-color var(--edv-dauer-kurz) var(--edv-kurve), box-shadow var(--edv-dauer-kurz) var(--edv-kurve);
}
.edv-eingabe::placeholder, .edv-textbereich::placeholder { color: var(--edv-text-leise); opacity: 1; }
.edv-eingabe:hover, .edv-auswahl:hover, .edv-textbereich:hover { border-color: var(--edv-text-leise); }
.edv-eingabe:focus-visible, .edv-auswahl:focus-visible, .edv-textbereich:focus-visible { outline: none; border-color: var(--edv-primaer); box-shadow: 0 0 0 var(--edv-fokus-breite) var(--edv-fokus); }
.edv-eingabe:disabled, .edv-auswahl:disabled, .edv-textbereich:disabled { background: var(--edv-flaeche-leise); color: var(--edv-text-leise); cursor: not-allowed; }
.edv-textbereich { min-height: 120px; resize: vertical; line-height: var(--edv-line-klein); }
.edv-auswahl { appearance: none; padding-right: var(--edv-space-7); background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%2378738A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--edv-space-3) center; background-size: 16px; }
/* Zustände */
.edv-feld--fehler .edv-eingabe, .edv-feld--fehler .edv-auswahl, .edv-feld--fehler .edv-textbereich { border-color: var(--edv-fehler); }
.edv-feld--fehler .edv-feld__hilfe { color: var(--edv-fehler); }
.edv-feld--erfolg .edv-eingabe, .edv-feld--erfolg .edv-auswahl, .edv-feld--erfolg .edv-textbereich { border-color: var(--edv-erfolg); }
.edv-feld--erfolg .edv-feld__hilfe { color: var(--edv-erfolg); }
/* Kontrollkästchen und Optionsfeld: 18 px, Radius Klein bzw. rund, Häkchen wie das Statusquadrat */
.edv-wahl { display: inline-flex; align-items: center; gap: var(--edv-space-2); font-size: var(--edv-size-klein); cursor: pointer; }
.edv-wahl input { appearance: none; margin: 0; width: 18px; height: 18px; flex: none; border: var(--edv-border) solid var(--edv-rahmen); border-radius: var(--edv-radius-klein); background: var(--edv-flaeche); transition: background-color var(--edv-dauer-kurz) var(--edv-kurve), border-color var(--edv-dauer-kurz) var(--edv-kurve); }
.edv-wahl input[type="radio"] { border-radius: 50%; }
.edv-wahl input:hover { border-color: var(--edv-text-leise); }
.edv-wahl input:focus-visible { outline: none; box-shadow: 0 0 0 var(--edv-fokus-breite) var(--edv-fokus); }
.edv-wahl input:checked { background-color: var(--edv-primaer); border-color: var(--edv-primaer); background-repeat: no-repeat; background-size: 100% 100%; }
.edv-wahl input[type="checkbox"]:checked { background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpolyline points='3.84,8.32 6.88,11.36 12.32,4.96' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.edv-wahl input[type="radio"]:checked { background-image: radial-gradient(circle, var(--edv-primaer-text) 0 3px, transparent 3.5px); }
.edv-wahl input:disabled { background: var(--edv-flaeche-leise); border-color: var(--edv-rahmen); cursor: not-allowed; }
/* Schalter (Ein/Aus): 36 × 20 px, Knopf 16 px */
.edv-schalter { display: inline-flex; align-items: center; gap: var(--edv-space-2); font-size: var(--edv-size-klein); cursor: pointer; }
.edv-schalter input { appearance: none; margin: 0; position: relative; width: 36px; height: 20px; flex: none; border-radius: 10px; background: var(--edv-rahmen); transition: background-color var(--edv-dauer-kurz) var(--edv-kurve); }
.edv-schalter input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--edv-flaeche); box-shadow: 0 1px 2px rgb(40 30 60 / 0.3); transition: transform var(--edv-dauer-kurz) var(--edv-kurve); }
.edv-schalter input:checked { background: var(--edv-primaer); }
.edv-schalter input:checked::after { transform: translateX(16px); }
.edv-schalter input:focus-visible { outline: none; box-shadow: 0 0 0 var(--edv-fokus-breite) var(--edv-fokus); }
.edv-formular { display: grid; gap: var(--edv-space-4); }
.edv-formular__zeile { display: grid; gap: var(--edv-space-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.edv-formular__aktionen { display: flex; gap: var(--edv-space-3); flex-wrap: wrap; justify-content: flex-end; }

/* ---------- Tabelle ---------- */
.edv-tabelle { width: 100%; border-collapse: collapse; font-size: var(--edv-size-klein); }
.edv-tabelle th, .edv-tabelle td { text-align: left; padding: var(--edv-space-2) var(--edv-space-3); border-bottom: 1px solid var(--edv-rahmen); vertical-align: top; }
.edv-tabelle th { background: var(--edv-flaeche-kopf); color: var(--edv-text-titel); font-weight: var(--edv-weight-halbfett); }
.edv-tabelle td.zahl, .edv-tabelle th.zahl { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Fußzeile ---------- */
.edv-fuss { border-top: 1px solid var(--edv-rahmen); color: var(--edv-text-leise); font-size: var(--edv-size-klein); }
.edv-fuss__zeile { display: flex; flex-wrap: wrap; gap: var(--edv-space-4) var(--edv-space-6); align-items: center; padding-block: var(--edv-space-5); }
.edv-fuss a { color: inherit; }
.edv-fuss.edv-dunkel { background: var(--edv-flaeche); border-top-color: var(--edv-rahmen); }

/* ---------- Bewegung ----------
   Zustandswechsel: kurz (120 ms) für Hover/Fokus, mittel (200 ms) für Ein-/Ausblenden, lang (320 ms) für Aufklappen und
   Seitenwechsel; Kurve --edv-kurve (Ende gebremst), --edv-kurve-aus für Verschwinden. Bei reduzierter Bewegung sind alle
   Übergänge und Animationen aus (Motive regeln das selbst). */
.edv-uebergang { transition: opacity var(--edv-dauer-mittel) var(--edv-kurve), transform var(--edv-dauer-mittel) var(--edv-kurve); }
@media (prefers-reduced-motion: reduce) {
  .edv-body *, .edv-body *::before, .edv-body *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* ---------- Umbruchpunkte (Werte = layout.web.umbruch-*: 600 / 900 / 1200 px; Media Queries können keine Custom Properties lesen) ----------
   Unter 600 px: Kopfzeile stapelt (Logo über Navigation), Navigation läuft um, Inhaltsabstand kleiner; Motive dort leiser
   oder aus (Dichte per --edv-fluss-dichte / --edv-netz-dichte senken). */
@media (max-width: 600px) {
  .edv-inhalt { padding-inline: var(--edv-space-4); }
  .edv-kopf__zeile { flex-wrap: wrap; gap: var(--edv-space-3); min-height: 0; padding-block: var(--edv-space-3); }
  .edv-nav { margin-left: 0; width: 100%; }
  .edv-datenfluss, .edv-knotennetz { --edv-fluss-dichte: 1.2; --edv-netz-dichte: 0.35; }
}