/*
    Lokal gespeicherte Schriftart Montserrat.
    Die Datei liegt im Unterordner CSS/fonts und wird nicht von Google geladen.
*/
@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/Montserrat-Variable-Latin.woff2") format("woff2");
}

/* Grundlegende Einstellungen */
html,
body {
    overflow-x: hidden;
}

html {
    background-color: var(--farbe-seitenhintergrund);
}

/* Bereichslinks aus der Sidebar bewegen die Seite ruhig zum gewünschten Abschnitt. */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

body {
    color: var(--farbe-standardtext);
}

:root {
    --sidebar-width: max(220px, 15vw);
    --sidebar-half-width: max(110px, 7.5vw);
}

/* Alle Farben der Website werden übersichtlich in farben.css verwaltet. */

* {
    box-sizing: border-box;
}


/* Abschnitts-Container für Überschrift */
.container {
    width: calc(100% - 15%);
    /* Platz für Sidebar */
    margin-left: 12.4%;
    /* optische Ausrichtung */
    padding: 40px 50px;
    font-family: "Montserrat", sans-serif;
    color: var(--farbe-technik-text);
}


/* Abschnittsüberschrift (Capsule-Design) */
.container h1,
.container h2 {
    font-size: 2.3rem;
    font-weight: 800;
    /* Textfarbe der runden Abschnittsüberschriften */
    color: var(--farbe-technik-ueberschrift);
    letter-spacing: 0.3px;
    line-height: 1.2;

    display: block;
    width: 620px;
    /* Einheitliche Breite */
    padding: 12px 0;
    /* Höhe */
    margin: 60px auto 25px;
    /* zentriert */
    /* Rahmenfarbe der runden Abschnittsüberschriften */
    border: 2px solid var(--farbe-technik-ueberschrift-rahmen);
    border-radius: 20px;
    /* Capsule-Form */
    text-align: center;
}


/* Abstand zwischen Abschnitten */
.space {
    margin-top: 250px;
}


/* Zweispaltiges Layout (Text links / Bild rechts) */
.row {
    width: calc(100% - var(--sidebar-width));
    margin-left: var(--sidebar-width);
    /* Ausrichtung mit Sidebar */
    display: flex;
    gap: 40px;
    align-items: flex-start;
    margin-top: 20px;
    margin-bottom: 20px;
    padding-right: clamp(20px, 2vw, 40px);
}


/* Textbox (Box 1) */
.box-1 {
    flex: 1;
    /* Hintergrund der Textboxen bei Steuerungstechnik und Maschinenbau */
    background: var(--farbe-technik-box);
    color: var(--farbe-technik-box-text);
    padding: 28px 32px;
    border-radius: 14px;
    max-width: 900px;
    border: 1px solid var(--rahmen-box-hell-08);
    box-shadow: 0 12px 28px var(--schatten-schwarz-12);
    line-height: 1.6;
    font-size: 1rem;
    margin-left: 50px;
    font-family: "Montserrat", sans-serif;
}

.box-1 p {
    margin-bottom: 14px;
}

.box-1 p:last-child {
    margin-bottom: 0;
}

/* Überschriften und Leistungslisten innerhalb der technischen Textboxen. */
.technik-texttitel {
    margin: 0 0 18px;
    padding-bottom: 12px;
    color: var(--farbe-technik-funktionstitel);
    font-size: 1.22rem;
    font-weight: 800;
    line-height: 1.35;
    border-bottom: 1px solid var(--farbe-technik-listenrahmen);
}

.technik-listeneinleitung {
    margin-top: 20px;
    margin-bottom: 10px;
    color: var(--farbe-technik-funktionstitel);
    font-weight: 800;
}

.technik-textliste {
    display: grid;
    gap: 8px;
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
}

.technik-textliste li {
    position: relative;
    min-height: 44px;
    padding: 9px 14px 9px 40px;
    display: flex;
    align-items: center;
    background: var(--farbe-technik-listenzeile);
    border: 1px solid var(--farbe-technik-listenrahmen);
    border-radius: 9px;
    line-height: 1.45;
}

.technik-textliste li::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 16px;
    width: 8px;
    height: 8px;
    border-top: 3px solid var(--farbe-technik-listenpfeil);
    border-right: 3px solid var(--farbe-technik-listenpfeil);
    transform: translateY(-50%) rotate(45deg);
}

.technik-produkte {
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid var(--farbe-technik-funktionsrahmen);
}

/* Einheitlicher Kartenstil für alle normalen Textboxen der technischen Seiten. */
body.technical-page .box-1:not(.box-1--funktionsraster),
body.technical-page .box-3 {
    background: var(--farbe-technik-funktionskarte);
    border: 1px solid var(--farbe-technik-funktionsrahmen);
    border-top: 3px solid var(--farbe-technik-funktionsakzent);
    border-radius: 12px;
    box-shadow: 0 8px 20px var(--schatten-schwarz-08);
}

/* Funktionsübersicht für Leit- und SCADA-Systeme. */
body.technical-page .box-1.box-1--funktionsraster {
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.technik-funktionsliste {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.technik-funktionsliste li {
    position: relative;
    overflow: hidden;
    padding: 22px 20px 20px;
    background: var(--farbe-technik-funktionskarte);
    border: 1px solid var(--farbe-technik-funktionsrahmen);
    border-radius: 12px;
    box-shadow: 0 8px 20px var(--schatten-schwarz-08);
}

/* Die fünfte Funktion schließt das Raster sauber über die gesamte Breite ab. */
.technik-funktionsliste li:last-child {
    grid-column: 1 / -1;
}

.technik-funktionsliste li::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    background: var(--farbe-technik-funktionsakzent);
}

.technik-funktionsliste strong,
.technik-funktionsliste span {
    display: block;
}

.technik-funktionsliste strong {
    margin-bottom: 10px;
    color: var(--farbe-technik-funktionstitel);
    font-size: 1.03rem;
    font-weight: 800;
    line-height: 1.35;
}

.technik-funktionsliste span {
    line-height: 1.65;
}

/* Kurze Vorteile unter dem Text zu Umbauten und Modernisierungen. */
.technik-vorteile {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

.technik-vorteile li {
    padding: 7px 13px;
    border: 1px solid var(--farbe-technik-ueberschrift-rahmen);
    border-radius: 999px;
    font-weight: 600;
}


/* Bild-/Slideshow-Box (Box 2) */
.box-2 {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 20px;
    position: relative;
    width: 100%;
    height: 450px;
    overflow: hidden;
}

/* Spezielle Höhe für Roboter-Slideshow */
.box-2_ro {
    height: 477px;
}

.box-2_ro .mini_slide {
    max-width: none;
}


/* Slideshow-Bilder */
.mini_slide {
    width: 100%;
    max-width: 600px;
    border-radius: 14px;
    box-shadow: 0 12px 28px var(--schatten-schwarz-12);
}


/* Bildformatierung innerhalb der Slideshow */
.box-2 img {
    position: absolute;
    /* übereinander gestapelt */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Bild füllt Box */
    opacity: 0;
    /* unsichtbar bis aktiv */
    transition: opacity 1s;
    /* Fade-Effekt */
}

/* Aktiv angezeigtes Bild */
.box-2 img.active {
    opacity: 1;
}


/* Zusätzliche Textbox für Robotertypen (Box 3) */
.box-3 {
    flex: 1;
    background: var(--farbe-technik-box);
    color: var(--farbe-technik-box-text);
    padding: 28px 32px;
    border-radius: 14px;
    max-width: 900px;
    border: 1px solid var(--rahmen-box-hell-08);
    box-shadow: 0 12px 28px var(--schatten-schwarz-12);
    line-height: 1.6;
    font-size: 1rem;
    margin-left: 50px;
    margin-right: 100px;
    margin-top: 12px;
    font-family: "Montserrat", sans-serif;
}


/* Logozeile in Box 3 */
.box-3 p:last-child {
    text-align: center;
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 1.8vw, 28px);
}

/* Jeder Hersteller erhält einen gleich großen Platz innerhalb der Box. */
.box-3 p:last-child a {
    min-width: 0;
    flex: 1 1 140px;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* Titel in Box 3 */
.box-3 h3 {
    font-size: 1.6rem;
    /* Blaue Überschrift "Roboter - Typen" */
    color: var(--farbe-roboter-ueberschrift);
    font-weight: 700;
    letter-spacing: 1px;
}


/* Hover-Effekt für Firmenlogos */
.roboter_firma-img {
    display: block;
    width: 100%;
    max-width: 195px;
    height: 62px;
    object-fit: contain;
    transition: transform 0.25s ease, filter 0.25s ease;
}

.roboter_firma-img:hover {
    transform: scale(1.12);
    filter: drop-shadow(0 0 10px var(--schatten-logo-blau-40));
    cursor: pointer;
}

/* Kompaktes Desktop-Layout für die technischen Leistungsseiten */
@media (min-width: 1025px) {
    body.technical-page .container,
    body.technical-page .row {
        /* Kleiner Abstand der umrandeten Bereiche zur Sidebar und zum rechten Rand. */
        width: min(calc(100% - var(--sidebar-width) - 26px), 1440px);
        margin-left: max(calc(var(--sidebar-width) + 13px), calc(50% + var(--sidebar-half-width) - 720px));
    }

    body.technical-page .row {
        gap: clamp(24px, 2.5vw, 40px);
        padding-right: clamp(28px, 3vw, 48px);
        padding-left: clamp(28px, 3vw, 48px);
    }

    body.technical-page .box-1,
    body.technical-page .box-2,
    body.technical-page .box-3 {
        min-width: 0;
        margin-right: 0;
        margin-left: 0;
    }

    body.technical-page .roboter-text-wrapper {
        min-width: 0;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
        gap: 24px;
    }

    body.technical-page .roboter-text-wrapper .box-1,
    body.technical-page .roboter-text-wrapper .box-3 {
        width: 100%;
        height: 100%;
        margin-top: 0;
    }

    /* Die Herstellerlogos nutzen die Höhe der Robotertypen-Box gleichmäßig aus. */
    body.technical-page .roboter-text-wrapper .box-3 {
        display: flex;
        flex-direction: column;
    }

    body.technical-page .roboter-text-wrapper .box-3 p:last-child {
        flex: 1;
        width: 100%;
        margin-top: 24px;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(3, minmax(92px, 1fr));
        gap: 16px;
        align-items: stretch;
    }

    body.technical-page .roboter-text-wrapper .box-3 p:last-child a {
        width: 100%;
        min-height: 92px;
        padding: 16px;
        flex: none;
        background: var(--farbe-technik-listenzeile);
        border: 1px solid var(--farbe-technik-listenrahmen);
        border-radius: 12px;
    }

    /* Die neuen Werkhallenfotos erhalten auf Desktop die volle Bereichsbreite. */
    body.technical-page .roboter-row {
        flex-direction: column;
        align-items: stretch;
    }

    body.technical-page .roboter-row .box-2_ro {
        height: auto;
        aspect-ratio: 2000 / 1126;
        flex: 0 0 auto;
    }

    body.technical-page .container.space {
        margin-top: clamp(90px, 7vw, 130px);
    }
}

/* Auf Tablet und Handy bleiben die zuvor passenden 8 px Seitenabstand erhalten. */
@media (max-width: 1024px) {
    body.technical-page .container,
    body.technical-page .row {
        width: calc(100% - 16px);
        margin-left: 8px;
    }
}

/*
    Umrandung der technischen Bereiche ohne Änderung des bisherigen Layouts.
    Überschrift und zugehörige Zeile bilden optisch gemeinsam eine große Box.
*/
body.technical-page .container {
    background: var(--farbe-technik-bereich);
    border: 1px solid var(--rahmen-box-hell-10);
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
    box-shadow: none;
}

/* Freier Bereich zwischen der großen Slideshow und der ersten Inhaltsbox. */
body.technical-page .slideshow + .container {
    margin-top: 20px;
}

body.technical-page .container + .row {
    margin-top: 0;
    padding-top: 20px;
    /* Gleicher Abstand unter den kleinen Slideshows zum unteren Boxrand. */
    padding-bottom: 20px;
    background: var(--farbe-technik-bereich);
    border: 1px solid var(--rahmen-box-hell-10);
    border-top: 0;
    border-radius: 0 0 18px 18px;
    box-shadow: none;
}


/* Sidebar – Layout & Farben */
.sidebar {
    width: var(--sidebar-width);
    /* Hauptfarbe der gesamten Sidebar */
    background-color: var(--farbe-sidebar-hintergrund);
    /* Feine Linie zur optischen Trennung vom Seiteninhalt. */
    border-right: 1px solid var(--farbe-sidebar-trennlinie);
    height: 100%;
    position: fixed;
    display: flex;                 /* WICHTIG: Flex-Layout */
    flex-direction: column;        /* Inhalt oben, Footer unten */
    justify-content: space-between;/* Footer bleibt unten */
    overflow-y: auto;              /* Scrollbar beim Zoomen */
    overflow-x: hidden;
    z-index: 10;
}

/* Sidebar-Links (Buttons) */
.sidebar-content a {
    display: block;
    padding: 18px 20px;
    /* Normale Schriftfarbe der Navigationslinks */
    color: var(--farbe-sidebar-link);
    text-decoration: none;
    transition: 0.3s;
    font-family: "Montserrat", sans-serif;
}

.sidebar-content a:hover {
    /* Grauer Hintergrund des gerade berührten Navigationslinks */
    background: var(--farbe-sidebar-hover);
    padding-left: 25px;
    cursor: pointer;
    /* Blaue Schriftfarbe des gerade berührten Navigationslinks */
    color: var(--farbe-sidebar-hover-text);
}

/* Der Link der aktuell geöffneten Seite behält den Hover-Effekt dauerhaft. */
.sidebar-content a.is-current {
    background: var(--farbe-sidebar-hover);
    color: var(--farbe-sidebar-hover-text);
    padding-left: 25px;
    border-left: 3px solid var(--farbe-sidebar-aktive-linie);
}

/* Aufklappbare Untermenüs für Steuerungstechnik und Maschinenbau. */
.sidebar-submenu {
    font-family: "Montserrat", sans-serif;
}

.sidebar-submenu-title {
    position: relative;
    display: block;
    padding: 18px 44px 18px 20px;
    color: var(--farbe-sidebar-link);
    list-style: none;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, padding-left 0.3s ease;
}

.sidebar-submenu-title::-webkit-details-marker {
    display: none;
}

/* Der kleine Pfeil zeigt, ob das Untermenü geöffnet oder geschlossen ist. */
.sidebar-submenu-title::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 22px;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-65%) rotate(45deg);
    transition: transform 0.2s ease;
}

.sidebar-submenu[open] > .sidebar-submenu-title::after {
    transform: translateY(-35%) rotate(225deg);
}

.sidebar-submenu-title:hover,
.sidebar-submenu-title.is-current {
    padding-left: 25px;
    background: var(--farbe-sidebar-hover);
    color: var(--farbe-sidebar-hover-text);
}

.sidebar-submenu-title.is-current {
    border-left: 3px solid var(--farbe-sidebar-aktive-linie);
    /* Im Light Mode schwarz, im Dark Mode weiß; einstellbar in farben.css. */
    color: var(--farbe-sidebar-untermenue-titel-aktiv-text);
}

.sidebar-submenu-title:focus-visible {
    outline: 3px solid var(--farbe-schalter-fokus);
    outline-offset: -3px;
}

.sidebar-submenu-links {
    padding: 3px 0 6px;
    background: var(--farbe-sidebar-untermenue-hintergrund);
}

.sidebar-content .sidebar-submenu-link {
    padding: 9px 20px 9px 34px;
    color: var(--farbe-sidebar-untermenue-link);
    font-size: 0.78rem;
}

.sidebar-content .sidebar-submenu-link:hover,
.sidebar-content .sidebar-submenu-link.is-current {
    padding-left: 39px;
    background: var(--farbe-sidebar-untermenue-hover);
    color: var(--farbe-sidebar-untermenue-hover-text);
}

.sidebar-content .sidebar-submenu-link.is-current {
    border-left: 3px solid var(--farbe-sidebar-aktive-linie);
}

/* Verhindert, dass eine angesprungene Überschrift direkt am Fensterrand klebt. */
.container[id] {
    scroll-margin-top: 24px;
}

/* Sidebar-Logo */
.firmenlogo {
    width: 100%;
    padding: 5px 0;
    /* Hintergrundfarbe der Box hinter dem Firmenlogo. */
    background-color: var(--farbe-logo-hintergrund);
    /* Abstand zum ersten Menülink, damit dessen Hover-Fläche nicht direkt angrenzt. */
    margin-bottom: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 10px 28px var(--schatten-schwarz-12);
}

.sidebar-content .firmenlogo-link {
    display: flex;
    width: 100%;
    padding: 0;
    justify-content: center;
    align-items: center;
}

.sidebar-content .firmenlogo-link:hover {
    padding-left: 0;
    background: none;
}

.firmenlogo img {
    width: 80%;
    max-width: 100%;
    border-radius: 10px;
}

/* Im Light Mode wird die blaue, im Dark Mode die weiße Logovariante gezeigt. */
.firmenlogo-bild--dunkel {
    display: none;
}

:root[data-theme="dark"] .firmenlogo-bild--hell {
    display: none;
}

:root[data-theme="dark"] .firmenlogo-bild--dunkel {
    display: block;
}

/* Sidebar-Footer */
.sidebar-footer {
    padding: 20px;
    color: var(--farbe-sidebar-footer-text);
    font-family: "Montserrat", sans-serif;
    font-size: 0.85rem;
    opacity: 0.85;
    line-height: 1.4;
    border-top: 1px solid var(--farbe-sidebar-footer-linie);
}

/* Dreigeteilte System-/Hell-/Dunkel-Auswahl im unteren Bereich der Sidebar. */
.theme-toggle {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3px;
    margin: 0 0 18px;
    padding: 3px;
    border: 1px solid var(--farbe-schalter-rahmen);
    border-radius: 10px;
    background: var(--farbe-schalter-hintergrund);
    transition: border-color 0.2s ease;
}

.theme-toggle:hover {
    border-color: var(--farbe-schalter-hover-rahmen);
}

.theme-toggle-option {
    min-width: 0;
    padding: 7px 3px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--farbe-schalter-text);
    font: inherit;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.theme-toggle-option:hover:not(.is-active) {
    background: var(--farbe-schalter-hover);
}

.theme-toggle-option:focus-visible {
    outline: 3px solid var(--farbe-schalter-fokus);
    outline-offset: 2px;
}

.theme-toggle-option.is-active {
    background: var(--farbe-schalter-aktiv);
    color: var(--farbe-schalter-aktiv-text);
    box-shadow: 0 2px 6px var(--schatten-schwarz-35);
}

.sidebar-footer .footer-title {
    font-weight: 600;
    margin-bottom: 8px;
    letter-spacing: 1px;
}

.sidebar-footer .footer-link {
    display: block;
    /* Die Links reichen wie die normalen Menüpunkte über die gesamte Sidebar. */
    width: calc(100% + 40px);
    color: var(--farbe-sidebar-footer-text);
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease, padding-left 0.3s ease;
    text-align: left;
    margin-left: -20px;
    /* Kompakte Höhe: Die beiden rechtlichen Links liegen eng beieinander. */
    padding: 4px 20px;
}

.sidebar-footer .footer-link:hover {
    background: var(--farbe-sidebar-hover);
    color: var(--farbe-sidebar-hover-text);
    padding-left: 25px;
}

/* Auch Impressum und Datenschutz zeigen die aktuell geöffnete Seite an. */
.sidebar-footer .footer-link.is-current {
    background: var(--farbe-sidebar-hover);
    color: var(--farbe-sidebar-hover-text);
    padding-left: 25px;
    border-left: 3px solid var(--farbe-sidebar-aktive-linie);
}








/*Team*/

/* Bereich rechts neben der Sidebar */
.team-Bereich {
    margin-left: var(--sidebar-width);
    width: calc(100% - var(--sidebar-width));
    padding: 40px 50px;
    box-sizing: border-box;
    font-family: "Montserrat", sans-serif;
}

/* Überschrift – gleiche Farbe wie Capsule */
.team-Bereich h1 {
    text-align: center;
    font-size: 2.8rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--farbe-team-ueberschrift);
    /* Capsule-Farbe */
    margin-bottom: 40px;
    margin-top: 20px;
}

/* Grid */
.team-Grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    /* Alle Karten übernehmen automatisch die Höhe der größten Karte. */
    grid-auto-rows: 1fr;
    align-items: stretch;
    gap: 30px;
    padding-top: 20px;
}

/* Team-Karte – leicht dunkler, Capsule-Stil */
.team-Container {
    /* Hintergrund jeder einzelnen Teamkarte */
    background: var(--farbe-team-karte);
    /* statt hellblau → neutral weiß */
    border-radius: 18px;
    padding: 30px 24px;
    text-align: center;
    box-shadow: 0 10px 28px var(--schatten-schwarz-12);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    border: 1px solid var(--rahmen-box-hell-10);
    /* etwas dunkler */
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

/* Hover */
.team-Container:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 40px var(--schatten-schwarz-18);
}

/* Bild – Rahmenfarbe an Capsule angepasst */
.teammitglied {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 50%;
    margin-bottom: 18px;
    /* Dunkler Rahmen um das Bild eines Teammitglieds */
    border: 4px solid var(--farbe-team-bildrahmen);
    /* Capsule-Farbe */
}

/* Name – gleiche Farbe wie Capsule */
.team-Container h2 {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--farbe-team-name);
    /* Capsule-Farbe */
    margin-bottom: 4px;
    line-height: 1.3;
}

/* Rolle */
.team-Container p {
    font-size: 1.05rem;
    color: var(--farbe-team-rolle);
    margin-bottom: 18px;
}

/* Trennlinie – neutraler, dunkler */
.team-divider {
    width: 60%;
    height: 2px;
    background: var(--farbe-team-trennlinie);
    /* dunkler, Capsule-Stil */
    margin-bottom: 16px;
    border-radius: 2px;
}

/* Heller Telefon-Button auf jeder Teamkarte. */
.team-phone-button {
    display: inline-flex;
    /* TEL. und Telefonnummer sitzen auf derselben Schriftlinie. */
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    margin-top: 4px;
    margin-bottom: 18px;
    padding: 11px 18px;
    background: var(--farbe-team-telefon-hintergrund);
    color: var(--farbe-team-telefon-text);
    border: 2px solid var(--farbe-team-telefon-rahmen);
    border-radius: 100px;
    font-size: 0.95rem;
    font-weight: 600;
    /* Telefonnummern bleiben in der vorherigen, kompakteren Standardschrift. */
    font-family: Arial, sans-serif;
    line-height: 1.2;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

/* Dezenter Hover-Effekt passend zu den dunklen Schaltflächen. */
.team-phone-button:hover {
    background: var(--farbe-team-telefon-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 14px var(--schatten-schwarz-12);
}

/* Gut sichtbare Markierung bei Bedienung mit der Tastatur. */
.team-phone-button:focus-visible {
    outline: 3px solid var(--farbe-team-telefon-fokus);
    outline-offset: 3px;
}

.team-phone-label {
    font-size: 0.75rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.08em;
    opacity: 0.8;
}



/*Media*/


/* Bereich rechts neben der Sidebar */
.media-Bereich {
    margin-left: var(--sidebar-width);
    width: calc(100% - var(--sidebar-width));
    padding: 40px 50px;
    box-sizing: border-box;
    font-family: "Montserrat", sans-serif;
}

/* Große Media-Box – neutral, technisch, Capsule-Stil */
.media-Box {
    background: var(--farbe-media-box);
    border-radius: 18px;
    padding: 30px;
    box-shadow: 0 10px 28px var(--schatten-schwarz-12);
    border: 1px solid var(--rahmen-box-hell-10);
    /* etwas dunkler, hochwertiger */
}

/* Überschrift der Box – gleiche Farbe wie Capsule */
.media-title {
    text-align: center;
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--farbe-media-ueberschrift);
    /* Capsule-Farbe */
    margin-bottom: 25px;
    letter-spacing: 1px;
}

/* Video-Bereich */
.media-Video {
    width: 100%;
    height: auto;
    margin-bottom: 25px;
}

.media-Video video {
    width: 100%;
    border-radius: 14px;
    outline: none;
    box-shadow: 0 8px 20px var(--schatten-schwarz-10);
    /* einheitlicher Shadow */
}

/* Gleich große Vorschaubilder: Ein Klick öffnet das jeweilige Video. */
.media-video-link {
    display: grid;
    width: 90%;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 14px;
    background: var(--farbe-media-vorschau);
    box-shadow: 0 8px 20px var(--schatten-schwarz-10);
}

.media-Video .media-video-link img {
    grid-area: 1 / 1;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 0;
    object-fit: cover;
    box-shadow: none;
    transition: transform 0.25s ease, filter 0.25s ease;
}

/* Blauer Play-Button passend zu den Schaltflächen der Startseite. */
.media-play-button {
    grid-area: 1 / 1;
    place-self: center;
    position: relative;
    z-index: 1;
    width: clamp(58px, 6vw, 76px);
    aspect-ratio: 1;
    border: 3px solid var(--rahmen-play-button);
    border-radius: 50%;
    background: var(--farbe-media-play-hintergrund);
    box-shadow: 0 8px 22px var(--schatten-schwarz-28);
    transition: transform 0.25s ease, background-color 0.25s ease;
}

.media-play-button::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 53%;
    transform: translate(-45%, -50%);
    border-top: 12px solid var(--rahmen-transparent);
    border-bottom: 12px solid var(--rahmen-transparent);
    border-left: 19px solid var(--farbe-media-play-symbol);
}

.media-video-link:hover img,
.media-video-link:focus-visible img {
    transform: scale(1.025);
    filter: brightness(0.82);
}

.media-video-link:hover .media-play-button,
.media-video-link:focus-visible .media-play-button {
    transform: scale(1.08);
    background: var(--farbe-media-play-hover);
}

.media-video-link:focus-visible {
    outline: 3px solid var(--farbe-media-play-fokus);
    outline-offset: 4px;
}

/* Die beiden normalen Bilder erhalten dieselbe Größe wie die Video-Vorschauen. */
.media-Video .media-image {
    display: block;
    width: 90%;
    aspect-ratio: 16 / 9;
    margin-right: auto;
    margin-left: auto;
}

/* Textbereich */
.media-Text {
    font-size: 1.1rem;
    color: var(--farbe-media-text);
    /* gleiche Textfarbe wie Boxen */
    line-height: 1.6;
    padding: 10px 5px;
    text-align: center;
}

/* Bilder im Media-Bereich */
.media-Video img {
    width: 100%;
    border-radius: 14px;
    object-fit: cover;
    box-shadow: 0 8px 20px var(--schatten-schwarz-10);
    /* einheitlicher Shadow */
}

/* Bereich rechts neben der Sidebar */
.kunden-Bereich {
    margin-left: var(--sidebar-width);
    width: calc(100% - var(--sidebar-width));
    padding: 40px 50px;
    box-sizing: border-box;
    font-family: "Montserrat", sans-serif;
}

/* Hauptbox – neutral, modern, Capsule-Stil */
.kunden-Box {
    background: var(--farbe-kunden-box);
    border-radius: 18px;
    padding: 40px;
    box-shadow: 0 10px 28px var(--schatten-schwarz-12);
    border: 1px solid var(--rahmen-box-hell-10);
    /* etwas dunkler, hochwertiger */
    text-align: center;
}

/* Überschrift – gleiche Farbe wie Capsule */
.kunden-Box h1 {
    font-size: 2.6rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--farbe-kunden-ueberschrift);
    /* Capsule-Farbe */
    margin-bottom: 20px;
}

/* Beschreibungstext */
.kunden-text {
    font-size: 1.15rem;
    color: var(--farbe-kunden-text);
    /* gleiche Textfarbe wie Boxen */
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto 40px auto;
}

/* Reihen */
.kunden-row {
    display: flex;
    justify-content: center;
    gap: 60px;
    margin-bottom: 40px;
}

/* Logos */
.kunden-item img {
    width: 180px;
    height: auto;
    border-radius: 12px;
    transition: 0.25s ease;
    box-shadow: 0 8px 20px var(--schatten-schwarz-10);
    /* einheitlicher Shadow */
}

/* Hover-Effekt */
.kunden-item img:hover {
    transform: scale(1.08);
    box-shadow: 0 12px 28px var(--schatten-schwarz-18);
}



/* Services Section */


.services {
    width: calc(100% - var(--sidebar-width));
    margin-left: var(--sidebar-width);
    margin-top: 40px;
    padding: 40px 20px;
    font-family: "Montserrat", sans-serif;
    color: var(--farbe-service-bereich-text);

}

.services .headline h1 {
    font-size: 2.8rem;
    letter-spacing: 2px;
    text-align: center;
    margin-bottom: 10px;
    /* Verwendet dasselbe dunkle Blau wie die Box hinter dem Firmenlogo. */
    color: var(--farbe-service-ueberschrift);
    font-weight: 700;
    margin-bottom: 30px;
}

.services .service_text p {
    font-size: 1.2rem;
    max-width: 850px;
    margin: 0 auto;
    text-align: center;
    line-height: 1.6;
    color: var(--farbe-service-einleitung);
    margin-bottom: 150px;
}

.service-item {
    margin-top: 45px;
    text-align: center;
    padding: 20px;
}

.service-item a {
    display: inline-block;
    padding: 14px 32px;
    /* Eigene Farbe für die Service-Kapseln im Light Mode. */
    background: var(--farbe-service-kapsel);
    color: var(--farbe-service-kapsel-text);
    text-decoration: none;
    border-radius: 10px;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 1px;
    transition: 0.3s ease;
    box-shadow: 0 4px 12px var(--schatten-service-25);
}

.service-item a:hover {
    /* Hellere Farbe, sobald man über eine Schaltfläche fährt */
    background: var(--farbe-service-kapsel-hover);
    box-shadow: 0 10px 25px var(--schatten-service-35);
    transform: translateY(-3px);
}

.service-item p {
    margin-top: 15px;
    font-size: 1rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    color: var(--farbe-service-beschreibung);
    line-height: 1.5;
}

/* ========================================================================== */
/* STARTSEITE IM STIL DER ÜBER-UNS-SEITE                                      */
/* ========================================================================== */

/* Die äußere Box verwendet denselben Hintergrund und Rahmen wie „Über uns“. */
.startseite-Box {
    overflow: hidden;
}

/* Die Slideshow bildet gemeinsam mit Überschrift und Einleitung den Hero. */
.startseite-einleitung {
    position: relative;
    isolation: isolate;
    min-height: clamp(440px, 58vh, 650px);
    margin: -48px -48px 0;
    overflow: hidden;
    background: var(--farbe-ueber-uns-hintergrund-fallback);
    border-radius: 17px 17px 0 0;
}

/* Heller Home-Filter: Die Slideshow bleibt hinter dem Text gut sichtbar. */
.startseite-einleitung::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(120deg,
            var(--farbe-startseite-hintergrund-filter-unten),
            var(--farbe-startseite-hintergrund-filter-oben));
    pointer-events: none;
}

.startseite-einleitung .slideshow {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    box-shadow: none;
}

/* ========================================================================== */
/* TECHNISCHE SEITEN IM STIL DER ÜBER-UNS-SEITE                              */
/* ========================================================================== */

/* Eine gemeinsame Außenbox verbindet Slideshow und Leistungsabschnitte. */
.technical-landing-Box {
    overflow: hidden;
}

/* Die große Slideshow bildet den abgerundeten Kopf der Seite. */
body.technical-page .technical-landing-Box > .slideshow {
    width: calc(100% + 96px);
    height: clamp(360px, 50vh, 540px);
    margin: -48px -48px 0;
    border-radius: 17px 17px 0 0;
    box-shadow: none;
}

/* Innerhalb der Außenbox wird kein zweiter Sidebar-Abstand benötigt. */
body.technical-page .technical-landing-Box .container,
body.technical-page .technical-landing-Box .row {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
}

body.technical-page .technical-landing-Box .container {
    padding: 28px 32px 14px;
}

body.technical-page .technical-landing-Box .container h1,
body.technical-page .technical-landing-Box .container h2 {
    margin-top: 24px;
    margin-bottom: 12px;
}

body.technical-page .technical-landing-Box .container.space {
    margin-top: 44px;
}

body.technical-page .technical-landing-Box > .slideshow + .container {
    margin-top: 28px;
}

body.technical-page .technical-landing-Box .row {
    padding: 18px 28px 28px;
}

body.technical-page .technical-landing-Box .box-1,
body.technical-page .technical-landing-Box .box-2,
body.technical-page .technical-landing-Box .box-3 {
    min-width: 0;
    margin-right: 0;
    margin-left: 0;
}

.startseite-hero-text {
    position: relative;
    z-index: 2;
    width: min(900px, 100%);
    min-height: inherit;
    margin: 0 auto;
    padding: 80px 80px 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    pointer-events: none;
}

.startseite-hero-text .headline h1 {
    margin: 0 0 24px;
    color: var(--farbe-ueber-uns-button-text);
    font-size: clamp(2.8rem, 5vw, 4.6rem);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -0.02em;
    text-shadow: 0 3px 14px var(--schatten-schwarz-75);
}

.startseite-hero-text .service_text p {
    max-width: 820px;
    margin: 0;
    color: var(--farbe-ueber-uns-button-text);
    font-size: 1.16rem;
    line-height: 1.7;
    text-shadow: 0 2px 10px var(--schatten-schwarz-75);
}

/* Die vorhandenen Leistungsbereiche erscheinen als gleichmäßige Karten. */
.startseite-Box .services {
    width: 100%;
    margin: 0;
    padding: 48px 0 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.startseite-Box .service-item {
    position: relative;
    min-width: 0;
    margin: 0;
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    background: var(--farbe-ueber-uns-karte);
    border: 1px solid var(--rahmen-box-hell-08);
    border-top: 3px solid var(--farbe-ueber-uns-link-hover);
    border-radius: 14px;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.startseite-Box .service-item:hover,
.startseite-Box .service-item:focus-within {
    transform: translateY(-4px);
    border-color: var(--farbe-ueber-uns-link-hover);
    box-shadow: 0 12px 26px var(--schatten-schwarz-12);
}

/* Erweitert den vorhandenen Seitenlink auf die vollständige Leistungskarte. */
.startseite-Box .service-item a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}

.startseite-Box .service-item:focus-within {
    outline: 3px solid var(--farbe-ueber-uns-link-hover);
    outline-offset: 3px;
}

.startseite-Box .service-item a:focus-visible {
    outline: none;
}

.startseite-Box .service-item a {
    padding: 0 0 12px;
    display: inline-flex;
    justify-content: center;
    color: var(--farbe-ueber-uns-link);
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    font-size: 1.15rem;
}

.startseite-Box .service-item a::before {
    background: var(--farbe-piktogramm);
}

.startseite-Box .service-item:hover a,
.startseite-Box .service-item:focus-within a,
.startseite-Box .service-item a:hover {
    color: var(--farbe-service-kapsel-hover);
    background: transparent;
    box-shadow: none;
    transform: none;
}

.startseite-Box .service-item:hover a::before,
.startseite-Box .service-item:focus-within a::before {
    background: var(--farbe-service-kapsel-hover);
}

.startseite-Box .service-item p {
    margin: 0;
    color: var(--farbe-ueber-uns-text);
}

/* Die zusätzliche Produktkarte nutzt bewusst die gesamte letzte Rasterzeile. */
.startseite-Box .service-item--produkte {
    grid-column: 1 / -1;
}

/*Impressum Section*/

.impressum-container {
    width: calc(100% - var(--sidebar-width));
    margin-left: var(--sidebar-width);
    padding: 40px 50px;
    font-family: "Montserrat", sans-serif;
    color: var(--farbe-recht-text);
    line-height: 1.7;
}

.impressum-container h1 {
    font-size: 2.4rem;
    margin-bottom: 25px;
    color: var(--farbe-recht-ueberschrift);
    font-weight: 700;
}

.impressum-container h2 {
    font-size: 1.6rem;
    margin-top: 40px;
    margin-bottom: 15px;
    color: var(--farbe-recht-ueberschrift);
    font-weight: 600;
}

.impressum-container p {
    font-size: 1rem;
    margin-bottom: 12px;
    max-width: 900px;
}

.impressum-container ul {
    margin-left: 20px;
    margin-bottom: 20px;
}

.impressum-container ul li {
    font-size: 1rem;
    margin-bottom: 8px;
}



/* Datenschutz*/


.datenschutz-container {
    width: calc(100% - var(--sidebar-width));
    margin-left: var(--sidebar-width);
    padding: 40px 50px;
    font-family: "Montserrat", sans-serif;
    color: var(--farbe-recht-text);
    line-height: 1.7;
}

.datenschutz-container h1 {
    font-size: 2.4rem;
    margin-bottom: 25px;
    color: var(--farbe-recht-ueberschrift);
    font-weight: 700;
}

.datenschutz-container h2 {
    font-size: 1.6rem;
    margin-top: 40px;
    margin-bottom: 15px;
    color: var(--farbe-recht-ueberschrift);
    font-weight: 600;
}

.datenschutz-container p {
    font-size: 1rem;
    margin-bottom: 12px;
    max-width: 900px;
}

.datenschutz-container em {
    font-style: italic;
    color: var(--farbe-recht-hinweis);
}



/* Bereich rechts neben der Sidebar */
.jobs-Bereich {
    margin-left: var(--sidebar-width);
    width: calc(100% - var(--sidebar-width));
    padding: 40px 50px;
    font-family: "Montserrat", sans-serif;
}

/* Hauptbox */
.jobs-Box {
    background: var(--farbe-jobs-box);
    border-radius: 18px;
    padding: 40px;
    box-shadow: 0 10px 28px var(--schatten-schwarz-12);
    border: 1px solid var(--rahmen-box-hell-10);
    max-width: 1000px;
    margin: 0 auto;
}

/* Überschrift */
.jobs-Box h1 {
    font-size: 2.6rem;
    font-weight: 800;
    color: var(--farbe-jobs-ueberschrift);
    text-align: center;
    margin-bottom: 20px;
    letter-spacing: 1px;
}

/* Untertitel */
.jobs-subtitle {
    text-align: center;
    font-size: 1.15rem;
    color: var(--farbe-jobs-text);
    margin-bottom: 30px;
    line-height: 1.5;
}

/* Divider */
.jobs-divider {
    width: 60%;
    height: 2px;
    background: var(--farbe-jobs-trennlinie);
    margin: 25px auto;
    border-radius: 2px;
}

/* PDF Wrapper */
.jobs-pdf-wrapper {
    width: 100%;
    height: 700px;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 20px var(--schatten-schwarz-10);
    margin-bottom: 30px;
}

/* PDF selbst */
.jobs-pdf {
    width: 100%;
    height: 100%;
    border: none;
}

/* Download Button */
.jobs-download {
    text-align: center;
    margin-top: 10px;
}

.jobs-download a {
    display: inline-block;
    padding: 14px 32px;
    /* Farbe des PDF-Download-Buttons */
    background: var(--farbe-jobs-button);
    color: var(--farbe-jobs-button-text);
    text-decoration: none;
    border-radius: 10px;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 1px;
    transition: 0.3s ease;
}

.jobs-download a:hover {
    background: var(--farbe-jobs-button-hover);
    transform: translateY(-3px);
}


/* Bereich rechts neben der Sidebar */
.kontakt-Bereich {
    margin-left: var(--sidebar-width);
    width: calc(100% - var(--sidebar-width));
    padding: 40px 50px;
    font-family: "Montserrat", sans-serif;
}

/* Hauptbox */
.kontakt-Box {
    background: var(--farbe-kontakt-box);
    border-radius: 18px;
    padding: 40px;
    box-shadow: 0 10px 28px var(--schatten-schwarz-12);
    border: 1px solid var(--rahmen-box-hell-10);
    max-width: 900px;
    margin: 0 auto;
}

/* Überschrift */
.kontakt-Box h1 {
    font-size: 2.6rem;
    font-weight: 800;
    color: var(--farbe-kontakt-ueberschrift);
    text-align: center;
    margin-bottom: 25px;
}

/* Beschreibungstext */
.kontakt-text {
    text-align: center;
    font-size: 1.15rem;
    color: var(--farbe-kontakt-text);
    line-height: 1.6;
    margin-bottom: 35px;
}

/* Schaltflächen für E-Mail auf der Kontakt- und Teamseite. */
.kontakt-mail-button,
.team-email-button {
    padding: 14px 32px;
    border: none;
    border-radius: 10px;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    transition: 0.3s ease;
    margin-top: 10px;
}


/* ========================================================================== */
/* ÜBER UNS                                                                   */
/* ========================================================================== */

/* Gesamter Inhaltsbereich rechts neben der Sidebar. */
.ueber-uns-Bereich {
    position: relative;
    isolation: isolate;
    width: calc(100% - var(--sidebar-width));
    margin-left: var(--sidebar-width);
    padding: 40px 50px;
    box-sizing: border-box;
    font-family: "Montserrat", sans-serif;
    color: var(--farbe-ueber-uns-text);
}

/*
    Großes Hintergrundbild hinter der Über-uns-Box.
    Zum Austauschen nur den Dateipfad bei url(...) ändern.
*/
.ueber-uns-Bereich::before {
    content: "";
    position: fixed;
    inset: 0 0 0 var(--sidebar-width);
    z-index: -1;
    background-color: var(--farbe-ueber-uns-hintergrund-fallback);
    background-image:
        linear-gradient(145deg,
            var(--farbe-ueber-uns-hintergrund-filter-oben),
            var(--farbe-ueber-uns-hintergrund-filter-unten)),
        url("../img/maschinenbau/roboter.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* Große äußere Box der Über-uns-Seite. */
.ueber-uns-Box {
    max-width: 1200px;
    margin: 0 auto;
    padding: 48px;
    background: var(--farbe-ueber-uns-box);
    border: 1px solid var(--rahmen-box-hell-08);
    border-radius: 18px;
    box-shadow: 0 10px 28px var(--schatten-schwarz-10);
}

.ueber-uns-einleitung {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.95fr);
    align-items: center;
    gap: 44px;
    margin: -48px -48px 52px;
    padding: 64px 48px;
    background-color: var(--farbe-ueber-uns-hintergrund-fallback);
    background-image:
        linear-gradient(120deg,
            var(--farbe-ueber-uns-hintergrund-filter-unten),
            var(--farbe-ueber-uns-hintergrund-filter-oben)),
        url("../img/slideshow/slider23.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 17px 17px 0 0;
}

.ueber-uns-einleitung h1 {
    margin-bottom: 18px;
    color: var(--farbe-ueber-uns-button-text);
    font-size: clamp(2.6rem, 4.6vw, 4.3rem);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -0.02em;
}

.ueber-uns-einleitung p {
    color: var(--farbe-ueber-uns-button-text);
    font-size: 1.15rem;
    line-height: 1.7;
}

/* Kleine Abschnittsmarke wie bei modernen Industrie-Landingpages. */
.ueber-uns-hero-text .ueber-uns-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 20px;
    padding: 10px 14px;
    color: var(--farbe-ueber-uns-button-text);
    background: var(--farbe-ueber-uns-hero-glas);
    border: 1px solid var(--farbe-ueber-uns-hero-glas-rahmen);
}

.ueber-uns-hero-text .ueber-uns-kicker::before {
    content: "";
    width: 8px;
    height: 8px;
    background: var(--farbe-ueber-uns-link-hover);
}

.ueber-uns-kicker {
    margin-bottom: 10px;
    color: var(--farbe-ueber-uns-link);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.ueber-uns-sprunglink {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 24px;
    min-height: 48px;
    padding: 11px 18px;
    color: var(--farbe-ueber-uns-button-text);
    background: var(--farbe-ueber-uns-hero-glas);
    border: 1px solid var(--farbe-ueber-uns-button-text);
    font-weight: 700;
    text-decoration: none;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.ueber-uns-sprunglink::after {
    content: "↓";
    font-size: 1.2em;
    transition: transform 0.2s ease;
}

.ueber-uns-sprunglink:hover::after {
    transform: translateY(3px);
}

.ueber-uns-sprunglink:hover {
    color: var(--farbe-ueber-uns-link);
    background: var(--farbe-ueber-uns-button-text);
}

.ueber-uns-sprunglink:focus-visible {
    outline: 3px solid var(--farbe-ueber-uns-link-hover);
    outline-offset: 4px;
}

.ueber-uns-hero-bild {
    position: relative;
    overflow: hidden;
    margin: 0;
    border: 1px solid var(--farbe-ueber-uns-button-text);
    border-radius: 16px;
    box-shadow: 0 8px 22px var(--schatten-schwarz-12);
}

.ueber-uns-hero-bild img {
    display: block;
    width: 100%;
    aspect-ratio: 578 / 465;
    object-fit: cover;
}

.ueber-uns-hero-bild figcaption {
    position: absolute;
    right: 16px;
    bottom: 16px;
    left: 16px;
    padding: 12px 14px;
    color: var(--farbe-ueber-uns-bildtext);
    background: var(--farbe-ueber-uns-bildtext-hintergrund);
    border-radius: 10px;
    text-align: center;
    font-size: 0.88rem;
    font-weight: 700;
}

.ueber-uns-ueberblick {
    margin-bottom: 48px;
    padding: 36px;
    background: var(--farbe-ueber-uns-karte);
    border: 1px solid var(--rahmen-box-hell-08);
    border-radius: 16px;
}

.ueber-uns-ueberblick h2,
.ueber-uns-abschnittskopf,
.ueber-uns-flaechen > h2 {
    text-align: center;
}

.ueber-uns-ueberblick > .ueber-uns-kicker,
.ueber-uns-flaechen > .ueber-uns-kicker {
    text-align: center;
}

.ueber-uns-ueberblick h2,
.ueber-uns-bau h2,
.ueber-uns-flaechen > h2 {
    margin-bottom: 22px;
    color: var(--farbe-ueber-uns-ueberschrift);
    font-size: 1.75rem;
    font-weight: 700;
}

.ueber-uns-fakten {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.ueber-uns-fakten::before {
    display: none;
}

.ueber-uns-fakten > div {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 22px 18px;
    background: var(--farbe-ueber-uns-faktenkarte);
    border: 1px solid var(--farbe-ueber-uns-faktenrahmen);
    border-top: 3px solid var(--farbe-ueber-uns-link-hover);
    border-radius: 8px;
    box-shadow: 0 10px 24px var(--schatten-schwarz-10);
    text-align: center;
}

.ueber-uns-fakten span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    color: var(--farbe-ueber-uns-link);
    font-size: clamp(2.2rem, 4vw, 3.5rem);
    line-height: 1;
    font-weight: 800;
}

.ueber-uns-fakten h3 {
    margin-bottom: 8px;
    color: var(--farbe-ueber-uns-ueberschrift);
    font-size: 1.08rem;
    font-weight: 700;
}

.ueber-uns-fakten p {
    line-height: 1.55;
}

/* Die beiden wichtigsten Aussagen stehen auf großen Bildschirmen nebeneinander. */
.ueber-uns-raster {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    margin-bottom: 48px;
}

.ueber-uns-karte {
    padding: 30px;
    background: var(--farbe-ueber-uns-karte);
    border: 1px solid var(--rahmen-box-hell-08);
    border-radius: 16px;
    box-shadow: 0 8px 22px var(--schatten-schwarz-08);
}

.ueber-uns-karte h2,
.ueber-uns-leistungen > h2,
.ueber-uns-standort h2 {
    margin-bottom: 14px;
    color: var(--farbe-ueber-uns-ueberschrift);
    font-size: 1.55rem;
    font-weight: 700;
}

.ueber-uns-karte p,
.ueber-uns-leistungsraster p,
.ueber-uns-standort p {
    line-height: 1.65;
}

/* Fünfstufiger Projektablauf mit nummerierten Karten und Verbindungslinie. */
.ueber-uns-prozess {
    margin-bottom: 48px;
    padding: 36px;
    background: var(--farbe-ueber-uns-karte);
    border: 1px solid var(--rahmen-box-hell-08);
    border-radius: 16px;
}

.ueber-uns-prozesskopf {
    max-width: 760px;
    margin: 0 auto 30px;
    text-align: center;
}

.ueber-uns-prozesskopf h2 {
    margin-bottom: 12px;
    color: var(--farbe-ueber-uns-ueberschrift);
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
}

.ueber-uns-prozesskopf p:last-child {
    line-height: 1.65;
}

.ueber-uns-prozessschritte {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Die Linie verbindet die Karten nur in der breiten, einzeiligen Darstellung. */
.ueber-uns-prozessschritte::before {
    content: "";
    position: absolute;
    top: 52px;
    right: 8%;
    left: 8%;
    height: 2px;
    background: var(--farbe-ueber-uns-link-hover);
}

.ueber-uns-prozessschritte li {
    position: relative;
    z-index: 1;
    min-width: 0;
    padding: 24px 16px;
    background: var(--farbe-ueber-uns-box);
    border: 1px solid var(--rahmen-box-hell-08);
    border-radius: 12px;
    text-align: center;
}

.ueber-uns-prozessschritte li::before {
    content: "";
    position: absolute;
    top: -5px;
    left: 50%;
    width: 8px;
    height: 8px;
    background: var(--farbe-ueber-uns-link-hover);
    border: 3px solid var(--farbe-ueber-uns-karte);
    transform: translateX(-50%);
}

.ueber-uns-prozessnummer {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    color: var(--farbe-ueber-uns-button-text);
    background: var(--farbe-ueber-uns-link);
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
}

.ueber-uns-prozesssymbol {
    display: block;
    width: 28px;
    height: 28px;
    margin: 0 auto 14px;
    background: var(--farbe-piktogramm);
    -webkit-mask: var(--piktogramm-datei) center / contain no-repeat;
    mask: var(--piktogramm-datei) center / contain no-repeat;
}

.ueber-uns-prozessschritte h3 {
    margin-bottom: 10px;
    color: var(--farbe-ueber-uns-ueberschrift);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.35;
}

.ueber-uns-prozessschritte p {
    font-size: 0.92rem;
    line-height: 1.55;
}

.ueber-uns-bau {
    margin-bottom: 48px;
    scroll-margin-top: 24px;
}

.ueber-uns-abschnittskopf {
    max-width: 760px;
    margin: 0 auto 24px;
}

.ueber-uns-abschnittskopf p {
    line-height: 1.65;
}

.ueber-uns-baugalerie {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.ueber-uns-baugalerie figure {
    position: relative;
    overflow: hidden;
    background: var(--farbe-ueber-uns-karte);
    border: 1px solid var(--rahmen-box-hell-08);
    border-radius: 14px;
    box-shadow: 0 8px 20px var(--schatten-schwarz-08);
}

.ueber-uns-baugalerie img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.ueber-uns-baugalerie figcaption {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    font-size: 0.95rem;
    font-weight: 600;
}

.ueber-uns-baugalerie figcaption span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    color: var(--farbe-ueber-uns-button-text);
    background: var(--farbe-ueber-uns-link);
    border-radius: 50%;
    font-size: 0.78rem;
    font-weight: 800;
}

.ueber-uns-flaechen {
    margin-bottom: 48px;
    padding: 36px;
    background: var(--farbe-ueber-uns-karte);
    border: 1px solid var(--rahmen-box-hell-08);
    border-radius: 16px;
}

.ueber-uns-flaechen dl {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.ueber-uns-flaechen dl > div {
    display: flex;
    min-height: 118px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px 14px;
    background: var(--farbe-ueber-uns-box);
    border: 1px solid var(--rahmen-box-hell-08);
    border-radius: 12px;
    text-align: center;
}

.ueber-uns-flaechen dt {
    font-weight: 600;
    order: 2;
}

.ueber-uns-flaechen dd {
    order: 1;
    margin: 0;
    color: var(--farbe-ueber-uns-link);
    font-size: clamp(1.35rem, 2.2vw, 1.8rem);
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    white-space: nowrap;
}

.ueber-uns-leistungen {
    margin-bottom: 48px;
}

.ueber-uns-leistungen > h2 {
    text-align: center;
    margin-bottom: 24px;
}

.ueber-uns-leistungsraster {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.ueber-uns-leistungsraster a {
    display: block;
    min-height: 100%;
    padding: 24px;
    color: var(--farbe-ueber-uns-text);
    background: var(--farbe-ueber-uns-karte);
    border: 1px solid var(--rahmen-box-hell-08);
    border-radius: 14px;
    text-decoration: none;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.ueber-uns-leistungsraster a:hover {
    transform: translateY(-3px);
    border-color: var(--farbe-ueber-uns-link-hover);
    box-shadow: 0 8px 22px var(--schatten-schwarz-12);
}

.ueber-uns-leistungsraster a:focus-visible,
.ueber-uns-kontakt:focus-visible {
    outline: 3px solid var(--farbe-ueber-uns-link-hover);
    outline-offset: 3px;
}

.ueber-uns-leistungsraster h3 {
    margin-bottom: 10px;
    color: var(--farbe-ueber-uns-link);
    font-size: 1.15rem;
    font-weight: 700;
}

.ueber-uns-standort {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding-top: 34px;
    border-top: 2px solid var(--farbe-standort-trennlinie);
}

.ueber-uns-standort-aktionen {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 12px;
}

.ueber-uns-kontakt {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 24px;
    color: var(--farbe-ueber-uns-button-text);
    background: var(--farbe-ueber-uns-button);
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.ueber-uns-kontakt:hover {
    background: var(--farbe-ueber-uns-button-hover);
    transform: translateY(-2px);
}


/* ========================================================================== */
/* PRODUKTE                                                                   */
/* ========================================================================== */

/* Gesamter Inhaltsbereich rechts neben der Sidebar. */
.produkte-Bereich {
    width: calc(100% - var(--sidebar-width));
    min-height: 100vh;
    margin-left: var(--sidebar-width);
    padding: 40px 50px;
    box-sizing: border-box;
    font-family: "Montserrat", sans-serif;
}

/* Große gemeinsame Produktfläche. */
.produkte-Box {
    max-width: 1240px;
    margin: 0 auto;
    padding: clamp(36px, 5vw, 64px);
    background: var(--farbe-produkte-box);
    border: 1px solid var(--rahmen-box-hell-10);
    border-top: 4px solid var(--farbe-produkte-akzent);
    border-radius: 12px;
    box-shadow: 0 16px 36px var(--schatten-schwarz-18);
}

.produkte-einleitung {
    max-width: 820px;
    margin: 0 auto 46px;
    text-align: center;
}

.produkte-kicker {
    margin-bottom: 10px;
    color: var(--farbe-produkte-akzent);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.produkte-einleitung h1 {
    margin-bottom: 18px;
    color: var(--farbe-produkte-text);
    font-size: clamp(2.6rem, 5vw, 4.4rem);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -0.025em;
}

.produkte-einleitung > p:last-child {
    margin: 0;
    color: var(--farbe-produkte-text);
    font-size: 1.08rem;
    line-height: 1.7;
}

.produkte-sprungnavigation {
    margin: 0 auto 46px;
    display: flex;
    justify-content: center;
    gap: 12px;
}

.produkte-sprungnavigation a {
    min-width: 150px;
    padding: 11px 20px;
    color: var(--farbe-produkte-button-text);
    background: var(--farbe-produkte-button);
    border-radius: 999px;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.produkte-sprungnavigation a:hover {
    background: var(--farbe-produkte-button-hover);
    transform: translateY(-2px);
}

.produkte-sprungnavigation a:focus-visible {
    outline: 3px solid var(--farbe-produkte-akzent);
    outline-offset: 3px;
}

.produkte-abschnittstitel {
    margin-bottom: 24px;
    color: var(--farbe-produkte-text);
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 900;
    text-align: center;
    scroll-margin-top: 28px;
}

/* Produktkarten passen sich automatisch an die verfügbare Breite an. */
.produkte-raster {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.produkt-karte {
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--farbe-produkte-karte);
    border: 1px solid var(--farbe-produkte-karte-rahmen);
    border-top: 3px solid var(--farbe-produkte-akzent);
    border-radius: 10px;
    box-shadow: 0 10px 24px var(--schatten-schwarz-10);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.produkt-karte:hover,
.produkt-karte:focus-within {
    transform: translateY(-5px);
    border-color: var(--farbe-produkte-akzent);
    box-shadow: 0 16px 30px var(--schatten-schwarz-18);
}

.produkt-bildplatzhalter,
.produkt-bild {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-bottom: 1px solid var(--farbe-produkte-karte-rahmen);
}

.produkt-bildplatzhalter {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: var(--farbe-produkte-akzent);
    background: var(--farbe-produkte-bildplatzhalter);
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.produkt-bildsymbol {
    width: 64px;
    height: 64px;
    background: currentColor;
    -webkit-mask: url("../img/piktogramme/boxes.svg") center / contain no-repeat;
    mask: url("../img/piktogramme/boxes.svg") center / contain no-repeat;
}

.produkt-bild img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.produkt-inhalt {
    flex: 1;
    padding: 26px 24px 24px;
    display: flex;
    flex-direction: column;
}

.produkt-nummer {
    margin-bottom: 9px;
    color: var(--farbe-produkte-akzent);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.produkt-inhalt h3 {
    margin-bottom: 14px;
    color: var(--farbe-produkte-text);
    font-size: 1.55rem;
    font-weight: 800;
    line-height: 1.2;
}

.produkt-beschreibung {
    margin-bottom: 20px;
    color: var(--farbe-produkte-text);
    line-height: 1.65;
}

.produkt-eigenschaften {
    margin: 0 0 24px;
    padding: 0;
    display: grid;
    gap: 10px;
    color: var(--farbe-produkte-text);
    list-style: none;
}

.produkt-eigenschaften li {
    position: relative;
    padding-left: 20px;
    line-height: 1.45;
}

.produkt-eigenschaften li::before {
    content: "";
    position: absolute;
    top: 0.62em;
    left: 0;
    width: 8px;
    height: 8px;
    background: var(--farbe-produkte-akzent);
    border-radius: 50%;
    transform: translateY(-50%);
}

/* Breiter Bereich für eine Software oder digitale Lösung. */
.software-bereich {
    margin-top: 64px;
    padding-top: 52px;
    border-top: 1px solid var(--farbe-produkte-karte-rahmen);
    scroll-margin-top: 28px;
}

.software-einleitung {
    max-width: 760px;
    margin: 0 auto 30px;
    text-align: center;
}

.software-einleitung h2 {
    margin-bottom: 14px;
    color: var(--farbe-produkte-text);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    line-height: 1.1;
}

.software-einleitung > p:last-child {
    margin: 0;
    color: var(--farbe-produkte-text);
    line-height: 1.65;
}

.software-karte {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    overflow: hidden;
    background: var(--farbe-produkte-karte);
    border: 1px solid var(--farbe-produkte-karte-rahmen);
    border-top: 3px solid var(--farbe-produkte-akzent);
    border-radius: 10px;
    box-shadow: 0 10px 24px var(--schatten-schwarz-10);
}

/* Die Lagerverwaltung nutzt die volle Breite, damit Details in den Screenshots erkennbar bleiben. */
.software-karte--lagerverwaltung {
    grid-template-columns: 1fr;
}

.software-vorschau {
    min-height: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    color: var(--farbe-produkte-akzent);
    background: var(--farbe-produkte-bildplatzhalter);
    border-right: 1px solid var(--farbe-produkte-karte-rahmen);
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-align: center;
    text-transform: uppercase;
}

.software-symbol {
    width: 74px;
    height: 74px;
    background: currentColor;
    -webkit-mask: url("../img/piktogramme/cpu.svg") center / contain no-repeat;
    mask: url("../img/piktogramme/cpu.svg") center / contain no-repeat;
}

.software-inhalt {
    padding: clamp(30px, 5vw, 52px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.software-inhalt h3 {
    margin-bottom: 14px;
    color: var(--farbe-produkte-text);
    font-size: clamp(1.7rem, 3vw, 2.3rem);
    font-weight: 850;
    line-height: 1.15;
}

.software-karte--lagerverwaltung .software-inhalt {
    max-width: 940px;
    margin-inline: auto;
    padding-bottom: 28px;
    text-align: center;
}

.software-karte--lagerverwaltung .produkt-beschreibung {
    max-width: 820px;
    margin: 0 auto;
}

.software-funktionsbilder {
    padding: 0 clamp(20px, 4vw, 46px) clamp(24px, 4vw, 46px);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.software-funktionsbild {
    min-width: 0;
    padding: 20px 16px 16px;
    display: flex;
    flex-direction: column;
    background: var(--farbe-produkte-karte);
    border: 1px solid var(--farbe-produkte-karte-rahmen);
    border-top: 3px solid var(--farbe-produkte-akzent);
    border-radius: 10px;
    box-shadow: 0 8px 18px var(--schatten-schwarz-10);
}

.software-funktionsbild .produkt-eigenschaften {
    margin: 0 0 18px;
    padding-inline: 14px;
    grid-template-columns: 1fr;
    gap: 12px;
    text-align: left;
}

.software-funktionsbild .produkt-eigenschaften li {
    padding-left: 24px;
    line-height: 1.5;
}

.software-funktionsbild .produkt-eigenschaften li::before {
    left: 2px;
}

.software-funktionsbild .software-screenshot {
    margin-top: auto;
}

.software-screenshot {
    min-width: 0;
    overflow: hidden;
    background: var(--farbe-produkte-bildplatzhalter);
    border: 1px solid var(--farbe-produkte-karte-rahmen);
    border-radius: 9px;
}

.software-screenshot-button {
    position: relative;
    width: 100%;
    display: block;
    overflow: hidden;
    padding: 0;
    color: inherit;
    background: transparent;
    border: 0;
    cursor: zoom-in;
}

.software-screenshot-button:focus-visible {
    outline: 3px solid var(--farbe-produkte-akzent);
    outline-offset: -3px;
}

.software-screenshot-button img {
    width: 100%;
    aspect-ratio: 1914 / 757;
    display: block;
    object-fit: cover;
    object-position: center;
    transition: transform 0.25s ease;
}

.software-screenshot-button:hover img,
.software-screenshot-button:focus-visible img {
    transform: scale(1.02);
}

.software-screenshot figcaption {
    padding: 13px 16px;
    color: var(--farbe-produkte-text);
    font-size: 0.9rem;
    font-weight: 750;
    text-align: center;
}

/* Native Dialogbox: öffnet den angeklickten Screenshot groß über dem Zwei-Bilder-Layout. */
.software-bilddialog {
    width: min(1500px, calc(100vw - 40px));
    max-width: none;
    max-height: calc(100vh - 40px);
    margin: auto;
    padding: 0;
    color: var(--farbe-produkte-text);
    background: var(--farbe-produkte-karte);
    border: 1px solid var(--farbe-produkte-karte-rahmen);
    border-radius: 12px;
    box-shadow: 0 24px 70px var(--schatten-schwarz-18);
}

.software-bilddialog::backdrop {
    background: var(--farbe-software-dialog-umgebung);
}

.software-bilddialog-inhalt {
    position: relative;
    padding: 54px 18px 16px;
}

.software-bilddialog figure {
    margin: 0;
}

.software-bilddialog-bild {
    width: 100%;
    max-height: calc(100vh - 145px);
    display: block;
    object-fit: contain;
    border-radius: 7px;
}

.software-bilddialog figcaption {
    padding: 13px 12px 2px;
    color: var(--farbe-produkte-text);
    font-weight: 800;
    text-align: center;
}

.software-bilddialog-navigation {
    position: absolute;
    z-index: 2;
    top: 50%;
    width: 70px;
    height: 70px;
    display: grid;
    place-items: center;
    padding: 0;
    color: var(--farbe-slideshow-pfeil);
    background: none;
    border: 0;
    box-shadow: none;
    opacity: 0.9;
    font-size: 0;
    line-height: 0;
    cursor: pointer;
    transform: translateY(-50%);
    transition: opacity 0.2s ease, transform 0.2s ease;
    touch-action: manipulation;
}

.software-bilddialog-navigation::before {
    content: "";
    width: 22px;
    height: 22px;
    display: block;
    box-sizing: border-box;
    border-top: 5px solid var(--farbe-slideshow-pfeil);
    border-right: 5px solid var(--farbe-slideshow-pfeil);
    filter: drop-shadow(0 2px 3px var(--schatten-schwarz-75));
}

.software-bilddialog-zurueck::before {
    position: relative;
    left: 1px;
    transform: rotate(-135deg);
}

.software-bilddialog-weiter::before {
    position: relative;
    right: 1px;
    transform: rotate(45deg);
}

.software-bilddialog-zurueck {
    left: 28px;
}

.software-bilddialog-weiter {
    right: 28px;
}

.software-bilddialog-navigation:hover {
    opacity: 1;
    transform: translateY(-50%) scale(1.07);
}

.software-bilddialog-navigation:focus-visible {
    outline: 3px solid var(--farbe-slideshow-fokus);
    outline-offset: 3px;
}

.software-bilddialog-navigation[hidden] {
    display: none;
}

.software-bilddialog-schliessen {
    position: absolute;
    top: 9px;
    right: 10px;
    width: 38px;
    height: 36px;
    padding: 0;
    color: var(--farbe-produkte-button-text);
    background: var(--farbe-produkte-button);
    border: 0;
    border-radius: 6px;
    font-size: 1.55rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
}

.software-bilddialog-schliessen:hover {
    background: var(--farbe-produkte-button-hover);
}

.software-bilddialog-schliessen:focus-visible {
    outline: 3px solid var(--farbe-produkte-akzent);
    outline-offset: 3px;
}

/* Gemeinsame Anfragefläche steht bewusst als letzter Inhalt auf der Seite. */
.produkte-kontakt {
    margin-top: 40px;
    padding: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    color: var(--farbe-produkte-text);
    background: var(--farbe-produkte-bildplatzhalter);
    border: 1px solid var(--farbe-produkte-karte-rahmen);
    border-radius: 10px;
}

.produkte-kontakt h2 {
    margin-bottom: 8px;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 850;
}

.produkte-kontakt p:last-child {
    margin: 0;
    line-height: 1.55;
}

.produkt-anfrage {
    width: fit-content;
    min-width: 260px;
    margin: 0;
    padding: 13px 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--farbe-produkte-button-text);
    background: var(--farbe-produkte-button);
    border-radius: 6px;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.produkt-anfrage:hover {
    background: var(--farbe-produkte-button-hover);
    transform: translateY(-2px);
}

.produkt-anfrage:focus-visible {
    outline: 3px solid var(--farbe-produkte-akzent);
    outline-offset: 3px;
}


/* ========================================================================== */
/* PIKTOGRAMME                                                                */
/* ========================================================================== */

/*
    Die lokalen Linien-Piktogramme stammen aus Lucide.
    Lizenz: img/piktogramme/LIZENZ-LUCIDE.txt

    Ein neues Piktogramm wird über --piktogramm-datei zugeordnet. Die eigentliche
    Farbe kommt automatisch aus dem jeweiligen Text beziehungsweise Button.
*/

/* Piktogramme in Überschriften und Schaltflächen sauber mit dem Text ausrichten. */
.service-item a,
.container[id] h1,
.container[id] h2,
.media-title,
.kunden-Box h1,
.jobs-Box h1,
.jobs-download a,
.kontakt-Box h1,
.kontakt-mail-button,
.impressum-container h1,
.datenschutz-container h1,
.ueber-uns-karte h2,
.ueber-uns-leistungsraster h3,
.ueber-uns-standort h2,
.ueber-uns-flaechen dt {
    align-items: center;
    gap: 0.55em;
}

.service-item a,
.jobs-download a,
.kontakt-mail-button {
    justify-content: center;
}

/* Links mit Piktogramm brauchen Flexbox, damit Symbol und Text mittig sitzen. */
.service-item a,
.jobs-download a {
    display: inline-flex;
}

.container[id] h1,
.container[id] h2,
.media-title,
.kunden-Box h1,
.jobs-Box h1,
.kontakt-Box h1 {
    display: flex;
    justify-content: center;
}

.ueber-uns-karte h2,
.ueber-uns-leistungsraster h3,
.ueber-uns-standort h2,
.ueber-uns-flaechen dt,
.impressum-container h1,
.datenschutz-container h1 {
    display: flex;
}

.impressum-container h1,
.datenschutz-container h1 {
    justify-content: center;
}

/* Einheitliche Grundform aller dekorativen Piktogramme. */
.service-item a::before,
.container[id] h1::before,
.container[id] h2::before,
.media-title::before,
.kunden-Box h1::before,
.jobs-Box h1::before,
.jobs-download a::before,
.kontakt-Box h1::before,
.kontakt-mail-button::before,
.impressum-container h1::before,
.datenschutz-container h1::before,
.ueber-uns-karte h2::before,
.ueber-uns-leistungsraster h3::before,
.ueber-uns-standort h2::before,
.ueber-uns-flaechen dt::before {
    content: "";
    display: inline-block;
    width: 1.1em;
    height: 1.1em;
    flex: 0 0 auto;
    background: currentColor;
    -webkit-mask: var(--piktogramm-datei) center / contain no-repeat;
    mask: var(--piktogramm-datei) center / contain no-repeat;
}

/* Eigenständige Symbole verwenden den in farben.css einstellbaren Akzentton. */
.container[id] h1::before,
.container[id] h2::before,
.media-title::before,
.kunden-Box h1::before,
.jobs-Box h1::before,
.kontakt-Box h1::before,
.impressum-container h1::before,
.datenschutz-container h1::before,
.ueber-uns-karte h2::before,
.ueber-uns-leistungsraster h3::before,
.ueber-uns-standort h2::before,
.ueber-uns-flaechen dt::before {
    background: var(--farbe-piktogramm);
}

/* Auf farbigen Buttons bleiben die Symbole unabhängig vom Modus weiß. */
.service-item a::before,
.jobs-download a::before,
.kontakt-mail-button::before {
    background: var(--farbe-piktogramm-auf-button);
}

/* Startseite: Zuordnung der Symbole zu den einzelnen Leistungsbereichen. */
.service-item a[href="steuerungstechnik.html"] {
    --piktogramm-datei: url("../img/piktogramme/cpu.svg");
}

.service-item a[href="maschinenbau.html"] {
    --piktogramm-datei: url("../img/piktogramme/cog.svg");
}

.service-item a[href="produkte.html"] {
    --piktogramm-datei: url("../img/piktogramme/boxes.svg");
}

.service-item a[href="media.html"] {
    --piktogramm-datei: url("../img/piktogramme/circle-play.svg");
}

.service-item a[href="client.html"] {
    --piktogramm-datei: url("../img/piktogramme/handshake.svg");
}

.service-item a[href="jobs.html"] {
    --piktogramm-datei: url("../img/piktogramme/briefcase-business.svg");
}

.service-item a[href="contact.html"] {
    --piktogramm-datei: url("../img/piktogramme/mail.svg");
}

/* Steuerungstechnik und Maschinenbau: Piktogramme in den Abschnittskapseln. */
#steuerungstechnik h1 {
    --piktogramm-datei: url("../img/piktogramme/cpu.svg");
}

#scada-systeme h2 {
    --piktogramm-datei: url("../img/piktogramme/gauge.svg");
}

#fehlersuche h2 {
    --piktogramm-datei: url("../img/piktogramme/search-check.svg");
}

#retrofit h2 {
    --piktogramm-datei: url("../img/piktogramme/refresh-cw.svg");
}

#maschinenbau h1 {
    --piktogramm-datei: url("../img/piktogramme/cog.svg");
}

#umbauten h2 {
    --piktogramm-datei: url("../img/piktogramme/refresh-cw.svg");
}

/* Bei der zweizeiligen Überschrift bleiben Symbol und Text als Gruppe mittig. */
#umbauten h2.lange-ueberschrift {
    display: block;
}

#umbauten h2.lange-ueberschrift::before {
    content: none;
}

#umbauten .lange-ueberschrift-inhalt {
    display: flex;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
    gap: 0.55em;
}

#umbauten .lange-ueberschrift-inhalt::before {
    content: "";
    width: 1.1em;
    height: 1.1em;
    flex: 0 0 auto;
    background: var(--farbe-piktogramm);
    -webkit-mask: var(--piktogramm-datei) center / contain no-repeat;
    mask: var(--piktogramm-datei) center / contain no-repeat;
}

#umbauten .lange-ueberschrift-inhalt > span {
    width: max-content;
    max-width: calc(100% - 1.65em);
    min-width: 0;
}

#roboterapplikationen h2 {
    --piktogramm-datei: url("../img/piktogramme/bot.svg");
}

#konzeption h2 {
    --piktogramm-datei: url("../img/piktogramme/drafting-compass.svg");
}

/* Media: Die vier Arbeitsschritte erhalten jeweils ein passendes Symbol. */
.media-title--aufbau {
    --piktogramm-datei: url("../img/piktogramme/hammer.svg");
}

.media-title--einstellung {
    --piktogramm-datei: url("../img/piktogramme/settings.svg");
}

.media-title--versand {
    --piktogramm-datei: url("../img/piktogramme/package-check.svg");
}

.media-title--optimierung {
    --piktogramm-datei: url("../img/piktogramme/gauge.svg");
}

/* Einzelne Unternehmensseiten. */
.kunden-Box h1 {
    --piktogramm-datei: url("../img/piktogramme/handshake.svg");
}

.jobs-Box h1 {
    --piktogramm-datei: url("../img/piktogramme/briefcase-business.svg");
}

.jobs-download a,
.impressum-container h1,
.datenschutz-container h1 {
    --piktogramm-datei: url("../img/piktogramme/file-text.svg");
}

.kontakt-Box h1,
.kontakt-mail-button {
    --piktogramm-datei: url("../img/piktogramme/mail.svg");
}

/* Über uns: Aussagen, Unternehmensbereiche, Standort und Flächen. */
.ueber-uns-karte:first-child h2 {
    --piktogramm-datei: url("../img/piktogramme/lightbulb.svg");
}

.ueber-uns-karte:nth-child(2) h2 {
    --piktogramm-datei: url("../img/piktogramme/puzzle.svg");
}

.ueber-uns-leistungsraster a[href="steuerungstechnik.html"] h3 {
    --piktogramm-datei: url("../img/piktogramme/cpu.svg");
}

.ueber-uns-leistungsraster a[href="maschinenbau.html"] h3 {
    --piktogramm-datei: url("../img/piktogramme/cog.svg");
}

.ueber-uns-leistungsraster a[href="maschinenbau.html#roboterapplikationen"] h3 {
    --piktogramm-datei: url("../img/piktogramme/bot.svg");
}

.ueber-uns-standort h2 {
    --piktogramm-datei: url("../img/piktogramme/map-pin.svg");
}

.ueber-uns-flaechen dl > div:nth-child(1) dt {
    --piktogramm-datei: url("../img/piktogramme/building-2.svg");
}

.ueber-uns-flaechen dl > div:nth-child(2) dt {
    --piktogramm-datei: url("../img/piktogramme/plug-zap.svg");
}

.ueber-uns-flaechen dl > div:nth-child(3) dt {
    --piktogramm-datei: url("../img/piktogramme/warehouse.svg");
}

.ueber-uns-flaechen dl > div:nth-child(4) dt {
    --piktogramm-datei: url("../img/piktogramme/boxes.svg");
}

.ueber-uns-flaechen dl > div:nth-child(5) dt {
    --piktogramm-datei: url("../img/piktogramme/car-front.svg");
}

.ueber-uns-flaechen dl > div:nth-child(6) dt {
    --piktogramm-datei: url("../img/piktogramme/layers.svg");
}

/* Projektablauf: Analyse, Planung, Aufbau, Inbetriebnahme und Optimierung. */
.ueber-uns-prozessschritte li:nth-child(1) {
    --piktogramm-datei: url("../img/piktogramme/search-check.svg");
}

.ueber-uns-prozessschritte li:nth-child(2) {
    --piktogramm-datei: url("../img/piktogramme/drafting-compass.svg");
}

.ueber-uns-prozessschritte li:nth-child(3) {
    --piktogramm-datei: url("../img/piktogramme/hammer.svg");
}

.ueber-uns-prozessschritte li:nth-child(4) {
    --piktogramm-datei: url("../img/piktogramme/settings.svg");
}

.ueber-uns-prozessschritte li:nth-child(5) {
    --piktogramm-datei: url("../img/piktogramme/gauge.svg");
}

.kontakt-mail-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: var(--farbe-kontakt-button);
    color: var(--farbe-kontakt-button-text);
    text-align: center;
    text-decoration: none;
}

.team-email-button {
    background: var(--farbe-team-email-hintergrund);
    color: var(--farbe-team-email-text);
}

.kontakt-mail-button:hover,
.team-email-button:hover {
    transform: translateY(-3px);
}

.kontakt-mail-button:hover {
    background: var(--farbe-kontakt-button-hover);
}

.kontakt-mail-button:focus-visible {
    outline: 3px solid var(--farbe-kontakt-button-hover);
    outline-offset: 3px;
}

.team-email-button:hover {
    background: var(--farbe-team-email-hover);
}

/* E-Mail-Schaltfläche auf der Karte des Geschäftsführers. */
.team-email-button {
    display: inline-block;
    margin-top: auto;
    text-decoration: none;
}


/* Der Browser weiß dadurch, dass Formulare im Dark Mode dunkel dargestellt werden. */
html[data-theme="dark"] {
    color-scheme: dark;
}

/* Rahmen und Schatten dürfen laut farben.css für beide Modi gemeinsam bleiben. */
html[data-theme="dark"] .box-1,
html[data-theme="dark"] .box-3,
html[data-theme="dark"] .team-Container,
html[data-theme="dark"] .media-Box,
html[data-theme="dark"] body.technical-page .container,
html[data-theme="dark"] body.technical-page .container + .row,
html[data-theme="dark"] .kunden-Box,
html[data-theme="dark"] .jobs-Box,
html[data-theme="dark"] .kontakt-Box {
    border-color: var(--rahmen-box-dunkel-12);
    box-shadow: 0 12px 30px var(--schatten-schwarz-35);
}

/* Die allgemeine dunkle Rahmenfarbe darf den farbigen Kartenakzent nicht überschreiben. */
html[data-theme="dark"] body.technical-page .box-1:not(.box-1--funktionsraster),
html[data-theme="dark"] body.technical-page .box-3 {
    border-top-color: var(--farbe-technik-funktionsakzent);
}

/* Kein Schatten an der inneren Verbindung von Überschrift und Inhalt. */
html[data-theme="dark"] body.technical-page .container,
html[data-theme="dark"] body.technical-page .container + .row {
    box-shadow: none;
}

/* ========================================================================== */
/* WEITERE SEITEN – MODERNE INDUSTRIE-LANDINGPAGE                            */
/* ========================================================================== */

/*
    Gemeinsame Bühne für Media, Kunden, Jobs, Kontakt, Team und Rechtliches.
    Jede Seite wählt darunter ein eigenes vorhandenes Hintergrundbild aus.
*/
body.industrial-design-page {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    --industrie-seitenbild: url("../img/maschinenbau/roboter.png");
}

body.media-design-page {
    --industrie-seitenbild: url("../img/media/aufbau-vorschau-hover.jpg");
    counter-reset: media-ablauf;
}

body.kunden-design-page {
    --industrie-seitenbild: url("../img/slideshow/slider23.png");
}

body.produkte-design-page {
    --industrie-seitenbild: url("../img/maschinenbau/maschinenbau2.png");
}

body.jobs-design-page,
body.kontakt-design-page {
    --industrie-seitenbild: url("../img/ueber-uns/firmensitz-krumbach.jpg");
}

body.team-design-page {
    --industrie-seitenbild: url("../img/slideshow/slider1.png");
}

body.industrial-design-page::before {
    content: "";
    position: fixed;
    inset: 0 0 0 var(--sidebar-width);
    z-index: 0;
    background-color: var(--farbe-ueber-uns-hintergrund-fallback);
    background-image:
        linear-gradient(145deg,
            var(--farbe-ueber-uns-hintergrund-filter-oben),
            var(--farbe-ueber-uns-hintergrund-filter-unten)),
        var(--industrie-seitenbild);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    pointer-events: none;
}

/* Alle Seiteninhalte liegen vor dem festen Hintergrund. */
body.industrial-design-page > :not(.sidebar):not(.nav-toggle):not(.nav-backdrop) {
    position: relative;
    z-index: 1;
}

/* Transparente Außenbereiche lassen das jeweilige Industriebild sichtbar. */
body.industrial-design-page .media-Bereich,
body.industrial-design-page .kunden-Bereich,
body.industrial-design-page .produkte-Bereich,
body.industrial-design-page .jobs-Bereich,
body.industrial-design-page .kontakt-Bereich {
    background: transparent;
}

/* Gemeinsame Kartengrundform – kräftige Typografie und blauer Oberrand. */
body.industrial-design-page .media-Box,
body.industrial-design-page .kunden-Box,
body.industrial-design-page .jobs-Box,
body.industrial-design-page .kontakt-Box,
body.industrial-design-page .team-Bereich,
body.industrial-design-page .impressum-container,
body.industrial-design-page .datenschutz-container {
    background: var(--farbe-ueber-uns-box);
    border: 1px solid var(--rahmen-box-hell-10);
    border-top: 4px solid var(--farbe-ueber-uns-link-hover);
    border-radius: 12px;
    box-shadow: 0 16px 36px var(--schatten-schwarz-18);
}

body.industrial-design-page .media-title,
body.industrial-design-page .kunden-Box h1,
body.industrial-design-page .jobs-Box h1,
body.industrial-design-page .kontakt-Box h1,
body.industrial-design-page .team-Bereich h1,
body.industrial-design-page .impressum-container h1,
body.industrial-design-page .datenschutz-container h1 {
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -0.025em;
}

/* Media wird als vierteiliger, nummerierter Projektablauf dargestellt. */
body.media-design-page .media-Bereich {
    padding-top: 30px;
    padding-bottom: 30px;
    counter-increment: media-ablauf;
}

body.media-design-page .media-Box {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    padding: clamp(28px, 4vw, 52px);
    overflow: hidden;
}

body.media-design-page .media-Box::after {
    content: counter(media-ablauf, decimal-leading-zero);
    position: absolute;
    top: 18px;
    right: 26px;
    color: var(--farbe-ueber-uns-link);
    font-size: clamp(2.8rem, 5vw, 4.6rem);
    font-weight: 900;
    line-height: 1;
    opacity: 0.16;
    pointer-events: none;
}

body.media-design-page > .media-Bereich:nth-of-type(odd) .media-Box {
    background: var(--farbe-ueber-uns-karte);
}

body.media-design-page .media-title {
    margin-bottom: 32px;
    font-size: clamp(2rem, 4vw, 3.4rem);
}

/* Kundenlogos stehen wie technische Referenzen auf einzelnen Modulkarten. */
body.kunden-design-page .kunden-Box {
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(36px, 5vw, 64px);
}

body.kunden-design-page .kunden-Box h1,
body.jobs-design-page .jobs-Box h1,
body.kontakt-design-page .kontakt-Box h1,
body.team-design-page .team-Bereich h1 {
    font-size: clamp(2.6rem, 5vw, 4.4rem);
}

body.kunden-design-page .kunden-item {
    min-width: 220px;
    min-height: 150px;
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--farbe-ueber-uns-karte);
    border: 1px solid var(--rahmen-box-hell-10);
    border-top: 3px solid var(--farbe-ueber-uns-link-hover);
    border-radius: 8px;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

body.kunden-design-page .kunden-item:hover {
    transform: translateY(-4px);
    border-color: var(--farbe-ueber-uns-link-hover);
}

/* Jobs: klare Dokumentfläche mit kurzem, kräftigem Trenner. */
body.jobs-design-page .jobs-Box {
    max-width: 1100px;
    padding: clamp(36px, 5vw, 60px);
}

body.jobs-design-page .jobs-divider {
    width: 90px;
    height: 4px;
    background: var(--farbe-ueber-uns-link-hover);
}

body.jobs-design-page .jobs-pdf-wrapper {
    border: 1px solid var(--rahmen-box-hell-10);
    border-radius: 8px;
}

/* Kontakt: ruhiger Infobereich links, klare Handlungsfläche rechts. */
body.kontakt-design-page .kontakt-Box {
    max-width: 1000px;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
    overflow: hidden;
    background: var(--farbe-ueber-uns-box);
}

body.kontakt-design-page .kontakt-inhalt {
    padding: clamp(42px, 6vw, 72px);
}

body.kontakt-design-page .kontakt-Box h1 {
    justify-content: flex-start;
    margin-bottom: 28px;
    text-align: left;
    color: var(--farbe-kontakt-ueberschrift);
}

body.kontakt-design-page .kontakt-text {
    margin: 0;
    text-align: left;
    color: var(--farbe-kontakt-text);
}

body.kontakt-design-page .kontakt-aktion {
    min-height: 360px;
    padding: 42px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
    background: var(--farbe-ueber-uns-hintergrund-fallback);
}

body.kontakt-design-page .kontakt-aktion-symbol {
    width: 84px;
    height: 84px;
    background: var(--farbe-ueber-uns-button-text);
    -webkit-mask: url("../img/piktogramme/mail.svg") center / contain no-repeat;
    mask: url("../img/piktogramme/mail.svg") center / contain no-repeat;
    opacity: 0.92;
}

body.kontakt-design-page .kontakt-mail-button {
    width: min(100%, 320px);
    color: var(--farbe-kontakt-aktion-button-text);
    background: var(--farbe-ueber-uns-button-text);
    border-radius: 4px;
}

body.kontakt-design-page .kontakt-mail-button::before {
    background: currentColor;
}

body.kontakt-design-page .kontakt-mail-button:hover {
    color: var(--farbe-ueber-uns-button-text);
    background: var(--farbe-ueber-uns-link-hover);
}

/* Team: große gemeinsame Fläche, einzelne Personen als präzise Karten. */
body.team-design-page .team-Container {
    background: var(--farbe-ueber-uns-karte);
    border-top: 4px solid var(--farbe-ueber-uns-link-hover);
    border-radius: 10px;
}

/* Rechtstexte bleiben ruhig und lesbar, erhalten aber klare Abschnittsmarker. */
body.recht-design-page .impressum-container,
body.recht-design-page .datenschutz-container {
    max-width: 1200px;
    background: var(--farbe-ueber-uns-box);
}

body.recht-design-page .impressum-container h1,
body.recht-design-page .datenschutz-container h1 {
    justify-content: flex-start;
    font-size: clamp(2.5rem, 5vw, 4rem);
}

body.recht-design-page .impressum-container h2,
body.recht-design-page .datenschutz-container h2 {
    padding-left: 14px;
    border-left: 4px solid var(--farbe-ueber-uns-link-hover);
    font-weight: 800;
}

/* 404-Seite: große, aber rein dekorative Fehlernummer. */
body.error-design-page .kontakt-Box {
    max-width: 1000px;
    padding: clamp(42px, 7vw, 80px);
    text-align: center;
}

body.error-design-page .kontakt-Box::before {
    content: "404";
    display: block;
    margin-bottom: 24px;
    color: var(--farbe-ueber-uns-link);
    font-size: clamp(5rem, 15vw, 10rem);
    font-weight: 900;
    /* Volle Zeilenhöhe verhindert eine Überschneidung mit der Überschrift. */
    line-height: 1;
    letter-spacing: 0.02em;
    opacity: 0.16;
}

/*
    Dezente Außenrahmen: Die jeweilige Farbe ist für Light und Dark Mode
    getrennt in farben.css einstellbar.
*/
html[data-theme="light"] .ueber-uns-Box,
html[data-theme="light"] .startseite-Box,
html[data-theme="light"] .technical-landing-Box {
    border-color: var(--farbe-design-rahmen-dezent);
    background-clip: padding-box;
}

html[data-theme="light"] body.industrial-design-page .media-Box,
html[data-theme="light"] body.industrial-design-page .kunden-Box,
html[data-theme="light"] body.industrial-design-page .produkte-Box,
html[data-theme="light"] body.industrial-design-page .jobs-Box,
html[data-theme="light"] body.industrial-design-page .kontakt-Box,
html[data-theme="light"] body.industrial-design-page .team-Bereich,
html[data-theme="light"] body.industrial-design-page .impressum-container,
html[data-theme="light"] body.industrial-design-page .datenschutz-container {
    border-right-color: var(--farbe-design-rahmen-dezent);
    border-bottom-color: var(--farbe-design-rahmen-dezent);
    border-left-color: var(--farbe-design-rahmen-dezent);
    background-clip: padding-box;
}

html[data-theme="dark"] body.produkte-design-page .produkte-Box {
    border-color: var(--rahmen-box-dunkel-12);
    border-top-color: var(--farbe-produkte-akzent);
    box-shadow: 0 12px 30px var(--schatten-schwarz-35);
}

/* Die äußere Box übernimmt die Rundung; dadurch bleibt kein heller Spalt sichtbar. */
html[data-theme="light"] .startseite-einleitung,
html[data-theme="light"] body.technical-page .technical-landing-Box > .slideshow {
    border-radius: 0;
}

html[data-theme="light"] body.kontakt-design-page .kontakt-aktion {
    margin: -1px -1px -1px 0;
}

/* Dezenter blauer Außenrahmen der drei großen Unternehmens-/Technikboxen. */
.ueber-uns-Box,
body.technical-page .technical-landing-Box {
    border: 2px solid var(--farbe-hauptbox-rahmen);
}

/* Standalone-Karten werden auf großen Bildschirmen im Inhaltsbereich zentriert. */
@media (min-width: 1025px) {
    body.industrial-design-page .team-Bereich,
    body.industrial-design-page .impressum-container,
    body.industrial-design-page .datenschutz-container {
        width: min(calc(100% - var(--sidebar-width) - 80px), 1200px);
        margin-top: 40px;
        margin-bottom: 40px;
        margin-left: max(calc(var(--sidebar-width) + 40px), calc(50% + var(--sidebar-half-width) - 600px));
    }
}

/* Verhindert unnötige Übergänge, wenn reduzierte Bewegung eingestellt ist. */
@media (prefers-reduced-motion: reduce) {
    .theme-toggle,
    .theme-toggle-option,
    .produkt-karte,
    .produkt-anfrage,
    .produkte-sprungnavigation a,
    .software-screenshot-button img,
    .software-bilddialog-navigation {
        transition: none;
        animation: none;
    }
}