/**
 * HERO SECTION
 * Grid-basiertes Layout (1/3 Text + 2/3 Bild)
 */

/* OLD HERO (Slider) - behalten für andere Seiten */
.hero {
    position: relative;
    min-height: calc(70vh - 80px);
    overflow: hidden;
    background: var(--penn-blue);
}

/* NEW HERO (Grid-Layout) */
.hero-new {
    background: #E5E5E5; /* Grauer Hintergrund wie im Screenshot */
    padding: 0;
    margin: 0 30px;
    width: calc(100% - 60px);
    overflow: visible;
}

.hero-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    background-size: cover;
    background-position: center;
}

.hero-slide.active {
    opacity: 1;
}

.hero-slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(42,42,99,0.4) 0%, rgba(42,42,99,0.2) 100%);
}

.hero-content {
    position: relative;
    z-index: 10;
    min-height: calc(70vh - 80px);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: white;
    padding: var(--space-3xl) 0;
}

.hero-text {
    max-width: 800px;
}

.hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: var(--space-md);
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.hero-subtitle {
    font-size: clamp(1rem, 2vw, 1.5rem);
    line-height: 1.6;
    color: rgba(255,255,255,0.95);
    margin-bottom: var(--space-xl);
}

.hero-cta {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
}

/* Hero Slider Controls */
.hero-controls {
    position: absolute;
    bottom: var(--space-lg);
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    display: flex;
    gap: var(--space-xs);
}

.hero-dot {
    width: 12px;
    height: 12px;
    background: rgba(255,255,255,0.4);
    border: none;
    cursor: pointer;
    transition: all var(--transition-base);
}

.hero-dot.active {
    background: white;
    transform: scale(1.2);
}

.hero-dot:hover {
    background: rgba(255,255,255,0.7);
}

/* Responsive */
@media (max-width: 768px) {
    .hero {
        min-height: calc(60vh - 60px);
    }

    .hero-content {
        min-height: calc(60vh - 60px);
        padding: var(--space-xl) 0;
    }

    .hero-cta {
        flex-direction: column;
    }

    .hero-cta .btn {
        width: 100%;
        text-align: center;
    }
}

/* ===== GLASGOW-STYLE HERO LAYOUT ===== */

/* C1 - Haupt-Container */
.hero-container {
    position: relative;
    width: 100%; /* Mobile: Volle Breite */
    max-width: 1920px;
    min-width: 320px; /* Sicherer Mobile-Minimum */
    margin: 0; /* Mobile: Keine Margins */
    padding: 3vw 6vw; /* Top/Bottom: 3vw, Left/Right: 6vw (verdoppelt) */
    display: grid;
    grid-template-columns: 21% 4% 75%; /* 3 Spalten: Text | Gap | Bild (75%) */
    grid-template-rows: auto auto;
    gap: 0;
    align-items: start;
    background: white;
}

/* Desktop-Compact: 3-Spalten-Grid ohne Margins (1024-1299px) */
@media (min-width: 1024px) {
    .hero-container {
        width: 100%;      /* Volle Breite nutzen */
        margin: 0;        /* KEINE Margins im kompakten Bereich */
        min-width: auto;  /* Kein erzwungenes Minimum */
    }
}

/* Desktop-Wide: 3-Spalten-Grid mit Margins (ab 1300px) */
@media (min-width: 1300px) {
    .hero-container {
        width: calc(100% - 60px);
        margin: 0 30px;
    }
}

/* C3 - Überschrift (absolut positioniert, überlappt mit C2) */
.hero-header {
    position: absolute;
    top: 5vw;
    left: 6vw; /* Verdoppelt von 3vw auf 6vw */
    width: 42%; /* Ragt über Text (21%) + Gap (4%) hinaus ins Bild (75%) */
    font-size: clamp(63px, 5.775vw, 115.5px);
    font-weight: 900;
    line-height: 0.9;
    letter-spacing: -0.03em;
    color: var(--penn-blue);
    text-transform: uppercase;
    z-index: 10;
    opacity: 1;
    hyphens: none;
    word-break: keep-all;
    overflow-wrap: normal;
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
}

/* Wrapper für Grid-Items (C4 und C2) */
.hero-content-wrapper {
    grid-column: 1 / 4; /* Über alle 3 Spalten */
    grid-row: 2;
    display: grid;
    grid-template-columns: 21% 4% 75%; /* 3 Spalten: Text | Gap | Bild (75%) */
    gap: 0;
    margin-top: 15vw; /* VW statt VH - skaliert mit Breite wie Überschrift */
}

/* C4 - Text (linke Spalte) */
.hero-text-box {
    grid-column: 1;
    font-size: clamp(16px, 1.5vw, 24px);
    line-height: 1.7;
    color: #5A5D61;
    padding-right: 0; /* Kein padding - Gap-Spalte macht den Abstand */
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
}

/* C2 - Bild (rechte Spalte, nach Gap) */
.hero-image-container {
    grid-column: 3; /* Spalte 3 (nach Gap) */
    margin-top: calc(-6vw + 15px); /* VW statt VH - konsistente Skalierung + 15px nach unten */
    z-index: 1;
    padding-left: 0; /* Kein padding - Gap-Spalte macht den Abstand */
    aspect-ratio: 3/2; /* Erzwinge 3:2 Aspect Ratio */
    overflow: hidden; /* Verhindert Überlauf bei object-fit */
}

.hero-image-container img {
    width: 100%;
    height: 100%; /* Vollständige Höhe des Containers */
    display: block;
    object-fit: cover; /* Bild füllt Container bei 3:2 */
    object-position: left bottom; /* Position wie im HTML angegeben */
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
}

.hero-image-placeholder {
    width: 100%;
    aspect-ratio: 3/2;
    background: linear-gradient(135deg, #d4d4d4 0%, #a8a8a8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-size: clamp(20px, 2vw, 32px);
    font-weight: 600;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
}

/* Fixiere Abstände bei Viewports über 1920px */
@media (min-width: 1920px) {
    .hero-container {
        padding: 57.6px 115.2px; /* Top/Bottom: 57.6px (3vw), Left/Right: 115.2px (6vw) - fixiert! */
    }

    .hero-header {
        top: 96px; /* 5vw bei 1920px = 96px */
        left: 115.2px; /* 6vw bei 1920px = 115.2px (verdoppelt) */
        font-size: 110.88px; /* 5.775vw bei 1920px = 110.88px (5% größer) */
    }

    .hero-content-wrapper {
        margin-top: 288px; /* 15vw bei 1920px = 288px */
    }

    .hero-image-container {
        margin-top: -100.2px; /* -6vw bei 1920px = -115.2px + 15px = -100.2px */
    }
}

/* Responsive: Unter 1024px klassisches Mobile Layout */
/* Wichtig: Breakpoint muss früh genug sein, damit Desktop-Grid nicht überläuft */
@media (max-width: 1023px) {
    .hero-container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 320px;
        margin: 0 !important;
        padding: 20px !important;
        grid-template-columns: 1fr !important;
        box-sizing: border-box !important;
    }

    .hero-container * {
        max-width: 100%;
        box-sizing: border-box;
    }

    .hero-header {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        top: 0 !important;
        left: 0 !important;
        font-size: clamp(32px, 8vw, 60px) !important; /* Kleinerer Startwert und schnellere Skalierung */
        margin-bottom: 4vh;
        opacity: 1;
        word-break: break-word !important; /* Bricht lange Wörter um */
        overflow-wrap: break-word !important;
    }

    .hero-header span {
        white-space: normal !important; /* Überschreibt inline style - ermöglicht Umbruch */
    }

    .hero-content-wrapper {
        grid-column: 1;
        grid-template-columns: 1fr;
        margin-top: 0;
        gap: 4vh;
    }

    .hero-text-box {
        grid-column: 1;
        font-size: clamp(16px, 3.5vw, 20px);
        order: 2; /* Text kommt NACH dem Bild */
    }

    .hero-image-container {
        grid-column: 1;
        margin-top: 0;
        order: 1; /* Bild kommt ZUERST */
    }

    .hero-image-placeholder {
        font-size: clamp(18px, 4.5vw, 24px);
    }
}