/* ==========================================================================
   IceFighter design 2: the public player guide (spielanleitung.php) as a
   book. Loaded after css/if2.css and css/if2-public.css by
   templates/sf/if2/spielanleitung.php. Everything uses the ifa- prefix.
   Cover (preface and bookmark board), picture table of contents, then the
   reading room: sticky chapter list on the left, chapters with an image
   plate and a paper page on the right. Built like the FAQ (css/if2-faq.css).
   ========================================================================== */

.ifa {
    --ifa-gold: #F2B634;
    --ifa-ink: #1C2840;
    --ifa-paper: #FFFFFF;
    --ifa-fs: 17px;
    --ifa-side-top: calc(var(--ifp-top-h) + 18px);
    position: relative; max-width: 1312px; padding: 22px 32px 0;
}
.ifa-main { padding-bottom: 64px; }
.ifa [hidden] { display: none !important; }
.ifa[data-fs="0"] { --ifa-fs: 15px; }
.ifa[data-fs="1"] { --ifa-fs: 16px; }
.ifa[data-fs="2"] { --ifa-fs: 17px; }
.ifa[data-fs="3"] { --ifa-fs: 18.5px; }
.ifa[data-fs="4"] { --ifa-fs: 20px; }
html { scroll-padding-top: calc(var(--ifp-top-h) + 16px); }

/* ---------- Hero: the open book on the bench ---------- */
.ifp-hero--anleitung { --ifp-hero-h: 400px; }
.ifp-hero--anleitung .ifp-hero__img { left: 24%; background-position: var(--if-fx, 70%) var(--if-fy, 50%); }
.ifp-hero--anleitung::before { background: linear-gradient(90deg, var(--if-frost) 0%, rgba(238, 244, 250, .97) 26%, rgba(238, 244, 250, .55) 40%, rgba(238, 244, 250, 0) 54%); }
.ifp-hero--anleitung .ifp-hero__in { align-items: flex-start; padding-top: 74px; }
.ifp-hero--anleitung .ifp-hero__title { font-size: 92px; }
.ifp-hero--anleitung .ifp-hero__lead { max-width: 430px; margin-top: 26px; font-size: 18px; }

/* ---------- Reading progress under the header ---------- */
.ifa-progress { position: fixed; left: 0; right: 0; top: var(--ifp-top-h); z-index: 39; height: 4px; pointer-events: none; }
.ifa-progress__bar {
    display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(var(--p, 0));
    background: linear-gradient(90deg, var(--if-red), #FF6B4A 45%, var(--if-eisblau));
    box-shadow: 0 0 10px rgba(225, 37, 47, .45); transition: transform .12s linear;
}

.ifa-foreign { display: flex; align-items: center; gap: 8px; margin: 0 0 16px !important; padding: 12px 16px; border-radius: 10px; background: var(--if-eisblau-soft); color: var(--if-navy); font-size: 14.5px; }
.ifa-foreign .if-icon { flex: none; width: 18px; height: 18px; color: var(--if-eisblau-dark); }

.ifa-kicker { display: inline-flex; align-items: center; gap: 7px; font: 800 italic 16px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .14em; color: var(--if-red); }
.ifa-kicker .if-icon { width: 18px; height: 18px; }

/* ---------- Cover: preface and the bookmark board ---------- */
.ifa-cover { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 26px; align-items: stretch; margin-top: -86px; position: relative; z-index: 3; }
.ifa-preface {
    position: relative; padding: 34px 40px 30px; border-radius: 4px 14px 14px 4px; background: var(--ifa-paper); color: var(--ifa-ink);
    box-shadow: 1px 1px 0 #E3EAF3, 3px 3px 0 #fff, 4px 4px 0 #DCE5EF, 6px 6px 0 #fff, 7px 7px 0 #D4DEEA, var(--if-shadow-l);
}
.ifa-preface::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 10px; border-radius: 4px 0 0 4px; background: linear-gradient(90deg, rgba(13, 27, 58, .12), rgba(13, 27, 58, 0)); }
h2.ifa-preface__title { margin: 12px 0 16px; font: 800 italic 44px/1 var(--if-font-head); text-transform: uppercase; color: var(--if-navy); }
.ifa-preface__text p { margin: 0 0 1em; font-size: 16.5px; line-height: 1.75; }
.ifa-preface__text p:first-child::first-letter {
    float: left; margin: 6px 10px 0 -2px; font: 800 italic 74px/.8 var(--if-font-head); color: var(--if-red);
    text-shadow: 3px 3px 0 rgba(13, 27, 58, .1);
}
.ifa-preface__text p:last-child { margin-bottom: 0; font-style: italic; color: var(--if-muted); }
.ifa-preface__facts { display: flex; gap: 10px; margin: 22px 0 0; padding: 18px 0 0; list-style: none; border-top: 1.5px dashed var(--if-line); }
.ifa-preface__facts li { display: flex; flex-direction: column; gap: 4px; flex: 1 1 0; }
.ifa-preface__facts b { font: 800 italic 40px/.9 var(--if-font-head); color: var(--if-navy); }
.ifa-preface__facts span { font: 700 13px/1.1 var(--if-font-head); text-transform: uppercase; letter-spacing: .08em; color: var(--if-muted); }

.ifa-board {
    position: relative; display: flex; flex-direction: column; gap: 14px; padding: 18px 22px 24px; 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);
}
.ifa-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%); }
.ifa-board__ribbon {
    position: absolute; right: 30px; top: 0; width: 26px; height: 58px; background: linear-gradient(180deg, #B4141D, var(--if-red));
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%); box-shadow: 0 4px 8px rgba(0, 0, 0, .3);
    animation: ifa-ribbon 3.6s ease-in-out infinite; transform-origin: 50% 0;
}
@keyframes ifa-ribbon { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-3deg); } }
.ifa-board__head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; padding-right: 50px; }
.ifa-board__label { font: 800 italic 24px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .03em; }
.ifa-board__hint { display: inline-flex; align-items: center; gap: 5px; font: 600 13px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .05em; color: #A9C3E6; }
.ifa-board__hint .if-icon { width: 15px; height: 15px; }

.ifa-score { display: flex; align-items: flex-end; gap: 14px; }
.ifa-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); }
.ifa-score__team span { font: 700 13px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .1em; color: #A9C3E6; }
.ifa-score__team b { font: 800 italic 58px/.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; }
.ifa-score__team:last-child b { color: #D9F0FF; text-shadow: 0 0 16px rgba(63, 169, 224, .75), 0 0 3px var(--if-eisblau); }
.ifa-score__colon { margin-bottom: 16px; font: 800 46px/1 var(--if-font-head); color: #FFC94D; }

/* the bookshelf: one spine per chapter, coloured once read */
.ifa-shelf {
    position: relative; display: flex; align-items: flex-end; gap: 3px; height: 112px; padding: 0 10px; margin-top: 2px;
    border-bottom: 10px solid #2B4479; box-shadow: 0 10px 0 -4px #0A1530;
}
.ifa-shelf::after { content: ''; position: absolute; left: -6px; right: -6px; bottom: -10px; height: 3px; background: rgba(255, 255, 255, .18); }
.ifa-spine {
    --c: #42557F;
    position: relative; flex: 1 1 0; height: var(--h, 80%); min-width: 0; border-radius: 3px 3px 1px 1px; text-decoration: none !important;
    background:
        linear-gradient(180deg, transparent 12%, rgba(255, 255, 255, .22) 12% 15%, transparent 15% 82%, rgba(255, 255, 255, .22) 82% 85%, transparent 85%),
        linear-gradient(90deg, rgba(0, 0, 0, .25), rgba(255, 255, 255, .1) 35%, rgba(0, 0, 0, .18)), var(--c);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
    transition: transform .25s cubic-bezier(.3, 1.6, .5, 1), background-color .3s, filter .3s; opacity: .55;
}
.ifa-spine span { position: absolute; left: 0; right: 0; bottom: 22%; text-align: center; font: 700 11px/1 var(--if-font-head); color: rgba(255, 255, 255, .8); }
.ifa-spine:hover, .ifa-spine:focus-visible { transform: translateY(-8px); opacity: 1; }
.ifa-spine.is-read { opacity: 1; }
.ifa-spine.is-read:nth-child(4n+1) { --c: var(--if-red); }
.ifa-spine.is-read:nth-child(4n+2) { --c: #2F8FCB; }
.ifa-spine.is-read:nth-child(4n+3) { --c: #E5A21C; }
.ifa-spine.is-read:nth-child(4n) { --c: #E9EEF5; }
.ifa-spine.is-read:nth-child(4n) span { color: var(--if-navy); }
.ifa-spine.is-here { opacity: 1; box-shadow: 0 0 0 2px #FFC94D, 0 0 16px rgba(255, 201, 77, .6); }
.ifa-spine.is-new { animation: ifa-spine .8s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes ifa-spine { 40% { transform: translateY(-16px) rotate(-4deg); } }

.ifa-board__status { margin: 0 !important; font: 600 15px/1.3 var(--if-font-head); letter-spacing: .02em; color: #D2E1F4; }
.ifa-upnext {
    display: flex; align-items: stretch; border-radius: 12px; overflow: hidden; background: rgba(255, 255, 255, .07); color: #fff !important; text-decoration: none !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); transition: background .2s, transform .2s;
}
.ifa-upnext:hover { background: rgba(255, 255, 255, .13); transform: translateY(-2px); }
.ifa-upnext { flex: none; height: 104px; }
.ifa-upnext__img { flex: none; width: 160px; height: 100%; object-fit: cover; }
.ifa-upnext__text { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; padding: 10px 14px; }
.ifa-upnext__kicker { font: 700 12.5px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .12em; color: #FFC94D; }
.ifa-upnext__title { font: 800 italic 21px/1.05 var(--if-font-head); text-transform: uppercase; }
.ifa-upnext__lead { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; line-height: 1.4; color: #B8CAE4; }
.ifa-board__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: auto; }
.ifa-btn {
    display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border: 1.5px solid rgba(255, 255, 255, .35); border-radius: 20px;
    background: rgba(255, 255, 255, .06); color: #fff !important; cursor: pointer; text-decoration: none !important;
    font: 700 15px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .04em; transition: background .15s, transform .15s, border-color .15s;
}
.ifa-btn:hover { background: rgba(255, 255, 255, .14); border-color: #fff; transform: translateY(-1px); }
.ifa-btn .if-icon { width: 18px; height: 18px; }
.ifa-btn--red { border-color: var(--if-red); background: var(--if-red); box-shadow: 0 6px 14px rgba(225, 37, 47, .35); }
.ifa-btn--red:hover { background: #F0343E; border-color: #F0343E; }
.ifa-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; }
.ifa-reset:hover { color: #fff; }
.ifa-reset .if-icon { width: 14px; height: 14px; }

/* ---------- Table of contents: picture cards ---------- */
.ifa-toc { margin-top: 54px; }
.ifa-toc__head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
h2.ifa-toc__title { margin: 0; font: 800 italic 40px/1 var(--if-font-head); text-transform: uppercase; color: var(--if-navy); }
.ifa-toc__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.ifa-card { min-width: 0; }
.ifa-card__link {
    display: flex; flex-direction: column; height: 100%; border-radius: 12px; overflow: hidden; background: #fff; color: var(--if-navy) !important; text-decoration: none !important;
    box-shadow: var(--if-shadow); transition: transform .25s cubic-bezier(.3, 1.4, .5, 1), box-shadow .25s;
}
.ifa-card__link:hover, .ifa-card__link:focus-visible { transform: translateY(-4px); box-shadow: var(--if-shadow-l); }
.ifa-card__img { position: relative; display: block; aspect-ratio: 720 / 309; background: var(--if-navy); overflow: hidden; }
.ifa-card__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.ifa-card__link:hover .ifa-card__img img { transform: scale(1.07); }
.ifa-card__img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 27, 58, 0) 45%, rgba(13, 27, 58, .55)); }
.ifa-card__num {
    position: absolute; left: 12px; bottom: -1px; z-index: 1; display: grid; place-items: center; min-width: 46px; height: 40px; padding: 0 8px; border-radius: 8px 8px 0 0;
    background: #fff; font: 800 italic 26px/1 var(--if-font-head); color: var(--if-red);
}
.ifa-card__num .if-icon { width: 22px; height: 22px; color: var(--if-navy); }
.ifa-card__seen { position: absolute; right: 10px; top: 10px; z-index: 1; display: none; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #3DDC97; color: var(--if-navy); box-shadow: 0 3px 8px rgba(0, 0, 0, .3); }
.ifa-card__seen .if-icon { width: 15px; height: 15px; }
.ifa-card.is-read .ifa-card__seen { display: grid; }
.ifa-card__body { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; padding: 10px 16px 14px; }
.ifa-card__title { font: 800 italic 21px/1.05 var(--if-font-head); text-transform: uppercase; }
.ifa-card__lead { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13.5px; line-height: 1.45; color: var(--if-muted); }
.ifa-card__meta { display: inline-flex; align-items: center; gap: 5px; margin-top: auto; padding-top: 4px; font: 700 13px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .06em; color: var(--if-eisblau-dark); }
.ifa-card__meta .if-icon { width: 14px; height: 14px; }
.ifa-card--register .ifa-card__link { background: var(--if-navy); color: #fff !important; }
.ifa-card--register .ifa-card__lead { color: #B8CAE4; }
.ifa-card--register .ifa-card__meta { color: #8CC9EE; }

/* ---------- Reading room ---------- */
.ifa-book { display: grid; grid-template-columns: 278px minmax(0, 1fr); gap: 34px; align-items: start; margin-top: 58px; }

.ifa-side { position: sticky; top: var(--ifa-side-top); z-index: 20; }
.ifa-side__in {
    display: flex; flex-direction: column; max-height: calc(100vh - var(--ifa-side-top) - 18px); border-radius: 14px; background: #fff; box-shadow: var(--if-shadow);
}
.ifa-side__top { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 0; }
.ifa-side__title { display: inline-flex; align-items: center; gap: 7px; font: 800 italic 19px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .04em; color: var(--if-navy); }
.ifa-side__title .if-icon { width: 20px; height: 20px; color: var(--if-red); }
.ifa-side__close { display: none; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--if-frost); color: var(--if-navy); cursor: pointer; }
.ifa-side__close .if-icon { width: 18px; height: 18px; }

.ifa-search { position: relative; padding: 12px 14px 10px; }
.ifa-search__field { position: relative; display: block; }
.ifa-search__field > .if-icon { position: absolute; left: 12px; top: 50%; margin-top: -9px; width: 18px; height: 18px; color: var(--if-muted); pointer-events: none; }
.ifa-search input {
    width: 100%; height: 40px; padding: 0 34px 0 38px; border: 1.5px solid var(--if-line); border-radius: 20px; background: var(--if-frost);
    font: 400 14.5px/1 var(--if-font-body); color: var(--if-navy);
}
.ifa-search input:focus { outline: none; border-color: var(--if-eisblau); background: #fff; box-shadow: 0 0 0 3px rgba(63, 169, 224, .2); }
.ifa-search__key { position: absolute; right: 10px; top: 50%; margin-top: -11px; display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--if-line); border-radius: 5px; background: #fff; font: 600 12px/1 var(--if-font-body); color: var(--if-muted); }
.ifa-search input:focus + .ifa-search__key, .ifa-search input:not(:placeholder-shown) + .ifa-search__key { display: none; }

.ifa-hits {
    position: absolute; left: 14px; top: 56px; z-index: 30; width: 460px; max-width: calc(100vw - 40px); max-height: min(520px, 70vh); overflow: auto;
    border-radius: 12px; background: #fff; box-shadow: 0 18px 44px rgba(13, 27, 58, .28), inset 0 0 0 1px var(--if-line);
}
p.ifa-hits__count { margin: 0; padding: 12px 16px 8px; font: 700 13px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .08em; color: var(--if-muted); }
.ifa-hits__list { margin: 0; padding: 0 6px 6px; list-style: none; }
.ifa-hit { display: block; padding: 10px 10px; border-radius: 8px; color: var(--if-navy) !important; text-decoration: none !important; }
.ifa-hit:hover, .ifa-hit.is-active { background: var(--if-row-hover); }
.ifa-hit__where { display: block; margin-bottom: 3px; font: 700 13.5px/1.2 var(--if-font-head); text-transform: uppercase; letter-spacing: .04em; color: var(--if-eisblau-dark); }
.ifa-hit__text { display: block; font-size: 13.5px; line-height: 1.45; color: var(--if-muted); }
.ifa-hit mark, .ifa-flash mark { padding: 0 2px; border-radius: 3px; background: #FFE59A; color: var(--if-navy); }

.ifa-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 8px 8px; scrollbar-width: thin; }
.ifa-nav__list { margin: 0; padding: 0; list-style: none; }
.ifa-nav__link {
    display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; color: var(--if-navy) !important; text-decoration: none !important;
    font: 700 15px/1.15 var(--if-font-head); text-transform: uppercase; letter-spacing: .02em; transition: background .15s;
}
.ifa-nav__link:hover { background: var(--if-row-hover); }
.ifa-nav__num { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--if-frost); font: 800 italic 14px/1 var(--if-font-head); color: var(--if-muted); }
.ifa-nav__num .if-icon { width: 15px; height: 15px; }
.ifa-nav__name { flex: 1 1 auto; min-width: 0; }
.ifa-nav__seen { display: none; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 50%; background: #3DDC97; color: var(--if-navy); }
.ifa-nav__seen .if-icon { width: 11px; height: 11px; }
.ifa-nav__item.is-read .ifa-nav__seen { display: grid; }
.ifa-nav__item.is-read .ifa-nav__num { background: #D5F5E6; color: #137A4C; }
.ifa-nav__item.is-current > .ifa-nav__link { background: var(--if-navy); color: #fff !important; }
.ifa-nav__item.is-current .ifa-nav__num { background: var(--if-red); color: #fff; }
.ifa-nav__secs { display: none; margin: 4px 0 8px 20px; padding: 0 0 0 14px; list-style: none; border-left: 2px solid var(--if-line); }
.ifa-nav__item.is-current .ifa-nav__secs { display: block; }
.ifa-nav__secs a { position: relative; display: block; padding: 5px 6px; font-size: 13px; line-height: 1.3; color: var(--if-muted) !important; text-decoration: none !important; }
.ifa-nav__secs a:hover { color: var(--if-navy) !important; }
.ifa-nav__secs a.is-current { color: var(--if-navy) !important; font-weight: 600; }
.ifa-nav__secs a.is-current::before { content: ''; position: absolute; left: -16px; top: 4px; bottom: 4px; width: 2px; background: var(--if-red); }

.ifa-size { display: flex; align-items: center; gap: 8px; padding: 10px 16px 14px; border-top: 1px solid var(--if-line); }
.ifa-size__label { margin-right: auto; font: 700 13px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .08em; color: var(--if-muted); }
.ifa-size__btn { display: grid; place-items: center; width: 34px; height: 34px; border: 1.5px solid var(--if-line); border-radius: 50%; background: #fff; cursor: pointer; font: 800 15px/1 var(--if-font-head); color: var(--if-navy); }
.ifa-size__btn--big { font-size: 20px; }
.ifa-size__btn:hover { border-color: var(--if-eisblau); }
.ifa-size__btn:disabled { opacity: .35; cursor: default; }
.ifa-size__dots { display: flex; gap: 4px; }
.ifa-size__dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--if-line); }
.ifa-size__dots i.is-on { background: var(--if-navy); }

/* ---------- A chapter: image plate and paper page ---------- */
.ifa-ch { margin-bottom: 64px; scroll-margin-top: calc(var(--ifp-top-h) + 16px); }
.ifa-plate { position: relative; display: flex; align-items: flex-end; min-height: 380px; border-radius: 16px; overflow: hidden; background: var(--if-navy); color: #fff; box-shadow: var(--if-shadow-l); }
.ifa-plate__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.2s ease; }
.ifa-ch.is-current .ifa-plate__img { transform: scale(1.06); }
.ifa-plate::after { content: ''; position: absolute; inset: 0; background: linear-gradient(200deg, rgba(8, 19, 43, 0) 30%, rgba(8, 19, 43, .55) 62%, rgba(8, 19, 43, .92) 100%); }
.ifa-plate__text { position: relative; z-index: 1; max-width: 680px; padding: 34px 40px 76px; }
.ifa-plate__kicker { display: inline-flex; align-items: center; gap: 10px; font: 700 16px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .12em; color: #CFE3F7; }
.ifa-plate__icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--if-red); color: #fff; box-shadow: 0 6px 14px rgba(225, 37, 47, .45); }
.ifa-plate__icon .if-icon { width: 21px; height: 21px; }
h2.ifa-plate__title { margin: 14px 0 0; font: 800 italic 62px/.95 var(--if-font-head); text-transform: uppercase; color: #fff; text-shadow: 0 4px 24px rgba(0, 0, 0, .35); }
p.ifa-plate__lead { margin: 14px 0 0; font-size: 19px; line-height: 1.45; color: #E4EEF9; text-shadow: 0 2px 10px rgba(0, 0, 0, .35); }
.ifa-stamp {
    position: absolute; right: 28px; top: 26px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 3px solid #3DDC97; border-radius: 8px;
    font: 800 italic 22px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .08em; color: #3DDC97; background: rgba(8, 19, 43, .55);
    transform: rotate(8deg) scale(.4); opacity: 0; transition: transform .45s cubic-bezier(.3, 1.8, .5, 1), opacity .25s;
}
.ifa-stamp .if-icon { width: 20px; height: 20px; }
.ifa-ch.is-read .ifa-stamp { transform: rotate(8deg); opacity: 1; }

.ifa-prose {
    position: relative; z-index: 2; margin: -50px 28px 0; padding: 40px 56px 30px; border-radius: 6px 6px 14px 14px; background: var(--ifa-paper); color: var(--ifa-ink);
    font-size: var(--ifa-fs); line-height: 1.75;
    box-shadow: 0 2px 0 #E3EAF3, 0 5px 0 -1px #fff, 0 6px 0 -1px #DCE5EF, 0 9px 0 -2px #fff, 0 10px 0 -2px #D4DEEA, var(--if-shadow-l);
}
.ifa-prose > * { max-width: 70ch; }
.ifa-prose p { margin: 0 0 1.05em; }
.ifa-prose > p:first-child::first-letter {
    float: left; margin: .08em .14em 0 -.04em; font: 800 italic 4.2em/.8 var(--if-font-head); color: var(--if-red); text-shadow: 3px 3px 0 rgba(13, 27, 58, .1);
}
.ifa-prose strong { font-weight: 650; color: var(--if-navy); }
.ifa-prose a:not([class]) { color: var(--if-eisblau-dark); text-decoration: underline; text-underline-offset: 3px; }
.ifa-sec { position: relative; margin-top: 2.1em; scroll-margin-top: calc(var(--ifp-top-h) + 22px); }
.ifa-prose > .ifa-sec:first-child { margin-top: 0; }
h3.ifa-h3 { position: relative; margin: 0 0 .6em; padding-bottom: 10px; font: 800 italic 1.65em/1.05 var(--if-font-head); text-transform: uppercase; color: var(--if-navy); }
h3.ifa-h3::after { content: ''; position: absolute; left: 0; bottom: 0; width: 56px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--if-red) 0 70%, var(--if-eisblau) 70%); }
.ifa-h3__link { position: absolute; left: -1.1em; top: 0; width: 1em; text-align: center; color: var(--if-line) !important; text-decoration: none !important; opacity: 0; transition: opacity .15s, color .15s; }
h3.ifa-h3:hover .ifa-h3__link, .ifa-h3__link:focus-visible { opacity: 1; }
.ifa-h3__link:hover { color: var(--if-eisblau) !important; }
h4.ifa-h4 { margin: 1.2em 0 .4em; font: 800 italic 1.2em/1.1 var(--if-font-head); text-transform: uppercase; color: var(--if-navy); }
.ifa-flash { animation: ifa-flash 2.4s ease-out; }
@keyframes ifa-flash { 0%, 25% { background: rgba(255, 229, 154, .4); box-shadow: 0 0 0 10px rgba(255, 229, 154, .4); } 100% { background: transparent; box-shadow: 0 0 0 10px transparent; } }

.ifa-list { margin: 0 0 1.1em; padding: 0; list-style: none; }
.ifa-list li { position: relative; margin-bottom: .45em; padding-left: 1.6em; }
.ifa-list:not(.ifa-list--num) li::before {
    content: ''; position: absolute; left: .25em; top: .62em; width: .55em; height: .55em; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #4A5468 0%, #111827 60%); box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}
.ifa-list--num { counter-reset: ifa; }
.ifa-list--num li { counter-increment: ifa; padding-left: 2.3em; }
.ifa-list--num li::before {
    content: counter(ifa); position: absolute; left: 0; top: .12em; display: grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%;
    background: var(--if-navy); font: 800 italic .85em/1 var(--if-font-head); color: #fff; box-shadow: inset 0 -2px 0 var(--if-red);
}

.ifa-table { margin: 0 0 1.3em; border-radius: 12px; overflow-x: auto; box-shadow: inset 0 0 0 1px var(--if-line); }
.ifa-table table { width: 100%; border-collapse: collapse; font-size: .9em; line-height: 1.5; }
.ifa-table th { padding: 11px 14px; background: var(--if-navy); color: #fff; text-align: left; font: 700 .95em/1.1 var(--if-font-head); text-transform: uppercase; letter-spacing: .05em; }
.ifa-table td { padding: 10px 14px; border-top: 1px solid var(--if-line); vertical-align: top; }
.ifa-table tbody tr:nth-child(even) td { background: #F6F9FC; }
.ifa-table td:first-child { font-weight: 600; color: var(--if-navy); }

.ifa-quote { position: relative; margin: 1.2em 0; padding: 4px 0 4px 1.6em; border-left: 4px solid var(--if-eisblau); font-style: italic; color: var(--if-navy); }

.ifa-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: .4em 0 1.4em; }
.ifa-fact {
    position: relative; display: flex; flex-direction: column; gap: 6px; padding: 16px 16px 14px; border-radius: 12px; overflow: hidden;
    background: linear-gradient(160deg, #F4F8FC, #E8F1FA); box-shadow: inset 0 0 0 1px #DCE7F2;
}
.ifa-fact::after { content: ''; position: absolute; right: -18px; top: -18px; width: 58px; height: 58px; border-radius: 50%; border: 6px solid rgba(225, 37, 47, .08); }
.ifa-fact b { font: 800 italic 2.05em/.95 var(--if-font-head); color: var(--if-red); }
.ifa-fact:nth-child(even) b { color: var(--if-navy); }
.ifa-fact span { font-size: .8em; line-height: 1.35; color: var(--if-muted); }

.ifa-box { position: relative; display: flex; gap: 14px; margin: 1.3em 0; padding: 16px 20px 14px 16px; border-radius: 12px; }
.ifa-box__icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; }
.ifa-box__icon .if-icon { width: 22px; height: 22px; }
.ifa-box__body { flex: 1 1 auto; min-width: 0; font-size: .95em; }
.ifa-box__body > :last-child { margin-bottom: 0; }
.ifa-box__label { display: block; margin: 2px 0 6px; font: 800 italic 1.05em/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .06em; }
.ifa-box--tipp { background: var(--if-eisblau-soft); }
.ifa-box--tipp .ifa-box__icon { background: var(--if-eisblau); color: #fff; }
.ifa-box--tipp .ifa-box__label { color: var(--if-eisblau-dark); }
.ifa-box--merke { background: #FFF6E3; border: 1.5px dashed var(--ifa-gold); }
.ifa-box--merke .ifa-box__icon { background: var(--ifa-gold); color: var(--if-navy); }
.ifa-box--merke .ifa-box__label { color: #B7791F; }
.ifa-box--achtung { background: #FDECEC; }
.ifa-box--achtung .ifa-box__icon { background: var(--if-red); color: #fff; }
.ifa-box--achtung .ifa-box__label { color: var(--if-red); }
.ifa-box--geheimnis {
    overflow: hidden; color: #E6EEF9;
    background:
        radial-gradient(1.4px 1.4px at 12% 24%, rgba(255, 255, 255, .8), transparent),
        radial-gradient(1px 1px at 32% 70%, rgba(255, 255, 255, .6), transparent),
        radial-gradient(1.6px 1.6px at 58% 18%, rgba(255, 228, 160, .9), transparent),
        radial-gradient(1px 1px at 76% 62%, rgba(255, 255, 255, .7), transparent),
        radial-gradient(1.2px 1.2px at 90% 30%, rgba(255, 255, 255, .7), transparent),
        radial-gradient(120% 160% at 100% 0%, #24427E 0%, var(--if-navy) 50%, #08132B 100%);
    box-shadow: inset 0 0 0 1px rgba(242, 182, 52, .35), 0 10px 24px rgba(8, 19, 43, .25);
}
.ifa-box--geheimnis .ifa-box__icon { background: rgba(242, 182, 52, .16); color: var(--ifa-gold); box-shadow: inset 0 0 0 1.5px rgba(242, 182, 52, .5); }
.ifa-box--geheimnis .ifa-box__label { color: var(--ifa-gold); }
.ifa-box--geheimnis strong { color: #fff; }
.ifa-box--geheimnis .ifa-box__body p { font-style: italic; }
.ifa-box--geheimnis .ifa-box__body > :not(.ifa-box__label) { transition: filter .6s ease, opacity .6s ease; }
.ifa-box--geheimnis.is-veiled .ifa-box__body > :not(.ifa-box__label) { filter: blur(7px); opacity: .55; user-select: none; }
.ifa-box__reveal {
    position: absolute; left: 50%; top: 50%; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border: 1.5px solid var(--ifa-gold); border-radius: 20px;
    background: rgba(8, 19, 43, .85); color: var(--ifa-gold); cursor: pointer; transform: translate(-50%, -30%);
    font: 700 15px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .06em; box-shadow: 0 0 22px rgba(242, 182, 52, .35); animation: ifa-glow 2.4s ease-in-out infinite;
}
.ifa-box__reveal .if-icon { width: 18px; height: 18px; }
.ifa-box__reveal:hover { background: var(--ifa-gold); color: var(--if-navy); }
@keyframes ifa-glow { 50% { box-shadow: 0 0 32px rgba(242, 182, 52, .6); } }

p.ifa-where {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin: 1.4em 0 .4em; padding: 10px 12px 10px 10px; border-radius: 30px;
    background: var(--if-frost); font-size: .86em; line-height: 1.2; box-shadow: inset 0 0 0 1px var(--if-line);
}
.ifa-where__pin { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--if-red); color: #fff; }
.ifa-where__pin .if-icon { width: 15px; height: 15px; }
.ifa-where__label { font: 700 1em/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .08em; color: var(--if-muted); }
p.ifa-where b { font: 800 italic 1.15em/1 var(--if-font-head); text-transform: uppercase; color: var(--if-navy); }
.ifa-where__sep { width: 14px; height: 14px; color: var(--if-muted); }
.ifa-where__go {
    display: inline-flex; align-items: center; gap: 2px; margin-left: auto; height: 30px; padding: 0 10px 0 14px; border-radius: 15px; background: var(--if-navy);
    font: 700 .95em/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .05em; color: #fff !important; text-decoration: none !important;
}
.ifa-where__go:hover { background: var(--if-red); }
.ifa-where__go .if-icon { width: 15px; height: 15px; }

/* explained terms in the text */
.ifa-term {
    display: inline; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: help;
    text-decoration: underline dotted var(--if-eisblau); text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.ifa-term:hover, .ifa-term:focus-visible, .ifa-term[aria-expanded="true"] { color: var(--if-eisblau-dark); outline: none; }
.ifa-pop {
    position: absolute; z-index: 60; width: 300px; max-width: calc(100vw - 24px); padding: 14px 16px 12px; border-radius: 12px; background: var(--if-navy); color: #DCE7F5;
    box-shadow: 0 16px 36px rgba(8, 19, 43, .35), inset 0 -3px 0 var(--if-eisblau); font-size: 14px; line-height: 1.5; animation: ifa-pop .2s ease-out;
}
.ifa-pop::before { content: ''; position: absolute; left: var(--ax, 30px); top: -7px; width: 14px; height: 14px; background: var(--if-navy); transform: rotate(45deg); }
.ifa-pop.is-above::before { top: auto; bottom: -7px; }
@keyframes ifa-pop { from { opacity: 0; transform: translateY(4px); } }
.ifa-pop__term { display: block; margin-bottom: 4px; font: 800 italic 19px/1 var(--if-font-head); text-transform: uppercase; color: #fff; }
.ifa-pop__text { display: block; }
.ifa-pop__more { display: inline-flex; align-items: center; gap: 2px; margin-top: 8px; font: 700 13px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .06em; color: #8CC9EE !important; text-decoration: none !important; }
.ifa-pop__more .if-icon { width: 14px; height: 14px; }

/* chapter end: ornament and page turn */
.ifa-end { margin: 30px 28px 0; }
p.ifa-end__mark { display: flex; align-items: center; gap: 16px; margin: 0 0 22px; font: 700 14px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .16em; color: var(--if-muted); }
p.ifa-end__mark::before, p.ifa-end__mark::after { content: ''; flex: 1 1 auto; height: 1px; background: linear-gradient(90deg, transparent, var(--if-line) 30%, var(--if-line) 70%, transparent); }
.ifa-end__mark span { display: inline-flex; align-items: center; gap: 10px; }
.ifa-end__mark span::before, .ifa-end__mark span::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #4A5468, #000); }
.ifa-next {
    display: flex; align-items: stretch; border-radius: 14px; overflow: hidden; background: #fff; color: var(--if-navy) !important; text-decoration: none !important;
    box-shadow: var(--if-shadow); transition: transform .25s cubic-bezier(.3, 1.4, .5, 1), box-shadow .25s;
}
.ifa-next:hover { transform: translateY(-3px); box-shadow: var(--if-shadow-l); }
.ifa-next { height: 136px; }
.ifa-next__img { flex: none; width: 240px; height: 100%; object-fit: cover; }
.ifa-next__text { display: flex; flex-direction: column; justify-content: center; gap: 5px; flex: 1 1 auto; min-width: 0; padding: 16px 20px; }
.ifa-next__kicker { font: 700 13.5px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .12em; color: var(--if-red); }
.ifa-next__title { font: 800 italic 28px/1 var(--if-font-head); text-transform: uppercase; }
.ifa-next__lead { font-size: 14px; line-height: 1.45; color: var(--if-muted); }
.ifa-next__go { display: grid; place-items: center; flex: none; width: 74px; background: var(--if-navy); color: #fff; transition: background .2s; }
.ifa-next__go .if-icon { width: 26px; height: 26px; transition: transform .25s; }
.ifa-next:hover .ifa-next__go { background: var(--if-red); }
.ifa-next:hover .ifa-next__go .if-icon { transform: translateX(4px); }

/* ---------- Register ---------- */
.ifa-abc { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 22px; max-width: none !important; }
.ifa-abc__letter {
    display: grid; place-items: center; width: 38px; height: 38px; border-radius: 8px; background: var(--if-frost); color: var(--if-navy) !important; text-decoration: none !important;
    font: 800 italic 20px/1 var(--if-font-head); transition: background .15s, color .15s, transform .15s;
}
.ifa-abc__letter:hover { background: var(--if-navy); color: #fff !important; transform: translateY(-2px); }
.ifa-reg { max-width: none !important; columns: 2 300px; column-gap: 36px; }
.ifa-reg__group { position: relative; break-inside: avoid; margin: 0 0 18px; padding-left: 56px; scroll-margin-top: calc(var(--ifp-top-h) + 22px); }
.ifa-reg__letter { position: absolute; left: 0; top: -4px; font: 800 italic 46px/1 var(--if-font-head); color: var(--if-red); }
.ifa-reg__list { margin: 0; }
.ifa-reg__item { padding: 8px 0 10px; border-bottom: 1px dashed var(--if-line); scroll-margin-top: calc(var(--ifp-top-h) + 22px); }
.ifa-reg__item:last-child { border-bottom: 0; }
.ifa-reg__item dt { font: 800 italic 1.1em/1.1 var(--if-font-head); text-transform: uppercase; color: var(--if-navy); }
.ifa-reg__item dd { margin: 3px 0 0; font-size: .9em; line-height: 1.55; color: var(--if-muted); }

/* ---------- End: more to read ---------- */
.ifa-cta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 10px; }
.ifa-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 280px; text-decoration: none !important; box-shadow: var(--if-shadow); transition: transform .2s, box-shadow .2s;
}
.ifa-cta__card:hover { transform: translateY(-3px); box-shadow: var(--if-shadow-l); }
.ifa-cta__card--play {
    flex-basis: 100%; 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);
}
.ifa-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); }
.ifa-cta__card--play .ifa-cta__icon { background: rgba(255, 255, 255, .12); color: #fff; }
.ifa-cta__icon .if-icon { width: 30px; height: 30px; }
.ifa-cta__text { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0; font-size: 14px; }
.ifa-cta__text b { font: 800 italic 22px/1.05 var(--if-font-head); text-transform: uppercase; }
.ifa-cta__card--play .ifa-cta__text span { color: #C5D6EE; }
.ifa-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); }
.ifa-cta__card--play .ifa-cta__go { height: 38px; padding: 0 14px 0 18px; border-radius: 4px; background: var(--if-red); color: #fff; }
.ifa-cta__go .if-icon { width: 18px; height: 18px; }

/* ---------- Drawer button (narrow screens), celebration, toast ---------- */
.ifa-fab { display: none; }
.ifa-scrim { position: fixed; inset: 0; z-index: 44; background: rgba(8, 19, 43, .5); }

.ifa-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: ifa-fade .3s ease-out; }
@keyframes ifa-fade { from { opacity: 0; } to { opacity: 1; } }
.ifa-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: ifa-cheer .55s cubic-bezier(.3, 1.6, .5, 1) both;
}
@keyframes ifa-cheer { from { transform: scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }
.ifa-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; }
.ifa-cheer__close .if-icon { width: 18px; height: 18px; }
.ifa-cheer__badge { display: grid; place-items: center; width: 96px; height: 96px; margin: -74px auto 10px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFE08A, var(--ifa-gold) 55%, #B7791F); color: #fff; box-shadow: 0 14px 30px rgba(183, 121, 31, .45), inset 0 -4px 0 rgba(0, 0, 0, .12); animation: ifa-cup 1.4s ease-in-out infinite; }
.ifa-cheer__badge .if-icon { width: 50px; height: 50px; }
@keyframes ifa-cup { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-8px) rotate(4deg); } }
.ifa-cheer__kicker { display: block; font: 800 italic 18px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .14em; color: var(--if-red); }
h2.ifa-cheer__title { margin: 8px 0 10px; font: 800 italic 34px/1 var(--if-font-head); text-transform: uppercase; }
p.ifa-cheer__text { margin: 0 0 20px; color: var(--if-muted); font-size: 15px; line-height: 1.5; }
.ifa-cheer__btns { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
.ifa-cheer__confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.ifa-cheer__confetti i { position: absolute; top: -20px; width: 10px; height: 14px; border-radius: 2px; animation: ifa-fall linear forwards; }
.ifa-cheer__confetti i.is-puck { width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #4A5468, #000) !important; }
@keyframes ifa-fall { to { transform: translate3d(var(--dx, 0), 110vh, 0) rotate(var(--r, 540deg)); } }

.ifa-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: ifa-toast .45s cubic-bezier(.3, 1.5, .5, 1);
}
.ifa-toast .if-icon { flex: none; width: 26px; height: 26px; padding: 4px; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #FFC94D; }
@keyframes ifa-toast { from { transform: translate(-50%, 30px); opacity: 0; } to { transform: translateX(-50%); opacity: 1; } }

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

/* ---------- Narrow screens ---------- */
@media (max-width: 1180px) {
    .ifa-toc__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ifa-prose { padding: 36px 40px 28px; }
    h2.ifa-plate__title { font-size: 54px; }
}
@media (max-width: 1024px) {
    .ifa-cover { grid-template-columns: minmax(0, 1fr); margin-top: -60px; }
    .ifa-book { grid-template-columns: minmax(0, 1fr); margin-top: 44px; }
    .ifa-side { position: fixed; left: 0; top: 0; bottom: 0; z-index: 45; width: min(340px, 88vw); transform: translateX(-104%); transition: transform .3s cubic-bezier(.3, 1, .5, 1); }
    .ifa-side.is-open { transform: none; }
    .ifa-side__in { height: 100%; max-height: none; border-radius: 0 14px 14px 0; box-shadow: 0 0 40px rgba(8, 19, 43, .35); }
    .ifa-side__close { display: grid; }
    .ifa-hits { left: 10px; right: 10px; width: auto; }
    .ifa-fab {
        position: fixed; left: 16px; bottom: 16px; z-index: 43; display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 8px 0 16px; border: 0; border-radius: 23px;
        background: var(--if-navy); color: #fff; cursor: pointer; box-shadow: 0 10px 24px rgba(8, 19, 43, .35), inset 0 -3px 0 var(--if-red);
        font: 700 16px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .05em;
    }
    .ifa-fab .if-icon { width: 20px; height: 20px; }
    .ifa-fab__count { display: grid; place-items: center; height: 30px; padding: 0 10px; border-radius: 15px; background: rgba(255, 255, 255, .14); font-size: 14px; }
    .ifa-toast { bottom: 76px; }
}
@media (max-width: 860px) {
    .ifp-hero--anleitung { --ifp-hero-h: 300px; }
    .ifp-hero--anleitung .ifp-hero__img { left: 0; }
    .ifp-hero--anleitung::before { background: linear-gradient(90deg, var(--if-frost) 0%, rgba(238, 244, 250, .9) 40%, rgba(238, 244, 250, .2) 75%); }
    .ifp-hero--anleitung .ifp-hero__in { padding-top: 46px; }
    .ifp-hero--anleitung .ifp-hero__title { font-size: 64px; }
    .ifa-toc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ifa-plate { min-height: 320px; }
    .ifa-prose { margin: -40px 14px 0; padding: 30px 28px 24px; }
    .ifa-end { margin: 26px 14px 0; }
    .ifa-next__img { width: 160px; }
}
@media (max-width: 640px) {
    .ifa { padding: 14px 16px 0; }
    .ifp-hero--anleitung { --ifp-hero-h: 250px; }
    .ifp-hero--anleitung .ifp-hero__title { font-size: 52px; }
    .ifp-hero--anleitung .ifp-hero__lead { max-width: 260px; font-size: 15.5px; margin-top: 18px; }
    .ifa-cover { margin-top: -30px; gap: 18px; }
    .ifa-preface { padding: 24px 22px 22px; }
    h2.ifa-preface__title { font-size: 34px; }
    .ifa-preface__text p { font-size: 15.5px; }
    .ifa-preface__facts b { font-size: 32px; }
    .ifa-board { padding: 16px 16px 20px; }
    .ifa-score__team { min-width: 84px; }
    .ifa-score__team b { font-size: 46px; }
    .ifa-shelf { height: 92px; gap: 2px; padding: 0 4px; }
    .ifa-spine span { display: none; }
    .ifa-upnext__img { width: 96px; }
    .ifa-toc { margin-top: 40px; }
    h2.ifa-toc__title { font-size: 32px; }
    .ifa-toc__grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .ifa-card__link { flex-direction: row; }
    .ifa-card__img { flex: none; width: 118px; aspect-ratio: auto; }
    .ifa-card__num { left: 6px; min-width: 36px; height: 30px; font-size: 20px; }
    .ifa-card__lead { -webkit-line-clamp: 2; font-size: 13px; }
    .ifa-card__title { font-size: 19px; }
    .ifa-plate { min-height: 300px; border-radius: 12px; }
    .ifa-plate__text { padding: 22px 20px 62px; }
    h2.ifa-plate__title { font-size: 40px; }
    p.ifa-plate__lead { font-size: 16px; }
    .ifa-stamp { right: 14px; top: 14px; font-size: 17px; padding: 6px 10px; }
    .ifa-prose { margin: -36px 6px 0; padding: 24px 18px 20px; }
    .ifa-h3__link { display: none; }
    .ifa-box { flex-direction: column; gap: 8px; padding: 14px; }
    .ifa-box__icon { width: 34px; height: 34px; }
    .ifa-table table, .ifa-table tbody, .ifa-table tr, .ifa-table td { display: block; }
    .ifa-table thead { display: none; }
    .ifa-table tr { padding: 8px 0; border-top: 1px solid var(--if-line); }
    .ifa-table tr:first-child { border-top: 0; }
    .ifa-table td { padding: 3px 14px; border: 0; background: none !important; }
    .ifa-table td::before { content: attr(data-label); display: block; font: 700 12px/1.3 var(--if-font-head); text-transform: uppercase; letter-spacing: .06em; color: var(--if-muted); }
    p.ifa-where { border-radius: 14px; }
    .ifa-where__go { margin-left: 0; }
    .ifa-end { margin: 22px 6px 0; }
    .ifa-next { flex-wrap: wrap; height: auto; }
    .ifa-next__img { width: 100%; height: 110px; }
    .ifa-next__go { display: none; }
    .ifa-next__title { font-size: 24px; }
    .ifa-reg__group { padding-left: 44px; }
    .ifa-reg__letter { font-size: 38px; }
    .ifa-cta__card { flex-wrap: wrap; }
    .ifa-cta__go { margin-left: 70px; }
}
@media (prefers-reduced-motion: reduce) {
    .ifa *, .ifa *::before, .ifa *::after { animation: none !important; transition: none !important; }
    html { scroll-behavior: auto !important; }
}
@media print {
    .ifp-top, .if-footer, .ifa-progress, .ifa-board, .ifa-side, .ifa-fab, .ifa-toc, .ifa-cta, .ifa-next, .ifa-box__reveal, .ifp-hero__img { display: none !important; }
    .ifa-book { display: block; }
    .ifa-plate { min-height: 0; background: none; color: var(--if-navy); box-shadow: none; }
    .ifa-plate__img, .ifa-plate::after { display: none; }
    h2.ifa-plate__title, p.ifa-plate__lead, .ifa-plate__kicker { color: var(--if-navy); text-shadow: none; }
    .ifa-prose { margin: 0; padding: 0; box-shadow: none; }
    .ifa-box--geheimnis.is-veiled .ifa-box__body > * { filter: none; opacity: 1; }
    .ifa-ch { break-before: page; }
}