/* ==========================================================
   PFV LINZ – CUSTOM.CSS
   Bereinigter und kommentierter Arbeitsstand
   ==========================================================

   Diese Datei bündelt die individuellen Anpassungen der
   PFV-Linz-Website (Joomla / SP Page Builder / Visforms).

   WICHTIGE PFV-FARBEN
   Dunkelblau: #06345a bzw. #0b345f
   Hellblau:   #2994d1 / #299ad1
   Hellgrau:   #f5f7f9
   Weiß:       #ffffff

   BEREICHE / KLASSEN
   ----------------------------------------------------------
   .pfv-hero                     Startseiten-Hero
   .pfv-title                    Hauptüberschrift im Hero
   .pfv-subtitle                 Untertitel im Hero
   .pfv-btn-primary              primärer Hero-Button
   .pfv-btn-secondary            sekundärer Hero-Button
   .pfv-claim                    Claim-Grafik im Hero

   .pfv-box                      Boxen bei „Was wir tun“
   .pfv-box-icon                 Icons dieser Boxen
   .pfv-together                 „Für ein starkes Miteinander“

   .pfv-about                    Bereich „Über uns“
   .pfv-about-image              Bildspalte
   .pfv-about-photo              Foto mit schräger Kante

   .pfv-support                  Bereich „PFV unterstützen“
   .pfv-support-content          linke Textspalte
   .pfv-support-image            rechte Bildspalte
   .pfv-support-benefits-section Vorteilsbereich
   .pfv-benefit-icon             Vorteil-Icon
   .pfv-benefit-text             Vorteil-Text

   .pfv-member-image             Bild „Mitglied werden“
   .pfv-member-points            Punkte „Mitglied werden“

   .pfv-donate                   Spenden/Sponsoring-Bereich
   .pfv-donate-card              Karten im Spendenbereich

   .pfv-maifest                  SPK-Maifest-Hinweis

   #captchacode1                 Visforms-Captcha

   HINWEIS
   ----------------------------------------------------------
   Die Reihenfolge ist relevant: spätere Regeln können frühere
   Regeln überschreiben. !important wird hier teilweise bewusst
   verwendet, weil SP Page Builder eigene Styles mitbringt.

   ========================================================== */


/* ==========================================================
   1. HERO
   ========================================================== */

.pfv-hero {
    position: relative;
}


/* Gesamten Inhalt im Hero weiter nach unten setzen */
.pfv-hero .sppb-row-container {
    transform: translateY(90px);
}


/* ----------------------------------------------------------
   Hero – Textabstände
   ---------------------------------------------------------- */

/* Falls pfv-title noch verwendet wird */
.pfv-title h1 {
    margin-bottom: 0 !important;
}

.pfv-title {
    margin-bottom: 0 !important;
}


/* Abstand vor "Füreinander da." */
.pfv-subtitle {
    margin-top: 25px !important;
}


/* ==========================================================
   2. HERO – BUTTONS
   ========================================================== */

/*
   SP Page Builder erzeugt um jedes Button-Addon einen eigenen
   Wrapper. Deshalb müssen DIE WRAPPER nebeneinander stehen.
*/

.pfv-hero .sppb-addon-wrapper:has(.pfv-btn-secondary),
.pfv-hero .sppb-addon-wrapper:has(.pfv-btn-primary) {
    display: inline-block !important;
    width: auto !important;
    vertical-align: middle !important;
}


/* Abstand zwischen den beiden Buttons */
.pfv-hero .sppb-addon-wrapper:has(.pfv-btn-secondary) {
    margin-right: 9px !important;
}

.pfv-hero .sppb-addon-wrapper:has(.pfv-btn-primary) {
    margin-left: 9px !important;
}


/* Gemeinsamen Bereich zentrieren */
.pfv-hero .sppb-row-column {
    text-align: center !important;
}


/* ----------------------------------------------------------
   Button-Grundformat
   ---------------------------------------------------------- */

.pfv-btn-secondary,
.pfv-btn-primary {
    padding: 11px 22px !important;
    font-weight: 600 !important;
    border-radius: 4px !important;
    line-height: 1.5 !important;
    transition: all 0.2s ease !important;
}


/* ----------------------------------------------------------
   Mehr über uns
   ---------------------------------------------------------- */

.pfv-btn-secondary {
    background: transparent !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
}

.pfv-btn-secondary:hover {
    background: #ffffff !important;
    color: #0b345f !important;
}


/* ----------------------------------------------------------
   PFV unterstützen
   ---------------------------------------------------------- */

.pfv-btn-primary {
    background: #2994d1 !important;
    color: #ffffff !important;
    border: 2px solid #2994d1 !important;
}

.pfv-btn-primary:hover {
    background: #ffffff !important;
    color: #0b345f !important;
    border-color: #ffffff !important;
}


/* ==========================================================
   3. HERO – SCHRIFTZUG
   Kollegialität | Menschlichkeit | Zusammenhalt
   ========================================================== */

/*
   NICHT absolute positionieren.
   Der Schriftzug bleibt im normalen Seitenfluss.
*/

.pfv-claim {
    position: relative !important;
    margin-top: 140px !important;
    width: 100% !important;
    text-align: center !important;
}

.pfv-claim img {
    display: block !important;
    height: 140px !important;
    width: auto !important;
    max-width: 90% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}


/* ==========================================================
   4. "WAS WIR TUN" – BOXEN
   ========================================================== */

/*
   pfv-box sitzt auf der jeweiligen weißen 6er-Spalte.
   Der Inhalt dieser Spalte wird horizontal angeordnet:
   ICON | TEXT
*/

.pfv-box > .sppb-column-addons {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

    align-items: center !important;

    gap: 15px !important;

    height: 100% !important;

    padding-left: 20px !important;
    padding-right: 20px !important;

    box-sizing: border-box !important;

    text-align: left !important;
}


/* ==========================================================
   5. BOXEN – ICONS
   ========================================================== */

.pfv-box .pfv-box-icon {
    display: block !important;

    flex: 0 0 65px !important;

    width: 65px !important;
    min-width: 65px !important;
    max-width: 65px !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* Das eigentliche Bild */
.pfv-box .pfv-box-icon img {
    display: block !important;

    width: 65px !important;
    min-width: 65px !important;
    max-width: 65px !important;

    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* ==========================================================
   6. BOXEN – TEXT
   ========================================================== */

.pfv-box .sppb-addon-text-block {
    flex: 1 1 auto !important;

    width: auto !important;
    min-width: 0 !important;

    margin: 0 !important;

    text-align: left !important;
}


/* Überschrift */
.pfv-box h3,
.pfv-box h4 {
    margin-top: 0 !important;
    margin-bottom: 8px !important;

    color: #0b345f !important;
}


/* Fließtext */
.pfv-box p {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


/* ==========================================================
   7. MOBILE
   ========================================================== */

@media (max-width: 576px) {

    /* Hero-Inhalt am Handy weniger weit verschieben */
    .pfv-hero .sppb-row-container {
        transform: translateY(30px);
    }


    /* Buttons untereinander */
    .pfv-hero .sppb-addon-wrapper:has(.pfv-btn-secondary),
    .pfv-hero .sppb-addon-wrapper:has(.pfv-btn-primary) {
        display: block !important;

        width: fit-content !important;

        margin: 10px auto !important;
    }


    /* Claim kleiner */
    .pfv-claim {
        margin-top: 40px !important;
    }

    .pfv-claim img {
        height: 80px !important;
        max-width: 90vw !important;
    }


    /* Infoboxen */
    .pfv-box > .sppb-column-addons {
        gap: 18px !important;

        padding-left: 25px !important;
        padding-right: 25px !important;
    }


    /* Icons etwas kleiner */
    .pfv-box .pfv-box-icon {
        flex-basis: 55px !important;

        width: 55px !important;
        min-width: 55px !important;
        max-width: 55px !important;
    }

    .pfv-box .pfv-box-icon img {
        width: 55px !important;
        min-width: 55px !important;
        max-width: 55px !important;
    }
}

/* ==========================================================
   FÜR EIN STARKES MITEINANDER
   ========================================================== */

.pfv-together {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 20px !important;

    margin-top: 45px !important;

    color: #2994d1 !important;
    font-weight: 600 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
}

/* Linie links und rechts */
.pfv-together::before,
.pfv-together::after {
    content: "";
    display: block;
    width: 90px;
    height: 2px;
    background: #2994d1;
}

/* ========================================
   ÜBER UNS
   ======================================== */

.pfv-about {
    padding-top: 70px;
    padding-bottom: 70px;
}

/* Ganze Row gleich hoch */
.pfv-about .sppb-row {
    display: flex;
    align-items: stretch;
    min-height: 400px;
}

/* Bildspalte */
.pfv-about-image {
    position: relative;
    overflow: hidden;
    min-height: 400px;
}

/* Alle Wrapper des Bildes auf volle Höhe */
.pfv-about-image .sppb-addon-wrapper,
.pfv-about-image .sppb-addon,
.pfv-about-image .sppb-addon-content {
    height: 100%;
}

/* Bild selbst */
/* ÜBER UNS – FOTO */

.pfv-about-photo {
    height: 400px !important;
    overflow: hidden;
}

.pfv-about-photo .sppb-addon-content {
    height: 400px !important;
}

.pfv-about-photo img {
    width: 100% !important;
    height: 400px !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block;
}

/* Schräge Kante beim Über-uns-Bild */
.pfv-about-photo {
    clip-path: polygon(
        0 0,
        90% 0,
        100% 100%,
        0 100%
    );
}

/* ÜBER UNS – Inhalt vertikal zentrieren */
.pfv-about .sppb-row-container > .sppb-row {
    align-items: center !important;
}

/* gleichmäßiger Abstand oben und unten */
.pfv-about {
    padding-top: 70px !important;
    padding-bottom: 70px !important;
}

/* =====================================================
   PFV UNTERSTÜTZEN
   ===================================================== */

.pfv-support {
    background: #06345a;
    color: #ffffff;
    overflow: hidden;
}

/* beide Spalten gleiche Höhe */
.pfv-support .sppb-row {
    align-items: stretch;
}


/* ----- LINKE SEITE ----- */

.pfv-support-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 70px 55px 70px 70px !important;
    position: relative;
    z-index: 3;
}

.pfv-support-headline {
    color: #ffffff;
}

.pfv-eyebrow {
    color: #2994d1;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.pfv-support-headline h2 {
    color: #ffffff;
    font-size: 44px;
    line-height: 1.12;
    font-weight: 800;
    margin: 0;
}

.pfv-support-headline h2 span {
    color: #2994d1;
}

.pfv-support-line {
    width: 55px;
    height: 4px;
    background: #2994d1;
    margin: 24px 0;
}

.pfv-support-headline p {
    color: #ffffff;
    font-size: 18px;
    line-height: 1.55;
    max-width: 620px;
    margin-bottom: 28px;
}


/* ----- BUTTONS ----- */

.pfv-support-btn-primary,
.pfv-support-btn-secondary {
    display: inline-block !important;
    width: auto !important;
    margin-right: 18px !important;
}

.pfv-support-btn-primary .sppb-btn,
.pfv-support-btn-secondary .sppb-btn {
    padding: 13px 25px !important;
    font-size: 16px;
    font-weight: 600;
    border-radius: 4px;
}

.pfv-support-btn-primary .sppb-btn {
    background: #2994d1 !important;
    border: 2px solid #2994d1 !important;
    color: #ffffff !important;
}

.pfv-support-btn-secondary .sppb-btn {
    background: transparent !important;
    border: 2px solid #2994d1 !important;
    color: #ffffff !important;
}


/* ----- FOTO ----- */

.pfv-support-image {
    position: relative;
    overflow: hidden;
    min-height: 520px;
}

.pfv-support-photo,
.pfv-support-photo > div {
    height: 100%;
}

.pfv-support-photo img {
    width: 100% !important;
    height: 100% !important;
    min-height: 520px;
    object-fit: cover;
    object-position: center;
    display: block;
}


/* Übergang vom Foto ins PFV-Blau */

.pfv-support-image::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;

    background:
        linear-gradient(
            to right,
            #06345a 0%,
            rgba(6,52,90,0.92) 5%,
            rgba(6,52,90,0.55) 15%,
            rgba(6,52,90,0.15) 28%,
            rgba(6,52,90,0) 42%
        ),
        linear-gradient(
            to bottom,
            rgba(6,52,90,0) 60%,
            rgba(6,52,90,0.35) 82%,
            #06345a 100%
        );
}


/* ----- HANDY ----- */

@media (max-width: 767px) {

    .pfv-support-content {
        padding: 50px 25px !important;
    }

    .pfv-support-headline h2 {
        font-size: 34px;
    }

    .pfv-support-image {
        min-height: 350px;
    }

    .pfv-support-photo img {
        min-height: 350px;
    }
}

/* =====================================================
   SUPPORT – BUTTON-LAYOUT
   Die Wrapper werden gezielt auf Auto-Breite gesetzt.
   ===================================================== */

.pfv-support-content .sppb-column-addons {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
}

/* Alle normalen Inhalte bleiben volle Breite */
.pfv-support-content .sppb-column-addons > .sppb-addon-wrapper {
    flex: 0 0 100%;
    width: 100%;
}

/* Nur die beiden Button-Wrapper dürfen nebeneinander */
.pfv-support-content .sppb-column-addons > .sppb-addon-wrapper:has(.pfv-support-btn-primary),
.pfv-support-content .sppb-column-addons > .sppb-addon-wrapper:has(.pfv-support-btn-secondary) {
    flex: 0 0 auto !important;
    width: auto !important;
}

/* Abstand zwischen den Buttons */
.pfv-support-content .sppb-column-addons > .sppb-addon-wrapper:has(.pfv-support-btn-primary) {
    margin-right: 16px !important;
}

/* eventuell vorhandene alte Margins entfernen */
.pfv-support-btn-primary,
.pfv-support-btn-secondary {
    margin: 0 !important;
    width: auto !important;
}

/* Handy */
@media (max-width: 576px) {

    .pfv-support-content .sppb-column-addons > .sppb-addon-wrapper:has(.pfv-support-btn-primary),
    .pfv-support-content .sppb-column-addons > .sppb-addon-wrapper:has(.pfv-support-btn-secondary) {
        flex: 0 0 100% !important;
        width: 100% !important;
        margin-right: 0 !important;
        margin-bottom: 12px !important;
    }
}
/* Desktop: Support-Buttons sicher nebeneinander halten */
.pfv-support-content .sppb-column-addons > .sppb-addon-wrapper:has(.pfv-support-btn-primary),
.pfv-support-content .sppb-column-addons > .sppb-addon-wrapper:has(.pfv-support-btn-secondary) {
    flex: 0 0 auto !important;
    width: auto !important;
}

/* verhindert Umbruch innerhalb der Buttons */
.pfv-support-btn-primary .sppb-btn,
.pfv-support-btn-secondary .sppb-btn {
    white-space: nowrap !important;
}

/* etwas weniger Abstand, damit beide sicher Platz haben */
.pfv-support-content .sppb-column-addons > .sppb-addon-wrapper:has(.pfv-support-btn-primary) {
    margin-right: 10px !important;
}

/* Buttons etwas kompakter */
.pfv-support-btn-primary .sppb-btn,
.pfv-support-btn-secondary .sppb-btn {
    padding-left: 18px !important;
    padding-right: 18px !important;
}

/* =====================================================
   SUPPORT – 3 PUNKTE LINKS
   ===================================================== */

.pfv-support-benefits-section {
    background: #06345a !important;
}

/* Inhalt der 4er-Spalte:
   Icon | Text
   Icon | Text
   Icon | Text
*/
.pfv-support-benefits-list .sppb-column-addons {
    display: grid !important;
    grid-template-columns: 55px 1fr;
    column-gap: 18px;
    row-gap: 24px;
    align-items: center;
}

/* Wrapper dürfen das Grid nicht stören */
.pfv-support-benefits-list .sppb-addon-wrapper {
    margin: 0 !important;
}

/* Icons */
.pfv-benefit-icon {
    width: 55px;
    text-align: center;
}

/* Text */
.pfv-benefit-text {
    margin: 0 !important;
}

/* Überschriften */
.pfv-benefit-text h3 {
    margin: 0 0 4px 0 !important;
    color: #ffffff !important;
}

/* Beschreibung */
.pfv-benefit-text p {
    margin: 0 !important;
    color: rgba(255,255,255,0.85) !important;
    line-height: 1.4;
}

.pfv-support-benefits-section {
    margin-top: -100px !important;
    position: relative;
    z-index: 5;
}

/* =====================================================
   MITGLIED WERDEN – BILD MIT VERLAUF
   ===================================================== */

.pfv-member-image {
    position: relative !important;
    width: 125% !important;
    max-width: none !important;
    overflow: hidden !important;
}

/* SP Page Builder Wrapper */
.pfv-member-image .sppb-addon-content {
    position: relative !important;
    overflow: hidden !important;
}

/* Bild */
.pfv-member-image img {
    width: 100% !important;
    height: 430px !important;
    object-fit: cover !important;
    display: block !important;
}

/* Verlauf DIREKT auf dem Bild-Wrapper */
.pfv-member-image .sppb-addon-content::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 10 !important;
    pointer-events: none !important;

    background:
        /* unten in Hintergrund ausblenden */
        linear-gradient(
            to bottom,
            transparent 55%,
            rgba(245,247,249,0.10) 65%,
            rgba(245,247,249,0.45) 78%,
            rgba(245,247,249,0.85) 92%,
            #f5f7f9 100%
        ),

        /* links in Hintergrund ausblenden */
        linear-gradient(
            to right,
            #f5f7f9 0%,
            rgba(245,247,249,0.95) 5%,
            rgba(245,247,249,0.70) 13%,
            rgba(245,247,249,0.35) 23%,
            rgba(245,247,249,0) 38%
        ) !important;
}
/* =====================================================
   MITGLIED WERDEN – 3 PUNKTE NACH OBEN
   ohne Bildverlauf zu überdecken
   ===================================================== */

.pfv-member-points {
    margin-top: 0 !important;
    padding-top: 0 !important;
    background: #f5f7f9 !important;
}

/* Nur den INHALT nach oben ziehen */
.pfv-member-points .sppb-row-container {
    position: relative !important;
    transform: translateY(-150px);
    z-index: 10;
}

/* Platz, der durch das Verschieben entsteht, reduzieren */
.pfv-member-points {
    margin-bottom: -90px !important;
}

/* SPENDEN / SPONSORING – Innenabstand der Boxen */

/* ==========================================
   SPENDEN / SPONSORING – HINTERGRUNDBILD
   ========================================== */

.pfv-donate {
    position: relative !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

/* Dunkelblauer Schleier über dem Foto */
.pfv-donate::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(6, 52, 90, 0.72) 0%,
            rgba(6, 52, 90, 0.86) 45%,
            rgba(6, 52, 90, 0.96) 100%
        );
    z-index: 0;
    pointer-events: none;
}

/* =========================================================
   PFV – SPK MAIFEST
   ========================================================= */


/* ---------------------------------------------------------
   GESAMTE SECTION
   Gleicher Hintergrund wie "Was wir tun"
   --------------------------------------------------------- */

.pfv-maifest {
    background: #f5f7f9 !important;
    padding: 30px 0 35px 0 !important;
}


/* ---------------------------------------------------------
   HELLBLAUER KASTEN UM ALLE 4 SPALTEN
   --------------------------------------------------------- */

.pfv-maifest .sppb-row {
    background: #e6f3fb !important;
    border-radius: 14px !important;

    max-width: 1200px !important;
    margin: 0 auto !important;

    padding: 25px 30px !important;

    align-items: center !important;
}


/* ---------------------------------------------------------
   SPALTEN VERTIKAL ZENTRIEREN
   --------------------------------------------------------- */

.pfv-maifest .sppb-column,
.pfv-maifest .sppb-column-addons {
    height: 100%;
}

.pfv-maifest .sppb-column-addons {
    display: flex;
    flex-direction: column;
    justify-content: center;
}


/* ---------------------------------------------------------
   KALENDER-ICON
   --------------------------------------------------------- */

.pfv-maifest .sppb-icon {
    color: #0b3b68 !important;
    font-size: 36px !important;
}


/* ---------------------------------------------------------
   TEXT
   --------------------------------------------------------- */

.pfv-maifest p {
    margin-bottom: 0;
}


/* ---------------------------------------------------------
   BUTTON
   --------------------------------------------------------- */

.pfv-maifest .sppb-btn {
    background: #299ad1 !important;
    border: 2px solid #299ad1 !important;
    color: #ffffff !important;

    border-radius: 5px !important;

    padding: 12px 25px !important;

    font-weight: 600 !important;

    transition: all 0.2s ease;
}


/* Button Hover */

.pfv-maifest .sppb-btn:hover {
    background: #0b3b68 !important;
    border-color: #0b3b68 !important;
    color: #ffffff !important;
}


/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width: 991px) {

    .pfv-maifest {
        padding: 25px 20px !important;
    }

    .pfv-maifest .sppb-row {
        padding: 25px !important;
    }

}


/* ---------------------------------------------------------
   HANDY
   --------------------------------------------------------- */

@media (max-width: 767px) {

    .pfv-maifest {
        padding: 20px 15px !important;
    }

    .pfv-maifest .sppb-row {
        padding: 25px 20px !important;
        border-radius: 10px !important;
    }

    .pfv-maifest .sppb-column {
        margin-bottom: 20px;
    }

    .pfv-maifest .sppb-column:last-child {
        margin-bottom: 0;
    }

}

/* =====================================================
   SPENDEN / SPONSORING – SECTION HÖHE KORRIGIEREN
   ===================================================== */

.pfv-donate {
    min-height: 0 !important;
    height: auto !important;
    padding-top: 60px !important;
    padding-bottom: 60px !important;

    background-attachment: scroll !important;
}

/* SP Page Builder Container ebenfalls nicht strecken */
.pfv-donate > .sppb-row-container {
    min-height: 0 !important;
    height: auto !important;
}

/* Row nicht auf Bildschirmhöhe strecken */
.pfv-donate .sppb-row {
    min-height: 0 !important;
    height: auto !important;
}

/* Inhalt wieder über das Overlay legen */
.pfv-donate .sppb-row-container {
    position: relative;
    z-index: 2;
}
.pfv-donate-card {
    padding: 30px 32px !important;
    box-sizing: border-box !important;
}

/* =====================================================
   VISFORMS – CAPTCHA
   Captcha auf Desktop kompakter nebeneinander darstellen
   ===================================================== */
@media (min-width: 768px) {

    /* Container, in dem Captcha-Bild, Refresh und Eingabe liegen */
    #captchacode1 {
        display: inline-block !important;
        width: auto !important;
        margin: 0 10px 0 0 !important;
        vertical-align: middle !important;
    }

    /* Refresh-Symbol */
    #captchacode1 + img {
        display: inline-block !important;
        width: auto !important;
        margin: 0 10px 0 0 !important;
        vertical-align: middle !important;
    }

    /* Eingabefeld unmittelbar danach */
    #captchacode1 ~ span {
        display: inline-block !important;
        width: 160px !important;
        vertical-align: middle !important;
    }

    #captchacode1 ~ span input {
        width: 160px !important;
        margin: 0 !important;
    }
}