/*
=================================
--- PAGES CSS ---
=================================
Consolidated page-specific styles.
*/

/* 
=================================
--- HOME PAGE --- 
=================================
*/

.page-home main {
    margin-top: 0;

}


/* News Banner */
.ks-news-banner {
    background-color: #e3f2fd;
    border-bottom: 1px solid var(--ks-color-border-dark);
    padding: 12px var(--ks-spacing-sm);
    text-align: center;
    width: 100%;
    box-shadow: var(--ks-shadow-sm);
    position: relative;
    z-index: 10;
}

.ks-news-banner__content a {
    text-decoration: none;
    color: #1976d2;
    font-family: var(--ks-font-family-base);
    font-size: calc(var(--ks-font-size-base) * 1.05);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    transition: color var(--ks-transition-fast);
}

.ks-news-banner__content a:hover {
    color: #0d47a1;
}

.ks-news-banner__badge {
    background-color: #1976d2;
    color: var(--ks-color-white);
    padding: 2px 8px;
    border-radius: var(--ks-border-radius-sm);
    font-size: 0.85rem;
    font-weight: var(--ks-font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ks-news-banner__date {
    font-weight: var(--ks-font-weight-medium);
    color: var(--ks-color-text-secondary);
}

.ks-news-banner__title {
    font-weight: var(--ks-font-weight-bold);
}

.ks-news-banner__icon {
    font-size: 0.9em;
    transition: transform var(--ks-transition-fast);
}

.ks-news-banner__content a:hover .ks-news-banner__icon {
    transform: translateX(4px);
}

@media (max-width: 600px) {
    .ks-news-banner__content a {
        font-size: 0.95rem;
        gap: 5px;
    }

    .ks-news-banner__badge {
        font-size: 0.75rem;
    }
}

/* Home Page H1 - Word Break Rules */
/* Home Page H1 - Moved to modules/headline/style.css */

/* Home Mobile Spacing */
@media (max-width: 768px) {

    /* Headline & Text Block Mobile - Moved to modules/ */
    .page-home .text-hero-content h1 {
        padding-top: var(--ks-spacing-md) !important;
        font-size: 2.5rem !important;
        word-break: normal;
        overflow-wrap: normal;
        hyphens: none;
    }

    /* Text content padding moved to modules/text_block/style.css */

    /* H2 mit border-bottom breiter machen auf Mobile */
    /* H2 mit border-bottom breiter machen auf Mobile */
    .page-home .text-block-content h2,
    .page-home .page-content h2,
    .page-home .page-content-wrapper h2,
    .page-home .ks-container--narrow h2 {
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Container-Padding auch entfernen */
    /* Container-Padding auch entfernen */
    .page-home .text-block-content {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/*
=================================
--- KONTAKT PAGE ---
=================================
*/

/* Kontakt Page - Full Width Blue Background */
body.page-kontakt {
    background-color: var(--ks-color-secondary) !important;
    overflow-x: hidden;
}

/* Kontakt Page H1 - Word Break Rules */
/* Kontakt Page H1 - Word Break Rules */
.page-kontakt .text-hero-content h1 {
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
    margin-top: 90px;
    color: var(--ks-color-white) !important;
}

.page-kontakt main {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    padding: 60px 40px;
    background-color: var(--ks-color-secondary);
}

/* Wrapper für die beiden Formulare */
.page-kontakt main>.ks-block-iframe--form,
.page-kontakt main>.ks-block-agreement {
    display: inline-block;
    vertical-align: top;
}

/* Container für zentrierte Formulare mit Gap */
@media (min-width: 1024px) {
    .page-kontakt main {
        display: flex !important;
        flex-wrap: wrap;
        justify-content: center;
        gap: 100px;
        /* Exact 100px gap between forms */
        padding: 80px 40px;
        text-align: center;
    }

    /* Formulare nebeneinander mit max-width */
    .page-kontakt main>.ks-block-iframe--form,
    .page-kontakt main>.ks-block-agreement,
    .page-kontakt main>.hs-modern-form {
        display: block !important;
        flex: 1 1 calc(50% - 50px);
        /* Each takes half minus half of gap */
        max-width: 600px !important;
        text-align: left;
        margin: 0 !important;
        /* Reset margins, gap handles spacing */
    }

    /* Full-width Elemente */
    .page-kontakt main>.ks-block-headline,
    .page-kontakt main>.ks-block-address,
    .page-kontakt main>.ks-block-iframe--map {
        display: block !important;
        flex: 1 1 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }
}

.page-kontakt main>.ks-block-headline,
.page-kontakt main>.ks-block-hero,
.page-kontakt main>.map-section,
.page-kontakt main>.ks-block-iframe--map,
.page-kontakt main>.text-hero-section {
    grid-column: 1 / -1;
    width: 100%;
}

/* Headline background transparent for blue to show through */
/* Headline background moved to modules/headline/style.css */

/* Restore Side-by-Side Layout */
/* 1. Container Rules: Prevent collapse, force min-height, force auto height expansion */
.page-kontakt .ks-block-iframe--form .ks-block-iframe,
.page-kontakt .ks-block-iframe--form .ks-block-iframe__container {
    padding-bottom: 0 !important;
    min-height: 600px;
    height: auto !important;
    position: relative !important;
    width: 100% !important;
    overflow: visible !important;
}

/* 2. Iframe Embed Rules: Must allow inline height from JS to work! */
.page-kontakt .ks-block-iframe--form .ks-block-iframe__embed {
    padding-bottom: 0 !important;
    min-height: 600px;
    /* Do NOT use height: auto !important here, it kills JS resize */
    height: auto;
    position: relative !important;
    width: 100% !important;
    overflow: hidden !important;
    /* Prevent scrollbars inside */
}

/* Side-by-Side Layout Blocks */
.page-kontakt main>.ks-block-iframe--form,
.page-kontakt main>.ks-block-agreement {
    width: 100%;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
}

.page-kontakt main>.ks-block-iframe--form {
    grid-column: 1;
}

.page-kontakt main>.ks-block-agreement {
    grid-column: 2;
}

/* Background Pseudo-elements Base */
.page-kontakt main>.ks-block-iframe--form::before,
.page-kontakt main>.ks-block-agreement::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    background-color: var(--ks-color-secondary);
    z-index: -1;
}

/* Extend Left Block Background */
.page-kontakt main>.ks-block-iframe--form::before {
    right: -30px;
    /* Cover Gap (approx half of 40-60px) */
    left: -100vw;
    /* Extend to left edge */
}

/* Extend Right Block Background */
.page-kontakt main>.ks-block-agreement::before {
    display: block;
    left: -30px;
    /* Cover Gap */
    right: -100vw;
    /* Extend to right edge */
}

/* Fallback/Template Support */
.forms-wrapper {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    background-color: var(--ks-color-secondary);
    display: flex;
    justify-content: center;
    gap: 40px;
    padding: 60px 20px;
    box-sizing: border-box;
}

.forms-wrapper .form-card {
    flex: 1;
    max-width: 600px;
    background: var(--ks-color-white);
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

/* Mobile Responsive Override within Grid */
@media (max-width: 1024px) {

    .page-kontakt main>.ks-block-iframe--form,
    .page-kontakt main>.ks-block-agreement {
        grid-column: 1 / -1;
        /* Stack on mobile */
        box-shadow: 100vw 0 0 #64B5F6, -100vw 0 0 #64B5F6;
        /* Extend both sides */
        margin-bottom: 0;
        /* Continuous block */
    }

    .forms-wrapper {
        flex-direction: column;
        align-items: center;
    }

    .forms-wrapper .form-card {
        width: 100%;
    }
}

.page-kontakt main>.ks-block-address {
    grid-column: 1 / -1;
    width: 100%;
    margin: 60px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

/* Weißer Hintergrund für die Address-Sektion - Full Width */
.page-kontakt main>.ks-block-address::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 100%;
    background-color: white;
    z-index: -1;
    top: 0;
}

.page-kontakt .ks-block-address__content {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    background: transparent;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    padding: 0 20px;
}

.page-kontakt .ks-block-address h3 {
    grid-column: 1 / -1;
    margin: 0 0 40px 0;
    font-size: 3rem;
    color: #333;
    text-align: center;
    font-weight: 700;
}

.page-kontakt .ks-block-address p {
    font-size: 1rem;
    line-height: 1.8;
    margin: 0;
    padding: 35px 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
    border-radius: 16px;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.12);
    color: var(--ks-color-white);
    transition: all 0.3s ease;
    position: relative;
}

/* Individuelle Hintergrundfarben für Kontaktkarten */
.page-kontakt .ks-block-address .contact-address {
    background: #61d7dd;
    color: #ffffff;
}

.page-kontakt .ks-block-address .contact-phone {
    background: #64B5F6;
}

.page-kontakt .ks-block-address .contact-email {
    background: #B39DDB;
}

.page-kontakt .ks-block-address p:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.18);
}

/* Icons für Kontaktinformationen */
.page-kontakt .ks-block-address p::before {
    content: '';
    display: block;
    width: 60px;
    height: 60px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-bottom: 10px;
}

/* Adresse Icon */
.page-kontakt .ks-block-address .contact-address::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg>');
}

/* Telefon Icon */
.page-kontakt .ks-block-address .contact-phone::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/></svg>');
}

/* E-Mail Icon */
.page-kontakt .ks-block-address .contact-email::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>');
}

/* Links in Kontaktdaten */
.page-kontakt .ks-block-address a {
    color: var(--ks-color-white);
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.page-kontakt .ks-block-address a:hover {
    opacity: 0.8;
    text-decoration: underline;
}

.agreement-form {
    background-color: var(--ks-color-white) !important;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.15);
    padding: 30px;
    height: 100%;
}

.ks-block-iframe--form .ks-block-iframe__container {
    background-color: #64B5F6;
    border-radius: 12px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.15);
    padding: 10px;
    overflow: hidden;
    height: 100%;
}

/* Kontakt Responsive */
@media (max-width: 1024px) {
    .page-kontakt main {
        grid-template-columns: 1fr;
        padding: 40px 20px;
        grid-gap: 30px;
    }

    .page-kontakt main>.ks-block-iframe--form,
    .page-kontakt main>.ks-block-agreement,
    .page-kontakt main>.ks-block-address {
        grid-column: 1 / -1;
    }

    .page-kontakt main>.ks-block-iframe--form {
        order: 0;
    }

    .page-kontakt main>.ks-block-agreement {
        order: 1;
    }

    .page-kontakt main>.ks-block-address {
        order: 2;
    }

    .page-kontakt main>.ks-block-headline,
    .page-kontakt main>.text-hero-section {
        order: -1;
    }

    .page-kontakt main>.map-section,
    .page-kontakt main>.ks-block-iframe--map {
        order: 3;
    }

    /* Kontaktdaten-Box auf Mobile anpassen */
    .page-kontakt .ks-block-address {
        margin: 40px 0;
    }

    .page-kontakt .ks-block-address__content {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 0 15px;
    }

    .page-kontakt .ks-block-address h3 {
        font-size: 2.2rem;
        margin-bottom: 30px;
    }

    .page-kontakt .ks-block-address p {
        font-size: 0.95rem;
        padding: 30px 20px;
        gap: 15px;
    }

    .page-kontakt .ks-block-address p::before {
        width: 50px;
        height: 50px;
    }
}

@media (max-width: 768px) {
    .text-hero-content h1 {
        font-size: 2.8rem;
    }
}

/* 
=================================
--- UEBER MICH PAGE --- 
=================================
*/

/* Über Mich - H2 Padding entfernen */
/* Über Mich - H2 Padding moved to modules/text_block/style.css */

/* Profile Block Layout Hack */
.ks-block-profile {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding-left: 0;
    padding-right: 0;
}

.ks-block-profile__text h2 {
    text-align: right;
    color: var(--ks-color-white);
}

/* Personal Text Section */
.personal-text-section {
    background-color: var(--ks-color-secondary);
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding: var(--ks-spacing-lg) var(--ks-spacing-sm);
    box-sizing: border-box;
    color: var(--ks-color-black);
    text-align: center;
}

.personal-text-container {
    max-width: var(--ks-text-max-width);
    margin: 0 auto;
}

.personal-text-container p {
    font-size: 1rem;
    line-height: var(--ks-line-height-normal);
    text-align: left;
    color: var(--ks-color-black);
}

/* Final Note */
.final-note-section {
    background-color: var(--ks-color-secondary);
    color: var(--ks-color-white);
    padding: var(--ks-spacing-xl) var(--ks-spacing-sm);
    text-align: left;
}

.final-note-container {
    max-width: var(--ks-text-max-width);
    margin: 0 auto;
}

.final-note-container h2 {
    font-size: 2.5rem;
    margin-top: 0;
}

.final-note-container p {
    font-size: var(--ks-font-size-base);
    line-height: var(--ks-line-height-relaxed);
    opacity: 0.9;
}

/* Mobile Fixes for Uber Mich */
@media screen and (max-width: 768px) {
    .ks-block-profile {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        left: auto !important;
        right: auto !important;
        padding-left: var(--ks-spacing-sm) !important;
        padding-right: var(--ks-spacing-sm) !important;
        box-sizing: border-box !important;
    }

    .ks-block-profile__text h2 {
        text-align: left !important;
        margin-left: 0 !important;

    }

    .personal-text-section {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        left: auto !important;
        right: auto !important;
    }

    .personal-text-container p {
        text-align: left !important;
    }
}

/* 
=================================
--- HERO OVERLAY MODULE (Specific Pages) --- 
=================================
*/

/* 
   Applies to:
   - Intuitiver Spaziergang (page-intuitiverspaziergang)
   - Paarberatung (page-paarberatung)
   - Powercoaching (page-powercoaching)
   - Persönliches Coaching (page-persoenliches-coaching)
   - Visionäre Führung (page-visionaerefuehrung)
   - Gruppensupervision (page-gruppensupervision)
   - Situative Gruppensupervision (page-situativegruppensupervision)
*/

/* Reset main to grid to allow cell overlaps */
.page-intuitiverspaziergang main,
.page-paarberatung main,
.page-powercoaching main,
.page-persoenliches-coaching main,
.page-visionaerefuehrung main,
.page-gruppensupervision main,
.page-situativegruppensupervision main {
    display: grid;
    grid-template-columns: 100%;
    /* Single column */
    /* Rows implied */
}

/* Target Header/Image - Place in Row 1 */
.page-intuitiverspaziergang main>header,
.page-paarberatung main>header,
.page-powercoaching main>header,
.page-persoenliches-coaching main>header,
.page-visionaerefuehrung main>header,
.page-gruppensupervision main>header,
.page-situativegruppensupervision main>header,
.page-intuitiverspaziergang main>.ks-block-fullimage,
.page-paarberatung main>.ks-block-fullimage,
.page-powercoaching main>.ks-block-fullimage,
.page-persoenliches-coaching main>.ks-block-fullimage,
.page-visionaerefuehrung main>.ks-block-fullimage,
.page-gruppensupervision main>.ks-block-fullimage,
.page-situativegruppensupervision main>.ks-block-fullimage {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
}

/* Target Headline - Place in Row 1 (Overlay) */
/* Hero Overlay Module Internal Styles moved to modules/headline/style.css */

/* Ensure subsequent siblings flow naturally (Row 2+) */
/* CSS Grid auto-placement handles this for siblings not assigned to a row */