/* Clustoria www: Startseite, Stand 4 (12.10.2026: Interaktion und
   Hervorhebungen, nachgebessert 13.10.; Stand 3: Foto im Hero,
   Plattform-Grafik nach der Skizze des Gruenders, Kundenstimmen-Band).
   Bauart nach dem Vorbild von zendesk.de und qualtrics.com/de (Entscheid des
   Gruenders vom 12.10.2026): schwebende weisse Kopfleiste mit Aufklappmenues,
   Hero auf voller Violett-Flaeche mit dem Foto des Gruenders und zwei Karten
   aus echten App-Ausschnitten, Vertrauensleiste, Schritt-Leiste (Sammeln,
   Verstehen, Antworten, Auswerten), vier Funktionsbloecke mit Aufklappliste
   und Grafik oder App-Ausschnitt im runden Rahmen, Kundenstimmen-Band mit
   zwei Bildkarten, Datenschutz-Band mit einem weissen Kasten, Team,
   Schluss-Band, grosser Fuss. Farbwelt: Weiss mit kraeftigen Violett-
   Baendern.
   Schrift: Inter, selbst gehostet (Bloecke aus landing.css kopiert).
   Menues oeffnen ohne Skript ueber :hover und :focus-within, am Telefon
   ueber <details>; die Linien der Themen-Grafik sind dehnbare Flex-Faeden.
   Stand 4 (Abschnitt am Ende): ein Wort je Ueberschrift in Violett mit
   Marker-Strich, violette Etikett-Pillen, Logo-Band, Demo-Rahmen der
   Schritte, Bildwechsel der Aufklapplisten, die Karte mit dem tippenden
   Entwurf, Bewegung beim Erscheinen (nur mit Skript, Klasse .js am html;
   ohne Skript steht alles), Hover-Lifts; prefers-reduced-motion schaltet
   jede Bewegung ab. Bewegt werden nur transform, opacity und
   background-size.
   Stand 5 (13.10.2026): das Stylesheet ALLER Seiten. Die Unterseiten
   (Hero-Band, Text-Bild-Bloecke, Karten, Kontakt) stehen am Ende; die
   Rechtsseiten (.prosa) und die Datenschutz-Unterseite (.architektur) tragen
   ihre Regeln aus landing.css (bis 12.10.2026) unveraendert, nur der Abstand
   nach oben rechnet die schwebende Kopfleiste ein.
   Stand 6 (13.10.2026, Wuensche des Gruenders): die vier Funktionsbloecke
   sind Karten in einem Stapel (.stapel: am Bildschirm haften sie unter der
   Kopfleiste, die vorige blendet aus; nur Deckkraft, ohne Skript; seit
   Stand 7 kompakte Karten wie bei Studyly, rund 420 px hoch, mit drei
   Reitern statt der Aufklappliste, haftend ab 64rem), der Block
   Auswerten zeigt die ganze Statistik-Seite (.wechsel--ganz), und "Das sagen
   Kunden" ist eine Ueberschrift in der Groesse der Block-Ueberschriften.
   Stand 6b (13.10.2026): der Demo-Rahmen ist ein Film aus Szenen, die von
   selbst ineinander blenden. Stand 7 (13.10.2026, Fassung 2): ein Mauszeiger
   klickt die Knoepfe, die Mail wird an Ort und Stelle maskiert (Karte), der
   Entwurf fliesst ins Feld; der Ring ist weg. Stand 7b (13.10.2026,
   Nachbesserung nach der Pruefung): Kamera an Entwurf und Sende-Dialog,
   der Text Wort fuer Wort, die Liste unter "Erledigt" rollt (Streifen), der
   Klick-Kreis hebt sich von jedem Grund ab, die Markierung der Signatur
   traegt das Flieder der Karte; die Schreibmarke heisst .schreibmarke (als
   .marke traf sie das Logo der Kopfleiste). */

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-var.woff2?v=31") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter Ersatz";
  src: local("Arial"), local("ArialMT");
  font-weight: 100 550;
  size-adjust: 105%;
  ascent-override: 92.3%;
  descent-override: 23%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Inter Ersatz";
  src: local("Arial Bold"), local("Arial-BoldMT");
  font-weight: 551 900;
  size-adjust: 98.5%;
  ascent-override: 98.4%;
  descent-override: 24.5%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Inter Ersatz Schau";
  src: local("Arial"), local("ArialMT");
  font-weight: 100 550;
  size-adjust: 102%;
  ascent-override: 95%;
  descent-override: 23.6%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Inter Ersatz Schau";
  src: local("Arial Bold"), local("Arial-BoldMT");
  font-weight: 551 900;
  size-adjust: 94%;
  ascent-override: 103.1%;
  descent-override: 25.7%;
  line-gap-override: 0%;
}

:root {
  color-scheme: light;
  --grund: #fbf9fe;
  --weiss: #ffffff;
  --flieder: #efe8fa;
  --sand: #f4ecdd;
  --violett: #752eb0;
  --violett-tief: #5a1f8d;
  --auf-violett: #ecdff9;
  --tinte: #1c1922;
  --tinte-2: #595266;
  --tinte-sand: #5a4d3a;
  --linie: #e6deef;
  /* dieselbe feine Linie auf Flieder (die Reiter in einer Flieder-Karte) */
  --linie-flieder: #dccfee;
  /* Stimmung "Positiv" und "Kritisch" wie die Chips der App (gruen bzw.
     rot auf einer hellen Waschung des Tons; --stamp-done und
     --stamp-critical in frontend/src/app/globals.css) */
  --gruen-hell: #e3f3ea;
  --gruen: #1b5e3a;
  --rot-hell: #f7dee0;
  --rot: #be0214;
  /* der gruene Punkt des Demo-Abzeichens */
  --gruen-punkt: #22c55e;
  /* Fuss: helle Schrift auf Tinte */
  --fuss-schrift: #d9d3e3;
  /* Grund hinter dem Portraet der Datenschutz-Unterseite */
  --portraet: #9387b0;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --schrift: "Inter", "Inter Ersatz", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --schrift-schau: "Inter", "Inter Ersatz Schau", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --rand: clamp(1rem, 4vw, 2.5rem);
  --breite: 78rem;
  /* Kopf: 1rem Luft oben plus die 3.5rem hohe schwebende Leiste */
  --leiste: 3.5rem;
  --kopf: calc(var(--leiste) + 1rem);
  /* Haftlinie des Stapels der vier Funktionsbloecke: 1rem unter der Leiste */
  --haft: calc(var(--kopf) + 1rem);
  --r-xl: 1.75rem;
  --r-l: 1.25rem;
  --r-m: 0.875rem;
  --schatten: 0 1px 2px rgb(64 32 104 / 0.06), 0 16px 36px -18px rgb(64 32 104 / 0.28);
  --schatten-fenster: 0 1px 2px rgb(64 32 104 / 0.08), 0 28px 60px -30px rgb(64 32 104 / 0.45);
  --schatten-leiste: 0 1px 2px rgb(28 25 34 / 0.08), 0 10px 30px -12px rgb(28 25 34 / 0.35);
  --aus: cubic-bezier(0.16, 1, 0.3, 1);
  /* Abstand der grossen Abschnitte (600 bis 900 px hoch bei 1440) */
  --abschnitt: clamp(3.5rem, 7vw, 6rem);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--kopf) + 0.5rem);
}

body {
  margin: 0;
  background: var(--weiss);
  color: var(--tinte);
  font: 400 1.0625rem/1.55 var(--schrift);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

h1, h2, h3 {
  margin: 0;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.022em;
}
h1, .schritte h2, .sicher h2, .team h2, .schluss h2 { font-family: var(--schrift-schau); }
p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
p { text-wrap: pretty; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 0.07em; text-underline-offset: 0.22em; }
b, strong { font-weight: 600; }
button { font: inherit; color: inherit; }
summary { cursor: pointer; }
mark { color: inherit; }
/* Wortgruppe, die nie am Bindestrich bricht (Wortlaut des Gruenders) */
.fest { white-space: nowrap; }

:focus-visible { outline: 2px solid var(--violett); outline-offset: 3px; border-radius: 0.375rem; }
::selection { background: var(--violett); color: var(--weiss); }

.rahmen { width: min(100% - 2 * var(--rand), var(--breite)); margin-inline: auto; }

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.sprung {
  position: absolute;
  top: -5rem;
  left: var(--rand);
  z-index: 30;
  padding: 0.75rem 1.25rem;
  border-radius: 999px;
  background: var(--tinte);
  color: var(--grund);
}
.sprung:focus { top: 0.75rem; }

.symbole { position: absolute; width: 0; height: 0; }
.zeichen { flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Knopf: immer eine Pille ---------- */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3.25rem;
  padding: 0.75rem 1.75rem;
  border-radius: 999px;
  background: var(--violett);
  color: var(--weiss);
  font-weight: 550;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 180ms var(--aus), transform 200ms var(--aus), box-shadow 200ms var(--aus);
}
.knopf:hover { background: var(--violett-tief); transform: translateY(-2px); box-shadow: 0 12px 24px -12px rgb(28 25 34 / 0.55); }
.knopf:active { transform: translateY(0); box-shadow: none; }
.knopf--klein { min-height: 2.75rem; padding: 0.5rem 1.25rem; font-size: 0.9375rem; }
/* helle Pille auf Violett (wie die hellblaue Pille bei Qualtrics) */
.knopf--hell { background: var(--auf-violett); color: var(--violett-tief); }
.knopf--hell:hover { background: var(--weiss); }
/* Pille mit Rand auf Weiss (zweiter Knopf im Datenschutz-Kasten) */
.knopf--rand { background: transparent; color: var(--violett-tief); box-shadow: inset 0 0 0 1.5px var(--violett); }
.knopf--rand:hover { background: var(--flieder); }

/* ---------- Kopf: schwebende weisse Leiste ----------
   Die Leiste schwebt mit 1rem Abstand auf der Violett-Flaeche und haftet
   beim Scrollen oben (sticky). Der Kopf nimmt keine Hoehe im Fluss ein
   (negativer unterer Rand), damit das Violett des Heros hinter ihm beginnt. */
.kopf {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--kopf);
  margin-bottom: calc(-1 * var(--kopf));
  padding: 1rem var(--rand) 0;
}
.leiste {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: min(100%, 85rem);
  height: var(--leiste);
  margin-inline: auto;
  padding: 0 0.5rem 0 1.25rem;
  border-radius: 999px;
  background: var(--weiss);
  box-shadow: var(--schatten-leiste);
}
.marke { display: inline-flex; align-items: center; gap: 0.625rem; min-height: 2.75rem; padding-block: 0.375rem; text-decoration: none; }
.marke-bild { width: auto; height: 1.875rem; }
.marke-schrift { width: auto; height: 0.75rem; }

.menue { margin-left: 0.75rem; }
.menue > ul { display: flex; gap: 0.125rem; }
.menue-punkt { position: relative; }
.menue-kopf {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.875rem;
  border: 0;
  border-radius: 999px;
  background: none;
  font-size: 1rem;
  font-weight: 550;
  cursor: pointer;
}
.menue-kopf .zeichen { width: 0.875rem; height: 0.875rem; stroke-width: 2.2; transition: transform 180ms var(--aus); }
.menue-punkt:hover .menue-kopf,
.menue-punkt:focus-within .menue-kopf { background: var(--flieder); color: var(--violett-tief); }
.menue-punkt:hover .menue-kopf .zeichen,
.menue-punkt:focus-within .menue-kopf .zeichen { transform: rotate(180deg); }
/* Die Liste haengt unter dem Menuepunkt; der obere Innenabstand ist die
   Bruecke, ueber die der Zeiger vom Knopf zur Liste faehrt, ohne dass sie
   zuklappt. */
.menue-liste {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1;
  min-width: 17.5rem;
  padding-top: 0.625rem;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-0.25rem);
  transition: opacity 160ms var(--aus), transform 160ms var(--aus), visibility 0s 160ms;
}
.menue-liste ul {
  padding: 0.5rem;
  border: 1px solid var(--linie);
  border-radius: var(--r-l);
  background: var(--weiss);
  box-shadow: var(--schatten-fenster);
}
.menue-liste a {
  display: block;
  padding: 0.625rem 0.875rem;
  border-radius: var(--r-m);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.menue-liste a:hover, .menue-liste a:focus-visible { background: var(--flieder); color: var(--violett-tief); }
/* der Eintrag der aktuellen Seite (setzt werkzeug/seiten/bauen.py) */
.menue-liste a[aria-current], .tel-tafel a[aria-current] { color: var(--violett-tief); font-weight: 600; }
.menue-punkt:hover .menue-liste,
.menue-punkt:focus-within .menue-liste { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }

.kopf-rechts { display: flex; align-items: center; gap: 0.75rem; margin-left: auto; }
.kopf-anmelden { padding: 0.625rem 0.75rem; font-weight: 550; text-decoration: none; }
.kopf-anmelden:hover { text-decoration: underline; }

/* Telefon-Menue: ein <details>, ohne Skript. Die Tafel haengt unter der
   Leiste und ueberlagert den Hero. */
.tel { display: none; }
.tel summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  list-style: none;
}
.tel summary::-webkit-details-marker { display: none; }
.tel summary .zeichen { width: 1.375rem; height: 1.375rem; stroke-width: 2; }
.tel[open] summary { background: var(--flieder); color: var(--violett-tief); }
.tel[open] .z-auf, .tel:not([open]) .z-zu { display: none; }
.tel-tafel {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  left: 0;
  max-height: calc(100svh - var(--kopf) - 1.5rem);
  padding: 0.75rem;
  overflow: auto;
  border: 1px solid var(--linie);
  border-radius: var(--r-l);
  background: var(--weiss);
  box-shadow: var(--schatten-fenster);
}
.tel-gruppe + .tel-gruppe { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--linie); }
.tel-titel { padding: 0.5rem 0.875rem 0.25rem; font-size: 0.75rem; font-weight: 650; letter-spacing: 0.1em; text-transform: uppercase; color: var(--violett); }
.tel-tafel a { display: block; padding: 0.625rem 0.875rem; border-radius: var(--r-m); font-weight: 500; text-decoration: none; }
.tel-tafel a:hover, .tel-tafel a:focus-visible { background: var(--flieder); color: var(--violett-tief); }

/* ---------- Hero: volle Violett-Flaeche ----------
   Hinter dem Foto ein leises Strahlenmuster aus hellerem Violett (Konus-
   Verlauf, durch eine Ringmaske auf die Umgebung des Fotos begrenzt), nach
   dem Vorbild der Linien bei Qualtrics; kein Bild. */
.hero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: max(44rem, 100svh);
  padding: calc(var(--kopf) + 2.5rem) 0 4rem;
  overflow: clip;
  background: var(--violett);
  color: var(--weiss);
  /* Strahlen als Ring um das Foto (Mitte bei 70 % der Breite, Ring breiter
     als hoch, weil das Foto quer liegt) */
  --strahl-x: 70%;
  --strahl-y: 50%;
  --strahl-rx: 34%;
  --strahl-ry: 42%;
}
.hero::before, .schluss::before, .seite-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-conic-gradient(from 0deg at var(--strahl-x) var(--strahl-y), rgb(255 255 255 / 0.16) 0deg 0.28deg, transparent 0.28deg 3.2deg);
  -webkit-mask-image: radial-gradient(ellipse var(--strahl-rx) var(--strahl-ry) at var(--strahl-x) var(--strahl-y), transparent 50%, #000 62%, #000 78%, transparent 100%);
  mask-image: radial-gradient(ellipse var(--strahl-rx) var(--strahl-ry) at var(--strahl-x) var(--strahl-y), transparent 50%, #000 62%, #000 78%, transparent 100%);
}
.hero :focus-visible { outline-color: var(--weiss); }
.hero-inhalt {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 53%);
  gap: 3.5rem;
  align-items: center;
}
/* Die Textspalte ist ein Container: die laengste Zeile des h1
   ("Review-Management.", 9,42 Schriftgroessen breit) passt bei jeder Breite
   in die Spalte (10,5 cqi), ohne am Bindestrich zu brechen. */
.hero-text-spalte { container-type: inline-size; }
.hero h1 {
  font-size: clamp(2.5rem, 0.5rem + 4vw, 4.25rem);
  font-size: min(clamp(2.5rem, 0.5rem + 4vw, 4.25rem), 10.5cqi);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.03em;
}
/* Nur die drei Zeilen sind Bloecke; das hervorgehobene Wort darin bleibt
   inline, sonst wird es so breit wie die Ueberschrift und der Marker-Strich
   laeuft unter der ganzen Zeile durch (Gruender 13.10.2026). */
.hero h1 > span { display: block; white-space: nowrap; }
.hero-text {
  max-width: 36rem;
  margin-top: 1.75rem;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  line-height: 1.5;
  color: rgb(255 255 255 / 0.85);
}
.hero-knopf { margin-top: 2.5rem; }

/* Rechts: das Foto des Gruenders (3:2, Radius 1.5rem, bei 1440 rund 660 px
   breit), darueber zwei Karten mit echten App-Ausschnitten: die Kundenmail
   ragt ueber die obere Kante links, der Antwortentwurf ueber die untere
   Kante rechts. Der Monitor liegt im Bild etwa bei x 20 bis 76 % und y 21
   bis 74 %; beide Karten lassen ihn frei. */
.hero-bild { position: relative; width: 100%; }
.hero-foto { width: 100%; border-radius: 1.5rem; box-shadow: var(--schatten-fenster); }
/* Karte: weisses Blatt mit Etikett und App-Ausschnitt (Hero und Grafiken) */
.karte {
  padding: 0.75rem;
  border-radius: var(--r-l);
  background: var(--weiss);
  color: var(--tinte);
  box-shadow: var(--schatten-fenster);
}
.karte--frage { position: absolute; top: -3rem; left: -2rem; width: min(17rem, 48%); }
.karte--antwort { position: absolute; right: -2rem; bottom: -4.5rem; width: min(15.5rem, 44%); }
.etikett {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--tinte-2);
}
.etikett .zeichen { width: 0.875rem; height: 0.875rem; stroke-width: 1.9; }
.karte img { width: 100%; border-radius: 0.5rem; }
/* Der Antwortentwurf ist hoch; die Karte zeigt seinen Anfang und laesst ihn
   unten auslaufen (Beschnitt, kein Umbau des Ausschnitts). */
.karte-ausschnitt { position: relative; max-height: 7.5rem; overflow: hidden; border-radius: 0.5rem; }
.karte-ausschnitt::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3rem;
  background: linear-gradient(rgb(255 255 255 / 0), var(--weiss));
}

/* ---------- Vertrauensleiste: eine Zeile, weiss ---------- */
.vertrauen { border-bottom: 1px solid var(--linie); background: var(--weiss); }
.vertrauen .rahmen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 2rem;
  min-height: 5.5rem;
  padding-block: 1.25rem;
  font-size: 0.9375rem;
}
.vertrauen ul { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; }
.vertrauen li { display: flex; align-items: center; gap: 0.5rem; font-weight: 550; }
.vertrauen li .zeichen { width: 1.375rem; height: 1.375rem; color: var(--violett); }
.pilot { margin-left: auto; color: var(--tinte-2); font-weight: 500; }

/* ---------- Schritte: Ueberschrift ueber dem Demo-Rahmen (Stand 4, unten) ---------- */
.schritte { padding-block: clamp(4rem, 8vw, 7rem) var(--abschnitt); }
.schritte h2 {
  max-width: 24ch;
  font-size: clamp(2.25rem, 1.25rem + 2.3vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

/* ---------- Stapel: die vier Funktionsbloecke als Karten (Stand 6, kompakt seit Stand 7) ----------
   Wunsch des Gruenders vom 13.10.2026 ("wie bei Studyly", ohne die Farben
   gross zu aendern): jeder Block ist eine Karte mit grossem Radius,
   abwechselnd weiss (feine Kante, weicher Schatten) und flieder; die
   violetten und fliederfarbenen Bildrahmen darin bleiben. Seit Stand 7
   (13.10.2026; der Gruender sah den Stapel nicht, sein Fenster ist rund
   1260 Pixel breit, und die Karten waren 790 Pixel hoch) ist die Karte
   kompakt wie bei Studyly: ab 64rem Breite zwei Spalten, so hoch wie
   --karten-h (rund 420 Pixel), Text links, Bild rechts, die Punkte "So
   unterstuetzt Sie Clustoria" als drei Reiter. Der Behaelter ist eine
   Flex-Spalte und kein Grid: in einem Grid haftete eine Karte nur in ihrer
   eigenen Zeile, hier ist der ganze Stapel die Haftgrenze (weiter unten,
   "Der Stapel haftet").
   Vor jeder Karte steht ihr Sprungziel (ein leeres Element mit der id des
   Schritts, Hoehe 0): eine haftende Karte liegt, sobald die naechste sie
   ueberdeckt, nicht mehr an ihrer natuerlichen Stelle, und /#verstehen
   landete von weiter unten auf der falschen Karte. Das Sprungziel haftet
   nicht. Es traegt den Abstand zur vorigen Karte (--stapel-luft; in einer
   Flex-Spalte fallen Raender nicht zusammen) und landet einen Pixel ueber
   der Haftlinie: dort steht seine Karte allein und die vorige ist ganz
   ausgeblendet. */
.stapel {
  --stapel-luft: 1.5rem;
  --karten-polster: clamp(1.25rem, 2.5vw, 2rem);
  display: flex;
  flex-direction: column;
  padding-bottom: var(--abschnitt);
}
.sprungziel { height: 0; scroll-margin-top: calc(var(--haft) - var(--kopf) - 0.5rem - 1px); }
.sprungziel:not(:first-child) { margin-top: var(--stapel-luft); }

/* ---------- Funktionsblock: Text und Grafik oder App-Ausschnitt ----------
   Einspaltig (unter 64rem) steht das Bild oben, der Text darunter; ab 64rem
   zwei Spalten, Text in der schmaleren (5 von 12), Bild in der breiteren
   (7 von 12); bei --wechsel steht das Bild links (im Markup bleibt der Text
   zuerst). Die Karte ist die section selbst; das Erscheinen beim
   Hereinscrollen tragen ihre Kinder (Deckkraft der Karte gehoert dem
   Stapel). */
.funktion {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  padding: var(--karten-polster);
  border: 1px solid var(--linie);
  border-radius: var(--r-xl);
  background: var(--weiss);
  box-shadow: var(--schatten);
}
.funktion > .funktion-bild, .funktion > .grafik { order: -1; }
/* jede zweite Karte auf Flieder: ohne Kante; Etikett und Reiter heben sich
   weiss vom Flieder ab */
.funktion:nth-of-type(even) { border-color: transparent; background: var(--flieder); }
.funktion:nth-of-type(even) .etikett-gross { background: var(--weiss); }
.funktion:nth-of-type(even) .reiter-knopf { border-color: var(--linie-flieder); }
.funktion-text { max-width: 36rem; }
.etikett-gross {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.875rem 0.25rem 0.25rem;
  border-radius: 999px;
  background: var(--flieder);
  font-size: 0.8125rem;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--violett);
}
.schritt-nr {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--violett);
  color: var(--weiss);
  font-size: 0.75rem;
  letter-spacing: 0;
}
/* Block-Ueberschrift; "Das sagen Kunden" traegt seit Stand 6 dieselbe Groesse.
   In der kompakten Karte (Stand 7) ist die Ueberschrift kleiner, damit sie
   in hoechstens drei Zeilen steht (Regel bei den Breiten). */
.funktion h2, .kunden h2 {
  font-size: clamp(1.875rem, 1.125rem + 1.6vw, 2.75rem);
  /* 1.15 statt 1.1: Luft fuer den Strich unter dem Wort (Stand 4) */
  line-height: 1.15;
}
.funktion h2 { margin-top: 0.875rem; color: var(--tinte); }
.funktion h2 + p { margin-top: 1rem; }
/* nur die Ueberschrift der Reiter; die Grafik-Ueberschrift hat ihre eigene
   Regel (.grafik-titel) */
.funktion-text h3 { margin-top: 1.5rem; font-size: 0.875rem; font-weight: 600; color: var(--violett-tief); letter-spacing: 0; }

/* ---------- Reiter "So unterstuetzt Sie Clustoria" (Stand 7) ----------
   Bis Stand 6 eine Aufklappliste mit drei Punkten; in der kompakten Karte
   drei kleine Pillen (role tablist/tab/tabpanel, start.js: Klick,
   Pfeiltasten, Pos1/Ende, ein Tab-Halt), darunter der Text des gewaehlten
   Punkts, wortgleich. Die drei Texte liegen mit Skript in EINER Zelle
   uebereinander, sichtbar ist nur der gewaehlte: so ist das Feld so hoch wie
   der laengste Text und nichts springt beim Wechsel. Ohne Skript stehen alle
   drei Texte untereinander (die Pillen tun dann nichts, der Inhalt ist
   vollstaendig). Lange Namen (Verstehen, Antworten) brechen in eine zweite
   oder dritte Reihe; in sich bricht eine Pille nur, wenn sie allein breiter
   waere als die Spalte (am Telefon "Kundenmail und Antwortentwurf in einer
   Ansicht"). */
.reiter { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.5rem; }
.reiter-knopf {
  padding: 0.3125rem 0.875rem;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: var(--weiss);
  font-size: 0.875rem;
  font-weight: 550;
  line-height: 1.35;
  text-align: left;
  text-wrap: balance;
  cursor: pointer;
  transition: background-color 200ms var(--aus), border-color 200ms var(--aus), color 200ms var(--aus);
}
.reiter-knopf:hover { border-color: var(--violett); color: var(--violett-tief); }
.funktion .reiter-knopf[aria-selected="true"] { border-color: var(--violett); background: var(--violett); color: var(--weiss); }
.reiter-felder { margin-top: 0.75rem; }
.reiter-feld { color: var(--tinte-2); }
html:not(.js) .reiter-feld + .reiter-feld { margin-top: 0.5rem; }
.js .reiter-felder { display: grid; }
.js .reiter-feld { grid-area: 1 / 1; }
.js .reiter-feld:not(.ist-aktiv) { visibility: hidden; }

.funktion-bild {
  /* das Polster des Rahmens; der Bildwechsel legt seine Bilder darin ab */
  --polster: clamp(1.25rem, 3vw, 2.5rem);
  display: grid;
  place-items: center;
  padding: var(--polster);
  border-radius: 1.5rem;
  background: linear-gradient(135deg, var(--violett-tief), var(--violett));
}
.funktion-bild img { width: 100%; border-radius: 1rem; box-shadow: var(--schatten-fenster); }

/* ---------- Grafiken: Illustration im runden Rahmen ----------
   (bis Stand 5 mit einer Zeile "Darstellung" darunter; der Gruender hat
   beide am 13.10.2026 gestrichen) */
.grafik { display: flex; flex-direction: column; padding: clamp(1.25rem, 2.5vw, 1.5rem); border-radius: 1.5rem; }
.plattformen, .themen { margin-block: auto; }
.grafik--plattformen { background: var(--flieder); }
.grafik--themen { background: linear-gradient(135deg, var(--violett-tief), var(--violett)); color: var(--weiss); }

/* Multi-Channel nach der Skizze des Gruenders: Ueberschrift in seinem
   Wortlaut, darunter fuenf Logos untereinander, alle --logo-h hoch, an der
   rechten Kante buendig wie gezeichnet; der Zeilenabstand ist eine halbe
   Logo-Hoehe, die Liste damit 7 Logo-Hoehen hoch. Die Logo-Hoehe folgt der
   Breite der Figur (Container): Tripadvisor ist 6,54 Hoehen breit, die
   Linien 1,4, der Pfeil mindestens 1,4, dazu Luft und Box (10.875rem);
   bei 1440 ergibt das rund 55 px, nie mehr als 56. Das SVG mit den Linien
   ist 1,4 x 7 Logo-Hoehen gross (viewBox 140 x 700, eine Einheit ist ein
   Hundertstel der Logo-Hoehe): die Mitten der fuenf Zeilen liegen bei 50,
   200, 350, 500 und 650, die Sammellinie bei x 135, die mittlere Linie
   laeuft bis zur Kante, wo der Pfeil ansetzt. Der Pfeil ist ein dehnbares
   Flex-Element (Linie plus Spitze) und nimmt die restliche Breite bis zur
   Box: lang wie in der Skizze, wo Platz ist. Linien 3 px, nicht
   mitskaliert. Ohne Container-Einheiten (alte Browser) gilt die vw-Naeherung. */
.grafik-titel {
  margin-bottom: 1.5rem;
  font-size: clamp(1.125rem, 0.75rem + 0.6vw, 1.375rem);
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-align: center;
  color: var(--violett);
}
.grafik--plattformen { container-type: inline-size; }
.plattformen {
  --logo-h: clamp(2.25rem, 3.8vw, 3.5rem);
  display: grid;
  grid-template-columns: auto auto minmax(calc(var(--logo-h) * 1.4), 1fr) auto;
  align-items: center;
}
@supports (width: 1cqi) {
  .plattformen { --logo-h: clamp(2.25rem, (100cqi - 10.875rem) / 9.34, 3.5rem); }
}
/* In der kompakten Karte (Stand 7, ab 64rem) ist die Figur so hoch wie die
   Karte ohne Polster und ein Groessen-Container: die Logo-Hoehe folgt auch
   ihrer Hoehe (sieben Logo-Hoehen plus die Ueberschrift, die dort in einer
   Zeile steht: ihre Schrift folgt der Breite), damit alle fuenf Logos in
   den Rahmen passen; bei 1440 x 900 rund 42, bei 1024 x 650 rund 30 Pixel. */
@media (min-width: 64rem) {
  .grafik--plattformen { container-type: size; }
  .grafik-titel { margin-bottom: 0.875rem; font-size: clamp(0.9375rem, 0.5rem + 0.6vw, 1.1875rem); }
  @supports (width: 1cqi) {
    .grafik-titel { font-size: clamp(0.875rem, 100cqi / 28, 1.1875rem); }
    .plattformen { --logo-h: clamp(1.5rem, min((100cqi - 10.875rem) / 9.34, (100cqb - 2.625rem) / 7), 3.5rem); }
  }
}
.plattform-liste { display: grid; gap: calc(var(--logo-h) / 2); justify-items: end; margin-right: 0.75rem; }
.plattform-liste picture { display: block; }
.plattform-liste img { width: auto; height: var(--logo-h); }
.plattform-linien, .plattform-pfeil { color: var(--violett); }
.plattform-linien { width: calc(var(--logo-h) * 1.4); height: calc(var(--logo-h) * 7); overflow: visible; }
.plattform-linien path { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.plattform-linien marker path { fill: currentColor; stroke: none; }
.plattform-linien--ab { display: none; }
.plattform-pfeil { display: flex; align-items: center; min-width: 0; }
.plattform-pfeil::before { content: ""; flex: 1 1 auto; height: 0; border-top: 3px solid currentColor; }
.pfeil-spitze { flex: none; width: 0.75rem; height: 0.75rem; margin-left: -2px; fill: currentColor; }
.plattform-box {
  display: grid;
  justify-items: center;
  gap: 0.625rem;
  padding: 1.5rem 1rem;
  border: 3px solid var(--violett);
  border-radius: 1.5rem;
  background: var(--grund);
}
.box-marke { width: auto; height: 2.75rem; }
.box-schrift { width: auto; height: 0.625rem; }

/* Multi-Label: eine Demo-Bewertung als Karte wie in der App (Avatar, Name,
   Chip "Positiv"), der Text in Flex-Zeilen: die Stelle, dann der dehnbare
   Faden, dann der Themen-Chip. Mark und Chip teilen den Ton der Zeile. */
.bewertung { padding: 1.25rem; border-radius: var(--r-l); background: var(--weiss); color: var(--tinte); box-shadow: var(--schatten-fenster); }
.bewertung-kopf { display: flex; align-items: center; gap: 0.75rem; }
.avatar {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--flieder);
  color: var(--violett);
}
.avatar .zeichen { width: 1.25rem; height: 1.25rem; stroke-width: 1.8; }
.bewertung-kopf b { font-size: 1.0625rem; }
.chip {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.625rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
.chip--positiv { background: var(--gruen-hell); color: var(--gruen); }
.chip--kritisch { background: var(--rot-hell); color: var(--rot); }
.bewertung-text { margin-top: 1.25rem; font-size: 1.0625rem; line-height: 1.7; }
.zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; }
/* Ton je Zeile = Stimmung des Themas wie in der App: gruen positiv, rot kritisch */
.zeile--a { --ton: var(--gruen-hell); --ton-linie: var(--gruen); }
.zeile--b, .zeile--c { --ton: var(--rot-hell); --ton-linie: var(--rot); }
/* die Stelle darf in sich umbrechen (lange Stellen am Telefon), Faden und
   Chip ruecken dann in die naechste Zeile */
.stelle { flex: 0 1 auto; min-width: 0; }
/* das Satzzeichen nach der Stelle rueckt in den Rand der Markierung */
.zeile mark { padding: 0.1em 0.3em; margin-right: -0.2em; border-radius: 0.3em; background: var(--ton); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
/* Faden und Chip brechen nur gemeinsam um */
.zu { display: flex; flex: 1 0 auto; align-items: center; gap: 0.75rem; }
.faden { flex: 1 1 2rem; min-width: 2rem; height: 0; border-top: 2px solid var(--ton-linie); }
.thema {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex: none;
  padding: 0.25rem 0.75rem 0.25rem 0.625rem;
  border-radius: 999px;
  background: var(--ton);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
.thema::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--ton-linie); }

/* ---------- Kundenstimmen: Band auf Violett, je Kunde eine Bildkarte ----------
   Das Foto fuellt die Karte (object-fit cover), darueber liegt die weisse
   Karte: bei AlpeDose links, bei RHY rechts (wie in den Mockups). Die weisse
   Karte reicht wie dort fast bis zum unteren Rand (stretch). Kennzahlen
   gross in Violett mit senkrechter Linie dazwischen, Zitat fett, dann Name,
   Funktion, Firma. Die Ueberschrift "Das sagen Kunden" ist seit Stand 6 eine
   Ueberschrift wie die der Funktionsbloecke (Groesse beim Funktionsblock;
   bis dahin eine Kleinzeile in Versalien, dem Gruender "zu klein"): weiss,
   "Kunden" in --auf-violett mit dem Marker-Strich; der Abstand zu den
   Karten wie unter den anderen Ueberschriften der Seite. */
.kunden { padding-block: var(--abschnitt); background: var(--violett); color: var(--weiss); }
.kunden-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin-top: clamp(1.5rem, 4vw, 2.5rem); }
.kunde {
  position: relative;
  display: grid;
  min-height: 33rem;
  padding: 1.5rem;
  overflow: clip;
  border-radius: 1.5rem;
  background: var(--violett-tief);
  color: var(--tinte);
}
.kunde-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* AlpeDose: Topf und Beutel stehen in der rechten Haelfte des Fotos, die
   bleibt neben der Karte sichtbar; RHY: das Bett liegt links im Foto. */
.kunde--alpedose .kunde-foto { object-position: 24% 50%; }
.kunde--rhy .kunde-foto { object-position: 0% 50%; }
.kunde-karte {
  position: relative;
  width: min(100%, 20.5rem);
  padding: 1.75rem 1.5rem;
  border-radius: 1.25rem;
  background: var(--weiss);
  box-shadow: var(--schatten-fenster);
}
.kunde--rhy .kunde-karte { justify-self: end; }
.kunde-logo { width: auto; height: 3.75rem; }
.kunde--rhy .kunde-logo { width: 11.5rem; height: auto; }
.kennzahlen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 1.5rem; text-align: center; }
.kennzahlen li { padding: 0 0.5rem; }
.kennzahlen li + li { border-left: 1px solid var(--linie); }
.kennzahl { display: block; font-size: 2.75rem; font-weight: 450; line-height: 1.1; letter-spacing: -0.02em; white-space: nowrap; color: var(--violett); }
.kennzahl-text { display: block; margin-top: 0.375rem; font-size: 0.8125rem; font-weight: 500; line-height: 1.3; color: var(--violett); }
.zitat { margin-top: 1.5rem; }
.zitat blockquote { margin: 0; font-size: 1.0625rem; font-weight: 600; line-height: 1.45; }
.zitat figcaption { display: grid; gap: 0.125rem; margin-top: 1rem; font-size: 0.8125rem; font-weight: 600; line-height: 1.35; color: var(--tinte-2); }
.zitat figcaption b { font-size: 0.9375rem; color: var(--tinte); }

/* ---------- Sicher: Band auf Tief-Violett mit einem weissen Kasten ---------- */
.sicher { padding-block: var(--abschnitt); background: var(--violett-tief); color: var(--weiss); }
.sicher h2 { font-size: clamp(2rem, 1rem + 2.2vw, 3.25rem); letter-spacing: -0.03em; }
.sicher-kasten {
  margin-top: 2rem;
  padding: clamp(1.5rem, 4vw, 3.5rem);
  border-radius: 1.5rem;
  background: var(--weiss);
  color: var(--tinte);
}
.zusagen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; }
.zusagen li > .zeichen { width: 2.5rem; height: 2.5rem; margin-bottom: 1.25rem; color: var(--violett); stroke-width: 1.4; }
.zusagen h3 { font-size: 1.375rem; line-height: 1.2; letter-spacing: -0.015em; }
.zusagen h3 + p { margin-top: 0.75rem; color: var(--tinte-2); }
.ersetzung { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 1.25rem; font-size: 0.9375rem; font-weight: 500; }
.ersetzung .zeichen { width: 1.125rem; height: 1.125rem; color: var(--violett); }
.maske { padding: 0.1em 0.4em; border-radius: 0.375rem; background: var(--flieder); color: var(--violett-tief); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.875rem; white-space: nowrap; }
.echt-knopf { width: 11rem; margin-top: 1.25rem; border-radius: 0.5rem; box-shadow: var(--schatten); }
.sicher-knoepfe { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.5rem; padding-top: 2.5rem; border-top: 1px solid var(--linie); }

/* ---------- Team: vier Portraets in einer Reihe ---------- */
.team { padding-block: clamp(4rem, 8vw, 7.5rem); }
.team h2 { font-size: clamp(2rem, 1rem + 2.2vw, 3.25rem); letter-spacing: -0.03em; }
.gruender { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem 1.5rem; margin-top: 2.5rem; }
.gruender img { width: 100%; border-radius: var(--r-l); background: var(--flieder); }
.gruender figcaption { display: grid; gap: 0.125rem; margin-top: 0.875rem; font-size: 1.0625rem; line-height: 1.3; }
/* Unter dem Namen ein LinkedIn-Zeichen (Gruender 12.10.2026): Flaeche
   2.75rem als Tippziel, das Zeichen selbst 18 px, Farbe wie Nebentext. */
.gruender .linkedin { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; margin: -0.5rem 0 0 -0.8125rem; color: var(--tinte-2); border-radius: 0.5rem; }
.gruender .linkedin .zeichen { width: 1.125rem; height: 1.125rem; fill: currentColor; stroke: none; }
.gruender .linkedin:hover { color: var(--violett); }

/* ---------- Schluss: Band auf Violett mit weisser Karte ---------- */
.schluss {
  position: relative;
  padding-block: clamp(4rem, 8vw, 7.5rem);
  overflow: clip;
  background: var(--violett);
  color: var(--weiss);
  --strahl-x: 50%;
  --strahl-y: 50%;
  --strahl-rx: 44%;
  --strahl-ry: 50%;
}
.schluss .rahmen { position: relative; }
/* Karte mittig, Text mittig, die Strahlen als Halo um die Karte */
.schluss-kachel { max-width: 40rem; margin-inline: auto; padding: clamp(1.75rem, 5vw, 4rem); border-radius: 1.5rem; background: var(--weiss); color: var(--tinte); text-align: center; }
.schluss h2 { font-size: clamp(2rem, 1rem + 2.5vw, 3.25rem); letter-spacing: -0.03em; }
.schluss h2 span { display: inline-block; }
.kontakt { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 1.5rem; margin-top: 2rem; }
.kontakt a:not(.knopf) { font-weight: 500; }
.schluss :focus-visible { outline-color: var(--violett); }

/* ---------- Fuss: vier Spalten auf Tinte ---------- */
.fuss { padding-block: clamp(3rem, 6vw, 5rem) 2rem; background: var(--tinte); color: var(--fuss-schrift); }
.fuss :focus-visible { outline-color: var(--weiss); }
.fuss-spalten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }
.fuss h2 { font-size: 0.75rem; font-weight: 650; letter-spacing: 0.12em; text-transform: uppercase; color: var(--auf-violett); }
.fuss ul { display: grid; gap: 0.625rem; margin-top: 1.125rem; }
.fuss a { text-decoration: none; }
.fuss a:hover { text-decoration: underline; }
.fuss a[aria-current] { color: var(--weiss); font-weight: 600; }
.fuss-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgb(255 255 255 / 0.15);
  font-size: 0.9375rem;
}
.fuss-marke { display: inline-flex; align-items: center; gap: 0.625rem; }

/* ---------- Breiten ---------- */
@media (min-width: 64rem) {
  /* Die kompakte Karte (Stand 7, Entscheid des Gruenders vom 13.10.2026:
     "wie Studyly", rund 420 Pixel hoch, ab rund 1000 Pixel Breite): alle
     vier Karten gleich hoch (--karten-h, bei 900 Pixel Fensterhoehe 448,
     bei 650 Pixel 384), zwei Spalten 5 zu 7, der Text mittig, der Rahmen
     von Grafik oder Bild so hoch wie die Karte ohne ihr Polster. Im Fluss
     stehen die Karten 1,2 Kartenhoehen auseinander (--stapel-luft ist ein
     Fuenftel der Karte; Studyly: 340 Pixel Karte, 410 Pixel Abstand). Die
     Ueberschrift ist kleiner als in der grossen Karte (hoechstens drei
     Zeilen); niedrige Fenster ziehen nur Abstaende zusammen (unten). Ohne
     Skript stehen alle Texte der Reiter untereinander, die Karte darf dann
     wachsen. */
  .stapel {
    --karten-h: clamp(24rem, 52vh, 28rem);
    --stapel-luft: calc(var(--karten-h) * 0.2);
    --kp-block: clamp(1.375rem, 3.6vh, 2.125rem);
    --kp-inline: clamp(2rem, 3.6vw, 3.5rem);
  }
  .funktion {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: minmax(0, 1fr);
    gap: clamp(2rem, 3.6vw, 3.5rem);
    align-items: center;
    height: var(--karten-h);
    padding: var(--kp-block) var(--kp-inline);
  }
  html:not(.js) .funktion { height: auto; min-height: var(--karten-h); }
  .funktion > .funktion-bild, .funktion > .grafik { order: 0; align-self: stretch; min-height: 0; }
  .funktion--wechsel { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .funktion--wechsel > .funktion-bild { order: -1; }
  .funktion-text { max-width: none; }
  .etikett-gross { gap: 0.4375rem; padding: 0.1875rem 0.75rem 0.1875rem 0.1875rem; font-size: 0.75rem; }
  .schritt-nr { width: 1.375rem; height: 1.375rem; font-size: 0.6875rem; }
  .funktion h2 { margin-top: 0.5rem; font-size: clamp(1.5rem, min(0.5rem + 1.75vw, 3.75vh), 2.25rem); }
  .funktion h2 + p { margin-top: 0.5rem; font-size: clamp(0.9375rem, 0.75rem + 0.3vw, 1rem); line-height: 1.5; }
  .funktion-text h3 { margin-top: 0.875rem; font-size: 0.8125rem; }
  .reiter { gap: 0.3125rem; margin-top: 0.4375rem; }
  .reiter-knopf { padding: 0.1875rem 0.75rem; font-size: 0.8125rem; }
  .reiter-felder { margin-top: 0.5rem; }
  .reiter-feld { font-size: clamp(0.875rem, 0.75rem + 0.2vw, 0.9375rem); line-height: 1.45; }
  /* Rahmen: knapperes Polster, damit das Bild die Hoehe nutzt */
  .funktion-bild { --polster: clamp(1rem, 2.6vh, 1.5rem); }
  .grafik { padding: clamp(1rem, 2.6vh, 1.5rem); }
}
@media (max-width: 63.99rem) {
  /* Kundenkarten unter 64rem einspaltig (bis Stand 6 unter 80rem; der
     Gruender, 13.10.2026: nebeneinander gefielen sie ihm besser, einzeln
     nahmen sie zu viel Platz ein) */
  .kunden-liste { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 64rem) and (max-width: 79.99rem) {
  /* Nebeneinander bei 1024 bis 1279 Pixel: die weisse Karte schmaler
     (17.5rem statt 20.5rem), damit neben ihr Foto bleibt (bei 1024 rund
     150, bei 1260 rund 250 Pixel), die Kennzahl kleiner, das Zitat 1rem;
     das Band mit knapperem Rand oben und unten (bei 1260 x 800 rund 700
     statt 800 Pixel hoch) */
  .kunden { padding-block: clamp(3rem, 5vw, 4rem); }
  .kunde { min-height: 0; padding: 1rem; }
  .kunde-karte { width: min(100%, 17.5rem); padding: 1.375rem 1.25rem; }
  .kunde-logo { height: 3rem; }
  .kunde--rhy .kunde-logo { width: 9.5rem; }
  .kennzahlen { margin-top: 1.125rem; }
  .kennzahl { font-size: clamp(2rem, 0.75rem + 2.2vw, 2.5rem); }
  .kennzahl-text { font-size: 0.75rem; }
  .zitat { margin-top: 1.125rem; }
  .zitat blockquote { font-size: 1rem; line-height: 1.4; }
  .zitat figcaption { margin-top: 0.75rem; }
}
@media (max-width: 71.99rem) {
  /* schmaleres Foto (bis 500 px): die Karten kuerzer und weiter nach aussen,
     damit der Monitor frei bleibt */
  .karte--frage { top: -3.5rem; }
  .karte--antwort { bottom: -5rem; }
  .karte-ausschnitt { max-height: 6rem; }
}
@media (max-width: 63.99rem) {
  .menue, .kopf-anmelden { display: none; }
  .tel { display: block; }
  .hero { --strahl-x: 50%; --strahl-y: 64%; --strahl-rx: 56%; --strahl-ry: 30%; }
  .hero-inhalt { grid-template-columns: minmax(0, 1fr); gap: 3rem; }
  /* einspaltig: Platz fuer die Karte ueber der oberen und unter der unteren Kante */
  .hero-bild { max-width: 44rem; margin: 3rem 0 1.5rem; }
  .karte--frage { left: -1rem; }
  .karte--antwort { right: -1rem; }
  .zusagen { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .fuss-spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 47.99rem) {
  .hero { padding-top: calc(var(--kopf) + 1.5rem); padding-bottom: 3rem; }
  /* die laengste Zeile des h1 passt in die Spalte (100vw minus 2 x 1rem Rand) */
  .hero h1 { font-size: min(2.5rem, calc((100vw - 2rem) / 9.6)); }
  .hero { --strahl-y: 60%; --strahl-rx: 64%; --strahl-ry: 22%; }
  .hero-inhalt { gap: 2rem; }
  /* Telefon: Foto volle Breite (3:2), die Karten darunter; die Kundenmail
     ragt ueber die untere Kante des Fotos, der Antwortentwurf steht rechts
     darunter. */
  .hero-bild { display: grid; max-width: none; margin: 0; }
  .hero-foto { border-radius: 1.25rem; }
  .karte--frage { position: relative; top: auto; left: auto; width: min(17rem, 76%); margin: -1.5rem 0 0 0.5rem; }
  .karte--antwort { position: relative; right: auto; bottom: auto; width: min(15.5rem, 68%); margin: 0.75rem 0.5rem 0 0; justify-self: end; }
  .karte-ausschnitt { max-height: 7rem; }
  .vertrauen ul { flex-direction: column; gap: 0.625rem; }
  .pilot { margin-left: 0; }
  /* Karten am Telefon: knapper Rand, damit Grafik und Ausschnitt ihre Breite behalten */
  .stapel { --stapel-luft: 1rem; --karten-polster: 1rem; }
  .funktion { gap: 1.5rem; }
  .funktion-bild { --polster: 1.25rem; }
  .funktion-bild img { max-width: 17rem; }
  /* Multi-Channel am Telefon: zwei Reihen (Google Maps, Outlook, Tripadvisor
     in der offiziellen gestapelten Fassung; darunter Yelp, Gmail). Die Liste
     ist 7 Logo-Hoehen breit auf 14 Spalten, die Mitten der ersten Reihe
     liegen bei 1, 3,5 und 6 Hoehen, die der zweiten bei 1,75 und 5,25. Die
     Linien der ersten Reihe laufen nach unten, die der zweiten nach oben
     auf EINE waagrechte Sammellinie zwischen den Reihen; von deren Mitte
     faehrt der Pfeil zwischen Yelp und Gmail hindurch nach unten in die
     Box. Das SVG liegt ueber der Liste, nicht gedehnt (viewBox 700 x 470,
     eine Einheit ein Hundertstel der Logo-Hoehe): Reihe 1 bei y 0 bis 100,
     Sammellinie bei 175, Reihe 2 bei 250 bis 350, Pfeilspitze bei 468 an
     der Box. Logo-Hoehe bis 2.75rem, bei 320 px 35 px. */
  .grafik-titel { margin-bottom: 1.25rem; }
  .plattformen { --logo-h: min(2.75rem, (100vw - 4.5rem) / 7); position: relative; grid-template-columns: minmax(0, 1fr); justify-items: center; }
  @supports (width: 1cqi) {
    .plattformen { --logo-h: min(2.75rem, 100cqi / 7); }
  }
  .plattform-liste { width: calc(var(--logo-h) * 7); grid-template-columns: repeat(14, minmax(0, 1fr)); grid-template-rows: var(--logo-h) var(--logo-h); gap: calc(var(--logo-h) * 1.5) 0; justify-items: stretch; margin-right: 0; }
  .plattform-liste li { display: grid; place-items: center; }
  .plattform-liste li:nth-child(1) { grid-area: 1 / 1 / 2 / 5; }
  .plattform-liste li:nth-child(2) { grid-area: 1 / 5 / 2 / 11; }
  .plattform-liste li:nth-child(3) { grid-area: 1 / 11 / 2 / 15; }
  .plattform-liste li:nth-child(4) { grid-area: 2 / 1 / 3 / 8; }
  .plattform-liste li:nth-child(5) { grid-area: 2 / 8 / 3 / 15; }
  .plattform-linien--quer, .plattform-pfeil { display: none; }
  .plattform-linien--ab { display: block; position: absolute; top: 0; right: 0; left: 0; width: calc(var(--logo-h) * 7); height: calc(var(--logo-h) * 4.7); margin-inline: auto; }
  .plattform-box { margin-top: calc(var(--logo-h) * 1.2); padding: 1.25rem; }
  /* Kundenstimmen am Telefon: Foto oben (3:2), weisse Karte darunter */
  .kunde { min-height: 0; padding: 0; background: var(--weiss); }
  .kunde-foto { position: static; height: auto; aspect-ratio: 3 / 2; }
  .kunde-karte { width: 100%; padding: 1.5rem 1.25rem; border-radius: 0; box-shadow: none; }
  .bewertung-text { font-size: 1rem; }
  .sicher-kasten { margin-top: 1.5rem; }
  .schritte { padding-top: 3rem; }
  .gruender { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; }
}
@media (max-width: 29.99rem) {
  /* schmale Telefone: Karte, Bildrahmen und Grafik mit knappem Polster, so
     bleiben Grafik und Ausschnitt so breit wie vor den Karten (die
     Beispiel-Bewertung 208 px bei 320 px Fensterbreite; schmaler ragten
     die Themen-Chips ueber den Rand) */
  .stapel { --karten-polster: 0.75rem; }
  .funktion-bild { --polster: 0.75rem; }
  .grafik { padding: 0.75rem; }
  .bewertung { padding: 1rem; }
  /* die Karte mit dem Entwurf: Knoepfe duerfen in sich umbrechen, sonst
     schiebt "Entwurf wird erstellt" die Karte ueber den Rand */
  .wechsel > .entwurf-karte { min-width: 0; }
  .app-kopf { flex-wrap: wrap; }
  .app-knopf { white-space: normal; text-align: center; }
  .leiste { gap: 0.5rem; padding-left: 1rem; }
  .marke { gap: 0.5rem; }
  .marke-bild { height: 1.75rem; }
  .marke-schrift { height: 0.625rem; }
  .kopf-rechts { gap: 0.5rem; }
  .knopf--klein { padding-inline: 0.875rem; font-size: 0.875rem; }
  .tel summary { width: 2.5rem; height: 2.5rem; }
  .sicher-knoepfe .knopf { width: 100%; }
  .fuss-spalten { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 23.49rem) {
  .marke-schrift { display: none; }
  /* Themen-Grafik: Faden und Chip knapper, damit "Auswahl & Verfuegbarkeit"
     in der Beispiel-Bewertung bleibt (bei 320 px ragte der Chip 32 px ueber
     ihren Rand, schon vor den Karten) */
  .zu { gap: 0.5rem; }
  .faden { flex-basis: 0.75rem; min-width: 0.75rem; }
  .thema { gap: 0.375rem; padding: 0.25rem 0.625rem 0.25rem 0.5rem; font-size: 0.75rem; }
}


/* ==================== Stand 4: Hervorhebungen und Interaktion ==================== */

/* ---------- Ein Wort je Ueberschrift in Violett, darunter ein Marker-Strich ----------
   Der Strich (Farbe des Worts) ist ein Hintergrund-Verlauf am unteren Rand
   des Worts und waechst von links (background-size), sobald der Abschnitt
   erschienen ist (.ist-da, mit Skript); ohne Skript steht er. Das Wort
   bleibt Inline-Text: es bricht nur am weichen Trennstrich, ein folgendes
   Satzzeichen bleibt bei ihm, und bei einem Umbruch bekommt jedes Stueck
   seinen eigenen Strich (box-decoration-break). Der Strich sitzt am Ende
   des Schriftraums (unter der Unterlaenge); in den mehrzeiligen h2 der
   Funktionsbloecke steht er hoeher und duenner, damit er nicht auf den
   Umlautpunkten der Folgezeile liegt (die Unterlaenge des Worts kreuzt er
   in derselben Farbe, das sieht man nicht). */
.wort {
  --strich: 3px;
  --strich-ab: 0;
  color: var(--violett);
  hyphens: manual;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: left 0 bottom var(--strich-ab);
  background-size: 0% var(--strich);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 500ms var(--aus) 350ms;
}
.hero .wort, .kunden .wort { color: var(--auf-violett); }
.funktion h2 .wort, .kunden h2 .wort { --strich: 2px; --strich-ab: 0.12em; }
.ist-da .wort, html:not(.js) .wort { background-size: 100% var(--strich); }

/* ---------- Erscheinen beim Hereinscrollen (nur mit Skript) ----------
   16 px nach oben, 500 ms; eine Gruppe staffelt ihre Kinder um 60 ms. */
.js [data-erscheint] { opacity: 0; transform: translateY(16px); transition: opacity 500ms var(--aus), transform 500ms var(--aus); }
.js [data-erscheint].ist-da { opacity: 1; transform: none; }
.js [data-erscheint="gruppe"] { opacity: 1; transform: none; }
.js [data-erscheint="gruppe"] > * { opacity: 0; transform: translateY(16px); transition: opacity 500ms var(--aus), transform 500ms var(--aus); }
.js [data-erscheint="gruppe"].ist-da > * { opacity: 1; transform: none; }
.js [data-erscheint="gruppe"] > :nth-child(2) { transition-delay: 60ms; }
.js [data-erscheint="gruppe"] > :nth-child(3) { transition-delay: 120ms; }
.js [data-erscheint="gruppe"] > :nth-child(4) { transition-delay: 180ms; }
.js [data-erscheint="gruppe"] > :nth-child(n+5) { transition-delay: 240ms; }

/* ---------- Karten heben sich unter dem Zeiger (4 px), Knoepfe 2 px (oben) ---------- */
.kunde-karte, .gruender figure, .plattform-liste li, .bewertung { transition: transform 200ms var(--aus), box-shadow 200ms var(--aus); }
.kunde-karte:hover, .bewertung:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgb(64 32 104 / 0.08), 0 36px 70px -30px rgb(64 32 104 / 0.6); }
.gruender figure:hover, .plattform-liste li:hover { transform: translateY(-4px); }
.gruender img { transition: box-shadow 200ms var(--aus); }
.gruender figure:hover img { box-shadow: var(--schatten); }
.kennzahl { font-variant-numeric: tabular-nums; }

/* ---------- Logo-Band: die fuenf Plattformen laufen langsam ----------
   Vier gleiche Reihen hintereinander; ein Umlauf (40 s) schiebt genau eine
   Reihe weiter, so schliesst das Band ohne Luecke. Rechts und links blendet
   eine Maske aus. Unter dem Zeiger haelt es an. */
.band {
  padding-block: 1.5rem;
  overflow: hidden;
  background: var(--weiss);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.band-spur { display: flex; width: max-content; animation: band 40s linear infinite; }
.band:hover .band-spur { animation-play-state: paused; }
.band-reihe { display: flex; flex: none; align-items: center; gap: clamp(2.5rem, 6vw, 5rem); padding-right: clamp(2.5rem, 6vw, 5rem); }
.band-reihe img { width: auto; height: clamp(1.625rem, 2vw, 2.125rem); }
@keyframes band { to { transform: translateX(-25%); } }

/* ---------- Demo-Rahmen: Browser-Fenster mit Stationsleiste ----------
   Breite: hoechstens 70rem, und so breit, dass Kopf, Leiste, Buehne (16:10)
   und Fusszeile in die Fensterhoehe passen ((100svh - 15rem) * 1.6), nie
   schmaler als 44rem oder die Zeile. */
.demo {
  position: relative;
  width: min(100%, 70rem);
  width: min(100%, 70rem, (100svh - 15rem) * 1.6);
  min-width: min(100%, 44rem);
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  overflow: hidden;
  border: 1px solid var(--linie);
  border-radius: 1.5rem;
  background: var(--weiss);
  color: var(--tinte);
  box-shadow: var(--schatten-fenster);
}
.demo-kopf { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 1rem; border-bottom: 1px solid var(--linie); background: linear-gradient(180deg, #fbf9ff, #f5f1fc); }
.demo-punkte { display: flex; flex: none; gap: 0.4rem; }
.demo-punkte i { width: 0.625rem; height: 0.625rem; border-radius: 50%; }
.demo-punkte i:nth-child(1) { background: #f3b7c2; }
.demo-punkte i:nth-child(2) { background: #f7dca6; }
.demo-punkte i:nth-child(3) { background: #b7e3c4; }
.demo-titel { display: flex; align-items: center; gap: 0.45rem; min-width: 0; overflow: hidden; font-size: 0.8125rem; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; color: var(--tinte-2); }
.demo-titel img { flex: none; width: auto; height: 1.125rem; }
.demo-abzeichen { display: inline-flex; flex: none; align-items: center; gap: 0.4rem; margin-left: auto; font-size: 0.6875rem; font-weight: 650; letter-spacing: 0.12em; text-transform: uppercase; color: var(--violett); }
.demo-punkt { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--gruen-punkt); }
.demo-steuerung { display: flex; align-items: center; gap: 0.9rem; padding: 0.75rem 1rem 0.25rem; }
.demo-pause {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--linie);
  border-radius: 50%;
  background: var(--weiss);
  color: var(--violett);
  cursor: pointer;
  transition: background-color 160ms var(--aus), transform 160ms var(--aus);
}
.demo-pause:hover { background: var(--flieder); transform: scale(1.06); }
.demo-pause .zeichen { width: 1rem; height: 1rem; fill: currentColor; stroke: none; }
/* Das Symbol zeigt den Zustand des Knopfs (angehalten: Abspielen, sonst
   Pause), nicht, ob die Demo gerade im Sichtfeld laeuft. */
.demo-pause .z-ab, .demo.ist-angehalten .demo-pause .z-pa { display: none; }
.demo.ist-angehalten .demo-pause .z-ab { display: block; }
/* Tippflaeche 44 px, ohne die Zeichnung zu vergroessern (Pause-Knopf 36 bzw.
   32 px, "Noch einmal" 28 px hoch) */
.demo-pause, .noch-einmal { position: relative; }
.demo-pause::before, .noch-einmal::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, 2.75rem);
  height: 2.75rem;
  transform: translate(-50%, -50%);
}
.demo-rail { display: flex; flex: 1; gap: 0.375rem; min-width: 0; }
.station {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
  padding: 0.125rem 0;
  border: 0;
  background: none;
  color: var(--tinte-2);
  text-align: left;
  cursor: pointer;
}
.station-name { overflow: hidden; font-size: 0.75rem; font-weight: 600; line-height: 1.2; white-space: nowrap; text-overflow: ellipsis; transition: color 200ms var(--aus); }
.station:hover .station-name, .station.ist-fertig .station-name { color: var(--tinte); }
.station.ist-aktiv .station-name, .station.ist-aktiv:hover .station-name { color: var(--violett); }
.spur { display: block; height: 3px; overflow: hidden; border-radius: 999px; background: var(--linie); }
/* Der Balken einer Station ist leer, bis sie laeuft, und voll, wenn sie
   durch ist. Den Balken der laufenden Station fuellt start.js ueber die
   Summe ihrer Szenen (Web Animations auf .spur-fuellung, kein Inline-Stil):
   die Animation ist zugleich die Uhr des Films, Pause haelt beide an, und
   der Balken bleibt stehen, wo der Film steht. */
.spur-fuellung { display: block; height: 100%; border-radius: inherit; background: var(--violett); transform: scaleX(0); transform-origin: left center; }
.station.ist-fertig .spur-fuellung { transform: none; }
html:not(.js) .demo-steuerung { display: none; }
/* Buehne: mit Skript liegen alle Szenen uebereinander (eine Zelle, darum
   springt nichts). Das Bild der neuen blendet in 200 ms UEBER dem alten
   ein; die alte Szene bleibt so lange darunter stehen und verschwindet dann,
   sonst schiene in der Mitte des Wechsels der Grund durch beide. Die
   Fusszeile blendet NICHT ueber: die neue deckt die alte sofort (sonst
   stuenden 100 bis 200 ms zwei Saetze uebereinander, gemessen 13.10.2026),
   und nur ihr Satz kommt in 250 ms herein, ausser er ist derselbe wie der
   alte (.gleich, start.js); das fette Stationswort hat seine eigene Farbe
   und steht still. Ohne Skript stehen die fuenf Stationen des Markups
   untereinander, jede mit ihrem Satz. */
.demo-buehne { position: relative; display: grid; isolation: isolate; background: var(--grund); }
.ansicht { display: grid; grid-template-rows: auto 1fr; margin: 0; }
.js .ansicht { grid-area: 1 / 1; visibility: hidden; transition: visibility 0s 200ms; }
.js .ansicht.ist-aktiv { z-index: 1; visibility: visible; transition: none; }
.js .ansicht > :not(figcaption) { opacity: 0; transition: opacity 0s 200ms; }
.js .ansicht.ist-aktiv > :not(figcaption) { opacity: 1; transition: opacity 200ms var(--aus); }
.js .ansicht.ist-aktiv figcaption { animation: satz-ein 250ms var(--aus); }
.js .ansicht.ist-aktiv.gleich figcaption { animation: none; }
@keyframes satz-ein { from { color: transparent; } }
/* Bis der Rahmen ins Fenster ragt (start.js setzt .ist-nah), laden nur das
   erste Bild: ein Bild ohne Box laedt auch mit loading=lazy nicht, und die
   Stationsbilder 2 bis 5 stuenden sonst schon beim ersten Laden in der
   Lazy-Distanz (gemessen 13.10.2026). Ohne Skript gilt die Regel nicht. */
.js .demo:not(.ist-nah) .ansicht ~ .ansicht img { display: none; }
.ansicht picture { display: block; }
.ansicht img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; background: var(--grund); }
.ansicht figcaption {
  display: block;
  min-height: 3.5rem;
  /* eine Zeile (1.3125rem) sitzt mit 1.09rem Polsterung mittig in 3.5rem;
     bei zwei oder drei Zeilen waechst die Fusszeile */
  padding: 1.09rem clamp(1rem, 2.4vw, 1.5rem);
  border-top: 1px solid var(--linie);
  background: var(--flieder);
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--tinte-2);
}
.ansicht figcaption b { color: var(--tinte); }
/* Was ueber den Bildern liegt (Stand 7b): die Karte "So sieht die KI diese
   Mail" samt ihren Markierungen von Name und Adresse in der Signatur, die
   Abdeckung, unter der der Entwurf einfliesst, die Schreibmarke und der
   Mauszeiger; dazu rollt unter "Erledigt" der Streifen der Liste (echte
   Pixel der App, an beiden Enden gleich den Aufnahmen). Ihre Lagen
   misst werkzeug/aufnahmen/ableiten.py am Manifest der Film-Aufnahme und
   schreibt sie in die Regel .film-lagen (Prozent des Fensters 1440 x 900, das
   Bild einer Szene ist das ganze Fenster; --feld ist der Grund des
   Antwortfelds, in seinen Leerzeilen gemessen; die Werte -m legen das ganze
   Fenster am Telefon auf die Zuschnitte). Nur von Hand: die Groesse des
   Zeigers und die Farben. */
.film-lagen { --name-l: 41.944%; --name-t: 52.812%; --name-b: 5.611%; --name-h: 2.444%; --email-l: 41.944%; --email-t: 55.340%; --email-b: 12.122%; --email-h: 2.444%; --karte-l: 55.456%; --karte-t: 39.451%; --feld-l: 44.514%; --feld-t: 69.534%; --feld-b: 48.750%; --feld-h: 20.222%; --marke-t: 1.099%; --marke-h: 9.890%; --feld: #fdfdfe; --rollen: 9.444%; --liste-l: 2.222%; --liste-t: 37.222%; --liste-b: 36.111%; --liste-h: 62.778%; --maske-m-l: -141.680%; --maske-m-t: -60.428%; --maske-m-b: 342.314%; --maske-m-h: 160.428%; --entwurf-m-l: -94.074%; --entwurf-m-t: 0.000%; --entwurf-m-b: 213.333%; --entwurf-m-h: 100.000%; }
.ansicht-bild { position: relative; overflow: hidden; container-type: inline-size; }
/* Die Ebene .lage liegt genau auf dem Bild: im Blatt des Entwurfs, in der
   Maskierung im Rahmen um Bild und Markierung (ohne Skript steht die Karte
   als Block darunter und darf die Ebene nicht strecken). */
.ansicht-rahmen { position: relative; }
.lage { position: absolute; inset: 0; pointer-events: none; }
/* Die Markierung gehoert zur Karte, nicht zur App (die App hebt nichts
   hervor): ein Leuchtstift im Flieder der Platzhalter der Karte, multipliziert,
   damit die Schrift darunter schwarz bleibt; sie erscheint mit der Karte. */
.markiert { position: absolute; border-radius: 0.25rem; background: var(--linie-flieder); mix-blend-mode: multiply; }
.markiert--name { left: var(--name-l); top: var(--name-t); width: var(--name-b); height: var(--name-h); }
.markiert--email { left: var(--email-l); top: var(--email-t); width: var(--email-b); height: var(--email-h); }
/* Die Karte: ohne Skript ein Block unter dem Bild, mit Skript liegt sie
   rechts neben der Signatur (am Telefon unten im Bild). Schrift der Seite,
   mit der Buehne skaliert (cqi), nie kleiner als 12 Pixel, auch der Titel. */
.ki-karte { padding: 1rem clamp(1rem, 2.4vw, 1.5rem); border-top: 1px solid var(--linie); background: var(--weiss); font-size: 0.875rem; line-height: 1.5; color: var(--tinte); }
.ki-karte p { margin: 0; }
.ki-karte .ki-karte-titel { margin-bottom: 0.55em; font-size: max(0.75rem, 0.75em); font-weight: 650; letter-spacing: 0.1em; text-transform: uppercase; color: var(--violett); }
.ki-karte .ki-karte-betreff { margin-bottom: 0.4em; }
.ki-karte-betreff span { color: var(--tinte-2); }
.ki-karte mark { margin-left: -0.35em; padding: 0.05em 0.35em; border-radius: 0.3em; background: var(--linie-flieder); color: var(--violett-tief); font-weight: 600; }
.js .ki-karte {
  position: absolute;
  z-index: 1;
  top: var(--karte-t);
  right: 2.5%;
  left: var(--karte-l);
  padding: 1.1em 1.3em 1.2em;
  border: 1px solid var(--linie);
  border-radius: 0.875rem;
  box-shadow: var(--schatten-fenster);
  font-size: 0.8125rem;
  font-size: clamp(0.75rem, 1.2cqi, 1rem);
}
/* Der Entwurf: das Bild liegt auf einem Blatt, das am Ende um so viel rollt
   wie die App (--rollen), darunter das gerollte Bild (aus dem <template>).
   Die Abdeckung ist so gross wie die Innenflaeche des Antwortfelds, je
   Zeile ein Streifen im Grund des Felds; start.js schiebt die Streifen der
   Zeilen des Modelltexts Wort fuer Wort nach rechts weg, die Schreibmarke an
   ihrer Kante (die anderen Zeilen stehen frei). Ohne Bewegung (reduziert,
   ohne Skript) gibt es beide nicht: der Entwurf steht. Die Kamera (start.js,
   scale auf dem Blatt bzw. dem Bild des Dialogs) nimmt alles mit. */
.blatt { position: relative; }
.blatt-oben { position: relative; z-index: 1; }
.ansicht .blatt-unten { position: absolute; top: var(--rollen); left: 0; }
.blatt .lage { z-index: 2; }
.deckel, .schreibmarke { display: none; position: absolute; top: var(--feld-t); left: var(--feld-l); width: var(--feld-b); height: var(--feld-h); }
.deckel { flex-direction: column; overflow: hidden; }
.deckel i { flex: 1; background: var(--feld); }
.schreibmarke i { position: absolute; top: var(--marke-t); left: 0; width: 2px; height: var(--marke-h); border-radius: 1px; background: var(--violett); }
.demo.in-bewegung .deckel { display: flex; }
.demo.in-bewegung .schreibmarke { display: block; }
/* Die Liste unter "Erledigt": ein Fenster ueber dem sichtbaren Teil der Liste
   im Bild (--liste-*), darin der Streifen der ganzen Rollstrecke, so breit wie
   das Fenster; start.js rollt ihn um data-rollen (Prozent seiner Hoehe). */
.liste-fenster { position: absolute; top: var(--liste-t); left: var(--liste-l); width: var(--liste-b); height: var(--liste-h); overflow: hidden; }
.ansicht .liste-streifen { aspect-ratio: auto; object-fit: fill; background: none; }
/* Der Mauszeiger: ein schwarzer Pfeil mit weisser Kante wie am Mac, 24
   Pixel hoch bei 1440 Breite (er waechst mit der Buehne), die Spitze ist der
   Ursprung der Bahn. start.js faehrt die Bahn (translate in Prozent der
   Buehne), drueckt den Pfeil und laesst den Kreis um den Klickpunkt wachsen.
   Der Kreis hebt sich von jedem Grund ab: eine weisse Linie (auf den
   violetten Knoepfen), aussen ein violetter Ring (auf hellem Grund), dazu ein
   weicher dunkler Schatten. Nur im Film am Bildschirm; er nimmt keinen
   Zeiger an. */
.zeiger-feld { display: none; position: absolute; top: 0; left: 0; z-index: 2; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; pointer-events: none; }
.demo.im-film .zeiger-feld { display: block; }
.zeiger-bahn { position: absolute; inset: 0; }
.zeiger { position: absolute; top: -0.146%; left: -0.091%; width: 1.276%; height: 3.059%; overflow: visible; transform-origin: 7.14% 4.76%; filter: drop-shadow(0 1px 1.5px rgb(0 0 0 / 0.35)); }
.zeiger path { fill: #111; stroke: #fff; stroke-width: 1.3; stroke-linejoin: round; }
.klick-kreis { position: absolute; top: -2.56%; left: -1.6%; width: 3.2%; height: 5.12%; border-radius: 50%; background: rgb(255 255 255 / 0.22); box-shadow: 0 0 0 2px #fff, 0 0 0 4.5px rgb(117 46 176 / 0.95), 0 0 9px 4px rgb(28 25 34 / 0.28); opacity: 0; }
html:not(.js) .demo-buehne { display: block; }
html:not(.js) .ansicht + .ansicht { border-top: 1px solid var(--linie); }

/* ---------- Bildwechsel der Reiter (bis Stand 6 der Aufklapplisten) ----------
   Die erste Ansicht steht im Fluss und gibt die Hoehe vor; die weiteren
   liegen absolut in der Polsterung des Rahmens, mittig, hoechstens so gross
   wie der Platz (das Element ist so gross wie das Bild, Schatten und Ecken
   stimmen). Ohne Skript bleibt die erste. */
.wechsel { position: relative; }
/* das erste Bild gibt die Hoehe vor: als Block mit voller Breite hat es sie
   aus width und height schon vor dem Laden (lazy) */
.wechsel > picture[data-bild]:first-child { display: grid; place-items: center; width: 100%; }
.wechsel > img[data-bild]:not(:first-child) {
  position: absolute;
  inset: var(--polster);
  width: auto;
  height: auto;
  max-width: calc(100% - 2 * var(--polster));
  max-height: calc(100% - 2 * var(--polster));
  margin: auto;
}
/* die eine Zelle des picture ist so gross wie die Flaeche (minmax 0 1fr),
   und das Bild liegt ausdruecklich in ihr (das source-Element ist sonst
   selbst ein Rasterelement und schoebe das Bild in eine zweite, freie
   Zeile): sonst liefe max-height 100 % ins Leere, und ein hohes Bild ragte
   in der kompakten Karte (Stand 7) unten aus dem Rahmen */
.wechsel > picture[data-bild]:not(:first-child) { position: absolute; inset: var(--polster); display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; }
.wechsel > picture[data-bild]:not(:first-child) img { grid-area: 1 / 1; width: auto; height: auto; max-width: 100%; max-height: 100%; }
.js .wechsel > [data-bild] { opacity: 0; visibility: hidden; transition: opacity 300ms var(--aus), visibility 0s 300ms; }
.js .wechsel > [data-bild].ist-aktiv { opacity: 1; visibility: visible; transition-delay: 0s; }
html:not(.js) .wechsel > [data-bild]:not(:first-child) { display: none; }

/* ---------- Auswerten: die ganze Statistik-Seite im Rahmen (Stand 6) ----------
   Ab 48rem zeigt der Rahmen die ganze Statistik-Seite der App (1440 x 1963
   in der Aufnahme): so breit wie der Rahmen minus Polster, oben buendig,
   unten laeuft sie in einer Maske aus (--auslauf). Das Bild liegt in einem
   Fenster (das picture: absolut im Rahmen, bis zu dessen Unterkante), der
   Rahmen bekommt seine Hoehe zweispaltig (ab 64rem) von der kompakten
   Karte, einspaltig aus seiner Breite (4 zu 3 seit Stand 7; bis dahin 1 zu
   1,15, am Tablett ueber 700 Pixel hoch). Die Reiter (start.js setzt
   data-zeigt am Rahmen): 1 Kennzahlen zeigt den Anfang der
   Seite; 2 Trend laesst Bild 1 stehen und faehrt es nach oben, bis die
   Verlaufskarten oben im Fenster stehen (--trend-lage: Oberkante der Karten
   minus Luft, in Prozent der Seitenhoehe; ableiten.py misst sie am Manifest
   und schreibt sie hierher), aber nie weiter, als die Seite lang ist (das
   Fenster ist ein Groessen-Container, 100cqh seine Hoehe: so bleibt unter
   dem Fuss der Seite kein leerer Rahmen; ohne Container-Einheiten faehrt das
   Bild nicht); 3 Je Filiale blendet auf die ganze Seite der Filiale um.
   Bild 2 (der Telefon-Zuschnitt zum Punkt Trend) zeigt nur das Telefon.
   Unter 48rem gelten die Regeln des Bildwechsels wie bisher. */
@media (min-width: 48rem) {
  .wechsel--ganz {
    --polster: clamp(1.25rem, 2.2vw, 1.75rem);
    --auslauf: 5rem;
    --trend-lage: 30.6%;
    display: block;
    /* volle Breite ausdruecklich: ein Kasten mit Seitenverhaeltnis dehnt sich im Grid nicht von selbst */
    width: 100%;
    aspect-ratio: 4 / 3;
    padding: 0;
    overflow: hidden;
  }
  .wechsel.wechsel--ganz > picture[data-bild] {
    position: absolute;
    inset: var(--polster) var(--polster) 0;
    display: block;
    width: auto;
    overflow: hidden;
    border-radius: 1rem 1rem 0 0;
    container-type: size;
    -webkit-mask-image: linear-gradient(#000 calc(100% - var(--auslauf)), transparent);
    mask-image: linear-gradient(#000 calc(100% - var(--auslauf)), transparent);
  }
  .wechsel.wechsel--ganz > picture[data-bild] img { width: 100%; height: auto; max-width: none; max-height: none; border-radius: 0; box-shadow: none; }
  .wechsel--ganz > [data-bild="2"] { display: none; }
  .wechsel--ganz > [data-bild="1"] img { transition: transform 400ms var(--aus); }
  .js .wechsel--ganz[data-zeigt="2"] > [data-bild="1"] { opacity: 1; visibility: visible; transition-delay: 0s; }
  .wechsel--ganz[data-zeigt="2"] > [data-bild="1"] img { transform: translateY(min(0px, max(-1 * var(--trend-lage), 100cqh - 100%))); }
  /* ausgeblendet springt Bild 1 erst zurueck, wenn es nicht mehr zu sehen ist */
  .wechsel--ganz[data-zeigt="3"] > [data-bild="1"] img { transition: transform 0s 300ms; }
}
@media (min-width: 64rem) {
  .wechsel--ganz { aspect-ratio: auto; max-height: none; }
}

/* ---------- Die Karte mit dem Entwurf (Entwurfsblock der App als HTML) ----------
   Weisses Blatt wie die Karte der App: Titelzeile, lilafarbener Block mit
   dem weissen Textfeld, Hinweis, Tonknoepfe, Knoepfe. .voll ist der
   Masshalter: die getippte Schicht liegt darueber, die Hoehe bleibt.
   Seit Stand 7 sind alle Masse der Karte in em ihrer Schrift (15 px wie
   bisher, die Werte sind die alten rem-Werte umgerechnet): in der kompakten
   Karte folgt die Schrift der Hoehe des Rahmens (Breiten, unten), und die
   ganze Karte waechst und schrumpft mit, ohne Skalierung per transform. */
.entwurf-karte {
  position: relative;
  width: 100%;
  padding: 1.0667em 1.3333em;
  border-radius: 1.0667em;
  background: var(--weiss);
  color: var(--tinte);
  font-size: 0.9375rem;
  line-height: 1.5;
  box-shadow: var(--schatten-fenster);
}
.app-kopf { display: flex; align-items: center; gap: 0.5333em; margin-bottom: 0.8em; }
.app-kopf > .zeichen { width: 1.3333em; height: 1.3333em; color: var(--violett); stroke-width: 1.8; }
.app-kopf b { font-size: 1.1333em; font-weight: 650; }
.app-kopf .app-knopf { margin-left: auto; }
.app-knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.4571em;
  min-height: 2.5714em;
  padding: 0.4286em 1em;
  border: 1px solid var(--linie);
  border-radius: 0.7143em;
  background: var(--weiss);
  font-size: 0.9333em;
  font-weight: 550;
  white-space: nowrap;
}
.app-knopf .zeichen { width: 1.1429em; height: 1.1429em; stroke-width: 1.8; }
.app-knopf--leise { min-height: 2.4615em; padding: 0.3077em 0.9231em; border-color: transparent; background: #f3f1f8; font-size: 0.8667em; }
.app-knopf--leise .zeichen { color: var(--violett); }
/* beide Beschriftungen liegen uebereinander, der Knopf ist so breit wie die
   laengere: der Wechsel verschiebt nichts (CLS) */
.app-stapel { display: inline-grid; justify-items: start; }
.app-stapel > span { grid-area: 1 / 1; }
.app-erstellt, .wartet .app-erzeugen { visibility: hidden; }
.wartet .app-erstellt { visibility: visible; }
.app-knopf--voll { min-height: 2.8571em; padding-inline: 1.2857em; border-color: transparent; background: var(--violett); color: var(--weiss); transition: background-color 300ms var(--aus), color 300ms var(--aus); }
.wartet .app-knopf--voll, .tippt .app-knopf--voll { background: #ebe8f1; color: #8b8597; }
.app-block { padding: 0.8em; border-radius: 0.9333em; background: #f3f1f8; }
.app-feld { padding: 0.9333em 1.0667em; border-radius: 0.6667em; background: var(--weiss); box-shadow: inset 0 0 0 1px var(--linie); }
.app-text { display: grid; }
.app-text > * { grid-area: 1 / 1; }
.app-text p { margin: 0; }
.app-text p + p { margin-top: 1.4em; }
.getippt p { white-space: pre-line; }
/* opacity statt visibility: der fertige Text bleibt fuer Hilfstechnik lesbar */
.wartet .voll, .tippt .voll { opacity: 0; }
.app-wartet { display: none; place-content: center; justify-items: center; gap: 0.2857em; text-align: center; font-size: 0.9333em; color: var(--tinte-2); }
.wartet .app-wartet { display: grid; }
.app-wartet b { font-size: 1.1429em; color: var(--tinte); }
.app-kreis { width: 1.4286em; height: 1.4286em; margin-bottom: 0.4286em; border: 2px solid var(--violett); border-right-color: transparent; border-radius: 50%; animation: dreht 0.9s linear infinite; }
/* der Wartekreis dreht erst, wenn die Karte im Bild ist (keine dauerhafte Bewegung ausser dem Band) */
.js .funktion-bild:not(.ist-da) .app-kreis { animation-play-state: paused; }
@keyframes dreht { to { transform: rotate(360deg); } }
.cursor { display: inline-block; width: 2px; height: 1em; margin-left: 1px; vertical-align: -0.15em; background: var(--violett); animation: blinkt 850ms steps(1) infinite; }
@keyframes blinkt { 50% { opacity: 0; } }
.app-hinweis { display: flex; align-items: flex-start; gap: 0.4615em; margin-top: 0.7692em; font-size: 0.8667em; line-height: 1.4; color: var(--tinte-2); }
.app-hinweis .zeichen { flex: none; width: 1.0769em; height: 1.0769em; margin-top: 0.1846em; color: var(--violett); }
.app-link { text-decoration: underline; text-underline-offset: 0.15em; }
.app-toene { display: flex; flex-wrap: wrap; gap: 0.5333em; margin-top: 0.8em; }
.app-toene span { padding: 0.4286em 1em; border: 1px solid var(--linie); border-radius: 999px; background: var(--weiss); font-size: 0.9333em; color: var(--tinte-2); }
.app-knoepfe { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5333em; margin-top: 0.9333em; }
.noch-einmal {
  display: flex;
  width: max-content;
  margin: 0.9231em auto 0;
  padding: 0.3077em 0.9231em;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--violett);
  font-size: 0.8667em;
  font-weight: 600;
  cursor: pointer;
  visibility: hidden;
}
.noch-einmal:hover { background: var(--flieder); }
.fertig .noch-einmal { visibility: visible; }
html:not(.js) .noch-einmal { display: none; }
/* In der kompakten Karte (Stand 7, ab 64rem) ist der Rahmen ein
   Groessen-Container, und die Schrift der Karte (und mit ihr jedes Mass)
   folgt seiner Hoehe: die ganze Karte samt "Antwort senden" und "Noch
   einmal" passt in den Rahmen, bei 1440 x 900 mit rund 13, bei 1024 x 650
   mit rund 12 Pixel Schrift (wie ein Ausschnitt der App, nur scharf). Ist
   der Rahmen schmal und hoch (um 1024 Pixel Breite ab rund 830 Pixel
   Hoehe), folgt sie seiner Breite: die Knopfzeile mit "Noch einmal" links
   braucht rund 33 em, die Karte ist dann 34 em breit (sonst stiess "Noch
   einmal" bei 1024 x 860 an "Datei anhaengen"). */
@media (min-width: 64rem) {
  .wechsel--antwort { container-type: size; }
  .wechsel > .entwurf-karte { max-width: 36rem; font-size: clamp(0.6875rem, min(4cqb, 2.94cqi), 0.9375rem); }
  /* knapper: die Absaetze naeher beieinander, "Noch einmal" links neben
     den Knoepfen statt in einer eigenen Zeile darunter, und ohne den
     Hinweis zum Antwortstil und die Tonknoepfe (wie die Antwortkarte im
     Hero; beide zeigt der dritte Reiter in der Aufnahme der App): mit ihnen
     stuende der Entwurf bei 1024 x 650 in 10 Pixel Schrift, ohne sie in 12 */
  .wechsel > .entwurf-karte .app-text p + p { margin-top: 0.85em; }
  .wechsel > .entwurf-karte .noch-einmal { position: absolute; bottom: 2.3em; left: 1.6em; margin: 0; }
  .wechsel > .entwurf-karte .app-hinweis, .wechsel > .entwurf-karte .app-toene { display: none; }
}

/* ---------- Kanal-Grafik: die Linien zeichnen sich, dann der Pfeil, dann hebt sich die Box ----------
   Je Linie 400 ms, 120 ms versetzt (ab 200 ms nach dem Erscheinen), die
   Sammellinie bei 800 ms, der Pfeil bei 1200 ms, die Spitze bei 1550 ms,
   die Box bei 1700 ms. Gezeichnet wird mit transform (scaleX/scaleY vom
   Anfang der Linie), die Strichstaerke bleibt 3 px. */
.plattform-linien path { transform-box: fill-box; }
.plattform-linien .spitze { fill: currentColor; stroke: none; }
.js .plattform-linien .linie, .js .plattform-linien .sammel, .js .plattform-linien .pfeil-ab { transition: transform 400ms var(--aus), opacity 100ms linear; }
.js .plattform-linien .linie { transform-origin: left center; }
.js .plattform-linien .sammel { transform-origin: center top; }
.js .plattform-linien--ab .linie { transform-origin: center top; }
.js .plattform-linien--ab .linie--auf { transform-origin: center bottom; }
.js .plattform-linien--ab .sammel { transform-origin: left center; }
.js .plattform-linien--ab .pfeil-ab { transform-origin: center top; }
.js .grafik--plattformen:not(.ist-da) .linie { transform: scaleX(0); opacity: 0; }
.js .grafik--plattformen:not(.ist-da) .plattform-linien--ab .linie { transform: scaleY(0); }
.js .grafik--plattformen:not(.ist-da) .sammel { transform: scaleY(0); opacity: 0; }
.js .grafik--plattformen:not(.ist-da) .plattform-linien--ab .sammel { transform: scaleX(0); }
.js .grafik--plattformen:not(.ist-da) .pfeil-ab { transform: scaleY(0); opacity: 0; }
.js .plattform-linien .linie:nth-of-type(1) { transition-delay: 200ms; }
.js .plattform-linien .linie:nth-of-type(2) { transition-delay: 320ms; }
.js .plattform-linien .linie:nth-of-type(3) { transition-delay: 440ms; }
.js .plattform-linien .linie:nth-of-type(4) { transition-delay: 560ms; }
.js .plattform-linien .linie:nth-of-type(5) { transition-delay: 680ms; }
.js .plattform-linien .sammel { transition-delay: 800ms; }
.js .plattform-linien .pfeil-ab { transition-delay: 1200ms; }
.js .plattform-linien .spitze, .js .pfeil-spitze { transition: opacity 200ms var(--aus) 1550ms; }
.js .grafik--plattformen:not(.ist-da) .spitze, .js .grafik--plattformen:not(.ist-da) .pfeil-spitze { opacity: 0; }
.js .plattform-pfeil::before { transform-origin: left center; transition: transform 400ms var(--aus) 1200ms; }
.js .grafik--plattformen:not(.ist-da) .plattform-pfeil::before { transform: scaleX(0); }
.js .plattform-box { box-shadow: var(--schatten); transition: transform 500ms var(--aus) 1700ms, box-shadow 500ms var(--aus) 1700ms; }
.js .grafik--plattformen:not(.ist-da) .plattform-box { transform: translateY(8px); box-shadow: none; }

/* ---------- Themen-Grafik: Stellen leuchten auf, Faeden ziehen sich zum Chip, Chips springen dazu ---------- */
.zeile mark { background: linear-gradient(var(--ton), var(--ton)) no-repeat 0 0 / 100% 100%; }
.js .zeile mark { transition: background-size 400ms var(--aus); }
.js .faden { transform-origin: left center; transition: transform 300ms var(--aus); }
.js .thema { transition: transform 300ms var(--aus), opacity 300ms var(--aus); }
.js .grafik--themen:not(.ist-da) .zeile mark { background-size: 0% 100%; }
.js .grafik--themen:not(.ist-da) .faden { transform: scaleX(0); }
.js .grafik--themen:not(.ist-da) .thema { transform: scale(0.9); opacity: 0; }
.js .zeile--a mark { transition-delay: 300ms; }
.js .zeile--a .faden { transition-delay: 650ms; }
.js .zeile--a .thema { transition-delay: 850ms; }
.js .zeile--b mark { transition-delay: 750ms; }
.js .zeile--b .faden { transition-delay: 1100ms; }
.js .zeile--b .thema { transition-delay: 1300ms; }
.js .zeile--c mark { transition-delay: 1200ms; }
.js .zeile--c .faden { transition-delay: 1550ms; }
.js .zeile--c .thema { transition-delay: 1750ms; }

/* ---------- Breiten (Stand 4) ---------- */
@media (max-width: 47.99rem) {
  /* Bildwechsel am Telefon: die Bildschirm-Zuschnitte waeren im Rahmen
     der Entwurfskarte winzig, darum die Telefon-Zuschnitte, 17rem breit.
     Seit Stand 7 steht das Bild UEBER dem Text mit den Reitern: alle Bilder
     liegen in EINER Zelle des Rahmens, der Rahmen ist so hoch wie das
     hoechste, und ein Wechsel schiebt die Reiter nicht unter dem Finger weg
     (bis Stand 6 folgte der Rahmen dem aktiven Bild; das Bild stand unter
     der Liste). */
  .js .funktion-bild.wechsel > [data-bild] { position: static; grid-area: 1 / 1; width: 100%; max-width: 17rem; max-height: none; margin: 0; }
  .js .funktion-bild.wechsel > .entwurf-karte { max-width: none; }
  .js .funktion-bild.wechsel > picture[data-bild] { display: grid; place-items: center; }
  .js .funktion-bild.wechsel > picture[data-bild] img { width: 100%; max-width: none; max-height: none; }
  /* Buehne am Telefon: die Zuschnitte sind 3:4; je Station eine Szene, kein
     Zeiger. Markierung und Abdeckung liegen auf dem Zuschnitt (die Ebene
     .lage ist das ganze Fenster, verschoben und vergroessert, Werte -m aus
     .film-lagen), die Karte liegt unten im Bild. */
  .ansicht img { aspect-ratio: 3 / 4; }
  .ansicht--mehr, .ansicht .blatt-unten { display: none; }
  .lage--maske { inset: auto; top: var(--maske-m-t); left: var(--maske-m-l); width: var(--maske-m-b); height: var(--maske-m-h); }
  .lage--entwurf { inset: auto; top: var(--entwurf-m-t); left: var(--entwurf-m-l); width: var(--entwurf-m-b); height: var(--entwurf-m-h); }
  .js .ki-karte { top: auto; right: 4%; bottom: 4%; left: 4%; padding: 0.8em 1em 0.9em; font-size: 0.75rem; }
  .demo { min-width: 0; margin-top: 1.5rem; border-radius: 1.25rem; }
  .demo-kopf { gap: 0.6rem; padding: 0.6rem 0.75rem; }
  .demo-titel { font-size: 0.75rem; }
  .demo-steuerung { gap: 0.6rem; padding: 0.6rem 0.75rem 0.2rem; }
  .demo-pause { width: 2rem; height: 2rem; }
  /* fuenf Namen nebeneinander: lange duerfen am weichen Trennstrich brechen,
     die Balken bleiben auf einer Linie (Inhalt unten ausgerichtet) */
  .station { justify-content: flex-end; }
  .station-name { font-size: 0.6875rem; letter-spacing: -0.01em; white-space: normal; text-overflow: clip; overflow-wrap: normal; hyphens: manual; }
  .ansicht figcaption { font-size: 0.875rem; }
  .band { padding-block: 1.125rem; }
  .band-reihe img { height: 1.5rem; }
  .entwurf-karte { padding: 0.9333em 1.0667em; }
  .app-block { padding: 0.6667em; }
  .app-feld { padding: 0.8em 0.9333em; }
}
/* Schmale Telefone (bis 480 px): Stationsnamen kleiner, Leiste enger (bei
   320 px bleiben je Station 44 px; Eingang, Entwurf, Freigabe passen in
   eine Zeile, die langen brechen am weichen Trennstrich); der Titel der
   Kopfzeile ohne "Clustoria", das Logo steht daneben. Nach dem
   Telefon-Block, damit die Regeln greifen. */
@media (max-width: 29.99rem) {
  .station-name { font-size: 0.625rem; }
  .demo-steuerung { gap: 0.375rem; }
  .demo-rail { gap: 0.125rem; }
  .demo-pause { width: 1.75rem; height: 1.75rem; }
  .demo-pause .zeichen { width: 0.875rem; height: 0.875rem; }
  /* die Tippflaeche bleibt 44 px hoch, reicht seitlich aber nicht in die erste Station */
  .demo-pause::before { width: 2.5rem; }
  .demo-titel-marke { display: none; }
}

/* ---------- Der Stapel haftet (Stand 6, kompakt seit Stand 7) ----------
   Bauart wie am 12.10.2026 fuer die drei Kacheln der alten Startseite
   (Commit 4968113e2, dort am Vorbild studyly.com/at gemessen): alle Karten
   position: sticky mit demselben top unter der Kopfleiste (--haft), die
   Haftung endet erst mit dem Stapel; keine Verschiebung, keine Skalierung,
   kein Weichzeichnen, nur die Deckkraft. Ohne Skript, mit scroll-getriebenen
   Animationen: Karte i+1 traegt einen benannten View-Timeline
   (view-timeline-name), der Stapel den timeline-scope fuer diese Namen, und
   Karte i animiert ihre Deckkraft auf dem Timeline von i+1. Seit Stand 7
   steht die kompakte Karte (--karten-h, hoechstens 28rem) im Fluss 1,2
   Kartenhoehen nach der vorigen: haftet eine Karte, steht die naechste ein
   Fuenftel Kartenhoehe unter ihr, und darunter sieht man sie herankommen
   (bei 1024 x 650 rund 100 Pixel von ihr, bei 1440 x 900 rund 270). Die
   Karte bleibt deckend, bis die naechste sie zu einem Viertel ueberdeckt
   (die Oberkante von i+1 steht dann drei Viertel Kartenhoehe unter der
   Haftlinie: entry plus Fensterhoehe minus Haftlinie minus 75 %), und
   verblasst dann linear, bis die naechste an der Haftlinie steht (minus
   0 %): bei einem Viertel Ueberdeckung 1, bei der Haelfte 0,67, bei drei
   Vierteln 0,33, an der Haftlinie 0. Das ist die Mitte zwischen Studyly
   (dort am 13.10.2026 nachgemessen: beim Haften schon 0,3 bis 0,6, 0 bei
   rund 43 % Ueberdeckung) und Stand 6 (deckend bis zur halben
   Ueberdeckung, dann bis zur Haftlinie verblassen); der Gruender hat sie
   am 13.10.2026 so gewaehlt ("Mittel": gut sichtbar, die vorige Karte
   bleibt lesbar, solange man sie braucht). Man sieht meist zwei Karten,
   beim Verblassen drei. Nicht "exit 0%" mit Einzug: Chromium und WebKit
   rechnen den Timeline eines haftenden Elements mit dessen
   Haft-Verschiebung (gemessen 12.10.2026). Die letzte Karte animiert nicht
   und scrollt mit dem Stapel normal weiter: kein toter Scrollweg.
   Aktiv ab 64rem Breite und 40rem Fensterhoehe (1024 x 640), in jeder
   Breite mit der kompakten Karte: die Haftlinie (88 Pixel) plus die Karte
   (bei 640 Pixel Fensterhoehe 384) liegen ueber dem unteren Fensterrand.
   Darunter (Tablett, Telefon, sehr niedrige Fenster), im Druck, bei
   prefers-reduced-motion: reduce und in Browsern ohne scroll-getriebene
   Animationen stehen die Karten einfach untereinander; ein Haften ohne
   Ausblenden zeigte die vorige Karte unter der naechsten (am 12.10.
   angesehen und verworfen). */
@keyframes karte-ausblenden { to { opacity: 0; } }
@media screen and (prefers-reduced-motion: no-preference) and (min-width: 64rem) and (min-height: 40rem) {
  @supports (animation-timeline: view()) and (timeline-scope: --karte) {
    .stapel { timeline-scope: --karte-2, --karte-3, --karte-4; }
    .funktion { position: sticky; top: var(--haft); }
    .funktion:not(:last-of-type) { animation: karte-ausblenden linear both; animation-range: entry calc(100vh - var(--haft) - 75%) entry calc(100vh - var(--haft)); }
    .funktion:nth-of-type(1) { animation-timeline: --karte-2; }
    .funktion:nth-of-type(2) { animation-timeline: --karte-3; view-timeline-name: --karte-2; }
    .funktion:nth-of-type(3) { animation-timeline: --karte-4; view-timeline-name: --karte-3; }
    .funktion:nth-of-type(4) { view-timeline-name: --karte-4; }
    /* die naechste Karte zeigt ihren Inhalt schon, waehrend sie unten
       hereinkommt (sonst kaeme eine leere Karte, bis 15 % ihres Texts im
       Fenster stehen); die Grafiken bewegen sich weiter beim Erscheinen */
    .js .funktion > [data-erscheint] { opacity: 1; transform: none; }
  }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
/* Reduzierte Bewegung: nichts gleitet, zeichnet, tippt oder laeuft; alles
   steht sofort da (Inhalte sichtbar, Entwurf fertig, Logo-Reihe mittig, die
   Demo ohne Automatik mit Stationen als Reiter: je Station ihre erste Szene,
   der Balken der gewaehlten voll, kein Ring). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation: none !important; }
  .knopf:hover, .kunde-karte:hover, .bewertung:hover, .gruender figure:hover, .plattform-liste li:hover, .demo-pause:hover { transform: none; }
  .js [data-erscheint], .js [data-erscheint="gruppe"] > * { opacity: 1; transform: none; }
  .wort { background-size: 100% var(--strich); }
  .js .grafik--plattformen:not(.ist-da) .linie,
  .js .grafik--plattformen:not(.ist-da) .sammel,
  .js .grafik--plattformen:not(.ist-da) .pfeil-ab,
  .js .grafik--plattformen:not(.ist-da) .spitze,
  .js .grafik--plattformen:not(.ist-da) .pfeil-spitze,
  .js .grafik--plattformen:not(.ist-da) .plattform-pfeil::before,
  .js .grafik--themen:not(.ist-da) .faden,
  .js .grafik--themen:not(.ist-da) .thema { transform: none; opacity: 1; }
  .js .grafik--plattformen:not(.ist-da) .plattform-box { transform: none; box-shadow: var(--schatten); }
  .js .grafik--themen:not(.ist-da) .zeile mark { background-size: 100% 100%; }
  .band-spur { width: auto; justify-content: center; }
  .band-reihe[aria-hidden] { display: none; }
  .band-reihe { flex-wrap: wrap; justify-content: center; padding-right: 0; }
  .demo-pause, .ansicht--mehr, .zeiger-feld { display: none; }
  .station.ist-aktiv .spur-fuellung { transform: none; }
  .wartet .voll, .tippt .voll { opacity: 1; }
  .wartet .app-wartet { display: none; }
  .wartet .app-knopf--voll, .tippt .app-knopf--voll { background: var(--violett); color: var(--weiss); }
}


/* ==================== Stand 5: Rechtsseiten und Datenschutz-Unterseite ====================
   Die Regeln aus landing.css (Stand 12.10.2026), wortgleich bis auf den
   oberen Abstand: die Kopfleiste nimmt keinen Platz im Fluss ein (negativer
   Rand), darum beginnt der Inhalt erst unter ihr (var(--kopf)). */

/* ---------- Unterseite: der Weg einer Kundenmail ---------- */
.vorspann { font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.25rem); line-height: 1.5; }
.architektur { padding: calc(var(--kopf) + clamp(1.5rem, 4vw, 3rem)) 0 clamp(4rem, 9vw, 7rem); }
.architektur h1 { max-width: 17ch; font-size: clamp(2.25rem, 1.1rem + 3.9vw, 4.25rem); letter-spacing: -0.03em; line-height: 1.04; }
.architektur .vorspann { max-width: 40rem; margin-top: 1.5rem; color: var(--tinte-2); }
.architektur .vorspann p + p { margin-top: 0.75rem; }
.weg-kachel { margin-top: clamp(2rem, 4vw, 3rem); padding: 3rem; border-radius: var(--r-xl); background: var(--flieder); }
.weg-kachel h2 { font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.875rem); }
.weg { display: grid; gap: 0.5rem; margin-top: 1.5rem; }
/* je Schritt eine weisse Karte: links die Ueberschrift (die Nummer steht im
   Text des Gruenders), rechts die Absaetze */
.weg li {
  display: grid;
  grid-template-columns: 13rem minmax(0, 1fr);
  align-items: start;
  gap: 0.5rem 1.25rem;
  padding: 1.25rem 1.5rem;
  border-radius: var(--r-l);
  background: var(--weiss);
}
.weg h3 { font-size: 1.1875rem; letter-spacing: -0.012em; line-height: 1.3; }
.weg p { max-width: 40rem; }
.weg p + p { margin-top: 0.625rem; }
.unterlagen {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: start;
  gap: 2rem clamp(2rem, 4vw, 4rem);
  margin-top: 0.75rem;
  padding: 4rem;
  border-radius: var(--r-xl);
  background: var(--sand);
}
.unterlagen h2 { font-size: clamp(1.875rem, 1.3rem + 2.1vw, 3rem); letter-spacing: -0.03em; }
.unterlagen-kopf p { margin-block: 1rem 1.75rem; color: var(--tinte-sand); }
.unterlagen ul { display: grid; gap: 0.5rem; }
.unterlagen li { padding: 1rem 1.25rem; border-radius: var(--r-m); background: rgb(255 255 255 / 0.6); }
.stimme {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  align-items: start;
  gap: 0.875rem 1.75rem;
  max-width: 54rem;
  margin: clamp(3.5rem, 8vw, 6rem) 0 0;
}
.stimme img { grid-row: 1 / 3; border-radius: var(--r-l); background: var(--portraet); }
.stimme blockquote { margin: 0; font-size: clamp(1.125rem, 1rem + 0.55vw, 1.4375rem); line-height: 1.42; letter-spacing: -0.012em; }
.stimme figcaption { grid-column: 2; color: var(--tinte-2); font-size: 0.9375rem; }
.stimme figcaption b { color: var(--tinte); }
.rechtslinks { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; margin-top: clamp(2.5rem, 5vw, 3.5rem); font-size: 0.9375rem; }
.rechtslinks a { padding: 0.5rem 0; }

/* ---------- Rechtsseiten: ruhig, dieselbe Schrift ---------- */
.prosa {
  width: min(100% - 2 * var(--rand), 40rem);
  margin-inline: auto;
  padding: calc(var(--kopf) + clamp(2rem, 5vw, 4rem)) 0 clamp(4rem, 8vw, 6rem);
}
.prosa h1 { margin-bottom: 0.75rem; font-size: clamp(1.875rem, 1.3rem + 2.6vw, 3rem); letter-spacing: -0.03em; -webkit-hyphens: auto; hyphens: auto; }
.prosa h2 { margin: 2.75rem 0 0.75rem; font-size: 1.4375rem; line-height: 1.18; letter-spacing: -0.018em; }
.prosa h3 { margin: 1.5rem 0 0.5rem; font-size: 1.0625rem; line-height: 1.3; letter-spacing: 0; }
.prosa p + p { margin-top: 0.75rem; }
.prosa ul { margin-top: 0.625rem; padding-left: 1.375rem; list-style: disc; }
.prosa li { margin-top: 0.25rem; }
.prosa a { color: var(--violett-tief); }
/* Tabellen: Woerter bleiben ganz (keine Trennung mitten in Kennungen wie
   gmail.readonly, keine Spalte aus Einzelbuchstaben). Reicht der Platz nicht,
   laesst sich die Tabelle seitlich schieben; die Seite selbst bleibt stehen. */
.prosa table {
  display: block;
  max-width: 100%;
  margin-top: 0.75rem;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.prosa th, .prosa td { min-width: 6.5rem; padding: 0.5rem 0.75rem 0.5rem 0; border-bottom: 1px solid var(--linie); text-align: left; vertical-align: top; }
.prosa th:last-child, .prosa td:last-child { padding-right: 0; }
.prosa .stand { max-width: 36rem; margin-bottom: 2.5rem; color: var(--tinte-2); font-size: 0.9375rem; }
.prosa .note { margin-top: 0.875rem; padding: 1rem 1.25rem; border-radius: var(--r-m); background: var(--flieder); font-size: 0.9688rem; }
.prosa .small { max-width: 34rem; color: var(--tinte-2); font-size: 0.875rem; }
.prosa code { font-family: var(--mono); font-size: 0.875em; white-space: nowrap; }

@media (max-width: 63.99rem) {
  .unterlagen { padding: 2.5rem; grid-template-columns: minmax(0, 1fr); }
  .weg-kachel { padding: 2rem; }
}
@media (max-width: 59.99rem) {
  .weg li { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 47.99rem) {
  .unterlagen { padding: 1.5rem; }
  .weg-kachel { padding: 1.25rem; }
  .weg li { padding: 1rem 1.125rem; }
  .stimme { grid-template-columns: minmax(0, 1fr); }
  .stimme img { grid-row: auto; width: 6rem; }
  .stimme figcaption { grid-column: auto; }
}
@media (max-width: 29.99rem) {
  /* drei Spalten muessen in die Breite des Telefons passen, ohne seitliches Schieben */
  .prosa table { font-size: 0.8125rem; }
  .prosa th, .prosa td { min-width: 4.5rem; padding-right: 0.5rem; }
}
@media (max-width: 23.49rem) {
  .prosa table { font-size: 0.78125rem; }
}


/* ==================== Stand 5: Unterseiten (13.10.2026) ====================
   Produkt- und Loesungsseiten nach dem Muster der Vorbilder: kurzer Hero
   auf Violett (h1, Unterzeile, Pille), drei Text-Bild-Bloecke im Wechsel
   (Etikett, h2, Absatz; der Ausschnitt der App im runden Violett-Rahmen,
   abwechselnd rechts und links), die Karten "So unterstuetzt Sie Clustoria",
   das Schlussband mit dem Schlusssatz. Kontakt: Hero und drei Karten. */

/* ---------- Hero der Unterseite: kurzes Violett-Band mit Strahlen rechts ---------- */
.seite-hero {
  position: relative;
  overflow: clip;
  padding: calc(var(--kopf) + clamp(3rem, 6vw, 5rem)) 0 clamp(3rem, 6vw, 5rem);
  background: var(--violett);
  color: var(--weiss);
  --strahl-x: 84%;
  --strahl-y: 50%;
  --strahl-rx: 28%;
  --strahl-ry: 110%;
}
.seite-hero .rahmen { position: relative; }
.seite-hero :focus-visible { outline-color: var(--weiss); }
.seite-hero h1 { max-width: 22ch; font-size: clamp(2.25rem, 1rem + 3.2vw, 4rem); line-height: 1.04; letter-spacing: -0.03em; }
.seite-hero .wort { color: var(--auf-violett); }
/* Der Hero steht sofort (wie der der Startseite): sein Rahmen traegt
   data-erscheint nur, damit der Marker-Strich mit .ist-da waechst. Ohne
   diese Regel blendete .js ihn aus und gleich wieder ein; kam start.js erst
   nach dem ersten Bild, zuckte der Hero fuer zwei, drei Frames. */
.js .seite-hero [data-erscheint] { opacity: 1; transform: none; transition: none; }

/* ---------- Text-Bild-Bloecke im Wechsel ----------
   Text in 5 von 12 Spalten, Bild in 7; jeder zweite Block tauscht die
   Seiten (im Markup bleibt der Text zuerst). Das Bild fuellt die Breite des
   Rahmens bis zu einer Hoechstbreite je Format, seine Hoehe folgt aus width
   und height im Markup: so steht der Rahmen in seiner Groesse, bevor das
   Bild geladen ist. (Bis 13.10.2026 hatte das Bild width: auto und eine
   Hoechsthoehe; in Chromium mass es bis zum Laden 0 x 0, und der Text daneben
   sprang, sobald es kam.) Drei Formate nach Hoehe durch Breite des Bilds:
   quer (die Vorgabe, 0,45 bis 0,85: hoechstens 44rem breit, also rund 37rem
   hoch), --hoch (ueber 0,85: hoechstens 30rem breit) und --flach (unter
   0,45: ein Streifen in voller Breite, der Rahmen schmiegt sich an; eine
   Mindesthoehe liesse ihn als Strich in einer leeren Flaeche stehen).
   Welches Format ein Bild braucht, prueft werkzeug/seiten/bauen.py. */
.abschnitte { display: grid; gap: var(--abschnitt); padding-block: var(--abschnitt); }
.abschnitt { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.abschnitt:nth-child(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.abschnitt:nth-child(even) .abschnitt-bild { order: -1; }
.abschnitt-text { max-width: 32rem; }
.abschnitt h2 { margin-top: 0.875rem; font-size: clamp(1.75rem, 1.05rem + 1.5vw, 2.5rem); line-height: 1.12; }
.abschnitt h2 + p { margin-top: 1.25rem; }
.abschnitt-bild {
  display: grid;
  place-items: center;
  padding: clamp(1.25rem, 3vw, 2.5rem);
  border-radius: 1.5rem;
  background: linear-gradient(135deg, var(--violett-tief), var(--violett));
}
.abschnitt-bild img { width: 100%; max-width: 44rem; border-radius: 1rem; box-shadow: var(--schatten-fenster); }
.abschnitt-bild--hoch img { max-width: 30rem; }
.abschnitt-bild--flach img { max-width: none; }
/* eine einzelne Karte der App (die Kennzahl Antwortzeit): nicht breiter als 22rem */
.abschnitt-bild--klein img { max-width: 22rem; }

/* ---------- "So unterstuetzt Sie Clustoria": Karten auf Flieder ---------- */
.punkte { padding-block: 0 var(--abschnitt); }
.kunden + .punkte { padding-top: var(--abschnitt); }
.punkte h2 { font-size: clamp(1.5rem, 1rem + 1.2vw, 2rem); letter-spacing: -0.02em; }
.karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 1.5rem; margin-top: 2rem; }
.karten li { padding: 1.75rem; border-radius: 1.25rem; background: var(--flieder); }
.karten li > .zeichen { width: 2rem; height: 2rem; margin-bottom: 1rem; color: var(--violett); stroke-width: 1.5; }
.karten h3 { font-size: 1.125rem; line-height: 1.3; letter-spacing: -0.01em; }
.karten h3 + p { margin-top: 0.625rem; color: var(--tinte-2); }

/* ---------- Schlussband der Unterseite: der Schlusssatz als Ueberschrift ---------- */
.schluss--seite h2 { max-width: 26ch; margin-inline: auto; font-size: clamp(1.5rem, 1rem + 1.4vw, 2.25rem); line-height: 1.2; letter-spacing: -0.02em; text-wrap: balance; }

/* ---------- Kontakt: drei Karten (Demo, Kontakt, Pruefunterlagen) ---------- */
.kontakt-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 1.5rem; padding-block: var(--abschnitt); }
.kontakt-karte { display: flex; flex-direction: column; padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: 1.5rem; background: var(--flieder); }
.kontakt-karte h2 { font-size: 1.5rem; letter-spacing: -0.02em; }
.kontakt-karte h2 + p { margin-top: 1rem; }
.kontakt-knopf { margin-top: auto; padding-top: 1.75rem; }
.kontakt-daten { display: grid; gap: 1rem; margin-top: 1.25rem; }
.kontakt-daten dt { font-size: 0.75rem; font-weight: 650; letter-spacing: 0.1em; text-transform: uppercase; color: var(--violett); }
.kontakt-daten dd { margin: 0.25rem 0 0; }
.kontakt-daten a { font-weight: 500; }

@media (max-width: 71.99rem) {
  .abschnitt, .abschnitt:nth-child(even) { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .abschnitt:nth-child(even) .abschnitt-bild { order: 0; }
  .abschnitt-text { max-width: 36rem; }
}
@media (max-width: 47.99rem) {
  .seite-hero { --strahl-x: 50%; --strahl-y: 100%; --strahl-rx: 70%; --strahl-ry: 60%; }
  .abschnitt-bild { padding: 1.25rem; }
  /* am Telefon rund 28rem Hoehe als Grenze (die Formate nach der Vorgabe,
     damit sie gelten) */
  .abschnitt-bild img { max-width: 34rem; }
  .abschnitt-bild--hoch img { max-width: 24rem; }
  .abschnitt-bild--flach img { max-width: none; }
  .abschnitt-bild--klein img { max-width: 22rem; }
  .karten li { padding: 1.5rem; }
}