/* startseite.css */
/* startseite.css – Startseite (AW-05), nach Muster A3 (K2). Farben nur über werte.css (Umsetzungsblatt 5.4),
   Abfragen nur mit Namen aus umschaltbreiten.json, vom Handy aufwärts (3.1). Bewegt werden nur opacity, transform,
   clip-path (3.3). Das Innere der Hüllen vorfuehrung() und editionskarten() gestaltet diese Datei nicht. */

/* ---------- Abschnitte ---------- */
.abschnitt-lead { font-size: 1.0625rem; line-height: 1.6; color: var(--text-2); margin-top: 16px; }
@media (min-width: 720px) { .abschnitt-lead { font-size: 1.1875rem; } }

/* ---------- Kopfbereich ---------- */
.kopfbereich { position: relative; overflow: hidden; background: var(--weiss); padding: 56px 0 72px; border-bottom: 1px solid var(--rahmen); }
.kopfbereich-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; }
/* Joris' Überschrift wird nie getrennt (Antwort zu Halt T, Nr. 6): Die Schriftgröße folgt auch der Breite der Textspalte
   (Container-Einheit cqi). „Lademittelverwaltung“ ist rund 10,1 Schriftgrößen breit; 9.4cqi lässt etwa 5 % Luft.
   Die Spaltengrenze gilt immer, auch bei größerer Standardschrift (Halt E1, Runde 1, Nr. 2). */
.kopfbereich-text { container-type: inline-size; }
.kopfbereich h1 { font-size: min(clamp(1.5rem, 1.1rem + 3.6vw, 3.15rem), 9.4cqi); line-height: 1.06; letter-spacing: -.04em; font-weight: 800; margin-top: 22px; -webkit-hyphens: manual; hyphens: manual; overflow-wrap: normal; }
.kopf-unterzeile { font-size: clamp(1.25rem, 1.05rem + .7vw, 1.55rem); line-height: 1.4; letter-spacing: -.01em; color: var(--text-2); margin-top: 20px; max-width: 26ch; font-weight: 450; }
/* Wechselndes Wort (B97): das Wort schiebt sich aus der Zeile, das nächste herein; nur transform, immer voll deckend
   (Kontrast bei jeder Messung, P06) */
.wechsel { display: block; overflow: hidden; color: var(--blau); font-weight: 650; }
.wechsel-wort { display: inline-block; transition: transform .3s ease; }
.wechsel-wort.ist-weg { transform: translateY(-110%); }
.wechsel-wort.ist-neu { transform: translateY(110%); transition: none; }
.kopf-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 36px; }
.kopf-knoepfe .knopf { width: 100%; }
@media (min-width: 720px) { .kopf-knoepfe .knopf { width: auto; } }
.kopf-wege { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px 28px; }
.kopf-wege .textlink { min-height: 44px; }
.kopf-klein { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--rahmen); max-width: 56ch; }
.kopf-klein .kleingedrucktes + .kleingedrucktes { margin-top: 4px; }
/* Die h2 der Startseite nie größer als ihre h1 (D5): unter --computer begrenzt der mittlere Wert der h1 (1.1rem + 3.6vw). */
.abschnitt h2, .boden h2 { font-size: min(clamp(2rem, 1.5rem + 1.8vw, 2.9rem), 9cqi, 1.1rem + 3.6vw); }
/* Ab --computer steht die h1 in der schmaleren Textspalte (9.4cqi davon, etwa 4.5vw − 5.4 px); die h2 der Seite und des
   Seitenabschlusses bleiben darunter, auch bei großer Standardschrift (D5, D6). 1 px Luft für eine Bildlaufleiste. */
@media (min-width: 1024px) {
  .abschnitt h2, .boden h2 { font-size: min(clamp(2rem, 1.5rem + 1.8vw, 2.9rem), 9cqi, calc(min(4.5vw, 54px) - 6.5px)); }
  .kopfbereich { padding: 80px 0 104px; }
  .kopfbereich-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 56px; }
}

/* Kopfbild: Fläche mit Punktraster wie programmbild(); Bild 1a bestimmt die Größe (Breite und Höhe setzt der Bild-Umbau) */
.kopfbild { position: relative; padding: 28px 0; min-width: 0; }
.kopfbild::before { content: ""; position: absolute; top: 0; bottom: 0; left: 10%; right: -24px; border-radius: var(--r-xl); background-color: var(--flaeche); background-image: var(--punkte); background-size: 20px 20px; border: 1px solid var(--flaeche-rand); }
@media (min-width: 1024px) { .kopfbild { padding: 40px 0; } .kopfbild::before { left: 16%; right: -56px; } }
.kopfbild-rahmen { position: relative; border-radius: 10px; overflow: hidden; box-shadow: var(--schatten-2); background: var(--weiss); }
.kopfbild-ebene { display: block; }
.kopfbild-ebene img { display: block; width: 100%; height: auto; }

/* Belebung beim Laden (B19 (2); K36 (8)): Bild 1b (Stand B) liegt über 1a und blendet einmal aus. Die Titelleiste
   (in 1b grau, in 1a aktiv) ist per clip-path aus 1b herausgenommen, damit sie nicht mit überblendet. Auslöser ist eine
   kurze Verzögerung nach dem Laden; fill-mode both hält den Endzustand: 1b unsichtbar, also immer Bild 1a.
   Ohne die Klasse „bewegung“ (ohne JavaScript, abgeschaltete Bewegung) ist 1b gar nicht sichtbar. */
.kopfbild-ebene--b { display: none; position: absolute; inset: 0; }
.bewegung .kopfbild-ebene--b { display: block; clip-path: inset(4.4% 0 0 0); animation: kopfbild-wechsel .9s var(--ease) 1.2s both; }
@keyframes kopfbild-wechsel { from { opacity: 1; } to { opacity: 0; } }

/* ---------- Was Palettenkonto kann ---------- */
.funktionen { display: flex; flex-direction: column; gap: 72px; }
.funktion { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; }
.funktion h3 { font-size: min(clamp(1.5rem, 1.2rem + 1vw, 2rem), 8cqi); line-height: 1.15; letter-spacing: -.025em; font-weight: 750; }
.funktion-absatz { font-size: 1.0625rem; line-height: 1.65; color: var(--text-2); margin-top: 14px; max-width: 44ch; }
.funktion-liste ul, .modul-punkte ul, .modul-text ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.funktion-liste { margin-top: 22px; }
.funktion-liste li, .modul-punkte li, .modul-text li { position: relative; padding-left: 28px; font-size: .98rem; line-height: 1.55; color: var(--text); }
.funktion-liste li::before, .modul-punkte li::before, .modul-text li::before { content: ""; position: absolute; left: 2px; top: .68em; width: 14px; height: 3px; border-radius: 2px; background: var(--blau); }
.funktion-edition { margin-top: 20px; }
.funktion-bild { min-width: 0; }
.funktion-bild--zwei { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 720px) { .funktion-bild--zwei { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; } }
@media (min-width: 1024px) {
  .funktionen { gap: 112px; }
  .funktion { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; }
  .funktion:nth-child(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .funktion:nth-child(even) .funktion-bild { order: -1; }
}

/* Weitere Punkte; die Aussage „ohne Cloud“ steht als eigener article daneben, nicht in einer Liste (F6) */
.mehr { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: 72px; background: var(--weiss); border: 1px solid var(--rahmen); border-radius: var(--r-l); box-shadow: var(--schatten-1); }
.mehr-punkt { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 14px; }
.mehr-punkt + .mehr-punkt { border-top: 1px solid var(--rahmen); }
.mehr-symbol { width: 40px; height: 40px; border-radius: 11px; background: var(--grau-1); color: var(--grau-7); display: grid; place-items: center; }
.mehr-symbol .s { width: 20px; height: 20px; }
.mehr h3 { font-size: 1.0625rem; line-height: 1.35; letter-spacing: -.01em; font-weight: 700; }
.mehr-text { font-size: .96875rem; line-height: 1.6; color: var(--text-2); }
.mehr-text p + p { margin-top: 8px; }
.mehr-anbieter { font-size: .875rem; color: var(--text-3); }
.funktionen-hinweis { margin-top: 22px; font-size: .9375rem; line-height: 1.6; color: var(--text-2); max-width: 72ch; }
@media (min-width: 1024px) {
  .mehr { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 112px; }
  .mehr-punkt { padding: 28px 30px 30px; }
  .mehr-punkt + .mehr-punkt { border-top: 0; border-left: 1px solid var(--rahmen); }
}

/* ---------- Für Ihre Branche (Karten über karte()) ---------- */
.branchen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.branchen > div { display: flex; }
.branchen .karte { flex: 1; background: var(--grund); }
@media (min-width: 720px) { .branchen { grid-template-columns: 1fr 1fr; } }

/* ---------- Zusatzmodule ---------- */
.module { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
@media (min-width: 720px) { .module { grid-template-columns: 1fr 1fr; } }
/* Schalter „aus“: Die Kachel Palettenkonto Web steht allein, ohne leere zweite Spalte (Halt E1, Runde 1, Nr. 1) */
.module > .modul:only-child { grid-column: 1 / -1; max-width: 720px; }
.modul { background: var(--weiss); border: 1px solid var(--rahmen); border-radius: var(--r-xl); box-shadow: var(--schatten-1); padding: 24px 22px 26px; display: flex; flex-direction: column; }
@media (min-width: 1024px) { .modul { padding: 28px 32px 32px; } }
.modul-kopf { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.modul-symbol { width: 46px; height: 46px; border-radius: var(--r); display: grid; place-items: center; flex: none; background: var(--blau-50); color: var(--blau); }
.modul-symbol .s { width: 24px; height: 24px; }
.modul--wb .modul-symbol { background: var(--indigo-50); color: var(--indigo); }
.modul h3 { font-size: min(1.5rem, 8cqi); line-height: 1.2; letter-spacing: -.02em; font-weight: 750; }
.modul-marke { 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: .2rem .6rem; }
.modul-unter, .modul-text > p:first-child { font-size: 1.0625rem; line-height: 1.55; color: var(--text-2); margin-top: 14px; }
.modul-punkte, .modul-text ul { margin-top: 20px; }
.modul--wb .modul-text li::before { background: var(--indigo); }
.modul-fuss { margin-top: auto; padding-top: 24px; }
.modul-bedingung { display: flex; align-items: flex-start; gap: .6rem; border-radius: 12px; padding: .8rem 1rem; font-size: .9375rem; line-height: 1.45; font-weight: 500; background: var(--blau-50); color: var(--blau-800); border: 1px solid var(--blau-200); }
.modul-bedingung .s { width: 1.15rem; height: 1.15rem; margin-top: .1rem; }
.modul-link { margin-top: 18px; }
/* Kachel Web-Bestätigungen: Wortlaut aus der gemeinsamen Datei (Absatz, Liste, Zusatzmodul mit Link), darunter der Link
   zur Modulseite wie in der Kachel Palettenkonto Web (B128) */
.modul-text { display: flex; flex-direction: column; flex: 1; }
.modul-text ul { margin-bottom: 24px; }
.modul-text > p:last-child { border-radius: 12px; padding: .8rem 1rem; font-size: .9375rem; line-height: 1.45; font-weight: 500; background: var(--indigo-50); color: var(--indigo-800); border: 1px solid var(--indigo-200); margin-top: auto; }
.modul-text > p:last-child a { color: var(--indigo-800); font-weight: 650; }
.modul-text + .modul-fuss { padding-top: 0; }

/* ---------- Druck: eigene Abschnitte lesbar, ohne Belebung und ohne Bild 1b (K36 (8)) ---------- */
@media print {
  .kopfbild-ebene--b { display: none !important; animation: none !important; }
  .kopfbereich, .abschnitt--weiss { background: var(--weiss); }
  .kopfbild::before { display: none; }
  .kopfbild-rahmen, .modul, .mehr, .branchen .karte { box-shadow: none; }
  /* Listenstriche als Rahmen, weil Hintergründe meist nicht gedruckt werden (Halt E1, Runde 1, Nr. 3) */
  .funktion-liste li::before, .modul-punkte li::before, .modul-text li::before { background: none; height: 0; border-top: 3px solid var(--blau); border-radius: 0; }
  .modul--wb .modul-text li::before { border-top-color: var(--indigo); }
}
/* abschnitte.css */
/* abschnitte.css – Abschnittsleiste rechts auf langen Seiten (B119, Startseite). Erst ab der Breite „computer“. Eingeklappt
   nur Striche, höchstens 31 px vom Rand (innerhalb des Seitenrands von .wrap); beim Zeigen mit der Maus oder mit der
   Tastatur (focus-within) stehen die Überschriften daneben. Den aktuellen Abschnitt setzt skripte/abschnitte.js
   (aria-current): längerer Strich in Blau. */
.abschnitte { display: none; }
@media (min-width: 1024px) {
  .abschnitte { display: block; position: fixed; right: 3px; top: 50%; transform: translateY(-50%); z-index: 40; }
  .abschnitte-liste { list-style: none; display: flex; flex-direction: column; gap: 2px; padding: 6px 3px; background: var(--kopf-grund); border: 1px solid var(--rahmen); border-radius: var(--r); box-shadow: var(--schatten-1); }
  .abschnitte:hover .abschnitte-liste, .abschnitte:focus-within .abschnitte-liste { background: var(--karte); box-shadow: var(--schatten-2); }
  .abschnitte-link { display: flex; align-items: center; justify-content: flex-end; min-height: 28px; padding: 0 3px; color: var(--text-2); font-size: .875rem; font-weight: 600; line-height: 1.3; text-decoration: none; border-radius: 8px; }
  .abschnitte-link::after { content: ""; flex: none; width: 8px; height: 3px; border-radius: 2px; background: var(--rahmen-2); }
  .abschnitte-link:hover { color: var(--text); }
  .abschnitte-link[aria-current] { color: var(--blau); }
  .abschnitte-link[aria-current]::after { width: 14px; background: var(--blau); }
  .abschnitte-text { max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; }
  .abschnitte:hover .abschnitte-text, .abschnitte:focus-within .abschnitte-text { max-width: 24em; opacity: 1; padding-left: 8px; margin-right: 12px; }
}
@media (prefers-reduced-motion: no-preference) {
  .abschnitte-link::after { transition: width .2s ease, background-color .2s ease; }
  .abschnitte-text { transition: max-width .25s ease, opacity .2s ease; }
}
/* programmbild.css */
/* programmbild.css – Baustein programmbild(…) (AW-01): Fläche mit feinem Punktraster, Bild oder Nachbau */
.programmbild { margin: 0; }
.programmbild-flaeche { background-color: var(--flaeche); background-image: var(--punkte); background-size: 20px 20px; border: 1px solid var(--flaeche-rand); border-radius: 20px; padding: 28px 14px; display: grid; place-items: center; }
@media (min-width: 720px) { .programmbild-flaeche { border-radius: var(--r-xl); padding: 40px 32px; } }
.programmbild-flaeche img { display: block; border-radius: 10px; box-shadow: var(--schatten-2); }
.programmbild-unterschrift { margin-top: 12px; font-size: .875rem; color: var(--text-2); }
/* 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; }
}
/* editionskarten.css */
/* editionskarten.css – Hülle editionskarten(optionen), Inhalt AW-09. Gestaltung nach Muster Editionen_und_Preise.html
   und A3 (Abschnitt „Editionen“). Farben nur aus werte.css; Breiten des Musters abgebildet: 960 → computer, 720 → tablet. */
.ek-kopf { text-align: center; margin-left: auto; margin-right: auto; }
.ek-lead { font-size: 1.0625rem; line-height: 1.6; color: var(--text-2); margin-top: 16px; }
@media (min-width: 720px) { .ek-lead { font-size: 1.1875rem; } }

.ek-karten { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: 640px; margin: 0 auto; }
@media (min-width: 720px) { .ek-karten { gap: 20px; } }
@media (min-width: 1024px) { .ek-karten { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; } }

.ek-karte { background: var(--karte); border: 1px solid var(--rahmen); border-radius: 22px; padding: 24px 20px 22px; display: flex; flex-direction: column; min-width: 0; }
@media (min-width: 720px) { .ek-karte { border-radius: var(--r-xl); padding: 30px 28px 28px; } }
.ek-name { font-size: .875rem; font-weight: 700; letter-spacing: .1em; color: var(--blau-800); }
.ek-kurz { font-size: 1.0625rem; font-weight: 600; color: var(--text); margin-top: 6px; }
.ek-preis { margin-top: 22px; display: flex; align-items: baseline; flex-wrap: wrap; gap: .45rem; font-variant-numeric: tabular-nums; }
.ek-preis b { font-size: 2.75rem; line-height: 1; letter-spacing: -.035em; font-weight: 800; color: var(--text); }
.ek-ab { font-size: 1.0625rem; font-weight: 600; color: var(--text-2); }
.ek-zus { font-size: .9375rem; color: var(--text-2); margin-top: 10px; }
.ek-punkte ul { list-style: none; margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--rahmen); display: flex; flex-direction: column; gap: 10px; }
.ek-punkte li { position: relative; padding-left: 26px; font-size: .98rem; line-height: 1.5; color: var(--text); }
.ek-punkte li::before { content: ""; position: absolute; left: 1px; top: .66em; width: 13px; height: 3px; border-radius: 2px; background: var(--blau); }
.ek-funktionen { margin-top: 18px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; font-size: .875rem; line-height: 1.5; }
.ek-module { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--rahmen); display: flex; flex-direction: column; gap: 14px; }
.ek-akt { margin-top: auto; padding-top: 28px; display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
.ek-akt > .textlink, .ek-test > .textlink { align-self: center; min-height: 32px; }
.ek-klein { font-size: .8125rem; line-height: 1.5; color: var(--text-2); text-align: center; }
.ek-test { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 14px; border-top: 1px solid var(--rahmen); }

.ek-fuss { margin-top: 28px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.ek-stand { font-size: .875rem; line-height: 1.6; color: var(--text-2); }

/* Fassung der Preisseite: schließt an den Seitenkopf an, ohne sichtbare eigene Überschrift */
.editionskarten.editionskarten--preisseite { background: var(--grund); padding: 0 0 20px; }

@media print {
  .ek-karte { break-inside: avoid; }
}
/* modulzeile.css */
/* modulzeile.css – Baustein modulzeile(modul, edition) (AW-01), drei Zustände nach B32 (1), Gestaltung wie Muster A3 */
.modulzeile { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .7rem; margin: 0; font-size: .875rem; line-height: 1.3; }
.mz-trenn { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mz-modul { flex-basis: 100%; font-size: .8125rem; font-weight: 600; color: var(--text-2); }
.mz-zustand { display: inline-flex; align-items: center; font-weight: 600; border-radius: 999px; padding: .28rem .7rem; }
.mz-bedingung { font-size: .8125rem; color: var(--text-2); }
.mz-link { font-weight: 600; }
.modulzeile--zusatzmodule .mz-zustand { color: var(--text-2); font-weight: 500; padding-left: 0; }
.modulzeile--palettenkonto_web .mz-zustand { background: var(--blau-50); color: var(--blau-800); border: 1px solid var(--blau-200); }
.modulzeile--web_bestaetigungen .mz-zustand { background: var(--indigo-50); color: var(--indigo-800); border: 1px solid var(--indigo-200); }
/* messung.css */
/* messung.css – Fenster zur Einwilligung in die Anzeigen-Messung (teile/messung.njk; B76, B86, B90, K68; AW-15, AW-17).
   Präfix mb-. Vorgeschobenes Fenster (<dialog>, showModal) in der Mitte; die Seite dahinter ist abgedunkelt und gesperrt
   (kein Klick, kein Rollen). Zwei Ebenen im selben Fenster, je mit rollendem Text und festem Knopfbereich: Passt bis
   320 px und 24 px Standardschrift in den Bildschirm, zu langer Text rollt im Fenster, die Knöpfe bleiben sichtbar.
   Knöpfe je Ebene gleich groß; schmal (auch 390 px) untereinander, breit nebeneinander (Container-Abfragen in em).
   Ohne JavaScript bleibt der <dialog> zu; deshalb steht display nur an .mb[open] und an sichtbaren Ebenen. */
.mb { container: mb / inline-size; width: min(40rem, calc(100% - 32px)); max-width: none; max-height: calc(100% - 32px); padding: 0; border: 0; border-radius: var(--r-l); background: var(--weiss); color: var(--text); box-shadow: var(--schatten-2); overflow: hidden; }
.mb[open] { display: flex; flex-direction: column; }
.mb::backdrop { background: var(--abdunkelung); }
/* Fokus beim Öffnen steht auf dem Fenster bzw. dem Titel der zweiten Ebene; beide sind keine Bedienelemente, daher ohne Rahmen */
.mb:focus, .mb-titel:focus { outline: none; }
.mb-ebene:not([hidden]) { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.mb-text { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 24px 24px 8px; font-size: .9375rem; line-height: 1.55; color: var(--text-2); overflow-wrap: break-word; }
.mb-titel { font-size: 1.1875rem; line-height: 1.3; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.mb-knoepfe { flex: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 16px 24px 24px; }
.mb-knoepfe .knopf { width: 100%; min-width: 0; padding-inline: .75rem; overflow-wrap: anywhere; }

/* zweite Ebene: Arten von Speicherung mit Titel und Status bzw. Schalter */
.mb-art { border-top: 1px solid var(--rahmen); padding-top: 14px; margin-top: 14px; }
.mb-art > * + * { margin-top: 6px; }
.mb-art-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mb-art-titel { min-width: 0; font-weight: 700; color: var(--text); }
label.mb-art-titel { cursor: pointer; }
.mb-art code { font-size: .875em; }
/* Schalter: echtes Kontrollkästchen (role="switch") unsichtbar über der gezeichneten Spur, damit Klick und Tastatur wirken */
.mb-schalter-ort { position: relative; flex: none; width: 44px; height: 26px; }
.mb-schalter-feld { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.mb-schalter { position: absolute; inset: 0; border-radius: 13px; background: var(--knopf-rahmen); transition: background-color .15s; }
.mb-schalter::before { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--weiss); box-shadow: var(--schatten-1); transition: transform .15s var(--ease); }
.mb-schalter-feld:checked + .mb-schalter { background: var(--blau); }
.mb-schalter-feld:checked + .mb-schalter::before { transform: translateX(18px); }
.mb-schalter-feld:focus-visible + .mb-schalter { outline: 3px solid var(--blau); outline-offset: 2px; }

/* breiter: erste Ebene zwei Hauptknöpfe nebeneinander, „Einstellungen“ darunter über die volle Breite;
   zweite Ebene drei Knöpfe nebeneinander */
@container mb (min-width: 30em) {
  .mb-text { padding: 32px 32px 8px; }
  .mb-knoepfe { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 20px 32px 32px; }
  .mb-mehr { grid-column: 1 / -1; }
}
@container mb (min-width: 36em) { .mb-knoepfe--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container mb (min-width: 30em) and (max-width: 35.99em) { .mb-knoepfe--drei { grid-template-columns: minmax(0, 1fr); } }

/* Seite hinter dem offenen Fenster rollt nicht (nur am Bildschirm, damit der Druck nichts abschneidet) */
@media screen { :root:has(.mb[open]) { overflow: hidden; } }
/* sanftes Einblenden nur ohne Wunsch nach reduzierter Bewegung; in der ruhigen Fassung keine Bewegung */
@media (prefers-reduced-motion: no-preference) {
  .mb[open], .mb[open]::backdrop { animation: mb-ein .18s ease-out; }
}
@media (prefers-reduced-motion: reduce) { .mb-schalter, .mb-schalter::before { transition: none; } }
@keyframes mb-ein { from { opacity: 0; } }
@media print { .mb, .mb::backdrop { display: none !important; } }
/* Nach der Wahl steht der Fokus am Anfang der Seite (messung.js setzt ihn kurz auf body); ohne Rahmen um die ganze Seite */
body[tabindex="-1"]:focus { outline: none; }