/* Bearbeitungs-Host: Anmeldeseiten, Websiteliste, Hinweisseiten und Hülle des Editors.
   Markup und IDs: apps/sites/src/bearbeiten/oberflaeche.ts (Kopfkommentar). Keine Inline-Stile (CSP); Positionen setzt
   editor.js nur über CSSOM. Farben mit Bedeutung: Blau = bearbeitbar/Fokus, Bernstein = gespeichert, noch nicht
   veröffentlicht, Grün = online/veröffentlichen, Rot = Fehler.
   Werte kommen aus den Tokens von basis.css (Stil „Papier & Stecknadel“, DESIGN.md), die vorher geladen wird; die
   --vs-*-Namen bleiben als Aliase, damit editor*.js und die Regeln unten unverändert bleiben. Die Hülle (body.vs-editor)
   trägt bewusst KEIN .ui (die Grundelemente würden Editor-Knöpfe und Selects verändern); die eigenständigen Seiten
   (body.vs-seite) tragen .ui ui-kunde. */
:root {
  --vs-ink: var(--ui-tinte);
  --vs-ink-deep: var(--ui-tinte-tief);
  --vs-ink-soft: var(--ui-tinte-2);
  --vs-ink-mute: var(--ui-tinte-3);
  --vs-paper: var(--ui-papier);
  --vs-canvas: var(--ui-linie);          /* Bühne hinter dem Rahmen (Handy-Ansicht: weißer Rand hebt sich ab) */
  --vs-white: var(--ui-flaeche);
  --vs-line: var(--ui-linie-2);
  --vs-line-soft: var(--ui-linie);
  --vs-line-feld: var(--ui-linie-feld);  /* Rand von Eingabefeldern (3:1, WCAG 1.4.11) */
  --vs-blau: var(--ui-blau);
  --vs-blau-tief: var(--ui-blau-tief);
  --vs-blau-hell: var(--ui-blau-hell);
  --vs-gruen: var(--ui-gruen);
  --vs-gruen-tief: var(--ui-gruen-tief);
  --vs-gruen-hell: var(--ui-gruen-hell);
  --vs-amber: var(--ui-amber);
  --vs-amber-punkt: var(--ui-amber-punkt);
  --vs-amber-hell: var(--ui-amber-hell);
  --vs-rot: var(--ui-rot);
  --vs-rot-tief: var(--ui-rot-tief);
  --vs-rot-hell: var(--ui-rot-hell);
  --vs-ok-bg: var(--ui-gruen-hell); --vs-ok-fg: var(--ui-gruen-tief); --vs-ok-line: var(--ui-gruen-linie);
  --vs-err-bg: var(--ui-rot-hell); --vs-err-fg: var(--ui-rot-tief); --vs-err-line: var(--ui-rot-linie);
  --vs-info-bg: var(--ui-papier); --vs-info-fg: var(--ui-tinte); --vs-info-line: var(--ui-linie);
  --vs-font: var(--ui-schrift);
  --vs-schatten-ruhe: var(--ui-schatten-1);
  --vs-schatten: var(--ui-schatten-2);
  --vs-schatten-hoch: var(--ui-schatten-3);
  --vs-vv-oben: 0px;     /* sichtbarer Bereich (visualViewport, iPhone-Tastatur), gesetzt von editor.js */
  --vs-vv-unten: 0px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--vs-font); color: var(--vs-ink); background: var(--vs-paper); line-height: 1.5; font-size: 1.0625rem; }
a { color: var(--vs-ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--vs-blau); outline-offset: 2px; }
h1, h2, h3 { line-height: 1.2; letter-spacing: -0.01em; }
p { margin: 0 0 1rem; }
.vs-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.vs-i { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.25em; }
.vs-klein { font-size: 0.9375rem; color: var(--vs-ink-soft); }
.vs-leise { color: var(--vs-ink-mute); }
.vs-nowrap { white-space: nowrap; }
.vs-textknopf { font: inherit; color: var(--vs-ink); background: none; border: 0; padding: 0.25rem 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 2.75rem; }
/* Textknopf mitten im Satz (Hilfe: „Öffnen Sie den Verlauf, …“): so hoch wie die Zeile, sonst hebt die Mindesthöhe von 44 px
   die Zeile an und der Satz bricht mit großer Lücke um. Die Klickfläche wächst unsichtbar per ::after (WCAG 2.5.8 nimmt
   Ziele im Fließtext ohnehin aus). */
.vs-textknopf-satz { min-height: 0; padding: 0; line-height: inherit; vertical-align: baseline; position: relative; }
.vs-textknopf-satz::after { content: ""; position: absolute; inset: -0.625rem -0.25rem; }

/* ---------- Knöpfe ---------- */
.vs-btn {
  font: inherit; font-weight: 600; font-size: 1rem; line-height: 1.2; letter-spacing: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 2.75rem; padding: 0.625rem 1.125rem; border-radius: var(--ui-r-2); border: 1.5px solid var(--vs-ink);
  background: var(--vs-ink); color: #fff; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.vs-btn:hover { background: var(--vs-ink-deep); border-color: var(--vs-ink-deep); text-decoration: none; }
.vs-btn:disabled { cursor: not-allowed; }
.vs-btn-gross { min-height: 3.25rem; font-size: 1.0625rem; padding-inline: 1.5rem; }
.vs-btn-klein { min-height: 2.75rem; padding: 0.5rem 0.875rem; font-size: 0.9375rem; }
.vs-btn-zweit { background: var(--vs-white); color: var(--vs-ink); border-color: var(--vs-line); }
.vs-btn-zweit:hover { background: var(--vs-paper); border-color: var(--vs-ink-soft); }
.vs-btn-live { background: var(--vs-gruen); border-color: var(--vs-gruen); color: #fff; }
.vs-btn-live:hover { background: var(--vs-gruen-tief); border-color: var(--vs-gruen-tief); }
.vs-btn-live:disabled { background: var(--vs-line-soft); border-color: var(--vs-line-soft); color: var(--vs-ink-mute); }
.vs-btn-hell { background: #fff; color: var(--vs-ink); border-color: #fff; }
.vs-btn-hell:hover { background: var(--vs-paper); border-color: var(--vs-paper); }
.vs-btn-rand-hell { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.55); }
.vs-btn-rand-hell:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; }
.vs-btn-gefahr { background: var(--vs-rot); border-color: var(--vs-rot); color: #fff; }
.vs-btn-gefahr:hover { background: var(--vs-rot-tief); border-color: var(--vs-rot-tief); }
.vs-btn-gefahr-leise { background: transparent; color: var(--vs-rot); border-color: transparent; padding-inline: 0.5rem; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.vs-btn-gefahr-leise:hover { background: var(--vs-rot-hell); border-color: var(--vs-rot-hell); }
.vs-btn-gefahr-leise:disabled { color: var(--vs-ink-mute); text-decoration: none; background: transparent; border-color: transparent; }

/* ---------- Banner und Formulare (gemeinsam) ---------- */
.vs-banner { display: flex; gap: 0.625rem; align-items: flex-start; border-radius: var(--ui-r-3); padding: 0.75rem 0.9rem; border: 1px solid transparent; margin: 0 0 1rem; font-size: 0.9875rem; }
.vs-banner .vs-i { margin-top: 0.1em; }
.vs-banner-ok { background: var(--vs-ok-bg); color: var(--vs-ok-fg); border-color: var(--vs-ok-line); }
.vs-banner-fehler { background: var(--vs-err-bg); color: var(--vs-err-fg); border-color: var(--vs-err-line); }
.vs-banner-info { background: var(--vs-info-bg); color: var(--vs-info-fg); border-color: var(--vs-info-line); }
.vs-form { display: grid; gap: 0.625rem; margin: 1.25rem 0; }
.vs-feld { display: block; font-weight: 600; font-size: 1rem; margin: 0; padding: 0; }
.vs-eingabe {
  font: inherit; font-size: 1.0625rem; color: var(--vs-ink); background: var(--vs-white);
  border: 1px solid var(--vs-line-feld); border-radius: var(--ui-r-2); padding: 0.7rem 0.85rem; min-height: 3.125rem; width: 100%;
}
.vs-eingabe:hover { border-color: var(--vs-ink-mute); }
.vs-eingabe:focus-visible, .vs-eingabe:focus { outline: 3px solid var(--vs-blau-hell); border-color: var(--vs-blau); outline-offset: 0; box-shadow: none; }
textarea.vs-eingabe { resize: vertical; line-height: 1.45; }
select.vs-eingabe { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--vs-ink) 50%), linear-gradient(135deg, var(--vs-ink) 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 2.5rem; }
.vs-eingabe-code { font-size: 1.75rem; font-weight: 700; letter-spacing: 0.32em; font-variant-numeric: tabular-nums; max-width: 15rem; text-align: left; padding-left: 1rem; }
.vs-check { display: grid; grid-template-columns: 1.5rem 1fr; gap: 0.75rem; align-items: start; cursor: pointer; line-height: 1.45; }
.vs-check input { width: 1.5rem; height: 1.5rem; margin: 0.05rem 0 0; accent-color: var(--vs-ink); cursor: pointer; }
/* Hinweis unter einem Häkchen, eingerückt auf die Höhe des Texts (1.5rem Kästchen + 0.75rem Abstand). */
.vs-check-hinweis { margin: 0.4rem 0 0 2.25rem; font-size: 0.875rem; line-height: 1.45; }
.vs-bleiben { margin: 0.5rem 0 0.25rem; }
.vs-kontakt-liste { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: 0.4rem; }
.vs-kontakt-liste li { display: flex; gap: 0.5rem; align-items: baseline; }
.vs-kontakt-liste .vs-i { color: var(--vs-ink-mute); align-self: center; }

/* ---------- Eigenständige Seiten ---------- */
body.vs-seite { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.vs-kopf { background: var(--vs-white); border-bottom: 1px solid var(--vs-line-soft); padding-top: env(safe-area-inset-top); }
.vs-kopf-innen, .vs-fuss-innen { width: min(560px, 100% - 2rem); margin-inline: auto; }
/* Kopf: Wortmarke (Baustein ui-marke aus basis.css) und Zusatz auf einer Grundlinie, die Zeile senkrecht mittig */
.vs-kopf-innen { min-height: 3.75rem; display: flex; align-items: baseline; align-content: center; gap: 0.25rem 0.75rem; flex-wrap: wrap; }
.vs-kopf .ui-marke-logo { height: 1.375rem; }
.vs-kopf-zusatz { color: var(--vs-ink-mute); font-size: 0.9375rem; padding-left: 0.75rem; border-left: 1px solid var(--vs-line); }
.vs-main { flex: 1; width: min(560px, 100% - 2rem); margin-inline: auto; padding-block: 2rem 3rem; }
.vs-karte { background: var(--vs-white); border: 1px solid var(--vs-line-soft); border-radius: var(--ui-r-4); padding: 2rem 2rem 1.75rem; box-shadow: var(--vs-schatten-ruhe); }
.vs-karte h1 { font-size: clamp(1.625rem, 5vw, 2rem); margin: 0 0 0.875rem; }
.vs-einleitung { font-size: 1.125rem; color: var(--vs-ink); }
.vs-hinweis-website { display: inline-flex; gap: 0.5rem; align-items: center; background: var(--vs-paper); border-radius: var(--ui-r-voll); padding: 0.35rem 0.85rem 0.35rem 0.7rem; margin: 0 0 1rem; font-size: 0.9375rem; color: var(--vs-ink-soft); max-width: 100%; overflow-wrap: anywhere; }
.vs-hinweis-website strong { color: var(--vs-ink); }
.vs-schritte { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; gap: 0.25rem; align-items: center; font-size: 0.875rem; color: var(--vs-ink-mute); }
.vs-schritt { display: flex; align-items: center; gap: 0.4rem; }
.vs-schritt + .vs-schritt::before { content: ""; width: 1.25rem; height: 1px; background: var(--vs-line); margin-right: 0.25rem; }
.vs-schritt-nr { display: inline-grid; place-items: center; width: 1.625rem; height: 1.625rem; border-radius: 50%; border: 1.5px solid var(--vs-line); font-weight: 700; font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.vs-schritt-nr .vs-i { width: 0.95rem; height: 0.95rem; stroke-width: 2.6; }
.vs-schritt[data-status="jetzt"] { color: var(--vs-ink); font-weight: 600; }
.vs-schritt[data-status="jetzt"] .vs-schritt-nr { background: var(--vs-ink); border-color: var(--vs-ink); color: #fff; }
.vs-schritt[data-status="fertig"] .vs-schritt-nr { background: var(--vs-gruen-hell); border-color: var(--vs-ok-line); color: var(--vs-gruen); }
.vs-form .vs-btn { justify-self: start; margin-top: 0.375rem; }
.vs-entwicklung { background: #fff4c2; border: 2px dashed #b38900; border-radius: var(--ui-r-2); padding: 0.75rem 1rem; margin: 0 0 1rem; }
.vs-entwicklung code { font-size: 1.25rem; font-weight: 700; letter-spacing: 0.15em; }
.vs-hilfe { margin-top: 1.25rem; border-top: 1px solid var(--vs-line-soft); padding-top: 0.25rem; }
.vs-hilfe summary { cursor: pointer; font-weight: 600; min-height: 2.75rem; display: flex; align-items: center; gap: 0.5rem; list-style: none; }
.vs-hilfe summary::-webkit-details-marker { display: none; }
.vs-hilfe summary::before { content: ""; width: 0.5rem; height: 0.5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); margin: 0 0.25rem 0 0.15rem; }
.vs-hilfe[open] summary::before { transform: rotate(45deg); }
.vs-hilfe-inhalt { padding: 0.25rem 0 0.5rem; }
.vs-hilfe .vs-form { margin: 0.5rem 0 1rem; }
.vs-websites { list-style: none; padding: 0; margin: 0 0 1.25rem; display: grid; gap: 0.75rem; }
.vs-website { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.125rem; border: 1px solid var(--vs-line); border-radius: var(--ui-r-3); text-decoration: none; background: var(--vs-white); min-height: 4.5rem; box-shadow: var(--vs-schatten-ruhe); transition: border-color var(--ui-dauer-2) var(--ui-kurve), box-shadow var(--ui-dauer-2) var(--ui-kurve); }
.vs-website:hover { border-color: var(--vs-ink-mute); text-decoration: none; box-shadow: var(--vs-schatten); }
.vs-website-text { display: grid; gap: 0.15rem; min-width: 0; }
.vs-website-name { font-weight: 700; font-size: 1.125rem; }
.vs-website-host { color: var(--vs-ink-mute); overflow-wrap: anywhere; }
.vs-website-aufbau, .vs-website-fassung { justify-self: start; margin-top: 0.15rem; }
.vs-website-los { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; color: var(--vs-ink); white-space: nowrap; }
.vs-angemeldet { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; border-top: 1px solid var(--vs-line-soft); padding-top: 1rem; }
.vs-angemeldet p { margin: 0; }
.vs-fuss { color: var(--vs-ink-soft); font-size: 0.9375rem; padding-bottom: env(safe-area-inset-bottom); }
.vs-fuss-innen { padding-block: 0.5rem 2rem; }
.vs-fuss-fragen { margin: 0 0 0.5rem; color: var(--vs-ink); font-weight: 600; }
.vs-fuss-anbieter { margin: 1rem 0 0.5rem; color: var(--vs-ink-mute); font-size: 0.875rem; }
.vs-fuss-nav { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.vs-fuss-nav a { color: var(--vs-ink-soft); min-height: 2.75rem; display: inline-flex; align-items: center; }
.vs-rechtstext { font-size: 1rem; overflow-wrap: anywhere; } /* lange Adressen (DPA, Unterauftragsverarbeiter) brechen am Handy um */
.vs-rechtstext h1 { font-size: clamp(1.5rem, 4vw, 1.875rem); }
.vs-rechtstext h2 { font-size: 1.1875rem; margin: 2rem 0 0.5rem; }
.vs-rechtstext ul { padding-left: 1.25rem; }
.vs-rechtstext li { margin-bottom: 0.4rem; }
.vs-rechtstext .lead { font-size: 1.0625rem; color: var(--vs-ink-soft); }
.vs-rechtstext ol { padding-left: 1.5rem; }
.vs-rechtstext ol li { margin-bottom: 0.6rem; }
/* Widerspruchsrecht als eigener, abgesetzter Abschnitt (Art. 21 Abs. 4 DSGVO), wie in vorschau.css. */
.vs-rechtstext .legal-hervorgehoben { margin: 2rem 0; padding: 1.125rem 1.125rem 0.25rem; border: 2px solid var(--vs-ink); border-radius: var(--ui-r-3); background: var(--vs-paper); }
.vs-rechtstext .legal-hervorgehoben h2 { margin-top: 0; }
/* ---------- Seite „Besuche“ (seit 11.10.2026; oberflaeche.ts besucheSeite): mehrere Karten untereinander, Zahlen ohne Farbe mit
   Wertung (Balken in Tinte, der laufende Monat leise), Erklärungen als Aufklapper. Bausteine ui-kennzahlen und ui-verteilung aus
   basis.css. ---------- */
.vs-seite-besuche .vs-main { width: min(640px, 100% - 2rem); }
.vs-seite-besuche .vs-karte + .vs-karte { margin-top: 1rem; }
.vs-seite-besuche .vs-karte h2 { font-size: 1.25rem; margin: 0 0 0.75rem; }
.vs-seite-besuche .vs-karte h3 { font-size: 1.0625rem; margin: 0 0 0.375rem; }
.vs-zurueck-zeile { margin: -0.5rem 0 0.5rem; }
.vs-zurueck { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.75rem; font-weight: 600; text-decoration: none; color: var(--vs-ink-soft); }
.vs-zurueck:hover { color: var(--vs-ink); text-decoration: underline; }
.vs-besuche-kennzahlen { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--vs-line-soft); }
.vs-besuche-kennzahlen .ui-kennzahl-label { hyphens: manual; }
.vs-liste-ruhig { margin: 0 0 1rem; padding-left: 1.25rem; }
.vs-liste-ruhig li { margin-bottom: 0.3rem; }
.vs-knopfreihe { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.5rem; }
.vs-form-besuche { margin: 0; }
.vs-monate { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.5rem; }
.vs-monate > li { display: grid; grid-template-columns: 9.5rem minmax(2.5rem, 1fr) 6rem; align-items: center; column-gap: 0.875rem; }
.vs-monat-name { font-size: 0.9375rem; color: var(--vs-ink-soft); white-space: nowrap; }
/* „bis heute“ als zweite Zeile unter dem laufenden Monat: In der Spalte daneben stünde es über dem Balken (Bildschirmfotos 11.10.2026). */
.vs-monat-zusatz { display: block; font-size: 0.8125rem; line-height: 1.2; color: var(--vs-ink-mute); }
.vs-monat-zahl { font-size: 0.9375rem; font-weight: 600; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vs-monat-balken { height: 0.625rem; min-width: 0; }
.vs-monat-laufend .vs-monat-balken::-webkit-progress-value { background: var(--ui-tinte-3); }
.vs-monat-laufend .vs-monat-balken::-moz-progress-bar { background: var(--ui-tinte-3); }
.vs-verteilung { margin: 0.75rem 0 1rem; }
.vs-verteilung .ui-verteilung-label, .vs-verteilung .ui-verteilung-zahl { font-size: 1rem; }
.vs-verteilung-unter { grid-column: 1 / -1; font-size: 0.875rem; color: var(--vs-ink-mute); }
.vs-besuche-handy { display: flex; gap: 0.5rem; align-items: center; margin: 0.5rem 0 0; }
.vs-besuche-handy .vs-i { color: var(--vs-ink-mute); }
.vs-besuche-frage { margin-top: 0; padding-top: 0; }
.vs-besuche-frage + .vs-besuche-frage { margin-top: 0; }
.vs-einstellung + .vs-einstellung { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--vs-line-soft); }
.vs-einstellung p { margin-bottom: 0.75rem; }
@media (max-width: 520px) {
  .vs-seite-besuche .vs-main { width: min(640px, 100% - 1.25rem); }
  .vs-monate > li { grid-template-columns: 7.75rem minmax(2rem, 1fr) 5.25rem; column-gap: 0.5rem; }
  .vs-monat-name, .vs-monat-zahl { font-size: 0.875rem; }
  .vs-knopfreihe .vs-form-besuche, .vs-knopfreihe .vs-btn { width: 100%; }
}

@media (max-width: 520px) {
  .vs-main { padding-block: 1rem 2rem; width: min(560px, 100% - 1.25rem); }
  .vs-karte { padding: 1.25rem 1.125rem 1.125rem; border-radius: 14px; }
  .vs-form .vs-btn { justify-self: stretch; }
  .vs-kopf .ui-marke-logo { height: 1.125rem; }
  .vs-kopf-zusatz { font-size: 0.875rem; }
}

/* ======================================================================================================================
   Hülle des Editors
   ==================================================================================================================== */
html.vs-editor-html, body.vs-editor { height: 100%; }
/* Das Dokument der Hülle rollt nie (seit 12.10.2026): scrollIntoView in einem Panel oder Dialog rollte sonst die ganze Hülle mit. */
html.vs-editor-html { overflow: hidden; }
body.vs-editor { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; font-size: 1rem; background: var(--vs-canvas); }

/* ---------- Obere Leiste ---------- */
.vs-leiste { flex: none; position: relative; z-index: 30; background: var(--vs-white); border-bottom: 1px solid var(--vs-line); padding-top: env(safe-area-inset-top); }
.vs-leiste-reihe { display: flex; align-items: center; gap: 0.75rem; min-height: 3.75rem; padding: 0.5rem max(0.875rem, env(safe-area-inset-right)) 0.5rem max(0.875rem, env(safe-area-inset-left)); }
.vs-leiste-kontext { display: flex; align-items: center; gap: 0.875rem; min-width: 0; flex: 1 1 auto; }
.vs-leiste-name { margin: 0; font-weight: 700; font-size: 1.0625rem; max-width: 18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 0.875rem; border-right: 1px solid var(--vs-line-soft); }
.vs-seitenwahl { display: inline-flex; align-items: center; gap: 0.5rem; min-width: 0; }
.vs-seitenwahl-text { color: var(--vs-ink-mute); font-size: 0.9375rem; }
.vs-seitenwahl select {
  font: inherit; font-weight: 600; font-size: 1rem; color: var(--vs-ink); min-height: 2.75rem; max-width: 16rem; min-width: 0;
  padding: 0.4rem 2.25rem 0.4rem 0.75rem; border: 1px solid var(--vs-line-feld); border-radius: var(--ui-r-2); background-color: var(--vs-white); cursor: pointer;
  appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--vs-ink) 50%), linear-gradient(135deg, var(--vs-ink) 50%, transparent 50%);
  background-position: calc(100% - 18px) 52%, calc(100% - 12px) 52%; background-size: 6px 6px; background-repeat: no-repeat; text-overflow: ellipsis;
}
.vs-seitenwahl select:hover { border-color: var(--vs-ink-mute); }
.vs-leiste-aktion { display: flex; align-items: center; gap: 0.625rem; flex: none; position: relative; }

.vs-status { margin: 0; display: flex; align-items: center; gap: 0.5rem; font-size: 0.9375rem; color: var(--vs-ink-soft); max-width: 25rem; min-height: 2.75rem; white-space: nowrap; }
.vs-status-punkt { width: 0.625rem; height: 0.625rem; border-radius: 50%; flex: none; background: var(--vs-line); box-shadow: 0 0 0 3px var(--vs-line-soft); }
[data-vs-status="ok"] > .vs-status-punkt { background: var(--vs-gruen); box-shadow: 0 0 0 3px var(--vs-gruen-hell); }
[data-vs-status="gespeichert"] > .vs-status-punkt, [data-vs-status="aufbau"] > .vs-status-punkt { background: var(--vs-amber-punkt); box-shadow: 0 0 0 3px var(--vs-amber-hell); }
[data-vs-status="speichert"] > .vs-status-punkt { background: var(--vs-blau); box-shadow: 0 0 0 3px var(--vs-blau-hell); animation: vs-puls 1s ease-in-out infinite alternate; }
.vs-status[data-vs-status="fehler"] { color: var(--vs-rot); font-weight: 600; }
[data-vs-status="fehler"] > .vs-status-punkt { background: var(--vs-rot); box-shadow: 0 0 0 3px var(--vs-rot-hell); }
@media (max-width: 1439px) { .vs-status-zahl { display: none; } }
@keyframes vs-puls { from { opacity: 1; } to { opacity: 0.35; } }
#vs-veroeffentlichen { min-width: 11rem; position: relative; }
/* Fassungsmodus: ohne eigene Änderungen ist nichts „online“ (kein Grün), der Punkt bleibt neutral. */
body[data-vs-fassung] [data-vs-status="ok"] > .vs-status-punkt { background: var(--vs-line); box-shadow: 0 0 0 3px var(--vs-line-soft); }
/* Vor dem Livegang ist „Änderung anfragen“ die Hauptaktion der Leiste (Tinte); gedrückt, solange eine Stelle gewählt wird. */
.vs-knopf-anfragen-haupt[aria-pressed="true"] { background: var(--vs-ink-deep); border-color: var(--vs-ink-deep); box-shadow: inset 0 0 0 2px var(--vs-ink-deep), inset 0 0 0 4px rgba(255, 255, 255, 0.85); }
/* Zahl der nicht abgeschickten Wünsche (Blau: Sie sind dran). */
.vs-zahl-klein { display: inline-grid; place-items: center; min-width: 1.375rem; height: 1.375rem; padding: 0 0.375rem; border-radius: var(--ui-r-voll); background: var(--vs-blau); color: #fff; font-size: 0.75rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.vs-menue-eintrag .vs-zahl-klein { margin-left: auto; }
.vs-werkzeug-knopf[aria-expanded="true"] .vs-zahl-klein { background: #fff; color: var(--vs-ink); }
.vs-zahl { display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.5rem; padding: 0 0.35rem; border-radius: var(--ui-r-voll); background: #fff; color: var(--vs-gruen); font-size: 0.8125rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.vs-werkzeug-knopf {
  font: inherit; font-size: 0.9375rem; font-weight: 550; color: var(--vs-ink); background: transparent; border: 1.5px solid transparent; border-radius: var(--ui-r-2);
  display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.75rem; padding: 0.4rem 0.7rem; cursor: pointer; white-space: nowrap;
}
.vs-werkzeug-knopf:hover { background: var(--vs-white); border-color: var(--vs-line); }
.vs-werkzeug-knopf[aria-pressed="true"], .vs-werkzeug-knopf[aria-expanded="true"] { background: var(--vs-ink); color: #fff; border-color: var(--vs-ink); }
.vs-menue-knopf[aria-expanded="true"], .vs-menue-knopf[aria-expanded="true"]:hover { background: var(--vs-paper); color: var(--vs-ink); border-color: var(--vs-line); }
.vs-leiste-werkzeuge { display: flex; align-items: center; gap: 0.25rem; min-height: 3.25rem; padding: 0.25rem max(0.625rem, env(safe-area-inset-right)) 0.25rem max(0.625rem, env(safe-area-inset-left)); background: var(--vs-paper); border-top: 1px solid var(--vs-line-soft); overflow-x: auto; scrollbar-width: none; }
.vs-trenner { width: 1px; height: 1.5rem; background: var(--vs-line); margin: 0 0.375rem; flex: none; }
.vs-abstand { flex: 1; }
.vs-segment { display: inline-flex; padding: 3px; background: var(--ui-papier-tief); border-radius: var(--ui-r-3); gap: 2px; flex: none; }
.vs-segment button { font: inherit; font-size: 0.9375rem; font-weight: 550; color: var(--vs-ink-soft); background: transparent; border: 0; border-radius: 9px; display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.375rem; padding: 0.3rem 0.7rem; cursor: pointer; }
.vs-segment button:hover { color: var(--vs-ink); }
.vs-segment button[aria-pressed="true"] { background: var(--vs-white); color: var(--vs-ink); box-shadow: 0 1px 2px rgba(23, 34, 48, 0.18); }
/* Umschalter „Neue Fassung“ / „Jetzt online“ (Fassungsmodus): Links, die wie das Segment Computer/Handy aussehen. */
.vs-umschalter a { font: inherit; font-size: 0.9375rem; font-weight: 550; color: var(--vs-ink-soft); text-decoration: none; border-radius: 9px; display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.375rem; padding: 0.3rem 0.7rem; white-space: nowrap; }
.vs-umschalter a:hover { color: var(--vs-ink); text-decoration: none; }
.vs-umschalter a[aria-current="page"] { background: var(--vs-white); color: var(--vs-ink); box-shadow: 0 1px 2px rgba(23, 34, 48, 0.18); }

/* Menü „Mehr“ */
.vs-menue { position: absolute; right: 0; top: calc(100% + 0.5rem); z-index: 40; background: var(--vs-white); border: 1px solid var(--vs-line-soft); border-radius: var(--ui-r-3); padding: 0.5rem; display: grid; gap: 0.125rem; width: 19rem; box-shadow: var(--vs-schatten); }
.vs-menue-eintrag { font: inherit; font-size: 1rem; text-align: left; display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.6rem 0.75rem; min-height: 2.875rem; border: 0; background: transparent; border-radius: var(--ui-r-2); text-decoration: none; color: var(--vs-ink); cursor: pointer; }
.vs-menue-eintrag:hover { background: var(--vs-paper); text-decoration: none; }
.vs-menue-eintrag .vs-i { color: var(--vs-ink-mute); }
.vs-menue-linie { border: 0; border-top: 1px solid var(--vs-line-soft); margin: 0.375rem 0.5rem; }
.vs-menue-wer { margin: 0.25rem 0.75rem 0.125rem; font-size: 0.875rem; color: var(--vs-ink-mute); overflow-wrap: anywhere; }
.vs-menue-wer strong { color: var(--vs-ink-soft); font-weight: 600; }
.vs-menue-recht { margin: 0.25rem 0.75rem 0.25rem; font-size: 0.875rem; color: var(--vs-ink-mute); }
.vs-menue-recht a { color: var(--vs-ink-soft); display: inline-block; padding: 0.4rem 0; }
.vs-menue-status { margin: 0.25rem 0.75rem 0.5rem; font-size: 0.9375rem; color: var(--vs-ink-soft); display: flex; gap: 0.5rem; align-items: center; }
.vs-nur-handy { display: none !important; }
.vs-nur-schmal { display: none; }

/* ---------- Arbeitsfläche ---------- */
.vs-arbeitsflaeche { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
.vs-hinweise { flex: none; }
.vs-hinweis { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.875rem; padding: 0.625rem max(1rem, env(safe-area-inset-left)); font-size: 0.9875rem; border-bottom: 1px solid var(--vs-line); }
.vs-hinweis > p { margin: 0; flex: 1 1 18rem; }
.vs-hinweis > .vs-i { width: 1.375rem; height: 1.375rem; }
.vs-hinweis-schloss { background: var(--vs-white); color: var(--vs-ink); }
.vs-hinweis-schloss > .vs-i { color: var(--vs-ink-mute); }
.vs-hinweis-schloss[data-vs-blink] { animation: vs-hervor 1.6s ease-out; }
.vs-hinweis-markieren { background: var(--vs-blau-hell); color: var(--vs-ink); }
.vs-hinweis-markieren > .vs-i { color: var(--vs-blau); }
.vs-hinweis-markieren strong { font-weight: 650; }
/* „Klicken“ oder „Tippen“ je nach Eingabegerät (wie TOUCH in editor.js). */
@media (hover: none) { .vs-nur-maus { display: none; } }
@media (hover: hover) { .vs-nur-touch { display: none; } }
@keyframes vs-hervor { 0%, 35% { background: var(--vs-blau-hell); box-shadow: inset 0 0 0 2px var(--vs-blau); } 100% { background: var(--vs-white); box-shadow: inset 0 0 0 2px transparent; } }
/* Kundenbereich (seit 12.10.2026, Q&A Frage 111): vor dem Livegang ein ruhiger Hinweis in Bernstein (wartet: Entwurf, noch nicht online);
   nicht abgeschickte Wünsche und Rückfragen in Blau (Sie sind dran). Beim Wählen einer Stelle treten die Wunsch-Hinweise zurück. */
.vs-hinweis-aufbau { background: var(--vs-amber-hell); color: var(--vs-ink); border-bottom-color: var(--ui-amber-linie); }
.vs-hinweis-aufbau > .vs-i { color: var(--vs-amber); }
.vs-hinweis-aufbau strong, .vs-hinweis-wuensche strong { font-weight: 650; }
.vs-hinweis-wuensche { background: var(--vs-blau-hell); color: var(--vs-ink); }
.vs-hinweis-wuensche > .vs-i { color: var(--vs-blau); }
body[data-vs-markieren] .vs-hinweis-wuensche { display: none; }
/* Nächste Fassung (seit 13.10.2026, Phase 2): Leiste in Blau (Sie sind dran: ansehen, noch ändern, freigeben), in der Live-Hülle
   (#vs-fassung-hinweis, „Ansehen“) und in der Fassungshülle (#vs-fassung-leiste mit dem Satz zum Zustand statt eines fehlenden Knopfs). */
.vs-hinweis-fassung { background: var(--vs-blau-hell); color: var(--vs-ink); }
.vs-hinweis-fassung > .vs-i { color: var(--vs-blau); }
.vs-hinweis-fassung strong { font-weight: 650; }
body[data-vs-markieren] #vs-fassung-hinweis { display: none; }
.vs-hinweis-alt { background: var(--vs-ink); color: #fff; border-bottom-color: var(--vs-ink-deep); }
.vs-hinweis-alt strong { font-weight: 700; }
.vs-hinweis-knoepfe { display: inline-flex; gap: 0.5rem; flex-wrap: wrap; }
.vs-hinweis-fehler { background: var(--vs-err-bg); color: var(--vs-err-fg); border-bottom-color: var(--vs-err-line); font-weight: 500; }
.vs-buehne { flex: 1; min-height: 0; display: flex; position: relative; }
.vs-rahmen-huelle { flex: 1; min-width: 0; display: flex; justify-content: center; overflow: auto; -webkit-overflow-scrolling: touch; position: relative; }
.vs-rahmen { display: block; border: 0; width: 1px; min-width: 100%; height: 100%; background: var(--vs-white); }
body[data-vs-ansicht="handy"] .vs-rahmen-huelle { padding: 1.25rem 1rem; }
body[data-vs-ansicht="handy"] .vs-rahmen { min-width: 0; width: 390px; max-width: 100%; border-radius: 22px; box-shadow: 0 0 0 1px rgba(23, 34, 48, 0.14), 0 0 0 8px #fff, 0 0 0 9px rgba(23, 34, 48, 0.12), var(--vs-schatten); }
body[data-vs-modus="alt"] .vs-rahmen-huelle { box-shadow: inset 0 0 0 4px var(--vs-ink); }

/* Vorschau-Pille */
.vs-vorschau-hinweis { position: fixed; left: 50%; bottom: calc(1rem + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 35; display: flex; align-items: center; gap: 0.75rem; background: var(--vs-ink); color: #fff; border-radius: var(--ui-r-voll); padding: 0.375rem 0.375rem 0.375rem 1.125rem; box-shadow: var(--vs-schatten-hoch); font-size: 0.9875rem; max-width: calc(100vw - 1.5rem); }
.vs-vorschau-hinweis .vs-btn { border-radius: var(--ui-r-voll); }
.vs-vorschau-text strong { font-weight: 650; }

/* ---------- Seitenpanel „Alle Inhalte“ ---------- */
.vs-panel { flex: none; width: 26rem; background: var(--vs-white); border-left: 1px solid var(--vs-line); display: flex; flex-direction: column; min-height: 0; }
.vs-panel-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 0.875rem 0.75rem 0.75rem 1.25rem; border-bottom: 1px solid var(--vs-line-soft); }
.vs-panel-kopf h2 { font-size: 1.1875rem; margin: 0.35rem 0 0.1rem; }
.vs-panel-seite { margin: 0; font-size: 0.9375rem; color: var(--vs-ink-mute); }
.vs-panel-inhalt { flex: 1; overflow: auto; padding: 0.25rem 1.25rem 2rem; overscroll-behavior: contain; }
.vs-panel-gruppe { padding-top: 1rem; }
.vs-panel-gruppe > h3 { font-size: 0.9375rem; font-weight: 700; color: var(--vs-ink-soft); margin: 0 0 0.625rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--vs-line-soft); }
.vs-panel-feld { display: grid; gap: 0.35rem; margin-bottom: 1rem; }
.vs-panel-feld-kopf { display: flex; align-items: center; gap: 0.5rem; min-height: 1.75rem; }
.vs-panel-label { font-weight: 600; font-size: 0.9375rem; flex: 1; cursor: pointer; }
.vs-panel-label:hover { color: var(--vs-blau-tief); }
.vs-geaendert-punkt { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--vs-amber-punkt); flex: none; }
.vs-panel-zurueck { font: inherit; font-size: 0.875rem; color: var(--vs-ink-soft); background: none; border: 0; padding: 0.25rem 0.25rem; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; min-height: 2rem; }
.vs-textfeld { font: inherit; font-size: 1rem; line-height: 1.45; color: var(--vs-ink); background: var(--vs-white); border: 1px solid var(--vs-line-feld); border-radius: var(--ui-r-2); padding: 0.55rem 0.7rem; min-height: 2.875rem; white-space: pre-wrap; overflow-wrap: anywhere; cursor: text; }
.vs-textfeld:hover { border-color: var(--vs-ink-mute); }
.vs-textfeld:focus { outline: 3px solid var(--vs-blau-hell); border-color: var(--vs-blau); }
.vs-textfeld[data-vs-fehler] { border-color: var(--vs-rot); outline-color: var(--vs-rot-hell); }
.vs-textfeld a { color: var(--vs-blau-tief); }
.vs-panel-feld[data-vs-geaendert] .vs-textfeld { border-color: #e6b766; background: #fffcf6; }
.vs-panel-bild, .vs-panel-link { display: flex; align-items: center; gap: 0.75rem; background: var(--vs-paper); border-radius: var(--ui-r-2); padding: 0.5rem; }
.vs-panel-bild img { width: 5.5rem; height: 4rem; object-fit: cover; border-radius: 6px; background: var(--vs-line-soft); flex: none; }
.vs-panel-bild span, .vs-panel-link-text { flex: 1; min-width: 0; font-size: 0.9375rem; color: var(--vs-ink-soft); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.vs-panel-link-text strong { color: var(--vs-ink); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vs-panel-unsichtbar { font-size: 0.8125rem; color: var(--vs-ink-mute); }
.vs-panel-liste { display: flex; gap: 0.625rem; align-items: flex-start; background: var(--vs-blau-hell); border-radius: var(--ui-r-3); padding: 0.75rem 0.875rem; margin: -0.25rem 0 1.25rem; font-size: 0.9375rem; }
.vs-panel-liste p { margin: 0 0 0.25rem; }
.vs-panel-liste .vs-textknopf { min-height: 2.75rem; font-weight: 600; }
.vs-panel-liste > .vs-i { color: var(--vs-blau); margin-top: 0.1rem; }

/* ---------- Kundenbereich: Panels „Ihre Wünsche“ und „Fotos“, Fotoauswahl (seit 12.10.2026, Q&A Frage 111) ----------
   Gleiches Gerüst wie „Alle Inhalte“ (.vs-panel: rechts neben der Website, unter 1100 px darüber, am Handy ein Blatt von unten), dazu ein
   Fuß mit der Hauptaktion („Wünsche abschicken“). Karten ohne Schatten auf Weiß (keine Karte in der Karte), Stand als Pill mit Wort. */
.vs-panel-fuss { flex: none; display: grid; gap: 0.5rem; padding: 0.875rem 1.25rem calc(1rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--vs-line-soft); background: var(--vs-white); }
.vs-panel-fuss .vs-klein { margin: 0; font-size: 0.875rem; }
.vs-btn-voll { width: 100%; }
.vs-panel-kopf h2:focus { outline: none; }
.vs-wunsch-gruppe { padding-top: 1rem; }
.vs-wunsch-gruppe > h3, .vs-fotos-abschnitt > h3 { font-size: 0.9375rem; font-weight: 700; color: var(--vs-ink-soft); margin: 0 0 0.625rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--vs-line-soft); }
.vs-wunsch-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.625rem; }
.vs-wunsch { display: grid; gap: 0.375rem; padding: 0.75rem 0.875rem; border: 1px solid var(--vs-line-soft); border-radius: var(--ui-r-3); background: var(--vs-white); }
.vs-wunsch[data-status="entwurf"] { border-color: var(--vs-line); box-shadow: inset 3px 0 0 var(--vs-blau); }
.vs-wunsch p { margin: 0; }
.vs-wunsch-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.625rem; }
.vs-wunsch-stelle { font-weight: 650; font-size: 0.9375rem; overflow-wrap: anywhere; }
.vs-wunsch-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.9875rem; line-height: 1.5; }
.vs-wunsch-meta { font-size: 0.875rem; color: var(--vs-ink-mute); }
.vs-wunsch-knoepfe { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.25rem; }
.vs-wunsch-antwort { background: var(--vs-paper); border-radius: var(--ui-r-2); padding: 0.625rem 0.75rem; display: grid; gap: 0.2rem; }
.vs-wunsch[data-status="rueckfrage"] .vs-wunsch-antwort { background: var(--vs-blau-hell); }
/* Seit Phase 2: beantwortete Rückfrage (ich bin dran, nichts mehr in Blau), Antwort des Kunden, umgesetzt in der neuen Fassung (Blau: ansehen). */
.vs-wunsch[data-vs-beantwortet] .vs-wunsch-antwort { background: var(--vs-paper); }
.vs-wunsch .vs-wunsch-fassung { background: var(--vs-blau-hell); }
.vs-wunsch-fassung a { font-weight: 650; }
.vs-wunsch-antwort p { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.9375rem; }
.vs-wunsch-antwort-titel { font-weight: 650; font-size: 0.875rem !important; }
.vs-daumen { list-style: none; margin: 0.125rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.375rem; }
.vs-daumen img { display: block; width: 3.5rem; height: 3.5rem; object-fit: cover; border-radius: 6px; background: var(--vs-line-soft); }
.vs-leer-zustand { display: grid; justify-items: center; gap: 0.5rem; text-align: center; padding: 2rem 0.5rem; color: var(--vs-ink-soft); }
.vs-leer-zustand > .vs-i { width: 2.25rem; height: 2.25rem; color: var(--vs-ink-mute); }
.vs-leer-zustand p { margin: 0; max-width: 20rem; }
.vs-leer-titel { font-weight: 650; color: var(--vs-ink); font-size: 1.0625rem; }
.vs-leer-zustand .vs-btn { margin-top: 0.5rem; }

/* Fotoauswahl (Wunsch-Dialog und Panel „Fotos“): je Foto Vorschau, „Wofür?“, Entfernen; davor der Rahmen, dann das Pflicht-Häkchen. */
.vs-anhang { margin-top: 1.25rem; padding-top: 0.875rem; border-top: 1px solid var(--vs-line-soft); }
.vs-dialog .vs-anhang-titel { font-size: 1rem; margin: 0 0 0.625rem; }
.vs-anhang-liste { list-style: none; margin: 0 0 0.75rem; padding: 0; display: grid; gap: 0.5rem; }
.vs-anhang-eintrag { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto; gap: 0.75rem; align-items: center; padding: 0.5rem; background: var(--vs-paper); border-radius: var(--ui-r-3); }
.vs-anhang-eintrag img { display: block; width: 4.5rem; height: 4.5rem; object-fit: cover; border-radius: 6px; background: var(--vs-line-soft); }
.vs-anhang-felder { display: grid; gap: 0.25rem; min-width: 0; font-size: 0.9375rem; }
.vs-feld-klein { font-weight: 600; font-size: 0.875rem; }
.vs-eingabe-klein { min-height: 2.75rem; padding: 0.45rem 0.65rem; font-size: 1rem; }
.vs-anhang-name { font-size: 0.8125rem; color: var(--vs-ink-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-anhang-weg { align-self: start; }
.vs-anhang .vs-foto-waehlen { margin-bottom: 0.25rem; }
.vs-rechte { margin-top: 1rem; }
.vs-rechte-rahmen { margin: 0 0 0.75rem; font-size: 0.9375rem; line-height: 1.5; color: var(--vs-ink-soft); }
.vs-rechte .vs-pflicht-kasten { margin-top: 0; }
.vs-dw-liste-hinweis { margin-top: 1rem !important; }

/* Panel „Fotos“: Karte „Fotos Ihrer bisherigen Website“, Hochladen, Fotokiste. */
.vs-fotos-karte { margin: 1rem 0 0; padding: 1rem 1rem 1.125rem; border: 1px solid var(--vs-line); border-radius: var(--ui-r-3); background: var(--vs-white); }
.vs-fotos-karte h3 { margin: 0 0 0.375rem; font-size: 1.0625rem; }
.vs-fotos-karte p { margin: 0 0 0.75rem; }
.vs-altfotos-stand { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0 !important; font-size: 0.9375rem; color: var(--vs-ink-soft); }
.vs-fotos-abschnitt { padding-top: 1.25rem; }
.vs-fotos-abschnitt .vs-foto-waehlen { margin-bottom: 0.75rem; }
#vs-fk-hochladen { margin-top: 0.75rem; }
.vs-kiste { list-style: none; margin: 0.75rem 0 0; padding: 0; display: grid; gap: 0.625rem; }
.vs-kiste-foto { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: 0.25rem 0.75rem; align-items: start; padding: 0.5rem; border: 1px solid var(--vs-line-soft); border-radius: var(--ui-r-3); }
.vs-kiste-foto img { display: block; width: 5rem; height: 5rem; object-fit: cover; border-radius: 6px; background: var(--vs-line-soft); grid-row: span 2; }
.vs-kiste-text { display: grid; gap: 0.15rem; min-width: 0; }
.vs-kiste-text p { margin: 0; }
.vs-kiste-notiz { font-weight: 600; font-size: 0.9375rem; overflow-wrap: anywhere; }
.vs-kiste-meta, .vs-kiste-frist { font-size: 0.875rem; color: var(--vs-ink-mute); }
.vs-kiste-stand { margin-top: 0.2rem !important; }
.vs-kiste-weg { grid-column: 2; justify-self: start; min-height: 2.5rem; padding-inline: 0.375rem; font-size: 0.875rem; }
.vs-kiste-weg .vs-i { width: 1.05em; height: 1.05em; }

/* ---------- Werkzeugleiste beim Bearbeiten ---------- */
.vs-werkzeug { position: fixed; z-index: 45; top: 0; left: 0; background: var(--vs-ink); color: #fff; border-radius: var(--ui-r-3); padding: 0.3rem; box-shadow: var(--vs-schatten-hoch); max-width: calc(100vw - 1rem); }
.vs-werkzeug-reihe { display: flex; align-items: center; gap: 0.2rem; }
.vs-werkzeug-reihe button { font: inherit; font-size: 0.9375rem; display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.75rem; min-width: 2.75rem; padding: 0 0.75rem; border: 0; border-radius: 8px; background: transparent; color: #fff; cursor: pointer; white-space: nowrap; }
.vs-werkzeug-reihe button:hover { background: rgba(255, 255, 255, 0.14); }
.vs-werkzeug-reihe button[aria-pressed="true"] { background: rgba(255, 255, 255, 0.24); }
.vs-werkzeug-reihe button:disabled { opacity: 0.45; cursor: default; background: transparent; }
.vs-werkzeug-reihe .vs-werkzeug-fertig { background: #fff; color: var(--vs-ink); font-weight: 650; margin-left: 0.15rem; }
.vs-werkzeug-reihe .vs-werkzeug-fertig:hover { background: var(--vs-paper); }
.vs-werkzeug-trenner { width: 1px; height: 1.5rem; background: rgba(255, 255, 255, 0.25); margin: 0 0.2rem; }
.vs-werkzeug :focus-visible { outline: 3px solid #9ebcf5; outline-offset: 1px; }
.vs-werkzeug-hinweis { margin: 0.25rem 0.5rem 0.35rem; font-size: 0.875rem; line-height: 1.4; color: #dbe2ea; max-width: 30rem; text-wrap: pretty; }
.vs-werkzeug-hinweis button { font: inherit; font-weight: 600; color: #fff; background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.vs-werkzeug-pflicht, .vs-werkzeug-lang { color: #ffd2cc; font-weight: 600; }
/* Speicherstand in der Werkzeugleiste: nur am Handy, wo sie die obere Leiste mit dem Status verdeckt. */
.vs-werkzeug-status { display: none; }

/* ---------- Dialoge ---------- */
.vs-dialog { border: 0; padding: 0; border-radius: var(--ui-r-4); width: min(34rem, 100vw - 2rem); max-height: min(48rem, 100dvh - 3rem); color: var(--vs-ink); background: var(--vs-white); box-shadow: var(--vs-schatten-hoch); overflow: hidden; }
.vs-dialog[open] { display: flex; flex-direction: column; }
.vs-dialog-breit { width: min(40rem, 100vw - 2rem); }
.vs-dialog-schmal { width: min(28rem, 100vw - 2rem); }
.vs-dialog::backdrop { background: rgba(23, 34, 48, 0.5); }
.vs-dialog-form { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.vs-dialog-kopf { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.875rem 0.75rem 0.5rem 1.5rem; }
.vs-dialog-kopf h2 { margin: 0; font-size: 1.375rem; }
.vs-dialog-kopf h2:focus { outline: none; }
.vs-dialog-rumpf { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 0.5rem 1.5rem 1rem; overscroll-behavior: contain; }
.vs-dialog-rumpf > .vs-feld { margin-top: 1rem; margin-bottom: 0.4rem; }
.vs-dialog-rumpf > .vs-feld:first-child, .vs-dialog-rumpf > input[type="hidden"] + .vs-feld, .vs-dialog-rumpf > .vs-bezug + .vs-feld, .vs-dialog-rumpf > .vs-andere-stelle + .vs-feld, .vs-dialog-rumpf > [hidden] + .vs-feld { margin-top: 0.25rem; }
.vs-dialog-rumpf > .vs-klein { margin: 0.4rem 0 0; }
.vs-dialog-fuss { flex: none; display: flex; flex-wrap: wrap; gap: 0.625rem; padding: 0.875rem 1.5rem calc(1.125rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--vs-line-soft); background: var(--vs-white); }
.vs-dialog-fuss-trenn { justify-content: flex-start; }
/* Lange leise Gefahrknöpfe („Meine Änderungen in dieser Fassung verwerfen“) dürfen am Handy umbrechen statt über den Rand zu laufen. */
.vs-dialog-fuss .vs-btn-gefahr-leise { white-space: normal; }
.vs-dialog-zu { font: inherit; display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%; background: transparent; color: var(--vs-ink-soft); cursor: pointer; flex: none; }
.vs-dialog-zu:hover { background: var(--vs-paper); color: var(--vs-ink); }
.vs-dialog-zu .vs-i { width: 1.375rem; height: 1.375rem; }
.vs-dialog h3 { font-size: 1.0625rem; margin: 1.5rem 0 0.5rem; }
.vs-verantwortung { font-size: 0.9375rem; color: var(--vs-ink-soft); margin: 1rem 0 0; }
.vs-bezug { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--vs-blau-hell); color: var(--vs-blau-tief); border-radius: var(--ui-r-voll); padding: 0.3rem 0.8rem; font-size: 0.9375rem; font-weight: 600; margin: 0 0 1rem; }
/* „Andere Stelle wählen“ (nach dem Wählen einer Stelle) als leiser Textknopf direkt unter dem Betreff. */
.vs-andere-stelle { display: block; margin: -0.75rem 0 0; font-size: 0.9375rem; }
.vs-kontakt { padding: 0.875rem 1.5rem calc(0.75rem + env(safe-area-inset-bottom)); background: var(--vs-paper); border-top: 1px solid var(--vs-line-soft); font-size: 0.9375rem; }
.vs-kontakt .vs-klein { margin: 0 0 0.4rem; }
.vs-kontakt .vs-kontakt-liste { margin: 0; }
/* Störungshinweis unter der Kontaktliste (Hilfe und „Nachricht schreiben“, Q&A Frage 73): gehört zur Liste, deshalb dicht darunter. */
.vs-kontakt-liste + .vs-kontakt-stoerung { margin: -0.5rem 0 0; }
.vs-kontakt .vs-kontakt-liste + .vs-kontakt-stoerung { margin: 0.4rem 0 0; }
.vs-einleitung-klein { font-size: 1.0625rem; }
/* Paketumfang (Q&A Frage 81): was im Vertrag des Kunden enthalten ist und was Zusatzarbeit kostet, im Dialog „Nachricht schreiben“
   unter dem Eingabefeld und in der Hilfe. Ein Blatt auf Papier ohne Bedeutungsfarbe (Information, kein Status, kein Knopf); der
   Hinweis auf die Betreuung (nur Hosting) und der Link zur Leistungsbeschreibung leise. Wortlaut aus laufendUmfang (@wl/legal). */
.vs-umfang { margin: 1rem 0 0; padding: 0.875rem 1rem; border-radius: var(--ui-r-3); background: var(--vs-paper); font-size: 0.9375rem; line-height: 1.5; }
.vs-umfang p { margin: 0; }
.vs-umfang p + p { margin-top: 0.5rem; }
.vs-umfang-titel { font-weight: 650; }
.vs-umfang-leise { color: var(--vs-ink-soft); }
.vs-dialog h3 + .vs-umfang { margin-top: 0.5rem; }
.vs-umfang + .vs-hilfe-knopf { margin-top: 1rem; }

/* Erfolg */
.vs-erfolg { padding: 1rem 1.5rem 1.75rem; text-align: center; display: grid; justify-items: center; gap: 0.75rem; }
.vs-erfolg-zeichen { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--vs-gruen-hell); color: var(--vs-gruen); }
.vs-erfolg-zeichen .vs-i { width: 1.875rem; height: 1.875rem; stroke-width: 2.4; }
.vs-erfolg-titel { font-size: 1.1875rem; font-weight: 650; margin: 0; max-width: 24rem; }
.vs-erfolg-knoepfe { display: flex; flex-wrap: wrap; gap: 0.625rem; justify-content: center; margin-top: 0.5rem; }

/* Änderungsliste */
.vs-aenderungsliste { list-style: none; padding: 0; margin: 0.5rem 0 0; display: grid; gap: 0.5rem; }
.vs-aenderung { border: 1px solid var(--vs-line-soft); border-radius: var(--ui-r-3); padding: 0.7rem 0.875rem; display: grid; gap: 0.3rem; }
.vs-aenderung-label { font-weight: 650; font-size: 0.9375rem; }
/* Ausschnitt um die Änderung (editor-verlauf.js): Kontext normal, alt durchgestrichen auf Rot, neu fett auf Grün. */
.vs-aenderung-alt, .vs-aenderung-neu { margin: 0; font-size: 0.9375rem; line-height: 1.5; overflow-wrap: anywhere; }
.vs-aenderung-alt { color: var(--vs-ink-mute); }
.vs-aenderung-alt::before { content: "bisher: "; font-weight: 650; }
.vs-aenderung-neu { color: var(--vs-ink); }
.vs-aenderung-neu::before { content: "neu: "; color: var(--vs-gruen); font-weight: 650; }
.vs-aenderung del { text-decoration: line-through; text-decoration-color: rgba(143, 36, 36, 0.7); background: var(--vs-rot-hell); color: var(--vs-err-fg); border-radius: 3px; padding: 0.05em 0.2em; }
.vs-aenderung ins { text-decoration: none; background: var(--vs-gruen-hell); color: var(--vs-gruen-tief); font-weight: 650; border-radius: 3px; padding: 0.05em 0.2em; }
.vs-aenderung-weg { color: var(--vs-ink-mute); font-style: italic; }
.vs-aenderung-info { margin: 0; font-size: 0.9375rem; color: var(--vs-ink-soft); overflow-wrap: anywhere; }
.vs-aenderung-bilder { display: flex; align-items: center; gap: 0.625rem; }
.vs-aenderung-bilder img { width: 5rem; height: 3.75rem; object-fit: cover; border-radius: 6px; background: var(--vs-line-soft); }
.vs-aenderung-bilder .vs-i { color: var(--vs-ink-mute); }
.vs-aenderung-bilder img:first-child { opacity: 0.6; }
/* K8 (Phase 2): Stellen, an denen online mein neuerer Stand bleibt; die Änderung des Kunden bleibt gespeichert (Bernstein: wartet). */
.vs-dv-inzwischen { margin: 1rem 0 0; padding: 0.75rem 0.875rem; border-radius: var(--ui-r-3); background: var(--vs-amber-hell); border: 1px solid var(--ui-amber-linie); font-size: 0.9375rem; line-height: 1.5; }
.vs-dv-inzwischen p { margin: 0; }
.vs-dv-fassung { display: flex; gap: 0.5rem; align-items: flex-start; margin: 1rem 0 0; padding: 0.75rem 0.875rem; border-radius: var(--ui-r-3); background: var(--vs-blau-hell); font-size: 0.9375rem; line-height: 1.5; }
.vs-dv-fassung .vs-i { color: var(--vs-blau); margin-top: 0.1rem; }
.vs-erfolg-zusatz { max-width: 26rem; margin: 0; }

/* Nächste Fassung: Freigabedialog, „Was ist neu?“, Angaben (Phase 2). Listen ruhig mit Punkt; Konflikte und Arbeitsstand nur zur
   Information auf Papier (keine Wahl, K8), „Die neue Fassung wird gerade aktualisiert“ in Bernstein (wartet auf mich). */
.vs-fg-abschnitt { margin: 0 0 1rem; }
#vs-dialog-freigabe h3 { font-size: 1rem; margin: 0.25rem 0 0.5rem; }
.vs-fassung-was { margin: 0 0 0.5rem; padding-left: 1.25rem; display: grid; gap: 0.3rem; line-height: 1.45; }
.vs-fg-info { background: var(--vs-paper); border-radius: var(--ui-r-3); padding: 0.75rem 0.875rem; font-size: 0.9375rem; line-height: 1.5; margin: 0 0 1rem; }
.vs-fg-info p { margin: 0; }
.vs-fg-info p + ul, .vs-fg-info ul + p { margin-top: 0.5rem; }
.vs-fg-wartet { background: var(--vs-amber-hell); border: 1px solid var(--ui-amber-linie); }
.vs-konflikte { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.vs-konflikt { background: var(--vs-white); border: 1px solid var(--vs-line-soft); border-radius: var(--ui-r-2); padding: 0.5rem 0.625rem; display: grid; gap: 0.2rem; }
.vs-konflikt p { margin: 0; }
.vs-konflikt-label { font-weight: 650; }
.vs-konflikt-wert { display: grid; grid-template-columns: 7.25rem minmax(0, 1fr); gap: 0.125rem 0.5rem; align-items: start; overflow-wrap: anywhere; }
.vs-konflikt-wo { color: var(--vs-ink-mute); }
.vs-konflikt-inhalt { display: flex; align-items: flex-start; gap: 0.5rem; min-width: 0; }
.vs-konflikt-wert img { flex: none; width: 3rem; height: 2.25rem; object-fit: cover; border-radius: 4px; background: var(--vs-line-soft); }
.vs-konflikt-text { min-width: 0; }
.vs-wn-stand { color: var(--vs-ink-soft); font-size: 0.9375rem; margin: 0 0 0.75rem; }
.vs-wn-fragen { margin: 1rem 0 0; }
.vs-angaben-liste { margin: 0.5rem 0 1rem; padding-left: 1.75rem; display: grid; gap: 0.35rem; line-height: 1.45; }

/* Verlauf */
.vs-versionsliste { list-style: none; padding: 0; margin: 0.75rem 0 0; display: grid; gap: 0.625rem; }
.vs-version { border: 1px solid var(--vs-line-soft); border-radius: var(--ui-r-3); padding: 0.75rem 0.875rem; display: grid; gap: 0.35rem; }
.vs-version[data-aktuell] { border-color: var(--vs-ok-line); background: #f7fbf8; }
.vs-version-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.625rem; }
.vs-version-zeit { font-weight: 650; }
.vs-version-von { color: var(--vs-ink-soft); font-size: 0.9375rem; }
.vs-version-online { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8125rem; font-weight: 650; color: var(--vs-gruen); background: var(--vs-gruen-hell); border-radius: var(--ui-r-voll); padding: 0.15rem 0.6rem; }
.vs-version-online::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: currentColor; }
.vs-version-notiz { margin: 0; font-size: 0.9375rem; color: var(--vs-ink-soft); overflow-wrap: anywhere; }
/* K5: Version vor einer neuen Fassung mit anderem Aufbau (Wiederherstellen ändert nur Texte und Fotos). */
.vs-version-hinweis { margin: 0; font-size: 0.875rem; line-height: 1.45; color: var(--vs-ink-soft); background: var(--vs-paper); border-radius: var(--ui-r-2); padding: 0.4rem 0.6rem; }
.vs-version-knoepfe { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.25rem; }
.vs-leer { color: var(--vs-ink-mute); padding: 1rem 0; }

/* Link-Dialog */
.vs-link-arten { border: 0; padding: 0; margin: 1.25rem 0 0; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.vs-link-arten legend { margin-bottom: 0.5rem; }
#vs-link-text-block[hidden] + .vs-link-arten { margin-top: 0.25rem; }
.vs-art { position: relative; display: flex; align-items: center; gap: 0.6rem; min-height: 3.25rem; padding: 0.5rem 0.75rem; border: 1.5px solid var(--vs-line); border-radius: var(--ui-r-3); cursor: pointer; font-weight: 550; line-height: 1.25; }
.vs-art:hover { border-color: var(--vs-ink-mute); }
.vs-art input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.vs-art .vs-i { color: var(--vs-ink-mute); }
.vs-art:has(input:checked) { border-color: var(--vs-blau); background: var(--vs-blau-hell); box-shadow: inset 0 0 0 1px var(--vs-blau); }
.vs-art:has(input:checked) .vs-i { color: var(--vs-blau); }
.vs-art:has(input:focus-visible) { outline: 3px solid var(--vs-blau); outline-offset: 2px; }
.vs-link-ziel { margin-top: 1rem; }
.vs-link-ziel .vs-feld { margin-bottom: 0.4rem; }
.vs-link-ziel .vs-klein { margin: 0.4rem 0 0; }
.vs-auch-liste { margin: 0.5rem 0 0; padding-left: 1.25rem; display: grid; gap: 0.3rem; }
.vs-link-gebunden { margin: 0.5rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.5rem; }
.vs-link-gebunden .vs-textknopf { font-weight: 600; }
#vs-link-fehler { margin: 1rem 0 0; }

/* Foto-Dialog */
.vs-foto-vorschau:not(:empty) { display: flex; justify-content: center; background: var(--vs-paper); border-radius: 10px; padding: 0.5rem; margin-bottom: 1rem; }
.vs-foto-vorschau img { max-width: 100%; max-height: 14rem; display: block; border-radius: 6px; object-fit: contain; }
.vs-zuschnitt-bereich { margin-bottom: 1rem; }
.vs-zuschnitt { position: relative; overflow: hidden; margin: 0 auto; border-radius: 8px; background: #1b2530; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.vs-zuschnitt:active { cursor: grabbing; }
.vs-zuschnitt[data-ganz] { cursor: default; }
.vs-zuschnitt::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.85); border-radius: 8px;
  background: linear-gradient(to right, transparent calc(33.33% - 0.5px), rgba(255, 255, 255, 0.35) calc(33.33% - 0.5px), rgba(255, 255, 255, 0.35) calc(33.33% + 0.5px), transparent calc(33.33% + 0.5px), transparent calc(66.66% - 0.5px), rgba(255, 255, 255, 0.35) calc(66.66% - 0.5px), rgba(255, 255, 255, 0.35) calc(66.66% + 0.5px), transparent calc(66.66% + 0.5px)),
              linear-gradient(to bottom, transparent calc(33.33% - 0.5px), rgba(255, 255, 255, 0.35) calc(33.33% - 0.5px), rgba(255, 255, 255, 0.35) calc(33.33% + 0.5px), transparent calc(33.33% + 0.5px), transparent calc(66.66% - 0.5px), rgba(255, 255, 255, 0.35) calc(66.66% - 0.5px), rgba(255, 255, 255, 0.35) calc(66.66% + 0.5px), transparent calc(66.66% + 0.5px)); }
.vs-zuschnitt[data-ganz]::after { background: none; }
.vs-zuschnitt img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; pointer-events: none; -webkit-user-drag: none; }
.vs-zuschnitt-tipp { text-align: center; font-size: 0.9375rem; color: var(--vs-ink-soft); margin: 0.5rem 0 0.25rem; }
.vs-zoom-zeile { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; justify-content: center; }
.vs-zoom-zeile input[type="range"] { flex: 1 1 8rem; max-width: 16rem; accent-color: var(--vs-ink); min-height: 2.75rem; }
.vs-rund { font: inherit; display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1.5px solid var(--vs-line); background: var(--vs-white); color: var(--vs-ink); cursor: pointer; }
.vs-rund:hover { border-color: var(--vs-ink-mute); }
.vs-rund:disabled, .vs-zoom-zeile input:disabled { opacity: 0.4; cursor: default; }
.vs-foto-waehlen { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-bottom: 0.25rem; }
.vs-foto-waehlen .vs-klein { margin: 0; flex: 1 1 12rem; }
.vs-datei-knopf { cursor: pointer; }
.vs-datei { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.vs-datei:focus-visible + .vs-klein, .vs-foto-waehlen:has(.vs-datei:focus-visible) .vs-datei-knopf { outline: 3px solid var(--vs-blau); outline-offset: 2px; }
.vs-pflicht-kasten { margin-top: 1.25rem; border: 1.5px solid var(--vs-ink); border-radius: var(--ui-r-3); padding: 0.875rem 1rem; background: var(--vs-paper); font-size: 0.9875rem; }
.vs-fortschritt { display: flex; align-items: center; gap: 0.75rem; margin-top: 1rem; font-size: 0.9375rem; color: var(--vs-ink-soft); }
.vs-fortschritt progress { flex: 1; height: 0.625rem; accent-color: var(--vs-gruen); }
#vs-foto-fehler { margin: 1rem 0 0; }

/* Hilfe */
.vs-hilfe-schritte { list-style: none; padding: 0; margin: 0.25rem 0 0.5rem; display: grid; gap: 0.75rem; }
.vs-hilfe-schritte li { display: flex; gap: 0.875rem; align-items: flex-start; }
.vs-hilfe-schritte p { margin: 0.2rem 0 0; font-size: 1.0625rem; }
.vs-hilfe-nr { display: inline-grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: 50%; background: var(--vs-ink); color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Hinweise beim ersten Besuch */
.vs-tour { position: fixed; z-index: 50; left: 1.25rem; bottom: calc(1.25rem + env(safe-area-inset-bottom)); width: min(24rem, 100vw - 2rem); background: var(--vs-ink); color: #fff; border-radius: var(--ui-r-4); padding: 1rem 1.25rem 1.25rem; box-shadow: var(--vs-schatten-hoch); }
.vs-tour-kopf { display: flex; justify-content: space-between; align-items: center; margin: 0 0 0.25rem; font-size: 0.875rem; color: #c9d2dc; font-variant-numeric: tabular-nums; }
.vs-tour-kopf .vs-textknopf { color: #fff; font-size: 0.9375rem; min-height: 2.5rem; }
.vs-tour-text { font-size: 1.1875rem; line-height: 1.4; font-weight: 600; margin: 0 0 1rem; }
.vs-tour .vs-btn { background: #fff; color: var(--vs-ink); border-color: #fff; }
.vs-tour .vs-btn:hover { background: var(--vs-paper); }
.vs-tour :focus-visible { outline-color: #9ebcf5; }
body[data-vs-tour="3"] #vs-veroeffentlichen,
body[data-vs-aufbau][data-vs-tour="2"] #vs-knopf-anfragen,
body[data-vs-aufbau][data-vs-tour="3"] #vs-knopf-wuensche { outline: 3px solid var(--vs-blau); outline-offset: 3px; }
/* Solange das Menü (am Handy ein Blatt von unten) offen ist, pausiert der Hinweis; sonst verdeckt er die unteren Einträge.
   Ebenso beim Wählen einer Stelle für „Änderung anfragen“ (eigene Regel: ohne :has() verwürfe ein Browser sonst beide). */
body:has(#vs-menue:not([hidden])) .vs-tour { visibility: hidden; }
body[data-vs-markieren] .vs-tour { visibility: hidden; }

/* Kurzmeldungen */
.vs-meldung { position: fixed; z-index: 60; left: 50%; bottom: calc(1.25rem + env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; gap: 0.25rem 0.875rem; flex-wrap: nowrap; background: var(--vs-ink); color: #fff; padding: 0.75rem 1.125rem; border-radius: var(--ui-r-3); box-shadow: var(--vs-schatten-hoch); width: max-content; max-width: min(34rem, 100vw - 1.5rem); font-size: 0.9875rem; }
.vs-meldung-text { flex: 1 1 auto; min-width: 0; }
.vs-meldung:has(.vs-meldung-aktion) { flex-wrap: wrap; }
.vs-meldung:has(.vs-meldung-aktion) .vs-meldung-text { flex-basis: calc(100% - 3rem); }
.vs-meldung-aktion { font: inherit; font-weight: 650; color: #fff; background: none; border: 0; padding: 0.25rem 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 2.5rem; }
.vs-meldung-zu { font: inherit; background: none; border: 0; color: #c9d2dc; cursor: pointer; min-width: 2.25rem; min-height: 2.25rem; display: inline-grid; place-items: center; margin-right: -0.5rem; }
.vs-meldung[data-art="fehler"] { background: var(--vs-rot); }
body[data-vs-modus="vorschau"] .vs-meldung { bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
.vs-noscript { position: fixed; inset: auto 1rem 1rem 1rem; z-index: 70; }

/* ---------- Mittlere Breiten ---------- */
/* Nach dem Livegang: „Ihre Wünsche“ und „Fotos“ in der Werkzeugleiste erst ab 1200 px, darunter im Menü „Mehr“ (seit 12.10.2026). */
@media (max-width: 1199px) {
  .vs-ab-weit { display: none; }
}
/* Fassungsmodus (Phase 2): Der Umschalter „Neue Fassung / Jetzt online“ braucht Platz (gemessen 13.10.2026): „Ihre Wünsche“ und „Fotos“
   dort erst ab 1366 px, „Änderung anfragen“ ab 1100 px (beides sonst im Menü „Mehr“), unter 1024 px ohne Symbole in der Werkzeugleiste. */
@media (max-width: 1365px) {
  body[data-vs-fassung] .vs-ab-weit { display: none; }
}
@media (max-width: 1099px) {
  body[data-vs-fassung] .vs-ab-breit { display: none; }
}
@media (min-width: 760px) and (max-width: 1023px) {
  body[data-vs-fassung] .vs-leiste-werkzeuge .vs-i { display: none; }
}
@media (max-width: 1099px) {
  .vs-panel { position: absolute; right: 0; top: 0; bottom: 0; z-index: 20; width: min(26rem, 92%); box-shadow: var(--vs-schatten-hoch); }
  .vs-hinweis-zusatz { display: none; }
}
@media (max-width: 1023px) {
  .vs-status #vs-status-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .vs-status[data-vs-status="fehler"] #vs-status-text { position: static; width: auto; height: auto; clip: auto; }
  .vs-ab-breit { display: none; }
  .vs-leiste-name { max-width: 12rem; }
}

/* ---------- Handy ---------- */
@media (max-width: 759px) {
  .vs-leiste-reihe { gap: 0.375rem; min-height: 3.5rem; padding: 0.375rem max(0.625rem, env(safe-area-inset-right)) 0.375rem max(0.625rem, env(safe-area-inset-left)); }
  .vs-leiste-name, .vs-seitenwahl-text, .vs-leiste-werkzeuge { display: none; }
  .vs-leiste-kontext { flex: 1 1 auto; }
  .vs-seitenwahl { flex: 1 1 auto; }
  .vs-seitenwahl select { width: 100%; max-width: none; font-size: 1rem; padding-left: 0.625rem; padding-right: 1.75rem; background-position: calc(100% - 15px) 52%, calc(100% - 9px) 52%; }
  .vs-leiste-aktion { gap: 0.25rem; }
  .vs-status { min-width: 1.75rem; justify-content: center; cursor: pointer; }
  .vs-status[data-vs-status="fehler"] #vs-status-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  #vs-veroeffentlichen { min-width: 0; padding-inline: 0.875rem; gap: 0.4rem; }
  #vs-veroeffentlichen .vs-zahl { position: absolute; top: -0.4rem; right: -0.4rem; box-shadow: 0 0 0 2px #fff; background: var(--vs-amber-punkt); color: var(--vs-ink-deep); }
  .vs-menue-knopf span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .vs-menue-knopf { padding: 0; width: 2.75rem; justify-content: center; }
  .vs-menue-knopf .vs-i { width: 1.5rem; height: 1.5rem; }
  .vs-nur-handy { display: flex !important; }
  .vs-menue { position: fixed; left: 0; right: 0; top: auto; bottom: var(--vs-vv-unten); width: auto; border-radius: 18px 18px 0 0; padding: 0.75rem 0.75rem calc(0.75rem + env(safe-area-inset-bottom)); max-height: 85dvh; overflow: auto; box-shadow: 0 0 0 100vmax rgba(23, 34, 48, 0.45), var(--vs-schatten-hoch); }
  .vs-menue::before { content: ""; display: block; width: 2.5rem; height: 0.3rem; border-radius: 999px; background: var(--vs-line); margin: 0 auto 0.5rem; }
  .vs-menue-eintrag { min-height: 3.25rem; font-size: 1.0625rem; }
  .vs-hinweis { padding-inline: 0.875rem; font-size: 0.9375rem; }
  .vs-hinweis > p { flex-basis: 12rem; }
  .vs-nur-breit { display: none; }
  .vs-nur-schmal { display: inline; }
  /* Fassung mit offenen Angaben: am Handy nur „Angaben ansehen“ und „Was ist neu?“ in der Leiste; „Jetzt online ansehen“ steht im Menü. */
  .vs-hinweis-knoepfe .vs-fassung-online-weg { display: none; }
  /* Websiteliste: Passt Name oder Adresse nicht neben „Bearbeiten“, rückt der Knopf in eine eigene Zeile, statt die Adresse mitten im Wort zu trennen. */
  .vs-website { flex-wrap: wrap; row-gap: 0.5rem; }
  .vs-hinweis-knoepfe { flex: 1 1 100%; }
  .vs-hinweis-knoepfe .vs-btn { flex: 1 1 0; }
  /* „Änderung anfragen“ in einer Reihe (nur „Abbrechen“): Die Website rutscht so nur wenig nach unten. */
  .vs-hinweis-markieren { flex-wrap: nowrap; gap: 0.625rem; padding-block: 0.375rem; }
  .vs-hinweis-markieren > p { flex: 1 1 auto; min-width: 0; line-height: 1.3; }
  .vs-hinweis-markieren .vs-hinweis-knoepfe, .vs-hinweis-markieren .vs-hinweis-knoepfe .vs-btn { flex: none; }
  /* Vor dem Livegang: „Änderung anfragen“ bleibt in der Leiste (Hauptaktion), etwas schmaler; die Seitenwahl teilt sich den Rest. */
  .vs-knopf-anfragen-haupt { padding-inline: 0.75rem; gap: 0.375rem; }
  .vs-knopf-anfragen-haupt .vs-i { width: 1.125rem; height: 1.125rem; }
  /* Hinweise des Kundenbereichs am Handy einreihig: Text links, „Ansehen“ rechts (abgeschickt wird im Panel). */
  .vs-hinweis-aufbau, .vs-hinweis-wuensche { flex-wrap: nowrap; gap: 0.625rem; padding-block: 0.5rem; }
  .vs-hinweis-aufbau > p, .vs-hinweis-wuensche > p { flex: 1 1 auto; min-width: 0; line-height: 1.35; }
  .vs-hinweis-wuensche .vs-hinweis-knoepfe, .vs-hinweis-wuensche .vs-hinweis-knoepfe .vs-btn { flex: none; }
  /* Nächste Fassung (Phase 2): In der Live-Hülle höchstens eine Leiste, Vorrang aus data-vs-vorrang (unbeantwortete Rückfrage, dann neue
     Fassung, dann nicht abgeschickte Wünsche); in der Fassungshülle nur die Leiste der Fassung. */
  #vs-hinweise[data-vs-vorrang="rueckfrage"] #vs-fassung-hinweis,
  #vs-hinweise[data-vs-vorrang="wuensche"] #vs-fassung-hinweis,
  #vs-hinweise[data-vs-vorrang="fassung"] #vs-wuensche-hinweis,
  body[data-vs-fassung] #vs-wuensche-hinweis { display: none !important; }
  #vs-fassung-hinweis { flex-wrap: nowrap; gap: 0.625rem; padding-block: 0.5rem; }
  #vs-fassung-hinweis > p { flex: 1 1 auto; min-width: 0; line-height: 1.35; }
  #vs-fassung-hinweis .vs-hinweis-knoepfe, #vs-fassung-hinweis .vs-hinweis-knoepfe .vs-btn { flex: none; }
  #vs-fassung-leiste { padding-block: 0.5rem 0.625rem; }
  .vs-konflikt-wert { grid-template-columns: minmax(0, 1fr); }
  #vs-fassung-leiste > p { line-height: 1.35; }
  /* Fassungsmodus: „Passt, online stellen“ bleibt oben (Hauptaktion), ohne Symbol und etwas schmaler; den Speicherstand nennt das Menü. */
  #vs-freigeben { padding-inline: 0.75rem; }
  #vs-freigeben .vs-i { display: none; }
  body[data-vs-fassung] #vs-status { display: none; }
  .vs-panel-fuss { padding-inline: 1.125rem; }
  body[data-vs-ansicht="handy"] .vs-rahmen-huelle { padding: 0; }
  body[data-vs-ansicht="handy"] .vs-rahmen { width: 100%; border-radius: 0; box-shadow: none; }

  .vs-panel { position: fixed; left: 0; right: 0; bottom: var(--vs-vv-unten); top: auto; width: auto; height: min(72dvh, calc(var(--vs-vv-hoehe, 100dvh) - 3.5rem)); z-index: 36; border-left: 0; border-radius: 18px 18px 0 0; box-shadow: 0 -8px 40px rgba(23, 34, 48, 0.28); }
  .vs-panel-kopf { padding: 0.5rem 0.5rem 0.5rem 1.125rem; }
  .vs-panel-kopf::before { content: ""; position: absolute; left: 50%; top: 0.4rem; width: 2.5rem; height: 0.3rem; margin-left: -1.25rem; border-radius: 999px; background: var(--vs-line); }
  .vs-panel-inhalt { padding-inline: 1.125rem; padding-bottom: calc(2rem + env(safe-area-inset-bottom)); }

  .vs-werkzeug[data-vs-angedockt] { left: 0; right: 0; top: 0; border-radius: 0; max-width: none; padding: calc(0.375rem + env(safe-area-inset-top)) 0.375rem 0.375rem; transform: translateY(var(--vs-vv-oben)); box-shadow: 0 4px 16px rgba(23, 34, 48, 0.25); }
  .vs-werkzeug[data-vs-angedockt] .vs-werkzeug-reihe { justify-content: space-between; }
  .vs-werkzeug[data-vs-angedockt] .vs-werkzeug-reihe button { padding: 0 0.625rem; }
  .vs-werkzeug[data-vs-angedockt] .vs-werkzeug-trenner { display: none; }
  .vs-werkzeug[data-vs-angedockt] .vs-werkzeug-status { display: flex; align-items: center; gap: 0.5rem; margin: 0.15rem 0.625rem 0.1rem; color: #c9d2dc; font-size: 0.8125rem; }
  .vs-werkzeug[data-vs-angedockt] .vs-werkzeug-status .vs-status-punkt { width: 0.5rem; height: 0.5rem; box-shadow: none; }

  /* Blatt von unten; bei offener Tastatur (iPhone) endet es über ihr, damit Eingabefeld und „Übernehmen“ sichtbar bleiben. */
  .vs-dialog, .vs-dialog-breit, .vs-dialog-schmal { width: 100%; max-width: 100%; margin: auto 0 var(--vs-vv-unten); max-height: calc(min(100dvh, var(--vs-vv-hoehe, 100dvh)) - 0.75rem); border-radius: 18px 18px 0 0; }
  .vs-dialog[open] { animation: vs-blatt 0.22s ease-out; }
  .vs-dialog-kopf { padding: 0.75rem 0.5rem 0.25rem 1.125rem; }
  .vs-dialog-kopf h2 { font-size: 1.25rem; }
  .vs-dialog-rumpf { padding-inline: 1.125rem; }
  .vs-dialog-fuss { padding-inline: 1.125rem; }
  .vs-dialog-fuss .vs-btn { flex: 1 1 auto; }
  .vs-kontakt { padding-inline: 1.125rem; }
  .vs-link-arten { grid-template-columns: 1fr 1fr; }
  .vs-art { font-size: 0.9375rem; padding-inline: 0.625rem; }
  .vs-tour { left: 0.75rem; right: 0.75rem; width: auto; bottom: calc(0.75rem + env(safe-area-inset-bottom)); }
  .vs-meldung { bottom: calc(0.75rem + env(safe-area-inset-bottom)); width: calc(100vw - 1.5rem); }
  .vs-vorschau-hinweis { left: 0.75rem; right: 0.75rem; transform: none; max-width: none; bottom: calc(0.75rem + env(safe-area-inset-bottom)); font-size: 0.9375rem; line-height: 1.3; padding: 0.5rem 0.5rem 0.5rem 0.875rem; border-radius: 14px; }
  .vs-vorschau-text { flex: 1; min-width: 0; }
  .vs-vorschau-text strong { display: block; }
  .vs-vorschau-hinweis .vs-btn { border-radius: 10px; white-space: normal; text-align: center; }
}
@keyframes vs-blatt { from { transform: translateY(2.5rem); } to { transform: none; } }

@media (hover: none) {
  /* Gedrückte Knöpfe (Vorschau, Änderung anfragen, Alle Inhalte) behalten ihre Tinte: iOS hält :hover nach dem Tipp fest, und
     dieselbe Spezifität wie [aria-pressed="true"] gäbe sonst weiße Schrift auf Papier. */
  .vs-werkzeug-knopf:not([aria-pressed="true"]):not([aria-expanded="true"]):hover, .vs-menue-eintrag:hover, .vs-btn-zweit:hover { background: inherit; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}