/* CYQORE Daily — Portal. Tokens aus 00 Kontext/Corporate Design/design-tokens.css */
:root{
  --cy-pink:#E7095B; --cy-pink-deep:#A61F42; --cy-pink-glow:#F23D7B;
  --cy-black:#000; --cy-bg-dark:#0A0A0B; --cy-surface:#141416; --cy-bordeaux:#2F0012;
  --cy-text:#F5F5F7; --cy-text-muted:#9CA0A8;
  --cy-font:'Inter',system-ui,Helvetica,Arial,sans-serif;
  --cy-radius:12px; --cy-radius-card:16px;
  --cy-glow:0 0 24px rgba(231,9,91,.35);
  --cy-border:1px solid rgba(255,255,255,.07);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; min-height:100vh; font-family:var(--cy-font); color:var(--cy-text);
  background:var(--cy-black);
  background-image:radial-gradient(ellipse at 30% 0%,var(--cy-bordeaux) 0%,var(--cy-black) 60%);
  background-attachment:fixed;
  line-height:1.6; -webkit-font-smoothing:antialiased;
}

/* Kopf + Fuß */
.top{
  padding:24px 24px 8px;display:flex;align-items:center;justify-content:space-between;
  gap:16px;max-width:1000px;margin:0 auto;
}
.kopf-link{
  font-size:13px;color:var(--cy-text-muted);text-decoration:none;white-space:nowrap;
  padding:9px 15px;border:1px solid rgba(255,255,255,.14);border-radius:var(--cy-radius);
  transition:color .2s ease,border-color .2s ease;
}
.kopf-link:hover{color:var(--cy-pink);border-color:var(--cy-pink)}
.wortmarke{display:flex;align-items:center;gap:14px;text-decoration:none}
.wortmarke img{
  height:22px;width:auto;display:block;   /* Originaldatei ist 806x83 */
}
.wortmarke span{
  font-weight:700;font-size:12px;letter-spacing:.35em;text-transform:uppercase;
  color:var(--cy-pink);padding-left:14px;
  border-left:1px solid rgba(255,255,255,.16);
}
.fuss{
  display:flex;gap:24px;justify-content:center;flex-wrap:wrap;
  padding:56px 24px 40px;font-size:13px;
}
.fuss a{color:var(--cy-text-muted);text-decoration:none}
.fuss a:hover{color:var(--cy-pink)}

main{max-width:640px;margin:0 auto;padding:24px 20px}
main.wide{max-width:1000px}

/* Hero */
.hero{padding:40px 0 8px;text-align:center}
.kicker{
  margin:0 0 16px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--cy-pink);font-weight:600;
}
h1{font-size:clamp(32px,6vw,52px);line-height:1.1;margin:0 0 20px;letter-spacing:-.02em}
.lead{color:var(--cy-text-muted);font-size:17px;max-width:56ch;margin:0}
.hero .lead{margin:0 auto}          /* nur im Hero zentriert */
.formular > h1{margin-bottom:6px}
.formular > .lead{margin-bottom:40px}
.hinweis{color:var(--cy-text-muted);font-size:14px;margin:4px 0 18px}

/* Themen-Kacheln */
.formular{margin-top:48px}
.schritt{
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--cy-pink);
  margin:0 0 4px;font-weight:600;
}
.kat{margin:36px 0}
.kat h2{font-size:15px;font-weight:600;margin:0 0 14px;color:var(--cy-text)}
.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}

.kachel{
  position:relative;display:block;padding:16px 16px 16px 46px;cursor:pointer;
  background:var(--cy-surface);border:var(--cy-border);border-radius:var(--cy-radius-card);
  transition:border-color .18s ease,background .18s ease,transform .18s ease;
}
.kachel:hover{border-color:rgba(231,9,91,.45);transform:translateY(-1px)}
.kachel input{position:absolute;opacity:0;width:0;height:0}
.haken{
  position:absolute;left:16px;top:18px;width:18px;height:18px;border-radius:6px;
  border:1.5px solid rgba(255,255,255,.22);transition:all .18s ease;
}
.haken::after{
  content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;
  border:solid var(--cy-black);border-width:0 2px 2px 0;transform:rotate(45deg) scale(.4);
  opacity:0;transition:all .18s ease;
}
.kachel input:checked ~ .haken{background:var(--cy-pink);border-color:var(--cy-pink)}
.kachel input:checked ~ .haken::after{opacity:1;transform:rotate(45deg) scale(1)}
.kachel.gesperrt{opacity:.38;cursor:not-allowed}
.kachel.gesperrt:hover{border-color:rgba(255,255,255,.07);transform:none}
.kachel:has(input:checked){border-color:var(--cy-pink);box-shadow:var(--cy-glow)}
.kachel input:focus-visible ~ .haken{outline:2px solid var(--cy-pink-glow);outline-offset:3px}
.k-name{display:block;font-weight:600;font-size:15px;margin-bottom:3px}
.k-kurz{display:block;font-size:13px;color:var(--cy-text-muted);line-height:1.45}

/* Wochentage */
.tage{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.tag input{position:absolute;opacity:0;width:0;height:0}
.tag span{
  display:grid;place-items:center;width:52px;height:44px;cursor:pointer;font-size:14px;
  background:var(--cy-surface);border:var(--cy-border);border-radius:var(--cy-radius);
  transition:all .18s ease;
}
.tag input:checked + span{border-color:var(--cy-pink);color:var(--cy-pink);box-shadow:var(--cy-glow)}
.tag input:focus-visible + span{outline:2px solid var(--cy-pink-glow);outline-offset:2px}
/* Sagt im Klartext, was die Auswahl bedeutet — sonst steht man
   unbemerkt auf "einmal pro Woche". */
.takt{margin:14px 0 0;font-size:14px;color:var(--cy-text-muted)}
.takt strong{color:var(--cy-pink);font-weight:600}

/* Eingaben */
.abschluss{
  margin-top:44px;padding:28px;background:rgba(20,20,22,.7);
  border:var(--cy-border);border-radius:var(--cy-radius-card);
}
/* Der Ablauf in drei Schritten — beantwortet "und wie ändere ich das später?" */
.ablauf{margin:0 0 22px;padding:0;list-style:none;counter-reset:schritt}
.ablauf li{
  position:relative;padding-left:34px;margin-bottom:11px;
  font-size:14px;color:var(--cy-text-muted);line-height:1.55;
}
.ablauf li::before{
  counter-increment:schritt;content:counter(schritt);
  position:absolute;left:0;top:0;width:22px;height:22px;
  display:grid;place-items:center;border-radius:50%;
  font-size:11.5px;font-weight:700;color:var(--cy-pink);
  border:1px solid rgba(231,9,91,.45);
}
.ablauf strong{color:var(--cy-text);font-weight:600}

.zeile{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.zeile.abstand{margin-top:20px}
.feld{
  flex:1 1 260px;padding:14px 16px;font:inherit;color:var(--cy-text);
  background:var(--cy-black);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--cy-radius);
}
.feld::placeholder{color:#5c6068}
.feld:focus{outline:none;border-color:var(--cy-pink);box-shadow:var(--cy-glow)}

/* Ghost-Buttons — CYQORE-Standard, keine gefüllten Flächen */
.ghost{
  display:inline-block;padding:14px 26px;font:inherit;font-weight:600;cursor:pointer;
  color:var(--cy-text);text-decoration:none;background:transparent;
  border:1.5px solid var(--cy-pink);border-radius:var(--cy-radius);
  transition:color .2s ease,box-shadow .2s ease,background .2s ease;
}
.ghost:hover{color:var(--cy-pink);box-shadow:var(--cy-glow);background:rgba(231,9,91,.06)}
.ghost:focus-visible{outline:2px solid var(--cy-pink-glow);outline-offset:3px}
.ghost.gross{padding:15px 34px}
.ghost.still{border-color:rgba(255,255,255,.16);color:var(--cy-text-muted);font-weight:500}
.ghost.still:hover{border-color:var(--cy-pink);color:var(--cy-pink);box-shadow:none}

.einwilligung{
  display:flex;gap:12px;margin-top:20px;font-size:13.5px;color:var(--cy-text-muted);
  line-height:1.5;align-items:flex-start;
}
.einwilligung input{margin-top:3px;accent-color:var(--cy-pink);width:17px;height:17px;flex:none}
.einwilligung a{color:var(--cy-pink)}

/* Bestandsabonnenten: Weg zur Verwaltung, ohne die Anmeldung zu stören */
.schon-dabei{
  margin-top:44px;padding:26px 28px;border-radius:var(--cy-radius-card);
  border:var(--cy-border);background:rgba(20,20,22,.45);
}
.schon-dabei h2{font-size:16px;margin:0 0 8px;color:var(--cy-text)}
.schon-dabei p{color:var(--cy-text-muted);font-size:14px;margin:0 0 16px;max-width:62ch}

/* Karten & Banner */
.karte{
  margin-top:40px;padding:36px 32px;background:var(--cy-surface);
  border:var(--cy-border);border-radius:var(--cy-radius-card);
}
.karte h1{font-size:clamp(24px,4vw,32px)}
.karte p{color:var(--cy-text-muted)}
.karte .zeile{margin-top:20px}
.banner{
  margin:24px 0 0;padding:14px 18px;border-radius:var(--cy-radius);font-size:14.5px;
  background:rgba(231,9,91,.08);border:1px solid rgba(231,9,91,.35);
}
.banner.erfolg{color:var(--cy-text)}

/* Rechtstexte */
.recht h1{font-size:28px}
.recht h2{font-size:16px;margin-top:32px}
.recht p,.recht li{color:var(--cy-text-muted);font-size:14.5px}
.recht a{color:var(--cy-pink)}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}