/* ========================================================================== corelay - Unterseite „Termin buchen“ (termin.html) -------------------------------------------------------------------------- Enthaelt ausschliesslich die Bausteine, die es nur auf dieser Seite gibt: den zweispaltigen Hauptbereich aus Buchungs-Widget und Kontaktformular, die Vergroesserung des Widgets, die Auswahlzeile unter dem Kalender sowie die Bloecke „Was dich erwartet“ und „Lieber direkt?“. Das Buchungs-Widget benutzt bewusst dasselbe Markup und dieselben Klassen wie partials/stimmen-termin.html (Praefix .stimmen-), damit js/main.js sein neu aufgebautes Kalenderraster hier genauso stylen kann wie auf der Startseite. css/sections/stimmen-termin.css liefert die Grundform, diese Datei vergroessert sie ueber den zusaetzlichen Haken .termin-widget - deshalb steht sie im hinter stimmen-termin.css. Flaechen, Sektionsabstaende, Typo-Skala, Karten, Icon-Kacheln, Haekchen- listen, Buttons und Formularfelder kommen unveraendert aus css/base.css und css/layout.css. Alle eigenen Selektoren tragen den Praefix .termin-. Inhalt 1. Hauptbereich - zweispaltiges Raster 2. Spaltenkoepfe 3. Buchungs-Widget - Vergroesserung 4. Kalender im grossen Widget 5. Zeitfenster im grossen Widget 6. Auswahlzeile unter dem Kalender 7. Merkmalliste unter dem Widget 8. Formularkarte 9. Formular - Felder, Pflichtfeld-Stern, Absenden 10. Hinweis unter dem Formular 11. Karten „Was dich erwartet“ 12. Direkte Kontaktwege 13. Ruhiger Abschluss 14. Staffelung des Einblendens 15. Breakpoint ab 1200px - Widget zweispaltig 16. Breakpoint 980px - Hauptbereich untereinander 17. Breakpoint 640px 18. Breakpoint 400px 19. Breakpoint 340px ========================================================================== */ /* -------------------------------------------------------------------------- 1. Hauptbereich - zweispaltiges Raster -------------------------------------------------------------------------- Links das Buchungs-Widget, rechts das Formular. minmax(0, …) verhindert, dass eine Spalte durch ihren Inhalt breiter wird als ihr Anteil - Grundlage dafuer, dass ab 320px nichts waagerecht scrollt. Ab 980px stapeln sich die Spalten (Abschnitt 16). -------------------------------------------------------------------------- */ .termin-haupt-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 3.4vw, 48px); align-items: start; } /* Beide Spalten sind eigene Sektionen mit eigener Ueberschrift */ .termin-spalte { display: flex; flex-direction: column; min-width: 0; scroll-margin-top: calc(var(--header-h) + 16px); } /* -------------------------------------------------------------------------- 2. Spaltenkoepfe -------------------------------------------------------------------------- */ .termin-spalte-kopf { margin-bottom: var(--sp-6); } .termin-spalte-kopf .h3 { margin-bottom: var(--sp-3); } .termin-spalte-text { max-width: 46ch; font-size: var(--fs-body-sm); line-height: var(--lh-body); color: var(--t-on-light-soft); } /* -------------------------------------------------------------------------- 3. Buchungs-Widget - Vergroesserung -------------------------------------------------------------------------- .stimmen-widget liefert Flaeche (--paper-100), Radius und Grundabstand. .termin-widget setzt nur die groesseren Masse dieser Seite. Da diese Datei nach css/sections/stimmen-termin.css geladen wird, gewinnt sie bei gleicher Spezifitaet - auch gegen deren Breakpoint-Regeln. Grundzustand ist einspaltig: Kalender oben, Zeitfenster darunter. Erst ab 1200px ist die Spalte breit genug fuer zwei Spalten (Abschnitt 15). -------------------------------------------------------------------------- */ .termin-widget { padding: clamp(18px, 2.2vw, 26px); } .termin-widget .stimmen-widget-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); } /* -------------------------------------------------------------------------- 4. Kalender im grossen Widget -------------------------------------------------------------------------- Zellen 38px statt 30px, Kopfzeile und Wochentagszeile entsprechend groesser. Die Hoechstbreite haelt das Raster im einspaltigen Zustand zusammen, damit die Tage nicht auseinanderfallen. -------------------------------------------------------------------------- */ .termin-widget .stimmen-kalender { width: 100%; max-width: 320px; margin-inline: auto; } .termin-widget .stimmen-kal-kopf { grid-template-columns: 32px 1fr 32px; margin-bottom: var(--sp-4); } .termin-widget .stimmen-kal-nav { width: 32px; height: 32px; } .termin-widget .stimmen-kal-nav .ico { width: 16px; height: 16px; } .termin-widget .stimmen-kal-label { font-size: 17px; } .termin-widget .stimmen-kal-woche { margin-bottom: var(--sp-2); font-size: 11.5px; } .termin-widget .stimmen-kal-raster { row-gap: 6px; } .termin-widget .stimmen-tag { width: 38px; height: 38px; font-size: 14px; } /* -------------------------------------------------------------------------- 5. Zeitfenster im grossen Widget -------------------------------------------------------------------------- Weiterhin drei Spalten, die Pillen sind 40px hoch. -------------------------------------------------------------------------- */ .termin-widget .stimmen-zeiten { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .termin-widget .stimmen-zeit { height: 40px; font-size: 14px; } /* -------------------------------------------------------------------------- 6. Auswahlzeile unter dem Kalender -------------------------------------------------------------------------- Zeigt die aktuelle Auswahl im Klartext. Der Wert steckt allein in [data-selection], damit js/main.js nur dessen Textinhalt ersetzen muss. Das Kalender-Symbol liegt als Data-URI im ::before und bleibt deshalb erhalten, egal was das Skript in das Element schreibt. -------------------------------------------------------------------------- */ .termin-auswahl { display: flex; align-items: center; gap: 12px; margin-top: var(--sp-5); padding: 12px 16px; background-color: var(--paper); border: 1px solid var(--paper-200); border-radius: var(--r-field); } .termin-auswahl::before { content: ""; width: 20px; height: 20px; flex: none; background-repeat: no-repeat; background-size: 20px 20px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F80FF' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.6' width='18' height='16.4' rx='2.4'/%3E%3Cpath d='M8.2 2.6v4'/%3E%3Cpath d='M15.8 2.6v4'/%3E%3Cpath d='M3 9.6h18'/%3E%3C/svg%3E"); } .termin-auswahl-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .termin-auswahl-label { font-size: var(--fs-micro); font-weight: var(--fw-medium); line-height: 1.4; color: var(--t-on-light-mute); } .termin-auswahl-wert { font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); line-height: 1.4; color: var(--t-on-light); } .termin-widget .termin-bestaetigen { min-height: 48px; margin-top: var(--sp-4); } /* -------------------------------------------------------------------------- 7. Merkmalliste unter dem Widget -------------------------------------------------------------------------- */ .termin-merkmale { margin-top: var(--sp-7); } /* -------------------------------------------------------------------------- 8. Formularkarte -------------------------------------------------------------------------- */ .termin-form-karte { padding: clamp(20px, 2.6vw, 30px); background-color: var(--paper); border: 1px solid var(--paper-200); border-radius: var(--r-card); box-shadow: var(--sh-card); } .termin-form-karte .h3 { margin-bottom: var(--sp-3); } .termin-form-kopf { margin-bottom: var(--sp-6); } /* -------------------------------------------------------------------------- 9. Formular - Felder, Pflichtfeld-Stern, Absenden -------------------------------------------------------------------------- .field, .field-error und .checkbox-row kommen aus css/layout.css. Hier stehen nur die Zeile aus Name und E-Mail sowie der Absenden-Bereich. -------------------------------------------------------------------------- */ .termin-feld-paar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); } /* Innerhalb des Paares greift der Standardabstand zwischen Feldern nicht */ .termin-feld-paar .field + .field { margin-top: 0; } /* Dafuer haelt das Paar den normalen Abstand zum naechsten Feld */ .termin-feld-paar + .field { margin-top: var(--sp-4); } /* Fehlerzeile der Datenschutz-Einwilligung sitzt ausserhalb von .field */ .checkbox-row + .field-error { margin-top: 6px; } .termin-pflicht { color: var(--blue-500); } .termin-optional { font-weight: var(--fw-regular); color: var(--t-on-light-mute); } .termin-datenschutz { margin-top: var(--sp-5); } .termin-absenden { margin-top: var(--sp-6); } .termin-absenden .btn { min-height: 48px; } .termin-pflicht-hinweis { margin-top: var(--sp-3); color: var(--t-on-light-mute); } /* -------------------------------------------------------------------------- 10. Hinweis unter dem Formular -------------------------------------------------------------------------- */ .termin-form-hinweis { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--paper-200); color: var(--t-on-light-mute); } /* -------------------------------------------------------------------------- 11. Karten „Was dich erwartet“ -------------------------------------------------------------------------- */ .termin-erwartet-card .icon-tile { margin-bottom: var(--sp-4); } /* Traegt im Markup zusaetzlich .eyebrow - hier nur Farbe und Abstand */ .termin-erwartet-nr { margin-bottom: 6px; color: var(--t-on-light-mute); } /* -------------------------------------------------------------------------- 12. Direkte Kontaktwege -------------------------------------------------------------------------- Drei ruhige Kaesten ohne Hover-Effekt: Icon, Label, Wert, Zusatzzeile. -------------------------------------------------------------------------- */ .termin-wege { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } .termin-weg { display: flex; flex-direction: column; gap: var(--sp-3); padding: 22px; background-color: var(--paper-50); border: 1px solid var(--paper-200); border-radius: var(--r-card); } .termin-weg-label { color: var(--t-on-light-mute); } /* Traegt im Markup zusaetzlich .card-title - hier nur Farbe und Umbruch */ .termin-weg-wert { color: var(--t-on-light); overflow-wrap: anywhere; } .termin-weg-note { font-size: 13px; line-height: 1.55; color: var(--t-on-light-soft); } /* -------------------------------------------------------------------------- 13. Ruhiger Abschluss (statt eines CTA-Bandes) -------------------------------------------------------------------------- */ .termin-abschluss { max-width: 620px; margin: clamp(48px, 5vw, 64px) auto 0; padding-top: clamp(32px, 4vw, 44px); border-top: 1px solid var(--paper-200); text-align: center; } .termin-abschluss p { color: var(--t-on-light-soft); } .termin-abschluss-script { margin-top: var(--sp-5); color: var(--t-on-light); } /* -------------------------------------------------------------------------- 14. Staffelung des Einblendens -------------------------------------------------------------------------- js/main.js setzt .is-visible, die Verzoegerung steuert --reveal-delay. -------------------------------------------------------------------------- */ .termin-spalte-kopf { --reveal-delay: 0ms; } .termin-widget { --reveal-delay: 80ms; } .termin-merkmale { --reveal-delay: 160ms; } .termin-form-karte { --reveal-delay: 120ms; } .termin-erwartet-card:nth-child(1) { --reveal-delay: 0ms; } .termin-erwartet-card:nth-child(2) { --reveal-delay: 90ms; } .termin-erwartet-card:nth-child(3) { --reveal-delay: 180ms; } .termin-weg:nth-child(1) { --reveal-delay: 0ms; } .termin-weg:nth-child(2) { --reveal-delay: 90ms; } .termin-weg:nth-child(3) { --reveal-delay: 180ms; } /* -------------------------------------------------------------------------- 15. Breakpoint ab 1200px - Widget zweispaltig -------------------------------------------------------------------------- Erst ab hier ist die linke Spalte breit genug, damit Kalender (7 x 38px) und Zeitfenster nebeneinander passen, ohne dass Zellen ueberlappen. -------------------------------------------------------------------------- */ @media (min-width: 1200px) { .termin-widget .stimmen-widget-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--sp-6); align-items: start; } .termin-widget .stimmen-kalender { max-width: none; margin-inline: 0; } } /* -------------------------------------------------------------------------- 16. Breakpoint 980px - Hauptbereich untereinander -------------------------------------------------------------------------- Buchung oben, Formular darunter. Beide Spalten laufen auf Lesebreite. -------------------------------------------------------------------------- */ @media (max-width: 979.98px) { .termin-haupt-grid { grid-template-columns: minmax(0, 1fr); gap: clamp(36px, 6vw, 56px); } .termin-spalte { width: 100%; max-width: 680px; margin-inline: auto; } .termin-wege { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* -------------------------------------------------------------------------- 17. Breakpoint 640px -------------------------------------------------------------------------- */ @media (max-width: 639.98px) { .termin-feld-paar { grid-template-columns: minmax(0, 1fr); } /* Im einspaltigen Zustand greift der normale Feldabstand wieder */ .termin-feld-paar .field + .field { margin-top: var(--sp-4); } .termin-wege { grid-template-columns: minmax(0, 1fr); } .termin-absenden .btn { width: 100%; } } /* -------------------------------------------------------------------------- 18. Breakpoint 400px -------------------------------------------------------------------------- */ @media (max-width: 399.98px) { .termin-widget .stimmen-tag { width: 34px; height: 34px; font-size: 13.5px; } .termin-widget .stimmen-zeit { height: 38px; padding: 0 4px; font-size: 13px; } .termin-widget .stimmen-zeiten { gap: 8px; } .termin-auswahl { padding: 12px 14px; gap: 10px; } } /* -------------------------------------------------------------------------- 19. Breakpoint 340px -------------------------------------------------------------------------- */ @media (max-width: 339.98px) { .termin-widget .stimmen-tag { width: 30px; height: 30px; font-size: 13px; } .termin-widget .stimmen-kal-label { font-size: 15.5px; } .termin-weg, .termin-form-karte { padding: 18px; } }