/* module.css */
/* module.css – Modulseiten und Landeseite AW-08 (Palettenkonto Web, Web-Bestätigungen, Landeseite für Tauschpartner),
   Modul-Blöcke nach den Kacheln aus Muster A3. Farben nur aus werte.css, Abfragen nur über Namen. */

/* Überschriften nie abschneiden: Größe an die Spaltenbreite gebunden (Container-Einheit cqi, wie AW-05 und AW-07).
   N cqi = 100 / (breitestes Wort in em × 1,06): „Web-Bestätigungen“ etwa 9,9 em (h1), „Tauschpartnern“ 7,5 em (h2),
   „Voraussetzungen“ 8,3 em (h2 im Kasten). overflow-wrap bricht nur, wenn ein Wort trotzdem nicht passt. */
.mo-kopf > .wrap, .mo-kasten, .mo-modul, .mo-lesebreite, .abschnitt-kopf, .mo-funktion { container-type: inline-size; }
.mo-kopf h1, .mo-kasten h2, .mo-modul h3, .mo-lesebreite h2, .abschnitt-kopf h2, .mo-funktion h3 { overflow-wrap: break-word; -webkit-hyphens: manual; hyphens: manual; }

/* Kopf der Seite */
.mo-kopf { padding-bottom: 56px; }
/* Kopf mit Bild rechts (B110): ruhender Nachbau aus der Vorführung; unter der Computer-Breite steht das Bild unter dem Text */
.mo-kopf-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; }
.mo-kopf-text { min-width: 0; container-type: inline-size; }
.mo-kopf-bild { min-width: 0; }
.mo-kopf-bild .vf-bild { border: 1px solid var(--flaeche-rand); border-radius: var(--r-xl); }
@media (min-width: 1024px) { .mo-kopf-raster { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; } }
.mo-kopf-zeile { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.mo-kopf h1 { font-size: min(clamp(2.1rem, 1.5rem + 2.4vw, 3.25rem), 9.5cqi); line-height: 1.1; letter-spacing: -.035em; font-weight: 800; margin-top: 18px; max-width: 24ch; }
.mo-unter { font-size: 1.1875rem; line-height: 1.5; color: var(--text); font-weight: 600; margin-top: 14px; max-width: 52ch; }
.mo-bedingung { display: flex; align-items: flex-start; gap: .5rem; margin-top: 14px; font-size: .9375rem; line-height: 1.5; color: var(--blau-800); }
.mo-bedingung .s { width: 1.1rem; height: 1.1rem; flex: none; margin-top: .15em; color: var(--blau); }
.mo-einleitung { font-size: 1.125rem; line-height: 1.6; color: var(--text-2); margin-top: 22px; max-width: 62ch; }
@media (min-width: 720px) { .mo-einleitung { font-size: 1.1875rem; } }
.mo-einleitung p + p { margin-top: .6em; }

/* Wege (F10) */
.mo-wege { margin-top: 32px; }
.mo-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; }
.mo-hinweis { margin-top: 14px; font-size: .875rem; line-height: 1.5; color: var(--text-2); max-width: 62ch; }

/* Symbol, Kennzeichnung „Zusatzmodul“ (Farben --indigo-*, doku/schnittstellen.md 13) */
.mo-symbol { width: 52px; height: 52px; border-radius: 14px; background: var(--blau-50); color: var(--blau); display: grid; place-items: center; flex: none; }
.mo-symbol .s { width: 26px; height: 26px; }
.mo-symbol--klein { width: 44px; height: 44px; border-radius: 12px; }
.mo-symbol--klein .s { width: 22px; height: 22px; }
.mo-symbol--wb { background: var(--indigo-50); color: var(--indigo); }
.mo-marke { display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--indigo-800); background: var(--indigo-50); border: 1px solid var(--indigo-200); border-radius: 999px; padding: .15rem .6rem; }

/* Fließtext, Listen, Links */
.mo-lead { font-size: 1.125rem; line-height: 1.6; color: var(--text-2); margin-top: 16px; }
.mo-text { font-size: 1.0625rem; line-height: 1.65; color: var(--text-2); margin-top: 14px; max-width: 62ch; }
.mo-text p + p { margin-top: .7em; }
.mo-text ul + p { margin-top: 18px; }
.mo-text ul, .mo-punkte ul { list-style: none; display: flex; flex-direction: column; gap: 11px; margin-top: 18px; }
.mo-punkte { margin-top: 18px; max-width: 64ch; }
.mo-punkte ul { margin-top: 0; }
.mo-text li, .mo-punkte li { position: relative; padding-left: 28px; font-size: .98rem; line-height: 1.55; color: var(--text); }
.mo-text li::before, .mo-punkte li::before { content: ""; position: absolute; left: 2px; top: .68em; width: 14px; height: 3px; border-radius: 2px; background: var(--blau); }
.mo-link { margin-top: 22px; }
.mo-klein { margin-top: 14px; font-size: .9375rem; line-height: 1.5; color: var(--text-2); }

/* Funktionsliste Palettenkonto Web */
.mo-funktionen { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
@media (min-width: 720px) { .mo-funktionen { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 1024px) { .mo-funktionen { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
.mo-funktion { background: var(--karte); border: 1px solid var(--rahmen); border-radius: var(--r-l); padding: 24px 22px 26px; }
.mo-funktion h3 { font-size: min(1.25rem, 8cqi); line-height: 1.25; letter-spacing: -.015em; font-weight: 700; margin-top: 16px; }
.mo-funktion .mo-text { font-size: 1rem; margin-top: 8px; }

/* Kasten: Abschnitt mit Symbol, Überschrift und Text in Lesebreite */
.mo-kasten { max-width: 760px; }
.mo-kasten h2 { font-size: min(clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem), 9cqi); }
.mo-kasten > .mo-symbol + h2 { margin-top: 20px; }
.abschnitt-kopf h2 { font-size: min(clamp(2rem, 1.5rem + 1.8vw, 2.9rem), 9cqi); }
.mo-spalten { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; }
@media (min-width: 1024px) { .mo-spalten { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; } }

/* Modul-Blöcke der Landeseite: getrennte Karten, jede mit eigener Bedingung */
.mo-module { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
@media (min-width: 1024px) { .mo-module { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.mo-modul { background: var(--karte); border: 1px solid var(--rahmen); border-radius: var(--r-xl); box-shadow: var(--schatten-1); padding: 26px 22px 28px; display: flex; flex-direction: column; }
@media (min-width: 720px) { .mo-modul { padding: 32px 34px 34px; } }
.mo-modul-kopf { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.mo-modul-name { font-size: 1rem; font-weight: 700; color: var(--text); }
.mo-modul h3 { font-size: min(clamp(1.5rem, 1.2rem + 1vw, 2rem), 8cqi); line-height: 1.15; letter-spacing: -.025em; font-weight: 750; margin-top: 20px; }
.mo-modul-unter { font-size: 1.0625rem; line-height: 1.55; color: var(--text-2); margin-top: 12px; }
.mo-modul-bedingung { margin-top: 14px; font-size: .9375rem; line-height: 1.5; font-weight: 600; color: var(--blau-800); }
.mo-modul .mo-punkte + .mo-modul-bedingung { margin-top: 22px; }
.mo-text--kachel { max-width: none; }
.mo-text--kachel p:last-child { font-size: .8125rem; }

/* Modulseite Web-Bestätigungen: Lieferung in Lesebreite */
.mo-lesebreite { max-width: 820px; }
.mo-lesebreite h2 { font-size: min(clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem), 9cqi); }
.mo-zeilen { display: flex; flex-direction: column; gap: 18px; }
.mo-zeile { font-size: 1rem; line-height: 1.65; color: var(--text-2); }
.mo-zeile strong { color: var(--text); font-weight: 700; }
.mo-punkte + .mo-zeile { margin-top: 18px; } /* Weg zum Connector unter „Was Sie brauchen“ (B115) */

@media print {
  .mo-symbol { display: none; }
  .mo-modul, .mo-funktion { box-shadow: none; break-inside: avoid; }
  .mo-module, .mo-funktionen, .mo-spalten { grid-template-columns: minmax(0, 1fr); }
  /* Listenstriche und Zählmarken ohne Hintergrundgrafik (Druck ohne Hintergründe, wie AW-05 und AW-07). */
  .mo-text li::before, .mo-punkte li::before { background: none; height: 0; border-top: 3px solid var(--blau); border-radius: 0; }
}
/* vorfuehrung.css */
/* vorfuehrung.css – Scroll-Vorführung „So läuft es“ (Hülle AW-01, Inhalt AW-06; Auftrag AW-06 4.2–4.11).
   Grundzustand: Karten untereinander (Handy, Tablet) bzw. ruhige Fassung (ohne JavaScript, reduzierte Bewegung).
   Computer-Fassung nur mit .js unter der Umschaltbreite „vorfuehrung“: feste Bühne neben den Schritttexten (B12 (2), (3)).
   Bewegt werden nur transform, opacity und clip-path (3.3); Stilwerte zur Laufzeit setzt vorfuehrung.js über CSSOM.
   Farben außerhalb der Nachbauten nur aus werte.css; Farben der Nachbauten nur im Block --vf-nb-* gleich unten (F5).
   Source Sans 3 (4.9, B35 (5)) nur für den Nachbau der Seite von Confirm; Datei und Lizenz unverändert in src/schrift/.
   Bei Schalter „aus“ fehlt dieser Nachbau, dann lädt der Browser die Schrift nicht. */

@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url("/schrift/SourceSans3-latin.woff2") format("woff2");
}

/* ===== Farben der Nachbauten (F5, 5.4) – einziger Block mit festen Farbwerten; die Farbsuche nimmt ihn aus ===== */
.vorfuehrung [data-nachbau], .mo-kopf-bild [data-nachbau], .vf-zeichen {
  /* Palettenkonto Web: Steckbrief Web-Modul 6.2; Quellen/Web-Modul_Auszug/site.css:5-18, :194-209, :404-409;
     PalettenkontoWeb_texte.txt (Kopfleiste :1244-1270, Statusleiste :1466-1488, Vollbild-Unterschrift :509-528) */
  --vf-nb-web-blau: #2563EB;          /* App-Blau (site.css:6) */
  --vf-nb-web-blau-h: #1D4ED8;        /* App-Blau dunkler (site.css:7); hier auch Fläche der Kopf-Knöpfe, siehe Bericht (AA) */
  --vf-nb-web-grund: #F8FAFC;         /* Seitenhintergrund (site.css:8) */
  --vf-nb-web-text: #0F172A;          /* Text (site.css:10) */
  --vf-nb-web-leise: #64748B;         /* Text gedämpft (site.css:11); auch Platzhaltertext, siehe Bericht (AA) */
  --vf-nb-web-rand: #E2E8F0;          /* Linien, Rahmen (site.css:12) */
  --vf-nb-web-avatar: #EFF6FF;        /* Partner-Kürzel (site.css:194-199) */
  --vf-nb-web-gruen-grund: #F0FDF4;   /* Ladungsträger-Kürzel, Erfolg (site.css:404-409) */
  --vf-nb-web-gruen: #15803D;         /* Erfolgs-Haken; auch Kürzel-Schrift statt #16A34A, siehe Bericht (AA) */
  --vf-nb-web-ok: #16A34A;            /* Feld „übernehmen“ der Vollbild-Unterschrift (Emoji im Original) */
  --vf-nb-web-rot: #DC2626;           /* Entfernen ✕ (site.css:283-287: #EF4444, aktiv #DC2626), siehe Bericht (AA) */
  --vf-nb-web-gelb: #D97706;          /* Radierer der Vollbild-Unterschrift (Emoji im Original) */
  --vf-nb-web-status: #1E293B;        /* Statusleiste unten */
  --vf-nb-web-status-text: #94A3B8;
  --vf-nb-web-voll: #1A1A1A;          /* Fläche der Vollbild-Unterschrift */
  --vf-nb-web-leiste: #1E3A5F;        /* Knopfleiste der Vollbild-Unterschrift */
  --vf-nb-web-strich: #1E293B;        /* Strich der Unterschrift (Muster A3) */
  /* Gerät (neutral, kein Markengerät; Muster A3) */
  --vf-nb-geraet-1: #3A4352;
  --vf-nb-geraet-2: #151B26;
  --vf-nb-geraet-3: #232B38;
  --vf-nb-geraet-kante: #4B5563;
  --vf-nb-geraet-innen: #0B0F17;
  --vf-nb-geraet-taste: #2A3240;
  --vf-nb-geraet-kamera: #0B1220;
  --vf-nb-schatten-handy: 0 3.5em 6em -2.4em rgba(15, 23, 42, .42), 0 1.4em 2.6em -1.4em rgba(15, 23, 42, .35);
  --vf-nb-schatten-fenster: 0 2em 4em -1.6em rgba(15, 23, 42, .38), 0 .6em 1.4em -.6em rgba(15, 23, 42, .2);
  /* Desktop-App: abgelesen aus den Bildern 1a, 1b und 2a (src/bilder/programm/) */
  --vf-nb-win-titel: #FFFFFF;
  --vf-nb-win-text: #000000;
  --vf-nb-win-grund: #F0F0F0;
  --vf-nb-win-rahmen: #8C8C8C;
  --vf-nb-win-linie: #D5D5D5;
  --vf-nb-win-gruppe: #DCDCDC;
  --vf-nb-win-leer: #ABABAB;          /* leere Fläche unter den Zeilen eines Rasters */
  --vf-nb-win-wahl: #0078D7;          /* gewählte Zeilen */
  --vf-nb-win-gelb: #FFFF00;          /* eigener Tauschpartner, Zeilen mit Wiedervorlage */
  --vf-nb-win-wv: #D9A520;            /* Zeichen der Wiedervorlage */
  --vf-nb-win-knopf: #E1E1E1;
  --vf-nb-win-knopf-rand: #ADADAD;
  --vf-nb-win-sym-grau: #5B6B7F;
  --vf-nb-win-sym-blau: #1E88E5;
  --vf-nb-win-sym-braun: #A0612A;
  --vf-nb-win-sym-rot: #D32F2F;
  --vf-nb-win-sym-gelb: #E6B800;
  --vf-nb-logo: #3C96D2;              /* Zeichen im Logo (Fenstersymbol) */
  --vf-nb-weiss: #FFFFFF;
  /* Desktop-App 3.4.0, Teil 2: Beschreibung 4a bis 4c (K77) und Windows-Standard */
  --vf-nb-win-gruen: #98FB98;         /* bestätigte Buchung, Windows „PaleGreen“ (4c) */
  --vf-nb-win-gruppe-text: #1E3287;   /* Gruppenkopf einer Windows-Liste */
  --vf-nb-win-mi-wahl: #CCE8FF;       /* gedrückter Menüpunkt (Windows) */
  --vf-nb-win-mi-rand: #99D1FF;
  --vf-nb-win-kn-wahl: #CCE4F7;       /* gedrückter Knopf (Windows) */
  --vf-nb-win-kn-wahl-rand: #005499;
  --vf-nb-win-klein: #595959;         /* „Import 1.1.0“ */
  /* Seite des Tauschpartners und Mail bei Confirm: abgelesen aus den Bildern 3a bis 3d (Quellen/Bilder_Vorfuehrung/) */
  --vf-nb-cf-grund: #F2F2F2;
  --vf-nb-cf-text: #414448;
  --vf-nb-cf-leise: #6B6F76;
  --vf-nb-cf-linie: #E4E7EB;
  --vf-nb-cf-akzent: #5594CD;         /* Logo, Linie am Saldo, Rand oben an Mail und Dank */
  --vf-nb-cf-blau: #2369B1;           /* Knöpfe und Links */
  --vf-nb-cf-blau-h: #1B5592;         /* gedrückter Knopf (Bühne) */
  --vf-nb-cf-hinweis: #F0F6FC;        /* Hinweis vor dem Absenden; gewählte Antwort (Bühne) */
  --vf-nb-cf-wahl-rand: #858990;      /* Rahmen von „Bestätigen“ und „Korrigieren“ */
  --vf-nb-ml-text: #2B2D31;           /* Text der Mail */
  --vf-nb-br-leiste: #E7EAEE;         /* Browserleiste (Bühne, ohne Adresse) */
  --vf-nb-br-linie: #D3D8DE;
  --vf-nb-br-punkt: #C1C7CF;
  --vf-nb-andeutung: #CBD2DA;         /* graue Linie statt nicht gezeigtem Text */
}
/* ===== Ende des Farbblocks ===== */

/* ---------- Kopf des Abschnitts ---------- */
.vf-zeichen { position: absolute; width: 0; height: 0; overflow: hidden; }
.vf-kopf { max-width: 720px; margin-bottom: 40px; }
@media (min-width: 720px) { .vf-kopf { margin-bottom: 56px; } }
.vf-einleitung p { font-size: 1.0625rem; line-height: 1.6; color: var(--text-2); margin-top: 16px; }
.vf-einleitung p + p { margin-top: 10px; }
@media (min-width: 720px) { .vf-einleitung p { font-size: 1.1875rem; } }

/* ---------- Schritte: Karten und ruhige Fassung (Grundzustand) ---------- */
.vf-schritte { list-style: none; display: flex; flex-direction: column; gap: 20px; }
.vf-schritt { display: grid; grid-template-columns: minmax(0, 1fr); background: var(--karte); border: 1px solid var(--rahmen); border-radius: 24px; box-shadow: var(--schatten-1); overflow: hidden; scroll-margin-top: calc(var(--kopf-h) + 24px); }
.vf-text { padding: 24px 22px 28px; min-width: 0; }
.vf-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.vf-nr { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .95rem; color: var(--weiss); background: var(--blau); transition: background-color .3s, color .3s, box-shadow .3s; }
.vf-marke { display: inline-flex; align-items: center; gap: .6rem; max-width: 100%; padding: .3rem .9rem .3rem .3rem; border: 1px solid var(--rahmen); border-radius: 22px; background: var(--karte); font-size: .875rem; line-height: 1.4; color: var(--text-2); }
.vf-marke strong { color: var(--text); font-weight: 650; }
.vf-marke-symbol { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--blau-50); color: var(--blau); }
.vf-marke-symbol .s { width: 16px; height: 16px; }
.vf-marke--wb .vf-marke-symbol { background: var(--indigo-50); color: var(--indigo); }
.vf-schritt h3 { font-size: min(clamp(1.5rem, 1.2rem + 1vw, 2rem), 8cqi); line-height: 1.15; letter-spacing: -.025em; font-weight: 750; margin-top: 18px; }
.vf-absatz p { font-size: 1.0625rem; line-height: 1.65; color: var(--text-2); margin-top: 14px; max-width: 46ch; }
.vf-text > .platzhalter { display: inline-block; margin-top: 14px; }
.vf-bild { order: -1; margin: 0; container: vf-bild / inline-size; display: flex; justify-content: center; align-items: center; min-width: 0; overflow: hidden; padding: 28px 16px; background-color: var(--flaeche); background-image: var(--punkte); background-size: 20px 20px; border-bottom: 1px solid var(--flaeche-rand); }
.vf-geraet { position: relative; max-width: 100%; }
@media (min-width: 720px) {
  .vf-schritt { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .vf-text { padding: 32px 28px; align-self: center; }
  .vf-bild { order: 0; border-bottom: 0; border-left: 1px solid var(--flaeche-rand); }
}
@media (min-width: 1024px) {
  .vf-schritte { gap: 28px; }
  .vf-schritt { border-radius: var(--r-xl); }
  .vf-schritt:nth-child(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .vf-schritt:nth-child(even) .vf-bild { order: -1; border-left: 0; border-right: 1px solid var(--flaeche-rand); }
  .vf-text { padding: 40px 48px; }
  .vf-bild { padding: 40px 24px; }
}

/* Größe der ruhenden Nachbauten (B13 (3): auf schmalen Karten ein lesbarer Ausschnitt) */
.vf-bild--handy .vf-ph { font-size: min(10px, calc(100cqw / 34)); }
.vf-bild--fenster .vf-geraet { width: 100%; }
.vf-bild--fenster .vf-win { width: 100%; font-size: min(10px, calc((100cqw - 48px) / 62)); -webkit-mask-image: linear-gradient(180deg, black calc(100% - 5em), transparent); mask-image: linear-gradient(180deg, black calc(100% - 5em), transparent); }
@container vf-bild (max-width: 479px) {
  .vf-bild--handy .vf-geraet { width: 100%; max-width: 340px; margin-bottom: -28px; }
  .vf-bild--handy .vf-ph { width: 100%; height: auto; font-size: min(11.3px, calc(100cqw / 31.5)); }
  .vf-bild--handy .vf-ph-rahmen { position: relative; inset: auto; border-radius: 2.6em 2.6em 0 0; padding: .55em .55em 0; }
  .vf-bild--handy .vf-ph-rahmen::before, .vf-bild--handy .vf-ph-rahmen::after, .vf-bild--handy .vf-ph-fuss { display: none; }
  .vf-bild--handy .vf-ph-schirm { height: auto; border-radius: 2.1em 2.1em 0 0; }
  .vf-bild--handy .vf-ph-inhalt { flex: none; height: 42em; }
}
.vf-bild--seite .vf-geraet { width: 100%; display: flex; justify-content: center; }
.vf-bild--seite .vf-cf { width: 100%; max-height: 50em; font-size: min(11px, calc((100cqw - 48px) / 52)); border: 1px solid var(--vf-nb-cf-linie); border-radius: .6em; box-shadow: var(--vf-nb-schatten-fenster); -webkit-mask-image: linear-gradient(180deg, black calc(100% - 6em), transparent); mask-image: linear-gradient(180deg, black calc(100% - 6em), transparent); }
.vf-bild--import .vf-geraet { width: 100%; padding-bottom: 1em; font-size: min(10px, calc((100cqw - 48px) / 62)); }
.vf-bild--import .vf-win { width: 100%; font-size: 1em; }
.vf-bild--import .vf-vs { position: absolute; right: 1.6em; top: 15em; font-size: 1em; }
@container vf-bild (max-width: 559px) {
  .vf-bild--fenster .vf-win { font-size: min(10px, calc((100cqw - 32px) / 37)); }
  .vf-bild--import .vf-geraet { font-size: min(10px, calc((100cqw - 32px) / 37)); padding-bottom: 0; }
  .vf-bild--fenster .vf-win-links, .vf-bild--fenster .vf-win-filter, .vf-bild--fenster .vf-win-mi:nth-child(-n+4),
  .vf-bild--import .vf-win-links, .vf-bild--import .vf-win-filter, .vf-bild--import .vf-win-mi:nth-child(-n+5) { display: none; }
  .vf-bild--fenster .vf-win-koerper, .vf-bild--import .vf-win-koerper { grid-template-columns: minmax(0, 1fr); }
  .vf-bild--fenster .vf-win-raster--b .vf-win-rk, .vf-bild--fenster .vf-win-raster--b .vf-win-rz,
  .vf-bild--import .vf-win-raster--b .vf-win-rk, .vf-bild--import .vf-win-raster--b .vf-win-rz { grid-template-columns: 4.4em 11em 4.6em 4.6em minmax(0, 1fr) 7.6em; }
  .vf-bild--fenster .vf-win-raster--b i:first-child, .vf-bild--fenster .vf-win-raster--b i:nth-child(8), .vf-bild--fenster .vf-win-raster--b i:nth-child(9),
  .vf-bild--import .vf-win-raster--b i:first-child, .vf-bild--import .vf-win-raster--b i:nth-child(8), .vf-bild--import .vf-win-raster--b i:nth-child(9) { display: none; }
  .vf-bild--import .vf-win { -webkit-mask-image: linear-gradient(180deg, black 60%, transparent); mask-image: linear-gradient(180deg, black 60%, transparent); }
  .vf-bild--import .vf-win-raster--b .vf-win-rz:nth-child(n+5), .vf-bild--import .vf-win-status { display: none; }
  .vf-bild--import .vf-vs { position: relative; right: auto; top: auto; width: calc(100% - 1.6em); margin: -9em 0 0 auto; }
  .vf-bild--import .vf-vs-zeile { grid-template-columns: 13.5em 7.5em minmax(0, 1fr); }
  .vf-bild--import .vf-vs-zeile i:nth-child(3), .vf-bild--import .vf-vs-zeile i:nth-child(4) { display: none; }
  .vf-bild--seite .vf-cf { max-height: 44em; font-size: calc((100cqw - 32px) / 24.4); }
  .vf-bild--seite .vf-cf-dienst { display: none; }
  .vf-bild--seite .vf-cf-leiste { padding: 0 .9em; }
  .vf-bild--seite .vf-cf-huelle { padding: 1.3em .9em 2em; }
  .vf-bild--seite .vf-cf-firma { font-size: 1.5em; }
  .vf-bild--seite .vf-cf-kennwerte { flex-wrap: wrap; gap: .9em 2.2em; }
  .vf-bild--seite .vf-cf-kennwerte > span:nth-child(3) { flex-basis: 100%; }
  .vf-bild--seite .vf-cf-wahl { grid-template-columns: minmax(0, 1fr); }
  .vf-bild--seite .vf-cf-karte { padding: 1.1em 1em 1.2em; }
}

/* ---------- Nachbau: Handy mit Palettenkonto Web (Systemschrift, B35 (5)) ---------- */
.vf-ph { width: 30em; height: 60em; position: relative; font-size: 10px; line-height: 1.35; color: var(--vf-nb-web-text); text-align: left; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; letter-spacing: 0; }
.vf-ph svg { width: 1.2em; height: 1.2em; flex: none; }
.vf-ph-rahmen { position: absolute; inset: 0; border-radius: 4.5em; padding: .75em; background: linear-gradient(150deg, var(--vf-nb-geraet-1), var(--vf-nb-geraet-2) 55%, var(--vf-nb-geraet-3)); box-shadow: inset 0 0 0 .12em var(--vf-nb-geraet-kante), inset 0 0 0 .35em var(--vf-nb-geraet-innen), var(--vf-nb-schatten-handy); }
.vf-ph-rahmen::before { content: ""; position: absolute; right: -.28em; top: 12em; width: .3em; height: 6em; border-radius: 0 .3em .3em 0; background: var(--vf-nb-geraet-taste); }
.vf-ph-rahmen::after { content: ""; position: absolute; left: -.28em; top: 10em; width: .3em; height: 3.6em; border-radius: .3em 0 0 .3em; background: var(--vf-nb-geraet-taste); }
.vf-ph-schirm { position: relative; width: 100%; height: 100%; border-radius: 3.8em; overflow: hidden; background: var(--vf-nb-web-grund); display: flex; flex-direction: column; isolation: isolate; }
.vf-ph-status { height: 2.6em; flex: none; position: relative; display: flex; align-items: center; justify-content: space-between; padding: .25em 2.4em 0 2.6em; background: var(--vf-nb-web-blau); color: var(--vf-nb-weiss); }
.vf-ph-status b { font-size: 1.1em; font-weight: 600; }
.vf-ph-kamera { position: absolute; left: 50%; top: .75em; width: 1.1em; height: 1.1em; margin-left: -.55em; border-radius: 50%; background: var(--vf-nb-geraet-kamera); }
.vf-ph-sys { display: flex; gap: .35em; align-items: center; }
.vf-ph .vf-ph-sys svg { width: 1.45em; height: 1em; }
.vf-ph .vf-ph-sys .vf-ph-akku { width: 2.15em; }
.vf-ph-kopf { height: 5.8em; flex: none; position: relative; z-index: 3; display: flex; align-items: center; gap: .6em; padding: 0 1.1em 0 1.2em; background: var(--vf-nb-web-blau); color: var(--vf-nb-weiss); }
.vf-ph .vf-ph-kopf .vf-ph-logo { width: 2.7em; height: 3.15em; --logo-zeichen-farbe: var(--vf-nb-weiss); }
.vf-ph-tp { display: flex; align-items: center; gap: .3em; padding: .35em .85em .35em .6em; border-radius: 1.45em; background: var(--vf-nb-web-blau-h); font-size: 1.17em; font-weight: 500; }
.vf-ph-luft { flex: 1; }
.vf-ph .vf-ph-nutzer svg { width: 1.5em; height: 1.5em; }
.vf-ph-ab { font-size: 1.02em; padding: .3em .6em; border-radius: .7em; background: var(--vf-nb-web-blau-h); white-space: nowrap; }
.vf-ph-menue { width: 3em; height: 3em; border-radius: .75em; background: var(--vf-nb-web-blau-h); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3em; flex: none; }
.vf-ph-menue i { display: block; width: 1.5em; height: .17em; border-radius: .1em; background: var(--vf-nb-weiss); }
.vf-ph-inhalt { flex: 1; min-height: 0; position: relative; overflow: hidden; }
.vf-ph-lauf { padding: 1.3em 1.3em 2em; display: flex; flex-direction: column; gap: 1em; }
.vf-ph-karte { display: block; background: var(--vf-nb-weiss); border: 1px solid var(--vf-nb-web-rand); border-radius: 1.17em; padding: 1.2em 1.3em; }
.vf-ph-titel { display: block; font-size: .95em; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--vf-nb-web-leise); margin-bottom: .55em; }
.vf-ph-feld { display: block; border: .125em solid var(--vf-nb-web-rand); border-radius: .83em; padding: .5em .7em; font-size: 1.22em; color: var(--vf-nb-web-text); background: var(--vf-nb-weiss); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vf-ph-feld--hoch { min-height: 3.4em; }
.vf-ph-leer { color: var(--vf-nb-web-leise); }
.vf-ph-knopf { display: inline-flex; align-items: center; justify-content: center; gap: .35em; flex: none; border: .1em solid var(--vf-nb-web-blau); border-radius: .7em; padding: .45em .9em; color: var(--vf-nb-web-blau); background: var(--vf-nb-weiss); font-size: 1.2em; font-weight: 600; white-space: nowrap; transition: background-color .12s, color .12s; }
.vf-ph-knopf--klein { font-size: 1.05em; padding: .32em .7em; }
.vf-ph-knopf--gross { display: flex; width: 100%; padding: .9em; font-size: 1.35em; }
.vf-ph-knopf.ist-gedrueckt { background: var(--vf-nb-web-blau); color: var(--vf-nb-weiss); }
.vf-ph-reihe { display: flex; align-items: center; flex-wrap: wrap; gap: .6em; margin-top: .6em; }
.vf-ph-tpk { display: flex; align-items: flex-start; gap: .9em; }
.vf-ph-av { width: 2.5em; height: 2.5em; border-radius: .62em; display: grid; place-items: center; flex: none; background: var(--vf-nb-web-avatar); color: var(--vf-nb-web-blau); font-size: 1.33em; font-weight: 700; }
.vf-ph-tpt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.vf-ph-tpt b { font-size: 1.4em; font-weight: 700; line-height: 1.25; }
.vf-ph-tpt span { font-size: 1.1em; line-height: 1.5; color: var(--vf-nb-web-leise); }
.vf-ph-lth { display: flex; align-items: center; justify-content: space-between; gap: .6em; }
.vf-ph-lth .vf-ph-titel { margin-bottom: 0; }
.vf-ph-ltz { display: flex; flex-direction: column; gap: .9em; margin-top: .9em; }
.vf-ph-lti { display: flex; align-items: center; gap: .65em; }
.vf-ph-kuerzel { width: 2.9em; height: 2.9em; border-radius: .5em; display: grid; place-items: center; flex: none; background: var(--vf-nb-web-gruen-grund); color: var(--vf-nb-web-gruen); font-size: 1.05em; font-weight: 700; }
.vf-ph-ltn { display: flex; flex-direction: column; }
.vf-ph-ltn b { font-size: 1.25em; font-weight: 500; }
.vf-ph-ltn span { font-size: 1em; color: var(--vf-nb-web-leise); }
.vf-ph-mengen { display: flex; flex-direction: column; align-items: center; gap: 1.1em; }
.vf-ph-menge { display: flex; flex-direction: column; align-items: center; gap: .4em; }
.vf-ph-ml { font-size: .96em; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--vf-nb-web-leise); }
.vf-ph-zaehler { display: flex; }
.vf-ph-zk { width: 1.88em; height: 1.88em; display: grid; place-items: center; font-size: 2.13em; font-weight: 600; line-height: 1; color: var(--vf-nb-web-blau); background: var(--vf-nb-web-grund); border: .06em solid var(--vf-nb-web-rand); transition: background-color .12s, color .12s; }
.vf-ph-zk:first-child { border-radius: .31em 0 0 .31em; }
.vf-ph-zk:last-child { border-radius: 0 .31em .31em 0; }
.vf-ph-zk.ist-gedrueckt { background: var(--vf-nb-web-blau); border-color: var(--vf-nb-web-blau); color: var(--vf-nb-weiss); }
.vf-ph-zw { width: 3.48em; height: 2.62em; display: grid; place-items: center; font-size: 1.53em; font-weight: 600; font-variant-numeric: tabular-nums; background: var(--vf-nb-weiss); border-top: .08em solid var(--vf-nb-web-rand); border-bottom: .08em solid var(--vf-nb-web-rand); }
.vf-ph-zeile2 { display: flex; align-items: center; gap: .6em; }
.vf-ph-zeile2 .vf-ph-feld { flex: 1; font-size: 1.2em; }
.vf-ph-x { color: var(--vf-nb-web-rot); font-size: 1.6em; line-height: 1; padding: 0 .2em; }
.vf-ph-sigbild { display: block; position: relative; margin-top: .2em; height: 8.5em; padding: .3em .6em; border: .125em solid var(--vf-nb-web-rand); border-radius: .83em; background: var(--vf-nb-weiss); color: var(--vf-nb-web-strich); }
.vf-ph .vf-ph-sigbild svg { width: 100%; height: 100%; }
.vf-ph-sigbild i { position: absolute; top: -.6em; right: -.6em; width: 1.85em; height: 1.85em; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 1.17em; line-height: 1; background: var(--vf-nb-web-rot); color: var(--vf-nb-weiss); }
.vf-ph-aus { display: none; }
.vf-ph-name { flex: 1; min-width: 0; }
.vf-ph-speichern { display: flex; align-items: center; justify-content: center; gap: .4em; width: 100%; border-radius: .7em; padding: .75em; background: var(--vf-nb-web-blau); color: var(--vf-nb-weiss); font-size: 1.25em; font-weight: 600; transition: background-color .12s, transform .12s; }
.vf-ph-speichern.ist-gedrueckt { background: var(--vf-nb-web-blau-h); transform: scale(.97); }
.vf-ph-fuss { height: 3em; flex: none; display: flex; align-items: center; gap: .4em; padding: 0 .9em; background: var(--vf-nb-web-status); color: var(--vf-nb-web-status-text); font-size: .95em; white-space: nowrap; }
.vf-ph .vf-ph-fuss svg { width: 1em; height: 1em; flex: none; }
.vf-ph-fuss > span { flex: none; }
.vf-ph-fuss > .vf-ph-luft { flex: 1; }
.vf-ph-fuss > .vf-ph-db { flex: 0 1000 auto; min-width: 3.2em; overflow: hidden; text-overflow: ellipsis; }
.vf-ph-fuss > .vf-ph-copy { flex: 0 1 auto; min-width: 8.2em; white-space: normal; line-height: 1.15; }
.vf-ph-erfolg { position: absolute; inset: 0; z-index: 2; padding: 1.3em; background: var(--vf-nb-web-grund); opacity: 0; visibility: hidden; }
.vf-ph-ok { display: flex; flex-direction: column; align-items: center; gap: .55em; padding: 2.6em 1.8em 2em; text-align: center; }
.vf-ph-okk { width: 5.3em; height: 5.3em; border-radius: 50%; display: grid; place-items: center; background: var(--vf-nb-web-gruen-grund); color: var(--vf-nb-web-gruen); }
.vf-ph .vf-ph-okk svg { width: 2.6em; height: 2.6em; }
.vf-ph-ok b { font-size: 1.65em; font-weight: 700; margin-top: .5em; }
.vf-ph-okn { font-size: 1.17em; color: var(--vf-nb-web-leise); margin-bottom: .8em; }
.vf-ph-ok .vf-ph-knopf { width: 100%; }
/* Vollbild-Unterschrift im Querformat (nur Bühne): im Handy um 90° gedreht, damit sie aufrecht steht, wenn das Handy liegt */
.vf-ph-voll { position: absolute; left: 50%; top: 50%; z-index: 5; width: 58.5em; height: 28.5em; margin: -14.25em 0 0 -29.25em; display: flex; background: var(--vf-nb-web-voll); transform: rotate(90deg); opacity: 0; visibility: hidden; }
.vf-ph-flaeche { flex: 1; display: flex; padding: 1.3em 5.6em 1.3em 1.3em; }
.vf-ph-leinwand { flex: 1; display: flex; align-items: center; justify-content: center; border-radius: .67em; background: var(--vf-nb-weiss); color: var(--vf-nb-web-strich); }
.vf-ph .vf-ph-leinwand svg { width: 78%; height: 78%; }
.vf-ph-leiste { position: absolute; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .8em; padding: .8em .55em; border-radius: 1em 0 0 1em; background: var(--vf-nb-web-leiste); }
.vf-ph-lk { display: grid; place-items: center; padding: .5em .6em; border-radius: .67em; background: var(--vf-nb-weiss); transition: transform .12s; }
.vf-ph .vf-ph-lk svg { width: 1.9em; height: 1.9em; }
.vf-ph-lk--x { color: var(--vf-nb-web-rot); }
.vf-ph-lk--rad { color: var(--vf-nb-web-gelb); }
.vf-ph-lk--eimer { color: var(--vf-nb-web-leise); }
.vf-ph-lk--ok { color: var(--vf-nb-web-ok); }
.vf-ph-lk.ist-gedrueckt { transform: scale(.88); }
.vf-zeichen .vf-zf-w { stroke: var(--vf-nb-weiss); }

/* ---------- Nachbau: Hauptfenster der Desktop-App (Systemschrift, B35 (5)) ---------- */
.vf-win { width: 62em; display: flex; flex-direction: column; overflow: hidden; font-size: 10px; line-height: 1.3; color: var(--vf-nb-win-text); text-align: left; background: var(--vf-nb-win-grund); border: 1px solid var(--vf-nb-win-rahmen); box-shadow: var(--vf-nb-schatten-fenster); font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; letter-spacing: 0; }
.vf-win svg { flex: none; }
.vf-win-titel { height: 3em; flex: none; display: flex; align-items: center; gap: .6em; padding-left: .8em; background: var(--vf-nb-win-titel); }
.vf-win-titel .vf-win-logo { width: 1.35em; height: 1.6em; --logo-zeichen-farbe: var(--vf-nb-logo); }
.vf-win-tt { flex: 1; min-width: 0; font-size: 1.05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vf-win-knoepfe { display: flex; align-self: stretch; }
.vf-win-knoepfe i { width: 4.6em; display: grid; place-items: center; }
.vf-win-knoepfe svg { width: 1em; height: 1em; }
.vf-win-menue { height: 2.5em; flex: none; display: flex; align-items: center; gap: .1em; padding: 0 .3em; overflow: hidden; white-space: nowrap; background: var(--vf-nb-win-titel); }
.vf-win-mi { display: inline-flex; align-items: center; gap: .3em; padding: .15em .4em; font-size: .92em; }
.vf-win-mi svg { width: 1.15em; height: 1.15em; }
.vf-mi--grau { color: var(--vf-nb-win-sym-grau); }
.vf-mi--blau { color: var(--vf-nb-win-sym-blau); }
.vf-mi--braun { color: var(--vf-nb-win-sym-braun); }
.vf-mi--rot { color: var(--vf-nb-win-sym-rot); }
.vf-mi--gelb { color: var(--vf-nb-win-sym-gelb); }
.vf-win-koerper { flex: 1; min-height: 0; display: grid; grid-template-columns: 15em minmax(0, 1fr); gap: .7em; padding: .3em .7em .9em; }
.vf-win-links, .vf-win-rechts { display: flex; flex-direction: column; min-width: 0; }
.vf-win-gruppe { position: relative; display: block; margin-top: 1em; padding: 1em .5em .6em; border: 1px solid var(--vf-nb-win-gruppe); border-radius: .2em; }
.vf-win-gt { position: absolute; top: -.72em; left: .45em; max-width: calc(100% - 1em); padding: 0 .25em; font-size: .95em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--vf-nb-win-grund); }
.vf-win-reihe { display: flex; align-items: center; gap: .5em; }
.vf-win-kn { display: inline-flex; align-items: center; justify-content: center; gap: .45em; height: 2.4em; min-width: 2.4em; padding: 0 .4em; font-size: .95em; background: var(--vf-nb-win-knopf); border: 1px solid var(--vf-nb-win-knopf-rand); }
.vf-win-kn svg { width: 1.15em; height: 1.15em; }
.vf-win-kn--breit { flex: 1; }
.vf-win-filter .vf-win-reihe { gap: 2.2em; align-items: flex-end; }
.vf-win-fl { display: flex; flex-direction: column; gap: .25em; font-size: .95em; }
.vf-win-fl small { font-size: 1em; }
.vf-win-fl .vf-win-reihe { gap: .5em; }
.vf-win-fl .vf-win-kn { font-size: 1em; }
.vf-win-eingabe { display: inline-flex; align-items: center; height: 2.2em; min-width: 7.6em; padding: 0 .4em; background: var(--vf-nb-win-titel); border: 1px solid var(--vf-nb-win-knopf-rand); white-space: nowrap; }
.vf-win-eingabe--breit { min-width: 10em; background: var(--vf-nb-win-knopf); }
.vf-win-band { display: block; margin-top: .2em; padding: .4em; border: 1px solid var(--vf-nb-win-knopf-rand); text-align: center; font-size: .95em; font-weight: 700; letter-spacing: .05em; white-space: nowrap; }
.vf-win-raster { display: block; margin-top: .35em; font-size: .9em; background: var(--vf-nb-win-leer); border: 1px solid var(--vf-nb-win-knopf-rand); overflow: hidden; }
.vf-win-rk, .vf-win-rz { display: grid; }
.vf-win-raster--tp .vf-win-rk, .vf-win-raster--tp .vf-win-rz { grid-template-columns: 1.6em 7.4em minmax(0, 1fr); }
.vf-win-raster--b .vf-win-rk, .vf-win-raster--b .vf-win-rz { grid-template-columns: 1.6em 4.6em 11em 4.6em 4.6em 7.2em 7.2em minmax(1em, 1fr) 4.8em; }
.vf-win-rk i, .vf-win-rz i { display: block; min-width: 0; padding: 0 .4em; font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--vf-nb-win-titel); border-right: 1px solid var(--vf-nb-win-linie); border-bottom: 1px solid var(--vf-nb-win-linie); }
.vf-win-rk i { display: flex; align-items: center; min-height: 3.1em; padding-top: .2em; padding-bottom: .2em; line-height: 1.15; white-space: normal; }
.vf-win-rk i.n { justify-content: flex-start; }
.vf-win-raster--tp .vf-win-rk i { white-space: nowrap; }
.vf-win-rz i { height: 2.15em; line-height: 2.15em; font-variant-numeric: tabular-nums; }
.vf-win-rz i:first-child { padding: 0; text-align: center; }
.vf-win-rz i:first-child svg { width: 1.2em; height: 1.2em; margin: .42em auto 0; }
.vf-win i.n { text-align: right; }
.vf-win-rz.ist-gewaehlt i:not(:first-child) { background: var(--vf-nb-win-wahl); color: var(--vf-nb-weiss); }
.vf-win-rz.ist-eigen i:not(:first-child), .vf-win-rz.ist-wv i:not(:first-child) { background: var(--vf-nb-win-gelb); }
.vf-win-wv { display: block; width: .85em; height: .7em; margin: .7em auto 0; border-radius: .1em; background: var(--vf-nb-win-wv); }
.vf-win-zeilen { display: block; overflow: hidden; }
.vf-win-lauf { display: block; }
.vf-win-zahl.vf-win-aus { display: none; }

/* ---------- Teil 2: Desktop-App 3.4.0 – Menüzahl, Statusleiste, grüne Zeilen, Vorschau (Beschreibung 4a bis 4c, K77) ---------- */
.vf-win-wbz.vf-win-aus { display: none; }
.vf-win--konto .vf-win-menue { gap: 0; }
.vf-win--konto .vf-win-mi { padding: .15em .28em; }
.vf-win-mi.ist-gedrueckt { background: var(--vf-nb-win-mi-wahl); box-shadow: inset 0 0 0 1px var(--vf-nb-win-mi-rand); }
.vf-win-status { height: 2.3em; flex: none; display: flex; align-items: center; padding: 0 .7em; border-top: 1px solid var(--vf-nb-win-linie); }
.vf-win-wolke { width: 1.6em; height: 1.6em; color: var(--vf-nb-win-sym-blau); }
.vf-win-rz.ist-gruen i:not(:first-child) { background: var(--vf-nb-win-gruen); }
.vf-vs { width: 50em; display: flex; flex-direction: column; font-size: 10px; line-height: 1.3; color: var(--vf-nb-win-text); text-align: left; background: var(--vf-nb-win-grund); border: 1px solid var(--vf-nb-win-rahmen); box-shadow: var(--vf-nb-schatten-fenster); font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; letter-spacing: 0; }
.vf-vs svg { flex: none; }
.vf-vs-koerper { display: flex; flex-direction: column; gap: .8em; padding: .9em 1em 1em; }
.vf-vs-liste { display: block; min-height: 12em; background: var(--vf-nb-win-titel); border: 1px solid var(--vf-nb-win-knopf-rand); }
.vf-vs-zeile { display: grid; grid-template-columns: 15em 8em 4.4em 4.4em minmax(0, 1fr); }
.vf-vs-zeile i { display: block; min-width: 0; padding: .35em .5em; font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vf-vs-kopf i { border-right: 1px solid var(--vf-nb-win-linie); border-bottom: 1px solid var(--vf-nb-win-linie); }
.vf-vs-gruppe { display: flex; align-items: center; gap: .6em; padding: .7em .5em .25em; color: var(--vf-nb-win-gruppe-text); }
.vf-vs-gruppe::after { content: ""; flex: 1; height: 1px; background: var(--vf-nb-win-linie); }
.vf-vs-zusammen { display: flex; flex-direction: column; gap: .5em; padding-top: .2em; }
.vf-vs-satz { display: block; }
.vf-vs-fuss { display: flex; align-items: center; gap: .6em; margin-top: .3em; }
.vf-vs-fuss small { flex: 1; font-size: .85em; color: var(--vf-nb-win-klein); }
.vf-vs-kn { display: grid; place-items: center; min-width: 8.2em; height: 2.4em; padding: 0 .8em; background: var(--vf-nb-win-knopf); border: 1px solid var(--vf-nb-win-knopf-rand); }
.vf-vs-kn--haupt { border-color: var(--vf-nb-win-wahl); box-shadow: inset 0 0 0 1px var(--vf-nb-win-wahl); }
.vf-vs-kn.ist-gedrueckt { background: var(--vf-nb-win-kn-wahl); border-color: var(--vf-nb-win-kn-wahl-rand); }
.vf-andeutung { display: inline-block; vertical-align: middle; width: 100%; height: .6em; border-radius: .3em; background: var(--vf-nb-andeutung); }
.vf-andeutung--halb { width: 55%; }
.vf-andeutung--kurz { width: 9em; }

/* ---------- Teil 2: Mail und Seite des Tauschpartners bei Confirm (Bilder 3a bis 3d; Source Sans 3, 4.9) ---------- */
.vf-ml { width: 60em; display: block; overflow: hidden; font-size: 10px; line-height: 1.45; color: var(--vf-nb-ml-text); text-align: left; background: var(--vf-nb-weiss); border-radius: .5em; box-shadow: var(--vf-nb-schatten-fenster); font-family: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif; letter-spacing: 0; }
.vf-ml-kopf { display: flex; flex-direction: column; gap: .15em; padding: 1.4em 1.8em 1.2em; border-bottom: 1px solid var(--vf-nb-cf-linie); }
.vf-ml-betreff { font-size: 1.3em; font-weight: 700; margin-bottom: .6em; }
.vf-ml-feld { display: grid; grid-template-columns: 6.2em minmax(0, 1fr); font-size: .9em; }
.vf-ml-feld i { font-style: normal; color: var(--vf-nb-cf-leise); }
.vf-ml-grund { padding: 1.1em 0 1.2em; background: var(--vf-nb-cf-grund); }
.vf-ml-karte { display: flex; flex-direction: column; width: 35em; margin: 0 auto; padding: 1.8em 1.3em 1.2em; background: var(--vf-nb-weiss); border: 1px solid var(--vf-nb-cf-linie); border-top: .2em solid var(--vf-nb-cf-akzent); border-radius: .25em; }
.vf-ml-firma { font-size: 1.05em; }
.vf-ml-titel { font-size: 1.25em; margin-top: .3em; }
.vf-ml-p { display: block; margin-top: 1em; font-size: .97em; line-height: 1.6; }
.vf-ml-klein { font-size: .82em; color: var(--vf-nb-cf-leise); }
.vf-ml-knopf { align-self: flex-start; margin-top: 1.4em; padding: .75em 1.4em; border-radius: .15em; background: var(--vf-nb-cf-blau); color: var(--vf-nb-weiss); font-weight: 700; transition: background-color .12s, transform .12s; }
.vf-ml-knopf.ist-gedrueckt { background: var(--vf-nb-cf-blau-h); transform: scale(.97); }
.vf-ml-anbieter { display: block; margin-top: 1.3em; padding-top: .9em; border-top: 1px solid var(--vf-nb-cf-linie); font-size: .8em; color: var(--vf-nb-cf-leise); }
.vf-ml-anbieter u { color: var(--vf-nb-cf-blau); }
.vf-cf { position: relative; display: flex; flex-direction: column; overflow: hidden; font-size: 10px; line-height: 1.45; color: var(--vf-nb-cf-text); text-align: left; background: var(--vf-nb-cf-grund); font-family: "Source Sans 3", "Source Sans Pro", system-ui, sans-serif; letter-spacing: 0; }
.vf-cf svg { flex: none; }
.vf-cf b { font-weight: 600; }
.vf-cf-leiste { height: 3.6em; flex: none; display: flex; align-items: center; gap: .9em; padding: 0 max(1em, calc((100% - 45.5em) / 2)); background: var(--vf-nb-weiss); border-bottom: 1px solid var(--vf-nb-cf-linie); }
.vf-cf-logo { display: inline-flex; align-items: center; gap: .5em; --logo-zeichen-farbe: var(--vf-nb-cf-akzent); }
.vf-cf-logo svg { width: 1.45em; height: 1.7em; }
.vf-cf-wort { font-size: 1.25em; letter-spacing: -.01em; }
.vf-cf-dienst { padding-left: .9em; border-left: 1px solid var(--vf-nb-cf-linie); font-size: .9em; color: var(--vf-nb-cf-leise); }
.vf-cf-luft { flex: 1; }
.vf-cf-sprache { font-size: .9em; color: var(--vf-nb-cf-blau); }
.vf-cf-inhalt { position: relative; }
.vf-cf-lauf { display: block; }
.vf-cf-huelle { display: flex; flex-direction: column; max-width: 45.5em; margin: 0 auto; padding: 2.1em 1em 2.4em; }
.vf-cf-firma { font-size: 1.8em; line-height: 1.2; }
.vf-cf-bitte { margin-top: .4em; font-size: 1.07em; }
.vf-cf-kennwerte { display: flex; gap: 2.2em; margin-top: 1.4em; padding-top: 1.3em; border-top: 1px solid var(--vf-nb-cf-linie); }
.vf-cf-kennwerte > span { display: flex; flex-direction: column; gap: .15em; }
.vf-cf-kennwerte i { font-style: normal; font-size: .82em; color: var(--vf-nb-cf-leise); }
.vf-cf-kennwerte b { font-size: 1.07em; }
.vf-cf-kennwerte small { font-size: 1em; font-weight: 400; color: var(--vf-nb-cf-leise); }
.vf-cf-alle { display: flex; justify-content: flex-end; margin-top: 1.9em; }
.vf-cf-knopf2 { padding: .75em 1em; border: 1px solid var(--vf-nb-cf-wahl-rand); border-radius: .15em; background: var(--vf-nb-weiss); color: var(--vf-nb-cf-blau); font-size: .9em; font-weight: 600; transition: background-color .12s; }
.vf-cf-knopf2.ist-gedrueckt { background: var(--vf-nb-cf-hinweis); }
.vf-cf-karte { display: flex; flex-direction: column; margin-top: .9em; padding: 1.3em 1.3em 1.4em; background: var(--vf-nb-weiss); border: 1px solid var(--vf-nb-cf-linie); border-radius: .25em; }
.vf-cf-lt { font-size: 1.45em; line-height: 1.2; }
.vf-cf-saldo { display: flex; flex-direction: column; margin-top: .8em; padding-left: 1em; border-left: .2em solid var(--vf-nb-cf-akzent); }
.vf-cf-saldo b { font-size: 1.15em; }
.vf-cf-saldo small { margin-top: .15em; font-size: .82em; color: var(--vf-nb-cf-leise); }
.vf-cf-wahl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .5em; margin-top: 1.3em; padding-bottom: 1.2em; border-bottom: 1px solid var(--vf-nb-cf-linie); }
.vf-cf-opt { display: flex; align-items: center; gap: .6em; height: 2.8em; padding: 0 .9em; border: 1px solid var(--vf-nb-cf-wahl-rand); border-radius: .12em; font-size: 1.07em; }
.vf-cf-opt i { width: 1.1em; height: 1.1em; flex: none; border: 1px solid var(--vf-nb-cf-wahl-rand); border-radius: 50%; background: var(--vf-nb-weiss); }
.vf-cf-einzeln { display: flex; align-items: center; gap: .3em; margin-top: 1.1em; color: var(--vf-nb-cf-blau); font-size: .9em; font-weight: 600; }
.vf-cf-einzeln svg { width: .9em; height: .9em; }
.vf-cf-ueberblick { margin-top: 1.8em; padding-bottom: 1.2em; }
.vf-cf-h { font-size: 1.2em; }
.vf-cf-punkt { display: list-item; list-style: disc; margin: .4em 0 0 1.2em; font-size: 1.07em; }
.vf-cf-gewaehlt { display: none; }
.ist-gewaehlt .vf-cf-gewaehlt { display: inline; }
.ist-gewaehlt .vf-cf-offen { display: none; }
.ist-gewaehlt .vf-cf-opt--ja { border-color: var(--vf-nb-cf-blau); background: var(--vf-nb-cf-hinweis); }
.ist-gewaehlt .vf-cf-opt--ja i { border-color: var(--vf-nb-cf-blau); background: var(--vf-nb-cf-blau); box-shadow: inset 0 0 0 .22em var(--vf-nb-weiss); }
.vf-cf-notiz { display: block; margin-top: 1.5em; font-size: .9em; color: var(--vf-nb-cf-leise); }
.vf-cf-hinweis { display: block; margin-top: 1em; padding: 1.1em 1.2em; border-left: .25em solid var(--vf-nb-cf-akzent); background: var(--vf-nb-cf-hinweis); font-size: .95em; line-height: 1.6; }
.vf-cf-senden { display: flex; align-items: center; justify-content: center; height: 3.3em; margin-top: 1em; border-radius: .15em; background: var(--vf-nb-cf-blau); color: var(--vf-nb-weiss); font-size: 1.1em; font-weight: 600; transition: background-color .12s, transform .12s; }
.vf-cf-senden.ist-gedrueckt { background: var(--vf-nb-cf-blau-h); transform: scale(.985); }
.vf-cf-danke { position: absolute; inset: 0; z-index: 2; overflow: hidden; background: var(--vf-nb-cf-grund); opacity: 0; visibility: hidden; }
.vf-cf-firma--danke { padding-bottom: .8em; border-bottom: 1px solid var(--vf-nb-cf-linie); }
.vf-cf-danke .vf-cf-kennwerte { margin-top: .4em; border-top: 0; }
.vf-cf-dk { display: flex; flex-direction: column; margin-top: 2.2em; padding: 1.6em 1.5em 2em; background: var(--vf-nb-weiss); border: 1px solid var(--vf-nb-cf-linie); border-top: .2em solid var(--vf-nb-cf-akzent); }
.vf-cf-dk-kopf { display: flex; align-items: center; gap: 1.2em; padding-bottom: 1.6em; border-bottom: 1px solid var(--vf-nb-cf-linie); --logo-zeichen-farbe: var(--vf-nb-cf-akzent); }
.vf-cf-dk-kopf svg { width: 3.4em; height: 4em; }
.vf-cf-dk-kopf > span { display: flex; flex-direction: column; gap: .3em; }
.vf-cf-dk-kopf b { font-size: 1.65em; }
.vf-cf-dk-kopf span span { font-size: 1.05em; }
.vf-cf-dk-fuss { display: flex; flex-direction: column; align-items: flex-start; gap: .9em; margin-top: 1.3em; }
.vf-cf-knopf { padding: .85em 1.4em; border-radius: .15em; background: var(--vf-nb-cf-blau); color: var(--vf-nb-weiss); font-size: 1.05em; font-weight: 600; }
.vf-cf-dk-fuss small { font-size: .9em; color: var(--vf-nb-cf-leise); }
.vf-cf-dk-fuss u { color: var(--vf-nb-cf-blau); font-weight: 600; }
.vf-cf-h--frei { margin-top: 2.3em; }
.vf-cf-tab { display: flex; flex-direction: column; margin-top: .9em; background: var(--vf-nb-weiss); border: 1px solid var(--vf-nb-cf-linie); }
.vf-cf-tz { display: grid; grid-template-columns: 7.4em minmax(0, 1fr) auto; gap: 1em; padding: 1em 1.1em; border-top: 1px solid var(--vf-nb-cf-linie); font-size: 1.05em; }
.vf-cf-tz:first-child { border-top: 0; }
.vf-cf-tz b { white-space: nowrap; }
.vf-cf-tz small { display: block; font-size: .8em; color: var(--vf-nb-cf-leise); }

/* ---------- Bühne der Computer-Fassung (nur mit .js unter der Umschaltbreite „vorfuehrung“) ---------- */
.vf-buehne-halter { display: none; }
.vf-buehne { position: absolute; inset: 0; overflow: hidden; border-radius: 32px; }
.vf-flaeche { position: absolute; inset: 0; border-radius: 32px; border: 1px solid var(--flaeche-rand); background-color: var(--flaeche); background-image: var(--punkte); background-size: 22px 22px; }
.vf-szene { position: absolute; left: 50%; top: 0; width: 70em; height: 62em; margin-left: -35em; font-size: 9px; }
.vf-sz { position: absolute; transform-origin: 50% 50%; }
.vf-sz-1 { left: 20em; top: 1em; z-index: 2; }
.vf-sz-1 .vf-ph { font-size: 1em; }
.vf-sz-2 { left: 4em; top: 9em; opacity: 0; visibility: hidden; }
.vf-sz-2 .vf-win { font-size: 1em; height: 43em; }
.vf-sz-2 .vf-win-zeilen { height: 15.5em; }
.vf-sz-2 .vf-win-neu { opacity: 0; }
.vf-sz-3, .vf-sz-4 { left: 0; top: 0; width: 70em; height: 62em; }
.vf-sz-3 { z-index: 3; }
.vf-sz3-mail, .vf-sz3-browser, .vf-sz4-fenster, .vf-sz4-vorschau { position: absolute; transform-origin: 50% 50%; opacity: 0; visibility: hidden; }
.vf-sz3-mail { left: 5em; top: 6em; }
.vf-sz3-mail .vf-ml { font-size: 1em; }
.vf-sz3-browser { left: 1em; top: 1.5em; width: 68em; height: 57.5em; display: flex; flex-direction: column; overflow: hidden; border-radius: .7em; background: var(--vf-nb-weiss); box-shadow: 0 0 0 1px var(--vf-nb-br-linie), var(--vf-nb-schatten-fenster); }
.vf-br-leiste { height: 2.6em; flex: none; display: flex; align-items: center; gap: .9em; padding: 0 .9em; background: var(--vf-nb-br-leiste); border-bottom: 1px solid var(--vf-nb-br-linie); }
.vf-br-punkte { display: flex; gap: .4em; }
.vf-br-punkte i { display: block; width: .7em; height: .7em; border-radius: 50%; background: var(--vf-nb-br-punkt); }
.vf-br-adresse { flex: 1; height: 1.5em; margin-right: 6em; border-radius: 1em; background: var(--vf-nb-weiss); }
.vf-sz3-browser .vf-cf { flex: 1; min-height: 0; font-size: 1.05em; }
.vf-cf--buehne .vf-cf-inhalt { flex: 1; min-height: 0; overflow: hidden; }
.vf-sz4-fenster { left: 4em; top: 9em; }
.vf-sz4-fenster .vf-win { font-size: 1em; }
.vf-sz4-vorschau { left: 14em; top: 20em; }
.vf-sz4-vorschau .vf-vs { font-size: 1em; }

/* Szene c der Modulseite Web-Bestätigungen (B111): Desktop-App, Connector, drei verschlüsselte Pakete auf dem Weg zu
   Confirm. Außer dem Fenster kein Nachbau einer Oberfläche, daher Farben aus werte.css; ohne Worte. */
.vf-sz-c { left: 0; top: 0; width: 70em; height: 62em; opacity: 0; visibility: hidden; }
.vf-szc-fenster { position: absolute; left: 2em; top: 13em; font-size: .8em; }
.vf-szc-fenster .vf-win { font-size: 1em; height: 43em; }
.vf-szc-weg { position: absolute; left: 46em; top: 44em; width: 27.3em; border-top: .3em dashed var(--blau-200); transform-origin: 0 0; transform: rotate(-64deg); }
.vf-szc-connector { position: absolute; left: 40em; top: 44em; display: flex; align-items: center; gap: .8em; padding: 1em 1.3em; border-radius: 1.4em; background: var(--dunkel); color: var(--weiss); box-shadow: var(--schatten-2); transition: box-shadow .3s; }
.vf-szc-connector svg { width: 2.6em; height: 2.6em; }
.vf-szc-connector.ist-aktiv { box-shadow: 0 0 0 .6em var(--blau-200), var(--schatten-2); }
.vf-szc-paket { position: absolute; left: 0; top: 0; width: 6.6em; padding: .8em; display: grid; grid-template-columns: 2em minmax(0, 1fr); grid-template-rows: auto auto; gap: .5em .6em; align-items: center; border-radius: .9em; background: var(--karte); border: .15em solid var(--blau-200); box-shadow: var(--schatten-1); color: var(--blau); opacity: 0; visibility: hidden; }
.vf-szc-paket svg { grid-row: 1 / 3; width: 2em; height: 2em; }
.vf-szc-paket i { display: block; height: .5em; border-radius: .3em; background: var(--blau-200); }
.vf-szc-paket i + i { width: 70%; }
.vf-szc-ziel { position: absolute; left: 53em; top: 6em; width: 14em; height: 14em; border-radius: 50%; display: grid; place-items: center; background: var(--karte); border: .15em solid var(--rahmen); box-shadow: var(--schatten-2); color: var(--blau); }
.vf-szc-ziel > svg { width: 7.4em; height: 7.4em; }
.vf-szc-ok { position: absolute; right: .4em; top: .4em; width: 4.2em; height: 4.2em; border-radius: 50%; display: grid; place-items: center; background: var(--gruen); color: var(--weiss); opacity: 0; visibility: hidden; }
.vf-szc-ok svg { width: 2.4em; height: 2.4em; }

/* Modulseite Web-Bestätigungen (B111): ruhige Fassung als nummerierte Liste ohne Bilder; die Punkte haben keine
   Überschrift, in der Computer-Fassung bleiben alle vier Sätze sichtbar und der gewählte ist hervorgehoben. */
.vorfuehrung--wb .vf-kopf { margin-bottom: 28px; }
.vorfuehrung--wb .vf-schritte { gap: 18px; max-width: 760px; }
.vorfuehrung--wb .vf-schritt, .vorfuehrung--wb .vf-schritt:nth-child(even) { display: block; background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
.vorfuehrung--wb .vf-text { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 16px; align-items: start; padding: 0; }
.vorfuehrung--wb .vf-absatz { margin: 6px 0 0; max-width: 60ch; font-size: 1rem; line-height: 1.6; color: var(--text-2); }

/* Computer-Fassung (B101): kompakt, links die Schritte als Knöpfe (aufgeklappt nur der gewählte, darunter ein Balken für
   den Lauf), rechts die Bühne in fester Höhe; vorfuehrung.js setzt .ist-aktiv, --vf-lauf und .ist-blende. */
@media (min-width: 1024px) and (min-height: 600px) and (prefers-reduced-motion: no-preference) {
  .js .vorfuehrung .vf-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; align-items: center; }
  .js .vorfuehrung .vf-schritte { gap: 10px; }
  .js .vorfuehrung .vf-schritt, .js .vorfuehrung .vf-schritt:nth-child(even) { display: block; position: relative; cursor: pointer; background: transparent; border: 1px solid transparent; border-radius: 20px; box-shadow: none; overflow: hidden; opacity: 1; transform: none; transition: background-color .2s ease, border-color .2s ease; }
  .js .vorfuehrung .vf-schritt:hover { background: var(--karte); border-color: var(--rahmen); }
  .js .vorfuehrung .vf-schritt.ist-aktiv { background: var(--karte); border-color: var(--rahmen); box-shadow: var(--schatten-1); }
  .js .vorfuehrung .vf-schritt::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--blau); transform-origin: 0 50%; transform: scaleX(var(--vf-lauf, 0)); opacity: 0; }
  .js .vorfuehrung .vf-schritt.ist-aktiv::after { opacity: 1; }
  .js .vorfuehrung .vf-text { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 16px; align-items: center; padding: 14px 20px; }
  .js .vorfuehrung .vf-meta { display: contents; }
  .js .vorfuehrung .vf-nr { grid-column: 1; grid-row: 1; background: var(--karte); color: var(--text-2); box-shadow: 0 0 0 1px var(--rahmen-2); }
  .js .vorfuehrung .vf-schritt.ist-aktiv .vf-nr { background: var(--blau); color: var(--weiss); box-shadow: none; }
  .js .vorfuehrung .vf-schritt h3 { grid-column: 2; grid-row: 1; margin: 0; font-size: 1.1875rem; line-height: 1.3; letter-spacing: -.015em; }
  .js .vorfuehrung .vf-marke { grid-column: 2; grid-row: 2; justify-self: start; margin-top: 12px; }
  .js .vorfuehrung .vf-absatz { grid-column: 2; grid-row: 3; }
  .js .vorfuehrung .vf-absatz p { font-size: 1rem; line-height: 1.6; margin-top: 10px; }
  .js .vorfuehrung .vf-schritt:not(.ist-aktiv) .vf-marke, .js .vorfuehrung .vf-schritt:not(.ist-aktiv) .vf-absatz { display: none; }
  .js .vorfuehrung .vf-wahl { display: block; width: 100%; padding: 0; margin: 0; border: 0; background: none; font: inherit; color: inherit; letter-spacing: inherit; text-align: left; cursor: pointer; }
  .js .vorfuehrung .vf-bild { display: none; }
  .js .vorfuehrung .vf-buehne-halter { display: block; position: relative; height: clamp(440px, 40vw, 580px); }
  .js .vorfuehrung .vf-szene { transition: opacity .26s ease; }
  .js .vorfuehrung .vf-szene.ist-blende { opacity: 0; }
}

/* Computer-Fassung der Modulseite Web-Bestätigungen (B111): alle Sätze sichtbar, der Satz ist der Knopf */
@media (min-width: 1024px) and (min-height: 600px) and (prefers-reduced-motion: no-preference) {
  .js .vorfuehrung--wb .vf-schritte { max-width: none; gap: 8px; }
  .js .vorfuehrung--wb .vf-text { align-items: start; padding: 14px 20px 16px; }
  .js .vorfuehrung--wb .vf-absatz { grid-column: 2; grid-row: 1; margin: 6px 0 0; }
  .js .vorfuehrung--wb .vf-schritt:not(.ist-aktiv) .vf-absatz { display: block; }
  .js .vorfuehrung--wb .vf-schritt.ist-aktiv .vf-absatz { color: var(--text); }
}

@media (prefers-reduced-motion: reduce) {
  .vf-nr, .vf-ph-knopf, .vf-ph-zk, .vf-ph-speichern, .vf-ph-lk, .vf-ml-knopf, .vf-cf-knopf2, .vf-cf-senden { transition: none; }
}