/**
 * Section Components
 * Juliana y Fadi Tango Website
 * 
 * Wiederverwendbare Section-Layouts
 */

/* ==================== INTRO SECTION ==================== */
/* Gemeinsame Basis für die Intro-Bereiche von Startseite, Einsteiger,
   Practicamos Juntos, Privatstunden und Shows/Workshops. Seiten mit
   Hintergrund-Box (Startseite, Einsteiger, Practicamos, Privatstunden)
   ergänzen zusätzlich den Modifier .intro-section--boxed. */

.intro-section {
    text-align: center;
    /* Fluid statt starrem var(--spacing-3xl) - komplett ohne Mobile-
       Anpassung (Fluid-Design-Audit Kategorie B2/B3). Gleiche Formel
       wie .cta-section margin-top (identischer Ausgangswert 5rem) -
       Konsistenz zwischen beiden Komponenten. Desktop-Maximum
       unverändert. */
    margin-bottom: clamp(var(--spacing-lg), 8vw, var(--spacing-3xl));
}

.intro-section--boxed {
    background: var(--gradient-dark);
    /* Fluid statt starrem var(--spacing-xl) - komplett ohne Mobile-
       Anpassung. Gleiche Formel wie .cta-section padding (identischer
       Ausgangswert 3rem). Desktop-Maximum unverändert. */
    padding: clamp(var(--spacing-md), 6vw, var(--spacing-xl));
    border: var(--border-width-medium) solid var(--border-color-default);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-glow-white);
}

.intro-section h2 {
    font-size: var(--font-size-6xl);
    color: var(--color-primary);
    margin-bottom: var(--spacing-lg);
    letter-spacing: var(--letter-spacing-wider);
}

.intro-section p {
    font-size: var(--font-size-lg-alt);
    color: var(--color-text-primary);
    line-height: var(--line-height-normal);
    max-width: var(--content-width-narrow);
    margin: 0 auto var(--spacing-md);
    letter-spacing: var(--letter-spacing-base);
}

.intro-section__highlight {
    color: var(--color-text-accent);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-2xl);
    letter-spacing: var(--letter-spacing-base);
}

/* Seiten-Haupttitel (h1) - genutzt auf Kontakt, AGB, Datenschutz,
   Impressum, Preise. */
.page-title {
    font-size: var(--font-size-6xl);
    color: var(--color-primary);
    text-align: center;
    margin-bottom: var(--spacing-sm);
    letter-spacing: var(--letter-spacing-wider);
    /* Garantiertes Mindest-margin-top von 1rem - .container's eigenes
       padding-top läuft auf sehr schmalen Screens bewusst auf 0 (siehe
       base.css), das ist für Seiten MIT Hero-Bild korrekt (Bild sorgt
       selbst für optische Trennung zur Navigation). Seiten OHNE
       Hero-Bild (Kontakt, AGB, Datenschutz, Impressum, 404) haben
       .page-title als ersten Inhalt direkt nach dem Container - ohne
       diesen eigenen Mindestabstand klebt der Titel dann fast direkt
       an der Navigation. 1rem ist garantiert (clamp-Boden), wächst bis
       2rem auf breiteren Screens mit. */
    margin-top: clamp(1rem, 4vw, 2rem);
}

/* Benefits Section (für shows-workshops) - MIT Hintergrund-Box */
.benefits-section {
    background: var(--gradient-dark);
    /* Fluid statt starrer 4rem/3rem/6rem - komplett ohne Mobile-
       Anpassung (Fluid-Design-Audit Kategorie B2/B3). margin bewusst
       nicht so stark reduziert wie das Padding - trennt Seitenabschnitte
       voneinander, soll auch auf Mobile noch klar wirken. Desktop-Maxima
       unverändert. Grenzwerte referenzieren die Projekt-Spacing-Skala. */
    padding: clamp(var(--spacing-lg), 6vw, var(--spacing-2xl))
             clamp(var(--spacing-md), 6vw, var(--spacing-xl));
    border-radius: 16px;
    margin: clamp(var(--spacing-xl), 10vw, var(--spacing-4xl)) 0;
    border: var(--border-width-medium) solid var(--border-color-default);
    box-shadow: var(--shadow-glow-white);
}

.benefits-section h2 {
    font-size: var(--font-size-6xl);
    color: var(--color-primary);
    text-align: center;
    margin-bottom: 2rem;
    letter-spacing: 3px;
}

.benefits-intro,
.termine-intro {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 3rem;
    font-size: var(--font-size-xl);
    color: #FFFFFF;
    line-height: 1.7;
    letter-spacing: 1.65px;
}

/* Benefits Grid - Innerhalb der Box */
.benefits-section .grid-2x2 {
    gap: 2.5rem;
    margin-top: 3rem;
}

/* ==================== GRID SECTIONS ==================== */

/* Process Section Wrapper (mit Hintergrund) */
/* .process-section liegt exklusiv in pages/privatstunden.css - einzige
   Seite, die dieses Muster nutzt (kein Shared-Component). */

/* 2x2 Grid (Benefits, Process, etc.) */
.grid-2x2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
    margin-top: var(--spacing-xl);
}

/* ====================================================================
   FEATURED BENEFITS GRID
   --------------------------------------------------------------------
   Eine große, hervorgehobene Karte OBEN über die volle Breite +
   weitere Karten darunter nebeneinander. Wiederverwendbar für
   "Vorteile auf einen Blick"-Bereiche (Einsteiger, Privatstunden, ...).
   ==================================================================== */
.benefits-grid {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    margin-top: var(--spacing-xl);
}

.benefits-grid__side {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.6rem;
}

@media (max-width: 900px) {
    .benefits-grid__side {
        grid-template-columns: 1fr;
    }
}

/* 3-Column Grid */
.grid-3-col {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2.5rem;
    margin-top: var(--spacing-xl);
}

/* ==================== CTA SECTION ==================== */

.cta-section {
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
    border: 2px solid var(--color-primary);
    border-radius: 12px;
    /* Fluid statt starrem 3rem + wirkungsloser 768px-Regel (die setzte
       padding auf var(--spacing-xl), was exakt 3rem entspricht - also
       identisch zur Basis, faktisch ohne Effekt). margin-top ebenfalls
       fluid, vorher komplett ohne Mobile-Anpassung. Desktop-Maxima
       unverändert identisch zu den bisherigen Fixwerten. Grenzwerte
       referenzieren die Projekt-Spacing-Skala (Fluid-Design-Audit
       Kategorie B2/B3). */
    padding: clamp(var(--spacing-md), 6vw, var(--spacing-xl));
    text-align: center;
    margin-top: clamp(var(--spacing-lg), 8vw, var(--spacing-3xl));
    box-shadow: var(--shadow-glow-white);
}

.cta-section h3 {
    font-size: var(--font-size-5xl);
    color: var(--color-primary);
    margin-bottom: 1rem;
    letter-spacing: 3px;
}

.cta-section p:not(.pricing-agb-hint) {
    font-size: var(--font-size-lg);
    color: var(--color-gray-200);
    margin-bottom: 2rem;
}

/* .cta-buttons / .cta-button liegen zentral in components/buttons.css. */

/* ==================== WORLDWIDE SECTION ==================== */

.worldwide-section {
    background: var(--gradient-dark);
    /* Fluid statt starrer 5rem/3rem/6rem - komplett ohne Mobile-
       Anpassung. Desktop-Maxima unverändert. */
    padding: clamp(var(--spacing-lg), 8vw, var(--spacing-3xl))
             clamp(var(--spacing-md), 6vw, var(--spacing-xl));
    border-radius: 16px;
    margin: clamp(var(--spacing-xl), 10vw, var(--spacing-4xl)) 0;
    text-align: center;
    border: var(--border-width-medium) solid var(--border-color-default);
    box-shadow: var(--shadow-glow-white);
}

.worldwide-section h2 {
    font-size: var(--font-size-6xl-alt);
    color: var(--color-primary);
    margin-bottom: 1.5rem;
    letter-spacing: 3px;
}

.worldwide-section p {
    font-size: var(--font-size-xl);
    color: #FFFFFF;
    line-height: 1.8;
    max-width: 800px;
    margin: 0 auto 2rem;
    letter-spacing: 1.65px;
}

.worldwide-features {
    display: grid;
    /* Immer 1 Spalte (Option C) - kein Wechsel zwischen 4/2/1 Spalten
       mehr über feste Breakpoints. Da die Spaltenzahl dadurch konstant
       bleibt, kann sich hier - anders als bei einem Spaltenzahl-Wechsel,
       der zwangsläufig ein diskreter Sprung ist - wirklich ALLES
       (Versatz, Abstand) stufenlos mit der Bildschirmbreite verändern. */
    grid-template-columns: 1fr;
    justify-items: center;
    /* Fluide Rampe, Nullpunkt bei 300px Breite: Ab 300px und darunter
       kein horizontaler Versatz mehr (Kreise stehen gerade untereinander),
       wächst darüber linear bis 140px bei 1400px (Referenzbreite für den
       "vollen" Zickzack-Zustand). Herleitung: Steigung = 140px / (1400-300)
       = 12,727vw, Offset so gewählt, dass bei 300px exakt 0 rauskommt.
       Zum Austauschen: Ceiling-Wert (140px, an BEIDEN Stellen unten)
       anpassen, dann Steigung neu berechnen: vw-Faktor = Ceiling / 11,
       Offset = vw-Faktor * 3 (da 300px = 3 * 100px = 3vw-Basiseinheiten
       bei diesem Referenzbereich). */
    --zigzag-x: clamp(0px, 18.182vw - 54.545px, 200px);/*clamp(0px, 12.727vw - 38.18px, 140px);*/
    /* Vertikaler Abstand zwischen den gestapelten Kreisen - siehe
       margin-top bei .worldwide-feature:nth-child(n+2) weiter unten,
       dort erfolgt die eigentliche fluide Steuerung von eng/überlappend
       bis normal/positiv. Reiner Basis-Wert hier bewusst niedrig, da der
       fluide margin-top den tatsächlichen Effekt dominiert. */
    gap: 0.5rem;
    margin: 3rem 0;
}

/* Zickzack-Versatz: ungerade Kreise nach rechts, gerade nach links -
   bei durchgängig 1 Spalte ist das der einfachste Fall (kein Unterschied
   zwischen "Spalten-Parität" wie vorher bei 4/2 Spalten nötig, da es nur
   noch eine Spalte gibt). transform statt margin/gap, damit der
   Grid-Zeilenfluss selbst unangetastet bleibt. Keine :hover-Sonderregeln
   nötig - die Kreise haben keinen Hover-Bewegungseffekt (siehe unten). */
.worldwide-feature:nth-child(odd) {
    transform: translateX(var(--zigzag-x));
}

.worldwide-feature:nth-child(even) {
    transform: translateX(calc(-1 * var(--zigzag-x)));
}

.worldwide-feature:nth-child(n + 2) {
    /* Fluide Rampe, Nullpunkt bei 300px Breite (synchron zu --zigzag-x
       oben): Bei 300px und darunter +24px normaler, positiver Abstand
       (keine Überlappung), wächst darüber linear bis -140px Überlappung
       bei 1400px. Herleitung: Steigung = (-140-24)/(1400-300) =
       -14,909vw, Offset so gewählt, dass bei 300px exakt +24px
       rauskommt. Bewusst dieselbe Referenzbreite (300/1400px) wie bei
       --zigzag-x verwendet, damit beide Effekte gemeinsam bei derselben
       Bildschirmbreite auf 0/neutral ankommen - sonst könnte der eine
       Effekt schon verschwunden sein, während der andere noch wirkt. */
    margin-top: clamp(-140px, -14.91vw + 68.73px, 24px);/*clamp(-200px, -4.91vw + 68.73px, 24px);*/
}

.worldwide-feature {
    /* Fluide Rampe, gleiche Referenzbreiten (300px/1400px) wie bei
       --zigzag-x und margin-top oben, damit alle drei Effekte synchron
       skalieren. Herleitung: Steigung = (270-220)/(1400-300) = 4,545vw,
       Offset so gewählt, dass bei 300px exakt 220px rauskommt. */
    width: clamp(220px, 4.545vw + 206.36px, 270px);
    height: clamp(220px, 4.545vw + 206.36px, 270px);
    padding: 1.5rem;
    /* 50% statt fixem Pixel-Wert: ergibt bei JEDER (auch fluiden)
       width/height automatisch einen exakten Kreis, ohne einen zweiten,
       synchron zu haltenden Wert (vorher: border-radius musste manuell
       immer exakt die Hälfte von width/height sein - bei fluiden Maßen
       unnötig fehleranfällig). */
    border-radius: 50%;
    background: var(--gradient-dark);
    border: var(--border-width-medium) solid var(--border-color-default);
    box-shadow: var(--shadow-glow-gold);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: transform 0.3s, border-color 0.3s;
}

/* Kein Bewegungseffekt beim Hover (nur die Border-Farbe bleibt explizit
   erhalten) - daher auch keine :nth-child(...):hover-Sonderregeln mehr
   nötig, die zuvor ausschließlich dazu dienten, den Zickzack-Versatz vor
   einem versehentlichen Hover-Reset zu bewahren. */
.worldwide-feature:hover {
    border-color: var(--border-color-default);
}

.worldwide-feature .icon {
    font-size: var(--font-size-6xl-alt);
    margin-bottom: 1rem;
    line-height: 1;
}

.worldwide-feature h3 {
    color: var(--color-primary);
    font-size: var(--font-size-xl);/*var(--font-size-2xl);*/
    margin-bottom: 0.5rem;
    letter-spacing: 2px;
    line-height: 1.2;
}

.worldwide-feature p {
    color: #FFFFFF;
    font-size: var(--font-size-sm);/*var(--font-size-base);*/
    letter-spacing: 1.65px;
    line-height: 1.4;
    margin: 0;
}

/* ==================== RESPONSIVE ==================== */

/* .worldwide-features/.worldwide-feature brauchen ab jetzt keine
   Breakpoint-Sonderregeln mehr (Option C: durchgängig 1 Spalte, alle
   Werte fluide über clamp() direkt in der Basis-Regel oben - siehe
   Kommentare dort). */

@media (max-width: 968px) {
    .grid-2x2 {
        grid-template-columns: 1fr;
    }
}