/* Zweiherzen Eintakt – Look wie die TikToks: Himmel-Verlauf, weiße Pille, weißer Text mit Schatten, Neon-Herz */
@font-face{font-family:Montserrat;font-weight:400;font-display:swap;src:url(fonts/Montserrat-Regular.ttf) format("truetype")}
@font-face{font-family:Montserrat;font-weight:500;font-display:swap;src:url(fonts/Montserrat-Medium.ttf) format("truetype")}
@font-face{font-family:Montserrat;font-weight:600;font-display:swap;src:url(fonts/Montserrat-SemiBold.ttf) format("truetype")}
@font-face{font-family:Montserrat;font-weight:700;font-display:swap;src:url(fonts/Montserrat-Bold.ttf) format("truetype")}
@font-face{font-family:Montserrat;font-weight:800;font-display:swap;src:url(fonts/Montserrat-ExtraBold.ttf) format("truetype")}
:root{
  --ink:#1c161e; --white:#fff; --red:#ff2d55; --muted:rgba(255,255,255,.78);
  --rosa-a:#e996be; --rosa-b:#7846a0; --lila-a:#6e50aa; --lila-b:#281e5a; --orange-a:#ff9650; --orange-b:#a03c6e;
  --rot-a:#d23c64; --rot-b:#46143c; --blau-a:#5078be; --blau-b:#192350; --gruen-a:#50aa96; --gruen-b:#143c50;
  --pink-a:#ff6ea0; --pink-b:#782878; --tuerkis-a:#5abed2; --tuerkis-b:#1e3c6e; --cover-a:#eb78aa; --cover-b:#3c1e6e; --nacht-a:#3c326e; --nacht-b:#0f0c23;
  --a:var(--cover-a); --b:var(--cover-b);
  --sa-top:env(safe-area-inset-top,0px); --sa-bot:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box} html,body{margin:0;height:100%} [hidden]{display:none!important}
body{font-family:Montserrat,system-ui,-apple-system,sans-serif;color:var(--white);background:var(--b);-webkit-font-smoothing:antialiased;overscroll-behavior-y:none;-webkit-text-size-adjust:100%;text-size-adjust:100%;font-synthesis:none}
.app{min-height:100vh;min-height:100dvh;background:linear-gradient(170deg,var(--a) 0%,var(--b) 62%,#120d26 100%);display:flex;flex-direction:column;transition:background .6s}
.app[data-farbe=rosa]{--a:var(--rosa-a);--b:var(--rosa-b)} .app[data-farbe=lila]{--a:var(--lila-a);--b:var(--lila-b)} .app[data-farbe=orange]{--a:var(--orange-a);--b:var(--orange-b)}
.app[data-farbe=rot]{--a:var(--rot-a);--b:var(--rot-b)} .app[data-farbe=blau]{--a:var(--blau-a);--b:var(--blau-b)} .app[data-farbe=gruen]{--a:var(--gruen-a);--b:var(--gruen-b)}
.app[data-farbe=pink]{--a:var(--pink-a);--b:var(--pink-b)} .app[data-farbe=tuerkis]{--a:var(--tuerkis-a);--b:var(--tuerkis-b)} .app[data-farbe=nacht]{--a:var(--nacht-a);--b:var(--nacht-b)}
.top{position:sticky;top:0;z-index:5;padding:calc(10px + var(--sa-top)) 16px 10px;display:flex;align-items:center;justify-content:space-between;gap:12px;background:rgba(0,0,0,.16)}
.brand{display:flex;align-items:center;gap:8px;background:none;border:0;color:#fff;font:700 15px Montserrat;padding:0;white-space:nowrap}
.tabs{display:flex;gap:4px}.tabs button{background:rgba(255,255,255,.14);border:0;color:#fff;font:600 12px Montserrat;padding:8px 10px;border-radius:999px}.tabs button.aktiv{background:#fff;color:var(--ink)}
.main{flex:1;padding:16px 22px calc(40px + var(--sa-bot));max-width:520px;width:100%;margin:0 auto}
.screen{display:flex;flex-direction:column;gap:16px;animation:rein .35s ease}.screen.center{align-items:center;text-align:center;padding-top:40px}
@keyframes rein{from{transform:translateY(10px)}to{transform:none}}
h1{font-size:26px;line-height:1.2;margin:4px 0;font-weight:800;text-shadow:0 3px 12px rgba(0,0,0,.35)}
.frage-gross{font-size:30px;font-weight:700;line-height:1.22;margin:10px 0 6px}
p{margin:0;line-height:1.5}.muted{color:var(--muted)}.small{font-size:12.5px;color:var(--muted)}.center{text-align:center}
.pill{align-self:flex-start;background:#fff;color:var(--ink);font-weight:700;font-size:13px;padding:8px 16px;border-radius:999px;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.herz-klein,.herz-gross{display:inline-block;background:var(--red);mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 21s-7-4.6-9.3-8.4C.6 9 2.3 5 6 5c2 0 3.3 1.1 4 2.2C10.7 6.1 12 5 14 5c3.7 0 5.4 4 3.3 7.6C19 16.4 12 21 12 21z' fill='none' stroke='black' stroke-width='2.2' stroke-linejoin='round'/></svg>") center/contain no-repeat;-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 21s-7-4.6-9.3-8.4C.6 9 2.3 5 6 5c2 0 3.3 1.1 4 2.2C10.7 6.1 12 5 14 5c3.7 0 5.4 4 3.3 7.6C19 16.4 12 21 12 21z' fill='none' stroke='black' stroke-width='2.2' stroke-linejoin='round'/></svg>") center/contain no-repeat;filter:drop-shadow(0 0 8px rgba(255,45,85,.8))}
.herz-klein{width:20px;height:20px}.logo-klein{width:26px;height:26px}.logo-start{width:132px;height:132px;align-self:center;margin:10px 0 -4px}.herz-gross{width:120px;height:120px;margin:10px auto}
.form{display:flex;flex-direction:column;gap:10px;margin-top:6px}.form.row{flex-direction:row}
input,textarea{width:100%;font:500 16px Montserrat;padding:14px 16px;border-radius:16px;border:1.5px solid rgba(255,255,255,.35);background:rgba(255,255,255,.14);color:#fff;outline:none}
input::placeholder,textarea::placeholder{color:rgba(255,255,255,.6)} input:focus,textarea:focus{border-color:#fff;background:rgba(255,255,255,.2)}
textarea{min-height:120px;resize:vertical;line-height:1.45}
.btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:100%;font:700 16px Montserrat;padding:14px 18px;border-radius:999px;border:1.5px solid rgba(255,255,255,.5);background:rgba(255,255,255,.14);color:#fff;text-decoration:none;cursor:pointer;transition:transform .1s}
.btn:active{transform:scale(.98)}.btn.primary{background:#fff;color:var(--ink);border-color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.25)}.btn small{font-weight:500;font-size:12px;opacity:.8}
.btn.rot{background:var(--red);border-color:var(--red);color:#fff}
.link{background:none;border:0;color:#fff;font:600 14px Montserrat;text-decoration:underline;text-underline-offset:3px;padding:6px 0;cursor:pointer;text-align:left}
.card{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);border-radius:22px;padding:16px 18px;color:#fff}
.row-card{display:flex;justify-content:space-between;align-items:center;width:100%;font:600 15px Montserrat;text-decoration:none;cursor:pointer;text-align:left}
.liste{display:flex;flex-direction:column;gap:10px}
.code-card{text-align:center}.code{font-size:34px;font-weight:800;letter-spacing:3px}
.checks{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}.checks li{padding-left:28px;position:relative;line-height:1.4}.checks li::before{content:"";position:absolute;left:0;top:2px;width:18px;height:18px;border-radius:50%;background:var(--red);box-shadow:0 0 10px rgba(255,45,85,.7)}
.preise{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.antwort{white-space:pre-wrap;line-height:1.5}.wer{font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;opacity:.8;margin-bottom:6px}
.partner-wartet{display:flex;align-items:center;gap:10px}.punkt{width:10px;height:10px;border-radius:50%;background:#fff;opacity:.6;animation:puls 1.2s infinite}
@keyframes puls{0%,100%{opacity:.3}50%{opacity:1}}
.streak{text-align:center;font-size:13px;color:var(--muted);margin-top:8px}
.verlauf-item h3{margin:0 0 8px;font-size:16px;font-weight:700}.verlauf-item .datum{font-size:12px;opacity:.7;margin-bottom:4px}
.kapitel-kopf{display:flex;justify-content:space-between;align-items:center;width:100%;background:none;border:0;color:#fff;font:700 16px Montserrat;padding:4px 0;text-align:left;cursor:pointer}
.kapitel-fragen{display:none;flex-direction:column;gap:6px;margin-top:8px}.kapitel-fragen.offen{display:flex}
.frage-row{background:rgba(0,0,0,.18);border:0;color:#fff;font:500 14px Montserrat;padding:10px 12px;border-radius:12px;text-align:left;cursor:pointer}.frage-row.gesperrt{opacity:.5}
.schritte{padding-left:22px;display:flex;flex-direction:column;gap:8px;line-height:1.5}
.tag-row{display:flex;gap:12px;align-items:flex-start}.tag-nr{min-width:40px;height:40px;border-radius:12px;background:var(--red);display:flex;align-items:center;justify-content:center;font-weight:800;box-shadow:0 0 12px rgba(255,45,85,.6)}.tag-row.erledigt .tag-nr{background:#fff;color:var(--ink);box-shadow:none}
.toast{position:fixed;left:50%;bottom:calc(24px + var(--sa-bot));transform:translateX(-50%);background:#fff;color:var(--ink);font-weight:600;font-size:14px;padding:12px 18px;border-radius:999px;box-shadow:0 10px 30px rgba(0,0,0,.35);z-index:9;max-width:90vw}
@media (min-width:700px){.frage-gross{font-size:36px}h1{font-size:30px}}

.advent-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.tuer{aspect-ratio:1;border-radius:16px;border:1.5px solid rgba(255,255,255,.35);background:rgba(255,255,255,.12);color:#fff;font:800 22px Montserrat;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative}.tuer.offen{background:#fff;color:var(--ink)}.tuer.heute{border-color:var(--red);box-shadow:0 0 14px rgba(255,45,85,.7)}.tuer.zu{opacity:.45;cursor:default}.tuer.fertig::after{content:"";position:absolute;right:6px;top:6px;width:10px;height:10px;border-radius:50%;background:var(--red)}
@media (max-width:430px){.top:has(.tabs:not([hidden])) .brand span{display:none}.tabs button{padding:8px 9px}}

.modus{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:rgba(0,0,0,.22);padding:6px;border-radius:20px}
.modus button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 6px;border:0;border-radius:15px;background:transparent;color:#fff;font:700 14px Montserrat;cursor:pointer}
.modus button i{font-style:normal;font-size:16px}.modus button small{font:500 11px Montserrat;opacity:.75}.modus button.aktiv{background:#fff;color:var(--ink)}.modus button.aktiv small{opacity:.7}
.deck-wrap{display:flex;flex-direction:column;gap:14px;align-items:stretch}
.deck{position:relative;height:340px;margin:6px 0}
.karte{position:absolute;left:50%;top:0;width:min(300px,86%);height:320px;transform:translateX(-50%);border-radius:26px;border:1.5px solid rgba(255,255,255,.35);background:rgba(255,255,255,.14);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:26px;text-align:center;color:#fff;cursor:pointer;box-shadow:0 14px 40px rgba(0,0,0,.35);transition:transform .35s,opacity .35s}
.karte.hinten{transform:translateX(-50%) rotate(-5deg) translateY(10px);opacity:.55}.karte.hinten.zwei{transform:translateX(-50%) rotate(4deg) translateY(5px);opacity:.75}
.karte.vorne{background:#fff;color:var(--ink);border-color:#fff}.karte.vorne.neu{animation:ziehen .4s ease}
@keyframes ziehen{from{transform:translateX(-50%) translateY(40px) rotate(6deg);opacity:0}to{transform:translateX(-50%);opacity:1}}
.karte-kapitel{font:700 12px Montserrat;letter-spacing:2px;text-transform:uppercase;color:var(--red)}.karte-text{font:600 22px/1.3 Montserrat}
.deck-buttons{display:flex;flex-direction:column;gap:10px}

.wortmarke{display:flex;flex-direction:column;align-items:center;text-align:center;margin:26px 0 2px;color:#fff}.wm-1{font:800 34px/1.05 Montserrat;letter-spacing:-.01em}.wm-2{font:400 15px/1 Montserrat;letter-spacing:.42em;text-transform:lowercase;color:#FF96AF;margin-top:8px;padding-left:.42em}
.app[data-screen="start"] .top{display:none}
#warteliste p{margin:0 0 6px}#warteliste .btn{margin-top:18px;width:100%}
.claim{font-size:34px;line-height:1.15;text-align:center;margin:6px 0 0}.start{gap:18px;padding-top:18px}.start .form{margin-top:8px}.start .muted{max-width:300px;align-self:center}
.vorteile{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}.vorteile span{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:7px 12px;font:600 12.5px Montserrat}
.heute-vorschau{text-align:center}.frage-mini{font:600 18px/1.35 Montserrat;margin-top:4px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;color:var(--muted);line-height:1.45}.check input{width:20px;height:20px;margin:0;flex:none;accent-color:var(--red)}.check a{color:#fff}
.plaene{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px}
.plan{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:22px 10px 16px;border-radius:22px;border:1.5px solid rgba(255,255,255,.3);background:rgba(255,255,255,.1);color:#fff;font-family:Montserrat;cursor:pointer;text-align:center;transition:transform .15s}
.plan.aktiv{background:#fff;color:var(--ink);border-color:#fff;transform:scale(1.03);box-shadow:0 12px 30px rgba(0,0,0,.3)}
.plan-badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--red);color:#fff;font:700 11px Montserrat;padding:4px 10px;border-radius:999px;letter-spacing:.5px}
.plan-name{font:700 14px Montserrat;opacity:.8}.preis{font:800 28px Montserrat;margin-top:2px}.preis-sub{font:500 12px Montserrat;opacity:.75}.plan-note{margin-top:8px;font:700 12.5px Montserrat;color:var(--red)}.plan.aktiv .plan-note{color:#c8123c}
.link.center{text-align:center;width:100%}