/* ===================================================================== Vinzenz-Weinkeller — Design Tokens · Material Design 3 × Brand Guide Reskin: helle, flache, mobile-first Optik nach vinzenz-weinkeller.de Grundsätze: flach (keine Schatten), Schriften nach Vorgabe des Inhabers (Überschriften Poiret One, Text Segoe UI Light, Akzente Allura), Material Symbols Rounded, großzügige Abstände, Primary = Beige (#D3C6A3) für CTAs/Akzente — als FLÄCHE, nicht als Textfarbe. Nur die Guide-Tokens verwenden — keine erfundenen Grautöne/Tints. ===================================================================== */ /* ===================================================================== SCHRIFTEN — endgültige Vorgabe des Inhabers • normaler Text ........ Segoe UI Light • Überschriften ........ Poiret One (Google Fonts) • Akzente .............. Allura (Google Fonts) Poiret One und Allura sind frei (SIL OFL) und werden von Google geladen. Segoe UI ist das NICHT — es ist eine Microsoft-Systemschrift; siehe die Erklärung beim Selawik-Block weiter unten. WICHTIG: Poiret One und Allura gibt es jeweils NUR im Schnitt 400. Überschriften dürfen deshalb nicht auf 700/800 stehen, sonst rechnet der Browser einen künstlichen Fettschnitt und verzerrt die Zeichen — genau das, was der Inhaber an Valentinoa kritisiert hatte. ===================================================================== */ /* SELBST GEHOSTET statt von Google geladen. Grund: Ein Aufruf an fonts.googleapis.com uebertraegt bei JEDEM Seiten- aufruf die IP-Adresse des Besuchers an Google — ohne Einwilligung und ohne dass es in der Datenschutzerklaerung stand. In Deutschland ist das ein bekanntes Abmahnrisiko. Selbst ausgeliefert verlaesst kein Datum die eigene Seite, und die Erklaerung muss dazu nichts aussagen. Es ist der lateinische Teilsatz (U+0000-00FF) — deutsche Umlaute inklusive. */ @font-face { font-family: 'Poiret One'; src: url('fonts/poiret-one.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Allura'; src: url('fonts/allura.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } /* Symbolschrift ebenfalls selbst gehostet — damit verlaesst KEIN Aufruf mehr die eigene Seite Richtung Google. Von 5227 KB auf 246 KB gebracht: erst die vier variablen Achsen auf die genutzten Werte eingefroren (FILL 0, wght 400, GRAD 0, opsz 24), dann auf die tatsaechlich verwendeten Symbole eingedampft. */ @font-face { font-family: 'Material Symbols Rounded'; src: url('fonts/material-symbols-rounded.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: block; } /* Selawik — Ersatz für Segoe UI, selbst gehostet. Warum nicht Segoe UI selbst: das ist eine Microsoft-Systemschrift. Ihre Lizenz erlaubt kein Einbetten als Webfont, und sie existiert nur auf Windows — auf iPhone, Android und Mac fehlt sie. Selawik ist Microsofts EIGENER offener Ersatz (SIL OFL 1.1) mit identischen Metriken. Ergebnis: Auf Windows greift die echte Segoe UI (steht im Stapel vorn), überall sonst rendert Selawik praktisch deckungsgleich. Lizenztext liegt bei: fonts/Selawik-LICENSE.txt */ @font-face { font-family:'Selawik'; src:url('fonts/selawkl.woff2') format('woff2'),url('fonts/selawkl.woff') format('woff'); font-weight:300; font-style:normal; font-display:swap; } @font-face { font-family:'Selawik'; src:url('fonts/selawk.woff2') format('woff2'),url('fonts/selawk.woff') format('woff'); font-weight:400; font-style:normal; font-display:swap; } @font-face { font-family:'Selawik'; src:url('fonts/selawksb.woff2') format('woff2'),url('fonts/selawksb.woff') format('woff'); font-weight:600; font-style:normal; font-display:swap; } @font-face { font-family:'Selawik'; src:url('fonts/selawkb.woff2') format('woff2'),url('fonts/selawkb.woff') format('woff'); font-weight:700; font-style:normal; font-display:swap; } /* --- Tokens ------------------------------------------------------------- */ :root { /* ---- Material-Design-3-Rollen (Guide-Palette) ---- */ --md-background: #FFFFFF; /* Seite/Body */ --md-surface: #F7F7F7; /* Cards, Modals, erhöhte Panels */ --md-surface-muted: #F2F2F2; /* sekundäre Flächen, Tabellenzeilen */ --md-input-bg: #FAFAFA; /* Text-Inputs, Selects, Textareas */ --md-outline: #E6E6E6; /* Ränder, Divider */ --md-text: #111111; /* Standard-Vordergrund */ --md-text-muted: rgba(17,17,17,.62); /* Sekundärtext (abgeleitet, kein neuer Farbton) */ --md-primary: #D3C6A3; /* Marke: CTAs, Links, Fokus — FLÄCHEN, nicht Text! */ --md-on-primary: #111111; /* Text auf Primary */ /* Marken-Beige als TEXTFARBE auf hellem Grund. #D3C6A3 selbst erreicht dort nur 1.7:1 und ist unlesbar (vom Inhaber gemeldet). Dieser Ton hat denselben Farbton (44°) und dieselbe Sättigung, nur 53 % dunkler — er trägt auf allen hellen Flächen: Weiß 5.61:1, #F5F2EA 5.01:1, #F7F7F7 5.24:1, #EDE9E1 4.63:1. Auf DUNKLEM Grund weiterhin --md-primary verwenden (dort 11.13:1). */ --md-primary-text: #776639; --md-primary-light: #F5F2EA; /* subtile Flächen, Hover/Active, Badges, Fills */ --md-secondary: #EDE9E1; /* Akzentfläche */ --md-secondary-light: #F8E6E8; /* helle Akzentbereiche */ --md-error: #EF4444; /* Validierung, destruktiv, Sale-Preise */ --md-footer-bg: #EDE9E1; /* Footer & Banner */ /* ---- Legacy-Aliase (--vw-*) auf das neue System gemappt -------------- Bestandsseiten/Module konsumieren diese Namen; sie zeigen dadurch automatisch die neue Optik. TEXT-Nutzungen zeigen auf --md-text, BRAND/CTA-Nutzungen auf --md-primary. */ --vw-color-primary: var(--md-primary); /* CTAs/Marke (Beige) — Flächen */ --vw-color-primary-text: var(--md-primary-text); /* Marke als Textfarbe auf hell */ --vw-color-secondary: var(--md-secondary); --vw-color-text: var(--md-text); --vw-color-accent: var(--md-primary); --vw-color-bordeaux-dark: var(--md-primary); --vw-color-beige: var(--md-secondary); --vw-color-beige-light: var(--md-primary-light); --vw-color-beige-muted: var(--md-outline); --vw-color-body: var(--md-text); --vw-color-body-warm: var(--md-text-muted); --vw-color-white: #FFFFFF; --vw-color-black: #111111; /* ---- Schriften nach Vorgabe des Inhabers ------------------------------ Fließtext: Segoe UI (auf Windows) bzw. Selawik (alle anderen Geräte). „Segoe UI" steht bewusst VORN, damit auf Windows — auch beim Inhaber — die echte Systemschrift greift; überall sonst rendert das metrisch gleiche Selawik. Überschriften/Kategorien: Poiret One. Akzente: Allura. Beide fallen auf die Textschrift zurück, falls Google nicht erreichbar ist — dann steht dort eine lesbare Sans statt gar nichts. */ --vw-font-body: 'Segoe UI', 'Selawik', system-ui, -apple-system, sans-serif; --vw-font-heading: 'Poiret One', 'Segoe UI', 'Selawik', system-ui, sans-serif; --vw-font-headline: 'Poiret One', 'Segoe UI', 'Selawik', system-ui, sans-serif; --vw-font-display: 'Allura', 'Poiret One', 'Segoe UI', 'Selawik', cursive; /* Beschriftungen folgen der Ueberschriften-Schrift aus dem CMS */ --vw-font-label: var(--vw-font-heading); /* ---- Gewichte --------------------------------------------------------- Eine Stufe leichter als zuvor (war 400/600/700/800). Grund: der Inhaber gibt „Segoe UI LIGHT" für die Texte vor und meldete die Schrift als zu dick. Mit einer Light-Grundschrift wirken 800er-Zahlen wie Fremdkörper. Selawik liefert 300/400/600/700 als echte Schnitte — es wird also nichts synthetisiert. */ --vw-fw-text: 400; /* Fließtext — war 300 (Light), auf Wunsch kräftiger */ --vw-fw-medium: 600; --vw-fw-bold: 700; --vw-fw-black: 700; /* Selawik hat keinen 800er-Schnitt; 800 würde der Browser künstlich fett rechnen und verzerren. */ /* ---- Schriftgroessen (1rem = 10px via 62.5%) ---- Mitwachsend statt fix. Vorher war jede Groesse auf dem Handy und auf einem 1280er Monitor identisch - eine Ueberschrift blieb ueberall bei 26px und wirkte auf dem Desktop verloren. Aufbau: clamp(Handy-Wert, rem-Sockel + vw-Anteil, Desktop-Wert). Der rem-Sockel ist wichtig: eine reine vw-Angabe wuerde den Zoom des Browsers aushebeln, Text liesse sich dann nicht mehr vergroessern. Die Werte wachsen zwischen 375px und 1280px Fensterbreite. */ --vw-fs-xxs: 1.2rem; --vw-fs-xs: clamp(1.3rem, 1.259rem + 0.11vw, 1.4rem); --vw-fs-sm: clamp(1.5rem, 1.459rem + 0.11vw, 1.6rem); --vw-fs-md: clamp(1.6rem, 1.517rem + 0.221vw, 1.8rem); --vw-fs-lg: clamp(2rem, 1.876rem + 0.331vw, 2.3rem); --vw-fs-xl: clamp(2.6rem, 2.269rem + 0.884vw, 3.4rem); --vw-fs-2xl: clamp(3.2rem, 2.703rem + 1.326vw, 4.4rem); --vw-fs-3xl: clamp(4rem, 3.337rem + 1.768vw, 5.6rem); --vw-fs-4xl: clamp(5.2rem, 4.537rem + 1.768vw, 6.8rem); --vw-fs-display: 6.4rem; --vw-fs-hero: 8rem; /* ---- Abstände (großzügig) ---- */ --vw-space-1: 0.4rem; --vw-space-2: 0.8rem; --vw-space-3: 1.2rem; --vw-space-4: 1.6rem; --vw-space-5: 2.4rem; --vw-space-6: 3.2rem; --vw-space-7: 4.8rem; --vw-space-8: 6.4rem; /* ---- Layout ---- */ /* Lesespalte bleibt schmal: ueber ~85 Zeichen pro Zeile verliert das Auge beim Zeilensprung den Anschluss. Der WEITE Rahmen (Karten, Raster, Bilder) darf dagegen mehr Platz nehmen — bei 1920 px blieben mit 1120 px je 400 px leer, die Seite nutzte nur 58 % der Breite. */ --vw-content-max: 880px; --vw-wide-max: 1520px; /* ---- Übergänge ---- */ --vw-transition: .2s ease; /* ---- Radien (Guide) ---- */ --md-radius-sm: 0.25rem; /* kleine Elemente */ --md-radius-card: 0.5rem; /* Cards */ --md-radius-btn: 0.75rem; /* Buttons */ --md-radius-input: 1.5rem; /* Inputs/Badges */ /* Legacy-Aliase */ --vw-radius-lg: var(--md-radius-card); --vw-radius: var(--md-radius-btn); --vw-radius-sm: var(--md-radius-sm); --vw-radius-pill: 999px; } /* --- Reset (leicht) ----------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } /* hidden muss immer verstecken. Ohne diese Regel gewinnt jede Klasse mit display:flex/grid gegen das hidden-Attribut - so stand auf der Startseite ein leerer Kasten "Bitte beachten - geschlossen". */ [hidden] { display: none !important; } html { font-size: 62.5%; } /* 1rem = 10px */ /* Android-Chrome legt beim Antippen von Knoepfen/Links ein blaues Rechteck darueber. Seitenweit aus - die Rueckmeldung kommt stattdessen ueber die :active-Zustaende (dunklerer Knopf, siehe .vw-btn:active und unten). */ html { -webkit-tap-highlight-color: transparent; } button:not(:disabled):not(.vw-btn):active, [role="button"]:active { filter: brightness(.94); } /* clip statt hidden: hidden machte body zum eigenen Scroll-Bereich und legte damit jedes "position: sticky" lahm (z. B. die Gutschein-Vorschau, die beim Scrollen mitlaufen soll - rechts war dann alles leer). */ html, body { overflow-x: hidden; overflow-x: clip; } /* Nur fuer Vorlesewerkzeuge (Blinde hoeren "3 Sterne"), im Bild unsichtbar */ .vw-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } body { margin: 0; font-family: var(--vw-font-body); font-size: var(--vw-fs-md); font-weight: var(--vw-fw-text); line-height: 1.6; color: var(--md-text); background: var(--md-background); -webkit-font-smoothing: antialiased; } p { text-wrap: pretty; } /* Grundschriften fuer Elemente ohne eigene Regel. Bewusst OHNE !important: Frueher setzte /site-style.css "p, button … { font-family: Fliesstext !important }" - das ueberschrieb jede Zier- und Ueberschriftenschrift in Absaetzen (z. B. "Vinzenz-Weinkeller" und "25 €" in der Gutschein-Vorschau standen fett in Segoe UI statt in Allura). */ h1, h2, h3, h4, h5, h6 { font-family: var(--vw-font-heading); } button, input, select, textarea { font-family: inherit; } /* Browser setzen sonst eine Systemschrift */ /* Nie kuenstlich fett rechnen. Poiret One, Allura und die Schreibschriften gibt es nur im Schnitt 400; bei "fett" verzerrt der Browser sonst die feinen Linien - genau das hatte der Inhaber an Valentinoa kritisiert. Schriften mit echtem Fettschnitt (Segoe UI, Open Sans …) bleiben fett. */ html { font-synthesis: style; } /* --- Material Symbols Rounded ------------------------------------------- */ .material-symbols-rounded, .msr { font-family: 'Material Symbols Rounded'; font-weight: normal; font-style: normal; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; } /* --- Typografie --------------------------------------------------------- .vw-display läuft in Ephesis, und Ephesis hat NUR den Schnitt 400. Deshalb hier bewusst 400 statt 800: sonst rechnet der Browser einen künstlichen Fettschnitt (faux bold) und verzerrt die Schreibschrift. Die Wirkung kommt bei dieser Stufe aus der Größe, nicht aus dem Gewicht. */ .vw-display { font-family: var(--vw-font-display); font-weight: var(--vw-fw-text); color: var(--md-text); /* EINE Skala für alle Schau-Überschriften. Vorher gab es vier verschiedene Regeln nebeneinander (bis 90px auf den Modulseiten, 48px auf der Speisekarte, feste 40px auf Über uns/Kontakt) — die Größe sprang also von Seite zu Seite. Obergrenze bewusst 8rem: mit 6rem wirkte die Zierschrift auf dem Desktop zu klein (Rückmeldung). Ergibt 36px auf dem Handy, ~54px auf dem Tablet und 80px ab etwa 1150px Fensterbreite. */ font-size: clamp(3.6rem, 7vw, 8rem); line-height: 1.08; letter-spacing: -.02em; margin: 0 0 var(--vw-space-4); } /* Poiret One gibt es NUR im Schnitt 400 — deshalb hier bewusst 400 statt 700. Bei 700 würde der Browser einen künstlichen Fettschnitt rechnen und die feinen Linien der Schrift verdicken/verzerren. Auch das Sperren wird zurückgenommen: Poiret One ist eine schmale Art-déco-Schrift, negatives letter-spacing lässt sie zusammenkleben. */ .vw-h1, .vw-h2, .vw-h3 { font-family: var(--vw-font-heading); color: var(--md-text); font-weight: var(--vw-fw-text); line-height: 1.25; letter-spacing: .01em; margin: 0 0 var(--vw-space-3); } .vw-h1 { font-size: var(--vw-fs-2xl); } .vw-h2 { font-size: var(--vw-fs-xl); } .vw-h3 { font-size: var(--vw-fs-lg); } /* ── Abschnitts-Köpfe einheitlich MITTIG ────────────────────────────────── Vorher war die Ausrichtung uneinheitlich: die Startseite wechselte sogar innerhalb einer Seite zwischen mittig und linksbündig (2 mittig / 3 links), Kontakt ebenso, die Modul-Seiten waren durchgehend links. Das ist das vom Inhaber gemeldete „mal mittig, dann rechts". Bewusst NUR die Köpfe (Eyebrow + Überschrift), nicht der Fließtext — zentrierte Absätze über mehrere Zeilen lesen sich schlecht. */ .vw-eyebrow, .vw-display, .vw-h1, .vw-h2 { text-align: center; } /* Auf Rechtsseiten, Kontakt, Über uns und Konto ist die Eyebrow ein . text-align wirkt nur auf Blöcke - als Inline-Element blieb „Rechtliches“ links stehen, während die Überschrift darunter mittig war. */ span.vw-eyebrow { display: block; } /* ── Hero-Blöcke VOLLSTÄNDIG mittig ─────────────────────────────────────── Im Kopfbereich reicht es nicht, nur Eyebrow und Überschrift zu zentrieren: die Einleitungs-Absätze haben `max-width: 60ch`, und ein Block mit max-width bleibt ohne `margin: auto` am linken Rand kleben — der Text darin ist dann zwar zentriert, der Block selbst aber nicht. Genau das sah schief aus (Überschrift mittig, Einleitung und Knöpfe links). Hier ist Zentrieren auch inhaltlich richtig: Hero-Einleitungen sind kurz. Längere Textblöcke im Seiteninhalt bleiben bewusst linksbündig. */ .gut-hero, .cat-hero__in, .res-hero__in, .sk-hero__in, .home-hero__inner { text-align: center; } .gut-hero__lead, .cat-hero__lead, .res-hero__lead, .sk-hero__lead, .gut-hero__title, .cat-hero__title, .res-hero__title, .sk-hero__title { margin-left: auto; margin-right: auto; } /* Knopf-/Chip-Reihen im Hero mittig setzen (sind Flex-Container) */ .cat-hero__chips, .gut-hero__chips, .res-hero__chips, .home-hero__actions, .sk-hero__actions { justify-content: center; } /* Ausnahme: Überschriften INNERHALB von Karten. Dort stünde sonst ein zentrierter Titel über linksbündigem Karteninhalt — das wirkt schief. */ .vw-card .vw-eyebrow, .vw-card .vw-h1, .vw-card .vw-h2, .vw-card .vw-display, article .vw-eyebrow, article .vw-h1, article .vw-h2, article .vw-display { text-align: left; } /* Beschriftungen (gesperrte Versalien ueber Ueberschriften, Karten-Labels, Schritte) laufen in der UEBERSCHRIFTEN-Schrift aus dem CMS - ohne Fettschnitt, dafuer etwas groesser und dunkler. Vorher standen sie fett in der Fliesstextschrift: eine vierte "Schrift", die man im CMS nirgends einstellen konnte (Rueckmeldung Inhaber). */ .vw-eyebrow { font-family: var(--vw-font-label); font-weight: var(--vw-fw-text); font-size: var(--vw-fs-sm); text-transform: uppercase; letter-spacing: .14em; color: var(--md-text); } .vw-body { font-size: var(--vw-fs-md); color: var(--md-text); } /* Zeilenlänge begrenzen. Der Inhaltsrahmen ist jetzt 880 px breit — ohne Deckel entstünden daraus über 100 Zeichen pro Zeile. Ab etwa 85 Zeichen verliert das Auge beim Zeilensprung den Anschluss. Karten und Raster dürfen die volle Breite nutzen, nur Fließtext nicht. auto-Ränder, damit der Absatz in zentrierten Abschnitten mittig bleibt. */ .vw-body, .vw-muted, .vw-lead, .gut-validity, .res-hint, .cat-helper { max-width: 68ch; } .vw-section .vw-body, .vw-section .vw-muted { margin-left: auto; margin-right: auto; } .vw-muted { color: var(--md-text-muted); } /* Ein Absatz direkt unter einer Überschrift ist deren Einleitung. Überschriften stehen überall mittig, also auch die Einleitung - sonst wirkt der Block schief (Layout-Audit 10/2026: Kontakt, Konto, Catering, Gutscheine). Längerer Fließtext weiter unten bleibt linksbündig, das liest sich besser. */ :is(.vw-h1, .vw-h2, .vw-display) + p { text-align: center; margin-left: auto; margin-right: auto; } a { color: var(--md-text); text-underline-offset: 2px; } /* --- Buttons (flach, MD3, UPPERCASE) ------------------------------------ */ .vw-btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 48px; padding: 1.2rem 2.4rem; background-color: var(--md-primary); color: var(--md-on-primary); font-family: var(--vw-font-body); font-size: var(--vw-fs-sm); font-weight: var(--vw-fw-bold); text-transform: uppercase; letter-spacing: .04em; text-decoration: none; line-height: 1.1; border: none; border-radius: var(--md-radius-btn); cursor: pointer; transition: background-color var(--vw-transition), border-color var(--vw-transition); /* Handys mit vergrößerter Systemschrift: „ZAHLUNGSPFLICHTIG“ o. Ä. passte sonst nicht mehr in den Knopf und ragte heraus. Lieber trennen als überlaufen. */ max-width: 100%; text-align: center; hyphens: auto; overflow-wrap: anywhere; } .vw-btn:hover { background-color: color-mix(in srgb, var(--md-primary) 88%, #000); } .vw-btn:active { background-color: color-mix(in srgb, var(--md-primary) 80%, #000); } .vw-btn .msr { font-size: 2rem; } /* Tonal (sekundär) */ .vw-btn--tonal { background-color: var(--md-secondary); color: var(--md-text); } .vw-btn--tonal:hover { background-color: color-mix(in srgb, var(--md-secondary) 90%, #000); } /* Outline */ .vw-btn--white, .vw-btn--outline { background-color: transparent; color: var(--md-text); border: 1px solid rgba(17,17,17,.28); } .vw-btn--white:hover, .vw-btn--outline:hover { background-color: var(--md-primary-light); border-color: rgba(17,17,17,.5); } /* Text-Button */ .vw-btn--text { background: transparent; color: var(--md-text); padding: 1.2rem 1.4rem; min-height: 44px; } .vw-btn--text:hover { background: var(--md-primary-light); } /* Auf dunklem/farbigem Grund */ .vw-btn--outline-white { background-color: var(--md-background); color: var(--md-text); border: 1px solid var(--md-outline); } .vw-btn--outline-white:hover { background-color: var(--md-surface); } .vw-btn--block { width: 100%; } @media (prefers-reduced-motion: reduce) { .vw-btn { transition: none; } } /* --- Badge -------------------------------------------------------------- */ .vw-badge { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem 1rem; font-size: var(--vw-fs-xxs); font-weight: var(--vw-fw-bold); text-transform: uppercase; letter-spacing: .06em; color: var(--md-text); background: var(--md-primary-light); border-radius: var(--md-radius-input); } .vw-badge--sale { color: #fff; background: var(--md-error); } /* --- Chips (Filter/Kategorien/Zeitfenster) ------------------------------ */ .vw-chip { display: inline-flex; align-items: center; gap: .5rem; min-height: 40px; padding: .7rem 1.4rem; font-family: var(--vw-font-body); font-size: var(--vw-fs-sm); font-weight: var(--vw-fw-medium); color: var(--md-text); background: var(--md-surface); border: 1px solid var(--md-outline); border-radius: var(--md-radius-input); cursor: pointer; transition: background var(--vw-transition), border-color var(--vw-transition); } .vw-chip:hover { background: var(--md-primary-light); } .vw-chip[aria-selected="true"], .vw-chip.is-selected { background: var(--md-primary); border-color: var(--md-primary); color: var(--md-on-primary); font-weight: var(--vw-fw-bold); } /* --- Listen ------------------------------------------------------------- */ .vw-list { list-style: none; padding: 0; margin: 0; } .vw-list li { position: relative; padding: var(--vw-space-2) 0 var(--vw-space-2) 2.8rem; } .vw-list li::before { content: "check"; font-family: 'Material Symbols Rounded'; position: absolute; left: 0; top: 50%; transform: translateY(-50%); font-size: 2rem; color: var(--md-text); font-variation-settings: 'FILL' 0, 'wght' 500; } /* --- Sektions-Container ------------------------------------------------- */ .vw-section { padding: var(--vw-space-8) var(--vw-space-4); } .vw-section--white, .vw-section--beige { background-color: var(--md-background); } .vw-section--surface { background-color: var(--md-surface); } .vw-section--secondary, .vw-section--bordeaux { background-color: var(--md-secondary); color: var(--md-text); } .vw-section--secondary .vw-h1, .vw-section--secondary .vw-h2, .vw-section--secondary .vw-h3, .vw-section--bordeaux .vw-h1, .vw-section--bordeaux .vw-h2, .vw-section--bordeaux .vw-h3 { color: var(--md-text); } .vw-container { max-width: var(--vw-wide-max); margin: 0 auto; } .vw-container--narrow { max-width: var(--vw-content-max); } /* --- Sprungziele unter der fixierten Kopfleiste halten ------------------- Die Kopfleiste ist `position:fixed` und deckt die obersten 60px ab. Ohne scroll-margin-top landet JEDES Sprungziel dahinter — sowohl Anker-Links (#kontakt, #zeiten) als auch scrollIntoView() aus den Assistenten. Wer auf „Weiter“ klickte, sah die Überschrift des neuen Schritts nicht. Gilt für alles mit id (Anker) plus die Schrittanzeigen (nur Klassen). */ [id], .res-stepper, .cat-stepper, .gut-stepper, .res-step, .cat-step, .gut-step { scroll-margin-top: calc(var(--vw-appbar-h, 60px) + var(--vw-space-4)); } /* --- Formularfelder ----------------------------------------------------- */ .vw-field { display: flex; flex-direction: column; gap: .6rem; margin-bottom: var(--vw-space-4); } .vw-field label { font-family: var(--vw-font-body); font-size: var(--vw-fs-sm); font-weight: var(--vw-fw-bold); color: var(--md-text); } .vw-field input, .vw-field select, .vw-field textarea { font-family: var(--vw-font-body); font-size: var(--vw-fs-md); font-weight: var(--vw-fw-text); min-height: 48px; padding: 1.2rem 1.6rem; border: 1px solid var(--md-outline); background: var(--md-input-bg); color: var(--md-text); border-radius: var(--md-radius-input); transition: border-color var(--vw-transition), box-shadow var(--vw-transition); } .vw-field textarea { border-radius: var(--md-radius-card); min-height: 12rem; } .vw-field input::placeholder, .vw-field textarea::placeholder { color: var(--md-text-muted); } .vw-field input:focus, .vw-field select:focus, .vw-field textarea:focus { outline: none; border-color: var(--md-text); box-shadow: 0 0 0 3px var(--md-primary-light); } /* --- Karten (flach, outlined) ------------------------------------------- */ .vw-card { background: var(--md-surface); border: 1px solid var(--md-outline); border-radius: var(--md-radius-card); padding: var(--vw-space-5); transition: border-color var(--vw-transition), background var(--vw-transition); } .vw-card:hover { border-color: var(--md-text); } .vw-card--selected { border-color: var(--md-primary); background: var(--md-primary-light); } /* --- Sichtbarer Tastatur-Fokus ----------------------------------------- */ :focus-visible { outline: 2px solid var(--md-text); outline-offset: 2px; }