/*
 * FV Faurndau -- eigenstaendiges Design (Rot/Weiss).
 *
 * Bewusst NICHT die "dunkle Stadion-Nacht"-Optik der bestehenden
 * Vereinsthemes (sc-uhingen, scu-20): heller Grund, viel Weissraum, Rot
 * nur als Akzent/Flaeche -- dazu grafische Formen (Trikot-Streifen,
 * Diagonalschnitte) statt Fotomotiven, weil fuer diesen Entwurf keine
 * echten Vereinsfotos vorliegen. Jede Bewegung animiert ausschliesslich
 * transform/opacity (GPU, kein Layout-Reflow) und respektiert
 * prefers-reduced-motion (siehe Abschnitt 12).
 *
 * Farben/Formen kommen primaer aus den globalen CSS-Variablen
 * (--color-primary usw., von layout.php bzw. Design > Feinschliff gesetzt)
 * -- eigene Variablen hier ergaenzen nur, was die Plattform nicht
 * mitbringt (zweiter Rotton, Bewegungs-Kurven, Trikot-Streifen).
 */

:root {
    --fvf-red: var(--color-primary, #C8102E);
    --fvf-red-deep: #8f0b1f;
    --fvf-red-tint: #fdeef0;
    --fvf-ink: var(--color-text, #181512);
    --fvf-paper: #ffffff;
    /* Der Dreh-Captcha (App\Core\RotateCaptcha) bringt ein mintgruenes
       Standard-Rot mit, das neben den sonst nur-roten Formularen fremd
       wirkte (Nutzer-Feedback: "unkonstant"). Eigene Tonne statt dessen. */
    --wl-captcha-bg: var(--fvf-red-tint);

    /* Bewusst staerkere Kurven als die CSS-Standardwerte -- siehe
       easing.dev: ease-out mit deutlichem "Schwung" wirkt reaktionsschneller
       als das eingebaute ease-out, ease-in-out bleibt fuer Bewegungen, die
       auf dem Bildschirm bleiben (keine Ein-/Austritte). */
    --fvf-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --fvf-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
    --fvf-fast: 140ms;
    --fvf-base: 220ms;
    --fvf-slow: 420ms;
}

/* ── 1) Grundgeruest ──────────────────────────────────────────────────── */

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--fvf-paper);
}

h1, h2, h3 { letter-spacing: -0.01em; }

/* Durchgaengiges Motiv: Zwischenueberschriften stehen in GROSSBUCHSTABEN
   mit Laufweite -- staemmig, plakativ, wie eine Mannschaftsaufstellung,
   nicht zierlich. */
.widget-heading__title,
.widget-news__title,
.widget-team-cards__title,
.cover-cards__title,
.widget-timeline__title,
.widget-contact-form__title,
.process-steps__title,
.widget-sponsors__title {
    text-transform: uppercase;
    letter-spacing: 0.01em;
    font-weight: 800;
}

.widget-heading__eyebrow,
.news__eyebrow,
.tl__eyebrow,
.process-steps__eyebrow,
.contact-form__eyebrow,
.logo-slider__eyebrow {
    color: var(--fvf-red);
    opacity: 1;
    font-weight: 800;
}

.widget-heading__highlight {
    font-style: normal;
    background: linear-gradient(100deg, var(--fvf-red), var(--fvf-red-deep));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

a { text-decoration-thickness: 1.5px; }

/* ── 2) Scroll-Einblenden: eigene Kurve statt der globalen 0.7s ease ───── */

html.wl-animate .widget {
    transition: opacity var(--fvf-slow) var(--fvf-ease-out), transform var(--fvf-slow) var(--fvf-ease-out);
}

/* Karten/Kacheln innerhalb eines Abschnitts blenden leicht gestaffelt ein,
   SOBALD der ganze Abschnitt sichtbar wird (.wl-in-view sitzt am .widget,
   nicht an der einzelnen Karte) -- kein zusaetzlicher Beobachter noetig,
   nur eine je Kindposition verzoegerte Transition. Kurze Stufen (40ms),
   sonst wirkt eine Reihe von 8 Karten trotz jeweils kurzer Animation
   insgesamt zaeh. */
html.wl-animate .widget-team-cards__grid > .team-card,
html.wl-animate .cover-cards > *,
html.wl-animate .news-list > .news-card,
html.wl-animate .news-posts > .news-post,
html.wl-animate .sponsors-tier__logos > * {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity var(--fvf-base) var(--fvf-ease-out), transform var(--fvf-base) var(--fvf-ease-out);
}

html.wl-animate .widget.wl-in-view .widget-team-cards__grid > .team-card,
html.wl-animate .widget.wl-in-view .cover-cards > *,
html.wl-animate .widget.wl-in-view .news-list > .news-card,
html.wl-animate .widget.wl-in-view .news-posts > .news-post,
html.wl-animate .widget.wl-in-view .sponsors-tier__logos > * {
    opacity: 1;
    transform: none;
}

/* nth-child-Staffelung, auf 10 Positionen begrenzt -- danach kommen alle
   weiteren gemeinsam, ein Warten von mehr als ~0.5s faellt sonst auf. */
html.wl-animate .widget.wl-in-view .widget-team-cards__grid > .team-card:nth-child(1),
html.wl-animate .widget.wl-in-view .cover-cards > *:nth-child(1),
html.wl-animate .widget.wl-in-view .news-list > .news-card:nth-child(1),
html.wl-animate .widget.wl-in-view .sponsors-tier__logos > *:nth-child(1) { transition-delay: 0ms; }
html.wl-animate .widget.wl-in-view .widget-team-cards__grid > .team-card:nth-child(2),
html.wl-animate .widget.wl-in-view .cover-cards > *:nth-child(2),
html.wl-animate .widget.wl-in-view .news-list > .news-card:nth-child(2),
html.wl-animate .widget.wl-in-view .sponsors-tier__logos > *:nth-child(2) { transition-delay: 40ms; }
html.wl-animate .widget.wl-in-view .widget-team-cards__grid > .team-card:nth-child(3),
html.wl-animate .widget.wl-in-view .cover-cards > *:nth-child(3),
html.wl-animate .widget.wl-in-view .news-list > .news-card:nth-child(3),
html.wl-animate .widget.wl-in-view .sponsors-tier__logos > *:nth-child(3) { transition-delay: 80ms; }
html.wl-animate .widget.wl-in-view .widget-team-cards__grid > .team-card:nth-child(4),
html.wl-animate .widget.wl-in-view .cover-cards > *:nth-child(4),
html.wl-animate .widget.wl-in-view .news-list > .news-card:nth-child(4),
html.wl-animate .widget.wl-in-view .sponsors-tier__logos > *:nth-child(4) { transition-delay: 120ms; }
html.wl-animate .widget.wl-in-view .widget-team-cards__grid > .team-card:nth-child(5),
html.wl-animate .widget.wl-in-view .cover-cards > *:nth-child(5),
html.wl-animate .widget.wl-in-view .sponsors-tier__logos > *:nth-child(5) { transition-delay: 160ms; }
html.wl-animate .widget.wl-in-view .widget-team-cards__grid > .team-card:nth-child(6),
html.wl-animate .widget.wl-in-view .cover-cards > *:nth-child(6),
html.wl-animate .widget.wl-in-view .sponsors-tier__logos > *:nth-child(6) { transition-delay: 200ms; }
html.wl-animate .widget.wl-in-view .widget-team-cards__grid > .team-card:nth-child(n+7),
html.wl-animate .widget.wl-in-view .cover-cards > *:nth-child(n+7),
html.wl-animate .widget.wl-in-view .sponsors-tier__logos > *:nth-child(n+7) { transition-delay: 240ms; }

/* ── 3) Kopfzeile ─────────────────────────────────────────────────────── */

/*
 * Nutzerwunsch (21.10.2026): "Menü oben ist zu einfach, das hat jede
 * Seite so" -- deshalb bewusst kein Standard-Textmenue-Look. Eigenstaendiges
 * Konzept: jeder Menuepunkt traegt eine Spielplan-Nummer (wie auf einem
 * Mannschaftsbogen, per CSS-Counter -- funktioniert automatisch fuer jede
 * Seitenzahl, kein fester Wert), die aktive/gehoverte Seite bekommt einen
 * ausgefuellten Nummern-Chip statt nur einer Unterstreichung. "Kontakt"
 * ist ein reines Symbol (kein Textknopf), Instagram steht als zweites
 * Symbol direkt daneben (beides per --fvf-icon-* Masken bzw. echtem SVG).
 */
:root {
    --fvf-icon-message: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1H9l-5 4v-4H4a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}

.site-nav {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(24, 21, 18, 0.08);
    box-shadow: none;
    transition: box-shadow var(--fvf-base) var(--fvf-ease-out);
}

.site-nav--top .site-nav__inner {
    padding-top: 1.1rem;
    padding-bottom: 1.1rem;
    transition: padding var(--fvf-base) var(--fvf-ease-out);
}

/* Kompakter Zustand ab ~36px Scrolltiefe (siehe js/motion.js) -- reine
   Padding-Reduktion, kein Hoehensprung, der Inhalt darunter verschiebt. */
.site-nav--compact {
    box-shadow: 0 1px 0 rgba(24, 21, 18, 0.06), 0 12px 28px -18px rgba(24, 21, 18, 0.25);
}

.site-nav--compact .site-nav__inner {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}

.site-nav__brand {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    gap: 0.6rem;
}

.site-nav__logo-text {
    position: relative;
}

/* Kleiner roter Akzentstrich hinter dem Markennamen -- einmalig, kein
   wiederkehrendes Dekor, deshalb reicht ein Pseudo-Element ohne eigene
   Animation. */
.site-nav__logo-text::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.35rem;
    height: 3px;
    background: var(--fvf-red);
    border-radius: 2px;
}

.site-nav__links {
    gap: 0.15rem;
    /* Jeder Menuepunkt bekommt automatisch eine laufende Nummer, egal wie
       viele Seiten es sind -- "01 Startseite", "02 Verein" usw., wie auf
       einem Mannschaftsbogen. Unterseiten (Dropdown) zaehlen bewusst nicht
       mit: sie liegen nicht als eigenes .site-nav__item in dieser Liste. */
    counter-reset: fvfnav;
}

.site-nav__item { counter-increment: fvfnav; }

.site-nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    padding: 0.5rem 0.7rem;
    border-radius: 999px;
    color: var(--fvf-ink);
    text-decoration: none;
    transition: color var(--fvf-base) var(--fvf-ease-out), transform var(--fvf-fast) var(--fvf-ease-out);
}

.site-nav__link::before {
    content: counter(fvfnav, decimal-leading-zero);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    font-size: 0.65rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--fvf-red);
    background: var(--fvf-red-tint);
    transition: background var(--fvf-base) var(--fvf-ease-out), color var(--fvf-base) var(--fvf-ease-out), transform var(--fvf-base) var(--fvf-ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .site-nav__link:hover { transform: translateY(-1px); }
    .site-nav__link:hover::before { background: var(--fvf-red); color: #fff; transform: scale(1.08) rotate(-8deg); }
}

.site-nav__link--active { color: var(--fvf-red); }
.site-nav__link--active::before { background: var(--fvf-red); color: #fff; }

.site-nav__item--has-children .site-nav__dropdown {
    border-radius: 0.9rem;
    border: 1px solid rgba(24, 21, 18, 0.08);
    box-shadow: 0 20px 45px -15px rgba(24, 21, 18, 0.25);
    /* Popovers wachsen aus ihrem Ausloeser, nicht aus der Mitte -- hier
       gegeben durch den Anker am Elternelement, oben links. */
    transform-origin: top left;
}

/* Nutzerwunsch (21.10.2026): Unterseiten im Dropdown bekommen ebenfalls
   eine Trikot-Nummer, aber immer "Elternnummer + 10 Schritte" statt einer
   eigenen fortlaufenden Zaehlung -- Beispiel Verein=02: erste Unterseite
   12, zweite 22, dritte 32. Reiner CSS-Counter kann die Elternzahl nicht
   selbst auslesen (counter-reset nimmt keinen anderen Counter als Wert),
   deshalb hier einmal je Menueposition hart hinterlegt (5 Hauptpunkte,
   siehe nav.php/Page::menuTree()) -- bei einer sechsten Hauptseite diese
   Liste einfach um einen weiteren :nth-child-Block ergaenzen. */
.site-nav__item:nth-child(1) .site-nav__dropdown { counter-reset: dropdownnav 1; }
.site-nav__item:nth-child(2) .site-nav__dropdown { counter-reset: dropdownnav 2; }
.site-nav__item:nth-child(3) .site-nav__dropdown { counter-reset: dropdownnav 3; }
.site-nav__item:nth-child(4) .site-nav__dropdown { counter-reset: dropdownnav 4; }
.site-nav__item:nth-child(5) .site-nav__dropdown { counter-reset: dropdownnav 5; }

.site-nav__dropdown .site-nav__link {
    counter-increment: dropdownnav 10;
}

.site-nav__dropdown .site-nav__link::before {
    content: counter(dropdownnav, decimal-leading-zero);
}

/* "Kontakt" als reines Symbol (Nutzerwunsch: "Kontakt soll ein Symbol
   sein"), kein Textknopf -- der Linktext bleibt fuer Screenreader
   erhalten, wird aber visuell versteckt. Icon per CSS-Maske, damit kein
   zusaetzliches SVG-Markup noetig ist. */
.site-nav__cta {
    position: relative;
    width: 2.9rem;
    height: 2.9rem;
    padding: 0;
    /* Basis-CSS setzt nur "display:inline-flex; align-items:center" --
       ohne justify-content blieb das Icon links haengen statt mittig zu
       stehen (Nutzer-Feedback: "da soll ein Kontaktsymbol rein mittig"). */
    justify-content: center;
    gap: 0;
    background: var(--fvf-red);
    border-radius: 50%;
    box-shadow: 0 6px 16px -6px rgba(200, 16, 46, 0.55);
    transition: transform var(--fvf-fast) var(--fvf-ease-out), filter var(--fvf-fast) var(--fvf-ease-out), box-shadow var(--fvf-base) var(--fvf-ease-out);
}

/* Ruhiger Puls hinter dem Knopf -- Nutzer-Feedback zur Symbol-Gruppe
   ("oben rechts schlecht") war vor allem: wirkt zu beliebig/leblos neben
   dem sonst selbstbewussten Design. Ein sehr sanfter, seltener Ping
   (kein Dauer-Blinken) gibt dem wichtigsten Knopf der Kopfzeile Praesenz. */
.site-nav__cta::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid var(--fvf-red);
    animation: fvf-cta-ping 3.2s var(--fvf-ease-out) infinite;
}

@keyframes fvf-cta-ping {
    0% { transform: scale(1); opacity: 0.6; }
    70%, 100% { transform: scale(1.5); opacity: 0; }
}

.site-nav__cta span:not(.site-nav__cta-icon) {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.site-nav__cta::before {
    content: "";
    width: 1.25rem;
    height: 1.25rem;
    background-color: #fff;
    -webkit-mask: var(--fvf-icon-message) center / contain no-repeat;
    mask: var(--fvf-icon-message) center / contain no-repeat;
    /* Nutzerwunsch: "das soll blinken" -- ein ruhiges Ein-/Ausblenden
       statt eines nervoesen Hart-Blinkens, damit es nicht wie ein Fehler
       wirkt. */
    animation: fvf-cta-blink 2.2s ease-in-out infinite;
}

@keyframes fvf-cta-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

@media (hover: hover) and (pointer: fine) {
    .site-nav__cta:hover { filter: brightness(1.08); transform: scale(1.06); }
}

.site-nav__cta:active { transform: scale(0.94); }

/* Instagram (oder weitere Social-Links) direkt neben "Kontakt" -- gleiche
   Groesse/Form, damit beide als EIN zusammengehoeriges Symbol-Paar wirken. */
.site-nav__social { margin-left: 0.4rem; gap: 0.5rem; }

.site-nav__social-link {
    width: 2.9rem;
    height: 2.9rem;
    background: transparent;
    border: 1.5px solid rgba(24, 21, 18, 0.16);
    color: var(--fvf-ink);
    opacity: 1;
    transition: background var(--fvf-base) var(--fvf-ease-out), border-color var(--fvf-base) var(--fvf-ease-out), color var(--fvf-base) var(--fvf-ease-out), transform var(--fvf-fast) var(--fvf-ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .site-nav__social-link:hover { background: var(--fvf-red); border-color: var(--fvf-red); color: #fff; transform: scale(1.06); }
}

.site-nav__social-link:active { transform: scale(0.94); }

/* Kopfzeile am Handy bleibt kompakt -- Instagram bleibt dort erreichbar
   (Fusszeile), "Kontakt" wandert wie gehabt in die feste Leiste unten. */
@media (max-width: 800px) {
    .site-nav__social { display: none; }
}

.site-nav__toggle {
    transition: transform var(--fvf-fast) var(--fvf-ease-out);
}

.site-nav__toggle:active { transform: scale(0.92); }

/* Markenzeichen: das Wappen bekommt beim Ueberfahren einen kleinen,
   spielerischen Dreh -- unverwechselbar statt eines stillstehenden Logos. */
.site-nav__logo {
    transition: transform var(--fvf-base) var(--fvf-ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .site-nav__brand:hover .site-nav__logo { transform: scale(1.08) rotate(-6deg); }
}

.site-topbar {
    background: var(--fvf-ink);
    color: #fff;
}

.site-topbar__item { color: #fff; opacity: 0.85; }
.site-topbar__item:hover { opacity: 1; }

.site-cta-bar .site-nav__cta { border-radius: 0; }

/* ── 4) Hero -------------------------------------------------------------
   Grafischer, nicht fotografischer Hero (keine echten Vereinsfotos
   vorhanden): ein kraeftiges Rot-Feld mit einem hellen Diagonalschnitt
   unten, dazu ein sehr dezentes "Trikot"-Streifenmuster. Die Ueberschrift
   blendet wortweise ein (js/motion.js zerlegt den Text einmalig). ───────── */

.widget-hero {
    position: relative;
    min-height: min(78vh, 640px);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    background:
        repeating-linear-gradient(
            115deg,
            rgba(255, 255, 255, 0.07) 0px,
            rgba(255, 255, 255, 0.07) 26px,
            transparent 26px,
            transparent 68px
        ),
        linear-gradient(145deg, var(--fvf-red) 0%, var(--fvf-red-deep) 100%);
    isolation: isolate;
}

/* Heller Diagonalschnitt am unteren Rand -- trennt den Hero klar von der
   folgenden weissen Seite, ohne eine harte, gerade Kante. */
.widget-hero::after {
    content: "";
    position: absolute;
    left: -5%;
    right: -5%;
    bottom: -1px;
    height: 7vw;
    max-height: 90px;
    background: var(--fvf-paper);
    clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 100%);
}

.widget-hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.widget-hero__overlay {
    position: relative;
    z-index: 1;
    max-width: 50rem;
    padding: 2rem 1.5rem 5rem;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
}

.widget-hero__headline {
    margin: 0;
    font-size: clamp(2.4rem, 7vw, 5rem);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    line-height: 1.02;
}

/* Wortweises Einblenden: jedes Wort startet leicht versetzt nach unten und
   unscharf verdeckt (clip-path statt reinem opacity -- wirkt wie ein
   Aufsteigen aus dem Feld, nicht wie ein Aufblitzen). Reine Keyframes sind
   hier bewusst erlaubt: es laeuft genau EINMAL beim Laden, nichts
   unterbricht es vorzeitig (anders als bei wiederholt ausgeloesten
   Interaktionen, dort gelten Transitions). */
.widget-hero__headline .split-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.4em);
    clip-path: inset(0 0 100% 0);
    animation: fvf-word-in var(--fvf-slow) var(--fvf-ease-out) forwards;
    animation-delay: calc(var(--i, 0) * 60ms + 80ms);
}

@keyframes fvf-word-in {
    to {
        opacity: 1;
        transform: translateY(0);
        clip-path: inset(0 0 0 0);
    }
}

.widget-hero__subtext {
    margin: 0;
    font-size: clamp(1rem, 2vw, 1.25rem);
    opacity: 0;
    max-width: 38rem;
    line-height: 1.6;
    animation: fvf-rise-in var(--fvf-slow) var(--fvf-ease-out) forwards;
    animation-delay: 420ms;
}

@keyframes fvf-rise-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 0.92; transform: translateY(0); }
}

.widget-hero__button {
    margin-top: 0.6rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #fff;
    color: var(--fvf-red) !important;
    text-decoration: none;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 0.9rem;
    padding: 0.95rem 2.1rem;
    border-radius: var(--wl-button-radius, 999px);
    opacity: 0;
    animation: fvf-rise-in var(--fvf-slow) var(--fvf-ease-out) forwards;
    animation-delay: 540ms;
    transition: transform var(--fvf-fast) var(--fvf-ease-out), box-shadow var(--fvf-fast) var(--fvf-ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .widget-hero__button:hover {
        box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.35);
    }
}

/* Druckgefuehl: ein Knopf, der nicht leicht einsinkt, wirkt leblos. */
.widget-hero__button:active { transform: scale(0.96); }

/* ── 5) Kennzahlen (trust-bar) -- "Verein in Zahlen" --------------------- */

.widget-trust-bar { padding: 0; margin-top: -2.75rem; position: relative; z-index: 2; }

.trust-bar {
    max-width: 64rem;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1px;
    background: rgba(24, 21, 18, 0.08);
    border-radius: 1.1rem;
    overflow: hidden;
    box-shadow: 0 24px 60px -24px rgba(24, 21, 18, 0.35);
}

.trust-bar__item {
    background: #fff;
    padding: 1.6rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    text-align: center;
    transition: background-color var(--fvf-base) var(--fvf-ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .trust-bar__item:hover { background: var(--fvf-red-tint); }
}

.trust-bar__icon { color: var(--fvf-red); }

.trust-bar__value {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 900;
    color: var(--fvf-ink);
    font-variant-numeric: tabular-nums;
}

.trust-bar__label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.6;
    font-weight: 700;
}

/* ── 6) News ─────────────────────────────────────────────────────────── */

.widget-news { max-width: 72rem; }

.news-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }

.news-card {
    position: relative;
    flex-direction: column;
    gap: 0;
    padding: 0;
    overflow: visible;
    border: 1px solid rgba(24, 21, 18, 0.08);
    border-top: none;
    background: #fff;
    transition: transform var(--fvf-base) var(--fvf-ease-out), box-shadow var(--fvf-base) var(--fvf-ease-out);
}

/* Duenner roter Akzentstreifen oben -- dieselbe Handschrift wie der
   Hero-/Footer-Rand, nur als schmale Linie statt voller Diagonale. */
.news-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--fvf-red);
}

@media (hover: hover) and (pointer: fine) {
    .news-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 22px 44px -22px rgba(24, 21, 18, 0.35);
    }
    .news-card:hover .news-card__image img { transform: scale(1.06); }
    .news-card:hover .news-card__date { transform: rotate(0deg) translateY(-2px); }
}

.news-card__image {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    margin: 0;
    position: relative;
}

.news-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--fvf-slow) var(--fvf-ease-out);
}

.news-card--with-image .news-card__date {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 1;
    background: var(--fvf-red);
    color: #fff;
    border-radius: 0.65rem;
    border-right: none;
    width: 3.1rem;
    padding: 0.4rem 0 0.5rem;
    line-height: 1.1;
    box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.4);
}

/* Ohne Bild (der haeufigste Fall bisher): das Datum wird zu einer
   "gestempelten" Marke, die oben links aus der Karte herausragt --
   deutlich praegnanter als eine stille Datumsspalte und dieselbe
   Bildsprache wie die Liga-Abzeichen der Mannschaftskarten. */
.news-card:not(.news-card--with-image) {
    flex-direction: column;
    padding: 2.5rem 1.5rem 1.5rem;
}

.news-card:not(.news-card--with-image) .news-card__date {
    position: absolute;
    top: -0.7rem;
    left: 1.25rem;
    z-index: 1;
    flex-direction: row;
    align-items: baseline;
    gap: 0.35rem;
    width: auto;
    padding: 0.4rem 0.8rem;
    background: var(--fvf-ink);
    color: #fff;
    border-right: none;
    border-radius: 0.4rem;
    box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.45);
    transform: rotate(-3deg);
    transition: transform var(--fvf-base) var(--fvf-ease-out);
}

.news-card:not(.news-card--with-image) .news-card__day { font-size: 1.1rem; font-weight: 800; }
.news-card:not(.news-card--with-image) .news-card__month { font-size: 0.68rem; opacity: 0.85; margin-top: 0; }

.news-card__day { font-size: 1.5rem; }
.news-card__month { color: inherit; }

.news-card__body { padding: 1.35rem 1.4rem 1.5rem; }

.news-card__title a {
    color: inherit;
    text-decoration: none;
}

.news-card__link,
.news-card__readmore {
    color: var(--fvf-red) !important;
    font-weight: 700;
}

/* "Gefaellt mir": wirkte als nackter Browser-Button neben "Weiterlesen"
   (Nutzer-Feedback, Screenshot-Markierung) -- jetzt eine ruhige Pille im
   Kartenstil statt eines rohen <button>. */
.news-like {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.7rem;
    padding: 0.35rem 0.8rem;
    background: #fff;
    border: 1px solid rgba(24, 21, 18, 0.12);
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--fvf-ink);
    cursor: pointer;
    transition: border-color var(--fvf-base) var(--fvf-ease-out), background var(--fvf-base) var(--fvf-ease-out), transform var(--fvf-fast) var(--fvf-ease-out);
}

.news-like__icon {
    font-size: 0.9rem;
    filter: grayscale(1) opacity(0.6);
    transition: filter var(--fvf-base) ease, transform var(--fvf-base) var(--fvf-ease-out);
}

.news-like__label { opacity: 0.75; }

@media (hover: hover) and (pointer: fine) {
    .news-like:not(:disabled):hover { border-color: var(--fvf-red); }
}

.news-like:active { transform: scale(0.95); }

.news-like.is-liked {
    border-color: var(--fvf-red);
    background: var(--fvf-red-tint);
}

.news-like.is-liked .news-like__icon {
    filter: none;
    transform: scale(1.15);
}

/* ── 7) Mannschaften ------------------------------------------------------
   Keine echten Teamfotos vorhanden -- der Platzhalter bekommt deshalb ein
   eigenes, grafisches "Trikot"-Muster statt eines leeren grauen Feldes. ── */

.team-card {
    border-color: rgba(24, 21, 18, 0.08);
    transition: transform var(--fvf-base) var(--fvf-ease-out), box-shadow var(--fvf-base) var(--fvf-ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .team-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 22px 44px -22px rgba(24, 21, 18, 0.35);
    }
}

.team-card__photo--placeholder {
    position: relative;
    background:
        repeating-linear-gradient(
            125deg,
            var(--fvf-red) 0px,
            var(--fvf-red) 22px,
            #fff 22px,
            #fff 44px
        );
}

.team-card__photo--placeholder::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(24, 21, 18, 0.35), rgba(24, 21, 18, 0.55));
}

.team-card__role { color: var(--fvf-red); }

.team-card__button {
    background: var(--fvf-ink);
    border-radius: var(--wl-button-radius, 0.5rem);
    transition: transform var(--fvf-fast) var(--fvf-ease-out), background-color var(--fvf-fast) var(--fvf-ease-out);
}

.team-card__button:hover { background: var(--fvf-red); filter: none; }
.team-card__button:active { transform: scale(0.96); }

/* ── 8) Partner / Sponsoren ------------------------------------------------ */

.widget-sponsors { max-width: 68rem; }

.sponsors-tier__label {
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.78rem;
    color: var(--fvf-red);
    font-weight: 800;
}

.sponsors-tier__logos { justify-content: center; }

.sponsor-logo {
    border: 1px solid rgba(24, 21, 18, 0.1);
    border-radius: 0.8rem;
    padding: 1rem 1.4rem;
    transition: transform var(--fvf-base) var(--fvf-ease-out), border-color var(--fvf-base) var(--fvf-ease-out);
}

.sponsor-logo img { filter: grayscale(1) contrast(0.9); transition: filter var(--fvf-base) var(--fvf-ease-out); }

@media (hover: hover) and (pointer: fine) {
    .sponsor-logo:hover {
        transform: translateY(-3px);
        border-color: var(--fvf-red);
    }
    .sponsor-logo:hover img { filter: none; }
}

.sponsor-logo__name { font-weight: 700; color: var(--fvf-ink); }

/* Laufband: linear statt geschwungen, weil es eine DAUERBEWEGUNG ist (wie
   ein Fortschrittsbalken) -- Pause bei Hover, damit man ein Logo in Ruhe
   ansehen/anklicken kann. */
.logo-slider { -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.logo-slider__track { animation-timing-function: linear; }
.logo-slider__logo img { filter: grayscale(1) opacity(0.65); transition: filter var(--fvf-base) ease; }

@media (hover: hover) and (pointer: fine) {
    .logo-slider:hover .logo-slider__track { animation-play-state: paused; }
    .logo-slider__logo:hover img { filter: none; }
}

/* ── 9) Chronik / Timeline ------------------------------------------------- */

.tl-item__dot { background: var(--fvf-red); }
.tl-item__year { color: var(--fvf-red); font-weight: 800; }
.tl--list .tl-list { border-left-color: rgba(24, 21, 18, 0.12); }
.tl__years .tl__year { border-color: var(--fvf-red); }
.tl__years .tl__year:hover { background: var(--fvf-red); color: #fff; }

/* ── 10) Ablauf / Prozess-Schritte ------------------------------------------ */

.process-step__number {
    color: var(--fvf-red);
    font-weight: 900;
}

.process-steps__arrow { color: var(--fvf-red); opacity: 0.6; }

/* ── 11) Kontaktformular & Buttons allgemein -------------------------------- */

.widget-contact-form { max-width: 40rem; }

.contact-form__submit,
.btn,
.wl-btn-dynamic {
    background: var(--fvf-red);
    border-radius: var(--wl-button-radius, 999px);
    font-weight: 700;
    letter-spacing: 0.01em;
    transition: transform var(--fvf-fast) var(--fvf-ease-out), filter var(--fvf-fast) var(--fvf-ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .contact-form__submit:hover,
    .btn:hover,
    .wl-btn-dynamic:hover { filter: brightness(1.08); }
}

.contact-form__submit:active,
.btn:active,
.wl-btn-dynamic:active { transform: scale(0.97); }

/* Nutzerwunsch (21.10.2026): "Kontakt und Formulare sollen ansprechend
   minimalistisch aber unique sein" -- kein geschlossener Kasten je Feld,
   stattdessen nur eine Linie, die beim Fokussieren von der Mitte aus rot
   ausfaehrt (dieselbe "ausfahrende Linie" wie der Nav-Unterstrich, hier
   als wiederkehrende Handschrift der ganzen Seite). */
.contact-form__form {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

.contact-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.6rem;
}

.contact-form__form input,
.contact-form__form textarea {
    background: transparent;
    border: none;
    border-bottom: 1.5px solid rgba(24, 21, 18, 0.18);
    border-radius: 0;
    padding: 0.6rem 0.1rem;
    font-size: 1rem;
    transition: border-color var(--fvf-base) var(--fvf-ease-out);
}

.contact-form__form textarea { resize: vertical; min-height: 7rem; }

.contact-form__form input::placeholder,
.contact-form__form textarea::placeholder { color: rgba(24, 21, 18, 0.45); }

.contact-form__form input:focus,
.contact-form__form textarea:focus {
    border-color: var(--fvf-red);
    outline: none;
    box-shadow: none;
}

.contact-form__submit {
    align-self: flex-start;
    padding: 0.85rem 2.2rem;
}

/* Gruendungsjahr als grosse, sehr blasse Zahl im Hintergrund -- Nutzerwunsch
   ("bau das gruendungsjahr irgendwie ein"), dezent genug, um den Text
   nicht zu stoeren, aber erkennbar genug, um nicht wie ein Zufall zu wirken. */
.widget-contact-form { position: relative; }

.widget-contact-form::after {
    content: "1922";
    position: absolute;
    top: -1.5rem;
    right: -0.5rem;
    z-index: -1;
    font-size: clamp(5.5rem, 15vw, 9.5rem);
    font-weight: 900;
    line-height: 1;
    color: rgba(200, 16, 46, 0.07);
    pointer-events: none;
    user-select: none;
}

/* Dreh-Captcha an die restliche Formular-Optik angleichen: derselbe
   gedeckte Rotton statt des mitgelieferten Mint-Gruens, duennerer Ring
   um die Drehscheibe statt des satten Schattens. */
.wl-rotate-captcha {
    padding: 1rem 1.25rem;
    border-radius: 0.8rem;
}

.wl-rotate-captcha__stage {
    box-shadow: inset 0 0 0 1.5px var(--fvf-red);
}

.wl-rotate-captcha label {
    font-weight: 600;
    opacity: 0.8;
}

@media (max-width: 560px) {
    .widget-contact-form::after { font-size: 4.5rem; top: -0.75rem; }
    .contact-form__row { grid-template-columns: 1fr; gap: 1.1rem; }
}

/* ── 12) Fusszeile ------------------------------------------------------
   Nutzerwunsch (21.10.2026): "Footer soll auch Unique sein, so sieht er
   aus wie alle anderen mit fils engine" -- deshalb kein Standard-
   Spaltenfuss: ein diagonaler "Abpfiff"-Streifen oben (greift die
   Hero-Diagonale am Seitenanfang wieder auf, die Seite bekommt einen
   erkennbaren Rahmen), ein riesiges, kaum sichtbares Wappen im Hintergrund
   und der sonst kleine Einleitungssatz wird zur grossen Schlusszeile --
   derselbe Fliesstext, nur typografisch zur Aussage gemacht. ── */

.site-footer {
    position: relative;
    /* Nutzer-Feedback (21.10.2026): "das braun passt nicht" -- --fvf-ink
       ist eigentlich die Textfarbe (fuer Fliesstext gedacht, nur zufaellig
       auch dunkel) und hatte dadurch einen unbeabsichtigten Braunstich als
       Flaechenfarbe. Jetzt ein klar ROTES Dunkel (kein Braun, kein neutrales
       Grau) mit leichtem Verlauf fuer Tiefe statt einer platten Flaeche. */
    background: radial-gradient(140% 120% at 100% 100%, #3a0912 0%, #0d0607 62%);
    color: rgba(255, 255, 255, 0.85);
    overflow: hidden;
    padding-top: 2.5rem;
}

/* "Abpfiff"-Streifen: dieselbe Diagonale wie am Fuss des Hero, nur
   gespiegelt -- die Seite oeffnet und schliesst mit derselben Geste. */
.site-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: -5%;
    right: -5%;
    height: 4.5vw;
    max-height: 56px;
    background: var(--fvf-red);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 0);
}

/* Riesiges Wappen als Wasserzeichen -- reine Markenatmosphaere, kein
   echter Inhalt, deshalb dekorativ und ohne Interaktion. */
.site-footer__inner {
    position: relative;
    z-index: 1;
}

.site-footer::after {
    content: "";
    position: absolute;
    right: -6rem;
    bottom: -6rem;
    width: 26rem;
    height: 26rem;
    background: url("/sites/fv-faurndau/pictures/logo/fvf-wappen.png") center / contain no-repeat;
    opacity: 0.05;
    pointer-events: none;
}

.site-footer__heading {
    position: relative;
    display: inline-block;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.78rem;
    font-weight: 800;
    padding-bottom: 0.5rem;
}

/* Kurzer roter Strich unter jeder Spaltenueberschrift statt generischer
   Fettschrift allein -- dieselbe Handschrift wie der Nav-Unterstrich. */
.site-footer__heading::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 1.5rem;
    height: 2px;
    background: var(--fvf-red);
}

.site-footer a { color: rgba(255, 255, 255, 0.75); transition: color var(--fvf-base) var(--fvf-ease-out); }
.site-footer a:hover { color: #fff; }

/* Der kurze Einleitungssatz (Design > Fusszeile > Text) wird hier zur
   grossen Schlusszeile -- derselbe gepflegte Inhalt, nur gross und
   selbstbewusst gesetzt statt als Kleingedrucktes. */
.site-footer__text {
    max-width: 38rem;
    margin: 0 0 3rem;
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 800;
    line-height: 1.25;
    color: #fff;
    letter-spacing: -0.01em;
}

.site-footer__copyright { opacity: 0.6; }

.site-footer__social-link {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.site-footer__social-link:hover { background: var(--fvf-red); }

.footer-credit-bar { background: #0f0d0b; color: rgba(255, 255, 255, 0.6); }
.footer-credit-bar__brand { color: var(--fvf-red) !important; }

.wl-back-to-top { background: var(--fvf-red); }
.wl-back-to-top:active { transform: scale(0.94); }

/* ── 13) Bewegungsreduktion -------------------------------------------------
   Opacity/Farbe duerfen bleiben (sie helfen beim Verstehen), jede
   Positions-/Clip-Animation faellt weg -- wer das eingestellt hat, sieht
   sofort den fertigen Zustand. */
@media (prefers-reduced-motion: reduce) {
    .site-nav__cta::after { animation: none !important; opacity: 0 !important; }
    .site-nav__cta::before { animation: none !important; opacity: 1 !important; }

    .widget-hero__headline .split-word,
    .widget-hero__subtext,
    .widget-hero__button {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
    }

    .site-nav__link::after { transition: none !important; }

    html.wl-animate .widget-team-cards__grid > .team-card,
    html.wl-animate .cover-cards > *,
    html.wl-animate .news-list > .news-card,
    html.wl-animate .news-posts > .news-post,
    html.wl-animate .sponsors-tier__logos > * {
        transition: none !important;
        transform: none !important;
    }

    .logo-slider__track { animation: none !important; }
}

/* ── 14) Kleine Bildschirme -------------------------------------------------- */

@media (max-width: 640px) {
    .widget-hero { min-height: 72vh; }
    .widget-hero__overlay { padding-bottom: 3.5rem; }
    .news-card:not(.news-card--with-image) { flex-direction: row; }
    .trust-bar { grid-template-columns: repeat(2, 1fr); }
}

/* ── 15) News-Index & Einzelbeitrag (App\Controllers\NewsController) --------
   Eigene Seiten mit eigenen Klassen (.news-index__*, .news-teaser-card,
   .news-post-page__*) -- NICHT dieselben wie das "news"-Widget auf der
   Startseite (.news-card usw.), deshalb bisher unformatiert/Browser-
   Standard (Nutzer-Feedback: "das ist die news seite? bitte beheben"). ── */

.widget-news-index,
.widget-news-post {
    max-width: 56rem;
    margin: 0 auto;
    padding: var(--wl-section-spacing, 4rem) 1.5rem;
}

.news-index__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.news-index__title {
    margin: 0;
    font-size: clamp(1.8rem, 3.5vw, 2.4rem);
    font-weight: 800;
    text-transform: uppercase;
}

.news-index__search {
    display: flex;
    gap: 0.6rem;
}

.news-index__search input {
    background: transparent;
    border: none;
    border-bottom: 1.5px solid rgba(24, 21, 18, 0.18);
    padding: 0.5rem 0.1rem;
    min-width: 14rem;
    transition: border-color var(--fvf-base) var(--fvf-ease-out);
}

.news-index__search input:focus { border-color: var(--fvf-red); outline: none; }

.news-index__search button {
    background: var(--fvf-red);
    color: #fff;
    border: none;
    border-radius: var(--wl-button-radius, 999px);
    padding: 0.5rem 1.3rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform var(--fvf-fast) var(--fvf-ease-out), filter var(--fvf-fast) var(--fvf-ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .news-index__search button:hover { filter: brightness(1.08); }
}

.news-index__search button:active { transform: scale(0.96); }

.news-index__empty { opacity: 0.65; font-style: italic; }

.news-index__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
}

/* Dieselbe "gestempelte" Handschrift wie die Neuigkeiten-Karten im
   Widget auf der Startseite -- eine Seite, ein Vokabular. */
.news-teaser-card {
    position: relative;
    background: #fff;
    border: 1px solid rgba(24, 21, 18, 0.08);
    border-radius: var(--wl-radius, 1rem);
    overflow: hidden;
    transition: transform var(--fvf-base) var(--fvf-ease-out), box-shadow var(--fvf-base) var(--fvf-ease-out);
}

.news-teaser-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--fvf-red);
    z-index: 1;
}

@media (hover: hover) and (pointer: fine) {
    .news-teaser-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 22px 44px -22px rgba(24, 21, 18, 0.35);
    }
    .news-teaser-card:hover .news-teaser-card__image img { transform: scale(1.06); }
}

.news-teaser-card__link { display: block; color: inherit; text-decoration: none; }

.news-teaser-card__image { aspect-ratio: 16 / 10; overflow: hidden; }

.news-teaser-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--fvf-slow) var(--fvf-ease-out);
}

.news-teaser-card__body { padding: 1.4rem 1.4rem 0.5rem; }

.news-teaser-card__date {
    display: block;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fvf-red);
    margin-bottom: 0.4rem;
}

.news-teaser-card__title { margin: 0 0 0.5rem; font-size: 1.1rem; font-weight: 800; }
.news-teaser-card__excerpt { margin: 0; font-size: 0.9rem; line-height: 1.6; opacity: 0.75; }

.news-teaser-card .news-like { margin: 0.4rem 1.4rem 1.4rem; }

/* Einzelbeitrag */
.news-post-page__meta { color: var(--fvf-red); font-weight: 800; text-transform: uppercase; font-size: 0.78rem; letter-spacing: 0.06em; }
.news-post-page__title { font-size: clamp(1.7rem, 4vw, 2.4rem); font-weight: 800; line-height: 1.2; margin: 0.5rem 0 1.5rem; }
.news-post-page__image { border-radius: var(--wl-radius, 1rem); overflow: hidden; margin-bottom: 1.75rem; }
.news-post-page__image img { width: 100%; display: block; }
.news-post-page__body { font-size: 1.05rem; line-height: 1.75; }
.news-post-page__body p:last-child { margin-bottom: 0; }

.news-post-page__back {
    display: inline-block;
    margin-top: 2rem;
    font-weight: 700;
    color: var(--fvf-red) !important;
    text-decoration: none;
}

.news-post-page__back:hover { text-decoration: underline; }

@media (max-width: 560px) {
    .news-index__search { width: 100%; }
    .news-index__search input { flex: 1; min-width: 0; }
}

/* ── 16) Platzhalter-Rahmen (z.B. fuer die spaetere FuPa-Tabelle) ------------
   Nutzt die vorhandene "Kasten"-Option des text-Widgets (boxed:true) statt
   eines neuen Widget-Typs -- hier bewusst als auffaelliger gestrichelter
   Rahmen statt des sonstigen Milchglas-Kastens, damit klar ist: das ist ein
   Platz FUER etwas, kein fertiger Inhalt. ── */
.widget-text--boxed {
    background: var(--fvf-red-tint);
    border: 2px dashed var(--fvf-red);
    border-radius: 1rem;
    padding: 2.5rem 2rem;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.widget-text--boxed .widget-text__headline {
    margin: 0 0 0.5rem;
    color: var(--fvf-red);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.widget-text--boxed .widget-text__body { opacity: 0.75; }
.widget-text--boxed .widget-text__body p { margin: 0; }