/* ============================================================ CASA One — KI-Assistent (Gaeste-Chat, Side-Panel) Eigener aic-Namensraum, kollidiert nicht mit der Buchungsstrecke. Design-Vorlage "AIchat Sidepanel Sporthotel IDEAL" (Handoff 08/2026): Chat-Spalte schiebt sich von rechts in die Seite (die Website wird per body-margin mitgeschoben und bleibt voll bedienbar), Trennlinie mit Zieh-Griff (Breite 340px…60vw, in localStorage gemerkt), Launcher-Bubble wenn zu. Karten verbreitern das Panel automatisch. Farben und Schrift kommen vollstaendig aus dem Theme des Betriebs (boot.theme -> --aic-t-* auf ), siehe Token-Block unten. ============================================================ */ /* ── Farb-Token ────────────────────────────────────────────── ALLE Farben kommen aus dem Theme des Betriebs. Die --aic-t-* Werte setzt das Widget-JS aus boot.theme auf — damit ist der Assistent auch auf der eingebetteten Website (dort gibt es keine Buchungsstrecken-:root-Variablen) korrekt eingefaerbt. Die Literale hier sind reine Notfall-Fallbacks fuer den Fall, dass boot.theme fehlt. Bewusst KEINE Theme-Farben (Projekt-Konvention): Schatten, die Anker #fff/#000 in color-mix und das Lightbox-Foto-Chrome. ──────────────────────────────────────────────────────────── */ .aic-root { --aic-brand: var(--aic-t-accent2, #35c4b5); --aic-hi: color-mix(in srgb, var(--aic-brand) 86%, #fff); --aic-lo: color-mix(in srgb, var(--aic-brand) 72%, #000); --aic-hell: color-mix(in srgb, var(--aic-brand) 45%, #fff); --aic-dark1: var(--aic-t-dark, #0f172a); --aic-dark2: var(--aic-t-dark2, #1a3a4a); --aic-navy: var(--aic-t-strong, #1c2b3d); --aic-txt: var(--aic-t-text, #1c2b3d); --aic-mut: var(--aic-t-muted, #5b7189); --aic-sub: var(--aic-t-subtle, #8296a8); --aic-bg: var(--aic-t-bg, #f5f8fa); --aic-pill: var(--aic-t-panel, #f4f8fa); --aic-soft: var(--aic-t-card, #ffffff); --aic-linie: var(--aic-t-border, #e4edf1); --aic-link: var(--aic-t-link, #17457f); --aic-inv: var(--aic-t-inv, #ffffff); --aic-ok: var(--aic-t-ok, #16a34a); /* Abgeleitet — je EIN Ton, nicht mehrere Grautoene nebeneinander. */ --aic-linie-2: color-mix(in srgb, var(--aic-linie) 55%, var(--aic-sub)); --aic-dots: color-mix(in srgb, var(--aic-sub) 55%, #fff); --aic-link-h: color-mix(in srgb, var(--aic-link) 78%, #000); --aic-ok-hell: color-mix(in srgb, var(--aic-ok) 55%, #fff); /* Text auf der dunklen Kopfleiste: leicht in Richtung Akzent gezogen. */ --aic-on-dark: color-mix(in srgb, var(--aic-inv) 92%, var(--aic-brand)); --aic-on-dark-2: color-mix(in srgb, var(--aic-inv) 62%, var(--aic-brand)); position: fixed; right: 20px; /* Auf halber Hoehe am rechten Rand statt in der Ecke: dort faehrt das Panel auf, und unten in der Ecke wird der Knopf auf langen Seiten leicht uebersehen. KEIN transform zum Zentrieren! Das Panel und der Zieh-Griff sind Kinder dieses Elements; ein transform am Elternteil wuerde deren position:fixed auf diesen Knopf beziehen statt auf das Fenster. Deshalb volle Hoehe + justify-content -- und die Spalte laesst Klicks durch, sonst faenge sie den halben rechten Seitenrand ab. */ top: 0; bottom: 0; justify-content: center; pointer-events: none; z-index: 9990; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; font-family: var(--aic-t-font, 'Mulish', 'Helvetica Neue', sans-serif); } /* Teaser, Knopf, Panel und Griff bleiben bedienbar. */ .aic-root > * { pointer-events: auto; } /* Flaches Fenster (Handy quer): mittig hiesse, dass der Teaser oben hinausragt und nicht mehr wegzuklicken ist -- dort zurueck in die Ecke. */ @media (max-height: 520px) { .aic-root { top: auto; bottom: 16px; justify-content: flex-end; } } /* Seite mitschieben: das Panel ueberdeckt nicht, es DRUECKT den Inhalt nach links (Handoff: "Website bleibt links voll bedienbar"). Die Transition haengt an einer eigenen html-Klasse, damit fremde Seiten ohne Widget unberuehrt bleiben; waehrend des Zieh-Drags ist sie aus. */ html.aic-anim body { transition: margin-right .38s cubic-bezier(.4, 0, .2, 1); } html.aic-offen body { margin-right: min(var(--aic-w, 460px), 100vw); } html.aic-drag body { transition: none !important; } /* Launcher + Teaser verschwinden, solange das Panel offen ist. */ .aic-root.aic-open .aic-fab, .aic-root.aic-open .aic-teaser { display: none; } /* ── Teaser-Bubble neben dem Schwebe-Knopf ── */ .aic-teaser { position: relative; background: var(--aic-soft); border-radius: 14px 14px 4px 14px; box-shadow: 0 14px 36px rgba(15, 23, 42, .2); padding: 14px 34px 14px 16px; max-width: 250px; } .aic-teaser-x { position: absolute; top: 6px; right: 8px; border: 0; background: none; font-size: 15px; line-height: 1; color: var(--aic-sub); cursor: pointer; padding: 2px; } .aic-teaser-titel { font-size: 12px; font-weight: 800; color: var(--aic-brand); margin-bottom: 4px; } .aic-teaser-text { font-size: 12.5px; line-height: 1.55; color: var(--aic-mut); } /* ── Launcher-Bubble (nur sichtbar, wenn das Panel zu ist) ── */ .aic-fab { position: relative; width: 60px; height: 60px; border: 0; border-radius: 50%; cursor: pointer; color: var(--aic-hell); display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--aic-dark1), var(--aic-dark2)); box-shadow: 0 12px 30px rgba(15, 23, 42, .4); transition: transform .15s ease; } .aic-fab:hover { transform: scale(1.06); } .aic-badge { position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; border-radius: 10px; background: var(--aic-brand); border: 0; color: var(--aic-inv); font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; padding: 0 4px; box-sizing: border-box; } /* ── Panel (Side-Panel, volle Hoehe) ── */ /* WICHTIG: das hidden-Attribut wuerde sonst vom expliziten display:flex ueberstimmt — Teaser und Lightbox muessen zu-klickbar bleiben. Das Panel selbst laeuft NICHT mehr ueber hidden, sondern ueber die aic-open-Klasse (translateX-Transition braucht ein gerendertes Element). */ .aic-teaser[hidden], .aic-badge[hidden], .aic-lb[hidden], .aic-lb-p[hidden], .aic-lb-n[hidden], .aic-ov[hidden] { display: none !important; } .aic-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(var(--aic-w, 460px), 100vw); height: 100vh; height: 100dvh; display: flex; flex-direction: column; background: var(--aic-bg); border-radius: 0; overflow: hidden; box-shadow: -12px 0 32px rgba(15, 23, 42, .12); z-index: 9991; transform: translateX(102%); visibility: hidden; transition: transform .38s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .38s; } .aic-root.aic-open .aic-panel { transform: translateX(0); visibility: visible; transition: transform .38s cubic-bezier(.4, 0, .2, 1), visibility 0s; } .aic-root.aic-drag .aic-panel, .aic-root.aic-drag .aic-line { transition: none !important; } /* ── Trennlinie + Zieh-Griff (Breite einstellbar) ── */ .aic-line { position: fixed; top: 0; bottom: 0; right: min(var(--aic-w, 460px), 100vw); width: 1px; background: var(--aic-dark1); box-shadow: -16px 0 36px rgba(15, 23, 42, .28); cursor: ew-resize; touch-action: none; z-index: 9992; transform: translateX(0); visibility: visible; transition: transform .38s cubic-bezier(.4, 0, .2, 1), visibility 0s; } .aic-root:not(.aic-open) .aic-line { transform: translateX(calc(min(var(--aic-w, 460px), 100vw) + 2px)); visibility: hidden; transition: transform .38s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .38s; } .aic-line:hover { background: var(--aic-dark2); } .aic-grip { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 14px; height: 38px; border-radius: 7px; background: rgba(255, 255, 255, .92); border: 1px solid var(--aic-linie-2); box-shadow: 0 2px 8px rgba(15, 23, 42, .14); display: flex; align-items: center; justify-content: center; cursor: ew-resize; touch-action: none; opacity: .75; transition: width .22s ease, height .22s ease, border-radius .22s ease, opacity .22s ease; } .aic-grip:hover, .aic-root.aic-drag .aic-grip { width: 28px; height: 28px; border-radius: 50%; opacity: 1; border-color: var(--aic-brand); } .aic-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; color: var(--aic-on-dark); background: linear-gradient(135deg, var(--aic-dark1) 0%, var(--aic-dark2) 100%); } .aic-avatar { width: 42px; height: 42px; border-radius: 50%; background: color-mix(in srgb, var(--aic-brand) 16%, transparent); border: 1px solid color-mix(in srgb, var(--aic-brand) 40%, transparent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--aic-hell); } .aic-head-txt { flex: 1; display: flex; flex-direction: column; line-height: 1.3; min-width: 0; } .aic-head-txt strong { font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .aic-head-txt span { font-size: 11.5px; color: var(--aic-on-dark-2); display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .aic-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--aic-ok-hell); display: inline-block; flex-shrink: 0; } .aic-reset, .aic-close { border: 0; background: none; color: var(--aic-on-dark-2); width: 32px; height: 32px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .aic-close { font-size: 18px; line-height: 1; } .aic-reset:hover, .aic-close:hover { background: color-mix(in srgb, var(--aic-brand) 14%, transparent); color: var(--aic-hell); } /* ── Nachrichten ── */ .aic-msgs { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; } .aic-time { align-self: center; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--aic-sub); } .aic-msg { display: flex; } .aic-msg--g { justify-content: flex-end; } .aic-msg--a { justify-content: flex-start; } .aic-bubble { max-width: 86%; padding: 11px 14px; font-size: 13.5px; line-height: 1.55; word-wrap: break-word; white-space: normal; } .aic-msg--g .aic-bubble { background: var(--aic-navy); color: var(--aic-inv); border-radius: 14px 14px 4px 14px; } .aic-msg--a .aic-bubble { background: var(--aic-soft); color: var(--aic-navy); border: 1px solid var(--aic-linie); border-radius: 14px 14px 14px 4px; box-shadow: 0 2px 8px rgba(28, 43, 61, .05); } /* Aufzaehlungen in Antworten (md() macht aus "- "-Zeilen echte Listen). */ .aic-bubble ul, .aic-bubble ol { margin: 5px 0; padding-left: 20px; } .aic-bubble ul { list-style: disc; } .aic-bubble ol { list-style: decimal; } .aic-bubble li { margin: 2px 0; } /* Ausgegebene Links: dunkelblau, unterstrichen, mit Pfeil-Symbol — der Gast soll auf einen Blick sehen, dass er klicken kann (oeffnet neuen Tab). */ .aic-bubble a, .aic-link { color: var(--aic-link); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; overflow-wrap: anywhere; } .aic-bubble a:hover, .aic-link:hover { color: var(--aic-link-h); text-decoration-thickness: 2px; } .aic-ext { margin-left: 3px; vertical-align: -1px; opacity: .8; } .aic-msg--g .aic-bubble a { color: var(--aic-inv); } .aic-msg--g .aic-bubble a:hover { color: var(--aic-inv); } /* Startfragen-Chips */ .aic-chips { display: flex; flex-wrap: wrap; gap: 8px; max-width: 92%; } .aic-chip { border: 1px solid var(--aic-brand); color: var(--aic-lo); background: var(--aic-soft); border-radius: 999px; padding: 7px 13px; font-size: 12px; font-weight: 700; font-family: inherit; cursor: pointer; transition: background .12s ease, color .12s ease; } .aic-chip:hover { background: var(--aic-brand); color: var(--aic-inv); } /* Tipp-Indikator */ .aic-typing .aic-bubble { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 13px 15px; } .aic-dots { display: inline-flex; gap: 4px; } .aic-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--aic-dots); display: inline-block; animation: aicBlink 1.2s infinite ease-in-out; } .aic-dots span:nth-child(2) { animation-delay: .2s; } .aic-dots span:nth-child(3) { animation-delay: .4s; } @keyframes aicBlink { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } } .aic-typing-note { font-size: 11.5px; color: var(--aic-sub); line-height: 1.4; } /* ── Karten (Zimmer / Angebote) ── */ .aic-ev { width: 100%; } .aic-ev--cards { position: relative; } .aic-cards { display: flex; gap: 12px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: thin; scroll-snap-type: x mandatory; scroll-padding-left: 2px; } .aic-card { flex: 0 0 324px; max-width: calc(100% - 8px); scroll-snap-align: start; background: var(--aic-soft); border-radius: 14px; overflow: hidden; box-shadow: 0 4px 14px rgba(60, 30, 30, .08); } .aic-card-img { width: 100%; height: 160px; object-fit: cover; display: block; } .aic-card-img--klick { cursor: zoom-in; } /* Video-Karte (Wissensdatenbank-Medien): Poster-Frame + Play-Abzeichen. Das Abzeichen faengt keine Klicks — die gehen aufs Bild darunter. */ .aic-card-media { position: relative; display: block; } .aic-card-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; } .aic-card-mehr { margin-top: 8px; font-size: 11.5px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } /* Anruf-Knopf der Wissens-Karte (tel:-Link) */ .aic-card-tel { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: var(--aic-navy); color: var(--aic-inv); font-weight: 700; text-decoration: none; white-space: nowrap; } .aic-card-tel:hover { opacity: .88; } /* Zusatzleistungs-Karten: kompakter als Zimmerkarten. */ .aic-cards--extras .aic-card { flex: 0 0 235px; } .aic-card--extra .aic-card-img { height: 110px; } .aic-cnav { position: absolute; top: 68px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--aic-brand); font-size: 21px; line-height: 1; font-weight: 700; cursor: pointer; box-shadow: 0 3px 10px rgba(40, 20, 20, .28); display: flex; align-items: center; justify-content: center; padding-bottom: 3px; } .aic-cnav--l { left: 6px; } .aic-cnav--r { right: 6px; } .aic-cnav:hover { background: var(--aic-brand); color: var(--aic-inv); } .aic-card-body { padding: 12px 14px 14px; } .aic-card-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .aic-card-name { font-size: 14px; font-weight: 800; color: var(--aic-txt); } .aic-card-preis { font-size: 13px; font-weight: 800; color: var(--aic-brand); white-space: nowrap; } .aic-card-sub { font-size: 11.5px; color: var(--aic-sub); margin-top: 2px; } .aic-card-desc { font-size: 11.5px; color: var(--aic-mut); margin-top: 6px; line-height: 1.45; } .aic-card-meta { font-size: 11px; color: var(--aic-sub); margin-top: 6px; } /* ── Karten: Einblenden + Anfassen ────────────────────────── Gestaffelt aus dem Handoff. Fill-Mode BEWUSST `backwards` und nicht `both`: bei `both` wuerde der Endzustand der Animation (transform: none) den Hover-Transform dauerhaft ueberstimmen. */ @keyframes aicCardPop { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } } .aic-card { animation: aicCardPop .55s cubic-bezier(.22, 1, .36, 1) backwards; transition: box-shadow .25s ease, transform .25s ease; } .aic-card:nth-child(2) { animation-delay: .09s; } .aic-card:nth-child(3) { animation-delay: .18s; } .aic-card:nth-child(4) { animation-delay: .27s; } .aic-card:nth-child(n+5) { animation-delay: .34s; } .aic-card:hover { box-shadow: 0 16px 36px rgba(28, 43, 61, .16); transform: translateY(-3px); } /* ── Breites Panel: Karten als Raster ─────────────────────── Ab der automatischen Verbreiterung liegen die Karten nebeneinander statt im Wischstreifen — genau dafuer ist der Platz da. Die Pfeile werden dann nicht mehr gebraucht. */ .aic-root.aic-breit .aic-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); overflow-x: visible; scroll-snap-type: none; padding-bottom: 2px; } .aic-root.aic-breit .aic-card, .aic-root.aic-breit .aic-cards--extras .aic-card { flex: none; max-width: none; } .aic-root.aic-breit .aic-cnav { display: none; } .aic-root.aic-breit .aic-bubble { max-width: 70%; } .aic-root.aic-breit .aic-chips { max-width: 100%; } /* ── Automatische Verbreiterung ───────────────────────────── Zeigt die Antwort Zimmerkategorien, Pauschalen oder Zusatz- leistungen, waechst das Panel auf ~70 % der Fensterbreite (Tablet und kleiner: voll). Die Kurve ist bewusst laenger und weicher als beim Oeffnen — es soll sich wie Aufklappen anfuehlen, nicht wie ein Sprung. Die Klasse setzt das JS nur fuer die Dauer der Bewegung, damit das Ziehen am Griff verzoegerungsfrei bleibt. */ html.aic-weit body { transition: margin-right .85s cubic-bezier(.22, 1, .36, 1); } .aic-root.aic-weit .aic-panel { transition: transform .38s cubic-bezier(.4, 0, .2, 1), visibility 0s, width .85s cubic-bezier(.22, 1, .36, 1); } .aic-root.aic-weit .aic-line { transition: transform .38s cubic-bezier(.4, 0, .2, 1), visibility 0s, right .85s cubic-bezier(.22, 1, .36, 1); } /* Volle Breite (Tablet und kleiner): der Zieh-Griff hat dort keinen Sinn. */ .aic-root.aic-voll .aic-line { display: none !important; } @media (prefers-reduced-motion: reduce) { .aic-card { animation: none; } html.aic-weit body, .aic-root.aic-weit .aic-panel, .aic-root.aic-weit .aic-line { transition-duration: .01ms !important; } } .aic-pick { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; margin-top: 7px; padding: 8px 11px; font-size: 11.5px; font-family: inherit; text-align: left; border: 1px solid var(--aic-brand); border-radius: 9px; background: var(--aic-soft); color: var(--aic-brand); font-weight: 700; cursor: pointer; transition: background .12s ease, color .12s ease; } .aic-pick b { font-weight: 800; white-space: nowrap; } .aic-pick:hover { background: var(--aic-brand); color: var(--aic-inv); } /* Angebot, das im Zeitraum NUR als Anfrage geht: zurueckgenommen, aber waehlbar — der Gast darf es weiterhin anfragen, er soll nur nicht mit einer Sofortbuchung rechnen. */ .aic-pick--anfrage { border-style: dashed; border-color: var(--aic-linie-2); background: transparent; color: var(--aic-mut); } .aic-pick--anfrage:hover { background: var(--aic-soft); color: var(--aic-brand); } .aic-pick-tag { display: inline-block; margin-left: 7px; padding: 1px 7px; border-radius: 999px; background: var(--aic-soft); color: var(--aic-brand); font-size: 10px; font-weight: 700; white-space: nowrap; vertical-align: middle; } .aic-pick--anfrage .aic-pick-tag { background: var(--aic-pill); color: var(--aic-mut); } /* Alternativ-Vorschlaege (sofort buchbar) statt einer gesperrten Wahl. */ .aic-alts { margin-top: 4px; } .aic-alts-titel { margin-bottom: 2px; font-size: 11px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: var(--aic-mut); } .aic-pick--alt { margin-top: 6px; } /* Buchungs-Button + Anfrage-Haken */ .aic-book-btn { display: block; margin: 4px 0; padding: 12px 18px; border-radius: 10px; background: linear-gradient(135deg, var(--aic-hi), var(--aic-lo)); color: var(--aic-inv) !important; font-size: 13px; font-weight: 800; text-align: center; text-decoration: none; box-shadow: 0 4px 14px color-mix(in srgb, var(--aic-lo) 35%, transparent); } .aic-book-btn:hover { filter: brightness(1.07); } .aic-ok { color: var(--aic-ok); padding: 2px 4px; display: inline-flex; } /* AGB-/Datenschutz-Zustimmung */ .aic-consent { background: var(--aic-soft); border-radius: 14px; padding: 13px 15px; margin: 2px 0; max-width: 88%; box-shadow: 0 2px 8px rgba(28, 43, 61, .05); } .aic-consent-titel { font-size: 12.5px; font-weight: 800; color: var(--aic-txt); } .aic-consent-text { font-size: 12px; color: var(--aic-mut); margin-top: 4px; line-height: 1.5; } .aic-consent-links { margin-top: 4px; font-size: 12px; } .aic-consent-links a { color: var(--aic-brand); text-decoration: underline; } .aic-consent-btn { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; border: 0; border-radius: 9px; padding: 8px 14px; background: var(--aic-ok); color: var(--aic-inv); font-size: 12.5px; font-weight: 700; font-family: inherit; cursor: pointer; } .aic-consent-btn:hover:not(:disabled) { filter: brightness(1.08); } .aic-consent-btn:disabled { opacity: .6; cursor: default; } /* ── Eingabe + Hinweiszeile ── */ .aic-fuss { background: var(--aic-soft); border-top: 1px solid var(--aic-linie); padding: 12px 14px 4px; } .aic-form { display: flex; align-items: center; gap: 10px; } .aic-input { flex: 1; min-width: 0; border: 1px solid var(--aic-linie-2); background: var(--aic-pill); border-radius: 12px; padding: 11px 16px; font-size: 13px; font-family: inherit; color: var(--aic-txt); outline: none; box-sizing: border-box; } .aic-input::placeholder { color: var(--aic-sub); } .aic-input:focus { border-color: var(--aic-brand); box-shadow: none; } .aic-send { border: 0; width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--aic-brand), var(--aic-lo)); color: var(--aic-inv); cursor: pointer; } .aic-send:disabled { opacity: .5; cursor: default; } .aic-send:not(:disabled):hover { filter: brightness(1.07); } .aic-note { text-align: center; font-size: 10px; color: var(--aic-sub); padding: 8px 0 4px; } .aic-note b { font-weight: 800; color: var(--aic-mut); } .aic-note .aic-one { color: var(--aic-brand); } /* ── Pauschalen-Darstellung ───────────────────────────────── Eine Pauschale bekommt im Chat dieselbe Buehne wie auf der Buchungsstrecke: Bilderslider, Kurztext, formatierte Beschreibung, darunter je Zimmerkategorie eine Preis-Pille, unter der die Inklusivleistungen aufklappen. Bleibt bewusst im Verlauf stehen (kein Overlay) — die Pauschale ist das Gespraechsthema. */ .aic-pd { background: var(--aic-soft); border: 1px solid var(--aic-linie); border-radius: 16px; overflow: hidden; box-shadow: 0 4px 16px rgba(28, 43, 61, .07); animation: aicCardPop .55s cubic-bezier(.22, 1, .36, 1) backwards; } /* Slider: eine Aufnahme im Blick, der Rest per Wisch oder Pfeil. */ .aic-pd-slider { position: relative; } .aic-pd-track { display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .aic-pd-track::-webkit-scrollbar { display: none; } .aic-pd-img { flex: 0 0 100%; width: 100%; height: 190px; object-fit: cover; display: block; scroll-snap-align: start; cursor: zoom-in; } .aic-pd-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--aic-soft) 92%, transparent); color: var(--aic-txt); font-size: 20px; line-height: 1; font-weight: 700; cursor: pointer; box-shadow: 0 3px 10px rgba(15, 23, 42, .26); display: flex; align-items: center; justify-content: center; padding-bottom: 3px; } .aic-pd-nav--l { left: 8px; } .aic-pd-nav--r { right: 8px; } .aic-pd-nav:hover { background: var(--aic-brand); color: var(--aic-inv); } .aic-pd-body { padding: 14px 16px 16px; } .aic-pd-name { font-size: 16px; font-weight: 800; color: var(--aic-txt); line-height: 1.25; } .aic-pd-meta { font-size: 11.5px; color: var(--aic-sub); margin-top: 3px; } .aic-pd-teaser { font-size: 12.5px; font-weight: 600; color: var(--aic-mut); line-height: 1.55; margin-top: 9px; } /* Beschreibung: der einzige Block, der HTML aus der Pflege rendert — serverseitig auf Struktur-Tags ohne Attribute reduziert. */ .aic-pd-text { font-size: 12.5px; line-height: 1.6; color: var(--aic-mut); margin-top: 9px; } .aic-pd-text p { margin: 0 0 7px; } .aic-pd-text h3, .aic-pd-text h4 { font-size: 12.5px; font-weight: 800; color: var(--aic-txt); margin: 11px 0 5px; } .aic-pd-text strong, .aic-pd-text b { color: var(--aic-txt); font-weight: 800; } .aic-pd-text ul, .aic-pd-text ol { margin: 0 0 7px; padding-left: 0; list-style: none; } .aic-pd-text ol { padding-left: 18px; list-style: decimal; } .aic-pd-text ul li { position: relative; padding-left: 15px; margin-bottom: 3px; } .aic-pd-text ul li::before { content: ''; position: absolute; left: 2px; top: .58em; width: 5px; height: 5px; border-radius: 50%; background: var(--aic-brand); } .aic-pd-text ol li { margin-bottom: 3px; } .aic-pd-text > *:last-child { margin-bottom: 0; } /* Zimmer-Pillen */ .aic-pd-zimmer { margin-top: 13px; display: flex; flex-direction: column; gap: 7px; } .aic-pd-zeile { display: flex; flex-direction: column; } .aic-pd-pill { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 1px solid var(--aic-linie-2); border-radius: 12px; background: var(--aic-pill); font-family: inherit; text-align: left; cursor: pointer; transition: border-color .18s ease, background .18s ease; } .aic-pd-pill:hover { border-color: var(--aic-brand); background: var(--aic-soft); } .aic-pd-pill[aria-expanded="true"] { border-color: var(--aic-brand); background: var(--aic-soft); border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .aic-pd-pill-txt { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; } .aic-pd-pill-n { font-size: 13px; font-weight: 800; color: var(--aic-txt); } .aic-pd-pill-v { font-size: 11.5px; color: var(--aic-sub); } .aic-pd-pill-p { font-size: 13px; font-weight: 800; color: var(--aic-brand); white-space: nowrap; } .aic-pd-chev { font-size: 17px; line-height: 1; color: var(--aic-sub); font-style: normal; transition: transform .2s ease; } .aic-pd-pill[aria-expanded="true"] .aic-pd-chev { transform: rotate(90deg); color: var(--aic-brand); } /* Buchbarkeit: derselbe Unterschied wie auf der Strecke — Preis heisst nicht Sofortbuchung, und das muss man sehen, nicht lesen muessen. */ .aic-pd-tag { font-size: 9.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; border-radius: 999px; padding: 2px 8px; white-space: nowrap; } .aic-pd-tag--ok { background: color-mix(in srgb, var(--aic-ok) 14%, var(--aic-soft)); color: color-mix(in srgb, var(--aic-ok) 78%, #000); } .aic-pd-tag--anf { background: color-mix(in srgb, var(--aic-sub) 16%, var(--aic-soft)); color: var(--aic-mut); } /* Aufklapp-Feld unter der Pille */ .aic-pd-inkl { border: 1px solid var(--aic-brand); border-top: 0; border-radius: 0 0 12px 12px; background: var(--aic-soft); padding: 10px 12px 12px; animation: aicPdAuf .22s ease both; } @keyframes aicPdAuf { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } .aic-pd-inkl-b + .aic-pd-inkl-b { margin-top: 9px; } .aic-pd-inkl-t { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--aic-sub); margin-bottom: 5px; } .aic-pd-inkl-tags { display: flex; flex-wrap: wrap; gap: 5px; } .aic-pd-tagpill { font-size: 11.5px; line-height: 1.35; color: var(--aic-mut); background: var(--aic-pill); border: 1px solid var(--aic-linie); border-radius: 999px; padding: 3px 10px; } .aic-pd-link { display: inline-block; margin-top: 11px; font-size: 11.5px; font-weight: 800; color: var(--aic-link); text-decoration: underline; text-underline-offset: 2px; } .aic-pd-link:hover { color: var(--aic-link-h); } /* Auswahl im Aufklappfeld — der Schritt, mit dem es weitergeht. */ .aic-pd-waehlen { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; margin-top: 12px; padding: 11px 14px; border: 0; border-radius: 10px; background: linear-gradient(135deg, var(--aic-brand), var(--aic-lo)); color: var(--aic-inv); font-family: inherit; font-size: 12.5px; font-weight: 800; text-align: left; cursor: pointer; transition: filter .15s ease, transform .15s ease; } .aic-pd-waehlen:hover { filter: brightness(1.07); transform: translateY(-1px); } .aic-pd-waehlen b { font-weight: 800; white-space: nowrap; } /* Breites Panel: die Pauschale soll nicht ueber die ganze Flaeche laufen — lange Zeilen liest niemand gern. Dafuer darf das Bild groesser werden. */ .aic-root.aic-breit .aic-pd { max-width: 720px; } .aic-root.aic-breit .aic-pd-img { height: 260px; } /* ── Mobil ── */ /* ── Mobil: Vollbild-Chat, flache Verschachtelung, groessere Inhalte ── */ @media (max-width: 640px) { /* Kein Zieh-Griff auf schmalen Screens — das Panel nimmt die volle Breite ein, die Seite wird komplett hinausgeschoben. */ .aic-line { display: none !important; } .aic-panel { width: 100vw; } html.aic-offen body { margin-right: 100vw; } } @media (max-width: 480px) { .aic-root { right: 12px; bottom: 12px; } /* Der Platz gehoert den Inhalten: schmalere Raender, groessere Schrift. */ .aic-msgs { padding: 12px 10px; gap: 11px; } .aic-bubble { max-width: 92%; font-size: 15px; line-height: 1.55; padding: 12px 15px; } .aic-chips { max-width: 100%; } .aic-chip { font-size: 14px; padding: 10px 16px; } .aic-typing-note { font-size: 13px; } .aic-consent { max-width: 100%; } .aic-consent-titel { font-size: 14px; } .aic-consent-text, .aic-consent-links { font-size: 13.5px; } /* Karten fast in voller Breite — eine Karte im Blick, Rest per Wisch. */ .aic-card { flex: 0 0 86vw; } .aic-cards--extras .aic-card { flex: 0 0 62vw; } .aic-card-img { height: 190px; } .aic-card--extra .aic-card-img { height: 120px; } .aic-card-name { font-size: 15.5px; } .aic-card-preis { font-size: 14.5px; } .aic-card-sub { font-size: 13px; } .aic-card-desc { font-size: 13px; line-height: 1.5; } .aic-card-meta { font-size: 12.5px; } .aic-pick { font-size: 13.5px; padding: 11px 13px; } .aic-info-pill { font-size: 13px; } .aic-book-btn { font-size: 15px; padding: 14px 18px; } /* Pauschale: mehr Bild, groessere Schrift — der Platz gehoert dem Inhalt. */ .aic-pd-img { height: 210px; } .aic-pd-name { font-size: 17px; } .aic-pd-meta { font-size: 12.5px; } .aic-pd-teaser { font-size: 13.5px; } .aic-pd-text { font-size: 13.5px; } .aic-pd-pill-n { font-size: 14.5px; } .aic-pd-pill-v { font-size: 12.5px; } .aic-pd-pill-p { font-size: 14.5px; } .aic-pd-tagpill { font-size: 12.5px; } /* 16px verhindert den iOS-Auto-Zoom beim Fokus. */ .aic-input { font-size: 16px; padding: 12px 18px; } .aic-send { width: 46px; height: 46px; } /* Lightbox & Overlay: Raender minimieren. */ .aic-lb-slide { padding: 52px 10px 6px; } .aic-lb-p, .aic-lb-n { top: auto; bottom: 78px; transform: none; } .aic-lb-name { font-size: 15.5px; } .aic-lb-titel { font-size: 14px; } .aic-ov { padding: 10px; align-items: flex-end; } .aic-ov-box { max-height: 88vh; max-height: 88dvh; padding: 20px 18px; border-radius: 16px 16px 0 0; width: 100%; } .aic-ov-name { font-size: 17px; } .aic-ov-text { font-size: 14.5px; } .aic-ov-pill { font-size: 13.5px; padding: 7px 14px; } .aic-ov-meta { font-size: 14px; } } /* ── Lightbox (Zimmerbilder — Slide-Track, Swipe, Fancybox-Stil) ── */ .aic-lb { position: fixed; inset: 0; z-index: 10050; background: rgba(10, 10, 16, .93); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; flex-direction: column; opacity: 0; transition: opacity .18s ease; } .aic-lb--offen { opacity: 1; } .aic-lb-stage { flex: 1; min-height: 0; width: 100%; overflow: hidden; touch-action: pan-y; cursor: grab; } .aic-lb-stage:active { cursor: grabbing; } .aic-lb-track { display: flex; height: 100%; transition: transform .32s cubic-bezier(.22, .61, .36, 1); } .aic-lb-slide { flex: 0 0 100%; display: flex; align-items: center; justify-content: center; position: relative; padding: 54px 64px 8px; box-sizing: border-box; } .aic-lb-slide img { max-width: 100%; max-height: 100%; border-radius: 10px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); object-fit: contain; opacity: 0; transform: scale(.97); transition: opacity .25s ease, transform .25s ease; user-select: none; -webkit-user-select: none; } .aic-lb-slide.ist-geladen img { opacity: 1; transform: scale(1); } /* Video-Slide: gleicher Rahmen wie das Bild, Player-Controls nativ. */ .aic-lb-slide video { max-width: 100%; max-height: 100%; border-radius: 10px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); opacity: 0; transform: scale(.97); transition: opacity .25s ease, transform .25s ease; background: #000; } .aic-lb-slide.ist-geladen video { opacity: 1; transform: scale(1); } .aic-lb-slide.ist-geladen .aic-lb-spin { display: none; } .aic-lb-spin { position: absolute; width: 36px; height: 36px; border: 3px solid rgba(255, 255, 255, .25); border-top-color: #fff; border-radius: 50%; animation: aicSpin .8s linear infinite; } @keyframes aicSpin { to { transform: rotate(360deg); } } .aic-lb-cap { flex: 0 0 auto; padding: 10px 20px 20px; text-align: center; max-width: 92vw; align-self: center; } .aic-lb-name { font-size: 15px; font-weight: 800; color: #fff; } .aic-lb-titel { font-size: 13.5px; color: rgba(255, 255, 255, .78); margin-top: 3px; } .aic-lb-count { position: fixed; top: 22px; left: 22px; font-size: 13px; font-weight: 700; letter-spacing: .08em; color: rgba(255, 255, 255, .75); } .aic-lb-x, .aic-lb-p, .aic-lb-n { position: fixed; z-index: 1; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .12s ease; } .aic-lb-x:hover, .aic-lb-p:hover, .aic-lb-n:hover { background: rgba(255, 255, 255, .28); } .aic-lb-x { top: 16px; right: 16px; width: 42px; height: 42px; font-size: 23px; } .aic-lb-p, .aic-lb-n { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; font-size: 29px; padding-bottom: 4px; } .aic-lb-p { left: 12px; } .aic-lb-n { right: 12px; } /* ── Detail-Overlay (Rate/Pauschale: Inklusivleistungen & Richtlinien) ── */ .aic-ov { position: fixed; inset: 0; z-index: 10050; background: rgba(12, 12, 18, .55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; transition: opacity .16s ease; font-family: inherit; } .aic-ov--offen { opacity: 1; } .aic-ov-box { position: relative; width: 480px; max-width: 100%; max-height: 84vh; overflow-y: auto; background: var(--aic-soft); border-radius: 16px; padding: 22px 24px; box-shadow: 0 24px 70px rgba(0, 0, 0, .35); transform: translateY(10px); transition: transform .16s ease; } .aic-ov--offen .aic-ov-box { transform: translateY(0); } .aic-ov-x { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--aic-pill); color: var(--aic-mut); font-size: 19px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .aic-ov-x:hover { background: var(--aic-linie-2); } .aic-ov-name { font-size: 16.5px; font-weight: 800; color: var(--aic-txt); padding-right: 34px; line-height: 1.35; } .aic-ov-preis { font-size: 14.5px; font-weight: 800; color: var(--aic-brand); margin-top: 4px; } .aic-ov-preis span { font-weight: 600; color: var(--aic-sub); font-size: 12.5px; } .aic-ov-text { font-size: 13.5px; line-height: 1.6; color: var(--aic-mut); white-space: pre-wrap; margin: 12px 0 0; } .aic-ov-sek { margin-top: 15px; } .aic-ov-sek-titel { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--aic-sub); margin-bottom: 7px; } .aic-ov-pills { display: flex; flex-wrap: wrap; gap: 6px; } .aic-ov-pill { background: color-mix(in srgb, var(--aic-brand) 8%, #fff); border: 1px solid color-mix(in srgb, var(--aic-brand) 25%, #fff); color: var(--aic-brand); border-radius: 999px; padding: 5px 12px; font-size: 12.5px; font-weight: 700; } .aic-ov-meta { margin-top: 12px; font-size: 13px; color: var(--aic-mut); } .aic-ov-meta b { color: var(--aic-txt); margin-right: 6px; } .aic-ov-meta b::after { content: ':'; } /* Detail-Pille unter den Angebots-Buttons */ .aic-info-pill { display: block; margin: 3px 0 2px auto; border: 0; background: none; color: var(--aic-brand); font-size: 11.5px; font-weight: 700; font-family: inherit; cursor: pointer; padding: 2px 4px; text-decoration: underline; text-underline-offset: 2px; opacity: .85; } .aic-info-pill:hover { opacity: 1; } /* Druck: Widget nie mitdrucken */ @media print { .aic-root, .aic-lb, .aic-ov { display: none !important; } }