/* Grunddunst · Formulare (UI-Standard Teil 2, Auftrag Grunddunst 11): EIN Stylesheet für alle Formulare in Werkstatt, Website und
   Vorgangslink. Regeln: alle Felder einer Karte gleich breit (100 %), gleiche Höhe (≥ 48 px), gleicher Innenabstand, Text links, Schrift ≥ 16 px
   (kein iOS-Zoom), native Datum/Uhrzeit gezähmt, Segment-Knöpfe über volle Breite, feste Abstände als Variablen, Fehler unter dem Feld. */
:root{
  --f-hoehe:48px;          /* Mindesthöhe jedes Felds und Segment-Teils */
  --f-schrift:16px;        /* Schrift in Feldern – unter 16 px zoomt iOS beim Antippen */
  --f-innen:.85em;         /* Innenabstand links/rechts */
  --f-label:8px;           /* Beschriftung → Feld */
  --f-abstand:24px;        /* Feld → nächste Beschriftung */
  --f-abschnitt:40px;      /* Abschnitt → Abschnitt */
  --f-nav:58px;            /* Höhe der unteren Navigationsleiste (Werkstatt) */
}

/* Beschriftung + Feld: label.f ist der Rahmen; das Feld steht darunter, immer volle Breite */
.f{display:block;min-width:0}
.f input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]),
.f select,.f textarea,.f .wk-pw{
  display:block;width:100%;max-width:100%;min-width:0;box-sizing:border-box;margin:var(--f-label) 0 0;
}
.f input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]),.f select,.f textarea,.f .wk-pw input{
  min-height:var(--f-hoehe);font-size:var(--f-schrift);line-height:1.35;padding:0 var(--f-innen);text-align:left;
  color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:var(--r);
  -webkit-appearance:none;appearance:none;
}
.f .wk-pw{position:relative}
.f .wk-pw input{margin-top:0}
.f textarea{padding:.7em var(--f-innen);min-height:96px;resize:vertical;line-height:1.45}
.f .hinweis,.f .wk-hilfe{display:block;margin-top:6px}
/* Auswahl: eigener Pfeil rechts, sonst wie ein Textfeld */
.f select{padding-right:2.6em;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141B21' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .8em center;background-size:1.1em}
/* Datum/Uhrzeit: native Felder auf iOS/Android gezähmt – volle Breite, Text links, Kalender-Symbol rechts im Feld, nie breiter als der Container */
.f input[type=date],.f input[type=time],.f input[type=datetime-local],.f input[type=month]{
  position:relative;display:block;width:100%;min-width:0;max-width:100%;padding-right:2.8em;text-align:left;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141B21' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .8em center;background-size:1.15em;
}
.f input[type=time]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141B21' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E")}
.f input[type=date]::-webkit-date-and-time-value,.f input[type=time]::-webkit-date-and-time-value,.f input[type=datetime-local]::-webkit-date-and-time-value{text-align:left;min-height:1.35em;margin:0}
.f input[type=date]::-webkit-calendar-picker-indicator,.f input[type=time]::-webkit-calendar-picker-indicator,.f input[type=datetime-local]::-webkit-calendar-picker-indicator{position:absolute;right:0;top:0;width:3em;height:100%;opacity:0;cursor:pointer;margin:0}
.f input[type=date]::-webkit-inner-spin-button,.f input[type=date]::-webkit-clear-button{display:none}
/* Zahl/Betrag: wie Text (inputmode="decimal" am Feld), Ziffern mit gleicher Breite */
.f input[inputmode=decimal],.f input[inputmode=numeric],.f input[type=number]{font-variant-numeric:tabular-nums}
.f input[type=number]::-webkit-inner-spin-button,.f input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.f input:focus,.f select:focus,.f textarea:focus{outline:2px solid var(--patina);outline-offset:0;border-color:transparent}
/* Datei: Knopf in der Höhe der Felder */
.f input[type=file]{display:block;width:100%;margin-top:var(--f-label);min-height:var(--f-hoehe);font-size:var(--f-schrift);padding:.6em var(--f-innen);box-sizing:border-box;border:1px dashed var(--line);border-radius:var(--r);background:var(--bg)}

/* Segment-Knöpfe: EIN zusammenhängendes Segment über die volle Breite, Teile gleich breit, gewählter Teil deutlich */
.segment{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;width:100%;min-width:0;border:1.5px solid var(--ink);border-radius:var(--r);overflow:hidden;background:var(--bg)}
.label+.segment,.f+.segment{margin-top:var(--f-label)}
.segment label{position:relative;min-width:0;display:block;cursor:pointer}
.segment input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.segment span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:var(--f-hoehe);padding:.4em .5em;font-size:.95rem;line-height:1.2;text-align:center;color:var(--ink);border-left:1.5px solid var(--ink);min-width:0;overflow-wrap:anywhere}
.segment label:first-child span{border-left:0}
.segment span small{font-size:.74rem;color:var(--muted);line-height:1.2}
.segment input:checked+span{background:var(--ink);color:var(--bg)}
.segment input:checked+span small{color:color-mix(in srgb,var(--bg) 80%,transparent)}
.segment input:focus-visible+span{outline:2px solid var(--patina);outline-offset:-3px}
.segment input:disabled+span{opacity:.45;cursor:default}

/* Abstände: innerhalb eines Formulars gleich – Feld → nächste Beschriftung, Abschnitt → Abschnitt */
.wk-form,.stapel{display:grid;gap:var(--f-abstand)}
.wk-form>*,.stapel>*{min-width:0}
.wk-form .wk-form,.stapel .stapel{gap:var(--f-abstand)}
.wk-form>.label:not(:first-child),.stapel>.label:not(:first-child),.wk-form>h3:not(:first-child),.stapel>h3:not(:first-child){margin-top:calc(var(--f-abschnitt) - var(--f-abstand))}
.label+.f,.label+.segment,.label+.wk-chips,.label+.kinds{margin-top:calc(var(--f-label) - var(--f-abstand))}
.wk-form>p.klein,.stapel>p.klein{margin:calc(8px - var(--f-abstand)) 0 0}
/* Regel a: alle Felder einer Karte gleich breit – frühere Zwei-Spalten-Raster werden eine Spalte (PLZ/Ort, Vor-/Nachname, Anfrageformular) */
.wk-zwei,.wk-zeile,.form-annahme .zwei,.form-annahme .zwei.plz,form.anf{display:grid;grid-template-columns:1fr;gap:var(--f-abstand)}
/* Positionszeile (Menge · Einheit · Einzelpreis) bleibt EINE Reihe mit festen Spalten – gilt als eine Feldzeile */
.feldreihe{align-items:end}
/* Zuständige Person im Vorgang: Auswahl in voller Breite, Knopf darunter */
.wk-zustaendig{display:grid;gap:8px;justify-items:start}
.wk-zustaendig .f{width:100%}
.wk-zustaendig .f select{margin-top:0}
/* Bildtext unter jedem Foto: Feld in Standardhöhe, eigene Kachel */
.wk-foto .wk-alt.f{display:block;margin-top:6px}
.wk-foto .wk-alt.f input{font:400 var(--f-schrift)/1.35 var(--body);padding:0 var(--f-innen);border-radius:var(--r)}

/* Fehler direkt unter dem Feld – überall gleich */
.f.ist-fehler input,.f.ist-fehler select,.f.ist-fehler textarea{border-color:var(--warn);outline-color:var(--warn)}
.f-fehler{display:block;margin-top:6px;font-size:.9rem;color:var(--warn);letter-spacing:0;text-transform:none;font-weight:400}

/* Haupt-Aktionsknopf: volle Breite am Ende des Formulars; auf dem Handy als feste Leiste über der Navigation (.wk-fest / .fest) */
.wk-form>.wk-knoepfe>.btn:only-child,.stapel>.reihe>.btn:only-child,.form-haupt .btn{width:100%;justify-content:center}
.wk-form>.wk-knoepfe>.btn{flex:1 1 auto;min-width:0;text-align:center}   /* mehrere Knöpfe teilen sich die Breite, nie breiter als die Karte */
.wk-knoepfe .btn{min-height:var(--f-hoehe)}
.fest{position:sticky;bottom:calc(var(--sab) + 12px);z-index:5;background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);margin:0 -16px;padding:10px 16px}

/* Seitenende: nichts liegt hinter der Navigationsleiste – Höhe der Leiste + Safe-Area + 24 px */
body.wk-mit-nav .wk-inhalt{padding-bottom:calc(var(--f-nav) + var(--sab) + 24px);scroll-padding-bottom:calc(var(--f-nav) + var(--sab) + 24px)}
html{scroll-padding-top:72px}