/*
Theme Name: Hama Berlin
Description:
Author: Carsten Appel
Version: 0.1
*/

/* Colors

Primary Color: 002d50 / 539C
Secondary Color: a72117 / 201C

Blue II: #00345f / 289C


Grey: #6d819e



*/

:where(.wp-block-columns.has-background) {padding: 0}


html {scroll-behavior: smooth;}
body { font-family: "Open Sans", arial; margin: 0; color: #000000; }
p {font-size: 1.125rem; line-height: 1.6}

li {font-size: 1.125rem}

strong {font-weight: 600}

:where(figure){ margin-bottom: 0}

.wp-block-button__link { background-color: transparent}
.wp-block-buttons {gap:1.5rem}

.wp-block-button a:hover {background-color: #6d819e; color:#fff }



.has-primary-color { color: #184287 }
.has-secondary-color {color: #e30613}

.has-light-gray-color { color: #b6c0cf;}
.has-lighter-gray-color { color: #f2f2f2;}
.has-dark-gray-color { color: #6d819e}
.has-white-color { color: #fff}
.has-black-color { color: #111}


.has-primary-background-color { background-color: #184287;}
.has-secondary-background-color { background-color: #e30613;}


.has-light-gray-background-color { background-color: #b6c0cf;}
.has-lighter-gray-background-color { background-color: #f2f2f2;}
.has-dark-gray-background-color { background-color: #6d819e}
.has-white-background-color { background-color: #fff}
.has-black-background-color { background-color: #111}




h1 { font-size: 4rem; font-weight: 400; margin: 0; line-height: 1.15; letter-spacing:-2px; margin-bottom: 1.5rem}
h2 { font-size: 2.75rem; font-weight: 300; margin: 0; line-height: 1.25; letter-spacing:-2px;margin-bottom: 1.25rem; }
h3 { font-size: 2.25rem; font-weight: 300; margin: 0; line-height: 1.33; l;margin-bottom: 1.25rem; margin-top: 2.5rem}
h4 { font-size: 1.75rem; font-weight: 300; margin: 0; line-height: 1.25; ;margin-bottom: 1.25rem; margin-top: 2.5rem}
h5 { font-size: 1.5rem; font-weight: 300; margin: 0; line-height: 1.25; }
h6 { font-size: 1.25rem; font-weight: 300; margin: 0; line-height: 1.25; }

@media (max-width: 768px) {
	h1 { font-size: 3rem}
	h2 { font-size: 2.025rem}
	h3 { font-size: 2rem}
	h4 { font-size: 1.75rem}
	h5 { font-size: 1.5rem}
	h6 { font-size: 1rem}
	
}


h2:first-child { margin-top: 0}
h3:first-child { margin-top: 0}
h4:first-child { margin-top: 0}


.center { text-align: center}

/* Header */

.transparent { position: absolute; width: 100%; z-index: 10000}

.transparent .nav-menu-list a { color: #fff}

.transparent .nav-menu-list .sub-menu a { color: #184287}



/* NAV */

/* --- 1. GLOBALE VARIABLEN & BASIS --- */
:root {
    --brand-color: #002d53;
    --hover-color: #a72117;
    --text-color: #002d50;
    --header-bg: #ffffff;
    --transition: all 0.3s ease-in-out;
}

.site-header {
    background: transparent;
    border-bottom: 0px solid #f0f0f0;
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 0px;
    max-width: 1320px;
    margin: 0 auto;
}

/* --- 2. NAVIGATION DESKTOP (ab 992px) --- */
.nav-menu-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 2rem;
}

.nav-menu-list a {
    text-decoration: none;
    color: var(--text-color);
    font-size: 1.25rem; /* Etwas harmonisiert */
    font-weight: 500;
    transition: color 0.2s;
}

.nav-menu-list a:hover {
    color: var(--hover-color);
}

@media (min-width: 992px) {
    .header-inner {
        display: flex;
        justify-content: space-between; /* Drückt Logo nach links, Menü nach rechts */
        align-items: center; /* Zentriert alles vertikal */
        width: 100%;
    }

    .main-navigation {
        margin-left: auto; /* Zusätzlicher "Push" nach rechts */
    }
}

/* Dropdown Logik Desktop */
@media (min-width: 992px) {
    .nav-menu-list li { position: relative; }

    .nav-menu-list .sub-menu {
        position: absolute;
        top: 100%;
        left: 0;
        background: #fff;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        list-style: none;
        padding: 10px 0;
        min-width: 220px;
        opacity: 0;
        visibility: hidden;
        transition: var(--transition);
        z-index: 100;
    }

    .nav-menu-list li:hover > .sub-menu {
        opacity: 1;
        visibility: visible;
    }

    .sub-menu li a {
        padding: 8px 20px;
        display: block;
        font-size: 0.95rem;
    }

    /* Verstecke Mobile-Elemente auf Desktop */
    .menu-toggle, .menu-close, .offcanvas-header-mobile {
        display: none !important;
    }
}

/* --- 3. MOBILE NAVIGATION (bis 991px) --- */
@media (max-width: 991px) {
    .main-navigation {
        position: fixed;
        top: 0;
        right: -100%;
        width: 85%;
        max-width: 320px;
        height: 100vh;
        background: #fff;
        z-index: 1000;
        transition: right 0.4s ease-in-out;
        padding: 80px 30px 30px;
        box-shadow: -10px 0 20px rgba(0,0,0,0.1);
        overflow-y: auto;
    }

    .main-navigation.is-active {
        right: 0;
    }

    .nav-menu-list {
        flex-direction: column;
        gap: 20px;
    }

    .sub-menu {
        padding-left: 15px;
        list-style: none;
        background: #fcfcfc;
        margin-top: 10px;
    }

    /* Overlay */
    .menu-overlay.is-active {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
        z-index: 999;
    }
}



/* --- 4. BUTTONS & ICONS --- */
.menu-toggle {
    display: none;
    background: transparent;
    border: none;
    cursor: pointer;
    order: 2;
}

@media (max-width: 991px) {
    .menu-toggle { display: block; }
}

/* Burger Icon Linien */
.hamburger-icon {
    display: block;
    width: 30px;
    height: 3px;
    background: var(--brand-color);
    position: relative;
}
.hamburger-icon::before, .hamburger-icon::after {
    content: "";
    position: absolute;
    width: 30px;
    height: 3px;
    background: var(--brand-color);
    left: 0;
}
.hamburger-icon::before { top: -8px; }
.hamburger-icon::after { bottom: -8px; }


.page-template-homepage .hamburger-icon {background: #fff}
.page-template-homepage .hamburger-icon::before, .hamburger-icon::after { background: #fff}

.page-template-homepage .is-active  .nav-menu-list a { color: #184287}
.page-template-homepage .is-active  #menu-item-31 a  {border: none; padding: 0;}
.page-template-homepage .is-active  .hamburger-icon {background: #184287}
/* Schließen Button (X) */
.menu-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    font-size: 30px;
    cursor: pointer;
    color: var(--brand-color);
}

/* --- 5. DROPDOWN PFEILE --- */
.menu-item-has-children > a {
    display: flex;
    align-items: center;
    gap: 8px;
}

.menu-item-has-children > a::after {
    content: "";
    width: 6px;
    height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    margin-top: -3px;
    transition: transform 0.2s;
}

.menu-item-has-children:hover > a::after {
    transform: rotate(-135deg);
    margin-top: 3px;
}

.nav-menu-list li#menu-item-4248 a {
    background-color: #8b2d18; /* Deine Branding-Farbe */
    color: #fff !important;
    padding: 8px 20px;
    border-radius: 5px;
    margin-left: 10px;
}

#menu-item-31 a {border: 2px solid #fff; padding: 0.5rem 1rem; border-radius: 0.75rem}
.navbar-brand img { height: 4rem}
@media (max-width: 768px) {
	.navbar-brand img { height: 3rem}
}


footer {background-color: #184287; color: #fff; padding: 4rem 0rem}
footer a {color: #fff; text-decoration: none}
footer .logo-footer { margin-bottom: 3rem}
footer .h4 { font-size: 1.5rem; font-weight: 600}


@media(max-width: 768px) {
.hama-step-dot {  display: none}
}


@media (max-width: 782px) {
    /* Den Container auf Flex-Row halten und Umbruch erlauben */
    .wp-block-columns.mobile-2-columns {
        display: flex !important;
        flex-wrap: wrap !important;
        flex-direction: row !important;
        gap:0;
    }

    /* Jeder Spalte genau 50% Breite zuweisen (minus Gap, falls vorhanden) */
    .wp-block-columns.mobile-2-columns > .wp-block-column {
        flex-basis: calc(50% - 10px) !important;
        flex-grow: 0 !important;
        margin-left: 5px !important;
        margin-right: 5px !important;
    }
}

#hero-section .is-style-innerpadding-s{ background: rgba(255, 255, 255, 0.8); margin-top: 18rem; border-radius: 1rem}
#hero-section .is-style-textblock h1 { font-size: 3.25rem}
#hero-section .wp-block-cover:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, transparent 15%); z-index: 1; pointer-events: none;} 

@media (max-width: 768px) {
#hero-section .is-style-textblock h1 { font-size: 1.75rem}	
}

#services-section .wp-block-column:has(p) { box-shadow: 0 12px 36px 0 rgba(0, 0, 0, .10); border-radius: 1rem}
#services-section .wp-block-column:has(p) img { border-top-left-radius: 1rem; border-top-right-radius: 1rem}
#services-section .wp-block-column a { text-decoration: none; color: #184287 }
#services-section .wp-block-column p.has-medium-font-size {margin-top: 1.5rem}
#services-section .wp-block-column p:last-child { margin-bottom: 0px; padding: 0rem 1.5rem 1.5rem 1.5rem}
@media (max-width: 768px) {
	#services-section .wp-block-column {margin-bottom: 1.5rem}
	
}



#progress-section .wp-block-column .wp-block-group { border: 1px solid #ccc ; border-radius: 1rem}
#progress-section .wp-block-column .wp-block-group img { border-top-left-radius: 1rem; border-top-right-radius: 1rem }
#progress-section .wp-block-column .wp-block-group h3 { margin-top: 0rem}

#benefit-section .wp-block-column { border-radius: 1rem; padding: 1.5rem}
@media (max-width: 768px) {
#benefit-section .wp-block-column { margin-bottom: 1.5rem}	
}



#cta2-section .wp-block-column:nth-child(1) { border-radius: 1rem; padding: 3rem;  }
#cta2-section .wp-block-column:nth-child(2) figure { aspect-ratio: 1; height: 100%; width: 100% ;     display: flex;} 
#cta2-section .wp-block-column:nth-child(2) img  { object-fit:cover} 
@media  (max-width: 991px) {
#cta2-section .wp-block-columns { flex-flow: column-reverse; display: flex; }
#cta2-section .wp-block-column:nth-child(1) { border-radius: 1rem; padding: 1.5rem;  }
#cta2-section .wp-block-column:nth-child(2) img  { object-fit:cover; aspect-ratio: 1/1} 
}

@media  (max-width: 768px) {
#trust-logo-section .wp-block-image { text-align: center}
}