/* ════════════════════════════════════════════════════════════════════════════
   MODUL-CHROME — Modulkopf · Tab-Leiste · Ansichts-Umschalter (v7, 24.07.2026)
   ────────────────────────────────────────────────────────────────────────────
   Drei optisch klar getrennte Ebenen (Navigationskonzept §5–§8):

     1  Sidebar          wählt das MODUL            (nav-sidebar.css)
     2  .vmod-tab        wählt den TAB im Modul     (hier — ruhige Ink-Underline)
     3  .vmod-seg / vi-fbar-pills  wählt Ansicht/Filter IM Tab  (Segment-Pillen)

   Die Tab-Leiste bricht NIE mehrzeilig um: sie scrollt horizontal, zeigt dezente
   Randindikatoren und hält den aktiven Tab immer sichtbar (module-chrome.js).
   Verhalten & Markup: public/module-chrome.js · Konfiguration: public/nav-config.js
   ════════════════════════════════════════════════════════════════════════════ */

:root {
  --vmod-pad-x:        var(--page-pad-x, 32px);
  --vmod-tab-h:        44px;    /* Zielbereich 42–48 px */
  --vmod-tab-pad-x:    14px;
  --vmod-tab-font:     14px;
  --vmod-tab-ink-h:    2px;
  --vmod-head-h:       48px;
}

/* ── Rahmen: feste Bande zwischen Topbar und scrollendem Inhalt ─────────────── */
.vmod {
  flex: 0 0 auto;
  background: var(--color-surface, #fff);
  border-bottom: 1px solid var(--vitab-track-line, var(--gray-200));
}
.vmod[hidden] { display: none; }

/* ── A) Modulkopf: Modulname · Kontextzeile · Objektkontext · Primäraktion ────
   Ebene 1 der Seitenarchitektur. Der Titel steht in Ink, nicht in Markengrün:
   auf einer Seite mit grüner Navigation, grüner Primäraktion und grünem Tab-
   Indikator wäre eine grüne Überschrift die vierte grüne Ebene. */
.vmod-head {
  display: flex; align-items: center; gap: var(--space-3, 12px);
  min-height: var(--vmod-head-h);
  /* UX-Phase 3: 12/8 statt 16/8. Jeder Pixel über dem Inhalt fehlt unten als
     Datenzeile — auf 1366 × 768 kostet eine 44-px-Zeile genau vier davon. */
  padding: var(--space-3, 12px) var(--vmod-pad-x) var(--space-2, 8px);
}
.vmod-head-main { min-width: 0; flex: 1 1 auto; }
.vmod-head-side { display: flex; align-items: center; gap: var(--space-2, 8px); flex: 0 0 auto; }
.vmod-title {
  margin: 0;
  font-family: var(--font-display, inherit);
  font-size: var(--text-xl, 22px);
  font-weight: var(--fw-semibold, 600);
  line-height: 1.2;
  color: var(--gray-900);
  letter-spacing: -0.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* ── Titelkrume „Modul › Fachbereich" (Phase 1, 03.09.2026, Entscheidung E4) ──
   Der Seitentitel steht seither GENAU EINMAL: hier. Zehn Tab-Seiten trugen ihren
   Fachbereich vorher als zweite große Überschrift unter der Tab-Leiste — auf sieben
   Referenzansichten wortgleich zum aktiven Tab. Das kostete 38–72 px und nannte
   dasselbe zweimal.

   Gewichtung: das Modul ordnet ein (gedämpft), der Fachbereich ist die Aussage
   (Ink). Beides in EINER Zeile, damit der Kopf 44 px hoch bleibt — eine zweite
   Zeile wäre genau die Höhe, die wir gerade zurückgewonnen haben. */
/* Unter Platzdruck weicht der MODULNAME zurück, der Fachbereich bleibt vollständig —
   er ist die Ortsangabe, die der Nutzer sucht. Das regelt Flexbox, kein Breakpoint:
   maßgeblich ist die verfügbare Kopfbreite (Sidebar 272 px, Aktionen rechts), nicht
   die Fensterbreite. Bei 1024 px blieb sonst „Gebäudebetrieb › Wartungen & Prü…"
   stehen — gekürzt war ausgerechnet die Information, die den Ort benennt. */
.vmod-title:has(.vmod-crumb-cur) { display: flex; align-items: baseline; min-width: 0; }
.vmod-crumb {
  color: var(--gray-500); font-weight: var(--fw-medium, 500);
  min-width: 0; flex: 0 1 auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vmod-crumb-sep  { color: var(--gray-300); margin: 0 var(--space-2, 8px); font-weight: 400; flex: 0 0 auto; }
.vmod-crumb-cur  { color: var(--gray-900); flex: 0 0 auto; }
/* Wird es sehr eng, entfällt der Modulname ganz — er steht ohnehin in der Sidebar
   und im Breadcrumb der Topbar. */
@media (max-width: 900px) {
  .vmod-crumb, .vmod-crumb-sep { display: none; }
}

/* Kontextzeile unter dem Titel: Anzahl · Objektbezug · Stand. Zahlen, keine Erklärung. */
.vmod-sub {
  margin: 2px 0 0;
  font-size: var(--text-sm, 13px); color: var(--gray-500);
  font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* KEIN Objektkontext im Modulkopf (17.08.2026).
   Der Objektkontext wird genau einmal gewählt und angezeigt: in der Objektkontext-Karte
   der Hauptnavigation (`.onv-card`). Die rechte Kopfhälfte trägt ausschließlich
   kontextbezogene Aktionen. Die früheren `.vmod-obj*`-Regeln sind entfallen — ein zweiter
   Selektor für denselben Scope ist unzulässig. */
.vmod-action { flex: 0 0 auto; white-space: nowrap; }

/* ── B) Tab-Leiste (Ebene 2) — ruhig, einzeilig, kein horizontales Scrollen ── */
.vmod-tabs-wrap { position: relative; padding: 0 var(--vmod-pad-x); }
.vmod-tabs {
  display: flex; align-items: stretch; gap: 2px;
  overflow: hidden;                     /* kein Scrollen: Überlauf regelt das „Mehr"-Menü */
  flex-wrap: nowrap;                    /* NIE mehrzeilig */
}

.vmod-tab {
  position: relative;
  display: inline-flex; align-items: center; gap: 7px;
  flex: 0 0 auto;
  height: var(--vmod-tab-h);
  padding: 0 var(--vmod-tab-pad-x);
  border: none; background: transparent;
  border-radius: var(--radius-md, 8px) var(--radius-md, 8px) 0 0;
  font-family: inherit;
  font-size: var(--vmod-tab-font);
  font-weight: var(--fw-medium, 500);
  color: var(--vitab-inactive-color, var(--gray-700));
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background .16s ease, color .16s ease;
}
.vmod-tab:hover { background: var(--vitab-hover-bg, rgba(35, 33, 28, .05)); color: var(--vitab-hover-color, var(--gray-900)); }
.vmod-tab:focus-visible { outline: 2px solid var(--vitab-focus-ring, var(--color-sage)); outline-offset: -3px; }
/* Aktiver Zustand: kräftigeres Gewicht + Ink-Unterstrich. KEIN Layout-Sprung beim
   Aktivieren: jedes Label reserviert über ::after (unsichtbar, Höhe 0) bereits die
   Breite seiner fetten Variante. */
.vmod-tab-l { position: relative; display: inline-block; }
.vmod-tab-l::after {
  content: attr(data-l);
  display: block; height: 0; overflow: hidden; visibility: hidden;
  font-weight: var(--fw-semibold, 600);
  pointer-events: none;
}
.vmod-tab.is-active { color: var(--vitab-active-color, var(--color-forest)); font-weight: var(--fw-semibold, 600); }
.vmod-tab::after {
  content: '';
  position: absolute; left: var(--vmod-tab-pad-x); right: var(--vmod-tab-pad-x); bottom: 0;
  height: var(--vmod-tab-ink-h);
  border-radius: 2px 2px 0 0;
  background: var(--vitab-ink, var(--color-forest));
  transform: scaleX(0); opacity: 0;
  transition: transform .22s cubic-bezier(.2, .8, .2, 1), opacity .18s ease;
  pointer-events: none;
}
.vmod-tab:hover:not(.is-active)::after { transform: scaleX(.5); opacity: .25; }
.vmod-tab.is-active::after { transform: scaleX(1); opacity: 1; }

.vmod-tab-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 6px;
  border-radius: var(--radius-full, 9px);
  background: var(--vitab-badge-bg, rgba(35, 33, 28, .08));
  color: var(--vitab-badge-color, var(--gray-500));
  font-size: var(--text-xxs); font-weight: var(--fw-semibold, 600); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.vmod-tab.is-active .vmod-tab-badge { background: var(--vitab-badge-active-bg, #EDF7F2); color: var(--vitab-badge-active-color, var(--color-forest)); }

/* BETA-Kennzeichnung: funktionsfähig, aber noch nicht ausgereift (Konzept v2). Dezentes Gold-Akzent-Pill. */
.vmod-flag {
  display: inline-flex; align-items: center;
  margin-left: 6px; padding: 0 6px; height: 15px;
  border-radius: var(--radius-full, 9px);
  background: var(--color-warning-soft);
  color: var(--color-warning-ink);
  border: 1px solid var(--color-warning-soft);
  /* 9 px lagen bei diesem Farbpaar unter AA. 10 px + der kräftigere Bernsteinton
     bringen die Kennzeichnung über die Schwelle, ohne sie lauter zu machen. */
  font-size: 10px; font-weight: var(--fw-bold, 700); letter-spacing: .04em;
  line-height: 1; text-transform: uppercase; white-space: nowrap; vertical-align: middle;
}
.vmod-flag-sm { height: 15px; font-size: 10px; padding: 0 5px; margin-left: 5px; }

/* GEPLANT-Kennzeichnung: Zielstruktur sichtbar, fachlich aber noch nicht umgesetzt.
   Bewusst NEUTRAL (grau) statt Gold — BETA heißt „nutzbar, noch nicht ausgereift",
   GEPLANT heißt „hier ist noch nichts". Zwei verschiedene Aussagen, zwei Optiken. */
.vmod-flag-planned {
  background: var(--gray-100, #EFF2F1);
  color: var(--gray-500, #5F6B66);
  border-color: var(--gray-300, #D8DFDC);
}
/* Der Tab selbst tritt zurück, bleibt aber voll bedienbar (er zeigt, wohin es geht). */
.vmod-tab.is-planned .vmod-tab-l { opacity: .72; }
.vmod-tab.is-planned.is-active .vmod-tab-l { opacity: 1; }

/* „Mehr"-Knopf — trägt die Tabs, die nicht in die Breite passen (kein Scrollen).
   Sitzt als letztes Element in der Leiste, sieht aus wie ein Tab, ist aber ein Menü. */
.vmod-more {
  position: relative;
  display: inline-flex; align-items: center; gap: 5px;
  flex: 0 0 auto;
  height: var(--vmod-tab-h);
  padding: 0 12px 0 14px;
  border: none; background: transparent;
  border-radius: var(--radius-md, 8px) var(--radius-md, 8px) 0 0;
  font-family: inherit; font-size: var(--vmod-tab-font); font-weight: var(--fw-medium, 500);
  color: var(--vitab-inactive-color, var(--gray-700));
  line-height: 1; white-space: nowrap; cursor: pointer;
  transition: background .16s ease, color .16s ease;
}
.vmod-more[hidden] { display: none; }
.vmod-more:hover { background: var(--vitab-hover-bg, rgba(35, 33, 28, .05)); color: var(--vitab-hover-color, var(--gray-900)); }
.vmod-more:focus-visible { outline: 2px solid var(--vitab-focus-ring, var(--color-sage)); outline-offset: -3px; }
.vmod-more[aria-expanded="true"] { background: var(--vitab-hover-bg, rgba(35, 33, 28, .07)); color: var(--color-forest); }
.vmod-more svg { opacity: .7; transition: transform .16s ease; }
.vmod-more[aria-expanded="true"] svg { transform: rotate(180deg); }
.vmod-more-n {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--radius-full, 9px);
  background: var(--vitab-badge-bg, rgba(35, 33, 28, .08));
  color: var(--vitab-badge-color, var(--gray-500));
  font-size: var(--text-xxs); font-weight: var(--fw-semibold, 600); font-variant-numeric: tabular-nums;
}
.vmod-more-n:empty { display: none; }

/* „Mehr"-Menü — Dropdown mit den ausgelagerten Tabs (ARIA-Menü, tastaturbedienbar) */
.vmod-more-menu {
  position: absolute; z-index: 70;
  min-width: 220px; max-width: 320px; padding: 5px;
  background: var(--color-surface, #fff);
  border: 1px solid var(--gray-300, #D8DFDC); border-radius: var(--radius-md, 10px);
  box-shadow: var(--shadow-md);
}
.vmod-more-menu[hidden] { display: none; }
.vmod-more-item {
  /* justify-content ausdrücklich: design-system.css zentriert Buttons global. */
  display: flex; align-items: center; justify-content: flex-start; gap: 8px;
  width: 100%; min-height: 38px; padding: 0 12px;
  border: none; border-radius: var(--radius-sm, 6px);
  background: transparent; color: var(--gray-900);
  font-family: inherit; font-size: var(--text-sm, 14px); font-weight: var(--fw-medium, 500);
  text-align: left; cursor: pointer; white-space: nowrap;
}
.vmod-more-item-ic {
  flex: 0 0 15px; width: 15px; height: 15px;
  display: inline-flex; align-items: center; justify-content: center; opacity: .6;
}
.vmod-more-item-ic svg { display: block; }
.vmod-more-item:hover .vmod-more-item-ic, .vmod-more-item.is-active .vmod-more-item-ic { opacity: 1; }
.vmod-more-item-l { flex: 1 1 auto; min-width: 0; text-align: left; }
.vmod-more-item:hover { background: var(--gray-100); }
.vmod-more-item:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.vmod-more-item.is-active { color: var(--color-forest); background: var(--color-sage-soft, #EDF7F2); }
.vmod-more-item-n {
  margin-left: auto;
  min-width: 18px; height: 18px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-full, 9px);
  background: var(--vitab-badge-bg, rgba(35, 33, 28, .08));
  color: var(--vitab-badge-color, var(--gray-500));
  font-size: var(--text-xxs); font-weight: var(--fw-semibold, 600); font-variant-numeric: tabular-nums;
}

/* ── C) Ansichts-Umschalter (Ebene 3) — bewusst ANDERS als die Tabs ─────────── */
/* Die Ansichtsleiste trägt EINEN 36-px-Schalter — 8 px Polsterung oben und unten
   machten daraus 53 px. Mit 4 px bleibt sie klar abgesetzt und kostet 8 px weniger. */
.vmod-subviews { padding: var(--space-1, 4px) var(--vmod-pad-x); background: var(--color-bg, #FAFBFA); border-top: 1px solid var(--gray-100); }
.vmod-subviews[hidden] { display: none; }
.vmod-seg {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px; border-radius: var(--radius-full, 999px);
  background: var(--gray-100, #F1EDE4);
  border: 1px solid var(--gray-300, #E2DCD0);
}
.vmod-seg-btn {
  height: var(--control-h-sm); padding: 0 14px;
  border: none; border-radius: var(--radius-full, 999px);
  background: transparent; color: var(--gray-700);
  font-family: inherit; font-size: var(--text-sm, 13px); font-weight: var(--fw-medium, 500);
  cursor: pointer; white-space: nowrap;
}
.vmod-seg-btn:hover { color: var(--gray-900); }
.vmod-seg-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.vmod-seg-btn.is-active { background: var(--color-surface, #fff); color: var(--color-forest); box-shadow: var(--shadow-sm); }

/* ── D) Doppelte Seitentitel vermeiden ──────────────────────────────────────────
   Der Modulname steht im Modulkopf, der Unterbereich im aktiven Tab. Die gewachsenen
   Seitenüberschriften (.page-title) und ihre Erklärzeilen (.page-subtitle) wiederholen
   das nur — sie werden ausgeblendet, solange das Modul-Chrome sichtbar ist. Aktions-
   knöpfe in .page-header bleiben. Detailseiten (ohne Chrome) behalten ihren Titel.
   Ausnahme: .vmod-keep für Zeilen, die WERTE tragen (z. B. Anzahl, Begrüßung). */
body.vmod-on .content.page.active .page-title:not(.vmod-keep),
body.vmod-on .content.page.active .page-subtitle:not(.vmod-keep) { display: none; }
/* Module mit eigener Kopf-Typografie (gewachsen) — gleiche Regel, namentlich.
   NEUE Seiten bitte `.page-title`/`.page-subtitle` verwenden, dann greift die
   Regel oben automatisch und diese Liste bleibt kurz. */
body.vmod-on .content.page.active > .obj-topbar > .obj-topbar-titles,
body.vmod-on .content.page.active .adr-head-text > .adr-title,
body.vmod-on .content.page.active .adr-head-text > .adr-intro,
body.vmod-on #page-grundrisse .fp-list-head .fp-h1,
body.vmod-on #page-grundrisse .fp-list-head .fp-sub,
body.vmod-on #page-betriebskosten .sc-head h1 { display: none; }
body.vmod-on .content.page.active > .page-header,
body.vmod-on .content.page.active > .page-head { align-items: center; }
/* Abstand Modulkopf → Seiteninhalt. Zusammen mit dem Innenabstand der Tab-Leiste
   ergaben 24 px hier gemessene 41 px Leerraum, bevor der Seitentitel begann — mehr,
   als die Abstandsregel für den Übergang zwischen Hauptbereichen vorsieht (16–24 px).
   Der Wert gilt bewusst ZENTRAL für alle Module, damit sich die Bereiche gleich
   anfühlen, statt ihn je Seite zu überschreiben. */
body.vmod-on .content { padding-top: var(--space-3, 12px); }

/* ── E) Leerzustände / kleine Bausteine der neuen Tabs ─────────────────────── */
.vmod-empty { padding: var(--space-6, 24px); text-align: center; color: var(--gray-500); font-size: var(--text-sm, 14px); }

/* „Zuletzt geöffnet" */
.zl-list { display: flex; flex-direction: column; gap: 2px; }
.zl-row {
  display: flex; align-items: center; gap: var(--space-3, 12px);
  width: 100%; padding: 10px 12px;
  border: none; border-radius: var(--radius-md, 8px);
  background: transparent; text-align: left; cursor: pointer;
}
.zl-row:hover { background: var(--gray-100); }
.zl-row:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.zl-ico { flex: 0 0 auto; color: var(--gray-500); display: inline-flex; }
.zl-ico .zl-ic { width: 18px; height: 18px; }
.zl-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.zl-title { font-size: var(--text-sm, 14px); font-weight: var(--fw-medium, 500); color: var(--gray-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zl-sub { font-weight: var(--fw-normal, 400); color: var(--gray-700); }
.zl-type { font-size: var(--text-xs, 12px); color: var(--gray-500); }
.zl-when { flex: 0 0 auto; font-size: var(--text-xs, 12px); color: var(--gray-500); font-variant-numeric: tabular-nums; }
.zl-foot { margin-top: var(--space-3, 12px); }
.vou-kpi {
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
  padding: var(--space-4, 16px);
  border: 1px solid var(--gray-300, #E7E3DA); border-radius: var(--radius-lg, 12px);
  background: var(--color-surface, #fff); cursor: pointer; text-align: left;
}
.vou-kpi:hover { border-color: var(--color-sage); }
.vou-kpi:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.vou-kpi.is-warn .vou-kpi-n { color: var(--color-danger, #C0392B); }
.vou-row {
  display: flex; align-items: baseline; gap: var(--space-3, 12px);
  width: 100%; padding: 8px 10px; border: none; border-radius: var(--radius-md, 8px);
  background: transparent; text-align: left; cursor: pointer;
}
.vou-row:hover { background: var(--gray-100); }
.vou-row:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Objekte · Beteiligte */
.bet-row { cursor: pointer; }
.bet-row:hover { background: var(--table-row-hover, var(--gray-100)); }
@media (max-width: 1023px) {
  :root { --vmod-pad-x: var(--space-5, 20px); }
  .vmod-head { flex-wrap: wrap; }
}
@media (max-width: 767px) {
  :root { --vmod-pad-x: var(--space-4, 16px); --vmod-tab-h: 44px; --vmod-tab-pad-x: 12px; }
  .vmod-head { padding-top: var(--space-3, 12px); }
  .vmod-title { font-size: var(--text-lg, 17px); }
  /* Mobil besitzt die eigene Schale (mobile.js); das „Mehr"-Menü greift dennoch,
     falls das Desktop-Chrome am Handy läuft (body.vim-desktop). */

  /* Der Kopf bricht in ZWEI Zeilen: Titel oben, Aktion darunter. Vorher stand alles in
     einer Zeile und schob den Kopf bei 375 px über den Bildschirmrand — die Primäraktion
     war dann nicht mehr erreichbar. */
  .vmod-head-main { flex: 1 1 100%; }
  .vmod-head-side { flex: 1 1 100%; flex-wrap: wrap; }
  .vmod-action { flex: 1 1 auto; justify-content: center; }
}

/* ── Sekundäraktionen im Modulkopf (17.08.2026) ──────────────────────────────
   Stehen links neben der Primäraktion in derselben Zeile. Sie sind bewusst
   ruhiger als die Primäraktion: gleiche Höhe, aber neutrale Fläche — sonst
   konkurrieren drei gleich laute Knöpfe um dieselbe Aufmerksamkeit. */
.vmod-sec-wrap { position: relative; flex: 0 0 auto; }
.vmod-sec { flex: 0 0 auto; white-space: nowrap; display: inline-flex; align-items: center; gap: var(--space-1, 4px); }
.vmod-sec-caret { font-size: var(--text-xs, 12px); opacity: .7; }
.vmod-sec-menu {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 60;
  min-width: 180px; padding: var(--space-1, 4px);
  background: var(--color-surface, #fff); border: 1px solid var(--gray-300, #d7dcda);
  border-radius: var(--radius-md, 8px); box-shadow: var(--shadow-pop, 0 6px 20px rgba(0,0,0,.14));
  display: flex; flex-direction: column;
}
.vmod-sec-menu[hidden] { display: none; }
.vmod-sec-menu button {
  border: 0; background: transparent; cursor: pointer; text-align: left;
  padding: var(--space-2, 8px) var(--space-2, 8px); border-radius: var(--radius-sm, 6px);
  font-size: var(--text-md, 14px); color: var(--gray-900, #1b211f); min-height: 32px;
}
.vmod-sec-menu button:hover { background: var(--gray-100, #eef1f0); }
@media (max-width: 720px) {
  .vmod-sec { flex: 1 1 auto; justify-content: center; }
  .vmod-sec-wrap { flex: 1 1 auto; }
}

/* Mobiler Kontext: der Modulkopf tritt zurück. Reiter und Ansichtsumschalter
   bleiben erreichbar, verbrauchen aber nicht die halbe Bildhöhe, bevor die erste
   Datenzeile kommt (UI-Welle §42/§48). Ausdruck zeichengleich mit mobile.css. */
@media (max-width: 767px), (max-height: 540px) and (pointer: coarse) {
  .vmod-subviews { padding-top: var(--space-1); padding-bottom: var(--space-1); }
  body.vmod-on .content { padding-top: var(--space-2); padding-left: var(--space-3); padding-right: var(--space-3); }
  .vmod-seg-btn { height: var(--control-h-lg); }       /* Touch-Ziel statt 28 px */
}

/* Telefon quer: die zwei Navigationszeilen (Reiter + Ansichtsumschalter) bleiben
   erhalten — sie sind der Weg durch das Modul —, werden aber flacher. Die
   Trefffläche bleibt über die Breite erhalten, nicht über die Höhe. */
@media (max-height: 540px) and (pointer: coarse) {
  :root { --vmod-tab-h: 36px; }
  .vmod-seg-btn { height: var(--control-h-sm); }
  .vmod-seg { padding: 2px; }
}