/* Netzanmeldungs-Werkzeug (/netzanmeldung). Baut auf css/style.css auf. */

.tool { max-width: 880px; display: grid; gap: 1.6rem; }
.tool .form-card { box-shadow: var(--shadow-md); }
.tool [hidden] { display: none !important; }

.field-row--strasse { grid-template-columns: 3fr 1fr; }
.field-row--ort     { grid-template-columns: 1fr 2fr 2fr; }
.field-row--plzort  { grid-template-columns: 1fr 3fr; }

.tool .field input[readonly] { background: var(--bg-tint); color: var(--ink-soft); }
.feld-hinweis { font-size: .84rem; color: var(--ink-mute); margin: .45rem 0 0; line-height: 1.5; }
.tool .consent { align-items: center; margin-bottom: 1.1rem; }

.karte {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 1.4rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: crosshair;
  transition: opacity .15s ease;
}

.flurstueck { font-weight: 700; margin: 1rem 0; }

.kaestchen { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem 1.1rem; }
.kaestchen label { display: flex; gap: .55rem; align-items: center; font-size: .95rem; font-weight: 400; margin: 0; }
.kaestchen input { width: 18px; height: 18px; flex-shrink: 0; padding: 0; }

.meldung { border-radius: 10px; padding: .85rem 1rem; margin-top: 1rem; font-size: .93rem; line-height: 1.5; }
.meldung p { margin: 0; }
.meldung p + p { margin-top: .5rem; }
.meldung--info    { background: #ddf3fb; color: #0e5a74; }
.meldung--warnung { background: #fff2d6; color: #7a3c0c; }
.meldung--fehler  { background: #fde4e4; color: #8c1d1d; }

.downloads { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: .9rem; }
.downloads li { display: grid; gap: .3rem; }
.downloads span { font-size: .82rem; color: var(--ink-mute); text-align: center; }

.vorschau {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 1.4rem;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

.tool-fuss { color: var(--ink-soft); font-size: .93rem; }
.tool-fuss h3 { margin-bottom: .8rem; }
.tool-fuss ul { padding-left: 1.2rem; margin: 0 0 1rem; display: grid; gap: .5rem; }

@media (max-width: 560px) {
  .field-row--strasse, .field-row--ort, .field-row--plzort { grid-template-columns: 1fr; }
  .kaestchen { grid-template-columns: 1fr; }
}