/* ICE Hockey League – gebündelte custom.css
   Erstellt aus den bisherigen components/*.css in unveränderter Import-Reihenfolge.
   Änderungen gegenüber den Quelldateien:
   1) keine CSS-Import-Anweisungen mehr
   2) Font-Pfade für die Lage direkt in custom.css angepasst
   3) identischen doppelten Desktop-Block aus sprache.css nur einmal übernommen
*/


/* =========================================================
   QUELLE: components/accessibility.css
   ========================================================= */

/* =========================================================
   ICE Hockey League – Vorlesefunktion
   ========================================================= */

.ice-read-aloud {
    margin: 18px 0 24px;
    padding: 12px 14px;
    background: #d9e2eb;
    color: #0b1b34;
}

.ice-read-aloud__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.ice-read-aloud button {
    min-height: 36px;
    padding: 6px 12px;
    border: 1px solid #00437a;
    border-radius: 0;
    background: #ffffff;
    color: #00437a;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
}

.ice-read-aloud__button--primary {
    background: #00437a;
    color: #ffffff;
}

.ice-read-aloud button:hover {
    text-decoration: underline;
}

.ice-read-aloud button:focus-visible {
    outline: 3px solid #d70a2d;
    outline-offset: 2px;
}

.ice-read-aloud button:disabled {
    opacity: 0.45;
    cursor: default;
    text-decoration: none;
}

.ice-read-aloud__speed {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    margin-left: 6px;
}

.ice-read-aloud__speed-label {
    font-size: 12px;
    font-weight: 600;
}

.ice-read-aloud__speed button {
    min-width: 42px;
    padding-inline: 8px;
}

.ice-read-aloud__speed button[aria-pressed="true"] {
    background: #00437a;
    color: #ffffff;
}

.ice-read-aloud__status {
    min-height: 18px;
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.4;
}

/* Smartphone */

@media (max-width: 639px) {

    .ice-read-aloud {
        margin-block: 14px 20px;
        padding: 10px;
    }

    .ice-read-aloud__controls {
        gap: 6px;
    }

    .ice-read-aloud button {
        min-height: 38px;
        font-size: 12px;
    }

    .ice-read-aloud__speed {
        width: 100%;
        margin-top: 2px;
        margin-left: 0;
    }
}


/* =========================================================
   QUELLE: components/calovo.css
   ========================================================= */

/* =========================================================
   CALOVO – Spielplan abonnieren (Feste Symmetrische Breite)
   ========================================================= */
.ice-calovo-box {
    /* FIX: Feste, stabile Breite statt flexibler Dehnung, perfekt für die Sidebar */
    width: 200px; 
    max-width: 100%;
    box-sizing: border-box;
    margin-inline: auto;

    background-color: #00437a;
    color: #ffffff;
}

/* ---------------------------------------------------------
   Oberer Bereich (Icon + Text-Ausrichtung)
   --------------------------------------------------------- */
.ice-calovo-box__top {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Links ausgerichtet für harmonischen Fluss */
    gap: 8px; /* Fester Abstand zwischen Pfeilen und Text */
    min-width: 0;
    padding: 12px 12px 4px;
}

/* Das dreifache Pfeil-Icon: Halbe Größe */
.ice-calovo-box__arrows {
    flex: 0 0 25px; /* Exakt halbiert (vorher 70px) */
    display: flex;
    align-items: center;
    justify-content: center;
}

.ice-calovo-box__arrows img {
    display: block;
    width: 25px; /* Halbe Breite (vorher 50px) */
    height: auto;
}

/* ---------------------------------------------------------
   Überschrift (Kompakt gegen Wortbrüche)
   --------------------------------------------------------- */
.ice-calovo-box__title {
    flex: 1 1 auto;
    min-width: 0;

    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Linksbündig passend zum Icon */
    justify-content: center;

    font-family: "Rigid Square", sans-serif;
    font-weight: 700;
    line-height: 1.1; /* Minimal erhöht, um den gequetschten Look zu nehmen */
    text-align: left;
    text-transform: uppercase;
    color: #ffffff;
}

.ice-calovo-box__title-main,
.ice-calovo-box__title-sub {
    display: block;
    max-width: 100%;
    white-space: nowrap; /* Verhindert das Umbrechen mitten im Wort radikal */
}

.ice-calovo-box__title > a,
.ice-calovo-box__title > a:hover,
.ice-calovo-box__title > a:focus {
    color: #fff;
    text-decoration: none;
}

/* FIX: Radikal verkleinerte Schriftgrößen für Desktop */
.ice-calovo-box__title-main {
    font-size: 15px; /* Reduziert von 36px – passt jetzt perfekt in die 200px Box */
}

.ice-calovo-box__title-sub {
    font-size: 11px; /* Reduziert von 24px */
    font-weight: 400; /* Etwas leichter für eine bessere visuelle Hierarchie */
    margin-top: 2px;
}

/* ---------------------------------------------------------
   Calovo Logo unten: Halbe Größe
   --------------------------------------------------------- */
.ice-calovo-box__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px 12px;
}

.ice-calovo-box__logo img {
    display: block;
    width: 100px; /* Exakt halbiert (vorher 200px) */
    max-width: 100%;
    height: auto;
}

/* ==========================================================
   Responsive Absicherung (Keine riesigen Sprünge mehr nötig)
   ========================================================== */
@media (width < 640px) {
    .ice-calovo-box {
        width: 170px; /* Schmiegt sich auf Smartphones elegant in engere Layouts */
    }

    .ice-calovo-box__title-main {
        font-size: 13px;
    }

    .ice-calovo-box__title-sub {
        font-size: 10px;
    }

    .ice-calovo-box__logo img {
        width: 85px;
    }
}


/* =========================================================
   QUELLE: components/design.css
   ========================================================= */

/* =========================================================
   Homepage – schräge Widget-Überschriften (Hockey-Style)
   ========================================================= */
.ice_hex_headlines {
    /* CSS-Variablen für zentrale Steuerung */
    --ice-headline-height: 42px;
    --ice-headline-slant: 24.25px; /* tan(30°) * 42px */

    display: inline-flex; /* Fix 1: Verhindert unschöne Streckung in UIkit-Grids */
    align-items: center;

    width: 170px; /* Perfekte feste Basisbreite – lang genug für alle 5 Sprachen */
    max-width: 100%; /* Verhindert das Herausragen auf sehr kleinen Smartphones */
    min-height: var(--ice-headline-height);
    box-sizing: border-box;

    margin: 0 0 15px; /* Leicht erhöhter Abstand für besseren UIkit-Rhythmus */
    padding: 0 calc(12px + var(--ice-headline-slant)) 0 16px; /* Fix 3: Schützt Text vor der Clip-Schräge */

    background-color: #00437a;

    /* Saubere Hardware-beschleunigte Schräge */
    clip-path: polygon(
        0% 0%,
        100% 0%,
        calc(100% - var(--ice-headline-slant)) 100%,
        0% 100%
    );

    /* Typografie – Abgestimmt auf UIkit-Kaskaden */
    font-family: "Rigid Square", sans-serif;
    font-size: 22px; /* Fix 4: Minimal reduziert für extrem lange Sprachen */
    font-weight: 700;
    line-height: 1.1; /* Fix 5: Schützt Unterlängen wie g, j, y vor dem Abschneiden */
    letter-spacing: 0.4px;
    color: #ffffff;
    text-transform: uppercase;

    /* Text-Handling für 5 Sprachen */
    overflow: hidden; /* Fix 6: Verhindert, dass Text aus der Schräge herausragt */
    text-overflow: ellipsis; /* Fügt "..." an, falls ein polnischer/finnischer Begriff zu lang ist */
    white-space: nowrap;
}


/* =========================================================
   QUELLE: components/fonts.css
   ========================================================= */

/* =========================================================
   Schriftart-Einbindung: Rigid Square (Hockey-Branding)
   ========================================================= */

@font-face {
    font-family: "Rigid Square";
    src: url("fonts/rigid-square/Rigid_Square_Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Rigid Square";
    src: url("fonts/rigid-square/Rigid_Square_Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Rigid Square";
    src: url("fonts/rigid-square/Rigid_Square_ExtraBold.woff2") format("woff2");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* =========================================================
   Fix 2: UIkit / YOOtheme Fallback-Absicherung
   ========================================================= */
body, h1, h2, h3, h4, h5, h6, .uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-h6 {
    /* Definiert serifenlose, sportliche System-Schriftarten als Fallback, 
       während die WOFF2 geladen wird. Verhindert Layout-Verschiebungen (CLS) */
    font-family: "Rigid Square", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}


/* =========================================================
   QUELLE: components/footer.css
   ========================================================= */

/* ==========================================================
   Footer: Impressum und Datenschutz (Rechtliches)
   ========================================================== */

/* Standard-Farbe für die Footer-Links im Ruhezustand */
.ice-footer-legal .uk-subnav > * > a,
.ice-footer-legal .uk-subnav > * > span {
    color: #00437a;
}

/* Interaktive Zustände: Hover, Focus und die aktive Seite */
.ice-footer-legal .uk-subnav > * > a:hover,
.ice-footer-legal .uk-subnav > * > a:focus,
.ice-footer-legal .uk-subnav > .uk-active > a {
    color: #0b1b34;
}


/* =========================================================
   QUELLE: components/header.css
   ========================================================= */

/* =========================================================
   ICE Header – Desktop / Mobile sauber getrennt
   ========================================================= */

/* =========================================================
   Desktop Header – ab 960px
   ========================================================= */
@media (min-width: 960px) {

    /* Niemals Desktop- und Mobile-Header gleichzeitig anzeigen */
    .tm-header-mobile {
        display: none;
    }

    /* Zentrale Headerhöhe und Ebene über dem DJ-MegaMenu */
    .tm-header {
        --ice-header-height: 120px;

        position: relative;
        z-index: 600;
        overflow: visible;
    }

    .tm-header .uk-navbar-container,
    .tm-header .uk-navbar {
        min-height: var(--ice-header-height);
        overflow: visible;
    }

    /* Logo ragt kontrolliert über die Navigation */
    .tm-header .uk-navbar-left {
        position: relative;
        z-index: 2;
        align-items: flex-start;
    }

    .tm-header .uk-logo {
        position: relative;
        z-index: 2;
        margin-top: 10px;
        margin-bottom: -120px;
    }

    /* Rechter Headerbereich nutzt die gesamte verfügbare Breite */
    .tm-header .uk-navbar-right {
        flex: 1 1 auto;
        min-width: 0;
        align-self: stretch;
    }

    .tm-header .uk-navbar-right > .uk-navbar-item {
        width: 100%;
        min-width: 0;
        min-height: 0;
        padding-block: 0;
        align-items: stretch;
    }

    /* Sprache, Social und Partner auf einer gemeinsamen Mittelachse */
    .tm-header .ice-header-grid {
        width: 100%;
        min-width: 0;
        min-height: var(--ice-header-height);
        align-items: center;
    }

    .tm-header .ice-header-grid > * {
        align-self: center;
    }

    /* Bestehende horizontale Feinverschiebung beibehalten */
    .tm-header .ice-header-social {
        translate: var(--ice-social-shift, 0px) 0;
    }

    /* Neuer Partner-Slider; alte Klasse bleibt als Fallback erhalten */
    .tm-header .ice-partner-slider,
    .tm-header .ice-sponsor-slideshow {
        width: min(300px, 100%);
        max-width: 100%;
        margin-left: auto;
    }

    /* DJ-MegaMenu bleibt unter dem herausragenden ICE-Logo */
    .dj-megamenu-wrapper,
    .dj-megamenu {
        position: relative;
        z-index: 500;
    }
}

/* =========================================================
   Mobile Header – unter 960px
   ========================================================= */
@media (width < 960px) {

    /* Harte Trennung verhindert das 959px-Doppelheader-Problem */
    .tm-header {
        display: none;
    }

    .tm-header-mobile {
        position: relative;
        z-index: 1000;
    }

    /* Natives YOOtheme-Mobile-Logo ausblenden */
    .tm-header-mobile .uk-navbar-left {
        display: none;
    }

    /* Der mobile Builder nutzt die gesamte Breite */
    .tm-header-mobile .uk-navbar-right,
    .tm-header-mobile .uk-navbar-right > .uk-navbar-item {
        width: 100%;
        margin-left: 0;
    }

    .tm-header-mobile .uk-navbar-container,
    .tm-header-mobile .uk-navbar {
        overflow: visible;
    }

    .tm-header-mobile .uk-navbar-container {
        position: relative;
        z-index: 10;
    }

    .tm-header-mobile .uk-logo,
    .tm-header-mobile .ice-mobile-logo {
        position: relative;
        z-index: 20;
    }

    .tm-header-mobile .ice-language-switcher-mobile {
        position: relative;
        z-index: 30;
    }

    /* Social Icons kompakt und ohne Umbruch */
    .tm-header-mobile .ice-header-social-mobile {
        margin: 0;
        white-space: nowrap;
        translate: var(--ice-social-shift, 0px) 0;
    }

    .tm-header-mobile ul.ice-header-social-mobile,
    .tm-header-mobile .ice-header-social-mobile > ul.uk-grid,
    .tm-header-mobile .ice-header-social-mobile > ul {
        flex-wrap: nowrap;
        margin-left: -4px;
    }

    .tm-header-mobile .ice-header-social-mobile > ul > li {
        padding-left: 4px;
    }

    /* Mobile Flaggen */
    .tm-header-mobile .ice-language-switcher-mobile img,
    .tm-header-mobile .ice-language-switcher-mobile a img {
        width: clamp(24px, 4vw, 30px);
        height: auto;
        max-width: none;
    }

    /* Mobile Sponsor-Slider */
    .tm-header-mobile .ice-sponsor-slider-mobile,
    .tm-header-mobile .ice-partner-slider {
        width: clamp(120px, 30vw, 300px);
        max-width: 100%;
    }
}
/* =========================================================
   Mobile Header Layouts – UIkit @s
   ========================================================= */

.tm-header-mobile .ice-mobile-header-xs {
    display: none;
}

@media (width < 640px) {

    .tm-header-mobile .ice-mobile-header-s {
        display: none;
    }

    .tm-header-mobile .ice-mobile-header-xs {
        display: block;
    }
}
/* ==========================================================
   SCORETICKER – kompakter Gamecenter-Header unter 960px
   ========================================================== */

@media (width < 960px) {

    div.mod-ice-scoreticker {
        --ice-scoreticker-mobile-cta-height: 22px;
        --ice-scoreticker-mobile-cta-slant:
            calc(var(--ice-scoreticker-mobile-cta-height) * 0.57735);

        width: 100%;
        height: auto;
        min-height: 0;
    }


    /* ------------------------------------------------------
       Aufbau:
       Zeile 1 = kleine GAMECENTER-Lasche
       Zeile 2 = kompletter Ticker
       ------------------------------------------------------ */

    div.mod-ice-scoreticker > .ice-scoreticker__bar {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows:
            var(--ice-scoreticker-mobile-cta-height)
            auto;

        width: 100%;
        height: auto;
        min-height: 0;

        gap: 0;
        overflow: visible;
    }


    /* ------------------------------------------------------
       GAMECENTER-CTA
       ------------------------------------------------------ */

    div.mod-ice-scoreticker .ice-scoreticker__cta {
        position: relative;

        grid-column: 1;
        grid-row: 1;

        width: clamp(150px, 24vw, 190px);
        height: var(--ice-scoreticker-mobile-cta-height);
        min-height: 0;

        margin: 0;

        flex: none;

        overflow: visible;
        background: transparent;
        clip-path: none;
    }


    /* Rote Lasche mit einheitlicher 30°-Schräge */

    div.mod-ice-scoreticker .ice-scoreticker__cta-red {
        position: absolute;
        inset: 0;

        display: block;

        width: 100%;
        height: 100%;

        background: #D70A2D;

        clip-path: polygon(
            0 0,
            100% 0,
            calc(100% - var(--ice-scoreticker-mobile-cta-slant)) 100%,
            0 100%
        );

        transform: none;
    }


    /* Blaues Desktop-Endstück entfällt */

    div.mod-ice-scoreticker .ice-scoreticker__cta-blue {
        display: none;
    }


    /* "zum" wird auf kleinen Screens nicht angezeigt */

    div.mod-ice-scoreticker .ice-scoreticker__cta-kicker {
        display: none;
    }


    /* ------------------------------------------------------
       GAMECENTER-Text
       ------------------------------------------------------ */

    div.mod-ice-scoreticker .ice-scoreticker__cta-content {
        position: absolute;
        inset: 0;

        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;
        height: 100%;

        box-sizing: border-box;

        padding:
            5px
            calc(var(--ice-scoreticker-mobile-cta-slant) + 8px)
            5px
            8px;

        text-align: center;

        transform: none;
    }


    div.mod-ice-scoreticker .ice-scoreticker__cta-title {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;

        width: 100%;
        margin: 0;

        color: #ffffff;

        font-size: 12px;
        line-height: 1;

        text-align: center;
        white-space: nowrap;
    }


    div.mod-ice-scoreticker .ice-scoreticker__cta-title > span {
        display: inline;
    }


    /* ------------------------------------------------------
       Eigentlicher Ticker darunter über die volle Breite
       ------------------------------------------------------ */

    div.mod-ice-scoreticker .ice-scoreticker__ticker {
        grid-column: 1;
        grid-row: 2;

        width: 100%;
        min-width: 0;

        margin: 0;
    }
}


/* =========================================================
   QUELLE: components/homepage.css
   ========================================================= */

/* =========================================================
   HOMEPAGE – zentrale Inhaltsbreite
   ========================================================= */

.ice-homepage > .uk-container {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    box-sizing: border-box;
}

/* =========================================================
   HOMEPAGE – Main und Sidebar
   ========================================================= */

.ice-home-row-content > .uk-grid {
    margin-left: 0;
    column-gap: 20px;
    row-gap: 0;
}

.ice-home-row-content > .uk-grid > * {
    min-width: 0;
    padding-left: 0;
}


/* Unterhalb Desktop: Main und Sidebar untereinander */
@media (width < 1200px) {

    .ice-home-row-content > .uk-grid {
        column-gap: 0;
        row-gap: 20px;
    }

    .ice-home-row-content > .uk-grid > .uk-grid-margin {
        margin-top: 0;
    }
}

/*.ice-home-hero,
.ice-home-main,
.ice-home-sidebar {
    outline: 2px solid red;
    outline-offset: -2px;
}

.ice-home-row-hero,
.ice-home-row-content {
    outline: 2px solid blue;
    outline-offset: -4px;
}*/

/* =========================================================
   HOMEPAGE – Sidebar
   ========================================================= */

/* =========================================================
   GEMEINSAME SIDEBAR
   ========================================================= */

.ice-shared-sidebar {
    width: 100%;
    min-width: 0;
	max-width: none;
    margin-inline: 0;
}

.ice-shared-sidebar .ice-home-sidebar-item {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin-inline: 0;
}

.ice-shared-sidebar .ice-calovo-box {
    width: 100%;
    max-width: none;
}

.ice-shared-sidebar .ice-home-sidebar-media,
.ice-shared-sidebar .ice-home-sidebar-media > a {
    display: block;
    width: 100%;
}

.ice-shared-sidebar .ice-home-sidebar-media img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}
.ice-shared-sidebar > .uk-container,
.ice-shared-sidebar .uk-grid {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

.ice-shared-sidebar .uk-grid {
    margin-left: 0;
}

.ice-shared-sidebar .uk-grid > * {
    min-width: 0;
    padding-left: 0;
}
/* =========================================================
   HOMEPAGE – Home-of-Heroes-Banner
   30°-System gemäß ICE-Design
   ========================================================= */

.ice-home-heroes-banner {
    /*
     * Horizontale Verschiebung =
     * vertikale Höhe × tan(30°)
     * tan(30°) ≈ 0.57735
     */
    --ice-heroes-cut-y: clamp(18px, 3vw, 48px);
    --ice-heroes-cut-x: clamp(10.39px, 1.73205vw, 27.71px);

    display: block;
    width: 100%;
    max-width: 100%;
    overflow: hidden;

    clip-path: polygon(
        var(--ice-heroes-cut-x) 0,
        100% 0,
        100% calc(100% - var(--ice-heroes-cut-y)),
        calc(100% - var(--ice-heroes-cut-x)) 100%,
        0 100%,
        0 var(--ice-heroes-cut-y)
    );
}

.ice-home-heroes-banner .el-link,
.ice-home-heroes-banner picture,
.ice-home-heroes-banner img {
    display: block;
    width: 100%;
    max-width: 100%;
}

.ice-home-heroes-banner img {
    height: auto;
}


/* =========================================================
   QUELLE: components/menu.css
   ========================================================= */

/* =========================================================
   DJ-MegaMenu: Typografie & Branding
   ========================================================= */

/* Hauptmenü – Ebene 1 */
.ice-main-menu .dj-megamenu > li > a.dj-up_a {
    font-family: "Rigid Square", sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Dropdowns – Ebene 2+ */
.ice-main-menu .dj-megamenu ul.dj-submenu > li > a {
    font-family: "Rigid Square", sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}


/* =========================================================
   Desktop-Menü – UIkit @m und größer
   ========================================================= */

@media (width >= 960px) {

    div.ice-main-menu {
        display: block;
        width: 100%;
        max-width: none;
        margin: 0;
    }

    .ice-main-menu ul.dj-megamenu {
        display: flex;
        justify-content: center;
        align-items: center;

        width: 100%;
        max-width: none;

        margin: 0;
        padding-left: 0;

        float: none;
        transform: none;
    }
}


/* =========================================================
   Mobile Schnellnavigation – unter UIkit @m
   ========================================================= */

@media (width < 960px) {

	/* Quicknav blockiert nur dort Klicks, wo tatsächlich Links liegen */
.tm-header-mobile ul.ice-mobile-quicknav.uk-navbar-nav {
    pointer-events: none;
}

.tm-header-mobile ul.ice-mobile-quicknav.uk-navbar-nav > li > a {
    pointer-events: auto;
}

/* Das echte Builder-Logo – ID, keine Klasse */
.tm-header-mobile #ice-mobile-logo,
.tm-header-mobile #ice-mobile-logo > a {
    pointer-events: auto;
}

    .tm-header-mobile {
        --ice-mobile-nav-height: 38px;
        --ice-mobile-toggle-width: 42px;
        --ice-mobile-nav-bg: #071a36;
    }


    /* -----------------------------------------------------
       Grundstruktur
       ----------------------------------------------------- */

    .tm-header-mobile .uk-navbar {
        position: static;
        flex-wrap: nowrap;
        padding-bottom: var(--ice-mobile-nav-height);
    }

    .tm-header-mobile .uk-navbar-container {
        position: relative;
        isolation: isolate;
    }

    /* Builder-Inhalte vor dem Hintergrund der Schnellnavigation */
    .tm-header-mobile .uk-navbar-right > .uk-navbar-item {
        z-index: 2;
    }


    /* -----------------------------------------------------
       Dunkelblaue Schnellnavigationsleiste
       ----------------------------------------------------- */

    .tm-header-mobile .uk-navbar-container::after {
        content: "";

        position: absolute;
        z-index: 1;

        right: 0;
        bottom: 0;
        left: 0;

        height: var(--ice-mobile-nav-height);
        background: var(--ice-mobile-nav-bg);

        pointer-events: none;
    }


    /* -----------------------------------------------------
       Schnellzugriffe: News / Spiele / Tabelle / Teams
       ----------------------------------------------------- */

    .tm-header-mobile ul.ice-mobile-quicknav.uk-navbar-nav {
        position: absolute;
        z-index: 3;

        right: var(--ice-mobile-toggle-width);
        bottom: 0;

        display: flex;
        align-items: center;
        justify-content: flex-end;

        height: var(--ice-mobile-nav-height);

        margin: 0;
        padding: 0;
    }

    .tm-header-mobile .ice-mobile-quicknav.uk-navbar-nav > li > a {
        display: flex;
        align-items: center;
        justify-content: center;

        height: var(--ice-mobile-nav-height);
        min-height: var(--ice-mobile-nav-height);

        padding: 0 13px;

        font-family: "Rigid Square", sans-serif;
        font-size: 12px;
        font-weight: 700;
        line-height: 1;

        color: #fff;
        text-transform: uppercase;
    }


    /* -----------------------------------------------------
       DJ-MegaMenu Mobile Button
       Nur Position und verfügbarer Platz.
       Die komplette Optik kommt aus dem DJ-Mobile-Theme.
       ----------------------------------------------------- */

    .tm-header-mobile .uk-navbar-right > .ice-mobile-dj-button.uk-navbar-item {
        position: absolute;
        z-index: 4;

        right: 0;
        bottom: 0;

        flex: 0 0 var(--ice-mobile-toggle-width);

        width: var(--ice-mobile-toggle-width);
        height: var(--ice-mobile-nav-height);
        min-width: var(--ice-mobile-toggle-width);
        min-height: 0;

        margin: 0;
        padding: 0;

        pointer-events: none;
    }

    .tm-header-mobile .uk-navbar-right > .ice-mobile-dj-button.uk-navbar-item
    .dj-mobile-open-btn {
        pointer-events: auto;
    }

    .tm-header-mobile .ice-mobile-dj-button .uk-panel {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }

    /* DJ erzeugt innerhalb des Modul-Wrappers einen zusätzlichen Container.
       Auch dieser muss den 42x38-Slot vollständig ausfüllen, damit der
       Hamburger tatsächlich vertikal zentriert werden kann. */
    .tm-header-mobile .ice-mobile-dj-button > .dj-megamenu-offcanvas {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
    }
}


/* =========================================================
   Schnellnavigation – unter UIkit @s kompakter
   ========================================================= */

@media (width < 640px) {

    .tm-header-mobile .ice-mobile-quicknav.uk-navbar-nav > li > a {
        padding-inline: 6px;
        font-size: 10px;
    }
}


/* =========================================================
   Sehr schmale Geräte – Quicknav stufenweise reduzieren
   ========================================================= */

/* Zuerst NEWS entfernen. */
@media (width < 560px) {

    .tm-header-mobile ul.ice-mobile-quicknav.uk-navbar-nav > li:first-child {
        display: none;
    }
}

/* Auf sehr schmalen Displays zusätzlich TEAMS entfernen.
   SPIELE und TABELLE bleiben als wichtigste Schnellzugriffe erhalten. */
@media (width < 460px) {

    .tm-header-mobile ul.ice-mobile-quicknav.uk-navbar-nav > li:last-child {
        display: none;
    }
}


/* =========================================================
   QUELLE: components/sprache.css
   ========================================================= */

/* ==========================================================
   FaLang Sprachumschalter – Desktop: 2 × 2 Grid
   Anmerkung: .uk-subnav/.uk-nav Resets via UIkit-Kaskade gelöst
   ========================================================== */
@media (min-width: 960px) {
    .ice-language-switcher-desktop {
        width: max-content;
    }

    /* Höhere Spezifität durch Element-Kette statt !important */
    div.ice-language-switcher-desktop ul {
        display: grid;
        grid-template-columns: repeat(2, max-content);
        gap: 8px 6px;
        justify-content: start;
        align-items: center;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    div.ice-language-switcher-desktop li {
        margin: 0;
        padding: 0;
    }

    .ice-language-switcher-desktop a {
        display: block;
        line-height: 0;
    }

    /* UIkit-Bildbeschränkungen ohne Brechstange überschreiben */
    .ice-language-switcher-desktop img,
    .ice-language-switcher-desktop a img {
        display: block;
        width: 24px;
        height: auto;
        max-width: none;
    }
}

/* ==========================================================
   FaLang Advanced Dropdown – Mobile Header
   ========================================================== */

@media (width < 960px) {

    .tm-header-mobile .ice-language-switcher-mobile {
        --ice-lang-width: 34px;
        --ice-lang-row-height: 28px;
        --ice-lang-flag-width: 20px;

        position: relative;
        width: var(--ice-lang-width);
        min-width: var(--ice-lang-width);
        margin: 0;
        padding: 0;
        z-index: 20;
    }


    /* -----------------------------------------------------
       Wrapper
       ----------------------------------------------------- */

    .tm-header-mobile .ice-language-switcher-mobile .uk-panel,
    .tm-header-mobile .ice-language-switcher-mobile .mod-languages,
    .tm-header-mobile .ice-language-switcher-mobile form {
        position: relative;
        width: var(--ice-lang-width);
        min-width: var(--ice-lang-width);
        margin: 0;
        padding: 0;
        overflow: visible;
    }


    /* -----------------------------------------------------
       Aktive Sprache
       ----------------------------------------------------- */

    .tm-header-mobile
    .ice-language-switcher-mobile
    .mod-languages.advanced-dropdown
    a.langChoose {
        display: flex;
        align-items: center;
        justify-content: space-between;

        width: var(--ice-lang-width);
        min-width: var(--ice-lang-width);
        height: var(--ice-lang-row-height);
        box-sizing: border-box;

        margin: 0;
        padding: 4px 3px;

        background: transparent;
        background-image: none;
        border: 0;
        border-radius: 0;
        box-shadow: none;

        line-height: 1;
        text-decoration: none;
    }


    /* Plugin-Pseudo-Elemente entfernen */

    .tm-header-mobile
    .ice-language-switcher-mobile
    a.langChoose::before,

    .tm-header-mobile
    .ice-language-switcher-mobile
    a.langChoose::after {
        content: none;
        display: none;
    }


    /* -----------------------------------------------------
       Alle Flaggen identisch groß
       ----------------------------------------------------- */

    .tm-header-mobile
    .ice-language-switcher-mobile
    .langChoose img,

    .tm-header-mobile
    .ice-language-switcher-mobile
    ul.lang-inline > li > a > img {
        display: block;

        width: var(--ice-lang-flag-width);
        height: auto;
        max-width: none;

        margin: 0;
        padding: 0;

        background: transparent;
        border: 0;
    }


    /* -----------------------------------------------------
       Pfeil innerhalb des aktiven Feldes
       ----------------------------------------------------- */

    .tm-header-mobile
    .ice-language-switcher-mobile
    .langChoose .caret {
        display: block;
        flex: 0 0 auto;

        width: 0;
        height: 0;

        margin: 0;
        padding: 0;

        background: transparent;

        border-left: 3px solid transparent;
        border-right: 3px solid transparent;
        border-top: 4px solid #ffffff;
        border-bottom: 0;
    }


    /* -----------------------------------------------------
       Dropdown
       ----------------------------------------------------- */

    .tm-header-mobile
    .ice-language-switcher-mobile
    ul.lang-inline {
        position: absolute;
        z-index: 30;

        top: var(--ice-lang-row-height);
        left: 0;

        display: none;
        flex-direction: column;

        width: var(--ice-lang-width);
        min-width: var(--ice-lang-width);

        margin: 0;
        padding: 0;

        background: #00437A;
        border: 0;
        border-top: 1px solid #ffffff;
        box-shadow: 0 6px 14px rgb(0 0 0 / 20%);

        list-style: none;
    }


    /* FaLang-JS öffnet das Dropdown */

    .tm-header-mobile
    .ice-language-switcher-mobile
    ul.lang-inline.displayed {
        display: flex;
    }


    /* Zusätzlich Tastatur-/Touch-Fokus unterstützen */

    .tm-header-mobile
    .ice-language-switcher-mobile
    .mod-languages.advanced-dropdown:focus-within
    ul.lang-inline {
        display: flex;
        height: auto;
        opacity: 1;
    }


    /* -----------------------------------------------------
       Einzelne Sprachoptionen
       ----------------------------------------------------- */

    .tm-header-mobile
    .ice-language-switcher-mobile
    ul.lang-inline > li {
        width: 100%;

        margin: 0;
        padding: 0;

        line-height: 0;
    }

    .tm-header-mobile
    .ice-language-switcher-mobile
    ul.lang-inline > li + li {
        border-top: 1px solid #ffffff;
    }

    .tm-header-mobile
    .ice-language-switcher-mobile
    ul.lang-inline > li > a {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;
        min-height: var(--ice-lang-row-height);
        box-sizing: border-box;

        margin: 0;
        padding: 4px 3px;

        background: #00437A;
        line-height: 0;
    }
}


/* =========================================================
   QUELLE: components/statische_seiten.css
   ========================================================= */

/* Design für Statische Seiten */


:root{
  --ice-blue: #00437a;
  --text: #0b1b2b;
  --muted: #4b5b6b;
  --bg-tint: rgba(245,247,250,.9); /* hellblau außen */
  --card-bg: #ffffff;             /* weiß innen */
  --radius: 0px;
  --gap: 16px;
  --shadow: 0 6px 24px rgba(0,0,0,.06);
}

/* Grundtypografie */
.ice-contacts, .ice-honours{font-family: roboto, system-ui, -apple-system, Segoe UI, Ubuntu, "Helvetica Neue", Arial, sans-serif;color:var(--text)}
.ice-contacts h1, .ice-honours h1{font-size:clamp(1.6rem,2.5vw,2.2rem);margin:0 0 12px;color:var(--ice-blue);font-weight:bold}
.ice-contacts h2, .ice-honours h2{font-size:clamp(1.2rem,2vw,1.6rem);margin:0 0 12px;color:var(--ice-blue);font-weight:bold}
.ice-contacts h3, .ice-honours h3{font-size:1rem;margin:0 0 6px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-weight:bold}

/* === ORIGINALER RAND (hellblau außen) === */
.ice-contacts__wrap, .ice-honours__wrap, .ice-handson__wrap {position:relative;background:var(--bg-tint);border-radius:var(--radius);padding:20px;overflow:hidden}
/* Optional: leichtes BG-Bild wie bei Organisation */
.ice-contacts__wrap::before {content:"";position:absolute;inset:0;z-index:0;opacity:.08;background:url('/images/pages/stats/organisation.jpg') center/cover no-repeat}
.ice-honours__wrap::before{content:"";position:absolute;inset:0;z-index:0;opacity:.08;background:url('/images/pages/stats/modus.jpg') center/cover no-repeat}
.ice-handson__wrap::before{content:"";position:absolute;inset:0;z-index:0;opacity:.08;background:url('/images/pages/stats/handson.jpg') center/cover no-repeat}
.ice-contacts__inner, .ice-honours__inner, .ice-handson__inner {position:relative;z-index:1}

/* Karten (weiße Innenflächen) */
.ice-card{background:var(--card-bg);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px}
.stack{display:grid;gap:var(--gap)}

/* ===== Organisation (Contacts) ===== */
.grid-2{display:grid;gap:var(--gap);grid-template-columns:1fr}
@media (min-width:720px){.grid-2{grid-template-columns:1fr 1fr}}
.kv{margin:0;padding:0;list-style:none}
.kv li{display:grid;grid-template-columns:180px 1fr;align-items:start;gap:8px;padding:10px 0;border-bottom:1px solid #eef2f6}
.kv li strong{color:var(--ice-blue)}
.kv li:last-child{border-bottom:none}
.contact{margin:8px 0 0;padding:0;list-style:none}
.contact li{display:flex;gap:8px;align-items:flex-start;padding:6px 0}
.muted{color:var(--muted)}
.office-logo{max-width:min(40vw,180px);height:auto}

/* ===== Honours (Champions/MVP/Youngstars) ===== */
.ice-honours{margin:0}
/* Tabelle als weiße Karte im hellblauen Umfeld (gleicht .ice-card optisch an) */
.ice-honours .ice-table{width:100%;border-collapse:collapse;background:var(--card-bg);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.ice-honours .ice-table th,.ice-honours .ice-table td{padding:.75rem 1rem;border-bottom:1px solid #e5e9ee;text-align:left}
.ice-honours .ice-table thead th{background:var(--ice-blue);color:#fff}
.ice-honours .ice-table tr:hover td{background:rgba(0,67,122,.05)}
.ice-honours .ice-table a{color:var(--ice-blue);text-decoration:none}
.ice-honours .ice-table a:hover{text-decoration:underline}
.ice-honours .ice-table tfoot td{font-size:.9rem;color:var(--muted);background:#f7f9fb}

/* Mobile: horizontales Scrollen, damit Struktur/Spalten erhalten bleiben */
.ice-honours__inner .ice-table-wrap{overflow-x:auto}
@media (max-width:700px){.ice-honours__inner .ice-table{min-width:640px}}

	/* Einheitlicher H2- und H3-Style für alle Info-Seiten */
	.ice-contacts__wrap h2,
	.ice-honours__wrap h2,
	.ice-contacts__wrap h3,
	.ice-honours__wrap h3 {
		color: var(--ice-blue);
		font-weight: 700;
	}

	.ice_mode h1 {
		font-size: clamp(1.6rem, 2.5vw, 2.2rem);
		margin: 0 0 12px;
		color: var(--ice-blue);
		font-weight: bold;
	}

	/* H2 im Wrapper oben größer und mit Abstand */
	.ice-contacts__wrap>.ice-contacts__inner>section h2:first-child,
	.ice-honours__wrap>.ice-honours__inner>section h2:first-child {
		font-size: 1.6rem;
		margin-bottom: 1rem;
	}


/* =========================================================
   QUELLE: components/template.css
   ========================================================= */

/* =========================================================
   INHALTSSEITEN – zentrale Inhaltsbreite
   ========================================================= */

/* Calovo in der gemeinsamen Sidebar immer volle verfügbare Breite */
.ice-shared-sidebar-layout .ice-calovo-box {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

/* Škoda sauber zentrieren */
.ice-shared-sidebar-layout .ice-sidebar-skoda {
    display: flex;
    justify-content: center;
    width: 100%;
}

.ice-shared-sidebar-layout .ice-sidebar-skoda img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-inline: auto;
}

/* Gemeinsame Sidebar */
.ice-shared-sidebar-layout .ice-calovo-box {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

.ice-shared-sidebar-layout .ice-sidebar-skoda {
    width: 100%;
    text-align: center;
}

.ice-shared-sidebar-layout .ice-sidebar-skoda img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-inline: auto;
}


/* 640–1199 px:
   Sidebar liegt unter dem Hauptinhalt → 1/3 + 2/3 */
@media (min-width: 640px) and (max-width: 1199px) {

    .uk-grid.ice-shared-sidebar-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
        gap: 24px;
        margin-left: 0;
        align-items: start;
    }

    .uk-grid.ice-shared-sidebar-layout > div {
        width: auto;
        max-width: none;
        min-width: 0;
        padding-left: 0;
        margin-top: 0;
    }
}


/* =========================================================
   QUELLE: components/variables.css
   ========================================================= */

/* =========================================================
   ICE – zentrales Layout-Raster
   ========================================================= */

:root {
    --ice-page-gap: 16px;
}

/* =========================================================
   INHALTSSEITEN – Breite Home-of-Heroes-Banner
   ========================================================= */

.ice-content-page .ice-content-banner {
    width: 100%;
    margin-inline: auto;
    margin-top: -20px;
	margin-bottom: -15px;
}

@media (max-width: 1450px) {
    .ice-content-page .ice-content-banner {
        width: 95%;
		margin-top: -20px;
		margin-bottom: -15px;
    }
}

@media (max-width: 1350px) {
    .ice-content-page .ice-content-banner {
        width: 90%;
		margin-top: -20px;
		margin-bottom: -15px;
    }
}

@media (width < 1200px) {
    .ice-content-page .ice-content-banner {
        width: 85%;
		margin-top: -15px;
		margin-bottom: -5px;
    }
}
@media (width < 960px) {
    .ice-content-page .ice-content-banner {
        width: 85%;
		margin-top: -30px;
		margin-bottom: -5px;
    }
}
@media (width < 640px) {
    .ice-content-page .ice-content-banner {
        width: 100%;
        margin-top: 0;
    }
}


/* =========================================================
   Main + Sidebar
   Abstand ausschließlich zwischen den beiden Spalten
   ========================================================= */

.ice-home-row-content > .uk-grid,
.ice-content-row > .uk-grid {
    margin-left: 0;
    column-gap: var(--ice-page-gap);
    row-gap: 0;
}

.ice-home-row-content > .uk-grid > *,
.ice-content-row > .uk-grid > * {
    min-width: 0;
    padding-left: 0;
}


/* Unter 1200 px: Main und Sidebar untereinander */

@media (width < 1200px) {

    .ice-home-row-content > .uk-grid,
    .ice-content-row > .uk-grid {
        column-gap: 0;
        row-gap: var(--ice-page-gap);
    }

    .ice-home-row-content > .uk-grid > .uk-grid-margin,
    .ice-content-row > .uk-grid > .uk-grid-margin {
        margin-top: 0;
    }
}


/* =========================================================
   Gemeinsame Sidebar – Sublayout
   ========================================================= */

/*
 * Am SUBLAYOUT bzw. dessen Zeile:
 * Spaltenabstand = Keiner
 * Zeilenabstand  = Keiner
 *
 * CSS-Klasse der Zeile:
 * ice-shared-sidebar-grid
 */

.ice-shared-sidebar-grid > .uk-grid {
    margin-left: 0;
    column-gap: var(--ice-page-gap);
    row-gap: var(--ice-page-gap);
}

.ice-shared-sidebar-grid > .uk-grid > * {
    min-width: 0;
    padding-left: 0;
}

.ice-shared-sidebar-grid > .uk-grid > .uk-grid-margin {
    margin-top: 0;
}

/* =========================================================
   GEMEINSAME SIDEBAR – Abstand zwischen gestapelten Modulen
   ========================================================= */

.ice-shared-sidebar
.uk-grid.uk-child-width-1-1 > .uk-grid-margin {
    margin-top: var(--ice-page-gap);
}
/* =========================================================
   ICE – iOS/FaLang Mobile Language Switcher Override
   Stand: 2026-08-31
   Dieses Addendum ganz ans Ende der bestehenden custom.css hängen.
   Es ersetzt NICHT die bestehende Datei.
   ========================================================= */

@media (max-width: 959px) {

    /*
     * Der alte :focus-within-Fallback darf das Dropdown auf iOS
     * nicht offen halten, wenn unser JS es bereits geschlossen hat.
     */
    .tm-header-mobile
    .ice-language-switcher-mobile
    .mod-languages.advanced-dropdown:focus-within
    ul.lang-inline:not(.displayed) {
        display: none;
        height: 0;
        opacity: 0;
    }

    /*
     * Expliziter JS-Zustand für Touch/iOS.
     * custom.js setzt zusätzlich weiterhin .displayed.
     */
    .tm-header-mobile
    .ice-language-switcher-mobile
    .mod-languages.advanced-dropdown.ice-language-open
    ul.lang-inline {
        display: flex;
        height: auto;
        opacity: 1;
    }
}
/* =========================================================
   iPhone Portrait – Sprachumschalter über Header-Overlays
   ========================================================= */

@media (max-width: 639px) {

    .tm-header-mobile .ice-mobile-header-xs {
        position: relative;
        z-index: 20;
    }

    .tm-header-mobile .ice-mobile-header-xs
    .ice-language-switcher-mobile {
        position: relative;
        z-index: 100;
        pointer-events: auto;
    }

    .tm-header-mobile .ice-mobile-header-xs
    .ice-language-switcher-mobile .uk-panel,
    .tm-header-mobile .ice-mobile-header-xs
    .ice-language-switcher-mobile .mod-languages,
    .tm-header-mobile .ice-mobile-header-xs
    .ice-language-switcher-mobile form,
    .tm-header-mobile .ice-mobile-header-xs
    .ice-language-switcher-mobile a.langChoose {
        position: relative;
        z-index: 101;
        pointer-events: auto;
    }

    .tm-header-mobile .ice-mobile-header-xs
    .ice-language-switcher-mobile ul.lang-inline {
        z-index: 102;
    }
}