/*
Theme Name: FWHEG
Theme URI: -
Author: Fast Forward IT GmbH
Author URI: https://www.fast-forward-it.de
Description: Das Theme für die Baugenossenschaft Finkenwärder-Hoffnung eG dient als zentrale Online-Plattform für die moderne Hausverwaltung und Wohnungsverwaltung. Es ermöglicht die digitale Wohnungssuche, die einfache Schadensmeldung und bietet schnelle Informationen zum Notdienstservice sowie zur Verfügbarkeit von Stellplätzen. Zusätzlich dient es als Hub für das Online-Mitgliedermagazin, wodurch eine umfassende und serviceorientierte Kommunikation mit den Mitgliedern gewährleistet wird.
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 7.2
Version: 1.0
Text Domain: Baugenossenschaft Finkenwärder-Hoffnung eG
Tags: Liegenschaftsmanagement, Wohnungsbestandsverwaltung, Genossenschafts-News, Digitale Kommunikation, Vermietungsangebote, Mängelanzeige, Reparaturanforderung, Garagenvermietung, Parkflächen
*/
/* Copyright 2025 Fast Forward IT GmbH. Alle Rechte vorbehalten. 
Dieses Theme ist proprietär und nur für die Nutzung durch die Baugenossenschaft Finkenwärder-Hoffnung eG bestimmt.
*/

/* ========================================
   FONTS
   ======================================== */
   @font-face {
    font-family: 'Formata';
    src: url('assets/fonts/formata-lightcondensed.eot');
    src: url('assets/fonts/formata-lightcondensed.eot?#iefix') format('embedded-opentype'),
         url('assets/fonts/formata-lightcondensed.woff2') format('woff2'),
         url('assets/fonts/formata-lightcondensed.woff') format('woff'),
         url('assets/fonts/formata-lightcondensed.ttf')  format('truetype'),
         url('assets/fonts/formata-lightcondensed.svg#svgFontName') format('svg');
    font-style: normal;
    font-weight: 200;
}

@font-face {
    font-family: 'Formata';
    src: url('assets/fonts/formata-condensed.eot');
    src: url('assets/fonts/formata-condensed.eot?#iefix') format('embedded-opentype'),
         url('assets/fonts/formata-condensed.woff2') format('woff2'),
         url('assets/fonts/formata-condensed.woff') format('woff'),
         url('assets/fonts/formata-condensed.ttf')  format('truetype'),
         url('assets/fonts/formata-condensed.svg#svgFontName') format('svg');
    font-style: normal;
    font-weight: 400;
}

@font-face {
    font-family: 'Formata';
    src: url('assets/fonts/formata-mediumcondensed.eot');
    src: url('assets/fonts/formata-mediumcondensed.eot?#iefix') format('embedded-opentype'),
         url('assets/fonts/formata-mediumcondensed.woff2') format('woff2'),
         url('assets/fonts/formata-mediumcondensed.woff') format('woff'),
         url('assets/fonts/formata-mediumcondensed.ttf')  format('truetype'),
         url('assets/fonts/formata-mediumcondensed.svg#svgFontName') format('svg');
    font-style: normal;
    font-weight: 700;
}

/* ========================================
   GLOBAL STYLES
   ======================================== */
body {
    font-family: Formata, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 200;
    line-height: 1.42857143;
    color: #545454;
    background-color: #ffffff;
    letter-spacing: 0.03em;
    margin-top: 20px;
}

p {
    margin: 0 0 10px;
}

ul {
    margin-top: 0;
    margin-bottom: 10px;
}

a {
    color: #545454;
    text-decoration: none;
}

a:hover,
a:active,
a:focus {
    color: #545454;
    text-decoration: none;
}

h1 {
    color: #0062a6;
    font-size: clamp(18.959px, 1.185rem + ((1vw - 3.2px) * 1.082), 30px);
    font-weight: 700;
    line-height: 32px;
    letter-spacing: 1.4px;
}

h3, .h3 {
    font-size: 18px;
    font-weight: 700;
    line-height: 20px;
    color: #0062a6;
}

/* ========================================
   CONTAINER & GRID
   ======================================== */
.container {
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
}

@media (min-width: 1368px) {
    .container {
        width: 1250px;
    }
}

.row {
    margin-left: -15px;
    margin-right: -15px;
}

.col-lg-4,
.col-lg-12 {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
}

@media (min-width: 1300px) {
    .col-lg-4 {
        float: left;
        width: 33.33333333%;
    }

    .col-lg-12 {
        float: left;
        width: 100%;
    }
}

@media (max-width: 1299px) {
    .col-lg-4 {
        margin-bottom: 15px;
    }
}

/* ========================================
   UTILITY CLASSES
   ======================================== */
.f-uppercase {
    text-transform: uppercase;
}

.text-right {
    text-align: right;
}

.m-t-10 {
    margin-top: 10px;
}

.m-b-20 {
    margin-bottom: 20px;
}

.m-r-65 {
    margin-right: 65px;
}

@media (max-width: 500px) {
    .over-width-xs {
        margin-right: -8px;
    }
}

/* ========================================
   NAVIGATION - GRUNDSTRUKTUR
   ======================================== */
.navbar {
    border-radius: 0;
    margin-bottom: 0;
    border: 0;
    min-height: 50px;
    position: relative;
    background-color: #ffffff;
}

.navbar .container {
    position: relative;
}

.navbar-collapse {
    border: 0;
}

main.column-layout {
    margin-top: 9px !important;
}

/* ========================================
   NAVIGATION - BRAND/LOGO
   ======================================== */
.navbar-brand {
    padding: 0;
    height: 79px;
    margin-left: 0;
    margin-right: 35px;
}

.navbar-brand img {
    max-height: 100%;
    width: auto;
}

/* ========================================
   NAVIGATION - TOGGLE BUTTON
   ======================================== */
.navbar-toggler {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 6px 10px;
}

.navbar-toggler:focus {
    box-shadow: none;
    outline: none;
}

.navbar-toggler-icon {
    width: 22px;
    height: 2px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ========================================
   NAVIGATION - MAIN MENU (DESKTOP)
   ======================================== */
.navbar-nav > .nav-item {
    margin-right: 60px;
}

.navbar-nav > .nav-item:last-child {
    margin-right: 0;
}

.navbar-nav > .nav-item > .nav-link {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 23px;
    padding-top: 0;
    text-transform: uppercase;
    color: #545454;
    font-weight: 200;
    font-size: 16px;
    border-bottom: 3px solid #fff;
    transition: border-bottom 0.2s ease, color 0.2s ease, font-weight 0.2s ease;
}

/* Active State - Desktop */
.navbar-nav > .nav-item > .nav-link.active,
.navbar-nav > .nav-item.active > .nav-link,
.navbar-nav > .nav-item.current-menu-item > .nav-link,
.navbar-nav > .nav-item.current-menu-parent > .nav-link,
.navbar-nav > .nav-item.current-menu-ancestor > .nav-link {
    background-color: transparent !important;
    color: #0062a6;
    font-weight: 700;
    border-bottom: 3px solid #0062a6;
}

/* Hover State - Desktop */
.navbar-nav > .nav-item > .nav-link:hover,
.navbar-nav > .nav-item > .nav-link:focus {
    background-color: transparent !important;
    border-bottom: 3px solid #0062a6;
    font-weight: 700;
    color: #0062a6;
}

/* Open Dropdown State - Desktop */
.navbar-nav > .nav-item.dropdown.show > .nav-link {
    background-color: transparent !important;
    border-bottom: 3px solid #0062a6;
    font-weight: 700;
    color: #0062a6;
}

/* ========================================
   NAVIGATION - DROPDOWN MENU (DESKTOP)
   ======================================== */
.navbar-nav .dropdown-menu {
    padding: 17px 0 12px;
    left: 0 !important;
    border: 0;
    border-radius: 0;
    margin-top: 0;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    background-color: #ffffff !important;
    transform: none !important;
    top: 100% !important;
}

/* Alle Dropdown Items - Basis-Styles */
.navbar-nav .dropdown-menu > li > .dropdown-item {
    padding: 0 35px;
    color: #0062a6 !important;
    text-transform: uppercase;
    font-weight: 200 !important;
    font-size: 16px !important;
    line-height: 31px !important;
    background-color: transparent !important;
    transition: color 0.2s ease;
}

/* Hover State - Dropdown Items Desktop */
.navbar-nav .dropdown-menu > li > .dropdown-item:hover,
.navbar-nav .dropdown-menu > li > .dropdown-item:focus {
    background-color: transparent !important;
    color: #545454 !important;
    font-weight: 200 !important;
}

/* Active State - Dropdown Items Desktop */
.navbar-nav .dropdown-menu > li.active > .dropdown-item,
.navbar-nav .dropdown-menu > li.current-menu-item > .dropdown-item,
.navbar-nav .dropdown-menu > li > .dropdown-item.active {
    color: #545454 !important;
    background-color: transparent !important;
    font-weight: 200 !important;
}

/* Überschreibe Bootstrap Standard Active Styles */
.navbar-nav .dropdown-menu > li > .dropdown-item.active:hover,
.navbar-nav .dropdown-menu > li > .dropdown-item.active:focus {
    background-color: transparent !important;
    color: #545454 !important;
}

/* Hide Dropdown Caret */
.navbar-nav .dropdown-toggle::after {
    display: none;
}

/* ========================================
   NAVIGATION - SEARCH
   ======================================== */
#navbar-search {
    position: absolute;
    right: 15px;
    top: 0;
    font-size: 16px;
    font-weight: 700;
    color: #0062a6;
}

#navbar-search input#s,
input#s {
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    font-weight: 200;
    color: #545454;
    background-image: url('assets/images/search3.png');
    background-repeat: no-repeat;
    background-position: right 6px center;
    padding-right: 20px;
    border: 1px solid #cccccc;
    min-width: 200px;
    border-radius: 0;
    box-shadow: none;
}

/* ========================================
   NAVIGATION - MENU ITEM WIDTHS
   ======================================== */
.nav-item:nth-child(1) { min-width: 43px; }
.nav-item:nth-child(2) { min-width: 97px; }
.nav-item:nth-child(3) { min-width: 118px; }
.nav-item:nth-child(4) { min-width: 57px; }
.nav-item:nth-child(5) { min-width: 65px; }

/* Legacy Classes */
li.page-1 { min-width: 43px; }
li.page-2 { min-width: 97px; }
li.page-8 { min-width: 118px; }
li.page-16 { min-width: 57px; }
li.page-22 { min-width: 70px; }
li.page-23 { min-width: 65px; }

/* ========================================
   RESPONSIVE - DESKTOP (>= 1200px)
   ======================================== */
@media (min-width: 1200px) {
    .navbar {
        height: 86px;
        margin-top: 7px;
    }

    .navbar > .container {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .navbar-brand {
        height: 79px;
    }

    .navbar-nav {
        margin-top: 56px;
    }

    /* Show dropdown on hover - Desktop */
    .navbar-nav .nav-item.dropdown:hover > .dropdown-menu,
    ul.nav li.dropdown:hover > ul.dropdown-menu {
        display: block;
    }
}

/* ========================================
   RESPONSIVE - MOBILE/TABLET (< 1200px)
   ======================================== */
@media (max-width: 1199px) {
    #navbarNavDropdown {
        margin-top: 10px;
    }

    .navbar-brand {
        margin-left: 15px;
        height: 50px;
    }

    .navbar-brand img {
        max-height: 50px;
    }

    .navbar-nav {
        margin-top: 0;
    }

    /* Mobile - Main Menu Items */
    .navbar-nav > .nav-item {
        margin-right: 0;
    }

    /* Mobile - Basis-Style für ALLE Navbar-Links (weiß/transparent) */
    .navbar-nav > .nav-item > .nav-link {
        border-bottom: 0 !important;
        padding: 10px 15px;
        color: #545454 !important;
        background-color: transparent !important;  /* Standardmäßig transparent/weiß */
        font-weight: 200 !important;
        transition: background-color 0.2s ease;
    }

    /* Mobile - NUR Active/Parent Items bekommen grauen Hintergrund */
    .navbar-nav > .nav-item.current-menu-item > .nav-link,
    .navbar-nav > .nav-item.current-menu-parent > .nav-link,
    .navbar-nav > .nav-item.current-menu-ancestor > .nav-link {
        background-color: #eeeeee !important;  /* Grau nur für aktive Items */
        color: #545454 !important;
        font-weight: 200 !important;
        border-bottom: 0 !important;
    }

    /* Mobile - Hover State (beim Drüberfahren) */
    .navbar-nav > .nav-item > .nav-link:hover,
    .navbar-nav > .nav-item > .nav-link:focus {
        background-color: #eeeeee !important;
        color: #545454 !important;
        border-bottom: 0 !important;
    }

    /* Mobile - Dropdown Menu */
    .navbar-nav .dropdown-menu {
        left: 0 !important;
        padding: 0;
        position: static !important;
        float: none;
        width: auto;
        margin-top: 0;
        border: 0;
        box-shadow: none;
        background-color: transparent !important;
        transform: none !important;
    }

    /* Mobile - Basis-Style für ALLE Dropdown-Items (weiß/transparent) */
    .navbar-nav .dropdown-menu > li > .dropdown-item {
        padding: 10px 15px 10px 30px !important;
        color: #545454 !important;
        background-color: transparent !important;  /* Standardmäßig transparent/weiß */
        font-weight: 200 !important;
        font-size: 16px !important;
        line-height: 1.42857143 !important;
    }

    /* Mobile - NUR Active Dropdown Items bekommen grauen Hintergrund */
    .navbar-nav .dropdown-menu > li.current-menu-item > .dropdown-item {
        background-color: #eeeeee !important;  /* Grau nur für aktives Dropdown-Item */
        color: #545454 !important;
        font-weight: 200 !important;
    }

    /* Mobile - Hover Dropdown Item (beim Drüberfahren) */
    .navbar-nav .dropdown-menu > li > .dropdown-item:hover,
    .navbar-nav .dropdown-menu > li > .dropdown-item:focus {
        background-color: #eeeeee !important;
        color: #545454 !important;
    }

    /* Mobile - Search */
    #navbar-search {
        position: static;
        text-align: left;
        padding: 10px 15px;
        display: block;
    }
}

/* ========================================
   NAVIGATION - SPECIAL STATES
   ======================================== */
body.menu-no-border .navbar-nav > .nav-item > .nav-link.active,
body.menu-no-border .navbar-nav > .nav-item > .nav-link:hover,
body.menu-no-border .navbar-nav > .nav-item > .nav-link:focus,
body.menu-no-border .navbar-nav > .nav-item.dropdown.show > .nav-link {
    border-bottom: 0;
}

/* ========================================
   FOOTER
   ======================================== */
.footer {
    border-top: 1px solid #a3a5a7;
    background-color: #e6eff7;
    margin-top: 20px;
}

.footer .row > div {
    padding-left: 40px;
    background-repeat: no-repeat;
    background-position: 15px 11px;
}

@media (max-width: 1279px) {
    .footer .row > div {
        background-position: 15px 0;
    }
}

.footer .icon-contact {
    background-image: url('assets/images/icon-contact2.png');
}

.footer .icon-man {
    background-image: url('assets/images/icon-man2.png');
}

.footer .icon-phone {
    background-image: url('assets/images/icon-phone2.png');
}

.footer .heading {
    font-size: 18px;
    line-height: 20px;
    color: #545454;
    margin-top: 10px;
    margin-bottom: 4px;
    font-weight: 700;
    letter-spacing: -0.1px;
    display: block;
}

/* ========================================
   DEFINITION LISTS
   ======================================== */
.dl-horizontal {
    margin-top: 0;
    margin-bottom: 20px;
}

.dl-horizontal dt,
.dl-horizontal dd {
    line-height: 1.42857143;
}

.dl-horizontal dt {
    font-weight: bold;
}

.dl-horizontal dd {
    margin-left: 0;
}

@media (min-width: 1200px) {
    .dl-horizontal dt {
        float: left;
        width: 160px;
        clear: left;
        text-align: right;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .dl-horizontal dd {
        margin-left: 180px;
    }
}

.footer .dl-horizontal dt {
    text-align: left;
    overflow: inherit;
    white-space: normal;
    font-weight: 200;
    width: 160px;
}

.footer .dl-horizontal dd {
    margin-left: 180px;
}

ul.dl-horizontal {
    list-style: none;
    padding-left: 0;
}

/* ========================================
   COLUMN LAYOUT TEMPLATE
   ======================================== */
.column-layout .wp-block-post-title {
    margin-bottom: 0 !important;
}

.column-layout .custom-separator {
    border: 0 !important;
    border-top: 1px solid #545454 !important;
    margin: 6px 0 12px 0 !important;
    padding: 0 !important;
    opacity: 1 !important;
}

.column-layout .wp-block-post-content {
    margin-top: 0 !important;
}

.has-global-padding:where(:not(.container)) {
    padding-top: 0;
    padding-right: 0;
    padding-left: 0;
}

.column-layout .wp-block-post-content > *:first-child {
    margin-top: 0 !important;
}

/* KLASSEN FÜR DIE BILDER DER NACHHALTIGKEITSSEITE */
/* Spalte 1: logo-column, size-90 */
/* Spalte 2: logo-column, size-75 */
/* Spalte 3: logo-column, size-90 */
/* Zeile: logo-row */
.column-layout .wp-block-column.logo-column {
    display: flex;
    justify-content: start;
    align-items: center;
    height: 100px;
}

.column-layout .wp-block-column.logo-column.size-90 img {
    height: 100px;
    width: auto;
    object-fit: contain;
}

.column-layout .wp-block-column.logo-column.size-75 img {
    height: 75px;
    width: auto;
    object-fit: contain;
}

.column-layout .logo-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}


/* 1. Innere Columns (Name/Rolle) sollen volle Breite nutzen */
.wp-block-post-content .column-layout .wp-block-column .wp-block-columns.wp-block-columns-is-layout-flex {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* 2. Standard-Verhältnis: Name | Rolle = 40% / 60% */
.column-layout .wp-block-column .wp-block-columns .wp-block-column:first-child {
    flex: 0 0 40%;
}

.column-layout .wp-block-column .wp-block-columns .wp-block-column:last-child {
    flex: 0 0 60%;
}

/* 3. Optional: Spaltenabstand reduzieren, falls nötig */
.column-layout .wp-block-column .wp-block-columns.is-layout-flex {
    gap: 0.5rem; /* kannst du auch auf 0 setzen */
}

h2.wp-block-heading {
    font-size: 22px;
    line-height: 27px;
    margin-top: 16px;
    margin-bottom: 7px;
    font-weight: 700;
    color: #0062a6;
    font-family: inherit;
}

body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: unset;
    margin-left: auto;
    margin-right: auto;
}

.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column.housing-inventory-filter-column,
.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column.housing-inventory-table-column{
	flex-basis:100%;
}

@media(min-width: 1280px){
	.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column.housing-inventory-filter-column{
		flex-basis:25%;
		margin-top:37px;
	}
	.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column.housing-inventory-table-column{
	flex-basis:75%;
	}
}

.visible-tablet, .visible-xs, .visible-sm, .visible-md, .visible-lg {
  display: none!important;
}

@media (max-width: 1279px) and (min-width: 501px) {
  .hidden-tablet {
    display: none!important;
  }
  .visible-tablet {
    display: block!important;
  }	
}

@media (max-width: 1279px) {
  .hidden-xs {
    display: none !important;
  }
  .visible-xs {
    display: block !important;
  }
}