/* ═══════════════════════════════════════════════════════════════
   Enoxo Flow — Handy

   Wird als LETZTES geladen, damit die Regeln hier gewinnen. Das ist
   noetig, weil Media Queries die Spezifitaet NICHT erhoehen:
   `body.demo .sidenav` (0,2,1) schlaegt `.sidenav` (0,1,0) auch dann,
   wenn letzteres in @media steht. Genau daran ist die Demo-Ansicht
   auf dem Telefon zerbrochen.
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   1 · DER FEHLER: Menü und Inhalt lagen übereinander

   Grundzustand mobil:  .shell { grid-template-rows: 54px auto 1fr }
                        .sidenav → Zeile 2, .inhalt → Zeile 3

   Im Demo-Modus greift aber zusätzlich:
                        body.demo .shell { grid-template-rows: auto 54px 1fr }
                        body.demo .sidenav, body.demo .inhalt { grid-row: 3 }

   Beide Regeln sind spezifischer als die mobilen. Ergebnis: nur drei
   Zeilen, und Menü UND Inhalt sitzen beide in Zeile 3 — das Menü
   klebt als dünner Streifen über dem Inhalt.

   Mit Demo-Leiste braucht das Raster VIER Zeilen.
   ───────────────────────────────────────────────────────────── */
@media (max-width:900px){
  body.demo .shell,
  body.nurlesen .shell{
    grid-template-columns:1fr;
    grid-template-rows:auto 54px auto 1fr;   /* Leiste · Kopf · Menü · Inhalt */
    height:auto;
    overflow:visible;
  }
  body.demo .sidenav,
  body.nurlesen .sidenav{ grid-row:3 }
  body.demo .inhalt,
  body.nurlesen .inhalt{ grid-row:4 }
}

/* ─────────────────────────────────────────────────────────────
   2 · Demo- und Leseleiste umbrechen lassen
   Text, Auswahlfeld und zwei Knöpfe passen nebeneinander nicht auf
   390 px — ohne Umbruch wird der Text auf wenige Zeichen gequetscht.
   ───────────────────────────────────────────────────────────── */
@media (max-width:900px){
  #demoLeiste,#leseLeiste{
    flex-wrap:wrap;
    gap:8px 10px;
    padding:10px 14px;
    font-size:12px;
  }
  #demoLeiste .rechts,#leseLeiste .rechts{
    margin-left:0;
    width:100%;
    flex-wrap:wrap;
  }
  #demoLeiste select,#demoLeiste .knopf,
  #leseLeiste .knopf{ flex:1 1 auto; min-height:38px }
}

/* ─────────────────────────────────────────────────────────────
   3 · Menüleiste: waagerecht, aber bedienbar
   Elf Punkte in einer Scrollleiste ohne Trennung sind unlesbar.
   Die Kategorieüberschriften kehren als schmale Trenner zurück.
   ───────────────────────────────────────────────────────────── */
@media (max-width:900px){
  .sidenav{
    gap:4px;
    padding:8px 10px;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .sidenav::-webkit-scrollbar{ display:none }

  .navgruppe{ align-items:center }
  /* Trenner statt Überschrift: zeigt, wo eine neue Kategorie beginnt */
  .navgruppe + .navgruppe::before{
    content:"";
    width:1px; height:20px;
    background:var(--linie-stark,rgba(0,0,0,.14));
    margin:0 6px;
    flex-shrink:0;
  }
  .navknopf{
    scroll-snap-align:start;
    min-height:40px;
    padding:9px 13px;
    font-size:14px;
    display:flex;
    align-items:center;
    gap:6px;
  }
  .navknopf[aria-current="true"]::before{ display:none }  /* Balken links ergibt quer keinen Sinn */
  .navknopf[aria-current="true"]{
    box-shadow:inset 0 -2px 0 var(--kupfer);
  }
  .zaehler{ float:none; margin-left:2px }
}

/* ─────────────────────────────────────────────────────────────
   4 · Kopfleiste: die Aktionen passen nicht in eine Zeile
   ───────────────────────────────────────────────────────────── */
@media (max-width:900px){
  .topbar{ padding:0 12px; gap:8px }
  .topbar .marke{ width:auto }
  .topbar .marke span{ display:none }          /* „FLOW“ weglassen, Logo reicht */
  .topbar .aktionen{ gap:6px }
  .topbar .aktionen .knopf{ min-height:40px; padding:8px 11px }
  /* „Sicherung“ darf hier weg — dieselbe Funktion steht unter
     „Daten & Sicherung“. „E-Rechnung“ bleibt: dafür gibt es keinen
     zweiten Zugang, und ohne sie wäre die Funktion auf dem Telefon
     überhaupt nicht erreichbar. */
  #btnSichern{ display:none }
  #speicherpunkt span{ display:none }          /* nur der Punkt bleibt */
}
/* Sehr schmal: nur noch das Nötigste in der Kopfleiste */
@media (max-width:520px){
  .topbar .aktionen #btnAbo{ display:none }
  /* „Drucken“ weicht, „Herunterladen“ bleibt: auf dem Telefon druckt
     praktisch niemand auf Papier, aber die Rechnung als PDF wegschicken
     ist genau das, was man unterwegs tut. */
  .topbar .aktionen #btnDrucken{ display:none }
  /* Feedback bleibt auch auf dem Telefon sichtbar — Demo-Besucher
     kommen überwiegend vom Handy. */
  .topbar .aktionen #btnFeedback{ display:inline-flex }
  .topbar .aktionen .knopf{ padding:8px 9px; font-size:12.5px }
}

/* ─────────────────────────────────────────────────────────────
   5 · Eingabefelder
   Unter 16 px zoomt iOS beim Antippen automatisch hinein und
   springt danach nicht zurück — deshalb hier nie kleiner.
   ───────────────────────────────────────────────────────────── */
@media (max-width:900px){
  .input,input[type=text],input[type=number],input[type=date],
  input[type=email],input[type=search],select,textarea{
    font-size:16px;
    min-height:44px;
    padding:10px 12px;
  }
  textarea{ min-height:88px }
  label{ font-size:12.5px }
  .karte{ padding:14px 13px; border-radius:12px }
  .karte > header{ margin-bottom:10px }
}

/* ─────────────────────────────────────────────────────────────
   6 · Knöpfe: Finger statt Mauszeiger
   ───────────────────────────────────────────────────────────── */
@media (max-width:900px){
  .knopf{ min-height:44px; padding:10px 14px; font-size:14px }
  .knopf.klein{ min-height:38px; padding:8px 11px; font-size:13px }
  .reihe{ flex-wrap:wrap; gap:8px }
  .reihe .knopf{ flex:1 1 auto }
  /* Auf Zeigergeräten ohne Hover keine Hover-Zustände zeigen —
     sonst bleibt der Zustand nach dem Antippen kleben. */
  @media (hover:none){
    .knopf:hover,.karte:hover,.navknopf:hover,.ue-kachel:hover{
      box-shadow:var(--hoehe-1),var(--kante-hell);
      filter:none;
    }
  }
}

/* ─────────────────────────────────────────────────────────────
   7 · Das Blatt
   210 mm sind auf einem 390-px-Telefon rund 794 px. Der Zoom in
   app.html geht nur bis 0,5 — das reicht nicht. Der Rahmen darf
   deshalb waagerecht scrollen, statt das Layout zu sprengen.
   ───────────────────────────────────────────────────────────── */
@media (max-width:900px){
  .blattspalte{ width:100%; min-width:0 }
  .buehnenrahmen{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    max-width:100%;
    border-radius:8px;
  }
  .blattleiste{ flex-wrap:wrap; gap:6px; font-size:11.5px }
  .blattleiste .rechts{ margin-left:0; width:100%; flex-wrap:wrap }
}

/* ─────────────────────────────────────────────────────────────
   8 · Übersicht
   ───────────────────────────────────────────────────────────── */
@media (max-width:900px){
  .ue-kacheln{ grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px }
  .ue-kachel{ padding:12px 13px }
  .ue-kachel .wert{ font-size:21px }
  .ue-tat{ gap:8px }
  /* Tabellen: die Betragsspalte muss lesbar bleiben, der Rest darf schrumpfen */
  .ue-liste{ font-size:12.5px }
  .ue-liste th:nth-child(3),.ue-liste td:nth-child(3){ display:none }  /* Betreff */
  .ue-verlauf{ height:78px }
  /* Die Schnellaktionen sind die einzigen Knöpfe in der Tabelle — sie
     brauchen eine Fingerfläche, sonst trifft man die Zeile und öffnet
     das Dokument, statt zu buchen. */
  .ue-liste td.tat{ padding:6px 4px }
  .uetat{ min-height:40px; padding:8px 11px; font-size:13px; margin-left:4px }
  .uetat.weg{ min-width:40px; padding:8px 10px }
}
@media (max-width:520px){
  .ue-liste th:nth-child(2),.ue-liste td:nth-child(2){ display:none }  /* Kunde */
}

/* ─────────────────────────────────────────────────────────────
   9 · Positionen
   Sechs Felder nebeneinander sind auf dem Telefon unbedienbar.
   ───────────────────────────────────────────────────────────── */
@media (max-width:900px){
  .position{ padding:12px 11px }
  .position .gitter > *{ grid-column:span 6!important }
  .position .gitter > .sp3:last-child{ grid-column:span 12!important }
  .poskopf{ flex-wrap:wrap; gap:8px }
  .poskopf input{ order:3; width:100%; flex-basis:100% }
}

/* ─────────────────────────────────────────────────────────────
   10 · Ablage, E-Rechnung, Hilfe
   ───────────────────────────────────────────────────────────── */
@media (max-width:900px){
  .abl-zeile{ flex-wrap:wrap; gap:8px }
  .abl-zeile .abl-name{ flex-basis:100% }
  .abl-zeile input[type=text]{ max-width:none!important; flex:1 1 100% }
  .ein-ablage{ padding:22px 14px }
  .ein-paar{ grid-template-columns:1fr; gap:2px 0 }
  .ein-paar dt{ margin-top:7px; font-size:11.5px }
  .ein-tab{ font-size:12px }
  .ein-tab th:nth-child(3),.ein-tab td:nth-child(3){ display:none }   /* Einzelpreis */
  #hilfeTafel{ width:100vw }
  #hinweisBox{ left:12px; right:12px; bottom:14px; max-width:none; transform:translateY(14px) }
  #hinweisBox.an{ transform:translateY(0) }
  #fehlerEcke{ left:12px; right:12px; bottom:12px; max-width:none }
}

/* ─────────────────────────────────────────────────────────────
   11 · Zahlungen und Mahnwesen
   ───────────────────────────────────────────────────────────── */
@media (max-width:900px){
  .zh-kopf{ flex-wrap:wrap }
  .zh-rest{ width:100%; font-size:17px }
  .zh-neu{ gap:8px }
  .zh-neu .feld{ flex:1 1 100% }
  .zh-zeile{ flex-wrap:wrap; gap:6px }
  .mahn-rechnung div{ font-size:12.5px }
  /* Die Mahnvorschau ist vorformatierter Text — ohne Umbruch schiebt sie
     die ganze Karte waagerecht auf. */
  .mahn-vorschau{ font-size:12.5px; white-space:pre-wrap; overflow-wrap:anywhere }
}

/* ─────────────────────────────────────────────────────────────
   13 · Listenzeilen mit Löschknopf
   Das ✕ ist als Zeichen nur rund 15 px breit. Für den Finger sind
   44 px die untere Grenze, sonst trifft man die Zeile statt des
   Knopfes — und wählt aus, statt zu löschen.
   ───────────────────────────────────────────────────────────── */
@media (max-width:900px){
  .zeile{ min-height:52px }
  .zeile .zeilenweg{
    min-width:44px; min-height:44px;
    display:flex; align-items:center; justify-content:center;
    font-size:17px; margin-right:-6px;
  }
  .zeile .rechts{ gap:6px }
}

/* ─────────────────────────────────────────────────────────────
   14 · Girocode im Blatt
   Das Blatt wird als Ganzes skaliert, der Code darf trotzdem nicht
   aus dem Zahlungskasten laufen, wenn die Bankzeile lang ist.
   ───────────────────────────────────────────────────────────── */
@media (max-width:900px){
  .giro{ flex-wrap:wrap; gap:8px }
  .giro .txt{ flex:1 1 120px; min-width:0 }
}

/* ─────────────────────────────────────────────────────────────
   15 · Schalterzeilen (Kundentyp, Girocode, E-Rechnung)
   Kästchen und Text sollen gemeinsam anfassbar sein.
   ───────────────────────────────────────────────────────────── */
@media (max-width:900px){
  .schalter{ display:flex; align-items:flex-start; gap:10px; min-height:44px; padding:4px 0 }
  .schalter input[type=checkbox]{ width:22px; height:22px; margin-top:1px; flex-shrink:0 }
}

/* ─────────────────────────────────────────────────────────────
   12 · Sicherer Bereich bei Geräten mit Aussparung
   ───────────────────────────────────────────────────────────── */
@supports (padding:max(0px)){
  @media (max-width:900px){
    .inhalt{ padding-bottom:max(24px,env(safe-area-inset-bottom)) }
    #demoLeiste,#leseLeiste{ padding-left:max(14px,env(safe-area-inset-left)) }
  }
}