/* ═══════════════════════════════════════════════════════
   SELO RESPONSIVE — Global Mobile & Tablet Overrides
   Loaded AFTER inline <style> to override with specificity.
   Breakpoints: 768px (Tablet), 640px (Phone), 480px (Small)
   ═══════════════════════════════════════════════════════ */

/* ── DM-Sans-Optical-Sizing (Feedback 05.08.2026 «ll zu dick») ──────────
   DM Sans ist eine Variable Font. Ohne Vorgabe nimmt der Browser die
   Display-Optische-Groesse — die Striche sind dafuer gebaut und wirken bei
   Fliesstext zu schwer; am staerksten faellt es beim schmalen «l» auf
   («ll» sah fett aus). «opsz 14» ist die Text-Optische-Groesse.
   Derselbe Kanon steht in allen Druckfenstern (Drift-Guard
   scripts/pdf_opsz_test.mjs); hier gilt er fuer die App selbst — und damit
   auch fuer den html2canvas-Weg von gema_pdf.js, der die LIVE-Seite
   abfotografiert. */
body{
  font-optical-sizing:auto;
  font-variation-settings:"opsz" 14;
}

/* ── Body-Scroll-Lock fuer Modal-Dialoge ──────────────────
   gema_scroll.js setzt diese Klasse auf <body>, sobald ein
   .modal-bg sichtbar wird, und entfernt sie wieder, wenn
   keines mehr offen ist. position:fixed ist iOS-Safari-
   tauglich (overflow:hidden allein ignoriert iOS).
   Der negative top-Wert wird per JS gesetzt, damit die
   aktuelle Scroll-Position erhalten bleibt. */
body.gema-modal-open{
  position:fixed;
  width:100%;
  overflow:hidden;
  /* left/right auf 0, sodass Inhalte im Viewport bleiben */
  left:0;right:0;
}
/* Sanfte Sperre (alles ausser iOS): overflow-y:hidden friert die Seite ein,
   OHNE die Scroll-Position anzufassen — beim Schliessen muss darum auch
   nichts zurueckgescrollt werden, es bewegt sich schlicht nichts.
   MUSS auf <html> stehen: html/body tragen overflow-x:clip (Abschnitt 13),
   damit propagiert body-overflow NICHT mehr auf den Viewport.
   overflow-x bleibt clip — nur die vertikale Achse wird gesperrt. */
html.gema-modal-soft{ overflow-y:hidden !important; }

/* ── GemaDialog (gema_dialog.js) ─ Alert/Confirm/Prompt im SELO-Style
   .gema-dlg-bg ist der Overlay — MUSS zuoberst liegen (12800): ueber den
   dynamischen Modals (_wzShowModal: 10500), dem Safe-Area-Streifen
   (html::before: 10500), NFC-Pills (11000) und dem QR-Scanner (12000) —
   mit 9500 verschwanden Bestaetigungen/Alerts aus diesen Kontexten
   UNSICHTBAR hinter dem aufrufenden Modal.
   .gema-dlg ist die Karte; .gema-dlg-actions die Footer-Buttons.
   iOS-Safe-Area-aware. */
.gema-dlg-bg{
  position:fixed;inset:0;z-index:12800;
  background:rgba(15,23,42,.55);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;
  padding:16px;padding-top:max(16px,env(safe-area-inset-top));
  padding-bottom:max(16px,env(safe-area-inset-bottom));
  animation:gemaDlgFadeIn .15s ease-out;
}
@keyframes gemaDlgFadeIn{from{opacity:0}to{opacity:1}}
.gema-dlg{
  background:#fff;color:#0f172a;
  border-radius:16px;
  width:100%;max-width:420px;
  padding:22px 22px 18px;
  box-shadow:0 25px 70px -10px rgba(0,0,0,.35);
  animation:gemaDlgSlideIn .18s cubic-bezier(.16,1,.3,1);
  font-family:"DM Sans",ui-sans-serif,system-ui,sans-serif;
}
@keyframes gemaDlgSlideIn{from{transform:translateY(8px);opacity:.85}to{transform:none;opacity:1}}
.gema-dlg-title{
  font-size:16.5px;font-weight:800;
  color:#0f172a;margin-bottom:6px;letter-spacing:-.2px;
}
.gema-dlg-msg{
  font-size:14px;line-height:1.5;color:#334155;
  margin-bottom:16px;word-break:break-word;
}
.gema-dlg-input{
  width:100%;box-sizing:border-box;
  padding:10px 14px;border:1.5px solid #cdd4e4;
  border-radius:10px;font-size:15px;font-family:inherit;
  margin-bottom:16px;outline:none;background:#f4f6fb;color:#0f172a;
}
.gema-dlg-input:focus{border-color:#2563eb;background:#fff;box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.gema-dlg-actions{
  display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;
}
.gema-dlg-btn{
  padding:9px 18px;border-radius:10px;border:1.5px solid transparent;
  font-size:13.5px;font-weight:700;font-family:inherit;
  cursor:pointer;transition:.15s;min-height:40px;
  display:inline-flex;align-items:center;justify-content:center;
  -webkit-tap-highlight-color:transparent;
}
.gema-dlg-btn:focus{outline:none;box-shadow:0 0 0 3px rgba(37,99,235,.2)}
.gema-dlg-cancel{
  background:#f4f6fb;color:#334155;border-color:#cdd4e4;
}
.gema-dlg-cancel:hover{background:#edf0f7}
.gema-dlg-confirm{
  background:#2563eb;color:#fff;
}
.gema-dlg-confirm:hover{background:#1d4ed8}
.gema-dlg-danger{
  background:#dc2626;color:#fff;
}
.gema-dlg-danger:hover{background:#b91c1c}
@media(max-width:640px){
  .gema-dlg{padding:18px 18px 14px;max-width:none;border-radius:14px}
  .gema-dlg-actions{flex-wrap:wrap}
  .gema-dlg-btn{flex:1 1 auto;min-height:44px;font-size:14px}
}

/* ── Adress-Autocomplete (gema_adresse.js) ─────────────────
   Inputs mit data-gema-adresse erhalten automatisch diese Optik.
   .gema-adr-input wird vom Helper auf das Such-Input gesetzt;
   ihre Form/Bordering kommt vom umgebenden Form-CSS — wir styleen
   nur die Drop-Container und Items. */
.gema-adr-drop{
  position:absolute;top:100%;left:0;right:0;z-index:600;
  background:#fff;border:1.5px solid #2563eb;border-top:none;
  border-radius:0 0 10px 10px;
  box-shadow:0 8px 24px rgba(15,23,42,.12);
  max-height:240px;overflow-y:auto;display:none;
  -webkit-overflow-scrolling:touch;
}
.gema-adr-drop.open{display:block}
.gema-adr-item{
  padding:9px 12px;font-size:13.5px;cursor:pointer;
  border-bottom:1px solid #e2e7f0;
  display:flex;flex-direction:column;gap:2px;transition:.1s
}
.gema-adr-item:last-child{border-bottom:none}
.gema-adr-item:hover,.gema-adr-item.active{background:#eff6ff}
.gema-adr-item .gema-adr-main{font-weight:700;color:#0f172a}
.gema-adr-item .gema-adr-sub{font-size:11.5px;color:#64748b}
.gema-adr-loading{padding:12px;text-align:center;font-size:12.5px;color:#64748b}
/* Hinweis-Zeile: warum gefiltert wurde bzw. wie viele Treffer nicht
   angezeigt sind — nichts faellt still weg. */
.gema-adr-hint{
  padding:7px 12px;font-size:11.5px;line-height:1.35;color:#92400e;
  background:#fffbeb;border-bottom:1px solid #fde68a
}
.gema-adr-hint:last-child{border-bottom:none;border-top:1px solid #fde68a}
@media(max-width:640px){
  .gema-adr-drop{max-height:60dvh}
  .gema-adr-item{padding:11px 12px;font-size:14px}
}

/* ── Handelsregister-Autocomplete (gema_zefix.js) ─────────
   Gleiche Optik wie das Adress-Dropdown, eigener Namensraum
   (ein Firma-Feld kann beides tragen). */
.gema-hr-drop{
  position:absolute;top:100%;left:0;right:0;z-index:600;
  background:#fff;border:1.5px solid #2563eb;border-top:none;
  border-radius:0 0 10px 10px;
  box-shadow:0 8px 24px rgba(15,23,42,.12);
  max-height:260px;overflow-y:auto;display:none;
  -webkit-overflow-scrolling:touch;
}
.gema-hr-drop.open{display:block}
.gema-hr-item{
  padding:9px 12px;font-size:13.5px;cursor:pointer;
  border-bottom:1px solid #e2e7f0;
  display:flex;flex-direction:column;gap:2px;transition:.1s
}
.gema-hr-item:last-child{border-bottom:none}
.gema-hr-item:hover,.gema-hr-item.active{background:#eff6ff}
.gema-hr-item .gema-hr-main{font-weight:700;color:#0f172a}
.gema-hr-item .gema-hr-sub{font-size:11.5px;color:#64748b}
.gema-hr-item.geloescht .gema-hr-main{color:#64748b}
.gema-hr-tag{
  display:inline-block;margin-left:5px;padding:1px 6px;border-radius:5px;
  background:#fef2f2;color:#b91c1c;font-size:10px;font-weight:800;
  text-transform:uppercase;letter-spacing:.3px;vertical-align:middle
}
.gema-hr-loading{padding:12px;text-align:center;font-size:12.5px;color:#64748b;line-height:1.5}
/* Bestaetigungs-Zeile unter dem Firma-Feld (Modul-seitig gerendert) */
.gema-hr-hint{
  margin-top:5px;font-size:11.5px;color:#166534;background:#f0fdf4;
  border:1px solid #bbf7d0;border-radius:8px;padding:6px 9px;line-height:1.45
}
.gema-hr-hint a{color:#166534;font-weight:700}
.gema-hr-hint-sub{margin-top:3px;font-size:10.5px;color:#3f6b4b;opacity:.9}
@media(max-width:640px){
  .gema-hr-drop{max-height:60dvh}
  .gema-hr-item{padding:11px 12px;font-size:14px}
}

/* ── 0. MOBILE HAMBURGER MENU ── */

/* Hamburger Button — 44×44 fuer Apple-HIG-konforme Tap-Target-Groesse.
   JS schaltet display via .style auf flex (Mobile) bzw. none (Desktop). */
.gema-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1.5px solid var(--border2, #cdd4e4);
  background: var(--surface, #fff);
  color: var(--text2, #374151);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  flex-shrink: 0;
  padding: 0;
  margin-left: auto;
  -webkit-tap-highlight-color: transparent;
}
.gema-hamburger:active {
  background: var(--bg2, #edf0f7);
  transform: scale(0.96);
}
.gema-hamburger.active {
  background: var(--accent-bg, #eff4ff);
  border-color: var(--accent-bd, #bfcfff);
  color: var(--accent, #2563eb);
}
/* Hamburger-Linien → animieren beim Open zu X */
.gema-hamburger-bars {
  position: relative;
  width: 20px;
  height: 14px;
  display: block;
}
.gema-hamburger-bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .25s cubic-bezier(0.32, 0.72, 0, 1), opacity .2s, top .25s cubic-bezier(0.32, 0.72, 0, 1);
}
.gema-hamburger-bars span:nth-child(1) { top: 0; }
.gema-hamburger-bars span:nth-child(2) { top: 6px; }
.gema-hamburger-bars span:nth-child(3) { top: 12px; }
.gema-hamburger.active .gema-hamburger-bars span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.gema-hamburger.active .gema-hamburger-bars span:nth-child(2) { opacity: 0; }
.gema-hamburger.active .gema-hamburger-bars span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

/* Overlay (blurred backdrop) */
.gema-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(15, 23, 42, 0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  pointer-events: none;
  transition: background .3s ease, backdrop-filter .3s ease, -webkit-backdrop-filter .3s ease;
}
.gema-menu-overlay.open {
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: auto;
}

/* Slide-in Panel */
.gema-menu-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  width: 320px;
  max-width: 88vw;
  background: var(--surface, #fff);
  box-shadow: -8px 0 40px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .32s cubic-bezier(0.32, 0.72, 0, 1);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* iOS Safe-Area: Notch + Home-Indicator beachten */
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}
.gema-menu-panel.open { transform: translateX(0); }

/* Header — User-Block links + Schliessen-Button rechts */
.gema-menu-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 18px 16px;
  border-bottom: 1px solid var(--border, #e2e7f0);
  flex-shrink: 0;
  background: linear-gradient(180deg, #fafbfd 0%, transparent 100%);
}
.gema-menu-user {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  /* v2: tappbarer <button> (oeffnet sys_profil.html) — Button-Reset */
  background: transparent;
  border: none;
  padding: 6px;
  margin: -6px;
  border-radius: 12px;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  transition: background .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.gema-menu-user:active { background: var(--bg2, #edf0f7); }
.gema-menu-user .gema-menu-chevron { margin-left: 2px; }
.gema-menu-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1d4ed8, #16a34a);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 800;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
.gema-menu-user-info {
  flex: 1;
  min-width: 0;
}
.gema-menu-user-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text, #111827);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gema-menu-user-meta {
  font-size: 11.5px;
  color: var(--muted, #6b7280);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gema-menu-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text, #111827);
  letter-spacing: -0.3px;
}
.gema-menu-close {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1.5px solid var(--border2, #cdd4e4);
  background: var(--surface, #fff);
  color: var(--muted, #6b7280);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: .15s;
  padding: 0;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.gema-menu-close:active {
  background: var(--bg2, #edf0f7);
  color: var(--text, #111827);
  transform: scale(0.94);
}

/* Content-Bereich (scrollbar) */
.gema-menu-content {
  flex: 1;
  padding: 8px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overscroll-behavior: contain;
}

/* Sektion mit Titel oberhalb der Items */
.gema-menu-section {
  display: flex;
  flex-direction: column;
  margin-top: 8px;
}
.gema-menu-section:first-child { margin-top: 0; }
.gema-menu-section-title {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted2, #9ca3af);
  padding: 6px 10px 4px;
}
.gema-menu-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Menu Item */
.gema-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 10px 12px;
  border-radius: 12px;
  border: none;
  background: transparent;
  color: var(--text2, #374151);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s ease, transform .12s ease;
  text-align: left;
  width: 100%;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.gema-menu-item:active {
  background: var(--bg2, #edf0f7);
  transform: scale(0.985);
}
@media (hover: hover) {
  .gema-menu-item:hover { background: var(--bg2, #edf0f7); }
}

.gema-menu-icon {
  font-size: 18px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--bg2, #edf0f7);
  flex-shrink: 0;
  line-height: 1;
}

.gema-menu-label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gema-menu-chevron {
  color: var(--muted2, #9ca3af);
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

/* Spezial-Varianten */
.gema-menu-item--feedback { color: #dc2626; }
.gema-menu-item--feedback .gema-menu-icon { background: #fef2f2; }

.gema-menu-item--admin .gema-menu-icon { background: #f5f3ff; color: #7c3aed; }

.gema-menu-item--logout { color: #dc2626; }
.gema-menu-item--logout .gema-menu-icon { background: #fef2f2; color: #dc2626; }

/* Footer */
.gema-menu-footer {
  padding: 14px 16px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--muted2, #9ca3af);
  text-align: center;
  border-top: 1px solid var(--border, #e2e7f0);
  flex-shrink: 0;
  letter-spacing: 0.4px;
}
/* «Als App installieren» im Footer (nur wenn GemaPWA geladen + moeglich) */
.gema-menu-install {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1.5px solid var(--accent-bd, #bfcfff);
  background: var(--accent-bg, #eff4ff);
  color: var(--accent, #2563eb);
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.gema-menu-install:active { transform: scale(0.97); background: var(--accent-bd, #bfcfff); }

/* Notify-Glocke, wenn sie auf Mobile neben dem Hamburger steht
   (gema_mobile_menu.js verschiebt .gn-btn aus der versteckten
   .g-nav-right) — gleiche Tap-Target-Groesse wie der Hamburger. */
.gn-btn--nav {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  border: 1.5px solid var(--border2, #cdd4e4) !important;
  font-size: 18px !important;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.gn-btn--nav:active { background: var(--bg2, #edf0f7) !important; transform: scale(0.96); }


/* ── 1. PREVENT HORIZONTAL SCROLL + ZOOM (Global) ──
   KRITISCH: overflow-x auf html/body als `clip` (mit `hidden` nur als
   Fallback fuer sehr alte Browser). `hidden` erzwingt overflow-y:auto
   (Spec-Koerzierung) und macht html/body zu Scroll-Containern — damit
   klebte KEIN position:sticky mehr (die .g-nav scrollte auf allen Seiten
   weg, obwohl sie «immer sichtbar» sein soll). `clip` klippt horizontal
   identisch, erzeugt aber keinen Scroll-Container → sticky funktioniert. */
html {
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
}
body {
  overflow-x: hidden;
  overflow-x: clip;
  position: relative;
  width: 100%;
}
body.modal-open {
  overflow: hidden !important;
}
/* Prevent iOS zoom on focus — all inputs min 16px */
input, select, textarea {
  font-size: 16px !important;
}

/* Nav immer sichtbar (sticky + fixed Fallback) */
.g-nav {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 200;
  /* Globale Header-Hoehe: 72px (Desktop + Mobile) */
  height: 72px !important;
  min-height: 72px !important;
  box-sizing: border-box;
}
/* Inner-Container fuellt die Nav-Hoehe und zentriert seine Kinder. */
.g-nav-inner {
  height: 72px !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box;
}
/* Logo + SVG global auf 40px Hoehe, vertikal zentriert. */
.g-nav-logo {
  display: flex !important;
  align-items: center !important;
  align-self: center !important;
  line-height: 0;
}
.g-nav-mark {
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  align-self: center !important;
  line-height: 0;
}
.g-nav-mark svg,
.g-nav-mark img {
  height: 40px !important;
  width: auto !important;
  display: block;
}
/* Logo-Abstand vereinheitlicht (Seiten variierten 12–18px). */
.g-nav-logo {
  margin-right: 16px !important;
}

/* ── Nav-Buttons global vereinheitlicht (Kanon) ──
   Die Seiten definieren .g-nav-btn/.gema-feedback-btn inline mit
   abweichenden Hoehen/Paddings/Fonts — hier werden die METRIKEN
   verbindlich normalisiert (diese Datei laedt nach den Inline-Styles).
   Farben bleiben seitenspezifisch: die :where()-Defaults haben
   Spezifitaet 0 und fuellen nur Luecken (Seiten ohne eigene Regel);
   .g-nav-btn.primary & Co. behalten ihre Akzentfarben. */
/* Versteckte Nav-Knoepfe BLEIBEN versteckt (05.08.2026): die Metrik-Regel
   darunter erzwingt display:inline-flex per !important und schlaegt damit
   auch ein inline style="display:none". Rollen-/zustandsabhaengige Knoepfe
   (z.B. Mitarbeiter/Firmenprofil im Lieferanten-Dashboard) verstecken sich
   darum ueber DIESE Klasse — hoehere Spezifitaet, gewinnt den !important-
   Vergleich. */
.g-nav .g-nav-btn.gnav-weg { display: none !important; }
.g-nav .g-nav-btn,
.g-nav .gema-feedback-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center;
  gap: 5px;
  height: 34px !important;
  padding: 0 13px !important;
  box-sizing: border-box !important;
  border-radius: 8px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  font-family: inherit;
  line-height: 1 !important;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none !important;
}
:where(.g-nav .g-nav-btn) {
  border: 1px solid #c8cfdf;
  background: #fff;
  color: #334155;
}
:where(.g-nav .g-nav-btn):hover {
  background: #eef1f7;
}
/* Feedback-Knopf: kanonisches Rot auf allen Seiten. */
.g-nav .gema-feedback-btn {
  background: #dc2626 !important;
  color: #fff !important;
  border: none !important;
  font-weight: 700 !important;
}
.g-nav .gema-feedback-btn:hover {
  background: #b91c1c !important;
}

/* Safe area support (iPhone notch / Dynamic Island) */
body {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* ── 2. TABLET (max-width: 768px) ── */
@media (max-width: 768px) {

  /* Nav (Tablet) — Hoehe + Logo bleiben global 72/40, nur Padding und
     Spacing tablet-spezifisch komprimiert. */
  .g-nav-inner {
    padding: 0 16px !important;
    gap: 8px;
  }
  .g-nav-logo {
    margin-right: 8px !important;
  }
  .g-nav-bc a,
  .g-nav-bc span {
    font-size: 11.5px;
    padding: 3px 5px;
  }
  .g-nav .g-nav-btn,
  .g-nav .gema-feedback-btn {
    height: 30px !important;
    padding: 0 10px !important;
    font-size: 11.5px !important;
  }
  .nav-pill {
    padding: 5px 10px;
    font-size: 11px;
  }
  .nav-tagline {
    display: none;
  }

  /* Page wrapper */
  .g-page {
    padding: 16px 14px 48px;
  }

  /* Page header */
  .g-ph {
    padding: 16px 18px;
    flex-direction: column;
    align-items: flex-start;
  }

  /* Hero sections — nur fuer Homepage (hat .hero-inner als Child).
     Module-Heros (Werkzeug, Fahrzeug, Trocknung etc.) bringen ihr
     eigenes kompaktes Padding ueber inline-styles mit. */
  .hero:has(> .hero-inner) {
    padding: 40px 18px 48px;
  }
  .hero-inner {
    flex-direction: column;
    gap: 24px;
  }
  .hero-text {
    min-width: 0;
    width: 100%;
  }
  .hero h1 {
    font-size: clamp(26px, 6vw, 36px);
    letter-spacing: -0.8px;
  }
  .hero p {
    font-size: 15px;
    max-width: 100%;
  }
  .hero-badges {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
  }
  .hero-badge {
    min-width: 0;
    flex: 1;
    min-width: 160px;
    padding: 10px 14px;
  }
  .hero-stats {
    gap: 20px;
  }

  /* Grids */
  .mod-grid,
  .g-grid-auto {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
    gap: 12px;
  }
  .g-grid-2, .g-grid-3 {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  /* Filter bar — Sticky-Offset folgt der globalen 72px-Nav (+ Inset) */
  .filter-bar {
    padding: 0 14px;
    top: calc(72px + env(safe-area-inset-top, 0px));
  }
  .filter-inner {
    height: 46px;
    gap: 2px;
  }
  /* Suchleiste (index.html): Filter-Bar ist auf Tablet 46px hoch → 72+46 */
  .search-bar {
    top: calc(118px + env(safe-area-inset-top, 0px));
  }
  .cat-section,
  #san {
    scroll-margin-top: calc(188px + env(safe-area-inset-top, 0px));
  }
  .filter-btn {
    padding: 5px 10px;
    font-size: 11.5px;
  }

  /* Main container (index.html etc.) */
  .main {
    padding: 24px 16px 60px;
  }

  /* Category headers */
  .cat-header {
    gap: 10px;
    margin-bottom: 14px;
  }
  .cat-icon-wrap {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 18px;
  }
  .cat-title-text {
    font-size: 17px;
  }

  /* Cards */
  .g-card,
  .card {
    border-radius: 14px;
  }

  /* Tables: scrollable wrapper */
  .g-table-wrap,
  .tbl-scroll,
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -14px;
    padding: 0 14px;
  }

  /* KPI grids */
  .g-kpi-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
    gap: 8px;
  }

  /* Result cards */
  .g-result-list {
    gap: 8px;
  }

  /* Sections */
  .g-section,
  section {
    scroll-margin-top: 100px;
  }

  /* Modals */
  .modal-bg {
    padding: 16px 12px;
  }
  .modal,
  .modal-box {
    max-width: calc(100vw - 24px) !important;
    border-radius: 16px;
  }
  .modal-hd,
  .modal-header {
    padding: 16px 18px;
  }
  .modal-body {
    padding: 16px 18px;
  }
  .modal-ft,
  .modal-footer {
    padding: 14px 18px;
  }

  /* Combo widget (Projekt-Feld) */
  .obj-combo {
    flex-wrap: wrap;
  }

  /* Search — die fixe 160px-Breite war ein Relikt aus der Zeit, als
     die Suche ein kleines Feld in der Filter-Bar war. Mit der neuen
     full-width search-bar auf index.html zerstoerte sie das Layout
     (Lupe ragte aus dem Container). Nicht mehr setzen. */
}


/* ── 3. PHONE (max-width: 640px) ── */
@media (max-width: 640px) {

  /* Nav (Phone) — Hoehe + Logo bleiben global 72/40. Asymmetrisches
     Padding: links 6px, rechts 12px — Logo rueckt naeher an den linken
     Bildschirmrand. */
  .g-nav-inner {
    padding: 0 12px 0 6px !important;
    gap: 6px;
  }
  .g-nav-logo {
    margin-right: 6px;
  }
  /* Breadcrumb auf Phone komplett ausblenden — wuerde sonst als
     'W…' / 'F…' / 'T…' zwischen Logo und User-Badge abgeschnitten. */
  .g-nav-bc {
    display: none !important;
  }
  /* User-Badge (#_gemaAuthBadge aus gema_auth.js) rechts neben dem
     Hamburger — auf Mobile setzt gema_mobile_menu.js die .g-nav-right
     auf display:none, damit faellt der einzige Auto-Spacer weg und
     der Badge klebt mit seinem inline margin-left:16px direkt am Logo.
     Mit margin-left:auto schieben wir den Badge ganz rechts. */
  #_gemaAuthBadge {
    margin-left: auto !important;
    padding-right: 6px !important;
    /* Der Badge gibt als EINZIGER nach (inline flex-shrink:0): neben Chat,
       Glocke und Menü war für einen langen Namen kein Platz, der Menüknopf
       rutschte über den rechten Rand (overflow-x:clip = unerreichbar).
       Der Name ellipst dann früher — die Knöpfe bleiben im Bild. */
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }
  /* Text-Spalte des Badges (Name + Rolle) auf Phone hart begrenzen:
     lange Namen/Rollen ellipsen (inline nowrap+ellipsis in gema_auth.js),
     statt Logo und Hamburger zusammenzuquetschen. !important, weil der
     Desktop-Cap (230px) als Inline-Style auf dem Element liegt. */
  #_gemaAuthBadge > div:first-child {
    max-width: 38vw !important;
  }
  /* Hamburger: vertikal zentriert + margin-left:0 (default ist :auto in
     .gema-hamburger). Ohne dieses Override gaebe es zwei Auto-Spacer
     (Badge + Hamburger), das wuerde den Badge in die Mitte druecken. */
  .g-nav-inner .gema-hamburger {
    align-self: center !important;
    margin-left: 0 !important;
  }

  /* Page wrapper */
  .g-page {
    padding: 12px 10px 40px;
  }

  /* Hero (Homepage/Hub-Seiten mit .hero-inner) — auf dem Phone NUR der
     Titel (User-Vorgabe 07/2026): Eyebrow-Pill, Beschreibungstext,
     Badge-Karten UND Stats-Zeile sind Desktop-Kontext und wuerden auf dem
     Smartphone einen ganzen Screen fressen. */
  .hero:has(> .hero-inner) {
    padding: 12px 14px;
    border-radius: 0;
  }
  .hero:has(> .hero-inner) h1 {
    font-size: 19px;
    letter-spacing: -0.3px;
    margin: 0;
  }
  .hero:has(> .hero-inner) p,
  .hero:has(> .hero-inner) .hero-eyebrow,
  .hero:has(> .hero-inner) .hero-badges,
  .hero:has(> .hero-inner) .hero-stats {
    display: none;
  }

  /* Grids → single column */
  .mod-grid,
  .g-grid-auto {
    grid-template-columns: 1fr !important;
    gap: 10px;
  }
  .g-kpi-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px;
  }

  /* Stats row */
  .stats-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px;
  }

  /* Filter bar — klebt direkt unter der 72px-Nav (+ Safe-Area-Inset).
     Ein fixer top-Wert (frueher 46px) laesst sie unter der Nav
     verschwinden, sobald die Nav hoeher ist als angenommen. */
  .filter-bar {
    padding: 0 10px;
    top: calc(72px + env(safe-area-inset-top, 0px));
  }
  .filter-inner {
    height: 42px;
  }
  .filter-btn {
    padding: 4px 8px;
    font-size: 11px;
  }
  .filter-sep {
    height: 18px;
    margin: 0 3px;
  }
  /* Suchleiste (index.html) auf dem Phone NICHT sticky: sie scrollt mit
     dem Inhalt weg (iOS-Muster — Suche oben, Pull-up zum Browsen), statt
     als dritte gepinnte Leiste den halben Screen zu belegen bzw. frei
     ueber den Modul-Karten zu schweben. */
  .search-bar {
    position: static;
    padding: 0 12px;
  }
  /* Kategorie-Sprungziele: gepinnter Stapel = Nav 72 + Filter 42 (+ Inset) */
  .cat-section,
  #san {
    scroll-margin-top: calc(128px + env(safe-area-inset-top, 0px));
  }

  /* Main content */
  .main {
    padding: 16px 12px 60px;
  }

  /* Category sections */
  .cat-section {
    margin-bottom: 32px;
  }
  .cat-icon-wrap {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }
  .cat-title-text {
    font-size: 15px;
  }

  /* ── Modul-Kacheln → kompakte ZEILEN (User-Vorgabe 07/2026) ──
     Auf dem Phone frassen die Karten (Icon-Block, 3 Stichpunkte, Footer)
     pro Modul ~180px — bei 20+ Modulen endloses Scrollen. Jetzt: eine
     schlanke Zeile pro Modul (Icon + Titel + Stern/Pfeil); Stichpunkte,
     Badges und Norm-Chips sind ausgeblendet, bleiben aber im DOM — die
     index-Suche filtert weiter ueber den kompletten Kachel-Text.
     `display:contents` hebt die Wrapper (card-top/footer) in die Zeile;
     die order-Werte stellen Icon → Titel → Stern → Pfeil sicher.
     Betrifft index/ab_index/pm_ausschreibung (.mod-card) und sb_index
     (.mod mit h3). Nur der Fav-Stern (.fav-btn in .mod-badges) und bei
     deaktivierten Kacheln der «Bald»-Badge bleiben sichtbar. */
  .mod-grid { gap: 7px; }
  .mod-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 11px;
    padding: 9px 12px !important;
    border-radius: 12px;
    min-height: 0 !important;
  }
  .mod-card .accent-line { display: none; }
  .mod-card .mod-card-top { display: contents; }
  .mod-icon-box {
    width: 34px;
    height: 34px;
    font-size: 17px;
    border-radius: 9px;
    margin: 0;
    flex-shrink: 0;
    order: 0;
  }
  .mod-card .mod-body { padding: 0; flex: 1; min-width: 0; order: 1; }
  .mod-title {
    font-size: 13.5px;
    min-height: 0 !important;
    margin: 0;
  }
  .mod-desc { display: none !important; }
  .mod-card .mod-badges { order: 2; gap: 4px; flex-shrink: 0; }
  .mod-card .mod-badges .badge { display: none; }
  .mod-card.disabled .mod-badges .badge { display: inline-flex; }
  .mod-card .mod-footer { display: contents; }
  .mod-card .mod-norms,
  .mod-card .mod-norm { display: none !important; }
  .mod-card .mod-arrow { order: 3; flex-shrink: 0; }

  /* sb_index-Variante: .mod mit <h3>-Titel, mod-top/mod-footer-Wrappern */
  .mod-grid > .mod {
    flex-direction: row;
    align-items: center;
    gap: 11px;
    padding: 9px 12px;
    border-radius: 12px;
  }
  .mod-grid > .mod .mod-top { display: contents; }
  .mod-grid > .mod .mod-icon { font-size: 19px; flex-shrink: 0; order: 0; }
  .mod-grid > .mod .mod-badge { display: none; }
  .mod-grid > .mod.disabled .mod-badge { display: inline-flex; order: 2; flex-shrink: 0; }
  .mod-grid > .mod h3 {
    padding: 0;
    margin: 0;
    flex: 1;
    min-width: 0;
    font-size: 13.5px;
    min-height: 0 !important;
    order: 1;
  }
  .mod-grid > .mod .mod-pts { display: none !important; }
  .mod-grid > .mod .mod-footer { display: contents; }
  .mod-grid > .mod .mod-footer .mod-norm { display: none !important; }
  .mod-grid > .mod .mod-footer .mod-arrow { order: 3; flex-shrink: 0; font-size: 11px; }

  /* Page header */
  .g-ph {
    padding: 14px 14px;
    border-radius: 14px;
    gap: 10px;
  }
  .g-ph-left {
    gap: 10px;
  }

  /* Cards */
  .g-card,
  .card {
    border-radius: 12px;
  }
  .card-hd,
  .card-header {
    padding: 14px 14px;
  }
  .card-body {
    padding: 14px;
  }

  /* Forms: inputs, selects, textareas */
  .g-page input[type="text"],
  .g-page input[type="email"],
  .g-page input[type="password"],
  .g-page input[type="tel"],
  .g-page input[type="url"],
  .g-page select,
  .g-page textarea {
    font-size: 16px; /* Prevents iOS auto-zoom on focus */
  }

  /* Tables: ensure horizontal scroll */
  table {
    font-size: 12px;
  }
  th, td {
    padding: 8px 10px;
  }

  /* Sections with tabs */
  .tab-bar,
  .tabs-bar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tab-bar::-webkit-scrollbar,
  .tabs-bar::-webkit-scrollbar {
    display: none;
  }

  /* Buttons general */
  .btn, .g-btn {
    padding: 8px 14px;
    font-size: 12.5px;
  }

  /* Modals: full-width on phone, vertikal zentriert mit
     symmetrischem Abstand (Safe-Area-aware fuer iOS Home-Indicator
     und Notch). align-items:center statt flex-start, damit Modal
     nicht oben am Bildschirmrand klebt. */
  .modal-bg {
    padding: 12px;
    padding-top: max(12px, env(safe-area-inset-top));
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    padding-left: max(8px, env(safe-area-inset-left));
    padding-right: max(8px, env(safe-area-inset-right));
    align-items: center;
  }
  .modal,
  .modal-box {
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 14px;
    max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
  .modal-hd,
  .modal-header {
    padding: 14px 16px;
  }
  .modal-body {
    padding: 14px 16px;
  }
  .modal-ft,
  .modal-footer {
    padding: 14px 16px;
    gap: 8px;
  }

  /* Combo widget */
  .obj-combo-toggle {
    margin-left: 0;
    width: 100%;
    justify-content: center;
  }

  /* Search — position:relative MUSS bleiben, damit das absolut
     positionierte .search-icon innerhalb des Wrappers verankert
     bleibt (sonst wandert die Lupe zum naechsten positionierten
     Vorfahren, typisch <body>, und sitzt "irgendwo unten").
     Frueher war hier 'position: static' — das zerstoerte das
     Lupen-Layout auf Phone. */
  .search-wrap {
    width: 100%;
    margin: 0;
  }
  .search-inp {
    width: 100%;
  }
}


/* ── 4. SMALL PHONE (max-width: 380px) ── */
@media (max-width: 380px) {

  .g-page {
    padding: 10px 8px 36px;
  }

  /* Hero (≤380px) — nur fuer Homepage */
  .hero:has(> .hero-inner) {
    padding: 22px 10px 28px;
  }
  .hero:has(> .hero-inner) h1 {
    font-size: 22px;
  }

  .g-kpi-grid {
    grid-template-columns: 1fr !important;
  }
  .stats-row {
    grid-template-columns: 1fr !important;
  }

  .g-nav-inner {
    padding: 0 8px 0 4px !important;
  }
}


/* ── 5. TABLET LANDSCAPE (max-width: 1024px) ── */
@media (max-width: 1024px) {

  /* Hero layout for iPad */
  .hero-inner {
    gap: 28px;
  }
  .hero-badges {
    flex-direction: row;
    flex-wrap: wrap;
  }

  /* Grids: allow 2 columns */
  .g-grid-3 {
    grid-template-columns: 1fr 1fr !important;
  }
}


/* ── 6. PROJECT BAR & GRIDS (used across 20+ calculation modules) ── */
@media (max-width: 768px) {
  .project-bar {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px;
  }
  .grid2 {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px;
  }
  .grid3 {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px;
  }
}
@media (max-width: 640px) {
  .project-bar,
  .grid2,
  .grid3 {
    grid-template-columns: 1fr !important;
    gap: 8px;
  }
}


/* ── 7. TABLES — min-width override for mobile ── */
@media (max-width: 768px) {
  .tbl,
  .app-table,
  .tool-table,
  .anlage-table,
  .vote-table,
  .maengel-table,
  .check-table {
    min-width: 0 !important;
  }
  /* Ensure all table wrappers scroll */
  .tbl-wrap,
  .table-wrap,
  .tbl-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 640px) {
  /* Override inline min-width on table headers */
  .tbl th, .tbl td,
  .app-table th, .app-table td,
  .tool-table th, .tool-table td,
  .g-table th, .g-table td {
    padding: 6px 8px !important;
    font-size: 11.5px;
    min-width: 0 !important;
  }
  .vote-table {
    font-size: 11px;
  }
  .vote-table th.opt-head {
    min-width: 60px !important;
  }
}


/* ── 8. ACTION BARS (fixed bottom bars) ── */
@media (max-width: 640px) {
  .act-bar {
    padding: 8px 10px !important;
    padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important;
  }
  .act-bar-in {
    flex-wrap: wrap;
    gap: 6px;
  }
  .footer-bar {
    padding: 8px 10px !important;
    padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important;
  }
  .footer-bar .footer-inner,
  .footer-bar > div {
    flex-wrap: wrap;
    gap: 6px;
  }
}


/* ── 9. TOASTS ── */
@media (max-width: 640px) {
  #toast,
  .toast {
    left: 12px !important;
    right: 12px !important;
    bottom: 16px !important;
    transform: none !important;
    max-width: none !important;
    text-align: center;
    font-size: 13px;
  }
}


/* ── 10. CALCULATION MODULE SPECIFICS ── */
@media (max-width: 768px) {
  /* Card headers */
  .g-card-hd {
    padding: 12px 14px;
    flex-wrap: wrap;
  }
  .g-card-bd {
    padding: 14px;
  }

  /* Section blocks */
  .g-section-hd {
    padding: 10px 14px;
    gap: 8px;
  }
  .g-section-bd {
    padding: 14px;
  }
  .g-section-title {
    font-size: 12.5px;
  }

  /* Tabs */
  .g-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }
  .g-tabs::-webkit-scrollbar {
    display: none;
  }
  .g-tab {
    flex: 0 0 auto;
    padding: 7px 10px;
    font-size: 11.5px;
  }

  /* Result rows */
  .g-result-row {
    flex-wrap: wrap;
    gap: 4px 12px;
  }
  .g-result-lbl {
    flex-basis: 100%;
    font-size: 12px;
  }

  /* KPI values */
  .g-kpi-val {
    font-size: 18px;
  }

  /* Input groups */
  .g-inp-group {
    flex-wrap: nowrap;
    max-width: 100%;
  }
  .g-inp-unit {
    font-size: 11px;
    padding: 8px 8px;
  }

  /* Druckdispositiv table */
  .dp-table td.input-cell input {
    min-width: 60px;
  }
}

@media (max-width: 640px) {
  .g-card-hd h2 {
    font-size: 12.5px;
  }
  .g-section-num {
    width: 20px;
    height: 20px;
    font-size: 10px;
  }
}


/* ── 11. ALTERNATE NAV PATTERN (g-nav as direct flex, no g-nav-inner) ── */
@media (max-width: 768px) {
  .g-nav {
    padding: 0 16px;
    gap: 8px;
  }
}
@media (max-width: 640px) {
  .g-nav {
    padding: 0 12px;
    height: 46px;
    gap: 6px;
  }
  .g-nav-bc {
    font-size: 11.5px;
  }
}

/* ── 12. PAGE CLASS (sys_profil, sys_admin etc.) ── */
@media (max-width: 768px) {
  .page {
    padding: 20px 14px;
  }
  .page-title {
    font-size: 20px;
  }
}
@media (max-width: 640px) {
  .page {
    padding: 16px 10px;
  }
  .page-title {
    font-size: 18px;
  }
  .page-sub {
    font-size: 12px;
  }
}

/* ── 13. TABS (sys_admin, hy_w12 etc.) ── */
@media (max-width: 640px) {
  .tabs {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar {
    display: none;
  }
  .tab {
    padding: 7px 14px;
    font-size: 12px;
    white-space: nowrap;
    flex-shrink: 0;
  }
}

/* ── 14. USER LIST (sys_admin) ── */
@media (max-width: 640px) {
  .user-item {
    flex-wrap: wrap;
    padding: 12px;
    gap: 8px;
  }
  .user-item .btn,
  .user-item .btn-sm {
    padding: 5px 10px;
    font-size: 11px;
  }
}


/* ── 15. DROPDOWNS & POPOVERS ── */
/* (frei — die frühere #objQuickDrop-Regel gehörte zu einem entfernten
   Projekt-Dropdown; Nummerierung bleibt, weil CLAUDE.md die Abschnitte
   17–19 per Nummer referenziert) */

/* ── 16. DYNAMIC TABLES (JS-generated with inline min-width) ── */
@media (max-width: 768px) {
  .dt th,
  .dt td {
    min-width: 0 !important;
    padding: 6px 8px;
  }
  .dt {
    font-size: 11px !important;
  }
}


/* ── 17. W12 SIDEBAR LAYOUT (hy_w12) ── */
@media (max-width: 768px) {
  .app {
    flex-direction: column;
    height: auto;
    min-height: calc(100vh - 52px);
    overflow: visible;
  }
  .sb {
    width: 100% !important;
    border-right: none !important;
    border-bottom: 1.5px solid var(--border, #e2e7f0);
    max-height: 50vh;
    overflow-y: auto;
  }
  .sb.collapsed {
    max-height: 0;
    border-bottom: none;
    overflow: hidden;
  }
  .sb-inner {
    width: 100% !important;
    padding: 10px 14px;
  }
  .main {
    overflow: visible;
    min-height: 0;
  }
  .topbar {
    padding: 8px 14px;
    flex-wrap: wrap;
  }
  .tabs {
    padding: 6px 14px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar {
    display: none;
  }
  .tab {
    flex-shrink: 0;
    padding: 7px 12px;
    font-size: 11.5px;
  }
  .content {
    padding: 14px !important;
    overflow: visible !important;
  }
}

@media (max-width: 640px) {
  .topbar-title {
    font-size: 12.5px;
  }
  .topbar-badge {
    font-size: 10px;
    padding: 2px 7px;
  }
}

/* ── 18. INSPECTION / TOOL TABLES (hy_inspektion, if_werkzeug) ── */
@media (max-width: 768px) {
  .anlage-table,
  .tool-table {
    min-width: 0 !important;
    font-size: 12px;
  }
}
@media (max-width: 640px) {
  .toolbar {
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 14px;
  }
  .toolbar .btn,
  .toolbar .g-nav-btn {
    flex: 1;
    min-width: 0;
    justify-content: center;
  }
}


/* ── 19. FIELD ROW GRIDS (used in modals/forms across many modules) ── */
@media (max-width: 640px) {
  .field-row.c2,
  .field-row.c3,
  .fg-row,
  .g2, .g3 {
    grid-template-columns: 1fr !important;
    gap: 8px;
  }
}

/* ── 20. CRBX / OFFERTVERGLEICH TABLES ── */
@media (max-width: 768px) {
  .lv-table,
  .ov-table {
    min-width: 0 !important;
    font-size: 11.5px;
  }
  .lv-table th,
  .lv-table td,
  .ov-table th,
  .ov-table td {
    padding: 6px 8px !important;
    min-width: 0 !important;
  }
}

/* ── 21. BESPRECHUNG TABLES ── */
@media (max-width: 640px) {
  .prt-table th,
  .prt-table td {
    min-width: 0 !important;
    width: auto !important;
    padding: 6px 8px !important;
  }
}

/* ── 22. LIEFERANT-DASHBOARD ── */
@media (max-width: 768px) {
  .prod-editor {
    width: 100% !important;
    max-width: 100% !important;
    position: fixed;
    inset: 0;
    z-index: 400;
    border-radius: 0;
  }
}

/* ── 23. SPUELMANAGER TABS ── */
@media (max-width: 640px) {
  .tab-btn {
    font-size: 11px;
    padding: 6px 10px;
  }
}

/* ── 24. QUIZ LAYOUT ── */
@media (max-width: 640px) {
  .qp-bar {
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
  }
  .quiz-card {
    padding: 16px;
    border-radius: 14px;
  }
}

/* ── 25. FAHRZEUG / WERKZEUG TABLES ── */
@media (max-width: 768px) {
  .fz-table th,
  .fz-table td {
    min-width: 0 !important;
    width: auto !important;
    white-space: normal !important;
  }
}


/* ── 26. FORM ELEMENTS ── */
@media (max-width: 640px) {
  input, select, textarea {
    max-width: 100%;
  }
  .search-box {
    min-width: 0 !important;
    width: 100%;
  }
}


/* ── 11. LOGIN PAGE ──
   sys_login.html traegt seit 25.09.2026 (Design «SELO Login») ein eigenes,
   auf jeder Breite gleiches Layout (Glaskarte max. 360 px, Radius 24) —
   hier bewusst keine Handy-Regeln mehr, sie wuerden das Design verbiegen. */


/* ── 12. PRINT (unaffected by responsive) ── */
@media print {
  html, body {
    overflow: visible !important;
  }
}


/* ── 7. TOUCH IMPROVEMENTS ── */
@media (hover: none) and (pointer: coarse) {
  /* Larger touch targets (Apple HIG recommends 44px) */
  .btn, .g-btn {
    min-height: 44px;
  }
  .filter-btn,
  .tab-btn {
    min-height: 36px;
  }

  /* Remove hover effects that feel wrong on touch */
  .mod-card:hover {
    transform: none;
  }
  .g-nav-btn:hover,
  .nav-pill:hover {
    transform: none;
  }

  /* Smooth scrolling for tab bars */
  .tab-bar,
  .tabs-bar,
  .filter-inner {
    scroll-snap-type: x mandatory;
  }
  .tab-bar > *,
  .tabs-bar > *,
  .filter-inner > * {
    scroll-snap-align: start;
  }
}

/* ── 13. PWA SAFE-AREA OBEN (Statusleiste / Notch / Dynamic Island) ──
   Installierte PWA (display:standalone) + viewport-fit=cover: Die Seite
   liegt HINTER der System-Statusleiste — ohne Inset ragt die Nav in
   Uhrzeit/Frontkamera. Zwei Bausteine:
   (1) html::before = fixer Streifen in theme-color #0f172a ueber die
       Inset-Hoehe, IMMER zuoberst am Viewport (auch wenn die Nav
       wegscrollt oder eine Seite gar keine .g-nav hat) — die weisse
       Statusleisten-Schrift (Meta black-translucent auf allen Seiten)
       bleibt so ueberall lesbar; identischer Look wie Android, wo das
       System die Statusbar selbst in theme-color faerbt (env() = 0).
       body::before ist auf sys_login.html belegt, daher html::before.
       z-index ueber Dialog/Notify/Offline-Banner (die padden sich selbst
       um den Inset), unter QR-Scanner-Overlay (12000, Kamera-Vollbild).
   (2) .g-nav bekommt den Inset als padding-top, Hoehe waechst per calc —
       der Nav-Inhalt beginnt unterhalb des Streifens.
   Browser-Tab/Desktop: env() = 0 → beides unsichtbar, exakt wie bisher.
   Landscape-Insets links/rechts deckt das body-Padding weiter oben ab.
   !important, damit spaetere padding-Shorthands (Abschnitt 11) den
   Inset nicht nullen. */
html::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: env(safe-area-inset-top, 0px);
  background: #0f172a;
  z-index: 10500;
  pointer-events: none;
}
.g-nav {
  height: calc(72px + env(safe-area-inset-top, 0px)) !important;
  min-height: calc(72px + env(safe-area-inset-top, 0px)) !important;
  padding-top: env(safe-area-inset-top, 0px) !important;
}

/* ── 14. iOS-FEEL (Touch-Verhalten, App-Charakter) ──
   Ziel: SELO fuehlt sich auf Smartphone/Tablet wie eine native App an.
   (a) Kein grauer Tap-Blitz (tap-highlight) — Feedback kommt stattdessen
       ueber :active-Zustaende. (b) touch-action:manipulation entfernt
       das Doppeltipp-Zoom-Delay auf allen Bedienelementen. (c) UI-Text
       (Buttons/Chips/Nav) ist nicht selektierbar und zeigt kein
       Long-Press-Callout — Inhalte (Inputs, Tabellen, Resultate) bleiben
       selektierbar. (d) Einheitliches Press-Feedback (scale) auf coarse
       Pointern. Desktop bleibt unveraendert (hover-Regeln unberuehrt). */
html {
  -webkit-tap-highlight-color: transparent;
}
button, a, label, select, summary,
input[type="checkbox"], input[type="radio"] {
  touch-action: manipulation;
}
@media (hover: none) and (pointer: coarse) {
  .g-btn, .g-nav-btn, .g-chip, .g-tab, .g-seg, .lu-btn, .fw-add,
  .gema-feedback-btn, .gn-btn, .g-badge, .obj-combo-toggle,
  .gema-menu-item, .gema-hamburger, .g-nav-logo, .g-nav-bc a {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }
  .g-btn:active, .g-nav-btn:active, .g-chip:active, .g-tab:active,
  .g-seg:active, .lu-btn:active, .fw-add:active, .gema-feedback-btn:active {
    transform: scale(0.96);
    transition: transform .08s ease;
  }
  /* iOS-Listen-Feedback: Zeilen/Karten heben nicht ab, sondern toenen ab */
  .g-result-row:active, .g-table tbody tr:active {
    background: var(--surface2, #f8faff);
  }
}

/* ── 15. FORMULAR-GRIDS & TABS AUF PHONE (Overflow-Schutz) ──
   (a) Einige Berechnungsmodule bauen 2-Spalten-Formulare mit INLINE-Styles
   (grid-template-columns:1fr 1fr) — die kollabieren in keinem Media-Query.
   Inputs haben ~200px intrinsische Mindestbreite → Karte wird breiter als
   der Viewport und wird durch overflow-x:clip abgeschnitten (sa_osmose,
   sa_schlammsammler, sa_abwasserhebeanlage, sa_solaranlage …). Auf Phone
   werden solche Formular-Grids einspaltig. (b) Inputs in Einheits-Gruppen
   duerfen unter ihre intrinsische Breite schrumpfen. (c) Tab-Leisten
   scrollen horizontal statt die Seite zu sprengen. */
.g-inp-group .g-inp { min-width: 0; }
.g-inp-group { min-width: 0; }
/* Grid-Spalten duerfen unter die Min-Content-Breite ihrer Kinder schrumpfen —
   sonst vererbt ein breiter Tabellen-Wrapper (overflow-x:auto) seine
   intrinsische Breite nach oben und die Karte sprengt den Viewport, statt
   dass die Tabelle INTERN scrollt (min-width:auto-Falle bei Grid-Items). */
.g-main-grid > *, .main-grid > *, .g-grid-2 > *, .g-grid-3 > *, .g-grid-auto > * { min-width: 0; }
/* Unbrechbare Codebloecke scrollen statt zu sprengen */
.g-page pre { max-width: 100%; overflow-x: auto; }
@media (max-width: 640px) {
  .g-page [style*="grid-template-columns:1fr 1fr"],
  .g-page [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  .g-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .g-tabs::-webkit-scrollbar { display: none; }
  .g-tab { flex: 1 0 auto; }
}

/* ── 16. KOMPAKTER MODUL-KOPF AUF PHONE (iOS-App-Look) ──
   Hero + Projekt-Leiste frassen auf dem Handy fast einen ganzen
   Bildschirm (~700px), bevor die erste Berechnungs-Karte kam. Auf Phone:
   Hero nur noch Icon + Titel (Norm-Badge, Untertitel und Dataflow-Pille
   ausgeblendet — alles Infos, die der Anwender nicht bei jedem Oeffnen
   braucht), Projekt-Leiste zweispaltig kompakt: Objekt volle Breite,
   Bearbeiter/Datum/SIA-Phase halbbreit daneben, Zuordnungs-Pille schmal.
   Desktop und Tablet unveraendert. */
@media (max-width: 640px) {
  .gema-hero {
    padding: 10px 14px !important;
    border-radius: 14px;
    margin-bottom: 10px;
  }
  .gema-hero-in { gap: 10px; flex-wrap: nowrap; }
  .gema-hero-ic {
    width: 34px !important;
    height: 34px !important;
    font-size: 17px;
    border-radius: 9px;
  }
  .gema-hero-title { font-size: 16px; }
  .gema-hero-norm,
  .gema-hero-sub,
  #gemaDataflowPill { display: none !important; }

  /* Modul-Heroes im if_werkzeug-Muster (.hero > .hero-in) — gleiche Regel
     wie .gema-hero: auf dem Phone NUR Emoji-Icon + Titel; Untertitel,
     Pills/Badges und Stats sind Desktop-Kontext (User-Vorgabe 07/2026). */
  .hero:has(> .hero-in) {
    padding: 10px 14px !important;
    border-radius: 14px;
    margin-bottom: 10px;
  }
  .hero-in { gap: 10px !important; flex-wrap: nowrap !important; }
  .hero-in .hero-ic {
    width: 34px !important;
    height: 34px !important;
    font-size: 17px !important;
    border-radius: 9px;
    flex-shrink: 0;
  }
  .hero-in .hero-title { font-size: 16px !important; }
  .hero-in .hero-sub,
  .hero-in .hero-pills,
  .hero-in .hero-pill,
  .hero-in .hero-badge,
  .hero-in .hero-stats { display: none !important; }

  .project-bar {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px;
    margin-bottom: 12px;
  }
  .project-bar .pf:first-child { grid-column: 1 / -1; }
  .pf { padding: 6px 10px !important; border-radius: 10px; gap: 2px; }
  .pf label { font-size: 9px; letter-spacing: .4px; }
  .pf input,
  .pf .obj-combo select,
  .pf .obj-combo input,
  .gema-phase-pf select {
    padding: 6px 9px !important;
  }
  .gema-phase-pf { min-width: 0 !important; }
  .gema-zuordnung-pill {
    margin-top: 0 !important;
    padding: 4px 10px !important;
    font-size: 10.5px !important;
  }
}

/* ── 17. DATUMS- & ZEITFELDER (iOS/Android): nie über den Rand ──
   Native Datumsfelder haben auf iOS/WebKit eine EIGENE Mindestbreite und
   ignorieren width:100%; ihre inneren Teile bringen zusätzlich Padding mit
   und zentrieren den Wert. Steht so ein Feld in einem Flex-/Grid-Container
   (Standard in jedem Dialog), kann der Container wegen min-width:auto nicht
   unter die Inhalts-Mindestbreite schrumpfen — das Feld ragt aus dem Dialog
   und schiebt sich über das Nachbarfeld.
   Rezept 1:1 aus if_werkzeug (dort seinerzeit von Hand gelöst), hier
   ZENTRAL für alle ~70 Seiten mit Datumsfeldern. Regel für neue Dialoge:
   nichts tun — das greift automatisch.

   ZWEI SCHICHTEN, bewusst getrennt:
   (a) Struktur (global) — box-sizing/max-width/min-width am Feld und
       min-width:0 am Container. Verhindert den Überlauf und ist überall
       unschädlich (Desktop-Geometrie nachgemessen: identisch).
   (b) WebKit-Innenleben (NUR Touch) — appearance:none + Padding-Resets der
       Shadow-Teile. Das ist die eigentliche iOS-Kur, ändert aber bei
       Feldern mit height:auto (.pf input[type=date] in ~40 Rechenmodulen,
       sv_service, pm_besprechung) die Höhe um 1–2 px; am Desktop stünde das
       Datumsfeld dann minim tiefer als das Textfeld daneben. Der Fehler ist
       ein Mobile-Fehler — die Kur gehört dorthin. */
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="time"],
input[type="week"] {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
}
/* Der Container eines Datumsfeldes muss schrumpfen dürfen. Flex-/Grid-Kinder
   haben min-width:auto = Inhalts-Mindestbreite; genau daran hängt der
   Überlauf. :where() hält die Spezifität bei 0 — eine bewusste Seiten-Regel
   gewinnt weiterhin. (Für Nicht-Flex-Boxen ist min-width:0 ein No-Op.) */
:where(*:has(> input[type="date"]),
       *:has(> input[type="datetime-local"]),
       *:has(> input[type="month"]),
       *:has(> input[type="time"]),
       *:has(> input[type="week"])) { min-width: 0; }

@media (hover: none) and (pointer: coarse) {
  input[type="date"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="time"],
  input[type="week"] {
    -webkit-appearance: none;
    appearance: none;
  }
  /* Wert linksbündig statt zentriert (der zentrierte Wert lief über den
     rechten Rand) und Padding der Shadow-Teile raus (Breite). */
  input[type="date"]::-webkit-date-and-time-value,
  input[type="datetime-local"]::-webkit-date-and-time-value,
  input[type="month"]::-webkit-date-and-time-value,
  input[type="time"]::-webkit-date-and-time-value,
  input[type="week"]::-webkit-date-and-time-value { text-align: left; }
  input[type="date"]::-webkit-datetime-edit,
  input[type="datetime-local"]::-webkit-datetime-edit,
  input[type="month"]::-webkit-datetime-edit,
  input[type="time"]::-webkit-datetime-edit,
  input[type="week"]::-webkit-datetime-edit { padding: 0; }
  input[type="date"]::-webkit-datetime-edit-fields-wrapper,
  input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper,
  input[type="month"]::-webkit-datetime-edit-fields-wrapper,
  input[type="time"]::-webkit-datetime-edit-fields-wrapper,
  input[type="week"]::-webkit-datetime-edit-fields-wrapper { padding: 0; }
  input::-webkit-datetime-edit-text,
  input::-webkit-datetime-edit-day-field,
  input::-webkit-datetime-edit-month-field,
  input::-webkit-datetime-edit-year-field,
  input::-webkit-datetime-edit-hour-field,
  input::-webkit-datetime-edit-minute-field,
  input::-webkit-datetime-edit-ampm-field { padding: 0; }
  input[type="date"]::-webkit-inner-spin-button,
  input[type="datetime-local"]::-webkit-inner-spin-button,
  input[type="month"]::-webkit-inner-spin-button,
  input[type="time"]::-webkit-inner-spin-button,
  input[type="week"]::-webkit-inner-spin-button { height: auto; }
}

/* ── 18. EINGABEFELD + EINHEITEN-BOX BÜNDIG (Feedback 05.08.2026) ──
   «oben und unten bündig, bei allen berechnungen!» — im .fg-Zeilenmuster
   (Label · Eingabe · Einheit als Geschwister, align-items:center) waren
   Feld und Einheiten-Box unterschiedlich hoch: die globale 16px-Regel oben
   (iOS-Fokus-Zoom) hebt NUR das Input an, die Einheiten-Box (span, 11.5px)
   blieb niedriger — beide zentriert ⇒ oben UND unten je ~2px Versatz.
   Kanon wie bei den Nav-Buttons: EINE zentrale Höhe mit !important für
   beide Teile. Das .g-inp-group-Muster braucht nichts — dort sitzt das Paar
   allein im Container und alle 39 Definitionen stehen auf align-items:
   stretch (flush by construction). */
.fg > .fg-inp,
.fg > select.fg-inp,
.fg > .fg-unit {
  height: 34px !important;
  box-sizing: border-box !important;
}
.fg > .fg-unit {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
/* Sicherheitsnetz für .g-inp-group: eine künftige Definition ohne stretch
   fiele sonst in dieselbe Falle. :where() hält die Spezifität bei 0 —
   bestehende Seiten-Regeln (alle stretch) gewinnen ohnehin. */
:where(.g-inp-group) { align-items: stretch; }
:where(.g-inp-group .g-inp-unit, .g-inp-group .inp-unit) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: auto;
}

/* ── 19. SKELETON-LADEANZEIGE (.gema-sk) ─────────────────────────────
   Graue Platzhalter in der FORM des erwarteten Inhalts, statt eines
   Spinners mit «Wird geladen …». Der Nutzer sieht sofort, WAS kommt
   (Karten? Liste? Tabelle?), und die Seite springt beim Eintreffen der
   Daten nicht — die Platzhalter haben dieselbe Geometrie wie die echten
   Zeilen/Karten.

   Hier steht bewusst NUR die gemeinsame Basis (Farbe + Schimmer); die
   FORM baut jedes Modul selbst, weil jede Ansicht anders aussieht.

   Regeln:
   • Nur zeigen, solange NICHTS da ist (`!_xxCloudLoaded && !daten.length`).
     Bei gefülltem Cache rendert die Seite sofort die echten Daten — ein
     Skelett davor wäre ein Rückschritt (stale-while-revalidate-Kanon).
   • Container tragen `aria-hidden="true"` + `role="presentation"`:
     ein Screenreader soll leere Platzhalter nicht vorlesen. Die Ansage
     macht ein sichtbares `.gema-sk-hint` bzw. ein aria-live-Text.
   • `prefers-reduced-motion` schaltet den Schimmer ab (Fläche bleibt).
   • Im Druck sind Platzhalter unsichtbar — ein Bericht darf keine
     grauen Balken zeigen. */
.gema-sk {
  position: relative;
  overflow: hidden;
  background: #e8ecf2;
  border-radius: 6px;
  /* Der Schimmer liegt als zweite Ebene darüber (::after) — so bleibt
     die Grundfläche auch ohne Animation sichtbar. */
}
.gema-sk::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.62) 50%,
    rgba(255,255,255,0) 100%);
  animation: gema-sk-shimmer 1.35s ease-in-out infinite;
}
@keyframes gema-sk-shimmer {
  100% { transform: translateX(100%); }
}
/* Zeile mit Standardhöhe — die Breite gibt das Modul vor (Inline-Style),
   damit die Platzhalter unterschiedlich lang sind und nicht wie ein
   Formular-Raster wirken. */
.gema-sk-line { height: 11px; }
.gema-sk-line.sk-lg { height: 15px; border-radius: 7px; }
.gema-sk-line.sk-sm { height: 9px;  border-radius: 5px; }
/* Kreis/Quadrat für Icon-Plätze */
.gema-sk-ic { border-radius: 12px; }
.gema-sk-ic.sk-round { border-radius: 50%; }

/* Der begleitende Text («Wird geladen …») ist KEIN Platzhalter, sondern
   die ehrliche Ansage — er bleibt lesbar und wird nicht animiert. */
.gema-sk-hint {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  text-align: center;
  padding: 14px 8px 2px;
}

@media (prefers-reduced-motion: reduce) {
  .gema-sk::after { animation: none; opacity: 0; }
}
@media print {
  .gema-sk, .gema-sk-hint, [data-gema-sk] { display: none !important; }
}

/* ── 20. GESPERRTE MODUL-KACHELN BLEIBEN WEG (Phone-Falle) ───────────
   Der Permission-Filter in index.html versteckt eine Kachel ohne Zugriff
   per INLINE-Style (`card.style.display='none'` + `data-perm-hidden`).
   Abschnitt 12 erzwingt auf dem Phone aber `.mod-card{display:flex
   !important}` (Kachel → Zeile) — und eine `!important`-Regel im
   Stylesheet schlaegt ein Inline-Style OHNE `!important`. Folge: ab
   640px kam JEDE gefilterte Kachel zurueck (gemessen: Monteur sieht auf
   dem Desktop 17, auf dem iPhone 33 Kacheln; die Sektions-Zaehler sagten
   weiterhin «8 Module», sichtbar waren 21). Dieselbe Falle wie beim
   Nav-Knopf → dieselbe Loesung: die Sichtbarkeit haengt an einer Marke
   im Stylesheet, nicht an einem Inline-Style (siehe `.gnav-weg`).

   Gilt bewusst GLOBAL (nicht nur im Phone-Block): so kann kein kuenftiger
   `!important`-Layout-Block die Filterung wieder aushebeln.
   `data-perm-locked` (Gratis-Konto-Upsell) ist NICHT betroffen — jene
   Kacheln sollen sichtbar und nur nicht klickbar sein. */
.mod-card[data-perm-hidden],
.mod[data-perm-hidden] { display: none !important; }

/* ── 21. ERGEBNIS-RASTER: FORMEL · ZAHL · EINHEIT IN SPALTEN (Feedback 25.09.2026)
   «Alle Formeln genau untereinander und weiter nach rechts schieben.
   Einheiten und Werte alle genau untereinander» (Druckanstieg) und «alle
   Zahlen genau untereinander, alle Einheiten genau untereinander»
   (Druckerhöhung). Zuschaltbar über die Klasse .g-erg-raster an einem
   Vorfahren; Markup je Zeile:
     <div class="g-result-row">
       <span class="g-result-lbl">Beschriftung</span>
       <span class="frml">Formel</span>                        (optional)
       <span class="g-result-val"><span class="g-rv" id="…">Zahl</span><span class="g-ru">Einheit</span></span>
     </div>
   Die Spalten sind FEST breit (Variablen), nicht nach Inhalt — nur so
   stehen Zahlen und Einheiten auch über getrennte Listen und Karten hinweg
   bündig. Zahl rechtsbündig mit tabellarischen Ziffern, Einheit linksbündig;
   ein Text statt einer Zahl (.g-rv-text) belegt Zahl- und Einheitenspalte.
   Auf dem Phone steht die Beschriftung allein in der ersten Zeile, darunter
   Formel · Zahl · Einheit — die Zahl- und Einheitenspalte bleiben bündig. */
.g-erg-raster {
  --erg-frml: 300px;
  --erg-zahl: 120px;
  --erg-einh: 84px;
}
.g-erg-raster .g-result-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) var(--erg-frml) var(--erg-zahl) var(--erg-einh);
  column-gap: 12px;
  row-gap: 3px;
  align-items: center;
}
.g-erg-raster .g-result-row > .g-result-lbl { grid-column: 1; min-width: 0; }
.g-erg-raster .g-result-row > .frml {
  grid-column: 2;
  justify-self: start;
  max-width: 100%;
  white-space: normal;
  margin: 0;
}
.g-erg-raster .g-result-row > .g-result-val {
  grid-column: 3 / 5;
  display: grid;
  grid-template-columns: var(--erg-zahl) var(--erg-einh);
  column-gap: 12px;
  min-width: 0;
  text-align: left;
}
.g-erg-raster .g-result-val > .g-rv {
  grid-column: 1;
  justify-self: end;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.g-erg-raster .g-result-val > .g-ru {
  grid-column: 2;
  justify-self: start;
  text-align: left;
  white-space: nowrap;
}
.g-erg-raster .g-result-val > .g-rv.g-rv-text {
  grid-column: 1 / -1;
  justify-self: start;
  text-align: left;
  white-space: normal;
}
.gp-body .g-erg-raster { --erg-frml: 210px; --erg-zahl: 104px; --erg-einh: 72px; }
@media (max-width: 640px) {
  .g-erg-raster { --erg-zahl: 92px; --erg-einh: 80px; }
  .g-erg-raster .g-result-row {
    grid-template-columns: minmax(0, 1fr) var(--erg-zahl) var(--erg-einh);
  }
  .g-erg-raster .g-result-row > .g-result-lbl { grid-column: 1 / -1; }
  .g-erg-raster .g-result-row > .frml { grid-column: 1; }
  .g-erg-raster .g-result-row > .g-result-val { grid-column: 2 / 4; }
}