html {
    font-size: 14px;
}


:root {
    /* Hauptfarbe (Orange) */
    --color-sf-primary: rgba(255, 122, 0, 1);
    /* Textfarbe auf Primary-Flächen (Buttons etc.) */
    --color-sf-primary-text-color: #fff;
    /* Abstufungen (für Hover/Focus/States) */
    --color-sf-primary-light: #ffd2ad;
    --color-sf-primary-lighter: #fff0e6;
    --color-sf-primary-dark: #cc6200;
    --color-sf-primary-darker: #994900;
}


@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

.bg-light {
    --bs-bg-opacity: 1;
    background-color: white !important;
}

/* Mega über volle Breite */
.dropdown-mega {
    position: static;
}

    .dropdown-mega .dropdown-menu {
        width: 100%;
        left: 0;
        right: 0;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

/* Desktop: Hover öffnet Menü */
@media (min-width: 992px) {
    .dropdown-mega:hover > .dropdown-menu {
        display: block;
    }
    /* optional: Tastatur-Fokus öffnet auch */
    .dropdown-mega:focus-within > .dropdown-menu {
        display: block;
    }
}

/* Mobile: Dropdown wird vom Bootstrap-Skript per Klick gesteuert */
@media (max-width: 991.98px) {
    .dropdown-mega .dropdown-menu {
        position: static;
        box-shadow: none;
    }
}

.offcanvas, .offcanvas-lg, .offcanvas-md, .offcanvas-sm, .offcanvas-xl, .offcanvas-xxl {
    --bs-offcanvas-zindex: 1045;
    --bs-offcanvas-width: 400px;
    --bs-offcanvas-height: 100%;
    --bs-offcanvas-padding-x: 1rem;
    --bs-offcanvas-padding-y: 1rem;
    --bs-offcanvas-color: var(--bs-body-color);
    --bs-offcanvas-bg: var(--bs-body-bg);
    --bs-offcanvas-border-width: var(--bs-border-width);
    --bs-offcanvas-border-color: var(--bs-border-color-translucent);
    --bs-offcanvas-box-shadow: var(--bs-box-shadow-sm);
    --bs-offcanvas-transition: transform 0.3s ease-in-out;
    --bs-offcanvas-title-line-height: 1.5;
}


@media (max-width: 991.98px) {
    .megamenu-container {
        display: none !important;
    }
}

/* Mega-Dropdown über volle Viewport-Breite */
.dropdown-mega {
    position: static;
}

    .dropdown-mega .dropdown-menu {
        width: 100vw; /* volle Bildschirmbreite */
        left: 0;
        right: 0;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    /* Optisch ruhiger: Panel ohne Einrückung */
    .dropdown-mega .dropdown-item {
        padding-left: 0;
    }

/* Falls der Navbar-Hintergrund nahtlos sein soll */
.navbar.border-bottom .dropdown-menu {
    border-top: 1px solid rgba(0,0,0,.08); /* leichte Trennlinie */
}

/* Full-width trotz .container-Eltern */
.dropdown-mega .dropdown-menu {
    width: 100vw;
    margin-left: calc((100vw - 100%) / -2);
    margin-right: calc((100vw - 100%) / -2);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* Mega-Dropdown über volle Bildschirmbreite */
.dropdown-mega {
    position: static;
}

    .dropdown-mega .dropdown-menu {
        width: 100vw; /* volle Viewport-Breite */
        left: 0;
        right: 0;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    /* Optional: wenn du die Navbar mit .container behältst,
   gleicht dieser Trick die Seitenränder aus */
    .dropdown-mega .dropdown-menu {
        margin-left: calc((100vw - 100%) / -2);
        margin-right: calc((100vw - 100%) / -2);
    }

    /* Ruhigeres Panel-Layout */
    .dropdown-mega .dropdown-item {
        padding-left: 0;
    }

.navbar-nav {
    margin-left: 50px !important;
}

/* EJ2 Accordion: Header auf Mobile umbrechen lassen */
.e-accordion .e-acrdn-header .e-acrdn-header-content {
    white-space: normal !important;
    overflow: visible !important;
    line-height: 1.25;
    overflow-wrap: anywhere; /* lange Wörter/URLs umbrechen */
    word-break: break-word;
    min-width: 0; /* wichtig, falls Flex-Layout */
}

/* Falls der Header eine feste Höhe hat */
.e-accordion .e-acrdn-header {
    height: auto !important;
    align-items: flex-start; /* wenn Flex aktiv ist */
}

/* Optional: auf sehr kleinen Screens etwas kompakter */
@media (max-width: 576px) {
    .e-accordion .e-acrdn-header .e-acrdn-header-content {
        font-size: 0.95rem;
        padding-right: 2.25rem; /* Platz für Toggle/Icon rechts */
    }
}