/* === /assets/css/pruefung.css === */
/* ═════════════════════════════════════════════════════════════════════════
   Unternehmen prüfen — vier Schritte, eine Frage je Bildschirm

   Nutzt ausschließlich die Tokens aus main.css (--canvas, --ink, --muted,
   --line, --line-2, --cta, --cta-tief, --cta-text, --serif, --sans, --ease,
   --dur-fast). Keine eigene Palette, keine zweite Schriftfamilie.

   Die hochwertige Wirkung kommt aus Typografie, Abstand und Ruhe — nicht aus
   Schatten, Verläufen oder Karten. Deshalb: keine Fläche auf der Fläche.
   ═════════════════════════════════════════════════════════════════════════ */

.pruef {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--canvas);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.pruef[hidden] { display: none; }

/* Auf projektprofil.html läuft derselbe Ablauf ohne Überlagerung — gleiche
   Bausteine, gleiche Logik, nur nicht über der Seite liegend. */
.pruef--seite {
  position: static;
  /* dvh, nicht vh: auf iOS zählt vh die Adressleiste mit, und der Schritt
     rutscht unter den Bildrand. Der Rahmen scrollt notfalls in sich, damit
     die Seite selbst nie scrollt. */
  height: 100dvh;
  z-index: auto;
  padding-bottom: env(safe-area-inset-bottom);
}

/* ── Kopf: Marke links, Schließen rechts ───────────────────────────────── */

.pruef__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(18px, 2.4vw, 28px) var(--gutter);
}
/* Wie in Kopf- und Fusszeile: der Punkt sitzt auf der Schriftgrundlinie,
   nicht auf halber Bildhoehe, und Groesse, Abstand und Lage rechnen aus der
   Hoehe der Wortmarke. */
.pruef__marke { --marke-h: 19px; display: inline-flex; align-items: flex-end; gap: 0; }
.pruef__marke .marke__punkt {
  width: calc(var(--marke-h) * 0.205); height: calc(var(--marke-h) * 0.205);
  margin-left: calc(var(--marke-h) * -0.034);
  margin-bottom: calc(var(--marke-h) * 0.15);
}
.pruef__marke img { height: var(--marke-h); width: auto; display: block; }

.pruef__zu {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 6px 9px 14px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  border-radius: 999px;
  transition: color var(--dur-fast) var(--ease);
}
.pruef__zu:hover { color: var(--ink); }
.pruef__zu svg { width: 17px; height: 17px; stroke: currentColor; stroke-width: 1.6; fill: none; }
.pruef--seite .pruef__zu svg { transform: rotate(180deg); }

/* ── Mitte: Fortschritt, Frage, Antworten ──────────────────────────────── */

.pruef__mitte {
  display: grid;
  align-content: center;
  justify-items: stretch;
  padding: clamp(16px, 3vw, 40px) var(--gutter) clamp(28px, 4vw, 56px);
}
.pruef__bahn { width: 100%; max-width: 700px; margin: 0 auto; }

.pruef__fortschritt { display: grid; gap: 12px; margin-bottom: clamp(26px, 3.4vw, 44px); }
.pruef__zaehler {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.pruef__linie { height: 1px; background: var(--line); position: relative; }
.pruef__linie i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 25%;
  background: var(--cta-tief);
  transition: width 620ms var(--ease);
}

/* Ein Schritt liegt immer allein im Bild. */
.pruef__schritt { display: none; }
.pruef__schritt.is-an { display: block; }
.pruef__schritt.is-kommt { animation: pruef-auf 320ms var(--ease) both; }
@keyframes pruef-auf {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: none; }
}
.pruef__schritt.is-geht { animation: pruef-ab 180ms var(--ease) both; }
@keyframes pruef-ab {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(-7px); }
}

.pruef__frage {
  font-family: var(--serif);
  font-style: normal;
  font-weight: 700;
  font-size: clamp(30px, 4.2vw, 50px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  max-width: 19ch;
}
/* Die Frage bekommt beim Schrittwechsel den Fokus, damit Vorlesehilfen den
   Wechsel mitbekommen. Sie ist aber nichts zum Bedienen — also kein Rahmen. */
.pruef__frage:focus,
.pruef__dank:focus { outline: none; }

.pruef__hinweis {
  margin-top: 14px;
  max-width: 46ch;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

/* ── Antwortzeilen: ganze Zeile klickbar, keine Karten, keine Symbole ──── */

.pruef__liste { margin-top: clamp(26px, 3.2vw, 40px); border-top: 1px solid var(--line); }
.pruef__opt {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  min-height: 68px;
  padding: 18px 4px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.35;
  letter-spacing: -0.012em;
  text-align: left;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), padding-left var(--dur-fast) var(--ease);
}
.pruef__opt:hover { color: var(--ink); padding-left: 10px; }
.pruef__opt:focus-visible { outline: 2px solid var(--cta-tief); outline-offset: 3px; }

/* Der Auswahlzustand ist ein Punkt, kein Häkchen und kein Symbol. */
.pruef__punkt {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: transparent;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.pruef__opt:hover .pruef__punkt { border-color: var(--muted); }
.pruef__opt.is-gewaehlt { color: var(--ink); }
.pruef__opt.is-gewaehlt .pruef__punkt {
  background: var(--cta);
  border-color: var(--cta-tief);
  transform: scale(1.35);
}
.pruef__opt.is-gewaehlt span:last-child { font-weight: 500; }

/* ── Eingabefelder ─────────────────────────────────────────────────────── */

.pruef__feld { margin-top: clamp(26px, 3vw, 38px); }
.pruef__feld + .pruef__feld { margin-top: 26px; }
.pruef__label {
  display: block;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
}
.pruef__eingabe {
  width: 100%;
  padding: 12px 2px;
  border: 0;
  border-bottom: 1px solid var(--line-2);
  background: transparent;
  color: var(--ink);
  font: inherit;
  /* Nie unter 16px — sonst zoomt iOS beim Fokus in das Feld hinein. */
  font-size: clamp(17px, 1.5vw, 21px);
  outline: none;
  transition: border-color var(--dur-fast) var(--ease);
}
.pruef__eingabe::placeholder { color: color-mix(in oklab, var(--muted) 62%, transparent); }
/* Der Fokus faerbt die Linie und setzt denselben Ring wie bei den
   Auswahlzeilen. Ohne eigene Regel zeichnete der Browser seinen Standardring
   in Schwarz — sichtbar, aber eine zweite Formensprache. */
.pruef__eingabe:focus { border-bottom-color: var(--cta-tief); }
.pruef__eingabe:focus-visible { outline: 2px solid var(--cta-tief); outline-offset: 4px; border-radius: 3px; }

.pruef__zusatz { display: none; }
.pruef__zusatz.is-an { display: block; animation: pruef-auf 320ms var(--ease) both; }

.pruef__fehler {
  margin-top: 16px;
  color: #8c2f1f;
  font-size: 14.5px;
  line-height: 1.5;
  display: none;
}
.pruef__fehler.is-an { display: block; }

/* ── Einwilligung: bestehender, abgestimmter Text ──────────────────────── */

.pruef__einwilligung {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: clamp(26px, 3vw, 36px);
  max-width: 52ch;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.55;
  cursor: pointer;
}
.pruef__einwilligung input { margin-top: 3px; flex-shrink: 0; width: 17px; height: 17px; accent-color: var(--cta); }

/* ── Aktionen ──────────────────────────────────────────────────────────── */

.pruef__aktionen {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: clamp(28px, 3.4vw, 40px);
}
.pruef__weiter {
  padding: 15px 32px;
  border: 0;
  border-radius: 999px;
  background: var(--cta);
  color: var(--cta-schrift);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  min-height: 50px;
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.pruef__weiter:hover { opacity: 0.9; transform: translateY(-1px); }
.pruef__weiter[disabled] { opacity: 0.4; pointer-events: none; transform: none; }
.pruef__weiter.is-sendet { pointer-events: none; opacity: 0.85; }

.pruef__zurueck {
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 14.5px;
  cursor: pointer;
  padding: 8px 2px;
  min-height: 44px;
  transition: color var(--dur-fast) var(--ease);
}
.pruef__zurueck:hover { color: var(--ink); }
.pruef__zurueck[hidden] { display: none; }

.pruef__klein { margin-top: 16px; font-size: 13.5px; line-height: 1.55; color: var(--muted); max-width: 46ch; }

/* ── Fuß: die Person, die tatsächlich prüft ────────────────────────────── */

.pruef__fuss {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: clamp(16px, 2vw, 24px) var(--gutter) clamp(22px, 2.6vw, 32px);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13.5px;
}
.pruef__fuss img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 12%;
  background: var(--canvas-2);
  flex: 0 0 auto;
}
.pruef__fuss b { color: var(--ink); font-weight: 600; }

/* ── Abschluss ─────────────────────────────────────────────────────────── */

.pruef__dank {
  font-family: var(--serif);
  font-style: normal;
  font-weight: 700;
  font-size: clamp(32px, 4.6vw, 54px);
  line-height: 1.04;
  letter-spacing: -0.035em;
}
.pruef__folge { margin-top: 18px; max-width: 48ch; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.6; color: var(--ink-2); }

.pruef__zusammenfassung {
  margin-top: clamp(30px, 3.6vw, 44px);
  border-top: 1px solid var(--line);
}
.pruef__zeile {
  display: grid;
  grid-template-columns: minmax(0, 0.5fr) minmax(0, 1fr);
  gap: 18px;
  padding: 16px 2px;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.45;
}
.pruef__zeile dt { color: var(--muted); }
.pruef__zeile dd { color: var(--ink); margin: 0; }

/* ── Mobil: eigene senkrechte Komposition ──────────────────────────────── */

@media (max-width: 719px) {
  .pruef__mitte { align-content: start; padding-top: clamp(20px, 6vw, 34px); }
  .pruef__frage { font-size: clamp(27px, 7.4vw, 34px); max-width: 100%; }
  .pruef__liste { margin-top: 24px; }
  /* Mindestens 48 px Berührfläche, nie zweispaltig. */
  .pruef__opt { min-height: 64px; font-size: 17px; gap: 15px; }
  .pruef__aktionen { gap: 14px; }
  .pruef__weiter { width: 100%; justify-content: center; }
  .pruef__zurueck { width: 100%; text-align: left; }
  .pruef__zeile { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .pruef__fuss { font-size: 13px; }
}

/* ── Flache Schirme ────────────────────────────────────────────────────
   Nicht die Breite entscheidet, ob ein Schritt passt, sondern die Höhe.
   Gemessen: 1366×768 lief 52 px über, 375×667 19 px. Auf flachen Schirmen
   rücken Fortschritt, Frage und Zeilen deshalb zusammen — der aktive Schritt
   muss ohne Seitenscroll lesbar sein. */
@media (max-height: 820px) {
  .pruef__kopf { padding-top: 14px; padding-bottom: 14px; }
  .pruef__mitte { padding-top: 10px; padding-bottom: 18px; }
  .pruef__fortschritt { margin-bottom: 20px; }
  .pruef__frage { font-size: clamp(26px, 3.2vw, 36px); }
  .pruef__liste { margin-top: 18px; }
  .pruef__opt { min-height: 58px; padding: 13px 4px; }
  .pruef__feld { margin-top: 20px; }
  .pruef__feld + .pruef__feld { margin-top: 16px; }
  .pruef__einwilligung { margin-top: 18px; }
  .pruef__aktionen { margin-top: 20px; }
  .pruef__fuss { padding-top: 12px; padding-bottom: 14px; }
  .pruef__fuss img { width: 32px; height: 32px; }
  .pruef__zusammenfassung { margin-top: 20px; }
  .pruef__zeile { padding: 11px 2px; }
}
@media (max-height: 660px) {
  .pruef__frage { font-size: clamp(23px, 3vw, 29px); }
  .pruef__opt { min-height: 52px; padding: 11px 4px; font-size: 16px; }
  .pruef__fortschritt { margin-bottom: 14px; }
  .pruef__liste { margin-top: 14px; }
  /* Die Vertrauenszeile ist wichtig, aber nicht wichtiger als die Frage. */
  .pruef__fuss { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pruef__schritt.is-kommt,
  .pruef__schritt.is-geht,
  .pruef__zusatz.is-an { animation: none; }
  .pruef__linie i,
  .pruef__opt,
  .pruef__punkt,
  .pruef__weiter { transition: none; }
}

/* Der rechtlich maßgebliche deutsche Einwilligungstext unter dem Ankreuzfeld.
   Erscheint nur in den Übersetzungen — auf Deutsch steht er ja schon oben. */
.pruef__massgeblich {
  margin-top: 10px;
  max-width: 46em;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}

/* Ein Fokusring für die ganze Prüfstrecke, nicht drei verschiedene. Ohne
   diese Regel zeichnet der Browser seinen eigenen — 1 px schwarz, eine
   zweite Formensprache neben den 2 px Cyan der Auswahlzeilen. */
.pruef a:focus-visible,
.pruef button:focus-visible,
.pruef__zu:focus-visible,
.pruef__zurueck:focus-visible,
.pruef__weiter:focus-visible {
  outline: 2px solid var(--cta-tief);
  outline-offset: 3px;
  border-radius: 999px;
}

/* === /assets/css/fluss.css === */
/* ═════════════════════════════════════════════════════════════════════════
   Informationsfluss — die Punkte sind die Hauptdarsteller

   Ein Punkt ist eine Information: eine Suche, ein Anruf, eine Anfrage, ein
   Termin. Der Besucher sieht an seiner Bewegung, ob sie ankommt, hängen
   bleibt, sich verdoppelt oder verschwindet.

   Bewusst NICHT: Textblöcke, die nacheinander einblenden. Verbindungslinien
   als Hauptdarstellung. Kästen mit Beschreibungssätzen. Häkchenlisten.
   ═════════════════════════════════════════════════════════════════════════ */

.fl { position: relative; }
.fl__svg { display: block; width: 100%; height: auto; overflow: visible; }

/* ── Systemknoten: Symbol, darunter ein kurzes Wort. Kein Satz. ───────── */

.fl__k { transition: opacity 900ms var(--ease-sys), transform 1200ms var(--ease-sys); }
.fl__k rect {
  fill: var(--flaeche); stroke: var(--line-2); stroke-width: 1.2;
  transition: stroke 600ms var(--ease-sys), fill 600ms var(--ease-sys);
}
.fl__k path, .fl__k circle, .fl__k line {
  fill: none; stroke: var(--ink-2); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  transition: stroke 600ms var(--ease-sys);
}
.fl__k text {
  fill: var(--muted); font-family: var(--sans); font-size: 15px;
  font-weight: 500; text-anchor: middle; letter-spacing: 0.01em;
  transition: fill 600ms var(--ease-sys);
}

/* Aufmerksamkeit nötig — nicht „schlecht". */
.fl__k.is-achtung rect { stroke: var(--sicht-fl); }
.fl__k.is-achtung path, .fl__k.is-achtung circle, .fl__k.is-achtung line { stroke: var(--sicht); }
/* Belegt in Ordnung. */
.fl__k.is-gut rect { stroke: var(--ergebnis); }
.fl__k.is-gut text { fill: var(--ergebnis); }
/* Tritt zurück, während anderswo etwas passiert. */
.fl__k.is-still { opacity: 0.32; }

/* ── Die Punkte ──────────────────────────────────────────────────────── */

.fl__p {
  offset-distance: 0%;
  offset-rotate: 0deg;
  opacity: 0;
}
.fl__p circle { r: 7; }

/* Eine Anfrage, ein Anruf, eine Suche — Farbe nach Bedeutung. */
.fl__p--anfrage circle { fill: var(--anfrage); }
.fl__p--sicht circle   { fill: var(--sicht-fl); }
.fl__p--ablauf circle  { fill: var(--ablauf); }
.fl__p--gut circle     { fill: var(--ergebnis); }

/* Eine vollständige Anfrage trägt ihre Bestandteile sichtbar mit sich. */
.fl__p--voll circle:nth-child(1) { r: 11; fill: var(--anfrage); }
.fl__p--voll circle:nth-child(n+2) { r: 3; fill: var(--flaeche); }

/* Ankommen: läuft durch und bleibt. */
@keyframes fl-an {
  0%   { offset-distance: 0%; opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 1; }
}
/* Abbrechen: kommt nicht an und verlischt unterwegs. */
@keyframes fl-ab {
  0%   { offset-distance: 0%; opacity: 0; }
  10%  { opacity: 1; }
  55%  { offset-distance: 52%; opacity: 1; }
  75%  { offset-distance: 56%; opacity: 0.25; }
  100% { offset-distance: 56%; opacity: 0; }
}
/* Hängen bleiben: pendelt zwischen zwei Stellen. */
@keyframes fl-haengt {
  0%   { offset-distance: 0%; opacity: 0; }
  10%  { opacity: 1; }
  40%  { offset-distance: 46%; }
  70%  { offset-distance: 22%; }
  100% { offset-distance: 40%; opacity: 1; }
}
/* Unbeantwortet: kommt an und pulst. */
@keyframes fl-wartet {
  0%   { offset-distance: 0%; opacity: 0; }
  10%  { opacity: 1; }
  60%  { offset-distance: 100%; opacity: 1; }
  75%  { opacity: 0.35; }
  90%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0.5; }
}

.fl__p.is-laeuft  { animation: fl-an var(--d, 2600ms) var(--ease-sys) var(--v, 0ms) both; }
.fl__p.is-bricht  { animation: fl-ab var(--d, 2600ms) var(--ease-sys) var(--v, 0ms) both; }
.fl__p.is-haengt  { animation: fl-haengt var(--d, 3200ms) linear var(--v, 0ms) both; }
.fl__p.is-wartet  { animation: fl-wartet var(--d, 3000ms) var(--ease-sys) var(--v, 0ms) both; }

/* Nach einem Sprachwechsel bleibt die bereits sichtbare Bühne im Ergebnis:
   keine wiederholte Bewegung, alle Bedeutungsfarben gleichzeitig sichtbar. */
.fl.is-uebernommen .fl__p,
.fl.is-abgeschlossen .fl__p {
  animation: none !important;
  opacity: 1;
  offset-distance: var(--ruhe, 100%);
}

/* Verlorene Wege werden im Prüfmoment golden markiert. */
.fl__verlust {
  fill: none; stroke: var(--sicht-fl); stroke-width: 2;
  stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0;
  transition: stroke-dashoffset 900ms var(--ease-sys), opacity 500ms var(--ease-sys);
}
.fl.is-pruefung .fl__verlust { opacity: 0.85; stroke-dashoffset: 0; }
.fl.is-behoben .fl__verlust { opacity: 0; }

/* Der Prüfimpuls ist kein Loader: er wandert einmal durch den Ablauf. */
.fl__impuls {
  fill: none; stroke: var(--sicht-fl); stroke-width: 1.4; opacity: 0;
}
.fl.is-pruefung .fl__impuls { animation: fl-impuls 1500ms var(--ease-sys) both; }
@keyframes fl-impuls {
  0%   { opacity: 0; transform: translateX(-60%); }
  25%  { opacity: 0.6; }
  75%  { opacity: 0.6; }
  100% { opacity: 0; transform: translateX(60%); }
}

/* Der Systemraum bestätigt einmal — kein Dauerleuchten. */
.fl__raum {
  fill: none; stroke: var(--line); stroke-width: 1;
  transition: stroke 800ms var(--ease-sys), opacity 800ms var(--ease-sys);
  opacity: 0;
}
.fl.is-geordnet .fl__raum { opacity: 1; }
.fl.is-bestaetigt .fl__raum { stroke: var(--ergebnis); }

/* ── Statusmeldungen: kurz, groß, eine zur Zeit ──────────────────────── */

/* Unter dem Ablauf, nicht darüber: mittig platziert verdeckte die Meldung den
   Anfrage-Knoten — also genau die Stelle, über die sie spricht. */
.fl__status {
  margin-top: 6px;
  text-align: left; pointer-events: none;
  opacity: 0; transition: opacity 600ms var(--ease-sys);
  min-height: 74px;
}
.fl__status.is-an { opacity: 1; }
.fl__status b {
  display: block; font-size: clamp(19px, 2vw, 27px); font-weight: 600;
  letter-spacing: -0.02em; line-height: 1.15;
}
.fl__status span { display: block; margin-top: 7px; font-size: 14.5px; color: var(--muted); }
.fl__status--achtung b { color: var(--sicht); }
.fl__status--gut b { color: var(--ergebnis); }

/* Kleine Meldung am Rand, wenn der Blick beim Ablauf bleiben soll. */
.fl__notiz {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 4%; font-size: 13.5px; letter-spacing: 0.02em;
  opacity: 0; transition: opacity 500ms var(--ease-sys);
  color: var(--sicht);
}
.fl__notiz.is-an { opacity: 1; }

/* Wiederholen, dezent. */
.fl__nochmal {
  margin-top: 14px; border: 0; background: transparent; padding: 6px 2px;
  color: var(--muted); font: inherit; font-size: 13px; cursor: pointer;
  transition: color 200ms var(--ease-sys);
}
.fl__nochmal:hover { color: var(--ink); }

@media (max-width: 899px) {
  /* Weniger Systeme gleichzeitig, größere Punkte, Abläufe nacheinander. */
  .fl__p circle { r: 9; }
  .fl__k text { font-size: 17px; }
  .fl__status { max-width: 84%; }
  .fl__status b { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .fl__p { animation: none !important; opacity: 1; offset-distance: var(--ruhe, 100%); }
  .fl__p.is-bricht { offset-distance: 54%; opacity: 0.3; }
  .fl__impuls { animation: none !important; }
  .fl__k, .fl__raum, .fl__verlust, .fl__status, .fl__notiz { transition: none !important; }
}

/* Die Notiz begleitet den Ablauf am unteren Rand der Bühne. */
.fl__buehne { position: relative; }
.fl__notiz { bottom: 2%; }

/* ═══ Vereinte Hero-Bühne ═════════════════════════════════════════════════
   Überschrift, CTA und Systemgrafik liegen auf EINER Fläche. Keine Kachel,
   kein Rahmen, kein Schatten um die Grafik — sonst wirkt sie wie ein
   eingebettetes Video neben dem Text statt als dessen Beweis. */

.hero--buehne {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(104px, 13vh, 150px) var(--gutter) clamp(48px, 6vw, 80px);
  display: grid;
  gap: clamp(28px, 3.5vw, 56px);
  align-items: center;
  min-height: 100svh;
}
.hero__wort { max-width: 46ch; }
.hero__buehne { position: relative; min-width: 0; }

/* Der Statusbereich hat eine reservierte Höhe: beim Wechsel springt nichts,
   und es kann nie eine zweite Meldung daneben stehen. */
.fl__status {
  margin-top: clamp(10px, 1.6vw, 18px);
  min-height: 82px;
  text-align: left;
}
.fl__quelle-hinweis { margin-top: 2px; font-size: 12px; color: var(--muted); }

/* Maßnahmen sitzen direkt am betroffenen Weg — keine neue Textkarte. */
.fl__mass text {
  fill: var(--sicht); font-family: var(--sans); font-size: 15px;
  font-weight: 500; letter-spacing: 0.01em;
}
.fl__mass { opacity: 0; transition: opacity 700ms var(--ease-sys); }
.fl[data-szene="2"] .fl__mass, .fl[data-szene="3"] .fl__mass,
.fl[data-szene="4"] .fl__mass, .fl[data-szene="5"] .fl__mass,
.fl[data-szene="6"] .fl__mass { opacity: 1; }

/* Der gelöste Weg bleibt ruhig grün — nur er, nichts sonst. */
.fl__geloest {
  fill: none; stroke: var(--ergebnis); stroke-width: 2;
  stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0;
  transition: stroke-dashoffset 1000ms var(--ease-sys), opacity 500ms var(--ease-sys);
}
.fl[data-szene="3"] .fl__geloest, .fl[data-szene="4"] .fl__geloest,
.fl[data-szene="5"] .fl__geloest, .fl[data-szene="6"] .fl__geloest {
  opacity: 1; stroke-dashoffset: 0;
}

/* Messimpuls: ein einzelner ruhiger Puls, kein Dauerblinken. */
.fl__mess circle { fill: none; stroke: var(--ablauf); stroke-width: 1.4; }
.fl__mess { opacity: 0; }
.fl[data-szene="4"] .fl__mess { animation: fl-mess 2000ms var(--ease-sys) 2; }
@keyframes fl-mess {
  0%   { opacity: 0; transform: scale(0.7); transform-origin: 515px 214px; }
  40%  { opacity: 0.8; }
  100% { opacity: 0; transform: scale(1.25); transform-origin: 515px 214px; }
}

@media (min-width: 980px) {
  .hero--buehne { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); }
  /* Kleiner als zuvor (48 px). Der Hero trägt nur noch die Überschrift und den
     Knopf — der erklärende Absatz steht weiter unten bei den Werkzeugen und
     stand hier doppelt. Bei weniger Text darf die Zeile ruhiger sein. */
  .hero--buehne .hero__title { font-size: clamp(28px, 2.8vw, 40px); max-width: 20ch; line-height: 1.08; }
}
@media (max-width: 979px) {
  /* Eigene senkrechte Komposition: Überschrift, CTA und Vertrauenszeile
     füllen den ersten Bildschirm, die Grafik beginnt darunter.

     Der Satz ist damit auf dem Phone eine geschlossene Aussage: man liest
     ihn zu Ende, bevor irgendetwas anderes ins Bild kommt. Vorher lugte die
     Grafik von unten herein und zog den Blick weg, während der Satz noch
     nicht gelesen war.

     100svh statt 100vh: svh rechnet mit ausgefahrener Browserleiste, also
     der kleinsten je sichtbaren Fläche. 100vh wäre auf iOS und Android um
     die Höhe der Leiste zu hoch — die Vertrauenszeile stünde beim Laden
     unter der Kante. Die Zeile darüber bleibt als Rückfall für Browser
     ohne svh stehen. */
  .hero--buehne {
    grid-template-columns: minmax(0, 1fr);
    min-height: auto;
    /* Der Abstand nach oben sitzt jetzt im Wortblock, weil er dort in die
       Rechnung für den ersten Bildschirm eingeht. */
    padding-top: 0;
    gap: 0;
    align-items: start;
  }
  /* Nur für die Bühnen-Fassung (hero--buehne). Ungescopt griff die Regel
     auch auf den neuen hero--start der Startseite zu: dessen Wortblock
     wurde ein ganzer Bildschirm hoch und mittig gesetzt — die Überschrift
     begann am Telefon erst bei einem Drittel der Höhe. */
  .hero--buehne .hero__wort {
    max-width: 100%;
    box-sizing: border-box;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Die Kopfzeile liegt über dem Hero, nicht davor. Ohne diesen Ausgleich
       säße die Mitte des Satzes optisch zu hoch. */
    padding-top: var(--kopf-hoehe, 74px);
    padding-bottom: clamp(20px, 4vh, 40px);
  }
  .hero--buehne .hero__buehne { margin-top: clamp(28px, 7vh, 64px); }

  .fl__status { min-height: 96px; }
  .fl__mass text { font-size: 16px; }
  .fl__k text { font-size: 19px; }
}

/* ═══ Überschrift am Phone: ein Satz, kein Wortstapel ═════════════════════
   `text-wrap: balance` gleicht Zeilenlängen aus. Auf breiten Schirmen liest
   sich das ruhig. Auf 390 px kam dabei — gemessen von 320 bis 430 px —
   durchgehend heraus:

       Wir bauen Websites, / die passende / Anfragen bringen.

   Die zweite Zeile war halb leer, „passende" und „Anfragen" standen
   auseinandergerissen. Der Grund ist nicht der Umbruchalgorithmus allein,
   sondern der Schriftgrad: 9,2vw sind auf 390 px 35,9 px, davon passen
   knapp zwei Wörter in eine Zeile.

   Zwei Änderungen, beide nur unterhalb 900 px:
   · eine Stufe kleiner — die Überschrift bleibt der größte Text der Seite,
     aber es passen wieder ganze Satzteile in eine Zeile,
   · `pretty` statt `balance` — füllt die Zeile normal und verhindert nur
     noch die alleinstehende Schlusszeile.
   Über 900 px bleibt alles, wie es war. */
@media (max-width: 899px) {
  .hero--buehne .hero__title {
    /* Die Untergrenze greift ab 338 px abwärts. Bei 25 px verfehlte
       „Wir bauen Websites, die" die 280 px nutzbare Breite um zwei Pixel und
       die alte Fünfzeilen-Treppe kam zurück. */
    font-size: clamp(23px, 6.8vw, 38px);
    line-height: 1.06;
    text-wrap: pretty;
    /* Kein Wort soll allein in einer Zeile stehen können. */
    hyphens: none;
  }
}

/* ═══ Sechs Quellen ═══════════════════════════════════════════════════════
   Die Systeme wandern von ihrer ungeordneten Lage in einen Ring. Sie
   verschwinden nicht und werden nicht ersetzt — der Kern koordiniert nur. */

.qu__buehne { position: relative; margin-top: clamp(28px, 3.4vw, 48px); }
/* Bezugsfläche für die Statusmeldung: genau die Grafik, ohne die Zeile
   darüber. */
.qu__flaeche { position: relative; }
.qu__n {
  transform: translate(var(--tx0), var(--ty0));
  transition: transform 1600ms var(--ease-sys);
}
.qu.is-geordnet .qu__n { transform: translate(var(--tx1), var(--ty1)); }

.qu__kern { opacity: 0; transition: opacity 900ms var(--ease-sys); }
.qu.is-geordnet .qu__kern { opacity: 1; }
.qu__kern circle { fill: var(--flaeche); stroke: var(--line-2); stroke-width: 1.2; }
.qu__kern text {
  fill: var(--ink); font-family: var(--sans); font-size: 15px;
  font-weight: 600; text-anchor: middle; letter-spacing: -0.01em;
}
.qu.is-bestaetigt .qu__kern circle { stroke: var(--ergebnis); }

.qu .fl__raum { stroke-width: 1.2; }

/* Die Meldung steht IM Ring, nicht darunter. Zwischen dem oberen Knoten und
   dem Kern liegen rund 100 Einheiten frei — dort gehört sie hin, sonst hängt
   sie losgelöst unter der Fläche und man liest sie getrennt vom Vorgang.
   Der Platz reicht für zwei Zeilen; die Höhe ist reserviert, damit beim
   Wechsel nichts springt. */
.qu__buehne { position: relative; }

/* Nur ab 900 px: Dort ist der Ring groß genug, dass die Meldung zwischen dem
   oberen Knoten und dem Kern Platz hat. Darunter ist die Bühne rund 210 px
   hoch — eine Meldung im Ring würde dort jeden Knoten verdecken. */
@media (min-width: 1200px) {
  /* Gilt nur noch fuer Buehnen ohne Gehirn. Im Gehirn ist die Mitte belegt. */
  .qu:not(:has(.gh)) .fl__status {
    position: absolute;
    left: 50%;
    /* Im freien Band zwischen oberem Knoten und Kern ZENTRIERT.

       Der Bezug ist .qu__flaeche, nicht die ganze Bühne. Vorher hing die
       Meldung an .qu__buehne — als die Zeile „Alles ist da." darüberkam,
       wuchs die Bühne, und 34 % lagen plötzlich im oberen Knoten statt im
       freien Band.

       Im Koordinatenraum 1000 × 700: der obere Knoten endet geordnet bei
       y 160, der Kern beginnt bei y 304. Bandmitte 232, das sind 33 %. */
    top: 34%;
    transform: translate(-50%, -50%);
    width: min(35%, 380px);
    text-align: center;
    min-height: 0;
    margin: 0;
    /* Grund hinter der Schrift, damit die Ringlinie nicht hindurchläuft. */
    background: radial-gradient(ellipse at center,
      var(--canvas) 0%, var(--canvas) 62%, transparent 100%);
    padding: 4px 10px;
  }
  .qu .fl__status b { font-size: clamp(16px, 1.5vw, 21px); }
  .qu .fl__status span { font-size: 14px; }
  .qu .fl__nochmal { position: relative; z-index: 1; }
}

@media (max-width: 1199px) {
  /* Unter der Fläche, im normalen Fluss. Darüber ist der Ring zu klein:
     die Meldung würde den Kern verdecken — gemessen bei 1024 und 900 px. */
  .qu .fl__status { position: static; text-align: left; min-height: 104px; }
}

@media (max-width: 899px) {
  /* Der Ring wird nicht geschrumpft — er bekommt mehr Raum, die Punkte
     werden größer, und die Beschriftung bleibt lesbar. Die Maße gelten im
     stehenden Koordinatenraum 440 × 810, den `quellen-hochkant.js` setzt:
     bei 390 px Fensterbreite ist der Maßstab 0,80, aus 21 Einheiten Schrift
     werden also knapp 17 CSS-Pixel. */
  .qu .fl__k text { font-size: 21px; }
  .qu__kern text { font-size: 23px; }
  .qu .fl__p circle { r: 13; }
  .qu .fl__status { min-height: 104px; }

  /* Die Bühne bekommt den ganzen Schirm. Wer bis hierher gescrollt hat, sieht
     die Animation und sonst nichts — Überschrift und Handlungsaufruf sind
     dann nach oben aus dem Bild gelaufen. Das war der Grund, warum die
     Bewegung vorher unruhig wirkte: sie lief in einem 245 px hohen Streifen
     zwischen zwei anderen Textblöcken. */
  .hero--buehne .hero__buehne {
    min-height: 100svh;
    display: grid;
    align-content: center;
    padding-block: clamp(12px, 3vw, 28px);
  }
  .qu__buehne { margin-top: 0; }

  /* Ohne Deckel würde die stehende Bühne mit der Fensterbreite mitwachsen:
     bei 899 px sind 809 px Inhaltsbreite nutzbar, das Format 440 × 810
     ergäbe daraus 1490 px Höhe — zwei Bildschirme hoch. Gedeckelt wird die
     BREITE, nicht die Höhe: sonst bliebe die Zeichnung in einem zu breiten
     Kasten stehen und liefe oben und unten mit Leerraum aus. 380 px sind
     genau die Breite, aus der 700 px Höhe werden.
     Auf einem Phone greift der Deckel nicht — dort sind 350 px nutzbar. */
  .qu__svg--hochkant {
    max-width: 380px;
    margin-inline: auto;
  }
}

/* ═══ Ein Ziel. Viele Signale. ════════════════════════════════════════════
   Zahlen statt Erklärkästen. Das System nimmt zurück, was gerade nicht zählt. */

.sg__buehne { margin-top: clamp(30px, 3.6vw, 50px); }
.sg__ziel { display: grid; gap: 8px; }
.sg__ziel span { font-size: 10.5px; letter-spacing: 0.17em; text-transform: uppercase; color: var(--sicht); }
.sg__ziel b { font-family: var(--serif); font-style: normal; font-weight: 400;
  font-size: clamp(28px, 3.4vw, 46px); line-height: 1.04; letter-spacing: -0.025em; }

.sg__signale {
  list-style: none; margin-top: clamp(28px, 3.2vw, 44px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; background: var(--line); border-block: 1px solid var(--line);
}
.sg__s {
  background: var(--canvas); padding: 20px 18px;
  opacity: 0; transform: translateY(10px);
  transition: opacity 700ms var(--ease-sys), transform 700ms var(--ease-sys);
}
.sg.is-signale .sg__s { opacity: 1; transform: none; }
.sg__s b { display: block; font-size: clamp(26px, 2.6vw, 36px); font-weight: 500;
  letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.sg__s span { display: block; margin-top: 5px; font-size: 13.5px; color: var(--muted); line-height: 1.4; }
.sg__s--sicht b { color: var(--sicht); }
.sg__s--anfrage b { color: var(--anfrage); }
.sg__s--ablauf b { color: var(--ablauf); }
.sg__s--ergebnis b { color: var(--ergebnis); }

/* Der Befund: was nicht zählt, tritt zurück. Kein Text erklärt das — man sieht es. */
.sg.is-befund .sg__s[data-rolle="vorhanden"] { opacity: 0.26; }

.sg__befund, .sg__hebel { opacity: 0; transform: translateY(10px);
  transition: opacity 800ms var(--ease-sys), transform 800ms var(--ease-sys); }
.sg.is-befund .sg__befund { opacity: 1; transform: none; }
.sg.is-hebel .sg__hebel { opacity: 1; transform: none; }

.sg__befund { margin-top: clamp(26px, 3vw, 38px); display: grid; gap: 7px; max-width: 46ch; }
.sg__befund b { font-size: clamp(19px, 2vw, 26px); font-weight: 600; letter-spacing: -0.02em; }
.sg__befund span { font-size: clamp(19px, 2vw, 26px); font-weight: 600; letter-spacing: -0.02em; color: var(--anfrage); }

.sg__hebel { margin-top: clamp(22px, 2.6vw, 32px); padding-top: 20px;
  border-top: 1px solid var(--line); display: grid; gap: 8px; max-width: 46ch; }
.sg__hebel span { font-size: 10.5px; letter-spacing: 0.17em; text-transform: uppercase; color: var(--sicht); }
.sg__hebel b { font-size: clamp(19px, 1.9vw, 25px); font-weight: 600; letter-spacing: -0.018em; }
.sg__quelle { margin-top: 18px; font-size: 12px; color: var(--muted); }

@media (max-width: 899px) {
  .sg__signale { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sg__s { padding: 16px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .sg__s, .sg__befund, .sg__hebel { transition: none !important; }
}

/* Im Ring steht nur die eine große Aussage. Gemessen: das freie Band zwischen
   oberem Knoten und Kern ist rund 78 px hoch, Titel plus Beisatz brauchen 128.
   Der Beisatz entfällt dort — „keine langen Texte innerhalb der Grafik". */
@media (min-width: 1200px) {
  .qu .fl__status span { display: none; }
  .qu .fl__status b { font-size: clamp(15px, 1.35vw, 19px); line-height: 1.25; }
}

/* Arabisch baut höher als lateinische Schrift: dieselbe Meldung lief in der
   Naskh auf zwei Zeilen und ragte gemessen 3 px in den Kern. Eine Stufe
   kleiner hält sie im freien Band. */
@media (min-width: 1200px) {
  [dir="rtl"] .qu .fl__status b { font-size: clamp(15px, 1.4vw, 19px); line-height: 1.35; }
}

/* ═══ Das Gehirn ═══════════════════════════════════════════════════════════
   Die Form entsteht aus dem, was verbunden wird. Deshalb wächst zuerst jede
   Verbindung vom System zum Kern, und erst wenn sie stehen, schließt sich der
   Umriss. Umgekehrt wäre es Dekoration: eine Gehirnform, in die etwas
   hineingezeichnet wird.

   Gezeichnet wird über stroke-dashoffset — eine Linie, die sich selbst zieht,
   statt einer, die eingeblendet wird. Der Unterschied ist der zwischen
   „wächst" und „erscheint".
   ═════════════════════════════════════════════════════════════════════════ */

.gh__umriss, .gh__furche {
  fill: none;
  stroke: var(--ink-2);
  stroke-linecap: round;
  stroke-linejoin: round;
  /* Die Länge jeder Linie ist über das Attribut `pathLength="1"` am Element
     auf 1 normiert; deshalb genügt hier die 1 als Strichlänge. Als CSS-
     Eigenschaft gibt es pathLength nicht — sie stand hier und wurde still
     verworfen, wodurch aus der 1 ein Pixel wurde: der Umriss war ein
     Strichmuster von 1 px auf 2001 px Weg und hat sich nie gezeichnet. */
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
}
.gh__umriss { stroke-width: 2.2; }
.gh__furche { stroke-width: 1.3; }

/* Der Umriss kommt zuletzt: erst mit der Bestätigung ist es ein Gehirn. */
.fl.is-bestaetigt .gh__umriss {
  opacity: 0.9;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 2400ms var(--ease-sys), opacity 500ms var(--ease-sys);
}
.fl.is-bestaetigt .gh__furche {
  opacity: 0.4;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1600ms var(--ease-sys) 900ms,
              opacity 500ms var(--ease-sys) 900ms;
}

/* Die Verbindungen. Sie wachsen gestaffelt, sobald geordnet wird. */
.gh__bahn {
  fill: none;
  stroke: var(--line-2);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
}
.fl.is-geordnet .gh__bahn {
  opacity: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1100ms var(--ease-sys) var(--v, 0ms),
              opacity 400ms var(--ease-sys) var(--v, 0ms);
}
.fl.is-bestaetigt .gh__bahn { stroke: var(--ergebnis); opacity: 0.55; }

/* Die Systeme: Punkt und Wort, kein Kasten. Ein Kasten von 132 × 76 Einheiten
   deckt bei neun Stück den Umriss zu. */
.gh__k text {
  fill: var(--muted);
  font-family: var(--sans);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: fill 600ms var(--ease-sys);
}
.gh__punkt {
  fill: var(--flaeche);
  stroke: var(--line-2);
  stroke-width: 1.6;
  transition: stroke 600ms var(--ease-sys), fill 600ms var(--ease-sys);
}
.fl.is-geordnet .gh__punkt { stroke: var(--ink-2); }
.fl.is-bestaetigt .gh__punkt { stroke: var(--ergebnis); fill: var(--ergebnis); }
.fl.is-bestaetigt .gh__k text { fill: var(--ink-2); }
.gh__k.is-achtung .gh__punkt { stroke: var(--sicht); fill: var(--sicht-fl); }
.gh__k.is-achtung text { fill: var(--sicht); }

/* Der Kern trägt keinen Rahmen mehr — im Gehirn ist er die Stelle, an der
   alles zusammenläuft, nicht ein weiterer Kasten. */
.gh__kern circle {
  fill: var(--flaeche);
  stroke: var(--line-2);
  stroke-width: 1.6;
  transition: stroke 700ms var(--ease-sys), stroke-width 700ms var(--ease-sys);
}
.fl.is-geordnet .gh__kern circle { stroke: var(--ink); stroke-width: 2; }
.fl.is-bestaetigt .gh__kern circle { stroke: var(--ergebnis); }

/* Die alte Ellipse gibt es nicht mehr. */
.gh .fl__raum { display: none; }

/* ── Zwei Fassungen ──────────────────────────────────────────────────────
   Dieselbe Form, zweimal gezeichnet: liegend für den Schreibtisch, stehend
   fürs Telefon. Grund ist die Schriftgröße. Die Schrift steht in Einheiten
   des Koordinatenraums, gerendert wird sie mit dem Maßstab Fläche geteilt
   durch Raumbreite. Bei 390 px Fensterbreite und dem liegenden Raum von
   920 Einheiten sind das 0,42 — aus 21 Einheiten würden 8,9 CSS-Pixel.
   Die stehende Fassung zeichnet die Form kleiner und gewinnt damit den
   Platz, den die Wörter daneben brauchen: Maßstab 0,65, also 13,7 px.

   Umgeschaltet wird bei 979 px, wo die Bühne ohnehin einspaltig wird. Bei
   1024 px ist die Fläche 523 px breit; die liegende Fassung ergäbe dort nur
   10,8 px Schrift, die stehende 17,7 px.

   Die frühere Regel setzte hier 25 px und einen größeren Punktradius. Beides
   war wirkungslos: `.qu .fl__k text` ist spezifischer und hat gewonnen. */
.gh--hoch { display: none; }
@media (max-width: 979px) {
  .gh--breit { display: none; }
  .gh--hoch { display: block; }
}

/* Strichstärken sind Pixel im Koordinatenraum. Im schmaleren Raum der
   stehenden Fassung kämen dieselben Zahlen dünner an, deshalb hier größer:
   2,7 × 0,65 ergibt dieselben 1,76 px wie 2,2 × 0,80. */
.gh--hoch .gh__umriss { stroke-width: 2.7; }
.gh--hoch .gh__furche { stroke-width: 1.6; }
.gh--hoch .gh__bahn { stroke-width: 1.7; }
.gh--hoch .gh__punkt { stroke-width: 2; }
.gh--hoch .gh__synapse { stroke-width: 1.3; }

/* Die Schrift steht in Einheiten des Koordinatenraums, gerendert wird sie mit
   dem Maßstab Fläche/Raumbreite. Die Fläche schrumpft von 735 px bei 1440 auf
   500 px bei 980 — bei fester Einheitengröße fiele die Schrift von 15,2 auf
   10,3 px. Deshalb wächst sie stufenweise mit, sodass beim Leser ungefähr
   dieselben 15 px ankommen. Bei 25 Einheiten braucht das längste Wort
   („Justificatifs") 169 Einheiten; bis zum Rand sind 188 frei. */
.gh--breit .gh__k text, .gh--breit .gh__kern text { font-size: 19px; }
@media (max-width: 1399px) {
  .gh--breit .gh__k text, .gh--breit .gh__kern text { font-size: 21px; }
}
@media (max-width: 1279px) {
  .gh--breit .gh__k text, .gh--breit .gh__kern text { font-size: 23px; }
}
@media (max-width: 1149px) {
  .gh--breit .gh__k text, .gh--breit .gh__kern text { font-size: 25px; }
}
.gh--hoch .gh__k text { font-size: 21px; }
/* 20 statt 23: bei 23 Einheiten war „acessio" 84 Einheiten breit und
   der Kern 84 Einheiten im Durchmesser — das Wort saß auf dem Rand. */
.gh--hoch .gh__kern text { font-size: 20px; }

/* ── Synapsen ────────────────────────────────────────────────────────────
   Mit der letzten Verbindung ist die Grafik nicht fertig, sondern fängt an
   zu arbeiten: zwischen benachbarten Bahnen entstehen Querverbindungen, und
   auf ihnen schießen Impulse hin und her. Sie kommen nacheinander — erst
   eine, dann immer mehr —, damit man das Wachsen sieht und nicht ein fertiges
   Netz vorgesetzt bekommt.

   Die Sprossen sind dünner und blasser als die Bahnen. Sie sind die zweite
   Ebene, nicht eine zweite Hauptsache. */
.gh__synapse {
  fill: none;
  stroke: var(--ergebnis);
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
}
.fl.is-bestaetigt .gh__synapse {
  opacity: 0.38;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 620ms var(--ease-sys) var(--s, 0ms),
              opacity 400ms var(--ease-sys) var(--s, 0ms);
}

/* Der Impuls. Grundzustand unsichtbar: während der Verzögerung gilt noch
   diese Regel, sonst stünden alle Punkte von Anfang an auf ihrem Startpunkt
   herum. Jeder zweite läuft rückwärts — daher das Hin und Her. */
.gh__feuer { opacity: 0; }
.gh__feuer circle { fill: var(--ergebnis); }
.fl.is-bestaetigt .gh__feuer {
  animation: gh-feuer var(--d, 2400ms) var(--ease-sys) var(--s, 0ms) infinite;
}
@keyframes gh-feuer {
  0% { offset-distance: 0%; opacity: 0; }
  9% { opacity: 0.95; }
  44% { offset-distance: 100%; opacity: 0.95; }
  54% { offset-distance: 100%; opacity: 0; }
  100% { offset-distance: 100%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .gh__synapse { opacity: 0.38; stroke-dashoffset: 0; transition: none !important; }
  .fl.is-bestaetigt .gh__feuer { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  /* Ohne Bewegung steht die fertige Form sofort. */
  .gh__umriss { opacity: 0.9; stroke-dashoffset: 0; }
  .gh__furche { opacity: 0.4; stroke-dashoffset: 0; }
  .gh__bahn { opacity: 0.55; stroke-dashoffset: 0; }
  .gh__umriss, .gh__furche, .gh__bahn { transition: none !important; }
}


/* Im Gehirn steht die Meldung unter der Grafik. Innen ist kein freies Band
   mehr: der Kern nimmt die Mitte, die Verbindungen den Rest. Gemessen deckte
   die Meldung dort die Beschriftungen „Nachweise" und „Sichtbarkeit" zu. */
.qu:has(.gh) .fl__status {
  position: static;
  text-align: center;
  margin: clamp(10px, 1.4vw, 18px) auto 0;
  max-width: 46ch;
  min-height: 84px;
}
.qu:has(.gh) .fl__status b { font-size: clamp(17px, 1.7vw, 23px); line-height: 1.25; }

/* ── Hero: ein Band, zwei Spalten, ein Bildschirm ─────────────────────────
   Links Aussage, Aufforderung, Vertrauenszeile und der Gründer als ein
   Element untereinander. Rechts die Systemgrafik. Beides mittig in der
   Bildschirmhöhe, nichts wird angeschnitten.

   Die Höhenkette ist der Kern: fester Hero, `min-height: 0` auf jeder Stufe,
   und die Grafik richtet sich nach der Zeile statt nach ihrer Breite. Sonst
   wird das SVG so hoch wie breit — unabhängig vom Schriftgrad.

   Reihenfolge beachten: die Grundregeln stehen VOR der Medienabfrage. Standen
   sie dahinter, haben sie bei gleicher Spezifität gewonnen und das Porträt
   blieb bei 200 px Breite stehen, statt auf Bildschirmhöhe zu schrumpfen. */

/* Grundfassung — gilt am Phone und als Rückfall. */
.hero__gruender { margin: 0; display: grid; justify-items: center; }
.hero__gruender img { width: 100%; max-width: 200px; height: auto; display: block; }
.hero__gruender figcaption { margin-top: 10px; text-align: center; }
.hero__gruender figcaption b {
  display: block; font-family: var(--serif); font-weight: 400;
  font-size: clamp(17px, 1.4vw, 21px); letter-spacing: -0.02em;
  color: var(--ink); line-height: 1.15;
}
.hero__gruender figcaption span {
  display: block; margin-top: 2px; font-size: clamp(12.5px, 1vw, 14px); color: var(--muted);
}

@media (min-width: 980px) {
  .hero.hero--buehne {
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
    grid-template-rows: minmax(0, 1fr);
    align-items: center;
    gap: clamp(28px, 3.5vw, 64px);
    padding-top: calc(var(--kopf-hoehe) + clamp(8px, 1.6vh, 24px));
    padding-bottom: clamp(20px, 3.5vh, 48px);
    height: 100svh;
    min-height: 620px;
    overflow: hidden;
  }

  .hero__links {
    min-height: 0;
    display: grid;
    align-content: center;
    gap: clamp(14px, 2.4vh, 30px);
  }

  .hero.hero--buehne .hero__wort { max-width: none; text-align: left; }
  .hero.hero--buehne .hero__title {
    max-width: 17ch;
    margin-inline: 0;
    font-size: clamp(28px, 2.6vw, 40px);
    line-height: 1.06;
  }
  .hero.hero--buehne .hero__actions { justify-content: flex-start; margin-top: clamp(14px, 2vh, 24px); }
  .hero.hero--buehne .hero__trust  { justify-content: flex-start; margin-top: clamp(8px, 1.4vh, 16px); }

  /* Bild links, Name rechts daneben: als Zeile frisst der Gründer kaum Höhe. */
  .hero.hero--buehne .hero__gruender {
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
  }
  .hero.hero--buehne .hero__gruender img {
    width: auto;
    max-width: none;
    height: clamp(96px, 13vh, 150px);
  }
  .hero.hero--buehne .hero__gruender figcaption { margin-top: 0; text-align: left; }

  .hero__buehne { min-height: 0; height: 100%; margin-top: 0; display: grid; align-items: center; }
  .hero__buehne .qu__flaeche { min-height: 0; height: 100%; display: grid; align-items: center; }
  .hero__buehne .fl__svg { height: 100%; width: 100%; max-height: 100%; min-height: 0; }
}

/* === /assets/css/heim.css === */
/* ═════════════════════════════════════════════════════════════════════════
   Startseite — neue Kapitel

   Ersetzt: „Aus fünf Baustellen wird ein System", „Sichtbarkeit endet nicht
   beim Gefundenwerden", die zwei umschaltbaren Hero-Fälle und die große
   Integrations-Logowand.

   Baut auf den Tokens aus main.css auf. Neu ist nur das semantische
   Farbsystem darunter — es kommt nicht zusätzlich, sondern ordnet die
   vorhandenen Farben einer festen Bedeutung zu.
   ═════════════════════════════════════════════════════════════════════════ */

:root {
  /* Jede Farbe bedeutet auf der ganzen Seite dasselbe. Nie dekorativ. */
  /* Aus den drei Markentönen abgeleitet, jeder auf mindestens 5:1 gegen
     --canvas gebracht — sie tragen Schrift und dünne Linien. Anfrage und
     Ablauf bleiben getrennt: es sind zwei Bedeutungen, keine Variante. */
  --sicht: #097078;      /* Sichtbarkeit, Aufmerksamkeit, Nachfrage */
  --sicht-fl: #0E8A97;   /* dieselbe Bedeutung, für Flächen und Linien */
  --anfrage: #6553C4;    /* Fragen, Anfragen, Kundeninteresse */
  --ablauf: #446B99;     /* Abläufe, Termine, Informationsübertragung */
  --ergebnis: #516C43;   /* Ergebnis, bestätigte Verbindung, Wirksamkeit */
  --system: #19191C;     /* acessio-System, Diagnose, Priorität */

  --flaeche: #FBFAF8;
  --ease-sys: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ═══ 1 · Hero-Arbeitsfläche ══════════════════════════════════════════════
   Ein einziger Vorgang, kein Umschalter. Er endet NICHT beim Verlust:
   Signal → Engpass → Maßnahme → Umsetzung → Messung.
   Höchstens drei Detailangaben gleichzeitig — was verstanden ist, tritt
   zurück und bleibt als Zeile stehen. */

.hf { margin-top: clamp(36px, 4.5vw, 60px); }

.hf__blatt {
  background: var(--flaeche);
  border: 1px solid var(--line-2);
  border-radius: 24px;
  padding: clamp(22px, 2.4vw, 32px) clamp(22px, 2.6vw, 34px);
  box-shadow:
    0 1px 1px rgba(25, 25, 28, 0.03),
    0 8px 16px -8px rgba(25, 25, 28, 0.05),
    0 30px 50px -34px rgba(25, 25, 28, 0.14);
}

.hf__kopf {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding-bottom: 15px; border-bottom: 1px solid var(--line);
}
.hf__kopf b { font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; }
.hf__kopf span { font-size: 12.5px; color: var(--muted); letter-spacing: 0.04em; }

/* Das Ziel steht durchgehend oben — alles darunter dient ihm. */
.hf__ziel { padding: 18px 0 4px; opacity: 0; transform: translateY(8px); }
.hf__ziel-l { font-size: 10.5px; letter-spacing: 0.17em; text-transform: uppercase; color: var(--sicht); }
.hf__ziel-t { margin-top: 6px; font-size: clamp(19px, 1.9vw, 25px); font-weight: 600; letter-spacing: -0.018em; }

/* ── Der Vorgang: was mit 96 Anrufen tatsächlich passiert ───────────── */

.hf__vorgang { margin-top: 20px; }
.hf__quelle {
  display: flex; align-items: baseline; gap: 12px;
  opacity: 0; transform: translateY(8px);
}
.hf__quelle b {
  font-size: clamp(34px, 3.6vw, 48px); font-weight: 500;
  line-height: 0.9; letter-spacing: -0.04em; font-variant-numeric: tabular-nums;
}
.hf__quelle span { font-size: 14px; color: var(--muted); }

/* Der Strom teilt sich sichtbar — nicht drei gleichartige Statistikkacheln. */
.hf__teilung {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px; margin-top: 16px;
}
.hf__ast {
  padding: 13px 15px; border-radius: 12px;
  border: 1px solid var(--line);
  opacity: 0; transform: translateY(9px);
}
.hf__ast b { display: block; font-size: clamp(21px, 2.1vw, 27px); font-weight: 600; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
.hf__ast span { display: block; margin-top: 4px; font-size: 13px; line-height: 1.4; color: var(--muted); }
.hf__ast--gut { border-color: color-mix(in oklab, var(--ergebnis) 34%, transparent); }
.hf__ast--gut b { color: var(--ergebnis); }
.hf__ast--luecke { border-color: color-mix(in oklab, var(--anfrage) 34%, transparent); }
.hf__ast--luecke b { color: var(--anfrage); }

/* Ab der Diagnose schrumpft der Vorgang auf eine Zeile zusammen. */
.hf__kurz {
  display: none; align-items: baseline; gap: 10px;
  padding: 10px 0; font-size: 13.5px; color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.hf__kurz i { font-style: normal; color: var(--anfrage); font-weight: 600; }

/* ── Diagnose, Maßnahmen, Messung ───────────────────────────────────── */

.hf__block { opacity: 0; transform: translateY(10px); }

.hf__engpass {
  margin-top: 18px; padding: 16px 18px; border-radius: 14px;
  background: var(--system);
}
.hf__engpass p:first-child { font-size: 10px; letter-spacing: 0.17em; text-transform: uppercase; color: rgba(243, 241, 240, 0.55); }
.hf__engpass p:last-child {
  margin-top: 8px; color: #F6F4F1;
  font-family: var(--serif); font-style: normal;
  font-size: clamp(19px, 1.95vw, 26px); line-height: 1.1; letter-spacing: -0.02em;
}

.hf__mass { margin-top: 18px; }
.hf__mass-l { font-size: 10.5px; letter-spacing: 0.17em; text-transform: uppercase; color: var(--sicht); }
.hf__zeile {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 11px; align-items: baseline;
  padding: 9px 0; border-bottom: 1px solid var(--line);
  font-size: 14.5px; color: var(--ink-2);
  opacity: 0; transform: translateX(-6px);
}
/* Der Punkt zeigt, WO die Maßnahme wirkt — Bedeutung, nicht Dekoration. */
.hf__wo { width: 7px; height: 7px; border-radius: 50%; align-self: center; }
.hf__wo--sicht { background: var(--sicht-fl); }
.hf__wo--anfrage { background: var(--anfrage); }
.hf__wo--ablauf { background: var(--ablauf); }

.hf__mess { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.hf__mess-l { font-size: 10.5px; letter-spacing: 0.17em; text-transform: uppercase; color: var(--ablauf); }
.hf__mess ul { list-style: none; margin-top: 9px; display: grid; gap: 6px; }
.hf__mess li { font-size: 14px; color: var(--ink-2); }
.hf__mess li::before { content: "?"; color: var(--ablauf); font-weight: 600; margin-right: 8px; }

.hf__fuss {
  margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 14px; align-items: baseline;
  font-size: 13.5px; opacity: 0;
}
.hf__fuss b { font-weight: 600; }
.hf__fuss span { color: var(--muted); }

.hf__quelle-hinweis { margin-top: 12px; font-size: 12px; color: var(--muted); }

/* Nur einmal ansehen — dezent, kein Loader, keine Schleife. */
.hf__nochmal {
  margin-top: 12px; border: 0; background: transparent; padding: 6px 2px;
  color: var(--muted); font: inherit; font-size: 13px; cursor: pointer;
  opacity: 0; transition: opacity 400ms var(--ease-sys), color 200ms var(--ease-sys);
}
.hf__nochmal:hover { color: var(--ink); }
.hf[data-stufe="9"] .hf__nochmal { opacity: 1; }

/* ── Stufen ─────────────────────────────────────────────────────────── */

.hf__ziel, .hf__quelle, .hf__ast, .hf__block, .hf__zeile, .hf__fuss {
  transition: opacity 700ms var(--ease-sys), transform 700ms var(--ease-sys);
}
.hf[data-stufe="1"] .hf__ziel, .hf[data-stufe="2"] .hf__ziel, .hf[data-stufe="3"] .hf__ziel,
.hf[data-stufe="4"] .hf__ziel, .hf[data-stufe="5"] .hf__ziel, .hf[data-stufe="6"] .hf__ziel,
.hf[data-stufe="7"] .hf__ziel, .hf[data-stufe="8"] .hf__ziel, .hf[data-stufe="9"] .hf__ziel { opacity: 1; transform: none; }

.hf[data-stufe="2"] .hf__quelle, .hf[data-stufe="3"] .hf__quelle, .hf[data-stufe="4"] .hf__quelle { opacity: 1; transform: none; }
.hf[data-stufe="3"] .hf__ast, .hf[data-stufe="4"] .hf__ast { opacity: 1; transform: none; }

/* Ab Stufe 5 ist der Vorgang verstanden: er weicht der Diagnose. */
.hf[data-stufe="5"] .hf__vorgang, .hf[data-stufe="6"] .hf__vorgang,
.hf[data-stufe="7"] .hf__vorgang, .hf[data-stufe="8"] .hf__vorgang,
.hf[data-stufe="9"] .hf__vorgang { display: none; }
.hf[data-stufe="5"] .hf__kurz, .hf[data-stufe="6"] .hf__kurz,
.hf[data-stufe="7"] .hf__kurz, .hf[data-stufe="8"] .hf__kurz,
.hf[data-stufe="9"] .hf__kurz { display: flex; }

.hf[data-stufe="5"] .hf__engpass, .hf[data-stufe="6"] .hf__engpass,
.hf[data-stufe="7"] .hf__engpass, .hf[data-stufe="8"] .hf__engpass,
.hf[data-stufe="9"] .hf__engpass { opacity: 1; transform: none; }

.hf[data-stufe="6"] .hf__mass, .hf[data-stufe="7"] .hf__mass,
.hf[data-stufe="8"] .hf__mass, .hf[data-stufe="9"] .hf__mass { opacity: 1; transform: none; }
.hf[data-stufe="6"] .hf__zeile:nth-of-type(1),
.hf[data-stufe="7"] .hf__zeile, .hf[data-stufe="8"] .hf__zeile, .hf[data-stufe="9"] .hf__zeile { opacity: 1; transform: none; }
.hf[data-stufe="7"] .hf__zeile:nth-of-type(2) { transition-delay: 160ms; }
.hf[data-stufe="7"] .hf__zeile:nth-of-type(3) { transition-delay: 320ms; }

.hf[data-stufe="8"] .hf__mess, .hf[data-stufe="9"] .hf__mess { opacity: 1; transform: none; }
.hf[data-stufe="9"] .hf__fuss { opacity: 1; }

/* ═══ 2 · Sechs Quellen ══════════════════════════════════════════════════
   Die frühere Fassung (Kästen mit Beschreibungssätzen, feste Verbindungslinien,
   eigener Mobilersatz) ist entfallen. Die Sektion läuft jetzt über
   assets/css/fluss.css. Die alten Regeln standen hier noch und haben die neue
   Bühne unter 899 px per display:none ausgeblendet. */

/* ═══ 3 · Werkzeuge bleiben ═══════════════════════════════════════════ */

.wz__gruppen {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px; margin-top: clamp(30px, 3.4vw, 46px);
  background: var(--line); border: 1px solid var(--line);
}
.wz__g { background: var(--canvas); padding: clamp(20px, 2.2vw, 28px); }
.wz__g b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.wz__g span { display: block; margin-top: 7px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.wz__g i { display: block; width: 22px; height: 2px; margin-bottom: 14px; }
.wz__fuss { margin-top: 20px; font-size: 12.5px; color: var(--muted); }

/* ═══ 4 · Ein Ziel. Viele Signale. ════════════════════════════════════ */

.zs__raster {
  display: grid; gap: 1px; margin-top: clamp(32px, 3.6vw, 52px);
  background: var(--line); border: 1px solid var(--line);
  grid-template-columns: minmax(0, 1fr);
}
.zs__f { background: var(--canvas); padding: clamp(22px, 2.4vw, 32px); }
.zs__l { font-size: 10.5px; letter-spacing: 0.17em; text-transform: uppercase; }
.zs__f h3 { margin-top: 9px; font-size: clamp(18px, 1.7vw, 23px); font-weight: 600; letter-spacing: -0.018em; line-height: 1.25; }
.zs__f ul { list-style: none; margin-top: 13px; display: grid; gap: 7px; }
.zs__f li { font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.zs__f li::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 9px; vertical-align: 0.12em; background: currentColor; opacity: 0.4; }
.zs__f p { margin-top: 12px; font-size: 14px; line-height: 1.55; color: var(--muted); }

.zs__f--ziel .zs__l { color: var(--sicht); }
.zs__f--signal .zs__l { color: var(--anfrage); }
.zs__f--engpass { background: var(--system); }
.zs__f--engpass .zs__l { color: rgba(243, 241, 240, 0.55); }
.zs__f--engpass h3 { color: #F6F4F1; font-family: var(--serif); font-style: normal; font-weight: 400; font-size: clamp(21px, 2vw, 28px); letter-spacing: -0.02em; }
.zs__f--engpass p { color: rgba(243, 241, 240, 0.6); }
.zs__f--mass .zs__l { color: var(--sicht); }
.zs__f--mess .zs__l { color: var(--ablauf); }
.zs__f--zurueck .zs__l { color: var(--ergebnis); }

@media (min-width: 900px) {
  .zs__raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .zs__f--ziel { grid-column: 1 / -1; }
  .zs__f--zurueck { grid-column: 1 / -1; }
}

/* ═══ 5 · Branchenfälle ═══════════════════════════════════════════════ */

.bf { display: grid; gap: 1px; margin-top: clamp(32px, 3.6vw, 52px); background: var(--line); border: 1px solid var(--line); }
.bf__f { background: var(--canvas); padding: clamp(22px, 2.4vw, 34px); }
.bf__wer { font-size: 12px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); }
.bf__zahl { margin-top: 16px; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.bf__zahl b { font-size: clamp(30px, 3.2vw, 44px); font-weight: 500; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.bf__zahl span { font-size: 14px; color: var(--muted); }
.bf__verlust { margin-top: 12px; font-family: var(--serif); font-style: normal; font-size: clamp(19px, 1.9vw, 25px); line-height: 1.12; letter-spacing: -0.02em; }
.bf__schritt { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.bf__schritt b { font-size: 10.5px; letter-spacing: 0.17em; text-transform: uppercase; color: var(--sicht); display: block; }
.bf__schritt ul { list-style: none; margin-top: 10px; display: grid; gap: 7px; }
.bf__schritt li { font-size: 14px; color: var(--ink-2); }
.bf__schritt li::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--sicht-fl); margin-right: 9px; vertical-align: 0.12em; }
.bf__danach { margin-top: 16px; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.bf__danach b { color: var(--ablauf); font-weight: 600; }

@media (min-width: 900px) { .bf { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ═══ Mobile ══════════════════════════════════════════════════════════ */

@media (max-width: 899px) {
  .hf__teilung { grid-template-columns: minmax(0, 1fr); gap: 10px; }

  /* Eigene senkrechte Dramaturgie statt gestapelter Desktop-Fassung.
     Gemessen waren 1102 px Höhe — alles gleichzeitig sichtbar. Mobil steht
     immer nur der aktive Gedanke im Bild; das Ziel bleibt als Zeile darüber.
     Nebeneffekt: die Fläche ist niedrig genug, dass die Animation überhaupt
     anläuft, statt unter dem Bildrand zu warten. */
  .hf__vorgang, .hf__engpass, .hf__mass, .hf__mess, .hf__fuss { display: none; }
  .hf[data-stufe="2"] .hf__vorgang,
  .hf[data-stufe="3"] .hf__vorgang,
  .hf[data-stufe="4"] .hf__vorgang { display: block; }
  .hf[data-stufe="5"] .hf__engpass { display: block; }
  .hf[data-stufe="6"] .hf__mass,
  .hf[data-stufe="7"] .hf__mass { display: block; }
  .hf[data-stufe="8"] .hf__mess { display: block; }
  .hf[data-stufe="9"] .hf__fuss { display: flex; }
  /* Im Endzustand steht die Kette vollständig da — sonst wäre der Schluss leer. */
  .hf[data-stufe="9"] .hf__engpass,
  .hf[data-stufe="9"] .hf__mass,
  .hf[data-stufe="9"] .hf__mess { display: block; }
  .hf__ziel-t { font-size: 19px; }
  .hf__engpass p:last-child { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .hf__ziel, .hf__quelle, .hf__ast, .hf__block, .hf__zeile, .hf__fuss,
  .hf__ziel, .hf__quelle, .hf__ast {
    transition: none !important;
  }
}

/* === /assets/css/reveal-sr.css === */
/* ══════════════════════════════════════════════════════════════════════════
   So arbeitet das acessio-System — ein durchgehendes Beispiel

   Was hier bewusst NICHT passiert: kein Sticky, keine Texte, die an derselben
   Stelle ausgetauscht werden, keine Zwischenüberschriften, keine Cards. Die
   Sektion ist so lang wie ihr Text und keinen Bildschirm länger.

   Die Absätze erscheinen beim Eintritt gestaffelt — 16 px Weg, 120 ms
   Versatz — und bleiben danach dauerhaft stehen. Getrennt werden die
   Gedanken durch Abstand, nicht durch Beschriftung.
   ══════════════════════════════════════════════════════════════════════════ */

.bsp__kopf {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}
.bsp__kopf h2 { margin-top: 22px; }

/* Hält zusammengesetzte Eigennamen in einer Zeile. */
.nowrap { white-space: nowrap; }

/* ── Vier Szenen statt vier Absätzen ──────────────────────────────────────
   Vorher standen hier rund 230 Wörter in vier Blöcken. Jetzt trägt jede
   Szene eine Zeichnung, einen Satz und einen Nachsatz — zusammen rund 60
   Wörter. Was die Absätze erklärt haben, zeigt jetzt das Bild.

   Zwei Spalten am Schreibtisch, eine am Telefon. Vier nebeneinander wären
   bei 1200 px je 270 px breit; dort passt keine Zeichnung mehr hin, die man
   noch lesen kann. */
.bsp__vorlauf {
  max-width: 46ch;
  margin: clamp(18px, 2.4vh, 28px) auto 0;
  text-align: center;
  font-size: clamp(15px, 1.2vw, 17px);
  color: var(--muted);
}

.bsp__szenen {
  /* 1020 war 138 px je Seite schmaler als die Satzkante der übrigen
     Sektionen (72…1368 bei 1440 px). 1140 halbiert den Sprung, ohne die
     Karten auf 636 px zu blähen — bei zwei Spalten bleiben 558 px. */
  max-width: 1140px;
  margin: clamp(38px, 5vh, 64px) auto 0;
  display: grid;
  gap: clamp(16px, 1.8vw, 24px);
}
@media (min-width: 760px) {
  .bsp__szenen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Die Karte ────────────────────────────────────────────────────────────
   Im Ruhezustand nur eine Linie auf dem Seitengrund — keine gefüllte Kachel.
   Die Fläche kommt erst beim Zeigen dazu. So bleibt die Sektion ruhig und
   die Karten stapeln sich optisch nicht vor die Zeichnungen.

   Die Karten sind bewusst gleich gebaut: sie sind vier gleichrangige
   Aussagen, keine Rangfolge. Die Hierarchie steckt innerhalb der Karte —
   Zeichnung, Serifensatz, Fließtext.
   ───────────────────────────────────────────────────────────────────────── */
.bsp__szene {
  display: grid;
  gap: 14px;
  align-content: start;
  padding: clamp(22px, 2.3vw, 32px);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: transparent;
  box-shadow: 0 0 0 0 rgba(25, 25, 28, 0);
}

/* Nur wo es einen Zeiger gibt. Auf dem Telefon bliebe der Zustand sonst nach
   der Berührung kleben. */
@media (hover: hover) {
  .bsp__szene:hover {
    border-color: color-mix(in oklab, var(--ergebnis) 34%, var(--line));
    background: var(--flaeche);
    box-shadow: 0 14px 34px -22px rgba(25, 25, 28, 0.42);
  }
  .bsp__szene:hover .bsp__bild { transform: translateY(-3px); }
}

.bsp__bild { transition: transform var(--dur-fast) var(--ease); }

/* Die Zeichnung steht ohne eigene Fläche direkt auf dem Seitengrund. Die
   frühere cremefarbene Kachel war ein Kasten um etwas, das ohnehin nur aus
   Linien besteht — sie hat die vier Felder in Container verwandelt, statt sie
   in die Seite zu setzen. */
.bsp__bild {
  display: block;
  width: 100%;
  height: auto;
  max-width: 300px;
  font-family: inherit;
  overflow: visible;
}

/* Derselbe Strich wie im Gehirn: dünn, runde Enden, keine Flächen. */
.bsp__bild .bsp__k, .bsp__bild .bsp__d,
.bsp__bild .bsp__g, .bsp__bild .bsp__gk, .bsp__bild .bsp__gl {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bsp__bild .bsp__k  { stroke: var(--ink-2); stroke-width: 2; }
.bsp__bild .bsp__d  { stroke: var(--line-2); stroke-width: 2; }
.bsp__bild .bsp__g  { stroke: var(--ergebnis); stroke-width: 2; }
.bsp__bild .bsp__gk { stroke: var(--ergebnis); stroke-width: 2.4; }
.bsp__bild .bsp__gl { stroke: var(--ergebnis); stroke-width: 2; opacity: 0.75; }
.bsp__bild .bsp__gp { fill: var(--ergebnis); stroke: none; }

/* Beschriftung in der Zeichnung. Sie trägt keine Aussage, die nicht auch im
   Text darunter steht — die Zeichnungen sind deshalb aria-hidden. */
.bsp__bild .bsp__t  { fill: var(--ink-2); font-size: 12px; font-weight: 500; }
.bsp__bild .bsp__td { fill: var(--muted);  font-size: 11.5px; font-weight: 400; }
.bsp__bild .bsp__tg { fill: var(--ergebnis); font-size: 12px; font-weight: 600; }

/* ── Vier eigene Mikroszenen ──────────────────────────────────────────────
   Jede Szene läuft beim ersten Sichtkontakt und danach in ihrem eigenen Takt
   erneut — ausgelöst über `is-lauf`, das heim.js setzt, entfernt und wieder
   setzt. Bewusst NICHT über `is-an`: das trägt die Texteinblendung der
   ganzen Kachel, ein Neustart würde die Kachel jedes Mal wieder ausblenden.

   Zwischen zwei Durchläufen hält `both` den Endzustand fest — Haken bleiben
   gezeichnet, Balken bleiben voll. Es blinkt also nichts, die Szene spielt
   nur ihren Aufbau noch einmal.

   Die Ausgangszustände stehen absichtlich NUR in diesem Media-Block. Wer
   keine Bewegung möchte, sieht die Zeichnung sofort in ihrem Endzustand;
   ohne diese Klammer bliebe ein unsichtbar gesetztes Element dauerhaft
   unsichtbar.
   ───────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  /* Sämtliche Ausgangszustände hängen an `bsp--takt`. Diese Klasse setzt der
     Taktgeber in heim.js auf die Sektion, unmittelbar bevor er die Szenen zu
     beobachten beginnt.

     Das ist die Sicherung gegen einen halben Stand: fehlt das Skript, ist es
     veraltet im Zwischenspeicher oder bricht es vorher ab, dann kommt die
     Klasse nie an — und ohne sie gibt es keinen Ausgangszustand, der etwas
     versteckt. Die Zeichnungen stehen dann sofort fertig da. Vorher hätte
     derselbe Fall die ganze Sektion leer gelassen. */
  .bsp--takt .bsp__szene .an-ein { opacity: 0; }
  .bsp__szene.is-lauf .an-ein {
    animation: bspEin 460ms var(--ease) var(--t, 0ms) both;
  }

  /* Nur wenn der Takt wirklich läuft, ist „Neu" der Ausgangszustand. Sonst
     gilt der sichere Standard weiter unten und die Kachel bleibt weg. */
  .bsp--takt .bsp__szene .an-aus { opacity: 1; }
  .bsp__szene.is-lauf .an-aus {
    animation: bspAus 300ms var(--ease) var(--t, 0ms) both;
  }

  /* Der Haken zeichnet sich, statt zu erscheinen: pathLength="1" macht die
     Länge unabhängig von der tatsächlichen Geometrie. */
  .bsp--takt .bsp__szene .an-haken { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .bsp__szene.is-lauf .an-haken {
    animation: bspStrich 420ms var(--ease) var(--t, 0ms) both;
  }

  /* Balken wachsen aus der linken Kante. transform-box: fill-box bezieht den
     Ursprung auf das Element selbst, nicht auf den ganzen viewBox-Rahmen. */
  .bsp--takt .bsp__szene .an-balken {
    transform-box: fill-box;
    transform-origin: left center;
    transform: scaleX(0.045);
  }
  .bsp__szene.is-lauf .an-balken {
    animation: bspBalken 640ms var(--ease) var(--t, 0ms) both;
  }

  /* Die losen Karten liegen schief und richten sich einmal aus. */
  .bsp--takt .bsp__szene .an-richt {
    transform-box: fill-box;
    transform-origin: center;
    transform: rotate(var(--r, 0deg));
  }
  .bsp__szene.is-lauf .an-richt {
    animation: bspRichten 720ms var(--ease) var(--t, 0ms) both;
  }
}

/* Vom Statuswechsel bleibt im Ruhefall nur der Endzustand: das erledigte
   Feld. Sonst lägen „Neu" und „Bearbeitet" übereinander. Das gilt ohne
   Bewegungswunsch genauso wie bei fehlendem Skript — deshalb steht es hier
   als Standard und nicht in einer Medienabfrage. */
.bsp__szene .an-aus { opacity: 0; }

@keyframes bspEin     { from { opacity: 0; } to { opacity: 1; } }
@keyframes bspAus     { from { opacity: 1; } to { opacity: 0; } }
@keyframes bspStrich  { to { stroke-dashoffset: 0; } }
@keyframes bspBalken  { to { transform: scaleX(1); } }
@keyframes bspRichten { to { transform: rotate(0deg); } }

.bsp__satz {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(20px, 1.9vw, 26px);
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--ink);
}
/* Ein einziger hervorgehobener Teil je Überschrift: das, was am Ende
   herauskommt. Kursiv wäre hier zu viel — die Serifenschrift trägt die
   Betonung schon, die Farbe reicht. */
.bsp__satz em {
  font-style: normal;
  color: var(--ergebnis);
}
.bsp__nach {
  max-width: 42ch;
  font-size: clamp(15px, 1.15vw, 16.5px);
  line-height: 1.55;
  color: var(--ink-2);
}

.bsp__text--schluss {
  max-width: clamp(460px, 45vw, 620px);
  margin: clamp(44px, 5.5vh, 72px) auto 0;
}

.bsp__schluss {
  margin-top: 0;
  padding-top: clamp(26px, 3.6vh, 42px);
  border-top: 1px solid var(--line);
  font-family: var(--serif);
  font-style: normal;
  font-size: clamp(22px, 2.3vw, 30px) !important;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink) !important;
}
/* Der zweite Satz ist die Auflösung des Beispiels — und Grün heißt auf
   dieser Seite genau das: es kommt an. Deshalb hier, und nur hier. */
.bsp__schluss em { font-style: italic; color: var(--ergebnis); }

/* Erscheinen. Der Versatz steckt in --v und wird von heim.js gesetzt.

   Die drei Kartenwerte stehen mit in dieser Liste, obwohl sie thematisch zur
   Karte gehören: `transition` ist eine einzige Eigenschaft, und diese Regel
   steht weiter unten als `.bsp__szene`. Zwei getrennte Angaben hieße, dass
   die spätere die frühere vollständig ersetzt — der Hover würde springen.
   Für Kopf, Vorlauf und Schlusssatz laufen die drei Einträge ins Leere; die
   haben weder Rand noch Fläche. */
[data-bsp-t] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 620ms var(--ease) var(--v, 0ms),
              transform 620ms var(--ease) var(--v, 0ms),
              border-color var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
[data-bsp-t].is-an { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-bsp-t] { opacity: 1; transform: none; transition: none; }
}

/* ═══ Projekte ════════════════════════════════════════════════════════════
   Zwei Projekte, gleiches Bildformat, Titel unter dem Bild. Kein Text auf
   dem Screenshot — der Screenshot ist die Aussage. Die ganze Fläche ist ein
   Link; auf dem Telefon steht der Titel ohne Hover zur Verfügung.
   ═════════════════════════════════════════════════════════════════════════ */

/* Die Projektsektion darf breiter laufen als der Textteil der Seite: vier
   Kacheln nebeneinander werden im 1200er Satzspiegel und mit 72 px Rand sonst
   nur 305 px breit. Mit eigenem, schmalerem Rand sind es 323 px, und im
   quadratischen Format wächst die Fläche um die Hälfte. */
/* Die Projektsektion lief mit eigener Breite (1560 px) und eigenem Rand aus
   der Satzkante der Seite heraus — gemessen bei 1440 px Fenster: 43…1397
   statt 72…1368, also 29 px Überstand auf jeder Seite. Sichtbar wurde das
   an der Kopfzeile, die genau auf 72 und 1368 sitzt.

   Jetzt gilt auch hier die normale .wrap-Kante. Die Kacheln werden dadurch
   etwas schmaler, aber sie stehen in derselben Spalte wie alles andere. */
.pj.wrap {
  max-width: var(--max);
  padding-inline: var(--gutter);
}
.pj__liste {
  display: grid;
  gap: clamp(16px, 1.8vw, 26px);
  margin-top: clamp(34px, 4vw, 58px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 900px) {
  .pj__liste { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.pj__p {
  display: grid;
  gap: 14px;
  align-content: start;
  color: inherit;
  text-decoration: none;
}
/* Grüner Rand um jede Projektkarte. Der Wert steht ausgeschrieben, weil
   --ergebnis in heim.css definiert ist und die nur die Startseite lädt;
   die Referenzenseite bekäme sonst gar keinen Rand. Dünn und gedeckt —
   ein voll gesättigtes Grün würde mit den Screenshots konkurrieren. */
.pj__rahmen {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--canvas-2);
  /* Quadratisch, und genau so aufgenommen: ein 4:3-Bild würde `cover` hier
     seitlich um ein Viertel beschneiden. */
  aspect-ratio: 1 / 1;
}
.pj__rahmen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
  transform: scale(1);
  transition: transform 800ms var(--ease);
}
.pj__p:hover .pj__rahmen img,
.pj__p:focus-visible .pj__rahmen img { transform: scale(1.04); }

/* Vierte Kachel: kein Bild, sondern der Weg zu allen Projekten. Schwarz,
   damit sie sich als das zu erkennen gibt, was sie ist — kein Projekt. */
.pj__rahmen--alle {
  display: grid;
  place-content: center;
  border-color: var(--ink);
  background: var(--ink);
  color: var(--canvas);
  text-align: center;
}
.pj__alle-wort {
  font-family: var(--serif);
  font-size: clamp(19px, 1.7vw, 25px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  max-width: 12ch;
}
/* Der Ring sitzt am Link selbst, nicht am Bildrahmen darin. Am Kind wäre er
   zwar sichtbar, aber ein Prüfwerkzeug — und mancher Screenreader-Modus —
   sucht ihn am fokussierten Element. */
.pj__p:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
  border-radius: 22px;
}

/* Der Name füllt die Breite der Kachel. Ohne Pfeil: die ganze Fläche ist der
   Link, das Zeichen wiederholte nur, was die Kachel ohnehin sagt. */
.pj__titel {
  display: block;
  /* Der Name steht mittig unter der Kachel, nicht linksbündig — sonst zieht
     er bei kurzen Namen optisch aus der Karte heraus. */
  text-align: center;
}
.pj__titel h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(19px, 1.7vw, 25px);
  line-height: 1.16;
  letter-spacing: -0.02em;
}
.pj__pfeil, .pj__alle-pfeil { display: none; }
.pj__p:hover .pj__pfeil,
.pj__p:focus-visible .pj__pfeil { transform: translateX(4px); color: var(--ink); }

.pj__mehr { margin-top: clamp(26px, 3vw, 40px); font-size: 14.5px; text-align: center; }
.pj__mehr a { color: var(--muted); text-decoration: none; }
.pj__mehr a:hover, .pj__mehr a:focus-visible { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .pj__rahmen img { transition: none; }
  .pj__p:hover .pj__rahmen img { transform: none; }
}

/* ═══ Persönlich in Stuttgart ══════════════════════════════════════
   Erst das Wort, dann der Ort. Links der Ansprechpartner, rechts das Office.

   Das Portrait läuft im Seitenverhältnis der Vorlage (1000 × 1500 = 2:3).
   Dadurch ist es vollständig zu sehen — jedes andere Verhältnis würde bei
   `object-fit: cover` oben oder unten etwas abschneiden. Seine Höhe bestimmt
   die Zeile; die Slideshow daneben füllt sie aus.

   Kein Handlungsaufruf in dieser Sektion: der steht direkt darunter im
   Abschluss, und zweimal derselbe Knopf kurz hintereinander schwächt beide.
   ══════════════════════════════════════════════════════════════════════════ */

/* 33 em statt 60ch: die ch-Einheit misst die Breite der Null, und die ist in
   Inter deutlich schmaler als das mittlere Zeichen — 60ch trugen gemessen 72
   Zeichen. 33 em landen bei rund 66. */
.of__wort {
  max-width: 33em;
  margin: clamp(24px, 3vw, 36px) auto 0;
  display: grid;
  gap: 16px;
  text-align: center;
}
.of__wort p {
  margin-inline: auto;
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.6;
  color: var(--ink-2);
}

/* ── Ort: links der Text, rechts die Galerie ──────────────────────────────
   Kompakt statt großzügig: die Sektion soll möglichst in einen Bildschirm
   passen. Vorher lief die Galerie über die volle Breite und der Text stand
   mittig darüber — zusammen weit über eine Bildschirmhöhe.

   Der Gründerblock ist hier entfallen. Er stand doppelt: im Hero und noch
   einmal hier.

   Beide Spalten sind oben bündig verankert, damit Überschrift und Bildkante
   auf einer Linie beginnen. */
.of__spalten {
  margin-top: clamp(22px, 2.6vw, 34px);
  display: grid;
  gap: clamp(24px, 3vw, 48px);
}
@media (min-width: 900px) {
  .of__spalten {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

/* Der Textblock steht linksbündig und geschlossen — nicht mittig wie zuvor. */
.of .of__wort {
  max-width: 46ch;
  margin: 0;
  text-align: left;
}
.of .of__wort p + p { margin-top: clamp(12px, 1.4vw, 18px); }

.of__buehne { margin-top: 0; }

/* ── Slideshow ────────────────────────────────────────────────────── */

.of__lauf {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--canvas-2);
  aspect-ratio: 4 / 3;
}
/* Vorher stand hier `height: 100%` — die Höhe kam von dem Porträt, das daneben
   stand. Seit die Slideshow allein über die Satzbreite läuft, hat sie keinen
   Bezug mehr und fiel damit auf null zusammen: die Sektion war leer.
   Jetzt trägt sie ihr eigenes Verhältnis. */
@media (min-width: 860px) { .of__lauf { aspect-ratio: 16 / 9; height: auto; } }
.of__lauf .team-carousel__slide { position: absolute; inset: 0; margin: 0; }
.of__lauf img { width: 100%; height: 100%; object-fit: cover; }
.of__lauf figcaption {
  position: absolute;
  left: 14px;
  bottom: 14px;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(18, 18, 20, 0.46);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: 12.5px;
  letter-spacing: 0.01em;
}

/* ═══ Abschluss ═══════════════════════════════════════════════════════════
   Der Schlusssatz lief bisher auf --fs-display, also bis 108 px. In dieser
   Größe schreit er die Seite an, obwohl direkt darunter der Knopf steht, der
   die eigentliche Aufforderung trägt. Eine Stufe kleiner reicht.
   ═════════════════════════════════════════════════════════════════════════ */
.final__title { font-size: clamp(30px, 4.2vw, 58px); max-width: 24ch; }
.final__hinweis { margin-top: 18px; font-size: 13.5px; color: var(--muted); }

/* Kunden werden in der Leiste grün ausgezeichnet: die Rolle unterscheidet
   zwischen „wir haben für sie gebaut" und „damit arbeiten wir". Nur das
   Erste ist eine Referenz, und Grün heißt auf dieser Seite Ergebnis. */
.logomarquee__rolle--kunde { color: var(--ergebnis, #516C43); font-weight: 600; }

/* Die Wortmarke in der Überschrift. Sie sitzt auf der Höhe der
   Kleinbuchstaben und wächst mit dem Schriftgrad mit — als festes Pixelmaß
   würde sie bei jeder Fenstergröße anders zur Zeile stehen.
   0.72em entspricht der Versalhöhe der Serifenschrift in dieser Größe. */
.marke-inline {
  display: inline-block;
  height: 0.72em;
  width: auto;
  vertical-align: baseline;
  transform: translateY(0.02em);
}

/* Kopf der Ortssektion linksbündig: die Überschrift teilt ihre Kante mit dem
   Textblock darunter, nicht mit der Bildmitte. */
.of .sec-head { text-align: left; max-width: 46ch; }

/* Kompakter: die Sektion lief mit dem Standardabstand der Seite auf 1010 px
   bei 900 px Bildschirmhöhe. Weniger Luft oben und unten, kleinere
   Überschrift — in der halbbreiten Spalte brach sie sonst auf drei Zeilen. */
.of.section { padding-block: clamp(52px, 6.5vw, 92px); }
.of .sec-head h2 {
  font-size: clamp(27px, 2.5vw, 38px);
  line-height: 1.08;
  max-width: 15ch;
}
.of .sec-head { max-width: none; }
.of .of__wort { max-width: 50ch; }

/* Überschrift und Text teilen sich die linke Spalte und damit eine Kante.
   Vorher stand der Kopf als eigene Zeile über beiden Spalten und war zentriert
   — dadurch schwebte er mittig über dem Bild statt über seinem eigenen Text. */
.of__text { display: grid; align-content: start; }
.of .sec-head { text-align: left; margin: 0 0 clamp(14px, 1.8vw, 24px); max-width: none; }
.of .sec-head h2 { margin-top: 0; }

/* Die h2 trägt aus der Grundfassung ein `margin-inline: auto` und stand
   dadurch mittig in ihrer Spalte, obwohl der Kopf schon linksbündig war. */
.of .sec-head h2 { margin-inline: 0; }
.of .eyebrow { text-align: left; }

/* === /assets/css/start.css === */
/* ═════════════════════════════════════════════════════════════════════════
   Startseite — Hero und typografische Hervorhebungen

   Der Hero zeigt Nutzen, Person und Vertrauen. Die Systemgrafik ist bewusst
   nicht mehr hier: im ersten Bildschirm soll man verstehen, was es gibt,
   nicht wie es funktioniert.

   Die Hervorhebungen folgen dem typografischen Prinzip der Referenz, aber
   ausschließlich in acessio-Farben — helles Grün, warmes Creme, ein sehr
   zurückhaltender Terrakotta. Alle drei sind bereits im System vorhanden
   (--ergebnis, --canvas-2, --anfrage); es kommt keine neue Farbe dazu.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── Hero ────────────────────────────────────────────────────────────────
   56 zu 44 Prozent, wie vorgegeben. Höhe 88svh statt 100: der Hero soll den
   Bildschirm füllen, aber sichtbar machen, dass darunter etwas weitergeht. */
.hero--start {
  max-width: var(--max);
  margin: 0 auto;
  padding: calc(var(--kopf-hoehe) + clamp(16px, 3vh, 40px)) var(--gutter) clamp(32px, 5vh, 64px);
  display: grid;
  gap: clamp(24px, 3vw, 56px);
  align-items: center;
  min-height: 88svh;
}
@media (min-width: 980px) {
  .hero--start { grid-template-columns: minmax(0, 0.56fr) minmax(0, 0.44fr); }
}

.hero--start .hero__title {
  margin-top: clamp(14px, 1.8vw, 22px);
  font-size: clamp(30px, 3.3vw, 50px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  max-width: 20ch;
  text-wrap: balance;
}
.hero--start .hero__lead {
  margin-top: clamp(16px, 2vw, 24px);
  max-width: 52ch;
  font-size: clamp(15.5px, 1.15vw, 18px);
  line-height: 1.55;
  color: var(--ink-2);
}
.hero--start .hero__actions { margin-top: clamp(20px, 2.6vw, 30px); flex-wrap: wrap; }
.hero--start .hero__trust { margin-top: clamp(16px, 2vw, 22px); }

/* Die Bewertung ist im Hero kein Kleingedrucktes mehr: Zahl, Sterne und
   Bewertungsmenge bleiben als ein klarer, vollständig verlinkter Beleg
   zusammen. Der zweite Fakt darf darunter umbrechen. */
.hero--start .hero__trust {
  align-items: center;
  gap: 10px 16px;
  font-size: 13.5px;
}
.hero--start .hero__fakt--bewertung a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
}
.hero--start .hero__fakt--bewertung .stars {
  color: var(--green, #0E8A70);
  font-size: 18px;
  letter-spacing: 0.06em;
  line-height: 1;
}
.hero__review-copy { display: grid; gap: 2px; line-height: 1.2; }
.hero__review-copy b { font-size: 14px; font-weight: 750; }
.hero__review-copy > span { color: var(--muted); font-size: 12.5px; }
.hero--start .hero__fakt--bewertung a:hover .hero__review-copy > span {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Portrait ────────────────────────────────────────────────────────────
   Groß und freigestellt, kein Kartenrahmen. Die Beschriftung steht darunter,
   nicht als Auflage im Bild. */
.hero__portraet { margin: 0; display: grid; justify-items: center; align-content: end; }
.hero__portraet picture {
  display: block;
  width: 100%;
  max-width: clamp(240px, 32vw, 420px);
}
.hero__portraet img {
  width: 100%;
  height: auto;
  display: block;
}
.hero__portraet figcaption { margin-top: 12px; text-align: center; }
.hero__portraet figcaption b {
  display: block; font-family: var(--serif); font-weight: 400;
  font-size: clamp(18px, 1.5vw, 22px); letter-spacing: -0.02em; color: var(--ink);
}
.hero__portraet figcaption span {
  display: block; margin-top: 2px; font-size: clamp(13px, 1vw, 14.5px); color: var(--muted);
}

/* Am Phone zuerst der Text, darunter das Porträt — und keine leere Fläche
   dazwischen, weil die Systemgrafik hier nicht mehr steht. */
@media (max-width: 979px) {
  .hero--start { min-height: 0; }
  .hero__portraet picture { max-width: 260px; }
}

@media (max-width: 560px) {
  .hero--start .hero__trust { display: grid; align-items: start; }
  .hero--start .hero__fakt { white-space: normal; }
  .hero--start .hero__fakt + .hero__fakt::before { content: none; }
}

/* Im Office-Abschnitt tragen Text und Bild auf großen Bildschirmen dieselbe
   Höhe. So wirkt die reale Adresse wie ein vollwertiger Vertrauensbeleg und
   nicht wie ein kleines Vorschaubild neben einer Textwand. */
@media (min-width: 900px) {
  .of__spalten { align-items: stretch; }
  .of__buehne { min-height: 100%; }
  .of__lauf { height: 100%; min-height: 430px; aspect-ratio: auto; }
}

.intg__link { margin: 18px 0 0; }
.intg__link a {
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .hero--start * { animation: none !important; transition: none !important; }
}

/* ── Derselbe Stil in den übrigen Sektionen ──────────────────────────────
   Je Überschrift höchstens eine Markierung, die Farben wechseln über die
   Seite durch. Mehr wäre Ausschlag statt Rhythmus.

   Die vier Vorteilsfelder tragen bisher grüne Schrift. Grün steht nach dem
   Farbwechsel neben Cyan, Lavendel und Lime schief in der Reihe — sie
   bekommen deshalb dieselbe Markierung, rotierend, damit die Kacheln
   untereinander nicht identisch aussehen. */
.bsp__satz em {
  font-style: italic;
  color: var(--ink);
  padding: 0.04em 0.22em;
  margin-inline: -0.04em;
  border-radius: 0.22em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.bsp__szene:nth-child(1) .bsp__satz em { background: #DDF8FA; }
.bsp__szene:nth-child(2) .bsp__satz em { background: #EAE7FF; }
.bsp__szene:nth-child(3) .bsp__satz em { background: #ECF9DB; }
.bsp__szene:nth-child(4) .bsp__satz em { background: #DDF8FA; }

/* Der Schlusssatz der Systemsektion trug ebenfalls Grün. */
.bsp__schluss em { background: #ECF9DB; color: var(--ink); padding: 0.04em 0.22em; border-radius: 0.22em; }

/* ── „acessio?" ──────────────────────────────────────────────────────────
   Der Kapitelauftakt: ein großes Wort, darunter der Satz, der das System
   erklärt. Rechts die Systemgrafik, die vorher im Hero stand. */
.wasist { padding-block: clamp(64px, 9vw, 130px); }
.wasist__raster { display: grid; gap: clamp(28px, 4vw, 64px); align-items: center; }
@media (min-width: 980px) {
  .wasist__raster { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); }
}
.wasist__marke {
  font-family: var(--serif); font-weight: 400; font-style: normal;
  font-size: clamp(52px, 7.5vw, 108px);
  line-height: 0.95; letter-spacing: -0.04em; color: var(--ink);
}
.wasist__frage { color: #22C7D6; }
.wasist__satz {
  margin-top: clamp(20px, 2.6vw, 32px);
  max-width: 44ch;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(19px, 1.9vw, 27px);
  line-height: 1.42; letter-spacing: -0.015em; color: var(--ink);
}
.wasist__bild .qu__buehne { margin-top: 0; }

/* Am Phone zuerst der ganze Text, dann die Grafik — und keine reservierte
   Leerfläche davor. */
@media (max-width: 979px) {
  .wasist__bild { margin-top: clamp(20px, 5vh, 40px); }
}

/* ── Schluss als Gegenstück zu „acessio?" ───────────────────────────────── */
.final__marke {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(52px, 7.5vw, 108px);
  line-height: 0.95; letter-spacing: -0.04em; max-width: none;
}
.final__ruf { color: #22C7D6; }

/* ── Trust-Band ──────────────────────────────────────────────────────────
   Auf Heroweite begrenzt, nicht randlos: die Schiene gehört optisch zum
   ersten Bildschirm und nicht zur Seite als Ganzes.

   Links die Aussage, rechts die laufende Spur. Die Bewegung ist bewusst
   langsam — 46 Sekunden für einen Durchlauf. Schneller wird sie zum Karussell
   und zieht Aufmerksamkeit vom Hero ab.

   Die Marken sind zweimal gesetzt und der Versatz beträgt -50 %: der Schnitt
   liegt damit auf einer Gruppengrenze und die Schleife ist nahtlos. Die
   zweite Gruppe ist für Screenreader ausgeblendet. */
.band { padding-block: clamp(22px, 3vw, 38px); border-block: 1px solid var(--line); }
.band__raster { display: grid; gap: clamp(16px, 2.4vw, 34px); align-items: center; }
@media (min-width: 760px) {
  .band__raster { grid-template-columns: auto minmax(0, 1fr); }
}
.band__titel {
  margin: 0; font-size: 13px; line-height: 1.35; color: var(--muted);
  font-weight: 500; letter-spacing: 0.01em;
}

.band__schiene {
  overflow: hidden;
  /* Weiche Kanten, damit die Marken nicht abgeschnitten auftauchen. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.band__spur {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center;
  gap: clamp(34px, 5vw, 72px);
  width: max-content;
  animation: bandLauf 46s linear infinite;
}
.band__schiene:hover .band__spur { animation-play-state: paused; }
@keyframes bandLauf { to { transform: translateX(-50%); } }

.band__item { flex: 0 0 auto; }
.band__item img {
  display: block; width: auto;
  height: clamp(20px, 2.2vw, 27px);
  max-width: 132px; object-fit: contain;
  filter: grayscale(1); opacity: 0.5;
  transition: filter var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
@media (hover: hover) { .band__item img:hover { filter: none; opacity: 1; } }
.band__item img[alt="VFEHB"] { height: clamp(28px, 3vw, 38px); }

@media (prefers-reduced-motion: reduce) {
  .band__spur { animation: none; flex-wrap: wrap; width: auto; }
}

/* ── Schluss als großer Textblock ────────────────────────────────────────
   Wie in der Vorlage: ein einziger großer Satz, mittig, mit drei
   Markierungen. Keine Überschrift plus Fließtext — der Satz IST die
   Überschrift. */
.final__gross {
  max-width: 22ch;
  margin: 0 auto;
  font-size: clamp(30px, 4.4vw, 62px);
  line-height: 1.12;
  letter-spacing: -0.035em;
  font-weight: 700;
  color: var(--ink);
  text-wrap: balance;
}
.final .btn--primary { margin-top: clamp(26px, 3.4vw, 42px); }
.final__hinweis { margin-top: 16px; font-size: 13.5px; color: var(--muted); }

/* ── Vom Fragezeichen zum Ausrufezeichen ─────────────────────────────────
   Beide Zeichen liegen übereinander im selben Kasten. Nach einigen Sekunden
   auf der Seite wechselt die Anzeige und bleibt dann auf dem Ausrufezeichen
   stehen — die Sektion beantwortet ihre eigene Frage.

   Kein Dauerwechsel: er würde bei jedem Blick nach oben neu ablenken.
   Für Screenreader steht das Zeichen als eigener Text daneben, die Kachel
   selbst ist aria-hidden. */
.wasist__zeichen {
  display: inline-grid;
  vertical-align: baseline;
}
.wasist__zeichen > i {
  grid-area: 1 / 1;
  font-style: normal;
  color: #22C7D6;
  transition: opacity 520ms var(--ease), transform 520ms var(--ease);
}
.wasist__ruf { opacity: 0; transform: translateY(0.14em) rotate(-6deg); }
/* Der Wechsel darf man sehen: das Fragezeichen dreht sich weg und schrumpft,
   das Ausrufezeichen fällt von oben herein und federt einmal nach. */
.wasist__zeichen > i { transform-origin: 50% 80%; }
.wasist__ruf { opacity: 0; transform: translateY(-0.42em) scale(0.6); }
.wasist__zeichen.is-ruf .wasist__frage {
  opacity: 0; transform: translateY(0.22em) rotate(18deg) scale(0.7);
  transition: opacity 300ms var(--ease), transform 340ms cubic-bezier(0.55, 0, 0.85, 0.4);
}
.wasist__zeichen.is-ruf .wasist__ruf {
  opacity: 1; transform: none;
  transition: opacity 260ms 200ms var(--ease),
              transform 620ms 200ms cubic-bezier(0.18, 1.5, 0.42, 1);
}

@media (prefers-reduced-motion: reduce) {
  .wasist__zeichen > i { transition: none; }
}

/* ── Systemgrafik neben dem Text ─────────────────────────────────────────
   Die Mitte der Grafik muss auf der Mitte des Textblocks liegen. Das SVG
   bringt oben und unten Leerraum mit, deshalb wird die Fläche selbst
   zentriert und darf nach rechts über die Spalte hinauslaufen. */
.wasist__bild { display: grid; align-items: center; justify-items: center; min-width: 0; }
.wasist__bild .qu__buehne { margin-top: 0; width: 100%; }
@media (min-width: 1200px) {
  .wasist__bild { margin-right: calc(var(--gutter) * -0.6); }
}

/* Die Grafik trägt die neuen Farben: Cyan für Signale, Lavendel für
   Verbindungen, Lime für das Ergebnis. */
.wasist {
  --sicht-fl: #22C7D6;
  --sicht: #0E8A97;
  --anfrage: #8B7CF6;
  --ablauf: #8B7CF6;
  --ergebnis: #6FBF3A;
}

/* ── Ort: Wortmarke groß, Ortsangabe darunter ───────────────────────────── */
.of__titel { display: grid; justify-items: start; gap: 0.06em; }
/* Die Wortmarke trägt die Zeile, nicht die Ortsangabe darunter. Ihr Kasten
   misst 1,45 em; davon sind rund 55 % Versalhöhe, also 0,80 em gegen 0,72 em
   der Textzeile — sichtbar größer, ohne die Zeile zu sprengen.
   `flex-end` plus 15 % der Kastenhöhe hebt den Punkt von der Unterkante des
   Bildes auf die Schriftgrundlinie; im viewBox liegen dazwischen 12 von 80
   Einheiten. Bei `baseline` säße er auf der Bildunterkante und damit zu
   tief. */
.of__marke { display: inline-flex; align-items: flex-end; }
.of__marke .marke-inline { height: var(--marke-h); }
.of__marke .marke__punkt {
  width: calc(var(--marke-h) * 0.205); height: calc(var(--marke-h) * 0.205);
  margin-bottom: calc(var(--marke-h) * 0.15);
}
.of__ort-zeile { font-weight: 700; letter-spacing: -0.035em; }

/* === /assets/css/referenz-karten.css === */
/* Homepage references — deliberately scoped so the established acessio
   navigation, hero and shared component system remain untouched. */
.home-references {
  --project-blue: #ddf8fa;
  --project-purple: #eae7ff;
  --project-green: #ecf9db;
  --project-ink: #19191c;
  --project-cyan: #097078;
}

.home-references .sec-head {
  display: block;
}

.home-references__eyebrow {
  margin: 0 0 14px;
  color: var(--project-cyan);
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.home-references__grid {
  display: flex;
  gap: clamp(22px, 2.8vw, 42px);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  margin-top: clamp(22px, 3vw, 40px);
  padding: 4px 0 clamp(24px, 3vw, 38px);
  scroll-behavior: smooth;
  scroll-padding-inline: 1px;
  scroll-snap-type: inline mandatory;
  scrollbar-color: #22c7d6 transparent;
  scrollbar-width: thin;
}

.home-references__grid::-webkit-scrollbar { height: 6px; }
.home-references__grid::-webkit-scrollbar-track { background: rgba(25, 25, 28, .08); }
.home-references__grid::-webkit-scrollbar-thumb { background: #22c7d6; }

.home-references .reference-strip-card {
  flex: 0 0 clamp(310px, 37vw, 520px);
  display: block;
  min-width: 0;
  color: var(--project-ink);
  scroll-snap-align: start;
  text-decoration: none;
}

.home-references__controls {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: clamp(26px, 3vw, 42px);
}

.home-references__controls button {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  padding: 0;
  border: 1px solid rgba(25, 25, 28, .28);
  border-radius: 0;
  background: transparent;
  color: var(--project-ink);
  cursor: pointer;
  font: inherit;
  font-size: 22px;
  line-height: 1;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}

.home-references__controls button:hover {
  border-color: var(--project-ink);
  background: var(--project-ink);
  color: #f3f1f0;
}

.home-references__controls button:disabled {
  opacity: .3;
  cursor: default;
}

.home-references__controls button:disabled:hover {
  border-color: rgba(25, 25, 28, .28);
  background: transparent;
  color: var(--project-ink);
}

.home-references .reference-strip-card__month {
  margin: 0 0 11px;
  color: var(--project-cyan);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .14em;
  line-height: 1.35;
  text-transform: uppercase;
}

.home-references .reference-strip-card__frame {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  padding: clamp(15px, 2vw, 30px);
  border: 1px solid rgba(25, 25, 28, .08);
}

.home-references .reference-strip-card--blue .reference-strip-card__frame { background: var(--project-blue); }
.home-references .reference-strip-card--purple .reference-strip-card__frame { background: var(--project-purple); }
.home-references .reference-strip-card--green .reference-strip-card__frame { background: var(--project-green); }

.home-references .reference-strip-card__frame img {
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(25, 25, 28, .12);
  object-fit: cover;
  object-position: top center;
  box-shadow: 0 18px 42px rgba(25, 25, 28, .11);
  transform: translateZ(0);
  transition: transform 260ms ease, box-shadow 260ms ease;
}

.home-references a.reference-strip-card:hover .reference-strip-card__frame img {
  box-shadow: 0 26px 58px rgba(25, 25, 28, .15);
  transform: scale(1.018) translateY(-3px);
}

.home-references .reference-strip-card__meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-top: 18px;
}

.home-references .reference-strip-card__name {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(22px, 2vw, 31px);
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: 1.1;
}

.home-references .reference-strip-card__arrow {
  flex: 0 0 auto;
  font-size: 26px;
  line-height: 1;
  transition: transform 180ms ease;
}

.home-references a.reference-strip-card:hover .reference-strip-card__arrow {
  transform: translateX(5px);
}

.home-references .reference-strip-card__badge {
  display: inline-flex;
  margin-top: 12px;
  padding: 6px 9px;
  border: 1px solid rgba(25, 25, 28, .22);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
}

.home-references .reference-strip-card--coming .reference-strip-card__frame {
  display: grid;
  place-items: center;
  text-align: center;
}

.home-references .reference-strip-card__coming {
  margin: 0;
  max-width: 13ch;
  color: var(--project-ink);
  font-size: clamp(23px, 2.2vw, 34px);
  font-weight: 680;
  letter-spacing: -.035em;
  line-height: 1.05;
}

.home-references .reference-strip-card__coming small {
  display: block;
  margin-bottom: 13px;
  color: var(--project-cyan);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .11em;
  line-height: 1.3;
  text-transform: uppercase;
}

.home-references__more {
  margin: clamp(34px, 4vw, 58px) 0 0;
  text-align: right;
}

.home-references__more a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--project-ink);
  font-weight: 690;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

.home-references__more a span { transition: transform 180ms ease; }
.home-references__more a:hover span { transform: translateX(4px); }

.home-references a.reference-strip-card:focus-visible,
.home-references__controls button:focus-visible,
.home-references__more a:focus-visible {
  outline: 3px solid #22c7d6;
  outline-offset: 6px;
}

@media (max-width: 780px) {
  .home-references__grid {
    gap: 18px;
    margin-top: 18px;
  }

  .home-references .reference-strip-card { flex-basis: min(84vw, 360px); }
  .home-references .reference-strip-card__frame { aspect-ratio: 16 / 11; }
  .home-references .reference-strip-card__name { font-size: clamp(22px, 7vw, 29px); }
  .home-references__controls button { width: 46px; height: 46px; }
  .home-references__more { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .home-references__grid {
    scroll-behavior: auto;
  }

  .home-references .reference-strip-card__frame img,
  .home-references .reference-strip-card__arrow,
  .home-references__controls button,
  .home-references__more a span {
    transition: none;
  }
}

/* Canonical reference page -------------------------------------------------
   The header and footer remain the shared acessio components. Everything
   below is scoped to the new overview so no global typography or navigation
   rule is replaced. */
.references-overview {
  --reference-blue: #ddf8fa;
  --reference-purple: #eae7ff;
  --reference-green: #ecf9db;
  --reference-dark: #0e0e11;
  overflow: clip;
}

.references-overview__hero {
  min-height: 100svh;
  padding-top: clamp(150px, 14vw, 220px);
  padding-bottom: clamp(88px, 11vw, 160px);
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr);
  gap: clamp(48px, 7vw, 110px);
  align-items: center;
}

.references-overview__copy .eyebrow {
  margin-bottom: 22px;
  color: var(--accent);
}

.references-overview__title {
  max-width: 10.5ch;
  font-size: clamp(48px, 6.2vw, 94px);
}

.references-overview__lead {
  max-width: 45ch;
  margin-top: 28px;
  color: var(--ink-2);
  font-size: var(--fs-lead);
}

.references-overview__jump {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 34px;
  border-bottom: 1px solid currentColor;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.references-overview__visual {
  position: relative;
  min-height: clamp(470px, 51vw, 690px);
  isolation: isolate;
}

.references-overview__visual::before,
.references-overview__visual::after {
  content: "";
  position: absolute;
  z-index: -2;
  border-radius: 42%;
}

.references-overview__visual::before {
  inset: 4% 18% 25% 4%;
  background: var(--reference-purple);
  transform: rotate(-5deg);
}

.references-overview__visual::after {
  inset: 39% 0 2% 28%;
  background: var(--reference-green);
  transform: rotate(7deg);
}

.references-overview__screen {
  position: absolute;
  z-index: 1;
  inset: 6% -5% 12% 0;
  overflow: hidden;
  border: 1px solid rgba(25, 25, 28, .13);
  background: #fff;
  box-shadow: 0 30px 80px rgba(25, 25, 28, .17);
  transform: perspective(1400px) rotateY(-6deg) rotateZ(1.7deg);
  transform-origin: center;
  animation: reference-screen-enter 900ms var(--ease) both;
}

.references-overview__screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.references-overview__ticket {
  position: absolute;
  z-index: 3;
  left: -5%;
  bottom: 2%;
  width: min(390px, 68%);
  padding: clamp(24px, 3vw, 38px);
  background: var(--reference-dark);
  color: var(--canvas);
  box-shadow: 0 28px 60px rgba(14, 14, 17, .22);
  animation: reference-ticket-enter 900ms 120ms var(--ease) both;
}

.references-overview__ticket-label {
  margin-bottom: 14px;
  color: #22c7d6;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.references-overview__ticket-title {
  font-family: var(--serif);
  font-size: clamp(27px, 3vw, 45px);
  line-height: 1.02;
}

.references-overview__ticket-sub {
  margin-top: 16px;
  color: rgba(243, 241, 240, .68);
  font-size: 14px;
}

@keyframes reference-screen-enter {
  from { opacity: 0; transform: perspective(1400px) rotateY(-11deg) rotateZ(4deg) translateY(30px); }
}

@keyframes reference-ticket-enter {
  from { opacity: 0; transform: translateY(26px); }
}

.references-overview__projects {
  padding-block: var(--section-y);
  border-top: 1px solid var(--line);
}

.references-overview__heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, .55fr);
  gap: 40px;
  align-items: end;
  margin-bottom: clamp(52px, 7vw, 96px);
}

.references-overview__heading h2 {
  max-width: 13ch;
  margin-top: 14px;
}

.references-overview__heading > p {
  justify-self: end;
  max-width: 35ch;
  color: var(--muted);
  font-size: 18px;
}

.references-overview__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(34px, 4.4vw, 66px) clamp(24px, 3.2vw, 48px);
}

.references-overview .reference-card {
  grid-column: span 6;
  display: block;
  min-width: 0;
  color: var(--ink);
}

.reference-card__month {
  margin-bottom: 11px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.reference-card__frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  padding: clamp(16px, 2.3vw, 34px);
  border: 1px solid rgba(25, 25, 28, .07);
}

.reference-card--blue .reference-card__frame { background: var(--reference-blue); }
.reference-card--purple .reference-card__frame { background: var(--reference-purple); }
.reference-card--green .reference-card__frame { background: var(--reference-green); }

.reference-card__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  border: 1px solid rgba(25, 25, 28, .1);
  box-shadow: 0 18px 42px rgba(25, 25, 28, .11);
  transition: transform 650ms var(--ease), box-shadow 650ms var(--ease);
}

a.reference-card:hover .reference-card__frame img {
  transform: scale(1.018) translateY(-3px);
  box-shadow: 0 26px 58px rgba(25, 25, 28, .15);
}

.reference-card__meta {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
  margin-top: 18px;
}

.reference-card__name {
  font-size: clamp(22px, 2vw, 31px);
  line-height: 1.1;
}

.reference-card__arrow {
  flex: 0 0 auto;
  font-size: 26px;
  line-height: 1;
  transition: transform 180ms ease;
}

a.reference-card:hover .reference-card__arrow { transform: translateX(5px); }

.reference-card__badge {
  display: inline-flex;
  margin-top: 12px;
  padding: 6px 9px;
  border: 1px solid rgba(25, 25, 28, .22);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.reference-card__description { margin-top: 16px; max-width: 52ch; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
#mystic-candles { scroll-margin-top: 100px; }
.home-references .reference-strip-card .reference-logo-frame,
.reference-card .reference-logo-frame { background: #fff; }
.home-references .reference-strip-card .reference-logo-frame img,
.reference-card .reference-logo-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

.reference-card--coming .reference-card__frame {
  display: grid;
  place-items: center;
  text-align: center;
}

.reference-card__coming {
  max-width: 9ch;
  font-family: var(--serif);
  font-size: clamp(31px, 4vw, 53px);
  line-height: 1.02;
}

.reference-card__coming small {
  display: block;
  margin-bottom: 11px;
  color: var(--accent);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.references-overview__closing {
  padding-block: var(--section-y-tight);
  text-align: center;
}

.references-overview__closing h2 {
  max-width: 16ch;
  margin-inline: auto;
}

.references-overview__closing .btn { margin-top: 34px; }

.references-overview a.reference-card:focus-visible,
.references-overview__jump:focus-visible {
  outline: 3px solid #22c7d6;
  outline-offset: 6px;
}

@media (max-width: 1020px) {
  .references-overview__hero { grid-template-columns: 1fr; }
  .references-overview__visual { min-height: 590px; }
  .references-overview .reference-card:nth-child(n) { grid-column: span 6; }
}

@media (max-width: 780px) {
  .references-overview__hero { padding-top: 132px; }
  .references-overview__visual { min-height: 470px; }
  .references-overview__screen { inset: 4% -10% 12% 5%; }
  .references-overview__ticket { left: 0; width: 76%; }
  .references-overview__heading { grid-template-columns: 1fr; }
  .references-overview__heading > p { justify-self: start; }
  .references-overview__grid { grid-template-columns: minmax(0, 1fr); gap: 42px; }
  .references-overview .reference-card:nth-child(n) { grid-column: 1; }
  .reference-card__frame { aspect-ratio: 16 / 11; }
}

@media (max-width: 520px) {
  .references-overview__visual { min-height: 420px; }
  .references-overview__screen { inset: 3% 8px 17% 3%; transform: rotate(1deg); }
  .references-overview__ticket { bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .references-overview__screen,
  .references-overview__ticket {
    animation: none;
  }
}

/* === /assets/css/referenzen-20260908c.css === */
/* Original logos centered inside the existing colored reference frames. */
.reference-brand-card { --brand-edge:#eae7ff; --brand-inset:clamp(16px,2.3vw,34px); }
.reference-brand-card--denkmale { --brand-edge:#ecf9db; }
.reference-brand-card--umzug { --brand-edge:#ddf8fa; }
.reference-brand-card .reference-brand-frame { position:relative;display:block!important;padding:var(--brand-inset);background:var(--brand-edge)!important; }
.reference-brand-panel { position:absolute;inset:var(--brand-inset);display:flex;align-items:center;justify-content:center;overflow:hidden;background:#fff;border:1px solid rgba(25,25,28,.1);box-shadow:0 18px 42px rgba(25,25,28,.11); }
.reference-brand-card .reference-brand-panel>img { display:block;width:70%;height:65%;object-fit:contain;object-position:center;border:0;box-shadow:none;transform:none; }
.reference-brand-card--onyx .reference-brand-panel { background:#19191c; }
.reference-brand-card--onyx .reference-brand-panel>img { width:76%;height:68%; }
.reference-brand-card--denkmale .reference-brand-panel>img { width:clamp(100px,12vw,168px);height:auto;max-width:58%;max-height:70%;border-radius:50%; }
.reference-q {position:relative;overflow:hidden;width:clamp(110px,15vw,190px);max-width:62%;aspect-ratio:300/285;}
.reference-brand-card .reference-q img {position:absolute;max-width:none;width:187.667%;height:auto;left:-48%;top:0;object-fit:contain;border:0;box-shadow:none;filter:brightness(0) drop-shadow(0 0 0 #000) drop-shadow(0 0 0 #000) drop-shadow(0 0 0 #000) drop-shadow(0 0 0 #000) drop-shadow(0 0 0 #000);transform:none;}
.reference-launch {margin-top:12px;font-size:15px;font-weight:600;color:#075b62;}
.reference-sprint {margin-top:16px;font-size:13px;font-weight:700;letter-spacing:.025em;}
.reference-copy {margin-top:10px;font-size:16px;line-height:1.6;max-width:52ch;}
.reference-copy--small {font-size:13px;color:#57534f;}
.reference-shop-link {display:inline-flex;align-items:center;gap:14px;margin-top:16px;padding:10px 0;color:#075b62;font-weight:650;border-bottom:1px solid currentColor;text-decoration:none;}
.reference-shop-link:focus-visible,.brand-motion-toggle:focus-visible {outline:3px solid #097078;outline-offset:5px;}
.band__item--onyx { display:flex;align-items:center;justify-content:center; }
.band__item--onyx img {height:56px!important;width:105px!important;max-width:none;object-fit:contain;filter:brightness(0)!important;opacity:.8;}
.band__schiene {min-width:0;}
.band__spur {animation-duration:60s!important;}
.band__schiene:focus-within .band__spur,.band[data-paused="true"] .band__spur {animation-play-state:paused;}
.brand-motion-toggle {justify-self:end;grid-column:2;background:none;border:0;border-bottom:1px solid #6e6a66;color:#57534f;font:inherit;font-size:12px;cursor:pointer;padding:10px 0;min-height:44px;}
.reference-quote-source {font-size:12px;line-height:1.5;margin-top:15px;}
.services-entry {padding-block:clamp(54px,8vw,100px);padding-inline:var(--gutter,20px);border-top:1px solid rgba(25,25,28,.12);}
.services-entry h2 {max-width:20ch;font-size:clamp(36px,4vw,64px);}
.services-entry>p {max-width:56ch;margin:24px 0;font-size:18px;}
.services-entry__links {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px;margin-top:30px;}
.services-entry__links a {display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;border-bottom:1px solid rgba(25,25,28,.15);font-size:18px;text-decoration:none;}
.services-entry__links a:hover {color:#075b62;}
.services-entry__links a:focus-visible {outline:3px solid #097078;outline-offset:3px;}
@media(max-width:780px) {.brand-motion-toggle {grid-column:1;justify-self:start;}.reference-copy{font-size:15px;}.services-entry__links{grid-template-columns:1fr;}}
@media(prefers-reduced-motion:reduce) {.band__spur{animation:none!important;}.band__item[aria-hidden="true"]{display:none!important;}.brand-motion-toggle{display:none;}}

/* Approved refinement: black marks directly on full color fields. */
.reference-brand-card--denkmale { --brand-edge:#ddf8fa; }
.reference-brand-card--onyx .reference-brand-panel,
.reference-brand-card--denkmale .reference-brand-panel { background:transparent;border:0;box-shadow:none; }
.reference-brand-card--onyx .reference-brand-panel>img,
.reference-brand-card--denkmale .reference-brand-panel>img { filter:brightness(0); }

.services-entry__links a{min-width:0;overflow-wrap:anywhere}.services-entry__links a>span{flex:none}

/* === /assets/css/site-ui-20260908.css === */
/* Shared acessio identity, with the existing header, footer and Figtree. */
.page-leistungen main {font-family:var(--sans);font-size:18px;line-height:1.6;overflow-wrap:break-word;}
.page-leistungen main :is(h1,h2,h3) {font-family:var(--sans);font-weight:700;font-style:normal;text-wrap:balance;}
.page-leistungen main h1 {font-size:clamp(40px,6.4vw,84px);line-height:1.02;letter-spacing:-.035em;max-width:16ch;}
.page-leistungen main h2 {font-size:clamp(32px,4.3vw,60px);line-height:1.06;letter-spacing:-.035em;max-width:22ch;}
.page-leistungen main h3 {font-size:clamp(23px,2vw,30px);line-height:1.18;letter-spacing:-.02em;}
.page-leistungen main p {margin:0 0 1.2em;}
.page-leistungen .lp-wrap {width:auto;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter);}
.page-leistungen .lp-hero {padding-top:clamp(128px,13vw,184px);padding-bottom:clamp(58px,7vw,100px);}
.page-leistungen .lp-breadcrumb {margin-bottom:38px;}
.page-leistungen .lp-hub-hero h1 {max-width:17ch;}
.page-leistungen .lp-intro {margin-top:28px;font-size:clamp(18px,1.6vw,22px);line-height:1.55;}
.page-leistungen .lp-button {background:var(--cta,#22c7d6);color:var(--ink);border-radius:999px;padding:17px 27px;font-weight:500;}
.page-leistungen .lp-button:hover {background:#56d4df;color:var(--ink);}
.page-leistungen .lp-hub-group {grid-template-columns:.8fr 1.2fr;gap:clamp(35px,6vw,90px);}
.page-leistungen .lp-hub-group>div>a {padding-block:27px;}
.page-leistungen .lp-hub-group a p {margin:12px 0 0;}
.page-leistungen .lp-scope {border-top:0;background:#eae7ff;}
.page-leistungen .lp-proof {background:#ecf9db;}
.page-leistungen .lp-contact {background:#ddf8fa;}
.page-leistungen .lp-section.lp-wrap {padding-top:70px;padding-bottom:70px;}
.page-leistungen .lp-proof-logo {background:#eae7ff;}
.page-leistungen .lp-proof-logo img {background:transparent;filter:brightness(0);border:0;}
.page-leistungen .lp-proof h2 {font-size:clamp(30px,3.5vw,48px);}
.page-leistungen main :is(a,summary):focus-visible {outline:3px solid var(--accent);outline-offset:5px;}
.page-leistungen .lp-skip {z-index:1001;}
.page-leistungen .lp-proof-grid>* {min-width:0;}
.page-leistungen .lp-eyebrow {font-family:var(--sans);font-size:12px;}
@media(max-width:760px){.page-leistungen .lp-hub-group{grid-template-columns:1fr;gap:28px;}.page-leistungen .lp-hero h1{font-size:clamp(37px,9.8vw,58px);}.page-leistungen .lp-hero{padding-top:122px;}.page-leistungen .lp-section.lp-wrap{padding-block:50px;}}

/* Each article receives the same generous editorial card format. */
.page-redaktion .rd__liste {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 32px;}
.page-redaktion .rd__aufmacher {gap:44px 32px;}
.page-redaktion .rd__zeile {display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:20px;padding:0 0 30px;margin-inline:0;border-top:0;border-bottom:1px solid var(--line-2);background:transparent;}
.page-redaktion .rd__zeile[hidden] {display:none;}
.page-redaktion .rd__zeile:hover {background:transparent;}
.page-redaktion :is(.rd__gross,.rd__zeile) .rd__bild {display:block;aspect-ratio:16/10;overflow:hidden;background:#e7e0d8;border:0;}
.page-redaktion .rd__bild::before {display:none;}
.page-redaktion .rd__bild img {width:100%;height:100%;object-fit:cover;object-position:center;transition:transform 450ms var(--ease);}
.page-redaktion :is(.rd__gross,.rd__zeile):hover .rd__bild img {transform:scale(1.025);}
.page-redaktion :is(.rd__gross,.rd__zeile) .rd__titel {display:block;font-family:var(--sans);font-size:clamp(25px,2.4vw,34px);font-weight:700;line-height:1.15;letter-spacing:-.02em;text-wrap:balance;}
.page-redaktion :is(.rd__text,.rd__kopf) {display:grid;gap:12px;}
.page-redaktion .rd__fuss {font-size:13px;line-height:1.5;}
.page-redaktion .wissen-tabs {scrollbar-color:var(--accent) transparent;}
.page-redaktion .rd__zeile:focus-visible {outline:3px solid var(--accent);outline-offset:6px;}
.article-visual {max-width:1000px;margin:10px auto 22px;}
.article-visual img {width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;}
.page-article .article-body table {display:block;max-width:100%;overflow-x:auto;}
.page-article .article-hero__title,.page-redaktion .article-hero__title {font-family:var(--sans);font-weight:700;}
@media(max-width:899px){.page-redaktion .rd__liste{grid-template-columns:1fr;gap:36px;}.page-redaktion :is(.rd__gross,.rd__zeile) .rd__titel{font-size:clamp(25px,6.9vw,32px);}.article-visual{margin-top:6px;}}
@media(prefers-reduced-motion:reduce){.page-redaktion .rd__bild img{transition:none;}}

/* Original customer marks placed directly on the existing color fields. */
@font-face{font-family:'SA Anton';src:url('/assets/fonts/sa-anton.woff2') format('woff2');font-weight:400;font-display:swap;}
.reference-brand-card .reference-brand-panel {background:transparent!important;border:0;box-shadow:none;}
.reference-brand-card .reference-brand-panel>img {filter:brightness(0);}
.reference-brand-card--sa {--brand-edge:#ddf8fa;}
.reference-brand-card--herzberg {--brand-edge:#eae7ff;}
.reference-brand-card--lindenthal {--brand-edge:#ddf8fa;}
.reference-brand-card--palermo {--brand-edge:#ecf9db;}
.reference-sa-wordmark {display:block;max-width:90%;font:400 clamp(28px,4vw,62px)/1.15 'SA Anton',var(--sans);color:#000;white-space:nowrap;letter-spacing:-.015em;}
.reference-herzberg-mark {position:relative;overflow:hidden;width:76%;aspect-ratio:350/44;}
.reference-brand-card .reference-herzberg-mark img {position:absolute;max-width:none;width:285.714%;height:auto;left:0;top:-90.909%;filter:brightness(0);border:0;box-shadow:none;transform:none;}
.reference-brand-card--lindenthal .reference-brand-panel>img {width:78%;height:auto;max-height:65%;max-width:78%;filter:grayscale(1) contrast(5);}
.reference-brand-card--palermo .reference-brand-panel>img {width:72%;height:58%;}
.reference-brand-card--umzug .reference-brand-panel>img {width:68%;height:76%;filter:grayscale(1) brightness(.6) contrast(50);mix-blend-mode:multiply;}
a.reference-brand-card:hover .reference-brand-panel>img {transform:none;box-shadow:none;}
a.reference-brand-card:focus-visible {outline:3px solid var(--accent);outline-offset:6px;}

/* === /assets/css/global-cd-20260909.css === */
/* Shared acessio identity. Loaded after page styles. */
:root{--cd-teal:#075b62;--cd-violet:#54447b;--cd-green:#3b612b;--cd-earth:#80523d}
body{background:var(--canvas,#f3f1f0)}
.header{font-family:var(--sans,Figtree,system-ui,sans-serif);padding-inline:max(var(--gutter),calc((100% - var(--max)) / 2 + var(--gutter)));height:88px;min-height:88px;box-sizing:border-box}
.header .brand__logo{display:block;width:130px;height:33px;max-width:none}
.header .nav-cta{font:600 14px/1.2 var(--sans);padding:14px 22px;border-radius:999px;min-height:46px;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}
.site-menu{font-family:var(--sans)}.site-menu nav>a{font-family:var(--sans);font-weight:650}.site-menu [hidden]{display:none}
.header__actions{display:flex;align-items:center;gap:18px;flex:0 0 auto}.header__actions>.nav-funding{display:inline-flex;align-items:center;min-height:44px;padding-inline:2px;white-space:nowrap;color:var(--ink-2,#57534f);font-size:13px;line-height:1.25;font-weight:500;text-decoration-line:underline;text-decoration-color:color-mix(in srgb,var(--ink,#19191c) 24%,transparent);text-decoration-thickness:1px;text-underline-offset:.3em;transition:color .16s ease,text-decoration-color .16s ease}.header__actions>.nav-funding:hover,.header__actions>.nav-funding:focus-visible{color:var(--ink,#19191c);text-decoration-color:currentColor}.header__actions>.nav-funding:focus-visible{outline:2px solid currentColor;outline-offset:3px}@media(max-width:899px){.header__actions>.nav-funding{display:none}}@media(max-width:860px){.header__actions{display:none}}
.mk{position:relative;padding-block:0;box-decoration-break:clone;-webkit-box-decoration-break:clone;isolation:isolate;background-color:transparent;background-image:linear-gradient(transparent 58%,var(--mark-color,#eae7ff) 58%);border-radius:0;color:var(--ink)}
.mk::before,.mk::after{z-index:-1!important}.mk--creme{--mark-color:#eae7ff}.mk--gruen{--mark-color:#ddf8fa}.mk--terra{--mark-color:#ecf9db}
.wasist__satz>p{margin:0 0 1em}.wasist__satz>p:last-child{margin-bottom:0}.wasist__satz{font-size:clamp(20px,2.1vw,31px);line-height:1.4}
.bsp__szenen{gap:64px 50px}.everyday-icon{display:grid;place-items:center;width:68px;height:68px;background:#ddf8fa;border-radius:50%;margin-bottom:28px;color:var(--cd-teal)}.bsp__szene:nth-child(even) .everyday-icon{background:#eae7ff;color:var(--cd-violet)}.explain-icon{display:block;width:30px;height:30px;flex:none;margin:0}.bsp__satz{line-height:1.2}.bsp__nach{line-height:1.65;max-width:52ch}
.band__raster{display:block}.band__titel{max-width:none;margin-bottom:30px;font-size:16px;line-height:1.5}.band__schiene{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;mask-image:none;-webkit-mask-image:none;padding-block:10px 24px;outline-offset:5px}.band__schiene:focus-visible{outline:2px solid var(--accent)}.band__spur{display:flex;gap:clamp(38px,5vw,76px);animation:none;width:max-content;transform:translate3d(0,0,0)}.band__item{width:180px;height:94px;display:flex;align-items:center;justify-content:center;flex:none}.band__item img{width:100%!important;height:80px!important;max-width:none;object-fit:contain;filter:grayscale(1);opacity:1;mix-blend-mode:multiply}.band__item--sa img{filter:invert(1) grayscale(1) contrast(6)}.band__item--onyx img{filter:brightness(0)!important;height:94px!important;width:158px!important}.band__item--denkmale img{filter:grayscale(1) contrast(4);width:90px!important;height:90px!important}.band__item--lindenthal img{filter:grayscale(1) contrast(4)}.band__item--ionos img,.band__item--hetzner img{filter:brightness(0)}
.reference-hero-image{position:static!important;display:block;width:100%;height:100%;object-fit:cover;object-position:top;filter:none!important;transform:none!important}.reference-strip-card:has(.reference-hero-image) .reference-frame{padding:0;overflow:hidden}
.stimme__bild--website img{object-fit:cover;object-position:top}.stimme__quelle{display:inline-block;font-size:13px;line-height:1.5;margin-top:14px;text-underline-offset:4px}.review-checked{display:block;font-size:11px;font-weight:400;line-height:1.5;color:var(--muted);white-space:nowrap}.hero__fakt [data-google-reviews]{flex-wrap:wrap}.hero__fakt .review-checked{flex-basis:100%}.stimmen__rating .review-checked{margin-top:8px}
.final__gross{max-width:19ch}.final__intro{font-size:clamp(18px,2vw,25px);max-width:52ch;margin-block:32px;line-height:1.5}.services-entry{padding-inline:var(--gutter,20px)!important}.services-entry__links a{min-width:0;overflow-wrap:anywhere}.services-entry__links a>span{flex:none}
.contact-page .enquiry-form{background:#f9f8f6;border:1px solid #d3ceca;border-radius:20px;padding:clamp(24px,3.2vw,46px)}.contact-page .personal-contact img{width:132px;height:132px}.contact-page .personal-contact{gap:24px;margin-top:42px}.contact-page .enquiry-form input:not([type=radio]):not([type=checkbox]),.contact-page .enquiry-form textarea{background:#fff;border-color:#817a75}.contact-page .goal-options span{border-color:#817a75}.contact-page .enquiry-form input:focus,.contact-page .enquiry-form textarea:focus{outline-color:var(--accent)}
.case-study__title{font:700 clamp(38px,4.2vw,64px)/1.12 var(--sans);letter-spacing:-.035em;text-wrap:balance}.case-study__hero{gap:clamp(40px,5vw,76px)}.case-study__lead{line-height:1.65}.case-study :is(.sysuse__icon,.modul__icon,.page-step__idx){display:grid;place-items:center;align-self:start;flex:none;line-height:1;padding:0}.case-study .sysuse__icon{width:48px;height:48px}.case-study .sysuse__icon svg{display:block;width:24px;height:24px;margin:0;position:static;transform:none}.case-study .sysuse__item{align-items:start}.sysspur{gap:26px;align-items:start}.sysspur__halt{text-align:center;align-items:center;display:flex;flex-direction:column}.sysspur__punkt{position:relative;inset:auto;display:grid;place-items:center;flex:none;width:54px;height:54px;margin:0 auto 14px;background:#ddf8fa;border:0;color:var(--cd-teal);border-radius:50%}.sysspur__punkt:before,.sysspur__punkt:after{display:none}.sysspur__nr{display:none}.sysspur__text{max-width:27ch}.sysspur:before,.sysspur:after{display:none}
.page-leistungen .lp-wrap{width:min(1296px,calc(100% - 2 * var(--gutter)))}.page-leistungen .lp-hero{padding-bottom:clamp(84px,10vw,144px)}.page-leistungen :is(.lp-section,.lp-proof,.lp-contact){padding-block:clamp(72px,9vw,130px)}.page-leistungen :is(.lp-proof,.lp-contact,.lp-boundary,.lp-scope){background:transparent}.page-leistungen .lp-scope{border-top:1px solid var(--lp-line);padding:28px 0;margin-bottom:0}.page-leistungen .lp-boundary{border-inline-start:3px solid #c8c3dd;padding:6px 26px;margin-block:26px 44px;max-width:850px}.page-leistungen .lp-intro{max-width:43ch;line-height:1.55}.page-leistungen .lp-deliverables{gap:48px}.page-leistungen .lp-deliverable p{line-height:1.65}.page-leistungen .lp-proof{border-block:1px solid var(--lp-line)}.page-leistungen .lp-process li{padding-block:28px}.page-leistungen .lp-process li p{max-width:54ch}.page-leistungen .lp-contact{background:#ddf8fa}.page-leistungen .lp-process details summary{cursor:pointer;min-height:48px;padding-block:12px;font-weight:650}.page-leistungen .lp-process details[open] summary{margin-bottom:26px}
.page-redaktion .rd__gross:nth-child(2n) .rd__titel,.page-redaktion .rd__zeile:nth-child(4n+2) .rd__titel{color:var(--cd-violet)}.page-redaktion .rd__gross:nth-child(2n+1) .rd__titel,.page-redaktion .rd__zeile:nth-child(4n+1) .rd__titel{color:var(--cd-teal)}.page-redaktion .rd__zeile:nth-child(4n+3) .rd__titel{color:var(--cd-green)}.page-redaktion .rd__zeile:nth-child(4n) .rd__titel{color:var(--cd-earth)}.rd-more{margin-top:44px;display:flex;align-items:center;gap:22px;flex-wrap:wrap}.rd-more p{font-size:14px;color:#57534f;margin:0}.rd-more [hidden]{display:none}
.review-hero{padding-block:160px 64px}.review-hero h1{font:700 clamp(44px,6.2vw,84px)/1.08 var(--sans);letter-spacing:-.04em;max-width:16ch}.review-directory{background:none;padding-bottom:100px}.review-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;list-style:none;padding:0}.review-list__item{margin:0;border:0}.review-card{display:flex;flex-direction:column;align-items:start;gap:28px;position:relative;background:#f9f8f6;border:1px solid #d3ceca;padding:36px;min-height:280px;text-decoration:none;border-radius:16px;color:var(--ink)}.review-card:hover{border-color:var(--accent);background:#fff}.review-card__logo{display:flex;align-items:center;height:52px}.review-card__logo img{height:48px;width:48px;object-fit:contain}.review-card h3{font:650 27px/1.2 var(--sans);margin:12px 0}.review-card__type,.review-card__label{font-size:14px;line-height:1.5;color:#57534f}.review-card__arrow{position:absolute;inset:36px 30px auto auto}.review-card:focus-visible{outline:3px solid var(--accent);outline-offset:5px}
/* A useful figure is regular text and a semantic list; it remains readable without scripts. */
.article-explainer{margin:52px 0 60px;padding:30px 0;border-block:1px solid #c8c3bd}.article-explainer figcaption{margin-bottom:30px}.article-explainer h2{font-size:clamp(26px,3vw,34px)!important;line-height:1.2;margin:0 0 16px!important;max-width:28ch;color:var(--cd-teal)}.article-explainer .explain-intro{font-size:16px;line-height:1.6;margin:0;max-width:62ch}.article-explainer ol,.article-explainer ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px;list-style:none;padding:0;margin:0}.article-explainer li{margin:0;padding:0;min-width:0}.article-explainer .explain-symbol{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#ddf8fa;color:var(--cd-teal);margin-bottom:18px}.article-explainer li:nth-child(even) .explain-symbol{background:#eae7ff;color:var(--cd-violet)}.article-explainer h3{font:650 19px/1.3 var(--sans);margin:0 0 10px}.article-explainer li p{font-size:15px;line-height:1.6;margin:0}.article-explainer--process li:not(:last-child) h3:after{content:' →';color:var(--cd-teal)}
@media(max-width:900px){.review-list{grid-template-columns:repeat(2,minmax(0,1fr))}.page-leistungen .lp-deliverables{gap:30px}.page-leistungen .lp-hero-grid{grid-template-columns:1fr}.page-leistungen .lp-scope{max-width:600px}.case-study__hero{grid-template-columns:1fr}}
@media(max-width:760px){.header{height:76px;min-height:76px}.header .brand__logo{width:112px;height:28px}.header .nav-cta{display:none}.header .nav-bars{margin-inline-start:auto}.bsp__szenen{gap:58px}.band__item{width:155px}.band__spur{gap:38px}.contact-page .personal-contact img{width:104px;height:104px}.contact-page .personal-contact{gap:18px}.contact-page .personal-contact a{font-size:14px}.contact-page .contact-copy h1{font-size:clamp(40px,9vw,58px)}.case-study__title{font-size:clamp(38px,9vw,58px);line-height:1.13}.case-study .sysspur{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 22px;padding:0}.sysspur__halt{padding:0;border:0}.page-leistungen .lp-wrap{width:calc(100% - 2 * var(--gutter))}.page-leistungen :is(.lp-section,.lp-proof,.lp-contact){padding-block:68px}.page-leistungen .lp-process{grid-template-columns:1fr}.review-hero{padding-top:128px;padding-bottom:44px}.review-list{grid-template-columns:1fr;gap:18px}.review-card{min-height:240px;padding:30px}.review-card__arrow{inset:30px 28px auto auto}.article-explainer ol,.article-explainer ul{grid-template-columns:1fr;gap:28px}.final__gross{font-size:clamp(37px,9vw,58px)}.final__intro{margin-block:26px}.hero__title{overflow-wrap:normal;hyphens:none;text-wrap:balance}}
@media(prefers-reduced-motion:reduce){.band__spur{animation:none!important}.page-redaktion .rd__bild img{transition:none}}

.footer__grating{flex-wrap:wrap!important;white-space:normal;min-width:0;gap:5px!important}.footer__grating .review-checked{flex-basis:100%;white-space:normal}.footer__gruppe,.footer__liste{min-width:0}.footer__links{min-width:0}.footer .wrap{max-width:100%;box-sizing:border-box}
.review-card h2{font:650 27px/1.2 var(--sans);margin:12px 0}.review-card__logo:has(img[src*="trustpilot"]){width:146px}.review-card__logo img[src*="trustpilot"]{width:146px;height:48px}
.case-study__title{overflow-wrap:break-word;hyphens:auto}.case-study__title .mk{white-space:normal;padding-inline:.08em}
.page-leistungen .lp-wrap{padding-inline:0}
.system-bridge{align-self:center}.system-bridge ol{list-style:none;padding:0;margin:0;display:grid;gap:0}.system-bridge li{display:flex;gap:24px;align-items:center;padding:30px 0;border-bottom:1px solid #d3ceca}.system-bridge li:first-child{padding-top:0}.system-bridge li>span{display:grid;place-items:center;flex:none;width:62px;height:62px;border-radius:50%;background:#ddf8fa;color:#075b62}.system-bridge li:nth-child(2)>span{background:#eae7ff;color:#54447b}.system-bridge strong{display:block;font-size:clamp(21px,2vw,28px);font-weight:650;line-height:1.2}.system-bridge p{margin:9px 0 0;font-size:16px;line-height:1.5;max-width:30ch}
.agent-roster{padding-block:clamp(72px,8vw,120px);border-top:1px solid #d3ceca}.agent-roster__head{max-width:760px;margin-bottom:48px}.agent-roster__head h2{font-size:clamp(34px,4.4vw,62px);line-height:1.08;max-width:19ch;text-wrap:balance;letter-spacing:-.03em}.agent-roster__head>p:last-child{font-size:19px;line-height:1.6;max-width:61ch;margin-top:24px}.agent-roster__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-block:1px solid #cec9c5}.agent-card{padding:32px;min-width:0}.agent-card+.agent-card{border-inline-start:1px solid #cec9c5}.agent-card__top{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:28px}.agent-card__top img{display:block;width:88px;height:88px;object-fit:contain;background:none;border:0;border-radius:0}.agent-card__status{display:flex;align-items:center;gap:7px;font-size:12px;color:#365744;white-space:nowrap}.agent-card__status i{width:5px;height:5px;border-radius:50%;background:#365744}.agent-card h3{font-size:23px;line-height:1.2;margin-bottom:18px;letter-spacing:-.02em}.agent-card>p{font-size:16px;line-height:1.65;margin:0;max-width:35ch}.agent-roster__note{font-size:12px;line-height:1.5;color:#57534f;margin-top:22px}
@media(max-width:760px){.agent-roster__grid{grid-template-columns:1fr}.agent-card{padding:30px 0}.agent-card+.agent-card{border-inline-start:0;border-top:1px solid #cec9c5}.agent-card__top{margin-bottom:22px}.agent-roster__head{margin-bottom:34px}.agent-roster__head>p:last-child{font-size:18px}.system-bridge li{gap:18px}.system-bridge li>span{width:52px;height:52px}.wasist__raster{gap:50px}.agent-roster{padding-inline:var(--gutter)}}

.review-card__logo img[src*=clutch]{width:128px;height:48px}.review-card__logo:has(img[src*=clutch]){width:128px}

.review-list__item:last-child{grid-column:auto}.review-list__item{border:0!important}.review-card__logo img{mix-blend-mode:multiply}
.case-study #system>.stack-lg{margin-inline:auto}.case-study .sysuse__icon{margin-inline:auto!important;justify-self:center}.case-study .sysspur__punkt{box-shadow:none!important}
.band-sa-mark{font:400 27px/1.2 'SA Anton',var(--sans);color:#000;white-space:nowrap}.band__item--denkmale img{border-radius:50%;filter:grayscale(1) contrast(50)!important;mix-blend-mode:multiply}.band__item--herzberg{position:relative;overflow:hidden}.band__item--herzberg img{position:absolute;left:0;top:20px;object-fit:fill;width:514px!important;height:61.7px!important;max-width:none;clip-path:inset(33.333% 65% 30% 0);transform:translateY(-7px);filter:brightness(0)!important}
html:lang(fr) .hero__title,html:lang(en) .hero__title{font-size:clamp(44px,5.5vw,86px);line-height:1.08;max-width:16ch}html:lang(zh) .hero__title,html:lang(ar) .hero__title{font-size:clamp(40px,5vw,76px);line-height:1.25;letter-spacing:0;max-width:18ch}html:lang(ar) .brand__logo{direction:ltr}html:lang(ar) :is(.personal-contact a,.footer__grating,.band__spur){direction:ltr}html:lang(ar) .reference-strip__track{direction:ltr}html:lang(ar) .reference-strip-card__meta,html:lang(ar) .reference-copy{direction:rtl}html:lang(ar) .hero__zeile{display:inline}html:lang(ar) .contact-copy h1{line-height:1.2;letter-spacing:0}html:lang(zh) .contact-copy h1{line-height:1.2;letter-spacing:0}html:lang(ar) .nav-bars{margin-right:auto;margin-left:0}
@media(max-width:760px){html:lang(fr) .hero__title,html:lang(en) .hero__title{font-size:clamp(38px,10.2vw,62px);line-height:1.1}html:lang(zh) .hero__title,html:lang(ar) .hero__title{font-size:clamp(36px,9vw,58px);line-height:1.24}.band__item--herzberg img{width:442.85px!important;height:53.14px!important}.header__links{min-width:0}.footer__grating [data-google-reviews-label]{white-space:normal}}

/* The official negative logo is composited into its positive silhouette. */
.band-denkmale-mark{display:block;width:90px;height:90px;background:#000;clip-path:circle(48.5%);mask-image:linear-gradient(#000,#000),url(/assets/img/logo-stuttgarter-denkmale-original.png);mask-position:center;mask-size:contain;mask-repeat:no-repeat;mask-composite:exclude}
.band__schiene{position:relative}.band__spur{will-change:auto}.band-toggle{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.band-toggle:focus-visible{position:static;width:auto;height:auto;padding:10px 16px;clip-path:none;white-space:normal;background:var(--paper);border:1px solid var(--ink);color:var(--ink);margin-block:12px}

.band__schiene{direction:ltr}

html:root:lang(ar){--sans:'Figtree','Noto Sans Arabic',Tahoma,sans-serif;--serif:var(--sans)}
html:root:lang(zh){--sans:'Figtree','Noto Sans SC','Microsoft YaHei',sans-serif;--serif:var(--sans)}
html:lang(ar) :is(h1,h2,h3,.hero__bild figcaption,.contact-copy h1),html:lang(zh) :is(h1,h2,h3,.hero__bild figcaption,.contact-copy h1){font-family:var(--sans)!important;letter-spacing:0}
html:lang(ar) .header .brand{direction:ltr}html:lang(ar) :is(.agent-roster__head,.agent-card,.system-bridge){text-align:start}

.legal-document{overflow-wrap:anywhere;hyphens:auto;min-width:0}.legal-document :is(h1,h2,h3,p,li,a){overflow-wrap:anywhere}.legal-document table{min-width:0!important;table-layout:fixed}.legal-document th,.legal-document td{overflow-wrap:anywhere;word-break:normal}

/* Keep the customer/tool loop free of visible scroll controls. */
.band__schiene::-webkit-scrollbar{display:none;width:0;height:0}

.band__schiene.is-animated{overflow:hidden;touch-action:pan-y}.band__schiene.is-animated .band__spur{will-change:transform}

/* === /assets/css/stimme-sa-20260909.css === */
/* S.A. review: original wordmark on the existing card surface. */
.stimme--sa{direction:ltr}
.stimme--sa .stimme__bild--brand{display:grid;place-items:center;align-self:stretch;justify-self:stretch;width:100%;margin:0;padding-block:clamp(28px,3.4vw,52px)}
.stimme--sa .stimme__brandmark{display:block;font:400 clamp(26px,3vw,42px)/1.2 'SA Anton',var(--sans);color:#000;white-space:nowrap;letter-spacing:-.015em}
html:lang(ar) .stimmen__liste{direction:ltr}
html:lang(ar) .stimme:not(.stimme--sa){direction:rtl}
html:lang(ar) .stimme--sa .stimme__wort{direction:rtl;text-align:right}
@media(max-width:860px){.stimme--sa .stimme__bild--brand{justify-self:end;max-width:210px;place-items:center end;padding-block:20px 0}}

/* === /assets/css/onyx-bewertung-20260920.css === */
/* Onyx Mystic Candles: belegte Google-Bewertung ergänzen.
   Eng begrenzte Ergänzung für zwei bestehende deutsche Seiten:
   1) Startseite — vierte Kundenstimme im vorhandenen Slider, mit der
      Originalwortmarke statt eines Portraits (analog zur S.A.-Karte).
   2) Projektübersicht — separater Zitatblock neben der bestehenden
      klickbaren Referenzkarte, um verschachtelte Links zu vermeiden.
   Nutzt ausschließlich vorhandene Farben, Figtree/Newsreader-Typografie
   und die bestehende violette Fläche (--reference-purple). */

/* ── Startseite: vierte Kundenstimme (Onyx) ─────────────────────────────── */
.stimme--onyx .stimme__bild--brand {
  display: grid;
  place-items: center;
  align-self: stretch;
  justify-self: stretch;
  width: 100%;
  margin: 0;
  padding-block: clamp(28px, 3.4vw, 52px);
}
.stimme--onyx .stimme__brandlogo {
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
  object-fit: contain;
  filter: brightness(0);
}
@media (max-width: 860px) {
  .stimme--onyx .stimme__bild--brand {
    justify-self: end;
    max-width: 210px;
    place-items: center end;
    padding-block: 20px 0;
  }
}

/* ── Projektübersicht: separater Zitatblock bei der Onyx-Karte ──────────── */
.onyx-review {
  grid-column: 1 / -1;
  margin: 0;
  padding: clamp(24px, 3vw, 40px) clamp(24px, 3.4vw, 48px);
  border-radius: 22px;
  background: var(--reference-purple, #eae7ff);
}
.onyx-review__zitat { margin: 0 0 clamp(14px, 1.6vw, 20px); }
.onyx-review__zitat p {
  margin: 0;
  font-family: var(--zitat, "Newsreader", Georgia, "Times New Roman", serif);
  font-weight: 500;
  font-size: clamp(19px, 1.9vw, 26px);
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--ink, #19191C);
}
.onyx-review__quelle {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  font-size: 14px;
  color: var(--ink-2, #2B2B2F);
}
.onyx-review__sterne {
  color: var(--stimme-blau, #317093);
  letter-spacing: 0.08em;
}
.onyx-review__name { font-weight: 700; color: var(--ink, #19191C); }
.onyx-review__quelle a {
  color: inherit;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.onyx-review__quelle a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

/* === /assets/css/final-cta-20260909.css === */
/* Align the closing headline and copy with the centered CTA. */
.final .final__gross,.final .final__intro{margin-inline:auto;text-align:center}
.final>.reveal,.final .final__cta{text-align:center}

/* === /assets/css/foerdercheck-20260912.css === */
/* Fördercheck: ruhiger Sekundärweg innerhalb der bestehenden Acessio-Welt. */
.funding-check {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: clamp(28px, 6vw, 88px);
  padding-block: clamp(58px, 7vw, 96px);
  border-block: 1px solid var(--line);
}
.funding-check__copy { max-width: 760px; }
.funding-check h2 {
  max-width: 20ch;
  font: 700 clamp(31px, 3.7vw, 54px)/1.04 var(--sans);
  letter-spacing: -.035em;
  text-wrap: balance;
}
.funding-check p {
  max-width: 66ch;
  margin-top: 22px;
  color: var(--ink-2);
  font: 400 clamp(17px, 1.35vw, 20px)/1.58 var(--sans);
  text-wrap: pretty;
}
.funding-check__link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  color: var(--ink);
  border-bottom: 1px solid currentColor;
  font: 600 16px/1.35 var(--sans);
  text-decoration: none;
  white-space: nowrap;
}
.funding-check__link span { transition: transform 150ms ease-out; }
.funding-check__link:hover span { transform: translateX(4px); }
.funding-check__link:focus-visible { outline: 3px solid var(--accent); outline-offset: 6px; }

.contact-page .field b { font: inherit; }
.contact-page .field select {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 13px 42px 13px 14px;
  border: 1px solid #80798e;
  border-radius: 6px;
  background-color: #faf9ff;
  color: var(--ink);
  font: 400 16px/1.5 var(--sans);
}
.contact-page .field select:focus { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 2px; }
.contact-page .funding-fields { margin-top: 4px; }
.contact-page .funding-started { margin-top: 4px; }
.contact-page .funding-started .goal-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 720px) {
  .funding-check { grid-template-columns: 1fr; align-items: start; }
  .funding-check__link { justify-self: start; white-space: normal; }
}
@media (max-width: 600px) {
  .contact-page .funding-started .goal-options { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .funding-check__link span { transition: none; }
}

/* === /assets/css/startseite-20260921.css === */
/* ═════════════════════════════════════════════════════════════════════════
   Startseite — Auffrischung vom 21.09.2026

   Vorgabe Victor: Acessio statt Porträt in den Mittelpunkt, die ?!-Sektion
   zu einem Element zusammenführen, Referenzen lebendiger, mehr echte
   Google-Stimmen, Lindenthal mobil kompakt, Abschluss aufräumen.
   Keine neue Farbe: Canvas, Ink, Cyan (--cta) und die vorhandenen
   Projektflächen (#ddf8fa, #eae7ff) tragen alles. Alle Regeln sind auf die
   neuen Klassen begrenzt; globale Komponenten bleiben unberührt.
   ═════════════════════════════════════════════════════════════════════════ */

:root {
  --werk-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --werk-schatten: 0 1px 0 rgba(25, 25, 28, .05), 0 26px 60px -22px rgba(25, 25, 28, .34);
  --stern: #0E8A70;
}

/* ── 1 · Hero ────────────────────────────────────────────────────────────
   Links Aussage und EIN Hauptweg, rechts der Werkstapel: drei echte
   Kundenwebsites. Das Porträt wird zur Kontaktkarte am Stapel. */
.hero--werk { min-height: 0; padding-bottom: clamp(36px, 6vh, 84px); }
@media (min-width: 980px) {
  .hero--werk {
    grid-template-columns: minmax(0, 0.52fr) minmax(0, 0.48fr);
    min-height: min(88svh, 880px);
  }
}
.hero--werk .hero__actions { display: flex; align-items: center; gap: 12px 28px; }
.hero__textlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--ink);
  font-size: 15.5px;
  font-weight: 650;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}
.hero__textlink span { transition: transform 160ms ease-out; }
.hero__textlink:hover span { transform: translateX(4px); }
.hero__textlink:focus-visible { outline: 3px solid var(--cta-tief); outline-offset: 4px; border-radius: 2px; }

.werkstapel {
  position: relative;
  width: 100%;
  max-width: 600px;
  aspect-ratio: 1 / 0.96;
  justify-self: center;
}
.werkstapel__liste { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.werkstapel__fenster {
  --x: 0%;
  --y: 0%;
  --dreh: 0deg;
  position: absolute;
  width: 60%;
  transform: translate(var(--x), var(--y)) rotate(var(--dreh));
  transition: transform 950ms var(--werk-ease);
}
.werkstapel__fenster--vorne { left: 20%; top: 11%; z-index: 3; --dreh: -1.5deg; }
.werkstapel__fenster--links { left: 0; top: 3%; z-index: 1; --dreh: -7deg; }
.werkstapel__fenster--rechts { left: 40%; top: 0; z-index: 2; --dreh: 6deg; }
.werkstapel__fenster:nth-child(2) { transition-delay: 70ms; }
.werkstapel__fenster:nth-child(3) { transition-delay: 140ms; }

/* Mit JavaScript liegen die Fenster zuerst deckungsgleich und fächern sich
   einmal auf. Ohne JavaScript stehen sie sofort im Endzustand. Kein
   Ausblenden: das vordere Bild bleibt vom ersten Frame an sichtbar. */
html:not(.no-js) .werkstapel:not(.is-offen) .werkstapel__fenster--links { --x: 33%; --y: 9%; --dreh: -1.5deg; }
html:not(.no-js) .werkstapel:not(.is-offen) .werkstapel__fenster--rechts { --x: -33%; --y: 13%; --dreh: -1.5deg; }

.werkstapel__fenster a {
  display: block;
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  box-shadow: var(--werk-schatten);
  text-decoration: none;
}
.werkstapel__fenster a:focus-visible { outline: 3px solid var(--cta-tief); outline-offset: 5px; }
.werkstapel__leiste,
.ref-fenster__leiste {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 12px;
  background: #fff;
  border-bottom: 1px solid rgba(25, 25, 28, .08);
}
.werkstapel__leiste i,
.ref-fenster__leiste i { width: 8px; height: 8px; border-radius: 50%; background: #DDD7D1; flex: none; }
.werkstapel__leiste span,
.ref-fenster__leiste span {
  min-width: 0;
  margin-left: 8px;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.werkstapel__fenster img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: top center;
}

@media (hover: hover) and (pointer: fine) {
  .werkstapel.is-offen .werkstapel__fenster:hover,
  .werkstapel.is-offen .werkstapel__fenster:focus-within { z-index: 4; --y: -12px; --dreh: 0deg; transition-delay: 0ms; }
}

.werkstapel__person {
  position: absolute;
  left: 2%;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 7px 20px 7px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 16px 36px -16px rgba(25, 25, 28, .38);
}
.werkstapel__person img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: none; }
.werkstapel__person figcaption { display: grid; gap: 1px; line-height: 1.25; }
.werkstapel__person b { color: var(--ink); font-size: 15px; font-weight: 700; }
.werkstapel__person span { color: var(--muted); font-size: 12.5px; }

@media (max-width: 979px) {
  .werkstapel { max-width: 460px; aspect-ratio: auto; height: clamp(300px, 80vw, 430px); margin-top: 4px; }
  .werkstapel__fenster { width: 58%; }
  .werkstapel__fenster--vorne { left: 21%; top: 7%; --dreh: -1deg; }
  .werkstapel__fenster--links { top: 2%; --dreh: -4.5deg; }
  .werkstapel__fenster--rechts { left: 42%; --dreh: 4deg; }
  html:not(.no-js) .werkstapel:not(.is-offen) .werkstapel__fenster--links { --x: 36%; --y: 5%; --dreh: -1deg; }
  html:not(.no-js) .werkstapel:not(.is-offen) .werkstapel__fenster--rechts { --x: -36%; --y: 7%; --dreh: -1deg; }
  .werkstapel__person { padding: 6px 16px 6px 6px; gap: 10px; }
  .werkstapel__person img { width: 42px; height: 42px; }
  .werkstapel__person b { font-size: 14px; }
  .werkstapel__person span { font-size: 12px; }
}

/* ── 1b · Ansprechpartner-Karte (Victor, 22.09.2026) ─────────────────────
   Die kleine Karte ist ein Link auf /ueber-mich/. Mit Maus oder Tastatur
   klappt darüber eine größere Karte auf: großes Foto, ein Satz, „Mehr über
   mich". Am Touchgerät führt das Tippen direkt auf die Seite. */
a.werkstapel__person { color: inherit; text-decoration: none; transition: box-shadow 200ms ease, transform 200ms ease; }
.person-karte__text { display: grid; gap: 1px; line-height: 1.25; }
.person-karte__text b { color: var(--ink); font-size: 15px; font-weight: 700; }
.person-karte__text > span { color: var(--muted); font-size: 12.5px; }
/* Victor 22.09.: kein schwarzer Knopf; ein ruhiger Pfeil zeigt, dass die Karte klickbar ist. */
.person-karte__pfeil {
  margin-left: 2px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
  transition: transform 180ms ease-out, color 180ms ease-out;
}
a.werkstapel__person:hover .person-karte__pfeil { color: var(--ink); }
a.werkstapel__person:focus-visible { outline: 3px solid var(--cta-tief); outline-offset: 4px; }
.person-karte__gross {
  position: absolute;
  left: 0;
  bottom: 100%;
  width: min(300px, 78vw);
  padding: 16px 16px 18px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 30px 70px -24px rgba(25, 25, 28, .45);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px) scale(.96);
  transform-origin: 30px 100%;
  transition: opacity 220ms ease, transform 320ms var(--werk-ease);
}
/* Unsichtbare Brücke, damit die Karte beim Hochfahren der Maus stehen bleibt. */
.person-karte__gross::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 16px; }
.person-karte__buehne {
  display: block;
  overflow: hidden;
  height: 210px;
  border-radius: 14px;
  background: linear-gradient(180deg, #E7E0D8, #EEE9E4);
}
.person-karte__buehne img { display: block; width: 76%; height: auto; margin: 10px auto 0; }
.person-karte__satz { display: block; margin-top: 14px; color: var(--ink-2); font-size: 14.5px; line-height: 1.45; }
.person-karte__mehr { display: inline-flex; gap: 8px; margin-top: 12px; color: var(--ink); font-size: 14.5px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  a.werkstapel__person:hover,
  a.werkstapel__person:focus-visible { box-shadow: 0 20px 40px -16px rgba(25, 25, 28, .45); }
  a.werkstapel__person:hover .person-karte__pfeil,
  a.werkstapel__person:focus-visible .person-karte__pfeil { transform: translateX(3px); }
  a.werkstapel__person:hover .person-karte__gross,
  a.werkstapel__person:focus-visible .person-karte__gross { opacity: 1; transform: none; pointer-events: auto; }
}
@media not ((hover: hover) and (pointer: fine)) { .person-karte__gross { display: none; } }
@media (max-width: 979px) {
  .person-karte__text b { font-size: 14px; }
  .person-karte__text > span { font-size: 12px; }
}
[dir="rtl"] .person-karte__gross { left: auto; right: 0; transform-origin: calc(100% - 30px) 100%; }
[dir="rtl"] .person-karte__pfeil { display: inline-block; transform: scaleX(-1); }

/* ── 2 · Band: Bewertung und Adresse aus dem Hero ─────────────────────── */
.band__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 32px;
  margin-bottom: 26px;
}
.band__kopf .band__titel { margin: 0; }
@media (min-width: 761px) { .band__vertrauen { order: 2; } }
.band__vertrauen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 18px;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}
.band__bewertung {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
}
.band__bewertung .stars { color: var(--stern); font-size: 16px; letter-spacing: .06em; line-height: 1; }
.band__bewertung b { font-weight: 750; }
.band__bewertung:hover > span:not(.stars):not(.sr-only) { text-decoration: underline; text-underline-offset: 3px; }
.band__bewertung:focus-visible { outline: 3px solid var(--cta-tief); outline-offset: 4px; }
@media (max-width: 760px) {
  .band__kopf { display: grid; gap: 4px; margin-bottom: 18px; }
  .band__vertrauen { order: -1; }
}

/* ── 3 · acessio? — ein Element ──────────────────────────────────────────
   Wortmarke und Satz oben, darunter der Weg ? → ! → . als eine Linie. */
.wasist--eins { padding-block: clamp(72px, 10vw, 150px); }
.wasist__kopf { display: grid; gap: clamp(18px, 2.6vw, 40px); align-items: end; }
@media (min-width: 980px) {
  .wasist__kopf { grid-template-columns: auto minmax(0, 1fr); gap: clamp(40px, 5vw, 88px); }
}
.wasist--eins .wasist__marke { margin: 0; white-space: nowrap; font-size: clamp(60px, 9vw, 136px); }
.wasist__lead {
  max-width: 40ch;
  margin: 0 0 0.35em;
  color: var(--ink);
  font-size: clamp(19px, 1.75vw, 26px);
  line-height: 1.42;
  letter-spacing: -0.015em;
  text-wrap: pretty;
}

.satzzeichen {
  display: inline-grid;
  vertical-align: baseline;
  width: 0.5em;
  justify-items: start;
}
.satzzeichen > i {
  grid-area: 1 / 1;
  color: #22C7D6;
  font-style: normal;
  transform-origin: 30% 80%;
  transition: opacity 360ms var(--ease), transform 520ms var(--ease);
}
.satzzeichen__punkt {
  align-self: end;
  width: 0.2em;
  height: 0.2em;
  margin: 0 0 0.075em 0.06em;
  border-radius: 50%;
  background: #22C7D6;
}
/* Grundzustand: Fragezeichen. data-zustand setzt das Skript. */
.satzzeichen__ruf,
.satzzeichen__punkt { opacity: 0; transform: translateY(-0.3em) scale(0.6); }
[data-zustand="ruf"] .satzzeichen__frage,
[data-zustand="punkt"] .satzzeichen__frage,
[data-zustand="punkt"] .satzzeichen__ruf { opacity: 0; transform: translateY(0.2em) rotate(14deg) scale(0.7); }
[data-zustand="ruf"] .satzzeichen__ruf,
[data-zustand="punkt"] .satzzeichen__punkt { opacity: 1; transform: none; }

.zeichenweg {
  --z-gr: clamp(62px, 5.6vw, 88px);
  --z-gap: clamp(24px, 3vw, 52px);
  position: relative;
  display: grid;
  gap: 30px;
  margin: clamp(52px, 6vw, 96px) 0 0;
  padding: 0;
  list-style: none;
}
.zeichenweg::before {
  content: "";
  position: absolute;
  background: var(--line-2);
  transform-origin: left top;
  transition: transform 1500ms var(--werk-ease);
}
.zeichenweg__schritt { position: relative; min-width: 0; }
.zeichenweg__zeichen {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--z-gr);
  height: var(--z-gr);
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: var(--canvas);
  color: var(--ink);
  font: 700 calc(var(--z-gr) * 0.46) / 1 var(--sans);
  transition: background-color 420ms var(--ease), color 420ms var(--ease), border-color 420ms var(--ease), transform 520ms var(--werk-ease);
}
.zeichenweg__zeichen--punkt i { width: 22%; height: 22%; border-radius: 50%; background: #22C7D6; }
.zeichenweg__schritt.is-erreicht .zeichenweg__zeichen { border-color: var(--ink); }
.zeichenweg__schritt.is-aktiv .zeichenweg__zeichen { background: var(--ink); border-color: var(--ink); color: #fff; transform: scale(1.06); }
.zeichenweg h3 {
  margin: 22px 0 6px;
  color: var(--ink);
  font-size: clamp(21px, 1.9vw, 27px);
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.zeichenweg p { max-width: 30ch; margin: 0; color: var(--ink-2); font-size: 16px; line-height: 1.5; }

@media (min-width: 820px) {
  .zeichenweg { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--z-gap); }
  .zeichenweg::before {
    top: calc(var(--z-gr) / 2);
    left: calc(var(--z-gr) / 2);
    right: calc((100% - 2 * var(--z-gap)) / 3 - var(--z-gr) / 2);
    height: 1px;
  }
  html:not(.no-js) .wasist--eins:not([data-zustand]) .zeichenweg::before { transform: scaleX(0); }
}
@media (max-width: 819px) {
  .zeichenweg { gap: 26px; }
  .zeichenweg__schritt { display: grid; grid-template-columns: var(--z-gr) minmax(0, 1fr); column-gap: 20px; align-items: start; }
  .zeichenweg__zeichen { grid-row: span 2; }
  .zeichenweg h3 { margin: 10px 0 4px; }
  .zeichenweg::before {
    top: calc(var(--z-gr) / 2);
    bottom: calc(var(--z-gr) * 1.1);
    left: calc(var(--z-gr) / 2);
    width: 1px;
  }
  html:not(.no-js) .wasist--eins:not([data-zustand]) .zeichenweg::before { transform: scaleY(0); }
}

/* ── 5 · Referenzen: echte Fenster, die sich durchblättern lassen ──────── */
.home-references .reference-strip-card__frame.ref-fenster {
  display: flex;
  flex-direction: column;
  padding: clamp(14px, 1.8vw, 26px) clamp(14px, 1.8vw, 26px) 0;
}
.ref-fenster__leiste { flex: none; border-radius: 10px 10px 0 0; }
.ref-fenster__bild {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 18px 42px rgba(25, 25, 28, .11);
}
.home-references .reference-strip-card__frame.ref-fenster img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  border: 0;
  box-shadow: none;
  object-fit: initial;
  transform: translate3d(0, 0, 0);
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.45, 0.05, 0.35, 1);
  transition-duration: 900ms;
  will-change: auto;
}
.home-references a.reference-strip-card:hover .reference-strip-card__frame.ref-fenster img { box-shadow: none; }
.ref-tags {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13.5px;
  letter-spacing: .01em;
}
.home-references__controls button { border-radius: 50%; }
.home-references__grid { scrollbar-width: none; }
.home-references__grid::-webkit-scrollbar { display: none; }
.ref-lauf {
  position: relative;
  height: 2px;
  margin-top: 2px;
  overflow: hidden;
  background: var(--line);
}
.ref-lauf span {
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: scaleX(var(--ref-lauf, 0.3));
  transform-origin: left center;
  transition: transform 180ms linear;
}

/* ── 6 · Kundenstimmen ───────────────────────────────────────────────────
   Am Phone wird das Porträt zum runden Avatar: Victor wollte Lindenthal
   mobil kleiner. Die Markenlogos (SA, Onyx) bleiben schmal über dem Zitat. */
@media (max-width: 860px) {
  .stimmen .stimme__bild:not(.stimme__bild--brand) { margin: 0 0 18px; }
  .stimmen .stimme__bild--tief { margin-bottom: 18px; }
  .stimmen .stimme__bild:not(.stimme__bild--brand) img {
    width: 76px;
    height: 76px;
    max-height: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .6);
    object-fit: cover;
    object-position: 50% 8%;
  }
  .stimmen .stimme { padding-top: clamp(26px, 7vw, 34px); align-content: start; }
  .stimmen .stimme__bild { align-self: start; }
}

.stimmen-mehr {
  margin-top: clamp(48px, 6vw, 84px);
  padding-top: clamp(26px, 3vw, 38px);
  border-top: 1px solid var(--line);
}
.stimmen-mehr__titel { margin: 0 0 22px; color: var(--ink); font-size: 14px; font-weight: 700; letter-spacing: .01em; }
.stimmen-mehr__schiene {
  overflow-x: auto;
  scroll-snap-type: inline mandatory;
  scrollbar-width: none;
  outline-offset: 6px;
}
.stimmen-mehr__schiene::-webkit-scrollbar { display: none; }
.stimmen-mehr__schiene:focus-visible { outline: 3px solid var(--cta-tief); }
.stimmen-mehr__liste {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.stimmen-mehr__liste > li {
  min-width: 0;
  padding: 0 clamp(20px, 2.6vw, 40px);
  border-left: 1px solid var(--line);
  scroll-snap-align: start;
}
.stimmen-mehr__liste > li:first-child { padding-left: 0; border-left: 0; }
.stimmen-mehr__liste > li:last-child { padding-right: 0; }
.stimmen-mehr__stimme { display: flex; flex-direction: column; height: 100%; margin: 0; }
.stimmen-mehr__sterne { color: var(--stimme-blau, #317093); font-size: 14px; letter-spacing: .14em; line-height: 1; }
.stimmen-mehr__stimme blockquote { margin: 14px 0 0; }
.stimmen-mehr__stimme blockquote p {
  margin: 0;
  color: var(--ink);
  font-size: clamp(16.5px, 1.25vw, 19px);
  line-height: 1.5;
  text-wrap: pretty;
}
.stimmen-mehr__stimme .aus { color: color-mix(in srgb, var(--ink, #19191C) 42%, transparent); }
.stimmen-mehr__stimme figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  margin-top: auto;
  padding-top: 18px;
}
.stimmen-mehr__name { color: var(--ink); font-size: 14.5px; font-weight: 700; }
.stimmen-mehr__stimme figcaption a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--muted);
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.stimmen-mehr__stimme figcaption a:hover { color: var(--ink); }
.stimmen-mehr__stimme figcaption a:focus-visible { outline: 3px solid var(--cta-tief); outline-offset: 3px; }
@media (max-width: 860px) {
  .stimmen-mehr__liste { grid-auto-columns: 84%; }
  .stimmen-mehr__liste > li:last-child { padding-right: clamp(20px, 2.6vw, 40px); }
}

/* ── 7 · acessio im Zentrum Stuttgarts: Ansprechpartner und Fakten ────── */
.of__person { display: flex; align-items: center; gap: 14px; margin-top: clamp(24px, 2.6vw, 34px); }
a.of__person { width: fit-content; color: inherit; text-decoration: none; border-radius: 40px; }
a.of__person:focus-visible { outline: 3px solid var(--cta-tief); outline-offset: 6px; }
.of__person-mehr { display: inline-flex; gap: 6px; margin-top: 2px; color: var(--ink); font-size: 14px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
a.of__person:hover .of__person-mehr span { transform: translateX(3px); }
.of__person-mehr span { transition: transform 160ms ease-out; }
.of__person img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; }
.of__person p { display: grid; gap: 2px; margin: 0; line-height: 1.3; }
.of__person b { color: var(--ink); font-size: 16px; font-weight: 700; }
.of__person span { color: var(--muted); font-size: 14px; }
.of__fakten {
  display: flex;
  flex-wrap: wrap;
  gap: 0 26px;
  margin: 14px 0 0;
  padding: 0;
  color: var(--ink-2);
  font-size: 15px;
  list-style: none;
}
.of__fakten li { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; }
.of__fakten svg { width: 20px; height: 20px; color: var(--accent); flex: none; }
.of__fakten a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.of__fakten a:focus-visible { outline: 3px solid var(--cta-tief); outline-offset: 3px; }

/* ── 8 · Leistungen als überfliegbares Raster ─────────────────────────── */
.services-entry--raster { padding-block: clamp(80px, 10vw, 150px) clamp(40px, 5vw, 72px); }
.services-entry__kopf { max-width: 760px; }
.services-entry__kopf p { max-width: 58ch; margin-top: 20px; color: var(--ink-2); font-size: clamp(17px, 1.35vw, 20px); line-height: 1.55; }
.leistungsraster {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: clamp(34px, 4vw, 58px) 0 0;
  padding: 0;
  border-top: 1px solid var(--line-2);
  border-left: 1px solid var(--line-2);
  list-style: none;
}
.leistungsraster li { min-width: 0; border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
/* Victor 22.09.: Symbol und Name mittig, Namen ohne Umbruch, Farben der
   Projektflächen im Wechsel (Cyan, Lavendel, Hellgrün). */
.leistungsraster li:nth-child(3n + 1) { --l-flaeche: #ddf8fa; --l-strich: var(--cd-teal, #075b62); }
.leistungsraster li:nth-child(3n + 2) { --l-flaeche: #eae7ff; --l-strich: var(--cd-violet, #54447b); }
.leistungsraster li:nth-child(3n + 3) { --l-flaeche: #ecf9db; --l-strich: var(--cd-green, #3b612b); }
.leistungsraster a {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  height: 100%;
  min-height: 168px;
  padding: 26px 14px 22px;
  color: var(--ink);
  text-align: center;
  text-decoration: none;
  transition: background-color 200ms ease;
}
.leistungsraster a::after {
  content: "↗" / "";
  position: absolute;
  top: 14px;
  right: 16px;
  color: var(--muted);
  font-size: 14px;
  transition: transform 160ms ease-out, color 160ms ease-out;
}
.leistungsraster svg {
  box-sizing: content-box;
  width: 28px;
  height: 28px;
  padding: 14px;
  border-radius: 50%;
  background: var(--l-flaeche, #ddf8fa);
  color: var(--l-strich, var(--accent));
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 220ms var(--werk-ease);
}
.leistungsraster span { font-size: clamp(14.5px, 1.1vw, 16px); font-weight: 600; line-height: 1.25; white-space: nowrap; }
.leistungsraster a:hover { background: #fff; }
.leistungsraster a:hover svg { transform: translateY(-3px); }
.leistungsraster a:hover::after { color: var(--ink); transform: translate(2px, -2px); }
.leistungsraster a:focus-visible { outline: 3px solid var(--cta-tief); outline-offset: -3px; }
/* Unter 1240 px passen fünf Namen nicht mehr ohne Umbruch nebeneinander:
   dann Zeilen mit Symbol links, zwei Spalten; am Phone eine Spalte. */
@media (max-width: 1239px) {
  .leistungsraster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .leistungsraster a { flex-direction: row; justify-content: flex-start; gap: 16px; min-height: 84px; padding: 14px 44px 14px 18px; text-align: left; }
  .leistungsraster a::after { top: 50%; transform: translateY(-50%); }
  .leistungsraster a:hover::after { transform: translate(2px, -50%); }
  .leistungsraster svg { width: 24px; height: 24px; padding: 11px; flex: none; }
}
@media (max-width: 620px) {
  .leistungsraster { grid-template-columns: minmax(0, 1fr); }
  .leistungsraster a { min-height: 68px; padding-block: 10px; }
  .leistungsraster span { font-size: 15.5px; }
}
/* Sehr schmal (320 px, lange arabische/französische Namen) darf der Name
   umbrechen, sonst liefe er aus dem Bild. Deutsch passt auch dort einzeilig. */
@media (max-width: 480px) {
  .leistungsraster span { white-space: normal; overflow-wrap: anywhere; }
}

/* ── 8b · Leistungssymbole in Bewegung (Victor 22.09.2026) ────────────────
   1. Beim Erreichen zeichnen sich die Symbole einmal nacheinander (JS setzt
      pathLength=1 und die Klassen; ohne JS stehen sie einfach da).
   2. Beim Überfahren oder Fokus bewegt sich jedes Symbol passend zu seiner
      Leistung: der Relaunch dreht, der Ort fällt ein, die Lupe sucht, der
      Haken im Kalender setzt sich neu. Nur transform, opacity und
      stroke-dashoffset. Reduzierte Bewegung: keine Bewegung. */
.leistungsraster svg > * { transform-box: view-box; transform-origin: 50% 50%; }
.leistungsraster.is-bereit svg > * { stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0; }
.leistungsraster.is-gezeichnet svg > * {
  stroke-dashoffset: 0;
  opacity: 1;
  transition:
    stroke-dashoffset 900ms var(--werk-ease) calc(var(--l-i, 0) * 90ms + 120ms),
    opacity 120ms linear calc(var(--l-i, 0) * 90ms + 120ms);
}
@keyframes l-dreh { to { transform: rotate(180deg); } }
@keyframes l-puls { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.35); } }
@keyframes l-hops { 0%, 100% { transform: translateY(0); } 35% { transform: translateY(-2.5px); } 62% { transform: translateY(.6px); } }
@keyframes l-fall { 0% { transform: translateY(-4px); } 55% { transform: translateY(.8px); } 78% { transform: translateY(-.6px); } 100% { transform: translateY(0); } }
@keyframes l-such { 0%, 100% { transform: translate(0, 0); } 30% { transform: translate(-1.4px, -.8px); } 65% { transform: translate(1.2px, .9px); } }
@keyframes l-neu { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.leistungsraster a:is(:hover, :focus-visible)[href$="/website-relaunch/"] svg > * { animation: l-dreh 650ms var(--werk-ease); }
.leistungsraster a:is(:hover, :focus-visible)[href$="/landingpages/"] svg > circle { animation: l-puls 600ms ease-out; }
.leistungsraster a:is(:hover, :focus-visible)[href$="/onlineshops/"] svg > * { animation: l-hops 620ms ease-out; }
.leistungsraster a:is(:hover, :focus-visible)[href$="/social-media-videos/"] svg > path { animation: l-puls 600ms ease-out; }
.leistungsraster a:is(:hover, :focus-visible)[href$="/lokale-sichtbarkeit/"] svg > * { animation: l-fall 650ms ease-out; }
.leistungsraster a:is(:hover, :focus-visible)[href$="/automatisierung/"] svg > circle { animation: l-puls 560ms ease-out; }
.leistungsraster a:is(:hover, :focus-visible)[href$="/automatisierung/"] svg > circle:nth-of-type(2) { animation-delay: 140ms; }
.leistungsraster a:is(:hover, :focus-visible)[href$="/automatisierung/"] svg > circle:nth-of-type(3) { animation-delay: 280ms; }
.leistungsraster a:is(:hover, :focus-visible)[href$="/ki-sichtbarkeit/"] svg > * { animation: l-such 900ms ease-in-out; }
/* Neu zeichnen braucht die Strichlänge 1 aus dem Skript. */
.leistungsraster.is-gezeichnet a:is(:hover, :focus-visible)[href$="/webdesign/"] svg > path:last-child,
.leistungsraster.is-gezeichnet a:is(:hover, :focus-visible)[href$="/google-unternehmensprofil/"] svg > path:last-child,
.leistungsraster.is-gezeichnet a:is(:hover, :focus-visible)[href$="/online-terminbuchung/"] svg > path:last-child,
.leistungsraster.is-gezeichnet a:is(:hover, :focus-visible)[href$="/automatisierung/"] svg > path { animation: l-neu 700ms var(--werk-ease); }

/* ── 9 · Abschluss mit Fördercheck ───────────────────────────────────── */
.final--doppel {
  display: grid;
  gap: clamp(36px, 5vw, 80px);
  align-items: center;
  padding-block: clamp(72px, 9vw, 150px) clamp(88px, 11vw, 170px);
  text-align: left;
}
@media (min-width: 980px) {
  .final--doppel { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
}
.final--doppel > .reveal,
.final--doppel .final__cta { text-align: left; }
.final--doppel .final__gross,
.final--doppel .final__intro { margin-inline: 0; text-align: left; }
.final--doppel .final__gross { max-width: 20ch; font-size: clamp(36px, 4.1vw, 62px); text-wrap: balance; }
.final--doppel .final__intro { max-width: 46ch; margin-block: 24px 30px; font-size: clamp(17px, 1.5vw, 21px); }
.final__wege { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; }
.final--doppel .final__cta { margin-top: 0; }
.final__tel {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink-2);
  font-size: 15.5px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
/* Auf dem Handy bricht der Satz vor der Nummer um, die Nummer selbst nie (24.09.2026: live „013 / 06"). */
.final__tel { text-align: left; }
.final__nummer { white-space: nowrap; }
.final__tel:hover { color: var(--ink); }
.final__tel:focus-visible { outline: 3px solid var(--cta-tief); outline-offset: 4px; }

.foerderkarte {
  padding: clamp(26px, 3vw, 42px);
  border-radius: 22px;
  background: #ddf8fa;
  color: var(--ink);
}
.foerderkarte__icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .7);
}
.foerderkarte__icon svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: var(--accent-ink, #075B62);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.foerderkarte h3 {
  max-width: 18ch;
  margin: 20px 0 10px;
  font-size: clamp(22px, 2vw, 29px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-wrap: balance;
}
.foerderkarte p { margin: 0; color: var(--ink-2); font-size: 15.5px; line-height: 1.55; }
.foerderkarte__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  margin-top: 16px;
  border-bottom: 1px solid currentColor;
  color: var(--ink);
  font-size: 16px;
  font-weight: 650;
  text-decoration: none;
}
.foerderkarte__link span { transition: transform 150ms ease-out; }
.foerderkarte__link:hover span { transform: translateX(4px); }
.foerderkarte__link:focus-visible { outline: 3px solid var(--cta-tief); outline-offset: 5px; }

/* ── 9b · Abschluss einspaltig (22.09.2026): Förderung ist Teil des Hauptwegs ── */
.final--einzeln { padding-block: clamp(80px, 10vw, 160px); text-align: center; }
.final--einzeln > .reveal,
.final--einzeln .final__cta { text-align: center; }
.final--einzeln .final__gross { max-width: 18ch; margin-inline: auto; font-size: clamp(38px, 4.8vw, 72px); text-wrap: balance; }
.final--einzeln .final__intro { max-width: 52ch; margin: 24px auto 30px; font-size: clamp(17px, 1.5vw, 21px); }
.final--einzeln .final__wege { justify-content: center; margin-top: clamp(28px, 3.6vw, 44px); }
.final--einzeln .final__cta { margin-top: 0; }
.final__klein { margin: 18px 0 0; color: var(--muted); font-size: 13px; }
.final--einzeln .final__klein { margin-inline: auto; text-align: center; }

/* ── 6b · Laufband „Weitere Stimmen auf Google" (22.09.2026) ─────────────
   Läuft langsam durch, hält bei Maus oder Fokus an. Reduzierte Bewegung:
   ruhige, wischbare Reihe ohne Laufen. Kopien sind inert und aria-hidden. */
.stimmen-mehr__schiene.is-laufband { overflow: hidden; scroll-snap-type: none; mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.stimmen-mehr__schiene.is-laufband .stimmen-mehr__liste {
  width: max-content;
  grid-auto-columns: clamp(280px, 30vw, 400px);
  animation: stimmen-lauf var(--lauf-dauer, 60s) linear infinite;
}
.stimmen-mehr__schiene.is-laufband .stimmen-mehr__liste > li,
.stimmen-mehr__schiene.is-laufband .stimmen-mehr__liste > li:first-child,
.stimmen-mehr__schiene.is-laufband .stimmen-mehr__liste > li:last-child { padding: 0 clamp(20px, 2.4vw, 36px); border-left: 1px solid var(--line); }
.stimmen-mehr__schiene.is-laufband:hover .stimmen-mehr__liste,
.stimmen-mehr__schiene.is-laufband:focus-within .stimmen-mehr__liste { animation-play-state: paused; }
@keyframes stimmen-lauf { to { transform: translateX(-50%); } }
[dir="rtl"] .stimmen-mehr__schiene.is-laufband .stimmen-mehr__liste { animation-name: stimmen-lauf-rtl; }
@keyframes stimmen-lauf-rtl { to { transform: translateX(50%); } }
@media (max-width: 860px) { .stimmen-mehr__schiene.is-laufband .stimmen-mehr__liste { grid-auto-columns: 78vw; } }

/* ── Reduced Motion: vollständige ruhige Fassung ──────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .werkstapel__fenster,
  .satzzeichen > i,
  .zeichenweg::before,
  .zeichenweg__zeichen,
  .home-references .reference-strip-card__frame.ref-fenster img,
  .ref-lauf span,
  .hero__textlink span,
  .foerderkarte__link span,
  .leistungsraster a,
  .leistungsraster a::after,
  .person-karte__gross,
  .person-karte__pfeil,
  a.werkstapel__person,
  .of__person-mehr span { transition: none !important; }
  .stimmen-mehr__schiene.is-laufband .stimmen-mehr__liste { animation: none !important; }
  .leistungsraster svg > * { animation: none !important; transition: none !important; }
}

/* Druck: Symbole stehen immer da, auch wenn das Raster nie im Bild war. */
@media print {
  .leistungsraster.is-bereit svg > * { opacity: 1; stroke-dashoffset: 0; transition: none; animation: none; }
}

/* ── 22.09.2026 abends: Bewertung im Hero, mehr Luft, Google-Band auf /bewertungen/ ── */
.hero__vertrauen { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 18px; margin: 18px 0 0; color: var(--muted); font-size: 14px; }
.hero__bewertung { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink); text-decoration: none; }
.hero__bewertung .stars { color: var(--stern); font-size: 16px; letter-spacing: .06em; line-height: 1; }
.hero__bewertung b { font-weight: 750; }
.hero__bewertung:hover { text-decoration: underline; text-underline-offset: 4px; }
.hero__bewertung:focus-visible { outline: 3px solid var(--cta-tief); outline-offset: 4px; border-radius: 4px; }
/* Mehr Luft: jeder Abschnitt der Startseite bekommt oben zusätzlichen Abstand. */
main:has(> .hero--start) > section + section { margin-top: clamp(28px, 4vw, 64px); }
/* Google-Band auf /bewertungen/ */
.review-stimmen { padding-block: clamp(40px, 6vw, 88px) clamp(24px, 3vw, 40px); }
.review-stimmen__titel { max-width: 20ch; margin: 0; font-size: clamp(30px, 3.6vw, 52px); line-height: 1.08; letter-spacing: -0.03em; }
.review-stimmen__satz { max-width: 60ch; margin: 14px 0 28px; color: var(--ink-2); font-size: 16.5px; line-height: 1.55; }
/* /bewertungen/: ohne Laufband (reduzierte Bewegung, ohne JS) als lesbares Raster statt schmaler Spalten. */
.review-stimmen .stimmen-mehr__schiene:not(.is-laufband) { overflow: visible; }
.review-stimmen .stimmen-mehr__schiene:not(.is-laufband) .stimmen-mehr__liste { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 28px 0; }

/* Referenzkarten: Hinweis auf die Bewertung des Kunden, im Projekt-Cyan. */
.ref-bewertet {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 10px 0 0;
  color: var(--cta-tief, #0E8A97);
  font-size: 13.5px;
  font-weight: 650;
  letter-spacing: 0.01em;
}
.ref-bewertet .stars { color: var(--cta, #22C7D6); font-size: 14px; letter-spacing: 0.06em; }

/* ── Was eine Website ändert: vier Oberflächen-Ausschnitte (23.09.2026) ──
   Victor: „das mit dem Gezeichneten passt irgendwie nicht, vielleicht mit
   Grafiken arbeiten? oder Icons?" Statt der Zeichnungen jetzt vier Miniaturen
   echter Oberflächen (Suchtreffer, Formular, Kalenderwoche, Datenfluss), als
   Inline-SVG im Markup, damit keine Bilddatei nachgeladen wird. Die Flächen
   sind am Rand angeschnitten: sie sollen wie Bildschirmausschnitte wirken,
   nicht wie Symbole in einem Kasten. */

.vorteile {
  padding-block: clamp(54px, 6.4vw, 104px);
}

/* ---------- Kopf: Titel links, Vorspann rechts an der Grundlinie ---------- */

.vorteile__kopf { display: grid; gap: 24px; margin-inline: auto; text-align: center; }

.vorteile h2 {
  font-family: var(--sans);
  font-size: clamp(31px, 4.3vw, 56px);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.022em;
  color: var(--ink, #19191C);
  text-wrap: balance;
  /* ch bezieht sich auf die eigene, große Schrift: ergibt rund drei Wörter je Zeile. */
  max-width: 17ch;
  margin: 0 auto;
}

.vorteile__vorspann {
  font-family: var(--sans);
  font-size: clamp(17px, 1.25vw, 20px);
  line-height: 1.5;
  color: var(--ink-2, #2B2B2F);
  max-width: 46ch;
}



/* ---------- Die vier Punkte ---------- */

.vorteile__reihe {
  list-style: none;
  margin: clamp(44px, 5.5vw, 80px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(40px, 5vw, 52px) clamp(22px, 2.2vw, 32px);
}

@media (min-width: 640px) {
  .vorteile__reihe {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1080px) {
  .vorteile__reihe {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.vorteile__punkt {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Die Flaeche ist der Bildschirmausschnitt: weiss, feine Kante, hart beschnitten. */
.vorteile__flaeche {
  background: #fff;
  border: 1px solid rgba(25, 25, 28, .06);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 260ms cubic-bezier(.22, .61, .36, 1),
              transform 260ms cubic-bezier(.22, .61, .36, 1);
}

.vorteile__mini {
  display: block;
  width: 100%;
  height: auto;
}

/* Die Zahlenzeile traegt eine Haarlinie. Ueber die vier Spalten hinweg
   ergibt das eine durchgehende Linie und bindet die Reihe zusammen. */
.vorteile__index {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid rgba(25, 25, 28, .06);
}

.vorteile__nr {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1;
  color: var(--muted, #6E6A66);
  font-variant-numeric: tabular-nums;
}

.vorteile__strich {
  width: 26px;
  height: 2px;
  border-radius: 1px;
  background: var(--cta, #22C7D6);
  transition: width 260ms cubic-bezier(.22, .61, .36, 1);
}

.vorteile h3 {
  font-family: var(--sans);
  font-size: clamp(19px, 1.35vw, 22px);
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: -0.012em;
  color: var(--ink, #19191C);
  margin-top: 12px;
}

.vorteile__punkt p {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-2, #2B2B2F);
  margin-top: 9px;
  max-width: 38ch;
}

/* ---------- Abschluss ---------- */

.vorteile__schluss {
  font-family: var(--sans);
  font-size: clamp(16px, 1.1vw, 18px);
  line-height: 1.55;
  color: var(--ink-2, #2B2B2F);
  max-width: 58ch;
  margin-top: clamp(44px, 5vw, 76px);
  padding-top: clamp(20px, 2.2vw, 28px);
  border-top: 1px solid rgba(25, 25, 28, .06);
}

/* ---------- Links ---------- */

.vorteile__punkt p a,
.vorteile__schluss a {
  color: var(--ink, #19191C);
  text-decoration: underline;
  text-decoration-color: var(--cta, #22C7D6);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color 180ms cubic-bezier(.22, .61, .36, 1),
              text-decoration-color 180ms cubic-bezier(.22, .61, .36, 1);
}

.vorteile__punkt p a:hover,
.vorteile__schluss a:hover {
  color: var(--accent, #097078);
  text-decoration-color: var(--accent, #097078);
}

.vorteile__punkt p a:focus-visible,
.vorteile__schluss a:focus-visible {
  outline: 2px solid var(--accent, #097078);
  outline-offset: 3px;
  border-radius: 2px;
}

.vorteile__punkt:hover .vorteile__flaeche {
  border-color: rgba(25, 25, 28, .06);
  transform: translateY(-2px);
}

.vorteile__punkt:hover .vorteile__strich {
  width: 40px;
}

/* ---------- Bewegung abschaltbar ---------- */

@media (prefers-reduced-motion: reduce) {
  .vorteile *,
  .vorteile *::before,
  .vorteile *::after {
    transition: none !important;
    animation: none !important;
  }

  .vorteile__punkt:hover .vorteile__flaeche {
    transform: none;
  }

  .vorteile__punkt:hover .vorteile__strich {
    width: 26px;
  }
}

/* Gezeichnete Sterne neben der Überschrift auf /bewertungen/ (23.09.2026):
   die rechte Hälfte der Zeile stand leer. */
.review-hero__sterne { margin: clamp(18px, 2.4vw, 30px) 0 0; }
.review-hero__sterne .stars { font-size: clamp(30px, 4.6vw, 58px); color: var(--cta-tief, #0E8A97); }
@media (min-width: 900px) {
  .review-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: clamp(32px, 5vw, 80px); }
  .review-hero h1 { grid-column: 1; }
  .review-hero__sterne { grid-column: 2; margin: 0 0 0.35em; }
}

/* ── Referenzkarten: nur noch die Seite (23.09.2026) ─────────────────────
   Victor: „diesen blauen Rand jeweils rausnehmen, dass wir wirklich nur die
   Seiten dort im Prinzip schweben haben." Kein Farbfeld, kein Rahmen: die
   Aufnahme steht frei und wirft einen weichen Schatten. */
:root .reference-strip-card__frame {
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 14px;
  box-shadow: 0 1px 0 rgba(25, 25, 28, .05), 0 26px 44px -30px rgba(25, 25, 28, .45);
}
:root .reference-strip-card--blue .reference-strip-card__frame,
:root .reference-strip-card--purple .reference-strip-card__frame,
:root .reference-strip-card--green .reference-strip-card__frame { background: #fff; }
:root .reference-brand-frame { background: #fff; }
:root .reference-strip-card__meta { margin-top: 16px; }

/* Markenkarten tragen dieselbe Fläche wie die Seitenaufnahmen: weiß.
   Vorher wechselten Cyan, Lavendel und Limette von Karte zu Karte (23.09.2026). */
:root .reference-brand-panel { background: #fff; }

/* ── „Was acessio.de kann." als Zeilen (23.09.2026) ──────────────────────
   Victor: „jetzt aktuell ist es zu gepresst … es soll kompakt sein und
   leicht verständlich, aber wir können gerne mit diesen Zeichnungen
   arbeiten." Vier Zeilen, Bild und Text nebeneinander, die Seite wechselt. */
.kann-liste { display: grid; gap: clamp(44px, 6vw, 92px); margin: 0; padding: 0; list-style: none; }
.kann { display: grid; gap: clamp(18px, 3vw, 56px); align-items: center; }
@media (min-width: 860px) {
  .kann { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .kann:nth-child(even) .kann__bild { order: 2; }
}
/* 24.09.2026 abends, Victor: „den weißen Hintergrund weg … ohne Umrandung in Schwarz",
   die Zeichnung soll mit der Seite verschmelzen. Kein Kasten, kein Schatten. */
.kann__bild {
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
}
.kann__bild img { display: block; width: 100%; height: auto; }
.kann__text { max-width: 48ch; }
.kann__nr { display: inline-flex; align-items: center; gap: 12px; font: 600 14px/1 var(--sans); letter-spacing: .14em; color: var(--muted); font-variant-numeric: tabular-nums; }
.kann__nr::after { content: ""; width: 26px; height: 2px; border-radius: 1px; background: var(--cta, #22C7D6); }
.kann h3 { margin: 14px 0 10px; font-size: clamp(23px, 2.1vw, 31px); font-weight: 600; letter-spacing: -.018em; line-height: 1.18; }
.kann p { margin: 0; color: var(--ink-2); font-size: clamp(16px, 1.25vw, 18px); line-height: 1.6; }
.kann p a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--cta, #22C7D6); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.kann p a:hover { color: var(--cta-tief, #0E8A97); }
.kann-schluss { margin: clamp(44px, 5.4vw, 80px) auto 0; max-width: 44ch; text-align: center; color: var(--ink); font-size: clamp(17px, 1.4vw, 21px); line-height: 1.5; }
/* Nur der Textlink; der gezeichnete Knopf (.btn--primary) behaelt sein Flex-Layout mit Pfeilabstand. */
.kann-schluss a:not(.btn) { display: inline-block; margin-top: 14px; color: var(--ink); font-size: 16px; font-weight: 600; text-decoration: underline; text-decoration-color: var(--cta, #22C7D6); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.kann-schluss a:not(.btn):hover { color: var(--cta-tief, #0E8A97); }
.kann-schluss__wege .btn { margin-top: 0; }

/* Drei Schritte im Stuttgart-Abschnitt. */
.of__schritte { margin: 0; padding: 0; list-style: none; counter-reset: schritt; display: grid; gap: 14px; }
.of__schritte li { position: relative; padding-left: 44px; color: var(--ink-2); font-size: clamp(15.5px, 1.2vw, 17px); line-height: 1.55; counter-increment: schritt; }
.of__schritte li::before {
  content: counter(schritt, decimal-leading-zero);
  position: absolute; left: 0; top: .2em;
  width: 30px; height: 30px; display: grid; place-items: center;
  background: var(--zg-kreis, url(/assets/img/zeichen/kreis.svg)) center / 100% 100% no-repeat;
  color: var(--ink); font: 700 12px/1 var(--sans); letter-spacing: .02em;
}
.of__schritte b { color: var(--ink); font-weight: 650; }

/* ── Handy-Feinschliff 24.09.2026 ────────────────────────────────────────── */
/* „Was acessio.de kann": auf dem Handy mehr Luft, Bild nicht randvoll. */
@media (max-width: 859px) {
  .kann-liste { gap: clamp(48px, 12vw, 72px); }
  .kann { gap: 18px; }
  .kann__bild { margin-inline: 4px; }
  .kann__text { padding-inline: 4px; }
  .kann h3 { font-size: 24px; }
  .vorteile__kopf { margin-bottom: 36px; }
}
/* Wortmarke in der Überschrift: dieselbe wie im Stuttgart-Abschnitt, auf Zeilenhöhe. */
.kann-marke { --marke-h: 0.86em; display: inline-flex; align-items: flex-end; margin-inline: 0.06em 0.02em; }
.kann-marke .marke-inline { height: var(--marke-h); width: auto; }
.kann-marke .marke__punkt { width: calc(var(--marke-h) * 0.205); height: calc(var(--marke-h) * 0.205); margin-left: calc(var(--marke-h) * -0.034); margin-bottom: calc(var(--marke-h) * 0.15); }
.kann-marke__de { color: var(--muted); font-weight: 600; margin-left: 0.04em; }
/* 24.09.2026 abends: Überschrift „Sie möchten mehr Anfragen über Ihre Website?" zweizeilig,
   darunter die Unterzeile mit Wortmarke; am Ende das Angebot mit eigener Zwischenüberschrift. */
.vorteile h2 { max-width: 22ch; margin-inline: auto; text-wrap: balance; }
.vorteile__kopf { gap: 14px; }
.vorteile__unter { margin: 0 auto; color: var(--muted); font-size: clamp(16px, 1.3vw, 20px); font-weight: 600; letter-spacing: .01em; }
.vorteile__unter strong { color: var(--ink); font-weight: 700; }
/* Frage vor dem Knopf mit gezeichnetem Pfeil (Victor 24.09.2026: „Bereit, das Unsichtbare
   sichtbar zu machen? … an dem blauen Punkt einfach nur einen Pfeil auf den Knopf"). */
/* Victor 25.09.2026: mehr Luft um den Schluss (zu 03, zwischen Frage und Knopf, zur nächsten
   Sektion), Frage deutlich größer, Pfeil auch auf dem Handy, Pfeilspitze außerhalb des Knopfs. */
/* 28.09.2026 (Victor): der Schluss soll beim Scrollen eine Zeit lang allein in der Mitte stehen —
   oben wie unten rund ein Drittel Bildschirmhöhe Luft. */
.kann-ruf { max-width: none; margin-top: clamp(150px, 32vh, 340px); margin-bottom: 0; }
/* .vorteile h3 hat höhere Spezifität, deshalb .vorteile davor. */
.vorteile .kann-ruf__frage { max-width: 17ch; margin: 0 auto clamp(28px, 3.6vw, 52px); color: var(--ink); font-size: clamp(31px, 4.3vw, 56px); font-weight: 600; letter-spacing: -.022em; line-height: 1.06; text-wrap: balance; }
/* Das Fragezeichen trägt den Markenpunkt: cyan statt eines zweiten Punkts dahinter. */
.kann-ruf__frz { color: var(--cta, #22C7D6); }
.kann-ruf__weg { position: relative; display: flex; justify-content: center; max-width: none; margin: 0 !important; }
/* Pfeil von unten links nach oben auf den Knopf; sein rechter Rand endet vor dem Knopf
   (Knopf ist ~231 px breit, mittig), die Spitze bleibt außerhalb. */
.kann-ruf__pfeil { display: block; position: absolute; right: calc(50% + 118px); top: 22px; width: 76px; height: 51px; background: var(--zg-pfeil) center / contain no-repeat; transform: scaleY(-1) rotate(14deg); pointer-events: none; }
@media (min-width: 700px) {
  .kann-ruf__pfeil { right: calc(50% + 128px); top: 20px; width: 124px; height: 83px; }
}
/* Abstand zur nächsten Sektion („Hier läuft es schon so"), besonders auf dem Handy. */
.vorteile { padding-bottom: clamp(150px, 32vh, 340px); }
/* Kundenstimmen auf dem Handy: Zitat oben, Person darunter in normaler Größe (Victor). */
@media (max-width: 860px) {
  .stimmen .stimme__bild:not(.stimme__bild--brand) { order: 2; justify-self: start; margin: 18px 0 0; }
  .stimmen .stimme__bild:not(.stimme__bild--brand) img { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; object-position: 50% 8%; }
  .stimmen .stimme__wort { order: 1; padding-bottom: 0; }
  .stimmen .stimme__bild--brand { order: 2; justify-self: start; margin-top: 18px; padding-block: 0; }
}
/* Markenkarten: alle in derselben Fläche, auch Onyx (war lila). */
:root .reference-brand-card--onyx .reference-brand-panel,
:root .reference-brand-card--onyx .reference-strip-card__frame { background: #fff; }
/* /bewertungen/: Überschrift mittig, ohne Sterne daneben. */
.review-hero { text-align: center; }
.review-hero h1 { margin-inline: auto; }
/* /bewertungen/: ohne Sterne braucht der Kopf kein Zweispalter mehr. */
@media (min-width: 900px) { .review-hero { display: block; } }
/* Gezeichnete Köpfe bei den Stimmen. */
.stimmen-mehr__avatar { display: block; width: 56px; height: 56px; margin: 14px 0 6px; }

/* ── Spiegel nach dem Hero (24.09.2026) ──────────────────────────────────
   Erst erkennt sich der Inhaber, dann kommt die Antwort. Ruhig gesetzt:
   eine Frage, drei Sätze mit gezeichnetem Strich, die Wende, der Anspruch. */

/* „Was acessio.de kann": mehr Abstand zwischen Titel und erstem Bild (Victor 24.09.2026). */
.vorteile__kopf { margin-bottom: clamp(44px, 5.6vw, 84px) !important; }

/* Gezeichneter Handlungsaufruf unter den vier Punkten. */
.kann-schluss p { margin: 0; }
.kann-schluss__wege { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 22px; margin-top: 22px !important; }
.kann-schluss__mehr { color: var(--ink); font-size: 16px; font-weight: 600; text-decoration: underline; text-decoration-color: var(--cta, #22C7D6); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.kann-schluss__mehr:hover { color: var(--cta-tief, #0E8A97); }

/* ── „Das Angebot." von Hand, Knopf mit 0,00-€-Folge (24.09.2026 abends) ─────────
   Victor: Titel „so schreiben, diese Schrift"; Knopf mehr Abstand; im Symbol kurz „0,00 €",
   dann Pfeil bzw. Umschlag. Zurücknehmen: btn--angebot-Regeln löschen, Titel als Text. */
.kann-angebot__titel { margin: 0 0 12px; line-height: 0; }
.kann-angebot__titel img { display: inline-block; width: auto; height: clamp(38px, 3.4vw, 50px); }
.kann-angebot .kann-schluss__wege { margin-top: 34px !important; }
/* Als <img>, nicht als CSS-Maske: eine Maske friert die SMIL-Folge ein (geprueft 24.09.2026). */
:root .kann-angebot .btn--angebot::after { display: none; }
:root .kann-angebot .btn--angebot .btn__folge { display: inline-block; flex: none; width: 3.2em; height: 1.6em; margin: -0.3em 0 -0.3em 0.1em; }
:root .kann-angebot .btn--angebot .btn__folge--still { display: none; }
@media (prefers-reduced-motion: reduce) {
  :root .kann-angebot .btn--angebot .btn__folge { display: none; }
  :root .kann-angebot .btn--angebot .btn__folge--still { display: inline-block; }
}
@media (max-width: 859px) {
  .kann-angebot__titel img { height: 36px; }
  .kann-angebot .kann-schluss__wege { margin-top: 28px !important; }
}

/* === /assets/css/branchen-20260921.css === */
/* ═════════════════════════════════════════════════════════════════════════
   Branchen, 21.09.2026 — Hub, drei Branchenseiten und der Startseiten-Block.

   Vorgabe Victor: drei klare Einstiege (Praxen, Handwerk, Handel & Shops),
   jeweils mit echter Referenz. Keine neue Farbe und keine neue Schrift:
   Canvas, Ink, Cyan (--cta) und die drei vorhandenen Projektflächen tragen
   alles. Jede Branche bekommt eine Fläche und einen dunklen Begleitton.
   Signatur: das Fragezeichen aus der Wortmarke steht vor den Fragen, die
   Besucher der Branche wirklich stellen.
   Alle Regeln sind auf .br-* und .branchen-start begrenzt.
   ═════════════════════════════════════════════════════════════════════════ */

:root {
  --br-flaeche-praxen: #ddf8fa;
  --br-flaeche-handwerk: #eae7ff;
  --br-flaeche-handel: #ecf9db;
  --br-ton-praxen: #075b62;
  --br-ton-handwerk: #54447b;
  --br-ton-handel: #3b612b;
  --br-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --br-schatten: 0 1px 0 rgba(25, 25, 28, .05), 0 26px 60px -22px rgba(25, 25, 28, .34);
  --br-abstand: clamp(64px, 8vw, 120px);
}

.br-seite,
.br-wahl__eintrag--praxen,
.branchen-start__weg--praxen { --br-flaeche: var(--br-flaeche-praxen); --br-ton: var(--br-ton-praxen); }
.br-seite--handwerk,
.br-wahl__eintrag--handwerk,
.branchen-start__weg--handwerk { --br-flaeche: var(--br-flaeche-handwerk); --br-ton: var(--br-ton-handwerk); }
.br-seite--handel,
.br-wahl__eintrag--handel,
.branchen-start__weg--handel { --br-flaeche: var(--br-flaeche-handel); --br-ton: var(--br-ton-handel); }

/* ── Typografie der Branchenseiten ─────────────────────────────────────── */
.br-seite h1 {
  max-width: 15ch;
  hyphens: manual;
  overflow-wrap: normal;
  margin: 0;
  font-size: clamp(40px, 5.3vw, 78px);
  line-height: 1.04;
}
.br-seite h2 {
  max-width: 18ch;
  margin: 0;
  font-size: clamp(32px, 3.8vw, 56px);
  line-height: 1.06;
}
.br-seite h3 { margin: 0; font-weight: 700; }
.br-kopf-text {
  max-width: 46ch;
  margin: 18px 0 0;
  color: var(--ink-2);
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.55;
}

@media (max-width: 420px) {
  .br-seite h1 { font-size: clamp(33px, 9.4vw, 40px); }
  .br-seite h2 { hyphens: manual; }
}

/* Textlinks mit Pfeil: gleiche Form überall auf den Branchenseiten. */
.br-textlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--ink);
  font-size: 15.5px;
  font-weight: 650;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}
.br-textlink span { transition: transform 160ms ease-out; }
.br-textlink:hover span { transform: translateX(4px); }
.br-textlink:focus-visible { outline: 3px solid var(--cta-tief); outline-offset: 4px; border-radius: 2px; }

/* ── Browserfenster: dieselbe Bauform wie der Werkstapel der Startseite ── */
.br-fenster {
  margin: 0;
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--br-schatten);
}
.br-fenster__leiste {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 12px;
  background: #fff;
  border-bottom: 1px solid rgba(25, 25, 28, .08);
}
.br-fenster__leiste i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #DDD7D1; }
.br-fenster__leiste span {
  min-width: 0;
  margin-left: 8px;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.br-fenster img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: top center;
}

/* ── 1 · Hero der Branchenseite ────────────────────────────────────────── */
.br-held {
  display: grid;
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
  padding-top: clamp(108px, 14vh, 168px);
  padding-bottom: clamp(48px, 7vw, 110px);
}
@media (min-width: 980px) {
  .br-held {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
    min-height: min(86svh, 860px);
  }
}
.br-pfad {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 10px;
  margin: 0 0 clamp(10px, 1.6vw, 22px);
  color: var(--muted);
  font-size: 14px;
}
.br-pfad a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink-2);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.br-pfad a:focus-visible { outline: 3px solid var(--cta-tief); outline-offset: 2px; border-radius: 2px; }
.br-pfad [aria-current] { color: var(--ink); font-weight: 600; }
.br-held__satz {
  max-width: 40ch;
  margin: clamp(18px, 2vw, 28px) 0 clamp(24px, 2.8vw, 36px);
  color: var(--ink-2);
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.5;
}

/* Die Bühne: Branchenfläche, darin zwei Fenster, die unten angeschnitten
   aus der Fläche wachsen. Das vordere Bild steht vom ersten Frame an. */
.br-buehne {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 640px;
  aspect-ratio: 1 / 0.94;
  justify-self: center;
  overflow: hidden;
  border-radius: 28px;
  background: var(--br-flaeche);
}
.br-buehne .br-fenster { position: absolute; width: 58%; }
.br-buehne .br-fenster--vorne { left: 33%; top: 15%; z-index: 2; transform: rotate(-2deg); }
.br-buehne .br-fenster--hinten {
  left: 8%;
  top: 8%;
  z-index: 1;
  transform: rotate(-7deg);
  animation: br-faechern 1000ms var(--br-ease) 150ms both;
}
.br-buehne .br-kachel--hinten {
  position: absolute;
  left: 5%;
  top: 44%;
  z-index: 3;
  width: 36%;
  transform: rotate(-6deg);
  animation: br-faechern 1000ms var(--br-ease) 150ms both;
}
@keyframes br-faechern {
  from { transform: translate(34%, 8%) rotate(-2deg); }
  to { transform: rotate(-7deg); }
}
@media (max-width: 979px) {
  .br-buehne { max-width: 560px; aspect-ratio: auto; height: clamp(250px, 72vw, 400px); justify-self: stretch; }
  .br-buehne .br-fenster { width: 54%; }
  .br-buehne .br-fenster--vorne { left: 38%; top: 14%; }
  .br-buehne .br-fenster--hinten { left: 8%; top: 8%; }
  .br-buehne .br-kachel--hinten { width: 34%; top: 40%; left: 5%; }
}

/* Markenkachel: Logos, wo kein Website-Bild vorliegt. */
.br-kachel {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  padding: clamp(12px, 1.8vw, 28px);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--br-schatten);
}
.br-kachel--dunkel { background: var(--ink); }
.br-kachel img { display: block; flex: 1 1 auto; width: 100%; min-width: 0; height: auto; }

/* ── 2 · Was Besucher wissen wollen ───────────────────────────────────── */
.br-fragen {
  display: grid;
  gap: clamp(32px, 4vw, 64px);
  padding-block: var(--br-abstand);
  border-top: 1px solid var(--line-2);
}
@media (min-width: 980px) {
  .br-fragen { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); align-items: start; }
}
.br-fragen__liste {
  display: grid;
  column-gap: clamp(28px, 3.4vw, 56px);
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line-2);
  list-style: none;
}
@media (min-width: 700px) {
  .br-fragen__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto auto; }
}
.br-frage {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 18px;
  row-gap: 8px;
  padding: 28px 0 30px;
  border-bottom: 1px solid var(--line-2);
}
/* Gemeinsame Zeilen je Reihe: Antworten beginnen nebeneinander auf einer
   Linie, auch wenn eine Frage umbricht. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 700px) {
    .br-frage { grid-row: span 2; grid-template-rows: subgrid; }
  }
}
.br-frage__zeichen {
  display: grid;
  place-items: center;
  grid-row: 1;
  align-self: start;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--br-flaeche);
  color: var(--br-ton);
  font: 800 22px/1 var(--sans);
}
.br-frage h3 {
  align-self: center;
  font-size: clamp(19px, 1.45vw, 22px);
  line-height: 1.28;
  letter-spacing: -0.015em;
}
.br-frage p {
  grid-column: 2;
  margin: 0;
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.55;
}

/* ── 3 · Was wir dafür bauen ──────────────────────────────────────────── */
.br-bau { padding-bottom: var(--br-abstand); }
.br-bau__liste {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: clamp(30px, 4vw, 52px) 0 0;
  padding: 0;
  border-top: 1px solid var(--line-2);
  border-inline-start: 1px solid var(--line-2);
  list-style: none;
}
.br-bau__liste li { min-width: 0; border-inline-end: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.br-bau__liste a {
  position: relative;
  display: grid;
  grid-template-rows: 30px auto 1fr;
  gap: 12px;
  height: 100%;
  min-height: 210px;
  padding: 24px 22px 26px;
  color: var(--ink);
  text-decoration: none;
  transition: background-color 200ms ease;
}
.br-bau__liste a::after {
  content: "↗" / "";
  position: absolute;
  top: 20px;
  right: 20px;
  color: var(--muted);
  font-size: 15px;
  transition: transform 160ms ease-out, color 160ms ease-out;
}
.br-bau__liste svg {
  width: 30px;
  height: 30px;
  color: var(--accent);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.br-bau__name { margin-top: 14px; font-size: 18px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
.br-bau__text { color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.br-bau__liste a:hover { background: #fff; }
.br-bau__liste a:hover::after { color: var(--ink); transform: translate(2px, -2px); }
.br-bau__liste a:focus-visible { outline: 3px solid var(--cta-tief); outline-offset: -3px; }
.br-bau__mehr { margin: 22px 0 0; }
@media (max-width: 1040px) { .br-bau__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .br-bau__liste { grid-template-columns: 1fr; }
  .br-bau__liste a {
    grid-template-columns: 28px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 16px;
    row-gap: 4px;
    min-height: 0;
    padding: 18px 44px 20px 16px;
  }
  .br-bau__liste svg { grid-row: span 2; width: 28px; height: 28px; }
  .br-bau__name { margin-top: 2px; font-size: 17px; }
  .br-bau__liste a::after { top: 18px; right: 16px; }
}

/* ── 4 · Referenzen als kleine Fallgeschichten ────────────────────────── */
.br-faelle { padding-block: var(--br-abstand); border-top: 1px solid var(--line-2); }
.br-fall {
  display: grid;
  gap: clamp(26px, 4vw, 72px);
  align-items: center;
  margin-top: clamp(44px, 6vw, 88px);
}
@media (min-width: 900px) {
  .br-fall { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .br-fall:nth-of-type(even) .br-fall__bild { order: 2; }
}
.br-fall__bild {
  position: relative;
  overflow: hidden;
  aspect-ratio: 5 / 4;
  border-radius: 24px;
  background: var(--br-flaeche);
}
.br-fall__bild .br-fenster { position: absolute; left: 14%; right: 14%; top: 11%; }
.br-fall__bild--marke { display: grid; place-items: center; }
.br-fall__bild--marke .br-kachel { width: min(46%, 240px); }
.br-fall__bild--dunkel { background: var(--ink); }
.br-fall__bild--dunkel img { width: min(62%, 340px); height: auto; }
.br-fall h3 { font-size: clamp(26px, 2.6vw, 38px); line-height: 1.1; letter-spacing: -0.03em; }
.br-fall__meta { margin: 10px 0 0; color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.br-fall dl { display: grid; gap: 18px; margin: clamp(20px, 2.4vw, 30px) 0 0; }
.br-fall dt { color: var(--accent); font-size: 14px; font-weight: 700; letter-spacing: .01em; }
.br-fall dd { max-width: 52ch; margin: 4px 0 0; color: var(--ink-2); font-size: 16.5px; line-height: 1.58; }
.br-fall__wege { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 28px; margin-top: clamp(18px, 2vw, 26px); }
.br-bald {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 650;
}
.br-bald::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--cta-tief); }

/* Kleiner Eintrag: ein Projekt, das erst erscheint. Logo und eine Zeile. */
.br-fall--klein { grid-template-columns: auto minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); }
.br-fall--klein .br-fall__bild { order: 0 !important; width: clamp(120px, 14vw, 180px); aspect-ratio: 1; border-radius: 20px; background: #fff; box-shadow: var(--br-schatten); }
.br-fall--klein .br-fall__bild img { width: 82%; height: auto; }
.br-fall--klein h3 { font-size: clamp(22px, 2vw, 28px); }

/* ── 5 · Kundenstimme ─────────────────────────────────────────────────── */
.br-stimme { padding-bottom: var(--br-abstand); }
.br-stimme__karte {
  display: grid;
  gap: clamp(22px, 4vw, 56px);
  align-items: center;
  margin: 0;
  padding: clamp(28px, 5vw, 72px);
  border-radius: 28px;
  background: var(--br-flaeche);
}
@media (min-width: 760px) {
  .br-stimme__karte:has(.br-stimme__bild) { grid-template-columns: auto minmax(0, 1fr); }
}
.br-stimme__bild picture img {
  display: block;
  width: clamp(92px, 13vw, 176px);
  height: clamp(92px, 13vw, 176px);
  border-radius: 50%;
  background: rgba(255, 255, 255, .6);
  object-fit: cover;
  object-position: 50% 8%;
}
.br-stimme__marke {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(140px, 17vw, 230px);
  aspect-ratio: 1;
  padding: clamp(14px, 2vw, 30px);
  border-radius: 24px;
  background: var(--ink);
}
.br-stimme__marke img { display: block; flex: 1 1 auto; width: 100%; min-width: 0; height: auto; }
@media (max-width: 759px) { .br-stimme__marke { width: 120px; border-radius: 18px; } }
.br-stimme__sterne { color: var(--br-ton); font-size: 16px; letter-spacing: .12em; line-height: 1; }
.br-stimme blockquote { margin: 16px 0 0; }
.br-stimme blockquote p {
  max-width: 40ch;
  margin: 0;
  color: var(--ink);
  font-family: var(--zitat);
  font-size: clamp(22px, 2.3vw, 33px);
  line-height: 1.36;
  letter-spacing: -0.01em;
}
.br-stimme .aus { color: color-mix(in srgb, var(--ink, #19191C) 45%, transparent); }
.br-stimme figcaption { display: grid; gap: 3px; margin-top: clamp(18px, 2vw, 26px); font-size: 15px; line-height: 1.45; }
.br-stimme__name { color: var(--ink); font-weight: 700; font-size: 16px; }
.br-stimme__rolle { color: var(--ink-2); }
.br-stimme__quelle a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink-2);
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.br-stimme__quelle a:hover { color: var(--ink); }
.br-stimme__quelle a:focus-visible { outline: 3px solid var(--cta-tief); outline-offset: 3px; }

/* ── 6 · Abschluss ────────────────────────────────────────────────────── */
.br-schluss {
  display: grid;
  gap: clamp(26px, 4vw, 72px);
  align-items: end;
  padding-block: clamp(64px, 8vw, 120px) clamp(88px, 11vw, 160px);
  border-top: 1px solid var(--line-2);
}
@media (min-width: 980px) { .br-schluss { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); } }
.br-schluss__wege { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: clamp(24px, 2.6vw, 34px); }
.br-foerder { max-width: 38ch; padding-inline-start: 22px; border-inline-start: 3px solid var(--cta); }
.br-foerder p { margin: 0 0 6px; color: var(--ink-2); font-size: 15.5px; line-height: 1.55; }

/* ── Hub /branchen/ ───────────────────────────────────────────────────── */
.br-hub__kopf {
  display: grid;
  gap: 18px 56px;
  padding-top: clamp(112px, 15vh, 176px);
  padding-bottom: clamp(26px, 3.6vw, 52px);
}
@media (min-width: 980px) { .br-hub__kopf { grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr); align-items: end; } }
.br-hub__kopf .br-kopf-text { margin: 0 0 0.4em; }

.br-wahl__liste { display: grid; gap: clamp(16px, 2vw, 26px); margin: 0; padding: 0; list-style: none; }
.br-wahl__link {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: clamp(320px, 30vw, 420px);
  overflow: hidden;
  border-radius: 28px;
  background: var(--br-flaeche);
  color: var(--ink);
  text-decoration: none;
  isolation: isolate;
}
.br-wahl__link:focus-visible { outline: 3px solid var(--cta-tief); outline-offset: 5px; }
.br-wahl__eintrag:nth-child(even) .br-wahl__bild { order: -1; }
.br-wahl__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(28px, 4vw, 60px);
}
.br-wahl__name {
  margin: 0;
  font-size: clamp(42px, 5.6vw, 86px);
  line-height: 1;
  letter-spacing: -0.04em;
}
.br-wahl__satz {
  max-width: 34ch;
  margin-top: clamp(14px, 1.6vw, 22px);
  color: var(--ink-2);
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.5;
}
.br-wahl__ref { margin-top: auto; padding-top: 26px; color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }
.br-wahl__ref b { color: var(--ink); font-weight: 650; }
.br-wahl__pfeil {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-top: 16px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-size: 20px;
  transition: transform 220ms var(--br-ease);
}
.br-wahl__bild { position: relative; min-height: 220px; overflow: hidden; }
.br-wahl__bild .br-fenster {
  position: absolute;
  left: 17%;
  top: 13%;
  width: 64%;
  max-width: 400px;
  transform: rotate(-3deg);
  transition: transform 520ms var(--br-ease);
}
.br-wahl__eintrag:nth-child(even) .br-wahl__bild .br-fenster { transform: rotate(3deg); }
@media (hover: hover) and (pointer: fine) {
  .br-wahl__link:hover .br-wahl__bild .br-fenster { transform: translateY(-12px) rotate(0deg); }
  .br-wahl__link:hover .br-wahl__pfeil { transform: translateX(6px); }
}
.br-wahl__link:focus-visible .br-wahl__pfeil { transform: translateX(6px); }
@media (max-width: 760px) {
  .br-wahl__link { grid-template-columns: 1fr; min-height: 0; border-radius: 22px; }
  .br-wahl__bild,
  .br-wahl__eintrag:nth-child(even) .br-wahl__bild { order: -1; height: clamp(190px, 52vw, 260px); min-height: 0; }
  .br-wahl__bild .br-fenster { left: 22%; top: 26px; width: 56%; }
  .br-wahl__text { padding: 22px 22px 24px; }
  .br-wahl__ref { padding-top: 16px; }
  .br-wahl__pfeil { position: absolute; right: 18px; bottom: 20px; width: 46px; height: 46px; margin: 0; }
  .br-wahl__satz { padding-right: 52px; }
  .br-wahl__ref { padding-right: 58px; }
}

.br-offen {
  display: grid;
  gap: 20px 56px;
  align-items: end;
  margin-top: clamp(64px, 8vw, 120px);
  padding-block: clamp(40px, 5vw, 72px) clamp(88px, 11vw, 160px);
  border-top: 1px solid var(--line-2);
}
@media (min-width: 980px) { .br-offen { grid-template-columns: minmax(0, 1fr) auto; } }
.br-offen .br-kopf-text { margin-top: 14px; }

/* ── Startseiten-Block ────────────────────────────────────────────────── */
.branchen-start { padding-block: clamp(72px, 9vw, 140px); }
.branchen-start__kopf { display: grid; gap: 18px 56px; }
@media (min-width: 980px) { .branchen-start__kopf { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); align-items: end; } }
.branchen-start h2 {
  max-width: 16ch;
  margin: 0;
  font-size: clamp(34px, 4.2vw, 62px);
  line-height: 1.06;
}
.branchen-start__kopf p {
  max-width: 46ch;
  margin: 0 0 0.3em;
  color: var(--ink-2);
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.55;
}
.branchen-start__liste { margin: clamp(32px, 4vw, 56px) 0 0; padding: 0; border-top: 1px solid var(--line-2); list-style: none; }
.branchen-start__weg {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) auto;
  gap: clamp(18px, 3vw, 48px);
  align-items: center;
  padding: clamp(18px, 2.2vw, 28px) 0;
  border-bottom: 1px solid var(--line-2);
  color: var(--ink);
  text-decoration: none;
  isolation: isolate;
}
.branchen-start__weg::before {
  content: "";
  position: absolute;
  inset: 0 calc(-1 * clamp(0px, 1.4vw, 22px));
  z-index: -1;
  background: var(--br-flaeche);
  transform: scaleY(0);
  transform-origin: bottom center;
  transition: transform 320ms var(--br-ease);
}
.branchen-start__weg:hover::before,
.branchen-start__weg:focus-visible::before { transform: scaleY(1); }
.branchen-start__weg:focus-visible { outline: 3px solid var(--cta-tief); outline-offset: 2px; }
.branchen-start__name {
  font-size: clamp(30px, 3.5vw, 54px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.035em;
}
.branchen-start__satz { color: var(--ink-2); font-size: clamp(16px, 1.25vw, 19px); line-height: 1.5; }
.branchen-start__bild {
  position: relative;
  display: block;
  width: clamp(120px, 11vw, 168px);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 12px;
  background: var(--br-flaeche);
  box-shadow: 0 14px 30px -18px rgba(25, 25, 28, .45);
  transition: transform 420ms var(--br-ease);
}
.branchen-start__bild img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.branchen-start__pfeil {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-size: 15px;
  line-height: 1;
}
[dir="rtl"] .branchen-start__pfeil { right: auto; left: 8px; transform: scaleX(-1); }
@media (hover: hover) and (pointer: fine) {
  .branchen-start__weg:hover .branchen-start__bild { transform: rotate(-3deg) scale(1.04); }
}
.branchen-start__hinweis { margin: 16px 0 0; color: var(--muted); font-size: 14px; }
html:lang(zh) .branchen-start__name,
html:lang(ar) .branchen-start__name { letter-spacing: 0; line-height: 1.25; }
@media (max-width: 760px) {
  .branchen-start__weg { grid-template-columns: minmax(0, 1fr) auto; column-gap: 18px; row-gap: 6px; }
  .branchen-start__weg::before { inset: 0; }
  .branchen-start__name { grid-column: 1; grid-row: 1; }
  .branchen-start__satz { grid-column: 1; grid-row: 2; font-size: 15.5px; }
  .branchen-start__bild { grid-column: 2; grid-row: 1 / span 2; width: 96px; }
  .branchen-start__pfeil { width: 28px; height: 28px; font-size: 13px; right: 6px; bottom: 6px; }
}

/* ── Reduced Motion: vollständige ruhige Fassung ──────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .br-buehne .br-fenster--hinten,
  .br-buehne .br-kachel--hinten { animation: none; }
  .br-textlink span,
  .br-bau__liste a,
  .br-bau__liste a::after,
  .br-wahl__pfeil,
  .br-wahl__bild .br-fenster,
  .branchen-start__weg::before,
  .branchen-start__bild { transition: none !important; }
}

/* Zweites Fenster derselben Website: ein anderer Ausschnitt statt zweimal Kopf. */
.br-fenster--mitte img { object-position: 50% 34%; }

/* === /assets/css/anruf-20260922.css === */
/* Anruf-Hinweis ab 70 % Scrolltiefe (siehe anruf-20260922.js).
   Fassung 22.09.2026 spätabends, nach Victor („das finde ich nicht so clean"):
   eine ruhige Zeile unten rechts — rundes Bild, ein Satz, Anrufen, WhatsApp,
   Schließen. Keine Schräglage, kein Klebestreifen, ein Schatten. */
.anruf {
  position: fixed;
  right: clamp(16px, 2.4vw, 32px);
  bottom: clamp(16px, 2.4vw, 32px);
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: min(660px, calc(100vw - 32px));
  padding: 10px 12px 10px 14px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(25, 25, 28, .04), 0 18px 44px -20px rgba(25, 25, 28, .38), 0 0 0 1px rgba(25, 25, 28, .06);
  color: var(--ink, #19191C);
  font-family: var(--sans, Figtree, system-ui, sans-serif);
  opacity: 0;
  pointer-events: none;
  transform: translateY(14px);
  transition: opacity 240ms ease, transform 360ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.anruf.is-sichtbar { opacity: 1; pointer-events: auto; transform: none; }
.anruf__bild { flex: none; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.anruf__text { flex: 0 1 auto; min-width: 0; margin: 0; overflow: hidden; font-size: 14.5px; line-height: 1.35; white-space: nowrap; text-overflow: ellipsis; }
.anruf__text b { font-weight: 700; }
.anruf__text span { color: var(--muted, #6E6A66); }
.anruf__tel,
.anruf__wa {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 160ms ease, border-color 160ms ease;
}
.anruf__tel { background: var(--cta, #22C7D6); color: var(--cta-schrift, #151621); }
.anruf__tel:hover { background: var(--cta-hover, #16B4C2); }
.anruf__wa { border: 1px solid var(--line-2, #d9d4cf); color: var(--ink, #19191C); }
.anruf__wa:hover { border-color: var(--ink, #19191C); }
.anruf__tel svg,
.anruf__wa svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.anruf__zu {
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted, #6E6A66);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.anruf__zu:hover { background: rgba(25, 25, 28, .06); color: var(--ink, #19191C); }
.anruf a:focus-visible,
.anruf button:focus-visible { outline: 3px solid var(--cta-tief, #0E8A97); outline-offset: 3px; }

@media (max-width: 860px) {
  .anruf__text { display: none; }
}
@media (max-width: 640px) {
  .anruf {
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    max-width: none;
    justify-content: space-between;
    padding: 8px 8px 8px 12px;
    gap: 10px;
  }
  .anruf__text { display: block; flex: 1 1 auto; font-size: 13.5px; white-space: normal; }
  .anruf__text span { display: none; }
  .anruf__tel, .anruf__wa { min-height: 40px; padding: 0 12px; font-size: 14px; }
  .anruf__wa span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
@media (prefers-reduced-motion: reduce) {
  .anruf { transition: none; transform: none; }
}

/* Menü offen: Karte weg, sie läge sonst über dem Overlay (gleicher z-index, später im DOM). */
body:has(#site-menu:not([hidden])) .anruf { visibility: hidden; }

/* === /assets/css/site-20260921.css === */
/* ═════════════════════════════════════════════════════════════════════════
   Seitenweit, 21.09.2026 — sichtbare Desktop-Navigation.

   Unter 1100 px bleibt der zentrale Menüknopf wie bisher. Ab 1100 px ist
   genug Platz zwischen Wortmarke und Kopfaktionen: dann stehen die fünf
   Hauptpunkte direkt im Kopf, an derselben Stelle wie vorher der Knopf,
   also gemessen mittig. Das Overlay-Menü führt dieselben Punkte.
   ═════════════════════════════════════════════════════════════════════════ */
.kopfnav { display: none; }

@media (min-width: 1100px) {
  .header .nav-bars { display: none; }
  .kopfnav {
    position: absolute;
    left: 50%;
    top: 50%;
    display: flex;
    align-items: center;
    gap: clamp(20px, 1.7vw, 30px);
    transform: translate(-50%, -50%);
  }
  .kopfnav a {
    position: relative;
    padding: 12px 1px;
    color: var(--ink, #19191C);
    font: 600 15px/1 var(--sans, Figtree, system-ui, sans-serif);
    letter-spacing: -0.005em;
    text-decoration: none;
    white-space: nowrap;
  }
  .kopfnav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 5px;
    height: 2px;
    border-radius: 1px;
    background: var(--cta, #22C7D6);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 200ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .kopfnav a:hover::after,
  .kopfnav a[aria-current="page"]::after { transform: scaleX(1); }
  .kopfnav a:focus-visible { outline: 3px solid var(--cta-tief, #0E8A97); outline-offset: 4px; border-radius: 2px; }
  [dir="rtl"] .kopfnav a::after { transform-origin: right center; }
}

@media (prefers-reduced-motion: reduce) {
  .kopfnav a::after { transition: none; }
}

/* ═════════════════════════════════════════════════════════════════════════
   Seitenweit, 22.09.2026 — Wortmarke mit Domain, Sprachwahl rechts.

   1. „acessio.de": das „de" ist Figtree ExtraBold als Kontur (die Wortmarke
      ist dieselbe Schrift, gemessen am Seitenverhältnis des „o"). Gleiche
      Kastenhöhe wie die Wortmarke, Unterkante bündig: damit steht es auf
      derselben Grundlinie. Der cyanfarbene Punkt wird zum Domainpunkt.
   2. Sprachwahl bei den Kopfaktionen, dort wo sie gesucht wird. Am Phone
      steht sie links vom Menüknopf, der ganz außen bleibt.
   ═════════════════════════════════════════════════════════════════════════ */
.brand .brand__de {
  display: block;
  flex-shrink: 0;
  width: auto;
  height: var(--marke-h);
  margin-inline-start: calc(var(--marke-h) * 0.03);
}
[dir="rtl"] .brand .brand__de { margin-inline-start: 0; margin-left: calc(var(--marke-h) * 0.03); }

.header__actions { --marke: 34px; }
.header__actions .sprachwahl { transform: none; }
.header__actions .sprachwahl > summary { height: 40px; }
.header__actions .sprachwahl__liste { inset-inline-start: auto; inset-inline-end: 0; }
/* Unter 861 px blendete global-cd den ganzen Aktionskasten aus (dort stand
   nur der Handlungsaufruf). Jetzt bleibt er für die Sprachwahl sichtbar,
   der Handlungsaufruf fehlt dort weiterhin wie bisher. */
@media (max-width: 860px) {
  .header > .header__actions { display: flex; order: 2; margin-inline-start: auto; gap: 10px; --marke: 30px; }
  .header__actions .nav-cta { display: none; }
  .header__actions .sprachwahl > summary { height: 36px; }
  .header > .nav-bars { order: 3; margin-inline-start: 0; }
}

/* ═════════════════════════════════════════════════════════════════════════
   Footer, 22.09.2026 — Gliederung neu.
   Absender (ein Satz, Anschrift, Bewertung), dann Leistungen, Branchen,
   (Städte & Regionen), acessio. Unten Rechtliches und Sprachen in einer
   Zeile. Am Phone sind die Gruppen aufklappbar (fuss-20260922.js), die
   Links stehen trotzdem im HTML. Farben kommen aus dem Sockel (--fuss-*).
   ═════════════════════════════════════════════════════════════════════════ */
.footer__gliederung--neu { grid-template-columns: minmax(0, 1fr); gap: 0; }
.footer__gliederung--neu .footer__gruppe { min-width: 0; }
.footer__gliederung--neu .footer__gruppe > summary { list-style: none; cursor: default; }
.footer__gliederung--neu .footer__gruppe > summary::-webkit-details-marker { display: none; }
.footer__gliederung--neu .footer__liste { gap: 9px; }
.footer__absender { display: grid; gap: 14px; align-content: start; padding-bottom: 26px; }
.footer__satz { max-width: 30ch; margin: 0; color: var(--fuss-schrift); font-size: 15px; font-weight: 600; line-height: 1.4; }
.footer__adresse { margin: 0; color: var(--fuss-leise); font-size: 14.5px; font-style: normal; line-height: 1.6; }
.footer__adresse a { color: inherit; text-decoration: none; }
.footer__adresse a:hover, .footer__adresse a:focus-visible { color: var(--fuss-schrift); text-decoration: underline; }
.footer__absender .footer__grating { justify-self: start; color: var(--fuss-schrift); font-size: 14.5px; font-weight: 600; text-decoration: none; }
.footer__sockel .footer__marke .brand .brand__de path { fill-opacity: .62; }

@media (max-width: 699px) {
  .footer__gliederung--neu .footer__gruppe:not(.footer__absender) { border-top: 1px solid var(--fuss-linie); }
  .footer__gliederung--neu .footer__gruppe > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 52px;
    margin: 0;
    cursor: pointer;
  }
  .footer__gliederung--neu .footer__gruppe > summary::after {
    content: "";
    width: 9px;
    height: 9px;
    margin-inline-end: 4px;
    border-right: 1.6px solid var(--fuss-schrift);
    border-bottom: 1.6px solid var(--fuss-schrift);
    transform: translateY(-3px) rotate(45deg);
    transition: transform 180ms ease;
  }
  .footer__gliederung--neu .footer__gruppe[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
  .footer__gliederung--neu .footer__gruppe[open] .footer__liste { padding-bottom: 14px; }
  .footer__gliederung--neu .footer__gruppe a { min-height: 40px; }
}
@media (min-width: 700px) {
  .footer__gliederung--neu { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px clamp(28px, 3vw, 48px); }
  .footer__gliederung--neu .footer__absender { grid-column: 1 / -1; padding-bottom: 0; }
}
@media (min-width: 960px) {
  .footer__gliederung--vier { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__gliederung--fuenf { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1240px) {
  .footer__gliederung--vier { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); }
  .footer__gliederung--fuenf { grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); }
  .footer__gliederung--neu .footer__absender { grid-column: auto; }
}

.footer__meta--neu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 28px;
  max-width: var(--max);
  margin: 0 auto;
  padding: 22px var(--gutter) 0;
  border-top: 1px solid var(--fuss-linie);
  font-size: 13.5px;
}
.footer__meta--neu .footer__jahr { order: 3; flex-basis: 100%; text-align: start; }
.footer__recht, .footer__sprachen { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.footer__recht a, .footer__sprachen a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--fuss-leise);
  text-decoration: none;
}
.footer__recht a:hover, .footer__sprachen a:hover,
.footer__recht a:focus-visible, .footer__sprachen a:focus-visible { color: var(--fuss-schrift); text-decoration: underline; }
.footer__sprachen a[aria-current] { color: var(--fuss-schrift); font-weight: 700; }
@media (max-width: 699px) {
  .footer__recht a, .footer__sprachen a { min-height: 44px; }
}

/* Sprachen im Menü-Overlay: eine ruhige Zeile unter dem Handlungsaufruf.
   Doppelte Klasse, weil die Menüregeln für „.site-menu nav a" sonst greifen
   (große Schrift, rechtsbündiges Raster). */
.site-menu .site-menu__sprachen {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  justify-items: initial;
  gap: 4px 18px;
  margin-top: 22px;
  text-align: center;
}
.site-menu .site-menu__sprachen a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  color: var(--ink-2, #2B2B2F);
  font: 500 15px/1.2 var(--sans, Figtree, system-ui, sans-serif);
  letter-spacing: 0;
  text-decoration: none;
}
.site-menu .site-menu__sprachen a[aria-current] { color: var(--ink, #19191C); font-weight: 700; }
.site-menu .site-menu__sprachen a:focus-visible { outline: 2px solid var(--ink, #19191C); outline-offset: 2px; }

/* Sprachwahl im Kopf ruhiger: Textknopf ohne Rand, Rand erst beim Überfahren.
   Am Phone steht sie im Menü und im Footer, der Kopf bleibt Marke + Menü. */
.header__actions .sprachwahl > summary { border-color: transparent; }
.header__actions .sprachwahl > summary:hover,
.header__actions .sprachwahl[open] > summary { border-color: var(--line-2); }
.header .brand .brand__de { color: #6B6B72; }
@media (max-width: 760px) {
  .header > .header__actions { display: none; }
  .header > .nav-bars { margin-inline-start: auto; }
}

/* ── Prüfbefunde 22.09.2026 ──────────────────────────────────────────────
   Fokus und Ankersprünge landen nicht mehr unter dem festen Kopf.
   Sanftes Scrollen nur, wenn keine reduzierte Bewegung gewünscht ist. */
html { scroll-padding-top: calc(var(--kopf-hoehe, 90px) + 12px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } }

/* Fünf Kontaktwege seit 22.09.2026 (WhatsApp dazu). */
@media (min-width: 900px) { .footer__actions { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* ═════════════════════════════════════════════════════════════════════════
   Gezeichnet, 22.09.2026 abends (Victor: „im gezeichneten AWGE-Stil …
   Formular und Call-to-Action … einzelne Elemente mit diesem Gezeichneten").
   Gleiche Tusche wie im Shop (shopgen/zeichen.cjs), keine neue Farbe.
   Dehnbare Ränder: SVG mit preserveAspectRatio="none" und nicht skalierten
   Strichen, darum überall gleich dick.
   ═════════════════════════════════════════════════════════════════════════ */
:root {
  --zg-rand: url(/assets/img/zeichen/knopf-rand.svg);
  /* „an“-Fassungen zeichnen sich alle paar Sekunden neu (SMIL in der Datei). */
  --zg-knopf: url(/assets/img/zeichen/knopf-rand-an.svg);
  --zg-pfeil: url(/assets/img/zeichen/pfeil-an.svg);
  --zg-pfeil-knopf: url(/assets/img/zeichen/pfeil-knopf-an.svg);
  --zg-kreis: url(/assets/img/zeichen/kreis-an.svg);
  --zg-kreis-voll: url(/assets/img/zeichen/kreis-voll-an.svg);
  --zg-linie: url(/assets/img/zeichen/linie-an.svg);
  --zg-nav: url(/assets/img/zeichen/nav-strich-an.svg);
  --zg-feld: url(/assets/img/zeichen/feld-rand.svg);
  --zg-papier: url(/assets/img/zeichen/papier-rand.svg);
  --zg-radius: 16px 26px 18px 24px / 24px 16px 26px 18px;
  /* Knopf oben rechts: Umschlag, durchgestrichen, Pfeil, durchgestrichen, Haken. */
  --zg-navfolge: url(/assets/img/zeichen/nav-folge.svg);
}

/* Knöpfe: unregelmäßige Kante, handgezogener Doppelrand, versetzter Druckschatten. */
:is(.btn--primary, .lp-button) {
  position: relative;
  isolation: isolate;
  border-radius: var(--zg-radius);
  transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 180ms cubic-bezier(0.2, 0.8, 0.2, 1), background-color 160ms ease;
}
:is(.btn--primary, .lp-button)::before {
  content: "";
  position: absolute;
  inset: -5px -6px -6px -5px;
  z-index: 1;
  background: var(--zg-rand) 0 0 / 100% 100% no-repeat;
  pointer-events: none;
}
.btn--primary { box-shadow: 2px 3px 0 var(--ink, #19191C); }
.lp-button { box-shadow: 4px 5px 0 var(--cta, #22C7D6); }
:is(.btn--primary, .lp-button):hover { transform: translate(-1px, -2px) rotate(-1deg); }
.btn--primary:hover { box-shadow: 4px 5px 0 var(--ink, #19191C); }
.lp-button:hover { box-shadow: 6px 7px 0 var(--cta, #22C7D6); }
:is(.btn--primary, .lp-button):active { transform: translate(2px, 3px); box-shadow: 0 0 0 var(--ink, #19191C); }

/* Textmarker als Pinselzug statt glatter Fläche. */
:root .mk {
  /* inline statt inline-block: dann bekommt jede Zeile ihren eigenen Strich in Textbreite
     (box-decoration-break: clone steht schon in global-cd-20260909.css). */
  display: inline;
  background-color: transparent;
  background-image: url(/assets/img/zeichen/marker-cyan.svg);
  /* Zeilenweise wiederholt: bei zwei Zeilen bekommt jede ihren eigenen Strich,
     statt dass der ganze Block eingefärbt wird. */
  /* 28.09.2026: no-repeat statt repeat-y. Die nach oben wiederholte Kachel lugte als dünner
     Streifen über dem Wort hervor (Victor: „dieser Strich oben"). Mehrzeilig malt
     box-decoration-break: clone je Zeile trotzdem einen eigenen Strich. */
  background-repeat: no-repeat;
  background-position: 0 0.2em;
  background-size: 100% 0.96em;
}
:root .mk--creme { background-image: url(/assets/img/zeichen/marker-lila.svg); }
/* Branchen-Hero: dort stand .mk auf inline-block, damit die alte Fläche keine Unterlängen
   verdeckt. Der gezeichnete Strich wird pro Zeile gemalt, die Ausnahme ist nicht mehr nötig. */
:root .praxis-hero h1 { hyphens: manual; }
:root .praxis-hero h1 .mk { display: inline; padding: 0 0.12em 0.04em; hyphens: manual; overflow-wrap: normal; }
:root .mk--terra { background-image: url(/assets/img/zeichen/marker-lime.svg); }

/* Schlussblock der Startseite: Pfeil zeigt auf den Knopf, ab Desktop. Der Rand-Pseudo des
   Knopfs wird nach links oben verlängert und trägt den Pfeil als zweite Ebene. */
@media (min-width: 1100px) {
  .final__cta.btn--primary::before {
    inset: -64px -6px -6px -148px;
    background:
      var(--zg-pfeil) 0 0 / 124px 83px no-repeat,
      var(--zg-knopf) right bottom / calc(100% - 143px) calc(100% - 58px) no-repeat;
  }
  [dir="rtl"] .final__cta.btn--primary::before { inset: -6px -6px -6px -5px; background: var(--zg-rand) 0 0 / 100% 100% no-repeat; }
}

/* Footer: lange Liste klappt auf (global.py, „N weitere"). */
.footer__mehr { display: grid; gap: 9px; }
.footer__mehr[open] > summary { margin-bottom: 0; }
.footer__mehr > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  color: var(--fuss-schrift);
  font-size: 14.5px;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.footer__mehr > summary::-webkit-details-marker { display: none; }
.footer__mehr > summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 180ms ease;
}
.footer__mehr[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.footer__mehr > summary:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 4px; }

/* ── Anfrageformular, gezeichnet ─────────────────────────────────────── */
.contact-page .enquiry-form {
  isolation: isolate;
  background: #fff;
  border: 0;
  border-radius: 6px 10px 8px 12px;
  box-shadow: 10px 12px 0 #eae7ff;
}
.contact-page .enquiry-form::before {
  content: "";
  position: absolute;
  inset: -7px -8px -8px -7px;
  z-index: 2;
  background: var(--zg-papier) 0 0 / 100% 100% no-repeat;
  pointer-events: none;
}
.contact-page .enquiry-form::after {
  content: "";
  position: absolute;
  top: -18px;
  left: 50%;
  width: 118px;
  height: 44px;
  margin-left: -59px;
  z-index: 3;
  background: url(/assets/img/zeichen/klebe.svg) center / contain no-repeat;
  transform: rotate(-4deg);
  pointer-events: none;
}
.contact-page .enquiry-form .field input:not([type=radio]):not([type=checkbox]),
.contact-page .enquiry-form .field textarea,
.contact-page .enquiry-form .field select {
  border: 0;
  border-radius: 10px 14px 9px 13px;
  background: #fbfaf8 var(--zg-feld) 0 0 / 100% 100% no-repeat;
}
.contact-page .enquiry-form .field input:not([type=radio]):not([type=checkbox]):focus,
.contact-page .enquiry-form .field textarea:focus,
.contact-page .enquiry-form .field select:focus {
  outline: 2px solid var(--cta-tief, #0E8A97);
  outline-offset: 3px;
  box-shadow: 4px 5px 0 #ddf8fa;
}
.contact-page .goal-options span {
  border: 0;
  border-radius: var(--zg-radius);
  background: #fff var(--zg-rand) 0 0 / 100% 100% no-repeat;
  font-weight: 600;
  transition: transform 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}
.contact-page .goal-options label:hover span { transform: rotate(-1deg); }
.contact-page .goal-options input:checked + span {
  background-color: var(--ink, #19191C);
  color: #fff;
  box-shadow: 3px 4px 0 var(--cta, #22C7D6);
  transform: rotate(-1.5deg);
}
.contact-page .submit-button {
  position: relative;
  isolation: isolate;
  justify-content: center;
  border-radius: var(--zg-radius);
  background: var(--ink, #19191C);
  color: #fff;
  font-weight: 750;
  font-size: 17px;
  letter-spacing: 0.01em;
  box-shadow: 5px 6px 0 var(--cta, #22C7D6);
  transform: rotate(-0.6deg);
  transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.contact-page .submit-button::before {
  content: "";
  position: absolute;
  inset: -5px -6px -6px -5px;
  background: var(--zg-knopf) 0 0 / 100% 100% no-repeat;
  pointer-events: none;
}
.contact-page .submit-button:hover { background: #000; transform: rotate(0deg) translate(-1px, -2px); box-shadow: 7px 8px 0 var(--cta, #22C7D6); }
.contact-page .submit-button:active { transform: translate(3px, 4px); box-shadow: 0 0 0 var(--cta, #22C7D6); }
.contact-page .contact-copy h1 em {
  background: url(/assets/img/zeichen/unterstrich.svg) 0 100% / 100% 0.3em no-repeat;
  padding-bottom: 0.06em;
}
@media (min-width: 1100px) {
  .contact-page .contact-copy { position: relative; }
  .contact-page .contact-copy::after {
    content: "";
    position: absolute;
    right: -58px;
    top: 150px;
    width: 124px;
    height: 83px;
    background: var(--zg-pfeil) center / contain no-repeat;
    transform: rotate(-18deg);
    pointer-events: none;
  }
  .contact-page .personal-contact { position: relative; }
  .contact-page .personal-contact::after {
    content: "";
    position: absolute;
    left: 58%;
    top: 108%;
    width: 190px;
    height: 190px;
    background: url(/assets/img/zeichen/figur-brief.svg) center / contain no-repeat;
    transform: rotate(9deg);
    pointer-events: none;
  }
  [dir="rtl"] .contact-page .contact-copy::after { right: auto; left: -58px; transform: scaleX(-1) rotate(-18deg); }
}

.f-action__icon img { width: 100%; height: 100%; }

/* Pfeil im Knopf: gezeichnet statt „→“, nimmt die Schriftfarbe, zeichnet sich neu. */
/* Ein Pfeil für alle Handlungsknöpfe: der gezeichnete. Das alte ↗ der Leistungsseiten weg. */
.lp-button > span[aria-hidden="true"] { display: none; }
:is(.btn--primary, .lp-button)::after {
  content: "";
  display: inline-block;
  flex: none;
  width: 1.6em;
  height: 0.95em;
  background: currentColor;
  -webkit-mask: var(--zg-pfeil-knopf) center / contain no-repeat;
  mask: var(--zg-pfeil-knopf) center / contain no-repeat;
}
[dir="rtl"] :is(.btn--primary, .lp-button)::after { content: ""; transform: scaleX(-1); }
[dir="rtl"] .btn--primary:hover::after { transform: scaleX(-1) translateX(4px); }

/* Zeichenweg der Startseite: gezeichnete Kreise und Handlinie. */
:root .zeichenweg__zeichen {
  border: 0;
  border-radius: 0;
  background: transparent var(--zg-kreis) center / 100% 100% no-repeat;
}
:root .zeichenweg__schritt.is-aktiv .zeichenweg__zeichen {
  background: transparent var(--zg-kreis-voll) center / 100% 100% no-repeat;
  color: #fff;
}
@media (min-width: 820px) {
  :root .zeichenweg::before {
    top: calc(var(--z-gr) / 2 - 6px);
    height: 12px;
    background: var(--zg-linie) 0 50% / 100% 100% no-repeat;
  }
}

/* Navigation: gezeichneter Unterstrich statt Balken. */
@media (min-width: 1360px) {
  :root .kopfnav a::after {
    bottom: 1px;
    height: 8px;
    border-radius: 0;
    background: var(--zg-nav) 0 50% / 100% 100% no-repeat;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Stille Fassungen: gleiche Zeichnung, ohne Neuzeichnen. */
  :root {
    --zg-knopf: var(--zg-rand);
    --zg-pfeil: url(/assets/img/zeichen/pfeil.svg);
    --zg-pfeil-knopf: url(/assets/img/zeichen/pfeil-knopf.svg);
    --zg-kreis: url(/assets/img/zeichen/kreis.svg);
    --zg-kreis-voll: url(/assets/img/zeichen/kreis-voll.svg);
    --zg-linie: url(/assets/img/zeichen/linie.svg);
    --zg-nav: url(/assets/img/zeichen/nav-strich.svg);
  }
  :is(.btn--primary, .lp-button, .contact-page .submit-button, .contact-page .goal-options span) { transition: none; }
  :is(.btn--primary, .lp-button):hover { transform: none; }
}

/* Alte Branchen-Pilotseiten (zahnarzt, friseur, anwalt …): Dort kommt der Primärknopf noch aus
   assets/css/system.css und ist eine fast weiße Pille auf heller Fläche. Gleiche Form und Farbe
   wie überall sonst, ohne das übrige Layout dieser Seiten anzufassen. */
.btn.btn-primary {
  position: relative;
  isolation: isolate;
  background: var(--cta, #22C7D6);
  color: var(--ink, #19191C);
  -webkit-text-fill-color: var(--ink, #19191C);
  border-radius: var(--zg-radius);
  box-shadow: 2px 3px 0 var(--ink, #19191C);
}
.btn.btn-primary:hover { background: var(--cta-hover, #16B4C2); box-shadow: 4px 5px 0 var(--ink, #19191C); transform: translate(-1px, -2px); }
.btn.btn-primary::before {
  content: "";
  position: absolute;
  inset: -5px -6px -6px -5px;
  z-index: 1;
  background: var(--zg-knopf) 0 0 / 100% 100% no-repeat;
  pointer-events: none;
}
.btn.btn-primary .btn-arrow { display: none; }
.btn.btn-primary::after {
  content: "";
  display: inline-block;
  flex: none;
  width: 1.6em;
  height: 0.95em;
  margin-inline-start: 6px;
  background: currentColor;
  -webkit-mask: var(--zg-pfeil-knopf) center / contain no-repeat;
  mask: var(--zg-pfeil-knopf) center / contain no-repeat;
}

/* ── Alte Branchen-Pilotseiten geradeziehen (Prüfung 22.09.2026) ─────────
   Diese neun Seiten (zahnarzt, friseur, anwalt, chirurgie, coaching, hotel,
   optiker, restaurant, steuerberater) laden noch assets/css/system.css, ein
   Farbsatz für dunklen Grund. Auf der hellen Fläche stand dadurch weiße
   Schrift auf Weiß (über 40 Stellen je Seite), und über dem Kopf lag eine
   zweite Navigation. Die Seiten behalten ihr Layout, bekommen aber die
   Farbrollen und die eine Signalfarbe der übrigen Website. */
body:has(.sub-hero) {
  --bg-base: #F3F1F0;
  --bg-elevated: #ffffff;
  --bg-card: rgba(25, 25, 28, .03);
  --bg-card-hover: rgba(25, 25, 28, .06);
  --bg-glass: rgba(243, 241, 240, .72);
  --border-subtle: rgba(25, 25, 28, .08);
  --border-default: rgba(25, 25, 28, .14);
  --border-strong: rgba(25, 25, 28, .28);
  --text-primary: #19191C;
  --text-secondary: #4A4A4F;
  --text-tertiary: #6E6A66;
  --text-muted: #7A756F;
  --accent-blue: #0E8A97;
  --accent-blue-soft: rgba(34, 199, 214, .16);
  --accent-amber: #0E8A97;
  --accent-magenta: #0E8A97;
  --accent-emerald: #0E8A97;
}
/* Die Seite hat oben schon den globalen Kopf; die alte Leiste darüber entfällt. */
:root .nav-wrap,
:root .mobile-menu { display: none; }

/* Große Überschriften nicht mitten im Wort trennen (Prüfung: „Web-sites“, „ers-ten“, „leich-ter“). */
@media (max-width: 700px) {
  :is(h1, h2, .display, .final__gross, .article-hero__title, .references-overview__title, .mk) {
    hyphens: manual;
    overflow-wrap: break-word;
  }
}

/* Fußnoten auf /projekt-herzberg waren 9–11 px groß: Trefffläche auf 24 px bringen. */
a[id^="hz-ref"] { position: relative; }
a[id^="hz-ref"]::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
}

/* Sterne gezeichnet (23.09.2026). Die Zeichen bleiben im Quelltext, sichtbar ist die Zeichnung;
   die Farbe kommt aus der Stelle, an der sie steht. */
:root .stars {
  display: inline-block;
  width: 5.1em;
  height: 1.1em;
  vertical-align: -0.2em;
  overflow: hidden;
  background: currentColor;
  -webkit-mask: url(/assets/img/zeichen/sterne.svg) left center / contain no-repeat;
  mask: url(/assets/img/zeichen/sterne.svg) left center / contain no-repeat;
  color: var(--stern, #E3A008);
  text-indent: -9em;
  letter-spacing: 0;
}
:root .ref-bewertet .stars { color: var(--cta, #22C7D6); }

/* ── Kontaktbereich hell (23.09.2026) ────────────────────────────────────
   Victor: „dann machen wir den Footer-Bereich, dort wo accessible steht,
   global auf der ganzen Seite jetzt auch weiß wie der Hintergrund. Die
   weißen Symbole werden schwarz gemacht. Das C bleibt türkis."
   Der Sockel darunter bleibt, wie er ist; der schwarze Block dazwischen
   fällt weg, damit oben und unten dieselbe Fläche steht. */
:root .footer {
  --fuss-schrift: #19191C;
  --fuss-leise: rgba(25, 25, 28, .66);
  --fuss-linie: rgba(25, 25, 28, .16);
  background: var(--canvas, #F3F1F0);
  color: var(--ink, #19191C);
  border-top: 1px solid rgba(25, 25, 28, .10);
  /* Ohne den schwarzen Block braucht der Kopf des Bereichs weniger Vorlauf. */
  padding-block: clamp(64px, 8vw, 112px) 36px;
}
:root .footer__eyebrow { color: var(--cta-tief, #0E8A97); }
:root .footer__tagline { color: var(--ink, #19191C); }
:root .f-action,
:root .f-action__icon,
:root .f-action__label { color: var(--ink, #19191C); }
:root .f-action__value { color: rgba(25, 25, 28, .62); }
:root .footer a:focus-visible { outline-color: var(--ink, #19191C); }

/* Das gezeichnete „(c)" läuft in der Zeile mit und wächst mit der Schrift. */
:root .footer__tagline .klammer {
  display: inline-block;
  width: 0.78em;
  margin: 0 0.02em;
  vertical-align: -0.11em;
}
:root .footer__tagline .klammer img { display: block; width: 100%; height: auto; }

/* Worterklärung statt Werbesatz: ruhiger Satz, etwas schmaler als vorher. */
:root .footer__glosse {
  max-width: 46ch;
  color: rgba(25, 25, 28, .70);
  font-size: clamp(14.5px, 1.05vw, 16px);
  line-height: 1.6;
}

/* Oldschool-Telefon neben der Rufnummer im Abschluss; der ganze Link bleibt klickbar. */
.final__tel { display: inline-flex; align-items: center; gap: 10px; }
.final__telzeichen { display: block; width: 30px; height: 30px; flex: none; }
.final__telzeichen img { display: block; width: 100%; height: 100%; }

/* ── Fußtitel als Tippschleife (23.09.2026) ─────────────────────────────
   Victor: „acessio.de schreiben, dann wird es, als wäre es mit der Maus
   markiert, gelöscht, dann accessible hingeschrieben, ein bisschen
   langsamer, und das wiederholt sich alle 15 bis 20 Sekunden."
   Grundstellung ohne Skript und bei reduzierter Bewegung: „accessible". */
:root .footer__tagline { display: block; text-align: center; }
.tagline__tipp {
  display: inline-block;
  min-height: 1em;
  white-space: nowrap;
  text-align: left;          /* wächst nach rechts, während der Kasten mittig bleibt */
  border-radius: 0.06em;
  transition: background-color 160ms ease;
}
/* Schreibstrich, solange getippt wird. */
.footer__tagline.is-tippt .tagline__tipp::after {
  content: "";
  display: inline-block;
  width: 0.06em;
  height: 0.78em;
  margin-left: 0.06em;
  background: currentColor;
  vertical-align: -0.06em;
  animation: tag-cursor 620ms steps(1, end) infinite;
}
/* Markierung wie mit der Maus, in der Farbe des Knopfes. */
.footer__tagline.is-markiert .tagline__tipp { background-color: rgba(34, 199, 214, .34); }
@keyframes tag-cursor { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

/* ── Der Knopf in der Kopfzeile erzählt den Weg (23.09.2026) ─────────────
   Victor: „zuerst zeichnet sich so ein Briefumschlag, dann streichen wir den
   einmal durch … dann einen Pfeil … dann einen Haken." Die Folge steckt in
   der Datei und läuft einmal; bei reduzierter Bewegung steht gleich der Haken. */
:root .nav-cta::after {
  content: "";
  width: 19px;
  height: 19px;
  flex: none;
  background: var(--zg-navfolge) center / contain no-repeat;
}
@media (prefers-reduced-motion: reduce) {
  :root { --zg-navfolge: url(/assets/img/zeichen/nav-folge-still.svg); }
}

/* /projekte: dieselbe Ruhe wie auf der Startseite (23.09.2026, Victor: „die blauen Ränder
   und die lila Kästen … das müssen wir natürlich auch hier machen"). */
:root .reference-card__frame {
  padding: 0;
  border: 0;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 1px 0 rgba(25, 25, 28, .05), 0 26px 44px -30px rgba(25, 25, 28, .45);
}
:root .reference-card--blue .reference-card__frame,
:root .reference-card--purple .reference-card__frame,
:root .reference-card--green .reference-card__frame { background: #fff; }
:root .reference-card__frame img { border: 0; box-shadow: none; border-radius: 14px; }

/* ── Handy-Feinschliff 24.09.2026 (Victor) ───────────────────────────────── */
/* Fünf Kontaktwege: auf dem Handy 2 + 2 + 1, der letzte mittig statt links („Büro mittig"). */
@media (max-width: 899px) {
  .footer__actions > .f-action:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; }
}
/* Markierung im Fußtitel läuft von rechts nach links, langsam. */
.footer__tagline .tagline__tipp {
  background-image: linear-gradient(rgba(34, 199, 214, .34), rgba(34, 199, 214, .34));
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 0% 100%;
  transition: background-size 900ms cubic-bezier(.2, .7, .3, 1);
}
.footer__tagline.is-markiert .tagline__tipp { background-color: transparent; background-size: 100% 100%; }
/* Hamburger-Menü: Einträge kommen nacheinander, nicht als Block. */
.site-menu:not([hidden]) nav a { animation: menue-rein 420ms cubic-bezier(.2, .7, .3, 1) both; }
.site-menu:not([hidden]) nav a:nth-child(1) { animation-delay: 40ms; }
.site-menu:not([hidden]) nav a:nth-child(2) { animation-delay: 90ms; }
.site-menu:not([hidden]) nav a:nth-child(3) { animation-delay: 140ms; }
.site-menu:not([hidden]) nav a:nth-child(4) { animation-delay: 190ms; }
.site-menu:not([hidden]) nav a:nth-child(5) { animation-delay: 240ms; }
.site-menu:not([hidden]) > .btn { animation: menue-rein 420ms 320ms cubic-bezier(.2, .7, .3, 1) both; }
@keyframes menue-rein { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .site-menu:not([hidden]) nav a, .site-menu:not([hidden]) > .btn { animation: none; }
  .footer__tagline .tagline__tipp { transition: none; }
}

/* projekte: Website-Karten 28.09.2026 */
/* Ganzseiten-Aufnahmen (1080 px breit) für S.A. Folientechnik, Stuttgarter Denkmale und Quest Immobilien.
   Die Karte zeigt den Seitenanfang wie bei Lindenthal/Herzberg. Mit der Maus fährt die Aufnahme langsam bis
   zum Seitenende durch und kehrt beim Verlassen zurück; auf Touch-Geräten und bei reduzierter Bewegung steht
   sie still. --seite-hoehe ist Bildhöhe/Bildbreite, --seite-rahmen die Rahmenhöhe/-breite (4:3, ab 780px 16:11). */
.reference-card--seite { --seite-rahmen: 0.75; --seite-hoehe: 8; --seite-dauer: 9s; }
.reference-card--seite-folientechnik { --seite-hoehe: 7.983; --seite-dauer: 9s; }   /* 8622 / 1080 */
.reference-card--seite-denkmale { --seite-hoehe: 6.48; --seite-dauer: 7.4s; }         /* 6998 / 1080 */
.reference-card--seite-quest { --seite-hoehe: 7.396; --seite-dauer: 8.4s; }           /* 7988 / 1080 */
@media (max-width: 780px) { .reference-card--seite { --seite-rahmen: 0.6875; } }
:root .reference-card--seite .reference-card__frame img {
  display: block;
  height: auto;
  border-radius: 0;
  box-shadow: none;
  transform: none;
  transform-origin: top center; /* greift die alte a:hover-Skalierung (Touch, reduzierte Bewegung), bleibt der Seitenanfang stehen */
  transition: transform 900ms var(--ease);
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  :root .reference-card--seite:hover .reference-card__frame img {
    transform: translateY(calc(-100% * (1 - var(--seite-rahmen) / var(--seite-hoehe))));
    box-shadow: none;
    transition: transform var(--seite-dauer) linear;
  }
}
/* Kennzeichnung nicht veröffentlichter Stände: „Entwurf" liegt oben links auf der Aufnahme und bleibt beim Durchfahren stehen. */
.reference-card__stand {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 1;
  padding: 7px 10px 6px;
  border-radius: 999px;
  background: rgba(25, 25, 28, .84);
  color: #F3F1F0;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
  pointer-events: none;
}

/* projektprofil: Belegblock + Telefonfeld 28.09.2026 */
/* Telefon (optional) und Rückmeldeweg in einer Reihe; die Chips übernehmen die Zeichnung der Anliegen-Knöpfe. */
.contact-page .kontaktweg { border: 0; padding: 0; margin: 0 0 20px; min-width: 0; }
.contact-page .kontaktweg legend { font: 600 14px/1.4 var(--sans); margin-bottom: 9px; padding: 0; }
.contact-page .kontaktweg .goal-options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.contact-page .kontaktweg .goal-options span { min-height: 52px; font-size: 14px; }
/* Zweispaltig braucht das Telefonfeld mehr Platz als die zwei Chips, sonst wird der Platzhalter abgeschnitten. */
@media (min-width: 1101px) { .contact-page .form-row--kontakt { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); } }
@media (min-width: 601px) and (max-width: 899px) { .contact-page .form-row--kontakt { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); } }
.contact-page .form-status__schneller .nobr { white-space: nowrap; }
.contact-page .form-status__schneller { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(25, 25, 28, .14); }
.contact-page .form-status__schneller a, .contact-page .form-status__referenz a { text-underline-offset: 4px; }
/* Belegblock: unter dem Formular (Handy), unter Victors Kontaktkarte (Desktop). */
.contact-page .contact-beleg { display: grid; gap: 16px; max-width: 46ch; padding-top: 24px; border-top: 1px solid rgba(25, 25, 28, .14); }
.contact-page .contact-beleg__bewertung { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; width: max-content; max-width: 100%; color: var(--ink, #19191C); font: 600 15px/1.3 var(--sans); text-decoration: none; }
.contact-page .contact-beleg__bewertung b { font-weight: 750; }
.contact-page .contact-beleg__bewertung:hover { text-decoration: underline; text-underline-offset: 4px; }
.contact-page .contact-beleg__bewertung:focus-visible { outline: 3px solid var(--cta-tief, #0E8A97); outline-offset: 4px; border-radius: 4px; }
.contact-page .contact-beleg__zitat { margin: 0; }
.contact-page .contact-beleg__zitat blockquote { margin: 0; }
.contact-page .contact-beleg__zitat p { font: 500 clamp(19px, 1.5vw, 22px)/1.35 var(--sans); letter-spacing: -.015em; max-width: 30ch; text-wrap: balance; }
.contact-page .contact-beleg__zitat figcaption { margin-top: 10px; font: 400 14px/1.5 var(--sans); color: #57534f; }
.contact-page .contact-beleg__zitat figcaption a { color: inherit; text-underline-offset: 3px; }
@media (min-width: 900px) {
  .contact-page .contact-layout { grid-template-rows: auto minmax(0, 1fr); }
  .contact-page .contact-layout > .enquiry-form { grid-column: 2; grid-row: 1 / span 2; }
  .contact-page .contact-beleg { grid-column: 1; grid-row: 2; align-self: start; }
}
@media (min-width: 1100px) {
  /* Die gezeichnete Figur hängt unter der Kontaktkarte (personal-contact::after, 190px); der Beleg rückt darunter. */
  .contact-page .contact-beleg { margin-top: 120px; }
}

/* menue: anruf-zeile 28.09.2026 */
/* Anruf und WhatsApp als ruhige Zeile unter „Vorhaben besprechen"; Doppelklasse wie bei den Sprachen,
   damit die großen Menüregeln nicht greifen. */
.site-menu .site-menu__anruf {
  margin: 0;
  text-align: center;
  color: var(--ink-2, #2B2B2F);
  font: 500 15px/1.4 var(--sans, Figtree, system-ui, sans-serif);
  letter-spacing: 0;
}
.site-menu .site-menu__anruf a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  color: inherit;
  font-weight: 650;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: rgba(43, 43, 47, .35);
  transition: color 200ms var(--ease, ease);
}
.site-menu .site-menu__anruf a:hover,
.site-menu .site-menu__anruf a:focus-visible { color: var(--cta-text, #097078); text-decoration-color: currentColor; }
.site-menu .site-menu__anruf a:focus-visible { outline: 2px solid var(--ink, #19191C); outline-offset: 2px; }
.site-menu:not([hidden]) > .site-menu__anruf { animation: menue-rein 420ms 380ms cubic-bezier(.2, .7, .3, 1) both; }
@media (prefers-reduced-motion: reduce) {
  .site-menu:not([hidden]) > .site-menu__anruf { animation: none; }
}

/* leistungen: weiter-zeile 28.09.2026 */
/* Schmale Zeile nach „Was zu dieser Leistung gehört": Knopfziel des Heros als Textlink plus Telefon.
   Spezifisch genug gegen „.page-leistungen main p" (Außenabstand). */
main p.lp-weiter.lp-wrap {
  margin: -40px auto 0;
  padding: 0 0 44px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--lp-muted, #5B5966);
}
.lp-weiter a {
  color: var(--lp-ink, #19191C);
  font-weight: 650;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  display: inline-block;
  padding-block: 8px;
}
.lp-weiter a:hover,
.lp-weiter a:focus-visible { color: var(--lp-accent, #097078); }

/* projektprofil: Rückruf-Karte 28.09.2026 (Victor: „Lieber einen Rückruf?" mit gezeichnetem Hörer,
   freie Zeiten, Nummer, Eintrag im Kalender). Verborgen, wenn die Function nicht antwortet. */
.contact-page .rueckruf { margin-top: 28px; padding: 22px 22px 20px; background: #fff; border: 1px solid rgba(25, 25, 28, .08); border-radius: var(--zg-radius, 18px); box-shadow: 0 1px 0 rgba(25, 25, 28, .04), 0 22px 44px -32px rgba(25, 25, 28, .35); max-width: 46ch; }
.contact-page .rueckruf[data-rueckruf-state="aus"] { display: none; }
.contact-page .rueckruf__kopf { display: flex; gap: 14px; align-items: flex-start; }
.contact-page .rueckruf__hoerer { flex: none; width: 52px; height: 52px; }
.contact-page .rueckruf__hoerer img { display: block; width: 100%; height: 100%; }
.contact-page .rueckruf h2 { margin: 2px 0 4px; font: 600 clamp(20px, 1.7vw, 24px)/1.15 var(--sans); letter-spacing: -.018em; color: var(--ink); }
.contact-page .rueckruf__kopf p { margin: 0; font-size: 15px; line-height: 1.5; color: #57534f; max-width: none; }
.contact-page .rueckruf__lade, .contact-page .rueckruf__leer { margin: 16px 0 0; font-size: 14.5px; color: #57534f; }
.contact-page .rueckruf__tage { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.contact-page .rueckruf__tag { padding: 7px 12px; border: 1.5px solid var(--ink); border-radius: 999px; background: transparent; font: 600 14px/1 var(--sans); color: var(--ink); cursor: pointer; }
.contact-page .rueckruf__tag[aria-selected="true"] { background: var(--ink); color: #fff; }
.contact-page .rueckruf__zeiten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; max-height: 176px; overflow-y: auto; padding-right: 2px; }
.contact-page .rueckruf__zeit { padding: 9px 4px; border: 1.5px solid rgba(25, 25, 28, .25); border-radius: 10px; background: #fff; font: 500 14.5px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink); cursor: pointer; }
.contact-page .rueckruf__zeit:hover { border-color: var(--ink); }
.contact-page .rueckruf__zeit[aria-pressed="true"] { background: var(--cta, #22C7D6); border-color: var(--ink); }
.contact-page .rueckruf__tag:focus-visible, .contact-page .rueckruf__zeit:focus-visible { outline: 3px solid var(--cta-tief, #0E8A97); outline-offset: 2px; }
.contact-page .rueckruf__form { display: grid; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(25, 25, 28, .12); }
.contact-page .rueckruf__wahl { margin: 0; font-size: 15px; color: var(--ink); }
.contact-page .rueckruf__feld { display: grid; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.contact-page .rueckruf__feld input { width: 100%; padding: 12px 14px; border: 1.5px solid rgba(25, 25, 28, .3); border-radius: 10px; font: 400 16px/1.3 var(--sans); background: #fff; }
.contact-page .rueckruf__feld input:focus { outline: 3px solid var(--cta, #22C7D6); outline-offset: 1px; border-color: var(--ink); }
.contact-page .rueckruf__honig { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-page .rueckruf__einwilligung { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.45; color: #57534f; font-weight: 400; }
.contact-page .rueckruf__einwilligung input { margin-top: 3px; flex: none; }
.contact-page .rueckruf__hinweis { margin: 0; font-size: 13px; color: #57534f; }
.contact-page .rueckruf__hinweis a { color: inherit; text-underline-offset: 3px; }
.contact-page .rueckruf__form .btn { justify-self: start; }
.contact-page .rueckruf__status { margin: 14px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink); }
.contact-page .rueckruf__status[data-art="fehler"] { color: #9b2c2c; }
.contact-page .rueckruf__status[data-art="ok"] { font-weight: 600; }
@media (max-width: 599px) { .contact-page .rueckruf { padding: 18px 16px 16px; } .contact-page .rueckruf__zeiten { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Rückruf-Karte: [hidden] muss gegen display:grid gewinnen; die gezeichnete Umschlag-Figur der
   Kontaktkarte würde in die Karte ragen, deshalb aus, wenn die Karte da ist. */
.contact-page .rueckruf__form[hidden], .contact-page .rueckruf__status[hidden], .contact-page .rueckruf__slots[hidden] { display: none; }
.contact-page .contact-copy:has(.rueckruf:not([data-rueckruf-state="aus"])) .personal-contact::after { display: none; }
/* Rückruf-Karte, zweite Fassung (Victor 28.09.2026): drei gezeichnete Uhren statt Zeitraster,
   gezeichnetes Fragezeichen in der Überschrift. */
.contact-page .rueckruf__wort { white-space: nowrap; }
.contact-page .rueckruf__frz { display: inline-block; height: .92em; width: auto; vertical-align: -.1em; margin-left: .06em; } /* Seite setzt img auf block */
.contact-page .rueckruf__uhren { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.contact-page .rueckruf__uhr { display: grid; justify-items: center; gap: 2px; padding: 12px 6px 10px; border: 1.5px solid rgba(25, 25, 28, .18); border-radius: 16px; background: #fff; cursor: pointer; font: inherit; color: var(--ink); transition: border-color 140ms ease, transform 140ms ease; }
.contact-page .rueckruf__uhr:hover { border-color: var(--ink); transform: translateY(-1px); }
.contact-page .rueckruf__uhr[aria-pressed="true"] { border-color: var(--ink); background: var(--cta, #22C7D6); }
.contact-page .rueckruf__uhr:focus-visible { outline: 3px solid var(--cta-tief, #0E8A97); outline-offset: 2px; }
.contact-page .rueckruf__blatt { position: relative; width: 72px; height: 72px; }
.contact-page .rueckruf__blatt img { display: block; width: 100%; height: 100%; }
.contact-page .rueckruf__zeiger { position: absolute; inset: 0; width: 100%; height: 100%; }
.contact-page .rueckruf__uhrzeit { margin-top: 6px; font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.contact-page .rueckruf__tageszeit { font-size: 12.5px; color: #57534f; }
.contact-page .rueckruf__uhr[aria-pressed="true"] .rueckruf__tageszeit { color: var(--ink); }
@media (max-width: 599px) { .contact-page .rueckruf__uhren { gap: 8px; } .contact-page .rueckruf__blatt { width: 64px; height: 64px; } .contact-page .rueckruf__uhr { padding: 10px 4px 8px; } }

/* Branchenseiten: „Zum Weiterlesen" (weiterlesen.py, 28.09.2026) — drei Ratgeberlinks vor dem Schluss. */
.br-lesen { padding-block: clamp(28px, 4vw, 56px) 0; }
.br-lesen nav { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 10px; }
.br-lesen nav a { color: var(--ink); font-size: 16px; font-weight: 600; text-decoration: underline; text-decoration-color: var(--cta, #22C7D6); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.br-lesen nav a:hover { color: var(--cta-tief, #0E8A97); }