/* app.css – Aussehen des Scanners (Liquid Glass).
   Gebaut fuer Baustelle: sehr grosse Knoepfe (mindestens 56 Pixel hoch),
   starker Kontrast, keine Schrift aus dem Netz, Dunkelmodus ueber die
   Einstellung des Handys. Die Balken oben und unten halten Abstand zu den
   Rundungen und zur Home-Leiste des iPhones (env(safe-area-inset-*)).

   Leitidee: Nur Kopfzeile, Aktionsleiste, die festen Meldungsstreifen und
   eine Karte (Anmelden) sind Milchglas mit backdrop-filter. Alles andere
   (Knoepfe, Felder, Listen) liegt auf deckendem "Papier" ohne Blur, das
   kostet auf alten iPhones nichts. Der Hauptknopf ist nie Glas, sondern
   satt orange mit fast schwarzer Schrift. */

/* ------------------------------------------------------------------ Farben */

:root {
  color-scheme: light dark;

  /* Seitenverlauf: oben links kuehl-hell, Mitte grau-blau, unten rechts warm */
  --seite-1: #f7f8fa;
  --seite-2: #e7ecf1;
  --seite-3: #f6ece3;
  --fleck-a: rgba(247, 131, 47, 0.30);   /* Orange, oben rechts hinter dem Kopf */
  --fleck-b: rgba(74, 132, 201, 0.22);   /* Blau, unten links hinter der Leiste */
  --fleck-c: rgba(255, 255, 255, 0.70);  /* Lichtkern in der Mitte */

  /* Schrift */
  --fg: #101820;
  --muted: #3f4d59;                      /* 8,7:1 auf Weiss, 7,9:1 auf Glas */
  --fg-akzent: #86320a;                  /* Orange als Schrift, 8,5:1 auf Weiss */

  /* Akzent: der Hauptknopf, immer deckend */
  --akzent: #f7832f;
  --akzent-fg: #140a03;                  /* 7,3:1 auf --akzent */
  --akzent-weich: #ffe4d2;
  --akzent-rand: #d96a1c;

  /* Glas */
  --blur: 18px;
  --glas: rgba(255, 255, 255, 0.72);
  --glas-kante: rgba(255, 255, 255, 0.65);
  --glas-licht: rgba(255, 255, 255, 0.85);
  --glas-schatten: 0 8px 32px rgba(16, 24, 32, 0.14), 0 1px 2px rgba(16, 24, 32, 0.06);
  --glas-deckend: #f6f7f9;
  --kopf-schatten: 0 4px 24px rgba(0, 0, 0, 0.10);

  /* Papier: Inhaltsschicht ohne Blur */
  --papier: rgba(255, 255, 255, 0.88);
  --papier-deckend: #ffffff;
  --papier-2: #eef2f6;
  --papier-licht: rgba(255, 255, 255, 0.70);
  --linie: rgba(16, 24, 32, 0.14);
  --linie-stark: rgba(16, 24, 32, 0.28);
  --fokus: #9a3a08;

  /* Meldungen */
  --gut-bg: rgba(223, 243, 228, 0.92);
  --gut-fg: #0f5a25;
  --gut: #0f5a25;
  --warn-bg: #fff1cf;
  --warn-fg: #5c3a00;
  --fehler-bg: rgba(143, 29, 22, 0.92);
  --fehler-fg: #ffffff;
  --fehler-deckend: #8f1d16;
  --gut-deckend: #dff3e4;
  --gefahr-fg: #8a1c14;
  --gefahr-rand: #c0392b;

  --schatten-knopf: 0 6px 18px rgba(247, 131, 47, 0.32), 0 1px 2px rgba(16, 24, 32, 0.10);
  --schatten-weich: 0 2px 10px rgba(16, 24, 32, 0.10);

  /* Rundungen */
  --r-karte: 24px;
  --r-leiste: 26px;
  --r-knopf: 18px;
  --r-klein: 16px;
  --r-feld: 16px;

  --rand: 16px;                          /* seitlicher Abstand */
  --oben: env(safe-area-inset-top, 0px);
  --unten: env(safe-area-inset-bottom, 0px);
  --links: env(safe-area-inset-left, 0px);
  --rechts: env(safe-area-inset-right, 0px);
}

/* Dunkel: tiefer Grund, Rauchglas, Flecken schwaecher, kein Lichtkern */
@media (prefers-color-scheme: dark) {
  :root {
    --seite-1: #0b1016;
    --seite-2: #121a24;
    --seite-3: #1c1611;
    --fleck-a: rgba(255, 138, 61, 0.22);
    --fleck-b: rgba(70, 120, 190, 0.20);
    --fleck-c: rgba(255, 255, 255, 0.04);

    --fg: #f3f6f9;
    --muted: #b4c0cb;
    --fg-akzent: #ffa25c;

    --akzent: #ff8a3d;
    --akzent-fg: #1c0c00;                /* 8,1:1 auf --akzent */
    --akzent-weich: #3a2110;
    --akzent-rand: #ff8a3d;

    --glas: rgba(22, 30, 40, 0.72);
    --glas-kante: rgba(255, 255, 255, 0.16);
    --glas-licht: rgba(255, 255, 255, 0.22);
    --glas-schatten: 0 8px 32px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.30);
    --glas-deckend: #151d27;
    --kopf-schatten: 0 4px 24px rgba(0, 0, 0, 0.16);

    --papier: rgba(28, 38, 48, 0.88);
    --papier-deckend: #0f161e;
    --papier-2: #243040;
    --papier-licht: rgba(255, 255, 255, 0.10);
    --linie: rgba(255, 255, 255, 0.12);
    --linie-stark: rgba(255, 255, 255, 0.26);
    --fokus: #ffa25c;

    --gut-bg: rgba(127, 216, 154, 0.92);
    --gut-fg: #0d2a15;
    --gut: #6fd08c;
    --warn-bg: #3b2f10;
    --warn-fg: #ffd98a;
    --fehler-bg: rgba(255, 138, 130, 0.92);
    --fehler-fg: #180403;
    --fehler-deckend: #ff8a82;
    --gut-deckend: #7fd89a;
    --gefahr-fg: #ffa79e;
    --gefahr-rand: #e2685c;

    --schatten-knopf: 0 6px 18px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.30);
    --schatten-weich: 0 2px 10px rgba(0, 0, 0, 0.35);
  }
}

/* ------------------------------------------------------------- Grundgeruest */

* { box-sizing: border-box; }

/* Muss ganz oben stehen: eigene display-Regeln (Knoepfe, Zeilen, Streifen)
   wuerden das hidden-Merkmal sonst uebertoenen und versteckte Sachen
   trotzdem anzeigen. */
[hidden] { display: none !important; }

html {
  background: var(--seite-2);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overscroll-behavior-y: none;
}

body {
  /* isolation: ohne eigenen Stapelkontext laege body::before (z-index -1)
     UNTER dem body-Hintergrund und der Verlauf waere unsichtbar. */
  position: relative;
  isolation: isolate;
  background: var(--seite-2);          /* falls ::before nicht malt */
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 18px;
  line-height: 1.4;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

@media (prefers-color-scheme: dark) {
  body { -webkit-font-smoothing: antialiased; }
}

/* Seitenhintergrund: ein grosser ruhiger Verlauf plus drei weiche Flecken.
   Liegt fest (position: fixed) hinter allem, bewegt sich beim Rollen nicht.
   Die Flecken sitzen absichtlich hinter Kopfzeile (oben rechts) und
   Aktionsleiste (unten links): dort ist das Glas, dort muss es etwas brechen.
   Keine Bilder, keine Muster. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(42% 34% at 88% 6%,  var(--fleck-a) 0%, transparent 70%),
    radial-gradient(48% 40% at 6% 96%,  var(--fleck-b) 0%, transparent 70%),
    radial-gradient(60% 50% at 50% 48%, var(--fleck-c) 0%, transparent 75%),
    linear-gradient(165deg, var(--seite-1) 0%, var(--seite-2) 55%, var(--seite-3) 100%);
}

h1, h2, h3 { margin: 0; font-weight: 700; }
h2 { font-size: 28px; line-height: 1.15; letter-spacing: -0.015em; }
h3 { font-size: 19px; }
p { margin: 0 0 12px; }

/* Ein Element, das nur Vorleseprogramme sehen. */
.nur-vorlesen {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
}

/* Dateifelder bleiben bedienbar, sind aber unsichtbar: die Beschriftung
   daneben ist der eigentliche Knopf. display:none wuerde sie auf manchen
   iPhones unbrauchbar machen. */
.dateifeld {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Gezeichnete Zeichen (Inline-SVG). Sie nehmen die Schriftfarbe an. */
.ikon {
  flex: none;
  width: 24px;
  height: 24px;
  display: inline-block;
  vertical-align: middle;
}

/* ------------------------------------------------------------------ Glas */
/* Hoechstens vier Glasflaechen gleichzeitig: Kopfzeile, Aktionsleiste, eine
   Karte (.glas-karte) und ein fester Streifen. Alles andere ist Papier. */

.kopf,
.aktionen,
.glas-karte,
.streifen-fehler,
.streifen-oben {
  background: var(--glas);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(170%);
  backdrop-filter: blur(var(--blur)) saturate(170%);
  border: 1px solid var(--glas-kante);
  box-shadow:
    inset 0 1px 0 var(--glas-licht),            /* Lichtkante oben */
    inset 0 -1px 0 rgba(255, 255, 255, 0.10),   /* schwacher Gegenschein unten */
    var(--glas-schatten);
}

/* Glas-Karte: die eine grosse Karte pro Ansicht (Anmelde-Block). */
.glas-karte {
  border-radius: var(--r-karte);
  padding: 28px 22px;
}

/* ------------------------------------------------------------------ Kopf */

/* Kopfzeile: Glasband ohne Rundung, Haarlinie unten, schwacher Aussenschatten,
   damit sie sich beim Rollen sichtbar vom Inhalt trennt. */
.kopf {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(var(--oben) + 8px) calc(var(--rand) + var(--rechts)) 8px calc(var(--rand) + var(--links));
  border-width: 0 0 1px;
  border-color: var(--linie);
  border-radius: 0;
  box-shadow: inset 0 1px 0 var(--glas-licht), var(--kopf-schatten);
}

.kopf h1 {
  flex: 1;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kopf-knopf {
  min-width: 56px;
  min-height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 12px;
  font: inherit;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--fg);
  background: var(--papier);
  border: 1px solid var(--linie-stark);
  border-radius: var(--r-klein);
  box-shadow: inset 0 1px 0 var(--papier-licht);
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.kopf-knopf[hidden] { display: none; }
.kopf-knopf .ikon { width: 26px; height: 26px; }

/* Auf schmalen Handys stehen im Kopf bis zu drei Knoepfe (zurueck, offene
   Uploads, Ablage). Mit dem Wort "Ablage" bleiben fuer den Titel keine 70
   Pixel mehr, "Speichern" waere dann abgeschnitten. Deshalb faellt unter
   420 Pixel nur das Wort weg – die Trefferflaeche bleibt 56 Pixel, und den
   Namen traegt der Knopf ueber aria-label weiter. */
@media (max-width: 420px) {
  .kopf-knopf .knopf-wort { display: none; }
}
.kopf-knopf:active { transform: translateY(1px); }
.kopf-knopf:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }

.marke {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 7px;
  border-radius: 13px;
  background: var(--akzent);
  color: var(--akzent-fg);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------- Meldungen */

.streifen {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px calc(var(--rand) + var(--rechts)) 12px calc(var(--rand) + var(--links));
  font-weight: 600;
}

.streifen[hidden] { display: none; }
.streifen p { margin: 0; flex: 1; font-size: 18px; line-height: 1.4; }
.streifen .ikon { width: 28px; height: 28px; }

/* Der Fehlerstreifen liegt UEBER dem Inhalt (position: fixed), nicht darin.
   Frueher stand er im Fluss: klappte er auf, rutschte alles darunter 80 bis 110
   Pixel nach unten – der Finger traf dann den falschen Knopf. Jetzt verschiebt
   sich beim Aufklappen nichts mehr. z-index liegt ueber der Kopfzeile (30) und
   unter der Arbeitsanzeige (60). Oben haelt er Abstand zur Statusleiste.
   Glas mit 0,92 Deckkraft und kleinerem Blur: dort steht wichtige Schrift. */
.streifen-fehler,
.streifen-oben {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding-top: calc(var(--oben) + 12px);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  border-width: 0 0 1px;
  border-radius: 0 0 var(--r-karte) var(--r-karte);
  /* Ein langer Text soll nicht den halben Bildschirm zudecken. */
  max-height: 45dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Beide festen Streifen liegen oben. Stehen sie einmal gleichzeitig, muss der
   rote oben liegen: eine Fehlermeldung darf nie hinter einer guten Nachricht
   verschwinden. Der gruene raeumt sich nach zwoelf Sekunden selbst weg. */
.streifen-fehler {
  z-index: 51;
  background: var(--fehler-bg);
  color: var(--fehler-fg);
  border-color: rgba(255, 255, 255, 0.22);
}

.streifen-oben {
  background: var(--gut-bg);
  color: var(--gut-fg);
  border-color: rgba(255, 255, 255, 0.45);
}

/* Solange der Streifen steht, verdeckt er die oberste Kante des Inhalts.
   scroll-padding verschiebt nichts, sorgt aber dafuer, dass etwas, das die App
   in den Blick rollt, nicht unter dem Streifen landet. */
@supports selector(:has(*)) {
  body:has(.streifen-fehler:not([hidden])) .inhalt {
    scroll-padding-top: 132px;
  }
}

/* Knoepfe in den festen Streifen (#fehlerKnopf hat keine .knopf-Klasse,
   #gutKnopf schon – beide sehen gleich aus): 56 Pixel, Rand in Schriftfarbe,
   durchscheinend, damit sie auf Rot wie auf Gruen sichtbar bleiben. */
.streifen-fehler button,
.streifen-oben .knopf {
  flex: none;
  width: auto;
  min-height: 56px;
  min-width: 56px;
  padding: 0 18px;
  font: inherit;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  color: inherit;
  background: transparent;
  border: 2px solid currentColor;
  border-radius: var(--r-klein);
  box-shadow: none;
  cursor: pointer;
  touch-action: manipulation;
}

.streifen-fehler button:focus-visible,
.streifen-oben .knopf:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 2px;
}

/* Warnhinweise im Inhalt (Ecken-Ansicht, Rueckfrage, Anleitung): kein Glas,
   deckend. Das Zeichen steht oben neben der ersten Zeile, damit es bei einem
   laengeren Absatz nicht in der Mitte haengt. */
.streifen-warnung {
  align-items: flex-start;
  margin: 0 0 16px;
  border-radius: 20px;
  background: var(--warn-bg);
  color: var(--warn-fg);
  border: 1px solid rgba(0, 0, 0, 0.06);
  padding: 14px 16px;
}

/* Text mit Zeichen davor in einem Warnblock, der noch Knoepfe enthaelt. */
.warntext {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 4px;
  font-weight: 600;
}

.warntext .ikon { width: 28px; height: 28px; margin-top: -1px; }

/* "3 Seiten sind aufgenommen": eine gute Nachricht IM INHALT, ruhig orange.
   Wichtig: #gutStreifen traegt sowohl .streifen-gut als auch .streifen-oben.
   Ohne das :not() wuerde diese spaetere Regel bei gleicher Spezifitaet das
   Glas des festen gruenen Streifens ueberschreiben – er waere hellorange
   statt gruen und haette die falsche Rundung. */
.streifen-gut:not(.streifen-oben) {
  margin: 0 0 16px;
  border-radius: 20px;
  border-left: 6px solid var(--akzent);
  background: var(--akzent-weich);
  color: var(--fg);
  padding: 14px 16px;
  font-weight: 600;
}

/* ------------------------------------------------------------- Ansichten */

main {
  flex: 1;
  display: flex;
  min-height: 0;
}

.ansicht {
  display: none;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  width: 100%;
}

.ansicht.aktiv { display: flex; }

/* Ohne JavaScript – oder in der knappen Sekunde, bevor app.js die Klasse
   'aktiv' setzt – stand hier frueher eine leere Seite. body traegt von Anfang
   an data-view="anmelden" (index.html), deshalb zeigt diese Regel die
   Anmelde-Ansicht sofort. app.js setzt data-view und 'aktiv' immer zusammen,
   die beiden Regeln koennen also nicht auseinanderlaufen. */
body[data-view="anmelden"] #v-anmelden { display: flex; }

/* Ladehinweis waehrend des Starts: mittig, ruhig, ohne Animation – ein
   drehender Kreisel beim Start kostet nur Strom. Verschwindet, sobald das
   Markup oder app.js das Element auf hidden setzt. */
.startet {
  position: fixed;
  inset: 0;
  z-index: 25;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: calc(var(--oben) + 24px) calc(var(--rand) + var(--rechts))
           calc(var(--unten) + 24px) calc(var(--rand) + var(--links));
  background: var(--seite-2);
  color: var(--muted);
  font-size: 19px;
  font-weight: 600;
  text-align: center;
}

/* Sicherheitsnetz: sobald die App eine andere Ansicht zeigt, ist der Start
   vorbei – dann ist der Hinweis in jedem Fall weg. */
body:not([data-view="anmelden"]) .startet { display: none; }

.inhalt {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px calc(var(--rand) + var(--rechts)) 24px calc(var(--rand) + var(--links));
}

.inhalt.ohne-rollen { overflow: hidden; }

/* Hat eine Ansicht ausnahmsweise keine Knopfleiste unten, haelt der Inhalt
   selbst Abstand zur Home-Leiste. Mit Knopfleiste macht das die Leiste. */
@supports selector(:has(*)) {
  .ansicht:not(:has(.aktionen)) .inhalt {
    padding-bottom: calc(var(--unten) + 24px);
  }
}

/* Aktionsleiste: wie ein iOS-Sheet, oben gerundet, seitlich und unten
   buendig. Glas. */
.aktionen {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px calc(var(--rand) + var(--rechts)) calc(var(--unten) + 14px) calc(var(--rand) + var(--links));
  border-width: 1px 0 0;
  border-color: var(--glas-kante);
  border-radius: var(--r-leiste) var(--r-leiste) 0 0;
  box-shadow:
    inset 0 1px 0 var(--glas-licht),
    0 -8px 32px rgba(16, 24, 32, 0.10);
}

@media (prefers-color-scheme: dark) {
  .aktionen {
    box-shadow:
      inset 0 1px 0 var(--glas-licht),
      0 -8px 32px rgba(0, 0, 0, 0.45);
  }
}

.aktionen.reihe { flex-direction: row; }
.aktionen.reihe > * { flex: 1; }

.hinweis {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.45;
}

/* -------------------------------------------------------------- Knoepfe */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 12px 18px;
  font: inherit;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  color: var(--fg);
  background: var(--papier);
  border: 1px solid var(--linie-stark);
  border-radius: var(--r-knopf);
  box-shadow: inset 0 1px 0 var(--papier-licht), 0 1px 2px rgba(16, 24, 32, 0.08);
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.knopf .ikon { flex: none; }
.knopf > span:not(.ikon):not(.probe):not(.unterzeile) { min-width: 0; }

.knopf:active { transform: translateY(1px); }
.knopf:disabled, .knopf[aria-disabled="true"] { opacity: 0.45; cursor: default; }

.knopf:focus-visible {
  outline: 3px solid var(--fokus);
  outline-offset: 2px;
}

/* Hauptknopf: immer deckend orange, nie Glas. */
.knopf-haupt {
  color: var(--akzent-fg);
  background: var(--akzent);
  border-color: var(--akzent-rand);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), var(--schatten-knopf);
}

.knopf-riesig {
  min-height: 150px;
  padding: 16px 18px;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  border-radius: var(--r-karte);
  flex-direction: column;
  gap: 8px;
}

.knopf-riesig .ikon { width: 44px; height: 44px; }

.knopf-riesig .unterzeile {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
  opacity: 0.92;
}

.knopf-klein {
  min-height: 56px;
  font-size: 18px;
}

/* Zweiter, ruhigerer Knopf (spaeter: "Mit Zugangscode anmelden"). Kein
   Papier, nur Rand – so tritt er hinter den orangen Hauptknopf zurueck. */
.knopf-zweit {
  color: var(--fg);
  background: transparent;
  border: 2px solid var(--linie-stark);
  box-shadow: none;
  font-size: 18px;
  font-weight: 700;
}

/* Knopf nur so breit wie sein Inhalt (z. B. "Anlegen" neben dem Feld). */
.knopf-schmal {
  width: auto;
  padding-left: 18px;
  padding-right: 18px;
  white-space: nowrap;
}

/* Zerstoerende Knoepfe ("Diese Seite wegwerfen") duerfen nicht direkt unter
   einem harmlosen Knopf kleben. Sie bekommen viel Luft nach oben und eine
   eigene, ruhige Farbe: rote Schrift und roter Rand auf Papier –
   erkennbar anders, aber nicht schreiend. */
.knopf-gefahr,
.knopf-loeschen,
.frage-gefahr {
  position: relative;
  margin-top: 36px;                   /* plus 12px Luecke der Leiste = 48px */
  color: var(--gefahr-fg);
  background: var(--papier);
  border-color: var(--gefahr-rand);
}

/* Eine duenne Linie in der Luecke macht die Trennung auch beim Ueberfliegen
   sichtbar. */
.knopf-gefahr::before,
.knopf-loeschen::before,
.frage-gefahr::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -19px;
  border-top: 1px solid var(--linie);
}

.knopf-gefahr:focus-visible,
.knopf-loeschen:focus-visible,
.frage-gefahr:focus-visible {
  outline: 3px solid var(--gefahr-rand);
  outline-offset: 2px;
}

/* Stehen die Knoepfe nebeneinander, trennt der Abstand zur Seite. */
.aktionen.reihe .knopf-gefahr,
.aktionen.reihe .knopf-loeschen,
.aktionen.reihe .frage-gefahr {
  margin-top: 0;
  margin-left: 24px;
}

.aktionen.reihe .knopf-gefahr::before,
.aktionen.reihe .knopf-loeschen::before,
.aktionen.reihe .frage-gefahr::before { display: none; }

/* Modus-Schalter: Farbe, Grau, Schwarz-Weiss */
/* 20 Pixel Luft zwischen den drei Schaltern: mit Arbeitshandschuh trifft man
   sonst den Nachbarn. */
.schalterreihe {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 0 0 16px;
}

/* Durch die groesseren Luecken wird jeder Schalter schmaler. Deshalb darf
   "Schwarz-Weiss" umbrechen und traegt etwas kleinere Schrift, damit nichts
   ueber den Rand laeuft. */
.schalter {
  min-height: 84px;
  flex-direction: column;
  gap: 8px;
  padding: 10px 6px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  hyphens: auto;
  overflow-wrap: anywhere;
}

.schalter .probe {
  width: 36px;
  height: 24px;
  border-radius: 7px;
  border: 2px solid var(--linie-stark);
}

.probe-farbe { background: linear-gradient(120deg, #2f7ad6 0%, #e8b000 50%, #d2402c 100%); }
.probe-grau { background: linear-gradient(120deg, #ffffff 0%, #9aa3ab 55%, #3c444c 100%); }
.probe-sw { background: linear-gradient(120deg, #ffffff 0%, #ffffff 50%, #000000 50%, #000000 100%); }

.schalter[aria-pressed="true"] {
  color: var(--akzent-fg);
  background: var(--akzent);
  border-color: var(--akzent-rand);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), var(--schatten-knopf);
}

.schalter[aria-pressed="true"] .probe { border-color: var(--akzent-fg); }

/* -------------------------------------------------------------- Formular */

label.feldname {
  display: block;
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.005em;
}

/* .feld: heutige Felder. .eingabe: dieselbe Form, fuer die spaetere
   Zugangscode-Eingabe unter dem Google-Knopf. Voll deckend, weil man dort
   liest und tippt. */
.feld,
.eingabe {
  width: 100%;
  min-height: 60px;
  padding: 12px 16px;
  font: inherit;
  font-size: 19px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--fg);
  background: var(--papier-deckend);
  border: 2px solid var(--linie-stark);
  border-radius: var(--r-feld);
  box-shadow: inset 0 1px 2px rgba(16, 24, 32, 0.06);
  -webkit-appearance: none;
  appearance: none;
}

.feld::placeholder,
.eingabe::placeholder { color: var(--muted); opacity: 1; }

.feld:focus,
.eingabe:focus {
  outline: none;
  border-color: var(--fokus);
  box-shadow: 0 0 0 4px var(--akzent-weich);
}

/* Zugangscode: grosse Ziffern, Abstand dazwischen, mittig. */
.eingabe[inputmode="numeric"] {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Der Platzhalter ist ein ganzer Satz - er braucht die weiten Ziffernabstaende
   nicht und wuerde damit am Rand abgeschnitten. */
.eingabe[inputmode="numeric"]::placeholder {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0;
}

select.feld {
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 24px) 26px, calc(100% - 17px) 26px;
  background-size: 7px 7px, 7px 7px;
  background-repeat: no-repeat;
  padding-right: 48px;
}

.abschnitt { margin: 0 0 22px; }

.suchzeile {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.suchzeile .feld { flex: 1; min-width: 0; }

/* Etwas Luft zwischen Feld und dem Knopf darunter. */
.abschnitt .knopf + .knopf,
.abschnitt .feld + .knopf,
.abschnitt .suchzeile + .knopf,
.abschnitt .hinweis + .knopf { margin-top: 10px; }

/* Schalter "Text erkennen" */
.wippe {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 72px;
  padding: 12px 16px;
  font: inherit;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
  color: var(--fg);
  background: var(--papier);
  border: 1px solid var(--linie-stark);
  border-radius: var(--r-knopf);
  box-shadow: inset 0 1px 0 var(--papier-licht), 0 1px 2px rgba(16, 24, 32, 0.08);
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.wippe:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }

.wippe .kasten {
  flex: none;
  width: 62px;
  height: 36px;
  border-radius: 18px;
  background: var(--papier-2);
  border: 2px solid var(--linie-stark);
  position: relative;
  transition: background 0.12s ease;
}

.wippe .kasten::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--fg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.12s ease;
}

.wippe[aria-pressed="true"] .kasten {
  background: var(--akzent);
  border-color: var(--akzent-rand);
}

.wippe[aria-pressed="true"] .kasten::after {
  background: var(--akzent-fg);
  transform: translateX(26px);
}

.wippe .beschriftung { flex: 1; min-width: 0; }
.wippe .unterzeile {
  display: block;
  margin-top: 2px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--muted);
}

/* ----------------------------------------------------------- Ecken pruefen */

.eckenflaeche {
  flex: 1;
  min-height: 240px;
  margin: 0;
  background: #0a0e14;
  border-radius: 0;
  position: relative;
  overflow: hidden;
}

/* Die beiden Warnhinweise der Ecken-Ansicht ("unscharf", "Blatt nicht
   gefunden"). Der Inhalt dieser Ansicht hat keinen eigenen Seitenrand, deshalb
   bringen die Hinweise ihren eigenen mit – samt der Rundungen des iPhones. */
.warnstreifen-rand,
.eckenstreifen {
  margin: 12px calc(var(--rechts) + 16px) 12px calc(var(--links) + 16px);
  border-radius: 20px;
  padding: 14px 16px;
}

/* Der Ecken-Editor bringt eine eigene kleine Leiste mit. Sie ist zu klein
   fuer Handschuhe – wir blenden sie aus und nehmen die grossen Knoepfe unten. */
.eckenflaeche .scanic-toolbar { display: none !important; }

/* ----------------------------------------------------------- Vorschau */

.vorschau {
  display: block;
  width: 100%;
  max-height: 58vh;
  object-fit: contain;
  background: var(--papier-deckend);
  border: 1px solid var(--linie-stark);
  border-radius: 20px;
  box-shadow: var(--schatten-weich);
  margin: 0 0 16px;
}

/* "Es liegen noch Seiten von vorhin bereit" – das ist eine gute Nachricht,
   keine Warnung. Deshalb ruhige Akzentfarbe statt Gelb oder Rot, aber mit
   kraeftigem Balken links, damit man es nicht uebersieht. Papier, kein Glas. */
.seiten-wartend {
  display: block;
  margin: 0 0 16px;
  padding: 14px 16px;
  border-radius: 20px;
  border: 1px solid var(--linie);
  border-left: 6px solid var(--akzent);
  background: var(--akzent-weich);
  color: var(--fg);
  font-size: 18px;
  font-weight: 600;
}

.seiten-wartend .frage .knopf { background: var(--papier-deckend); }
.seiten-wartend .frage .knopf-haupt { background: var(--akzent); }

.seitenzahl {
  display: block;
  margin: 0 0 10px;
  font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* "Seite fertig": Bild schrumpft mit, damit die drei Schalter fuer Farbe,
   Grau und Schwarz-Weiss immer sichtbar bleiben. Niemand soll scrollen
   muessen, um den Modus umzustellen. */
.seite-inhalt {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.seite-inhalt .vorschau {
  flex: 1 1 auto;
  min-height: 90px;
  max-height: none;
}

.seite-inhalt .schalterreihe,
.seite-inhalt .seitenzahl,
.seite-inhalt .hinweis {
  flex: 0 0 auto;
}

/* ------------------------------------------------------------- Listen */

.liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.zeile {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 72px;
  padding: 12px 16px;
  font: inherit;
  text-align: left;
  text-decoration: none;
  color: var(--fg);
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: var(--r-knopf);
  box-shadow: inset 0 1px 0 var(--papier-licht), 0 1px 2px rgba(16, 24, 32, 0.06);
  cursor: pointer;
}

.zeile:active { transform: translateY(1px); }
.zeile:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }

.zeile .text { flex: 1; min-width: 0; }
.zeile .name {
  display: block;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.zeile .neben {
  display: block;
  font-size: 16px;
  line-height: 1.45;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.zeile .pfeil { font-size: 28px; line-height: 1; color: var(--muted); }

.ordnerreihe {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 4px 0 10px;
  margin: 0 0 12px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.ordnerreihe::-webkit-scrollbar { display: none; }

.ordnerreihe .knopf {
  width: auto;
  flex: 0 0 auto;
  min-height: 56px;
  font-size: 17px;
  white-space: nowrap;
  border-radius: 28px;
}

.ordnerreihe .knopf[aria-pressed="true"] {
  color: var(--akzent-fg);
  background: var(--akzent);
  border-color: var(--akzent-rand);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), var(--schatten-knopf);
}

.leer {
  padding: 24px 4px;
  color: var(--muted);
  text-align: center;
}

/* ------------------------------------------------------- Offene Uploads */

.balken {
  height: 14px;
  margin: 8px 0 0;
  border-radius: 7px;
  background: var(--papier-2);
  overflow: hidden;
}

.balken > span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 7px;
  background: var(--akzent);
  transition: width 0.2s ease;
}

.zustand {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  background: var(--papier-2);
  color: var(--muted);
  white-space: nowrap;
}

/* "laeuft" traegt die weiche Akzentflaeche, "fertig" bleibt ruhiges Papier mit
   gruener Schrift – so sind die beiden Zustaende auch ohne Lesen zu trennen. */
.zustand.laeuft { background: var(--akzent-weich); color: var(--fg); }
.zustand.fehler { background: var(--fehler-deckend); color: var(--fehler-fg); }
.zustand.fertig { background: var(--papier-2); color: var(--gut); }

.uploadzeile {
  display: block;
  padding: 14px 16px;
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: var(--r-knopf);
  box-shadow: inset 0 1px 0 var(--papier-licht), 0 1px 2px rgba(16, 24, 32, 0.06);
}

.uploadzeile .kopfzeile {
  display: flex;
  align-items: center;
  gap: 10px;
}

.uploadzeile .kopfzeile .name { flex: 1; font-weight: 600; word-break: break-word; }
.uploadzeile .grund {
  margin: 8px 0 0;
  font-size: 16px;
  line-height: 1.45;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.uploadzeile .knopfreihe { display: flex; gap: 10px; margin: 12px 0 0; }
.uploadzeile .knopfreihe .knopf { min-width: 0; }
.uploadzeile .frage .knopf { background: var(--papier-deckend); }
.uploadzeile .frage .knopf-haupt { background: var(--akzent); }

/* -------------------------------------------------------------- Arbeit */

/* Dunkler Schleier ueber allem. Bewusst KEIN Blur: das ist die Anzeige, die
   waehrend schwerer Rechnungen (Texterkennung) steht – da soll die Grafik
   nicht noch mehr zu tun haben. */
.arbeit {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  /* Abstand zu Statusleiste, Rundungen und Home-Leiste des iPhones. */
  padding: calc(var(--oben) + 32px) calc(var(--rechts) + 32px)
           calc(var(--unten) + 32px) calc(var(--links) + 32px);
  background: rgba(8, 12, 17, 0.84);
  color: #ffffff;
  text-align: center;
}

.arbeit[hidden] { display: none; }

.arbeit .kreisel {
  width: 58px;
  height: 58px;
  border: 6px solid rgba(255, 255, 255, 0.28);
  border-top-color: #ff8a3d;
  border-radius: 50%;
  animation: dreht 0.9s linear infinite;
}

@keyframes dreht { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .arbeit .kreisel { animation-duration: 2.4s; }
  .balken > span { transition: none; }
  .wippe .kasten, .wippe .kasten::after { transition: none; }
}

.arbeit .meldung { font-size: 21px; font-weight: 700; max-width: 22em; }

.arbeit .balken {
  width: min(320px, 80vw);
  background: rgba(255, 255, 255, 0.25);
}

.arbeit .balken > span { background: #ff8a3d; }

/* Der Knopf in der Arbeitsanzeige ("Ohne Texterkennung speichern") ist ein
   Nebenweg, nicht die Hauptsache: nur so breit wie sein Text, hell auf dunkel. */
.arbeit-knopf {
  width: auto;
  padding: 0 18px;
  margin-top: 6px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.10);
  border: 2px solid rgba(255, 255, 255, 0.75);
  box-shadow: none;
}

.arbeit-knopf:focus-visible { outline: 3px solid #ff8a3d; }

/* ---------------------------------------------------------- Anmelden */

/* Der Anmelde-Block ist die eine Glas-Karte dieser Ansicht. Er schwebt mittig
   ueber dem Verlauf, darunter die Leiste mit dem orangen Hauptknopf. */
.anmelde-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: auto 0;
  text-align: center;
}

/* Der Inhalt der Anmelde-Ansicht stapelt die Karte mittig. */
#v-anmelden .inhalt {
  display: flex;
  flex-direction: column;
}

.anmelde-block img.zeichen {
  width: 96px;
  height: 96px;
  margin: 0 auto 4px;
  border-radius: 22px;
  box-shadow: 0 8px 24px rgba(16, 24, 32, 0.18);
}

.anmelde-block h2 { margin: 0; }
.anmelde-block .hinweis { margin: 0; max-width: 26em; }

/* Geht die Anmeldung schief, muss der Satz auffallen: rot und fett statt
   grau wie die uebrigen Hinweise. */
#anmeldenFehler:not([hidden]) {
  color: var(--gefahr-fg);
  font-weight: 700;
}

/* Platz fuer den zweiten Anmeldeweg (Zugangscode) unter dem Google-Knopf:
   ein Trenner mit Wort in der Mitte, dann Feld und ruhiger Knopf. */
.oder {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0;
  color: var(--muted);
  font-size: 16px;
  font-weight: 600;
}

.oder::before,
.oder::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--linie-stark);
}

/* ------------------------------------------------- Wer ist angemeldet */

/* Kleine Zeile unter dem Titel der Scannen-Ansicht. Nach der Anmeldung mit
   Zugangscode gibt es kein Bild, dann steht hier nur der Name. */
.wer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 16px;
  font-weight: 600;
}

.wer-bild {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}

/* ---------------------------------------------------- Vorschlagskarte */

/* Die eine Glas-Karte der Speichern-Ansicht: Art, Firma, Datum und darunter
   der Ordner, in den die Datei geht. */
.vorschlag {
  padding: 16px 14px 12px;
  margin: 0 0 22px;
}

.vorschlag-kopf {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  padding: 0 4px;
  font-size: 17px;
  font-weight: 700;
}

.vorschlag-kopf-ikon {
  display: inline-flex;
  flex: none;
  color: var(--gut);
}

.vorschlag-kopf.pruefen { color: var(--warn-fg); }
.vorschlag-kopf.pruefen .vorschlag-kopf-ikon { color: var(--warn-fg); }

@media (prefers-color-scheme: dark) {
  .vorschlag-kopf.pruefen { color: var(--warn-fg); }
}

/* Eine tippbare Zeile der Karte. Mindestens 64 Pixel hoch, damit sie auch
   mit Arbeitshandschuh sicher zu treffen ist. */
.vzeile {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  padding: 10px 14px;
  margin: 0 0 12px;
  font: inherit;
  text-align: left;
  color: var(--fg);
  background: var(--papier-deckend);
  border: 1px solid var(--linie);
  border-radius: var(--r-knopf);
  box-shadow: inset 0 1px 0 var(--papier-licht), 0 1px 2px rgba(16, 24, 32, 0.06);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

.vzeile:active { transform: translateY(1px); }
.vzeile:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }

.vzeile-ikon {
  display: inline-flex;
  flex: none;
  color: var(--muted);
}

.vzeile-ikon .ikon { width: 26px; height: 26px; }

.vzeile-text { flex: 1; min-width: 0; }

.vzeile-name {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
}

.vzeile-wert {
  display: block;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Unsicher: gelbes Zeichen links, Hinweis rechts, gelber Rand. */
.vzeile.unsicher {
  border-color: var(--warn-fg);
  background: var(--warn-bg);
}

.vzeile.unsicher .vzeile-ikon { color: var(--warn-fg); }
.vzeile.unsicher .vzeile-name,
.vzeile.unsicher .vzeile-wert { color: var(--warn-fg); }

.vzeile-pruef {
  flex: none;
  font-size: 14px;
  font-weight: 700;
  color: var(--warn-fg);
  white-space: nowrap;
}

.vzeile-pfeil {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--muted);
  transition: transform 0.15s ease;
}

.vzeile[aria-expanded="true"] .vzeile-pfeil { transform: rotate(90deg); }

@media (prefers-reduced-motion: reduce) {
  .vzeile-pfeil { transition: none; }
}

/* Der aufgeklappte Bereich unter einer Zeile. */
.vorschlag-wahl { margin: -4px 0 14px; padding: 0 2px; }
.vorschlag-wahl .eingabe + .chipreihe { margin-top: 12px; }

/* Grosse Chips zum Waehlen (Belegart, Mitarbeiter). */
.chipreihe {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  min-height: 56px;
  padding: 10px 18px;
  font: inherit;
  font-size: 18px;
  font-weight: 700;
  color: var(--fg);
  background: var(--papier-deckend);
  border: 2px solid var(--linie-stark);
  border-radius: 28px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

.chip:active { transform: translateY(1px); }
.chip:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }

.chip[aria-pressed="true"] {
  color: var(--akzent-fg);
  background: var(--akzent);
  border-color: var(--akzent-rand);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), var(--schatten-knopf);
}

/* Der Ordner, in den die Datei geht. Grau, ruhig, unter den drei Zeilen. */
.vorschlag-pfad {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 0;
  padding: 0 4px;
  color: var(--muted);
  font-size: 16px;
  font-weight: 600;
  word-break: break-word;
}

.vorschlag-pfad .ikon { width: 20px; height: 20px; }

/* ------------------------------------------ Ablage: Zeile mit Verschieben */

/* Dateiname links, Knopf "Verschieben" rechts. Beide bleiben gross genug. */
.zeilenpaar {
  display: flex;
  align-items: stretch;
  gap: 10px;
}

.zeilenpaar .zeile { flex: 1; min-width: 0; }

.verschieben-knopf {
  flex: 0 0 auto;
  width: auto;
  min-width: 56px;
  min-height: 72px;
  padding: 8px 12px;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  font-weight: 700;
  border-radius: var(--r-knopf);
}

.verschieben-knopf .ikon { width: 26px; height: 26px; }

/* Die Karte, die unter einer Dateizeile aufklappt. */
.verschieben-karte {
  margin: 10px 0 4px;
  padding: 14px 12px 10px;
  background: var(--papier-deckend);
  border: 1px solid var(--linie-stark);
  border-radius: var(--r-karte);
}

.verschieben-karte .feldname { margin-top: 14px; }
.verschieben-karte .feldname:first-child { margin-top: 0; }
.verschieben-karte .knopfreihe { display: flex; gap: 10px; margin: 16px 0 0; }
.verschieben-karte .knopfreihe .knopf { min-width: 0; }

/* ------------------------------------------------------ Anleitung (install) */

.anleitung { max-width: 640px; margin: 0 auto; }

.anleitung h2 { font-size: 24px; margin: 8px 0 12px; }

.schritt {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px;
  margin: 0 0 14px;
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: 20px;
  box-shadow: inset 0 1px 0 var(--papier-licht), 0 1px 2px rgba(16, 24, 32, 0.06);
}

.schritt .nummer {
  flex: none;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 22px;
  background: var(--akzent);
  color: var(--akzent-fg);
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.schritt .bild {
  flex: none;
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: var(--papier-2);
  border: 1px solid var(--linie);
}

.schritt p { margin: 0; }
.schritt strong { display: block; font-size: 19px; font-weight: 700; }

/* Breiter Bildschirm: die Bedienung bleibt gleich, nur zentriert. */
@media (min-width: 820px) {
  .inhalt > *, .aktionen > *, .anmelde-block { max-width: 680px; margin-left: auto; margin-right: auto; }
  .anmelde-block { width: 100%; }
  .aktionen.reihe { max-width: 680px; margin-left: auto; margin-right: auto; }
  .aktionen.reihe > * { max-width: none; }
}

/* Rueckfragen vor einer zerstoerenden Handlung. Untereinander, damit der
   gefaehrliche Knopf nie neben dem harmlosen liegt. Den Abstand nach oben
   bringt .frage-gefahr selbst mit. */
.frage {
  display: flex;
  flex-direction: column;
  margin-top: 12px;
}

/* ------------------------------------------------------ Rueckfallebenen */

/* Rueckfallebene 1: Browser ohne backdrop-filter (alte Safari, Firefox ohne
   Flag). Deckende Flaeche in derselben Farbe, Kante bleibt. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .kopf, .aktionen, .glas-karte { background: var(--glas-deckend); }
  .streifen-fehler { background: var(--fehler-deckend); }
  .streifen-oben   { background: var(--gut-deckend); }
}

/* Rueckfallebene 2: "Transparenz reduzieren" in den Bedienungshilfen.
   Dann ist alles deckend, kein Blur, kein Farbfleck. Der orange Hauptknopf,
   gedrueckte Schalter und der gewaehlte Ordner behalten ihre Farbe. */
@media (prefers-reduced-transparency: reduce) {
  body::before {
    background: linear-gradient(165deg, var(--seite-1) 0%, var(--seite-2) 100%);
  }
  .kopf, .aktionen, .glas-karte, .streifen-fehler, .streifen-oben {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .kopf, .aktionen, .glas-karte { background: var(--glas-deckend); }
  .streifen-fehler { background: var(--fehler-deckend); }
  .streifen-oben   { background: var(--gut-deckend); }
  .knopf:not(.knopf-haupt):not(.knopf-zweit):not([aria-pressed="true"]),
  .chip:not([aria-pressed="true"]),
  .kopf-knopf, .feld, .eingabe, .zeile, .uploadzeile, .wippe, .schritt,
  .vzeile, .verschieben-karte {
    background: var(--papier-deckend);
  }
  .frage-gefahr { background: var(--papier-deckend); }
  .streifen-fehler button, .streifen-oben .knopf { background: transparent; }
}

/* Mehr Kontrast gewuenscht: Kanten kraeftiger, Glas dichter. */
@media (prefers-contrast: more) {
  :root {
    --glas: rgba(255, 255, 255, 0.92);
    --papier: #ffffff;
    --linie: rgba(16, 24, 32, 0.40);
    --linie-stark: rgba(16, 24, 32, 0.60);
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --glas: rgba(22, 30, 40, 0.92);
      --papier: #1c2630;
      --linie: rgba(255, 255, 255, 0.35);
      --linie-stark: rgba(255, 255, 255, 0.55);
    }
  }
}

/* Block fuer den neuen Ordner unter der Ordnerwahl. */
.abschnitt-innen { margin-top: 12px; }


/* --- Nachtrag Teil 2 (Pruefbefunde) --- */
/* Streifen mit zwei Knoepfen (z. B. "Falscher Ordner?" + "Alles klar"): Text
   auf eine eigene Zeile, Knoepfe darunter nebeneinander - sonst liegt der
   zweite Knopf auf 375 px ausserhalb des Bildschirms. */
.streifen { flex-wrap: wrap; }
.streifen > p, #gutText, #fehlerText { flex: 1 1 100%; }

/* Anmelde-Ansicht auf kleinen iPhones (667 px): Inhalt scrollbar, Karte
   wird nicht mehr zusammengedrueckt und vom Anmeldeblock ueberdeckt. */
#v-anmelden .inhalt { overflow-y: auto; -webkit-overflow-scrolling: touch; }
#v-anmelden .anmelde-block, #v-anmelden .anmelde-block.glas-karte { flex-shrink: 0; }

/* Mindestabstand 12 px zwischen benachbarten Knoepfen; bei Nochmal/Wegwerfen
   16 px, weil ein Fehlgriff dort Daten kostet. */
.zeilenpaar, .verschieben-karte .knopfreihe { gap: 12px; }
.uploadzeile .knopfreihe { gap: 16px; }

/* Firmenname in der Vorschlagskarte darf zwei Zeilen haben - die Endung
   (GmbH, KG, Sohn) ist oft der Unterschied. */
.vzeile-wert { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; overflow: hidden; }

/* Ordner-Chips: rechter Rand und weiche Kante, damit der letzte Chip sichtbar
   "weitergeht" statt hart abgeschnitten zu wirken. */
.ordnerreihe, .chipreihe { padding-right: 16px; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }

/* "antippen"-Hinweis in der Vorschlagskarte lesbar gross. */
.vzeile-pruef { font-size: 16px; }


/* --- Nachtrag Teil 3 (Pruefbefunde, zweite Runde) --- */

/* Befund 10: Die Anmelde-Karte muss auf ein iPhone SE (667 px) passen, ohne
   dass der Zugangscode unter die Leiste rutscht. Kleineres Bild, engere
   Karte - zusammen rund 40 px weniger Hoehe. */
.anmelde-block img.zeichen { width: 88px; height: 88px; }
.anmelde-block.glas-karte { padding: 20px 22px; }

/* Befund 5: Der Verschieben-Knopf in der Ablage traegt nur noch sein Symbol
   (Name im aria-label). 60 px breit, Trefferflaeche bleibt ueber 56x56 - die
   restliche Breite gehoert dem Dateinamen. */
.verschieben-knopf {
  flex: 0 0 60px;
  width: 60px;
  min-width: 60px;
  min-height: 56px;
  padding: 8px 0;
  gap: 0;
}

.verschieben-knopf .ikon { width: 26px; height: 26px; }

/* Befund 7: Der Winkel der Dateizeile ist jetzt dasselbe SVG wie in der
   Vorschlagskarte, nicht mehr das Textzeichen in 28 px. */
.zeile .pfeil {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--muted);
}

/* Befund 8: Der Satz "Es gilt wieder der Vorschlag von oben." steht drei
   Sekunden unter dem Ordner - eine eigene Zeile, damit der Pfad lesbar bleibt. */
.vorschlag-pfad { flex-wrap: wrap; }
.pfad-nachsatz {
  flex: 1 1 100%;
  margin-left: 28px;
  color: var(--warn-fg);
  font-weight: 700;
}

/* Befund 6: Die Belegart-Chips haben jetzt ihr eigenes Zeichen. Es steht
   ruhig vor dem Wort und nimmt dem Text keine Breite weg. */
.chip .ikon { width: 22px; height: 22px; }

/* Befund 9: Abmelden steht klein unter dem Namen, nicht ueber die ganze
   Breite - es ist kein Knopf, den man im Ablauf braucht. */
.abmelden-knopf {
  width: auto;
  min-height: 56px;
  margin: 0 0 14px;
  padding-left: 18px;
  padding-right: 18px;
  font-size: 17px;
}

#abmeldenFrage { margin: 0 0 14px; }


/* --- Nachtrag Teil 4 (Pruefbefunde) --- */
/* Kurze Bildschirme (iPhone SE/8, 667 px): der Anmeldeblock wird kleiner,
   damit die Karte darueber ganz im Bild bleibt. */
@media (max-height: 700px) {
  #anmeldenKnopf.knopf-riesig { padding: 14px 18px; min-height: 64px; }
  #anmeldenKnopf .unterzeile { display: none; }
  #anmeldenHinweis { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 15px; }
  #v-anmelden .anmelde-block img.zeichen, #v-anmelden .anmelde-block .zeichen { width: 64px; height: 64px; }
}
/* Dateiname in der Ablage darf zwei Zeilen haben - sonst fehlt genau der
   Teil (Firma, Endung), an dem man die Datei erkennt. */
.zeile .name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }