/* ======================================================================================================================
Vorschau-Rahmen (Leiste über dem Entwurf, Rückmeldung darunter, Hinweis vor dem inerten Formular freier Seiten) und
eigenständige Anbieter-Seiten (Startseite mit Code-Formular, 404, Impressum, Datenschutz, Bestätigung, Widerspruch,
Erledigt, Systemhinweise). Stil „Papier & Stecknadel“ (DESIGN.md im Repo-Root), Tokens --ui-* aus basis.css.
- Eigenständige Seiten: , basis.css wird vorher per geladen; ui-Bausteine
(ui-karte, ui-knopf, ui-marke …) plus die vs-Klassen unten.
- Rahmen um den Entwurf: NIE .ui am (die Kundenseite darunter darf keine Grundelemente erben). Leiste und
Rückmeldung setzen Schrift, Farben und Box-Modell selbst, mit zwei Klassen Spezifität, damit Element-Regeln der
Vorlage (styles.css freier Seiten wird nach dieser Datei geladen) nicht durchschlagen.
- basis.css wird zusätzlich importiert: Die Systemseiten freier Seiten im Vorschau-Rahmen (seite.ts, systemSeite)
laden nur diese Datei; wo basis.css schon per steht, nutzt der Browser dieselbe Datei.
Kein JavaScript, keine externen Schriften, keine Bilder in der CSS (die Wortmarke steht als ![]()
im Markup der
eigenständigen Seiten, nie im Rahmen um einen Entwurf).
==================================================================================================================== */
@import url("basis.css");
:root {
/* Mindesthöhe der Leiste ab 1024 px; der Kopf von Schema-Entwürfen klebt darunter. Seit 12.10.2026 (Q&A Frage 112) 90 px: zwei
Zeilen Kennzeichnung und eine Zeile Zugangssatz mit 12 px Luft oben und unten (vorher 3.5rem, eine Reihe mit 6 px Luft). Sehr lange
Firmennamen ergeben bei 1024 px eine Zeile mehr; dann rutscht der klebende Kopf eines Schema-Entwurfs etwas unter die Leiste. */
--vorschau-bar-h: 5.625rem;
}
/* ---------- Rahmen: Grundlage ---------- */
.vs-bar, .vs-feedback {
font-family: var(--ui-schrift); font-weight: 400; font-style: normal; letter-spacing: 0; text-transform: none; text-align: left;
-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%;
}
.vs-bar, .vs-bar *, .vs-bar *::before, .vs-bar *::after,
.vs-feedback, .vs-feedback *, .vs-feedback *::before, .vs-feedback *::after { box-sizing: border-box; }
/* Stecknadel der Pill „Vorschau“ in der Leiste. Im Band der Rückmeldung steht seit 17.10.2026 keine mehr (Q&A Frage 146): Stecknadel
vor „vorortseite“ las sich dort wie die alte Marke, die seitdem die Wortmarke ist. */
.vs-bar .vs-bar-zeichen {
display: inline-block; width: 0.8rem; height: 0.8rem; flex: none; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
background: #fff; box-shadow: inset 0 0 0 0.22rem #fff, inset 0 0 0 0.4rem var(--ui-tinte);
}
/* ---------- Leiste über dem Entwurf (dunkel: „das ist nicht die Website“) ---------- */
/* Zwei Sätze untereinander, gleich hell: die Kennzeichnung (VH-1.0, wird nie gekürzt) und seit 12.10.2026 (Q&A Frage 112) der
Zugangssatz mit dem Code als Chip („Nicht bei Google zu finden, nur mit Ihrem Code … zu öffnen.“). Handy: Stecknadel + Vorschau |
Knopf, darunter die Sätze (scrollt mit, belegt den Bildschirm nicht dauerhaft). Bis 12.10.2026 stand dort rechts oben der Code und
„Zur Rückmeldung“ in voller Breite unten; mit dem zweiten Satz wäre die Leiste so rund 250 statt 200 px hoch geworden. Unter 360 px
steht der Knopf wieder in voller Breite unten (neben der Stecknadel fehlt der Platz). Ab 1024 px eine Reihe: Stecknadel | Sätze |
Knopf; bei Schema-Entwürfen (html[data-shape], @wl/render) klebend, der Kopf der Seite klebt darunter. Freie Seiten haben eigene
klebende Köpfe mit unbekannter Höhe und Ebene; dort scrollt die Leiste mit, statt sie zu überdecken oder von ihnen verdeckt zu werden. */
.vs-bar { position: relative; z-index: 20; background: var(--ui-tinte); color: #fff; font-size: var(--ui-t-3); line-height: 1.45; }
.vs-bar .vs-bar-inner {
width: min(var(--ui-b-inhalt), 100% - 2rem); margin: 0 auto; padding: var(--ui-a-4) 0;
display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "tag link" "texte texte";
align-items: center; gap: var(--ui-a-3) var(--ui-a-4);
}
.vs-bar .vs-bar-tag {
grid-area: tag; justify-self: start; display: inline-flex; align-items: center; gap: 0.55rem; height: 1.75rem;
padding: 0 0.75rem 0 0.65rem; border-radius: var(--ui-r-voll); background: rgba(255, 255, 255, 0.12); color: #fff;
font-size: var(--ui-t-3); font-weight: 650; line-height: 1; white-space: nowrap;
}
.vs-bar .vs-bar-texte { grid-area: texte; display: grid; gap: var(--ui-a-2); min-width: 0; }
.vs-bar :is(.vs-bar-text, .vs-bar-zugang) { margin: 0; min-width: 0; color: rgba(255, 255, 255, 0.88); font-size: var(--ui-t-3); line-height: 1.45; }
/* Code im Satz: Chip wie früher rechts, aber in Textgröße und mit wenig Innenabstand, damit die Zeile nicht höher wird. */
.vs-bar .vs-bar-code {
font-weight: 700; font-size: inherit; letter-spacing: 0.12em; font-variant-numeric: tabular-nums; color: #fff; white-space: nowrap;
background: rgba(255, 255, 255, 0.14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24); border-radius: var(--ui-r-1);
padding: 0.0625rem 0.2rem 0.0625rem 0.35rem;
}
.vs-bar .vs-bar-link {
grid-area: link; justify-self: end; display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; margin: 0;
min-height: var(--ui-klick-touch); padding: 0.4rem 1rem; border: 0; border-radius: var(--ui-r-2); background: #fff; color: var(--ui-tinte);
font-size: var(--ui-t-4); font-weight: 650; line-height: 1.2; text-decoration: none; white-space: nowrap;
transition: background-color var(--ui-dauer-1);
}
.vs-bar .vs-bar-link:hover { background: var(--ui-papier-tief); color: var(--ui-tinte); text-decoration: none; }
.vs-bar .vs-bar-link .ui-i { width: 1rem; height: 1rem; }
.vs-bar a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
@media (max-width: 359px) {
.vs-bar .vs-bar-inner { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tag" "texte" "link"; }
.vs-bar .vs-bar-link { justify-self: stretch; }
}
@media (min-width: 1024px) {
html[data-shape] .vs-bar { position: sticky; top: 0; }
.vs-bar .vs-bar-inner {
grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "tag texte link";
min-height: var(--vorschau-bar-h); padding: var(--ui-a-3) 0; gap: var(--ui-a-2) var(--ui-a-5);
}
.vs-bar .vs-bar-texte { gap: var(--ui-a-1); }
.vs-bar .vs-bar-link { min-height: var(--ui-klick); padding-inline: 0.875rem; font-size: var(--ui-t-3); }
body[data-preview] .header { top: var(--vorschau-bar-h); }
html[data-shape] .vs-feedback { scroll-margin-top: calc(var(--vorschau-bar-h) + 4.5rem); }
}
@media (min-width: 1024px) and (pointer: coarse) {
.vs-bar .vs-bar-link { min-height: var(--ui-klick-touch); }
}
/* ---------- Rückmeldung unter dem Entwurf ---------- */
/* Oben ein dunkles Band wie die Leiste (Rahmen des Entwurfs), darunter Papier mit zwei Karten: zuerst der Anruf (braucht keine
Einwilligung, wie im Brief), dann das Formular mit einem Einwilligungssatz und zwei Häkchen (seit 11.10.2026, Q&A Frage 107). */
.vs-feedback { background: var(--ui-papier); color: var(--ui-tinte); font-size: var(--ui-t-5); line-height: var(--ui-zeile); border-bottom: 1px solid var(--ui-linie); }
/* Sprung zu #kontakt bzw. #vs-kontakt: Platz für einen klebenden Kopf der Kundenseite (Schema-Seiten ab 720 px 68 px hoch, freie
Seiten unbekannt); ab 1024 px kommt bei Schema-Entwürfen die klebende Leiste dazu (siehe oben). */
.vs-feedback { scroll-margin-top: 4.5rem; }
.vs-feedback .vs-feedback-band { background: var(--ui-tinte); color: #fff; }
.vs-feedback .vs-feedback-band-inner, .vs-feedback .vs-feedback-inner { width: min(44rem, 100% - 2rem); margin: 0 auto; }
.vs-feedback .vs-feedback-band-inner { min-height: 3rem; padding: 0.625rem 0; display: flex; align-items: center; gap: 0.7rem; }
.vs-feedback .vs-kicker { margin: 0; color: #fff; font-size: var(--ui-t-3); font-weight: 600; line-height: 1.4; }
.vs-feedback .vs-feedback-inner { padding: var(--ui-a-7) 0; }
.vs-feedback a { color: var(--ui-tinte); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--ui-linie-feld); }
.vs-feedback a:hover { text-decoration-color: currentColor; }
.vs-feedback :focus-visible { outline: 3px solid var(--ui-blau); outline-offset: 2px; }
.vs-feedback p { margin: 0 0 var(--ui-a-4); font-size: inherit; line-height: inherit; color: inherit; }
.vs-feedback h2 {
font-family: var(--ui-schrift); font-weight: 700; font-size: var(--ui-t-8); line-height: var(--ui-zeile-titel); letter-spacing: -0.02em;
color: var(--ui-tinte); margin: 0 0 var(--ui-a-3); text-transform: none;
}
.vs-feedback h3 {
display: flex; align-items: center; gap: 0.6rem; font-family: var(--ui-schrift); font-weight: 650; font-size: var(--ui-t-6);
line-height: 1.25; letter-spacing: -0.01em; color: var(--ui-tinte); margin: 0 0 var(--ui-a-3); text-transform: none;
}
.vs-feedback .vs-intro { color: var(--ui-tinte-2); max-width: 60ch; margin-bottom: var(--ui-a-5); }
/* Formulare (Rahmen und eigenständige Seiten) */
:is(.vs-feedback, .vs-page) .vs-form { display: grid; gap: var(--ui-a-4); margin: 0; }
:is(.vs-feedback, .vs-page) .vs-check {
display: grid; grid-template-columns: 1.375rem minmax(0, 1fr); gap: 0.875rem; align-items: start; margin: 0;
min-height: var(--ui-klick-touch); cursor: pointer; color: var(--ui-tinte); font-weight: 500; line-height: 1.5;
}
:is(.vs-feedback, .vs-page) .vs-check input {
appearance: auto; -webkit-appearance: checkbox; width: 1.375rem; height: 1.375rem; margin: 0.1rem 0 0; accent-color: var(--ui-tinte); cursor: pointer;
}
.vs-feedback .vs-field { display: grid; gap: 0.375rem; margin: 0; color: var(--ui-tinte); font-size: var(--ui-t-3); font-weight: 600; line-height: 1.4; }
.vs-feedback :is(.vs-field input, .vs-zeit select) {
appearance: none; -webkit-appearance: none; display: block; width: 100%; max-width: none; min-height: 3rem; margin: 0;
padding: 0.625rem 0.875rem; font-family: var(--ui-schrift); font-size: 1rem; font-weight: 400; line-height: 1.4; letter-spacing: 0;
color: var(--ui-tinte); background-color: var(--ui-flaeche); border: 1px solid var(--ui-linie-feld); border-radius: var(--ui-r-2); box-shadow: none;
transition: border-color var(--ui-dauer-1), box-shadow var(--ui-dauer-1);
}
.vs-feedback :is(.vs-field input, .vs-zeit select):hover { border-color: var(--ui-tinte-3); }
.vs-feedback :is(.vs-field input, .vs-zeit select):is(:focus, :focus-visible) { outline: none; border-color: var(--ui-blau); box-shadow: 0 0 0 3px var(--ui-blau-hell); }
.vs-feedback .vs-field input::placeholder { color: var(--ui-tinte-3); opacity: 0.85; }
.vs-feedback .vs-fine { max-width: 68ch; margin: 0; color: var(--ui-tinte-2); font-size: var(--ui-t-3); line-height: 1.55; }
:is(.vs-feedback, .vs-page) .vs-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
:is(.vs-feedback, .vs-page) .vs-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-a-3) var(--ui-a-5); }
.vs-feedback .vs-btn {
appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; width: auto; min-height: 3rem; margin: 0;
padding: 0.625rem 1.5rem; border: 1px solid var(--ui-tinte); border-radius: var(--ui-r-2); background: var(--ui-tinte); color: #fff;
font-family: var(--ui-schrift); font-size: 1rem; font-weight: 600; line-height: 1.2; letter-spacing: 0; text-transform: none; text-decoration: none;
box-shadow: none; cursor: pointer; transition: background-color var(--ui-dauer-1), border-color var(--ui-dauer-1);
}
.vs-feedback .vs-btn:hover { background: var(--ui-tinte-tief); border-color: var(--ui-tinte-tief); color: #fff; }
.vs-feedback .vs-btn:active { transform: translateY(1px); }
.vs-feedback .vs-btn-secondary { background: var(--ui-flaeche); color: var(--ui-tinte); border-color: var(--ui-linie-2); box-shadow: 0 1px 1px rgba(23, 34, 48, 0.04); }
.vs-feedback .vs-btn-secondary:hover { background: var(--ui-papier); border-color: var(--ui-tinte-3); color: var(--ui-tinte); }
/* Die zwei Wege als Karten. Der Anruf steht zuerst und groß (Nummer in großer Schrift, ein Tippen ruft an); das Formular trägt
die einzige Hauptaktion in Tinte. */
.vs-feedback .vs-weg {
margin: 0 0 var(--ui-a-4); padding: var(--ui-a-5); background: var(--ui-flaeche); border: 1px solid var(--ui-linie);
border-radius: var(--ui-r-4); box-shadow: var(--ui-schatten-1);
}
.vs-feedback .vs-weg h3 { margin-bottom: var(--ui-a-4); }
.vs-feedback .vs-anruf { display: grid; gap: var(--ui-a-3) var(--ui-a-5); align-items: center; }
.vs-feedback .vs-anruf p { margin: 0; color: var(--ui-tinte-2); font-size: var(--ui-t-4); line-height: 1.5; }
.vs-feedback .vs-btn-anruf {
justify-self: start; gap: 0.75rem; min-height: 3.5rem; padding: 0.625rem 1.5rem 0.625rem 1.25rem; border-color: var(--ui-tinte);
font-size: var(--ui-t-6); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; white-space: nowrap;
}
.vs-feedback .vs-btn-anruf:hover { border-color: var(--ui-tinte); }
.vs-feedback .vs-btn-anruf .ui-i { width: 1.375rem; height: 1.375rem; }
/* Einwilligung: der Satz als Legende, darunter je Weg eine Zeile aus Häkchen und vorausgefülltem Feld. Ein Feld ohne Häkchen
wird ignoriert; die angekreuzte Zeile trägt die Stecknadel (Rand in Tinte). */
.vs-feedback .vs-einwilligung { display: grid; gap: var(--ui-a-3); min-width: 0; margin: 0; padding: 0; border: 0; }
.vs-feedback .vs-einwilligung legend {
display: table; max-width: 100%; white-space: normal; padding: 0; margin: 0 0 var(--ui-a-3); color: var(--ui-tinte);
font-size: var(--ui-t-5); font-weight: 400; line-height: var(--ui-zeile);
}
.vs-feedback .vs-kanaele { display: grid; gap: var(--ui-a-2); margin: 0 calc(-1 * var(--ui-a-3)); }
.vs-feedback .vs-kanal {
display: grid; gap: var(--ui-a-2); padding: var(--ui-a-3); border: 1px solid transparent; border-radius: var(--ui-r-3);
transition: background-color var(--ui-dauer-1), border-color var(--ui-dauer-1);
}
.vs-feedback .vs-kanal:has(input[type="checkbox"]:checked) { background: var(--ui-papier); border-color: var(--ui-tinte); }
.vs-feedback .vs-kanal .vs-check { align-items: center; font-weight: 600; }
.vs-feedback .vs-kanal .vs-check input { margin: 0; }
.vs-feedback .vs-kanal-felder { display: grid; gap: var(--ui-a-2); min-width: 0; }
.vs-feedback .vs-zeit { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-a-2) var(--ui-a-3); margin: 0; color: var(--ui-tinte-2); font-size: var(--ui-t-4); font-weight: 500; }
.vs-feedback .vs-zeit select {
width: auto; min-width: 11rem; padding-right: 2.5rem; cursor: pointer;
background-image: linear-gradient(45deg, transparent 50%, var(--ui-tinte-2) 50%), linear-gradient(135deg, var(--ui-tinte-2) 50%, transparent 50%);
background-position: calc(100% - 19px) 55%, calc(100% - 14px) 55%; background-size: 5px 5px; background-repeat: no-repeat;
}
/* Hinweise (Rückmeldung nach dem Absenden): Optik wie ui-hinweis */
:is(.vs-feedback, .vs-page) .vs-banner {
display: flex; align-items: flex-start; gap: var(--ui-a-3); margin: 0 0 var(--ui-a-4); padding: 0.75rem 1rem;
border: 1px solid var(--ui-linie); border-radius: var(--ui-r-3); background: var(--ui-flaeche); color: var(--ui-tinte);
font-size: var(--ui-t-4); line-height: 1.5; text-align: left;
}
:is(.vs-feedback, .vs-page) .vs-banner .ui-i { margin-top: 0.15rem; }
:is(.vs-feedback, .vs-page) .vs-banner-ok { background: var(--ui-gruen-hell); border-color: var(--ui-gruen-linie); color: var(--ui-gruen-tief); }
:is(.vs-feedback, .vs-page) .vs-banner-fehler { background: var(--ui-rot-hell); border-color: var(--ui-rot-linie); color: var(--ui-rot-tief); }
/* Widerspruch und Rechtliches am Ende */
.vs-feedback .vs-objection { margin: var(--ui-a-7) 0 0; padding-top: var(--ui-a-5); border-top: 1px solid var(--ui-linie); color: var(--ui-tinte-2); font-size: var(--ui-t-4); }
.vs-feedback .vs-meta { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin: var(--ui-a-3) 0 0; color: var(--ui-tinte-3); font-size: var(--ui-t-3); }
.vs-feedback .vs-meta a { color: var(--ui-tinte-2); }
/* Nutzungshinweis (Q&A Frage 82): ganz unten, klein und ruhig, ohne Rahmen und ohne Farbe; er soll gefunden werden, nicht auffallen. */
.vs-feedback .vs-nutzung { max-width: 68ch; margin: var(--ui-a-3) 0 0; color: var(--ui-tinte-3); font-size: var(--ui-t-3); line-height: 1.55; }
/* Kundenmodus (seit 12.10.2026, Q&A Frage 111): kleine Karte „Ihr Auftrag läuft“ statt der Rückmeldung; eine Hauptaktion (Zum
Kundenbereich), Widerspruch und Widerruf leise darunter. Kompakter als die Rückmeldung: Überschrift eine Stufe kleiner, weniger Luft. */
.vs-feedback-kunde .vs-feedback-inner { padding: var(--ui-a-6) 0; }
.vs-feedback-kunde .vs-weg-kunde h2 { font-size: var(--ui-t-7); margin-bottom: var(--ui-a-2); }
.vs-feedback-kunde .vs-weg-kunde p { color: var(--ui-tinte-2); max-width: 52ch; }
.vs-feedback-kunde .vs-weg-kunde .ui-i { width: 1.125rem; height: 1.125rem; }
/* Nummer für Fragen unter dem Knopf (seit 12.10.2026): Text, kein zweiter Knopf, damit „Zum Kundenbereich“ die eine Hauptaktion bleibt;
am Handy ruft ein Tippen auf die Nummer an. */
.vs-feedback-kunde .vs-weg-kunde .vs-kunde-anruf { margin: var(--ui-a-4) 0 0; font-size: var(--ui-t-4); line-height: 1.5; }
.vs-feedback-kunde .vs-kunde-anruf a { white-space: nowrap; }
.vs-feedback-kunde .vs-objection { margin-top: var(--ui-a-5); padding-top: var(--ui-a-4); }
@media (min-width: 560px) {
.vs-feedback .vs-anruf { grid-template-columns: auto minmax(0, 1fr); }
.vs-feedback .vs-kanal { grid-template-columns: 11.5rem minmax(0, 1fr); align-items: start; gap: var(--ui-a-2) var(--ui-a-3); }
.vs-feedback .vs-kanal .vs-check { min-height: 3rem; }
}
/* Freie Seiten haben auf dem Handy oft eine feste Leiste unten (Anrufen, Anfragen). Sie darf das Ende der Rückmeldung mit den Links
zu Impressum und Datenschutz nicht verdecken (Anbieterkennzeichnung leicht erreichbar, § 5 DDG; W9). */
@media (max-width: 1023px) {
body[data-preview] .vs-feedback .vs-feedback-inner { padding-bottom: calc(var(--ui-a-7) + 5rem); }
}
@media (max-width: 559px) {
.vs-feedback .vs-feedback-inner { padding: var(--ui-a-6) 0; }
.vs-feedback h2 { font-size: var(--ui-t-7); }
.vs-feedback .vs-weg { padding: var(--ui-a-4); border-radius: 14px; }
.vs-feedback :is(.vs-actions .vs-btn, .vs-btn-anruf) { width: 100%; }
.vs-feedback .vs-btn-anruf { justify-self: stretch; }
.vs-feedback .vs-kanaele { margin-inline: calc(-1 * var(--ui-a-2)); }
.vs-feedback .vs-kanal { padding: var(--ui-a-2); }
.vs-feedback .vs-meta > span { flex-basis: 100%; }
}
/* ---------- Freie Seiten im Vorschau-Rahmen: Hinweis vor dem inerten Kontaktformular ---------- */
/* Die Vorlage des Autors kennt die Klasse nicht; eigene Gestaltung in der Optik von ui-hinweis-info, Symbol per CSS.
Der Hinweis steht als Geschwister direkt vor dem