/* ==========================================================================
   IceFighter design 2: the SEO texts of the old German landing page under
   the new one (include/if2.seotext.inc.php), layout "Arena": dark section
   over an arena photo with rink lines, lead text, two glass cards.
   Everything uses the ifs- prefix.
   ========================================================================== */

.ifs { position: relative; scroll-margin-top: calc(var(--ifp-top-h, 65px) + 10px); }
.ifs p { margin: 0 0 1em; }
.ifs p:last-child { margin-bottom: 0; }

.ifs-a {
    margin: 46px 0 -46px; padding: 108px 0 116px; overflow: hidden; isolation: isolate;
    color: rgba(232, 241, 250, .86); background: var(--if-navy);
    clip-path: polygon(0 48px, 100% 0, 100% 100%, 0 100%);
}
.ifs-a__bg { position: absolute; inset: 0; z-index: -2; }
/* the photo only behind the upper part: spotlights and ice behind the title */
.ifs-a__bg-wrap { position: absolute; left: 0; right: 0; top: 0; height: min(100%, 820px); -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 55%, transparent 100%); }
.ifs-a__bg-img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center 62%; opacity: .75; }
.ifs-a__bg::after {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(80% 60% at 50% 0%, rgba(63, 169, 224, .32), rgba(63, 169, 224, 0) 70%),
        linear-gradient(180deg, rgba(13, 27, 58, .35) 0%, rgba(13, 27, 58, .7) 40%, rgba(13, 27, 58, .92) 70%, var(--if-navy) 100%);
}
.ifs-a__rink {
    position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; fill: none; stroke: rgba(255, 255, 255, .08); stroke-width: 3;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 85%); mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 85%);
}
.ifs-a__rink .ifs-a__line--red { stroke: rgba(225, 37, 47, .13); stroke-width: 10; }
.ifs-a__rink .ifs-a__line--blue { stroke: rgba(63, 169, 224, .16); stroke-width: 10; }
.ifs-a__rink .ifs-a__spot { fill: rgba(225, 37, 47, .28); stroke: none; }

.ifs-a__head { display: flex; align-items: center; gap: 22px; margin-bottom: 40px; }
.ifs-a__puck {
    flex: none; display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%;
    color: #fff; background: radial-gradient(circle at 35% 30%, #5BC0F0, var(--if-eisblau-dark) 70%);
    box-shadow: 0 0 0 6px rgba(63, 169, 224, .18), 0 0 40px rgba(63, 169, 224, .55);
}
.ifs-a__puck .if-icon { width: 40px; height: 40px; }
.ifp .ifs-a__title {
    position: relative; margin: 0; padding-bottom: 20px; max-width: 980px;
    font: 800 italic clamp(36px, 4.4vw, 60px)/.98 var(--if-font-head); text-transform: uppercase; letter-spacing: -.005em;
    color: #fff; text-shadow: 0 4px 24px rgba(0, 0, 0, .35);
}
.ifs-a__title::before, .ifs-a__title::after { content: ''; position: absolute; left: 4px; background: var(--if-red); transform: skewX(-24deg); transform-origin: 0 100%; }
.ifs-a__title::before { bottom: 7px; width: 240px; height: 5px; }
.ifs-a__title::after { bottom: 0; width: 150px; height: 3px; }

.ifs-a__lead { column-count: 2; column-gap: 56px; padding-left: 96px; font-size: 17px; line-height: 1.75; }
.ifs-a__lead p::first-letter {
    float: left; margin: 6px 12px 0 0;
    font: 800 italic 84px/.8 var(--if-font-head); color: var(--if-eisblau);
    text-shadow: 0 0 30px rgba(63, 169, 224, .5);
}
.ifs-a b { font-weight: 700; color: #fff; }
.ifs-a u { text-decoration: underline; text-decoration-color: var(--if-red); text-decoration-thickness: 2px; text-underline-offset: 4px; color: #fff; }
.ifs-a i { color: #BFE3F7; }
.ifs-a a { font-weight: 700; color: #7FCCF2 !important; text-decoration: underline; text-decoration-color: rgba(127, 204, 242, .5); text-underline-offset: 3px; }
.ifs-a a:hover { color: #fff !important; text-decoration-color: var(--if-red); }

.ifs-a__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; margin-top: 64px; }
.ifs-a__card {
    position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--if-radius) 0 var(--if-radius) var(--if-radius);
    background: linear-gradient(160deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .04));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 24px 60px rgba(0, 0, 0, .35);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 0 100%);
    transition: transform .25s, box-shadow .25s;
}
.ifs-a__card::after {
    content: ''; position: absolute; top: 0; right: 0; width: 30px; height: 30px; pointer-events: none;
    background: linear-gradient(to top right, transparent calc(50% - 2px), var(--if-eisblau) calc(50% - 2px), var(--if-eisblau) calc(50% + 1px), transparent calc(50% + 1px));
}
.ifs-a__card--accent::after { background: linear-gradient(to top right, transparent calc(50% - 2px), var(--if-red) calc(50% - 2px), var(--if-red) calc(50% + 1px), transparent calc(50% + 1px)); }
.ifs-a__card:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(63, 169, 224, .6), 0 30px 70px rgba(0, 0, 0, .45); }
/* the photo takes the height the longer card leaves, and fades into the glass */
.ifs-a__photo {
    position: relative; flex: 1 0 230px; min-height: 230px; overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
}
.ifs-a__photo-img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center 40%; transition: transform .6s; }
/* the trophy stands tall: keep its top in the picture */
.ifs-a__card--accent .ifs-a__photo-img { object-position: center 4%; }
.ifs-a__card:hover .ifs-a__photo-img { transform: scale(1.05); }
.ifs-a__body { position: relative; flex: none; margin-top: -54px; padding: 0 34px 34px; font-size: 15.5px; line-height: 1.75; }
.ifp .ifs-a__h {
    position: relative; margin: 0 0 18px; padding-bottom: 14px;
    font: 800 italic 28px/1.02 var(--if-font-head); text-transform: uppercase; color: #fff;
}
.ifs-a__h::after { content: ''; position: absolute; left: 2px; bottom: 0; width: 52px; height: 3px; background: var(--if-red); transform: skewX(-24deg); }

/* ---------- Scroll reveal (only where the browser can do it without script) ---------- */
@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        .ifs-a__card { animation: ifs-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
    }
}
@keyframes ifs-rise { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
    .ifs-a__lead { padding-left: 0; }
}
@media (max-width: 860px) {
    .ifs-a { padding: 84px 0 90px; clip-path: polygon(0 28px, 100% 0, 100% 100%, 0 100%); }
    .ifs-a__head { gap: 16px; margin-bottom: 28px; }
    .ifs-a__puck { display: none; }
    .ifs-a__photo { flex-basis: 200px; min-height: 200px; }
    .ifs-a__lead { column-count: 1; font-size: 16px; }
    .ifs-a__grid { grid-template-columns: 1fr; gap: 22px; margin-top: 40px; }
    .ifs-a__body { padding: 0 22px 26px; }
}