/* ══════════════════════════════════════════════════════════════
   Dashboard auf schmalen Geraeten (13.08.2026)

   Bewusst EINE Datei, geladen NACH style.css, redesign.css und
   modals.css: die Korrekturen ueberschreiben deren Regeln, und wer
   spaeter fragt "warum sieht das auf dem Telefon so aus", findet die
   Antwort an einem Ort statt in drei Dateien verteilt.

   Alles hier ist an gemessenen Fehlern entstanden, nicht an Vermutungen
   — die Fundstellen stehen jeweils ueber der Regel.

   Haltepunkte:
     900 px  Seitenleiste wird zur Schublade (so schon in redesign.css)
     640 px  Telefon: Zeilen brechen um, Tabellen stapeln
   ══════════════════════════════════════════════════════════════ */

/* ── 1. Schublade und Verdunkler ────────────────────────────────
   Gemessen: `.lp-side` lag auf z-index 30, der Verdunkler
   (#sidebar-overlay, style.css) auf 99. Die geoeffnete Navigation lag
   damit UNTER ihrem eigenen Verdunkler: elementFromPoint mitten auf der
   Seitenleiste lieferte den Verdunkler — kein Menuepunkt war antippbar.
   Auf dem Telefon war das Dashboard also gar nicht navigierbar. */
@media (max-width: 900px) {
  .lp-app .lp-side {
    z-index: 120;
  }
  #sidebar-overlay {
    z-index: 110;
  }
  /* Der Bedienknoten oben rechts (Theme, Suche, Avatar) liegt auf 60 und
     saesse sonst als einziges Element ueber dem Verdunkler. */
  .lp-app .lp-global-controls {
    z-index: 55;
  }
  /* Hintergrund festhalten, solange die Schublade offen ist. */
  body.lp-nav-open {
    overflow: hidden;
  }
  /* Der Hamburger erschien bisher erst ab 768 px (style.css), die
     Schublade beginnt aber schon bei 900 px. Dazwischen war die
     Navigation unsichtbar UND unerreichbar. */
  .mobile-sidebar-toggle {
    display: flex;
  }
  /* Der Hamburger lag HINTER der Testphase-Leiste: die klebt mit
     z-index 1300 ganz oben (redesign.css:1186), er stand fix auf 50 und
     war nur noch als heller Rand zu ahnen — fuer jedes Konto in der
     Testphase also keine Navigation. Er rutscht jetzt unter die Leiste,
     genau wie es der Bedienknoten oben rechts schon tut
     (redesign.css:1188): dieselbe gemessene Hoehe, dieselbe Rechnung. */
  .lp-app.has-topbanner .mobile-sidebar-toggle {
    top: calc(12px + var(--topbanner-h, 0px));
  }
  /* Dieselbe Leiste verdeckte auch den Kopf der Schublade: Logo und die
     ersten Menuepunkte lagen darunter. Sie beginnt jetzt unter der
     Leiste und wird um deren Hoehe kuerzer, sonst haengt ihr Fuss mit
     „Abmelden" unter dem Bildrand. */
  .lp-app.has-topbanner .lp-side {
    top: var(--topbanner-h, 0px);
    height: calc(100dvh - var(--topbanner-h, 0px));
  }
  /* Die Kopfzeile schiebt ihre erste Zeile ohnehin um 52 px ein; mit
     Leiste sitzt der Hamburger dort ebenfalls richtig. */
  .lp-app .lp-side .brand-burger {
    display: none;
  }
}

/* ── 1b. Schublade auf dem Telefon vollflaechig ─────────────────
   Auf dem Geraet gemeldet: „sobald man das Menue oeffnet, wird es wieder
   grau". Das ist der Verdunkler — Safaris Leisten sind halbdurchsichtig
   und nehmen die Farbe dessen an, was darunter liegt. Eine dunkle Flaeche
   ueber der ganzen Seite faerbt sie eben mit.

   Statt am Verdunkler zu drehen deckt die Navigation auf dem Telefon die
   ganze Breite ab: dann gibt es nichts mehr zu verdunkeln, und die
   Leisten bleiben weiss. Das ist auf Telefonen ohnehin die uebliche
   Form. Geschlossen wird ueber den Pfeil im Kopf der Schublade (dasselbe
   Ereignis wie der Hamburger), ueber einen Menuepunkt oder mit Escape. */
@media (max-width: 640px) {
  .lp-app .lp-side {
    width: 100%;
    flex-basis: 100%;
    max-width: none;
  }
  .lp-app .lp-side .brand-burger {
    display: inline-flex;
  }
  /* Ohne sichtbare Flaeche daneben braucht es keine Verdunklung mehr —
     sie bleibt nur als Klickflaeche zum Schliessen bestehen. */
  #sidebar-overlay.visible {
    background: transparent;
  }
}

/* ── 2. Kopfzeile der Abschnitte ────────────────────────────────
   Gemessen bei 390 px: `.lp-topbar` ist nowrap, die rechte Gruppe
   (Zeitraum-Umschalter) plus die reservierte Rinne fuer den fixierten
   Bedienknoten fressen die ganze Zeile — der Titel „Uebersicht" wurde
   auf 5 px zusammengedrueckt und war unlesbar. Zusaetzlich lag der
   fixierte Hamburger (44 px bei 12/12) ueber der linken Gruppe.

   Loesung: Titel bekommt eine eigene Zeile mit Rinne links (Hamburger)
   und rechts (Bedienknoten); die Bedienelemente ruecken darunter und
   duerfen die volle Breite nutzen. */
@media (max-width: 900px) {
  .lp-app .main-content .lp-topbar {
    flex-wrap: wrap;
    row-gap: 10px;
    padding: 14px 16px 12px;
  }
  .lp-app .main-content .lp-topbar-l {
    flex: 1 0 100%;
    min-width: 0;
    padding-left: 52px; /* Hamburger */
  }
  /* Die Rinne rechts braucht NUR die Titelzeile: der Bedienknoten ist
     50 px hoch, der Untertitel liegt darunter und darf die volle Breite
     nutzen — sonst brach er auf dem Telefon in vier Zeilen um. */
  .lp-app .main-content .lp-topbar-l .page-title {
    padding-right: 112px;
  }
  .lp-app .main-content .lp-topbar-r {
    flex: 1 0 100%;
    margin-right: 0;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
  }
  .lp-app .main-content .lp-reserve-r {
    padding-right: 16px;
  }
  .lp-app .main-content .page-title {
    font-size: 21px;
    line-height: 1.2;
  }
  .lp-app .main-content .page-sub {
    font-size: var(--fs-sm);
  }
  /* Dieselbe Rinne fuer die klebende Testmodus-Leiste. */
  .lp-app .main-content .testbar {
    padding-left: 60px;
  }
}

/* ── 2b. „Oben abgeschnitten" auf dem iPhone ────────────────────
   Vom Geraet gemeldet (13.08.2026): in den Finanzen fehlte die
   Ueberschrift ganz, in der Uebersicht war vom Gruss nur das letzte Wort
   („GmbH") zu sehen — die ersten Zeilen lagen ueber dem Bildrand und
   waren nicht erreichbar.

   Zwei Ursachen, beide hier behoben:

   1. `100vh` meint auf iOS den GROSSEN Bereich, also ohne Adressleiste.
      Solange Safari seine Leisten zeigt, ist das Dokument damit hoeher
      als das Sichtfeld — die SEITE selbst scrollt. Die Kopfzeile klebt
      aber am Rollbereich `.main-content`, und der wanderte mitsamt ihr
      unter die Statusleiste. `100dvh` misst, was wirklich sichtbar ist.

   2. Die Kopfzeile wurde auf dem Telefon bis zu 214 px hoch (dreizeilige
      Ueberschrift, zweizeiliger Untertitel, Filterzeile) — ein Viertel
      des Schirms, dauerhaft festgeklebt. Auf schmalen Geraeten darf sie
      wegscrollen; der Inhalt ist wichtiger als der Titel. */
@media (max-width: 900px) {
  /* Die Huelle ist schon eingerastet (redesign.css 1908 ff.: „App-shell
     viewport lock" — Seite scrollt nie, nur `.main-content`). Sie misst
     nur mit `height:100%`, und das ist auf iOS die GROSSE Ansicht: rund
     110 px der Huelle liegen unter der Adressleiste, solange Safari sie
     zeigt. `100dvh` misst, was wirklich da ist. Dieselben Selektoren wie
     dort, damit die Spezifitaet passt und nur der Wert sich aendert. */
  html:has(#dashboard:not(.hidden)),
  body:has(> #dashboard:not(.hidden)) {
    height: 100dvh;
  }
  body:has(> #dashboard:not(.hidden)) > #dashboard.lp-app {
    height: 100dvh;
  }
  .lp-app .lp-side {
    height: 100dvh;
  }
  /* Grauer Streifen unten (auf dem Geraet gesehen): die Huelle ist exakt
     100dvh hoch, Safari gibt beim Ein- und Ausfahren seiner Leisten aber
     kurzzeitig mehr Flaeche frei. Was dann durchscheint, ist der
     Seitenhintergrund — und der gehoert der Landingpage, nicht dem
     Dashboard. Er bekommt hier dieselbe Farbe wie die Huelle; die
     Variablen der App haengen an `.lp-app`, ausserhalb sind sie nicht
     sichtbar, deshalb die Werte aus redesign.css direkt. */
  html:has(> body > #dashboard.theme-light:not(.hidden)),
  body:has(> #dashboard.theme-light:not(.hidden)) {
    background: #ffffff;
  }
  html:has(> body > #dashboard.theme-dark:not(.hidden)),
  body:has(> #dashboard.theme-dark:not(.hidden)) {
    background: #09090c;
  }

  /* Die Kopfzeile darf auf dem Telefon wegscrollen. Sie wird hier bis zu
     206 px hoch (dreizeilige Ueberschrift, zweizeiliger Untertitel,
     Filterzeile) — auf 699 px Schirm ein Drittel, dauerhaft festgeklebt.
     Der Selektor MUSS dem aus redesign.css:1921 folgen und ihn um eine
     Klasse ueberbieten: dessen `:has(#dashboard…)` zaehlt als Id, damit
     kommt er auf (1,3,1) und schlaegt jede kuerzere Regel — auch
     id-gebundene Abschnittsregeln. Das war der Grund, warum drei
     Anlaeufe mit `.lp-app …` wirkungslos blieben. */
  body:has(> #dashboard:not(.hidden)) .lp-app .main-content .lp-topbar {
    position: static;
    /* Im Startbildschirm-Modus (ohne Safari-Leisten) sonst unter der Uhr. */
    padding-top: max(14px, env(safe-area-inset-top));
  }
  /* Der Streifen ueber der klebenden Kopfzeile deckt Inhalt ab, der dort
     durchscrollt — ohne Kleben gibt es nichts abzudecken. */
  body:has(> #dashboard:not(.hidden)) .lp-app .main-content .lp-topbar::before {
    display: none;
  }
}

/* ── 3. Segmentierte Umschalter und Filterleisten ───────────────
   Vier Reiter plus Test/Live passen bei 390 px nicht nebeneinander.
   Statt die Beschriftungen zu zerquetschen: waagerecht schiebbar, mit
   Schnappen — und ohne sichtbare Bildlaufleiste. */
@media (max-width: 900px) {
  .lp-app .lp-seg {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .lp-app .lp-seg::-webkit-scrollbar {
    display: none;
  }
  .lp-app .lp-seg-i {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
  .lp-app .pm-bar {
    gap: 8px;
  }
  .lp-app .pm-search {
    max-width: none;
    flex: 1 0 100%;
  }
}

/* ── 4. Tabellenzeilen ──────────────────────────────────────────
   Die Transaktionsliste teilt eine Zeile in drei Spalten
   (1.6fr .8fr .9fr). Bei 390 px bleiben fuer die Statusmarke rund 90 px
   — „Abgeschlossen" passt da nicht hinein. Auf dem Telefon steht der
   Status deshalb unter dem Text, der Betrag bleibt rechts oben. */
@media (max-width: 640px) {
  .lp-app #section-transactions .tbl-head {
    display: none;
  }
  .lp-app #section-transactions .tx-tbl-cols {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 10px;
    padding: 13px 0;
  }
  .lp-app #section-transactions .tx-tbl-cols > :nth-child(1) {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }
  .lp-app #section-transactions .tx-tbl-cols > :nth-child(3) {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
  }
  .lp-app #section-transactions .tx-tbl-cols > :nth-child(2) {
    grid-column: 1 / -1;
    grid-row: 2;
    padding-left: 44px; /* auf Hoehe des Zeilentextes, neben dem Symbol */
  }
  /* Lange Belegzeilen duerfen umbrechen statt die Zeile zu sprengen. */
  .lp-app #section-transactions .lp-row-s {
    white-space: normal;
  }
}

/* ── 5. Dialoge ─────────────────────────────────────────────────
   `.modal` zentriert ohne Innenabstand: das Feld beruehrte bei 390 px
   beide Bildschirmkanten. Ausserdem darf ein Dialog nicht unter die
   Systemleisten rutschen (Safe Area) und braucht auf kleinen Schirmen
   knappere Abstaende. */
@media (max-width: 640px) {
  /* Ohne Innenabstand beruehrte das Feld bei 390 px beide Bildschirm-
     kanten. Die Mitte behaelt es (wie am Schreibtisch) — `.lpm-modal`
     zentriert sich ohnehin ueber `margin:auto`. */
  .modal.active {
    padding: 12px max(12px, env(safe-area-inset-left))
      max(12px, env(safe-area-inset-bottom));
  }
  .lpm-modal {
    max-height: calc(100vh - 96px);
    max-height: calc(100dvh - 96px);
  }
  .lpm-head {
    padding: 18px 18px 14px;
  }
  .lpm-body {
    padding: 16px 18px;
  }
  .lpm-foot {
    padding: 14px 18px;
    flex-wrap: wrap;
    gap: 8px;
  }
  .lpm-foot .lpm-btn {
    flex: 1 1 auto;
    justify-content: center;
  }
  .lpm-title {
    font-size: 20px;
  }
  /* Zwei Spalten sind bei 390 px zwei halbe Woerter. */
  .pmd-grid,
  .pmm-facts {
    grid-template-columns: 1fr;
  }
}

/* ── 6. Bezahlmodal: Produkt- und Abo-Zeilen ────────────────────
   Die Produktzeile hat fuenf Spalten; unter 1080 px bricht sie schon um
   (paymodal.css). Auf dem Telefon kommen die Kundenzeile der Abos und
   der Verbrauchsbalken dazu: der Balken braucht 150 px Mindestbreite und
   drueckte die Zeile sonst auseinander. */
@media (max-width: 640px) {
  .pms-h {
    flex-wrap: wrap;
    gap: 10px 12px;
    padding: 13px 14px;
  }
  .pms-id {
    flex: 1 1 160px;
  }
  .pms-mrr {
    margin-left: auto;
  }
  .pms-sub {
    align-items: flex-start;
    gap: 10px;
  }
  .pms-sub .meter {
    flex: 1 0 100%;
    min-width: 0;
  }
  .pms-sub .lp-btn {
    flex: 0 0 auto;
  }
  .pmpr-body {
    padding-left: 18px;
  }
  .pmpr-facts {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* ── 7. Fixierter Bedienknoten oben rechts ──────────────────────
   Bei 390 px stand er 20 px vom oberen Rand und kollidierte mit der
   Titelzeile. Etwas hoeher und schmaler gesetzt, damit die Rinne aus
   Abschnitt 2 reicht. */
@media (max-width: 900px) {
  .lp-app .lp-global-controls {
    top: 14px;
    right: 14px;
    gap: 8px;
  }
}

/* ── 7b. Kartenkopfzeilen ───────────────────────────────────────
   Gemessen: in `.lp-card-h` stehen Titel und Bedienelemente in EINER
   nicht umbrechenden Zeile. Bei 390 px schoben der Filter der Rechnungen
   (328 px) und der Export-Knopf der Finanzen (196 px) ueber den rechten
   Rand hinaus. Sie bekommen jetzt eine eigene Zeile. */
@media (max-width: 640px) {
  .lp-app .lp-card-h {
    flex-wrap: wrap;
    row-gap: 10px;
  }
  .lp-app .lp-card-h > .lp-seg,
  .lp-app .lp-card-h > .lp-btn {
    flex: 1 1 100%;
    min-width: 0;
  }
  .lp-app .lp-card-h > .lp-btn {
    justify-content: center;
  }
  /* Kachelreihen immer einspaltig. Das `!important` ist hier nicht
     Bequemlichkeit, sondern noetig: mehrere Stellen setzen die Spalten
     direkt im Markup (`style="grid-template-columns:1fr 1fr"`, z. B.
     Gebuehren), und weitere Raster baut JavaScript zur Laufzeit mit
     demselben Inline-Stil. Ein Inline-Wert schlaegt jede Regel aus einer
     Datei — gemessen: zwei 185-px-Karten in 362 px Breite, die rechte
     ragte ueber den Rand. */
  .lp-app .kpi-grid,
  .lp-app .mgrid {
    grid-template-columns: 1fr !important;
  }
}

/* Zeilen „Beschriftung links, Zahl rechts": bei 320 px passt beides
   nicht nebeneinander (gemessen in den Gebuehren: der rechte Block ragte
   ueber den Kartenrand). Sie duerfen umbrechen, und lange Beschriftungen
   duerfen zweizeilig werden. */
@media (max-width: 640px) {
  .lp-app .lp-split-row {
    flex-wrap: wrap;
  }
  .lp-app .lp-split-row > * {
    min-width: 0;
  }
  .lp-app .lp-card-meta {
    white-space: normal;
  }
}

/* Diagramme fuellen ihren Kasten und wachsen nie darueber hinaus —
   das Canvas traegt seine Groesse sonst als Attribut mit sich. */
@media (max-width: 900px) {
  .lp-app .chart-container,
  .lp-app .chart-container canvas {
    max-width: 100%;
  }
}

/* ── 7c. Breite Raster, die sich nicht stapeln lassen ───────────
   Der Wochenplan der Schichten ist ein Raster aus sieben festen
   110-px-Spalten (820 px). Stapeln wuerde die Woche zerstoeren, also
   darf die Karte waagerecht schieben — mit Schwung, wie eine Liste. */
@media (max-width: 900px) {
  .lp-app .lp-card:has(> .lp-shifts-grid),
  .lp-app .lp-card:has(> * > .lp-shifts-grid) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── 8. Allgemeine Kanten ───────────────────────────────────────
   Inhaltsbereiche bekommen auf dem Telefon knappere Raender, und nichts
   darf waagerecht ueber den Bildschirm hinauslaufen: eine einzige zu
   breite Tabelle kippt sonst die ganze Seite in den Querlauf. */
@media (max-width: 640px) {
  .lp-app .lp-content {
    padding: 6px 14px 32px;
  }
  .lp-app .main-content {
    padding: 14px;
  }
  .lp-app .lp-card-pad {
    padding: 16px;
  }
  .lp-app .kpi-val {
    font-size: 26px;
  }
  /* Tabellen, die sich nicht stapeln lassen, duerfen in ihrem eigenen
     Kasten schieben — die Seite selbst bleibt ruhig. */
  .lp-app .lp-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}