/* ==========================================================================
   IceFighter design 2 (redesign 2026): tokens, base, layout, components.

   Loaded only by the new layout (templates/sf/member/if2/layout.php), never
   together with inc/styles.css. Everything uses the if- prefix. The values
   come from the designer's UI kit (redesign/grafiken/icefighter-ui-kit.jpg),
   measured on the 1440 px desktop mockups. docs/redesign.md lists the
   building blocks; designVorschau.php shows all of them.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
    --if-navy: #0D1B3A;
    --if-navy-2: #172B57;
    --if-navy-3: #24396A;
    --if-eisblau: #3FA9E0;
    --if-eisblau-dark: #1E86C0;
    --if-eisblau-soft: #E3F2FB;
    --if-frost: #EEF4FA;
    --if-white: #FFFFFF;
    --if-red: #E1252F;
    --if-green: #22A86B;
    --if-softred: #E46A6A;
    --if-gold: #C9A227;
    --if-line: #D6E0EA;
    --if-muted: #5B6B85;
    --if-disabled: #BCC6D3;
    --if-disabled-text: #F4F7FA;
    --if-row-hover: #EEF5FC;

    --if-radius: 12px;
    --if-radius-s: 6px;
    --if-shadow: 0 2px 10px rgba(13, 27, 58, .08);
    --if-shadow-l: 0 8px 28px rgba(13, 27, 58, .16);
    --if-gutter: 32px;
    --if-max: 1440px;

    --if-topbar-h: 52px;
    --if-nav-h: 35px;
    --if-subnav-h: 30px;
    --if-hero-h: 168px;
}

/* ---------- Base ---------- */
html { -webkit-text-size-adjust: 100%; }
body.if2 {
    margin: 0;
    min-height: 100vh;
    display: flex; flex-direction: column;   /* footer stays at the bottom on short pages */
    font-family: var(--if-font-body);
    font-size: 14px;
    line-height: 1.45;
    color: var(--if-navy);
    background: var(--if-frost) url(../img/if2/eis.svg) repeat;
    background-attachment: fixed;
}
.if2 *, .if2 *::before, .if2 *::after { box-sizing: border-box; }
.if2 a { color: var(--if-eisblau-dark); text-decoration: none; }
.if2 a:hover { text-decoration: underline; }
.if2 img { max-width: 100%; }
.if2 h1, .if2 h2, .if2 h3, .if2 h4 { margin: 0; font-family: var(--if-font-head); color: var(--if-navy); }
.if2 p { margin: 0 0 .8em; }
.if2 :focus-visible { outline: 2px solid var(--if-eisblau); outline-offset: 2px; }

.if-icon { width: 20px; height: 20px; flex: none; vertical-align: middle; }
.if-icon--s { width: 16px; height: 16px; }
.if-icon--l { width: 28px; height: 28px; }
.if-icon--xl { width: 44px; height: 44px; }

.if-head { font-family: var(--if-font-head); }
.if-number { font-family: var(--if-font-head); font-weight: 700; font-variant-numeric: tabular-nums; }
.if-label {
    font-family: var(--if-font-head); font-weight: 600; font-size: 12px;
    text-transform: uppercase; letter-spacing: .06em; color: var(--if-navy);
}
.if-muted { color: var(--if-muted); }
.if-pos { color: var(--if-green); }
.if-neg { color: var(--if-red); }
.if-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.if-wrap { max-width: var(--if-max); margin: 0 auto; padding: 0 var(--if-gutter); }

/* ---------- Top bar: logo, season, money, messages, next game ---------- */
.if-topbar {
    position: relative; z-index: 30;
    background: rgba(255, 255, 255, .86) url(../img/if2/eis.svg);
    border-bottom: 1px solid var(--if-line);
}
.if-topbar__in { display: flex; align-items: center; height: var(--if-topbar-h); gap: 0; }

.if-logo {
    display: inline-flex; align-items: center; flex: none; margin-right: 18px;
    font-family: var(--if-font-head); font-weight: 800; font-style: italic;
    font-size: 40px; line-height: 1; letter-spacing: -.01em; text-transform: uppercase;
    color: var(--if-navy); text-decoration: none !important;
}
/* Logo (img/if2/logo/): the lightning bolt reaches over the bar as in the mockups */
.if-logo img { position: relative; z-index: 2; height: 72px; width: auto; display: block; margin: -10px 0; }

.if-stat {
    display: flex; align-items: center; gap: 10px; height: 100%;
    padding: 0 22px; border-left: 1px solid var(--if-line);
    font-family: var(--if-font-head); font-weight: 600; font-size: 15px;
    text-transform: uppercase; white-space: nowrap; color: var(--if-navy);
}
.if-stat .if-icon { width: 26px; height: 26px; color: var(--if-navy); }
.if-stat b { font-weight: 700; }
.if-stat .if-dot { margin: 0 6px; }
a.if-stat { color: var(--if-navy); }
a.if-stat:hover { text-decoration: none; background: rgba(63, 169, 224, .08); }
.if-stat--mail { position: relative; padding: 0 20px; }
.if-stat--mail .if-icon { width: 30px; height: 30px; }
.if-badge {
    position: absolute; top: 9px; left: 38px;
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
    background: var(--if-red); color: #fff; border: 2px solid #fff;
    font: 700 11px/14px var(--if-font-body); text-align: center;
}
.if-next { margin-left: auto; padding-right: 0; gap: 12px; }
.if-next .if-icon { width: 34px; height: 34px; }
.if-next__text { display: flex; flex-direction: column; line-height: 1.1; border-bottom: 2px solid var(--if-red); padding-bottom: 2px; min-width: 260px; }
.if-next__what { font-weight: 500; font-size: 13px; letter-spacing: .01em; }
.if-next__count { font-weight: 700; font-size: 22px; letter-spacing: .02em; color: var(--if-navy); font-variant-numeric: tabular-nums; }
.if-next__count.is-soon { color: var(--if-eisblau-dark); }
.if-next__count--text { font-size: 15px; font-weight: 600; padding: 3px 0 2px; }

/* Next match as a floating card (if2_next_card()): from 1353 px in the top bar,
   reaching down over the menu bar beside its last item; narrower over the header
   picture (see the 1352 and 820 px blocks). Narrow, in three rows: what and
   when, the countdown, then "Zum Spiel" across the card. */
.if-nextcard {
    position: relative; z-index: 2; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto auto;
    column-gap: 12px; align-items: center; margin-left: auto; align-self: flex-start; margin-top: 7px; width: 300px; max-width: 300px; padding: 9px 12px 10px 14px; box-sizing: border-box;
    background: #fff; border-radius: var(--if-radius-s); border-bottom: 3px solid var(--if-red);
    box-shadow: var(--if-shadow-l); font-family: var(--if-font-head); color: var(--if-navy);
}
.if-nextcard__icon { grid-row: 1 / 3; width: 32px; height: 32px; color: var(--if-navy); }
.if-nextcard__text { display: contents; }
.if-nextcard__what { grid-column: 2; font-weight: 600; font-size: 13px; line-height: 1.2; text-transform: uppercase; letter-spacing: .02em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.if-nextcard__count { grid-column: 2; font-weight: 700; font-size: 24px; line-height: 1.1; letter-spacing: .02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.if-nextcard__count.is-soon { color: var(--if-eisblau-dark); }
.if-nextcard__count--text { font-size: 14px; font-weight: 600; line-height: 1.2; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.if-nextcard .if-live { grid-column: 1 / 3; grid-row: 3; justify-content: center; margin: 9px 0 0; height: 30px; padding: 0 14px; font-size: 15px; }
.if-nextcard .if-live:not(.is-live) { background: #EEF2F7; color: #8D9AAE !important; border-color: #DCE3EC; }
.if-nextcard.is-live { box-shadow: 0 0 0 2px var(--if-red), var(--if-shadow-l); }
.if-nextcard--hero { display: none; }
@media (max-width: 1352px) {
    /* beside the menu there is no room (it ends at 1009 px, the card is 300 px): over the header picture, top right */
    .if-nextcard--top { display: none; }
    .if-nextcard--hero { display: grid; position: absolute; z-index: 3; top: 14px; right: var(--if-gutter); margin: 0; }
}

.if-burger { display: none; }

/* ---------- Main menu (level 1) ---------- */
.if-nav { position: relative; z-index: 20; background: var(--if-navy); }
.if-nav__in { display: flex; align-items: stretch; height: var(--if-nav-h); }
.if-nav__list { display: flex; margin: 0; padding: 0; list-style: none; }
.if-nav__list > li { position: relative; display: flex; }
.if-nav__link {
    position: relative; display: flex; align-items: center; padding: 0 26px;
    font-family: var(--if-font-head); font-weight: 600; font-size: 16px;
    text-transform: uppercase; letter-spacing: .03em; color: #fff !important;
    text-decoration: none !important; white-space: nowrap;
}
.if-nav__list > li:first-child .if-nav__link { padding-left: 14px; }
.if-nav__link:hover { background: var(--if-navy-2); }
.if-nav__link.is-active::after {
    content: ''; position: absolute; left: 8px; right: 8px; bottom: 0; height: 3px; background: var(--if-red);
}
.if-nav__link.is-active::before {
    content: ''; position: absolute; left: 50%; bottom: -6px; margin-left: -6px;
    border: 6px solid transparent; border-bottom: 0; border-top-color: var(--if-red);
}
/* Dropdown for level 2 while hovering (the subnav row shows the active one) */
.if-nav__drop {
    display: none; position: absolute; top: 100%; left: 0; min-width: 200px; padding: 6px 0;
    margin: 0; list-style: none; background: #fff; box-shadow: var(--if-shadow-l);
    border-top: 3px solid var(--if-red); border-radius: 0 0 var(--if-radius-s) var(--if-radius-s);
}
.if-nav__list > li:hover > .if-nav__drop, .if-nav__list > li:focus-within > .if-nav__drop { display: block; }
.if-nav__list > li.is-current:hover > .if-nav__drop { display: none; }
.if-nav__drop a {
    display: block; padding: 7px 18px; font: 600 15px/1.3 var(--if-font-head);
    text-transform: uppercase; letter-spacing: .03em; color: var(--if-navy);
}
.if-nav__drop a:hover { background: var(--if-row-hover); text-decoration: none; }

.if-live {
    display: inline-flex; align-items: center; gap: 10px; align-self: center; margin-left: auto;
    height: 27px; padding: 0 20px; border-radius: 4px;
    font: 600 16px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .03em;
    background: #3A4A6E; color: #B4C0D4 !important; text-decoration: none !important;
    border: 1px solid #4A5B80; cursor: default;
}
.if-live .if-icon { width: 14px; height: 14px; }
.if-live.is-live {
    background: var(--if-navy); color: #fff !important; cursor: pointer;
    border: 2px solid var(--if-red); box-shadow: 0 0 14px rgba(225, 37, 47, .65);
}
.if-live.is-live::before {
    content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--if-red);
    animation: if-pulse 1.4s ease-in-out infinite;
}
.if-live.is-live .if-icon { display: none; }
@keyframes if-pulse { 50% { opacity: .35; } }

/* ---------- Submenu (level 2) ---------- */
.if-subnav { position: relative; z-index: 10; background: #fff; border-bottom: 1px solid var(--if-line); }
.if-subnav__in { display: flex; height: var(--if-subnav-h); overflow-x: auto; scrollbar-width: none; }
.if-subnav__in::-webkit-scrollbar { display: none; }
.if-subnav__link {
    position: relative; display: flex; align-items: center; padding: 0 26px; flex: none;
    font: 600 14px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .03em;
    color: var(--if-navy) !important; text-decoration: none !important; white-space: nowrap;
}
.if-subnav__link:first-child { padding-left: 14px; }
.if-subnav__link:hover { color: var(--if-eisblau-dark) !important; }
.if-subnav__link.is-active::after {
    content: ''; position: absolute; left: 6px; right: 6px; bottom: 0; height: 2px; background: var(--if-red);
}
.if-subnav__link.is-active::before {
    content: ''; position: absolute; left: 50%; bottom: 0; margin-left: -5px;
    border: 5px solid transparent; border-top: 0; border-bottom-color: var(--if-red);
}

/* ---------- Hero strip ---------- */
.if-hero { position: relative; height: var(--if-hero-h); overflow: hidden; background: var(--if-frost); }
.if-hero__img {
    position: absolute; inset: 0 0 0 18%;
    background-size: cover; background-repeat: no-repeat;
    /* focal point of the image (if2_image_focus_css()), so heads stay in the strip */
    background-position: var(--if-fx, 100%) var(--if-fy, 50%);
}
.if-hero::before {
    content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(90deg, var(--if-frost) 0%, rgba(238, 244, 250, .96) 18%, rgba(238, 244, 250, .55) 27%, rgba(238, 244, 250, 0) 40%);
}
.if-hero__in { position: relative; z-index: 2; height: 100%; display: flex; align-items: center; }
.if-hero__title {
    position: relative; margin: -14px 0 0; padding-bottom: 14px;
    font-family: var(--if-font-head); font-weight: 800; font-style: italic;
    font-size: 64px; line-height: .95; letter-spacing: -.005em; text-transform: uppercase;
    color: var(--if-navy);
}
/* The double red underline under every page title */
.if-hero__title::before, .if-hero__title::after {
    content: ''; position: absolute; left: 0; height: 5px; background: var(--if-red); transform: skewX(-24deg); transform-origin: 0 100%;
}
.if-hero__title::before { bottom: 6px; width: max(150px, 72%); }
.if-hero__title::after { bottom: 0; width: max(84px, 40%); height: 3px; }
/* start page: the team logo before the club name */
.if-hero__logo { flex: none; width: 92px; height: 92px; margin: -14px 20px 0 0; object-fit: contain; filter: drop-shadow(0 3px 6px rgba(13, 27, 58, .2)); }
/* a long club name gets smaller and keeps to two lines, so the red lines stay in the hero */
.if-hero__logo + .if-hero__title { min-width: 0; font-size: clamp(30px, 4.6vw, 64px); overflow-wrap: anywhere; }
.if-hero__logo + .if-hero__title > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.if-hero--tall { --if-hero-h: 262px; }
.if-hero--tall .if-hero__in { align-items: flex-start; padding-top: 52px; }
/* Wider than the 1440 px of the design, the strip grows with the width (168 px at
   1440, at most 224 px), so a picture keeps the cut it has at 1440 px */
@media (min-width: 1441px) {
    :root { --if-hero-h: min(11.667vw, 224px); }
}

/* ---------- Info bar under the hero: tabs (level 3) and KPIs ---------- */
/* As wide as the content: from the start of the logo to the end of "Zum Spiel" */
.if-bar-wrap { position: relative; z-index: 5; max-width: var(--if-max); margin: -20px auto 0; padding: 0 var(--if-gutter); box-sizing: border-box; width: 100%; }
.if-bar { filter: drop-shadow(0 3px 8px rgba(13, 27, 58, .14)); }
.if-bar__shape {
    --cut: 26px;
    background: var(--if-red);
    clip-path: polygon(var(--cut) 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%);
    padding: 0 4px;
}
.if-bar__in {
    display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 8px 52px;
    background: #fff;
    clip-path: polygon(var(--cut) 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%);
}
.if-bar__note { display: flex; align-items: center; gap: 12px; color: var(--if-navy); font: 500 15px/1.2 var(--if-font-head); }
.if-bar__note .if-icon { color: var(--if-eisblau); }
.if-bar__kpis { display: flex; align-items: center; margin-left: auto; }

.if-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.if-tab {
    display: inline-flex; align-items: center; height: 38px; padding: 0 28px;
    border: 1px solid var(--if-line); border-radius: 8px; background: #fff;
    box-shadow: 0 1px 3px rgba(13, 27, 58, .08);
    font: 600 15px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .03em;
    color: var(--if-navy) !important; text-decoration: none !important; white-space: nowrap;
}
.if-tab:hover { border-color: var(--if-eisblau); }
.if-tab.is-active { position: relative; background: var(--if-navy); border-color: var(--if-navy); color: #fff !important; }
.if-tab.is-active::after {
    content: ''; position: absolute; left: 50%; bottom: -7px; margin-left: -7px;
    border: 7px solid transparent; border-top: 0; border-bottom-color: var(--if-red);
}
.if-tab.is-disabled { color: var(--if-disabled) !important; pointer-events: none; }
/* a row of tabs too long for the bar stays one row and scrolls sideways with
   arrows (js/if2.js, every submenu: Büro, Stadion, Team and the rest) */
.if-tabs-nav { display: flex; align-items: center; gap: 4px; flex: 1 1 auto; min-width: 0; }
.if-tabs-nav .if-tabs { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; }
.if-tabs-nav.is-over .if-tabs { margin: -6px 0 -9px; padding: 6px 2px 9px; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent); }
.if-tabs-nav.is-over .if-tabs::-webkit-scrollbar { display: none; }
.if-tabs-nav__arrow { flex: none; display: none; align-items: center; justify-content: center; width: 28px; height: 38px; padding: 0; border: 0; background: none; color: var(--if-navy); cursor: pointer; }
.if-tabs-nav.is-over .if-tabs-nav__arrow { display: flex; }
.if-tabs-nav.is-over .if-tabs-nav__arrow[hidden] { visibility: hidden; }
.if-tabs-nav__arrow:hover { color: var(--if-eisblau); }
.if-tabs-nav__arrow .if-icon { width: 22px; height: 22px; }

/* KPI: icon, label, value (also used inside cards) */
.if-kpi { display: flex; align-items: center; gap: 12px; padding: 2px 28px; border-left: 1px solid var(--if-line); }
.if-kpi:first-child { border-left: 0; }
.if-kpi .if-icon { width: 32px; height: 32px; color: var(--if-eisblau); }
.if-kpi__label { display: block; font: 600 12px/1.1 var(--if-font-head); text-transform: uppercase; letter-spacing: .04em; }
.if-kpi__value { display: block; font: 700 22px/1.05 var(--if-font-head); font-variant-numeric: tabular-nums; }
.if-kpi__value small { font-size: .7em; font-weight: 600; }

/* ---------- Page content ---------- */
.if-main { flex: 1 0 auto; padding: 22px 0 40px; }
.if-main--nobar { padding-top: 26px; }
.if-grid { display: grid; gap: 22px; }
.if-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.if-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.if-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.if-grid--main-side { grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); }
.if-stack > * + * { margin-top: 22px; }

.if-card {
    position: relative; background: #fff; border-radius: var(--if-radius);
    box-shadow: var(--if-shadow); padding: 20px 24px;
}
/* chamfered top-right corner as in the feedback sheet */
.if-card--cut { border-radius: var(--if-radius) 0 var(--if-radius) var(--if-radius); clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); }
/* red corner strokes as on the start page cards */
.if-card--accent::before, .if-card--accent::after {
    content: ''; position: absolute; width: 3px; height: 34px; background: var(--if-red); transform: skewX(-32deg);
}
.if-card--accent::before { top: 0; left: 10px; }
.if-card--accent::after { bottom: 0; right: 10px; }
.if-card__title {
    display: flex; align-items: center; gap: 10px; margin: 0 0 14px;
    font: 700 24px/1.1 var(--if-font-head); text-transform: uppercase; letter-spacing: .01em;
}
.if-card__title .if-icon { width: 28px; height: 28px; color: var(--if-navy); }
.if-card__title .if-card__aside { margin-left: auto; font: 600 12px/1 var(--if-font-head); letter-spacing: .05em; color: var(--if-muted); }

/* Section heading with the short red line (UI kit, feedback sheet) */
.if-h2 {
    position: relative; margin: 0 0 18px; padding-bottom: 8px;
    font: 800 italic 30px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .005em;
}
.if-h2::after { content: ''; position: absolute; left: 0; bottom: 0; width: 64px; height: 4px; background: var(--if-red); transform: skewX(-24deg); transform-origin: 0 100%; }
.if-h3 { margin: 0 0 10px; font: 700 18px/1.15 var(--if-font-head); text-transform: uppercase; letter-spacing: .02em; }

/* ---------- Buttons ---------- */
.if-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 42px; padding: 0 28px; border: 0; border-radius: 4px; cursor: pointer;
    font: 600 18px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .03em;
    background: var(--if-navy); color: #fff !important; text-decoration: none !important;
    box-shadow: inset 0 -3px 0 var(--if-red);
    transition: background .15s;
}
.if-btn:hover { background: var(--if-navy-3); }
.if-btn:disabled, .if-btn.is-disabled { background: var(--if-disabled); color: var(--if-disabled-text) !important; box-shadow: inset 0 -3px 0 #A7B2C1; cursor: default; pointer-events: none; }
.if-btn--outline { background: #fff; color: var(--if-navy) !important; box-shadow: inset 0 0 0 2px var(--if-navy); }
.if-btn--outline:hover { background: var(--if-frost); }
.if-btn--outline:disabled, .if-btn--outline.is-disabled { background: #F1F4F8; color: var(--if-disabled) !important; box-shadow: inset 0 0 0 2px var(--if-line); }
.if-btn--danger { background: #fff; color: var(--if-red) !important; box-shadow: inset 0 0 0 2px var(--if-red); }
.if-btn--danger:hover { background: #FDF0F0; }
.if-btn--confirm { box-shadow: 0 0 0 2px var(--if-red), inset 0 -3px 0 var(--if-red); }
.if-btn--grey { background: #E8EDF3; color: var(--if-navy) !important; box-shadow: inset 0 0 0 1px #C9D3DF; }
.if-btn--grey:hover { background: #DCE3EC; }
.if-btn--s { min-height: 32px; padding: 0 16px; font-size: 15px; }
.if-btn--block { display: flex; width: 100%; }
.if-btn--big { min-height: 56px; padding: 0 44px; font-size: 26px; }
.if-btn--big.if-btn--live { border-radius: 6px; }
.if-btn--live { background: var(--if-navy); box-shadow: 0 0 0 2px var(--if-red), 0 0 22px rgba(225, 37, 47, .5); }
.if-btn--live::before { content: ''; width: 14px; height: 14px; border-radius: 50%; background: var(--if-red); margin-right: 8px; }
.if-btn--live.is-disabled { background: #C3CCD8; box-shadow: inset 0 0 0 2px #AFBACA; color: #EEF2F6 !important; }
.if-btn--live.is-disabled::before { display: none; }
.if-link {
    display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 0; cursor: pointer;
    font: 500 17px/1.2 var(--if-font-head); color: var(--if-eisblau-dark) !important;
}
.if-link .if-icon { width: 16px; height: 16px; }
.if-btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---------- Inputs ---------- */
.if-field { display: block; margin-bottom: 14px; }
.if-field__label { display: block; margin-bottom: 5px; font: 600 13px/1.2 var(--if-font-head); text-transform: uppercase; letter-spacing: .05em; color: var(--if-navy); }
.if-input, .if-select, .if-textarea {
    width: 100%; height: 42px; padding: 0 14px;
    border: 1.5px solid #C9D4E0; border-radius: 4px; background: #fff;
    font: 400 15px/1 var(--if-font-body); color: var(--if-navy);
    transition: border-color .15s, box-shadow .15s;
}
.if-textarea { height: auto; min-height: 110px; padding: 10px 14px; line-height: 1.45; resize: vertical; }
.if-input::placeholder, .if-textarea::placeholder { color: #9AA8BB; }
.if-input:focus, .if-select:focus, .if-textarea:focus { outline: none; border-color: var(--if-eisblau); box-shadow: 0 0 0 3px rgba(63, 169, 224, .22); }
.if-input.is-error, .if-select.is-error, .if-textarea.is-error { border-color: var(--if-red); background: #FFF6F6; }
.if-input:disabled, .if-select:disabled { background: #F3F6F9; color: var(--if-disabled); }
.if-field-error { display: flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--if-red); font-size: 13px; }
.if-field-error .if-icon { width: 18px; height: 18px; }
.if-select {
    appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230D1B3A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 18px;
}
.if-stepper { display: inline-flex; align-items: stretch; height: 42px; border: 1.5px solid #C9D4E0; border-radius: 4px; background: #fff; }
.if-stepper button { width: 42px; border: 0; background: none; color: var(--if-navy); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.if-stepper button:hover { background: var(--if-frost); }
.if-stepper input { width: 92px; border: 0; border-left: 1.5px solid #C9D4E0; border-right: 1.5px solid #C9D4E0; text-align: center; font: 500 16px/1 var(--if-font-body); color: var(--if-navy); -moz-appearance: textfield; }
.if-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; }
.if-stepper input:focus { outline: none; background: var(--if-eisblau-soft); }
.if-password { position: relative; }
.if-password .if-input { padding-right: 46px; }
.if-password button { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 38px; height: 34px; border: 0; background: none; color: var(--if-navy); cursor: pointer; }

/* Checkbox, radio, toggle */
.if-check, .if-radio, .if-toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.if-check input, .if-radio input, .if-toggle input { appearance: none; -webkit-appearance: none; margin: 0; cursor: pointer; flex: none; }
.if-check input { width: 22px; height: 22px; border: 1.5px solid #9DAABD; border-radius: 3px; background: #fff; display: grid; place-content: center; }
.if-check input:checked { background: var(--if-navy); border-color: var(--if-navy); }
.if-check input:checked::after { content: ''; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) translate(-1px, -1px); }
.if-check input:disabled { background: #E7ECF2; border-color: #D5DDE7; cursor: default; }
.if-check input:disabled:checked { background: #C9D3DF; }
.if-radio input { width: 22px; height: 22px; border: 1.5px solid var(--if-navy); border-radius: 50%; background: #fff; }
.if-radio input:checked { background: radial-gradient(circle, var(--if-navy) 0 5px, #fff 5.5px); }
.if-toggle input { position: relative; width: 44px; height: 24px; border-radius: 12px; background: #D3DBE5; transition: background .15s; }
.if-toggle input::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: left .15s; }
.if-toggle input:checked { background: var(--if-navy); }
.if-toggle input:checked::after { left: 22px; }

/* Segmented control (Kader / Training, Offensiv / Kontrolliert / Defensiv) */
.if-seg { display: inline-flex; border: 1.5px solid var(--if-navy); border-radius: 5px; overflow: hidden; background: #fff; }
.if-seg--wide { display: flex; }
.if-seg--wide > * { flex: 1; }
.if-seg > a, .if-seg > button, .if-seg > label {
    display: flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 30px;
    border: 0; border-left: 1.5px solid var(--if-line); background: none; cursor: pointer;
    font: 600 16px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .03em; color: var(--if-navy) !important; text-decoration: none !important;
}
.if-seg > :first-child { border-left: 0; }
.if-seg > .is-active, .if-seg > label:has(input:checked) { background: var(--if-navy); color: #fff !important; }
.if-seg input { position: absolute; opacity: 0; pointer-events: none; }

/* Chips (filters) */
.if-chip {
    display: inline-flex; align-items: center; gap: 10px; height: 36px; padding: 0 16px 0 20px;
    border: 1.5px solid var(--if-line); border-radius: 18px; background: #fff; cursor: pointer;
    font: 600 16px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .03em; color: var(--if-navy) !important; text-decoration: none !important;
}
.if-chip .if-icon { width: 16px; height: 16px; }
.if-chip.is-active { background: var(--if-eisblau); border-color: var(--if-eisblau); color: #fff !important; }

/* Block buttons A–E (Aufstellung) */
.if-blocks { display: flex; gap: 14px; flex-wrap: wrap; }
.if-block {
    position: relative; display: inline-grid; place-items: center; width: 54px; height: 46px; border: 0; border-radius: 5px; cursor: pointer;
    font: 700 26px/1 var(--if-font-head); background: #E3E9F0; color: #8D9AAE;
}
.if-block.is-selected { background: var(--if-navy); color: #fff; }
.if-block.is-target { background: #fff; color: var(--if-navy); box-shadow: inset 0 0 0 2.5px var(--if-red); }
.if-block.is-target::after, .if-block.is-ice::after { content: ''; position: absolute; top: -5px; right: -5px; width: 13px; height: 13px; border-radius: 50%; background: var(--if-red); border: 2px solid #fff; }
.if-block.is-ice { background: var(--if-navy); color: #fff; }
.if-block.is-ice::after { background: var(--if-eisblau); }
.if-block:disabled { background: #D8DEE6; color: #A7B2C1; cursor: default; }

/* ---------- Data ---------- */
.if-progress { height: 8px; border-radius: 4px; background: #DCE5EE; overflow: hidden; }
.if-progress > span { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--if-eisblau), #5BB9EA); }
.if-progress--thin { height: 4px; }
.if-progress--red > span { background: var(--if-red); }
.if-meter { display: flex; flex-direction: column; gap: 4px; }
.if-meter__head { display: flex; align-items: baseline; gap: 10px; font: 700 18px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .03em; }
.if-meter__head b { font-size: 22px; }

.if-posbadge {
    display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 22px; padding: 0 6px;
    border-radius: 4px; font: 700 14px/1 var(--if-font-head); color: #fff; background: var(--if-navy);
}
.if-posbadge--g { background: var(--if-gold); }
.if-posbadge--d { background: var(--if-eisblau); }
.if-posbadge--l { min-width: 46px; height: 40px; font-size: 22px; border-radius: 6px; }

.if-pill {
    display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: 11px;
    font: 600 13px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .04em; color: #fff; background: var(--if-green); white-space: nowrap;
}
.if-pill--soft { background: var(--if-softred); }
.if-pill--red { background: var(--if-red); }
.if-pill--blue { background: var(--if-eisblau); }
.if-pill--grey { background: #A9B4C3; }

/* Place hexagon */
.if-place {
    display: inline-grid; place-items: center; width: 54px; height: 60px; position: relative;
    font: 700 26px/1 var(--if-font-head); color: var(--if-navy);
}
.if-place::before {
    content: ''; position: absolute; inset: 0; background: var(--if-red);
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.if-place::after {
    content: ''; position: absolute; inset: 4px; background: #fff;
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.if-place > * { position: relative; z-index: 1; display: block; text-align: center; }
.if-place small { display: block; font-size: 13px; letter-spacing: .04em; }
.if-place--l { width: 100px; height: 112px; font-size: 40px; }
.if-place--l::after { inset: 6px; }

.if-star { width: 28px; height: 28px; color: #B7C2D0; }
.if-star.is-on { color: var(--if-gold); }

.if-photo {
    display: inline-block; width: 40px; height: 40px; border-radius: 6px; object-fit: cover; background: #DDE3EA;
    border: 1px solid var(--if-line);
}
.if-crest { display: inline-block; width: 40px; height: 40px; object-fit: contain; vertical-align: middle; }
.if-crest--s { width: 22px; height: 22px; }

/* Tables and list rows */
.if-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.if-table th {
    padding: 8px 10px; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--if-line);
    font: 600 12px/1.2 var(--if-font-head); text-transform: uppercase; letter-spacing: .05em; color: var(--if-navy);
}
.if-table td { padding: 9px 10px; border-bottom: 1px solid #E6ECF2; vertical-align: middle; }
.if-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.if-table .ctr { text-align: center; }
.if-table tbody tr:hover td { background: var(--if-row-hover); }
.if-table tr.is-selected td { background: #E3F0FB; }
.if-table tr.is-selected td:first-child { box-shadow: inset 4px 0 0 var(--if-red); }
.if-table tr.is-own td { background: #EAF4FC; font-weight: 600; }
.if-table--compact td { padding: 6px 10px; }

.if-rows { margin: 0; padding: 0; list-style: none; }
.if-rows li { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border: 1px solid var(--if-line); border-radius: 4px; margin-bottom: 4px; background: #fff; }
.if-rows li:hover { background: var(--if-row-hover); }
.if-rows li.is-selected { background: #E3F0FB; box-shadow: inset 4px 0 0 var(--if-red); }
.if-rows li.is-own { background: #EAF4FC; }

.if-pager { display: inline-flex; gap: 6px; align-items: center; }
.if-pager a, .if-pager span {
    display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 10px;
    border: 1px solid var(--if-line); border-radius: 4px; background: #fff;
    font: 500 16px/1 var(--if-font-body); color: var(--if-navy) !important; text-decoration: none !important;
}
.if-pager a:hover { border-color: var(--if-eisblau); }
.if-pager .is-active { background: var(--if-navy); border-color: var(--if-navy); color: #fff !important; }
.if-pager .is-gap { border: 0; background: none; min-width: 20px; }

/* ---------- Feedback ---------- */
.if-note {
    display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 4px;
    background: var(--if-eisblau-soft); box-shadow: inset 4px 0 0 var(--if-eisblau); color: var(--if-navy); font-size: 15px;
}
.if-note .if-icon { width: 28px; height: 28px; color: var(--if-eisblau); }
.if-note--warn { background: #FCE7E8; box-shadow: inset 4px 0 0 var(--if-red); color: #B3161F; }
.if-note--warn .if-icon { color: var(--if-red); }

/* System messages after an action */
.if-msgs { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.if-msg {
    display: flex; align-items: center; gap: 18px; padding: 14px 18px 14px 22px; border-radius: 6px;
    background: #fff; box-shadow: var(--if-shadow), inset 5px 0 0 var(--if-green); font-size: 16px;
}
.if-msg__icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--if-green); color: #fff; }
.if-msg__icon .if-icon { width: 22px; height: 22px; }
.if-msg__text { flex: 1; }
.if-msg__close { flex: none; width: 34px; height: 34px; border: 0; background: none; color: var(--if-muted); cursor: pointer; display: grid; place-items: center; }
.if-msg__close:hover { color: var(--if-navy); }
.if-msg--error { box-shadow: var(--if-shadow), inset 5px 0 0 var(--if-softred); }
.if-msg--error .if-msg__icon { background: var(--if-softred); }
.if-msg--info { box-shadow: var(--if-shadow), inset 5px 0 0 var(--if-eisblau); }
.if-msg--info .if-msg__icon { background: var(--if-eisblau); }

/* Season end banner (match days 26–28) */
.if-banner {
    display: flex; align-items: stretch; margin-bottom: 20px; background: #fff; border-radius: 4px;
    box-shadow: var(--if-shadow), inset 0 -3px 0 var(--if-red); overflow: hidden;
}
.if-banner__icon {
    flex: none; display: grid; place-items: center; width: 110px; padding-right: 20px; color: #fff; background: var(--if-navy);
    clip-path: polygon(0 0, 100% 0, calc(100% - 22px) 100%, 0 100%);
}
.if-banner__icon .if-icon { width: 36px; height: 36px; }
.if-banner__text { flex: 1; padding: 16px 20px; font-size: 16px; align-self: center; }
.if-banner .if-msg__close { align-self: center; margin-right: 10px; }

/* Confirm dialog */
.if-modal { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(13, 27, 58, .55); backdrop-filter: blur(3px); }
.if-modal.is-open { display: flex; }
.if-dialog {
    position: relative; width: 100%; max-width: 440px; padding: 30px 30px 26px; text-align: center;
    background: #fff; border-radius: var(--if-radius); box-shadow: var(--if-shadow-l);
    clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 0 100%);
}
.if-dialog::after { content: ''; position: absolute; top: 0; right: 0; width: 44px; height: 3px; background: var(--if-red); transform-origin: 100% 0; transform: translate(-6px, 15px) rotate(45deg); }
.if-dialog__title { margin-bottom: 8px; font: 700 28px/1.1 var(--if-font-head); text-transform: uppercase; }
.if-dialog__text { margin-bottom: 14px; font-size: 16px; }
.if-dialog__amount { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 6px 0 20px; font: 700 40px/1 var(--if-font-head); font-variant-numeric: tabular-nums; }
.if-dialog__amount .if-icon { width: 48px; height: 48px; color: var(--if-gold); }
.if-dialog__amount small { font-size: .7em; }
.if-dialog__amount[hidden] { display: none; }
.if-dialog .if-btn-row { justify-content: center; }

/* Locked area while the match is being calculated */
.if-locked { position: relative; }
.if-locked > :not(.if-lock) { filter: grayscale(1) opacity(.45); pointer-events: none; user-select: none; }
.if-lock {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3;
    display: flex; align-items: center; gap: 16px; max-width: 92%; padding: 14px 26px 14px 18px; border-radius: 34px;
    background: var(--if-navy); color: #fff; box-shadow: var(--if-shadow-l); font-size: 15px;
}
.if-lock .if-icon { width: 40px; height: 40px; }
.if-lock b { display: block; font-size: 17px; }

/* Tooltip */
.if-tip { position: relative; display: inline-block; max-width: 290px; padding: 10px 16px; margin-top: 10px; border: 1px solid var(--if-navy); border-radius: 6px; background: #fff; font-size: 15px; }
.if-tip::before { content: ''; position: absolute; top: -8px; left: 50%; margin-left: -8px; width: 14px; height: 14px; background: #fff; border-left: 1px solid var(--if-navy); border-top: 1px solid var(--if-navy); transform: rotate(45deg); }
[data-if-tip] { position: relative; }
[data-if-tip]:hover::after {
    content: attr(data-if-tip); position: absolute; top: calc(100% + 10px); right: 0; z-index: 50; width: 240px; padding: 8px 12px;
    border: 1px solid var(--if-navy); border-radius: 6px; background: #fff; color: var(--if-navy);
    font: 400 13px/1.35 var(--if-font-body); text-transform: none; letter-spacing: 0; white-space: normal; box-shadow: var(--if-shadow);
}

/* Empty states */
.if-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 26px 18px; text-align: center; border: 1px solid var(--if-line); border-radius: 8px; background: #fff; font-size: 17px; }
.if-empty .if-icon { width: 64px; height: 64px; color: var(--if-navy); }
.if-empty--x .if-icon { color: var(--if-navy); }

/* ---------- News ticker and footer ---------- */
.if-ticker { display: flex; align-items: center; height: 34px; overflow: hidden; background: var(--if-navy); color: #fff; }
.if-ticker__label {
    flex: none; display: flex; align-items: center; height: 100%; padding: 0 30px 0 36px; margin-right: 22px;
    background: var(--if-red); font: 800 italic 22px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .02em;
    clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
}
.if-ticker__track { flex: 1; overflow: hidden; white-space: nowrap; mask-image: linear-gradient(90deg, transparent 0, #000 30px, #000 calc(100% - 30px), transparent 100%); }
.if-ticker__text { display: inline-block; padding-left: 100%; font: 400 17px/34px var(--if-font-head); animation: if-ticker 28s linear infinite; }
.if-ticker__text i { font-style: normal; color: var(--if-red); letter-spacing: .1em; margin: 0 22px; }
.if-ticker:hover .if-ticker__text { animation-play-state: paused; }
@keyframes if-ticker { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
    .if-ticker__text { animation: none; padding-left: 0; }
    .if-live.is-live::before { animation: none; }
}

/* Footer as on the landing page mockup: navy strip with a red top line */
.if-footer { background: #0A1F4A; border-top: 2px solid var(--if-red); color: #fff; }
.if-footer__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; min-height: 38px; padding-top: 4px; padding-bottom: 4px; }
.if-footer__item {
    position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 4px 21px;
    font: 600 14px/1.2 var(--if-font-head); color: #fff !important; text-decoration: none !important; white-space: nowrap;
}
.if-footer__item + .if-footer__item::before { content: ''; position: absolute; left: 0; top: 50%; height: 12px; margin-top: -6px; border-left: 1px solid rgba(255, 255, 255, .5); }
a.if-footer__item:hover { color: var(--if-eisblau) !important; }
.if-footer__item .if-icon { width: 15px; height: 15px; }
.if-footer__item .if-icon:first-child { width: 17px; height: 17px; }
.if-footer__langs a { color: rgba(255, 255, 255, .72) !important; text-decoration: none !important; }
.if-footer__langs a + a::before { content: '/'; margin: 0 6px; color: rgba(255, 255, 255, .5); }
.if-footer__langs a:hover { color: var(--if-eisblau) !important; }
.if-footer__langs a.is-active { color: #fff !important; }

/* ---------- Start page (icefighter-hauptuebersicht-ingame.jpg) ---------- */
.if-main--home { padding: 0 0 11px; overflow-x: clip; }
.if-hero--tall .if-hero__title { font-size: 72px; }

/* Next match: badge with pointed red sides, overlapping the hero */
.if-match { position: relative; z-index: 5; width: min(912px, 100%); margin: -116px auto 0; filter: drop-shadow(0 6px 14px rgba(13, 27, 58, .18)); }
.if-match__shape {
    --top: 57px; --bottom: 12px; --point: 66%;
    background: var(--if-red); padding: 0 5px;
    clip-path: polygon(var(--top) 0, calc(100% - var(--top)) 0, 100% var(--point), calc(100% - var(--bottom)) 100%, var(--bottom) 100%, 0 var(--point));
}
.if-match__in {
    display: grid; grid-template-columns: 100px minmax(0, 1fr) 210px minmax(0, 1fr) 100px; align-items: center;
    height: 141px; padding: 0 66px 0 70px; background: #fff;
    background-image: linear-gradient(180deg, #fff 0%, #fff 60%, #F3F8FC 100%);
    clip-path: polygon(var(--top) 0, calc(100% - var(--top)) 0, 100% var(--point), calc(100% - var(--bottom)) 100%, var(--bottom) 100%, 0 var(--point));
}
.if-match__crest { width: 97px; height: 120px; object-fit: contain; justify-self: center; }
.if-match__crest--none { display: grid; place-items: center; color: #C5D2E0; }
.if-match__crest--none .if-icon { width: 76px; height: 76px; stroke-width: 1.4; }
.if-match__team {
    padding: 0 4px; text-align: center;
    font: 800 italic 28px/1.05 var(--if-font-head); text-transform: uppercase; color: var(--if-navy);
}
.if-match__team--away { font-size: 23px; }
.if-match__spy { display: flex; width: max-content; margin: 10px auto 0; min-height: 28px; padding: 0 16px; font-size: 15px; font-style: normal; box-shadow: inset 0 0 0 1px #C9D6E4; }
.if-match__spy .if-icon { width: 17px; height: 17px; }
.if-match__spy--m { display: none; }
.if-match__mid { text-align: center; align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 13px 0 0; }
.if-match__label { font: 800 italic 18px/1 var(--if-font-head); text-transform: uppercase; color: var(--if-navy); }
.if-match__vs { position: relative; margin: 3px 0 0; font: 800 italic 54px/.82 var(--if-font-head); color: var(--if-navy); letter-spacing: -.02em; }
/* ice splinters around the VS */
.if-match__vs i {
    position: absolute; width: 9px; height: 9px; background: linear-gradient(135deg, #DDF2FD, #7CC8EE);
    clip-path: polygon(50% 0, 100% 40%, 70% 100%, 0 70%); opacity: .85;
}
.if-match__vs i:nth-child(1) { left: -30px; top: 16px; transform: rotate(20deg) scale(1.3); }
.if-match__vs i:nth-child(2) { left: -16px; top: 32px; transform: rotate(-30deg); }
.if-match__vs i:nth-child(3) { right: -20px; top: 4px; transform: rotate(60deg); }
.if-match__vs i:nth-child(4) { right: -34px; top: 26px; transform: rotate(-10deg) scale(1.4); }
.if-match__when { margin-top: 14px; font: 500 16px/1 var(--if-font-head); text-transform: uppercase; color: var(--if-navy); }
.if-match__count {
    margin-top: 3px; font: 700 35px/.9 var(--if-font-head); letter-spacing: .02em; font-variant-numeric: tabular-nums;
    color: #1E9BE0; text-shadow: 0 0 2px #fff, 0 0 12px rgba(63, 169, 224, .55);
}
.if-match__text { margin-top: 12px; max-width: 230px; font: 600 16px/1.25 var(--if-font-head); text-transform: uppercase; color: var(--if-navy); }

/* Games of the season: a puck per game on a line, the newest on the right */
.if-season { position: relative; margin-top: -16px; padding: 0 0 10px; }
.if-season::before {
    content: ''; position: absolute; z-index: -1; top: -9px; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%);
    background: linear-gradient(180deg, rgba(255, 255, 255, .72) 0%, rgba(240, 246, 251, .55) 100%);
    border-bottom: 1px solid #DCE6EF;
}
.if-season__title { margin: 0 0 6px -2px; font: 800 italic 21px/1 var(--if-font-head); text-transform: uppercase; color: var(--if-navy); }
.if-season__row { display: flex; align-items: center; }
.if-season__track {
    position: relative; flex: 1; min-width: 0; display: flex; margin: 0; padding: 10px 0 4px; list-style: none;
    overflow-x: auto; scrollbar-width: thin; scroll-behavior: smooth;
}
.if-season__game { position: relative; flex: 1 1 0; min-width: 112px; max-width: 143px; text-align: center; }
/* the line between the pucks */
.if-season__game::before {
    content: ''; position: absolute; top: 23px; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, rgba(63, 169, 224, .25), #6CC0EC 50%, rgba(63, 169, 224, .25)); box-shadow: 0 0 6px rgba(63, 169, 224, .6);
}
.if-season__game:first-child::before { left: 30%; }
.if-season__game.is-last::before { right: 50%; }
.if-season__track.is-scrolled { mask-image: linear-gradient(90deg, transparent 0, #000 40px); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px); }
.if-season__game a { position: relative; display: block; padding: 0 4px; color: var(--if-navy) !important; text-decoration: none !important; }
.if-season__game a:hover .if-puck { transform: translateY(-2px) rotate(-14deg); }
.if-puck {
    display: block; width: 54px; height: 44px; margin: 0 auto;
    background: url(../img/if2/puck.svg) center / contain no-repeat;
    transform: rotate(-14deg); transition: transform .15s;
    filter: drop-shadow(0 0 3px var(--ring)) drop-shadow(0 3px 3px rgba(0, 0, 0, .25));
}
.is-win .if-puck { --ring: rgba(34, 168, 107, .9); background-image: url(../img/if2/puck-sieg.svg); }
.is-loss .if-puck { --ring: rgba(225, 37, 47, .9); background-image: url(../img/if2/puck-niederlage.svg); }
.is-last .if-puck { width: 66px; height: 54px; margin-top: -8px; margin-bottom: -2px; filter: drop-shadow(0 0 3px var(--ring)) drop-shadow(0 0 10px rgba(63, 169, 224, .95)) drop-shadow(0 3px 3px rgba(0, 0, 0, .25)); }
.if-season__who { display: block; margin-top: 7px; font: 500 12px/1.2 var(--if-font-head); text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.if-season__who b { font-weight: 600; }
.if-season__res { display: block; margin-top: 8px; font: 700 15px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .03em; }
.is-win .if-season__res { color: var(--if-green); }
.is-loss .if-season__res { color: var(--if-red); }
.if-season__empty { flex: 1; display: flex; align-items: center; gap: 10px; margin: 18px 0; color: var(--if-muted); font-size: 15px; }
.if-season__empty .if-icon { width: 30px; height: 30px; }
.if-season__sum {
    flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-left: 30px; padding: 4px 0 4px 18px; border-left: 3px solid var(--if-red);
    font: 600 21px/1.1 var(--if-font-head); text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; color: var(--if-navy);
}
.if-season__more { font: 700 14px/1 var(--if-font-head); letter-spacing: .02em; }
.if-season__more .if-icon { width: 14px; height: 14px; color: var(--if-navy); }

/* The four cards */
.if-home { display: grid; grid-template-columns: minmax(0, 320fr) minmax(0, 361fr) minmax(0, 336fr) minmax(0, 345fr); gap: 11px; margin-top: 14px; }
.if-home > .if-card { min-height: 246px; padding: 11px 14px 12px; border-radius: 6px; border: 1px solid #D5E0EC; box-shadow: 0 1px 4px rgba(13, 27, 58, .06); }
.if-home .if-card--accent::before { left: 8px; height: 30px; }
.if-home .if-card--accent::after { right: 8px; height: 46px; }
.if-home__title { display: flex; align-items: center; margin: 0 0 9px; font: 800 italic 19px/1 var(--if-font-head); text-transform: uppercase; color: var(--if-navy); }

.if-teamcard { display: grid; grid-template-columns: 80px minmax(0, 1fr); grid-template-rows: auto 1fr; align-items: start; column-gap: 20px; padding: 14px 12px 16px 26px !important; }
.if-teamcard__crest { width: 80px; height: 96px; object-fit: contain; }
.if-teamcard__data { grid-row: span 2; padding-top: 5px; }
.if-teamcard__name {
    display: flex; align-items: center; gap: 8px; padding: 0; margin: 0 0 10px; border: 0; background: none; cursor: default; text-align: left;
    font: 700 27px/1.05 var(--if-font-head); text-transform: uppercase; color: var(--if-navy);
}
button.if-teamcard__name { cursor: pointer; }
button.if-teamcard__name:hover { color: var(--if-eisblau-dark); }
.if-teamcard__name .if-icon { flex: none; width: 22px; height: 22px; stroke-width: 2.4; }
.if-teamcard__line { display: flex; align-items: center; gap: 10px; height: 28px; font: 500 17px/1 var(--if-font-head); text-transform: uppercase; }
.if-teamcard__line .if-icon { width: 20px; height: 20px; flex: none; }
.if-teamcard__place { justify-self: center; margin-top: 28px; }
.if-place--oct { width: 76px; height: 76px; font-size: 32px; line-height: .95; }
.if-place--oct::before { clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); }
.if-place--oct::after { inset: 3px; clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); }
.if-place--oct small { font-size: 14px; font-weight: 600; margin-bottom: 2px; text-transform: uppercase; }

.if-values__aside { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; font: 500 11px/1 var(--if-font-head); font-style: normal; letter-spacing: .03em; }
.if-values__aside .if-icon { width: 22px; height: 22px; }
.if-values__ew { display: flex; align-items: baseline; gap: 28px; margin: 12px 0 8px; }
.if-values__ew span { font: 600 15px/1 var(--if-font-head); text-transform: uppercase; }
.if-values__ew b { font: 700 34px/1 var(--if-font-head); font-variant-numeric: tabular-nums; }
.if-values__row { display: grid; grid-template-columns: 80px minmax(0, 1fr) 54px 44px; align-items: center; height: 33px; }
.if-values__label { font: 400 13.5px/1 var(--if-font-head); text-transform: uppercase; }
.if-values__row .if-progress { height: 11px; border-radius: 2px; background: #E2E9F0; }
.if-values__row .if-progress > span { border-radius: 2px; background: linear-gradient(90deg, #3FA9E0, #4FB3E8); }
.if-values__row .if-progress { position: relative; overflow: visible; }
/* league average: thin red marker across the bar */
.if-values__avg { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--if-red); }
.if-values__legend { display: flex; align-items: center; gap: 8px; margin: 2px 0 0 80px; font: 500 11px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .04em; color: var(--if-muted); }
.if-values__legend .if-values__avg { position: relative; top: auto; bottom: auto; height: 13px; margin: 0; }
.if-values__num { text-align: right; font: 700 18px/1 var(--if-font-head); font-variant-numeric: tabular-nums; }
.if-values__count {
    justify-self: end; display: grid; place-items: center; width: 31px; height: 22px; border: 1px solid #A9C2DA; border-radius: 11px; background: #F5F9FC;
    font: 600 14px/1 var(--if-font-head);
}

.if-sdt__media {
    position: relative; display: block; height: 151px; border-radius: 3px; overflow: hidden;
    background: #24396A center / cover no-repeat;
}
.if-sdt__play {
    position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 50px; height: 50px; margin: -25px 0 0 -25px;
    border-radius: 50%; background: #fff; border: 3px solid var(--if-red); box-shadow: 0 2px 10px rgba(0, 0, 0, .35); transition: transform .15s;
}
.if-sdt__play .if-icon { width: 24px; height: 24px; margin-left: 3px; color: var(--if-navy); }
.if-sdt__media:hover .if-sdt__play { transform: scale(1.08); }
.if-sdt__logo { position: absolute; top: 6px; right: 8px; width: 42px; height: 46px; object-fit: contain; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .4)); }
.if-sdt__text { margin: 9px 0 0; font: 500 14px/1.25 var(--if-font-head); color: var(--if-navy); }
.if-sdt__text b { font-weight: 700; text-transform: uppercase; }
.if-sdt__text .if-link { margin-top: 4px; font-size: 14px; }

.if-feed { display: flex; flex-direction: column; }
.if-feed__img { display: block; height: 47px; margin-bottom: 2px; border-radius: 2px; background: #DCE5EE center 30% / cover no-repeat; }
.if-feed__row {
    display: flex; align-items: flex-start; gap: 10px; padding: 5px 0 5px 4px; border-bottom: 1px solid #E1E8EF;
    font: 400 12px/1.25 var(--if-font-body); color: var(--if-navy) !important; text-decoration: none !important;
}
.if-feed__row:last-child { border-bottom: 0; padding-bottom: 0; }
.if-feed__row > .if-icon { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.if-feed__row > span, .if-feed__row > div { flex: 1; min-width: 0; }
a.if-feed__row:hover { background: var(--if-row-hover); }
.if-feed__go { width: 16px; height: 16px; color: var(--if-red); align-self: center; }
.if-feed__head { font: 600 13px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .02em; }
.if-feed__stats { display: flex; margin-top: 5px; }
.if-feed__stats span { position: relative; display: flex; flex-direction: column; padding: 0 16px; border-left: 1px solid #C9D5E1; font: 500 10px/1.1 var(--if-font-head); text-transform: uppercase; }
.if-feed__stats span:first-child { padding-left: 0; border-left: 0; }
.if-feed__stats b { font: 700 17px/1.1 var(--if-font-head); font-variant-numeric: tabular-nums; }
.if-online { display: inline-block; width: 6px; height: 6px; margin-left: 4px; border-radius: 50%; background: var(--if-green); vertical-align: 1px; }
.if-feed__links { display: flex; justify-content: space-between; gap: 10px; margin-top: 6px; padding-right: 20px; }
.if-feed__links .if-link { font: 700 13px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .02em; color: var(--if-eisblau-dark) !important; }
.if-feed__links .if-link .if-icon { width: 14px; height: 14px; color: var(--if-navy); }
.if-feed__links .if-link:last-child .if-icon { color: var(--if-red); }

/* Overlays of the start page (quick help, welcome) */
.if-overlay {
    position: relative; width: 100%; max-width: 806px; max-height: calc(100vh - 40px); overflow: auto;
    background: #fff; border-radius: 8px; box-shadow: var(--if-shadow-l);
}
.if-overlay::after { content: ''; position: absolute; top: 0; right: 0; width: 0; height: 0; border-style: solid; border-width: 0 24px 24px 0; border-color: transparent var(--if-red) transparent transparent; }
.if-overlay__img { height: 161px; background: var(--if-frost) center / cover no-repeat; background-position: var(--if-fx, 50%) var(--if-fy, 50%); }
.if-overlay__close {
    position: absolute; top: 18px; right: 26px; z-index: 2; display: grid; place-items: center; width: 38px; height: 38px; padding: 0;
    border: 0; border-radius: 50%; background: #fff; color: var(--if-navy); cursor: pointer; box-shadow: 0 1px 6px rgba(0, 0, 0, .25);
}
.if-overlay__close .if-icon { width: 22px; height: 22px; stroke-width: 3; }
.if-overlay__body { padding: 10px 23px 26px; }
.if-overlay__title {
    position: relative; margin: 0 0 18px; padding-bottom: 10px;
    font: 700 46px/1 var(--if-font-head) !important; text-transform: uppercase;
}
.if-overlay__title::before, .if-overlay__title::after { content: ''; position: absolute; left: 2px; height: 3px; background: var(--if-red); transform: skewX(-30deg); }
.if-overlay__title::before { bottom: 5px; width: 120px; height: 4px; }
.if-overlay__title::after { bottom: 0; width: 108px; height: 3px; }
.if-pill--navy { background: var(--if-navy); height: 18px; padding: 0 12px; font-size: 12px; }
.if-overlay__actions { margin-top: 18px; flex-wrap: wrap; }
.if-overlay__actions { gap: 16px; }
.if-overlay__actions .if-btn { flex: 1 1 auto; min-height: 46px; padding: 0 18px; font-size: 17px; }

@media (max-width: 1320px) {
    .if-match { margin-top: -116px; }
    .if-season { margin-top: 12px; }
    .if-season::before { top: -37px; }
}
@media (max-width: 1180px) {
    .if-home { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .if-match__in { grid-template-columns: 62px minmax(0, 1fr) 62px; height: auto; min-height: 150px; padding: 10px 26px; }
    .if-match__team { display: none; }
    .if-match__crest { width: 58px; height: 70px; }
    .if-match__mid { padding-top: 4px; }
    .if-match__spy--m { display: flex; margin-top: 8px; }
    .if-match__shape { --top: 24px; --bottom: 8px; }
    .if-season__sum { margin-left: 12px; padding-left: 10px; font-size: 16px; white-space: normal; }
}
@media (max-width: 640px) {
    .if-home { grid-template-columns: minmax(0, 1fr); }
    .if-match { margin-top: -90px; }
    .if-season__row { flex-direction: column; align-items: stretch; }
    .if-season__sum { margin: 8px 0 0; }
}

/* ---------- Premium lock pattern (icefighter-ui-state-board-premium-gesperrter-zustand.jpg) ---------- */
.if-premium { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }
.if-premium__lock { display: grid; place-items: center; width: 24px; height: 24px; border: 1.5px solid var(--if-gold); border-radius: 50%; background: #fff; color: var(--if-navy); }
.if-premium__lock .if-icon { width: 13px; height: 13px; }
.if-premium__tag {
    display: inline-flex; align-items: center; gap: 4px; height: 18px; padding: 0 9px 0 7px; border: 1.5px solid var(--if-gold); border-radius: 9px; background: #fff;
    font: 700 11px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .05em; color: var(--if-gold);
}
.if-premium__tag .if-icon { width: 10px; height: 10px; color: var(--if-gold); }
.if-tab.is-locked { gap: 10px; background: #F1F4F8; color: #8D9AAE !important; cursor: default; box-shadow: none; }
.if-tab.is-locked:hover { border-color: var(--if-line); }
/* premium hints: dark tooltip as on the state board */
.if-tab.is-locked[data-if-tip]:hover::after, .if-kader__locked[data-if-tip]:hover::after {
    right: auto; left: 50%; transform: translateX(-50%); width: max-content; max-width: 260px; border-color: var(--if-navy); background: var(--if-navy); color: #fff;
}

/* ---------- Team → Übersicht: Kader (icefighter-kader.jpg) ---------- */
.if-main--kader { padding-top: 17px; }
.if-kader { display: grid; grid-template-columns: minmax(0, 1.95fr) minmax(0, 1fr); gap: 15px; align-items: start; }
.if-kader__list { padding: 11px 14px 10px; }
.if-btn--xs { min-height: 25px; padding: 0 22px; border-radius: 3px; font-size: 12.5px; letter-spacing: .05em; box-shadow: none; }
.if-btn--xs.if-btn--outline { box-shadow: inset 0 0 0 1.5px var(--if-navy); }
.if-kader__actions { gap: 9px; margin-bottom: 9px; }

.if-kader__table { font: 500 13.5px/1 var(--if-font-head); }
.if-kader__table th { height: 28px; padding: 0 4px; border-top: 1px solid var(--if-line); font: 700 11px/1 var(--if-font-head); letter-spacing: .03em; }
.if-kader__table td { height: 32px; padding: 0 4px; border-bottom: 1px solid #E6ECF2; white-space: nowrap; font-variant-numeric: tabular-nums; }
.if-kader__table tbody tr { cursor: pointer; }
/* columns from the content, the name takes the spare room; the list scrolls
   sideways instead of running under the player card (premium adds Ereig.) */
.if-kader__table { table-layout: auto; }
.if-kader__table th.if-kader__name { width: 24%; }
.if-kader .if-table-scroll { overflow-x: auto; }
.if-kader__table tr.is-selected td { background: #E8F3FC; }
.if-kader__table tr.is-selected td:first-child { box-shadow: inset 3px 0 0 var(--if-red); }
.if-kader__table tr.is-selected .if-kader__ew { font-weight: 700; }
.if-kader__sort { color: var(--if-navy) !important; text-decoration: none !important; white-space: nowrap; }
.if-kader__sort.is-desc::after, .if-kader__sort.is-asc::after {
    content: ''; display: inline-block; margin-left: 4px; vertical-align: 1px;
    border: 4px solid transparent; border-top-color: var(--if-navy); border-bottom: 0;
}
.if-kader__sort.is-asc::after { border-top: 0; border-bottom: 4px solid var(--if-navy); }
.if-kader__photo { padding-left: 10px !important; }
.if-kader__table .if-photo { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 3px; border: 1px solid #fff; box-shadow: 0 0 0 1px var(--if-line); }
.if-photo--none { display: grid; place-items: center; overflow: hidden; background: #DDE3EA; color: #AEB9C7; }
.if-photo--none .if-icon { width: 80%; height: 80%; margin-top: 25%; }
.if-kader__name { padding-left: 6px !important; }
.if-kader__name a { color: var(--if-navy) !important; font-weight: 500; letter-spacing: .01em; }
th.if-kader__name { padding-left: 6px !important; }
.if-posbadge--s { min-width: 30px; height: 16px; padding: 0 5px; border-radius: 3px; font-size: 12px; }
.if-kader__meter { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; width: 32px; padding-top: 3px; }
.if-kader__meter .if-progress { width: 32px; height: 3px; background: #D7E6F3; }
.if-kader__ew { padding-left: 20px !important; }
th.if-kader__ew { padding-left: 12px !important; }
.if-pill--s { height: 17px; padding: 0 9px; border-radius: 9px; font-size: 12px; letter-spacing: .03em; }
.if-kader__status { padding-left: 14px !important; }
.if-kader__top { display: inline-flex; align-items: center; gap: 3px; margin-left: 9px; font: 700 12px/1 var(--if-font-head); text-transform: uppercase; color: var(--if-gold); }
.if-kader__top .if-icon { width: 13px; height: 13px; }
/* "Weitere Spieler": the eleventh row shows through faintly (if2.js) */
.if-kader__table.is-clamped tr.is-more { display: none; }
.if-kader__table.is-clamped tr.is-peek { display: table-row; opacity: .1; pointer-events: none; }
.if-kader__table.is-clamped tr.is-peek td { height: 14px; border-bottom: 0; overflow: hidden; }
.if-kader__more { display: flex; margin: 4px auto 0; position: relative; font: 600 12px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .04em; }
.if-kader__more .if-icon { width: 14px; height: 14px; }

.if-kader__detail { position: sticky; top: 16px; padding: 14px 15px 25px; }
.if-kader__head { display: grid; grid-template-columns: 136px minmax(0, 1fr); column-gap: 20px; }
.if-kader__bigphoto { display: block; width: 136px; height: 149px; overflow: hidden; border: 3px solid #fff; border-radius: 6px; box-shadow: 0 1px 4px rgba(13, 27, 58, .18); background: #DDE3EA; }
.if-kader__bigphoto img, .if-kader__bigphoto .if-photo--none { display: grid; width: 100%; height: 100%; object-fit: cover; }
a.if-kader__bigphoto:hover { box-shadow: 0 0 0 2px var(--if-eisblau); }
.if-kader__title { display: flex; align-items: center; gap: 12px; min-height: 26px; }
.if-kader__title h2 { position: relative; font: 700 23px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .01em; }
/* faint ice-blue dashes under the name as in the design */
.if-kader__title h2::after { content: ''; position: absolute; left: 0; bottom: -7px; width: 64%; height: 1.5px; background: repeating-linear-gradient(90deg, #B9D7EE 0 26px, transparent 26px 32px); }
.if-kader__rename { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 4px; background: none; color: var(--if-navy); cursor: pointer; }
.if-kader__rename:hover { background: var(--if-frost); }
.if-kader__rename .if-icon { width: 18px; height: 18px; }
.if-kader__locked { position: relative; display: inline-flex; align-items: center; gap: 8px; }
.if-kader__locked > .if-icon { width: 18px; height: 18px; color: var(--if-disabled); }
.if-kader__renameform { display: none; gap: 8px; margin-top: 12px; }
.if-kader__renameform.is-open { display: flex; }
.if-kader__renameform .if-input { height: 30px; font-size: 14px; }
.if-kader__list-facts { display: grid; grid-template-columns: 115px minmax(0, 1fr); row-gap: 0; margin: 5px 0 0; }
.if-kader__list-facts dt, .if-kader__list-facts dd { display: flex; align-items: center; height: 20.5px; margin: 0; }
.if-kader__list-facts dt { font: 500 13.5px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .02em; }
.if-kader__list-facts dt.is-value { color: var(--if-eisblau-dark); }
.if-kader__list-facts dd { font: 700 15px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.if-kader__list-facts .if-pill { height: 16px; padding: 0 12px; border-radius: 3px; font-size: 12.5px; }

.if-kader__bars { margin-top: 20px; }
.if-kader__bar { display: grid; grid-template-columns: minmax(0, 1fr) 60px; grid-template-rows: auto auto; column-gap: 14px; margin-bottom: 9px; }
.if-kader__barlabel { grid-column: 1 / -1; font: 700 13.5px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .02em; margin-bottom: 4px; }
.if-kader__bar .if-progress { align-self: center; height: 7px; border-radius: 4px; background: #E2EDF6; }
.if-kader__barvalue { margin-top: -10px; text-align: right; font: 500 14px/1 var(--if-font-head); white-space: nowrap; font-variant-numeric: tabular-nums; }
.if-kader__barvalue b { font-weight: 700; font-size: 15px; }

.if-kader__stats { display: grid; grid-template-columns: 1fr 1.8fr 1fr; margin-top: 16px; border: 1px solid var(--if-line); border-radius: 6px; }
.if-kader__stats > div { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 14px; }
.if-kader__stats > div + div { border-left: 1px solid var(--if-line); }
.if-kader__stats .if-icon { width: 24px; height: 24px; color: var(--if-navy); }
.if-kader__stats > div:last-child .if-icon { color: var(--if-eisblau); }
.if-kader__stats small { display: block; margin-bottom: 4px; font: 600 11px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .04em; }
.if-kader__stats b { display: block; font: 700 19px/1 var(--if-font-head); font-variant-numeric: tabular-nums; }
.if-kader__stats b em { font-style: normal; font-weight: 500; font-size: 14px; text-transform: uppercase; }
.if-kader__buttons { display: grid; grid-template-columns: 1.06fr 1fr; gap: 13px; margin-top: 14px; }
.if-kader__buttons .if-btn { min-height: 31px; padding: 0 12px; font-size: 15px; border-radius: 3px; }
.if-kader__buttons .if-btn--outline { box-shadow: inset 0 0 0 1.5px var(--if-navy); font-weight: 500; }
.if-kader__none { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; height: 100%; min-height: 300px; text-align: center; font-size: 15px; color: var(--if-muted); }
.if-kader__none .if-photo--none { width: 110px; height: 120px; border: 3px solid #fff; border-radius: 6px; box-shadow: 0 1px 4px rgba(13, 27, 58, .18); }

/* premium feature the team has: gold tag in the tab */
.if-tab--premium { gap: 10px; }
.if-tab--premium .if-premium__tag { height: 17px; }
.if-tab--premium.is-active .if-premium__tag { background: var(--if-gold); border-color: var(--if-gold); color: var(--if-navy); }
.if-tab--premium.is-active .if-premium__tag .if-icon { color: var(--if-navy); }

/* ---------- Team → Übersicht: Passfoto hochladen (icefighter-passfoto-hochladen.jpg) ---------- */
.if-passfoto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr) minmax(0, 1.13fr); gap: 16px; align-items: stretch; }
.if-passfoto [hidden] { display: none !important; }
.if-passfoto > .if-card { padding: 8px 14px 14px; }
.if-passfoto > .if-passfoto__upload { padding: 8px 19px 16px; }
.if-passfoto__list { display: flex; flex-direction: column; }
h2.if-passfoto__title { margin: 0 0 8px; font: 700 17px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .01em; color: var(--if-navy); }
.if-passfoto__frame { display: block; overflow: hidden; border: 3px solid #fff; border-radius: 4px; box-shadow: 0 1px 4px rgba(13, 27, 58, .2); background: #DDE3EA; }
.if-passfoto__frame img, .if-passfoto__frame .if-photo--none { display: grid; width: 100%; height: 100%; object-fit: cover; }
.if-passfoto__frame .if-photo--none.is-empty { background: #F1F4F8; color: #C5CFDB; }
.if-passfoto__frame .if-photo--none.is-empty .if-icon { width: 34%; height: 34%; margin: 0; }
/* player list */
.if-passfoto__players { flex: 1 1 0; min-height: 250px; margin: 0 -14px; padding: 0; overflow-y: auto; list-style: none; border-top: 1px solid var(--if-line); scrollbar-width: thin; }
.if-passfoto__players a { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 15px; height: 51px; padding: 0 18px 0 14px; border-bottom: 1px solid var(--if-line); color: var(--if-navy) !important; text-decoration: none; }
.if-passfoto__players a:hover { background: var(--if-row-hover); }
.if-passfoto__players a.is-selected { background: #E3F0FB; box-shadow: inset 4px 0 0 var(--if-red); }
.if-passfoto__thumb { display: block; width: 42px; height: 42px; overflow: hidden; border: 2px solid #fff; border-radius: 3px; box-shadow: 0 1px 3px rgba(13, 27, 58, .2); background: #DDE3EA; }
.if-passfoto__thumb img, .if-passfoto__thumb .if-photo--none { display: grid; width: 100%; height: 100%; object-fit: cover; }
.if-passfoto__name { overflow: hidden; font-size: 13px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
/* upload */
.if-passfoto__upload form { height: 100%; }
.if-passfoto__upload .if-lock { width: 440px; }
.if-passfoto__note { height: 30px; padding: 0 14px; gap: 10px; font-size: 12px; }
.if-passfoto__note .if-icon { width: 17px; height: 17px; }
.if-passfoto__compare { display: grid; grid-template-columns: 112px 158px minmax(0, 1fr); align-items: start; gap: 0 58px; margin-top: 16px; padding-left: 4px; }
.if-passfoto__label { display: block; margin-bottom: 3px; font: 600 12.5px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .06em; }
.if-passfoto__frame--current { width: 112px; height: 112px; }
.if-passfoto__sized { position: relative; display: block; width: 100px; height: 100px; margin-bottom: 12px; }
.if-passfoto__frame--new { width: 100px; height: 100px; }
.if-passfoto__dim { position: absolute; display: flex; align-items: center; justify-content: center; font: 500 12px/1 var(--if-font-head); color: var(--if-muted); }
.if-passfoto__dim::before, .if-passfoto__dim::after { content: ''; flex: 1; border-color: #9AA8BB; border-style: solid; border-width: 0; }
.if-passfoto__dim--h { top: 0; bottom: 0; left: calc(100% + 26px); flex-direction: column; gap: 6px; }
.if-passfoto__dim--h::before, .if-passfoto__dim--h::after { border-left-width: 1px; }
.if-passfoto__dim--w { top: calc(100% + 8px); left: 0; right: 0; gap: 8px; }
.if-passfoto__dim--w::before, .if-passfoto__dim--w::after { border-top-width: 1px; }
.if-passfoto__frame--big { justify-self: end; width: 150px; height: 150px; margin: -8px 14px 0 0; }
.if-passfoto__file { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 15px; margin-top: 20px; }
.if-passfoto__file .if-btn { min-height: 31px; cursor: pointer; }
.if-passfoto__file .if-btn:has(input:disabled) { background: var(--if-disabled); color: var(--if-disabled-text) !important; box-shadow: inset 0 -3px 0 #A7B2C1; cursor: default; }
.if-passfoto__filename { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 31px; padding: 0 6px 0 13px; font-size: 13.5px; }
.if-passfoto__filename > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.if-passfoto__clear { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; background: none; color: var(--if-navy); cursor: pointer; }
.if-passfoto__clear .if-icon { width: 16px; height: 16px; }
.if-passfoto .if-passfoto__question { margin: 24px 0 12px; font-size: 13.5px; font-weight: 600; }
.if-passfoto__buttons { justify-content: center; gap: 16px; }
.if-passfoto__buttons .if-btn { min-width: 164px; min-height: 33px; }
/* player card */
.if-passfoto__player { display: flex; flex-direction: column; }
.if-passfoto__frame--player { width: 162px; height: 162px; margin-top: 4px; }
h2.if-passfoto__playername { margin: 14px 0 10px; font: 800 italic 24px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .01em; color: var(--if-navy); }
.if-passfoto__pos { display: flex; align-items: center; gap: 13px; padding-bottom: 15px; border-bottom: 1px solid var(--if-line); font: 600 15px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .03em; }
.if-passfoto__pos .if-posbadge { min-width: 44px; }
.if-passfoto__facts { display: grid; grid-template-columns: 1fr 1fr; margin: 0; border-bottom: 1px solid var(--if-line); }
.if-passfoto__facts > div { padding: 13px 0 12px; }
.if-passfoto__facts > div + div { padding-left: 26px; border-left: 1px solid var(--if-line); }
.if-passfoto__facts dt { font: 500 11.5px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .05em; }
.if-passfoto__facts dd { margin: 6px 0 0; font: 700 36px/1 var(--if-font-head); }
.if-passfoto__where { display: flex; gap: 12px; margin: 12px 0 0; font-size: 12.5px; line-height: 1.4; }
.if-passfoto__where .if-icon { flex: none; width: 17px; height: 17px; margin-top: 1px; color: var(--if-navy); }
@media (max-width: 1180px) {
    .if-passfoto { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
    .if-passfoto__player { grid-column: 1 / -1; }
}
@media (max-width: 820px) {
    .if-passfoto { grid-template-columns: minmax(0, 1fr); }
    .if-passfoto__compare { grid-template-columns: 112px 1fr; gap: 0 30px; }
    .if-passfoto__frame--big { display: none; }
    .if-passfoto__file { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}

/* the squad list stacks above the player card; the table scrolls sideways */
@media (max-width: 1180px) {
    .if-kader { grid-template-columns: minmax(0, 1fr); }
    .if-kader .if-table-scroll { overflow-x: auto; }
    .if-kader__detail { position: static; }
}

/* ---------- Team → Training (icefighter-training.jpg) ---------- */
.if-main--training { padding-top: 12px; }
.if-training { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 15px 18px; align-items: stretch; }
.if-training [hidden] { display: none !important; }
.if-training > .if-card { padding: 4px 22px 14px; }
h2.if-training__title { display: flex; align-items: center; gap: 14px; margin: 0; font: 700 17px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .02em; color: var(--if-navy); }
.if-training__title .if-icon { width: 30px; height: 30px; color: var(--if-eisblau); }
p.if-training__sub { margin: 0 0 0 44px; font-size: 10.5px; line-height: 1.3; color: var(--if-navy); }
.if-training__slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 8px; }
.if-training__slot { padding: 0 10px 4px 16px; border-left: 1px solid var(--if-line); }
.if-training__slot:first-child { padding-left: 4px; border-left: 0; }
.if-training__slothead { display: flex; align-items: center; gap: 22px; height: 30px; margin-bottom: 4px; }
.if-training__slothead b { font: 700 18px/1 var(--if-font-head); }
.if-training__slothead .if-icon { width: 27px; height: 27px; color: var(--if-eisblau); }
.if-training .if-select { height: 28px; padding: 0 30px 0 12px; border-color: var(--if-navy-3, #23365F); border-width: 1px; font: 600 12px/1 var(--if-font-head); background-position: right 8px center; background-size: 16px; }
.if-training__valuesin { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 52px; align-items: center; margin: 8px 0 0 0; }
.if-training__logo { width: 92px; height: 110px; object-fit: contain; }
.if-training__dl { margin: 0; }
.if-training__dl > div { display: grid; grid-template-columns: 145px 52px minmax(0, 1fr); align-items: center; height: 29px; }
.if-training__dl dt { display: flex; align-items: center; gap: 18px; font: 500 13.5px/1 var(--if-font-head); text-transform: uppercase; }
.if-training__dl dt .if-icon { width: 22px; height: 22px; color: var(--if-eisblau); }
.if-training__dl dd { display: contents; }
.if-training__dl dd b { font: 700 16px/1 var(--if-font-head); text-align: right; }
.if-training__dl .if-progress { height: 8px; margin-left: 15px; border-radius: 3px; background: #E8EEF4; }
.if-training__dl .if-progress > span { background: #4AA6DD; border-radius: 3px; }
.if-training__rows { list-style: none; margin: 0; padding: 0; }
.if-training__rows li { display: grid; grid-template-columns: 39px minmax(0, 1fr) 268px; align-items: center; gap: 0 0; height: 48px; margin-left: 17px; padding-left: 28px; border-top: 1px solid var(--if-line); }
.if-training__rows li:first-child { border-top: 0; }
.if-training__rows li { padding-right: 120px; margin-left: 0; }
.if-training__rows li > .if-training__photo { grid-column: 1; }
.if-training__photo { width: 39px; height: 39px; border-radius: 2px; overflow: hidden; box-shadow: 0 1px 2px rgba(13, 27, 58, .25); }
.if-training__photo img, .if-training__photo .if-photo--none, .if-training__mini img, .if-training__mini .if-photo--none { display: block; width: 100%; height: 100%; object-fit: cover; }
.if-training__player { appearance: none; -webkit-appearance: none; justify-self: start; max-width: 100%; height: 30px; margin-left: 13px; padding: 0 22px 0 0; border: 0; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%239AA8BB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 2px center / 14px; font: 600 15px/1 var(--if-font-head); color: var(--if-navy); cursor: pointer; }
.if-training__player:focus { outline: none; box-shadow: 0 0 0 3px rgba(63, 169, 224, .22); border-radius: 3px; }
.if-training__rows .if-select { height: 26px; padding-left: 16px; }
.if-training__blocks { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 17px; margin-top: 2px; }
.if-training__blockcol + .if-training__blockcol { padding-left: 17px; border-left: 1px solid var(--if-line); }
h3.if-training__blockname { margin: 0 0 5px; font: 700 13px/1 var(--if-font-head); text-transform: uppercase; color: var(--if-navy); }
.if-training__letters { display: flex; gap: 6px; }
.if-training__letters label { position: relative; flex: 1; max-width: 50px; cursor: pointer; }
.if-training__letters input { position: absolute; opacity: 0; pointer-events: none; }
.if-training__letters span { display: grid; place-items: center; height: 21px; border: 1px solid #C9D4E0; border-radius: 3px; background: #fff; font: 600 12px/1 var(--if-font-head); color: var(--if-navy); }
.if-training__letters input:checked + span { background: var(--if-navy); border-color: var(--if-red); box-shadow: 0 0 0 1px var(--if-red); color: #fff; }
.if-training__letters input:focus-visible + span { box-shadow: 0 0 0 3px rgba(63, 169, 224, .35); }
.if-training__unit { position: relative; margin-top: 8px; }
.if-training__unit > span { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); display: flex; pointer-events: none; }
.if-training__unit .if-icon { width: 15px; height: 15px; color: var(--if-navy); }
.if-training__unit .if-select { height: 21px; padding-left: 33px; font-size: 12.5px; }
.if-training__inblock { display: block; margin: 7px 0 1px; font: 500 10px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .03em; color: #5B8BB3; }
.if-training__members { list-style: none; margin: 0; padding: 0; }
.if-training__members li { display: grid; grid-template-columns: 17px minmax(0, 1fr) auto; align-items: center; gap: 0 18px; height: 21px; padding: 0 10px 0 5px; border-top: 1px solid #EEF2F6; font-size: 10.5px; }
.if-training__members li:first-child { border-top: 0; }
.if-training__members li:last-child { border-bottom: 1px solid #EEF2F6; }
.if-training__members li.is-empty { display: block; height: auto; padding: 6px 5px; color: var(--if-muted); }
.if-training__mini { width: 17px; height: 17px; overflow: hidden; border-radius: 1px; }
.if-training__mname small { font-size: 10px; color: var(--if-muted); }
.if-training__members .if-posbadge--s { min-width: 21px; height: 12px; font-size: 9px; padding: 0 3px; border-radius: 2px; }
.if-training__save { grid-column: 1 / -1; display: flex; justify-content: flex-end; margin-top: -26px; position: relative; z-index: 1; }
.if-training__save .if-btn { min-height: 32px; width: 192px; padding: 0 12px; font: italic 700 15px/1 var(--if-font-head); }
.if-onoff { display: inline-flex; align-items: center; gap: 7px; font-size: 16px; text-transform: uppercase; }
.if-onoff::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.if-onoff.is-on { color: var(--if-green); }
.if-onoff.is-off { color: var(--if-red); }
/* new training (24.10.2026): intro, preview, report, knowledge */
p.if-training__intro { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; min-height: 36px; margin: 0; padding: 6px 18px; border: 1px solid #D3E4F2; border-radius: 6px; background: #EAF4FC; color: var(--if-navy); font-size: 11px; line-height: 1.35; }
.if-training__intro .if-icon { flex: none; width: 22px; height: 22px; color: var(--if-eisblau-dark); }
.if-training__preview { display: block; margin: 6px 0 0 4px; font: 600 11px/1.3 var(--if-font-head); color: #5B8BB3; }
.if-training__rows .if-training__preview { grid-column: 2 / -1; margin: 0 0 4px 13px; }
.if-training__save { gap: 10px; }
.if-training__bericht, .if-training__wissen { align-self: start; }
.if-training__report { list-style: none; margin: 0 0 10px; padding: 0; }
.if-training__report li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 6px 0; border-top: 1px solid #EEF2F6; font-size: 11.5px; color: var(--if-navy); }
.if-training__report li:first-child { border-top: 0; }
.if-training__rtext small { color: var(--if-muted); }
.if-training__rwerte { display: flex; gap: 10px; }
.if-training__wert { font: 600 11.5px/1.3 var(--if-font-head); color: var(--if-muted); }
.if-training__wert.is-up, .if-training__table td.is-up { color: var(--if-green); }
.if-training__wert.is-down, .if-training__table td.is-down { color: var(--if-red); }
.if-training__bericht h3.if-training__blockname { margin-top: 10px; }
.if-training__tablewrap { overflow-x: auto; margin-top: 8px; }
.if-training__table { width: 100%; border-collapse: collapse; font-size: 11.5px; color: var(--if-navy); }
.if-training__table th, .if-training__table td { padding: 5px 8px; border-top: 1px solid #EEF2F6; text-align: center; white-space: nowrap; }
.if-training__table thead th { border-top: 0; font: 600 10px/1 var(--if-font-head); text-transform: uppercase; color: #5B8BB3; }
.if-training__table tbody th { display: flex; align-items: center; gap: 8px; text-align: left; font-weight: 600; }
.if-training__table tbody th small { font-weight: 400; color: var(--if-muted); }
.if-training__table .if-icon { width: 15px; height: 15px; color: var(--if-eisblau); }
.if-training__table td { font: 700 12.5px/1 var(--if-font-head); }
.if-training__table td.is-unknown { color: #A9BCD3; }
.if-training__sub a { color: var(--if-eisblau-dark); font-weight: 600; }
.if-training__wissen p.if-training__sub, .if-training__bericht p.if-training__sub { margin: 6px 0 0 44px; font-size: 11px; }
@media (max-width: 1180px) {
    .if-training { grid-template-columns: minmax(0, 1fr); }
    .if-training__save { margin-top: 0; }
}
@media (max-width: 820px) {
    .if-training__slots { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; }
    .if-training__slot:nth-child(3) { padding-left: 4px; border-left: 0; }
    .if-training__valuesin { grid-template-columns: 70px minmax(0, 1fr); gap: 20px; }
    .if-training__dl > div { grid-template-columns: 110px 46px minmax(0, 1fr); }
    .if-training__rows li { grid-template-columns: 39px minmax(0, 1fr); height: auto; padding: 8px 0; row-gap: 6px; }
    .if-training__rows .if-select { grid-column: 1 / -1; }
    .if-training__blocks { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
    .if-training__blockcol + .if-training__blockcol { padding-left: 0; border-left: 0; }
    .if-training__save .if-btn { width: 100%; }
}

/* ---------- Team → Trainingslager: the page itself is in css/if2-lager.css (since 25.10.2026) ---------- */
.if-bar-wrap--lager .if-bar__note { font: italic 800 28px/1.1 var(--if-font-head); letter-spacing: -.005em; }
@media (max-width: 820px) {
    .if-bar-wrap--lager .if-bar__note { font-size: 21px; }
}

/* ---------- Team → Aufstellung (icefighter-aufstellung.jpg) ---------- */
.if-lineup { display: grid; grid-template-columns: minmax(0, 270fr) minmax(0, 262fr) minmax(0, 640fr) minmax(0, 208fr); gap: 12px; align-items: stretch; }
.if-lineup [hidden] { display: none !important; }
.if-lineup > .if-card, .if-lineup__mid > .if-card { padding: 8px 10px 12px; }
p.if-lineup__hint { display: flex; align-items: center; gap: 8px; margin: 0 -10px 8px; padding: 2px 10px 8px; border-bottom: 1px solid var(--if-line); font-size: 8.8px; white-space: nowrap; color: var(--if-navy); }
.if-lineup__hint .if-icon { width: 14px; height: 14px; color: var(--if-eisblau); }
h2.if-lineup__listtitle { margin: 4px 0 4px 2px; font: 700 12px/1 var(--if-font-head); text-transform: uppercase; color: var(--if-navy); }
.if-lineup__listtitle small { font-size: inherit; font-weight: 500; }
.if-lineup__list { margin: 0 0 12px; padding: 0; list-style: none; }
.if-lineup__row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto 24px 26px; align-items: center; gap: 0 8px; width: 100%; height: 21px; padding: 0 4px 0 2px; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.if-lineup__row:hover { background: var(--if-row-hover); }
.if-lineup__row.is-selected { background: #E7F1FB; box-shadow: inset 3px 0 0 var(--if-red); }
.if-lineup__row:disabled { cursor: default; }
.if-lineup .is-off .if-lineup__row { grid-template-columns: 22px minmax(0, 1fr) auto 24px 26px auto; opacity: .55; }
.if-lineup .is-off .if-lineup__row:hover { background: none; }
.if-lineup__face { display: block; width: 18px; height: 18px; border-radius: 50%; object-fit: cover; background: #DCE5EE; }
span.if-lineup__face { display: grid; place-items: center; color: #9AA8BB; }
span.if-lineup__face .if-icon { width: 12px; height: 12px; }
.if-lineup__name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 10px; color: var(--if-navy); }
.if-lineup__inblock { font: 700 9px/1 var(--if-font-head); color: var(--if-muted); }
.if-lineup__row .if-posbadge { justify-self: center; min-width: 22px; height: 13px; padding: 0 3px; font-size: 9px; }
.if-lineup__st { font-size: 10px; text-align: right; color: var(--if-navy); }
.if-lineup__state { padding: 2px 6px; border-radius: 8px; background: var(--if-red); color: #fff; font: 700 8px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .03em; }
.if-lineup .is-off .if-lineup__state { opacity: 1; }
.if-lineup__mid { display: flex; flex-direction: column; gap: 12px; }
.if-lineup__profile { flex: none; }
.if-lineup__pfhead { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; }
.if-lineup__pfphoto, .if-lineup__gkphoto { display: block; overflow: hidden; border-radius: 3px; background: #DCE5EE; }
.if-lineup__pfphoto { width: 96px; height: 120px; }
.if-lineup__pfphoto img, .if-lineup__gkphoto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.if-lineup__pfphoto .if-photo--none, .if-lineup__gkphoto .if-photo--none { display: grid; place-items: center; height: 100%; color: #9AA8BB; }
h2.if-lineup__pfname { margin: 6px 0 8px; font: 800 18px/1 var(--if-font-head); text-transform: uppercase; color: var(--if-navy); }
.if-lineup__pfpos { display: inline-block; padding: 5px 15px; border-radius: 3px; background: var(--if-navy); color: #fff; font: 700 11px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .04em; }
.if-lineup__pfstats { display: flex; gap: 14px; margin: 12px 0 0; }
.if-lineup__pfstats dt { font: 500 9.5px/1 var(--if-font-head); text-transform: uppercase; color: var(--if-navy); }
.if-lineup__pfstats dd { margin: 8px 0 0; font: 700 17px/1 var(--if-font-head); color: var(--if-navy); }
.if-lineup__ask { margin-top: 12px; padding: 10px 12px 12px; border: 1px solid #CFE2F2; border-radius: 4px; background: #F2F8FD; }
.if-lineup__ask > p:first-child { display: flex; gap: 8px; margin: 0 0 9px; font-size: 10.5px; line-height: 1.45; color: var(--if-navy); }
.if-lineup__ask .if-icon { flex: none; width: 15px; height: 15px; margin-top: 1px; color: var(--if-eisblau-dark); }
.if-lineup__assign { display: flex; width: 194px; min-height: 26px; margin: 0 auto; padding: 0; box-shadow: inset 0 -2px 0 var(--if-red); font: 700 12px/1 var(--if-font-head); }
p.if-lineup__error { margin: 8px 0 0; color: var(--if-red); font-size: 10px; line-height: 1.35; text-align: center; }
.if-lineup__goalie { flex: 1; }
h2.if-lineup__cardtitle { margin: 4px 0 9px; font: 700 13px/1 var(--if-font-head); text-transform: uppercase; color: var(--if-navy); }
.if-lineup__goalie .if-select { width: 100%; height: 27px; padding: 0 30px 0 9px; border: 1px solid #8EA3BE; font-size: 10.5px; background-position: right 8px center; background-size: 14px; }
.if-lineup__gkbody { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 16px; margin-top: 8px; }
.if-lineup__gkphoto { width: 86px; height: 99px; }
.if-lineup__gkbadge { display: inline-block; margin-top: 5px; padding: 4px 10px; border-radius: 2px; background: var(--if-gold); color: #fff; font: 700 9.5px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .04em; }
.if-lineup__gkstats { margin: 8px 0 0; }
.if-lineup__gkstats div { display: grid; grid-template-columns: 1fr auto; align-items: center; height: 23px; }
.if-lineup__gkstats dt { font: 500 10.5px/1 var(--if-font-head); text-transform: uppercase; color: var(--if-navy); }
.if-lineup__gkstats dd { margin: 0; padding-right: 18px; font: 700 14px/1 var(--if-font-head); color: var(--if-navy); }
.if-lineup__blocks { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
.if-lineup__block { display: flex; flex-direction: column; padding: 10px 7px 10px !important; border: 1.5px solid transparent; cursor: pointer; }
.if-lineup__block.is-target { border-color: var(--if-red); }
.if-lineup__bhead { display: flex; align-items: baseline; justify-content: space-between; padding: 0 4px; }
h2.if-lineup__bname { margin: 4px 0 0; font: 700 16px/1 var(--if-font-head); text-transform: uppercase; color: var(--if-navy); }
.if-lineup__ziel { display: none; align-items: center; gap: 3px; color: var(--if-red); font: italic 700 9px/1 var(--if-font-head); text-transform: uppercase; }
.if-lineup__ziel .if-icon { width: 13px; height: 13px; }
.if-lineup__block.is-target .if-lineup__ziel { display: inline-flex; }
.if-lineup__active { margin: 11px 4px 12px; font: 500 10.5px/1 var(--if-font-head); text-transform: uppercase; color: var(--if-navy); }
.if-lineup__active input { width: 16px; height: 16px; }
.if-lineup__active.is-notfull { color: #93A2B6; }
.if-lineup__slots { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.if-lineup__slot { position: relative; display: grid; place-items: center; width: 100%; height: 40px; border: 1px dashed #A9C3DC; border-radius: 4px; background: #F5F9FD; font: inherit; cursor: pointer; color: var(--if-eisblau); }
.if-lineup__slot .if-icon { width: 15px; height: 15px; }
.if-lineup__slot.is-filled { grid-template-columns: 24px minmax(0, 1fr); justify-items: start; gap: 6px; padding: 0 5px; border: 0; background: #F0F5FA; text-align: left; }
.if-lineup__slot.is-filled .if-lineup__face { width: 24px; height: 24px; }
.if-lineup__sname { display: flex; flex-direction: column; gap: 4px; min-width: 0; width: 100%; font-size: 9px; color: var(--if-navy); }
.if-lineup__sn { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.if-lineup__kz { font: 700 9.5px/1 var(--if-font-head); color: var(--if-eisblau-dark); }
.if-lineup__remove { position: absolute; right: 4px; top: 4px; width: 12px !important; height: 12px !important; color: var(--if-muted); opacity: 0; }
.if-lineup__slot.is-filled:hover .if-lineup__remove { opacity: 1; }
.if-lineup__slot:hover { border-color: var(--if-eisblau); }
.if-lineup__bfoot { margin-top: auto; padding: 18px 4px 0; }
.if-lineup__bfoot > span:first-child { display: block; font: 600 9.5px/1 var(--if-font-head); text-transform: uppercase; color: var(--if-navy); }
.if-lineup__bfoot b { display: block; margin: 6px 0 8px; font: 700 20px/1 var(--if-font-head); color: var(--if-navy); }
.if-lineup__bar { display: block; height: 8px; border-radius: 2px; background: #E3EBF3; overflow: hidden; }
.if-lineup__bar span { display: block; height: 100%; background: repeating-linear-gradient(90deg, var(--if-eisblau) 0 9px, transparent 9px 10px); }
.if-lineup__banks { display: flex; flex-direction: column; padding: 8px 8px 12px !important; }
.if-lineup__banks h2.if-lineup__cardtitle { margin-left: 4px; }
.if-lineup__banklist { display: flex; flex-direction: column; gap: 4px; margin: 0 0 12px; padding: 0; list-style: none; }
.if-lineup__banklist li { position: relative; min-height: 50px; border: 1px solid #E1E9F1; border-radius: 4px; }
.if-lineup__banklist label { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 5px 8px; padding: 7px 22px 7px 8px; cursor: pointer; }
.if-lineup__banklist input { position: absolute; opacity: 0; pointer-events: none; }
.if-lineup__bankmark { grid-row: 1; width: 14px; height: 14px; border: 1.5px solid #9DAABD; border-radius: 50%; }
.if-lineup__bankmark .if-icon { display: block; width: 17px; height: 17px; margin: -3px; color: var(--if-green); }
.if-lineup__banklist li.is-loaded .if-lineup__bankmark { border: 0; }
.if-lineup__banklist input:checked ~ .if-lineup__bankmark { box-shadow: 0 0 0 3px rgba(63, 169, 224, .35); }
.if-lineup__banklist input:focus-visible ~ .if-lineup__bankmark { outline: 2px solid var(--if-eisblau); outline-offset: 2px; }
.if-lineup__bankname { font: 700 10.5px/1.1 var(--if-font-head); text-transform: uppercase; color: var(--if-navy); }
.if-lineup__bankname small { display: block; margin-top: 4px; font: 400 10px/1 var(--if-font-body); text-transform: none; }
.if-lineup__faces { grid-column: 2; display: flex; gap: 5px; }
.if-lineup__faces img, .if-lineup__faces i { width: 19px; height: 20px; border-radius: 2px; object-fit: cover; }
.if-lineup__faces i { border: 1px dashed #B9CAD9; }
.if-lineup__bankgo { position: absolute; right: 5px; top: 50%; margin-top: -8px; color: var(--if-navy); }
.if-lineup__bankgo .if-icon { width: 16px; height: 16px; }
.if-lineup__banklist li.is-locked label { cursor: default; }
.if-lineup__banklock { grid-column: 2; display: inline-flex; align-items: center; gap: 4px; color: var(--if-gold); font: 700 9.5px/1 var(--if-font-head); text-transform: uppercase; }
.if-lineup__banklock .if-icon { width: 12px; height: 12px; }
.if-lineup__load, .if-lineup__store { min-height: 26px; padding: 0 8px; font: 700 11px/1 var(--if-font-head); }
.if-lineup__load { margin-top: auto; box-shadow: inset 0 -2px 0 var(--if-red); }
.if-lineup__store { margin-top: 8px; }
@media (max-width: 1180px) {
    .if-lineup { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .if-lineup__blocks { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 820px) {
    .if-lineup { grid-template-columns: minmax(0, 1fr); }
    .if-lineup__blocks { grid-column: auto; grid-row: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Aufstellungen / Strategien zuweisen (icefighter-team-aufstellung-zuweisen.jpg) ---------- */
.if-assign { display: grid; grid-template-columns: minmax(0, 2.78fr) minmax(0, 1fr); gap: 15px; align-items: start; }
.if-assign > .if-card { padding: 14px 15px 12px; }
.if-assign__filter { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 12px; }
.if-assign__chip { display: inline-grid; place-items: center; min-width: 128px; height: 23px; padding: 0 14px; border: 1.5px solid var(--if-navy); border-radius: 7px; color: var(--if-navy) !important; text-decoration: none !important; font: 700 13px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .03em; }
.if-assign__chip:hover { background: var(--if-frost); }
.if-assign__chip.is-active { background: var(--if-navy); color: #fff !important; }
.if-assign__box { border: 1px solid #DCE5EE; border-radius: 4px; box-shadow: 0 1px 3px rgba(13, 27, 58, .06); }
h2.if-assign__title { margin: 0; padding: 9px 12px 7px; border-bottom: 1px solid #E3EAF1; font: 700 18.5px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .03em; color: var(--if-navy); }
.if-assign__rows { margin: 0; padding: 0; list-style: none; }
.if-assign__rows li { position: relative; display: grid; grid-template-columns: 77px 81px 164px minmax(0, 1fr) 218px; align-items: center; min-height: 37px; padding: 0 16px 0 11px; border-top: 1px solid #E8EEF4; }
.if-assign__rows li:first-child { border-top: 0; }
.if-assign__rows li.is-locked { min-height: 28px; }
.if-assign__rows li.is-current { background: #EFF5FB; box-shadow: inset 3px 0 0 var(--if-red); }
.if-assign__tag { display: inline-grid; place-items: center; height: 17px; border-radius: 2px; background: #AEBBCB; color: #fff; font: 600 11px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .03em; }
.if-assign__rows li.is-current .if-assign__tag { background: var(--if-navy); }
.if-assign__logo { display: flex; justify-content: flex-end; }
.if-assign__logo img { width: 17px; height: 17px; object-fit: contain; }
.if-assign__team { padding-left: 30px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 500 12.5px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .05em; color: var(--if-navy); }
.if-assign__team small { font-size: 9px; color: var(--if-muted); }
.if-assign__today b { display: inline-block; padding: 3px 12px; border-radius: 8px; background: var(--if-red); color: #fff; font: 600 11px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .03em; }
.if-assign__done { display: flex; align-items: center; gap: 0; padding-left: 4px; color: #9AA9BC; font: italic 600 11.5px/1 var(--if-font-head); text-transform: uppercase; }
.if-assign__done .if-icon { width: 15px; height: 15px; margin-right: 36px; }
.if-assign__banks { display: grid; grid-template-columns: repeat(4, 1fr); height: 24px; border: 1px solid #8FA3BD; border-radius: 3px; overflow: hidden; }
.if-assign__banks label { position: relative; cursor: pointer; }
.if-assign__banks label + label { border-left: 1px solid #C6D2DF; }
.if-assign__banks input { position: absolute; opacity: 0; pointer-events: none; }
.if-assign__banks span { display: grid; place-items: center; height: 100%; font: 600 12px/1 var(--if-font-head); color: var(--if-navy); }
.if-assign__banks label:hover span { background: var(--if-frost); }
.if-assign__banks input:checked + span { background: var(--if-navy); color: #fff; }
.if-assign__banks input:focus-visible + span { outline: 2px solid var(--if-eisblau); outline-offset: -2px; }
p.if-assign__empty { margin: 0; padding: 18px 12px; color: var(--if-muted); font-size: 12px; }
.if-assign__side { padding: 22px 18px 22px !important; }
p.if-assign__note { display: flex; align-items: center; gap: 16px; margin: 0 0 15px; padding: 18px 16px; border: 1px solid #CFE2F2; border-radius: 4px; background: #EEF6FD; font-size: 13.5px; line-height: 1.35; color: var(--if-navy); }
.if-assign__note > span { display: grid; place-items: center; flex: none; width: 45px; height: 45px; border-radius: 50%; background: var(--if-eisblau-dark); color: #fff; }
.if-assign__note .if-icon { width: 22px; height: 22px; }
.if-assign__save, .if-assign__cancel { min-height: 37px; font: 700 15px/1 var(--if-font-head); }
.if-assign__save { box-shadow: inset 0 -4px 0 var(--if-red); }
.if-assign__cancel { margin-top: 14px; }
@media (max-width: 1180px) {
    .if-assign { grid-template-columns: minmax(0, 1fr); }
    .if-assign__rows li { grid-template-columns: 77px 30px minmax(0, 1fr) auto 218px; }
    .if-assign__team { padding-left: 10px; }
}
@media (max-width: 820px) {
    .if-assign__rows li { grid-template-columns: 77px 24px minmax(0, 1fr); row-gap: 6px; padding: 8px 10px; }
    .if-assign__today:empty { display: none; }
    .if-assign__banks, .if-assign__done { grid-column: 1 / -1; }
}

/* ---------- Team → Strategie (icefighter-strategie.jpg) ---------- */
.if-strat { display: grid; grid-template-columns: minmax(0, 493fr) minmax(0, 489fr) minmax(0, 370fr); gap: 18px; align-items: stretch; }
.if-strat [hidden] { display: none !important; }
.if-strat .if-card { padding: 6px 16px 10px; }
h2.if-strat__title { display: flex; align-items: center; gap: 14px; margin: 0 -1px; padding: 7px 0 9px; border-bottom: 1px solid #E6ECF2;
    font: 600 18.5px/1.1 var(--if-font-head); text-transform: uppercase; letter-spacing: .01em; color: var(--if-navy); }
h2.if-strat__title .if-icon { flex: none; width: 28px; height: 28px; color: var(--if-navy); }
.if-strat__row { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 0 16px; align-items: start; min-height: 94px; padding: 7px 0 3px; border-bottom: 1px solid #E6ECF2; box-sizing: border-box; }
.if-strat__row:last-child { border-bottom: 0; }
.if-strat__icon .if-icon { display: block; width: 32px; height: 32px; margin-top: 0; color: var(--if-navy); }
label.if-strat__name { position: relative; z-index: 1; display: inline-block; margin: 0; font: 600 17px/1.1 var(--if-font-head); text-transform: uppercase; letter-spacing: .01em; color: var(--if-navy); }
label.if-strat__name b { margin-left: 10px; font-weight: 500; color: #2A4E86; font-variant-numeric: tabular-nums; }
.if-strat__slider { position: relative; height: 39px; margin: 0 2px; }
.if-strat__track { position: absolute; left: 0; right: 0; bottom: 8px; height: 4px; border-radius: 2px; background: #E2E9F1; box-shadow: inset 0 0 0 1px #D8E1EB; }
.if-strat__track::before, .if-strat__track::after { content: ''; position: absolute; top: -2px; width: 1px; height: 8px; background: #C9D4E0; }
.if-strat__track::before { left: 0; }
.if-strat__track::after { right: 0; }
.if-strat__slider::before { content: ''; position: absolute; left: 50%; bottom: 6px; width: 1px; height: 8px; background: #C9D4E0; }
/* fill from 0 to the knob */
.if-strat__fill { position: absolute; top: -1px; bottom: -1px; border-radius: 3px; background: #6BBDE9;
    left: min(50%, var(--p)); right: calc(100% - max(50%, var(--p))); }
.if-strat__bubble { position: absolute; bottom: 24px; left: var(--p); transform: translateX(-50%); min-width: 24px; padding: 2px 7px; border-radius: 4px;
    background: var(--if-eisblau); color: #fff; font: 600 12.5px/1.15 var(--if-font-head); text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
.if-strat__bubble::after { content: ''; position: absolute; left: 50%; bottom: -4px; margin-left: -4px; border: 4px solid transparent; border-bottom: 0; border-top-color: var(--if-eisblau); }
.if-strat__slider input { position: absolute; left: -9.5px; bottom: 0; width: calc(100% + 19px); height: 20px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
/* the input is a knob wider than the track, so the knob centre meets the track ends */
.if-strat__slider input::-webkit-slider-runnable-track { height: 20px; background: transparent; }
.if-strat__slider input::-moz-range-track { height: 20px; background: transparent; }
.if-strat__slider input::-webkit-slider-thumb { -webkit-appearance: none; width: 19px; height: 19px; margin-top: .5px; border: 2px solid var(--if-eisblau); border-radius: 50%; box-sizing: border-box;
    background: radial-gradient(circle, var(--if-red) 0 2.5px, #fff 3px); box-shadow: 0 1px 3px rgba(13, 27, 58, .25); }
.if-strat__slider input::-moz-range-thumb { width: 19px; height: 19px; border: 2px solid var(--if-eisblau); border-radius: 50%; box-sizing: border-box;
    background: radial-gradient(circle, var(--if-red) 0 2.5px, #fff 3px); box-shadow: 0 1px 3px rgba(13, 27, 58, .25); }
.if-strat__slider input:focus-visible { outline: none; }
.if-strat__slider input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgba(63, 169, 224, .4); }
.if-strat__slider input:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px rgba(63, 169, 224, .4); }
.if-strat__scale { display: grid; grid-template-columns: 1fr auto 1fr; margin: 1px 0 0; font: 400 10px/1.2 var(--if-font-body); color: var(--if-navy); }
.if-strat__scale span:nth-child(2) { text-align: center; }
.if-strat__scale span:last-child { text-align: right; }
p.if-strat__hint { margin: 2px 0 0; font: 400 9.8px/1.25 var(--if-font-body); color: #3D5070; }
.if-strat__side { display: flex; flex-direction: column; gap: 18px; }
.if-strat__banks { padding-bottom: 16px !important; }
.if-strat__banks h2.if-strat__title { border-bottom: 0; padding-bottom: 6px; }
.if-strat__banklist { margin: 0 0 13px; padding: 0; list-style: none; }
.if-strat__banklist label { position: relative; display: flex; align-items: center; gap: 0; height: 31px; padding: 0 10px 0 9px; border-radius: 4px; cursor: pointer; }
.if-strat__banklist li.is-loaded label { background: #EAF1F8; }
.if-strat__banklist input { position: absolute; opacity: 0; pointer-events: none; }
.if-strat__radio { flex: none; width: 19px; height: 19px; margin-right: 18px; border: 1.5px solid #2E4C7C; border-radius: 50%; box-sizing: border-box; background: #fff; }
.if-strat__banklist input:checked ~ .if-strat__radio { border: 0; background: radial-gradient(circle, #2D8FD8 0 5.5px, #fff 6px 7px, #2D8FD8 7.5px); }
.if-strat__banklist li.is-loaded .if-strat__radio { border: 0; background: none; }
.if-strat__radio .if-icon { display: block; width: 21px; height: 21px; margin: -1px; color: var(--if-green); }
.if-strat__banklist input:focus-visible ~ .if-strat__radio { outline: 2px solid var(--if-eisblau); outline-offset: 2px; }
.if-strat__bankname { font: 600 17px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .01em; color: var(--if-navy); }
.if-strat__banklist small { margin-left: 22px; font: 400 10.5px/1 var(--if-font-body); color: #5B6B85; }
.if-strat__banklist li.is-locked label { cursor: default; }
.if-strat__banklist li.is-locked .if-strat__radio { border-color: var(--if-disabled); }
.if-strat__banklock { display: inline-flex; align-items: center; gap: 4px; margin-left: 16px; color: var(--if-gold); font: 700 10px/1 var(--if-font-head); text-transform: uppercase; }
.if-strat__banklock .if-icon { width: 12px; height: 12px; }
p.if-strat__error { margin: -6px 0 9px; font-size: 11px; color: var(--if-red); }
.if-strat__load, .if-strat__store { min-height: 30px; margin: 0 4px; width: calc(100% - 8px) !important; padding: 0 8px; font: 600 14.8px/1 var(--if-font-head); }
.if-strat__store { margin-top: 13px; box-shadow: inset 0 0 0 1.5px var(--if-navy); }
.if-strat__info { flex: 1; }
.if-strat__info h2.if-strat__title { font-size: 17px; gap: 18px; }
.if-strat__info h2.if-strat__title .if-icon { width: 25px; height: 25px; }
.if-strat__info p { margin: 10px 0 0; font: 400 13.3px/1.4 var(--if-font-body); color: var(--if-navy); max-width: 290px; }

/* premium page: tag next to the title in the hero (icefighter-team-statistik-verein.jpg) */
.if-hero__premium { margin: -14px 0 0 16px; }
.if-hero__premium .if-premium__tag { height: 27px; padding: 0 13px 0 10px; gap: 6px; border-width: 2px; border-radius: 14px; font-size: 16px; letter-spacing: .03em; background: rgba(255, 255, 255, .85); }
.if-hero__premium .if-premium__tag .if-icon { width: 15px; height: 15px; }
.if-hero__premium .if-premium__lock { width: 36px; height: 36px; border-width: 2px; }
.if-hero__premium .if-premium__lock .if-icon { width: 18px; height: 18px; }
.if-hero__premium .if-premium { gap: 10px; }

/* ---------- Team → Statistik: Spieler-Statistik (icefighter-statistik.jpg) ---------- */
/* free club tab and the forecast of the upgrade page (premium package D) */
.if-verein.if-verein--frei { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 18px; }
@media (max-width: 640px) { .if-verein.if-verein--frei { grid-template-columns: 1fr; } }
.if-verein__today { padding-bottom: 22px; }
.if-verein__big { display: block; margin-top: 14px; font: 800 34px/1.1 var(--if-font-head); color: var(--if-navy); }
.if-verein__big.is-neg { color: var(--if-red); }
.if-verein__big small { font: 500 15px/1 var(--if-font-body); color: var(--if-muted); }
.if-verein__sub { margin: 6px 0 0; color: var(--if-muted); }
.if-aufab__prog { display: inline-flex; align-items: center; gap: 2px; margin-left: 6px; font-size: 11px; font-weight: 600; color: var(--if-muted); }
.if-aufab__prog .if-icon { width: 12px; height: 12px; }
.if-aufab__prog.is-ok { color: var(--if-green); }
.if-aufab__legend .is-prog .if-icon { width: 14px; height: 14px; }
.if-stat__filter { display: flex; flex-wrap: wrap; gap: 11px; margin: 0 0 18px 17px; }
.if-stat__chip { display: inline-flex; align-items: center; justify-content: center; min-width: 100px; height: 29px; padding: 0 22px; border-radius: 15px; box-sizing: border-box;
    box-shadow: inset 0 0 0 1.5px var(--if-navy); background: #fff; color: var(--if-navy) !important; text-decoration: none !important;
    font: 600 12.5px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .04em; }
.if-stat__chip:hover { background: var(--if-frost); }
.if-stat__chip.is-active { background: var(--if-navy); color: #fff !important; min-width: 109px; }
.if-stat__card { padding: 4px 16px 6px !important; }
.if-stat__players { width: 100%; border-collapse: collapse; table-layout: fixed; }
.if-stat__c-photo { width: 47px; } .if-stat__c-rank { width: 30px; } .if-stat__c-name { width: 192px; } .if-stat__c-pos { width: 92px; }
.if-stat__c-games { width: 198px; } .if-stat__c-goals { width: 220px; } .if-stat__c-bullys { width: 211px; } .if-stat__c-strafe { width: 219px; }
.if-stat__players th { height: 33px; padding: 0; border-bottom: 1px solid var(--if-line); text-align: left; vertical-align: middle; }
.if-stat__players th a { display: inline-flex; align-items: center; gap: 6px; color: var(--if-navy) !important; text-decoration: none !important; font: 600 12.5px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .04em; }
.if-stat__players th:nth-child(2) a { padding-left: 17px; }
.if-stat__players th a:hover { color: var(--if-eisblau-dark) !important; }
.if-stat__sorted { width: 11px; height: 11px; color: var(--if-red); }
.if-stat__players td { height: 36px; padding: 0; border-bottom: 1px solid #E6ECF2; vertical-align: middle; }
.if-stat__players tbody tr:last-child td { border-bottom: 0; }
.if-stat__players tbody tr:hover td { background: var(--if-row-hover); }
.if-stat__photo img, .if-stat__photo .if-photo--none { display: block; width: 30px; height: 30px; margin-left: 2px; border-radius: 3px; object-fit: cover; }
.if-stat__photo .if-photo--none { display: grid; place-items: center; background: #DCE3EC; color: #A3B0C2; }
.if-stat__photo .if-photo--none .if-icon { width: 22px; height: 22px; }
.if-stat__rank { text-align: center; font: 700 15px/1 var(--if-font-head); color: var(--if-red); }
.if-stat__name { padding-left: 5px !important; font: 500 15px/1.1 var(--if-font-head); color: var(--if-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.if-stat__pos .if-posbadge { min-width: 35px; height: 16px; font-size: 11.5px; }
.if-stat__val b { display: block; margin: 0 0 3px; font: 600 12px/1 var(--if-font-head); color: var(--if-navy); font-variant-numeric: tabular-nums; }
.if-stat__val.is-none { padding-left: 4px !important; color: var(--if-navy); }
.if-stat__bar { display: block; width: 150px; max-width: calc(100% - 12px); height: 4px; border-radius: 2px; background: #E4EAF1; overflow: hidden; }
.if-stat__bar span { display: block; height: 100%; min-width: 2px; border-radius: 2px; background: #45A8E2; }
.if-stat__players td:last-child .if-stat__bar { width: 124px; }
.if-stat__empty { padding: 20px !important; text-align: center; color: var(--if-muted); }

/* ---------- Team → Statistik: Verein (icefighter-team-statistik-verein.jpg) ---------- */
.if-verein { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; align-items: stretch; }
.if-verein__card { display: flex; flex-direction: column; padding: 12px 16px 12px !important; }
h2.if-verein__title { display: flex; align-items: center; gap: 16px; margin: 0 0 8px 2px; font: 700 21px/1.1 var(--if-font-head); text-transform: uppercase; color: var(--if-navy); }
h2.if-verein__title .if-icon { flex: none; width: 29px; height: 29px; color: var(--if-navy); }
.if-verein__legend { display: flex; gap: 18px; margin-left: auto; font: 500 10.5px/1 var(--if-font-head); text-transform: uppercase; color: var(--if-navy); }
.if-verein__legend span { display: inline-flex; align-items: center; gap: 6px; }
.if-verein__legend .is-bar::before { content: ''; width: 9px; height: 9px; background: var(--if-navy); }
.if-verein__legend .is-line::before { content: ''; width: 22px; height: 2px; background: #45A8E2; box-shadow: 0 0 0 0 #45A8E2; border-radius: 1px;
    background-image: radial-gradient(circle, #fff 0 2px, #45A8E2 2.5px 4px, transparent 4.5px); background-size: 9px 9px; background-repeat: no-repeat; background-position: center; height: 9px; background-color: transparent;
    -webkit-mask: none; }
.if-verein__legend .is-line { position: relative; }
.if-chart { display: block; width: 100%; height: auto; margin: 0 0 12px; overflow: visible; }
.if-chart text { font: 400 10px var(--if-font-body); fill: var(--if-navy); }
.if-chart .if-chart__ylabel { font-size: 10.5px; }
.if-chart__grid { stroke: #E6ECF2; stroke-width: 1; }
.if-chart__axis { stroke: #C9D4E0; stroke-width: 1; }
.if-chart__area { fill: url(#if-chart-fill); }
.if-chart__line { fill: none; stroke: #2E9BDB; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.if-chart__mark { fill: #fff; stroke: #2E9BDB; stroke-width: 1.5; }
.if-chart__last { fill: var(--if-navy); }
.if-chart__bar { fill: var(--if-navy); }
.if-chart__callout { fill: var(--if-navy); }
.if-chart .if-chart__callout-text { font: 600 11.5px var(--if-font-head); fill: #fff; }
.if-chart .if-chart__empty { font-size: 13px; fill: var(--if-muted); }
.if-verein__table { width: 100%; border-collapse: collapse; font-size: 13px; color: var(--if-navy); }
.if-verein__table th { height: 24px; padding: 0 16px; background: #EEF3F9; text-align: left; font: 600 12px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .02em; }
.if-verein__table td { height: 23px; padding: 0 16px; border-bottom: 1px solid #E6ECF2; }
.if-verein__table th:last-child, .if-verein__table td:last-child { text-align: right; }
.if-verein__table td:last-child { font-weight: 700; font-variant-numeric: tabular-nums; }
.if-verein__table th:nth-child(2):not(:last-child), .if-verein__table td:nth-child(2):not(:last-child) { text-align: center; }
.if-verein__table tr.is-more { display: none; }
.if-verein__card.is-open .if-verein__table tr.is-more { display: table-row; }
.if-verein__more { display: flex; justify-content: center; align-items: center; height: 21px; margin-top: auto; border: 0; border-radius: 0 0 4px 4px; background: #F3F6FA; color: #5B7294; cursor: pointer; }
.if-verein__table + .if-verein__more { margin-top: 8px; }
.if-verein__more .if-icon { width: 15px; height: 15px; transition: transform .15s; }
.if-verein__card.is-open .if-verein__more .if-icon { transform: rotate(180deg); }
.if-verein__more.is-static { cursor: default; }

/* ---------- Team → Statistik: Auf-/Abwertung (icefighter-team-statistik-auf-abwertungen.jpg) ---------- */
.if-aufab__info { display: flex; align-items: center; gap: 20px; height: 31px; margin: 0 -10px 8px; padding: 0 30px 0 16px; border-radius: 4px; background: rgba(255, 255, 255, .8); box-shadow: var(--if-shadow); }
.if-aufab__info p { display: flex; align-items: center; gap: 15px; margin: 0; font-size: 13px; color: var(--if-navy); }
.if-aufab__info p .if-icon { width: 20px; height: 20px; color: #3D8FD6; }
.if-aufab__legend { display: flex; gap: 30px; margin: 0 0 0 auto; padding: 0; list-style: none; font: 500 12px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .03em; color: var(--if-navy); }
.if-aufab__legend li { display: inline-flex; align-items: center; gap: 12px; }
.if-aufab__legend li.is-ok::before, .if-aufab__legend li.is-no::before { content: ''; width: 20px; height: 20px; border-radius: 3px; background: #DDF2E5; }
.if-aufab__legend li.is-no::before { background: #FBE3E4; }
.if-aufab__legend li.is-down .if-icon { width: 14px; height: 14px; color: var(--if-red); }
.if-aufab__card { margin: 0 -10px; padding: 2px 0 6px !important; overflow-x: auto; }
.if-aufab { width: 100%; min-width: 1100px; border-collapse: collapse; table-layout: fixed; color: var(--if-navy); }
.if-aufab col.if-aufab__c-name { width: 445px; }
.if-aufab col.if-aufab__c-num { width: 56px; }
.if-aufab col.if-aufab__c-st { width: 61px; }
.if-aufab col.if-aufab__c-ereignisse { width: 100px; } .if-aufab col.if-aufab__c-konto { width: 114px; } .if-aufab col.if-aufab__c-siege { width: 149px; }
.if-aufab col.if-aufab__c-vertrag { width: 100px; } .if-aufab col.if-aufab__c-alter { width: 86px; }
.if-aufab thead th { height: 34px; padding: 0 4px; border-bottom: 1px solid var(--if-line); text-align: center; font: 600 12px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .03em; }
.if-aufab thead th:first-child { padding-left: 45px; text-align: left; }
.if-aufab thead th + th { border-left: 1px solid #E6ECF2; }
.if-aufab abbr { text-decoration: none; }
.if-aufab__head th { height: 20px; padding: 0; border-bottom: 1px solid #E1E8F0; background: #F3F6FA; text-align: left; font-weight: 400; }
.if-aufab__toggle { display: flex; align-items: center; gap: 0; width: 100%; height: 20px; padding: 0 0 0 16px; border: 0; background: none; color: var(--if-navy); font: inherit; cursor: pointer; text-align: left; }
.if-aufab__toggle .if-icon { width: 14px; height: 14px; margin-right: 15px; transition: transform .15s; }
.if-aufab__toggle.is-empty { cursor: default; }
.if-aufab__group:not(.is-open) .if-aufab__toggle:not(.is-empty) .if-icon { transform: rotate(-90deg); }
.if-aufab__group:not(.is-open) .if-aufab__row { display: none; }
.if-aufab__level { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 15px; margin-right: 20px; border-radius: 8px; background: var(--if-navy); color: #fff; font: 600 11.5px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .02em; }
.if-aufab__text { font-size: 12px; color: #4B5D78; }
.if-aufab__row td { height: 22px; padding: 0 4px; border-bottom: 1px solid #E6ECF2; text-align: center; font-size: 13px; font-variant-numeric: tabular-nums; }
.if-aufab__row td + td { border-left: 1px solid #EDF1F6; }
.if-aufab__name { text-align: left !important; padding-left: 77px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.if-aufab__name img, .if-aufab__name .if-photo--none { display: inline-block; width: 26px; height: 21px; margin-right: 15px; vertical-align: middle; border-radius: 2px; object-fit: cover; }
.if-aufab__name .if-photo--none { display: inline-grid; place-items: center; background: #DCE3EC; color: #A3B0C2; }
.if-aufab__name .if-photo--none .if-icon { width: 16px; height: 16px; }
.if-aufab__name > span { vertical-align: middle; font: 500 15px/1 var(--if-font-head); }
.if-aufab__name small { font: 400 11px/1 var(--if-font-body); color: var(--if-muted); }
.if-aufab__st { font-weight: 600; }
.if-aufab__c.is-ok { background: #E3F4E9; color: #1E8F50; }
.if-aufab__c.is-no { background: #FCE7E8; color: #D3343C; }
.if-aufab__c .if-icon { width: 17px; height: 17px; vertical-align: -3px; }
.if-aufab__c.is-bool { background: none; }
.if-aufab__c.is-ok .if-icon { color: #178A43; }
.if-aufab__c.is-no .if-icon { color: #D3343C; }
.if-aufab__c .if-aufab__down { width: 11px; height: 11px; margin-left: 2px; vertical-align: -1px; color: var(--if-red); stroke-width: 2.6; }
.if-aufab__c.is-down { font-weight: 700; }

/* ---------- Premium pattern "Ganze Seite": blurred page, card on top ---------- */
.if-pagelock { position: relative; min-height: 440px; }
.if-pagelock__ghost { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; filter: blur(4px); opacity: .75; pointer-events: none; user-select: none; }
.if-pagelock__ghost .if-card { display: flex; flex-direction: column; gap: 14px; min-height: 420px; }
.if-pagelock__ghost b { display: block; width: 40%; height: 16px; border-radius: 3px; background: #C9D6E5; }
.if-pagelock__ghost u { display: block; height: 12px; border-radius: 3px; background: #DDE6F0; }
.if-pagelock__ghost u:nth-child(odd) { width: 86%; }
.if-pagelock__bars { display: flex; align-items: flex-end; gap: 10px; height: 150px; padding: 0 10px; border-bottom: 2px solid #DDE6F0; }
.if-pagelock__bars i { flex: 1; border-radius: 2px 2px 0 0; background: #8EC3EA; }
.if-pagelock__donut { align-self: center; width: 150px; height: 150px; border-radius: 50%; background: conic-gradient(#2E6FB8 0 30%, #5FA8E0 0 62%, #A9D0F0 0 82%, #E59AA0 0); -webkit-mask: radial-gradient(circle, transparent 42px, #000 43px); mask: radial-gradient(circle, transparent 42px, #000 43px); }
.if-pagelock__card { position: absolute; left: 50%; top: 70px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; width: 520px; max-width: calc(100% - 32px); padding: 22px 36px 30px; box-sizing: border-box;
    border-radius: 14px; background: #fff; box-shadow: var(--if-shadow-l); text-align: center; }
.if-pagelock__lock { display: grid; place-items: center; width: 72px; height: 72px; border: 3px solid var(--if-gold); border-radius: 50%; color: var(--if-navy); }
.if-pagelock__lock .if-icon { width: 34px; height: 34px; }
.if-pagelock__card .if-premium__tag { height: 32px; padding: 0 18px 0 14px; gap: 8px; border-width: 2px; border-radius: 16px; font-size: 18px; }
.if-pagelock__card .if-premium__tag .if-icon { width: 17px; height: 17px; }
.if-pagelock__card h2 { margin: 6px 0 0; font: 800 italic 34px/1 var(--if-font-head); text-transform: uppercase; color: var(--if-navy); }
.if-pagelock__card p { margin: 2px 0 0; font-size: 18px; line-height: 1.4; color: var(--if-navy); }

/* ---------- Settings (icefighter-settings.jpg, Team löschen: icefighter-ui-state-board-settings-team-loeschen.jpg) ---------- */
.if-set { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px 16px; align-items: stretch; }
.if-set__form { display: contents; }
.if-set__card { padding: 9px 16px 12px !important; }
h2.if-set__title { position: relative; display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding-bottom: 7px; font: 700 18.5px/1.1 var(--if-font-head); text-transform: uppercase; letter-spacing: .01em; color: var(--if-navy); }
h2.if-set__title::after { content: ''; position: absolute; left: 0; bottom: 0; width: 26px; height: 3px; background: var(--if-red); transform: skewX(-24deg); transform-origin: 0 100%; }
.if-set__field { margin: 0 0 9px; }
.if-set__label { display: block; margin: 0 0 5px; font: 600 12.5px/1.2 var(--if-font-head); text-transform: uppercase; letter-spacing: .04em; color: var(--if-navy); }
.if-set__input { position: relative; display: block; }
.if-set__input .if-input, .if-set__input .if-select { height: 27px; padding-left: 38px; border-width: 1px; border-color: #B9C6D6; border-radius: 3px; font-size: 13.5px; }
.if-set__input .if-select { padding-right: 34px; background-position: right 12px center; background-size: 16px; }
.if-set__input input[type="password"] { font-size: 18px; letter-spacing: .12em; }
.if-set__icon { position: absolute; left: 12px; top: 50%; width: 17px; height: 17px; margin-top: -8.5px; color: var(--if-navy); pointer-events: none; }
.if-set__input.if-password button { width: 34px; height: 23px; right: 3px; }
.if-set__input.if-password button .if-icon { width: 18px; height: 18px; }
.if-set__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.if-set__pair .if-set__field { margin-bottom: 9px; }
.if-set__hint { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 11px; color: #2E86C9; }
.if-set__hint .if-icon { flex: none; width: 13px; height: 13px; color: #3D9BE0; }
/* a new e-mail address that waits for its link */
.if-set__pending { display: flex; align-items: flex-start; gap: 8px; margin: -2px 0 10px; padding: 7px 10px; border-radius: 3px; background: #FFF5E0; box-shadow: inset 3px 0 0 #E8A23A; font-size: 12px; line-height: 1.4; color: var(--if-navy); overflow-wrap: anywhere; }
.if-set__pending > .if-icon { flex: none; width: 14px; height: 14px; margin-top: 1px; color: #C9821C; }
.if-set__pending-actions { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; }
.if-set__pending .if-link { font-size: 13px; }
.if-set__rules { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 4px 0 6px; padding: 0; list-style: none; font-size: 11.5px; color: #7D8CA3; }
.if-set__rules li { display: inline-flex; align-items: center; gap: 6px; }
.if-set__rules .if-icon { width: 14px; height: 14px; color: #B7C2D0; }
.if-set__rules li.is-ok { color: var(--if-navy); }
.if-set__rules li.is-ok .if-icon { color: #1E9A55; }
.if-set__rules + .if-set__hint { margin: 0; font-size: 10.5px; white-space: nowrap; }
.if-set__options { margin: -4px 0 0; padding: 0; list-style: none; }
.if-set__options li { display: flex; align-items: center; gap: 10px; min-height: 47px; border-bottom: 1px solid #E6ECF2; }
.if-set__options li:last-child { border-bottom: 0; }
.if-set__options label { flex: 1 1 auto; font-size: 14px; color: var(--if-navy); cursor: pointer; }
.if-set__opticon { flex: none; width: 21px; height: 21px; margin-right: 10px; color: #3D7FC1; }
.if-set__options .if-premium { flex: none; margin-right: auto; }
.if-set__options li.is-locked label { flex: none; cursor: default; }
.if-set__options .if-toggle input { width: 50px; height: 26px; border-radius: 13px; background: #C9D2DD; }
.if-set__options .if-toggle input::after { top: 3px; left: 3px; width: 20px; height: 20px; }
.if-set__options .if-toggle input:checked { background: #3D9BE0; }
.if-set__options .if-toggle input:checked::after { left: 27px; }
.if-set__options .if-toggle input:disabled { background: #D9DFE7; cursor: default; }
/* Teamlogo */
.if-set__logo form { display: flex; flex-direction: column; height: 100%; }
.if-set__logo h2.if-set__title { margin-bottom: 11px; }
.if-set__logo .if-set__hint { margin: 0 0 6px; }
.if-set__logobox { display: flex; align-items: flex-start; gap: 28px; }
.if-set__logo-current { display: grid; place-items: center; flex: none; width: 100px; height: 100px; }
.if-set__logo-current img { display: block; width: 100px; height: 100px; object-fit: contain; }
.if-set__logo-new { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-left: 20px; }
.if-set__logo-new .if-btn { min-height: 24px; padding: 0 16px; font-size: 12.5px; letter-spacing: .04em; box-shadow: inset 0 -2px 0 var(--if-red); }
.if-set__logo-preview { display: grid; place-items: center; width: 64px; height: 64px; }
.if-set__logo-preview img { display: block; width: 64px; height: 64px; object-fit: contain; }
.if-set__logo-preview [hidden] { display: none !important; }
.if-set__logo-preview .if-photo--none { display: grid; place-items: center; width: 64px; height: 64px; border: 1.5px dashed #C3CFDD; border-radius: 4px; color: #A3B0C2; }
.if-set__logo-preview .if-photo--none .if-icon { width: 26px; height: 26px; }
.if-set__logo-ask { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 6px; }
.if-set__logo-ask p { flex: 1 1 auto; margin: 0; font-size: 11.5px; color: #2E86C9; }
.if-set__logo-ask .if-btn { min-height: 24px; width: 94px; padding: 0; font-size: 12.5px; letter-spacing: .04em; }
.if-set__logo-ask .if-btn:not(.if-btn--outline) { box-shadow: inset 0 -2px 0 var(--if-red); }
.if-set__logo-ask .if-btn--outline { box-shadow: inset 0 0 0 1px var(--if-navy); }
.if-set__logo.is-locked .if-set__logobox, .if-set__logo.is-locked .if-set__hint { opacity: .5; filter: grayscale(1); }
.if-set__locked { margin: auto 0 0; padding-top: 6px; font-size: 13px; color: var(--if-muted); }
/* Team löschen */
.if-set__alert { display: flex; gap: 16px; padding: 11px 16px 12px; border-left: 4px solid #E26A70; border-radius: 3px; background: #FDF1F2; box-shadow: inset 0 0 0 1px #F2C4C7; font-size: 12.5px; line-height: 1.45; color: var(--if-navy); }
.if-set__alert > .if-icon { flex: none; width: 22px; height: 22px; margin: 2px 0 0 8px; color: var(--if-red); }
.if-set__alert p { margin: 0 0 8px; }
.if-set__alert p:last-child { margin-bottom: 0; }
.if-set__alert--done { border-left-color: #9DABBE; background: #F1F4F8; box-shadow: inset 0 0 0 1px #DCE3EC; }
.if-set__alert--done > .if-icon { color: var(--if-navy); }
.if-set__alert--done + form, .if-set__alert + form { margin-top: 12px; }
.if-set__deletebtn { min-height: 26px; padding: 0 36px; font-size: 12.5px; letter-spacing: .04em; }
.if-set__alert .if-set__deletebtn { margin-top: 2px; }
.if-set__code .if-set__label { margin-bottom: 8px; }
.if-set__codeboxes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.if-set__codeboxes .if-input { height: 36px; padding: 0; text-align: center; font: 600 20px/1 var(--if-font-head); letter-spacing: .14em; color: var(--if-navy); }
.if-set__valid { display: flex; align-items: center; gap: 8px; margin: 8px 0 10px; font-size: 12px; color: #2E86C9; }
.if-set__valid .if-icon { width: 15px; height: 15px; }
.if-set__delete .if-btn--block { min-height: 28px; font-size: 13px; letter-spacing: .04em; }
.if-set__delete form + form { margin-top: 8px; }
.if-set__cancel { margin-top: 2px; font-size: 14px; }
/* Account-Reset (www/include/teamReset.inc.php) */
p.if-set__reset-lead { margin: 0 0 10px; font-size: 13px; line-height: 1.45; color: var(--if-navy); }
.if-set__reset-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 10px; }
.if-set__reset-lists > div { padding: 8px 10px 9px; border-radius: 3px; background: #F1F4F8; box-shadow: inset 0 0 0 1px #DCE3EC; }
.if-set__reset-lists h3 { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; font: 700 12.5px/1.2 var(--if-font-head); text-transform: uppercase; letter-spacing: .04em; color: var(--if-navy); }
.if-set__reset-lists h3 .if-icon { width: 15px; height: 15px; color: var(--if-red); }
.if-set__reset-lists > div + div h3 .if-icon { color: #1E9A55; }
.if-set__reset-lists p { margin: 0; font-size: 11.5px; line-height: 1.45; color: #4A5A72; }
p.if-set__reset-price { display: flex; gap: 8px; margin: 0 0 12px; font-size: 12px; line-height: 1.45; color: #2E86C9; }
p.if-set__reset-price .if-icon { flex: none; width: 16px; height: 16px; margin-top: 1px; color: #3D9BE0; }
p.if-set__reset-price.is-paid { color: var(--if-navy); }
p.if-set__reset-price.is-paid .if-icon { color: var(--if-red); }
.if-set__reset-check { align-items: flex-start; margin: 2px 0 10px; font-size: 12.5px; line-height: 1.4; color: var(--if-navy); }
.if-set__reset-check input { width: 18px; height: 18px; }
.if-set__reset .if-set__alert + form, .if-set__reset .if-set__alert { margin-top: 0; }
@media (max-width: 560px) { .if-set__reset-lists { grid-template-columns: 1fr; } }
/* Zwei-Faktor-Anmeldung (www/include/if2.zweifaktor.inc.php) */
.if-set__zf-state { margin-left: 8px; padding: 2px 8px; border-radius: 10px; background: #F1F4F8; font: 700 11px/1.4 var(--if-font-head); letter-spacing: .06em; color: #7D8CA3; vertical-align: middle; }
.if-set__zf-state.is-on { background: #E3F4EA; color: #1E9A55; }
p.if-set__zf-lead { margin: 0 0 10px; font-size: 13px; line-height: 1.45; color: var(--if-navy); }
.if-set__zf-form { margin: 0 0 12px; }
.if-set__zf-form .if-btn { margin-top: 4px; }
ol.if-set__zf-steps { margin: 0 0 12px; padding-left: 18px; font-size: 12.5px; line-height: 1.45; color: var(--if-navy); }
.if-set__zf-setup { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 16px; align-items: start; }
.if-set__zf-qr { width: 168px; height: 168px; padding: 8px; border-radius: 4px; background: #fff; box-shadow: inset 0 0 0 1px #DCE3EC; }
.if-set__zf-qr svg { display: block; width: 100%; height: 100%; }
p.if-set__zf-key { margin: 0 0 10px; font-size: 12px; color: #4A5A72; }
p.if-set__zf-key code { font-size: 13px; letter-spacing: .06em; color: var(--if-navy); word-break: break-all; }
.if-set__zf-codes { margin: 0 0 12px; padding: 10px 12px; border-radius: 3px; background: #FFF6E5; box-shadow: inset 0 0 0 1px #F3D29B; }
.if-set__zf-codes p { margin: 0 0 8px; font-size: 12px; line-height: 1.45; color: #6B3D00; }
.if-set__zf-codes ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; margin: 0; padding: 0; list-style: none; }
.if-set__zf-codes code { font: 600 14px/1.5 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .06em; color: var(--if-navy); }
@media (max-width: 560px) { .if-set__zf-setup { grid-template-columns: 1fr; } }
/* save bar: only while something is changed (js/if2-settings.js), sticks to the bottom of the window */
.if-set__submit { position: sticky; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 40; grid-column: 1 / -1; display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 10px 14px 10px 20px; border-radius: 4px; background: #fff; box-shadow: 0 0 0 1px rgba(13, 27, 58, .08), 0 10px 32px rgba(13, 27, 58, .26), inset 4px 0 0 var(--if-red); animation: if-set-save-in .22s ease-out; }
.if-set__submit[hidden] { display: none; }
p.if-set__submit-note { display: flex; align-items: center; gap: 10px; margin: 0 auto 0 0; font: 600 15px/1.2 var(--if-font-head); text-transform: uppercase; letter-spacing: .03em; color: var(--if-navy); }
.if-set__submit-note .if-icon { flex: none; width: 18px; height: 18px; color: var(--if-red); }
.if-set__submit .if-btn { min-height: 34px; padding: 0 20px; font-size: 14.5px; letter-spacing: .04em; }
.if-set__submit .if-btn .if-icon { width: 17px; height: 17px; }
@keyframes if-set-save-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
/* the back-to-top button goes above the bar */
.if-set-dirty .if-totop { bottom: calc(max(16px, env(safe-area-inset-bottom)) + 66px); }
@media (max-width: 640px) {
    .if-set__submit { flex-wrap: wrap; gap: 10px; bottom: max(10px, env(safe-area-inset-bottom)); padding: 10px 12px 12px 16px; }
    p.if-set__submit-note { flex: 1 1 100%; font-size: 14px; }
    .if-set__submit .if-btn { flex: 1 1 0; padding: 0 12px; }
    .if-set-dirty .if-totop { bottom: calc(max(10px, env(safe-area-inset-bottom)) + 116px); }
}

/* ---------- Overlays with the title in the picture: Sofort-Hilfe, Willkommen (icefighter-sofort-hilfe-overlay.jpg, icefighter-willkommen-overlay.jpg) ---------- */
.if-overlay__img--title { position: relative; display: flex; align-items: center; padding: 0 22px; }
.if-overlay__img--title::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255, 255, 255, .96) 0, rgba(255, 255, 255, .8) 30%, rgba(255, 255, 255, 0) 55%); }
.if-overlay__img--title .if-overlay__title { position: relative; margin: 0; color: var(--if-navy); }
.if-overlay--hint .if-overlay__close { top: 14px; right: 26px; width: 30px; height: 30px; }
.if-overlay--hint .if-overlay__close .if-icon { width: 17px; height: 17px; }
.if-help { max-width: 642px; }
.if-help .if-overlay__img { height: 150px; }
.if-help .if-overlay__title { font-size: 46px !important; padding-bottom: 14px; }
.if-help .if-overlay__body { padding: 18px 21px 20px; }
.if-help__lead { margin: 0 0 12px; font: 500 17px/1.3 var(--if-font-body); color: var(--if-navy); }
.if-help__tips { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.if-help__tips a { display: flex; align-items: center; gap: 24px; min-height: 76px; padding: 0 20px; border-left: 4px solid #E9545C; border-radius: 4px; background: #EEF3FA; color: var(--if-navy) !important; text-decoration: none !important; font: 600 15px/1.35 var(--if-font-body); transition: background .15s; }
.if-help__tips .is-blue a { border-left-color: #3D8FD6; }
.if-help__tips a:hover { background: #E3EBF6; }
.if-help__icon { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border: 2px solid currentColor; border-radius: 50%; color: #E1252F; }
.if-help__tips .is-blue .if-help__icon { color: #2E7FCB; }
.if-help__icon .if-icon { width: 28px; height: 28px; }
.if-help__none { display: flex; align-items: center; gap: 12px; margin: 0; padding: 20px; border-radius: 4px; background: #E9F6EE; font-weight: 600; color: var(--if-navy); }
.if-help__none .if-icon { width: 26px; height: 26px; color: #1E9A55; }
.if-help__foot { display: flex; align-items: center; gap: 16px; margin-top: 20px; }
.if-help__foot .if-check { flex: 1 1 auto; gap: 14px; font-size: 14px; color: var(--if-navy); }
.if-help__foot .if-check input { width: 22px; height: 22px; }
.if-help__close { min-height: 44px; min-width: 176px; font-size: 18px; box-shadow: inset 0 -3px 0 var(--if-red); }
.if-welcome { max-width: 829px; }
.if-welcome .if-overlay__img { height: 205px; }
.if-welcome .if-overlay__img--title::before { background: linear-gradient(90deg, rgba(255, 255, 255, .92) 0, rgba(255, 255, 255, .55) 28%, rgba(255, 255, 255, 0) 45%); }
.if-welcome__title { font: 800 italic 56px/1 var(--if-font-head) !important; transform: rotate(-4deg); transform-origin: 0 50%; margin-top: -6px !important; padding-bottom: 16px !important; }
.if-welcome__title::before { width: 250px !important; height: 5px !important; bottom: 6px !important; }
.if-welcome__title::after { width: 240px !important; height: 4px !important; }
.if-welcome .if-overlay__body { padding: 24px 26px 22px; }
.if-welcome__lead { margin: 0 0 22px; font: 700 27px/1.15 var(--if-font-head); color: var(--if-navy); }
.if-welcome__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; margin: 0; padding: 0; list-style: none; }
.if-welcome__cards li { display: flex; flex-direction: column; align-items: center; min-height: 230px; padding: 19px 22px 18px; border-top: 3px solid #45A8E2; border-radius: 3px; background: #EEF4FA; box-shadow: inset 0 0 0 1px #D9E4EF; text-align: center; }
.if-welcome__icon { display: grid; place-items: center; width: 84px; height: 84px; margin-bottom: 18px; border: 2px solid #2E8FD8; border-radius: 50%; background: #fff; color: var(--if-navy); }
.if-welcome__icon .if-icon { width: 46px; height: 46px; }
.if-welcome__cards b { margin-bottom: 10px; font: 700 20px/1.1 var(--if-font-head); text-transform: uppercase; color: var(--if-navy); }
.if-welcome__cards li > span:not(.if-welcome__icon) { font-size: 14px; line-height: 1.4; color: var(--if-navy); }
.if-welcome__more { display: inline-flex; align-items: center; gap: 2px; margin-top: auto; padding-top: 12px; font: 700 15px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .05em; color: var(--if-eisblau-dark) !important; text-decoration: none !important; }
.if-welcome__more:hover { color: var(--if-red) !important; }
.if-welcome__more .if-icon { width: 16px; height: 16px; }
.if-welcome__foot { display: flex; align-items: center; gap: 22px; margin-top: 22px; }
.if-welcome__foot p { display: flex; flex-direction: column; gap: 6px; margin: 0; font-size: 14px; color: var(--if-navy); }
.if-welcome__foot p b { font: 700 20px/1 var(--if-font-head); }
.if-welcome__logo { pointer-events: none; }
.if-welcome__logo img { height: 80px; margin: -12px 0; }
.if-welcome__go { min-height: 46px; min-width: 184px; margin-left: auto; font-size: 18px; box-shadow: inset 0 -3px 0 var(--if-red); }

/* Spion (icefighter-spion-overlay.jpg): overlay on every page, the card itself is in css/if2-liga.css */
.if-spyoverlay { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(13, 27, 58, .6); backdrop-filter: blur(4px); }
.if-spyoverlay__frame { width: min(1180px, 100%); height: min(920px, 100%); border: 0; border-radius: 6px; background: transparent; box-shadow: 0 20px 60px rgba(0, 0, 0, .35); }
/* team and manager names that open the club page (if2_manager_link) */
.if2 a.if-managerlink { color: inherit; text-decoration: underline; text-decoration-color: rgba(63, 169, 224, .55); text-underline-offset: 3px; }
.if2 a.if-managerlink:hover { color: var(--if-eisblau-dark); }
html.if-spy-open { overflow: hidden; }

/* ---------- Responsive (first pass; the designer delivers the mobile version) ---------- */
@media (max-width: 1280px) {
    :root { --if-gutter: 20px; }
    .if-stat { padding: 0 14px; font-size: 15px; }
    .if-stat--spar .if-stat__label { display: none; }
    .if-nav__link { padding: 0 20px; }
    .if-subnav__link { padding: 0 18px; }
    .if-kpi { padding: 2px 18px; }
    .if-bar__in { padding: 8px 40px; }
    .if-tab { padding: 0 20px; }
}
@media (max-width: 1060px) {
    .if-stat--season, .if-stat--spar { display: none; }
    .if-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .if-grid--main-side, .if-grid--3 { grid-template-columns: minmax(0, 1fr); }
    .if-bar__in { flex-wrap: wrap; }
    .if-bar__kpis { margin-left: 0; }
    .if-tabs-nav { flex-basis: 100%; }
}
@media (max-width: 640px) {
    .if-bar__kpis { flex-wrap: wrap; row-gap: 6px; }
}
@media (max-width: 480px) {
    /* little room: "Zum Spiel" as a square play button with the corners of the
       desktop button, the text only for screen readers */
    .if-nextcard--hero .if-live { box-sizing: border-box; width: 34px; height: 34px; padding: 0; justify-content: center; }
    .if-nextcard--hero .if-live .if-icon { width: 14px; height: 14px; margin-left: 2px; }
    .if-nextcard--hero .if-live__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    /* live: the play icon instead of the pulsing dot, the red glow stays */
    .if-nextcard--hero .if-live.is-live::before { display: none; }
    .if-nextcard--hero .if-live.is-live .if-icon { display: block; }
}
@media (max-width: 820px) {
    :root { --if-gutter: 16px; --if-hero-h: 120px; --if-topbar-h: 56px; }
    .if-logo img { height: 60px; margin: -2px 0; }
    .if-stat--money .if-stat__label, .if-next__what { display: none; }
    .if-next__text { min-width: 0; }
    .if-next__count { font-size: 20px; }
    .if-next .if-icon { display: none; }
    .if-topbar__in { overflow: hidden; }
    .if-stat { padding: 0 10px; }
    .if-stat--mail { padding: 0 12px; }
    .if-badge { left: 26px; }
    .if-next { flex: 1 1 auto; min-width: 0; padding: 0 0 0 10px; }
    .if-next__text { overflow: hidden; }
    .if-next__count--text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
    .if-burger { flex: none; }
    .if-banner__icon { width: 56px; padding-right: 12px; }
    .if-banner__text { font-size: 14px; padding: 12px 14px; }
    .if-burger { display: grid; place-items: center; width: 44px; height: 44px; margin-left: 6px; border: 0; background: none; color: var(--if-navy); cursor: pointer; }
    .if-burger .if-icon { width: 28px; height: 28px; }
    .if-nav { display: none; }
    .if-nav.is-open { display: block; }
    .if-nav__in { flex-direction: column; height: auto; padding: 8px 0 12px; }
    .if-nav__list { flex-direction: column; }
    .if-nav__list > li { display: block; }
    .if-nav__link { padding: 10px var(--if-gutter) !important; }
    .if-nav__link.is-active::before { display: none; }
    .if-nav__link.is-active::after { left: 0; right: auto; top: 0; width: 4px; height: auto; }
    .if-nav__drop { display: none !important; }
    /* phones: the card over the header picture, full width at the top; the
       picture grows and the title moves down, so they do not overlap */
    .if-burger { margin-left: auto; }
    .if-hero:not(.if-hero--tall) { --if-hero-h: 172px; }
    .if-hero:not(.if-hero--tall) .if-hero__in { align-items: flex-end; padding-bottom: 30px; }
    .if-hero--tall .if-hero__in { padding-top: 64px; }
    .if-nextcard--hero { top: 10px; left: var(--if-gutter); right: var(--if-gutter); width: auto; max-width: none; padding: 6px 10px; column-gap: 9px; }
    .if-nextcard--hero .if-nextcard__icon { width: 24px; height: 24px; }
    .if-nextcard--hero .if-nextcard__what { font-size: 11px; }
    .if-nextcard--hero .if-nextcard__count { font-size: 20px; }
    .if-nextcard--hero .if-nextcard__count--text { font-size: 13px; -webkit-line-clamp: 1; }
    /* the button to the right of time and match (not in a row of its own);
       on narrow phones only once the game runs */
    .if-nextcard--hero { grid-template-columns: auto minmax(0, 1fr) auto; }
    .if-nextcard--hero .if-live { grid-column: 3; grid-row: 1 / 3; margin: 0 0 0 6px; height: 30px; padding: 0 12px; font-size: 14px; }
    .if-hero__title { font-size: 42px; }
    .if-hero__logo { width: 60px; height: 60px; margin-right: 12px; }
    .if-hero__logo + .if-hero__title { font-size: clamp(22px, 7vw, 42px); }
    .if-hero::before { background: linear-gradient(90deg, var(--if-frost) 0%, rgba(238, 244, 250, .7) 45%, rgba(238, 244, 250, 0) 75%); }
    .if-hero__img { left: 0; }
    .if-bar-wrap { padding: 0 8px; }
    .if-ticker__label { padding: 0 22px 0 18px; font-size: 20px; }
    .if-footer__item { padding: 4px 12px; }
    .if-bar__shape { --cut: 14px; }
    .if-bar__in { padding: 10px 22px; gap: 10px; }
    .if-tabs { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
    .if-tab { height: 36px; padding: 0 14px; font-size: 15px; }
    .if-kpi { padding: 2px 12px; }
    .if-kpi .if-icon { width: 26px; height: 26px; }
    .if-kpi__value { font-size: 20px; }
    .if-grid--2, .if-grid--4 { grid-template-columns: minmax(0, 1fr); }
    .if-card { padding: 16px; }
    .if-table-scroll { overflow-x: auto; }
    .if-kader__head { grid-template-columns: 110px minmax(0, 1fr); column-gap: 14px; }
    .if-kader__bigphoto { width: 110px; height: 120px; }
    .if-kader__stats { grid-template-columns: minmax(0, 1fr); }
    .if-kader__stats > div + div { border-left: 0; border-top: 1px solid var(--if-line); }
    .if-kader__buttons { grid-template-columns: minmax(0, 1fr); }
}

/* Page grids on narrow screens (first pass until the designer's mobile version) */
@media (max-width: 1320px) {
    .if-stat__c-games, .if-stat__c-goals, .if-stat__c-bullys, .if-stat__c-strafe { width: auto; }
    .if-set__rules + .if-set__hint { white-space: normal; }
}
@media (max-width: 1060px) {
    .if-stat__card .if-table-scroll { overflow-x: auto; }
    .if-stat__players { min-width: 760px; }
    .if-strat, .if-verein, .if-set, .if-pagelock__ghost { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .if-strat__side, .if-set > :last-child:nth-child(odd) { grid-column: 1 / -1; }
    .if-welcome__cards { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 820px) {
    .if-strat, .if-verein, .if-set, .if-pagelock__ghost { grid-template-columns: minmax(0, 1fr); }
    .if-set__pair { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .if-aufab__legend { flex-wrap: wrap; gap: 8px 18px; margin: 8px 0 0; }
    .if-verein__legend { flex-wrap: wrap; gap: 8px 14px; }
    .if-pagelock__donut { width: 110px; height: 110px; }
    .if-pagelock__card { padding: 18px 18px 22px; }
    .if-pagelock__card h2 { font-size: 26px; }
}

/* ---------- Back to top (if2_totop(), js/if2-totop.js) ---------- */
.if-totop {
    position: fixed; right: max(24px, env(safe-area-inset-right)); bottom: max(24px, env(safe-area-inset-bottom)); z-index: 50;
    display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%;
    background: var(--if-navy); color: #fff; cursor: pointer;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .9), var(--if-shadow-l);
    opacity: 0; visibility: hidden; transform: translateY(12px);
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s, background-color .15s ease;
}
.if-totop[hidden] { display: none; }
.if-totop.is-visible { opacity: .9; visibility: visible; transform: none; transition: opacity .2s ease, transform .2s ease, visibility 0s, background-color .15s ease; }
.if-totop.is-visible:hover, .if-totop.is-visible:focus-visible { opacity: 1; background: var(--if-eisblau-dark); }
.if-totop:active { transform: scale(.94); }
.if-totop .if-icon { width: 26px; height: 26px; }
@media (max-width: 640px) {
    .if-totop { right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); width: 44px; height: 44px; }
}
@media (hover: none) {
    .if-totop.is-visible:hover { background: var(--if-navy); opacity: .9; }
}
@media (prefers-reduced-motion: reduce) {
    .if-set__submit { animation: none; }
    .if-totop, .if-totop.is-visible { transform: none; transition: opacity .01s, visibility 0s; }
}
@media print { .if-totop { display: none; } }

/* ---------- Notice layer while the own game is played: Aufstellung, Strategie (include/spielsperre.inc.php) ---------- */
.if-sperre { max-width: 600px; }
.if-sperre .if-overlay__img { height: 150px; }
.if-sperre .if-overlay__body { padding: 18px 21px 22px; }
.if2 p.if-sperre__lead { margin: 0 0 10px; font: 600 18px/1.3 var(--if-font-body); color: var(--if-navy); }
.if2 p.if-sperre__text { margin: 0 0 8px; font: 500 15px/1.45 var(--if-font-body); color: var(--if-navy); }
.if-sperre .if-overlay__actions { margin-top: 16px; }
.if-sperre .if-btn .if-icon { width: 18px; height: 18px; }

/* ---------- Layer "Dein Spiel beginnt" when the own live game starts (include/livehinweis.inc.php, js/if2-livehinweis.js) ---------- */
#if-livestart { z-index: 120; }
.if-btn.if-btn--live { background: var(--if-red); box-shadow: inset 0 -3px 0 #B5161F; }
.if-btn.if-btn--live:hover { background: #C81E28; }
.if-btn.if-btn--live[hidden] { display: none; }
#if-livestart.is-open .if-livestart { animation: if-livestart-in .38s cubic-bezier(.2, .9, .3, 1.2) both; }
.if-livestart { max-width: 640px; }
.if2 .if-livestart:focus, .if2 .if-livestart:focus-visible { outline: none; }
.if-livestart__stage {
    position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; justify-content: center;
    min-height: 228px; padding: 58px 24px 62px; color: #fff;
    background: var(--if-navy) center / cover no-repeat; background-position: var(--if-fx, 50%) var(--if-fy, 50%);
}
.if-livestart__stage::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: radial-gradient(ellipse at 50% 55%, rgba(13, 27, 58, .35) 0, rgba(13, 27, 58, .82) 70%), linear-gradient(180deg, rgba(13, 27, 58, .45) 0, rgba(13, 27, 58, .9) 100%);
}
.if-livestart__stage::after {
    /* light running over the ice */
    content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; z-index: -1;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .14) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-18deg); animation: if-livestart-sweep 4.5s ease-in-out 1s infinite;
}
.if-livestart__badge {
    position: absolute; top: 20px; left: 22px; display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 14px;
    border-radius: 3px; background: var(--if-red); color: #fff; box-shadow: 0 4px 14px rgba(225, 37, 47, .45);
    font: 800 15px/1 var(--if-font-head); letter-spacing: .1em; text-transform: uppercase;
}
.if-livestart__badge i { width: 9px; height: 9px; border-radius: 50%; background: #fff; animation: if-livestart-pulse 1.3s ease-in-out infinite; }
.if-livestart__duel { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: 18px; width: 100%; max-width: 520px; }
.if-livestart__team { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; text-align: center; }
.if-livestart__crest { width: 76px; height: 84px; object-fit: contain; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .45)); }
.if-livestart__name {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font: 700 19px/1.15 var(--if-font-head); text-transform: uppercase; letter-spacing: .02em; text-shadow: 0 2px 6px rgba(0, 0, 0, .5);
}
.if-livestart__vs { margin-top: 20px; font: 800 italic 44px/1 var(--if-font-head); color: var(--if-red); text-shadow: 0 2px 10px rgba(0, 0, 0, .5); }
.if-livestart__clock {
    position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); white-space: nowrap;
    padding: 7px 16px; border-radius: 20px; background: rgba(13, 27, 58, .72); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28);
    font: 700 16px/1 var(--if-font-head); letter-spacing: .06em; text-transform: uppercase; font-variant-numeric: tabular-nums;
}
.if-livestart__clock.is-live { background: var(--if-red); box-shadow: 0 4px 14px rgba(225, 37, 47, .45); }
.if-overlay__body.if-livestart__body { padding: 24px 26px 26px; }
.if2 h2.if-livestart__title { margin: 0 0 16px; font-size: 42px !important; }
.if2 p.if-livestart__lead { margin: 0 0 8px; font: 700 15px/1.3 var(--if-font-head); letter-spacing: .04em; text-transform: uppercase; color: var(--if-red); }
.if2 p.if-livestart__text { margin: 0; font: 500 16px/1.5 var(--if-font-body); color: var(--if-navy); }
.if-livestart .if-overlay__actions { margin-top: 22px; }
.if-btn.if-livestart__go {
    position: relative; overflow: hidden; flex: 2 1 260px; min-height: 52px; font-size: 20px;
    background: var(--if-red); box-shadow: inset 0 -3px 0 #B5161F, 0 8px 22px rgba(225, 37, 47, .35);
}
.if-btn.if-livestart__go:hover { background: #C81E28; }
.if-btn.if-livestart__go::after {
    content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .35) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-20deg); animation: if-livestart-sweep 3s ease-in-out 1.2s infinite;
}
.if-livestart__go .if-icon { width: 22px; height: 22px; }
.if-livestart .if-btn--outline { flex: 1 1 140px; min-height: 52px; }
@keyframes if-livestart-in { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes if-livestart-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
@keyframes if-livestart-sweep { 0% { left: -60%; } 55%, 100% { left: 130%; } }
@media (max-width: 560px) {
    .if-livestart__stage { min-height: 0; padding: 60px 14px 60px; }
    .if-livestart__duel { gap: 10px; }
    .if-livestart__crest { width: 54px; height: 60px; }
    .if-livestart__name { font-size: 15px; }
    .if-livestart__vs { margin-top: 14px; font-size: 32px; }
    .if-overlay__body.if-livestart__body { padding: 20px 18px 20px; }
    .if2 h2.if-livestart__title { font-size: 32px !important; }
    .if-livestart .if-overlay__actions .if-btn { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    #if-livestart.is-open .if-livestart, .if-livestart__stage::after, .if-btn.if-livestart__go::after, .if-livestart__badge i { animation: none; }
}

/* ---------- Book button in the hero: the matching chapter of the player guide /spielanleitung/ (include/if2.anleitung.inc.php) ---------- */
.if-hero__book {
    display: inline-flex; align-items: center; gap: 7px; flex: none; height: 34px; margin: -14px 0 0 22px; padding: 0 14px 0 11px; border-radius: 17px;
    background: rgba(255, 255, 255, .92); color: var(--if-navy) !important; text-decoration: none !important;
    font: 700 15px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .05em;
    box-shadow: 0 4px 14px rgba(13, 27, 58, .14), inset 0 0 0 1.5px var(--if-line); transition: transform .15s, box-shadow .15s, color .15s;
}
.if-hero__book .if-icon { width: 19px; height: 19px; color: var(--if-red); }
.if-hero__book:hover, .if-hero__book:focus-visible { transform: translateY(-2px); color: var(--if-red) !important; box-shadow: 0 8px 18px rgba(13, 27, 58, .2), inset 0 0 0 1.5px var(--if-red); }
@media (max-width: 640px) {
    .if-hero__book { width: 34px; margin-left: 12px; padding: 0; justify-content: center; }
    .if-hero__book > span:not(.if-sr) { display: none; }
}