/* Seynstahl Kit BASIS 3.0.0 (2026-11-05) — Tokens, Reset, Komponenten (.sy-*). Ehemals seynstahl-brand.css 2.4.0; Schrift Urbanist (lokal, in seynstahl-modern.css), kein Google-Import.
   Lädt VOR den Seiten-Styles; der Look (seynstahl-modern.css) lädt danach. Beide zusammen = ein Kit. */
/* ============================================================
   SEYNSTAHL — Gemeinsames Brand-Kit (Corporate Design 2024)
   Kit-Version: 2.4.0 (siehe ../VERSION und ../CHANGELOG.md)
   Neu in 2.4.0: Lesemodus (.sy-lesen), Kacheln (.sy-tiles/.sy-tile),
   Tabellen als Karten am Handy (.sy-tcard), Drück-Rückmeldung (.sy-press),
   Handy-Navigation (.sy-mnav/.sy-drawer), Fenster (.sy-overlay/.sy-modal), Seitengerüst (.sy-page),
   Seitwärts-Sperre am Handy (html.sy-lockx). Korrekturen: Hover nur mit Maus, Name/Abmelden
   im Dark Mode lesbar, Kopfzeile am Handy nicht mehr auf 42 vw gekürzt.
   Designsprache „Handbuch" (seit 07.10.2026):
   kantig (keine Rundungen), klare Schatten, starke Linien,
   Hover = leichtes Anheben mit gelbem Glow.
   Dark Mode (seit 2.1.0): Opt-in über [data-theme="dark"] auf <html>,
   siehe Abschnitt „DARK MODE" unten. Seiten-Inhalt (Fließtext, Flächen,
   Rahmen) über die Tokens --sy-ink / --sy-ink-head / --sy-ink-soft / --sy-surface /
   --sy-border-strong einfärben statt direkt --sy-black/--sy-white/
   --sy-gray-500 — neue Komponenten bitte ebenso, sonst bleiben sie im
   Dark Mode hell stehen.
   Eine Quelle für ALLE Seynstahl-Tools. Pro Bereich Akzent über
   --sy-accent, Marke bleibt sonst gleich.
   Referenz-Implementierung: ~/SeynstahlHandbuch/index.html
   Vorversion: seynstahl-brand.backup-2026-10-07.css (= v1.0.0)
   ============================================================ */


:root {
  /* --- Markenfarben (verbindlich) --- */
  --sy-yellow:      #ffcc00;   /* Primärfarbe, dominant */
  --sy-yellow-dark: #e6b800;   /* Hover/Tiefe */
  --sy-black:       #1a1a1a;
  --sy-pure-black:  #000000;
  --sy-white:       #ffffff;

  /* --- Neutrale UI-Töne --- */
  --sy-gray-900: #1a1a1a;
  --sy-gray-700: #3a3a3a;
  --sy-gray-500: #6b6b6b;
  --sy-gray-300: #d4d4d4;
  --sy-gray-100: #f4f4f3;
  --sy-bg:       #ececea;      /* etwas dunkler, damit weiße Boxen ohne Rahmen klar stehen */
  --sy-line:     #e2e2e0;      /* feine Trennlinien/Rahmen */

  /* --- Theme-Tokens (hell = Standard, dunkel = [data-theme="dark"] unten) ---
     Komponenten bitte darüber einfärben statt direkt --sy-black/--sy-white/
     --sy-gray-500, sonst bleiben sie im Dark Mode hell stehen. */
  --sy-ink:          var(--sy-black);   /* Fließtext */
  --sy-ink-head:     var(--sy-black);   /* Headlines, kleine Header, Head-Font-Labels */
  --sy-ink-soft:     var(--sy-gray-500);/* Subline/Meta/kleine Texte */
  --sy-surface:      var(--sy-white);   /* Flächen: Karten, Felder, Kacheln */
  --sy-chip:         #e2e2df;           /* Filter-Chip-Fläche */
  --sy-hl:           #f1f1ef;           /* Baum: offener Eintrag */
  --sy-hl-strong:    #e3e3e0;           /* Baum: aktueller Bereich */
  --sy-border-strong: var(--sy-gray-700); /* dunkelgrau statt schwarz — Rahmen wirken sonst zu hart */
  --sy-ro-ink:       #8a8a86;           /* Lesemodus: Werte, die gerade nicht bearbeitet werden (hellgrau) */

  /* --- Bereichs-Akzent (pro Tool überschreibbar) ---
     z. B. body[data-area="fuhrpark"] { --sy-accent: #2e7dd1 } */
  --sy-accent:      var(--sy-yellow);
  --sy-accent-ink:  var(--sy-black);   /* Textfarbe auf Akzentflächen */

  /* --- Typo --- */
  --sy-font-head: 'Urbanist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sy-font-body: 'Urbanist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* --- Form: kantig, klare Schatten, Glow beim Anheben --- */
  --sy-radius: 0;
  --sy-shadow:    0 1px 0 rgba(0,0,0,.04), 0 6px 18px -10px rgba(0,0,0,.35);
  --sy-shadow-lg: 0 2px 0 rgba(0,0,0,.05), 0 14px 32px -14px rgba(0,0,0,.4);
  --sy-glow:      0 10px 22px -14px color-mix(in srgb, var(--sy-accent) 40%, transparent), var(--sy-shadow);
  --sy-ease:      cubic-bezier(.2,.75,.2,1);

  /* --- Marken-Grafiken --- */
  --sy-haken: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 13l5 5L20 6' fill='none' stroke='black' stroke-width='3' stroke-linecap='square'/></svg>");
  /* --sy-wabe je Tool setzen: :root{ --sy-wabe: url('/static/wabe.svg'); } */
}

/* ============================================================
   DARK MODE — Opt-in: <html data-theme="dark">, per Toggle gesetzt
   (siehe .sy-theme-toggle weiter unten + Referenz-JS im Handbuch).
   Schwarzer Grund, Gelb bleibt Akzent, Fließtext wird Gelb, kleine/
   sekundäre Texte werden Grauweiß. Nur die Theme-Tokens werden
   umgebogen — Komponenten, die schon darüber eingefärbt sind, ziehen
   automatisch mit.
   ============================================================ */
:root[data-theme="dark"] {
  --sy-bg:      #171716;
  --sy-line:    #5c5c56;      /* grauweiß, sichtbar auf --sy-surface/--sy-bg */
  --sy-gray-100:#2f2f2c;
  --sy-gray-300:#4a4a46;

  --sy-ink:           #f7f7f4;           /* Fließtext hellweiß */
  --sy-ink-head:      var(--sy-yellow);  /* alle Header gelb */
  --sy-ink-soft:      #d0d0cb;           /* kleine Texte grauweiß, eine Stufe unter Fließtext */
  --sy-surface:       #2a2a28;           /* heller als --sy-bg, Boxen ohne Rahmen sichtbar */
  --sy-border-strong: var(--sy-yellow);
  --sy-ro-ink:        #b3b3ad;
  --sy-chip:          #2f2f2c;
  --sy-hl:            #343432;
  --sy-hl-strong:     #454542;

  --sy-shadow:    0 1px 0 rgba(0,0,0,.6), 0 6px 18px -10px rgba(0,0,0,.8);
  --sy-shadow-lg: 0 2px 0 rgba(0,0,0,.6), 0 14px 32px -14px rgba(0,0,0,.85);
}
:root[data-theme="dark"] .sy-table tr:hover td { background: #241f0a; }
:root[data-theme="dark"] .sy-prose code,
:root[data-theme="dark"] .sy-entry-inner code { border-color: var(--sy-yellow); color: var(--sy-yellow); background: transparent; }
:root[data-theme="dark"] .sy-prose pre code,
:root[data-theme="dark"] .sy-entry-inner pre code { color: inherit; }
:root[data-theme="dark"] .sy-do, :root[data-theme="dark"] .sy-dont { background: #323230; }
/* Box-Titel + Filter-Chips im Dark Mode hellweiß; Abschnitts-/kleine Header bleiben gelb */
:root[data-theme="dark"] .sy-entry-title,
:root[data-theme="dark"] .sy-filter:not(.active) { color: var(--sy-ink); }

/* ---------- Basis ---------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  font-family: var(--sy-font-body);
  font-weight: 300;
  color: var(--sy-ink);
  background: var(--sy-bg);
  line-height: 1.55;
}
h1,h2,h3,h4,.sy-head {
  font-family: var(--sy-font-head);
  font-weight: 700;
  text-transform: uppercase;   /* Headlines in Versalien (CD) */
  letter-spacing: .02em;
  line-height: 1.1;
  color: var(--sy-ink-head);
  margin: 0 0 .5em;
}
.sy-subline { font-weight: 600; color: var(--sy-gray-700); text-transform: none; }
a { color: var(--sy-yellow-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
input, select, textarea, button { border-radius: 0; }
mark { background: var(--sy-accent); color: var(--sy-accent-ink); padding: 0 2px; }

/* Hover-Utility: leicht anheben + Glow (für alles Klickbare) */
.sy-lift { transition: transform .25s var(--sy-ease), box-shadow .25s var(--sy-ease); }

/* ============================================================
   KOPFLEISTE MODULE (.sy-topbar) — Markup aus sentynel_header.js
   ============================================================ */
.sy-topbar {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--sy-pure-black);
  color: var(--sy-white);
  padding: 14px 24px;
  border-bottom: 5px solid var(--sy-accent);
}
.sy-topbar::before {             /* feines Linienraster */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .07;
  background-image: linear-gradient(90deg, #fff 1px, transparent 1px);
  background-size: 64px 100%;
}
.sy-topbar > * { position: relative; }
.sy-topbar .sy-logo { height: 34px; display: block; }
.sy-topbar .sy-titleblock {
  display: flex; flex-direction: column; min-width: 0;
  border-left: 3px solid var(--sy-accent); padding-left: 14px;
}
.sy-topbar .sy-title {
  font-family: var(--sy-font-head); font-weight: 700; text-transform: uppercase;
  font-size: 1.15rem; letter-spacing: .1em; margin: 0; color: var(--sy-white); line-height: 1.1;
}
.sy-topbar .sy-slogan {
  color: var(--sy-accent); font-family: var(--sy-font-head); font-size: .66rem; letter-spacing: .24em;
  text-transform: uppercase;
}
.sy-topbar .sy-spacer { flex: 1; }
.sy-topbar .sy-who { color: var(--sy-white); font-size: .82rem; text-align: right; }
.sy-topbar .sy-who #whoName, .sy-topbar .sy-who b { color: var(--sy-accent); font-weight: 600; }
.sy-topbar .sy-who-sub { color: #d4d4d4; font-size: .72rem; }   /* fest, nicht --sy-gray-300: das wird im Dark Mode dunkel, der Kopf bleibt schwarz */
.sy-topbar .sy-link { color: var(--sy-accent); cursor: pointer; }
.sy-topbar .sy-link:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .sy-topbar { padding: 9px 14px; gap: 10px; }
  .sy-topbar .sy-logo { height: 24px; }
  .sy-topbar .sy-titleblock { padding-left: 10px; }
  .sy-topbar .sy-title { font-size: .98rem; }
  .sy-topbar .sy-slogan {
    font-size: .58rem; letter-spacing: .1em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;   /* war 42vw: kürzte auch bei viel Platz */
  }
  .sy-topbar .sy-spacer { display: none; }
  .sy-topbar .sy-who { margin-left: auto; font-size: .72rem; }
  .sy-topbar .sy-who-sub { font-size: .66rem; }
}
/* Mobil-Grundlagen fuer ALLE Module.
   !important bewusst: Modul-CSS steht NACH diesem Stylesheet mit gleichen
   Element-Selektoren — ohne !important waeren die Garantien wirkungslos. */
@media (max-width: 640px) {
  /* iOS Safari zoomt bei Feldern < 16px hinein und nicht wieder heraus */
  input, select, textarea { font-size: 16px !important; }
  /* Breite Tabellen scrollen selbst statt das ganze Layout */
  table { display: block !important; width: 100% !important; max-width: 100% !important;
          overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 360px) {
  .sy-topbar { gap: 8px; padding: 8px 12px; }
  .sy-topbar .sy-slogan { font-size: .54rem; letter-spacing: .08em; }   /* war: ausgeblendet */
  .sy-topbar .sy-title { font-size: .92rem; }
}

/* ============================================================
   SEITENKOPF GROSS (.sy-header) — für Startseiten/Handbuch
   <header class="sy-header"><div class="sy-header-inner">
     <img class="sy-header-logo" src="logo-weiss-gelb.svg">
     <span class="sy-divider"></span>
     <div class="sy-titles"><span class="sy-kicker">…</span><p class="sy-name">…</p></div>
     <div class="sy-meta"><b>5</b><span>Themen</span></div>
   </div></header><div class="sy-rule"></div>
   ============================================================ */
.sy-header { background: var(--sy-pure-black); color: var(--sy-white); position: relative; overflow: hidden; }
.sy-header::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .07;
  background-image: linear-gradient(90deg, #fff 1px, transparent 1px);
  background-size: 64px 100%;
}
.sy-header::after {
  content: ""; position: absolute; right: -70px; top: 50%; transform: translateY(-50%);
  width: 300px; height: 300px; opacity: .09; pointer-events: none;
  background: var(--sy-wabe, none) center/contain no-repeat;
}
.sy-header-inner {
  max-width: 1240px; margin: 0 auto; padding: 26px 28px; position: relative; z-index: 1;
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
}
.sy-header-logo { height: 76px; display: block; }
.sy-divider { width: 3px; align-self: stretch; background: var(--sy-accent); }
.sy-titles { display: flex; flex-direction: column; gap: 4px; }
.sy-kicker {
  font-family: var(--sy-font-head); font-size: .7rem; letter-spacing: .32em; color: var(--sy-accent); text-transform: uppercase;
}
.sy-name {
  font-family: var(--sy-font-head); font-weight: 700; font-size: 2rem; letter-spacing: .14em;
  text-transform: uppercase; line-height: 1; color: var(--sy-white); margin: 0;
}
.sy-meta { margin-left: auto; text-align: right; font-family: var(--sy-font-head); text-transform: uppercase; }
.sy-meta b { display: block; font-size: 2rem; line-height: 1; color: var(--sy-accent); }
.sy-meta span { font-size: .66rem; letter-spacing: .22em; color: #9a9a9a; }
.sy-rule { height: 6px; background: var(--sy-accent); border-top: 2px solid var(--sy-pure-black); box-shadow: inset 0 -2px 0 rgba(0,0,0,.12); }
@media (max-width: 640px) {
  .sy-header-inner { padding: 18px 16px; gap: 14px; }
  .sy-header-logo { height: 38px; }
  .sy-divider, .sy-meta { display: none; }
  .sy-name { font-size: 1.35rem; }
}

/* ============================================================
   FOOTER — immer schwarz, unabhängig vom Theme (wie .sy-topbar)
   <footer class="sy-footer"><div class="sy-footer-inner">
     <span>…</span>
     <button class="sy-theme-toggle" type="button" aria-pressed="false">
       <span class="sy-tt-track"><span class="sy-tt-thumb"></span></span>
       <span class="sy-tt-text">Dark Mode</span>
     </button>
   </div></footer>
   JS (Theme setzen + merken) siehe Handbuch-Referenz.
   ============================================================ */
.sy-footer {
  background: var(--sy-pure-black); color: #8a8a8a; border-top: 4px solid var(--sy-accent);
  font-size: .72rem; padding: 18px; letter-spacing: .14em;
  text-transform: uppercase; font-family: var(--sy-font-head);
}
.sy-footer-inner {
  max-width: 1240px; margin: 0 auto; display: flex; align-items: center;
  justify-content: center; gap: 22px; flex-wrap: wrap; text-align: center;
}

.sy-theme-toggle {
  display: inline-flex; align-items: center; gap: 10px; background: none; border: none;
  cursor: pointer; font: inherit; color: #9a9a9a; padding: 4px; letter-spacing: .12em;
  transition: color .2s;
}
.sy-theme-toggle:hover, .sy-theme-toggle:focus-visible { color: var(--sy-yellow); }
.sy-tt-track {
  width: 46px; height: 22px; border: 2px solid #555; display: inline-flex; align-items: center;
  padding: 2px; background: #000; transition: border-color .2s;
}
.sy-theme-toggle:hover .sy-tt-track, .sy-theme-toggle:focus-visible .sy-tt-track { border-color: var(--sy-yellow); }
.sy-tt-thumb { width: 14px; height: 14px; background: #666; transition: transform .25s var(--sy-ease), background .25s; }
.sy-theme-toggle[aria-pressed="true"] .sy-tt-track { border-color: var(--sy-yellow); }
.sy-theme-toggle[aria-pressed="true"] .sy-tt-thumb { transform: translateX(20px); background: var(--sy-yellow); }

/* ============================================================
   BUTTONS — kantig, Hover = Anheben + Glow
   .sy-btn (gelb) · .sy-btn--ghost (weiß, schwarzer Rahmen) · .sy-btn--lg
   ============================================================ */
.sy-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--sy-font-head); font-weight: 600; text-transform: uppercase;
  font-size: .78rem; letter-spacing: .08em;
  background: var(--sy-accent); color: var(--sy-accent-ink);
  border: 2px solid var(--sy-black); border-radius: 0; /* immer schwarz: Kontrastkante auf gelbem Button */
  padding: 10px 18px; cursor: pointer;
  transition: transform .2s var(--sy-ease), box-shadow .2s, background .2s;
}
.sy-btn svg { width: 16px; height: 16px; }
.sy-btn--ghost { background: var(--sy-surface); color: var(--sy-ink-head); border-width: 1px; border-color: var(--sy-border-strong); }
.sy-btn--lg { height: 52px; padding: 0 18px; }

/* ---------- Karten ---------- */
.sy-card {
  background: var(--sy-surface); border: 0;
  border-top: 3px solid var(--sy-accent);
  box-shadow: var(--sy-shadow); padding: 20px;
}

/* ---------- Haken-Listen (Bullet = Haken) ---------- */
.sy-list { list-style: none; padding: 0; margin: 0; }
.sy-list li { position: relative; padding-left: 1.6em; margin: .35em 0; }
.sy-list li::before {
  content: ""; position: absolute; left: 0; top: .15em;
  width: 1.05em; height: 1.05em;
  background: var(--sy-accent);
  -webkit-mask: var(--sy-haken) center/contain no-repeat;
          mask: var(--sy-haken) center/contain no-repeat;
}

/* ---------- Waben-Wasserzeichen ---------- */
.sy-wabe-bg { position: relative; overflow: hidden; }
.sy-wabe-bg::after {
  content: ""; position: absolute; right: -40px; top: -40px;
  width: 220px; height: 220px; opacity: .10; pointer-events: none;
  background: var(--sy-wabe, none) center/contain no-repeat;
}

/* ---------- Tabellen ---------- */
.sy-table { width: 100%; border-collapse: collapse; background: var(--sy-surface); box-shadow: var(--sy-shadow); }
.sy-table th {
  font-family: var(--sy-font-head); font-weight: 600; text-transform: uppercase;
  font-size: .74rem; letter-spacing: .08em; text-align: left;
  background: var(--sy-pure-black); color: var(--sy-white); padding: 10px 12px; /* immer schwarz: Kontrastbalken auf --sy-surface */
  border-bottom: 3px solid var(--sy-accent);
}
.sy-table td { padding: 9px 12px; border-bottom: 1px solid var(--sy-line); }
.sy-table tr:hover td { background: #fffaf0; }

/* ---------- Badges / Status (kantig) ---------- */
.sy-badge { display: inline-block; padding: 2px 8px; font-size: .72rem; font-weight: 600; border-left: 3px solid currentColor; }
.sy-badge--ok   { background: #e3f3e3; color: #1f7a1f; }
.sy-badge--warn { background: #fff3cd; color: #8a6d00; }
.sy-badge--alert{ background: #fde0e0; color: #b22; }

/* ============================================================
   SUCHE + FILTER-BOXEN
   <div class="sy-search"><svg>…</svg><input><span class="sy-kbd">/</span></div>
   <button class="sy-filter active"><span>Tag</span><span class="sy-count">4</span></button>
   ============================================================ */
.sy-search { position: relative; flex: 1; min-width: 240px; }
.sy-search > svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--sy-ink-head); }
.sy-search input {
  width: 100%; height: 52px; padding: 0 52px 0 48px; font-family: var(--sy-font-body); font-size: 1.02rem;
  border: 1px solid var(--sy-border-strong); background: var(--sy-surface); color: var(--sy-ink);
  transition: box-shadow .2s, border-color .2s;
}
.sy-search input:focus { outline: none; border-color: var(--sy-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sy-accent) 35%, transparent); }
.sy-kbd {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%); pointer-events: none;
  font-family: var(--sy-font-head); font-size: .75rem; width: 26px; height: 26px; display: grid; place-items: center;
  border: 1px solid var(--sy-border-strong); color: var(--sy-ink-head); background: var(--sy-surface);
}
.sy-filters { display: flex; gap: 10px; flex-wrap: wrap; }
.sy-filter {
  display: flex; align-items: center; gap: 10px; padding: 9px 14px; cursor: pointer;
  background: var(--sy-chip); color: var(--sy-ink-head); border: 1px solid transparent; box-shadow: var(--sy-shadow);
  font-family: var(--sy-font-head); text-transform: uppercase; font-size: .74rem; letter-spacing: .06em;
  transition: transform .2s var(--sy-ease), box-shadow .2s, background .15s;
}
.sy-filter .sy-count { font-size: .68rem; color: var(--sy-ink-soft); border-left: 1px solid var(--sy-gray-300); padding-left: 10px; }
.sy-filter.active { background: var(--sy-accent); color: var(--sy-accent-ink); }
.sy-filter.active .sy-count { color: var(--sy-black); border-color: var(--sy-black); }
.sy-status { font-size: .78rem; color: var(--sy-ink-soft); font-family: var(--sy-font-head); text-transform: uppercase; letter-spacing: .08em; }
.sy-status b { color: var(--sy-black); background: var(--sy-accent); padding: 0 6px; }

/* ============================================================
   DATEIBAUM (.sy-tree) — Navigation wie ein Repo, Ordner auf/zu
   .sy-folder(.open) > button.sy-node + .sy-children > div > a.sy-node.sy-file(.active)
   ============================================================ */
.sy-tree { background: var(--sy-surface); border: 0; box-shadow: var(--sy-shadow); }
.sy-tree-head {
  display: flex; align-items: center; justify-content: space-between; padding: 12px 14px;
  background: var(--sy-black); color: var(--sy-white); border-bottom: 3px solid var(--sy-accent);
  font-family: var(--sy-font-head); text-transform: uppercase; font-size: .74rem; letter-spacing: .14em;
}
.sy-tree-head button { background: none; border: 1px solid #555; color: #ddd; cursor: pointer; font-size: .62rem; padding: 3px 7px; font-family: inherit; letter-spacing: .08em; }
.sy-tree-head button:hover { border-color: var(--sy-accent); color: var(--sy-accent); }
.sy-tree-body { padding: 8px 0; font-size: .86rem; }
.sy-node {
  display: flex; align-items: center; gap: 7px; width: 100%; padding: 6px 12px; cursor: pointer;
  background: none; border: none; text-align: left; color: var(--sy-ink); font: inherit; border-left: 3px solid transparent;
  user-select: none; /* Doppelklick schließt — ohne Textmarkierung */
}
.sy-node:hover { background: var(--sy-gray-100); text-decoration: none; }
.sy-node svg { width: 16px; height: 16px; flex: 0 0 auto; }
.sy-folder > .sy-node { color: var(--sy-ink-head); font-family: var(--sy-font-head); font-weight: 600; text-transform: uppercase; font-size: .76rem; letter-spacing: .05em; }
.sy-folder > .sy-node .sy-tw { transition: transform .25s var(--sy-ease); color: var(--sy-ink-soft); width: 12px; height: 12px; }
.sy-folder.open > .sy-node .sy-tw { transform: rotate(90deg); }
.sy-folder .sy-ico-open { display: none; }
.sy-folder.open .sy-ico-open { display: block; }
.sy-folder.open .sy-ico-closed { display: none; }
.sy-folder > .sy-node .sy-ico-open, .sy-folder > .sy-node .sy-ico-closed { color: var(--sy-yellow-dark); }
.sy-folder .sy-n { margin-left: auto; font-size: .66rem; color: var(--sy-ink-soft); }
.sy-children { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--sy-ease); }
.sy-folder.open > .sy-children { grid-template-rows: 1fr; }
.sy-children > div { overflow: hidden; margin-left: 23px; border-left: 1px dashed var(--sy-gray-300); }
.sy-file { position: relative; padding-left: 18px; }
.sy-file::before { content: ""; position: absolute; left: 0; top: 50%; width: 12px; border-top: 1px dashed var(--sy-gray-300); }
.sy-file svg { color: var(--sy-ink-soft); }
.sy-file.active { background: var(--sy-hl); border-left-color: var(--sy-accent); font-weight: 600; }
.sy-file.active, .sy-file.active svg { color: var(--sy-ink-head); }
/* Aktueller Bereich (Scroll-Position) — hellgrau + gelbe Linie, beide Themes. Klasse setzt JS. */
.sy-node { transition: background .25s, box-shadow .25s, color .25s; }
.sy-node.sy-current {
  color: var(--sy-ink-head); font-weight: 600; border-left-color: var(--sy-accent);
  background: var(--sy-hl-strong);
}
.sy-node.sy-current svg { color: var(--sy-ink-head); }
.sy-folder.sy-current > .sy-node { border-left-color: var(--sy-accent); }

/* ============================================================
   ABSCHNITTSKOPF
   <div class="sy-section-head"><h2>Titel</h2></div><p class="sy-section-desc">…</p>
   ============================================================ */
.sy-section-head { display: flex; align-items: flex-end; gap: 14px; margin-bottom: 16px; border-bottom: 2px solid var(--sy-border-strong); padding-bottom: 10px; }
.sy-section-head h2 { font-size: 1.5rem; margin: 0; letter-spacing: .06em; }
.sy-section-head::before { content: ""; width: 10px; height: 30px; background: var(--sy-accent); align-self: center; }
.sy-section-desc { margin: -6px 0 18px; font-size: .86rem; color: var(--sy-ink-soft); }

/* ============================================================
   AUFKLAPP-BOX (.sy-entry) — nummeriert, großer Pfeil am Ende
   Eltern-Element braucht `counter-reset: entry`.
   <details class="sy-entry"><summary>
     <span class="sy-num"></span>
     <span class="sy-sum"><span class="sy-entry-title">…</span><span class="sy-entry-sub">…</span></span>
     <span class="sy-arrow"><svg>…</svg></span>
   </summary><div class="sy-entry-body"><div class="sy-entry-inner">…</div></div></details>
   Langsames Auf-/Zuklappen per JS (Web Animations) — siehe Handbuch.
   ============================================================ */
details.sy-entry {
  background: var(--sy-surface); border: 0; border-left: 5px solid var(--sy-border-strong);
  box-shadow: var(--sy-shadow); margin-bottom: 14px; counter-increment: entry;
  transition: transform .25s var(--sy-ease), box-shadow .25s var(--sy-ease), border-color .25s;
}
details.sy-entry[open] { border-left-color: var(--sy-accent); }
details.sy-entry > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 18px; padding: 20px 22px; }
details.sy-entry > summary::-webkit-details-marker { display: none; }
.sy-num { font-family: var(--sy-font-body); font-weight: 600; font-size: 1rem; color: #b5b5b5; letter-spacing: .05em; min-width: 26px; }
.sy-num::before { content: counter(entry, decimal-leading-zero); }
details.sy-entry[open] .sy-num { color: var(--sy-yellow-dark); }
.sy-sum { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sy-entry-title { color: var(--sy-ink-head); font-family: var(--sy-font-head); font-weight: 700; text-transform: uppercase; font-size: 1.55rem; letter-spacing: .06em; line-height: 1.05; }
.sy-entry-sub { color: var(--sy-ink-soft); font-size: .88rem; }
.sy-arrow {
  margin-left: auto; flex: 0 0 auto; width: 46px; height: 46px; display: grid; place-items: center;
  border: 1px solid var(--sy-border-strong); background: var(--sy-surface); transition: background .2s, transform .45s var(--sy-ease);
}
.sy-arrow svg { width: 24px; height: 24px; }
details.sy-entry[open] .sy-arrow { background: var(--sy-accent); color: var(--sy-accent-ink); transform: rotate(180deg); }
.sy-entry-body { overflow: hidden; }
.sy-entry-inner { padding: 4px 24px 26px 66px; border-top: 1px solid var(--sy-line); }
@media (max-width: 640px) {
  details.sy-entry > summary { padding: 14px; gap: 12px; }
  .sy-entry-title { font-size: 1.15rem; }
  .sy-entry-sub { font-size: .78rem; }
  .sy-arrow { width: 38px; height: 38px; }
  .sy-entry-inner { padding: 4px 14px 20px; }
}

/* ---------- Fließtext-Bereich (.sy-prose / .sy-entry-inner) ---------- */
.sy-prose h4, .sy-entry-inner h4 {
  font-family: var(--sy-font-head); text-transform: uppercase; font-size: .74rem; letter-spacing: .14em;
  color: var(--sy-ink-head); margin: 22px 0 8px; display: flex; align-items: center; gap: 10px;
}
.sy-prose h4::before, .sy-entry-inner h4::before { content: ""; width: 12px; height: 3px; background: var(--sy-accent); }
.sy-prose h4::after, .sy-entry-inner h4::after { content: ""; flex: 1; height: 1px; background: var(--sy-line); }
.sy-prose p, .sy-entry-inner p { margin: .35em 0; font-size: .93rem; }
.sy-prose code, .sy-entry-inner code { background: var(--sy-gray-100); border: 1px solid #e6e6e4; padding: 0 5px; font-size: .84em; }
.sy-prose pre, .sy-entry-inner pre { background: #111; color: #eee; padding: 14px 16px; overflow-x: auto; font-size: .8rem; border-left: 3px solid var(--sy-accent); }
.sy-prose pre code, .sy-entry-inner pre code { background: none; border: none; padding: 0; color: inherit; }

/* ---------- Do / Don't ---------- */
.sy-dodont { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 8px 0; }
@media (max-width: 600px) { .sy-dodont { grid-template-columns: 1fr; } }
.sy-do, .sy-dont { padding: 10px 14px 10px 12px; font-size: .86rem; background: var(--sy-gray-100); border: 0; color: var(--sy-ink); }
.sy-do { border-left: 4px solid #1f7a1f; } .sy-dont { border-left: 4px solid #b22; }
.sy-do::before, .sy-dont::before { font-family: var(--sy-font-head); font-size: .68rem; letter-spacing: .14em; display: block; margin-bottom: 4px; }
.sy-do::before { content: "DO"; color: #1f7a1f; } .sy-dont::before { content: "DON'T"; color: #b22; }
.sy-do .sy-list li::before { background: #1f7a1f; }
.sy-dont .sy-list li::before { background: #b22; }

/* ---------- Farb-Kacheln ---------- */
.sy-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); gap: 12px; margin: 10px 0; }
.sy-swatch { border: 0; background: var(--sy-surface); cursor: pointer; box-shadow: var(--sy-shadow); transition: transform .2s var(--sy-ease), box-shadow .2s; }
.sy-swatch-color { height: 70px; border-bottom: 1px solid var(--sy-line); }
.sy-swatch-meta { padding: 8px 10px; }
.sy-swatch-meta b { color: var(--sy-ink-head); font-family: var(--sy-font-head); font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; display: block; }
.sy-swatch-meta span { font-size: .72rem; color: var(--sy-ink-soft); display: block; }
.sy-swatch.sy-copied .sy-swatch-meta b::after { content: " ✓"; color: #1f7a1f; }

/* ---------- Hover nur mit echter Maus (2.4.0) ----------
   Anheben + Glow. Auf Touch-Geräten bleibt :hover nach dem Tippen sonst hängen. */
@media (hover: hover) {
  .sy-lift:hover { transform: translateY(-3px); box-shadow: var(--sy-glow); }
  .sy-btn:hover { transform: translateY(-2px); box-shadow: var(--sy-glow); text-decoration: none; }
  .sy-filter:hover { transform: translateY(-3px); box-shadow: var(--sy-glow); }
  details.sy-entry:hover { transform: translateY(-3px); box-shadow: var(--sy-glow); }
  details.sy-entry[open]:hover { transform: none; }
  details.sy-entry:hover .sy-arrow { background: var(--sy-accent); color: var(--sy-accent-ink); }
  .sy-swatch:hover { transform: translateY(-3px); box-shadow: var(--sy-glow); }
}

/* ============================================================
   NEU IN 2.4.0 — Formulare, Listen und Handy-Bedienung (Doku + Live-Beispiele: Handbuch → „Komponenten“)
   ============================================================ */

/* ---------- Seitengerüst: Footer bleibt unten ----------
   <body class="sy-page"> … <main class="sy-main"> … </main> <footer class="sy-footer"> … */
.sy-page { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; overflow-x: clip; }
.sy-page > .sy-main, .sy-page > main { flex: 1 0 auto; }

/* ---------- Seitwärts-Sperre am Handy (Opt-in: <html class="sy-lockx">) ----------
   Seite bewegt sich nur hoch/runter. Opt-in, weil sie auch Wischen in Containern einschränken kann. */
@media (max-width: 640px) {
  html.sy-lockx { overflow-x: hidden; overscroll-behavior-x: none; }
  html.sy-lockx, html.sy-lockx body { touch-action: pan-y pinch-zoom; }
}

/* ---------- Feld mit kräftigem Titel ----------
   <div class="sy-field"><label>Kunde</label><input …></div>
   Raster-Spalten immer minmax(0,1fr) — mit 1fr verbreitert Safari Felder (16-px-Schrift) über das Fenster. */
.sy-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sy-field > label {
  font-family: var(--sy-font-head); font-size: .7rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--sy-ink-head);
}
.sy-field input:not([type=checkbox]):not([type=radio]), .sy-field select, .sy-field textarea {
  width: 100%; min-width: 0; max-width: 100%;
}

/* ---------- Lesemodus ----------
   Container bekommt .sy-lesen; Felder sind disabled und sehen wie hellgrauer Text aus.
   Mit „Bearbeiten" Klasse entfernen + disabled lösen; .sy-edit-only erscheint erst dann. */
.sy-lesen input:disabled:not([type=checkbox]):not([type=radio]), .sy-lesen select:disabled, .sy-lesen textarea:disabled {
  background: transparent !important; border-color: transparent !important; box-shadow: none !important;
  color: var(--sy-ro-ink); opacity: 1; -webkit-text-fill-color: var(--sy-ro-ink);
  padding-left: 0 !important; cursor: default; resize: none;
}
.sy-lesen select:disabled { -webkit-appearance: none; appearance: none; background-image: none !important; padding-right: 0 !important; }
.sy-lesen input::placeholder, .sy-lesen textarea::placeholder { color: var(--sy-ro-ink); opacity: .7; }
.sy-lesen .sy-edit-only { display: none !important; }

/* ---------- Kacheln ----------
   <div class="sy-tiles"><div class="sy-tile sy-tile--wide"><span class="sy-tile-t">Kunde</span><span class="sy-tile-v">…</span></div> …
   Kante + Linie + leichter Schatten; Titel fett, Wert grau. Mit .sy-tiles--4 vier Spalten ab 901 px. */
.sy-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sy-tile {
  display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 10px 12px;
  background: var(--sy-surface); border: 1px solid var(--sy-line); box-shadow: var(--sy-shadow);
}
.sy-tile--wide { grid-column: 1 / -1; }
.sy-tile > .sy-tile-t, .sy-tile > label {
  font-family: var(--sy-font-head); font-size: .95rem; font-weight: 700; color: var(--sy-ink-head);
  text-transform: none; letter-spacing: 0;
}
.sy-tile > .sy-tile-v { color: var(--sy-ro-ink); overflow-wrap: anywhere; }
@media (min-width: 901px) {
  .sy-tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 12px; }
  .sy-tiles--4 .sy-tile { padding: 4px 10px 5px; gap: 1px; }
  .sy-tiles--4 .sy-tile > .sy-tile-t, .sy-tiles--4 .sy-tile > label { font-size: .7rem; letter-spacing: .09em; text-transform: uppercase; }
}

/* ---------- Drück-Rückmeldung für antippbare Karten ----------
   Beim Drücken leuchtet die Karte leicht gelb, die linke Linie wird gelb. */
.sy-press {
  border-left: 5px solid var(--sy-border-strong); cursor: pointer; touch-action: manipulation;
  -webkit-tap-highlight-color: transparent; transition: background .2s, box-shadow .2s, border-color .2s;
}
.sy-press:active {
  background: color-mix(in srgb, var(--sy-yellow) 16%, var(--sy-surface)); border-left-color: var(--sy-yellow);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--sy-yellow) 65%, transparent), 0 0 16px color-mix(in srgb, var(--sy-yellow) 40%, transparent);
}

/* ---------- Tabelle als Karten am Handy ----------
   <table class="sy-table sy-tcard">, td mit data-label="Spalte", Hauptzelle td.sy-td-main (steht oben, ohne Label). */
@media (max-width: 640px) {
  .sy-tcard { display: block !important; background: transparent !important; box-shadow: none !important; overflow-x: visible !important; }
  .sy-tcard thead { display: none; }
  .sy-tcard tbody { display: block; }
  .sy-tcard tr {
    display: flex; flex-direction: column; margin-bottom: 12px; padding: 12px 14px;
    background: var(--sy-surface); border-left: 5px solid var(--sy-border-strong); box-shadow: var(--sy-shadow);
  }
  .sy-tcard td {
    display: flex; justify-content: space-between; align-items: center; gap: 12px; min-width: 0;
    border: 0; padding: 4px 0; font-size: 13.5px; text-align: right; overflow-wrap: anywhere;
  }
  .sy-tcard td::before {
    content: attr(data-label); flex: 0 0 auto; text-align: left; font-family: var(--sy-font-head);
    font-size: .6rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--sy-ink-soft);
  }
  .sy-tcard td.sy-td-main { order: -1; display: block; text-align: left; font-size: 15px; padding: 0 0 8px; margin-bottom: 4px; border-bottom: 1px solid var(--sy-line); }
  .sy-tcard td.sy-td-main::before, .sy-tcard td[colspan]::before { content: none; }
  .sy-tcard td:empty { display: none; }
}

/* ---------- Handy-Navigation: untere Leiste + Seitenmenüs (nur ≤ 640 px) ----------
   <nav class="sy-mnav"> <button class="sy-mnav-btn">…</button> <button class="sy-mnav-plus">+</button> <button class="sy-mnav-btn">…</button> </nav>
   <div class="sy-dback"></div>
   <aside class="sy-drawer sy-drawer-l"> <div class="sy-drawer-head">…</div> <div class="sy-drawer-sec">…<button class="sy-drawer-item sy-active">…</button></div> <div class="sy-drawer-foot">…</div> </aside>
   Öffnen: .sy-on am Drawer + am .sy-dback, body.sy-drawer-open. Body bekommt .sy-has-mnav (Platz für die Leiste). */
.sy-mnav, .sy-drawer, .sy-dback { display: none; }
@media (max-width: 640px) {
  /* Platz für die Leiste: im Footer (kein weißer Streifen darunter); ohne Footer am Body */
  body.sy-has-mnav .sy-footer { padding-bottom: calc(18px + 70px + env(safe-area-inset-bottom, 0px)); }
  body.sy-has-mnav:not(:has(.sy-footer)) { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
  body.sy-drawer-open { overflow: hidden; }
  .sy-mnav {
    display: grid; grid-template-columns: 1fr 92px 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    height: calc(62px + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--sy-pure-black); border-top: 3px solid var(--sy-yellow);
  }
  .sy-mnav-btn {
    height: 59px; background: none; border: 0; color: #cfcfcf; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 4px; font-family: var(--sy-font-head); font-weight: 600; font-size: .6rem; letter-spacing: .16em;
    text-transform: uppercase; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .sy-mnav-btn svg { width: 24px; height: 24px; }
  .sy-mnav-btn[aria-expanded="true"] { color: var(--sy-yellow); }
  .sy-mnav-plus {
    justify-self: center; width: 62px; height: 62px; margin-top: -24px; display: grid; place-items: center; cursor: pointer;
    background: var(--sy-yellow); color: var(--sy-black); border: 3px solid var(--sy-pure-black);
    box-shadow: 0 0 0 2px var(--sy-yellow), 0 12px 26px -8px rgba(0,0,0,.65); -webkit-tap-highlight-color: transparent;
  }
  .sy-mnav-plus svg { width: 30px; height: 30px; }
  .sy-mnav-plus:active { transform: translateY(2px); }
  .sy-dback {
    display: block; position: fixed; inset: 0; z-index: 55; background: rgba(0,0,0,.55); opacity: 0; pointer-events: none;
    transition: opacity .3s var(--sy-ease);
  }
  .sy-dback.sy-on { opacity: 1; pointer-events: auto; }
  .sy-drawer {
    display: flex; flex-direction: column; position: fixed; top: 0; bottom: 0; z-index: 60; width: min(86vw, 340px);
    background: var(--sy-surface); box-shadow: var(--sy-shadow-lg); overflow-y: auto; overscroll-behavior: contain;
    padding-bottom: env(safe-area-inset-bottom, 0px); visibility: hidden;
    transition: transform .32s var(--sy-ease), visibility .32s;
  }
  .sy-drawer-l { left: 0; transform: translateX(-100%); }
  .sy-drawer-r { right: 0; transform: translateX(100%); }
  .sy-drawer.sy-on { transform: none; visibility: visible; }
  .sy-drawer-head {
    position: relative; overflow: hidden; flex: 0 0 auto; background: var(--sy-pure-black); color: #fff; display: flex;
    align-items: center; justify-content: space-between; gap: 12px; padding: 18px 16px 16px 20px; border-bottom: 5px solid var(--sy-accent);
  }
  .sy-drawer-head::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .07; background-image: linear-gradient(90deg, #fff 1px, transparent 1px); background-size: 64px 100%; }
  .sy-drawer-head > * { position: relative; }
  .sy-drawer-x { width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.5); cursor: pointer; }
  .sy-drawer-x svg { width: 20px; height: 20px; }
  .sy-drawer-kicker { font-family: var(--sy-font-head); font-weight: 600; font-size: .64rem; letter-spacing: .24em; text-transform: uppercase; color: var(--sy-yellow); }
  .sy-drawer-sec { padding: 18px 16px; }
  .sy-drawer-sec .sy-drawer-kicker { display: block; color: var(--sy-ink-soft); margin: 0 0 10px; }
  .sy-drawer-item {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 15px 14px; margin-bottom: 8px;
    background: var(--sy-chip); color: var(--sy-ink-head); border: 0; border-left: 4px solid transparent; cursor: pointer; text-align: left;
    font-family: var(--sy-font-head); font-weight: 600; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
  }
  .sy-drawer-item.sy-active { background: var(--sy-yellow); color: var(--sy-black); border-left-color: var(--sy-pure-black); }
  .sy-drawer-n { font-size: .72rem; border-left: 1px solid currentColor; padding-left: 10px; }
  .sy-drawer-n:empty { display: none; }
  .sy-drawer-foot { margin-top: auto; padding: 16px 16px 20px; border-top: 1px solid var(--sy-line); display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
}

/* ---------- Fenster (Formular über der Seite) ----------
   <div class="sy-overlay"><div class="sy-modal"><div class="sy-modal-head"><h2>…</h2></div><div class="sy-modal-body">…</div><div class="sy-modal-foot">…</div></div></div>
   Nie höher als der Bildschirm: Kopf und Fuß stehen, nur der Inhalt scrollt. Am Handy Vollbild. Beim Öffnen body.sy-modal-open. */
body.sy-modal-open { overflow: hidden; }
.sy-overlay {
  position: fixed; inset: 0; z-index: 50; display: flex; justify-content: center; align-items: center; padding: 10px 12px;
  background: rgba(0,0,0,.6); overflow: auto; overscroll-behavior: contain;
}
.sy-modal {
  display: flex; flex-direction: column; width: 100%; max-width: 1000px; max-height: 100%; background: var(--sy-surface);
  box-shadow: 0 2px 0 rgba(0,0,0,.05), 0 24px 60px -18px rgba(0,0,0,.6);
}
.sy-modal-head {
  position: relative; overflow: hidden; flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding: 11px 18px;
  background: var(--sy-pure-black); color: #fff; border-bottom: 4px solid var(--sy-accent);
}
.sy-modal-head::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .07; background-image: linear-gradient(90deg, #fff 1px, transparent 1px); background-size: 64px 100%; }
.sy-modal-head > * { position: relative; }
/* h2 braucht eigene Farbe — sonst schlägt h1..h4 { color: var(--sy-ink-head) } durch (schwarz auf schwarz) */
.sy-modal-head h2 { margin: 0; min-width: 0; font-size: 1.02rem; letter-spacing: .1em; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sy-modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 12px 18px 8px; background: var(--sy-bg); }
.sy-modal-foot { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 18px; border-top: 1px solid var(--sy-line); background: var(--sy-bg); }
.sy-chip-id {
  font-family: var(--sy-font-head); font-weight: 600; font-size: .7rem; letter-spacing: .14em; color: var(--sy-yellow); white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--sy-yellow) 55%, transparent); padding: 2px 8px;
}
@media (max-width: 640px) {
  .sy-overlay { padding: 0; align-items: stretch; overflow: hidden; }
  .sy-modal { max-width: none; height: 100%; }
  .sy-modal-head { flex-wrap: wrap; row-gap: 6px; padding: 12px 14px; }
  .sy-modal-head h2 { font-size: .95rem; letter-spacing: .06em; flex: 1 1 0; }
  .sy-modal-body { padding: 14px; }
  .sy-modal-foot { padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}