/* XFM-Produktseite. Alle Ergänzungen bleiben auf diese Seite begrenzt. */
.xfm-page { --text-secondary: #b0bacb; --text-muted: #9ba8bc; }
.xfm-page a:focus-visible, .xfm-page button:focus-visible, .xfm-page summary:focus-visible { outline: 3px solid #59d391; outline-offset: 5px; }
.xfm-page .xfm-skip { position: fixed; top: 8px; left: 16px; z-index: 20; padding: 12px 20px; background: #59d391; color: #07110c; transform: translateY(-160%); }
.xfm-page .xfm-skip:focus { transform: translateY(0); }
.xfm-page .header-container { gap: 24px; }
.xfm-page .xfm-nav { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 12px 26px; font-size: .82rem; }
.xfm-page .xfm-nav a { color: var(--text-secondary); text-decoration: none; }
.xfm-page .xfm-nav a:hover { color: #fff; }
.xfm-page .xfm-nav .xfm-nav-download { color: #75e3a7; border: 1px solid #335744; border-radius: 8px; padding: 10px 15px; }
.xfm-page .xfm-hero { padding-top: 24px; }
.xfm-page .back-link { margin-bottom: 42px; }
.xfm-page .xfm-hero-copy { max-width: 860px; margin-bottom: 45px; }
.xfm-page .xfm-status-dot { display: inline-block; width: 7px; height: 7px; background: #59d391; border-radius: 50%; margin-right: 7px; box-shadow: 0 0 16px #59d39166; }
.xfm-page .xfm-hero h1 { margin: 30px 0 22px; font-size: clamp(6rem, 14vw, 10rem); letter-spacing: -.07em; }
.xfm-page .xfm-hero h1 span { display: block; margin-top: 20px; font-size: clamp(1.85rem, 4.8vw, 3.6rem); letter-spacing: -.035em; line-height: 1.15; }
.xfm-page .xfm-hero-copy .xfm-tagline { color: #e3e9ef; font-size: clamp(1rem, 2vw, 1.3rem); }
.xfm-page .xfm-hero-copy .xfm-lead { max-width: 690px; margin: 18px auto 0; font-size: 1rem; line-height: 1.8; }
.xfm-page .xfm-actions { display: flex; justify-content: center; align-items: center; gap: 18px 28px; flex-wrap: wrap; margin-top: 30px; }
.xfm-page .xfm-button { display: inline-flex; justify-content: center; align-items: center; gap: 18px; min-height: 50px; padding: 14px 22px; border-radius: 9px; background: #59d391; color: #071a10; text-decoration: none; font-size: .92rem; font-weight: 700; transition: background .2s; }
.xfm-page .xfm-button:hover { background: #83e9af; }
.xfm-page .xfm-text-link { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: #c5f0d7; text-underline-offset: 5px; font-size: .9rem; }
.xfm-page .xfm-meta { margin-top: 18px; color: var(--text-muted); font-size: .78rem; }
.xfm-page .xfm-platform-note { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 10px; font-size: .78rem; line-height: 1.7; color: var(--text-muted); }
.xfm-page .xfm-platform-note a { color: #86dfac; text-underline-offset: 3px; }
.xfm-page .xfm-hero-visual { border-radius: 16px; background: #111a23; }
.xfm-page .xfm-hero-visual::after { display: none; }
.xfm-page .xfm-hero-visual figcaption { padding: 14px 20px; }
.xfm-page figcaption { color: var(--text-muted); font-size: .75rem; line-height: 1.7; padding-top: 13px; }
.xfm-page .xfm-image-label { color: #8ee1b2; margin-right: 18px; }
.xfm-page .xfm-section { padding-top: 100px; scroll-margin-top: 24px; }
.xfm-page .xfm-section-heading { max-width: 760px; margin-bottom: 30px; }
.xfm-page h2 { font-family: var(--font-heading); font-size: clamp(2.2rem, 4.8vw, 4rem); line-height: 1.08; letter-spacing: -.04em; margin: 15px 0 22px; }
.xfm-page .xfm-section-heading > p { color: var(--text-secondary); max-width: 670px; line-height: 1.8; }
.xfm-page .xfm-dev-note { border-left: 2px solid #59d391; padding: 12px 20px; background: #59d39108; color: var(--text-secondary); font-size: .84rem; line-height: 1.8; margin-bottom: 65px; max-width: 900px; }
.xfm-page .xfm-dev-note a, .xfm-page .xfm-faq a { color: #86dfac; text-underline-offset: 3px; }
.xfm-page .xfm-showcase { gap: 80px; }
.xfm-page .xfm-feature, .xfm-page .xfm-feature.reverse { gap: 40px; grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr); }
.xfm-page .xfm-feature.reverse { grid-template-columns: minmax(0, 1.4fr) minmax(0, .85fr); }
.xfm-page .feature-number { color: #77cca0; font-size: .72rem; letter-spacing: .17em; margin-bottom: 22px; font-family: var(--font-body); }
.xfm-page .xfm-feature h3 { font-family: var(--font-heading); font-size: clamp(2rem, 3.3vw, 3rem); line-height: 1.08; letter-spacing: -.035em; margin-bottom: 20px; }
.xfm-page .xfm-feature-copy > p { color: var(--text-secondary); font-size: .92rem; line-height: 1.8; margin-bottom: 15px; }
.xfm-page .xfm-feature img { border-radius: 12px; }
.xfm-page .xfm-feature-list { list-style: none; padding: 0; color: #c6d5d0; font-size: .8rem; }
.xfm-page .xfm-feature-list li { margin-top: 11px; padding-left: 17px; position: relative; }
.xfm-page .xfm-feature-list li::before { content: '+'; color: #59d391; position: absolute; left: 0; }
.xfm-page .xfm-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; border-top: 1px solid #ffffff14; border-bottom: 1px solid #ffffff14; padding: 28px 0; margin: 40px 0; }
.xfm-page .xfm-facts p { display: flex; flex-direction: column; }
.xfm-page .xfm-facts strong { color: #78dda3; font-family: var(--font-heading); font-size: 2.7rem; line-height: 1.15; }
.xfm-page .xfm-facts span { color: var(--text-secondary); font-size: .8rem; margin-top: 8px; }
.xfm-page .xfm-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.xfm-page .xfm-card-grid article { padding: 28px; border: 1px solid #ffffff12; border-radius: 14px; background: linear-gradient(135deg, #1a243780, #14182e50); }
.xfm-page .xfm-card-index { font-family: var(--font-heading); font-size: .8rem; color: #72cd99; }
.xfm-page .xfm-card-grid h3 { font-family: var(--font-heading); font-size: 1.3rem; margin: 18px 0 12px; }
.xfm-page .xfm-card-grid p { color: var(--text-secondary); font-size: .86rem; line-height: 1.8; }
.xfm-page .xfm-coop-card { display: grid; grid-template-columns: .8fr 1.2fr; gap: 45px; border: 1px solid #59d39130; border-radius: 18px; padding: 45px; background: radial-gradient(ellipse at 0 100%, #59d39112, transparent 70%); }
.xfm-page .xfm-coop-card p { color: var(--text-secondary); font-size: .93rem; line-height: 1.8; margin-bottom: 18px; }
.xfm-page .xfm-coop-card strong { color: #e2ece7; }
.xfm-page .xfm-download-card { text-align: center; padding: 60px 32px; border-radius: 20px; border: 1px solid #59d39145; background: radial-gradient(ellipse at 50% 100%, #59d39118, transparent 80%), #111a22; }
.xfm-page .xfm-download-card > p { max-width: 650px; margin: 0 auto 25px; color: var(--text-secondary); }
.xfm-page .xfm-download-card .xfm-meta { margin: 18px auto 25px; }
.xfm-page .xfm-mobile-availability { max-width: 650px; margin: 0 auto 25px; padding: 24px 0; border-top: 1px solid #59d39130; border-bottom: 1px solid #59d39130; color: var(--text-secondary); font-size: .9rem; line-height: 1.8; }
.xfm-page .xfm-mobile-availability strong { color: #e2ece7; }
.xfm-page .xfm-ios-status { margin-top: 8px; color: var(--text-muted); font-size: .82rem; }
.xfm-page .xfm-download-card .xfm-download-note { font-size: .78rem; max-width: 550px; margin-bottom: 0; color: var(--text-muted); }
.xfm-page .xfm-faq { max-width: 920px; padding-bottom: 100px; }
.xfm-page .xfm-faq details { border-bottom: 1px solid #ffffff17; }
.xfm-page .xfm-faq summary { cursor: pointer; padding: 22px 4px; font-weight: 700; font-size: .94rem; }
.xfm-page .xfm-faq summary::marker { color: #59d391; }
.xfm-page .xfm-faq details p { color: var(--text-secondary); line-height: 1.8; font-size: .9rem; padding: 0 4px 24px; }
.xfm-page .xfm-lightbox { margin: auto; }
.xfm-page .xfm-lightbox-close { font-size: 28px; line-height: 1; }
.xfm-page footer { margin-top: 0; }
.xfm-page .footer-links { flex-wrap: wrap; justify-content: center; }
@media (max-width: 900px) {
    .xfm-page .xfm-feature, .xfm-page .xfm-feature.reverse { grid-template-columns: 1fr; gap: 25px; }
    .xfm-page .xfm-feature.reverse .xfm-feature-copy { order: initial; }
    .xfm-page .xfm-feature-copy > p { max-width: 640px; }
    .xfm-page .xfm-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .xfm-page .xfm-coop-card { grid-template-columns: 1fr; gap: 15px; }
}
@media (max-width: 600px) {
    .xfm-page .header-container { align-items: flex-start; gap: 16px; }
    .xfm-page .logo { font-size: 1.6rem; }
    .xfm-page .xfm-nav { gap: 10px 16px; font-size: .73rem; }
    .xfm-page .xfm-nav .xfm-nav-download { flex-basis: 100%; text-align: center; padding: 7px 10px; }
    .xfm-page .back-link { margin-bottom: 32px; }
    .xfm-page .eyebrow { font-size: .65rem; letter-spacing: .1em; }
    .xfm-page .xfm-hero-copy .xfm-lead { font-size: .9rem; }
    .xfm-page .xfm-button { font-size: .82rem; padding: 14px 16px; gap: 10px; }
    .xfm-page .xfm-hero-visual figcaption { padding: 12px; }
    .xfm-page .xfm-image-label { display: block; }
    .xfm-page .xfm-section { padding-top: 65px; }
    .xfm-page .xfm-showcase { gap: 55px; }
    .xfm-page .xfm-dev-note { margin-bottom: 40px; padding-left: 15px; }
    .xfm-page .xfm-facts { gap: 15px; }
    .xfm-page .xfm-facts strong { font-size: 2.2rem; }
    .xfm-page .xfm-facts span { font-size: .7rem; }
    .xfm-page .xfm-card-grid { grid-template-columns: 1fr; }
    .xfm-page .xfm-card-grid article { padding: 25px; }
    .xfm-page .xfm-coop-card { padding: 28px; }
    .xfm-page .xfm-download-card { padding: 40px 22px; }
    .xfm-page .xfm-faq { padding-bottom: 65px; }
}
@media (prefers-reduced-motion: reduce) {
    .xfm-page *, .xfm-page *::before, .xfm-page *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* Echte Karriereaufnahmen: kompakter Einstieg und großzügige Bildergalerie. */
.xfm-page .container { max-width: 1320px; }
.xfm-page .back-link { margin-bottom: 36px; }
.xfm-page .xfm-hero-copy { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 48px; max-width: none; text-align: left; margin-bottom: 40px; }
.xfm-page .xfm-hero h1 { font-size: clamp(3rem, 5.6vw, 5.3rem); line-height: 1.02; letter-spacing: -.05em; margin: 18px 0 0; }
.xfm-page .xfm-hero h1 em { color: #80e2ac; font-style: normal; }
.xfm-page .xfm-hero-copy .xfm-lead { margin: 0; max-width: 510px; font-size: 1.05rem; }
.xfm-page .xfm-actions { justify-content: flex-start; gap: 10px 24px; margin-top: 22px; }
.xfm-page .xfm-hero-visual { box-shadow: 0 25px 90px -30px #000; }
.xfm-page .xfm-zoom-hint { float: right; }
.xfm-page .xfm-section { padding-top: 80px; }
.xfm-page .xfm-capture-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 50px 28px; }
.xfm-page .xfm-capture { display: flex; flex-direction: column; align-items: stretch; gap: 18px; min-width: 0; }
.xfm-page .xfm-capture-wide { grid-column: 1 / -1; }
.xfm-page .xfm-capture .xfm-feature-copy { min-height: 165px; }
.xfm-page .xfm-capture-wide .xfm-feature-copy { min-height: 0; }
.xfm-page .xfm-capture .feature-number { margin-bottom: 13px; }
.xfm-page .xfm-capture h3 { font-size: clamp(1.7rem, 2.6vw, 2.4rem); margin-bottom: 12px; }
.xfm-page .xfm-capture .xfm-feature-copy > p { max-width: 700px; margin-bottom: 0; }
.xfm-page .xfm-capture figure { background: #111923; border: 1px solid #ffffff14; border-radius: 14px; overflow: hidden; }
.xfm-page .xfm-capture img { border: 0; border-radius: 0; box-shadow: none; }
.xfm-page .xfm-capture:not(.xfm-capture-wide) img { aspect-ratio: 1.824; object-fit: contain; }
.xfm-page .xfm-capture figcaption { padding: 12px 16px; }
.xfm-page .xfm-capture:hover img { transform: none; }
.xfm-page .xfm-dev-note { margin: 32px 0 0; max-width: none; }
.xfm-page .xfm-facts { margin: 30px 0; }
.xfm-page .xfm-faq { max-width: 1000px; }
@media (max-width: 900px) {
    .xfm-page .xfm-hero-copy { grid-template-columns: 1fr; gap: 25px; }
    .xfm-page .xfm-hero-copy .xfm-lead { max-width: 650px; }
    .xfm-page .xfm-capture-grid { grid-template-columns: 1fr; gap: 35px; }
    .xfm-page .xfm-capture .xfm-feature-copy { min-height: 0; }
    .xfm-page .xfm-capture:not(.xfm-capture-wide) img { aspect-ratio: auto; }
    .xfm-page .xfm-zoom-hint { float: none; display: block; margin-top: 5px; }
}
@media (max-width: 600px) {
    .xfm-page .xfm-hero h1 { font-size: clamp(2.45rem, 9.8vw, 3.7rem); }
    .xfm-page .xfm-hero-copy { margin-bottom: 26px; }
    .xfm-page .xfm-hero-copy .xfm-lead { font-size: .94rem; }
    .xfm-page .xfm-section { padding-top: 58px; }
}

/* Teaser "Online-Liga live" */
.xfm-page .xfm-live-card { display: grid; grid-template-columns: .8fr 1.2fr; gap: 45px; border: 1px solid #ff4d5a40; border-radius: 18px; padding: 45px; background: radial-gradient(ellipse at 100% 0, #ff4d5a14, transparent 65%), radial-gradient(ellipse at 0 100%, #59d39112, transparent 70%); }
.xfm-page .xfm-live-card p { color: var(--text-secondary); font-size: .93rem; line-height: 1.8; margin-bottom: 18px; }
.xfm-page .xfm-live-card .xfm-live-stat { color: #e2ece7; font-weight: 600; }
.xfm-page .xfm-live-dot { display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 50%; background: #ff4d5a; box-shadow: 0 0 0 0 #ff4d5a99; animation: xfm-live-pulse 1.8s ease-out infinite; }
@keyframes xfm-live-pulse { 0% { box-shadow: 0 0 0 0 #ff4d5a99; } 70% { box-shadow: 0 0 0 9px #ff4d5a00; } 100% { box-shadow: 0 0 0 0 #ff4d5a00; } }
@media (prefers-reduced-motion: reduce) { .xfm-page .xfm-live-dot { animation: none; } }
@media (max-width: 900px) { .xfm-page .xfm-live-card { grid-template-columns: 1fr; gap: 15px; } }
@media (max-width: 600px) { .xfm-page .xfm-live-card { padding: 28px; } }