/* ImmoJAN Copilot – Stufe 1.
   Farben vorläufig aus dem CD (Auftrag Moritz 09.11.2026). Sobald design/tokens.css da ist,
   werden die Rollen unten auf dessen Variablen umgestellt; im Code nur Rollen-Variablen verwenden. */
/* Rollen der App → Rollen aus design/tokens.css (CD 2026, Designsystem 2.1.16). Hier stehen keine Farbwerte,
   nur Verweise; abgeleitete Werte wie im Designsystem (color-mix aus CD-Farben). */
:root {
  --hintergrund: var(--bg);
  --flaeche: var(--weiss);
  --text: var(--ink);
  /* Zweitschrift: ink-2 hat auf bg nur 2,0 : 1 – wie Designsystem --ink2: Anthrazit 82 % (7,3 : 1) */
  --text-leise: color-mix(in srgb, var(--ink) 82%, var(--weiss));
  --linie-rolle: var(--linie);
  --haupt: var(--accent);                 /* Bestätigen (CD S. 10) – nur wichtige Aktionen */
  --text-auf-haupt: var(--hellblau);      /* CD S. 10, Auftrag Moritz */
  --sekundaer: var(--accent-soft);        /* „Später“ (CD S. 10) */
  --text-auf-sekundaer: var(--accent);
  --chip-grund: var(--accent-soft);
  --chip-text: var(--ink);
  --ok-flaeche: var(--ok);
  --ok-rand: var(--ok-ink);
  --ok-text: var(--zahlungen-ink);        /* wie Designsystem: Erledigt-Schrift und Zustandskreise (8,2 : 1) */
  --hinweis: var(--warn);
  --hinweis-text: var(--warn-ink);
  --fehler: var(--crit);
  --fehler-text: var(--crit-ink);
  --initialen-grund: var(--anthrazit);    /* wie Designsystem: Initialen Anthrazit, Schrift weiß */
  --initialen-schrift: var(--ink-negativ);
  --scan-grund: var(--anthrazit);
  --scan-text: var(--ink-negativ);
  --akzent-auf-dunkel: var(--hellblau);   /* Moritz 10.11.: Hellblau auf der dunklen Scan-Fläche */
  --text-auf-akzent-dunkel: var(--anthrazit);
  --schalter-aus: var(--ink-2);
  --abdunkeln: color-mix(in srgb, var(--anthrazit) 45%, transparent);
  --radius: 6px;
  --rand: 1px;
  --schrift-app: var(--schrift);
  --tipp: 44px;
  --abstand: 16px;
  --logo-hoehe: 26px;
  --kopf-hoehe: 68px;          /* Kopfzeile: Logo + Mandant (48 px) + 2 × 8 px + Linie */
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--hintergrund);
  color: var(--text);
  font: 16px/1.4 var(--schrift-app);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
[hidden] { display: none !important; }
h1 { font-size: 24px; margin: 0 0 8px; }
h2 { font-size: 18px; margin: 0 0 8px; }
p { margin: 0 0 8px; }
a { color: var(--haupt); }
button, input, select { font: inherit; color: inherit; }
.klein { font-size: 14px; color: var(--text-leise); }
.mitte { text-align: center; }
.fett { font-weight: var(--schrift-fett); }

#app { max-width: 520px; margin: 0 auto; min-height: 100%; }
.ansicht { min-height: 100dvh; display: flex; flex-direction: column; }

/* Logo: Platzhalter-Schriftzug bis das CD-Logo da ist */
/* Logo aus dem CD (S. 6): Schutzraum links/rechts = Breite der Bildmarke (wie Designsystem --logo-schutz) */
.logo { display: block; height: var(--logo-hoehe); width: auto; margin-inline: calc(var(--logo-hoehe) * 36.95 / 48.17); }
.kopf .logo { margin-inline-start: 0; }
.logo.gross { --logo-hoehe: 32px; margin-inline-start: 0; }

/* Knöpfe */
.knopf {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 52px; padding: 12px 16px;
  border-radius: var(--radius); border: var(--rand) solid transparent;
  font-weight: var(--schrift-normal); font-size: 17px; cursor: pointer; text-align: center; text-decoration: none; /* CD: Knöpfe nicht fett (ImmoJAN 500 = Arial normal) */
  user-select: none;
}
.knopf.haupt { background: var(--haupt); color: var(--text-auf-haupt); }
.knopf.sekundaer { background: var(--sekundaer); color: var(--text-auf-sekundaer); border-color: var(--linie-rolle); }
.knopf.leise { background: transparent; color: var(--text); border-color: var(--linie-rolle); font-weight: normal; }
.knopf.gross { min-height: 72px; font-size: 19px; }
.knopf:disabled { opacity: .5; }
.knopf:active { filter: brightness(.92); }
.klein-knopf { width: auto; min-height: var(--tipp); font-size: 15px; padding: 8px 14px; }
.text-knopf {
  background: none; border: 0; min-height: var(--tipp); min-width: var(--tipp); padding: 0 8px;
  color: var(--text); cursor: pointer; font-size: 16px;
}
.text-knopf.hell { color: var(--scan-text); }
/* Symbole: Strich-Symbole des Designsystems (24 × 24, Strich 2, currentColor), eingesetzt von js/symbole.js */
.ico, [data-icon] { display: inline-flex; flex: none; }
.ico svg, [data-icon] svg { width: 24px; height: 24px; display: block; }
.ico.klein svg { width: 20px; height: 20px; }
.ico:empty { display: none; }
.text-knopf.mit-icon { display: inline-flex; align-items: center; gap: 4px; }

/* Anmelden */
.anmelden { flex: 1; display: flex; flex-direction: column; padding: 32px var(--abstand) calc(var(--abstand) + env(safe-area-inset-bottom)); gap: 16px; }
.anmelden-kopf .logo { margin-bottom: 32px; }
.anmelden-fuss { margin-top: auto; display: grid; gap: 8px; text-align: center; }
.feld { display: grid; gap: 6px; font-weight: var(--schrift-fett); font-size: 15px; }
.feld input {
  min-height: 48px; padding: 10px 12px; font-weight: normal; font-size: 17px;
  border: var(--rand) solid var(--linie-rolle); border-radius: var(--radius); background: var(--flaeche); width: 100%;
}
.feld input:focus, .objekt-select:focus { outline: 2px solid var(--haupt); outline-offset: 1px; }
.meldung { padding: 10px 12px; border-radius: var(--radius); border: var(--rand) solid; }
.meldung.fehler { background: var(--fehler); color: var(--fehler-text); border-color: var(--fehler-text); }

/* Kopf und Inhalt */
.kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: calc(8px + env(safe-area-inset-top)) var(--abstand) 8px;
  background: var(--flaeche); border-bottom: var(--rand) solid var(--linie-rolle);
  position: sticky; top: 0; z-index: 5;
}
.kopf-titel { font-size: 18px; margin: 0; text-align: center; flex: 1; }
.kopf-platz { width: 96px; }
.kopf .text-knopf { width: 96px; text-align: left; padding: 0; }
/* Konto: Initialen-Kreis im Kopf (Handy), 44 px Tippfläche; Kreis selbst aus dem Designsystem (.initialen) */
.konto-kreis { width: var(--tipp); height: var(--tipp); padding: 0; border: 0; background: none; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.konto-kreis:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
.inhalt { flex: 1; padding: var(--abstand); display: flex; flex-direction: column; gap: 12px; }
.abschnitt { margin-top: 12px; font-size: 16px; }
.karte { background: var(--flaeche); border: var(--rand) solid var(--linie-rolle); border-radius: var(--radius); padding: 12px; }
.hinweis-karte { background: var(--flaeche); }
.zeile { display: flex; gap: 8px; flex-wrap: wrap; }
.leer { text-align: center; padding: 12px 0; }

/* Objekt-Auswahl */
.objektwahl {
  position: relative; display: block; background: var(--flaeche);
  border: var(--rand) solid var(--linie-rolle); border-radius: var(--radius); min-height: 60px;
}
.objektwahl-titel { position: absolute; left: 12px; top: 7px; font-size: 13px; color: var(--text-leise); pointer-events: none; }
.objekt-select {
  appearance: none; -webkit-appearance: none; width: 100%; min-height: 58px; border: 0; background: transparent;
  padding: 24px 40px 6px 12px; font-weight: var(--schrift-fett); font-size: 17px; border-radius: var(--radius); cursor: pointer;
}
.objektwahl .pfeil { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; }

/* Liste */
.liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.eintrag {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 12px;
  background: var(--flaeche); border: var(--rand) solid var(--linie-rolle); border-radius: var(--radius);
  text-align: left; cursor: pointer;
}
.eintrag.markiert { outline: 2px solid var(--haupt); }
.eintrag-text { flex: 1; min-width: 0; }
.eintrag-titel { display: block; font-weight: var(--schrift-fett); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eintrag-info { display: block; font-size: 14px; color: var(--text-leise); }

/* e) Statusanzeige: immer weiß mit dünnem Rand; Zustandsfarbe nur im Schild und an den Schritt-Symbolen */
.statusanzeige { background: var(--flaeche); border: var(--rand) solid var(--linie-rolle); border-radius: var(--radius); padding: 14px; }
.status-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.status-kopf h2 { font-size: 17px; margin: 0; min-width: 0; }
.status-inhalt { display: flex; flex-direction: column; gap: 10px; }
.status-inhalt > .knopf-extern, .status-inhalt > .klein-knopf { align-self: flex-start; }
.status-zeile { margin: 0; }
.status-inhalt .klein { margin: 0; }
.status-dok + .status-dok { border-top: var(--rand) solid var(--linie-rolle); margin-top: 10px; padding-top: 10px; }
.status-dok-kopf { display: flex; align-items: center; gap: 8px; width: 100%; min-height: var(--tipp); background: none; border: 0; padding: 0; text-align: left; cursor: pointer; color: inherit; }
.status-dok-kopf .eintrag-titel { flex: 1; }
.status-dok-kopf + .status-inhalt { margin-top: 6px; }
/* Schild: kurz, einheitlich in Statuskarte und Liste */
/* Status-Schilder: alle gleich aufgebaut (helle Füllung, keine Kante, gleiche Höhe und Schrift) – nur die Farbe unterscheidet */
.schild { flex: none; display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; border: 0;
  font-size: 13px; line-height: 1; font-weight: var(--schrift-fett); white-space: nowrap; }
.schild.laeuft { background: var(--accent-soft); color: var(--accent); }
.schild.fertig { background: var(--zahlungen); color: var(--zahlungen-ink); }   /* Erkannt: CD-Grün kräftiger als --ok (fast weiß) */
.schild.pruefen { background: var(--warn); color: var(--warn-ink); }
.schild.ergaenzen { background: var(--nebenkosten); color: var(--nebenkosten-ink); }
.schild.fehler { background: var(--crit); color: var(--crit-ink); }
.schild.neutral { background: color-mix(in srgb, var(--ink-2) 28%, var(--weiss)); color: var(--ink); }  /* Vorhanden, Wartet */
/* Schritte */
.schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.schritt { display: flex; gap: 12px; align-items: flex-start; }
.schritt-kreis {
  flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid var(--linie-rolle); font-size: 14px; font-weight: var(--schrift-fett); color: var(--text-leise); background: var(--flaeche);
  position: relative;
}
.schritt.laeuft .schritt-kreis { border-color: var(--sekundaer); color: transparent; }
.schritt.laeuft .schritt-kreis::after {
  content: ""; position: absolute; inset: -2px; border-radius: 50%;
  border: 2px solid transparent; border-top-color: var(--haupt); border-right-color: var(--haupt);
  animation: drehen .9s linear infinite;
}
.schritt.fertig .schritt-kreis { background: var(--ok); border-color: var(--ok-ink); color: var(--ok-text); }
.schritt.hinweis .schritt-kreis { background: var(--warn); border-color: var(--warn-ink); color: var(--warn-ink); }
.schritt.fehler .schritt-kreis { background: var(--crit); border-color: var(--crit-ink); color: var(--crit-ink); }
.schritt.hinweis.ergaenzen .schritt-kreis { background: var(--nebenkosten); border-color: var(--nebenkosten-ink); color: var(--nebenkosten-ink); }
.schritt.hinweis.ergaenzen .schritt-info { color: var(--nebenkosten-ink); }
.schritt-kreis svg { width: 16px; height: 16px; }
.schritt-text { padding-top: 3px; }
.schritt-name { display: block; }
.schritt.laeuft .schritt-name { font-weight: var(--schrift-fett); }
.schritt-info { display: block; font-size: 14px; color: var(--text-leise); }
.schritt.hinweis .schritt-info { color: var(--warn-ink); }
.schritt.fehler .schritt-info { color: var(--crit-ink); }
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.balken { height: 4px; background: var(--linie-rolle); border-radius: 2px; margin-top: 6px; overflow: hidden; width: 100%; }
.balken > i { display: block; height: 100%; background: var(--haupt); width: 0; transition: width .2s; }
.status-satz { font-size: 14px; color: var(--text-leise); margin: 10px 0 0; }
.offen-hinweis { color: var(--text-leise); margin: -2px 0 8px; }
@keyframes drehen { to { transform: rotate(360deg); } }

/* c) Scannen */
.dunkel { background: var(--scan-grund); color: var(--scan-text); }
body.scan-aktiv { background: var(--scan-grund); }
#v-scan { position: fixed; inset: 0; z-index: 20; max-width: none; }
.scan-kopf { display: flex; align-items: center; justify-content: space-between; padding: calc(4px + env(safe-area-inset-top)) 8px 4px; gap: 8px; }
.scan-seite { font-weight: var(--schrift-fett); }
.scan-bild { position: relative; flex: 1; min-height: 0; overflow: hidden; }
#scan-video, #scan-overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
#scan-video { object-fit: contain; }
/* Hinweis im Scanner: eine kleine Pille, dunkel, halbtransparent, weiß, einzeilig, immer unten im Kamerabild */
.pille {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 24px);
  display: inline-flex; align-items: center; gap: 6px;
  background: color-mix(in srgb, var(--scan-grund) 72%, transparent); color: var(--scan-text);
  border-radius: 999px; padding: 6px 12px; font-size: 13px; line-height: 18px; font-weight: var(--schrift-normal);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
}
.pille.erkannt::before, .pille.hinweis::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.pille.erkannt::before { background: var(--akzent-auf-dunkel); }
.pille.hinweis::before { background: var(--warn); }
.blitz { position: absolute; inset: 0; background: var(--flaeche); opacity: 0; pointer-events: none; transition: opacity .25s; }
.blitz.an { opacity: .8; transition: none; }
.scan-fuss { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; padding: 12px 12px calc(16px + env(safe-area-inset-bottom)); }
.scan-fuss-links { display: flex; align-items: center; gap: 6px; min-width: 0; }
.scan-fuss .miniatur { flex: none; width: 46px; height: 60px; }
.scan-fuss .scan-fertig { justify-self: end; width: auto; min-width: 0; padding: 0 14px; white-space: nowrap; }
.scan-fuss .scan-fertig:disabled { opacity: .4; }
.miniatur:disabled { cursor: default; }
.schildchen { flex: none; min-height: var(--tipp); padding: 0 8px; border: 0; border-radius: 999px; cursor: pointer; white-space: nowrap;
  background: color-mix(in srgb, var(--scan-text) 16%, transparent); color: var(--scan-text); font-size: 13px; font-weight: var(--schrift-normal); }
.zaehler.springt { animation: springen .3s ease-out; }
@keyframes springen { 40% { transform: scale(1.35); } }
.flug { position: fixed; z-index: 40; object-fit: cover; border-radius: var(--radius); pointer-events: none; transform-origin: center; box-shadow: 0 0 0 2px var(--scan-text); }
.scan-kopf-rechts { display: flex; align-items: center; gap: 8px; }
.miniatur {
  justify-self: start; position: relative; width: 52px; height: 64px; border-radius: var(--radius);
  border: var(--rand) solid var(--scan-text); background: transparent; padding: 0; cursor: pointer; overflow: visible;
}
.miniatur img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); display: block; }
.zaehler {
  position: absolute; top: -8px; right: -10px; min-width: 24px; height: 24px; border-radius: 12px; padding: 0 6px;
  background: var(--akzent-auf-dunkel); color: var(--text-auf-akzent-dunkel); font-size: 13px; font-weight: var(--schrift-fett); display: grid; place-items: center;
}
.ausloeser {
  width: 76px; height: 76px; border-radius: 50%; background: var(--flaeche);
  border: 5px solid var(--scan-grund); outline: 3px solid var(--flaeche); cursor: pointer;
}
.ausloeser:active { transform: scale(.94); }
.ausloeser:disabled { opacity: .5; }
.schalter { display: flex; align-items: center; gap: 8px; min-height: var(--tipp); cursor: pointer; font-size: 15px; }
.schalter input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.schalter-bahn { width: 44px; height: 26px; border-radius: 13px; background: var(--schalter-aus); position: relative; transition: background .15s; }
.schalter-bahn::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--flaeche); transition: left .15s; }
.schalter input:checked + .schalter-bahn { background: var(--akzent-auf-dunkel); }
.schalter input:checked + .schalter-bahn::after { left: 21px; background: var(--scan-grund); }
.schalter input:focus-visible + .schalter-bahn { outline: 2px solid var(--flaeche); outline-offset: 2px; }

/* d) Seiten prüfen */
.seiten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.seite { background: var(--flaeche); border: var(--rand) solid var(--linie-rolle); border-radius: var(--radius); padding: 8px; display: grid; gap: 6px; min-width: 0; }
.seite-bild { padding: 0; border: 0; cursor: pointer; width: 100%; position: relative; aspect-ratio: 210 / 297; background: var(--hintergrund); border-radius: var(--radius); overflow: hidden; display: grid; place-items: center; }
.seite-bild img { max-width: 100%; max-height: 100%; display: block; }
.seite-nr { position: absolute; left: 6px; top: 6px; background: var(--flaeche); border: var(--rand) solid var(--linie-rolle); border-radius: var(--radius); font-size: 13px; font-weight: var(--schrift-fett); padding: 2px 7px; }
.seite-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.seite-knoepfe .breit { grid-column: 1 / -1; }
.seite-knoepfe button { min-height: var(--tipp); border-radius: var(--radius); border: var(--rand) solid var(--linie-rolle); background: var(--flaeche); cursor: pointer; font-size: 14px; }
.seite-knoepfe .loeschen { color: var(--fehler-text); border-color: var(--fehler); }
.fuss-leiste { position: sticky; bottom: 0; padding: 12px var(--abstand) calc(12px + env(safe-area-inset-bottom)); background: var(--hintergrund); border-top: var(--rand) solid var(--linie-rolle); }

/* Dialoge */
.blatt { border: var(--rand) solid var(--linie-rolle); border-radius: var(--radius); padding: 0; width: min(520px, calc(100% - 24px)); max-height: calc(100dvh - 48px); background: var(--flaeche); color: var(--text); }
.blatt::backdrop { background: var(--abdunkeln); }
.blatt-inhalt { padding: 16px; display: grid; gap: 12px; }
.blatt-inhalt .karte { display: grid; gap: 8px; }
.daten { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0; }
.daten dt { color: var(--text-leise); }
.daten dd { margin: 0; font-weight: var(--schrift-fett); overflow-wrap: anywhere; }

.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 50;
  background: var(--text); color: var(--flaeche); padding: 10px 14px; border-radius: var(--radius); max-width: calc(100% - 32px); font-size: 15px;
}
.toast.fehler { background: var(--fehler); color: var(--fehler-text); border: var(--rand) solid var(--fehler-text); }

/* ---------- Ansichten: Handy/Tablet und Computer (body.computer) ---------- */
body:not(.computer) .nur-computer { display: none !important; }
body.computer .nur-handy { display: none !important; }
@media (min-width: 600px) { body:not(.computer) #app { max-width: 560px; } } /* Tablet: etwas breitere Spalte */

.kopf-links, .kopf-rechts { display: flex; align-items: center; gap: 12px; min-width: 0; }
.app-name { font-weight: var(--schrift-fett); font-size: 18px; }

body.computer #app { max-width: none; }
body.computer .kopf { padding-inline: 24px; }
body.computer .kopf .logo { margin: 0; }
body.computer .inhalt { width: 100%; max-width: 560px; margin: 0 auto; padding: 24px var(--abstand) 48px; }
/* Reihenfolge am Computer: Objekt, Ablage, QR, dann Status und Liste */
body.computer #push-angebot, body.computer #statusanzeige, body.computer #liste-titel,
body.computer #liste, body.computer #liste-leer { order: 10; }

.ablage {
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  padding: 28px 20px; background: var(--flaeche); border: 2px dashed var(--linie-rolle); border-radius: var(--radius);
}
.ablage.ziehen { background: var(--accent-soft); border-color: var(--haupt); }
.ablage-symbol svg { width: 40px; height: 40px; }
.ablage-titel { font-weight: var(--schrift-fett); font-size: 18px; margin: 4px 0 0; }
.ablage-knopf { width: auto; min-width: 200px; margin-top: 10px; }
.qr-karte { display: flex; gap: 16px; align-items: center; }
.qr { flex: none; width: 128px; height: 128px; color: var(--ink); background: var(--weiss); }
.qr svg { width: 100%; height: 100%; display: block; }

/* ---------- Nutzer-Karte (design/konto.css aus dem Designsystem) – nur Anpassungen ---------- */
#push-bereich { display: grid; gap: 8px; }
#app > #push-bereich { display: none; } /* Ruheplatz, solange kein Blatt offen ist */
.nutzer-karte .konto-knopf svg { width: 16px; height: 16px; }
.nutzer-karte .abmelden.konto-knopf { padding: 0; }
/* Handy (Konto-Blatt): Knöpfe der Karte mit 44 px Tippfläche, Karte über die volle Breite */
body:not(.computer) .nutzer-karte .konto-knopf { width: var(--tipp); height: var(--tipp); }
body:not(.computer) .nutzer-karte .konto-knopf svg { width: 20px; height: 20px; }
body:not(.computer) .nutzer-karte .karten-text .wer { font-size: 15px; }
body:not(.computer) .nutzer-karte .karten-text .rolle { font-size: 13px; }
/* Handy: Blatt von unten */
/* Handy: Blatt von unten – nie unter der Kopfzeile, ganze Höhe sichtbar (100dvh, sichere Ränder) */
body:not(.computer) .konto-blatt { margin: auto 0 0; width: 100%; max-width: 100%;
  max-height: calc(100dvh - var(--kopf-hoehe) - env(safe-area-inset-top));
  border-radius: var(--radius) var(--radius) 0 0; border-bottom: 0; overscroll-behavior: contain; }
.konto-blatt[open] { display: flex; flex-direction: column; }
.konto-blatt .blatt-inhalt { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 10px; padding: 0 var(--abstand) calc(12px + env(safe-area-inset-bottom)); }
.konto-blatt .blatt-inhalt > * { flex: none; }
.blatt-griff { flex: none; height: 22px; display: flex; align-items: center; justify-content: center; touch-action: none; cursor: grab; }
.blatt-griff span { width: 40px; height: 5px; border-radius: 3px; background: var(--ink-2); }
body.computer .blatt-griff { display: none; }
body.computer .konto-blatt .blatt-inhalt { padding-top: var(--abstand); }
.blatt-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; touch-action: none; }
.blatt-kopf h2 { margin: 0; }
.blatt-zu { width: var(--tipp); height: var(--tipp); margin-right: -10px; border: 0; background: none; color: var(--text); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius); }
.blatt-zu:focus-visible { outline: 2px solid var(--accent); }
.konto-blatt.zieht { transition: none !important; }
.konto-blatt.federt { transition: transform .2s ease-out; }
.konto-blatt.geht { transition: transform .18s ease-in; }
@media (prefers-reduced-motion: reduce) { .konto-blatt.federt, .konto-blatt.geht { transition: none; } }
html:has(dialog[open]), html.blatt-offen { overscroll-behavior: none; }
/* Blätter: Scrollen im Blatt schlägt nicht auf den Hintergrund durch; Wischen auf dem Hintergrund scrollt nichts */
.blatt, .blatt-inhalt { overscroll-behavior: contain; }
.blatt::backdrop { touch-action: none; }
/* Mandanten: nur die Liste scrollt innen (höchstens ≈ 3 Einträge), der Knopf bleibt sichtbar */
.konto-blatt .mandanten-karte { flex: 0 1 auto; min-height: auto; display: flex; flex-direction: column; gap: 4px; padding: 8px 12px; }
.mandanten-karte .karte-titel { margin: 0; }
.mandanten-karte .mandanten-liste { flex: 0 1 auto; min-height: 58px; max-height: calc(3 * 52px); overflow-y: auto; overscroll-behavior: contain; }
.mandanten-karte .mandant { min-height: 52px; padding: 3px 0; }
.mandanten-karte .breit { width: 100%; flex: none; }
/* Benachrichtigungen: eine Zeile */
.push-zeile { display: grid; gap: 4px; padding: 6px 12px; }
.push-schalter { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--tipp); cursor: pointer; }
.push-schalter input { width: 24px; height: 24px; accent-color: var(--accent); flex: none; }
.push-anleitung summary { min-height: var(--tipp); display: flex; align-items: center; cursor: pointer; font-weight: var(--schrift-fett); }
.push-anleitung p { margin: 4px 0 6px; }
.einstellung { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; cursor: pointer; }
.einstellung input { width: 24px; height: 24px; accent-color: var(--accent); flex: none; }

/* ---------- Links nach außen als Sekundärknopf mit Symbol "neuer-tab" ---------- */
.knopf-extern { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--tipp); padding: 0 14px;
  background: var(--accent-soft); color: var(--accent); border-radius: var(--radius); text-decoration: none;
  font-weight: var(--schrift-normal); font-size: 15px; white-space: nowrap; }
.knopf-extern svg { width: 16px; height: 16px; }
.knopf-extern:hover { background: color-mix(in srgb, var(--accent) 8%, var(--accent-soft)); }
.knopf-extern:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
body.computer .knopf-extern { min-height: 40px; }
.knopf-extern.knopf-haupt { background: var(--haupt); color: var(--text-auf-haupt); }
.knopf-extern.knopf-haupt:hover { background: color-mix(in srgb, var(--ink) 12%, var(--haupt)); }

/* ---------- Verbinden ---------- */
.anleitung { margin: 8px 0 0; padding-left: 22px; display: grid; gap: 4px; }
.code-form { display: grid; gap: 12px; }
.code-form input { text-transform: uppercase; letter-spacing: .12em; font-size: 20px; }
body:not(.computer) .code-form:not(.offen) { display: none; }
body:not(.computer) .code-form.offen ~ .anmelden-fuss #b-code-zeigen { display: none; }
.qr-scan { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; }
.qr-scan .scan-bild video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.qr-rahmen { position: absolute; left: 50%; top: 50%; width: min(70vw, 280px); aspect-ratio: 1; transform: translate(-50%, -50%);
  border: 9px solid var(--flaeche); outline: 3px solid var(--akzent-auf-dunkel); outline-offset: -6px; border-radius: var(--radius); }
body.computer .anmelden { width: 100%; max-width: 560px; margin: 0 auto; padding-top: 64px; }
body.computer .anmelden-fuss { margin-top: 8px; }

/* ---------- Mandanten ---------- */
.mandant-zeile { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: var(--tipp);
  padding: 4px 2px; background: none; border: 0; text-align: left; cursor: pointer; }
.mandant-zeile-text { display: flex; flex-direction: column; }
.mandant-kopf { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 10px; border: var(--rand) solid var(--linie-rolle);
  border-radius: var(--radius); background: var(--flaeche); font-size: 15px; cursor: pointer; }
.mandant-kopf svg { width: 18px; height: 18px; }
.mandanten-karte { display: grid; gap: 8px; }
.mandanten-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; overflow-x: hidden; }
.mandant { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: var(--rand) solid var(--linie-rolle); }
.mandant:first-child { border-top: 0; }
.mandant-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mandant-name { font-weight: var(--schrift-fett); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mandant.aktiv .mandant-name { color: var(--accent); }
.mandant-haken { width: 24px; flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--ok-text); }
.mandant-wahl { flex: 1; min-width: 0; min-height: var(--tipp); display: flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none;
  text-align: left; color: var(--text); cursor: pointer; border-radius: var(--radius); }
.mandant-wahl:focus-visible { outline: 2px solid var(--accent); }
.mandant.aktiv .mandant-wahl { cursor: default; }
.mandant .klein { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mandant .klein-knopf { min-width: var(--tipp); }
.wartet-text { font-weight: var(--schrift-fett); color: var(--hinweis-text); margin: 4px 0 0; }

/* ---------- Scanner: Vorschau nach der Aufnahme, Diagnose ---------- */
.knopf-dunkel { min-height: var(--tipp); min-width: var(--tipp); padding: 0 14px; border-radius: var(--radius); cursor: pointer;
  background: transparent; color: var(--scan-text); border: var(--rand) solid var(--scan-text); font-size: 15px; font-weight: var(--schrift-fett); }
.knopf-dunkel:disabled { opacity: .4; }
.knopf.haupt-dunkel { background: var(--akzent-auf-dunkel); color: var(--text-auf-akzent-dunkel); }
.diagnose { position: absolute; left: 8px; top: 8px; margin: 0; padding: 6px 8px; max-width: 52%; white-space: pre-wrap;
  font: 12px/1.35 ui-monospace, monospace; background: var(--scan-grund); color: var(--scan-text); border-radius: var(--radius); opacity: .9; pointer-events: none; }

/* ---------- Seite bearbeiten ---------- */
#v-bearbeiten { position: fixed; inset: 0; z-index: 20; }
.bea-flaeche { position: relative; flex: 1; min-height: 0; }
.bea-flaeche canvas#bea-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.lupe { position: absolute; width: 132px; height: 132px; border-radius: 50%; border: 3px solid var(--flaeche);
  outline: 2px solid var(--haupt); pointer-events: none; background: var(--scan-grund); }
.bea-hinweis { text-align: center; font-size: 14px; margin: 4px 16px; opacity: .85; }
/* Werkzeugleiste: Symbol über kurzem Text, ohne Rahmen, gleich breite Spalten, ganze Spalte antippbar */
.bea-werkzeuge { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: 0 8px; }
.werkzeug { min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 4px 2px;
  background: none; border: 0; border-radius: var(--radius); color: var(--scan-text); cursor: pointer; font-size: 13px; font-weight: var(--schrift-normal); }
.werkzeug:active { background: color-mix(in srgb, var(--scan-text) 12%, transparent); }
.werkzeug:disabled { opacity: .4; cursor: default; }
.werkzeug:focus-visible { outline: 2px solid var(--akzent-auf-dunkel); }
.werkzeug-text { white-space: nowrap; line-height: 16px; }
.bea-fuss { padding: 8px 16px calc(12px + env(safe-area-inset-bottom)); }

.probe-leiste { position: absolute; right: 8px; top: 8px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; max-width: 46%; }
.probe-hinweis { font-size: 12px; background: var(--scan-grund); padding: 2px 6px; border-radius: var(--radius); text-align: right; }

/* ---------- Bedienbarkeit am Handy (10.11.2026) ---------- */
.blatt-inhalt .karte.einstellung { display: flex; }
.laden { align-items: center; justify-content: center; gap: 12px; min-height: 100dvh; }
.netz-hinweis { position: sticky; top: 0; z-index: 30; padding: calc(6px + env(safe-area-inset-top)) var(--abstand) 6px; text-align: center;
  background: var(--hinweis); color: var(--hinweis-text); border-bottom: var(--rand) solid var(--hinweis-text); font-size: 15px; }
.scan-fehler { position: absolute; left: 16px; right: 16px; top: 50%; transform: translateY(-50%); display: grid; gap: 10px; padding: 16px;
  background: var(--scan-grund); border: var(--rand) solid var(--scan-text); border-radius: var(--radius); text-align: center; }
.scan-fehler p { margin: 0 0 4px; }
/* Licht: runder Symbolknopf in der Kopfleiste; aus = dunkler, leicht durchsichtiger Kreis, an = heller Kreis */
.licht { width: var(--tipp); height: var(--tipp); border-radius: 50%; border: 0; padding: 0; display: grid; place-items: center; cursor: pointer;
  background: color-mix(in srgb, var(--scan-text) 16%, transparent); color: var(--scan-text); }
.licht[aria-pressed="true"] { background: var(--scan-text); color: var(--scan-grund); }
.licht:focus-visible { outline: 2px solid var(--akzent-auf-dunkel); outline-offset: 2px; }
.toast { display: flex; align-items: center; gap: 12px; }
.toast button { min-height: var(--tipp); padding: 0 12px; border-radius: var(--radius); border: var(--rand) solid currentColor; background: transparent; color: inherit; font-weight: var(--schrift-fett); cursor: pointer; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ---------- Fokus in Blättern (10.11.2026) ----------
   Fokusrahmen nur bei Tastaturbedienung; nach innen gelegt, damit ihn kein Blattrand und kein scrollender Inhalt abschneidet. */
.blatt :focus:not(:focus-visible) { outline: none; }
.blatt :focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.blatt .blatt-titel-fokus:focus { outline: none; }

/* ---------- Startseite (10.11.2026): Mandant in der Kopfzeile unter dem Logo ---------- */
.logo-block { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.mandant-klein { max-width: 100%; min-height: var(--tipp); padding: 0 3px; margin: -8px -3px -11px; border: 0; background: none; cursor: pointer; color: var(--text-leise);
  font-size: 13px; line-height: 18px; text-align: left; position: relative; }
/* Kürzen am Namen selbst, damit sein Fokusrahmen nicht vom Knopf abgeschnitten wird; 3 px Abstand zum Logo */
.mandant-klein { width: max-content; }
.logo-block { max-width: calc(100vw - 2 * var(--abstand) - var(--tipp) - 12px); }
.mandant-klein [data-mandant-name] { display: inline-block; vertical-align: top; max-width: calc(100vw - 2 * var(--abstand) - var(--tipp) - 24px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Tippfläche 44 px hoch, ohne die Kopfzeile höher zu machen (negativer Rand oben und unten) */
/* Fokusrahmen nur um den Namen (die Tippfläche ragt mit negativem Rand unter das Logo und darf es nicht anschneiden) */
.mandant-klein:focus-visible { outline: none; }
.mandant-klein:focus-visible [data-mandant-name] { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 2px; }
.leer { display: grid; gap: 2px; }
.leer p { margin: 0; }

/* ---------- Sicherheitsnetz (10.11.2026) ---------- */
.frage-blatt { width: min(420px, calc(100% - 32px)); }
.frage-blatt h2 { font-size: 18px; }
.frage-knoepfe { display: grid; gap: 8px; margin-top: 4px; }
.knopf.gefahr { background: var(--crit); color: var(--crit-ink); }
.status-hinweis { color: var(--warn-ink); }
.neu-laden { position: sticky; top: 0; z-index: 31; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 15px;
  padding: calc(4px + env(safe-area-inset-top)) var(--abstand) 4px; background: var(--accent-soft); color: var(--accent); }
.neu-laden .text-knopf { color: var(--accent); text-decoration: underline; }
.seite-hinweis { display: flex; align-items: center; gap: 6px; width: 100%; min-height: var(--tipp); padding: 0 4px; border: 0; background: none;
  color: var(--warn-ink); font-size: 13px; text-align: left; cursor: pointer; }
.seite-hinweis .punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--warn-ink); flex: none; }
/* Offline-Hinweis nicht über Scanner und „Seite bearbeiten“ (deren Kopfleiste bleibt bedienbar) */
body.scan-aktiv .netz-hinweis, body.scan-aktiv .neu-laden { display: none; }
/* Fokus nach Antippen still zurückgegeben (js/blattsperre.js): kein sichtbarer Rahmen, bis wieder die Tastatur benutzt wird */
.fokus-still:focus, .fokus-still:focus-visible, .fokus-still:focus-visible [data-mandant-name] { outline: none !important; box-shadow: none !important; }

/* ---------- Daumenzone (Handy): „Dokument scannen“ und „Datei hochladen“ fest unten, Inhalt scrollt darüber ---------- */
.daumen-leiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; display: grid; gap: 8px;
  padding: 12px var(--abstand) calc(16px + env(safe-area-inset-bottom)); background: var(--bg); border-top: var(--rand) solid var(--linie-rolle); }
.daumen-leiste .knopf.gross { min-height: 60px; }
.daumen-leiste #b-datei { min-height: 48px; }
body:not(.computer) #v-start .inhalt { padding-bottom: calc(160px + env(safe-area-inset-bottom)); }
body.computer #v-start .daumen-leiste { display: none; }

/* ---------- Ablauf Dokumente → Objekt → Hochladen (10.11.2026) ---------- */
.ablauf-kopf { position: sticky; top: 0; z-index: 6; }
.ablauf-kopf .kopf { position: static; }
/* Schrittleiste: schmal (28 px), einzeilig, Tippfläche je Schritt trotzdem 44 px (unsichtbar größer als die Leiste) */
.schritt-leiste { height: 28px; background: var(--flaeche); border-bottom: var(--rand) solid var(--linie-rolle); overflow: visible; }
.schritt-leiste ol { list-style: none; margin: 0; padding: 0 var(--abstand); height: 100%; display: flex; align-items: center; justify-content: center; gap: 6px; }
.schritt-pfeil { color: var(--text-leise); font-size: 13px; line-height: 1; }
/* Knopf 44 px hoch (Tippfläche), ragt oben und unten je 8 px über die 28-px-Leiste; sichtbar ist nur die Pille */
.schritt-knopf { position: relative; display: inline-flex; align-items: center; height: 44px; margin: -8px 0; padding: 0 2px; border: 0; background: none;
  font-size: 13px; line-height: 1; white-space: nowrap; color: var(--text-leise); font-weight: var(--schrift-normal); }
.schritt-pille { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: 999px; }
.schritt-knopf.aktuell { color: var(--accent); font-weight: var(--schrift-fett); }
.schritt-knopf.aktuell .schritt-pille { background: var(--accent-soft); }
.schritt-knopf.erledigt { color: var(--text); cursor: pointer; }
.schritt-knopf.kommend { color: var(--text-leise); }
.schritt-knopf:disabled { cursor: default; }
.schritt-haken { display: none; }
.schritt-knopf.erledigt .schritt-haken { display: inline-flex; color: var(--ok-text); }
.schritt-haken svg { width: 13px; height: 13px; }
.schritt-knopf:focus-visible { outline: none; }
.schritt-knopf:focus-visible .schritt-pille { outline: 2px solid var(--accent); outline-offset: 0; }

/* Schritt 1: Seitenkarten; eine einzelne Seite mittig und breiter statt halber Breite mit leerem Rest */

.seite-bild-knopf { position: absolute; inset: 0; padding: 0; border: 0; background: none; cursor: zoom-in; display: grid; place-items: center; }
.seite-bild-knopf img { max-width: 100%; max-height: 100%; display: block; }
.seite-gross { position: absolute; right: 4px; top: 4px; width: var(--tipp); height: var(--tipp); padding: 0; border: 0; background: none; cursor: zoom-in; display: grid; place-items: center; }
.seite-gross svg { width: 18px; height: 18px; padding: 5px; box-sizing: content-box; border-radius: 50%; background: color-mix(in srgb, var(--flaeche) 88%, transparent); color: var(--text); border: var(--rand) solid var(--linie-rolle); }
.dateien { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.datei { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--flaeche); border: var(--rand) solid var(--linie-rolle); border-radius: var(--radius); min-width: 0; }
.datei-bild, .datei-typ { width: 40px; height: 52px; flex: none; border-radius: 4px; object-fit: cover; background: var(--accent-soft); }
.datei-typ { display: grid; place-items: center; font-size: 12px; font-weight: var(--schrift-fett); color: var(--accent); }
.datei-text { flex: 1; min-width: 0; display: grid; }
.datei-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: var(--schrift-fett); }

/* Schritt 2: Objekte als große Zeilen */
.objekt-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.objekt-zeile { width: 100%; min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; text-align: left;
  background: var(--flaeche); border: var(--rand) solid var(--linie-rolle); border-radius: var(--radius); font-size: 17px; cursor: pointer; color: var(--text); }
.objekt-zeile.gewaehlt { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.objekt-haken { color: var(--accent); display: inline-flex; }
.objekt-suche input { width: 100%; }

/* Schritt 3: Zusammenfassung, „Hochladen“ unten in der Daumenzone */
.zusammenfassung { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 16px; margin: 0; }
.zusammenfassung dt { color: var(--text-leise); }
.zusammenfassung dd { margin: 0; font-weight: var(--schrift-fett); overflow-wrap: anywhere; }
#v-senden .inhalt { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
#v-senden .daumen-leiste .knopf.gross { min-height: 60px; }

/* Vorschau: bildschirmfüllend auf dunklem Grund */
.vorschau { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--scan-grund); color: var(--scan-text); overflow: hidden; }
.vorschau[open] { display: flex; flex-direction: column; }
.vorschau::backdrop { background: var(--scan-grund); }
.vorschau-kopf { display: flex; align-items: center; justify-content: space-between; padding: calc(4px + env(safe-area-inset-top)) 8px 4px 16px; }
.vorschau-zahl { font-size: 15px; }
.vorschau-zu { width: var(--tipp); height: var(--tipp); border: 0; background: none; color: var(--scan-text); display: grid; place-items: center; cursor: pointer; }
.vorschau-zu:focus-visible { outline: 2px solid var(--akzent-auf-dunkel); outline-offset: -2px; }
.vorschau-buehne { flex: 1; min-height: 0; display: grid; place-items: center; overflow: hidden; touch-action: none; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); }
.vorschau-buehne img { max-width: 100%; max-height: 100%; user-select: none; -webkit-user-drag: none; transform-origin: center; will-change: transform; background: var(--weiss); }
.vorschau-buehne img.weich { transition: transform .2s ease-out; }
@media (prefers-reduced-motion: reduce) { .vorschau-buehne img.weich { transition: none; } }

/* ---------- „Dokumente“ kompakt (Rückmeldung Moritz 10.11.2026): bei 1–2 Seiten ohne Scrollen ---------- */
/* Ansicht genau bildschirmhoch: Kopf + Schrittleiste oben, „Weiter“ unten fest; nur der Seitenbereich scrollt */
#v-pruefen { height: 100dvh; min-height: 0; }
#v-pruefen .inhalt { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 10px var(--abstand); gap: 8px; }
#v-pruefen .fuss-leiste { position: static; flex: none; }
#v-pruefen .inhalt > * { flex: none; } /* nicht zusammendrücken – bei vielen Seiten scrollt der Bereich */
/* Seitenkarten: halbe Breite (2 Spalten); eine Seite mittig in derselben Größe */
#v-pruefen .seiten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
#v-pruefen .seiten:has(> li:only-child) { grid-template-columns: minmax(0, calc(50% - 6px)); justify-content: center; }
#v-pruefen .seite { padding: 6px; gap: 2px; }
/* Bildhöhe: A4 bei halber Breite, aber nie höher, als neben Kopf, Leiste, Aktionen, Hinweis und Knöpfen Platz ist */
#v-pruefen .seite-bild { aspect-ratio: auto; height: min(calc((100vw - 2 * var(--abstand) - 24px) / 2 * 1.414), calc(100dvh - 336px - env(safe-area-inset-top) - env(safe-area-inset-bottom))); min-height: 120px; }
/* Aktionen: eine kleine Zeile, Symbol über kurzem Text, ohne Rahmen; Tippfläche 44 px */
#v-pruefen .seite-knoepfe { grid-template-columns: 1.3fr 1fr 1fr; gap: 0; }
#v-pruefen .seite-knoepfe button { min-height: var(--tipp); padding: 2px 0; border: 0; background: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  font-size: 12px; line-height: 14px; color: var(--text); border-radius: var(--radius); white-space: nowrap; }
#v-pruefen .seite-knoepfe button svg { width: 18px; height: 18px; }
#v-pruefen .seite-knoepfe .loeschen { color: var(--crit-ink); }
#v-pruefen .seite-knoepfe button:active { background: var(--accent-soft); }
/* Hinweis: einzeilig, klein; sichtbar 20 px, Tippfläche 44 px */
#v-pruefen .seite-hinweis { position: relative; min-height: 20px; height: 20px; padding: 0 2px; font-size: 12px; white-space: nowrap; overflow: visible; }
#v-pruefen .seite-hinweis > span:last-child { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#v-pruefen .seite-hinweis::before { content: ""; position: absolute; left: 0; right: 0; top: -2px; bottom: -22px; } /* nach unten erweitert, überdeckt die Aktionen nicht */
/* „Weitere Seite scannen“: Sekundärknopf, etwas niedriger */
#v-pruefen .weitere-knopf { min-height: var(--tipp); padding: 8px 16px; font-size: 15px; flex: none; }
#v-pruefen .seite-hinweis { gap: 4px; }
#v-pruefen .seite-hinweis .punkt { width: 6px; height: 6px; }
#v-pruefen .seite { align-content: start; }
/* Löschen mit Abstand (≥ 8 px) zu Drehen, Bild und Hinweis – zerstörende Aktion nicht versehentlich treffen */
#v-pruefen .seite-knoepfe { grid-template-columns: max-content 1fr 1fr; margin-top: 6px; }
#v-pruefen .seite-knoepfe button { padding: 2px 4px; }
#v-pruefen .seite-knoepfe .loeschen { margin-left: 8px; }
#v-pruefen .seite-hinweis { margin-top: 6px; }
#v-pruefen .seite-bild { height: min(calc((100vw - 2 * var(--abstand) - 24px) / 2 * 1.414), calc(100dvh - 350px - env(safe-area-inset-top) - env(safe-area-inset-bottom))); }
#v-pruefen .seite-knoepfe button { padding: 2px 0; }
#v-pruefen .seite-knoepfe { grid-template-columns: max-content 1fr max-content; }
@media (max-width: 380px) { #v-pruefen .seite-knoepfe button { font-size: 11px; } }
#v-pruefen .seite-knoepfe button { min-width: var(--tipp); }

/* Mitteilungen im Konto-Blatt: eine Zeile mit Schalter (helle Variante des Scanner-Schalters) */
.push-schalter .push-text { display: grid; min-width: 0; }
.schalter.hell .schalter-bahn { background: var(--ink-2); }
.schalter.hell input:checked + .schalter-bahn { background: var(--accent); }
.schalter.hell input:checked + .schalter-bahn::after { background: var(--weiss); }
.schalter.hell input:focus-visible + .schalter-bahn { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Zuerst als App auf den Home-Bildschirm (ein Bildschirm, Hauptaktion unten) ---------- */
.installieren { min-height: 100dvh; display: flex; flex-direction: column; padding: calc(16px + env(safe-area-inset-top)) var(--abstand) calc(16px + env(safe-area-inset-bottom)); gap: 12px; }
.installieren-inhalt { flex: 1; display: flex; flex-direction: column; gap: 12px; }
.installieren-inhalt h1 { font-size: 22px; margin: 4px 0 0; }
.installieren-inhalt p { margin: 0; }
.installieren-schritte { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; }
.installieren-schritte li { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; line-height: 1.4; }
.schritt-nr { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-weight: var(--schrift-fett); font-size: 14px; }
.ico.inline { display: inline-flex; vertical-align: -4px; color: var(--accent); }
.ico.inline svg { width: 20px; height: 20px; }
.installieren-code { display: grid; gap: 6px; }
.code-gross { margin: 0; font-size: 26px; font-weight: var(--schrift-fett); letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.installieren-fuss { display: grid; gap: 8px; }
.installieren-fuss .knopf.leise { min-height: var(--tipp); border: 0; font-size: 15px; color: var(--text-leise); }