:root{ --clr-primary: var(--c-signal, #0062AC); --clr-dark: var(--c-bordeaux, #002344); --clr-bg: var(--bg, #F4F8FB); --clr-text: var(--ink, #1A1A1A); --clr-text-light: var(--ink-soft, #5C5C5C); } /* ============================================================ GKMI FLEX · osb-form.css Re-Skin des echten OSBR-Bestellformulars im Liquid-Glass-Look. ------------------------------------------------------------ Nutzt die globalen Design-Tokens aus style.css (--ink, --glass*, --accent, --c-signal, --ease, --r-* ...). Aendert KEINE IDs, name-Attribute, data-step-Werte oder Formularstruktur. Alles unter #bookingFormSection gescoped. ============================================================ */ /* Formular-eigene Tokens (themenabhaengig) */ [data-theme="light"] #bookingFormSection{ --field:rgba(255,255,255,.62); --field-edge:rgba(0,35,68,.12); } [data-theme="dark"] #bookingFormSection{ --field:rgba(255,255,255,.05); --field-edge:rgba(255,255,255,.13); } #bookingFormSection{ --err:#DC2626; --ok:#1F9D55; color:var(--ink); } /* ---- Karten-Wrapper (Glas kommt vom .booking-form-container) ---- */ #bookingFormSection .form-card{ background:transparent;border:none;box-shadow:none;padding:0; } #bookingFormSection .form-card-header{text-align:center;margin-bottom:26px} #bookingFormSection .form-card-header h3{ font-family:var(--font-display);font-weight:600; font-size:clamp(1.5rem,2.6vw,1.9rem);color:var(--ink);margin-bottom:8px; } #bookingFormSection .pflichtfelder-hinweis{ font-size:.83rem;color:var(--ink-soft); } /* ---- Fortschritts-Anzeige ---- */ #bookingFormSection .progress-bar{ display:flex;justify-content:space-between;position:relative; margin:6px 4px 30px; } #bookingFormSection .progress-bar::before{ content:'';position:absolute;top:16px;left:14px;right:14px;height:2px; background:var(--hairline); } #bookingFormSection .progress-step{ position:relative;z-index:2;flex:1; display:flex;flex-direction:column;align-items:center;gap:7px; } #bookingFormSection .progress-num{ width:34px;height:34px;border-radius:50%; display:flex;align-items:center;justify-content:center; font-size:.85rem;font-weight:700; background:var(--glass-strong); -webkit-backdrop-filter:blur(10px) saturate(170%); backdrop-filter:blur(10px) saturate(170%); border:1px solid var(--glass-edge);color:var(--ink-soft); box-shadow:inset 0 1.5px 0 var(--glass-hi), inset 0 -6px 8px -8px rgba(0,35,68,.30); transition:.4s var(--ease); } #bookingFormSection .progress-label{ font-size:.68rem;font-weight:600;letter-spacing:.04em; text-transform:uppercase;color:var(--ink-faint); text-align:center; } #bookingFormSection .progress-step.active .progress-num{ background:var(--ink);border-color:var(--ink);color:var(--bg); transform:scale(1.08); } #bookingFormSection .progress-step.active .progress-label{color:var(--ink)} #bookingFormSection .progress-step.done .progress-num{ background:var(--c-signal);border-color:var(--c-signal);color:#fff; } /* ---- Schritte ---- */ #bookingFormSection .form-step{display:none} #bookingFormSection .form-step.active{display:block;animation:osbStepIn .45s var(--ease)} @keyframes osbStepIn{ from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} } #bookingFormSection .form-step>h4{ font-family:var(--font-display);font-weight:600;font-size:1.16rem; color:var(--ink);margin-bottom:18px; } /* ---- Felder ---- */ #bookingFormSection .form-row{margin-bottom:4px} #bookingFormSection .form-row.cols-2{ display:grid;grid-template-columns:1fr 1fr;gap:14px; } #bookingFormSection .form-group{display:flex;flex-direction:column;margin-bottom:15px} #bookingFormSection .form-group label{ font-size:.82rem;font-weight:600;color:var(--ink);margin-bottom:7px; } #bookingFormSection .req{color:var(--c-signal)} #bookingFormSection .form-group input[type="text"], #bookingFormSection .form-group input[type="email"], #bookingFormSection .form-group input[type="tel"], #bookingFormSection .form-group input[type="number"], #bookingFormSection .form-group select, #bookingFormSection .form-group textarea{ width:100%;font-family:var(--font-body);font-size:.95rem; color:var(--ink);padding:13px 15px;border-radius:var(--r-sm); background:var(--field);border:1px solid var(--field-edge); -webkit-backdrop-filter:blur(8px) saturate(150%); backdrop-filter:blur(8px) saturate(150%); box-shadow:inset 0 1px 0 rgba(255,255,255,.75), inset 0 2px 6px var(--glass-lo); outline:none;transition:.3s var(--ease); } [data-theme="dark"] #bookingFormSection .form-group input[type="text"], [data-theme="dark"] #bookingFormSection .form-group input[type="email"], [data-theme="dark"] #bookingFormSection .form-group input[type="tel"], [data-theme="dark"] #bookingFormSection .form-group input[type="number"], [data-theme="dark"] #bookingFormSection .form-group select, [data-theme="dark"] #bookingFormSection .form-group textarea{ box-shadow:inset 0 1px 0 rgba(255,255,255,.14), inset 0 2px 6px var(--glass-lo); } #bookingFormSection .form-group textarea{resize:vertical;min-height:90px} #bookingFormSection .form-group input::placeholder, #bookingFormSection .form-group textarea::placeholder{color:var(--ink-faint)} #bookingFormSection .form-group input:focus, #bookingFormSection .form-group select:focus, #bookingFormSection .form-group textarea:focus{ border-color:var(--c-signal); box-shadow:inset 0 2px 6px var(--glass-lo),0 0 0 4px rgba(0,98,172,.14); } #bookingFormSection .form-group input.error, #bookingFormSection .form-group select.error, #bookingFormSection .form-group textarea.error{ border-color:var(--err); box-shadow:inset 0 2px 6px var(--glass-lo),0 0 0 4px rgba(220,38,38,.12); } #bookingFormSection .error-msg{ font-size:.78rem;color:var(--err);margin-top:6px; display:none; /* nur bei tatsaechlichem Fehler sichtbar */ } /* Fehlermeldung NUR anzeigen, wenn das zugehoerige Feld den Fehlerzustand (.error) hat – und dabei kurz auffaellig aufflackern lassen. */ #bookingFormSection .form-group input.error ~ .error-msg, #bookingFormSection .form-group select.error ~ .error-msg, #bookingFormSection .form-group textarea.error ~ .error-msg{ display:block; animation:osbErrFlash .5s cubic-bezier(.36,.07,.19,.97); } @keyframes osbErrFlash{ 0%{opacity:0;transform:translateY(-3px)} 25%{opacity:1} 35%,65%{transform:translateX(-2px)} 50%,80%{transform:translateX(2px)} 100%{opacity:1;transform:translateX(0)} } #bookingFormSection .form-help{ font-size:.78rem;color:var(--ink-faint);margin-top:6px;line-height:1.5; } /* ---- Auswahl-Karten (Paket / Zahlung) ---- */ #bookingFormSection .option-card{ display:block;cursor:pointer; padding:16px 18px;border-radius:var(--r-md);margin-bottom:12px; background:var(--glass); -webkit-backdrop-filter:blur(12px) saturate(170%); backdrop-filter:blur(12px) saturate(170%); border:1px solid var(--glass-edge); box-shadow:inset 0 1.5px 0 var(--glass-hi), inset 0 -10px 14px -14px rgba(0,35,68,.28); transition:.3s var(--ease); } #bookingFormSection .option-card:hover{transform:translateY(-2px)} #bookingFormSection .option-card.selected{ border-color:var(--c-signal); box-shadow:inset 0 1.5px 0 var(--glass-hi), inset 0 -10px 14px -14px rgba(0,35,68,.28), 0 0 0 1px var(--c-signal), 0 16px 32px -16px rgba(0,98,172,.4); } #bookingFormSection .option-card-title{ font-weight:600;font-size:.98rem;color:var(--ink); } #bookingFormSection .option-card-desc{ font-size:.84rem;color:var(--ink-soft);margin-top:3px; } #bookingFormSection .zahlung-error{ font-size:.8rem;color:var(--err);margin-top:4px; display:none; } #bookingFormSection .zahlung-error.show{display:block;animation:osbErrFlash .4s var(--ease)} /* ---- Aufklappende Bereiche ---- */ #bookingFormSection .conditional{display:none} #bookingFormSection .conditional.show{display:block;animation:osbStepIn .35s var(--ease)} /* ---- Info-Boxen (Bank / SEPA / PayPal) ---- */ #bookingFormSection .bank-info, #bookingFormSection .sepa-info, #bookingFormSection .paypal-info{ background:var(--glass-strong); border:1px solid var(--glass-edge); border-left:3px solid var(--c-signal); border-radius:0 var(--r-sm) var(--r-sm) 0; padding:16px 18px;margin-top:6px; font-size:.88rem;line-height:1.6;color:var(--ink-soft); } #bookingFormSection .paypal-info{border-left-color:#0070BA} #bookingFormSection .bank-info table, #bookingFormSection .sepa-info table, #bookingFormSection .paypal-info table{ width:100%;margin-top:10px;border-collapse:collapse; } #bookingFormSection .bank-info td, #bookingFormSection .sepa-info td{ padding:5px 8px 5px 0;font-size:.86rem;vertical-align:top; } #bookingFormSection .bank-info td:first-child, #bookingFormSection .sepa-info td:first-child{ color:var(--ink-faint);white-space:nowrap; } #bookingFormSection .bank-info strong, #bookingFormSection .sepa-info strong, #bookingFormSection .paypal-info strong{color:var(--ink)} #bookingFormSection .sepa-hint{ font-size:.78rem;color:var(--ink-faint);line-height:1.55;margin-top:8px; } /* ---- Paket-Zusammenfassung (Schritt 5) ---- */ #bookingFormSection #paketSummary{ border-radius:0 var(--r-sm) var(--r-sm) 0!important; } #bookingFormSection .price-big{ font-weight:700;color:var(--c-signal);font-size:1.08rem; } /* ---- Rabatt-Anzeige: alter Preis durchgestrichen, neuer Preis rot ---- */ #bookingFormSection .osb-price-old, #bookingFormSection .price-big-old{ text-decoration:line-through; text-decoration-thickness:2px; opacity:.5; color:inherit; font-weight:400; margin-right:.18em; } #bookingFormSection .osb-price-new, #bookingFormSection .price-big-new{ color:#d8232a; font-weight:800; } /* ---- AGB-Checkbox ---- */ #bookingFormSection .checkbox-wrap{ display:flex;align-items:flex-start;gap:12px; background:var(--glass); border:1px solid var(--glass-edge);border-radius:var(--r-sm); padding:14px 16px; } #bookingFormSection .checkbox-wrap.error{ border-color:var(--err);background:rgba(220,38,38,.05); } #bookingFormSection .checkbox-wrap input[type="checkbox"]{ width:18px;height:18px;margin-top:2px;flex-shrink:0; accent-color:var(--c-signal);cursor:pointer; } #bookingFormSection .checkbox-wrap label{ font-size:.85rem;line-height:1.55;color:var(--ink-soft); } #bookingFormSection .checkbox-wrap label a{ color:var(--c-signal);text-decoration:underline; } /* ---- Buttons ---- */ #bookingFormSection .btn-actions{ display:flex;justify-content:space-between;gap:12px;margin-top:28px; } #bookingFormSection .btn-actions:has(.btn-next:only-child), #bookingFormSection .btn-actions:has(.btn-back:only-child){ justify-content:flex-end; } #bookingFormSection .btn-next, #bookingFormSection .btn-submit{ position:relative;display:inline-flex;align-items:center;justify-content:center; gap:8px;padding:14px 32px;border:none;border-radius:50px; background:var(--c-signal);color:#fff; font-family:var(--font-body);font-weight:600;font-size:.95rem;cursor:pointer; box-shadow:0 14px 30px -12px rgba(0,98,172,.5); overflow:hidden;will-change:transform; /* JS (button-fx) steuert transform */ transition:box-shadow .3s var(--ease); } #bookingFormSection .btn-next:hover, #bookingFormSection .btn-submit:hover{ box-shadow:0 20px 40px -12px rgba(0,98,172,.55); } #bookingFormSection .btn-back{ display:inline-flex;align-items:center;gap:8px; padding:13px 26px;border-radius:50px;cursor:pointer; background:var(--glass-strong);color:var(--ink); border:1px solid var(--glass-edge); -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px); box-shadow:inset 0 1px 0 var(--glass-hi); font-family:var(--font-body);font-weight:600;font-size:.95rem; will-change:transform; /* JS (button-fx) steuert transform */ transition:box-shadow .3s var(--ease); } #bookingFormSection .btn-back:hover{box-shadow:inset 0 1px 0 var(--glass-hi),0 14px 30px -14px rgba(0,35,68,.30)} #bookingFormSection .btn-submit{width:100%;margin-top:18px;padding:16px 32px} #bookingFormSection .btn-submit:disabled{ opacity:.55;cursor:not-allowed;transform:none;box-shadow:none; } #bookingFormSection .spinner{ display:none;width:18px;height:18px; border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff; border-radius:50%;animation:osbSpin .7s linear infinite; } @keyframes osbSpin{to{transform:rotate(360deg)}} /* ---- Erfolgs-Meldung ---- */ #bookingFormSection .success-message{display:none;text-align:center;padding:20px 8px} #bookingFormSection .success-message.active{display:block;animation:osbStepIn .5s var(--ease)} #bookingFormSection .success-icon{ width:64px;height:64px;margin:0 auto 18px;border-radius:50%; background:var(--ok);color:#fff; display:flex;align-items:center;justify-content:center; box-shadow:0 16px 32px -12px rgba(31,157,85,.5); } #bookingFormSection .success-icon svg{width:32px;height:32px} #bookingFormSection .success-message h3{ font-family:var(--font-display);font-size:1.5rem;font-weight:600; color:var(--ink);margin-bottom:10px; } #bookingFormSection #successLead{ font-size:.95rem;color:var(--ink-soft);line-height:1.6; max-width:460px;margin:0 auto 18px; } #bookingFormSection .doi-notice{ background:var(--glass-strong); border:1px solid color-mix(in srgb,var(--c-gold) 40%,var(--glass-edge)); border-radius:var(--r-sm); padding:14px 18px;margin:0 auto 22px;max-width:520px; font-size:.86rem;line-height:1.55;color:var(--ink-soft);text-align:left; } #bookingFormSection .doi-notice strong{color:var(--ink)} #bookingFormSection .success-data{ text-align:left;background:var(--glass); border:1px solid var(--glass-edge);border-radius:var(--r-sm); padding:18px 20px;max-width:520px;margin:0 auto; } #bookingFormSection .success-data h4{ font-family:var(--font-display);font-size:.98rem;font-weight:600; color:var(--ink);margin-bottom:12px; } #bookingFormSection #submittedData{ display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0; } #bookingFormSection #submittedData dt{ font-size:.84rem;font-weight:600;color:var(--ink-soft); } #bookingFormSection #submittedData dd{ font-size:.84rem;color:var(--ink);margin:0; } /* ---- Responsive ---- */ @media(max-width:560px){ #bookingFormSection .form-row.cols-2{grid-template-columns:1fr} #bookingFormSection .progress-label{display:none} #bookingFormSection .btn-next, #bookingFormSection .btn-back{padding:13px 22px} } /* Shine-Sweep: Lichtstreifen wandert beim Hover ueber Weiter/Absenden. */ #bookingFormSection .btn-next::before, #bookingFormSection .btn-submit::before{ content:'';position:absolute;top:0;left:-120%;width:70%;height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent); transform:skewX(-18deg); transition:left .6s var(--ease); pointer-events:none; } #bookingFormSection .btn-next:hover::before, #bookingFormSection .btn-submit:hover::before{left:130%} @media (prefers-reduced-motion:reduce){ #bookingFormSection .btn-next::before, #bookingFormSection .btn-submit::before{transition:none;display:none} } /* ---- Blue Liquid Glass fuer Weiter/Absenden (wie Haupt-CTAs) ---- */ #bookingFormSection .btn-next, #bookingFormSection .btn-submit{ background:color-mix(in srgb, var(--c-signal,#0062AC) 86%, transparent); -webkit-backdrop-filter:blur(8px) saturate(180%); backdrop-filter:blur(8px) saturate(180%); border:1px solid rgba(255,255,255,.38); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.55), inset 0 -10px 14px -12px rgba(0,20,40,.55), inset 8px 0 10px -10px rgba(255,255,255,.30), inset -8px 0 10px -10px rgba(255,255,255,.30), 0 14px 30px -12px rgba(0,98,172,.55); } #bookingFormSection .btn-next:hover, #bookingFormSection .btn-submit:hover{ box-shadow: inset 0 1.5px 0 rgba(255,255,255,.65), inset 0 -10px 14px -12px rgba(0,20,40,.55), 0 20px 40px -12px rgba(0,98,172,.60); } @supports (backdrop-filter: url('#gkmiLgRefract')){ #bookingFormSection .btn-next, #bookingFormSection .btn-submit{ -webkit-backdrop-filter:url('#gkmiLgRefract') blur(3px) saturate(180%); backdrop-filter:url('#gkmiLgRefract') blur(3px) saturate(180%); } } /* Deaktivierter Absenden-Button: flaches Glas, kein Filter */ #bookingFormSection .btn-submit:disabled{ -webkit-backdrop-filter:none;backdrop-filter:none; background:color-mix(in srgb, var(--c-signal,#0062AC) 64%, transparent); } [data-theme="dark"] #bookingFormSection .btn-next, [data-theme="dark"] #bookingFormSection .btn-submit{ border-color:rgba(255,255,255,.22); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.30), inset 0 -10px 14px -12px rgba(0,0,0,.60), 0 14px 30px -12px rgba(0,0,0,.55); } /* ============================================================ GLASS-SELECT - eigenes Dropdown im Liquid-Glass-Look (js/glass-select.js). Das native