/* ==========================================================================
   Agentur Dashboard – Werbeseite

   Helle Ebene in der Formensprache des Dashboards („Look B“): flach, dicht,
   kühl-neutral. Blaugrau trägt die Oberfläche, Rot ist die Ausnahme, die
   Radien sind 12/8/6, dieselbe Schrift (Plus Jakarta Sans, selbst
   ausgeliefert). Eine Werbeseite darf mehr Luft und größere Typografie haben
   als eine Arbeitsfläche – die Farben und Formen bleiben aber dieselben.
   ========================================================================== */

:root {
  /* Flächen – wie im Dashboard */
  --grund:     #f3f5f6;   /* Arbeitsfläche */
  --weiss:     #fff;
  --grund-tief:#eaeef0;   /* für abgesetzte Bänder */
  --rand:      #e3e8ea;
  --rand-hell: #eef2f3;

  /* Schrift */
  --tinte:     #22282c;
  --gedaempft: #6b767c;
  --blass:     #a2abb0;

  /* Akzente */
  --ak:        #7691a0;
  --ak-tief:   #5c7482;
  --ak-hell:   #9fb3bd;
  --ak-hauch:  rgba(118,145,160,.12);
  --rot:       #f03c1e;

  /* Ein einziges klares Blau, gesättigter als der Akzent – für genau EIN Wort
     je Überschrift (14.08.2026: von der Bühne auf alle Abschnitte ausgeweitet).
     Die Regel bleibt „eins": zwei blaue Wörter in derselben Überschrift heben
     nichts mehr hervor. Der Ton ist der Markenblauton von Superchat
     (#00a2ef) – heller und cyanstichiger als das alte #1f6fd0, deshalb steht
     er nur auf Überschriftengrößen (ab 1,6 rem, 700) und nie im Fließtext. */
  --leucht:    #00a2ef;
  /* Eine Spur tiefer, nur für gefüllte Flächen: Weiß auf dem reinen --leucht
     liegt bei 2,8 : 1 – für Überschriften tragbar, für ein weißes Zeichen auf
     kleiner Fläche zu wenig. Die Zeichenkacheln laufen deshalb von --leucht
     nach --leucht-tief (14.08.2026: vorher blaugrau, --ak-hell → --ak-tief). */
  --leucht-tief: #0384c3;

  /* Die Löwenmarke: derselbe Blauton wie die Oberfläche, nur tiefer und etwas
     gesättigter – hell oben in der Mähne, tief unten am Gesicht. Das Zeichen
     bleibt damit ein Zeichen und wird nicht für ein Bedienelement gehalten.
     Dieselben zwei Werte stehen in bilder/mockups.html, damit die Marke in
     den Produktaufnahmen genauso aussieht wie in der Kopfleiste. */
  --marke-hell:#9cb8c6;
  --marke-tief:#33586e;
  --marke-tief2:#22475c;   /* eine Stufe dunkler, nur für Hover */

  /* Die Kanäle trugen hier einmal IHRE Farbe (WhatsApp grün, Messenger blau,
     Instagram violett). Am 14.08.2026 wieder heraus – Marc: „sieht alles zu
     bunt aus". Im Orbit-Bild ist jeder Trabant --marke-tief, rot bleibt allein
     „Leads". Wer sie zurückholt, tut das in marke/bauen.py (kanalfarben). */

  /* Radien und Erhebung – die Leiter des Dashboards */
  --r-card: 12px;
  --r:      8px;
  --r-s:    6px;
  --r-pill: 980px;
  --sh-1: 0 1px 2px rgba(24,40,48,.05);
  --sh-2: 0 3px 10px -4px rgba(24,40,48,.18);
  --sh-3: 0 18px 40px -22px rgba(24,40,48,.45);
  --sh-4: 0 40px 80px -34px rgba(24,40,48,.5);

  --ease:    cubic-bezier(.23,1,.32,1);
  --ease-io: cubic-bezier(.77,0,.175,1);
  /* Weicher als --ease: kein harter Ausschlag am Anfang, dafür ein langes
     Auslaufen. Für Bewegungen, die unter dem Zeiger entstehen und wieder
     vergehen – dort fällt jeder Ruck sofort auf. */
  --ease-weich: cubic-bezier(.25,.6,.25,1);
  --t-fast: 140ms;
  --t-base: 260ms;
  --t-slow: 640ms;

  --spur:   1180px;
  --spur-w: 1340px;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--grund);
}

body {
  margin: 0;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--tinte);
  background: var(--grund);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;               /* nicht hidden: das bräche das Scrollen */
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* Nur für die Vorlesehilfe – nicht `display: none`, denn Verborgenes wird
   auch nicht vorgelesen. Ein Bildpunkt an einer abgeschnittenen Stelle. */
.nur-vorlesen {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

:focus-visible {
  outline: 2px solid var(--ak);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap      { width: min(100% - 44px, var(--spur));   margin-inline: auto; }
.wrap-wide { width: min(100% - 32px, var(--spur-w)); margin-inline: auto; }

/* --------------------------------------------------------------------------
   Typografie – Laufweite hängt an der Größe, nie ein Wert für alle
   -------------------------------------------------------------------------- */

.display {
  font-size: clamp(2.5rem, 6.6vw, 4.9rem);
  line-height: 1.05;
  letter-spacing: -.035em;
  font-weight: 700;
  margin: 0 0 .5em;
}
.display.sm { font-size: clamp(2.1rem, 5.2vw, 3.7rem); }

.head {
  font-size: clamp(1.9rem, 4.2vw, 3.1rem);
  line-height: 1.09;
  letter-spacing: -.028em;
  font-weight: 700;
  margin: 0 0 .45em;
}
.head.sm { font-size: clamp(1.6rem, 3.2vw, 2.4rem); }

.dim { color: var(--blass); }
.leucht { color: var(--leucht); }

/* Die Vorzeile trägt seit dem 14.08.2026 eine kurze Akzentlinie: Sie hängt
   sonst frei über der Überschrift, und die Abschnitte beginnen alle gleich
   ohne jedes Zeichen. Die Linie ist so lang wie ein Buchstabe hoch ist –
   mehr wäre eine Verzierung, weniger sähe nach Versehen aus. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ak);
  margin: 0 0 1.1em;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--ak-hell), var(--ak));
  flex: none;
}
/* Wo der Abschnitt mittig steht (Bühne, Orbit), rückt die Vorzeile samt Linie
   mit in die Mitte – sonst hängt sie als einzige Zeile am linken Rand, während
   Überschrift und Fließtext mittig stehen. Das Merkmal ist die Fläche mit
   `text-align: center`, nicht der Abschnitt: kommt eine dazu, gehört sie hier
   in die Liste. */
.stage-in .eyebrow,
.sec-orbit .eyebrow { justify-content: center; }

.lead {
  font-size: clamp(1.02rem, 1.6vw, 1.32rem);
  line-height: 1.5;
  letter-spacing: -.012em;
  color: var(--gedaempft);
  max-width: 42ch;
  margin: 0 auto 2.2em;
}

.sub {
  font-size: clamp(.98rem, 1.3vw, 1.12rem);
  line-height: 1.62;
  letter-spacing: -.006em;
  color: var(--gedaempft);
  max-width: 58ch;
  margin: 0 0 3.2em;
}

/* --------------------------------------------------------------------------
   Kopfleiste – helle Materialschicht, Inhalt läuft darunter durch
   -------------------------------------------------------------------------- */

.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: 54px;
  background: rgba(255,255,255,.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: background var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease);
}
.nav.is-ab {
  background: rgba(255,255,255,.88);
  border-bottom-color: var(--rand);
  box-shadow: 0 1px 12px -6px rgba(24,40,48,.35);
}

.nav-in {
  width: min(100% - 32px, var(--spur-w));
  margin-inline: auto;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 22px;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: .94rem;
  font-weight: 700;
  letter-spacing: -.014em;
  white-space: nowrap;
}
/* .nav-mark steht weiter unten im Abschnitt „Marke“ – sie ist die Löwenmaske. */

.nav-links {
  display: flex;
  gap: 24px;
  margin-inline: auto;
  font-size: .84rem;
  color: var(--gedaempft);
}
.nav-links a { position: relative; padding: 4px 0; transition: color var(--t-fast) var(--ease); }
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--ak);
  scale: 0 1;
  transform-origin: left;
  transition: scale var(--t-base) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .nav-links a:hover { color: var(--tinte); }
  .nav-links a:hover::after { scale: 1 1; }
}
/* Wo man gerade steht: Der Balken unter dem Menüpunkt wächst aus der Mitte,
   damit er nicht mit dem Balken beim Überfahren verwechselt wird (der läuft
   von links). Ohne JavaScript ist er nie gesetzt – dann fehlt nur die Anzeige. */
.nav-links a.is-hier { color: var(--tinte); }
.nav-links a.is-hier::after { scale: 1 1; transform-origin: center; }

/* Knöpfe */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  border-radius: var(--r-pill);
  padding: 12px 24px;
  font: inherit;
  font-size: .96rem;
  font-weight: 600;
  letter-spacing: -.008em;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              box-shadow var(--t-base) var(--ease);
}
.btn:active { transform: scale(.97); }
.btn-sm { padding: 6px 15px; font-size: .82rem; }

.btn-fill  { background: var(--ak); color: #fff; box-shadow: var(--sh-1); }
.btn-ghost { background: var(--weiss); color: var(--ak-tief); box-shadow: inset 0 0 0 1px var(--rand), var(--sh-1); }
.btn-linie { background: transparent; color: var(--ak-tief); box-shadow: inset 0 0 0 1px var(--ak-hell); }

/* Im Signalblau stehen nur die Stellen, die eine WAHL anzeigen: „Jetzt kaufen"
   in der Kopfleiste (soll zum blauen „orbit" daneben gehören und aus der grauen
   Leiste stechen) und im Kaufabschnitt die vier Marken des gewählten Wegs –
   das Schildchen der aktiven Betriebsart, die Fahne der empfohlenen Stufe und
   der Knopf „Ausgewählt" (14.08.2026, Marcs Vorgabe). Dazu `.btn-kasse` am Fuß
   der Rechnung: derselbe Weg, nur sein letzter Schritt – er soll dieselbe Farbe
   tragen wie der Knopf, mit dem die Wahl oben begonnen hat. Das sind ZWEI
   Knöpfe mit einer Klasse: „Zur Kasse" in index.html und „Bestellung
   abschließen" in bestellung.php. Beide sitzen in derselben Rechnungskachel
   (`.re-*`) – sie hier zu trennen hieße, dieselbe Kachel auf zwei Seiten
   verschieden zu färben. Dazu seit 14.08.2026 `.btn-kaufen`: der Knopf „Online
   kaufen" in der Bühne und im Abschluss – derselbe Weg wie in der Kopfleiste,
   nur groß; die zwei Knöpfe daneben („Module ansehen", „Vorführung anfragen")
   bleiben hell und ungefüllt, damit im Blickfeld genau EIN blauer Knopf steht.
   Verlauf wie bei den Zeichenkacheln (--leucht →
   --leucht-tief), nicht das reine --leucht: Weiß darauf läge bei 2,8 : 1, auf
   --leucht-tief bei 4,1 : 1. Alle übrigen gefüllten Knöpfe bleiben in --ak,
   sonst schreit die ganze Seite. */
.nav .btn-fill,
.pk-waehlen.btn-fill,
.btn-kasse.btn-fill,
.btn-kaufen.btn-fill {
  background: linear-gradient(150deg, var(--leucht), var(--leucht-tief));
}

@media (hover: hover) and (pointer: fine) {
  /* HIER STAND `background: var(--leucht-tief)` – heraus am 14.08.2026.
     `background-image` lässt sich NICHT überblenden: der Verlauf verschwand
     schlagartig, während die Farbe darunter weich nachzog. Unter dem
     Lichtstreif las sich das als Zucken. Diese beiden Knöpfe behalten ihren
     Verlauf beim Überfahren also unverändert; die Antwort geben Schatten,
     der Millimeter Hub und der Streif. */
  .btn-fill:hover  { background: var(--ak-tief); box-shadow: var(--sh-2); transform: translateY(-1px); }
  /* Die Verlaufsknöpfe erben Schatten und Hub, nicht die Farbe. */
  .nav .btn-fill:hover,
  .pk-waehlen.btn-fill:hover,
  .btn-kasse.btn-fill:hover,
  .btn-kaufen.btn-fill:hover {
    background: linear-gradient(150deg, var(--leucht), var(--leucht-tief));
  }
  .btn-ghost:hover { box-shadow: inset 0 0 0 1px var(--ak-hell), var(--sh-2); transform: translateY(-1px); }
  .btn-linie:hover { background: var(--ak-hauch); }
  .btn:hover .chev { transform: translateX(3px); }
}
.chev { display: inline-block; transition: transform var(--t-fast) var(--ease); }

/* --------------------------------------------------------------------------
   Zugang zur Verwaltung – das Zahnrad in der Kopfleiste

   Ein <details>: das Feld klappt auch ohne JavaScript auf, das Formular geht
   auch ohne JavaScript hinaus. site.js legt nur Esc, Klick daneben und den
   Fokus dazu. Der Knopf trägt `.btn .btn-sm .btn-fill` und steht damit im
   Signalblau der Kopfleiste (der Verlauf kommt aus `.nav .btn-fill`) – er ist
   ein Weg wie „Jetzt kaufen", nur der kurze. Rund und schmal statt Pille mit
   Beschriftung, damit die Leiste nicht zwei gleich große blaue Flächen zeigt.
   Diese Regeln stehen NACH `.btn-sm`, sonst gewinnt dessen padding.
   -------------------------------------------------------------------------- */

.vwlog { position: relative; flex: none; }

.vwlog-knopf {
  width: 30px; height: 30px;
  padding: 0;
  border-radius: 50%;
  justify-content: center;
  list-style: none;          /* Firefox: das Dreieck des <summary> */
  color: #fff;
}
.vwlog-knopf::-webkit-details-marker { display: none; }   /* Safari */
.vwlog-ic {
  width: 16px; height: 16px;
  flex: none;                /* im Flexverbund nie zusammendrücken lassen */
  display: block;
  transition: rotate var(--t-base) var(--ease);
}
/* Die einzige Bewegung des Knopfes: das Rad dreht sich beim Aufklappen um
   einen Zahn (45° / 8 Zähne) und bleibt dann stehen. Beim Überfahren ebenso –
   die Farbe antwortet nicht, sie ist schon die Signalfarbe. */
.vwlog[open] .vwlog-ic { rotate: 45deg; }
@media (hover: hover) and (pointer: fine) {
  .vwlog-knopf:hover .vwlog-ic { rotate: 45deg; }
}

.vwlog-feld {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 2;
  width: 258px;
  padding: 16px;
  border-radius: var(--r-card);
  background: var(--weiss);
  box-shadow: inset 0 0 0 1px var(--rand), var(--sh-3);
}
/* Das Näschen zeigt auf den Knopf – zwei gedrehte Kanten, damit es die
   Haarlinie der Kachel fortsetzt statt sie zu durchstoßen. */
.vwlog-feld::before {
  content: "";
  position: absolute;
  top: -6px; right: 9px;
  width: 12px; height: 12px;
  rotate: 45deg;
  background: var(--weiss);
  border-left: 1px solid var(--rand);
  border-top: 1px solid var(--rand);
  border-radius: 3px 0 0 0;
}
.vwlog-form { display: grid; gap: 8px; }
.vwlog-titel {
  margin: 0;
  font-size: .95rem; font-weight: 700;
  letter-spacing: -.012em;
  color: var(--tinte);
}
.vwlog-label {
  font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--gedaempft);
}
.vwlog-eingabe {
  font: inherit; font-size: .95rem;
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--rand);
  border-radius: var(--r);
  background: var(--weiss);
  color: var(--tinte);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.vwlog-eingabe:focus {
  outline: 0;
  border-color: var(--ak);
  box-shadow: 0 0 0 3px var(--ak-hauch);
}
.vwlog-los { justify-content: center; margin-top: 2px; }
.vwlog-fuss { margin: 2px 0 0; font-size: .74rem; color: var(--gedaempft); }

@media (prefers-reduced-motion: reduce) {
  .vwlog-ic { transition: none; }
}

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.stage .cta-row, .final .cta-row { justify-content: center; }

/* --------------------------------------------------------------------------
   Parallaxe-Ebenen – reine Zier, liegen hinter allem
   -------------------------------------------------------------------------- */

.par-schicht {
  position: absolute;
  inset: -10% 0 -10%;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  will-change: transform;
}
.b1 { top: -140px; left: 8%;  width: 620px; height: 520px; background: rgba(118,145,160,.22); }
.b2 { top: 120px;  right: 2%; width: 520px; height: 480px; background: rgba(240,60,30,.055); }
.b3 { top: -80px;  left: 50%; width: 760px; height: 520px; translate: -50% 0; background: rgba(118,145,160,.18); }

/* Feines Punktraster wie im WhatsApp-Verlauf, nur größer */
.raster-flaeche {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(34,40,44,.075) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(70% 55% at 50% 32%, #000 40%, transparent 78%);
  -webkit-mask-image: radial-gradient(70% 55% at 50% 32%, #000 40%, transparent 78%);
  will-change: transform;
}

/* --------------------------------------------------------------------------
   Bühne
   -------------------------------------------------------------------------- */

.stage {
  position: relative;
  padding: clamp(118px, 16vh, 180px) 0 clamp(24px, 4vw, 48px);
  overflow: clip;
}
/* Ein sehr weicher Lichtschein von oben: Er schließt die Bühne an die helle
   Kopfleiste an und gibt der Mitte Tiefe, ohne eine Kante zu ziehen. Weiß mit
   Deckung statt deckendem Weiß – der Löwe dahinter soll durchscheinen. */
.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;
}
.stage-in { position: relative; z-index: 1; text-align: center; }

/* --------------------------------------------------------------------------
   Produktaufnahmen – das Notebook

   Die Aufnahmen stehen nicht mehr in einem gezeichneten Fensterrahmen,
   sondern in einem echten Gerät – Deckel (mit LEERER Scheibe) und Sockel,
   dazwischen liegt die Bildschirmaufnahme.

   SEIT DEM 14.08.2026 IST DAS NOTEBOOK GEZEICHNET, nicht mehr aus einer
   Vorlage freigestellt. Es kommt zusammen mit dem Arbeitsplatz aus
   `bilder/geraete_bauen.php`: dieselbe Kamera, dieselben Verläufe, dieselbe
   Formensprache – und keine fremde Vorlage mehr. Vorher war es Marcs
   `bilder/macbook.png`, mit KI erzeugt; das sah neben der gezeichneten
   Grafik nach Foto aus, und beides nebeneinander verriet den Bruch.

   ZWEI TEILE, WEIL SICH DER DECKEL BEWEGT. Beim Erscheinen klappt er um
   das Scharnier auf, der Sockel bleibt stehen. Genau das ist der Blick,
   um den es geht: nicht ein Bild von einem Rechner, sondern der Moment,
   in dem man sich davorsetzt und ihn aufklappt. Der Sockel zeigt jetzt
   Tastatur und Trackpad – beim Aufklappen kommt also etwas zum Vorschein.

   ALLE PROZENTWERTE SIND GERECHNET, nicht geschätzt. geraete_bauen.php
   schreibt sie am Ende seines Laufs hin; ändern sich die Maße dort, kommen
   sie von dort. Nicht von Hand nachbessern.

   Was WO liegt (Bühne = 1860 × 1570):

     .nb            stellt den Raum bereit, trägt Schatten und Licht
      .nb-raum      die Fluchtlinie (perspective) – hier sitzt das Auge
       .nb-korpus   das ganze Gerät (steht still, siehe unten)
        ::before    der Sockel
        .nb-deckel  der Deckel, dreht um das Scharnier
         .nb-scheibe  die Aufnahme + Glanz
         ::after      die Blende: schwarzer Rand, Kinn, Aluminium

   VIER GERÄTE, VIER VERHALTEN (Wunsch des Nutzers, 14.08.2026):

     1  Bühne       KEIN NOTEBOOK MEHR, sondern der Arbeitsplatz – siehe
                    „Der Arbeitsplatz“ weiter unten. Damit ist auch das
                    Aufklappen weg: ein Bildschirm klappt nicht.
     2  Planen      AUCH KEIN NOTEBOOK MEHR, sondern der ZWEITE Arbeitsplatz
                    (`.mon-b`): gerade Maus, kleiner Rechner links, Tastatur
                    nach rechts gerückt. Steht still wie jeder Bildschirm.
     3  Arbeiten    das letzte Notebook. Es steht offen da – und seit dem
                    14.08.2026 auch STILL: die Tellerdrehung ist weg.
     4  Auswerten   ebenfalls der Arbeitsplatz, still.

   ES BLEIBT ALSO EIN NOTEBOOK, in der Mitte der Seite, und es bewegt sich
   nicht mehr. Alles, was hier nach „Bühne“ klingt, gilt nur noch für die
   Größe des Rahmens (`.shot-gross`), nicht mehr für ein Notebook.
   -------------------------------------------------------------------------- */

.shot { position: relative; z-index: 1; margin: 0; }
.shot-gross { margin-top: clamp(40px, 5vw, 72px); }

.nb {
  position: relative;
  aspect-ratio: 1860 / 1570;
}
/* Das Auge sitzt vor dem Gerät und etwas darüber – deshalb steht der
   Fluchtpunkt nicht in der Mitte, sondern auf Höhe der oberen Bildkante.
   Der Wert ist die halbe Miete des ganzen Eindrucks: rückt er in die
   Mitte, sieht man das Notebook wieder von vorn wie im Katalog.

   3200 px stammen aus der Zeit der Tellerdrehung: Mit 1000 px war die
   Fluchtlinie so kurz, dass sie das Gerät nicht drehte, sondern abknickte –
   Deckel und Sockel liefen in verschiedene Fluchten, und der Bildschirm
   bekam eine schiefe Kante. Der Wert BLEIBT, obwohl sich seit dem
   14.08.2026 nichts mehr dreht: Er bestimmt weiterhin, wie stark die Lehne
   des Deckels den Bildschirm verzieht, und flacher hieße hier stärker.
   (Die Bühne hatte als einzige eine kürzere Linie, zuletzt 1750 px; seit
   dort der Arbeitsplatz steht, gibt es diesen Sonderfall nicht mehr.) */
.nb-raum {
  position: absolute;
  inset: 0;
  perspective: 3200px;
  perspective-origin: 50% 18%;
}

/* HIER STAND DIE TELLERDREHUNG (`rotateY(var(--nb-y))`, von site.js in jedem
   Bild neu gesetzt, dazu ein kurzer Übergang als Dämpfung). Sie ist am
   14.08.2026 weg – siehe die Notiz in site.js. Der Korpus bleibt als eigene
   Ebene bestehen: Er hält Sockel und Deckel im selben 3D-Raum zusammen,
   damit der Deckel um sein Scharnier lehnen kann. */
.nb-korpus {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

/* Der Sockel. Er steht still, auch wenn der Deckel klappt. */
.nb-korpus::before {
  content: "";
  position: absolute;
  left: 0; top: 66.8790%;
  width: 100%; height: 33.1210%;
  background-image: url("bilder/notebook-sockel.png");
  background-image: image-set(url("bilder/notebook-sockel.webp") type("image/webp"),
                              url("bilder/notebook-sockel.png")  type("image/png"));
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.nb-deckel {
  position: absolute;
  left: 6.0215%; top: 0;
  width: 87.9570%; height: 68.0255%;
  transform-origin: 50% 100%;              /* das Scharnier: die Unterkante */
  transform: rotateX(var(--nb-lehne, 6deg));
}
/* HIER STAND DAS AUFKLAPPEN (−58° → 6° in 2,2 s), und es ist am 14.08.2026
   mit dem Notebook von der Bühne verschwunden: Dort steht jetzt der
   Arbeitsplatz, und ein Bildschirm klappt nicht auf. In den Abschnitten hat
   es nie gegolten – einmal beim Ankommen ist ein Auftritt, dreimal auf einer
   Seite ist ein Tick. Beide verbliebenen Deckel stehen deshalb von Anfang an
   offen, auf der Lehne von 6°. */

/* Die Blende liegt ÜBER der Aufnahme – der schwarze Rand deckt deren
   Kanten ab. Deshalb darf die Scheibe darunter ruhig etwas größer sein
   als das Loch; ein halber Bildpunkt Versatz blitzt so nie auf. */
.nb-deckel::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("bilder/notebook-deckel.png");
  background-image: image-set(url("bilder/notebook-deckel.webp") type("image/webp"),
                              url("bilder/notebook-deckel.png")  type("image/png"));
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}

.nb-scheibe {
  position: absolute;
  left: 1.1002%; top: 2.6217%;
  width: 97.7995%; height: 93.6330%;
  overflow: hidden;
  background: var(--grund);      /* steht da, bevor die Aufnahme geladen ist */
}

/* HIER SASS EINE FENSTERLEISTE mit den drei Punkten und der Adresse
   „agentur.example.de/dashboard“, und sie ist auf Wunsch weg: Über der
   Kopfzeile der Anwendung standen damit ZWEI Balken übereinander – der der
   Anwendung und ein zweiter, der nur behauptete, das Ganze laufe in einem
   Browser. Zwei Leisten übereinander sehen unsauber aus, und dass das
   Dashboard eine Webanwendung ist, sagt die Seite an genug anderen Stellen.

   Damit füllt die Aufnahme die Scheibe GENAU: Beide messen 16:10, seit die
   Scheibe gezeichnet wird sogar auf den Bildpunkt (das Loch ist 1600 × 1000
   Einheiten groß, bei Maßstab 2 also 3200 × 2000 – die Größe der Aufnahme).
   Deshalb steht hier auch kein Spielraum mehr für ein Wandern beim
   Scrollen – siehe die Notiz in site.js. */
.nb-scheibe picture { display: block; }
.nb-scheibe img { width: 100%; height: auto; }

/* Glas. Sehr zurückhaltend – die Aufnahme muss LESBAR bleiben, sie ist das
   Argument der Seite und keine Kulisse. Was den Eindruck macht, ist nicht
   der helle Streif, sondern die dunkle Kante ringsum: ein Bildschirm liegt
   hinter Glas und ein wenig tiefer als sein Rahmen.

   Dieselbe Scheibe steckt im Arbeitsplatz weiter unten – Glas ist Glas, und
   zwei Beschreibungen desselben Glases liefen früher oder später
   auseinander. */
.nb-glanz, .mon-glanz {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(101deg,
      transparent 30%,
      rgba(255,255,255,.30) 41%,
      rgba(255,255,255,.06) 49%,
      transparent 57%),
    linear-gradient(101deg,
      transparent 63%,
      rgba(255,255,255,.14) 70%,
      transparent 77%),
    linear-gradient(180deg, rgba(190,208,218,.20), transparent 14%);
  box-shadow:
    inset 0 0 0 1px rgba(20,32,40,.16),
    inset 0 14px 26px -18px rgba(16,26,34,.55),
    inset 0 -10px 22px -18px rgba(16,26,34,.35);
}

/* --- Der Grund, auf dem das Gerät steht -----------------------------------
   ZWEI Lagen: der weite Umgebungsschatten und davor das Licht, das der
   Bildschirm auf die Fläche wirft. Die dritte – die schmale dunkle Naht, mit
   der der Sockel den Tisch berührt – ist seit dem 14.08.2026 in der
   Zeichnung selbst: Sie folgt dort der Kante des Sockels und nicht mehr nur
   ungefähr einer Ellipse. Genau dasselbe gilt beim Arbeitsplatz weiter unten.

   Beide sind ELLIPSEN MIT WEICHZEICHNER, keine Verläufe in großen Kästen:
   Ein `radial-gradient` füllt seinen Kasten, und ein Kasten, der breit genug
   für den Schatten ist, macht den Schatten in der Mitte automatisch zu hoch.
   So steht die Form dort, wo sie hingehört, und der Weichzeichner macht den
   Rest. */
.nb-boden, .nb-schein {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.nb-boden {
  left: -5%; right: -5%; top: 96.4%; height: 7%;
  background: rgba(24,40,48,.13);
  filter: blur(var(--nb-weich, 24px));
}
/* Der Lichtteller darf NICHT bis zur Bildunterschrift reichen – dort
   stünde die Zeile dann auf einer weißen Wolke statt auf dem Grund. Er
   liegt deshalb im Schatten drin, nicht darunter. */
.nb-schein {
  left: 24%; right: 24%; top: 97.6%; height: 3.2%;
  background: rgba(255,255,255,.62);
  filter: blur(calc(var(--nb-weich, 24px) * .6));
}
/* Beide verbliebenen Notebooks stehen halbbreit in einem Abschnitt; die
   Regel heißt weiter `:not(.shot-gross)`, weil in dem großen Rahmen jederzeit
   wieder eines stehen könnte. */
.shot:not(.shot-gross) .nb { --nb-weich: 14px; }

/* ==========================================================================
   DER ARBEITSPLATZ (Bühne, „Planen" und „Auswerten")

   Er steht seit dem 14.08.2026 an DREI Stellen: unten im Abschnitt
   „Auswerten“, wo bis dahin das vierte Notebook stand, oben auf der Bühne,
   wo bis dahin das aufklappende Notebook stand, und in „Planen“. Dasselbe
   Gerät in zwei Größen – die Bühne trägt `.shot-gross` – und mit zwei
   Tischen: „Planen“ bekommt mit `.mon-b` den zweiten (siehe unten), damit
   nicht wieder dreimal dieselbe Grafik auf der Seite steht.

   Es ist ein BILDSCHIRM MIT TASTATUR UND MAUS – gezeichnet von
   bilder/geraete_bauen.php, gerendert von bilder/geraete_rendern.sh – aus
   derselben Quelle wie das Notebook oben:

     assets/bilder/monitor-blende.webp   Gehäuse mit LEERER Scheibe
     assets/bilder/monitor-tisch.webp    Fuß, Tastatur und Maus darunter
     assets/bilder/monitor2-tisch.webp   derselbe Tisch anders möbliert –
                                         gerade Maus mit Rad und ein kleiner
                                         Rechner links; nur für `.mon-b`

   WARUM ZWEI TEILE, obwohl sich hier nichts bewegt: Die Blende braucht ein
   Loch, hinter dem die Bildschirmaufnahme liegt. Alles unterhalb des
   Gehäuses ist dagegen EIN Bild – Tastatur und Maus stehen vor dem Fuß und
   überschneiden ihn; in zwei Bildern müsste diese Überschneidung hier
   nachgestellt werden. Beide Teile sind so breit wie die Bühne, deshalb
   steht hier nirgends eine Rechnung für links und breit.

   ES STEHT STILL, und das ist nicht „nichts tun": Ohne `perspective` und
   ohne Drehung geht die Grafik gar nicht erst durch die räumliche
   Umrechnung, sondern liegt genau auf dem Bildpunktraster – die Kanten sind
   dadurch die saubersten der vier Aufnahmen. Aufklappen könnte ein
   Bildschirm ohnehin nicht.

   ALLE PROZENTWERTE SIND GERECHNET, nicht geschätzt: geraete_bauen.php
   schreibt sie am Ende seines Laufs hin. Ändern sich die Maße dort, kommen
   sie von dort. Nicht von Hand nachbessern.
   -------------------------------------------------------------------------- */

.mon {
  position: relative;
  aspect-ratio: 1672 / 1570;
}
/* Die Bühne steht nicht auf der vollen Spurbreite: Ein Gerät, das von Kante
   zu Kante reicht, wirkt wie ein Fenster und nicht mehr wie ein Gegenstand,
   der irgendwo steht. Dazu eine feste Obergrenze – auf breiten Schirmen wuchs
   das Gerät sonst einfach mit, dabei hat ein Ding auf einem Tisch eine eigene
   Größe, die nicht vom Fenster abhängt. Beides stand vorher beim Notebook und
   ist mit der Bühne hierher gewandert. */
.shot-gross .mon { width: min(54%, 700px); margin-inline: auto; }

/* Der Tisch steht VOR der Blende im Baum, damit die Blende ihn überdeckt:
   Der Hals beginnt hinter der Unterkante des Gehäuses, und genau dieses
   Stück Überlappung hält die Naht dicht. */
.mon-tisch {
  position: absolute;
  left: 0; top: 68.7898%;
  width: 100%; height: 31.2102%;
  background-image: url("bilder/monitor-tisch.png");
  background-image: image-set(url("bilder/monitor-tisch.webp") type("image/webp"),
                              url("bilder/monitor-tisch.png")  type("image/png"));
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* DER ZWEITE ARBEITSPLATZ (Abschnitt „Planen"). Dasselbe Gehäuse, ein anderer
   Tisch: die Maus steht GERADE und hat Tastenfuge, Rad und Quernaht, links
   unter dem Bildschirm steht ein kleiner Rechner, und die Tastatur ist dafür
   nach rechts gerückt. Zwei Arbeitsplätze auf einer Seite dürfen nicht
   dieselbe Grafik sein – dasselbe Argument, das vorher die drei gleichen
   Notebooks erledigt hat.

   Der Ausschnitt ist Bildpunkt für Bildpunkt derselbe (geraete_bauen.php,
   MO_TISCH_O gilt für beide), deshalb steht hier nur EIN ausgetauschtes Bild
   und keine zweite Rechnung. */
.mon-b .mon-tisch {
  background-image: url("bilder/monitor2-tisch.png");
  background-image: image-set(url("bilder/monitor2-tisch.webp") type("image/webp"),
                              url("bilder/monitor2-tisch.png")  type("image/png"));
}

/* DAS BETRIEBSLICHT AN DIESEM RECHNER BLINKT GRÜN.

   Es steckt in der Grafik als blasse Lampe ohne Farbe – ein Hintergrundbild
   kann nicht blinken, also liegt hier ein zweiter, grüner Punkt genau darauf.
   Er ist WEITER als die gezeichnete Lampe (Schein 20 Einheiten gegen 12) und
   deckt sie damit mit ab; sonst schimmerte im dunklen Takt das blasse Weiß
   darunter durch.

   Deshalb geht das Licht auch nie ganz aus, sondern nur auf ein Drittel
   herunter: Eine echte Leuchtdiode ist im dunklen Takt nicht schwarz, und
   das Weiß darunter bliebe sonst als Fleck stehen. Der Schein schrumpft
   dabei mit – ein Licht, das nur die Deckkraft wechselt, sieht aus wie ein
   Aufkleber, der ein- und ausgeblendet wird.

   Alle vier Werte sind gerechnet, nicht gesetzt: geraete_bauen.php druckt
   sie am Ende seines Laufs (MI_LED_*). Wandert der Rechner auf dem Tisch,
   kommen sie von dort. `closest-side` macht die 28 % im Verlauf zum echten
   Kernradius der Lampe. */
.mon-b .mon-led {
  position: absolute;
  left: 22.3684%; top: 84.9070%;
  width: 1.1962%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle closest-side,
                #f4fff8      0    14%,
                #46e08a      14%  28%,
                rgba(58, 208, 126, .5)  28% 52%,
                rgba(58, 208, 126, 0)   52% 100%);
  pointer-events: none;
  /* 2,6 s: ruhig genug für eine Seite, auf der sich sonst nichts von allein
     bewegt. Die Flanken sind kurz (je 8 % = rund 200 ms) und trotzdem weich –
     ein hartes `steps()` blinkt wie eine Warnleuchte. */
  animation: led-blinken 2.6s ease-in-out infinite;
}
@keyframes led-blinken {
  0%,  42% { opacity: 1;   transform: translate(-50%, -50%) scale(1); }
  50%, 92% { opacity: .34; transform: translate(-50%, -50%) scale(.84); }
  100%     { opacity: 1;   transform: translate(-50%, -50%) scale(1); }
}
/* Ohne Bewegung leuchtet es ruhig weiter: Ein Rechner, dessen Lampe aus ist,
   sagt etwas anderes als einer, der läuft. */
@media (prefers-reduced-motion: reduce) {
  .mon-b .mon-led { animation: none; }
}

.mon-blende {
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 70.0637%;
}
/* Die Blende liegt ÜBER der Aufnahme – der schwarze Rand deckt deren Kanten
   ab, und die runden Ecken der Scheibe bekommt die Aufnahme damit geschenkt. */
.mon-blende::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("bilder/monitor-blende.png");
  background-image: image-set(url("bilder/monitor-blende.webp") type("image/webp"),
                              url("bilder/monitor-blende.png")  type("image/png"));
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}

.mon-scheibe {
  position: absolute;
  left: 2.1531%; top: 3.2727%;
  width: 95.6938%; height: 90.9091%;
  overflow: hidden;
  background: var(--grund);      /* steht da, bevor die Aufnahme geladen ist */
}
.mon-scheibe picture { display: block; }
.mon-scheibe img { width: 100%; height: auto; }

/* ==========================================================================
   DIE ANORDNUNG ZEIGEN (nur auf der Bühne)

   Die Seite behauptet an drei Stellen, die Startseite lasse sich einrichten
   wie man möchte („Ihre Reihenfolge, Ihre Spaltenbreiten"). Hier wird es
   vorgeführt – seit dem 14.08.2026 in ZWEI ZÜGEN (Marcs Wunsch, ein Zug war
   ihm zu kurz), 9 Sekunden:

     1. Der Zeiger fährt auf „Ansicht anpassen" und klickt.
     2. Er greift in der OBEREN Reihe „Telefon" und zieht die Karte auf den
        ersten Platz; „Termine heute" macht Platz und rückt nach rechts.
     3. Er greift in der UNTEREN Reihe „Neue Anfragen" und zieht sie ebenso
        nach vorn; „Postfach" rückt nach rechts.

   Danach stehen die beiden Karten, die drängen (rote Zahlen: verpasste
   Anrufe, unbearbeitete Anfragen), UNTEREINANDER IN DER ERSTEN SPALTE – das
   ist die Aussage, nicht nur Bewegung. Der Endzustand bleibt stehen, er IST
   das Ergebnis.

   WIE DAS GEHT, OBWOHL DIE AUFNAHME EIN BILD IST: Über der Aufnahme liegen
   vier Ausschnitte DESSELBEN Bildes, jeder genau so groß wie eine Karte und
   genau auf ihr. Sie sind vom Untergrund nicht zu unterscheiden (Bildpunkt
   auf Bildpunkt) und lassen sich bewegen. Darunter liegt je Reihe eine Platte
   im Grundton der Anwendung, die beide Kartenplätze abdeckt – sonst käme beim
   Ziehen die Karte aus dem Bild darunter zum Vorschein und stünde doppelt da.
   Weil die Karten EINER REIHE gleich groß sind und ihre Plätze tauschen, ist
   am Ende wieder jeder Bildpunkt gedeckt. Über die Reihen hinweg ginge das
   nicht: Die untere Reihe ist 19,5 px flacher als die obere.

   ALLE MASSE SIND GEMESSEN, nicht geschätzt: bilder/mockups.html #s1 bei
   1600 × 1000 (das Maß, in dem gerendert wird).

     obere Reihe    „Termine heute"  26 / 267    „Telefon"        546 / 267
                    beide 508 × 280
     untere Reihe   „Postfach"       26 / 559    „Neue Anfragen"  546 / 559
                    beide 508 × 260,5
     der Knopf      „Ansicht anpassen" 1446,6 / 101,5 bei 127,4 × 34

   Daraus die Prozentwerte unten. Ändert sich das Muster, wird neu gemessen
   (Rechtecke im Rahmen 1600 × 1000 auslesen und durch 16 bzw. 10 teilen) –
   hier nichts schätzen, ein halbes Prozent daneben und die Kante der Karte
   steht doppelt.

   `--weg` ist der Wagenschlag von Platz 1 auf Platz 2: 520 px Abstand der
   beiden Karten, aber Prozente in `translate` rechnen gegen die EIGENE
   Breite (508 px), nicht gegen den Rahmen – deshalb 102,3622 % und nicht
   32,5 %. In beiden Reihen derselbe Wert, weil beide Reihen dieselben
   Spalten haben. Dieselbe Falle steckt im Zeiger, und der löst sie anders
   (siehe `.ord-zeiger`).
   -------------------------------------------------------------------------- */

.ord {
  position: absolute;
  inset: 0;
  pointer-events: none;           /* der Klick zum Wiederholen sitzt am <figure> */
  container-type: size;           /* macht cqw/cqh für Radius und Schatten möglich */
}

/* Nur die Bühne führt es vor. In „Planen" und „Auswerten" steht dasselbe
   Gerät, aber eine zweite laufende Vorführung auf derselben Seite wäre
   Unruhe – und die Ausschnitte oben passen ohnehin nur zu dieser Aufnahme. */
.shot:not(.shot-gross) .ord { display: none; }

/* Der Grund unter den Kartenplätzen, je Reihe einer. Genau der Ton, in dem
   mockups.html rendert (--grund dort), NICHT das --grund dieser Seite:
   gedeckt wird ein Stück Bildschirmaufnahme, nicht ein Stück Werbeseite. */
.ord-grund {
  position: absolute;
  left: 1.625%;
  width: 64.25%;                  /* beide Plätze samt der Fuge dazwischen */
  background: #f3f5f6;
}
.ord-grund-o { top: 26.7%; height: 28%; }      /* obere Reihe (Karten 280 px) */
.ord-grund-u { top: 55.9%; height: 26.05%; }   /* untere Reihe (260,5 px)     */

/* Die vier beweglichen Karten. `--weg` trägt das Vorzeichen der Richtung;
   die Reihe entscheidet über Höhe und Oberkante, die Spalte über links. */
.ord-k {
  position: absolute;
  width: 31.75%;
  overflow: hidden;
  border-radius: 4px;
  border-radius: .75cqw;          /* 12 px im Rahmen 1600 – wie die Karte im Bild */
  will-change: transform;
}
.ord-k1, .ord-k2 { top: 26.7%; height: 28%; }
.ord-k3, .ord-k4 { top: 55.9%; height: 26.05%; }
.ord-k1, .ord-k3 { left: 1.625%;  --weg:  102.3622%; }
.ord-k2, .ord-k4 { left: 34.125%; --weg: -102.3622%; z-index: 2; }

/* Der Ausschnitt: dasselbe Bild, auf Rahmengröße aufgezogen und so weit
   verschoben, dass genau diese eine Karte im Fenster steht. Die Prozente
   rechnen gegen die Karte – daher 1600/508 und 1000/280 bzw. 26/508, in der
   unteren Reihe 1000/260,5 und 559/260,5. */
.ord-bild {
  position: absolute;
  width: 314.9606%;
  background-image: url("bilder/dashboard.png");
  background-image: image-set(url("bilder/dashboard-1600.webp") type("image/webp") 1x,
                              url("bilder/dashboard.webp")      type("image/webp") 2x,
                              url("bilder/dashboard.png")       1x);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.ord-k1 .ord-bild, .ord-k2 .ord-bild { height: 357.1429%; top:  -95.3571%; }
.ord-k3 .ord-bild, .ord-k4 .ord-bild { height: 383.8772%; top: -214.5873%; }
.ord-k1 .ord-bild, .ord-k3 .ord-bild { left:    -5.1181%; }
.ord-k2 .ord-bild, .ord-k4 .ord-bild { left:  -107.4803%; }

/* Der Knopf „Ansicht anpassen" bekommt beim Klick einen Ring statt einer
   zweiten Beschriftung: Text müsste hier in der Größe der Aufnahme gesetzt
   werden und wäre bei jedem Schirmmaß ein anderer Kompromiss. Der Ring sagt
   dasselbe und kostet nichts. */
.ord-chip {
  position: absolute;
  left: 90.4125%; top: 10.15%;
  width: 7.9625%; height: 3.4%;
  border-radius: 999px;
  border: 1px solid var(--leucht);
  background: rgba(0, 162, 239, .12);
  opacity: 0;
}

/* DER ZEIGER, und warum er so gebaut ist: In `translate` rechnen Prozente
   gegen die eigene Breite. Ein 2,4 % breiter Pfeil käme so nie an eine
   Stelle des Rahmens, ohne dass man jeden Weg umrechnet. Deshalb ist der
   Träger SO GROSS WIE DER RAHMEN und trägt den Pfeil in seiner linken oberen
   Ecke: `translate(84%, 78%)` heißt dann wirklich „84 % nach rechts, 78 %
   nach unten" – und die Spitze des Pfeils steht dort. Bewegt wird nur
   `transform`, kein `left`/`top`. */
.ord-zeiger {
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: 3;                     /* über der gezogenen Karte – ohne diese Zahl
                                     verschwindet der Zeiger hinter ihr, sobald
                                     er sie berührt: `z-index: 2` an der Karte
                                     malt sie über ALLES ohne eigene Zahl, die
                                     Reihenfolge im Baum hilft da nicht */
  will-change: transform;
}
.ord-pfeil {
  position: absolute;
  left: 0; top: 0;
  width: 2.4%; height: auto;
  filter: drop-shadow(0 .12cqw .3cqw rgba(24, 40, 48, .45));
  transform-origin: 20% 10%;      /* die Spitze – der Druckpunkt beim Klicken */
}

/* Der Ablauf. EINE Dauer für alle sieben Spuren (9 s), damit die Prozente in
   den Bildern dieselbe Uhr meinen; wer die Zeit ändert, ändert sie sieben
   Mal. `forwards` ist Absicht: Was am Ende steht, ist das Ergebnis.

   Die Uhr in Sekunden, damit man die Prozente unten lesen kann:
     0,3  Zeiger kommt      1,3  am Knopf     1,4  Klick
     2,3  am Kopf „Telefon“     2,4  greifen  3,6  abgelegt (Zug 1)
     4,6  am Kopf „Neue Anfragen“  4,75 greifen  6,0 abgelegt (Zug 2)
     7,6  Zeiger geht                                             */
.ord.is-ord .ord-zeiger { animation: ord-zeiger 9s linear forwards; }
.ord.is-ord .ord-pfeil  { animation: ord-druck  9s linear forwards; }
.ord.is-ord .ord-chip   { animation: ord-chip   9s linear forwards; }
.ord.is-ord .ord-k1     { animation: ord-k1     9s linear forwards; }
.ord.is-ord .ord-k2     { animation: ord-k2     9s linear forwards; }
.ord.is-ord .ord-k3     { animation: ord-k3     9s linear forwards; }
.ord.is-ord .ord-k4     { animation: ord-k4     9s linear forwards; }

/* Die Zeitkurve steht IMMER am ANFANG des Abschnitts, den sie krümmt –
   `animation-timing-function` in einem Bild gilt von dort bis zum nächsten.
   Am Ende jeder Fahrt steht deshalb kein Wert, sondern die nächste Ruhe. */
@keyframes ord-zeiger {
  0%     { opacity: 0; transform: translate3d(84%, 78%, 0); }
  3.33%  { opacity: 0; transform: translate3d(84%, 78%, 0);
           animation-timing-function: cubic-bezier(.33,.02,.2,1); }
  7.78%  { opacity: 1; }
  /* zum Knopf „Ansicht anpassen" */
  14.44% { opacity: 1; transform: translate3d(93.6%, 11.2%, 0); }
  20%    { transform: translate3d(93.6%, 11.2%, 0);
           animation-timing-function: cubic-bezier(.4,0,.2,1); }
  /* ZUG 1 – hinunter auf den Kopf der Karte „Telefon" */
  25.56% { transform: translate3d(39%, 28.4%, 0); }
  28.33% { transform: translate3d(39%, 28.4%, 0);
           animation-timing-function: cubic-bezier(.32,.06,.2,1); }
  /* mit der Karte nach links – dieselbe Strecke wie `--weg`, nur im Rahmen
     gerechnet: 520 von 1600 sind 32,5 % */
  40%    { transform: translate3d(6.5%, 28.4%, 0); }
  44%    { transform: translate3d(6.5%, 28.4%, 0);
           animation-timing-function: cubic-bezier(.4,0,.2,1); }
  /* ZUG 2 – eine Reihe tiefer auf den Kopf von „Neue Anfragen" */
  51.11% { transform: translate3d(39%, 57.8%, 0); }
  54.44% { transform: translate3d(39%, 57.8%, 0);
           animation-timing-function: cubic-bezier(.32,.06,.2,1); }
  66.67% { transform: translate3d(6.5%, 57.8%, 0); }
  73.33% { opacity: 1; transform: translate3d(6.5%, 57.8%, 0);
           animation-timing-function: cubic-bezier(.4,0,.3,1); }
  84.44% { opacity: 0; transform: translate3d(2%, 88%, 0); }
  100%   { opacity: 0; transform: translate3d(2%, 88%, 0); }
}

/* Der Druck: beim Klick auf den Knopf und je einmal beim Greifen und beim
   Loslassen – fünfmal also. Mehr passiert am Zeiger nicht. */
@keyframes ord-druck {
  0%, 14.44%      { transform: scale(1); }
  15.56%          { transform: scale(.86); }
  16.67%, 25.56%  { transform: scale(1); }
  26.67%          { transform: scale(.86); }
  27.78%, 41.11%  { transform: scale(1); }
  42.22%          { transform: scale(.86); }
  43.33%, 51.67%  { transform: scale(1); }
  52.78%          { transform: scale(.86); }
  53.89%, 68.33%  { transform: scale(1); }
  69.44%          { transform: scale(.86); }
  70.56%, 100%    { transform: scale(1); }
}

/* Der Ring am Knopf bleibt über BEIDE Züge stehen: Solange er leuchtet, ist
   die Ansicht in Arbeit – er geht erst aus, wenn der Zeiger geht. */
@keyframes ord-chip {
  0%, 14.44%      { opacity: 0; transform: scale(1); }
  15.56%          { opacity: 1; transform: scale(1.06); }
  17.78%, 73.33%  { opacity: 1; transform: scale(1); }
  82%, 100%       { opacity: 0; transform: scale(1); }
}

/* Die gezogene Karte. Sie hebt sich beim Greifen um einen Hauch an, bekommt
   den Schatten einer angehobenen Karte und legt sich am Ziel wieder flach –
   die Drehung ist ein halbes Grad, gerade genug, dass sie „in der Hand"
   liegt. */
@keyframes ord-k2 {
  0%, 26.67% { transform: translate3d(0,0,0) scale(1) rotate(0deg);
               box-shadow: 0 0 0 0 rgba(24,40,48,0); }
  28.33%     { transform: translate3d(0,0,0) scale(1.022) rotate(.5deg);
               box-shadow: 0 1.2cqw 2.6cqw -.8cqw rgba(24,40,48,.30);
               animation-timing-function: cubic-bezier(.32,.06,.2,1); }
  40%        { transform: translate3d(var(--weg), 0, 0) scale(1.022) rotate(.5deg);
               box-shadow: 0 1.2cqw 2.6cqw -.8cqw rgba(24,40,48,.30); }
  42.22%     { transform: translate3d(var(--weg), 0, 0) scale(1) rotate(0deg);
               box-shadow: 0 .2cqw .5cqw -.3cqw rgba(24,40,48,.10); }
  46%, 100%  { transform: translate3d(var(--weg), 0, 0) scale(1) rotate(0deg);
               box-shadow: 0 0 0 0 rgba(24,40,48,0); }
}

/* Zug 2, dieselbe Bewegung eine Reihe tiefer: „Neue Anfragen“ nach vorn. */
@keyframes ord-k4 {
  0%, 52.78% { transform: translate3d(0,0,0) scale(1) rotate(0deg);
               box-shadow: 0 0 0 0 rgba(24,40,48,0); }
  54.44%     { transform: translate3d(0,0,0) scale(1.022) rotate(.5deg);
               box-shadow: 0 1.2cqw 2.6cqw -.8cqw rgba(24,40,48,.30);
               animation-timing-function: cubic-bezier(.32,.06,.2,1); }
  66.67%     { transform: translate3d(var(--weg), 0, 0) scale(1.022) rotate(.5deg);
               box-shadow: 0 1.2cqw 2.6cqw -.8cqw rgba(24,40,48,.30); }
  69.44%     { transform: translate3d(var(--weg), 0, 0) scale(1) rotate(0deg);
               box-shadow: 0 .2cqw .5cqw -.3cqw rgba(24,40,48,.10); }
  73%, 100%  { transform: translate3d(var(--weg), 0, 0) scale(1) rotate(0deg);
               box-shadow: 0 0 0 0 rgba(24,40,48,0); }
}

/* Die Karten, die Platz machen: starten später als der Zug, kommen früher an
   und fahren unter der gezogenen durch – so wie im Programm. */
@keyframes ord-k1 {
  0%, 30%  { transform: translate3d(0,0,0);
             animation-timing-function: cubic-bezier(.4,0,.2,1); }
  38.5%    { transform: translate3d(var(--weg), 0, 0); }
  100%     { transform: translate3d(var(--weg), 0, 0); }
}
@keyframes ord-k3 {
  0%, 56%  { transform: translate3d(0,0,0);
             animation-timing-function: cubic-bezier(.4,0,.2,1); }
  65%      { transform: translate3d(var(--weg), 0, 0); }
  100%     { transform: translate3d(var(--weg), 0, 0); }
}

/* Die Scheibe nimmt den Klick fürs Wiederholen an (site.js, Abschnitt 12),
   deshalb der Zeiger – aber nur, wo auch etwas geschieht: mit JavaScript und
   nur auf der Bühne. */
.js .shot-gross .mon-scheibe { cursor: pointer; }

/* Ohne Bewegung gar nicht erst: Der Sammelblock unter „Rücksichten" kürzt
   jede Animation auf 0,01 ms – die Vorführung stünde dann als Ergebnis da,
   ohne dass jemand den Weg gesehen hat. Besser die unberührte Aufnahme. */
@media (prefers-reduced-motion: reduce) {
  .ord { display: none; }
  .js .shot-gross .mon-scheibe { cursor: default; }
}

/* Der Grund. Nur ZWEI Lagen statt drei wie beim Notebook: Die schmale Naht,
   mit der ein Gerät den Tisch berührt, ist hier schon in der Grafik – Fuß,
   Tastatur und Maus setzen an drei verschiedenen Stellen auf, das kann eine
   Ellipse in der CSS nicht nachbilden. Was bleibt, ist der weite
   Umgebungsschatten und das Licht, das der Bildschirm auf die Fläche wirft. */
.mon-boden, .mon-schein {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.mon-boden {
  left: -5%; right: -5%; top: 96.5%; height: 7%;
  background: rgba(24,40,48,.12);
  filter: blur(16px);
}
.mon-schein {
  left: 26%; right: 26%; top: 97.6%; height: 3.2%;
  background: rgba(255,255,255,.62);
  filter: blur(10px);
}
/* Auf der Bühne steht dasselbe Gerät ungefähr anderthalbmal so groß, und ein
   Schatten, der unter dem halbbreiten sitzt, wird darunter zur dunklen
   Pfütze: enger gezogen, flacher, um ein Drittel heller und weiter
   ausgelaufen. Der Lichtteller rückt entsprechend zusammen. Die Werte sind
   die des früheren Bühnen-Notebooks – der Grund, auf dem etwas steht, hängt
   an der Größe, nicht am Gerät. */
.shot-gross .mon-boden {
  left: -3%; right: -3%; top: 96.6%; height: 6%;
  background: rgba(24,40,48,.10);
  filter: blur(20px);
}
.shot-gross .mon-schein { left: 29%; right: 29%; height: 2.8%; filter: blur(12px); }

.shot figcaption {
  margin-top: clamp(18px, 3vw, 34px);
  text-align: center;
  font-size: .84rem;
  color: var(--gedaempft);
}

/* HIER STAND EIN HOVER-ZUSTAND FÜR DIE PRODUKTAUFNAHMEN, UND ER IST BEWUSST
   WEG (Wunsch des Nutzers): Der Rahmen hob sich um 4 px mit einem sehr weiten
   Schatten, das Bild darin zog gleichzeitig auf 1,045 an. Beides zusammen
   ließ eine ganze Bildschirmaufnahme unter dem Zeiger atmen – bei einem Bild
   dieser Größe ist das keine Rückmeldung mehr, sondern Unruhe.

   Die Aufnahme ist auch kein Bedienelement: Sie führt nirgendwohin, es gibt
   also nichts anzukündigen. Bewegung unter dem Zeiger gibt es weiterhin dort,
   wo sie etwas heißt – an den Preiskarten (.pk), und die führen wirklich
   irgendwohin. */

/* --------------------------------------------------------------------------
   Zahlenband
   -------------------------------------------------------------------------- */

.band {
  position: relative;
  background: var(--weiss);
  border-block: 1px solid var(--rand);
  padding: clamp(52px, 7vw, 86px) 0;
  margin-top: clamp(48px, 7vw, 92px);
}
.band-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  text-align: center;
}
.band-grid > div { position: relative; }
/* Die Trennlinie läuft oben und unten aus, statt als Strich zu stehen –
   sonst zerlegt sie das Band in vier Kästen. */
.band-grid > div + div::before {
  content: "";
  position: absolute;
  left: -14px; top: 4%; bottom: 4%;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--rand) 24%, var(--rand) 76%, transparent);
}
/* Die Ziffern tragen denselben Verlauf wie die Löwenmarke: oben der helle,
   unten der tiefe Ton. Das bindet das Band an das Zeichen, ohne eine zweite
   Farbe einzuführen. */
.band-grid b {
  display: block;
  font-size: clamp(2.3rem, 4.4vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ak);
  background: linear-gradient(170deg, var(--ak-hell) 0%, var(--ak) 38%, var(--marke-tief) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.band-grid span {
  display: block;
  margin-top: 11px;
  font-size: .86rem;
  color: var(--gedaempft);
}

/* --------------------------------------------------------------------------
   Abschnitte
   -------------------------------------------------------------------------- */

.sec { position: relative; padding: clamp(80px, 10vw, 140px) 0; }
/* Die Kopfleiste liegt fest über der Seite: Ein Sprung aus dem Menü muss
   unter ihr enden, nicht dahinter. */
section[id], main[id] { scroll-margin-top: 60px; }
.sec-weiss { background: var(--weiss); border-block: 1px solid var(--rand); }

/* Drei Karten */
.tri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.tri-c {
  background: var(--weiss);
  border: 1px solid var(--rand);
  border-radius: var(--r-card);
  padding: 26px 24px 28px;
  box-shadow: var(--sh-1);
  /* Träger als der Rest der Seite (Marc, 14.08.2026): mit 260ms und der
     harten Kurve sprang die Karte beim Überfahren an, statt anzuziehen.
     440ms hinein, und `--ease-weich` statt `--ease` – die weiche Kurve hat
     keinen Ausschlag am Anfang, deshalb setzt der Hub sanft ein. */
  transition: transform 440ms var(--ease-weich),
              box-shadow 440ms var(--ease-weich),
              border-color 440ms var(--ease-weich);
}
.sec-weiss .tri-c { background: var(--grund); }
/* Dieselbe Falle wie bei den Stufenkarten weiter unten: `.js .rv` setzt fürs
   Einblenden beim Scrollen eine eigene Kurzschreibweise und wirft damit die
   Zeiten der Karte oben ersatzlos hinaus – der Hub beim Überfahren lief gar
   nicht, er sprang. Dazu kam der Versatz von `.rv-1`/`.rv-2`: die zweite und
   dritte Kachel zogen auch beim Überfahren erst nach 80 bzw. 160 Millisekunden
   an. Deshalb steht hier beides in einer Kurzschreibweise – Einblenden UND
   Überfahren –, und der Versatz gilt nur noch fürs Einblenden. */
.js .rv.tri-c {
  --rv-versatz: 0ms;
  transition: opacity      var(--t-slow) var(--ease) var(--rv-versatz),
              translate    var(--t-slow) var(--ease) var(--rv-versatz),
              transform    440ms var(--ease-weich),
              box-shadow   440ms var(--ease-weich),
              border-color 440ms var(--ease-weich);
}
.js .rv-1.tri-c { --rv-versatz: 80ms; }
.js .rv-2.tri-c { --rv-versatz: 160ms; }
@media (hover: hover) and (pointer: fine) {
  /* Kein Schatten beim Überfahren (Marc, 14.08.2026): der Hub und die Kante
     reichen: Der geworfene Schatten machte aus der flachen Fläche eine
     schwebende – das ist nicht die Sprache des Dashboards. */
  .tri-c:hover { transform: translateY(-3px); border-color: var(--ak-hell); }
  .tri-c:hover .tri-ic {
    background: linear-gradient(150deg, var(--leucht), var(--leucht-tief));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
    color: #fff;
  }
}
/* Die Zeichenkacheln sind keine flache Fläche mehr, sondern ein Verlauf mit
   einer Haarlinie darum – dadurch sitzen sie auf der Karte statt darin zu
   verschwinden. Beim Überfahren füllt sich die Kachel wie bisher. */
.tri-ic {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: var(--r);
  background: linear-gradient(150deg, rgba(255,255,255,.9), var(--ak-hauch));
  box-shadow: inset 0 0 0 1px var(--rand-hell), var(--sh-1);
  color: var(--ak-tief);
  margin-bottom: 16px;
  transition: background 440ms var(--ease-weich), color 440ms var(--ease-weich),
              box-shadow 440ms var(--ease-weich);
}
.tri-ic svg { width: 20px; height: 20px; }
.tri-c h3 { margin: 0 0 7px; font-size: 1.1rem; letter-spacing: -.018em; }
.tri-c p  { margin: 0; font-size: .94rem; color: var(--gedaempft); line-height: 1.55; }

/* --------------------------------------------------------------------------
   Zweispalter mit Bild
   -------------------------------------------------------------------------- */

/* Die Aufnahme bekommt die breitere Spalte – gleich, auf welcher Seite sie
   steht. Vorher hing das an der Reihenfolge: Wo das Bild links stand
   (Abschnitt „Arbeiten“), war es das schmalere von beiden. */
.split-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(34px, 5vw, 72px);
  align-items: center;
}
.split-grid:has(> .shot:first-child) { grid-template-columns: 1.15fr 1fr; }
.split-txt .sub { margin-bottom: 1.7em; }

.ticks { margin: 0; padding: 0; list-style: none; }
.ticks li {
  position: relative;
  padding: 10px 0 10px 30px;
  font-size: .95rem;
  border-top: 1px solid var(--rand);
  transition: color var(--t-fast) var(--ease);
}
.ticks li:first-child { border-top: 0; }
.ticks li::before {
  content: "";
  position: absolute;
  left: 3px; top: 17px;
  width: 13px; height: 7px;
  border-left: 2px solid var(--ak);
  border-bottom: 2px solid var(--ak);
  rotate: -45deg;
  transition: border-color var(--t-fast) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  /* Der Haken springt beim Überfahren auf das helle Blau der Überschriften –
     dieselbe Farbe wie --leucht, damit die Seite nur EINE Hervorhebungsfarbe
     kennt (14.08.2026: vorher --rot, das las sich wie eine Warnung). */
  .ticks li:hover::before { border-color: var(--leucht); }
}

/* --------------------------------------------------------------------------
   Modul-Schiene
   -------------------------------------------------------------------------- */

.rail-wrap { margin-top: 4px; }
/* Die Karten laufen rechts weich aus, statt am Fensterrand abgeschnitten zu
   werden: Das sagt „hier geht es weiter“, ohne einen Pfeil hinzustellen.
   Die weiche Zone ist schmaler als der linke Innenabstand, damit die erste
   Karte im Ruhezustand nie angefasst wird. */
.rail {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding: 6px max(22px, calc((100% - var(--spur)) / 2)) 26px;
  cursor: grab;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 96px), transparent 100%);
          mask-image: linear-gradient(90deg, #000 calc(100% - 96px), transparent 100%);
}
.rail::-webkit-scrollbar { display: none; }
.rail.is-zieht { cursor: grabbing; }
.rail.is-zieht .mcard { user-select: none; }

.mcard {
  flex: 0 0 318px;
  background: var(--weiss);
  border: 1px solid var(--rand);
  border-radius: var(--r-card);
  padding: 24px 22px 26px;
  box-shadow: var(--sh-1);
  /* dieselben Zeiten wie bei den Dreierkacheln – siehe dort */
  transition: transform 440ms var(--ease-weich),
              box-shadow 440ms var(--ease-weich),
              border-color 440ms var(--ease-weich);
}
@media (hover: hover) and (pointer: fine) {
  .rail:not(.is-zieht) .mcard:hover {
    transform: translateY(-4px);
    border-color: var(--ak-hell);
  }
  .rail:not(.is-zieht) .mcard:hover .mic {
    background: linear-gradient(150deg, var(--leucht), var(--leucht-tief));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
    color: #fff;
  }
}
.mcard.is-akzent { border-color: var(--ak-hell); background: linear-gradient(168deg, #fbfcfd, var(--ak-hauch)); }
.mic {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: var(--r);
  background: linear-gradient(150deg, rgba(255,255,255,.9), var(--ak-hauch));
  box-shadow: inset 0 0 0 1px var(--rand-hell), var(--sh-1);
  color: var(--ak-tief);
  margin-bottom: 18px;
  transition: background 440ms var(--ease-weich), color 440ms var(--ease-weich),
              box-shadow 440ms var(--ease-weich);
}
.mic svg { width: 19px; height: 19px; }
.mcard h3 { margin: 0 0 8px; font-size: 1.12rem; letter-spacing: -.02em; }
.mcard p  { margin: 0; font-size: .91rem; line-height: 1.55; color: var(--gedaempft); }

.rail-dots { display: flex; justify-content: center; gap: 7px; }
.rail-dots i {
  width: 6px; height: 6px; border-radius: 50%;
  background: #ccd5d9;
  transition: background var(--t-fast) var(--ease), width var(--t-fast) var(--ease);
}
.rail-dots i.is-on { background: var(--ak); width: 18px; border-radius: 3px; }

/* --------------------------------------------------------------------------
   Preise
   -------------------------------------------------------------------------- */

.preise {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  align-items: start;
}
.pk {
  position: relative;
  background: var(--grund);
  border: 1px solid var(--rand);
  border-radius: var(--r-card);
  padding: 32px 30px 34px;
  box-shadow: var(--sh-1);
  transition: transform var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  /* Bewusst kein transform – auch kein Hub wie bei den anderen Kacheln.
     In dieser Karte steht ein Knopf mit Lichtstreif; bewegt sich die Fläche
     darunter mit, sieht der Streif nach Zittern aus statt nach Glanz. Die
     Karte antwortet mit der Kante, der Knopf mit dem Licht – eine Bewegung
     je Zeigergeste (14.08.2026). Die empfohlene Karte behält dabei ihre
     kräftigere Kante, sonst würde sie beim Überfahren blasser. */
  .pk:hover { border-color: var(--ak-hell); }
  .pk.is-empfohlen:hover { border-color: var(--ak); }
}
/* Damit die Kante auch weich kommt: `.js .rv` setzt fürs Einblenden eine
   eigene Kurzschreibweise und warf die Zeiten der Karte oben ersatzlos hinaus –
   dieselbe Falle wie bei .stair und .tri-c. Die Kante sprang deshalb um, und
   bei der empfohlenen Karte (.rv-1) sogar erst nach 80 ms, weil auch die
   Verzögerung des Einblendens auf sie durchschlug. Hier stehen beide Zeiten
   zusammen, die Verzögerung gilt nur fürs Einblenden. */
.js .rv.pk {
  --rv-versatz: 0ms;
  transition: opacity      var(--t-slow) var(--ease) var(--rv-versatz),
              translate    var(--t-slow) var(--ease) var(--rv-versatz),
              border-color 440ms var(--ease-weich),
              box-shadow   440ms var(--ease-weich);
}
.js .rv-1.pk { --rv-versatz: 80ms; }
.js .rv-2.pk { --rv-versatz: 160ms; }
/* Die empfohlene Stufe trägt einen zarten Schein von oben statt einer zweiten
   Farbe. Wichtig ist der GLEICHE Innenabstand wie bei den Nachbarn: solange
   sie 6 px mehr hatte, standen die drei Beträge nicht auf einer Linie – bei
   drei Preisen nebeneinander sieht man genau das. Die Fahne hängt ohnehin
   außerhalb der Karte und braucht keinen Platz darin. */
.pk.is-empfohlen {
  background: linear-gradient(180deg, var(--ak-hauch) 0, rgba(255,255,255,0) 140px), var(--weiss);
  border-color: var(--ak);
  box-shadow: var(--sh-2), 0 0 0 1px var(--ak) inset;
}
.pk-fahne {
  position: absolute;
  top: -12px; left: 30px;
  background: linear-gradient(150deg, var(--leucht), var(--leucht-tief));
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: var(--r-pill);
}
.pk-name {
  margin: 0 0 6px;
  font-size: 1.32rem;
  font-weight: 700;
  letter-spacing: -.022em;
}
.pk-satz { margin: 0 0 24px; font-size: .91rem; color: var(--gedaempft); line-height: 1.5; min-height: 3em; }
.pk-preis { display: flex; align-items: baseline; gap: 8px; margin: 0 0 20px; }
.pk-preis b {
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
/* Nur der Takt ist klein – nicht jedes span: seit die Zahl selbst in einem
   span steckt (damit JavaScript sie tauschen kann), träfe `.pk-preis span`
   auch den Betrag und schrumpfte ihn auf Fußnotengröße. */
.pk-preis .pk-takt { font-size: .86rem; color: var(--blass); }
.pk .btn { width: 100%; justify-content: center; }

.pk-liste { margin: 28px 0 0; padding: 0; list-style: none; }
.pk-liste li {
  position: relative;
  padding: 11px 0 11px 26px;
  font-size: .92rem;
  border-top: 1px solid var(--rand);
}
.pk-liste li:first-child { border-top: 0; }
.pk-liste li::before {
  content: "";
  position: absolute;
  left: 2px; top: 18px;
  width: 11px; height: 6px;
  border-left: 2px solid var(--ak);
  border-bottom: 2px solid var(--ak);
  rotate: -45deg;
}
.pk-liste li em {
  font-style: normal;
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--blass);
}
.pk-liste li:has(em) { padding-left: 0; }
.pk-liste li:has(em)::before { display: none; }

/* .preis-fuss steht weiter unten im Kaufabschnitt – hier stand eine
   überholte Zweitfassung, die ohnehin überschrieben wurde. */

/* --------------------------------------------------------------------------
   Rollen-Treppe
   -------------------------------------------------------------------------- */

.stairs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; }
.stair {
  background: var(--weiss);
  border: 1px solid var(--rand);
  border-radius: var(--r-card);
  padding: 26px 24px 28px;
  box-shadow: var(--sh-1);
  /* Die beiden Enden des Ziffernverlaufs stehen hier und nicht am ::after,
     weil sich nur an einem echten Element etwas überblenden lässt – das
     Pseudoelement erbt den Wert und läuft mit. */
  --zif:  var(--rand);
  --zif0: rgba(227,232,234,0);
  transition: transform 620ms var(--ease-weich), box-shadow 620ms var(--ease-weich),
              --zif 620ms var(--ease-weich), --zif0 620ms var(--ease-weich);
}
.stair:nth-child(2) { margin-top: 24px; }
.stair:nth-child(3) { margin-top: 48px; }

/* Das Anheben lief bisher gar nicht weich, sondern sprang: `.js .rv` setzt für
   das Einblenden beim Scrollen eine eigene `transition` – und weil das die
   Kurzschreibweise ist, warf sie die Zeiten der Karte oben ersatzlos hinaus.
   Übrig blieb ein Sprung um drei Pixel. Dazu kam der Versatz von `.rv-1`/`.rv-2`:
   die zweite und dritte Stufe zogen auch beim Überfahren erst nach 80 bzw.
   160 Millisekunden an.
   Deshalb steht hier beides in einer einzigen Kurzschreibweise – Einblenden UND
   Anheben – und der Versatz gilt nur noch für das Einblenden. Die Zeiten sind
   ruhiger als sonst auf der Seite: die drei Stufen stehen dicht beieinander,
   der Zeiger streicht im Vorbeigehen leicht über alle drei. Hinaus dauert es
   länger als hinein, so bleibt vom Verlassen kein Ruck übrig. */
.js .rv.stair {
  --t-stufe:   620ms;
  --rv-versatz: 0ms;
  transition: opacity   var(--t-slow) var(--ease) var(--rv-versatz),
              translate var(--t-slow) var(--ease) var(--rv-versatz),
              transform  var(--t-stufe) var(--ease-weich),
              box-shadow var(--t-stufe) var(--ease-weich),
              --zif      var(--t-stufe) var(--ease-weich),
              --zif0     var(--t-stufe) var(--ease-weich);
}
.js .rv-1.stair { --rv-versatz: 80ms; }
.js .rv-2.stair { --rv-versatz: 160ms; }

@media (hover: hover) and (pointer: fine) {
  /* Beim Überfahren tauscht die Karte ihre Auszeichnung: der Schatten geht
     weg – die Karte liegt dann sauber auf der Fläche und hebt sich allein
     durch den einen Pixel Hub –, dafür färbt sich die große Ziffer in das
     Blau der Überschriften. Der Verlauf bleibt derselbe, nur seine beiden
     Enden wandern; verblassen tut die Ziffer nach wie vor ins Weiße. */
  .stair:hover {
    transform: translateY(-3px);
    box-shadow: none;
    --zif:  var(--leucht);
    --zif0: rgba(0,162,239,0);
  }
  .js .rv.stair:hover { --t-stufe: 440ms; }
}
/* Die Stufennummer steht zweimal da: klein und lesbar über der Überschrift,
   und groß als blasse Ziffer in der Ecke. Die große trägt keine Information –
   sie gibt der Karte eine Ecke, an der das Auge hängen bleibt, und macht aus
   drei gleichen Kästen eine Reihenfolge. Der Wert kommt aus data-ziffer,
   damit im HTML nur die Zahl steht.
   Ein Verlauf selbst ist nicht zu überblenden – `background-image` springt.
   Übergeblendet werden deshalb seine beiden Enden als angemeldete Merkmale
   (dieselbe Bauart wie --mx/--my beim Lichtkegel): ohne @property wäre eine
   eigene Eigenschaft für den Browser bloß Text und spränge von Wert zu Wert.
   Zwei statt eines Merkmals, weil das durchsichtige Ende die Farbe des
   sichtbaren tragen muss – gegen bloßes `transparent` liefe der Verlauf über
   Grau, und genau das hatte die alte Fassung schon vermieden. */
@property --zif  { syntax: "<color>"; inherits: true; initial-value: #e3e8ea; }
@property --zif0 { syntax: "<color>"; inherits: true; initial-value: rgba(227,232,234,0); }

.stair::after {
  content: attr(data-ziffer);
  position: absolute;
  /* ganz innerhalb der Karte: `.spot` schneidet ab, und eine oben glatt
     abgeschnittene Ziffer sieht nach Versehen aus, nicht nach Absicht */
  top: 6px; right: 16px;
  z-index: 0;
  font-size: 6.2rem;
  font-weight: 700;
  letter-spacing: -.05em;
  line-height: 1;
  color: transparent;
  background: linear-gradient(180deg, var(--zif), var(--zif0));
  -webkit-background-clip: text;
          background-clip: text;
  pointer-events: none;
}
.stair-n {
  display: block;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .15em;
  color: var(--ak);
  margin-bottom: 12px;
}
.stair h3 { margin: 0 0 7px; font-size: 1.18rem; letter-spacing: -.02em; }
.stair p  { margin: 0; font-size: .93rem; color: var(--gedaempft); line-height: 1.55; }

/* --------------------------------------------------------------------------
   Gesellschaftsfarbe
   -------------------------------------------------------------------------- */

.marke {
  --mc: #0384c3;   /* Hausfarbton – trägt Schrift, Linien, Flächen */
  --ms: #00a2ef;   /* Erkennungsfarbe – nur das Markenzeichen */
  --mt: #1d1d1f;   /* Schrift auf der Erkennungsfarbe (gerechnet: 6,0 : 1) */
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: clamp(30px, 4vw, 56px);
  align-items: center;
}

/* WARUM HIER ÜBERALL `min-width: 0` STEHT – das war ein echter Fehler, und
   zwar der teuerste der Seite: Ein Rasterfeld ist von Haus aus `min-width:
   auto`, es schrumpft also nie unter die kleinstmögliche Breite seines
   Inhalts. Die Zeile der Mini-App enthält eine Schrift mit `white-space:
   nowrap` und vier Menüwörter, zusammen rund 473 px. Auf einem 375-px-Telefon
   konnte das Feld deshalb nicht mitgehen, und die Seite legte den ganzen
   Aufbau auf 491 px aus – während nur 375 px zu sehen waren. Weil `body`
   `overflow-x: clip` trägt, ließ sich der Rest nicht einmal herscrollen: Ein
   Viertel jeder Seitenbreite war schlicht weg, darunter der Knopf „Jetzt
   kaufen“ in der Kopfleiste. Ein zu breites Feld ganz unten auf der Seite
   verstümmelt so alles darüber. */
.marke > * { min-width: 0; }

.mini-app {
  min-width: 0;
  background: #fff;
  border: 1px solid var(--rand);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--sh-1), var(--sh-3);
}
.ma-top {
  display: flex; align-items: center; gap: 10px;
  min-width: 0;
  padding: 0 16px; height: 48px;
  border-bottom: 1px solid color-mix(in srgb, var(--mc) 16%, var(--rand));
}
.ma-top b {
  font-size: .88rem; letter-spacing: -.012em;
  color: color-mix(in srgb, var(--mc) 82%, #000);
  white-space: nowrap;
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
.ma-mark {
  width: 26px; height: 26px; border-radius: 7px; flex: none;
  background: var(--ms); color: var(--mt);
  display: grid; place-items: center;
  font-size: .8rem; font-weight: 700;
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.ma-nav { display: flex; gap: 16px; margin-inline: auto; font-size: .74rem; color: var(--gedaempft); }
.ma-nav em {
  font-style: normal; padding-bottom: 3px;
  border-bottom: 2px solid transparent;
  transition: color var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.ma-nav em.is-on { color: color-mix(in srgb, var(--mc) 80%, #000); border-bottom-color: var(--mc); }
.ma-av {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font-style: normal; font-size: .62rem; font-weight: 700;
  background: color-mix(in srgb, var(--mc) 13%, #eef1f2);
  color: color-mix(in srgb, var(--mc) 78%, #000);
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease);
}

.ma-body { padding: 16px; background: color-mix(in srgb, var(--mc) 5%, #fbfcfc); transition: background var(--t-base) var(--ease); }
.ma-kpi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.ma-kpi span {
  display: block;
  border-radius: var(--r-card); background: #fff;
  padding: 9px 12px 10px;
  border: 1px solid color-mix(in srgb, var(--mc) 14%, var(--rand));
  box-shadow: inset 0 -3px 0 -1px color-mix(in srgb, var(--mc) 45%, transparent);
  transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.ma-kpi small { display: block; font-size: .56rem; letter-spacing: .08em; text-transform: uppercase; color: var(--blass); }
.ma-kpi b {
  display: block; font-size: 1.3rem; line-height: 1.25;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--mc) 78%, #000);
  transition: color var(--t-base) var(--ease);
}

.ma-card {
  background: #fff; border-radius: var(--r-card); padding: 4px 12px;
  border: 1px solid color-mix(in srgb, var(--mc) 12%, var(--rand));
  transition: border-color var(--t-base) var(--ease);
}
.ma-row { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-top: 1px solid var(--rand-hell); }
.ma-row:first-child { border-top: 0; }
.ma-row em { width: 3px; height: 18px; border-radius: 3px; flex: none;
             background: color-mix(in srgb, var(--mc) 72%, #fff);
             transition: background var(--t-base) var(--ease); }
.ma-row span { height: 8px; border-radius: 4px; flex: 1;
               background: color-mix(in srgb, var(--mc) 15%, #e9edef);
               transition: background var(--t-base) var(--ease); }
.ma-row .l2 { max-width: 74%; }
.ma-row .l3 { max-width: 52%; }

.ma-btns { display: flex; gap: 8px; margin-top: 14px; }
.ma-btns span {
  font-size: .78rem;
  padding: 8px 16px; border-radius: var(--r);
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease);
}
.ma-b1 { background: color-mix(in srgb, var(--mc) 60%, #8a9aa4); color: #fff; }
.ma-b2 { background: #fff; color: color-mix(in srgb, var(--mc) 70%, #000);
         box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mc) 24%, var(--rand)); }

.pick-title { font-size: .72rem; letter-spacing: .15em; text-transform: uppercase; color: var(--blass); margin: 0 0 14px; }
.pick-title.mt { margin-top: 26px; }

.swatches { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }
.sw {
  width: 40px; height: 40px;
  border: 0; padding: 0; cursor: pointer;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--s), var(--c));
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-base) var(--ease);
}
.sw:active { transform: scale(.92); }
.sw.is-on { box-shadow: 0 0 0 3px var(--weiss), 0 0 0 5px var(--c), inset 0 0 0 1px rgba(0,0,0,.12); }
@media (hover: hover) and (pointer: fine) {
  .sw:hover { transform: translateY(-2px); }
}
.pick-note { font-size: .9rem; color: var(--gedaempft); line-height: 1.55; margin: 0; }
.pick-note b { color: var(--tinte); }

.tokens { display: flex; gap: 6px; margin-bottom: 22px; }
.tk { height: 30px; flex: 1; border-radius: var(--r-s); transition: background var(--t-base) var(--ease); }
.tk-1 { background: var(--mc); }
.tk-2 { background: color-mix(in srgb, var(--mc) 72%, #fff); }
.tk-3 { background: color-mix(in srgb, var(--mc) 46%, #fff); }
.tk-4 { background: color-mix(in srgb, var(--mc) 26%, #fff); }
.tk-5 { background: color-mix(in srgb, var(--mc) 13%, #fff); }
.tk-6 { background: color-mix(in srgb, var(--mc) 6%, #fff); box-shadow: inset 0 0 0 1px var(--rand); }

/* --------------------------------------------------------------------------
   Sicherheitsraster
   -------------------------------------------------------------------------- */

/* Acht einzelne Kacheln, nicht ein geteiltes Feld: Bis zum 14.08.2026 lagen
   die Punkte in EINEM Kasten mit 1px-Fugen – das las sich als Tabelle, und
   „Zwei Faktoren" stand mit „Aufbewahrung" in derselben Fläche. Jetzt trägt
   jeder Punkt seine eigene Karte in der Sprache der Seite (.tri-c): Rand,
   Radius, --sh-1, beim Überfahren ein Hub und die hellere Kante. Im weißen Abschnitt
   steht die Karte auf dem Grundton, sonst verschwände sie in der Wand. */
.grid4 {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.g4 {
  background: var(--weiss);
  border: 1px solid var(--rand);
  border-radius: var(--r-card);
  box-shadow: var(--sh-1);
  padding: 22px 20px 24px;
  transition: transform var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease);
}
.sec-weiss .g4 { background: var(--grund); }
@media (hover: hover) and (pointer: fine) {
  .g4:hover { transform: translateY(-3px); border-color: var(--ak-hell); }
  .g4:hover h3 { color: var(--ak-tief); }
  .g4:hover .g4-ic {
    background: linear-gradient(150deg, var(--leucht), var(--leucht-tief));
    border-color: transparent;
    color: #fff;
  }
}
/* Acht gleich gebaute Textkacheln lesen sich als Wand. Ein Zeichen je Kachel
   gibt dem Auge einen Halt – klein und in Linien, damit die Fläche ruhig
   bleibt: gefüllte Kacheln wie bei den Modulen wären hier achtmal zu viel. */
.g4-ic {
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border-radius: var(--r-s);
  border: 1px solid var(--rand);
  background: linear-gradient(150deg, rgba(255,255,255,.9), var(--ak-hauch));
  color: var(--ak-tief);
  margin-bottom: 14px;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.g4-ic svg { width: 17px; height: 17px; }
.g4 h3 { margin: 0 0 7px; font-size: 1rem; letter-spacing: -.015em; transition: color var(--t-fast) var(--ease); }
.g4 p  { margin: 0; font-size: .88rem; color: var(--gedaempft); line-height: 1.55; }

/* --------------------------------------------------------------------------
   Technische Daten
   -------------------------------------------------------------------------- */

.specs { margin: 0; }
.specs > div {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 24px;
  padding: 16px 12px;
  border-top: 1px solid var(--rand);
  border-radius: var(--r);
  transition: background var(--t-fast) var(--ease);
}
.specs > div:last-child { border-bottom: 1px solid var(--rand); }
@media (hover: hover) and (pointer: fine) {
  .specs > div:hover { background: var(--grund); }
}
.specs dt { font-size: .9rem; font-weight: 700; letter-spacing: -.008em; }
/* Ein Punkt vor jedem Begriff: Die Liste ist zehn Zeilen lang und hat sonst
   keinen Anfang – der Punkt gibt der linken Spalte eine Kante. */
.specs dt::before {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--ak-hell);
  margin-right: 10px;
  vertical-align: 2px;
}
.specs dd { margin: 0; font-size: .96rem; color: var(--gedaempft); }
/* Die letzte Zeile ist der Stand – die einzige Angabe, die veraltet, und
   deshalb die einzige, die etwas Gewicht bekommt. */
.specs > div:last-child dt::before { background: var(--ak); }
.specs > div:last-child dd { color: var(--tinte); }

/* --------------------------------------------------------------------------
   Abschluss und Fuß
   -------------------------------------------------------------------------- */

.sec-final {
  position: relative;
  background: var(--weiss);
  border-top: 1px solid var(--rand);
  text-align: center;
  overflow: clip;
}
.final { position: relative; z-index: 1; }
.final .lead { margin-bottom: 2.2em; }

.foot {
  background: var(--grund);
  border-top: 1px solid var(--rand);
  color: var(--gedaempft);
  padding: 34px 0 46px;
}
.foot-in { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; font-size: .82rem; }
.foot-brand { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--tinte); font-weight: 700; }
.foot-note { margin: 0; flex: 1 1 260px; }
.foot-links { display: flex; gap: 20px; }
/* Die Rechtslinks sind Links und dürfen das zeigen: eine Haarlinie, die beim
   Überfahren aufzieht – dasselbe Muster wie oben im Menü, eine Stufe leiser. */
.foot-links a {
  position: relative;
  padding-bottom: 2px;
  transition: color var(--t-fast) var(--ease);
}
.foot-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  scale: 0 1;
  transform-origin: left;
  transition: scale var(--t-base) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .foot-links a:hover { color: var(--ak-tief); }
  .foot-links a:hover::after { scale: 1 1; }
}

/* --------------------------------------------------------------------------
   Einblenden beim Scrollen – nur mit JavaScript
   -------------------------------------------------------------------------- */

.js .rv {
  opacity: 0;
  translate: 0 20px;          /* Einzeleigenschaft, damit kein transform überschrieben wird */
  transition: opacity var(--t-slow) var(--ease), translate var(--t-slow) var(--ease);
}
.js .rv.is-in { opacity: 1; translate: 0 0; }
.js .rv-1 { transition-delay: 80ms; }
.js .rv-2 { transition-delay: 160ms; }
.js .rv-3 { transition-delay: 240ms; }

/* ==========================================================================
   Marke, Wasserzeichen und Effekte
   ========================================================================== */

/* --------------------------------------------------------------------------
   Die Marke: der Heimatplanet

   Sie steht an zwei verschiedenen Arten auf der Seite, und das mit Absicht:

   1. In der KOPFLEISTE und im FUSS als echtes SVG (`#mk-planet`, einmal im
      HTML, zweimal per <use> benutzt). Dort soll sie mehrfarbig sein – Körper,
      Wolkenbänder, Ring und der rote Trabant. Die vier Farben kommen als
      CSS-Variablen von hier, deshalb kann der Hover sie wechseln, ohne dass
      eine zweite Datei nötig wäre.

   2. Als WASSERZEICHEN hinter der Seite, im Abschluss und im Terminkasten als
      einfarbige MASKE aus assets/marke.css (`var(--marke-maske)`). Gefärbt
      wird die Fläche darunter; die Bänder sind dort Aussparungen. Sie steht
      als data:-URI, weil Chrome bei file:// ein Maskenbild aus „fremder"
      Herkunft verwirft – das Zeichen fehlte dann überall, ohne Meldung.

   Beide werden von marke/einbauen.py aus denselben Formeln erzeugt
   (marke/bauen.py), damit Zeichen und Maske nie auseinanderlaufen. Das
   Seitenverhältnis ist 1 : 1 – der Löwe davor hatte 507 : 559.
   -------------------------------------------------------------------------- */

/* 26 px, nicht kleiner: Unter etwa 24 px gewinnt der Ring gegen den Planeten
   und beide werden ein Fleck. Diese Stufe trägt einen Trabanten und drei
   Bänder; die Fassung fürs Favicon (marke/bauen.py, favicon()) hat keinen
   Trabanten und zwei Bänder. */
.nav-mark {
  --mk-koerper: var(--marke-tief);
  --mk-band:    var(--marke-hell);
  --mk-ring:    var(--ak-hell);
  --mk-mond:    var(--rot);
  width: 26px; height: 26px;
  flex: none;
  overflow: visible;
  transition: transform var(--t-base) var(--ease);
}
/* Der Schriftzug in der Kopfleiste ist zweifarbig: „Agentur" im Textton,
   „orbit" im hellen Blau – dasselbe Blau wie der Knopf daneben. Das Zeichen
   bleibt davon unberührt, sein Trabant ist rot (14.08.2026 einmal blau
   probiert und von Marc verworfen).
   Das helle Blau ist sonst Überschriften ab 1,6 rem vorbehalten (2,8 : 1 auf
   Weiß) – hier gilt die Ausnahme für Wortmarken. */
.nav-orbit {
  font-style: normal;
  color: var(--leucht);
}

@media (hover: hover) and (pointer: fine) {
  .nav-brand:hover .nav-mark {
    transform: scale(1.1) rotate(-6deg);
    --mk-koerper: var(--marke-tief2);
    --mk-ring:    var(--ak);
  }
}

/* Der Planet hinter der ganzen Seite: sehr blass, fest im Fenster, wandert
   langsamer als der Inhalt. Damit er durchscheint, sind die Abschnitte
   entweder ohne Grund oder nur fast deckend – der Grundton kommt vom body. */
.wappen {
  position: fixed;
  top: 50%; left: 50%;
  width: min(112vh, 1180px);
  aspect-ratio: 1;
  margin: -4vh 0 0 0;
  translate: -50% -50%;
  background: var(--ak);
  -webkit-mask: var(--marke-maske) center / contain no-repeat;
          mask: var(--marke-maske) center / contain no-repeat;
  /* Der Planet ist eine geschlossene Scheibe – bei gleicher Deckkraft läge er
     schwerer auf der Seite als ein Zeichen mit Zeichnung darin. Deshalb steht
     sie hier niedrig. Die Breite ist größer als beim Löwen, weil das Motiv
     im quadratischen Feld flacher sitzt: der Ring macht es breit, nicht hoch. */
  opacity: .03;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
}

/* Zeichen im Abschluss – etwas kräftiger, aber immer noch Zierde */
.final-wappen {
  position: absolute;
  top: 50%; left: 50%;
  width: min(62vh, 480px);
  aspect-ratio: 1;
  translate: -50% -50%;
  background: var(--ak);
  -webkit-mask: var(--marke-maske) center / contain no-repeat;
          mask: var(--marke-maske) center / contain no-repeat;
  opacity: .07;
  pointer-events: none;
}

/* Die Abschnitte lassen den Löwen durch */
.stage, .sec, .band, .foot, .sec-final { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   Der Orbit – der Abschnitt, der den Namen erklärt
   -------------------------------------------------------------------------- */
.sec-orbit { background: rgba(255,255,255,.90); text-align: center; }
.orbit-wrap { max-width: 780px; }
.orbit-wrap .lead { margin-inline: auto; }
.orbit-vis {
  margin: var(--sp-7, 32px) auto 0;
  max-width: 620px;
}
.orbit-vis svg { display: block; width: 100%; height: auto; overflow: visible; }
/* Der Claim steht als Kleingedrucktes darunter, nicht als zweite Überschrift –
   sonst kämpfen zwei Sätze in derselben Größe um denselben Blick. */
.orbit-claim {
  margin: var(--sp-6, 24px) 0 0;
  font-size: .82rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gedaempft);
}
.sec-weiss  { background: rgba(255,255,255,.90); }
.band       { background: rgba(255,255,255,.90); }
.sec-final  { background: rgba(255,255,255,.86); }
.foot       { background: transparent; }

/* --------------------------------------------------------------------------
   Fortschritt beim Lesen
   -------------------------------------------------------------------------- */

.fortschritt {
  position: fixed;
  inset: 0 0 auto;
  height: 3px;
  z-index: 120;
  pointer-events: none;
}
.fortschritt i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--ak-hell), var(--ak-tief));
  transform: scaleX(var(--p, 0));
  transform-origin: left;
  will-change: transform;
}

/* --------------------------------------------------------------------------
   Karten mit sauberer Kante

   HIER LAG BIS 14.08.2026 DER LICHTKEGEL UNTER DEM ZEIGER: eine graue Ebene,
   die beim Überfahren aufblendete und der Maus folgte. Sie ist heraus (Marc,
   14.08.2026) – über der weißen Karte las sie sich nicht als Licht, sondern
   als dunkler Schleier über der Schrift. Übrig bleibt beim Überfahren, was
   ohnehin trägt: der Hub um wenige Pixel und die blaue Kante.

   Die Klasse selbst bleibt, denn sie tut noch zwei Dinge: sie schneidet ab,
   was über den Rand ragt (die große Ziffer der Stufenkarten), und sie hebt
   den Inhalt über dieses ::after – ohne z-index läge die Ziffer über der
   Schrift.
   -------------------------------------------------------------------------- */

.spot { position: relative; overflow: hidden; }
.spot > * { position: relative; z-index: 1; }

/* Das Kippen unter dem Zeiger ist am 14.08.2026 ausgebaut (Marc): die
   Preiskarten waren die einzigen Träger, und ihr Wackeln unter der Hand war
   es, was den Lichtstreif auf dem Knopf unruhig aussehen ließ. Näheres in
   site.js, Abschnitt 7. Die Klasse steht nicht mehr im HTML. */

/* Lichtstreif über den Hauptknopf
   -------------------------------
   ÜBERARBEITET, WEIL ER UNRUHIG WIRKTE (13.08.2026). Drei Dinge waren daran
   schuld, und alle drei sind hier behoben:

   1. Er lief RÜCKWÄRTS wieder heraus. Der Streif hing an einer `transition`
      auf `left` – beim Verlassen des Knopfes rutschte er denselben Weg zurück.
      Wer die Maus über die drei Preiskacheln zieht, sah ihn deshalb je Knopf
      zweimal, einmal davon verkehrt herum. Jetzt ist es eine `animation`, die
      genau einmal vorwärts läuft; das Verlassen beendet sie, statt sie
      umzudrehen.
   2. Er war zu hell und zu schmal. 42 % Weiß auf 45 % Breite ist eine Kante,
      die über den Knopf schneidet. Jetzt 20 % auf 70 % Breite – ein Schein,
      der über die Fläche geht, keine Klinge.
   3. Er sprang an den Rändern an und ab. Die Deckkraft blendet nun an beiden
      Enden auf und wieder weg, deshalb sieht man ihn weder kommen noch gehen.

   Langsamer ist er außerdem: 900 ms statt 640. Ein Glanz, der hetzt, wirkt
   nervös; einer, der zieht, wirkt teuer. */
.btn-fill { position: relative; overflow: hidden; }
.btn-fill::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -80%;
  width: 70%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.20), transparent);
  transform: skewX(-14deg);
  opacity: 0;
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .btn-fill:hover::after { animation: btn-glanz 900ms var(--ease) 1; }
}
@keyframes btn-glanz {
  0%   { left: -80%; opacity: 0; }
  25%  { opacity: 1; }
  75%  { opacity: 1; }
  100% { left: 120%; opacity: 0; }
}

/* --------------------------------------------------------------------------
   Kaufen: Laufzeit, Stufen, Bestellstrecke
   -------------------------------------------------------------------------- */

/* Block statt inline-flex: als inline-Kasten hing der Schalter in einer
   Textzeile, und von den 26 px Abstand nach unten kamen nur 6 px an – die
   Preiskacheln klebten an ihm. `width: fit-content` hält die Pille
   trotzdem so schmal wie ihr Inhalt. */
.laufzeit {
  display: flex;
  width: fit-content;
  gap: 4px;
  padding: 4px;
  margin: 0 0 30px;
  background: var(--weiss);
  border: 1px solid var(--rand);
  border-radius: var(--r-pill);
}
.lz {
  font: inherit;
  font-size: .88rem;
  font-weight: 600;
  padding: 9px 20px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--gedaempft);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.lz em {
  font-style: normal;
  font-size: .72rem;
  font-weight: 700;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: rgba(240,60,30,.12);
  color: var(--rot);
}
/* Der eingeschaltete Takt trägt dasselbe Signalblau wie das Schildchen der
   gewählten Betriebsart und der Knopf „Ausgewählt“ – alle drei zeigen
   dasselbe an: was gerade angeklickt ist. Der Verlauf endet in --leucht-tief,
   damit das Weiß darauf lesbar bleibt (auf reinem --leucht läge es bei
   2,8 : 1). */
.lz.is-on {
  background: linear-gradient(150deg, var(--leucht), var(--leucht-tief));
  color: #fff;
}
.lz.is-on em { background: rgba(255,255,255,.22); color: #fff; }

/* Beim Selbstbetrieb hat die Laufzeit keinen Sinn – sie wird deshalb verdeckt,
   nicht entfernt: visibility nimmt sie aus Bild, Tastatur und Vorlesehilfe,
   ihr Platz bleibt aber stehen. Sonst rückten die Preiskacheln beim
   Umschalten um Schalterhöhe plus Abstand nach oben. */
.laufzeit.ist-verdeckt { visibility: hidden; }

/* [hidden] setzt display:none nur mit der Spezifität eines Attributs – jede
   Klassenregel mit eigenem display (.laufzeit, .re-zeile, .ex) schlägt es.
   Das Merkmal versteckt sonst nichts, deshalb hier einmal mit Nachdruck. */
[hidden] { display: none !important; }

/* Betriebsart – die erste Entscheidung, deshalb zwei ganze Kacheln statt
   eines Schalters: mieten und kaufen sind nicht zwei Stufen derselben Sache. */
.bart-wahl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 0 0 32px;
  text-align: left;
}
.bart {
  font: inherit;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 24px 20px;
  background: var(--weiss);
  border: 1px solid var(--rand);
  border-radius: var(--r-card);
  cursor: pointer;
  color: var(--tinte);
  text-align: left;
  transition: border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.bart-kopf { display: flex; align-items: center; gap: 10px; }
.bart-name { font-size: 1.02rem; font-weight: 700; letter-spacing: -.02em; }
.bart-tag {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: var(--ak-hauch);
  color: var(--ak-tief);
}
.bart-satz { font-size: .88rem; line-height: 1.55; color: var(--gedaempft); }
.bart-fuss {
  margin-top: auto;
  padding-top: 8px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--blass);
  font-variant-numeric: tabular-nums;
}
.bart.is-on {
  border-color: var(--ak);
  box-shadow: var(--sh-2), inset 0 0 0 1px var(--ak);
}
/* Das Schildchen der gewählten Betriebsart („Abo" bzw. „Dauerlizenz") trägt
   das Signalblau – gleicher Verlauf und gleicher Grund wie beim Knopf
   „Ausgewählt": es zeigt an, was angeklickt ist. Die Kante der Karte bleibt
   in --ak, sonst stünde die halbe Fläche im Signalton. */
.bart.is-on .bart-tag {
  background: linear-gradient(150deg, var(--leucht), var(--leucht-tief));
  color: #fff;
}
.bart.is-on .bart-fuss { color: var(--ak-tief); }
@media (hover: hover) and (pointer: fine) {
  .bart:not(.is-on):hover { border-color: var(--ak-hell); transform: translateY(-1px); }
}

/* Was beim Selbstbetrieb gilt und beim Hosting nicht – „Dauerlizenz“ ist
   erklärungsbedürftig, soll den Preis aber nicht überstimmen: kein Kasten,
   keine weiße Fläche, nur ruhiger Text auf dem Grund. Steht darunter, nicht
   daneben. */
.lizenz-hinweis {
  max-width: 76ch;
  margin: 14px auto 0;
  padding: 0 4px;
  background: none;
  border: 0;
  border-radius: 0;
  text-align: left;
}
.lizenz-hinweis p {
  margin: 0 0 9px;
  font-size: .82rem;
  line-height: 1.7;
  color: var(--gedaempft);
}
.lizenz-hinweis p:last-child { margin-bottom: 0; }
.lizenz-hinweis b { color: var(--tinte); font-weight: 700; }

/* Beim Kauf betreibt der Kunde selbst – die Sicherung liegt dann bei ihm */
.preise.ist-kauf .nur-hosting { display: none; }

.re-zeile b small { font-size: .78rem; font-weight: 600; color: var(--blass); margin-left: 4px; }

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

.pk { cursor: pointer; }
.pk.is-gewaehlt { border-color: var(--ak); box-shadow: var(--sh-2), inset 0 0 0 1px var(--ak); }
.pk-jahr { margin: -12px 0 24px; font-size: .82rem; color: var(--gedaempft); }
.pk-waehlen { width: 100%; justify-content: center; }

.kasse {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 24px;
  margin-top: 40px;
  align-items: start;
}
.kasse-links {
  background: var(--weiss);
  border: 1px solid var(--rand);
  border-radius: var(--r-card);
  padding: 30px 30px 28px;
  box-shadow: var(--sh-1);
}
.kasse-links h3 { margin: 0 0 8px; font-size: 1.2rem; letter-spacing: -.02em; }
.kasse-hinweis { margin: 0 0 24px; font-size: .88rem; color: var(--gedaempft); }

/* Die Einrichtung ist nichts zum Ankreuzen: sie steht fest in der Rechnung.
   Deshalb sitzt sie über den Zusatzleistungen und trägt keinen Kasten mit
   Rahmen, damit sie nicht wie eine übersehene Auswahl aussieht. */
.kasse-fest {
  margin: -4px 0 22px;
  padding: 16px 18px;
  border-left: 2px solid var(--ak);
  background: var(--ak-hauch);
  border-radius: 0 var(--r) var(--r) 0;
  font-size: .86rem;
  line-height: 1.6;
  color: var(--gedaempft);
}
.kasse-fest b { color: var(--ak-tief); font-weight: 700; }

/* Der Kontaktverlauf unter den Stufen. Er gilt für alle drei, steht deshalb
   quer darunter – und er ist ein Versprechen, kein Kleingedrucktes: Fläche
   und Rahmen wie eine Karte, während Fußnote und Lizenzhinweis darunter
   bewusst ohne Kasten bleiben. Die Haarlinie der Fußnote trennt beide
   Gewichte voneinander. */
.verlauf-band {
  margin-top: 40px;
  padding: 28px 30px 26px;
  background: var(--weiss);
  border: 1px solid var(--rand);
  border-radius: var(--r-card);
  box-shadow: var(--sh-1);
}
.vb-tag {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ak);
}
.vb-tag::before {
  content: "";
  width: 22px; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--ak-hell), var(--ak));
  flex: none;
}
.verlauf-band h3 {
  margin: 0 0 10px;
  font-size: clamp(1.12rem, 1.7vw, 1.34rem);
  letter-spacing: -.02em;
}
.vb-satz {
  margin: 0;
  max-width: 74ch;
  font-size: .93rem;
  line-height: 1.65;
  color: var(--gedaempft);
}

/* Die Quellen als Zeilen, nicht als Kacheln: sie zählen etwas auf, das
   ohnehin zusammengehört – ein Raster mit Rahmen würde es wieder in
   Einzelteile zerlegen. */
.vb-quellen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 22px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.vb-quellen li {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: .9rem;
  font-weight: 600;
}
.vb-ic {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  flex: none;
  border-radius: var(--r-s);
  background: linear-gradient(150deg, rgba(255,255,255,.9), var(--ak-hauch));
  box-shadow: inset 0 0 0 1px var(--rand-hell);
  color: var(--ak-tief);
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease);
}
.vb-ic svg { width: 16px; height: 16px; }

/* Beim Überfahren der ZEILE (Marc, 14.08.2026): nicht die Kachel füllt sich
   wie bei den Zeichenkacheln, sondern das Zeichen selbst nimmt das Signalblau
   an – der Hörer wird blau, nicht weiß auf Blau. Der Zeiger steht dabei
   meist über der Schrift, deshalb hängt die Regel am <li> und nicht am
   Kachelchen: sonst müsste man das 30-px-Feld treffen. */
@media (hover: hover) and (pointer: fine) {
  .vb-quellen li:hover .vb-ic {
    color: var(--leucht);
    background: linear-gradient(150deg, rgba(255,255,255,.9), rgba(0,162,239,.10));
    box-shadow: inset 0 0 0 1px rgba(0,162,239,.28);
  }
}

.vb-fuss {
  margin: 24px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--rand-hell);
  font-size: .84rem;
  line-height: 1.6;
  color: var(--gedaempft);   /* nicht --blass: das liegt bei ~2:1 */
}

@media (max-width: 860px) {
  .vb-quellen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .verlauf-band { padding: 20px 18px 18px; }
  .vb-quellen { grid-template-columns: 1fr; }
}

/* Fußnote unter den Stufen: was die Anbieter selbst berechnen. Wie der
   Lizenzhinweis bewusst ohne Kasten – eine Haarlinie setzt beide vom
   Preisblock ab, mehr Gewicht brauchen sie nicht. */
.preis-fuss {
  margin: 34px auto 0;
  max-width: 76ch;
  padding: 20px 4px 0;
  border-top: 1px solid var(--rand);
  text-align: center;
  font-size: .82rem;
  line-height: 1.7;
  color: var(--gedaempft);
  background: none;
  border-radius: 0;
}
.preis-fuss b { color: var(--tinte); font-weight: 700; }

/* Folgt der Lizenzhinweis, trägt die Fußnote die Linie für beide – und beide
   stehen dann linksbündig, sonst liest sich der Block wie zwei Fremde. Allein
   unter den drei Stufen bleibt die Fußnote mittig. */
.preis-fuss + .lizenz-hinweis { margin-top: 12px; }
.preis-fuss:has(+ .lizenz-hinweis:not([hidden])) { text-align: left; }

.extras { display: flex; flex-direction: column; gap: 12px; }
.ex {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--rand);
  border-radius: var(--r);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.ex input { margin: 3px 0 0; width: 17px; height: 17px; accent-color: var(--ak); flex: none; cursor: pointer; }
.ex-txt b { display: block; font-size: .95rem; }
.ex-txt small { display: block; font-size: .84rem; color: var(--gedaempft); line-height: 1.5; margin-top: 2px; }
.ex-preis { margin-left: auto; font-size: .86rem; font-weight: 700; white-space: nowrap; color: var(--ak-tief); }
.ex:has(input:checked) { border-color: var(--ak); background: var(--ak-hauch); }
@media (hover: hover) and (pointer: fine) {
  .ex:hover { border-color: var(--ak-hell); }
}

.rechnung {
  position: sticky;
  top: 74px;
  background: var(--weiss);
  border: 1px solid var(--rand);
  border-radius: var(--r-card);
  padding: 26px 24px 28px;
  box-shadow: var(--sh-2);
}
.re-zeile {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin: 0; padding: 11px 0;
  font-size: .92rem;
  border-top: 1px solid var(--rand-hell);
}
.rechnung > .re-zeile:first-child { border-top: 0; padding-top: 0; }
/* NUR die Beschriftung, nicht jedes span: Die Beträge stecken selbst in
   einem span (damit JavaScript sie tauschen kann) und sitzen im <b>. Eine
   Regel auf `.re-zeile span` traf sie mit und schrieb die Zahl grau und
   klein neben ein großes schwarzes €-Zeichen. Derselbe Fallstrick wie bei
   `.pk-preis span` – deshalb hier wie dort der Kindselektor. */
.re-zeile > span { color: var(--gedaempft); }
.re-zeile b { font-variant-numeric: tabular-nums; }
.re-summe {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 14px 0 0; padding: 18px 0 4px;
  border-top: 2px solid var(--rand);
}
.re-summe > span { font-size: .92rem; color: var(--gedaempft); }
.re-summe b { font-size: 1.9rem; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.re-summe small { font-size: .78rem; font-weight: 600; color: var(--blass); margin-left: 5px; }
.re-einmal { border-top: 0; padding-top: 0; }
.re-hinweis { margin: 14px 0 20px; font-size: .78rem; color: var(--gedaempft); }
.btn-kasse { width: 100%; justify-content: center; }
.re-vertrauen { margin: 22px 0 0; padding: 0; list-style: none; }
.re-vertrauen li {
  position: relative;
  padding: 7px 0 7px 24px;
  font-size: .84rem;
  color: var(--gedaempft);
}
.re-vertrauen li::before {
  content: "";
  position: absolute;
  left: 2px; top: 14px;
  width: 10px; height: 6px;
  border-left: 2px solid var(--ak);
  border-bottom: 2px solid var(--ak);
  rotate: -45deg;
}

.stage-fuss { margin: 18px 0 0; font-size: .84rem; color: var(--gedaempft); }

/* --------------------------------------------------------------------------
   Terminierung

   Derselbe Aufbau wie die Terminseite des Dashboards: links die Angaben zum
   Gespräch, rechts die Wahl. Der linke Flügel ist das einzige dunkle Feld der
   ganzen Seite – er trägt den Löwen als Wasserzeichen und hält den Kasten
   fest, der sonst als weiße Fläche im weißen Abschnitt verschwände. Die
   Farben sind die der Marke (--ak-tief → --marke-tief), keine neuen.
   -------------------------------------------------------------------------- */

.tm {
  display: grid;
  grid-template-columns: 322px 1fr;
  margin-top: clamp(26px, 3vw, 38px);
  background: var(--weiss);
  border: 1px solid var(--rand);
  border-radius: var(--r-card);
  box-shadow: var(--sh-3);
  overflow: hidden;
}

/* --- Linker Flügel --- */
.tm-info {
  position: relative;
  padding: 30px 28px 28px;
  background: linear-gradient(168deg, var(--ak-tief) 0%, var(--marke-tief) 84%);
  color: #fff;
  overflow: hidden;
}
/* Der Planet sitzt angeschnitten in der unteren Ecke – groß genug, dass die
   Silhouette trägt, blass genug, dass die Fakten darüber lesbar bleiben. */
.tm-wappen {
  position: absolute;
  /* Der Planet sitzt mittig in einem quadratischen Feld und füllt nur dessen
     Mitte – ein Ausschnitt, der auf den Rand des Feldes zielt, bleibt leer.
     Deshalb liegt das Zentrum hier knapp UNTERHALB der rechten unteren Ecke,
     nicht das Feld. */
  right: -40%; bottom: -36%;
  width: 88%;
  aspect-ratio: 1;
  background: #fff;
  -webkit-mask: var(--marke-maske) center / contain no-repeat;
          mask: var(--marke-maske) center / contain no-repeat;
  opacity: .1;
  pointer-events: none;
}
.tm-info-in { position: relative; z-index: 1; display: flex; flex-direction: column; height: 100%; }
.tm-eyebrow {
  margin: 0 0 10px;
  font-size: .68rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.6);
}
.tm-titel { margin: 0 0 10px; font-size: 1.45rem; letter-spacing: -.028em; line-height: 1.15; }
.tm-text { margin: 0 0 24px; font-size: .89rem; line-height: 1.6; color: rgba(255,255,255,.76); }
.tm-fakten { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.tm-fakten li { display: flex; gap: 12px; align-items: flex-start; }
.tm-fakt-ic {
  display: grid; place-items: center;
  width: 30px; height: 30px; flex: none;
  border-radius: var(--r-s);
  background: rgba(255,255,255,.1);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}
.tm-fakt-ic svg { width: 16px; height: 16px; }
.tm-fakten b     { display: block; font-size: .91rem; }
.tm-fakten small { display: block; font-size: .79rem; color: rgba(255,255,255,.58); }
.tm-info-fuss {
  margin: 26px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.16);
  font-size: .84rem;
  color: rgba(255,255,255,.62);
}
.tm-info-fuss a {
  color: #fff; font-weight: 700;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid rgba(255,255,255,.34);
}

/* --- Rechte Seite --- */
.tm-inhalt { padding: 26px 28px 28px; min-width: 0; }

.tm-schritte {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 22px; padding: 0 0 18px;
  list-style: none;
  border-bottom: 1px solid var(--rand);
  font-size: .82rem; font-weight: 600;
  color: var(--blass);
}
.tm-schritt { display: flex; align-items: center; gap: 8px; }
.tm-schritt-nr {
  display: grid; place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--grund-tief);
  color: var(--gedaempft);
  font-size: .74rem; font-weight: 700;
}
.tm-schritt.is-aktiv { color: var(--tinte); }
.tm-schritt.is-aktiv .tm-schritt-nr { background: var(--ak); color: #fff; }
.tm-schritt.is-fertig { color: var(--ak-tief); }
.tm-schritt.is-fertig .tm-schritt-nr { background: var(--ak-hauch); color: var(--ak-tief); }

/* Schritt 1 – Woche, Tage, Zeiten */
.tm-woche { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.tm-woche-spanne { font-size: 1.02rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tm-frei { margin-top: 2px; font-size: .84rem; color: var(--gedaempft); }
.tm-woche-nav { display: flex; gap: 6px; }
.tm-pfeil {
  font: inherit; font-size: 1.15rem; line-height: 1;
  width: 34px; height: 34px;
  border: 1px solid var(--rand);
  border-radius: var(--r-s);
  background: var(--weiss);
  color: var(--ak-tief);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.tm-pfeil[disabled] { color: var(--blass); cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .tm-pfeil:not([disabled]):hover { border-color: var(--ak-hell); background: var(--ak-hauch); }
}

.tm-tage { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 16px 0 22px; }
.tm-tag {
  font: inherit;
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 6px 11px;
  border: 1px solid var(--rand);
  border-radius: var(--r);
  background: var(--weiss);
  color: var(--tinte);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.tm-tag-wt   { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blass); }
.tm-tag-nr   { font-size: 1.02rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tm-tag-frei { font-size: .73rem; color: var(--gedaempft); }
.tm-tag.is-aktiv { border-color: var(--ak); background: var(--ak-hauch); box-shadow: inset 0 0 0 1px var(--ak); }
.tm-tag.is-leer  { cursor: default; background: var(--grund); }
.tm-tag.is-leer .tm-tag-nr, .tm-tag.is-leer .tm-tag-frei { color: var(--blass); }
/* Heute ist die eine Stelle, an der Rot erlaubt ist – wie im Kalender. */
.tm-tag.is-heute .tm-tag-wt { color: var(--rot); }
@media (hover: hover) and (pointer: fine) {
  .tm-tag:not(.is-aktiv):not(.is-leer):hover { border-color: var(--ak-hell); transform: translateY(-1px); }
}

.tm-zeiten-kopf { margin-bottom: 12px; font-size: .92rem; font-weight: 700; letter-spacing: -.015em; }
.tm-zeiten { display: grid; grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: 8px; }
.tm-slot {
  font: inherit; font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 10px 4px;
  border: 1px solid var(--rand);
  border-radius: var(--r-s);
  background: var(--weiss);
  color: var(--ak-tief);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.tm-slot[disabled] { color: var(--blass); background: var(--grund); cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .tm-slot:not([disabled]):hover { border-color: var(--ak); background: var(--ak-hauch); transform: translateY(-1px); }
}
.tm-leer {
  margin: 0;
  padding: 22px 18px;
  border: 1px dashed var(--rand);
  border-radius: var(--r);
  font-size: .9rem;
  color: var(--gedaempft);
  text-align: center;
}
.tm-hinweis { margin: 18px 0 0; font-size: .8rem; line-height: 1.6; color: var(--gedaempft); }

/* Schritt 2 – Kontakt */
.tm-zurueck {
  font: inherit; font-size: .86rem; font-weight: 600;
  margin: 0 0 14px; padding: 0;
  border: 0; background: none;
  color: var(--ak-tief);
  cursor: pointer;
}
.tm-gewaehlt {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px;
  border-left: 2px solid var(--ak);
  border-radius: 0 var(--r) var(--r) 0;
  background: var(--ak-hauch);
  color: var(--ak-tief);
}
.tm-gewaehlt-ic svg { width: 20px; height: 20px; display: block; }
.tm-gewaehlt-wann  { display: block; font-weight: 700; color: var(--tinte); }
.tm-gewaehlt-dauer { display: block; font-size: .84rem; color: var(--gedaempft); font-variant-numeric: tabular-nums; }

.tm-form  { display: grid; gap: 14px; margin-top: 18px; }
.tm-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tm-feld  { display: grid; gap: 6px; min-width: 0; }
.tm-feld > span, .tm-feld legend {
  font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--gedaempft);
}
.tm-feld input, .tm-feld textarea {
  font: inherit; font-size: .95rem;
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--rand);
  border-radius: var(--r);
  background: var(--weiss);
  color: var(--tinte);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.tm-feld textarea { resize: vertical; line-height: 1.5; }
.tm-feld input:focus, .tm-feld textarea:focus {
  outline: 0;
  border-color: var(--ak);
  box-shadow: 0 0 0 3px var(--ak-hauch);
}
.tm-feld-art { border: 0; padding: 0; margin: 0; min-width: 0; }
.tm-feld-art legend { padding: 0; margin-bottom: 8px; }
.tm-art { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
/* Agentur/Makler sind nur zwei – steht vor der schmalen Abfrage weiter
   unten, damit dort beide Reihen einspaltig werden. */
.tm-art-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tm-art-wahl {
  position: relative;
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 13px;
  border: 1px solid var(--rand);
  border-radius: var(--r);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
/* Das Kästchen selbst ist weg, die Kachel IST der Schalter – aber der
   Zustand muss sofort stehen, nicht erst nach dem Absenden: das macht
   :has(input:checked), nicht eine Klasse aus dem Skript. */
.tm-art-wahl input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.tm-art-ic { color: var(--ak-tief); flex: none; }
.tm-art-ic svg { width: 19px; height: 19px; display: block; }
.tm-art-wahl b     { display: block; font-size: .92rem; }
.tm-art-wahl small { display: block; font-size: .79rem; line-height: 1.45; color: var(--gedaempft); }
.tm-art-wahl:has(input:checked) { border-color: var(--ak); background: var(--ak-hauch); box-shadow: inset 0 0 0 1px var(--ak); }
.tm-art-wahl:has(input:focus-visible) { outline: 2px solid var(--ak); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .tm-art-wahl:not(:has(input:checked)):hover { border-color: var(--ak-hell); }
}
.tm-fehler { margin: 0; font-size: .86rem; font-weight: 600; color: var(--rot); }
.tm-senden { width: 100%; justify-content: center; }

/* Schritt 3 – fertig */
.tm-fertig { text-align: center; }
.tm-fertig-zeichen {
  display: grid; place-items: center;
  width: 52px; height: 52px;
  margin: 6px auto 16px;
  border-radius: 50%;
  background: var(--ak-hauch);
  color: var(--ak-tief);
}
.tm-fertig-zeichen svg { width: 26px; height: 26px; }
.tm-fertig h3 { margin: 0 0 6px; font-size: 1.4rem; letter-spacing: -.025em; }
.tm-fertig-wann { margin: 0 0 10px; font-weight: 700; }
.tm-fertig-text { margin: 0 auto 20px; max-width: 46ch; font-size: .92rem; color: var(--gedaempft); }
.tm-daten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 22px; text-align: left; }
.tm-daten > div { padding: 12px 14px; background: var(--grund); border-radius: var(--r); }
.tm-daten dt { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blass); }
.tm-daten dd { margin: 3px 0 0; font-size: .95rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.tm-fertig .cta-row { justify-content: center; }

/* Ohne JavaScript werden weder Tage noch Zeiten gerechnet – dann steht statt
   des leeren Gerüsts der kurze Weg. Das Gerüst selbst deckt das Skript auf. */
.js .tm-ohne-js { display: none; }
.tm-ohne-js p { margin: 0 0 16px; font-size: .95rem; color: var(--gedaempft); }
.tm-ohne-js b { color: var(--tinte); }

/* --------------------------------------------------------------------------
   Schmale Schirme
   -------------------------------------------------------------------------- */

@media (max-width: 1040px) {
  .grid4 { grid-template-columns: repeat(2, 1fr); }
  .preise { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
  .pk.is-empfohlen { order: -1; }
  .pk-satz { min-height: 0; }
  .kasse { grid-template-columns: 1fr; }
  .rechnung { position: static; }
}

@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-brand { margin-right: auto; }
  .tri, .stairs { grid-template-columns: 1fr; }
  .stair:nth-child(2), .stair:nth-child(3) { margin-top: 0; }
  .split-grid, .marke { grid-template-columns: 1fr; }
  #planen .shot, #auswerten .shot { order: -1; }
  .specs > div { grid-template-columns: 1fr; gap: 4px; }
  .band-grid > div + div::before { display: none; }
  /* Der dunkle Flügel legt sich über die Wahl, statt daneben zu stehen; der
     Löwe rückt dabei an den rechten Rand, sonst stünde er unter dem Text. */
  .tm { grid-template-columns: 1fr; }
  .tm-info { padding: 26px 24px 24px; }
  .tm-wappen { right: -8%; bottom: -30%; width: 44%; }
  .tm-info-fuss { margin-top: 22px; }
  .tm-art { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .wrap { width: min(100% - 32px, var(--spur)); }
  .nav-in { gap: 10px; }
  .nav-brand { min-width: 0; font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Das Zahnrad ist ausgenommen: es trägt zwar `.btn-sm`, ist aber rund und
     30 px breit. Mit `padding: 6px 13px` blieben innen 4 px übrig und das
     Rädchen wurde vom Flexverbund auf einen Punkt zusammengedrückt. */
  .nav .btn-sm:not(.vwlog-knopf) { flex: none; padding: 6px 13px; font-size: .78rem; }
  .band-grid { grid-template-columns: repeat(2, 1fr); gap: 30px 20px; }
  .grid4 { grid-template-columns: 1fr; }
  .mcard { flex-basis: 80vw; }
  /* Am Telefon steht alles untereinander. Die Bühne darf hier die volle
     Breite haben, schmaler wäre sie nicht mehr zu erkennen.
     Der Bodenschatten bleibt INNERHALB der Bühne: sonst läuft er unter die
     Kante, die `overflow-x: clip` am Rumpf zieht, und endet dort
     abgeschnitten statt ausgelaufen. */
  .shot-gross .mon { width: 100%; }
  .nb-raum { perspective: 640px; }
  .nb-boden { left: 0; right: 0; top: 96%; height: 14%; filter: blur(12px); }
  .nb-schein { display: none; }
  /* Die Bühne muss hier MITGENANNT werden: `.shot-gross .mon-boden` wiegt
     schwerer als `.mon-boden`, und eine Medienabfrage erhöht die Spezifität
     nicht – sonst behielte die Bühne am Telefon ihren überstehenden
     Schatten und liefe in die Kante von `overflow-x: clip`. */
  .mon-boden, .shot-gross .mon-boden { left: 0; right: 0; top: 96%; height: 14%; filter: blur(12px); }
  .mon-schein, .shot-gross .mon-schein { display: none; }
  .kasse-links { padding: 20px 18px 18px; }
  .ex { flex-wrap: wrap; }
  .ex-preis { margin-left: 29px; }
  .wappen { width: 150vw; opacity: .024; }

  /* Die vier Menüwörter der Mini-App gehen hier weg. Sie zeigen ohnehin nur,
     dass es ein Menü gibt; zusammengequetscht auf 375 px zeigen sie das
     schlechter als gar nicht, und sie sind der Grund, warum die Zeile nicht
     schmaler werden kann. Was die Farbe demonstrieren soll – Zeichen,
     Kennzahlen, Karte, Knöpfe – bleibt vollständig stehen. */
  .ma-nav { display: none; }
  .ma-kpi { gap: 6px; }
  .ma-kpi span { padding: 8px 8px 9px; }

  /* Fünf Tage müssen nebeneinander bleiben – eine Woche, die man scrollen
     muss, ist keine Übersicht mehr. Also wird der Tag schmaler statt
     weniger: die Zählung „3 frei“ geht, der Tag bleibt. */
  .tm-inhalt { padding: 22px 18px 24px; }
  .tm-tage { gap: 5px; }
  .tm-tag { padding: 9px 2px 10px; }
  .tm-tag-wt { font-size: .62rem; letter-spacing: .06em; }
  .tm-tag-nr { font-size: .88rem; }
  .tm-tag-frei { display: none; }
  .tm-zeiten { grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); }
  .tm-reihe { grid-template-columns: 1fr; }
  .tm-daten { grid-template-columns: 1fr; gap: 8px; }
  .tm-schritte { gap: 7px; font-size: .78rem; }
}

/* --------------------------------------------------------------------------
   Rücksichten
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .rv { translate: none; transition: opacity 200ms linear; }
  .btn:active, .sw:active { transform: none; }
  /* Parallaxe steht still, nichts dreht sich; JS setzt ohnehin keine Werte
     mehr, das hier fängt bereits gesetzte ab. */
  .blob, .raster-flaeche, .nb-korpus, .wappen { transform: none !important; }
  /* Hier stand die Ausnahme fürs Aufklappen (der Deckel behält seine Lehne,
     `transform: none` hätte das Gerät senkrecht gestellt wie ein Bild an der
     Wand). Sie ist mit dem Aufklappen weg – auf der Bühne steht seit dem
     14.08.2026 der Arbeitsplatz, und beide Notebooks stehen ohnehin offen. */
  /* Die Rollen-Stufen bringen ihre Zeiten selbst mit und wiegen schwerer als
     der Sammelblock weiter unten – deshalb hier eigens: die Karte hebt sich
     nicht. Farbwechsel dürfen bleiben, Bewegung nicht – Schatten und
     Ziffernfarbe blenden weiter über, nur kürzer und gleichmäßig. */
  .js .rv.stair { transition: opacity 200ms linear, box-shadow 200ms linear,
                              --zif 200ms linear, --zif0 200ms linear; }
  .stair:hover { transform: none; }
  /* Die Dreierkacheln bringen ihre Zeiten seit dem 14.08.2026 ebenfalls selbst
     mit und wiegen schwerer als der Sammelblock weiter unten – deshalb auch
     sie hier eigens: Kante ja, Hub nein. */
  .js .rv.tri-c { transition: opacity 200ms linear, border-color 200ms linear; }
  .tri-c:hover { transform: none; }
  .btn-fill::after { display: none; }
  /* Die Mitte des Knopfes hängt an der Einzeleigenschaft `translate`,
     deshalb genügt hier transform:none – sonst rutschte er ein zweites Mal. */
  *, *::before, *::after {
    transition-property: opacity, color, background-color, border-color, box-shadow;
    animation-duration: .01ms !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .nav { background: var(--weiss); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .blob { display: none; }
}

@media (prefers-contrast: more) {
  :root { --gedaempft: #4a5358; --blass: #5e686d; --rand: #c9d2d6; }
  .blob, .raster-flaeche { display: none; }
  /* Verlaufsschrift und verblassende Ränder nehmen Kontrast weg – genau das,
     was hier nicht gewollt ist. Die Zahlen stehen dann wieder in einer Farbe,
     die Schiene endet mit einer Kante statt mit einem Schleier. */
  .band-grid b { background: none; -webkit-text-fill-color: var(--ak-tief); color: var(--ak-tief); }
  .rail { -webkit-mask-image: none; mask-image: none; }
  .stair::after { display: none; }
  .stage::before { display: none; }
}

@media print {
  .nav, .rail-dots, .par-schicht { display: none; }
  .sec, .band { padding: 24px 0; }
  .rail { -webkit-mask-image: none; mask-image: none; flex-wrap: wrap; overflow: visible; }
  .band-grid b { background: none; -webkit-text-fill-color: var(--ak-tief); color: var(--ak-tief); }
  .stair::after, .stage::before { display: none; }
}

/* ==========================================================================
   Rechtstexte (impressum.html, datenschutz.html)

   Zwei eigenständige Seiten in derselben Formensprache, aber ohne Bühne,
   ohne Einblendungen und ohne Menü – Pflichtangaben liest man, man scrollt
   nicht durch sie hindurch. Die Textspur ist bewusst schmal (68 Zeichen).

   `.rt-todo` markiert ROT, was noch fehlt. Erfunden wird nichts: eine
   Steuernummer, die niemand eingetragen hat, steht hier sichtbar als Lücke
   und nicht als Platzhalter, den man beim Veröffentlichen übersieht.
   ========================================================================== */
.rt-seite { padding: calc(var(--nav-h, 64px) + 44px) 0 90px; }
.rt-spur  { max-width: 760px; }
.rt-kopf  { margin-bottom: 40px; padding-bottom: 26px; border-bottom: 1px solid var(--rand); }
.rt-kopf h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); letter-spacing: -.03em; margin: 6px 0 10px; }
.rt-kopf p  { color: var(--gedaempft); margin: 0; }
.rt-seite h2 {
  font-size: 1.18rem; letter-spacing: -.015em; margin: 42px 0 12px;
  padding-top: 22px; border-top: 1px solid var(--rand-hell);
}
.rt-seite h3 { font-size: .98rem; margin: 26px 0 8px; }
/* Die erste Überschrift steht direkt unter dem Kopf – dessen Linie genügt,
   sonst liegen zwei Trennlinien mit einem leeren Streifen dazwischen. */
.rt-kopf + h2 { border-top: none; padding-top: 0; margin-top: 0; }
.rt-seite p, .rt-seite li { color: var(--tinte); line-height: 1.7; }
.rt-seite p { margin: 0 0 14px; }
.rt-seite ul { margin: 0 0 16px; padding-left: 20px; }
.rt-seite li { margin-bottom: 7px; }
.rt-seite a { color: var(--ak-tief); }
/* Anschriften und Kontaktblöcke: gesetzt wie im Brief, nicht wie Fließtext */
.rt-block {
  margin: 0 0 18px; padding: 18px 20px;
  background: var(--weiss); border: 1px solid var(--rand); border-radius: var(--r-card, 12px);
  line-height: 1.65;
}
.rt-block b { display: block; margin-bottom: 4px; }
.rt-todo {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  background: rgba(240,60,30,.10); color: #c02c12;
  font-size: .84em; font-weight: 600; letter-spacing: .01em;
}
.rt-fuss { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--rand); color: var(--gedaempft); font-size: .9rem; }
.nav-zurueck { margin-left: auto; font-size: .92rem; color: var(--gedaempft); text-decoration: none; }
.nav-zurueck:hover { color: var(--tinte); }