/* ============================================================
   MFXXL Tippspiel — App-CSS (Festival-Edition)
   ============================================================
   Eigene App-Shell fuer /tippspiel/*.
   Kein Tailwind, kein Framework — eine Datei, alles drin.
   Mobile-first. Festival-Brand: Sunset-Coral + Sky-Blue + Gold.
   ============================================================ */


/* ── 0. Reset ──────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,ul,ol{margin:0;}
ul,ol{padding-left:0;list-style:none;}
img,svg,picture,video,canvas{display:block;max-width:100%;height:auto;}
button,input,select,textarea{font:inherit;color:inherit;}
button{cursor:pointer;border:0;background:transparent;}
a{color:inherit;text-decoration:none;}
table{border-collapse:collapse;width:100%;}
hr{border:0;border-top:1px solid var(--c-border);margin:24px 0;}


/* ── 1. Design Tokens ──────────────────────────────────────── */
:root{
    /* Brand — Festival-Sunset */
    --c-sun-50:#fff7ed;
    --c-sun-100:#ffedd5;
    --c-sun-200:#fed7aa;
    --c-sun-400:#fb923c;
    --c-sun-500:#f97316;   /* PRIMARY — Mallorca-Sunset-Orange */
    --c-sun-600:#ea580c;
    --c-sun-700:#c2410c;

    --c-sky-50:#f0f9ff;
    --c-sky-100:#e0f2fe;
    --c-sky-400:#38bdf8;
    --c-sky-500:#0ea5e9;   /* SECONDARY — Mallorca-Sky */
    --c-sky-600:#0284c7;

    --c-gold-100:#fef3c7;
    --c-gold-300:#fcd34d;
    --c-gold-400:#facc15;
    --c-gold-500:#eab308;
    --c-gold-600:#ca8a04;

    --c-pink-500:#ec4899;
    --c-purple-500:#a855f7;

    /* Neutrals */
    --c-ink:#0b1220;       /* fast schwarz, leicht warm */
    --c-ink-soft:#1e293b;
    --c-fg:#0f172a;
    --c-fg-2:#334155;
    --c-fg-3:#64748b;
    --c-fg-4:#94a3b8;
    --c-border:#e2e8f0;
    --c-border-strong:#cbd5e1;
    --c-bg:#fafbfc;
    --c-bg-soft:#f1f5f9;
    --c-bg-card:#ffffff;

    /* Semantic */
    --c-success:#16a34a;
    --c-success-bg:#dcfce7;
    --c-warn:#d97706;
    --c-warn-bg:#fef3c7;
    --c-danger:#dc2626;
    --c-danger-bg:#fee2e2;
    --c-info:#0284c7;
    --c-info-bg:#e0f2fe;

    /* Boss-Crew-Akzent */
    --c-boss:#a855f7;
    --c-boss-bg:#f3e8ff;

    /* Deutschland-Spiel-Akzent (Schwarz-Rot-Gold-Vibe) */
    --c-de:#dc2626;
    --c-de-bg:#fef2f2;

    /* Live */
    --c-live:#ef4444;

    /* Typo */
    --f-sans:'Inter','SF Pro Text',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    --f-display:'Bricolage Grotesque','Inter',-apple-system,sans-serif;

    /* Spacing-Scale */
    --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px;
    --s-6:24px; --s-7:32px; --s-8:40px; --s-9:48px; --s-10:64px;

    /* Radius */
    --r-1:6px; --r-2:10px; --r-3:14px; --r-4:20px; --r-5:28px; --r-pill:9999px;

    /* Shadow */
    --sh-1:0 1px 2px rgba(15,23,42,.06),0 1px 3px rgba(15,23,42,.04);
    --sh-2:0 4px 6px -2px rgba(15,23,42,.05),0 10px 15px -3px rgba(15,23,42,.10);
    --sh-3:0 10px 25px -5px rgba(15,23,42,.12),0 20px 30px -10px rgba(15,23,42,.10);
    --sh-glow:0 0 0 4px rgba(249,115,22,.18);
    --sh-glow-sky:0 0 0 4px rgba(14,165,233,.18);

    /* Layout */
    --topbar-h:48px;
    --tabbar-h:54px;
    --container-w:760px;

    /* Motion */
    --ease:cubic-bezier(.32,.72,0,1);
    --d-fast:120ms;
    --d-mid:200ms;
    --d-slow:320ms;
}

/* ── 2. Body / Layout ──────────────────────────────────────── */
html,body{
    background:var(--c-bg);
    color:var(--c-fg);
    font-family:var(--f-sans);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}
body.mfxxl-body{
    min-height:100vh; min-height:100dvh;
    padding-top:calc(var(--topbar-h) + env(safe-area-inset-top,0));
    padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom,0));
    overscroll-behavior-y:contain;
}
@media (min-width:900px){
    body.mfxxl-body{
        padding-bottom:env(safe-area-inset-bottom,0);
    }
}

.mfxxl-main{padding:0;}
.mfxxl-container{
    max-width:var(--container-w);
    margin:0 auto;
    padding:var(--s-4) var(--s-4) var(--s-9);
}
@media (min-width:768px){
    .mfxxl-container{padding:var(--s-6) var(--s-6) var(--s-10);}
}


/* ── 3. Top-Bar ────────────────────────────────────────────── */
.mfxxl-topbar{
    position:fixed;top:0;left:0;right:0;z-index:50;
    height:calc(var(--topbar-h) + env(safe-area-inset-top,0));
    padding-top:env(safe-area-inset-top,0);
    background:linear-gradient(180deg,var(--c-ink) 0%,var(--c-ink-soft) 100%);
    color:#fff;
    box-shadow:0 1px 0 rgba(255,255,255,.04) inset,var(--sh-1);
    backdrop-filter:saturate(180%) blur(20px);
    -webkit-backdrop-filter:saturate(180%) blur(20px);
}
.mfxxl-topbar__inner{
    display:flex;align-items:center;gap:var(--s-2);
    height:var(--topbar-h);
    max-width:1180px;margin:0 auto;
    padding:0 var(--s-3);
    padding-left:max(var(--s-3), env(safe-area-inset-left));
    padding-right:max(var(--s-3), env(safe-area-inset-right));
}
.mfxxl-topbar__brand{
    display:flex;align-items:center;gap:var(--s-2);
    flex:0 0 auto;
    color:#fff;
}
.mfxxl-topbar__logo{
    height:28px;width:auto;
    filter:drop-shadow(0 1px 2px rgba(0,0,0,.25));
}
.mfxxl-topbar__brandmark{font-size:18px;line-height:1;}
.mfxxl-topbar__title{
    font-family:var(--f-display);
    font-weight:800;
    font-size:15px;
    letter-spacing:-.01em;
    color:#fff;
}
@media (max-width:640px){
    .mfxxl-topbar__title{display:none;}
    .mfxxl-topbar__logo{height:30px;}
}

.mfxxl-topbar__nav{
    display:none;
    flex:1;
    margin-left:var(--s-4);
    gap:var(--s-1);
}
@media (min-width:900px){
    .mfxxl-topbar__nav{display:flex;align-items:center;}
}
.mfxxl-topbar__link{
    padding:var(--s-2) var(--s-3);
    border-radius:var(--r-2);
    font-size:14px;font-weight:600;
    color:rgba(255,255,255,.72);
    transition:background var(--d-fast),color var(--d-fast);
    white-space:nowrap;
}
.mfxxl-topbar__link:hover{background:rgba(255,255,255,.08);color:#fff;}
.mfxxl-topbar__link.is-active{
    background:linear-gradient(135deg,var(--c-sun-500),var(--c-sun-600));
    color:#fff;
    box-shadow:0 1px 2px rgba(249,115,22,.4),0 4px 8px rgba(249,115,22,.25);
}

.mfxxl-topbar__user{
    margin-left:auto;
    display:flex;align-items:center;gap:var(--s-2);
    padding:var(--s-1) var(--s-3) var(--s-1) var(--s-1);
    border-radius:var(--r-pill);
    background:rgba(255,255,255,.08);
    transition:background var(--d-fast);
}
.mfxxl-topbar__user:hover{background:rgba(255,255,255,.16);}
.mfxxl-topbar__username{
    font-size:13px;font-weight:600;color:#fff;
}
@media (max-width:640px){
    .mfxxl-topbar__username{display:none;}
    .mfxxl-topbar__user{padding:var(--s-1);}
}
.mfxxl-topbar__cta{margin-left:auto;}


/* ── 4. Bottom-Tabbar (Mobile) ─────────────────────────────── */
.mfxxl-tabbar{
    position:fixed;left:0;right:0;bottom:0;z-index:50;
    height:calc(var(--tabbar-h) + env(safe-area-inset-bottom,0));
    padding-bottom:env(safe-area-inset-bottom,0);
    display:flex;
    background:rgba(255,255,255,.96);
    backdrop-filter:saturate(180%) blur(20px);
    -webkit-backdrop-filter:saturate(180%) blur(20px);
    border-top:1px solid var(--c-border);
}
.mfxxl-tabbar__item{
    flex:1;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:2px;
    height:var(--tabbar-h);
    font-size:9.5px;font-weight:600;
    color:var(--c-fg-3);
    transition:color var(--d-fast),transform var(--d-fast);
}
.mfxxl-tabbar__item svg{width:20px;height:20px;}
.mfxxl-tabbar__item:active{transform:scale(.92);}
.mfxxl-tabbar__item.is-active{color:var(--c-sun-500);}
.mfxxl-tabbar__item.is-active svg{
    filter:drop-shadow(0 2px 6px rgba(249,115,22,.4));
}
@media (min-width:900px){
    .mfxxl-tabbar{display:none;}
}


/* ── 5. Typography ─────────────────────────────────────────── */
.mfxxl-display{
    font-family:var(--f-display);
    font-weight:800;
    line-height:1.05;
    letter-spacing:-.02em;
    color:var(--c-fg);
}
.mfxxl-display--xxl{font-size:clamp(34px,7vw,52px);}
.mfxxl-display--xl{font-size:clamp(28px,5vw,40px);}
.mfxxl-display--lg{font-size:clamp(22px,4vw,30px);}

.mfxxl-h1{font-family:var(--f-display);font-size:28px;font-weight:800;line-height:1.1;letter-spacing:-.015em;color:var(--c-fg);margin:0;}
.mfxxl-h2{font-family:var(--f-display);font-size:22px;font-weight:700;line-height:1.15;letter-spacing:-.01em;color:var(--c-fg);margin:0;}
.mfxxl-h3{font-size:17px;font-weight:700;color:var(--c-fg);margin:0;}
.mfxxl-h4{font-size:14px;font-weight:700;color:var(--c-fg-2);margin:0;text-transform:uppercase;letter-spacing:.05em;}
.mfxxl-day-header{
    font-size:13px;font-weight:700;color:var(--c-fg-2);margin:0 0 10px;
    text-transform:uppercase;letter-spacing:.05em;
    display:flex;align-items:center;gap:8px;
}

.mfxxl-text{font-size:15px;line-height:1.55;color:var(--c-fg-2);}
.mfxxl-text--sm{font-size:13px;color:var(--c-fg-3);}
.mfxxl-text--lg{font-size:17px;color:var(--c-fg-2);line-height:1.5;}
.mfxxl-muted{color:var(--c-fg-3);}
.mfxxl-strong{font-weight:700;color:var(--c-fg);}


/* ── 6. Buttons ─────────────────────────────────────────────── */
.mfxxl-btn{
    display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
    padding:14px 22px;
    min-height:48px;
    border-radius:var(--r-3);
    font-size:15px;font-weight:700;
    line-height:1;
    background:var(--c-bg-card);
    color:var(--c-fg);
    border:1px solid var(--c-border);
    transition:transform var(--d-fast) var(--ease),box-shadow var(--d-fast),background var(--d-fast);
    user-select:none;
    text-decoration:none;
}
.mfxxl-btn:hover{box-shadow:var(--sh-2);}
.mfxxl-btn:active{transform:scale(.97);}
.mfxxl-btn:disabled,.mfxxl-btn.is-disabled{opacity:.5;cursor:not-allowed;transform:none;}

.mfxxl-btn--primary{
    background:linear-gradient(135deg,var(--c-sun-500),var(--c-sun-600));
    color:#fff;border:0;
    box-shadow:0 1px 3px rgba(249,115,22,.4),0 6px 14px rgba(249,115,22,.30);
}
.mfxxl-btn--primary:hover{
    box-shadow:0 2px 4px rgba(249,115,22,.45),0 12px 24px rgba(249,115,22,.40);
    filter:brightness(1.05);
}

.mfxxl-btn--accent{
    background:linear-gradient(135deg,var(--c-gold-400),var(--c-gold-500));
    color:var(--c-ink);border:0;
    box-shadow:0 1px 3px rgba(234,179,8,.4),0 6px 14px rgba(234,179,8,.25);
}
.mfxxl-btn--accent:hover{filter:brightness(1.05);box-shadow:0 2px 4px rgba(234,179,8,.45),0 12px 24px rgba(234,179,8,.35);}

.mfxxl-btn--sky{
    background:linear-gradient(135deg,var(--c-sky-500),var(--c-sky-600));
    color:#fff;border:0;
    box-shadow:0 1px 3px rgba(14,165,233,.4),0 6px 14px rgba(14,165,233,.30);
}
.mfxxl-btn--sky:hover{filter:brightness(1.05);}

.mfxxl-btn--ghost{
    background:transparent;
    border:1px solid var(--c-border-strong);
    color:var(--c-fg);
}
.mfxxl-btn--ghost:hover{background:var(--c-bg-soft);}

.mfxxl-btn--dark{
    background:var(--c-ink);color:#fff;border:0;
}
.mfxxl-btn--dark:hover{background:var(--c-ink-soft);}

.mfxxl-btn--danger{
    background:var(--c-danger);color:#fff;border:0;
}

.mfxxl-btn--sm{padding:8px 14px;min-height:36px;font-size:13px;border-radius:var(--r-2);}
.mfxxl-btn--lg{padding:18px 28px;min-height:56px;font-size:17px;border-radius:var(--r-4);}
.mfxxl-btn--block{display:flex;width:100%;}
.mfxxl-btn--icon{padding:12px;min-width:48px;}


/* ── 7. Form Controls ──────────────────────────────────────── */
.mfxxl-field{margin-bottom:var(--s-4);}
.mfxxl-label{
    display:block;
    font-size:13px;font-weight:600;
    color:var(--c-fg-2);
    margin-bottom:var(--s-2);
    text-transform:uppercase;letter-spacing:.04em;
}
.mfxxl-input,
.mfxxl-select,
.mfxxl-textarea{
    width:100%;
    padding:14px var(--s-4);
    min-height:50px;
    border-radius:var(--r-3);
    background:var(--c-bg-card);
    border:1.5px solid var(--c-border);
    font-size:16px; /* iOS-Zoom-Schutz */
    color:var(--c-fg);
    transition:border-color var(--d-fast),box-shadow var(--d-fast),background var(--d-fast);
    -webkit-appearance:none;appearance:none;
}
.mfxxl-input:focus,
.mfxxl-select:focus,
.mfxxl-textarea:focus{
    outline:0;
    border-color:var(--c-sun-500);
    box-shadow:var(--sh-glow);
}
.mfxxl-input::placeholder{color:var(--c-fg-4);}
.mfxxl-select{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 16px center;
    padding-right:42px;
}

.mfxxl-help{display:block;font-size:12px;color:var(--c-fg-3);margin-top:var(--s-1);}
.mfxxl-err{display:block;font-size:13px;color:var(--c-danger);margin-top:var(--s-1);font-weight:500;}

.mfxxl-check{
    display:flex;align-items:flex-start;gap:var(--s-3);
    padding:var(--s-3);
    border-radius:var(--r-2);
    cursor:pointer;
    transition:background var(--d-fast);
}
.mfxxl-check:hover{background:var(--c-bg-soft);}
.mfxxl-check input[type="checkbox"]{
    width:20px;height:20px;
    accent-color:var(--c-sun-500);
    margin:0;
    flex-shrink:0;
}
.mfxxl-check span{font-size:14px;color:var(--c-fg-2);line-height:1.5;}


/* ── 8. Cards ──────────────────────────────────────────────── */
.mfxxl-card{
    background:var(--c-bg-card);
    border-radius:var(--r-4);
    padding:var(--s-5);
    box-shadow:var(--sh-1);
    border:1px solid var(--c-border);
}
@media (min-width:600px){
    .mfxxl-card{padding:var(--s-6);}
}
.mfxxl-card--flat{box-shadow:none;}
.mfxxl-card--elevated{box-shadow:var(--sh-2);}
.mfxxl-card--accent{
    background:linear-gradient(135deg,var(--c-sun-50),var(--c-gold-100));
    border-color:var(--c-sun-200);
}
.mfxxl-card--sky{
    background:linear-gradient(135deg,var(--c-sky-50),#fff);
    border-color:var(--c-sky-100);
}
.mfxxl-card--danger{
    background:var(--c-danger-bg);border-color:#fecaca;color:#7f1d1d;
}
.mfxxl-card--success{
    background:var(--c-success-bg);border-color:#bbf7d0;color:#14532d;
}
.mfxxl-card--warn{
    background:var(--c-warn-bg);border-color:#fcd34d;color:#7c2d12;
}
.mfxxl-card--boss{
    background:linear-gradient(135deg,var(--c-boss-bg),#faf5ff);
    border-color:#e9d5ff;
}

.mfxxl-card__head{
    display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
    margin-bottom:var(--s-4);
}
.mfxxl-card__body+.mfxxl-card__body{margin-top:var(--s-4);}


/* ── 9. Hero ───────────────────────────────────────────────── */
.mfxxl-hero{
    position:relative;
    margin-bottom:var(--s-6);
    padding:var(--s-7) var(--s-6) var(--s-8);
    border-radius:var(--r-5);
    background:linear-gradient(135deg,var(--c-sun-500) 0%,var(--c-pink-500) 50%,var(--c-purple-500) 100%);
    color:#fff;
    overflow:hidden;
    box-shadow:var(--sh-3);
}
.mfxxl-hero::before{
    content:"";position:absolute;inset:0;
    background:
        radial-gradient(circle at 80% 10%,rgba(255,255,255,.18),transparent 50%),
        radial-gradient(circle at 10% 90%,rgba(255,255,255,.10),transparent 50%);
    pointer-events:none;
}
.mfxxl-hero__inner{position:relative;z-index:1;}
.mfxxl-hero__eyebrow{
    display:inline-flex;align-items:center;gap:var(--s-2);
    padding:var(--s-1) var(--s-3);
    border-radius:var(--r-pill);
    background:rgba(255,255,255,.18);
    backdrop-filter:blur(8px);
    font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
    margin-bottom:var(--s-3);
}
.mfxxl-hero__title{
    font-family:var(--f-display);
    font-size:clamp(28px,7vw,46px);
    font-weight:800;
    line-height:1.02;
    letter-spacing:-.025em;
    margin-bottom:var(--s-3);
    text-shadow:0 1px 2px rgba(0,0,0,.10);
}
.mfxxl-hero__sub{
    font-size:16px;
    line-height:1.5;
    color:rgba(255,255,255,.92);
    max-width:540px;
}
.mfxxl-hero__cta{
    margin-top:var(--s-5);
    display:flex;flex-wrap:wrap;gap:var(--s-3);
}
.mfxxl-hero__countdown{
    display:inline-flex;align-items:center;gap:var(--s-2);
    margin-top:var(--s-4);
    padding:var(--s-2) var(--s-4);
    border-radius:var(--r-pill);
    background:rgba(0,0,0,.18);
    backdrop-filter:blur(8px);
    font-size:13px;font-weight:600;
}
.mfxxl-hero__countdown strong{color:#fff;font-size:14px;}


/* ── 10. Section / List ────────────────────────────────────── */
.mfxxl-section{margin-top:var(--s-7);margin-bottom:var(--s-6);}
.mfxxl-section__head{
    display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-3);
    margin-bottom:var(--s-4);
}
.mfxxl-section__title{
    font-family:var(--f-display);font-size:22px;font-weight:800;color:var(--c-fg);
    letter-spacing:-.01em;
}
.mfxxl-section__link{
    font-size:13px;font-weight:600;color:var(--c-sun-600);
}
.mfxxl-section__link:hover{color:var(--c-sun-700);}

.mfxxl-grid{display:grid;gap:var(--s-3);}
.mfxxl-grid--2{grid-template-columns:repeat(2,1fr);}
.mfxxl-grid--3{grid-template-columns:repeat(3,1fr);}
@media (max-width:640px){
    .mfxxl-grid--3{grid-template-columns:1fr;}
    .mfxxl-grid--2.mfxxl-grid--stack{grid-template-columns:1fr;}
}

.mfxxl-stack{display:flex;flex-direction:column;gap:var(--s-3);}
.mfxxl-stack--sm{gap:var(--s-2);}
.mfxxl-stack--lg{gap:var(--s-5);}
.mfxxl-row{display:flex;align-items:center;gap:var(--s-3);}
.mfxxl-row--wrap{flex-wrap:wrap;}
.mfxxl-row--between{justify-content:space-between;}


/* ── 11. Badge / Chip ──────────────────────────────────────── */
.mfxxl-badge{
    display:inline-flex;align-items:center;gap:6px;
    padding:4px 10px;
    border-radius:var(--r-pill);
    font-size:11px;font-weight:700;letter-spacing:.02em;
    background:var(--c-bg-soft);color:var(--c-fg-2);
    line-height:1;
}
.mfxxl-badge--success{background:var(--c-success-bg);color:#14532d;}
.mfxxl-badge--warn{background:var(--c-warn-bg);color:#7c2d12;}
.mfxxl-badge--danger{background:var(--c-danger-bg);color:#7f1d1d;}
.mfxxl-badge--info{background:var(--c-info-bg);color:#0c4a6e;}
.mfxxl-badge--boss{background:var(--c-boss-bg);color:#6b21a8;}
.mfxxl-badge--de{background:var(--c-de-bg);color:#7f1d1d;}
.mfxxl-badge--live{
    background:var(--c-live);color:#fff;
    animation:mfxxl-pulse 2s infinite;
}
.mfxxl-badge--gold{background:linear-gradient(135deg,var(--c-gold-400),var(--c-gold-500));color:var(--c-ink);}

.mfxxl-chip{
    display:inline-flex;align-items:center;gap:var(--s-2);
    padding:8px 14px;
    border-radius:var(--r-pill);
    font-size:13px;font-weight:600;
    background:var(--c-bg-soft);color:var(--c-fg-2);
    border:1px solid var(--c-border);
    transition:background var(--d-fast),color var(--d-fast),border-color var(--d-fast);
}
.mfxxl-chip:hover{background:var(--c-bg-card);}
.mfxxl-chip.is-active{
    background:var(--c-ink);color:#fff;border-color:var(--c-ink);
}


/* ── 12. Avatar ─────────────────────────────────────────────── */
.mfxxl-avatar{
    display:inline-flex;align-items:center;justify-content:center;
    width:36px;height:36px;
    border-radius:var(--r-pill);
    background:linear-gradient(135deg,var(--c-sun-400),var(--c-pink-500));
    color:#fff;
    font-weight:700;font-size:14px;
    flex-shrink:0;
    text-transform:uppercase;
    user-select:none;
}
.mfxxl-avatar--xs{width:26px;height:26px;font-size:11px;}
.mfxxl-avatar--sm{width:32px;height:32px;font-size:12px;}
.mfxxl-avatar--lg{width:48px;height:48px;font-size:18px;}
.mfxxl-avatar--xl{width:72px;height:72px;font-size:26px;}
.mfxxl-avatar--sky{background:linear-gradient(135deg,var(--c-sky-400),var(--c-sky-600));}
.mfxxl-avatar--gold{background:linear-gradient(135deg,var(--c-gold-400),var(--c-gold-600));color:var(--c-ink);}
.mfxxl-avatar--boss{background:linear-gradient(135deg,var(--c-boss),var(--c-pink-500));}
.mfxxl-avatar--ink{background:var(--c-ink);color:#fff;}


/* ── 13. Tabelle / Ranking ─────────────────────────────────── */
.mfxxl-rank-list{display:flex;flex-direction:column;gap:6px;}
.mfxxl-rank{
    display:flex;align-items:center;gap:10px;
    padding:8px 12px;
    background:var(--c-bg-card);
    border-radius:var(--r-2);
    border:1px solid var(--c-border);
    transition:transform var(--d-fast),box-shadow var(--d-fast);
    min-height:44px;
}
.mfxxl-rank:hover{transform:translateY(-1px);box-shadow:var(--sh-2);}
.mfxxl-rank.is-self{
    border-color:var(--c-sun-500);
    background:linear-gradient(90deg,var(--c-sun-50),#fff 40%);
    box-shadow:var(--sh-glow);
}
.mfxxl-rank.is-podium-1{
    background:linear-gradient(90deg,var(--c-gold-100),#fff 60%);
    border-color:var(--c-gold-300);
}
.mfxxl-rank.is-boss{
    background:linear-gradient(90deg,var(--c-boss-bg),#fff 60%);
    border-color:#e9d5ff;
}
.mfxxl-rank__pos{
    flex:0 0 24px;
    font-family:var(--f-display);font-size:14px;font-weight:800;
    color:var(--c-fg-3);
    text-align:center;
}
.mfxxl-rank.is-podium-1 .mfxxl-rank__pos{color:var(--c-gold-600);font-size:16px;}
.mfxxl-rank__name{
    flex:1;min-width:0;
    font-weight:700;font-size:14px;color:var(--c-fg);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.mfxxl-rank__meta{font-size:11px;color:var(--c-fg-3);font-weight:500;}
.mfxxl-rank__pts{
    font-family:var(--f-display);font-size:16px;font-weight:800;
    color:var(--c-fg);
    flex:0 0 auto;
    text-align:right;
    line-height:1;
    display:flex;align-items:baseline;gap:4px;
}
.mfxxl-rank__pts small{
    font-family:var(--f-sans);font-size:9.5px;font-weight:600;
    color:var(--c-fg-3);text-transform:uppercase;letter-spacing:.04em;
}


/* ── 14. Match-Card ────────────────────────────────────────── */
.mfxxl-match{
    background:var(--c-bg-card);
    border-radius:var(--r-3);
    border:1px solid var(--c-border);
    padding:var(--s-4);
    transition:box-shadow var(--d-fast),transform var(--d-fast);
}
.mfxxl-match:hover{box-shadow:var(--sh-2);}
.mfxxl-match--de{border-left:4px solid var(--c-de);}
.mfxxl-match--live{
    border-color:var(--c-live);
    box-shadow:0 0 0 3px rgba(239,68,68,.10),var(--sh-1);
}
.mfxxl-match__when{
    font-size:12px;color:var(--c-fg-3);font-weight:600;
    margin-bottom:var(--s-3);
    display:flex;align-items:center;gap:var(--s-2);
}
.mfxxl-match__teams{
    display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--s-3);
}
.mfxxl-match__team{
    display:flex;align-items:center;gap:var(--s-2);
    font-weight:700;font-size:15px;color:var(--c-fg);
}
.mfxxl-match__team--home{justify-content:flex-end;text-align:right;}
.mfxxl-match__team--away{justify-content:flex-start;}
.mfxxl-match__score{
    font-family:var(--f-display);
    font-size:22px;font-weight:800;
    background:var(--c-bg-soft);
    padding:var(--s-2) var(--s-3);
    border-radius:var(--r-2);
    color:var(--c-fg);
    min-width:60px;text-align:center;
}
.mfxxl-match__score--vs{
    font-size:13px;color:var(--c-fg-3);background:transparent;
    font-family:var(--f-sans);
}
.mfxxl-match__score--live{color:var(--c-live);}
.mfxxl-match__tipp{
    margin-top:var(--s-3);padding-top:var(--s-3);
    border-top:1px dashed var(--c-border);
    display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
}
.mfxxl-match__tipp-input{
    display:flex;gap:var(--s-2);align-items:center;
}
.mfxxl-match__tipp-input input[type="number"]{
    width:54px;text-align:center;
    padding:10px;
    min-height:42px;
    border:1.5px solid var(--c-border);
    border-radius:var(--r-2);
    font-size:18px;font-weight:700;
    background:var(--c-bg-card);
    color:var(--c-fg);
    -moz-appearance:textfield;
}
.mfxxl-match__tipp-input input[type="number"]::-webkit-outer-spin-button,
.mfxxl-match__tipp-input input[type="number"]::-webkit-inner-spin-button{
    -webkit-appearance:none;margin:0;
}
.mfxxl-match__tipp-input input[type="number"]:focus{
    outline:0;border-color:var(--c-sun-500);box-shadow:var(--sh-glow);
}
.mfxxl-match__tipp-sep{color:var(--c-fg-3);font-weight:700;}


/* ── 15. Banner / Toast / Live-Bar ─────────────────────────── */
.mfxxl-banner{
    padding:var(--s-3) var(--s-4);
    border-radius:var(--r-2);
    font-size:14px;font-weight:500;
    display:flex;align-items:center;gap:var(--s-2);
    margin-bottom:var(--s-4);
}
.mfxxl-banner--success{background:var(--c-success-bg);color:#14532d;}
.mfxxl-banner--warn{background:var(--c-warn-bg);color:#7c2d12;}
.mfxxl-banner--danger{background:var(--c-danger-bg);color:#7f1d1d;}
.mfxxl-banner--info{background:var(--c-info-bg);color:#0c4a6e;}

.mfxxl-live-bar{
    display:flex;align-items:center;gap:var(--s-2);overflow-x:auto;
    padding:var(--s-2) var(--s-3);
    background:linear-gradient(90deg,#fef2f2,#fee2e2);
    border-radius:var(--r-2);
    margin-bottom:var(--s-4);
}
.mfxxl-live-pill{
    display:inline-flex;align-items:center;gap:6px;
    padding:6px 12px;
    background:#fff;
    border-radius:var(--r-pill);
    font-size:12px;font-weight:700;color:var(--c-live);
    white-space:nowrap;
    box-shadow:var(--sh-1);
}
.mfxxl-live-dot{
    width:8px;height:8px;border-radius:50%;background:var(--c-live);
    animation:mfxxl-pulse 1.5s infinite;
}
@keyframes mfxxl-pulse{
    0%,100%{opacity:1;}
    50%{opacity:.35;}
}


/* ── 16. Empty State ───────────────────────────────────────── */
.mfxxl-empty{
    text-align:center;
    padding:var(--s-8) var(--s-4);
}
.mfxxl-empty__icon{
    width:80px;height:80px;
    margin:0 auto var(--s-4);
    border-radius:var(--r-4);
    background:linear-gradient(135deg,var(--c-sun-50),var(--c-gold-100));
    display:flex;align-items:center;justify-content:center;
    color:var(--c-sun-600);
    font-size:36px;
}
.mfxxl-empty__title{
    font-family:var(--f-display);font-size:20px;font-weight:700;
    color:var(--c-fg);margin-bottom:var(--s-2);
}
.mfxxl-empty__text{
    font-size:14px;color:var(--c-fg-3);max-width:380px;margin:0 auto var(--s-4);
}


/* ── 17. Onboarding-Steps ──────────────────────────────────── */
.mfxxl-steps{
    display:grid;gap:var(--s-3);
    grid-template-columns:repeat(3,1fr);
    margin:var(--s-5) 0 var(--s-6);
}
@media (max-width:640px){
    .mfxxl-steps{grid-template-columns:1fr;}
}
.mfxxl-step{
    padding:var(--s-4);
    border-radius:var(--r-3);
    background:var(--c-bg-card);
    border:1px solid var(--c-border);
    text-align:left;
    transition:transform var(--d-fast),box-shadow var(--d-fast),border-color var(--d-fast);
}
.mfxxl-step:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:var(--c-sun-200);}
.mfxxl-step__num{
    display:inline-flex;align-items:center;justify-content:center;
    width:34px;height:34px;
    border-radius:var(--r-pill);
    background:linear-gradient(135deg,var(--c-sun-500),var(--c-sun-600));
    color:#fff;
    font-family:var(--f-display);font-weight:800;font-size:16px;
    margin-bottom:var(--s-3);
    box-shadow:0 4px 12px rgba(249,115,22,.30);
}
.mfxxl-step__title{
    font-family:var(--f-display);font-size:16px;font-weight:700;
    color:var(--c-fg);margin-bottom:6px;
}
.mfxxl-step__text{
    font-size:13px;color:var(--c-fg-3);line-height:1.45;
}


/* ── 18. Stat-Card ─────────────────────────────────────────── */
.mfxxl-stats{
    display:grid;gap:var(--s-3);
    grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
}
.mfxxl-stat{
    padding:var(--s-4);
    border-radius:var(--r-3);
    background:var(--c-bg-card);
    border:1px solid var(--c-border);
}
.mfxxl-stat__label{
    font-size:12px;text-transform:uppercase;letter-spacing:.04em;
    color:var(--c-fg-3);font-weight:600;margin-bottom:var(--s-1);
}
.mfxxl-stat__value{
    font-family:var(--f-display);font-size:26px;font-weight:800;
    color:var(--c-fg);line-height:1;
}
.mfxxl-stat__delta{
    font-size:12px;color:var(--c-fg-3);margin-top:6px;
}


/* ── 19. FAQ-Accordion ─────────────────────────────────────── */
.mfxxl-faq-item{
    border-bottom:1px solid var(--c-border);
    padding:var(--s-4) 0;
}
.mfxxl-faq-q{
    font-family:var(--f-display);font-size:17px;font-weight:700;
    color:var(--c-fg);
    cursor:pointer;
    display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
    list-style:none;
}
.mfxxl-faq-q::-webkit-details-marker{display:none;}
.mfxxl-faq-q::after{
    content:"";display:block;
    width:10px;height:10px;
    border-right:2px solid var(--c-fg-3);
    border-bottom:2px solid var(--c-fg-3);
    transform:rotate(45deg);
    transition:transform var(--d-fast);
}
.mfxxl-faq-item[open] .mfxxl-faq-q::after{transform:rotate(-135deg);}
.mfxxl-faq-a{
    margin-top:var(--s-3);
    color:var(--c-fg-2);font-size:15px;line-height:1.6;
}


/* ── 20. Utilities ─────────────────────────────────────────── */
.mfxxl-center{text-align:center;}
.mfxxl-mt-1{margin-top:var(--s-1) !important;}
.mfxxl-mt-2{margin-top:var(--s-2) !important;}
.mfxxl-mt-3{margin-top:var(--s-3) !important;}
.mfxxl-mt-4{margin-top:var(--s-4) !important;}
.mfxxl-mt-5{margin-top:var(--s-5) !important;}
.mfxxl-mt-6{margin-top:var(--s-6) !important;}
.mfxxl-mb-3{margin-bottom:var(--s-3) !important;}
.mfxxl-mb-4{margin-bottom:var(--s-4) !important;}

.mfxxl-divider{height:1px;background:var(--c-border);margin:var(--s-5) 0;}
.mfxxl-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* Spinner */
.mfxxl-spin{
    display:inline-block;width:16px;height:16px;border-radius:50%;
    border:2px solid currentColor;border-top-color:transparent;
    animation:mfxxl-spin 700ms linear infinite;
}
@keyframes mfxxl-spin{to{transform:rotate(360deg);}}

/* ── 21. Skeleton Loading ──────────────────────────────────── */
.mfxxl-skeleton{
    background:linear-gradient(90deg,var(--c-bg-soft) 25%,#e9eef3 50%,var(--c-bg-soft) 75%);
    background-size:200% 100%;
    animation:mfxxl-shimmer 1.4s linear infinite;
    border-radius:var(--r-1);
}
@keyframes mfxxl-shimmer{from{background-position:200% 0;} to{background-position:-200% 0;}}

/* ── 22. Tooltip ───────────────────────────────────────────── */
/*
 * Usage:
 *   <button class="mfxxl-tt" data-tt="Erklärt was das macht">?</button>
 *   <span class="mfxxl-tt-trigger" data-tt="Tooltip-Text">★</span>
 *
 * Mobile: Tap zum Öffnen, Tap-anderswo zum Schließen.
 * Desktop: Hover + Click. Smart-Position (über/unter je nach Edge).
 */
.mfxxl-tt{
    display:inline-flex;align-items:center;justify-content:center;
    width:18px;height:18px;
    border-radius:50%;
    background:var(--c-bg-soft);
    color:var(--c-fg-3);
    font-size:11px;font-weight:700;
    line-height:1;
    margin-left:6px;
    cursor:help;
    transition:background var(--d-fast),color var(--d-fast);
    border:0;
    vertical-align:middle;
    flex-shrink:0;
}
.mfxxl-tt:hover,.mfxxl-tt:focus-visible,.mfxxl-tt.is-open{
    background:var(--c-sun-500);color:#fff;outline:none;
}
.mfxxl-tt-inline{
    color:var(--c-sun-600);
    border-bottom:1px dashed currentColor;
    cursor:help;
}
/* Tooltip-Bubble (vom JS positioniert + ein/ausgeblendet) */
.mfxxl-tt-bubble{
    position:fixed;z-index:9000;
    max-width:280px;
    padding:10px 12px;
    background:var(--c-ink);
    color:#fff;
    font-size:13px;font-weight:500;line-height:1.45;
    border-radius:var(--r-2);
    box-shadow:var(--sh-3);
    pointer-events:none;
    opacity:0;
    transform:translateY(-4px);
    transition:opacity var(--d-fast),transform var(--d-fast);
}
.mfxxl-tt-bubble.is-visible{opacity:1;transform:translateY(0);pointer-events:auto;}
.mfxxl-tt-bubble::before{
    content:"";position:absolute;
    width:8px;height:8px;
    background:var(--c-ink);
    transform:rotate(45deg);
}
.mfxxl-tt-bubble[data-pos="top"]::before{left:50%;bottom:-3px;margin-left:-4px;}
.mfxxl-tt-bubble[data-pos="bottom"]::before{left:50%;top:-3px;margin-left:-4px;}


/* ── 23. Onboarding-Tour Modal ─────────────────────────────── */
.mfxxl-onboard-backdrop{
    position:fixed;inset:0;z-index:9500;
    background:rgba(11,18,32,.85);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    display:flex;align-items:flex-end;justify-content:center;
    padding:env(safe-area-inset-top,0) 0 env(safe-area-inset-bottom,0) 0;
    animation:mfxxl-fade-in var(--d-mid);
}
.mfxxl-onboard{
    background:var(--c-bg-card);
    border-radius:var(--r-5) var(--r-5) 0 0;
    width:100%;max-width:560px;
    max-height:90vh;
    overflow-y:auto;
    padding:var(--s-7) var(--s-5) var(--s-6);
    padding-bottom:calc(var(--s-6) + env(safe-area-inset-bottom,0));
    box-shadow:0 -20px 60px rgba(0,0,0,.3);
    animation:mfxxl-slide-up var(--d-slow) var(--ease);
}
@media (min-width:600px){
    .mfxxl-onboard-backdrop{align-items:center;}
    .mfxxl-onboard{border-radius:var(--r-5);max-height:85vh;animation:mfxxl-zoom-in var(--d-mid) var(--ease);}
}
.mfxxl-onboard__header{
    display:flex;align-items:center;justify-content:space-between;
    margin-bottom:var(--s-5);
}
.mfxxl-onboard__progress{
    display:flex;gap:4px;flex:1;
}
.mfxxl-onboard__dot{
    flex:1;height:3px;border-radius:99px;
    background:var(--c-border);
}
.mfxxl-onboard__dot.is-active{background:var(--c-sun-500);}
.mfxxl-onboard__dot.is-done{background:var(--c-sun-300,#fb923c);}
.mfxxl-onboard__close{
    margin-left:var(--s-3);
    width:36px;height:36px;border-radius:50%;
    background:var(--c-bg-soft);color:var(--c-fg-2);
    display:inline-flex;align-items:center;justify-content:center;
    border:0;cursor:pointer;
    transition:background var(--d-fast);
    font-size:16px;
}
.mfxxl-onboard__close:hover{background:var(--c-border);}
.mfxxl-onboard__visual{
    width:84px;height:84px;
    border-radius:var(--r-4);
    background:linear-gradient(135deg,var(--c-sun-500),var(--c-pink-500));
    display:flex;align-items:center;justify-content:center;
    font-size:40px;
    margin-bottom:var(--s-4);
    box-shadow:0 8px 20px rgba(249,115,22,.3);
}
.mfxxl-onboard__title{
    font-family:var(--f-display);
    font-size:24px;font-weight:800;line-height:1.15;
    color:var(--c-fg);
    margin-bottom:var(--s-3);
    letter-spacing:-.01em;
}
.mfxxl-onboard__text{
    font-size:15px;line-height:1.6;color:var(--c-fg-2);
    margin-bottom:var(--s-4);
}
.mfxxl-onboard__text strong{color:var(--c-fg);font-weight:700;}
.mfxxl-onboard__list{
    display:flex;flex-direction:column;gap:var(--s-3);
    margin-bottom:var(--s-5);
}
.mfxxl-onboard__list-item{
    display:flex;align-items:flex-start;gap:var(--s-3);
    padding:var(--s-3);
    background:var(--c-bg-soft);
    border-radius:var(--r-2);
    font-size:14px;line-height:1.5;
}
.mfxxl-onboard__list-icon{
    flex-shrink:0;font-size:22px;line-height:1;
    width:36px;height:36px;border-radius:var(--r-2);
    display:inline-flex;align-items:center;justify-content:center;
    background:var(--c-bg-card);
}
.mfxxl-onboard__list-item strong{color:var(--c-fg);font-weight:700;display:block;margin-bottom:2px;}
.mfxxl-onboard__list-item span{color:var(--c-fg-3);font-size:13px;}
.mfxxl-onboard__footer{
    display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
    margin-top:var(--s-5);
    padding-top:var(--s-4);
    border-top:1px solid var(--c-border);
}
.mfxxl-onboard__back{
    color:var(--c-fg-3);font-size:14px;font-weight:600;
    cursor:pointer;
    background:none;border:0;
    padding:8px 4px;
}
.mfxxl-onboard__back:hover{color:var(--c-fg);}
.mfxxl-onboard__back:disabled{opacity:.3;cursor:default;}
body.mfxxl-modal-open{overflow:hidden;}
/* Im Modal-Modus Bottom-Tabbar ausblenden — Modal nutzt volle Höhe */
body.mfxxl-modal-open .mfxxl-tabbar{display:none !important;}
body.mfxxl-modal-open .mfxxl-help-fab{display:none !important;}

@keyframes mfxxl-fade-in{from{opacity:0;}to{opacity:1;}}
@keyframes mfxxl-slide-up{from{transform:translateY(40px);opacity:.5;}to{transform:translateY(0);opacity:1;}}
@keyframes mfxxl-zoom-in{from{transform:scale(.92);opacity:.5;}to{transform:scale(1);opacity:1;}}


/* ── 24. Smart Status-Banner (Kicktipp-Style) ──────────────── */
.mfxxl-smart-banner{
    display:flex;align-items:center;gap:var(--s-3);
    padding:var(--s-3) var(--s-4);
    background:linear-gradient(90deg,var(--c-sky-50),var(--c-sun-50));
    border:1px solid var(--c-sky-100);
    border-radius:var(--r-3);
    margin-bottom:var(--s-4);
}
.mfxxl-smart-banner__icon{
    flex-shrink:0;
    width:38px;height:38px;border-radius:var(--r-2);
    background:var(--c-bg-card);
    display:inline-flex;align-items:center;justify-content:center;
    font-size:20px;
}
.mfxxl-smart-banner__body{flex:1;min-width:0;}
.mfxxl-smart-banner__title{
    font-weight:700;font-size:14px;color:var(--c-fg);
    margin:0;line-height:1.3;
}
.mfxxl-smart-banner__text{
    font-size:13px;color:var(--c-fg-3);
    margin:2px 0 0;line-height:1.4;
}
.mfxxl-smart-banner--success{
    background:linear-gradient(90deg,var(--c-success-bg),#dcfce7);
    border-color:#bbf7d0;
}
.mfxxl-smart-banner--warn{
    background:linear-gradient(90deg,var(--c-warn-bg),#fef3c7);
    border-color:#fde68a;
}


/* ── 25. Tipp-Status (groß, prominent) ─────────────────────── */
.mfxxl-tipp-status{
    display:flex;align-items:center;gap:var(--s-3);
    padding:var(--s-4) var(--s-5);
    background:var(--c-bg-card);
    border:2px solid var(--c-border);
    border-radius:var(--r-4);
    margin-bottom:var(--s-4);
}
.mfxxl-tipp-status__num{
    font-family:var(--f-display);
    font-size:32px;font-weight:800;line-height:1;
    color:var(--c-sun-500);
}
.mfxxl-tipp-status__num small{
    display:inline-block;
    font-family:var(--f-sans);font-weight:600;font-size:14px;
    color:var(--c-fg-3);
    margin-left:2px;
}
.mfxxl-tipp-status__text{flex:1;}
.mfxxl-tipp-status__label{font-weight:700;color:var(--c-fg);font-size:14px;}
.mfxxl-tipp-status__sub{font-size:12px;color:var(--c-fg-3);margin-top:2px;}
.mfxxl-tipp-status--all-done{
    border-color:var(--c-success);
    background:linear-gradient(90deg,var(--c-success-bg),#fff);
}
.mfxxl-tipp-status--all-done .mfxxl-tipp-status__num{color:var(--c-success);}


/* ── 26. Help-Floating-Button ──────────────────────────────── */
.mfxxl-help-fab{
    position:fixed;
    right:var(--s-4);bottom:calc(var(--tabbar-h) + 16px + env(safe-area-inset-bottom,0));
    width:48px;height:48px;
    border-radius:50%;
    background:var(--c-ink);
    color:#fff;
    box-shadow:var(--sh-3);
    display:inline-flex;align-items:center;justify-content:center;
    font-size:20px;font-weight:700;
    z-index:40;
    cursor:pointer;
    border:0;
    transition:transform var(--d-fast),background var(--d-fast);
}
.mfxxl-help-fab:hover{background:var(--c-sun-500);transform:scale(1.08);}
.mfxxl-help-fab:active{transform:scale(.95);}
@media (min-width:900px){
    .mfxxl-help-fab{bottom:var(--s-5);}
}


/* ── 26z. Hero--compact + Mini-Steps (Anmeldung neu schlank) ── */
.mfxxl-hero--compact{
    padding:18px 18px 16px;
    margin-bottom:12px;
}
.mfxxl-hero--compact .mfxxl-hero__title{
    font-size:clamp(18px,5vw,24px);
    line-height:1.15;
    margin-bottom:10px;
    text-shadow:0 1px 2px rgba(0,0,0,.12);
}
.mfxxl-hero__pills{
    display:flex;flex-wrap:wrap;gap:6px;align-items:center;
    margin-top:4px;
}
.mfxxl-hero__pill{
    display:inline-flex;align-items:center;gap:5px;
    padding:5px 10px;
    border-radius:var(--r-pill);
    background:rgba(0,0,0,.18);
    backdrop-filter:blur(8px);
    color:#fff;
    font-size:12px;font-weight:600;
    text-decoration:none;
    border:0;
    cursor:default;
    line-height:1;
}
.mfxxl-hero__pill--btn{
    cursor:pointer;
    background:rgba(255,255,255,.18);
    transition:background var(--d-fast),transform var(--d-fast);
}
.mfxxl-hero__pill--btn:hover{background:rgba(255,255,255,.28);}
.mfxxl-hero__pill--btn:active{transform:scale(.96);}

/* Prominenter Tour-Button im Hero — eigene Zeile, gold-glowig */
.mfxxl-hero__tour-btn{
    display:flex;align-items:center;gap:12px;
    width:100%;
    margin-top:14px;
    padding:12px 14px;
    background:linear-gradient(135deg,var(--c-gold-400),var(--c-gold-500));
    color:var(--c-ink);
    border:0;border-radius:var(--r-3);
    cursor:pointer;
    box-shadow:0 4px 14px rgba(234,179,8,.4),0 2px 4px rgba(0,0,0,.10);
    transition:transform var(--d-fast),box-shadow var(--d-fast);
    text-align:left;
    position:relative;
}
.mfxxl-hero__tour-btn:hover{
    transform:translateY(-1px);
    box-shadow:0 6px 20px rgba(234,179,8,.5),0 2px 4px rgba(0,0,0,.10);
}
.mfxxl-hero__tour-btn:active{transform:scale(.98);}
.mfxxl-hero__tour-icon{
    flex-shrink:0;
    width:36px;height:36px;
    border-radius:var(--r-2);
    background:rgba(255,255,255,.5);
    display:inline-flex;align-items:center;justify-content:center;
    font-size:18px;
}
.mfxxl-hero__tour-text{
    flex:1;min-width:0;
    display:flex;flex-direction:column;gap:1px;
    line-height:1.2;
}
.mfxxl-hero__tour-text strong{
    font-family:var(--f-display);
    font-size:15px;font-weight:800;letter-spacing:-.01em;
}
.mfxxl-hero__tour-text small{
    font-size:11px;font-weight:600;color:rgba(11,18,32,.65);
}
.mfxxl-hero__tour-arrow{
    flex-shrink:0;font-size:12px;color:var(--c-ink);
    width:24px;height:24px;border-radius:50%;
    background:rgba(255,255,255,.6);
    display:inline-flex;align-items:center;justify-content:center;
}
@media (max-width: 600px) {
    .mfxxl-hero__tour-btn{padding:10px 12px;margin-top:12px;gap:10px;}
    .mfxxl-hero__tour-icon{width:32px;height:32px;font-size:16px;}
    .mfxxl-hero__tour-text strong{font-size:14px;}
    .mfxxl-hero__tour-text small{font-size:10px;}
}

.mfxxl-mini-steps{
    display:grid;grid-template-columns:repeat(3,1fr);gap:6px;
}
.mfxxl-mini-step{
    display:flex;flex-direction:column;align-items:center;gap:4px;
    padding:8px 6px;
    background:var(--c-bg-card);
    border:1px solid var(--c-border);
    border-radius:var(--r-2);
    font-size:11px;font-weight:600;color:var(--c-fg-2);
    text-align:center;
}
.mfxxl-mini-step__num{
    width:20px;height:20px;border-radius:50%;
    background:linear-gradient(135deg,var(--c-sun-500),var(--c-sun-600));
    color:#fff;
    display:inline-flex;align-items:center;justify-content:center;
    font-family:var(--f-display);font-weight:800;font-size:11px;
    box-shadow:0 2px 4px rgba(249,115,22,.3);
}


/* ── 26a. Density / Compact (Mobile) ──────────────────────────
 * Auf Mobile mehr Inhalt pro Bildschirm. Padding/Margins reduziert,
 * Cards enger, Filter-Chips horizontal scrollbar statt umbrechend.
 */
@media (max-width: 600px) {
    .mfxxl-container{padding:10px 10px 28px;}
    .mfxxl-card{padding:12px;border-radius:var(--r-2);}
    .mfxxl-match{padding:10px 12px;}
    .mfxxl-section{margin-top:16px;margin-bottom:12px;}
    .mfxxl-section__head{margin-bottom:8px;}
    .mfxxl-section__title{font-size:15px;}
    .mfxxl-h1{font-size:18px;}
    .mfxxl-h2{font-size:16px;}
    .mfxxl-h3{font-size:14px;}
    .mfxxl-h4{font-size:11px;}
    .mfxxl-hero{padding:16px 14px;margin-bottom:12px;border-radius:var(--r-3);}
    .mfxxl-hero__title{font-size:clamp(20px,5vw,26px);margin-bottom:6px;}
    .mfxxl-hero__sub{font-size:13px;line-height:1.4;}
    .mfxxl-hero__eyebrow{font-size:10px;padding:3px 8px;margin-bottom:8px;}
    .mfxxl-hero__cta{margin-top:10px;}
    .mfxxl-hero__countdown{margin-top:10px;padding:5px 12px;font-size:12px;}
    .mfxxl-stack--lg{gap:12px;}
    .mfxxl-tipp-status{padding:10px 12px;margin-bottom:10px;}
    .mfxxl-tipp-status__num{font-size:20px;}
    .mfxxl-tipp-status__label{font-size:12px;}
    .mfxxl-tipp-status__sub{font-size:11px;}
    .mfxxl-stat{padding:10px 12px;}
    .mfxxl-stat__value{font-size:18px;}
    .mfxxl-stat__label{font-size:10px;}
    .mfxxl-stats{gap:8px;}
    .mfxxl-rank{padding:6px 10px;gap:8px;min-height:40px;}
    .mfxxl-rank__pos{flex:0 0 22px;font-size:13px;}
    .mfxxl-rank.is-podium-1 .mfxxl-rank__pos{font-size:15px;}
    .mfxxl-rank__name{font-size:13px;}
    .mfxxl-rank__meta{font-size:10px;margin-top:2px !important;}
    .mfxxl-rank__pts{font-size:14px;}
    .mfxxl-rank__pts small{font-size:9px;}
    .mfxxl-empty{padding:32px 12px;}
    .mfxxl-empty__icon{width:48px;height:48px;font-size:22px;margin-bottom:10px;}
    .mfxxl-empty__title{font-size:16px;}
    .mfxxl-empty__text{font-size:12px;}
    .mfxxl-display--lg{font-size:20px;}
    .mfxxl-display--xl{font-size:24px;}
    .mfxxl-display--xxl{font-size:28px;}
    .mfxxl-match__when{font-size:10px;margin-bottom:6px;}
    .mfxxl-match__team{font-size:13px;}
    .mfxxl-match__score{font-size:16px;min-width:48px;padding:4px 8px;}
    .mfxxl-match__tipp{margin-top:8px;padding-top:8px;}
    .mfxxl-match__tipp-input input[type="number"]{width:42px;min-height:36px;padding:4px;}
    .mfxxl-steps{gap:8px;margin:8px 0 12px;grid-template-columns:1fr;}
    .mfxxl-step{padding:10px 12px;}
    .mfxxl-step__num{width:24px;height:24px;font-size:12px;margin-bottom:6px;}
    .mfxxl-step__title{font-size:13px;}
    .mfxxl-step__text{font-size:11px;line-height:1.35;}
    .mfxxl-badge{font-size:10px;padding:3px 8px;}
    .mfxxl-chip{padding:5px 10px;font-size:12px;}
    .mfxxl-btn{padding:11px 16px;min-height:42px;font-size:14px;}
    .mfxxl-btn--lg{padding:13px 20px;min-height:48px;font-size:15px;}
    .mfxxl-btn--sm{padding:6px 10px;min-height:30px;font-size:12px;}
    .mfxxl-label{font-size:11px;margin-bottom:5px;}
    .mfxxl-help{font-size:11px;}
    .mfxxl-input,.mfxxl-select,.mfxxl-textarea{padding:10px 12px;min-height:42px;}
    .mfxxl-avatar{width:30px;height:30px;font-size:12px;}
    .mfxxl-avatar--xs{width:22px;height:22px;font-size:10px;}
    .mfxxl-avatar--sm{width:26px;height:26px;font-size:11px;}
    .mfxxl-avatar--lg{width:40px;height:40px;font-size:14px;}
    .mfxxl-avatar--xl{width:56px;height:56px;font-size:20px;}
    .mfxxl-text{font-size:13px;}
    .mfxxl-text--sm{font-size:11px;}
    .mfxxl-banner{padding:10px 12px;font-size:13px;}
    .mfxxl-field{margin-bottom:12px;}
}

/* Horizontal Scroll-Container für Filter-Chips (statt wrap)
   Verhindert dass Chips in 2-3 Zeilen umbrechen — stattdessen swipeable. */
.mfxxl-chips-scroll{
    display:flex;align-items:center;gap:var(--s-2);
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding-bottom:4px; /* damit shadows nicht abgeschnitten werden */
    margin:0 calc(var(--s-3) * -1); /* rand-zu-rand-bleed, sodass scroll bis Edge geht */
    padding-left:var(--s-3);
    padding-right:var(--s-3);
}
.mfxxl-chips-scroll::-webkit-scrollbar{display:none;}
.mfxxl-chips-scroll .mfxxl-chip{flex-shrink:0;}


/* ── 27. iOS-Zoom-Prevention (Inputs <16px triggern Autozoom auf iOS Safari) ─── */
/*
 * Globale Catch-All-Regel mit !important — schlaegt jegliche Component-Styles,
 * die kleinere Schrift fuer Inputs setzen.
 * Wichtig: NICHT maximum-scale=1 im viewport-meta nutzen (verhindert Pinch-Zoom
 * fuer Accessibility). Stattdessen Inputs auf >=16px font-size.
 */
body.mfxxl-app input,
body.mfxxl-app input[type="text"],
body.mfxxl-app input[type="email"],
body.mfxxl-app input[type="password"],
body.mfxxl-app input[type="search"],
body.mfxxl-app input[type="tel"],
body.mfxxl-app input[type="url"],
body.mfxxl-app input[type="number"],
body.mfxxl-app input[type="date"],
body.mfxxl-app input[type="datetime-local"],
body.mfxxl-app input[type="month"],
body.mfxxl-app input[type="time"],
body.mfxxl-app input[type="week"],
body.mfxxl-app select,
body.mfxxl-app textarea{
    font-size:16px !important;
}
/* Ausnahme: Tipp-Score-Inputs sind groesser (18px), nicht runterskalieren */
body.mfxxl-app .mfxxl-match__tipp-input input[type="number"]{font-size:18px !important;}


/* ── 27b. v0.7.0 — Try-First Probier-Tipps ───────────────── */
.mfxxl-try-match{
    background:#fff;
    border:1px solid var(--c-border);
    border-radius:var(--r-3);
    padding:10px 12px;
    transition:border-color .15s, background .15s;
}
.mfxxl-try-match--de{
    border-left:3px solid #dc2626;
    background:linear-gradient(90deg,rgba(220,38,38,.04),transparent 30%);
}
.mfxxl-try-match__when{
    font-size:12px;
    color:var(--c-fg-3);
    margin-bottom:6px;
    text-transform:uppercase;
    letter-spacing:.03em;
    font-weight:600;
}
.mfxxl-try-match__row{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    gap:8px;
    align-items:center;
}
.mfxxl-try-match__team{
    font-weight:600;
    font-size:15px;
    line-height:1.2;
    color:var(--c-fg-1);
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.mfxxl-try-match__team--home{text-align:right;}
.mfxxl-try-match__team--away{text-align:left;}
.mfxxl-try-match__inputs{
    display:flex;
    align-items:center;
    gap:4px;
    justify-content:center;
}
.mfxxl-try-match__score{
    width:46px;
    height:42px;
    text-align:center;
    font-size:18px !important;
    font-weight:700;
    font-family:var(--f-display);
    border:2px solid var(--c-border);
    border-radius:8px;
    padding:0;
    background:#fff;
    -moz-appearance:textfield;
}
.mfxxl-try-match__score::-webkit-outer-spin-button,
.mfxxl-try-match__score::-webkit-inner-spin-button{
    -webkit-appearance:none;margin:0;
}
.mfxxl-try-match__score:focus{
    outline:none;
    border-color:var(--c-sun-500);
    box-shadow:0 0 0 3px rgba(251,191,36,.2);
}
.mfxxl-try-match__colon{
    font-size:18px;
    font-weight:800;
    color:var(--c-fg-3);
    margin:0 2px;
}
.mfxxl-try-match__status{
    margin-top:8px;
    font-size:12px;
    font-weight:600;
    color:#15803d;
    text-align:right;
}
@media (max-width:480px){
    .mfxxl-try-match__team{font-size:13px;}
    .mfxxl-try-match__score{width:42px;height:38px;font-size:16px !important;}
}

/* Bonus-Tipp-Card im Try-First (v0.7.3) */
.mfxxl-try-bonus{
    background:#fff;
    border:1px solid var(--c-border);
    border-radius:var(--r-3);
    padding:10px 12px;
    transition:border-color .15s, background .15s;
}
.mfxxl-try-bonus__frage{
    display:block;
    font-size:14px;
    font-weight:600;
    color:var(--c-fg-1);
    margin-bottom:6px;
    line-height:1.3;
}
.mfxxl-try-bonus__input{
    width:100%;
    font-size:16px !important;
}


/* ── 28. Print ─────────────────────────────────────────────── */
@media print{
    .mfxxl-topbar,.mfxxl-tabbar,.mfxxl-help-fab,.mfxxl-tt-bubble,.mfxxl-onboard-backdrop{display:none !important;}
    body.mfxxl-body{padding:0 !important;}
}