/* ========================================================================== Preisrechner im v2-Gewand (angelegt 08.09.2026) Diese Datei aendert NICHTS an subseite/slicer/assets/slicer.css - die bleibt unangetastet und bedient weiter die Live-Seite. Sie wird hier nur ueberlagert. Das geht so einfach, weil das Widget vollstaendig unter .vfs-* gekapselt ist und seine Farben aus CSS-Variablen auf .vfs-wrap zieht. Wir setzen diese Variablen auf die v2-Palette um; damit stimmen Farben, Radien und Schrift in einem Rutsch. Danach folgen nur noch die Stellen, an denen das Widget aus dem v2-Bild faellt: Karten, Knoepfe, Schriftgroessen. ========================================================================== */ .vfs-wrap { /* --- Palette auf v2 umgestellt --- */ --vfs-orange: var(--orange); --vfs-orange-dark: #C85E01; --vfs-ink: var(--anthrazit); --vfs-muted: var(--grau-text); --vfs-line: var(--grau-linie); --vfs-bg: var(--grau-flaeche); --vfs-radius: var(--radius); /* v2 laedt Montserrat bereits global - hier nichts Eigenes laden. */ font-family: inherit; /* Das Widget war auf 14 px Grundschrift gebaut, v2 auf 17 px. Ohne Anhebung wirkt der Rechner neben dem uebrigen Text wie Kleingedrucktes. */ font-size: 16px; line-height: 1.65; } /* -------------------------------------------------------------------------- Karten - im v2-Stil: mehr Luft, weicher Schatten, gleicher Radius -------------------------------------------------------------------------- */ .vfs-wrap .vfs-card { padding: 28px; margin-bottom: 24px; box-shadow: 0 1px 2px rgba(0,0,0,.03); } .vfs-wrap .vfs-card h2 { font-size: 1rem; letter-spacing: .08em; margin-bottom: 20px; padding-bottom: 14px; gap: 12px; } .vfs-wrap .vfs-card h2 .vfs-step { width: 28px; height: 28px; flex-basis: 28px; font-size: 14px; } .vfs-wrap .vfs-price-card { box-shadow: 0 6px 24px rgba(239,114,2,.10); } /* Die wichtigste Zahl der Seite stand mit 2,97:1 auf Weiss und riss damit sogar die abgesenkte Schwelle von 3:1 fuer Grossschrift. --orange-text bringt sie auf 4,88:1. */ .vfs-wrap .vfs-price-total { font-size: 2.4rem; letter-spacing: -.02em; color: var(--orange-text); } /* -------------------------------------------------------------------------- Ablagefeld -------------------------------------------------------------------------- */ .vfs-wrap .vfs-drop { min-height: 440px; } .vfs-wrap .vfs-drop-inner h3 { font-size: 1.15rem; font-weight: 700; color: var(--anthrazit); } .vfs-wrap .vfs-drop-inner p { font-size: .9rem; } /* Das Wuerfelsymbol kam von Font Awesome. v2 laedt keine Icon-Schrift, also zeichnen wir es selbst. Als Maske - dann nimmt es die Orange-Variable an und passt automatisch, falls die Farbe einmal wechselt. Der Selektor trifft auch das Markup, das slicer.js beim Zuruecksetzen des Feldes neu erzeugt (dort steht dasselbe ). */ .vfs-wrap .vfs-drop-icon { margin-bottom: 18px; line-height: 1; } .vfs-wrap .vfs-drop-icon i { display: block; width: 58px; height: 58px; margin: 0 auto; background-color: var(--vfs-orange); -webkit-mask: var(--vfs-wuerfel) no-repeat center / contain; mask: var(--vfs-wuerfel) no-repeat center / contain; } .vfs-wrap { --vfs-wuerfel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5 21 7v10l-9 4.5L3 17V7z'/%3E%3Cpath d='m3 7 9 4.5L21 7'/%3E%3Cpath d='M12 11.5v10'/%3E%3C/svg%3E"); } /* Der Vorschaukasten bleibt beim Scrollen stehen. Die alte Seite hatte eine 137 px hohe Kopfleiste, v2 hat 90 px (20 Polster + 50 Logo + 20 Polster) - ohne Korrektur klebte die Vorschau in einer Luecke. */ .vfs-wrap .vfs-viewer-col { top: 106px; } /* -------------------------------------------------------------------------- Formularfelder und Knoepfe -------------------------------------------------------------------------- */ .vfs-wrap .vfs-field > label, .vfs-wrap .vfs-label { font-size: .78rem; letter-spacing: .06em; } .vfs-wrap select, .vfs-wrap input[type=text], .vfs-wrap input[type=email], .vfs-wrap input[type=tel], .vfs-wrap input[type=number], .vfs-wrap textarea { padding: 13px 15px; border-radius: 10px; font-size: .95rem; } /* v2-Knoepfe sind rund und tragen einen farbigen Schatten. slicer.css setzt die Beschriftung auf Weiss - das sind auf dem Marken-Orange nur 2,97:1, beim Ueberfahren sogar 2,36:1. Hier steht die Hauptbeschriftung des Rechners („Anfrage kostenlos absenden“), also Anthrazit darauf: 5,44:1. Die Flaeche bleibt das Marken-Orange, #FF8A24 traegt keinen Text mehr. */ .vfs-wrap .vfs-btn { border-radius: 999px; padding: 15px 30px; font-size: .95rem; background: var(--orange); color: var(--anthrazit); box-shadow: 0 6px 20px rgba(239,114,2,.32); transition: background var(--tempo), box-shadow var(--tempo), transform var(--tempo); } .vfs-wrap .vfs-btn:hover { background: var(--orange); color: var(--anthrazit); box-shadow: 0 10px 28px rgba(239,114,2,.42); transform: translateY(-2px); filter: none; } .vfs-wrap .vfs-btn:disabled { transform: none; box-shadow: none; } .vfs-wrap .vfs-btn-ghost { background: #fff; box-shadow: none; border: 2px solid var(--grau-linie); color: var(--anthrazit); } .vfs-wrap .vfs-btn-ghost:hover { background: #fff; border-color: var(--orange); color: var(--orange-text); box-shadow: none; } .vfs-wrap .vfs-icon-btn { border-radius: 999px; padding: 6px 14px; } .vfs-wrap .vfs-icon-btn:hover, .vfs-wrap .vfs-icon-btn.vfs-hilite { border-color: var(--orange); color: var(--orange-text); } /* Die Schrittzahl im Kreis: 14 px fett, weiss auf Marken-Orange = 2,97:1. */ .vfs-wrap .vfs-card h2 .vfs-step { color: var(--anthrazit); } .vfs-wrap .vfs-tile { border-radius: 12px; padding: 14px 16px; } .vfs-wrap .vfs-tile-body strong { font-size: .95rem; } .vfs-wrap .vfs-tile-body small { font-size: .82rem; } /* -------------------------------------------------------------------------- Hinweistexte - stehen in der v2-Fassung als Klasse statt als style="" -------------------------------------------------------------------------- */ .vfs-wrap .vfs-hint { font-size: .88rem; line-height: 1.7; color: var(--anthrazit); } .vfs-wrap .vfs-hint--leise { font-size: .82rem; color: var(--vfs-muted); } .vfs-wrap .vfs-hint a { color: var(--orange-text); text-decoration: underline; text-underline-offset: 3px; } /* Die uebrigen orangen Schriften im Rechner auf hellem Grund: der Fuellgrad- Wert und der Schalter „Preisaufstellung anzeigen“. (.vfs-hero gibt es in v2 nicht - den Seitenkopf stellt v2 selbst.) */ .vfs-wrap .vfs-range-head b, .vfs-wrap .vfs-break-toggle { color: var(--orange-text); } /* -------------------------------------------------------------------------- Farbwahl - Rahmen und Auswahl (25.09.2026) Der Rahmen der Farbfelder lief ueber --grau-linie und kam damit auf 1,26:1; bei einem Bedienelement muessen es 3:1 sein, sonst ist der Knopf selbst nicht auszumachen. Und die getroffene Wahl war allein am Rahmenwechsel nach Orange zu erkennen - also ausschliesslich an der Farbe. Der zusaetzliche dunkle Ring gibt ihr eine Form, die auch ohne Farbunterscheidung traegt. -------------------------------------------------------------------------- */ .vfs-wrap .vfs-color { border-color: var(--feldrand); position: relative; } .vfs-wrap .vfs-color.vfs-active::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--anthrazit); } .vfs-wrap .vfs-msg { border-radius: 12px; font-size: .92rem; padding: 15px 18px; } .vfs-wrap .vfs-foot-note { font-size: .82rem; color: var(--vfs-muted); line-height: 1.7; } /* Auf schmalen Bildschirmen war das Widget schon vorher einspaltig - nur die Polsterung muss mit, sonst wird es dort eng. */ @media (max-width: 575px) { .vfs-wrap .vfs-card { padding: 20px; } } /* -------------------------------------------------------------------------- Handy (14.09.2026) Das Original-Widget arbeitet mobil mit "1fr"-Spalten - dieselbe Falle wie im restlichen v2: ein langes Wort macht die Spalte breiter als den Bildschirm. Hier nur ueberlagert, subseite/slicer/assets/slicer.css bleibt unveraendert. -------------------------------------------------------------------------- */ @media (max-width: 991px) { .vfs-wrap .vfs-grid { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 980px) { /* iOS vergroessert die ganze Seite, sobald man ein Feld unter 16 px antippt, und stellt die Groesse danach nicht zurueck. Material und Stueckzahl lagen bei 15,2 px. */ .vfs-wrap select, .vfs-wrap input[type=text], .vfs-wrap input[type=email], .vfs-wrap input[type=tel], .vfs-wrap input[type=number], .vfs-wrap textarea { font-size: 16px; } /* Farbfelder waren 34 px - zu klein, um zuverlaessig die richtige Farbe zu treffen. */ .vfs-wrap .vfs-color { width: 40px; height: 40px; } } @media (max-width: 575px) { .vfs-wrap .vfs-row { grid-template-columns: minmax(0, 1fr); } .vfs-wrap .vfs-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vfs-wrap .vfs-card { padding: 18px; } } /* Barrierefreiheit im Preisrechner (26.09.2026, Nacharbeit der Rechtsprüfung). slicer.css bleibt unangetastet - hier stehen nur Überschreibungen für v2: sichtbarer Tastaturfokus und Feldrahmen, die man auch erkennt (der alte Rahmen erreichte 1,26:1, gefordert sind 3:1 für Bedienelemente). */ .vfs-wrap select, .vfs-wrap input[type="text"], .vfs-wrap input[type="email"], .vfs-wrap input[type="tel"], .vfs-wrap input[type="number"], .vfs-wrap textarea { border-color: var(--feldrand); } .vfs-wrap select:focus-visible, .vfs-wrap input:focus-visible, .vfs-wrap textarea:focus-visible, .vfs-wrap button:focus-visible, .vfs-wrap .vfs-btn:focus-visible, .vfs-wrap [tabindex]:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }