:root {
  --brand-bg: #f7f8fb;
  --brand-surface: #ffffff;
  --brand-text: #0F1B2F;
  --brand-muted: #64748b;
  --brand-primary: #8daa82; /* Buttons/Progress */
  --brand-border: #e5e7eb;
  --bg-button: #8daa82;
  --radius: 5px;
  --logo-image: url('https://www.kinderarzt-ronellenfitsch.de/assets/images/RONELLENFITSCH-Logo.svg');
  --confetti: #95c11e; /* Konfetti-Farbe */
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font: 18px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color: var(--brand-text);
  background: var(--brand-bg);
  padding:0;
}
.wrap { max-width: 800px; margin: 0 auto; padding: 20px; }

canvas#confetti {
  width: 100%;
  max-width: 900px;
  height: 300px;
  margin: 0 auto;
  display: block;
}

header { display:flex; align-items:center; justify-content:space-between; margin: 10px 0 20px; }
.brand { display:flex; align-items:center; gap: 12px; font-weight: 800; }
.brand-logo {
  width: 220px;
  height: 100px;
  background-image: var(--logo-image);
  background-size: contain;
  background-repeat:no-repeat;
  background-position:left center;
}

.card {
  padding:1.5em;
  background: var(--brand-surface);
  border:1px solid var(--brand-border);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(2,6,23,.06);
  overflow:hidden;
  position:relative;
}
.card-head { padding: 18px 20px 0; }
.title { font-size: 1.6rem; font-weight: 900; margin:0 0 6px; }
.progress {
  position:relative;
  height:10px;
  background: var(--brand-border);
  border-radius: 999px;
  margin: 0 20px 16px;
  overflow:hidden;
}
.bar {
  height:100%;
  width: 0%;
  background: var(--brand-primary);
  transition: width .4s ease;
}

.steps { position: relative; min-height: 450px; }
.step {
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
  transform: translateY(8px);
  transition: opacity .35s ease, transform .35s ease;
}
.step.active { opacity:1; pointer-events:auto; transform:none; }

.option-btn {
  display:block;
  padding:12px;
  border:1px solid var(--brand-border);
  border-radius:var(--radius);
  text-align:center;
  cursor:pointer;
  background:#fff;
  margin:8px 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease,
              background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Hover-Effekt */
.option-btn:hover {
  color: #fff;
  border-color:var(--brand-primary);
  background:var(--bg-button);
  transform: scale(1.01);
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* ✅ Aktiv gewählter Button über CSS :has() */
.option-btn:has(input:checked) {
  background: var(--brand-primary);
  color: #fff;
  border-color: var(--brand-primary);
  transform: scale(1.03);
  transition: transform 0.15s ease, background 0.2s ease;
}

/* Optional: leicht stärkerer Hover bei aktivem Button */
.option-btn:has(input:checked):hover {
  transform: scale(1.05);
}

textarea, input[type="text"], input[type="email"], input[type="tel"] {
  width:100%;
  padding:12px;
  font-size:0.8em;
  border:1px solid var(--brand-border);
  border-radius:var(--radius);
  outline:none;
  background:#fff;
  margin:5px;
}
textarea { min-height: 110px; resize:vertical; }

.footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 14px 20px 18px;
  border-top:1px solid var(--brand-border);
}

/* Buttons */
.btn {
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  font-size:1em;
  display:inline-block;
  border:0;
  padding:10px 20px;
  border-radius:var(--radius);
  font-weight:800;
  cursor:pointer;
  background: var(--brand-text);
  color:#fff;
  text-decoration:none;
}

/* ✅ Hover-Zoom & Schatten */
.btn:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 14px rgba(0,0,0,0.15);
}

/* ✅ leichtes Eindrücken beim Klick */
.btn:active {
  transform: scale(0.97);
}

.btnright { position:absolute; right:0px; }

h3 {
  font-weight: normal;
  font-size: 1.3em;
  text-align: center;
  margin:0;
  color: var(--brand-text);
}

/* Konfetti (SVG-Fallback) */
svg.confetti { width:100%; max-width:560px; margin:18px auto; display:block; }
.confetti rect,.confetti circle,.confetti polygon{ fill: var(--confetti); }
.fall{ animation: fall 2200ms ease-in forwards }
.fall:nth-child(2){ animation-delay:120ms }
.fall:nth-child(3){ animation-delay:240ms }
.fall:nth-child(4){ animation-delay:360ms }
.fall:nth-child(5){ animation-delay:480ms }
@keyframes fall{
  0%{transform:translateY(-40px) rotate(0deg);opacity:0}
  10%{opacity:1}
  100%{transform:translateY(180px) rotate(340deg);opacity:0}
}

/* Barrierefreiheit: reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
  .option-btn, .btn { transition: none; }
  .option-btn:hover, .btn:hover, .btn:active { transform: none; box-shadow: none; }
}