/* style.css – freundlicher Look mit Pastellfarben und Willow */
*{box-sizing:border-box}
:root{
  --ink:#1a202c;
  --bg:#f5f7ff;
  --card:#ffffff;
  --brand:#6b8afd;         /* sanftes Blau */
  --brand-dark:#4b6bfb;
  --accent:#f7b267;        /* warmes Orange */
  --mint:#69d1c5;          /* mintgrün */
  --rose:#f79ac0;          /* rosé */
  --slate:#334155;
  --border:#e2e8f0;
  --ok:#dcfce7; --ok-b:#bbf7d0;
  --err:#fee2e2; --err-b:#fecaca;
}
html,body{height:100%}
body{font-family:"Comic Sans MS",cursive,sans-serif;margin:0;background:linear-gradient(180deg,#eef2ff 0%, var(--bg) 60%);color:var(--ink)}
header{
  background: linear-gradient(90deg, var(--brand) 0%, var(--mint) 50%, var(--accent) 100%);
  color:#fff; display:flex; align-items:center; gap:16px; padding:12px 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
}
header img.logo{height:64px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.15));}
header h1{font-size:1.6rem;margin:0;text-shadow:0 1px 0 rgba(0,0,0,.15)}
main{max-width:1000px;margin:auto;padding:24px}
.card{
  background:var(--card); border:1px solid var(--border); border-radius:16px;
  padding:18px; margin:18px 0; box-shadow:0 6px 20px rgba(107,138,253,.08);
}
h2,h3{color:#243b6b}
a.button, button.button{
  display:inline-block; padding:11px 16px; border-radius:12px; border:1px solid var(--brand-dark);
  text-decoration:none; color:#fff; background:linear-gradient(180deg,var(--brand) 0%, var(--brand-dark) 100%);
  transition:transform .05s ease, box-shadow .2s ease;
  box-shadow:0 4px 0 var(--brand-dark);
}
a.button:hover, button.button:hover{transform:translateY(-1px)}
a.button.secondary{
  background:#fff; color:var(--slate); border-color:var(--slate); box-shadow:0 4px 0 #233042;
}
label{display:block;margin:10px 0 6px}
input{
  width:100%; padding:12px; border:1px solid var(--border); border-radius:10px; background:#fff;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.03);
}
button{padding:11px 16px; border-radius:12px; border:0; background:var(--brand); color:#fff; cursor:pointer}
.err{background:var(--err);border:1px solid var(--err-b);padding:10px;border-radius:12px;margin-bottom:10px}
.ok{background:var(--ok);border:1px solid var(--ok-b);padding:10px;border-radius:12px;margin-bottom:10px}
footer{text-align:center;padding:18px;font-size:.9rem;color:#475569}
.grid{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:680px){.grid{grid-template-columns:1fr 1fr}}

/* Willow – Glückskatze (floating mascot) */
.willow{
  position:fixed; right:18px; bottom:18px; z-index:50; display:flex; align-items:flex-end; gap:10px;
  filter: drop-shadow(0 6px 6px rgba(0,0,0,.15));
}
.willow .bubble{
  background:#fff; border:1px solid var(--border); border-radius:14px; padding:10px 12px; max-width:260px;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
}
.willow .bubble strong{color:#243b6b}
.willow img{height:96px}
.willow .tail{width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:12px solid #fff; align-self:flex-end; margin-bottom:6px}

/* Back button area tone down spacing when included at top */
.backwrap{padding-top:0}