/* ==========================================================================
   Seitengeruest: Seitenleiste, Kopfzeile, Inhaltsflaeche, Anmeldeseiten
   ========================================================================== */

.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100dvh;
}

/* --------------------------------------------------------- Seitenleiste */

.seitenleiste {
  position: sticky; top: 0;
  height: 100dvh;
  display: flex; flex-direction: column;
  padding: var(--sp-4) var(--sp-3);
  background: var(--c-surface);
  border-right: 1px solid var(--c-line);
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 30;
}

.marke-zeile {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3) var(--sp-5);
  color: var(--c-ink);
  font-weight: 600;
  font-size: var(--fs-base);
}
.marke-zeile:hover { text-decoration: none; }
.marke-zeichen {
  display: grid; place-items: center;
  width: 28px; height: 28px; flex: none;
  border-radius: var(--r-sm);
  background: var(--c-accent);
  color: var(--c-accent-ink);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: -.02em;
}

.navi { display: flex; flex-direction: column; gap: 1px; }
.navi + .navi { margin-top: var(--sp-5); }

.navi-titel {
  padding: var(--sp-2) var(--sp-3) var(--sp-1);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-faint);
}

.navi a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px var(--sp-3);
  border-radius: var(--r);
  color: var(--c-body);
  font-size: var(--fs-base);
  font-weight: 450;
  transition: background var(--dauer) var(--ease), color var(--dauer) var(--ease),
              transform var(--dauer-feder) var(--ease-feder);
}
.navi a:hover { background: var(--c-surface-2); color: var(--c-ink); text-decoration: none; }
.navi a:active { background: var(--c-surface-3); transform: scale(var(--druck)); transition-duration: 0s; }
.navi a.aktiv { background: var(--c-surface-3); color: var(--c-ink); font-weight: 550; }
.navi a svg { flex: none; color: var(--c-muted); }
.navi a.aktiv svg { color: var(--c-ink); }

.navi-zaehler {
  margin-left: auto;
  min-width: 20px; height: 20px;
  padding: 0 6px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--c-err-ink);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 600;
}

.seitenleiste-fuss { margin-top: auto; padding-top: var(--sp-4); }

.konto-knopf {
  display: flex; align-items: center; gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  border: 0; border-radius: var(--r);
  background: none;
  font: inherit;
  text-align: left;
  color: var(--c-body);
  cursor: pointer;
  min-width: 0;
}
.konto-knopf:hover { background: var(--c-surface-2); }
/* Ohne Flex-Spalte laufen Name und Rolle in einer Zeile ineinander: beides
   sind <span>, also von Haus aus inline. Erst dadurch greifen unten auch
   overflow/ellipsis bei langen Namen. */
.konto-knopf .konto-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.konto-knopf .konto-name {
  font-size: var(--fs-base); font-weight: 500; color: var(--c-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.konto-knopf .konto-rolle {
  font-size: var(--fs-sm); color: var(--c-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ------------------------------------------------------------- Inhalt */

.inhalt { min-width: 0; display: flex; flex-direction: column; }

/* Die Kopfzeile ist ausschliesslich fuer schmale Bildschirme da. Am Rechner
   traegt jede Ansicht ihren eigenen Titel - so wie in den Vorlagen. */
.kopfzeile {
  display: none;
  position: sticky; top: 0; z-index: 20;
  align-items: center; gap: var(--sp-3);
  min-height: var(--header-h);
  padding: 0 var(--seite-padd);
  background: color-mix(in srgb, var(--c-canvas) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--c-line);
}

.kopfzeile .kopf-marke { font-weight: 600; color: var(--c-ink); }

.seite {
  flex: 1;
  width: 100%;
  max-width: var(--seite-max);
  padding: var(--sp-5) var(--seite-padd) var(--sp-8);
}

/* Kurzes Anheben beim Ansichtswechsel, damit der Inhalt nicht hart
   umspringt. Die Bewegung ist bewusst winzig (6 px): Sie soll den Wechsel
   begleiten, nicht ankuendigen.

   BEWUSST NUR transform, KEINE Deckkraft. Browser frieren Animationen in
   nicht dargestellten Registerkarten ein. Bei einer Deckkraft-Animation
   stuende die Seite dann auf "unsichtbar" fest - ein leerer Bildschirm als
   Preis fuer einen Effekt. Friert die Bewegung ein, steht der Inhalt
   stattdessen 6 px tiefer; das sieht niemand.

   Ebenfalls bewusst ohne animation-fill-mode: vor und nach dem Ablauf gilt
   der normale Zustand. */
.seite-ein { animation: seite-ein 180ms var(--ease); }
@keyframes seite-ein {
  from { transform: translateY(6px); }
  to   { transform: none; }
}

.seite-kopf {
  display: flex; align-items: flex-start; gap: var(--sp-4);
  flex-wrap: wrap;
  margin-bottom: var(--sp-5);
}
.seite-kopf h1 { font-size: var(--fs-2xl); }
.seite-kopf .seite-unterzeile { color: var(--c-muted); font-size: var(--fs-base); margin-top: 2px; }

.werkzeugleiste {
  display: flex; align-items: center; gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}
.werkzeugleiste .suche { min-width: 240px; }

.raster-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
.raster-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.raster-haupt-seite { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--sp-4); }

@media (max-width: 1100px) {
  .raster-3 { grid-template-columns: repeat(2, 1fr); }
  .raster-haupt-seite { grid-template-columns: 1fr; }
}

/* ------------------------------------------------- Tableiste (nur Handy) */

/* Die fuenf Wege zu den eigenen Daten, dauerhaft am unteren Rand.
   Am Handy liegt der Daumen unten - eine Navigation oben links ist dort
   die unbequemste Stelle des Bildschirms. Wer stempeln, eine Aufgabe
   abhaken oder seinen Resturlaub sehen will, soll genau einmal tippen
   muessen, nicht dreimal (Menue oeffnen, suchen, tippen). */
/* --------------------------------------------------- Sperre: 2FA-Pflicht

   Ein Konto mit Vollzugriff, das den zweiten Faktor noch nicht eingerichtet
   hat, sieht ausschliesslich den Einrichtungsschirm. Die Navigation waere
   hier nur eine Sammlung von Wegen, die alle mit einer Fehlermeldung enden -
   deshalb bleibt sie ganz weg. */

.app[data-sperre] { grid-template-columns: 1fr; }
.app[data-sperre] .seitenleiste,
.app[data-sperre] .kopfzeile,
.app[data-sperre] .tableiste { display: none !important; }

.tableiste { display: none; }

@media (max-width: 900px) {
  .tableiste {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 30;
    background: color-mix(in srgb, var(--c-surface) 92%, transparent);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--c-line);
    /* Auf iPhones mit Streifen statt Knopf ragt der Bildschirm weiter nach
       unten als die bedienbare Flaeche. Ohne das liegt die Leiste unter dem
       Streifen und ist nicht antippbar. */
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .tableiste a {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    /* 52 px Hoehe: bequem ueber der Mindestgroesse fuer Beruehrungsziele. */
    min-height: 52px;
    padding: 6px 2px 7px;
    color: var(--c-muted);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .01em;
    text-decoration: none;
    transition: color var(--dauer) var(--ease),
                transform var(--dauer-feder) var(--ease-feder);
  }
  .tableiste a:active { transform: scale(var(--druck-klein)); transition-duration: 0s; }
  .tableiste a:hover { text-decoration: none; }

  .tableiste a.aktiv { color: var(--c-ink); }
  /* Der Strich oben statt einer Flaechenfuellung: ruhiger, und er zeigt
     die Zugehoerigkeit zum Bildschirminhalt darueber. */
  .tableiste a.aktiv::before {
    content: "";
    position: absolute; top: -1px; left: 22%; right: 22%;
    height: 2px;
    background: var(--c-ink);
    border-radius: 0 0 2px 2px;
  }

  .tableiste-zaehler {
    position: absolute;
    top: 4px; left: calc(50% + 6px);
    min-width: 16px; height: 16px;
    padding: 0 4px;
    display: grid; place-items: center;
    border-radius: var(--r-pill);
    background: var(--c-err-ink);
    color: #fff;
    font-size: 9px; font-weight: 700;
    line-height: 1;
  }
}

/* ---------------------------------------------------------- Mobil ---- */

.seitenleiste-schatten { display: none; }

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }

  .seitenleiste {
    position: fixed; inset: 0 auto 0 0;
    width: 82vw; max-width: 300px;
    transform: translateX(-100%);
    transition: transform var(--dauer) var(--ease);
    box-shadow: var(--sh-3);
  }
  .app[data-menue="offen"] .seitenleiste { transform: none; }

  .app[data-menue="offen"] .seitenleiste-schatten {
    display: block;
    position: fixed; inset: 0;
    background: var(--c-overlay);
    z-index: 25;
  }

  .kopfzeile { display: flex; }
  .raster-2 { grid-template-columns: 1fr; }

  /* Platz für die Tableiste, damit sie nichts verdeckt - und zwar auch
     unter dem iPhone-Streifen. */
  .seite { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }

  /* Meldungen und Dialoge gehören über die Leiste, nicht darunter. */
  #meldungen { bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
}

/* ------------------------------------------- Anmeldung und Einrichtung */

.zugang {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--sp-5);
}

.zugang-karte {
  width: min(420px, 100%);
  padding: var(--sp-6);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-2);
}
.zugang-karte-breit { width: min(620px, 100%); }

.zugang-kopf { text-align: center; margin-bottom: var(--sp-6); }
.zugang-kopf .marke-zeichen { margin: 0 auto var(--sp-4); width: 40px; height: 40px; font-size: var(--fs-base); }
.zugang-kopf h1 { font-size: var(--fs-xl); margin-bottom: var(--sp-2); }
.zugang-kopf p { color: var(--c-muted); font-size: var(--fs-base); }

.zugang form { display: flex; flex-direction: column; gap: var(--sp-4); }

.zugang-fuss {
  margin-top: var(--sp-5);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--c-faint);
}

/* Schrittanzeige des Einrichtungsassistenten */
.schritte {
  display: flex; align-items: center; gap: var(--sp-2);
  margin-bottom: var(--sp-6);
}
.schritt {
  flex: 1;
  height: 3px;
  border-radius: var(--r-pill);
  background: var(--c-surface-3);
}
.schritt.erledigt, .schritt.aktiv { background: var(--c-accent); }

.schritt-titel {
  font-size: var(--fs-sm);
  color: var(--c-muted);
  margin-bottom: var(--sp-2);
}

/* Druckausgabe: Bedienelemente weglassen */
@media print {
  .seitenleiste, .kopfzeile, .werkzeugleiste, .btn, #meldungen { display: none !important; }
  .app { grid-template-columns: 1fr; }
  .seite { padding: 0; max-width: none; }
  .karte { border: 1px solid #ccc; box-shadow: none; break-inside: avoid; }
  body { background: #fff; }
}