<form hx-post="{{ url_for('modules.berechnen', module_name='graben') }}" hx-target="#modul-modal-body" hx-swap="innerHTML">

<div class="modal-modul mg" style="font-size:.85rem">
<div class="columns is-multiline is-variable is-3">

  <!-- Graben -->
  <div class="column is-12-tablet is-3-desktop">
    <div class="gl-card" style="background:linear-gradient(135deg,#eef2fa,#e8edf5);border-color:rgba(47,84,150,.1)">
      <div class="gl-card-header"><span class="icon" style="background:rgba(47,84,150,.1)">??</span><h4>Graben</h4></div>
      <label class="gl-label">Abschnitt</label>
      <input class="gl-input" name="abschnitt" placeholder="z.B. Abschnitt A">
      <div class="gl-grid-3" style="margin-top:8px">
        <div><label class="gl-label">Länge (m)</label><input class="gl-input gl-input-sm" name="laenge" type="number" step="0.01"></div>
        <div><label class="gl-label">Breite (m)</label><input class="gl-input gl-input-sm" name="breite" type="number" step="0.01"></div>
        <div><label class="gl-label">Tiefe (m)</label><input class="gl-input gl-input-sm" name="tiefe" type="number" step="0.01"></div>
      </div>
      <div class="gl-subcard" style="margin-top:8px">
        <div style="font-weight:600;font-size:.78rem;margin-bottom:4px">Mindertiefe</div>
        <div style="font-size:.68rem;color:#888;margin-bottom:6px">Breite 0,15–0,30 · Tiefe 0,3–0,45</div>
        <div class="gl-grid-auto">
          <label class="gl-toggle"><input type="checkbox" name="mind_langstrasse"><span class="toggle-track"></span><span class="toggle-label"> Längstrasse</span></label>
          <label class="gl-toggle"><input type="checkbox" name="mind_ftth_ha"><span class="toggle-track"></span><span class="toggle-label"> FTTH HA</span></label>
        </div>
      </div>
      <label class="gl-label" style="margin-top:6px">Bemerkung</label>
      <input class="gl-input" name="bemerkung">
    </div>
  </div>

  <!-- Oberfläche -->
  <div class="column is-12-tablet is-3-desktop">
    <div class="gl-card" style="background:linear-gradient(135deg,#edf7ed,#e6f3e6);border-color:rgba(39,174,96,.1)">
      <div class="gl-card-header"><span class="icon" style="background:rgba(39,174,96,.1)">??</span><h4>Oberfläche</h4></div>
      <div class="gl-grid-2">
        <label class="gl-toggle"><input type="checkbox" name="ob_wiese"><span class="toggle-track"></span><span class="toggle-label"> Wiese</span></label>
        <label class="gl-toggle"><input type="checkbox" name="ob_kies"><span class="toggle-track"></span><span class="toggle-label"> Kies</span></label>
        <label class="gl-toggle"><input type="checkbox" name="ob_asphalt"><span class="toggle-track"></span><span class="toggle-label"> Asphalt</span></label>
        <label class="gl-toggle"><input type="checkbox" name="ob_pflaster"><span class="toggle-track"></span><span class="toggle-label"> Pflaster</span></label>
        <label class="gl-toggle"><input type="checkbox" name="ob_mosaik"><span class="toggle-track"></span><span class="toggle-label"> Mosaik</span></label>
        <label class="gl-toggle"><input type="checkbox" name="ob_bodentausch"><span class="toggle-track"></span><span class="toggle-label"> Bodentausch</span></label>
        <label class="gl-toggle"><input type="checkbox" name="ob_fels"><span class="toggle-track"></span><span class="toggle-label"> Fels</span></label>
        <label class="gl-toggle"><input type="checkbox" name="ob_winterbau"><span class="toggle-track"></span><span class="toggle-label"> Winterbau</span></label>
      </div>
      <label class="gl-toggle"><input type="checkbox" name="ob_gr_natur_pfl"><span class="toggle-track"></span><span class="toggle-label"> Groß/Natursteinpflaster</span></label>
      <label class="gl-toggle"><input type="checkbox" name="ob_in_beton"><span class="toggle-track"></span><span class="toggle-label"> in Beton Pflaster/Mosaik</span></label>
      <div style="margin-top:8px">
        <label class="gl-label">Asphaltstärke (cm)</label>
        <input class="gl-input gl-input-sm" name="asphaltstaerke" type="number" step="0.5">
      </div>
      <div class="gl-subcard" style="margin-top:8px">
        <div style="font-weight:600;font-size:.78rem;margin-bottom:6px">Reststreifen (l × b)</div>
        <div class="gl-grid-2">
          <div><label class="gl-label">Länge</label><input class="gl-input" name="rest_laenge" type="number" step="0.01"></div>
          <div><label class="gl-label">Breite</label><input class="gl-input" name="rest_breite" type="number" step="0.01"></div>
        </div>
      </div>
      <div class="gl-grid-2" style="margin-top:8px">
        <div><label class="gl-label">Anzahl Einzeiler</label><input class="gl-input" name="anz_einzeiler" type="number" step="1"></div>
        <div><label class="gl-label">m Bord/Rinne</label><input class="gl-input" name="lm_bre" type="number" step="0.01"></div>
      </div>
      <div class="gl-grid-auto" style="margin-top:6px">
        <label class="gl-toggle"><input type="checkbox" name="bord"><span class="toggle-track"></span><span class="toggle-label"> Bordstein</span></label>
        <label class="gl-toggle"><input type="checkbox" name="kante"><span class="toggle-track"></span><span class="toggle-label"> Kantenstein</span></label>
        <label class="gl-toggle"><input type="checkbox" name="rinne"><span class="toggle-track"></span><span class="toggle-label"> Einzeiler/Rinne</span></label>
        <label class="gl-toggle"><input type="checkbox" name="liefern"><span class="toggle-track"></span><span class="toggle-label"> liefern</span></label>
      </div>
    </div>
  </div>

  <!-- Medien + Aktionen -->
  <div class="column is-12-tablet is-3-desktop">
    <div class="gl-card" style="background:linear-gradient(135deg,#fef9e7,#fdf3d0);border-color:rgba(243,156,18,.1)">
      <div class="gl-card-header"><span class="icon" style="background:rgba(243,156,18,.1)">??</span><h4>Medien</h4></div>
      <div class="gl-grid-2">
        <label class="gl-toggle"><input type="checkbox" name="cu_kabel"><span class="toggle-track"></span><span class="toggle-label"> 6–100 DA CU</span></label>
        <label class="gl-toggle"><input type="checkbox" name="cu_kabel_gr"><span class="toggle-track"></span><span class="toggle-label"> >100 DA CU</span></label>
      </div>
      <div style="margin:4px 0 8px"><label class="gl-label">Anzahl Kupfer</label><input class="gl-input gl-input-sm" name="anz_cu" type="number" step="1"></div>
      <div class="gl-grid-2">
        <div><label class="gl-toggle"><input type="checkbox" name="dn110"><span class="toggle-track"></span><span class="toggle-label"> DN110</span></label><input class="gl-input" name="anz_dn110" type="number" step="1" placeholder="Anz." style="font-size:.75rem;padding:4px 8px;max-width:80px"></div>
        <div><label class="gl-toggle"><input type="checkbox" name="dn50_1"><span class="toggle-track"></span><span class="toggle-label"> 1×DN50</span></label><input class="gl-input" name="anz_dn50_1" type="number" step="1" placeholder="Anz." style="font-size:.75rem;padding:4px 8px;max-width:80px"></div>
        <div><label class="gl-toggle"><input type="checkbox" name="dn50_2"><span class="toggle-track"></span><span class="toggle-label"> 2×DN50</span></label><input class="gl-input" name="anz_dn50_2" type="number" step="1" placeholder="Anz." style="font-size:.75rem;padding:4px 8px;max-width:80px"></div>
        <div><label class="gl-toggle"><input type="checkbox" name="dn50_3"><span class="toggle-track"></span><span class="toggle-label"> 3×DN50</span></label><input class="gl-input" name="anz_dn50_3" type="number" step="1" placeholder="Anz." style="font-size:.75rem;padding:4px 8px;max-width:80px"></div>
      </div>
      <hr>
      <div class="gl-grid-2">
        <div><label class="gl-toggle"><input type="checkbox" name="snrve_7x12"><span class="toggle-track"></span><span class="toggle-label"> SNRVe 7×12</span></label><input class="gl-input" name="anz_snrve_7x12" type="number" step="1" placeholder="Anz." style="font-size:.75rem;padding:4px 8px;max-width:80px"></div>
        <div><label class="gl-toggle"><input type="checkbox" name="snrve_22x7"><span class="toggle-track"></span><span class="toggle-label"> SNRVe 22×7</span></label><input class="gl-input" name="anz_snrve_22x7" type="number" step="1" placeholder="Anz." style="font-size:.75rem;padding:4px 8px;max-width:80px"></div>
        <div><label class="gl-toggle"><input type="checkbox" name="snrve_8x7"><span class="toggle-track"></span><span class="toggle-label"> SNRVe 8×7</span></label><input class="gl-input" name="anz_snrve_8x7" type="number" step="1" placeholder="Anz." style="font-size:.75rem;padding:4px 8px;max-width:80px"></div>
        <div><label class="gl-toggle"><input type="checkbox" name="snrve_1x7"><span class="toggle-track"></span><span class="toggle-label"> SNRVe 1×7</span></label><input class="gl-input" name="anz_snrve_1x7" type="number" step="1" placeholder="Anz." style="font-size:.75rem;padding:4px 8px;max-width:80px"></div>
      </div>
    </div>
  </div>
  <div class="column is-12-tablet is-3-desktop">
    <div class="gl-card" style="background:linear-gradient(135deg,#f3e8fd,#ede0f7);border-color:rgba(142,68,173,.1)">
      <div class="gl-card-header"><span class="icon" style="background:rgba(142,68,173,.1)">?</span><h4>Aktionen</h4></div>
      <label class="gl-toggle"><input type="checkbox" name="trasseeinmessen"><span class="toggle-track"></span><span class="toggle-label"> Trasse einmessen</span></label>
      <div style="margin-top:6px">
        <label class="gl-toggle"><input type="checkbox" name="stahlplatte"><span class="toggle-track"></span><span class="toggle-label"> Stahlplatte</span></label>
        <input class="gl-input" name="stahlplatte_bemerk" placeholder="Bemerkung" style="margin-top:4px">
      </div>
      
    </div>
  </div>

</div>
  {% include 'components/modul_actions.html' %}
</div>
</form>