/* ============================================================
   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: 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 ─────────── */
/* Aktiv ab 650 px: aus jeder Tabellenzeile wird eine Card.
   Block-Layout (statt Flex) ist robust gegen mehrzeilige Inhalte
   mit <br>, <strong>, Status-Badges usw. – nichts wird mehr
   horizontal gequetscht.

   Schriftgrößen sind auf Mobile bewusst etwas größer (min. 13-14 px)
   gewählt, damit die Inhalte auf dem Telefon gut lesbar bleiben. */

@media (max-width: 650px) {

  /* Tabelle, Head, Body, Reihen und Zellen werden Block-Elemente */
  .item-list-table--cards,
  .item-list-table--cards tbody,
  .item-list-table--cards tr,
  .item-list-table--cards td,
  .item-table--cards,
  .item-table--cards tbody,
  .item-table--cards tr,
  .item-table--cards td { display: block; width: auto; }

  /* Header verschwindet – wir nutzen statt dessen data-label per ::before */
  .item-list-table--cards thead,
  .item-table--cards thead { display: none; }

  /* Jede Zeile ist eine eigenständige Card */
  .item-list-table--cards tr,
  .item-table--cards tr {
    margin-bottom: var(--sp-md);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: var(--sp-md);
    background: var(--surface);
    box-shadow: var(--sh-xs);
  }

  /* Jede Zelle: Label klein/uppercase oben, Wert darunter, volle Breite */
  .item-list-table--cards td,
  .item-table--cards td {
    border: 0;
    padding: 8px 0;
    text-align: left;
    font-size: 0.9375rem;          /* = 15 px bei 16 px Basis */
    line-height: 1.45;
  }
  .item-list-table--cards td::before,
  .item-table--cards td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 3px;
    font-weight: 700;
    color: var(--text-muted);
    font-size: 0.75rem;            /* = 12 px – Label ohne weiteren Schrumpf */
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.3;
  }
  /* <small> innerhalb der Card-Zellen nicht weiter schrumpfen lassen –
     Browser-Default macht <small> rund 17 % kleiner als der Parent,
     was bei 15 px Body schon an der Lesbarkeitsgrenze ist. */
  .item-list-table--cards td small,
  .item-table--cards td small { font-size: 0.875rem; color: var(--text-mid); }

  /* Zellen ohne data-label bekommen kein Pseudo-Element */
  .item-list-table--cards td:not([data-label])::before,
  .item-table--cards td:not([data-label])::before { content: none; }

  /* Erste Zelle (in den Listen meist Titel/Datum) als Card-Header */
  .item-list-table--cards td:first-child,
  .item-table--cards td:first-child {
    padding-top: 0;
    padding-bottom: var(--sp-sm);
    margin-bottom: var(--sp-xs);
    border-bottom: 1px solid var(--border-light);
    font-size: 1.0625rem;          /* = 17 px – prominenter Titel */
    line-height: 1.35;
  }
  .item-list-table--cards td:first-child::before,
  .item-table--cards td:first-child::before { display: none; }
  .item-list-table--cards td:first-child strong,
  .item-table--cards td:first-child strong { font-size: 1.0625rem; }

  /* Action-Buttons (Bearbeiten/Löschen) als horizontale Leiste am Ende */
  .item-list-table--cards td.action-buttons,
  .item-table--cards td.action-buttons {
    margin-top: var(--sp-sm);
    padding-top: var(--sp-sm);
    border-top: 1px solid var(--border-light);
    display: flex;
    gap: var(--sp-sm);
    justify-content: flex-end;
  }
  .item-list-table--cards td.action-buttons::before,
  .item-table--cards td.action-buttons::before { display: none; }

  /* Inaktive Zeilen: kein durchgestrichener Text (sähe in Card unschön
     aus) – stattdessen ein dezent gedimmter Eindruck */
  .item-list-table--cards tr.is-inactive,
  .item-table--cards tr.is-inactive {
    opacity: 0.6;
    background: var(--bg);
  }
  .item-list-table--cards tr.is-inactive td,
  .item-table--cards tr.is-inactive td { text-decoration: none; }

  /* Spezial: Dashboard-Termine – Anmeldungs-Icon klein + Text */
  .dashboard-termine .anmeldeform {
    width: 26px; height: 26px;
    font-size: 0.85rem;
    margin-right: 8px;
    vertical-align: middle;
  }
  .dashboard-termine .anmeldeform-text { font-size: 0.9375rem; }
  .dashboard-termine .termin-relativ   { font-size: 0.875rem; }
  .dashboard-termine .termin-teilnehmer-max { font-size: 0.9375rem; }
}

/* Auf Desktop bleibt der Anmeldeform-Text versteckt (Icon mit Tooltip reicht). */
@media (min-width: 651px) {
  .dashboard-termine .anmeldeform-text { display: none; }
}


/* ── C.2) SHG-Filter-Bar & Filter-Tabs auf Mobile ─────────── */
@media (max-width: 650px) {
  .list-filter {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-sm);
    padding: var(--sp-md);
  }
  .list-filter select {
    width: 100%;
    min-width: 0;
    padding: 10px 32px 10px 12px;
  }
  .list-filter__reset {
    margin-left: 0;
    align-self: flex-start;
    padding: 4px 0;
  }
  .filter-tabs {
    gap: 4px;
    padding-bottom: var(--sp-sm);
  }
  .filter-tab {
    padding: 8px 14px;
    font-size: var(--fs-sm);
  }
  .content-header-controls {
    flex-direction: column;
    align-items: stretch;
  }
  .content-header-controls h2 { margin-bottom: var(--sp-sm); }
  .content-header-controls .btn { align-self: flex-start; }
}


/* ── C.3) Lange Titel umbrechen statt überfließen ─────────── */
.item-list-table--cards td strong,
.item-list-table--cards td a {
  overflow-wrap: anywhere;
  word-break: normal;
}


/* ── C.4) Dashboard-Stats auf Mobile in 1 Spalte stapeln ───── */
@media (max-width: 480px) {
  .dashboard-stats {
    grid-template-columns: 1fr !important;
  }
  .dashboard-widgets {
    grid-template-columns: 1fr !important;
  }
}


/* ── C.5) Tablet-Bereich (651–1024 px) ────────────────────── */
/* Auf Tablets bleibt das Tabellen-Layout, aber wir geben den
   Spalten etwas mehr Luft und reduzieren das Card-Padding,
   damit die Liste nicht "erstickt" wirkt. */
@media (min-width: 651px) and (max-width: 1024px) {
  .content-card {
    padding: var(--sp-lg);
  }
  .item-list-table th,
  .item-list-table td {
    padding: 10px 12px;
    font-size: 0.9375rem;          /* = 15 px – etwas kompakter als Desktop */
  }
  .item-list-table th { font-size: 0.8125rem; }   /* 13 px für Header */
  .filter-tab { padding: 6px 12px; font-size: var(--fs-sm); }

  /* Dashboard-Stats auf Tablet: drei Karten in einer Zeile, aber kompakt */
  .stat-card { padding: var(--sp-md); }
  .stat-card .stat-number { font-size: var(--fs-xl); }
}


/* ── C.5b) Terminliste – kompaktere Cards auf Mobile ──────
   Die Termin-Cards profitieren davon, wenn Datum + Uhrzeit
   inline stehen (statt mit <br>-Zeilenumbruch) und Teilnehmer/
   Status-Badge enger zusammenrücken. */
.termin-zeit {
  color: var(--text-mid);
  font-size: 0.95em;
}
@media (max-width: 650px) {
  .terminliste-table tr { padding: var(--sp-sm) var(--sp-md); }
  /* Datum-Header-Zelle: Datum + Uhrzeit auf einer Zeile, weniger Padding */
  .terminliste-table td:first-child {
    font-size: 1rem;
    padding-bottom: var(--sp-xs);
  }
  .terminliste-table td:first-child .termin-zeit {
    margin-left: 8px;
    font-weight: 400;
    color: var(--text-mid);
    font-size: 0.875rem;
  }
}


/* ── C.6) Schriftgrößen-Minima für sehr kleine Geräte ────── */
/* Bei iPhone SE und älteren Smartphones (≤375 px) sind manche
   Texte schon nahe der Lesbarkeitsgrenze. Wir setzen pauschal
   absolute Minima auf zentrale Stellen. */
@media (max-width: 380px) {
  body { font-size: 0.9375rem; }   /* = 15 px Basis */
  .page-header h1,
  .content-card h2 { font-size: 1.125rem; }     /* 18 px */
  .stat-card .stat-number { font-size: 1.625rem; }
  .qa-card { padding: var(--sp-md); }
  .qa-card span { font-size: var(--fs-sm); }
}


/* ── 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;
}