/* ===========================================================================
   mobile.css — Feinschliff fuer das Smartphone (Zielgeraet: iPhone 11, 414px)

   WICHTIG: Diese Datei wird als LETZTES eingebunden und enthaelt AUSSCHLIESSLICH
   Regeln innerhalb von @media-Bloecken fuer schmale Schirme. Auf dem PC/Tablet
   greift hier nichts — die normale Webansicht bleibt unangetastet.

   Breakpoints:
     <= 560px  Handy hochkant (iPhone 11 = 414px)
     <= 900px und (hover:none)  Touch-Geraete allgemein (auch quer)
=========================================================================== */


/* ---------------------------------------------------------------------------
   1) Grundlage: kein seitliches Wischen, keine ueberlaufenden Woerter.
      Ohne touch-action:pan-y laesst sich die Seite am iPhone horizontal
      verschieben, auch wenn nichts ueberlaeuft. overflow-x:clip steht hinter
      hidden, weil hidden auf html/body position:sticky zerstoert.
--------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* max-width bewusst in Prozent, nicht in vw: 100vw schliesst eine sichtbare
     Bildlaufleiste mit ein und ist dann breiter als der nutzbare Bereich —
     genau daraus entsteht ein Querlauf von wenigen Pixeln. */
  html, body {
    width: 100%;
    max-width: 100%;
    /* Das feste min-width:320px aus manager-ui.css wuerde auf sehr schmalen
       Geraeten (und bei vergroesserter Schrift) einen Querlauf erzwingen. */
    min-width: 0;
    overflow-x: hidden;
    overflow-x: clip;
    touch-action: pan-y;
    overscroll-behavior-x: none;
  }
  .app { max-width: 100%; }
  body {
    overflow-wrap: break-word;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
  }
  /* Lange deutsche Komposita duerfen Ueberschriften nicht aufreissen. */
  h1, h2, h3, h4 { overflow-wrap: anywhere; hyphens: auto; }
}


/* ---------------------------------------------------------------------------
   2) Safe Area (Notch + Home-Indikator).
      Die App laeuft per apple-mobile-web-app-capable als Vollbild-App mit
      durchscheinender Statusleiste. Ohne diese Polster liegt der Kopf unter
      der Uhrzeit und die untere Leiste im Home-Balken.
--------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .app { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }

  header.kopf.topbar {
    padding-top: max(10px, env(safe-area-inset-top));
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }

  /* Untere Navigation haelt Abstand zum Home-Balken. */
  .navbar {
    bottom: max(10px, calc(env(safe-area-inset-bottom) + 4px));
    left: max(10px, env(safe-area-inset-left));
    right: max(10px, env(safe-area-inset-right));
  }

  /* Platz, damit die letzte Karte nicht unter der Navigation verschwindet. */
  .app > main { padding-bottom: calc(118px + env(safe-area-inset-bottom)); }
}


/* ---------------------------------------------------------------------------
   2b) "Beratung & Angebote" und "Rentenoptimierung" untereinander statt
       nebeneinander.

   app.js setzt diese beiden Reiter beim Umschalten per Inline-Stil auf
   display:flex (auf dem PC scrollen Kopf und Inhalt dadurch getrennt).
   flex-direction:column stand aber nur im Block ab 821px — am Handy blieb
   die Voreinstellung "row" stehen. Ergebnis: Ueberschrift, Reiterleiste und
   Fallliste standen als drei ueberschmale Spalten nebeneinander und der Text
   brach Buchstabe fuer Buchstabe um.
--------------------------------------------------------------------------- */
@media (max-width: 900px) {
  #toptBox, #roptBox, #einkBox {
    flex-direction: column;
    height: auto;
    min-height: 0;
  }
  #toptBox > *, #roptBox > *, #einkBox > * {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    flex: 0 0 auto;
  }
}


/* ---------------------------------------------------------------------------
   3) Untere Navigationsleiste.
      Vorher: festes 3-Spalten-Raster. Bei fuenf sichtbaren Reitern entstand
      eine zweite, halb leere Reihe; die Beschriftungen wurden hart
      abgeschnitten ("Beratung & Angeb"). Jetzt teilen sich die Reiter die
      Breite selbst auf, und am Handy stehen kurze Namen darunter.
--------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* Sieben Reiter passen bei 375 px nicht mit vollem Text: pro Knopf blieben
     rund 39 px, "Einkommen" braucht 53 px, "Kündigung" 50 px — die Namen
     standen als "Einkomm..." und "Kündigu..." da.
     Deshalb dasselbe Verhalten wie am grossen Schirm: alle Reiter zeigen nur
     ihr Symbol, allein der aktive klappt zur beschrifteten Kapsel auf. So
     bleiben alle sieben erreichbar und nichts wird abgeschnitten. */
  .navbar {
    display: flex !important;
    align-items: stretch;
    gap: 3px;
    padding: 6px;
  }
  .navbar .nav-btn {
    flex: 0 0 auto;
    width: auto;
    min-width: 30px;
    min-height: 48px;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 0 4px;
    border-radius: 13px;
  }
  .navbar .nav-btn svg { width: 22px; height: 22px; }

  /* Inaktiv: nur das Symbol. */
  .navbar .nav-btn:not(.an) span:not(.nav-count) { display: none !important; }

  /* Aktiv: nimmt den uebrigen Platz und traegt den Namen neben dem Symbol.
     Bei sieben Reitern ist der Rest knapp - "Kündigung"/"Einkommen" brauchen
     rund 64-68px. Padding und Abstand bleiben deshalb bewusst knapp, damit
     der Name in aller Regel ganz erscheint statt per Ellipsis abzuschneiden. */
  .navbar .nav-btn.an {
    flex: 1 1 auto;
    min-width: 0;
    gap: 5px;
    padding: 0 7px;
  }
  .navbar .nav-btn.an span:not(.nav-count) {
    display: inline !important;
    overflow: hidden;
    font-size: 0 !important;          /* der lange Titel bleibt fuer Vorlesehilfen im HTML */
    white-space: nowrap;
    text-overflow: ellipsis;          /* Sicherheitsnetz - im Regelfall zeigen die Kurznamen unten ganz */
  }
  /* Kurznamen nur am aktiven Reiter — bei sieben Reitern reicht der Platz nicht
     fuer "Übersicht" oder "Kfz-Anträge" in voller Laenge (das clippte zu
     "Übers" mitten im Wort), deshalb dieselben knappen Namen wie am inaktiven
     Reiter im Popover-Label. */
  .navbar .nav-btn.an[data-ziel="uebersichtBox"] span:not(.nav-count)::after { content: "Start"; }
  .navbar .nav-btn.an[data-ziel="listeBox"] span:not(.nav-count)::after      { content: "Kfz"; }
  .navbar .nav-btn.an[data-ziel="toptBox"] span:not(.nav-count)::after       { content: "Beratung"; }
  .navbar .nav-btn.an[data-ziel="roptBox"] span:not(.nav-count)::after       { content: "Rente"; }
  .navbar .nav-btn.an[data-ziel="einkBox"] span:not(.nav-count)::after       { content: "Einkommen"; }
  .navbar .nav-btn.an[data-ziel="kuendBox"] span:not(.nav-count)::after      { content: "Kündigung"; }
  .navbar .nav-btn.an[data-ziel="kundenBox"] span:not(.nav-count)::after     { content: "Kunden"; }
  .navbar .nav-btn.an span:not(.nav-count)::after {
    display: block;
    font-size: 12.5px;
    font-weight: 750;
    letter-spacing: -.01em;
    line-height: 1.15;
  }

  /* Zaehler: am inaktiven Reiter eine kleine Scheibe an der Ecke des Symbols,
     am aktiven eine Pille hinter dem Namen. */
  .navbar .nav-btn .nav-count {
    display: block;
    position: absolute;
    top: 2px;
    right: 1px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    font-size: 9.5px;
    line-height: 13px;
  }
  .navbar .nav-btn.an .nav-count {
    position: static;
    height: 18px;
    border: 0;
    line-height: 18px;
  }
  .navbar .nav-btn .nav-count[hidden] { display: none; }
}


/* ---------------------------------------------------------------------------
   4) Eingabefelder: iOS zoomt beim Antippen hinein, sobald die Schrift kleiner
      als 16px ist. Danach steht die Seite verschoben da. 16px verhindert das.
--------------------------------------------------------------------------- */
@media (max-width: 560px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea {
    font-size: 16px !important;
    max-width: 100%;
  }
  /* Auswahlfelder und Datumsfelder brauchen genug Hoehe fuer den Daumen. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
  select {
    min-height: 44px;
  }
  textarea { min-height: 88px; }
  input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; }
}


/* ---------------------------------------------------------------------------
   5) Beruehrungsflaechen: Apple empfiehlt 44x44px. Viele Knoepfe im Manager
      sind fuer die Maus gebaut und am Handy zu flach.
--------------------------------------------------------------------------- */
@media (max-width: 560px) {
  .ue-btn,
  .topt-btn,
  .ropt-btn,
  .bib-btn,
  .user-btns button,
  .overlay-btns button,
  .kachel-menu button,
  .aufgabe-dialog-aktionen button {
    min-height: 44px;
    padding-inline: 14px;
    font-size: 14px;
  }
  .kebab {
    width: 44px;
    height: 44px;
    top: 4px;
    right: 4px;
  }
  /* Aktionsreihen brechen sauber um statt zu quetschen. */
  .ue-aktionen,
  .ropt-list-actions,
  .topt-list-actions { flex-wrap: wrap; gap: 8px; }
}


/* ---------------------------------------------------------------------------
   6) Uebersicht (Startseite).
      Die Tabelle stand mit min-width:960px in einem quer scrollenden Kasten —
      am iPhone musste man jede Zeile seitlich durchschieben. Sie wird jetzt zu
      Karten, wie es die Fall-Listen in Beratung und Rente schon machen.
--------------------------------------------------------------------------- */
@media (max-width: 560px) {
  /* Kennzahlen: zwei je Reihe, die letzte ueber die volle Breite. */
  .ue-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
  }
  .ue-stat { flex: none; padding: 11px 12px; }
  .ue-stat:last-child { grid-column: 1 / -1; }
  .ue-stat b { font-size: 22px; }

  .ue-karte { padding: 0; border: 0; background: transparent; box-shadow: none; }
  .ue-karte::before { display: none; }
  .ue-karte h3 { font-size: 19px; }
  .ue-notiz { font-size: 12px; }

  .ue-tabelle-wrap { overflow-x: visible; }
  .ue-tabelle {
    display: block;
    width: 100% !important;
    min-width: 0 !important;
    border: 0;
    background: transparent;
  }
  .ue-tabelle tbody { display: grid; gap: 10px; }
  /* Kopfzeile mit Sortier- und Filterknoepfen: bleibt als eigene Zeile ueber
     den Karten stehen, damit Sortierung und Bereichsfilter erreichbar sind. */
  .ue-tabelle tr:first-child {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
    padding: 0;
    border: 0;
    background: transparent;
  }
  .ue-tabelle tr:first-child th {
    width: auto !important;
    padding: 0;
    border: 0 !important;
    background: transparent;
  }
  /* "Kunde", "Status" und "Aktion" sind reine Beschriftungen ohne Funktion —
     auf der Karte stehen die Werte ohnehin beieinander. */
  .ue-tabelle tr:first-child th:nth-child(3),
  .ue-tabelle tr:first-child th:nth-child(4),
  .ue-tabelle tr:first-child th:nth-child(5) { display: none; }

  /* Eine Karte je Vorgang, alles untereinander. Die Reihenfolge ist die des
     Blicks: worum geht es (Bereich) - wie dringend (Frist) - wer (Kunde) -
     wo steht es (Status) - was kann ich tun (Knoepfe). */
  .ue-tabelle tr:not(:first-child) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--vm-border);
    border-radius: 14px;
    background: var(--vm-surface);
    box-shadow: var(--vm-card-shadow);
  }
  .ue-tabelle tr:not(:first-child):hover td { background-color: transparent; }
  .ue-tabelle td {
    display: block;
    width: auto !important;
    min-width: 0 !important;
    padding: 3px 13px;
    border: 0 !important;
    font-size: 14px;
    overflow: visible;
    overflow-wrap: anywhere;
    white-space: normal !important;
  }
  /* wiedervorlage.css gibt der PC-Tabelle feste Spaltenbreiten in Prozent
     (18/19/22/16/25 %, jeweils !important), damit auf dem Schirm kein
     Querbalken noetig ist. Diese Regeln sind spezifischer als das
     "width:auto !important" oben und galten deshalb auch in der Kartenansicht:
     jede Zelle blieb auf ihrem Spaltenanteil stehen und der Text brach
     buchstabenweise um ("Sabin e Krüge r"). Gleiche Spezifitaet wie dort,
     spaetere Quelle gewinnt. */
  .ue-tabelle th:nth-child(1), .ue-tabelle td:nth-child(1),
  .ue-tabelle th:nth-child(2), .ue-tabelle td:nth-child(2),
  .ue-tabelle th:nth-child(3), .ue-tabelle td:nth-child(3),
  .ue-tabelle th:nth-child(4), .ue-tabelle td:nth-child(4),
  .ue-tabelle th:nth-child(5), .ue-tabelle td:nth-child(5) { width: auto !important; }

  .ue-tabelle td:nth-child(2) { order: 1; padding-top: 12px; }   /* Bereich */
  .ue-tabelle td:nth-child(1) { order: 2; }                      /* Frist   */
  .ue-tabelle td:nth-child(3) { order: 3; padding-top: 5px; }    /* Kunde   */
  .ue-tabelle td:nth-child(4) { order: 4; padding-top: 7px; padding-bottom: 11px; }
  .ue-tabelle td:nth-child(5) {                                  /* Aktionen */
    order: 5;
    padding: 10px 13px 12px;
    border-top: 1px solid var(--vm-border) !important;
    background: var(--vm-surface-2);
  }

  /* Die Marken duerfen nicht mehr die ganze Spaltenbreite fuellen (das war
     fuer die Tabellenansicht gedacht) und muessen umbrechen duerfen. */
  .ue-tabelle td .ue-modul,
  .ue-tabelle td .ue-pill {
    display: inline-flex;
    width: auto;
    white-space: normal !important;
  }
  .ue-frist { min-width: 0 !important; overflow: visible; font-size: 13px; }
  .ue-tabelle .ue-kunde { display: block; font-size: 16.5px; font-weight: 700; white-space: normal !important; }
  .ue-tabelle .ue-notiz { margin-top: 2px; }
  /* Textknoepfe duerfen sich dehnen und schrumpfen; Vorschau, Termin und
     andere reine Symbolknoepfe bleiben quadratisch. */
  .ue-tabelle .ue-aktionen { gap: 7px; }
  /* Alle Textknoepfe teilen sich den Rest gleichmaessig und duerfen umbrechen. */
  .ue-tabelle .ue-aktionen .ue-btn {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    padding-inline: 8px;
    font-size: 13px;
    line-height: 1.2;
    white-space: normal;
    text-align: center;
  }
  .ue-tabelle .ue-aktionen .ue-btn-ic {
    flex: 0 0 44px;
    width: 44px;
    padding-inline: 0;
  }

  /* Sortieren und Bereichsfilter sind am Handy die einzigen Bedienelemente
     ueber der Liste — mit 24 bzw. 19 Pixel Hoehe waren sie kaum zu treffen.
     Der Trichter bekommt zusaetzlich Breite, er ist nur ein Symbol. */
  .ue-tabelle .ue-sort { min-height: 44px; padding-inline: 8px; font-size: 13px; }
  .ue-tabelle .ue-filter-btn { min-width: 44px; min-height: 44px; }
  .ue-tabelle .ue-filter { gap: 4px; }

  /* Der Bereichsfilter klappt als Liste auf — er darf nicht aus dem Bild laufen. */
  .ue-filter-panel { left: 0 !important; right: auto; max-width: calc(100vw - 32px); }
}


/* ---------------------------------------------------------------------------
   6b) Primaerknopf `.btn-gruen` (Anmelden, eVB ausgeben, Speichern).
       Die Klasse hat ausser im Profil-Panel und in der Bibliothek KEINE eigene
       Gestaltung — der wichtigste Knopf der Anmeldeseite war damit ein nackter,
       grauer Browserknopf von 28 Pixel Hoehe. Am Handy ist das zugleich zu
       klein zum Treffen und als Hauptaktion nicht erkennbar.
--------------------------------------------------------------------------- */
@media (max-width: 560px) {
  .btn-gruen {
    width: 100%;
    min-height: 48px;
    padding: 12px 18px;
    border: 0;
    border-radius: 13px;
    color: #fff;
    background: var(--vm-primary);
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
  }
  .btn-gruen:active { background: var(--vm-primary-strong); }
  .btn-gruen:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--vm-primary) 40%, transparent);
    outline-offset: 2px;
  }
  /* In der Bibliothek bringt der Knopf seine eigene Gestaltung mit. */
  .bib-video-upload .btn-gruen { width: auto; }
  /* Bibliothek-Karte: "Speichern" steht in einer Reihe mit "Löschen"
     (.bib-karte-aktionen ist flex). width:100% würde Löschen in die naechste
     Zeile schieben, obwohl Platz daneben waere. */
  .bib-karte-aktionen .btn-gruen { width: auto; flex: 1 1 auto; }
}


/* ---------------------------------------------------------------------------
   7) Dialoge und Ueberlagerungen: am Handy als Vollbild-Blatt statt als
      schwebendes Fenster. Sonst klebt der Inhalt am Rand und der untere
      Knopf sitzt hinter dem Home-Balken.
--------------------------------------------------------------------------- */
@media (max-width: 560px) {
  /* Das obere Polster muss die Statusleiste freihalten: seit viewport-fit=cover
     reicht die Seite bis unter Uhrzeit und Akkuanzeige. Ohne das lag der
     Dialogkopf darunter und der Schliessen-Knopf war nicht antippbar. */
  .overlay,
  .date-picker-overlay,
  .kdb-setup-overlay,
  .profile-overlay {
    align-items: flex-end;
    padding: max(10px, calc(env(safe-area-inset-top) + 6px)) 10px
             max(10px, env(safe-area-inset-bottom));
  }

  .overlay-inner,
  .transfer-box,
  .manual-box,
  .privacy-admin-box,
  .aufgabe-dialog,
  .kdb-setup-dialog,
  .profile-dialog {
    width: 100% !important;
    max-width: none !important;
    max-height: calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overflow-y: auto;
    border-radius: 20px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* Diese Dialoge scrollen bereits in ihrem Inhaltsbereich. Wenn zusaetzlich
     der ganze Dialog scrollt, wandert der Kopf mit dem Schliessen-Knopf aus
     dem Bild — genau dann findet man nicht mehr zurueck.
     Als Spalte gebaut: Kopf steht fest, der Inhalt nimmt den Rest und scrollt.
     Das ersetzt die feste Rechnung "100dvh - 152px", die mit dem zusaetzlichen
     Polster fuer die Statusleiste nicht mehr aufgeht. */
  .kdb-setup-dialog,
  .profile-dialog {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .kdb-setup-dialog .deas-dialog-kopf,
  .profile-dialog .deas-dialog-kopf { flex: 0 0 auto; }
  .kdb-setup-dialog .deas-dialog-inhalt,
  .profile-dialog-inhalt {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: 16px;
  }
  /* Schliessen-Knopf auf volle Daumengroesse. */
  .deas-dialog-schliessen {
    width: 44px;
    min-width: 44px;
    height: 44px;
    font-size: 20px;
  }
  .privacy-admin-grid { grid-template-columns: 1fr; }
  .privacy-admin-grid .voll { grid-column: auto; }

  /* eVB-Karte: die Nummer war mit 56px so gross, dass sie umbrach. */
  .evb-card { padding: 20px; border-radius: 20px; }
  .evb-card .evb-text { margin: 20px 0 16px; font-size: 18px; }
  .evb-card .evb-nr { font-size: 40px; }
  .evb-icon-btn { width: 56px; height: 56px; }
  .overlay-btns button { min-height: 48px; }

  /* PDF-Vorschau nutzt den ganzen Schirm. */
  .pdf-popup {
    left: 0; right: 0; top: 0;
    width: auto;
    height: 100dvh;
    border: 0;
    border-radius: 0;
  }
  /* Vollbild-Dialoge anderer Module ebenfalls ohne 100vw. */
  .ropt-versand-dialog { width: 100% !important; max-width: 100%; }
  .pdf-popup-kopf { padding-top: max(10px, env(safe-area-inset-top)); }
  .pdf-popup-inhalt { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }

  /* Telefonleitfaden und Bibliothek-Zoom ebenfalls randlos. */
}


/* ---------------------------------------------------------------------------
   8) Karten- und Rasterlayouts, die bei 414px noch zu breit sind.
      Alle Werte hier sind reine Umschaltungen auf eine Spalte.
--------------------------------------------------------------------------- */
@media (max-width: 560px) {
  /* Kundenkatalog: die Kundenliste ist eine Tabelle und wird weiter unten
     (900px-Block) wie die uebrigen Manager-Tabellen zur Karte umgebaut.
     Hier nur die Feinheiten der Karte. */
  .kdb-nur-mobil { display: inline; }
  .kdb-fallliste td:nth-child(2) { display: none; }        /* Vertraege stehen schon unter dem Namen */
  .kdb-fallliste td:nth-child(3) { grid-column: 1 / -1; }  /* Marken ueber die volle Breite */
  .kdb-fallliste td:last-child { grid-column: 1 / -1; padding-bottom: 12px; }
  .kdb-fallliste .kdb-btn { width: 100%; }
  .kdb-name { white-space: normal; font-size: 16px; }
  .kdb-subtabs { gap: 6px; padding: 6px; }
  .kdb-subtabs button { flex: 1 0 auto; padding-inline: 13px; font-size: 13.5px; }
  .kdb-panel { width: 100%; }
  .kdb-felder { grid-template-columns: 1fr; }
  .kdb-feld { flex-direction: column; gap: 2px; }
  .kdb-flbl { flex-basis: auto; font-size: 13px; }
  .kdb-skopf { flex-wrap: wrap; }
  .kdb-sbeitrag { white-space: normal; }

  /* Rentenliste: die Spalten heissen Kunde | Art | Status | Geaendert |
     Aktionen. Die Karten-Beschriftungen waren um eine Spalte verschoben —
     ueber der Art stand "Status", ueber dem Status "Standmitteilung". */
  #roptBox .ropt-fallliste td:nth-child(2)::before { content: "Art"; }
  #roptBox .ropt-fallliste td:nth-child(3)::before { content: "Status"; }

  /* Marken duerfen umbrechen, sonst schneidet die schmale Spalte sie ab. */
  .ropt-art, .ropt-pill, .topt-pill, .ue-pill, .vm-st-warte, .vm-st-wv {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .ropt-art { align-items: flex-start; }

  /* Beratung & Angebote */
  .topt-kanal-grid { grid-template-columns: 1fr; }
  .topt-stammdaten,
  .topt-tarifdaten,
  .topt-beitragsdaten,
  .topt-beitragskopf { grid-template-columns: minmax(0, 1fr) !important; }
  #toptBox .topt-feldz.topt-beitragskopf { grid-template-columns: minmax(0, 1fr) !important; }
  .topt-subtabs { gap: 6px; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
  .topt-subtabs button { min-height: 42px; }

  /* Rentenoptimierung */
  .ropt-kanal-grid { grid-template-columns: 1fr; }
  .ropt-calc-grid { grid-template-columns: 1fr; }
  .ropt-karte { overflow-x: visible; }

  /* Bibliothek */
  .bib-neu-felder { grid-template-columns: 1fr; }
  .bib-karten { grid-template-columns: 1fr; }
  .bib-zeile { grid-template-columns: 1fr; }

  /* Leitfaeden */
  .lf-layout { grid-template-columns: 1fr; }
  .lf-einstellungen { grid-template-columns: 1fr; }
  .lf-phase > .lf-karten-inhalt > header, .lf-einwand > .lf-karten-inhalt > header { grid-template-columns: 1fr; }
  .lf-unterkarte { grid-template-columns: 1fr; }

  /* Nutzerverwaltung / Detailansicht */
  .user-kopf { flex-wrap: wrap; }
  .det-zeile { flex-direction: column; gap: 2px; }
  .det-zeile .l { flex-basis: auto; font-size: 13px; }
  .liste-item { padding-right: 52px; }

  /* Restliche Tabellen, die nicht als Karten umgebaut sind: quer scrollbar
     machen, aber nur in ihrem eigenen Kasten — die Seite selbst bleibt fest. */
  .kdb-tabelle, .bib-tabelle, .topt-tabelle, .ropt-tabelle { font-size: 13px; }
}


/* ---------------------------------------------------------------------------
   9) Schriftgroessen und Abstaende: am kleinen Schirm etwas kompakter, damit
      pro Bildschirm mehr Inhalt sichtbar ist, ohne dass es gedraengt wirkt.
--------------------------------------------------------------------------- */
@media (max-width: 560px) {
  .app > main { padding-inline: 14px; }
  .main-tab-hero { padding: 15px 16px; }
  .main-tab-hero h2 { font-size: 21px; }
  .manager-brand .logo { height: 30px; }

  /* Ueberschriften der Untergruppen in der Detailansicht */
  .det-gruppe h3 { font-size: 14px; padding: 10px 13px; }

  /* Der Kunden-Link mit Kopierknopf brauchte drei Zeilen — kompakter. */
  .mein-link-bar { font-size: 12px; }
  .mein-link-bar .mll-copy { min-height: 40px; }
}


/* ---------------------------------------------------------------------------
   9b) Profilmenue am Handy wieder einblenden.
   Bisher verschwand die Profilkarte unter 520px komplett — damit waren
   "Profil Einstellungen", "Nutzer", "Bibliothek", "Leitfaeden" und vor allem
   "Abmelden" am iPhone ueberhaupt nicht mehr erreichbar. Neben Logo und
   Mondsymbol ist genug Platz fuer einen 44px-Kreis.
--------------------------------------------------------------------------- */
@media (max-width: 560px) {
  .profile-menu-wrap { display: inline-flex !important; }
  .profile-card {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    grid-template-columns: 34px;
    padding: 4px;
  }
  .profile-copy, .profile-chevron { display: none; }
  .profile-avatar { width: 34px; height: 34px; }
  .top-actions { gap: 6px; margin-left: auto; }
  .theme-toggle { width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; }

  /* Eigene Rufnummer + Profilkreis nebeneinander sprengten die Kopfzeile:
     "0221 9876543" bei 17px fett braucht ca. 170px, zusammen mit Logo blieb
     dem Profilkreis kein Platz mehr — nichts hier durfte schrumpfen (Logo
     intrinsisch, Rufnummer nowrap, Profilkreis min-width:44px), also lief die
     Zeile ueber und der Kreis wurde an den rechten Rand gedrueckt/abgeschnitten.
     Die eigene Nummer ist reine Ablesehilfe, kein Bedienelement - sie darf
     kleiner werden. Profilkreis bleibt garantiert 44px (flex-shrink:0). */
  .profile-menu-wrap, .theme-toggle { flex-shrink: 0; }
  .top-phone { min-width: 0; flex-shrink: 1; padding: 3px 8px; }
  .top-phone .top-phone-nr { overflow: hidden; text-overflow: ellipsis; font-size: 13px; }

  /* Das aufgeklappte Menue haengt unter der Kopfleiste und bleibt im Bild. */
  .profile-menu {
    position: fixed;
    top: calc(66px + env(safe-area-inset-top));
    right: 10px;
    left: auto;
    width: min(280px, calc(100% - 20px));
    max-height: calc(100dvh - 90px - env(safe-area-inset-top));
    overflow-y: auto;
  }
  .profile-menu .link { min-height: 46px; }
}


/* ---------------------------------------------------------------------------
   10) Weiches Scrollen in allen eigenstaendig scrollenden Bereichen; ohne
       -webkit-overflow-scrolling ruckelt es auf aelteren iOS-Versionen.
--------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .kachel-menu,
  .kdb-mf-panel,
  .privacy-notice,
  .profile-menu {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  /* Aufklapp-Menues duerfen nie ueber den rechten Rand hinauslaufen. */
  .kachel-menu, .kdb-mf-panel, .profile-menu {
    max-width: calc(100vw - 20px);
  }
}


/* ===========================================================================
   11) KEIN SEITLICHES SCHIEBEN — nirgendwo.

   Am Handy soll ausschliesslich hoch und runter gewischt werden. Ueberall dort,
   wo bisher ein Kasten quer gescrollt hat (Reiterleisten, Karten, Tabellen),
   bricht der Inhalt jetzt um. Dieser Block steht bewusst ganz am Ende, damit er
   die Regeln der Module sicher uebersteuert.
=========================================================================== */
@media (max-width: 900px) {

  /* --- Kaesten, die bisher quer gescrollt haben --- */
  .topt-karte,
  .topt-editor,
  .topt-listenkarte,
  .ropt-karte,
  .ropt-listenkarte,
  .ropt-email-rich-content,
  .ue-tabelle-wrap,
  .tabelle-scroll,
  .lf-layout,
  .bib-karten,
  #toptBox .topt-karte,
  #toptBox .topt-editor,
  #roptBox .ropt-karte {
    overflow-x: hidden !important;
    overflow-x: clip !important;
    max-width: 100%;
    min-width: 0;
  }

  /* --- Reiterleisten: umbrechen statt schieben --- */
  .topt-subtabs,
  .ropt-subtabs,
  .lf-reiter,
  .bib-reiter {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
  }
  .topt-subtabs button,
  .ropt-subtabs button {
    flex: 1 1 auto !important;
    min-width: 0;
    white-space: normal;
  }

  /* --- Restliche Tabellen werden zu Karten ---
     Eine fuenfspaltige Tabelle in 375 Pixel zu pressen zerbricht die Woerter
     ("Kraftfahr tversich erung"). Stattdessen wird jede Zeile eine Karte:
     erste Spalte als Titel ueber die volle Breite, der Rest zweispaltig.
     Die Listen, die weiter oben schon einen eigenen Karten-Umbau haben,
     sind ausgenommen. */
  table:not(.ue-tabelle):not(.topt-fallliste):not(.topt-vorlagenliste):not(.ropt-fallliste):not(.ropt-produktliste):not(.topt-vergleichstabelle):not(.vergleich-tabelle) {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    border: 0;
    border-collapse: separate;
  }
  table:not(.ue-tabelle):not(.topt-fallliste):not(.topt-vorlagenliste):not(.ropt-fallliste):not(.ropt-produktliste):not(.topt-vergleichstabelle):not(.vergleich-tabelle) > thead { display: none; }
  table:not(.ue-tabelle):not(.topt-fallliste):not(.topt-vorlagenliste):not(.ropt-fallliste):not(.ropt-produktliste):not(.topt-vergleichstabelle):not(.vergleich-tabelle) > tbody {
    display: grid;
    gap: 9px;
  }
  table:not(.ue-tabelle):not(.topt-fallliste):not(.topt-vorlagenliste):not(.ropt-fallliste):not(.ropt-produktliste):not(.topt-vergleichstabelle):not(.vergleich-tabelle) > tbody > tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--vm-border, #d7ded9);
    border-radius: 12px;
    background: var(--vm-surface, #fff);
  }
  table:not(.ue-tabelle):not(.topt-fallliste):not(.topt-vorlagenliste):not(.ropt-fallliste):not(.ropt-produktliste):not(.topt-vergleichstabelle):not(.vergleich-tabelle) > tbody > tr > td {
    display: block;
    width: auto !important;
    min-width: 0;
    padding: 8px 11px;
    border: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
  /* Erste Zelle ist fast immer der Name/die Bezeichnung: volle Breite, fett. */
  table:not(.ue-tabelle):not(.topt-fallliste):not(.topt-vorlagenliste):not(.ropt-fallliste):not(.ropt-produktliste):not(.topt-vergleichstabelle):not(.vergleich-tabelle) > tbody > tr > td:first-child {
    grid-column: 1 / -1;
    padding-bottom: 4px;
    font-weight: 700;
  }
  /* Spaltenname als Beschriftung — nur wo ihn das Markup mitliefert. */
  td[data-spalte]:not(:first-child)::before {
    content: attr(data-spalte);
    display: block;
    margin-bottom: 2px;
    color: var(--vm-muted, #6b7680);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .06em;
    text-transform: uppercase;
  }
  td[data-spalte=""]::before { content: none; }

  /* Potenzial-Tab (Kundenkatalog): einzige Tabelle mit <tfoot> im Manager.
     Der generische Umbau oben greift nur auf thead/tbody — ohne diese Zeilen
     bliebe die Summenzeile als table-footer-group stehen und fiele optisch
     aus dem Karten-Raster. */
  .pot-tab tfoot { display: grid; gap: 9px; }
  .pot-tab tfoot tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--vm-border, #d7ded9);
    border-radius: 12px;
    background: var(--vm-surface-2);
  }
  .pot-tab tfoot td {
    display: block;
    width: auto !important;
    min-width: 0;
    padding: 8px 11px;
    border: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
  .pot-tab tfoot td:first-child { grid-column: 1 / -1; padding-bottom: 4px; font-weight: 700; }

  /* Tabellen, die ihre Kopfzeile ohne <thead> als erste Zeile fuehren. */
  .kdb-tabelle > tr:first-child, .bib-tabelle > tr:first-child { display: none; }

  /* Kundenliste: als Karte haben Betreuer und Stand wieder Platz — die
     Tablet-Regel in manager-ui.css blendet sie nur fuer die Tabelle aus. */
  .kdb-fallliste td:nth-child(4), .kdb-fallliste td:nth-child(5) { display: block; }
  .kdb-fallliste tbody tr:hover td { background-color: transparent; }

  /* --- Nichts darf breiter sein als sein Elternteil --- */
  img, svg, video, iframe, canvas, pre, code { max-width: 100%; }
  pre { white-space: pre-wrap; overflow-wrap: anywhere; }

  /* Lange Adressen, Links und Kundennummern reissen sonst die Karte auf. */
  .mll-url, .user-link, .kdb-fwert, .det-zeile .v, .ue-kunde, .ue-notiz {
    overflow-wrap: anywhere;
  }

  /* Raster-Kinder schrumpfen nur mit min-width:0 unter ihre Inhaltsbreite.
     Ohne das laeuft die Karte trotz einspaltigem Raster rechts heraus. */
  .ue-tabelle td,
  .topt-feldz > *, .ropt-feldz > *,
  .kdb-felder > *, .stats-grid > *, .manager-dashboard-grid > * { min-width: 0; }
}