/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Bold.ttf') format('truetype');
    font-weight:bold;
}
@font-face {
    font-family: 'Cousine';
    src: url('../fonts/Cousine-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'DroidSansMono';
    src: url('../fonts/DroidSansMono.ttf') format('truetype');
}

@font-face {
    font-family: 'MADEOuterSans';
    src: url('../fonts/MADE_Outer_Sans.otf') format('truetype');
}

@font-face {
    font-display: swap;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/Inter-Regular.ttf') format('truetype');
}


@font-face {
    font-display: swap;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/Inter-Bold.ttf') format('truetype');
}

* {
    -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
    margin:0;
    padding:0;
    box-sizing:border-box;
    border:0;
}

html {
    scroll-behavior: smooth;
    min-height:100%;
    height:100%;
    width:100%;
}

body {
    -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
    -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
    -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */
    /* App background is rendered by the #app-bg-fixed pseudo layer below
       instead of `background: var(--bgimg)`. The original used
       background-attachment: fixed (the `fixed` keyword inside --bgimg),
       which WKWebView composites unreliably — scroll far down a tall screen
       and the GPU drops the background layer, leaving the black fallback
       until you scroll back up. A solid colour here + a viewport-pinned
       pseudo-element avoids that bug. */
    background: var(--bg);
    font-family:  var(--font-secondary);
    font-size:15px;
    min-height:100%;
    font-weight: 400;
    height:100%;
    width:100%;
    color:var(--app-text, #ffffff);
    overflow:auto;
}

/* === iOS-safe fixed app background ========================================
   Viewport-pinned image shared by the base page (body) and every layered
   screen (.bg_weiss). position:fixed keeps the compositor from discarding it
   on long scrolls — the bug that made the background flash to black. The
   z-index:-1 sits it behind in-flow content but above each host element's
   solid fallback, so layered screens stay opaque (they still hide whatever
   is behind them). */
:root {
    /* Der EINE App-Verlauf — Referenz fuer body::before/.bg_weiss::before UND
       die Header/Submenu-Ausschnitte (P2 Header-Vereinheitlichung 4.2.3).
       light.css ueberschreibt die Variable im Light-Mode. */
    --kof-app-verlauf: linear-gradient(180deg, #000000 0%, var(--bg-second, #780AAA) 100%);
}

body::before,
.bg_weiss::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--kof-app-verlauf);
    z-index: -1;
    pointer-events: none;
}

body::-webkit-scrollbar {
    display: none;
}

.iOS_box {
    background-color:#231B2A;
    /*height:20px;*/
}


header, .header {
    font-size: 1rem;
    padding:10px;

    background-color:#231B2A;
    color:var(--app-text, #ffffff);
    position:fixed;
    display:block;
    width:100%;
    line-height:48px;
    vertical-align:middle;
    top:0;
    left:0;
    margin:auto;
    height:48px;
    z-index:999;
}

.iOS_shift .header, .iOS_shift header {
    padding-top: calc(env(safe-area-inset-top) + 10px) !important;
    height: calc(48px + env(safe-area-inset-top)) !important;
}

/* LoginHeader is the de-facto top header on almost every content/*.html page.
   It's not position:fixed, just normal flow at the top of #main_content, so
   the iOS status bar / notch overlays its inner content. Pushing the inner
   content down with padding-top grows the header instead of squishing it. */
.iOS_shift .LoginHeader {
    padding-top: env(safe-area-inset-top) !important;
}

/* Side menu overlay (position:fixed, top:0). Its inner padding (1.5rem) isn't
   enough to clear the notch, so push the whole content block down. */
.iOS_shift #sidemenu_content {
    padding-top: calc(1.5rem + env(safe-area-inset-top)) !important;
}

/* Startseite top bar (burger / logo / calendar / message). Its 20px padding
   isn't enough to clear the notch on iOS. */
.iOS_shift .headArea {
    padding-top: calc(20px + env(safe-area-inset-top)) !important;
}

/* === Sticky top bar across vertical-swiper pages ============================
   Swiper translates its wrapper via transform, so position:sticky never
   triggers. main.js drives a requestAnimationFrame loop that reads the
   wrapper's computed transform each frame and applies its inverse to the
   elements below, keeping them pinned while content scrolls underneath.

   Many content pages ship their own .submenu and .LoginHeader overrides
   (finanzen.css, transfers.css, team.css, spieler.css, …) that load AFTER
   index.css and use the same single-class specificity. To win, the rules
   below are scoped with `.iOS_shift` (specificity 0,2,0 vs page CSS 0,1,0)
   so they consistently override the page-level definitions on iOS without
   altering anything on web/Android. */

.iOS_shift .LoginHeader,
.iOS_shift .headArea {
    position: relative;
    z-index: 50;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    /* P2 Header-Vereinheitlichung (4.2.3): statt Blur der App-Verlauf als
       pixelgenauer Ausschnitt (size = 100vh wie .bg_weiss::before, Position 0 0
       am oberen Pin-Punkt) — optisch "transparent", aber durchscrollender
       Content verschwindet dahinter. KEIN background-attachment:fixed
       (WKWebView-Falle) und kein Blur (GPU-teuer, Content schien durch). */
    background-color: transparent !important;
    background-image: var(--kof-app-verlauf);
    background-size: 100% 100vh;
    background-position: 0 0;
    background-repeat: no-repeat;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    will-change: transform;
}

.iOS_shift .headerBG {
    will-change: transform;
}

.iOS_shift .submenu {
    position: relative;
    z-index: 40;
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    /* P2 (4.2.3): App-Verlauf-Ausschnitt statt Blur; die background-position
       fuehrt _kof_header_ausschnitt_sync (main.js) live nach (-rect.top),
       da Submenus je nach Screen erst tiefer im Flow sitzen und dann pinnen. */
    background-color: transparent !important;
    background-image: var(--kof-app-verlauf);
    background-size: 100% 100vh;
    background-position: 0 0;
    background-repeat: no-repeat;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    will-change: transform;
}

/* === Startseite: natives Scrollen statt Swiper-Vertikal =====================
   Die Startseite (#main_content in .main-swiper-container) scrollt nativ; der
   vertikale Swiper wird in startseite.html nicht mehr initialisiert. Swiper-
   Reststyles (overflow:hidden, height:100%, transform/transition auf dem
   Wrapper) werden neutralisiert. Der Header .headArea pinnt per
   position:sticky statt ueber den rAF-Treiber -> kein Momentum-Glitch. */
.main-swiper-container {
    height: 100%;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
}
.main-swiper-container > .swiper-wrapper {
    display: block !important;
    height: auto !important;
    -webkit-transform: none !important;
    transform: none !important;
    -webkit-transition: none !important;
    transition: none !important;
}
.main-swiper-container > .swiper-wrapper > #main_content {
    height: auto !important;
}
.iOS_shift .main-swiper-container .headArea {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0;
}

/* === Phase 2: Layer ohne Image-Header -> natives Scrollen ===================
   init_layer() vergibt .native-scroll an alle Nicht-Image-Header-Layer (und
   initialisiert dort KEINEN Swiper). Container scrollt nativ, Swiper-Reststyles
   werden neutralisiert. Header + Submenu pinnen per position:sticky; das
   Submenu bekommt seinen top-Offset (Header-Hoehe) inline aus init_layer/
   update_layer gesetzt. Image-Header-Screens haben KEIN .native-scroll und
   bleiben unveraendert auf Swiper+rAF. */
.layer-swiper-container.native-scroll {
    height: 100%;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
}
.layer-swiper-container.native-scroll > .swiper-wrapper {
    display: block !important;
    height: auto !important;
    -webkit-transform: none !important;
    transform: none !important;
    -webkit-transition: none !important;
    transition: none !important;
}
.layer-swiper-container.native-scroll > .swiper-wrapper > .layer-swiper-slide {
    height: auto !important;
    /* Scroll 2.0 (4.2.3): globaler Freiraum am Scroll-Ende JEDES nativen
       Screens — ersetzt die per-Screen padding-bottom-Handstaende. Screens
       mit Sonderbedarf ueberschreiben die Variable. */
    padding-bottom: var(--kof-scroll-ende, calc(28px + env(safe-area-inset-bottom))) !important;
    box-sizing: border-box;
}

/* Scroll 2.0 (4.2.3): Bild-Header-Screens laufen jetzt im force-native-scroll-
   Pfad (jugendspieler-Blaupause, hochgezogen aus jugendspieler.css). Das
   Bildband haengt FIX hinter dem Back-Header, der Content scrollt dahinter
   durch; Header/Submenu pinnen sticky (Regeln oben). */
.iOS_shift .layer-swiper-container.native-scroll .headerBG {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 40;
}
.iOS_shift .layer-swiper-container.native-scroll .headerBG ~ .LoginHeader {
    background-color: transparent !important;
    background-image: none !important;   /* Bildband zeigt durch (bis P3-Heros) */
}
.iOS_shift .layer-swiper-container.native-scroll .LoginHeader,
.iOS_shift .layer-swiper-container.native-scroll .headArea {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0;
    z-index: 50;
}
.iOS_shift .layer-swiper-container.native-scroll .submenu {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0;
    z-index: 40;
}
/* P3 (4.2.3): Zusatz-Hero (Spielerpass, Spielbericht-Matchup) pinnt unter dem
   Submenu; top setzt kof_submenu_sync, den Verlauf-Ausschnitt der JS-Sync. */
.iOS_shift .layer-swiper-container.native-scroll .kof-sticky-verlauf {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 150px;
    z-index: 30;
}

/* === Natives Image-Header-Layout (verein_light) ============================
   Wie der In-App-Vereinsscreen, aber nativ (force-native -> kein Swiper/rAF):
   das .headerBG-Bild bleibt fix hinter dem Kopf, .oben (Wappen/Name) + Submenu
   stehen statisch oben, und NUR die aktive Detail-Box (#verein_details/_saison/
   _kader) scrollt. Realisiert als Flex-Spalte ueber die volle Layer-Hoehe -
   keine magischen vh-Werte, Submenu-Format bleibt (kein verein.css). */
.layer-swiper-container.native-imageheader {
    height: 100%;
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
}
.layer-swiper-container.native-imageheader > .swiper-wrapper {
    display: flex !important;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: auto !important;
    -webkit-transform: none !important;
    transform: none !important;
    -webkit-transition: none !important;
    transition: none !important;
}
.layer-swiper-container.native-imageheader > .swiper-wrapper > .layer-swiper-slide {
    display: flex !important;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: auto !important;
}
/* Bild bleibt absolute (top:0 aus index.css), nur hinter den Content geschoben. */
.native-imageheader .headerBG {
    z-index: -1;
}
/* #verein als Flex-Spalte: Kopf/Submenu mit natuerlicher Hoehe, Detailboxen
   fuellen den Rest und scrollen intern. */
.native-imageheader #verein {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}
.native-imageheader #verein > .oben,
.native-imageheader #verein > .submenu {
    flex: 0 0 auto;
}
.native-imageheader #verein > #verein_details,
.native-imageheader #verein > #verein_saison,
.native-imageheader #verein > #verein_kader {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Image-header pages: the .headerBG image already paints a full-width opaque
   band at the top, so the LoginHeader in front of it doesn't need its own
   tint — keep the LoginHeader transparent and let the image show through.
   Don't stretch its height: pages with .headerBG (verein, spieler, team, …)
   tune their own #spieler / #team `position: relative; top: <Nrem>` offsets
   against the image height, and forcing a min-height on the LoginHeader
   would push everything below it out of alignment. */
.iOS_shift .headerBG ~ .LoginHeader {
    background-color: transparent !important;
    background-image: none !important;   /* Bildband zeigt durch (bis P3-Heros) */
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* === Responsive image-header band ==========================================
   Cap headerBG at 20% of viewport height (plus iOS safe area) so it never
   dominates the screen on tall devices, but never let it exceed the original
   230px on huge layouts. Center the background image so it stays composed at
   any size. */
.iOS_shift .headerBG {
    height: calc(min(20vh, 230px) + env(safe-area-inset-top)) !important;
    width: 100%;
    background-size: cover !important;
    background-position: center !important;
}

/* === Transfers: kill the page-level #transfers top padding so the submenu
   docks directly below the header. transfers.css ships padding-top:20px
   which otherwise leaves a visible strip between header and submenu. */
.iOS_shift #transfers {
    padding-top: 0 !important;
}

/* === Jugendspieler hero name positioning ==================================
   By default the layout stacks the name well below the image: #team_jugendspieler
   sits 3em below LoginHeader, .oben .hauptzeile carries another 38px top
   padding, and .zeile_oben > .zeilen_infos a 3em top margin — total ~134px
   that push "Marcello L. De Alencar" past the image bottom. Collapse those
   offsets, stretch .oben to fill the image-band, and bottom-align the name
   so it lands on the player photo like Spielername does on the Spieler
   screen — with the same text shadow for legibility. */
.iOS_shift #team_jugendspieler {
    top: 0 !important;
}

.iOS_shift #team_jugendspieler .oben {
    /* P3-It.2 (4.2.3): Band-Fuell-Layout (min-height/flex/bottom-align)
       entfernt — kein Bildband mehr, .oben fliesst als Hero unterm Submenu. */
    text-align: center;
    padding: 6px 1em 0.4em;
    margin: 0;
}

.iOS_shift #team_jugendspieler .oben .zeile_oben {
    padding: 0 !important;
    width: 100%;
}

.iOS_shift #team_jugendspieler .oben .zeile_oben > .zeilen_infos {
    margin-top: 0 !important;
    text-align: center;
    width: 100% !important;
    max-width: none !important;
}

.iOS_shift #team_jugendspieler .oben .hauptzeile {
    padding-top: 0 !important;
    text-shadow: 1px 1px 3px black;
    color: var(--app-text, white);
    text-align: center;
}

/* "Jugendspieler" sub-label gets the same pill treatment as the VereinName
   badge on the Spieler screen — dark translucent box, white primary-font
   text. No text-shadow needed since the pill provides its own backdrop. */
.iOS_shift #team_jugendspieler .oben .zeilen_infos {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    width: 100% !important;
    max-width: none !important;
    margin-top: 0 !important;
}

.iOS_shift #team_jugendspieler .oben .nebenzeile {
    background: rgba(0, 0, 0, 0.4);
    border-radius: var(--border-radius-sm);
    line-height: 1;
    font-family: var(--font-primary);
    width: max-content;
    font-size: 10px;
    /* `!important` necessary — index.css and jugendspieler.css both set
       `.nebenzeile { color: var(--nebensatz) !important }` (gray) which
       otherwise wins. */
    color: var(--app-text, white) !important;
    padding: .4em .6em;
    margin: 0.5em auto 0;
    display: inline-block;
    text-shadow: none;
    text-align: center;
}

/* === Talent / "Erste Liga?" zeile inside the Info tab ======================
   jugendspieler.css gives every `.zeile` a `var(--dark2)` background so the
   talent panel reads as a chunky gray card. The user wants it transparent
   with white sub-text so the player photo + content blur through cleanly. */
.iOS_shift #team_jugendspieler_info .zeile {
    background: transparent !important;
    border-bottom: none !important;
}

.iOS_shift #team_jugendspieler_info .zeile .nebenzeile {
    color: var(--app-text, white) !important;
}

/* === Jugendspieler: Position / Stärke / Alter hero block ===================
   Mirrors the Spieler screen layout — three circle-graphics in a flex row.
   Spieler-specific CSS lives in spieler.css which is NOT loaded on the
   Jugendspieler page, so we duplicate the visual rules here (scoped to
   #team_jugendspieler so they don't leak to other pages). */
/* ===== Jugendspieler-Hero v4: Dossier-Stat-Strip (deckungsgleich zu spieler.css) ===== */
#team_jugendspieler .MidDetails {
    display: flex;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 18px;
    padding: 14px 4px;
    margin: 14px 0 10px;
}
#team_jugendspieler .MidDetails .position,
#team_jugendspieler .MidDetails .staerke,
#team_jugendspieler .MidDetails .alter {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    position: relative;
    padding: 2px 6px;
    text-align: center;
}
#team_jugendspieler .MidDetails .staerke::before,
#team_jugendspieler .MidDetails .alter::before {
    content: "";
    position: absolute; left: 0; top: 12%; bottom: 12%;
    width: 1px; background: rgba(255,255,255,0.1);
}
#team_jugendspieler .positionGraphic,
#team_jugendspieler .staerkeGraphic,
#team_jugendspieler .alterGraphic {
    height: 34px;
    line-height: 1;
    width: auto;
    margin: 0;
    background: none;
    border-radius: 0;
    font-family: "MADEOuterSans";
    font-size: 28px;
    color: var(--app-text, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}
#team_jugendspieler .positionGraphic { font-size: 22px; }
#team_jugendspieler .positionGraphic .very_small { font-size: 0.6em; opacity: 0.85; }
#team_jugendspieler .positionLabel,
#team_jugendspieler .staerkeLabel,
#team_jugendspieler .alterLabel {
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    font-family: "MADEOuterSans";
    font-size: 9px;
    color: var(--app-text, rgba(255,255,255,0.85));
    margin: 0;
}
#team_jugendspieler .positionLong,
#team_jugendspieler .staerkeLong,
#team_jugendspieler .alterLong {
    text-align: center;
    font-family: var(--font-secondary);
    font-size: 10.5px;
    color: var(--app-text, rgba(255,255,255,0.85));
    line-height: 1.3;
}

input, textarea {
    border: 1px solid var(--dark3);
    background-color: var(--dark2);
    padding:14px;
    border-radius:3px;
    color: var(--color-white);
    font-size:15px;
    margin: 5px auto;
    font-family: var(--font-secondary);
    letter-spacing:unset;
}

input {
    display:block;
}

/* Fokus-Fix (4.2.1): body traegt -webkit-user-select:none (Copy-Paste-Schutz).
   WKWebView verschluckt dadurch aber auch Taps IN Eingabefelder — Fokus
   brauchte mehrere Anlaeufe. Felder explizit wieder selektierbar machen. */
input, textarea, [contenteditable="true"] {
    -webkit-user-select: text;
    user-select: text;
}

.nameOK {
    border-style: solid !important;
    border-color: var(--buttongreen) !important;
    border-width: 1px !important;
}

.nameNOK {
    border-style: solid !important;
    border-color: red !important;
    border-width: 1px !important;
}

textarea {
    padding:8px;
    display:inline-block;
}

#SplashHeader {
    background-image: url("../img/kof_new_images/startscreen_login.png");
    background-repeat: no-repeat;
    width: 100%;
    height: 75vh;
    position: relative;
    background-size: cover;
    top: 0;
}

.SplashHeaderText {
    position: absolute;
    margin: 0 5%;
    top: 12vh;
    font-weight: normal;
    font-size: 28px;
    line-height: 36px;
    color: var(--app-text, white);
    /*text-transform: uppercase;*/
    text-align: left;
}

.SplashHeaderText p {
    padding: 0;
}

.StartNow {
    /* width: 90%; */
    height: 48px;
    background: #63FF9F;
    text-align: center;
    line-height: 48px;
    color: black;
    margin-top: 2.5em;
}

#InitialContent {
    position: relative;
    margin-top: 2%;
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
    /* font-family: DIN Alternate; */
    color: #F2F3F4;
    font-size:1rem;
    font-weight:400;
    line-height:22px;
    letter-spacing:0.2px;
}

.showLoginButton {
    /* width: 90%; */
    height: 48px;
    background: #1C2632;
    text-align: center;
    line-height: 48px;
    color: #63FF9F;
    margin-top: 1.5em;
}


#login {
    position: absolute;
    top: 3em;
    width: 92%;
    margin-left: 4%;
    height: 95vh;
}

.LoginHeader {
    line-height: 18px;
    display: flex;
    /* width: 112px; */
    color: var(--primary-color);
    margin-bottom: 2em;
    padding: 0 15px;
}

.ki__badge {
    background: var(--bg-magenta-opacity);
    color: var(--color-magenta);
    border-radius: 2px;
    padding: 1px 5px;
    line-height: 1;
    margin-left: 2px;
    font-family: var(--font-primary);
    font-size: 10px;
    /*text-transform: uppercase;*/
}

.primary-font {
    font-family: var(--font-primary);
}

.secondary-font {
    font-family: var(--font-secondary);
}

.regular {
    font-weight: 400;
}

.base__margin {
    margin: 0 5% !important;
}

.m-0 {
    margin: 0 !important;
}

.p-0 {
    padding: 0 !important;
}

.py-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.py-1 {
    padding-top: 1em !important;
    padding-bottom: 1em !important;
}

.py-2 {
    padding-top: 2em !important;
    padding-bottom: 2em !important;
}

.py-3 {
    padding-top: 3em !important;
    padding-bottom: 3em !important;;
}

.py-4 {
    padding-top: 4em !important;
    padding-bottom: 4em !important;;
}

.my-0 {
    margin-top: 0 !important;;
    margin-bottom: 0 !important;;
}

.my-1 {
    margin-top: 1em !important;;
    margin-bottom: 1em !important;;
}

.my-2 {
    margin-top: 2em !important;;
    margin-bottom: 2em !important;;
}

.my-3 {
    margin-top: 3em !important;;
    margin-bottom: 3em !important;;
}

.my-4 {
    margin-top: 4em !important;;
    margin-bottom: 4em !important;;
}

.mb-0 {
    margin-bottom: 0 !important;;
}

.mb-1 {
    margin-bottom: 1em !important;;
}

.mb-2 {
    margin-bottom: 2em !important;;
}

.mb-3 {
    margin-bottom: 3em !important;;
}

.mb-4 {
    margin-bottom: 4em !important;;
}

.mt-0 {
    margin-top: 0 !important;;
}

.mt-1 {
    margin-top: 1em !important;;
}

.mt-2 {
    margin-top: 2em !important;;
}

.mt-3 {
    margin-top: 3em !important;;
}

.mt-4 {
    margin-top: 4em !important;;
}


.pt-1 {
    padding-top: 1em !important;;
}

.pt-2 {
    padding-top: 2em !important;;
}

.pt-3 {
    padding-top: 3em !important;;
}

.pt-4 {
    padding-top: 4em !important;;
}

.pb-1 {
    padding-bottom: 1em !important;;
}

.pb-2 {
    padding-bottom: 2em !important;;
}

.pb-3 {
    padding-bottom: 3em !important;;
}

.pb-4 {
    padding-bottom: 4em !important;;
}

.font-12 {
    font-size: 12px !important;
}

.font-14 {
    font-size: 14px !important;
}

.green__headline--area {
    font-size: 10px;
    line-height: 1;
    font-family: var(--font-primary);
    background: var(--secondary-color);
    color: var(--color-white);
    padding: 10px;
    text-align: center;
    /*text-transform: uppercase;*/
    margin-bottom: 8px;
}

.violet__headline--area {
    font-size: 10px;
    line-height: 1;
    font-family: var(--font-primary);
    background: var(--secondary-color);
    color: var(--color-white);
    padding: 10px;
    text-align: center;
    /*text-transform: uppercase;*/
    margin-bottom: 8px;
}

.standard__headline--area {
    font-size: 10px;
    line-height: 1;
    font-family: var(--font-primary);
    background: var(--dark2);
    color: var(--color-white);
    padding: 10px;
    text-align: center;
    /*text-transform: uppercase;*/
    margin-bottom: 8px;
}

.transparent_headline--area {
    font-size: 10px;
    line-height: 1;
    font-family: var(--font-primary);
    background: transparent;
    color: var(--color-white);
    padding: 10px;
    text-align: center;
    /*text-transform: uppercase;*/
    margin-bottom: 8px;
}


/* Native scroll for the kalender: override Swiper's wrapper styles so the
   container behaves as a normal vertical scroll region. The list grows
   with content and the parent #kalender (flex-column, height:100vh) gives
   it a bounded viewport — so dragging past the first / last saisontag
   naturally stops at the edge. */
#kalender > .swiper-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    display: block !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    /* Cancel Swiper's positioning/transform legacy. */
    height: auto !important;
    width: 100%;
    /* Nur vertikal scrollen - kein leichtes Seitwaerts-Verschieben. */
    overflow-x: hidden;
    transform: none !important;
    -webkit-transform: none !important;
    z-index: auto;
}

/* Inside that scroll region each saisontag is a plain row, no longer the
   "fill the whole swiper viewport" slide that Swiper styles by default. */
#kalender .swiper-slide {
    width: 100% !important;
    height: auto !important;
    flex-shrink: 1 !important;
}

.max-content {
    width: max-content;
}

.calender-header {
    z-index: 1002;
    background: var(--bg);
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.CategoryCard {
    margin: 0 5% 20px;
    border-radius: var(--border-radius-md);
    background-repeat: no-repeat;
    background-position-x: 0;
    background-position-y: -38px;
    background-size: cover;

}

.Card1 {
    background-image: url("../img/kof_new_images/zentrale_wettbewerbe.png");
}

.Card2 {
    background-image: url("../img/kof_new_images/zentrale_club.png");
}

.Card3 {
    background-image: url("../img/kof_new_images/zentrale_transfers.png");
}

.Card4 {
    background-image: url("../img/kof_new_images/zentrale_finanzen.png");
}

.Card5 {
    background-image: url("../img/kof_new_images/zentrale_finanzen.png");
}

.Card6 {
    background-image: url("../img/kof_new_images/zentrale_schwarzekasse.png");
}

.Card7 {
    background-image: url("../img/kof_new_images/zentrale_freunde.png");
}

.Card8 {
    background-image: url("../img/kof_new_images/zentrale_socialmedia.png");
}


.Card9 {
    background-image: url("../img/kof_new_images/zentrale_socialmedia.png");
    margin-bottom: 5em;
}

.Card3 .CategoryClickGroup {
    flex-direction: column;
}

.CategoryCardOverlay {
    /*background: linear-gradient(to right, #131d29, #131D29 28.57%, rgba(0, 0, 0, 0));*/
    border-radius: var(--border-radius-md);
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    gap: 1rem;
}

.LoginHeader object {
    pointer-events: none;
    background: var(--bg);
}

.CategoryClickable {
    border: 2px solid var(--bg-white-opacity);
    border-radius: 99rem;
    padding: 0.2em .8em;
    font-family: "MADEOuterSans";
    font-size: 12px;
    width: -webkit-max-content;
    /*text-transform: uppercase;*/
    background: rgba(0,0,0,0.4);
    transition: var(--transition-default-duration);
    /*text-shadow: 1px 1px 2px black;*/
}

.CategoryClickable:active {
    border-color: var(--bg-white-opacity);
    background: var(--bg-white-opacity);
}

.CategoryClickGroup {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.CategoryClickGroup::-webkit-scrollbar {
    display: none;
}

.CategoryTitle {
    font-family: "MADEOuterSans";
    font-size: 20px;
    text-transform: uppercase;
    line-height: 1;
    text-shadow: 1px 1px 3px black;
}

#sidemenu_version {
    font-size: 10px;
    line-height: 1;
    color: var(--light-grey);
    display: block;
    margin-top: 20px;
}

.backKoFIcon {
    width: 130px;
}

.splashLoginText {
    font-weight: 900;
    font-size: 1.5rem;
    line-height: 29px;
    margin-bottom: 1em;
}

.splashInputText {
    font-family: "MADEOuterSans";
}

.border-bottom {
    border-bottom: 1px solid var(--bg-main-opacity);
    width: 100%;
}

.border-top {
    border-top: 1px solid var(--bg-main-opacity);
    width: 100%;
}

.breakLine {
    height: 1px;
    background: rgba(255,255,255,0.1);
    width: 95%;
    margin-left: auto;
    margin-right: auto;
}

.breakLineFull {
    left: -1em;
    height: 1px;
    background: rgba(255,255,255,0.1);
    width: 115%;
    margin-left: auto;
    margin-right: auto;
}

.monospace {
    /*font-family:'DroidSansMono', Monaco, Courier New, monospace;
    font-weight:normal;*/

}

.blue {
    background-color:blue !important;
}

.head_button {
    width:30px;
    height:30px;
    display:inline-block;
    vertical-align:middle;
    margin: -2px 10px 0 0;
}

.head_button .svg {
    width:30px;
    height:30px;
}

.head_button:active .svg *{
    fill:#A0C736;
}

.menu_icon.float_links {
    padding-right: 60px;
}

.logo_header {
    height:30px;
    width: 170px;
    display:block;
    background: url(../img/logo_header.svg) no-repeat center center / contain;
    margin:auto;
}

.float_links {
    float:left;
}

.float_rechts {
    float:right;
}

.inline_block {
    display:inline-block;
}

.table_cell {
    height:60px;
    vertical-align:middle;
    display:table-cell;
    line-height:60px;
}

.content {
    min-height: 100%;
}

.content::-webkit-scrollbar {
    display: none;
}

.footer {
    height: 8em;width: 100%;
    border-top: rgba(255,255,255,0.1);
    border-left: none;
    border-right: none;
    border-bottom: none;
    border-width: 1px;
    background: var(--dark2);
    padding-top: 1em;
    padding-bottom: 3em;
    /* margin-bottom: 4em; */
}

.main_logo {
    height:120px;
    display:block;
    margin: -60px 0 0 -84px;
    position:absolute;
    top: 50%;
    left:50%;
}

.flexonly {
    display: flex;
}

.block-only {
    display: block !important;
}

.margin_l10p {
    margin-left: 10%;
}

.margin_l15p {
    margin-left: 15%;
}

.margin_r10p {
    margin-right: 10%;
}

.margin_r15p {
    margin-right: 15%;
}

.flexbox {
    display: -webkit-flex !important;     /* NEW - Chrome */
    display: flex !important;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
    -webkit-align-items: center;
    align-items: center;
}

.dark2bg {
    background: var(--dark2);
}

.dark3bg {
    background: var(--dark3);
}

.color-primary {
    color: var(--primary-color) !important;
}

.color-secondary {
    color: var(--secondary-color) !important;
}

.color-white {
    color: var(--color-white) !important;
}

.color-light-grey {
    color: var(--light-grey) !important;
}

.color-yellow {
    color: var(--color-yellow) !important;
}

.color-red {
    color: var(--color-red) !important;
}

.w-100 {
    width: 100% !important;
}


#sidemenu {
    width:100%;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    transition: 0.4s ease-in-out;
    -webkit-transition: 0.4s ease-in-out;
    position:fixed;
    height:100%;
    top: 0;
    left:0;
    z-index:9999;

}

#sidemenu_content {
    background-color:var(--bg);
    color:var(--app-text, #ffffff);
    width:80%;
    height:100%;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 22px;
    box-shadow: 10px 0 20px 0 rgba(0,0,0,0.4);
}

.sidemenu__area {
    display: flex;
    flex-direction: column;
    gap: 22px;
    overflow: auto;
    max-height: 100vh;
    overflow-x: hidden;
}

.sidemenu__area::-webkit-scrollbar {
    display: none;
}

#sidemenu_header {
    position: sticky;
    top: 0;
}

#sidemenu_wappen {
    width: 52px;
    height: 52px;
    background: var(--dark3);
    border-radius: var(--border-radius-md);
    line-height: 52px;
    align-items: center;
    padding: 8px;
    display: flex;
    justify-content: center;
}

.message-area {
    position: relative;
}

.message-area .message {
    position: relative;
}

#wappenArea {
    display: flex;
    align-items: center;
    position: relative;
    gap: 1rem;
}

#wappenArea .wappen_div .svg {
    width: auto;
    height: 36px;
    margin: auto;
}



#sidemenu_wappen .svg, #sidemenu_wappen *{

}

#sidemenu_cash {
    display: flex;
    justify-content: left;
    gap: 2rem;
}

.sidemenu_kasse {

}

.kasse_label {
    font-size: 10px;
    line-height: 12px;
    color: var(--nebensatz);
    margin-bottom: 0.5em;
}

.kasse_stand {
    color: var(--alertMessage);
    background-color: var(--dark3);
    text-align: center;
    border-radius: var(--border-radius-xs);
    display: inline-block;
    font-size: 12px;
    line-height: 1;
    padding: 4px 8px 6px;
    font-weight: 400 !important;
}

.sidemenu_schwarzekasse {

}

.schwarzekasse_label {
    font-size: 10px;
    line-height: 12px;
    color: var(--nebensatz);
    margin-bottom: 0.5em;
    width: max-content;

}

.schwarzekasse_stand {
    background-color: var(--dark3);
    color: var(--alert);
    text-align: center;
    border-radius: var(--border-radius-xs);
    display: inline-block;
    font-size: 12px;
    line-height: 1;
    padding: 4px 8px 6px;
    font-weight: 400 !important;
}

#sidemenu_wappen > .wappen_div {
    display: flex;
    position: relative;
    width: auto;
    height: 36px;
    margin: 0 auto;
}

#sidemenu_teamname {
    font-family: var(--font-primary);
    /*text-transform: uppercase;*/
    display: inline-block;
    max-width: 50vw;
    font-size: 14px;
    letter-spacing: 0px;
}

#sidemenu_liga {
    font-family: var(--font-secondary);
    font-size: 12px;
    letter-spacing: 0px;
    color: var(--light-grey);
}

.nextGame__area .wappen_div .svg {
    width: auto;
    height: 24px;
    margin: auto;
}

.nextGameLabel {
    font-family: var(--font-primary);
    /*text-transform: uppercase;*/
    color: var(--light-grey);
    font-size: 10px;
    letter-spacing: -0.8px;
    margin-bottom: 6px;
}

#nextGame {
    display: flex;
    align-items: center;
    background-color: var(--bg-main-opacity);
    border-radius: var(--border-radius-sm);
    padding: 12px 1rem;
    gap: 8px;
}

.spielerHeim {
    width: auto;
    height: 1.5rem;
    line-height: 1;
}

.VS {
    background-color: var(--bg);
    border-radius: var(--border-radius-full);
    text-align: center;
    font-size: 8px;
    letter-spacing: -0.8px;
    padding: 2px 6px;
    font-family: var(--font-primary);
    /*text-transform: uppercase;*/
    font-weight: 700;
    color: var(--color-white);
}

.spielerGast {
    width: auto;
    height: 1.5rem;
    line-height: 1;
}

.spielerNamen {
    margin-left: 4px;
}

.heimSpieler {
    display: block;
    font-family: "MADEOuterSans";
    /*text-transform: uppercase;*/
    font-size: 10px;
    line-height: 1;
    color: var(--color-white);
    margin-bottom: 2px;
}

.gastSpieler {
    color: var(--light-grey);
    font-family: "MADEOuterSans";
    /*text-transform: uppercase;*/
    font-size: 10px;
    line-height: 1;
}

#launeScore {
    display: flex;
}

.presidentScore, .fansScore, .sponsorenScore {
    width: 33%;
    text-align: center;
}

.presidentLaune, .fansLaune, .sponsorenLaune {
    height: 50px;
    line-height: 50px;
    text-align: center;
    background: var(--alertbg);
    width: 50px;
    margin-left: auto;
    margin-right: auto;
    border-radius: var(--border-radius-full);
    font-family: "MADEOuterSans";
    /*text-transform: uppercase;*/
    font-size: 12px;
    color: var(--buttongreen);
}

.presidentLabel, .fansLabel, .sponsorenLabel {
    font-family: "MADEOuterSans";
    /*text-transform: uppercase;*/
    font-size: 9px;
    margin-top: 6px;
    color: var(--nebensatz);
}

#sidemenu_footer {
    font-size: 13px;
}

.headerCloseButton {
    float: right;
}

.nebenSatz {
    color: var(--nebensatz);
    font-size: 9px;
}

.footerContent {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin-top: 14px;
}

.footerItem {
    font-weight: 400;
    font-size: 13px;
    line-height: 1;
    text-transform: none;
}

.interFont {
    font-family: "Inter";
}

.sidemenu_open {
    transform: translateX(0%) !important;
    -webkit-transform: translateX(0%) !important;
}

.center {
    text-align:center !important;
}

.buttonBottom {
    position: absolute;
    width: 100%;
    top: calc(93vh - env(safe-area-inset-bottom));
    left: 5%;
}

#sidemenu_items {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.sidemenu__items--title {
    font-size: 1rem;
    line-height: 1;
}

#accounts_button {
    font-family: "MADEOuterSans";
    /*text-transform: uppercase;*/
}

.sidebar__subtitle {
    font-size: 10px !important;
    display: block !important;
    line-height: 1 !important;
    color: var(--light-grey) !important;
    font-family: var(--font-primary) !important;
    /*text-transform: uppercase !important;*/
}

.em2_left {
    margin-left: 2em;
}

.links {
    text-align:left !important;
}

.rechts {
    text-align:right !important;
}

.left {
    text-align: left;
    float: left;
}

.center_margin {
    margin-left: auto;
    margin-right: auto;
}

.bold {
    font-weight: 700;
}

.normal {
    font-weight:normal;
}

.stickyButton {
    position: sticky;
    /* bottom: calc(0%); */
    top: calc(92% - env(safe-area-inset-bottom));
    padding-top: 1em;
    background: var(--dark2);
    padding-bottom: 2em;
    border-top: var(--dark3);
    border-left: var(--dark2);
    border-bottom: var(--dark2);
    border-right: var(--dark2);
    border-style: solid;
    border-width: 1px;
}

.big {
    font-size:18px;
}

.extra_big {
    font-size: 30px;
}

.small {
    font-size:11px;
}

.very_small {
    font-size:8px;
}

.full {
    width:100px;
    height:100px;
    background-color:blue !important;
    color:red;
}

.w100 {
    width:100%;
    margin:auto;
}

.w95 {
    width:95%;
    margin:Auto;
}

.w90 {
    width:90%;
    margin:auto;
}

.w80 {
    width:80%;
}

.w75 {
    width:75%;
    margin:auto;
}

.w50 {
    width:50%;
    margin:auto;
}

.w40 {
    width:40%;
    margin:auto;
}

.w33 {
    width:33%;
    margin:auto;
}

.w10 {
    width:10%;
    margin:auto;
}

.l52vw {
    left: 52vw;
}

.closeButton {
    margin-left: auto;
}

.padding_b1em {
    padding-bottom: 1em;
}

.padding_l1em {
    padding-left: 1em;
}

.padding_t1em {
    padding-top: 1em;
}

.padding_l05em {
    padding-left: 0.5em;
}

.padding_r05em {
    padding-right: 0.5em;
}

.errorBox {
    /* padding: 5%; */
    display: flex;
    width: 90%;
    padding: 8px 12px;
    align-items: center;
    gap: 8px;
    margin-left: 5%;
    border-radius: 6px;
    background: rgba(247, 85, 85, 0.20);
    color: var(--errorMessage);
    font-size: 13px;
}

.position-relative {
    position: relative;
}

.klickbar {
    /*border-left: 4px solid #64A517;*/
}

.zeile:not(.klickbar) {
    border-left: 4px solid transparent;
}

.transitions_transform {
    -webkit-transition: -webkit-transform 0.4s ease-out;
    -moz-transition: -moz-transform 0.4s ease-out;
    -o-transition: -o-transform 0.4s ease-out;
    transition: transform 0.4s ease-out;
}

.transitions_opacity {
    -webkit-transition: opacity 0.4s ease-out;
    -moz-transition: opacity 0.4s ease-out;
    -o-transition: opacity 0.4s ease-out;
    transition: opacity 0.4s ease-out;
}

.transitions_alle {
    -webkit-transition: 0.4s ease-out;
    -moz-transition: 0.4s ease-out;
    -o-transition: 0.4s ease-out;
    transition: 0.4s ease-out;
}

.transitions_alle_schnell {
    -webkit-transition: 0.2s ease-out;
    -moz-transition: 0.2s ease-out;
    -o-transition: 0.42s ease-out;
    transition: 0.2s ease-out;
}

#error {
    background: rgba(247,85,85,0.96);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color:var(--app-text, #ffffff);
    font-family: "Inter";
    padding: calc(env(safe-area-inset-top) + 14px) 16px 14px;
    position:fixed;
    z-index:10000;
    width:100%;
    height:auto;
    display:none;
}

.link {
    margin:10px auto;
    padding:2px 4px;
    background-color:#333333;
    display:inline-block;
    border-radius:3px;
}

#splash_content input {
    background: #091420;
    border-bottom: #63FF9F;
    border-style: solid;
    border-width: 1px;
    box-shadow: none;
    border-top: none;
    border-left: none;
    border-right: none;
    border-radius: 0;
    display: block;
    font-size: 17px;
    color: var(--app-text, white);
    margin-bottom: 2em;
    width: 100%;
    letter-spacing: unset;
    padding: 14px 0 7px;
    font-family: var(--font-secondary);
}

.progressBar {
    position: relative;
    top: 8px;
}

#inputField {
    background: var(--dark2);
    color: var(--app-text, white);
    border: none;
    font-size: 1rem;
}

hr {
    background-color:#cdcdcd;
    height:1px;
    margin: 12px auto;
    width:80%;
}

.trenner {
    padding:5px 5%;
    background-color:var(--trenner);
    font-size: 10px;
    color: var(--app-text, #ffffff);
    width: 50%;
    font-family: "MADEOuterSans";
    /*text-transform: uppercase;*/
    text-align: center;
    margin-top: 1em;
}

.H6bold {
    font-family: "MADEOuterSans";
    /*text-transform: uppercase;*/
    font-size: 14px;
    line-height: 17px;
    letter-spacing: 0em;
    text-align: left;
    margin: 1em;
    margin-top: 2em;
}


#dunkel {
    display:none;
    background-color: rgba(8,8,14,0.55);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    position:fixed;
    height:100%;
    width:100%;
    opacity:0;
    z-index:8000;
    top:0;
}

.dunkel_show {
    opacity: 1 !important;
}

.dunkel_hide {
    opacity: 0 !important;
}

#meldung {
    z-index:8001;
    display:none;
    height:100%;
    width:100%;
    position:fixed;
    top:0;
}

#meldung > div {
    background: linear-gradient(180deg, #16161f 0%, #1e1432 100%);
    color: var(--app-text, #fff);
    border: 1px solid rgba(255,255,255,0.2);
    width: 86%;
    max-width: 400px;
    margin: auto;
    padding: 22px 20px;
    border-radius: 18px;
    font-family: "Inter";
    box-shadow: 0 14px 44px rgba(0,0,0,0.55);
    /* 4.2.1 (Support S24 Ultra): grosse System-Schrift skaliert den WebView-
     * Text — lange Meldungen wuchsen ueber den Viewport, OK-Button unerreichbar.
     * Box deckeln + intern scrollen, Buttons bleiben erreichbar. */
    max-height: calc(100vh - 90px);
    overflow-y: auto;
}
#meldung > div > p {
    display: flex !important;
    align-items: center;
    gap: 8px;
    text-align: left !important;
    color: var(--app-text, #fff) !important;
    font-family: "MADEOuterSans" !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    margin: 0 0 14px !important;
}
#meldung > div > p::before {
    content: "";
    width: 4px; height: 15px;
    background: var(--buttongreen);
    border-radius: 2px;
    flex: 0 0 auto;
}
#meldung > div > div.center {
    color: var(--app-text, rgba(255,255,255,0.78)) !important;
    font-family: "Inter" !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    text-align: left !important;
    padding: 0 0 4px !important;
}

.meldung_button_1, .meldung_button_2 {
    border-radius: 24px;
    background: var(--buttongreen);
    color: #073d22;
    text-align: center;
    padding: 13px;
    font-family: "MADEOuterSans";
}
.meldung_button_1 {
    display: block;
    margin: 9px auto 0;
}
.meldung_button_2 {
    width: 45%;
    margin: 9px 2.5% 0 2.5%;
    display: inline-block;
    letter-spacing: 0.2px;
}

.visible {
    opacity: 1 !important;
}

.invisible {
    opacity: 0 !important;
}

.hidden {
    display:none !important;
}

p {
    padding: 5px 0;
}

.button_disabled {
    /*opacity:0.6;*/
    background-color:#cccccc !important;
}

.inline_error {
    border-radius:3px;
    background-color:red;
    padding:3px;
    text-align:center;
    margin:auto;
}

.border_bottom_gruen {
    border-bottom:6px solid #64A517;
}

.background_layer {
    /*-webkit-background: url('../img/hintergrund_layer.png') no-repeat center center / cover, url('../img/hintergrund.jpg') repeat-y center center / cover;
    background: url('../img/hintergrund_layer.png') no-repeat center center / cover, url('../img/hintergrund.jpg') repeat-y center center / cover; */
    -webkit-background: #091420;
    background: #091420;
}

.button {
    padding:14px 5px;
    background-color: var(--buttongreen);
    color: var(--dark2);
    font-family: var(--font-primary);
    /*text-transform: uppercase;*/
    border-radius:12px;
    font-size: 15px;
    line-height: 1;
    margin: 5px auto;
    text-align:center;
    display:inline-block;

    background-repeat: no-repeat;
    background-position:center center;
}

.button:active {
    background-color:#64A517;
}

.button img {
    width:20px;
    vertical-align:middle;
}

.achtung_speichern {
    background:#daa520 url("../img/achtung.svg") no-repeat 20px 8px / auto 30px !important;
}

.schwarze_kasse {
    background-color: var(--dark3);
    color: #F4CC63;
    border: 1.5px solid #E6B84C;
    box-shadow: 0 0 14px -5px rgba(230, 184, 60, 0.55);
}

.weiter {
    background-size:contain;
    background-image: url('../img/weiter.png');
}

.svg_weiss path{
    fill: #eeeeee !important;
}

.svg_schwarz path{
    fill: #222222 !important;
}

.redButton {
    background: rgba(247,85,85,0.16) !important;
    color: #F75555 !important;
}

.greenButton {
    background: var(--buttongreen) !important;
    color: #073d22 !important;
}

.submenu {
    width:100%;
    table-layout: fixed;
    display: inline-block;
    margin-bottom: 10px;
    margin-top: 10px;
    overflow-x: auto;
    height: 40px;
    white-space: nowrap;
    background-color: var(--bg) !important;
    /*background-image: -webkit-linear-gradient(top, #A0C736 0%, #64A517 100%);
    background-image: -moz-linear-gradient(top, #A0C736 0%, #64A517 100%);
    background-image: -o-linear-gradient(top, #A0C736 0%, #64A517 100%);
    background-image: linear-gradient(top, #A0C736 0%, #64A517 100%);
    border-bottom:2px solid #eeeeee;*/
}

.submenu::-webkit-scrollbar {
    display: none;
}

.submenu > div {
    display:inline-grid;
    color: var(--buttongreen);
    font-family: "MADEOuterSans";
    /*padding:10px 5px;*/
    height:30px;
    text-align:center;
    vertical-align:middle;
    /*text-transform:uppercase;*/
    font-size:12px;
    position:relative;
    border-style: solid;
    border-color: var(--buttongreen);
    border-width: 1px;
    margin-left: 0;
    margin-right: 10px;
}

.submenu > .sub3 {
    border-color: none;
    border-radius: 5px;
    border-width: 0px;
    background-color: var(--dark2);
    height: 73px;
    /* color: var(--app-text, white); */
    width: 28%;
}

.submenu .submenu_icon, .submenu .svg  {
    width:30px;
    height:30px;
    margin: 0 auto -2px;
}

.sub4 {
    /*width:25% !important;*/
    border-radius: 20px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 15px;
    padding-right: 15px;
}

.line-height-1_1 {
    line-height: 1.1;
}

.sub4 > img {
    display: none;
}

.sub5 {
    border-radius: 20px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 8px;
    padding-right: 8px;
}

.sub5 > img {
    display: none;
}

#verein > .submenu {
    background-color: rgba(0,0,0,0) !important;
    height: 75px;
    position: relative;
    bottom: 7px;
    text-align: center;
}

.category {
    text-transform:small-caps;
    background-color:#bbbbbb;
    padding:10px;
}

.loader {
    margin:60px auto;
    padding:1rem;
    text-align:center;
    z-index: 2000;
    /*-webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;*/
}

.loader > .svg {
    width: 120px !important;
    height: 120px !important;
    /* KoF-Lade-GIF (lime) ins neue KoF-Grün (#63FF9F) drehen */
    -webkit-filter: hue-rotate(48deg);
    filter: hue-rotate(48deg);
}

.spin {
    /*-webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;*/
}

.loader.svg {
    width:30px;
    height:30px;
}

.daten_tabelle {
    width:100%;
    table-layout: fixed;
    display:table;
    margin:10px auto;
}

.daten_tabelle .th {
    text-align:right;
    border-right:2px solid #bbbbbb;
    width:38%;
    font-weight:bold;
}

.daten_tabelle .td {
    font-size: 18px;
    width:62%;
}

.daten_tabelle .td, .daten_tabelle .th {
    padding:10px;
    vertical-align:middle;
    display:table-cell;
    table-layout: fixed;
}

.daten_tabelle .td div, .daten_tabelle .th div {
    height:36px;
}

@keyframes range_slider_links {
    0% { background-color: #bbbbbb; }
    100% { background-color:#A0C736; }
}

@-webkit-keyframes range_slider_links {
    0% { background-color: #bbbbbb; }
    100% { background-color:#A0C736; }
}

@keyframes range_slider_rechts {
    0% {  }
    100% { background-color: #bbbbbb; }
}

@-webkit-keyframes range_slider_rechts {
    0% {  }
    100% { background-color: #bbbbbb; }
}

.range_slide {
    margin: 10px;
}

.range_slider .info_links, .range_slider .info_rechts {
    width:20%;
    height:40px;
    padding:5px;
    vertical-align:middle;
    line-height:30px;
    text-align:center;
    /*display:inline-block;*/
}

.range_slider .slide_wrapper {
    padding:0px;
    width:80%;
    margin:10px auto;
}

.range_slider .slide_bg {
    display:block;
    height:2rem;
    background-color: var(--dark3);
    border-radius:3px;
}

.range_slider .slide {
    background: rgba(123, 30, 250, 0.20);
    margin-left:0%;
    height:100%;
    width:100%;
    position:relative;
    border-radius:3px;
}

.range_slider .drag_me_links, .range_slider .drag_me_rechts {
    width:50px;
    height:2rem;
    position:absolute;
    /*top:-6px;
    right:-15px;*/
    background-color:var(--secondary-500, #7B1EFA);
    border-radius:3px;
    line-height:2rem;
    vertical-align:middle;
    color:var(--app-text, #ffffff);
    text-align:center;
}

.range_slider .drag_me_links {
    top:0px;
    left:0px;
    font-family: "MADEOuterSans";
}

.range_slider .drag_me_rechts {
    top:0px;
    right:0px;
    font-family: "MADEOuterSans";
}

@keyframes single_slider_links {
    0% { background-color: #bbbbbb; }
    100% { background-color:#A0C736; }
}

@-webkit-keyframes single_slider_links {
    0% { background-color: #bbbbbb; }
    100% { background-color:#A0C736; }
}

@keyframes single_slider_rechts {
    0% {  }
    100% { background-color: #bbbbbb; }
}

@-webkit-keyframes single_slider_rechts {
    0% {  }
    100% { background-color: #bbbbbb; }
}



.single_slide {
    margin: 10px;
}

.single_slider .info_links, .single_slider .info_rechts {
    width:20%;
    height:40px;
    padding:5px;
    vertical-align:middle;
    line-height:30px;
    text-align:center;
    /*display:inline-block;*/
}

.single_slider .slide_wrapper {
    padding:10px;
    width:60%;
    margin:auto;
}

.single_slider .slide_bg {
    display:block;
    height:20px;
    background-color: #bbbbbb;
    border-radius:3px;
}

.single_slider .slide {
    background-color:#A0C736;
    margin-left:0%;
    height:100%;
    width:100%;
    position:relative;
}

.single_slider .drag_me_links, .single_slider .drag_me_rechts {
    width:2rem;
    height:2rem;
    position:absolute;
    top:-6px;
    right:-15px;
    background-color:#64A517;
    border-radius:3px;
}

.single_slider .drag_me_links {
    top:-6px;
    left:-15px;
}

.single_slider .drag_me_rechts {
    top:-6px;
    right:-15px;
}

@keyframes radio_selected {
    0% { background-color: var(--dark3); }
    100% { background-color:var(--buttongreen); }
}

@-webkit-keyframes radio_selected {
    0% { background-color: var(--dark3); }
    100% { background-color: var(--buttongreen); }
}

@keyframes radio_nicht_mehr_selected {
    0% { background-color:var(--buttongreen); }
    100% { background-color: var(--dark3); }
}

@-webkit-keyframes radio_nicht_mehr_selected {
    0% { background-color:var(--buttongreen); }
    100% { background-color: var(--dark3); }
}

canvas {
    width:100%;
    height:80px;
}

.fixed {
    position:fixed;
}

.radio {
    border-radius:3px;
    display:inline-block;
    margin:10px auto;
    font-family: "MADEOuterSAns";
    /*text-transform: uppercase;*/
}


.radio div {
    /*border-right: 2px solid #cdcdcd;*/
    padding:15px 20px;
    background-color: var(--dark3);
    color:var(--app-text, #ffffff);
    display:inline-block;
    font-size: 12px;
}

.radio div:first-child {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

.radio div:last-child {
    border:0 !important;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

.radio div.selected, .big_radio .selected {
    background-color:var(--buttongreen) !important;
    color: var(--dark2);
    -webkit-animation: 0.2s radio_selected forwards;
    animation: 0.2s radio_selected forwards;
}



.radio div.nicht_mehr_selected {
    /* 4.3.0: keine Nachlauf-Animation mehr — abgewaehlte Chips fallen sofort in den Grundzustand
       des jeweiligen Screens zurueck (forwards liess sie auf --dark3 stehen, z.B. Transfers, Wechselminute) */
    -webkit-animation: none;
    animation: none;
}

@keyframes submenu_selected {
    0% { background-position: center 120%; }
    100% {background-position: bottom center; }
}

@-webkit-keyframes submenu_selected {
    0% { background-position: center 120%; }
    100% {background-position: bottom center; }
}

@keyframes submenu_nicht_mehr_selected {
    0% { background-position: bottom center; }
    100% {background-position: center 120%; }
}

@-webkit-keyframes submenu_nicht_mehr_selected {
    0% { background-position: bottom center }
    100% {background-position: center 120%; }
}

.submenu div.selected {
    background: var(--buttongreen);
    color: var(--dark2);
    background-size: 20px auto;
    /*-webkit-animation: 0.2s submenu_selected forwards;*/
    /*animation: 0.2s submenu_selected forwards;*/
}

.submenu:active {
    /*background-color: #64A517;*/
}

.sub3 > img {
    filter: brightness(100%);
    position: relative;
    top: 13px;
    margin-bottom: 1.5em !important;
}

.selected > img {
    filter: brightness(0%);
}

.submenu div.nicht_mehr_selected {
    -webkit-animation: 0.2s submenu_nicht_mehr_selected forwards;
    animation: 0.2s submenu_nicht_mehr_selected forwards;
}

.padding2_5{
    padding: 2.5%;
}

.padding5{
    padding: 5%;
}

.mt-0 {
    margin-top: 0 !important;
}

.pt-0 {
    padding-top: 0 !important;
}

.margin_t2 {
    margin-top:2px;
}

.margin_t5 {
    margin-top:5px;
}

.margin_t10 {
    margin-top:10px;
}

.margin_t-5 {
    margin-top:-5px;
}

.margin_t-10 {
    margin-top:-10px;
}

.margin_b10 {
    margin-bottom:10px;
}

.margin_t2em {
    margin-top: 2em;
}

.margin_t1em {
    margin-top: 1em;
}

.margin_t05em {
    margin-top: 0.5em;
}

.margin_b1em {
    margin-bottom: 1em !important;
}

.margin_l5p {
    margin-left: 5% !important;
}

.margin_l1em {
    margin-left: 1em;
}

.margin_l05em {
    margin-left: 0.5em;
}

.margin_r05em {
    margin-right: 0.5em;
}

.margin_l03em {
    margin-left: 0.3em;
}

.margin_r03em {
    margin-right: 0.3em;
}

.margin_r0 {
    margin-right: 0px;
}

.margin_l0 {
    margin-left: 0px !important;
}

.margin_total1em {
    margin: 1em;
}

.padding_t05em {
    padding-top: 0.5em;
}

.padding_b05em {
    padding-bottom: 0.5em;
}

.padding_r1em {
    padding-right: 1em;
}

.oben {
    /*background: url('../img/hintergrund.jpg') no-repeat center bottom /100% auto; */
    color:var(--bg);
    text-align: center;
}

.headerBG {
    background: url("../new_img/vereinauswahl_page_01_small.png");
    width: 100%;
    height: 230px;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

.zeile {
    /*height:60px;*/
    padding:10px 5%;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    display:flex;
    /*background: var(--dark3);*/
    width: 90%;
    margin-left: 5%;
}

.spiele .zeile {
    align-items: center;
}

#welten > .zeile, #welt_suche_ergebnis > div > .zeile {
    width: 100%;
    margin-left: 0px;
}

.zeile .wappen_div {
    width:40px !important;
    height:40px !important;
}

.zeile_oben {
    padding:10px;
}

.zeile_oben > .zeilen_infos {
    margin-top: 3em;
}

/*.zeile:not(.unklickbar):active, .schieber_wrapper:active {
    background-color:#bbbbbb;
}*/

.zeilen_infos {
    display:inline-block !important;
    width:auto !important;
    font-family: "MADEOuterSans";
    max-width: unset;
}

.vorne {
    text-align:center;
    vertical-align:top;
    display:inline-block;
    line-height:40px;
    height:40px;
}

.vorne .svg, .vorne svg {
    height:40px;
    width:40px;
}

path#LeftArm {
    fill: var(--firstColorTrikot);
}

path#RightArm {
    fill: var(--firstColorTrikot);
}

path#MainBody {
    fill: var(--firstColorTrikot);
}

path#Stripes {
    fill: var(--secondColorTrikot);
}

.vorne .svg:not(img) {
    /*margin-left:-10px;*/
}

.oben .vorne .svg {
    height:80px;
}

.align-items-center {
    align-items: center;
}

.hinten {
    text-align:center;
    vertical-align:middle;
    display:inline-block;
    line-height:40px;
    float:right;
    font-size: 36px;
    color:#a0c836;
}

.hinten .button {
    font-size: 1rem;
    font-weight:normal;
    margin:-3px 0;
    line-height:normal;
    vertical-align:top;
}

.hinten .hack_unten {
    margin-top:-20px;
}

.hinten .hack_oben {
    margin-bottom:-20px;
}

.hinten div {
    line-height:normal;
}

.hinten .svg {
    height:2rem;
}

/*.zeile .vorne img, .zeile .hinten img {
    vertical-align:middle;
    width:40px;
    height:auto;
    margin: 0;
}*/
.zeile .vorne img {
    margin: 0 10px 0 -21px;
}


.zeile_oben .vorne img {
    vertical-align:middle;
    width:60px;
    height:auto;
    margin: 10px;
}

.zeile .vorne svg{
    margin-right: 10px;
}

.zeile .vorne .flagge {
    margin: -3px 5px 0px -5px !important;
}

.zeile_sidemenu .einzeilig {
    margin-left:10px;
}

.zeile.markierung {
    background-color:#cccccc !important;
}

.zeile.markierung_eb {
    background-color:#dddddd !important;
}

.zeile.markierung .hinten, .zeile.markierung_eb .hinten {
    color:#64A517;
}

img.klappe{
    width:20px !important;
}

#welt_filter .vorne img {
    margin:10px;
}

.paddingLeft1 {
    padding-left: 1em;
}

.paddingLeft2 {
    padding-left: 2em;
}

.hauptzeile, #sidemenu .zeilen_infos {
    font-size: 15px;
    display:inline;
    /*text-transform: uppercase;*/
    width:100%;
    word-wrap:break-word;
    word-break: break-all;
}

.ShortHeader {
    font-family: var(--font-primary);
    /*text-transform: uppercase;*/
    text-align: left;
    margin-left: 10px;
    color: var(--app-text, white);
    font-size: 15px;
    line-height: 1;
}

.backKoFIconShort {
    width: 34px;
    height: auto;
}

.weltTopText {
    font-size: 15px;
    line-height: 20px;
    letter-spacing: unset;
    color: var(--light-grey);
    margin: 15px;
    padding: 0;
}

.weltSubtext {
    font-size: 12px;
    color: var(--app-text, rgba(255,255,255,0.85));
    margin-bottom: 2em;
    letter-spacing: 0.2px;
}

#sidemenu .zeilen_infos, .hauptzeile.keine_nebenzeile {
    line-height:100%;
    vertical-align:middle;
}

.nebenzeile {
    color: var(--nebensatz) !important;
    display:flex;
    font-size:14px;
    line-height: 20px;
    font-family: var(--font-secondary);
}


.nebenzeile .svg {
    height:20px;
    margin: 0 3px;
}

.zeile_oben .hauptzeile {
    font-size:22px;
    color: var(--app-text, white);
}

.layer {
    position:absolute;
    top: 0;
    height:100%;
    width:100%;
}

/* === App-weiter Durchschein-Schutz für verdeckte Layer =====================
   Beim Öffnen/Zurückgehen bleibt der vorige Screen unter dem obersten Layer
   liegen. _layer_refresh_chrome() (main.js) markiert jeden NICHT-obersten Layer
   mit .layer-behind. Das translateZ(0) macht den Layer zum Containing-Block UND
   eigenen Stacking-Context für seine position:fixed-Chrome (Header/Submenu/
   Eingabeleisten) -> sie können nicht mehr über den obersten Layer durch-
   scheinen (iOS-WKWebView-Bug). Identity-Transform = optisch unverändert; der
   oberste (aktive) Layer bleibt unberührt. Ersetzt die früheren per-Screen
   `.layer ~ .layer`-Einzelfixes. */
.layer-behind {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}
/* 5.0.3: komplett verdeckter Layer/Zentrale -> Backing-Stores freigeben (main.js kof_layer_parken) */
.layer-parked {
    visibility: hidden !important;
}


.layer .swiper-container {
    width:inherit;
    height:inherit;
}

.layer-swiper-slide {
    height:auto;
}

/* 4.3.0: kein CSS-filter mehr auf verdeckten Layern (blur zwang WebKit zu grossen
   Offscreen-Puffern je Layer -> Speicherdruck -> iOS killt den WebView-Prozess,
   Symptom "App springt in die Zentrale" beim Oeffnen der Picker). Stattdessen
   ein guenstiges Abdunkeln per Overlay. Klasse bleibt, nur die Wirkung aendert sich. */
.blur {
    filter: none;
}
.blur::after {
    content: "";
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    background: rgba(9, 20, 32, 0.55);
    z-index: 999;
    pointer-events: none;
}

.main-swiper-container {
    height:100%;
    width:100%;
}

.rightSideLayer {
    position: relative;
    left: 2em;
}

.trikot .wrapper {
    position:relative;
    width:40px;
    background-color:blue;
}

.trikot > .wrapper > .nummer {
    font-family: "MADEOuterSans";
}

.zeile .trikot .svg {
    height:42px !important;
    width:auto !important;
    margin: 0 8px 0 -5px;
}

.zeile .trikot path {

}

.suchfeld {

}

.trikot {
    margin-right: 13px !important;
}

/* Neue Trikot-Slots (kof_trikot): 1440er-SVG fuellt den Slot zu 100%.
   Groesse je Container, da die alten #Trikot-01/.svg-Regeln nicht greifen. */
.kof_trikot_slot { display:inline-block; line-height:0; vertical-align:middle; }
.kof_trikot_slot > svg { display:block; width:100%; height:100%; }
.trikot .kof_trikot_slot { width:42px; height:42px; }
.zeile .trikot .kof_trikot_slot { width:42px; height:42px; margin:0 8px 0 -5px; }
.aufstellung_spieler_trikot_mit_nummer .kof_trikot_slot { width:50px; height:50px; }
.spielbericht_aufstellung_spieler .kof_trikot_slot { width:30px; height:30px; }
.topspieler .kof_trikot_slot { width:44px; height:44px; }

#verein > .oben > .zeile_oben > .zeilen_infos > .nebenzeile {
    background: var(--dark3);
    text-align: center !important;
    border-radius: var(--border-radius-sm);
    color: var(--app-text, white) !important;
    padding: 6px 10px;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    font-size: 13px;
    line-height: 1;
}

#verein_saison > .zeile > .hinten {
    margin-left: auto;
    font-size: 1.5rem;
    color: var(--buttongreen);
}

.suchfeld input {
    margin: 10px auto;
    background:#dddddd url('../img/nachrichten/senden.svg') no-repeat  10  center / auto 80%;
}

.mainFont {
    font-family: "MADEOuterSans";
    /*text-transform: uppercase;*/
}

.fontWhite {
    color: var(--app-text, white);
}

.fontGrey {
    color: var(--nebensatz);
}

.margin_r1em {
    margin-right: 1em;
}

.purpleBox {
    background: var(--trenner);
    border-radius: 5px;
    width: 30px;
    text-align: center;
    margin-right: 1em;
}

.px11 {
    font-size: 11px;
}

.greenBox {
    background: var(--alertbg);
    color: var(--alertMessage);
}

.redBox {
    background: var(--errorbg);
    color: var(--errorMessage);
}

.greyBox {
    background: var(--dark3);
    color: var(--app-text, white);
}

.yellowBox {
    background: var(--warnbg);
    color: var(--alert);
}

.zeile .trikot .nummer {
    position:absolute;
    /* Rueckennummer-Farbe: pro Screen ueber --ownFontColor gesetzt
       (nummer_farbe = farbe2, bzw. schwarz/weiss wenn farbe1==farbe2).
       Fallback weiss, falls die Variable nicht gesetzt ist. */
    color: var(--ownFontColor, #ffffff);
    font-size:11px;
    text-align:center;
    width:47px;
    height:42px;
    line-height:42px;
    vertical-align:middle;
    top:0;
    left:-4px;
}

@-webkit-keyframes fadeIn {
    0%  { opacity:0 }
    100% { opacity: 1}
}

@keyframes fadeIn {
    0%  { opacity:0; }
    100% { opacity: 1;}
}

@-webkit-keyframes slideDownAndFadeIn {
    0%  { opacity:0; max-height:0px; }
    80% { opacity:0;}
    100% { opacity: 1; max-height:600px;}
}

@keyframes slideDownAndFadeIn {
    0%  { opacity:0; max-height:0px; }
    80% { opacity:0;}
    100% { opacity: 1; max-height:600px;}
}

@-webkit-keyframes slideUpAndFadeOut {
    0%  {  opacity:1; max-height:600px; }
    20% {  opacity:0;}
    100% { opacity: 0; max-height:0px;}
}

@keyframes slideUpAndFadeOut {
    0%  {  opacity:1; max-height:600px; }
    20% {  opacity:0;}
    100% { opacity: 0; max-height:0px;}
}

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

.x100 {
    -webkit-transform: translateX(100%);
    transform: translateX(100%) !important;
}

.x200 {
    -webkit-transform: translateX(200%);
    transform: translateX(200%) !important;
}

.x300 {
    -webkit-transform: translateX(300%);
    transform: translateX(300%) !important;
}

.x400 {
    -webkit-transform: translateX(400%);
    transform: translateX(400%) !important;
}

.changed {
    animation: 0.4s changed forwards ease-out;
}

@-webkit-keyframes changed {
    0% { background-color:transparent; }
    20%  { background-color: #FFFDCF; }
    100% { background-color:transparent; }
}

@keyframes changed {
    0% { background-color:transparent; }
    20%  { background-color: #FFFDCF; }
    100% { background-color:transparent; }
}

.slide_up_and_fade_out {
    -webkit-animation: 1.2s slideUpAndFadeOut forwards ease-in;
    animation: 1.2s slideUpAndFadeOut forwards ease-in;
}

.slide_down_and_fade_in {
    -webkit-animation: 1.2s slideDownAndFadeIn forwards ease-out;
    animation: 1.2s slideDownAndFadeIn forwards ease-out;
}

.block {
    display:inline-block;
}

/*
STARTSEITE
*/

#startseite {
    width:100%;
}

.startseite-auswertung {
    padding:10px;
    text-align:center;
    color:#000;
    background-color:#eee;
    margin:0 auto 10px auto;
}

#news.neu {
    border-color:orange;
}

.signal {
    position:absolute;
    width:1.5rem;
    height:1.5rem;
    line-height:1.5rem;
    vertical-align:middle;
    background-color:var(--buttongreen);
    font-size:10px;
    right:10px;
    top:4px;
    border-radius:100px;
    text-align:center;
    margin-top:0px;
    color:#333333;
}

.day-season {
    font-size: 7px;
    font-weight: 400;
    line-height: 1;
    /*text-transform: uppercase;*/
    font-family: var(--font-primary);
    color: var(--color-white);
    text-align: center;
    position: absolute;
    bottom: -10px;
    /* Center under the calendar icon and keep on one line — the localized
       "<n>. Day" / "<n>. Gün" is wider than the German "<n>.Tag" and was
       wrapping, pushing the day number up into the icon. */
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    padding: 0;
}

.CalendarIcon {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 4px;
    justify-content: center;
    position: relative;
}

.burgerButton {
    width: 100px;
}

.signal-messages {
    position: absolute;
    width: 1rem;
    height: 1rem;
    background-color: var(--buttongreen);
    font-size: 9px;
    line-height: 15px;
    right: -6px;
    top: -8px;
    border-radius: 100px;
    text-align: center;
    font-family: var(--font-primary);
    color: var(--bg);
    padding: 0;
}

.signal-transfers {
    position: relative;
    width: 17px;
    height: 17px;
    margin-left: -17px;
    line-height: 17px;
    vertical-align: middle;
    background-color: var(--buttongreen);
    font-size: 10px;
    /* right: 25px; */
    top: 1px;
    left: 77px;
    border-radius: 100px;
    text-align: center;
    font-weight: bold;
    color: #333333;
}

.signal-training {
    position: relative;
    width: 17px;
    height: 17px;
    margin-left: -17px;
    line-height: 17px;
    vertical-align: middle;
    background-color: var(--buttongreen);
    font-size: 10px;
    /* right: 25px; */
    top: 1px;
    left: 238px;
    border-radius: 100px;
    text-align: center;
    margin-top: 0px;
    font-weight: bold;
    color: #333333;
}

.signal-news {
    position: absolute;
    width: 1rem;
    height: 1rem;
    font-size: 9px;
    line-height: 15px;
    vertical-align: middle;
    background-color: var(--buttongreen);
    left: 1rem;
    top: -6px;
    border-radius: 100px;
    text-align: center;
    color: var(--bg);
    font-family: var(--font-primary);
}

.signal-news-burger {
    position: relative;
    width: 17px;
    height: 17px;
    margin-top: -17px !important;
    line-height: 17px;
    vertical-align: middle;
    background-color: var(--buttongreen);
    font-size: 10px;
    left: 51px;
    top: 12px;
    border-radius: 100px;
    text-align: center;
    /* margin-top: 0px; */
    font-weight: bold;
    color: #333333;
}

.signal-finance {
    position: relative;
    width: 17px;
    height: 17px;
    margin-left: -17px;
    line-height: 17px;
    vertical-align: middle;
    background-color: var(--buttongreen);
    font-size: 10px;
    /* right: 25px; */
    top: 1px;
    left: 88px;
    border-radius: 100px;
    text-align: center;
    margin-top: 0px;
    font-weight: bold;
    color: #333333;
}

.signal-friends {
    position: relative;
    width: 17px;
    height: 17px;
    margin-left: -17px;
    line-height: 17px;
    vertical-align: middle;
    background-color: var(--buttongreen);
    font-size: 10px;
    /* right: 25px; */
    top: 1px;
    left: 106px;
    border-radius: 100px;
    text-align: center;
    margin-top: 0px;
    font-weight: bold;
    color: #333333;
}

.signal-team {
    position: relative;
    width: 17px;
    height: 17px;
    margin-left: -17px;
    line-height: 17px;
    vertical-align: middle;
    background-color: var(--buttongreen);
    font-size: 10px;
    /* right: 25px; */
    top: 1px;
    left: 296px;
    border-radius: 100px;
    text-align: center;
    margin-top: 0px;
    font-weight: bold;
    color: #333333;
    -webkit-animation: 0.4s zoomIn forwards;
    animation: 0.4s zoomIn forwards;
}

.signal-transfers {
    position: relative;
    width: 17px;
    height: 17px;
    margin-left: -17px;
    line-height: 17px;
    vertical-align: middle;
    background-color: var(--buttongreen);
    font-size: 10px;
    /* right: 25px; */
    top: 1px;
    left: 77px;
    border-radius: 100px;
    text-align: center;
    margin-top: 0px;
    font-weight: bold;
    color: #333333;
}

.signal-training {
    position: relative;
    width: 17px;
    height: 17px;
    margin-left: -17px;
    line-height: 17px;
    vertical-align: middle;
    background-color: var(--buttongreen);
    font-size: 10px;
    /* right: 25px; */
    top: 1px;
    left: 238px;
    border-radius: 100px;
    text-align: center;
    margin-top: 0px;
    font-weight: bold;
    color: #333333;
}

.signal-kasse {
    position: relative;
    width: 17px;
    height: 17px;
    margin-left: -17px;
    line-height: 17px;
    vertical-align: middle;
    background-color: var(--buttongreen);
    font-size: 10px;
    /* right: 25px; */
    top: 1px;
    left: 63px;
    border-radius: 100px;
    text-align: center;
    margin-top: 0;
    font-weight: bold;
    color: #333333;
}

.signal__main {
    position: absolute;
    right: -7px;
    top: -7px;
    width: 1rem;
    height: 1rem;
    vertical-align: middle;
    background-color: var(--buttongreen);
    font-size: 9px;
    line-height: 15px;
    padding: 0;
    border-radius: 100px;
    text-align: center;
    margin-top: 0;
    font-family: var(--font-primary);
    color: var(--bg);
}

.signal__main--news {
    position: absolute;
    right: -1.5rem;
    top: 0;
    width: 1rem;
    height: 1rem;
    vertical-align: middle;
    background-color: var(--buttongreen);
    font-size: 9px;
    line-height: 15px;
    padding: 0;
    border-radius: 100px;
    text-align: center;
    margin-top: 0;
    font-family: var(--font-primary);
    color: var(--bg);
}

.box .signal {
    right:-6px !important;
    top:-6px !important;
}

.signal_hinten {
    width:1.5rem;
    height:1.5rem;
    line-height:1.5rem;
    vertical-align:middle;
    background-color:var(--buttongreen);
    font-size:10px;
    border-radius:100px;
    text-align:center;
    font-weight:bold;
    color:#333333;
    margin-top:7px;
    padding-top:6px;
}

.head_button.float_links .signal{
    left:30px !important;
}

.systemmail-container {
    height:auto;
    width:100%;
    margin-bottom:10px;   /* Abstand zwischen mehreren Systemmails */
}

.systemmmail_leer, .systemmail {
    width:90%;
    min-height:10px;
    height:auto;
    margin:0 1%;
}

.systemmail {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--app-text, #fff);
    font-family: "Inter";
    font-size: 13px;
    line-height: 1.45;
    padding: 12px 14px;
    height: auto;
    border-radius: 14px;
    white-space: pre-line;
    margin: 0 1em;
    max-width: 85vw;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    position: relative;       /* X-Button oben rechts */
    padding-right: 38px;
    box-sizing: border-box;
}

/* Schliessen-X (zusaetzlich zum Wegswipen — intuitiver fuer neue User) */
.systemmail_x {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--app-text, rgba(255,255,255,0.75));
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}
.systemmail_x:active { background: rgba(255,255,255,0.12); }

.systemmail_icon {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}

.systemmail_icon .svg {
    width: 22px;
    height: 22px;
}


.reihe {
    text-align:center;
    width:100%;
    display:block;
}

.box {
    display:inline-block;
    text-align:center;
    /*box-shadow:5px 5px 5px #222222;*/
    position:relative;
    border-radius:3px;
}

/*.box:active {
	background-color:#D2CC39 !important;
}*/

.box_klein {
    width:20%;
    height:60px;
    padding:10px 5px;
    font-size:13px;
}

.box_mittel {
    width:28%;
    height:70px;
    padding:15px 10px;
    font-size:14px;
}

.box_gross {
    width:80%;
}

.box_ganz {
    padding:2px 5px;
    font-size:13px;
    width:95%;
}

.greenOnly {
    color: var(--buttongreen);
}

.grauer_text {
    color:#999999 !important;
}

.greenText {
    color: var(--buttongreen);
}

.yellowText {
    color: var(--alert);
}

.grau {
    background-color:#64A517;/*#95B46B;/*#c8c238;/*#D4CD39;/*#666e82;*/
    color:#404040;/*#ffffff;*/
}

.grau path {
    /*fill:#ffffff !important;*/
    fill:#303030 !important;
}

.gruen {
    background-color:#A0C736;/*#a0c836;*/
    color:#00450b;

}

.highlight {
    background-color:#D2CC39 !important;
    /*background-image: linear-gradient(#64A517 0%, white 80%);*/
}

.gruen path {
    fill:#00450b !important;
}


.weiss {
    /*background-color: var(--dark2);*/
    color: var(--app-text, #fff) !important;
}

.weiss path {
    fill: #404040 !important;
}

.bg_weiss {
    /* Image background moved to the .bg_weiss::before fixed pseudo layer
       (see body::before rule). A solid fallback here keeps the layer opaque
       so it still hides the screen underneath it.

       isolation: isolate forces .bg_weiss to be its own stacking context so
       the z-index:-1 ::before image paints *above* this element's own solid
       background. Special layers (nachrichten / spielbericht) nest two
       .bg_weiss divs where the inner one isn't otherwise positioned — without
       this, the inner solid var(--bg) painted over the ::before image, which
       is the dark-gray overlay that hid the app background until you scrolled
       past the content. Swiper layers already got this for free via the
       swiper-container's z-index:1. */
    background: var(--bg);
    isolation: isolate;
    color:var(--app-text, #FFFFFF) !important;
    min-height:100%;
}

.bg-dark {
    background: var(--bg);
}

.bg-transparent {
    background: transparent;
}

.bg_green {
    background: var(--buttongreen);
    color: var(--dark2);
}

.standard_border_radius {
    border-radius: 6px;

}

.ansicht_spielplan, #login_bonus {
    font-size:13px;
    text-align:center;
    background-color:#ffffff;
    padding: 2px 2px 2px 2px;
    margin: 0 0 -2px 0;

    background-image: -webkit-linear-gradient(top, #333333 0%, #231B2A 100%);
    background-image: -moz-linear-gradient(top, #333333 0%, #231B2A 100%);
    background-image: -o-linear-gradient(top, #333333 0%, #231B2A 100%);
    background-image: linear-gradient(top, #333333 0%, #231B2A 100%);
}

.ansicht_geld, .ansicht_schwarzeKasse  {
    width:50%;
    display:inline-block;
    font-size:13px;
    text-align:center;
    background-color:yellow;
    padding: 2px 2px 2px 2px;
    margin: 0 0 6px 0;

    background-image: -webkit-linear-gradient(top, #333333 0%, #231B2A 100%);
    background-image: -moz-linear-gradient(top, #333333 0%, #231B2A 100%);
    background-image: -o-linear-gradient(top, #333333 0%, #231B2A 100%);
    background-image: linear-gradient(top, #333333 0%, #231B2A 100%);
}

#login_bonus {
    margin-top: -6px;
}

.ansicht_geld {
    color:#8cd130;
}

.ansicht_schwarzeKasse, #login_bonus {
    color:#F8D571;
}

.icon {
    display:inline-block;
    width:50px;
    height:30px;
    margin: -3px 0px;
    /*background: url(./no_pic.png) no-repeat 4px center;*/
}

.icon .svg {
    height:30px;
}

.icon_klein {
    width:28px;
    height:28px;
    margin-top:-2px;
}

.icon_mini {
    /*padding:5px;
    background-color:#A0C736;
    width:inherit;
    height:inherit;*/
}

.icon_mini img{
    width:60px !important;
    height:45px;
}

.bg_image_center {
    background-position:center center;
    background-repeat: no-repeat;
}

.positiv:not(.svg) {
    background-color:#A0C736 !important;
}

.svg.positiv circle {
    fill:#A0C736 !important;
}

.negativ:not(.svg) {
    background-color: var(--error15) !important;
}

.svg.negativ circle{
    fill:#DA0303 !important;
}


.aaw_positiv {
    color:#A0C736 !important;
}

.formular_error {
    border: 2px solid #DA0303 !important;
    background-color:#FAF0E6 !important;
}

.aaw_negativ {
    color:#DA0303 !important;
}

.icon_positiv, .icon_neutral, .icon_negativ {
    border-radius: 22px;
    font-size: 9px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    vertical-align: middle;
    color: var(--app-text, #ffffff);
    margin: -2px 0 0 8px;
    display: inline-block;
    padding-left: -5px;
}

.icon_positiv {
    background-color:#64A517;
}

.icon_negativ {
    background-color:#b22222;
}

.icon_neutral {
    background-color:var(--bg-main-opacity);
    color:var(--app-text, #fff);
    font-size: 8px;
}

.info {
    padding:5%;
}

.pos {
    padding: 2px 5px;
    border-radius: 3px;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    background-color: var(--dark3);
    color: var(--buttongreen);
    width: 65px;
    font-family: "MADEOuterSans";
}

.zeile .pos {
    margin: -5px 10px 0 -10px;
}

.zeile .einzeilig {
    height:40px;
    line-height:40px;
    vertical-align:middle;
    display:inline-block;
}

.zeile .einzeilig.zweizeilig {
    line-height:20px !important;
}

.schieber_wrapper {
    overflow:visible;
    white-space:nowrap;
    transform: translateX(0px);
}

.schieber {
    display: inline-block;
    transform: translateX(0px);
    padding: 5px;
    vertical-align:top;
    height:50px;
    border-bottom: 1px solid #cdcdcd;
    margin: 2px auto -1px auto;
}

.schieber .button {
    margin: 0 5px !important;
}

.schieber_inner {
    width: 76px;
    background-color:#818181;
    height:60px;
    line-height:100%;
    vertical-align:middle;
    color:#F0F0F0;
    display:inline-block;
    vertical-align:top;
    padding:3px;
}

.schieber_inner.aktion {
    background: #737373;
}

.schieber_inner div {
    width:100%;
    height:100%;
}

.wappen_wrapper {
    display: inline-block;
    text-align: center;
    font-weight: bold;
    width: 6em;
}

.wappen_wrapper .svg {
    width:60px;
    height:60px;
}

.vs {
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
    background-color: var(--bg);
    padding: 5px 10px 6px;
    font-size: 11px;
    border-radius: var(--border-radius-full);
    margin: 10px 0 8px 0;
}

.midPrognose {
    font-size: 7px;
    line-height: 1.2;
    padding: 4px 6px;
    background: var(--error15);
    color: var(--errorMessage);
    border-radius: var(--border-radius-xs);
    max-width: 70px;
}

.avg-team {
    font-size: 8px;
    color: var(--light-grey);
}

.team-name {
    font-size: 9px;
    margin: 6px 0;
    line-height: 1.1;
    line-break: after-white-space;
}

.scoreArea {
    line-height: 1;
    font-size: 30px;
}

.wappen {
    width:60px;
    height:60px;
    margin: 2px auto;
}

#spielinfos {
    width:100%;
    min-height: 200px;
    margin: 20px 0;
}

#spielinfos .loader {
    height:20px;
}

.spielinfo_wrapper {
    display:inline-block;
}

.spielinfo {
    padding-top:10px;
    font-size: 13px;
    display:inline-block;
}

#spielinfos .swiper-slide {
    width: 98%;
    position: relative;
    left: 0px;
}

.topLine {
    font-size: 1rem;
    line-height: 1;
    margin-bottom: 6px;
}

.grid_3s-start {
    display: grid;
    justify-content: stretch;
    grid-template-columns: min-content auto min-content;
    grid-template-rows: auto;
    align-items: center;
    gap: 0.1em;
    justify-items: center;
    margin: 1.5rem 0;
}

.bottomLine {
    font-family: "Inter";
    color: var(--nebensatz);
    text-transform: none;
    font-size: 12px;
}

.box__area {
    display: flex;
    flex-direction: column;
}

.spielinfo_box {
    display: block !important;
    border-radius: var(--border-radius-md);
    padding: 1.5rem;
    padding-bottom: 0.4rem;
    margin: 0 5%;
    /* Match the home-tile border so the spielinfo block reads as part of
       the same visual family (thinner, less gray, more white). */
    border: 1px solid rgba(255, 255, 255, 0.6);
}

.spielinfo_button {
    padding: 7px 15px;
    text-align: center;
    font-size: 15px;
    font-weight: 400;
    line-height: 1;
}

.spielinfo_gruen {
    /* background-image: -webkit-linear-gradient(top, #A0C736 0%, #64A517 100%); */
    /*background-image: -moz-linear-gradient(top, #A0C736 0%, #64A517 100%);
    background-image: -o-linear-gradient(top, #A0C736 0%, #64A517 100%);
    background-image: linear-gradient(top, #A0C736 0%, #64A517 100%); */
    color: var(--app-text, #ffffff);
    padding: 14px 15px;
    /*text-transform: uppercase;*/
    background: var(--buttongreen);
    color: black;
}

.spielinfo_grau {
    /* background-image: -webkit-linear-gradient(top, #AAAAAA 0%, #666e82 50%); 
    background-image: -moz-linear-gradient(top, #AAAAAA 0%, #666e82 50%);
    background-image: -o-linear-gradient(top, #AAAAAA 0%, #666e82 50%);
    background-image: linear-gradient(top, #AAAAAA 0%, #666e82 50%); */
    color: var(--buttongreen);
    background: var(--dark3);
    /*text-transform: uppercase;*/
    font-family: "MADEOuterSans";
}


.headArea {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    line-height: 1;
    padding: 20px;
    background: #0a0c0c;
    position: relative;
    top: 0;
    z-index: 999;
    width: 100%;
}

.KoFLogo {
    width: -webkit-fill-available;
    text-align: center;
}

#bewertung_box {
    min-height:72px;
}

#bewertung_box > *{
    -webkit-animation: 0.4s fadeIn forwards ;
    animation: 0.4s fadeIn forwards;
}

/*
SPLASH
*/

#logo {
    height:100px;
    width:150px;
    background: url(../new_img/Logo.png) no-repeat center center;
    background-size: contain;
    margin:10px auto;
}

#logo img {
    width:100%;
}

#splash_content{
    color:var(--app-text, #ffffff);
    width:100%;
    position: absolute;
    top: -2em;
}

.forgotPW {
    background: none;
    height: 35px;
    width: 100%;
    text-align: center;
    margin-top: 1em;
    color: #63FF9F;
    font-size:1rem;
    font-weight:900;
}

/*#login, #registrieren {
    max-height:0px;
    overflow:hidden;
    opacity: 0;
    text-align:center;
}

#login.slide_down_and_fade_in, #registrieren.slide_down_and_fade_in {
    -webkit-animation: 1.8s slideDownAndFadeIn forwards ;
    animation: 1.8s slideDownAndFadeIn forwards;
}

#login.slide_up_and_fade_out, #registrieren.slide_up_and_fade_out {
    -webkit-animation: 1.8s slideUpAndFadeOut forwards;
    animation: 1.8s slideUpAndFadeOut forwards;
}*/

.go-up-button {
    position: fixed;
    /* background: var(--alert15); */
    width: 45px;
    height: 45px;
    /* border-radius: 19px; */
    right: 0px;
    bottom: 100px;
    padding: 3px;
}

#video {
    position: fixed;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    /*filter: blur(13px);
    -webkit-backdrop-filter: blur(13px);*/
}

.login_button {
    width: 90%;
    padding: 14px;
    background-color: #63FF9F;
    border-radius:0;
    font-size:14px;
    /*%20font-weight:%20bold;%20*/
    margin:8px auto;
    text-align: center;
    background-repeat: no-repeat;
    background-position: 4px center;
    color:#091420;
    letter-spacing:unset;
    position: absolute;
    bottom: 0;
}

.mac-login {
    bottom: 14rem !important;
    font-family: "MADEOuterSans";
    margin-left: 5% !important;
}

.mac-login-registration {
    position: relative;
    bottom: unset;
    font-family: "MADEOuterSans";
    top: 7rem;
    width: 100%;
}

.facebook {
    background: url(../img/facebook.png) no-repeat 4px center;
    background-size: contain;
    background-color: #3b5998;
    padding-left: 26px !important;
    position: relative;
    color: var(--app-text, white);
    font-family: "MADEOuterSans";
}

.facebook-registration {
    background: url(../img/facebook.png) no-repeat 4px center;
    background-size: contain;
    background-color: #3b5998;
    padding-left: 26px !important;
    position: relative;
    color: var(--app-text, white);
    top: 15rem;
    font-family: "MADEOuterSans";
    width: 100%;
}

.google {
    background: url(../img/google.png) no-repeat 4px center;
    background-size: contain;
    background-color:#cc3732;
    padding-left: 26px !important;
}

.button_loading img{
    width:18px;
    height:18px;
    margin: 0 10px;
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
    /* background-repeat: no-repeat;
     background-position:20px 8px ;
     background-image: url(../img/loader.gif) !important;
     background-size: auto 30px !important;
     padding-left: 26px !important;*/
    /*opacity:0.6  !important;*/
}

#registrieren {
    text-align: center;
    margin-top: 3rem;
    width: 90%;
    margin-left: 5%;
}

/*
NAME
*/

#name_content  {
    width:100%;
    height: 92vh;
    padding:5%;
    color:var(--app-text, #ffffff);
    position: absolute;
    top: 0px;
}

.subcontent {
    width:100%;
    color:var(--app-text, #ffffff);
    min-height:100%;
    width: 90%;
    margin-left: 5%;
}

.input_check {
    width:100%;
    line-height:12px;
    margin:auto;
}

.input_check div {
    display:inline-block;
    width:10%;
    height:212px;
    margin:0 1%;
    vertical-align:middle;
}

.input_check input {
    width:100%;
    display:inline-block;
}

.input_check div.ok{
    background: url(../img/ok.png) no-repeat center center / contain;
}

.input_check div.no {
    background: url(../img/cancel.png) no-repeat center center / contain;
}

.input_check div {
    /*background: url(../img/loader.gif) no-repeat center center / contain;*/
}


.SignupTitle {
    font-size: 22px;
    padding: 0 15px;
}
/*
WELT
*/

#welten .button {
    width:20px;
    height:20px;
}

#welt_suche_ergebnis {

}

#verein, #verein_details {
    width:100%;
}

/*
VEREIN
*/

#verein .transferhistorie .zeile {
    border:0;
}

#verein .transferhistorie .zeile_outer{
    border-bottom: 1px solid #cdcdcd;
    pading-bottom:2px;
}

#verein .transferhistorie .zeile_outer .svg {
    height:20px;
    margin: 0 3px;
}

#verein .button {
    width:90%;
    margin:10px auto;
    display:block;
}

#verein .wappen {
    height: 80px !important;
}

.oben {
    min-height:100px;
}

.delete-account {
    color: var(--errorMessage);
    text-decoration: none;
}

.oben .hauptzeile {
    padding-top: 38px;
    /*text-transform: uppercase;*/
}

/*
TRAINING
*/
#trainingswerte {
    position:absolute;
    width:60px;
    display:inline-block;
}

.wertebox {
    display:inline-block;
    width:60px;
    margin:5px 5px 0px 5px;
    background-color:#cccccc;

    overflow:hidden;
    height:58px;
    box-shadow:3px 3px 3px #222222;
    border-radius:0px;
}

.wertebox .uber {
    background-color:#737373;
}

.wertebox div:not(.uber) {
    font-size: 14px;
    line-height: 1;
    font-family: var(--font-primary);
    display: flex;
    justify-items: center;
    flex-direction: column;
}

.volle_info {
    width:140px;
}

/*.volle_info .volle_info_item {
    display:block;
}

.volle_info .kurze_info_item {
    display:none;
}

.wertebox:not(.volle_info) .volle_info_item {
    display:none;
}

.wertebox:not(.volle_info) .kurze_info_item {
    display:block;
}*/

#trainingswerte .uber {
    padding:2px 5%;
    background-color:#737373 !important;
    color:#f0f0f0 !important;
    font-size:14px;
    margin-bottom:2px;
}

#training_box_feld, #trainingswochen_feld, #training_box_tw, #trainingswochen_tw, #training_box_tw .systemmail-container, #training_box_feld .systemmail-container {
    width:100%;
    padding: 10px 0px 10px 165px;
    text-align:center;
    padding-right: 13px;
}

#training_feld .uber, #training_tw .uber {
    padding:5px 5%;
    background-color:#64A517;
    color: var(--app-text, #ffffff);
    font-size:14px;
    margin-bottom:2px;
    text-align:center;
}

.training_box {
    width: 100%;
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.trainingseinheiten__perks {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.training_box .titel, #training_feld .uber, #training_tw .uber, .titel {
    padding:5px 5%;
    color: var(--app-text, white);
    font-family: var(--font-primary);
    font-size:14px;
    margin:0 auto 2px auto;
    text-align:center;
    /*border-bottom:1px solid #999999; */
    background-color:var(--bg);
}

.training_box .titel {
    color: var(--color-white);
    font-family: var(--font-primary);
    font-size:12px;
    text-align:center;
    /*text-transform: uppercase;*/
    padding: 0;
    margin: 0;
}

.seitentitel {
    padding:5px;
    color: #999999;
    font-size:14px;
    margin:0 0 2px 6px;
    text-align:center;
    border-bottom:1px solid #999999;
    background-color:#f0f0f0;
    width: 100%;
}

.training_box:nth-child(even) {
    background-color: transparent;
}

.trainingseinheit .icon {
    background-color: var(--bg);
    width: 48px;
    height: 48px;
    border-radius:99rem;
    margin: 0 auto;
}

.trainingseinheit {
    font-size: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: #999999;
    font-family: var(--font-secondary);
}

.trainingseinheit.selected {
    background-color:#bbbbbb;
}

#trainingswochen_feld .button, #trainingswochen_tw .button{
    width:46%;
    margin:4px 2%;
    font-size:13px;
}

#training_cotrainer {
    text-align:center;
}

#training_feld_speichern {
    margin:5px auto 0 auto;
}

.spezial_faehigkeit_2 .st1 {
    fill:#64A517 !important;
}

.spezial_faehigkeit_1 .st1 {
    fill:#a0c836 !important;
}

.spezial_faehigkeit_-2 .st1 {
    fill:#DA0303 !important;
}

.spezial_faehigkeit_-1 .st1 {
    fill:#ff8080 !important;
}

/* Neue Spezialfaehigkeit-Level-Badges (horizontal: Icon + LEVEL/Wert).
   viewBox 104x48 -> bei fester Hoehe automatisch ~2.17:1 breit. */
.spezial_badge { height: 30px; width: auto !important; vertical-align: middle; display: inline-block; }
.sp-chip .spezial_badge { height: 30px !important; width: auto !important; margin: 0 !important; }
.tr-talent .spezial_badge, .tr-scard-faehig .spezial_badge { height: 26px !important; }
.tm-pick-sub .spezial_badge { height: 24px !important; }

/*#training_feld_einheiten_auswahl {
    width: 300px;
    text-align:center;
    background-color:blue;
    margin:auto;
    padding:5px;
    border-radius:3px;
    vertical-align:middle;
}

#training_feld_einheiten_auswahl .button {
    width:80px;
    margin:5px;
    display:inline-block;
}*/

/*
TEAM
*/

.geschoben {
    transform: translateX(-76px);
}

.schieber.geschoben {
    transform: translateX(-100%);
}

/*
VERHANDLUNGEN
*/

.button_dauer {
    width:47px;
    margin: -3px 3px !important;
}

.button_verhandlungen {
    width: 100px;
    margin: -3px 3px !important;
}

#abloese_error {
    color:#DA0303;
    background-color:#f7d7d7;
    padding:3px;
    border-radius:3px;
}


input.error {
    border:1px solid #DA0303;
}

/*
AUFSTELLUNG
*/
#aufstellung {

}

#aufstellung_spieler {
    width: 93%;
}

.aufstellung_feld {
    background: url("../img/aufstellung/spielfeld.svg") no-repeat center center / 100% 100%;
    padding: 22px 8px;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-sizing: border-box;
}

.aufstellung_bank {
    background-color: var(--dark3);
    /* Min-Height + auto: bei 6 Slots auf grossen Phones eine Reihe,
       auf kleinen Phones (z.B. iPhone SE) erlaubt es einen sauberen Umbruch
       statt die Slots zu ueberlappen. */
    min-height: 4em;
    height: auto;
    padding: 3px 0 5px 0;
    text-align: center;
    width: 90%;
    margin-left: 5%;
    margin-top: 1em;
    margin-bottom: 4em;
}

.aufstellung_formation_wrapper {
    height:100%;
    /*margin-top:-20px; */
    overflow:hidden;
}

.aufstellung_formation {
    margin-top:20px;
    background-image: -webkit-linear-gradient(top, #A0C736 0%, #64A517 100%);
    background-image: -moz-linear-gradient(top, #A0C736 0%, #64A517 100%);
    background-image: -o-linear-gradient(top, #A0C736 0%, #64A517 100%);
    background-image: linear-gradient(top, #A0C736 0%, #64A517 100%);
    position:relative;
}

.aufstellung_formation_formation {
    vertical-align:middle;
    margin:10px 0;
}

.aufstellung_feld div, .aufstellung_bank div {
    display:inline-block;
    text-align:center;
    vertical-align:middle;
}

.aufstellung_feld > div {
    vertical-align:top;
}

.aufstellung_formation, .aufstellung_tw, .aufstellung_lv, .aufstellung_rv, .aufstellung_iv, .aufstellung_dm, .aufstellung_zm, .aufstellung_om, .aufstellung_st {
    height:60px;
}

.aufstellung_tw, .aufstellung_st, .aufstellung_dm, .aufstellung_zm, .aufstellung_om {
    width:100%;
}

.aufstellung_lm, .aufstellung_rm {
    width:20%;
    height:180px;
}

.aufstellung_leer {
    height:30px;
}

.aufstellung_lm.aufstellung_leer, .aufstellung_rm.aufstellung_leer {
    height:150px;
    margin-top:45px;
}

.aufstellung_lm.aufstellung_leer2, .aufstellung_rm.aufstellung_leer2 {
    height:120px;
    margin-top:30px;
}

.aufstellung_lv, .aufstellung_rv {
    width:20%;
}

.aufstellung_ozdm,.aufstellung_iv {
    width:60%;
}

.aufstellung_bank .aufstellung_spieler_platzhalter {
    margin:3px 5px 0 5px;
}

.aufstellung_runder_button {
    width:120px;
    height:120px;
    background-image: -webkit-linear-gradient(135deg, #A0C736 0%, #64A517 100%);
    background-image: -moz-linear-gradient(135deg, #A0C736 0%, #64A517 100%);
    background-image: -o-linear-gradient(135deg, #A0C736 0%, #64A517 100%);
    background-image: linear-gradient(135deg, #A0C736 0%, #64A517 100%);
    border:4px solid #64A517;
    position:absolute;
    right:-40px;
    top:-20px;
    border-radius:80px;
    color:#
}

.aufstellung_runder_button img{
    height:40px;
    margin: 25px 0 0 25px;
}

.aufstellung_spieler{
    width:50px;
    height:50px !important;
    margin:3px 5px 0 5px;
    position:relative;
    -webkit-animation: 0.4s zoomIn forwards ;
    animation: 0.4s zoomIn forwards;
}

.aufstellung_spieler_trikot_mit_nummer {
}

.aufstellung_spieler_trikot_mit_nummer div {
    width:50px;
    left:0;
    top:-55px;
    position:relative;
    text-align:center;
    vertical-align:middle;
    /* Rueckennummer-Farbe nach Vereinsregel (--ownFontColor); Fallback hell. */
    color: var(--ownFontColor, #eeeeee);
    line-height:50px;
}

.aufstellung_spieler_trikot_mit_nummer .svg, .aufstellung_spieler_trikot_mit_nummer svg {
    height:inherit;
    width:inherit;
}

.spielbericht_aufstellung_bank .aufstellung_spieler {

}

.aufstellung_spieler_platzhalter {
    line-height:50px;
    font-size:12px;
    color:#eeeeee;
    background: url(../img/trikot_leer.svg) no-repeat center center / contain ;
    opacity:0.6;
}

.aufstellung_spieler_trikot, .aufstellung_spieler_name {
    margin:0 0 0 0;
    overflow:hidden;
}

.aufstellung_spieler_trikot {
    height:46px;
    width:50px;
    line-height:46px;
    margin-top:-5px;
    font-size:18px;
    color:#283515;
}

.aufstellung_spieler_name {
    display:block !important;
    width:60px;
    margin-left: -5px;
    line-height:14px;
    color:var(--app-text, #ffffff);
    background-color:hsl(0, 60%, 0.06);
    border-radius:3px;
    text-align:center;
    margin-top: -60px;
}

.aufstellung_spieler_info {
    position:absolute;
    width:1.5rem;
    height:1.5rem;
    line-height:22px;
    vertical-align:middle;
    background-color:#cccccc;
    font-size:10px;
    right:-6px;
    top:0px;
    border-radius:100px;
    text-align:center;
    margin-top:-6px;
    font-weight:bold;
    border:2px solid #ffffff;
}

.aufstellung_spieler_info.mteil {
    background-color: #FFCC00;
}

.aufstellung_spieler_info.fremd {
    background-color: #DA0303;
}

.aufstellung_formation_formation {
    display:inline-block;
    color:var(--app-text, #ffffff);
    padding: 0 5%;
}

.aufstellung_formation_formation_anzeige {

}

.aufstellung_liste {
    border-top:4px solid #64A517;
}

.aufstellung_details {
    display:none;
}

.aufstellung_es {
    padding: 5px 10px;
    background-color: var(--trenner);
    color: var(--app-text, #ffffff);
    position: absolute;
    top: 0;
    right: 5%;
    border-radius: var(--border-radius-sm);
    width: max-content;
    font-family: var(--font-primary);
    text-align: center;
}

.rot {
    background-color:red;
}

/*
FREUNDSCHAFTSSPIEL
*/
.disabled {
    background-color:#cccccc !important;
}

#fss_neu .sel {
    background-color:#64A517 !important;
}

.deg90_wrapper {
    transform: rotate(90deg);
    padding: 0px !important;
    width:1rem;
    white-space: nowrap;
}

.deg90 {
    white-space: nowrap;
    transform:translateX(-30px);
}

/*
TAKTIK
*/
#auswahl_ausrichtung_einsatz {
    margin:15px auto;
    line-height:100%;
}

#auswahl_ausrichtung_einsatz .icon {
    width:20%;
    height:auto;
    display:inline-block;
    tet-align:center;
}

#auswahl_ausrichtung_einsatz .icon img {
    width:50px;
    height:auto;
    vertical-align:middle;
}

#auswahl_ausrichtung_einsatz_drag {
    width:80%;
    margin:5px auto;
    display:inline-block;
    vertical-align:middle;
}

#auswahl_ausrichtung_einsatz_drag .handle {
    width:100px !important;
}

#taktik_ausrichtung_einsatz .art_icon {
    width:40px;
    height:40px;
}

#taktik_ausrichtung_einsatz table {
    margin:auto;
    max-width:100%;
}

#taktik_ausrichtung_einsatz th {
    background-color:#64A517 !important;
    color: var(--app-text, #ffffff);
    padding:10px 1rem;
}

#taktik_ausrichtung_einsatz th circle {
    fill:#64A517 !important;
}

#taktik_ausrichtung_einsatz th.legende {
    padding: 5px;
}

#taktik_ausrichtung_einsatz td {
    /*width:100%;
    height:100%;*/
    background-color:transparent !important;
}

#taktik_ausrichtung_einsatz th.th_grau {
    background-color: #cccccc !important;
    height:48px;
}

#taktik_ausrichtung_einsatz .taktik_feld {
    /*background-color:#cccccc;*/
    height:40px;
    width:40px;
    border-radius:40px;
    margin: 4px auto;
}

#taktik_ausrichtung_einsatz th.halbzeit {
    padding:3px;
}

#taktik_ausrichtung_einsatz .auswahlfeld_wrapper {
    display:inline-block;
    text-align:center;
    vertical-align:top;
    margin: 2px 5px;
    padding:5px;
    width:75px;
    border-radius:3px;
}
#taktik_ausrichtung_einsatz .auswahlfeld {
    display:inline-block;
    width:60px;
    height:60px;
    border-radius:60px;
    margin:auto;
}

#taktik_ausrichtung_einsatz .auswahlfeld.selected {
    border:2px solid #000000;
}

#taktik_ausrichtung_einsatz .auswahlfeld_wrapper.selected {
    background-color:#FF9800;
}

/*
SPIELBERICHT
*/
#spielbericht .minute {
    font-size: 10px;
    line-height: 1;
    font-weight: normal;
    color: var(--app-text, #ffffff);
    background: var(--color-darkred);
    padding: 2px 4px 3px;
    width: max-content;
    border-radius: var(--border-radius-xs);
    margin: 0 auto -17px;
    text-align: center;
    font-family: var(--font-primary);
}

#spielbericht .ergebnis {
    font-size: 40px;
    font-weight: bold;
    color: var(--app-text, #ffffff);
    display: inline-block;
    width: 100%;
    padding-top: 0px;
    vertical-align: top;
}

#spielbericht .wappen {
    display: inline-block;
    width: 100%;
    /* padding-bottom: 10px; */
    text-align: center;
}

#spielbericht .wappen .svg {
    width:auto;
    height:60px;
    /*margin:-20px 0 -40px 0;*/
}

#spielbericht .verein_name {
    font-weight: normal;
    font-size: 12px;
    /* width: 37%; */
    display: inline-block;
    padding: 5px;
    text-align: center;
    height: 30px;
    color: var(--app-text, white);
    font-family: "MADEOuterSans";
    letter-spacing: 0.1px;
}

#spielbericht .spielbericht_taktik {
    display: flex;
    background-color: var(--dark3);
    text-align: center;
    padding: 3px;
    gap: 3px;
    border-radius: var(--border-radius-full);
    vertical-align: bottom;
    flex-direction: row;
}

#spielbericht .spielbericht_taktik img {
    width:1.5rem;
}

#spielbericht_stenogramm tr td:first-child, #spielbericht_stenogramm tr td:last-child {
    width:45%;
}

#spielbericht_stenogramm td {
    padding:11px 5px;
}

#spielbericht .stenogramm_minute, #spielbericht .spielbericht_minute {
    border-radius: 99px;
    width: 28px;
    height: 28px;
    color: var(--app-text, #ffffff);
    background-color: var(--secondary-color);
    font-weight: normal;
    font-family: var(--font-primary);
    display: inline-block;
    font-size: 10px;
    line-height: 28px;
}

#spielbericht .stenogramm_spezial {
    border-radius: 3px;
    color: var(--app-text, #ffffff);
    background-color: var(--dark3);
    text-align: center;
    display: inline;
    padding: 1px 6px 3px;
    font-family: var(--font-primary);
    font-size: 12px;
    /*text-transform: uppercase;*/
}

#spielbericht .steno_pic {
    width:30px;
    height:30px;
    vertical-align:top;
    margin: 0 5px;
}

#spielbericht .stenogramm_info {
    line-height:30px;
    vertical-align:middle;
    height:30px;
}

#spielbericht .stenogramm_info_doppel {
    line-height:1rem !important;
    vertical-align:middle;
    height:60px !important;
    padding:-5px;
    margin-top:-10px;
}

#spielbericht .stenogramm_timeline_wrapper {
    position:relative;
}

#spielbericht .stenogramm_timeline {
    width: 2px;
    background-color: var(--dark3);
    position: absolute;
    left: 50%;
    margin-top: 10px;
    margin-left: -2px;
}

#spielbericht_stenogramm table {
    z-index:1;
    position:relative;
}

#spielbericht .spielbericht_aufstellung {
    background: url("../img/feld.png") no-repeat center center / 100% auto;
    padding:10px 0;
}

#spielbericht .spielbericht_aufstellung_bank, #spielbericht .spielbericht_aufstellung_formation, #spielbericht .spielbericht_aufstellung_tw, #spielbericht .spielbericht_aufstellung_lv, #spielbericht .spielbericht_aufstellung_rv,
#spielbericht .spielbericht_aufstellung_iv, #spielbericht .spielbericht_aufstellung_dm, #spielbericht .spielbericht_aufstellung_zm, #spielbericht .spielbericht_aufstellung_om, #spielbericht .spielbericht_aufstellung_st {
    height:30px;
    line-height:30px;
    width:100%;
}

#spielbericht .spielbericht_aufstellung_lm, #spielbericht .spielbericht_aufstellung_rm {
    width:20%;
    height:90px;
    line-height:90px;
}

#spielbericht .spielbericht_aufstellung_leer {
    height:15px;
}

#spielbericht .spielbericht_aufstellung_lm.spielbericht_aufstellung_leer, #spielbericht .spielbericht_aufstellung_rm.spielbericht_aufstellung_leer {
    height:75px;
    margin-top:22px;
}

#spielbericht .spielbericht_aufstellung_lm.spielbericht_aufstellung_leer2, #spielbericht .spielbericht_aufstellung_rm.spielbericht_aufstellung_leer2 {
    height:60px;
    margin-top:15px;
}

#spielbericht .spielbericht_aufstellung_lv, #spielbericht .spielbericht_aufstellung_rv {
    width:20%;
}

#spielbericht .spielbericht_aufstellung_ozdm, #spielbericht .spielbericht_aufstellung_iv {
    width:60%;
}

.spielbericht_aufstellung_spieler {
    width:30px;
    height:30px !important;
    margin:3px 5% 0 5%;
    position:relative;
    line-height:30px;
    font-size:7px;
    color:#eeeeee;
    vertical-align:middle;
}

.spielbericht_aufstellung_spieler div {
    width:30px;
    left:0;
    top:-45px;
    position:relative;
    text-align:center;
    font-weight: 700;
    font-family: var(--font-secondary);
    line-height: 30px;
    font-size: 8px;
    color: #eeeeee;
}

.spielbericht_aufstellung_spieler svg{
    width:30px;
}

.spielbericht_aufstellung {
    width:100%;
}

.spielbericht_aufstellung div, .spielbericht_aufstellung_bank div {
    display:inline-block;
    text-align:center;
    vertical-align:middle;
}

.spielbericht_trenner {
    width:100%;
    height:15px;
}

.spielbericht_uber {
    background-color:#cccccc;/*#666e82;*/
}

.spielbericht_uber, .spielbericht_spezial {
    left:50%;
    /*height:22px;*/
    font-weight:700;
    margin: 15px 0 4px -25px;
    line-height:22px;
    vertical-align:middle;
    border-radius:3px;
}

.spielbericht_minute {
    margin: 0 10px 0 0;
    background-color: transparent !important;
}

.spielbericht_minute img {
    width:100%;
    height:100%;
}

#spielbericht #spielbericht_spiel {

}

#spielbericht .spielbericht_timeline_wrapper {
    position:relative;
}

#spielbericht .spielbericht_timeline {
    width:2px;
    background-color: #cccccc;/*#666e82;*/
    position:absolute;
    left:14px;
    margin: 10px 0 -10px 0;
    top:10px;
}

#spielbericht .spielbericht {
    z-index:1;
    position:relative;
}

#spielbericht .fixed {
    z-index:1000;
}

#spielbericht img {
    vertical-align:middle;
}

.spielbericht_farbe2 {
    color:var(--buttongreen);
}

.spielbericht_farbe1 {
    color:var(--trenner);
}

#spielbericht .minutenanzeige {
    padding: 0 5px;
    color: #777777 !important;
}

#spielbericht .spielbericht_pause {
    padding: 1px 20px;
    background-color:#676f80;;
    display:inline-block;
    margin-top:-2px;
    border-bottom-left-radius: 3px;
    display:none;
}

#spielbericht .spielbericht_pause .svg {
    height:30px;
}

#spielbericht .spielbericht_pies {
    padding: 5px;
}

#spielbericht .spielbericht_pies div {
    display:inline-block;
    width:33%;
}

#spielbericht .spielbericht_pies canvas {
    width:100%;
    height:80px;
}

#spielbericht #spielbericht_statistiken table {
    width:100%;
    border-spacing:0;
    border-collapse:collapse;
}

#spielbericht #spielbericht_statistiken tr:nth-child(odd) {
    background-color:var(--dark3);
}

#spielbericht #spielbericht_statistiken th  {
    padding:5px 5%;
    background-color:var(--trenner);
    color: var(--app-text, #ffffff);
}

#spielbericht #spielbericht_statistiken  td, #spielbericht #spielbericht_statistiken th {
    padding: 2px 5px;
}

#spielbericht #spielbericht_statistiken table td:first-child, #spielbericht #spielbericht_statistiken table td:nth-child(5) {
    width:10%;
    padding: 2px 8px;
}

#spielbericht #spielbericht_statistiken table td:nth-child(2), #spielbericht #spielbericht_statistiken table td:nth-child(4) {
    width:30%;
}

#spielbericht #spielbericht_statistiken table td:nth-child(3) {
    width:20%;
}

#spielbericht .spielbericht_statistiken_balken {
    height:1.5rem;
    display:inline-block;
    vertical-align:middle;
    margin:2px 0;
}

#spielbericht .spielbericht_aktionen_wrapper {
    background: url("../img/feld_spielbericht.png") no-repeat center center / 100% auto, url("../img/rasen.png") repeat-y center center / 100% auto;;
    border-radius:3px;
}

#spielbericht .spielbericht_aktionen_feld {
    height:40px;
    line-height:40px;
    vertical-align:middle;
    color:var(--app-text, #ffffff);
    text-align:center;
    margin: 1px 0;
}

/*
NACHRICHTEN
*/
.nachricht_senden {
    width:60px;
    height:40px;
    /*background: url("../img/nachrichten/mail_schreiben.svg") no-repeat center center / 100% auto;*/
}

.nachricht_senden img {
    margin-top: -8px;
}

.chat_info{
    position:fixed;
    height:60px;
    width:100%;
    top:48px;
    background-color:#64A517;
    left:0;
}

.chat_info * {
    color:var(--app-text, #ffffff) !important;
}

#nachrichten_pn_chat {
    padding: 65px 5px 100px 5px;
}

#nachrichten_pn, #nachrichten_land, #nachrichten_liga, #nachrichten_international {
    padding: 20px 5px 100px 5px;
}

.chat_text {
    /* padding-bottom: 0.5em !important; */
    height: 102px;
    border-top: 3px solid var(--buttongreen);
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 5px;
    left: 0;
    background-color: var(--dark3);
    /* margin-bottom: 0.5em; */
}

.chat_text textarea{
    width: 85%;
    height:76px;
    border:0;
    color: var(--app-text, white);
}

.chat_text .button_wrapper{
    width: 10%;
    height:76px;
    margin: 0 0 0 3%;
    display:inline-block;
    vertical-align:top;
    text-align:center;
}

.chat_text .button{
    display:block;
    margin: 4px 0;
    height:37px;
}

.chat_text .button img{
    margin-top: -11px;
}

.smilie_box {
    margin-top: 60px;
    border-top: 3px solid var(--buttongreen);
    background-color: var(--dark2);
    text-align: center;
    position: fixed;
    bottom: 105px;
    width: 100%;
    left: 0;
}

.smilie_box img {
    margin:4px 8px;
    width:25px;
    height:auto;
}

.nachrichten {
    padding: 0 5px;
}

.nachricht_l,  .nachricht_r {
    max-width:90%;
    padding:5px 10px;
    margin:5px 0;
    border-radius:3px;
    display:inline-block;
}

.nachricht_wrapper_r {
    text-align:right;
}

.nachricht_r {
    background-color:var(--trenner);
    /*border:2px solid #7D986A; */
}

.nachricht_l {
    border: 2px solid var(--dark3);
    background-color: var(--dark2);
}

.nachricht_l img,  .nachricht_r img {
    height:15px;
    width:auto;
    vertical-align:top;
    margin-top:2px;
}

.nachrichten_zeitangabe {
    font-size:10px;
    text-align:right;
}

.nachricht_wer {
    font-size:10px;
}

.nachrichten .geklickt {
    background-color:#F37A20;
}

/*
STADION
*/

.stadion_kapazitaet {
    padding: 5px 5%;
}

#stadion_ansicht {
    border-spacing:0;
    margin:10px auto;
}

#stadion_ansicht td {
    padding:0px;
    text-align:center;
    vertical-align:top;
}

#stadion_ansicht .kurve {
    width: 28px;
    height:100px;
    display:inline-block;
    line-height:100px;
    color:#E2E2E2;
    margin: 2px 0;
    background-color:#E2E2E2;
}

#stadion_ansicht .gerade {
    width: 80px;
    height: 28px;
    display:inline-block;
    color:#E2E2E2;
    margin: 0 2px -1px 2px;
    background-color:#E2E2E2;
}

#stadion_ansicht .gerade_kurz {
    width: 80px;
    height: 20px;
    display:inline-block;
    color:#E2E2E2;
    background-color:#E2E2E2;
}

#stadion_ansicht .loge {
    height:12px;
    background-color:#E2E2E2;
    margin: -1px 2px 3px 2px;
}

#stadion_ansicht img {
    width:163px;
    height:100px;
    background-size: cover;
    margin:2px;
    border:0;
}

#stadion_ansicht .logeblock {
    height:10px;
    background-color:#E78200;
    margin: -1px 2px 3px 2px;
    line-height:10px;
    font-size:8px; vertical-align:middle;
    color:var(--app-text, #ffffff);
}

#stadion_ansicht .ecke div {
    /*position:relative;*/
    display:inline-block;
}

#stadion_ansicht .loge:hover {
    cursor:pointer;
}

#stadion_ansicht .ecke_NW3, #stadion_ansicht .ecke_SW3, #stadion_ansicht .ecke_NO3, #stadion_ansicht .ecke_SO3 {
    width:90px;
    height:90px;
    margin:auto;
    background-color:#E2E2E2;
}

#stadion_ansicht .ecke_NW2_space, #stadion_ansicht .ecke_SW2_space, #stadion_ansicht .ecke_NO2_space, #stadion_ansicht .ecke_SO2_space {
    background-color:#eeeeee;
    width:62px;
    height:62px;
}

#stadion_ansicht .ecke_NW2, #stadion_ansicht .ecke_SW2, #stadion_ansicht .ecke_NO2, #stadion_ansicht .ecke_SO2 {
    width:59px;
    height:59px;
    background-color:#E2E2E2;
}

#stadion_ansicht .ecke_NW1_space, #stadion_ansicht .ecke_SW1_space, #stadion_ansicht .ecke_NO1_space, #stadion_ansicht .ecke_SO1_space {
    background-color:#eeeeee;
    width:31px;
    height:31px;
}

#stadion_ansicht .ecke_NW1, #stadion_ansicht .ecke_SW1, #stadion_ansicht .ecke_NO1, #stadion_ansicht .ecke_SO1 {
    width:28px;
    height:28px;
    background-color:#E2E2E2;
}

#stadion_ansicht .ecke_NW3, #stadion_ansicht .ecke_NW3 div {
    vertical-align:bottom;
    text-align:right;
}

#stadion_ansicht .ecke_NW3 {
    border-top-left-radius: 100%;
}
#stadion_ansicht .ecke_NW2_space {
    border-top-left-radius: 100%;
    /*top:40px; Wegen Bezeichnung */
    margin: 28px 0 0 3px;
}
#stadion_ansicht .ecke_NW2 {
    border-top-left-radius: 100%;
    margin:3px 0 0 0 ;
}
#stadion_ansicht .ecke_NW1_space {
    border-top-left-radius: 100%;
    margin: 28px 0 0 3px;
}
#stadion_ansicht .ecke_NW1 {
    border-top-left-radius: 100%;
    margin:3px 0 0 0 ;
}

#stadion_ansicht .ecke_NO3, #stadion_ansicht .ecke_NO3 div {
    vertical-align:bottom;
    text-align:left;
}

#stadion_ansicht .ecke_NO3 {
    border-top-right-radius: 100%;
}
#stadion_ansicht .ecke_NO2_space {
    border-top-right-radius: 100%;
    /*top:40px; Wegen Bezeichnung */
    margin:28px 3px 0 0;
}
#stadion_ansicht .ecke_NO2 {
    border-top-right-radius: 100%;
    margin:3px 3px 0 0;
}
#stadion_ansicht .ecke_NO1_space {
    border-top-right-radius: 100%;
    margin:28px 3px 0 0;
}
#stadion_ansicht .ecke_NO1 {
    border-top-right-radius: 100%;
    margin:3px 3px 0 0;
}

#stadion_ansicht .ecke_SO3, #stadion_ansicht .ecke_SO3 div {
    vertical-align:top;
    text-align:left;
}

#stadion_ansicht .ecke_SO3 {
    border-bottom-right-radius: 100%;
}
#stadion_ansicht .ecke_SO2_space {
    border-bottom-right-radius: 100%;
    margin:0 3px 28px 0;
}
#stadion_ansicht .ecke_SO2 {
    border-bottom-right-radius: 100%;
    margin:0 3px 3px 0;
}
#stadion_ansicht .ecke_SO1_space {
    border-bottom-right-radius: 100%;
    margin:0 3px 28px 0;
}
#stadion_ansicht .ecke_SO1 {
    border-bottom-right-radius: 100%;
    margin:0 3px 3px 0;
}

#stadion_ansicht .ecke_SW3, #stadion_ansicht .ecke_SW3 div {
    vertical-align:top;
    text-align:right;
}

#stadion_ansicht .ecke_SW3 {
    border-bottom-left-radius: 100%;
}
#stadion_ansicht .ecke_SW2_space {
    border-bottom-left-radius: 100%;
    margin:0 0 28px 3px;
}
#stadion_ansicht .ecke_SW2 {
    border-bottom-left-radius: 100%;
    margin:0 0 3px 3px;
}
#stadion_ansicht .ecke_SW1_space {
    border-bottom-left-radius: 100%;
    margin:0 0 28px 3px;
}
#stadion_ansicht .ecke_SW1 {
    border-bottom-left-radius: 100%;
    margin:0 0 3px 3px;
}

/*
#stadion_ansicht .stehblock {
	background-color: #205f81 !important;
}

#stadion_ansicht .sitzblock {
	background-color: #122e3c !important;
}*/

#stadion_ansicht .ausbau {
    background-color:#ffc200;
    background: url("./img/stadion_ansicht_baustelle.png") no-repeat center #ffc200;
    color:transparent;
}

#stadion_ansicht .baubarblock {
    background-color:#666666;
}

#stadion_ansicht .stehblock:hover, #stadion_ansicht .sitzblock:hover, #stadion_ansicht .ausbau:hover, #stadion_ansicht .baubarblock:hover {
    cursor:pointer;
}

#stadion_ansicht .ecke_SW {
    border-bottom-left-radius: 220px;
}
#stadion_ansicht .ecke_NW {
    border-top-left-radius: 100px;
}
#stadion_ansicht .ecke_SO {
    border-bottom-right-radius: 220px;
}
#stadion_ansicht .ecke_NO {
    border-top-right-radius: 220px;
}

.gebaut.sitzblock {
    background-color:#134b84 !important;
}

.stehblock.gebaut {
    background-color:#2a79bb !important;
}

#stadion_block_detail {
    display:none;
    /*border-bottom: 1px solid #cdcdcd;*/
    border-bottom:1px solid rgba(255,255,255,0.1);
    padding-bottom:10px;
    margin-top: 1em;
}

#stadion_block_detail .button{
    margin:2px 5%;
}

#stadion_block_detail .zeile {
    border:0;
}

#stadion_block_detail .kosten {
    margin: 5px auto;
    display:inline-block;
    text-align:center;
}

#stadion_ansicht .selected {
    background-color: var(--buttongreen) !important;
}

#stadion_umfeld .stadion_umfeld_detail {
}

#stadion_umfeld .stadion_umfeld_detail .umfeld_detail.svg {
    padding: 10px;
}

#stadion_umfeld .stadion_umfeld_gebaeude_container {
    width: 36%;
    /* height: 150px; */
    display: inline-block;
    margin-top: 0.5rem;
}

#stadion_umfeld .stadion_umfeld_gebaeude_container .svg{
    width:90%;
    height:90%;
}

#stadion_umfeld .stadion_umfeld_gebaeude_container > img {
    width:100%;
    height:100%;
}

#stadion_umfeld .stadion_umfeld_details_container{
    display:inline-block;
    width:64%;
    vertical-align:top;
}

#stadion_umfeld .plus {
    width:1rem;
    height:1rem;
    margin:5px 0 -2px 0;
}

#stadion_fans .stimmung {
    width:48px;
    height:48px;
}
/* Launen-Mood-Icons (Verhandlungen Spieler/Sponsor) ~20% groesser als Standard-Zeilen-Icons. */
img.laune_img { width:48px !important; height:48px !important; }

#stadion_fans .fanzahl_leer, #stadion_fans .fanzahl_voll, #stadion_fans .fanzahl_spezial, #stadion_spezial .fanzahl_spezial .svg, #stadion_fans .fanzahl_leer .svg, #stadion_fans .fanzahl_voll .svg{
    height:20px;
    width:12px;
    margin:2px;
    display:inline-block;
}

.trenner-bg {
    background-color: var(--trenner);
}

#stadion_fans .fanzahl_leer path{
    fill:var(--dark3) !important;
    display:inline-block;
}

#stadion_fans .fanzahl_voll path{
    fill:var(--buttongreen) !important;
    display:inline-block;
}

#stadion_fans .fanzahl_spezial path {
    fill:#64A517 !important;
    display:inline-block;
}

.umfeld_table {
    width:100%;
}

.umfeld_table td{
    padding: 2px 5px;
}

.umfeld_table .selected{
    background-color:var(--trenner);
}

.umfeld_table .highlight-zeile{
    background-color:#eaeaea;
}

.svg.zeile-klein {
    height:12px;
}

.dragdealer {
    width:80%;
    margin:5px auto;
    background-color: #bbbbbb !important;
    border-radius:3px;
}

.dragdealer .handle {
    background-color:#64A517; /*#A0C736;*/
    border-radius:3px;
    width:60px;
}

#stadion_tickets_legende {
    padding: 5px 10px;
}

#stadion_tickets_legende span:not(.legenden_farbe) {
    padding:0 20px 0 5px;
}

#stadion_tickets_legende .legenden_farbe {
    width:20px;
    height:20px;
    margin-bottom: -3px;
    display:inline-block;
}

#stadion_tickets_legende .steh{
    background-color:#FFCC00;
}

#stadion_tickets_legende .sitz{
    background-color:#A0C736;
}

#stadion_tickets_legende .loge{
    background-color:#0099FF;
}

#stadion_tickets_auslastung {
    width:90%;
    height:300px;
    margin:auto;
}

/*
TABELLEN
*/

#tabellen-swiper-container {
    width:100%;
    height:100%;
}

#tabellen_liga {
    margin: 0 5%;
}

.tabellen_liga_tabelle {
    width:100%;
    height:inherit;
}

#tabellen_liga th, #tabellen_international th{
    text-align:center;
    background-color:#64A517;
    padding: 4px;
    color:var(--app-text, #ffffff);
    border:2px solid #eeeeee;
    border-right: 0;
}

#tabellen_liga th:last-child, #tabellen_international th:last-child  {
    border:2px solid #eeeeee;
}

#tabellen_liga td, #tabellen_international td{
    text-align:center;
    padding: 8px 4px;
}


#tabellen_liga .platz_cl, #tabellen_liga .platz_clq, #tabellen_liga .platz_el, #tabellen_liga .platz_elq, #tabellen_liga .platz_uiq,#tabellen_liga .platz_auf,#tabellen_liga .platz_ab,#tabellen_liga .platz_,
#tabellen_international .platz_cl {
    border:2px solid #eeeeee;
}

#tabellen_liga .platz_cl, #tabellen_international .platz_cl {
    background-color:#1e90ff;
}

#tabellen_liga .platz_clq {
    background-color:#87cefa;
}

#tabellen_liga .platz_el {
    background-color:#008000;
}

#tabellen_liga .platz_elq {
    background-color:#6b8e23;
}

#tabellen_liga .platz_uiq {
    background-color:#7b68ee;
}

#tabellen_liga .platz_auf {
    background-color:#1e90ff;
}

#tabellen_liga .platz_ab {
    background-color:#dc143c;
}

#tabellen_liga .platz_ {
    background-color:#eeeeee;
}

.tabellen_top {
    padding:10px;
    width:100%;
}

.tabellen_landwahl, .tabellen_verbandwahl {
    width:20%;
    display:inline-block;
    line-height:100%;
    text-align:center;
}

.tabellen_verbandwahl {
    width: 35% !important;
}

.tabellen_landwahl img {
    width:30px;
    vertical-align:middle;
}

.tabellen_saisonwahl, .nationalmannschaft_land {
    display:inline-block;
    text-align:center;
    vertical-align:middle;
    line-height:100%;
}

.tabellen_saisonwahl:not(.international), .nationalmannschaft_land {
    width:80% !important;
}

.tabellen_saisonwahl.international {
    width:65% !important;
}

.tabellen_ligawahl , .tabellen_pokalwahl, .tabellen_saisonwahl, .tabellen_verbandwahl {
    text-align:center;
    padding:5px;
}



/*
FINANZEN
*/
/*
#finanzen th {
    padding:5px;
    background-color:#64A517;
    color: var(--app-text, #ffffff);
}

#finanzen td {
    padding:5px;
}

#finanzen tr:nth-child(even) {
    background-color:#dddddd;
}*/

#finanzen canvas {
    width: 100%;
    height: 100px;
}

.finanzen_legende {
    width:20px;
    height:20px;
    margin-bottom: -3px;
    display:inline-block;
    border-radius:3px;
}

#finanzen_einnahmen td:first-child, #finanzen_ausgaben td:first-child {
    width:20px;
}

#finanzen td {
    padding:2px;
}

/*
SPIELER
*/
#spieler canvas {
    height:200px;
}

#spieler .staerke_balken, #team_jugendspieler .staerke_balken {
    background-color:var(--buttongreen);
    color: var(--bg);
    padding: 4px 5px;
}

#spieler .staerke_balken_leer, #team_jugendspieler .staerke_balken_leer {
    width:100%;
    background-color:var(--dark2);
}

#spieler .oben {
    height:100px;
}

#spieler .oben .hauptzeile {
    padding-top: 38px;
}

.spieler_training_wert {
    display:inline-block;
    margin:4px auto;
    height:40px;
    width:40px;
    border-radius: 40px;
    color:var(--app-text, white);
    line-height:40px;
    text-align:center;
    vertical-align:middle;
}
/*
TRANSFERS
*/

#transfers div:not(#transfers_suche_optionen):not(#transfers_suche_klappe) .zeile, #fss_freunde .zeile {
    border:0;
}

#transfers .zeile_outer, #fss_freunde .zeile_outer{
    border-bottom: 1px solid #cdcdcd;
    pading-bottom:2px;
}

#transfers table[spieler_update] td {
    width:50%;
}

#transfers .big_radio, #team_jugendspieler .big_radio, #tabellen_international .big_radio {
    border-radius: 3px;
    display: table;
    border-collapse: separate;
    -webkit-border-horizontal-spacing: 10px;
    -webkit-border-vertical-spacing: 20px;
}

#tabellen_international .big_radio {
    text-align:center;
}

#transfers .big_radio td[pos], #team_jugendspieler .big_radio td[pos], #tabellen_international .big_radio div {
    padding: 12px 0px;
    background-color: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--app-text, rgba(255,255,255,0.85));
    border-radius: 12px;
    text-align: center;
    width: 20%;
    font-family: "MADEOuterSans";
    -webkit-transition: background-color 0.15s ease;
    transition: background-color 0.15s ease;
}
#transfers .big_radio td[pos]:active, #team_jugendspieler .big_radio td[pos]:active, #tabellen_international .big_radio div:active {
    background-color: rgba(255,255,255,0.1);
}
/* gewählte Förderung: grüner Badge ohne Naht-Rand */
#transfers .big_radio td.selected, #team_jugendspieler .big_radio td.selected, #tabellen_international .big_radio div.selected {
    border-color: var(--buttongreen) !important;
}

#tabellen_international .big_radio div {
    margin:auto;
    display:inline-block;
}

.zuschlag_0, .zuschlag_1 {
    border:0px solid #000000;
    border-radius:3px;
    height:30px;
    width:30px;
    display:inline-block;
}

.transfer_status {
    width:30px;
    height:30px;
    border-radius:3px;
}

.transfer_status_achtung {
    background-color:#daa520;
    background:#daa520 url("../img/achtung.svg") no-repeat 2px / 26px !important;
}

.transfer_status_ok {
    background-color:#64A517;
    background:#64A517 url("../img/ok.svg") no-repeat 4px / 22px !important;
}

.transfer_status_cancel {
    background-color:#DA0303;
    background:#DA0303 url("../img/cancel.svg") no-repeat 4px / 22px !important;
}

/*
AAW
*/
.aaw_daumen_positiv, .aaw_daumen_negativ, .aaw_daumen_neutral {
    width:26px;
    height:26px;
    line-height:26px;
    vertical-align:middle;
    border-radius:100px;
    text-align:center;
}

.anzeige_breit {
    width:50px !important;
    margin-left:5px;
}

.aaw_daumen_positiv {
    background-color:#64A517;
    color: var(--app-text, #ffffff);
}

.aaw_daumen_negativ {
    background-color:#b22222;
    color: var(--app-text, #ffffff);
}

.aaw_daumen_neutral {
    background-color:#cccccc;
    color: #333333;
}

#team_aaw .zeile {
    border: 0;
}

#team_aaw .aaw_box {
    border-bottom: 1px solid #cdcdcd;
}

#team_aaw .aaw_box .details .uber {
    display:inline-block;
    width:33%;
    background-color:#e3e3e3;
    padding:2px 0;
    margin:2px 0 4px 0;
}

#team_aaw .aaw_box .details .uber:first-child {
    border-top-left-radius:3px;
    border-bottom-left-radius:3px;
}

#team_aaw .aaw_box .details .uber:last-child {
    border-top-right-radius:3px;
    border-bottom-right-radius:3px;
}
/*
###FARBEN
*/

.farbe_ffffff path, .farbe1_ffffff .c1, .farbe2_ffffff .c2 {
    fill: #ffffff !important;
}
.farbe_ffff99 path, .farbe1_ffff99 .c1, .farbe2_ffff99 .c2 {
    fill: #ffff99 !important;
}
.farbe_ffff00 path, .farbe1_ffff00 .c1, .farbe2_ffff00 .c2 {
    fill: #ffff00 !important;
}
.farbe_ffcc99 path, .farbe1_ffcc99 .c1, .farbe2_ffcc99 .c2 {
    fill: #ffcc99 !important;
}
.farbe_ffcc00 path, .farbe1_ffcc00 .c1, .farbe2_ffcc00 .c2 {
    fill: #ffcc00 !important;
}
.farbe_ff99ff path, .farbe1_ff99ff .c1, .farbe2_ff99ff .c2 {
    fill: #ff99ff !important;
}
.farbe_ff9900 path, .farbe1_ff9900 .c1, .farbe2_ff9900 .c2 {
    fill: #ff9900 !important;
}
.farbe_ff6600 path, .farbe1_ff6600 .c1, .farbe2_ff6600 .c2 {
    fill: #ff6600 !important;
}
.farbe_ff3300 path, .farbe1_ff3300 .c1, .farbe2_ff3300 .c2 {
    fill: #ff3300 !important;
}
.farbe_ff00ff path, .farbe1_ff00ff .c1, .farbe2_ff00ff .c2 {
    fill: #ff00ff !important;
}
.farbe_ff0000 path, .farbe1_ff0000 .c1, .farbe2_ff0000 .c2 {
    fill: #ff0000 !important;
}
.farbe_66ffff path, .farbe1_66ffff .c1, .farbe2_66ffff .c2 {
    fill: #66ffff !important;
}
.farbe_66ff00 path, .farbe1_66ff00 .c1, .farbe2_66ff00 .c2 {
    fill: #66ff00 !important;
}
.farbe_66ccff path, .farbe1_66ccff .c1, .farbe2_66ccff .c2 {
    fill: #66ccff !important;
}
.farbe_66cc00 path, .farbe1_66cc00 .c1, .farbe2_66cc00 .c2 {
    fill: #66cc00 !important;
}
.farbe_6699ff path, .farbe1_6699ff .c1, .farbe2_6699ff .c2 {
    fill: #6699ff !important;
}
.farbe_666600 path, .farbe1_666600 .c1, .farbe2_666600 .c2 {
    fill: #666600 !important;
}
.farbe_ccff00 path, .farbe1_ccff00 .c1, .farbe2_ccff00 .c2 {
    fill: #ccff00 !important;
}
.farbe_cc0000 path, .farbe1_cc0000 .c1, .farbe2_cc0000 .c2 {
    fill: #cc0000 !important;
}
.farbe_99ffff path, .farbe1_99ffff .c1, .farbe2_99ffff .c2 {
    fill: #99ffff !important;
}
.farbe_993399 path, .farbe1_993399 .c1, .farbe2_993399 .c2 {
    fill: #993399 !important;
}
.farbe_993333 path, .farbe1_993333 .c1, .farbe2_993333 .c2 {
    fill: #993333 !important;
}
.farbe_9900ff path, .farbe1_9900ff .c1, .farbe2_9900ff .c2 {
    fill: #9900ff !important;
}
.farbe_990000 path, .farbe1_990000 .c1, .farbe2_990000 .c2 {
    fill: #990000 !important;
}
.farbe_00cc00 path, .farbe1_00cc00 .c1, .farbe2_00cc00 .c2 {
    fill: #00cc00 !important;
}
.farbe_009900 path, .farbe1_009900 .c1, .farbe2_009900 .c2 {
    fill: #009900 !important;
}
.farbe_0000ff path, .farbe1_0000ff .c1, .farbe2_0000ff .c2 {
    fill: #0000ff !important;
}
.farbe_0033ff path, .farbe1_0033ff .c1, .farbe2_0033ff .c2 {
    fill: #0033ff !important;
}
.farbe_000099 path, .farbe1_000099 .c1, .farbe2_000099 .c2 {
    fill: #000099 !important;
}
.farbe_000066 path, .farbe1_000066 .c1, .farbe2_000066 .c2 {
    fill: #000066 !important;
}
.farbe_000000 path, .farbe1_000000 .c1, .farbe2_000000 .c2 {
    fill: #000000 !important;
}
.farbe_3300cc path, .farbe1_3300cc .c1, .farbe2_3300cc .c2 {
    fill: #3300cc !important;
}
.farbe_990033 path, .farbe1_990033 .c1, .farbe2_990033 .c2 {
    fill: #990033 !important;
}
.farbe_9966cc path, .farbe1_9966cc .c1, .farbe2_9966cc .c2 {
    fill: #9966cc !important;
}
.farbe_cc6600 path, .farbe1_cc6600 .c1, .farbe2_cc6600 .c2 {
    fill: #cc6600 !important;
}
.farbe_cccccc path, .farbe1_cccccc .c1, .farbe2_cccccc .c2 {
    fill: #cccccc !important;
}
.farbe_003399 path, .farbe1_003399 .c1, .farbe2_003399 .c2 {
    fill: #003399 !important;
}
.farbe_006699 path, .farbe1_006699 .c1, .farbe2_006699 .c2 {
    fill: #006699 !important;
}
.farbe_ffcc33 path, .farbe1_ffcc33 .c1, .farbe2_ffcc33 .c2 {
    fill: #ffcc33 !important;
}
.farbe_ffff00 path, .farbe1_ffff00 .c1, .farbe2_ffff00 .c2 {
    fill: #ffff00 !important;
}
.farbe_0000ff path, .farbe1_0000ff .c1, .farbe2_0000ff .c2 {
    fill: #0000ff !important;
}
.farbe_0033cc path, .farbe1_0033cc .c1, .farbe2_0033cc .c2 {
    fill: #0033cc !important;
}
.farbe_c22e2e path, .farbe1_c22e2e .c1, .farbe2_c22e2e .c2 {
    fill: #c22e2e !important;
}
 
.farbe_e8be0b path, .farbe1_e8be0b .c1, .farbe2_e8be0b .c2 {
    fill: #e8be0b !important;
}
 
.farbe_8fc21f path, .farbe1_8fc21f .c1, .farbe2_8fc21f .c2 {
    fill: #8fc21f !important;
}
 
.farbe_2549c9 path, .farbe1_2549c9 .c1, .farbe2_2549c9 .c2 {
    fill: #2549c9 !important;
}
 
.farbe_f2efe6 path, .farbe1_f2efe6 .c1, .farbe2_f2efe6 .c2 {
    fill: #f2efe6 !important;
}
 
.farbe_2727d8 path, .farbe1_2727d8 .c1, .farbe2_2727d8 .c2 {
    fill: #2727d8 !important;
}
 
.farbe_169f16 path, .farbe1_169f16 .c1, .farbe2_169f16 .c2 {
    fill: #169f16 !important;
}
 
.farbe_8b2648 path, .farbe1_8b2648 .c1, .farbe2_8b2648 .c2 {
    fill: #8b2648 !important;
}
 
.farbe_b36b1f path, .farbe1_b36b1f .c1, .farbe2_b36b1f .c2 {
    fill: #b36b1f !important;
}
 
.farbe_638cc9 path, .farbe1_638cc9 .c1, .farbe2_638cc9 .c2 {
    fill: #638cc9 !important;
}
 
.farbe_4723ac path, .farbe1_4723ac .c1, .farbe2_4723ac .c2 {
    fill: #4723ac !important;
}
 
.farbe_181893 path, .farbe1_181893 .c1, .farbe2_181893 .c2 {
    fill: #181893 !important;
}
 
.farbe_8c467e path, .farbe1_8c467e .c1, .farbe2_8c467e .c2 {
    fill: #8c467e !important;
}
 
.farbe_1f2329 path, .farbe1_1f2329 .c1, .farbe2_1f2329 .c2 {
    fill: #1f2329 !important;
}
 
.farbe_0d0d70 path, .farbe1_0d0d70 .c1, .farbe2_0d0d70 .c2 {
    fill: #0d0d70 !important;
}
 
.farbe_8f1616 path, .farbe1_8f1616 .c1, .farbe2_8f1616 .c2 {
    fill: #8f1616 !important;
}
 
.farbe_c48a30 path, .farbe1_c48a30 .c1, .farbe2_c48a30 .c2 {
    fill: #c48a30 !important;
}
 
.farbe_8c6bb5 path, .farbe1_8c6bb5 .c1, .farbe2_8c6bb5 .c2 {
    fill: #8c6bb5 !important;
}
 
.farbe_8f4040 path, .farbe1_8f4040 .c1, .farbe2_8f4040 .c2 {
    fill: #8f4040 !important;
}
 
.farbe_5ec9c9 path, .farbe1_5ec9c9 .c1, .farbe2_5ec9c9 .c2 {
    fill: #5ec9c9 !important;
}
 
.farbe_e0b40c path, .farbe1_e0b40c .c1, .farbe2_e0b40c .c2 {
    fill: #e0b40c !important;
}
 
.farbe_148a14 path, .farbe1_148a14 .c1, .farbe2_148a14 .c2 {
    fill: #148a14 !important;
}
 
.farbe_7d26c9 path, .farbe1_7d26c9 .c1, .farbe2_7d26c9 .c2 {
    fill: #7d26c9 !important;
}
 
.farbe_b34724 path, .farbe1_b34724 .c1, .farbe2_b34724 .c2 {
    fill: #b34724 !important;
}
 
.farbe_64a9c9 path, .farbe1_64a9c9 .c1, .farbe2_64a9c9 .c2 {
    fill: #64a9c9 !important;
}
 
.farbe_4c8fcc path, .farbe1_4c8fcc .c1, .farbe2_4c8fcc .c2 {
    fill: #4c8fcc !important;
}
 
.farbe_cf8dcf path, .farbe1_cf8dcf .c1, .farbe2_cf8dcf .c2 {
    fill: #cf8dcf !important;
}
 
.farbe_b61b1b path, .farbe1_b61b1b .c1, .farbe2_b61b1b .c2 {
    fill: #b61b1b !important;
}
 
.farbe_c4c2bd path, .farbe1_c4c2bd .c1, .farbe2_c4c2bd .c2 {
    fill: #c4c2bd !important;
}
 
.farbe_6c6ccf path, .farbe1_6c6ccf .c1, .farbe2_6c6ccf .c2 {
    fill: #6c6ccf !important;
}
 
.farbe_91bbd9 path, .farbe1_91bbd9 .c1, .farbe2_91bbd9 .c2 {
    fill: #91bbd9 !important;
}
 
.farbe_b61d46 path, .farbe1_b61d46 .c1, .farbe2_b61d46 .c2 {
    fill: #b61d46 !important;
}
 
.farbe_c94a27 path, .farbe1_c94a27 .c1, .farbe2_c94a27 .c2 {
    fill: #c94a27 !important;
}
 
.farbe_23478a path, .farbe1_23478a .c1, .farbe2_23478a .c2 {
    fill: #23478a !important;
}
 
.farbe_1f6b92 path, .farbe1_1f6b92 .c1, .farbe2_1f6b92 .c2 {
    fill: #1f6b92 !important;
}
 
.farbe_111533 path, .farbe1_111533 .c1, .farbe2_111533 .c2 {
    fill: #111533 !important;
}
 
.farbe_cfc51a path, .farbe1_cfc51a .c1, .farbe2_cfc51a .c2 {
    fill: #cfc51a !important;
}
 
.farbe_77721c path, .farbe1_77721c .c1, .farbe2_77721c .c2 {
    fill: #77721c !important;
}
 
.farbe_2323b6 path, .farbe1_2323b6 .c1, .farbe2_2323b6 .c2 {
    fill: #2323b6 !important;
}
 
.farbe_3090c4 path, .farbe1_3090c4 .c1, .farbe2_3090c4 .c2 {
    fill: #3090c4 !important;
}
 
.farbe_d96fb1 path, .farbe1_d96fb1 .c1, .farbe2_d96fb1 .c2 {
    fill: #d96fb1 !important;
}
 
.farbe_246fb6 path, .farbe1_246fb6 .c1, .farbe2_246fb6 .c2 {
    fill: #246fb6 !important;
}
 
.farbe_6424b6 path, .farbe1_6424b6 .c1, .farbe2_6424b6 .c2 {
    fill: #6424b6 !important;
}
 
.farbe_6844cf path, .farbe1_6844cf .c1, .farbe2_6844cf .c2 {
    fill: #6844cf !important;
}
 
.farbe_f0d86a path, .farbe1_f0d86a .c1, .farbe2_f0d86a .c2 {
    fill: #f0d86a !important;
}
 
.farbe_c7b41a path, .farbe1_c7b41a .c1, .farbe2_c7b41a .c2 {
    fill: #c7b41a !important;
}
 
.farbe_e6bf57 path, .farbe1_e6bf57 .c1, .farbe2_e6bf57 .c2 {
    fill: #e6bf57 !important;
}
 
.farbe_cad75e path, .farbe1_cad75e .c1, .farbe2_cad75e .c2 {
    fill: #cad75e !important;
}
 
.farbe_428f42 path, .farbe1_428f42 .c1, .farbe2_428f42 .c2 {
    fill: #428f42 !important;
}
 
.farbe_2447b6 path, .farbe1_2447b6 .c1, .farbe2_2447b6 .c2 {
    fill: #2447b6 !important;
}
 
.farbe_169043 path, .farbe1_169043 .c1, .farbe2_169043 .c2 {
    fill: #169043 !important;
}
 
.farbe_476fb6 path, .farbe1_476fb6 .c1, .farbe2_476fb6 .c2 {
    fill: #476fb6 !important;
}
 
.farbe_6fb18f path, .farbe1_6fb18f .c1, .farbe2_6fb18f .c2 {
    fill: #6fb18f !important;
}
 
.farbe_6b268b path, .farbe1_6b268b .c1, .farbe2_6b268b .c2 {
    fill: #6b268b !important;
}
 
.farbe_75a342 path, .farbe1_75a342 .c1, .farbe2_75a342 .c2 {
    fill: #75a342 !important;
}
 
.farbe_d98a70 path, .farbe1_d98a70 .c1, .farbe2_d98a70 .c2 {
    fill: #d98a70 !important;
}
 
.farbe_70c970 path, .farbe1_70c970 .c1, .farbe2_70c970 .c2 {
    fill: #70c970 !important;
}
 
.farbe_8b4670 path, .farbe1_8b4670 .c1, .farbe2_8b4670 .c2 {
    fill: #8b4670 !important;
}
 
.farbe_476f92 path, .farbe1_476f92 .c1, .farbe2_476f92 .c2 {
    fill: #476f92 !important;
}
 
.farbe_8f6b8f path, .farbe1_8f6b8f .c1, .farbe2_8f6b8f .c2 {
    fill: #8f6b8f !important;
}
 
.farbe_8123ac path, .farbe1_8123ac .c1, .farbe2_8123ac .c2 {
    fill: #8123ac !important;
}
 
.farbe_143314 path, .farbe1_143314 .c1, .farbe2_143314 .c2 {
    fill: #143314 !important;
}
 
.farbe_6b6bb5 path, .farbe1_6b6bb5 .c1, .farbe2_6b6bb5 .c2 {
    fill: #6b6bb5 !important;
}
 
.farbe_70c98f path, .farbe1_70c98f .c1, .farbe2_70c98f .c2 {
    fill: #70c98f !important;
}
 
.farbe_7f9218 path, .farbe1_7f9218 .c1, .farbe2_7f9218 .c2 {
    fill: #7f9218 !important;
}
 
.farbe_d0c933 path, .farbe1_d0c933 .c1, .farbe2_d0c933 .c2 {
    fill: #d0c933 !important;
}
 
.farbe_704040 path, .farbe1_704040 .c1, .farbe2_704040 .c2 {
    fill: #704040 !important;
}
 
.farbe_4747b6 path, .farbe1_4747b6 .c1, .farbe2_4747b6 .c2 {
    fill: #4747b6 !important;
}
 
.farbe_c9664c path, .farbe1_c9664c .c1, .farbe2_c9664c .c2 {
    fill: #c9664c !important;
}
 
.farbe_276dc9 path, .farbe1_276dc9 .c1, .farbe2_276dc9 .c2 {
    fill: #276dc9 !important;
}
 
.farbe_d98d8d path, .farbe1_d98d8d .c1, .farbe2_d98d8d .c2 {
    fill: #d98d8d !important;
}
 
.farbe_42906b path, .farbe1_42906b .c1, .farbe2_42906b .c2 {
    fill: #42906b !important;
}
 
.farbe_edcf42 path, .farbe1_edcf42 .c1, .farbe2_edcf42 .c2 {
    fill: #edcf42 !important;
}
 
.farbe_c94c4c path, .farbe1_c94c4c .c1, .farbe2_c94c4c .c2 {
    fill: #c94c4c !important;
}
 
.farbe_b56b6b path, .farbe1_b56b6b .c1, .farbe2_b56b6b .c2 {
    fill: #b56b6b !important;
}
 
.farbe_e9c722 path, .farbe1_e9c722 .c1, .farbe2_e9c722 .c2 {
    fill: #e9c722 !important;
}
 
.farbe_147014 path, .farbe1_147014 .c1, .farbe2_147014 .c2 {
    fill: #147014 !important;
}
 
.farbe_47478a path, .farbe1_47478a .c1, .farbe2_47478a .c2 {
    fill: #47478a !important;
}
 
.farbe_8b4a26 path, .farbe1_8b4a26 .c1, .farbe2_8b4a26 .c2 {
    fill: #8b4a26 !important;
}
 
.farbe_f3e8b8 path, .farbe1_f3e8b8 .c1, .farbe2_f3e8b8 .c2 {
    fill: #f3e8b8 !important;
}
 
.farbe_bfcb3a path, .farbe1_bfcb3a .c1, .farbe2_bfcb3a .c2 {
    fill: #bfcb3a !important;
}
 
.farbe_24a36b path, .farbe1_24a36b .c1, .farbe2_24a36b .c2 {
    fill: #24a36b !important;
}
 
.farbe_6bb56b path, .farbe1_6bb56b .c1, .farbe2_6bb56b .c2 {
    fill: #6bb56b !important;
}
 
.farbe_b56b8f path, .farbe1_b56b8f .c1, .farbe2_b56b8f .c2 {
    fill: #b56b8f !important;
}
 
.farbe_c8bc3d path, .farbe1_c8bc3d .c1, .farbe2_c8bc3d .c2 {
    fill: #c8bc3d !important;
}
 
.farbe_8b268b path, .farbe1_8b268b .c1, .farbe2_8b268b .c2 {
    fill: #8b268b !important;
}
 
.farbe_4c4cc9 path, .farbe1_4c4cc9 .c1, .farbe2_4c4cc9 .c2 {
    fill: #4c4cc9 !important;
}
 
.farbe_b58f42 path, .farbe1_b58f42 .c1, .farbe2_b58f42 .c2 {
    fill: #b58f42 !important;
}
 
.farbe_c92770 path, .farbe1_c92770 .c1, .farbe2_c92770 .c2 {
    fill: #c92770 !important;
}
 
.farbe_476f47 path, .farbe1_476f47 .c1, .farbe2_476f47 .c2 {
    fill: #476f47 !important;
}
 
.farbe_47268b path, .farbe1_47268b .c1, .farbe2_47268b .c2 {
    fill: #47268b !important;
}
 
.farbe_16906b path, .farbe1_16906b .c1, .farbe2_16906b .c2 {
    fill: #16906b !important;
}
 
.farbe_24a342 path, .farbe1_24a342 .c1, .farbe2_24a342 .c2 {
    fill: #24a342 !important;
}
 
.farbe_c98a4c path, .farbe1_c98a4c .c1, .farbe2_c98a4c .c2 {
    fill: #c98a4c !important;
}
 
.farbe_6427c9 path, .farbe1_6427c9 .c1, .farbe2_6427c9 .c2 {
    fill: #6427c9 !important;
}
 
.farbe_707040 path, .farbe1_707040 .c1, .farbe2_707040 .c2 {
    fill: #707040 !important;
}
 
.farbe_6b6b8f path, .farbe1_6b6b8f .c1, .farbe2_6b6b8f .c2 {
    fill: #6b6b8f !important;
}
 
.farbe_8a70d9 path, .farbe1_8a70d9 .c1, .farbe2_8a70d9 .c2 {
    fill: #8a70d9 !important;
}
 
.farbe_c3ba6a path, .farbe1_c3ba6a .c1, .farbe2_c3ba6a .c2 {
    fill: #c3ba6a !important;
}
 
.farbe_42a342 path, .farbe1_42a342 .c1, .farbe2_42a342 .c2 {
    fill: #42a342 !important;
}
 
.farbe_b191d9 path, .farbe1_b191d9 .c1, .farbe2_b191d9 .c2 {
    fill: #b191d9 !important;
}
 
.farbe_477070 path, .farbe1_477070 .c1, .farbe2_477070 .c2 {
    fill: #477070 !important;
}
 
.farbe_c39512 path, .farbe1_c39512 .c1, .farbe2_c39512 .c2 {
    fill: #c39512 !important;
}
 
.farbe_477014 path, .farbe1_477014 .c1, .farbe2_477014 .c2 {
    fill: #477014 !important;
}
 
.farbe_c96927 path, .farbe1_c96927 .c1, .farbe2_c96927 .c2 {
    fill: #c96927 !important;
}
 
.farbe_8b47b6 path, .farbe1_8b47b6 .c1, .farbe2_8b47b6 .c2 {
    fill: #8b47b6 !important;
}
 
.farbe_8f6b6b path, .farbe1_8f6b6b .c1, .farbe2_8f6b6b .c2 {
    fill: #8f6b6b !important;
}
 
.farbe_ac23ac path, .farbe1_ac23ac .c1, .farbe2_ac23ac .c2 {
    fill: #ac23ac !important;
}
 
.farbe_234770 path, .farbe1_234770 .c1, .farbe2_234770 .c2 {
    fill: #234770 !important;
}
 
.farbe_a9b51f path, .farbe1_a9b51f .c1, .farbe2_a9b51f .c2 {
    fill: #a9b51f !important;
}
 
.farbe_169090 path, .farbe1_169090 .c1, .farbe2_169090 .c2 {
    fill: #169090 !important;
}
 
.farbe_429014 path, .farbe1_429014 .c1, .farbe2_429014 .c2 {
    fill: #429014 !important;
}
 
.farbe_4790b6 path, .farbe1_4790b6 .c1, .farbe2_4790b6 .c2 {
    fill: #4790b6 !important;
}
 
.farbe_42b56b path, .farbe1_42b56b .c1, .farbe2_42b56b .c2 {
    fill: #42b56b !important;
}
 
.farbe_97c53f path, .farbe1_97c53f .c1, .farbe2_97c53f .c2 {
    fill: #97c53f !important;
}
 
.farbe_c92746 path, .farbe1_c92746 .c1, .farbe2_c92746 .c2 {
    fill: #c92746 !important;
}
 
.farbe_8f7040 path, .farbe1_8f7040 .c1, .farbe2_8f7040 .c2 {
    fill: #8f7040 !important;
}
 
.farbe_2490a3 path, .farbe1_2490a3 .c1, .farbe2_2490a3 .c2 {
    fill: #2490a3 !important;
}
 
.farbe_8b265e path, .farbe1_8b265e .c1, .farbe2_8b265e .c2 {
    fill: #8b265e !important;
}
 
.farbe_42a36b path, .farbe1_42a36b .c1, .farbe2_42a36b .c2 {
    fill: #42a36b !important;
}
 
.farbe_6b8f8f path, .farbe1_6b8f8f .c1, .farbe2_6b8f8f .c2 {
    fill: #6b8f8f !important;
}
 
.farbe_6b8f42 path, .farbe1_6b8f42 .c1, .farbe2_6b8f42 .c2 {
    fill: #6b8f42 !important;
}
 
.farbe_b6478f path, .farbe1_b6478f .c1, .farbe2_b6478f .c2 {
    fill: #b6478f !important;
}
 
.farbe_331133 path, .farbe1_331133 .c1, .farbe2_331133 .c2 {
    fill: #331133 !important;
}
 
.farbe_e5bb32 path, .farbe1_e5bb32 .c1, .farbe2_e5bb32 .c2 {
    fill: #e5bb32 !important;
}
 
.farbe_702670 path, .farbe1_702670 .c1, .farbe2_702670 .c2 {
    fill: #702670 !important;
}
 
.farbe_472370 path, .farbe1_472370 .c1, .farbe2_472370 .c2 {
    fill: #472370 !important;
}
 
.farbe_a7b548 path, .farbe1_a7b548 .c1, .farbe2_a7b548 .c2 {
    fill: #a7b548 !important;
}
 
.farbe_4ca8c9 path, .farbe1_4ca8c9 .c1, .farbe2_4ca8c9 .c2 {
    fill: #4ca8c9 !important;
}
 
.farbe_8d8dd9 path, .farbe1_8d8dd9 .c1, .farbe2_8d8dd9 .c2 {
    fill: #8d8dd9 !important;
}
 
.farbe_701414 path, .farbe1_701414 .c1, .farbe2_701414 .c2 {
    fill: #701414 !important;
}
 
.farbe_702640 path, .farbe1_702640 .c1, .farbe2_702640 .c2 {
    fill: #702640 !important;
}
 
.farbe_43a31f path, .farbe1_43a31f .c1, .farbe2_43a31f .c2 {
    fill: #43a31f !important;
}
 
.farbe_331111 path, .farbe1_331111 .c1, .farbe2_331111 .c2 {
    fill: #331111 !important;
}
 
.farbe_a27714 path, .farbe1_a27714 .c1, .farbe2_a27714 .c2 {
    fill: #a27714 !important;
}
 
.farbe_4727c9 path, .farbe1_4727c9 .c1, .farbe2_4727c9 .c2 {
    fill: #4727c9 !important;
}
 
.farbe_ac26c9 path, .farbe1_ac26c9 .c1, .farbe2_ac26c9 .c2 {
    fill: #ac26c9 !important;
}
 
.farbe_42b5a3 path, .farbe1_42b5a3 .c1, .farbe2_42b5a3 .c2 {
    fill: #42b5a3 !important;
}
 
.farbe_8dd98d path, .farbe1_8dd98d .c1, .farbe2_8dd98d .c2 {
    fill: #8dd98d !important;
}
 
.farbe_6b47b6 path, .farbe1_6b47b6 .c1, .farbe2_6b47b6 .c2 {
    fill: #6b47b6 !important;
}
 
.farbe_8fb56b path, .farbe1_8fb56b .c1, .farbe2_8fb56b .c2 {
    fill: #8fb56b !important;
}
 
.farbe_b64747 path, .farbe1_b64747 .c1, .farbe2_b64747 .c2 {
    fill: #b64747 !important;
}
 
.farbe_e6c9c4 path, .farbe1_e6c9c4 .c1, .farbe2_e6c9c4 .c2 {
    fill: #e6c9c4 !important;
}
 
.farbe_474770 path, .farbe1_474770 .c1, .farbe2_474770 .c2 {
    fill: #474770 !important;
}
 
.farbe_b56b47 path, .farbe1_b56b47 .c1, .farbe2_b56b47 .c2 {
    fill: #b56b47 !important;
}
 
.farbe_b647c9 path, .farbe1_b647c9 .c1, .farbe2_b647c9 .c2 {
    fill: #b647c9 !important;
}
 
.farbe_b56bd9 path, .farbe1_b56bd9 .c1, .farbe2_b56bd9 .c2 {
    fill: #b56bd9 !important;
}
 
.farbe_6b8fb5 path, .farbe1_6b8fb5 .c1, .farbe2_6b8fb5 .c2 {
    fill: #6b8fb5 !important;
}
 
.farbe_704770 path, .farbe1_704770 .c1, .farbe2_704770 .c2 {
    fill: #704770 !important;
}
 
.farbe_86ad1c path, .farbe1_86ad1c .c1, .farbe2_86ad1c .c2 {
    fill: #86ad1c !important;
}
 
.farbe_c9278b path, .farbe1_c9278b .c1, .farbe2_c9278b .c2 {
    fill: #c9278b !important;
}
 
.farbe_429090 path, .farbe1_429090 .c1, .farbe2_429090 .c2 {
    fill: #429090 !important;
}
 
.farbe_47b58f path, .farbe1_47b58f .c1, .farbe2_47b58f .c2 {
    fill: #47b58f !important;
}
 
.farbe_8a4cd9 path, .farbe1_8a4cd9 .c1, .farbe2_8a4cd9 .c2 {
    fill: #8a4cd9 !important;
}
 
.farbe_4c76c9 path, .farbe1_4c76c9 .c1, .farbe2_4c76c9 .c2 {
    fill: #4c76c9 !important;
}
 
.farbe_70c9b1 path, .farbe1_70c9b1 .c1, .farbe2_70c9b1 .c2 {
    fill: #70c9b1 !important;
}
 
.farbe_147042 path, .farbe1_147042 .c1, .farbe2_147042 .c2 {
    fill: #147042 !important;
}
 
.farbe_35393f path, .farbe1_35393f .c1, .farbe2_35393f .c2 {
    fill: #35393f !important;
}
 
.farbe_d9dd8e path, .farbe1_d9dd8e .c1, .farbe2_d9dd8e .c2 {
    fill: #d9dd8e !important;
}
 
.farbe_30bfaa path, .farbe1_30bfaa .c1, .farbe2_30bfaa .c2 {
    fill: #30bfaa !important;
}
 
.farbe_16a3a3 path, .farbe1_16a3a3 .c1, .farbe2_16a3a3 .c2 {
    fill: #16a3a3 !important;
}
 
.farbe_d97070 path, .farbe1_d97070 .c1, .farbe2_d97070 .c2 {
    fill: #d97070 !important;
}
 
.farbe_e7c98a path, .farbe1_e7c98a .c1, .farbe2_e7c98a .c2 {
    fill: #e7c98a !important;
}
 
.farbe_8fc970 path, .farbe1_8fc970 .c1, .farbe2_8fc970 .c2 {
    fill: #8fc970 !important;
}
 
.farbe_b6476b path, .farbe1_b6476b .c1, .farbe2_b6476b .c2 {
    fill: #b6476b !important;
}
 
.farbe_30a8c4 path, .farbe1_30a8c4 .c1, .farbe2_30a8c4 .c2 {
    fill: #30a8c4 !important;
}
 
.farbe_c94c76 path, .farbe1_c94c76 .c1, .farbe2_c94c76 .c2 {
    fill: #c94c76 !important;
}
 
.farbe_c4c4e6 path, .farbe1_c4c4e6 .c1, .farbe2_c4c4e6 .c2 {
    fill: #c4c4e6 !important;
}
 
.farbe_c4e6c4 path, .farbe1_c4e6c4 .c1, .farbe2_c4e6c4 .c2 {
    fill: #c4e6c4 !important;
}
 
.farbe_30bf55 path, .farbe1_30bf55 .c1, .farbe2_30bf55 .c2 {
    fill: #30bf55 !important;
}
 
.farbe_b58d8d path, .farbe1_b58d8d .c1, .farbe2_b58d8d .c2 {
    fill: #b58d8d !important;
}
 
.farbe_b58f6b path, .farbe1_b58f6b .c1, .farbe2_b58f6b .c2 {
    fill: #b58f6b !important;
}
 
.farbe_30bf77 path, .farbe1_30bf77 .c1, .farbe2_30bf77 .c2 {
    fill: #30bf77 !important;
}
 
.farbe_b9c81a path, .farbe1_b9c81a .c1, .farbe2_b9c81a .c2 {
    fill: #b9c81a !important;
}
 
.farbe_b56bb5 path, .farbe1_b56bb5 .c1, .farbe2_b56bb5 .c2 {
    fill: #b56bb5 !important;
}
 
.farbe_656965 path, .farbe1_656965 .c1, .farbe2_656965 .c2 {
    fill: #656965 !important;
}
 
.farbe_ac2381 path, .farbe1_ac2381 .c1, .farbe2_ac2381 .c2 {
    fill: #ac2381 !important;
}
 
.farbe_d991b6 path, .farbe1_d991b6 .c1, .farbe2_d991b6 .c2 {
    fill: #d991b6 !important;
}
 
.farbe_9f9a67 path, .farbe1_9f9a67 .c1, .farbe2_9f9a67 .c2 {
    fill: #9f9a67 !important;
}
 
.farbe_c94ca8 path, .farbe1_c94ca8 .c1, .farbe2_c94ca8 .c2 {
    fill: #c94ca8 !important;
}
 
.farbe_9f9738 path, .farbe1_9f9738 .c1, .farbe2_9f9738 .c2 {
    fill: #9f9738 !important;
}
 
.farbe_36a0a0 path, .farbe1_36a0a0 .c1, .farbe2_36a0a0 .c2 {
    fill: #36a0a0 !important;
}
 
.farbe_55b530 path, .farbe1_55b530 .c1, .farbe2_55b530 .c2 {
    fill: #55b530 !important;
}
 
.farbe_30bf30 path, .farbe1_30bf30 .c1, .farbe2_30bf30 .c2 {
    fill: #30bf30 !important;
}


.wappen_div {
    text-align:center;
    width:auto;
    height: 1.5rem;
    line-height: 1;
}

.spielinfo_box .wappen_div {
    text-align:center;
    width:auto;
    height: 60px;
    line-height: 1;
    margin: 0 auto;
}

.spielinfo_staerke {
    background: var(--secondary-color);
    padding: 0 4px 1px;
    border-radius: var(--border-radius-xs);
    line-height: 1;
    margin-right: 5px;
    color: var(--color-white) !important;
}



.wappen_div .svg {
    width:auto;
    height:60px;
    margin:auto;
}

/*
KASSE
*/
#kasse_fyber {
}

.scroll-wrapper {
    -webkit-overflow-scrolling: touch;
    overflow-y: scroll;
}

/*
RANKING
*/
.ranking_platz {
    height:40px;
    width:40px;
    border-radius:60px;
    background-color:#64A517;
    color:var(--app-text, #ffffff);
    line-height:40px;
    margin: 0 20px 0 -10px;
    display:inline-block;
    vertical-align:middle;
}

/*
HILFE
*/

.hilfe_button {
    font-size:36px;
    margin-top: -10px;
}

#hilfe p {
    padding:10px 5%;
    width: 90vw;
}

#hilfe img {
    width:30px;
    height:30px;
    margin-right:10px;
    vertical-align:middle;
}

.help {
    margin-top: 5px;
    margin-left: auto;
    margin-right: 1rem;
}

.sart-calendar {
    margin: 0 auto;
}

#hilfe a {
    font-weight:bold;
    color:var(--buttongreen);
    text-decoration:none;
}

#lehrgang {
    width:inherit;
}

#lehrgang .swiper-slide {
    padding:0 10px;
}

#lehrgang h2 {
    padding:5px 5%;
    background-color:#64A517;
    color: var(--app-text, #ffffff);
}

#lehrgang ul{
    margin-left: 20px;
}

#lehrgang li {
    margin: 2px;
}

#lehrgang .logo {
    width:100px;
    margin-top:10px;
}

#lehrgang .screenshot {
    width:95%;
    display:block;
    margin:auto;
}

.cotrainer_info {
    /* width: 98%; */
    padding: 8px 12px;
    /* height: 11%; */
    background-color: var(--alertbg);
    color: var(--alertMessage);
    border-radius: var(--border-radius-xs);
    margin: auto 5%;
    font-size: 12px;
    line-height: 1.3;
    /* box-shadow: 0px 0px 2px; */
    text-align: center;
    margin-bottom: 1em;
    letter-spacing: 0;
    overflow: auto;
    border: 1px solid var(--border-green-opacity);
}

.cotrainer_info h1{
    margin: unset;
    background-color: unset;
    font-weight: normal;
    font-size: 12px;
    border-radius: unset;
    padding: 0 0 4px 0;
    font-family: var(--font-primary);
    /*text-transform: uppercase;*/
    color: var(--buttongreen);
}

/*
MANAGER
*/
#profiltext textarea {
    height: 100px;
}

/*
KALENDER
*/

#kalender {
    color:var(--app-text, #fff) !important;
    /* Full-screen modal layer. Flex column with the calender-header sized
       to content and the .swiper-wrapper below it taking the remaining
       space — that's where overflow-y:auto kicks in (see rule further down)
       to scroll the saisontag list. iOS safe-area-inset is applied via
       .iOS_shift .calender-header so the close button clears the notch. */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100vh;
    background: var(--bg);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#kalender > .calender-header,
#kalender > .LoginHeader {
    flex: 0 0 auto;
}

#kalender .trenner {
    margin-bottom: 10px;
    margin-left: 5%;
}

#kalender .zeile {
    border-bottom: 1px solid var(--bg-main-opacity);
}

#kalender .zeile, #kalender .zeile:hover {
    background-color: transparent;
}

.calendar {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100vh;
    width: 100vw;
}

#kalender .zeile.selected, #kalender .zeile.selected:hover {
    background-color: var(--bg-green-opacity) !important;
}


#kalender .zeilen_infos {
    display: block;
    padding-left: 20px;
}

.scroll-page {
    overflow-y: scroll;
    height: 79vh;
}

.kalender_item {
    height:22px;
    line-height:22px;
    vertical-align:middle;
    display:block;
}

.kalender_item_doppelt {
    height:44px;
    /*line-height:44px;*/
    vertical-align:middle;
    display:block;
}

.saisontag {
    height:40px;
    width:40px;
    border-radius: var(--border-radius-sm);
    background-color:var(--bg-main-opacity);
    color:var(--color-white);
    line-height:40px;
    display:block;
    vertical-align:middle;
    float:left;
    font-family: var(--font-primary);
}

#fss_freunde .wettbewerbe_box > div:nth-child(odd) {
    background-color:#dedede;
}

#fss_freunde .wettbewerbe_box > div > div{
    width:50%;
    display:inline-block;
}

#fss_freunde .wettbewerb {
    padding:2px;
    background-color:#666e82;
    color:var(--app-text, #fff);
}

#fss_freunde .wettbewerb.noch_dabei {
    background-color:#64A517;
}

.clear {
    clear:both;
}

#generatedCard {
    display: block;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    padding: 1rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
    margin-top: 1em;

    border-radius: 0.75rem;
    border: 1px solid var(--dark3);
    background: var(--dark2);
}

.generatedCardTop {
    color: var(--greyscale-300, #B6B9BD);

    align-self: stretch;
    /* body/medium/regular */
    /* test */
    font-family: Inter;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 1.225rem */
    letter-spacing: 0.0125rem;
    margin-bottom: 1em;
}

.generatedCardTitle {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1 0 0;
    font-family: "MADEOuterSans";
}

.generatedCardButton {
    display: flex;
    padding: 11px 16px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2px;
    flex: 1 0 0;
    align-self: stretch;
    background: var(--dark3);
    border: 1.5px solid #E6B84C;
    border-radius: 12px;
    box-shadow: 0 0 14px -5px rgba(230, 184, 60, 0.55);
    margin-top: 0.5em;
}

.generatedCardButtonTitle {
    color: #F4CC63;
    text-align: center;
    font-family: "MADEOuterSans";
    font-size: 0.92rem;
    font-style: normal;
    line-height: 1.1;
    /*text-transform: uppercase;*/
}

.generatedCardButtonText {
    color: rgba(244, 204, 99, 0.82);
    text-align: center;

    /* body/small/regular */
    font-family: "Inter";
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1rem; /* 133.333% */
    letter-spacing: 0.0125rem;
}

#ownMainBody {
    fill: var(--ownColorTrikot1);
}

#ownStripes {
    fill: var(--ownColorTrikot2);
}

.alertBox {
    width: 90%;
    margin-left: 5%;
    margin-top: 1em;
    margin-bottom: 1em;
    padding: 0.4em;
}

.alertGreen {
    color: var(--alert70);
    background: var(--alert15);
    border-radius: 12px;
    border-width: 1px;
    border-style: solid;
}

/* GRID DEFINITIONS */

.grid_3s {
    display: grid;
    justify-content: space-evenly;
    grid-template-columns: min-content auto min-content;
    grid-template-rows: auto;
    align-items: center;
    gap: 0.5em;
    justify-items: center;
    max-width: 98vw;
}

.grid_5s {
    display: grid;
    justify-content: space-evenly;
    grid-template-columns: auto auto auto auto auto;
    grid-template-rows: auto;
    align-items: center;
    gap: 0.5em;
    justify-items: center;
}

.grid_6s {
    display: grid;
    justify-content: space-evenly;
    grid-template-columns: auto auto auto auto auto auto;
    grid-template-rows: auto;
    align-items: center;
    gap: 0.5em;
}

.grid_7s {
    display: grid;
    justify-content: space-evenly;
    grid-template-columns: auto auto auto auto auto auto auto;
    grid-template-rows: auto;
    align-items: center;
    gap: 0.5em;
}

.grid_20s {
    display: grid;
    justify-content: space-evenly;
    grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto;
    grid-template-rows: auto;
    align-items: center;
}

.grid_item_2_span_1 {
    grid-column-start: 2;
    grid-column-end: 3;
}

.grid_item_2_span_2 {
    grid-column-start: 2;
    grid-column-end: 4;
}

.grid_item_2_span_3 {
    grid-column-start: 2;
    grid-column-end: 5;
}

.grid_item_2_span_4 {
    grid-column-start: 2;
    grid-column-end: 6;
}

.grid_item_2_span_5 {
    grid-column-start: 2;
    grid-column-end: 7;
}

.grid_item_3_span_1 {
    grid-column-start: 3;
    grid-column-end: 4;
}

.grid_item_3_span_2 {
    grid-column-start: 3;
    grid-column-end: 5;
}

.grid_item_3_span_3 {
    grid-column-start: 3;
    grid-column-end: 6;
}

.grid_item_3_span_4 {
    grid-column-start: 3;
    grid-column-end: 7;
}

.grid_item_3_span_5 {
    grid-column-start: 3;
    grid-column-end: 8;
}

.grid_item_4_span_1 {
    grid-column-start: 4;
    grid-column-end: 5;
}

.grid_item_4_span_2 {
    grid-column-start: 4;
    grid-column-end: 6;
}

.grid_item_4_span_3 {
    grid-column-start: 4;
    grid-column-end: 7;
}

.grid_item_4_span_4 {
    grid-column-start: 4;
    grid-column-end: 8;
}

.grid_item_4_span_5 {
    grid-column-start: 4;
    grid-column-end: 9;
}

.grid_item_5_span_1 {
    grid-column-start: 5;
    grid-column-end: 6;
}

.grid_item_5_span_2 {
    grid-column-start: 5;
    grid-column-end: 7;
}

.grid_item_5_span_3 {
    grid-column-start: 5;
    grid-column-end: 8;
}

.grid_item_5_span_4 {
    grid-column-start: 5;
    grid-column-end: 9;
}

.grid_item_5_span_5 {
    grid-column-start: 5;
    grid-column-end: 10;
}

.grid_item_6_span_1 {
    grid-column-start: 6;
    grid-column-end: 7;
}

.grid_item_6_span_2 {
    grid-column-start: 6;
    grid-column-end: 8;
}

.grid_item_6_span_3 {
    grid-column-start: 6;
    grid-column-end: 9;
}

.grid_item_6_span_4 {
    grid-column-start: 6;
    grid-column-end: 10;
}

.grid_item_6_span_5 {
    grid-column-start: 6;
    grid-column-end: 11;
}

.grid_item_7_span_1 {
    grid-column-start: 7;
    grid-column-end: 8;
}

.grid_item_7_span_2 {
    grid-column-start: 7;
    grid-column-end: 9;
}

.grid_item_7_span_3 {
    grid-column-start: 7;
    grid-column-end: 10;
}

.grid_item_7_span_4 {
    grid-column-start: 7;
    grid-column-end: 11;
}

.grid_item_7_span_5 {
    grid-column-start: 7;
    grid-column-end: 12;
}

.grid_item_8_span_1 {
    grid-column-start: 8;
    grid-column-end: 9;
}

.grid_item_8_span_2 {
    grid-column-start: 8;
    grid-column-end: 10;
}

.grid_item_8_span_3 {
    grid-column-start: 8;
    grid-column-end: 11;
}

.grid_item_8_span_4 {
    grid-column-start: 8;
    grid-column-end: 12;
}

.grid_item_8_span_5 {
    grid-column-start: 8;
    grid-column-end: 13;
}

.grid_item_9_span_1 {
    grid-column-start: 9;
    grid-column-end: 10;
}

.grid_item_15_span_5 {
    grid-column-start: 15;
    grid-column-end: 20;

}

.grid_item_18_span_1 {
    grid-column-start: 18;
    grid-column-end: 19;
}

.grid_item_18_span_2 {
    grid-column-start: 18;
    grid-column-end: 20;
}

.grid_item_19_span_1 {
    grid-column-start: 19;
    grid-column-end: 20;
}

.grid_item_19_span_2 {
    grid-column-start: 19;
    grid-column-end: 21;
}

.grid_item_20_span_1 {
    grid-column-start: 20;
    grid-column-end: 21;
}

@media (min-height: 100px) and (max-height: 700px) {
    html {
        font-size: 14px;
    }
    #InitialContent {
        font-size: 14px;
    }

    .StartNow {
        margin-top: 1.5em;
    }
}


#welten .welt__club--auswahl {
    display: flex;
    flex-direction: row;
    gap: 10px;
    padding: 15px;
}

#welten .welt__club--auswahl .vorne {
    text-align: unset;
    vertical-align: unset;
    display: unset;
    line-height: unset;
    height: unset;
}

#welten .welt__club--auswahl .vorne img {
    margin: 0 !important;
    height: auto;
    width: 30px;
}

#welten .welt__club--auswahl .zeilen_infos {
    display: unset;
    width: auto !important;
    font-family: var(--font-primary);
    max-width: unset;
}

#welten .welt__club--auswahl .hauptzeile, #sidemenu .zeilen_infos {
    font-size: 14px;
    line-height: 1;
    display: inline;
    /*text-transform: uppercase;*/
    width: 100%;
    word-wrap: unset;
    word-break: unset;
}

#welten .welt__club--auswahl .vorne .flagge {
    margin: 0 !important;
}

#welten .trenner {
    margin-top: 3em;
}

#verein .zeile_oben {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin-bottom: 24px;
}

#verein .vorne {
    text-align: unset;
    vertical-align: unset;
    display: unset;
    line-height: unset;
    height: unset;
}

#verein .wappen_div {
    text-align: unset;
    width: unset;
    height: unset;
    line-height: unset;
}

#verein .zeile_oben > .zeilen_infos {
    margin-top: 0;
}

#verein .oben .hauptzeile {
    padding-top: unset;
    /*text-transform: uppercase;*/
    margin: 10px 0;
    line-height: 1;
    display: block;
}

#verein .oben .vorne .svg {
    height: 60px;
}

#verein_details .footer {
    height: 8em;
    width: 100%;
    border-top: rgba(255,255,255,0.1);
    border-left: none;
    border-right: none;
    border-bottom: none;
    border-width: 1px;
    background: unset;
    padding-top: 1em;
    padding-bottom: 3em;
    /* margin-bottom: 4em; */
}


#accounts {
    margin: 0 5%;
}

#accounts .zeile {
    padding: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    display: flex;
    background: var(--dark3);
    width: unset;
    margin-left: unset;
}

#bewerbungen_aktuell {
    margin: 0 5%;
}

#bewerbungen_aktuell .cotrainer_info {
    margin: unset;
}

#bewerbungen_aktuell .wechselpunkte {
    padding: 8px 12px;
    background: var(--bg-main-opacity);
    border-radius: var(--border-radius-sm);
    text-align: center;
    width: fit-content;
    margin: 0 auto;
    margin-bottom: 20px;
    font-family: var(--font-primary);
    /*text-transform: uppercase;*/
    font-size: 12px;
    color: var(--color-white);
}

.border-bottom-none {
    border-bottom: none;
}

.border-top-none {
    border-top: none;
}

.block__trenner--primary {
    font-size: 10px;
    line-height: 1;
    font-family: var(--font-primary);
    background: var(--primary-color);
    color: var(--bg);
    padding: 10px 15px;
    /*text-transform: uppercase;*/
    margin-bottom: 8px;
}

.block__trenner--secondary {
    font-size: 10px;
    line-height: 1;
    font-family: var(--font-primary);
    background: var(--secondary-color);
    color: var(--color-white);
    padding: 10px 15px;
    /*text-transform: uppercase;*/
    margin-bottom: 8px;
}

.block__trenner--dark2 {
    font-size: 10px;
    line-height: 1;
    font-family: var(--font-primary);
    background: var(--dark3);
    color: var(--color-white);
    padding: 10px 15px;
    /*text-transform: uppercase;*/
    margin-bottom: 8px;
}

.block__trenner--dark3 {
    font-size: 10px;
    line-height: 1;
    font-family: var(--font-primary);
    background: var(--dark3);
    color: var(--color-white);
    padding: 10px 15px;
    /*text-transform: uppercase;*/
    margin-bottom: 8px;
}

.block__trenner--primary.center,
.block__trenner--secondary.center,
.block__trenner--dark2.center,
.block__trenner--dark3.center {
    text-align: center;
}

#welt_suche_ergebnis .zeile {
    /* height: 60px; */
    padding: 15px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    display: flex;
    background: var(--dark3);
    width: 100%;
    margin-left: unset;
    align-items: center;
    gap: 16px;
}

#welt_suche_ergebnis .zeile .vorne .flagge {
    margin: 0 !important;
    height: auto;
    width: 32px;
}

#welt_suche_ergebnis .zeile .hinten {
    display: none;
}

#welt_suche_ergebnis .hauptzeile, #sidemenu .zeilen_infos {
    font-size: 14px;
    max-width: 99%;
    word-wrap: unset;
    word-break: unset;
    white-space: normal !important;
}

#verein_wahl_detail_ergebnisse .zeile {
    padding: 15px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    display: flex;
    background: var(--dark3);
    width: unset;
    margin: 0 5%;
    align-items: center;
    gap: 16px;
}

#verein_wahl_detail_ergebnisse .zeile .hinten {
    display: none;
}

#verein_wahl_detail_ergebnisse .zeile .vorne {
    display: none;
}

#verein .zeile_oben .hauptzeile {
    font-size: 20px;
    color: var(--color-white);
}

#verein .zeile .vorne .flagge {
    margin: 0 16px 0 0 !important;
}

#welt_suche_ergebnis .vorne {
     text-align: unset;
     vertical-align: unset;
     display: unset;
     line-height: unset;
     height: unset;
}


/* ============================================================
   Kapitäns-Armband-Badge ("C") — Kader, Spielbericht,
   Spieler-Detail, Aufstellung. Gold/Amber wie ein Armband.
   ============================================================ */
.kapitaen_badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #f0b429;
    color: #1a1a1a;
    font-weight: bold;
    font-size: 11px;
    line-height: 1;
    margin-left: 0.4em;
    vertical-align: middle;
    flex-shrink: 0;
    /* Kein geerbter Text-Schatten (z.B. .Spielername hat einen fuer
       Lesbarkeit ueberm Bild) — auf dem Badge stoert er. */
    text-shadow: none;
}

/* Variante als Overlay auf einem Trikot (Spielbericht-Formation):
   klein, oben-rechts auf das Trikot gesetzt. */
.kapitaen_badge_trikot {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 15px;
    height: 15px;
    font-size: 9px;
    z-index: 5;
}

/* Trikot-Container in der Aufstellung braucht position:relative,
   damit das Kapitäns-Badge-Overlay korrekt oben-rechts sitzt. */
.aufstellung_spieler_trikot_mit_nummer {
    position: relative;
}
.spielbericht_aufstellung_spieler {
    position: relative;
}

/* ===== App-weite Bausteine (kof-*): Staerke-Badge, Flagge, Positions-Chip, Eyebrow ===== */
/* Staerke-Badge: Werte immer weiss; ab 70 orange, ab 90 gruen, ab 110 lila, darunter rot */
.kof-str { display: inline-flex; align-items: center; justify-content: center; font-family: "MADEOuterSans"; font-size: 14px; min-width: 30px; height: 26px; padding: 0 8px; border-radius: 8px; box-sizing: border-box; color: var(--app-text, #fff); }
.kof-str--orange { background: #E0820C; }
.kof-str--gruen { background: #5DBE2E; }
.kof-str--lila { background: #7B1EFA; }
.kof-str--low { background: #F75555; }
/* Flagge: abgerundetes Rechteck (app-weit einheitlich) */
.kof-flag { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.kof-flag .svg, .kof-flag img, .kof-flag .flagge { height: 22px !important; width: auto !important; border-radius: 3px !important; overflow: hidden; margin: 0 !important; }
/* Positions-Chip nach Mannschaftsteil (dezent getoent): TW orange, Abwehr gruen, Mittelfeld blau, Sturm rot */
.kof-pos { display: inline-block; font-family: "MADEOuterSans"; font-size: 10px; font-weight: 500; padding: 2px 7px; border-radius: 6px; background: rgba(255,255,255,0.08); color: var(--app-text, rgba(255,255,255,0.85)); }
.kof-pos--tw  { background: rgba(224,130,12,0.22); color: #F0B057; }
.kof-pos--def { background: rgba(93,190,46,0.20);  color: #9FE36A; }
.kof-pos--mid { background: rgba(59,130,224,0.22); color: #88B8F0; }
.kof-pos--att { background: rgba(247,85,85,0.20);  color: #FCA5A5; }
/* 4.3.0: Zweitposition in fremdem Mannschaftsteil in dessen Farbe */
.kof-pos .kof-pos2--tw  { color: #F0B057; }
.kof-pos .kof-pos2--def { color: #9FE36A; }
.kof-pos .kof-pos2--mid { color: #88B8F0; }
.kof-pos .kof-pos2--att { color: #FCA5A5; }
/* 4.3.0: Rollen-Badge unter dem Positions-Chip + Fuss-Chip */
.kof-posw { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; vertical-align: middle; }
.kof-rolle { display: inline-block; font-family: "MADEOuterSans"; font-size: 8px; font-weight: 600; letter-spacing: 0.2px; padding: 1px 5px; border-radius: 6px; line-height: 1.25; white-space: nowrap; }
.kof-rolle--f9, .kof-rolle--fluegel { background: rgba(123,30,250,0.28); color: #D2B4FF; }
.kof-rolle--schiene { background: rgba(0,184,184,0.24); color: #8FF0F0; }
.kof-fuss { display: inline-block; min-width: 14px; text-align: center; margin-left: 4px; padding: 1px 4px; border-radius: 6px; font-family: "MADEOuterSans"; font-size: 9px; font-weight: 600; background: rgba(255,255,255,0.08); color: var(--app-text, rgba(255,255,255,0.85)); vertical-align: middle; }
.kof-fuss--b { background: rgba(99,255,159,0.16); color: var(--buttongreen, #63FF9F); }
/* Eyebrow / Sektions-Label — markanter: gruener Akzentbalken + helle Schrift */
.kof-eb { display: flex; align-items: center; gap: 9px; font-family: "MADEOuterSans"; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--app-text, rgba(255,255,255,0.92)); margin: 18px 14px 10px; }
.kof-eb::before { content: ''; flex: 0 0 auto; width: 4px; height: 14px; border-radius: 2px; background: var(--buttongreen); }

/* ===== Dual-Range-Slider (rs2-*) ===== */
.rs2 { padding: 2px 0; }
.rs2-vals { display: flex; justify-content: space-between; font-family: "MADEOuterSans"; font-size: 13px; color: var(--app-text, #fff); margin: 0 4px 12px; }
.rs2-track { position: relative; height: 5px; background: rgba(255,255,255,0.14); border-radius: 3px; margin: 0 9px 6px; }
.rs2-fill { position: absolute; top: 0; height: 100%; background: var(--buttongreen); border-radius: 3px; }
.rs2-input { position: absolute; top: 50%; left: -9px; width: calc(100% + 18px); transform: translateY(-50%); margin: 0; background: transparent; pointer-events: none; -webkit-appearance: none; appearance: none; height: 18px; }
.rs2-input::-webkit-slider-thumb { pointer-events: auto; -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--buttongreen); border: 3px solid var(--bg, #15171c); box-sizing: border-box; }
.rs2-input::-moz-range-thumb { pointer-events: auto; width: 18px; height: 18px; border: 3px solid var(--bg, #15171c); border-radius: 50%; background: var(--buttongreen); box-sizing: border-box; }
.rs2-input::-webkit-slider-runnable-track { background: transparent; border: none; }
.rs2-input::-moz-range-track { background: transparent; border: none; }
/* 4.3.0: Markierung im Range-Slider (z.B. aktueller Saisontag) */
.rs2-mark { position: absolute; top: -5px; height: 15px; width: 2px; margin-left: -1px; background: rgba(255,255,255,0.9); border-radius: 1px; z-index: 3; pointer-events: none; }
.rs2-mark span { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 7px; font-family: "MADEOuterSans"; font-size: 13px; line-height: 16px; color: var(--buttongreen); white-space: nowrap; }
/* nahe am Rand wuerde die Zahl mit den Ankerwerten kollidieren -> dort unter die Spur */
.rs2-mark--edge span { bottom: auto; top: 100%; margin: 6px 0 0; }
/* iOS 26: neues natives Range-Styling zeichnet einen Kapsel-Rahmen um die Spur -> komplett abschalten */
.rs2-input { outline: none !important; border: 0 !important; box-shadow: none !important; background: transparent !important; }
.rs2-input:focus { outline: none !important; }
.rs2-input::-webkit-slider-runnable-track { background: transparent !important; border: 0 !important; box-shadow: none !important; outline: none !important; height: 5px; }

/* ===== App-weit: Flaggen als abgerundetes Rechteck + Sektions-Header (.H6bold) markant ===== */
.flagge { border-radius: 3px; overflow: hidden; }
.H6bold::before { content: ''; display: inline-block; width: 4px; height: 0.82em; border-radius: 2px; background: var(--buttongreen); margin-right: 9px; vertical-align: -1px; }

/* ===== Globale Dossier-Listen-Bausteine (Subscreens ohne eigenes vh-/mg-CSS) ===== */
.kof-list { margin: 14px 5% 40px; }
.kof-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.09); border-radius: 16px; overflow: hidden; margin-bottom: 4px; }
.kof-lr { display: flex; align-items: center; gap: 11px; padding: 11px 14px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.kof-lr:last-child { border-bottom: none; }
.kof-lr-rank { width: 22px; text-align: center; font-family: "MADEOuterSans"; font-size: 13px; color: var(--app-text, rgba(255,255,255,0.85)); flex: 0 0 auto; }
.kof-lr-ic { width: 34px; height: 34px; border-radius: 10px; background: rgba(240,178,58,0.16); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.kof-lr-ic img { width: 19px; height: 19px; }
.kof-lr-body { flex: 1; min-width: 0; }
.kof-lr-name { font-family: var(--font-secondary); font-weight: 600; font-size: 14px; color: var(--app-text, #fff); }
.kof-lr-sub { font-size: 11px; color: var(--app-text, rgba(255,255,255,0.85)); margin-top: 2px; }
.kof-lr-val { font-family: "MADEOuterSans"; font-size: 16px; color: var(--app-text, #fff); flex: 0 0 auto; text-align: right; }
.kof-lr-tag { font-family: "MADEOuterSans"; font-size: 12px; padding: 4px 9px; border-radius: 8px; flex: 0 0 auto; background: rgba(255,255,255,0.08); color: var(--app-text, rgba(255,255,255,0.8)); }
.kof-lr-tag.win { background: rgba(240,178,58,0.18); color: #F0B23A; }
.kof-empty { padding: 16px; text-align: center; color: var(--app-text, rgba(255,255,255,0.85)); font-family: var(--font-secondary); font-size: 13px; }
.kof-crest { width: 34px; height: 34px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.kof-crest .wappen_div, .kof-crest svg, .kof-crest img { width: 32px !important; height: 32px !important; }

/* Ewige/Saison-Statistik: Spieler, die noch im Verein sind, gruen hervorheben */
.kof-lr--own .kof-lr-name { color: var(--buttongreen); }
.kof-lr--own .kof-lr-rank { color: var(--buttongreen); }

/* ===== Premium-Stats-Lock (3.7.0): Sperr-Karte fuer Premium-Bereiche ===== */
.premium-lock {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(99,255,159,0.25);
    border-radius: 16px;
    padding: 22px 18px;
    margin: 0 14px 10px;
    text-align: center;
}
.premium-lock-icon { font-size: 34px; line-height: 1; margin-bottom: 10px; }
.premium-lock-titel {
    font-family: "MADEOuterSans", sans-serif;
    font-size: 1em;
    color: var(--buttongreen, #63FF9F);
    margin-bottom: 7px;
}
.premium-lock-text {
    font-size: 0.85em;
    color: var(--app-text, rgba(255,255,255,0.85));
    line-height: 1.45;
    margin-bottom: 14px;
    font-family: var(--font-secondary);
}
.premium-lock-btn {
    display: inline-block;
    background: var(--buttongreen, #63FF9F);
    color: #091420;
    font-family: "MADEOuterSans", sans-serif;
    font-size: 0.85em;
    padding: 11px 22px;
    border-radius: 22px;
}
.premium-lock-btn:active { opacity: 0.85; }


/* === P3 (4.2.3): kof-hero — gemeinsamer Hero-Baustein =======================
   Ersetzt die Bildband-Header (headerBG) der Ex-Image-Header-Screens.
   Screen-Inhalt (Trikots, Wappen, Matchup) kommt vom jeweiligen Screen. */
.kof-hero {
    display: flex;
    align-items: center;          /* Wappen vertikal mittig zwischen den Trikots */
    justify-content: center;
    gap: 18px;
    padding: 14px 0 10px;
}
.kof-hero .kof-hero-kit { width: 92px; }
.kof-hero .kof-hero-kit svg { width: 100%; height: auto; display: block; }
.kof-hero .kof-hero-wappen { width: 82px; }
/* .wappen_div hat global height:1.5rem — hier braucht es die echte Hoehe,
   sonst ragt das SVG aus dem Hero und ueberlappt den Content darunter. */
.kof-hero .kof-hero-wappen .wappen_div { width: 100%; height: auto; line-height: 0; }
.kof-hero .kof-hero-wappen svg { width: 100%; height: auto; display: block; }
.kof-hero-name {
    text-align: center;
    font-family: "MADEOuterSans";
    font-size: 16px;
    line-height: 1.3;
    color: var(--app-text, #fff);
    margin: 2px 5% 0;
}
.kof-hero-liga {
    text-align: center;
    font-family: var(--font-primary);
    font-size: 11px;
    color: var(--app-text, rgba(255,255,255,0.85));
    margin: 4px 5% 10px;
}