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

*{box-sizing:border-box}
[hidden]{display:none!important}

body{
  margin:0;
  min-height:100vh;
  background:linear-gradient(180deg,#eef3ff 0%, #f7f9ff 40%, #f9fbff 100%);
  font:15px/1.5 'Inter',system-ui;
  color:var(--ink);
  background-attachment:fixed;
}

.wrap{max-width:820px;margin:0 auto;padding:18px}

/* Zurück-Link */
.back-link{
  display:inline-flex;align-items:center;gap:8px;
  color:#223048;text-decoration:none;font-weight:800;
  margin:4px 0 10px;
}
.back-link svg{width:20px;height:20px;stroke:currentColor}

/* Titel */
.section-title{
  text-align:center;
  font-weight:900;
  color:#0f172a;
  letter-spacing:.2px;
  line-height:1.25;
  margin:26px 0 28px;           /* vorher: 10px 0 16px – Titel etwas tiefer + mehr Abstand nach unten */
  font-size:clamp(22px,5vw,28px);
}

.finder{
  display:grid;place-items:center;
  margin:0 0 16px;              /* vorher: 10px 0 16px – Margin-top auf 0, damit nur der größere Titelabstand wirkt */
}
.finder-input{
  width:min(420px,85vw);  /* vorher 560px */
  padding:12px 14px;
  border-radius:12px;
  border:1px solid #dbe3ff;
  background:#fff;
  font-weight:700;
  font-size:15px;
  outline:none;
  box-shadow:0 6px 18px rgba(46,107,255,.06);
  transition:box-shadow .2s ease;
}
.finder-input:focus{
  box-shadow:0 8px 22px rgba(46,107,255,.12);
}
.finder-input::placeholder{color:#94a3b8;font-weight:600}

/* Hinweistext */
.empty-hint{
  text-align:center;
  color:#64748b;
  font-weight:700;
  margin:6px 0 10px;
}

/* Cards – zunächst ausgeblendet */
.card{
  background:var(--card);
  border-radius:14px;
  box-shadow:var(--shadow);
  padding:16px;
  margin:18px 0 40px;
  position:relative;
  transition:opacity .15s ease, transform .15s ease;
}
.card-hidden{display:none}

.head{
  display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
  border-bottom:none;padding-bottom:12px;
}
.teams{display:flex;flex-direction:column;gap:10px}
.line{display:flex;align-items:center;gap:12px}

/* Logos minimal & ohne Hintergrund */
.logo{width:36px;height:36px;border-radius:0;background:transparent;border:none;display:grid;place-items:center;overflow:hidden}
.logo img{width:32px;height:32px;object-fit:contain}

/* Teamnamen gleich gewichtet */
.line strong,.line span{font-weight:600;color:#0d1628}

.meta{text-align:right}
.league{font-weight:700;color:#111827;font-size:12px;margin-bottom:6px}
.time{font-weight:700;color:var(--muted);font-size:12px}

/* Meters/Correct Score wie gewohnt (Basics) */
.comp{display:grid;gap:18px}
.mblock{display:grid;gap:8px}
.mttl{font-weight:800;color:#64748b;letter-spacing:.04em;text-align:center}
.meter{height:40px;border-radius:14px;overflow:hidden;display:flex;background:#e9ecfb;border:1px solid #dde3fb}
.seg{display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff}
.seg.s1{background:#7b61ff}.seg.s2{background:#1f2937}.seg.s3{background:#9aa3b2}
.mrow{display:flex;gap:0;margin-top:4px;font-size:12px;color:#64748b;font-weight:700}
.mrow span{flex:1;text-align:center}
.msep{height:1px;border-bottom:1px dashed #e5e9f6;margin:4px 0 0}

.cs{display:grid;gap:12px}
.cs .mttl{text-align:center}
.cs-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.cs-pill{background:#fff;border:1px solid #e6eaf5;border-radius:12px;padding:10px 8px 12px;text-align:center;box-shadow:0 4px 16px rgba(2,6,23,.06)}
.cs-meter{height:6px;border-radius:999px;background:#eef1fb;border:1px solid #e6eaf5;overflow:hidden;margin-bottom:8px}
.cs-meter>span{display:block;height:100%;background:linear-gradient(90deg,#7b61ff,#4f74ff);opacity:.38}
.cs-pct{font-weight:900;font-size:clamp(13px,3.2vw,16px);line-height:1.1;color:#111827}
.cs-score{margin-top:4px;font-weight:800;font-size:clamp(11px,2.6vw,13px);color:#64748b;letter-spacing:.02em}
@media (max-width:380px){.cs-row{gap:8px}.cs-pill{padding:8px 6px 10px;border-radius:10px}.cs-meter{height:5px;margin-bottom:6px}}

/* VIRA Tipp */
.vira-row{
  display:flex;justify-content:space-between;align-items:center;
  border-top:1px solid #e7ebf4;padding-top:12px;margin:6px 0 16px;
  color:#111827;font-weight:800;
}
.vira-left{display:flex;align-items:center;gap:6px;white-space:nowrap;font-weight:900}
.vira-right{display:flex;align-items:center;gap:6px;justify-content:flex-end}
.vira-label{font-weight:800}.vira-value{font-weight:900}.vira-quote{font-weight:900;opacity:.9}

/* kleiner grüner Haken */
.vira-ok{width:14px;height:14px;display:inline-grid;place-items:center}
.vira-ok svg{width:14px;height:14px;display:block}
.vira-ok circle{fill:#22c55e}
.vira-ok path{fill:none;stroke:#fff;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round}

/* Blur für Tipp-Wert */
.blurred{color:#111827;position:relative;filter:blur(2px);-webkit-filter:blur(4px);opacity:.5;pointer-events:none}
.blurred::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.4);border-radius:4px}

/* PRO-CTA + Linie */
.pro-cta{
  width:100%;display:flex;align-items:center;justify-content:center;gap:10px;
  margin:0 0 10px;padding:10px 14px;background:#000;color:#fff;border:none;border-radius:12px;
  box-shadow:0 6px 14px rgba(0,0,0,.25);cursor:pointer;text-align:left;
  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-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}
}
.pro-sep{width:100%;border-bottom:1px dashed #d8dce7;margin:10px 0 12px;opacity:.8}

/* „Prognose ansehen“ */
.open-prog{
  display:flex;align-items:center;justify-content:space-between;
  font-weight:800;font-size:15px;color:#0f172a;margin-top:6px;cursor:pointer;transition:opacity .2s ease;
}
.open-prog:hover{opacity:.85}
.open-left{display:flex;align-items:center;gap:10px}
.free-badge{background:#13c24a;color:#fff;font-size:12px;font-weight:800;padding:3px 8px 4px;border-radius:8px;letter-spacing:.3px;line-height:1}
.open-prog svg{width:18px;height:18px;stroke-width:2.2;stroke:#0f172a;flex-shrink:0}

/* Popup (wie gewohnt) */
.popup-overlay{position:fixed;inset:0;background:rgba(15,23,42,.45);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:grid;place-items:center;z-index:100;animation:fadeIn .2s ease}
@keyframes fadeIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
.popup-box{background:var(--card);border-radius:18px;padding:20px;width:min(640px,92vw);max-height:85vh;overflow:auto;box-shadow:0 22px 40px rgba(2,6,23,.25);position:relative;border:1px solid var(--stroke)}
.popup-close{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:10px;border:1px solid var(--stroke);background:#fff;font-weight:700;color:#111827;cursor:pointer}
.popup-body{margin-top:30px}

/* Wrapper */
.finder{ display:flex; justify-content:center; margin:0 0 18px; }

/* Box mit Icon + Button */
.finder-box{
  position:relative;
  width:min(520px, 90vw);
}

/* Input */
.finder-input{
  width:100%;
  padding:14px 112px 14px 44px;          /* Platz für Icon + Button */
  border-radius:14px;
  border:1px solid #dbe3ff;
  background:#fff;
  font-weight:700;
  font-size:15px;
  outline:none;
  box-shadow:0 10px 24px rgba(46,107,255,.08);
  transition:box-shadow .2s ease, border-color .2s ease;
}
.finder-input::placeholder{ color:#9aa3b2; font-weight:600; }
.finder-input:focus{
  border-color:#b9c8ff;
  box-shadow:0 14px 30px rgba(46,107,255,.14);
}

/* Lupe links im Feld */
.finder-box::before{
  content:"";
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  width:20px; height:20px; opacity:.7;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M20 20l-4-4"/></svg>') no-repeat center/contain;
  background:#6b7280;
}

/* Button rechts im Feld (optional) */
.finder-btn{
  position:absolute; right:6px; top:6px;
  height:40px; padding:0 14px;
  display:inline-flex; align-items:center; gap:8px;
  border:none; border-radius:12px;
  background:linear-gradient(180deg, #3f6cff, #2e5af9);
  color:#fff; font-weight:800; letter-spacing:.2px;
  box-shadow:0 8px 18px rgba(46,107,255,.25);
  cursor:pointer;
  transition:transform .12s ease, box-shadow .2s ease, opacity .2s ease;
}
.finder-btn:hover{ transform:translateY(-1px); box-shadow:0 10px 22px rgba(46,107,255,.30); }
.finder-btn:active{ transform:translateY(0); box-shadow:0 6px 14px rgba(46,107,255,.22); }
.finder-btn svg{
  width:18px; height:18px; stroke:#fff; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;
}

/* Kompakter auf sehr schmalen Screens: Button wird Icon-only */
@media (max-width:380px){
  .finder-input{ padding-right:54px; }
  .finder-btn{ width:40px; padding:0; justify-content:center; }
  .finder-btn span{ display:none; }
}