/* ─────────────────────────────────────────────────────────────────────────
   Berater-Portal – Mobil-Hülle (bis 719px)

   Quelle: PortalVertriebMobil.dc.html aus der Design-ZIP. Die Maße stehen
   wörtlich in DESIGN-VERTRAG.md, Abschnitt "Mobil"; bei Widerspruch
   zwischen dieser Datei und dem Vertrag gilt der Vertrag, zwischen Vertrag
   und Artboard gilt das Artboard.

   ── Warum eine eigene Datei ──

   JEDE Regel hier steht in einem @media (max-width: …)-Block. Das ist keine
   Stilfrage, sondern die Zusage "am Desktop ändert sich nichts" in Bauart
   gegossen: Datei entfernen → Zustand von vorher. test/mobil-css.test.js
   hält es fest und wird rot, sobald eine Regel herausrutscht.

   Derselbe Gedanke wie bei passkey.js (server.js): was nur einen Teil des
   Portals betrifft, darf nicht den Rest mitnehmen können.

   ── Warum die Grenze bei 719px liegt und nicht bei 899 ──

   Ab 900px steht die Seitenleiste. Zwischen 720 und 899 greift weiter die
   eingeklappte Zeile aus app.css:211 – auf einem Tablet ist sie in Ordnung.
   Darunter, also auf Telefonen, greift diese Hülle. Telefone bekommen das
   Neue, Tablets das Bekannte; ein iPad im Hochformat (768px) fällt bewusst
   in den mittleren Bereich.

   app.css wird nicht angefasst. Wo eine Desktop-Regel überstimmt werden
   muss, gewinnt diese Datei über die Ladereihenfolge (sie kommt später) –
   und wo das nicht reicht, über Spezifität. Nie über !important.
   Commit: c626cd6
   ───────────────────────────────────────────────────────────────────────── */

@media (max-width: 719px) {
  /* Die Hülle rechnet in Blöcken, nicht in zwei Spalten. */
  .app { display: block; }
}

/* ── Kopfzeile ──
   Maße wörtlich aus PortalVertriebMobil: padding 54px 18px 12px, Titel 21px
   Condensed ls -0.01em, Haarlinie unten. Die 54px sind die iOS-Statusleiste
   des Artboards – im Betrieb ist das env(safe-area-inset-top) plus 12.

   Der Titel kommt aus {% block titel %}, den jedes Seiten-Template ohnehin
   definiert. Deshalb kostet dieser Kopf keine einzige Template-Änderung.

   Die Suche wandert ins Mehr-Sheet: sie ist 330px breit angelegt und würde
   den Titel von der Seite drängen. Was die Seite an eigenen Bedienelementen
   mitbringt (Aktualisieren, Pillen, Ton-Schalter), bleibt und rückt unter
   den Titel – es zu verstecken wäre der Fehler, den man erst bemerkt, wenn
   jemand unterwegs die Liste nicht aktualisieren kann. */
@media (max-width: 719px) {
  .seitenleiste { display: none; }

  .topbar {
    position: sticky; top: 0; z-index: 20;
    height: auto; flex-wrap: wrap; gap: 8px;
    padding: calc(env(safe-area-inset-top, 0px) + 12px) 18px 12px;
    background: var(--bg); border-bottom: 1px solid var(--linie);
  }
  .topsuche { display: none; }

  .mobil-kopf {
    flex: 1 1 100%; min-width: 0;
    font-family: var(--schrift-kopf); font-weight: 600; font-size: 21px;
    letter-spacing: -.01em; line-height: 1.15; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .topbar-rechts { margin-left: 0; flex-wrap: wrap; }
}

/* Leere Werkzeugleiste (die meisten Seiten haben keine) soll auch keinen
   Abstand erzeugen. `:empty` greift nicht – im Kasten steht der Umbruch aus
   dem Template, also ein Textknoten. Geprüft wird deshalb auf Kind-Elemente.
   Alte Geräte ohne :has() bekommen einen 8px-Abstand zu viel, sonst nichts. */
@media (max-width: 719px) {
  @supports selector(:has(*)) {
    .topbar-rechts:not(:has(*)) { display: none; }
  }
}

/* ── Die Hülle am Desktop abschalten ──
   Die einzige min-width-Regel der Datei, und die Vorbedingung für alles
   andere: Tab-Leiste und Kopfzeile stehen im Markup jeder Seite. Ohne diese
   Regel wären sie oberhalb der Grenze nicht unsichtbar, sondern ungestylte
   Kästen – der Seitentitel stünde in der Kopfzeile neben der Suche und die
   Reiter als nackte Linkliste unter dem Inhalt.

   test/mobil-css.test.js lässt hier ausschliesslich .mobil-*-Selektoren zu.
   Alles andere in einem min-width-Block wäre ein Eingriff in den Desktop. */
@media (min-width: 720px) {
  .mobil-tabs, .mobil-kopf { display: none; }
}

/* ── Tab-Leiste unten ──
   Maße wörtlich aus PortalVertriebMobil: Raster aus vier gleichen Spalten,
   Haarlinie oben, padding 9px 6px 26px. Die 26px sind der Home-Balken des
   iPhone – im Betrieb env(safe-area-inset-bottom). Glied als Spalte, gap 3,
   padding 8px 4px, Beschriftung 12px ls .02em; aktiv Akzent mit 2px
   Oberkante, inaktiv sekundär. Zähler padding 0 6px, 10.5px, dunkles Feld.

   Kindkombinator überall: im Kasten steckt auch das Sheet, und dessen Links
   sind keine Reiter. */
@media (max-width: 719px) {
  .mobil-tabs {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    display: grid; grid-template-columns: repeat(5, 1fr);
    background: var(--bg); border-top: 1px solid var(--linie);
    padding: 6px 2px calc(6px + env(safe-area-inset-bottom, 0px));
  }
  .mobil-tabs > a, .mobil-sheet > summary {
    display: flex; flex-direction: column; align-items: center;
    justify-content: flex-start; gap: 3px;
    min-height: 48px; padding: 6px 2px;
    text-decoration: none; color: var(--dezent);
    font-family: var(--schrift-text); font-size: 10.5px; letter-spacing: .02em;
    border-top: 2px solid transparent; cursor: pointer;
  }
  .mobil-tabs > a.aktiv {
    color: var(--akzent); border-top-color: var(--akzent); font-weight: 600;
  }

  /* Der Zähler sitzt an der Ecke des Symbols, nicht hinter dem Wort. Hinter
     dem Wort zwingt er die Beschriftung zum Umbrechen, sobald sie "Termine"
     heisst und die Zahl dreistellig wird – und er liest sich als Teil des
     Namens statt als Menge. */
  .mobil-tab-bild { position: relative; display: block; line-height: 0; }
  .mobil-tab-bild .icon { display: block; }
  .mobil-tabs .mobil-tab-zahl, .mobil-sheet > summary .mobil-tab-zahl {
    position: absolute; top: -5px; left: 13px;
    min-width: 15px; padding: 0 3px; line-height: 15px; text-align: center;
  }
  .mobil-tab-zahl {
    padding: 0 6px; font-size: 10.5px;
    font-variant-numeric: tabular-nums;
    background: var(--feld); color: var(--feld-schrift);
  }

  /* Die Leiste liegt über dem Inhalt. Ohne diesen Platz stünde die letzte
     Zeile jeder Liste dahinter – auf einer Lead-Liste also genau die, die
     man noch nicht abgearbeitet hat. */
  .inhalt { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}

/* ── Mehr-Sheet ──
   Maße wörtlich: Rücken rgba(29,31,32,.45) – hier als color-mix auf --text,
   damit das dunkle Schema mitgeht und kein roher Hex-Wert in der Datei
   steht. Blatt unten bündig über die volle Breite, Haarlinie oben,
   padding 18px 18px 30px.

   Das <details> ist die vierte Rasterzelle, der <summary> ihr Reiter. Ist
   es zu, versteckt der Browser das Blatt von sich aus – dafür braucht es
   keine Regel. Der Rücken hängt am summary: ein Tipp daneben schliesst,
   weil der Tipp den summary trifft. */
@media (max-width: 719px) {
  .mobil-sheet > summary { list-style: none; }
  .mobil-sheet > summary::-webkit-details-marker { display: none; }
  .mobil-sheet[open] > summary { color: var(--akzent); font-weight: 600; }
  .mobil-sheet[open] > summary::before {
    content: ""; position: fixed; inset: 0; z-index: 31;
    background: color-mix(in srgb, var(--text) 45%, transparent);
  }

  /* Ein geschlossenes <details> verbirgt seine Kinder von selbst - aber
     ueber content-visibility, und wie das mit einem position: fixed-Kind
     zusammengeht, ist zwischen den Browsern nicht gleich. Ginge es schief,
     klebte das Blatt dauerhaft ueber der Seite. Deshalb ausdruecklich. */
  .mobil-sheet:not([open]) .mobil-sheet-blatt { display: none; }

  .mobil-sheet-blatt {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 32;
    display: flex; flex-direction: column; gap: 16px;
    max-height: 80vh; overflow-y: auto;
    background: var(--menue); border-top: 1px solid var(--linie);
    padding: 18px 18px calc(30px + env(safe-area-inset-bottom, 0px));
  }
  .mobil-sheet-suche { display: flex; gap: 8px; margin: 0; }
  .mobil-sheet-suche input {
    flex: 1; min-width: 0; height: 44px; padding: 0 12px;
    border: 1px solid var(--linie); background: var(--eingabe); color: var(--text);
  }
  .mobil-sheet-suche input:focus { outline: none; border-color: var(--akzent); }
  .mobil-sheet-nav { display: flex; flex-direction: column; }
  .mobil-sheet-nav a {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    min-height: 44px; padding: 10px 0;
    text-decoration: none; color: var(--text);
    border-bottom: 1px solid var(--linie);
    font-family: var(--schrift-kopf); font-weight: 600; font-size: 15.5px;
  }
  .mobil-sheet-fuss {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
  }
}

/* ── Tabellen werden Karten ──
   Der zweite Grund, warum das Portal am Telefon unbrauchbar war. Zwei
   getrennte Fehler, hier beide behoben.

   1. Die Seite lief seitlich weg. Schuld ist der Kunstgriff aus app.css:253:
      er zieht den Tabellenrahmen per transform aus der Lesespalte auf
      calc(100vw - 2rem). Am Desktop verschafft das den Admin-Tabellen die
      volle Breite; am Telefon ist 100vw bereits alles, und die Verschiebung
      um 50% schiebt die Seite an sich seitwärts. Unter der Grenze aus.

   2. Alle Zellen tragen white-space: nowrap. Aus jeder Zeile wird deshalb
      eine Karte und aus jeder Zelle eine Zeile "Label · Wert". Das Label
      kommt aus data-spalte – ein Attribut, das am Desktop nichts tut
      (test/mobil-tabellen.test.js hält fest, dass keine Zelle es verliert).

   Bewusst `.inhalt table` und nicht `.tabelle`: konto.njk hat eine Tabelle
   ohne Klasse, und ausgerechnet dort stehen die Passkeys. Ihr die Klasse
   nachzurüsten hätte den Desktop verändert. */
@media (max-width: 719px) {
  .inhalt.breit > .karte:has(> .tabellenrahmen),
  .inhalt.breit > .tabellenrahmen {
    width: auto; min-width: 0; max-width: 100%;
    position: static; left: auto; transform: none;
  }

  .inhalt table:not(.tabelle-breit) { display: block; font-size: 14px; }
  .inhalt table:not(.tabelle-breit) thead { display: none; }
  .inhalt table:not(.tabelle-breit) tbody,
  .inhalt table:not(.tabelle-breit) tr { display: block; }
  .inhalt table:not(.tabelle-breit) tr {
    border: 1px solid var(--linie); margin-bottom: 12px; padding: 2px 12px;
  }
  .inhalt table:not(.tabelle-breit) td {
    display: flex; align-items: baseline; gap: 12px;
    white-space: normal; text-align: left;
    padding: 8px 0; border-bottom: 1px solid var(--linie);
  }
  .inhalt table:not(.tabelle-breit) tr > td:last-child { border-bottom: 0; }
  .inhalt table:not(.tabelle-breit) td::before {
    content: attr(data-spalte);
    flex: none; width: 104px;
    font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
    line-height: 1.9; color: var(--dezent);
  }
  /* Aktionsspalten und Summen-/Leerzeilen tragen kein Label und laufen über
     die volle Breite. `[data-spalte=""]` trifft genau die. */
  .inhalt table:not(.tabelle-breit) td[data-spalte=""] { display: block; }
  .inhalt table:not(.tabelle-breit) td[data-spalte=""]::before { content: none; }

  /* Die eine Ausnahme (admin_kampagnen) läuft seitwärts – aber im Rahmen,
     nicht mit der Seite. Der Rahmen kann das schon (app.css:652), ihm fehlte
     nur der Anlass, weil der transform ihn ausgehebelt hat. */
  .tabellenrahmen { -webkit-overflow-scrolling: touch; }
}

/* ── Held-Karte ──
   Maße wörtlich aus PortalVertriebMobil: padding 15px 16px, Name 26px
   Condensed /1.08 ls -.02em, Feldzeilen als Spalte mit gap 7 (Label 96px
   breit, 9.5px versal; Wert 17px Condensed tabular mit Ellipsis),
   Wähltaste über die volle Breite mit 58px Höhe und 20px Schrift,
   Zweittaste 44px.

   Am Desktop stehen Info, Uhr und Aktion nebeneinander (.held-lage als
   flex-wrap mit .held-aktion auf festen 240px). Am Telefon ist das eine
   Spalte – 240px neben dem Namen wären zwei Drittel des Bildschirms. */
@media (max-width: 719px) {
  .held { padding: 15px 16px; }
  .held-name { font-size: 26px; line-height: 1.08; }
  .held-lage { flex-direction: column; align-items: stretch; gap: 13px; }
  .held-wer { flex: 1 1 auto; }

  .held .feldzeile { flex-direction: column; flex-wrap: nowrap; gap: 7px; margin: 10px 0 0; }
  .held .feld { display: flex; align-items: baseline; gap: 10px; }
  .held .feld dt { flex: none; width: 96px; letter-spacing: .1em; }
  .held .feld dd {
    min-width: 0; flex: 1; font-size: 17px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    overflow-wrap: normal;
  }

  /* Die Uhr steht am Desktop rechtsbündig neben dem Namen; in der Spalte
     hätte "rechts" keinen Bezugspunkt mehr. */
  .held-zeit { text-align: left; margin-left: 0; }

  .held-aktion { width: 100%; }
  .held-aktion .tel-nummer { height: 58px; font-size: 20px; padding: 0 1rem; }
  .held-aktion .knopf-linie { height: 44px; font-size: 14.5px; }
}

/* ── Zeilen der Tagesliste ──
   Maße wörtlich: padding 13px 2px, gap 11, Haarlinie unten; Name 18px
   Condensed /1.15, Meta 11px sekundär mit Ellipsis, Wähltaste 50x50.

   Am Desktop ist die Zeile dreispaltig (Lead | Zeit | Aktion). Am Telefon
   reicht die Breite dafür nicht: Lead und Zeit stapeln sich links, die
   Wähltaste steht rechts über beide Reihen. Sie ist am Telefon das Ziel der
   Zeile, nicht eine Aktion unter mehreren – deshalb bleibt sie als Fläche
   stehen und verliert nur ihre Beschriftung.

   "Öffnen" fällt weg: der Name ist bereits ein Link auf denselben Lead
   (.reihe-lead). Zwei Wege zur selben Seite kosten hier die halbe Zeile. */
/* `.reihe` ist eine GETEILTE Basisklasse, und das ist hier am 29.08.2026
   teuer geworden: Die Tagesliste und die Wiedervorlagen tragen darin
   Lead | Zeit | Aktion – die Lead-Liste (`.lead-zeile`) und die
   Reklamationen der Verwaltung (`.rekla-reihe`) etwas ganz anderes. Beide
   haben ihr eigenes Raster in app.css, mit derselben Spezifität (0,1,0).
   Diese Datei lädt später, also gewann eine ungeschützte `.reihe`-Regel –
   und /admin/reklas stand mit verschobenen Spalten im Echtbetrieb.

   Deshalb der ausdrückliche Ausschluss. Wer hier eine Regel ergänzt, muss
   ihn mitschreiben; `.reihe` allein trifft vier Seiten, nicht eine. */
@media (max-width: 719px) {
  .reihe:not(.lead-zeile):not(.rekla-reihe) {
    display: grid; grid-template-columns: minmax(0, 1fr) 50px;
    align-items: center; gap: 2px 11px;
    /* Links 14px statt der 2px des Artboards. Dort ist der Streifen ein
       eigenes Element in der Zeile; hier ist er ein 5px-Innenschatten
       (`.reihe-rand-warn`/`-akzent`) und läge damit über dem ersten
       Buchstaben des Namens. */
    padding: 14px 2px 14px 14px;
  }
  .reihe:not(.lead-zeile):not(.rekla-reihe) > .reihe-lead { grid-column: 1; grid-row: 1; }
  .reihe:not(.lead-zeile):not(.rekla-reihe) > .reihe-zeit {
    grid-column: 1; grid-row: 2;
    flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 8px;
    font-size: 11px;
  }
  .reihe:not(.lead-zeile):not(.rekla-reihe) > .reihe-aktion { grid-column: 2; grid-row: 1 / span 2; }

  /* Diese beiden dürfen alle Zeilen treffen: sie setzen nur Schriftgrößen,
     kein Raster. */
  .reihe .reihe-lead strong { font-size: 18px; line-height: 1.15; }
  /* Umbrechen statt abschneiden. app.css setzt hier nowrap mit Ellipsis,
     und das ist am Desktop richtig: die Zeile ist dort 500px breit und
     eine zweite Zeile waere Unruhe. Am Telefon sind es 300px, und die
     Zeichenkette traegt Geburtsdatum, Alter, Rufnummer, Mail und Ort - mit
     Ellipsis fallen die letzten beiden weg. Das war im Bild vom 29.08. der
     Grund, warum die Liste "zerquetscht" aussah: nicht zu wenig Platz,
     sondern die falsche Entscheidung, was bei zu wenig Platz passiert.

     Die Zeile ist in der Route zu EINER Zeichenkette zusammengesetzt
     (routes/heute.js), sie laesst sich hier also nicht zerlegen - aber sie
     darf umbrechen. */
  .reihe .reihe-info {
    font-size: 11.5px; line-height: 1.5; color: var(--dezent);
    overflow: visible; text-overflow: clip; white-space: normal;
    margin-top: 2px;
  }
  .reihe .reihe-zeit .zeit-wert { font-size: 13px; }

  /* Nur das Icon. Die Beschriftung ist ein blanker Textknoten neben dem SVG
     und lässt sich nicht einzeln ansprechen – font-size: 0 nimmt sie weg,
     das SVG trägt seine Maße als Attribut und bleibt. */
  .reihe:not(.lead-zeile):not(.rekla-reihe) .reihe-aktion .tel {
    width: 50px; height: 50px; padding: 0; gap: 0;
    font-size: 0; display: grid; place-items: center;
  }
  .reihe:not(.lead-zeile):not(.rekla-reihe) .reihe-aktion .knopf-linie { display: none; }

  /* Die Reklamationszeile behält ihr Raster aus app.css (ab 899px zwei
     Spalten). Sie braucht nur dasselbe linke Polster, weil auch sie eine
     Akzentkante als Innenschatten trägt. */
  .rekla-reihe { padding-left: 14px; }
}

/* ── Balkenköpfe ──
   Maße wörtlich: padding 9px 12px, gap 8, Titel 12.5px Condensed versal
   ls .09em, Zähler in derselben Schrift mit Opacity .75. */
@media (max-width: 719px) {
  .balken { padding: 9px 12px; gap: 8px; }
  .balken-titel { font-size: 12.5px; letter-spacing: .09em; }
  .balken-titel .zahl { opacity: .75; }
  .balken-hinweis { font-size: 11px; }
}

/* ── Der Testbalken hat Vorfahrt ──
   Balken und Kopfzeile kleben beide bei top: 0, der Balken liegt darüber
   (z-index 30 gegen 20) – ohne Versatz verdeckt er den Seitentitel. Dieselbe
   Lösung wie für die Seitenleiste am Desktop (app.css:564), mit derselben
   gemessenen Höhe und demselben Rückfallwert. */
@media (max-width: 719px) {
  body:has(.testbalken) .topbar { top: var(--testbalken-hoehe, 2rem); }
}

/* ── Seiten ohne eigenen Mobil-Entwurf ──
   Deine Zahlen, Rechnungen, Team, Konto, Anmeldung und die acht Seiten der
   Verwaltung zeigt kein Artboard. Es gilt Regel 4 des DESIGN-VERTRAG.md:
   "was das Artboard nicht zeigt, wird in diesem Vokabular gestaltet". Kein
   Neuentwurf je Seite, sondern Regeln für die wiederkehrenden Bausteine. */
@media (max-width: 719px) {
  .inhalt { padding-left: 16px; padding-right: 16px; }

  /* Der Seitentitel steht seit der Kopfzeile zweimal auf der Seite. Der
     obere klebt und ist immer da, der hier scrollt weg – also fällt dieser.

     Anmerkung, falls die Beschriftung auffällt: drei Seiten nennen sich im
     <h1> anders als im {% block titel %} (Meine Leads/Leads, Deine
     Zahlen/Statistik, Mein Team/Team). Am Telefon gewinnt jetzt die kürzere
     Fassung aus dem Block. Sie anzugleichen hiesse, den Browser-Tab zu
     ändern – eine Desktop-Änderung, und die ist hier nicht beauftragt. */
  .seitenkopf h1 { display: none; }
  .seitenkopf { margin-bottom: .7rem; }

  /* Kennzahlen: zwei Spalten. Drei (die Vorgabe) lassen auf 400px keine
     Zahl mehr lesbar, eine verschenkt die halbe Höhe. */
  .kpis, .kpis.vier, .kpis.fuenf { grid-template-columns: repeat(2, 1fr); }
  .kachelgitter { grid-template-columns: repeat(2, 1fr); }

  /* Diagramme untereinander statt nebeneinander. */
  .diagramm-band { grid-template-columns: 1fr; }

  /* Segmente als Raster, nicht als umbrechende Zeile.
     `.tabs` ist am Desktop ein inline-flex in EINEM Rahmen. Umbrechen lassen
     hilft am Telefon nicht: acht Reiter (die Unternavigation der Verwaltung)
     ergeben drei Zeilen unterschiedlicher Länge, die im gemeinsamen Rahmen
     ausfransen. Als Raster stehen sie bündig.

     Die Trennlinien entstehen aus 1px Fuge auf der Linienfarbe, nicht aus
     Rändern an den Gliedern – so kann keine Linie doppelt liegen, und
     quadratisch bleibt es auch. */
  .tabs {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 1px; background: var(--linie);
    width: 100%; margin: 0 0 12px; overflow: visible;
  }
  .tabs a {
    display: flex; align-items: center; justify-content: center;
    height: auto; min-height: 44px; padding: 10px 12px;
    background: var(--bg); text-align: center;
  }
  .tabs a.aktiv { background: var(--akzent); }

  /* Filterzeilen: jede Steuerung über die volle Breite. Nebeneinander
     bleiben auf 400px zwei Auswahllisten von je 90px übrig. */
  .filterzeile { flex-direction: column; align-items: stretch; }
  .filterzeile label, .filterzeile select,
  .filterzeile button, .filterzeile input[type=search] { width: 100%; }

  /* 16px ist keine Geschmacksfrage: iOS zoomt beim Fokus in jedes Feld, das
     kleiner gesetzt ist, und kommt aus dem Zoom nicht von selbst zurück.
     Der Rest der Seite steht danach halb ausserhalb des Bildschirms. */
  input:not([type=checkbox]):not([type=radio]), select, textarea { font-size: 16px; }

  /* Bedienelemente auf Daumenmaß. --hoehe ist 36px und gilt portalweit; die
     Regel steht am Ende von app.css und gewinnt dort über die Reihenfolge –
     hier gewinnt sie nicht mehr, weil diese Datei später kommt.

     Kontrollkästchen und Optionsfelder sind ausgenommen: sie sind Quadrate,
     kein Textfeld. 44px Mindesthöhe zerrt sie in die Länge, ohne dass die
     Trefferfläche wächst – die liegt beim Label daneben. */
  .knopf, .knopf-linie, .knopf-linie.klein, .tel,
  select, textarea, button,
  input:not([type=checkbox]):not([type=radio]):not([type=hidden]) { min-height: 44px; }
  input[type=checkbox], input[type=radio] { width: 20px; height: 20px; }

  /* Karten enger: 1.1rem Seitenrand in einer 16px-Spalte ist doppelt
     berandet. Der Abstand ZWISCHEN Karten bleibt, er trennt sie. */
  /* Das Artboard setzt 15px 16px. .85rem waren 13.6px – eng genug, dass
     Rahmen und Inhalt sich beruehren. */
  .karte { padding: 15px 16px; }

  /* Die Fremdansicht-Warnung darf nicht in eine Zeile gequetscht werden –
     sie sagt, ob Schreiben erlaubt ist. */
  .als-banner { flex-direction: column; align-items: flex-start; gap: .3rem; }
}

/* ── Das Band zwischen 600 und 719 px ──
   app.css behandelt 599px als Telefongrenze; diese Hülle beginnt bei 719.
   Dazwischen liegt ein Band, das die neue Navigation bekäme, aber noch die
   alten Tablet-Raster: aufgeklappte Foldables (Pixel Fold 673px, Galaxy Z
   Fold ~717px) – und ein Foldable ist ein Telefon.

   Die Regeln unten sind deshalb die vorhandenen 599er-Regeln, auf 719
   hochgezogen. Unterhalb von 599 stehen sie doppelt und sagen dasselbe;
   das ist billiger und ehrlicher, als in app.css zwölf Grenzwerte zu
   verschieben – die Datei wird hier nicht angefasst.

   Eine Regel ist KEINE Wiederholung: `.wv-liste .reihe` hat mit (0,2,0) mehr
   Gewicht als das `.reihe` dieser Datei und hätte die Wiedervorlagen-Liste
   auf jeder Breite bei drei Spalten gehalten – der einzige Ort, an dem die
   Tagesliste und die Terminliste auseinandergelaufen wären. */
@media (max-width: 719px) {
  /* Lead-Liste: Kopfzeile weg, Zeile zweispaltig. */
  .lead-kopf { display: none; }
  .lead-zeile { grid-template-columns: minmax(0, 1fr) auto; gap: .2rem .7rem; }
  .lead-zeile .lead-kontakt, .lead-zeile .lead-lage { grid-column: 1; }
  .lead-zeile .lead-aktion {
    grid-column: 2; grid-row: 1 / span 3;
    flex-direction: column; align-items: stretch; justify-content: flex-start;
  }
  .lead-mail { white-space: normal; overflow-wrap: anywhere; }
  .filterleiste { align-items: stretch; }

  /* Wiedervorlagen: dasselbe Raster wie die Tagesliste, samt Wähltaste.
     Der Ausschluss ist hier rechnerisch entbehrlich – innerhalb von
     `.wv-liste` gibt es weder Lead-Zeilen noch Reklamationszeilen. Er steht
     trotzdem da, weil "harmlos, weil ich es geprüft habe" die Begründung
     ist, die beim nächsten Umbau niemand mehr nachprüft. Eine Regel, die
     ausnahmslos gilt, hält; eine mit begründeten Ausnahmen nicht. */
  .wv-liste .reihe:not(.lead-zeile):not(.rekla-reihe) {
    grid-template-columns: minmax(0, 1fr) 50px;
  }

  /* Kachelband: untereinander statt nebeneinander, Trennlinie dreht mit. */
  .kachelgitter.band { grid-template-columns: minmax(0, 1fr); }
  .kachelgitter.band .kachel { border-right: 0; border-bottom: 1px solid var(--linie); }
  .kachelgitter.band .kachel:last-child { border-bottom: 0; }

  /* Diagramme: Beschriftung gross genug zum Ablesen. */
  .ch-achse, .ch-label, .ch-wert { font-size: 18px; }
  .ch-zusatz { font-size: 15px; }

  /* Anmeldung und Fehlerseite – die einzigen Seiten ohne Navigation. */
  .anmeldung, .fehlerseite { padding: 26px 20px; }
  .anmeldung > h1, .fehlerseite > h1 { font-size: 27px; }
  .anmeldung .vorspann { font-size: 15px; line-height: 1.5; }
  .anmeldung form { margin-top: 20px; }
  .anmeldung input[type=email] { min-height: 52px; font-size: 17px; }
  .anmeldung button.primaer { min-height: 56px; font-size: 19px; margin-top: 16px; }

  .versuche { flex: 1 1 100%; }
  .verlauf-zeit { width: auto; min-width: 6.8rem; }
  .kopf-schalter { margin-left: 0; }
  .ton-platz { display: none; }
}

/* ── Weniger Rahmen ──
   Der Mobil-Entwurf des Lead-Schirms kommt mit EINEM gerahmten Kasten aus
   (PortalVertriebMobil, isLead: ein `border:1px solid var(--line)`, sonst
   nur Polster und Haarlinien unter den Zeilen). Unser Gesprächsblatt
   stapelte sieben.

   Auf einem 27-Zoll-Schirm liest sich das als präzise. Auf 390px kippt es:
   Wenn zehn Haarlinien-Kästen übereinanderstehen, trägt Hierarchie nur noch
   die Linie – und Linien vermehren sich beim Stapeln, statt zu ordnen. Das
   ist der Grund für "sieht nicht smooth aus", und er lässt sich beheben,
   ohne etwas zu runden oder zu füllen.

   Der Vertrag verlangt quadratisch, ungefüllt, Haarlinie. Er verlangt
   nirgends, dass JEDER Abschnitt einen Rahmen trägt. Die Regel hier:
   Ein Rahmen markiert das eine Objekt, das gerade zählt. Abschnitte trennen
   sich durch Luft und eine Haarlinie oben – dieselbe Sparsamkeit, die das
   Artboard vormacht. */
@media (max-width: 719px) {
  /* Notizen, Verlauf, gesetzte Wiedervorlage: Nebeninhalt des
     Gesprächsblatts. Am Desktop stehen sie als Karten in der rechten Spalte,
     wo sie nebeneinander liegen; am Telefon stapeln sie sich und ergeben
     drei Rahmen untereinander. Beide Selektoren, weil app.css:3223 mit
     `.blatt-raster > .tag-seite > .blatt-feld` mehr Gewicht hat. */
  .blatt-feld,
  .blatt-raster > .tag-seite > .blatt-feld {
    border: 0; border-top: 1px solid var(--linie);
    padding: 18px 0 0; margin: 0 0 22px;
  }
  /* Die Trennlinie über dem ersten wäre eine Linie direkt unter der, die
     der Abschnitt darüber schon zieht. */
  .tag-seite > .blatt-feld:first-child { border-top: 0; padding-top: 0; }

  /* Das Zählfeld gehört zur Wähltaste, es steht direkt darunter. Ein eigener
     Rahmen macht daraus zwei Dinge. */
  .versuche { border: 0; padding: 10px 0 0; }

  /* Doppelrahmen aus der Kartenansicht: `.tabellenrahmen.gerahmt` zieht
     einen Rahmen um die Tabelle, und seit die Zeilen zu Karten geworden
     sind, trägt jede Zeile darin ihren eigenen. Der äußere umfasst dann
     nur noch die Summe der inneren. */
  .tabellenrahmen.gerahmt { border: 0; }

  /* Das Faktenraster bleibt gerahmt – es ist der eine Kasten des Entwurfs,
     die Identität des Leads. Ohne Rahmen verlöre die Seite ihren Anker. */
}

/* ── Die Angaben, mit denen gearbeitet wird, sind gleich laut ──
   Der Design-Vertrag, Typografie-Gesetz:

     "Werte-Reihen sind homogen: In einem Faktenraster tragen ALLE Werte
      dieselbe Schrift, Größe und dasselbe Gewicht — auch die E-Mail. Kein
      Wert wird 'leise' gestellt, während seine Nachbarn laut sind."

   In der Lead-Liste war genau das gebrochen: Name 19px, Nummer 15px
   Condensed, Mail 12px in Sekundärfarbe, Geburtsdatum 12.5px in
   Sekundärfarbe. Vier Angaben, die der Berater gleichzeitig braucht, in
   vier Lautstärken – am Schreibtisch verzeihlich, am Telefon nicht: dort
   entscheidet er in zwei Sekunden, ob er anruft.

   Ab hier tragen Nummer, Mail und Geburtsdatum dieselbe Stimme. Meta bleibt
   Meta: Lead-Nr. und Zuteilung sind keine Werte, sie stehen weiter leise. */
@media (max-width: 719px) {
  .lead-zeile .lead-name strong { font-size: 18px; line-height: 1.2; }

  .lead-kontakt { gap: 2px; margin-top: 4px; }
  .lead-zeile .lead-tel,
  .lead-zeile .lead-mail,
  .lead-zeile .lead-geb {
    font-family: var(--schrift-kopf); font-weight: 600; font-size: 16px;
    line-height: 1.3; color: var(--text);
    font-variant-numeric: tabular-nums; letter-spacing: .01em;
  }
  /* Die Mail darf umbrechen statt zu verschwinden – auf 300px reicht eine
     Zeile für "vorname.nachname@provider.de" nicht, und eine halbe Adresse
     ist keine. */
  .lead-zeile .lead-mail {
    overflow: visible; text-overflow: clip; white-space: normal;
    overflow-wrap: anywhere;
  }
  /* Geburtsdatum aus der Meta-Zeile heraus auf eine eigene Zeile. */
  .lead-zeile .lead-geb { display: block; margin-top: 2px; }

  /* Meta bleibt leise: Lead-Nr. und Zuteilung. Der Punkt vor dem
     Geburtsdatum steht sonst allein am Zeilenende. */
  .lead-zeile .reihe-info { font-size: 11.5px; line-height: 1.5; }

  /* Auf "Heute" und den Wiedervorlagen ist die Infozeile etwas anderes: dort
     stehen Geburtsdatum, Alter, Rufnummer, Mail und Ort – ausschliesslich
     Werte, kein einziges Meta. Sie in Sekundärfarbe zu setzen hiess, die
     halbe Zeile leise zu stellen, die der Berater eigentlich liest. */
  .reihe:not(.lead-zeile):not(.rekla-reihe) .reihe-info {
    font-size: 13px; color: var(--text); line-height: 1.5;
  }
}