. Overlays
bleiben nur für Rückfragen vor dem Löschen. */
.d-split {
display: flex;
align-items: stretch;
min-height: 0;
height: 100%;
}
/* Der Inhaltsbereich gibt der Karte ihre Luft. Im Entwurf steht der
Inhaltskopf auf `18px 24px 0` — deshalb 24px (`--space-5`) und nicht 16px:
sonst setzt jedes Modul den Abstand erneut, um auf die Entwurfsbreite zu
kommen, und die Werte laufen auseinander. */
.d-main {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
min-height: 0;
padding: var(--space-5);
}
.d-detail {
width: var(--d-detail);
flex: none;
display: flex;
flex-direction: column;
min-height: 0;
background: var(--surface);
border-left: 1px solid var(--border);
}
.d-detail[hidden] { display: none; }
.d-detail-scroll { flex: 1; min-height: 0; overflow-y: auto; }
/* ── Ziehgriff an der linken Kante der Spalte ────────────────────────────
Die Breite ist Sache des Anwenders und wird pro Modul gemerkt (Logik in
core/app.js). Der Griff sitzt IN der Spalte und ragt nach links über die
Kante, damit die Trefferflaeche breiter ist als die sichtbare Linie —
6px Linie sind mit der Maus kaum zu fassen.
`position: absolute` statt eines eigenen Flex-Kindes: sonst muesste jede
Spalte ihre Innenaufteilung kennen.
v5.32.5 — DER STRICH IST JETZT IMMER DA. Vorher stand er im Ruhezustand
auf `transparent` und wurde erst beim Ueberfahren golden. Damit war die
Spalte zwar seit jeher ziehbar (samt Pfeiltasten und Doppelklick-
Ruecksetzung), aber niemand konnte das wissen: wer die 9px-Kante nie
zufaellig traf, erfuhr nie, dass sie eine ist. Genau das ist als Frage
zurueckgekommen — gestellt fuer den Kalender, gemeint war das Bauteil.
Es steht deshalb hier und nicht im Modul: dieselbe Spalte tragen auch
Buchungen, Zahlungen, Vertraege und Kunden, und vier Modul-Regeln
wuerden dieselbe Frage viermal beantworten.
DIE MASSE SIND DIE DES WAAGRECHTEN GRIFFS (`.kal-griff-h` in
modules/kalender/view.css, gleiches Muster in modules/kommunikation):
11px Flaeche, darin ein 3px schmaler und 46px langer Strich mit 2px
Radius in `--border` bei 80 % Deckung; beim Beruehren geht der Strich
auf `--accent`, die Flaeche auf `--accent-soft`. Waagrecht und senkrecht
sind damit sichtbar dasselbe Bedienelement, nur um 90 Grad gedreht.
WARUM KURZ UND MITTIG statt durchgehend: eine Linie ueber die volle
Hoehe laese sich als Rahmen der Spalte lesen, nicht als Griff — und die
Spalte hat mit `border-left` bereits einen Rahmen. Der kurze Strich in
der Mitte ist eindeutig ein Griff.
Die Flaeche waechst von 9px auf 11px (Gleichstand mit dem waagrechten);
`left` geht dafuer von -3px auf -5px, damit der Ueberstand ueber die
Kante — die eigentliche Trefferflaeche — gleich gross bleibt.
`touch-action: none`, weil auf einem quer gehaltenen Tablet ab 1024px
das Ziehen sonst die Seite mitschiebt.
Der Fokusring muss sein: der Griff ist `tabindex="0"` und mit den
Pfeiltasten bedienbar (core/app.js) — ohne Ring waere per Tastatur nicht
erkennbar, worauf man gerade steht. Vorher stand hier `outline: none`.
Die Aussage haengt nie an der Farbe allein: Lage, Form und Ring tragen
sie, Gold bestaetigt nur, dass der Zeiger richtig sitzt. */
.d-detail { position: relative; }
.d-detail-griff {
position: absolute;
top: 0;
bottom: 0;
left: -5px;
width: 11px;
z-index: 5;
cursor: col-resize;
background: transparent;
touch-action: none;
}
.d-detail-griff::before {
content: '';
position: absolute;
top: 50%;
left: 4px;
width: 3px;
height: 46px;
transform: translateY(-50%);
border-radius: 2px;
background: var(--border, var(--surface-3));
opacity: .8;
}
/* Beim Zeigen bekommt die ganze Flaeche einen Ton — erst dadurch ist zu
sehen, WIE breit der Ziehbereich wirklich ist. */
.d-detail-griff:hover,
.d-detail-griff:focus-visible { background: var(--accent-soft); }
.d-detail-griff:hover::before,
.d-detail-griff:focus-visible::before,
body.d-zieht-breite .d-detail-griff::before {
background: var(--accent);
opacity: 1;
}
.d-detail-griff:focus-visible {
outline: 2px solid var(--accent);
outline-offset: -1px;
}
/* Waehrend des Ziehens darf nichts markiert werden und der Zeiger bleibt
ueberall der Ziehzeiger — sonst flackert er ueber jedem Text. */
body.d-zieht-breite { user-select: none; -webkit-user-select: none; cursor: col-resize; }
/* ── Grosszuegigere Vorgaben, wo viel im Detail steht ────────────────────
388px sind das Mass aus dem Entwurf fuer die Zahlungsliste. Buchung und
Vertrag tragen deutlich mehr (Baender, Reiter, Zahlungsplan, Adressen)
und starten deshalb breiter. Das ist nur die VORGABE — sobald der
Anwender zieht, gewinnt sein Wert (Inline-Stil aus core/app.js). */
/* `#panel-list` ist das Vertragsmodul (bhbgv) — sein Panel traegt aus
historischen Gruenden den generischen Namen, waehrend der Modulschluessel
im Speicher `bhbgv` heisst. Ein `#panel-bhbgv` existiert nicht. */
#panel-buchungen, #panel-list { --d-detail: 560px; }
/* ── Ein Overlay, das IN der Spalte geparkt wird ─────────────────────────
Die Module haengen ihr bestehendes Detail-Fenster in die Spalte, statt es
ein zweites Mal zu bauen (bhbgv, rechnungen, eigentuemer). Die Huelle
bringt dabei ihre Overlay-Herkunft mit: `align-items` und
`justify-content` stehen dort auf `center`, was das Fenster senkrecht in
der Spalte zentriert hat — bei kurzem Inhalt stand es als Block in der
Mitte, mit grossen Leerflaechen darueber und darunter.
In der Spalte ist die Huelle kein Overlay mehr, sondern schlicht der
Behaelter: der Inhalt beginnt oben und fuellt die Hoehe. Der dunkle
Schleier und die Polsterung entfallen aus demselben Grund — es liegt
nichts mehr darunter, das verdeckt werden muesste. */
.d-detail > .modal-overlay {
position: static;
inset: auto;
align-items: stretch;
justify-content: flex-start;
padding: 0;
background: none;
backdrop-filter: none;
flex: 1 1 auto;
min-height: 0;
}
.d-detail > .modal-overlay > .modal {
width: 100%;
max-width: none;
/* KEINE feste Hoehe: `align-items: stretch` oben zieht das Fenster ohnehin
auf die Spaltenhoehe. Nur die Deckelung muss weg, sonst bleibt eine
`max-height: 90vh` aus der Overlay-Zeit stehen. */
max-height: none;
margin: 0;
border: 0;
border-radius: 0;
box-shadow: none;
display: flex;
flex-direction: column;
min-height: 0;
}
/* Kopf der Detail-Spalte: Titel + Meta links, Schließen rechts. */
.d-detail-head {
flex: none;
display: flex;
align-items: flex-start;
gap: var(--space-2);
padding: 14px var(--space-4) 10px;
border-bottom: 1px solid var(--border);
}
.d-detail-titel {
flex: 1;
min-width: 0;
font-size: var(--fs-section);
font-weight: 700;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.d-detail-meta {
margin-top: 2px;
font-family: ui-monospace, 'SFMono-Regular', monospace;
font-size: 11.5px;
color: var(--text-muted);
}
.d-detail-close {
flex: none;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: var(--radius);
background: transparent;
color: var(--text-muted);
font-size: 15px;
cursor: pointer;
}
.d-detail-close:hover { background: var(--surface-3); color: var(--text); }
/* Bereichs-Reiter in der Detail-Spalte (Beleg / Positionen / Versand …). */
.d-tabs {
flex: none;
display: flex;
gap: 2px;
padding: 0 var(--space-3);
border-bottom: 1px solid var(--border);
background: var(--surface);
}
.d-tab {
padding: 9px 11px;
border: 0;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
background: transparent;
color: var(--text-muted);
font-family: inherit;
font-size: 12.5px;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
}
.d-tab:hover { color: var(--text); }
.d-tab.active { color: var(--text); border-bottom-color: var(--accent); }
/* Feldzeilen: Label links (Raster aus dem Canvas: 124px/1fr), Wert rechts. */
.d-fields { padding: 6px 0; }
.d-field {
display: grid;
grid-template-columns: 124px 1fr;
gap: var(--space-2);
align-items: baseline;
padding: 7px var(--space-4);
}
.d-field-label { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.d-field-wert { font-size: 13px; color: var(--text); min-width: 0; overflow-wrap: anywhere; }
.d-field-wert.mono {
font-family: ui-monospace, 'SFMono-Regular', monospace;
font-size: 12.5px;
}
/* Abschnitts-Label (MAHNVERLAUF, RUND UM DEN AUFENTHALT …). */
.d-abschnitt {
margin: var(--space-3) var(--space-4) var(--space-1);
font-family: ui-monospace, 'SFMono-Regular', monospace;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.1em;
color: var(--accent2);
}
/* Fußleiste der Detail-Spalte: Primäraktion füllt, Sekundär daneben. */
.d-detail-foot {
flex: none;
display: flex;
gap: 9px;
padding: 11px var(--space-4);
border-top: 1px solid var(--border);
background: var(--surface);
}
.d-detail-foot .btn-primary { flex: 1; }
/* ══ LISTEN-MARKER ══════════════════════════════════════════════════
Die gewählte Zeile trägt Gold-Rand UND getönte Fläche — derselbe Marker
wie „ungelesen" am Handy. Farbe allein trägt nicht. */
.d-row-sel,
tr.d-row-sel > td:first-child { position: relative; }
.d-row-sel {
background: var(--accent-soft) !important;
box-shadow: inset 3px 0 0 var(--accent);
}
/* ══ AUSWAHL-AKTIONSLEISTE ══════════════════════════════════════════
Mehrfachauswahl: Leiste erscheint erst, wenn etwas gewählt ist —
statt einer permanenten Checkbox-Spalten-Kopfzeile. */
.d-selbar {
display: flex;
align-items: center;
gap: var(--space-3);
padding: 9px var(--space-4);
background: var(--accent-soft);
border-bottom: 1px solid var(--border);
font-size: 12.5px;
font-weight: 600;
color: var(--text);
}
.d-selbar[hidden] { display: none; }
/* ══ LISTE KLAPPT NEBEN DEM DETAIL EIN (D1) ═════════════════════════
Wunsch des Anwenders (07.10.2026): Ist rechts ein Detail offen, braucht
die Liste links nicht mehr ihre volle Breite — man arbeitet im Detail.
Vorbild ist die Konversationsliste der Kommunikation (Avatar-Leiste,
klappt beim Darüberfahren auf, Anker hält sie fest offen). Gebaut ist es
HIER und in core/app.js („LISTE KLAPPT EIN"), nicht je Modul: jedes
Listen-Modul mit `.d-split > .d-main + .d-detail` nimmt automatisch teil.
v5.76 (Betreiber 08.10.2026): „Die Daten sollen nur beim Ausklappen
richtig sichtbar sein." Eingeklappt ist die Liste deshalb KEINE Tabelle
mehr, sondern wie in der Kommunikation eine ~68px-Spalte aus Kürzel-
Kästchen (Initialen des Kunden/Gastes), ohne Kopfzeile, ohne Spalten-
köpfe, ohne Text. Die frühere 272px-Leiste mit Kernspalten zeigte zu
wenig, um damit zu arbeiten, und zu viel, um ruhig zu sein — und in
Zahlungen brach sie die Nummern zeichenweise um.
Zustände, alle von core/app.js auf `.d-split` gesetzt:
.d-detail-auf eine Detail-Spalte ist sichtbar → Anker sichtbar
.d-liste-zu … und die Liste ist NICHT angeheftet → Kürzel-Spalte
.d-liste-auf die eingeklappte Liste ist gerade aufgeklappt (Hover/
Tastatur) — sie liegt dann als volle Tabelle ÜBER dem
Detail
Welche Zelle das Kürzel trägt, entscheidet core/app.js anhand der
| -Markierungen (`d-kern-name`, sonst Spaltenname wie „Kunde"/„Gast";
Statusfarbe aus `d-kern-punkt`) und schreibt es als `data-d-ini` an
genau diese | . Alles Übrige blendet die Regel unten aus — ohne
Liste von Spalten, die bei jedem Modul anders wäre.
WARUM `position:absolute` für die Liste und ein Platzhalter (::before)
im Fluss: Nur so kann die Liste beim Aufklappen breiter werden, ohne
dass das Detail daneben auch nur ein Pixel wandert — sie legt sich
darüber, der Platzhalter hält die schmale Breite fest.
WARUM `#main` vorne an den Selektoren: Module setzen Polster, Hinter-
grund und Tabellen-Mindestbreiten teils über IDs (`#kunden-d-main`,
`#panel-rechnungen:has(…) .rechnungen-table`). Ohne die ID gewönne dort
das Modul. */
.d-split { position: relative; }
.d-split.d-liste-zu {
--d-liste-zu: 68px;
/* Aufgeklappt: so breit wie die Liste angeheftet wäre, aber nie unter
720px (sonst lohnt das Aufklappen nicht) und mit mindestens 96px
sichtbarem Detail daneben — man soll sehen, dass es noch da ist. */
--d-liste-voll: min(calc(100% - 96px), max(calc(100% - var(--d-detail)), 720px));
}
.d-split.d-liste-zu::before {
content: '';
flex: none;
width: var(--d-liste-zu);
order: -1;
}
#main .d-split.d-liste-zu > .d-main {
position: absolute;
top: 0;
bottom: 0;
left: 0;
/* 40: über allem, was im Detail ohne eigenen Stapelkontext klebt
(Kopfzeilen 12, Formular-Fußleisten 30, Breiten-Griff 5), aber unter
Klapplisten (--z-dropdown 200), Navigation (100) und Dialogen (1000). */
z-index: 40;
width: var(--d-liste-zu);
padding: var(--space-2) 0;
background: var(--bg);
overflow: hidden;
transition: width .18s ease, box-shadow .18s ease;
}
#main .d-split.d-liste-zu.d-liste-auf > .d-main {
width: var(--d-liste-voll);
padding: var(--space-3);
overflow-y: auto;
box-shadow: 8px 0 24px rgba(0, 0, 0, .22);
}
/* WARUM DIE AUFGEKLAPPTE LISTE FRÜHER HINTER DEM DETAIL LAG (Buchungen,
Zahlungen): Module hängen ihr altes Overlay (`.modal-overlay`, z-index
1000 aus core/shell.css) als Inhalt in die Detail-Spalte. core macht es
dort zwar `position:static` — aber die Spalte ist `display:flex`, und
an einem FLEX-KIND wirkt z-index auch ohne Positionierung: Das Overlay
bildete einen Stapelkontext auf Ebene 1000 und lag damit über der
Liste (8). In der Spalte ist es kein Overlay mehr, seine Ebene hat dort
keine Aufgabe → zurück auf `auto`. !important wegen Modulregeln unter
IDs (`body #bu-detail-modal.modal-overlay` u. ä.). Echte Dialoge, die
als Overlay am hängen, trifft der Selektor nicht. */
.d-split > .d-detail > .modal-overlay { z-index: auto !important; }
/* Beim Ziehen am Griff folgt die Leiste dem Zeiger ohne Nachlauf. */
body.d-zieht-breite .d-split > .d-main { transition: none; }
/* Das Detail füllt den Rest. Die gemerkte Spaltenbreite (Inline-
`--d-detail`) gilt erst wieder, wenn die Liste angeheftet wird. Der
Breiten-Griff entfällt solange — neben einer Kürzel-Spalte gibt es
keine Breite einzustellen (wie in der Kommunikation). */
.d-split.d-liste-zu > .d-detail {
flex: 1 1 0;
width: auto;
min-width: 0;
}
.d-split.d-liste-zu > .d-detail > .d-detail-griff { display: none; }
/* ── Eingeklappt: nur die Kürzel-Kästchen ────────────────────────────
Kopf, Filter, Reiter usw. markiert core/app.js mit `data-d-zu="weg"`
(alles in `.d-main`, das keine Tabelle enthält). Die Tabelle bleibt
eine Tabelle (Zeilen, die ein Modul per `hidden`/Klasse ausblendet,
bleiben so ausgeblendet), zeigt aber je Zeile nur die Kürzel-Zelle. */
#main .d-split.d-liste-zu:not(.d-liste-auf) > .d-main [data-d-zu="weg"] { display: none; }
#main .d-split.d-liste-zu:not(.d-liste-auf) > .d-main :has(table[data-d-liste]) {
/* Hüllen der Tabelle (Karten, Scroll-Boxen): kein Polster, kein Rand,
keine Mindestbreite — sonst bliebe von 68px nichts übrig. */
min-width: 0 !important;
width: auto !important;
padding: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
border: 0 !important;
box-shadow: none !important;
background: none !important;
scrollbar-width: none;
}
#main .d-split.d-liste-zu:not(.d-liste-auf) > .d-main { scrollbar-width: none; }
#main .d-split.d-liste-zu:not(.d-liste-auf) > .d-main table[data-d-liste] {
/* !important: die Mindestbreiten der Module stehen teils unter zwei IDs
(siehe oben). */
min-width: 0 !important;
width: 100% !important;
table-layout: fixed !important;
border: 0 !important;
background: none !important;
}
#main .d-split.d-liste-zu:not(.d-liste-auf) > .d-main table[data-d-liste] > :is(thead, tfoot) { display: none !important; }
/* Zeilenfarben (z. B. rot für überfällig in Zahlungen) zeigt eingeklappt
nur noch das Kästchen; die gewählte Zeile behält ihren Gold-Marker. */
#main .d-split.d-liste-zu:not(.d-liste-auf) > .d-main table[data-d-liste] > tbody > tr:not(.d-row-sel) {
background: none !important;
box-shadow: none !important;
}
/* Jede Zelle ohne Kürzel verschwindet — auch Leer-/Ladezeilen („Keine
Einträge"), deren Satz in 68px nur senkrecht stehen könnte. */
#main .d-split.d-liste-zu:not(.d-liste-auf) > .d-main table[data-d-liste] > tbody > tr > :not([data-d-ini]) { display: none !important; }
#main .d-split.d-liste-zu:not(.d-liste-auf) > .d-main table[data-d-liste] > tbody > tr > [data-d-ini] {
position: relative;
width: auto !important;
min-width: 0 !important;
height: auto;
padding: 4px 0 !important;
border: 0 !important;
background: none !important;
text-align: center !important;
font-size: 0 !important;
line-height: 0 !important;
cursor: pointer;
}
/* Der Zellinhalt (Name, Unterzeilen, Pillen) bleibt im Baum — für
Screenreader und für das Aufklappen —, wird aber nicht gezeichnet. */
#main .d-split.d-liste-zu:not(.d-liste-auf) > .d-main table[data-d-liste] > tbody > tr > [data-d-ini] > * { display: none !important; }
/* Das Kästchen: Maß und Rundung wie `.komm-avatar` (Kommunikation),
Rand und Hauch von Fläche in der Statusfarbe der Zeile. */
#main .d-split.d-liste-zu:not(.d-liste-auf) > .d-main table[data-d-liste] > tbody > tr > [data-d-ini]::before {
content: attr(data-d-ini);
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 36px;
height: 36px;
border-radius: 9px;
border: 1.5px solid color-mix(in srgb, var(--d-ini-farbe, var(--border-strong)) 65%, transparent);
background: color-mix(in srgb, var(--d-ini-farbe, var(--neutral-soft)) 14%, var(--surface));
color: var(--text);
font-size: 12px;
font-weight: 700;
line-height: 1;
letter-spacing: .02em;
white-space: nowrap;
overflow: hidden;
}
/* Status-Punkt an der Ecke — Farbe allein trägt nicht, deshalb Punkt UND
Rand. Nur, wenn die Tabelle eine Statusspalte hat. */
#main .d-split.d-liste-zu:not(.d-liste-auf) > .d-main table[data-d-liste] > tbody > tr > [data-d-ini][data-d-ini-punkt]::after {
content: '';
position: absolute;
left: calc(50% + 11px);
bottom: 2px;
width: 10px;
height: 10px;
box-sizing: border-box;
border-radius: 50%;
border: 2px solid var(--bg);
background: var(--d-ini-farbe, var(--text-muted));
}
#main .d-split.d-liste-zu:not(.d-liste-auf) > .d-main table[data-d-liste] > tbody > tr:hover > [data-d-ini]::before {
border-color: var(--accent);
}
/* Gewählte Zeile: Gold wie der Avatar in der Kommunikation. */
#main .d-split.d-liste-zu:not(.d-liste-auf) > .d-main table[data-d-liste] > tbody > tr.d-row-sel > [data-d-ini]::before {
background: var(--accent);
border-color: var(--accent);
color: var(--on-accent, #fff);
}
/* Aufgeklappt: Zellen nie zeichenweise umbrechen (Zahlungen zeigte
„N/U/M/M/E/R" untereinander). Lange Inhalte kürzt die Tabelle des
Moduls wie gewohnt; reicht die Breite nicht, rollt die Liste quer. */
#main .d-split.d-liste-zu.d-liste-auf > .d-main table[data-d-liste] :is(th, td) {
overflow-wrap: normal;
word-break: normal;
}
#main .d-split.d-liste-zu.d-liste-auf > .d-main table[data-d-liste] th { white-space: nowrap; }
/* ── Listenkopf mit Anker ─────────────────────────────────────────────
Erscheint nur, solange ein Detail offen ist — ohne Detail gibt es
nichts einzuklappen und damit nichts anzuheften. */
.d-liste-kopf { display: none; }
.d-split.d-detail-auf > .d-main > .d-liste-kopf {
flex: none;
display: flex;
align-items: center;
gap: var(--space-2);
margin-bottom: var(--space-2);
min-height: 32px;
}
/* Eingeklappt: kein Titel, nur der Anker zentriert oben in der Spalte —
dasselbe Muster wie die eingeklappte Hauptleiste. */
#main .d-split.d-liste-zu:not(.d-liste-auf) > .d-main > .d-liste-kopf { justify-content: center; }
#main .d-split.d-liste-zu:not(.d-liste-auf) > .d-main > .d-liste-kopf > .d-liste-kopf-titel { display: none; }
.d-liste-kopf-titel {
flex: 1;
min-width: 0;
font-family: ui-monospace, 'SFMono-Regular', monospace;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.d-liste-pin {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--surface);
color: var(--text-muted);
cursor: pointer;
}
.d-liste-pin svg { width: 15px; height: 15px; }
.d-liste-pin:hover { color: var(--text); border-color: var(--accent); }
.d-liste-pin:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Angeheftet = Akzentfarbe, wie der Anker der Hauptleiste. */
.d-liste-pin[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
/* Quer gehaltenes Tablet ab 1024px: Finger statt Maus → 44px. */
@media (pointer: coarse) {
.d-liste-pin { width: var(--tap, 44px); height: var(--tap, 44px); }
}
}
/* Reduzierte Bewegung: die Liste springt auf und zu, statt zu gleiten. */
@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
#main .d-split.d-liste-zu > .d-main { transition: none; }
}
|