/**
 * LAYOUT SYSTEM
 * Clean, centered, predictable
 *
 * Philosophy: KISS (Keep It Simple, Stupid)
 * - Body centers everything
 * - Site wrapper limits max width to 1920px
 * - Sections have full-width backgrounds (within wrapper)
 * - Containers limit content width and center it
 */

/* ===== HTML: WHITE BACKGROUND FOR OUTER AREAS ===== */
html {
    background-color: white; /* Bereich außerhalb max-width: 1920px */
    overflow-x: hidden; /* Verhindert horizontales Scrollen */
}

/* ===== BODY: CENTERED WRAPPER ===== */
body {
    background: white; /* Geändert von var(--seasalt) für konsistentes Weiß */
    font-family: var(--font-content);
    color: var(--penn-blue);
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Verhindert horizontales Scrollen */
}

/* ===== MAIN WRAPPER: MAX 1920PX ===== */
.site-wrapper {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    background: white; /* Explizit weiß für konsistenten Hintergrund */
    position: relative;
}

/* Main Content: Abstand für fixed Header */
main {
    margin-top: 0;
    padding-top: 56px; /* Mobile: Nur Brand Bar (~56px) */
}

@media (min-width: 1024px) {
    main {
        padding-top: 110px; /* Desktop/Tablet: Brand Bar + Nav Bar (~110px) — sync mit .header-nav-bar Breakpoint */
    }
}

/* ===== SECTION: FULL-WIDTH BACKGROUND ===== */
section {
    width: 100%;
    position: relative;
}

/* ===== CONTAINER: CENTERED CONTENT ===== */
.container {
    width: 100%;
    max-width: var(--max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding-mobile);
    padding-right: var(--container-padding-mobile);
}

@media (min-width: 768px) {
    .container {
        padding-left: var(--container-padding-tablet);
        padding-right: var(--container-padding-tablet);
    }
}

@media (min-width: 1024px) {
    .container {
        padding-left: var(--container-padding-desktop);
        padding-right: var(--container-padding-desktop);
    }
}

@media (min-width: 1440px) {
    .container {
        padding-left: 4rem;   /* 64px - Large Desktop */
        padding-right: 4rem;
    }
}

@media (min-width: 1920px) {
    .container {
        padding-left: var(--container-padding-wide);
        padding-right: var(--container-padding-wide);
    }
}

/* ===== CONTAINER VARIANTS ===== */
.container-narrow {
    max-width: 1200px;
}

.container-full {
    max-width: var(--max-width);
    padding: 0;
}

/* ===== SECTION SPACING (aus altem System) ===== */
.section-spacing {
    padding-top: 2rem;    /* 32px - Mobile */
    padding-bottom: 2rem;
}

@media (min-width: 768px) {
    .section-spacing {
        padding-top: 4rem;    /* 64px - Tablet */
        padding-bottom: 4rem;
    }
}

@media (min-width: 1024px) {
    .section-spacing {
        padding-top: 6rem;    /* 96px - Desktop */
        padding-bottom: 6rem;
    }
}

@media (min-width: 1920px) {
    .section-spacing {
        padding-top: 8rem;    /* 128px */
        padding-bottom: 8rem;
    }
}

/* ===== RESPONSIVE CONTAINER (aus altem System) ===== */
.container-responsive {
    width: 100%;
    margin: 0 auto;
    padding-left: 1rem;    /* Mobile: 16px */
    padding-right: 1rem;
}

@media (min-width: 768px) {
    .container-responsive {
        padding-left: 1.5rem;  /* 24px */
        padding-right: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .container-responsive {
        max-width: 1024px;
        padding-left: 2rem;    /* 32px */
        padding-right: 2rem;
    }
}

@media (min-width: 1920px) {
    .container-responsive {
        max-width: 1920px;
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* ===== SECTION CATEGORY LABEL (aus altem System) ===== */
.section-category {
    display: inline-block;
    color: var(--penn-blue);
    text-transform: uppercase;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-lg);
    font-family: var(--font-interface);
}

/* ===== UTILITY: FLEX CENTERING ===== */
.center-content {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ===== SECTION FRAME: MARGINS FOR VISUAL SEPARATION ===== */
.section-frame {
    margin: 0;
    width: 100%;
}

@media (min-width: 1300px) {
    .section-frame {
        margin: 0;
        width: 100%;
    }
}

/* ===== SCHATTENFUGE ZWISCHEN SEKTIONEN ===== */
/* Elegante Tiefenwirkung ohne Stacking-Effekt */
section {
    position: relative;
}

/* Dezente Schattenfuge oben an jeder Sektion */
.section-spacing {
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.03);
}

/* ===== SECTION DIVIDER: RESPONSIVE PFERDERÜCKEN-SILHOUETTE ===== */
/* Viewport-basierte Höhe mit min/max Grenzen für kontrollierte Skalierung */
.section-divider {
    position: relative;
    width: calc(100% + 2px); /* 2px breiter um Sub-Pixel-Gaps zu überdecken */
    margin-left: -1px; /* 1px nach links verschieben */
    margin-top: -40px;  /* Überlappung nach oben */
    margin-bottom: -40px; /* Überlappung nach unten */
    overflow: visible;
    z-index: 5;
    pointer-events: none; /* Klicks durchlassen - Divider sind rein dekorativ */
}

.section-divider svg {
    width: 100%;
    height: 7.3vw;      /* 140px bei 1920px, skaliert proportional */
    min-height: 40px;   /* Minimum auf Mobile - kompakter */
    max-height: 140px;  /* Maximum auf Desktop */
    display: block;
}

/* Variant: Größerer Divider mit mehr Überlappung */
.section-divider--large {
    margin-top: -80px;
    margin-bottom: -80px;
}

.section-divider--large svg {
    height: 12vw;       /* Größer als Standard */
    min-height: 100px;
    max-height: 220px;
}

/* Variant: Reduced overlap (für Reitprofil Section) */
.section-divider--reduced {
    margin-top: -35px;
    margin-bottom: -35px;
}

@media (min-width: 1300px) {
    .section-divider--reduced {
        margin: -35px 30px;
    }
}

/* ===== DIVIDER VARIANTEN FÜR VISUELLE ABWECHSLUNG ===== */

/* Variante: Proportional (behält Seitenverhältnis, wird auf Mobile niedriger) */
.section-divider--proportional {
    height: auto;
    margin-top: -60px; /* Moderate Überlappung nach oben */
    margin-bottom: -40px; /* Weniger Überlappung nach unten */
}

.section-divider--proportional svg {
    height: 7.3vw; /* 140px bei 1920px, skaliert proportional */
    min-height: 40px; /* Mobile: kompakter */
    max-height: 140px;
}

/* Variante: Mittel (etwas Stauchung, aber weniger als default) */
.section-divider--medium {
    height: auto;
    margin-top: -80px; /* Mehr Überlappung nach oben */
    margin-bottom: -60px;
}

.section-divider--medium svg {
    height: 120px;
}

@media (max-width: 1023px) {
    .section-divider.section-divider--medium {
        margin-top: -80px !important; /* Mobile: weniger aggressiv */
    }

    .section-divider--medium svg {
        height: 7vw; /* Proportional auf Mobile */
        min-height: 35px; /* Kompakter */
    }
}