/* ==========================================================================
   id4web – Haus Elise – Custom Overrides
   Portiert aus custom.less (TYPO3 9.5 / bootstrap_package v11, Bootstrap 4)
   und fuer Bootstrap Package v16 (Bootstrap 5) adaptiert.
   Farben:
     brand-primary   #4A4542   brand-secondary #968C86
     brand-third     #689596   gray-lighter    #eeeeee
   HINWEIS: BS16 setzt Navbar/Frame-Farben teils per CSS-Custom-Properties und
   !important. Brand-Overrides daher gezielt mit !important bzw. via --bs-/--frame-Vars.
   ========================================================================== */

/* --- Grundschrift (alt: font-family-base 18px / weight 300 / lh 1.75) --- */
body {
    font-weight: 300;
    font-size: 18px;
    line-height: 1.75;
}

/* --- Ueberschriften: h1 = primary (uppercase), h2/h3/h4 = secondary --- */
h1, .h1 { color: #4A4542; text-transform: uppercase; }
h2, h3, h4, .h2, .h3, .h4 { color: #968C86; }

/* --- Links rendern als brand-secondary (alt: custom.less a{}) --- */
a { color: #968C86; }
a:hover, a:focus { color: #6f665f; }

/* --- Fette Schrift: BS5-Reboot setzt strong{font-weight:bolder}; bei Grund-
   gewicht 300 ergibt das nur 400 (nicht sichtbar). Absolut 700 erzwingen. --- */
b, strong, .fw-bold, .fw-bolder { font-weight: 700 !important; }

/* --- Buttons ohne Abrundung (alt: border-radius 0) --- */
.btn, .navbar-toggler, .form-control, .card, .frame-inner .btn {
    border-radius: 0 !important;
}

/* --- Card-Menu: Bild + Titel klickbar (id4web MenuCardList-Override) --- */
.card-menu .card-img-link { display: block; }
.card-menu .card-img-link:hover { opacity: 0.92; }
.card-menu .card-title-link { color: inherit; text-decoration: none; }
.card-menu .card-title-link:hover,
.card-menu .card-title-link:focus { color: #968C86; }

/* ==========================================================================
   NAVBAR  (alt: taupe, weisses Menü, oben höher -> schrumpft beim Scrollen)
   navigation.style = default-transition -> Klasse navbar-default-transition,
   beim Scrollen kommt navbar-transition dazu.
   ========================================================================== */
.navbar-mainnavigation {
    --mainnavigation-nav-height: 140px;   /* oben: hoch wie Originalseite */
}
/* geschrumpft beim Runterscrollen */
.navbar-mainnavigation.navbar-transition {
    --mainnavigation-nav-height: 80px;
}
/* Hintergrund taupe in ALLEN Zuständen (Theme setzt sonst transparent/weiss !important) */
.navbar-mainnavigation.navbar-default,
.navbar-mainnavigation.navbar-default-transition,
.navbar-mainnavigation.navbar-default-transition.navbar-transition,
.navbar-mainnavigation.navbar-default-transition:not(.navbar-transition) {
    background-color: #968C86 !important;
    border-color: #8c8178;
}
/* Navigationslinks + Marke + Toggler in Weiss */
.navbar-mainnavigation .navbar-nav .nav-link,
.navbar-mainnavigation .navbar-brand,
.navbar-mainnavigation .navbar-toggler {
    color: #ffffff !important;
}
.navbar-mainnavigation .navbar-nav .nav-link:hover,
.navbar-mainnavigation .navbar-nav .nav-link:focus,
.navbar-mainnavigation .navbar-nav .nav-item.active > .nav-link,
.navbar-mainnavigation .navbar-nav .nav-link.active {
    color: #cccccc !important;
}
/* Menüpunkte: Grossbuchstaben + minimal grössere Schrift */
.navbar-mainnavigation .nav-item { text-transform: uppercase; }
.navbar-mainnavigation .navbar-nav .nav-link { font-size: 1.05rem; }
/* Hauptmenü rechtsbündig (Desktop) */
@media (min-width: 992px) {
    .navbar-mainnavigation .navbar-collapse { justify-content: flex-end; }
    .navbar-mainnavigation .navbar-nav { margin-left: auto; }
}

/* --- Logo füllt die Navbar fast randfüllend (wie Originalseite), schrumpft mit --- */
.navbar-mainnavigation .navbar-brand-image img {
    max-height: calc(var(--mainnavigation-nav-height) * 0.95) !important;
    width: auto;
}

/* --- Dropdown (alt: dropdown-bg secondary, Links weiss) --- */
.navbar-mainnavigation .dropdown-menu {
    background-color: #968C86;
    border-color: #8c8178;
}
.navbar-mainnavigation .dropdown-menu .nav-link,
.navbar-mainnavigation .dropdown-menu .dropdown-item {
    color: #ffffff !important;
}
.navbar-mainnavigation .dropdown-menu .nav-link:hover,
.navbar-mainnavigation .dropdown-menu .nav-link:focus,
.navbar-mainnavigation .dropdown-menu .dropdown-item:hover,
.navbar-mainnavigation .dropdown-menu .dropdown-item:focus {
    background-color: #cccccc;
    color: #968C86 !important;
}

/* ==========================================================================
   FOOTER  (alt: footer-bg secondary, footer-meta darken(3%), Text weiss)
   Theme-Default ist dunkelgrau (#313131/#212121) + --frame-* Vars.
   ========================================================================== */
.footer-section-content {
    background: #968C86 !important;
    --frame-color: #ffffff;
    --frame-background: #968C86;
    --frame-link-color: #ffffff;
    --frame-link-hover-color: #6f665f;
    color: #ffffff;
}
.footer-section-meta {
    background: #8d8279 !important;
    --frame-color: #ffffff;
    --frame-background: #8d8279;
    --frame-link-color: #ffffff;
    --frame-link-hover-color: #6f665f;
    color: #ffffff;
}
.footer-section a, .footer-copyright a, .footer-meta a { color: #ffffff; }
.footer-section a:hover, .footer-copyright a:hover, .footer-meta a:hover { color: #6f665f; }
.footer-section .frame-inner h2 { text-transform: uppercase; }

/* ==========================================================================
   Sektionen / Frames  (aus custom.less)
   ========================================================================== */
.section-light { background: none; }
.frame-background-light h4 a:not(.btn) { color: #968C86; }
.frame-ruler-after, .frame-ruler-before {
    margin-bottom: 0.5em;
    border-color: #968C86;
}

/* texticon (aus custom.less) */
.texticon-right .texticon-icon { margin-bottom: 1.1em; }

/* Adress-Content-Element (aus custom.less) */
.address-title, .address-phone, .address-fax, .address-email { margin-bottom: 0; }

/* Kontakt (uid64): kleines Logo-SVG – BS16 skaliert SVG in textpic sonst auf
   volle Spaltenbreite (imagewidth wird für SVG ignoriert). */
#c64 .ce-media img,
#c64 img { max-width: 180px; height: auto; }

/* menu_subpages rechtsbuendig (aus custom.less) */
.frame-type-menu_subpages ul { list-style: none; text-align: right; }
.frame-type-menu_subpages li { padding: 5px; float: right; }

/* ==========================================================================
   Sprachumschalter oben in der Navbar (Dropdown)
   ========================================================================== */
/* Desktop: ganz oben am Navbar-Rand (top:0, wie Referenz), Menue darunter.
   Bezugspunkt ist #page-header (sticky) – NICHT der vertikal zentrierte Container. */
.navbar-mainnavigation .navbar-collapse { flex-wrap: wrap; }
.navbar-mainnavigation .mainlang {
    display: flex;
    align-items: center;
    z-index: 1080;
}
.navbar-mainnavigation .mainlang-inner { display: flex; justify-content: flex-end; }
@media (min-width: 992px) {
    .navbar-mainnavigation .mainlang {
        position: fixed; /* wie Referenz: fester Streifen ganz oben im Viewport */
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        flex: none;
        margin: 0;
        padding-top: 4px;
        pointer-events: none; /* Navbar darunter bleibt klickbar */
    }
    .navbar-mainnavigation .mainlang .dropdownlang { pointer-events: auto; }

    /* Beim Scrollen schrumpft die Navbar (141px -> 81px) und das Menue rueckt
       nach oben. Damit es nicht mit dem Sprachstreifen kollidiert, wird dieser
       ausgeblendet und erscheint wieder, sobald man nach oben scrollt. */
    .navbar-mainnavigation .mainlang {
        transition: opacity 0.25s ease, visibility 0.25s ease;
    }
    .navbar-mainnavigation.navbar-transition .mainlang {
        opacity: 0;
        visibility: hidden;
    }
}
.dropdownlang { position: relative; display: inline-block; }
.dropdownlang-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: transparent;
    border: 0;
    padding: 4px 6px;
    color: #ffffff;
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
}
.dropdownlang-toggle:hover,
.dropdownlang-toggle:focus { color: #cccccc; outline: none; }
#active-language { display: inline-flex; align-items: center; gap: 0.35rem; }
.dropdownlang .icon-markup img { display: block; width: 20px; height: 16px; }
.dropdownlang-caret { font-size: 0.6em; }

.dropdownlang-content {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 140px;
    margin: 4px 0 0;
    padding: 4px 0;
    list-style: none;
    background: #ffffff;
    border: 1px solid #8c8178;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    z-index: 1060;
}
.dropdownlang:hover .dropdownlang-content,
.dropdownlang:focus-within .dropdownlang-content { display: block; }

.dropdownlang-content li { margin: 0; }
.dropdownlang-content li a,
.dropdownlang-content li .langunavailable {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.85rem;
    color: #4A4542;
    text-decoration: none;
    white-space: nowrap;
}
.dropdownlang-content li a:hover,
.dropdownlang-content li a:focus { background: #f1efed; color: #4A4542; }
.dropdownlang-content li.active a { font-weight: 700; }
.dropdownlang-content .langgrayscale img { filter: grayscale(1); opacity: 0.45; }
.dropdownlang-content li.text-muted .langtitle { color: #999999; }

/* Mobile: Umschalter oben MITTIG, immer sichtbar (nicht im Burger-Menue) */
@media (max-width: 991.98px) {
    .navbar-mainnavigation .mainlang {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        margin: 0;
        padding-top: 4px;
        justify-content: center;
        pointer-events: none;
    }
    .navbar-mainnavigation .mainlang-inner { justify-content: center; }
    .navbar-mainnavigation .mainlang .dropdownlang { pointer-events: auto; }
    /* Dropdown mittig unter dem Trigger */
    .dropdownlang-content {
        right: auto;
        left: 50%;
        transform: translateX(-50%);
    }
}

/* ==========================================================================
   Easter Egg: 3x Klick aufs Herz im Footer -> id4web-Logo-Regen (3 Sek.)
   ========================================================================== */
.id4web-heart {
    cursor: pointer;
    display: inline-block;
    transition: transform 0.15s ease;
}
.id4web-heart:hover { transform: scale(1.25); }
.id4web-heart:active { transform: scale(0.9); }

.id4web-rain-logo {
    position: fixed;
    top: 0;
    z-index: 99999;
    pointer-events: none;
    will-change: transform, opacity;
    animation-name: id4webFall;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
}
@keyframes id4webFall {
    0%   { transform: translate(0, -15vh) rotate(calc(var(--id4web-tilt, 8deg) * -1)); opacity: 0; }
    10%  { opacity: 0.95; }
    50%  { transform: translate(calc(var(--id4web-drift, 0px) / 2), 50vh) rotate(var(--id4web-tilt, 8deg)); }
    100% { transform: translate(var(--id4web-drift, 0), 115vh) rotate(calc(var(--id4web-tilt, 8deg) * -1)); opacity: 0.95; }
}