/* formstube · Controlling · Mobile-Native-Feel
 * ════════════════════════════════════════════════════════════════
 *  - Safe-Area-Insets für iPhone X+ (Notch / Home-Bar)
 *  - 44×44px Mindest-Tap-Targets (iOS HIG)
 *  - 16px font-size auf Inputs (verhindert iOS-Zoom-on-Focus)
 *  - Card-Layout statt horizontale Tabellen-Scrolling unter 700px
 *  - Sticky-Bottom-Save-Bar mit Gradient-Fade
 *  - Floating-Action-Button (Hex)
 *  - Bottom-Toast statt Top-Flash
 *  - Skeleton-Loader-Pattern
 *  - Standalone-Mode-Adjustments (wenn PWA installiert)
 */

/* ─── Safe-Area-Insets ─────────────────────────────────────── */
:root {
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
}

/* ─── PWA-Standalone-Mode ──────────────────────────────────── */
/* Wenn aus Home-Screen geöffnet · iOS/Android · Status-Bar-Bereich abdecken */
@media (display-mode: standalone) {
  body { padding-top: var(--safe-top); }
  /* Nav etwas mehr Atem unter der Status-Bar */
  .ctrl-nav {
    padding-top: calc(var(--safe-top) + 8px) !important;
  }
}

/* ─── Touch-Targets · iOS HIG ≥ 44px ───────────────────────── */
@media (max-width: 820px) {
  .btn,
  button[type=submit],
  button[type=button],
  .mobile-nav-item,
  .nav-burger,
  a.btn-icon-del,
  .ft-links a {
    min-height: 44px;
    min-width: 44px;
    -webkit-tap-highlight-color: rgba(216,255,60,0.18);
  }

  /* Inputs: 16px für iOS-Zoom-Prevention */
  .form-input,
  .form-select,
  .form-textarea,
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="date"],
  input[type="password"],
  input[type="url"],
  select,
  textarea {
    font-size: 16px !important;
    min-height: 48px;
  }
  textarea, .form-textarea { min-height: 96px; }
}

/* ─── Mobile-Tabellen · Card-Layout statt horizontal scroll ─ */
@media (max-width: 700px) {
  table.table {
    border: none;
    display: block;
  }
  table.table thead {
    display: none; /* Header werden bei Card-Layout zu Labels in den Cards */
  }
  table.table tbody { display: block; }
  table.table tr {
    display: block;
    background: rgba(255,255,255,0.025);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 14px 16px;
    margin-bottom: 10px;
  }
  table.table td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 8px 0;
    border: none;
    border-bottom: 1px dashed rgba(255,255,255,0.06);
    text-align: right;
    gap: 12px;
  }
  table.table td:last-child { border-bottom: none; }
  table.table td:before {
    content: attr(data-label);
    font-family: 'Geist Mono', monospace;
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--stone);
    font-weight: 600;
    text-align: left;
  }
  table.table td.actions {
    justify-content: flex-end;
    padding-top: 12px;
  }
  table.table td.actions:before { display: none; }
}

/* ─── Container/Layout · weniger seitliches Padding mobile ─ */
@media (max-width: 600px) {
  .container, .container--narrow {
    padding-left: 16px;
    padding-right: 16px;
  }
  .page-head { margin-bottom: 24px; }
  .page-title { font-size: clamp(28px, 7vw, 38px) !important; }
}

/* ─── Sticky-Bottom-Save-Bar ─────────────────────────────── */
.fs-sticky-save {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, var(--ink, #0A0A0C) 75%, rgba(10,10,12,0));
  padding: 18px var(--margin, 16px) calc(20px + var(--safe-bottom));
  z-index: 90;
  transform: translateY(120%);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  display: none;
}
.fs-sticky-save.is-active { transform: translateY(0); display: block; }
.fs-sticky-save .btn {
  width: 100%;
  justify-content: center;
  min-height: 52px;
  font-size: 1.05rem;
  font-weight: 700;
}

/* ─── Floating-Action-Button (FAB-Hex) ───────────────────── */
.fs-fab {
  position: fixed;
  right: calc(20px + var(--safe-right));
  bottom: calc(20px + var(--safe-bottom));
  width: 64px; height: 64px;
  background: var(--accent, #D8FF3C);
  color: var(--ink, #0A0A0C);
  clip-path: var(--hex-clip, polygon(50% 0%, 94% 25%, 94% 75%, 50% 100%, 6% 75%, 6% 25%));
  display: flex; align-items: center; justify-content: center;
  font-family: 'Mona Sans', sans-serif;
  font-weight: 900; font-size: 2rem; line-height: 1;
  box-shadow: 0 10px 24px rgba(216,255,60,0.35), 0 4px 12px rgba(0,0,0,0.4);
  z-index: 80;
  cursor: pointer;
  border: none;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.15s;
}
.fs-fab:active { transform: scale(0.92); box-shadow: 0 4px 12px rgba(216,255,60,0.4); }
@media (min-width: 900px) { .fs-fab { display: none; } }

/* ─── Bottom-Toast (iOS-Style) ──────────────────────────── */
.fs-toast-wrap {
  position: fixed;
  bottom: calc(20px + var(--safe-bottom));
  left: 50%;
  transform: translateX(-50%) translateY(0);
  z-index: 9000;
  display: flex; flex-direction: column-reverse;
  gap: 8px;
  pointer-events: none;
  max-width: calc(100vw - 32px);
}
.fs-toast {
  background: rgba(20, 21, 26, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--paper, #F0F0F0);
  border: 1px solid rgba(216,255,60,0.3);
  border-radius: 999px;
  padding: 12px 22px;
  font-family: 'Inter', sans-serif;
  font-size: 0.92rem;
  font-weight: 500;
  box-shadow: 0 8px 28px rgba(0,0,0,0.5);
  pointer-events: auto;
  transform: translateY(40px);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s;
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}
.fs-toast.is-visible { transform: translateY(0); opacity: 1; }
.fs-toast--success { border-color: rgba(216,255,60,0.5); }
.fs-toast--error   { border-color: rgba(255,107,107,0.6); color: #FF6B6B; }
.fs-toast--warn    { border-color: rgba(255,184,76,0.6); color: #FFB13C; }

/* ─── Pull-to-Refresh-Indicator ─────────────────────────── */
.fs-ptr {
  position: fixed;
  top: calc(var(--safe-top) + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-60px);
  width: 36px; height: 36px;
  background: var(--ink, #0A0A0C);
  border: 1px solid var(--accent, #D8FF3C);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  z-index: 200;
  transition: transform 0.2s ease-out;
  pointer-events: none;
}
.fs-ptr.is-pulling { transform: translateX(-50%) translateY(0); }
.fs-ptr.is-refreshing .fs-ptr-icon {
  animation: fs-spin 0.9s linear infinite;
}
.fs-ptr-icon {
  width: 14px; aspect-ratio: 1;
  background: var(--accent, #D8FF3C);
  clip-path: var(--hex-clip);
}
@keyframes fs-spin { to { transform: rotate(360deg); } }

/* ─── Swipe-Actions auf Listen-Items ────────────────────── */
.fs-swipeable {
  position: relative;
  overflow: hidden;
  touch-action: pan-y;
}
.fs-swipeable-inner {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.fs-swipeable-actions {
  position: absolute;
  top: 0; bottom: 0; right: 0;
  display: flex;
  align-items: stretch;
}
.fs-swipeable-action {
  display: flex; align-items: center; justify-content: center;
  padding: 0 24px;
  background: #FF6B6B;
  color: var(--ink, #0A0A0C);
  font-family: 'Geist Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  border: none;
  cursor: pointer;
  min-width: 88px;
}

/* ─── Skeleton-Loader ──────────────────────────────────── */
.fs-skeleton {
  background: linear-gradient(90deg,
    rgba(255,255,255,0.04) 0%,
    rgba(255,255,255,0.08) 50%,
    rgba(255,255,255,0.04) 100%);
  background-size: 200% 100%;
  animation: fs-skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: 4px;
  display: block;
}
@keyframes fs-skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ─── Mobile-Nav · Quick-Actions + Gruppierung ─────────── */

/* Quick-Actions · 2 große Tap-Tiles oben im Drawer */
.mn-quick {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 18px 18px 8px;
  border-bottom: 1px solid var(--line);
}
.mn-quick-tile {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 8px;
  padding: 22px 12px;
  background: rgba(216,255,60,0.06);
  border: 1px solid rgba(216,255,60,0.3);
  border-radius: 8px;
  color: var(--paper, #F0F0F0);
  text-decoration: none;
  font-family: 'Mona Sans', sans-serif;
  font-weight: 800;
  font-variation-settings: 'wdth' 115;
  font-size: 0.95rem;
  text-align: center;
  line-height: 1.15;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease-out, transform 0.1s ease-out;
}
.mn-quick-tile:active {
  background: var(--accent, #D8FF3C);
  color: var(--ink, #0A0A0C);
  transform: scale(0.96);
}
.mn-quick-icon { font-size: 1.8rem; line-height: 1; }
.mn-quick-label { font-size: 0.82rem; }

/* Gruppen mit Eyebrow-Header (details/summary für native Collapse) */
.mn-group {
  border-bottom: 1px solid var(--line);
}
.mn-group:last-child { border-bottom: none; }
.mn-group[open] .mn-group-chev { transform: rotate(180deg); }

.mn-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 28px 12px;
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.mn-group-head::-webkit-details-marker { display: none; }
.mn-group-head::marker { display: none; }

.mn-group-label {
  font-family: 'Geist Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent, #D8FF3C);
  font-weight: 700;
}
.mn-group-chev {
  color: var(--stone, #888);
  font-size: 1rem;
  transition: transform 0.2s ease-out;
}

/* Item-Override für Items innerhalb von .mn-group · weniger padding-top */
.mn-group .mobile-nav-item {
  padding-top: 14px;
  padding-bottom: 14px;
  min-height: 52px;
  border-bottom: none !important;
}
.mn-group .mobile-nav-item .mn-num {
  color: var(--stone, #888);
  font-size: 0.9rem;
  font-weight: 500;
}

/* Primary-Item (Cockpit · ohne Gruppe) hervorgehoben */
.mn-primary {
  background: rgba(216,255,60,0.04);
}
.mn-primary .mn-num { color: var(--accent, #D8FF3C) !important; }
.mn-primary .mn-label {
  font-weight: 800 !important;
  font-family: 'Mona Sans', sans-serif !important;
}

/* ─── Install-Banner (für PWA-Install-Aufforderung) ────── */
.fs-install-banner {
  position: fixed;
  top: calc(var(--safe-top) + 12px);
  left: 12px; right: 12px;
  z-index: 90;
  background: var(--ink, #0A0A0C);
  border: 1px solid var(--accent, #D8FF3C);
  border-radius: 8px;
  padding: 14px 18px;
  display: none;
  align-items: center;
  gap: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  color: var(--paper, #F0F0F0);
  box-shadow: 0 12px 32px rgba(0,0,0,0.55);
}
body.pwa-installable .fs-install-banner { display: flex; }
.fs-install-banner .btn { min-height: 44px; padding: 10px 16px; font-size: 0.86rem; flex-shrink: 0; }
.fs-install-banner .close {
  background: transparent; border: none; color: var(--stone, #888);
  font-size: 1.4rem; cursor: pointer; padding: 4px 8px;
  margin-left: auto;
}

/* ═══════════════════════════════════════════════════════════════
 *  CLIENT-VIEW · Kundenansicht (client.php) · Mobile-Refactor
 * ═══════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
  /* Hero-Margin runter */
  .client-hero-head { margin-bottom: 32px !important; }

  /* Donut + Stats · stapeln statt nebeneinander */
  .client-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    margin-bottom: 48px !important;
  }
  /* Donut etwas kleiner, zentriert */
  .client-donut-wrap { max-width: 320px; margin: 0 auto; }
  .client-donut-wrap .hex-donut {
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
  }

  /* Stats-Grid bleibt 2×2 — passt auf Mobile */
  .client-stats-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  /* Stat-Tile leicht reduziert */
  .client-stats-grid .stat-tile { padding: 16px 14px; }
  .client-stats-grid .stat-tile-value { font-size: clamp(28px, 7vw, 40px) !important; }
  .client-stats-grid .stat-tile-label { font-size: 0.62rem; }
  .client-stats-grid .stat-tile-sub { font-size: 0.7rem; line-height: 1.35; }

  /* Stundenguthaben · 3-Spalter → 1-Spalter */
  .client-hcr-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* Marc-Karte · Portrait über Text */
  .client-marc-card { padding: 36px 22px !important; }
  .client-marc-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    text-align: center;
  }
  .client-marc-portrait {
    margin: 0 auto;
    width: 100px !important;
    height: 100px !important;
  }
  .client-marc-card a[href^="mailto"],
  .client-marc-card a[href^="tel"] {
    font-size: 0.98rem !important;
    word-break: break-all;
  }

  /* Recent-Tasks · 3-Spalter (Datum/Titel/Stunden) → stack */
  .client-recent-item {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 18px 18px !important;
  }
  .client-recent-item > div:first-child {
    flex-direction: row !important;
    gap: 16px !important;
    align-items: center;
  }
  .client-recent-item > div:last-child {
    font-size: 1.3rem !important;
    text-align: right;
  }
}

/* ═══════════════════════════════════════════════════════════════
 *  WYSIWYG-EDITOR (invoices.php + quotes.php) · Mobile-Refactor
 * ═══════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
  /* Live-Vorschau-Pane auf Mobile ausblenden — Iframe in winzig macht keinen Sinn.
     Stattdessen erscheint ein „Vorschau im neuen Tab"-Button im Status-Header. */
  body.wy-active .wy-pane {
    display: none !important;
  }
  body.wy-active .wy-shell {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  /* Container-Padding raus, damit Editor mehr Atem hat */
  body.wy-active main > .container,
  body.wy-active .container--wide {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  /* WYSIWYG-Toggle-Hinweis-Text auf Mobile verstecken (nur Button zeigen) */
  body.wy-active .wy-toggle-mode + span { display: none !important; }
}

@media (max-width: 700px) {
  /* Posten-Tabelle im Editor · spezielles Card-Layout mit erkennbaren Feldern */
  body.wy-active table#items-table tr.item-row {
    background: var(--ink-2, #14151a);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 14px 14px 12px;
    margin-bottom: 12px;
    position: relative;
  }
  /* Index-Cell (01/02/03) prominent links oben */
  body.wy-active table#items-table tr.item-row td:first-child {
    position: absolute;
    top: 10px;
    left: 14px;
    padding: 0 !important;
    border: none !important;
    font-family: 'Geist Mono', monospace;
    color: var(--accent) !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.18em;
    font-weight: 700;
    background: transparent;
  }
  body.wy-active table#items-table tr.item-row td:first-child:before { display: none !important; }
  /* X-Button rechts oben */
  body.wy-active table#items-table tr.item-row td.actions {
    position: absolute;
    top: 6px;
    right: 8px;
    padding: 0 !important;
    border: none !important;
    background: transparent;
  }
  body.wy-active table#items-table tr.item-row td.actions .btn-remove-row {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    border-radius: 4px;
    background: rgba(255,107,107,0.1);
    border: 1px solid rgba(255,107,107,0.3);
    font-size: 1.2rem;
    line-height: 1;
  }
  /* Beschreibung als breiter Block, Label oben */
  body.wy-active table#items-table tr.item-row td {
    flex-direction: column !important;
    align-items: stretch !important;
    text-align: left !important;
    padding: 6px 0 !important;
    border-bottom: none !important;
    gap: 4px !important;
  }
  body.wy-active table#items-table tr.item-row td:before {
    text-align: left !important;
    margin-bottom: 2px;
  }
  body.wy-active table#items-table tr.item-row td:nth-child(2) {
    margin-top: 18px; /* Platz für die Nr. oben */
  }
  body.wy-active table#items-table tr.item-row td textarea,
  body.wy-active table#items-table tr.item-row td input {
    width: 100%;
    font-size: 16px !important; /* iOS-Zoom-Schutz */
  }
  /* Posten-Card · 1-Spalter (Marc 2026-05-22: 'Inhalt geht über
     die Card hinaus, Einheit + USt müssen untereinander') */
  body.wy-active table#items-table tr.item-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    position: relative;
  }
  body.wy-active table#items-table tr.item-row td:first-child,
  body.wy-active table#items-table tr.item-row td:nth-child(2),
  body.wy-active table#items-table tr.item-row td:nth-child(3),
  body.wy-active table#items-table tr.item-row td:nth-child(4),
  body.wy-active table#items-table tr.item-row td:nth-child(5),
  body.wy-active table#items-table tr.item-row td:nth-child(6) {
    grid-column: 1 / -1;
  }
  /* Summe-Zeile · prominent als horizontale Strip am Ende */
  body.wy-active table#items-table tr.item-row td:nth-child(7) {
    grid-column: 1 / -1;
    border-top: 1px dashed rgba(255,255,255,0.08) !important;
    padding-top: 12px !important;
    margin-top: 4px;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    text-align: right !important;
  }
  body.wy-active table#items-table tr.item-row td:nth-child(7):before {
    margin-bottom: 0;
    font-size: 0.7rem !important;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--stone) !important;
  }
  /* Summen-Wert in der 7. Zelle prominent als Mona Sans Display */
  body.wy-active table#items-table tr.item-row td:nth-child(7) {
    font-family: 'Mona Sans', sans-serif !important;
    font-weight: 900 !important;
    font-variation-settings: 'wdth' 125;
    font-size: 1.4rem !important;
    color: var(--accent, #D8FF3C) !important;
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
  }

  /* Tfoot (Summen) · sauber gestapelt */
  body.wy-active table#items-table tfoot {
    display: block;
    background: var(--ink);
    border: 1px solid var(--accent);
    border-radius: 6px;
    padding: 14px;
    margin-top: 4px;
  }
  body.wy-active table#items-table tfoot tr { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; }
  body.wy-active table#items-table tfoot td { display: contents; }
  body.wy-active table#items-table tfoot td[colspan] { color: var(--stone); text-align: left !important; }

  /* Form-Actions · sticky am unteren Bildschirmrand */
  body.wy-active .form-actions {
    position: sticky;
    bottom: 0;
    background: linear-gradient(180deg, rgba(10,10,12,0) 0%, var(--ink) 35%);
    padding: 18px 0 calc(var(--safe-bottom, 0px) + 14px);
    margin: 8px -14px 0;
    padding-left: 14px;
    padding-right: 14px;
    z-index: 30;
    border-top: 1px solid rgba(216,255,60,0.18);
  }
  body.wy-active .form-actions .btn-primary {
    flex: 1 1 60%;
    min-height: 52px;
    font-size: 1rem;
  }
  body.wy-active .form-actions .btn-ghost {
    min-height: 52px;
  }

  /* Header-Felder grid--2 & grid--3 → 1-spaltig */
  body.wy-active .grid--2,
  body.wy-active .grid--3 {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  /* Card-Padding mobile reduzieren */
  body.wy-active .card { padding: 18px 16px !important; }
  body.wy-active .card-head { flex-wrap: wrap; gap: 8px; }

  /* „Vorschau im Tab"-Schnellbutton mobile-floating */
  body.wy-active .wy-mobile-preview-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--charcoal);
    border: 1px solid var(--accent);
    border-radius: 4px;
    color: var(--accent);
    font-family: 'Geist Mono', monospace;
    font-size: 0.74rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    margin-bottom: 12px;
  }
}

/* Auf Desktop versteckt — wird nur im Mobile-Editor sichtbar */
.wy-mobile-preview-btn { display: none; }

/* ═══════════════════════════════════════════════════════════════
 *  HEX-NUMBER-PAD · Bottom-Sheet für Mobile-Eingabe
 *  Marc 2026-05-22: 'Mini-Slot-Maschine, superintuitiv'
 *  → Lime-Hex-Tasten in 3×4-Grid, slidet von unten ein
 * ═══════════════════════════════════════════════════════════════ */
.fs-num-pad-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  z-index: 9999;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  align-items: flex-end;
  justify-content: center;
}
.fs-num-pad-overlay.is-open {
  display: flex;
  animation: fs-num-fade-in 0.18s var(--ease-out, cubic-bezier(0.4,0,0.2,1));
}
@keyframes fs-num-fade-in { from { opacity: 0; } to { opacity: 1; } }

.fs-num-pad-sheet {
  background: linear-gradient(180deg, var(--charcoal, #14151A) 0%, var(--ink, #0A0A0C) 100%);
  border-top: 2px solid var(--accent, #D8FF3C);
  border-radius: 16px 16px 0 0;
  max-width: 460px;
  width: 100%;
  padding: 18px 16px calc(env(safe-area-inset-bottom, 0px) + 18px);
  position: relative;
  box-shadow: 0 -24px 64px rgba(0,0,0,0.55);
  animation: fs-num-slide-up 0.26s var(--ease-out, cubic-bezier(0.4,0,0.2,1));
}
@keyframes fs-num-slide-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.fs-num-pad-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.fs-num-pad-title {
  font-family: 'Geist Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent, #D8FF3C);
  font-weight: 700;
}
.fs-num-pad-close {
  background: transparent;
  border: none;
  color: var(--stone, #888);
  font-size: 1.6rem;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  line-height: 1;
  padding: 0;
  min-height: 0 !important;
  min-width: 0 !important;
}
.fs-num-pad-close:hover { color: var(--paper); background: rgba(255,255,255,0.06); }

/* Großer Display oben — zeigt aktuell getippten Wert */
.fs-num-pad-display {
  background: var(--ink, #0A0A0C);
  border: 1px solid rgba(216, 255, 60, 0.25);
  border-radius: 6px;
  padding: 18px 16px;
  text-align: center;
  margin-bottom: 16px;
  font-family: 'Mona Sans', sans-serif;
  font-weight: 900;
  font-variation-settings: 'wdth' 125;
  font-size: 2.4rem;
  letter-spacing: -0.025em;
  color: var(--accent, #D8FF3C);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  min-height: 60px;
}
.fs-num-pad-suffix {
  font-size: 0.6em;
  color: var(--stone, #888);
  margin-left: 6px;
  letter-spacing: 0.04em;
  font-weight: 600;
}

/* 3×4 Grid mit Lime-Hex-Tasten */
.fs-num-pad-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}
.fs-num-pad-key {
  position: relative;
  background: var(--ink, #0A0A0C);
  border: 1px solid var(--line, rgba(255,255,255,0.08));
  color: var(--paper);
  font-family: 'Mona Sans', sans-serif;
  font-weight: 900;
  font-variation-settings: 'wdth' 125;
  font-size: 1.8rem;
  letter-spacing: -0.015em;
  line-height: 1;
  cursor: pointer;
  padding: 0 !important;
  min-height: 60px !important;
  min-width: 0 !important;
  border-radius: 6px;
  transition: all 0.1s var(--ease-out, cubic-bezier(0.4,0,0.2,1));
  user-select: none;
  -webkit-user-select: none;
  font-variant-numeric: tabular-nums;
}
.fs-num-pad-key:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.fs-num-pad-key:active {
  background: var(--accent);
  color: var(--ink);
  border-color: var(--accent);
  transform: scale(0.94);
}
.fs-num-pad-key--sep {
  color: var(--accent);
}
.fs-num-pad-key--del {
  color: #FF6B6B;
  font-size: 1.3rem;
}
.fs-num-pad-key--del:active {
  background: #FF6B6B;
  color: var(--ink);
  border-color: #FF6B6B;
}

/* Action-Row · Abbrechen + Übernehmen */
.fs-num-pad-actions {
  display: flex;
  gap: 10px;
}
.fs-num-pad-cancel {
  flex: 0 0 35%;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--stone);
  font-family: 'Geist Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 14px 12px !important;
  border-radius: 4px;
  cursor: pointer;
  min-height: 52px !important;
  min-width: 0 !important;
  transition: all 0.14s;
}
.fs-num-pad-cancel:hover {
  border-color: var(--paper);
  color: var(--paper);
}
.fs-num-pad-ok {
  flex: 1;
  background: var(--accent);
  border: 1px solid var(--accent);
  color: var(--ink);
  font-family: 'Geist Mono', monospace;
  font-size: 0.84rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 14px 16px !important;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px !important;
  min-width: 0 !important;
  transition: all 0.14s;
}
.fs-num-pad-ok:hover {
  background: #B8E32E;
  border-color: #B8E32E;
  transform: translateY(-1px);
}
.fs-num-pad-ok .btn-icon-hex {
  display: inline-block;
  width: 12px;
  aspect-ratio: 1/1;
  background: var(--ink);
  clip-path: var(--hex-clip);
}

/* ═══════════════════════════════════════════════════════════════
 *  HEX-SLOT-PICKER · Stundeneingabe (Mobile-only)
 *  ─ Zwei vertikale Snap-Scroll-Wheels (h + Viertel)
 *  ─ Mona-Sans-Display-Numbers, Lime-Frame zentral
 *  ─ Quick-Chips für häufige Werte
 * ═══════════════════════════════════════════════════════════════ */
.fs-hours-slot { display: none; }

@media (max-width: 700px) {
  /* Desktop-Input + Help-Text auf Mobile verstecken — der Slot übernimmt */
  .fs-hours-input { display: none !important; }
  .fs-hours-help  { display: none !important; }

  .fs-hours-slot {
    display: block;
    margin-top: 10px;
    background: linear-gradient(180deg, var(--charcoal, #14151A) 0%, var(--ink, #0A0A0C) 100%);
    border: 1px solid var(--line, rgba(255,255,255,0.08));
    border-radius: 8px;
    padding: 18px 14px 16px;
    position: relative;
    overflow: hidden;
  }
  /* Subtiler Hex-Schatten im Hintergrund */
  .fs-hours-slot:before {
    content: '';
    position: absolute;
    top: -40px; right: -50px;
    width: 180px; height: 180px;
    aspect-ratio: 1 / 1;
    background: var(--accent, #D8FF3C);
    clip-path: polygon(50% 0%, 94% 25%, 94% 75%, 50% 100%, 6% 75%, 6% 25%);
    opacity: 0.04;
    pointer-events: none;
  }

  /* Stage = die Bühne mit beiden Wheels + Lime-Frame in der Mitte */
  .fs-hours-slot-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 168px;            /* 3 Items à 56px sichtbar */
    z-index: 1;
  }

  /* Lime-Hex-Frame zentral · markiert das aktive Item */
  .fs-hours-slot-frame {
    position: absolute;
    left: 8px; right: 8px;
    top: 50%;
    transform: translateY(-50%);
    height: 56px;
    border-top: 1.5px solid var(--accent, #D8FF3C);
    border-bottom: 1.5px solid var(--accent, #D8FF3C);
    pointer-events: none;
    background: linear-gradient(90deg, transparent 0%, rgba(216,255,60,0.04) 50%, transparent 100%);
    z-index: 0;
  }

  /* Wheel · scroll-snap-Track */
  .fs-hours-wheel {
    flex: 0 1 92px;
    height: 168px;
    overflow-y: scroll;
    overflow-x: hidden;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    mask-image: linear-gradient(180deg,
      transparent 0%, #000 22%, #000 78%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg,
      transparent 0%, #000 22%, #000 78%, transparent 100%);
    position: relative;
    z-index: 1;
  }
  .fs-hours-wheel::-webkit-scrollbar { display: none; }

  .fs-hours-wheel-track {
    padding: 56px 0;  /* oben + unten ein Item Spacer */
    display: flex;
    flex-direction: column;
  }
  .fs-hours-wheel-item {
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Mona Sans', sans-serif;
    font-weight: 900;
    font-variation-settings: 'wdth' 125;
    font-size: 2.6rem;
    color: var(--stone, #888);
    letter-spacing: -0.03em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    transition: color 0.25s var(--ease-out, cubic-bezier(0.4,0,0.2,1)),
                transform 0.25s var(--ease-out, cubic-bezier(0.4,0,0.2,1)),
                opacity 0.25s var(--ease-out, cubic-bezier(0.4,0,0.2,1));
    scroll-snap-align: center;
    scroll-snap-stop: always;
    opacity: 0.4;
  }
  .fs-hours-wheel-item.is-active {
    color: var(--accent, #D8FF3C);
    opacity: 1;
    transform: scale(1.05);
  }
  .fs-hours-wheel-item.is-near {
    opacity: 0.7;
    color: var(--paper, #F0F0F0);
  }

  .fs-hours-slot-sep {
    font-family: 'Mona Sans', sans-serif;
    font-weight: 900;
    font-size: 2.4rem;
    color: var(--accent, #D8FF3C);
    line-height: 1;
    padding-bottom: 12px;
    z-index: 2;
    position: relative;
  }
  .fs-hours-slot-unit {
    font-family: 'Geist Mono', monospace;
    font-size: 1.05rem;
    letter-spacing: 0.1em;
    color: var(--stone, #888);
    margin-left: 6px;
    text-transform: lowercase;
    align-self: center;
    padding-top: 4px;
  }

  /* Quick-Chips */
  .fs-hours-quick {
    display: flex;
    gap: 6px;
    margin-top: 14px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .fs-hours-quick::-webkit-scrollbar { display: none; }
  .fs-hours-chip {
    flex: 1 0 auto;
    min-width: 60px;
    min-height: 40px;
    background: transparent;
    border: 1px solid var(--line, rgba(255,255,255,0.12));
    color: var(--paper, #F0F0F0);
    font-family: 'Geist Mono', monospace;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.15s var(--ease-out, cubic-bezier(0.4,0,0.2,1));
    padding: 0 12px;
    font-variant-numeric: tabular-nums;
  }
  .fs-hours-chip:hover,
  .fs-hours-chip:active {
    border-color: var(--accent, #D8FF3C);
    color: var(--accent, #D8FF3C);
  }
  .fs-hours-chip.is-active {
    background: var(--accent, #D8FF3C);
    border-color: var(--accent, #D8FF3C);
    color: var(--ink, #0A0A0C);
    font-weight: 700;
  }

  /* Live-Preview unten */
  .fs-hours-preview {
    margin-top: 14px;
    padding: 10px 14px;
    background: rgba(216,255,60,0.06);
    border: 1px solid rgba(216,255,60,0.22);
    border-radius: 4px;
    display: flex;
    align-items: baseline;
    gap: 10px;
  }
  .fs-hours-preview-label {
    font-family: 'Geist Mono', monospace;
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--stone, #888);
  }
  .fs-hours-preview-value {
    font-family: 'Mona Sans', sans-serif;
    font-weight: 900;
    font-variation-settings: 'wdth' 125;
    font-size: 1.5rem;
    color: var(--accent, #D8FF3C);
    letter-spacing: -0.02em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    margin-left: auto;
  }
  .fs-hours-preview-unit {
    font-family: 'Geist Mono', monospace;
    font-size: 0.78rem;
    color: var(--accent, #D8FF3C);
    text-transform: lowercase;
  }
}

/* ═══════════════════════════════════════════════════════════════
 *  HEX-SLOT DATE-PICKER · 3 Wheels (Tag · Monat · Jahr) (Mobile)
 * ═══════════════════════════════════════════════════════════════ */
.fs-date-slot { display: none; }

/* Toggle-Button (Collapsed-Mode) · auf allen Screens versteckt by default,
   wird per JS nur bei Mobile injected wenn data-fs-date-collapsed="true" */
.fs-date-toggle { display: none; }

@media (max-width: 700px) {
  /* Native Date-Input + Helper auf Mobile verstecken — Slot übernimmt */
  .fs-date-input { display: none !important; }
  .fs-date-help  { display: none !important; }

  /* ─── Toggle-Button für Collapsed-Mode ─── */
  .fs-date-slot[data-fs-date-collapsed="true"] ~ .fs-date-toggle,
  .fs-date-toggle {
    display: inline-flex !important;
  }
  .fs-date-toggle {
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    background: var(--ink, #0A0A0C);
    border: 1px solid var(--line, rgba(255,255,255,0.12));
    color: var(--paper);
    width: 100%;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.16s var(--ease-out, cubic-bezier(0.4,0,0.2,1));
    text-align: left;
    min-height: 46px;
    font-family: inherit;
  }
  .fs-date-toggle:hover,
  .fs-date-toggle.is-open {
    border-color: var(--accent, #D8FF3C);
    background: rgba(216, 255, 60, 0.04);
  }
  .fs-date-toggle-hex {
    width: 14px;
    aspect-ratio: 1 / 1;
    background: var(--accent, #D8FF3C);
    clip-path: polygon(50% 0%, 94% 25%, 94% 75%, 50% 100%, 6% 75%, 6% 25%);
    transition: transform 0.3s var(--ease-out, cubic-bezier(0.4,0,0.2,1));
    flex-shrink: 0;
  }
  .fs-date-toggle.is-open .fs-date-toggle-hex {
    transform: rotate(60deg);
  }
  .fs-date-toggle-text {
    flex: 1;
    font-family: 'Mona Sans', sans-serif;
    font-weight: 700;
    font-variation-settings: 'wdth' 115;
    font-size: 1rem;
    color: var(--paper);
    letter-spacing: -0.01em;
  }
  .fs-date-toggle-chev {
    color: var(--accent, #D8FF3C);
    font-size: 0.85rem;
    transition: transform 0.18s;
    flex-shrink: 0;
  }
  .fs-date-toggle.is-open .fs-date-toggle-chev {
    transform: rotate(180deg);
  }

  /* Collapsed: Slot default versteckt, mit .is-open sichtbar */
  .fs-date-slot[data-fs-date-collapsed="true"] {
    display: none;
  }
  .fs-date-slot[data-fs-date-collapsed="true"].is-open {
    display: block;
    margin-top: 8px;
    animation: fs-date-slide-in 0.22s var(--ease-out, cubic-bezier(0.4,0,0.2,1));
  }
  @keyframes fs-date-slide-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* Visual-Styles für BEIDE Modi (collapsed mit .is-open + non-collapsed) */
  .fs-date-slot {
    display: block;
    margin-top: 10px;
    background: linear-gradient(180deg, var(--charcoal, #14151A) 0%, var(--ink, #0A0A0C) 100%);
    border: 1px solid var(--line, rgba(255,255,255,0.08));
    border-radius: 8px;
    padding: 18px 14px 16px;
    position: relative;
    overflow: hidden;
  }
  .fs-date-slot:before {
    content: '';
    position: absolute;
    top: -40px; left: -50px;
    width: 180px; height: 180px;
    aspect-ratio: 1 / 1;
    background: var(--accent, #D8FF3C);
    clip-path: polygon(50% 0%, 94% 25%, 94% 75%, 50% 100%, 6% 75%, 6% 25%);
    opacity: 0.04;
    pointer-events: none;
  }

  /* Stage = 3 Wheels horizontal */
  .fs-date-slot-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 168px;
    z-index: 1;
  }

  /* Lime-Frame zentral · alle 3 Wheels gemeinsam markiert */
  .fs-date-slot-frame {
    position: absolute;
    left: 8px; right: 8px;
    top: 50%;
    transform: translateY(-50%);
    height: 56px;
    border-top: 1.5px solid var(--accent, #D8FF3C);
    border-bottom: 1.5px solid var(--accent, #D8FF3C);
    pointer-events: none;
    background: linear-gradient(90deg, transparent 0%, rgba(216,255,60,0.04) 50%, transparent 100%);
    z-index: 0;
  }

  .fs-date-wheel {
    flex: 1 1 0;
    height: 168px;
    overflow-y: scroll;
    overflow-x: hidden;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    mask-image: linear-gradient(180deg,
      transparent 0%, #000 22%, #000 78%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg,
      transparent 0%, #000 22%, #000 78%, transparent 100%);
    position: relative;
    z-index: 1;
  }
  .fs-date-wheel::-webkit-scrollbar { display: none; }
  /* Tag · enger / Monat · normal / Jahr · enger */
  .fs-date-wheel[data-wheel="day"]   { flex: 0 1 70px; }
  .fs-date-wheel[data-wheel="month"] { flex: 0 1 96px; }
  .fs-date-wheel[data-wheel="year"]  { flex: 0 1 100px; }

  .fs-date-wheel-track {
    padding: 56px 0;
    display: flex;
    flex-direction: column;
  }
  .fs-date-wheel-item {
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Mona Sans', sans-serif;
    font-weight: 900;
    font-variation-settings: 'wdth' 125;
    font-size: 1.7rem;
    color: var(--stone, #888);
    letter-spacing: -0.02em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    transition: color 0.25s var(--ease-out, cubic-bezier(0.4,0,0.2,1)),
                transform 0.25s var(--ease-out, cubic-bezier(0.4,0,0.2,1)),
                opacity 0.25s var(--ease-out, cubic-bezier(0.4,0,0.2,1));
    scroll-snap-align: center;
    scroll-snap-stop: always;
    opacity: 0.4;
  }
  /* Monat-Items kleiner weil länger */
  .fs-date-wheel[data-wheel="month"] .fs-date-wheel-item {
    font-family: 'Geist Mono', monospace;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.08em;
  }
  .fs-date-wheel-item.is-active {
    color: var(--accent, #D8FF3C);
    opacity: 1;
    transform: scale(1.06);
  }
  .fs-date-wheel-item.is-near {
    opacity: 0.6;
    color: var(--paper, #F0F0F0);
  }

  /* Quick-Chips */
  .fs-date-quick {
    display: flex;
    gap: 6px;
    margin-top: 14px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .fs-date-quick::-webkit-scrollbar { display: none; }
  .fs-date-chip {
    flex: 1 0 auto;
    min-width: 64px;
    min-height: 40px;
    background: transparent;
    border: 1px solid var(--line, rgba(255,255,255,0.12));
    color: var(--paper, #F0F0F0);
    font-family: 'Geist Mono', monospace;
    font-size: 0.74rem;
    letter-spacing: 0.06em;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.15s var(--ease-out, cubic-bezier(0.4,0,0.2,1));
    padding: 0 10px;
    text-transform: uppercase;
  }
  .fs-date-chip:hover,
  .fs-date-chip:active {
    border-color: var(--accent, #D8FF3C);
    color: var(--accent, #D8FF3C);
  }
  .fs-date-chip.is-active {
    background: var(--accent, #D8FF3C);
    border-color: var(--accent, #D8FF3C);
    color: var(--ink, #0A0A0C);
    font-weight: 700;
  }

  /* Live-Preview unten */
  .fs-date-preview {
    margin-top: 14px;
    padding: 10px 14px;
    background: rgba(216,255,60,0.06);
    border: 1px solid rgba(216,255,60,0.22);
    border-radius: 4px;
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
  }
  .fs-date-preview-label {
    font-family: 'Geist Mono', monospace;
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--stone, #888);
  }
  .fs-date-preview-value {
    font-family: 'Mona Sans', sans-serif;
    font-weight: 800;
    font-variation-settings: 'wdth' 115;
    font-size: 1rem;
    color: var(--accent, #D8FF3C);
    letter-spacing: -0.01em;
    line-height: 1.25;
    margin-left: auto;
    text-align: right;
  }
}

/* ═══════════════════════════════════════════════════════════════
 *  MOBILE-EDITOR-MAGIE · invoices.php + quotes.php (Mobile)
 *  Verspielt aber kompakt — Brand-Mikro-Interaktionen
 * ═══════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
  /* ─── Section-Hex-Marker vor Card-Titles ─── */
  body.wy-active .card-title::before {
    content: '';
    display: inline-block;
    width: 9px;
    aspect-ratio: 1 / 1;
    background: var(--accent, #D8FF3C);
    clip-path: polygon(50% 0%, 94% 25%, 94% 75%, 50% 100%, 6% 75%, 6% 25%);
    margin-right: 8px;
    vertical-align: middle;
    transform: translateY(-1px);
  }

  /* ─── Hex-Posten-Number · Lime-Hex mit Nummer drin ─── */
  body.wy-active table#items-table tr.item-row td:first-child {
    /* Override des absolute-Layouts aus dem alten Mobile-Editor */
    width: auto !important;
    position: static !important;
    background: transparent !important;
    color: inherit !important;
    padding: 0 !important;
    border: none !important;
    grid-column: 1 / -1 !important;
    display: flex !important;
    align-items: center;
    margin-bottom: 4px;
  }
  body.wy-active table#items-table tr.item-row td:first-child::before { display: none !important; }
  body.wy-active .fs-hex-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    aspect-ratio: 1 / 1;
    background: var(--accent, #D8FF3C);
    clip-path: polygon(50% 0%, 94% 25%, 94% 75%, 50% 100%, 6% 75%, 6% 25%);
    color: var(--ink, #0A0A0C);
    font-family: 'Geist Mono', monospace;
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    transition: transform 0.25s var(--ease-out, cubic-bezier(0.4,0,0.2,1));
  }
  body.wy-active table#items-table tr.item-row:hover .fs-hex-num,
  body.wy-active table#items-table tr.item-row.is-swipe-armed .fs-hex-num {
    transform: rotate(60deg) scale(1.08);
  }

  /* Lösch-Button absolute oben rechts in der Card (Marc 2026-05-22:
     'X wirkt deplaziert' → klar als Card-Action positionieren, nicht
     als verlorene Bottom-Row) */
  body.wy-active table#items-table tr.item-row td.actions {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    grid-column: unset !important;
    width: auto !important;
    z-index: 2;
    display: block !important;
    gap: 0 !important;
  }
  /* alten ::after-Wischhinweis raus — er war Teil der Bottom-Action-Row */
  body.wy-active table#items-table tr.item-row td.actions::after {
    display: none !important;
  }
  /* X-Button selbst: klares Brand-Icon mit etwas dezenterer Border */
  body.wy-active table#items-table tr.item-row td.actions .btn-icon-del,
  body.wy-active table#items-table tr.item-row td.actions .btn-remove-row {
    width: 30px !important;
    height: 30px !important;
    min-height: 0 !important;
    min-width: 0 !important;
    background: rgba(10, 10, 12, 0.7) !important;
    border: 1px solid rgba(255, 107, 107, 0.4) !important;
    border-radius: 50% !important;
    padding: 0 !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  }
  /* Beschreibungs-Cell etwas mehr padding-right damit Text nicht
     unter den absoluten X-Button läuft */
  body.wy-active table#items-table tr.item-row td:nth-child(2) {
    padding-right: 44px !important;
  }
  /* Wisch-Hinweis-Tail entfernt — Swipe-Delete deaktiviert, X-Btn reicht */
  body.wy-active table#items-table tr.item-row::after {
    display: none !important;
  }
  /* (Hinweis: Lösch-Btn Position oben rechts absolut + Wisch-Hint als
     Card-Tail wird weiter unten gesetzt — diese Definition hier ist
     redundant/widersprüchlich und wird durch späteren Block überschrieben.) */

  /* Swipe-armed State · Lime-Bg-Indicator */
  body.wy-active table#items-table tr.item-row.is-swipe-armed {
    background: rgba(255, 107, 107, 0.08) !important;
    border-color: rgba(255, 107, 107, 0.4) !important;
  }

  /* ─── Number-Picker · Display + Quick-Chips + Hex-Pad-Trigger ──
     Marc 2026-05-22: 'Eingabe macht keinen Spaß, brauche Mini-Slot'
     → Stepper raus, stattdessen großer Display-Button + Quick-Chips +
       Tap-to-Open Hex-Number-Pad als Bottom-Sheet
  */
  .fs-num-input--hidden {
    position: absolute !important;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }
  .fs-num-picker {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  /* Großer Touch-Display · Mona-Sans-Display, tappable */
  .fs-num-display {
    background: var(--ink, #0A0A0C);
    border: 1px solid var(--line, rgba(255,255,255,0.12));
    border-radius: 5px;
    padding: 14px 12px;
    color: var(--accent, #D8FF3C);
    font-family: 'Mona Sans', sans-serif;
    font-weight: 900;
    font-variation-settings: 'wdth' 125;
    font-size: 1.5rem;
    letter-spacing: -0.025em;
    line-height: 1.05;
    text-align: center;
    cursor: pointer;
    transition: all 0.18s var(--ease-out, cubic-bezier(0.4,0,0.2,1));
    min-height: 52px;
    width: 100%;
    font-variant-numeric: tabular-nums;
  }
  .fs-num-display:hover,
  .fs-num-display:active {
    border-color: var(--accent, #D8FF3C);
    background: rgba(216, 255, 60, 0.04);
  }
  /* Quick-Value-Chips · 1-Zeile horizontal scrollbar */
  .fs-num-chips {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0;
  }
  .fs-num-chips::-webkit-scrollbar { display: none; }
  .fs-num-chip {
    flex: 0 1 auto;
    min-width: 0 !important;
    min-height: 32px !important;
    padding: 5px 10px !important;
    background: transparent;
    border: 1px solid var(--line, rgba(255,255,255,0.12));
    color: var(--paper);
    font-family: 'Geist Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.14s var(--ease-out, cubic-bezier(0.4,0,0.2,1));
    white-space: nowrap;
    line-height: 1.1;
  }
  .fs-num-chip:hover,
  .fs-num-chip:active {
    border-color: var(--accent);
    color: var(--accent);
  }
  .fs-num-chip.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--ink);
    font-weight: 700;
  }

  /* ─── Chip-Rows (Einheit + USt) · kompakt + 1-Zeile ─── */
  .fs-chip-row {
    display: flex;
    gap: 3px;
    margin-bottom: 4px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .fs-chip-row::-webkit-scrollbar { display: none; }
  .fs-chip {
    flex: 0 1 auto;
    min-width: 0 !important;
    min-height: 30px !important;
    padding: 4px 8px !important;
    background: transparent;
    border: 1px solid var(--line, rgba(255,255,255,0.12));
    color: var(--paper, #F0F0F0);
    font-family: 'Geist Mono', monospace;
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.14s var(--ease-out, cubic-bezier(0.4,0,0.2,1));
    white-space: nowrap;
    line-height: 1.1;
  }
  .fs-chip:hover,
  .fs-chip:active {
    border-color: var(--accent, #D8FF3C);
    color: var(--accent, #D8FF3C);
  }
  .fs-chip.is-active {
    background: var(--accent, #D8FF3C);
    border-color: var(--accent, #D8FF3C);
    color: var(--ink, #0A0A0C);
    font-weight: 700;
  }

  /* Custom-Text-Input unter den Chips wenn Einheit nicht in Standard-Liste */
  body.wy-active table#items-table tr.item-row td input[name*="[unit]"] {
    font-size: 0.82rem;
    padding: 6px 8px;
    min-height: 36px;
    margin-top: 2px;
  }
  body.wy-active table#items-table tr.item-row td input[name*="[vat_rate]"] {
    font-size: 0.82rem;
    padding: 6px 8px;
    min-height: 36px;
    margin-top: 2px;
  }

  /* ─── Live-Summen-Pulse ─── */
  body.wy-active .line-sum {
    transition: color 0.4s, background 0.4s;
  }
  body.wy-active .line-sum.is-pulse {
    animation: fs-sum-pulse 0.6s var(--ease-out, cubic-bezier(0.4,0,0.2,1));
  }
  @keyframes fs-sum-pulse {
    0%   { color: var(--paper); transform: scale(1); }
    30%  { color: var(--accent, #D8FF3C); transform: scale(1.06); }
    100% { color: var(--accent, #D8FF3C); transform: scale(1); }
  }

  /* ─── Gesamtsumme im tfoot · Mona-Sans-Display ─── */
  body.wy-active table#items-table tfoot tr:last-child td:last-child {
    font-family: 'Mona Sans', sans-serif !important;
    font-weight: 900 !important;
    font-variation-settings: 'wdth' 125;
    font-size: 1.8rem !important;
    letter-spacing: -0.025em;
    color: var(--accent, #D8FF3C) !important;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  body.wy-active table#items-table tfoot tr:last-child td:first-child {
    font-family: 'Geist Mono', monospace;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    color: var(--stone, #888);
    font-weight: 700;
  }
  body.wy-active table#items-table tfoot {
    padding: 18px !important;
    background: linear-gradient(135deg, var(--ink, #0A0A0C) 0%, rgba(216,255,60,0.04) 100%) !important;
  }

  /* ─── Add-Posten-Button als großer Hex-Plus ─── */
  body.wy-active #btn-add-row {
    width: 100%;
    margin-top: 18px !important;
    padding: 16px;
    background: transparent;
    border: 1.5px dashed var(--line, rgba(255,255,255,0.18));
    color: var(--accent, #D8FF3C);
    font-family: 'Geist Mono', monospace;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    transition: all 0.18s var(--ease-out, cubic-bezier(0.4,0,0.2,1));
    position: relative;
    overflow: hidden;
  }
  body.wy-active #btn-add-row::before {
    content: '';
    width: 18px;
    aspect-ratio: 1 / 1;
    background: var(--accent, #D8FF3C);
    clip-path: polygon(50% 0%, 94% 25%, 94% 75%, 50% 100%, 6% 75%, 6% 25%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s var(--ease-out, cubic-bezier(0.4,0,0.2,1));
    flex-shrink: 0;
  }
  body.wy-active #btn-add-row:hover,
  body.wy-active #btn-add-row:active {
    border-color: var(--accent, #D8FF3C);
    background: rgba(216, 255, 60, 0.04);
  }
  body.wy-active #btn-add-row:hover::before,
  body.wy-active #btn-add-row:active::before {
    transform: rotate(60deg) scale(1.1);
  }

  /* ─── Save-Bar Lime-Pulse beim Submit ─── */
  body.wy-active .form-actions.is-saving-pulse {
    animation: fs-save-pulse 0.7s var(--ease-out, cubic-bezier(0.4,0,0.2,1));
  }
  @keyframes fs-save-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(216, 255, 60, 0.5), inset 0 0 0 0 rgba(216,255,60,0); }
    50%  { box-shadow: 0 0 24px 4px rgba(216, 255, 60, 0.35), inset 0 1px 0 0 rgba(216,255,60,0.4); }
    100% { box-shadow: 0 0 0 0 rgba(216, 255, 60, 0), inset 0 0 0 0 rgba(216,255,60,0); }
  }

  /* ─── Item-Row: Container-Smooth-Transition für Swipe ─── */
  body.wy-active table#items-table tr.item-row {
    will-change: transform;
    user-select: none;
    -webkit-user-select: none;
  }

  /* ═══════════════════════════════════════════════════════════
   *  AUFRÄUMUNG · Stepper, Chips, Custom-Input
   * ═══════════════════════════════════════════════════════════ */

  /* Stepper mit klarem Label drüber (das Mengen-/Preis-Label wird angezeigt) */
  body.wy-active table#items-table tr.item-row td:nth-child(3)::before,
  body.wy-active table#items-table tr.item-row td:nth-child(5)::before {
    margin-bottom: 6px;
    font-size: 0.62rem !important;
    color: var(--stone) !important;
  }

  /* Custom-Input nur zeigen wenn KEIN Standard-Chip aktiv (via JS .is-custom-mode) */
  body.wy-active table#items-table tr.item-row td input[name*="[unit]"],
  body.wy-active table#items-table tr.item-row td input[name*="[vat_rate]"] {
    display: none;
  }
  body.wy-active table#items-table tr.item-row td.is-custom-mode input[name*="[unit]"],
  body.wy-active table#items-table tr.item-row td.is-custom-mode input[name*="[vat_rate]"] {
    display: block;
    margin-top: 4px;
  }
  /* „+ Andere"-Chip am Ende der Chip-Reihe */
  .fs-chip--other {
    border-style: dashed !important;
    color: var(--stone) !important;
  }
  .fs-chip--other.is-active {
    background: rgba(216,255,60,0.1) !important;
    color: var(--accent) !important;
    border-style: solid !important;
  }

  /* ═══════════════════════════════════════════════════════════
   *  POSITION-LISTE · vertikal stacked (Marc 2026-05-22:
   *  'Swiper raus, Wischen kollidiert mit Löschen + tfoot
   *  verbreitert sich')
   * ═══════════════════════════════════════════════════════════ */
  body.wy-active table#items-table {
    display: block !important;
    overflow: visible !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  body.wy-active table#items-table thead { display: none !important; }
  body.wy-active table#items-table tbody#items-tbody {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  body.wy-active table#items-table tr.item-row {
    display: grid !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 12px !important;
    padding: 16px 14px !important;
    box-sizing: border-box;
    /* keine flex, kein scroll-snap-align mehr — pure block list */
  }
  /* Posten-Cells · gleiche Padding-Logik wie zuvor (1-Spalter) */
  body.wy-active table#items-table tr.item-row td {
    padding: 4px 0 !important;
    gap: 2px !important;
  }
  body.wy-active table#items-table tr.item-row td:before {
    margin-bottom: 0 !important;
    font-size: 0.6rem !important;
  }

  /* Beschreibungsfeld auf Mobile größer (Marc 2026-05-22: 'wir haben jetzt
     in den Posten den Platz, um das Beschreibungsfeld größer zu machen') */
  body.wy-active table#items-table tr.item-row td textarea[name*="[description]"] {
    min-height: 110px !important;
    font-size: 16px !important;
    padding: 12px !important;
    line-height: 1.45;
    background: var(--ink, #0A0A0C);
    border-color: var(--line);
  }
  body.wy-active table#items-table tr.item-row td textarea[name*="[description]"]:focus {
    border-color: var(--accent);
    background: rgba(216, 255, 60, 0.025);
    box-shadow: 0 0 0 3px rgba(216, 255, 60, 0.08);
  }

  /* KI-Item-Btn pro Position auf Mobile verstecken (Marc 2026-05-22:
     'KI ausfüllen deaktivieren bei den Positionen' · Komplett-Generator
     im Editor-Header bleibt erhalten) */
  body.wy-active .fs-ai-item-btn {
    display: none !important;
  }
  /* Tfoot · sauber + fix-Width (kein Aufblähen mehr) */
  body.wy-active table#items-table tfoot {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 14px !important;
    box-sizing: border-box;
  }
  body.wy-active table#items-table tfoot tr {
    display: flex !important;
    justify-content: space-between;
    align-items: baseline;
    width: 100% !important;
    box-sizing: border-box;
    padding: 6px 14px !important;
  }
  body.wy-active table#items-table tfoot tr td {
    padding: 0 !important;
    border: none !important;
    display: block !important;
    background: transparent !important;
  }
  body.wy-active table#items-table tfoot tr td:before {
    display: none !important;  /* keine Mini-Labels in der Total-Row */
  }

  /* ── Position-Nav-Header · STICKY oben (smooth scroll-Nav) ── */
  .fs-pos-header {
    position: sticky;
    top: 0;
    z-index: 30;
    background: linear-gradient(180deg, var(--ink, #0A0A0C) 0%, var(--ink, #0A0A0C) 80%, rgba(10,10,12,0.85) 100%);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    padding: 10px 4px !important;
    margin: 0 -4px 10px !important;
    border-bottom: 1px solid rgba(216, 255, 60, 0.18);
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding: 0 2px;
    gap: 10px;
    flex-wrap: nowrap;
  }
  .fs-pos-label {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-family: 'Geist Mono', monospace;
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--stone);
    flex-shrink: 0;
  }
  .fs-pos-label strong {
    color: var(--accent);
    font-weight: 700;
    font-size: 0.78rem;
  }

  /* Dots-Strip · 1-Zeile horizontal, scrollbar wenn viele */
  .fs-pos-dots {
    display: flex !important;
    align-items: center;
    gap: 6px;
    flex: 1 1 auto;
    justify-content: center;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    padding: 4px 2px;
    min-width: 0;
  }
  .fs-pos-dots::-webkit-scrollbar { display: none; }

  /* Dots · WIRKLICH klein (Button-Reset wegen .btn-min-height-Override) */
  .fs-pos-dot {
    /* Mobile-Button-Override killen */
    min-height: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: var(--line) !important;
    /* Eigene Größe */
    width: 9px !important;
    height: 9px !important;
    flex-shrink: 0 !important;
    aspect-ratio: 1 / 1 !important;
    clip-path: polygon(50% 0%, 94% 25%, 94% 75%, 50% 100%, 6% 75%, 6% 25%);
    transition: background 0.2s, transform 0.2s !important;
    cursor: pointer;
    font-size: 0 !important;
    line-height: 0 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    border-radius: 0 !important;
  }
  .fs-pos-dot.is-active {
    background: var(--accent) !important;
    transform: scale(1.5);
  }

  /* Nav-Buttons · kompakter */
  .fs-pos-nav {
    display: inline-flex;
    gap: 4px;
    flex-shrink: 0;
  }
  .fs-pos-nav-btn {
    min-height: 0 !important;
    min-width: 0 !important;
    background: transparent !important;
    border: 1px solid var(--line) !important;
    color: var(--paper) !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 3px !important;
    font-family: 'Mona Sans', sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    line-height: 1 !important;
    cursor: pointer;
    transition: all 0.14s !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
  .fs-pos-nav-btn:hover,
  .fs-pos-nav-btn:active {
    border-color: var(--accent) !important;
    color: var(--accent) !important;
  }
  .fs-pos-nav-btn:disabled {
    opacity: 0.25;
    cursor: not-allowed;
  }

  /* ═══════════════════════════════════════════════════════════
   *  STATUS-AKTIONEN-CARD · aufgeräumt als Chip-Grid
   * ═══════════════════════════════════════════════════════════ */
  .fs-status-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px !important;
  }
  .fs-status-grid form { display: contents; }
  .fs-status-grid .btn {
    width: 100%;
    padding: 14px 12px;
    background: transparent;
    border: 1px solid var(--line);
    color: var(--paper);
    font-family: 'Geist Mono', monospace;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.14s;
    text-decoration: none;
    cursor: pointer;
  }
  .fs-status-grid .btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(216,255,60,0.04);
  }
}

/* Status-Grid auch auf Desktop nutzen (cleaner als horizontale Wrap-Liste) */
.fs-status-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.fs-status-grid form { display: contents; }
@media (min-width: 701px) {
  .fs-status-grid .btn {
    width: 100%;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
}

/* ═══════════════════════════════════════════════════════════
 *  KI-ASSISTENT · Modal + Mini-Trigger pro Position
 * ═══════════════════════════════════════════════════════════ */
.fs-ai-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 9999;
  backdrop-filter: blur(8px);
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.fs-ai-modal-overlay.is-open {
  display: flex;
  animation: fs-ai-fade-in 0.22s var(--ease-out, cubic-bezier(0.4,0,0.2,1));
}
@keyframes fs-ai-fade-in { from { opacity: 0; } to { opacity: 1; } }
.fs-ai-modal {
  background: var(--charcoal, #14151A);
  border: 1px solid var(--accent, #D8FF3C);
  border-radius: 6px;
  max-width: 560px;
  width: 100%;
  padding: 26px 24px 22px;
  position: relative;
  box-shadow: 0 24px 64px rgba(0,0,0,0.5);
  animation: fs-ai-pop-in 0.32s var(--ease-out, cubic-bezier(0.4,0,0.2,1));
}
@keyframes fs-ai-pop-in {
  from { transform: scale(0.92) translateY(20px); opacity: 0; }
  to   { transform: scale(1) translateY(0);     opacity: 1; }
}
.fs-ai-modal-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}
.fs-ai-modal-hex {
  width: 18px;
  aspect-ratio: 1 / 1;
  background: var(--accent, #D8FF3C);
  clip-path: polygon(50% 0%, 94% 25%, 94% 75%, 50% 100%, 6% 75%, 6% 25%);
  flex-shrink: 0;
}
.fs-ai-modal-eyebrow {
  font-family: 'Geist Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent, #D8FF3C);
  font-weight: 700;
}
.fs-ai-modal-title {
  font-family: 'Mona Sans', sans-serif;
  font-weight: 900;
  font-variation-settings: 'wdth' 125;
  font-size: 1.4rem;
  letter-spacing: -0.025em;
  margin: 6px 0 4px;
  color: var(--paper, #F0F0F0);
}
.fs-ai-modal-sub {
  color: var(--fg-mute, #aaa);
  font-size: 0.86rem;
  margin-bottom: 14px;
  line-height: 1.45;
}
.fs-ai-modal-textarea {
  width: 100%;
  min-height: 110px;
  font-family: 'Geist Mono', monospace;
  font-size: 0.92rem;
  background: var(--ink, #0A0A0C);
  border: 1px solid var(--line);
  color: var(--paper);
  padding: 12px 14px;
  border-radius: 3px;
  resize: vertical;
  line-height: 1.5;
}
.fs-ai-modal-textarea:focus {
  border-color: var(--accent);
  outline: none;
}
.fs-ai-modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.fs-ai-modal-status {
  margin-top: 12px;
  font-family: 'Geist Mono', monospace;
  font-size: 0.78rem;
  color: var(--stone);
  min-height: 18px;
}
.fs-ai-modal-status.is-loading { color: var(--accent); }
.fs-ai-modal-status.is-error   { color: #FF6B6B; }
.fs-ai-modal-status.is-success { color: #66FFB3; }
.fs-ai-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: transparent;
  border: none;
  color: var(--stone);
  font-size: 1.4rem;
  cursor: pointer;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
}
.fs-ai-modal-close:hover { color: var(--paper); background: rgba(255,255,255,0.06); }

/* KI-Trigger pro Position · klein neben dem Hex-Num */
.fs-ai-item-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--stone);
  font-family: 'Geist Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.14s;
  margin-left: auto;
}
.fs-ai-item-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.fs-ai-item-btn::before {
  content: '✨';
  font-size: 0.8rem;
}