@font-face {
    font-family: SportDisplay;
    src: url('fonts/barlow-condensed-black-italic.ttf') format('truetype');
    font-style: italic;
    font-weight: 900;
    font-display: swap;
}

/* Alle Komponenten sind gekapselt; keine Änderungen am übrigen Seitenlayout. */
.ssg-home {
    --home-navy: #152a50;
    --home-blue: #0870b0;
    --home-cyan: #9ac9e8;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--home-navy);
    color: #fff;
    font-family: Lato, system-ui, sans-serif;
    text-align: left;
}
.ssg-home *, .ssg-home *::before, .ssg-home *::after { box-sizing: border-box; }
.ssg-home .ssg-home__inner { position: relative; z-index: 1; max-width: 1500px; margin-inline: auto; padding: 56px 40px; }
.ssg-home .ssg-home__eyebrow { margin: 0 0 20px; color: var(--home-cyan); font-size: 12px; font-weight: 900; letter-spacing: .16em; line-height: 1.6; text-transform: uppercase; }
.ssg-home .ssg-home__display {
    margin: 0;
    color: #fff;
    font: italic 900 clamp(56px, 6.8vw, 104px)/.94 SportDisplay, Impact, sans-serif;
    letter-spacing: -.015em;
    text-transform: uppercase;
    overflow-wrap: normal;
}
.ssg-home .ssg-home__display span { color: var(--home-cyan); }
@supports (-webkit-text-stroke: 1px white) {
    .ssg-home-intro .ssg-home-intro__title span,
    .ssg-home-claim .ssg-home__display span {
        color: transparent;
        -webkit-text-stroke: 1.5px #fff;
    }
}
.ssg-home .ssg-home__lead { max-width: 43ch; margin: 26px 0 0; color: #fff; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.65; }
.ssg-home::before, .ssg-home::after { content: ''; position: absolute; z-index: 0; pointer-events: none; }
.ssg-home-intro::before { inset: 0 0 0 38%; background: linear-gradient(140deg, #0870b0 0%, #09598a 60%, #152a50 100%); transform: skewX(-14deg); transform-origin: bottom; }
.ssg-home-intro::after { width: 24%; height: 150%; top: -20%; right: 3%; transform: rotate(24deg); border-inline: 1px solid #9ac9e845; background: repeating-linear-gradient(90deg, transparent 0 45px, #9ac9e829 46px 47px); }
.ssg-home .ssg-home-intro__grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 28px; align-items: center; }
.ssg-home-intro__copy { position: relative; z-index: 2; padding-block: 12px; }
.ssg-home .ssg-home-intro__support { margin: 14px 0 0; color: #fff; font-size: 13px; font-weight: 700; line-height: 1.5; }
.ssg-home .ssg-home__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.ssg-home a.ssg-home__button { display: inline-flex; align-items: center; justify-content: space-between; gap: 22px; min-height: 48px; padding: 13px 20px; border: 2px solid var(--home-cyan); border-radius: 0; background: var(--home-cyan); color: #152a50; font-size: 14px; font-weight: 900; line-height: 1.4; text-decoration: none; }
.ssg-home a.ssg-home__button--line { background: #152a50; color: #fff; border-color: #fff; }
.ssg-home a.ssg-home__button:hover { background: #fff; border-color: #fff; color: #152a50; }
.ssg-home a:focus-visible { outline: 3px solid #fff; outline-offset: 5px; box-shadow: 0 0 0 7px #152a50; }
.ssg-home .ssg-home__figure { position: relative; margin: 0; min-width: 0; }
.ssg-home .ssg-home__photo { display: block; width: 100%; max-width: none; height: auto; aspect-ratio: auto; object-fit: contain; contain-intrinsic-size: none; border-radius: 0; }
.ssg-home .ssg-home-intro__figure { border-top: 5px solid var(--home-cyan); background: #152a50; box-shadow: 18px 18px 0 #152a5080; }
.ssg-home .ssg-home__figure figcaption { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; padding: 13px 17px; background: #152a50; color: #fff; font-size: 11px; font-weight: 900; letter-spacing: .13em; line-height: 1.5; }

/* Eigenständiges Statement: Schrägen und Bahnlinien statt Boxen. */
.ssg-home-claim { background: #0870b0; }
.ssg-home-claim::before { inset: 0; background: repeating-linear-gradient(118deg, transparent 0 115px, #ffffff19 116px 117px); }
.ssg-home-claim::after { width: 110px; height: 120%; top: -10%; left: -70px; background: #9ac9e8; transform: skewX(-20deg); }
.ssg-home-claim .ssg-home__inner { padding-block: 44px 46px; }
.ssg-home-claim .ssg-home__eyebrow { color: #fff; margin-bottom: 14px; }
.ssg-home-claim .ssg-home__display { font-size: clamp(56px, 9.8vw, 146px); }
.ssg-home-claim .ssg-home-claim__line { margin: 20px 0 0; color: #fff; font-size: clamp(16px, 2vw, 23px); font-weight: 700; line-height: 1.5; }

/* Kompakter Einstieg, keine zweite bildschirmhohe Bühne. */
.ssg-home-results { background: linear-gradient(115deg, #152a50 10%, #064c7d 65%, #0870b0); scroll-margin-top: 32px; }
.ssg-home-results .ssg-home__inner { padding-block: 38px 40px; }
.ssg-home-results .ssg-home__eyebrow { margin-bottom: 14px; }
.ssg-home-results .ssg-home__display { font-size: clamp(48px, 6.4vw, 92px); }
.ssg-home-results .ssg-home-results__line { position: relative; margin: 18px 0 0; color: #fff; font-size: 16px; line-height: 1.6; }
.ssg-home-results::after { width: 34%; height: 200%; right: 0; top: -30%; transform: rotate(25deg); background: repeating-linear-gradient(90deg, transparent 0 35px, #9ac9e833 36px 38px); }
.ssg-home-results .ssg-home-results__watermark { position: absolute; right: 25px; bottom: -35px; z-index: 0; color: #ffffff0c; font: italic 900 240px/1 SportDisplay, Impact, sans-serif; pointer-events: none; }

.ssg-home-about { background: #152a50; border-top: 5px solid #0870b0; }
.ssg-home-about::before { inset: 0 56% 0 0; background: repeating-linear-gradient(140deg, #0870b0 0 55px, #0767a2 56px 57px); }
.ssg-home .ssg-home-about__grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: center; gap: 48px; padding-block: 64px; }
.ssg-home-about .ssg-home__display { font-size: clamp(48px, 5.1vw, 76px); }
.ssg-home .ssg-home-about__figure { border-bottom: 5px solid var(--home-cyan); }
.ssg-home-about .ssg-home-about__intro { margin: 24px 0 10px; color: var(--home-cyan); font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: .1em; }
.ssg-home-about .ssg-home-about__clubs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; margin: 0; padding: 0; list-style: none; }
.ssg-home-about .ssg-home-about__clubs li { padding-left: 12px; border-left: 2px solid var(--home-cyan); color: #fff; font-size: 14px; line-height: 1.5; }
.ssg-home a.ssg-home__text-link { display: inline-block; padding-block: 12px; margin-top: 18px; color: #9ac9e8; font-weight: 900; text-decoration: underline; text-underline-offset: 5px; }
.ssg-home a.ssg-home__text-link:hover { color: #fff; }

/* Nur dunkle Bereichstitel; die helle Saison-/Top-Leistungen-Kachel bleibt ausgenommen. */
.home .ssg-erfolge-aktuell :is(.ssg-col-dm, .ssg-col-national, .ssg-col-international, .ssg-col-mannschaft) .ssg-tile-title { color: #fff; border-bottom-color: #9ac9e8; }
.home .ssg-erfolge-aktuell :is(.ssg-col-dm, .ssg-col-national, .ssg-col-international, .ssg-col-mannschaft) .ssg-tile-fallback { background: #263f66; color: #fff; border: 1px solid #90bddd; line-height: 1.6; }

@media (min-width: 1500px) {
    .ssg-home .ssg-home__inner { max-width: 1580px; }
}
@media (max-width: 1100px) and (min-width: 901px) {
    .ssg-home .ssg-home__inner { padding-inline: 28px; }
    .ssg-home .ssg-home-intro__title { font-size: 66px; }
    .ssg-home .ssg-home-about__grid { gap: 30px; }
}
@media (max-width: 900px) {
    .ssg-home .ssg-home__inner { padding: 36px 24px; }
    .ssg-home .ssg-home-intro__grid, .ssg-home .ssg-home-about__grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
    .ssg-home .ssg-home-intro__title { font-size: clamp(68px, 12vw, 108px); }
    .ssg-home-intro__copy { padding: 0; }
    .ssg-home .ssg-home__lead { max-width: 56ch; margin-top: 20px; }
    .ssg-home .ssg-home__actions { margin-top: 24px; }
    .ssg-home .ssg-home-intro__figure { box-shadow: 10px 10px 0 #152a5080; }
    .ssg-home-intro::before { inset-inline-start: 65%; }
    .ssg-home-about__copy { grid-row: 1; }
    .ssg-home-about::before { inset: 65% 0 0; }
    .ssg-home-about .ssg-home__display { font-size: clamp(56px, 9vw, 80px); }
    .ssg-home-claim .ssg-home__display { max-width: 10ch; }
    .ssg-home-results .ssg-home__display { max-width: 13ch; }
    .ssg-home-results .ssg-home-results__watermark { font-size: 180px; }
}
@media (max-width: 480px) {
    .ssg-home .ssg-home__inner { padding: 32px 20px; }
    .ssg-home .ssg-home-intro__title { font-size: clamp(56px, 15vw, 72px); }
    .ssg-home .ssg-home__eyebrow { font-size: 10px; letter-spacing: .12em; margin-bottom: 15px; }
    .ssg-home .ssg-home__figure figcaption { font-size: 9px; padding-inline: 12px; }
    .ssg-home .ssg-home__actions { gap: 10px; }
    .ssg-home a.ssg-home__button { padding-inline: 14px; gap: 14px; }
    .ssg-home-claim .ssg-home__display { font-size: clamp(56px, 16vw, 76px); }
    .ssg-home-about .ssg-home__display { font-size: clamp(48px, 13vw, 62px); }
    .ssg-home-about .ssg-home-about__clubs { grid-template-columns: minmax(0, 1fr); }
    .ssg-home-results .ssg-home__display { font-size: clamp(44px, 12vw, 58px); }
}
@media (prefers-reduced-motion: reduce) {
    .ssg-home, .ssg-home *, .ssg-home *::before, .ssg-home *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
    .ssg-home .ssg-home__display span { color: CanvasText; -webkit-text-stroke: 0; }
}

/* Bestehender Vereinslogo-Abschnitt, bündig an die Vereinsvorstellung. */
.home .elementor-element.elementor-element-59c0af5 {
    margin-block: 0;
    padding: 0 40px 56px;
    background: #152a50;
}
.home .elementor-element-59c0af5 > .elementor-container {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 18px;
    width: 100%;
    max-width: 1440px;
    margin-inline: auto;
}
/* Auch mit der zusätzlichen Zeile älterer Elementor-Versionen kompatibel. */
.home .elementor-element-59c0af5 > .elementor-container > .elementor-row { display: contents; }
.home .elementor-element-59c0af5 .elementor-column {
    width: 100% !important;
    min-width: 0;
    padding: 0;
}
.home .elementor-element-59c0af5 .elementor-column > .elementor-column-wrap {
    width: 100%;
    min-width: 0;
    padding: 0;
}
.home .elementor-element-59c0af5 .elementor-widget-wrap {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    height: 160px;
    padding: 18px;
    background: #fff;
    border: 1px solid #a8cde7;
    border-bottom: 4px solid #9ac9e8;
    border-radius: 0;
}
.home .elementor-element-59c0af5 .elementor-widget-image,
.home .elementor-element-59c0af5 .elementor-widget-container {
    width: 100%;
    min-width: 0;
    height: 100%;
    margin: 0;
    text-align: center;
}
.home .elementor-element-59c0af5 .elementor-widget-container,
.home .elementor-element-59c0af5 .elementor-widget-image a {
    display: flex;
    align-items: center;
    justify-content: center;
}
.home .elementor-element-59c0af5 .elementor-widget-image a {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    min-width: 0;
    border-radius: 0;
}
.home .elementor-element-59c0af5 .elementor-widget-image img {
    display: block;
    width: 100%;
    height: 118px;
    max-width: 100%;
    object-fit: contain;
    contain-intrinsic-size: none;
    border-radius: 0;
}
.home .elementor-element-59c0af5 .elementor-widget-wrap:hover,
.home .elementor-element-59c0af5 .elementor-widget-wrap:focus-within {
    border-color: #0870b0;
    border-bottom-color: #9ac9e8;
    box-shadow: 0 0 0 2px #0870b0;
}
.home .elementor-element-59c0af5 .elementor-widget-image a:focus-visible {
    outline: 3px solid #0870b0;
    outline-offset: 5px;
}
@media (max-width: 1024px) {
    .home .elementor-element.elementor-element-59c0af5 { padding-inline: 24px; padding-bottom: 40px; }
    .home .elementor-element-59c0af5 > .elementor-container { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .home .elementor-element.elementor-element-59c0af5 { padding-inline: 20px; padding-bottom: 32px; }
    .home .elementor-element-59c0af5 > .elementor-container { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .home .elementor-element-59c0af5 .elementor-widget-wrap { height: 120px; padding: 14px; }
    .home .elementor-element-59c0af5 .elementor-widget-image img { height: 86px; }
}

/* Vorhandener Hero-Bildwechsel im großen Intro-Fotorahmen. */
.ssg-home-intro__figure .ssg-hero {
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 3;
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: #152a50;
}
.ssg-home-intro__figure .ssg-hero__slides,
.ssg-home-intro__figure .ssg-hero__slide { position: absolute; inset: 0; width: 100%; height: 100%; }
.ssg-home-intro__figure .ssg-hero__slide {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transform: none !important;
    animation: none !important;
    will-change: opacity;
}
.ssg-home-intro__figure .ssg-hero__overlay,
.ssg-home-intro__figure .ssg-hero__content,
.ssg-home-intro__figure .ssg-hero__wave { display: none; }
.ssg-home-intro__figure .ssg-hero__dots {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: calc(100% - 24px);
    right: 12px;
    bottom: 12px;
    gap: 2px;
    padding: 3px 7px;
    background: #152a50;
    border: 1px solid #9ac9e8;
    border-radius: 0;
}
.ssg-home-intro__figure .ssg-hero .ssg-hero__dots button.ssg-hero__dot {
    box-sizing: border-box;
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    border: 9px solid transparent;
    border-radius: 50%;
    background-color: #fff;
    background-clip: padding-box;
}
.ssg-home-intro__figure .ssg-hero .ssg-hero__dots button.ssg-hero__dot.is-active,
.ssg-home-intro__figure .ssg-hero .ssg-hero__dots button.ssg-hero__dot:hover { background-color: #9ac9e8; }
.ssg-home-intro__figure .ssg-hero .ssg-hero__dots button.ssg-hero__dot:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 0;
    box-shadow: none;
}

/* Vereinslinks in der Vorstellung, unabhängig von Theme-Linkfarben. */
.ssg-home-about .ssg-home-about__clubs a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.ssg-home-about .ssg-home-about__clubs a:hover { color: #9ac9e8; }
.ssg-home-about .ssg-home-about__clubs a:focus-visible {
    color: #9ac9e8;
    outline: 3px solid #9ac9e8;
    outline-offset: 4px;
}

/* Auf Mobilgeräten volle Schrift statt feiner Kontur auf der Cyan-Schräge. */
@media (max-width: 900px) {
    .ssg-home-claim { background: linear-gradient(120deg, #152a50, #08639a); }
    .ssg-home-claim::after { width: 5px; height: 100%; top: 0; left: 0; transform: none; }
    .ssg-home-claim .ssg-home__display {
        transform: skewX(-5deg);
        transform-origin: left bottom;
        padding-left: 8px;
        color: #fff;
    }
    .ssg-home-claim .ssg-home__display span {
        color: #fff;
        -webkit-text-stroke: 0;
    }
}
