/* ============================================================= * booking.css — Booking-Engine (Phase 8.4) * Portiert aus mockups/buchungsstrecke.html (casaone-Repo). * Farbschema CASA One: Slate #0f172a, Gletscher-Türkis #42cbdd. * ============================================================= */ /* Brand-Variablen werden aus dem zentralen Theme gespeist (Tabelle korrespondenz_theme, gepflegt im casaone-Admin → "Design Briefvorlagen" bzw. "Design Buchungsstrecke" — beide editieren dasselbe Theme). --theme-* wird von BT_bookingRenderThemeStyle() im als :root{} Block injiziert. Fallback-Werte hier sind identisch mit den CASA-One- Standarddefaults (BT_korrespondenzThemeDefaults()), damit Booking und Korrespondenz auch ohne aktives Theme exakt gleich aussehen. --glacier-dark bleibt lokal (vom Akzent abgeleiteter Hover-Ton). */ :root{ --slate: var(--theme-text-heading, #0F172A); --slate-2: var(--theme-accent-primary-2, #22334A); --glacier: var(--theme-accent-primary, #42CBDD); --glacier-dark: #2a8fa0; --snow: var(--theme-surface-bg, #F9FAFB); --line: var(--theme-border, #E5E7EB); --ink: var(--theme-text-default, #374151); --muted: var(--theme-text-muted, #6B7280); /* Status-Farben kommen jetzt zentral aus dem Theme (success/danger/warning). --gold bleibt lokal (semantisch "Angebot offen"), --ok wird zu success. */ --gold:#c9a14a; --ok: var(--theme-accent-success, #16A34A); --danger: var(--theme-accent-danger, #DC2626); --warning: var(--theme-accent-warning, #B45309); --shadow:0 8px 30px rgba(15,23,42,.10); /* Kalender-Tints (Variante B) — neutrale Hell-Toene, theme-unabhaengig: gewaehlter Zeitraum / frei / Wochenende. */ --bk-range:#d9eef6; --bk-free:#f4f9fc; --bk-weekend:#e7eef4; } *{box-sizing:border-box;margin:0;padding:0} body{ font-family:var(--theme-font-family, -apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif); color:var(--ink);background:var(--snow);line-height:1.5;-webkit-font-smoothing:antialiased; } h1,h2,h3,.serif{ /* Heading-Font folgt dem Theme; .serif behaelt explizit Georgia als Opt-in fuer Stellen, die bewusst serifig bleiben sollen. */ font-family:var(--theme-font-heading, var(--theme-font-family, Georgia,"Times New Roman",serif)); font-weight:600;color:var(--slate); } .serif{font-family:Georgia,"Times New Roman",serif} button{font-family:inherit;cursor:pointer;border:none} a{color:inherit} .muted{color:var(--muted)} .hidden{display:none} /* ---- Top bar (3-Spalten-Grid: Home | Logo mittig | Kontakt/Sprache) ---- */ /* Heller Header (kein blauer Hintergrund) — wie das Forsthofgut-Vorbild. */ .topbar{ background:#fff;color:var(--slate);padding:14px 26px; display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px; border-bottom:1px solid var(--line); } .topbar-left{display:flex;align-items:center;justify-self:start;min-width:0} .topbar-center{display:flex;align-items:center;justify-content:center;min-width:0} .topbar-right{display:flex;align-items:center;gap:10px;justify-self:end} /* Home-Button (zurueck zur Hotel-Website) */ .tb-home{display:inline-flex;align-items:center;gap:8px;color:var(--muted); text-decoration:none;font-size:13px;font-weight:600;padding:6px 10px; border-radius:8px;transition:background .15s,color .15s} .tb-home:hover{color:var(--slate);background:rgba(15,23,42,.05)} .tb-home i{font-size:13px} /* Zentriertes Logo — Breite/Höhe kommen als inline-Style (im Window einstellbar); ohne Vorgabe greift der Auto-Fallback (natürliche Größe, nach oben gekappt). */ .tb-logo{display:inline-flex;align-items:center;max-width:100%} /* Keine max-height hier — sonst kappt sie die im Window eingestellte Höhe (max-height schlaegt den Inline-Wert). Breite/Höhe steuert der Inline-Style; ohne Vorgabe greift die natürliche Größe (durch die Default-Breite bezogen). */ .tb-logo img{max-width:100%;width:auto;height:auto; display:block;object-fit:contain} /* Fallback ohne Logo: Hotelname als Wortmarke */ .brand{display:flex;align-items:baseline;gap:10px} .brand .mark{ font-family:Georgia,serif;font-size:22px;letter-spacing:.5px;color:var(--slate); } /* Kontakt-Icons (Mail / Telefon) — flaches Design */ .tb-icon{display:inline-grid;place-items:center;width:36px;height:36px; border-radius:8px;color:var(--muted);text-decoration:none;font-size:15px; transition:background .15s,color .15s} .tb-icon:hover{color:var(--slate);background:rgba(15,23,42,.05)} /* ---- Sprachumschalter ---- */ .lang-switch{display:flex;gap:4px;flex-shrink:0} .lang-item{font-size:12px;font-weight:700;text-decoration:none;color:var(--muted); border:1px solid var(--line);border-radius:6px;padding:4px 8px} .lang-item.active{background:var(--glacier-dark);border-color:var(--glacier-dark);color:#fff} /* ---- Footer (dunkles 4-Spalten-Layout, datengetrieben) ---- */ .footer{--ft-bg:#1d2a3d;--ft-accent:#16a3b8;--ft-gold:#c79a6d; --ft-text:#aab3c0;--ft-muted:#8b97a6; background:var(--ft-bg);color:#fff;margin-top:34px} .footer-top{ max-width:1180px;margin:0 auto;padding:52px 26px 0; display:flex;gap:44px;flex-wrap:wrap; } /* Flex statt fixem 4-Spalten-Grid: passt sich der tatsaechlichen Spaltenzahl an (Schnellzugriff-Spalte faellt weg, wenn keine Links gepflegt sind) — die vorhandenen Spalten fuellen dann die volle Breite statt links zu klumpen. */ .ft-col{flex:1 1 0;min-width:160px} .ft-brand{flex:1.7 1 0;min-width:240px} .ft-col-title{font-size:12px;font-weight:900;letter-spacing:.1em; text-transform:uppercase;color:#fff;margin-bottom:18px} /* Marke */ .ft-wordmark{display:flex;align-items:center;margin-bottom:16px} .ft-mark-text{line-height:1.1;display:flex;flex-direction:column;gap:4px} .ft-mark-top{font-size:18px;font-weight:900;letter-spacing:.14em;color:#fff} .ft-mark-bottom{font-size:11px;font-weight:700;letter-spacing:.3em;color:var(--ft-muted)} .ft-tagline{margin:0 0 18px;font-size:14px;line-height:1.6;color:var(--ft-text);max-width:330px} .ft-addr{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;color:var(--ft-text)} .ft-addr i{color:var(--ft-accent);font-size:15px;flex:none;width:18px;text-align:center;margin-top:2px} /* Kontakt */ .ft-line{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ft-text); text-decoration:none;margin-bottom:14px;transition:color .15s} .ft-line:hover:not(.ft-line--static){color:#fff} .ft-line i{color:var(--ft-accent);font-size:15px;flex:none;width:18px;text-align:center} .ft-line span{min-width:0;word-break:break-word} /* Schnellzugriff */ .ft-quick-links{display:flex;flex-direction:column;gap:13px} .ft-quick-links a{font-size:14px;color:var(--ft-text);text-decoration:none;width:fit-content;transition:color .15s} .ft-quick-links a:hover{color:var(--ft-accent)} /* Social */ .ft-social{display:flex;gap:10px;margin-bottom:18px;flex-wrap:wrap} .ft-social-ico{width:42px;height:42px;border-radius:11px;background:rgba(255,255,255,.08); display:flex;align-items:center;justify-content:center;color:#cdd5df; text-decoration:none;font-size:17px;transition:background .15s,color .15s} .ft-social-ico:hover{background:var(--ft-accent);color:#fff} .ft-social-sub{margin:0;font-size:13px;color:var(--ft-muted);line-height:1.5} /* Letzte Spalte (Social) rechtsbuendig — Titel, Icons + Untertitel nach rechts. */ .ft-social-col{text-align:right} .ft-social-col .ft-social{justify-content:flex-end} /* Bottom-Bar */ .footer-bottom{ max-width:1180px;margin:44px auto 0;padding:20px 26px; border-top:1px solid rgba(255,255,255,.1); display:flex;align-items:center;gap:18px;flex-wrap:wrap; } .ft-copyright{font-size:13px;color:var(--ft-muted)} .ft-spacer{flex:1} .footer-links{display:flex;align-items:center;gap:22px;flex-wrap:wrap} .footer-links a{color:var(--ft-text);text-decoration:none;font-size:13px;font-weight:600;letter-spacing:.3px;transition:color .15s} .footer-links a:hover{color:#fff} .ft-divider{width:1px;height:14px;background:rgba(255,255,255,.16)} .footer-credit{display:flex;align-items:center;gap:5px;font-size:12.5px;color:var(--ft-muted);white-space:nowrap} .footer-credit i{color:var(--ft-accent);font-size:11px} .footer-credit a{color:var(--ft-text);text-decoration:none;font-weight:800} .footer-credit a:hover{color:var(--ft-accent);text-decoration:underline} @media(max-width:900px){ .footer-top{gap:32px 36px;padding:38px 20px 0} .ft-col,.ft-brand{flex-basis:calc(50% - 18px)} } @media(max-width:560px){ .footer-top{gap:26px;padding:32px 18px 0} .ft-col,.ft-brand{flex-basis:100%;min-width:0} .ft-social-col{text-align:left} .ft-social-col .ft-social{justify-content:flex-start} .footer-bottom{flex-direction:column;align-items:flex-start;gap:14px;padding:18px} .ft-spacer{display:none} .ft-divider{display:none} } /* ---- Stepper (runde Icons, verbundene Fortschrittsspur) ---- */ .stepper-wrap{padding:80px 20px 8px} .stepper{max-width:1180px;margin:0 auto;display:flex;align-items:flex-start} .step{ flex:1;min-width:0;position:relative;text-decoration:none; display:flex;flex-direction:column;align-items:center; } .step.done{cursor:pointer} /* Verbindungsspur — linke/rechte Haelfte je Schritt, auf Kreis-Mitte (top:27px) */ .step-track-l,.step-track-r{position:absolute;top:27px;height:3px;background:var(--line)} .step-track-l{left:0;width:50%} .step-track-r{right:0;width:50%} .step.done .step-track-l,.step.active .step-track-l, .step.done .step-track-r{background:var(--glacier)} /* Kreis */ .step-circle{ position:relative;z-index:2;width:54px;height:54px;border-radius:50%; display:flex;align-items:center;justify-content:center; background:#eef2f6;border:1px solid #e2e8ef;color:#9aa3af; } .step-circle .step-ico{width:23px;height:23px;display:block} .step.done .step-circle{background:var(--slate-2);border-color:var(--slate-2);color:#fff} .step.active .step-circle{ background:linear-gradient(135deg,var(--glacier),var(--glacier-dark)); border:none;color:#fff; box-shadow:0 0 0 6px color-mix(in srgb,var(--glacier) 16%,transparent), 0 14px 28px color-mix(in srgb,var(--glacier) 34%,transparent); animation:stepperPulse 2.2s ease-in-out infinite; } @keyframes stepperPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}} /* Haken-Badge auf erledigten Schritten */ .step-check{ position:absolute;right:-3px;bottom:-3px;width:20px;height:20px;border-radius:50%; background:var(--ok);border:2.5px solid #fff; display:flex;align-items:center;justify-content:center; } .step-check svg{width:11px;height:11px;display:block} /* Label unter dem Kreis */ .step-label{margin-top:13px;text-align:center;padding:0 6px} .step .lbl{font-size:14px;font-weight:800;line-height:1.25;color:var(--muted)} .step.done .lbl,.step.active .lbl{color:var(--slate)} .step-sub{display:block;font-size:12px;font-weight:700;color:var(--glacier-dark);margin-top:3px} /* Mobile Caption-Box (aktiver Schritt) — nur < 820px sichtbar */ .step-caption{display:none} @media(max-width:820px){ .stepper-wrap{padding:24px 16px 4px} .step-track-l,.step-track-r{top:17px;height:2.5px} .step-circle{width:34px;height:34px} .step-circle .step-ico{width:16px;height:16px} .step.active .step-circle{ box-shadow:0 0 0 4px color-mix(in srgb,var(--glacier) 16%,transparent), 0 8px 16px color-mix(in srgb,var(--glacier) 34%,transparent); } .step-check{width:15px;height:15px;border-width:2px} .step-check svg{width:8px;height:8px} .step-label{display:none} .step-caption{ display:flex;align-items:center;gap:12px;max-width:520px;margin:20px auto 0; background:color-mix(in srgb,var(--glacier) 7%,#fff); border:1px solid color-mix(in srgb,var(--glacier) 22%,#fff); border-radius:14px;padding:14px 16px; } .step-cap-icon{ flex:none;width:40px;height:40px;border-radius:11px;color:#fff; display:flex;align-items:center;justify-content:center; background:linear-gradient(135deg,var(--glacier),var(--glacier-dark)); } .step-cap-icon .step-ico{width:20px;height:20px;display:block} .step-cap-body{flex:1;min-width:0;line-height:1.3} .step-cap-kicker{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--glacier-dark)} .step-cap-title{font-size:17px;font-weight:900;color:var(--slate)} .step-cap-sub{font-size:12.5px;font-weight:700;color:var(--muted);margin-top:1px} } /* ---- Layout ---- */ .layout{max-width:1300px;margin:26px auto;padding:0 20px;display:grid; /* minmax(0,1fr) statt 1fr: erlaubt der Hauptspalte, unter die min-content- Breite ihres Inhalts (nowrap-Preise, Stepper) zu schrumpfen — sonst ragt auf schmalen Viewports die ganze Spalte nach rechts ueber den Rand. */ grid-template-columns:minmax(0,1fr) 330px;gap:26px;align-items:start} @media(max-width:900px){.layout{grid-template-columns:minmax(0,1fr)}} .layout.no-side{grid-template-columns:minmax(0,1fr)} .layout.no-side .side{display:none} .panel{background:#fff;border:1px solid var(--line);border-radius:14px; box-shadow:var(--shadow);padding:30px} .panel h2{font-size:24px;margin-bottom:4px} .panel .lead{color:var(--muted);margin-bottom:24px;font-size:14px} .panel .h2-date{color:var(--glacier-dark);font-size:13px;font-weight:700;margin-bottom:8px} /* ---- Calendar (Variante B — Pill-Design) ---- */ /* Zentrierte Karte wie im Mockup; weiter, weicher, mit mehr Innenabstand. */ .bk-cal-panel{max-width:880px;margin-left:auto;margin-right:auto; border-radius:20px;padding:42px 44px 34px} .bk-cal-panel h2{font-size:30px;font-weight:900;margin-bottom:8px} .bk-cal-panel .lead{font-size:15px;margin-bottom:26px} /* Top-Navigation: „Zurück" links, „Weiter" rechts (gerundete Quadrat-Buttons). */ .cal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px} .cal-navbtn{width:42px;height:42px;border-radius:12px;border:1px solid var(--line); background:#fff;color:var(--glacier-dark);display:flex;align-items:center;justify-content:center; font-size:15px;transition:background .15s,border-color .15s,color .15s} .cal-navbtn:hover:not(:disabled){background:var(--snow);border-color:var(--glacier-dark)} .cal-navbtn:disabled{color:#d3d9e0;cursor:not-allowed} .cal-wrap{display:flex;gap:42px;flex-wrap:wrap} .cal{flex:1;min-width:288px} .cal-mlabel{text-align:center;font-size:17px;font-weight:800;color:var(--slate);margin-bottom:16px} /* column-gap:0 → die Range-Balken benachbarter Tage stossen luecklos aneinander. */ .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);row-gap:8px;column-gap:0} .cal-grid .wd{font-size:12px;text-align:center;font-weight:800;color:var(--muted);padding-bottom:8px} .cal-grid .wd:nth-child(6),.cal-grid .wd:nth-child(7){color:var(--slate-2)} /* Aeussere Zelle: traegt den verbundenen Range-Balken; Pille sitzt mittig darauf.