/* ============================================================
   BERATUNG: Mobile & UX Fixes
   ============================================================
   Wird NACH style.css und VOR style-dark.css eingebunden.
   Inhalt:
     A) Touch-Target-Fixes (Icon-Buttons, Logout)
     B) Sticky Save-Bar in langen Formularen
     C) Card-Layout für Tabellen auf Smartphones
     D) Schriftgrößen-Skalierung (data-textsize)
     E) Preferences-Leiste in der Fußzeile (FT-identisch)
     F) iOS / Safari spezifische Fixes
   ============================================================ */


/* ── A) Touch-Target-Fixes ───────────────────────────────── */

@media (max-width: 768px) {
  .btn-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }
  .btn-icon i { font-size: 1rem; }
}

@media (max-width: 600px) {
  .btn-logout {
    min-width: 44px;
    min-height: 44px;
    padding: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .btn-logout i { font-size: 1rem; }
}

.item-list-table td .btn-icon + .btn-icon,
.item-list-table td form + .btn-icon,
.item-list-table td .btn-icon + form { margin-left: 4px; }
@media (max-width: 768px) {
  .item-list-table td .btn-icon + .btn-icon,
  .item-list-table td form + .btn-icon,
  .item-list-table td .btn-icon + form { margin-left: 8px; }
}


/* ── B) Sticky Save-Bar in langen Formularen ─────────────── */

@media (max-width: 768px) {
  .form-actions--sticky,
  .form-navigation--sticky {
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    background: var(--surface);
    border-top: 1px solid var(--border);
    margin-left: calc(-1 * var(--sp-md));
    margin-right: calc(-1 * var(--sp-md));
    padding: var(--sp-md);
    padding-bottom: max(var(--sp-md), env(safe-area-inset-bottom));
    z-index: 10;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06);
  }
}


/* ── C) Card-Layout für Tabellen auf Smartphones ─────────── */

@media (max-width: 480px) {
  .item-list-table--cards,
  .item-table--cards { display: block; }
  .item-list-table--cards thead,
  .item-table--cards thead { display: none; }
  .item-list-table--cards tbody,
  .item-list-table--cards tr,
  .item-table--cards tbody,
  .item-table--cards tr { display: block; }
  .item-list-table--cards tr,
  .item-table--cards tr {
    margin-bottom: var(--sp-sm);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: var(--sp-sm);
    background: var(--surface);
  }
  .item-list-table--cards td,
  .item-table--cards td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--sp-xs) 0;
    border: none;
    gap: var(--sp-md);
  }
  .item-list-table--cards td::before,
  .item-table--cards td::before {
    content: attr(data-label);
    font-weight: 700;
    color: var(--text-mid);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
  }
  .item-list-table--cards td:first-child,
  .item-table--cards td:first-child {
    font-weight: 600;
    font-size: var(--fs-md);
    border-bottom: 1px solid var(--border-light);
    padding-bottom: var(--sp-xs);
    margin-bottom: var(--sp-xs);
  }
  .item-list-table--cards td:first-child::before,
  .item-table--cards td:first-child::before { display: none; }
}


/* ── D) Schriftgrößen-Skalierung (data-textsize) ──────────── */
/* Standard-Schrift = 16px (Browser-Default). Wenn der Benutzer
   in der Fußzeile "A" Mittel oder "A" Groß klickt, setzt das
   JavaScript html[data-textsize="l"] bzw. "xl". Weil alle Maße
   in rem definiert sind, skaliert die Seite proportional mit. */

html[data-textsize="l"]  { font-size: 112.5%; } /* 18px */
html[data-textsize="xl"] { font-size: 125%;   } /* 20px */

/* Bei vergrößerter Schrift sollen Inputs mitwachsen
   (Default-Override für iOS-Zoom-Prevention). */
html[data-textsize="l"] input,
html[data-textsize="l"] select,
html[data-textsize="l"] textarea,
html[data-textsize="xl"] input,
html[data-textsize="xl"] select,
html[data-textsize="xl"] textarea {
  font-size: 1rem;
}


/* ── E) Preferences-Leiste in der Fußzeile ───────────────── */

.user-prefs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-lg);
  align-items: center;
  justify-content: center;
  padding: var(--sp-sm) var(--sp-md);
  border-bottom: 1px solid var(--border-light);
  background: var(--bg);
  font-size: var(--fs-xs);
}

.user-prefs__group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.user-prefs__label {
  font-weight: 700;
  color: var(--text-muted);
  margin-right: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--fs-2xs);
}

.user-prefs__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 32px;
  min-height: 32px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text-mid);
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  line-height: 1;
}

.user-prefs__btn:hover {
  background: var(--navy-wash);
  border-color: var(--navy-muted);
  color: var(--navy);
}

.user-prefs__btn--aktiv {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
.user-prefs__btn--aktiv:hover {
  background: var(--navy-light);
  color: #fff;
  border-color: var(--navy-light);
}

.user-prefs__btn i { font-size: 0.8rem; width: 14px; height: 14px; }

.user-prefs__btn--text {
  font-weight: 700;
  min-width: 36px;
}

@media (max-width: 600px) {
  .user-prefs {
    gap: var(--sp-sm);
    padding: var(--sp-xs) var(--sp-sm);
  }
  .user-prefs__btn {
    min-width: 40px;
    min-height: 40px;
    padding: 8px 12px;
  }
  .user-prefs__btn--text { min-width: 44px; }
}


/* ============================================================
   F) iOS / Safari spezifische Fixes
   ============================================================ */

@supports (-webkit-touch-callout: none) {
  input, select, textarea { font-size: 16px; }
  input[type="text"],
  input[type="date"],
  input[type="search"],
  input[type="number"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  select, textarea {
    -webkit-appearance: none;
    appearance: none;
    border-radius: var(--r-sm);
  }
}

@supports (padding: env(safe-area-inset-bottom)) {
  .site-footer { padding-bottom: env(safe-area-inset-bottom); }
  .site-header { padding-top: env(safe-area-inset-top); }
}

.table-responsive { -webkit-overflow-scrolling: touch; }

a, button, input, select, textarea {
  -ms-touch-action: manipulation;
  touch-action: manipulation;
}

/* Grafik-/UI-Prüfung 19.08.2026: Mindest-Trefferflächen für Buttons
   am Smartphone (Zielgruppe mit teils eingeschränkter Feinmotorik) */
@media (max-width: 768px) {
  .btn { min-height: 44px; }
  .btn-small { min-height: 44px; padding: 8px 14px; }
}


/* ============================================================
   G) Smartphone-Feinschliff (13.09.2026)
   ============================================================
   Geprüft auf 412 × 915 px (Samsung Galaxy S23 Ultra, Chrome).
   Ziel: mehr nutzbare Breite, ausgewogene Größenverhältnisse,
   Trefferflächen ab 44 px auch dort, wo spätere Regeln sie
   bisher wieder verkleinert haben.

   Zur Spezifität: Diese Datei wird VOR style-vv.css geladen.
   Regeln mit gleicher Spezifität würden dort überschrieben
   (z. B. .btn-small { min-height: 38px }). Deshalb steht hier
   `body` davor — damit gewinnt die Smartphone-Regel, ohne dass
   die Ladereihenfolge geändert werden muss.
   ============================================================ */


/* ── G1) Anmeldeseite ─────────────────────────────────────── */
/* Vorher: 24 px Außenabstand + 32 px Innenabstand ließen von
   412 px Bildschirmbreite nur 300 px für die Eingabefelder;
   der Titel stand dabei fast am Kartenrand. */

@media (max-width: 600px) {
  body .login-wrapper {
    padding: var(--sp-md);
    padding-top: max(var(--sp-md), env(safe-area-inset-top));
    padding-bottom: max(var(--sp-md), env(safe-area-inset-bottom));
  }
  body .login-card {
    padding: var(--sp-lg) var(--sp-md);
    border-radius: var(--r-lg);
  }
  body .login-brand {
    gap: 12px;
    margin-bottom: var(--sp-lg);
  }
  body .login-brand-logo {
    width: 42px;
    height: 42px;
    min-width: 42px;
    font-size: var(--fs-sm);
  }
  body .login-brand-text {
    font-size: var(--fs-md);
    line-height: 1.3;
    hyphens: auto;
  }
  body .login-brand-text small {
    font-size: var(--fs-xs);
    margin-top: 2px;
  }
  /* Eingabefelder und Anmelde-Knopf: bequem zu treffen,
     16 px Schrift verhindert das Hineinzoomen der Browser. */
  body .login-card input {
    min-height: 48px;
    font-size: 1rem;
    padding: 12px 14px;
  }
  body .login-card .btn {
    min-height: 50px;
    font-size: var(--fs-base);
    margin-top: var(--sp-md);
  }
  body .login-fussnote {
    font-size: 0.8125rem;   /* 13 px — der Hinweis wird oft gebraucht */
    line-height: 1.5;
    margin-top: var(--sp-md);
  }
}


/* ── G2) Mehr nutzbare Breite auf allen Seiten ────────────── */
/* Karten hatten am Smartphone denselben Innenabstand wie am
   Notebook (32 px). Das kostete rund ein Sechstel der Breite. */

@media (max-width: 600px) {
  body .content-card,
  body .widget {
    padding: var(--sp-md);
    border-radius: var(--r-md);
  }
  body .content-card h2 {
    font-size: var(--fs-md);
    margin-bottom: var(--sp-md);
  }
  body .page-header { margin-bottom: var(--sp-md); }
}


/* ── G3) Trefferflächen ───────────────────────────────────── */
/* Die Regel „mindestens 44 px" aus Abschnitt A wurde von
   .btn-small { min-height: 38px } in style-vv.css wieder
   ausgehebelt. Hier gilt sie nun wirklich. */

@media (max-width: 768px) {
  body .btn-small {
    min-height: 44px;
    padding: 8px 14px;
  }
  body .admin-chip {
    min-height: 44px;
    padding: 10px 16px;
    font-size: var(--fs-sm);
  }
  body .widget-link,
  body .jahr-schalter a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  /* Kopfzeilen-Logo ist auch ein Link zum Dashboard */
  body .header-brand {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  /* Auswahlfelder und Datumsfelder */
  body select,
  body input[type="date"],
  body input[type="time"] { min-height: 44px; }
}


/* ── G4) Listen: lesbarer und weniger Wischen ─────────────── */
/* Am Smartphone stand die Tabellenschrift auf 12 px — für die
   Zielgruppe zu klein. Gleichzeitig erzwangen nicht umbrechende
   Spaltenköpfe und min-width: 600px unnötige Breite. */

@media (max-width: 600px) {
  body .item-list-table,
  body .item-table {
    font-size: 0.8125rem;   /* 13 px statt 12 px */
    min-width: 0;
  }
  body .item-list-table th,
  body .item-table th {
    white-space: normal;     /* Spaltenköpfe dürfen umbrechen */
    font-size: var(--fs-2xs);
    padding: 8px 6px;
    line-height: 1.25;
  }
  body .item-list-table td,
  body .item-table td {
    padding: 10px 6px;
    line-height: 1.35;
  }
  /* Die stehenbleibende erste Spalte darf höchstens gut die Hälfte
     der Bildschirmbreite belegen — sonst bleibt für den Rest der
     Zeile zu wenig übrig. Datumsangaben brechen ohnehin nicht um. */
  body .table-responsive .item-list-table td:first-child,
  body .table-responsive .item-table td:first-child { max-width: 55vw; }

  /* Beim seitlichen Wischen bleibt die erste Spalte stehen,
     damit die Zeile zuzuordnen bleibt. */
  body .table-responsive .item-list-table th:first-child,
  body .table-responsive .item-list-table td:first-child,
  body .table-responsive .item-table th:first-child,
  body .table-responsive .item-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--surface);
    box-shadow: 1px 0 0 var(--border-light);
  }
  body .table-responsive .item-list-table th:first-child,
  body .table-responsive .item-table th:first-child { background: var(--bg); }
  body .table-responsive .item-list-table tbody tr:hover td:first-child,
  body .table-responsive .item-table tbody tr:hover td:first-child { background: var(--navy-tint); }
  body .table-responsive tr.is-inactive td:first-child { background: var(--bg); }

  /* Aktions-Knöpfe in Listen nicht umbrechen lassen */
  body .item-list-table td .action-buttons,
  body .item-table td .action-buttons { flex-wrap: nowrap; }
}


/* ── G5) Anzeige-Einstellungen in der Fußzeile ────────────── */
/* Vier Design- und drei Schriftknöpfe brachen auf schmalen
   Geräten unruhig um; jetzt stehen die beiden Gruppen
   untereinander und jede für sich zentriert. */

@media (max-width: 480px) {
  .user-prefs {
    flex-direction: column;
    gap: var(--sp-sm);
  }
  .user-prefs__group {
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
  }
  .user-prefs__label {
    width: 100%;
    text-align: center;
    margin-right: 0;
    margin-bottom: 2px;
  }
}