/* ═══════════════════════════════════════════════════════════
   clairr · Begleitung — seitenspezifische Styles
   Baut auf css/style.css (Tokens, Nav, Buttons, Cards, .doc, .plan,
   .cta, .footer, .crossmod, .marquee, Cursor). Hier nur, was diese
   Seite exklusiv braucht. Bewusst kein WebGL, keine Blur-Flächen
   in Scroll-Nähe (Zielhardware Intel Iris 645).
   ═══════════════════════════════════════════════════════════ */

/* ── S01 · Hero (leicht, typografisch, kein 3D) ─────────── */
.hero--lite { min-height: 92svh; padding-bottom: clamp(90px, 12vh, 140px); }
.hero--lite .hero__content { max-width: var(--max); }

/* Header-Hintergrundbild — Praxis-Empfang.
   Liegt ganz unten (z-index 0), Raster/Rahmen/Content darüber.
   Der Scrim nutzt die Theme-Grundfarbe (--void): dunkel im Dark-,
   hell im Light-Mode. Links deckt er voll ab (dort stehen die Texte),
   rechts bleibt das Bild sichtbar. So bleiben alle Texte lesbar. */
.hero--lite .hero__bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("../public/media/clairr_Begleitseite-Header-Arztpraxis-Empfang.png") center 28% / cover no-repeat;
}
.hero--lite .hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    /* Unterer Verlauf: Bild weich in den Folgeabschnitt (--void) auslaufen lassen */
    linear-gradient(180deg,
      transparent 55%,
      color-mix(in srgb, var(--void) 55%, transparent) 80%,
      var(--void) 100%),
    linear-gradient(100deg,
      var(--void) 0%,
      var(--void) 30%,
      color-mix(in srgb, var(--void) 82%, transparent) 52%,
      color-mix(in srgb, var(--void) 52%, transparent) 76%,
      color-mix(in srgb, var(--void) 34%, transparent) 100%),
    color-mix(in srgb, var(--void) 30%, transparent);
}
/* Schmale Viewports: Text überlagert das ganze Bild → Scrim verstärken */
@media (max-width: 860px) {
  .hero--lite .hero__bg { background-position: center 22%; }
  .hero--lite .hero__bg::after {
    background:
      linear-gradient(180deg,
        color-mix(in srgb, var(--void) 62%, transparent) 0%,
        color-mix(in srgb, var(--void) 80%, transparent) 55%,
        var(--void) 100%),
      color-mix(in srgb, var(--void) 40%, transparent);
  }
}

/* Reduzierte HUD-Ecken aus dem Pilot-Vokabular — nur Rahmen, kein WebGL */
.hero__frame { position: absolute; inset: clamp(84px, 10vh, 120px) clamp(18px, 3vw, 42px) clamp(90px, 12vh, 150px); z-index: 0; pointer-events: none; }
.hero__frame span { position: absolute; width: 20px; height: 20px; border: 0 solid var(--line-strong); }
.hero__frame .c-tl { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.hero__frame .c-tr { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.hero__frame .c-bl { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.hero__frame .c-br { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }

/* Selbstzeichnende Roadmap-Linie */
.hero__roadmap { margin-top: clamp(40px, 6vh, 72px); max-width: 640px; }
.hero__roadmap svg { width: 100%; height: auto; display: block; overflow: visible; }
.roadmap__line { stroke: var(--line-strong); stroke-width: 1.5; fill: none; }
.roadmap__node { fill: var(--void); stroke: var(--lumiere); stroke-width: 1.5; }
.roadmap__node--win { stroke: var(--aube); }
.roadmap__label { fill: var(--faint); font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; text-anchor: middle; }

/* ── S02 · Ausgangslage: Cards beim Hover blau umranden (statt grau) ── */
.symptom:hover { border-color: rgba(11, 110, 240, .55); }

/* ── S03 · Lücke im Markt (Gegenüberstellung) ───────────── */
.gap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 56px; }
@media (max-width: 900px) { .gap { grid-template-columns: 1fr; } }
.gap__col { position: relative; border: 1px solid var(--line); border-radius: 18px; padding: 30px 28px; background: var(--void-2); transition: border-color .4s; }
.section--lifted .gap__col { background: var(--void-3); }
.gap__col--clairr,
.section--lifted .gap__col--clairr { border-color: rgba(11, 110, 240, .45); background: rgba(11, 110, 240, .06); }
.gap__role { display: block; margin-bottom: 16px; color: var(--faint); }
.gap__col--clairr .gap__role { color: var(--lumiere); }
.gap__col h3 { font-weight: 600; font-size: 1.18rem; letter-spacing: -.01em; margin-bottom: 10px; }
.gap__col p { color: var(--muted); font-size: .96rem; }
.gap__verdict { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--faint); font-size: .86rem; }
.gap__col--clairr .gap__verdict { color: var(--offwhite); border-top-color: rgba(11, 110, 240, .28); }

/* Signal-Linie (Herstellerneutralität): Systemnamen als ruhige Chips auf
   einer Hairline; alle 9 s läuft ein Lumière-Impuls durch, jeder Chip
   quittiert kurz. begleitung.js koppelt die Ping-Delays an die Chip-Position. */
.sysline { padding: 64px 0 10px; }
.sysline__caption { display: flex; align-items: center; gap: 10px; color: var(--faint); margin-bottom: 26px; }
.sysline__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--lumiere); flex: none; }
.sysline__band { position: relative; }
.sysline__wire { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line); }
@media (max-width: 979px) { .sysline__wire { display: none; } } /* bei umbrechenden Chips keine Linie */
.sysline__pulse { position: absolute; inset: -14px 0; overflow: hidden; pointer-events: none; }
.sysline__pulse i {
  position: absolute; top: 0; bottom: 0; left: 0; width: 13%;
  background: linear-gradient(90deg, transparent, rgba(11, 110, 240, .07) 40%, rgba(11, 110, 240, .16) 50%, rgba(11, 110, 240, .07) 60%, transparent);
  transform: translateX(-100%);
}
.js .sysline__band.is-on .sysline__pulse i { animation: syslinePulse 9s linear infinite; }
@keyframes syslinePulse { from { transform: translateX(-100%); } to { transform: translateX(870%); } }
.sysline__chips { list-style: none; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 14px; position: relative; }
.sysline__chip {
  padding: 7px 14px; border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--void-2); color: var(--muted); font-size: .62rem;
}
.section--lifted .sysline__chip { background: var(--void-3); }
.js .sysline__band.is-on .sysline__chip { animation: syslinePing 9s linear infinite; animation-delay: var(--d, 0s); }
@keyframes syslinePing {
  0%, 100% { border-color: var(--line-strong); color: var(--muted); box-shadow: 0 0 0 0 rgba(11, 110, 240, 0); }
  1.6% { border-color: rgba(11, 110, 240, .75); color: var(--offwhite); box-shadow: 0 0 22px -6px rgba(11, 110, 240, .55); }
  5.5% { border-color: var(--line-strong); color: var(--muted); box-shadow: 0 0 0 0 rgba(11, 110, 240, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .js .sysline__band.is-on .sysline__pulse i,
  .js .sysline__band.is-on .sysline__chip { animation: none !important; }
}
/* Light Mode: die wandernde Lichtspur liest auf Paper als blauer Schmier.
   Band ausblenden — die positionssynchronen Chip-Pings tragen das Signal
   ohnehin (leuchten in Reihenfolge auf); Ping-Glow etwas zarter. */
html[data-theme="light"] .sysline__pulse { display: none; }
html[data-theme="light"] .js .sysline__band.is-on .sysline__chip { animation-name: syslinePingLight; }
@keyframes syslinePingLight {
  0%, 100% { border-color: var(--line-strong); color: var(--muted); box-shadow: 0 0 0 0 rgba(11, 110, 240, 0); }
  1.6% { border-color: rgba(11, 110, 240, .7); color: var(--offwhite); box-shadow: 0 0 14px -8px rgba(11, 110, 240, .3); }
  5.5% { border-color: var(--line-strong); color: var(--muted); box-shadow: 0 0 0 0 rgba(11, 110, 240, 0); }
}

/* ── S04 · Angebot (produktisierte Leistungsliste) ──────── */
.offerlist { list-style: none; display: grid; gap: 14px; margin-top: 52px; max-width: 760px; }
.offerlist li { position: relative; display: flex; gap: 16px; align-items: flex-start; padding: 18px 22px; border: 1px solid var(--line); border-radius: 14px; background: var(--void-2); transition: border-color .4s; }
.section--lifted .offerlist li { background: var(--void-3); }
.offerlist li:hover { border-color: var(--line-strong); }
.offerlist__mark { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--lumiere); margin-top: 9px; }
.offerlist strong { display: block; color: var(--offwhite); font-weight: 500; font-size: 1rem; margin-bottom: 2px; }
.offerlist span.offerlist__sub { color: var(--muted); font-size: .92rem; }
.offerlist__item--win { border-color: rgba(240, 160, 48, .45); background: rgba(240, 160, 48, .05); }
.section--lifted .offerlist__item--win { background: rgba(240, 160, 48, .06); }
.offerlist__item--win .offerlist__mark { background: var(--aube); }
.offerlist__item--win strong { color: var(--offwhite); }
.offerlist__body { display: flex; flex-direction: column; gap: 4px; }
.offerlist__example { display: block; margin-top: 6px; font-size: .72rem; letter-spacing: .08em; color: var(--faint); }
.offerlist__chiprow { margin-top: 8px; }

/* ── S05 · Ausbau-Abbinder nach Schritt 05 ──────────────── */
.ausbau { margin-top: 48px; max-width: 52ch; }
.ausbau__title { font-weight: 500; font-size: 1rem; color: var(--offwhite); letter-spacing: -.01em; margin-bottom: 10px; }
.ausbau__text { font-family: var(--serif); font-style: italic; font-size: clamp(1.1rem, 2vw, 1.4rem); line-height: 1.45; color: var(--muted); margin-bottom: 18px; }
/* Prägnanter Pill-Button statt zarter Mono-Link — Lumière, damit er
   auffällt, ohne mit dem Aube-Primär-CTA zu konkurrieren. */
.ausbau__link {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 4px;
  padding: 12px 24px; border-radius: 999px;
  border: 1px solid rgba(11, 110, 240, .5); background: rgba(11, 110, 240, .08);
  color: var(--lumiere); text-decoration: none; font-size: .74rem;
  transition: background-color .3s, color .3s, border-color .3s, box-shadow .3s;
}
.ausbau__link:hover {
  background: var(--lumiere); color: #fff; border-color: var(--lumiere);
  box-shadow: 0 12px 40px -14px rgba(11, 110, 240, .6);
}
.ausbau__link-arrow { transition: transform .3s; }
.ausbau__link:hover .ausbau__link-arrow { transform: translateX(4px); }
.team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 56px; }
@media (max-width: 900px) { .team { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .team { grid-template-columns: 1fr; } }
/* Bewusst hell im Dark Mode — invertiert im Light Mode (wie .doc) */
.teammate { background: var(--paper); color: var(--ink); border-radius: 16px; overflow: hidden; box-shadow: 0 40px 100px -40px rgba(0, 0, 0, .75); display: flex; flex-direction: column; }
.teammate__portrait { position: relative; aspect-ratio: 1 / 1; background: rgba(11, 110, 240, .12); }
.teammate__portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
.teammate__initials { position: absolute; inset: 0; display: grid; place-items: center; color: var(--lumiere); font-family: var(--mono); font-size: 1.6rem; letter-spacing: .04em; }
.teammate__meta { padding: 20px 22px 24px; display: grid; gap: 5px; }
.teammate__name { font-weight: 600; font-size: 1.12rem; letter-spacing: -.01em; }
.teammate__role { color: rgba(18, 18, 26, .58); font-size: .7rem; }

/* ── S07 · Ausblick — Konzept-Film statt UI-Mockup ──────── */
.outlook { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(32px, 5vw, 72px); align-items: center; margin-top: 48px; }
@media (max-width: 900px) { .outlook { grid-template-columns: 1fr; } }
.outlook__chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border-radius: 999px; border: 1px solid rgba(11, 110, 240, .5); color: var(--lumiere); margin-bottom: 22px; }
.outlook__chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--lumiere); }
/* Konzept-Film: randlos, per Ellipsen-Maske weich in die Sektion verlaufend —
   bewusst kein Rahmen/Karte, damit nichts „draufgeklatscht" wirkt. */
.outlook__screen { position: relative; }
.outlook__screen::before {
  /* Lumière-Bühnenlicht hinter dem Screen — bindet ihn an die Fläche */
  content: ""; position: absolute; inset: -14% -18%;
  background: radial-gradient(ellipse at 50% 46%, rgba(11, 110, 240, .10), transparent 62%);
  pointer-events: none;
}
/* Maske auf dem Frame (Video + Vignette gemeinsam): Kern voll deckend,
   ab ~45 % weich auslaufend — kein sichtbarer Rechteck-Rand mehr. */
.outlook__frame {
  position: relative;
  -webkit-mask-image: radial-gradient(ellipse 80% 76% at 50% 49%, #000 34%, transparent 76%);
  mask-image: radial-gradient(ellipse 80% 76% at 50% 49%, #000 34%, transparent 76%);
}
.outlook__frame::after {
  /* Vignette zieht die Studio-Fläche des Films aktiv in den Void-Grund */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 48%, transparent 34%, rgba(8, 8, 15, .78) 78%);
}
.outlook__video {
  display: block; width: 100%;
  aspect-ratio: 16 / 9; object-fit: cover;
  filter: saturate(.94) brightness(.96);
}
.outlook__caption { text-align: center; color: var(--faint); font-size: .6rem; margin-top: 4px; position: relative; }
/* Light Mode: der dunkle Film blendet nicht sauber in Creme aus — die
   weiche Void-Maske/Vignette liest auf Paper als Schmutzwolke. Statt
   randlos zu verlaufen bekommt er einen klaren, gerundeten Screen-Rahmen
   (wie .dash/.doc/.teammate): dunkler Screen sauber auf Creme statt Halo. */
html[data-theme="light"] .outlook__frame {
  -webkit-mask-image: none; mask-image: none;
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 44px 90px -40px rgba(18, 18, 26, .5), inset 0 1px 0 rgba(255, 255, 255, .05);
}
html[data-theme="light"] .outlook__frame::after { display: none; }
html[data-theme="light"] .outlook__screen::before {
  inset: -5% -7%;
  background: radial-gradient(ellipse at 50% 52%, rgba(11, 110, 240, .05), transparent 66%);
}
html[data-theme="light"] .outlook__video { filter: saturate(.94) brightness(1); }

/* Abbinder „Lieber mitgestalten" — als ruhiger Teil des Ausblicks, durch
   eine Hairline vom Konzept-Film darüber getrennt. Textstile via .crossmod__*. */
.outlook__alt {
  display: grid; justify-items: start; gap: 16px;
  margin-top: clamp(52px, 8vh, 96px);
  padding-top: clamp(38px, 6vh, 60px);
  border-top: 1px solid var(--line);
}

/* ── S08 · Investment (Dokument, ohne Streichpreis/Counter) ── */
.invest__grid { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(36px, 6vw, 80px); align-items: start; margin-top: 12px; }
@media (max-width: 900px) { .invest__grid { grid-template-columns: 1fr; } }
.invest__note { position: relative; padding-left: 26px; color: var(--muted); font-size: .96rem; margin-top: 16px; }
.invest__note::before { content: "+"; position: absolute; left: 0; color: var(--aube); font-family: var(--mono); }
/* Preis-Feld im Dokument: Space-Mono-Betrag ODER Fallback-Copy */
.doc__pricefield { min-height: 64px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; }
.doc__pricefield.is-price { font-family: var(--mono); font-weight: 700; font-size: clamp(2rem, 3.4vw, 2.8rem); letter-spacing: -.01em; }
.doc__pricefield.is-fallback { font-family: var(--sans); font-weight: 400; font-size: 1.06rem; line-height: 1.4; color: rgba(18, 18, 26, .72); }
html[data-theme="light"] .doc__pricefield.is-fallback { color: rgba(242, 241, 234, .72); }

/* ── S09 · Garantien (zwei Karten, Lumière-Nummernkreise) ── */
.guarantees { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 52px; }
@media (max-width: 820px) { .guarantees { grid-template-columns: 1fr; } }
.guarantee { position: relative; border: 1px solid var(--line); border-radius: 18px; padding: 34px 30px; background: var(--void-2); transition: border-color .4s; }
.section--lifted .guarantee { background: var(--void-3); }
.guarantee:hover { border-color: var(--line-strong); }
.guarantee__no { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(11, 110, 240, .5); color: var(--lumiere); font-family: var(--mono); font-size: .9rem; margin-bottom: 22px; }
.guarantee h3 { font-weight: 600; font-size: 1.3rem; letter-spacing: -.015em; margin-bottom: 10px; }
.guarantee p { color: var(--muted); }
.guarantees__closing { margin-top: 44px; font-size: clamp(1.3rem, 2.6vw, 1.9rem); line-height: 1.35; max-width: 30ch; color: var(--offwhite); }

/* ── S10 · FAQ (Accordion) ──────────────────────────────── */
.faq { margin-top: 48px; max-width: 820px; border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 26px 4px; background: transparent; border: 0; text-align: left; color: var(--offwhite); font-family: var(--sans); font-weight: 500; font-size: clamp(1.02rem, 1.8vw, 1.22rem); letter-spacing: -.01em; }
.faq__trigger:focus-visible { outline: 1px solid var(--lumiere); outline-offset: 4px; border-radius: 4px; }
.faq__icon { flex: none; position: relative; width: 16px; height: 16px; }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; background: var(--aube); transition: transform .35s cubic-bezier(.22,1,.36,1), opacity .35s; }
.faq__icon::before { left: 0; top: 50%; width: 100%; height: 1.5px; transform: translateY(-50%); }
.faq__icon::after { top: 0; left: 50%; width: 1.5px; height: 100%; transform: translateX(-50%); }
.faq__item.is-open .faq__icon::after { transform: translateX(-50%) scaleY(0); opacity: 0; }
.faq__panel { height: 0; overflow: hidden; transition: height .4s cubic-bezier(.22,1,.36,1); }
.faq__answer { padding: 0 4px 28px; color: var(--muted); max-width: 68ch; }
.faq__answer a { color: var(--lumiere); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .3s; }
.faq__answer a:hover { border-color: var(--lumiere); }

/* ── Reveal-Grundzustände für die leichte Hero-Intro ────── */
.js .hero--lite .hero__sub, .js .hero--lite .hero__cta,
.js .hero--lite .hero__trust, .js .hero--lite .eyebrow,
.js .hero--lite .hero__roadmap { opacity: 0; transform: translateY(24px); }
@media (prefers-reduced-motion: reduce) {
  .js .hero--lite .hero__sub, .js .hero--lite .hero__cta,
  .js .hero--lite .hero__trust, .js .hero--lite .eyebrow,
  .js .hero--lite .hero__roadmap { opacity: 1 !important; transform: none !important; }
}

/* ── Light-Mode-Inversion für die hellen Teamkarten ─────── */
html[data-theme="light"] .teammate { background: #0C0D17; color: #F2F1EA; box-shadow: 0 40px 90px -40px rgba(18, 18, 26, .4); }
html[data-theme="light"] .teammate__role { color: rgba(242, 241, 234, .58); }
html[data-theme="light"] .teammate__portrait { background: rgba(11, 110, 240, .16); }
html[data-theme="light"] .teammate__initials { color: #5E9DF5; }
html[data-theme="light"] .roadmap__node { fill: var(--void); }