/* =====================================================================
   P3 · LEISTUNGEN: IN DEN LAPTOP HINEIN (css/laptop.css)

   Eine klebende Buehne ueber die volle Hoehe (kein Pin, kein fixed), darin
   ein MacBook als Bildfolge aus Blender (bench/blender/render-seq.py,
   Modell CC BY 4.0 jackbaeten). Beim Scrollen klappt er auf, die Kamera
   faehrt an das Display heran (Laptop bleibt am Rand sichtbar), und im
   Display oeffnen sich nacheinander vier Browser-Tabs: die quadrum-
   Website, Visual Studio Code, Google, Support-Chat. Am Ende faehrt die
   Kamera heraus und der Deckel schliesst. Den Scrollweg gibt
   .laptop__track vor.

   GEOMETRIE
   .laptop__zoom ist der Kasten (Breite W, setzt js/laptop.js), der per
   translate/scale herangefahren wird (Ursprung oben Mitte). Darin
   .laptop__scene, ein Kasten W x 0,92 W, auf den die Renders passen: die
   Kamera der Renders ist die fruehere CSS-Kamera (perspective 3000 px auf
   W, Ursprung 50 % / 42 %, Geraet um 30 Grad gekippt), Pixel auf Pixel
   gemessen (CAMCHECK in seq.json). Die Leinwand .laptop__canvas (und das
   Erstbild .laptop__frame) liegt mit Rand ueber dem Kasten (frame_W aus
   seq.json, Einheit cqw = W / 100); js/laptop.js zeichnet je Frame zwei
   Nachbarbilder ueberblendet hinein (kein src-Tausch, kein Layout).
   Segment a: Deckel 0 -> 96 Grad bei Kamera 30 (97 Frames), Segment b:
   Kamera 30 -> 0, Deckel 96 -> 90, waehrend der Massstab 0,5 -> 1 geht
   (25 Frames), z: Standbild fuer die Tab-Phasen, scharf.

   DISPLAY
   Echtes DOM auf .laptop__display, einer Ebene, die js/laptop.js je Frame
   per matrix3d (Homographie) auf die vier gerenderten Display-Ecken legt.
   Im herangefahrenen Zustand ist die Ebene ohne Transform: das Rechteck
   unten sind die Ecken des Standbilds z, das Display ist dort scharf und
   axial. Ein Browser-Rahmen mit Tab-Leiste, darunter je Tab eine Seite als
   absoluter Layer mit fester z-Ordnung. Masse in cqw relativ zur
   Displaybreite. Die vier Leistungstexte (.laptop__steps) liegen NICHT im
   Display, sondern als Panel in der Buehne ueber dem Display-Rechteck des
   herangefahrenen Zustands — scharf, klickbar, ausserhalb von aria-hidden,
   und ohne JS stehen sie als Liste unter dem Laptop.

   Statisch (.is-static: reduced-motion, kein GSAP, kein WebGL, unter 760 px):
   ab 760 px das geschlossene Erstbild a000 (.is-closed, Display aus), darunter
   das Standbild z mit Tab 1 im Display; die vier Bloecke stehen darunter. Im
   Fullpage-Kontext traegt .laptop.is-static den Header-Abstand selbst, weil
   der Leistungen-Block ab 760 px padding 0 hat (layout.css).
   ===================================================================== */

.laptop {
  --lp-spacer: 100dvh;        /* Scrollweg je Phasen-Einheit */
  --lp-phases: 5.7;           /* Summe der Phasengewichte, setzt js/laptop.js */
  /* Bildrahmen relativ zum Szenenkasten, Einheit W (seq.json frame_W; js/laptop.js setzt sie nach) */
  --lp-fx0: -0.15;
  --lp-fy0: -0.05;
  --lp-fw: 1.3;
  --lp-fh: 1.45;
  /* Display-Rechteck des Standbilds z in Anteilen von W (seq.json z, display_px / W) */
  --lp-dx: 1.425cqw;
  --lp-dy: 9.648cqw;
  --lp-dw: 97.151cqw;
  --lp-dh: 62.878cqw;
  position: relative;
}

/* ---------- Buehne ---------- */
.laptop__stage {
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow: hidden;
}
.laptop__title {
  position: absolute;
  left: 0;
  right: 0;
  top: clamp(3.5rem, 8vh, 5.5rem);
  z-index: 6;
  pointer-events: none;
}
.laptop__title .section-head { margin-bottom: 0; }
.laptop__zoom {
  position: absolute;
  left: 50%;
  top: 0;
  width: 960px;                     /* setzt js/laptop.js aus der Clip-Hoehe */
  transform-origin: 50% 0;
  will-change: transform;
  container-type: inline-size;      /* cqw im Geraet = Anteil der Geraetebreite */
}
.laptop__scene {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 0.92;
  pointer-events: none;
}
/* Erstbild (a000) und statische Fassung (Standbild z per data-still); sobald die Leinwand
   zeichnet, blendet .is-canvas es aus */
.laptop__frame {
  position: absolute;
  left: calc(var(--lp-fx0) * 100cqw);
  top: calc(var(--lp-fy0) * 100cqw);
  width: calc(var(--lp-fw) * 100cqw);
  height: auto;
  max-width: none;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
/* Display-Ebene: ohne Transform = Rechteck des Standbilds z; sonst matrix3d aus laptop.js */
.laptop__display {
  position: absolute;
  left: var(--lp-dx);
  top: var(--lp-dy);
  width: var(--lp-dw);
  height: var(--lp-dh);
  transform-origin: 0 0;
  pointer-events: auto;
  will-change: transform;
}
/* Leinwand (js/laptop.js, 13.09. abends): Frame i, darueber Frame i+1 mit globalAlpha =
   Bruchteil — Quantisierungs- und Schattenspruenge zwischen Frames werden Rampen (Boden ruhig).
   Backing-Store = Pixelmass des Segments (1:1-Zeichnung, skaliert der Compositor); die Bitmaps
   dekodieren Worker vorab. Ersetzt zwei <img> mit src-Tausch, die Safari im Zeichnen synchron
   dekodierte (Aussetzer je neuem Frame). Bis zum ersten Zeichnen bleibt das <img> sichtbar. */
.laptop__canvas {
  position: absolute;
  left: calc(var(--lp-fx0) * 100cqw);
  top: calc(var(--lp-fy0) * 100cqw);
  width: calc(var(--lp-fw) * 100cqw);
  height: calc(var(--lp-fh) * 100cqw);
  display: none;
  pointer-events: none;
}
.laptop.is-canvas .laptop__canvas { display: block; }
.laptop.is-canvas .laptop__frame { display: none; }
/* Deckel zeigt von der Kamera weg (js: facing <= 0): Ebene und alles darin unsichtbar und
   unklickbar; !important, weil Seiten und Panels visibility/pointer-events inline setzen */
.laptop__display.is-away,
.laptop__display.is-away * { visibility: hidden !important; pointer-events: none !important; }
/* Glanz auf dem Glas: der Reflex der Studio-Softbox, wie ihn die Cycles-Frames auf dem schwarzen
   Display zeigen (z000 gemessen 14.09.: Spitze oben Mitte, leicht rechts, bis zur halben Hoehe
   auslaufend, links dunkler als rechts). Ueber dem leuchtenden Inhalt bewusst schwach; Staerke per
   --lp-sheen (URL ?sheen=0..2, 1 = Standard, 0 = aus). Keine zweite WebGL-Ebene (Entscheidung 2a). */
.laptop__display::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(70% 55% at 52% -8%, rgb(255 255 255 / calc(0.14 * var(--lp-sheen, 1))) 0%, rgb(255 255 255 / calc(0.05 * var(--lp-sheen, 1))) 45%, rgb(255 255 255 / 0) 80%),
    linear-gradient(112deg, rgb(255 255 255 / calc(0.04 * var(--lp-sheen, 1))) 0%, rgb(255 255 255 / 0) 55%);
  pointer-events: none;
  z-index: 10;
}

/* Display: obere Ecken rund wie beim MacBook, Notch oben mittig */
.laptop__screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 1.6cqw 1.6cqw 0.5cqw 0.5cqw;
  background: #1c1c1e;
  container-type: inline-size;
}
.laptop__notch {
  position: absolute;
  left: 50%;
  top: 0;
  width: 11.2cqw;
  height: 3.1cqw;
  transform: translateX(-50%);
  border-radius: 0 0 1cqw 1cqw;
  background: #060607;
  z-index: 8;
  pointer-events: none;
}
.laptop__dim {
  position: absolute;
  inset: 0;
  z-index: 9;
  background: #000;
  opacity: 0;
  pointer-events: none;
}

/* ---------- macOS-Menueleiste ueber dem Browser ---------- */
.mac {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3.1cqw;
  display: flex;
  align-items: center;
  gap: 1.6cqw;
  padding: 0 1.6cqw;
  background: #1c1c1e;
  color: #e5e5e7;
  font-family: var(--font-sans);
  font-size: 1.25cqw;
  z-index: 2;
}
.mac b { font-weight: 500; }
.mac__r { margin-left: auto; display: flex; align-items: center; gap: 1.4cqw; color: #e5e5e7; }
.mac__bat {
  width: 2.4cqw;
  height: 1.15cqw;
  border: 1px solid rgb(255 255 255 / 0.55);
  border-radius: 0.3cqw;
  position: relative;
}
.mac__bat::before { content: ''; position: absolute; inset: 1px; right: 22%; background: #e5e5e7; border-radius: 0.15cqw; }
.mac__bat::after { content: ''; position: absolute; right: -0.35cqw; top: 30%; width: 0.25cqw; height: 40%; background: rgb(255 255 255 / 0.55); border-radius: 0 0.1cqw 0.1cqw 0; }

/* ---------- Browser im Display ---------- */
.br {
  position: absolute;
  inset: 3.1cqw 0 0 0;
  display: flex;
  flex-direction: column;
  background: #202124;
  color: #e8eaed;
  font-family: var(--font-sans);
  font-size: 1.5cqw;
  line-height: 1.4;
}
.br__tabs {
  display: flex;
  align-items: flex-end;
  gap: 0.2cqw;
  height: 4.6cqw;
  padding: 0.9cqw 1.2cqw 0;
  flex: 0 0 auto;
}
/* Ampel wie bei Chrome auf dem Mac */
.br__lights { display: flex; gap: 0.7cqw; align-self: center; margin: 0 1.4cqw 0 0.2cqw; }
.br__lights i { width: 1.15cqw; height: 1.15cqw; border-radius: 50%; }
.br__lights i:nth-child(1) { background: #ff5f57; }
.br__lights i:nth-child(2) { background: #febc2e; }
.br__lights i:nth-child(3) { background: #28c840; }
.br__tab {
  --open: 1;
  display: flex;
  align-items: center;
  gap: 0.9cqw;
  box-sizing: border-box;
  height: 3.5cqw;
  width: calc(var(--open) * 19cqw);
  opacity: var(--open);
  padding: 0 1.3cqw;
  border-radius: 1cqw 1cqw 0 0;
  color: #9aa0a6;
  white-space: nowrap;
  overflow: hidden;
  font-size: 1.35cqw;
}
.br__tab.is-active { background: #35363a; color: #e8eaed; }
.br__tab i {
  flex: 0 0 auto;
  width: 1.5cqw;
  height: 1.5cqw;
  border-radius: 0.3cqw;
  font-style: normal;
  font-weight: 700;
  font-size: 1cqw;
  line-height: 1.5cqw;
  text-align: center;
  color: #fff;
}
.br__tab span { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
.br__tab b { font-weight: 400; color: #9aa0a6; flex: 0 0 auto; }
.br__tab--new {
  width: 3cqw;
  justify-content: center;
  padding: 0;
  color: #9aa0a6;
  font-size: 2cqw;
}
.br__bar {
  display: flex;
  align-items: center;
  gap: 1.2cqw;
  height: 4.4cqw;
  padding: 0 1.6cqw;
  background: #35363a;
  flex: 0 0 auto;
}
.br__nav { color: #9aa0a6; letter-spacing: 0.6cqw; font-size: 1.6cqw; }
.br__url {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 1cqw;
  height: 2.9cqw;
  padding: 0 1.5cqw;
  border-radius: 100px;
  background: #202124;
  color: #e8eaed;
  font-size: 1.4cqw;
}
.br__url i { font-style: normal; color: #9aa0a6; }
.br__pages { position: relative; flex: 1 1 auto; overflow: hidden; }
.br__page {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  overflow: hidden;
}
.br__page--site { z-index: 1; }
.br__page--code { z-index: 2; }
.br__page--seo  { z-index: 3; }
.br__page--chat { z-index: 4; }

/* ---------- Tab 1: quadrum-Website, scrollt im Tab ---------- */
.qs {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  background: #0b0b0d;
  color: #f4f3ef;
  font-size: 1.5cqw;
  will-change: transform;
}
.qs__nav {
  display: flex;
  align-items: center;
  gap: 2.6cqw;
  padding: 2cqw 4cqw;
}
.qs__brand { letter-spacing: 0.22em; font-size: 1.35cqw; text-transform: uppercase; }
.qs__links { display: flex; gap: 2.6cqw; margin-left: auto; color: #9a978f; }
.qs__links i { font-style: normal; }
.qs__cta {
  padding: 0.8cqw 1.8cqw;
  border-radius: 100px;
  border: 1px solid rgb(200 168 120 / 0.55);
  color: #c8a878;
  font-size: 1.25cqw;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.qs__hero {
  min-height: 48cqw;
  padding: 7cqw 4cqw 6cqw;
  background:
    radial-gradient(60% 50% at 70% 20%, rgb(200 168 120 / 0.16), transparent 70%),
    #0b0b0d;
}
.qs__eyebrow {
  display: block;
  font-size: 1.15cqw;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #c8a878;
  margin-bottom: 1.6cqw;
}
.qs__h1 {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 5.2cqw;
  line-height: 1.05;
  max-width: 22ch;
  margin-bottom: 2cqw;
}
.qs__p { display: block; color: #9a978f; max-width: 46ch; margin-bottom: 2.6cqw; }
.qs__btn {
  display: inline-block;
  padding: 1.1cqw 2.4cqw;
  border-radius: 100px;
  background: #c8a878;
  color: #14110b;
  font-size: 1.3cqw;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.qs__section { padding: 5cqw 4cqw; border-top: 1px solid rgb(255 255 255 / 0.08); }
.qs__eyebrow--s { margin-bottom: 0.8cqw; }
.qs__h2 {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 3.4cqw;
  line-height: 1.1;
  margin-bottom: 2.6cqw;
}
.qs__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; }
.qs__tile {
  aspect-ratio: 4 / 3;
  border-radius: 1.2cqw;
  padding: 1.6cqw;
  display: flex;
  align-items: flex-end;
  font-family: var(--font-display);
  font-size: 2cqw;
  border: 1px solid rgb(255 255 255 / 0.08);
}
.qs__tile--a { background: linear-gradient(160deg, #3a3d4a, #14161c 70%); }
.qs__tile--b { background: linear-gradient(160deg, #4a4033, #171412 70%); }
.qs__tile--c { background: linear-gradient(160deg, #2f3a3a, #121717 70%); }
.qs__rows { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6cqw 3cqw; }
.qs__row { padding: 1.6cqw 0; border-top: 1px solid rgb(255 255 255 / 0.08); }
.qs__row b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 2.1cqw; color: #c8a878; margin-bottom: 0.4cqw; }
.qs__row span { color: #9a978f; font-size: 1.35cqw; }
.qs__foot { padding: 3cqw 4cqw 4cqw; color: #6b6a64; font-size: 1.2cqw; border-top: 1px solid rgb(255 255 255 / 0.08); }

/* ---------- Tab 2: Visual Studio Code ---------- */
.vs {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 3.6cqw 17cqw 1fr;
  grid-template-rows: 1fr 2.3cqw;
  background: #1e1e1e;
  color: #d4d4d4;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 1.3cqw;
  line-height: 1.6;
}
.vs__activity {
  background: #333;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6cqw;
  padding-top: 1.4cqw;
}
.vs__activity i { width: 1.7cqw; height: 1.7cqw; border-radius: 0.3cqw; background: #858585; opacity: 0.6; }
.vs__activity i:first-child { opacity: 1; background: #fff; }
.vs__side {
  background: #252526;
  font-family: var(--font-sans);
  font-size: 1.2cqw;
  padding: 1cqw 0;
  color: #cccccc;
  overflow: hidden;
}
.vs__side b { display: block; padding: 0.4cqw 1.4cqw; font-weight: 400; font-size: 1.05cqw; letter-spacing: 0.08em; color: #bbb; }
.vs__side span { display: block; padding: 0.25cqw 1.4cqw; white-space: nowrap; }
.vs__side span.d2 { padding-left: 2.6cqw; }
.vs__side span.d3 { padding-left: 3.8cqw; }
.vs__side span.is-active { background: #37373d; color: #fff; }
.vs__main { display: flex; flex-direction: column; min-width: 0; }
.vs__tabs { display: flex; background: #252526; font-family: var(--font-sans); font-size: 1.2cqw; }
.vs__tabs span { padding: 0.7cqw 1.6cqw; color: #969696; border-right: 1px solid #1e1e1e; }
.vs__tabs span.is-active { background: #1e1e1e; color: #fff; border-top: 1px solid #c8a878; }
.vs__crumb { padding: 0.4cqw 1.6cqw; font-family: var(--font-sans); font-size: 1.05cqw; color: #969696; }
.vs__editor { flex: 1 1 auto; padding: 0.6cqw 0 0; overflow: hidden; counter-reset: ln; }
.vs__line {
  display: block;
  white-space: pre;
  min-height: 1.6em;
  opacity: 0;
}
.vs__line::before {
  counter-increment: ln;
  content: counter(ln);
  display: inline-block;
  width: 3.4cqw;
  margin-right: 1.8cqw;
  text-align: right;
  color: #6e7681;
}
.vs__line.is-on { opacity: 1; }
.vs__line.is-caret::after { content: ''; display: inline-block; width: 0.55cqw; height: 1.2em; vertical-align: text-bottom; background: #aeafad; margin-left: 0.1cqw; }
.vs__status {
  grid-column: 1 / -1;
  background: #007acc;
  color: #fff;
  font-family: var(--font-sans);
  font-size: 1.05cqw;
  display: flex;
  gap: 2.4cqw;
  align-items: center;
  padding: 0 1.4cqw;
}
.vs__status span:last-child { margin-left: auto; }
.tk-t { color: #569cd6; }
.tk-a { color: #9cdcfe; }
.tk-s { color: #ce9178; }
.tk-c { color: #6a9955; font-style: italic; }
.tk-p { color: #d7ba7d; }
.tk-x { color: #d4d4d4; }

/* ---------- Tab 3: Google ---------- */
.gg {
  position: absolute;
  inset: 0;
  background: #fff;
  color: #202124;
  font-family: Arial, Helvetica, var(--font-sans);
  font-size: 1.45cqw;
  line-height: 1.45;
  overflow: hidden;
}
.gg__top {
  display: flex;
  align-items: center;
  gap: 3cqw;
  padding: 1.6cqw 4cqw 1.4cqw;
  border-bottom: 1px solid #ebebeb;
}
.gg__logo { font-size: 3cqw; font-weight: 700; letter-spacing: -0.03em; }
.gg__logo .b { color: #4285f4; } .gg__logo .r { color: #ea4335; } .gg__logo .y { color: #fbbc05; } .gg__logo .g { color: #34a853; }
.gg__box {
  flex: 0 0 48cqw;
  display: flex;
  align-items: center;
  gap: 1.2cqw;
  height: 4.4cqw;
  padding: 0 2cqw;
  border-radius: 100px;
  border: 1px solid #dfe1e5;
  box-shadow: 0 1px 6px rgb(32 33 36 / 0.16);
  font-size: 1.75cqw;
}
.gg__q { white-space: pre; }
.gg__caret { display: inline-block; width: 0.15cqw; height: 2cqw; background: #202124; animation: gg-blink 1s steps(2) infinite; }
@keyframes gg-blink { to { visibility: hidden; } }
.gg__box i { font-style: normal; color: #4285f4; margin-left: auto; font-size: 1.9cqw; }
.gg__body { padding: 2cqw 4cqw 0 13cqw; max-width: 70cqw; }
.gg__ai {
  padding: 2cqw 2.4cqw;
  border-radius: 1.6cqw;
  background: linear-gradient(135deg, #eef3ff, #f6f1ff);
  margin-bottom: 2.4cqw;
}
.gg__ai-head { display: flex; align-items: center; gap: 1cqw; font-size: 1.4cqw; color: #5f6368; margin-bottom: 0.8cqw; }
.gg__ai-head i { font-style: normal; color: #7c4dff; }
.gg__ai p { margin: 0 0 1cqw; }
.gg__chip { display: inline-block; padding: 0.35cqw 1.2cqw; border-radius: 100px; background: #fff; border: 1px solid #dfe1e5; color: #4d5156; font-size: 1.2cqw; margin-right: 0.6cqw; }
.gg__res { margin-bottom: 2.2cqw; }
.gg__site { display: flex; align-items: center; gap: 1cqw; margin-bottom: 0.3cqw; }
.gg__fav { width: 2.2cqw; height: 2.2cqw; border-radius: 50%; background: #0b0b0d; color: #c8a878; font-size: 1.1cqw; display: flex; align-items: center; justify-content: center; }
.gg__fav--li { background: #0a66c2; color: #fff; }
.gg__fav--ig { background: linear-gradient(45deg, #f9ce34, #ee2a7b, #6228d7); color: #fff; }
.gg__name { font-size: 1.35cqw; }
.gg__url { display: block; color: #4d5156; font-size: 1.2cqw; }
.gg__title { display: block; color: #1a0dab; font-size: 2cqw; line-height: 1.3; margin: 0.2cqw 0 0.5cqw; }
.gg__snip { display: block; color: #4d5156; }
.gg__links { display: flex; gap: 2cqw; margin-top: 0.7cqw; color: #1a0dab; font-size: 1.3cqw; }
.gg__ai, .gg__res { opacity: 0; transform: translateY(1.2cqw); transition: opacity 0.35s ease, transform 0.35s ease; }
.gg__ai.is-on, .gg__res.is-on { opacity: 1; transform: none; }

/* ---------- Tab 4: Support-Chat ---------- */
.ch {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: #0f1012;
  color: #f4f3ef;
  font-family: var(--font-sans);
  font-size: 1.5cqw;
}
.ch__head {
  display: flex;
  align-items: center;
  gap: 1.4cqw;
  padding: 1.6cqw 3cqw;
  border-bottom: 1px solid rgb(255 255 255 / 0.08);
}
.ch__avatar {
  width: 3.6cqw;
  height: 3.6cqw;
  border-radius: 50%;
  background: #c8a878;
  color: #14110b;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2cqw;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ch__who b { display: block; font-weight: 500; }
.ch__who span { color: #9a978f; font-size: 1.2cqw; }
.ch__who span::before { content: ''; display: inline-block; width: 0.8cqw; height: 0.8cqw; border-radius: 50%; background: #3ddc84; margin-right: 0.6cqw; }
.ch__body { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-start; gap: 1.4cqw; padding: 3cqw; }
.ch__msg {
  max-width: 56%;
  padding: 1.3cqw 1.7cqw;
  border-radius: 1.6cqw 1.6cqw 1.6cqw 0.4cqw;
  background: #1e2024;
  opacity: 0;
  transform: translateY(1.4cqw);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.ch__msg.is-on { opacity: 1; transform: none; }
.ch__msg--me {
  align-self: flex-end;
  background: rgb(200 168 120 / 0.16);
  border: 1px solid rgb(200 168 120 / 0.35);
  border-radius: 1.6cqw 1.6cqw 0.4cqw 1.6cqw;
}
.ch__time { display: block; margin-top: 0.5cqw; color: #9a978f; font-size: 1.1cqw; }
.ch__input {
  margin: 0 3cqw 3cqw;
  height: 4cqw;
  padding: 0 2cqw;
  border-radius: 100px;
  background: #1e2024;
  color: #6b6a64;
  display: flex;
  align-items: center;
}

/* ---------- Leistungstexte: Panel im Display-Rechteck ---------- */
.laptop__steps {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;                     /* setzt js/laptop.js auf das Display-Rechteck */
  list-style: none;
  margin: 0;
  padding: 0;
  z-index: 5;
  pointer-events: none;
}
.laptop__step {
  position: absolute;
  right: 3.2%;
  bottom: 5.5%;
  width: 36%;
  max-width: 420px;
  padding: 1.1em 1.3em 1.2em;
  border-radius: 12px;
  background: rgb(11 11 13 / 0.88);
  border: 1px solid rgb(200 168 120 / 0.3);
  box-shadow: 0 18px 50px rgb(0 0 0 / 0.45);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  font-size: clamp(0.78rem, 1.05vw, 1rem);
  color: var(--text);
}
.laptop__head {
  display: flex;
  align-items: center;
  gap: 0.8em;
  margin-bottom: 0.6em;
}
.laptop__icon {
  display: inline-flex;
  flex: 0 0 auto;
  width: 1.9em;
  height: 1.9em;
  color: var(--accent);
}
.laptop__icon svg { width: 100%; height: 100%; overflow: visible; }
.laptop__icon .draw {
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  transition: stroke-dashoffset 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.laptop__step.is-on .laptop__icon .draw,
.laptop.is-static .laptop__icon .draw { stroke-dashoffset: 0; }
.laptop__num {
  font-size: 0.72em;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.laptop__step h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.75em;
  line-height: 1.1;
  color: var(--accent);
  margin: 0 0 0.4em;
}
.laptop__step p {
  color: var(--muted);
  margin: 0;
  font-size: 0.95em;
  line-height: 1.55;
}

/* Handy (05.10.2026, B238): dieselbe Fahrt, das Panel steht unter (hochkant, .is-stack) bzw. neben
   (quer, .is-side) dem Laptop statt im Display. Lage, Breite und Hoehe der Liste setzt js/laptop.js
   (measure); jeder Kasten liegt oben in der Liste, gewechselt wird wie am Desktop. Alle Kästen so
   hoch wie der höchste (min-height der Liste, die measure auf diese Höhe setzt; beim Messen ist sie
   auto, also 0) und deckend: beim Überblenden stand sonst ein zweiter Rahmen unter dem ersten und der
   vorige Text schien durch (Audit 05.10., unter dem Laptop ist kein Display-Inhalt, der durchscheinen soll). */
.laptop.is-stack .laptop__step,
.laptop.is-side .laptop__step {
  left: 0;
  top: 0;
  right: auto;
  bottom: auto;
  width: 100%;
  max-width: none;
  min-height: 100%;
  background: var(--bg);
  font-size: 0.94rem;
}
.laptop.is-side .laptop__step { font-size: 0.88rem; }

/* Scrollweg */
.laptop__track { height: calc(var(--lp-phases) * var(--lp-spacer)); pointer-events: none; }

/* Link in der Buehne, unter dem zugeklappten Laptop; blendet im Outro ein */
.laptop__more {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 7%;
  display: flex;
  justify-content: center;
  z-index: 6;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.laptop__more a { pointer-events: auto; }

/* ---------- statisch: reduced-motion, kein GSAP, kein WebGL ---------- */
/* Header-Abstand im Fullpage-Kontext: die anderen Flow-Bloecke haben 5.2rem 0 3.4rem (layout.css),
   Leistungen padding 0, weil sonst die Buehne den Abstand ueber .laptop__title setzt (seit 05.10. auf
   jeder Breite, die Fahrt laeuft auch am Handy). Ohne Buehne (21.09.: Titel stand bei y 0 unter dem
   80-px-Header) hier nachziehen, mit denselben Werten wie die anderen Bloecke je Breite. */
body.fp-active .laptop.is-static { padding: 5.2rem 0 3.4rem; }
@media (max-width: 760px) {
  body.fp-active .laptop.is-static { padding: 4.5rem 0 3rem; }
}
@media (max-height: 500px) {
  body.fp-active .laptop.is-static { padding: 3.9rem 0 1.5rem; }
}
.laptop.is-static .laptop__stage {
  position: static;
  height: auto;
  overflow: visible;
  width: min(var(--container, 1180px), 100% - 2 * var(--space, 1.25rem));
  margin-inline: auto;
}
.laptop.is-static .laptop__title {
  position: static;
  width: auto;
  margin-bottom: clamp(0.8rem, 2.5vh, 2rem);
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto;
}
.laptop.is-static .laptop__zoom {
  position: relative;
  left: auto;
  transform: none !important;
  width: 100% !important;
  max-width: 720px;
  margin: 0 auto clamp(1.5rem, 4vh, 2.5rem);
  will-change: auto;
}
.laptop.is-static .laptop__scene { aspect-ratio: 1 / 0.86; overflow: hidden; pointer-events: auto; }
.laptop.is-static .laptop__display { transform: none !important; will-change: auto; }
.laptop.is-static .laptop__dim { display: none; }
/* Geschlossen (ab 760 px): das Erstbild a000 (1110 x 1238, Rahmen 1,3 W x 1,45 W) zeigt den zugeklappten
   Laptop in Zeilen 677..1146 und Spalten 40..1069 (Alpha gemessen 21.09.), also 0,743..1,293 W hoch und
   1,206 W breit — breiter als der Kasten. Bild auf 0,796 skaliert (Laptop 0,96 W breit, mittig) und um
   0,611 W nach oben geschoben: Laptop-Oberkante bei 0,02 W, Unterkante bei 0,458 W, Kasten 0,47 W hoch.
   Kein Display-Inhalt im geschlossenen Zustand. */
.laptop.is-static.is-closed .laptop__scene { aspect-ratio: 1 / 0.47; }
.laptop.is-static.is-closed .laptop__frame { width: 103.5cqw; left: -1.75cqw; top: -61.1cqw; }
.laptop.is-static.is-closed .laptop__display { display: none; }

.laptop.is-static .laptop__notch,
.laptop.is-static .laptop__track { display: none; }
.laptop.is-static .br__page--site { opacity: 1; visibility: visible; pointer-events: auto; }
.laptop.is-static .br__tab:first-child { --open: 1; background: #35363a; color: #e8eaed; }
.laptop.is-static .br__tab:not(:first-child):not(.br__tab--new) { display: none; }
.laptop.is-static .laptop__steps { position: static; width: auto; height: auto; pointer-events: auto; }
/* ab 760 px (Desktop ohne WebGL / reduced): vier Bloecke als Zweispalter statt einer 720 px hohen Liste */
@media (min-width: 760px) {
  .laptop.is-static .laptop__steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 4vw, 4rem); }
}
/* Niedrige Fenster (Handy quer, Fold quer): offenes Standbild z, so gross, dass es samt Titel in die
   Hoehe passt (sonst 720 px breit = 620 px hoch bei 342 px Fenster). Mobil-Check 04.10.2026. */
@media (max-height: 500px) {
  .laptop.is-static .laptop__zoom { max-width: min(720px, 95dvh); }
}
.laptop.is-static .laptop__step {
  position: static;
  width: auto;
  max-width: none;
  padding: clamp(1rem, 3vh, 1.6rem) 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: none;
  box-shadow: none;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  font-size: 1rem;
}
.laptop.is-static .laptop__step p { max-width: 60ch; }
.laptop.is-static .laptop__more {
  position: static;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  padding: clamp(1.2rem, 3vh, 1.8rem) 0 clamp(2rem, 6vh, 4rem);
}