/* ============================================================================
   KoF Saisonkalender 2.0 (5.0.3) - Styles fuer js/kof_kalender.js (#kalender > .kof-kal)
   Rahmen (#kalender, Header, Scrollbereich) kommt aus index.css/startseite.css.
   ============================================================================ */
.kof-kal { font-family: var(--font-secondary, "Inter"); color: var(--app-text, #fff); }
/* Swiper setzt .swiper-wrapper auf content-box + width 100 % -> mit dem Innenabstand des Scrollbereichs 28 px zu breit */
#kalender > .swiper-wrapper.kof-kal { box-sizing: border-box !important; width: 100% !important; max-width: 100%; }
.kof-kal .kal-eb { font-family: "MADEOuterSans"; font-size: 11px; letter-spacing: .5px; text-transform: uppercase; color: var(--buttongreen); }

/* Saison-Kopf */
.kof-kal .kal-saison { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.09); border-radius: 16px; padding: 14px 14px 12px; margin: 4px 0 12px; }
.kof-kal .kal-saison-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.kof-kal .kal-saison-tag { font-family: "MADEOuterSans"; font-size: 18px; margin-top: 4px; }
.kof-kal .kal-saison-datum { font-size: 12px; color: var(--app-text, rgba(255,255,255,0.85)); text-align: right; }
.kof-kal .kal-prog { height: 6px; border-radius: 3px; background: rgba(255,255,255,0.1); margin-top: 12px; overflow: hidden; }
.kof-kal .kal-prog i { display: block; height: 100%; border-radius: 3px; background: var(--buttongreen); }

/* Chip-Leiste */
.kof-kal .kal-chips-wrap { margin: 0 -14px 12px; }
.kof-kal .kal-chips { display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 2px 14px 6px; scrollbar-width: none; }
.kof-kal .kal-chips::-webkit-scrollbar { display: none; }
.kof-kal .kal-chip { flex: 0 0 auto; width: 44px; height: 54px; border-radius: 14px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.09);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.kof-kal .kal-chip b { font-family: "MADEOuterSans"; font-size: 15px; font-weight: normal; color: var(--app-text, #fff); line-height: 1; }
.kof-kal .kal-chip--vorbei b { opacity: .55; }
.kof-kal .kal-chip--heute { border-color: rgba(99,255,159,0.55); }
.kof-kal .kal-chip--heute b { color: var(--buttongreen); }
.kof-kal .kal-chip--on, .kof-kal .kal-chip--on.kal-chip--heute { background: var(--buttongreen); border-color: var(--buttongreen); }
.kof-kal .kal-chip--on b { color: #073d22 !important; opacity: 1; }
.kof-kal .kal-dots { display: flex; gap: 3px; height: 5px; }
.kof-kal .kal-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,0.35); }
.kof-kal .kal-dot--liga { background: #63FF9F; }
.kof-kal .kal-dot--pokal { background: #C084FC; }
.kof-kal .kal-dot--int { background: #5BC8FF; }
.kof-kal .kal-dot--nati { background: #FFD166; }
.kof-kal .kal-dot--hinweis { background: #fff; }
.kof-kal .kal-chip--on .kal-dot { background: rgba(7,61,34,0.75); }

/* Tages-Panel */
.kof-kal .kal-tag-kopf { display: flex; align-items: center; gap: 8px; margin: 2px 0 10px; }
.kof-kal .kal-tag-nav { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; color: var(--buttongreen); }
.kof-kal .kal-tag-nav .kal-ic { width: 20px; height: 20px; }
.kof-kal .kal-tag-mitte { flex: 1 1 auto; text-align: center; min-width: 0; }
.kof-kal .kal-tag-t { font-family: "MADEOuterSans"; font-size: 17px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.kof-kal .kal-tag-status { font-family: var(--font-secondary, "Inter"); font-size: 11px; padding: 3px 9px; border-radius: 10px; background: rgba(255,255,255,0.1); }
.kof-kal .kal-tag-status--heute { background: rgba(99,255,159,0.18); color: var(--buttongreen); }
.kof-kal .kal-tag-d { font-size: 12px; color: var(--app-text, rgba(255,255,255,0.85)); margin-top: 3px; }
.kof-kal .kal-zu-heute { display: inline-block; margin: -4px 0 10px; padding: 6px 12px; border-radius: 12px; border: 1px solid rgba(99,255,159,0.4); color: var(--buttongreen); font-size: 12px; font-family: "MADEOuterSans"; }

/* Kacheln */
.kof-kal .kal-k { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.09); border-radius: 16px; padding: 12px 13px; margin-bottom: 10px; position: relative; overflow: hidden; }
.kof-kal .kal-k::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: rgba(255,255,255,0.25); }
.kof-kal .kal-k--liga::before { background: #63FF9F; }
.kof-kal .kal-k--pokal::before { background: #C084FC; }
.kof-kal .kal-k--int::before { background: #5BC8FF; }
.kof-kal .kal-k--nati::before, .kof-kal .kal-k--bewerbung::before { background: #FFD166; }
.kof-kal .kal-k--aaw::before, .kof-kal .kal-k--jaaw::before { background: #63FF9F; }
.kof-kal .kal-k--dk::before, .kof-kal .kal-k--vertrag::before { background: #FF9F63; }
.kof-kal .kal-k--ende::before, .kof-kal .kal-k--start::before { background: #fff; }
.kof-kal .kal-k--frei::before { background: rgba(255,255,255,0.18); }
.kof-kal .kal-k-top { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.kof-kal .kal-wb { font-family: "MADEOuterSans"; font-size: 10px; letter-spacing: .3px; text-transform: uppercase; padding: 4px 9px; border-radius: 9px; background: rgba(255,255,255,0.1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70%; }
.kof-kal .kal-wb--liga { background: rgba(99,255,159,0.16); color: #63FF9F; }
.kof-kal .kal-wb--pokal { background: rgba(192,132,252,0.18); color: #D9B3FF; }
.kof-kal .kal-wb--int { background: rgba(91,200,255,0.18); color: #8ED9FF; }
.kof-kal .kal-wb--nati { background: rgba(255,209,102,0.18); color: #FFD166; }
.kof-kal .kal-ha { margin-left: auto; font-size: 11px; color: var(--app-text, rgba(255,255,255,0.85)); }
.kof-kal .kal-k-main { display: flex; align-items: center; gap: 12px; }
.kof-kal .kal-wappen { flex: 0 0 46px; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; }
.kof-kal .kal-wappen svg, .kof-kal .kal-wappen img { width: 46px !important; height: 46px !important; }
.kof-kal .kal-flag { width: 44px !important; height: 32px !important; border-radius: 6px; object-fit: cover; }
.kof-kal .kal-gegner { flex: 1 1 auto; min-width: 0; }
.kof-kal .kal-name { font-family: "MADEOuterSans"; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kof-kal .kal-sub { font-size: 12px; color: var(--app-text, rgba(255,255,255,0.85)); margin-top: 3px; }
.kof-kal .kal-erg { flex: 0 0 auto; font-family: "MADEOuterSans"; font-size: 17px; padding: 6px 10px; border-radius: 10px; background: rgba(255,255,255,0.08); min-width: 44px; text-align: center; }
.kof-kal .kal-erg--s { background: rgba(99,255,159,0.18); color: #63FF9F; }
.kof-kal .kal-erg--n { background: rgba(255,99,99,0.2); color: #FF8A8A; }
.kof-kal .kal-erg--u { background: rgba(255,209,102,0.18); color: #FFD166; }
.kof-kal .kal-erg--offen { color: var(--app-text, rgba(255,255,255,0.85)); letter-spacing: 1px; }
.kof-kal .kal-erg--zeit { font-size: 14px; }
.kof-kal .kal-k-foot { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 9px; font-size: 11px; color: var(--buttongreen); }
.kof-kal .kal-k-foot .kal-ic { width: 14px; height: 14px; }

.kof-kal .kal-k--info { display: flex; gap: 12px; align-items: flex-start; }
.kof-kal .kal-k-ic { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; color: var(--buttongreen); }
.kof-kal .kal-k--dk .kal-k-ic, .kof-kal .kal-k--vertrag .kal-k-ic { color: #FF9F63; }
.kof-kal .kal-k--nati .kal-k-ic, .kof-kal .kal-k--bewerbung .kal-k-ic { color: #FFD166; }
.kof-kal .kal-k--ende .kal-k-ic, .kof-kal .kal-k--start .kal-k-ic, .kof-kal .kal-k--frei .kal-k-ic { color: var(--app-text, #fff); }
.kof-kal .kal-k-ic .kal-ic { width: 22px; height: 22px; }
.kof-kal .kal-k-body { flex: 1 1 auto; min-width: 0; }
.kof-kal .kal-k-t { font-family: "MADEOuterSans"; font-size: 14px; }
.kof-kal .kal-k-x { font-size: 12px; line-height: 1.45; color: var(--app-text, rgba(255,255,255,0.85)); margin-top: 4px; }
.kof-kal .kal-k-x b { color: var(--app-text, #fff); font-weight: 600; }
.kof-kal .kal-btn { display: inline-block; margin-top: 10px; padding: 9px 14px; border-radius: 12px; background: var(--buttongreen); color: #073d22; font-family: "MADEOuterSans"; font-size: 12px; }

/* Legende, Laden, Fehler */
.kof-kal .kal-legende { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 6px 2px 10px; font-size: 11px; color: var(--app-text, rgba(255,255,255,0.85)); }
.kof-kal .kal-legende span { display: inline-flex; align-items: center; gap: 6px; }
.kof-kal .kal-fehler { text-align: center; padding: 30px 10px 10px; font-size: 13px; }
.kof-kal .kal-alt { margin-top: 14px; }
.kof-kal .kal-alt-z { display: flex; gap: 12px; align-items: center; padding: 9px 12px; border-radius: 12px; background: rgba(255,255,255,0.05); margin-bottom: 6px; font-size: 13px; }
.kof-kal .kal-alt-z b { font-family: "MADEOuterSans"; font-weight: normal; width: 28px; text-align: center; }
.kof-kal .kal-alt-z--heute { background: rgba(99,255,159,0.12); }
.kof-kal .kal-ic { width: 18px; height: 18px; flex: 0 0 auto; }