/* Auftragsmaske – gemeinsame Optik für „Neuer Auftrag" (React-Bundle) und „Auftrag bearbeiten" (Cockpit).
   EINE Quelle der Wahrheit (vorher im Bundle per JS injiziert). Optik aus Entwurf-Auftragsmaske-Neu_2026-06-23.
   .cab-am        = äußere Karten-Hülle (nur React-Anlegemaske)
   .cab-am-scope  = Inhalts-Stile (Sektionen/Felder/Labels) – gelten in BEIDEN Masken (React-Karte + Modal). */

.cab-am{position:relative;max-width:1280px;margin:0 auto;background:#fff;border:1px solid #e5e7eb;border-radius:18px;box-shadow:0 10px 40px rgba(0,0,0,.12);overflow:hidden;font-family:inherit;color:#1e2025}
/* v1.259.0 (neuauftrag-maske-beweglich): Sobald der Nutzer die Maske auf eine eigene Größe
   zieht (oder eine gemerkte Größe geladen wird), wird die Karte zur Flex-Spalte – dann scrollt
   der Körper, während Kopf (Ziehgriff) und Fußzeile sichtbar bleiben. Position frei beweglich. */
.cab-am--sized{display:flex;flex-direction:column;max-width:none;margin:0}
.cab-am--sized .cab-am-body{flex:1 1 auto;overflow:auto;min-height:0}
.cab-am-head{cursor:move;-webkit-user-select:none;user-select:none;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 20px;border-bottom:1px solid #e5e7eb;background:linear-gradient(180deg,#fff,#fcfcfd)}
.cab-am-head .t{font-size:17px;font-weight:800;color:#111827}
.cab-am-head .s{font-size:12px;color:#9ca3af;margin-top:1px}
.cab-am-x{border:none;background:#f1f2f4;width:34px;height:34px;border-radius:10px;font-size:17px;color:#555;cursor:pointer;display:grid;place-items:center}
.cab-am-x:hover{background:#e7e9ec}
/* Body 2-spaltig (nur Anlegemaske, scoped über .cab-am-body): Titelkarte voll breit,
   die vier Sektionen verteilen sich auf zwei Spalten → deutlich weniger Scrollen.
   Bei schmalem Fenster (<1000px) automatisch wieder einspaltig. */
.cab-am-body{padding:18px 20px;display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.cab-am-body>.am-titlecard{grid-column:1 / -1;margin-bottom:0}
.cab-am-body>.am-section{margin-bottom:0}
@media(max-width:1000px){.cab-am-body{grid-template-columns:1fr}}
.cab-am-foot{display:flex;align-items:center;gap:10px;padding:14px 20px;border-top:1px solid #e5e7eb;background:#f7f8fa;position:sticky;bottom:0}

.cab-am-scope .am-section{border:1px solid #e5e7eb;border-radius:14px;padding:16px;margin-bottom:16px;background:#fff}
.cab-am-scope .am-section:last-child{margin-bottom:0}
.cab-am-scope .am-sh{display:flex;align-items:center;gap:9px;margin:0 0 13px}
/* v1.556.0 (struktur-konzept Phase C1): Sektionskopf trägt den gelben Akzentstrich wie die
   Bearbeiten-/Ticketmaske (Entwurf F, .oc-card-h) – EIN Design-System über alle Masken. */
.cab-am-scope .am-sh::before{content:"";width:3px;height:14px;border-radius:2px;background:var(--cab-brand-400,#F5C800);flex:none}
.cab-am-scope .am-sh .ico{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-size:14px;background:#fef3da;color:#b45309}
.cab-am-scope .am-sh h3{margin:0;font-size:13px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:#374151}
.cab-am-scope .am-sh .hint{font-size:12px;color:#9ca3af;margin-left:auto;font-weight:500;text-transform:none;letter-spacing:0}
/* v1.556.0 (Phase C1): Sektionen sind <details> – zugeklappt zeigt nur der Kopf, Chevron dreht. */
.cab-am-scope details.am-section>summary.am-sh{cursor:pointer;list-style:none;margin:0;user-select:none}
.cab-am-scope details.am-section[open]>summary.am-sh{margin:0 0 13px}
.cab-am-scope summary.am-sh::-webkit-details-marker{display:none}
.cab-am-scope .am-sh .chev{color:#9ca3af;font-size:15px;font-weight:700;margin-left:8px;transition:transform .15s;flex:none}
.cab-am-scope details[open]>summary .chev{transform:rotate(90deg)}
.cab-am-scope details.am-section>summary.am-sh:hover h3{color:#111827}
/* v1.556.0 (Phase C1): Schnellpfad-Zone – die zwei Pflichtfelder, farblich markiert + Pill. */
.cab-am-scope .am-titlecard{border:1px solid #e5e7eb;border-radius:14px;padding:16px;margin-bottom:16px;background:linear-gradient(180deg,#fffdf5,#fff)}
.cab-am-scope .am-titlecard.am-fast{position:relative;border-color:var(--cab-brand-400,#F5C800);background:linear-gradient(180deg,#fffbea,#fff)}
.cab-am-scope .am-fastpill{position:absolute;top:-10px;left:14px;background:var(--cab-brand-400,#F5C800);color:#1e2025;font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:2px 10px;border-radius:999px}
.cab-am-scope .am-grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cab-am-scope .am-grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
@media(max-width:640px){.cab-am-scope .am-grid2,.cab-am-scope .am-grid3{grid-template-columns:1fr}}
.cab-am-scope .am-field{display:flex;flex-direction:column;gap:5px}
.cab-am-scope .am-field.col2{grid-column:span 2}
@media(max-width:640px){.cab-am-scope .am-field.col2{grid-column:span 1}}
.cab-am-scope label.am-label{font-size:12px;font-weight:600;color:#4b5563}
.cab-am-scope .am-label .req{color:#f43f5e}
.cab-am-scope .am-label .opt{color:#9ca3af;font-weight:500}
.cab-am-scope .am-counter{font-size:11px;color:#9ca3af;text-align:right;margin-top:-2px}
.cab-am-scope .am-hinttext{font-size:11.5px;color:#9ca3af}
.cab-am-scope .am-labelrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;align-items:center}
.cab-am-scope .am-lbl-cap{font-size:12px;font-weight:700;color:#4b5563;margin-right:2px}
.cab-am-scope .am-chip{display:inline-flex;align-items:center;gap:6px;border:1.5px solid #e5e7eb;background:#fff;border-radius:999px;padding:6px 13px;font-size:13px;font-weight:600;color:#374151;cursor:pointer;transition:.12s;user-select:none}
.cab-am-scope .am-chip:hover{border-color:#c9ccd2}
.cab-am-scope .am-chip .d{width:9px;height:9px;border-radius:50%}
.cab-am-scope .am-chip.add{border-style:dashed;color:#6b7280}
.cab-am-scope .am-prio{display:flex;gap:8px}
.cab-am-scope .am-prio button{flex:1;border:1.5px solid #e5e7eb;background:#fff;border-radius:10px;padding:9px;font-size:13px;font-weight:600;color:#4b5563;cursor:pointer}
.cab-am-scope .am-prio button.on.niedrig{border-color:#94a3b8;background:#f1f5f9;color:#334155}
.cab-am-scope .am-prio button.on.mittel{border-color:#f59e0b;background:#fff7ed;color:#b45309}
.cab-am-scope .am-prio button.on.hoch{border-color:#f43f5e;background:#fff1f2;color:#be123c}

/* Eingabefelder einheitlich hell (gilt in beiden Masken; überschreibt App-Tailwind im Maskenbereich) */
.cab-am-scope input[type=text],.cab-am-scope input[type=number],.cab-am-scope input[type=datetime-local],.cab-am-scope input[type=date],.cab-am-scope input[type=time],.cab-am-scope select,.cab-am-scope textarea{width:100%;border:1px solid #e5e7eb;border-radius:10px;padding:9px 11px;font-size:14px;line-height:1.3;background:#fff;color:#1e2025;font-family:inherit}
.cab-am-scope textarea{resize:vertical;min-height:80px}
/* v1.556.0 (Phase C1): Fokus nutzt den zentralen Brand-Token statt der Alt-Farbe #EF9F27. */
.cab-am-scope input:focus,.cab-am-scope select:focus,.cab-am-scope textarea:focus{outline:none;border-color:var(--cab-brand-400,#F5C800);box-shadow:0 0 0 3px rgba(245,200,0,.18)}

/* ═══════════════════════════════════════════════════════════════════════════
   Entwurf F (v1.495.0) – kontrastreiche Auftragsmaske (Cockpit „Auftrag bearbeiten").
   Drei Helligkeits-Ebenen: grauer Maskengrund (.oc-dash) → weiße Sektionskarten
   (.oc-card / .oc-sec) → eingelassene Felder mit kräftigem 1,5-px-Rahmen. Gelber
   Akzentstrich am Sektionskopf, Termin gelb hervorgehoben. Alles gescoped auf .oc-f,
   damit ausschließlich diese Maske betroffen ist (Hell + Dunkel). ═══════════════ */
.oc-f,.tk-f{ --ocf-grund:#e8ecf1; --ocf-karte:#ffffff; --ocf-rahmen:#cfd6e0; --ocf-titel:#0f172a; }
html.dark .oc-f,html.dark .tk-f{ --ocf-grund:#131316; --ocf-karte:#1e1e22; --ocf-rahmen:#34353c; --ocf-titel:#ececec; }

/* Ebene 2: grauer Maskengrund unter den drei Dashboard-Spalten */
.oc-f .oc-dash{ background:var(--ocf-grund); border-radius:14px; padding:12px; }

/* Ebene 3: weiße Sektionskarten mit Akzent-Kopf (aus ocCard) */
.oc-f .oc-card{ background:var(--ocf-karte); border:1.5px solid var(--ocf-rahmen); border-radius:12px; overflow:hidden; }
.oc-f .oc-card>.oc-card-h{ display:flex; align-items:center; gap:8px; padding:9px 14px; border-bottom:1px solid var(--ocf-rahmen);
  font-size:11px; letter-spacing:.06em; text-transform:uppercase; font-weight:700; color:var(--ocf-titel); }
.oc-f .oc-card>.oc-card-h::before{ content:""; width:3px; height:14px; border-radius:2px; background:var(--cab-brand-400,#F5C800); flex:none; }
.oc-f .oc-card>.oc-card-h .zusatz{ margin-left:auto; font-size:10.5px; letter-spacing:0; text-transform:none; font-weight:600; color:var(--cab-text-2,#64748b); }
.oc-f .oc-card>.oc-card-b{ padding:13px 14px; }

/* Klappkarten (secD) ins gleiche Kartenbild heben */
.oc-f .oc-sec{ background:var(--ocf-karte) !important; border:1.5px solid var(--ocf-rahmen) !important; }
.oc-f .oc-sec>summary{ padding-left:2px; }

/* v1.725.0 (auftragsmaske-phasen): „Nächster Schritt"-Akzent – im erledigten Auftrag ist die
   Abrechnungs-Karte das, was als Nächstes ansteht (gelber Rahmen + Akzent-Kopf, hell wie dunkel). */
.oc-f .oc-card.oc-card-next{ border-color:var(--cab-brand-400,#F5C800); box-shadow:0 0 0 1px var(--cab-brand-400,#F5C800); }
.oc-f .oc-card.oc-card-next>.oc-card-h{ background:var(--cab-accent-soft,#fdf6d8); }
html.dark .oc-f .oc-card.oc-card-next>.oc-card-h{ background:rgba(245,200,0,.12); }

/* Felder (Eingaben/Selects/Textareas) tragen im Modal bereits die Kontrast-Optik aus masken.css
   (eingelassener Grund + Rahmen, Einstellung „Eingabemasken · Kontrast") – hier NICHT gegenanstyeln. */

/* Termin in der Eck-Leiste gelb hervorheben (der Blickfang der Maske) */
.oc-f .oc-eck-termin{ background:var(--cab-accent-soft,#fdf6d8) !important; box-shadow:inset 3px 0 0 var(--cab-brand-400,#F5C800); }
html.dark .oc-f .oc-eck-termin{ background:#2b2712 !important; }

/* ═══ Entwurf F auch für die Ticketmaske (v1.496.0) – gleiche 3-Ebenen-Optik. In Hell war sie
   dank Kontrast-Pass (v1.421) schon da; hier v.a. Dunkelmodus-Kontrast + gelber Akzentstrich. ═══ */
.tk-f .tkf-ground{ background:var(--ocf-grund) !important; }
.tk-f .tkf-head{ background:var(--ocf-karte) !important; }
.tk-f .tkf-card{ background:var(--ocf-karte) !important; border-color:var(--ocf-rahmen) !important; }
.tk-f .tkf-h{ display:inline-flex; align-items:center; gap:8px; }
.tk-f .tkf-h::before{ content:""; width:3px; height:13px; border-radius:2px; background:var(--cab-brand-400,#F5C800); flex:none; }