:root{
  --brand:#b00248;
  --brand2:#ff4d91;
  --ink:#151515;
  --muted:#6b7280;

  --border: rgba(17,24,39,.10);
  --card: rgba(255,255,255,.86);
  --glass: rgba(255,255,255,.68);

  --shadow: 0 18px 55px rgba(0,0,0,.10);
  --shadow2: 0 10px 28px rgba(0,0,0,.08);

  --radius: 24px;
}

*{ box-sizing:border-box; }

body{
  font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ink);
}

.bg-app{
  background:
    radial-gradient(900px 500px at 10% -10%, rgba(176,2,72,.16), transparent 55%),
    radial-gradient(800px 500px at 100% 0%, rgba(255,77,145,.12), transparent 55%),
    radial-gradient(700px 450px at 0% 100%, rgba(176,2,72,.06), transparent 60%),
    #f6f7fb;
}

a{ color: var(--brand); text-decoration:none; }
a:hover{ color:#8e0038; text-decoration:underline; }

.fw-800{ font-weight:800 !important; }
.fw-900{ font-weight:900 !important; }

/* Topbar */
.topbar{
  background: rgba(246,247,251,.76);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.logo img{ width:100px; height:auto; display:block; }

.collage img{
  float: left;
  width:40%;
  height:auto;
  margin:-5px 25px 25px 0;
  border-radius: calc(var(--radius) - 8px);
  display:block;
}

/* Cards */
.card-ui{
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
}

.card-hero{
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.72));
}

.card-soft{
  border: 1px solid rgba(176,2,72,.14);
  border-radius: calc(var(--radius) - 8px);
  background: rgba(176,2,72,.04);
}

/* Pills */
.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .4px;
  text-transform: uppercase;
  border: 1px solid transparent;
}
.pill-brand{ color: var(--brand); background: rgba(176,2,72,.10); border-color: rgba(176,2,72,.18); }
.pill-ok{ color:#0f766e; background: rgba(16,185,129,.12); border-color: rgba(16,185,129,.25); }
.pill-warn{ color:#92400e; background: rgba(245,158,11,.14); border-color: rgba(245,158,11,.25); }

/* Progress */
.progress-ui{
  height: 10px;
  border-radius: 999px;
  background: rgba(17,24,39,.08);
  overflow:hidden;
}
.progress-ui .progress-bar{
  background: linear-gradient(90deg, var(--brand), var(--brand2));
}

/* Dots */
.dots{ display:flex; gap:10px; }
.dot{
  width: 12px; height: 12px;
  border-radius: 999px;
  border: 1px solid rgba(176,2,72,.25);
  background: rgba(176,2,72,.10);
  padding:0;
}
.dot.is-active{
  background: var(--brand);
  border-color: var(--brand);
  box-shadow: 0 0 0 6px rgba(176,2,72,.12);
}

/* ✅ Wizard: echte Slides – keine Nachbarn sichtbar */
#wizardCard,
.wizard-viewport{
  overflow:hidden;
  border-radius: inherit;
}

/* optionaler Scroll-Anker (bei dir im HTML als <div class="wizard-anchor" ...>) */
.wizard-anchor{ height:1px; scroll-margin-top: 96px; }

/* Track + Steps */
.wizard-track{
  display:flex;
  flex-wrap: nowrap;
  width: 100%;
  transform: translateX(0%);
  transition: transform 360ms cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}

.wizard-step{
  flex: 0 0 100%;
  width: 100%;
  padding: 6px 2px 0 2px;
}

/* ✨ Mehr vertikaler Rhythmus je Step */
.wizard-step{
  padding: 12px 16px 12px 16px; /* oben | seitlich | unten */
}

/* Head & Inhalt klar trennen */
.step-head{
  display: flex;
  flex-direction: column;
  justify-content: center; /* vertikal */
  min-height: 96px;        /* anpassen nach Geschmack */
}

/* Karten innerhalb eines Steps etwas atmen lassen */
.wizard-step .card,
.wizard-step .card-soft{
  margin-top: 16px;
}

/* Actions optisch absetzen */
.step-actions{
  margin-top: 28px;
}

/* Step header & actions */
.step-head{ padding: 6px 4px 0 4px; }

.kicker{
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-size: 12px;
  color: rgba(176,2,72,.9);
  margin-bottom: 6px;
}

.step-actions{
  display:flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(17,24,39,.10);
}

/* Tiles */
.tile{ display:block; cursor:pointer; }
.tile input{ display:none; }

.tile-body{
  height: 100%;
  border-radius: calc(var(--radius) - 10px);
  border: 1px solid rgba(17,24,39,.10);
  background: rgba(255,255,255,.88);
  padding: 16px;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.tile:hover .tile-body{
  transform: translateY(-2px);
  box-shadow: var(--shadow2);
  border-color: rgba(176,2,72,.28);
}

.tile input:checked + .tile-body{
  border-color: rgba(176,2,72,.55);
  box-shadow: 0 18px 45px rgba(176,2,72,.18);
}

/* Inputs */
.form-control-ui,
.form-select.form-control-ui{
  border-radius: 18px !important;
  border: 1px solid rgba(17,24,39,.14) !important;
  background: rgba(255,255,255,.92) !important;
  box-shadow: 0 1px 0 rgba(17,24,39,.02);
  padding-top: 1.25rem;
  padding-bottom: .75rem;
}

/* Floating label “ghost float” fix */
.form-floating > .form-control-ui,
.form-floating > .form-select.form-control-ui{
  height: calc(3.5rem + 2px);
  line-height: 1.25;
  padding: 1.05rem .95rem .55rem .95rem;
}

.form-floating > label{
  color: rgba(107,114,128,.95);
  font-weight: 700;
  padding: 1.05rem .95rem;
}

.form-floating > .form-control-ui:focus,
.form-floating > .form-select.form-control-ui:focus{
  border-color: rgba(176,2,72,.55) !important;
  box-shadow: 0 0 0 .25rem rgba(176,2,72,.14) !important;
}

.form-text{ color: rgba(107,114,128,.95); }

/* Buttons */
.btn{
  border-radius: 999px !important;
  font-weight: 900 !important;
  letter-spacing: .2px;
}

.btn-lg{ padding: .85rem 1.15rem; }

.btn-ui{
  background: rgba(17,24,39,.04);
  border: 1px solid rgba(17,24,39,.12);
  color: rgba(17,24,39,.86);
}
.btn-ui:hover{
  background: rgba(17,24,39,.06);
  border-color: rgba(17,24,39,.18);
}

.btn-brand{
  border: 0 !important;
  color: #fff !important;
  background: linear-gradient(135deg, var(--brand), var(--brand2)) !important;
  box-shadow: 0 16px 35px rgba(176,2,72,.22);
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn-brand:hover{
  transform: translateY(-1px);
  box-shadow: 0 22px 44px rgba(176,2,72,.26);
}
.btn-brand:active{ transform: translateY(0); }

/* Pill radios */
.btn-pill{
  border-radius: 999px !important;
  border: 1px solid rgba(17,24,39,.12) !important;
  background: rgba(255,255,255,.80) !important;
  color: rgba(17,24,39,.88) !important;
  padding: .65rem .95rem;
}
.btn-check:checked + .btn-pill{
  border-color: rgba(176,2,72,.55) !important;
  background: rgba(176,2,72,.10) !important;
  color: var(--brand) !important;
  box-shadow: 0 0 0 .25rem rgba(176,2,72,.10);
}

/* Switch / Checkbox */
.switch-ui .form-check-input{ width:54px; height:30px; }
.switch-ui .form-check-input:checked{ background-color: var(--brand); border-color: var(--brand); }

.check-ui .form-check-input{ border-radius:8px; }
.check-ui .form-check-input:checked{ background-color: var(--brand); border-color: var(--brand); }

/* Alerts */
.alert-ui{
  border-radius: calc(var(--radius) - 8px);
  border: 1px solid rgba(220,38,38,.20);
  box-shadow: var(--shadow2);
}

/* Motion accessibility */
@media (prefers-reduced-motion: reduce){
  .wizard-track{ transition:none; }
  .btn-brand{ transition:none; }
  .tile-body{ transition:none; }
}

/* Mobile */
@media (max-width: 576px){
   .collage img{
      float:none;
	  width:100%;
	  height:auto;
	  margin:20px auto;
	  border-radius: calc(var(--radius) - 8px);
	  display:block;
   }
  .btn-lg{ width: 100%; }
  .step-actions{ flex-direction: column; }
  .dots{ justify-content: center; width: 100%; }
}