/* Darstellung des Leadgenerators. Nur eigene Regeln, keine fremde Bibliothek, keine
   fremde Schrift — der Ordner muss ohne Netz vollstaendig aussehen.
   Dunkle Darstellung mitgedacht ueber prefers-color-scheme. */

:root {
  --grund: #ffffff; --text: #1a1d21; --leise: #5b6470; --linie: #d8dde3;
  --feld: #ffffff; --feldrand: #b9c1cb; --akzent: #0f6f4a; --akzentText: #ffffff;
  --gutGrund: #eef7f2; --gutRand: #0f6f4a;
  --warnGrund: #fdf3e3; --warnRand: #b4771a;
  --fehlerGrund: #fdeded; --fehlerRand: #b02020;
  --pflicht: #0f6f4a; --wichtig: #8a6d1f;
}
@media (prefers-color-scheme: dark) {
  :root {
    --grund: #16191d; --text: #e7ebf0; --leise: #9aa5b1; --linie: #2c3238;
    --feld: #1d2126; --feldrand: #3a424b; --akzent: #2f9d6e; --akzentText: #08130d;
    --gutGrund: #13241c; --gutRand: #2f9d6e;
    --warnGrund: #2a2113; --warnRand: #d2a04a;
    --fehlerGrund: #2a1616; --fehlerRand: #e06464;
    --pflicht: #4bbd8c; --wichtig: #d2a04a;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--grund); color: var(--text);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.huelle { max-width: 54rem; margin: 0 auto; padding: 1.5rem 1.2rem 4rem; }

.warnbalken {
  background: var(--warnGrund); border-bottom: 3px solid var(--warnRand);
  padding: .8rem 1.2rem; font-size: .95rem;
}
.warnbalken code { background: rgba(0,0,0,.08); padding: .1rem .3rem; border-radius: 3px; }

.kopf { border-bottom: 1px solid var(--linie); padding-bottom: .8rem; margin-bottom: 1.5rem; }
.marke { font-weight: 700; font-size: 1.15rem; margin: 0; }
.unterzeile { color: var(--leise); margin: .2rem 0 0; font-size: .95rem; }

h1 { font-size: 1.6rem; line-height: 1.25; margin: 1.5rem 0 1rem; }
h2 { font-size: 1.2rem; margin: 2rem 0 .6rem; }

.gut, .hinweis, .fehler {
  border-left: 4px solid var(--gutRand); background: var(--gutGrund);
  padding: .9rem 1rem; margin: 1.2rem 0; border-radius: 0 4px 4px 0;
}
.hinweis { border-left-color: var(--warnRand); background: var(--warnGrund); }
.fehler  { border-left-color: var(--fehlerRand); background: var(--fehlerGrund); }

fieldset {
  border: 1px solid var(--linie); border-radius: 6px;
  padding: 1rem 1.1rem 1.2rem; margin: 1.5rem 0;
}
legend { font-weight: 700; padding: 0 .4rem; }
.zweigwahl { border-color: var(--akzent); border-width: 2px; }

.feld { margin: 0 0 1.1rem; }
.feld[hidden], .block[hidden] { display: none; }

label, .bez { display: block; font-weight: 600; margin-bottom: .3rem; font-size: .95rem; }
.wahl { font-weight: 400; display: block; margin: .25rem 0; cursor: pointer; }
.wahl input { margin-right: .5rem; }

input[type=text], input[type=tel], input[type=email], select, textarea {
  width: 100%; padding: .55rem .65rem; font: inherit; color: var(--text);
  background: var(--feld); border: 1px solid var(--feldrand); border-radius: 4px;
}
input[type=file] { width: 100%; font: inherit; color: var(--text); padding: .3rem 0; }
textarea { resize: vertical; min-height: 4.5rem; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--akzent); outline-offset: 1px; }
input.err { border-color: var(--fehlerRand); }

/* Pflicht und wichtig haengen am gewaehlten Zweig, nicht am Feld — deshalb setzt die
   Zweigsteuerung diese Klassen und nicht das Markup. */
.ist-pflicht > label::after, .ist-pflicht > .bez::after {
  content: " *"; color: var(--pflicht); font-weight: 700;
}
.ist-wichtig > label::after, .ist-wichtig > .bez::after {
  content: " ·"; color: var(--wichtig);
}

.hilfe { color: var(--leise); font-size: .88rem; margin: .3rem 0 0; font-weight: 400; }
.leise { color: var(--leise); font-size: .9rem; }

.kartenplatz {
  border: 2px dashed var(--feldrand); border-radius: 6px;
  padding: 1rem; margin-bottom: 1.2rem; background: var(--feld);
}
.dateisammlung { border-top: 1px solid var(--linie); margin-top: 1rem; padding-top: 1rem; }

.knopf {
  display: inline-block; background: var(--akzent); color: var(--akzentText);
  border: 0; border-radius: 5px; padding: .8rem 1.4rem;
  font: inherit; font-weight: 700; cursor: pointer;
}
.knopf:hover { filter: brightness(1.08); }
.knopf:disabled { opacity: .55; cursor: default; }

.fuss { border-top: 1px solid var(--linie); margin-top: 3rem; padding-top: 1rem; font-size: .9rem; }
.fuss a { color: var(--akzent); }

.sendeschicht {
  position: fixed; inset: 0; background: rgba(0,0,0,.6);
  display: none; align-items: center; justify-content: center; padding: 1rem;
}
.sendeschicht.on { display: flex; }
.sendekarte {
  background: var(--grund); color: var(--text); border-radius: 8px;
  padding: 1.5rem; max-width: 24rem; width: 100%;
}
.sendetitel { font-weight: 700; margin: 0 0 .8rem; }
.schiene { height: .5rem; background: var(--linie); border-radius: 999px; overflow: hidden; }
.schiene span { display: block; height: 100%; background: var(--akzent); transition: width .2s; }
.sendewert { text-align: right; margin: .3rem 0 .8rem; font-variant-numeric: tabular-nums; }

/* Breites nie ueber den Rand: Tabellen und Codeblocke scrollen in sich. */
table { width: 100%; border-collapse: collapse; }
.scrollt { overflow-x: auto; }

@media (max-width: 34rem) {
  .huelle { padding: 1rem .8rem 3rem; }
  h1 { font-size: 1.35rem; }
  fieldset { padding: .8rem .7rem 1rem; }
}

/* ---------- Flächenmarkierung ----------------------------------------------
   OHNE HÖHE ZEIGT LEAFLET NICHTS. Der Kartenbehälter hat von sich aus Höhe 0, die
   Kacheln werden geladen und sind unsichtbar. Das ist die häufigste Falle bei Leaflet
   und sieht aus wie ein Ladefehler. */
#karte {
  height: 60vh;
  min-height: 22rem;
  border-radius: 6px;
  border: 1px solid var(--feldrand);
}
@media (max-width: 34rem) {
  /* Auf dem Handy mehr Höhe: Einzeichnen braucht Fläche, und wer gerade auf dem Dach
     war, bedient die Karte mit dem Daumen. */
  #karte { height: 70vh; min-height: 20rem; }
}

.kartenfrage {
  background: var(--gutGrund);
  border-left: 4px solid var(--gutRand);
  padding: .9rem 1rem;
  border-radius: 0 4px 4px 0;
}

.flaechen { list-style: none; padding: 0; margin: .8rem 0 0; }
.flaechen li {
  padding: .45rem .6rem;
  border: 1px solid var(--linie);
  border-radius: 4px;
  margin-bottom: .35rem;
  font-size: .95rem;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  align-items: center;
}
.flaechen .weg {
  margin-left: auto;
  background: none;
  border: 1px solid var(--feldrand);
  color: var(--leise);
  border-radius: 4px;
  padding: .15rem .5rem;
  font: inherit;
  font-size: .85rem;
  cursor: pointer;
}
.flaechen .weg:hover { border-color: var(--fehlerRand); color: var(--fehlerRand); }

/* Leaflet zeichnet seine Bedienelemente mit eigenen Farben. Die Beschriftung der
   Maßstabsleiste und der Herkunftsangabe muss auch im dunklen Bild lesbar bleiben. */
.leaflet-control-attribution {
  background: rgba(255,255,255,.85) !important;
  color: #1a1d21 !important;
  font-size: .72rem !important;
}
.leaflet-control-attribution a { color: #0f6f4a !important; }

/* ---------- Fragesektion: eine Frage je Bildschirm -------------------------
   Anordnung des Inhabers 19.10.2026: „dh eine kleine fragesection." Sie soll klein
   wirken — nicht wie ein Formular, sondern wie eine Frage. */
.fragesektion {
  border: 2px solid var(--akzent);
  border-radius: 8px;
  padding: 0 1.1rem 1.1rem;
  margin: 1.5rem 0;
  background: var(--feld);
}
.fragesektion[hidden] { display: none; }

.frageschiene {
  height: .35rem;
  background: var(--linie);
  border-radius: 0 0 999px 999px;
  margin: 0 -1.1rem 1rem;
  overflow: hidden;
}
.fragebalken {
  display: block;
  height: 100%;
  background: var(--akzent);
  transition: width .25s;
}

.fragekopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .6rem;
  margin: 0 0 .9rem;
  font-size: .85rem;
}
.fragezahl { font-weight: 700; color: var(--leise); }
.fragestufe { color: var(--leise); font-style: italic; }

/* Das Feld in der Fragesektion wirkt größer als im Bogen — es ist die einzige Frage,
   die gerade zählt. */
.fragefeld .feld { margin-bottom: 0; }
.fragefeld label, .fragefeld .bez {
  font-size: 1.12rem;
  line-height: 1.4;
  margin-bottom: .6rem;
}
.fragefeld .wahl { font-size: 1rem; padding: .3rem 0; }
.fragefeld input[type=text], .fragefeld input[type=tel],
.fragefeld input[type=email], .fragefeld select, .fragefeld textarea {
  font-size: 1.05rem;
  padding: .7rem .75rem;
}

.fragetasten {
  display: flex;
  gap: .6rem;
  margin: 1.2rem 0 0;
}
.fragetasten .weiter { flex: 1; }
.leise-knopf {
  background: none;
  color: var(--text);
  border: 1px solid var(--feldrand);
}
.leise-knopf:hover { filter: none; border-color: var(--akzent); }
.leise-knopf:disabled { opacity: .4; }

.absenden-platz {
  border-top: 1px solid var(--linie);
  margin-top: 1.2rem;
  padding-top: 1rem;
}