/**
 * Jonny B GmbH – Layout CSS (Mobile First)
 * Basis-Styles = Mobil, Breakpoints erweitern nach oben.
 *
 * Breakpoints:
 *   sm:  600px  (großes Smartphone / kleines Tablet)
 *   md:  900px  (Tablet / kleiner Desktop)
 *   lg: 1280px  (Desktop)
 *  xl:  1400px  (großer Desktop)
 */

/* --------------------------------------------------------
 * Container
 * -------------------------------------------------------- */
.container {
    width:      100%;
    margin:     0 auto;
    padding:    0 var(--container-pad);
}

@media (min-width: 1280px) {
    .container { max-width: var(--container-max); }
}

/* --------------------------------------------------------
 * Site Header – Mobil: kompakt
 * -------------------------------------------------------- */
.site-header {
    background:     var(--color-white);
    border-bottom:  1px solid var(--color-gray-200);
    position:       relative; /* scrollt mit der Seite weg */
    height:         60px;
}

.header-inner {
    width:          100%;
    max-width:      var(--container-max);
    margin:         0 auto;
    padding:        0 var(--container-pad);
    height:         100%;
    display:        flex;
    align-items:    center;
}

.site-logo {
    display:        flex;
    align-items:    center;
    flex-shrink:    0;
}

.site-logo img {
    height:     40px;
    width:      auto;
}

/* "WIR BAUEN MÖBEL" – auf Mobil ausgeblendet */
.site-claim {
    display:    none;
}

/* Desktop: sichtbar, groß, rechts */
@media (min-width: 900px) {
    .site-header    { height: 80px; }
    .site-logo img  { height: 43px; }

    .site-claim {
        display:        block;
        margin-left:    auto;
        font-size:      2.5rem;
        font-weight:    var(--font-weight-light);
        color:          var(--color-accent);
        letter-spacing: 0.06em;
        text-transform: uppercase;
        white-space:    nowrap;
    }
}

/* --------------------------------------------------------
 * Navigation – Mobil: Hamburger + ausklappbar
 * -------------------------------------------------------- */
.site-nav {
    background:     var(--color-white);
    border-bottom:  1px solid var(--color-gray-200);
    position:       sticky; /* bleibt am oberen Bildschirmrand */
    top:            0;
    z-index:        100;
}

/* Hamburger-Button – Mobil sichtbar */
.nav-toggle {
    display:        flex;
    flex-direction: column;
    justify-content: center;
    background:     none;
    border:         none;
    cursor:         pointer;
    padding:        var(--space-3) var(--container-pad);
    margin-left:    auto;
    gap:            5px;
}

.nav-toggle__bar {
    display:        block;
    width:          24px;
    height:         2px;
    background:     var(--color-gray-700);
    transition:     transform var(--transition-base), opacity var(--transition-base);
}

/* Menü – Mobil: vertikal, eingeklappt */
.nav-menu {
    display:        none;
    flex-direction: column;
    width:          100%;
    padding:        var(--space-2) 0 var(--space-4);
    list-style:     none;
}

.nav-menu.is-open {
    display: flex;
}

.nav-item {
    position: relative;
    width:    100%;
}

.nav-link {
    display:        block;
    width:          100%;
    padding:        var(--space-3) var(--container-pad);
    color:          var(--color-gray-700);
    font-size:      var(--font-size-base);
    font-weight:    var(--font-weight-regular);
    white-space:    nowrap;
    transition:     color var(--transition-fast);
    border:         none;
    background:     none;
    cursor:         pointer;
    font-family:    inherit;
    text-align:     left;
}

.nav-link:hover,
.nav-link[aria-current="page"] {
    color: var(--color-accent);
}

/* Dropdown – Mobil: eingerückt, statisch */
.nav-link--parent {
    display:        flex;
    align-items:    center;
    justify-content: space-between;
    padding-right:  var(--container-pad);
}

.nav-arrow {
    transition: transform var(--transition-fast);
    flex-shrink: 0;
}

.nav-dropdown {
    display:        none;
    list-style:     none;
    border-left:    3px solid var(--color-accent);
    margin-left:    var(--space-5);
}

.nav-dropdown .nav-link {
    font-size:  var(--font-size-sm);
    padding:    var(--space-2) var(--container-pad);
}

/* Desktop: Hamburger weg, horizontale Nav */
@media (min-width: 900px) {
    .nav-toggle {
        display: none;
    }

    .nav-menu {
        display:            flex;
        flex-direction:     row;
        align-items:        center;
        justify-content:    space-between;
        padding:            0 var(--container-pad);
        max-width:          var(--container-max);
        margin:             0 auto;
        gap:                0;
        width:              100%;
    }

    .nav-item {
        width: auto;
    }

    .nav-link {
        padding:        var(--space-3) var(--space-4);
        font-size:      var(--font-size-xl); /* 22px / 1.375rem */
    }

    .nav-link--parent {
        padding-right:  var(--space-4);
        gap:            var(--space-2);
        justify-content: flex-start;
    }

    /* Dropdown – Desktop: absolut positioniert */
    .nav-dropdown {
        position:       absolute;
        top:            100%;
        left:           0;
        min-width:      180px;
        background:     var(--color-white);
        border:         1px solid var(--color-gray-200);
        border-left:    none;
        box-shadow:     var(--shadow-md);
        border-radius:  var(--radius-sm);
        overflow:       hidden;
        margin-left:    0;
    }

    .nav-dropdown .nav-link {
        padding:    var(--space-3) var(--space-5);
        font-size:  var(--font-size-sm);
    }

    .nav-dropdown .nav-link:hover {
        background: var(--color-gray-100);
    }

    /* Hover öffnet Dropdown auf Desktop */
    .nav-item--dropdown:hover .nav-dropdown {
        display: block;
    }
}

/* --------------------------------------------------------
 * Main-Content
 * -------------------------------------------------------- */
main {
    min-height: 60vh;
}

/* --------------------------------------------------------
 * Site Footer – Mobil: 1 Spalte
 * -------------------------------------------------------- */
.site-footer {
    background:     var(--color-gray-200);
    color:          var(--color-gray-700);
    margin-top:     var(--space-10);
    padding-top:    var(--space-8);
}

.footer-inner {
    max-width:      var(--container-max);
    margin:         0 auto;
    padding:        0 var(--container-pad) var(--space-8);
    display:        grid;
    grid-template-columns: 1fr;             /* Mobil: 1 Spalte */
    gap:            var(--space-6);
}

/* Tablet: 2 Spalten */
@media (min-width: 600px) {
    .footer-inner {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-8);
    }
}

/* Desktop: 3 Spalten */
@media (min-width: 900px) {
    .footer-inner {
        grid-template-columns: repeat(3, 1fr);
        padding-bottom: var(--space-10);
    }
}

.footer-heading {
    color:          var(--color-gray-900);
    font-size:      var(--font-size-sm);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom:  var(--space-4);
}

.footer-address {
    font-style:     normal;
    line-height:    var(--line-height-base);
    font-size:      var(--font-size-sm);
}

.footer-links {
    list-style: none;
}

.footer-links a {
    color:          var(--color-gray-700);
    display:        block;
    padding:        var(--space-1) 0;
    font-size:      var(--font-size-sm);
    transition:     color var(--transition-fast);
}

.footer-links a:hover {
    color: var(--color-primary);
}

.footer-notice {
    margin-top: var(--space-4);
    font-size:  var(--font-size-sm);
    color:      var(--color-primary);
    font-weight: var(--font-weight-semibold);
}

.footer-social img {
    margin-top: var(--space-4);
    opacity:    0.7;
    transition: opacity var(--transition-fast);
}

.footer-social:hover img {
    opacity: 1;
}

.footer-maps-link {
    display:        inline-block;
    font-size:      var(--font-size-sm);
    color:          var(--color-accent);
    text-decoration: none;
    margin-top:     var(--space-2);
    transition:     color var(--transition-fast);
}

.footer-maps-link:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

.footer-legal {
    border-top:     1px solid var(--color-gray-300);
    padding:        var(--space-4) var(--container-pad);
    text-align:     center;
    font-size:      var(--font-size-sm);
    color:          var(--color-gray-500);
}

/* --------------------------------------------------------
 * Seitenköpfe
 * -------------------------------------------------------- */
.page-header {
    background:     var(--color-white);
    padding:        var(--space-3) var(--container-pad);  /* Mobil: kompakt */
    text-align:     center;
    border-bottom:  1px solid var(--color-gray-200);
}

@media (min-width: 900px) {
    .page-header {
        padding: var(--space-5) var(--container-pad);
    }
}

.page-subtitle {
    margin-top:     var(--space-3);
    font-size:      var(--font-size-base);
    color:          var(--color-gray-500);
    font-weight:    var(--font-weight-light);
}

@media (min-width: 600px) {
    .page-subtitle { font-size: var(--font-size-lg); }
}