/* 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. */

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-var.woff2?v=26") 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;
  /* 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);
  --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;
}
.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;
}

/* ---------- Funktionsblock: Text und Grafik oder App-Ausschnitt ----------
   Text in der schmaleren Spalte (5 von 12), Bild in der breiteren (7 von
   12); bei --wechsel steht das Bild links (im Markup bleibt der Text zuerst). */
.funktion { padding-block: var(--abschnitt); }
.funktion .rahmen {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.funktion--wechsel .rahmen { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.funktion--wechsel .funktion-bild { order: -1; }
/* Grafik-Bloecke: die Grafik braucht die breitere Spalte (8 von 12). Die
   Textspalte behaelt mindestens 26rem, damit "Kundeninteraktionen" im h2
   (398 px bei 1920, 371 px bei 1440) nie im Wort bricht. */
.funktion--grafik .rahmen { grid-template-columns: minmax(26rem, 4fr) minmax(0, 8fr); }
.funktion-text { max-width: 29rem; }
.funktion-zeichen { width: 2.5rem; height: 2.5rem; margin-bottom: 1.5rem; color: var(--violett); stroke-width: 1.4; }
.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;
}
.funktion h2 {
  margin-top: 0.875rem;
  color: var(--tinte);
  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 + p { margin-top: 1.25rem; }
/* nur die Ueberschrift der Aufklappliste; die Grafik-Ueberschrift hat
   ihre eigene Regel (.grafik-titel) */
.funktion-text h3 { margin-top: 2rem; font-size: 1rem; font-weight: 600; color: var(--violett-tief); letter-spacing: 0; }
.liste { margin-top: 0.75rem; border-top: 1px solid var(--linie); }
.liste details { border-bottom: 1px solid var(--linie); }
.liste summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  font-weight: 500;
  list-style: none;
}
.liste summary::-webkit-details-marker { display: none; }
.liste summary .zeichen {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.3125rem;
  border-radius: 50%;
  background: var(--violett);
  color: var(--weiss);
  stroke-width: 2.4;
  transition: transform 180ms var(--aus);
}
.liste details[open] summary .zeichen { transform: rotate(180deg); }
.liste details > p { padding: 0 2.5rem 1rem 0; color: var(--tinte-2); }
.funktion-bild {
  display: grid;
  place-items: center;
  aspect-ratio: 557 / 522;
  padding: clamp(1.25rem, 3vw, 2.5rem);
  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 mit der Zeile "Darstellung" ---------- */
.grafik { display: flex; flex-direction: column; padding: clamp(1.25rem, 3vw, 2rem); 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); }
.grafik figcaption { margin-top: 1rem; font-size: 0.8125rem; font-weight: 500; color: var(--tinte-2); }
.grafik--themen figcaption { color: var(--auf-violett); }

/* 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); }
}
.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.5rem; 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. */
.kunden { padding-block: var(--abschnitt); background: var(--violett); color: var(--weiss); }
.kunden h2 { font-size: 0.8125rem; font-weight: 650; letter-spacing: 0.1em; text-transform: uppercase; }
.kunden-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin-top: 1.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: 72rem) {
  /* der Rahmen der Grafik fuellt die Zeile neben dem Text */
  .grafik { align-self: stretch; min-height: 26rem; }
}
@media (max-width: 79.99rem) {
  /* Kundenkarten unter 80rem einspaltig: nebeneinander blieben neben der
     weissen Karte (328 px) nur 148 bis 210 px Foto (1152 bis 1279), ab 1280
     sind es 212 px, bei 1440 236 px */
  .kunden-liste { grid-template-columns: minmax(0, 1fr); }
}
@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; }
  .funktion .rahmen, .funktion--wechsel .rahmen, .funktion--grafik .rahmen { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .funktion--wechsel .funktion-bild { order: 0; }
  .funktion-text { max-width: 36rem; }
  .funktion-bild { aspect-ratio: auto; }
}
@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; }
  .funktion-bild { padding: 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 { padding: 1.25rem; }
  .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) {
  /* 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; }
}


/* ==================== 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 { --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 {
  --dauer: 5000ms;
  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); }
.spur-fuellung { display: block; height: 100%; border-radius: inherit; background: var(--violett); transform: scaleX(0); transform-origin: left center; transition: transform 220ms linear; }
.station.ist-fertig .spur-fuellung { transform: none; }
/* angehalten: die aktive Station als voller Balken (hier stehen wir) */
.demo[data-laeuft="nein"] .station.ist-aktiv .spur-fuellung { transform: none; }
/* laeuft: der Balken fuellt sich ueber die Verweildauer */
.demo[data-laeuft="ja"] .station.ist-aktiv .spur-fuellung { transform: none; transition: transform var(--dauer) linear; }
/* .neu setzt das Skript fuer einen Augenblick, damit der Balken von vorn
   beginnt; .schnappt beim Sprung zurueck, damit nichts sichtbar auslaeuft */
.demo .station.neu .spur-fuellung { transform: scaleX(0); transition: none; }
.demo.schnappt .spur-fuellung { transition: none; }
html:not(.js) .demo-steuerung { display: none; }
/* Buehne: mit Skript liegen die fuenf Ansichten uebereinander und blenden
   um (300 ms); ohne Skript stehen sie untereinander, jede mit ihrem Satz. */
.demo-buehne { display: grid; background: var(--grund); }
.ansicht { display: grid; grid-template-rows: auto 1fr; margin: 0; }
.js .ansicht { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity 300ms var(--aus), visibility 0s 300ms; }
.js .ansicht.ist-aktiv { opacity: 1; visibility: visible; transition-delay: 0s; }
.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); }
html:not(.js) .demo-buehne { display: block; }
html:not(.js) .ansicht + .ansicht { border-top: 1px solid var(--linie); }

/* ---------- Bildwechsel 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 { --polster: clamp(1.25rem, 3vw, 2.5rem); 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;
}
.wechsel > picture[data-bild]:not(:first-child) { position: absolute; inset: var(--polster); display: grid; place-items: center; }
.wechsel > picture[data-bild]:not(:first-child) img { 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; }
.wechsel--antwort { aspect-ratio: auto; }

/* ---------- 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. */
.entwurf-karte {
  position: relative;
  width: 100%;
  padding: 1rem 1.25rem 1rem;
  border-radius: 1rem;
  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.5rem; margin-bottom: 0.75rem; }
.app-kopf > .zeichen { width: 1.25rem; height: 1.25rem; color: var(--violett); stroke-width: 1.8; }
.app-kopf b { font-size: 1.0625rem; font-weight: 650; }
.app-kopf .app-knopf { margin-left: auto; }
.app-knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.25rem;
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--linie);
  border-radius: 0.625rem;
  background: var(--weiss);
  font-size: 0.875rem;
  font-weight: 550;
  white-space: nowrap;
}
.app-knopf .zeichen { width: 1rem; height: 1rem; stroke-width: 1.8; }
.app-knopf--leise { min-height: 2rem; padding: 0.25rem 0.75rem; border-color: transparent; background: #f3f1f8; font-size: 0.8125rem; }
.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.5rem; padding-inline: 1.125rem; 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.75rem; border-radius: 0.875rem; background: #f3f1f8; }
.app-feld { padding: 0.875rem 1rem; border-radius: 0.625rem; 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.25rem; text-align: center; font-size: 0.875rem; color: var(--tinte-2); }
.wartet .app-wartet { display: grid; }
.app-wartet b { font-size: 1rem; color: var(--tinte); }
.app-kreis { width: 1.25rem; height: 1.25rem; margin-bottom: 0.375rem; 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.375rem; margin-top: 0.625rem; font-size: 0.8125rem; line-height: 1.4; color: var(--tinte-2); }
.app-hinweis .zeichen { flex: none; width: 0.875rem; height: 0.875rem; margin-top: 0.15rem; color: var(--violett); }
.app-link { text-decoration: underline; text-underline-offset: 0.15em; }
.app-toene { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.app-toene span { padding: 0.375rem 0.875rem; border: 1px solid var(--linie); border-radius: 999px; background: var(--weiss); font-size: 0.875rem; color: var(--tinte-2); }
.app-knoepfe { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; margin-top: 0.875rem; }
.noch-einmal {
  display: flex;
  width: max-content;
  margin: 0.75rem auto 0;
  padding: 0.25rem 0.75rem;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--violett);
  font-size: 0.8125rem;
  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; }

/* ---------- 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: der Rahmen folgt der Hoehe des aktiven Bilds
     (das aktive liegt im Fluss, die anderen absolut darueber); die
     Bildschirm-Zuschnitte waeren im Rahmen der Entwurfskarte (730 px hoch)
     winzig. Der Sprung beim Tippen folgt einer Eingabe (kein CLS). */
  .js .wechsel > [data-bild]:not(.ist-aktiv) {
    position: absolute;
    inset: var(--polster);
    width: auto;
    max-width: calc(100% - 2 * var(--polster));
    max-height: calc(100% - 2 * var(--polster));
    margin: auto;
    overflow: hidden;
  }
  .js .wechsel > picture[data-bild]:not(.ist-aktiv) img { width: auto; height: auto; max-width: 100%; max-height: 100%; }
  .js .wechsel > [data-bild].ist-aktiv { position: static; width: 100%; max-width: 17rem; max-height: none; margin: 0; }
  .js .wechsel > .entwurf-karte.ist-aktiv { max-width: none; }
  .js .wechsel > picture[data-bild].ist-aktiv { display: grid; place-items: center; }
  .js .wechsel > picture[data-bild].ist-aktiv img { width: 100%; max-width: none; max-height: none; }
  /* Buehne am Telefon: die Zuschnitte sind 3:4 */
  .ansicht img { aspect-ratio: 3 / 4; }
  .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.875rem 1rem 0.875rem; }
  .app-block { padding: 0.625rem; }
  .app-feld { padding: 0.75rem 0.875rem; }
}
/* 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; }
}

@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). */
@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 { display: 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); }

/* ---------- 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). Der Rahmen ist mindestens 24rem
   hoch, damit auch ein schmaler Ausschnitt eine Flaeche bekommt; das Bild
   nimmt hoechstens die Breite des Rahmens und 34rem Hoehe (hochformatige
   Ausschnitte werden nicht breiter als noetig). */
.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;
  min-height: 24rem;
  padding: clamp(1.25rem, 3vw, 2.5rem);
  border-radius: 1.5rem;
  background: linear-gradient(135deg, var(--violett-tief), var(--violett));
}
.abschnitt-bild img { width: auto; max-width: 100%; max-height: 34rem; border-radius: 1rem; box-shadow: var(--schatten-fenster); }
/* eine einzelne Karte der App (die Kennzahl Antwortzeit): nicht breiter als 22rem */
.abschnitt-bild--klein img { max-width: min(100%, 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 { min-height: 0; padding: 1.25rem; }
  .abschnitt-bild img { max-height: 28rem; }
  .karten li { padding: 1.5rem; }
}