:root{
  --bg:#050507;
  --panel:#0d0d12;
  --panel2:#15151c;
  --line:#353541;
  --text:#f7f7fb;
  --muted:#b8b8c6;
  --red:#ff3148;
  --magenta:#ff189d;
  --gold:#ffd35a;
  --blue:#64b9ff;
  --green:#9ee85a;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#020204;color:var(--text);font-family:Arial,Helvetica,sans-serif}
body{
  background:
    radial-gradient(circle at 50% 10%,rgba(255,24,157,.10),transparent 34%),
    linear-gradient(180deg,#08080d 0%,#020203 100%);
}
button,input{font:inherit}
button{cursor:pointer}
.arena-shell{min-height:100vh;display:flex;flex-direction:column}
.arena-header{
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:18px clamp(18px,4vw,54px);
  border-bottom:1px solid rgba(255,255,255,.10);
  background:rgba(3,3,6,.88);
}
.brand-main{font-size:clamp(1.55rem,3vw,2.55rem);font-weight:950;letter-spacing:.06em}
.brand-sub{color:var(--red);font-weight:900;letter-spacing:.28em;font-size:.78rem;margin-top:2px}
.prototype-label{
  color:#e9b5d5;border:1px solid rgba(255,24,157,.35);border-radius:999px;
  padding:8px 12px;font-size:.72rem;font-weight:900;letter-spacing:.1em;white-space:nowrap
}
.quickstart{width:min(1180px,100%);margin:0 auto;padding:24px clamp(14px,3vw,30px) 26px;flex:1}
.intro{text-align:center;margin-bottom:16px}
.eyebrow{color:var(--magenta);font-weight:950;letter-spacing:.18em;font-size:.72rem}
.intro h1{font-size:clamp(1.75rem,4vw,3rem);margin:6px 0 5px}
.intro p{margin:0;color:var(--muted);font-size:clamp(.92rem,1.5vw,1.05rem)}
.card-stage{position:relative}
.guide-card{
  display:none;position:relative;min-height:500px;
  grid-template-columns:minmax(260px,.9fr) minmax(320px,1.1fr);
  gap:clamp(24px,5vw,70px);align-items:center;
  padding:clamp(24px,4vw,48px);
  border:1px solid rgba(255,255,255,.14);
  border-radius:24px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.035),transparent 34%),
    radial-gradient(circle at 80% 50%,rgba(255,24,157,.09),transparent 34%),
    #0a0a0f;
  box-shadow:0 24px 70px rgba(0,0,0,.45),inset 0 0 70px rgba(255,255,255,.018);
  overflow:hidden;
}
.guide-card.active{display:grid;animation:cardIn .34s ease}
@keyframes cardIn{from{opacity:.35;transform:translateY(8px)}to{opacity:1;transform:none}}
.step-badge{
  position:absolute;top:18px;right:18px;width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;background:#181820;border:2px solid var(--magenta);
  box-shadow:0 0 22px rgba(255,24,157,.26);font-size:1.15rem;font-weight:950
}
.card-copy{position:relative;z-index:2}
.card-kicker{color:var(--magenta);font-weight:950;font-size:.78rem;letter-spacing:.16em;margin-bottom:10px}
.card-copy h2{font-size:clamp(2rem,4.5vw,4rem);line-height:.98;margin:0 0 18px;letter-spacing:-.04em}
.card-copy h2 span{color:var(--gold)}
.card-copy p{font-size:clamp(1.05rem,1.8vw,1.3rem);line-height:1.5;color:#e3e3eb;margin:0 0 16px}
.micro-copy{
  display:inline-block;padding:10px 13px;border-left:3px solid var(--magenta);
  background:rgba(255,24,157,.08);color:#f4ddea;font-size:.97rem
}
.visual{
  position:relative;min-height:350px;border-radius:22px;border:1px solid rgba(255,255,255,.11);
  background:radial-gradient(circle at center,rgba(255,24,157,.10),transparent 50%),#060609;
  overflow:hidden;display:flex;align-items:center;justify-content:center
}
.visual-caption{
  position:absolute;bottom:14px;left:50%;transform:translateX(-50%);white-space:nowrap;
  color:#d0d0da;font-size:.68rem;letter-spacing:.15em;font-weight:900
}

/* Waage */
.visual-scale{perspective:700px}
.scale-back{
  position:absolute;width:70%;height:54%;bottom:58px;background:linear-gradient(#19191f,#0b0b0e);
  border:1px solid #34343d;border-radius:26px 26px 16px 16px;transform:rotateX(58deg);
  box-shadow:0 28px 40px rgba(0,0,0,.55)
}
.scale-platform{
  position:absolute;width:64%;height:26%;bottom:105px;border-radius:50%;
  background:linear-gradient(180deg,#4e4e56,#17171d);border:1px solid #767680;
  box-shadow:inset 0 0 28px rgba(255,255,255,.12)
}
.scale-body{
  position:absolute;bottom:55px;width:65%;height:86px;border-radius:14px;background:#15151a;
  border:1px solid #4a4a54;display:flex;align-items:center;justify-content:center;gap:14px;padding:10px
}
.scale-display{
  background:#07100a;color:#ff3d5a;border:2px solid #34343b;border-radius:8px;
  font-family:"Courier New",monospace;font-weight:900;font-size:clamp(2.2rem,6vw,4.4rem);
  padding:2px 16px;text-shadow:0 0 14px rgba(255,49,72,.7);min-width:58%;text-align:center
}
.tara-button{
  border-radius:50%;width:58px;height:58px;display:grid;place-items:center;
  border:2px solid #8a8a95;color:#fff;font-size:.61rem;font-weight:900;
  background:#292932;box-shadow:0 0 18px rgba(255,255,255,.08)
}
.tara-button.dim{opacity:.45}
.glass{
  position:absolute;bottom:155px;width:90px;height:150px;z-index:4;
  border:5px solid rgba(240,245,255,.80);border-top:7px solid #fff;border-radius:7px 7px 23px 23px;
  background:linear-gradient(90deg,rgba(255,255,255,.09),transparent 50%,rgba(255,255,255,.10));
  overflow:hidden;box-shadow:0 0 18px rgba(255,255,255,.08)
}
.liquid{position:absolute;left:5px;right:5px;bottom:5px;height:72%;background:linear-gradient(#e89741,#9b4f18);border-radius:0 0 17px 17px}
.liquid.lower{height:50%}

/* Ziel */
.visual-target{flex-direction:column}
.target-glow{
  position:absolute;width:72%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(255,24,157,.34),rgba(255,24,157,.09) 36%,transparent 66%);
  animation:pulse 1.7s ease-in-out infinite
}
@keyframes pulse{50%{transform:scale(1.13);opacity:.68}}
.target-label{z-index:3;font-size:.82rem;letter-spacing:.22em;font-weight:950;color:#ffdce9}
.target-number{z-index:3;font-size:clamp(7rem,18vw,13rem);line-height:.82;font-weight:950;color:#ff294b;text-shadow:0 0 6px #fff,0 0 20px var(--magenta),0 0 55px rgba(255,24,157,.65)}
.target-unit{z-index:3;font-weight:950;font-size:2rem}
.ray{position:absolute;width:160%;height:3px;background:linear-gradient(90deg,transparent,var(--magenta),transparent);opacity:.35}
.ray-a{transform:rotate(24deg)}.ray-b{transform:rotate(-24deg)}

/* Trinken */
.visual-drink{background:radial-gradient(circle at 45% 48%,rgba(100,185,255,.12),transparent 40%),#060609}
.drink-arm{position:absolute;width:190px;height:72px;border-radius:40px;background:linear-gradient(90deg,#8d614e,#c99a83);transform:rotate(-28deg);right:38px;bottom:102px}
.drink-glass{
  position:absolute;width:96px;height:155px;right:130px;top:80px;transform:rotate(-23deg);
  border:5px solid rgba(240,245,255,.82);border-radius:7px 7px 24px 24px;overflow:hidden;z-index:3
}
.drink-liquid{position:absolute;left:4px;right:4px;bottom:4px;height:60%;background:linear-gradient(#eba048,#a5551b);border-radius:0 0 17px 17px}
.sip-lines{position:absolute;left:75px;top:120px;display:flex;gap:12px}
.sip-lines i{width:4px;height:80px;border-radius:3px;background:var(--magenta);transform:rotate(27deg);opacity:.55}
.drink-text{position:absolute;left:55px;bottom:65px;font-size:4.2rem;font-weight:950;color:var(--gold);transform:rotate(-6deg)}

/* Eingabe */
.visual-result-entry{flex-direction:column;gap:14px;padding:28px}
.entry-label{font-size:.78rem;letter-spacing:.2em;font-weight:950;color:#e6dbe3}
.entry-row{display:flex;align-items:baseline;gap:8px}
.entry-value{font-size:6rem;font-weight:950;color:#fff;border:2px solid var(--red);border-radius:12px;padding:0 20px;background:#111118}
.entry-unit{font-size:2rem;font-weight:950;color:#fff}
.calc-grid{width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.calc-grid div{border:1px solid #34343f;background:#101016;border-radius:12px;padding:11px;text-align:center}
.calc-grid span{display:block;color:#9d9daa;font-size:.62rem;font-weight:900;letter-spacing:.12em}
.calc-grid strong{display:block;font-size:1.45rem;margin-top:4px}
.calc-grid .difference{border-color:rgba(255,211,90,.55)}.calc-grid .difference strong{color:var(--gold)}

/* EXAKT */
.visual-exact{flex-direction:column;background:radial-gradient(circle,rgba(255,24,157,.18),transparent 58%),#050508}
.exact-rays{
  position:absolute;inset:-35%;opacity:.65;
  background:repeating-conic-gradient(from 0deg,rgba(255,24,157,.45) 0deg 2deg,transparent 2deg 12deg);
  animation:spin 8s linear infinite;
  -webkit-mask:radial-gradient(circle,transparent 0 22%,#000 32% 78%,transparent 88%);
  mask:radial-gradient(circle,transparent 0 22%,#000 32% 78%,transparent 88%);
}
@keyframes spin{to{transform:rotate(360deg)}}
.exact-kicker,.exact-values,.exact-zero{position:relative;z-index:3}
.exact-kicker{font-size:.78rem;letter-spacing:.18em;font-weight:950}
.exact-word{
  position:relative;z-index:3;font-family:"Arial Narrow","DejaVu Sans Condensed",Arial,sans-serif;
  font-weight:950;font-stretch:condensed;font-size:clamp(5rem,13vw,9rem);line-height:.9;
  color:#4e2540;-webkit-text-stroke:2px #fff2fb;
  text-shadow:0 0 6px #fff,0 0 16px var(--magenta),0 0 34px rgba(255,24,157,.72);
  transform:scaleX(.82);margin:18px 0 8px
}
.exact-values{font-size:1.65rem;font-weight:950}.exact-values span{color:var(--magenta);padding:0 7px}
.exact-zero{margin-top:10px;padding-top:10px;border-top:2px solid var(--magenta);font-weight:950}.exact-zero::first-letter{color:var(--gold)}

/* Abschluss */
.final-card .card-copy h2 span{color:var(--blue)}
.sport-tip{display:flex;gap:12px;align-items:flex-start;margin-top:22px;padding:14px;border:1px solid rgba(158,232,90,.35);background:rgba(158,232,90,.07);border-radius:14px;color:#eef8e5;line-height:1.45}
.sport-tip span{font-size:1.8rem}
.visual-ready{flex-direction:column;gap:20px;padding:26px}
.ready-row{display:grid;grid-template-columns:repeat(3,1fr);width:100%;gap:9px}
.ready-item{border:1px solid #353540;border-radius:14px;background:#101017;padding:13px 8px;text-align:center}
.ready-item span{display:block;font-size:2rem}.ready-item strong{display:block;margin-top:6px;font-size:.74rem}.ready-item small{display:block;color:var(--green);font-size:.58rem;margin-top:3px;letter-spacing:.12em}
.versus{font-size:2.8rem;font-weight:950;color:var(--magenta);line-height:.8}
.friends{text-transform:uppercase;font-size:1.3rem;font-weight:950;letter-spacing:.06em}
.start-game{border:0;border-radius:14px;padding:16px 24px;background:linear-gradient(180deg,#ff3d57,#d51431);color:#fff;font-weight:950;font-size:1.15rem;box-shadow:0 0 25px rgba(255,49,72,.32)}

/* Navigation */
.guide-nav{display:grid;grid-template-columns:150px 1fr 150px;align-items:center;gap:14px;margin-top:16px}
.nav-button{border:1px solid #ff4960;background:#dc1937;color:#fff;border-radius:12px;padding:12px;font-weight:900}
.nav-button.secondary{background:#17171d;border-color:#42424c;color:#e5e5eb}
.nav-button:disabled{opacity:.35;cursor:default}
.progress-dots{display:flex;justify-content:center;gap:8px}
.progress-dot{width:10px;height:10px;border-radius:50%;border:1px solid #696975;background:#1b1b22;padding:0}
.progress-dot.active{background:var(--magenta);border-color:#ff7bc9;box-shadow:0 0 12px rgba(255,24,157,.55)}
.prototype-notice{margin:14px auto 0;max-width:720px;text-align:center;color:#efdce8;background:rgba(255,24,157,.08);border:1px solid rgba(255,24,157,.25);border-radius:12px;padding:11px}
.hidden{display:none!important}
footer{display:flex;justify-content:space-between;gap:18px;padding:14px clamp(18px,4vw,54px);border-top:1px solid rgba(255,255,255,.08);color:#777784;font-size:.65rem;font-weight:900;letter-spacing:.08em}

@media(max-width:760px){
  .arena-header{padding:13px 14px}
  .prototype-label{font-size:.58rem;padding:7px 8px}
  .brand-main{font-size:1.35rem}
  .quickstart{padding:17px 10px 20px}
  .intro{margin-bottom:12px}
  .guide-card,.guide-card.active{
    min-height:620px;grid-template-columns:1fr;grid-template-rows:auto 1fr;
    gap:14px;padding:23px 16px 16px
  }
  .card-copy h2{font-size:2.25rem;margin-bottom:11px}
  .card-copy p{font-size:1rem;margin-bottom:11px}
  .visual{min-height:290px}
  .guide-nav{grid-template-columns:105px 1fr 105px}
  .nav-button{font-size:.82rem;padding:11px 7px}
  .glass{bottom:140px;width:70px;height:115px}
  .scale-body{width:78%}.scale-platform{width:76%}
  .scale-display{font-size:2.35rem;padding:4px 10px}
  .tara-button{width:48px;height:48px}
  .target-number{font-size:8.5rem}
  .drink-glass{right:88px;top:56px;width:76px;height:122px}
  .drink-arm{right:15px;bottom:82px;width:145px;height:58px}
  .drink-text{font-size:3rem;left:34px}
  .entry-value{font-size:4.6rem}
  .calc-grid strong{font-size:1.05rem}
  .exact-word{font-size:6.1rem}
  .ready-row{gap:5px}.ready-item{padding:10px 4px}.ready-item strong{font-size:.62rem}
  footer{font-size:.52rem;padding:11px 14px}
}


/* ===================================================
   QUICK START · PROTOTYPE 1.1 – MOBILE FIT
   Desktop bleibt unverändert; Optimierung nur Smartphone.
=================================================== */

@media (max-width:760px){

  .quickstart{
    width:100%;
    padding-left:6px!important;
    padding-right:6px!important;
  }

  .guide-card,
  .guide-card.active{
    min-height:0!important;
    padding:18px 11px 12px!important;
    gap:10px!important;
    border-radius:18px!important;
  }

  .step-badge{
    top:10px!important;
    right:10px!important;
    width:38px!important;
    height:38px!important;
    font-size:1rem!important;
    z-index:5;
  }

  .card-copy{
    padding-right:42px!important;
  }

  .card-kicker{
    font-size:.66rem!important;
    letter-spacing:.12em!important;
    margin-bottom:6px!important;
  }

  .card-copy h2{
    font-size:2rem!important;
    line-height:1!important;
    margin:0 0 8px!important;
  }

  .card-copy p{
    font-size:.94rem!important;
    line-height:1.38!important;
    margin-bottom:8px!important;
  }

  .micro-copy{
    font-size:.86rem!important;
    padding:8px 10px!important;
  }

  .visual{
    min-height:230px!important;
    border-radius:16px!important;
  }

  .visual-scale{
    min-height:240px!important;
  }
  .glass{
    bottom:116px!important;
    width:60px!important;
    height:96px!important;
  }
  .scale-platform{
    bottom:86px!important;
    width:72%!important;
    height:22%!important;
  }
  .scale-body{
    bottom:40px!important;
    width:82%!important;
    height:70px!important;
    gap:8px!important;
  }
  .scale-display{
    min-width:60%!important;
    font-size:2rem!important;
    padding:2px 8px!important;
  }
  .tara-button{
    width:42px!important;
    height:42px!important;
  }
  .visual-caption{
    bottom:8px!important;
    font-size:.54rem!important;
    letter-spacing:.1em!important;
  }

  .visual-target{
    min-height:220px!important;
  }
  .target-number{
    font-size:7.1rem!important;
  }
  .target-unit{
    font-size:1.5rem!important;
  }

  .visual-drink{
    min-height:230px!important;
  }
  .drink-glass{
    right:72px!important;
    top:44px!important;
    width:64px!important;
    height:102px!important;
  }
  .drink-arm{
    right:10px!important;
    bottom:66px!important;
    width:124px!important;
    height:48px!important;
  }
  .sip-lines{
    left:38px!important;
    top:88px!important;
  }
  .sip-lines i{
    height:56px!important;
  }
  .drink-text{
    left:24px!important;
    bottom:42px!important;
    font-size:2.5rem!important;
  }

  .visual-result-entry{
    min-height:245px!important;
    padding:14px 10px!important;
    gap:8px!important;
    overflow:visible!important;
  }
  .entry-label{
    font-size:.64rem!important;
  }
  .entry-value{
    font-size:3.7rem!important;
    padding:0 14px!important;
  }
  .entry-unit{
    font-size:1.45rem!important;
  }
  .calc-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:4px!important;
  }
  .calc-grid div{
    padding:7px 3px!important;
    min-width:0!important;
  }
  .calc-grid span{
    font-size:.49rem!important;
    letter-spacing:.06em!important;
    white-space:nowrap!important;
  }
  .calc-grid strong{
    font-size:.95rem!important;
    white-space:nowrap!important;
  }

  .visual-exact{
    min-height:235px!important;
  }
  .exact-word{
    font-size:5rem!important;
    margin:11px 0 5px!important;
  }
  .exact-values{
    font-size:1.25rem!important;
  }
  .exact-zero{
    margin-top:7px!important;
    padding-top:7px!important;
    font-size:.9rem!important;
  }

  .visual-ready{
    min-height:230px!important;
    padding:14px 10px!important;
    gap:12px!important;
  }
  .ready-item span{
    font-size:1.6rem!important;
  }
  .friends{
    font-size:1rem!important;
  }
  .start-game{
    padding:13px 16px!important;
    font-size:1rem!important;
  }

  .guide-nav{
    margin-top:10px!important;
    grid-template-columns:92px 1fr 92px!important;
    gap:8px!important;
  }
  .nav-button{
    padding:9px 5px!important;
    font-size:.76rem!important;
  }
}


/* ===================================================
   QUICK START · PROTOTYPE 1.2 – MOBILE FRAME FIT
   Nur Header + Navigation auf Smartphone korrigiert.
=================================================== */

@media (max-width:760px){

  /* Header: Branding oben, Quick-Start-Zeile darunter.
     Dadurch kein Überstand mehr rechts. */
  .arena-header{
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:7px!important;
    padding:12px 10px!important;
  }

  .brand{
    width:100%!important;
  }

  .prototype-label{
    position:static!important;
    align-self:flex-start!important;
    max-width:100%!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    line-height:1.15!important;
    font-size:.57rem!important;
    padding:6px 8px!important;
  }

  /* Navigation exakt innerhalb derselben mobilen Inhaltsbreite */
  .guide-nav{
    width:100%!important;
    max-width:100%!important;
    grid-template-columns:minmax(0,92px) minmax(0,1fr) minmax(0,92px)!important;
    gap:6px!important;
    overflow:hidden!important;
  }

  .nav-button{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    padding:9px 4px!important;
    font-size:.73rem!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  .progress-dots{
    min-width:0!important;
    max-width:100%!important;
    gap:6px!important;
    overflow:hidden!important;
  }
}


/* ===================================================
   QUICK START · PROTOTYPE 1.3 – MOBILE FULL WIDTH
   Mobile Fläche konsequent auf volle Breite gebracht.
=================================================== */

@media (max-width:760px){

  html, body{
    width:100%!important;
    max-width:100%!important;
    overflow-x:hidden!important;
  }

  .arena-shell,
  .quickstart,
  .card-stage,
  .guide-nav{
    width:100%!important;
    max-width:100%!important;
  }

  /* Fast volle iPhone-Breite: nur minimale Sicherheitskante */
  .quickstart{
    margin:0!important;
    padding-left:3px!important;
    padding-right:3px!important;
  }

  .card-stage{
    margin:0!important;
    padding:0!important;
  }

  .guide-card,
  .guide-card.active{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    border-radius:16px!important;
    overflow:hidden!important;
  }

  /* Header auf dieselbe Gesamtbreite bringen */
  .arena-header{
    width:100%!important;
    max-width:100%!important;
    padding-left:6px!important;
    padding-right:6px!important;
    overflow:hidden!important;
  }

  /* Auf Mobil nur QUICK START anzeigen – Versionsdetail bleibt technisch erhalten */
  .prototype-label{
    font-size:0!important;
    line-height:1!important;
    white-space:nowrap!important;
    width:auto!important;
    max-width:100%!important;
    overflow:hidden!important;
  }
  .prototype-label::after{
    content:"QUICK START";
    font-size:.66rem;
    font-weight:900;
    letter-spacing:.1em;
    color:#e9b5d5;
  }

  /* Navigation exakt an Kartenbreite ausrichten */
  .guide-nav{
    margin-left:0!important;
    margin-right:0!important;
    padding-left:0!important;
    padding-right:0!important;
    grid-template-columns:minmax(0,88px) minmax(0,1fr) minmax(0,88px)!important;
    gap:4px!important;
    overflow:hidden!important;
  }

  .nav-button{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    box-sizing:border-box!important;
    font-size:.7rem!important;
    padding:9px 3px!important;
  }

  .progress-dots{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    gap:5px!important;
  }

  /* Karte 5: Differenz garantiert sichtbar */
  .visual-result-entry{
    width:100%!important;
    max-width:100%!important;
    padding-left:6px!important;
    padding-right:6px!important;
    overflow:hidden!important;
  }

  .calc-grid{
    width:100%!important;
    max-width:100%!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:3px!important;
  }

  .calc-grid div{
    width:auto!important;
    max-width:100%!important;
    min-width:0!important;
    padding:6px 2px!important;
    overflow:hidden!important;
  }

  .calc-grid span{
    display:block!important;
    width:100%!important;
    font-size:.45rem!important;
    letter-spacing:.03em!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:clip!important;
  }

  .calc-grid strong{
    font-size:.9rem!important;
  }

  /* Etwas mehr Platz für den langen DIFFERENZ-Begriff */
  .calc-grid .difference span{
    font-size:.42rem!important;
    letter-spacing:0!important;
  }
}

/* v0.9.1 – integrierter QUICK START: kein zusätzlicher Kopf über den 7 Karten */
header,.app-header,.quickstart-header,.prototype-header{display:none!important}
body{padding-top:0!important}


/* =========================================================
   v0.9.2 – integrierter QUICK START
   Nur Karte 1 trägt "SPIELANLEITUNG / In 7 Schritten..."
   ========================================================= */

/* Der interne Marken-Kopf wurde auch im HTML entfernt. */
.arena-header{display:none !important}

.card-one-intro{
    grid-column:1 / -1;
    margin:-2px 50px 2px 0;
    padding:0 0 12px;
    border-bottom:1px solid rgba(255,255,255,.10);
}
.card-one-intro .eyebrow{
    color:var(--magenta);
    font-size:.72rem;
    font-weight:950;
    letter-spacing:.16em;
    margin-bottom:5px;
}
.card-one-intro h1{
    margin:0 0 5px;
    font-size:clamp(1.35rem,2.5vw,2rem);
    line-height:1.05;
    letter-spacing:-.025em;
}
.card-one-intro p{
    margin:0;
    color:var(--muted);
    font-size:.9rem;
    line-height:1.35;
}

/* Karte 7: einheitliche, selbst gezeichnete Waage + Becher */
.qs-scale-icon,
.qs-cup-icon{
    position:relative;
    display:inline-block;
    box-sizing:border-box;
    color:var(--magenta);
    flex:0 0 auto;
}
.qs-scale-icon{
    width:38px;
    height:30px;
    border:2px solid currentColor;
    border-radius:5px 5px 8px 8px;
    background:rgba(255,255,255,.025);
}
.qs-scale-icon::before{
    content:"";
    position:absolute;
    left:13%;
    right:13%;
    top:-9px;
    height:9px;
    border:2px solid currentColor;
    border-bottom:0;
    border-radius:4px 4px 0 0;
}
.qs-scale-icon span{
    position:absolute;
    left:50%;
    bottom:5px;
    transform:translateX(-50%);
    width:16px;
    height:6px;
    border:1px solid currentColor;
    border-radius:1px;
}
.qs-cup-icon{
    width:31px;
    height:35px;
    border:2px solid currentColor;
    border-top:0;
    border-radius:2px 2px 8px 8px;
}
.qs-cup-icon::before{
    content:"";
    position:absolute;
    left:-3px;
    right:-3px;
    top:-3px;
    height:6px;
    border:2px solid currentColor;
    border-radius:50%;
    background:var(--panel2);
}
.qs-cup-icon::after{
    content:"";
    position:absolute;
    left:4px;
    right:4px;
    bottom:6px;
    height:10px;
    border-radius:0 0 5px 5px;
    background:rgba(255,49,180,.26);
}
.qs-cup-icon.compact{
    width:24px;
    height:28px;
    margin:2px 7px 0 0;
}
.sport-tip{
    align-items:flex-start !important;
}
.ready-item .qs-scale-icon,
.ready-item .qs-cup-icon{
    margin:0 auto 7px;
}

@media (max-width:760px){
    .card-one-intro{
        margin:0 42px 0 0;
        padding:0 0 8px;
    }
    .card-one-intro .eyebrow{
        font-size:.6rem;
        margin-bottom:3px;
    }
    .card-one-intro h1{
        font-size:1.22rem;
        margin-bottom:3px;
    }
    .card-one-intro p{
        font-size:.79rem;
        line-height:1.28;
    }
    .ready-item .qs-scale-icon{
        transform:scale(.82);
        transform-origin:center;
    }
    .ready-item .qs-cup-icon{
        transform:scale(.86);
        transform-origin:center;
    }
}

/* =========================================================
   v0.9.3 – QUICK START Feinschliff
   ========================================================= */

/* Karte 3: 37 g? links, Glas rechts – kein Überdecken */
.guide-card[data-card="2"] .drink-text{
  left:28px!important;
  bottom:62px!important;
  z-index:5!important;
}
.guide-card[data-card="2"] .drink-glass{
  right:36px!important;
  left:auto!important;
  z-index:2!important;
}
@media(max-width:760px){
  .guide-card[data-card="2"] .drink-text{left:18px!important;bottom:48px!important}
  .guide-card[data-card="2"] .drink-glass{right:20px!important}
}

/* Karte 4: "35 g" immer in einer Zeile */
.guide-card[data-card="3"] .scale-display{
  white-space:nowrap!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex-wrap:nowrap!important;
  line-height:1!important;
  min-width:64%!important;
}

/* Karte 6: 0 und g gemeinsam gelbgold */
.guide-card[data-card="5"] .exact-zero-g{
  color:var(--gold)!important;
  -webkit-text-fill-color:var(--gold)!important;
  text-shadow:0 0 8px rgba(255,217,92,.55),0 0 15px rgba(255,183,52,.28)!important;
}

/* Karte 7: alle drei Kästchen gleiche Symbol-/Text-Achse */
.guide-card[data-card="6"] .ready-row{
  align-items:stretch!important;
}
.guide-card[data-card="6"] .ready-item{
  min-height:126px!important;
  display:grid!important;
  grid-template-rows:50px 24px 18px!important;
  align-content:center!important;
  align-items:center!important;
  justify-items:center!important;
  padding:10px 5px!important;
}
.guide-card[data-card="6"] .ready-item > span:first-child{
  margin:0!important;
  align-self:center!important;
  justify-self:center!important;
}
.guide-card[data-card="6"] .ready-item strong{
  margin:0!important;
  align-self:center!important;
}
.guide-card[data-card="6"] .ready-item small{
  margin:0!important;
  align-self:center!important;
}

/* Mehrfarbige Quick-Start-Symbole */
.qs-scale-icon{
  color:#f3f7ff!important;border-color:#f3f7ff!important;
  background:linear-gradient(180deg,rgba(112,202,255,.18),rgba(255,255,255,.035))!important
}
.qs-scale-icon::before{border-color:#69c8ff!important}
.qs-scale-icon span{border-color:#85ffad!important;background:rgba(72,255,128,.20)!important}
.qs-cup-icon{color:#f3f7ff!important;border-color:#f3f7ff!important}
.qs-cup-icon::before{border-color:#69c8ff!important}
.qs-cup-icon::after{
  background:linear-gradient(180deg,rgba(255,220,83,.78),rgba(255,137,62,.70))!important
}

/* v0.9.4 – Karte 3: Glas optisch etwas weiter nach links */
.guide-card[data-card="2"] .drink-glass{
  right:48px!important;
}
@media(max-width:760px){
  .guide-card[data-card="2"] .drink-glass{
    right:30px!important;
  }
}