/* ============================================================================
   KOS KLIMA® Intranet – Unternehmenseinstellungen (Mandant)
   ----------------------------------------------------------------------------
   Gestaltung des Bereichs aus app/tenant.js.

   ZUR FARBE ROT
   Der Bereich ist rot abgesetzt, weil hier die Einrichtung des Portals selbst
   geändert wird – nicht Inhalte. Rot ist im Design-System aber zugleich die
   Farbe für Löschen, Störung und Notfall. Deshalb wird es hier als MARKIERUNG
   eingesetzt (Kante, Eyebrow, Symbol) und nicht als Fläche: Eine rote
   Navigationsfläche würde wie eine Fehlermeldung wirken und Rot für echte
   Warnungen entwerten.
   ========================================================================== */

/* ========================================================================== */
/* 1. EIGENER ABSCHNITT IN DER NAVIGATION                                     */
/* ========================================================================== */
/* Der Bereich war zuvor EIN Eintrag am Ende der Administration und trug seine
   rote Kante deshalb an sich selbst. Als eigener Abschnitt mit vier
   Unterpunkten stünde dieselbe Kante viermal untereinander – das wäre kein
   Hinweis mehr, sondern Lärm. Die Kennzeichnung wandert deshalb an den
   ABSCHNITT: eine durchgehende Schiene links und eine rote Überschrift. Die
   volle Kante am einzelnen Eintrag bleibt dem aktiven vorbehalten und sagt
   damit, wo man gerade steht. */

.tenant-section {
  position: relative;
  margin-top: var(--space-5);
  padding-top: var(--space-2);
  padding-left: 3px;                       /* Platz für die Schiene */
  border-top: 1px solid var(--border-card);
}
.tenant-section::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--space-7);                     /* erst unterhalb der Überschrift */
  bottom: var(--space-3);
  width: 2px;
  border-radius: 1px;
  background: rgba(201, 48, 44, 0.35);
}
.tenant-section-label { color: var(--red-alert) !important; }

.nav-item-tenant { position: relative; }
.nav-item-tenant .nav-icon { color: var(--red-alert); }
.nav-item-tenant:hover { background: rgba(201, 48, 44, 0.06) !important; }
.nav-item-tenant.active {
  background: var(--surface-card) !important;
  border: 1px solid var(--border-card);
  box-shadow: 0 2px 8px rgba(55, 83, 116, 0.06);
}
.nav-item-tenant.active::before {
  content: "";
  position: absolute;
  left: -3px; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 18px;
  border-radius: 2px;
  background: var(--red-alert);
}

/* Eyebrow der Seite in derselben Farbe – so ist beim Öffnen klar, dass man
   im richtigen Bereich gelandet ist. */
.tenant-eyebrow { color: var(--red-alert); }

/* ========================================================================== */
/* 2. KACHELRASTER DER UNTERSEITEN                                            */
/* ========================================================================== */
/* Zwölf Spalten wie auf dem Dashboard, damit zusammengehörige Einstellungen
   nebeneinander stehen und der Blick nicht senkrecht durchrutscht.

   BEWUSST EIGENE KLASSEN statt .dash-grid/.dash-cell: Das Dashboard-Raster
   bringt eine Sonderregel für #blocks-host mit, die dort das 60-Spalten-Raster
   der Seiteninhalte aufgibt. Die gehört hier nicht hin – ein geteiltes
   Regelwerk müsste dann Ausnahmen für den jeweils anderen Ort machen, und
   genau daraus entstehen später Fehler, die niemand mehr zuordnet. */

.t-cells {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gap-grid);
  align-items: start;
}
.t-cell    { min-width: 0; }   /* verhindert, dass lange Wörter das Raster sprengen */
/* Alle Breiten, nicht nur die tatsächlich vergebenen: Schließt
   renderTenantSection() eine Lücke am Zeilenende, kann eine Kachel auf jeden
   Wert dazwischen wachsen. Fehlte die Klasse, hätte die Zelle gar keine
   Breite mehr und fiele auf eine einzige Spalte zusammen. */
.t-cell-1  { grid-column: span 1; }
.t-cell-2  { grid-column: span 2; }
.t-cell-3  { grid-column: span 3; }
.t-cell-4  { grid-column: span 4; }
.t-cell-5  { grid-column: span 5; }
.t-cell-6  { grid-column: span 6; }
.t-cell-7  { grid-column: span 7; }
.t-cell-8  { grid-column: span 8; }
.t-cell-9  { grid-column: span 9; }
.t-cell-10 { grid-column: span 10; }
.t-cell-11 { grid-column: span 11; }
.t-cell-12 { grid-column: span 12; }

/* Abschnittsüberschrift innerhalb einer Unterseite.

   Sieben gleich aussehende Kacheln in einer Reihe wirkten beliebig: Man musste
   jede Kartenüberschrift lesen, um zu wissen, wo man ist. Die Überschrift
   fasst zusammen, was darunter zusammengehört – und übernimmt damit die
   Aufgabe, die vorher die wechselnden Breiten übernehmen sollten und nicht
   konnten. */
.t-group {
  margin: var(--space-8) 0 var(--space-5);
}
/* Der erste Abschnitt sitzt direkt unter der Seiteneinleitung und braucht
   oben keinen zusätzlichen Abstand. */
.t-cells + .t-group { margin-top: var(--space-9, 34px); }
.t-group:first-child { margin-top: 0; }

.t-group-label {
  font: var(--weight-bold) var(--text-label) / 1 var(--font-headline);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-heading);
}
.t-group-hint {
  margin-top: var(--space-2);
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-meta);
  max-width: 68ch;
}

/* Kacheln tragen ihren Abstand über gap, nicht über margin. */
.t-cell > .card { margin-bottom: 0; }
/* Nebeneinander stehende Kacheln auf gleiche Höhe bringen – aber nur, wenn die
   Zelle genau EINE Karte enthält. Zwei gestreckte Karten übereinander ergäben
   zusammen die doppelte Zellenhöhe und sprengten das Raster. */
.t-cell > .card:only-child { height: 100%; }
.t-cell > .card + .card { margin-top: var(--gap-grid); }

/* Unterhalb der Tabletbreite bricht das Raster auf eine Spalte um – zwei
   Kacheln nebeneinander wären dort schmaler als ihr Inhalt. */
@media (max-width: 1100px) {
  .t-cell-1, .t-cell-2, .t-cell-3,  .t-cell-4,
  .t-cell-5, .t-cell-6, .t-cell-7,  .t-cell-8,
  .t-cell-9, .t-cell-10, .t-cell-11 { grid-column: span 12; }
}

/* ========================================================================== */
/* 3. KARTEN UND FELDER                                                       */
/* ========================================================================== */

.tenant-intro {
  margin: 0 0 var(--space-7);
  font-size: var(--text-body-sm);
  color: var(--text-meta);
  max-width: 68ch;   /* Lesbare Zeilenlänge, auch auf breiten Bildschirmen */
}

/* Zweispaltig, solange Platz ist. auto-fit statt fester Spaltenzahl, damit
   dieselbe Regel für zwei, drei und sechs Felder trägt. */
.t-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-5) var(--space-7);
  margin-bottom: var(--space-6);
}
/* In einer schmalen Kachel (5 von 12 Spalten) hätte auto-fit gerade noch Platz
   für zwei Spalten – die Felder stünden dann gequetscht nebeneinander, während
   ihre Hinweistexte umbrechen. Dort wird ausdrücklich einspaltig gesetzt. */
.t-grid-1 { grid-template-columns: minmax(0, 1fr); }
/* Für Klappmenüs, deren Einträge ganze Sätze sind. Bei 240px schneidet der
   Browser sie ab – und zwar hinten, wo die Erklärung steht. */
.t-grid-wide { grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); }

/* Mehrzeiliges Feld. Nur senkrecht veränderbar: Waagerecht gezogen ragte es
   aus seiner Rasterzelle heraus und schöbe die Nachbarkachel beiseite. */
.t-area {
  resize: vertical;
  min-height: 74px;
  line-height: 1.5;
  font-family: var(--font-body);
}

/* Zwischenüberschrift innerhalb einer Karte */
.t-sub {
  margin: var(--space-7) 0 var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-card);
  font: var(--weight-bold) var(--text-label) / 1 var(--font-headline);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-heading);
}

.field-hint {
  margin-top: var(--space-2);
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-meta);
}

/* Farbfelder sind schmal – als Eingabe vom Typ color sonst unförmig breit. */
.field-input[type="color"] {
  width: 56px;
  height: 38px;
  padding: 3px;
  flex: none;
  cursor: pointer;
}

/* Farbzeile: Wähler, Zustand, Zurücknehmen.
   Der Zustandstext ist nötig, weil man einem Farbwähler nicht ansieht, ob
   die Farbe gewählt oder nur die angezeigte Vorgabe ist. */
.t-color-row { display: flex; align-items: center; gap: var(--space-4); }
.t-color-state {
  font: var(--weight-medium) 12px / 1 var(--font-headline);
  color: var(--text-meta);
  min-width: 68px;
}
.t-color.is-set .t-color-state { color: var(--text-heading); }
/* Solange die Vorgabe gilt, bleibt der Wähler zurückgenommen – so ist auf
   einen Blick erkennbar, dass hier nichts Eigenes eingestellt ist. */
.t-color:not(.is-set) .field-input[type="color"] { opacity: .45; }
.t-color:not(.is-set) .t-linkbtn { visibility: hidden; }

/* Vorschau-Zeile unter den Vorlagenfeldern */
.t-mailpreview {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-5);
}
.t-mailpreview .field-hint { margin-top: 0; flex: 1 1 280px; }
/* Ergebnis des Verbindungstests. Farbe UND Wortlaut tragen die Aussage –
   allein an der Farbe wäre sie für Farbfehlsichtige nicht erkennbar. */
.field-hint.is-ok  { color: var(--success); font-weight: 600; }
.field-hint.is-bad { color: var(--danger);  font-weight: 600; }

/* Rahmen der Vorschau. Feste Höhe, damit der Dialog nicht bei jeder
   Nachrichtenlänge springt; gescrollt wird innerhalb des Rahmens. */
.t-mailframe {
  display: block;
  width: 100%;
  height: 60vh;
  min-height: 320px;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-xs);
  background: var(--white);
}

.t-linkbtn {
  border: none; background: none; padding: 0;
  color: var(--danger);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

/* --------------------------------------------------------- Schriftvorschau */
/* Eine Schrift blind auszuwählen ist Raten. Die Zeile zeigt zugleich Umlaute
   und Ziffern – dort unterscheiden sich Schriften am deutlichsten, und dort
   fällt auch auf, wenn eine gewünschte Schrift gar nicht vorhanden ist und
   der Browser eine andere eingesetzt hat. */
.t-font-sample {
  margin-top: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: 1px dashed var(--border-card);
  border-radius: var(--radius-xs);
  background: var(--surface-card);
  font-size: 17px;
  line-height: 1.35;
  color: var(--text-heading);
  overflow-wrap: anywhere;
}
/* Gilt die Vorgabe, wird das auch gesagt – sonst wirkt die Zeile wie eine
   getroffene Wahl. */
.t-font-sample.is-default { color: var(--text-meta); }
.t-font-custom { margin-top: var(--space-4); }

/* ========================================================================== */
/* 4. DASHBOARD-MODULE                                                        */
/* ========================================================================== */
/* Eine Zeile je Baustein: verschieben, benennen, Breite, zeigen/verbergen,
   entfernen. Bewusst eine Liste und keine Nachbildung des Rasters: Eine
   Miniaturansicht der Startseite verspricht eine Genauigkeit, die sie nicht
   halten kann – wie breit eine Kachel wirklich wird, hängt davon ab, was ihre
   Nachbarn an diesem Tag zu zeigen haben. */

.t-dash-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-5);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-xs);
  background: var(--surface-card);
  margin-bottom: var(--space-4);
}
/* Verborgen: zurückgenommen, aber lesbar. Nicht ausgrauen bis zur
   Unleserlichkeit – die Zeile muss bedienbar bleiben, sonst kommt man an den
   Schalter zum Wiedereinblenden nicht heran. */
.t-dash-row.is-off { background: var(--bg-sand); }
.t-dash-row.is-off .t-dash-label { color: var(--text-meta); }

.t-dash-move { display: flex; flex-direction: column; gap: 2px; }
.t-dash-move .icon-btn { width: 26px; height: 22px; }
.t-dash-move .icon-btn[disabled] { opacity: .3; cursor: default; }

.t-dash-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.t-dash-label {
  font: var(--weight-medium) 14px / 1.3 var(--font-headline);
  color: var(--text-heading);
}
.t-dash-hint { font-size: 12px; line-height: 1.45; color: var(--text-meta); }
.t-dash-note { font-size: 12px; line-height: 1.45; color: var(--danger); }

.t-dash-width { display: flex; flex-direction: column; gap: 3px; }
.t-dash-width .field-input { min-width: 210px; }
.t-dash-widthlabel {
  font: var(--weight-bold) var(--text-label) / 1 var(--font-headline);
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  color: var(--text-meta);
}

.t-dash-actions { display: flex; align-items: center; gap: var(--space-4); }
.t-dash-switch { position: relative; display: inline-flex; cursor: pointer; }
.t-dash-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.t-dash-switch input:checked + .t-toggle-box { background: var(--action-primary); }
.t-dash-switch input:checked + .t-toggle-box::after { transform: translateX(16px); }
.t-dash-switch input:focus-visible + .t-toggle-box { box-shadow: var(--focus-ring); }
.t-dash-del { color: var(--text-meta); }
.t-dash-del:hover { color: var(--danger); }
/* Das Schloss steht an der Stelle von Schalter UND Kreuz – ohne die Breite
   der beiden verlöre die Spalte sonst ihre Flucht. */
.t-dash-fixed {
  display: inline-flex; align-items: center; justify-content: center;
  width: 70px; height: 22px;
  color: var(--text-meta);
}
.t-dash-fixed svg { width: 17px; height: 17px; }

.t-dash-add {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-card);
}
.t-dash-add .field-input { width: auto; min-width: 240px; }

/* Auf schmalen Bildschirmen bricht die Zeile um: Beschriftung oben, die
   Bedienelemente darunter – nebeneinander wären sie dort je 40px breit. */
@media (max-width: 860px) {
  .t-dash-row { grid-template-columns: auto 1fr; }
  .t-dash-width, .t-dash-actions { grid-column: 2; }
  .t-dash-width .field-input { min-width: 0; width: 100%; }
}

/* ========================================================================== */
/* 5. SCHALTER                                                                */
/* ========================================================================== */
/* Ein Modul ein- oder auszuschalten ist eine Entscheidung mit Folgen für alle
   Benutzer. Der Schalter ist deshalb bewusst groß und beschriftet, statt ein
   kleines Kästchen am Zeilenanfang zu sein. */

.t-modules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-7);
}

.t-toggle {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-xs);
  background: var(--surface-card);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard);
}
.t-toggle:hover { border-color: var(--accent-55); }
/* Die eigentliche Ankreuzfläche wird ausgeblendet, bleibt aber bedienbar und
   für Screenreader vorhanden – die Darstellung übernimmt .t-toggle-box. */
.t-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }

.t-toggle-box {
  position: relative;
  flex: none;
  width: 38px; height: 22px;
  margin-top: 1px;
  border-radius: var(--radius-pill);
  background: var(--ink-15);
  transition: background var(--dur-fast) var(--ease-standard);
}
.t-toggle-box::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 16px; height: 16px;
  border-radius: var(--radius-circle);
  background: var(--white);
  box-shadow: 0 1px 3px rgba(55, 83, 116, 0.3);
  transition: transform var(--dur-fast) var(--ease-spring-soft);
}
.t-toggle input:checked + .t-toggle-box { background: var(--action-primary); }
.t-toggle input:checked + .t-toggle-box::after { transform: translateX(16px); }
/* Tastaturbedienung sichtbar machen – ohne das wäre der Schalter per Tab
   nicht auffindbar, weil das echte Kästchen unsichtbar ist. */
.t-toggle input:focus-visible + .t-toggle-box { box-shadow: var(--focus-ring); }

.t-toggle-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.t-toggle-label {
  font: var(--weight-medium) 14px / 1.3 var(--font-headline);
  color: var(--text-heading);
}
.t-toggle-hint { font-size: 12px; line-height: 1.45; color: var(--text-meta); }

/* ========================================================================== */
/* 6. SPEICHERLEISTE                                                          */
/* ========================================================================== */
/* Bleibt am unteren Rand stehen: Die Seite ist lang, und der Speichern-Knopf
   darf nicht erst nach dem Scrollen auftauchen. */

.tenant-savebar {
  position: sticky;
  bottom: 0;
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-8);
  padding: var(--space-6);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  background: var(--glass-solid);
  backdrop-filter: var(--blur-bar);
  -webkit-backdrop-filter: var(--blur-bar);
  box-shadow: var(--shadow-menu);
}
.tenant-savehint {
  font-size: 12px;
  color: var(--text-meta);
  flex: 1 1 260px;
}

/* ========================================================================== */
/* 7. UMGEBUNGS-KENNZEICHNUNG                                                 */
/* ========================================================================== */
/* Liegt über allem und ist auch auf dem Anmeldebildschirm sichtbar. Ein
   Testsystem soll nicht erst nach dem Anmelden als solches erkennbar sein. */

.env-badge {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  padding: 4px 12px;
  text-align: center;
  font: var(--weight-bold) var(--text-label) / 1.6 var(--font-headline);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--white);
}
.env-test     { background: var(--red-alert); }
.env-training { background: var(--blue-deep); }

/* Der Balken schiebt alles darunter nach unten, statt es zu überdecken.

   SEINE HÖHE STEHT AN EINER STELLE.
   Vorher war die 26 an sieben Stellen als Zahl eingetragen – und an einer
   achten vergessen: Die feste Werkzeugleiste (.format-toolbar) rechnete nur
   mit Kopfzeile und Modus-Leiste und saß dadurch 26px zu hoch. Ihre obere
   Kante verschwand hinter der Modus-Leiste, sobald man über „⋯" die weiteren
   Werkzeuge aufklappte.

   Jede fest positionierte Ebene rechnet die Variable jetzt in ihr eigenes
   "top" ein. Wer eine neue Ebene hinzufügt, sieht am Muster der Nachbarn,
   dass sie dazugehört – und muss keine Zahl suchen, die sich ändern könnte. */
:root          { --env-badge-h: 0px; }
body.has-env-badge { --env-badge-h: 26px; }

body.has-env-badge #app,
body.has-env-badge #login-screen,
body.has-env-badge #boot-screen { padding-top: var(--env-badge-h); }
body.has-env-badge .header { top: var(--env-badge-h); }
body.has-env-badge .sidebar,
body.has-env-badge .edit-banner { top: calc(var(--header-h) + var(--env-badge-h)); }

/* Die Werkzeugleiste sitzt unterhalb der Modus-Leiste, deren Höhe
   measureEditBanner() laufend in --edit-banner-h schreibt. Die Regel steht
   hier und nicht in css/legacy.css: Diese Datei ist ein unveränderter Auszug
   des Altbestands, Korrekturen gehören in die späteren Ebenen. */
body.has-env-badge .format-toolbar {
  top: calc(var(--header-h) + var(--edit-banner-h) + var(--env-badge-h));
}

/* Die Telefonansicht liegt fest am Fenster (#mapp ist position:fixed) und
   beachtet das padding von #app deshalb NICHT – ohne diese Regeln schöbe sich
   ihr Kopf unter den Balken, und das Logo wäre angeschnitten.
   Die Höhe muss um denselben Betrag schrumpfen, sonst ragt die untere
   Reiterleiste aus dem Fenster heraus. */
body.has-env-badge.mapp #mapp {
  top: var(--env-badge-h);
  height: calc(100vh - var(--env-badge-h));
  height: calc(100dvh - var(--env-badge-h));
}
body.has-env-badge.mapp.mapp-detail #mapp-bar { top: var(--env-badge-h); }
body.has-env-badge.mapp.mapp-detail-wi #mapp-wi {
  top: var(--env-badge-h);
  height: calc(100vh - var(--env-badge-h));
  height: calc(100dvh - var(--env-badge-h));
}

/* ========================================================================== */
/* 8. BEWEGUNG                                                                */
/* ========================================================================== */
/* Zusätzlich zur Systemeinstellung des Benutzers (prefers-reduced-motion,
   die das Design-System bereits berücksichtigt) kann der Mandant Animationen
   für alle drosseln oder abschalten.

   DREI EINSTELLUNGEN, DIE SICH NICHT INS GEHEGE KOMMEN
   Tempo und Charakter beschreiben, WIE sich etwas bewegt. "Bewegung"
   (reduziert/aus) ist der übergeordnete Schalter und muss beides überstimmen
   können: Wer Animationen abschaltet, will sie abgeschaltet haben, und nicht
   "abgeschaltet, aber federnd".

   Durchgesetzt wird das über die REIHENFOLGE in dieser Datei, nicht über
   !important: Alle Regeln hier haben dieselbe Spezifität (eine Klasse am
   body), also gewinnt die zuletzt notierte. Tempo und Charakter stehen
   deshalb zuerst, der Hauptschalter zuletzt. Wer hier etwas einfügt, muss
   diese Reihenfolge einhalten. */

/* ------ Tempo ------ */
body.motion-slow {
  --dur-fast: 0.32s;
  --dur-hover: 0.4s;
  --dur-panel: 0.6s;
  --dur-reveal: 1.4s;
}
body.motion-brisk {
  --dur-fast: 0.12s;
  --dur-hover: 0.15s;
  --dur-panel: 0.24s;
  --dur-reveal: 0.6s;
}

/* ------ Charakter ------ */
/* "Federnd" schwingt am Ende kurz über das Ziel hinaus – lebendig, aber bei
   häufig benutzten Bedienelementen ermüdend. "Sachlich" nimmt jedes
   Nachschwingen heraus und lässt die Bewegung gleichmäßig auslaufen. */
body.motion-springy {
  --ease-standard: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-reveal: cubic-bezier(0.2, 0.9, 0.3, 1.4);
}
body.motion-plain {
  --ease-standard: linear;
  --ease-spring: ease-out;
  --ease-spring-soft: ease-out;
  --ease-overshoot: ease-out;
  --ease-reveal: ease-out;
}

/* ------ Anheben beim Überfahren ------ */
/* Karten und Knöpfe heben sich unter dem Zeiger leicht an. Auf großen
   Bildschirmen wirkt das lebendig; in einer dichten Liste wandert dabei
   ständig etwas unter dem Zeiger, und genau das stört manche Betrachter. */
body.hover-flat {
  --lift-hover: 0px;
  --lift-card: 0px;
}

/* ------ Hauptschalter (muss zuletzt stehen) ------ */
body.motion-reduced {
  --dur-hover: 0.1s;
  --dur-panel: 0.12s;
  --dur-reveal: 0.2s;
  --lift-card: -2px;
}
body.motion-off {
  --dur-fast: 0.01ms;
  --dur-hover: 0.01ms;
  --dur-panel: 0.01ms;
  --dur-reveal: 0.01ms;
  --lift-hover: 0px;
  --lift-card: 0px;
}
body.motion-off *,
body.motion-off *::before,
body.motion-off *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}