:root {
    --bs-body-font-size: 11px;
    --gds-fontsize: 11px;

    /* ── Anzeige-Einstellungen (Modal "Anzeige", js/gds-display-settings.js) ──
       Diese Werte sind die FIXEN Standardwerte ("Auf Standard zurücksetzen").
       Zur Laufzeit überschreibt das Modul sie auf :root aus dem localStorage.
       Grenzen/Defaults werden in GDS_DISPLAY_CFG gepflegt — hier nur Fallback. */
    --gds-fs-maintable: 11px;   /* Schrift Zeilen Haupttabellen          */
    --gds-fs-formtable: 11px;   /* Schrift Zeilen Tabellen in Formularen */
    --gds-fs-button:    13px;   /* Schrift Schaltflächen                 */
    --gds-fs-label:     11px;   /* Schrift Bezeichnungen                 */
    --gds-fs-tabs:      11px;   /* Schrift Tab-Bezeichnungen             */
    --gds-pad-maintable: 2pt;   /* Abstand oben=unten Haupttabellen      */
    --gds-pad-formtable: 2pt;   /* Abstand oben=unten Formular-Tabellen  */
}

/* ── Phase 7.4: Formular-Gruppenrahmen (ersetzt w2ui-group) ─────────
   Sichtbarer Rahmen um Eingabe-Gruppen, analog zum alten w2ui-group */
.gds-form-group {
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    padding: 0.25rem 0;
    margin-bottom: 0.5rem;
}

/* ── Phase 7.6: Toolbar — horizontales Scroll statt umbrechen ──────
   Toolbar-Zeile scrollt unsichtbar, Buttons bleiben auf einer Linie */
.gds-toolbar-scroll {
    overflow-x: scroll;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
}
.gds-toolbar-scroll::-webkit-scrollbar {
    display: none;
}

/* ── Toolbar-Icons (CI-Satz aus images/16x16) ──────────────────────
   Erzeugt von _iconHtml() in js/gds-compat.js, sobald das img-Token des
   Items in ICON_MAP steht.

   Groesse bewusst in em, NICHT in px: die Schaltflaechen-Schrift ist ueber
   "Anzeige" frei einstellbar (--gds-fs-button, 10-18px, Default 13; siehe
   .btn weiter unten). Ein festes 16px-Icon wuerde bei 10px-Schrift die
   Zeilenhoehe der Leiste aufblaehen und bei 18px verloren wirken. 1.25em
   trifft bei der Default-Schrift die native Groesse der PNGs (13 x 1.25 =
   16.25px) und waechst/schrumpft danach mit.

   vertical-align in em aus demselben Grund - ein fester px-Versatz saesse
   bei kleiner Schrift zu tief. */
.gds-tb-icon {
    width:  1.25em;
    height: 1.25em;
    vertical-align: -.23em;
    margin-right: .35em;
}
/* Ohne das leuchtet das Icon im ausgegrauten Knopf unveraendert weiter
   (Bootstrap dimmt nur Text und Rahmen). */
.btn:disabled .gds-tb-icon,
.btn.disabled .gds-tb-icon {
    opacity: .45;
}

/* ── Phase 7.2: Tab-Navigation — horizontales Scroll auf Mobile ────
   #mainTabsDiv scrollt horizontal; Scrollbar unsichtbar; Touch-Target ≥ 36px */
#mainTabsDiv {
    overflow-x: scroll;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
}
#mainTabsDiv::-webkit-scrollbar {
    display: none;
}
@media (max-width: 767.98px) {
    #mainTabsDiv .nav-link {
        min-height: 36px;
        display: flex !important;
        align-items: center;
    }
}

/* ── Phase 7.1: Layout via Bootstrap-Klassen (index.php) ───────────
   body        → d-flex flex-column height:100dvh overflow-hidden
   nav.navbar  → flex-shrink-0
   #contents   → flex-grow-1 d-flex flex-column overflow-hidden
   #mainTabsDiv→ flex-shrink-0
   #mainGrid…  → flex-grow-1   (h-100 entfernt)
   #footer     → flex-shrink-0  (fixed-bottom entfernt)
   CSS-Overrides nicht nötig — Bootstrap-Utilities reichen. ──────── */

/* Footer war fixed-bottom (position:fixed) — jetzt flex-shrink-0 im Flow.
   Falls Bootstrap-CSS noch position:fixed setzt: defensiv überschreiben. */
#footer {
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
}

/* Touch-Scroll für scrollbare Bereiche */
.tabulator-tableHolder,
.gds-window-body {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 575.98px) {
    /* Footer: Mini-Logo statt vollem Schriftzug */
    #footer {
        padding-top: 1px !important;
        padding-bottom: 1px !important;
        line-height: 1;
    }
    #footer img {
        height: 10px !important;
    }
}

body {
    font-size: 11px;
}

.tabulator,
.tabulator .tabulator-header,
.tabulator .tabulator-header .tabulator-col,
.tabulator .tabulator-row,
.tabulator .tabulator-row .tabulator-cell {
    font-size: 11px;
}

.tabulator .tabulator-row {
    min-height: 20px;
}

.tabulator .tabulator-row .tabulator-cell {
    padding: 2px 4px !important;
}

/* Kompakter Spalten-Header */
.tabulator .tabulator-header .tabulator-col .tabulator-col-content {
    padding: 2px 4px;
}

/* Kompakter Filter-Input */
.tabulator .tabulator-header .tabulator-col .tabulator-header-filter {
    margin-top: 1px;
}

.tabulator .tabulator-header .tabulator-col .tabulator-header-filter input {
    padding: 1px 4px;
    font-size: 10px;
    line-height: 1.2;
    height: auto;
    min-height: unset;
}

/* ── Anzeige-Einstellungen: Variablen wirken lassen ───────────────────────
   Die Grid-Container bekommen in gds-grids.js die Klasse .gds-grid-main
   (Haupttabellen) bzw. .gds-grid-form (Tabellen in Formularen, d.h. innerhalb
   einer .gds-window). Höhere Spezifität + spätere Quelle als die generischen
   .tabulator-Regeln oben → diese gewinnen. */
.gds-grid-main .tabulator-row .tabulator-cell {
    font-size: var(--gds-fs-maintable);
    padding-top:    var(--gds-pad-maintable) !important;
    padding-bottom: var(--gds-pad-maintable) !important;
}
.gds-grid-form .tabulator-row .tabulator-cell {
    font-size: var(--gds-fs-formtable);
    padding-top:    var(--gds-pad-formtable) !important;
    padding-bottom: var(--gds-pad-formtable) !important;
}

/* Schaltflächen: über Bootstraps eigene Button-Variable, damit Padding/
   Line-Height konsistent skalieren. Gilt auch für .btn-sm (spätere Quelle). */
.btn {
    --bs-btn-font-size: var(--gds-fs-button);
}

/* Bezeichnungen (Formular-Captions). Standard-Label-Klassen + Opt-in-Klasse
   .gds-label für Legacy-Captions ohne form-label-Markup. */
.form-label,
.col-form-label,
.form-check-label,
.gds-label {
    font-size: var(--gds-fs-label);
}

/* Tab-Bezeichnungen (Haupt-Tab-Strip #mainTabsDiv und Formular-Tabs, beide
   ul.nav-tabs > a.nav-link). Trifft NICHT die obere Navbar (.navbar-nav). */
.nav-tabs .nav-link {
    font-size: var(--gds-fs-tabs);
}

/* Reiter-Optik: Bootstrap zeichnet inaktive Reiter randlos und farblos, sie
   wirken dadurch wie normale Textlinks. Inaktive bekommen deshalb Fläche +
   Rahmen, der aktive hebt sich durch weisse Fläche (geht in den Inhalt über),
   farbige Oberkante und fette Schrift ab. Farben aus der Palette des
   vertikalen Splitters (#e3e8ef / #c8d4e8 / #8aa0c0). */
.nav-tabs {
    --bs-nav-tabs-border-color: #c8d4e8;
    background: #eff2f7;
    padding: 2px 2px 0 2px;
    gap: 2px;                       /* ul.nav ist flex → trennt die Reiter */
}
.nav-tabs .nav-link {
    background: #dde4ef;
    border-color: #c8d4e8 #c8d4e8 var(--bs-nav-tabs-border-color);
    color: #3d5878;
}
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
    background: #e9eff8;
    border-color: #8aa0c0 #8aa0c0 var(--bs-nav-tabs-border-color);
    color: #1b3a63;
}
.nav-tabs .nav-link.active {
    background: #fff;
    color: #12325a;
    font-weight: 600;
    border-color: #8aa0c0 #8aa0c0 #fff;
    box-shadow: inset 0 2px 0 0 #0d6efd;   /* farbige Oberkante */
}
.nav-tabs .nav-link.disabled {
    background: #eef1f5;
    color: #9aa5b1;
}

/* Vertikaler Splitter (z.B. Touren/Stationen): per Maus + Touch ziehbar.
   touch-action:none verhindert Scrollen beim Touch-Drag auf dem Griff. */
.gds-vsplit {
    flex: 0 0 9px;
    height: 9px;
    cursor: row-resize;
    background: #e3e8ef;
    border-top: 1px solid #c8d4e8;
    border-bottom: 1px solid #c8d4e8;
    touch-action: none;
    position: relative;
    user-select: none;
}
.gds-vsplit::before {           /* Greif-Indikator */
    content: '';
    position: absolute;
    left: 50%; top: 50%;
    width: 44px; height: 3px;
    transform: translate(-50%, -50%);
    background: #8aa0c0;
    border-radius: 2px;
}
.gds-vsplit:hover { background: #d2dbe9; }

html[lang="de-DE"] .lang-en,
html[lang="en-EN"] .lang-de {
    display: none;
  }

.copy-area {
  -webkit-user-select: text; /* Safari */
  user-select: text;         /* Standard */
}

.copy-field {
    cursor: pointer;
}

.copy-field:hover {
    background: #eef;
}

.input-group>input.shortInput {
	flex: 0 1 55px;
}

/* ── Unterschrift: "Neuer Text"-Auswahl in der sig_toolbar responsive ──────
   Die sig_toolbar wird vom GdsToolbar-Shim (gds.w2toolbar, gds-compat.js)
   gerendert – NICHT als echtes w2ui. Markup:
     #div_sigButton > .gds-toolbar-scroll (d-flex flex-nowrap, overflow-x:scroll)
                        > <button>… + .gds-sig-text (html-Item, direkt)
   Auf breiten Screens: festes Textfeld in der (horizontal scrollbaren)
   Button-Zeile. */
.gds-sig-text {
    padding: 3px 10px;
    min-width: 320px;
    max-width: 560px;
}
/* Vorgabetexte ($signMessages) als Bootstrap-Dropdown - datalist/showPicker()
   funktioniert in Firefox (Android) nicht. Positionierung uebernimmt
   GdsToolbar._initDropdowns() (Popper-Strategie 'fixed'). */
.gds-sig-menu {
    max-width: min(90vw, 560px);
}
.gds-sig-menu .dropdown-item {
    white-space: normal;   /* lange Vorgabetexte umbrechen statt abschneiden */
    padding: .5rem .75rem; /* touch-taugliche Trefferflaeche auf Tablets */
}
@media (max-width: 575.98px) {
    /* Auf schmalen Screens Zeile umbrechen lassen; das Textfeld rutscht als
       volle Breite in eine eigene Zeile unter die Buttons.
       .flex-nowrap ist eine Bootstrap-Utility (!important) -> !important nötig. */
    #div_sigButton .gds-toolbar-scroll {
        flex-wrap: wrap !important;
        overflow-x: visible;
    }
    #div_sigButton .gds-sig-text {
        flex: 1 0 100%;
        min-width: 0;
        max-width: none;
        width: 100%;
        margin-top: 4px;
    }
}

.form-control,
.form-select {
	border: 1px solid #bbbbb0;
  	border-radius: 3px;
}  	

.form-control:focus,
.form-select:focus {
    border-color: #72b2ff;
    box-shadow: 0 0 0 0.2rem rgba(10, 10, 255, 0.75);
} 

.form-control:invalid,
.form-select:invalid {
  box-shadow: 0 0 5px 1px red;
}

.form-control:focus:invalid,
.form-select:focus:invalid {
  border-color: #72b2ff;
  box-shadow: 0 0 0 0.2rem rgba(10, 10, 255, 0.75);
}

.w2ui-grid-box {
	width: 100% !important;
	height: 100% !important;
}

.auto-expand-textarea {
    width: 100%;
    min-height: 50px;
    max-height: 220px;
    overflow-y: hidden;
}

.nav-link.boxed {
	padding-left: 5px;
	outline: 1px solid silver;
	outline-offset: -5px;
}

.navbar-toggler-icon{
    font-size: 0.9em;
}

@keyframes blinker {
  50% { opacity: 0; }
}
.blink {
  animation: blinker 1.5s linear infinite;
}

/* ── Expandable cell text (reparaturen Spalten 17/18) ──── */
.gds-expandable-text {
    cursor: pointer;
    display: block;
}
.gds-expandable-text.gds-collapsed {
    max-height: 1.4em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.gds-expandable-text.gds-expanded {
    white-space: pre-wrap;
    word-break: break-word;
    max-height: none;
}

/* ── IRIS-Bereiche ausgeblendet (js/gds-iris-panel.js) ──────────────────
   Gesetzt wird die Klasse an der Bootstrap-Zeile des Reiters "Arbeiten/
   Ersatzteile"; die rechte Spalte mit den IRIS-Karten verschwindet, die linke
   nimmt den Platz ein. Bewusst display:none statt .visually-hidden — letzteres
   ist im Formular schon für andere Umschaltungen belegt (ET-Detail/Retoure,
   IRIS-Synonyme) und würde die Layoutfläche weiter beanspruchen. */
.gds-iris-hidden > #div_repIrisCol { display: none; }
.gds-iris-hidden > #div_repWorkCol { flex: 0 0 100%; max-width: 100%; }

/* ── Klick-Umschalter für readonly-Textareas (Mobil ohne Resize-Griff) ── */
.gds-resizable-field {
    /* Platz oben rechts, damit der Eck-Button den Text nicht überdeckt */
    padding-right: 2rem;
}
.gds-resizable-field--expanded {
    height: 60vh !important;
    max-height: 60vh !important;
    resize: none !important;
    overflow-y: auto !important;
}
.gds-resize-toggle {
    position: absolute;
    /* top/right werden in initTextareaSizeToggles() je nach Container-Padding gesetzt */
    top: 4px;
    right: 4px;
    z-index: 5;
    padding: 0 .25rem;
    line-height: 1.4;
    color: #6c757d;
    background-color: rgba(255, 255, 255, .65);
    border: 1px solid rgba(108, 117, 125, .35);
    border-radius: .2rem;
    cursor: pointer;
}
.gds-resize-toggle:hover {
    color: #212529;
    background-color: rgba(255, 255, 255, .9);
}

/* ── KI-Knopf am Textfeld (js/gds-ai.js) ───────────────────
   Gleiche Optik wie der Größen-Umschalter, aber in der UNTEREN rechten Ecke:
   die obere gehört .gds-resize-toggle, der bei einem gesperrten Auftrag an
   derselben Textarea auftauchen kann. */
.gds-ai-field {
    /* Platz unten, damit der Knopf die letzte Zeile nicht überdeckt */
    padding-bottom: 1.7rem;
}
.gds-ai-btn {
    position: absolute;
    bottom: 6px;
    right: 6px;
    z-index: 5;
    padding: 0 .25rem;
    line-height: 1.4;
    color: #6c757d;
    background-color: rgba(255, 255, 255, .65);
    border: 1px solid rgba(108, 117, 125, .35);
    border-radius: .2rem;
    cursor: pointer;
}
.gds-ai-btn:hover:not(:disabled) {
    color: #212529;
    background-color: rgba(255, 255, 255, .9);
}
.gds-ai-btn:disabled {
    opacity: .45;
    cursor: default;
}
/* Offline ist der Knopf bereits per JS gesperrt; das hier ist nur die Anzeige
   (Gegenstück zur Einfärbung des Formulars in css/gds-offline.css). */
body.gds-offline-active .gds-ai-btn {
    opacity: .45;
}

/* Vorschau-Fenster: die Kopfzeilen beider Spalten müssen gleich hoch sein,
   damit "Bisher" links und die Reiter rechts auf einer Linie sitzen. */
.gds-ai-head {
    min-height: 32px;
    margin-bottom: 2px;
}
/* Reiter je Versuch. Die Elemente sind <li> und keine Links (kein Ziel), die
   nav-tabs-Optik von Bootstrap greift dort nicht von allein. */
.gds-ai-tabs {
    flex-wrap: wrap;
    row-gap: 2px;
    border-bottom: 1px solid #dee2e6;
}
.gds-ai-tabs .nav-link {
    border: 1px solid transparent;
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
    margin-bottom: -1px;
    color: #6c757d;
    font-size: .8125rem;
    white-space: nowrap;
}
.gds-ai-tabs .nav-link:hover {
    border-color: #e9ecef #e9ecef #dee2e6;
    color: #212529;
}
.gds-ai-tabs .nav-link.active {
    color: #212529;
    background-color: #fff;
    border-color: #dee2e6 #dee2e6 #fff;
}

/* ── Row-Expand Detail (onExpand) ─────────────────────── */
.gds-tabulator .tabulator-row {
    flex-wrap: wrap;
}

/* Hover-Effekt: Tabulators eigene Regel hängt an .tabulator-selectable,
   das bei MultiSelect-Grids fehlt (selectableRowsCheck:()=>false unterdrückt
   den Default-Toggle und damit die Klasse). */
.gds-tabulator .tabulator-row:not(.tabulator-selected):hover {
    background-color: #ced4da;
    cursor: pointer;
}
.gds-tabulator .tabulator-row:not(.tabulator-selected):hover .tabulator-cell {
    background-color: inherit;
}
.gds-row-detail-container {
    order: 999;
    width: 100%;
    background: #eef2f7;
    border-top: 1px solid #c8d4e8;
    font-size: 11px;
    overflow: hidden;
    box-sizing: border-box;
}
.gds-expand-btn {
    width: 18px;
    height: 18px;
    padding: 0;
    font-size: 10px;
    line-height: 1;
    border-radius: 2px;
    cursor: pointer;
    background: transparent;
    border: 1px solid #999;
    color: #555;
}

/* ── Statusfarben (js/gds-status-colors.js) ───────────────────────────────
   Die Zeile bekommt im rowFormatter (js/gds-grids.js) die Klasse
   .gds-statuscolor und die beiden Variablen --gds-status-bg / --gds-status-fg.
   Spezifitaet: .tabulator-row.gds-statuscolor:not(.tabulator-selected) = 0,3,0
   schlaegt .tabulator-row.tabulator-row-even (0,2,0) aus dem frueher geladenen
   tabulator_bootstrap5.min.css — das Zebramuster tritt also zurueck.
   Die Selektion (.tabulator-selected, #9abcea) bleibt bewusst staerker, damit
   die markierte Zeile immer erkennbar bleibt. */
.tabulator-row.gds-statuscolor:not(.tabulator-selected) {
    background-color: var(--gds-status-bg);
}
.tabulator-row.gds-statuscolor:not(.tabulator-selected) .tabulator-cell {
    background-color: inherit;
    color: var(--gds-status-fg, inherit);
}
/* muss die allgemeine Hover-Regel weiter oben (0,4,0) ueberbieten */
.gds-tabulator .tabulator-row.gds-statuscolor:not(.tabulator-selected):hover {
    background-color: var(--gds-status-bg);
    filter: brightness(.94);
}

/* Statusfarbe im Status-Filter-Dropdown der Toolbar. Die Farbe setzt
   addFilterItems() (inc/daisy_gedasys.php) am Item, das Markup entsteht in
   GdsToolbar._menuItemHtml (js/gds-compat.js). Gruppenfilter und "alle"
   bleiben neutral. */
.dropdown-item.gds-item-color {
    background-color: var(--gds-item-bg);
    color: var(--gds-item-fg, inherit);
}
.dropdown-item.gds-item-color:hover,
.dropdown-item.gds-item-color:focus,
.dropdown-item.gds-item-color:active {
    background-color: var(--gds-item-bg);
    color: var(--gds-item-fg, inherit);
    filter: brightness(.94);
}

/* ── Farbauswahl im Reiter "Statusfarben" (js/gds-display-settings.js) ─────
   Eine Zeile je Status: Name links, Farbkacheln rechts. Unter 576px wandern die
   Kacheln unter den Namen, damit die Zeile nicht ueberlaeuft. */
.gds-sc-list {
    max-height: 50vh;
    overflow-y: auto;
}
.gds-sc-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 3px 0;
    border-bottom: 1px solid #f0f2f5;
}
.gds-sc-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--gds-fs-label);
}
.gds-sc-swatches {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 3px;
}
.gds-sc-sw {
    width: 20px;
    height: 20px;
    padding: 0;
    border: 1px solid #adb5bd;
    border-radius: 3px;
    background: #fff;
    cursor: pointer;
    line-height: 1;
}
.gds-sc-sw.gds-sc-none {
    color: #6c757d;
    font-size: 13px;
}
.gds-sc-sw.is-active,
.gds-sc-custom.is-active {
    outline: 2px solid #0d6efd;
    outline-offset: 1px;
    border-color: #0d6efd;
}
.gds-sc-custom {
    width: 26px;
    height: 20px;
    padding: 0;
    border: 1px solid #adb5bd;
    border-radius: 3px;
    background: #fff;
    cursor: pointer;
    margin-left: 4px;
}

@media (max-width: 575.98px) {
    .gds-sc-row     { flex-direction: column; align-items: stretch; }
    .gds-sc-swatches { flex-wrap: wrap; }
}

/* ── Selektions-Cursor (Pfeiltasten-Fokus) ────────────── */
.tabulator-row.gds-row-cursor {
    box-shadow: inset 0 0 0 2px #0d6efd;
}

/* ── Mobile Action-Mode (Long-Press toggelt) ─────────── */
.gds-tabulator.gds-multi-mode .tabulator-row {
    border-left: 3px solid #0d6efd;
}

/* ── Datei-Typ-Zuordnung (filetype4.html + filetype5.html im setFileTypeWindow)
   Markup: .gds-form-body > .ft4 > .ft4-options + .ft4-preview  (analog .ft5-*)
   Die Optionen sind per Griff sortierbar (js/gds-filetype-order.js).
   filetype5 teilt sich dieses Layout und ergänzt nur die Optionen-Optik
   (Rahmen + Mindesthöhe, siehe eigener Block weiter unten).

   Unter 576px macht _calcGeom (gds-compat.js) das Fenster zum Vollbild — dort
   ist die Höhe reichlich, die Breite knapp: Optionen oben, Vorschau darunter.
   Ab 576px (vor allem Phone im Querformat) ist es umgekehrt; gestapelt wären
   die unteren Optionen dann nicht mehr erreichbar. Deshalb steht die Vorschau
   dort neben den Optionen. Der Breakpoint entspricht bewusst dem von
   _calcGeom, damit Vollbild und gestapeltes Layout immer zusammenfallen. */
.ft4,
.ft5 {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.ft4-options,
.ft5-options {
    /* Nur so hoch/breit wie nötig; schrumpft und scrollt erst bei Platzmangel. */
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
}
/* ── Sortierbare Datei-Typ-Optionen (js/gds-filetype-order.js) ─────────────
   Gilt für alle filetype-Templates (2, 3, 4) — deshalb ft-, nicht ft4-.

   Griff + Radio + Beschriftung nebeneinander. Bootstraps .form-check setzt das
   Radio per float in den linken Einzug — im Flex-Kontext greift das nicht mehr,
   deshalb Einzug und float hier neutralisieren. */
.ft-opt {
    display: flex;
    align-items: flex-start;
    gap: 0.25rem;
    padding-left: 0;
}
.ft-opt .form-check-input {
    float: none;
    margin-left: 0;
    flex: 0 0 auto;
}
.ft-opt .form-check-label {
    min-width: 0;
}
/* touch-action:none NUR am Griff — sonst ließe sich die Optionsliste auf
   Touch-Geräten nicht mehr scrollen.
   Die Trefferfläche kommt aus align-self:stretch (volle Zeilenhöhe) + min-width.
   Kein min-height: die Liste ist bewusst dicht, und schon 24px pro Zeile lassen
   die 11 Optionen im Querformat nicht mehr ohne Scrollen ins Fenster passen
   (siehe Prüfung B in pw-test-filetype4.mjs). */
.ft-grip {
    flex: 0 0 auto;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    margin-left: -0.25rem;
    color: #adb5bd;
    /* Feste Größe: das Griff-Zeichen soll den Schriftgrößen-Einstellungen der
       Bezeichnungen nicht folgen (bei 11px wäre es kaum zu sehen). */
    font-size: 14px;
    line-height: 1;
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}
.ft-grip:active {
    cursor: grabbing;
}
.ft-opt.ft-dragging {
    opacity: 0.6;
    outline: 1px dashed #0d6efd;
}
.ft4-preview,
.ft5-preview {
    /* Bekommt den restlichen Platz — gestapelt die Resthöhe, nebeneinander die
       Restbreite. */
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    overflow: auto;
    padding: 0.25rem;
    display: flex;
    flex-direction: column;
}
/* Bild wird nie über seine natürliche Größe aufgeblasen (sonst umschlösse der
   Rahmen bei kleinen Bildern viel Leerraum), skaliert aber große Fotos herunter,
   bis sie in die Vorschau passen. */
.ft4-preview #preview-img,
.ft5-preview #preview-img {
    flex: 0 1 auto;
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
    border: 1px solid #ccc;
    object-fit: contain;
    object-position: left top;
}
@media (min-width: 576px) {
    .ft4,
    .ft5 {
        flex-direction: row;
    }
    .ft4-options {
        /* 150px + Platz für den Griff */
        flex: 0 0 175px;
    }
    .ft5-options {
        /* Etwas breiter als ft4: die Rahmen kosten Innenabstand, und
           "Motherboard alt" ist die längste einzeilige Beschriftung. */
        flex: 0 0 190px;
    }
}

/* ── filetype5: gerahmte Optionen ─────────────────────────────────────────
   Jede Option bekommt einen eigenen Rahmen und eine Mindesthöhe, damit die
   Liste ruhiger wirkt und der Finger sicher trifft.

   38px ist die natürliche Höhe einer zweizeiligen Option: einzeilige werden
   darauf aufgefüllt, sodass 12 der 13 Optionen exakt gleich hoch sind. Nur
   "Sonstiges" (3 Zeilen, 54px) ist höher. Bewusst min-height statt height —
   mit fester Höhe liefe der Text der mehrzeiligen Optionen aus dem Rahmen.

   Maß bewusst in px, nicht in rem: gedasys_fv.css setzt
   html,body { font-size: var(--gds-fontsize) } = 11px, hier ist 1rem also 11px
   und 2rem wären 22px — exakt die Höhe, die einzeilige Optionen ohnehin haben.
   Die Anzeige-Einstellungen (gds-display-settings.js) ändern --gds-fontsize
   nicht, sondern eigene Variablen; rem würde ihnen also gar nicht folgen. */
.ft5-options {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.25rem;
}
.ft5-options .ft-opt {
    /* Nicht schrumpfen: als Flex-Kinder würden die Optionen sonst gestaucht,
       sobald sie zusammen höher sind als der Behälter — "Sonstiges" fiele von
       54px auf die 38px min-height zurück und der Text liefe aus dem Rahmen.
       Stattdessen soll .ft5-options scrollen (overflow-y: auto, siehe oben). */
    flex: 0 0 auto;
    min-height: 38px;
    /* Einzeilige Beschriftungen sonst oben klebend im aufgefüllten Rahmen. */
    align-items: center;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    padding: 0.125rem 0.25rem;
}
/* Die gewählte Option hervorheben: bei drei Optionen mit demselben Wert
   (Sonstiges/Motherboard alt/Motherboard) ist der Rahmen sonst die einzige
   Trennung und die Auswahl schwer zu sehen. */
.ft5-options .ft-opt:has(.form-check-input:checked) {
    border-color: #0d6efd;
    background-color: #e7f1ff;
}

/* ── Eingebaute Grid-Toolbar-Knöpfe: Fehlklicks vermeiden ─────────────────
   Der Shim (gds-grids.js) reiht die eingebauten Knöpfe als
   [+][×][Speichern][☰][custom…] auf, getrennt nur durch das gap-1 (4px) der
   .gds-toolbar-scroll. So wird leicht der Nachbar getroffen — beim ×-Knopf
   besonders ärgerlich, weil er löscht (bei Grids mit url sogar serverseitig).
   Dagegen wirken hier der Abstand und die rote Tönung für ×.
   Die Knopfgröße bleibt bewusst die der übrigen Toolbar-Knöpfe (btn-sm), damit
   die Zeile einheitlich aussieht; + und × wurden dafür ohne Sondermaße
   gelassen (frueher 34px/16px, wirkte neben "ET bestellen" & Co. zu wuchtig).
   Betrifft die Grids mit ×: file_types, rep_ersatzteile2, warenkorb_artikel. */
[data-gds-toolbar] #w2ui-delete {
    color: #b02a37;
    border-color: #b02a37;
}
[data-gds-toolbar] #w2ui-delete:hover,
[data-gds-toolbar] #w2ui-delete:focus {
    color: #fff;
    background-color: #b02a37;
    border-color: #b02a37;
}
/* Abstand rund um × — bewusst als margin des jeweiligen NACHBARN, damit kein
   überflüssiger Einzug entsteht, wenn × der erste Knopf der Toolbar ist
   (z.B. warenkorb_artikel). Das * greift auch für ☰ und break-Trenner.
   !important, weil der break-Trenner die Bootstrap-Utility mx-1 trägt und
   Bootstrap-Utilities selbst !important sind (vgl. .gds-sig-text oben).
   Maß bewusst in px statt rem/em: die Anzeige-Einstellungen
   (gds-display-settings.js) skalieren die Schrift, der Sicherheitsabstand zum
   Löschen-Knopf soll davon unabhängig bleiben. */
[data-gds-toolbar] #w2ui-add + #w2ui-delete,
[data-gds-toolbar] #w2ui-delete + * {
    margin-left: 14px !important;
}