/* Die Vorführung: vier Betriebe, eine App.
   Nach der Leinwand „Honeypod Vorfuehrung" (Claude Design), so wie die
   Startseite sie einbindet: kompakt. Natürliche Größe 1031 × 514 Pixel, die
   Seite passt sie in ihren Rahmen ein.

   Zwei Themen auf zwei Ebenen. Das Thema der WEBSITE (dunkel, oder hell mit
   :root[data-thema="hell"]) gilt für alles um die kleine App: die Liste
   „Betrieb wechseln", die Texte und den Rahmen des Fensters. Die Werte
   stehen als --vf-w-… unten, wie die Leinwand sie mit website='dunkel' und
   'hell' zeichnet. Die kleine App selbst trägt das Thema ihres Betriebs
   (Hollbach und Petersen hell, Honeypod und Feldt dunkel), gleich welches
   die Website hat.

   Die Farben der kleinen App kommen als Variablen aus js/vorfuehrung.js, je
   nach Betrieb und hellem oder dunklem Thema. Wo die Leinwand eine Bewegung
   mit Verzögerung zeigt, steht sie hier genauso: Erst die Fläche, dann der
   Knopf, dann die Pille, dann die Leiste. */

.vf {
  --vf-w-text: #f0f1f3;
  --vf-w-text2: #a0a4ab;
  --vf-w-glas: rgba(30, 32, 35, .86);
  --vf-w-kante: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px rgba(255, 255, 255, .08);
  --vf-w-wahl: rgba(255, 255, 255, .07);
  --vf-w-zeiger: rgba(255, 255, 255, .05);
  --vf-w-verweis: #eab44a;
  --vf-w-verweis-zeiger: #f3cb72;
  --vf-w-rahmen: rgba(255, 255, 255, .05);
  --vf-w-fokus: #eab44a;
  width: 1031px;
  display: flex; gap: 28px; align-items: flex-start;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  color: var(--vf-w-text);
  text-align: left;
  -webkit-font-smoothing: antialiased;
}
/* Die helle Website. Der Verweis steht wie in der Leinwand in #7a5d00
   (5,5 zu 1 auf dem Grund), der Fokusring im Ton der Verweise der Website,
   denn Honig hielte auf Hell keine 3 zu 1. */
:root[data-thema="hell"] .vf {
  --vf-w-text: #1b1c1e;
  --vf-w-text2: #4e5157;
  --vf-w-glas: rgba(255, 255, 255, .86);
  --vf-w-kante: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 0 0 1px rgba(0, 0, 0, .08);
  --vf-w-wahl: rgba(0, 0, 0, .05);
  --vf-w-zeiger: rgba(0, 0, 0, .03);
  --vf-w-verweis: #7a5d00;
  --vf-w-verweis-zeiger: #6b4c00;
  --vf-w-rahmen: rgba(255, 255, 255, .55);
  --vf-w-fokus: #835d00;
}
.vf *, .vf *::before, .vf *::after { box-sizing: border-box; margin: 0; padding: 0; }
.vf button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.vf button:focus-visible { outline: 2px solid var(--vf-w-fokus); outline-offset: 2px; }

/* ── Links: der Umschalter ───────────────────────────────── */
.vf-links { width: 230px; flex: none; display: flex; flex-direction: column; gap: 20px; }
.vf-gruppe { display: flex; flex-direction: column; gap: 8px; }
.vf-label { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--vf-w-text2); }
.vf-umschalter {
  padding: 6px; border-radius: 12px; background: var(--vf-w-glas);
  box-shadow: var(--vf-w-kante), 0 20px 40px -24px rgba(0, 0, 0, .5);
  display: flex; flex-direction: column; gap: 2px;
}
.vf .vf-betrieb {
  height: 38px; display: flex; align-items: center; gap: 10px; padding: 0 10px; border-radius: 8px;
  text-align: left;
}
.vf .vf-betrieb:hover { background: var(--vf-w-zeiger); }
.vf .vf-betrieb[aria-pressed="true"], .vf .vf-betrieb[aria-pressed="true"]:hover { background: var(--vf-w-wahl); }
.vf-betrieb-punkt { width: 10px; height: 10px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); }
.vf-betrieb-name { flex: 1; font-size: 14px; font-weight: 600; white-space: nowrap; }
.vf-betrieb-haken { width: 16px; font-size: 13px; font-weight: 700; color: var(--vf-w-text2); }
.vf-hinweis { font-size: 12.5px; line-height: 1.45; color: var(--vf-w-text2); }
.vf .vf-nochmal { align-self: flex-start; font-size: 13.5px; font-weight: 600; color: var(--vf-w-verweis); border-radius: 6px; }
.vf .vf-nochmal:hover { color: var(--vf-w-verweis-zeiger); }

/* ── Rechts: das Fenster der kleinen App ─────────────────── */
.vf-rechts { flex: none; display: flex; flex-direction: column; gap: 10px; }
.vf-rahmen {
  padding: 8px; border-radius: 18px; background: var(--vf-w-rahmen);
  box-shadow: var(--vf-w-kante), 0 40px 80px -30px rgba(0, 0, 0, .6);
}
/* 1440 × 900 auf 0,52 verkleinert, wie in der Leinwand mit `zoom`. Mit
   `transform` würden alle Linien auf einen halben Pixel schrumpfen und
   blasser stehen als dort. Wer `zoom` nicht kennt, bekommt `transform`. */
.vf-fenster { position: relative; width: 749px; height: 468px; border-radius: 11px; overflow: hidden; }
.vf-app {
  position: relative; width: 1440px; height: 900px; zoom: .52;
  background: var(--vf-bg); color: var(--vf-text); font-family: var(--vf-ff); font-size: 14px; line-height: normal;
}
@supports not (zoom: 1) {
  .vf-app { position: absolute; left: 0; top: 0; transform: scale(.52); transform-origin: 0 0; }
}
.vf-unterzeile { font-size: 13.5px; color: var(--vf-w-text2); min-height: 20px; }

/* Die Seitenleiste */
.vf-leiste { position: absolute; left: 0; top: 0; bottom: 0; width: 250px; background: var(--vf-sidebar); border-right: 1px solid var(--vf-border); }
.vf-ampel { position: absolute; left: 20px; top: 20px; display: flex; gap: 8px; }
.vf-ampel i { width: 12px; height: 12px; border-radius: 50%; }
.vf-ampel i:nth-child(1) { background: #ff5f57; }
.vf-ampel i:nth-child(2) { background: #febc2e; }
.vf-ampel i:nth-child(3) { background: #28c840; }
.vf-leiste-inhalt { position: absolute; left: 16px; right: 16px; top: 52px; display: flex; flex-direction: column; gap: 14px; }
.vf-marke { display: flex; align-items: center; gap: 11px; }
.vf-marke-kachel {
  width: 38px; height: 38px; flex: none; border-radius: var(--vf-rc); overflow: hidden;
  display: flex; align-items: center; justify-content: center; transition: border-radius .3s;
}
/* Das Logo behält seine Größe, verkleinert wird nur mit transform. Als
   schrumpfendes Kind seiner Kachel wurde es am Telefon schmaler als hoch und
   stand verzerrt da (26.10.2026). */
.vf-logo {
  flex: none;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; letter-spacing: .02em;
  transition: opacity .24s, transform .24s cubic-bezier(.2, .7, .2, 1), border-radius .3s;
}
.vf-marke-text { display: flex; flex-direction: column; line-height: 1.2; }
.vf-marke-text b { font-size: 15px; font-weight: 700; }
.vf-marke-text span { font-size: 12px; color: var(--vf-text2); }
.vf-space {
  height: 40px; display: flex; align-items: center; gap: 10px; padding: 0 12px;
  border-radius: var(--vf-rc); background: var(--vf-s2); border: 1px solid var(--vf-border); transition: border-radius .3s;
}
.vf-space-punkt { width: 10px; height: 10px; border-radius: 50%; background: var(--vf-farbe); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); transition: background .24s; }
.vf-space-name { flex: 1; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.vf-space-pfeil { font-size: 11px; color: var(--vf-text2); }
.vf-nav { display: flex; flex-direction: column; gap: 2px; }
.vf-nav-eintrag {
  height: 34px; display: flex; align-items: center; gap: 10px; padding: 0 10px;
  border-radius: var(--vf-rc); background: transparent; color: var(--vf-text2); font-weight: 500;
  transition: background .24s ease, color .24s ease, border-radius .3s;
}
.vf-nav-eintrag i { width: 15px; height: 15px; border-radius: 4px; background: var(--vf-border2); transition: background .24s ease; }
.vf-nav-eintrag .vf-nav-text { flex: 1; }
.vf-nav-eintrag.vf-aktiv { background: var(--vf-weak); color: var(--vf-text); font-weight: 650; }
.vf-nav-eintrag.vf-aktiv i { background: var(--vf-acc); }
.vf-zaehler {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  background: var(--vf-zbg); color: var(--vf-zfg); transition: background .24s ease 80ms, color .24s ease 80ms;
}

/* Der Inhalt */
.vf-haupt { position: absolute; left: 250px; right: 0; top: 0; bottom: 0; padding: 44px 40px; display: flex; flex-direction: column; gap: 20px; }
.vf-ansicht { display: flex; flex-direction: column; gap: 20px; }
.vf-ansicht[hidden] { display: none; }
.vf-titel { display: flex; flex-direction: column; gap: 4px; }
.vf-titel b { font-size: 26px; font-weight: 700; }
.vf-titel span { font-size: 13.5px; color: var(--vf-text2); }
.vf-karte { width: 760px; border-radius: var(--vf-rk); background: var(--vf-surface); border: 1px solid var(--vf-border); transition: border-radius .3s; }
.vf-zeile { padding: 22px 26px; border-bottom: 1px solid var(--vf-border); display: grid; grid-template-columns: 200px 1fr; gap: 20px; }
.vf-zeile:last-child { border-bottom: 0; }
.vf-zeile-mitte { align-items: center; }
.vf-zeile-kopf { display: flex; flex-direction: column; gap: 3px; }
.vf-zeile-kopf b, .vf-zeile > b { font-weight: 650; }
.vf-zeile-kopf span { font-size: 12.5px; color: var(--vf-text2); }
.vf-farbe { display: flex; align-items: center; gap: 18px; }
.vf-farbfeld {
  width: 34px; height: 34px; border-radius: var(--vf-rc); background: var(--vf-farbe);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); transition: background .24s ease 160ms, border-radius .3s;
}
.vf-mono { font-family: ui-monospace, Menlo, monospace; font-size: 13px; }
.vf-muster {
  margin-left: auto; display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  border-radius: var(--vf-rc); background: var(--vf-s2); transition: border-radius .3s;
}
.vf-speichern {
  height: 30px; display: flex; align-items: center; padding: 0 12px; border-radius: var(--vf-rc);
  background: var(--vf-farbe); color: var(--vf-on); font-size: 13px; font-weight: 650;
  transition: background .24s ease 240ms, color .24s ease 240ms, border-radius .3s;
}
.vf-kennzeichen {
  font-size: 12px; font-weight: 600; border-radius: 999px; padding: 2px 9px;
  background: var(--vf-weak); color: var(--vf-acc); transition: background .24s ease 320ms, color .24s ease 320ms;
}
.vf-chip {
  height: 28px; display: flex; align-items: center; padding: 0 10px; border-radius: var(--vf-rc);
  background: var(--vf-weak); font-size: 13px; font-weight: 600; transition: background .24s ease 400ms, border-radius .3s;
}
.vf-logo-spalte { display: flex; flex-direction: column; gap: 12px; }
.vf-logo-reihe { display: flex; align-items: center; gap: 16px; }
.vf-logo-ablage {
  width: 72px; height: 72px; border-radius: var(--vf-rc); border: 1px dashed var(--vf-border2);
  display: flex; align-items: center; justify-content: center; transition: border-radius .3s;
}
.vf-datei { font-size: 13px; color: var(--vf-text2); }
.vf-gelesen { height: 30px; display: flex; align-items: center; gap: 10px; font-size: 13px; opacity: 0; transition: opacity .2s; }
.vf-gelesen.vf-an { opacity: 1; }
.vf-gelesen > span:first-child { color: var(--vf-text2); }
.vf-gelesen-feld { width: 20px; height: 20px; border-radius: 5px; background: var(--vf-gelesen); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.vf-uebernehmen {
  height: 28px; display: flex; align-items: center; padding: 0 11px; border-radius: var(--vf-rc);
  background: var(--vf-surface); border: 1px solid var(--vf-border2); font-weight: 600;
  transition: transform .12s, background .12s;
}
.vf-uebernehmen.vf-gedrueckt { background: var(--vf-weak); transform: scale(.96); }
.vf-regler { display: flex; align-items: center; gap: 14px; }
.vf-spur { position: relative; flex: 1; height: 4px; border-radius: 2px; background: var(--vf-border2); }
.vf-spur-fuellung {
  position: absolute; left: 0; top: 0; bottom: 0; width: var(--vf-regler); border-radius: 2px; background: var(--vf-farbe);
  transition: width .3s cubic-bezier(.45, 0, .2, 1), background .24s ease 160ms;
}
.vf-knauf {
  position: absolute; top: -8px; left: var(--vf-regler); width: 20px; height: 20px; margin-left: -10px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
  transition: left .3s cubic-bezier(.45, 0, .2, 1);
}
.vf-regler-wert { width: 52px; text-align: right; font-variant-numeric: tabular-nums; }
.vf-auswahl {
  height: 36px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px;
  border-radius: var(--vf-rc); background: var(--vf-s2); border: 1px solid var(--vf-border); transition: border-radius .3s;
}
.vf-auswahl span { color: var(--vf-text2); }

/* Die Rechnungen */
.vf-listenkopf { display: flex; align-items: center; gap: 12px; }
.vf-listenkopf .vf-titel { margin-right: auto; }
.vf-suche {
  height: 36px; width: 240px; border-radius: var(--vf-rc); background: var(--vf-s2); border: 1px solid var(--vf-border);
  display: flex; align-items: center; padding: 0 12px; color: var(--vf-text3);
}
.vf-neu-knopf { height: 36px; display: flex; align-items: center; padding: 0 14px; border-radius: var(--vf-rc); background: var(--vf-farbe); color: var(--vf-on); font-weight: 650; }
.vf-kacheln { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.vf-kachel { padding: 16px 18px; border-radius: var(--vf-rk); background: var(--vf-surface); border: 1px solid var(--vf-border); display: flex; flex-direction: column; gap: 6px; }
.vf-kachel span { font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--vf-text2); }
.vf-kachel b { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.vf-tabelle { border-radius: var(--vf-rk); background: var(--vf-surface); border: 1px solid var(--vf-border); overflow: hidden; }
.vf-tabelle-kopf, .vf-tabelle-zeile { display: grid; grid-template-columns: 150px minmax(0, 1fr) 150px 140px; }
.vf-tabelle-kopf {
  padding: 11px 18px; background: var(--vf-s2); border-bottom: 1px solid var(--vf-border);
  font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--vf-text3);
}
.vf-tabelle-zeile { align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--vf-border); }
.vf-tabelle-zeile.vf-markiert { background: var(--vf-weak); }
.vf-rechts-buendig { text-align: right; }
.vf-betrag { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.vf-pille { font-size: 12px; font-weight: 600; border-radius: 999px; padding: 2px 9px; }
.vf-pille-bezahlt { background: var(--vf-ok-bg); color: var(--vf-ok-fg); }
.vf-pille-offen { background: var(--vf-warn-bg); color: var(--vf-warn-fg); }
.vf-pille-ueberfaellig { background: var(--vf-danger-bg); color: var(--vf-danger-fg); }

/* Die Vorschau der Rechnung */
.vf-dimmer { position: absolute; inset: 0; background: rgba(0, 0, 0, .32); opacity: 0; transition: opacity .32s; pointer-events: none; }
.vf-blatt {
  position: absolute; left: 520px; top: 40px; width: 560px; height: 792px; border-radius: 4px; overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6), 0 0 0 1px rgba(0, 0, 0, .08);
  opacity: 0; transform: translateY(24px) scale(.96); transform-origin: 50% 100%;
  transition: opacity .32s cubic-bezier(.2, .7, .2, 1), transform .32s cubic-bezier(.2, .7, .2, 1);
  background: #fff;
}
.vf-blatt img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.vf-app.vf-vorschau .vf-dimmer { opacity: 1; }
.vf-app.vf-vorschau .vf-blatt { opacity: 1; transform: none; }

/* ── Hochkant, für das Telefon ─────────────────────────────
   Gesetzt von start.js als .hoch am Behälter, sobald der Ring schmaler als
   700 Pixel ist (Tim, 25.10.2026: auf 0,4 verkleinert war nichts zu lesen).
   Dieselbe Folge und dieselben Teile, nur anders gestellt: der Umschalter in
   zwei Reihen über dem Fenster, die Leiste der kleinen App oben mit den
   Symbolen der Module wie die Schiene der App, darunter der Inhalt in seiner
   wirklichen Größe. */
.vorfuehrung.hoch .vf { width: 100%; flex-direction: column; gap: 14px; }
/* Der Umschalter und seine Texte stehen mit eigenem Polster in der Fläche.
   Mit den 6 Pixeln der Fläche allein klebten sie am Rand, die Bezeichnung
   oben an der gerundeten Ecke (Tim, 30.10.2026). Das Fenster darunter bleibt
   bei 6, seine Rundung folgt der Fläche. Die rechte Spalte trägt die
   längeren Namen und bekommt mehr Breite, so passt „Tischlerei Petersen“
   auch bei 375 Pixeln Fensterbreite ungekürzt. */
.vorfuehrung.hoch .vf-links { width: 100%; gap: 10px; padding: 12px 10px 4px; }
.vorfuehrung.hoch .vf-umschalter { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 2px; }
.vorfuehrung.hoch .vf .vf-betrieb { height: 36px; gap: 7px; padding: 0 7px; }
.vorfuehrung.hoch .vf-betrieb-name { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; }
/* Gewählt zeigt die Fläche, für den Haken reicht der Platz nicht. */
.vorfuehrung.hoch .vf-betrieb-haken { display: none; }
.vorfuehrung.hoch .vf-hinweis { font-size: 12px; }
.vorfuehrung.hoch .vf-rechts { width: 100%; }
.vorfuehrung.hoch .vf-rahmen { padding: 5px; border-radius: 15px; }
.vorfuehrung.hoch .vf-fenster { width: 100%; height: 520px; border-radius: 10px; }
.vorfuehrung.hoch .vf-app {
  zoom: 1; position: relative; width: 100%; height: 100%; transform: none;
  display: flex; flex-direction: column; font-size: 13px;
}

/* Die Leiste als Kopf */
.vorfuehrung.hoch .vf-leiste {
  position: relative; width: auto; flex: none; border-right: 0; border-bottom: 1px solid var(--vf-border);
  padding: 10px 12px 9px;
}
.vorfuehrung.hoch .vf-ampel { position: static; gap: 6px; margin-bottom: 9px; }
.vorfuehrung.hoch .vf-ampel i { width: 9px; height: 9px; }
.vorfuehrung.hoch .vf-leiste-inhalt {
  position: static; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 9px 10px;
}
.vorfuehrung.hoch .vf-marke { gap: 8px; }
.vorfuehrung.hoch .vf-marke-kachel { width: 30px; height: 30px; }
.vorfuehrung.hoch .vf-marke-kachel .vf-logo { transform: scale(.79); }
.vorfuehrung.hoch .vf-marke-text b { font-size: 13px; }
.vorfuehrung.hoch .vf-marke-text span { font-size: 10.5px; }
.vorfuehrung.hoch .vf-space { height: 32px; gap: 7px; padding: 0 9px; min-width: 0; }
.vorfuehrung.hoch .vf-space-name { font-size: 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.vorfuehrung.hoch .vf-nav { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; gap: 2px; }
.vorfuehrung.hoch .vf-nav-eintrag { position: relative; flex: 1; height: 28px; padding: 0; justify-content: center; }
.vorfuehrung.hoch .vf-nav-eintrag .vf-nav-text { display: none; }
.vorfuehrung.hoch .vf-nav-eintrag i { width: 13px; height: 13px; }
.vorfuehrung.hoch .vf-zaehler {
  position: absolute; top: 4px; right: calc(50% - 13px); min-width: 7px; width: 7px; height: 7px; padding: 0; font-size: 0;
}

/* Der Inhalt in seiner wirklichen Größe */
.vorfuehrung.hoch .vf-haupt {
  position: relative; left: auto; top: auto; bottom: auto; flex: 1; min-height: 0; overflow: hidden;
  padding: 14px 12px; gap: 12px;
}
.vorfuehrung.hoch .vf-ansicht { gap: 12px; }
.vorfuehrung.hoch .vf-titel b { font-size: 18px; }
.vorfuehrung.hoch .vf-titel span { font-size: 11.5px; }
.vorfuehrung.hoch .vf-karte { width: auto; }
.vorfuehrung.hoch .vf-zeile { grid-template-columns: 76px minmax(0, 1fr); gap: 8px 10px; padding: 11px 12px; }
.vorfuehrung.hoch .vf-zeile-kopf span { display: none; }
/* Die Markenfarbe trägt ihre Beispiele in einer eigenen Zeile über die ganze
   Breite, neben der Beschriftung hätten sie nicht Platz. */
.vorfuehrung.hoch .vf-zeile:first-child { grid-template-columns: minmax(0, 1fr); }
.vorfuehrung.hoch .vf-farbe { flex-wrap: wrap; gap: 8px 10px; }
.vorfuehrung.hoch .vf-farbfeld { width: 26px; height: 26px; }
.vorfuehrung.hoch .vf-mono { font-size: 12px; }
.vorfuehrung.hoch .vf-muster { margin-left: 0; gap: 6px; padding: 6px 8px; flex-basis: 100%; justify-content: space-between; }
.vorfuehrung.hoch .vf-speichern { height: 26px; padding: 0 9px; font-size: 12px; }
.vorfuehrung.hoch .vf-kennzeichen { font-size: 11px; padding: 2px 7px; }
.vorfuehrung.hoch .vf-chip { height: 24px; padding: 0 8px; font-size: 12px; }
.vorfuehrung.hoch .vf-logo-spalte { gap: 8px; }
.vorfuehrung.hoch .vf-logo-reihe { gap: 10px; }
.vorfuehrung.hoch .vf-logo-ablage { width: 56px; height: 56px; flex: none; }
.vorfuehrung.hoch .vf-logo-ablage .vf-logo { transform: scale(.78); }
.vorfuehrung.hoch .vf-datei { font-size: 11.5px; line-height: 1.35; min-width: 0; overflow-wrap: anywhere; }
.vorfuehrung.hoch .vf-gelesen { height: auto; min-height: 24px; flex-wrap: wrap; gap: 6px 8px; font-size: 11.5px; }
.vorfuehrung.hoch .vf-gelesen-feld { width: 16px; height: 16px; }
.vorfuehrung.hoch .vf-uebernehmen { height: 24px; padding: 0 8px; }
.vorfuehrung.hoch .vf-regler { gap: 10px; }
.vorfuehrung.hoch .vf-regler-wert { width: 40px; font-size: 12px; }
.vorfuehrung.hoch .vf-auswahl { height: 30px; padding: 0 10px; }

/* Die Rechnungen: Kunde und Betrag, darunter Nummer und Stand */
.vorfuehrung.hoch .vf-suche { display: none; }
.vorfuehrung.hoch .vf-neu-knopf { height: 30px; padding: 0 10px; font-size: 12px; white-space: nowrap; flex: none; }
.vorfuehrung.hoch .vf-kacheln { gap: 6px; }
.vorfuehrung.hoch .vf-kachel { padding: 8px; gap: 3px; }
.vorfuehrung.hoch .vf-kachel span { font-size: 8.5px; letter-spacing: .04em; }
.vorfuehrung.hoch .vf-kachel b { font-size: 12.5px; }
.vorfuehrung.hoch .vf-tabelle-kopf { display: none; }
.vorfuehrung.hoch .vf-tabelle-zeile {
  grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "kunde betrag" "nummer stand";
  gap: 3px 10px; padding: 8px 12px;
}
.vorfuehrung.hoch .vf-tabelle-zeile > :nth-child(1) { grid-area: nummer; font-size: 11px; color: var(--vf-text3); }
.vorfuehrung.hoch .vf-tabelle-zeile > :nth-child(2) { grid-area: kunde; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.vorfuehrung.hoch .vf-tabelle-zeile > :nth-child(3) { grid-area: stand; justify-self: end; }
.vorfuehrung.hoch .vf-tabelle-zeile > :nth-child(4) { grid-area: betrag; }
.vorfuehrung.hoch .vf-pille { font-size: 10.5px; padding: 1px 7px; }

/* Die Vorschau der Rechnung, mittig über dem Fenster */
.vorfuehrung.hoch .vf-blatt { left: 50%; top: 18px; width: 72%; height: auto; aspect-ratio: 560 / 792; margin-left: -36%; }
.vorfuehrung.hoch .vf-unterzeile { font-size: 12.5px; line-height: 1.45; min-height: 36px; }

@media (prefers-reduced-motion: reduce) {
  .vf *, .vf *::before, .vf *::after { transition: none !important; }
}