.elementor-kit-7{--e-global-color-primary:#2F7074;--e-global-color-secondary:#9DB8BB;--e-global-color-text:#414343;--e-global-color-accent:#F9C537;--e-global-color-06b1113:#FFFFFE;--e-global-color-d2da61a:#A7872C;--e-global-typography-primary-font-family:"Helvetica";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Helvetica";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Helvetica";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Helvetica";--e-global-typography-accent-font-weight:500;background-color:#9DB8BB00;}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-kit-7 h1{font-size:5em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-7 h1{font-size:40px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* 
 * POST SV TRAUNSTEIN - UI UX PRO MAX - ELEMENTOR CUSTOM CSS
 * Kopiere diesen Code in Elementor -> Site Settings -> Custom CSS
 */

: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 (SOFT FROSTED GLASS)
======================================================== */
.psv-bento-card {
  /* Extrem weiches, transparentes Glas: Mitte ist nur 50% weiß, Ränder 20% */
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.5) 75%, rgba(255, 255, 255, 0.2) 100%) !important;
  
  /* Der Weichzeichner, der den durchscheinenden Hintergrund verschwimmen lässt */
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  
  /* Physischer Rand der Kachel */
  border: 1px solid rgba(255, 255, 255, 0.6) !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.15) !important;
  
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  overflow: hidden;
  position: relative;
  display: flex !important;
  flex-direction: column;
}

/* Hover-Effekt: Kachel hebt sich leicht an und strahlt nach AUßEN */
.psv-bento-card:hover {
  transform: translateY(-6px);
  /* Ein fröhlicher, extrem leuchtender "Sunset/Coral"-Glow (Komplementärfarbe zu Teal)
     nach außen, sodass die Kachel rein bleibt und Bilder nicht "schmutzig" werden. */
  box-shadow: 
    0 15px 40px -5px rgba(255, 126, 103, 0.4) !important;
  /* Der Rand glüht freudestrahlend auf */
  border-color: rgba(255, 126, 103, 0.9) !important;
}

/* ========================================================
   2.5 CARD TYPOGRAPHY ENFORCEMENT (FAILSAFE)
   Garantiert lesbaren Text in den weißen Kacheln, 
   selbst wenn sie im dunklen Hero-Bereich liegen.
======================================================== */
.psv-bento-card,
.psv-bento-card p,
.psv-bento-card span,
.psv-bento-card div:not(.psv-glass-overlay) {
    color: var(--psv-text-body) !important;
}
.psv-bento-card h1,
.psv-bento-card h2,
.psv-bento-card h3,
.psv-bento-card 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. 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;
}

/* ========================================================
   3.5 IMAGE-FILL UTILITY (BESEITIGT PLATZVERSCHWENDUNG)
   Verwendung: Für Bento-Karten, die NUR ein Bild enthalten.
======================================================== */
.psv-image-fill {
  padding: 0 !important; /* Entfernt den weißen Rand um das Bild */
}

.psv-image-fill img,
.psv-image-fill .elementor-widget-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* Zwingt das Bild, die ganze Kachel zu füllen */
  margin: 0 !important;
}

/* ========================================================
   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
======================================================== */
body, .elementor-page {
    /* Ein etwas tieferes Grau/Blau als Basis ('#E2E8F0'), damit die Karte als 3D-Objekt sichtbar wird */
    background-color: #E2E8F0 !important;
    background-image: 
        /* 1. Die geliebte Rauschen-Textur aus deinem Original-Code (Premium-Feeling) */
        url("/wp-content/uploads/2026/02/noise.svg"),
        /* 2. Kraftvolles Vereins-Gold, riesig und weich von rechts oben */
        radial-gradient(ellipse at 90% 10%, rgba(249, 197, 55, 0.6) 0%, transparent 80%),
        /* 3. Intensive Vereins-Teal-Energie von links unten */
        radial-gradient(ellipse at 10% 90%, rgba(47, 112, 116, 0.5) 0%, transparent 80%),
        /* 4. Sanftes Hellblau als verbindender Mittelton */
        radial-gradient(ellipse at 50% 50%, rgba(157, 184, 187, 0.3) 0%, transparent 100%) !important;
    background-blend-mode: overlay, normal, normal, normal !important;
    background-size: 200px 200px, 100% 100%, 100% 100%, 100% 100% !important;
    background-position: top center !important;
    background-attachment: fixed !important;
}

/* 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
======================================================== */
.elementor-kit-7.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.
======================================================== */
.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;
}/* End custom CSS */