/* sportrechner.com — Embed-Stylesheet (Widget-Subset aus sr-theme.css).
   Same-Origin zum iframe geladen; deckt alle Rechner-Widgets ab. */

@font-face { font-family:'Archivo'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/archivo-v25-latin-regular.woff2') format('woff2'); }
@font-face { font-family:'Archivo'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/archivo-v25-latin-700.woff2') format('woff2'); }
@font-face { font-family:'Barlow Condensed'; font-style:normal; font-weight:800; font-display:swap; src:url('fonts/barlow-condensed-v13-latin-800.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/jetbrains-mono-400-latin.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/jetbrains-mono-v24-latin-700.woff2') format('woff2'); }

:root{ --bg:#0A0E14; --panel:#11161F; --panel2:#141A26; --line:#1B2230; --line2:#2A3344;
  --txt:#F2F5F9; --mut:#8B96A8; --dim:#7E8AA0; --lime:#C8FF2E; }
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{ background:var(--bg); color:var(--txt); font-family:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif; font-size:15px; line-height:1.5; }
.sr-embed{ max-width:560px; margin:0 auto; padding:6px; }

/* ---- Widget (aus sr-theme.css) ---- */
.sr-widget { background:var(--panel); border:1px solid var(--line2); border-radius:18px; overflow:hidden; }
.sr-widget-head { display:flex; align-items:center; gap:10px; padding:14px 22px;
  border-bottom:1px solid var(--line); background:var(--panel2);
  font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.2em; color:var(--dim); }
.sr-widget-head svg { width:14px; height:14px; color:var(--lime); }
.sr-widget-body { padding:26px 22px; display:flex; flex-direction:column; gap:20px; }
.sr-field label { display:block; font-size:11.5px; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--mut); margin-bottom:9px; }
.sr-field-hint { font-size:11.5px; color:var(--dim); margin-top:7px; }

.sr-stepper { display:flex; align-items:stretch; border:1px solid var(--line2); border-radius:12px;
  overflow:hidden; height:56px; background:var(--bg); }
.sr-stepper button { width:56px; border:none; background:var(--line); color:var(--txt);
  font-size:22px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .12s; font-family:inherit; }
.sr-stepper button:hover { background:var(--line2); }
.sr-stepper button:active { background:var(--lime); color:var(--bg); }
.sr-stepper button svg { width:18px; height:18px; }
.sr-stepper-val { flex:1; display:flex; align-items:baseline; justify-content:center; gap:7px; }
.sr-stepper-val input { width:84px; background:none; border:none; outline:none; color:var(--txt);
  font-family:'JetBrains Mono',monospace; font-size:22px; font-weight:700; text-align:center; align-self:center; }
.sr-stepper-val span { color:var(--dim); font-size:12px; font-weight:700; align-self:center; }

.sr-seg { display:flex; gap:6px; background:var(--bg); border:1px solid var(--line2); border-radius:12px; padding:5px; }
.sr-seg button { flex:1; min-height:46px; border:none; border-radius:8px; background:none;
  color:var(--mut); font-family:inherit; font-size:13.5px; font-weight:700; cursor:pointer; transition:all .12s; }
.sr-seg button:hover { color:var(--txt); }
.sr-seg button.on { background:var(--lime); color:var(--bg); }

.sr-choice { display:flex; flex-direction:column; gap:8px; }
.sr-choice button { display:flex; align-items:center; gap:12px; min-height:52px; padding:0 16px;
  border:1px solid var(--line2); border-radius:12px; background:var(--bg); color:var(--txt);
  font-family:inherit; cursor:pointer; text-align:left; transition:all .12s; }
.sr-choice button:hover { border-color:var(--dim); }
.sr-choice button.on { border-color:var(--lime); background:rgba(200,255,46,.05); }
.sr-choice b { font-size:14px; font-weight:700; }
.sr-choice .pal-desc { color:var(--dim); font-size:12px; min-width:0; }
.sr-choice .pal-val { margin-left:auto; font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--dim); }
.sr-choice .dot { width:18px; height:18px; border-radius:50%; border:2px solid var(--line2); flex:none; transition:all .12s; }
.sr-choice button.on .dot { border-color:var(--lime); background:var(--lime); box-shadow:inset 0 0 0 3.5px var(--panel); }

.sr-time { display:flex; align-items:center; gap:8px; }
.sr-time input { width:0; flex:1; height:56px; background:var(--bg); border:1px solid var(--line2);
  border-radius:12px; outline:none; color:var(--txt); font-family:'JetBrains Mono',monospace;
  font-size:20px; font-weight:700; text-align:center; }
.sr-time input:focus { border-color:var(--lime); }
.sr-time i { font-family:'JetBrains Mono',monospace; color:var(--dim); font-style:normal; font-size:18px; }

.sr-result { border-top:2px solid var(--lime); background:var(--panel2); padding:24px 22px; }
.sr-result-label { font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.2em; color:var(--dim); margin-bottom:8px; }
.sr-result-val { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.sr-result-val b { font-family:'Barlow Condensed',sans-serif; font-size:64px; font-weight:800; line-height:1; color:var(--lime); }
.sr-result-val span { font-size:15px; color:var(--mut); font-weight:700; }
.sr-result-note { margin-top:12px; font-size:13.5px; line-height:1.55; color:var(--mut); }
.sr-result-note b { color:var(--txt); }
.sr-result-cta { display:inline-flex; align-items:center; gap:8px; margin-top:14px; padding:10px 16px;
  border-radius:10px; border:1px solid var(--line2); background:var(--panel2);
  color:var(--txt); font-size:13px; font-weight:700; transition:border-color .15s,background .15s; }
.sr-result-cta:hover { border-color:var(--lime); background:rgba(200,255,46,.06); }
.sr-result-cta svg { width:16px; height:16px; color:var(--lime); }
.sr-result-row { display:flex; gap:12px; margin-top:16px; flex-wrap:wrap; }
.sr-result-mini { flex:1; min-width:120px; background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:12px 14px; }
.sr-result-mini span { font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.16em; color:var(--dim); display:block; margin-bottom:4px; }
.sr-result-mini b { font-family:'JetBrains Mono',monospace; font-size:17px; }

.sr-zones { width:100%; border-collapse:collapse; }
.sr-zones caption { caption-side:top; text-align:left; font-family:'JetBrains Mono',monospace;
  font-size:10.5px; letter-spacing:.2em; color:var(--dim); padding-bottom:10px; }
.sr-zones th { font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim);
  text-align:left; padding:8px 12px; border-bottom:1px solid var(--line2); font-weight:700; }
.sr-zones td { padding:12px; border-bottom:1px solid var(--line); font-size:14px; }
.sr-zones tr:last-child td { border-bottom:none; }
.sr-zones .z-chip { display:inline-flex; align-items:center; gap:8px; font-weight:800; font-size:13px; }
.sr-zones .z-chip i { width:12px; height:12px; border-radius:3px; font-style:normal; background:var(--zc); }
.sr-zones .z-bpm { font-family:'JetBrains Mono',monospace; font-weight:700; white-space:nowrap; }
.sr-zones .z-desc { color:var(--mut); font-size:12.5px; }
.sr-zones tr.z-fat td { background:rgba(77,227,255,.07); }
.sr-zones tr.z-fat td:first-child { box-shadow:inset 3px 0 0 var(--zc); }
.sr-zones .z-fat-badge { display:inline-block; margin-left:8px; padding:2px 7px; border-radius:999px;
  font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.12em; font-weight:700;
  color:#06121A; background:#4DE3FF; vertical-align:middle; }

/* ---- Embed-Rahmen: Fußzeile + Gate-Zustände ---- */
.sr-embed-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; padding:11px 4px 4px; font-size:11.5px; color:var(--dim); }
.sr-embed-foot b{ color:var(--mut); font-weight:700; }
.sr-embed-foot a{ color:var(--lime); text-decoration:none; font-weight:700; }
.sr-embed-foot a:hover{ text-decoration:underline; }
[hidden]{ display:none!important; }
.sr-gate{ display:flex; align-items:center; justify-content:center; gap:9px; min-height:130px; color:var(--dim); font-size:13px; }
.sr-gate-dot{ width:9px; height:9px; border-radius:50%; background:var(--lime); animation:srpulse 1s ease-in-out infinite; }
@keyframes srpulse{ 0%,100%{opacity:.25} 50%{opacity:1} }
.sr-gate-card{ background:var(--panel); border:1px solid var(--line2); border-radius:18px; padding:30px 26px; text-align:center; }
.sr-gate-card .ic{ width:42px; height:42px; margin:0 auto 14px; display:flex; align-items:center; justify-content:center; border-radius:12px; background:rgba(255,138,61,.12); }
.sr-gate-card .ic svg{ width:21px; height:21px; color:#FF8A3D; }
.sr-gate-card b{ display:block; font-size:16px; margin-bottom:8px; color:var(--txt); }
.sr-gate-card p{ margin:0 0 14px; font-size:13.5px; line-height:1.55; color:var(--mut); }
.sr-gate-card a{ color:var(--lime); text-decoration:none; font-weight:700; font-size:13px; }
.sr-gate-card a:hover{ text-decoration:underline; }

@media (max-width:480px){ .sr-result-val b{ font-size:48px; } .sr-result-row{ flex-direction:column; } }