@import url('variables.css');

a, i, cite, em, var, address, dfn, ol, li, ul {
    font-style: normal;
    font-weight: 400;
}

h1 {
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
}

/*
 * Hauptnavi
 */
.custom-navbar {
    background-color: var(--fwww-nav-bg-initial);
    transition: background-color var(--fwww-nav-transition-speed) ease-in-out,
    box-shadow var(--fwww-nav-transition-speed) ease-in-out;
    /* Initialer Zustand auf Desktop (Standard: ab 1200px XL-Screens) */
    height: 130px;
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    align-items: center;
}

.custom-navbar .navbar-brand,
.custom-navbar .navbar-nav .nav-link {
    color: var(--fwww-nav-text-initial);
    transition: color var(--fwww-nav-transition-speed) ease-in-out;
}

/* Übergang von Bootstrap-Container auf 100% Höhe zwingen */
.custom-navbar > .container,
.custom-navbar > .container .collapse {
    height: 100%;
    align-items: center;
}

/* Zustand nach dem Scrollen */
.custom-navbar.scrolled {
    background-color: var(--fwww-nav-bg-scrolled);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.custom-navbar.scrolled .navbar-brand,
.custom-navbar.scrolled .navbar-nav .nav-link {
    color: var(--fwww-nav-text-scrolled);
}

/* Anpassung des Mobile-Hamburger-Icons */
.custom-navbar .navbar-toggler {
    border-color: transparent;
}

.custom-navbar .navbar-toggler-icon {
    filter: invert(1) grayscale(100%) brightness(0.2);
    transition: filter var(--fwww-nav-transition-speed) ease-in-out;
}

.custom-navbar.scrolled .navbar-toggler-icon {
    filter: invert(0);
}

.custom-navbar .navbar-nav .nav-item.active .nav-link,
.custom-navbar .navbar-nav .nav-link:hover {
    opacity: 0.8;
}

.custom-navbar .navbar-nav .nav-link {
    font-family: 'Source Sans 3', sans-serif;
    font-size: 20px;
    font-weight: 700;
    font-style: italic;
    padding-left: 15px !important;
    padding-right: 15px !important;
    transition: color var(--fwww-nav-transition-speed) ease-in-out;
}

/*
 * Hauptnavi (not scrolled)
 */
.custom-navbar:not(.scrolled) .navbar-nav .nav-link {
    color: var(--fwww-nav-text-initial);
}

.custom-navbar:not(.scrolled) .navbar-nav .nav-link:hover,
.custom-navbar:not(.scrolled) .navbar-nav .nav-item.active .nav-link {
    color: var(--fwww-nav-text-hover-initial);
}

/*
 * Hauptnavi (scrolled)
 */
.custom-navbar.scrolled .navbar-nav .nav-link,
.custom-navbar.scrolled .navbar-nav .nav-item.active .nav-link {
    color: var(--fwww-nav-text-scrolled);
}

.custom-navbar.scrolled .navbar-nav .nav-link:hover {
    color: var(--fwww-nav-text-hover-scrolled) !important;
    opacity: 1 !important;
}

/**
 * DROPDOWN
 **/
.custom-navbar .dropdown-menu .dropdown-item {
    font-family: 'Source Sans 3', sans-serif;
    font-size: 20px;
    font-weight: 700;
    font-style: italic;
    padding: 8px 20px;
    transition: color var(--fwww-nav-transition-speed) ease-in-out,
    background-color var(--fwww-nav-transition-speed) ease-in-out;
}

/*
 * DROPDOWN (not scrolled)
 */
.custom-navbar:not(.scrolled) .dropdown-menu {
    background-color: var(--fwww-dropdown-bg-initial);
    border: 0 none;
}

.custom-navbar:not(.scrolled) .dropdown-menu .dropdown-item {
    color: var(--fwww-dropdown-text-initial) !important;
    background-color: transparent !important;
}

.custom-navbar:not(.scrolled) .dropdown-menu .dropdown-item.active,
.custom-navbar:not(.scrolled) .dropdown-menu .dropdown-item:active,
.custom-navbar:not(.scrolled) .dropdown-menu .dropdown-item:hover {
    color: var(--fwww-dropdown-text-hover-initial) !important;
}

/*
 * DROPDOWN (scrolled)
 */
.custom-navbar.scrolled .dropdown-menu {
    background-color: var(--fwww-dropdown-bg-scrolled);
    border: 0 none;
}

.custom-navbar.scrolled .dropdown-menu .dropdown-item {
    color: var(--fwww-dropdown-text-scrolled) !important;
    background-color: transparent !important;
    opacity: 1 !important;
}

.custom-navbar.scrolled .dropdown-menu .dropdown-item.active,
.custom-navbar.scrolled .dropdown-menu .dropdown-item:active,
.custom-navbar.scrolled .dropdown-menu .dropdown-item:hover,
.custom-navbar.scrolled .dropdown-menu .dropdown-item:focus {
    color: var(--fwww-dropdown-text-hover-scrolled) !important;
    background-color: transparent !important;
    opacity: 1 !important;
}

/**
 * Logo in Haupt-Navigation
 */
.logo-container {
    position: relative;
    display: inline-block;
    height: 100%; /* Nimmt immer die volle Höhe der Navbar an */
    min-width: 120px; /* Verhindert ein Zusammenstauchen bei fehlender Grafik */
}

.logo-img {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    max-height: 100%; /* Begrenzt das Logo exakt auf die Navbar-Höhe */
    width: auto; /* Behält das originale Seitenverhältnis bei */
    transition: opacity var(--fwww-nav-transition-speed) ease-in-out;
}

/* Initialer Zustand: Helles Logo sichtbar */
.logo-container .logo-dark {
    opacity: 0;
}

.logo-container .logo-light {
    opacity: 1;
}

/* Scrolled Zustand: Dunkles Logo sichtbar */
.custom-navbar.scrolled .logo-container .logo-dark {
    opacity: 1;
}

.custom-navbar.scrolled .logo-container .logo-light {
    opacity: 0;
}

/**
 * FOOTER
 **/
.custom-footer {
    background-color: var(--fwww-footer-bg);
    color: var(--fwww-footer-text);
    margin-top: 30px !important;
}

.custom-footer .footer-bottom {
    border-top: 1px solid var(--fwww-footer-border-color);
}

.custom-footer a,
.custom-footer .copyright-text {
    color: var(--fwww-footer-text);
    text-decoration: none;
}

.custom-footer .footer-nav-container a:hover {
    text-decoration: underline;
    opacity: 0.9;
}

/* --- SEARCH TRIGGER BUTTON --- */
.fwww-search-open-btn {
    width: var(--fwww-search-btn-size);
    height: var(--fwww-search-btn-size);
    background-color: var(--fwww-search-btn-bg);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.fwww-search-open-btn:hover {
    transform: scale(1.05);
}

/* Such-Icon via Content-Injektion aus Bootstrap Icons steuerbar */
.fwww-search-icon::before {
    font-family: "bootstrap-icons";
    content: "\f52a"; /* Code für das 'search' Lupen-Symbol */
    color: var(--fwww-search-btn-color);
    font-size: 1.1rem;
    font-style: normal;
    font-weight: bolder;
}


/* --- FULLSCREEN SEARCH OVERLAY --- */
.search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--fwww-overlay-bg);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.search-overlay.active {
    opacity: 1;
    visibility: visible;
}

.search-close-btn {
    position: absolute;
    top: 30px;
    right: 40px;
    background: none;
    border: none;
    color: #fff;
    font-size: 3rem;
    cursor: pointer;
}

.search-overlay-content {
    width: 100%;
    max-width: 600px;
    padding: 0 20px;
}

.search-input-group {
    position: relative;
    border-bottom: 2px solid rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
}

.search-field {
    width: 100%;
    background: transparent;
    border: none;
    padding: 10px 40px 10px 0;
    font-size: 1.8rem;
    color: var(--fwww-overlay-text);
    outline: none;
}

.search-field::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.search-submit-btn {
    position: absolute;
    right: 0;
    background: none;
    border: none;
    color: var(--fwww-overlay-text);
    font-size: 1.5rem;
    cursor: pointer;
}

/**
 * MAIN CONTENT
 */
.site-main {
    /* Desktop-Standard: 130px */
    padding-top: 130px;
}

.site-main > * {
    width: 100%;
    padding-right: var(--bs-gutter-x, .75rem);
    padding-left: var(--bs-gutter-x, .75rem);
    margin-right: auto;
    margin-left: auto;

    /* Bootstrap Max-Widths simulieren */
    max-width: 1320px; /* Entspricht Bootstrap .container auf XXL-Screens */
}

@media (max-width: 1399.98px) {
    .site-main > * {
        max-width: 1140px;
    }
}

@media (max-width: 1199.98px) {
    .site-main > * {
        max-width: 960px;
    }
}

@media (max-width: 991.98px) {
    .site-main > * {
        max-width: 720px;
    }
}

@media (max-width: 767.98px) {
    .site-main > * {
        max-width: 540px;
    }
}

@media (max-width: 575.98px) {
    .site-main > * {
        max-width: 100%;
    }
}

.site-main > .alignwide {
    max-width: 1440px; /* Etwas breiter als der normale Container */
}

.site-main > .alignfull {
    max-width: 100%;
    padding-right: 0;
    padding-left: 0;
}


/* Basis-Button-Styling für weiche Übergänge */
.wp-block-button__link {
    font-family: 'Source Sans 3', sans-serif;
    font-weight: 700;
    font-style: italic;

    border-radius: 5px;
    border: 2px solid var(--fwww-button-border-default) !important;
    transition: background-color 0.3s ease-in-out,
    color 0.3s ease-in-out,
    border-color 0.3s ease-in-out;
}

/* Hover-Zustand: Farben flippen (Weißer Hintergrund, orange Schrift) */
.wp-block-button__link:hover,
.wp-block-button__link:focus {
    background-color: var(--fwww-button-border-hover) !important;
    color: var(--fwww-button-text-hover) !important;
    border-color: var(--fwww-button-border-hover) !important;
    text-decoration: none;
}

/* Sorgt dafür, dass die umschließende Figure-Box sich wie unsere restlichen Container-Blöcke verhält */
.site-main > .wp-block-embed {
    width: 100%;
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
}

/* Zwingt den WordPress-Wrapper und das darin enthaltene iframe auf 100% Breite */
.wp-block-embed .wp-block-embed__wrapper {
    position: relative;
    width: 100%;
}

.wp-block-embed .wp-block-embed__wrapper iframe {
    width: 100% !important;
    height: 100% !important;
    position: absolute;
    top: 0;
    left: 0;
}

/* Berechnet automatisch das klassische 16:9 Breitbild-Seitenverhältnis für das Video */
.wp-block-embed-youtube .wp-block-embed__wrapper {
    padding-top: 56.25%; /* 16:9 Verhältnis (9 / 16 * 100) */
    height: 0;
}


/* Das Element standardmäßig fast ganz verstecken und nach links rücken */
#cmplz-manage-consent .cmplz-manage-consent {
    position: fixed !important;
    bottom: -12px !important;
    right: 120px !important; /* Erhöhter Wert, um dem orangenen Pfeil auszuweichen */
    background-color: #ffffff !important;
    color: #333333 !important;
    padding: 10px 20px !important;
    border-radius: 8px 8px 0 0 !important;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1) !important;
    transition: bottom 0.3s ease-in-out !important;
    z-index: 9999 !important;
    font-family: 'Source Sans 3', sans-serif;
    font-weight: 700;
    font-style: italic;
    font-size: 20px;
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}

/* Sichtbar machen beim Drüberfahren */
#cmplz-manage-consent .cmplz-manage-consent:hover {
    bottom: 0 !important;
}

/* Terminkalender */
.tribe-events-view {
    margin-top: 30px;
}
.tribe-events-single-event-title {
    color: var(--tec-color-text-events-title) !important;
}