/* ---------------------------------------------------------------------------
   Die Seite ist durchgängig dunkel gestaltet – es gibt keinen separaten
   Light-/Dark-Mode mehr. Alle Regeln hier gelten unabhängig vom Farbschema
   des Systems.

   Der Block am Ende der Datei greift nur im Dark-Mode und senkt dort
   lediglich die weiße Schrift und die Bilder leicht ab.
   --------------------------------------------------------------------------- */

body, .accordion {
    background-color: var(--color-grey-main);
}

body, main p, .accordion {
    color: var(--color-white);
}
/* Footer war eine vollflächig rote Kachel und fiel damit aus der sonst
   durchgehend dunklen Seite heraus. Jetzt dunkel mit rotem Rahmen –
   dieselbe Sprache wie Dropdown-Oberkante und Zitatkarten. */
/* Footer als Box in der Optik des Kontaktformulars: leichte Fläche, feiner
   Rahmen, Farbkante oben (die Kante liegt in style.common.css als ::before) */
footer .container {
    background-color: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .12);
}
.panel .index {
    background-color: var(--color-red-main);
}

a:not(.button), a:not(.button):focus {
    color: var(--color-white) !important;
}
a:not(.button):hover, .nav-link.active {
    color: var(--color-red-main) !important;
}

/* Bildvarianten: da die Seite immer dunkel ist, wird durchgängig das
   Asset für dunklen Hintergrund (*.dark.*) gezeigt. Überschreibt die
   schemaabhängige Umschaltung aus core.glanzbox.com. */
.light {
    display: none !important;
}
.dark {
    display: block !important;
}

/* Buttons */

.button.style1 {
    color: var(--color-white);
    background-color: var(--color-red-main);
    border-color: var(--color-red-main);
}
.button.style1:hover, .button.style2:hover, .button.style3:hover {
    background-color: var(--color-red-dark);
    border-color: var(--color-red-dark);
}

/* style2 hatte Hintergrund und Rahmen in --color-grey-main und war damit
   auf der dunklen Seite unsichtbar – jetzt als Outline-Button. */
.button.style2 {
    color: var(--color-white);
    background-color: transparent;
    border-color: var(--color-white);
}

.button.style3 {
    color: var(--color-grey-dark);
    background-color: var(--color-white);
    border-color: var(--color-grey-dark);
}
.button.style3:hover {
    color: var(--color-white);
}

/* Header */

header {
    background-color: var(--color-grey-dark);
}

@media (min-width: 1400px) {
    header {
        background: linear-gradient(0deg,
        rgba(29, 29, 27, .5) 10px, rgba(29, 29, 27, .5) 10px,
        rgba(29, 29, 27, .6) 20px, rgba(29, 29, 27, .6) 20px,
        rgba(29, 29, 27, .7) 30px, rgba(29, 29, 27, .7) 30px,
        rgba(29, 29, 27, .7) 20px, rgba(29, 29, 27, 1) 100%);
    }
}

header nav .offcanvas.show, header nav .offcanvas.showing {
    background: rgba(0, 0, 0, .75);
}
header nav .offcanvas-backdrop {
    background: rgba(0, 0, 0, .2);
}

/* Dropdown */

.dropdown-menu {
    /* Deckend – halbtransparent sah ohne Blur wie ein Darstellungsfehler aus */
    background-color: var(--color-grey-main);
}
/* Der Toggle ist ein <button> und wird deshalb von den a-Regeln oben nicht
   erfasst. :not(.button) grenzt die Nav-Toggles von den Widget-Buttons ab,
   die ihre Farbe aus .button.styleX beziehen. */
.dropdown > button:not(.button), .dropdown > button:not(.button):focus {
    color: var(--color-white);
}
.dropdown > button:not(.button):hover,
.dropdown > button:not(.button)[aria-expanded="true"] {
    color: var(--color-red-main);
}
.dropdown-item:focus, .dropdown-item:hover {
    background-color: transparent;
}

/* Bootstrap-Hilfsklassen auf dunklem Grund lesbar halten */

.text-muted {
    color: rgba(255, 255, 255, .55) !important;
}

/* Intro */

section.intro > .row {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 25%, rgba(0, 0, 0, .75) 100%)
}

section.intro h3, section.intro p {
    color: var(--color-white);
}

@supports (backdrop-filter: none) or (-webkit-backdrop-filter: none) {
    /* Vertikaler Verlauf im selben Lauf wie die gestufte Unschärfe:
       oben durchlässig, nach unten dichter, wo der Text steht. */
    section.intro .box {
        background: linear-gradient(180deg,
        rgba(29, 29, 29, .30) 0%,
        rgba(29, 29, 29, .58) 45%,
        rgba(29, 29, 29, .82) 100%);
    }
}

@supports not ((backdrop-filter: none) or (-webkit-backdrop-filter: none)) {
    section.intro .box {
        background: var(--color-grey-dark);
    }
}

/* Formulare */

.form-control {
    color: var(--color-white);
    background-color: var(--color-grey-dark);
}
/* Beim Tippen bleibt der Feldhintergrund dunkel – die rote Vollfläche
   machte den eigenen Text schwer lesbar. Rot markiert nur noch den Rahmen. */
.form-control:focus {
    color: var(--color-white);
    background-color: var(--color-grey-dark);
    border-color: var(--color-red-main);
}

/* Accordion */

.accordion-button.collapsed {
    color: var(--color-white);
}
.accordion-button:not(.collapsed) {
    color: var(--color-red-main);
}

/* Modal / Toast */

.modal-content {
    -webkit-box-shadow: 0 0 30px 30px var(--color-grey-dark);
    box-shadow: 0 0 30px 30px var(--color-grey-dark);
}
.modal-backdrop, .toast {
    background: var(--color-grey-dark);
}

/* Lightbox / Carousel */

.lightbox-caption em {
    color: var(--color-white);
}

.carousel-control-prev-icon:after, .carousel-control-next-icon:after {
    color: var(--color-white);
    background-color: var(--color-grey-dark);
}
.carousel-caption {
    background-color: rgba(29, 29, 27, .8);
}

/* ---------------------------------------------------------------------------
   Dark-Mode: kein eigenes Design, nur eine leichte Absenkung von Schrift
   und Bildern.
   --------------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
    body, main p, .accordion,
    section.intro h1, section.intro h2, section.intro h3 {
        color: var(--color-white-dimmed);
    }
    a:not(.button), a:not(.button):focus {
        color: var(--color-white-dimmed) !important;
    }

    /* Ersetzt das kräftigere brightness/contrast/grayscale aus core.glanzbox.com */
    img:not(.protected), video {
        filter: brightness(.92);
    }

    /* Die Bildebene des Heros liegt auf ::before und bringt bereits einen
       Filter mit – im Dark-Mode nur eine Spur weiter abgesenkt. */
    section.intro::before {
        filter: grayscale(.45) contrast(1.08) brightness(.55) saturate(1.15);
    }
}