/* ============================================================
   DDL Formulare v1.1 — denschDesignLanguage
   ============================================================
   Fixierter Formular-Standard der densch-Familie (abgenommen
   12.07.2026; Mobilteil R11 ergänzt 15.09.2026).
   Referenz/Muster: docs/ddl-formulare-probe.html
   Verhalten (Seg-Thumb, Stepper, Such-Picker): js/ddl-forms.js
   Voraussetzung: css/ddl.css ist geladen (Tokens).

   NUR DESIGN: Die Akzentfarbe kommt IMMER vom Projekt bzw.
   Restaurant (--ddl-accent + Stufen) — diese Datei kennt keine
   eigenen Farbwerte.

   DIE 10 REGELN
    1  Eine Höhe: 42px für alle Controls. Ausnahmen: Textarea
       (min. 90px), Inline-Elemente (Icon-Button/Chip 32px,
       Switch 28px).
    2  Ein Label: 13px/600, immer oben, immer gekoppelt (for/id,
       umschließend oder aria). Keine Emojis in Feld-Labels.
       Optionales als „(optional)“.
    3  Nie Text unter Feldern. Beschreibung = Platzhalter IM Feld
       (keine Beispielwerte); Fehler rot RECHTS NEBEN dem Label.
    4  Breite kommt vom Raster: 12 Spalten, 5 Feldbreiten
       (w-num/sm/md/lg/full) — nie feste Pixel am Feld.
       Container: Formulare laufen auf der VOLLEN Content-
       Breite des Projekts (.do-admin-content 1280px,
       .dc-main 1400px) — nie eigene max-width-Deckel an
       Formular-Wrappern. Schmal sind nur Dialoge/Modale
       (~380–680px) und Auth-Karten (~400–520px).
       Mobil ≤720px kollabiert das Raster automatisch:
       num→4, sm→6, md/lg→12 Spalten (volle Zeile).
    5  Ja/Nein = Schalter-Zeile (Text links, Switch rechts).
       POST wie native Checkbox: nicht angehakt = Feld wird
       NICHT übermittelt (bestehende Hidden-Fallbacks vor der
       Checkbox unangetastet lassen).
    6  2–4 Optionen = Segmente (Radio-Gruppe); im Repeater-Raster
       ab 3 auch Select; ab 5 Select; lange Listen = Such-Picker.
    7  Wiederholbares = Nummern-Karte; Bedingtes = Sub-Block mit
       Akzent-Kante.
    8  Nur DDL-Tokens; Fokus = Accent-Ring an ALLEN Controls.
    9  Ein Rhythmus: 16px zwischen Feldzeilen/Karten/Sektionen,
       24px vor Gliederung (Zwischentitel, Aktionsleiste).
   10  Einstellung (global) = Schalter-Zeile, Datensatz-Wert =
       Rasterfeld. Abweichungen nur per DDL-Erweiterung, nie im
       Seiten-CSS.
   11  NICHTS LÄUFT AUS DEM BILD (15.09.2026, nach Vollmessung
       von 391 Seiten). Eine Reihe bricht ZWISCHEN ihren
       Elementen um, nie in einem Wort. Was nicht umbrechen
       kann, scrollt in einer eigenen Rinne (.ddl-tabs,
       .ddlt-wrap) — niemals die Seite.
       Geprüft wird bei 320 / 390 / 844 px.
       ⚠️ Zwei Anti-Muster, die aus der Messung stammen:
        ·  `white-space:nowrap` auf eine Zeile, die einen SATZ
           trägt (.ddlf-switch-line, Zellen mit Fließtext) —
           EINE solche Projektregel machte eine Seite 2107 px
           breit, ohne den Standard zu verletzen.
        ·  `overflow:hidden` an einem Kasten, nur damit der
           Eckradius greift. Das schneidet ab, ohne Scrollweg,
           und die Seite meldet dabei KEINEN Überlauf. Radius
           gehört an den Wrapper (siehe ddl-tables.css R2b).
       Prüfwerkzeug: server-ops/mobil-messen.py (misst auch
       abschneidende Kästen, die reine Breitenmessungen
       übersehen) + server-ops/mobil-check.py.

   KONVENTIONEN (Familie, gelten in jedem Projekt)
    ·  Bestätigen/Löschen NIE über native Browser-Dialoge
       (alert/confirm/prompt) — Projekt-Confirm mit
       data-confirm/-variant verwenden (z.B. dc-confirm.js).
    ·  Aktionsleiste: Primär LINKS (densch-Konvention, bewusst
       gegen Apple/Polaris), Gefährliches rechts außen —
       margin-left:auto macht die CSS, bei mehreren Elementen
       rechts schiebt nur das erste (Sibling-Regel unten).
    ·  Datei-Upload: IMMER .ddlf-file (Akzent-Button
       „↑ Datei auswählen" + Dateiname) — nie das native
       Control zeigen. multiple → „↑ Dateien auswählen" /
       data-empty="Keine Dateien gewählt".
    ·  Standard-Update ausrollen: Master ändern → byte-
       identisch in die Projekte kopieren → Cache-Buster
       bumpen (denschorder ?v=YYYYMMDDx in admin/_layout.php;
       Projekte mit filemtime-Helper wie dc_asset() laden
       automatisch frisch).

   Ablöst (deprecated): .ddl-input/.ddl-label/.ddl-hint sowie
   seitenlokale Systeme (.gacha-fl, Inline-Form-Styles).

   PORTIERUNG IN EIN WEITERES PROJEKT (Referenz: denschCollabs)
    1  ddl-forms.css + ddl-forms.js BYTE-IDENTISCH ins Projekt
       kopieren. denschorder ist Master — Updates sind ein
       plain copy; Projekt-Kopien NIE lokal editieren.
    2  Token-Brücke im Projekt-CSS: alle hier konsumierten
       var(--ddl-…)-Tokens (grep "var(--ddl-" auf diese Datei)
       auf die Projekt-Palette binden — Light UND
       html[data-mode="dark"] (inkl. color-scheme: dark).
       Referenz-Implementierung: denschcollabs/dc-ddl.css,
       Abschnitt „DDL-Formulare v1: Token-Brücke".
    3  Einbinden nach dem Projekt-CSS: <link ddl-forms.css> +
       <script ddl-forms.js defer> — Auto-Init läuft selbst
       (Seg/Stepper/Scroll/Datei-Feld; Combo per ddlfCombo()).
    4  Akzent kommt IMMER vom Projekt (FARBEN.md) — nie
       Farbwerte in dieser Datei ändern.
   ============================================================ */


/* ── R4/R9 · Formular-Raster ─────────────────────────────── */
.ddlf-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
}
.ddlf-grid + .ddlf-grid { margin-top: 16px; }
.w-num  { grid-column: span 2; }   /* Zahl, €, Quote, %      */
.w-sm   { grid-column: span 3; }   /* kurze Werte, Datum     */
.w-md   { grid-column: span 4; }   /* Selects, kurze Namen   */
.w-lg   { grid-column: span 6; }   /* Namen, Halbzeiler      */
.w-full { grid-column: span 12; }  /* Freitext, Textarea     */
@media (max-width: 720px) {
    .w-num { grid-column: span 4; }
    .w-sm  { grid-column: span 6; }
    .w-md, .w-lg { grid-column: span 12; }
}

/* ── R9 · Zwischentitel — NUR dieser Baustein, nie eigene h3 */
.ddlf-subhead {
    font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--ddl-text-soft);
    margin: 24px 0 12px;
}
.ddlf-subhead:first-child { margin-top: 8px; }

/* ── R2/R3 · Feld-Anatomie ───────────────────────────────── */
.ddlf-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ddlf-label {
    font-size: 13px; font-weight: 600; color: var(--ddl-text);
    display: flex; align-items: baseline; gap: 8px;
}
.ddlf-label .opt { font-weight: 400; color: var(--ddl-text-muted); }
/* R3 — Fehler rot RECHTS NEBEN dem Label, nie unter dem Feld */
.ddlf-error { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--ddl-err); text-align: right; }

/* ── R1 · EINE Control-Höhe: 42px ────────────────────────── */
.ddlf-input, .ddlf-select, .ddlf-textarea {
    width: 100%;
    height: 42px;
    background: var(--ddl-bg-light);
    border: 1px solid var(--ddl-border);
    border-radius: var(--ddl-radius-md);
    padding: 0 14px;
    font: 400 14px/1.4 var(--ddl-font-sans);
    color: var(--ddl-text);
    transition: border-color var(--ddl-trans-fast), box-shadow var(--ddl-trans-fast);
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
}
.ddlf-input::placeholder, .ddlf-textarea::placeholder { color: var(--ddl-text-muted); }
.ddlf-input:focus, .ddlf-select:focus, .ddlf-textarea:focus {
    outline: none;
    border-color: var(--ddl-accent);
    box-shadow: 0 0 0 3px var(--ddl-accent-glow);
}
.ddlf-field.has-err .ddlf-input,
.ddlf-field.has-err .ddlf-select,
.ddlf-field.has-err .ddlf-textarea {
    border-color: var(--ddl-err);
    box-shadow: 0 0 0 3px var(--ddl-err-tint);
}
.ddlf-input[inputmode="numeric"], .ddlf-input[inputmode="decimal"] {
    font-family: var(--ddl-font-mono);
    font-feature-settings: 'tnum' 1;
}
.ddlf-select {
    background-image: var(--ddl-chevron);
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 38px;
    cursor: pointer;
}
.ddlf-textarea { height: auto; min-height: 90px; padding: 10px 14px; line-height: 1.5; resize: vertical; }

/* ── R8 · Fokus-Ring an ALLEN Controls (Tastatur) ────────── */
.ddlf-btn:focus-visible, .ddlf-seg-opt input:focus-visible + span,
.ddlf-stepper button:focus-visible, .ddlf-icon-btn:focus-visible,
.ddlf-add:focus-visible, .ddlf-chip button:focus-visible,
.ddlf-pill:has(input:focus-visible) {
    outline: none;
    box-shadow: 0 0 0 3px var(--ddl-accent-glow);
}

/* ── Disabled — überall gleich ───────────────────────────── */
.ddlf-input:disabled, .ddlf-select:disabled, .ddlf-textarea:disabled,
.ddlf-btn:disabled, .ddlf-seg-opt input:disabled + span,
.ddlf-stepper button:disabled, .ddlf-icon-btn:disabled, .ddlf-add:disabled {
    opacity: .5; cursor: not-allowed;
}
.ddlf-switch:has(input:disabled), .ddlf-pill:has(input:disabled) {
    opacity: .5; cursor: not-allowed;
}
.ddlf-switch:has(input:disabled) input, .ddlf-pill:has(input:disabled) { pointer-events: none; }

/* ── Input mit Einheit (€, %, ×) — max. 2 Zeichen, sonst ins Label */
.ddlf-unit { position: relative; display: block; }
.ddlf-unit .ddlf-input { padding-right: 38px; }
.ddlf-unit::after {
    content: attr(data-unit);
    position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
    font-size: 13px; color: var(--ddl-text-muted); pointer-events: none;
}

/* ── R5/R10 · Settings-Zeile (Text links, Control rechts) ── */
.ddlf-set { border-top: 1px solid var(--ddl-divider); }
.ddlf-set:first-child { border-top: 0; }
.ddlf-set-row {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
    padding: 12px 0;
    min-height: 58px;
}
.ddlf-set-txt { flex: 1 1 260px; min-width: 0; }
.ddlf-set-txt b { display: block; font-size: 14px; font-weight: 600; }
.ddlf-set-txt p { margin: 2px 0 0; font-size: 12.5px; color: var(--ddl-text-soft); }
.ddlf-set-ctl { flex: 0 0 auto; margin-left: auto; min-width: 0; max-width: 100%; }
/* R11 — am Handy rutscht das Bedienelement unter den Text, statt die Seite zu
   schieben. `flex:0 0 auto` allein hielt ein 538px breites Steuerelement starr
   in einer 276px-Zeile (gemessen 15.09.2026 auf einer Einstellungsseite). */
@media (max-width: 640px) {
    .ddlf-set-ctl { margin-left: 0; flex: 1 1 100%; }
}

/* ── R5 · Switch 46×28 ───────────────────────────────────── */
.ddlf-switch { position: relative; display: inline-block; width: 46px; height: 28px; }
.ddlf-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.ddlf-switch i {
    position: absolute; inset: 0;
    background: var(--ddl-switch-off);
    border-radius: var(--ddl-radius-pill);
    transition: background var(--ddl-trans-base);
    pointer-events: none;
}
.ddlf-switch i::before {
    content: '';
    position: absolute; top: 2px; left: 2px;
    width: 24px; height: 24px;
    background: var(--ddl-knob); border-radius: 50%;
    /* bewusste Ausnahme: Knopf braucht auf der Accent-Fläche mehr Kontrast als shadow-sm */
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    transition: transform var(--ddl-trans-base);
}
.ddlf-switch input:checked + i { background: var(--ddl-accent); }
.ddlf-switch input:checked + i::before { transform: translateX(18px); }
.ddlf-switch input:focus-visible + i { box-shadow: 0 0 0 3px var(--ddl-accent-glow); }

/* R5 kompakt — Switch mit Beschriftung in einer Zeile (Ersatz für nackte
   Checkbox-Zeilen, z. B. aus do_field type=checkbox). Der .ddlf-switch sitzt
   dabei als <span> IM Label (kein label-in-label). */
.ddlf-switch-line {
    display: inline-flex; align-items: center; gap: 10px;
    cursor: pointer; user-select: none;
    font: 600 13.5px/1.35 var(--ddl-font-sans);
    color: var(--ddl-text);
    /* R11 — die Zeile trägt einen ganzen SATZ, nicht nur „Ja/Nein".
       ⚠️ NIE white-space:nowrap darauf setzen (auch nicht im Projekt-CSS):
       genau das machte eine Einstellungsseite 2107 px breit. */
    max-width: 100%; flex-wrap: wrap; min-width: 0;
}
.ddlf-switch-line > span { min-width: 0; overflow-wrap: anywhere; }
.ddlf-switch-line .ddlf-switch { flex: 0 0 auto; }
.ddlf-switch-line .opt { font-weight: 400; color: var(--ddl-text-muted); }

/* ── R2/R7 · Wiederholzeilen (dichte Options-/Positionslisten) ──
   Wiederholt sich eine Zeile in einer Liste, wandern die sichtbaren
   Labels in EINE Kopfzeile über der Liste (.ddlf-cols) — die Controls
   der Zeilen koppeln per aria-label (R2 „oder aria"). Kopf und Zeilen
   teilen sich dasselbe Spaltenraster: grid-template-columns kommt von
   der Seite und wird an BEIDEN Containern identisch gesetzt. In der
   Zeile richten sich alle Spalten mittig aus — keine Label-Etagen,
   keine Höhensprünge (Feedback 16.08.2026, Order-Optionslisten).
   Mobil (Zeile kollabiert einspaltig): Kopfzeile ausblenden, dann
   aria-Labels ggf. als sichtbare Struktur der Seite lösen. */
.ddlf-cols {
    display: grid; gap: 12px; align-items: end;
    font-size: 12px; font-weight: 600;
    color: var(--ddl-text-soft);
}

/* ── R6 · Segmented Control — echte Radio-Gruppe ─────────── */
/* Gleit-Thumb via js/ddl-forms.js; ohne JS: statischer Fallback */
.ddlf-seg {
    position: relative;
    display: inline-flex;
    background: var(--ddl-bg-light);
    border: 1px solid var(--ddl-border);
    border-radius: var(--ddl-radius-md);
    padding: 3px;
    height: 42px;
    box-sizing: border-box;
    max-width: 100%;              /* nie über die Feld-/Spaltenbreite hinaus */
    overflow-x: auto;             /* zu breit → seitlich scrollen statt rausragen */
    scrollbar-width: none;
}
.ddlf-seg::-webkit-scrollbar { height: 0; display: none; }
.ddlf-seg-thumb {
    position: absolute; top: 3px; bottom: 3px; left: 0;
    background: var(--ddl-seg-on);
    border-radius: var(--ddl-radius-in);
    box-shadow: var(--ddl-shadow-sm);
    transition: transform var(--ddl-trans-base), width var(--ddl-trans-base);
    pointer-events: none;
}
.ddlf-seg-opt { position: relative; display: inline-flex; cursor: pointer; }
.ddlf-seg-opt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.ddlf-seg-opt span {
    position: relative; z-index: 1;
    display: inline-flex; align-items: center;
    padding: 0 16px; border-radius: var(--ddl-radius-in);
    font: 600 13.5px/1 var(--ddl-font-sans);
    color: var(--ddl-text-soft);
    transition: background var(--ddl-trans-fast), color var(--ddl-trans-fast), box-shadow var(--ddl-trans-fast);
    white-space: nowrap;
    pointer-events: none;
}
.ddlf-seg-opt input:checked + span {
    background: var(--ddl-seg-on);
    color: var(--ddl-text);
    box-shadow: var(--ddl-shadow-sm);
}
/* Mit Thumb übernimmt dieser die Fläche — Span wird durchsichtig */
.ddlf-seg.has-thumb .ddlf-seg-opt input:checked + span { background: transparent; box-shadow: none; }

/* ── Stepper (Zahl mit −/+) — Wertträger = hidden input ──── */
.ddlf-stepper {
    display: inline-flex; align-items: stretch;
    border: 1px solid var(--ddl-border);
    border-radius: var(--ddl-radius-md);
    background: var(--ddl-bg-light);
    height: 42px; overflow: hidden;
    box-sizing: border-box;
}
.ddlf-stepper button {
    width: 40px; border: 0; background: transparent; cursor: pointer;
    font: 600 17px/1 var(--ddl-font-sans); color: var(--ddl-text-soft);
    transition: background var(--ddl-trans-fast), color var(--ddl-trans-fast);
}
.ddlf-stepper button:hover:not(:disabled) { background: var(--ddl-accent-tint); color: var(--ddl-accent-text); }
.ddlf-stepper output {
    min-width: 52px; display: inline-flex; align-items: center; justify-content: center;
    font: 600 14px/1 var(--ddl-font-mono);
    border-left: 1px solid var(--ddl-border); border-right: 1px solid var(--ddl-border);
    background: var(--ddl-bg-card);
    padding: 0 8px;
}

/* ── R7 · Repeater-Karte (Gewinne, Positionen, Stufen …) ─── */
.ddlf-repeat { display: flex; flex-direction: column; gap: 16px; counter-reset: ddlf-item; }
.ddlf-repeat .ddlf-item { counter-increment: ddlf-item; }
/* Leere .ddlf-item-no nummerieren sich selbst (auch nach Löschen/Hinzufügen) */
.ddlf-item-no:empty::before { content: counter(ddlf-item); }
.ddlf-item {
    border: 1px solid var(--ddl-border);
    border-radius: var(--ddl-radius-lg);
    background: var(--ddl-bg-card);
}
.ddlf-item-head {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--ddl-divider);
    /* R11 — die Icon-Reihe rechts (.ddlf-item-act, margin-left:auto) schob
       sonst jede Repeater-Karte aus dem Bild, sobald der Titel lang wurde. */
    flex-wrap: wrap; row-gap: 8px;
}
.ddlf-item-no {
    flex: 0 0 26px; height: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    font: 700 12px/1 var(--ddl-font-mono);
    color: var(--ddl-accent-text); background: var(--ddl-accent-tint);
    border-radius: var(--ddl-radius-in);
}
.ddlf-item-title { font-size: 14px; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.ddlf-item-sub { font-size: 12.5px; color: var(--ddl-text-soft); min-width: 0; overflow-wrap: anywhere; }
.ddlf-item-act { margin-left: auto; display: flex; gap: 6px; }
.ddlf-item-body { padding: 16px 14px; }

/* Icon-Button 32px: bewusste R1-Ausnahme (kompakte Inline-Aktion) */
.ddlf-icon-btn {
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--ddl-border); border-radius: var(--ddl-radius-in);
    background: transparent; color: var(--ddl-text-soft);
    font-size: 14px; cursor: pointer; padding: 0;
    transition: all var(--ddl-trans-fast);
}
.ddlf-icon-btn:hover { border-color: var(--ddl-accent); color: var(--ddl-accent-text); background: var(--ddl-accent-tint); }
.ddlf-icon-btn.danger:hover { border-color: var(--ddl-err); color: var(--ddl-err); background: var(--ddl-err-tint); }

.ddlf-add {
    display: block; width: 100%;
    height: 42px;
    border: 1px dashed var(--ddl-border);
    border-radius: var(--ddl-radius-md);
    background: transparent; cursor: pointer;
    font: 600 13.5px/1 var(--ddl-font-sans);
    color: var(--ddl-text-soft);
    transition: all var(--ddl-trans-fast);
}
.ddlf-add:hover { border-color: var(--ddl-accent); color: var(--ddl-accent-text); background: var(--ddl-accent-tint); }
.ddlf-repeat + .ddlf-add { margin-top: 16px; } /* R9 */

/* R9 — Raster nach Settings-Zeilen braucht den 16px-Abstand selbst */
.ddlf-set + .ddlf-grid { margin-top: 16px; }
.ddlf-grid + .ddlf-set { margin-top: 16px; }

/* ── R7 · Bedingter Sub-Block: Akzent-Kante, Controls invertieren */
.ddlf-sub {
    margin-top: 16px;
    padding: 14px 14px 14px 16px;
    border-left: 3px solid var(--ddl-accent-light);
    border-radius: var(--ddl-radius-xs) var(--ddl-radius-md) var(--ddl-radius-md) var(--ddl-radius-xs);
    background: var(--ddl-bg-light);
}
.ddlf-sub .ddlf-subhead { margin: 0 0 12px; }
.ddlf-sub .ddlf-input, .ddlf-sub .ddlf-select, .ddlf-sub .ddlf-textarea { background: var(--ddl-bg-card); }

/* ── Chips (gewählte Werte) — 32px: bewusste R1-Ausnahme ─── */
.ddlf-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-height: 42px; }
.ddlf-chip {
    display: inline-flex; align-items: center; gap: 8px;
    height: 32px; padding: 0 6px 0 12px;
    background: var(--ddl-accent-tint); color: var(--ddl-accent-text);
    border-radius: var(--ddl-radius-pill);
    font: 600 13.5px/1 var(--ddl-font-sans);
}
.ddlf-chip button {
    width: 20px; height: 20px; border: 0; border-radius: 50%;
    background: transparent; color: inherit; cursor: pointer;
    font-size: 12px; line-height: 1; padding: 0;
}
.ddlf-chip button:hover { background: var(--ddl-accent-glow); }

/* ── R6 · Such-Picker: lange Listen NIE als Dropdown ─────── */
/* 42px-Suchfeld + Live-Vorschläge (js/ddl-forms.js: ddlfCombo).
   Pixel-Grenzen = bewusste R4-Ausnahme: lebt in der Chips-Flexbox
   statt im Raster; ohne Grenzen springt die Breite bei jedem Chip. */
.ddlf-combo { position: relative; flex: 1 1 200px; min-width: 170px; max-width: 300px; }
.ddlf-combo-list {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20;
    background: var(--ddl-bg-card);
    border: 1px solid var(--ddl-border);
    border-radius: var(--ddl-radius-md);
    box-shadow: var(--ddl-shadow-md);
    max-height: 224px; overflow-y: auto;
    padding: 4px;
}
.ddlf-combo-list[hidden] { display: none; }
.ddlf-combo-item {
    padding: 9px 10px; border-radius: var(--ddl-radius-in);
    font-size: 14px; cursor: pointer; /* wie die Eingabe — gleicher Inhalt, gleiche Größe */
}
.ddlf-combo-item.act { background: var(--ddl-accent-tint); color: var(--ddl-accent-text); }
.ddlf-combo-empty { padding: 9px 10px; font-size: 12.5px; color: var(--ddl-text-muted); }

/* ── Pill-Checkboxen (Terminals, Marken …) ───────────────── */
.ddlf-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.ddlf-pill {
    display: inline-flex; align-items: center; gap: 8px;
    height: 42px; padding: 0 18px;
    border: 1px solid var(--ddl-border); border-radius: var(--ddl-radius-pill);
    background: var(--ddl-bg-light);
    font: 600 13.5px/1 var(--ddl-font-sans);
    cursor: pointer; user-select: none;
    transition: all var(--ddl-trans-fast);
    box-sizing: border-box;
}
.ddlf-pill input { width: 16px; height: 16px; accent-color: var(--ddl-accent); margin: 0; }
.ddlf-pill:has(input:checked) {
    border-color: var(--ddl-accent);
    background: var(--ddl-accent-tint);
    color: var(--ddl-accent-text);
}

/* ── Aktionsleiste — densch-Konvention: Primär LINKS, Gefährliches rechts außen */
.ddlf-actions {
    display: flex; gap: 12px; align-items: center;
    margin-top: 24px; padding-top: 16px; /* R9: Gliederung 24px, innen 16px */
    border-top: 1px solid var(--ddl-divider);
    /* R11 — Umbruch ZWISCHEN den Knöpfen. Ohne das lagen die Hauptaktionen
       der Seite am Handy außerhalb des Bildes (gemessen 15.09.2026 auf
       22 Seiten in fünf Projekten). */
    flex-wrap: wrap;
    row-gap: 12px;
}
.ddlf-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 42px; padding: 0 22px;
    border: 1px solid transparent; border-radius: var(--ddl-radius-md);
    font: 600 14px/1 var(--ddl-font-sans);
    cursor: pointer; text-decoration: none;
    background: var(--ddl-accent); color: var(--ddl-text-on-accent);
    transition: filter var(--ddl-trans-fast), transform var(--ddl-trans-fast);
    box-sizing: border-box;
    white-space: nowrap;      /* R11: die Leiste bricht, die Beschriftung nie */
    max-width: 100%;
}
/* R11, Ausnahme mit Ansage: reicht die Beschriftung über den GANZEN Schirm,
   ist ein umgebrochener Knopf besser als einer, der halb daneben steht.
   Gemessen 15.09.2026: „📱 Alle Tische als A4-Druckbogen (4 pro Seite)" wurde
   348px breit in einer 276px-Leiste. Höhe wird dafür flexibel — die eine
   Control-Höhe (R1) gilt weiterhin, sie ist nur keine Obergrenze mehr. */
@media (max-width: 640px) {
    .ddlf-btn {
        white-space: normal;
        height: auto;
        min-height: 42px;
        padding-top: 8px;
        padding-bottom: 8px;
        text-align: center;
    }
}
.ddlf-btn:hover { filter: brightness(1.08); color: var(--ddl-text-on-accent); }
.ddlf-btn:active { transform: scale(0.98); }
.ddlf-btn.secondary { background: transparent; color: var(--ddl-text); border-color: var(--ddl-border); }
.ddlf-btn.secondary:hover { filter: none; border-color: var(--ddl-accent); color: var(--ddl-accent-text); }
.ddlf-btn.danger { background: transparent; color: var(--ddl-err); border-color: var(--ddl-err); }
/* „Gefährliches rechts außen" ist eine Regel für EINE Zeile. Nach dem Umbruch
   stünde der Löschen-Knopf allein und weit rechts (gemessen: rechte Kante 355
   gegen 155 beim Nachbarn) — deshalb erst ab Tablet. */
@media (min-width: 721px) {
    .ddlf-btn.danger { margin-left: auto; }
}
/* Mehrere Elemente rechts außen: nur das ERSTE schiebt (sonst verteilt
   Flexbox den Freiraum zwischen den auto-Margins und alles schwebt mittig) */
.ddlf-actions .ddlf-btn.danger ~ .ddlf-btn.danger { margin-left: 0; }
.ddlf-btn.danger:hover { filter: none; background: var(--ddl-err-tint); color: var(--ddl-err); }

/* ── Horizontal-Scroll-Leiste (Tab-/Options-Reihen mit vielen Einträgen) ──
   Statt umzubrechen: EINE Zeile, seitlich scrollbar, Scrollbar versteckt.
   Fade-Ränder blenden ein, wenn in die Richtung noch Inhalt liegt (Klassen
   .has-start/.has-end setzt js/ddl-forms.js: ddlfInit → initScroll). */
.ddlf-scroll {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;              /* Firefox */
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}
.ddlf-scroll::-webkit-scrollbar { height: 0; display: none; }  /* Chrome/Safari */
.ddlf-scroll > * { flex: 0 0 auto; }                            /* Kinder nicht stauchen */
.ddlf-scroll.has-end {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
}
.ddlf-scroll.has-start {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 28px);
            mask-image: linear-gradient(to right, transparent, #000 28px);
}
.ddlf-scroll.has-start.has-end {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
}

/* ── R11 · Reiterleiste (.ddl-tabs) ───────────────────────────────────
   Unternavigationen mit vielen Punkten laufen sonst weiter, bis die ganze
   SEITE seitwärts fährt und Kopfzeile wie Menü mit aus dem Bild wandern.
   Baut auf .ddlf-scroll auf — EINE Mechanik, kein zweiter Scroll-Baustein.
   Der alte Einwand „man sieht einer scrollenden Leiste nicht an, dass rechts
   noch etwas liegt" ist mit den Fade-Rändern erledigt: has-start/has-end
   setzt ddl-forms.js. Tippziel 44px (WCAG 2.5.5).
     <nav class="ddl-tabs"> <a class="ddlf-btn secondary">…</a> … </nav>  */
.ddl-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-behavior: smooth;
    gap: 8px;
}
.ddl-tabs::-webkit-scrollbar { height: 0; display: none; }
.ddl-tabs > * {
    flex: 0 0 auto;
    white-space: nowrap;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}
.ddl-tabs.has-end {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
}
.ddl-tabs.has-start {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 28px);
            mask-image: linear-gradient(to right, transparent, #000 28px);
}
.ddl-tabs.has-start.has-end {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
}

/* ── R11 · Dialogbreite ───────────────────────────────────────────────
   R4 sagt: schmal sind nur Dialoge. WIE schmal stand nirgends, also hat
   jedes Projekt es selbst erfunden (gemessen: min-width 480/520/760px an
   drei Dialogen EINER Seite — bei 390px lagen bis zu 370px außerhalb des
   Bildes, und weil der Hintergrund fixed ist, waren die Knöpfe darin
   unerreichbar). Ab jetzt EIN Baustein. */
.ddlf-dialog {
    width: min(600px, calc(100vw - 32px));
    min-width: 0;
    box-sizing: border-box;
}
.ddlf-dialog--schmal { width: min(420px, calc(100vw - 32px)); }
.ddlf-dialog--breit  { width: min(880px, calc(100vw - 32px)); }

/* ── Datei-Feld — Button statt nativem „Datei auswählen“-Control ──
   <label class="ddlf-file">
     <input type="file" name="…">
     <span class="ddlf-btn">↑ Datei auswählen</span>
     <span class="ddlf-file-name" data-empty="Keine Datei gewählt">Keine Datei gewählt</span>
   </label>
   Dateinamen schreibt ddl-forms.js (Auto-Init, mehrere → „N Dateien gewählt“). */
.ddlf-file { display: flex; align-items: center; gap: 12px; min-height: 42px; cursor: pointer; min-width: 0; position: relative; }
.ddlf-file > input[type="file"] {
    position: absolute; width: 1px; height: 1px; opacity: 0;
    clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.ddlf-file > input[type="file"]:focus-visible ~ .ddlf-btn {
    border-color: var(--ddl-accent);
    box-shadow: 0 0 0 3px var(--ddl-accent-glow);
}
.ddlf-file-name {
    font-size: 13px; color: var(--ddl-text-soft);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.ddlf-file.has-file .ddlf-file-name { color: var(--ddl-text); font-weight: 600; }