/* Einrichtungsformular V2 — Gestaltung wie V1, Farben und Schrift von automatiks.io */

/* Alan Sans liegt im eigenen Ordner (SIL Open Font License, siehe fonts/OFL.txt).
   Eine Datei je Zeichenbereich, alle Schnitte von 300 bis 900 stecken darin. */
@font-face {
  font-family:"Alan Sans"; font-style:normal; font-weight:300 900; font-display:swap;
  src:url("../fonts/alan-sans-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family:"Alan Sans"; font-style:normal; font-weight:300 900; font-display:swap;
  src:url("../fonts/alan-sans-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --blue:#4285F4; --blue-strong:#2F6BD8; --blue-soft:#EAF1FE;
  --ink:#1B2430; --muted:#5C6572; --faint:#8A93A0;
  --surface:#FFFFFF; --surface-2:#F5F7FA;
  --line:#E6E9EE; --line-strong:#D7DCE3;
  --danger:#C0392B; --ok:#16A34A; --ok-bg:#E8F7EE; --warn:#B45309; --warn-bg:#FCF1E2;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:"Alan Sans","Helvetica Neue",system-ui,sans-serif;
  color:var(--ink); background:var(--surface-2);
  font-size:16px; line-height:1.55; -webkit-text-size-adjust:100%;
  overflow-wrap:break-word;
}
[hidden] { display:none !important; }
.wrap { max-width:760px; margin:0 auto; padding:0 20px 80px; }

header.top { background:var(--surface); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:1100; }
header.top .inner { max-width:760px; margin:0 auto; padding:14px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand { color:var(--blue); font-weight:800; font-size:18px; letter-spacing:-0.02em; }
.empf { font-size:13px; color:var(--muted); text-align:right; min-width:0; }
.empf b { color:var(--ink); }
.balken { height:3px; background:var(--line); }
.balken > i { display:block; height:100%; width:0; background:var(--blue);
  transition:width .35s ease; }

.intro { padding:36px 0 8px; }
h1 { font-size:30px; font-weight:800; letter-spacing:-0.03em; line-height:1.15; }
.lead { color:var(--muted); margin-top:10px; font-size:17px; }

/* Fortschritt: vier Abschnitte, sichtbar erledigt oder offen */
.schritte { list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.schritte a { display:inline-flex; align-items:center; gap:8px; min-height:40px;
  padding:6px 14px 6px 8px; border:1px solid var(--line-strong); border-radius:999px;
  background:var(--surface); color:var(--muted); font-size:14px; font-weight:600;
  text-decoration:none; }
.schritte .nr { width:24px; height:24px; border-radius:50%; background:var(--surface-2);
  color:var(--muted); display:inline-grid; place-items:center; font-size:13px; font-weight:800; }
.schritte li.erledigt a { border-color:var(--blue); color:var(--blue-strong); background:var(--blue-soft); }
.schritte li.erledigt .nr { background:var(--blue); color:#fff; }
.fortschrittText { color:var(--faint); font-size:13.5px; margin-top:10px; }

fieldset { border:1px solid var(--line); background:var(--surface);
  border-radius:14px; padding:24px; margin-top:22px; min-width:0; scroll-margin-top:76px; }
legend { font-weight:800; font-size:19px; letter-spacing:-0.02em;
  padding:0 8px; margin-left:-8px; }
.hint { color:var(--muted); font-size:14px; margin-top:6px; }
.hint.grenze { margin-top:14px; }
.feld { margin-top:20px; min-width:0; }
.feld > label, .gruppe > .lab {
  display:block; font-weight:600; font-size:15px; margin-bottom:6px; }
.feld .sub { color:var(--faint); font-size:13.5px; margin-bottom:8px; }
input[type=text], input[type=email], input[type=tel], input[type=number], textarea {
  width:100%; font:inherit; font-size:16px; color:var(--ink);
  background:var(--surface); border:1px solid var(--line-strong);
  border-radius:9px; padding:11px 13px; outline:none; min-width:0;
}
input:focus, textarea:focus {
  border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-soft); }
textarea { min-height:88px; resize:vertical; }
.zwei { display:flex; gap:14px; flex-wrap:wrap; }
.zwei > * { flex:1 1 200px; min-width:0; }
.zwei > .feld { margin-top:20px; }

.wahl { display:flex; gap:10px; flex-wrap:wrap; margin-top:4px; }
.wahl label { display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  border:1px solid var(--line-strong); border-radius:999px; min-height:40px;
  padding:8px 14px; font-size:14.5px; background:var(--surface); user-select:none; }
.wahl label:has(input:checked) {
  border-color:var(--blue); background:var(--blue-soft); color:var(--blue-strong);
  font-weight:600; }
.wahl input { accent-color:var(--blue); width:16px; height:16px; flex:none; }
/* „Keine Einschränkung" steht für sich unter den Branchen. */
.wahl.allein { margin-top:10px; }

.karten { display:flex; gap:12px; flex-wrap:wrap; margin-top:4px; }
.karten label { flex:1 1 220px; cursor:pointer; border:1px solid var(--line-strong);
  border-radius:12px; padding:14px 16px; background:var(--surface); min-width:0; }
.karten label:has(input:checked) { border-color:var(--blue); background:var(--blue-soft); }
.karten .kt { font-weight:700; font-size:15px; display:flex; align-items:center; gap:9px; }
.karten .kb { color:var(--muted); font-size:13.5px; margin-top:4px; display:block; }
.karten input { accent-color:var(--blue); width:16px; height:16px; flex:none; }

.pflicht::after { content:" *"; color:var(--blue); }
.fehler { color:var(--danger); font-size:13.5px; margin-top:6px; display:none; }
.feld.fehlerhaft input, .feld.fehlerhaft textarea { border-color:var(--danger); }
.feld.fehlerhaft .fehler { display:block; }
/* Fehlt etwas an einem Gebiet, wird sein Kasten markiert, nicht das Suchfeld. */
.feld[data-feld="gebiete"].fehlerhaft input { border-color:var(--line-strong); }

/* Gebiete und Karte */
.gebiete { list-style:none; display:flex; flex-direction:column; gap:14px; }
.gebiet { border:1px solid var(--line-strong); border-radius:12px; padding:16px;
  background:var(--surface-2); min-width:0; }
.gebiet.fehlerhaft { border-color:var(--danger); }
.gebiet.aktiv { border-color:var(--blue); background:var(--surface);
  box-shadow:0 1px 2px rgba(16,23,37,.05), 0 2px 8px rgba(16,23,37,.05); }
.gebietKopf { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.gebietWahl { font:inherit; font-weight:700; font-size:15.5px; color:var(--ink);
  background:none; border:0; cursor:pointer; display:flex; align-items:center; gap:9px;
  min-width:0; flex:1 1 160px; text-align:left; min-height:40px; }
.gebietWahl .punkt { width:24px; height:24px; border-radius:50%; flex:none;
  border:2px solid #fff; box-shadow:0 1px 4px rgba(27,36,48,.4);
  display:inline-grid; place-items:center; font-size:12px; font-weight:800; color:#fff; }
.gebietName { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.marke { font-size:12.5px; font-weight:700; border-radius:999px; padding:3px 10px;
  background:var(--warn-bg); color:var(--warn); flex:none; }
.marke.gut { background:var(--ok-bg); color:var(--ok); }
.gebietWeg, .klein { font:inherit; font-size:13.5px; font-weight:700; color:var(--muted);
  background:var(--surface); border:1px solid var(--line-strong); border-radius:999px;
  padding:8px 14px; cursor:pointer; min-height:40px; flex:none; }
.klein.stark { color:#fff; background:var(--blue); border-color:var(--blue); }
.gebietZeile { color:var(--muted); font-size:13.5px; margin-top:6px; }
.gebietZeile.achtung { color:var(--warn); font-weight:600; }
.vorschlagLeiste { margin-top:10px; padding:10px 12px; border-radius:10px;
  background:var(--blue-soft); display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  font-size:14px; color:var(--ink); }
.vorschlagLeiste span { flex:1 1 180px; min-width:0; }
.vorschlagLeiste.fehlerhaft { background:#FBEAEA; color:var(--danger); font-weight:600; }
.versetzt { margin-top:10px; padding:10px 12px; border-radius:10px; background:var(--warn-bg);
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:14px; color:var(--ink); }
.versetzt span { flex:1 1 180px; min-width:0; }
.kartenleiste { display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
.kartenleiste .klein.aktiv { color:#fff; background:var(--blue); border-color:var(--blue); }
#karte.versetzen { cursor:crosshair; outline:3px solid var(--blue); outline-offset:-3px; }
.vonBis { display:flex; align-items:center; gap:10px; font-weight:600; font-size:14.5px; color:var(--muted); }
.vonBis input { flex:1 1 auto; }
.kleinLab { display:block; font-size:13px; font-weight:600; color:var(--muted); margin:14px 0 6px; }
.suchzeile { display:flex; gap:8px; flex-wrap:wrap; }
.suchzeile input { flex:1 1 160px; }
.suchknopf { font:inherit; font-weight:700; font-size:14.5px; color:#fff; background:var(--blue);
  border:0; border-radius:9px; padding:0 18px; min-height:46px; cursor:pointer; flex:none; }
.suchknopf:disabled { background:var(--faint); cursor:default; }
.suchmeldung { color:var(--muted); font-size:13.5px; margin-top:8px; }
.treffer { list-style:none; display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.treffer button { font:inherit; width:100%; text-align:left; cursor:pointer; min-height:46px;
  background:var(--surface); border:1px solid var(--line-strong); border-radius:9px;
  padding:8px 12px; min-width:0; display:block; }
.treffer button:hover { border-color:var(--blue); }
.treffer b { display:block; font-size:14.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.treffer span { display:block; font-size:12.5px; color:var(--faint);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.radiuszeile { display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  margin-top:16px; font-size:14px; font-weight:600; color:var(--muted); }
.radiusWert { font-size:22px; font-weight:800; color:var(--blue-strong); letter-spacing:-0.02em; }
.radiusRegler { display:flex; align-items:center; gap:10px; margin-top:6px; }
.radiusRegler input[type=range] { flex:1 1 auto; min-width:0; accent-color:var(--blue); height:40px; }
.schritt { font:inherit; font-size:20px; font-weight:800; line-height:1; color:var(--blue-strong);
  width:44px; height:44px; border-radius:50%; border:1px solid var(--line-strong);
  background:var(--surface); cursor:pointer; flex:none; }
.radiusGrenzen { display:flex; justify-content:space-between; font-size:12.5px; color:var(--faint);
  padding:0 54px; }
.mehr { font:inherit; font-weight:700; font-size:14.5px; color:var(--blue-strong); width:100%;
  background:var(--surface); border:2px dashed var(--line-strong); border-radius:12px;
  padding:13px 16px; margin-top:12px; cursor:pointer; min-height:48px; }
.mehr:disabled { color:var(--faint); cursor:default; border-style:solid; }
.karteRahmen { margin-top:16px; border:1px solid var(--line-strong); border-radius:12px;
  overflow:hidden; }
#karte { height:340px; width:100%; background:var(--surface-2); }
.kartenhinweis { color:var(--muted); font-size:13px; margin-top:8px; }
.pinEtikett { position:absolute; left:50%; transform:translateX(-50%); white-space:nowrap;
  font-family:"Alan Sans",system-ui,sans-serif; font-weight:700; font-size:13px; color:var(--ink);
  text-shadow:0 0 4px #fff,0 0 4px #fff,0 0 4px #fff; pointer-events:none; }
.pinPunkt { border-radius:50%; border:2px solid #fff; box-shadow:0 1px 4px rgba(27,36,48,.45);
  box-sizing:border-box; display:flex; align-items:center; justify-content:center; color:#fff;
  font-family:"Alan Sans",system-ui,sans-serif; font-weight:800; font-size:12px; line-height:1; }

/* Angebot annehmen */
.paket { border:1px solid var(--line-strong); border-radius:12px; overflow:hidden; margin-top:16px; }
.position { display:flex; gap:14px; justify-content:space-between; padding:14px 16px;
  border-bottom:1px solid var(--line); }
.position .was { font-weight:700; font-size:15px; min-width:0; }
.position .wozu { display:block; font-weight:400; font-size:13.5px; color:var(--muted); margin-top:3px; }
.position .preis { text-align:right; flex:none; white-space:nowrap; font-weight:800;
  font-size:18px; color:var(--blue-strong); }
.position .takt { display:block; font-weight:400; font-size:13px; color:var(--muted); }
.bedingungen { padding:6px 16px 10px; background:var(--surface-2); }
.bedingungen div { display:flex; gap:12px; padding:7px 0; font-size:14px;
  border-bottom:1px solid var(--line); }
.bedingungen div:last-child { border-bottom:0; }
.bedingungen dt { flex:0 0 132px; font-weight:700; }
.bedingungen dd { flex:1 1 auto; min-width:0; color:var(--muted); }
.unterlagen { display:flex; gap:6px 22px; flex-wrap:wrap; margin-top:8px; }
.pdfLink { display:inline-flex; align-items:center; min-height:44px; font-weight:700; color:var(--blue-strong); }
.preiszeile { margin-top:18px; padding:12px 16px; border-radius:12px; background:var(--surface-2);
  border:1px solid var(--line-strong); font-size:15px; font-weight:600; }
.preiszeile + .feld { margin-top:12px; }
/* Der Satz, der angenommen wird: Kästchen links, Text daneben, ruhig gesetzt. */
.feld > label.haekchen { display:flex; font-weight:500; margin-bottom:0; }
.auftrag { text-align:left; max-width:560px; margin:16px auto 0; padding-left:22px; color:var(--muted); }
.auftrag li { margin-top:8px; }
ul.auftrag { list-style:none; padding-left:0; text-align:center; }
.haekchen { display:flex; gap:12px; align-items:flex-start; cursor:pointer; font-size:15px;
  border:1px solid var(--line-strong); border-radius:12px; padding:14px 16px; }
.haekchen:has(input:checked) { border-color:var(--blue); background:var(--blue-soft); }
.haekchen input { accent-color:var(--blue); width:20px; height:20px; flex:none; margin-top:2px; }
.feld.fehlerhaft .haekchen { border-color:var(--danger); }

.aktion { margin-top:26px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
button.senden { font:inherit; font-weight:700; font-size:16px; color:#fff;
  background:var(--blue); border:0; border-radius:10px; padding:14px 26px; cursor:pointer;
  min-height:50px; }
button.senden:hover { background:var(--blue-strong); }
button.senden:disabled { background:var(--faint); cursor:default; }
.stand { font-size:13.5px; color:var(--faint); flex:1 1 220px; min-width:0; }
.stand.achtung { color:var(--danger); }

.zustand, .fertig { background:var(--surface); border:1px solid var(--line);
  border-radius:14px; padding:40px 28px; margin-top:30px; text-align:center; }
.zustand h1, .zustand h2, .fertig h2 { font-size:24px; letter-spacing:-0.02em; line-height:1.2; }
.zustand p, .fertig p { color:var(--muted); margin-top:10px; }
.zustand a, .fertig a { color:var(--blue-strong); font-weight:600; }
.zustand .senden { margin-top:18px; }
.haken { width:52px; height:52px; border-radius:50%; background:var(--blue-soft);
  color:var(--blue); display:grid; place-items:center; margin:0 auto 16px;
  font-size:26px; font-weight:800; }

footer.foot { color:var(--faint); font-size:13px; margin-top:34px; text-align:center; line-height:1.9; }
footer.foot a { color:var(--muted); }

@media (max-width:560px) {
  h1 { font-size:24px; } fieldset { padding:18px; } .wrap { padding:0 14px 60px; }
  header.top .inner { padding:12px 14px; }
  #karte { height:280px; }
  .gebiet { padding:14px; }
  .position { flex-direction:column; gap:6px; }
  .position .preis { text-align:left; }
  .position .takt { display:inline; margin-left:6px; }
  .bedingungen div { flex-direction:column; gap:2px; }
  .bedingungen dt { flex:none; }
  .radiusGrenzen { padding:0 54px; }
  .zustand, .fertig { padding:32px 20px; }
  .aktion .senden { width:100%; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; } .balken > i { transition:none; }
}