/* =====================================================================
   Bestenlisten – Design für ALLE Bestenlisten-Seiten (Markup: toplist-template.html)
   Baut auf styles.css der Hauptseite auf (Variablen, Hero, Navigation, Spot-Kacheln, Footer).
   ===================================================================== */

.tl-page{background:#fff;--tl-max:1320px}
.tl-page a{color:inherit}
/* Popup (deal-popup.js): Links im Modal behalten die Button-Farbe der Hauptseite, sonst erbt der Button die Textfarbe. */
.tl-page #modalRoot a.primary-btn{color:#fff}
.tl-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.tl-wrap{width:100%;max-width:var(--tl-max);margin:0 auto;padding:0 28px}

/* ---------- Hero & Navigation (hell, wie die Hauptseite; Farben kommen aus styles.css) ---------- */
.tl-hero{min-height:0}
.tl-nav-links{align-items:center}
.tl-page .nav-links a:not(.language-switch){color:#e7ddff}
.tl-page .nav-links a:not(.language-switch):hover{color:#fff}
.tl-page .tl-nav-links a.tl-nav-current{color:#fff;font-weight:700}
.tl-hero-inner{position:relative;z-index:2;max-width:var(--tl-max);margin:0 auto;padding:26px 28px 78px;text-align:center}
.tl-crumbs{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 10px;font-size:13px;color:#d2c8e9}
.tl-crumbs a{color:#d8bdff;text-decoration:none}
.tl-crumbs a:hover{text-decoration:underline}
.tl-crumbs [aria-current]{color:#fff}
.tl-hero .tl-eyebrow{color:#d6c8ff}
.tl-eyebrow{margin-top:22px;color:var(--purple);font-size:12px;font-weight:700;letter-spacing:1.7px;text-transform:uppercase}
.tl-hero h1{margin:10px auto 14px;max-width:880px;font:700 clamp(30px,4.3vw,48px)/1.04 'Space Grotesk',sans-serif;letter-spacing:-3px}
.tl-hero h1 em{font-style:normal;color:#d8bdff;background:linear-gradient(transparent 84%,#ffd46a 84%,#ffd46a 95%,transparent 95%);white-space:nowrap}
.tl-hero .tl-lead{color:#d2c8e9}
.tl-lead{max-width:720px;margin:0 auto;color:#5d5775;font-size:17px;line-height:1.55}
.tl-notes{max-width:720px;margin:16px auto 0}
.tl-note{margin:8px 0 0;padding:9px 16px;border:1px solid #e6def7;border-radius:12px;background:rgba(255,255,255,.72);color:#5d5775;font-size:13px;line-height:1.5}
.tl-hero .tl-note{border-color:rgba(255,255,255,.24);background:rgba(255,255,255,.1);color:#e7ddff}
.tl-hero .tl-note strong{color:#fff}
.tl-note strong{color:#3d3556}

/* ---------- Podium (Platz 1-3) ---------- */
.tl-podium-section{background:#f7f5fc;padding-bottom:30px}
.tl-podium-section .tl-wrap{position:relative;z-index:3;margin-top:-34px}
.tl-podium{display:grid;grid-template-columns:minmax(0,1fr);gap:34px;padding-top:18px}
.tl-card{position:relative;display:flex;flex-direction:column;min-width:0;padding:34px 24px 24px;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:0 8px 24px rgba(43,24,91,.07)}
.tl-card--winner{padding-top:30px;border:2px solid var(--purple);box-shadow:0 18px 40px rgba(109,66,232,.22)}
.tl-medal{position:absolute;top:-18px;left:24px;display:grid;place-items:center;width:44px;height:44px;border-radius:14px;color:#fff;font:700 22px 'Space Grotesk',sans-serif;box-shadow:0 6px 14px rgba(43,24,91,.25)}
.tl-medal--1{background:linear-gradient(135deg,#f0b429,#d9961a)}
.tl-medal--2{background:linear-gradient(135deg,#9aa3b2,#7b8494)}
.tl-medal--3{background:linear-gradient(135deg,#d08a52,#b06a35)}
.tl-winner{align-self:flex-end;margin:-6px 0 0;padding:5px 12px;border-radius:999px;background:#ffd46a;color:#24133f;font-size:12px;font-weight:700}
.tl-card-head{display:flex;gap:14px;align-items:center;margin-top:8px}
.tl-card--rank2 .tl-card-head,.tl-card--rank3 .tl-card-head{margin-top:0}
.tl-logo{flex:0 0 64px;width:64px;height:64px;border-radius:14px;display:grid;place-items:center;overflow:hidden}
.tl-logo img{max-width:100%;max-height:100%;object-fit:contain}
.tl-logo--letter{background:#f5f2fc;color:#8d75d4;font:700 26px 'Space Grotesk',sans-serif}
.tl-card-title{min-width:0}
.tl-card-title h2{margin:0;font:700 24px/1.1 'Space Grotesk',sans-serif;letter-spacing:-.8px;overflow-wrap:anywhere}
.tl-card-title p{margin:4px 0 0;font-size:13px;color:var(--muted)}
.tl-badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:16px}
.tl-badge{display:inline-block;padding:5px 11px;border-radius:999px;font-size:12px;font-weight:700;line-height:1.2}
.tl-badge--good{background:#e3f6ec;color:#0f6b48}
.tl-badge--warn{background:#fff0e2;color:#9a4a0a}
.tl-badge--info{background:#eee9ff;color:#52309f}
.tl-shot{margin:16px 0 0}
.tl-shot img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:0;background:#f5f2fc;box-shadow:0 4px 14px rgba(43,24,91,.08)}
.tl-free-note{margin:12px 0 0;font-size:14px;line-height:1.55;color:#4f4961}
.tl-text{margin:12px 0 0;font-size:14px;line-height:1.6;color:#3a334b}
.tl-points{margin:16px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px}
.tl-point{display:flex;gap:9px;font-size:14px;line-height:1.4}
.tl-point svg{flex:0 0 17px;margin-top:1px}
.tl-point--pro svg{color:#16845a}
.tl-point--con{color:#5a3a33}
.tl-point--con svg{color:#b3402f}
.tl-facts{display:flex;flex-wrap:wrap;gap:6px 22px;margin:16px 0 0;font-size:13px;color:var(--muted)}
.tl-fact{display:flex;gap:6px}
.tl-fact dt{margin:0}
.tl-fact dt:after{content:':'}
.tl-fact dd{margin:0;color:var(--ink);font-weight:700}
.tl-card-actions{margin-top:auto;padding-top:20px;display:flex;flex-direction:column;gap:8px}

.tl-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 18px;border-radius:9px;font:700 14px 'DM Sans',sans-serif;text-decoration:none;text-align:center;transition:transform .2s ease,box-shadow .2s ease}
.tl-btn:hover{transform:translateY(-2px);text-decoration:none}
.tl-page a.tl-btn--primary{color:#fff;background:var(--purple);box-shadow:0 8px 18px #6334c540}
.tl-page a.tl-btn--gold{color:#fff;background:var(--purple);padding:13px 20px;font-size:15px;box-shadow:0 10px 22px rgba(109,66,232,.25)}

/* ---------- Plätze ab 4 ---------- */
.tl-rest-section{background:#f7f5fc;padding:0 0 44px}
.tl-rest{display:flex;flex-direction:column;gap:14px;padding-top:30px}
.tl-podium-section + .tl-rest-section .tl-rest{padding-top:0}
.tl-row{display:flex;flex-wrap:wrap;gap:22px;align-items:flex-start;padding:24px 28px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 6px 18px rgba(43,24,91,.05)}
.tl-row-rank{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border-radius:14px;color:var(--purple);background:#eee9ff;font:700 22px 'Space Grotesk',sans-serif}
.tl-row-main{flex:1 1 300px;min-width:0}
.tl-row-main .tl-card-head{margin-top:0}
.tl-row-points{flex:1 1 300px;min-width:0;margin:2px 0 0}
.tl-row-points .tl-points{margin-top:0}
.tl-row-points .tl-shot{margin-top:0}
.tl-row-points .tl-shot + .tl-points{margin-top:16px}
.tl-row-actions{flex:0 0 190px}
.tl-row-actions .tl-btn{width:100%}

/* ---------- Spotlight-Wall (verkleinert, nicht klickbar) ---------- */
.tl-wall-section{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tl-wall-section .tl-wrap{padding-top:46px;padding-bottom:50px}
.tl-wall-section--empty .tl-wrap{padding-top:38px;padding-bottom:40px}
.tl-wall-head{text-align:center}
.tl-wall-head .tl-eyebrow{margin-top:0;color:#8d75d4}
.tl-wall-head h2{margin:8px 0 6px;font:700 32px 'Space Grotesk',sans-serif;letter-spacing:-1.2px}
.tl-wall-head p{margin:0 auto;max-width:560px;color:var(--muted);font-size:15px;line-height:1.55}
.tl-wall-grid{gap:6px;margin-top:26px}
@media(min-width:801px){.tl-wall-grid{gap:15px}}
.tl-wall-grid .tl-tile{cursor:pointer}
.tl-wall-cta{margin:26px 0 0;text-align:center}

/* ---------- Glossar & weitere Listen ---------- */
.tl-glossary-section{background:#fff;padding:56px 0 56px}
.tl-glossary-section + .tl-others-section{padding-top:0}
.tl-glossary-section h2,.tl-others-section h2{margin:0 0 6px;font:700 28px 'Space Grotesk',sans-serif;letter-spacing:-1px}
.tl-section-lead{margin:0 0 22px;max-width:680px;color:var(--muted);font-size:15px;line-height:1.55}
.tl-glossary{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.tl-glossary-item{padding:18px;border:1px solid #e6def7;border-radius:14px;background:linear-gradient(135deg,#fff,#f4f0ff)}
.tl-glossary-item p{margin:10px 0 0;font-size:14px;line-height:1.55;color:#4f4961}
.tl-others-section{background:#fff;padding:46px 0 56px}
.tl-others,.tl-overview-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.tl-others-all{margin:18px 0 0;font-weight:700}
.tl-others-all a{color:var(--purple);text-decoration:none}
.tl-others-all a:hover{text-decoration:underline}
.tl-overview-section{background:#f7f5fc;padding:30px 0 60px}
.tl-overview-card{display:flex;flex-direction:column;gap:8px;padding:22px;background:#fff;border:1px solid #e6def7;border-radius:16px;text-decoration:none;color:var(--ink);box-shadow:0 6px 18px rgba(43,24,91,.05);transition:transform .2s ease,box-shadow .2s ease}
.tl-overview-card:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(43,24,91,.12)}
.tl-overview-kicker{color:#8d75d4;font-size:11px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase}
.tl-overview-title{font:700 19px/1.2 'Space Grotesk',sans-serif;letter-spacing:-.4px}
.tl-overview-teaser{color:var(--muted);font-size:14px;line-height:1.5}
.tl-overview-more{margin-top:auto;padding-top:6px;color:var(--purple);font-size:14px;font-weight:700}

/* ---------- Breite Bildschirme: Podium 2 - 1 - 3 ---------- */
@media(min-width:1000px){
  .tl-podium{grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:18px}
  .tl-podium > :nth-child(1){order:2}
  .tl-podium > :nth-child(2){order:1}
  .tl-podium > :nth-child(3){order:3}}

/* ---------- Tablet / Handy ---------- */
@media(max-width:800px){
  .tl-nav-links{display:flex!important;gap:14px}
  .tl-nav-extra{display:none}
  .tl-hero-inner{padding:20px 18px 64px}
  .tl-lead{font-size:15px}
  .tl-wall-head h2{font-size:26px}}
@media(max-width:700px){
  .tl-row{padding:20px 18px;gap:16px}
  .tl-row-actions{flex:1 1 100%}}
@media(max-width:600px){
  .tl-wrap{padding:0 14px}
  .tl-hero h1{font-size:32px;letter-spacing:-2px}
  .tl-hero h1 em{white-space:normal}
  .tl-card{padding:32px 18px 20px}
  .tl-glossary-section h2,.tl-others-section h2{font-size:24px}}

/* ---------- Spotlight-Liste: gleiche Karten wie auf der Hauptseite (Design A, Stil aus styles.css) ---------- */
.tl-page .tl-wall-grid{margin-top:26px;margin-bottom:0}
.tl-page .tl-wall-grid > .spot.occupied:is(.spot) .spot-title{margin-bottom:clamp(8px,5cqw,12px)}
@media(max-width:600px){
  .tl-page .tl-wall-grid{grid-template-columns:minmax(0,1fr)!important;max-width:none!important;row-gap:6px}}

/* ---------- Schwebende Deal-Card (unten rechts, Rotation per app.js) ---------- */
.deal-floater{position:fixed;right:22px;bottom:22px;z-index:1040;width:min(300px,calc(100vw - 32px));box-sizing:border-box;background:#fff;border:1px solid #e1d9f5;border-radius:18px;box-shadow:0 20px 50px rgba(43,24,91,.28);overflow:hidden;animation:dealFloaterIn .32s cubic-bezier(.2,.8,.2,1)}
.deal-floater[hidden]{display:none}
.deal-floater-inner{transition:opacity .18s ease}
.deal-floater.is-changing .deal-floater-inner{opacity:0}
.deal-floater-close{position:absolute;z-index:3;top:8px;right:8px;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.88);color:#4f4961;font-size:20px;line-height:1;box-shadow:0 2px 8px rgba(43,24,91,.14)}
.deal-floater-close:before{content:'';position:absolute;inset:-6px}
.deal-floater-close:hover{background:#fff;color:#19152d}
.deal-floater-open{display:block;width:100%;padding:0;border:0;background:transparent;color:#19152d;font:inherit;text-align:left;cursor:pointer}
.deal-floater-visual{position:relative;display:grid;place-items:center;height:128px;background:#f5f2fc}
.deal-floater-visual img{position:absolute;inset:0;width:100%;height:100%;padding:10px;box-sizing:border-box;object-fit:contain}
.deal-floater-ph{font-size:34px;color:#b9a6f3}
.deal-floater-kicker{position:absolute;left:12px;top:12px;padding:5px 9px;border-radius:999px;background:#fff;color:#6d42e8;font:700 9px/1 'Space Grotesk',sans-serif;letter-spacing:.12em;text-transform:uppercase}
.deal-floater-badge{position:absolute;z-index:2;left:50%;bottom:-17px;transform:translateX(-50%);padding:8px 18px;border-radius:999px;color:#fff;font:700 14px/1 'Space Grotesk',sans-serif;white-space:nowrap;box-shadow:0 5px 14px rgba(43,24,91,.2)}
.deal-floater-badge.is-giveaway{background:#6d42e8}
.deal-floater-badge.is-discount{background:#ea6c0a}
.deal-floater-title{display:block;padding:30px 18px 0;color:#19152d;text-align:center;font:700 19px/1.1 'Space Grotesk',sans-serif;letter-spacing:-.6px;overflow-wrap:anywhere}
.deal-floater-provider{display:block;margin-top:5px;padding:0 18px;text-align:center;color:#6d6880;font-size:12px}
.deal-floater-cta{display:flex;align-items:center;justify-content:center;height:44px;margin:14px 18px 0;border-radius:11px;background:#6d42e8;color:#fff;font:700 14px 'Space Grotesk',sans-serif;box-shadow:0 10px 22px rgba(109,66,232,.22);transition:background .16s,transform .16s}
.deal-floater-open:hover .deal-floater-cta,.deal-floater-open:focus-visible .deal-floater-cta{background:#5a33cc;transform:translateY(-1px)}
.deal-floater-open:focus-visible,.deal-floater-close:focus-visible{outline:3px solid #b9a6f3;outline-offset:-3px}
.deal-floater-meta{padding:10px 18px 14px;text-align:center}
.deal-floater-expiry{display:block;color:#6d6880;font-size:11px}
.deal-floater-expiry strong{color:#19152d;font-variant-numeric:tabular-nums}
.deal-floater-dots{display:flex;justify-content:center;gap:5px;margin-top:10px}
.deal-floater-dots i{width:4px;height:4px;border-radius:2px;background:#d7cdf3;transition:width .2s,background .2s}
.deal-floater-dots i.is-on{width:16px;background:#6d42e8}
@keyframes dealFloaterIn{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
@media(max-width:600px){
  .deal-floater{right:10px;bottom:12px;width:150px;border-radius:14px}
  .deal-floater-visual{height:72px}
  .deal-floater-visual img{padding:6px}
  .deal-floater-kicker,.deal-floater-cta,.deal-floater-expiry,.deal-floater-dots{display:none}
  .deal-floater-badge{left:8px;bottom:6px;transform:none;padding:4px 8px;font-size:10px}
  .deal-floater-title{padding:8px 10px 0;text-align:left;font-size:13px}
  .deal-floater-provider{padding:0 10px;text-align:left;font-size:10px}
  .deal-floater-meta{padding:0 0 8px}}
@media(prefers-reduced-motion:reduce){.deal-floater{animation:none}.deal-floater-inner,.deal-floater-cta,.deal-floater-dots i{transition:none}}

/* Kopfzeile "● Bestenliste" entfällt: etwas Luft unter den Breadcrumbs, "Stand"-Hinweis dezent unter dem Einleitungstext */
.tl-hero .tl-crumbs + h1{margin-top:24px}
.tl-hero .tl-updated{margin:10px 0 0;color:#b9abdd;font-size:12.5px}
.tl-hero .tl-updated:empty{display:none}
/* Hinweis-Label (z. B. "Kostenlos heißt aber nicht überall dasselbe:") größer und leicht fett */
.tl-note strong{font-size:16px;font-weight:600;letter-spacing:-.1px}
.tl-hero .tl-note strong{font-size:16px;font-weight:600}