/* ============================================================
   WM 2026 WETTEN – Samsung/Apple scroll-experience design
   ============================================================ */
:root {
  --blau:     #061020;
  --blau2:    #0d1f3c;
  --blau3:    #163366;
  --gold:     #c9a84c;
  --gold2:    #e8c96e;
  --gold3:    #f5e6b0;
  --weiss:    #f8f6f0;
  --grau:     #6b7280;
  --grau2:    #e5e7eb;
  --r:        12px;
}

/* ─── KEYFRAMES ──────────────────────────────────────────── */
@keyframes float   { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
@keyframes floatR  { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-18px) rotate(8deg)} }
@keyframes glow    { 0%,100%{text-shadow:0 0 8px rgba(201,168,76,.3)} 50%{text-shadow:0 0 32px rgba(201,168,76,1),0 0 60px rgba(201,168,76,.4)} }
@keyframes scan    { from{transform:translateX(-120%)} to{transform:translateX(300%)} }
@keyframes shimmer { 0%{background-position:-200% center} 100%{background-position:200% center} }
@keyframes pulse   { 0%,100%{box-shadow:0 0 0 0 rgba(201,168,76,.5)} 50%{box-shadow:0 0 0 16px rgba(201,168,76,0)} }
@keyframes blink   { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.75;transform:scale(.95)} }
@keyframes barFill { from{transform:scaleX(0)} to{transform:scaleX(1)} }
@keyframes lineGrow{ from{transform:scaleX(0);opacity:0} to{transform:scaleX(1);opacity:1} }
@keyframes popIn   { from{opacity:0;transform:scale(.6) rotate(-6deg)} 60%{transform:scale(1.08) rotate(1deg)} to{opacity:1;transform:none} }
@keyframes spin    { to{transform:rotate(360deg)} }
@keyframes waveFlag{ 0%,100%{transform:skewX(0)} 40%{transform:skewX(4deg)} 70%{transform:skewX(-4deg)} }
@keyframes quoteAnim{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.05)} }
@keyframes countAnim{ from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:none} }
@keyframes fadeSlideUp    { from{opacity:0;transform:translateY(50px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeSlideLeft  { from{opacity:0;transform:translateX(-60px)} to{opacity:1;transform:none} }
@keyframes fadeSlideRight { from{opacity:0;transform:translateX(60px)}  to{opacity:1;transform:none} }
@keyframes fadeSlideDown  { from{opacity:0;transform:translateY(-40px)} to{opacity:1;transform:none} }
@keyframes scaleIn        { from{opacity:0;transform:scale(.7)}  to{opacity:1;transform:scale(1)} }
@keyframes clipReveal     { from{clip-path:inset(0 100% 0 0)} to{clip-path:inset(0 0% 0 0)} }
@keyframes gradientShift  { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes borderRotate   { to{--angle:360deg} }
@keyframes heroReveal     { 0%{opacity:0;transform:translateY(40px) scale(.95)} 100%{opacity:1;transform:none} }
@keyframes typewriter     { from{width:0} to{width:100%} }
@keyframes cursorBlink    { 0%,100%{opacity:1} 50%{opacity:0} }
@keyframes liveDot        { 0%,100%{background:var(--rot,#e53e3e);transform:scale(1)} 50%{background:#ff6b6b;transform:scale(1.3)} }
@keyframes arrowBounce    { 0%,100%{transform:translateX(0)} 50%{transform:translateX(6px)} }
@keyframes rotateSlow     { to{transform:rotate(360deg)} }
@keyframes particleFloat  { 0%{opacity:0;transform:translateY(0) scale(0)} 20%{opacity:1} 100%{opacity:0;transform:translateY(-100px) scale(1)} }

/* ─── BASE ───────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:'Inter',sans-serif;font-size:16px;line-height:1.7;color:#1a1a2e;background:#fff;overflow-x:hidden}
h1,h2,h3,h4{font-family:'Oswald',sans-serif;line-height:1.15;letter-spacing:.02em}
a{color:var(--gold);text-decoration:none;transition:color .2s}
a:hover{color:var(--gold2)}
img{max-width:100%;display:block}
ul{list-style:none}
::selection{background:rgba(201,168,76,.3);color:var(--blau)}

/* ─── SCROLL-REVEAL STATES ───────────────────────────────── */
[data-reveal]{opacity:0;transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}
[data-reveal="up"]   {transform:translateY(60px)}
[data-reveal="left"] {transform:translateX(-60px)}
[data-reveal="right"]{transform:translateX(60px)}
[data-reveal="scale"]{transform:scale(.8)}
[data-reveal="down"] {transform:translateY(-40px)}
[data-reveal].visible{opacity:1;transform:none!important}
[data-delay="1"].visible{transition-delay:.1s}
[data-delay="2"].visible{transition-delay:.2s}
[data-delay="3"].visible{transition-delay:.3s}
[data-delay="4"].visible{transition-delay:.4s}
[data-delay="5"].visible{transition-delay:.5s}
[data-delay="6"].visible{transition-delay:.6s}
[data-delay="7"].visible{transition-delay:.7s}
[data-delay="8"].visible{transition-delay:.8s}

/* ─── HEADER ─────────────────────────────────────────────── */
/* ── HEADER ROBUSTE ────────────────────────────────────────── */
header{position:fixed;top:0;left:0;right:0;z-index:999;transition:background .4s,backdrop-filter .4s,box-shadow .3s}
header.scrolled{background:rgba(6,16,32,.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 2px 30px rgba(0,0,0,.4);border-bottom:1px solid rgba(201,168,76,.2)}
.header-inner{max-width:1280px;margin:0 auto;padding:0 28px;display:flex;align-items:center;justify-content:space-between;height:68px;gap:12px}
.logo{font-family:'Oswald',sans-serif;font-size:1.35rem;font-weight:700;color:var(--gold);letter-spacing:.07em;display:flex;align-items:center;gap:8px;white-space:nowrap;flex-shrink:0;animation:fadeSlideDown .6s ease both}
.logo-emoji{display:inline-block;animation:float 4s ease-in-out infinite}
.logo a{color:var(--gold);text-decoration:none}
.logo a:hover{color:var(--gold2)}
nav{flex:1;display:flex;justify-content:center;overflow:hidden}
nav ul{display:flex;gap:0;align-items:center;animation:fadeSlideDown .6s .1s ease both;flex-wrap:nowrap}
nav a{color:#c9a84c;font-family:'Oswald',sans-serif;font-size:.82rem;font-weight:400;letter-spacing:.07em;text-transform:uppercase;padding:8px 12px;border-radius:8px;transition:all .25s;position:relative;white-space:nowrap;display:block;text-decoration:none}
nav a::after{content:'';position:absolute;bottom:2px;left:50%;right:50%;height:2px;background:var(--gold);transition:all .3s}
nav a:hover::after,nav a.aktiv::after{left:12px;right:12px}
nav a:hover,nav a.aktiv{color:var(--gold2);text-decoration:none;background:rgba(201,168,76,.1)}
.header-cta-btn{font-family:'Oswald',sans-serif;font-size:.78rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:8px 16px;border-radius:8px;background:var(--gold);color:var(--blau);white-space:nowrap;flex-shrink:0;transition:all .3s;animation:fadeSlideDown .6s .2s ease both;text-decoration:none}
.header-cta-btn:hover{background:var(--gold2);text-decoration:none;transform:scale(1.04);color:var(--blau)}
@media(max-width:960px){.header-cta-btn{display:none}nav a{font-size:.78rem;padding:7px 9px}}
@media(max-width:700px){
  .header-inner{height:auto;padding:10px 16px 8px;flex-wrap:wrap}
  .logo{font-size:1.1rem}
  nav{order:3;flex:0 0 100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  nav::-webkit-scrollbar{display:none}
  nav ul{flex-wrap:nowrap;width:max-content;margin:0 auto}
  nav a{font-size:.74rem;padding:6px 8px}
  .breadcrumb{margin-top:96px}
  .hero{padding-top:96px !important}
}
@media(max-width:380px){nav a{font-size:.68rem;padding:5px 6px}}

/* ─── HERO ───────────────────────────────────────────────── */
.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;position:relative;overflow:hidden;background:var(--blau)}
.hero-bg{position:absolute;inset:0;background:linear-gradient(135deg,#061020 0%,#0d1f3c 40%,#163366 70%,#0a1628 100%);background-size:300% 300%;animation:gradientShift 12s ease infinite}
.hero-bg::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(201,168,76,.18) 0%,transparent 60%),radial-gradient(ellipse 50% 40% at 80% 80%,rgba(22,51,102,.6) 0%,transparent 60%)}
/* Grille de stade en fond */
.hero-bg::after{content:'';position:absolute;inset:0;background-image:repeating-linear-gradient(0deg,transparent,transparent 59px,rgba(201,168,76,.04) 59px,rgba(201,168,76,.04) 60px),repeating-linear-gradient(90deg,transparent,transparent 59px,rgba(201,168,76,.04) 59px,rgba(201,168,76,.04) 60px);pointer-events:none}
/* Orbes décoratifs */
.hero-orb{position:absolute;border-radius:50%;filter:blur(1px);pointer-events:none}
.hero-orb-1{width:420px;height:420px;background:radial-gradient(circle,rgba(201,168,76,.12) 0%,transparent 70%);top:-100px;right:-120px;animation:float 9s ease-in-out infinite}
.hero-orb-2{width:280px;height:280px;background:radial-gradient(circle,rgba(22,51,102,.5) 0%,rgba(201,168,76,.06) 50%,transparent 70%);bottom:-60px;left:-60px;animation:floatR 11s ease-in-out 1.5s infinite}
.hero-orb-3{width:160px;height:160px;background:radial-gradient(circle,rgba(201,168,76,.1) 0%,transparent 70%);top:30%;right:8%;animation:float 7s ease-in-out .8s infinite}
.hero-orb-4{width:80px;height:80px;background:radial-gradient(circle,rgba(201,168,76,.15) 0%,transparent 70%);top:20%;left:8%;animation:floatR 6s ease-in-out 2s infinite}
/* Scan lumineux permanent */
.hero-scan{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hero-scan::before{content:'';position:absolute;top:0;left:0;width:40%;height:100%;background:linear-gradient(90deg,transparent,rgba(201,168,76,.05),transparent);animation:scan 8s ease-in-out 1s infinite}
.hero-content{position:relative;z-index:2;max-width:860px;padding:0 24px}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(201,168,76,.15);border:1px solid rgba(201,168,76,.4);color:var(--gold);font-family:'Oswald',sans-serif;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;padding:8px 20px;border-radius:50px;margin-bottom:28px;animation:heroReveal .8s .3s both;backdrop-filter:blur(8px)}
.hero-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--gold);animation:liveDot 1.5s infinite}
.hero-h1{font-size:clamp(2.8rem,6vw,5.2rem);color:#fff;text-transform:uppercase;font-weight:700;letter-spacing:.03em;margin-bottom:24px;animation:heroReveal .9s .5s both;line-height:1.05}
.hero-h1 em{color:var(--gold);font-style:normal;display:inline-block;animation:glow 3s ease-in-out 2s infinite}
.hero-sub{font-size:clamp(1rem,1.8vw,1.2rem);color:rgba(248,246,240,.7);max-width:600px;margin:0 auto 44px;font-weight:300;animation:heroReveal .9s .7s both}
.hero-cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;animation:heroReveal .9s .9s both}
/* Partenaires dans le hero */
.hero-partners{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:20px;animation:heroReveal .9s 1.1s both}
.hero-partner-btn{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);color:rgba(248,246,240,.85);font-size:.82rem;font-weight:500;padding:9px 18px;border-radius:50px;backdrop-filter:blur(8px);transition:all .3s}
.hero-partner-btn:hover{background:rgba(201,168,76,.2);border-color:rgba(201,168,76,.5);color:var(--gold);text-decoration:none;transform:translateY(-2px)}
/* Scroll cue */
.hero-scroll{position:absolute;bottom:36px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;color:rgba(248,246,240,.35);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;animation:heroReveal 1s 1.4s both}
.hero-scroll-line{width:1px;height:44px;background:linear-gradient(to bottom,rgba(201,168,76,.6),transparent);animation:float 2s ease-in-out infinite}

/* ─── BOUTONS ────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--gold);color:var(--blau);font-family:'Oswald',sans-serif;font-weight:700;font-size:1rem;letter-spacing:.07em;text-transform:uppercase;padding:15px 34px;border-radius:var(--r);transition:all .3s cubic-bezier(.22,1,.36,1);box-shadow:0 4px 24px rgba(201,168,76,.3);position:relative;overflow:hidden}
.btn::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);transform:translateX(-100%);transition:transform .5s}
.btn:hover::after{transform:translateX(100%)}
.btn:hover{background:var(--gold2);text-decoration:none;color:var(--blau);transform:translateY(-3px) scale(1.03);box-shadow:0 12px 36px rgba(201,168,76,.5)}
.btn-ghost{background:transparent;border:2px solid rgba(248,246,240,.35);color:rgba(248,246,240,.9);box-shadow:none}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold);background:rgba(201,168,76,.08)}
.btn-outline{background:transparent;border:2px solid var(--gold);color:var(--gold)}
.btn-outline:hover{background:var(--gold);color:var(--blau)}
.btn-sm{padding:10px 22px;font-size:.88rem}

/* ─── LAYOUT ─────────────────────────────────────────────── */
.container{max-width:1200px;margin:0 auto;padding:0 24px}

section{padding:100px 0}
section.dark{background:var(--blau);color:#fff}
section.dark-alt{background:var(--blau2);color:#fff}
section.light{background:var(--weiss)}
section.mid{background:#f0f1f3}
.section-label{font-family:'Oswald',sans-serif;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:14px;display:flex;align-items:center;gap:10px}
.section-label::before{content:'';width:28px;height:2px;background:var(--gold);display:block}
.section-title{font-size:clamp(2rem,4vw,3.2rem);text-transform:uppercase;line-height:1.05;margin-bottom:16px}
.section-title span{color:var(--gold)}
.section-title.white{color:#fff}
.section-sub{font-size:1.05rem;color:var(--grau);margin-bottom:60px;max-width:620px;font-weight:300}
.section-sub.white{color:rgba(248,246,240,.65)}

/* ─── BREADCRUMB ─────────────────────────────────────────── */
.breadcrumb{background:rgba(6,16,32,.95);padding:12px 0;margin-top:72px}
.breadcrumb-inner{max-width:1200px;margin:0 auto;padding:0 24px;display:flex;gap:8px;font-size:.8rem;color:rgba(248,246,240,.45)}
.breadcrumb-inner li::after{content:'›';margin-left:8px}
.breadcrumb-inner li:last-child::after{display:none}
.breadcrumb-inner li:last-child{color:rgba(248,246,240,.8)}
.breadcrumb-inner a{color:var(--gold);transition:color .2s}

/* ─── PARTNER PREMIUM ────────────────────────────────────── */
.partner-premium{background:linear-gradient(135deg,var(--blau) 0%,#1a3a6e 50%,var(--blau2) 100%);padding:80px 0;position:relative;overflow:hidden}
.partner-premium::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(201,168,76,.15) 0%,transparent 60%)}
/* Scan permanent */
.partner-premium::after{content:'';position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(201,168,76,.06),transparent);animation:scan 9s ease-in-out infinite;pointer-events:none}
.partner-premium-header{text-align:center;margin-bottom:52px}
.partner-cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:28px}
.partner-card{background:rgba(255,255,255,.04);border:1px solid rgba(201,168,76,.2);border-radius:16px;padding:36px;position:relative;overflow:hidden;transition:all .4s cubic-bezier(.22,1,.36,1)}
.partner-card::before{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(201,168,76,.08),transparent);animation:scan 5s ease-in-out infinite}
.partner-card::after{content:'';position:absolute;inset:-1px;border-radius:17px;background:linear-gradient(135deg,rgba(201,168,76,.3),transparent,rgba(201,168,76,.1));opacity:0;transition:opacity .4s}
.partner-card:hover{transform:translateY(-8px);border-color:rgba(201,168,76,.5);background:rgba(255,255,255,.07)}
.partner-card:hover::after{opacity:1}
.partner-card-icon{font-size:2.2rem;margin-bottom:16px}
.partner-card-name{font-family:'Oswald',sans-serif;font-size:1.6rem;font-weight:700;color:var(--gold);margin-bottom:8px;animation:glow 4s ease-in-out infinite}
.partner-card-desc{color:rgba(248,246,240,.7);font-size:.92rem;margin-bottom:28px;line-height:1.7}
.partner-card-features{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.partner-feature{background:rgba(201,168,76,.12);border:1px solid rgba(201,168,76,.25);color:rgba(248,246,240,.85);font-size:.75rem;padding:4px 12px;border-radius:50px}
.partner-card-btn{display:inline-flex;align-items:center;gap:10px;background:var(--gold);color:var(--blau);font-family:'Oswald',sans-serif;font-weight:700;font-size:.95rem;letter-spacing:.07em;text-transform:uppercase;padding:14px 28px;border-radius:10px;transition:all .3s;box-shadow:0 4px 20px rgba(201,168,76,.3);animation:pulse 3s ease-in-out infinite;width:100%;justify-content:center}
.partner-card-btn:hover{background:var(--gold2);text-decoration:none;transform:scale(1.04);box-shadow:0 8px 32px rgba(201,168,76,.5)}
.partner-card-btn .arrow{animation:arrowBounce 1.5s ease-in-out infinite}

/* ─── STATS / COMPTEURS ──────────────────────────────────── */
.stats-strip{background:var(--blau2);padding:60px 0;border-top:1px solid rgba(201,168,76,.15);border-bottom:1px solid rgba(201,168,76,.15)}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:0}
.stat-item{text-align:center;padding:28px 20px;border-right:1px solid rgba(201,168,76,.12);position:relative}
.stat-item:last-child{border-right:none}
.stat-item::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(201,168,76,.06) 0%,transparent 70%);opacity:0;transition:opacity .4s}
.stat-item:hover::before{opacity:1}
.stat-number{font-family:'Oswald',sans-serif;font-size:3rem;font-weight:700;color:var(--gold);display:block;line-height:1}
.stat-label{font-size:.82rem;color:rgba(248,246,240,.5);margin-top:8px;letter-spacing:.05em}

/* ─── CARDS ──────────────────────────────────────────────── */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px}
.card{background:#fff;border-radius:16px;box-shadow:0 4px 24px rgba(6,16,32,.1);overflow:hidden;transition:all .4s cubic-bezier(.22,1,.36,1);border:1px solid rgba(201,168,76,.12)}
.card:hover{transform:translateY(-10px) scale(1.02);box-shadow:0 24px 60px rgba(6,16,32,.18);border-color:rgba(201,168,76,.4)}
.card-header{background:linear-gradient(135deg,var(--blau2),var(--blau));color:var(--gold);font-family:'Oswald',sans-serif;font-size:1rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;padding:16px 22px;position:relative;overflow:hidden}
.card-header::after{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(201,168,76,.14),transparent);animation:scan 5s ease-in-out infinite}
.card-body{padding:22px}
.card-body p{font-size:.93rem;color:#444;line-height:1.7}

/* ─── FAVORITEN CARDS ────────────────────────────────────── */
.favorit-karte{background:#fff;border-radius:14px;padding:22px 26px;box-shadow:0 4px 20px rgba(6,16,32,.09);border-left:4px solid var(--gold);display:flex;align-items:center;gap:20px;transition:all .35s cubic-bezier(.22,1,.36,1);position:relative;overflow:hidden}
.favorit-karte::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(201,168,76,.04),transparent);opacity:0;transition:opacity .3s}
.favorit-karte:hover{transform:translateX(10px);box-shadow:-6px 0 0 var(--gold),0 16px 44px rgba(6,16,32,.18);border-left-width:6px}
.favorit-karte:hover::after{opacity:1}
.favorit-rang{font-family:'Oswald',sans-serif;font-size:2.4rem;font-weight:700;color:var(--gold);min-width:46px;text-align:center;animation:glow 4s ease-in-out infinite;transition:transform .3s}
.favorit-karte:hover .favorit-rang{transform:scale(1.18) rotate(-4deg)}
.favorit-info{flex:1}
.favorit-info h3{font-size:1.15rem;color:var(--blau);margin-bottom:3px}
.favorit-info p{font-size:.87rem;color:var(--grau);line-height:1.5}
.favorit-quote{margin-left:auto;background:linear-gradient(135deg,var(--blau),var(--blau2));color:var(--gold);font-family:'Oswald',sans-serif;font-size:1.5rem;font-weight:700;padding:10px 18px;border-radius:10px;min-width:70px;text-align:center;transition:all .3s;animation:quoteAnim 4s ease-in-out infinite}
.favorit-karte:hover .favorit-quote{background:var(--gold);color:var(--blau);transform:scale(1.1)}

/* ─── GRUPPEN ────────────────────────────────────────────── */
.gruppen-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}
.gruppe-karte{background:#fff;border-radius:14px;box-shadow:0 4px 20px rgba(6,16,32,.09);overflow:hidden;transition:all .4s cubic-bezier(.22,1,.36,1)}
.gruppe-karte:hover{transform:translateY(-10px) scale(1.02);box-shadow:0 24px 52px rgba(6,16,32,.18)}
.gruppe-name{background:linear-gradient(135deg,var(--blau2),var(--blau));color:var(--gold);font-family:'Oswald',sans-serif;font-size:1rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:13px 18px;position:relative;overflow:hidden}
.gruppe-name::after{content:'';position:absolute;top:0;left:-100%;width:80%;height:100%;background:linear-gradient(90deg,transparent,rgba(201,168,76,.14),transparent);animation:scan 4.5s ease-in-out infinite}
.gruppe-karte ul{padding:14px 18px}
.gruppe-karte ul li{padding:8px 0;border-bottom:1px solid #f0f1f3;font-size:.9rem;display:flex;align-items:center;gap:8px;transition:padding-left .2s,color .2s}
.gruppe-karte ul li:last-child{border-bottom:none}
.gruppe-karte:hover ul li{padding-left:5px}


/* Fallback country code display */

.gruppe-tip{padding:10px 18px 14px;font-size:.79rem;color:var(--grau);border-top:1px solid #f0f1f3;font-style:italic}

/* ─── MATCH CARDS ────────────────────────────────────────── */
.match-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}
.match-card{background:linear-gradient(135deg,var(--blau),#1a3a6e);border-radius:16px;padding:24px;text-align:center;border:1px solid rgba(201,168,76,.18);position:relative;overflow:hidden;transition:all .4s cubic-bezier(.22,1,.36,1)}
.match-card::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(201,168,76,.07) 0%,transparent 65%);pointer-events:none}
.match-card::after{content:'';position:absolute;top:0;left:-100%;width:55%;height:100%;background:linear-gradient(90deg,transparent,rgba(201,168,76,.06),transparent);animation:scan 6s ease-in-out infinite;pointer-events:none}
.match-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 20px 50px rgba(6,16,32,.45);border-color:rgba(201,168,76,.4)}
.match-group-label{font-size:.72rem;color:rgba(248,246,240,.45);text-transform:uppercase;letter-spacing:.1em;margin-bottom:12px;display:flex;align-items:center;justify-content:center;gap:8px}
.match-teams{display:flex;align-items:center;justify-content:center;gap:18px;margin:10px 0}
.match-team{text-align:center}
.match-team:nth-child(3) .match-team-name{font-family:'Oswald',sans-serif;color:var(--gold);font-size:.95rem;margin-top:6px;display:block}
.match-vs{font-family:'Oswald',sans-serif;font-size:1.8rem;color:rgba(255,255,255,.25);font-weight:300}
.match-info{font-size:.78rem;color:rgba(248,246,240,.45);margin:8px 0}
.match-quotes{display:flex;gap:8px;justify-content:center;margin-top:14px}
.match-q{background:rgba(255,255,255,.07);border:1px solid rgba(201,168,76,.2);border-radius:8px;padding:8px 14px;text-align:center;cursor:pointer;transition:all .25s;animation:quoteAnim 5s ease-in-out infinite}
.match-q:nth-child(2){animation-delay:1.2s}
.match-q:nth-child(3){animation-delay:2.4s}
.match-q:hover{background:rgba(201,168,76,.15);border-color:var(--gold);transform:scale(1.08)}
.match-q .q-label{font-size:.68rem;color:rgba(255,255,255,.45);display:block;margin-bottom:3px}
.match-q .q-val{font-family:'Oswald',sans-serif;color:var(--gold);font-size:1.15rem;font-weight:700}
.match-q.featured{background:rgba(201,168,76,.18);border-color:rgba(201,168,76,.6);animation:pulse 2.5s ease-in-out infinite}

/* ─── PROGRESS BARS ──────────────────────────────────────── */
.progress-section{display:flex;flex-direction:column;gap:18px}
.progress-item{position:relative}
.progress-header{display:flex;justify-content:space-between;margin-bottom:8px;align-items:center}
.progress-label{font-family:'Oswald',sans-serif;font-size:.95rem;color:var(--blau);font-weight:600}
.progress-label.white{color:#fff}
.progress-value{font-family:'Oswald',sans-serif;font-size:.9rem;color:var(--gold);font-weight:700}
.progress-track{background:rgba(201,168,76,.12);height:10px;border-radius:50px;overflow:hidden}
.progress-track.dark{background:rgba(255,255,255,.1)}
.progress-bar{height:100%;border-radius:50px;background:linear-gradient(90deg,var(--blau),var(--gold));transform-origin:left;transform:scaleX(0);transition:transform 1.4s cubic-bezier(.22,1,.36,1);position:relative;overflow:hidden}
.progress-bar.active{transform:scaleX(var(--w,1))}
.progress-bar::after{content:'';position:absolute;top:0;left:-60%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);animation:scan 2.5s linear 1.6s infinite}

/* ─── PROGNOSE ITEMS ─────────────────────────────────────── */
.prognose-liste{display:flex;flex-direction:column;gap:16px}
.prognose-item{background:#fff;border-radius:14px;padding:22px 28px;box-shadow:0 4px 20px rgba(6,16,32,.08);display:flex;flex-wrap:wrap;align-items:center;gap:20px;border:1px solid rgba(201,168,76,.12);transition:all .35s cubic-bezier(.22,1,.36,1);position:relative;overflow:hidden}
.prognose-item::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(to bottom,var(--gold),var(--gold2));transform:scaleY(0);transform-origin:top;transition:transform .3s}
.prognose-item:hover::before{transform:scaleY(1)}
.prognose-item:hover{transform:translateY(-4px) translateX(4px);box-shadow:0 18px 44px rgba(6,16,32,.16);border-color:rgba(201,168,76,.4)}
.prognose-spiel{flex:1;min-width:180px}
.prognose-spiel h4{font-family:'Oswald',sans-serif;font-size:1rem;color:var(--blau);margin-bottom:3px}
.prognose-spiel span{font-size:.8rem;color:var(--grau)}
.prognose-tips{display:flex;gap:8px;flex-wrap:wrap}
.tip-box{text-align:center;min-width:64px}
.tip-label{font-size:.72rem;color:var(--grau);display:block;margin-bottom:5px}
.tip-quote{background:var(--blau2);color:var(--gold);font-family:'Oswald',sans-serif;font-weight:700;padding:8px 12px;border-radius:8px;font-size:.95rem;display:block;transition:all .25s;cursor:pointer;animation:quoteAnim 4s ease-in-out infinite}
.tip-quote:hover{transform:scale(1.1);background:var(--blau)}
.tip-quote.hot{background:var(--gold);color:var(--blau);animation:pulse 2s ease-in-out infinite}

/* ─── ANBIETER ───────────────────────────────────────────── */
.anbieter-card{background:#fff;border-radius:16px;box-shadow:0 4px 24px rgba(6,16,32,.09);padding:28px;border:1px solid rgba(201,168,76,.14);transition:all .4s cubic-bezier(.22,1,.36,1);margin-bottom:24px;display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start;position:relative;overflow:hidden}
.anbieter-card::before{content:'';position:absolute;top:0;right:0;width:220px;height:220px;background:radial-gradient(circle,rgba(201,168,76,.06) 0%,transparent 70%);pointer-events:none;transition:transform .4s}
.anbieter-card:hover{transform:translateY(-6px);box-shadow:0 24px 56px rgba(6,16,32,.18);border-color:rgba(201,168,76,.4)}
.anbieter-card:hover::before{transform:scale(2)}
.anbieter-rank{font-family:'Oswald',sans-serif;font-size:3rem;font-weight:700;color:var(--gold);min-width:54px;text-align:center;animation:glow 4s ease-in-out infinite}
.anbieter-body{flex:1;min-width:220px}
.anbieter-body h3{font-size:1.25rem;color:var(--blau);margin-bottom:8px}
.anbieter-body p{font-size:.92rem;color:#555;line-height:1.7;margin-bottom:14px}
.anbieter-tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.tag{background:rgba(6,16,32,.07);color:var(--blau);font-size:.76rem;padding:4px 12px;border-radius:50px;font-weight:500}
.anbieter-bonus-box{background:linear-gradient(135deg,rgba(39,174,96,.1),rgba(39,174,96,.04));border:1px solid rgba(39,174,96,.3);border-radius:12px;padding:14px 20px;text-align:center;min-width:140px}
.bonus-amount{font-family:'Oswald',sans-serif;font-size:1.4rem;font-weight:700;color:#27ae60;display:block}
.bonus-label{font-size:.75rem;color:var(--grau)}

/* ─── LIVE TICKER ────────────────────────────────────────── */
.live-ticker{background:rgba(6,16,32,.95);border:1px solid rgba(201,168,76,.2);border-radius:14px;overflow:hidden;backdrop-filter:blur(8px)}
.ticker-header{background:var(--rot,#c0392b);color:#fff;font-family:'Oswald',sans-serif;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;padding:10px 20px;display:flex;align-items:center;gap:10px}
.ticker-dot{width:8px;height:8px;border-radius:50%;background:#fff;animation:liveDot 1s infinite}
.ticker-body{padding:16px 20px;display:flex;flex-direction:column;gap:10px}
.ticker-row{display:flex;align-items:center;gap:12px;color:rgba(248,246,240,.85);font-size:.9rem;border-bottom:1px solid rgba(255,255,255,.06);padding-bottom:10px}
.ticker-row:last-child{border-bottom:none;padding-bottom:0}
.ticker-time{font-family:'Oswald',sans-serif;color:var(--gold);font-size:.83rem;min-width:42px}
.ticker-icon{color:var(--gold);animation:arrowBounce 2s ease-in-out infinite;font-size:.85rem}

/* ─── INFOBOX ────────────────────────────────────────────── */
.infobox{background:linear-gradient(135deg,var(--blau2),var(--blau));color:#fff;border-radius:16px;padding:32px 36px;position:relative;overflow:hidden}
.infobox::before{content:'';position:absolute;top:-40px;right:-40px;width:240px;height:240px;background:radial-gradient(circle,rgba(201,168,76,.1) 0%,transparent 65%);pointer-events:none;animation:float 8s ease-in-out infinite}
.infobox h3{color:var(--gold);font-size:1.15rem;margin-bottom:14px;animation:glow 4s ease-in-out infinite}
.infobox p,.infobox li{font-size:.92rem;color:rgba(248,246,240,.8);line-height:1.8}
.infobox ul{padding-left:1.1rem;list-style:disc}
.infobox ul li{margin-bottom:6px;transition:padding-left .2s,color .2s}
.infobox ul li:hover{padding-left:6px;color:var(--gold2)}

/* ─── TIPP BOX ───────────────────────────────────────────── */
.tipp-box{background:linear-gradient(135deg,#fefbf0,#fffdf5);border:1px solid rgba(201,168,76,.3);border-left:5px solid var(--gold);border-radius:0 12px 12px 0;padding:22px 26px;position:relative;transition:all .3s;overflow:hidden}
.tipp-box::before{content:'';position:absolute;top:0;right:0;width:80px;height:80px;background:radial-gradient(circle,rgba(201,168,76,.08) 0%,transparent 70%);transform:translate(20px,-20px)}
.tipp-box:hover{transform:translateX(6px);box-shadow:0 6px 24px rgba(201,168,76,.18)}
.tipp-label{font-family:'Oswald',sans-serif;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:7px}
.tipp-box p{font-size:.93rem;color:#333;line-height:1.7}

/* ─── FINALE BOX ─────────────────────────────────────────── */
.finale-box{background:linear-gradient(135deg,var(--blau) 0%,#1a3a6e 50%,var(--blau2) 100%);color:#fff;border-radius:20px;padding:52px 40px;text-align:center;position:relative;overflow:hidden;box-shadow:0 32px 80px rgba(6,16,32,.5);border:1px solid rgba(201,168,76,.22)}
.finale-box::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(201,168,76,.14) 0%,transparent 65%)}
.finale-box::after{content:'';position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(201,168,76,.07),transparent);animation:scan 7s ease-in-out 1s infinite;pointer-events:none}
.finale-label{font-family:'Oswald',sans-serif;font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:28px;animation:glow 3s ease-in-out infinite}
.finale-teams{display:flex;align-items:center;justify-content:center;gap:48px;flex-wrap:wrap}
.finale-team{text-align:center}
.finale-flag{font-size:4rem;display:block;animation:float 4.5s ease-in-out infinite}
.finale-team:nth-child(3) .finale-flag{animation-delay:1.2s}
.finale-name{font-family:'Oswald',sans-serif;font-size:1.6rem;color:var(--gold);margin-top:10px;display:block}
.finale-vs{font-family:'Oswald',sans-serif;font-size:2.5rem;color:rgba(255,255,255,.2)}
.finale-result{font-size:.95rem;color:rgba(248,246,240,.7);margin-top:28px;max-width:480px;margin-left:auto;margin-right:auto}

/* ─── SEPARATEUR ─────────────────────────────────────────── */
.sep{height:3px;background:linear-gradient(90deg,transparent,var(--gold),var(--gold2),var(--gold),transparent);background-size:200%;border:none;margin:52px 0;animation:shimmer 3.5s linear infinite}


/* ─── RATINGS ────────────────────────────────────────────── */
.rating-row{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--grau2);transition:background .2s,padding-left .2s}
.rating-row:hover{padding-left:8px;background:rgba(201,168,76,.04);border-radius:8px}
.rating-row:last-child{border-bottom:none}
.rating-name{font-weight:600;color:var(--blau);min-width:120px;font-family:'Oswald',sans-serif;font-size:.95rem}
.stars{color:var(--gold);font-size:1rem;letter-spacing:1px;animation:glow 4s ease-in-out infinite}
.rating-score{font-family:'Oswald',sans-serif;font-weight:700;color:var(--gold);margin-left:auto}

/* ─── BADGES ─────────────────────────────────────────────── */
.badge{font-family:'Oswald',sans-serif;font-size:.75rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:4px 12px;border-radius:50px;display:inline-block;white-space:nowrap}
.badge-gold{background:var(--gold);color:var(--blau);animation:pulse 3s ease-in-out infinite}
.badge-green{background:#27ae60;color:#fff}
.badge-blue{background:var(--blau);color:var(--gold)}
.badge-live{background:#e53e3e;color:#fff;animation:blink 1.2s ease-in-out infinite}

/* ─── TABLEAU ────────────────────────────────────────────── */
.wett-table{width:100%;border-collapse:collapse;border-radius:14px;overflow:hidden;box-shadow:0 4px 24px rgba(6,16,32,.1)}
.wett-table thead{background:linear-gradient(135deg,var(--blau),var(--blau2));color:var(--gold);font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.05em}
.wett-table thead th{padding:16px 18px;text-align:left;font-size:.9rem;position:relative}
.wett-table thead::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent);animation:scan 6s linear infinite;pointer-events:none}
.wett-table tbody tr{border-bottom:1px solid var(--grau2);transition:all .25s}
.wett-table tbody tr:hover{background:linear-gradient(90deg,rgba(201,168,76,.07),rgba(201,168,76,.02));transform:translateX(4px);box-shadow:-4px 0 0 var(--gold) inset}
.wett-table tbody td{padding:14px 18px;vertical-align:middle;font-size:.93rem}
.wett-table tbody td:first-child{font-weight:600;color:var(--blau);font-family:'Oswald',sans-serif}

/* ─── HIGHLIGHT ──────────────────────────────────────────── */
.highlight{background:linear-gradient(135deg,rgba(201,168,76,.1),rgba(201,168,76,.02));border-left:4px solid var(--gold);border-radius:0 10px 10px 0;padding:20px 24px;transition:all .3s}


/* ─── OUTILS INTERACTIFS ─────────────────────────────────── */
/* Calculateur de gains */
.calculator{background:linear-gradient(135deg,var(--blau),var(--blau2));border-radius:18px;padding:38px;color:#fff;position:relative;overflow:hidden;box-shadow:0 12px 40px rgba(6,16,32,.4)}
.calculator::before{content:'';position:absolute;top:-60px;right:-60px;width:300px;height:300px;background:radial-gradient(circle,rgba(201,168,76,.1) 0%,transparent 65%);pointer-events:none;animation:float 9s ease-in-out infinite}
.calculator-title{font-family:'Oswald',sans-serif;font-size:1.5rem;color:var(--gold);margin-bottom:8px;animation:glow 4s ease-in-out infinite}
.calc-form{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px}
.calc-field{display:flex;flex-direction:column;gap:7px}
.calc-field label{font-size:.8rem;color:rgba(248,246,240,.65);font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.07em}
.calc-field input,.calc-field select{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:10px;color:#fff;padding:12px 16px;font-size:1rem;outline:none;transition:border-color .3s;font-family:'Inter',sans-serif}
.calc-field input:focus,.calc-field select:focus{border-color:var(--gold);background:rgba(201,168,76,.08)}
.calc-field input::placeholder{color:rgba(255,255,255,.3)}
.calc-result{grid-column:1/-1;background:rgba(201,168,76,.12);border:1px solid rgba(201,168,76,.3);border-radius:12px;padding:18px 22px;display:flex;justify-content:space-between;align-items:center;transition:all .4s}
.calc-result.active{background:rgba(201,168,76,.22);border-color:var(--gold);box-shadow:0 0 20px rgba(201,168,76,.15)}
.calc-result-label{font-size:.85rem;color:rgba(248,246,240,.65)}
.calc-result-amount{font-family:'Oswald',sans-serif;font-size:2rem;font-weight:700;color:var(--gold)}
.calc-profit{font-family:'Oswald',sans-serif;font-size:.9rem;color:#27ae60;margin-top:4px}

/* Tabs */
.tabs-container{position:relative}
.tabs-nav{display:flex;gap:4px;background:rgba(6,16,32,.06);padding:6px;border-radius:12px;margin-bottom:28px;flex-wrap:wrap}
.tab-btn{font-family:'Oswald',sans-serif;font-size:.9rem;letter-spacing:.06em;text-transform:uppercase;padding:10px 20px;border:none;background:transparent;color:var(--grau);cursor:pointer;border-radius:9px;transition:all .3s;flex:1;min-width:100px}
.tab-btn.active{background:#fff;color:var(--blau);box-shadow:0 2px 10px rgba(6,16,32,.12)}
.tab-panel{display:none;animation:fadeSlideUp .4s ease}
.tab-panel.active{display:block}

/* Accord */
.accordion-item{border-bottom:1px solid var(--grau2)}
.acc-header{display:flex;justify-content:space-between;align-items:center;padding:18px 0;cursor:pointer;transition:color .25s;font-family:'Oswald',sans-serif;font-size:1.05rem;color:var(--blau);font-weight:600;user-select:none}
.acc-header:hover{color:var(--gold)}
.acc-icon{font-size:1.2rem;transition:transform .35s;color:var(--gold)}
.accordion-item.open .acc-icon{transform:rotate(45deg)}
.acc-body{max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.22,1,.36,1)}
.accordion-item.open .acc-body{max-height:400px}
.acc-content{padding:0 0 20px;font-size:.93rem;color:#444;line-height:1.8}

/* ─── STICKY STORY ───────────────────────────────────────── */
.sticky-section{position:relative}
.sticky-canvas{position:sticky;top:120px;height:70vh;display:flex;align-items:center;justify-content:center;overflow:hidden}

/* ─── WERT COUNTER ───────────────────────────────────────── */
[data-count]{font-variant-numeric:tabular-nums}

/* ─── FOOTER ─────────────────────────────────────────────── */
footer{background:linear-gradient(180deg,var(--blau) 0%,#040c18 100%);color:rgba(248,246,240,.65);padding:72px 0 0;border-top:3px solid var(--gold)}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:44px;max-width:1200px;margin:0 auto;padding:0 24px 52px}
.footer-col h4{color:var(--gold);font-size:.95rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:20px;position:relative;display:inline-block}
.footer-col h4::after{content:'';position:absolute;bottom:-7px;left:0;height:2px;width:100%;background:linear-gradient(90deg,var(--gold),transparent);transform-origin:left;animation:lineGrow 1s ease .5s both}
.footer-col ul li{margin-bottom:10px}
.footer-col ul li a{color:rgba(248,246,240,.6);font-size:.9rem;transition:all .2s;display:inline-block}
.footer-col ul li a:hover{color:var(--gold);text-decoration:none;padding-left:8px}
.footer-col p{font-size:.87rem;line-height:1.8}
.footer-bottom{max-width:1200px;margin:0 auto;padding:20px 24px;border-top:1px solid rgba(248,246,240,.08);display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:.8rem;color:rgba(248,246,240,.35)}
.footer-bottom a{color:rgba(248,246,240,.4)}
.footer-bottom a:hover{color:var(--gold);text-decoration:none}
.warning-bar{background:#040c18;color:rgba(248,246,240,.45);text-align:center;padding:14px 20px;font-size:.78rem;border-top:1px solid rgba(201,168,76,.1)}

/* ─── RESPONSIVE ─────────────────────────────────────────── */

  nav{grid-column:1/-1;justify-content:center}
  nav ul{flex-wrap:wrap;justify-content:center;gap:2px}
  nav a{font-size:.78rem;padding:6px 9px}
  .hero{min-height:90vh;padding-top:120px}
  .partner-cards-grid{grid-template-columns:1fr}
  .calc-form{grid-template-columns:1fr}
  .finale-teams{gap:20px}
  .hero-orb-1,.hero-orb-2{display:none}
  .stats-grid{grid-template-columns:repeat(3,1fr)}
  .stat-item{border-right:none;border-bottom:1px solid rgba(201,168,76,.1)}
}
@media(max-width:600px){
  section{padding:60px 0}
  .section-title{font-size:1.8rem}
  .hero-h1{font-size:2.4rem}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .anbieter-card{flex-direction:column}
  .favorit-karte{flex-wrap:wrap}
  .favorit-quote{margin-left:0}
  .finale-teams{gap:12px}
  .match-quotes{flex-wrap:wrap}
  .card-grid{grid-template-columns:1fr}
  .gruppen-grid{grid-template-columns:1fr}
}

/* ─── DRAPEAUX avec flagcdn ──────────────────────────────── */
.flag{display:inline-block;width:28px;height:20px;border-radius:3px;background-size:cover;background-position:center;flex-shrink:0;box-shadow:0 1px 4px rgba(0,0,0,.25);vertical-align:middle}
.flag-lg{width:44px;height:30px;border-radius:4px}
.flag-xl{width:72px;height:50px;border-radius:6px;box-shadow:0 4px 16px rgba(0,0,0,.3)}
.flag-fr{background-image:url('https://flagcdn.com/w40/fr.png')}
.flag-br{background-image:url('https://flagcdn.com/w40/br.png')}
.flag-ar{background-image:url('https://flagcdn.com/w40/ar.png')}
.flag-de{background-image:url('https://flagcdn.com/w40/de.png')}
.flag-gb-eng{background-image:url('https://flagcdn.com/w40/gb-eng.png')}
.flag-es{background-image:url('https://flagcdn.com/w40/es.png')}
.flag-pt{background-image:url('https://flagcdn.com/w40/pt.png')}
.flag-nl{background-image:url('https://flagcdn.com/w40/nl.png')}
.flag-us{background-image:url('https://flagcdn.com/w40/us.png')}
.flag-mx{background-image:url('https://flagcdn.com/w40/mx.png')}
.flag-ca{background-image:url('https://flagcdn.com/w40/ca.png')}
.flag-jp{background-image:url('https://flagcdn.com/w40/jp.png')}
.flag-ma{background-image:url('https://flagcdn.com/w40/ma.png')}
.flag-sn{background-image:url('https://flagcdn.com/w40/sn.png')}
.flag-ng{background-image:url('https://flagcdn.com/w40/ng.png')}
.flag-kr{background-image:url('https://flagcdn.com/w40/kr.png')}
.flag-hr{background-image:url('https://flagcdn.com/w40/hr.png')}
.flag-be{background-image:url('https://flagcdn.com/w40/be.png')}
.flag-uy{background-image:url('https://flagcdn.com/w40/uy.png')}
.flag-sa{background-image:url('https://flagcdn.com/w40/sa.png')}
.flag-co{background-image:url('https://flagcdn.com/w40/co.png')}
.flag-ch{background-image:url('https://flagcdn.com/w40/ch.png')}
.flag-dz{background-image:url('https://flagcdn.com/w40/dz.png')}
.flag-ec{background-image:url('https://flagcdn.com/w40/ec.png')}
.flag-se{background-image:url('https://flagcdn.com/w40/se.png')}
.flag-au{background-image:url('https://flagcdn.com/w40/au.png')}
.flag-cl{background-image:url('https://flagcdn.com/w40/cl.png')}
.flag-ro{background-image:url('https://flagcdn.com/w40/ro.png')}
.flag-gh{background-image:url('https://flagcdn.com/w40/gh.png')}
.flag-ir{background-image:url('https://flagcdn.com/w40/ir.png')}
.flag-pa{background-image:url('https://flagcdn.com/w40/pa.png')}
.flag-jm{background-image:url('https://flagcdn.com/w40/jm.png')}
.flag-ph{background-image:url('https://flagcdn.com/w40/ph.png')}
.flag-hn{background-image:url('https://flagcdn.com/w40/hn.png')}
.flag-sv{background-image:url('https://flagcdn.com/w40/sv.png')}
.flag-bf{background-image:url('https://flagcdn.com/w40/bf.png')}
.flag-cy{background-image:url('https://flagcdn.com/w40/cy.png')}

/* ─── GROUPE KARTE AMÉLIORÉE ─────────────────────────────── */
.gruppe-karte-v2{background:#fff;border-radius:16px;box-shadow:0 4px 20px rgba(6,16,32,.09);overflow:hidden;transition:all .4s cubic-bezier(.22,1,.36,1);border:1px solid rgba(201,168,76,.1)}
.gruppe-karte-v2:hover{transform:translateY(-10px);box-shadow:0 24px 52px rgba(6,16,32,.18);border-color:rgba(201,168,76,.35)}
.gruppe-karte-v2:hover .gruppe-name-v2{background:linear-gradient(135deg,var(--blau),#1a3a6e)}
.gruppe-name-v2{background:linear-gradient(135deg,var(--blau2),var(--blau));color:var(--gold);font-family:'Oswald',sans-serif;font-size:1.05rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:14px 18px 12px;position:relative;overflow:hidden;display:flex;justify-content:space-between;align-items:center;transition:background .3s}
.gruppe-name-v2::after{content:'';position:absolute;top:0;left:-100%;width:80%;height:100%;background:linear-gradient(90deg,transparent,rgba(201,168,76,.14),transparent);animation:scan 4.5s ease-in-out infinite}
.gruppe-badge{font-size:.65rem;background:rgba(201,168,76,.2);border:1px solid rgba(201,168,76,.3);color:var(--gold2);padding:2px 8px;border-radius:20px;letter-spacing:.05em;font-weight:600}
.gruppe-teams{padding:14px 18px;display:flex;flex-direction:column;gap:10px}
.gruppe-team-row{display:flex;align-items:center;gap:12px;padding:6px 10px;border-radius:8px;transition:background .2s,transform .2s;cursor:default}
.gruppe-team-row:hover{background:rgba(201,168,76,.07);transform:translateX(4px)}
.gruppe-team-row .team-name{font-size:.9rem;font-weight:600;color:var(--blau);flex:1}
.gruppe-team-row .team-quote{font-family:'Oswald',sans-serif;font-size:.85rem;color:var(--gold);background:var(--blau2);padding:3px 10px;border-radius:6px;margin-left:auto;font-weight:700}
.gruppe-team-row.top .team-name{color:var(--blau);font-weight:700}
.gruppe-team-row.top .team-quote{background:var(--gold);color:var(--blau);animation:quoteAnim 4s ease-in-out infinite}
.gruppe-tip-v2{padding:10px 18px 14px;font-size:.8rem;color:var(--grau);border-top:1px solid rgba(201,168,76,.1);display:flex;align-items:center;gap:8px;background:rgba(201,168,76,.03)}
.gruppe-tip-v2 strong{color:var(--blau)}

/* ─── OUTILS INTERACTIFS ─────────────────────────────────── */
.tools-strip{background:linear-gradient(135deg,var(--blau),var(--blau2));padding:60px 0;position:relative;overflow:hidden}
.tools-strip::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(201,168,76,.12) 0%,transparent 60%)}
.tools-strip::after{content:'';position:absolute;top:0;left:-100%;width:40%;height:100%;background:linear-gradient(90deg,transparent,rgba(201,168,76,.05),transparent);animation:scan 10s ease-in-out infinite;pointer-events:none}
.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;position:relative;z-index:1}
.tool-card{background:rgba(255,255,255,.05);border:1px solid rgba(201,168,76,.18);border-radius:14px;padding:20px 22px;text-align:center;cursor:pointer;transition:all .35s cubic-bezier(.22,1,.36,1);position:relative;overflow:hidden}
.tool-card::before{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(201,168,76,.08),transparent);animation:scan 5s ease-in-out infinite}
.tool-card:hover{background:rgba(201,168,76,.15);border-color:rgba(201,168,76,.5);transform:translateY(-6px) scale(1.03);box-shadow:0 16px 40px rgba(6,16,32,.4)}
.tool-icon{font-size:2rem;display:block;margin-bottom:10px}
.tool-name{font-family:'Oswald',sans-serif;color:var(--gold);font-size:1rem;font-weight:700;margin-bottom:4px;letter-spacing:.04em}
.tool-desc{font-size:.78rem;color:rgba(248,246,240,.55);line-height:1.5}

/* ─── QUIZ INTERACTIF ────────────────────────────────────── */
.quiz-widget{background:linear-gradient(135deg,var(--blau),#1a3a6e);border-radius:18px;padding:36px;color:#fff;position:relative;overflow:hidden}
.quiz-widget::before{content:'';position:absolute;top:-50px;right:-50px;width:250px;height:250px;background:radial-gradient(circle,rgba(201,168,76,.1) 0%,transparent 65%);pointer-events:none}
.quiz-question{font-family:'Oswald',sans-serif;font-size:1.3rem;color:var(--gold);margin-bottom:22px;line-height:1.3}
.quiz-options{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
.quiz-option{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);border-radius:10px;padding:13px 18px;cursor:pointer;transition:all .3s;display:flex;align-items:center;gap:12px;font-size:.93rem;color:rgba(248,246,240,.85)}
.quiz-option:hover{background:rgba(201,168,76,.15);border-color:rgba(201,168,76,.4);transform:translateX(6px)}
.quiz-option.correct{background:rgba(39,174,96,.2);border-color:#27ae60;color:#27ae60}
.quiz-option.wrong{background:rgba(229,57,53,.15);border-color:#e53935;color:#ef9a9a}
.quiz-option.disabled{pointer-events:none;opacity:.6}
.quiz-option-letter{background:rgba(201,168,76,.2);color:var(--gold);font-family:'Oswald',sans-serif;font-weight:700;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.85rem}
.quiz-feedback{padding:14px 18px;border-radius:10px;font-size:.9rem;line-height:1.6;display:none}
.quiz-feedback.show{display:block}
.quiz-feedback.correct{background:rgba(39,174,96,.15);border:1px solid rgba(39,174,96,.3);color:#a8e6c2}
.quiz-feedback.wrong{background:rgba(229,57,53,.1);border:1px solid rgba(229,57,53,.3);color:#ffcdd2}
.quiz-progress{display:flex;gap:6px;margin-bottom:20px}
.quiz-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.15);transition:all .3s}
.quiz-dot.active{background:var(--gold);box-shadow:0 0 8px rgba(201,168,76,.5)}
.quiz-dot.done-ok{background:#27ae60}
.quiz-dot.done-bad{background:#e53935}
.quiz-score{font-family:'Oswald',sans-serif;font-size:1.8rem;color:var(--gold);text-align:center;margin-top:20px}

/* ─── QUOTE FINDER ───────────────────────────────────────── */
.quote-finder{background:#fff;border-radius:18px;padding:32px;box-shadow:0 8px 40px rgba(6,16,32,.12);border:1px solid rgba(201,168,76,.15)}
.quote-finder-title{font-family:'Oswald',sans-serif;font-size:1.3rem;color:var(--blau);margin-bottom:20px}
.qf-select{width:100%;background:var(--weiss);border:2px solid rgba(201,168,76,.25);border-radius:10px;padding:12px 16px;font-size:.95rem;font-family:'Inter',sans-serif;color:var(--blau);outline:none;cursor:pointer;transition:border-color .3s;margin-bottom:12px}
.qf-select:focus{border-color:var(--gold)}
.qf-results{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.qf-row{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-radius:8px;background:var(--weiss);border:1px solid rgba(201,168,76,.12);transition:all .25s}
.qf-row:hover{border-color:rgba(201,168,76,.4);background:linear-gradient(90deg,rgba(201,168,76,.06),rgba(201,168,76,.02));transform:translateX(4px)}
.qf-row:first-child{background:linear-gradient(90deg,rgba(201,168,76,.1),rgba(201,168,76,.04));border-color:var(--gold)}
.qf-anbieter{font-weight:600;color:var(--blau);font-size:.9rem}
.qf-quote-val{font-family:'Oswald',sans-serif;font-size:1.2rem;color:var(--gold);font-weight:700}
.qf-row:first-child .qf-quote-val{color:var(--blau);background:var(--gold);padding:4px 12px;border-radius:6px}
.qf-badge-best{font-size:.7rem;background:var(--gold);color:var(--blau);font-weight:700;padding:2px 8px;border-radius:20px;font-family:'Oswald',sans-serif;letter-spacing:.05em}

/* ─── STANDINGS TABLEAU ──────────────────────────────────── */
/* ================================================================
   CORRECTIFS UX/UI – Grilles responsives + améliorations globales
   ================================================================ */

/* ── Grilles 2 colonnes → responsives (remplacement inline styles) */
.grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: start;
}
.grid-2col-tight {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: start;
}
.grid-2col-wide {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 52px;
  align-items: start;
}
.grid-2col-med {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: start;
}

@media (max-width: 860px) {
  .grid-2col,
  .grid-2col-tight,
  .grid-2col-wide,
  .grid-2col-med {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* ── Section padding mobile manquant */
@media (max-width: 600px) {
  section { padding: 52px 0; }
  .partner-premium { padding: 52px 0; }
  .stats-strip { padding: 40px 0; }
  .tools-strip { padding: 40px 0; }
  .container { padding: 0 16px; }
}

/* ── Breadcrumb : évite le chevauchement header fixe */
.breadcrumb { margin-top: 72px; }
@media (max-width: 900px) {
  .breadcrumb { margin-top: 108px; }
}
@media (max-width: 600px) {
  .breadcrumb { margin-top: 120px; }
}

/* ── Header : évite que le contenu passe sous le header fixe */
.hero { padding-top: 72px !important; }
@media (max-width: 900px) {
  .hero { padding-top: 108px !important; }
}

/* ── Match cards : empêche overflow sur petits écrans */
@media (max-width: 600px) {
  .match-grid { grid-template-columns: 1fr; }
  .match-card { padding: 18px 14px; }
  
  .match-vs { font-size: 1.3rem; }
  .hero-badge { font-size: .7rem; padding: 6px 14px; letter-spacing: .08em; }
  .hero-partners { flex-direction: column; align-items: center; }
  .hero-partner-btn { width: 100%; justify-content: center; max-width: 300px; }
}

/* ── Tabs nav : scroll horizontal sur très petit écran */
@media (max-width: 480px) {
  .tabs-nav {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tabs-nav::-webkit-scrollbar { display: none; }
  .tab-btn { flex: 0 0 auto; }
}

/* ── Favorit karte : évite le débordement du flag sur mobile */
@media (max-width: 500px) {
  .favorit-karte { padding: 16px; gap: 12px; }
  .favorit-rang { font-size: 1.8rem; min-width: 32px; }
  .favorit-info h3 { font-size: 1rem; }
  .flag-lg { width: 34px; height: 24px; }
}

/* ── Gruppen grid : min 2 colonnes tablette */
@media (min-width: 601px) and (max-width: 900px) {
  .gruppen-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Anbieter card : progress bars full width sur mobile */
@media (max-width: 600px) {
  .anbieter-card { padding: 20px; gap: 16px; }
  .anbieter-rank { font-size: 2.2rem; min-width: 40px; }
  .anbieter-bonus-box { width: 100%; }
  .prognose-item { padding: 16px; gap: 12px; }
  .prognose-tips { width: 100%; }
}

/* ── Wett table : scroll horizontal sur mobile */
.wett-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 14px;
  box-shadow: 0 4px 24px rgba(6,16,32,.1);
}
.wett-table-wrap .wett-table {
  box-shadow: none;
  min-width: 500px;
}

/* ── Calculator : 1 colonne sur mobile */
@media (max-width: 500px) {
  .calc-form { grid-template-columns: 1fr; }
  .calculator { padding: 24px 20px; }
}

/* ── Quiz widget : padding réduit mobile */
@media (max-width: 600px) {
  .quiz-widget { padding: 22px 18px; }
  .quiz-question { font-size: 1.1rem; }
  .quiz-option { padding: 11px 14px; font-size: .87rem; }
}

/* ── Quote finder : padding réduit mobile */
@media (max-width: 600px) {
  .quote-finder { padding: 22px 18px; }
}

/* ── Section-title clip-path : évite coupure sur Safari */
.section-title {
  overflow: visible !important;
  will-change: clip-path;
}

/* ── Footer grid responsive */
@media (max-width: 600px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }
}
@media (max-width: 400px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ── Finale box : padding réduit mobile */
@media (max-width: 600px) {
  .finale-box { padding: 32px 20px; }
  
  .finale-name { font-size: 1.2rem; }
}

/* ── Partner cards : hauteur égale */
.partner-cards-grid {
  align-items: stretch;
}
.partner-card {
  display: flex;
  flex-direction: column;
}
.partner-card-btn {
  margin-top: auto;
}

/* ── Stat items : dernière colonne sans border-right */
.stats-grid .stat-item:last-child { border-right: none; }
@media (max-width: 900px) {
  .stats-grid .stat-item { border-right: none; }
}

/* ── Prognose-liste : width corrigé sur mobile */
@media (max-width: 600px) {
  .tip-box { min-width: 54px; }
  .tip-quote { font-size: .85rem; padding: 6px 8px; }
}

/* ── Infobox ul : overflow sur liste */
.infobox ul li { word-break: break-word; }

/* ── Overflow protection globale */
.hero, section, footer, .stats-strip, .partner-premium {
  overflow-x: hidden;
}

/* ── Focus visible pour accessibilité */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Smooth scroll natif */
html { scroll-behavior: smooth; }

/* ── Sélection de texte cohérente */
::selection { background: rgba(201,168,76,.25); color: var(--blau); }

/* ── Utilitaires – remplacement styles inline ────────────── */
.tbl-quote{color:var(--gold);font-family:'Oswald',sans-serif;font-size:1.1rem;font-weight:700}
.panel-title{font-family:'Oswald',sans-serif;font-weight:700;color:var(--blau);margin-bottom:16px}
.favorit-list{display:flex;flex-direction:column;gap:12px;margin-bottom:44px}

/* ================================================================
   BLOCS PARTENAIRES – 5 VARIANTES DISTINCTES PAR PAGE
   ================================================================ */

/* ── Variante 1 (index) : Cards côte à côte – style actuel gardé ── */

/* ── Variante 2 (favoriten) : Bannière horizontale pleine largeur ── */
.partner-banner {
  background: linear-gradient(135deg, var(--blau) 0%, #1a3a6e 100%);
  padding: 52px 0;
  position: relative;
  overflow: hidden;
  border-top: 3px solid var(--gold);
  border-bottom: 3px solid rgba(201,168,76,.2);
}
.partner-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 100% at 0% 50%, rgba(201,168,76,.1) 0%, transparent 60%),
              radial-gradient(ellipse 70% 100% at 100% 50%, rgba(22,51,102,.5) 0%, transparent 60%);
}
.partner-banner::after {
  content: '';
  position: absolute;
  top: 0; left: -100%; width: 40%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(201,168,76,.06), transparent);
  animation: scan 9s ease-in-out infinite;
  pointer-events: none;
}
.partner-banner-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}
.partner-banner-label {
  font-family: 'Oswald', sans-serif;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
}
.partner-banner-title {
  font-family: 'Oswald', sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
  text-transform: uppercase;
}
.partner-banner-title span { color: var(--gold); }
.partner-banner-desc {
  font-size: .88rem;
  color: rgba(248,246,240,.6);
  margin-top: 6px;
  max-width: 380px;
  line-height: 1.6;
}
.partner-banner-btns {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
  margin-left: auto;
}
.partner-banner-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  border-radius: 12px;
  font-family: 'Oswald', sans-serif;
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: all .3s cubic-bezier(.22,1,.36,1);
  min-width: 260px;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}
.partner-banner-btn::after {
  content: '';
  position: absolute;
  top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
  transition: left .5s;
}
.partner-banner-btn:hover::after { left: 150%; }
.partner-banner-btn.primary {
  background: var(--gold);
  color: var(--blau);
  box-shadow: 0 4px 20px rgba(201,168,76,.4);
  animation: pulse 3s ease-in-out infinite;
}
.partner-banner-btn.primary:hover {
  background: var(--gold2);
  text-decoration: none;
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 10px 30px rgba(201,168,76,.5);
}
.partner-banner-btn.secondary {
  background: rgba(255,255,255,.08);
  color: rgba(248,246,240,.9);
  border: 1px solid rgba(255,255,255,.2);
}
.partner-banner-btn.secondary:hover {
  background: rgba(201,168,76,.15);
  border-color: var(--gold);
  color: var(--gold);
  text-decoration: none;
  transform: translateY(-3px);
}
.partner-banner-btn .btn-icon { font-size: 1.1rem; }
.partner-banner-btn .btn-arrow { margin-left: auto; opacity: .6; animation: arrowBounce 1.8s ease-in-out infinite; }
.partner-banner-divider {
  width: 1px;
  height: 80px;
  background: linear-gradient(to bottom, transparent, rgba(201,168,76,.3), transparent);
  flex-shrink: 0;
}
@media (max-width: 860px) {
  .partner-banner-btns { margin-left: 0; width: 100%; }
  .partner-banner-btn { min-width: 0; width: 100%; justify-content: space-between; }
  .partner-banner-divider { display: none; }
  .partner-banner-inner { gap: 24px; }
}

/* ── Variante 3 (gruppen) : Split 50/50 avec icône grande ── */
.partner-split {
  padding: 0;
  overflow: hidden;
}
.partner-split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.partner-split-item {
  padding: 52px 44px;
  position: relative;
  overflow: hidden;
  transition: filter .3s;
}
.partner-split-item:first-child {
  background: linear-gradient(135deg, #061020 0%, #0d1f3c 100%);
  border-right: 1px solid rgba(201,168,76,.15);
}
.partner-split-item:last-child {
  background: linear-gradient(135deg, #0d1f3c 0%, #163366 100%);
}
.partner-split-item::before {
  content: '';
  position: absolute;
  bottom: -60px; right: -60px;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,168,76,.08) 0%, transparent 70%);
  transition: transform .4s;
}
.partner-split-item:hover::before { transform: scale(1.5); }
.partner-split-item::after {
  content: '';
  position: absolute;
  top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(201,168,76,.06), transparent);
  animation: scan 6s ease-in-out infinite;
  pointer-events: none;
}
.split-icon-wrap {
  width: 64px; height: 64px;
  background: rgba(201,168,76,.12);
  border: 1px solid rgba(201,168,76,.25);
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem;
  margin-bottom: 20px;
  transition: all .3s;
  animation: pulse 4s ease-in-out infinite;
}
.partner-split-item:hover .split-icon-wrap {
  background: rgba(201,168,76,.22);
  border-color: var(--gold);
  transform: scale(1.08);
}
.split-name {
  font-family: 'Oswald', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 10px;
  animation: glow 4s ease-in-out infinite;
}
.split-desc {
  font-size: .88rem;
  color: rgba(248,246,240,.65);
  line-height: 1.7;
  margin-bottom: 20px;
}
.split-tags {
  display: flex; flex-wrap: wrap; gap: 7px;
  margin-bottom: 24px;
}
.split-tag {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  color: rgba(248,246,240,.7);
  font-size: .73rem;
  padding: 4px 11px;
  border-radius: 50px;
}
.split-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--gold);
  color: var(--blau);
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: .88rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 12px 22px;
  border-radius: 10px;
  transition: all .3s;
  text-decoration: none;
  animation: pulse 3s ease-in-out infinite;
}
.split-cta:hover {
  background: var(--gold2);
  text-decoration: none;
  transform: translateX(4px);
  color: var(--blau);
}
@media (max-width: 760px) {
  .partner-split-grid { grid-template-columns: 1fr; }
  .partner-split-item { padding: 36px 24px; }
  .partner-split-item:first-child { border-right: none; border-bottom: 1px solid rgba(201,168,76,.15); }
}

/* ── Variante 4 (prognosen) : Feature row compact ── */
.partner-feature-row {
  background: var(--blau2);
  padding: 44px 0;
  border-top: 2px solid rgba(201,168,76,.2);
  border-bottom: 2px solid rgba(201,168,76,.2);
  position: relative;
  overflow: hidden;
}
.partner-feature-row::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 100% at 50% 50%, rgba(201,168,76,.07) 0%, transparent 65%);
}
.partner-feature-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.partner-feature-logo {
  background: rgba(201,168,76,.1);
  border: 1px solid rgba(201,168,76,.25);
  border-radius: 14px;
  padding: 16px 22px;
  text-align: center;
  flex-shrink: 0;
  min-width: 140px;
  transition: all .3s;
  animation: pulse 4s ease-in-out infinite;
}
.partner-feature-logo:hover {
  background: rgba(201,168,76,.18);
  border-color: var(--gold);
  transform: translateY(-3px);
}
.partner-feature-logo-name {
  font-family: 'Oswald', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gold);
  display: block;
  margin-bottom: 3px;
  animation: glow 4s ease-in-out infinite;
}
.partner-feature-logo-sub {
  font-size: .72rem;
  color: rgba(248,246,240,.45);
  letter-spacing: .05em;
}
.partner-feature-sep {
  color: rgba(201,168,76,.3);
  font-size: 1.4rem;
  flex-shrink: 0;
}
.partner-feature-text { flex: 1; min-width: 200px; }
.partner-feature-title {
  font-family: 'Oswald', sans-serif;
  font-size: 1.15rem;
  color: #fff;
  margin-bottom: 5px;
}
.partner-feature-desc {
  font-size: .85rem;
  color: rgba(248,246,240,.55);
  line-height: 1.6;
}
.partner-feature-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.pf-btn {
  font-family: 'Oswald', sans-serif;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 11px 20px;
  border-radius: 9px;
  transition: all .3s;
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.pf-btn.gold { background: var(--gold); color: var(--blau); animation: pulse 3s ease-in-out infinite; }
.pf-btn.gold:hover { background: var(--gold2); text-decoration: none; transform: scale(1.04); color: var(--blau); }
.pf-btn.outline { background: transparent; border: 1px solid rgba(201,168,76,.4); color: var(--gold); }
.pf-btn.outline:hover { background: rgba(201,168,76,.12); text-decoration: none; }
@media (max-width: 760px) {
  .partner-feature-inner { gap: 16px; }
  .partner-feature-sep { display: none; }
  .partner-feature-logo { min-width: 0; }
  .partner-feature-actions { width: 100%; }
  .pf-btn { flex: 1; justify-content: center; }
}

/* ── Variante 5 (wettseiten) : Mise en avant numérotée ── */
.partner-numbered {
  background: linear-gradient(180deg, #040e1e 0%, var(--blau) 100%);
  padding: 56px 0;
  position: relative;
  overflow: hidden;
}
.partner-numbered::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(201,168,76,.1) 0%, transparent 55%);
}
.partner-numbered-header {
  text-align: center;
  margin-bottom: 36px;
  position: relative;
}
.partner-numbered-title {
  font-family: 'Oswald', sans-serif;
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-bottom: 8px;
}
.partner-numbered-title span { color: var(--gold); }
.partner-numbered-sub {
  font-size: .9rem;
  color: rgba(248,246,240,.5);
}
.partner-numbered-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}
.partner-num-item {
  display: flex;
  align-items: center;
  gap: 20px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(201,168,76,.15);
  border-radius: 14px;
  padding: 18px 24px;
  transition: all .35s cubic-bezier(.22,1,.36,1);
  text-decoration: none;
  overflow: hidden;
  position: relative;
}
.partner-num-item::before {
  content: '';
  position: absolute;
  top: 0; left: -100%; width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(201,168,76,.07), transparent);
  animation: scan 7s ease-in-out infinite;
  pointer-events: none;
}
.partner-num-item:hover {
  background: rgba(201,168,76,.1);
  border-color: rgba(201,168,76,.45);
  transform: translateX(8px);
  text-decoration: none;
}
.partner-num-step {
  font-family: 'Oswald', sans-serif;
  font-size: 2.2rem;
  font-weight: 700;
  color: rgba(201,168,76,.2);
  min-width: 44px;
  line-height: 1;
  flex-shrink: 0;
  transition: color .3s;
}
.partner-num-item:hover .partner-num-step { color: var(--gold); }
.partner-num-icon {
  font-size: 1.6rem;
  flex-shrink: 0;
  width: 48px; height: 48px;
  background: rgba(201,168,76,.1);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  transition: all .3s;
}
.partner-num-item:hover .partner-num-icon {
  background: rgba(201,168,76,.2);
  transform: scale(1.1);
}
.partner-num-body { flex: 1; }
.partner-num-name {
  font-family: 'Oswald', sans-serif;
  font-size: 1.05rem;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 3px;
}
.partner-num-desc {
  font-size: .83rem;
  color: rgba(248,246,240,.55);
  line-height: 1.5;
}
.partner-num-cta {
  font-family: 'Oswald', sans-serif;
  font-size: .78rem;
  color: var(--gold);
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  opacity: 0;
  transform: translateX(-8px);
  transition: all .3s;
}
.partner-num-item:hover .partner-num-cta {
  opacity: 1;
  transform: none;
}

/* ── Footer : colonne partenaires retirée ── */
.footer-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }

.partner-feature-stack{display:flex;flex-direction:column;gap:14px}

/* ================================================================
   OUTILS INTERACTIFS v2 – Informatifs, sans incitation au jeu
   ================================================================ */

/* ── Outil générique conteneur ────────────────────────────── */
.outil{background:#fff;border-radius:18px;box-shadow:0 6px 32px rgba(6,16,32,.1);border:1px solid rgba(201,168,76,.14);overflow:hidden}
.outil-header{background:linear-gradient(135deg,var(--blau),var(--blau2));padding:20px 28px;display:flex;align-items:center;gap:14px;position:relative;overflow:hidden}
.outil-header::after{content:'';position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(201,168,76,.1),transparent);animation:scan 6s ease-in-out infinite;pointer-events:none}
.outil-icon{font-size:1.6rem;flex-shrink:0}
.outil-title{font-family:'Oswald',sans-serif;font-size:1.1rem;font-weight:700;color:var(--gold);letter-spacing:.04em}
.outil-subtitle{font-size:.78rem;color:rgba(248,246,240,.5);margin-top:2px}
.outil-body{padding:24px 28px}

/* ── Comparateur d'équipes (favoriten) ────────────────────── */
.team-compare-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:0;align-items:center;margin-bottom:16px}
.team-compare-side{text-align:center;padding:16px}
.team-compare-side select{width:100%;background:var(--weiss);border:2px solid rgba(201,168,76,.2);border-radius:10px;padding:10px 12px;font-size:.88rem;font-family:'Inter',sans-serif;color:var(--blau);outline:none;transition:border-color .3s;cursor:pointer;margin-top:8px}
.team-compare-side select:focus{border-color:var(--gold)}
.team-compare-vs{font-family:'Oswald',sans-serif;font-size:1.4rem;color:rgba(6,16,32,.2);font-weight:700;padding:0 8px}
.compare-bars{display:flex;flex-direction:column;gap:12px;margin-top:4px}
.compare-bar-row{display:grid;grid-template-columns:60px 1fr 60px;align-items:center;gap:8px}
.compare-bar-label{font-size:.78rem;color:var(--grau);text-align:center;font-family:'Oswald',sans-serif;font-size:.75rem;letter-spacing:.05em;text-transform:uppercase}
.compare-bar-track{height:8px;background:var(--grau2);border-radius:50px;position:relative;overflow:visible;display:flex;align-items:center}
.compare-bar-a{height:100%;border-radius:50px 0 0 50px;background:linear-gradient(90deg,var(--blau),var(--blau2));transition:width .8s cubic-bezier(.22,1,.36,1);position:absolute;right:50%;transform-origin:right}
.compare-bar-b{height:100%;border-radius:0 50px 50px 0;background:linear-gradient(90deg,var(--gold),var(--gold2));transition:width .8s cubic-bezier(.22,1,.36,1);position:absolute;left:50%;transform-origin:left}
.compare-val-a{font-family:'Oswald',sans-serif;font-weight:700;color:var(--blau);text-align:right;font-size:.88rem}
.compare-val-b{font-family:'Oswald',sans-serif;font-weight:700;color:var(--gold);text-align:left;font-size:.88rem}
.compare-winner-bar{text-align:center;padding:10px;background:rgba(201,168,76,.08);border-radius:10px;font-family:'Oswald',sans-serif;font-size:.9rem;color:var(--blau);margin-top:4px}
.compare-winner-bar span{color:var(--gold);font-weight:700}
@media(max-width:600px){
  .team-compare-grid{grid-template-columns:1fr auto 1fr;gap:0}
  .team-compare-side{padding:10px 6px}
  .compare-bar-row{grid-template-columns:44px 1fr 44px;gap:5px}
}

/* ── Simulateur de groupes (gruppen) ──────────────────────── */
.sim-group-select{display:flex;gap:10px;margin-bottom:18px;flex-wrap:wrap}
.sim-group-btn{font-family:'Oswald',sans-serif;font-size:.82rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:8px 16px;border-radius:8px;border:2px solid rgba(201,168,76,.2);background:transparent;color:var(--grau);cursor:pointer;transition:all .25s}
.sim-group-btn:hover{border-color:rgba(201,168,76,.5);color:var(--blau)}
.sim-group-btn.active{background:var(--gold);border-color:var(--gold);color:var(--blau)}
.sim-table{width:100%;border-collapse:collapse}
.sim-table th{text-align:left;font-family:'Oswald',sans-serif;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--grau);padding:8px 10px;border-bottom:2px solid var(--grau2)}
.sim-table td{padding:10px;border-bottom:1px solid var(--grau2);font-size:.88rem;vertical-align:middle}
.sim-table tr:last-child td{border-bottom:none}
.sim-table tr.qualifier td{background:rgba(39,174,96,.06)}
.sim-table tr.qualifier td:first-child{border-left:3px solid #27ae60}
.sim-rank{font-family:'Oswald',sans-serif;font-weight:700;color:var(--grau);width:24px}
.sim-team-cell{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--blau)}
.sim-pts{font-family:'Oswald',sans-serif;font-weight:700;color:var(--blau);font-size:1rem}
.sim-pts.top{color:var(--gold)}
.sim-legend{font-size:.75rem;color:var(--grau);margin-top:10px;display:flex;align-items:center;gap:6px}
.sim-legend-dot{width:10px;height:10px;background:#27ae60;border-radius:2px;flex-shrink:0}

/* ── Timeline tournoi (prognosen) ─────────────────────────── */
.timeline{display:flex;flex-direction:column;gap:0;position:relative}
.timeline::before{content:'';position:absolute;left:28px;top:0;bottom:0;width:2px;background:linear-gradient(to bottom,var(--gold),rgba(201,168,76,.1));pointer-events:none}
.tl-item{display:flex;gap:20px;align-items:flex-start;padding:14px 0;cursor:pointer}
.tl-dot{width:58px;height:58px;border-radius:50%;border:2px solid rgba(201,168,76,.25);background:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1.3rem;transition:all .3s;position:relative;z-index:1}
.tl-item.active .tl-dot,.tl-item:hover .tl-dot{border-color:var(--gold);background:linear-gradient(135deg,var(--blau),var(--blau2));transform:scale(1.1)}
.tl-item.active .tl-dot{box-shadow:0 0 0 4px rgba(201,168,76,.15)}
.tl-content{flex:1;padding-top:10px}
.tl-date{font-size:.75rem;color:var(--grau);margin-bottom:3px;font-family:'Oswald',sans-serif;letter-spacing:.07em;text-transform:uppercase}
.tl-phase{font-family:'Oswald',sans-serif;font-size:1rem;font-weight:700;color:var(--blau);margin-bottom:4px;transition:color .3s}
.tl-item.active .tl-phase,.tl-item:hover .tl-phase{color:var(--gold)}
.tl-detail{font-size:.83rem;color:var(--grau);line-height:1.6;max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.22,1,.36,1),opacity .3s}
.tl-item.active .tl-detail{max-height:120px;opacity:1}
.tl-detail{opacity:0}
.tl-badge{font-size:.7rem;background:rgba(201,168,76,.12);color:var(--gold);padding:2px 10px;border-radius:50px;font-family:'Oswald',sans-serif;letter-spacing:.06em;display:inline-block;margin-top:5px}

/* ── Sondage / vote (wettseiten) ──────────────────────────── */
.vote-widget{display:flex;flex-direction:column;gap:10px}
.vote-option{display:flex;align-items:center;gap:12px;padding:12px 16px;border:2px solid rgba(201,168,76,.15);border-radius:12px;cursor:pointer;transition:all .3s;background:#fff;position:relative;overflow:hidden}
.vote-option:hover{border-color:rgba(201,168,76,.4);background:rgba(201,168,76,.04)}
.vote-option.voted{border-color:var(--gold);background:rgba(201,168,76,.08);pointer-events:none}
.vote-option.voted .vote-bar{height:100%;position:absolute;left:0;top:0;background:rgba(201,168,76,.12);border-radius:10px;z-index:0;transition:width 1s cubic-bezier(.22,1,.36,1)}
.vote-flag{font-size:1.4rem;z-index:1;flex-shrink:0}
.vote-name{font-family:'Oswald',sans-serif;font-weight:700;color:var(--blau);font-size:.95rem;flex:1;z-index:1}
.vote-pct{font-family:'Oswald',sans-serif;font-weight:700;color:var(--gold);font-size:1rem;z-index:1;min-width:42px;text-align:right;opacity:0;transition:opacity .4s}
.vote-option.voted .vote-pct{opacity:1}
.vote-check{color:var(--gold);font-size:1.1rem;z-index:1;opacity:0;transition:opacity .3s;min-width:20px}
.vote-option.voted .vote-check{opacity:1}
.vote-total{font-size:.78rem;color:var(--grau);margin-top:6px;text-align:center}

/* ── Tipp-Karte inline (subtil) ───────────────────────────── */
.inline-tipp{display:inline-flex;align-items:center;gap:8px;background:rgba(201,168,76,.07);border:1px solid rgba(201,168,76,.2);border-radius:8px;padding:5px 12px;font-size:.82rem;color:var(--blau);transition:all .25s;text-decoration:none;white-space:nowrap}
.inline-tipp:hover{background:rgba(201,168,76,.14);border-color:rgba(201,168,76,.5);text-decoration:none;color:var(--blau)}
.inline-tipp .it-label{font-weight:600;color:var(--gold)}

/* ── Mention partenaire éditoriale (subtile) ──────────────── */
.partner-mention{display:flex;align-items:center;gap:10px;padding:12px 16px;background:rgba(201,168,76,.06);border-left:3px solid rgba(201,168,76,.35);border-radius:0 8px 8px 0;font-size:.85rem;color:#444;margin:16px 0}
.partner-mention a{color:var(--blau);font-weight:600;text-decoration:underline;text-decoration-color:rgba(201,168,76,.4);text-underline-offset:3px}
.partner-mention a:hover{color:var(--gold)}
.partner-mention-icon{font-size:1rem;flex-shrink:0}

/* ── Drapeaux supplémentaires WM 2026 Spielplan ──────────── */
.flag-za{background-image:url('https://flagcdn.com/w40/za.png')}
.flag-gb-sct{background-image:url('https://flagcdn.com/w40/gb-sct.png')}
.flag-ht{background-image:url('https://flagcdn.com/w40/ht.png')}
.flag-ci{background-image:url('https://flagcdn.com/w40/ci.png')}
.flag-cw{background-image:url('https://flagcdn.com/w40/cw.png')}
.flag-tn{background-image:url('https://flagcdn.com/w40/tn.png')}
.flag-eg{background-image:url('https://flagcdn.com/w40/eg.png')}
.flag-nz{background-image:url('https://flagcdn.com/w40/nz.png')}
.flag-cv{background-image:url('https://flagcdn.com/w40/cv.png')}
.flag-no{background-image:url('https://flagcdn.com/w40/no.png')}
.flag-at{background-image:url('https://flagcdn.com/w40/at.png')}
.flag-jo{background-image:url('https://flagcdn.com/w40/jo.png')}
.flag-uz{background-image:url('https://flagcdn.com/w40/uz.png')}
.flag-qa{background-image:url('https://flagcdn.com/w40/qa.png')}
.flag-py{background-image:url('https://flagcdn.com/w40/py.png')}
.flag-playoff{background:#c0c8d4;background-image:none}