/*
    ZENTRALE FARBEINSTELLUNGEN

    Jede sichtbare Farbe kann getrennt für den Light Mode und Dark Mode
    eingestellt werden. Identische Variablennamen in beiden Bereichen sind
    beabsichtigt: Der Browser verwendet automatisch den Wert des aktiven Modus.

    Zum Ändern nur den Farbwert rechts vom Doppelpunkt anpassen.
    Die Variablennamen links bitte nicht verändern.
*/


/* ========================================================================== */
/* 1. LIGHT MODE                                                              */
/* ========================================================================== */
:root:not([data-theme]),
:root[data-theme="light"] {
    /* Gesamte Seite */
    --farbe-seitenhintergrund: rgb(245, 245, 245);            /* Hintergrund der Website */
    --farbe-standardtext: #000000;                 /* Allgemeiner Text */

    /* Piktogramme */
    --farbe-piktogramm: rgb(28, 55, 98);           /* Linien-Piktogramme auf hellen Flächen */
    --farbe-piktogramm-auf-button: #ffffff;         /* Piktogramme auf farbigen Schaltflächen */

    /* Technische Seiten: Steuerungstechnik und Maschinenbau */
    --farbe-technik-text: #1a1a1a;                 /* Text außerhalb der Boxen */
    --farbe-technik-ueberschrift: #2a2a2a;         /* Kapsel-Überschriften */
    --farbe-technik-ueberschrift-rahmen: #2a2a2a;  /* Rahmen der Kapsel-Überschriften */
    --farbe-technik-bereich: #fbfdff;              /* Große Box um einen vollständigen Bereich */
    --farbe-technik-box: #ffffff;                  /* Textboxen */
    --farbe-technik-box-text: #1a1a1a;             /* Text in den Textboxen */
    --farbe-roboter-ueberschrift: rgb(60, 90, 180);/* „Roboter - Typen“ */
    --farbe-technik-funktionskarte: #f4f7fb;        /* Einzelne SCADA-Funktionskarten */
    --farbe-technik-funktionstitel: rgb(28, 55, 98);
    --farbe-technik-funktionsrahmen: rgba(28, 55, 98, 0.14);
    --farbe-technik-funktionsakzent: rgb(28, 55, 98);
    --farbe-technik-listenzeile: rgba(28, 55, 98, 0.055); /* Hintergrund der Leistungszeilen */
    --farbe-technik-listenrahmen: rgba(28, 55, 98, 0.16); /* Dezenter Rahmen der Leistungszeilen */
    --farbe-technik-listenpfeil: rgb(28, 55, 98);         /* Pfeile vor den Leistungen */

    /* Sidebar */
    --farbe-sidebar-hintergrund: #edf1f6;
    --farbe-sidebar-link: #000000;         /* Normaler Menütext */
    --farbe-sidebar-hover: #6fa5fcab;              /* Hover und aktuelle Seite */
    --farbe-sidebar-hover-text: #ffffff;           /* Text beim Hover */
    --farbe-sidebar-aktive-linie: #1e2740d7;         /* 3-px-Linie der aktuellen Seite */
    --farbe-sidebar-trennlinie: #cbd3df;           /* Dünne Linie rechts */
    --farbe-sidebar-footer-text: #000000;
    --farbe-sidebar-footer-linie: #cbd3df;
    --farbe-logo-hintergrund: #edf1f6;             /* Weiße Logo-Box im Light Mode */
    --farbe-sidebar-untermenue-hintergrund: #e3e9f1;
    --farbe-sidebar-untermenue-link: #1a1a1a;
    --farbe-sidebar-untermenue-hover: #cbdcf5;
    --farbe-sidebar-untermenue-hover-text: rgb(28, 55, 98);
    --farbe-sidebar-untermenue-titel-aktiv-text: #000000;

    /* System-/Hell-/Dunkel-Auswahl */
    --farbe-schalter-hintergrund: #ffffff;
    --farbe-schalter-text: rgb(28, 55, 98);
    --farbe-schalter-rahmen: #b8c3d1;
    --farbe-schalter-hover: #dfe6ef;
    --farbe-schalter-hover-rahmen: #8c9aae;
    --farbe-schalter-fokus: rgb(147, 197, 253);
    --farbe-schalter-aktiv: rgb(28, 55, 98);
    --farbe-schalter-aktiv-text: #ffffff;

    /* Team */
    --farbe-team-ueberschrift: #2a2a2a;
    --farbe-team-karte: #ffffff;
    --farbe-team-name: #2a2a2a;
    --farbe-team-rolle: #555555;
    --farbe-team-bildrahmen: #2a2a2a;
    --farbe-team-trennlinie: rgba(42, 42, 42, 0.35);
    --farbe-team-telefon-hintergrund: #ffffff;
    --farbe-team-telefon-text: #2a2a2a;
    --farbe-team-telefon-rahmen: #2a2a2a;
    --farbe-team-telefon-hover: #eeeeee;
    --farbe-team-telefon-fokus: rgba(42, 42, 42, 0.30);
    --farbe-team-email-hintergrund: #2a2a2a;
    --farbe-team-email-text: #ffffff;
    --farbe-team-email-hover: #000000;

    /* Media */
    --farbe-media-box: #ffffff;
    --farbe-media-ueberschrift: #2a2a2a;
    --farbe-media-text: #2a2a2a;
    --farbe-media-vorschau: #222222;
    --farbe-media-play-hintergrund: rgba(98, 129, 229, 0.94);
    --farbe-media-play-hover: rgba(118, 149, 249, 0.98);
    --farbe-media-play-symbol: #ffffff;
    --farbe-media-play-fokus: rgb(80, 105, 201);

    /* Kunden */
    --farbe-kunden-box: #e7e7e7;
    --farbe-kunden-ueberschrift: #2a2a2a;
    --farbe-kunden-text: #2a2a2a;

    /* Produkte */
    --farbe-produkte-box: #ffffff;
    --farbe-produkte-text: #2a2a2a;
    --farbe-produkte-karte: #fbfdff;
    --farbe-produkte-karte-rahmen: rgba(28, 55, 98, 0.18);
    --farbe-produkte-akzent: rgb(28, 55, 98);
    --farbe-produkte-bildplatzhalter: #edf3fa;
    --farbe-produkte-button: rgb(28, 55, 98);
    --farbe-produkte-button-text: #ffffff;
    --farbe-produkte-button-hover: rgb(60, 90, 180);
    --farbe-software-dialog-umgebung: rgba(9, 18, 32, 0.72);

    /* Service-Bereich auf Home */
    --farbe-service-bereich-text: #1a1a1a;
    --farbe-service-ueberschrift: rgb(28, 55, 98);
    --farbe-service-einleitung: #333333;
    --farbe-service-kapsel: rgb(118, 149, 249);
    --farbe-service-kapsel-text: #ffffff;
    --farbe-service-kapsel-hover: rgb(28, 55, 98);
    --farbe-service-beschreibung: #444444;

    /* Über uns */
    --farbe-ueber-uns-box: #ffffff;
    --farbe-ueber-uns-ueberschrift: #2a2a2a;
    --farbe-ueber-uns-text: #2a2a2a;
    --farbe-ueber-uns-karte: #fbfdff;
    --farbe-ueber-uns-faktenkarte: #f2f6fb;         /* Jahreskarten 2016, 2024 und 2025 */
    --farbe-ueber-uns-faktenrahmen: rgba(28, 55, 98, 0.20);
    --farbe-ueber-uns-link: rgb(28, 55, 98);
    --farbe-ueber-uns-link-hover: rgb(28, 55, 98);
    --farbe-ueber-uns-button: #2a2a2a;
    --farbe-ueber-uns-button-text: #ffffff;
    --farbe-ueber-uns-button-hover: #000000;
    --farbe-ueber-uns-bildtext-hintergrund: rgba(28, 55, 98, 0.92);
    --farbe-ueber-uns-bildtext: #ffffff;
    --farbe-ueber-uns-hintergrund-fallback: rgb(28, 55, 98);
    --farbe-ueber-uns-hintergrund-filter-oben: rgba(28, 55, 98, 0.74);
    --farbe-ueber-uns-hintergrund-filter-unten: rgba(10, 35, 70, 0.88);
    --farbe-startseite-hintergrund-filter-oben: rgba(28, 55, 98, 0.24);
    --farbe-startseite-hintergrund-filter-unten: rgba(10, 35, 70, 0.40);
    --farbe-ueber-uns-hero-glas: rgba(255, 255, 255, 0.1);
    --farbe-ueber-uns-hero-glas-rahmen: rgba(255, 255, 255, 0.45);
    --farbe-design-rahmen-dezent: rgba(28, 55, 98, 0.12); /* Dezenter blaugrauer Außenrahmen im Light Mode */
    --farbe-hauptbox-rahmen: rgba(28, 55, 98, 0.32); /* Große Boxen: Steuerungstechnik, Maschinenbau und Über uns */
    --farbe-standort-trennlinie: rgba(28, 55, 98, 0.48); /* Linie über „Unser Standort“ */

    /* Impressum und Datenschutz */
    --farbe-recht-text: #1a1a1a;
    --farbe-recht-ueberschrift: #000000;
    --farbe-recht-hinweis: #444444;

    /* Jobs */
    --farbe-jobs-box: #ffffff;
    --farbe-jobs-ueberschrift: #2a2a2a;
    --farbe-jobs-text: #2a2a2a;
    --farbe-jobs-trennlinie: rgba(42, 42, 42, 0.35);
    --farbe-jobs-button: #2a2a2a;
    --farbe-jobs-button-text: #ffffff;
    --farbe-jobs-button-hover: #000000;

    /* Kontakt */
    --farbe-kontakt-box: #ffffff;
    --farbe-kontakt-ueberschrift: #2a2a2a;
    --farbe-kontakt-text: #2a2a2a;
    --farbe-kontakt-button: #2a2a2a;
    --farbe-kontakt-button-text: #ffffff;
    --farbe-kontakt-button-hover: #000000;
    --farbe-kontakt-aktion-button-text: rgb(28, 55, 98); /* Text und Symbol auf dem weißen Kontaktbutton */

    /* Große und kleine Slideshows */
    --farbe-slideshow-pfeil: #ffffff;
    --farbe-slideshow-indikator: #ffffff;
    --farbe-slideshow-fokus: #ffffff;
}


/* ========================================================================== */
/* 2. DARK MODE                                                               */
/* ========================================================================== */
:root[data-theme="dark"] {
    /* Gesamte Seite */
    --farbe-seitenhintergrund: #2b2b2b;
    --farbe-standardtext: #ffffff;

    /* Piktogramme */
    --farbe-piktogramm: rgb(147, 197, 253);
    --farbe-piktogramm-auf-button: #ffffff;

    /* Technische Seiten: Steuerungstechnik und Maschinenbau */
    --farbe-technik-text: #ffffff;
    --farbe-technik-ueberschrift: #ffffff;
    --farbe-technik-ueberschrift-rahmen: #ffffff;
    --farbe-technik-bereich: #1e1e1e;
    --farbe-technik-box: #333333;
    --farbe-technik-box-text: #ffffff;
    --farbe-roboter-ueberschrift: #3b83f6;
    --farbe-technik-funktionskarte: #292929;
    --farbe-technik-funktionstitel: rgb(147, 197, 253);
    --farbe-technik-funktionsrahmen: rgba(147, 197, 253, 0.16);
    --farbe-technik-funktionsakzent: rgb(28, 55, 98);
    --farbe-technik-listenzeile: rgba(147, 197, 253, 0.075);
    --farbe-technik-listenrahmen: rgba(147, 197, 253, 0.22);
    --farbe-technik-listenpfeil: rgb(147, 197, 253);

    /* Sidebar */
    --farbe-sidebar-hintergrund: #1e1e1e;
    --farbe-sidebar-link: #ffffff;
    --farbe-sidebar-hover: #1e2740;
    --farbe-sidebar-hover-text: #ffffff;
    --farbe-sidebar-aktive-linie: #3b83f6;
    --farbe-sidebar-trennlinie: #353535;
    --farbe-sidebar-footer-text: #ffffff;
    --farbe-sidebar-footer-linie: #353535;
    --farbe-logo-hintergrund: rgb(28, 55, 98);
    --farbe-sidebar-untermenue-hintergrund: #181818;
    --farbe-sidebar-untermenue-link: #ffffff;
    --farbe-sidebar-untermenue-hover: #263449;
    --farbe-sidebar-untermenue-hover-text: #ffffff;
    --farbe-sidebar-untermenue-titel-aktiv-text: #ffffff;

    /* System-/Hell-/Dunkel-Auswahl */
    --farbe-schalter-hintergrund: rgba(255, 255, 255, 0.08);
    --farbe-schalter-text: #ffffff;
    --farbe-schalter-rahmen: rgba(255, 255, 255, 0.28);
    --farbe-schalter-hover: rgba(255, 255, 255, 0.15);
    --farbe-schalter-hover-rahmen: rgba(255, 255, 255, 0.50);
    --farbe-schalter-fokus: rgb(147, 197, 253);
    --farbe-schalter-aktiv: rgb(28, 55, 98);
    --farbe-schalter-aktiv-text: #ffffff;

    /* Team */
    --farbe-team-ueberschrift: #ffffff;
    --farbe-team-karte: #333333;
    --farbe-team-name: #ffffff;
    --farbe-team-rolle: #ffffff;
    --farbe-team-bildrahmen: #ffffff;
    --farbe-team-trennlinie: rgba(229, 234, 242, 0.35);
    --farbe-team-telefon-hintergrund: #222222;
    --farbe-team-telefon-text: #ffffff;
    --farbe-team-telefon-rahmen: #ffffff;
    --farbe-team-telefon-hover: #263449;
    --farbe-team-telefon-fokus: rgba(42, 42, 42, 0.30);
    --farbe-team-email-hintergrund: #2a2a2a;
    --farbe-team-email-text: #ffffff;
    --farbe-team-email-hover: #000000;

    /* Media */
    --farbe-media-box: #333333;
    --farbe-media-ueberschrift: #ffffff;
    --farbe-media-text: #ffffff;
    --farbe-media-vorschau: #222222;
    --farbe-media-play-hintergrund: rgba(70, 75, 94, 0.94);
    --farbe-media-play-hover: rgba(118, 149, 249, 0.98);
    --farbe-media-play-symbol: #ffffff;
    --farbe-media-play-fokus: rgb(80, 105, 201);

    /* Kunden */
    --farbe-kunden-box: #333333;
    --farbe-kunden-ueberschrift: #ffffff;
    --farbe-kunden-text: #ffffff;

    /* Produkte */
    --farbe-produkte-box: #333333;
    --farbe-produkte-text: #ffffff;
    --farbe-produkte-karte: #292929;
    --farbe-produkte-karte-rahmen: rgba(147, 197, 253, 0.24);
    --farbe-produkte-akzent: rgb(147, 197, 253);
    --farbe-produkte-bildplatzhalter: #202830;
    --farbe-produkte-button: rgb(28, 55, 98);
    --farbe-produkte-button-text: #ffffff;
    --farbe-produkte-button-hover: rgb(118, 149, 249);
    --farbe-software-dialog-umgebung: rgba(5, 10, 18, 0.78);

    /* Service-Bereich auf Home */
    --farbe-service-bereich-text: #ffffff;
    --farbe-service-ueberschrift: rgb(147, 197, 253);
    --farbe-service-einleitung: #ffffff;
    --farbe-service-kapsel: rgb(28, 55, 98);
    --farbe-service-kapsel-text: #ffffff;
    --farbe-service-kapsel-hover: rgb(118, 149, 249);
    --farbe-service-beschreibung: #ffffff;

    /* Über uns */
    --farbe-ueber-uns-box: #333333;
    --farbe-ueber-uns-ueberschrift: #ffffff;
    --farbe-ueber-uns-text: #ffffff;
    --farbe-ueber-uns-karte: #292929;
    --farbe-ueber-uns-faktenkarte: #333333;
    --farbe-ueber-uns-faktenrahmen: rgba(147, 197, 253, 0.24);
    --farbe-ueber-uns-link: rgb(147, 197, 253);
    --farbe-ueber-uns-link-hover: rgb(28, 55, 98);
    --farbe-ueber-uns-button: rgb(28, 55, 98);
    --farbe-ueber-uns-button-text: #ffffff;
    --farbe-ueber-uns-button-hover: rgb(118, 149, 249);
    --farbe-ueber-uns-bildtext-hintergrund: rgba(28, 55, 98, 0.92);
    --farbe-ueber-uns-bildtext: #ffffff;
    --farbe-ueber-uns-hintergrund-fallback: #101820;
    --farbe-ueber-uns-hintergrund-filter-oben: rgba(7, 20, 39, 0.84);
    --farbe-ueber-uns-hintergrund-filter-unten: rgba(3, 10, 21, 0.94);
    --farbe-startseite-hintergrund-filter-oben: rgba(7, 20, 39, 0.30);
    --farbe-startseite-hintergrund-filter-unten: rgba(3, 10, 21, 0.46);
    --farbe-ueber-uns-hero-glas: rgba(255, 255, 255, 0.08);
    --farbe-ueber-uns-hero-glas-rahmen: rgba(255, 255, 255, 0.35);
    --farbe-hauptbox-rahmen: rgba(118, 149, 249, 0.38); /* Große Boxen im Dark Mode */
    --farbe-standort-trennlinie: rgba(147, 197, 253, 0.58); /* Sichtbare Standortlinie im Dark Mode */
    /* Impressum und Datenschutz */
    --farbe-recht-text: #ffffff;
    --farbe-recht-ueberschrift: #ffffff;
    --farbe-recht-hinweis: #ffffff;

    /* Jobs */
    --farbe-jobs-box: #333333;
    --farbe-jobs-ueberschrift: #ffffff;
    --farbe-jobs-text: #ffffff;
    --farbe-jobs-trennlinie: rgba(229, 234, 242, 0.35);
    --farbe-jobs-button: #2a2a2a;
    --farbe-jobs-button-text: #ffffff;
    --farbe-jobs-button-hover: #000000;

    /* Kontakt */
    --farbe-kontakt-box: #333333;
    --farbe-kontakt-ueberschrift: #ffffff;
    --farbe-kontakt-text: #ffffff;
    --farbe-kontakt-button: #2a2a2a;
    --farbe-kontakt-button-text: #ffffff;
    --farbe-kontakt-button-hover: #000000;
    --farbe-kontakt-aktion-button-text: rgb(28, 55, 98); /* Dunkelblau bleibt auf Weiß gut lesbar */

    /* Große und kleine Slideshows */
    --farbe-slideshow-pfeil: #ffffff;
    --farbe-slideshow-indikator: #ffffff;
    --farbe-slideshow-fokus: #ffffff;
}


/* ========================================================================== */
/* 3. MOBIL / TABLET                                                          */
/* Diese Werte gelten nur, wenn die feste Sidebar zum mobilen Menü wird.       */
/* ========================================================================== */
@media (max-width: 1024px) {
    :root:not([data-theme]),
    :root[data-theme="light"] {
        --farbe-mobil-menueknopf: rgb(28, 55, 98);
        --farbe-mobil-menuezeichen: #ffffff;
        --farbe-mobil-aktiver-link: #ffffff;
        --farbe-mobil-fokus: #ffffff;
        --farbe-mobil-hintergrund-abdunklung: rgba(0, 0, 0, 0.48);
    }

    :root[data-theme="dark"] {
        --farbe-mobil-menueknopf: #1e1e1e;
        --farbe-mobil-menuezeichen: #ffffff;
        --farbe-mobil-aktiver-link: #ffffff;
        --farbe-mobil-fokus: #ffffff;
        --farbe-mobil-hintergrund-abdunklung: rgba(0, 0, 0, 0.48);
    }
}


/* ========================================================================== */
/* 4. ALLGEMEIN: RAHMEN, SCHATTEN UND KONTAKTSTATUS                           */
/* Diese Werte dürfen für beide Modi gemeinsam bleiben.                       */
/* ========================================================================== */
:root {
    /* Rahmen */
    --rahmen-box-hell-08: rgba(0, 0, 0, 0.08);
    --rahmen-box-hell-10: rgba(0, 0, 0, 0.10);
    --rahmen-box-dunkel-12: rgba(255, 255, 255, 0.12);
    --rahmen-play-button: rgba(255, 255, 255, 0.90);
    --rahmen-transparent: transparent;

    /* Schatten */
    --schatten-schwarz-08: rgba(0, 0, 0, 0.08);
    --schatten-schwarz-10: rgba(0, 0, 0, 0.10);
    --schatten-schwarz-12: rgba(0, 0, 0, 0.12);
    --schatten-schwarz-18: rgba(0, 0, 0, 0.18);
    --schatten-schwarz-25: rgba(0, 0, 0, 0.25);
    --schatten-schwarz-28: rgba(0, 0, 0, 0.28);
    --schatten-schwarz-35: rgba(0, 0, 0, 0.35);
    --schatten-schwarz-70: rgba(0, 0, 0, 0.70);
    --schatten-schwarz-75: rgba(0, 0, 0, 0.75);
    --schatten-logo-blau-40: rgba(60, 90, 180, 0.40);
    --schatten-service-25: rgba(98, 129, 229, 0.25);
    --schatten-service-35: rgba(98, 129, 229, 0.35);

}