/* ========================================================================== Barockreitzentrum Heimsheim — besichtigung.css Modul-Stylesheet fuer den Besichtigungs-Assistenten (Kalender 1 von 2). Reihenfolge im : 1. tokens.css 2. app.css 3. besichtigung.css Alle Farben, Abstaende, Radien und Zeiten kommen aus tokens.css. Keine neuen Hardcodes. Namensraum durchgaengig `bes-` / `.bes`. Animiert werden ausschliesslich transform und opacity. ========================================================================== */ /* ========================================================================== 01 — RAHMEN ========================================================================== */ .bes { display: grid; gap: var(--sp-7); container-type: inline-size; } /* Ersatzinhalt im Mount-Element. Bleibt stehen, solange besichtigung.js nicht gelaufen ist — bewusst NICHT ueber `.js` ausgeblendet, sonst waere die Seite leer, wenn nur das Modul-Script fehlschlaegt. Das Script ersetzt den Inhalt des Mount-Elements erst, wenn es wirklich startet. */ .bes-fallback { display: grid; gap: var(--sp-4); padding: var(--sp-6); background-color: var(--paper-2); border-left: 3px solid var(--brass); border-radius: var(--r-md); } /* ========================================================================== 02 — FORTSCHRITT ========================================================================== */ .bes-rail { display: grid; gap: var(--sp-4); } .bes-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); } .bes-steps__item { display: grid; gap: var(--sp-1); align-content: start; padding-right: var(--sp-3); color: var(--text-muted); } .bes-steps__num { font-family: var(--font-display); font-size: var(--t-small); font-variation-settings: var(--fraunces-small); letter-spacing: var(--ls-num); line-height: 1; color: var(--ink-faint); } .bes-steps__label { font-size: var(--t-micro); font-weight: 600; letter-spacing: var(--ls-label); text-transform: uppercase; line-height: 1.3; } /* Erledigte Schritte messingfarben, der laufende dunkelgruen und fett. */ .bes-steps__item.is-done .bes-steps__num, .bes-steps__item.is-done .bes-steps__label { color: var(--accent-hover); } .bes-steps__item.is-current { color: var(--forest); } .bes-steps__item.is-current .bes-steps__num { color: var(--forest); } .bes-steps__item.is-current .bes-steps__label { color: var(--forest); } /* Nur der laufende und die erledigten Schritte tragen Text auf schmalen Screens — sonst quetschen sich vier Labels in eine Zeile. */ @media (max-width: 559px) { .bes-steps__label { font-size: 10px; letter-spacing: .1em; } } .bes-progress { position: relative; height: 2px; background-color: var(--line); border-radius: var(--r-pill); overflow: hidden; } .bes-progress__fill { display: block; position: absolute; inset: 0; background-color: var(--brass); transform: scaleX(var(--bes-fill, 0)); transform-origin: left center; transition: transform var(--dur-slow) var(--ease-out-expo); } /* ========================================================================== 03 — PANEL ========================================================================== */ .bes__panel { display: grid; gap: var(--sp-6); } .js .bes__panel { opacity: 0; transform: translateY(10px); transition: opacity var(--dur-normal) var(--ease-out-expo), transform var(--dur-normal) var(--ease-out-expo); } .js .bes__panel.is-in { opacity: 1; transform: none; } .bes__head { display: grid; gap: var(--sp-3); } .bes__num { display: flex; align-items: center; gap: var(--sp-4); font-family: var(--font-ui); font-size: var(--t-micro); font-weight: 600; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-muted); } .bes__num b { font-family: var(--font-display); font-size: var(--t-small); font-weight: 500; letter-spacing: var(--ls-num); color: var(--accent-hover); font-variation-settings: var(--fraunces-small); } .bes__num::after { content: ""; flex: 1; height: 1px; background-color: var(--line); } .bes__title { font-family: var(--font-display); font-size: var(--t-h2); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); font-variation-settings: var(--fraunces-heading); max-width: 18ch; } .bes__title:focus { outline: none; } .bes__title:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; } .bes__sub { color: var(--text-muted); max-width: var(--measure); } /* ========================================================================== 04 — AUSWAHLKARTEN (Schritt 1) ========================================================================== */ .bes-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; } .bes-choice-list { display: grid; gap: 0; border-top: var(--hairline) solid var(--line); } .bes-choice { position: relative; display: block; border-bottom: var(--hairline) solid var(--line); cursor: pointer; } .bes-choice input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; } .bes-choice__body { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: var(--sp-2) var(--sp-4); padding: var(--sp-5) var(--sp-4) var(--sp-5) var(--sp-3); border-radius: var(--r-sm); transition: background-color var(--dur-normal) var(--ease-standard), transform var(--dur-fast) var(--ease-out-expo); } @container (min-width: 640px) { .bes-choice__body { grid-template-columns: 2.75rem minmax(0, 1fr) auto; align-items: center; } } .bes-choice__num { grid-row: 1 / span 2; align-self: start; font-family: var(--font-display); font-size: var(--t-small); font-variation-settings: var(--fraunces-small); letter-spacing: var(--ls-num); color: var(--ink-faint); padding-top: .35em; } .bes-choice__title { font-family: var(--font-display); font-size: var(--t-h3); font-variation-settings: var(--fraunces-heading); line-height: var(--lh-heading); letter-spacing: -.012em; color: var(--text); } .bes-choice__text { grid-column: 2; font-size: var(--t-small); color: var(--text-muted); max-width: 46ch; } .bes-choice__meta { grid-column: 2; justify-self: start; display: inline-flex; align-items: center; padding: .35em .9em; margin-top: var(--sp-2); border: 1px solid var(--line-strong); border-radius: var(--r-pill); font-size: var(--t-tiny); color: var(--text-muted); white-space: nowrap; } @container (min-width: 640px) { .bes-choice__meta { grid-column: 3; grid-row: 1 / span 2; margin-top: 0; } .bes-choice__text { grid-column: 2; } } .bes-choice:hover .bes-choice__body { background-color: var(--paper-2); } .bes-choice input:focus-visible + .bes-choice__body { outline: 2px solid var(--focus); outline-offset: -2px; } .bes-choice input:checked + .bes-choice__body { background-color: var(--forest-tint); transform: translateX(2px); } .bes-choice input:checked + .bes-choice__body .bes-choice__num, .bes-choice input:checked + .bes-choice__body .bes-choice__title { color: var(--forest); } .bes-choice input:checked + .bes-choice__body .bes-choice__meta { border-color: var(--brass); color: var(--accent-hover); } /* -------------------------------------------------------------------------- 04b — DIREKTKONTAKT (Telefon-Anliegen in Schritt 1) Kein buchbarer Termin: statt Weiter-Knopf erscheint hier die Nummer. -------------------------------------------------------------------------- */ .bes-direkt-slot:empty { display: none; } .bes-direkt { display: grid; gap: var(--sp-4); padding: var(--sp-6); background-color: var(--forest-tint); border-left: 3px solid var(--forest); border-radius: var(--r-md); } .bes-direkt__label { margin: 0; font-size: var(--t-micro); font-weight: 600; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--accent-hover); } .bes-direkt__title { margin: 0; font-family: var(--font-display); font-size: var(--t-h3); font-variation-settings: var(--fraunces-heading); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); color: var(--forest); } .bes-direkt__text { margin: 0; color: var(--text-muted); max-width: var(--measure); } .bes-direkt__actions { display: grid; gap: var(--sp-4); margin-top: var(--sp-2); } @container (min-width: 560px) { .bes-direkt__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .bes-direkt__actions .btn { width: 100%; } .bes-direkt__nummer { margin: 0; font-family: var(--font-display); font-size: var(--t-h4); font-variation-settings: var(--fraunces-small); font-variant-numeric: tabular-nums; letter-spacing: var(--ls-num); color: var(--forest); } /* ========================================================================== 05 — KALENDER (Schritt 2) ========================================================================== */ .bes-cal { padding: var(--sp-5); background-color: var(--white); border: var(--hairline) solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-sm); } .bes-cal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-5); } .bes-cal__month { font-family: var(--font-display); font-size: var(--t-h4); font-variation-settings: var(--fraunces-small); color: var(--forest); margin: 0; } .bes-cal__nav { display: flex; gap: var(--sp-2); flex: none; } .bes-nav-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--ink); cursor: pointer; transition: background-color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-out-expo), border-color var(--dur-fast) var(--ease-standard); } .bes-nav-btn svg { width: 16px; height: 16px; } .bes-nav-btn:hover:not([disabled]) { background-color: var(--forest-tint); border-color: var(--forest); transform: scale(1.06); } .bes-nav-btn[disabled] { opacity: .3; cursor: not-allowed; } .bes-cal__table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 3px; } .bes-cal__table caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .bes-cal__table th { padding-bottom: var(--sp-2); font-family: var(--font-ui); font-size: var(--t-micro); font-weight: 600; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ink-faint); } .bes-cal__table td { padding: 0; } .bes-day { display: grid; place-items: center; width: 100%; min-height: 44px; aspect-ratio: 1 / 1; border: 1px solid transparent; border-radius: var(--r-sm); background-color: var(--paper); color: var(--ink); font-size: var(--t-small); font-weight: 500; font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-out-expo), border-color var(--dur-fast) var(--ease-standard); } .bes-day:hover:not([disabled]) { background-color: var(--forest-tint); border-color: var(--forest); transform: scale(1.06); } .bes-day[disabled] { background-color: transparent; color: var(--ink-faint); opacity: .55; cursor: not-allowed; } /* Belegte Tage bekommen einen feinen Diagonalstrich, damit „nicht frei" nicht allein ueber die Farbe transportiert wird. */ .bes-day.is-belegt { position: relative; overflow: hidden; background-color: var(--paper-2); opacity: .85; } .bes-day.is-belegt::after { content: ""; position: absolute; left: 50%; top: 50%; width: 150%; height: 1px; background-color: var(--line-strong); transform: translate(-50%, -50%) rotate(-45deg); } .bes-day.is-heute { border-color: var(--line-strong); } .bes-day.is-selected, .bes-day.is-selected:hover { background-color: var(--forest); border-color: var(--forest); color: var(--white); font-weight: 600; } .bes-cal__empty { visibility: hidden; } .bes-legend { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: var(--hairline) solid var(--line); font-size: var(--t-tiny); color: var(--text-muted); } .bes-legend__item { display: inline-flex; align-items: center; gap: var(--sp-2); } .bes-legend__key { width: 14px; height: 14px; flex: none; border-radius: var(--r-xs); border: 1px solid var(--line-strong); background-color: var(--paper); } .bes-legend__key--frei { background-color: var(--forest-tint); border-color: var(--forest); } .bes-legend__key--belegt { background-color: var(--paper-2); } .bes-legend__key--zu { background-color: transparent; opacity: .5; } /* ========================================================================== 06 — ZEITFENSTER ========================================================================== */ .bes-slotbox { display: grid; gap: var(--sp-4); } .bes-slots { display: flex; flex-wrap: wrap; gap: var(--sp-3); } .bes-slot { position: relative; display: block; } .bes-slot input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; } /* Zwei Zeitfenster statt fuenf Uhrzeiten: die Karten duerfen deshalb breiter sein und tragen unter dem Namen eine Einordnung. */ .bes-slot__body { display: grid; gap: var(--sp-1); align-content: center; justify-items: start; min-width: 11rem; min-height: 44px; padding: .8em 1.4em; background-color: var(--white); border: 1px solid var(--line-strong); border-radius: var(--r-md); color: var(--ink); cursor: pointer; transition: background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-out-expo); } .bes-slot__label { font-size: var(--t-small); font-weight: 600; font-variant-numeric: tabular-nums; } .bes-slot__meta { font-size: var(--t-tiny); color: var(--text-muted); } .bes-slot__body:hover { border-color: var(--forest); transform: translateY(-2px); } .bes-slot input:focus-visible + .bes-slot__body { outline: 2px solid var(--focus); outline-offset: 3px; } .bes-slot input:checked + .bes-slot__body { background-color: var(--forest); border-color: var(--forest); color: var(--white); } .bes-slot input:checked + .bes-slot__body .bes-slot__meta { color: var(--text-on-dark-muted); } /* Sonderfall bleibt auch ungewaehlt sichtbar als Ausnahme markiert. */ .bes-slot--sonderfall .bes-slot__body { border-style: dashed; } .bes-slot--sonderfall input:checked + .bes-slot__body { background-color: var(--accent-hover); border-color: var(--accent-hover); border-style: solid; } .bes-alert--sonderfall { margin-top: var(--sp-5); } /* Gewaehlter Tag als ruhige Merkzeile ueber den Zeitfenstern */ .bes-pick { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2) var(--sp-4); padding: var(--sp-4) var(--sp-5); background-color: var(--brass-tint); border-left: 3px solid var(--brass); border-radius: var(--r-sm); } .bes-pick__label { font-size: var(--t-micro); font-weight: 600; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--accent-hover); } .bes-pick__value { font-family: var(--font-display); font-size: var(--t-h4); font-variation-settings: var(--fraunces-small); color: var(--forest); } /* ========================================================================== 07 — FORMULAR (Schritt 3) ========================================================================== */ .bes-form { display: grid; gap: var(--sp-6); } .bes .field__error { display: flex; gap: var(--sp-2); font-size: var(--t-tiny); font-weight: 500; line-height: var(--lh-snug); color: var(--accent-hover); } .bes .field__error::before { content: ""; flex: none; width: 12px; height: 1px; margin-top: .72em; background-color: var(--brass); } .bes .field__error:empty { display: none; } .bes .input[aria-invalid="true"], .bes .select[aria-invalid="true"], .bes .textarea[aria-invalid="true"] { border-color: var(--accent-hover); background-color: var(--brass-tint); } .bes .check[data-invalid="true"] { color: var(--accent-hover); } /* -------------------------------------------------------------------------- 07b — QUALIFIZIERUNG (Schritt 3) Anlass, Zeitraum, Gaestezahl und die Preis-Bestaetigung stehen bewusst als eigener Block mit erklaerendem Vorsatz — nicht als weitere Pflichtfelder, die man nur wegklickt. -------------------------------------------------------------------------- */ .bes-qual { display: grid; gap: var(--sp-5); padding: var(--sp-6); background-color: var(--paper-2); border-radius: var(--r-md); } .bes-qual__title { margin: 0; font-family: var(--font-display); font-size: var(--t-h4); font-variation-settings: var(--fraunces-small); color: var(--forest); } .bes-qual__text { margin: 0; font-size: var(--t-small); color: var(--text-muted); max-width: var(--measure); } .bes-preis { display: grid; gap: var(--sp-4); padding: var(--sp-5); background-color: var(--white); border-left: 3px solid var(--brass); border-radius: var(--r-sm); } .bes-preis__head { display: grid; gap: var(--sp-1); } .bes-preis__label { margin: 0; font-size: var(--t-micro); font-weight: 600; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--accent-hover); } .bes-preis__zahl { margin: 0; font-family: var(--font-display); font-size: var(--t-h3); font-variation-settings: var(--fraunces-heading); line-height: var(--lh-heading); font-variant-numeric: tabular-nums; color: var(--forest); } .bes-preis__meta { margin: 0; font-size: var(--t-tiny); color: var(--text-muted); } /* Honeypot: fuer Menschen unsichtbar, fuer Bots ein Formularfeld wie jedes andere. Kein display:none — manche Bots ueberspringen genau das. */ .bes-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ========================================================================== 08 — ZUSAMMENFASSUNG (Schritt 4) ========================================================================== */ .bes-summary { display: grid; border-top: var(--hairline) solid var(--line); } .bes-summary__row { display: grid; gap: var(--sp-1) var(--sp-5); padding-block: var(--sp-4); border-bottom: var(--hairline) solid var(--line); } @container (min-width: 560px) { .bes-summary__row { grid-template-columns: 13rem minmax(0, 1fr) auto; align-items: baseline; } } .bes-summary__key { font-size: var(--t-micro); font-weight: 600; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-muted); } .bes-summary__val { color: var(--text); overflow-wrap: anywhere; white-space: pre-line; } .bes-summary__val--strong { font-family: var(--font-display); font-size: var(--t-h4); font-variation-settings: var(--fraunces-small); color: var(--forest); } .bes-summary__edit { justify-self: start; } @container (min-width: 560px) { .bes-summary__edit { justify-self: end; } } /* ========================================================================== 09 — AKTIONEN ========================================================================== */ .bes-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); padding-top: var(--sp-5); border-top: var(--hairline) solid var(--line); } .bes-actions__spacer { flex: 1; } .bes-alert { display: grid; gap: var(--sp-2); padding: var(--sp-4) var(--sp-5); background-color: var(--brass-tint); border-left: 3px solid var(--brass); border-radius: var(--r-sm); font-size: var(--t-small); color: var(--ink); } .bes-alert:empty { display: none; } .bes-alert__title { font-weight: 600; } .bes-hint { font-size: var(--t-tiny); color: var(--text-muted); max-width: var(--measure); } /* Ladezustand des Absende-Buttons: nur Deckkraft, kein Layoutsprung. */ .bes .btn[aria-busy="true"] { opacity: .6; pointer-events: none; } /* ========================================================================== 10 — ABSCHLUSS ========================================================================== */ .bes-done { display: grid; gap: var(--sp-6); } .bes-done__mark { display: inline-grid; place-items: center; width: 56px; height: 56px; border: 1px solid var(--brass); border-radius: 50%; color: var(--forest); } .bes-done__mark svg { width: 24px; height: 24px; } .bes-done__list { display: grid; gap: var(--sp-3); border-top: var(--hairline) solid var(--line); padding-top: var(--sp-4); font-size: var(--t-small); color: var(--text-muted); } .bes-done__actions { display: grid; gap: var(--sp-4); } @container (min-width: 560px) { .bes-done__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .bes-done__actions .btn { width: 100%; } /* ========================================================================== 11 — FALLBACK OHNE CONTAINER-QUERIES Aeltere Browser kennen `container-type` nicht. Damit dort nicht ueberall die Schmal-Variante steht, werden die drei Breakpoints per Viewport nachgezogen. Der Assistent steht in der Praxis in `.wrap--text`, deshalb passen 640/560 px Viewportbreite gut genug. ========================================================================== */ @supports not (container-type: inline-size) { @media (min-width: 640px) { .bes-choice__body { grid-template-columns: 2.75rem minmax(0, 1fr) auto; align-items: center; } .bes-choice__meta { grid-column: 3; grid-row: 1 / span 2; margin-top: 0; } } @media (min-width: 560px) { .bes-summary__row { grid-template-columns: 13rem minmax(0, 1fr) auto; align-items: baseline; } .bes-summary__edit { justify-self: end; } .bes-done__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bes-direkt__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } } } /* ========================================================================== 12 — REDUZIERTE BEWEGUNG ========================================================================== */ @media (prefers-reduced-motion: reduce) { .js .bes__panel { opacity: 1 !important; transform: none !important; } .bes-progress__fill { transition: none; } .bes-day:hover:not([disabled]), .bes-nav-btn:hover:not([disabled]), .bes-slot__body:hover, .bes-choice input:checked + .bes-choice__body { transform: none; } }