/*
 * ThurSite-Editor.
 *
 * Bewusst zurueckhaltend: die Oberflaeche soll neben der Kundenwebseite
 * verschwinden, nicht mit ihr um Aufmerksamkeit ringen. Die einzige kraeftige
 * Farbe ist die Auswahlfarbe.
 */

:root {
    --ts-ui-bg:        #f1f5f9;
    --ts-ui-panel:     #ffffff;
    --ts-ui-bar:       #0f172a;
    --ts-ui-bar-text:  #e2e8f0;
    --ts-ui-line:      #e2e8f0;
    --ts-ui-text:      #1e293b;
    --ts-ui-muted:     #64748b;
    --ts-ui-accent:    #2563eb;
    --ts-ui-accent-dark: #1d4ed8;
    --ts-ui-ok:        #15803d;
    --ts-ui-warn:      #b45309;
    --ts-ui-error:     #b91c1c;
    --ts-ui-radius:    6px;

    --ts-sidebar-w:    228px;
    --ts-inspector-w:  300px;
    --ts-topbar-h:     52px;
    --ts-tabs-w:       68px;
}

* { box-sizing: border-box; }

html, body {
    height: 100%;
    margin: 0;
}

body {
    font: 400 13px/1.5 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    color: var(--ts-ui-text);
    background: var(--ts-ui-bg);
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   Kopfleiste
   -------------------------------------------------------------------------- */

.ts-topbar {
    height: var(--ts-topbar-h);
    background: var(--ts-ui-bar);
    color: var(--ts-ui-bar-text);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    gap: 16px;
}

.ts-topbar-left,
.ts-topbar-center,
.ts-topbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ts-logo {
    font-weight: 700;
    letter-spacing: -0.01em;
}

.ts-site-name {
    color: #94a3b8;
    padding-left: 12px;
    border-left: 1px solid #334155;
}

.ts-bp {
    width: 34px;
    height: 30px;
    display: grid;
    place-items: center;
    background: transparent;
    border: 0;
    border-radius: var(--ts-ui-radius);
    color: #94a3b8;
    cursor: pointer;
}
.ts-bp:hover { background: #1e293b; color: #e2e8f0; }
.ts-bp.ts-active { background: #334155; color: #fff; }

.ts-edit-scope {
    background: #1e293b;
    color: var(--ts-ui-bar-text);
    border: 1px solid #334155;
    border-radius: var(--ts-ui-radius);
    padding: 5px 8px;
    font: inherit;
}

/* --------------------------------------------------------------------------
   Aufteilung
   -------------------------------------------------------------------------- */

.ts-body {
    position: relative;
    display: grid;
    grid-template-columns: var(--ts-tabs-w) var(--ts-sidebar-w) 1fr var(--ts-inspector-w);
    height: calc(100% - var(--ts-topbar-h));
    transition: grid-template-columns .18s ease;
}

/* Eingeklappt bleibt die Reiterleiste stehen - man sieht weiter, was es
   gibt, und ein Klick holt das Fenster zurueck. */
.ts-body.ts-sidebar-collapsed {
    grid-template-columns: var(--ts-tabs-w) 0 1fr var(--ts-inspector-w);
}
.ts-body.ts-sidebar-collapsed .ts-sidebar {
    padding: 0;
    overflow: hidden;
    border-right-width: 0;
}

/* Rechte Leiste ebenso. Der Bearbeiten-Dialog hinter dem Zahnrad kann
   alles, was sie kann - deshalb ist sie standardmaessig zu. */
.ts-body.ts-inspector-collapsed {
    grid-template-columns: var(--ts-tabs-w) var(--ts-sidebar-w) 1fr 0;
}
.ts-body.ts-sidebar-collapsed.ts-inspector-collapsed {
    grid-template-columns: var(--ts-tabs-w) 0 1fr 0;
}
.ts-body.ts-inspector-collapsed .ts-inspector {
    padding: 0;
    overflow: hidden;
    border-left-width: 0;
}

.ts-sidebar-tabs {
    background: var(--ts-ui-panel);
    border-right: 1px solid var(--ts-ui-line);
    display: flex;
    flex-direction: column;
    padding: 6px;
    gap: 2px;
}

.ts-tab {
    display: grid;
    justify-items: center;
    gap: 3px;
    padding: 8px 2px;
    background: transparent;
    border: 0;
    border-radius: var(--ts-ui-radius);
    color: var(--ts-ui-muted);
    font-size: 10px;
    cursor: pointer;
}
.ts-tab:hover { background: var(--ts-ui-bg); color: var(--ts-ui-text); }
.ts-tab.ts-active { background: #dbeafe; color: var(--ts-ui-accent-dark); }

.ts-tab-collapse {
    margin-top: auto;
    border-top: 1px solid var(--ts-ui-line);
    border-radius: 0;
    padding-top: 10px;
}

.ts-sidebar,
.ts-inspector {
    background: var(--ts-ui-panel);
    border-right: 1px solid var(--ts-ui-line);
    overflow-y: auto;
    padding: 12px;
}

.ts-inspector {
    border-right: 0;
    border-left: 1px solid var(--ts-ui-line);
}

.ts-canvas {
    background: var(--ts-ui-bg);
    overflow: auto;
    display: grid;
    justify-items: center;
    padding: 20px;
}

.ts-canvas-frame {
    width: var(--ts-canvas-width, 100%);
    max-width: 100%;
    height: 100%;
    min-height: 100%;
    border: 0;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 12px rgba(15, 23, 42, .1);
    transition: width .2s ease;
}

/* --------------------------------------------------------------------------
   Griff an der linken Leiste
   --------------------------------------------------------------------------
   Die Leiste hat eine feste Breite, aber nicht alle Bereiche brauchen
   gleich viel: die Bausteinpalette kommt mit 228 Pixeln aus, die
   Gestaltung und die Einstellungen wollen mehr. Deshalb ein Griff, der
   die Breite von Hand verstellt - und in seiner Mitte der Knopf, der die
   Leiste ganz wegklappt. Eingeklappt rutscht derselbe Knopf an die
   Reiterleiste heran und holt sie zurueck.
   -------------------------------------------------------------------------- */

.ts-sidebar-griff {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 9px;
    margin-left: -4px;
    z-index: 6;
    cursor: col-resize;
    /* Waehrend des Ziehens verschiebt sich die Kante mit dem Zeiger; die
       weiche Bewegung des Rasters wuerde hinterherhinken. */
    transition: left .18s ease;
}
.ts-body.ts-zieht .ts-sidebar-griff,
.ts-body.ts-zieht { transition: none; }

.ts-sidebar-griff::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 4px;
    width: 1px;
    background: transparent;
}
.ts-sidebar-griff:hover::before,
.ts-body.ts-zieht .ts-sidebar-griff::before {
    background: var(--ts-ui-accent);
}

/* Eingeklappt ist nichts mehr zu ziehen - dann bleibt nur der Knopf. */
.ts-body.ts-sidebar-collapsed .ts-sidebar-griff { cursor: default; }

.ts-sidebar-schalter {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 18px;
    height: 42px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 1px solid var(--ts-ui-line);
    border-radius: 9px;
    background: var(--ts-ui-panel);
    color: var(--ts-ui-muted);
    cursor: pointer;
    opacity: .35;
    transition: opacity .15s ease, color .15s ease;
}
.ts-sidebar-griff:hover .ts-sidebar-schalter,
.ts-sidebar-schalter:focus-visible { opacity: 1; }
.ts-sidebar-schalter:hover { color: var(--ts-ui-accent); }

/* Eingeklappt darf der Knopf nicht erst beim Darueberfahren erscheinen -
   sonst findet niemand die Leiste wieder. */
.ts-body.ts-sidebar-collapsed .ts-sidebar-schalter { opacity: 1; }

/* Waehrend des Ziehens schluckt der Vorschaurahmen sonst jede
   Zeigerbewegung, und die Kante bleibt am Rand des Fensters haengen. */
.ts-body.ts-zieht iframe { pointer-events: none; }
.ts-body.ts-zieht { user-select: none; cursor: col-resize; }

/* --------------------------------------------------------------------------
   Bausteinpalette
   -------------------------------------------------------------------------- */

.ts-palette-group { margin-bottom: 18px; }
.ts-palette-group h3 {
    margin: 0 0 8px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ts-ui-muted);
}

/* Zwei Spalten statt drei: die Beschriftungen bleiben lesbar, und die
   Leiste kommt mit deutlich weniger Breite aus. */
.ts-palette-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}

.ts-palette-item {
    display: grid;
    justify-items: center;
    gap: 4px;
    padding: 9px 4px;
    background: var(--ts-ui-bg);
    border: 1px solid transparent;
    border-radius: var(--ts-ui-radius);
    color: var(--ts-ui-text);
    font-size: 10px;
    text-align: center;
    cursor: grab;
    user-select: none;
}
.ts-palette-item:hover {
    border-color: var(--ts-ui-accent);
    background: #eff6ff;
}
.ts-palette-item:active { cursor: grabbing; }

/* --- Gestaltungselemente -------------------------------------------------
 *
 * Als Liste, nicht als Raster: ein Element heisst "Bühne mit Buchungs-
 * leiste" und braucht eine Zeile Erklaerung. In einer Kachel von sechzig
 * Pixeln stuende davon der halbe erste Wort.
 */

.ts-elemente-suche {
    width: 100%;
    margin-bottom: 10px;
    padding: 7px 10px;
    border: 1px solid var(--ts-ui-line);
    border-radius: var(--ts-ui-radius);
    background: var(--ts-ui-panel);
    color: var(--ts-ui-text);
    font-size: 12px;
}
.ts-elemente-suche:focus {
    outline: none;
    border-color: var(--ts-ui-accent);
}

.ts-elemente-liste {
    display: grid;
    gap: 4px;
}

.ts-elemente-eintrag {
    display: grid;
    grid-template-columns: 20px 1fr;
    align-items: start;
    gap: 9px;
    width: 100%;
    padding: 8px 9px;
    background: var(--ts-ui-bg);
    border: 1px solid transparent;
    border-radius: var(--ts-ui-radius);
    color: var(--ts-ui-text);
    text-align: left;
    cursor: grab;
    user-select: none;
}
.ts-elemente-eintrag:hover {
    border-color: var(--ts-ui-accent);
    background: #eff6ff;
}
.ts-elemente-eintrag:active { cursor: grabbing; }

.ts-elemente-eintrag svg { margin-top: 1px; color: var(--ts-ui-muted); }

.ts-elemente-text { display: grid; gap: 2px; min-width: 0; }
.ts-elemente-text strong { font-size: 12px; font-weight: 600; }
.ts-elemente-text small {
    font-size: 11px;
    line-height: 1.35;
    color: var(--ts-ui-muted);
}

/* Wenn die Anlage keinen Browser hat, wird der Import zur Textabschrift.
   Das gehoert vor die Uebernahme gesagt, nicht danach. */
.ts-import-warnung {
    padding: 8px 10px;
    border-left: 3px solid var(--ts-ui-warn);
    background: #fffbeb;
    color: var(--ts-ui-warn);
}

.ts-drag-ghost {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    background: #1e293b;
    color: #fff;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
    opacity: .6;
}
.ts-drag-ghost.ts-drag-ok { opacity: 1; background: var(--ts-ui-accent); }

body.ts-dragging-external { cursor: grabbing; }

/* --------------------------------------------------------------------------
   Ebenenbaum
   -------------------------------------------------------------------------- */

.ts-layer-tree,
.ts-layer-tree ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ts-layer-row {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px 4px 0;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
}
.ts-layer-row:hover { background: var(--ts-ui-bg); }
.ts-layer-row.ts-selected { background: #dbeafe; color: var(--ts-ui-accent-dark); }
.ts-layer-row.ts-layer-dragging { opacity: .4; }

.ts-layer-row.ts-drop-before::before,
.ts-layer-row.ts-drop-after::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    height: 2px;
    background: #f97316;
}
.ts-layer-row.ts-drop-before::before { top: -1px; }
.ts-layer-row.ts-drop-after::after { bottom: -1px; }
.ts-layer-row.ts-drop-into { outline: 2px solid #f97316; outline-offset: -2px; }

.ts-layer-toggle {
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    background: none;
    border: 0;
    color: var(--ts-ui-muted);
    cursor: pointer;
    flex: 0 0 auto;
}
.ts-layer-toggle:disabled { visibility: hidden; }

.ts-layer-name {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ts-layer-actions {
    display: none;
    gap: 2px;
    flex: 0 0 auto;
}
.ts-layer-row:hover .ts-layer-actions { display: flex; }

.ts-layer-action {
    width: 22px; height: 22px;
    display: grid; place-items: center;
    background: none; border: 0;
    color: var(--ts-ui-muted);
    border-radius: 4px;
    cursor: pointer;
}
.ts-layer-action:hover { background: #fff; color: var(--ts-ui-error); }

/* --------------------------------------------------------------------------
   Eigenschaften
   -------------------------------------------------------------------------- */

.ts-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin-bottom: 10px;
    font-size: 11px;
}
.ts-breadcrumb button {
    background: none;
    border: 0;
    padding: 1px 4px;
    color: var(--ts-ui-muted);
    cursor: pointer;
    border-radius: 3px;
}
.ts-breadcrumb button:hover { background: var(--ts-ui-bg); }
.ts-breadcrumb button.ts-current { color: var(--ts-ui-accent-dark); font-weight: 600; }
.ts-breadcrumb button + button::before { content: '›'; margin-right: 4px; color: #cbd5e1; }

.ts-props-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--ts-ui-line);
}
.ts-props-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}
.ts-props-actions { display: flex; gap: 2px; }

.ts-section { margin-bottom: 4px; }

.ts-section-head {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 7px 4px;
    background: none;
    border: 0;
    border-radius: 4px;
    font: 600 12px/1 inherit;
    color: var(--ts-ui-text);
    cursor: pointer;
}
.ts-section-head:hover { background: var(--ts-ui-bg); }

.ts-section-body { padding: 4px 4px 12px; }

.ts-field { margin-bottom: 10px; }
.ts-field > label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 3px;
    font-size: 11px;
    color: var(--ts-ui-muted);
}

.ts-field input[type="text"],
.ts-field input[type="number"],
.ts-field input[type="email"],
.ts-field input[type="password"],
.ts-field select,
.ts-field textarea {
    width: 100%;
    padding: 5px 7px;
    border: 1px solid var(--ts-ui-line);
    border-radius: 4px;
    font: inherit;
    background: #fff;
    color: inherit;
}
.ts-field input:focus,
.ts-field select:focus,
.ts-field textarea:focus {
    outline: 2px solid var(--ts-ui-accent);
    outline-offset: -1px;
    border-color: var(--ts-ui-accent);
}

.ts-field.ts-inherited input,
.ts-field.ts-inherited select { color: var(--ts-ui-muted); font-style: italic; }

.ts-inherited-mark {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .04em;
    background: #fef3c7;
    color: #92400e;
    padding: 1px 4px;
    border-radius: 3px;
    font-style: normal;
}

.ts-field-help {
    margin: 3px 0 0;
    font-size: 10px;
    color: var(--ts-ui-muted);
}

.ts-color { display: flex; gap: 4px; }
.ts-color input[type="color"] {
    width: 30px; height: 28px;
    padding: 0;
    border: 1px solid var(--ts-ui-line);
    border-radius: 4px;
    background: none;
    cursor: pointer;
    flex: 0 0 auto;
}
.ts-color input[type="text"] { flex: 1 1 auto; min-width: 0; }
.ts-color select { flex: 0 0 62px; }

.ts-link-field { display: grid; gap: 4px; }
.ts-image-field {
    display: grid;
    grid-template-columns: 46px 1fr auto;
    gap: 5px;
    align-items: center;
}
.ts-image-preview {
    width: 46px; height: 34px;
    background: var(--ts-ui-bg) center/cover no-repeat;
    border: 1px solid var(--ts-ui-line);
    border-radius: 4px;
}

.ts-icon-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
}
.ts-icon-grid button {
    aspect-ratio: 1;
    display: grid; place-items: center;
    background: var(--ts-ui-bg);
    border: 1px solid transparent;
    border-radius: 4px;
    color: var(--ts-ui-text);
    cursor: pointer;
}
.ts-icon-grid button:hover { border-color: var(--ts-ui-accent); }
.ts-icon-grid button.ts-selected { background: #dbeafe; border-color: var(--ts-ui-accent); }

.ts-menu-item {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 3px;
    margin-bottom: 4px;
}

/* Unterpunkte stehen eingerueckt unter ihrem Punkt - der Strich links
   zeigt, wie weit die Gruppe reicht. */
.ts-menu-item-unter {
    margin-left: 14px;
    padding-left: 8px;
    border-left: 2px solid var(--ts-ui-border, #d8dee9);
}
.ts-menu-item-unter input { font-size: 12px; }
button.ts-menu-item-unter { margin-bottom: 8px; }
.ts-shadow-field { display: grid; gap: 4px; }

/* --------------------------------------------------------------------------
   Seiten, Adressen, Medien
   -------------------------------------------------------------------------- */

.ts-page-list { list-style: none; margin: 0 0 12px; padding: 0; }

.ts-page-row {
    display: flex;
    align-items: center;
    border-radius: var(--ts-ui-radius);
}
.ts-page-row:hover { background: var(--ts-ui-bg); }
.ts-page-row.ts-current { background: #dbeafe; }

.ts-page-open {
    flex: 1 1 auto;
    display: grid;
    gap: 1px;
    padding: 7px 8px;
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
    color: inherit;
    min-width: 0;
}
.ts-page-title { font-weight: 500; }
.ts-page-path { font-size: 11px; color: var(--ts-ui-muted); }
.ts-page-actions { display: flex; align-items: center; gap: 2px; padding-right: 5px; }

.ts-page-add,
.ts-domain-add { display: flex; gap: 5px; margin-top: 8px; }
.ts-page-add input,
.ts-domain-add input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 5px 7px;
    border: 1px solid var(--ts-ui-line);
    border-radius: 4px;
    font: inherit;
}

.ts-domain {
    padding: 10px;
    border: 1px solid var(--ts-ui-line);
    border-radius: var(--ts-ui-radius);
    margin-bottom: 8px;
}
.ts-domain.ts-primary { border-color: var(--ts-ui-accent); background: #f8fafc; }

.ts-domain-head { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.ts-domain-name { font-weight: 600; word-break: break-all; }
.ts-domain-details { margin: 5px 0; }
.ts-domain-actions { display: flex; gap: 5px; margin-top: 7px; }

.ts-badge {
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 10px;
    background: var(--ts-ui-bg);
    color: var(--ts-ui-muted);
    white-space: nowrap;
}
.ts-badge-primary { background: #dbeafe; color: var(--ts-ui-accent-dark); }
.ts-badge-ok      { background: #dcfce7; color: var(--ts-ui-ok); }
.ts-badge-warnung { background: #fef3c7; color: var(--ts-ui-warn); }
.ts-badge-fehler  { background: #fee2e2; color: var(--ts-ui-error); }

.ts-move-box,
.ts-move-status {
    padding: 12px;
    border: 1px solid var(--ts-ui-line);
    border-radius: var(--ts-ui-radius);
    margin-bottom: 12px;
}
.ts-move-status { background: #eff6ff; border-color: #bfdbfe; }
.ts-move-box h3, .ts-move-status h3 { margin: 0 0 6px; font-size: 13px; }
.ts-move-state { font-weight: 600; color: var(--ts-ui-accent-dark); margin: 0 0 8px; }

.ts-move-steps {
    margin: 0 0 10px;
    padding-left: 18px;
    font-size: 11px;
    color: var(--ts-ui-muted);
}
.ts-move-steps li { margin-bottom: 2px; }

.ts-instructions table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
    margin: 6px 0;
    background: #fff;
}
.ts-instructions th, .ts-instructions td {
    border: 1px solid var(--ts-ui-line);
    padding: 4px 6px;
    text-align: left;
}
.ts-instructions code { font-size: 11px; word-break: break-all; }

.ts-checkbox { display: flex; align-items: center; gap: 6px; margin: 8px 0; font-size: 12px; }

.ts-upload {
    border: 2px dashed var(--ts-ui-line);
    border-radius: var(--ts-ui-radius);
    padding: 14px;
    text-align: center;
    margin-bottom: 12px;
}
.ts-upload.ts-dragover { border-color: var(--ts-ui-accent); background: #eff6ff; }

.ts-media-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}
.ts-media-tile {
    border: 1px solid var(--ts-ui-line);
    border-radius: var(--ts-ui-radius);
    padding: 6px;
    display: grid;
    gap: 4px;
}
.ts-media-preview {
    aspect-ratio: 4/3;
    background: var(--ts-ui-bg) center/cover no-repeat;
    border-radius: 4px;
    display: grid;
    place-items: center;
    color: var(--ts-ui-muted);
}
.ts-media-name {
    font-size: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ts-media-actions { display: flex; gap: 4px; align-items: center; }

.ts-theme-presets { margin-bottom: 16px; }
.ts-preset-grid { display: grid; gap: 5px; }
.ts-preset {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: var(--ts-ui-bg);
    border: 1px solid transparent;
    border-radius: var(--ts-ui-radius);
    cursor: pointer;
    font: inherit;
    color: inherit;
    text-align: left;
}
.ts-preset:hover { border-color: var(--ts-ui-accent); }
.ts-preset-swatches { display: flex; gap: 2px; }
.ts-preset-swatches i {
    width: 14px; height: 14px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, .1);
}

/* --------------------------------------------------------------------------
   Schaltflaechen, Meldungen, Dialoge
   -------------------------------------------------------------------------- */

/* `hidden` muss staerker sein als `display: inline-flex` - sonst bleibt
   ein verstecktes Element sichtbar, und man sucht den Fehler im
   Javascript. */
.ts-button[hidden] { display: none !important; }

.ts-button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    background: #fff;
    border: 1px solid var(--ts-ui-line);
    border-radius: var(--ts-ui-radius);
    font: 500 12px/1.4 inherit;
    color: var(--ts-ui-text);
    cursor: pointer;
    white-space: nowrap;
}
.ts-button:hover { background: var(--ts-ui-bg); }
.ts-button-primary {
    background: var(--ts-ui-accent);
    border-color: var(--ts-ui-accent);
    color: #fff;
}
.ts-button-primary:hover { background: var(--ts-ui-accent-dark); }
.ts-button-quiet { background: transparent; }

.ts-topbar .ts-button { border-color: #334155; background: #1e293b; color: var(--ts-ui-bar-text); }
.ts-topbar .ts-button:hover { background: #334155; }
.ts-topbar .ts-button-primary { background: var(--ts-ui-accent); border-color: var(--ts-ui-accent); }

.ts-icon-button {
    width: 28px; height: 28px;
    display: grid; place-items: center;
    background: none;
    border: 0;
    border-radius: 4px;
    color: inherit;
    cursor: pointer;
}
.ts-icon-button:hover { background: rgba(148, 163, 184, .25); }
.ts-icon-button:disabled { opacity: .35; cursor: default; }
.ts-icon-button.rotate-270 { transform: rotate(180deg); }

.ts-hint { color: var(--ts-ui-muted); font-size: 11px; margin: 4px 0; }
.ts-error { color: var(--ts-ui-error); font-size: 11px; margin: 4px 0; }

.ts-toasts {
    position: fixed;
    right: 16px;
    bottom: 16px;
    display: grid;
    gap: 8px;
    z-index: 9999;
    max-width: 380px;
}
.ts-toast {
    position: relative;
    padding: 10px 32px 10px 12px;
    border-radius: var(--ts-ui-radius);
    background: #1e293b;
    color: #f1f5f9;
    font-size: 12px;
    box-shadow: 0 6px 20px rgba(15, 23, 42, .2);
    animation: ts-toast-in .2s ease;
}
.ts-toast-ok      { background: #14532d; }
.ts-toast-warnung { background: #78350f; }
.ts-toast-fehler  { background: #7f1d1d; }
.ts-toast-out { opacity: 0; transition: opacity .3s; }
.ts-toast-close {
    position: absolute;
    top: 4px; right: 6px;
    background: none; border: 0;
    color: inherit;
    font-size: 16px;
    cursor: pointer;
    opacity: .6;
}

@keyframes ts-toast-in {
    from { transform: translateY(8px); opacity: 0; }
}

.ts-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    display: grid;
    place-items: center;
    z-index: 10000;
}

.ts-dialog {
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    width: min(440px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    box-shadow: 0 20px 50px rgba(15, 23, 42, .3);
}
.ts-dialog h2 { margin: 0 0 6px; font-size: 16px; }
.ts-dialog p { margin: 0 0 14px; color: var(--ts-ui-muted); }
.ts-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.ts-field-checkbox > label { justify-content: flex-start; gap: 6px; }

/* --------------------------------------------------------------------------
   Anmeldung und Leerzustaende
   -------------------------------------------------------------------------- */

.ts-login {
    width: min(360px, calc(100vw - 32px));
    margin: 12vh auto;
    background: #fff;
    padding: 28px;
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(15, 23, 42, .12);
    display: grid;
    gap: 12px;
}
.ts-login h1 { margin: 0; font-size: 22px; }
.ts-login label { display: grid; gap: 4px; font-size: 12px; color: var(--ts-ui-muted); }
.ts-login input {
    padding: 8px 10px;
    border: 1px solid var(--ts-ui-line);
    border-radius: var(--ts-ui-radius);
    font: inherit;
}
.ts-login button { justify-content: center; padding: 9px; }

.ts-empty-state {
    display: grid;
    place-content: center;
    gap: 8px;
    height: 100vh;
    text-align: center;
    color: var(--ts-ui-muted);
}
.ts-empty-state h1 { color: var(--ts-ui-text); margin: 0; }

/* --------------------------------------------------------------------------
   Bearbeiten-Dialog (Zahnrad in der Leiste)
   -------------------------------------------------------------------------- */

/* Heller Hintergrund: Änderungen wirken sofort, also soll die Vorschau
   dahinter noch lesbar bleiben. */
/* Sehr hell: Aenderungen wirken sofort, und der Dialog laesst sich
   beiseiteschieben - dann soll die Vorschau dahinter gut lesbar sein. */
.ts-backdrop-leicht { background: rgba(15, 23, 42, .10); align-items: flex-start; }

.ts-blockeditor {
    background: #fff;
    border-radius: 10px;
    width: min(760px, calc(100vw - 40px));
    max-height: calc(100vh - 80px);
    margin-top: 60px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .32);
}

.ts-blockeditor-kopf {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--ts-ui-line);
}
.ts-blockeditor-titel {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 14px;
}
.ts-blockeditor-ansichten { display: flex; gap: 2px; }

.ts-bp-klein {
    width: 28px; height: 26px;
    display: grid; place-items: center;
    background: none;
    border: 1px solid transparent;
    border-radius: 5px;
    color: var(--ts-ui-muted);
    cursor: pointer;
}
.ts-bp-klein:hover { background: var(--ts-ui-bg); }
.ts-bp-klein.ts-active {
    background: #dbeafe;
    border-color: var(--ts-ui-accent);
    color: var(--ts-ui-accent-dark);
}

.ts-blockeditor-koerper {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 176px 1fr;
    min-height: 0;
}

.ts-blockeditor-reiter {
    border-right: 1px solid var(--ts-ui-line);
    background: #f8fafc;
    padding: 8px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ts-blockeditor-reiter-knopf {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
    background: none;
    border: 0;
    border-radius: 5px;
    font: 500 12px/1.3 inherit;
    color: var(--ts-ui-muted);
    text-align: left;
    cursor: pointer;
}
.ts-blockeditor-reiter-knopf:hover { background: #fff; color: var(--ts-ui-text); }
.ts-blockeditor-reiter-knopf.ts-active {
    background: #dbeafe;
    color: var(--ts-ui-accent-dark);
}

.ts-blockeditor-inhalt { overflow-y: auto; padding: 16px; }

/* Zwei Spalten für kurze Felder — Abstände und Rahmen werden sonst zu einer
   endlosen Liste. */
.ts-blockeditor-raster {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 14px;
}
.ts-blockeditor-voll { grid-column: 1 / -1; }

.ts-blockeditor-fuss {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-top: 1px solid var(--ts-ui-line);
    background: #f8fafc;
}
.ts-blockeditor-fuss .ts-hint { flex: 1 1 auto; margin: 0; }

/* --- Texteditor im Dialog ------------------------------------------------ */

.ts-rte-leiste {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px;
    border: 1px solid var(--ts-ui-line);
    border-bottom: 0;
    border-radius: 5px 5px 0 0;
    background: #f8fafc;
}
.ts-rte-leiste button {
    min-width: 28px; height: 26px;
    background: none;
    border: 0;
    border-radius: 4px;
    font: 500 12px/1 inherit;
    color: var(--ts-ui-text);
    cursor: pointer;
}
.ts-rte-leiste button:hover { background: #e2e8f0; }
.ts-rte-trenner { width: 1px; height: 16px; background: var(--ts-ui-line); margin: 0 3px; }

.ts-rte-flaeche {
    min-height: 190px;
    max-height: 340px;
    overflow-y: auto;
    padding: 10px 12px;
    border: 1px solid var(--ts-ui-line);
    border-radius: 0 0 5px 5px;
    background: #fff;
    font-size: 14px;
    line-height: 1.6;
}
.ts-rte-flaeche:focus {
    outline: 2px solid var(--ts-ui-accent);
    outline-offset: -1px;
}
.ts-rte-flaeche p:first-child { margin-top: 0; }
.ts-rte-flaeche p:last-child { margin-bottom: 0; }

/* --- Bildkarte ----------------------------------------------------------- */

.ts-bild-vorschau {
    aspect-ratio: 16 / 9;
    max-height: 260px;
    background: var(--ts-ui-bg) center/contain no-repeat;
    border: 1px solid var(--ts-ui-line);
    border-radius: 6px;
    display: grid;
    place-items: center;
    color: var(--ts-ui-muted);
    font-size: 12px;
}
.ts-bild-vorschau.ts-leer { border-style: dashed; }
.ts-bild-knoepfe { display: flex; gap: 8px; margin-top: 10px; }

/* Schieberegler, etwa fuer die Deckkraft. */
.ts-regler { display: flex; align-items: center; gap: 6px; }
.ts-regler input[type="range"] { flex: 1 1 auto; min-width: 0; accent-color: var(--ts-ui-accent); }
/* Das Zahlenfeld ist bewusst beschreibbar: Wer genau 45 Grad will, tippt sie
   ein, statt am Regler zu zielen. Leer bedeutet "nicht gesetzt" - dann steht
   der neutrale Wert blass als Platzhalter darin. */
input.ts-regler-wert {
    flex: 0 0 62px;
    width: 62px;
    padding: 3px 6px;
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    text-align: right;
    border: 1px solid var(--ts-ui-line);
    border-radius: 4px;
    background: var(--ts-ui-panel);
    color: var(--ts-ui-text);
}
input.ts-regler-wert::placeholder { color: var(--ts-ui-muted); }

/* Umschalter der rechten Leiste: sichtbar, ob sie offen ist. */
.ts-topbar .ts-icon-button.ts-aktiv { background: #334155; color: #fff; }

/* --- Bearbeiten-Dialog verschieben --------------------------------------- */

.ts-blockeditor-kopf.ts-greifbar { cursor: grab; user-select: none; }
.ts-blockeditor-kopf.ts-greifbar:active { cursor: grabbing; }

/* Sobald der Dialog einmal bewegt wurde, sitzt er frei im Fenster. */
.ts-blockeditor.ts-frei {
    position: fixed;
    margin: 0;
}
.ts-blockeditor.ts-wird-geschoben {
    transition: none;
    box-shadow: 0 30px 70px rgba(15, 23, 42, .38);
}

/* --- Animationskarte ------------------------------------------------------ */

/* Der Abspielknopf steht ueber den Feldern: was man einstellt, will man
   sofort sehen - in der Vorschau laufen Animationen sonst nicht. */
.ts-anim-leiste {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    margin-bottom: 4px;
    background: var(--ts-ui-bg);
    border: 1px solid var(--ts-ui-line);
    border-radius: 6px;
}
.ts-anim-leiste .ts-button { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.ts-anim-leiste .ts-hint { margin: 0; flex: 1 1 auto; }

/* --- Felder eines Formulars ---------------------------------------------- */

.ts-formfelder { display: grid; gap: 8px; }
.ts-formfeld-liste { display: grid; gap: 4px; }

.ts-formfeld {
    border: 1px solid var(--ts-ui-line);
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
}
.ts-formfeld.ts-offen { border-color: var(--ts-ui-accent); }

.ts-formfeld-zeile {
    display: grid;
    grid-template-columns: auto 1fr auto auto auto auto;
    align-items: center;
    gap: 4px;
    padding: 5px 6px;
    background: var(--ts-ui-bg);
}
.ts-formfeld.ts-offen .ts-formfeld-zeile { background: #dbeafe; }

.ts-formfeld-griff {
    display: inline-flex;
    padding: 4px 2px;
    color: var(--ts-ui-muted);
    cursor: grab;
    touch-action: none;
}
.ts-formfeld-griff:active { cursor: grabbing; }

.ts-formfeld-name {
    min-width: 0;
    padding: 4px 2px;
    background: none;
    border: 0;
    font: 600 12px/1.3 inherit;
    color: var(--ts-ui-text);
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.ts-formfeld-art {
    font-size: 10px;
    color: var(--ts-ui-muted);
    white-space: nowrap;
    padding: 2px 6px;
    border-radius: 10px;
    background: #fff;
}
.ts-formfeld.ts-offen .ts-formfeld-art { background: rgba(255, 255, 255, .7); }

.ts-formfeld-knopf { padding: 4px; }

.ts-formfeld-einstellungen {
    display: grid;
    gap: 10px;
    padding: 12px 10px;
    border-top: 1px solid var(--ts-ui-line);
}
.ts-formfeld-einstellungen .ts-field-help { margin: 0; }

/* Beim Umordnen zeigt ein Strich, wohin die Zeile faellt. */
.ts-formfeld-liste.ts-wird-geordnet .ts-formfeld { transition: transform .1s ease; }
.ts-formfeld-liste.ts-wird-geordnet .ts-formfeld.ts-ziel {
    box-shadow: 0 -2px 0 0 var(--ts-ui-accent);
}

.ts-formfeld-dazu { justify-self: start; }

/* --- Aufklappbare Gruppen in einer Leiste --------------------------------- */

.ts-panel-gruppe { border-bottom: 1px solid var(--ts-ui-line); }

.ts-panel-gruppe-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 4px;
    background: none;
    border: 0;
    font: 600 12px/1.3 inherit;
    color: var(--ts-ui-text);
    text-align: left;
    cursor: pointer;
}
.ts-panel-gruppe-kopf svg { transition: transform .15s ease; opacity: .5; }
.ts-panel-gruppe-kopf.ts-offen svg { transform: rotate(90deg); }

.ts-panel-gruppe-koerper { padding: 0 0 12px; display: grid; gap: 10px; }

/* --- Bilderliste (Galerie, Slideshow) ------------------------------------ */

.ts-medienzeile { grid-template-columns: auto auto 1fr auto auto; }

.ts-medien-vorschau {
    width: 34px;
    height: 26px;
    flex: 0 0 auto;
    border-radius: 3px;
    overflow: hidden;
    background: repeating-linear-gradient(
        45deg, #e2e8f0, #e2e8f0 4px, #cbd5e1 4px, #cbd5e1 8px);
}
.ts-medien-vorschau img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- Auswahl einer Seitenvorlage ----------------------------------------- */

.ts-vorlagen {
    display: flex;
    flex-direction: column;
    width: min(1180px, calc(100vw - 40px));
    height: min(760px, calc(100vh - 60px));
    margin-top: 30px;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .32);
}

.ts-vorlagen-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    border-bottom: 1px solid var(--ts-ui-line);
    flex: 0 0 auto;
}
.ts-vorlagen-kopf h2 { margin: 0; font-size: 16px; }

.ts-vorlagen-name {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--ts-ui-line);
    background: var(--ts-ui-bg);
    flex: 0 0 auto;
}
.ts-vorlagen-name label { font: 600 12px/1.3 inherit; white-space: nowrap; }
.ts-vorlagen-name input { padding: 8px 12px; max-width: 420px; }

/* Zwei Spalten: links waehlen, rechts ansehen. */
.ts-vorlagen-koerper {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 330px 1fr;
    min-height: 0;
}

.ts-vorlagen-liste {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-right: 1px solid var(--ts-ui-line);
    background: var(--ts-ui-bg);
}

.ts-vorlagen-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--ts-ui-line);
    flex: 0 0 auto;
}
.ts-vorlagen-chip {
    padding: 4px 10px;
    background: #fff;
    border: 1px solid var(--ts-ui-line);
    border-radius: 999px;
    font: 500 11px/1.4 inherit;
    color: var(--ts-ui-muted);
    cursor: pointer;
}
.ts-vorlagen-chip:hover { color: var(--ts-ui-text); }
.ts-vorlagen-chip.ts-aktiv {
    background: var(--ts-ui-accent);
    border-color: var(--ts-ui-accent);
    color: #fff;
}

.ts-vorlagen-karten {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 12px;
    display: grid;
    gap: 10px;
    align-content: start;
}

.ts-vorlage {
    display: grid;
    gap: 3px;
    padding: 0 0 10px;
    text-align: left;
    background: #fff;
    border: 1px solid var(--ts-ui-line);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.ts-vorlage:hover { border-color: var(--ts-ui-muted); }
.ts-vorlage.ts-aktiv {
    border-color: var(--ts-ui-accent);
    box-shadow: 0 0 0 1px var(--ts-ui-accent);
}

.ts-vorlage-leer { padding: 12px 14px; }

/* Das Fenster zeigt den oberen Teil der Vorlage - mehr braucht man nicht,
   um sie wiederzuerkennen. */
.ts-vorlage-fenster {
    position: relative;
    height: 150px;
    overflow: hidden;
    background: #f8fafc;
    border-bottom: 1px solid var(--ts-ui-line);
}
.ts-vorlage-fenster iframe {
    position: absolute;
    top: 0;
    left: 0;
    height: 1400px;
    border: 0;
    transform-origin: top left;
    pointer-events: none;
}

.ts-vorlage-name { padding: 8px 12px 0; font: 600 12px/1.35 inherit; color: var(--ts-ui-text); }
.ts-vorlage-text { padding: 0 12px; font-size: 11px; line-height: 1.45; color: var(--ts-ui-muted); }
.ts-vorlage-leer .ts-vorlage-name,
.ts-vorlage-leer .ts-vorlage-text { padding: 0; }

.ts-vorlage.ts-ohne-vorschau .ts-vorlage-fenster::after {
    content: 'Vorschau nicht verfügbar';
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 11px;
    color: var(--ts-ui-muted);
}

/* --- Grosse Vorschau ----------------------------------------------------- */

.ts-vorlagen-vorschau {
    position: relative;
    overflow-y: auto;
    padding: 20px;
    background:
        repeating-conic-gradient(#f1f5f9 0% 25%, #fff 0% 50%) 50% / 20px 20px;
}

.ts-vorschau-buehne {
    position: relative;
    width: 100%;
    min-height: 300px;
    max-height: 68vh;
    /* Scrollbar statt Beschnitt: eine Vorlage ist zwei bis vier Bildschirme
       lang, und der erste sagt wenig darueber aus, ob sie taugt. */
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 6px 24px rgba(15, 23, 42, .14);
}

/* Der Rahmen ist absolut gesetzt und traegt nichts zur Hoehe bei. Dieses
   leere Element schafft den Platz, den er einnehmen wuerde. */
.ts-vorschau-buehne::after,
.ts-assistent-buehne::after {
    content: '';
    display: block;
    height: var(--ts-vorschau-hoehe, 300px);
}
.ts-vorschau-rahmen {
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
    transform-origin: top left;
    pointer-events: none;
}

.ts-vorschau-hinweis {
    position: absolute;
    inset: 20px;
    display: grid;
    place-items: center;
    margin: 0;
    font-size: 13px;
    color: var(--ts-ui-muted);
    pointer-events: none;
}

/* --- Fuss ---------------------------------------------------------------- */

.ts-vorlagen-fuss {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 20px;
    border-top: 1px solid var(--ts-ui-line);
    background: var(--ts-ui-bg);
    flex: 0 0 auto;
}

.ts-vorlagen-art { margin-right: auto; display: flex; gap: 16px; }
.ts-vorlagen-art label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--ts-ui-text);
    cursor: pointer;
}

@media (max-width: 900px) {
    .ts-vorlagen-koerper { grid-template-columns: 1fr; }
    .ts-vorlagen-vorschau { display: none; }
}

/* --- Willkommens-Assistent ------------------------------------------------ */

/* Dieser Hintergrund laesst sich nicht durch Danebenklicken schliessen: der
   Assistent hat eigene Knoepfe dafuer, und ein versehentlicher Klick soll
   nicht mitten in Schritt drei alles wegwerfen. */
.ts-backdrop-fest { align-items: flex-start; }

.ts-assistent {
    display: flex;
    flex-direction: column;
    width: min(1120px, calc(100vw - 40px));
    height: min(720px, calc(100vh - 60px));
    margin-top: 30px;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(15, 23, 42, .38);
}

.ts-assistent-kopf {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 20px;
    padding: 22px 26px;
    flex: 0 0 auto;
    /* Ein warmer Verlauf statt einer weissen Flaeche: dieser Dialog ist der
       erste Eindruck des Baukastens, und eine Anmeldemaske reicht dafuer
       nicht. */
    background: linear-gradient(120deg, #eef4ff 0%, #fdf2f8 55%, #fff7ed 100%);
    border-bottom: 1px solid rgba(15, 23, 42, .07);
}
.ts-assistent-kopf h2 { margin: 0 0 3px; font-size: 21px; letter-spacing: -.01em; }
.ts-assistent-kopf p { margin: 0; font-size: 13px; color: #475569; }

.ts-assistent-schritte {
    display: flex;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: schritt;
}
.ts-assistent-schritte li {
    counter-increment: schritt;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px 4px 8px;
    border-radius: 999px;
    background: var(--ts-ui-bg);
    font-size: 11px;
    font-weight: 600;
    color: var(--ts-ui-muted);
}
.ts-assistent-schritte li::before {
    content: counter(schritt);
    display: grid;
    place-items: center;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #fff;
    font-size: 10px;
}
.ts-assistent-schritte li.ts-aktiv {
    background: var(--ts-ui-accent);
    color: #fff;
}
.ts-assistent-schritte li.ts-fertig { color: var(--ts-ui-ok); }
.ts-assistent-schritte li.ts-fertig::before { content: '✓'; color: var(--ts-ui-ok); }

.ts-assistent-koerper { flex: 1 1 auto; min-height: 0; overflow: hidden; }

/* Schritt 1: die Frage nach dem Zweck. */
.ts-assistent-fragen {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 44px 40px 36px;
    overflow-y: auto;
}
.ts-assistent-fragen h3 {
    margin: 0;
    font-size: 22px;
    letter-spacing: -.01em;
    color: var(--ts-ui-text);
}
.ts-assistent-unterzeile {
    margin: 0 0 26px;
    font-size: 13px;
    color: var(--ts-ui-muted);
}

/* Feste Spaltenzahl statt auto-fit: der Dialog ist breit genug, und
   auto-fit fiel in einer schrumpfenden Flaeche auf eine Spalte zusammen -
   genau das sah man. */
.ts-assistent-raster {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
    max-width: 860px;
}
@media (max-width: 980px) {
    .ts-assistent-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    .ts-assistent-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ts-assistent-wahl {
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 9px;
    padding: 20px 12px 16px;
    background: #fff;
    border: 1px solid var(--ts-ui-line);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .14s ease, box-shadow .14s ease, transform .1s ease;
}
.ts-assistent-wahl:hover {
    border-color: var(--ts-wahl-farbe, var(--ts-ui-accent));
    box-shadow: 0 6px 18px rgba(15, 23, 42, .09);
    transform: translateY(-2px);
}
.ts-assistent-wahl.ts-aktiv {
    border-color: var(--ts-wahl-farbe, var(--ts-ui-accent));
    box-shadow: 0 0 0 1px var(--ts-wahl-farbe, var(--ts-ui-accent));
}
.ts-assistent-wahl:focus-visible {
    outline: 2px solid var(--ts-wahl-farbe, var(--ts-ui-accent));
    outline-offset: 2px;
}

/* Das Zeichen traegt die Farbe des Zwecks - so wird aus einer Liste eine
   Auswahl, bei der man hinschaut. */
.ts-assistent-zeichen {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    color: var(--ts-wahl-farbe, var(--ts-ui-accent));
    background: color-mix(in srgb, var(--ts-wahl-farbe, #2563eb) 12%, #fff);
}

.ts-assistent-wahl-name {
    font: 600 13px/1.35 inherit;
    color: var(--ts-ui-text);
    text-align: center;
}
.ts-assistent-wahl-zusatz { font-size: 11px; color: var(--ts-ui-muted); }

.ts-assistent-alle { margin-top: 26px; }

/* Schritte 2 und 3: links waehlen, rechts sehen. */
.ts-assistent-zwei {
    display: grid;
    grid-template-columns: 340px 1fr;
    height: 100%;
}

.ts-assistent-liste {
    overflow-y: auto;
    padding: 14px;
    display: grid;
    gap: 10px;
    align-content: start;
    background: var(--ts-ui-bg);
    border-right: 1px solid var(--ts-ui-line);
}

.ts-assistent-karte {
    display: grid;
    gap: 4px;
    padding: 14px 16px;
    text-align: left;
    background: #fff;
    border: 1px solid var(--ts-ui-line);
    border-radius: 8px;
    cursor: pointer;
}
.ts-assistent-karte:hover { border-color: var(--ts-ui-muted); }
.ts-assistent-karte.ts-aktiv {
    border-color: var(--ts-ui-accent);
    box-shadow: 0 0 0 1px var(--ts-ui-accent);
}
.ts-assistent-seiten { font-size: 10px; color: var(--ts-ui-muted); line-height: 1.5; }

.ts-assistent-farbe {
    display: grid;
    gap: 8px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--ts-ui-line);
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
}
.ts-assistent-farbe:hover { border-color: var(--ts-ui-muted); }
.ts-assistent-farbe.ts-aktiv {
    border-color: var(--ts-ui-accent);
    box-shadow: 0 0 0 1px var(--ts-ui-accent);
}
.ts-assistent-tupfer { display: flex; gap: 5px; }
.ts-assistent-tupfer span {
    width: 26px;
    height: 26px;
    border-radius: 5px;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .1);
}

.ts-assistent-buehne {
    position: relative;
    margin: 18px;
    min-height: 300px;
    max-height: 62vh;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(15, 23, 42, .14);
}
.ts-assistent-rahmen {
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
    transform-origin: top left;
    pointer-events: none;
}

.ts-assistent-fuss {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 22px;
    border-top: 1px solid var(--ts-ui-line);
    background: var(--ts-ui-bg);
    flex: 0 0 auto;
}
.ts-assistent-fuss .ts-button-quiet:first-child { margin-right: auto; }
.ts-assistent-fehler { margin: 0 auto 0 0; color: var(--ts-ui-error); font-size: 12px; }

.ts-theme-assistent {
    display: grid;
    gap: 6px;
    padding: 0 0 16px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--ts-ui-line);
}
.ts-theme-assistent .ts-hint { margin: 0; }

@media (max-width: 900px) {
    .ts-assistent-zwei { grid-template-columns: 1fr; }
    .ts-assistent-buehne { display: none; }
}

/* ---------------------------------------------------------------------------
   Designkarten im Assistenten

   Eine Karte zeigt, woraus ein Design wirklich besteht: die Schriftprobe
   links, der Farbstreifen in der Mitte, der Knopf rechts. Das Vorbild ist
   die Designliste der grossen Baukaesten - und sie ist deshalb gut, weil
   man alle drei Entscheidungen auf einen Blick vergleichen kann.
   --------------------------------------------------------------------------- */

.ts-assistent-gruppe {
    margin: 18px 0 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ts-ui-muted);
}
.ts-assistent-gruppe:first-child { margin-top: 0; }

.ts-assistent-design {
    display: grid;
    grid-template-columns: 54px 1fr auto;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-bottom: 8px;
    padding: 12px 14px;
    border: 1px solid var(--ts-ui-line);
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
}
.ts-assistent-design:hover { border-color: var(--ts-ui-muted); }
.ts-assistent-design.ts-aktiv {
    border-color: var(--ts-ui-accent);
    box-shadow: 0 0 0 1px var(--ts-ui-accent);
}

.ts-design-probe {
    font-size: 28px;
    line-height: 1;
    text-align: center;
}

.ts-design-streifen {
    display: flex;
    height: 34px;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .12);
}
.ts-design-streifen span { flex: 1; }

.ts-design-knopf {
    padding: 7px 14px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

/* Der Name steht unter der ganzen Karte, nicht in einer der drei Spalten. */
.ts-design-name {
    grid-column: 1 / -1;
    font-size: 11px;
    color: var(--ts-ui-muted);
}


/* Eine schmale, unaufdringliche Scrollleiste an den Vorschauen. */
.ts-vorschau-buehne::-webkit-scrollbar,
.ts-assistent-buehne::-webkit-scrollbar { width: 10px; }
.ts-vorschau-buehne::-webkit-scrollbar-thumb,
.ts-assistent-buehne::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, .22);
    border: 3px solid #fff;
    border-radius: 6px;
}
.ts-vorschau-buehne::-webkit-scrollbar-thumb:hover,
.ts-assistent-buehne::-webkit-scrollbar-thumb:hover { background: rgba(15, 23, 42, .38); }

/* --------------------------------------------------------------------------
   Assistent: bestehende Webseite uebernehmen
   -------------------------------------------------------------------------- */

.ts-import { width: min(620px, calc(100vw - 32px)); }

.ts-import-erklaerung { margin-bottom: 10px; line-height: 1.55; }
.ts-import-leise { font-size: 12px; }
.ts-import-fehler {
    margin: 0 0 12px;
    padding: 8px 10px;
    border-radius: var(--ts-ui-radius);
    background: #fef2f2;
    color: var(--ts-ui-error);
}

.ts-import .ts-feld { display: block; margin-bottom: 12px; }
.ts-import .ts-feld > span {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    color: var(--ts-ui-muted);
}
.ts-import .ts-feld input,
.ts-import .ts-feld select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--ts-ui-line);
    border-radius: var(--ts-ui-radius);
    font: inherit;
}

.ts-import-seiten {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    border: 1px solid var(--ts-ui-line);
    border-radius: var(--ts-ui-radius);
    max-height: 260px;
    overflow-y: auto;
}
.ts-import-seiten li + li { border-top: 1px solid var(--ts-ui-line); }
.ts-import-seiten label {
    display: grid;
    grid-template-columns: auto 120px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    cursor: pointer;
}
.ts-import-seiten label:hover { background: var(--ts-ui-bg); }

.ts-import-pfad {
    font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace;
    font-size: 12px;
    color: var(--ts-ui-accent-dark);
    overflow: hidden;
    text-overflow: ellipsis;
}
.ts-import-titel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-import-menge { font-size: 11px; color: var(--ts-ui-muted); white-space: nowrap; }

.ts-import-ergebnis li {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 10px;
    padding: 8px 10px;
}

.ts-import-schalter {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    cursor: pointer;
}

.ts-import-gestaltung {
    margin: 0 0 14px;
    padding-top: 12px;
    border-top: 1px solid var(--ts-ui-line);
}
.ts-import-gestaltung h3 {
    margin: 0 0 8px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ts-ui-muted);
}

.ts-import-farben { display: flex; gap: 6px; margin-bottom: 10px; }
.ts-import-farbe {
    width: 34px;
    height: 34px;
    border-radius: var(--ts-ui-radius);
    border: 1px solid rgba(15, 23, 42, .15);
}

.ts-import-schriften,
.ts-import-hinweise {
    margin: 0 0 10px;
    padding-left: 18px;
    font-size: 12px;
    color: var(--ts-ui-muted);
}

/* Ein Balken, der laeuft, ohne einen Fortschritt zu behaupten, den wir
   nicht kennen: der Abruf einer fremden Seite dauert so lange, wie sie
   braucht. */
.ts-import-balken {
    height: 4px;
    border-radius: 2px;
    background: var(--ts-ui-bg);
    overflow: hidden;
}
.ts-import-balken span {
    display: block;
    width: 40%;
    height: 100%;
    background: var(--ts-ui-accent);
    animation: ts-import-lauf 1.1s ease-in-out infinite;
}
@keyframes ts-import-lauf {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(250%); }
}

.ts-page-import {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--ts-ui-line);
}
.ts-button-weit { width: 100%; justify-content: center; }
.ts-page-import-hinweis {
    margin: 6px 0 0;
    font-size: 11px;
    line-height: 1.45;
    color: var(--ts-ui-muted);
}

/* --------------------------------------------------------------------------
   Vorschau eines Gestaltungselements
   -------------------------------------------------------------------------- */

/*
 * Das Fenster haengt am Koerper, nicht in der Liste: sonst schnitte die
 * Rollflaeche der Palette es ab, und ein Abschnitt von dreihundertvierzig
 * Pixeln passt in eine Spalte von zweihundertachtzig nicht hinein.
 */
.ts-elementvorschau {
    position: fixed;
    z-index: 90;
    background: var(--ts-ui-panel, #fff);
    border: 1px solid var(--ts-ui-border, #d8dee9);
    border-radius: 8px;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .22);
    padding: 8px;
    pointer-events: none;
}

/* Die Buehne schneidet den Rahmen zu: er zeichnet in voller Satzbreite
   und wird verkleinert, ragt also ueber seine Kante hinaus. */
.ts-elementvorschau-buehne {
    overflow: hidden;
    border-radius: 5px;
    background: #fff;
}

.ts-elementvorschau-rahmen {
    display: block;
    border: 0;
    transform-origin: top left;
}

.ts-elementvorschau-name {
    margin-top: 7px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ts-ui-text, #1f2430);
}

/* --------------------------------------------------------------------------
   Shop-Verwaltung
   -------------------------------------------------------------------------- */

/* Vier Bereiche in einer gut zweihundert Pixel breiten Leiste: sie
   muessen umbrechen duerfen, sonst schiebt die Reiterzeile den ganzen
   Inhalt ueber den rechten Rand. */
.ts-shopverw-leiste {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--ts-ui-border, #d8dee9);
}

.ts-shopverw-reiter {
    padding: 6px 7px;
    font-size: 12px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--ts-ui-text, #1f2430);
    font: inherit;
    cursor: pointer;
}

.ts-shopverw-reiter.ts-aktiv {
    border-bottom-color: var(--ts-ui-accent, #2563eb);
    font-weight: 600;
}

.ts-shopverw-liste { display: grid; gap: 6px; margin-top: 12px; }

.ts-shopverw-zeile {
    display: grid;
    gap: 2px;
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--ts-ui-border, #d8dee9);
    border-radius: 6px;
    background: var(--ts-ui-panel, #fff);
    color: inherit;
    font: inherit;
    text-align: left;
}

.ts-shopverw-zeile { cursor: pointer; }
.ts-shopverw-zeile:hover { border-color: var(--ts-ui-accent, #2563eb); }

.ts-shopverw-zeile small { color: var(--ts-ui-muted, #6b7280); font-size: 12px; }

/* Knapper Bestand steht ueber der Artikelliste. */
.ts-shopverw-lagerwarnung {
    margin: 10px 0 0;
    padding: 7px 9px;
    border-radius: 5px;
    background: rgba(217, 119, 6, .12);
    color: var(--ts-ui-warn, #b45309);
    font-size: 12px;
}

/* Eine Bestellung: Posten, Betraege, Verlauf. */
.ts-shopverw-posten {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
}

.ts-shopverw-summe {
    padding-top: 5px;
    border-top: 1px solid var(--ts-ui-border, #d8dee9);
    font-weight: 600;
}

.ts-shopverw-adresse {
    margin: 0;
    font-size: 12px;
    white-space: pre-line;
}

.ts-shopverw-schritt {
    display: grid;
    gap: 1px;
    padding: 5px 0;
    border-top: 1px solid var(--ts-ui-border, #d8dee9);
    font-size: 12px;
}

.ts-shopverw-schritt:first-of-type { border-top: 0; }
.ts-shopverw-schritt small { color: var(--ts-ui-muted, #6b7280); font-size: 11px; }

.ts-shopverw-form { display: grid; gap: 10px; margin-top: 12px; }
.ts-shopverw-form label { display: grid; gap: 4px; font-size: 12px; }
.ts-shopverw-form label > span { font-weight: 600; }

/* Ohne width und min-width zieht ein Eingabefeld seine Eigenbreite von
   rund zwanzig Zeichen durch - in einem Raster mit zwei Spalten schiebt
   das die halbe Verwaltung ueber den rechten Rand. */
.ts-shopverw-form input,
.ts-shopverw-form textarea,
.ts-shopverw-form select {
    width: 100%;
    min-width: 0;
    padding: 7px 9px;
    border: 1px solid var(--ts-ui-border, #d8dee9);
    border-radius: 5px;
    font: inherit;
}

.ts-shopverw-form label,
.ts-shopverw-paar > * { min-width: 0; }

.ts-shopverw-schalter {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.ts-shopverw-wege { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }

.ts-shopverw-form select { background: var(--ts-ui-panel, #fff); }

/* Zwei Felder nebeneinander - Preis und Artikelnummer gehoeren in eine
   Zeile, sonst wird das Formular laenger als der Bildschirm. */
.ts-shopverw-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.ts-shopverw-filter {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px;
    margin-top: 10px;
}

.ts-shopverw-filter input,
.ts-shopverw-filter select {
    padding: 6px 8px;
    border: 1px solid var(--ts-ui-border, #d8dee9);
    border-radius: 5px;
    font: inherit;
}

.ts-shopverw-block {
    display: grid;
    gap: 6px;
    padding: 10px;
    border: 1px solid var(--ts-ui-border, #d8dee9);
    border-radius: 6px;
    background: var(--ts-ui-panel, #fff);
}

.ts-shopverw-titel {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ts-ui-muted, #6b7280);
}

.ts-shopverw-block .ts-hint { margin: 0; }

/* Eine Zeile der Steuer- oder Versandtabelle.

   Zweizeilig: die Leiste des Editors ist gut zweihundert Pixel breit,
   und Land, zwei Zahlen und ein Papierkorb nebeneinander laufen darin
   rechts aus dem Fenster. */
.ts-shopverw-reihe {
    display: grid;
    gap: 5px;
    padding: 7px;
    border: 1px solid var(--ts-ui-border, #d8dee9);
    border-radius: 5px;
}

.ts-shopverw-reihekopf {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px;
    align-items: center;
}

.ts-shopverw-reihekopf select { min-width: 0; }

/* Die Werte einer Zeile brechen um: drei Felder nebeneinander passen in
   die schmale Leiste nicht, und was nicht passt, schiebt die ganze
   Verwaltung ueber den rechten Rand. */
.ts-shopverw-werte { display: flex; flex-wrap: wrap; gap: 5px; }
.ts-shopverw-wert { display: grid !important; gap: 2px; min-width: 0; }
.ts-shopverw-wert small {
    color: var(--ts-ui-muted, #6b7280);
    font-size: 11px;
}
.ts-shopverw-schmal { flex: 1 1 60px; }
.ts-shopverw-breit { flex: 1 1 100%; }

/* Ein Schalter in einer Zeile steht auf eigener Hoehe, nicht neben den
   Feldern - sonst rutscht seine Beschriftung unter das Feld daneben. */
.ts-shopverw-reihe .ts-shopverw-schalter { font-size: 12px; }

.ts-shopverw-reihe input,
.ts-shopverw-reihe select {
    width: 100%;
    padding: 5px 7px;
    border: 1px solid var(--ts-ui-border, #d8dee9);
    border-radius: 5px;
    font: inherit;
}

/* Eine Zeile, die von einer weiter oben verdraengt wird. */
.ts-shopverw-doppelt { border-color: var(--ts-ui-warn, #d97706); }
.ts-shopverw-warnung { color: var(--ts-ui-warn, #d97706); font-size: 11px; }

/* Bilderliste eines Artikels. Das erste Bild ist das Hauptbild - die
   Reihenfolge ist die Aussage, deshalb die Pfeile. */
.ts-shopverw-bild {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ts-shopverw-bild img {
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    object-fit: cover;
    border: 1px solid var(--ts-ui-border, #d8dee9);
    border-radius: 5px;
    background: var(--ts-ui-bg, #f4f6fa);
}

.ts-shopverw-bildtext { display: grid; gap: 3px; flex: 1 1 auto; min-width: 0; }
.ts-shopverw-bildtext small { color: var(--ts-ui-muted, #6b7280); font-size: 11px; }

.ts-shopverw-bildtext input {
    padding: 5px 7px;
    border: 1px solid var(--ts-ui-border, #d8dee9);
    border-radius: 5px;
    font: inherit;
}

.ts-shopverw-bildwege { display: flex; gap: 2px; flex: 0 0 auto; }

/* Artikelzeile mit Bild: die Beschriftung steht rechts daneben. */
.ts-shopverw-artikel { display: flex; align-items: center; gap: 9px; }
.ts-shopverw-artikel img {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    object-fit: cover;
    border-radius: 4px;
}
.ts-shopverw-artikel > span { display: grid; gap: 2px; min-width: 0; }

/* Untergruppen ruecken ein - eine Ebene, mehr gibt es nicht. */
.ts-shopverw-kind { margin-left: 16px; }

/* --------------------------------------------------------------------------
   Besucher der Webseite
   -------------------------------------------------------------------------- */

.ts-besucher-suche {
    width: 100%;
    padding: 7px 9px;
    margin-bottom: 10px;
    border: 1px solid var(--ts-ui-border, #d8dee9);
    border-radius: 5px;
    font: inherit;
}

.ts-besucher-kopf { display: grid; gap: 2px; }
.ts-besucher-kopf small { color: var(--ts-ui-muted, #6b7280); font-size: 11px; }

/* Anschrift und Kontakt - mehrzeilig, deshalb pre-line. */
.ts-besucher-angaben {
    margin: 6px 0 0;
    font-size: 11px;
    line-height: 1.5;
    color: var(--ts-ui-muted, #6b7280);
    white-space: pre-line;
}
.ts-besucher-angaben-luecke { color: var(--ts-ui-danger, #b3261e); }

/* Die einzige Zeile in dieser Liste, die Geld kosten kann. */
.ts-besucher-freigabe {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0 2px;
    font-size: 12px;
    cursor: pointer;
}
.ts-besucher-freigabe input { width: 15px; height: 15px; margin: 0; flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   Werkbank: die Shop-Verwaltung ueber dem Inhalt

   Die Verwaltung stand in der linken Leiste. Zweihundert Pixel reichen
   fuer eine Liste von Bausteinen, nicht fuer eine Tabelle mit Land,
   Steuerklasse und Satz: dort brach jede Zeile in zwei, und wer einen
   Artikel anlegte, scrollte durch einen Schacht.

   Links die Gebiete, rechts das Gebiet. Der Speichern-Knopf klebt unten,
   damit er auch in einer langen Liste erreichbar bleibt.
   -------------------------------------------------------------------------- */

.ts-werkbank-hof {
    padding: 28px;
    background: rgba(15, 23, 42, .5);
}

.ts-werkbank {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: min(1180px, 100%);
    height: min(880px, 100%);
    background: var(--ts-ui-panel);
    border-radius: 12px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .35);
    overflow: hidden;
}

.ts-werkbank-kopf {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 14px;
    padding: 15px 18px;
    border-bottom: 1px solid var(--ts-ui-line);
}

.ts-werkbank-worte h2 { margin: 0; font-size: 17px; }
.ts-werkbank-unter {
    margin: 3px 0 0;
    color: var(--ts-ui-muted);
    font-size: 12px;
}

.ts-werkbank-wege { display: flex; gap: 8px; }

.ts-werkbank-zu {
    display: grid;
    place-items: center;
    padding: 7px;
    border: 0;
    border-radius: var(--ts-ui-radius);
    background: transparent;
    color: var(--ts-ui-muted);
    cursor: pointer;
}
.ts-werkbank-zu:hover { background: var(--ts-ui-bg); color: var(--ts-ui-text); }

.ts-werkbank-leib {
    display: grid;
    grid-template-columns: 236px minmax(0, 1fr);
    min-height: 0;
}

.ts-werkbank-schiene {
    display: grid;
    align-content: start;
    gap: 1px;
    padding: 12px 10px;
    border-right: 1px solid var(--ts-ui-line);
    background: var(--ts-ui-bg);
    overflow-y: auto;
}

.ts-werkbank-gruppe {
    margin: 14px 8px 4px;
    font-size: 10.5px;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ts-ui-muted);
}
.ts-werkbank-gruppe:first-child { margin-top: 2px; }

.ts-werkbank-gebiet {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: var(--ts-ui-radius);
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}
.ts-werkbank-gebiet > svg { flex: 0 0 auto; opacity: .55; }
.ts-werkbank-gebiet > span { flex: 1 1 auto; min-width: 0; }
.ts-werkbank-gebiet:hover { background: rgba(15, 23, 42, .06); }

.ts-werkbank-gebiet.ts-aktiv {
    background: var(--ts-ui-accent);
    color: #fff;
}
.ts-werkbank-gebiet.ts-aktiv > svg { opacity: 1; }

/* Die Zahl am Gebiet: wie viele Bestellungen offen sind, wie viele
   Bewertungen auf Freigabe warten. Ohne sie muesste man hineinsehen. */
.ts-werkbank-zahl,
.ts-shopmenu-zahl {
    flex: 0 0 auto;
    min-width: 18px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--ts-ui-accent);
    color: #fff;
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
    text-align: center;
}
.ts-werkbank-gebiet.ts-aktiv .ts-werkbank-zahl {
    background: rgba(255, 255, 255, .25);
}

.ts-werkbank-inhalt {
    padding: 20px 24px 32px;
    overflow-y: auto;
    min-height: 0;
}

/* In der Breite sind die engen Regeln der Leiste falsch: Formulare
   bekommen eine lesbare Zeilenlaenge, Listen mehrere Spalten, und die
   Tabellenzeilen stehen wieder auf einer Zeile. */
.ts-werkbank-inhalt .ts-shopverw-form {
    max-width: 720px;
    gap: 14px;
    margin-top: 0;
}

/* Eine Tafel braucht mehr als die Zeilenlaenge eines Formulars. */
.ts-werkbank-inhalt .ts-shopverw-form.ts-shopverw-weit { max-width: none; }
.ts-werkbank-inhalt .ts-shopverw-form label { font-size: 12.5px; }

.ts-werkbank-inhalt .ts-shopverw-liste {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 8px;
    margin-top: 0;
}

.ts-werkbank-inhalt .ts-shopverw-block { padding: 14px 16px; gap: 10px; }

.ts-werkbank-inhalt .ts-shopverw-reihe {
    grid-template-columns: minmax(140px, 230px) minmax(0, 1fr);
    gap: 10px;
    padding: 10px 12px;
    align-items: start;
}
.ts-werkbank-inhalt .ts-shopverw-reihekopf { align-items: start; }
.ts-werkbank-inhalt .ts-shopverw-werte { flex-wrap: nowrap; gap: 8px; }
.ts-werkbank-inhalt .ts-shopverw-schmal { flex: 0 1 120px; }
.ts-werkbank-inhalt .ts-shopverw-breit { flex: 1 1 auto; }

/* Der Fuss klebt am unteren Rand des Gebiets: in einer Liste mit
   zwanzig Steuersaetzen stuende der Knopf sonst ausserhalb des Bildes,
   und wer nicht scrollt, verliert seine Eingaben. */
.ts-shopverw-fuss {
    display: flex;
    gap: 8px;
    align-items: center;
}
.ts-werkbank-inhalt .ts-shopverw-fuss {
    position: sticky;
    bottom: -32px;
    margin: 4px 0 -32px;
    padding: 12px 0;
    background: var(--ts-ui-panel);
    border-top: 1px solid var(--ts-ui-line);
}

/* Auf einem schmalen Bildschirm bleibt von der Schiene das Symbol. */
@media (max-width: 940px) {
    .ts-werkbank-hof { padding: 0; }
    .ts-werkbank { border-radius: 0; width: 100%; height: 100%; }
    .ts-werkbank-leib { grid-template-columns: 58px minmax(0, 1fr); }
    .ts-werkbank-gebiet > span,
    .ts-werkbank-gruppe { display: none; }
    .ts-werkbank-gebiet { justify-content: center; padding: 10px 0; }
    .ts-werkbank-inhalt { padding: 16px; }
}

/* --------------------------------------------------------------------------
   Der Shop in der Leiste: nur noch das Inhaltsverzeichnis
   -------------------------------------------------------------------------- */

.ts-shopmenu-kopf { margin-bottom: 10px; }
.ts-shopmenu-kopf h3 { margin: 0; font-size: 13px; }
.ts-shopmenu-kopf p {
    margin: 2px 0 0;
    color: var(--ts-ui-muted);
    font-size: 11px;
}

.ts-shopmenu-gruppe {
    margin: 12px 2px 3px;
    font-size: 10px;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ts-ui-muted);
}

.ts-shopmenu-gebiet {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    padding: 7px 8px;
    border: 1px solid transparent;
    border-radius: var(--ts-ui-radius);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.ts-shopmenu-gebiet:hover {
    border-color: var(--ts-ui-line);
    background: var(--ts-ui-bg);
}
.ts-shopmenu-gebiet > svg { flex: 0 0 auto; margin-top: 2px; opacity: .55; }
.ts-shopmenu-gebiet > span { flex: 1 1 auto; min-width: 0; display: grid; gap: 1px; }
.ts-shopmenu-gebiet strong { font-size: 12.5px; font-weight: 600; }
.ts-shopmenu-gebiet small {
    color: var(--ts-ui-muted);
    font-size: 10.5px;
    line-height: 1.35;
}
.ts-shopmenu-gebiet .ts-shopmenu-zahl { margin-top: 2px; }

/* Die Lagerwarnung in der Leiste fuehrt zu den Artikeln. */
.ts-shopmenu-kopf + .ts-shopverw-lagerwarnung { cursor: pointer; }

/* Eine Währung in der Werkbank.

   Nicht die Tabellenzeile der Steuersätze: hier stehen Kopf, drei
   Felder und zwei Schalter, und der Kopf trägt den Kurs mit seinem
   Datum - ein Kurs ohne Datum ist eine Behauptung. */
.ts-waehrung {
    display: grid;
    gap: 10px;
    margin-bottom: 8px;
    padding: 12px 14px;
    border: 1px solid var(--ts-ui-border, #d8dee9);
    border-radius: 6px;
}

.ts-waehrung-kopf {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.ts-waehrung-kopf strong { font-size: 14px; }
.ts-waehrung-kopf small {
    display: block;
    margin-top: 2px;
    color: var(--ts-ui-muted);
    font-size: 11.5px;
}

.ts-waehrung-felder {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 10px;
}
.ts-waehrung-felder label { display: grid; gap: 3px; font-size: 12px; }
.ts-waehrung-felder small { color: var(--ts-ui-muted); }
.ts-waehrung-felder input,
.ts-waehrung-felder select {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--ts-ui-border, #d8dee9);
    border-radius: 5px;
    font: inherit;
}
.ts-waehrung-felder input:disabled {
    background: var(--ts-ui-bg);
    color: var(--ts-ui-muted);
}

.ts-waehrung-fuss {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
.ts-waehrung-fuss .ts-shopverw-schalter { white-space: nowrap; font-size: 12px; }
.ts-waehrung-fuss > .ts-button { margin-left: auto; }

/* Der Kasten zum Hinzufügen steht etwas zurück: er ist kein Eintrag,
   sondern eine Einladung. */
.ts-waehrung-neu { background: var(--ts-ui-bg); border-style: dashed; }
.ts-waehrung-neu .ts-waehrung-fuss > .ts-button { margin-left: 0; }

/* Der Rechnungs-Designer: links die Einstellungen, rechts der Bogen.

   Ohne die Vorschau wäre jede Einstellung ein Versuch mit Speichern,
   Bestellung suchen, Beleg herunterladen — und niemand probiert dreimal
   aus, was so lange dauert. */
.ts-layout-spalten {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
    gap: 20px;
    align-items: start;
}

.ts-layout-form { display: grid; gap: 14px; }

.ts-layout-paar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}
.ts-layout-paar label,
.ts-layout-lang { display: grid; gap: 3px; font-size: 12px; }
.ts-layout-paar small,
.ts-layout-lang small,
.ts-layout-bild > small { color: var(--ts-ui-muted); }
.ts-layout-paar input,
.ts-layout-paar select,
.ts-layout-lang textarea {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--ts-ui-border, #d8dee9);
    border-radius: 5px;
    font: inherit;
}

/*
 * Ein einzeiliges Feld ausserhalb eines Paares - die IBAN und der Name
 * des Empfaengers brauchen die ganze Breite.
 */
.ts-shopverw-block > label { display: grid; gap: 3px; font-size: 12px; }
.ts-shopverw-block > label > small { color: var(--ts-ui-muted); }
.ts-shopverw-block > label > input,
.ts-shopverw-block > label > select {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--ts-ui-border, #d8dee9);
    border-radius: 5px;
    font: inherit;
}

/* Ein Feld, dessen Inhalt nicht aufgeht - die IBAN mit falscher Pruefziffer. */
.ts-feld-falsch {
    border-color: var(--ts-ui-danger, #b3261e) !important;
    background: #fff6f5;
}

/*
 * Der Haken steht neben seinem Wort, nicht darueber.
 *
 * Die Regel eine Zeile hoeher stellt jedes Feld in diesem Block
 * untereinander - richtig fuer ein Eingabefeld mit Beschriftung,
 * falsch fuer einen Haken. Deshalb hier dieselbe Genauigkeit und
 * nicht nur die Klasse.
 */
.ts-shopverw-block > label.ts-layout-haken,
.ts-layout-haken {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    cursor: pointer;
}
.ts-shopverw-block > label.ts-layout-haken > input,
.ts-layout-haken input {
    width: 16px;
    height: 16px;
    margin: 0;
    flex: 0 0 auto;
}

.ts-hint-fehler { color: var(--ts-ui-danger, #b3261e); }

.ts-layout-bild { display: grid; gap: 5px; font-size: 12px; }
.ts-layout-bildreihe {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.ts-layout-bildreihe img {
    max-width: 120px;
    max-height: 48px;
    border: 1px solid var(--ts-ui-line);
    border-radius: 4px;
    background: #fff;
}
.ts-layout-leer {
    padding: 12px 14px;
    border: 1px dashed var(--ts-ui-border, #d8dee9);
    border-radius: 4px;
    color: var(--ts-ui-muted);
    font-size: 11px;
}

/* Der Bogen bleibt stehen, während links gescrollt wird. */
.ts-layout-vorschau {
    position: sticky;
    top: 0;
    background: var(--ts-ui-bg);
    border: 1px solid var(--ts-ui-line);
    border-radius: 6px;
    overflow: hidden;
}
.ts-layout-vorschau iframe {
    display: block;
    width: 100%;
    height: 560px;
    border: 0;
    background: #fff;
}

@media (max-width: 1080px) {
    .ts-layout-spalten { grid-template-columns: minmax(0, 1fr); }
    .ts-layout-vorschau { position: static; }
}
.ts-layout-notnagel {
    margin: 0;
    padding: 8px 10px;
    border-top: 1px solid var(--ts-ui-line);
    color: var(--ts-ui-muted);
    font-size: 11px;
}

/* --------------------------------------------------------------------------
   Die Steuertafel: Klassen in Zeilen, Länder in Spalten

   Zuerst war es eine flache Liste aus "Land, Klasse, Satz". Dann ein
   Kasten je Land. Beide Male stand dieselbe Sache an zwei Orten: die
   Klasse oben zum Benennen, ihr Satz unten zum Eintragen — und die
   Zeilen standen unterschiedlich breit nebeneinander, weil jedes
   Kürzel eine andere Länge hat.

   Eine Tafel legt beides zusammen und gibt jeder Spalte dieselbe
   Breite.
   -------------------------------------------------------------------------- */

.ts-steuertafel-huelle {
    overflow-x: auto;
    border: 1px solid var(--ts-ui-border, #d8dee9);
    border-radius: 6px;
    background: var(--ts-ui-panel, #fff);
}

.ts-steuertafel {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 12px;
}

.ts-steuertafel th,
.ts-steuertafel td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--ts-ui-line);
    text-align: left;
    vertical-align: middle;
}
.ts-steuertafel tbody tr:last-child th,
.ts-steuertafel tbody tr:last-child td { border-bottom: 0; }

.ts-steuertafel thead th {
    background: var(--ts-ui-bg);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

/* Die Namensspalte trägt die Breite, die Satzspalten sind gleich schmal:
   so stehen die Prozentfelder in einer Flucht. */

/* Landeswahl und Papierkorb nebeneinander - sonst draengt der Knopf die
   Wahl zusammen, und aus "Deutschland (DE)" wird "Deutsch". */
.ts-steuertafel-spaltenkopf {
    display: flex;
    align-items: center;
    gap: 4px;
}
.ts-steuertafel-spaltenkopf select { flex: 1 1 auto; min-width: 0; }
.ts-steuertafel-spaltenkopf .ts-steuertafel-weg { flex: 0 0 auto; }
.ts-steuertafel-name { display: table-cell; }
.ts-steuertafel-name input {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--ts-ui-border, #d8dee9);
    border-radius: 5px;
    font: inherit;
}
.ts-steuertafel-name small {
    display: block;
    margin-top: 3px;
    color: var(--ts-ui-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10.5px;
}

.ts-steuertafel thead select {
    width: 100%;
    padding: 5px 6px;
    border: 1px solid var(--ts-ui-border, #d8dee9);
    border-radius: 5px;
    font: inherit;
    font-size: 11.5px;
}

.ts-steuertafel-eingabe {
    display: flex;
    align-items: center;
    gap: 5px;
}
.ts-steuertafel-satz {
    width: 100%;
    min-width: 0;
    padding: 6px 8px;
    border: 1px solid var(--ts-ui-border, #d8dee9);
    border-radius: 5px;
    font: inherit;
    text-align: right;
}
.ts-steuertafel-eingabe span { color: var(--ts-ui-muted); }

.ts-steuertafel-warnung {
    display: block;
    margin-top: 2px;
    color: var(--ts-ui-warn);
    font-size: 10.5px;
    font-weight: 400;
}

.ts-steuertafel-wege { text-align: right !important; }

.ts-steuertafel-weg {
    display: inline-grid;
    place-items: center;
    padding: 5px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--ts-ui-muted);
    cursor: pointer;
}
.ts-steuertafel-weg:hover { background: var(--ts-ui-bg); color: var(--ts-ui-error); }

.ts-steuertafel-neu {
    display: flex;
    gap: 8px;
    align-items: center;
}
.ts-steuertafel-neu input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 7px 9px;
    border: 1px solid var(--ts-ui-border, #d8dee9);
    border-radius: 5px;
    font: inherit;
}

/* Eine Reihe beschrifteter Felder.

   Ohne sie stehen Beschriftung und Feld nebeneinander in einer Zeile —
   „Form[Auswahl]“ —, weil die Regeln der Formulare nur innerhalb von
   .ts-shopverw-form greifen. Genau so sah der Ausfuhrkasten aus. */
.ts-felderreihe {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
    gap: 10px;
}
.ts-felderreihe label { display: grid; gap: 3px; font-size: 12px; min-width: 0; }
.ts-felderreihe small { color: var(--ts-ui-muted); }
.ts-felderreihe input,
.ts-felderreihe select {
    width: 100%;
    min-width: 0;
    padding: 6px 8px;
    border: 1px solid var(--ts-ui-border, #d8dee9);
    border-radius: 5px;
    background: var(--ts-ui-panel, #fff);
    font: inherit;
}

/* Ein einzelner Knopf in einem Kasten behält seine Breite.

   Der Kasten ist ein Raster, und ein Kind darin zieht sich sonst über
   die ganze Zeile — aus „Übernehmen“ wird ein Balken, der aussieht wie
   ein leeres Eingabefeld. */
.ts-shopverw-block > .ts-button { justify-self: start; }

/* Zustand und Bemerkung: das Feld für die Bemerkung darf breiter sein. */
.ts-felderreihe-zustand { grid-template-columns: minmax(160px, 220px) minmax(0, 1fr); }

/* Eine Zahlungsart: eingeschaltete heben sich ab, damit man auf einen
   Blick sieht, was der Kunde an der Kasse zu sehen bekommt. */
.ts-zahlungsart { border-left: 3px solid var(--ts-ui-line); }
.ts-zahlungsart-an { border-left-color: var(--ts-ui-ok); }
.ts-zahlungsart .ts-shopverw-wege { align-items: center; }
.ts-zahlungsart .ts-steuertafel-weg:disabled { opacity: .3; cursor: default; }
.ts-zahlungsart .ts-hint { margin: 0; word-break: break-all; }

/* Ein Schalter in einer Felderreihe nimmt die ganze Zeile: sonst steht
   das Kästchen in der einen Spalte und seine Beschriftung in der
   nächsten, und die beiden sehen aus, als gehörten sie nicht zusammen. */
.ts-felderreihe > .ts-shopverw-schalter {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
}

/* --------------------------------------------------------------------------
   Bestellungen: Liste und Ware

   Eine Liste aus Nummer, Name und Betrag beantwortet die Frage nicht,
   die man an eine Bestellliste hat: was ist da drin? Deshalb steht die
   Ware in der Zeile — und oben ein Filter, damit die Liste auch nach
   einem halben Jahr ein Werkzeug bleibt und kein Archiv.
   -------------------------------------------------------------------------- */

.ts-bestellfilter { margin-bottom: 12px; align-items: end; }
.ts-bestellzahl { margin: 0; align-self: center; white-space: nowrap; }

/* Eine Spalte, nicht zwei.

   Bestellungen sind eine Folge in der Zeit; in zwei Spalten laeuft sie
   von links nach rechts und wieder zurueck, und "neu nach alt" ist
   nicht mehr zu sehen. */
.ts-bestellliste {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px;
}

.ts-bestellzeile { display: grid; gap: 3px; }
.ts-bestellzeile-kopf {
    display: flex;
    align-items: center;
    gap: 9px;
}
.ts-bestellzeile-kopf strong { font-size: 13px; }
.ts-bestellzeile-kopf em {
    margin-left: auto;
    font-style: normal;
    font-weight: 600;
}
.ts-bestellzeile .ts-bestellware {
    color: var(--ts-ui-text);
    opacity: .75;
}

/* Der Zustand als Fähnchen: bezahlt und versandt sind gute Nachrichten,
   neu ist eine Aufgabe, storniert ist erledigt. */
.ts-bestellzustand {
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--ts-ui-bg);
    color: var(--ts-ui-muted);
    font-size: 10.5px;
    font-weight: 600;
}
.ts-zustand-new       { background: #e0e7ff; color: #3730a3; }
.ts-zustand-paid      { background: #dcfce7; color: #166534; }
.ts-zustand-shipped   { background: #e0f2fe; color: #075985; }
.ts-zustand-cancelled { background: #fee2e2; color: #991b1b; }

/* Eine Zeile der Warenliste in der Einzelansicht. */
.ts-warenzeile {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 7px 0;
    border-bottom: 1px solid var(--ts-ui-line);
}
.ts-warenzeile:last-of-type { border-bottom: 0; }
.ts-warenzeile-was { display: grid; gap: 2px; min-width: 0; }
.ts-warenzeile-was small { color: var(--ts-ui-muted); font-size: 11px; }
.ts-warenzeile-betrag { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Auswertungen
   -------------------------------------------------------------------------- */

.ts-zeitraum { margin-bottom: 14px; align-items: end; }
.ts-zeitraum-wann { margin: 0; align-self: center; white-space: nowrap; }

.ts-zahlen { display: grid; gap: 2px; }
.ts-zahlen-zeile {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 5px 0;
    border-bottom: 1px solid var(--ts-ui-line);
    font-size: 12.5px;
}
.ts-zahlen-zeile:last-child { border-bottom: 0; }
.ts-zahlen-zeile strong { font-variant-numeric: tabular-nums; }
.ts-zahlen-summe {
    margin-top: 4px;
    border-top: 2px solid var(--ts-ui-line);
    border-bottom: 0;
    font-weight: 600;
}
.ts-zahlen-summe strong { font-size: 14px; }

/* Die Steuerabrechnung: eine Tafel wie die Steuersätze, aber nur zum
   Lesen — Zahlen gehören rechtsbündig, damit die Rappen untereinander
   stehen. */
.ts-abrechnung td:nth-child(3),
.ts-abrechnung td:nth-child(4),
.ts-abrechnung th:nth-child(3),
.ts-abrechnung th:nth-child(4) {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.ts-abrechnung-summe td {
    border-top: 2px solid var(--ts-ui-line);
    font-weight: 600;
}

/* Eine Kostenzeile: Bezeichnung, Art, Betrag, ab wann. */
.ts-kostenzeile {
    display: grid;
    grid-template-columns: minmax(0, 2fr) 130px 100px 140px auto auto;
    gap: 8px;
    align-items: center;
    padding: 4px 0;
}
.ts-kostenzeile input,
.ts-kostenzeile select {
    width: 100%;
    min-width: 0;
    padding: 6px 8px;
    border: 1px solid var(--ts-ui-border, #d8dee9);
    border-radius: 5px;
    font: inherit;
    font-size: 12px;
}
.ts-kostenzeile-neu {
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px dashed var(--ts-ui-border, #d8dee9);
}

@media (max-width: 820px) {
    .ts-kostenzeile { grid-template-columns: minmax(0, 1fr) auto; }
}

/* Die Knöpfe der Bestellung stehen am Kopf: sie sind das, weswegen
   jemand sie öffnet. Am Fuss standen sie hinter Ware, Anschrift,
   Verlauf und Gutschriften — bei zehn Posten ausserhalb des Bildes. */
.ts-bestellwege {
    margin: 0 0 4px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--ts-ui-line);
}
.ts-bestellwege-zurueck { margin-right: auto; }

/* --------------------------------------------------------------------------
   Bildersuche

   Ein breiter Dialog, weil zwölf Kacheln nebeneinander die Entscheidung
   tragen: man sucht ein Bild, indem man Bilder ansieht, nicht indem man
   eine Liste liest.
   -------------------------------------------------------------------------- */

.ts-bildsuche {
    width: min(940px, calc(100vw - 32px));
    height: min(720px, calc(100vh - 48px));
    display: grid;
    grid-template-rows: auto auto auto 1fr auto;
    gap: 10px;
    overflow: hidden;
}

.ts-bs-kopf { display: flex; gap: 8px; }
.ts-bs-frage {
    flex: 1;
    padding: 9px 12px;
    border: 1px solid var(--ts-ui-line);
    border-radius: var(--ts-ui-radius);
    font: inherit;
}

.ts-bs-quellen {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    align-items: center;
    font-size: 12px;
    color: var(--ts-ui-muted);
}
.ts-bs-quelle { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
/* Nicht eingerichtete Archive stehen mit da, blass. Sie wegzulassen wäre
   bequemer und falscher: wer Pixabay erwartet und nichts sieht, sucht den
   Fehler bei sich. */
.ts-bs-quelle-aus { opacity: .45; cursor: not-allowed; }
.ts-bs-mehr { margin-left: auto; font-size: 12px; }

.ts-bs-treffer { overflow-y: auto; padding-right: 4px; }
.ts-bs-leer { color: var(--ts-ui-muted); padding: 28px 4px; text-align: center; }
.ts-bs-warnung {
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: var(--ts-ui-radius);
    padding: 7px 10px;
    margin: 0 0 10px;
    font-size: 12px;
    color: #92400e;
}

.ts-bs-gitter {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
}

.ts-bs-kachel {
    display: grid;
    gap: 4px;
    padding: 6px;
    border: 2px solid transparent;
    border-radius: 8px;
    background: var(--ts-ui-surface, #f8fafc);
    cursor: pointer;
    text-align: left;
    font: inherit;
}
.ts-bs-kachel:hover { border-color: var(--ts-ui-line); }
.ts-bs-aktiv { border-color: var(--ts-ui-accent, #1d4ed8); }
/* Kostenpflichtige Treffer werden nicht versteckt - man soll sie finden
   können - aber sie lassen sich nicht einsetzen, und das sieht man. */
.ts-bs-gesperrt { opacity: .6; }

.ts-bs-bild {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 5px;
    background: #e2e8f0;
}
.ts-bs-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ts-bs-zeile { display: flex; justify-content: space-between; gap: 6px; font-size: 11px; }
.ts-bs-quelle-name { font-weight: 600; }
.ts-bs-lizenz { color: var(--ts-ui-muted); text-align: right; }
.ts-bs-lizenz-kauf { color: #b45309; font-weight: 600; }
.ts-bs-urheber {
    font-size: 11px;
    color: var(--ts-ui-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ts-bs-kauf { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ts-ui-muted); }
.ts-bs-fuellung { flex: 1; }

/* --------------------------------------------------------------------------
   Die KI

   Das Protokoll ist der wichtigere Teil: ein Auftrag dauert Minuten, und
   ein Kreisel, der so lange dreht, sieht aus wie ein Absturz.
   -------------------------------------------------------------------------- */

.ts-ki-feld {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--ts-ui-line);
    border-radius: var(--ts-ui-radius);
    font: inherit;
    resize: vertical;
    margin-bottom: 8px;
}

.ts-ki-schnell { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.ts-chip {
    padding: 4px 9px;
    border: 1px solid var(--ts-ui-line);
    border-radius: 999px;
    background: #fff;
    font-size: 11px;
    cursor: pointer;
}
.ts-chip:hover { background: var(--ts-ui-surface, #f8fafc); }

.ts-ki-leiste { display: flex; gap: 6px; }
.ts-ki-warnung { margin-top: 10px; line-height: 1.45; }

.ts-ki-protokoll {
    margin-top: 12px;
    border-top: 1px solid var(--ts-ui-line);
    padding-top: 10px;
    max-height: 46vh;
    overflow-y: auto;
    font-size: 12px;
}

.ts-ki-zeile { padding: 3px 0; color: var(--ts-ui-muted); }
.ts-ki-runde { color: var(--ts-ui-text); font-weight: 600; margin-top: 8px; }
.ts-ki-werkzeug { padding-left: 12px; }
.ts-ki-fehler { color: #b91c1c; }
.ts-ki-start { color: var(--ts-ui-text); }

.ts-ki-fertig {
    margin-top: 12px;
    padding: 10px;
    border-radius: 8px;
    background: var(--ts-ui-surface, #f8fafc);
}
.ts-ki-getan { margin: 0 0 10px; padding-left: 18px; }
.ts-ki-getan li { margin: 2px 0; }
.ts-ki-antwort p { margin: 0 0 8px; line-height: 1.5; color: var(--ts-ui-text); }

/* Das KI-Budget. Eine Zahl allein ist keine Grösse — der Balken sagt
   „gut die Hälfte", und das ist die Auskunft, die jemand braucht, bevor
   er einen Auftrag abschickt. */
.ts-ki-budget { margin-top: 12px; }
.ts-ki-balken {
    height: 6px;
    border-radius: 3px;
    background: var(--ts-ui-line, #e5e7eb);
    overflow: hidden;
    margin-bottom: 5px;
}
.ts-ki-balken span {
    display: block;
    height: 100%;
    background: var(--ts-ui-accent, #1d4ed8);
}
.ts-ki-balken-knapp { background: #b45309; }