/* AI Værk — components.css: CTA-Band, FAB, FAQ. 3/5 */

/* ── CTA band ──────────────────────────────────────────── */
.cta-band {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 56px);
  background: var(--card);
  border: 1px solid var(--hairline-strong);
  border-radius: 20px;
  padding: clamp(28px, 4.5vw, 48px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
/* Soft brand wash in the far corner — colour without noise. */
.cta-band::before {
  content: "";
  position: absolute;
  right: -70px; top: -80px;
  width: 380px; height: 280px;
  background:
    radial-gradient(46% 56% at 66% 40%, rgba(255, 180, 94, 0.34), transparent 70%),
    radial-gradient(42% 52% at 30% 66%, rgba(136, 162, 255, 0.24), transparent 70%),
    radial-gradient(40% 50% at 82% 74%, rgba(112, 190, 140, 0.26), transparent 70%);
  filter: blur(18px);
  pointer-events: none;
}
.cta-band > * { position: relative; }
.cta-band h2 { font-size: clamp(21px, 2.8vw, 28px); letter-spacing: -0.016em; }
.cta-band p { margin-top: 10px; color: var(--stone); max-width: 56ch; }
.cta-band .btn { flex: none; }
.cta-band .cta-copy { flex: 1; }
/* The founders in miniature — warmth without stealing the aurora. */
.cta-duo { display: flex; flex: none; }
.cta-duo img {
  width: 56px; height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2.5px solid var(--card);
  box-shadow: 0 3px 12px oklch(0.24 0.02 70 / 0.14);
  background: var(--paper);
}
.cta-duo img:first-child { transform: rotate(-2deg); z-index: 1; }
.cta-duo img:last-child { margin-left: -12px; transform: rotate(1.6deg); }
@media (max-width: 720px) {
  .cta-band { flex-direction: column; align-items: flex-start; }
}

/* ── Schwebender Kontakt-Einstieg "Ruhig" ──────────────── */
/* Labor 3, von Justus gewaehlt (26.09.2026). Geschlossen eine Creme-Pille
   mit beiden Portraets und "Kontakt", eine weiche Aurora innen hinter den
   Portraets. Offen eine kleine Notiz: wer da ist, ein dunkler Knopf, zwei
   leise Wege.
   Form: ein Element, zwei Zuschnitte. Die Karte liegt immer in voller
   Groesse da; clip-path schneidet sie geschlossen auf die Pille zu. Die
   Pille ist die Grundleiste der Karte, offen steht dort leise
   "x Schliessen", an genau derselben Stelle.
   Rand: .fab-box traegt die Randfarbe, .fab-fill liegt 1 px kleiner
   zugeschnitten darauf. So folgt die Haarlinie jedem Zwischenstand des
   Morphs, und es gibt keinen Schlagschatten, der sich ueber farbigen
   Kaesten als Kante abzeichnet (scripts/layout-audit.cjs, fab-*).
   Status: im Portraet. Wer erreichbar ist, steht vorn, in Farbe und etwas
   groesser; der andere tritt zurueck. Im Gespraech beide gleich und ruhig,
   ausserhalb der Zeiten beide sanft entfaerbt. data-fab-state (ganzer
   Knopf) und data-state (je Person) setzt site.js aus der Telefonanlage.
   base.css (.lang-hint) haengt an .fab, .fab.is-open und .fab-btn. */
.fab {
  --fab-w: 288px;       /* Karte */
  --fab-bw: 141px;      /* Pille */
  --fab-bh: 50px;
  --fab-br: 25px;
  --fab-cr: 20px;       /* Kartenradius */
  --fab-pa: 32px;       /* Portraet in der Pille */
  --fab-av: 38px;       /* Portraet in der Karte */
  --fab-tap: 44px;      /* Kontaktwege */
  --fab-edge: #dad4c8;
  --fab-band: #f5f2eb;
  position: fixed;
  right: clamp(16px, 2.4vw, 28px);
  bottom: clamp(16px, 2.4vw, 28px);
  z-index: 90;
  width: var(--fab-w);
  color: var(--ink);
  font-family: var(--font-body);
  /* Der Container selbst darf keine Taps schlucken: geschlossen nimmt nur
     die Pille sie an, offen die ganze Karte. */
  pointer-events: none;
}
@media (min-width: 701px) {
  .fab { --fab-w: 292px; --fab-bw: 148px; --fab-bh: 52px; --fab-br: 26px; --fab-pa: 34px; }
}
/* Mit Maus reichen 36 px; am Finger bleiben es 44. */
@media (pointer: fine) {
  .fab { --fab-tap: 36px; }
}

/* ── Form ── */
.fab-box {
  position: relative;
  border-radius: var(--fab-cr);
  background-color: var(--fab-edge);
  clip-path: inset(calc(100% - var(--fab-bh)) 0 0 calc(100% - var(--fab-bw)) round var(--fab-br));
  transform-origin: calc(100% - var(--fab-bw) / 2) calc(100% - var(--fab-bh) / 2);
  /* Zu: erst geht der Inhalt, dann kommt die Pille zurueck. */
  transition: clip-path 0.3s var(--ease) 0.1s, scale 0.16s var(--ease), background-color 0.2s var(--ease);
}
.fab-fill {
  position: relative;
  isolation: isolate;
  border-radius: var(--fab-cr);
  background: var(--paper);
  clip-path: inset(calc(100% - var(--fab-bh) + 1px) 1px 1px calc(100% - var(--fab-bw) + 1px) round calc(var(--fab-br) - 1px));
  transition: clip-path 0.3s var(--ease) 0.1s;
}
.fab.is-open .fab-box {
  clip-path: inset(0 round var(--fab-cr));
  pointer-events: auto;
  transition: clip-path 0.32s var(--ease), scale 0.16s var(--ease), background-color 0.2s var(--ease);
}
.fab.is-open .fab-fill {
  clip-path: inset(1px round calc(var(--fab-cr) - 1px));
  transition: clip-path 0.32s var(--ease);
}
.fab:not(.is-open) .fab-box:has(.fab-btn:active) { scale: 0.97; }
@media (hover: hover) {
  .fab:not(.is-open) .fab-box:has(.fab-btn:hover) { background-color: #cdc6b8; }
}

/* Grundleiste: geschlossen die Pille, offen der leise Fuss. */
.fab-band {
  position: relative;
  height: var(--fab-bh);
  background: var(--fab-band);
  transition: background-color 0.24s var(--ease) 0.1s;
}
.fab.is-open .fab-band { background: var(--paper); transition: background-color 0.3s var(--ease) 0.12s; }
.fab-band::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: var(--hairline);
  opacity: 0;
  transition: opacity 0.12s var(--ease-exit);
}
.fab.is-open .fab-band::before { opacity: 1; transition: opacity 0.2s var(--ease) 0.16s; }

/* Aurora in der Pille: ein einmal weichgezeichnetes, ruhendes Feld hinter
   den Portraets. Bewegt wird nur translate/rotate/scale, eine Runde in 14 s. */
.fab-aurora {
  position: absolute;
  right: 0; bottom: 0;
  width: var(--fab-bw);
  height: var(--fab-bh);
  border-radius: var(--fab-br);
  overflow: hidden;
  pointer-events: none;
  transition: opacity 0.26s var(--ease) 0.2s;
}
.fab.is-open .fab-aurora { opacity: 0; transition: opacity 0.14s var(--ease-exit); }
.fab-aurora i {
  position: absolute;
  left: -16px; top: -26px;
  width: 104px; height: 102px;
  background:
    radial-gradient(38% 36% at 40% 42%, oklch(0.72 0.11 215 / 0.62), transparent 74%),
    radial-gradient(30% 30% at 64% 62%, oklch(0.68 0.14 330 / 0.42), transparent 74%),
    radial-gradient(30% 28% at 30% 66%, oklch(0.72 0.08 165 / 0.5), transparent 74%),
    radial-gradient(26% 26% at 66% 32%, oklch(0.45 0.15 285 / 0.22), transparent 74%);
  filter: blur(7px);
  animation: fab-aurora-drift 14s ease-in-out infinite alternate;
}
@keyframes fab-aurora-drift {
  0%   { translate: 0 0; rotate: 0deg; scale: 1; }
  50%  { translate: 5px -2px; rotate: 24deg; scale: 1.06; }
  100% { translate: -3px 2px; rotate: -18deg; scale: 0.96; }
}

/* ── Der Knopf: dieselbe Stelle, zu und offen ── */
.fab-btn {
  position: absolute;
  right: 0; bottom: 0;
  z-index: 2;
  width: var(--fab-bw);
  height: var(--fab-bh);
  margin: 0;
  padding: 0;
  font: inherit;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: var(--fab-br);
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}
/* Lichtsaum oben, nur geschlossen. */
.fab-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(33, 30, 26, 0.035);
  transition: opacity 0.2s var(--ease) 0.24s;
}
.fab.is-open .fab-btn::before { opacity: 0; transition: opacity 0.1s var(--ease-exit); }
.fab-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
.fab-face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
}
.fab-face--open {
  gap: 10px;
  padding-left: calc((var(--fab-bh) - var(--fab-pa)) / 2);
  transition: opacity 0.2s var(--ease) 0.26s;
}
.fab.is-open .fab-face--open { opacity: 0; transition: opacity 0.09s var(--ease-exit); }
.fab-label { font: 560 14.5px/1 var(--font-brand); letter-spacing: -0.01em; padding-bottom: 1px; }
@media (min-width: 701px) {
  .fab-label { font-size: 15px; }
}
/* Schliessen: das Kreuz und das Wort in Stein, ohne Flaeche. */
.fab-face--close {
  justify-content: center;
  gap: 7px;
  opacity: 0;
  color: var(--stone);
  transition: opacity 0.09s var(--ease-exit), color 0.18s var(--ease);
}
.fab.is-open .fab-face--close { opacity: 1; transition: opacity 0.2s var(--ease) 0.18s, color 0.18s var(--ease) 0s; }
.fab-face--close svg { display: block; flex: none; margin: 0 -2px; stroke-width: 1.9; }
.fab-face--close span { font: 500 13.5px/1 var(--font-brand); letter-spacing: -0.004em; padding-bottom: 1px; }
.fab-face--close::before {
  content: "";
  position: absolute;
  inset: 9px 12px;
  z-index: -1;
  border-radius: 999px;
  background: rgba(33, 30, 26, 0.045);
  opacity: 0;
  transition: opacity 0.18s var(--ease);
}
@media (hover: hover) {
  .fab.is-open .fab-btn:hover .fab-face--close { color: var(--ink); }
}
.fab.is-open .fab-btn:active .fab-face--close { color: var(--ink); }
.fab.is-open .fab-btn:active .fab-face--close::before { opacity: 1; }

/* ── Portraets ── */
.fab-duo { position: relative; display: flex; flex: none; align-items: center; }
.fab-avatar {
  --s: var(--fab-pa);
  --ring: var(--fab-band);
  position: relative;
  display: block;
  flex: none;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: var(--paper-deep) var(--img) var(--pos, 50% 20%) / 138% no-repeat;
  box-shadow: 0 0 0 2px var(--ring), inset 0 0 0 1px rgba(33, 30, 26, 0.08);
  transform-origin: var(--to, 50% 50%);
  transition: scale 0.36s var(--ease), translate 0.36s var(--ease);
}
/* Die ruhende Fassung derselben Aufnahme: entsaettigt und leicht
   verblasst. Nur ihre Deckkraft wechselt, der Filter selbst ruht. */
.fab-avatar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: inherit;
  box-shadow: inset 0 0 0 1px rgba(33, 30, 26, 0.08);
  filter: grayscale(1) contrast(0.88) brightness(1.1);
  opacity: var(--mute, 0);
  transition: opacity 0.36s var(--ease);
}
.fab-avatar[data-fab-person="elias"] { --img: var(--fab-elias); --pos: 50% 14%; --to: 60% 50%; z-index: 2; }
.fab-avatar[data-fab-person="justus"] { --img: var(--fab-justus); --pos: 50% 30%; --to: 20% 50%; z-index: 1; margin-left: -11px; }

/* Pille: nur ein Hauch Status. */
.fab[data-fab-state="on"] .fab-btn .fab-avatar:not([data-state="available"]) { --mute: 0.4; scale: 0.94; }
.fab:is([data-fab-state="closed"], [data-fab-state="none"]) .fab-btn .fab-avatar { --mute: 0.3; }

/* ── Karte ── */
.fab-card { visibility: hidden; transition: visibility 0s linear 0.14s; }
.fab.is-open .fab-card { visibility: visible; transition: visibility 0s; }
.fab-note { padding: 14px 16px 12px; }
/* Drei Schritte: wer, Knopf, Kontaktwege (100 ms Staffel). Zu in
   umgekehrter Folge. Shorthand-Falle (motion.css): beide Listen tragen
   auch transform und background-color des .btn (0.35s, ohne Verzoegerung),
   sonst ersetzt diese Liste die des Knopfs und Druck und Hover springen. */
.fab-note > * {
  opacity: 0;
  translate: 0 4px;
  transition: opacity 0.1s var(--ease-exit) var(--o, 0s), translate 0.1s var(--ease-exit) var(--o, 0s),
              transform 0.35s var(--ease) 0s, background-color 0.35s var(--ease) 0s;
}
.fab.is-open .fab-note > * {
  opacity: 1;
  translate: 0 0;
  transition: opacity 0.22s var(--ease) var(--d, 0.15s), translate 0.3s var(--ease) var(--d, 0.15s),
              transform 0.35s var(--ease) 0s, background-color 0.35s var(--ease) 0s;
}
.fab-note > :nth-child(1) { --o: 0.06s; }
.fab-note > :nth-child(2) { --d: 0.2s; --o: 0.03s; }
.fab-note > :nth-child(3) { --d: 0.25s; }

/* Wer */
.fab-who { display: flex; align-items: center; gap: 12px; }
.fab-who .fab-avatar { --s: var(--fab-av); --ring: var(--paper); scale: 0.92; }
.fab-who .fab-avatar[data-fab-person="justus"] { margin-left: -10px; }
/* Jemand erreichbar: vorn, in Farbe, etwas groesser; wer nicht, tritt zurueck. */
.fab[data-fab-state="on"] .fab-who .fab-avatar { --mute: 0.62; scale: 0.84; }
.fab[data-fab-state="on"] .fab-who .fab-avatar[data-fab-person="justus"] { translate: 1px 0; }
.fab[data-fab-state="on"] .fab-who .fab-avatar[data-state="available"] { --mute: 0; scale: 1; translate: 0 0; z-index: 3; }
/* Im Gespraech: beide gleich, ruhig. */
.fab[data-fab-state="busy"] .fab-who .fab-avatar { --mute: 0.16; }
/* Ausserhalb der Zeiten oder ohne Telefon: beide sanft entfaerbt. */
.fab:is([data-fab-state="closed"], [data-fab-state="none"]) .fab-who .fab-avatar { --mute: 0.58; }
.fab-names { display: grid; gap: 2px; min-width: 0; }
.fab-names b { font: 600 15px/1.2 var(--font-brand); letter-spacing: -0.016em; color: var(--ink); }
@media (min-width: 701px) {
  .fab-names b { font-size: 15.5px; }
}
/* Bewusst balance statt des geerbten pretty: die Statuszeile bricht oft
   genau einmal, und zwei gleich lange Zeilen lesen sich ruhiger. */
.fab-status { display: block; font-size: 12px; line-height: 1.28; color: var(--stone); text-wrap: balance; }
.fab-status em { font-style: normal; font-weight: 560; color: var(--ink-soft); }
.fab-status.is-fresh { animation: fab-say 0.3s var(--ease) both; }
@keyframes fab-say { from { opacity: 0; } to { opacity: 1; } }

/* Der eine Knopf: .btn .btn-dark aus base.css, samt Aurora-Saum unter dem
   Zeiger. Hier nur die volle Breite. */
.fab-go { display: flex; justify-content: center; margin-top: 13px; }

/* Schreiben und Anrufen: zwei leise Geisterknoepfe mit den Icons der
   Website, voll antippbar. Knopf und Wege bilden einen Block: 6 px Fuge. */
.fab-reach { display: flex; gap: 6px; margin-top: 6px; }
.fab-ghost {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: var(--fab-tap);
  padding: 0 10px;
  border: 1px solid var(--hairline-strong);
  border-radius: 10px;
  color: var(--ink-soft);
  font: 450 13px/1 var(--font-body);
  letter-spacing: -0.003em;
  text-decoration: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.fab-ghost[hidden] { display: none; }
.fab-ghost > span:not(.visually-hidden), .fab-ghost > i { padding-bottom: 1px; font-style: normal; }
.fab-ghost .ai-ico { color: var(--stone); transition: color 0.2s var(--ease); }
.fab-ghost .ai-ico svg { display: block; }
@media (hover: hover) {
  .fab-ghost:hover { border-color: #c8c1b3; background-color: rgba(33, 30, 26, 0.025); color: var(--ink); }
  .fab-ghost:hover .ai-ico { color: var(--ink); }
}
.fab-ghost:active { border-color: #c8c1b3; background-color: rgba(33, 30, 26, 0.055); color: var(--ink); }
.fab-ghost:active .ai-ico { color: var(--ink); }
.fab-ghost:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Ohne Telefon nimmt E-Mail die ganze Breite und zeigt die Adresse. */
.fab-mail-address { display: none; }
.fab-reach:has(> [data-fab-call][hidden]) .fab-mail-word { display: none; }
.fab-reach:has(> [data-fab-call][hidden]) .fab-mail-address { display: inline; }

/* Weniger Bewegung: die Aurora ruht, Karte und Pille wechseln ohne Morph.
   Der Aurora-Saum des dunklen Knopfs blendet weiter weich ein (base.css). */
@media (prefers-reduced-motion: reduce) {
  .fab-aurora i, .fab-status.is-fresh { animation: none; }
  .fab *, .fab *::before, .fab *::after { transition-duration: 0s !important; transition-delay: 0s !important; }
  .fab .fab-go::before, .fab .fab-go::after { transition-duration: 0.6s !important; }
  .fab-note > *, .fab .fab-avatar { translate: none !important; }
  .fab:not(.is-open) .fab-box:has(.fab-btn:active) { scale: none; }
}

/* ── FAQ ───────────────────────────────────────────────── */
.faq-shell { max-width: 820px; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 3.6vw, 42px); }
.faq-cat h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(19px, 2.4vw, 24px);
  letter-spacing: -0.014em;
  margin-bottom: 12px;
}
.faq-list {
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 4px 22px;
  box-shadow: 0 8px 20px rgba(33, 30, 26, 0.05);
}
.faq-item { border-top: 1px solid var(--hairline); }
.faq-item:first-child { border-top: 0; }
.faq-item summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: 16px 40px 16px 0;
  font-family: var(--font-brand);
  font-size: 16px;
  font-weight: 560;
  letter-spacing: -0.01em;
  color: var(--ink);
  transition: color 0.2s var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--accent); }
.faq-marker {
  position: absolute;
  right: 4px;
  top: 50%;
  width: 14px; height: 14px;
  transform: translateY(-50%);
}
.faq-marker::before,
.faq-marker::after {
  content: "";
  position: absolute;
  background: var(--stone);
  border-radius: 2px;
  transition: transform 0.3s var(--ease), background 0.3s var(--ease);
}
.faq-marker::before { left: 0; top: 6px; width: 14px; height: 2px; }
.faq-marker::after { left: 6px; top: 0; width: 2px; height: 14px; }
.faq-item[open] .faq-marker::after { transform: scaleY(0); }
.faq-item[open] .faq-marker::before { background: var(--accent); }
.faq-a { overflow: hidden; }
.faq-a p { padding: 2px 40px 18px 0; font-size: 14.5px; line-height: 1.66; color: var(--ink-soft); max-width: 64ch; }
/* Kleine Telefone: Kartenpolster und Marker-Spalte nahmen der Frage fast
   ein Drittel der 280 px; "Behandlungsempfehlungen?" passte nicht mehr. */
@media (max-width: 389.98px) {
  .faq-list { padding-inline: 16px; }
  .faq-item summary { padding-right: 32px; }
  .faq-a p { padding-right: 32px; }
}
.faq-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 6px;
  color: var(--accent);
  font-weight: 540;
  text-decoration: none;
}
.faq-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── Sprachhinweis ────────────────────────────────────────────────────────
   Schmale Leiste ueber der Navigation. Ein Hinweis, keine Umleitung: der
   Nutzer entscheidet, ob er die Domain wechselt. Zurueckhaltend, weil er
   auf jeder Einstiegsseite erscheinen kann. Alle Regeln auf .lang-suggestion
   gescoped — components.css laedt auf allen drei Domains. */
.lang-suggestion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  padding: 10px var(--gutter);
  background: var(--paper-deep);
  border-bottom: 1px solid var(--hairline);
  font-size: 14px;
  color: var(--ink-soft);
}

.lang-suggestion__text { margin: 0; }

.lang-suggestion__cta {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s var(--ease);
}

.lang-suggestion__cta:hover { color: var(--ink); }

.lang-suggestion__close {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  padding: 6px;
  margin-block: -6px;
  color: var(--stone);
  transition: color 0.2s var(--ease);
}

.lang-suggestion__close:hover { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .lang-suggestion__cta,
  .lang-suggestion__close { transition: none; }
}