/*
 * ERZEUGT aus themes/kleins/tokens/tokens.json, nicht von Hand ändern.
 * Neu erzeugen: make design-tokens
 */

:root {
    /* grund.farbe */
    --grund-farbe-gruen-50: #f2f8e8;
    --grund-farbe-gruen-400: #81ba1c;
    --grund-farbe-gruen-600: #009237; /* Hausgrün aus dem Logo */
    --grund-farbe-gruen-25: #f6f9f3;
    --grund-farbe-gruen-700: #007a2e; /* Dunkles Hausgrün: weiße Schrift erreicht 5,5:1 (WCAG AA) */
    --grund-farbe-gruen-800: #00612a;
    --grund-farbe-rot-500: #e3000f;
    --grund-farbe-rot-600: #d3011c; /* Knopf-Rot */
    --grund-farbe-rot-900: #79000f;
    --grund-farbe-grau-200: #e8e8e8;
    --grund-farbe-grau-500: #9a9a9a;
    --grund-farbe-grau-900: #3e3d40;
    --grund-farbe-grau-50: #fafbf9;
    --grund-farbe-grau-75: #f4f6f2;
    --grund-farbe-grau-100: #eeeeee;
    --grund-farbe-grau-150: #e6e6e6;
    --grund-farbe-grau-250: #d5d5d5;
    --grund-farbe-grau-600: #777777;
    --grund-farbe-grau-650: #666666;
    --grund-farbe-grau-700: #555555;
    --grund-farbe-schwarz: #000000;
    --grund-farbe-weiss: #ffffff;
    --grund-farbe-erfolg-50: #f2f8ee;
    --grund-farbe-fehler-50: #fbeeec;
    --grund-farbe-fehler-600: #c0392b;
    --grund-farbe-status-bezahlt: #2e7d32;
    --grund-farbe-status-bezahlt-flaeche: #e3f2e3;
    --grund-farbe-status-offen-flaeche: #fdecea;
    --grund-farbe-status-teilbezahlt: #b07d10;
    --grund-farbe-status-teilbezahlt-flaeche: #fff4d6;

    /* grund.schatten */
    --grund-schatten-gross: 0 0 50px rgba(0, 0, 0, 0.4);
    --grund-schatten-mittel: 0px 0px 20px rgba(0, 0, 0, 0.4);
    --grund-schatten-klein: 0px 0px 15px rgba(0, 0, 0, 0.4);
    --grund-schatten-karte: 0 6px 24px rgba(0, 0, 0, .12);
    --grund-schatten-karte-hover: 0 10px 32px rgba(0, 0, 0, .18);

    /* grund.radius */
    --grund-radius-blatt: 0; /* Ecke unten rechts, seit 29.10.2026 eckig, vorher als Blatt gerundet (40px) */
    --grund-radius-lasche: 0 18px 0 0; /* Blatt-Form nach oben gespiegelt: Ecke oben rechts gerundet, für Reiter */
    --grund-radius-blatt-doppel: 0; /* Seit 29.10.2026 eckig, vorher oben rechts und unten links gerundet (50px) */
    --grund-radius-blatt-doppel-gespiegelt: 0; /* Seit 29.10.2026 eckig, vorher oben links und unten rechts gerundet (50px) */
    --grund-radius-knopf: 25px;
    --grund-radius-feld: 0; /* Seit 29.10.2026 eckig, vorher unten rechts gerundet (12px) */
    --grund-radius-plakette: 0; /* Seit 29.10.2026 eckig, vorher unten rechts gerundet (10px) */
    --grund-radius-kreis: 50%;

    /* grund.schrift */
    --grund-schrift-familie-open-sans: "Open Sans", sans-serif; /* Hausschrift, lokal unter themes/kleins/fonts */
    --grund-schrift-familie-icons: FontAwesome;
    --grund-schrift-familie-icons-solid: "FontAwesome Solid";
    --grund-schrift-familie-marken: "Font Awesome 5 Brands";
    --grund-schrift-gewicht-300: 300;
    --grund-schrift-gewicht-400: 400;
    --grund-schrift-gewicht-600: 600;
    --grund-schrift-gewicht-700: 700;
    --grund-schrift-groesse-klein: 0.85rem;
    --grund-schrift-groesse-basis: 1rem;
    --grund-schrift-groesse-mittel: 1.3rem;
    --grund-schrift-groesse-gross: 1.5rem;
    --grund-schrift-groesse-titel: 2rem;

    /* grund.breite */
    --grund-breite-inhalt: 75rem; /* Breite des Foundation-Rasters */
    --grund-breite-mittel: 40em; /* Breakpoint medium aus Foundation */
    --grund-breite-gross: 64em; /* Breakpoint large aus Foundation */
    --grund-breite-tablet: 768px; /* Breakpoint des Contao-Themes für Handy und Tablet */
    --grund-breite-handy: 639px; /* Breakpoint des Contao-Themes: bis hier einspaltig */
    --grund-breite-schmal: 640px; /* Breakpoint des Kundenportals */

    /* grund.abstand */
    --grund-abstand-1: 0.5rem;
    --grund-abstand-2: 1rem;
    --grund-abstand-3: 1.5rem;
    --grund-abstand-4: 2.5rem; /* 40px, Innenabstand der Kästen im Contao-Theme */
    --grund-abstand-5: 4rem;

    /* grund.linie */
    --grund-linie-duenn: 1px;
    --grund-linie-kraeftig: 3px;
    --grund-linie-mittel: 2px;

    /* bedeutung.farbe */
    --farbe-marke: var(--grund-farbe-gruen-600);
    --farbe-marke-hell: var(--grund-farbe-gruen-400);
    --farbe-marke-flaeche: var(--grund-farbe-gruen-50); /* Helle Fläche in Markenfarbe */
    --farbe-knopf-marke: var(--grund-farbe-gruen-700); /* Grüner Knopf mit weißer Schrift; das Hausgrün erreicht mit Weiß nur 4,1:1 */
    --farbe-knopf-marke-hover: var(--grund-farbe-gruen-800);
    --farbe-marke-schrift: var(--grund-farbe-gruen-700); /* Grüne Schrift in kleiner Größe auf Weiß (WCAG AA); das Hausgrün reicht nur für große Schrift */
    --farbe-signal: var(--grund-farbe-rot-500); /* Hervorhebung in Rot */
    --farbe-aktion: var(--grund-farbe-rot-600); /* Hauptknopf */
    --farbe-aktion-hover: var(--grund-farbe-schwarz);
    --farbe-link-hover: var(--grund-farbe-rot-900);
    --farbe-text: var(--grund-farbe-schwarz);
    --farbe-kontrast: var(--grund-farbe-schwarz);
    --farbe-grund: var(--grund-farbe-weiss); /* Seitenhintergrund und Text auf dunklen Flächen */
    --farbe-grau-dunkel: var(--grund-farbe-grau-900);
    --farbe-grau: var(--grund-farbe-grau-500);
    --farbe-grau-hell: var(--grund-farbe-grau-200);
    --farbe-slider-knopf: var(--grund-farbe-gruen-600);
    --farbe-slider-knopf-hover: var(--grund-farbe-gruen-400);
    --farbe-erfolg-flaeche: var(--grund-farbe-erfolg-50); /* Hinweis nach erfolgreicher Aktion */
    --farbe-fehler: var(--grund-farbe-fehler-600);
    --farbe-fehler-flaeche: var(--grund-farbe-fehler-50);
    --farbe-flaeche-hell: var(--grund-farbe-grau-75); /* Reiter und ruhige Flächen */
    --farbe-flaeche-leise: var(--grund-farbe-grau-50); /* Feldgruppen */
    --farbe-flaeche-zeile: var(--grund-farbe-gruen-25); /* Tabellenzeile beim Überfahren */
    --farbe-rahmen: var(--grund-farbe-grau-250); /* Rahmen von Eingabefeldern */
    --farbe-rahmen-leise: var(--grund-farbe-grau-150);
    --farbe-trenner: var(--grund-farbe-grau-100); /* Linien zwischen Zeilen */
    --farbe-text-leise: var(--grund-farbe-grau-650);
    --farbe-text-label: var(--grund-farbe-grau-700);
    --farbe-text-klein: var(--grund-farbe-grau-600); /* Kleingedrucktes */
    --farbe-status-bezahlt: var(--grund-farbe-status-bezahlt);
    --farbe-status-bezahlt-flaeche: var(--grund-farbe-status-bezahlt-flaeche);
    --farbe-status-offen-flaeche: var(--grund-farbe-status-offen-flaeche);
    --farbe-status-teilbezahlt: var(--grund-farbe-status-teilbezahlt);
    --farbe-status-teilbezahlt-flaeche: var(--grund-farbe-status-teilbezahlt-flaeche);

    /* bedeutung.schatten */
    --schatten-gross: var(--grund-schatten-gross);
    --schatten-mittel: var(--grund-schatten-mittel);
    --schatten-klein: var(--grund-schatten-klein);
    --schatten-karte: var(--grund-schatten-karte);
    --schatten-karte-hover: var(--grund-schatten-karte-hover);

    /* bedeutung.radius */
    --radius-blatt: var(--grund-radius-blatt); /* Karten, Kästen, Bilder */
    --radius-lasche: var(--grund-radius-lasche); /* Reiter */
    --radius-blatt-doppel: var(--grund-radius-blatt-doppel);
    --radius-blatt-doppel-gespiegelt: var(--grund-radius-blatt-doppel-gespiegelt);
    --radius-knopf: var(--grund-radius-knopf); /* Knöpfe, Pillenform */
    --radius-feld: var(--grund-radius-feld);
    --radius-plakette: var(--grund-radius-plakette);
    --radius-kreis: var(--grund-radius-kreis);

    /* bedeutung.schrift */
    --schrift-basis: var(--grund-schrift-familie-open-sans);
    --schrift-icons: var(--grund-schrift-familie-icons);
    --schrift-icons-solid: var(--grund-schrift-familie-icons-solid);
    --schrift-marken: var(--grund-schrift-familie-marken);

    /* bedeutung.gewicht */
    --gewicht-leicht: var(--grund-schrift-gewicht-300);
    --gewicht-normal: var(--grund-schrift-gewicht-400);
    --gewicht-halbfett: var(--grund-schrift-gewicht-600);
    --gewicht-fett: var(--grund-schrift-gewicht-700);

    /* bedeutung.breite */
    --breite-inhalt: var(--grund-breite-inhalt);
    --breite-mittel: var(--grund-breite-mittel);
    --breite-gross: var(--grund-breite-gross);
    --breite-tablet: var(--grund-breite-tablet);
    --breite-handy: var(--grund-breite-handy);
    --breite-schmal: var(--grund-breite-schmal);

    /* bedeutung.abstand */
    --abstand-xs: var(--grund-abstand-1);
    --abstand-s: var(--grund-abstand-2);
    --abstand-m: var(--grund-abstand-3);
    --abstand-l: var(--grund-abstand-4);
    --abstand-xl: var(--grund-abstand-5);

    /* bedeutung.text */
    --text-klein: var(--grund-schrift-groesse-klein);
    --text-basis: var(--grund-schrift-groesse-basis);
    --text-mittel: var(--grund-schrift-groesse-mittel);
    --text-gross: var(--grund-schrift-groesse-gross);
    --text-titel: var(--grund-schrift-groesse-titel);

    /* bedeutung.linie */
    --linie-duenn: var(--grund-linie-duenn);
    --linie-kraeftig: var(--grund-linie-kraeftig);
    --linie-mittel: var(--grund-linie-mittel);

    /* baustein.knopf */
    --baustein-knopf-innen: 15px 25px;
    --baustein-knopf-innen-handy: 10px 20px; /* unter --breite-tablet */
    --baustein-knopf-innen-klein: 7px 12px;
    --baustein-knopf-abstand-unten: 20px;
    --baustein-knopf-schrift: 1rem;
    --baustein-knopf-schrift-klein: 0.8rem;
    --baustein-knopf-pfeil-abstand: 10px;
    --baustein-knopf-zoom: 1.03; /* Vergrößerung beim Überfahren */
    --baustein-knopf-dauer: 200ms;

    /* baustein.hinweis */
    --baustein-hinweis-innen: 18px 24px;
    --baustein-hinweis-aussen: 24px 0;
    --baustein-hinweis-linie: 5px;

    /* baustein.kontakt */
    --baustein-kontakt-innen: 20px;
    --baustein-kontakt-abstand: 20px;
    --baustein-kontakt-oben: 30px;
    --baustein-kontakt-bild: 120px;
    --baustein-kontakt-titel: 1.3rem;
    --baustein-kontakt-titel-unten: 10px;
    --baustein-kontakt-zeile-unten: 5px;

    /* baustein.katalog */
    --baustein-katalog-spalte: 12rem;
    --baustein-katalog-probe: 4rem;

    /* baustein.karte */
    --baustein-karte-innen: 28px 32px;
    --baustein-karte-innen-schmal: 20px 22px;
    --baustein-karte-unten: 30px;
    --baustein-karte-titel: 1.35rem;
    --baustein-karte-titel-unten: 10px;
    --baustein-karte-dauer: 250ms;
    --baustein-karte-heben: -2px;
    --baustein-karte-schmal: 560px;
    --baustein-karte-oben: 30px;

    /* baustein.raster */
    --baustein-raster-spalte: 320px;
    --baustein-raster-abstand: 28px;
    --baustein-raster-aussen: 28px 0 40px;

    /* baustein.reiter */
    --baustein-reiter-oben: 12px;
    --baustein-reiter-seite: 24px;
    --baustein-reiter-unten: 10px;
    --baustein-reiter-abstand: 0;
    --baustein-reiter-dauer: 200ms;
    --baustein-reiter-zahl: 22px;
    --baustein-reiter-zahl-schrift: 0.75rem;
    --baustein-reiter-zahl-links: 4px;
    --baustein-reiter-zahl-lage: 1px;
    --baustein-reiter-aktiv-hoeher: 3px; /* So viel höher wächst der aktive Reiter aus der Linie */
    --baustein-reiter-ueberlappung: 16px; /* So weit schiebt sich der nächste Reiter unter den vorigen */
    --baustein-reiter-schatten: 7px 0 12px -5px rgba(0, 0, 0, 0.35); /* Schatten rechts, fällt auf den Reiter dahinter */

    /* baustein.kopfleiste */
    --baustein-kopfleiste-abstand: 10px;
    --baustein-kopfleiste-unten: 28px;
    --baustein-kopfleiste-nutzer-schrift: 0.9rem;
    --baustein-kopfleiste-nutzer-abstand: 6px 18px;

    /* baustein.symbollink */
    --baustein-symbollink-abstand: 6px;

    /* baustein.feld */
    --baustein-feld-innen: 10px 14px;
    --baustein-feld-unten: 16px;
    --baustein-feld-label-schrift: 0.85rem;
    --baustein-feld-label-unten: 5px;
    --baustein-feld-dauer: 200ms;

    /* baustein.feldgruppe */
    --baustein-feldgruppe-innen: 18px 22px 8px;
    --baustein-feldgruppe-unten: 20px;
    --baustein-feldgruppe-legende-innen: 0 10px;

    /* baustein.tabelle */
    --baustein-tabelle-aussen: 20px 0 30px;
    --baustein-tabelle-kopf-innen: 14px 18px;
    --baustein-tabelle-zelle-innen: 12px 18px;
    --baustein-tabelle-knapp-innen: 8px 10px;

    /* baustein.liste */
    --baustein-liste-zeile-innen: 10px 0;

    /* baustein.plakette */
    --baustein-plakette-innen: 4px 14px;
    --baustein-plakette-schrift: 0.78rem;
    --baustein-plakette-sperrung: 0.05em;
    --baustein-plakette-unten: 10px;

    /* baustein.kleingedruckt */
    --baustein-kleingedruckt-schrift: 0.85rem;

    /* baustein.aktionen */
    --baustein-aktionen-oben: 30px;

    /* baustein.seitentitel */
    --baustein-seitentitel-unten: 20px;

    /* baustein.formular */
    --baustein-formular-schmal: 480px;

    /* baustein.metazeile */
    --baustein-metazeile-oben: -6px;

    /* baustein.spalten */
    --baustein-spalten-anzahl: 12; /* Spalten des Rasters, wie Foundation */
    --baustein-spalten-rinne-klein: .625rem; /* halber Spaltenabstand unter --breite-mittel */
    --baustein-spalten-rinne-gross: .9375rem; /* halber Spaltenabstand ab --breite-mittel */
    --baustein-spalten-ohne: 0rem; /* kein Spaltenabstand */
}