/* ==========================================================================
   Agenturorbit – Unterseite „KI-Box" (Coming soon), 14.09.2026

   Liegt HINTER site.css und nimmt von dort alles Gemeinsame: Farben, Schrift,
   Kopfleiste, Knöpfe, Vorzeile, Überschriften, .sec/.sec-weiss, Dreierkarten,
   Häkchenlisten, Fuß, Pfeil nach oben. Hier steht nur, was diese
   Seite allein hat: die räumliche Bühne, der Schichtstapel, der Weg einer
   Aufgabe und die Bewegungen daran.

   BEWEGT WIRD ÜBER EINE ZAHL: kibox.js schreibt jedem Kasten mit `data-kb`
   eine Variable `--p` von 0 (Kasten kommt unten ins Bild) bis 1 (Kasten oben
   hinaus). Alles Räumliche rechnet aus dieser Zahl, nichts misst selbst. Wer
   „Bewegung reduzieren" gesetzt hat, bekommt den Endzustand ohne Weg.
   ========================================================================== */

:root {
  --kb-graphit: #2b3238;      /* das Gehäuse der Box, eine Spur wärmer als --tinte */
  --kb-glas:    rgba(255,255,255,.62);
  --kb-tiefe:   1400px;       /* eine Perspektive für die ganze Seite */
}

/* --------------------------------------------------------------------------
   Kopfleiste: auf der Unterseite führen die Verweise auf Abschnitte DIESER
   Seite, die Kaufaufforderung wird zur Vorführung, weil es noch nichts zu
   kaufen gibt. Die Plakette „Coming soon" neben der Marke (.kb-status) stand
   bis zum 14.09.2026 abends hier – sie steht seither auch auf der Hauptseite
   und liegt deshalb in site.css (Abschnitt Kopfleiste).
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Die Bühne
   -------------------------------------------------------------------------- */
/* DERSELBE GRUND WIE DIE BÜHNE DER HAUPTSEITE (Marc, 14.09.2026, nachmittags):
   Grau, oben der weiche Lichtschein (wie .stage::before in site.css),
   darunter die zwei Farbflecke und das Punktraster (.par-schicht, .blob,
   .raster-flaeche aus site.css, hier ohne Parallaxe). Der Abschnitt danach
   (#fuer-wen) ist ebenfalls grau, also weder Blende noch Linie dazwischen.
   Zwischendurch stand die Bühne auf Weiß, damit die .mp4 mit weißem Grund
   in Safari unsichtbar bleibt – das brach die Optik zur Hauptseite. Safari
   bekommt deshalb keinen Film mit weißem Grund mehr, sondern eine
   freigestellte HEVC-Fassung (.mov) oder, wo die fehlt, nur das Standbild
   (kibox.js, Abschnitt 4). */
.kb-stage {
  position: relative;
  padding: clamp(96px, 13vh, 150px) 0 0;
  overflow: clip;
  background: var(--grund);
}
.kb-stage::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 62%;
  background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,0));
  pointer-events: none;
  z-index: 0;
}
.kb-stage .stage-in { position: relative; z-index: 2; text-align: center; }
.kb-stage .display { margin-bottom: .34em; }
.kb-stage .lead { margin-bottom: 1.6em; max-width: 46ch; }
.kb-stage .cta-row { justify-content: center; }
.kb-stage .stage-fuss { color: var(--blass); font-size: .84rem; margin: 18px 0 0; }
.kb-stage .stage-fuss .slogan { color: var(--ak); font-weight: 700; letter-spacing: .02em; }

/* Der Raum, in dem die Box steht. `perspective` sitzt am Halter, das Bild
   dahinter dreht sich mit dem Scrollen nach hinten weg – eine flache Fläche
   würde beim Verlassen einfach nur nach oben rutschen. */
.kb-held {
  position: relative;
  z-index: 1;
  width: min(100% - 16px, 1140px);
  /* Das Bild aus Higgsfield hat oben und unten ein Fünftel Luft um die
     Box. Der negative Rand oben holt die Box an den Satz heran, der unten
     lässt den nächsten Abschnitt in die Luft hineinragen. Nicht tiefer als
     3 %: der Schatten (.kb-schatten, unterste 6 % + 8 % Höhe) muss ganz
     oberhalb der Kante bleiben, sonst schneidet `overflow: clip` ihn an. */
  margin: clamp(-40px, -3vw, -12px) auto -3%;
  perspective: var(--kb-tiefe);
  perspective-origin: 50% 20%;
}
.kb-held-innen {
  position: relative;
  transform-style: preserve-3d;
  transform:
    rotateX(calc(var(--p, 0) * 22deg))
    translateY(calc(var(--p, 0) * 60px))
    scale(calc(1 - var(--p, 0) * .12));
  transform-origin: 50% 80%;
  will-change: transform;
}
.kb-medium {
  position: relative;
  aspect-ratio: 2688 / 1520;
  overflow: visible;
}
.kb-medium img,
.kb-medium video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
/* Der Film liegt ÜBER dem freigestellten Bild und blendet erst ein, wenn
   er läuft (kibox.js) – fällt er aus, bleibt das Bild stehen. Alle Fassungen
   sind freigestellt: .webm (VP9 mit Alphakanal) für Chrome und Firefox,
   .mov (HEVC mit Alphakanal) für Safari. Die .mp4 mit weißem Grund liegt
   nur noch als letzter Rückfall im HTML und wird von kibox.js nie gewählt.
   Das Standbild bleibt unter dem Film STEHEN: Beide sind freigestellt und
   deckungsgleich, und der eingebettete Browser der App malt den Film nach
   einer Pause nicht mehr – ohne Bild darunter stand die Bühne dann leer
   (14.09.2026, nachmittags). */
.kb-film {
  opacity: 0;
  transition: opacity 900ms var(--ease-weich);
  pointer-events: none;
}
.kb-film.is-an { opacity: 1; }

/* Der Schatten unter der Box: eine flache Ellipse, die beim Wegdrehen
   mitkippt (sie hängt an derselben 3D-Fläche). */
.kb-schatten {
  position: absolute;
  left: 30%; right: 30%;
  bottom: 6%;
  height: 8%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(24,40,48,.22), rgba(24,40,48,0));
  transform: translateZ(-1px);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Kinoschnitt zwischen den Abschnitten

   Jeder Abschnitt mit `data-kb` kommt nicht einfach hoch, sondern hebt sich
   aus einer leichten Neigung heraus, während sein Inhalt aufblendet. Die
   Neigung ist klein (4°) und sitzt am unteren Rand – so liest sie sich als
   Blatt, das sich aufrichtet, nicht als Fahrt.
   -------------------------------------------------------------------------- */
.js .kb-sec > .wrap,
.js .kb-sec > .wrap-wide {
  transform: perspective(var(--kb-tiefe)) rotateX(calc((1 - min(1, var(--p, 0) * 2.4)) * 4deg));
  transform-origin: 50% 100%;
  will-change: transform;
}

/* Bilder und Filme treten aus einer Blende hervor: erst ein Ausschnitt, dann
   das ganze Bild. Hängt am Einblenden (.rv/.is-in), braucht keinen zweiten
   Beobachter. */
.js .kb-blende {
  clip-path: inset(14% 8% 14% 8% round 18px);
  transition: clip-path 1100ms var(--ease-weich), opacity var(--t-slow) var(--ease), translate var(--t-slow) var(--ease);
}
.js .kb-blende.is-in { clip-path: inset(0 0 0 0 round 0); }

/* Ein Hinweis in der Vorzeile – gelb wäre eine Warnung, hier reicht das Blau. */
.kb-hinweis {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  padding: 6px 12px 6px 10px;
  border-radius: var(--r-pill);
  background: var(--tint);
  color: var(--leucht-tief);
  font-size: .78rem;
  font-weight: 600;
}
.kb-hinweis svg { width: 14px; height: 14px; flex: none; }

/* --------------------------------------------------------------------------
   Für wen: die Dreierkarten aus site.css, mit einem kleinen Stand-Schild
   -------------------------------------------------------------------------- */
.kb-stand {
  display: inline-block;
  margin: 0 0 12px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ak);
}
.kb-tri .tri-c { padding-top: 22px; }
@media (max-width: 760px) { .kb-tri.tri { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Innen: links die Kundenoberfläche, rechts der Schichtstapel
   -------------------------------------------------------------------------- */
.kb-innen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  margin-top: clamp(28px, 4vw, 52px);
}
@media (max-width: 900px) { .kb-innen { grid-template-columns: 1fr; } }

/* Das Kundenportal als gezeichnete Fläche – kein Bildschirmfoto, es gibt
   noch keines. Alles hier ist Beispiel, das steht auch darunter. Die Kacheln
   heißen wie im Leitfaden (Abschnitt 08); gebucht sind drei von fünf, damit
   man sieht, dass „nicht gebucht" ein Zustand ist und kein Fehler. */
.kb-portal {
  position: relative;
  background: var(--weiss);
  border: 1px solid var(--rand);
  border-radius: var(--r-card);
  box-shadow: var(--sh-3);
  overflow: hidden;
  transform: perspective(var(--kb-tiefe)) rotateY(calc(6deg - var(--p, 0) * 10deg)) rotateX(calc(var(--p, 0) * 4deg));
  transform-origin: 50% 50%;
  will-change: transform;
}
.kb-portal-kopf {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rand);
  font-size: .8rem;
  color: var(--gedaempft);
}
.kb-portal-kopf b { color: var(--tinte); font-weight: 700; }
.kb-portal-kopf .nav-mark { width: 18px; height: 18px; }
.kb-portal-kopf .kb-lampe {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .72rem;
}
.kb-portal-kopf .kb-lampe i { width: 7px; height: 7px; border-radius: 50%; background: #3cb371; }
.kb-portal-in { padding: 16px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.kb-kachel {
  position: relative;
  padding: 14px 14px 12px;
  border-radius: var(--r);
  border: 1px solid var(--rand);
  background: var(--grund);
  min-height: 88px;
  transition: translate 500ms var(--ease-weich), opacity 500ms var(--ease-weich);
}
.kb-kachel h4 { margin: 0 0 4px; font-size: .86rem; letter-spacing: -.012em; }
.kb-kachel p { margin: 0; font-size: .74rem; color: var(--gedaempft); line-height: 1.45; }
.kb-kachel .kb-k-ic {
  display: grid; place-items: center;
  width: 28px; height: 28px;
  margin-bottom: 10px;
  border-radius: 7px;
  background: linear-gradient(150deg, var(--leucht), var(--leucht-tief));
  color: #fff;
}
.kb-kachel .kb-k-ic svg { width: 15px; height: 15px; }
.kb-kachel.is-aus { background: var(--weiss); }
.kb-kachel.is-aus .kb-k-ic { background: var(--grund-tief); color: var(--blass); }
.kb-kachel.is-aus h4 { color: var(--gedaempft); }
.kb-kachel .kb-k-stand {
  position: absolute;
  top: 12px; right: 12px;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--leucht-tief);
}
.kb-kachel.is-aus .kb-k-stand { color: var(--blass); }
/* Die Kacheln kommen nacheinander, sobald der Kasten im Bild ist */
.js .kb-portal .kb-kachel { opacity: 0; translate: 0 12px; }
.js .kb-portal.is-in .kb-kachel { opacity: 1; translate: 0 0; }
.js .kb-portal.is-in .kb-kachel:nth-child(2) { transition-delay: 90ms; }
.js .kb-portal.is-in .kb-kachel:nth-child(3) { transition-delay: 180ms; }
.js .kb-portal.is-in .kb-kachel:nth-child(4) { transition-delay: 270ms; }
.js .kb-portal.is-in .kb-kachel:nth-child(5) { transition-delay: 360ms; }
.kb-portal-fuss { padding: 8px 16px 12px; font-size: .7rem; color: var(--blass); }

/* DER SCHICHTSTAPEL. Sieben Platten übereinander, in isometrischer Ansicht
   (rotateX 58°, rotateZ -38° – die Winkel, bei denen eine Platte noch als
   Fläche zu lesen ist und die Stirnseiten trotzdem Tiefe zeigen). Der
   Abstand zwischen den Platten wächst mit `--p`: Beim Ankommen liegen sie
   aufeinander, beim Weiterlesen fächern sie auf, und jede Zeile in der
   Legende daneben leuchtet auf, wenn ihre Platte frei liegt. Farben von
   unten nach oben wie im Bild aus Higgsfield: Graphit, Grau, Weiß, Hellblau,
   Blau, Tiefblau, Glas. */
.kb-stapel-halter {
  position: relative;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 20px;
  align-items: center;
}
.kb-stapel {
  position: relative;
  height: 380px;
  perspective: var(--kb-tiefe);
}
.kb-stapel-3d {
  position: absolute;
  left: 50%; top: 58%;
  width: 230px; height: 150px;
  transform-style: preserve-3d;
  transform: translate(-50%, -50%) rotateX(58deg) rotateZ(-38deg);
}
.kb-platte {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  transform: translateZ(calc(var(--i) * (10px + var(--p, 0) * 30px)));
  transition: transform 80ms linear;   /* glättet die Scrollschritte */
  box-shadow: 0 1px 0 rgba(0,0,0,.05), 0 14px 24px -18px rgba(24,40,48,.5);
  will-change: transform;
}
.kb-platte::after {                   /* eine feine Kante, sonst hat die Fläche keinen Rand */
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), inset 0 -2px 0 rgba(0,0,0,.08);
}
.kb-platte.p1 { --i: 0; background: linear-gradient(135deg, #3a4249, var(--kb-graphit)); }
.kb-platte.p2 { --i: 1; background: linear-gradient(135deg, #e6ebee, #d5dce0); }
.kb-platte.p3 { --i: 2; background: linear-gradient(135deg, #ffffff, #eef2f4); }
.kb-platte.p4 { --i: 3; background: linear-gradient(135deg, #d7f0fc, #b9e4fa); }
.kb-platte.p5 { --i: 4; background: linear-gradient(135deg, #4fc1f4, var(--leucht)); }
.kb-platte.p6 { --i: 5; background: linear-gradient(135deg, var(--leucht-tief), #0a5f8f); }
.kb-platte.p7 { --i: 6; background: linear-gradient(135deg, rgba(255,255,255,.75), rgba(255,255,255,.45)); backdrop-filter: blur(2px); }
/* Das Band durch alle Platten, wie im Bild aus Higgsfield, gab es hier
   kurz als senkrechten Stab (14.09.2026). Wieder heraus: In der Isometrie
   lag er hinter den Platten und war nur als Fleck auf der obersten zu
   sehen. Der Stapel liest sich ohne ihn. */
.kb-legende { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.kb-legende li {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 7px 10px;
  border-radius: var(--r-s);
  font-size: .86rem;
  color: var(--blass);
  transition: color 300ms var(--ease), background 300ms var(--ease);
}
.kb-legende li i {
  width: 14px; height: 14px;
  border-radius: 4px;
  align-self: center;
  opacity: .45;
  transition: opacity 300ms var(--ease);
}
.kb-legende li b { display: block; color: inherit; font-weight: 700; letter-spacing: -.01em; }
.kb-legende li small { display: block; font-size: .76rem; }
.kb-legende li.is-an { color: var(--tinte); background: var(--grund); }
.kb-legende li.is-an i { opacity: 1; }
.kb-legende .k1 i { background: var(--kb-graphit); }
.kb-legende .k2 i { background: #d5dce0; }
.kb-legende .k3 i { background: #fff; box-shadow: inset 0 0 0 1px var(--rand); }
.kb-legende .k4 i { background: #b9e4fa; }
.kb-legende .k5 i { background: var(--leucht); }
.kb-legende .k6 i { background: var(--leucht-tief); }
.kb-legende .k7 i { background: rgba(255,255,255,.6); box-shadow: inset 0 0 0 1px var(--rand); }
@media (max-width: 560px) {
  .kb-stapel-halter { grid-template-columns: 1fr; }
  .kb-stapel { height: 300px; }
  .kb-stapel-3d { width: 190px; height: 124px; }
}

/* --------------------------------------------------------------------------
   Der Weg einer Aufgabe: sechs Stationen an einer Leitung
   -------------------------------------------------------------------------- */
.kb-weg {
  position: relative;
  margin-top: clamp(28px, 4vw, 56px);
  padding: 0 0 8px;
}
.kb-weg-leitung {
  position: absolute;
  left: 8%; right: 8%;
  top: 26px;
  height: 3px;
  background: var(--rand);
  border-radius: 2px;
  overflow: hidden;
}
.kb-weg-leitung i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--leucht), var(--leucht-tief));
  transform: scaleX(var(--w, 0));
  transform-origin: left;
  transition: transform 120ms linear;
}
.kb-stationen {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin: 0; padding: 0;
  list-style: none;
  counter-reset: station;
}
.kb-station {
  position: relative;
  text-align: center;
  padding-top: 54px;
  font-size: .86rem;
  color: var(--blass);
  transition: color 300ms var(--ease);
}
.kb-station::before {
  counter-increment: station;
  content: counter(station);
  position: absolute;
  left: 50%; top: 12px;
  translate: -50% 0;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--weiss);
  border: 2px solid var(--rand);
  color: var(--blass);
  font-size: .76rem;
  font-weight: 700;
  transition: background 300ms var(--ease), border-color 300ms var(--ease), color 300ms var(--ease), scale 300ms var(--ease-weich);
}
.kb-station b { display: block; color: inherit; font-weight: 700; letter-spacing: -.01em; }
.kb-station small { display: block; font-size: .74rem; margin-top: 2px; }
.kb-station.is-an { color: var(--tinte); }
.kb-station.is-an::before {
  background: linear-gradient(150deg, var(--leucht), var(--leucht-tief));
  border-color: transparent;
  color: #fff;
  scale: 1.1;
}
.kb-station.is-an small { color: var(--gedaempft); }
@media (max-width: 760px) {
  .kb-weg-leitung { display: none; }
  .kb-stationen { grid-template-columns: 1fr 1fr; gap: 14px 10px; }
  .kb-station { padding: 12px 10px 12px 44px; text-align: left; border: 1px solid var(--rand); border-radius: var(--r); }
  .kb-station::before { left: 8px; top: 50%; translate: 0 -50%; }
}
.kb-weg-fuss {
  margin: 26px auto 0;
  max-width: 62ch;
  text-align: center;
  font-size: .9rem;
  color: var(--gedaempft);
}

/* --------------------------------------------------------------------------
   Bleibt im Haus: Film links, zwei Listen rechts
   -------------------------------------------------------------------------- */
.kb-bleibt {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(24px, 4vw, 60px);
  align-items: center;
}
@media (max-width: 900px) { .kb-bleibt { grid-template-columns: 1fr; } }
.kb-bleibt .kb-held { width: 100%; margin: 0; }
.kb-bleibt .kb-held-innen {
  transform: perspective(var(--kb-tiefe)) rotateY(calc(-8deg + var(--p, 0) * 14deg));
}
.kb-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 520px) { .kb-zwei { grid-template-columns: 1fr; } }
.kb-liste {
  padding: 18px 18px 14px;
  border-radius: var(--r-card);
  border: 1px solid var(--rand);
  background: var(--grund);
}
.kb-liste h3 { margin: 0 0 10px; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ak); }
.kb-liste ul { margin: 0; padding: 0; list-style: none; }
.kb-liste li { padding: 6px 0 6px 22px; position: relative; font-size: .9rem; border-top: 1px solid var(--rand); }
.kb-liste li:first-child { border-top: 0; }
.kb-liste li::before { content: ""; position: absolute; left: 2px; top: 13px; width: 10px; height: 5px; border-left: 2px solid var(--leucht); border-bottom: 2px solid var(--leucht); rotate: -45deg; }
.kb-liste.aus li::before { border: 0; width: 6px; height: 6px; top: 13px; left: 4px; border-radius: 50%; background: var(--blass); rotate: 0deg; }
.kb-liste.aus { background: var(--weiss); }
.kb-liste .kb-klein { margin: 12px 0 0; font-size: .76rem; color: var(--blass); line-height: 1.5; }

/* --------------------------------------------------------------------------
   Der Beleg: Film über die Breite, darunter die sieben Schritte
   (die „Übergabe an die Kanzlei" ist auf Marcs Wunsch am 14.09.2026 entfallen)
   -------------------------------------------------------------------------- */
.kb-prozess-film { width: min(100%, 1040px); margin: 0 auto; }
.kb-prozess-film .kb-held-innen {
  transform: perspective(var(--kb-tiefe)) rotateX(calc(10deg - var(--p, 0) * 16deg));
  transform-origin: 50% 50%;
}
.kb-schritte {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
.kb-schritt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: var(--r-pill);
  background: var(--weiss);
  border: 1px solid var(--rand);
  font-size: .86rem;
  font-weight: 600;
  color: var(--ak-tief);
}
.kb-schritt::after { content: "›"; color: var(--blass); font-weight: 400; margin-left: 2px; }
.kb-schritt:last-child::after { content: none; }
.kb-schritt.mensch {
  background: linear-gradient(150deg, var(--leucht), var(--leucht-tief));
  border-color: transparent;
  color: #fff;
}
.kb-schritt.mensch small { font-weight: 500; opacity: .9; }
.js .rv .kb-schritt { opacity: 0; translate: 0 10px; transition: opacity var(--t-slow) var(--ease), translate var(--t-slow) var(--ease); }
.js .rv.is-in .kb-schritt { opacity: 1; translate: 0 0; }
.js .rv.is-in .kb-schritt:nth-child(1) { transition-delay: 120ms; }
.js .rv.is-in .kb-schritt:nth-child(2) { transition-delay: 200ms; }
.js .rv.is-in .kb-schritt:nth-child(3) { transition-delay: 280ms; }
.js .rv.is-in .kb-schritt:nth-child(4) { transition-delay: 360ms; }
.js .rv.is-in .kb-schritt:nth-child(5) { transition-delay: 440ms; }
.js .rv.is-in .kb-schritt:nth-child(6) { transition-delay: 520ms; }
.js .rv.is-in .kb-schritt:nth-child(7) { transition-delay: 600ms; }

/* Der Abschnitt „Zwei Größen" (Hardware: Mini-PC gegen Tower, zwei Karten,
   Bild hardware-*.webp) stand bis zum 14.09.2026 vor dem Abschluss – auf
   Marcs Wunsch entfernt, Sicherung *.vor-hardware. Das Bild liegt weiter in
   assets/bilder/kibox/. */

/* Das dunkle Zahlenband (1 Datei, 0 Kundendokumente, 6 Stationen, 1.000 Boxen)
   stand bis zum 14.09.2026 zwischen Hardware und Abschluss – auf Marcs Wunsch
   entfernt, die Seite soll Nutzen erzählen, nicht zählen. */

/* --------------------------------------------------------------------------
   Abschluss
   -------------------------------------------------------------------------- */
.kb-final .kb-held { width: min(100%, 640px); margin: 0 auto 8px; }
.kb-final .kb-held-innen { transform: perspective(var(--kb-tiefe)) rotateX(calc(14deg - var(--p, 0) * 20deg)); }
.kb-final .lead { margin-bottom: 2em; }
.kb-final .cta-row { justify-content: center; }
.kb-final .kb-klein { margin: 18px 0 0; font-size: .82rem; color: var(--blass); }

/* --------------------------------------------------------------------------
   Rücksichten
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .kb-held-innen,
  .kb-portal,
  .kb-bleibt .kb-held-innen,
  .kb-prozess-film .kb-held-innen,
  .kb-final .kb-held-innen,
  .js .kb-sec > .wrap,
  .js .kb-sec > .wrap-wide { transform: none !important; }
  .kb-platte { transform: translateZ(calc(var(--i) * 40px)); transition: none; }
  .js .kb-blende { clip-path: none; transition: opacity 200ms linear; }
  .js .rv .kb-schritt, .js .kb-portal .kb-kachel { translate: none; transition: opacity 200ms linear; }
}

/* ==========================================================================
   Die Liste – der Dialog hinter „Auf die Liste setzen" (14.09.2026)

   Bis dahin führte der Knopf auf ein mailto; das ließ den Interessenten mit
   einem leeren Postfachfenster allein. Jetzt öffnet er ein kurzes Formular
   im <dialog> – gebaut wie der Rabatt-Vorhang der Startseite (.rab in
   site.css), nur einspaltig und schmaler: Es gibt hier nichts anzupreisen,
   nur einzutragen. Felder, Haken, Honigfalle, Fehlerzeile und der fertige
   Zustand nehmen die .rab-Klassen aus site.css; hier steht allein der
   Kasten, die Vorzeile auf hellem Grund und die Bereichswahl.
   ========================================================================== */
.kbl {
  width: min(520px, calc(100vw - 28px));
  max-height: calc(100dvh - 28px);
  padding: 0;
  border: 0;
  border-radius: var(--r-card);
  background: var(--weiss);
  color: var(--tinte);
  box-shadow: var(--sh-4);
  overflow: hidden;
}
.kbl::backdrop {
  background: rgba(24, 40, 48, .52);
  backdrop-filter: blur(3px);
}
@media (prefers-reduced-motion: no-preference) {
  .kbl {
    opacity: 0;
    transform: translateY(14px) scale(.985);
    transition: opacity var(--t-base) var(--ease),
                transform var(--t-base) var(--ease),
                overlay var(--t-base) allow-discrete,
                display var(--t-base) allow-discrete;
  }
  .kbl[open] { opacity: 1; transform: none; }
  @starting-style { .kbl[open] { opacity: 0; transform: translateY(14px) scale(.985); } }
  .kbl::backdrop {
    opacity: 0;
    transition: opacity var(--t-base) var(--ease),
                overlay var(--t-base) allow-discrete,
                display var(--t-base) allow-discrete;
  }
  .kbl[open]::backdrop { opacity: 1; }
  @starting-style { .kbl[open]::backdrop { opacity: 0; } }
}

.kbl-in {
  max-height: inherit;
  padding: 30px 28px 26px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 480px) { .kbl-in { padding: 26px 18px 22px; } }

/* Die Vorzeile von .rab-eyebrow ist für die dunkle Spalte gemacht (weiß);
   hier steht sie auf Weiß, also in der Leuchtfarbe. */
.kbl-eyebrow { color: var(--leucht-tief); }
.kbl-titel {
  margin: 0 0 6px;
  font-size: 1.36rem;
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.15;
}
.kbl .rab-vor {
  margin: 0 0 18px;
  font-size: .86rem;
  line-height: 1.5;
  color: var(--gedaempft);
}
.kbl .rab-feld > span em { font-style: normal; font-weight: 500; color: var(--blass); }
/* Unter 400 px stehen Vor- und Nachname untereinander – zwei Felder in einer
   Reihe wären dort je 130 px schmal. */
@media (max-width: 400px) { .kbl .rab-reihe { grid-template-columns: 1fr; gap: 0; } }

/* --- Die Bereichswahl: vier Chips, einer leuchtet ------------------------
   Das Radio selbst liegt unsichtbar im Chip; sein Zustand färbt über :has
   den Chip. Browser ohne :has (vor 2023) zeigen vier gleiche Chips, gewählt
   wird trotzdem – die Vorgabe „Agentur" steht im HTML. */
.kbl-wahl {
  margin: 4px 0 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.kbl-wahl legend {
  display: block;
  margin-bottom: 6px;
  padding: 0;
  font-size: .76rem;
  font-weight: 600;
  color: var(--gedaempft);
}
.kbl-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin: 0 6px 6px 0;
  padding: 7px 13px;
  border-radius: var(--r-pill);
  background: var(--grund);
  box-shadow: inset 0 0 0 1px var(--rand);
  color: var(--tinte);
  font-size: .84rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.kbl-chip input {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.kbl-chip:hover { background: var(--weiss); box-shadow: inset 0 0 0 1px var(--leucht-rand); }
.kbl-chip:has(input:checked) {
  background: var(--leucht-hauch);
  box-shadow: inset 0 0 0 1px var(--leucht-rand);
  color: var(--leucht-tief);
}
.kbl-chip:has(input:focus-visible) { outline: 3px solid var(--ak); outline-offset: 2px; }

.kbl .rab-haken { margin-top: 12px; }
.kbl .rab-fertig { padding: 8px 0 0; }
.kbl .rab-fertig h3 { font-size: 1.12rem; }