/* ==================================================================
   ReadyAI — NUR Startseite (index.html und en/index.html).
   Uebernommen aus dem abgenommenen Entwurf
   docs/design-vorschlag-2026-07-19/gesamtseite-ruhig.html.

   Wird von den Rechtsseiten NICHT geladen. Farbwerte, Kopfzeile und
   Fussbereich stehen in styles.css und werden hier vorausgesetzt.

   Inhaltsregeln (verbindlich):
   - Die Beispielfirma im Produktfenster ist erfunden und mehrfach als
     solche gekennzeichnet; Domain auf .example.
   - NIRGENDS wird gezeigt oder beschrieben, WIE gemessen wird.
     Keine Zahl im Produktfenster ist ein Messwert.
   - Fremde Produktlogos werden NICHT nachgebaut (Markenrecht);
     die KI-Systeme erscheinen rein typografisch.
   ================================================================== */

/* ================= Hero ================= */

.hero {
  position: relative;
  width: var(--shell);
  margin: 0 auto;
  padding: clamp(3rem, 7vw, 6.5rem) 0 0;
  text-align: center;
}

.hero::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -6%;
  width: min(1000px, 120%);
  height: 520px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(37, 99, 235, 0.12), transparent 68%);
  pointer-events: none;
  z-index: 0;
}

.hero > * {
  position: relative;
  z-index: 1;
}

.hero-copy {
  min-width: 0;
}

.hero .availability {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 2.4rem;
  padding: 0.38rem 0.9rem 0.38rem 0.7rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-2);
  font-size: 0.78rem;
  font-weight: 600;
}

.hero .availability i {
  flex: 0 0 auto;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 0 4px var(--good-soft);
}

.hero h1 {
  max-width: 15ch;
  margin: 0 auto 2.2rem;
  font-size: clamp(2.9rem, 6.4vw, 5.4rem);
  line-height: 0.96;
  text-wrap: balance;
}

/* Die Spans in der Ueberschrift steuern nur den Zeilenumbruch. */
.hero h1 span {
  display: inline;
}

.hero h1 em {
  position: relative;
  display: inline-block;
  color: var(--accent);
  font-style: normal;
  white-space: nowrap;
}

.hero h1 em::after {
  content: "";
  position: absolute;
  left: 0.02em;
  right: 0.02em;
  bottom: 0.06em;
  height: 0.055em;
  border-radius: 999px;
  background: rgba(77, 130, 243, 0.4);
}

.hero-lede {
  max-width: 62ch;
  margin: 0 auto;
  color: var(--text-2);
  font-size: clamp(1.02rem, 1.35vw, 1.19rem);
  line-height: 1.65;
  text-wrap: pretty;
}

/* Die kurze Fassung erscheint erst auf dem Handy (siehe unten). */
.hero-lede-mobile {
  display: none;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  justify-content: center;
  margin: 3.2rem 0 1.8rem;
}

.fineprint {
  max-width: 52ch;
  margin: 0 auto;
  color: var(--text-3);
  font-size: 0.87rem;
  line-height: 1.6;
}

/* ================= Produktfenster-Buehne ================= */

/* Die Buehne ist BEWUSST breiter als die Textspalte (--shell), damit das
   geneigte Fenster seitlich ueber den Text hinausragt. */
.shot-wrap {
  position: relative;
  width: min(1420px, calc(100% - 24px));
  margin: clamp(4rem, 8vw, 7rem) auto 0;
}

/* Der farbige Umgebungsschein liegt bewusst auf .shot-wrap und NICHT im
   box-shadow des Fensters: .shot-stage schneidet mit overflow:hidden ab,
   ein Schein im Fenster waere unten also weggeschnitten. Hier kann er in
   alle Richtungen ausbluten. */
.shot-wrap::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -14%;
  width: min(1980px, 148%);
  /* Unterkante bewusst GENAU auf der Buehnenkante (-14% + 114% = 100%).
     Alles ab der Kante abwaerts uebernimmt .shot-underglow, das
     stufenlos darueber hinweglaeuft. */
  height: 114%;
  transform: translateX(-50%);
  background:
    radial-gradient(ellipse at 64% 30%, rgba(52, 195, 156, 0.13), transparent 52%),
    radial-gradient(
      ellipse at 50% 52%,
      rgba(37, 99, 235, 0.44),
      rgba(37, 99, 235, 0.17) 40%,
      rgba(37, 99, 235, 0.06) 62%,
      transparent 78%
    );
  filter: blur(44px);
  pointer-events: none;
  z-index: 0;
}

/* Der Austritt des Scheins nach UNTEN.
   Eigenes Element, weil .shot-wrap::after (z-index 2) alles darunter mit
   deckendem --bg zumalt — ein Schein von dort bekaeme an der
   Ausschnittkante eine harte waagrechte Linie. Dieses Element liegt
   DARUEBER (z-index 3) und wirkt mit mix-blend-mode: screen rein
   aufhellend, wie echtes Licht. Dadurch ist der Uebergang stufenlos. */
.shot-underglow {
  position: absolute;
  left: 50%;
  bottom: -110px;
  width: min(1500px, 122%);
  height: 330px;
  transform: translateX(-50%);
  background: radial-gradient(
    ellipse 52% 50% at 50% 44%,
    rgba(37, 99, 235, 0.4),
    rgba(37, 99, 235, 0.13) 46%,
    transparent 74%
  );
  filter: blur(46px);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 3;
}

/* Der Lichtschein blendet beim Erscheinen sanft auf. */
html.js-anim .shot-wrap::before {
  opacity: 0;
  animation: glow-in 1.5s cubic-bezier(0.22, 0.61, 0.36, 1) 0.25s forwards;
}

@keyframes glow-in {
  from {
    opacity: 0;
    transform: translateX(-50%) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
}

/* Der Ausschnitt ist bewusst so hoch, dass die Systemzeilen samt der
   Copilot-Fussnote noch oberhalb des Auslauf-Verlaufs liegen — sonst
   steht im Fenster ein Sternchen ohne lesbare Erklaerung. */
.shot-stage {
  position: relative;
  z-index: 1;
  height: clamp(470px, 52vw, 740px);
  overflow: hidden;
  /* Der Innenabstand ist load-bearing: er schafft den schmalen Rand, in
     den das eine ausbrechende Element (.shot-breakout) ueber die
     Fensterkante hinausragen darf, ohne abgeschnitten zu werden. */
  padding: 20px 40px 0;
  border-radius: 20px 20px 0 0;
  /* Perspektive als EIGENSCHAFT (nicht als transform-Funktion), damit
     auch die Ebenen INNERHALB des Fensters raeumlich wirken koennen. */
  perspective: 1900px;
  perspective-origin: 50% 0%;
}

/* Perspektivische Neigung.
   --tilt laeuft von 1 (gekippt) nach 0 (Ruhe) und wird beim Scrollen per
   JS gesetzt. Ohne JS bleibt der ruhige Ausgangswert stehen.
   BEWUSST FLACH: 10deg beim Start, 3deg in Ruhe. Die raeumliche Wirkung
   kommt aus Licht, Ebenen-Tiefe und Umgebungsschein — nicht aus einem
   starken Winkel. Kein rotateY: auf einem sehr breiten Rechteck liest
   sich eine seitliche Kippung nicht als Tiefe, sondern als SCHIEF. */
.shot-frame {
  --tilt: 1;
  position: relative;
  transform-origin: top center;
  transform-style: preserve-3d;
  transform:
    rotateX(calc(3deg + var(--tilt) * 7deg))
    translateZ(calc(var(--tilt) * 40px))
    scale(calc(0.985 - var(--tilt) * 0.01));
}

/* Ohne JS soll das Fenster nicht dauerhaft schraeg stehen. */
html:not(.js-anim) .shot-frame {
  --tilt: 0.55;
}

/* «Kommt aus dem Bild heraus».
   GENAU EIN Element bricht aus der Fensterkante aus. .rai-window hat
   overflow:hidden, deshalb liegt dieses Etikett bewusst AUSSERHALB des
   Fensters und wird per translateZ nach vorn geholt. Mehr als ein
   ausbrechendes Element wirkt unruhig. */
.shot-breakout {
  position: absolute;
  top: 0.66rem;
  right: -1.55rem;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.42rem 0.85rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: linear-gradient(180deg, #12211d, #0b1714);
  color: var(--text);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translateZ(58px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.1) inset,
    0 0 0 1px rgba(255, 255, 255, 0.05),
    0 6px 16px rgba(0, 0, 0, 0.4),
    0 14px 34px rgba(37, 99, 235, 0.2);
}

.shot-breakout i {
  flex: 0 0 auto;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.shot-wrap::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 36%;
  background: linear-gradient(180deg, transparent, var(--bg) 92%);
  pointer-events: none;
  z-index: 2;
}

.shot-caption {
  position: relative;
  z-index: 3;
  margin: 0.4rem auto 0;
  color: var(--text-3);
  font-size: 0.8rem;
  text-align: center;
}

/* Auf breiten Schirmen traegt das ausbrechende Etikett den Hinweis
   «Vorschau»; das gleichlautende Etikett in der Titelzeile waere dann
   doppelt. Schmal ist es umgekehrt. So steht der Hinweis IMMER genau
   einmal auf dem Fenster. */
@media (min-width: 1081px) {
  .rai-preview-tag {
    display: none;
  }
}

@media (max-width: 1080px) {
  /* Das Fenster wird hier vollstaendig gezeigt: kein Anschnitt, unter
     dem Licht hervorquellen koennte. */
  .shot-stage {
    height: auto;
    overflow: visible;
    border-radius: 20px;
    padding: 0;
  }

  /* Der Auslauf-Verlauf wuerde sonst den unteren Teil des Inhalts
     unleserlich abdunkeln. */
  .shot-wrap::after {
    display: none;
  }

  /* Feste Hoehen statt Prozentwerte: sonst wuerde der Schein auf die
     volle Fensterhoehe aufgeblasen und aus dem Rahmen um das Fenster
     wuerde ein flaechiger Blauschleier ueber den halben Bildschirm. */
  .shot-wrap::before {
    top: -40px;
    height: 620px;
    width: min(1400px, 124%);
    background:
      radial-gradient(ellipse at 64% 26%, rgba(52, 195, 156, 0.12), transparent 56%),
      radial-gradient(
        ellipse at 50% 42%,
        rgba(37, 99, 235, 0.4),
        rgba(37, 99, 235, 0.14) 46%,
        transparent 76%
      );
    filter: blur(40px);
  }

  .shot-underglow {
    bottom: -70px;
    height: 220px;
    width: min(1200px, 112%);
  }

  /* Der Ausschnitt clippt nicht mehr, das Etikett braucht seinen
     Ausbruch nicht — es wuerde nur seitlich anecken. */
  .shot-breakout {
    display: none;
  }
}

/* ========== Vertrauenszeile: die KI-Systeme (rein typografisch) ========== */

.engine-strip {
  width: var(--shell);
  /* Abstand nach oben bewusst gross: der Schein unter dem Fenster
     braucht Platz zum Ausklingen, sonst laeuft er in die Trennlinie. */
  margin: clamp(4.5rem, 8vw, 7.5rem) auto 0;
  padding: clamp(2rem, 3.5vw, 2.9rem) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
}

.engine-strip .strip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.9rem clamp(1.2rem, 3vw, 2.6rem);
}

.engine-strip .strip-label {
  margin: 0;
  color: var(--text-3);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.engine-strip .strip-names {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.7rem clamp(1rem, 2.4vw, 2rem);
}

/* NUR die direkten Kinder sind Namens-Eintraege. Der Kindsatz-Selektor
   ist load-bearing: der Copilot-Eintrag hat ein inneres span, das sonst
   einen zweiten Punkt bekaeme und die Ziffer erneut zu einem eigenen
   Flex-Kind machen wuerde. */
.engine-strip .strip-names > span {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--text);
  font-size: clamp(0.95rem, 1.5vw, 1.15rem);
  font-weight: 650;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.engine-strip .strip-names > span::before {
  content: "";
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.75;
}

/* Copilot steht optisch GLEICHWERTIG neben den vier gemessenen Systemen.
   Die Abgrenzung traegt AUSSCHLIESSLICH die hochgestellte 1 plus die
   Fussnote am Seitenende. Deshalb ist die 1 bewusst etwas kraeftiger
   gesetzt als eine uebliche Fussnoten-Ziffer: sie ist das einzige
   verbleibende Signal und darf nicht untergehen. */
.engine-strip .strip-names .strip-aside sup {
  margin-left: 0.05em;
  color: var(--accent);
  font-size: 0.52em;
  font-weight: 700;
  vertical-align: super;
  line-height: 0;
}

/* ================= Vertrauensleiste (3 Fakten) ================= */

/* EIN Fakt pro Zeile ueber die volle Breite, als ruhige Liste mit
   Hairlines. Drei nebeneinander stehende Spalten brachen wegen
   unterschiedlicher Textlaengen zufaellig um. Untereinander steht jede
   Aussage sicher auf EINER Zeile, und Etikett + Aussage bekommen eine
   gemeinsame senkrechte Leseachse. */
.trust {
  width: var(--shell);
  margin: 0 auto;
  padding: clamp(2.8rem, 5vw, 4.2rem) 0 0;
  display: grid;
  gap: 0;
}

.trust > div {
  display: grid;
  grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
  align-items: baseline;
  gap: 0.3rem clamp(1.5rem, 4vw, 3rem);
  padding: clamp(1rem, 1.8vw, 1.35rem) 0;
  border-top: 1px solid var(--line);
  min-width: 0;
}

.trust > div:last-child {
  border-bottom: 1px solid var(--line);
}

.trust dt {
  margin: 0;
  color: var(--text-3);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.trust dd {
  margin: 0;
  max-width: 68ch;
  color: var(--text-2);
  font-size: 1rem;
  line-height: 1.55;
  text-wrap: pretty;
}

.trust dd b {
  color: var(--text);
  font-weight: 650;
}

/* ================= Allgemeine Abschnitte ================= */

.section {
  width: var(--shell);
  margin: 0 auto;
  padding: clamp(4.5rem, 9vw, 8.5rem) 0;
  border-top: 1px solid var(--line);
}

.section:first-of-type {
  border-top: 0;
}

/* KORREKTUR 19.07.: stand auf max-width 30ch. Die Einheit ch bezieht sich auf
   die Schriftgroesse DIESES Elements (16px), nicht auf die der Ueberschrift
   (bis 46px) — daraus wurden real nur ~302px, obwohl 915px Platz vorhanden
   waren. Ergebnis: Titel wie «Messen. Verbessern. Wieder pruefen.» brachen
   auf drei Zeilen, teils ein Wort pro Zeile.
   Jetzt in rem, konsistent mit .is-wide darunter. 40rem laesst den langen
   Titeln ein bis zwei ruhige Zeilen und behaelt trotzdem Rand zum Inhalt. */
.section-heading {
  max-width: 48rem;
  margin-bottom: clamp(2.6rem, 5vw, 4rem);
}

/* Fuer lange Ueberschriften, die sonst zu einer schmalen Saeule brechen.
   Bewusst in rem und NICHT in ch: ch bezieht sich auf die Schriftgroesse
   DIESES Kastens (1rem), nicht auf die viel groessere Ueberschrift darin
   — 46ch waeren nur rund 410px und die lange Ueberschrift braeche in
   vier kurze Zeilen um. */
.section-heading.is-wide {
  /* Seit der Standard auf 48rem steht, ist diese Klasse gegenstandslos.
     Bleibt als No-Op, damit vorhandenes Markup nicht bricht. */
  max-width: 48rem;
}

.section-heading > span {
  display: block;
  margin-bottom: 0.85rem;
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.section-heading h2 {
  margin: 0;
  font-size: clamp(1.85rem, 3.6vw, 2.9rem);
  line-height: 1.08;
  text-wrap: balance;
}

.section-heading p {
  margin: 1.2rem 0 0;
  max-width: 62ch;
  color: var(--text-2);
  font-size: 1.02rem;
  line-height: 1.65;
}

/* Zwei-Spalten-Block: GENAU ZWEI Kinder (Text-Spalte + Punkte-Spalte).
   Mehr Kinder wuerden sich abwechselnd auf die Spalten verteilen und die
   klebende Ueberschrift wuerde ueber den Inhalt laufen. */
.split {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(2.5rem, 6vw, 6.5rem);
  align-items: start;
}

.split > .split-copy {
  position: sticky;
  top: 2rem;
}

.split > .split-copy .section-heading {
  margin-bottom: 1.8rem;
}

.split > .split-copy .primary-button {
  margin-top: 2rem;
}

/* Punkte-Listen */
.point-list {
  display: grid;
  gap: 1px;
  background: var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.point-list article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 1.1rem;
  padding: 1.85rem 1.7rem;
  background: var(--surface);
}

.point-list .dot {
  margin-top: 0.5rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.point-list h3 {
  margin: 0 0 0.4rem;
  font-size: 1.02rem;
}

/* Zeilenlaenge bleibt lesbar, auch wenn der Rahmen breiter wird. */
.point-list p {
  margin: 0;
  max-width: 66ch;
  color: var(--text-2);
  font-size: 0.94rem;
  line-height: 1.65;
}

/* Karten-Raster */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.card-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.5rem 1.4rem 1.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.card .dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
  margin-bottom: 0.6rem;
}

.card h3 {
  margin: 0;
  font-size: 1.02rem;
}

.card p {
  margin: 0;
  color: var(--text-2);
  font-size: 0.94rem;
  line-height: 1.65;
}

/* ================= «Kunden suchen anders» ================= */

.statement {
  max-width: 68ch;
}

.statement p {
  margin: 0 0 1.2rem;
  color: var(--text-2);
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  line-height: 1.65;
  text-wrap: pretty;
}

.statement .statement-note {
  margin: 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  color: var(--text-3);
  font-size: 0.95rem;
}

/* ================= Ablauf mit Fortschrittslinie ================= */

.flow {
  position: relative;
  list-style: none;
  margin: 0 0 clamp(2.6rem, 5vw, 4rem);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.6rem;
}

/* Durchgehende Linie hinter den vier Markierungen */
.flow::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0.53rem;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--line-strong) 8%,
    var(--line-strong) 92%,
    transparent
  );
  z-index: 0;
}

/* Der gefuellte Teil des Strahls. Breite kommt aus --flow-fill (0 bis 1)
   und wird per JS gesetzt: beim Hineinscrollen aufbauend, beim Zeigen
   auf einen Schritt bis genau dorthin. */
.flow::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0.53rem;
  height: 1px;
  width: calc(var(--flow-fill, 0) * 100%);
  max-width: 100%;
  background: linear-gradient(90deg, transparent, var(--accent) 8%, var(--accent));
  box-shadow: 0 0 8px rgba(77, 130, 243, 0.55);
  transition: width 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
  z-index: 0;
}

.flow-step {
  position: relative;
  z-index: 1;
  min-width: 0;
  cursor: default;
  transition: transform 0.3s ease;
}

/* Nur wenn JS laeuft, werden noch nicht erreichte Markierungen gedimmt —
   ohne JS bleiben alle vier normal sichtbar. */
html.js-anim .flow-step .mark {
  border-color: var(--line-strong);
  box-shadow: 0 0 0 5px var(--bg), 0 0 0 9px rgba(255, 255, 255, 0.045);
  transition: border-color 0.35s ease, box-shadow 0.35s ease;
}

html.js-anim .flow-step .mark::after {
  background: var(--line-strong);
  transition: background 0.35s ease;
}

html.js-anim .flow-step.is-reached .mark {
  border-color: var(--accent);
  box-shadow: 0 0 0 5px var(--bg), 0 0 0 9px var(--accent-soft);
}

html.js-anim .flow-step.is-reached .mark::after {
  background: var(--accent);
}

html.js-anim .flow-step.is-active .mark {
  box-shadow: 0 0 0 5px var(--bg), 0 0 0 11px var(--accent-soft);
}

html.js-anim .flow-step.is-active {
  transform: translateY(-3px);
}

html.js-anim .flow-step h3,
html.js-anim .flow-step .step-no {
  transition: color 0.3s ease;
}

html.js-anim .flow-step.is-active .step-no {
  color: var(--accent);
}

.flow-step .mark {
  position: relative;
  width: 1.1rem;
  height: 1.1rem;
  margin-bottom: 1.1rem;
  border: 1px solid var(--accent);
  border-radius: 50%;
  background: var(--bg);
  box-shadow: 0 0 0 5px var(--bg), 0 0 0 9px var(--accent-soft);
}

.flow-step .mark::after {
  content: "";
  position: absolute;
  inset: 0.24rem;
  border-radius: 50%;
  background: var(--accent);
}

/* Sehr dezenter Puls: ein duenner Ring laeuft aus der Markierung nach
   aussen und verblasst. Nur bei erreichten Schritten und nur mit JS;
   leicht versetzt, damit die vier nacheinander atmen statt im
   Gleichschritt zu blinken. */
.flow-step .mark::before {
  content: "";
  position: absolute;
  inset: -0.15rem;
  border-radius: 50%;
  border: 1px solid var(--accent);
  opacity: 0;
  pointer-events: none;
}

html.js-anim .flow-step.is-reached .mark::before {
  animation: mark-pulse 3.4s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
  animation-delay: calc(var(--step, 0) * 0.42s);
}

@keyframes mark-pulse {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }
  55% {
    transform: scale(2.1);
    opacity: 0;
  }
  100% {
    transform: scale(2.1);
    opacity: 0;
  }
}

.flow-step .step-no {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--text-3);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.flow-step h3 {
  margin: 0 0 0.45rem;
  font-size: 1.02rem;
}

.flow-step p {
  margin: 0;
  color: var(--text-2);
  font-size: 0.93rem;
  line-height: 1.65;
}

/* ================= Preis ================= */

.price-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 1.2rem 2.4rem;
  padding: clamp(1.6rem, 3vw, 2.2rem);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(37, 99, 235, 0.09), rgba(255, 255, 255, 0.02));
  color: inherit;
  cursor: pointer;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.price-card:hover,
.price-card:focus-visible {
  border-color: rgba(255, 255, 255, 0.28);
  transform: translateY(-3px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
}

.price-amount {
  font-size: clamp(2.1rem, 4vw, 2.9rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  white-space: nowrap;
  transition: color 0.3s ease;
}

.price-card:hover .price-amount {
  color: var(--accent);
}

.price-card p {
  margin: 0;
  max-width: 70ch;
  color: var(--text-2);
  font-size: 0.96rem;
  line-height: 1.65;
}

.price-card .price-note {
  margin-top: 0.6rem;
  color: var(--accent);
  font-size: 0.9rem;
  font-weight: 650;
}

/* ================= FAQ ================= */

/* Die FAQ-Karten laufen auf DERSELBEN Kante wie die Preis-Kachel
   darueber (beide = volle Breite des Abschnitts). Der Fliesstext darin
   bleibt trotzdem lesbar kurz — siehe .faq-answer. */
.faq-list {
  display: grid;
  gap: 0.7rem;
}

.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

.faq-item[open] {
  border-color: var(--line-strong);
  background: var(--surface-2);
}

.faq-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 1.15rem 1.35rem;
  cursor: pointer;
  list-style: none;
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: -0.015em;
}

.faq-item > summary::-webkit-details-marker {
  display: none;
}

.faq-item > summary::after {
  content: "";
  flex: 0 0 auto;
  width: 0.62rem;
  height: 0.62rem;
  border-right: 1.5px solid var(--text-3);
  border-bottom: 1.5px solid var(--text-3);
  transform: rotate(45deg) translate(-0.1rem, -0.1rem);
  transition: transform 0.15s ease;
}

.faq-item[open] > summary::after {
  transform: rotate(-135deg) translate(-0.15rem, -0.15rem);
}

.faq-item > summary:hover {
  color: #fff;
}

.faq-answer {
  margin: 0;
  padding: 0 1.35rem 1.35rem;
  color: var(--text-2);
  font-size: 0.95rem;
  line-height: 1.7;
  /* Kasten darf breit sein, der Text nicht — Zeilenlaenge gedeckelt. */
  max-width: 68ch;
}

/* ================= Abschluss / Zugang anfragen ================= */

.closing {
  position: relative;
  width: var(--shell);
  margin: 0 auto clamp(3rem, 7vw, 5rem);
  padding: clamp(2.2rem, 5vw, 3.6rem);
  border: 1px solid var(--line-strong);
  border-radius: 24px;
  background:
    radial-gradient(900px 420px at 20% -30%, rgba(37, 99, 235, 0.16), transparent 70%),
    var(--surface);
}

/* GENAU ZWEI Kinder in diesem Raster. */
.closing-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

.closing-copy > span {
  display: block;
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.closing-copy h2 {
  margin: 0.85rem 0 0;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1.1;
  text-wrap: balance;
}

.closing-copy p {
  margin: 1.1rem 0 0;
  color: var(--text-2);
  font-size: 1rem;
  line-height: 1.7;
}

.waitlist-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.waitlist-form label {
  display: grid;
  gap: 0.45rem;
  min-width: 0;
}

.waitlist-form label > span {
  color: var(--text-3);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.waitlist-form input {
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  background: var(--input-bg);
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
}

.waitlist-form input::placeholder {
  color: var(--text-3);
}

.waitlist-form input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Autofill: Chrome/Safari uebermalen ausgefuellte Felder mit einem eigenen
   Hintergrund (im dunklen Design ein kraeftiges Blau) und ignorieren dabei
   background-color. Der deckende inset-Schatten ist der einzige Weg, das zu
   uebersteuern; die lange transition verhindert das kurze Aufblitzen.

   ⚠️ Das `-webkit-box-shadow` ist NICHT redundant: Chrome uebersteuert den
   Autofill-Hintergrund NUR ueber die praefixierte Eigenschaft. Mit allein
   `box-shadow` bleibt das Feld blau (nachgewiesen 19.07. auf der Live-Seite).
   Beide Zeilen muessen stehen bleiben. */
.waitlist-form input:-webkit-autofill,
.waitlist-form input:-webkit-autofill:hover,
.waitlist-form input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  caret-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px var(--input-bg) inset;
  box-shadow: 0 0 0 1000px var(--input-bg) inset;
  transition: background-color 100000s ease-in-out 0s;
}

/* Der Fokus-Ring muss trotzdem sichtbar bleiben — der Schatten oben hat ihn
   sonst ueberschrieben. */
.waitlist-form input:-webkit-autofill:focus {
  -webkit-box-shadow:
    0 0 0 1000px var(--input-bg) inset,
    0 0 0 3px var(--accent-soft);
  box-shadow:
    0 0 0 1000px var(--input-bg) inset,
    0 0 0 3px var(--accent-soft);
}

/* Firefox nutzt eine eigene Regel und respektiert dort background-image. */
.waitlist-form input:autofill {
  background-image: none;
  background-color: var(--input-bg);
  color: var(--text);
}

.waitlist-form .website-field {
  grid-column: 1 / -1;
}

.waitlist-form small {
  color: var(--text-3);
  font-size: 0.8rem;
  line-height: 1.45;
}

.waitlist-form button {
  grid-column: 1 / -1;
  min-height: 3.2rem;
  border: 0;
  border-radius: 999px;
  background: var(--accent-deep);
  color: #fff;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 12px 34px rgba(37, 99, 235, 0.3);
}

.waitlist-form button:hover {
  background: #1d4ed8;
}

.waitlist-form button:disabled {
  opacity: 0.6;
  cursor: default;
}

.form-note {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--text-3);
  font-size: 0.84rem;
  line-height: 1.6;
}

/* Rueckmeldung nach dem Absenden. Bewusst eine EIGENE Flaeche und nicht der
   Datenschutz-Hinweis: der Hinweis muss stehen bleiben, und die Rueckmeldung
   darf nicht wie Kleingedrucktes aussehen. Leer = unsichtbar (:empty). */
.form-status {
  grid-column: 1 / -1;
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  margin: 0;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 0.95rem;
  line-height: 1.55;
}

.form-status:empty {
  display: none;
}

/* Das Zeichen davor kommt aus dem Stylesheet, damit die Meldung im Skript
   reiner Text bleibt (kein HTML aus Variablen). */
.form-status::before {
  content: "…";
  flex: none;
  font-weight: 700;
}

.form-status.is-success {
  border-color: rgba(52, 195, 156, 0.4);
  background: var(--good-soft);
  color: var(--text);
  font-weight: 600;
}

.form-status.is-success::before {
  content: "✓";
  color: var(--good);
}

.form-status.is-error {
  border-color: rgba(224, 133, 133, 0.4);
  background: var(--miss-soft);
  color: var(--text);
}

.form-status.is-error::before {
  content: "!";
  color: var(--miss);
}

/* ================= Breiten ================= */

@media (max-width: 1080px) {
  .card-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem 1.6rem;
  }

  /* Bei zwei Reihen passt keine durchgehende waagrechte Linie mehr. */
  .flow::before,
  .flow::after {
    display: none;
  }
}

@media (max-width: 980px) {
  .split {
    grid-template-columns: 1fr;
  }

  /* Klebende Ueberschrift auf schmalen Breiten abschalten — sie wuerde
     sonst ueber den Inhalt laufen. */
  .split > .split-copy {
    position: static;
  }

  .closing-grid {
    grid-template-columns: 1fr;
  }

  .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .card-grid > .card:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  .shot-frame {
    transform: none;
  }

  /* Schmal reicht die Breite fuer die zweispaltige Leseachse nicht mehr
     — das Etikett rutscht sonst ueber die Aussage. */
  .trust > div {
    grid-template-columns: 1fr;
    gap: 0.45rem;
  }
}

@media (max-width: 720px) {
  .card-grid,
  .card-grid-4 {
    grid-template-columns: 1fr;
  }

  .card-grid > .card:last-child {
    grid-column: auto;
  }

  /* Einspaltig wird aus der waagrechten Fortschrittslinie eine
     senkrechte, die die vier Schritte verbindet. */
  .flow {
    grid-template-columns: 1fr;
    gap: 1.7rem;
  }

  /* Der Text bekommt eine eigene Spalte rechts der Markierung. Ohne
     diese Einrueckung stuende die senkrechte Verbindungslinie mitten im
     Absatz — sie liegt zwar dahinter (z-index -1) und bleibt lesbar,
     laeuft aber sichtbar quer durch den Text. */
  .flow-step {
    padding-left: 2.2rem;
  }

  .flow-step .mark {
    position: absolute;
    left: 0;
    top: 0;
    margin-bottom: 0;
  }

  .flow-step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 0.53rem;
    top: 1.3rem;
    bottom: -1.7rem;
    width: 1px;
    background: var(--line-strong);
    transition: background 0.4s ease;
    z-index: -1;
  }

  html.js-anim .flow-step.is-reached:not(:last-child)::before {
    background: var(--accent);
  }

  .price-card {
    grid-template-columns: 1fr;
  }

  .waitlist-form {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .hero,
  .engine-strip,
  .trust,
  .section,
  .closing {
    width: calc(100% - 28px);
  }

  .hero h1 {
    font-size: clamp(2.35rem, 10vw, 3rem);
  }

  /* Auf dem Handy traegt die kurze Fassung den Einstieg. */
  .hero-lede-desktop {
    display: none;
  }

  .hero-lede-mobile {
    display: block;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .primary-button,
  .secondary-link {
    width: 100%;
  }

  .section-heading {
    max-width: none;
  }
}

/* ==================================================================
   Ausgewaehlte Zusatz-Effekte (bewusst nur drei)
   ================================================================== */

/* 1) Abschnitte blenden beim Hereinscrollen ein und steigen leicht auf. */
html.js-anim .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

html.js-anim .reveal.is-in {
  opacity: 1;
  transform: none;
}

/* 2) Die KI-System-Namen erscheinen leicht versetzt nacheinander. */
html.js-anim .engine-strip .strip-names > span {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.55s ease, transform 0.55s ease;
  transition-delay: calc(var(--i, 0) * 110ms);
}

html.js-anim .engine-strip.is-in .strip-names > span {
  opacity: 1;
  transform: none;
}

/* 3) Preis-Kachel: dezenter Hover (siehe .price-card oben). */

/* ==================================================================
   Bewegung abschalten — verbindlicher Projektstandard.
   Die globale Regel steht in styles.css; hier kommen die
   startseiten-eigenen Effekte dazu.
   ================================================================== */
@media (prefers-reduced-motion: reduce) {
  /* --tilt:0 heisst NICHT «flach»: es ist der Ruhewert der Neigung
     (rotateX 3deg). Das Fenster steht also auch bei abgeschalteter
     Bewegung raeumlich da — es bewegt sich nur nicht. */
  .shot-frame {
    --tilt: 0 !important;
  }

  html.js-anim .shot-wrap::before {
    opacity: 1;
    animation: none;
  }

  .flow::after {
    width: 100%;
    box-shadow: none;
  }

  html.js-anim .flow-step.is-reached .mark::before {
    animation: none;
    opacity: 0;
  }

  html.js-anim .flow-step .mark {
    border-color: var(--accent);
  }

  html.js-anim .flow-step .mark::after {
    background: var(--accent);
  }

  html.js-anim .flow-step.is-active {
    transform: none;
  }

  html.js-anim .reveal {
    opacity: 1;
    transform: none;
  }

  html.js-anim .engine-strip .strip-names > span {
    opacity: 1;
    transform: none;
  }

  .price-card:hover {
    transform: none;
  }
}

/* ==================================================================
   Produktfenster (aus dem Dashboard-Entwurf uebernommen)
   ================================================================== */

/* «Schwebt» statt «liegt». Grosse schwarze Schattenlagen sind bewusst
   NICHT vorhanden: auf dem fast schwarzen Seitengrund (#06110f)
   erzeugten sie keine Tiefe, sondern einen dunklen Fleck, der beim
   Scrollen als Schliere mitwanderte. Getragen wird die Abloesung von:
   hellem Saum + Lichtkante + farbigem Umgebungsschein. Vom Schwarz
   bleibt nur der kurze Kontaktschatten. */
.rai-window {
  position: relative;
  border: 1px solid var(--line-strong);
  border-top-color: rgba(255, 255, 255, 0.26);
  border-radius: 20px;
  background:
    linear-gradient(
      176deg,
      rgba(255, 255, 255, 0.035),
      rgba(255, 255, 255, 0.012) 46%,
      rgba(0, 0, 0, 0.06) 100%
    ),
    var(--surface);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.14) inset,
    0 0 0 1px rgba(255, 255, 255, 0.045),
    0 2px 6px rgba(0, 0, 0, 0.28),
    0 12px 24px rgba(0, 0, 0, 0.22);
  overflow: hidden;
}

/* Lichtreflex: sehr dezenter heller Verlauf ueber die obere Kante. */
.rai-window::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 180px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.055),
    rgba(255, 255, 255, 0.018) 38%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 4;
}

.rai-titlebar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.8rem 1.1rem;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent);
}

.rai-dots {
  display: inline-flex;
  gap: 0.42rem;
  flex: 0 0 auto;
}

.rai-dots i {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
}

.rai-address {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  min-width: 0;
}

.rai-address span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-3);
  font-size: 0.78rem;
  white-space: nowrap;
}

.rai-address i {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--good);
  flex: 0 0 auto;
}

.rai-preview-tag {
  flex: 0 0 auto;
  padding: 0.28rem 0.68rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--text-2);
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  white-space: nowrap;
}

.rai-body {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
}

.rai-side {
  border-right: 1px solid var(--line);
  padding: 1.25rem 1rem 1.6rem;
  background: rgba(0, 0, 0, 0.16);
}

.rai-brand {
  display: block;
  padding: 0 0.35rem 1.35rem;
}

.rai-brand img {
  display: block;
  width: 100%;
  max-width: 11rem;
  height: auto;
}

.rai-navgroup {
  margin: 0 0 0.55rem;
  padding: 0 0.55rem;
  color: var(--text-3);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.rai-nav {
  display: grid;
  gap: 0.12rem;
  margin-bottom: 1.5rem;
}

.rai-nav a {
  display: flex;
  align-items: center;
  gap: 0.62rem;
  padding: 0.55rem;
  border-radius: 10px;
  color: var(--text-2);
  font-size: 0.875rem;
  font-weight: 600;
}

.rai-nav a .ic {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.4;
  flex: 0 0 auto;
}

.rai-nav a.is-active {
  background: rgba(255, 255, 255, 0.055);
  color: var(--text);
}

.rai-nav a.is-active .ic {
  background: var(--accent);
  opacity: 1;
}

.rai-side-foot {
  margin: 0 0.35rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  color: var(--text-3);
  font-size: 0.74rem;
  line-height: 1.5;
}

.rai-main {
  padding: 1.8rem 2.1rem 2.1rem;
  min-width: 0;
  /* Ebenen-Tiefe. Die Karten stehen minimal vor der Fensterflaeche.
     Bewusst klein (6-12px): sichtbar als Tiefe, nicht als Verzerrung.
     Eigene Perspektive, weil .rai-window wegen overflow:hidden die
     3D-Kette flachlegt. */
  perspective: 1400px;
  transform-style: preserve-3d;
}

/* Sanft abgestufte Hoehe: Kennzahlen-Karten vorn, Fortschritt dahinter. */
.rai-main .rai-engines {
  transform: translateZ(6px);
}

.rai-main .rai-cards .rai-card {
  transform: translateZ(12px);
}

.rai-main .rai-progress .rai-panel {
  transform: translateZ(8px);
}

/* Die Tiefe wird von passenden Eigenschatten getragen — ohne sie bliebe
   der Versatz bei diesen kleinen Werten unsichtbar. */
.rai-main .rai-engines,
.rai-main .rai-card,
.rai-main .rai-panel {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.045) inset,
    0 10px 26px rgba(0, 0, 0, 0.34);
}

.rai-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.2rem 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.rai-eyebrow {
  margin: 0 0 0.55rem;
  color: var(--accent);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.rai-firm {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin: 0 0 0.5rem;
  font-size: 1.85rem;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.rai-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.24rem 0.6rem;
  border: 1px solid var(--warn);
  border-radius: 999px;
  background: var(--warn-soft);
  color: var(--warn);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.rai-meta {
  margin: 0;
  color: var(--text-3);
  font-size: 0.86rem;
}

.rai-meta b {
  color: var(--text-2);
  font-weight: 600;
}

.rai-head-actions {
  display: inline-flex;
  gap: 0.6rem;
}

.rai-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.6rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--text-2);
  font-size: 0.82rem;
  font-weight: 650;
  white-space: nowrap;
}

.rai-btn.is-primary {
  border-color: transparent;
  background: var(--accent-deep);
  color: #fff;
}

.rai-section {
  padding-top: 1.7rem;
  text-align: left;
}

.rai-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.rai-section-head h3 {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.rai-section-head > span {
  color: var(--text-3);
  font-size: 0.78rem;
}

.rai-engines {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  overflow: hidden;
}

.rai-engine {
  display: grid;
  grid-template-columns: 12.5rem minmax(0, 1fr) 10.5rem;
  align-items: center;
  gap: 1.4rem;
  padding: 1rem 1.15rem;
}

.rai-engine + .rai-engine {
  border-top: 1px solid var(--line);
}

.rai-engine-name {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.9rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  min-width: 0;
}

.rai-engine-name i {
  width: 1.55rem;
  height: 1.55rem;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-2);
  font-size: 0.68rem;
  font-weight: 800;
  font-style: normal;
}

.rai-rail {
  position: relative;
  height: 0.42rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}

.rai-rail b {
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  border-radius: 999px;
  background: currentColor;
}

.rai-state {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.72rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  white-space: nowrap;
}

.rai-state i {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: currentColor;
}

.is-good {
  color: var(--good);
}

.is-warn {
  color: var(--warn);
}

.is-miss {
  color: var(--miss);
}

/* Copilot: bewusst KEIN Balken, KEIN Status-Etikett.
   Muss auf den ersten Blick als «nicht gemessen» lesbar sein. */
.rai-engine-aside {
  grid-template-columns: 12.5rem minmax(0, 1fr);
  align-items: center;
  background: rgba(0, 0, 0, 0.16);
}

.rai-engine-aside .rai-engine-name {
  color: var(--text-2);
  font-weight: 600;
}

.rai-engine-aside .rai-engine-name i {
  opacity: 0.6;
}

/* Das Sternchen verweist auf die Fussnote im Fuss des Fensters. */
.rai-engine-aside .rai-engine-name b,
.rai-engines-foot b {
  color: var(--text-2);
  font-weight: 700;
}

.rai-engines-foot {
  padding: 0.85rem 1.15rem;
  border-top: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.18);
  color: var(--text-3);
  font-size: 0.78rem;
  line-height: 1.5;
}

.rai-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
}

.rai-card {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 1.15rem 1.15rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.rai-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}

.rai-card-top h4 {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.rai-chip {
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: currentColor;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.rai-chip span {
  color: var(--surface);
}

.rai-card p {
  margin: 0;
  color: var(--text-2);
  font-size: 0.855rem;
  line-height: 1.6;
}

.rai-quote {
  margin: 0;
  padding: 0.75rem 0.85rem;
  border-left: 2px solid var(--line-strong);
  border-radius: 0 8px 8px 0;
  background: rgba(255, 255, 255, 0.028);
  color: var(--text-2);
  font-size: 0.83rem;
  line-height: 1.55;
}

.rai-quote em {
  color: var(--text);
  font-style: normal;
}

.rai-card-foot {
  margin-top: auto;
  padding-top: 0.65rem;
  border-top: 1px solid var(--line);
  color: var(--text-3);
  font-size: 0.75rem;
}

.rai-progress {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 0.9rem;
}

.rai-panel {
  padding: 1.2rem 1.25rem 1.3rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.rai-panel > h4 {
  margin: 0 0 1.05rem;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.rai-steps {
  display: grid;
  gap: 0;
}

.rai-step {
  display: grid;
  grid-template-columns: 1.05rem minmax(0, 1fr);
  gap: 0 0.85rem;
  padding-bottom: 1.05rem;
}

.rai-step:last-child {
  padding-bottom: 0;
}

.rai-step .mark {
  position: relative;
  width: 1.05rem;
  height: 1.05rem;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface-2);
}

.rai-step:not(:last-child) .mark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 1.25rem;
  width: 1px;
  height: calc(100% + 0.55rem);
  background: var(--line-strong);
  transform: translateX(-50%);
}

.rai-step.is-done .mark {
  border-color: var(--good);
  background: var(--good);
}

.rai-step.is-now .mark {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.rai-step strong {
  display: block;
  font-size: 0.855rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.rai-step span {
  display: block;
  margin-top: 0.15rem;
  color: var(--text-3);
  font-size: 0.79rem;
  line-height: 1.5;
}

.rai-todo {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.rai-todo li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
  padding: 0.72rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.022);
  font-size: 0.845rem;
  line-height: 1.4;
}

.rai-todo .box {
  width: 0.95rem;
  height: 0.95rem;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
}

.rai-todo li.is-done .box {
  border-color: var(--good);
  background: var(--good-soft);
}

.rai-todo li.is-done span:first-of-type {
  color: var(--text-3);
}

.rai-todo .tag {
  color: var(--text-3);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.rai-todo li.is-done .tag {
  color: var(--good);
}

.rai-panel-note {
  margin: 1.05rem 0 0;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
  color: var(--text-3);
  font-size: 0.78rem;
  line-height: 1.55;
}

/* ---- Produktfenster auf schmaleren Breiten ----
   Ohne diese Regeln behaelt das Fenster seine Schreibtisch-Aufteilung
   (232px-Seitenspalte, drei Karten nebeneinander) und laeuft auf dem
   Handy seitlich aus dem Bild. */

@media (max-width: 1120px) {
  .rai-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rai-cards .rai-card:last-child {
    grid-column: 1 / -1;
  }

  .rai-progress {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  .rai-body {
    grid-template-columns: 1fr;
  }

  .rai-side {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.9rem 1.1rem;
  }

  .rai-brand {
    padding: 0;
  }

  .rai-brand img {
    max-width: 9.5rem;
  }

  .rai-navgroup,
  .rai-side-foot {
    display: none;
  }

  .rai-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
    margin: 0;
  }

  .rai-main {
    padding: 1.4rem 1.2rem 1.6rem;
  }

  .rai-engine {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.55rem 1rem;
  }

  .rai-rail {
    grid-column: 1 / -1;
    order: 3;
  }

  .rai-engine-aside {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }
}

@media (max-width: 720px) {
  .rai-cards {
    grid-template-columns: 1fr;
  }

  .rai-cards .rai-card:last-child {
    grid-column: auto;
  }

  .rai-head-actions {
    width: 100%;
  }

  .rai-firm {
    font-size: 1.45rem;
  }

  .rai-preview-tag {
    display: none;
  }

  .rai-todo li {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .rai-todo .tag {
    grid-column: 2;
  }
}

/* ---- Auf dem Handy ein VERGROESSERTER AUSSCHNITT statt des ganzen
   Fensters. Vollstaendig gezeigt muesste das Dashboard auf 390px
   zusammengestaucht werden — die Schrift darin wird dann winzig und das
   Detail geht verloren. Deshalb bleibt hier nur der Kern «wer findet
   Sie» stehen, dafuer gross und lesbar. Die Copilot-Zeile samt Fussnote
   liegt in genau diesem Teil. ---- */
.rai-excerpt-hint {
  display: none;
}

@media (max-width: 640px) {
  .rai-side,
  .rai-head-actions {
    display: none;
  }

  /* Befunde- und Fortschritt-Abschnitt gehoeren nicht in den Ausschnitt. */
  .rai-main > .rai-section:nth-of-type(n + 2) {
    display: none;
  }

  .rai-main {
    padding: 1.3rem 1.1rem 1.5rem;
  }

  .rai-head {
    padding-bottom: 1.2rem;
  }

  .rai-eyebrow {
    font-size: 0.78rem;
  }

  .rai-firm {
    font-size: 1.6rem;
  }

  .rai-meta {
    font-size: 0.95rem;
  }

  .rai-section-head h3 {
    font-size: 1.15rem;
  }

  .rai-section-head > span {
    font-size: 0.9rem;
  }

  .rai-engine {
    padding: 1rem;
    gap: 0.6rem 1rem;
  }

  .rai-engine-name {
    font-size: 1.02rem;
  }

  .rai-engine-name i {
    width: 1.75rem;
    height: 1.75rem;
    font-size: 0.78rem;
  }

  .rai-state {
    font-size: 0.88rem;
    padding: 0.34rem 0.8rem;
  }

  .rai-rail {
    height: 0.5rem;
  }

  .rai-engines-foot {
    font-size: 0.88rem;
    padding: 0.95rem 1rem;
  }

  .rai-excerpt-hint {
    display: block;
    margin: 1.1rem 0 0;
    padding-top: 0.9rem;
    border-top: 1px solid var(--line);
    color: var(--text-3);
    font-size: 0.85rem;
    line-height: 1.55;
  }
}