/* ==========================================================================
   IceFighter design 2: the public FAQ (faq.php). Loaded after css/if2.css
   and css/if2-public.css by templates/sf/if2/faq.php. Everything uses the
   iff- prefix. Built like the changelog (css/if2-changelog.css): a score
   board on top, a sticky bar, then the chapters with the questions.
   ========================================================================== */

.iff {
    --iff-bar-top: var(--ifp-top-h);
    --iff-gold: #F2B634;
    max-width: 1312px; padding: 22px 32px 0;
}
.iff-main { padding-bottom: 56px; }
.iff [hidden] { display: none !important; }

/* ---------- Hero ---------- */
.ifp-hero--faq { --ifp-hero-h: 250px; }
.ifp-hero--faq .ifp-hero__img { left: 28%; background-position: var(--if-fx, 50%) var(--if-fy, 40%); }
.ifp-hero--faq::before { background: linear-gradient(90deg, var(--if-frost) 0%, rgba(238, 244, 250, .96) 30%, rgba(238, 244, 250, .45) 44%, rgba(238, 244, 250, 0) 58%); }
.ifp-hero--faq .ifp-hero__in { align-items: flex-start; padding-top: 50px; }
.ifp-hero--faq .ifp-hero__title { font-size: 84px; }
.ifp-hero--faq .ifp-hero__lead { max-width: 440px; margin-top: 24px; font-size: 17px; }

/* ---------- Score board: reading progress ---------- */
.iff-board {
    position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); grid-template-rows: auto 1fr; gap: 0 26px;
    padding: 16px 20px 22px; border-radius: 14px; overflow: hidden; color: #fff;
    background:
        radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.3px) 0 0 / 7px 7px,
        radial-gradient(120% 140% at 0% 0%, #23407A 0%, var(--if-navy) 55%, #08132B 100%);
    box-shadow: var(--if-shadow-l), inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.iff-board::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, var(--if-red) 0 60%, var(--if-eisblau) 60% 100%); }
.iff-board__head { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 14px; }
.iff-board__live { width: 10px; height: 10px; border-radius: 50%; background: var(--if-red); animation: iff-live 1.8s infinite; }
@keyframes iff-live { 0% { box-shadow: 0 0 0 0 rgba(225, 37, 47, .7); } 70% { box-shadow: 0 0 0 10px rgba(225, 37, 47, 0); } 100% { box-shadow: 0 0 0 0 rgba(225, 37, 47, 0); } }
.iff-board__label { font: 800 italic 22px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .03em; }
.iff-board__hint { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; font: 600 13px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .05em; color: #A9C3E6; }
.iff-board__hint .if-icon { width: 15px; height: 15px; }
.iff-board__score { display: flex; flex-direction: column; gap: 14px; }

.iff-score { display: flex; align-items: flex-end; gap: 14px; }
.iff-score__team { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 104px; padding: 10px 14px 8px; border-radius: 10px; background: rgba(0, 0, 0, .28); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.iff-score__team span { font: 700 13px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .1em; color: #A9C3E6; }
.iff-score__team b {
    font: 800 italic 62px/.9 var(--if-font-head); font-variant-numeric: tabular-nums; color: #FFD9DB;
    text-shadow: 0 0 16px rgba(255, 77, 87, .75), 0 0 3px #FF4D57;
}
.iff-score__team:last-child b { color: #D9F0FF; text-shadow: 0 0 16px rgba(63, 169, 224, .75), 0 0 3px var(--if-eisblau); }
.iff-score__colon { margin-bottom: 18px; font: 800 48px/1 var(--if-font-head); color: #FFC94D; animation: iff-blink 1.2s steps(2, start) infinite; }
@keyframes iff-blink { to { visibility: hidden; } }

/* the rink: the puck slides towards the goal with every question read */
.iff-rink {
    --p: 0;
    position: relative; height: 38px; border-radius: 19px; overflow: hidden;
    background: linear-gradient(180deg, #F7FBFF 0%, #DDEBF7 100%);
    box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 4px rgba(13, 27, 58, .25), 0 6px 14px rgba(0, 0, 0, .25);
}
.iff-rink::before, .iff-rink::after { content: ''; position: absolute; top: 4px; bottom: 4px; width: 3px; background: rgba(30, 134, 192, .55); }
.iff-rink::before { left: 33%; }
.iff-rink::after { left: 66%; }
.iff-rink__line { position: absolute; left: 50%; top: 4px; bottom: 4px; width: 3px; margin-left: -1.5px; background: rgba(225, 37, 47, .65); }
.iff-rink__fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p) * 100%); background: linear-gradient(90deg, rgba(63, 169, 224, .1), rgba(63, 169, 224, .35)); transition: width .8s cubic-bezier(.3, 1.2, .5, 1); }
.iff-rink__puck {
    position: absolute; top: 50%; left: calc(10px + var(--p) * (100% - 66px)); width: 22px; height: 22px; margin-top: -11px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #4A5468 0%, #111827 55%, #000 100%); box-shadow: 0 3px 4px rgba(0, 0, 0, .35);
    transition: left .8s cubic-bezier(.3, 1.2, .5, 1);
}
.iff-rink__goal {
    position: absolute; right: 8px; top: 7px; bottom: 7px; width: 22px; border: 3px solid var(--if-red); border-left: 0; border-radius: 0 6px 6px 0;
    background: repeating-linear-gradient(45deg, rgba(13, 27, 58, .18) 0 1px, transparent 1px 5px), repeating-linear-gradient(-45deg, rgba(13, 27, 58, .18) 0 1px, transparent 1px 5px);
}
.iff.is-complete .iff-rink__goal { animation: iff-goal .6s ease-in-out 3; }
@keyframes iff-goal { 50% { box-shadow: 0 0 0 6px rgba(225, 37, 47, .35); } }
.iff-board__status { margin: 0 !important; font: 600 15px/1.3 var(--if-font-head); letter-spacing: .02em; color: #D2E1F4; }
.iff-board__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.iff-btn {
    display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border: 1.5px solid rgba(255, 255, 255, .35); border-radius: 19px;
    background: rgba(255, 255, 255, .06); color: #fff; cursor: pointer;
    font: 700 15px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .04em; transition: background .15s, transform .15s, border-color .15s;
}
.iff-btn:hover { background: rgba(255, 255, 255, .14); border-color: #fff; transform: translateY(-1px); }
.iff-btn .if-icon { width: 18px; height: 18px; }
.iff-btn--red { border-color: var(--if-red); background: var(--if-red); box-shadow: 0 6px 14px rgba(225, 37, 47, .35); }
.iff-btn--red:hover { background: #F0343E; border-color: #F0343E; }
.iff-btn--red:hover .if-icon { animation: iff-roll .5s ease-out; }
@keyframes iff-roll { from { transform: rotate(-180deg) scale(.8); } to { transform: none; } }
.iff-reset { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none; cursor: pointer; font: 600 13px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .04em; color: #8FA6C8; }
.iff-reset:hover { color: #fff; }
.iff-reset .if-icon { width: 14px; height: 14px; }

.iff-board__cells { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-content: start; }
.iff-cell {
    position: relative; display: grid; grid-template-columns: 54px minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 10px; align-items: center;
    padding: 10px 12px 12px 8px; border-radius: 10px; color: #fff !important; text-decoration: none !important;
    background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); transition: background .15s, transform .15s;
}
.iff-cell:hover { background: rgba(255, 255, 255, .12); transform: translateY(-2px); }
.iff-cell__img { grid-row: 1 / 4; width: 54px; height: 54px; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .35)); transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.iff-cell:hover .iff-cell__img { transform: rotate(-8deg) scale(1.1); }
.iff-cell__name { font: 700 16px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iff-cell__num { margin-top: 4px; font: 600 13px/1 var(--if-font-head); letter-spacing: .04em; color: #A9C3E6; }
.iff-cell__num b { font-size: 17px; color: #fff; }
.iff-cell__bar { display: block; height: 5px; margin-top: 7px; border-radius: 3px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.iff-cell__bar span { display: block; width: 0; height: 100%; border-radius: 3px; background: var(--if-eisblau); transition: width .6s ease; }
.iff-cell.is-done { box-shadow: inset 0 0 0 1.5px #3DDC97; }
.iff-cell.is-done .iff-cell__bar span { background: #3DDC97; }
.iff-cell.is-done::after {
    content: ''; position: absolute; right: 8px; top: 8px; width: 18px; height: 18px; border-radius: 50%;
    background: #3DDC97 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230D1B3A' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* ---------- Sticky bar: chapters and search ---------- */
.iff-bar {
    position: sticky; top: var(--iff-bar-top); z-index: 20; display: flex; align-items: center; gap: 14px; margin: 18px -12px 0; padding: 10px 12px;
    background: rgba(238, 244, 250, .94); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.iff-bar.is-stuck { box-shadow: 0 8px 14px -12px rgba(13, 27, 58, .45); }
.iff-chips { display: flex; gap: 8px; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.iff-chips::-webkit-scrollbar { display: none; }
.iff-chip {
    display: inline-flex; align-items: center; gap: 7px; flex: none; height: 36px; padding: 0 12px 0 6px; border: 1.5px solid var(--if-line); border-radius: 18px;
    background: #fff; white-space: nowrap; text-decoration: none !important;
    font: 700 15px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .03em; color: var(--if-navy) !important;
    transition: border-color .15s, background .15s, color .15s;
}
.iff-chip img { width: 26px; height: 26px; object-fit: contain; }
.iff-chip span { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--if-frost); font-size: 12.5px; color: var(--if-muted); }
.iff-chip:hover { border-color: var(--if-eisblau); }
.iff-chip.is-active { border-color: var(--if-navy); background: var(--if-navy); color: #fff !important; }
.iff-chip.is-active span { background: rgba(255, 255, 255, .18); color: #fff; }
.iff-chip.is-done span { background: #D5F5E6; color: #137A4C; }
.iff-search { position: relative; flex: 0 0 290px; }
.iff-search .if-icon { position: absolute; left: 13px; top: 50%; margin-top: -9px; width: 18px; height: 18px; color: var(--if-muted); pointer-events: none; }
.iff-search input {
    width: 100%; height: 38px; padding: 0 14px 0 40px; border: 1.5px solid var(--if-line); border-radius: 19px; background: #fff;
    font: 400 14.5px/1 var(--if-font-body); color: var(--if-navy);
}
.iff-search input:focus { outline: none; border-color: var(--if-eisblau); box-shadow: 0 0 0 3px rgba(63, 169, 224, .2); }
.iff-result { margin: 14px 0 0 !important; font: 600 15px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .04em; color: var(--if-muted); }

/* ---------- Chapters ---------- */
.iff-sec {
    display: grid; grid-template-columns: 290px minmax(0, 1fr); column-gap: 34px; align-items: start;
    margin-top: 34px; scroll-margin-top: calc(var(--iff-bar-top) + 70px);
}
.iff-sec__head {
    position: sticky; top: calc(var(--iff-bar-top) + 78px); grid-row: 1 / span 2;
    display: flex; flex-direction: column; align-items: flex-start; padding: 22px 22px 24px; border-radius: 14px; overflow: hidden;
    background: linear-gradient(160deg, #FFFFFF 0%, #FFFFFF 50%, var(--if-eisblau-soft) 100%);
    box-shadow: 0 1px 3px rgba(13, 27, 58, .08), 0 10px 24px rgba(13, 27, 58, .07);
}
.iff-sec__head::after {
    content: ''; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%;
    background: radial-gradient(circle, rgba(63, 169, 224, .16) 0%, rgba(63, 169, 224, 0) 70%); pointer-events: none;
}
.iff-sec__img { position: relative; z-index: 1; width: 128px; height: 128px; margin: -6px 0 6px -8px; object-fit: contain; filter: drop-shadow(0 10px 12px rgba(13, 27, 58, .22)); animation: iff-float 5s ease-in-out infinite; }
.iff-sec:nth-of-type(even) .iff-sec__img { animation-delay: -2.5s; }
@keyframes iff-float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-6px) rotate(-2deg); } }
.iff-sec__text { position: relative; z-index: 1; }
.iff-sec__kicker { font: 700 13px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .1em; color: var(--if-red); }
.ifp .iff-sec__h { position: relative; margin: 8px 0 14px; padding-bottom: 10px; font: 800 italic 40px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .005em; }
.iff-sec__h::after { content: ''; position: absolute; left: 0; bottom: 0; width: 64px; height: 4px; background: var(--if-red); transform: skewX(-24deg); transform-origin: 0 100%; }
.iff-sec__lead { margin: 0 !important; font-size: 15px; line-height: 1.45; color: var(--if-muted); }
.iff-stamp {
    position: absolute; right: 14px; top: 16px; z-index: 2; padding: 5px 10px 4px; border: 3px solid #22A86B; border-radius: 7px;
    font: 800 italic 17px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .07em; color: #22A86B;
    opacity: 0; transform: rotate(14deg) scale(1.8); pointer-events: none;
}
.iff-sec.is-done .iff-stamp { opacity: .85; transform: rotate(10deg); transition: opacity .3s, transform .45s cubic-bezier(.3, 1.8, .5, 1); }
.iff-sec.is-hit-none { display: none; }

/* ---------- Question cards ---------- */
.iff-list { grid-column: 2; display: flex; flex-direction: column; gap: 12px; }
.iff-q {
    position: relative; border-radius: 12px; background: #fff;
    box-shadow: 0 1px 3px rgba(13, 27, 58, .08), 0 6px 16px rgba(13, 27, 58, .05);
    transition: transform .2s, box-shadow .2s;
    scroll-margin-top: calc(var(--iff-bar-top) + 80px);
}
.iff-q::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 5px; border-radius: 0 4px 4px 0; background: transparent; transition: background .2s, top .2s, bottom .2s; }
.iff-q:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(13, 27, 58, .08), 0 14px 28px rgba(13, 27, 58, .12); }
.iff-q[open] { box-shadow: 0 2px 4px rgba(13, 27, 58, .08), 0 16px 34px rgba(13, 27, 58, .13); }
.iff-q[open]::before { top: 0; bottom: 0; border-radius: 12px 0 0 12px; background: var(--if-red); }
.iff-q__sum {
    display: flex; align-items: center; gap: 16px; padding: 14px 18px 14px 16px; cursor: pointer; list-style: none; border-radius: 12px;
}
.iff-q__sum::-webkit-details-marker { display: none; }
.iff-q__sum:focus-visible { outline: 3px solid rgba(63, 169, 224, .5); outline-offset: 2px; }
.iff-q__num {
    position: relative; flex: none; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%;
    font: 800 italic 22px/1 var(--if-font-head); letter-spacing: -.02em; color: #fff;
    background: radial-gradient(circle at 50% 30%, #2B3E68 0%, #121F3E 60%, #070E1F 100%);
    box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(13, 27, 58, .1), inset 0 -4px 0 rgba(0, 0, 0, .3), inset 0 2px 0 rgba(255, 255, 255, .12);
    transition: transform .3s cubic-bezier(.3, 1.6, .5, 1), background .3s;
}
.iff-q:hover .iff-q__num { transform: rotate(-12deg); }
.iff-q[open] .iff-q__num { background: radial-gradient(circle at 50% 30%, #F2525A 0%, var(--if-red) 55%, #A5121A 100%); }
.iff-q__text { flex: 1 1 auto; min-width: 0; font: 700 20px/1.18 var(--if-font-head); letter-spacing: .005em; color: var(--if-navy); }
.iff-q__seen {
    flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #D5F5E6; color: #137A4C;
    opacity: 0; transform: scale(.4); transition: opacity .25s, transform .35s cubic-bezier(.3, 1.8, .5, 1);
}
.iff-q__seen .if-icon { width: 15px; height: 15px; }
.iff-q.is-read .iff-q__seen { opacity: 1; transform: none; }
.iff-q__chev { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--if-frost); color: var(--if-navy); transition: transform .3s, background .2s, color .2s; }
.iff-q__chev .if-icon { width: 18px; height: 18px; }
.iff-q__sum:hover .iff-q__chev { background: var(--if-eisblau-soft); }
.iff-q[open] .iff-q__chev { transform: rotate(135deg); background: var(--if-navy); color: #fff; }

.iff-q__body { padding: 0 24px 18px 82px; }
.iff.has-js .iff-q[open] .iff-q__body { animation: iff-open .35s ease-out; }
@keyframes iff-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.iff-q__a { margin: 0 !important; font-size: 15.5px; line-height: 1.62; color: #34445F; }
.iff-q__a strong { color: var(--if-navy); background: linear-gradient(180deg, transparent 62%, rgba(63, 169, 224, .28) 62%); }

.iff-facts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.iff-fact {
    display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 96px; padding: 10px 14px 9px; border-radius: 10px;
    color: #fff; background: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.3px) 0 0 / 6px 6px, linear-gradient(140deg, #1D3B78 0%, var(--if-navy) 100%);
    box-shadow: inset 0 -3px 0 var(--if-eisblau), 0 6px 12px rgba(13, 27, 58, .15);
}
.iff-fact b { font: 800 italic 27px/1 var(--if-font-head); font-variant-numeric: tabular-nums; letter-spacing: .01em; color: #fff; text-shadow: 0 0 10px rgba(63, 169, 224, .6); }
.iff-fact span { margin-top: 5px; font: 600 12px/1.15 var(--if-font-head); text-transform: uppercase; letter-spacing: .06em; text-align: center; color: #A9C3E6; }

.iff-tip { display: flex; align-items: flex-start; gap: 12px; margin-top: 14px; padding: 12px 16px 12px 12px; border-radius: 10px; background: #FFF6E6; border: 1.5px dashed #F2B634; }
.iff-tip__icon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #FFD67A; color: var(--if-navy); }
.iff-tip__icon .if-icon { width: 20px; height: 20px; }
.iff-q:hover .iff-tip__icon .if-icon { animation: iff-whistle .6s ease-in-out; }
@keyframes iff-whistle { 25% { transform: rotate(-14deg); } 75% { transform: rotate(10deg); } }
.iff-tip p { margin: 0 !important; font-size: 14.5px; line-height: 1.5; color: #4A3A12; }
.iff-tip b { margin-right: 4px; font: 800 italic 15px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .04em; color: #B7791F; }

.iff-q__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 14px; }
.iff-where { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 5px; padding: 6px 12px 6px 9px; border-radius: 16px; background: var(--if-frost); font: 600 14px/1 var(--if-font-head); letter-spacing: .02em; color: var(--if-navy); }
.iff-where > .if-icon { width: 16px; height: 16px; color: var(--if-red); }
.iff-where__label { margin-right: 2px; text-transform: uppercase; letter-spacing: .05em; font-size: 12.5px; color: var(--if-muted); }
.iff-where b { font-weight: 700; }
.iff-where__sep { width: 13px; height: 13px; color: var(--if-muted); }
.iff-golink { display: inline-flex; align-items: center; gap: 3px; font: 700 15px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .04em; color: var(--if-eisblau-dark) !important; text-decoration: none !important; }
.iff-golink:hover { color: var(--if-navy) !important; }
.iff-golink .if-icon { width: 17px; height: 17px; transition: transform .15s; }
.iff-golink:hover .if-icon { transform: translateX(3px); }
.iff-copy { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; font: 600 13px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .04em; color: var(--if-muted) !important; text-decoration: none !important; }
.iff-copy:hover { color: var(--if-eisblau-dark) !important; }
.iff-copy .if-icon { width: 14px; height: 14px; }
.iff-copy.is-copied { color: var(--if-green) !important; }

.iff-q:target, .iff-q.is-flash { animation: iff-target 1.8s ease-out 1; }
@keyframes iff-target { 0%, 35% { box-shadow: 0 0 0 4px var(--if-eisblau), 0 14px 28px rgba(13, 27, 58, .16); } 100% { box-shadow: 0 1px 3px rgba(13, 27, 58, .08), 0 6px 16px rgba(13, 27, 58, .05); } }

/* reveal on scroll (only with JS) */
.iff.is-anim .iff-q { opacity: 0; transform: translateY(16px); transition: opacity .45s ease, transform .45s ease, box-shadow .2s; }
.iff.is-anim .iff-q.is-in { opacity: 1; transform: none; }
.iff.is-anim .iff-q.is-in:hover { transform: translateY(-2px); }

/* ---------- Graphics: the day and the month ---------- */
.iff-day, .iff-month {
    position: relative; grid-column: 2; margin: 0 0 14px; padding: 16px 20px 16px; border-radius: 12px; background: #fff;
    box-shadow: 0 1px 3px rgba(13, 27, 58, .08), 0 6px 16px rgba(13, 27, 58, .05);
}
.iff-gfx__head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 14px; }
.iff-gfx__title { display: inline-flex; align-items: center; gap: 8px; font: 800 italic 21px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .02em; color: var(--if-navy); }
.iff-gfx__title .if-icon { width: 22px; height: 22px; color: var(--if-red); }
.iff-gfx__now { margin-left: auto; padding: 5px 11px; border-radius: 13px; background: var(--if-eisblau-soft); font: 600 13.5px/1.2 var(--if-font-head); letter-spacing: .02em; color: var(--if-navy); }
.iff-gfx__note { display: flex; align-items: center; gap: 7px; margin: 12px 0 0 !important; font-size: 13px; color: var(--if-muted); }
.iff-gfx__note .if-icon { flex: none; width: 15px; height: 15px; color: var(--if-red); }

.iff-day__track { position: relative; display: grid; grid-template-columns: repeat(var(--iff-stops, 8), minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.iff-day__track::before {
    content: ''; position: absolute; left: 6%; right: 6%; top: 22px; height: 6px; margin-top: -3px; border-radius: 3px;
    background: linear-gradient(90deg, #DCEAF6, #EAF3FB); box-shadow: inset 0 0 0 1px rgba(30, 134, 192, .2);
}
.iff-day__stop { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 3px; text-align: center; }
.iff-day__dot {
    position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: #fff;
    background: radial-gradient(circle at 50% 30%, #2B3E68 0%, #121F3E 70%); box-shadow: 0 0 0 4px #fff, 0 6px 12px rgba(13, 27, 58, .25);
    transition: transform .25s cubic-bezier(.3, 1.6, .5, 1);
}
.iff-day__stop:hover .iff-day__dot { transform: scale(1.12) rotate(-8deg); }
.iff-day__dot .if-icon { width: 22px; height: 22px; }
.iff-day__stop--game .iff-day__dot { box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--if-red), 0 6px 12px rgba(13, 27, 58, .25); }
.iff-day__stop--team .iff-day__dot { background: radial-gradient(circle at 50% 30%, #6CC4F0 0%, var(--if-eisblau-dark) 75%); }
.iff-day__stop--office .iff-day__dot { background: radial-gradient(circle at 50% 30%, #C7D3E3 0%, #8A97AB 75%); }
.iff-day__stop--boerse .iff-day__dot { background: radial-gradient(circle at 50% 30%, #FFD978 0%, #C98A12 75%); }
.iff-day__time { margin-top: 4px; font: 800 italic 20px/1 var(--if-font-head); font-variant-numeric: tabular-nums; color: var(--if-navy); }
.iff-day__label { font-size: 12.5px; line-height: 1.3; color: var(--if-muted); hyphens: auto; overflow-wrap: break-word; }
.iff-day__stop.is-past { opacity: .5; }
.iff-day__stop.is-next .iff-day__dot { animation: iff-next 1.6s infinite; }
.iff-day__stop.is-next .iff-day__time { color: var(--if-red); }
@keyframes iff-next { 0% { box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--if-red), 0 0 0 6px rgba(225, 37, 47, .5); } 70% { box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--if-red), 0 0 0 16px rgba(225, 37, 47, 0); } 100% { box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--if-red), 0 0 0 16px rgba(225, 37, 47, 0); } }
.iff-day__needle { position: absolute; top: 62px; width: 0; height: 30px; border-left: 2px dashed var(--if-red); pointer-events: none; }
.iff-day__needle::before { content: ''; position: absolute; left: -6px; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: var(--if-red); box-shadow: 0 0 0 3px rgba(225, 37, 47, .25); }

.iff-month__days { display: grid; grid-template-columns: repeat(31, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 0; list-style: none; }
.iff-month__day {
    position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1.25; border-radius: 6px;
    font: 700 13px/1 var(--if-font-head); font-variant-numeric: tabular-nums; color: #fff; transition: transform .15s;
}
.iff-month__day:hover { transform: translateY(-3px); }
.iff-month__day--vorrunde { background: var(--if-navy-3); }
.iff-month__day--pause { background: #6E81A6; }
.iff-month__day--playoffs { background: var(--if-red); }
.iff-month__day--final { background: linear-gradient(160deg, #FFD978 0%, var(--iff-gold) 60%, #C98A12 100%); color: var(--if-navy); box-shadow: 0 4px 10px rgba(201, 138, 18, .4); }
.iff-month__day--abrechnung { color: var(--if-muted); background: repeating-linear-gradient(-45deg, #E4EBF3 0 4px, #F3F7FB 4px 8px); box-shadow: inset 0 0 0 1px var(--if-line); }
.iff-month__cup { position: absolute; top: -21px; width: 17px; height: 17px; color: var(--iff-gold); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .2)); }
.iff-month__day.is-today { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--if-eisblau); transform: translateY(-3px); }
.iff-month__day.is-today::after {
    content: attr(data-today); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); padding: 3px 7px; border-radius: 4px;
    background: var(--if-eisblau-dark); color: #fff; font: 700 11px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .05em; white-space: nowrap;
}
.iff-month__day--final.is-today .iff-month__cup { display: none; }
.iff-month__legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 14px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--if-muted); }
.iff-month__key { display: inline-flex; align-items: center; gap: 7px; }
.iff-month__key::before { content: ''; width: 14px; height: 14px; border-radius: 4px; }
.iff-month__key--vorrunde::before { background: var(--if-navy-3); }
.iff-month__key--playoffs::before { background: var(--if-red); }
.iff-month__key--final::before { background: var(--iff-gold); }
.iff-month__key--abrechnung::before { background: repeating-linear-gradient(-45deg, #DCE5EF 0 3px, #F3F7FB 3px 6px); box-shadow: inset 0 0 0 1px var(--if-line); }

/* ---------- "Wusstest Du?" ---------- */
.iff-didyou {
    position: relative; display: flex; align-items: center; gap: 24px; margin-top: 34px; padding: 22px 26px; border-radius: 14px; overflow: hidden; color: #fff;
    background:
        radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.3px) 0 0 / 7px 7px,
        linear-gradient(110deg, var(--if-navy) 0%, #1D3B78 70%, #2A5BA8 100%);
    box-shadow: inset 0 -4px 0 var(--if-red), var(--if-shadow-l);
}
.iff-didyou::after { content: ''; position: absolute; right: -80px; top: -90px; width: 300px; height: 300px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .08); box-shadow: 0 0 0 30px rgba(255, 255, 255, .03); pointer-events: none; }
.iff-didyou__puck {
    flex: none; display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%;
    background: radial-gradient(circle at 35% 28%, #5A6478 0%, #1A2232 50%, #000 100%);
    box-shadow: 0 10px 0 -2px #000, 0 16px 22px rgba(0, 0, 0, .45), inset 0 3px 0 rgba(255, 255, 255, .15);
}
.iff-didyou__puck span { font: 800 italic 54px/1 var(--if-font-head); color: #fff; text-shadow: 0 0 14px rgba(63, 169, 224, .8); }
.iff-didyou.is-spin .iff-didyou__puck { animation: iff-spin .6s cubic-bezier(.3, 1.3, .5, 1); }
@keyframes iff-spin { from { transform: rotate(-360deg) scale(.7); } to { transform: none; } }
.iff-didyou__text { position: relative; z-index: 1; flex: 1 1 auto; min-width: 0; }
.iff-didyou__kicker { font: 800 italic 16px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .08em; color: #FFC94D; }
.iff-didyou__text p { margin: 8px 0 0 !important; font: 600 22px/1.25 var(--if-font-head); letter-spacing: .005em; color: #fff; }
.iff-btn--ghost { position: relative; z-index: 1; flex: none; }

/* ---------- Empty search and call to action ---------- */
.iff-nohit { display: flex; align-items: center; gap: 22px; margin: 24px 0 0; padding: 22px 26px !important; }
.iff-nohit__icon { display: grid; place-items: center; flex: none; width: 72px; height: 72px; border-radius: 50%; background: var(--if-eisblau-soft); color: var(--if-navy); }
.iff-nohit__icon .if-icon { width: 40px; height: 40px; animation: iff-shake 2.4s ease-in-out infinite; }
@keyframes iff-shake { 0%, 80%, 100% { transform: none; } 85% { transform: rotate(-8deg); } 90% { transform: rotate(6deg); } 95% { transform: rotate(-3deg); } }
.ifp .iff-nohit__title { margin: 0 0 4px; font: 800 italic 28px/1 var(--if-font-head); text-transform: uppercase; }
.iff-nohit p { margin: 0 0 12px !important; color: var(--if-muted); }
.iff-nohit__btns { display: flex; flex-wrap: wrap; gap: 10px; }

.iff-cta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 40px; }
.iff-cta__card {
    display: flex; align-items: center; gap: 16px; padding: 20px 22px; border-radius: 12px; background: #fff; color: var(--if-navy) !important;
    flex: 1 1 300px; text-decoration: none !important; box-shadow: var(--if-shadow); transition: transform .2s, box-shadow .2s;
}
.iff-cta__card:hover { transform: translateY(-3px); box-shadow: var(--if-shadow-l); }
.iff-cta__card--play {
    flex-grow: 1.4; color: #fff !important;
    background: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.3px) 0 0 / 7px 7px, linear-gradient(110deg, var(--if-navy) 0%, #1D3B78 100%);
    box-shadow: inset 0 -4px 0 var(--if-red), var(--if-shadow);
}
.iff-cta__icon { display: grid; place-items: center; flex: none; width: 54px; height: 54px; border-radius: 50%; background: var(--if-eisblau-soft); color: var(--if-navy); }
.iff-cta__card--play .iff-cta__icon { background: rgba(255, 255, 255, .12); color: #fff; }
.iff-cta__icon .if-icon { width: 30px; height: 30px; }
.iff-cta__text { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0; font-size: 14px; }
.iff-cta__text b { font: 800 italic 22px/1.05 var(--if-font-head); text-transform: uppercase; }
.iff-cta__card--play .iff-cta__text span { color: #C5D6EE; }
.iff-cta__go { display: inline-flex; align-items: center; gap: 4px; flex: none; font: 700 15px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .04em; color: var(--if-eisblau-dark); }
.iff-cta__card--play .iff-cta__go { height: 38px; padding: 0 14px 0 18px; border-radius: 4px; background: var(--if-red); color: #fff; }
.iff-cta__go .if-icon { width: 18px; height: 18px; }

/* ---------- Celebration and toast ---------- */
.iff-cheer { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; background: rgba(8, 19, 43, .72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: iff-fade .3s ease-out; }
@keyframes iff-fade { from { opacity: 0; } to { opacity: 1; } }
.iff-cheer__card {
    position: relative; z-index: 1; width: min(460px, 100%); padding: 26px 28px 28px; border-radius: 16px; text-align: center; background: #fff;
    box-shadow: 0 30px 60px rgba(0, 0, 0, .35), inset 0 -5px 0 var(--if-red); animation: iff-pop .55s cubic-bezier(.3, 1.6, .5, 1) both;
}
@keyframes iff-pop { from { transform: scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }
.iff-cheer__close { position: absolute; right: 12px; top: 12px; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--if-frost); color: var(--if-navy); cursor: pointer; }
.iff-cheer__close .if-icon { width: 18px; height: 18px; }
.iff-cheer__img { width: 150px; height: 150px; margin: -70px auto 4px; filter: drop-shadow(0 14px 16px rgba(13, 27, 58, .3)); animation: iff-cup 1.4s ease-in-out infinite; }
@keyframes iff-cup { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-8px) rotate(3deg); } }
.iff-cheer__kicker { display: block; font: 800 italic 18px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .14em; color: var(--if-red); }
.ifp .iff-cheer__title { margin: 8px 0 10px; font: 800 italic 34px/1 var(--if-font-head); text-transform: uppercase; }
.iff-cheer p { margin: 0 0 20px !important; color: var(--if-muted); font-size: 15px; line-height: 1.5; }
.iff-cheer__btns { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
.iff-cheer__confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.iff-cheer__confetti i { position: absolute; top: -20px; width: 10px; height: 14px; border-radius: 2px; animation: iff-fall linear forwards; }
.iff-cheer__confetti i.is-puck { width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #4A5468, #000) !important; }
@keyframes iff-fall { to { transform: translate3d(var(--dx, 0), 110vh, 0) rotate(var(--r, 540deg)); } }

.iff-toast {
    position: fixed; left: 50%; bottom: 24px; z-index: 150; display: flex; align-items: center; gap: 10px; max-width: calc(100% - 32px); padding: 11px 18px 11px 12px; border-radius: 26px;
    background: var(--if-navy); color: #fff; box-shadow: 0 12px 28px rgba(8, 19, 43, .35), inset 0 -3px 0 var(--if-red);
    font: 700 16px/1.2 var(--if-font-head); letter-spacing: .02em; transform: translateX(-50%); animation: iff-toast .45s cubic-bezier(.3, 1.5, .5, 1);
}
.iff-toast .if-icon { flex: none; width: 26px; height: 26px; padding: 4px; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #FFC94D; }
@keyframes iff-toast { from { transform: translate(-50%, 30px); opacity: 0; } to { transform: translateX(-50%); opacity: 1; } }

/* footer link (also on the game pages) */
.iff-footlink { gap: 6px; }
.iff-footlink .if-icon { color: var(--if-eisblau); }

/* ---------- Narrow screens ---------- */
@media (max-width: 1180px) {
    .iff-board { grid-template-columns: minmax(0, 1fr); }
    .iff-board__cells { margin-top: 18px; }
    .iff-sec { grid-template-columns: 240px minmax(0, 1fr); column-gap: 24px; }
    .iff-sec__img { width: 104px; height: 104px; }
    .ifp .iff-sec__h { font-size: 34px; }
}
@media (max-width: 980px) {
    .iff-sec { display: block; }
    .iff-sec__head { position: relative; top: auto; flex-direction: row; align-items: center; gap: 16px; margin-bottom: 14px; padding: 14px 18px; }
    .iff-sec__img { width: 88px; height: 88px; margin: 0; }
    .ifp .iff-sec__h { margin: 6px 0 8px; font-size: 30px; }
    .iff-day__track { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 18px; }
    .iff-day__track::before, .iff-day__needle { display: none !important; }
    .iff-month__days { grid-template-columns: repeat(16, minmax(0, 1fr)); row-gap: 18px; }
}
@media (max-width: 860px) {
    .iff { padding: 16px 18px 0; }
    .ifp-hero--faq { --ifp-hero-h: 210px; }
    .ifp-hero--faq .ifp-hero__title { font-size: 56px; }
    .ifp-hero--faq .ifp-hero__lead { font-size: 15px; }
    .iff-bar { flex-wrap: wrap; }
    .iff-search { flex: 1 1 100%; order: -1; }
    .iff-board__cells { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .iff-didyou { flex-wrap: wrap; }
}
@media (max-width: 640px) {
    .iff-board { padding: 14px 14px 18px; }
    .iff-board__hint { margin-left: 0; width: 100%; }
    .iff-score__team { min-width: 84px; }
    .iff-score__team b { font-size: 48px; }
    .iff-cell { grid-template-columns: 40px minmax(0, 1fr); }
    .iff-cell__img { width: 40px; height: 40px; }
    .iff-cell__name { font-size: 14px; }
    .iff-bar { position: static; }
    .iff-sec, .iff-q { scroll-margin-top: calc(var(--ifp-top-h) + 12px); }
    .iff-sec__head { padding: 12px 14px; }
    .iff-sec__img { width: 64px; height: 64px; }
    .ifp .iff-sec__h { font-size: 26px; }
    .iff-q__sum { gap: 12px; padding: 12px 12px 12px 12px; }
    .iff-q__num { width: 40px; height: 40px; font-size: 18px; }
    .iff-q__text { font-size: 17.5px; }
    .iff-q__chev { width: 30px; height: 30px; }
    .iff-q__body { padding: 0 16px 16px 16px; }
    .iff-copy { margin-left: 0; }
    .iff-fact { min-width: 84px; padding: 8px 10px; }
    .iff-fact b { font-size: 22px; }
    .iff-day__track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .iff-month__days { grid-template-columns: repeat(8, minmax(0, 1fr)); }
    .iff-didyou { padding: 18px; }
    .iff-didyou__puck { width: 64px; height: 64px; }
    .iff-didyou__puck span { font-size: 38px; }
    .iff-didyou__text p { font-size: 18px; }
    .iff-cta__card { flex-wrap: wrap; }
    .iff-cta__go { margin-left: 70px; }
}
@media (prefers-reduced-motion: reduce) {
    .iff *, .iff *::before, .iff *::after { animation: none !important; transition: none !important; }
    .iff.is-anim .iff-q { opacity: 1; transform: none; }
}