/* ==========================================================================
   IceFighter design 2: the public pages (landing page, features, imprint,
   privacy, password pages, login link, maintenance). Loaded after
   css/if2.css by include/if2.public.inc.php; measured on the 1440 px
   *-frontend.jpg mockups. Everything uses the ifp- prefix.
   ========================================================================== */

.ifp { --ifp-hero-h: 172px; --ifp-top-h: 65px; }
.ifp-wrap { max-width: var(--if-max); margin: 0 auto; padding: 0 52px; }
.ifp-wrap--narrow { max-width: 1250px; padding: 0 32px; }
.ifp-main { flex: 1 0 auto; padding-bottom: 46px; }

/* ---------- Header: logo, Home/Login/Kontakt, languages ---------- */
.ifp-top { position: sticky; top: 0; z-index: 40; background: #fff; box-shadow: 0 1px 0 var(--if-line), 0 2px 8px rgba(13, 27, 58, .05); }
.ifp-top__in { display: flex; align-items: center; height: var(--ifp-top-h); }
.ifp-logo { margin-right: auto; }
.ifp-logo img { height: 96px; margin: -15px 0; }
.ifp-nav { display: flex; align-items: stretch; height: 100%; gap: 34px; margin-right: 44px; }
.ifp-nav__link {
    position: relative; display: flex; align-items: center;
    font: 700 16px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .04em; color: var(--if-navy) !important; text-decoration: none !important;
}
.ifp-nav__link:hover { color: var(--if-eisblau-dark) !important; }
.ifp-nav__link.is-active::after { content: ''; position: absolute; left: -4px; right: -4px; bottom: 19px; height: 2px; background: var(--if-red); }
.ifp-nav__link.is-active::before {
    content: ''; position: absolute; left: 50%; bottom: 11px; margin-left: -5px; border: 5px solid transparent; border-top: 6px solid var(--if-red); border-bottom: 0;
}
.ifp-langs { display: flex; align-items: center; gap: 22px; }
.ifp-lang {
    display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 9px 0 4px; border-radius: 17px;
    font: 700 15px/1 var(--if-font-head); letter-spacing: .03em; color: var(--if-navy) !important; text-decoration: none !important;
}
.ifp-lang:hover { background: var(--if-frost); }
.ifp-flag { display: block; width: 26px; height: 26px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(13, 27, 58, .12); }
.ifp-lang.is-active { background: var(--if-eisblau-soft); }
.ifp-lang.is-active .ifp-flag { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--if-navy); }

/* ---------- Login in the menu (wish Andre 27.10.2026, if2_public_login_menu()) ----------
   A red slanted button between Home and Kontakt with a light sheen every few
   seconds; it opens the login form as a panel under it. */
.ifp-nav__login { position: relative; display: flex; align-items: center; }
.ifp-loginbtn {
    position: relative; z-index: 0; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 22px 0 19px;
    font: 800 italic 17px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .05em; color: #fff !important; text-decoration: none !important;
    transition: transform .15s;
}
.ifp-loginbtn::before {
    content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 3px; transform: skewX(-14deg);
    background: linear-gradient(105deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, 0) 58%) no-repeat, var(--if-red);
    background-size: 260% 100%, auto; background-position: 160% 0, 0 0;
    box-shadow: 0 4px 12px rgba(225, 37, 47, .38), inset 0 -3px 0 rgba(13, 27, 58, .22);
    transition: background-color .15s, box-shadow .15s;
    animation: ifp-sheen 6s ease-in-out 1.2s infinite;
}
.ifp-loginbtn .if-icon { width: 20px; height: 20px; stroke-width: 2.3; }
.ifp-loginbtn:hover { transform: translateY(-1px); }
.ifp-loginbtn:hover::before { background-color: #C81E27; box-shadow: 0 6px 16px rgba(225, 37, 47, .45), inset 0 -3px 0 rgba(13, 27, 58, .25); }
.ifp-loginbtn:focus-visible { outline: none; }
.ifp-loginbtn:focus-visible::before { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--if-eisblau); }
.ifp-nav__login.is-open .ifp-loginbtn::before { background-color: var(--if-navy); box-shadow: inset 0 -3px 0 var(--if-red); animation: none; }
@keyframes ifp-sheen {
    0%, 72% { background-position: 160% 0, 0 0; }
    88%, 100% { background-position: -60% 0, 0 0; }
}
/* the panel: centred under the button, with a little arrow */
.ifp-loginpop {
    display: none; position: absolute; z-index: 50; top: 100%; left: 50%; width: 300px; margin-left: -150px; padding-top: 10px;
    filter: drop-shadow(0 14px 30px rgba(13, 27, 58, .24)) drop-shadow(0 0 1px rgba(13, 27, 58, .25));
}
.ifp-nav__login.is-open .ifp-loginpop, .ifp-nav__login:not(.is-js) .ifp-loginpop:target { display: block; animation: ifp-pop .18s ease-out; }
.ifp-loginpop::before { content: ''; position: absolute; top: 1px; left: 50%; margin-left: -10px; border: 10px solid transparent; border-top: 0; border-bottom-color: #fff; }
@keyframes ifp-pop {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}
.ifp-loginpop .ifp-login { padding: 18px 20px 18px; }
.ifp .ifp-loginpop .ifp-card__title { margin-bottom: 16px; font-size: 25px; }
.ifp .ifp-loginpop .ifp-alert { margin: 0 0 14px; }
.ifp p.ifp-login__new { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin: 14px 0 0; padding-top: 13px; border-top: 1px solid var(--if-line); font-size: 14px; color: var(--if-muted); }
.ifp-login__new .if-link { font: inherit; }
.ifp-login__new .if-link .if-icon { width: 14px; height: 14px; }
@media (prefers-reduced-motion: reduce) {
    .ifp-loginbtn::before, .ifp-nav__login.is-open .ifp-loginpop { animation: none; }
}

/* ---------- Hero with the page title ---------- */
.ifp-hero { position: relative; height: var(--ifp-hero-h); overflow: hidden; background: var(--if-frost); }
.ifp-hero__img { position: absolute; inset: 0 0 0 22%; background-size: cover; background-position: var(--if-fx, 50%) var(--if-fy, 50%); background-repeat: no-repeat; }
/* wider than 1440 px the short hero grows with the width, as in the game (if2.css) */
@media (min-width: 1441px) {
    .ifp { --ifp-hero-h: min(11.944vw, 230px); }
}
.ifp-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) 22%, rgba(238, 244, 250, .5) 31%, rgba(238, 244, 250, 0) 44%);
}
.ifp-hero__in { position: relative; z-index: 2; height: 100%; display: flex; align-items: center; }
.ifp-hero__title { font-size: 66px; margin-top: -6px; }
.ifp-hero__lead { max-width: 360px; margin: 30px 0 0; font-size: 18.5px; line-height: 1.4; color: var(--if-navy); }
/* the landing page: big hero under the login column */
.ifp-hero--landing { --ifp-hero-h: 382px; }
.ifp-hero--landing .ifp-hero__img { left: 27%; background-position: var(--if-fx, 40%) var(--if-fy, 50%); }
.ifp-hero--landing .ifp-hero__in { align-items: flex-start; padding-top: 72px; }
.ifp-hero--landing .ifp-hero__title { max-width: 400px; font-size: 70px; line-height: .98; padding-bottom: 24px; }
.ifp-hero--landing .ifp-hero__lead { margin-top: 32px; }
.ifp-hero--landing .ifp-hero__title::before { bottom: 9px; width: 280px; }
.ifp-hero--landing .ifp-hero__title::after { bottom: 0; width: 270px; height: 4px; }
/* pages with a centred card that overlaps the photo */
.ifp-hero--tall { --ifp-hero-h: 282px; }
.ifp-hero--tall .ifp-hero__img { left: 0; }
.ifp-hero--tall::before { background: linear-gradient(90deg, var(--if-frost) 0%, rgba(238, 244, 250, .9) 14%, rgba(238, 244, 250, .35) 30%, rgba(238, 244, 250, 0) 42%); }
.ifp-hero--tall .ifp-hero__in { align-items: flex-start; padding-top: 70px; }
.ifp-hero--wartung { --ifp-hero-h: 560px; }
.ifp-hero--wartung .ifp-hero__img { left: 0; background-position: var(--if-fx, 50%) var(--if-fy, 40%); }
.ifp-hero--wartung::before { display: none; }

/* ---------- Cards and their parts ---------- */
.ifp-card { padding: 16px 18px 18px; }
/* honeypot of the login and registration (if_form_fields()): out of sight and out of the tab order, bots fill it */
.if-hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
/* The cut corner clips the card's shadow as well: with the card's own outline the shadow vanished and
   was left as a square grey wedge under the rounded bottom corners. The outline reaches 40px beyond
   the card except at the cut, so the shadow shows. */
.ifp .if-card--cut { clip-path: polygon(-40px -40px, calc(100% - 62px) -40px, calc(100% + 40px) 62px, calc(100% + 40px) calc(100% + 40px), -40px calc(100% + 40px)); }
.ifp-card::after {
    content: ''; position: absolute; top: 0; right: 0; width: 22px; height: 22px; pointer-events: none;
    background: linear-gradient(to top right, transparent calc(50% - 2.5px), var(--if-red) calc(50% - 2.5px), var(--if-red) calc(50% - .5px), transparent calc(50% - .5px));
}
.ifp .ifp-card__title { margin: 2px 0 17px; font: 700 27px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .01em; }
.ifp-card .if-field { margin-bottom: 11px; }
.ifp-card .if-field__label { margin-bottom: 5px; font-size: 12.5px; letter-spacing: .04em; }
.ifp-card .if-input { height: 32px; padding: 0 11px; font-size: 14px; border-width: 1.3px; }
.ifp-card .if-password .if-input { padding-right: 40px; }
.ifp-card .if-password button { width: 34px; height: 28px; right: 2px; }
.ifp-card .if-password button .if-icon { width: 18px; height: 18px; }
.ifp-card .if-btn { min-height: 33px; margin-top: 4px; font-size: 16px; font-weight: 700; letter-spacing: .02em; }
.ifp-card .if-field-error { margin-top: 5px; font-size: 12px; }
.ifp-card .if-field-error .if-icon { width: 15px; height: 15px; }
.ifp-card__link { margin-top: 12px; font: 400 14px/1.2 var(--if-font-body); }
.ifp-card__link .if-icon { width: 14px; height: 14px; }
.ifp-card.is-locked .if-input { background: #E9EDF2; border-color: #D4DBE4; }

/* Alerts in a card (state board "Öffentliche Seiten · Fehler") */
.ifp-alert {
    display: flex; align-items: center; gap: 12px; margin: 0 0 12px; padding: 9px 10px 9px 14px; border-radius: 3px;
    font-size: 13.5px; line-height: 1.35; background: var(--if-eisblau-soft); box-shadow: inset 4px 0 0 var(--if-eisblau); color: var(--if-navy);
}
.ifp-alert__icon { flex: none; display: grid; place-items: center; color: var(--if-eisblau-dark); }
.ifp-alert__icon .if-icon { width: 24px; height: 24px; }
.ifp-alert__text { flex: 1; }
.ifp-alert__close { flex: none; align-self: flex-start; width: 26px; height: 26px; margin: -2px -2px 0 0; padding: 0; border: 0; background: none; color: currentColor; opacity: .7; cursor: pointer; display: grid; place-items: center; }
.ifp-alert__close:hover { opacity: 1; }
.ifp-alert__close .if-icon { width: 16px; height: 16px; }
.ifp-alert--error { background: #FCE4E6; box-shadow: inset 4px 0 0 var(--if-red); color: #B3161F; }
.ifp-alert--error .ifp-alert__icon { color: var(--if-red); }
.ifp-alert--ok { background: #E4F5EC; box-shadow: inset 4px 0 0 var(--if-green); color: #137A4B; }
.ifp-alert--ok .ifp-alert__icon { color: var(--if-green); }
.ifp-alert--note { background: var(--if-eisblau-soft); }

/* Registration */
.ifp-agb { margin: 16px 0 14px !important; }
/* the AGB line reads like the field labels above it; the link in bold */
.ifp-agb .if-check { align-items: flex-start; gap: 10px; font: 600 12.5px/1.3 var(--if-font-head); text-transform: uppercase; letter-spacing: .04em; color: var(--if-navy); }
.ifp-agb .if-check a { font-weight: 700; }
.ifp-agb .if-check input { width: 18px; height: 18px; margin-top: -1px; }
.ifp-agb .if-check input:checked::after { width: 5px; height: 9px; border-width: 0 2px 2px 0; }
.ifp-agb__error { margin: 7px 0 0; font-size: 12px; color: var(--if-red); }
.ifp-register .if-btn { margin-top: 14px; }
/* landing page: navy head with what a new manager gets (if2_public_register_card(..., $perks)) */
.ifp-register--perks { padding-top: 0; box-shadow: 0 12px 32px rgba(13, 27, 58, .16); }
.ifp-register__head {
    position: relative; margin: 0 -18px 18px; padding: 18px 40px 18px 18px; border-radius: var(--if-radius) 0 0 0; color: #fff;
    background: radial-gradient(120% 90% at 100% 0%, rgba(63, 169, 224, .28) 0%, rgba(63, 169, 224, 0) 60%), linear-gradient(160deg, var(--if-navy-3) 0%, var(--if-navy) 70%);
}
.ifp-register__eyebrow { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 11px; background: rgba(63, 169, 224, .18); font: 700 12px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .1em; color: #8FD0F2; }
.ifp .ifp-register__head h2.ifp-card__title { position: relative; margin: 12px 0 16px; padding-bottom: 13px; font-size: 31px; color: #fff; }
.ifp-register__head h2.ifp-card__title::before, .ifp-register__head h2.ifp-card__title::after { content: ''; position: absolute; left: 0; height: 3px; background: var(--if-red); transform: skewX(-24deg); transform-origin: 0 100%; }
.ifp-register__head h2.ifp-card__title::before { bottom: 6px; width: 62px; }
.ifp-register__head h2.ifp-card__title::after { bottom: 0; width: 54px; }
.ifp ul.ifp-register__perks { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.ifp-register__perks li { display: flex; align-items: flex-start; gap: 9px; margin: 0; font-size: 13.5px; line-height: 1.35; color: rgba(255, 255, 255, .92); }
.ifp-register__perks .if-icon { flex: none; width: 18px; height: 18px; margin-top: -1px; color: var(--if-eisblau); }
.ifp-register--perks .if-btn .if-icon { width: 19px; height: 19px; }

/* Headings of the content area */
.ifp .ifp-h2 { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font: 800 italic 36px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .003em; }
.ifp-h2::after {
    content: ''; flex: none; width: 62px; height: 10px; transform: skewX(-24deg);
    background: linear-gradient(var(--if-red), var(--if-red)) 0 0 / 100% 3px no-repeat, linear-gradient(var(--if-red), var(--if-red)) 0 7px / 78% 3px no-repeat;
}
.ifp .ifp-title { position: relative; margin: 0 0 30px; padding-bottom: 20px; font: 800 italic 36px/1 var(--if-font-head); text-transform: uppercase; }
.ifp-title::before, .ifp-title::after { content: ''; position: absolute; left: 0; background: var(--if-red); transform: skewX(-24deg); transform-origin: 0 100%; }
.ifp-title::before { bottom: 7px; width: 76px; height: 3px; }
.ifp-title::after { bottom: 0; width: 66px; height: 3px; }
.ifp-btn-italic { font-style: italic; font-weight: 800; font-size: 21px; min-height: 40px; padding: 0 46px; }

/* ---------- Landing page (icefighter-landingpage-sichtbarer-bereich.jpg) ---------- */
/* Two rows: the navy head of the registration (it reaches up into the photo), then its white form beside
   the two cards. The registration takes both rows as a subgrid, so its white part starts on the cards' top
   line and ends on their bottom line however tall the head is (language, wrapping). The negative margin
   puts the cards 23px below the photo while the head is about as tall as in German (212px). */
.ifp-landing { display: grid; grid-template-columns: minmax(0, 1fr) 287px; grid-template-rows: auto auto; column-gap: 20px; row-gap: 0; max-width: 1406px; margin-top: -189px; padding: 0 32px; }
/* only the registration since the login sits in the menu (wish Andre 27.10.2026) */
.ifp-landing__forms { grid-column: 2; grid-row: 1 / 3; display: grid; grid-template-rows: subgrid; position: relative; z-index: 3; }
.ifp-landing__forms .ifp-register--perks { grid-row: 1 / 3; display: grid; grid-template-rows: subgrid; }
.ifp-landing__forms .ifp-register__head { grid-row: 1; margin-bottom: 0; }
.ifp-landing__forms .ifp-register__body { grid-row: 2; padding-top: 18px; }
.ifp-landing__main { grid-column: 1; grid-row: 2; display: grid; grid-template-columns: minmax(0, 497fr) minmax(0, 518fr); gap: 20px; align-items: stretch; padding: 0 0 0 19px; }
.ifp-login .ifp-card__link { display: flex; justify-content: flex-start; }

/* first card: the three numbers, below them where the season stands (if2_public_landing_season()) */
.ifp-stats { display: flex; flex-direction: column; justify-content: space-around; padding: 16px 18px; }
.ifp-kpis { display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; padding: 8px 0 18px; }
.ifp-kpi { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 6px 10px; text-align: center; }
.ifp-kpi + .ifp-kpi { border-left: 1px solid var(--if-line); }
.ifp-kpi > .if-icon, .ifp-kpi__user .if-icon { width: 42px; height: 42px; color: var(--if-eisblau); }
.ifp-kpi .ifp-kpi__league { color: var(--if-eisblau); }
.ifp-kpi__user { position: relative; display: inline-block; }
.ifp-kpi__user::after { content: ''; position: absolute; right: -10px; top: 13px; width: 10px; height: 10px; border-radius: 50%; background: var(--if-green); }
.ifp-kpi b { font-size: 40px; line-height: 1; margin-top: 8px; }
.ifp-kpi span:last-child { font: 600 17px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .05em; }

/* heading on the same line as the first card's, the table in the middle of the space below */
.ifp-top5 { display: flex; flex-direction: column; padding: 12px 18px 10px; }
.ifp-top5__table, .ifp-top5__empty { margin-block: auto; }
.ifp .ifp-top5 .ifp-card__title { font-size: 25px; margin-bottom: 8px; }
.ifp-season { padding-top: 13px; border-top: 1px solid var(--if-line); }
.ifp-season__head { display: flex; justify-content: space-between; gap: 10px; font: 600 13px/1.2 var(--if-font-head); text-transform: uppercase; letter-spacing: .04em; color: var(--if-navy); }
.ifp-season__head b { font-weight: 700; }
.ifp-season__bar { height: 6px; margin: 9px 0 11px; border-radius: 3px; background: #E6ECF2; overflow: hidden; }
.ifp-season__bar span { display: block; height: 100%; border-radius: 3px; background: var(--if-eisblau); }
.ifp p.ifp-season__next { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 14px; color: var(--if-navy); }
.ifp-season__next .if-icon { flex: none; width: 17px; height: 17px; color: var(--if-eisblau); }
.ifp p.ifp-season__next.is-live, .ifp-season__next.is-live .if-icon { color: var(--if-red); font-weight: 600; }
.ifp-top5__table th { padding: 5px 8px; font-size: 12.5px; }
.ifp-top5__table td { padding: 8px 8px; font-size: 13.5px; }
.ifp-top5__table tbody tr:last-child td { border-bottom: 0; }
.ifp-top5__pos { width: 64px; white-space: nowrap; font-family: var(--if-font-head); font-weight: 600; font-size: 15px !important; }
.ifp-top5__star { width: 18px; height: 18px; margin: -3px 6px 0 -14px; color: var(--if-gold); }
.ifp-top5__crest { width: 36px; padding-right: 0 !important; }
.ifp-top5__crest .if-crest { width: 24px; height: 24px; }
.ifp-top5__team { font: 600 14.5px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .03em; }
.ifp-top5__table td.ctr { font-family: var(--if-font-head); font-weight: 600; font-size: 15px; }
.ifp-top5__empty { padding: 30px 6px; color: var(--if-muted); }

/* ---------- Landing page, lower part (icefighter-landingpage-unterer-bereich.jpg) ---------- */
.ifp-band { margin-top: 26px; padding: 18px 0 26px; background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .25)); }
.ifp-intro { display: grid; grid-template-columns: 616px minmax(0, 1fr); gap: 44px; align-items: start; }
.ifp-shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px 17px; }
.ifp-shot { position: relative; display: block; aspect-ratio: 193 / 87; border-radius: 4px; overflow: hidden; background: #fff; box-shadow: 0 0 0 3px #fff, var(--if-shadow); }
.ifp-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .25s; }
.ifp-shot__zoom { position: absolute; left: 50%; top: 50%; width: 32px; height: 32px; margin: -16px 0 0 -16px; border-radius: 50%; display: grid; place-items: center; background: var(--if-eisblau); color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .6); opacity: 0; transition: opacity .15s; }
.ifp-shot__zoom .if-icon { width: 18px; height: 18px; }
.ifp-shot:hover, .ifp-shot:focus-visible { box-shadow: 0 0 0 2px var(--if-eisblau), var(--if-shadow-l); outline: none; }
.ifp-shot:hover .ifp-shot__zoom, .ifp-shot:focus-visible .ifp-shot__zoom { opacity: 1; }
.ifp-shot:hover img { transform: scale(1.03); }
.ifp-intro__text { padding-top: 38px; }
.ifp-intro__text p { margin: 0 0 18px; font-size: 17px; line-height: 1.55; }
.ifp-intro__text .if-btn { margin-top: 18px; }

.ifp-features { padding-top: 12px; }
.ifp-features__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px 13px; }
.ifp-feature { display: flex; flex-direction: column; min-height: 140px; padding: 7px 18px 12px !important; color: var(--if-navy) !important; text-decoration: none !important; transition: box-shadow .15s, transform .15s; }
.ifp-feature:hover { box-shadow: var(--if-shadow-l); transform: translateY(-1px); }
.ifp-feature__icon { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 0 10px 3px; border-radius: 50%; border: 2px solid var(--if-eisblau-dark); color: var(--if-eisblau-dark); }
.ifp-feature__icon .if-icon { width: 32px; height: 32px; stroke-width: 1.6; }
.ifp .ifp-feature__title { margin: 0 0 3px; font: 700 14.5px/1.15 var(--if-font-head); text-transform: uppercase; letter-spacing: .02em; }
.ifp-feature__text { flex: 1; margin: 0 0 8px !important; font-size: 12.5px; line-height: 1.35; }
.ifp-feature__more { display: inline-flex; align-items: center; gap: 4px; font: 700 12.5px/1 var(--if-font-body); color: var(--if-eisblau-dark); }
.ifp-feature__more .if-icon { width: 13px; height: 13px; }

/* Screenshot lightbox */
.ifp-lightbox { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; gap: 18px; padding: 40px 20px; background: rgba(13, 27, 58, .86); backdrop-filter: blur(3px); }
.ifp-lightbox[hidden] { display: none; }
.ifp-lightbox__fig { margin: 0; max-width: min(1400px, calc(100vw - 160px)); text-align: center; color: #fff; }
.ifp-lightbox__fig img { display: block; max-width: 100%; max-height: calc(100vh - 120px); border-radius: 6px; box-shadow: var(--if-shadow-l); }
.ifp-lightbox__fig figcaption { margin-top: 12px; font: 700 20px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .04em; }
.ifp-lightbox__nav, .ifp-lightbox__close { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer; }
.ifp-lightbox__nav:hover, .ifp-lightbox__close:hover { background: var(--if-eisblau); }
.ifp-lightbox__close { position: absolute; top: 18px; right: 18px; }

/* ---------- Feature page (icefighter-feature-seite-frontend.jpg) ---------- */
.ifp-hero--features { --ifp-hero-h: 138px; }
.ifp-hero--features .ifp-hero__img { left: 44%; }
.ifp-hero--features::before { background: linear-gradient(90deg, var(--if-frost) 0%, rgba(238, 244, 250, .96) 44%, rgba(238, 244, 250, .4) 52%, rgba(238, 244, 250, 0) 62%); }
.ifp-hero--features .ifp-hero__title { font-size: 62px; }
.ifp-fpage { display: grid; grid-template-columns: minmax(0, 900px) 357px; justify-content: space-between; gap: 40px; padding-top: 26px; max-width: 1440px; padding-left: 72px; padding-right: 68px; }
.ifp-fpage__intro { margin: 0 0 16px !important; font-size: 17px; }
.ifp-fpage__shots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 17px; margin-bottom: 20px; }
.ifp-fshot { display: flex; flex-direction: column; padding: 9px 9px 8px !important; border-radius: 4px; color: var(--if-navy) !important; text-decoration: none !important; transition: box-shadow .15s; }
.ifp-fshot__img { position: relative; display: block; aspect-ratio: 211 / 108; overflow: hidden; background: #DDE4EC; }
.ifp-fshot__img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.ifp-fshot__label { margin-top: 9px; font: 700 17px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .02em; }
.ifp-fshot:hover { box-shadow: 0 0 0 2px var(--if-eisblau), var(--if-shadow-l); }
.ifp-fshot:hover .ifp-shot__zoom { opacity: 1; }
.ifp-pills { position: sticky; top: var(--ifp-top-h); z-index: 5; display: flex; flex-wrap: wrap; gap: 7px; padding: 8px 0 16px; border-bottom: 1px solid var(--if-line); background: linear-gradient(var(--if-frost) 80%, rgba(238, 244, 250, 0)); }
.ifp-pill {
    display: inline-flex; align-items: center; height: 28px; padding: 0 13.5px; border-radius: 14px; border: 1.5px solid var(--if-navy); background: #fff;
    font: 600 13.5px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .03em; color: var(--if-navy) !important; text-decoration: none !important;
}
.ifp-pill:hover { background: var(--if-eisblau-soft); }
.ifp-pill.is-active { background: var(--if-navy); color: #fff !important; box-shadow: inset 0 -3px 0 var(--if-red); }
.ifp-fitem { display: flex; gap: 34px; align-items: center; padding: 14px 0 16px; border-bottom: 1px solid var(--if-line); scroll-margin-top: 130px; }
.ifp-fitem:last-child { border-bottom: 0; }
.ifp-fitem__icon { flex: none; display: grid; place-items: center; width: 108px; height: 108px; border-radius: 50%; color: #12509A; background: radial-gradient(circle at 50% 40%, #E8F5FD 0%, #BFE3F7 70%, #A7D8F3 100%); box-shadow: inset 0 0 0 1px rgba(30, 134, 192, .15); }
.ifp-fitem__icon .if-icon { width: 60px; height: 60px; stroke-width: 1.7; }
.ifp .ifp-fitem__title { position: relative; margin: 0 0 18px; padding-bottom: 10px; font: 700 26px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .01em; }
.ifp-fitem__title::after { content: ''; position: absolute; left: 0; bottom: 0; width: 44px; height: 3px; background: var(--if-red); }
.ifp-fitem__body p { max-width: 480px; margin: 0 !important; font-size: 15px; line-height: 1.5; }
.ifp-fpage__side { position: relative; }
.ifp-register--big { position: sticky; top: calc(var(--ifp-top-h) + 20px); padding: 24px 20px 26px !important; border-radius: 4px; box-shadow: inset 0 0 0 1.5px var(--if-red), var(--if-shadow) !important; }
.ifp-register--big::after { width: 30px; height: 30px; background: linear-gradient(to top right, transparent calc(50% - 1px), var(--if-red) calc(50% - 1px), var(--if-red) calc(50% + 1px), transparent calc(50% + 1px)); }
.ifp-register--big.if-card--cut { clip-path: polygon(-40px -40px, calc(100% - 70px) -40px, calc(100% + 40px) 70px, calc(100% + 40px) calc(100% + 40px), -40px calc(100% + 40px)); }
.ifp .ifp-register--big .ifp-card__title { position: relative; margin-bottom: 34px; padding-bottom: 14px; font-size: 33px; }
.ifp-register--big .ifp-card__title::after { content: ''; position: absolute; left: 0; bottom: 0; width: 54px; height: 3px; background: var(--if-red); }
.ifp-register--big .if-field { margin-bottom: 22px; }
.ifp-register--big .if-field__label { margin-bottom: 9px; font-size: 13.5px; }
.ifp-register--big .if-input { height: 34px; }
.ifp-register--big .ifp-agb { margin: 6px 0 26px !important; }
.ifp-register--big .ifp-agb .if-check { font-size: 13.5px; }
.ifp-register--big .if-btn { min-height: 44px; }

/* ---------- Imprint and privacy (icefighter-impressum-frontend.jpg, icefighter-datenschutz-frontend.jpg) ---------- */
.ifp-hero--legal { --ifp-hero-h: 178px; }
.ifp-hero--legal .ifp-hero__img { left: 24%; }
.ifp-legal { display: grid; grid-template-columns: 285px minmax(0, 1fr); gap: 20px; align-items: stretch; max-width: 1312px; padding: 22px 32px 0; }
.ifp-legalnav { align-self: stretch; padding: 16px 14px !important; }
.ifp-legalnav::after { content: none; }
.ifp-legalnav--datenschutz { align-self: start; position: sticky; top: calc(var(--ifp-top-h) + 20px); }
.ifp-legalnav__item {
    display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: 4px; border-bottom: 1px solid #EDF1F5;
    font: 700 19px/1 var(--if-font-head); color: #2F8BC9 !important; text-decoration: none !important;
}
.ifp-legalnav__item span { flex: 1; }
.ifp-legalnav__item:hover { background: var(--if-frost); }
.ifp-legalnav__item.is-active { background: var(--if-navy); color: #fff !important; border-bottom-color: transparent; }
.ifp-legalnav__item + .ifp-legalnav__item { margin-top: 6px; }
.ifp-legalnav__chev { order: 2; width: 18px; height: 18px; }
.ifp-legalnav__file { width: 24px; height: 24px; stroke-width: 1.6; }
.ifp-legal__body { padding: 26px 36px 30px !important; }
.ifp-imprint { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 60px; align-content: start; }
.ifp-legal__sec { margin-bottom: 14px; }
.ifp-legal__sec--wide { grid-column: 1 / -1; }
.ifp .ifp-legal__h { position: relative; margin: 0 0 14px; padding-bottom: 9px; font: 700 19px/1.1 var(--if-font-head); text-transform: uppercase; letter-spacing: .01em; }
.ifp-legal__h::after { content: ''; position: absolute; left: 0; bottom: 0; width: 36px; height: 3px; background: var(--if-red); }
.ifp-legal__sec p { margin: 0 !important; font-size: 15px; line-height: 1.45; color: #4B5B76; }
.ifp-legal__sec--wide p { max-width: 640px; }
.ifp-privacy { padding: 14px 16px 26px !important; }
.ifp-privacy__note { margin-bottom: 12px; }
.ifp-privacy__note .if-icon { color: var(--if-navy); }
.ifp-toc { margin: 0 0 26px; padding: 4px 0 4px 16px; box-shadow: inset 3px 0 0 var(--if-eisblau); }
.ifp .ifp-toc__title { margin: 2px 0 8px; font: 700 13px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .04em; }
.ifp-toc ol { margin: 0; padding: 0; list-style: none; }
.ifp-toc li a { display: inline-flex; align-items: center; gap: 8px; padding: 2px 0; font-size: 13.5px; color: #2F8BC9; }
.ifp-toc li .if-icon { width: 13px; height: 13px; }
.ifp-privacy__sec { padding: 0 0 6px; scroll-margin-top: 90px; }
.ifp-privacy__sec .ifp-legal__h { margin: 8px 0 10px; padding-bottom: 7px; font-size: 18px; }
.ifp-privacy__sec h3 { margin: 14px 0 4px; font: 700 15.5px/1.2 var(--if-font-head); letter-spacing: .01em; }
.ifp-privacy__sec p, .ifp-privacy__sec li { margin: 0 0 7px; font-size: 13.5px; line-height: 1.5; }
.ifp-privacy__sec ul { margin: 0 0 8px; padding-left: 20px; }

/* ---------- Centred cards: password pages, login link, maintenance ---------- */
.ifp-center { position: relative; z-index: 3; display: flex; justify-content: center; }
.ifp-box { width: 100%; }
.ifp-center--forgot { margin-top: -33px; }
.ifp-center--forgot .ifp-box { max-width: 577px; padding: 30px 26px 28px !important; }
.ifp-forgot .ifp-alert { margin-bottom: 20px; padding: 12px 14px 12px 18px; font-size: 13.5px; }
.ifp-forgot .ifp-alert__icon .if-icon { width: 28px; height: 28px; }
.ifp-forgot .if-field { margin: 26px 0 20px; }
.ifp-forgot .if-input, .ifp-newpw .if-input { height: 40px; font-size: 15px; }
.ifp-forgot .if-btn, .ifp-newpw .if-btn { min-height: 40px; font-size: 18px; }
.ifp-box__back { display: flex; justify-content: center; margin-top: 22px; font: 400 15px/1 var(--if-font-body); }
.ifp-center--new { margin-top: -110px; }
.ifp-center--new .ifp-box { max-width: 441px; padding: 16px 26px 24px !important; }
.ifp .ifp-newpw__h { margin: 0 0 4px; font: 700 21px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .02em; }
.ifp-teams { margin: 0 0 20px; padding: 0; list-style: none; }
.ifp-teams li { display: flex; align-items: center; gap: 16px; height: 54px; border-bottom: 1px solid var(--if-line); font: 700 16px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .03em; }
.ifp-teams li:last-child { border-bottom: 0; }
.ifp-newpw .if-field { margin-bottom: 18px; }
.ifp-newpw .if-btn { margin-top: 10px; }
.ifp-newpw__rule { margin: 24px 0 0; font-size: 13px; }
.ifp-newpw__rule .ifp-alert__icon { color: #2F8BC9; }
.ifp-newpw.is-locked .if-input { background: #E9EDF2; }
.ifp-center--quick { margin-top: -64px; }
.ifp-center--quick .ifp-box { max-width: 389px; padding: 26px 25px 34px !important; text-align: center; }
.ifp-quick__crest { display: block; width: 116px; height: 140px; margin: 0 auto 14px; object-fit: contain; }
.ifp .ifp-quick__team { margin: 0 0 12px; font: 700 41px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .01em; }
.ifp-quick__text { margin: 0 0 24px !important; font-size: 15.5px; }
.ifp-quick__btn { min-height: 50px !important; font-size: 19px !important; gap: 14px; }
.ifp-quick__btn .if-icon { width: 24px; height: 24px; }
/* two-factor code after the password (templates/sf/if2/logincode.php) */
.ifp-code { text-align: left; }
.ifp-code__icon { display: block; width: 48px; height: 48px; margin: 0 auto 10px; color: var(--if-eisblau); }
.ifp-code__icon .if-icon { width: 48px; height: 48px; }
.ifp p.ifp-code__text { margin: 0 0 16px; text-align: center; font-size: 15px; }
.ifp-code__input { font: 600 22px/1 var(--if-font-head); letter-spacing: .25em; text-align: center; }
.ifp p.ifp-code__hint { margin: 14px 0 6px; font-size: 13px; color: var(--if-muted); }
.ifp-code__again { display: block; margin: 0 0 8px; padding: 0; border: 0; background: none; font: inherit; font-size: 14px; cursor: pointer; }
/* confirmation of the e-mail address (templates/sf/if2/anmeldung.php) */
.ifp-center--mail .ifp-login { width: 100%; max-width: 389px; text-align: left; }
.ifp-center--mail .ifp-login .ifp-alert { margin: 0 0 14px; }
.ifp .ifp-mail__title { margin: 0 0 12px; font: 700 26px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .01em; text-align: center; }
.ifp p.ifp-mail__address { margin: -10px 0 16px; text-align: center; font: 700 19px/1.2 var(--if-font-head); overflow-wrap: anywhere; }
.ifp-mail .ifp-alert { margin: 0 0 14px; text-align: left; }
.ifp .ifp-mail p.ifp-code__hint { margin: 0 0 18px; }
.ifp-mail .if-btn { gap: 10px; padding: 10px 20px; line-height: 1.15; text-align: center; }
.ifp-mail .ifp-card__link { display: flex; justify-content: center; margin-top: 16px; }
.ifp-hero--wartung + .ifp-main { padding-bottom: 40px; }
.ifp-center--wartung { margin-top: -223px; }
.ifp-center--wartung .ifp-box { max-width: 486px; padding: 20px 35px 18px 31px !important; text-align: center; }
.ifp-wartung__head { display: flex; align-items: center; gap: 18px; margin: 0 0 2px 16px; }
.ifp-wartung__icon { flex: none; display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; color: var(--if-navy); background: radial-gradient(circle at 50% 40%, #E8F5FD 0%, #BFE3F7 72%, #8CCBEF 100%); box-shadow: inset 0 0 0 1.5px rgba(13, 27, 58, .55); }
.ifp-wartung__icon .if-icon { width: 46px; height: 46px; stroke-width: 1.8; }
.ifp .ifp-wartung__title { font: 700 37px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .01em; }
.ifp-wartung__text { margin: -16px 0 22px 44px !important; font-size: 16px; line-height: 1.75; }
.ifp-wartung__btn { min-height: 46px !important; font-size: 19px !important; gap: 16px; }
.ifp-wartung__btn .if-icon { width: 26px; height: 26px; }
.ifp-wartung .ifp-alert { margin: 24px 0 0; padding: 14px 16px 14px 20px; text-align: left; font-size: 13.5px; }
.ifp-wartung .ifp-alert__icon { color: #2F8BC9; }

/* ---------- Responsive (first pass; the designer delivers the mobile version) ---------- */
@media (max-width: 1180px) {
    .ifp-landing { grid-template-columns: minmax(0, 1fr) 287px; }
    .ifp-landing__main { grid-template-columns: 1fr; padding-left: 0; align-items: start; }
    .ifp-fpage { grid-template-columns: minmax(0, 1fr) 320px; padding-left: 32px; padding-right: 32px; }
    .ifp-fpage__shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ifp-features__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ifp-intro { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
    .ifp-wrap { padding: 0 18px; }
    .ifp-logo img { height: 72px; margin: -10px 0; }
    .ifp-nav { gap: 18px; margin-right: 18px; }
    .ifp-loginbtn { padding: 0 18px 0 15px; font-size: 16px; }
    .ifp-langs { gap: 6px; }
    .ifp-lang span { display: none; }
    .ifp-hero__title { font-size: 44px; }
    .ifp-hero--landing { --ifp-hero-h: 300px; }
    .ifp-hero--landing .ifp-hero__title { font-size: 48px; }
    .ifp-hero__img, .ifp-hero--landing .ifp-hero__img { left: 0; opacity: .45; }
    .ifp-landing { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 20px; margin-top: 0; padding: 0 18px; }
    .ifp-landing__forms, .ifp-landing__forms .ifp-register--perks { display: block; }
    .ifp-landing__forms { grid-column: 1; grid-row: 1; margin-top: 18px; }
    .ifp-landing__main { grid-column: 1; grid-row: 2; padding-top: 0; }
    .ifp-features__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ifp-shots { grid-template-columns: repeat(2, 1fr); }
    .ifp-fpage, .ifp-legal { grid-template-columns: minmax(0, 1fr); padding-left: 18px; padding-right: 18px; }
    .ifp-legalnav--datenschutz { position: static; }
    .ifp-privacy { overflow-wrap: anywhere; }
    .ifp-fpage__shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ifp-fitem { gap: 18px; }
    .ifp-fitem__icon { width: 72px; height: 72px; }
    .ifp-fitem__icon .if-icon { width: 40px; height: 40px; }
    .ifp-imprint { grid-template-columns: 1fr; }
    .ifp-center { margin-top: 18px !important; }
    .ifp-wartung__text { margin: 10px 0 18px !important; }
    .ifp-lightbox__nav { position: absolute; bottom: 18px; }
    .ifp-lightbox__nav--prev { left: 18px; }
    .ifp-lightbox__nav--next { right: 18px; }
    .ifp-lightbox__fig { max-width: 100%; }
}
@media (max-width: 520px) {
    /* Home and Kontakt go, the login stays; its panel spans the screen */
    .ifp-nav { gap: 0; margin-right: 12px; }
    .ifp-nav__link { display: none; }
    .ifp-loginbtn { height: 34px; padding: 0 15px 0 13px; font-size: 15px; }
    .ifp-loginpop { position: fixed; top: var(--ifp-top-h); left: 12px; right: 12px; width: auto; margin-left: 0; }
    .ifp-loginpop::before { display: none; }
    .ifp-kpis { grid-template-columns: 1fr; }
    .ifp-kpi + .ifp-kpi { border-left: 0; border-top: 1px solid var(--if-line); }
    .ifp-features__grid { grid-template-columns: 1fr; }
    .ifp .ifp-wartung__title { font-size: 28px; }
}

/* hint for English browsers on the German start page (if2_public_start()) */
.ifp-langhint { background: var(--if-navy); color: #fff; }
.ifp-langhint__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 18px; min-height: 42px; padding-top: 6px; padding-bottom: 6px; font: 600 15px/1.3 var(--if-font-head); }
.ifp-langhint__in > span { display: inline-flex; align-items: center; gap: 8px; }
.ifp-langhint__in .if-icon { width: 18px; height: 18px; }
.ifp-langhint__link { color: var(--if-eisblau) !important; text-decoration: underline !important; text-underline-offset: 3px; }
.ifp-langhint__close { display: inline-flex; padding: 4px; border: 0; background: none; color: #fff; cursor: pointer; opacity: .75; }
.ifp-langhint__close:hover { opacity: 1; }

/* "Jetzt registrieren" in the login panel scrolls to the registration of the page, below the sticky header */
.ifp #registrieren { scroll-margin-top: calc(var(--ifp-top-h) + 16px); }