/* 
 * POST SV TRAUNSTEIN - UI UX PRO MAX - ELEMENTOR CUSTOM CSS
 * Automatically loaded via the Verein Core System.
 */

:root {
  /* --- POST SV VEREINSFARBEN --- */
  --psv-primary: #2F7074;
  --psv-secondary: #9DB8BB;
  --psv-accent: #F9C537;
  --psv-text-dark-gold: #A7872C;
  --psv-text-body: #414343;
  --psv-text-white: #FFFFFE;

  /* --- ERWEITERTE UI FARBEN (BENTO DESIGN) --- */
  --psv-bg-site: #F3F6F6; /* Ganz leichtes Grau/Teal für den Seitenhintergrund */
  --psv-bg-card: #FFFFFE; /* Reines Weiß für die Bento-Karten */
  
  /* --- BENTO GRID GEOMETRY --- */
  --bento-border-radius: 16px;
  --bento-gap: 24px;
  --bento-padding: 32px;
  --bento-shadow: 0 10px 40px -10px rgba(47, 112, 116, 0.1);
}

/* ========================================================
   1. FLUID BENTO GRID CONTAINER
   Verwendung: Elementor Haupt-Container (CSS Grid aktivieren)
   und ihm die Klasse 'psv-bento-grid' geben.
======================================================== */
.psv-bento-grid {
  display: grid;
  /* Fluid: Karten sind mind. 300px breit, nehmen sonst den restlichen Platz ein */
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--bento-gap);
  width: 100%;
}

/* ========================================================
   2. BENTO CARD (BASE GLASS)
======================================================== */
.psv-bento-card {
  /* Sauberes Glas (Kein Kirmes-Glow mehr in der Basis-Klasse) */
  background: rgba(255, 255, 255, 0.7) !important;
  
  /* Der Weichzeichner für das Milchglas-Gefühl */
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  
  /* Physischer Rand der Kachel */
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
  border-radius: 24px !important;
  padding: var(--bento-padding);
  
  /* Sanfter, permanenter Schatten zur Abhebung vom Hintergrund */
  box-shadow: 0 10px 30px -10px rgba(47, 112, 116, 0.05) !important;
  
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease, border-color 0.4s ease;
  overflow: hidden;
  position: relative;
  display: flex !important;
  flex-direction: column;
}

/* Hover-Effekt: Basis-Verhalten (Scale) */
.psv-bento-card:hover {
  transform: scale(1.02) translateY(-6px);
  /* Ein leichter Basisschatten, falls keine abteilungsspezifische Glow-Klasse zugewiesen ist */
  box-shadow: 0 15px 35px -5px rgba(47, 112, 116, 0.1) !important;
  border-color: rgba(255, 255, 255, 1) !important;
}

/* ========================================================
   2.1 LIQUID GLOW ENGINE (ABTEILUNGEN)
   Trigger: Weist man einer psv-bento-card z.B. "psv-hover-tt" zu.
======================================================== */
@keyframes psvLiquidGlow {
  0% { transform: scale(1.5) rotate(0deg); }
  50% { transform: scale(1.5) rotate(180deg); }
  100% { transform: scale(1.5) rotate(360deg); }
}

/* Base Wrapper for the glowing pseudo-element */
.psv-bento-card[class*="psv-hover-"]::before {
    content: '';
    position: absolute;
    /* Parameter fuer Glow Ausdehnung (-2px) - anpassbar via /tune-glow */
    top: -2px; left: -2px; right: -2px; bottom: -2px;
    z-index: 0; /* Hinter dem Inhalt */
    opacity: 0;
    transition: opacity 0.5s ease;
    filter: blur(30px); /* Starker Weichzeichner für fluessigen Flow */
    pointer-events: none;
}

/* Glow sichtbar bei Hover */
.psv-bento-card[class*="psv-hover-"]:hover::before {
    opacity: 0.6; /* Dominanter Glow - anpassbar via /tune-glow */
    animation: psvLiquidGlow 6s linear infinite; /* Tempo anpassbar via /tune-animation */
}

/* Der innere Content muss UEBER dem ::before Glow liegen */
.psv-bento-card > * {
    z-index: 1;
    position: relative;
}

/* --- ABTEILUNGS-MAPPINGS --- */

/* 1. Post SV Global (Teal / Gold) */
.psv-hover-psv::before { background: conic-gradient(from 0deg, var(--psv-primary), var(--psv-accent), var(--psv-primary)); }

/* 2. Tischtennis (Ocean Blue / Cyber Cyan) */
.psv-hover-tt::before { background: conic-gradient(from 0deg, #1A5F7A, #22D3EE, #1A5F7A); }

/* 3. Gymnastik (Hot Pink / Soft Rose) - KEIN Lila! */
.psv-hover-gym::before { background: conic-gradient(from 0deg, #FF69B4, #FFE4E1, #FF69B4); }

/* 4. Volleyball (Emerald Green / Lime Green) */
.psv-hover-vb::before { background: conic-gradient(from 0deg, #10B981, #A3E635, #10B981); }

/* 5. Kegeln (Crimson Red / Fire Orange) */
.psv-hover-kegeln::before { background: conic-gradient(from 0deg, #DC2626, #F97316, #DC2626); }

/* 6. Learning Hub Youth Flow (Vibrant Multi-Color) */
.psv-hover-colorful::before { background: conic-gradient(from 0deg, #22D3EE, var(--psv-accent), #FF69B4, #22D3EE); }

/* ========================================================
   2.5 CARD TYPOGRAPHY ENFORCEMENT (FAILSAFE)
   Garantiert lesbaren Text in hellen Kacheln.
   Zwingt KEIN Schwarz auf, wenn die Kachel "psv-aurora-bg" ist!
======================================================== */
.psv-bento-card:not(.psv-aurora-bg),
.psv-bento-card:not(.psv-aurora-bg) p,
.psv-bento-card:not(.psv-aurora-bg) span,
.psv-bento-card:not(.psv-aurora-bg) div:not(.psv-glass-overlay) {
    color: var(--psv-text-body) !important;
}
.psv-bento-card:not(.psv-aurora-bg) h1,
.psv-bento-card:not(.psv-aurora-bg) h2,
.psv-bento-card:not(.psv-aurora-bg) h3,
.psv-bento-card:not(.psv-aurora-bg) h4 {
    color: var(--psv-primary) !important;
}

/* Große Feature-Kachel (Nimmt 2 Spalten auf Desktop ein) */
@media (min-width: 1024px) {
  .psv-bento-card-featured {
    grid-column: span 2;
  }
}

/* ========================================================
   3. BENTO WRAPPER (Das Card Panel für Grids & Header)
   Zieht Überschrift und Kacheln in einen Container
======================================================== */
.psv-bento-wrapper {
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 32px;
  padding: 40px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.02);
}
@media (max-width: 768px) {
    .psv-bento-wrapper {
        padding: 20px;
        border-radius: 20px;
    }
}

/* ========================================================
   X. BENTO WIDE CARD (For Galleries and Span Content)
======================================================== */
.psv-bento-wide {
    grid-column: span 2;
}

@media (max-width: 768px) {
    .psv-bento-wide {
        grid-column: 1 / -1; /* Full width on mobile */
    }
}

/* ========================================================
   3. DYNAMIC CONTRAST ENFORCEMENT & 2D GLASS OVERLAY
   Verwendung: Für Karten, die ein Hintergrundbild haben und 
   beim Hover/Immer Text anzeigen sollen.
======================================================== */
.psv-glass-overlay {
  /* Das Enforcement: Ein abgedunkelter Layer in der Primary-Farbe */
  background: rgba(47, 112, 116, 0.85) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 254, 0.15);
  border-radius: var(--bento-border-radius);
  color: var(--psv-text-white);
}

/* 2D Progressive Disclosure (Text blendet auf Hover ein) */
.psv-hover-reveal-content {
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  pointer-events: none; /* Verhindert blockieren, wenn unsichtbar */
}

/* Beim Hover über die Kachel (.psv-bento-card) wird der Content sichtbar */
.psv-bento-card:hover .psv-hover-reveal-content {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* DELETED: .psv-image-fill has been removed in favor of asymmetric grid structures. */

/* ========================================================
   4. BUTTONS & HEADERS
======================================================== */
.psv-button-primary {
  background-color: var(--psv-accent);
  color: var(--psv-primary);
  border-radius: 999px; /* Pill-Shape für moderne Buttons */
  padding: 12px 28px;
  font-weight: 700;
  transition: all 0.3s ease;
  border: none;
}

.psv-button-primary:hover {
  background-color: #e5b32e; /* Etwas dunkleres Gold */
  transform: scale(1.02);
}

/* ========================================================
   4.5. GLOBAL PAGE BACKGROUND & WRAPPER TRANSPARENCY
======================================================== */
/* BACKGROUND REMOVED: This caused a visual conflict with Elementor backgrounds */

/* Zwingt den riesigen Elementor-Hauptcontainer dazu, den neuen Body-Hintergrund durchzulassen */
.elementor-element.e-con.e-parent {
    background-color: transparent !important;
    background-image: none !important;
}

/* ========================================================
   5. POST SV TRAUNSTEIN: AURORA BACKGROUND 
   Verwendung: Für Hero Sections oder spezielle Kacheln.
======================================================== */
.psv-aurora-bg {
    background-image:
        url("/wp-content/uploads/2026/02/noise.svg"),
        radial-gradient(circle at 100% 0%, rgba(249, 197, 55, 0.45) 0%, transparent 55%),
        radial-gradient(circle at 0% 100%, rgba(157, 184, 187, 0.5) 0%, transparent 60%),
        linear-gradient(180deg, var(--psv-primary) 0%, #1a3a3c 100%);
    background-blend-mode: overlay, normal, normal, normal;
    background-size: 200px 200px, cover, cover, cover;
}

/* ========================================================
   6. POST SV TRAUNSTEIN: TT HERO SECTION OVERRIDE
======================================================== */
.tt-hero-section {
    background-image:
        url("/wp-content/uploads/2026/02/noise.svg"),
        radial-gradient(ellipse at 100% 0%, rgba(249, 197, 55, 0.4) 0%, transparent 60%),
        radial-gradient(ellipse at 0% 100%, rgba(157, 184, 187, 0.4) 0%, transparent 70%),
        /* Der magische Verlauf: Von sattem Grün in absolute Transparenz, um mit dem Rest der Seite zu verschmelzen! */
        linear-gradient(180deg, rgba(47, 112, 116, 1) 0%, rgba(47, 112, 116, 0.8) 60%, rgba(248, 250, 252, 0) 100%);
    background-blend-mode: overlay, normal, normal, normal;
    background-size: 200px 200px, 100% 100%, 100% 100%, 100% 100%;
    color: var(--psv-text-white);
    /* Harte Kanten und Rahmen entfernt, damit es wie eine Wolke in die Seite fließt */
    border: none !important;
    border-radius: 0 !important;
    padding: 150px var(--bento-padding) 120px var(--bento-padding) !important;
}

/* Erzwingt weiße Schrift für alle Elemente innerhalb der Hero Section */
.tt-hero-section h1,
.tt-hero-section h2,
.tt-hero-section h3,
.tt-hero-section h4,
.tt-hero-section p {
    color: var(--psv-text-white) !important;
}

/* ========================================================
   6.5. BENTO CARDS INNERHALB DES HEROS (OVERLAP-SUPPORT)
   Erlaubt es, Bento-Karten (News, Beschreibungen) direkt in 
   den dunklen Hero zu ziehen, ohne dass die Schrift weiß wird.
======================================================== */
.tt-hero-section .psv-bento-card,
.tt-hero-section .psv-bento-card h1,
.tt-hero-section .psv-bento-card h2,
.tt-hero-section .psv-bento-card h3,
.tt-hero-section .psv-bento-card h4,
.tt-hero-section .psv-bento-card p,
.tt-hero-section .psv-bento-card span,
.tt-hero-section .psv-bento-card div {
    /* Stellt die dunkle Schriftfarbe auf der hellen Kachel wieder her */
    color: var(--psv-text-body) !important; 
}

/* Erhält die Links (z.B. Pfeile) in den Bento-Karten farbig */
.tt-hero-section .psv-bento-card a {
    color: var(--psv-primary) !important;
}

/* Falls eine dunkle Aurora-Bento-Karte im Hero liegt, bleibt sie natürlich weiß */
.tt-hero-section .psv-bento-card.psv-aurora-bg,
.tt-hero-section .psv-bento-card.psv-aurora-bg h1,
.tt-hero-section .psv-bento-card.psv-aurora-bg h2,
.tt-hero-section .psv-bento-card.psv-aurora-bg p {
    color: var(--psv-text-white) !important;
}

/* ========================================================
   7. POST SV TRAUNSTEIN: STICKY HEADER FIX
======================================================== */
selector.elementor-sticky--active,
.elementor-sticky--active {
    background-color: rgba(47, 112, 116, 0.95) !important;
    backdrop-filter: blur(30px) !important;
    -webkit-backdrop-filter: blur(30px) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1) !important;
}

/* ========================================================
   8. POST SV TRAUNSTEIN: SECTION HEADERS (MANNSCHAFTEN)
   Modernes, klares Typographie-Design ohne Kasten, 
   das die Bento-Kacheln optisch anführt und verankert.
======================================================== */
/* --- VARIANTE B: CARD HEADER BLOCK ("Eingefasster Rahmen") --- */
.psv-card-section {
    background: rgba(255, 255, 255, 0.45) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-radius: 24px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    overflow: hidden !important; /* Schneidet den Header perfekt an den runden Ecken ab */
    margin-bottom: 60px !important;
    padding: 0 !important; /* Elementor Padding auf 0 zwingen für Edge-to-Edge Header */
    /* Innenabstand für das Raster muss über einen inneren Container oder direkt am Grid gemacht werden */
}

.psv-card-header {
    background: var(--psv-primary) !important; /* Post SV Teal als massiver Block */
    color: var(--psv-text-white) !important;
    padding: 24px 40px !important;
    margin: 0 !important;
    width: 100% !important;
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.5px !important;
    border-bottom: 4px solid var(--psv-accent) !important; /* Feiner Gold-Akzent an der Unterkante des Headers */
    
    /* Flexbox Alignment, falls im Elementor Heading Widget was schiefgeht */
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

/* Anpassung für Mobile (Card Header) */
@media (max-width: 768px) {
    .psv-card-header {
        padding: 16px 24px !important;
        font-size: 1.4rem !important;
    }
}

/* --- URSPRÜNGLICHER HEADER (Offen / Losgelöst) --- */
.psv-section-header {
    display: flex; 
    align-items: center;
    width: 100%;
    /* WICHTIG: Viel Abstand nach OBEN (Neuer Bereich), GANZ WENIG Abstand nach UNTEN (Gruppierung mit Kacheln) */
    margin: 80px 0 16px 0 !important; 
    padding: 0 !important;
    position: relative;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

/* Entfernt jeden Hover-Bewegungsschnickschnack von der Box selbst */
.psv-section-header:hover {
    transform: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
    background: transparent !important;
}

/* Die eigentliche Überschrift massiv, dominant und in dunklem Vereins-Teal */
.psv-section-header h1,
.psv-section-header h2,
.psv-section-header h3 {
    margin: 0 !important;
    padding: 0 !important;
    color: var(--psv-primary) !important;
    font-size: 2.2rem !important; /* Deutlich größer */
    font-weight: 800 !important;  /* Extra Bold */
    letter-spacing: -1px;        /* Moderner, enger Look */
    display: flex;
    align-items: center;
}

/* Der schicke Club-Gold Accent-Strich L I N K S neben der Schrift als visueller Anker */
.psv-section-header h1::before,
.psv-section-header h2::before,
.psv-section-header h3::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 1.2em; /* Passt sich der Schriftgröße an */
    background-color: var(--psv-accent); /* Das leuchtende Gold */
    border-radius: 4px;
    margin-right: 16px;
}

/* Der Pfeil (als softer Link-Indikator daneben, rechts angebunden) */
.psv-section-header::after {
    content: '→';
    font-size: 1.8rem;
    color: rgba(47, 112, 116, 0.4); /* Sehr dezentes Teal (halbtransparent) */
    margin-left: 20px;
    transition: transform 0.3s ease, color 0.3s ease;
}

/* Beim drüberfahren leuchtet NUR der Pfeil in Gold auf und schiebt sich nach rechts */
.psv-section-header:hover::after {
    transform: translateX(8px);
    color: var(--psv-accent);
}

/* ========================================================
   9. POST SV TRAUNSTEIN: HEADER MENU TEXT COLOR FIX
   Garantiert lesbare Menüpunkte auf dem dunklen Aurora-Hintergrund
======================================================== */
.elementor-nav-menu--main .elementor-item {
    color: var(--psv-text-white) !important;
}

/* ========================================================
   10. TT GALLERY (Horizontal Thumbnail Scroll)
   Garantiert, dass sich Bilderreihen horizontal in Bento-Karten 
   einpassen, ohne das Layout (den Rahmen) zu sprengen.
======================================================== */
.tt-gallery {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 12px;
    padding-bottom: 12px;
    width: 100%;
    scrollbar-width: thin;
    scrollbar-color: rgba(47, 112, 116, 0.3) transparent;
}

.tt-gallery-marquee-content {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    width: max-content !important; /* Verhindert Layout-Staudruck für die unendliche Animation */
    animation: sequence-marquee 30s linear infinite !important;
}

.tt-gallery-marquee-content:hover {
    animation-play-state: paused !important;
}

@keyframes sequence-marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%); /* Startet sanft wieder, sobald 50% erreicht sind */
    }
}

.tt-gallery::-webkit-scrollbar {
    height: 6px;
}
.tt-gallery::-webkit-scrollbar-track {
    background: transparent;
}
.tt-gallery::-webkit-scrollbar-thumb {
    background: rgba(47, 112, 116, 0.3);
    border-radius: 3px;
}

/* Marquee Container (Hides overflow for sliding effect but allows scrolling) */
.tt-gallery-marquee-container {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none; /* Hide scrollbar for a cleaner look */
    -ms-overflow-style: none;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.tt-gallery-marquee-container::-webkit-scrollbar {
    display: none;
}

/* Gemeinsames Wrapper-Styling für Kacheln/Items */
.tt-gallery .gallery-item,
.tt-gallery figure,
.tt-gallery-marquee-content .tt-gallery-item {
    flex: 0 0 auto;
    height: 250px !important;    /* Vorschlag 1: Flexible, aber begrenzte Kachel-Höhe */
    width: auto !important;      /* Dynamische Breite, die den Proportionen des Bildes folgt */
    max-width: none !important;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin: 0 !important;
    position: relative;
    overflow: hidden; /* Beschneidet innere Bilder und Elemente */
    background: rgba(0,0,0,0.05); /* Platzhalter während dem Laden */
}

/* Bilder füllen den Wrapper */
.tt-gallery img,
.tt-gallery figure img,
.tt-gallery-marquee-content img {
    display: block;
    height: 100% !important;
    width: auto !important;      /* Lässt das Bild seine native Breite ausrechnen */
    max-width: none !important;
    object-fit: contain !important; /* Contain verhindert hartes Abschneiden in dynamischen Boxen */
}

/* Hover States für die Wrapper */
.tt-gallery .gallery-item:hover,
.tt-gallery figure:hover,
.tt-gallery-marquee-content .tt-gallery-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
}

/* Overlay (Der dicke blaue Play-Button wird zentriert) */
.tt-gallery-overlay {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 32px !important; /* Reduzierte Größe */
    height: 32px !important; /* Reduzierte Größe */
    background: rgba(47, 112, 116, 0.85) !important; /* Post SV Teal transparent */
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important; /* Mausklicks fallen durch auf das Item */
    z-index: 5 !important;
    transition: all 0.3s ease !important;
}

/* Wenn ein Element einen Hover hat, reagiert auch das Overlay inside */
.tt-gallery .gallery-item:hover .tt-gallery-overlay,
.tt-gallery figure:hover .tt-gallery-overlay,
.tt-gallery-marquee-content .tt-gallery-item:hover .tt-gallery-overlay {
    background: #e5b323 !important; /* Post SV Gold */
    transform: translate(-50%, -50%) scale(1.15) !important;
}

/* 
   Hide legacy custom HTML popup (#tt-gallery-popup) that users may have pasted on their Elementor pages.
   This prevents the old flipbook buttons (red controls) from showing up at the bottom of the gallery view.
*/
#tt-gallery-popup {
    display: none !important;
}

/* =======================================================
   TODO BENTO MIGRATION: GLOBAL SITE HEADER
   
   Sobald das neue Bento-Grid Design (weiße/helle Seiten-Hintergründe)
   global auf allen Produktivseiten ausgerollt wurde, MUSS das Custom-CSS
   aus dem Elementor "Header" (selector-Regeln) gelöscht werden!
   
   Stattdessen werden die final getesteten CSS-Regeln für das Sticky-Menu
   (inkl. Dropdown-Optik) hier zentral unter einer neuen Klasse wie z.B.
   ".psv-site-header" implementiert und hardcodiert. Das befreit den Elementor 
   Editor von komplexem Custom CSS.

   Woran du denken musst:
   - Header Container in Elementor erhält dann nur noch Klasse: "psv-site-header"
   - Elementor Custom CSS Feld MUSS dann leer sein!
======================================================= */