/* =====================================================================
   Förderverein FF Kolenfeld – Aufnahmeantrag
   Design: amtlich-warm, Feuerwehr-Rot, serifenbetonte Überschriften.
   Mobil = "Festmodus": ein Schritt pro Bildschirm, riesige Touch-Ziele.
   ===================================================================== */

:root{
  --red:#c0181f; --red-dark:#8f1118; --red-soft:#fbe9e9;
  --ink:#1c1b19; --muted:#6f6b65; --paper:#f6f2ec; --card:#ffffff;
  --line:#e6dfd4; --line-strong:#cfc6b8; --green:#5c8a2f;
  --ok:#2e7d32; --err:#c0181f;
  --shadow:0 10px 40px rgba(40,30,20,.10);
  --radius:16px;
  --font-display:"Fraunces",Georgia,"Times New Roman",serif;
  --font-body:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  background-image:radial-gradient(circle at 12% 8%,rgba(192,24,31,.05),transparent 38%),
                   radial-gradient(circle at 92% 96%,rgba(92,138,47,.05),transparent 42%);
  background-attachment:fixed;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--red);text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- Kopfzeile ---------- */
.site-head{
  display:flex;align-items:center;gap:18px;
  max-width:760px;margin:0 auto;padding:26px 22px 10px;
}
.site-head img{height:64px;width:auto}
.site-head .titles h1{
  font-family:var(--font-display);font-weight:600;font-size:1.5rem;
  letter-spacing:.04em;margin:0;color:#23211e;line-height:1.1;
}
.site-head .titles p{margin:2px 0 0;color:var(--muted);font-size:.9rem}

/* ---------- Karte / Wizard-Rahmen ---------- */
.wrap{max-width:760px;margin:0 auto;padding:8px 22px 60px}
.card{
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);
  overflow:hidden;position:relative;
}
.card::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;
  background:linear-gradient(90deg,var(--red),var(--red-dark))}

/* ---------- Fortschritt ---------- */
.progress{padding:22px 30px 0}
.progress .bar{height:7px;background:var(--line);border-radius:999px;overflow:hidden}
.progress .bar i{display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--red),var(--red-dark));
  border-radius:999px;transition:width .4s cubic-bezier(.4,0,.2,1)}
.progress .lbl{display:flex;justify-content:space-between;margin-top:8px;
  font-size:.78rem;color:var(--muted);letter-spacing:.02em}

/* ---------- Schritte ---------- */
.steps{padding:14px 30px 30px}
.step{display:none;animation:fade .35s ease}
.step.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.step h2{font-family:var(--font-display);font-weight:600;font-size:1.55rem;
  margin:.4em 0 .15em;color:#23211e;letter-spacing:.01em}
.step .sub{color:var(--muted);margin:0 0 18px;font-size:.98rem}

/* ---------- Formularfelder ---------- */
.fields{display:grid;gap:16px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
label.field{display:block}
label.field > span{display:block;font-weight:600;font-size:.85rem;
  color:#4a463f;margin-bottom:6px;letter-spacing:.01em}
label.field .opt{color:var(--muted);font-weight:500}
input[type=text],input[type=email],input[type=tel],input[type=date],input[type=number]{
  width:100%;font-family:inherit;font-size:1.05rem;color:var(--ink);
  padding:14px 14px;border:1.5px solid var(--line-strong);border-radius:11px;
  background:#fffdfa;transition:border-color .15s,box-shadow .15s;
}
input:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 4px var(--red-soft)}
input.invalid{border-color:var(--err);box-shadow:0 0 0 4px var(--red-soft)}
input.valid{border-color:var(--green)}
.hint{font-size:.82rem;margin-top:6px;color:var(--muted)}
.hint.err{color:var(--err)}
.hint.ok{color:var(--ok)}
.hint a{cursor:pointer}

/* ---------- Auswahl-Kacheln (Geschlecht / Beitrag / Ja-Nein) ---------- */
.choices{display:grid;gap:12px;grid-template-columns:repeat(3,1fr)}
.choices.two{grid-template-columns:1fr 1fr}
.choice{
  border:1.5px solid var(--line-strong);border-radius:12px;background:#fffdfa;
  padding:16px 10px;text-align:center;cursor:pointer;font-size:1.05rem;font-weight:600;
  transition:all .15s;user-select:none;
}
.choice:hover{border-color:var(--red)}
.choice.sel{border-color:var(--red);background:var(--red-soft);color:var(--red-dark);
  box-shadow:0 0 0 3px var(--red-soft)}
.choice .big{display:block;font-family:var(--font-display);font-size:1.5rem;line-height:1.1}
.choice .small{display:block;font-size:.78rem;color:var(--muted);font-weight:500;margin-top:3px}
.choice.sel .small{color:var(--red-dark)}

/* ---------- Autocomplete ---------- */
.ac-wrap{position:relative}
.ac-list{position:absolute;z-index:20;left:0;right:0;top:calc(100% + 4px);
  background:#fff;border:1.5px solid var(--line-strong);border-radius:11px;
  box-shadow:var(--shadow);overflow:hidden;display:none}
.ac-list.show{display:block}
.ac-item{padding:12px 14px;cursor:pointer;border-bottom:1px solid var(--line);font-size:.98rem}
.ac-item:last-child{border-bottom:none}
.ac-item:hover,.ac-item.hl{background:var(--red-soft)}
.ac-item .muted{color:var(--muted);font-size:.85rem}

/* ---------- Checkbox-Zeilen ---------- */
.check{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;
  border:1.5px solid var(--line-strong);border-radius:12px;background:#fffdfa;cursor:pointer}
.check input{width:24px;height:24px;margin-top:1px;accent-color:var(--red);flex:none}
.check span{font-size:.95rem;color:#3f3b35}

/* ---------- Übersicht ---------- */
.summary{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.summary .grp{padding:6px 0}
.summary .h{background:var(--red-soft);color:var(--red-dark);font-weight:700;
  padding:8px 14px;font-size:.82rem;letter-spacing:.04em;text-transform:uppercase}
.summary .li{display:flex;justify-content:space-between;gap:14px;padding:9px 14px;
  border-bottom:1px solid var(--line);font-size:.95rem}
.summary .li:last-child{border-bottom:none}
.summary .li .k{color:var(--muted)}
.summary .li .v{font-weight:600;text-align:right}

/* ---------- Navigation / Buttons ---------- */
.nav{display:flex;gap:12px;margin-top:26px}
.btn{font-family:inherit;font-size:1.08rem;font-weight:700;cursor:pointer;
  padding:16px 22px;border-radius:12px;border:none;transition:transform .08s,background .15s;
  display:inline-flex;align-items:center;justify-content:center;gap:9px}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--red);color:#fff;flex:1}
.btn-primary:hover{background:var(--red-dark)}
.btn-primary:disabled{opacity:.45;cursor:not-allowed}
.btn-ghost{background:transparent;color:var(--muted);border:1.5px solid var(--line-strong)}
.btn-ghost:hover{border-color:var(--muted);color:var(--ink)}
.btn-big{font-size:1.25rem;padding:20px 26px}

/* ---------- Intro ---------- */
.intro{text-align:center;padding:14px 6px}
.intro .mark{font-family:var(--font-display);font-size:2.1rem;font-weight:600;
  color:#23211e;margin:8px 0 6px;letter-spacing:.01em}
.intro p{color:var(--muted);max-width:46ch;margin:0 auto 8px}
.intro .perk{display:flex;gap:10px;align-items:center;justify-content:center;
  color:#3f3b35;font-size:.95rem;margin:7px 0}
.intro .perk svg{flex:none;color:var(--red)}

/* ---------- Erfolg ---------- */
.done{text-align:center;padding:20px 8px}
.done .ring{width:84px;height:84px;border-radius:50%;margin:0 auto 16px;
  background:var(--red-soft);display:flex;align-items:center;justify-content:center;color:var(--red)}
.done h2{font-family:var(--font-display)}

/* ---------- Spinner ---------- */
.spin{width:18px;height:18px;border:3px solid rgba(255,255,255,.4);
  border-top-color:#fff;border-radius:50%;animation:rot .7s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}

/* ---------- Fußzeile ---------- */
.foot{max-width:760px;margin:0 auto;padding:6px 22px 40px;text-align:center;
  color:var(--muted);font-size:.8rem}
.foot a{color:var(--muted);text-decoration:underline}

/* =====================================================================
   FESTMODUS – Mobil (≤ 640px): ein Schritt pro Bildschirm, riesig & klar
   ===================================================================== */
@media (max-width:640px){
  body{background:#fff}
  .site-head{padding:16px 16px 6px;gap:12px}
  .site-head img{height:48px}
  .site-head .titles h1{font-size:1.12rem}
  .site-head .titles p{display:none}
  .wrap{padding:4px 12px 24px}
  .card{border-radius:18px;box-shadow:none;border-color:var(--line)}
  .progress{padding:18px 18px 0}
  .progress .bar{height:10px}
  .steps{padding:12px 16px 22px;min-height:64vh;display:flex;flex-direction:column}
  .step.active{display:flex;flex-direction:column;flex:1}
  .step h2{font-size:1.7rem}
  .step .sub{font-size:1.05rem}
  .fields{gap:18px;flex:1}
  .row2{grid-template-columns:1fr;gap:18px}      /* alles untereinander */

  /* Riesen-Eingaben, daumentauglich */
  input[type=text],input[type=email],input[type=tel],input[type=date],input[type=number]{
    font-size:1.25rem;padding:20px 18px;border-radius:14px;border-width:2px}
  .choices{grid-template-columns:1fr;gap:14px}
  .choices.gender{grid-template-columns:1fr}
  .choice{padding:22px 14px;font-size:1.25rem;border-width:2px}
  .choice .big{font-size:2rem}
  .check{padding:18px 16px}
  .check input{width:30px;height:30px}
  .check span{font-size:1.05rem}

  .nav{position:sticky;bottom:0;background:#fff;padding:12px 0 8px;margin-top:18px;
    box-shadow:0 -8px 16px rgba(0,0,0,.05)}
  .btn{font-size:1.3rem;padding:22px 22px;border-radius:15px}
  .ac-item{padding:18px 16px;font-size:1.1rem}
  .summary .li{font-size:1.02rem;padding:12px 14px}
  .intro .mark{font-size:1.9rem}
}

/* Sehr kleine Geräte */
@media (max-width:360px){
  .step h2{font-size:1.45rem}
  .btn{font-size:1.15rem}
}

/* Signatur-Seite */
.sigpad-wrap{border:2px dashed var(--line-strong);border-radius:14px;background:#fffdfa;
  position:relative;touch-action:none}
.sigpad-wrap canvas{display:block;width:100%;height:200px;border-radius:12px;touch-action:none}
.sigpad-wrap .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--line-strong);font-size:1.05rem;pointer-events:none}
.sigpad-wrap.dirty .ph{display:none}
.sig-actions{display:flex;justify-content:flex-end;margin-top:8px}
.link-btn{background:none;border:none;color:var(--muted);cursor:pointer;font-size:.9rem;
  text-decoration:underline;font-family:inherit;padding:6px}
@media (max-width:640px){.sigpad-wrap canvas{height:240px}}

/* === iOS-Fix: Datumsfeld (Geburtsdatum) nicht uebergross darstellen ===
   Diese Zeilen ans ENDE der bestehenden assets/app.css anhaengen. */
input[type=date]{
  -webkit-appearance:none;   /* verhindert die uebergrosse iOS-Darstellung */
  appearance:none;
  min-height:0;
  height:auto;
  line-height:1.2;
}

/* =====================================================================
   Marken-Verlauf statt Rot
   --> Diesen kompletten Block ans ENDE der bestehenden assets/app.css
       anhaengen (nach dem Datumsfeld-Fix). Nichts anderes loeschen.
   ===================================================================== */

:root{
  /* Akzentfarben (Links, Rahmen, Icons) – Marineblau statt Rot */
  --red:#3a486d;
  --red-dark:#2f3a5a;
  --red-soft:#e9ecf3;
  /* Der eigentliche Verlauf */
  --verlauf:linear-gradient(135deg,#903d4f 0%,#3a486d 55%,#4d6ba9 100%);
  --verlauf-quer:linear-gradient(90deg,#903d4f 0%,#3a486d 55%,#4d6ba9 100%);
}

/* Flaechen mit echtem Verlauf */
.card::before{ background:var(--verlauf-quer); }
.progress .bar i{ background:var(--verlauf-quer); }
.btn-primary{ background:var(--verlauf); }
.btn-primary:hover{ background:var(--verlauf); filter:brightness(.93); }
.done .ring{ background:var(--verlauf); color:#fff; }

/* Fehler-Markierung bleibt klar erkennbar (bewusst dezent rot) */
input.invalid{ border-color:#c0181f; box-shadow:0 0 0 4px #fbe9e9; }