/* chatbot.css: Glas-Look nur für die Landingpage ki-chatbot.html
   CI bleibt (Creme, Tinte, Terrakotta, Instrument Serif + Inter), nur die Flächen werden zu Glas.
   Alles ist auf body.seite-chatbot begrenzt, andere Seiten bleiben unberührt. */

body.seite-chatbot {
  --cb-ink: #161512;
  --cb-ink2: #2A2823;
  --cb-muted: #5F5B52;
  --cb-accent: #C2643A;
  --cb-accent-dunkel: #A9502A;
  --cb-glas: rgba(255, 255, 255, 0.46);
  --cb-glas-stark: rgba(255, 255, 255, 0.66);
  --cb-glas-rand: rgba(255, 255, 255, 0.72);
  --cb-glas-schatten: 0 1px 0 rgba(255,255,255,0.8) inset, 0 -1px 0 rgba(22,21,18,0.04) inset, 0 18px 40px -18px rgba(70,40,20,0.28), 0 2px 6px rgba(70,40,20,0.06);
  background: #F6F2EC;
  position: relative;
  overflow-x: clip;
}

/* ---------- Hintergrund: weiche Farbflächen, auf denen das Glas schwebt ---------- */
.cb-hintergrund {
  /* Teil der Seite: die Punkte scrollen mit dem Inhalt mit und wandern dabei langsam umher */
  position: absolute; inset: 0; overflow: hidden;
  z-index: -1; pointer-events: none;
  --mx: 0; --my: 0;
}
.cb-blob {
  position: absolute; border-radius: 50%; filter: blur(70px); opacity: .7;
  width: clamp(340px, 46vw, 680px); aspect-ratio: 1;
  --k1: #F2B38F; --k2: #E48A5E; --tiefe: 20px;
  background: radial-gradient(circle at 40% 35%, var(--k1), var(--k2) 60%, transparent 72%);
  /* Mausreaktion über transform, Wanderung über translate/scale: sie stören sich nicht */
  transform: translate3d(calc(var(--mx) * var(--tiefe)), calc(var(--my) * var(--tiefe)), 0);
  transition: transform .9s cubic-bezier(.2,.6,.2,1);
  will-change: transform, translate;
}
.cb-blob--1 { left: -8vw;  top: 3%;  --tiefe: 34px; }
.cb-blob--2 { right: -8vw; top: 30%; --k1: #F7D9B8; --k2: #EBB98C; --tiefe: -26px; }
.cb-blob--3 { left: 40vw;  top: 72%; --k1: #E7C4A8; --k2: #D9946E; opacity: .55; --tiefe: 44px; }
.cb-blob--4 { left: -6vw;  top: 62vh; --k1: #F4D6B0; --k2: #E9A878; opacity: .6; --tiefe: -38px; }
.cb-blob--5 { right: -6vw; top: 66vh; --k1: #F2C4A0; --k2: #E08D62; opacity: .55; --tiefe: 30px; }
.cb-blob--6 { left: 26vw;  top: 30vh; --k1: #F7DDBC; --k2: #E9B085; opacity: .5; --tiefe: -22px; }
/* Nur drei Punkte: ruhiger. Auf dem Handy zwei. */
.cb-blob--4, .cb-blob--5, .cb-blob--6 { display: none; }
@media (max-width: 767px) { .cb-blob--3 { display: none; } .cb-blob { filter: blur(56px); } }
@media (prefers-reduced-motion: no-preference) {
  .cb-blob { animation: var(--weg) var(--dauer) ease-in-out var(--versatz, 0s) infinite; }
  .cb-blob--1 { --weg: cb-w1; --dauer: 46s; }
  .cb-blob--2 { --weg: cb-w2; --dauer: 54s; --versatz: -16s; }
  .cb-blob--3 { --weg: cb-w3; --dauer: 50s; --versatz: -22s; }
  .cb-blob--4 { --weg: cb-w4; --dauer: 32s; --versatz: -14s; }
  .cb-blob--5 { --weg: cb-w5; --dauer: 28s; --versatz: -7s; }
  .cb-blob--6 { --weg: cb-w6; --dauer: 22s; --versatz: -11s; }
}
/* Wege: ein Punkt zieht langsam in einer Schleife durch mehrere Bildschirmhöhen der Seite */
@keyframes cb-w1 { 0%,100% { translate: 0 0; scale: 1; } 25% { translate: 55vw 70vh; scale: 1.12; } 50% { translate: 40vw 150vh; scale: .95; } 75% { translate: -4vw 80vh; scale: 1.08; } }
@keyframes cb-w2 { 0%,100% { translate: 0 0; scale: 1; } 25% { translate: -50vw -60vh; scale: 1.1; } 50% { translate: -30vw 40vh; scale: .95; } 75% { translate: -56vw 110vh; scale: 1.12; } }
@keyframes cb-w3 { 0%,100% { translate: 0 0; scale: 1; } 25% { translate: -36vw -70vh; scale: 1.12; } 50% { translate: 24vw -140vh; scale: .95; } 75% { translate: 34vw -50vh; scale: 1.08; } }
@keyframes cb-w4 { 0%,100% { translate: 0 0; } }
@keyframes cb-w5 { 0%,100% { translate: 0 0; } }
@keyframes cb-w6 { 0%,100% { translate: 0 0; } }

/* ---------- Glas-Grundbaustein ---------- */
.cb-glas {
  background: var(--cb-glas);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid var(--cb-glas-rand);
  border-radius: 26px;
  box-shadow: var(--cb-glas-schatten);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cb-glas, .cb-leiste, .cb-chat__fenster { background: rgba(255, 252, 247, 0.94); }
}

/* Kopfleiste der Seite etwas gläserner (nur hier) */
body.seite-chatbot > header {
  background: rgba(246, 242, 236, 0.55);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
  border-bottom-color: rgba(255,255,255,0.6);
}

/* ---------- Layout ---------- */
.cb-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.cb-sektion { padding: 72px 0; }
@media (min-width: 900px) { .cb-sektion { padding: 104px 0; } .cb-wrap { padding: 0 40px; } }
.cb-eyebrow { font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--cb-muted); margin: 0 0 14px; }
.cb-h2 { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; letter-spacing: -0.02em; line-height: 1.02; font-size: clamp(2.1rem, 5vw, 3.4rem); margin: 0 0 18px; text-wrap: balance; }
.cb-h2 em { color: var(--cb-accent); }
.cb-lead { font-size: 1.1rem; line-height: 1.65; color: var(--cb-ink2); max-width: 60ch; text-wrap: pretty; margin: 0; }

/* ---------- Hero ---------- */
.cb-hero { padding: 88px 0 56px; }
@media (min-width: 900px) { .cb-hero { padding: 120px 0 80px; } }
.cb-hero__raster { display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) { .cb-hero__raster { grid-template-columns: 1.05fr .95fr; gap: 64px; } }
.cb-titel { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; letter-spacing: -0.025em; line-height: .96; font-size: clamp(2.7rem, 7.4vw, 5.4rem); margin: 0; text-wrap: balance; }
.cb-titel em { color: var(--cb-accent); }
.cb-hero__text { margin-top: 24px; }
.cb-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.cb-knopf {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px;
  padding: 14px 26px; border-radius: 999px; font-weight: 500; font-size: 15px;
  color: #FBF8F3; background: var(--cb-ink); border: 1px solid var(--cb-ink);
  box-shadow: 0 8px 20px -8px rgba(22,21,18,.5), 0 1px 0 rgba(255,255,255,.18) inset;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.cb-knopf:hover { background: var(--cb-accent-dunkel); border-color: var(--cb-accent-dunkel); transform: translateY(-1px); }
.cb-knopf--glas {
  color: var(--cb-ink); background: var(--cb-glas-stark); border-color: var(--cb-glas-rand);
  -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%);
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 8px 20px -10px rgba(70,40,20,.3);
}
.cb-knopf--glas:hover { background: rgba(255,255,255,.85); color: var(--cb-ink); border-color: #fff; }
.cb-knopf:focus-visible, .cb-faq summary:focus-visible, .cb-chat__eingabe:focus-visible { outline: 2px solid var(--cb-accent-dunkel); outline-offset: 3px; }
.cb-hinweis { font-size: 13px; color: var(--cb-muted); margin: 14px 0 0; }

/* ---------- Chat-Fenster (Beispiel, nicht echt) ---------- */
.cb-chat { position: relative; }
.cb-chat__fenster {
  background: var(--cb-glas); border: 1px solid var(--cb-glas-rand); border-radius: 30px;
  -webkit-backdrop-filter: blur(26px) saturate(180%); backdrop-filter: blur(26px) saturate(180%);
  box-shadow: var(--cb-glas-schatten), 0 40px 70px -30px rgba(120,60,30,.35);
  overflow: hidden; max-width: 460px; margin: 0 auto;
}
.cb-chat__kopf { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,.7); background: rgba(255,255,255,.35); }
.cb-chat__punkt { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-family: 'Instrument Serif', Georgia, serif; font-size: 18px; background: linear-gradient(145deg, #E48A5E, #C2643A); box-shadow: 0 4px 10px -3px rgba(194,100,58,.6), 0 1px 0 rgba(255,255,255,.4) inset; }
.cb-chat__name { font-weight: 600; font-size: 15px; line-height: 1.2; }
.cb-chat__status { font-size: 12px; color: var(--cb-muted); display: flex; align-items: center; gap: 6px; }
.cb-chat__status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #5BA774; box-shadow: 0 0 0 3px rgba(91,167,116,.2); }
.cb-chat__verlauf { padding: 20px; display: flex; flex-direction: column; gap: 10px; min-height: 340px; }
.cb-blase { max-width: 84%; padding: 11px 15px; border-radius: 20px; font-size: 14.5px; line-height: 1.5; }
.cb-blase--bot { align-self: flex-start; background: rgba(255,255,255,.78); border: 1px solid rgba(255,255,255,.9); border-bottom-left-radius: 7px; box-shadow: 0 6px 14px -8px rgba(70,40,20,.25); }
.cb-blase--ich { align-self: flex-end; color: #fff; background: linear-gradient(145deg, #D17447, #BB5A30); border-bottom-right-radius: 7px; box-shadow: 0 8px 16px -8px rgba(170,80,40,.55); }
.cb-chat__eingabe { margin: 0 16px 16px; padding: 12px 18px; border-radius: 999px; background: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.85); color: var(--cb-muted); font-size: 14px; display: flex; justify-content: space-between; align-items: center; }
.cb-chat__senden { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--cb-ink); color: #fff; }
.cb-chat__fuss { text-align: center; font-size: 12px; color: var(--cb-muted); margin: 14px 0 0; }
html.js-an .cb-blase.cb-neu { opacity: 0; transform: translateY(8px) scale(.98); }
.cb-blase { transition: opacity .45s ease, transform .45s cubic-bezier(.2,.7,.2,1); }
@media (prefers-reduced-motion: reduce) { html.js-an .cb-blase.cb-neu { opacity: 1; transform: none; } }

/* ---------- Karten ---------- */
.cb-raster3 { display: grid; gap: 18px; margin-top: 44px; }
@media (min-width: 820px) { .cb-raster3 { grid-template-columns: repeat(3, 1fr); gap: 22px; } }
.cb-karte { padding: 30px 28px; transition: transform .35s ease, box-shadow .35s ease; }
@media (hover: hover) { .cb-karte:hover { transform: translateY(-4px); } }
.cb-icon { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 20px; color: var(--cb-accent-dunkel); background: linear-gradient(145deg, rgba(255,255,255,.95), rgba(255,255,255,.4)); border: 1px solid #fff; box-shadow: 0 8px 16px -8px rgba(170,80,40,.4); }
.cb-karte h3 { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-size: 1.6rem; line-height: 1.1; margin: 0 0 10px; letter-spacing: -0.01em; }
.cb-karte p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--cb-ink2); }

/* ---------- Ablauf ---------- */
.cb-schritte { display: grid; gap: 18px; margin-top: 44px; counter-reset: schritt; }
@media (min-width: 820px) { .cb-schritte { grid-template-columns: repeat(3, 1fr); gap: 22px; } }
.cb-schritt { padding: 30px 28px; counter-increment: schritt; }
.cb-schritt::before { content: counter(schritt, decimal-leading-zero); display: block; font-family: 'Instrument Serif', Georgia, serif; font-size: 3rem; line-height: 1; color: var(--cb-accent); margin-bottom: 14px; }
.cb-schritt h3 { font-weight: 600; font-size: 1.05rem; margin: 0 0 8px; }
.cb-schritt p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--cb-ink2); }

/* ---------- Für wen / Enthalten ---------- */
.cb-zwei { display: grid; gap: 22px; margin-top: 44px; }
@media (min-width: 900px) { .cb-zwei { grid-template-columns: 1fr 1fr; } }
.cb-liste { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.cb-liste li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: 15.5px; line-height: 1.55; color: var(--cb-ink2); }
.cb-liste svg { margin-top: 3px; color: var(--cb-accent-dunkel); }
.cb-box { padding: 32px 30px; }
.cb-box h3 { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-size: 1.8rem; line-height: 1.08; margin: 0; }

/* ---------- Preis (Platzhalter) ---------- */
.cb-preis { padding: 40px 32px; text-align: center; background: var(--cb-glas-stark); max-width: 760px; margin: 44px auto 0; }
.cb-preis__zahl { font-family: 'Instrument Serif', Georgia, serif; font-size: clamp(2.4rem, 6vw, 3.6rem); line-height: 1; color: var(--cb-accent); margin: 0 0 8px; }
.cb-preis p { margin: 0 auto; max-width: 52ch; color: var(--cb-ink2); line-height: 1.6; }
.cb-preis__klein { font-size: 13px; color: var(--cb-muted); margin-top: 12px !important; }

/* ---------- FAQ ---------- */
.cb-faq-liste { display: grid; gap: 12px; margin-top: 40px; max-width: 820px; }
.cb-faq { border-radius: 20px; overflow: hidden; }
.cb-faq summary { cursor: pointer; list-style: none; padding: 20px 24px; font-weight: 500; font-size: 16px; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 56px; }
.cb-faq summary::-webkit-details-marker { display: none; }
.cb-faq summary::after { content: '+'; font-size: 24px; line-height: 1; color: var(--cb-accent-dunkel); transition: transform .25s ease; flex: none; }
.cb-faq[open] summary::after { transform: rotate(45deg); }
.cb-faq p { margin: 0; padding: 0 24px 22px; font-size: 15.5px; line-height: 1.65; color: var(--cb-ink2); }

/* ---------- Abschluss ---------- */
.cb-schluss { padding: 56px 28px; text-align: center; background: var(--cb-glas-stark); }
.cb-schluss .cb-h2 { margin-left: auto; margin-right: auto; max-width: 18ch; }
.cb-schluss .cb-lead { margin: 0 auto; }
.cb-schluss .cb-knoepfe { justify-content: center; }

/* ---------- Entwurfsband (vor dem Livegang entfernen) ---------- */
.cb-entwurf { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 60; padding: 7px 16px; border-radius: 999px; font-size: 12px; font-weight: 500; color: #fff; background: rgba(22,21,18,.82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); pointer-events: none; }
@media (max-width: 767px) { .cb-entwurf { bottom: 84px; } }

.cb-mitte { text-align: center; }
@media (max-width: 767px) { .cb-knoepfe { justify-content: center; } }

/* Chat-Knopf und Fenster über der unteren Kontaktleiste am Handy */
@media (max-width: 767px) { body.seite-chatbot .wkc-knopf { bottom: 84px; } body.seite-chatbot .wkc-fenster { bottom: 156px; height: min(520px, calc(100vh - 190px)); } }

/* ---------- Hover: Anheben + Lichtschimmer, der der Maus folgt (Klasse g-hover setzt glas.js) ---------- */
body.seite-chatbot .g-hover { transition: transform .38s cubic-bezier(.2,.7,.2,1), box-shadow .38s ease, border-color .3s ease; }
@media (hover: hover) and (pointer: fine) {
  body.seite-chatbot .g-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 -1px 0 rgba(22,21,18,0.04) inset, 0 30px 50px -20px rgba(70,40,20,0.34), 0 4px 10px rgba(70,40,20,0.08);
    border-color: #fff;
    background-image: radial-gradient(460px circle at var(--px, 50%) var(--py, 0%), rgba(255,255,255,0.6), rgba(255,255,255,0) 62%);
  }
  body.seite-chatbot .cb-chat__fenster.g-hover:hover { transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) { body.seite-chatbot .g-hover, body.seite-chatbot .g-hover:hover { transform: none !important; transition: none; } }