-Block — nativ, ohne JS. (login-mobil.html)
* ------------------------------------------------------------------------- */
.ff-install {
width: 100%;
margin-top: 0.25rem;
font-size: 0.8rem;
}
.ff-install__summary {
cursor: pointer;
list-style: none;
text-align: center;
padding: 0.4rem;
color: var(--text-muted);
user-select: none;
}
.ff-install__summary::-webkit-details-marker { display: none; }
.ff-install__summary:hover { color: var(--text-primary); }
.ff-install[open] .ff-install__summary { color: var(--text-primary); }
.ff-install__body {
margin-top: 0.5rem;
display: flex;
flex-direction: column;
gap: 0.6rem;
padding: 0.85rem 1rem;
border: 1px solid var(--border);
border-radius: var(--ff-radius-md);
background-color: var(--bg-elevated);
color: var(--text-secondary);
line-height: 1.5;
text-align: left;
}
.ff-install__os { color: var(--ff-accent-bright); }
.ff-install__tip { color: var(--text-muted); font-size: 0.75rem; }
/* ===========================================================================
* Mobile-Politur (15.06.2026): iOS-Zoom-Schutz + responsive Admin-Tabellen.
* -----------------------------------------------------------------------------
* Zwei Beschwerden vom Handy adressiert:
* 1. "Heranzoomen" beim Tippen in manche Felder. iOS Safari zoomt ein
* Eingabefeld beim Fokus automatisch heran, sobald dessen Schriftgroesse
* < 16px ist. Die Design-Skala nutzt 13-15px (--text-sm/base), viele
* Admin-Felder erben zusaetzlich 13px aus text-sm-Labels -> staendiges
* Heranzoomen. Fix: Formularfelder unter dem Drawer-Breakpoint (<1024px)
* auf GENAU 16px setzen — auch die wenigen absichtlich groesseren Felder
* (z.B. .text-lg am Handy-Login) werden hier auf 16px vereinheitlicht; das
* ist unkritisch, weil 16px die Zoom-Schwelle exakt erreicht (kein Zoom)
* und am Handy ausreichend gross ist. Bewusst KEIN user-scalable=no —
* Pinch-Zoom (A11y) bleibt erhalten.
* 2. "Felder passen nicht aufs Handy / man kann extrem weit rauszoomen."
* Ursache: die breiten .ff-table-Tabellen liefen ueber den Viewport
* hinaus, der Browser liess deshalb weit rauszoomen und alles wurde
* winzig. Fix: unter <1024px wird jede Tabellenzeile zu einer Karte
* (Label links aus data-label, Wert rechts). Nichts laeuft mehr ueber,
* damit verschwindet das Rauszoomen und die Schrift bleibt lesbar.
* ========================================================================= */
/* (1) iOS-Zoom-Schutz: Formularfelder auf dem Handy/Tablet >= 16px. */
@media (max-width: 1023.98px) {
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
select,
textarea,
.ff-input,
.ff-select,
.ff-mailfeld {
font-size: 16px;
}
}
/* (2) Responsive Tabellen: unter dem Drawer-Breakpoint (<1024px) wird jede
* .ff-table-Zeile zu einer Karte. Voraussetzung fuer beschriftete Zellen:
* jede | traegt data-label="Spaltenname". Zellen ohne data-label fallen
* sauber auf "nur Wert" zurueck (kein leeres Label). Die Aktions-Zelle
* (.ff-table__action-col) wird volle Breite mit groesseren Touch-Buttons. */
@media (max-width: 1023.98px) {
.ff-table {
display: block;
width: 100%;
font-size: var(--text-base);
}
/* Spaltenkopf a11y-konform verstecken (nicht display:none -> bleibt fuer
Screenreader/aria-sort erhalten, nimmt aber keinen Platz). */
.ff-table thead {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.ff-table tbody { display: block; }
.ff-table tbody tr {
display: block;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--ff-radius-lg);
padding: 4px 14px;
margin-bottom: 10px;
box-shadow: var(--shadow-1);
}
/* Kein Hover-Background auf Touch (sonst "klebt" der letzte Tap). */
.ff-table tbody tr:hover { background: var(--bg-elevated); }
.ff-table tbody td {
display: block;
position: relative;
padding: 9px 0 9px 42%;
border-bottom: 1px solid var(--border);
border-top: none;
text-align: right;
min-height: 22px;
}
.ff-table tbody tr td:last-child { border-bottom: none; }
.ff-table tbody td::before {
content: attr(data-label);
position: absolute;
left: 0;
top: 9px;
width: 38%;
text-align: left;
font-size: var(--text-sm);
font-weight: 600;
color: var(--text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Zellen ohne Label: kein Platzhalter-Doppelpunkt, Wert nutzt volle Breite. */
.ff-table tbody td:not([data-label]),
.ff-table tbody td[data-label=""] {
padding-left: 0;
text-align: left;
}
.ff-table tbody td:not([data-label])::before,
.ff-table tbody td[data-label=""]::before { content: ""; }
/* Aktions-Zelle: volle Breite, kein Label, groessere Touch-Buttons. */
.ff-table tbody td.ff-table__action-col {
width: auto;
min-width: 0;
padding: 12px 0 6px;
text-align: left;
}
.ff-table tbody td.ff-table__action-col::before { content: ""; }
.ff-table__action-grid { gap: 8px; }
/* min-height 44px = Apple-HIG-Touch-Target (vorher ~34px). */
.ff-table__action-btn { min-height: 44px; padding: 12px 10px; font-size: 13px; }
/* Block-Zelle: fuer lange Freitext-Spalten (z.B. Audit-Beschreibung) das
Label ueber den Wert stellen und den Wert die volle Breite nutzen lassen,
statt ihn in den schmalen rechten Streifen zu quetschen. Opt-in per Klasse. */
.ff-table tbody td.ff-table__cell--block {
padding-left: 0;
text-align: left;
}
.ff-table tbody td.ff-table__cell--block::before {
position: static;
display: block;
width: auto;
margin-bottom: 4px;
white-space: normal;
}
/* Aufklappbare Tabellen (Summen-Zeile + Detail-Zeile pro | -Eintrag):
die KARTE umschliesst das ganze tbody, damit die ausgeklappte Detailzeile
Teil derselben Karte bleibt und nicht als zweite, losgeloeste Karte
erscheint. Greift nur fuer die markierten Tabellen, damit die Single-tbody-
Listen (personen/lager/produkte) je Zeile eine Karte bleiben. */
.ff-table--ausklappbar tbody {
display: block;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--ff-radius-lg);
margin-bottom: 10px;
box-shadow: var(--shadow-1);
}
.ff-table--ausklappbar tbody tr {
background: transparent;
border: 0;
border-radius: 0;
margin: 0;
box-shadow: none;
}
/* Mehrere Rollen-Pills im Kartenmodus rechtsbuendig mit Luft umbrechen. */
.ff-table tbody td[data-label="Rollen"] {
display: flex;
flex-wrap: wrap;
gap: 4px;
justify-content: flex-end;
align-items: center;
}
/* Body-Scroll-Lock, solange der mobile Sidebar-Drawer offen ist (verhindert,
dass die Seite hinter Drawer/Backdrop wegscrollt). Toggle: x-effect in
fragments/sidebar.html setzt .ff-no-scroll am . */
html.ff-no-scroll,
html.ff-no-scroll body {
overflow: hidden;
}
}
/* Rollen-Pills auch am Desktop mit etwas Abstand (sonst kleben sie). */
.ff-table td[data-label="Rollen"] .ff-pill + .ff-pill { margin-left: 4px; }
/* ---------------------------------------------------------------------------
* Mobile-Sortierleiste (.ff-sortbar) — gibt der Karten-Ansicht auf dem Handy
* die Sortierung zurueck, die am Desktop ueber die Tabellenkoepfe laeuft. Nur
* unter dem Drawer-Breakpoint sichtbar; am Desktop bleibt die volle sortierbare
* Tabelle UNVERAENDERT. Die Chips steuern dieselbe Engine an (sortiere/sortKey/
* sortIndicator aus ffSortableTable), daher exakt dasselbe Sortierverhalten.
* ------------------------------------------------------------------------- */
.ff-sortbar { display: none; }
@media (max-width: 1023.98px) {
.ff-sortbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin: 0 0 12px;
}
}
.ff-sortbar__label {
font-size: var(--text-sm);
font-weight: 600;
color: var(--text-muted);
margin-right: 2px;
}
.ff-sortbar__chip {
display: inline-flex;
align-items: center;
gap: 5px;
min-height: 40px;
padding: 6px 13px;
border: 1px solid var(--border);
border-radius: var(--ff-radius-full);
background: var(--bg-elevated);
color: var(--text-secondary);
font-size: var(--text-sm);
font-weight: 500;
cursor: pointer;
transition: background-color 120ms var(--ff-anim-easing),
color 120ms var(--ff-anim-easing),
border-color 120ms var(--ff-anim-easing);
}
.ff-sortbar__chip:hover { border-color: var(--border-strong); }
.ff-sortbar__chip.is-active {
background: var(--accent);
border-color: var(--accent);
color: var(--accent-text-on);
}
.ff-sortbar__chip:focus-visible {
outline: none;
box-shadow: 0 0 0 3px var(--accent-soft);
}
.ff-sortbar__dir { font-family: var(--ff-font-mono); font-weight: 700; }