/* web/styles.css — Meine-Energie × Apple HIG. Der :root/body/.tabs/.tab/.grid/.kachel-Block
   unten ist der bindende Design-Token-Satz aus dem Task-Brief, wörtlich übernommen.
   Alles danach ergänzt Layout (Kopfzeile, Anmelde-Karte, Leer-/Fehlerzustand, Touch-Ziele,
   dunkler Modus folgt automatisch aus den Variablen oben). */

:root {
  --bg: #f5f5f7; --karte: #ffffff; --text: #1d1d1f; --sekundaer: #6e6e73;
  --akzent: #3498db; /* Portal-Akzentblau (skinning.css) */
  --linie: #d2d2d7; --radius: 18px;
  --schatten: 0 1px 2px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.06);
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #161617; --karte: #1e1e20; --text: #f5f5f7; --sekundaer: #98989d; --linie: #3a3a3c; }
}
body { font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', sans-serif;
  background: var(--bg); color: var(--text); margin: 0;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.tabs { display: flex; gap: 4px; background: color-mix(in srgb, var(--linie) 40%, transparent);
  border-radius: 12px; padding: 3px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tab { border: 0; background: none; color: var(--sekundaer); font: inherit; padding: 8px 16px;
  border-radius: 9px; white-space: nowrap; }
.tab.aktiv { background: var(--karte); color: var(--text); box-shadow: var(--schatten); }
.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); padding: 16px; }
.kachel { display: flex; gap: 14px; align-items: center; background: var(--karte); border-radius: var(--radius);
  box-shadow: var(--schatten); padding: 18px; text-decoration: none; color: inherit; min-height: 64px; }
.kachel:active { transform: scale(.97); }
.kachel .symbol { width: 44px; height: 44px; color: var(--akzent); flex: none; }
.kachel .name { font-weight: 600; font-size: 17px; }
.kachel .text { color: var(--sekundaer); font-size: 14px; margin-top: 2px; }

/* --- Ergänzungen --- */

*, *::before, *::after { box-sizing: border-box; }
html, body { min-height: 100%; }
body { -webkit-tap-highlight-color: transparent; }
h1, p { margin: 0; }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

#app { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }

/* Kopfzeile: sticky, dezent transluzent — Titel links, Abmelden rechts. Platz für das
   Zahnrad (Admin, Task 13) bleibt in der rechten Gruppe. */
.kopfzeile {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center;
  justify-content: space-between; gap: 12px; padding: 14px 16px;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--linie);
}
.kopfzeile h1 { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.kopf-links { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.kopf-logo { height: 26px; display: block; flex: none; }
.kopf-name { color: var(--sekundaer); font-size: 14px; white-space: nowrap; }
@media (prefers-color-scheme: dark) {
  /* Die Grautöne der Wortmarke sind für dunklen Grund etwas aufgehellt */
  .kopf-logo { filter: brightness(1.35); }
}
/* Portrait/schmal: zweizeiliger Kopf — oben Logo + Name, darunter die Nav in
   voller Breite; der Seitentitel entfällt (der aktive Nav-Punkt zeigt den Ort) */
@media (max-width: 640px) {
  .kopfzeile { flex-wrap: wrap; row-gap: 10px; }
  .kopf-links h1 { display: none; }
  .kopf-name { margin-left: auto; }
  .kopf-nav { flex-basis: 100%; display: flex; justify-content: space-between; align-items: center; }
}

.abmelden {
  font: inherit; font-weight: 500; font-size: 15px; color: var(--text);
  background: var(--karte); border: 1px solid var(--linie); border-radius: 12px;
  padding: 10px 18px; min-height: 44px; cursor: pointer;
}
.abmelden:active { transform: scale(.97); }

main { flex: 1; }

.tabs { margin: 16px 16px 0; }
.tab { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }

.kachel .symbol svg { width: 100%; height: 100%; display: block; }
.kachel-info { display: flex; flex-direction: column; min-width: 0; }
.kachel .name, .kachel .text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Leerer Zustand (keine Gruppen oder ein Tab ohne Kacheln) und Fehlerzustand. */
.leer {
  grid-column: 1 / -1; text-align: center; color: var(--sekundaer);
  font-size: 15px; line-height: 1.5; padding: 56px 24px;
}

.fehler-flaeche { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px; }
.fehler { color: var(--sekundaer); font-size: 15px; text-align: center; max-width: 320px; }

/* Anmelde-Karte: mittig, ein Knopf. */
.login-flaeche { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px; }
.login-karte {
  width: 100%; max-width: 360px; background: var(--karte); border-radius: var(--radius);
  box-shadow: var(--schatten); padding: 32px 28px; text-align: center;
}
.login-karte h1 { font-size: 22px; font-weight: 600; margin-bottom: 8px; }
.login-text { color: var(--sekundaer); font-size: 15px; line-height: 1.45; margin-bottom: 22px; }

.anmelden {
  width: 100%; min-height: 44px; font: inherit; font-weight: 600; font-size: 16px;
  color: #fff; background: var(--akzent); border: 0; border-radius: 12px;
  padding: 12px 24px; cursor: pointer;
}
.anmelden:active { transform: scale(.97); }

/* --- Task 13: Kopf-Navigation (Start/Tresor/Zahnrad), Verwaltung, Tresor --- */

.kopf-nav { display: flex; align-items: center; gap: 6px; }

.nav-link {
  font: inherit; font-weight: 500; font-size: 15px; color: var(--sekundaer);
  text-decoration: none; padding: 10px 14px; min-height: 44px; border-radius: 12px;
  display: inline-flex; align-items: center;
}
.nav-link.aktiv { color: var(--text); background: var(--karte); box-shadow: var(--schatten); }

.zahnrad-knopf {
  width: 44px; height: 44px; min-width: 44px; display: inline-flex; align-items: center;
  justify-content: center; border-radius: 12px; color: var(--sekundaer);
}
.zahnrad-knopf svg { width: 22px; height: 22px; display: block; }
.zahnrad-knopf.aktiv { color: var(--text); background: var(--karte); box-shadow: var(--schatten); }

/* Verwaltung: vier ruhige Abschnitte untereinander. */
.abschnitt { padding: 8px 16px 28px; max-width: 1100px; }
/* Verwaltung: volle Viewport-Breite — die Kachel-Tabelle trägt viele Spalten
   und scrollt in ihrem .tabelle-wrap, statt abgeschnitten zu wirken */
.abschnitt-breit { max-width: none; }
.abschnitt h2 { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; margin: 20px 0 12px; }

.hinweis { color: var(--sekundaer); font-size: 14px; line-height: 1.5; margin: 0 0 16px; }

/* Formulare: Zeile aus Feldern + Knopf, alle Touch-Ziele ≥44px. */
.formzeile { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0; }
.formzeile input, .formzeile select {
  font: inherit; font-size: 15px; color: var(--text); background: var(--karte);
  border: 1px solid var(--linie); border-radius: 10px; padding: 10px 12px; min-height: 44px;
}
.formzeile input[type="checkbox"] { min-height: auto; width: 22px; height: 22px; padding: 0; }
.formzeile button {
  font: inherit; font-weight: 500; font-size: 15px; color: #fff; background: var(--akzent);
  border: 0; border-radius: 10px; padding: 10px 16px; min-height: 44px; cursor: pointer;
}
.formzeile button:active { transform: scale(.97); }
.formzeile-mehrspaltig input, .formzeile-mehrspaltig select { flex: 1 1 140px; }

/* Tabellen: Gruppen/Kacheln/Nutzer/Matrix. Eigener Scroll-Container statt Seiten-Overflow. */
.tabelle-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); }
.tabelle { width: 100%; border-collapse: collapse; background: var(--karte); font-size: 14px; }
.tabelle th, .tabelle td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--linie); white-space: nowrap; }
.tabelle th { color: var(--sekundaer); font-weight: 600; font-size: 13px; }
.tabelle td input[type="text"], .tabelle td input[type="number"], .tabelle td select {
  font: inherit; font-size: 14px; color: var(--text); background: var(--karte);
  border: 1px solid var(--linie); border-radius: 8px; padding: 6px 8px; min-height: 44px;
}
.tabelle td.aktionen { display: flex; gap: 8px; align-items: center; white-space: nowrap; }
.tabelle button, .tabelle-wrap ~ * button { font: inherit; }
.tabelle button {
  font-size: 14px; font-weight: 500; color: var(--akzent); background: none;
  border: 1px solid var(--linie); border-radius: 8px; padding: 8px 12px; min-height: 44px; cursor: pointer;
}
/* Touch-Ziel ≥44px auch für Kästchen-Zellen (Aktiv-Schalter, Matrix) — das Kästchen selbst
   bleibt klein, die Zelle bekommt genug Innenabstand für einen bequemen Treffer. */
.tabelle td:has(input[type="checkbox"]) { padding-top: 14px; padding-bottom: 14px; }
.loeschen-knopf { color: #d92c2c !important; }
tr.gesperrt { color: var(--sekundaer); opacity: .6; }

/* Matrix: eigener horizontal UND vertikal scrollbarer Container, Kopfzeile bleibt beim
   Scrollen stehen. position: sticky wirkt nur innerhalb des nächsten scrollenden
   Vorfahren — ohne eigene max-height/overflow hier scrollt stattdessen die ganze Seite
   (body), der sticky-Kopf hätte dann nichts, an dem er kleben könnte. */
.matrix-wrap { overflow: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); max-width: 100%; max-height: 70vh; }
.matrix-tabelle th, .matrix-tabelle td { text-align: center; }
.matrix-tabelle .matrix-nutzer { text-align: left; white-space: nowrap; }
.matrix-tabelle thead th {
  position: sticky; top: 0; z-index: 1; background: var(--karte); box-shadow: 0 1px 0 var(--linie);
}
.matrix-tabelle input[type="checkbox"] { width: 22px; height: 22px; }

/* Status-Chip (Tresor: "hinterlegt"/"fehlt"). */
.chip { display: inline-block; font-size: 13px; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.chip-ok { color: #1e7e34; background: color-mix(in srgb, #1e7e34 14%, transparent); }
.chip-fehlt { color: var(--sekundaer); background: color-mix(in srgb, var(--sekundaer) 14%, transparent); }

/* Inline-Fehlerzeile: sichtbar rot, nie verschluckt (Server-{error}-Texte). */
.fehler-zeile { color: #d92c2c; font-size: 14px; line-height: 1.4; margin: 8px 0; }

/* Tresor: eine Karte je App. */
.tresor-liste { display: flex; flex-direction: column; gap: 12px; padding: 0 16px 24px; max-width: 640px; }
.tresor-zeile { background: var(--karte); border-radius: var(--radius); box-shadow: var(--schatten); padding: 16px; }
.tresor-zeile-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.tresor-name { font-weight: 600; font-size: 16px; }

/* Einmalkennwort: groß, mit Kopierknopf, deutlicher Hinweis, dass es nie wieder erscheint. */
.tempkennwort-box {
  background: var(--karte); border: 2px solid var(--akzent); border-radius: var(--radius);
  box-shadow: var(--schatten); padding: 18px 20px; margin: 12px 0; max-width: 640px;
}
.tempkennwort-titel { font-weight: 600; font-size: 16px; margin-bottom: 8px; }
.tempkennwort-feld {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 18px; font-weight: 600;
  letter-spacing: .02em; flex: 1 1 220px;
}
.tempkennwort-hinweis { color: var(--sekundaer); font-size: 13px; margin: 8px 0 0; }
.kopier-status { color: var(--sekundaer); font-size: 13px; }