/* ══════════════════════════════════════════════════════════════════════
   „Gemeinde anlegen" - das öffentliche Gesicht, Farbwelt „Tanne".
   Bewusst NICHT der Werkbank-Stil der Verwaltung: Wer hier ankommt, ist
   noch kein Kunde und soll die Landingpage wiedererkennen, von der er kam.
   Große Farbflächen, radius 2px, keine Schatten, keine Verläufe, keine
   Symbolbildchen.
   ══════════════════════════════════════════════════════════════════ */
:root{
  --tanne:#1d5b46; --tief:#143f31; --mittel:#267056; --hell:#389072;
  --sand:#f0eeea; --papier:#faf9f7; --linie:#ddd8d0;
  --tinte:#171512; --grau:#6f6a62; --warn:#8a3b22;
  --disp:'Bebas Neue','Oswald',Arial,sans-serif;
  --text:'Manrope','Avenir Next','Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--papier);color:var(--tinte);
  font-family:var(--text);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--disp);font-weight:400;letter-spacing:1.5px;margin:0}
p{margin:0 0 16px}
.mitte{max-width:1120px;margin:0 auto;padding:0 26px}

/* ── Kopf ─────────────────────────────────────────────────────────── */
.kopf{background:var(--tanne);color:#fff}
.kopfband{display:flex;align-items:center;gap:26px;height:66px}
.marke{font-family:var(--disp);font-size:25px;letter-spacing:3.4px;text-decoration:none;color:#fff}
.marke span{opacity:.55}
.kopf .raus{margin-left:auto;font-size:15px;opacity:.75;color:#fff;text-decoration:none}
.kopf .raus:hover{opacity:1}

/* ── Fortschritt ──────────────────────────────────────────────────── */
/* 🔴 overflow-x + nowrap + flex:none: Fünf Stufen nebeneinander schoben
   die Seite bei 390 px auf 532 px quer. Querscroll bei 1440/900/390
   immer nachmessen. */
.leiter{background:var(--tief);color:#fff}
.stufen{display:flex;overflow-x:auto;white-space:nowrap}
.stufe{padding:15px 22px;font-family:var(--disp);font-size:15px;letter-spacing:2px;
  opacity:.42;border-left:1px solid rgba(255,255,255,.12);flex:none}
.stufe:first-child{border-left:0}
.stufe .nr{opacity:.6;margin-right:9px}
.stufe.jetzt{opacity:1;background:var(--mittel)}
.stufe.fertig{opacity:.8}

/* ── Bühne ────────────────────────────────────────────────────────── */
.buehne{padding:54px 0 30px}
.kicker{font-family:var(--disp);font-size:15px;letter-spacing:3px;color:var(--grau);margin:0 0 12px}
.buehne h1{font-size:clamp(34px,5vw,54px);line-height:1;letter-spacing:1.6px;margin-bottom:16px}
.beisatz{font-size:19px;max-width:60ch;color:#33302b}

.karte{background:#fff;border:1px solid var(--linie);border-radius:2px;padding:32px}
.zweispalt{display:grid;grid-template-columns:1fr 340px;gap:26px;align-items:start;padding-bottom:70px}
@media (max-width:900px){.zweispalt{grid-template-columns:1fr}}

label{display:block;font-family:var(--disp);font-size:15px;letter-spacing:1.8px;
  margin:0 0 7px;color:#3d3931}
input[type=text],input[type=email],input[type=password],select{
  width:100%;padding:13px 14px;border:1px solid var(--linie);border-radius:2px;
  font-family:var(--text);font-size:17px;background:var(--papier);color:var(--tinte)}
input:focus,select:focus{outline:2px solid var(--hell);outline-offset:-1px;background:#fff}
.feld{margin-bottom:22px}
.hinweis{font-size:15px;color:var(--grau);margin:7px 0 0}
.paar{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:620px){.paar{grid-template-columns:1fr}}

/* Adresse mit angehängter Endung */
.adresse{display:flex;align-items:stretch}
.adresse input{border-radius:2px 0 0 2px;border-right:0}
.adresse .endung{display:flex;align-items:center;padding:0 14px;background:var(--sand);
  border:1px solid var(--linie);border-radius:0 2px 2px 0;color:var(--grau);white-space:nowrap}
.frei{color:var(--tanne);font-weight:600}
.belegt{color:var(--warn);font-weight:600}

/* Nebenspalte */
.neben{background:var(--sand);border:1px solid var(--linie);border-radius:2px;padding:26px}
.neben h3{font-size:22px;letter-spacing:2px;margin-bottom:14px}
.neben p{font-size:16px}

/* Knöpfe */
.tun{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:30px}
.knopf{display:inline-block;font-family:var(--disp);font-size:17px;letter-spacing:2px;
  padding:13px 30px;border:2px solid var(--tanne);background:var(--tanne);color:#fff;
  text-decoration:none;border-radius:2px;cursor:pointer}
.knopf:hover{background:var(--tief);border-color:var(--tief)}
.knopf.linie{background:transparent;color:var(--tanne)}
.knopf.linie:hover{background:transparent;border-color:var(--tief);color:var(--tief)}

/* Häkchen */
.haken{display:flex;gap:12px;align-items:flex-start;margin:0 0 16px;font-size:16px}
.haken input{margin-top:5px;width:18px;height:18px;flex:none;accent-color:var(--tanne)}
.haken label{font-family:var(--text);font-size:16px;letter-spacing:0;color:var(--tinte);margin:0}
.haken a{color:var(--tanne)}

/* Zusammenfassung */
.prueft{border-top:1px solid var(--linie);padding:14px 0;display:grid;
  grid-template-columns:220px 1fr auto;gap:14px;align-items:baseline}
@media (max-width:620px){.prueft{grid-template-columns:1fr}}
.prueft .was{font-family:var(--disp);font-size:15px;letter-spacing:1.8px;color:var(--grau)}
.prueft .wert{font-size:17px}
.prueft .aendern{font-size:15px;color:var(--tanne);text-decoration:underline;cursor:pointer}

/* Beanstandungen */
.klemmt{border-left:4px solid var(--warn);background:#fdf6f2;padding:16px 20px;margin:0 0 26px}
.klemmt b{font-family:var(--disp);font-size:15px;letter-spacing:2px;color:var(--warn);
  display:block;margin-bottom:6px}
.klemmt ul{margin:0;padding-left:20px}
.klemmt li{margin:4px 0}

/* Großes Farbfeld für Post- und Fertigmeldung */
.feld_gross{background:var(--tief);color:#fff;border-radius:2px;padding:38px;text-align:center}
.feld_gross h2{font-size:34px;letter-spacing:2px;margin-bottom:14px}
.feld_gross p{max-width:54ch;margin:0 auto 14px;opacity:.92}
.feld_gross .adr{font-family:var(--disp);font-size:24px;letter-spacing:1.6px;
  background:rgba(255,255,255,.12);display:inline-block;padding:9px 18px;border-radius:2px;
  margin:6px 0 18px;word-break:break-all}
.feld_gross a{color:#fff}
.feld_gross .knopf{background:var(--papier);border-color:var(--papier);color:var(--tinte)}
.feld_gross .knopf:hover{background:#fff;border-color:#fff}

/* Fuß */
.fuss{background:var(--tanne);color:#fff;padding:34px 0;margin-top:20px;font-size:15px}
.fuss a{color:#fff}
.fuss .zeile{display:flex;gap:22px;flex-wrap:wrap;align-items:baseline}
.fuss .rechts{margin-left:auto;opacity:.7}

/* Ohne JavaScript sind alle Schritte sichtbar - die Strecke bleibt
   benutzbar, sie wird nur länger. */
.schritt{display:block}
body.mitjs .schritt{display:none}
body.mitjs .schritt.zeig{display:block}