:root{
  --ink:#0f172a;
  --card:#fff;
  --accent:#2e6bff;
  --shadow:0 18px 36px rgba(15,23,42,.14);
  --stroke:#e3e9f8;
  --muted:#6b7280;
  --bg-a:#f7f9ff;
  --bg-b:#eef3ff;
  --soft:#fafcff;
}

/* ===== Base ===== */
*{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0;
  background:linear-gradient(180deg,#e8edf8,#f5f7fc);
  font:15px/1.5 "Inter",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color:var(--ink);
  -webkit-text-size-adjust:100%;
}
.wrap{max-width:1280px;margin:0 auto;padding:22px}

/* ===== Header ===== */
.page-head{margin-bottom:12px}

/* Zurück-Link */
.back-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  font-size:15px;
  color:#0f172a;
  text-decoration:none;
  margin-bottom:12px;
  transition:opacity .2s ease;
}
.back-link:hover{opacity:.7}
.back-link svg{width:20px;height:20px;stroke:#0f172a;flex-shrink:0}

/* Titel */
.section-title{
  font-size:clamp(24px,5vw,30px);
  font-weight:900;
  color:#0f172a;
  text-align:center;
  line-height:1.25;
  margin:20px 0 26px;
  letter-spacing:.3px;
}

/* ===== Grid (Desktop) / Slider (Mobile) ===== */
.grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  align-items:start;
}
@media (max-width:1080px){
  .grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  .grid{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    gap:14px;
    padding-bottom:6px;
  }
  .grid::-webkit-scrollbar{display:none}
  .card{
    flex:0 0 86%;
    scroll-snap-align:center;
    align-self:flex-start;
  }
}

/* ===== Card ===== */
.card{
  background:var(--card);
  border:1px solid var(--stroke);
  box-shadow:var(--shadow);
  border-radius:18px;
  padding:14px 14px 10px;
  display:flex;
  flex-direction:column;
  gap:12px;
  transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover{transform:translateY(-2px);box-shadow:0 16px 28px rgba(15,23,42,.22)}

/* Card Header */
.card-head{
  display:flex;justify-content:space-between;align-items:center;padding:2px 2px 6px
}
.card-title{
  margin:0;font-size:16px;font-weight:700;display:flex;align-items:center;gap:8px
}
.card-title svg{width:18px;height:18px;display:block;flex-shrink:0}
.badge{
  font-size:12px;color:#334155;background:#f1f5ff;border:1px solid #e4e9ff;border-radius:999px;padding:6px 10px;font-weight:700
}

/* ===== Picks ===== */
.list{display:flex;flex-direction:column;gap:10px}
.pick{
  border:1px solid var(--stroke);border-radius:12px;background:#fff;padding:10px 12px
}
.pick.lite{background:var(--soft);border-color:#eef2ff}

.pick-info{display:flex;flex-direction:column;gap:2px;line-height:1.3}

/* Icons (PNG) */
.ico-img{display:inline-block;vertical-align:middle;width:20px;height:20px;line-height:1}
.cup-ico{margin-left:-2px}         /* Pokal minimal weiter links für bessere Flucht */

/* Tipp/Teams/Datum – einheitliche Ausrichtung */
.tip-line,.teams-line,.date-line{display:flex;align-items:center;gap:6px}
.tip-line{font-size:12px;color:#0f172a;font-weight:600}
.tip-line strong{font-weight:800}
.teams-line{font-size:12px;color:#6b7280;font-weight:600;line-height:1.2}

/* Datum kleiner & dezenter */
.date-line{line-height:1.2}
.date-text{font-size:.85rem;color:var(--muted);font-weight:600}

/* ===== Footer (Button links, Quote links mit Label) ===== */
.card-foot{
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:14px;margin-top:10px
}

/* PRO CTA */
.pro-cta{
  width:100%;display:flex;align-items:center;justify-content:center;gap:10px;padding:10px 14px;
  background:#000;color:#fff;border:none;border-radius:12px;box-shadow:0 6px 14px rgba(0,0,0,.25);
  text-decoration:none;cursor:pointer;transition:transform .15s ease, box-shadow .15s ease
}
.pro-cta:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(0,0,0,.28)}
.pro-cta:active{transform:translateY(1px)}
.pro-ico{display:grid;place-items:center;flex-shrink:0;color:#fff}
.pro-ico svg{width:18px;height:18px;stroke:#fff;display:block}
.pro-text{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;line-height:1.15}
.pro-text strong{font-weight:800;font-size:15px;letter-spacing:.2px}
.pro-text em{margin-top:2px;font-style:normal;opacity:.7;font-size:12.5px;font-weight:500}
@media (max-width:400px){
  .pro-cta{padding:9px 12px;border-radius:10px}
  .pro-text strong{font-size:14.5px}
  .pro-text em{font-size:12px}
  .pro-ico svg{width:17px;height:17px}
}

/* Gesamtquote linksbündig + Label */
.tot-wrap{display:flex;align-items:center;gap:6px;justify-content:flex-start;white-space:nowrap;line-height:1}
.tot-ico{color:#64748b;width:18px;height:18px;flex-shrink:0;position:relative;top:.5px}
.tot-label{font-weight:600;font-size:.9rem;color:#223048}
.tot{color:var(--ink);font-size:1rem;font-weight:800;line-height:1;text-align:left}

/* Mobile: einspaltig, Reihenfolge beibehalten */
@media (max-width:720px){
  .card-foot{grid-template-columns:1fr;row-gap:10px}
  .tot-wrap{order:1;justify-content:flex-start}
  .pro-cta{order:2;width:100%}
}

/* ===== Debug ===== */
.debug{
  max-width:1280px;margin:16px auto;background:#fff;border:1px solid #eee;padding:10px;border-radius:8px
}

/* ===== Masking (FREE) / PRO-Unlock ===== */
body.is-pro .obscure{filter:none!important;opacity:1!important}
body.is-pro .pro-cta{display:none!important}

/* ===== Auswahl-Pills ===== */
.pillbar{
  display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap;margin:-6px 0 16px
}
.pill{
  appearance:none;border:1px solid var(--stroke);
  background:linear-gradient(180deg,var(--bg-a),var(--bg-b));
  color:#223048;font-weight:800;font-size:14px;padding:8px 14px;border-radius:999px;cursor:pointer;
  box-shadow:0 6px 18px rgba(46,107,255,.08);
  transition:transform .12s ease, box-shadow .12s ease, background .2s ease;
  display:flex;align-items:center;gap:6px
}
.pill:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(46,107,255,.12)}
.pill:active{transform:translateY(0)}
.pill.act{
  background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 10px 24px rgba(46,107,255,.25)
}
.pill svg{width:18px;height:18px;flex-shrink:0}
@media (max-width:420px){
  .pillbar{overflow-x:auto;padding:0 6px}
  .pillbar::-webkit-scrollbar{display:none}
}

/* ===== Blur (für FREE) ===== */
.blurred{position:relative;filter:blur(3px);-webkit-filter:blur(3px);opacity:.65;pointer-events:none;user-select:none}
.blurred::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.25);border-radius:6px}
.obscure{display:inline-block;filter:blur(3px);-webkit-filter:blur(3px);opacity:.65;pointer-events:none;user-select:none}
.card-foot {
  display: flex;
  flex-direction: column;   /* alles untereinander */
  align-items: stretch;     /* volle Breite */
  gap: 10px;
  margin-top: 12px;
}

.tot-wrap {
  display: flex;
  justify-content: space-between; /* Text links, Zahl rechts */
  align-items: center;
  font-weight: 700;
}

.tot-label {
  color: var(--ink);
  font-size: 0.9rem;
}

.tot {
  color: var(--ink);
  font-size: 1rem;
  font-weight: 800;
}

.cta-wrap {
  width: 100%;
}
.date-line .date-text {
  font-size: 10px;       /* nur der Text kleiner */
  font-weight: 500;      /* optional: etwas feiner */
  line-height: 1.2;      /* kompaktes Schriftbild */
}
@media (min-width: 1024px) {
  .pill { pointer-events: none; }
  .pill.act { /* keine besondere Hervorhebung am Desktop */
    filter: none;
    opacity: 1;
  }
  .pill:hover { /* Hover deaktivieren */
    background: inherit !important;
  }
}
/* Horizontales Snappen der Cards */
.grid {
  scroll-snap-type: x mandatory;
}
.grid > .card {
  scroll-snap-align: start;
  scroll-snap-stop: always; /* Browser die es können, bremsen am Snap-Punkt */
}

/* ===== Spacing für Kopfbereich der Kombiwetten-Seite ===== */
.page-head {
  margin-top: 50px;      /* Abstand oben zur Seite */
  margin-bottom: 36px;   /* Abstand unten zu den Cards */
}

.page-head .section-title {
  margin-top: 12px;      /* Abstand über dem Titel */
  margin-bottom: 30px;   /* Abstand zwischen Titel und Pills */
}

.pillbar {
  margin-bottom: 50px;   /* Abstand unterhalb der Pills */
}